From ffb4cb5d62958876da4d8fbb366a59ef4523ae21 Mon Sep 17 00:00:00 2001
From: menghao <mh18530625731@163.com>
Date: Tue, 11 Aug 2026 18:04:11 +0800
Subject: [PATCH] =?UTF-8?q?=E5=AE=8C=E5=96=84=E8=B5=84=E6=BA=90=E7=AE=A1?=
 =?UTF-8?q?=E7=90=86=E5=B7=A5=E4=BD=9C=E5=8F=B0=E4=B8=8E=E6=9C=89=E7=95=8C?=
 =?UTF-8?q?=E9=A2=84=E8=A7=88?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

将资源卡本体化并补齐分区缩放滚动与依赖聚类

增加全进程三槽预览调度范围取消与安全分块读取

保持布局 CAS 预览缓存回收和依赖图权威合同

补齐资源管理前端 Tauri AppSurface 回归并同步文档
---
 .../src-tauri/src/commands.rs                 |   83 +-
 .../src-tauri/src/image_inspect.rs            |   95 +-
 .../src-tauri/src/main.rs                     |    4 +
 .../src-tauri/src/project/resource_layout.rs  |   18 +-
 .../src-tauri/src/resource_inspect.rs         |   96 +-
 .../src/resource_preview_scheduler.rs         |  676 ++++++
 .../src-tauri/src/tests/project_tools.rs      |   86 +-
 .../SupervisorChatOnlyView.tsx                |    9 +
 .../projectResourcePreviewTransport.ts        |   51 +
 apps/ai-game-creator-shell/src/styles.css     |  388 ++--
 .../ResourceDependencyOverlay.tsx             |  907 ++++----
 .../src/view/project-development/index.tsx    | 1892 +++++++++++------
 .../resourceCanvasLayoutModel.ts              |  709 +++++-
 .../resourceCardPreviewModel.ts               |  167 ++
 .../resourceSectionHeightModel.ts             |  122 ++
 .../useProjectResourceCanvasLayout.ts         |  147 +-
 .../useProjectResourceCardPreviews.ts         |  659 ++++++
 .../useProjectResourceSectionHeights.ts       |  239 +++
 .../tests/ResourceDependencyOverlay.test.ts   |  551 ++++-
 .../tests/appSurface/harness.ts               |   22 +
 .../tests/appSurface/home.suite.ts            |    4 +-
 .../appSurface/project-development.suite.ts   | 1478 +++++++++++--
 .../tests/resourceCanvasLayoutModel.test.ts   |  382 +++-
 .../tests/resourceSectionHeightModel.test.ts  |  103 +
 .../useProjectResourceCanvasLayout.test.ts    |  130 +-
 .../useProjectResourceCardPreviews.test.ts    |  686 ++++++
 ...AI游戏创作】项目开发工作台PRD-2026-07-20.md |   76 +-
 ...��资源管理评审缺陷修复与阶段七收口-2026-08-11.md |  374 ++++
 .../shared-memory/decision-log.md             |   70 +-
 docs/project-memory/shared-memory/pitfalls.md |   68 +-
 ...�案】AI游戏创作智能体App实施计划-2026-06-24.md |   39 +-
 .../shared/src/contracts/gameCreationApp.ts   |   12 +
 32 files changed, 8777 insertions(+), 1566 deletions(-)
 create mode 100644 apps/ai-game-creator-shell/src-tauri/src/resource_preview_scheduler.rs
 create mode 100644 apps/ai-game-creator-shell/src/services/projectResourcePreviewTransport.ts
 create mode 100644 apps/ai-game-creator-shell/src/view/project-development/resourceCardPreviewModel.ts
 create mode 100644 apps/ai-game-creator-shell/src/view/project-development/resourceSectionHeightModel.ts
 create mode 100644 apps/ai-game-creator-shell/src/view/project-development/useProjectResourceCardPreviews.ts
 create mode 100644 apps/ai-game-creator-shell/src/view/project-development/useProjectResourceSectionHeights.ts
 create mode 100644 apps/ai-game-creator-shell/tests/resourceSectionHeightModel.test.ts
 create mode 100644 apps/ai-game-creator-shell/tests/useProjectResourceCardPreviews.test.ts
 create mode 100644 docs/project-memory/plans/【实施计划】资源管理评审缺陷修复与阶段七收口-2026-08-11.md

diff --git a/apps/ai-game-creator-shell/src-tauri/src/commands.rs b/apps/ai-game-creator-shell/src-tauri/src/commands.rs
index 4f3af8430..f13cea5f4 100644
--- a/apps/ai-game-creator-shell/src-tauri/src/commands.rs
+++ b/apps/ai-game-creator-shell/src-tauri/src/commands.rs
@@ -1255,14 +1255,32 @@ pub(crate) fn read_local_project_file(
 }
 
 #[tauri::command]
-pub(crate) fn read_local_project_image_preview(
+pub(crate) async fn read_local_project_image_preview(
+    preview_manager: tauri::State<'_, ProjectResourcePreviewReadManager>,
     project_path: String,
     relative_path: String,
+    scope_id: String,
+    request_id: String,
 ) -> Result<LocalProjectImagePreview, String> {
+    preview_manager
+        .run(&scope_id, &request_id, move |cancellation| {
+            read_local_project_image_preview_at(&project_path, &relative_path, cancellation)
+        })
+        .await
+}
+
+pub(crate) fn read_local_project_image_preview_at(
+    project_path: &str,
+    relative_path: &str,
+    cancellation: &ProjectResourcePreviewScopeCancellation,
+) -> Result<LocalProjectImagePreview, String> {
+    cancellation.check()?;
     let root = Path::new(project_path.trim());
     enforce_project_auto_permission_policy(root, "file.read")?;
+    cancellation.check()?;
     let normalized_path = normalize_relative_path(relative_path.trim())?;
     let manifest = read_manifest(&root.join(".agent/manifest.json"))?;
+    cancellation.check()?;
     let is_registered_asset = manifest
         .assets
         .iter()
@@ -1274,18 +1292,37 @@ pub(crate) fn read_local_project_image_preview(
     if !is_registered_asset && !is_completed_task_artifact {
         return Err("只能预览已登记资源或已完成任务的图片产物".to_string());
     }
-    load_local_project_image_preview(root, &normalized_path)
+    cancellation.check()?;
+    load_local_project_image_preview_with_cancellation(root, &normalized_path, cancellation)
 }
 
 #[tauri::command]
-pub(crate) fn read_local_project_text_preview(
+pub(crate) async fn read_local_project_text_preview(
+    preview_manager: tauri::State<'_, ProjectResourcePreviewReadManager>,
     project_path: String,
     relative_path: String,
+    scope_id: String,
+    request_id: String,
 ) -> Result<LocalProjectTextPreview, String> {
+    preview_manager
+        .run(&scope_id, &request_id, move |cancellation| {
+            read_local_project_text_preview_at(&project_path, &relative_path, cancellation)
+        })
+        .await
+}
+
+pub(crate) fn read_local_project_text_preview_at(
+    project_path: &str,
+    relative_path: &str,
+    cancellation: &ProjectResourcePreviewScopeCancellation,
+) -> Result<LocalProjectTextPreview, String> {
+    cancellation.check()?;
     let root = Path::new(project_path.trim());
     enforce_project_auto_permission_policy(root, "file.read")?;
+    cancellation.check()?;
     let normalized_path = normalize_relative_path(relative_path.trim())?;
     let manifest = read_manifest(&root.join(".agent/manifest.json"))?;
+    cancellation.check()?;
     let is_registered_document = manifest.assets.iter().any(|asset| {
         asset.local_path == normalized_path
             && is_supported_project_text_resource(&asset.local_path, &asset.media_type)
@@ -1297,19 +1334,44 @@ pub(crate) fn read_local_project_text_preview(
     if !is_registered_document {
         return Err("只能读取当前项目已登记的文档资源".to_string());
     }
-    load_local_project_text_preview(root, &normalized_path)
+    cancellation.check()?;
+    load_local_project_text_preview_with_cancellation(root, &normalized_path, cancellation)
 }
 
 #[tauri::command]
-pub(crate) fn read_local_project_media_preview(
+pub(crate) async fn read_local_project_media_preview(
+    preview_manager: tauri::State<'_, ProjectResourcePreviewReadManager>,
     project_path: String,
     relative_path: String,
     category: String,
+    scope_id: String,
+    request_id: String,
 ) -> Result<LocalProjectMediaPreview, String> {
+    preview_manager
+        .run(&scope_id, &request_id, move |cancellation| {
+            read_local_project_media_preview_at(
+                &project_path,
+                &relative_path,
+                &category,
+                cancellation,
+            )
+        })
+        .await
+}
+
+pub(crate) fn read_local_project_media_preview_at(
+    project_path: &str,
+    relative_path: &str,
+    category: &str,
+    cancellation: &ProjectResourcePreviewScopeCancellation,
+) -> Result<LocalProjectMediaPreview, String> {
+    cancellation.check()?;
     let root = Path::new(project_path.trim());
     enforce_project_auto_permission_policy(root, "file.read")?;
+    cancellation.check()?;
     let normalized_path = normalize_relative_path(relative_path.trim())?;
     let manifest = read_manifest(&root.join(".agent/manifest.json"))?;
+    cancellation.check()?;
     let kind = match category.trim() {
         "art" => ProjectMediaPreviewKind::Art,
         "audio" => ProjectMediaPreviewKind::Audio,
@@ -1334,7 +1396,16 @@ pub(crate) fn read_local_project_media_preview(
     if !is_registered_media {
         return Err("只能预览当前项目已登记的媒体资源".to_string());
     }
-    load_local_project_media_preview(root, &normalized_path, kind)
+    cancellation.check()?;
+    load_local_project_media_preview_with_cancellation(root, &normalized_path, kind, cancellation)
+}
+
+#[tauri::command]
+pub(crate) fn cancel_local_project_resource_preview_scope(
+    preview_manager: tauri::State<'_, ProjectResourcePreviewReadManager>,
+    scope_id: String,
+) -> Result<(), String> {
+    preview_manager.cancel_scope(&scope_id)
 }
 
 #[tauri::command]
diff --git a/apps/ai-game-creator-shell/src-tauri/src/image_inspect.rs b/apps/ai-game-creator-shell/src-tauri/src/image_inspect.rs
index 5d6362ba5..752160a6e 100644
--- a/apps/ai-game-creator-shell/src-tauri/src/image_inspect.rs
+++ b/apps/ai-game-creator-shell/src-tauri/src/image_inspect.rs
@@ -2,6 +2,7 @@ use crate::project::{
     normalize_relative_path, open_project_snapshot_regular_file,
     reject_sensitive_project_file_read, resolve_local_project_path,
 };
+use crate::resource_preview_scheduler::ProjectResourcePreviewScopeCancellation;
 use base64::Engine as _;
 use serde::Serialize;
 use sha2::{Digest, Sha256};
@@ -15,6 +16,7 @@ pub(crate) const AGENT_RUNTIME_IMAGE_INSPECT_MAX_FILE_BYTES: u64 = 8 * 1024 * 10
 pub(crate) const AGENT_RUNTIME_IMAGE_INSPECT_MAX_TOTAL_BYTES: u64 = 12 * 1024 * 1024;
 const PROJECT_IMAGE_PREVIEW_MAX_DIMENSION: u32 = 8_192;
 const PROJECT_IMAGE_PREVIEW_MAX_PIXELS: u64 = 32 * 1024 * 1024;
+const PROJECT_IMAGE_PREVIEW_READ_CHUNK_BYTES: usize = 64 * 1024;
 
 #[derive(Debug, Eq, PartialEq, Serialize)]
 #[serde(rename_all = "camelCase")]
@@ -41,12 +43,34 @@ impl AgentRuntimeInspectionImage {
             base64::engine::general_purpose::STANDARD.encode(&self.bytes)
         )
     }
+
+    fn data_url_with_cancellation(
+        &self,
+        cancellation: &ProjectResourcePreviewScopeCancellation,
+    ) -> Result<String, String> {
+        cancellation.check()?;
+        Ok(self.data_url())
+    }
 }
 
+#[cfg(test)]
 pub(crate) fn load_local_project_image_preview(
     root: &Path,
     relative_path: &str,
 ) -> Result<LocalProjectImagePreview, String> {
+    load_local_project_image_preview_with_cancellation(
+        root,
+        relative_path,
+        &ProjectResourcePreviewScopeCancellation::uncancelled(),
+    )
+}
+
+pub(crate) fn load_local_project_image_preview_with_cancellation(
+    root: &Path,
+    relative_path: &str,
+    cancellation: &ProjectResourcePreviewScopeCancellation,
+) -> Result<LocalProjectImagePreview, String> {
+    cancellation.check()?;
     let normalized = normalize_relative_path(relative_path.trim())?;
     if !normalized.starts_with("assets/") && !normalized.starts_with("game/") {
         return Err("图片预览只允许读取 assets/ 或 game/ 下的项目图片".to_string());
@@ -54,12 +78,15 @@ pub(crate) fn load_local_project_image_preview(
     reject_sensitive_project_file_read(&normalized)?;
     let absolute = resolve_local_project_path(root, &normalized)?;
     validate_agent_runtime_inspection_ancestors(root, &absolute)?;
-    let image = read_agent_runtime_inspection_image(&absolute, normalized)?;
+    cancellation.check()?;
+    let image =
+        read_agent_runtime_inspection_image_with_cancellation(&absolute, normalized, cancellation)?;
+    cancellation.check()?;
     Ok(LocalProjectImagePreview {
         path: image.relative_path.clone(),
         media_type: image.media_type.to_string(),
         byte_len: image.byte_len,
-        data_url: image.data_url(),
+        data_url: image.data_url_with_cancellation(cancellation)?,
     })
 }
 
@@ -236,7 +263,21 @@ fn read_agent_runtime_inspection_image(
     path: &Path,
     relative_path: String,
 ) -> Result<AgentRuntimeInspectionImage, String> {
+    read_agent_runtime_inspection_image_with_cancellation(
+        path,
+        relative_path,
+        &ProjectResourcePreviewScopeCancellation::uncancelled(),
+    )
+}
+
+fn read_agent_runtime_inspection_image_with_cancellation(
+    path: &Path,
+    relative_path: String,
+    cancellation: &ProjectResourcePreviewScopeCancellation,
+) -> Result<AgentRuntimeInspectionImage, String> {
+    cancellation.check()?;
     let (mut file, initial_metadata) = open_project_snapshot_regular_file(path, "视觉检查图片")?;
+    cancellation.check()?;
     if initial_metadata.len() == 0 {
         return Err(format!("image.inspect 图片不能为空：{relative_path}"));
     }
@@ -248,10 +289,26 @@ fn read_agent_runtime_inspection_image(
     }
 
     let mut bytes = Vec::with_capacity(initial_metadata.len() as usize);
-    file.by_ref()
-        .take(AGENT_RUNTIME_IMAGE_INSPECT_MAX_FILE_BYTES + 1)
-        .read_to_end(&mut bytes)
-        .map_err(|error| format!("读取 image.inspect 图片失败：{relative_path}: {error}"))?;
+    let mut chunk = [0_u8; PROJECT_IMAGE_PREVIEW_READ_CHUNK_BYTES];
+    loop {
+        cancellation.check()?;
+        let remaining =
+            (AGENT_RUNTIME_IMAGE_INSPECT_MAX_FILE_BYTES + 1).saturating_sub(bytes.len() as u64);
+        if remaining == 0 {
+            break;
+        }
+        let read_len = usize::try_from(remaining)
+            .unwrap_or(usize::MAX)
+            .min(chunk.len());
+        let count = file
+            .read(&mut chunk[..read_len])
+            .map_err(|error| format!("读取 image.inspect 图片失败：{relative_path}: {error}"))?;
+        if count == 0 {
+            break;
+        }
+        bytes.extend_from_slice(&chunk[..count]);
+    }
+    cancellation.check()?;
     if bytes.len() as u64 > AGENT_RUNTIME_IMAGE_INSPECT_MAX_FILE_BYTES {
         return Err(format!(
             "image.inspect 单张图片不能超过 {} MiB：{relative_path}",
@@ -270,14 +327,17 @@ fn read_agent_runtime_inspection_image(
         ));
     }
 
+    cancellation.check()?;
     let (reopened, reopened_metadata) = open_project_snapshot_regular_file(path, "视觉检查图片")?;
     if !same_open_file_identity(&file, &initial_metadata, &reopened, &reopened_metadata)? {
         return Err(format!(
             "image.inspect 图片路径读取期间发生替换：{relative_path}"
         ));
     }
+    cancellation.check()?;
     let media_type = detect_agent_runtime_image_media_type(&bytes)
         .ok_or_else(|| format!("image.inspect 只支持 PNG、JPEG 或 WEBP：{relative_path}"))?;
+    cancellation.check()?;
     let (width, height) = detect_raster_image_dimensions(&bytes, media_type)
         .ok_or_else(|| format!("image.inspect 图片结构无效：{relative_path}"))?;
     let pixels = u64::from(width)
@@ -293,6 +353,7 @@ fn read_agent_runtime_inspection_image(
             "image.inspect 图片尺寸过大：{width}x{height}，最大边长 {PROJECT_IMAGE_PREVIEW_MAX_DIMENSION}，最大像素 {PROJECT_IMAGE_PREVIEW_MAX_PIXELS}：{relative_path}"
         ));
     }
+    cancellation.check()?;
     let sha256 = format!("{:x}", Sha256::digest(&bytes));
     Ok(AgentRuntimeInspectionImage {
         relative_path,
@@ -588,6 +649,28 @@ mod tests {
         assert!(preview.data_url.starts_with("data:image/png;base64,"));
     }
 
+    #[test]
+    fn cancelled_image_preview_does_not_enter_base64_encoding() {
+        let root = tempfile::tempdir().expect("temp root");
+        fs::create_dir_all(root.path().join("assets/ui")).expect("asset dir");
+        fs::write(root.path().join("assets/ui/prototype.png"), png_bytes()).expect("image");
+        let image = read_agent_runtime_inspection_image(
+            &root.path().join("assets/ui/prototype.png"),
+            "assets/ui/prototype.png".to_string(),
+        )
+        .expect("read project image");
+        let cancellation = ProjectResourcePreviewScopeCancellation::uncancelled();
+        cancellation.cancel();
+
+        assert_eq!(
+            image.data_url_with_cancellation(&cancellation),
+            Err(
+                crate::resource_preview_scheduler::PROJECT_RESOURCE_PREVIEW_CANCELLED_ERROR
+                    .to_string()
+            )
+        );
+    }
+
     #[test]
     fn local_project_image_preview_rejects_non_project_asset_paths() {
         let root = tempfile::tempdir().expect("temp root");
diff --git a/apps/ai-game-creator-shell/src-tauri/src/main.rs b/apps/ai-game-creator-shell/src-tauri/src/main.rs
index 2428dabf6..98cecf815 100644
--- a/apps/ai-game-creator-shell/src-tauri/src/main.rs
+++ b/apps/ai-game-creator-shell/src-tauri/src/main.rs
@@ -74,6 +74,7 @@ mod provider_handoff;
 mod provider_retry;
 mod repository_context;
 mod resource_inspect;
+mod resource_preview_scheduler;
 mod runner;
 mod swarm_cli;
 mod tool_plan_handoff;
@@ -104,6 +105,7 @@ use process_session::*;
 use project::*;
 use repository_context::*;
 use resource_inspect::*;
+use resource_preview_scheduler::*;
 use runner::*;
 use swarm_cli::*;
 use user_input::*;
@@ -2040,6 +2042,7 @@ fn main() {
         .plugin(tauri_plugin_http::init())
         .plugin(tauri_plugin_clipboard_manager::init())
         .manage(game_creator_preview_registry())
+        .manage(ProjectResourcePreviewReadManager::default())
         .setup(move |app| {
             if let Some(path) = setup_log.as_deref() {
                 let _ = append_bounded_diagnostic_line(path, "startup.setup.begin");
@@ -2223,6 +2226,7 @@ fn main() {
             read_local_project_image_preview,
             read_local_project_text_preview,
             read_local_project_media_preview,
+            cancel_local_project_resource_preview_scope,
             write_local_project_file,
             delete_local_project_file,
             read_local_game_memory,
diff --git a/apps/ai-game-creator-shell/src-tauri/src/project/resource_layout.rs b/apps/ai-game-creator-shell/src-tauri/src/project/resource_layout.rs
index f6045c9fc..d4c23f8e9 100644
--- a/apps/ai-game-creator-shell/src-tauri/src/project/resource_layout.rs
+++ b/apps/ai-game-creator-shell/src-tauri/src/project/resource_layout.rs
@@ -862,11 +862,27 @@ mod tests {
         .expect_err("unknown schema must fail");
         assert!(schema_error.contains("schema"));
 
-        let coordinate_error = update_project_resource_canvas_layout_at(
+        let boundary = update_project_resource_canvas_layout_at(
             &root,
             ProjectResourceCanvasLayoutMode::Type,
             "layout-invalid",
             0,
+            vec![layout_position(
+                "asset-coordinate-boundary",
+                RESOURCE_LAYOUT_MAX_COORDINATE,
+            )],
+        )
+        .expect("boundary coordinate must remain valid");
+        assert_eq!(
+            boundary.layout.positions[0].x,
+            RESOURCE_LAYOUT_MAX_COORDINATE
+        );
+
+        let coordinate_error = update_project_resource_canvas_layout_at(
+            &root,
+            ProjectResourceCanvasLayoutMode::Type,
+            "layout-invalid",
+            boundary.layout.revision,
             vec![layout_position(
                 "asset-coordinate",
                 RESOURCE_LAYOUT_MAX_COORDINATE + 1,
diff --git a/apps/ai-game-creator-shell/src-tauri/src/resource_inspect.rs b/apps/ai-game-creator-shell/src-tauri/src/resource_inspect.rs
index 129b01f75..db740c23e 100644
--- a/apps/ai-game-creator-shell/src-tauri/src/resource_inspect.rs
+++ b/apps/ai-game-creator-shell/src-tauri/src/resource_inspect.rs
@@ -5,6 +5,7 @@ use crate::project::{
     normalize_relative_path, open_project_snapshot_regular_file,
     reject_sensitive_project_file_read, resolve_local_project_path,
 };
+use crate::resource_preview_scheduler::ProjectResourcePreviewScopeCancellation;
 use base64::Engine as _;
 use serde::Serialize;
 use std::io::Read;
@@ -12,6 +13,7 @@ use std::path::Path;
 
 const PROJECT_TEXT_PREVIEW_MAX_FILE_BYTES: u64 = 2 * 1024 * 1024;
 const PROJECT_MEDIA_PREVIEW_MAX_FILE_BYTES: u64 = 32 * 1024 * 1024;
+const PROJECT_RESOURCE_PREVIEW_READ_CHUNK_BYTES: usize = 64 * 1024;
 
 #[derive(Debug, Eq, PartialEq, Serialize)]
 #[serde(rename_all = "camelCase")]
@@ -69,10 +71,24 @@ pub(crate) fn is_supported_project_audio_resource(path: &str, media_type: &str)
     ) || media_type.starts_with("audio/")
 }
 
+#[cfg(test)]
 pub(crate) fn load_local_project_text_preview(
     root: &Path,
     relative_path: &str,
 ) -> Result<LocalProjectTextPreview, String> {
+    load_local_project_text_preview_with_cancellation(
+        root,
+        relative_path,
+        &ProjectResourcePreviewScopeCancellation::uncancelled(),
+    )
+}
+
+pub(crate) fn load_local_project_text_preview_with_cancellation(
+    root: &Path,
+    relative_path: &str,
+    cancellation: &ProjectResourcePreviewScopeCancellation,
+) -> Result<LocalProjectTextPreview, String> {
+    cancellation.check()?;
     let normalized = normalize_relative_path(relative_path.trim())?;
     reject_sensitive_project_file_read(&normalized)?;
     let media_type = project_text_media_type(&normalized)
@@ -82,7 +98,9 @@ pub(crate) fn load_local_project_text_preview(
         &normalized,
         PROJECT_TEXT_PREVIEW_MAX_FILE_BYTES,
         "项目文档",
+        cancellation,
     )?;
+    cancellation.check()?;
     let content =
         String::from_utf8(bytes).map_err(|_| "文档预览只支持 UTF-8 编码的文本文件".to_string())?;
     Ok(LocalProjectTextPreview {
@@ -93,11 +111,27 @@ pub(crate) fn load_local_project_text_preview(
     })
 }
 
+#[cfg(test)]
 pub(crate) fn load_local_project_media_preview(
     root: &Path,
     relative_path: &str,
     kind: ProjectMediaPreviewKind,
 ) -> Result<LocalProjectMediaPreview, String> {
+    load_local_project_media_preview_with_cancellation(
+        root,
+        relative_path,
+        kind,
+        &ProjectResourcePreviewScopeCancellation::uncancelled(),
+    )
+}
+
+pub(crate) fn load_local_project_media_preview_with_cancellation(
+    root: &Path,
+    relative_path: &str,
+    kind: ProjectMediaPreviewKind,
+    cancellation: &ProjectResourcePreviewScopeCancellation,
+) -> Result<LocalProjectMediaPreview, String> {
+    cancellation.check()?;
     let normalized = normalize_relative_path(relative_path.trim())?;
     reject_sensitive_project_file_read(&normalized)?;
     let bytes = read_stable_project_resource(
@@ -105,39 +139,70 @@ pub(crate) fn load_local_project_media_preview(
         &normalized,
         PROJECT_MEDIA_PREVIEW_MAX_FILE_BYTES,
         "项目媒体资源",
+        cancellation,
     )?;
     if bytes.is_empty() {
         return Err("媒体文件为空，无法预览".to_string());
     }
+    cancellation.check()?;
     let media_type = detect_project_media_type(&normalized, &bytes, kind)?;
+    cancellation.check()?;
     Ok(LocalProjectMediaPreview {
         path: normalized,
         media_type: media_type.to_string(),
         byte_len: bytes.len() as u64,
-        data_url: format!(
-            "data:{media_type};base64,{}",
-            base64::engine::general_purpose::STANDARD.encode(bytes)
-        ),
+        data_url: encode_project_resource_preview_data_url(media_type, &bytes, cancellation)?,
     })
 }
 
+fn encode_project_resource_preview_data_url(
+    media_type: &str,
+    bytes: &[u8],
+    cancellation: &ProjectResourcePreviewScopeCancellation,
+) -> Result<String, String> {
+    cancellation.check()?;
+    Ok(format!(
+        "data:{media_type};base64,{}",
+        base64::engine::general_purpose::STANDARD.encode(bytes)
+    ))
+}
+
 fn read_stable_project_resource(
     root: &Path,
     normalized: &str,
     max_bytes: u64,
     label: &str,
+    cancellation: &ProjectResourcePreviewScopeCancellation,
 ) -> Result<Vec<u8>, String> {
+    cancellation.check()?;
     let absolute = resolve_local_project_path(root, normalized)?;
     validate_agent_runtime_inspection_ancestors(root, &absolute)?;
+    cancellation.check()?;
     let (mut file, initial_metadata) = open_project_snapshot_regular_file(&absolute, label)?;
+    cancellation.check()?;
     if initial_metadata.len() > max_bytes {
         return Err(format!("{label}不能超过 {} MiB", max_bytes / 1024 / 1024));
     }
     let mut bytes = Vec::with_capacity(initial_metadata.len() as usize);
-    file.by_ref()
-        .take(max_bytes + 1)
-        .read_to_end(&mut bytes)
-        .map_err(|error| format!("读取{label}失败：{normalized}: {error}"))?;
+    let mut chunk = [0_u8; PROJECT_RESOURCE_PREVIEW_READ_CHUNK_BYTES];
+    loop {
+        cancellation.check()?;
+        let remaining = (max_bytes + 1).saturating_sub(bytes.len() as u64);
+        if remaining == 0 {
+            break;
+        }
+        let read_len = usize::try_from(remaining)
+            .unwrap_or(usize::MAX)
+            .min(chunk.len());
+        let count = file
+            .read(&mut chunk[..read_len])
+            .map_err(|error| format!("读取{label}失败：{normalized}: {error}"))?;
+        if count == 0 {
+            break;
+        }
+        bytes.extend_from_slice(&chunk[..count]);
+    }
+    cancellation.check()?;
     if bytes.len() as u64 > max_bytes {
         return Err(format!("{label}不能超过 {} MiB", max_bytes / 1024 / 1024));
     }
@@ -150,10 +215,12 @@ fn read_stable_project_resource(
     {
         return Err(format!("{label}读取期间发生漂移：{normalized}"));
     }
+    cancellation.check()?;
     let (reopened, reopened_metadata) = open_project_snapshot_regular_file(&absolute, label)?;
     if !same_open_file_identity(&file, &initial_metadata, &reopened, &reopened_metadata)? {
         return Err(format!("{label}路径读取期间发生替换：{normalized}"));
     }
+    cancellation.check()?;
     Ok(bytes)
 }
 
@@ -438,4 +505,17 @@ mod tests {
         assert!(load_local_project_text_preview(root.path(), "docs/link.md").is_err());
         assert!(load_local_project_text_preview(root.path(), "docs/hard.md").is_err());
     }
+
+    #[test]
+    fn cancelled_media_preview_does_not_enter_base64_encoding() {
+        let cancellation = ProjectResourcePreviewScopeCancellation::uncancelled();
+        cancellation.cancel();
+        assert_eq!(
+            encode_project_resource_preview_data_url("audio/mpeg", b"ID3", &cancellation),
+            Err(
+                crate::resource_preview_scheduler::PROJECT_RESOURCE_PREVIEW_CANCELLED_ERROR
+                    .to_string()
+            )
+        );
+    }
 }
diff --git a/apps/ai-game-creator-shell/src-tauri/src/resource_preview_scheduler.rs b/apps/ai-game-creator-shell/src-tauri/src/resource_preview_scheduler.rs
new file mode 100644
index 000000000..76668d039
--- /dev/null
+++ b/apps/ai-game-creator-shell/src-tauri/src/resource_preview_scheduler.rs
@@ -0,0 +1,676 @@
+use std::collections::{HashMap, HashSet, VecDeque};
+use std::sync::atomic::{AtomicBool, Ordering};
+use std::sync::{Arc, Mutex};
+
+use tokio::sync::{watch, Semaphore};
+
+pub(crate) const PROJECT_RESOURCE_PREVIEW_CANCELLED_ERROR: &str =
+    "project-resource-preview-scope-cancelled";
+
+const PROJECT_RESOURCE_PREVIEW_GLOBAL_CONCURRENCY: usize = 3;
+const PROJECT_RESOURCE_PREVIEW_MAX_REGISTERED_REQUESTS: usize = 4_096;
+const PROJECT_RESOURCE_PREVIEW_SEEN_REQUEST_LIMIT: usize = 8_192;
+const PROJECT_RESOURCE_PREVIEW_CANCELLED_SCOPE_LIMIT: usize = 1_024;
+const PROJECT_RESOURCE_PREVIEW_OPAQUE_ID_MAX_BYTES: usize = 160;
+
+#[derive(Debug)]
+struct ProjectResourcePreviewScopeCancellationInner {
+    cancelled: AtomicBool,
+    signal: watch::Sender<bool>,
+}
+
+#[derive(Clone, Debug)]
+pub(crate) struct ProjectResourcePreviewScopeCancellation {
+    inner: Arc<ProjectResourcePreviewScopeCancellationInner>,
+}
+
+impl ProjectResourcePreviewScopeCancellation {
+    fn new() -> Self {
+        let (signal, _receiver) = watch::channel(false);
+        Self {
+            inner: Arc::new(ProjectResourcePreviewScopeCancellationInner {
+                cancelled: AtomicBool::new(false),
+                signal,
+            }),
+        }
+    }
+
+    pub(crate) fn uncancelled() -> Self {
+        Self::new()
+    }
+
+    pub(crate) fn is_cancelled(&self) -> bool {
+        self.inner.cancelled.load(Ordering::Acquire)
+    }
+
+    pub(crate) fn check(&self) -> Result<(), String> {
+        if self.is_cancelled() {
+            Err(PROJECT_RESOURCE_PREVIEW_CANCELLED_ERROR.to_string())
+        } else {
+            Ok(())
+        }
+    }
+
+    pub(crate) fn cancel(&self) {
+        if !self.inner.cancelled.swap(true, Ordering::AcqRel) {
+            self.inner.signal.send_replace(true);
+        }
+    }
+
+    async fn cancelled(&self) {
+        let mut receiver = self.inner.signal.subscribe();
+        loop {
+            if self.is_cancelled() || *receiver.borrow() {
+                return;
+            }
+            if receiver.changed().await.is_err() {
+                return;
+            }
+        }
+    }
+}
+
+#[derive(Debug)]
+struct ProjectResourcePreviewScopeEntry {
+    cancellation: ProjectResourcePreviewScopeCancellation,
+    request_count: usize,
+}
+
+#[derive(Debug, Default)]
+struct ProjectResourcePreviewRegistry {
+    scopes: HashMap<String, ProjectResourcePreviewScopeEntry>,
+    active_requests: HashMap<String, String>,
+    seen_request_ids: HashSet<String>,
+    seen_request_order: VecDeque<String>,
+    cancelled_scope_ids: HashSet<String>,
+    cancelled_scope_order: VecDeque<String>,
+}
+
+#[derive(Debug)]
+struct ProjectResourcePreviewReadManagerInner {
+    permits: Arc<Semaphore>,
+    registry: Mutex<ProjectResourcePreviewRegistry>,
+}
+
+#[derive(Clone, Debug)]
+pub(crate) struct ProjectResourcePreviewReadManager {
+    inner: Arc<ProjectResourcePreviewReadManagerInner>,
+}
+
+impl Default for ProjectResourcePreviewReadManager {
+    fn default() -> Self {
+        Self::new(PROJECT_RESOURCE_PREVIEW_GLOBAL_CONCURRENCY)
+    }
+}
+
+impl ProjectResourcePreviewReadManager {
+    fn new(concurrency: usize) -> Self {
+        Self {
+            inner: Arc::new(ProjectResourcePreviewReadManagerInner {
+                permits: Arc::new(Semaphore::new(concurrency)),
+                registry: Mutex::new(ProjectResourcePreviewRegistry::default()),
+            }),
+        }
+    }
+
+    pub(crate) async fn run<T, F>(
+        &self,
+        scope_id: &str,
+        request_id: &str,
+        operation: F,
+    ) -> Result<T, String>
+    where
+        T: Send + 'static,
+        F: FnOnce(&ProjectResourcePreviewScopeCancellation) -> Result<T, String> + Send + 'static,
+    {
+        let registration = self.register(scope_id, request_id)?;
+        let cancellation = registration.cancellation.clone();
+        let permits = Arc::clone(&self.inner.permits);
+        let permit = tokio::select! {
+            biased;
+            _ = cancellation.cancelled() => {
+                return Err(PROJECT_RESOURCE_PREVIEW_CANCELLED_ERROR.to_string());
+            }
+            permit = permits.acquire_owned() => {
+                permit.map_err(|_| "资源预览读取管理器已关闭".to_string())?
+            }
+        };
+        cancellation.check()?;
+        let blocking_cancellation = cancellation.clone();
+        let result = tokio::task::spawn_blocking(move || {
+            let _permit_guard = permit;
+            let _registration_guard = registration;
+            blocking_cancellation.check()?;
+            let result = operation(&blocking_cancellation)?;
+            blocking_cancellation.check()?;
+            Ok(result)
+        })
+        .await
+        .map_err(|_| "资源预览读取任务异常结束".to_string())?;
+        result
+    }
+
+    pub(crate) fn cancel_scope(&self, scope_id: &str) -> Result<(), String> {
+        let scope_id = validate_opaque_id("scopeId", scope_id)?;
+        let cancellation = {
+            let mut registry = self
+                .inner
+                .registry
+                .lock()
+                .map_err(|_| "资源预览读取登记表不可用".to_string())?;
+            remember_cancelled_scope(&mut registry, scope_id);
+            registry
+                .scopes
+                .get(scope_id)
+                .map(|entry| entry.cancellation.clone())
+        };
+        if let Some(cancellation) = cancellation {
+            cancellation.cancel();
+        }
+        Ok(())
+    }
+
+    fn register(
+        &self,
+        scope_id: &str,
+        request_id: &str,
+    ) -> Result<ProjectResourcePreviewRequestRegistration, String> {
+        let scope_id = validate_opaque_id("scopeId", scope_id)?;
+        let request_id = validate_opaque_id("requestId", request_id)?;
+        let mut registry = self
+            .inner
+            .registry
+            .lock()
+            .map_err(|_| "资源预览读取登记表不可用".to_string())?;
+        if registry.cancelled_scope_ids.contains(scope_id) {
+            return Err(PROJECT_RESOURCE_PREVIEW_CANCELLED_ERROR.to_string());
+        }
+        if registry.seen_request_ids.contains(request_id) {
+            return Err("资源预览 requestId 已经使用".to_string());
+        }
+        if registry.active_requests.len() >= PROJECT_RESOURCE_PREVIEW_MAX_REGISTERED_REQUESTS {
+            return Err("资源预览等待队列已满".to_string());
+        }
+        remember_request_id(&mut registry, request_id);
+        let cancellation = {
+            let scope = registry
+                .scopes
+                .entry(scope_id.to_string())
+                .or_insert_with(|| ProjectResourcePreviewScopeEntry {
+                    cancellation: ProjectResourcePreviewScopeCancellation::new(),
+                    request_count: 0,
+                });
+            scope.request_count += 1;
+            scope.cancellation.clone()
+        };
+        registry
+            .active_requests
+            .insert(request_id.to_string(), scope_id.to_string());
+        Ok(ProjectResourcePreviewRequestRegistration {
+            manager: self.clone(),
+            request_id: request_id.to_string(),
+            cancellation,
+        })
+    }
+
+    fn finish_request(&self, request_id: &str) {
+        let Ok(mut registry) = self.inner.registry.lock() else {
+            return;
+        };
+        let Some(scope_id) = registry.active_requests.remove(request_id) else {
+            return;
+        };
+        let remove_scope = if let Some(scope) = registry.scopes.get_mut(&scope_id) {
+            scope.request_count = scope.request_count.saturating_sub(1);
+            scope.request_count == 0
+        } else {
+            false
+        };
+        if remove_scope {
+            registry.scopes.remove(&scope_id);
+            trim_cancelled_scopes(&mut registry);
+        }
+    }
+
+    #[cfg(test)]
+    fn active_registry_counts(&self) -> (usize, usize) {
+        let registry = self.inner.registry.lock().expect("preview registry");
+        (registry.active_requests.len(), registry.scopes.len())
+    }
+}
+
+#[derive(Debug)]
+struct ProjectResourcePreviewRequestRegistration {
+    manager: ProjectResourcePreviewReadManager,
+    request_id: String,
+    cancellation: ProjectResourcePreviewScopeCancellation,
+}
+
+impl Drop for ProjectResourcePreviewRequestRegistration {
+    fn drop(&mut self) {
+        self.manager.finish_request(&self.request_id);
+    }
+}
+
+fn validate_opaque_id<'a>(label: &str, value: &'a str) -> Result<&'a str, String> {
+    let value = value.trim();
+    if value.is_empty()
+        || value.len() > PROJECT_RESOURCE_PREVIEW_OPAQUE_ID_MAX_BYTES
+        || !value
+            .bytes()
+            .all(|byte| byte.is_ascii_alphanumeric() || matches!(byte, b'-' | b'_' | b'.' | b':'))
+    {
+        return Err(format!(
+            "资源预览 {label} 必须是长度不超过 {PROJECT_RESOURCE_PREVIEW_OPAQUE_ID_MAX_BYTES} 的不透明标识"
+        ));
+    }
+    Ok(value)
+}
+
+fn remember_request_id(registry: &mut ProjectResourcePreviewRegistry, request_id: &str) {
+    registry.seen_request_ids.insert(request_id.to_string());
+    registry
+        .seen_request_order
+        .push_back(request_id.to_string());
+    let scan_limit = registry.seen_request_order.len();
+    for _ in 0..scan_limit {
+        if registry.seen_request_order.len() <= PROJECT_RESOURCE_PREVIEW_SEEN_REQUEST_LIMIT {
+            break;
+        }
+        let Some(oldest) = registry.seen_request_order.pop_front() else {
+            break;
+        };
+        if registry.active_requests.contains_key(&oldest) {
+            registry.seen_request_order.push_back(oldest);
+            continue;
+        }
+        registry.seen_request_ids.remove(&oldest);
+    }
+}
+
+fn remember_cancelled_scope(registry: &mut ProjectResourcePreviewRegistry, scope_id: &str) {
+    if registry.cancelled_scope_ids.insert(scope_id.to_string()) {
+        registry
+            .cancelled_scope_order
+            .push_back(scope_id.to_string());
+    }
+    trim_cancelled_scopes(registry);
+}
+
+fn trim_cancelled_scopes(registry: &mut ProjectResourcePreviewRegistry) {
+    let scan_limit = registry.cancelled_scope_order.len();
+    for _ in 0..scan_limit {
+        if registry.cancelled_scope_order.len() <= PROJECT_RESOURCE_PREVIEW_CANCELLED_SCOPE_LIMIT {
+            break;
+        }
+        let Some(oldest) = registry.cancelled_scope_order.pop_front() else {
+            break;
+        };
+        if registry.scopes.contains_key(&oldest) {
+            registry.cancelled_scope_order.push_back(oldest);
+            continue;
+        }
+        registry.cancelled_scope_ids.remove(&oldest);
+    }
+}
+
+#[cfg(test)]
+mod tests {
+    use super::*;
+    use std::sync::atomic::{AtomicUsize, Ordering};
+    use std::time::Duration;
+
+    #[tokio::test(flavor = "multi_thread", worker_threads = 4)]
+    async fn global_permits_bound_reads_and_scope_cancel_releases_new_work() {
+        let manager = ProjectResourcePreviewReadManager::new(3);
+        let active = Arc::new(AtomicUsize::new(0));
+        let peak = Arc::new(AtomicUsize::new(0));
+        let entered = Arc::new(AtomicUsize::new(0));
+        let mut old_tasks = Vec::new();
+        for index in 0..3 {
+            let manager = manager.clone();
+            let active = Arc::clone(&active);
+            let peak = Arc::clone(&peak);
+            let entered = Arc::clone(&entered);
+            old_tasks.push(tokio::spawn(async move {
+                manager
+                    .run("scope-a", &format!("request-a-{index}"), move |cancel| {
+                        let current = active.fetch_add(1, Ordering::SeqCst) + 1;
+                        peak.fetch_max(current, Ordering::SeqCst);
+                        entered.fetch_add(1, Ordering::SeqCst);
+                        while cancel.check().is_ok() {
+                            std::thread::yield_now();
+                        }
+                        active.fetch_sub(1, Ordering::SeqCst);
+                        cancel.check()?;
+                        Ok(())
+                    })
+                    .await
+            }));
+        }
+        tokio::time::timeout(Duration::from_secs(2), async {
+            while entered.load(Ordering::SeqCst) != 3 {
+                tokio::task::yield_now().await;
+            }
+        })
+        .await
+        .expect("old scope occupies all permits");
+
+        let new_started = Arc::new(AtomicBool::new(false));
+        let manager_for_new = manager.clone();
+        let new_started_for_task = Arc::clone(&new_started);
+        let new_task = tokio::spawn(async move {
+            manager_for_new
+                .run("scope-b", "request-b-0", move |_| {
+                    new_started_for_task.store(true, Ordering::SeqCst);
+                    Ok(())
+                })
+                .await
+        });
+        tokio::task::yield_now().await;
+        assert!(!new_started.load(Ordering::SeqCst));
+
+        manager.cancel_scope("scope-a").expect("cancel old scope");
+        assert_eq!(new_task.await.expect("new task join"), Ok(()));
+        for task in old_tasks {
+            assert_eq!(
+                task.await.expect("old task join"),
+                Err(PROJECT_RESOURCE_PREVIEW_CANCELLED_ERROR.to_string())
+            );
+        }
+        assert_eq!(peak.load(Ordering::SeqCst), 3);
+        assert_eq!(active.load(Ordering::SeqCst), 0);
+        assert_eq!(manager.active_registry_counts(), (0, 0));
+    }
+
+    #[tokio::test(flavor = "multi_thread", worker_threads = 2)]
+    async fn queued_cancel_does_not_enter_operation_and_unknown_cancel_closes_late_request() {
+        let manager = ProjectResourcePreviewReadManager::new(1);
+        let blocker_entered = Arc::new(AtomicBool::new(false));
+        let release_blocker = Arc::new(AtomicBool::new(false));
+        let manager_for_blocker = manager.clone();
+        let blocker_entered_for_task = Arc::clone(&blocker_entered);
+        let release_blocker_for_task = Arc::clone(&release_blocker);
+        let blocker = tokio::spawn(async move {
+            manager_for_blocker
+                .run("scope-blocker", "request-blocker", move |_| {
+                    blocker_entered_for_task.store(true, Ordering::SeqCst);
+                    while !release_blocker_for_task.load(Ordering::SeqCst) {
+                        std::thread::yield_now();
+                    }
+                    Ok(())
+                })
+                .await
+        });
+        tokio::time::timeout(Duration::from_secs(2), async {
+            while !blocker_entered.load(Ordering::SeqCst) {
+                tokio::task::yield_now().await;
+            }
+        })
+        .await
+        .expect("blocker starts");
+
+        let queued_entered = Arc::new(AtomicBool::new(false));
+        let manager_for_queued = manager.clone();
+        let queued_entered_for_task = Arc::clone(&queued_entered);
+        let queued = tokio::spawn(async move {
+            manager_for_queued
+                .run("scope-queued", "request-queued", move |_| {
+                    queued_entered_for_task.store(true, Ordering::SeqCst);
+                    Ok(())
+                })
+                .await
+        });
+        tokio::task::yield_now().await;
+        manager
+            .cancel_scope("scope-queued")
+            .expect("cancel queued scope");
+        assert_eq!(
+            queued.await.expect("queued task join"),
+            Err(PROJECT_RESOURCE_PREVIEW_CANCELLED_ERROR.to_string())
+        );
+        assert!(!queued_entered.load(Ordering::SeqCst));
+
+        manager
+            .cancel_scope("scope-before-register")
+            .expect("cancel unknown scope");
+        let late_result = manager
+            .run("scope-before-register", "request-late", |_| Ok(()))
+            .await;
+        assert_eq!(
+            late_result,
+            Err(PROJECT_RESOURCE_PREVIEW_CANCELLED_ERROR.to_string())
+        );
+
+        release_blocker.store(true, Ordering::SeqCst);
+        assert_eq!(blocker.await.expect("blocker join"), Ok(()));
+        assert_eq!(manager.active_registry_counts(), (0, 0));
+    }
+
+    #[tokio::test]
+    async fn duplicate_request_id_is_rejected_after_completion() {
+        let manager = ProjectResourcePreviewReadManager::new(1);
+        assert_eq!(
+            manager.run("scope-a", "same-request", |_| Ok(())).await,
+            Ok(())
+        );
+        let duplicate = manager
+            .run("scope-b", "same-request", |_| Ok(()))
+            .await
+            .expect_err("duplicate request rejected");
+        assert!(duplicate.contains("requestId 已经使用"));
+    }
+
+    #[tokio::test]
+    async fn operation_error_and_panic_release_registration_and_permit() {
+        let manager = ProjectResourcePreviewReadManager::new(1);
+        assert_eq!(
+            manager
+                .run("scope-error", "request-error", |_| {
+                    Err::<(), _>("预览读取失败".to_string())
+                })
+                .await,
+            Err("预览读取失败".to_string())
+        );
+        assert_eq!(manager.active_registry_counts(), (0, 0));
+
+        let panic_error = manager
+            .run("scope-panic", "request-panic", |_| -> Result<(), String> {
+                panic!("preview worker panic")
+            })
+            .await
+            .expect_err("panic is converted into a stable command error");
+        assert!(panic_error.contains("资源预览读取任务异常结束"));
+        assert_eq!(manager.active_registry_counts(), (0, 0));
+
+        assert_eq!(
+            manager
+                .run("scope-after-panic", "request-after-panic", |_| Ok(()))
+                .await,
+            Ok(())
+        );
+        assert_eq!(manager.active_registry_counts(), (0, 0));
+    }
+
+    #[tokio::test(flavor = "multi_thread", worker_threads = 2)]
+    async fn aborting_the_outer_future_keeps_the_blocking_read_registered_and_permitted() {
+        let manager = ProjectResourcePreviewReadManager::new(1);
+        let entered = Arc::new(AtomicBool::new(false));
+        let cancellation_observed = Arc::new(AtomicBool::new(false));
+        let (release_sender, release_receiver) = std::sync::mpsc::sync_channel::<()>(0);
+        let manager_for_old = manager.clone();
+        let entered_for_old = Arc::clone(&entered);
+        let cancellation_observed_for_old = Arc::clone(&cancellation_observed);
+        let old_task = tokio::spawn(async move {
+            manager_for_old
+                .run("scope-aborted", "request-aborted", move |cancel| {
+                    entered_for_old.store(true, Ordering::SeqCst);
+                    loop {
+                        if let Err(error) = cancel.check() {
+                            cancellation_observed_for_old.store(true, Ordering::SeqCst);
+                            return Err(error);
+                        }
+                        match release_receiver.recv_timeout(Duration::from_millis(5)) {
+                            Ok(()) | Err(std::sync::mpsc::RecvTimeoutError::Disconnected) => {
+                                return Ok(())
+                            }
+                            Err(std::sync::mpsc::RecvTimeoutError::Timeout) => {}
+                        }
+                    }
+                })
+                .await
+        });
+        tokio::time::timeout(Duration::from_secs(2), async {
+            while !entered.load(Ordering::SeqCst) {
+                tokio::task::yield_now().await;
+            }
+        })
+        .await
+        .expect("blocking read starts");
+
+        old_task.abort();
+        assert!(old_task
+            .await
+            .expect_err("outer future is aborted")
+            .is_cancelled());
+        assert_eq!(manager.active_registry_counts(), (1, 1));
+
+        let new_started = Arc::new(AtomicBool::new(false));
+        let manager_for_new = manager.clone();
+        let new_started_for_task = Arc::clone(&new_started);
+        let new_task = tokio::spawn(async move {
+            manager_for_new
+                .run("scope-new", "request-new", move |_| {
+                    new_started_for_task.store(true, Ordering::SeqCst);
+                    Ok(())
+                })
+                .await
+        });
+        tokio::task::yield_now().await;
+        assert!(!new_started.load(Ordering::SeqCst));
+
+        manager
+            .cancel_scope("scope-aborted")
+            .expect("cancel blocking read after outer abort");
+        if tokio::time::timeout(Duration::from_secs(2), async {
+            while !cancellation_observed.load(Ordering::SeqCst) {
+                tokio::task::yield_now().await;
+            }
+        })
+        .await
+        .is_err()
+        {
+            drop(release_sender);
+            panic!("blocking read did not observe scope cancellation after outer abort");
+        }
+        drop(release_sender);
+        assert_eq!(
+            tokio::time::timeout(Duration::from_secs(2), new_task)
+                .await
+                .expect("new task starts after cancelled blocking read exits")
+                .expect("new task join"),
+            Ok(())
+        );
+        assert!(new_started.load(Ordering::SeqCst));
+        assert_eq!(manager.active_registry_counts(), (0, 0));
+    }
+
+    #[test]
+    fn seen_request_tombstones_evict_the_oldest_entry_at_the_limit() {
+        let mut registry = ProjectResourcePreviewRegistry::default();
+        for index in 0..=PROJECT_RESOURCE_PREVIEW_SEEN_REQUEST_LIMIT {
+            remember_request_id(&mut registry, &format!("request-{index}"));
+        }
+
+        assert_eq!(
+            registry.seen_request_ids.len(),
+            PROJECT_RESOURCE_PREVIEW_SEEN_REQUEST_LIMIT
+        );
+        assert_eq!(
+            registry.seen_request_order.len(),
+            PROJECT_RESOURCE_PREVIEW_SEEN_REQUEST_LIMIT
+        );
+        assert!(!registry.seen_request_ids.contains("request-0"));
+        assert!(registry.seen_request_ids.contains("request-1"));
+        assert!(registry.seen_request_ids.contains(&format!(
+            "request-{}",
+            PROJECT_RESOURCE_PREVIEW_SEEN_REQUEST_LIMIT
+        )));
+    }
+
+    #[test]
+    fn cancelled_scope_tombstones_evict_the_oldest_entry_at_the_limit() {
+        let mut registry = ProjectResourcePreviewRegistry::default();
+        for index in 0..=PROJECT_RESOURCE_PREVIEW_CANCELLED_SCOPE_LIMIT {
+            remember_cancelled_scope(&mut registry, &format!("scope-{index}"));
+        }
+
+        assert_eq!(
+            registry.cancelled_scope_ids.len(),
+            PROJECT_RESOURCE_PREVIEW_CANCELLED_SCOPE_LIMIT
+        );
+        assert_eq!(
+            registry.cancelled_scope_order.len(),
+            PROJECT_RESOURCE_PREVIEW_CANCELLED_SCOPE_LIMIT
+        );
+        assert!(!registry.cancelled_scope_ids.contains("scope-0"));
+        assert!(registry.cancelled_scope_ids.contains("scope-1"));
+        assert!(registry.cancelled_scope_ids.contains(&format!(
+            "scope-{}",
+            PROJECT_RESOURCE_PREVIEW_CANCELLED_SCOPE_LIMIT
+        )));
+    }
+
+    #[test]
+    fn active_cancelled_scope_tombstones_converge_after_the_scope_finishes() {
+        let manager = ProjectResourcePreviewReadManager::new(1);
+        let mut registrations = Vec::new();
+        for index in 0..=PROJECT_RESOURCE_PREVIEW_CANCELLED_SCOPE_LIMIT {
+            let scope_id = format!("active-scope-{index}");
+            let request_id = format!("active-request-{index}");
+            registrations.push(
+                manager
+                    .register(&scope_id, &request_id)
+                    .expect("register active scope"),
+            );
+            manager
+                .cancel_scope(&scope_id)
+                .expect("cancel active scope");
+        }
+
+        {
+            let registry = manager.inner.registry.lock().expect("preview registry");
+            assert_eq!(
+                registry.cancelled_scope_ids.len(),
+                PROJECT_RESOURCE_PREVIEW_CANCELLED_SCOPE_LIMIT + 1
+            );
+            assert_eq!(
+                registry.cancelled_scope_order.len(),
+                PROJECT_RESOURCE_PREVIEW_CANCELLED_SCOPE_LIMIT + 1
+            );
+        }
+        assert_eq!(
+            manager
+                .register("active-scope-0", "late-request")
+                .expect_err("active cancelled scope stays closed"),
+            PROJECT_RESOURCE_PREVIEW_CANCELLED_ERROR
+        );
+
+        let completed_scope = format!(
+            "active-scope-{}",
+            PROJECT_RESOURCE_PREVIEW_CANCELLED_SCOPE_LIMIT
+        );
+        drop(registrations.pop());
+        let registry = manager.inner.registry.lock().expect("preview registry");
+        assert_eq!(
+            registry.cancelled_scope_ids.len(),
+            PROJECT_RESOURCE_PREVIEW_CANCELLED_SCOPE_LIMIT
+        );
+        assert_eq!(
+            registry.cancelled_scope_order.len(),
+            PROJECT_RESOURCE_PREVIEW_CANCELLED_SCOPE_LIMIT
+        );
+        assert!(!registry.cancelled_scope_ids.contains(&completed_scope));
+        assert!(registry.cancelled_scope_ids.contains("active-scope-0"));
+    }
+}
diff --git a/apps/ai-game-creator-shell/src-tauri/src/tests/project_tools.rs b/apps/ai-game-creator-shell/src-tauri/src/tests/project_tools.rs
index 141878dab..0855d3403 100644
--- a/apps/ai-game-creator-shell/src-tauri/src/tests/project_tools.rs
+++ b/apps/ai-game-creator-shell/src-tauri/src/tests/project_tools.rs
@@ -6004,6 +6004,8 @@ fn project_checkpoint_excludes_and_preserves_sensitive_local_files() {
 #[test]
 fn local_project_image_preview_obeys_auto_file_read_policy() {
     let root = unique_project_path();
+    let project_path = root.to_string_lossy().into_owned();
+    let cancellation = ProjectResourcePreviewScopeCancellation::uncancelled();
     init_local_game_project_at(&root, "image-preview-policy", "图片预览策略项目")
         .expect("project init");
     fs::create_dir_all(root.join("assets")).expect("asset dir");
@@ -6041,11 +6043,9 @@ fn local_project_image_preview_obeys_auto_file_read_policy() {
         },
     )
     .expect("confirm policy");
-    let confirm_error = read_local_project_image_preview(
-        root.to_string_lossy().into_owned(),
-        "assets/preview.png".to_string(),
-    )
-    .expect_err("confirm policy blocks automatic preview");
+    let confirm_error =
+        read_local_project_image_preview_at(&project_path, "assets/preview.png", &cancellation)
+            .expect_err("confirm policy blocks automatic preview");
     assert!(confirm_error.contains("要求用户确认：file.read"));
 
     write_project_permission_policy_at(
@@ -6057,11 +6057,9 @@ fn local_project_image_preview_obeys_auto_file_read_policy() {
         },
     )
     .expect("deny policy");
-    let deny_error = read_local_project_image_preview(
-        root.to_string_lossy().into_owned(),
-        "assets/preview.png".to_string(),
-    )
-    .expect_err("deny policy blocks preview");
+    let deny_error =
+        read_local_project_image_preview_at(&project_path, "assets/preview.png", &cancellation)
+            .expect_err("deny policy blocks preview");
     assert!(deny_error.contains("拒绝执行：file.read"));
 
     write_project_permission_policy_at(
@@ -6073,17 +6071,16 @@ fn local_project_image_preview_obeys_auto_file_read_policy() {
         },
     )
     .expect("auto policy");
-    let preview = read_local_project_image_preview(
-        root.to_string_lossy().into_owned(),
-        "assets/preview.png".to_string(),
-    )
-    .expect("auto preview");
+    let preview =
+        read_local_project_image_preview_at(&project_path, "assets/preview.png", &cancellation)
+            .expect("auto preview");
     assert_eq!(preview.media_type, "image/png");
 
     fs::write(root.join("assets/unregistered.png"), &preview_bytes).expect("unregistered image");
-    let unregistered_error = read_local_project_image_preview(
-        root.to_string_lossy().into_owned(),
-        "assets/unregistered.png".to_string(),
+    let unregistered_error = read_local_project_image_preview_at(
+        &project_path,
+        "assets/unregistered.png",
+        &cancellation,
     )
     .expect_err("unregistered image rejected");
     assert!(unregistered_error.contains("只能预览已登记资源"));
@@ -6094,6 +6091,8 @@ fn local_project_image_preview_obeys_auto_file_read_policy() {
 #[test]
 fn local_project_resource_previews_require_registered_safe_resources() {
     let root = unique_project_path();
+    let project_path = root.to_string_lossy().into_owned();
+    let cancellation = ProjectResourcePreviewScopeCancellation::uncancelled();
     init_local_game_project_at(&root, "resource-preview-policy", "资源预览策略项目")
         .expect("project init");
     fs::create_dir_all(root.join("assets")).expect("asset dir");
@@ -6151,44 +6150,37 @@ fn local_project_resource_previews_require_registered_safe_resources() {
     )
     .expect("register audio");
 
-    let document = read_local_project_text_preview(
-        root.to_string_lossy().into_owned(),
-        "game/design.md".to_string(),
-    )
-    .expect("read registered document");
+    let document =
+        read_local_project_text_preview_at(&project_path, "game/design.md", &cancellation)
+            .expect("read registered document");
     assert_eq!(document.media_type, "text/markdown");
     assert!(document.content.contains("安全正文"));
 
-    let svg = read_local_project_media_preview(
-        root.to_string_lossy().into_owned(),
-        "assets/icon.svg".to_string(),
-        "art".to_string(),
-    )
-    .expect("read registered svg");
+    let svg =
+        read_local_project_media_preview_at(&project_path, "assets/icon.svg", "art", &cancellation)
+            .expect("read registered svg");
     assert_eq!(svg.media_type, "image/svg+xml");
-    let audio = read_local_project_media_preview(
-        root.to_string_lossy().into_owned(),
-        "assets/bgm.mp3".to_string(),
-        "audio".to_string(),
+    let audio = read_local_project_media_preview_at(
+        &project_path,
+        "assets/bgm.mp3",
+        "audio",
+        &cancellation,
     )
     .expect("read registered audio");
     assert_eq!(audio.media_type, "audio/mpeg");
 
-    let unregistered_error = read_local_project_text_preview(
-        root.to_string_lossy().into_owned(),
-        "game/unregistered.md".to_string(),
-    )
-    .expect_err("unregistered document rejected");
+    let unregistered_error =
+        read_local_project_text_preview_at(&project_path, "game/unregistered.md", &cancellation)
+            .expect_err("unregistered document rejected");
     assert!(unregistered_error.contains("已登记的文档资源"));
-    assert!(read_local_project_text_preview(
-        root.to_string_lossy().into_owned(),
-        "../outside.md".to_string(),
-    )
-    .is_err());
-    assert!(read_local_project_media_preview(
-        root.to_string_lossy().into_owned(),
-        "assets/bgm.mp3".to_string(),
-        "art".to_string(),
+    assert!(
+        read_local_project_text_preview_at(&project_path, "../outside.md", &cancellation,).is_err()
+    );
+    assert!(read_local_project_media_preview_at(
+        &project_path,
+        "assets/bgm.mp3",
+        "art",
+        &cancellation,
     )
     .is_err());
 
diff --git a/apps/ai-game-creator-shell/src/features/project-workspace/SupervisorChatOnlyView.tsx b/apps/ai-game-creator-shell/src/features/project-workspace/SupervisorChatOnlyView.tsx
index a78af79e3..37d0abd05 100644
--- a/apps/ai-game-creator-shell/src/features/project-workspace/SupervisorChatOnlyView.tsx
+++ b/apps/ai-game-creator-shell/src/features/project-workspace/SupervisorChatOnlyView.tsx
@@ -22,6 +22,11 @@ import type {
   PendingCommand,
   PendingUiConfirmation,
 } from '../../app/types';
+import {
+  cancelLocalProjectResourcePreviewScope,
+  createProjectResourcePreviewRequestId,
+  createProjectResourcePreviewScopeId,
+} from '../../services/projectResourcePreviewTransport';
 import {
   formatAgentRuntimeEvent,
   isAgentRuntimeTerminalState,
@@ -1184,6 +1189,7 @@ export function SupervisorChatOnlyView({
       );
       return undefined;
     }
+    const scopeId = createProjectResourcePreviewScopeId();
     let cancelled = false;
     setSelectedResultImage(null);
     setResultImagePreviews(
@@ -1201,6 +1207,8 @@ export function SupervisorChatOnlyView({
             {
               projectPath,
               relativePath: image.path,
+              scopeId,
+              requestId: createProjectResourcePreviewRequestId(),
             },
           );
           if (
@@ -1222,6 +1230,7 @@ export function SupervisorChatOnlyView({
     });
     return () => {
       cancelled = true;
+      cancelLocalProjectResourcePreviewScope(scopeId);
     };
     // resultImageKey is the stable semantic identity for the derived image list.
     // eslint-disable-next-line react-hooks/exhaustive-deps
diff --git a/apps/ai-game-creator-shell/src/services/projectResourcePreviewTransport.ts b/apps/ai-game-creator-shell/src/services/projectResourcePreviewTransport.ts
new file mode 100644
index 000000000..e89e9d06e
--- /dev/null
+++ b/apps/ai-game-creator-shell/src/services/projectResourcePreviewTransport.ts
@@ -0,0 +1,51 @@
+const PROJECT_RESOURCE_PREVIEW_CANCELLED_ERROR =
+  'project-resource-preview-scope-cancelled';
+
+let projectResourcePreviewOpaqueIdSequence = 0;
+
+function createProjectResourcePreviewOpaqueId(prefix: 'scope' | 'request') {
+  projectResourcePreviewOpaqueIdSequence += 1;
+  const cryptoApi = globalThis.crypto;
+  const randomId = cryptoApi?.randomUUID?.();
+  if (randomId) {
+    return `${prefix}:${randomId}`;
+  }
+  if (cryptoApi?.getRandomValues) {
+    const randomWords = cryptoApi.getRandomValues(new Uint32Array(4));
+    return `${prefix}:${Array.from(randomWords, (word) => word.toString(36)).join('-')}`;
+  }
+  return `${prefix}:${Date.now().toString(36)}:${Math.random().toString(36).slice(2)}:${projectResourcePreviewOpaqueIdSequence.toString(36)}`;
+}
+
+export function createProjectResourcePreviewScopeId() {
+  return createProjectResourcePreviewOpaqueId('scope');
+}
+
+export function createProjectResourcePreviewRequestId() {
+  return createProjectResourcePreviewOpaqueId('request');
+}
+
+export function isProjectResourcePreviewCancellation(error: unknown) {
+  const message =
+    error instanceof Error
+      ? error.message
+      : typeof error === 'string'
+        ? error
+        : null;
+  return message === PROJECT_RESOURCE_PREVIEW_CANCELLED_ERROR;
+}
+
+export function cancelLocalProjectResourcePreviewScope(scopeId: string) {
+  const invoke = window.__TAURI__?.core?.invoke;
+  if (!invoke) {
+    return;
+  }
+  try {
+    void Promise.resolve(
+      invoke('cancel_local_project_resource_preview_scope', { scopeId }),
+    ).catch(() => undefined);
+  } catch {
+    // The epoch/owner fence remains authoritative if the WebView is already
+    // tearing down and can no longer deliver the best-effort cancellation.
+  }
+}
diff --git a/apps/ai-game-creator-shell/src/styles.css b/apps/ai-game-creator-shell/src/styles.css
index 1573fb5d1..ce26d5054 100644
--- a/apps/ai-game-creator-shell/src/styles.css
+++ b/apps/ai-game-creator-shell/src/styles.css
@@ -750,7 +750,9 @@ textarea {
 
 @media (prefers-reduced-motion: reduce) {
   .launcher-agent-chat-waiting > span,
-  .game-chat-runtime-status[data-tone='active'] .game-chat-runtime-state > span {
+  .game-chat-runtime-status[data-tone='active']
+    .game-chat-runtime-state
+    > span {
     animation: none;
   }
 }
@@ -1538,7 +1540,9 @@ textarea {
   box-shadow: 0 0 0 4px rgb(240 68 56 / 15%);
 }
 
-.game-chat-runtime-status[data-tone='complete'] .game-chat-runtime-state > span {
+.game-chat-runtime-status[data-tone='complete']
+  .game-chat-runtime-state
+  > span {
   background: #2e90fa;
   box-shadow: 0 0 0 4px rgb(46 144 250 / 14%);
 }
@@ -4111,11 +4115,15 @@ iframe.preview-frame {
   position: relative;
   display: grid;
   align-content: start;
-  width: max-content;
-  min-width: 100%;
+  width: 100%;
+  min-width: max(100%, 620px);
   min-height: 100%;
 }
 
+.game-resource-section-stack {
+  display: contents;
+}
+
 .game-resource-dependency-overlay {
   position: absolute;
   inset: 0;
@@ -4152,21 +4160,6 @@ iframe.preview-frame {
   opacity: 1;
 }
 
-.game-resource-dependency-edge--task path {
-  stroke: #918b87;
-  stroke-width: 1.4px;
-  stroke-dasharray: 4 7;
-}
-
-.game-resource-dependency-edge--task .game-resource-dependency-trunk {
-  stroke-width: 1.7px;
-  opacity: 0.88;
-}
-
-.game-resource-dependency-edge--task .game-resource-dependency-branch {
-  opacity: 0.72;
-}
-
 .game-resource-dependency-edge.is-cyclic,
 .game-resource-dependency-edge.is-cyclic path {
   stroke-dashoffset: 4;
@@ -4177,18 +4170,18 @@ iframe.preview-frame {
   stroke-linejoin: round;
 }
 
-.game-resource-dependency-marker--task path {
-  fill: #918b87;
-  stroke-linejoin: round;
-}
-
 .game-resource-section {
   position: relative;
   z-index: 1;
   display: grid;
+  grid-template-rows: auto minmax(0, 1fr);
   gap: 10px;
+  box-sizing: border-box;
+  height: var(--resource-section-height);
   min-width: 620px;
+  min-height: 0;
   padding: 14px 6px 18px;
+  overflow: hidden;
   border-bottom: 1px solid #eaded8;
 }
 
@@ -4201,6 +4194,7 @@ iframe.preview-frame {
   align-items: center;
   justify-content: space-between;
   gap: 12px;
+  min-height: 22px;
 }
 
 .game-resource-section > header span {
@@ -4212,7 +4206,20 @@ iframe.preview-frame {
   font-weight: 800;
 }
 
-.game-resource-section > header small {
+.game-resource-section-actions {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+}
+
+.game-resource-section-height-actions,
+.game-resource-section-zoom-actions {
+  display: inline-flex;
+  align-items: center;
+  gap: 3px;
+}
+
+.game-resource-section-actions small {
   display: grid;
   min-width: 22px;
   height: 22px;
@@ -4224,46 +4231,103 @@ iframe.preview-frame {
   place-items: center;
 }
 
-.game-resource-section > p {
+.game-resource-section-actions button {
+  display: grid;
+  width: 24px;
+  height: 24px;
+  padding: 0;
+  border: 1px solid #e3cfc5;
+  border-radius: 7px;
+  background: rgb(255 255 255 / 88%);
+  color: #8c6252;
+  cursor: pointer;
+  place-items: center;
+}
+
+.game-resource-section-actions button:hover:not(:disabled),
+.game-resource-section-actions button:focus-visible {
+  border-color: #ce7650;
+  outline: 2px solid rgb(206 118 80 / 22%);
+  outline-offset: 1px;
+  color: #bd5f37;
+}
+
+.game-resource-section-actions button:disabled {
+  border-color: #eadfd9;
+  background: #f7f1ed;
+  color: #c5afa5;
+  cursor: not-allowed;
+  opacity: 0.64;
+}
+
+.game-resource-section-actions .game-resource-section-zoom-value {
+  width: auto;
+  min-width: 40px;
+  padding: 0 6px;
+  font-size: 10px;
+  font-variant-numeric: tabular-nums;
+}
+
+.game-resource-section-viewport {
+  position: relative;
+  min-width: 0;
+  min-height: 0;
+  overflow: auto;
+  border-radius: 8px;
+  overscroll-behavior: contain;
+  scrollbar-gutter: stable;
+}
+
+.game-resource-section-viewport:focus-visible {
+  outline: 2px solid rgb(206 118 80 / 26%);
+  outline-offset: -2px;
+}
+
+.game-resource-section-viewport > p {
   margin: 0;
   color: #b0958a;
   font-size: 11px;
 }
 
-.game-resource-plane {
+.game-resource-plane-frame {
   position: relative;
+  min-width: 0;
+  min-height: 0;
+}
+
+.game-resource-plane {
+  position: absolute;
+  top: 0;
+  left: 0;
   min-width: 620px;
   min-height: 108px;
+  transform: scale(var(--resource-section-zoom, 1));
+  transform-origin: 0 0;
 }
 
 .game-resource-card {
   position: absolute;
+  z-index: 1;
   top: 0;
   left: 0;
-  display: grid;
-  grid-template-columns: 36px minmax(100px, 1fr);
-  grid-template-rows: auto auto auto;
-  align-items: center;
-  gap: 2px 8px;
-  width: 180px;
-  min-width: 180px;
-  min-height: 92px;
-  padding: 10px;
+  width: var(--resource-card-width);
+  min-width: var(--resource-card-width);
+  height: var(--resource-card-height);
+  min-height: var(--resource-card-height);
+  padding: 0;
   overflow: hidden;
   border: 1px solid #eadbd4;
   border-radius: 12px;
   background: #fff;
   color: #4e382f;
-  text-align: left;
   box-shadow: 0 6px 18px rgb(96 62 47 / 6%);
-  cursor: pointer;
   touch-action: manipulation;
   user-select: none;
   transform: translate3d(var(--resource-x, 0), var(--resource-y, 0), 0);
 }
 
 .game-resource-card:hover,
-.game-resource-card:focus-visible,
+.game-resource-card:focus-within,
 .game-resource-card.is-selected {
   border-color: #d57b51;
   outline: 0;
@@ -4277,32 +4341,153 @@ iframe.preview-frame {
     0 0 0 2px rgb(216 115 66 / 14%);
 }
 
-.game-resource-card-icon {
+.game-resource-card-visual {
+  position: absolute;
+  inset: 0;
   display: grid;
-  grid-row: 1 / 4;
-  width: 36px;
-  height: 36px;
-  border-radius: 10px;
-  background: #fae9df;
+  overflow: hidden;
+  background: linear-gradient(145deg, #fffaf6, #f6ece6);
   color: #c46a40;
   place-items: center;
 }
 
-.game-resource-card strong,
-.game-resource-card small {
-  min-width: 0;
+.game-resource-card[data-preview-kind='raster-image']
+  .game-resource-card-visual,
+.game-resource-card[data-preview-kind='media-image'] .game-resource-card-visual,
+.game-resource-card[data-preview-kind='video'] .game-resource-card-visual {
+  background: linear-gradient(45deg, #f1ebe7 25%, transparent 25%),
+    linear-gradient(-45deg, #f1ebe7 25%, transparent 25%),
+    linear-gradient(45deg, transparent 75%, #f1ebe7 75%),
+    linear-gradient(-45deg, transparent 75%, #f1ebe7 75%), #faf7f5;
+  background-position:
+    0 0,
+    0 8px,
+    8px -8px,
+    -8px 0;
+  background-size: 16px 16px;
+}
+
+.game-resource-card-visual > img,
+.game-resource-card-visual > video {
+  display: block;
+  width: 100%;
+  height: 100%;
+  object-fit: contain;
+}
+
+.game-resource-card-visual > video {
+  visibility: hidden;
+  background: #211d1b;
+}
+
+.game-resource-card-visual > video.is-decoded {
+  visibility: visible;
+}
+
+.game-resource-card-open {
+  position: absolute;
+  z-index: 1;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  padding: 0;
+  border: 0;
+  border-radius: inherit;
+  background: transparent;
+  cursor: pointer;
+  touch-action: manipulation;
+}
+
+.game-resource-card-open:focus-visible {
+  outline: 3px solid rgb(213 123 81 / 55%);
+  outline-offset: -4px;
+}
+
+.game-resource-card-media-control {
+  position: absolute;
+  right: 9px;
+  bottom: 9px;
+  z-index: 2;
+  display: grid;
+  width: 34px;
+  height: 34px;
+  padding: 0;
+  border: 1px solid rgb(255 255 255 / 70%);
+  border-radius: 50%;
+  background: rgb(75 48 38 / 82%);
+  color: #fff;
+  box-shadow: 0 5px 14px rgb(52 30 22 / 24%);
+  cursor: pointer;
+  place-items: center;
+}
+
+.game-resource-card-media-control:hover,
+.game-resource-card-media-control:focus-visible,
+.game-resource-card-media-control[aria-pressed='true'] {
+  background: #c96f44;
+  outline: 2px solid rgb(255 255 255 / 92%);
+  outline-offset: 1px;
+}
+
+.game-resource-card-placeholder,
+.game-resource-card-version-visual,
+.game-resource-card-audio-visual {
+  display: grid;
+  width: 100%;
+  height: 100%;
+  place-items: center;
+}
+
+.game-resource-card-audio-visual {
+  position: relative;
+  background: linear-gradient(145deg, #fff8f1, #f2ded2);
+}
+
+.game-resource-card-audio-visual > span {
+  width: 92px;
+  height: 18px;
+  margin-top: -24px;
+  background: repeating-linear-gradient(
+    90deg,
+    rgb(196 106 64 / 32%) 0 3px,
+    transparent 3px 7px
+  );
+  mask-image: linear-gradient(
+    to bottom,
+    transparent,
+    #000 25%,
+    #000 75%,
+    transparent
+  );
+}
+
+.game-resource-card-audio-visual audio {
+  display: none;
+}
+
+.game-resource-card-document-summary {
+  display: -webkit-box;
+  max-height: 100%;
+  padding: 16px;
   overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
+  color: #674c41;
+  font-size: 11px;
+  line-height: 1.55;
+  text-align: left;
+  white-space: normal;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 5;
 }
 
-.game-resource-card strong {
-  font-size: 12px;
+.game-resource-card-version-visual {
+  align-content: center;
+  gap: 10px;
 }
 
-.game-resource-card small {
-  color: #9a8176;
+.game-resource-card-version-relations {
+  color: #8e6f62;
   font-size: 9px;
+  font-weight: 700;
 }
 
 .game-resource-focus {
@@ -4372,21 +4557,11 @@ iframe.preview-frame {
   gap: 6px;
   min-height: 0;
   padding: 18px 20px 24px;
-  overflow: hidden;
+  overflow: auto;
   overscroll-behavior: contain;
   scrollbar-gutter: stable;
 }
 
-.game-resource-focus--document .game-resource-focus-body,
-.game-resource-focus--art .game-resource-focus-body,
-.game-resource-focus--audio .game-resource-focus-body {
-  grid-template-rows: minmax(0, 1fr) auto;
-}
-
-.game-resource-focus--version .game-resource-focus-body {
-  overflow: auto;
-}
-
 .game-resource-focus-close {
   display: grid;
   width: 28px;
@@ -4434,29 +4609,6 @@ iframe.preview-frame {
   color: #5d4339;
 }
 
-.game-resource-image-preview {
-  position: relative;
-  display: grid;
-  height: min(460px, calc(100dvh - 330px));
-  min-height: 260px;
-  margin-bottom: 8px;
-  overflow: hidden;
-  border: 1px solid #ead8cf;
-  border-radius: 12px;
-  background: linear-gradient(45deg, #f1ebe7 25%, transparent 25%),
-    linear-gradient(-45deg, #f1ebe7 25%, transparent 25%),
-    linear-gradient(45deg, transparent 75%, #f1ebe7 75%),
-    linear-gradient(-45deg, transparent 75%, #f1ebe7 75%), #faf7f5;
-  background-position:
-    0 0,
-    0 8px,
-    8px -8px,
-    -8px 0;
-  background-size: 16px 16px;
-  place-items: center;
-}
-
-.game-resource-media-preview,
 .game-resource-audio-preview {
   position: relative;
   display: grid;
@@ -4470,33 +4622,6 @@ iframe.preview-frame {
   place-items: center;
 }
 
-.game-resource-media-preview {
-  background: linear-gradient(45deg, #f1ebe7 25%, transparent 25%),
-    linear-gradient(-45deg, #f1ebe7 25%, transparent 25%),
-    linear-gradient(45deg, transparent 75%, #f1ebe7 75%),
-    linear-gradient(-45deg, transparent 75%, #f1ebe7 75%), #faf7f5;
-  background-position:
-    0 0,
-    0 8px,
-    8px -8px,
-    -8px 0;
-  background-size: 16px 16px;
-}
-
-.game-resource-media-preview img,
-.game-resource-media-preview video {
-  display: block;
-  max-width: 100%;
-  max-height: 100%;
-  object-fit: contain;
-}
-
-.game-resource-media-preview video {
-  width: 100%;
-  height: 100%;
-  background: #211d1b;
-}
-
 .game-resource-audio-preview {
   align-content: center;
   padding: 28px;
@@ -4507,25 +4632,30 @@ iframe.preview-frame {
   width: min(620px, 100%);
 }
 
-.game-resource-media-preview p,
-.game-resource-audio-preview p {
-  margin: 0;
-  padding: 20px;
-  color: #92776c;
+.game-resource-audio-load {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  min-height: 38px;
+  padding: 0 16px;
+  border: 1px solid #ddb7a5;
+  border-radius: 999px;
+  background: #fff;
+  color: #a95734;
   font-size: 12px;
-  text-align: center;
+  font-weight: 800;
+  cursor: pointer;
 }
 
-.game-resource-image-preview img {
-  position: absolute;
-  inset: 0;
-  display: block;
-  width: 100%;
-  height: 100%;
-  object-fit: contain;
+.game-resource-audio-load:hover,
+.game-resource-audio-load:focus-visible {
+  border-color: #c96f44;
+  outline: 2px solid rgb(201 111 68 / 24%);
+  outline-offset: 2px;
 }
 
-.game-resource-image-preview p {
+.game-resource-audio-preview p {
   margin: 0;
   padding: 20px;
   color: #92776c;
diff --git a/apps/ai-game-creator-shell/src/view/project-development/ResourceDependencyOverlay.tsx b/apps/ai-game-creator-shell/src/view/project-development/ResourceDependencyOverlay.tsx
index 38a51a13c..2c892669a 100644
--- a/apps/ai-game-creator-shell/src/view/project-development/ResourceDependencyOverlay.tsx
+++ b/apps/ai-game-creator-shell/src/view/project-development/ResourceDependencyOverlay.tsx
@@ -1,6 +1,5 @@
 import {
   forwardRef,
-  useCallback,
   useId,
   useImperativeHandle,
   useLayoutEffect,
@@ -20,7 +19,6 @@ import {
 import {
   type ProjectResourceGraph,
   type ProjectResourceReferenceEdge,
-  type ProjectResourceTaskFlow,
 } from './resourceDependencyGraphModel';
 
 type Point = {
@@ -33,8 +31,6 @@ type Rect = Point & {
   height: number;
 };
 
-type SectionOrigins = Partial<Record<ProjectResourceCanvasSection, Point>>;
-
 type RectLookup = {
   get(resourceId: string): Rect | undefined;
 };
@@ -42,7 +38,9 @@ type RectLookup = {
 export type ResourceDependencyOverlayProps = {
   graph: ProjectResourceGraph;
   positions: readonly ProjectResourceCanvasPosition[];
+  section: ProjectResourceCanvasSection;
   visibleResourceIds: ReadonlySet<string>;
+  geometryRevision?: string;
 };
 
 export type ResourceDependencyOverlayHandle = {
@@ -50,79 +48,92 @@ export type ResourceDependencyOverlayHandle = {
   clearDragPreview: () => void;
 };
 
-type TaskFlowPathRefs = {
-  sourceBranches: Map<string, SVGPathElement>;
-  targetBranches: Map<string, SVGPathElement>;
-  trunk: SVGPathElement | null;
+type ConnectionAxis = 'horizontal' | 'vertical';
+
+type ReferenceRouteOffsets = {
+  source: number;
+  target: number;
 };
 
-type TaskFlowSectionGeometry = NonNullable<
-  ReturnType<typeof taskFlowGeometry>
-> & {
-  section: ProjectResourceCanvasSection;
-};
-
-const SECTION_SELECTOR = '[data-resource-section-plane]';
-const TASK_FLOW_HUB_GAP = 20;
-const CONNECTION_MAX_HANDLE = 180;
-const TASK_FLOW_BRANCH_MAX_HANDLE = 96;
+const SECTION_SCROLL_SELECTOR = '[data-resource-section-scroll]';
+const ROUTE_CORNER_RADIUS = 10;
 const SELF_REFERENCE_LOOP_WIDTH = 56;
 const SELF_REFERENCE_LOOP_ANCHOR_OFFSET = 18;
-const RESOURCE_SECTIONS: readonly ProjectResourceCanvasSection[] = [
-  'document',
-  'version',
-  'art',
-  'audio',
-];
+const ARROW_CLEARANCE = 10;
+const CONTINUATION_VIEWPORT_INSET = 12;
+const HORIZONTAL_ROUTE_MIN_GAP = 8;
+const REFERENCE_PORT_GAP = 14;
+const REFERENCE_PORT_INSET = 18;
 
-function pointsEqual(left: SectionOrigins, right: SectionOrigins) {
-  return RESOURCE_SECTIONS.every(
-    (section) =>
-      left[section]?.x === right[section]?.x &&
-      left[section]?.y === right[section]?.y,
+function rectsEqual(left: Rect | null, right: Rect | null) {
+  return (
+    left === right ||
+    (left !== null &&
+      right !== null &&
+      left.x === right.x &&
+      left.y === right.y &&
+      left.width === right.width &&
+      left.height === right.height)
   );
 }
 
-function connectionPath(source: Point, target: Point) {
+function rectIntersectsViewport(rect: Rect, viewport: Rect) {
+  return (
+    rect.x < viewport.x + viewport.width &&
+    rect.x + rect.width > viewport.x &&
+    rect.y < viewport.y + viewport.height &&
+    rect.y + rect.height > viewport.y
+  );
+}
+
+function connectionPath(source: Point, target: Point, axis: ConnectionAxis) {
   if (source.x === target.x && source.y === target.y) {
-    return `M ${source.x} ${source.y} C ${source.x + 48} ${source.y - 48}, ${
-      source.x + 48
-    } ${source.y + 48}, ${source.x} ${source.y + 1}`;
+    return `M ${source.x} ${source.y} L ${source.x} ${source.y + 1}`;
   }
-  const direction = target.x >= source.x ? 1 : -1;
-  const bend = Math.min(
-    CONNECTION_MAX_HANDLE,
-    Math.max(
-      32,
-      Math.abs(target.x - source.x) * 0.42 +
-        Math.abs(target.y - source.y) * 0.08,
-    ),
-  );
-  return `M ${source.x} ${source.y} C ${source.x + direction * bend} ${
-    source.y
-  }, ${target.x - direction * bend} ${target.y}, ${target.x} ${target.y}`;
-}
-
-function taskFlowBranchPath(source: Point, target: Point) {
-  const horizontalDistance = Math.abs(target.x - source.x);
-  if (horizontalDistance < 1) {
-    const direction = target.y >= source.y ? 1 : -1;
-    const handle = Math.min(
-      TASK_FLOW_BRANCH_MAX_HANDLE,
-      Math.abs(target.y - source.y) * 0.5,
+  if (axis === 'vertical') {
+    const dx = target.x - source.x;
+    const dy = target.y - source.y;
+    if (Math.abs(dx) < 1 || Math.abs(dy) < ROUTE_CORNER_RADIUS * 2) {
+      return `M ${source.x} ${source.y} L ${target.x} ${target.y}`;
+    }
+    const horizontalDirection = dx >= 0 ? 1 : -1;
+    const verticalDirection = dy >= 0 ? 1 : -1;
+    const middleY = source.y + dy / 2;
+    const radius = Math.min(
+      ROUTE_CORNER_RADIUS,
+      Math.abs(dx) / 2,
+      Math.abs(dy) / 4,
     );
-    return `M ${source.x} ${source.y} C ${source.x} ${
-      source.y + direction * handle
-    }, ${target.x} ${target.y - direction * handle}, ${target.x} ${target.y}`;
+    return `M ${source.x} ${source.y} V ${
+      middleY - verticalDirection * radius
+    } Q ${source.x} ${middleY} ${
+      source.x + horizontalDirection * radius
+    } ${middleY} H ${target.x - horizontalDirection * radius} Q ${
+      target.x
+    } ${middleY} ${target.x} ${
+      middleY + verticalDirection * radius
+    } V ${target.y}`;
   }
-  const direction = target.x >= source.x ? 1 : -1;
-  const handle = Math.min(
-    TASK_FLOW_BRANCH_MAX_HANDLE,
-    horizontalDistance * 0.5,
+  const dx = target.x - source.x;
+  const dy = target.y - source.y;
+  if (Math.abs(dy) < 1 || Math.abs(dx) < ROUTE_CORNER_RADIUS * 2) {
+    return `M ${source.x} ${source.y} L ${target.x} ${target.y}`;
+  }
+  const horizontalDirection = dx >= 0 ? 1 : -1;
+  const verticalDirection = dy >= 0 ? 1 : -1;
+  const middleX = source.x + dx / 2;
+  const radius = Math.min(
+    ROUTE_CORNER_RADIUS,
+    Math.abs(dx) / 4,
+    Math.abs(dy) / 2,
   );
-  return `M ${source.x} ${source.y} C ${source.x + direction * handle} ${
-    source.y
-  }, ${target.x - direction * handle} ${target.y}, ${target.x} ${target.y}`;
+  return `M ${source.x} ${source.y} H ${
+    middleX - horizontalDirection * radius
+  } Q ${middleX} ${source.y} ${middleX} ${
+    source.y + verticalDirection * radius
+  } V ${target.y - verticalDirection * radius} Q ${middleX} ${
+    target.y
+  } ${middleX + horizontalDirection * radius} ${target.y} H ${target.x}`;
 }
 
 function rectCenter(rect: Rect): Point {
@@ -132,20 +143,219 @@ function rectCenter(rect: Rect): Point {
   };
 }
 
-function average(values: readonly number[]) {
-  return values.reduce((sum, value) => sum + value, 0) / values.length;
+function rectAnchor(
+  rect: Rect,
+  axis: ConnectionAxis,
+  direction: 1 | -1,
+  clearance = 0,
+  portOffset = 0,
+): Point {
+  if (axis === 'vertical') {
+    return {
+      x: rect.x + rect.width / 2 + portOffset,
+      y:
+        direction === 1 ? rect.y + rect.height + clearance : rect.y - clearance,
+    };
+  }
+  return {
+    x: direction === 1 ? rect.x + rect.width + clearance : rect.x - clearance,
+    y: rect.y + rect.height / 2 + portOffset,
+  };
 }
 
-function rectAnchor(rect: Rect, direction: 1 | -1): Point {
-  return {
-    x: direction === 1 ? rect.x + rect.width : rect.x,
-    y: rect.y + rect.height / 2,
+function horizontalGap(left: Rect, right: Rect) {
+  return Math.max(
+    right.x - (left.x + left.width),
+    left.x - (right.x + right.width),
+  );
+}
+
+function connectionAxis(source: Rect, target: Rect): ConnectionAxis {
+  return horizontalGap(source, target) >= HORIZONTAL_ROUTE_MIN_GAP
+    ? 'horizontal'
+    : 'vertical';
+}
+
+function referenceStaysInSection(
+  edge: ProjectResourceReferenceEdge,
+  sectionByResourceId: ReadonlyMap<string, ProjectResourceCanvasSection>,
+) {
+  const sourceSection = sectionByResourceId.get(edge.sourceResourceId);
+  return (
+    sourceSection !== undefined &&
+    sourceSection === sectionByResourceId.get(edge.targetResourceId)
+  );
+}
+
+function referenceRouteOffsets(
+  edges: readonly ProjectResourceReferenceEdge[],
+  rectByResourceId: RectLookup,
+  sectionByResourceId: ReadonlyMap<string, ProjectResourceCanvasSection>,
+) {
+  type Endpoint = {
+    axis: ConnectionAxis;
+    edgeId: string;
+    oppositeCoordinate: number;
+    rect: Rect;
+    role: keyof ReferenceRouteOffsets;
   };
+  const endpointsByPort = new Map<string, Endpoint[]>();
+  const addEndpoint = (
+    resourceId: string,
+    side: 1 | -1,
+    endpoint: Endpoint,
+  ) => {
+    const key = `${resourceId}\n${endpoint.axis}\n${side}`;
+    const endpoints = endpointsByPort.get(key) ?? [];
+    endpoints.push(endpoint);
+    endpointsByPort.set(key, endpoints);
+  };
+
+  for (const edge of edges) {
+    if (
+      edge.sourceResourceId === edge.targetResourceId ||
+      !referenceStaysInSection(edge, sectionByResourceId)
+    ) {
+      continue;
+    }
+    const sourceRect = rectByResourceId.get(edge.sourceResourceId);
+    const targetRect = rectByResourceId.get(edge.targetResourceId);
+    if (!sourceRect || !targetRect) {
+      continue;
+    }
+    const axis = connectionAxis(sourceRect, targetRect);
+    const sourceCenter = rectCenter(sourceRect);
+    const targetCenter = rectCenter(targetRect);
+    const direction: 1 | -1 =
+      axis === 'horizontal'
+        ? targetCenter.x >= sourceCenter.x
+          ? 1
+          : -1
+        : targetCenter.y >= sourceCenter.y
+          ? 1
+          : -1;
+    addEndpoint(edge.sourceResourceId, direction, {
+      axis,
+      edgeId: edge.id,
+      oppositeCoordinate:
+        axis === 'horizontal' ? targetCenter.y : targetCenter.x,
+      rect: sourceRect,
+      role: 'source',
+    });
+    addEndpoint(edge.targetResourceId, direction === 1 ? -1 : 1, {
+      axis,
+      edgeId: edge.id,
+      oppositeCoordinate:
+        axis === 'horizontal' ? sourceCenter.y : sourceCenter.x,
+      rect: targetRect,
+      role: 'target',
+    });
+  }
+
+  const offsetsByEdgeId = new Map<string, Partial<ReferenceRouteOffsets>>();
+  for (const endpoints of endpointsByPort.values()) {
+    endpoints.sort(
+      (left, right) =>
+        left.oppositeCoordinate - right.oppositeCoordinate ||
+        left.edgeId.localeCompare(right.edgeId),
+    );
+    const extent =
+      endpoints[0]?.axis === 'horizontal'
+        ? (endpoints[0]?.rect.height ?? 0)
+        : (endpoints[0]?.rect.width ?? 0);
+    const maximumOffset = Math.max(0, extent / 2 - REFERENCE_PORT_INSET);
+    const step =
+      endpoints.length > 1
+        ? Math.min(
+            REFERENCE_PORT_GAP,
+            (maximumOffset * 2) / (endpoints.length - 1),
+          )
+        : 0;
+    endpoints.forEach((endpoint, index) => {
+      const current = offsetsByEdgeId.get(endpoint.edgeId) ?? {};
+      current[endpoint.role] = (index - (endpoints.length - 1) / 2) * step;
+      offsetsByEdgeId.set(endpoint.edgeId, current);
+    });
+  }
+  return new Map(
+    Array.from(offsetsByEdgeId, ([edgeId, offsets]) => [
+      edgeId,
+      { source: offsets.source ?? 0, target: offsets.target ?? 0 },
+    ]),
+  );
+}
+
+function clampPointToRect(point: Point, rect: Rect, inset = 0): Point {
+  return {
+    x: Math.min(rect.x + rect.width - inset, Math.max(rect.x + inset, point.x)),
+    y: Math.min(
+      rect.y + rect.height - inset,
+      Math.max(rect.y + inset, point.y),
+    ),
+  };
+}
+
+function viewportExitPoint(from: Point, toward: Point, viewport: Rect) {
+  const insetViewport = {
+    x: viewport.x + CONTINUATION_VIEWPORT_INSET,
+    y: viewport.y + CONTINUATION_VIEWPORT_INSET,
+    width: Math.max(1, viewport.width - CONTINUATION_VIEWPORT_INSET * 2),
+    height: Math.max(1, viewport.height - CONTINUATION_VIEWPORT_INSET * 2),
+  };
+  const start = clampPointToRect(from, insetViewport);
+  const dx = toward.x - start.x;
+  const dy = toward.y - start.y;
+  if (dx === 0 && dy === 0) {
+    return null;
+  }
+  const candidates: number[] = [];
+  if (dx > 0) {
+    candidates.push((insetViewport.x + insetViewport.width - start.x) / dx);
+  } else if (dx < 0) {
+    candidates.push((insetViewport.x - start.x) / dx);
+  }
+  if (dy > 0) {
+    candidates.push((insetViewport.y + insetViewport.height - start.y) / dy);
+  } else if (dy < 0) {
+    candidates.push((insetViewport.y - start.y) / dy);
+  }
+  const distance = Math.min(
+    ...candidates.filter((candidate) => candidate >= 0),
+  );
+  if (!Number.isFinite(distance)) {
+    return null;
+  }
+  return {
+    start,
+    end: {
+      x: start.x + dx * distance,
+      y: start.y + dy * distance,
+    },
+  };
+}
+
+function outgoingContinuationPath(from: Point, toward: Point, viewport: Rect) {
+  const continuation = viewportExitPoint(from, toward, viewport);
+  return continuation
+    ? `M ${continuation.start.x} ${continuation.start.y} L ${
+        continuation.end.x
+      } ${continuation.end.y}`
+    : null;
+}
+
+function incomingContinuationPath(from: Point, target: Point, viewport: Rect) {
+  const continuation = viewportExitPoint(target, from, viewport);
+  return continuation
+    ? `M ${continuation.end.x} ${continuation.end.y} L ${
+        continuation.start.x
+      } ${continuation.start.y}`
+    : null;
 }
 
 function referenceGeometry(
   edge: ProjectResourceReferenceEdge,
   rectByResourceId: RectLookup,
+  routeOffsets: ReferenceRouteOffsets = { source: 0, target: 0 },
 ) {
   const sourceRect = rectByResourceId.get(edge.sourceResourceId);
   const targetRect = rectByResourceId.get(edge.targetResourceId);
@@ -153,153 +363,151 @@ function referenceGeometry(
     return null;
   }
   if (edge.sourceResourceId === edge.targetResourceId) {
-    const anchorX = sourceRect.x + sourceRect.width;
+    const anchorX = sourceRect.x + sourceRect.width + ARROW_CLEARANCE;
     const centerY = sourceRect.y + sourceRect.height / 2;
     const sourceY = centerY + SELF_REFERENCE_LOOP_ANCHOR_OFFSET;
     const targetY = centerY - SELF_REFERENCE_LOOP_ANCHOR_OFFSET;
     const loopX = anchorX + SELF_REFERENCE_LOOP_WIDTH;
     return {
+      axis: 'horizontal' as const,
       path: `M ${anchorX} ${sourceY} C ${loopX} ${sourceY}, ${loopX} ${targetY}, ${anchorX} ${targetY}`,
+      source: { x: anchorX, y: sourceY },
+      target: { x: anchorX, y: targetY },
       selfLoop: true,
     };
   }
   const sourceCenter = rectCenter(sourceRect);
   const targetCenter = rectCenter(targetRect);
-  const direction: 1 | -1 = targetCenter.x >= sourceCenter.x ? 1 : -1;
-  const source = rectAnchor(sourceRect, direction);
-  const target = rectAnchor(targetRect, direction === 1 ? -1 : 1);
+  const axis = connectionAxis(sourceRect, targetRect);
+  const direction: 1 | -1 =
+    axis === 'horizontal'
+      ? targetCenter.x >= sourceCenter.x
+        ? 1
+        : -1
+      : targetCenter.y >= sourceCenter.y
+        ? 1
+        : -1;
+  const source = rectAnchor(
+    sourceRect,
+    axis,
+    direction,
+    0,
+    routeOffsets.source,
+  );
+  const target = rectAnchor(
+    targetRect,
+    axis,
+    direction === 1 ? -1 : 1,
+    ARROW_CLEARANCE,
+    routeOffsets.target,
+  );
   return {
-    path: connectionPath(source, target),
+    axis,
+    path: connectionPath(source, target, axis),
+    source,
+    target,
     selfLoop: false,
+    routeOffsets,
   };
 }
 
-function taskFlowGeometry(
-  flow: ProjectResourceTaskFlow,
+function visibleReferencePath(
+  edge: ProjectResourceReferenceEdge,
+  geometry: NonNullable<ReturnType<typeof referenceGeometry>>,
   rectByResourceId: RectLookup,
+  viewport: Rect | null,
 ) {
-  const sourceRects = flow.sourceResourceIds.flatMap((resourceId) => {
-    const rect = rectByResourceId.get(resourceId);
-    return rect ? [{ resourceId, rect }] : [];
-  });
-  const targetRects = flow.targetResourceIds.flatMap((resourceId) => {
-    const rect = rectByResourceId.get(resourceId);
-    return rect ? [{ resourceId, rect }] : [];
-  });
-  if (sourceRects.length === 0 || targetRects.length === 0) {
+  const sourceRect = rectByResourceId.get(edge.sourceResourceId);
+  const targetRect = rectByResourceId.get(edge.targetResourceId);
+  if (!sourceRect || !targetRect) {
     return null;
   }
-  const sourceCenterX = average(
-    sourceRects.map(({ rect }) => rectCenter(rect).x),
-  );
-  const targetCenterX = average(
-    targetRects.map(({ rect }) => rectCenter(rect).x),
-  );
-  const direction: 1 | -1 = targetCenterX >= sourceCenterX ? 1 : -1;
-  const sourceAnchors = sourceRects.map(({ resourceId, rect }) => ({
-    resourceId,
-    point: rectAnchor(rect, direction),
-  }));
-  const targetAnchors = targetRects.map(({ resourceId, rect }) => ({
-    resourceId,
-    point: rectAnchor(rect, direction === 1 ? -1 : 1),
-  }));
-  const sourceHub: Point = {
-    x:
-      (direction === 1
-        ? Math.max(...sourceAnchors.map(({ point }) => point.x))
-        : Math.min(...sourceAnchors.map(({ point }) => point.x))) +
-      direction * TASK_FLOW_HUB_GAP,
-    y: average(sourceAnchors.map(({ point }) => point.y)),
-  };
-  const targetHub: Point = {
-    x:
-      (direction === 1
-        ? Math.min(...targetAnchors.map(({ point }) => point.x))
-        : Math.max(...targetAnchors.map(({ point }) => point.x))) -
-      direction * TASK_FLOW_HUB_GAP,
-    y: average(targetAnchors.map(({ point }) => point.y)),
-  };
-  return { sourceAnchors, targetAnchors, sourceHub, targetHub };
-}
-
-function taskFlowSectionGeometries(
-  flow: ProjectResourceTaskFlow,
-  rectByResourceId: RectLookup,
-  sectionByResourceId: ReadonlyMap<string, ProjectResourceCanvasSection>,
-): TaskFlowSectionGeometry[] {
-  return RESOURCE_SECTIONS.flatMap((section) => {
-    const geometry = taskFlowGeometry(
-      {
-        ...flow,
-        sourceResourceIds: flow.sourceResourceIds.filter(
-          (resourceId) => sectionByResourceId.get(resourceId) === section,
-        ),
-        targetResourceIds: flow.targetResourceIds.filter(
-          (resourceId) => sectionByResourceId.get(resourceId) === section,
-        ),
-      },
-      rectByResourceId,
+  if (!viewport) {
+    return { continuation: null, path: geometry.path } as const;
+  }
+  const sourceVisible = rectIntersectsViewport(sourceRect, viewport);
+  const targetVisible = rectIntersectsViewport(targetRect, viewport);
+  if (geometry.selfLoop) {
+    return sourceVisible
+      ? ({ continuation: null, path: geometry.path } as const)
+      : null;
+  }
+  if (!sourceVisible && !targetVisible) {
+    return null;
+  }
+  if (sourceVisible && targetVisible) {
+    return { continuation: null, path: geometry.path } as const;
+  }
+  if (sourceVisible) {
+    const path = outgoingContinuationPath(
+      geometry.source,
+      rectCenter(targetRect),
+      viewport,
     );
-    return geometry ? [{ ...geometry, section }] : [];
-  });
-}
-
-function taskFlowRenderKey(
-  flowId: string,
-  section: ProjectResourceCanvasSection,
-) {
-  return `${flowId}\n${section}`;
+    return path ? ({ continuation: 'outgoing', path } as const) : null;
+  }
+  const path = incomingContinuationPath(
+    rectCenter(sourceRect),
+    geometry.target,
+    viewport,
+  );
+  return path ? ({ continuation: 'incoming', path } as const) : null;
 }
 
 export const ResourceDependencyOverlay = forwardRef<
   ResourceDependencyOverlayHandle,
   ResourceDependencyOverlayProps
 >(function ResourceDependencyOverlay(
-  { graph, positions, visibleResourceIds },
+  { geometryRevision = '', graph, positions, section, visibleResourceIds },
   ref,
 ) {
   const markerPrefix = useId().replace(/[^a-zA-Z0-9_-]/gu, '');
   const overlayRef = useRef<SVGSVGElement>(null);
-  const referencePathRefs = useRef(new Map<string, SVGPathElement>());
-  const taskFlowPathRefs = useRef(new Map<string, TaskFlowPathRefs>());
-  const activeDragPreviewRef = useRef<(Point & { resourceId: string }) | null>(
-    null,
+  const [logicalViewport, setLogicalViewport] = useState<Rect | null>(null);
+  const [dragPreview, setDragPreview] = useState<
+    (Point & { resourceId: string }) | null
+  >(null);
+
+  useImperativeHandle(
+    ref,
+    () => ({
+      updateDragPreview(preview) {
+        setDragPreview(preview);
+      },
+      clearDragPreview() {
+        setDragPreview(null);
+      },
+    }),
+    [],
   );
-  const graphRef = useRef(graph);
-  const positionByResourceIdRef = useRef(
-    new Map(positions.map((position) => [position.resourceId, position])),
-  );
-  const rectByResourceIdRef = useRef<Map<string, Rect>>(new Map());
-  const [sectionOrigins, setSectionOrigins] = useState<SectionOrigins>({});
 
   useLayoutEffect(() => {
-    const canvas = overlayRef.current?.parentElement;
-    if (!canvas) {
+    const plane = overlayRef.current?.parentElement;
+    const viewport = plane?.closest<HTMLElement>(SECTION_SCROLL_SELECTOR);
+    if (!plane || !viewport) {
+      setLogicalViewport(null);
       return undefined;
     }
     let frameId: number | null = null;
     const measure = () => {
       frameId = null;
-      const canvasRect = canvas.getBoundingClientRect();
-      const next: SectionOrigins = {};
-      canvas
-        .querySelectorAll<HTMLElement>(SECTION_SELECTOR)
-        .forEach((plane) => {
-          const section = plane.dataset.resourceSectionPlane as
-            | ProjectResourceCanvasSection
-            | undefined;
-          if (!section) {
-            return;
-          }
-          const planeRect = plane.getBoundingClientRect();
-          next[section] = {
-            x: planeRect.left - canvasRect.left,
-            y: planeRect.top - canvasRect.top,
-          };
-        });
-      setSectionOrigins((current) =>
-        pointsEqual(current, next) ? current : next,
+      const parsedScale = Number(plane.dataset.resourceSectionScale);
+      const scale =
+        Number.isFinite(parsedScale) && parsedScale > 0 ? parsedScale : 1;
+      const viewportRect = viewport.getBoundingClientRect();
+      const width = viewport.clientWidth || viewportRect.width;
+      const height = viewport.clientHeight || viewportRect.height;
+      const next =
+        width > 0 && height > 0
+          ? {
+              x: viewport.scrollLeft / scale,
+              y: viewport.scrollTop / scale,
+              width: width / scale,
+              height: height / scale,
+            }
+          : null;
+      setLogicalViewport((current) =>
+        rectsEqual(current, next) ? current : next,
       );
     };
     const scheduleMeasure = () => {
@@ -313,42 +521,45 @@ export const ResourceDependencyOverlay = forwardRef<
     const observer = ResizeObserverClass
       ? new ResizeObserverClass(scheduleMeasure)
       : null;
-    observer?.observe(canvas);
-    canvas
-      .querySelectorAll<HTMLElement>(SECTION_SELECTOR)
-      .forEach((plane) => observer?.observe(plane));
+    observer?.observe(plane);
+    observer?.observe(viewport);
+    viewport.addEventListener('scroll', scheduleMeasure, { passive: true });
     window.addEventListener('resize', scheduleMeasure);
     return () => {
       if (frameId !== null) {
         window.cancelAnimationFrame(frameId);
       }
       observer?.disconnect();
+      viewport.removeEventListener('scroll', scheduleMeasure);
       window.removeEventListener('resize', scheduleMeasure);
     };
-  }, []);
+  }, [geometryRevision, section]);
 
   const rectByResourceId = useMemo(() => {
     const result = new Map<string, Rect>();
     for (const position of positions) {
       if (
+        position.section !== section ||
         !graph.resourceIds.has(position.resourceId) ||
         !visibleResourceIds.has(position.resourceId)
       ) {
         continue;
       }
-      const origin = sectionOrigins[position.section];
-      if (!origin) {
-        continue;
-      }
       result.set(position.resourceId, {
-        x: origin.x + position.x,
-        y: origin.y + position.y,
+        x:
+          dragPreview?.resourceId === position.resourceId
+            ? dragPreview.x
+            : position.x,
+        y:
+          dragPreview?.resourceId === position.resourceId
+            ? dragPreview.y
+            : position.y,
         width: RESOURCE_CANVAS_CARD_WIDTH,
         height: RESOURCE_CANVAS_CARD_HEIGHT,
       });
     }
     return result;
-  }, [graph.resourceIds, positions, sectionOrigins, visibleResourceIds]);
+  }, [dragPreview, graph.resourceIds, positions, section, visibleResourceIds]);
   const sectionByResourceId = useMemo(
     () =>
       new Map(
@@ -356,140 +567,55 @@ export const ResourceDependencyOverlay = forwardRef<
       ),
     [positions],
   );
-  graphRef.current = graph;
-  positionByResourceIdRef.current = new Map(
-    positions.map((position) => [position.resourceId, position]),
-  );
-  rectByResourceIdRef.current = rectByResourceId;
-
-  const taskFlowRenderEntries = useMemo(
+  const sameSectionReferenceEdges = useMemo(
     () =>
-      graph.taskFlows.flatMap((flow) =>
-        taskFlowSectionGeometries(
-          flow,
-          rectByResourceId,
-          sectionByResourceId,
-        ).map((geometry) => ({
-          flow,
-          geometry,
-          renderKey: taskFlowRenderKey(flow.id, geometry.section),
-        })),
+      graph.referenceEdges.filter(
+        (edge) =>
+          sectionByResourceId.get(edge.sourceResourceId) === section &&
+          referenceStaysInSection(edge, sectionByResourceId),
       ),
-    [graph.taskFlows, rectByResourceId, sectionByResourceId],
+    [graph.referenceEdges, section, sectionByResourceId],
   );
-
-  const renderTaskFlows = useMemo(
+  const routeOffsetsByReferenceEdgeId = useMemo(
     () =>
-      taskFlowRenderEntries.map(({ flow, geometry, renderKey }) => {
-        const className = `game-resource-dependency-edge game-resource-dependency-edge--task${
-          flow.cyclic ? ' is-cyclic' : ''
-        }`;
-        return (
-          <g
-            key={renderKey}
-            className={className}
-            data-edge-kind="task-flow"
-            data-edge-id={flow.id}
-            data-resource-section={geometry.section}
-            data-source-task-id={flow.sourceTaskId}
-            data-target-task-id={flow.targetTaskId}
-            data-cyclic={flow.cyclic || undefined}
-          >
-            <title>{`任务流转：${flow.sourceTaskId} → ${flow.targetTaskId}${
-              flow.cyclic ? '（检测到依赖环）' : ''
-            }`}</title>
-            {geometry.sourceAnchors.map(({ resourceId, point }) => (
-              <path
-                ref={(node) => {
-                  let refs = taskFlowPathRefs.current.get(renderKey);
-                  if (!refs) {
-                    refs = {
-                      sourceBranches: new Map(),
-                      targetBranches: new Map(),
-                      trunk: null,
-                    };
-                    taskFlowPathRefs.current.set(renderKey, refs);
-                  }
-                  if (node) {
-                    refs.sourceBranches.set(resourceId, node);
-                  } else {
-                    refs.sourceBranches.delete(resourceId);
-                  }
-                }}
-                key={`source:${resourceId}`}
-                className="game-resource-dependency-branch"
-                data-branch-side="source"
-                data-resource-id={resourceId}
-                d={taskFlowBranchPath(point, geometry.sourceHub)}
-              />
-            ))}
-            <path
-              ref={(node) => {
-                let refs = taskFlowPathRefs.current.get(renderKey);
-                if (!refs) {
-                  refs = {
-                    sourceBranches: new Map(),
-                    targetBranches: new Map(),
-                    trunk: null,
-                  };
-                  taskFlowPathRefs.current.set(renderKey, refs);
-                }
-                refs.trunk = node;
-              }}
-              className="game-resource-dependency-trunk"
-              d={connectionPath(geometry.sourceHub, geometry.targetHub)}
-            />
-            {geometry.targetAnchors.map(({ resourceId, point }) => (
-              <path
-                ref={(node) => {
-                  let refs = taskFlowPathRefs.current.get(renderKey);
-                  if (!refs) {
-                    refs = {
-                      sourceBranches: new Map(),
-                      targetBranches: new Map(),
-                      trunk: null,
-                    };
-                    taskFlowPathRefs.current.set(renderKey, refs);
-                  }
-                  if (node) {
-                    refs.targetBranches.set(resourceId, node);
-                  } else {
-                    refs.targetBranches.delete(resourceId);
-                  }
-                }}
-                key={`target:${resourceId}`}
-                className="game-resource-dependency-branch"
-                data-branch-side="target"
-                data-resource-id={resourceId}
-                d={taskFlowBranchPath(geometry.targetHub, point)}
-                markerEnd={`url(#${markerPrefix}-task-flow-arrow)`}
-              />
-            ))}
-          </g>
-        );
-      }),
-    [markerPrefix, taskFlowRenderEntries],
+      referenceRouteOffsets(
+        sameSectionReferenceEdges,
+        rectByResourceId,
+        sectionByResourceId,
+      ),
+    [rectByResourceId, sameSectionReferenceEdges, sectionByResourceId],
   );
 
   const renderReferenceEdges = useMemo(
     () =>
-      graph.referenceEdges.map((edge) => {
-        const geometry = referenceGeometry(edge, rectByResourceId);
+      sameSectionReferenceEdges.map((edge) => {
+        const routeOffsets = routeOffsetsByReferenceEdgeId.get(edge.id);
+        const geometry = referenceGeometry(
+          edge,
+          rectByResourceId,
+          routeOffsets,
+        );
         if (!geometry) {
           return null;
         }
+        const visibleGeometry = visibleReferencePath(
+          edge,
+          geometry,
+          rectByResourceId,
+          logicalViewport,
+        );
+        if (!visibleGeometry) {
+          return null;
+        }
         const className = `game-resource-dependency-edge game-resource-dependency-edge--reference${
           edge.cyclic ? ' is-cyclic' : ''
+        }${
+          visibleGeometry.continuation
+            ? ' game-resource-dependency-continuation'
+            : ''
         }`;
         return (
           <path
-            ref={(node) => {
-              if (node) {
-                referencePathRefs.current.set(edge.id, node);
-              } else {
-                referencePathRefs.current.delete(edge.id);
-              }
-            }}
             key={edge.id}
             className={className}
             data-edge-kind="asset-reference"
@@ -498,145 +624,40 @@ export const ResourceDependencyOverlay = forwardRef<
             data-target-resource-id={edge.targetResourceId}
             data-cyclic={edge.cyclic || undefined}
             data-self-loop={geometry.selfLoop || undefined}
-            d={geometry.path}
+            data-route-axis={geometry.axis}
+            data-source-port-offset={routeOffsets?.source ?? 0}
+            data-target-port-offset={routeOffsets?.target ?? 0}
+            data-edge-continuation={visibleGeometry.continuation ?? undefined}
+            data-offscreen-target={
+              visibleGeometry.continuation === 'outgoing' || undefined
+            }
+            d={visibleGeometry.path}
             markerEnd={`url(#${markerPrefix}-asset-reference-arrow)`}
           >
             <title>{`资源引用${edge.cyclic ? '（检测到依赖环）' : ''}`}</title>
           </path>
         );
       }),
-    [graph.referenceEdges, markerPrefix, rectByResourceId],
-  );
-
-  useLayoutEffect(() => {
-    const activeRenderKeys = new Set(
-      taskFlowRenderEntries.map((entry) => entry.renderKey),
-    );
-    for (const renderKey of taskFlowPathRefs.current.keys()) {
-      if (!activeRenderKeys.has(renderKey)) {
-        taskFlowPathRefs.current.delete(renderKey);
-      }
-    }
-  }, [taskFlowRenderEntries]);
-
-  const updateAffectedGeometry = useCallback(
-    (
-      affectedResourceIds: ReadonlySet<string>,
-      dragPreview: (Point & { resourceId: string }) | null,
-    ) => {
-      const currentGraph = graphRef.current;
-      const currentRects = rectByResourceIdRef.current;
-      const dragBasePosition = dragPreview
-        ? positionByResourceIdRef.current.get(dragPreview.resourceId)
-        : undefined;
-      const rectLookup = {
-        get(resourceId: string) {
-          const rect = currentRects.get(resourceId);
-          if (!rect) {
-            return undefined;
-          }
-          return dragPreview?.resourceId === resourceId
-            ? {
-                ...rect,
-                x: rect.x - (dragBasePosition?.x ?? 0) + dragPreview.x,
-                y: rect.y - (dragBasePosition?.y ?? 0) + dragPreview.y,
-              }
-            : rect;
-        },
-      };
-      const affectedEdgeIds = new Set<string>();
-      for (const resourceId of affectedResourceIds) {
-        const index = currentGraph.connectionIndex.get(resourceId);
-        index?.referenceEdgeIds.forEach((edgeId) =>
-          affectedEdgeIds.add(edgeId),
-        );
-        index?.taskFlowIds.forEach((flowId) => affectedEdgeIds.add(flowId));
-      }
-      for (const edgeId of affectedEdgeIds) {
-        const referenceEdge = currentGraph.referenceEdgeById.get(edgeId);
-        if (referenceEdge) {
-          const geometry = referenceGeometry(referenceEdge, rectLookup);
-          const path = referencePathRefs.current.get(edgeId);
-          if (geometry && path) {
-            path.setAttribute('d', geometry.path);
-          }
-          continue;
-        }
-        const flow = currentGraph.taskFlowById.get(edgeId);
-        if (!flow) {
-          continue;
-        }
-        const sectionByResourceId = new Map(
-          Array.from(
-            positionByResourceIdRef.current.values(),
-            (position) => [position.resourceId, position.section] as const,
-          ),
-        );
-        for (const geometry of taskFlowSectionGeometries(
-          flow,
-          rectLookup,
-          sectionByResourceId,
-        )) {
-          const paths = taskFlowPathRefs.current.get(
-            taskFlowRenderKey(flow.id, geometry.section),
-          );
-          if (!paths) {
-            continue;
-          }
-          geometry.sourceAnchors.forEach(({ resourceId, point }) => {
-            paths.sourceBranches
-              .get(resourceId)
-              ?.setAttribute(
-                'd',
-                taskFlowBranchPath(point, geometry.sourceHub),
-              );
-          });
-          paths.trunk?.setAttribute(
-            'd',
-            connectionPath(geometry.sourceHub, geometry.targetHub),
-          );
-          geometry.targetAnchors.forEach(({ resourceId, point }) => {
-            paths.targetBranches
-              .get(resourceId)
-              ?.setAttribute(
-                'd',
-                taskFlowBranchPath(geometry.targetHub, point),
-              );
-          });
-        }
-      }
-    },
-    [],
-  );
-
-  useImperativeHandle(
-    ref,
-    () => ({
-      updateDragPreview(preview) {
-        const affectedResourceIds = new Set<string>();
-        if (activeDragPreviewRef.current) {
-          affectedResourceIds.add(activeDragPreviewRef.current.resourceId);
-        }
-        affectedResourceIds.add(preview.resourceId);
-        activeDragPreviewRef.current = preview;
-        updateAffectedGeometry(affectedResourceIds, preview);
-      },
-      clearDragPreview() {
-        const active = activeDragPreviewRef.current;
-        activeDragPreviewRef.current = null;
-        if (active) {
-          updateAffectedGeometry(new Set([active.resourceId]), null);
-        }
-      },
-    }),
-    [updateAffectedGeometry],
+    [
+      logicalViewport,
+      markerPrefix,
+      rectByResourceId,
+      routeOffsetsByReferenceEdgeId,
+      sameSectionReferenceEdges,
+    ],
   );
 
   return (
     <svg
       ref={overlayRef}
       className="game-resource-dependency-overlay"
-      data-testid="resource-dependency-overlay"
+      data-testid={`resource-dependency-overlay-${section}`}
+      data-resource-section={section}
+      data-logical-viewport={
+        logicalViewport
+          ? `${logicalViewport.x},${logicalViewport.y},${logicalViewport.width},${logicalViewport.height}`
+          : undefined
+      }
       aria-hidden="true"
       focusable="false"
     >
@@ -649,27 +670,13 @@ export const ResourceDependencyOverlay = forwardRef<
           refX="8"
           refY="4.5"
           orient="auto"
+          overflow="visible"
           markerUnits="userSpaceOnUse"
           viewBox="0 0 9 9"
         >
           <path d="M 1 1 L 8 4.5 L 1 8 z" />
         </marker>
-        <marker
-          id={`${markerPrefix}-task-flow-arrow`}
-          className="game-resource-dependency-marker game-resource-dependency-marker--task"
-          markerWidth="8"
-          markerHeight="8"
-          refX="7.25"
-          refY="4"
-          orient="auto"
-          markerUnits="userSpaceOnUse"
-          viewBox="0 0 8 8"
-        >
-          <path d="M 1 1.25 L 7 4 L 1 6.75 z" />
-        </marker>
       </defs>
-
-      {renderTaskFlows}
       {renderReferenceEdges}
     </svg>
   );
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 c6c2e3791..a7a5ad2cf 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
@@ -7,14 +7,19 @@ import {
   Image,
   Info,
   ListFilter,
+  Minus,
   Music2,
   Pause,
   Play,
+  Plus,
+  RotateCcw,
   Search,
   Settings2,
   SlidersHorizontal,
   Sparkles,
   X,
+  ZoomIn,
+  ZoomOut,
 } from 'lucide-react';
 import {
   type CSSProperties,
@@ -41,7 +46,16 @@ import {
   LocalGamePreviewFrame,
   resolveEmbeddedPreviewUrl,
 } from '../../features/project-workspace/LocalGamePreviewFrame';
-import { resourceCanvasSectionExtent } from './resourceCanvasLayoutModel';
+import {
+  RESOURCE_CANVAS_CARD_HEIGHT,
+  RESOURCE_CANVAS_CARD_WIDTH,
+  resourceCanvasSectionExtent,
+} from './resourceCanvasLayoutModel';
+import {
+  projectResourceCardPreviewKind,
+  type ProjectResourceCardPreviewState,
+  summarizeProjectResourceDocument,
+} from './resourceCardPreviewModel';
 import {
   EMPTY_PROJECT_RESOURCE_GRAPH,
   normalizeProjectResourceGraph,
@@ -57,7 +71,13 @@ import {
   type ProjectResourceCategory,
   projectResourcesFromReadModels,
 } from './resourceProjectionModel';
+import {
+  clampProjectResourceSectionZoom,
+  projectResourceSectionZoomFromWheel,
+} from './resourceSectionHeightModel';
 import { useProjectResourceCanvasLayout } from './useProjectResourceCanvasLayout';
+import { useProjectResourceCardPreviews } from './useProjectResourceCardPreviews';
+import { useProjectResourceSectionHeights } from './useProjectResourceSectionHeights';
 
 export type {
   ProjectAgentResultSummary,
@@ -69,57 +89,12 @@ type ResourceSortMode = ProjectResourceCanvasLayoutMode;
 type WorkbenchMode = 'resources' | 'run';
 type ApprovalMode = 'strict' | 'risk' | 'none';
 
-type LocalProjectImagePreview = {
-  path: string;
-  mediaType: string;
-  byteLen: number;
-  dataUrl: string;
+type WebKitGestureEvent = Event & {
+  clientX?: number;
+  clientY?: number;
+  scale?: number;
 };
 
-type LocalProjectTextPreview = {
-  path: string;
-  mediaType: string;
-  byteLen: number;
-  content: string;
-};
-
-type LocalProjectMediaPreview = {
-  path: string;
-  mediaType: string;
-  byteLen: number;
-  dataUrl: string;
-};
-
-type ImagePreviewState =
-  | { status: 'idle'; resourceId: null }
-  | { status: 'loading'; resourceId: string }
-  | {
-      status: 'loaded';
-      resourceId: string;
-      preview: LocalProjectImagePreview;
-    }
-  | { status: 'failed'; resourceId: string; error: string };
-
-type TextPreviewState =
-  | { status: 'idle'; resourceId: null }
-  | { status: 'loading'; resourceId: string }
-  | {
-      status: 'loaded';
-      resourceId: string;
-      preview: LocalProjectTextPreview;
-    }
-  | { status: 'failed'; resourceId: string; error: string };
-
-type MediaPreviewState =
-  | { status: 'idle'; resourceId: null }
-  | { status: 'loading'; resourceId: string }
-  | {
-      status: 'loaded';
-      resourceId: string;
-      preview: LocalProjectMediaPreview;
-    }
-  | { status: 'failed'; resourceId: string; error: string };
-
 export type ProjectAgentRuntimeSummary = {
   group: GameCreationAppAgentGroup;
   label: string;
@@ -200,48 +175,6 @@ const approvalOptions: Array<{
   },
 ];
 
-function isRasterImageResource(resource: ProjectResource) {
-  const mediaType = resource.mediaType.toLowerCase();
-  return (
-    ['image/png', 'image/jpeg', 'image/jpg', 'image/webp'].includes(
-      mediaType,
-    ) || /\.(png|jpe?g|webp)$/iu.test(resource.path)
-  );
-}
-
-function isExtendedArtMediaResource(resource: ProjectResource) {
-  const mediaType = resource.mediaType.toLowerCase();
-  return (
-    resource.category === 'art' &&
-    (mediaType === 'image/svg+xml' ||
-      mediaType.startsWith('video/') ||
-      /\.(gif|svg|avif|bmp|mp4|webm|mov)$/iu.test(resource.path))
-  );
-}
-
-function mediaPreviewErrorMessage(error: unknown) {
-  const message = error instanceof Error ? error.message : String(error);
-  if (message.includes('项目权限策略要求用户确认')) {
-    return '当前项目策略要求先确认读取资源';
-  }
-  if (message.includes('项目权限策略拒绝执行')) {
-    return '当前项目策略不允许读取资源';
-  }
-  if (message.includes('不能超过')) {
-    return message;
-  }
-  if (message.includes('UTF-8') || message.includes('只支持')) {
-    return message;
-  }
-  if (message.includes('脚本或外部资源引用')) {
-    return message;
-  }
-  if (message.includes('发生漂移') || message.includes('发生替换')) {
-    return '资源读取期间发生变化，请关闭后重试';
-  }
-  return '资源暂时无法读取，请关闭后重试';
-}
-
 function formatMediaDuration(duration: number | null) {
   if (duration === null || !Number.isFinite(duration) || duration < 0) {
     return '载入后显示';
@@ -280,35 +213,6 @@ function SafeProjectMarkdown({ content }: { content: string }) {
   );
 }
 
-function imagePreviewErrorMessage(error: unknown) {
-  const message = error instanceof Error ? error.message : String(error);
-  if (message.includes('项目权限策略要求用户确认')) {
-    return '当前项目策略要求先确认读取图片';
-  }
-  if (message.includes('项目权限策略拒绝执行')) {
-    return '当前项目策略不允许读取图片';
-  }
-  if (message.includes('单张图片不能超过')) {
-    return message.replace('image.inspect', '图片预览');
-  }
-  if (message.includes('只支持 PNG、JPEG 或 WEBP')) {
-    return '暂时只能预览 PNG、JPEG 或 WEBP 图片';
-  }
-  if (message.includes('不能为空')) {
-    return '图片文件为空，无法预览';
-  }
-  if (message.includes('发生漂移') || message.includes('发生替换')) {
-    return '图片读取期间发生变化，请关闭后重试';
-  }
-  if (message.includes('图片尺寸过大')) {
-    return '图片尺寸过大，暂时无法在客户端预览';
-  }
-  if (message.includes('图片结构无效')) {
-    return '图片内容损坏，无法预览';
-  }
-  return '图片暂时无法读取，请关闭后重试';
-}
-
 function summarizeAgent(
   manifest: GameCreationAppManifest,
   group: AgentSummary['group'],
@@ -358,46 +262,279 @@ const ResourceCard = memo(function ResourceCard({
   relationState,
   x,
   y,
+  previewIdentity,
+  preview,
+  activeMediaIdentity,
   onSelect,
+  onObservePreview,
+  onRequestPreview,
+  onPreviewDecodeError,
+  onMediaToggle,
+  onMediaReady,
+  onMediaPlaybackChange,
 }: {
   resource: ProjectResource;
   selected: boolean;
   relationState: 'version-binding' | null;
   x: number;
   y: number;
+  previewIdentity: string;
+  preview: ProjectResourceCardPreviewState;
+  activeMediaIdentity: string | null;
   onSelect: (resourceId: string) => void;
+  onObservePreview: (
+    element: HTMLElement,
+    resource: ProjectResource,
+    identity: string,
+  ) => () => void;
+  onRequestPreview: (
+    resource: ProjectResource,
+    identity: string,
+    reason: 'visible' | 'detail' | 'play',
+  ) => void;
+  onPreviewDecodeError: (identity: string, error: string) => void;
+  onMediaToggle: (
+    resource: ProjectResource,
+    identity: string,
+    element: HTMLMediaElement | null,
+  ) => void;
+  onMediaReady: (identity: string, element: HTMLMediaElement) => void;
+  onMediaPlaybackChange: (
+    resourceId: string,
+    identity: string,
+    element: HTMLMediaElement,
+    playing: boolean,
+  ) => void;
 }) {
+  const cardRef = useRef<HTMLDivElement>(null);
+  const mediaRef = useRef<HTMLMediaElement>(null);
+  const [decodedIdentity, setDecodedIdentity] = useState<string | null>(null);
   const Icon = categoryIcons[resource.category];
+  const kind = projectResourceCardPreviewKind(resource);
+  const isMedia = kind === 'video' || kind === 'audio';
+  const mediaActive = activeMediaIdentity === previewIdentity;
+  const sourceUrl =
+    preview.status === 'loaded' ? preview.preview.sourceUrl : null;
+  const documentSummary =
+    preview.status === 'loaded' && preview.preview.content !== undefined
+      ? summarizeProjectResourceDocument(preview.preview.content)
+      : '';
+
+  useEffect(() => {
+    const element = cardRef.current;
+    if (!element) {
+      return undefined;
+    }
+    return onObservePreview(element, resource, previewIdentity);
+  }, [onObservePreview, previewIdentity, resource]);
+
+  useEffect(() => {
+    setDecodedIdentity(null);
+  }, [previewIdentity]);
+
+  useEffect(() => {
+    const media = mediaRef.current;
+    if (mediaActive && media && sourceUrl) {
+      onMediaReady(previewIdentity, media);
+    }
+  }, [mediaActive, onMediaReady, previewIdentity, sourceUrl]);
+
+  useEffect(() => {
+    const media = mediaRef.current;
+    return () => {
+      media?.pause();
+      media?.removeAttribute('src');
+    };
+  }, [previewIdentity, sourceUrl]);
+
+  const visual = (() => {
+    if ((kind === 'raster-image' || kind === 'media-image') && sourceUrl) {
+      return (
+        <img
+          src={sourceUrl}
+          alt=""
+          onError={() =>
+            onPreviewDecodeError(
+              previewIdentity,
+              '美术资源无法解码，请重新生成或替换该资源',
+            )
+          }
+        />
+      );
+    }
+    if (kind === 'video' && sourceUrl) {
+      return (
+        <>
+          <video
+            ref={(element) => {
+              mediaRef.current = element;
+            }}
+            src={sourceUrl}
+            preload="auto"
+            playsInline
+            className={decodedIdentity === previewIdentity ? 'is-decoded' : ''}
+            onLoadedData={() => setDecodedIdentity(previewIdentity)}
+            onPlay={(event) =>
+              onMediaPlaybackChange(
+                resource.id,
+                previewIdentity,
+                event.currentTarget,
+                true,
+              )
+            }
+            onPause={(event) =>
+              onMediaPlaybackChange(
+                resource.id,
+                previewIdentity,
+                event.currentTarget,
+                false,
+              )
+            }
+            onEnded={(event) =>
+              onMediaPlaybackChange(
+                resource.id,
+                previewIdentity,
+                event.currentTarget,
+                false,
+              )
+            }
+            onError={() =>
+              onPreviewDecodeError(
+                previewIdentity,
+                '视频内容无法解码，请重新生成或替换该资源',
+              )
+            }
+          />
+          {decodedIdentity !== previewIdentity ? (
+            <span className="game-resource-card-placeholder">
+              <Play size={30} aria-hidden="true" />
+            </span>
+          ) : null}
+        </>
+      );
+    }
+    if (kind === 'audio') {
+      return (
+        <span className="game-resource-card-audio-visual">
+          <Music2 size={34} aria-hidden="true" />
+          <span aria-hidden="true" />
+          {sourceUrl ? (
+            <audio
+              ref={(element) => {
+                mediaRef.current = element;
+              }}
+              src={sourceUrl}
+              preload="metadata"
+              onPlay={(event) =>
+                onMediaPlaybackChange(
+                  resource.id,
+                  previewIdentity,
+                  event.currentTarget,
+                  true,
+                )
+              }
+              onPause={(event) =>
+                onMediaPlaybackChange(
+                  resource.id,
+                  previewIdentity,
+                  event.currentTarget,
+                  false,
+                )
+              }
+              onEnded={(event) =>
+                onMediaPlaybackChange(
+                  resource.id,
+                  previewIdentity,
+                  event.currentTarget,
+                  false,
+                )
+              }
+              onError={() =>
+                onPreviewDecodeError(
+                  previewIdentity,
+                  '音频内容无法解码，请重新生成或替换该资源',
+                )
+              }
+            />
+          ) : null}
+        </span>
+      );
+    }
+    if (kind === 'document' && documentSummary) {
+      return (
+        <span className="game-resource-card-document-summary">
+          {documentSummary}
+        </span>
+      );
+    }
+    if (kind === 'version') {
+      return (
+        <span className="game-resource-card-version-visual">
+          <Gamepad2 size={34} aria-hidden="true" />
+          <span className="game-resource-card-version-relations">
+            {resource.version?.childVersionIds.length
+              ? `${resource.version.childVersionIds.length} 个直接子版本`
+              : '暂无直接子版本'}
+          </span>
+        </span>
+      );
+    }
+    return (
+      <span className="game-resource-card-placeholder">
+        <Icon size={30} aria-hidden="true" />
+      </span>
+    );
+  })();
+
   return (
-    <button
-      type="button"
+    <div
+      ref={cardRef}
       className={`game-resource-card${selected ? ' is-selected' : ''}${
         relationState ? ` is-relation-${relationState}` : ''
       }`}
-      aria-pressed={selected}
-      data-resource-id={resource.id}
-      title="打开资源详情"
+      data-preview-kind={kind}
       style={
         {
           '--resource-x': `${x}px`,
           '--resource-y': `${y}px`,
+          '--resource-card-width': `${RESOURCE_CANVAS_CARD_WIDTH}px`,
+          '--resource-card-height': `${RESOURCE_CANVAS_CARD_HEIGHT}px`,
         } as CSSProperties
       }
-      onClick={() => onSelect(resource.id)}
     >
-      <span className="game-resource-card-icon">
-        <Icon size={20} aria-hidden="true" />
+      <span className="game-resource-card-visual" aria-hidden="true">
+        {visual}
       </span>
-      <strong>{resource.label}</strong>
-      <small>{resource.sourceLabel}</small>
-      <small>
-        {resource.version
-          ? resource.version.childVersionIds.length > 0
-            ? `${resource.version.childVersionIds.length} 个直接子版本`
-            : '暂无直接子版本'
-          : resource.path}
-      </small>
-    </button>
+      <button
+        type="button"
+        className="game-resource-card-open"
+        aria-label={`打开资源详情：${categoryLabels[resource.category]} ${resource.label}`}
+        aria-pressed={selected}
+        data-resource-id={resource.id}
+        title="打开资源详情"
+        onClick={() => onSelect(resource.id)}
+      />
+      {isMedia ? (
+        <button
+          type="button"
+          className="game-resource-card-media-control"
+          aria-label={`${mediaActive ? '暂停' : '播放'} ${resource.label}`}
+          aria-pressed={mediaActive}
+          onClick={() => {
+            if (!sourceUrl) {
+              onRequestPreview(resource, previewIdentity, 'play');
+            }
+            onMediaToggle(resource, previewIdentity, mediaRef.current);
+          }}
+        >
+          {mediaActive ? (
+            <Pause size={18} aria-hidden="true" />
+          ) : (
+            <Play size={18} aria-hidden="true" />
+          )}
+        </button>
+      ) : null}
+    </div>
   );
 });
 
@@ -426,19 +563,19 @@ export default function ProjectDevelopmentView({
   const [showAllAgentGroups, setShowAllAgentGroups] = useState(false);
   const [runPlaying, setRunPlaying] = useState(false);
   const [activeSlice, setActiveSlice] = useState(0);
-  const [imagePreview, setImagePreview] = useState<ImagePreviewState>({
-    status: 'idle',
-    resourceId: null,
-  });
-  const [textPreview, setTextPreview] = useState<TextPreviewState>({
-    status: 'idle',
-    resourceId: null,
-  });
-  const [mediaPreview, setMediaPreview] = useState<MediaPreviewState>({
-    status: 'idle',
-    resourceId: null,
-  });
   const [mediaDuration, setMediaDuration] = useState<number | null>(null);
+  const [focusedAudioPlayIdentity, setFocusedAudioPlayIdentity] = useState<
+    string | null
+  >(null);
+  const focusedAudioRef = useRef<HTMLAudioElement>(null);
+  const [activeCardMediaIdentity, setActiveCardMediaIdentity] = useState<
+    string | null
+  >(null);
+  const activeCardMediaRef = useRef<{
+    resourceId: string;
+    identity: string;
+    element: HTMLMediaElement | null;
+  } | null>(null);
   const resourceCanvasRef = useRef<HTMLDivElement>(null);
   const resourceSearchRef = useRef<HTMLInputElement>(null);
   const resourceFocusRef = useRef<HTMLElement>(null);
@@ -446,7 +583,32 @@ export default function ProjectDevelopmentView({
   const previousFocusedResourceIdRef = useRef<string | null>(null);
   const resourceFocusProjectPathRef = useRef(projectPath);
   const suppressResourceFocusRestoreRef = useRef(false);
-  const resourceListScrollRef = useRef({ left: 0, top: 0 });
+  const resourceListScrollPositionsRef = useRef(
+    new Map<string, { left: number; top: number }>(),
+  );
+  const resourceSectionScrollPositionsRef = useRef(
+    new Map<string, { left: number; top: number }>(),
+  );
+  const resourceSectionZoomFramesRef = useRef(
+    new Map<
+      ResourceCategory,
+      {
+        frameId: number;
+        left: number;
+        top: number;
+        viewport: HTMLElement;
+      }
+    >(),
+  );
+  const resourceSectionGestureRef = useRef<{
+    category: ResourceCategory;
+    contentX: number;
+    contentY: number;
+    localX: number;
+    localY: number;
+    startZoom: number;
+    viewport: HTMLElement;
+  } | null>(null);
   const restoreResourceListScrollRef = useRef(false);
   const dependencyDescriptionId = useId();
 
@@ -625,6 +787,63 @@ export default function ProjectDevelopmentView({
       }),
     [manifestTaskById, projectedResources, resourceGraph],
   );
+  const resourceLayoutTopology = useMemo(() => {
+    const categoryByResourceId = new Map(
+      resources.map((resource) => [resource.id, resource.category]),
+    );
+    return {
+      referenceEdges: resourceGraph.referenceEdges.flatMap((edge) => {
+        const sourceCategory = categoryByResourceId.get(edge.sourceResourceId);
+        return sourceCategory !== undefined &&
+          sourceCategory === categoryByResourceId.get(edge.targetResourceId)
+          ? [
+              {
+                sourceResourceId: edge.sourceResourceId,
+                targetResourceId: edge.targetResourceId,
+              },
+            ]
+          : [];
+      }),
+      // normalizeProjectResourceGraph already removes task flows when the
+      // producer mapping was truncated. Split every remaining hyperedge by
+      // fixed resource category so a cross-category-only flow neither draws
+      // nor influences automatic placement.
+      taskFlows: resourceGraph.taskFlows.flatMap((flow) =>
+        categoryOrder.flatMap((category) => {
+          const sourceResourceIds = flow.sourceResourceIds.filter(
+            (resourceId) => categoryByResourceId.get(resourceId) === category,
+          );
+          const targetResourceIds = flow.targetResourceIds.filter(
+            (resourceId) => categoryByResourceId.get(resourceId) === category,
+          );
+          return sourceResourceIds.length > 0 && targetResourceIds.length > 0
+            ? [{ sourceResourceIds, targetResourceIds }]
+            : [];
+        }),
+      ),
+    };
+  }, [resourceGraph.referenceEdges, resourceGraph.taskFlows, resources]);
+  const resourceCardPreviews = useProjectResourceCardPreviews({
+    projectPath,
+    projectId: manifest.projectId,
+    mode: sortMode,
+    resources,
+    canvasRef: resourceCanvasRef,
+  });
+  const resourceSectionHeights = useProjectResourceSectionHeights({
+    projectId: manifest.projectId,
+    mode: sortMode,
+    canvasRef: resourceCanvasRef,
+    enabled: mode === 'resources' && focusedResourceId === null,
+  });
+  const {
+    failPreview: failResourceCardPreview,
+    protectPreview: protectResourceCardPreview,
+    requestPreview: requestResourceCardPreview,
+  } = resourceCardPreviews;
+  const { setSectionZoom: setResourceSectionZoom } = resourceSectionHeights;
+  const resourceSectionStateRef = useRef(resourceSectionHeights.sectionStates);
+  resourceSectionStateRef.current = resourceSectionHeights.sectionStates;
   const {
     layout: resourceLayout,
     notice: resourceLayoutNotice,
@@ -634,6 +853,7 @@ export default function ProjectDevelopmentView({
     projectId: manifest.projectId,
     mode: sortMode,
     resources,
+    topology: resourceLayoutTopology,
     initializationReady: resourceGraphInitializationReady,
     rederiveAutomaticPositions: sortMode === 'dependency' && resourceGraphReady,
   });
@@ -709,7 +929,9 @@ export default function ProjectDevelopmentView({
     const descriptions = new Set(
       resourceGraph.referenceEdges.flatMap((edge) =>
         visibleResourceIds.has(edge.sourceResourceId) &&
-        visibleResourceIds.has(edge.targetResourceId)
+        visibleResourceIds.has(edge.targetResourceId) &&
+        categoryByResourceId.get(edge.sourceResourceId) ===
+          categoryByResourceId.get(edge.targetResourceId)
           ? [
               `${labelByResourceId.get(edge.targetResourceId) ?? edge.targetResourceId} 引用 ${
                 labelByResourceId.get(edge.sourceResourceId) ??
@@ -719,31 +941,6 @@ export default function ProjectDevelopmentView({
           : [],
       ),
     );
-    for (const flow of resourceGraph.taskFlows) {
-      for (const category of categoryOrder) {
-        const sourceLabels = flow.sourceResourceIds
-          .filter(
-            (resourceId) =>
-              visibleResourceIds.has(resourceId) &&
-              categoryByResourceId.get(resourceId) === category,
-          )
-          .map((resourceId) => labelByResourceId.get(resourceId) ?? resourceId);
-        const targetLabels = flow.targetResourceIds
-          .filter(
-            (resourceId) =>
-              visibleResourceIds.has(resourceId) &&
-              categoryByResourceId.get(resourceId) === category,
-          )
-          .map((resourceId) => labelByResourceId.get(resourceId) ?? resourceId);
-        if (sourceLabels.length > 0 && targetLabels.length > 0) {
-          descriptions.add(
-            `任务 ${flow.sourceTaskId} 的资源 ${sourceLabels.join('、')} 流向任务 ${
-              flow.targetTaskId
-            } 的资源 ${targetLabels.join('、')}${flow.cyclic ? '，检测到依赖环' : ''}`,
-          );
-        }
-      }
-    }
     return Array.from(descriptions);
   }, [resourceGraph, resources, sortMode, visibleResourceIds]);
   const resourcePositionsByCategory = useMemo(
@@ -774,16 +971,71 @@ export default function ProjectDevelopmentView({
     resources.find((resource) => resource.id === selectedResourceId) ?? null;
   const focusedResource =
     resources.find((resource) => resource.id === focusedResourceId) ?? null;
-  const focusedResourcePath = focusedResource?.path ?? null;
-  const focusedResourceCategory = focusedResource?.category ?? null;
-  const focusedResourceContent = focusedResource?.content;
-  const focusedResourceMediaType = focusedResource?.mediaType ?? null;
-  const focusedResourceIsImage = Boolean(
-    focusedResource && isRasterImageResource(focusedResource),
-  );
-  const focusedResourceIsExtendedArtMedia = Boolean(
-    focusedResource && isExtendedArtMediaResource(focusedResource),
-  );
+  const focusedResourceDependencyDetails = useMemo(() => {
+    if (!focusedResource) {
+      return {
+        upstreamLabels: [] as string[],
+        downstreamLabels: [] as string[],
+        taskFlowLabels: [] as string[],
+        cyclic: false,
+      };
+    }
+    const resourceById = new Map(
+      resources.map((resource) => [resource.id, resource]),
+    );
+    const connection = resourceGraph.connectionIndex.get(focusedResource.id);
+    const sameCategoryLabels = (resourceIds: Iterable<string>) =>
+      Array.from(resourceIds)
+        .filter((resourceId) => resourceId !== focusedResource.id)
+        .flatMap((resourceId) => {
+          const resource = resourceById.get(resourceId);
+          return resource?.category === focusedResource.category
+            ? [resource.label]
+            : [];
+        })
+        .sort((left, right) => left.localeCompare(right, 'zh-CN'));
+    const taskFlowLabels = Array.from(connection?.taskFlowIds ?? [])
+      .flatMap((flowId) => {
+        const flow = resourceGraph.taskFlowById.get(flowId);
+        if (!flow) {
+          return [];
+        }
+        const hasSameCategorySource = flow.sourceResourceIds.some(
+          (resourceId) =>
+            resourceById.get(resourceId)?.category === focusedResource.category,
+        );
+        const hasSameCategoryTarget = flow.targetResourceIds.some(
+          (resourceId) =>
+            resourceById.get(resourceId)?.category === focusedResource.category,
+        );
+        return hasSameCategorySource && hasSameCategoryTarget
+          ? [
+              `${flow.sourceTaskId} → ${flow.targetTaskId}${
+                flow.cyclic ? '（依赖环）' : ''
+              }`,
+            ]
+          : [];
+      })
+      .sort();
+    return {
+      upstreamLabels: sameCategoryLabels(
+        connection?.upstreamReferenceResourceIds ?? [],
+      ),
+      downstreamLabels: sameCategoryLabels(
+        connection?.downstreamReferenceResourceIds ?? [],
+      ),
+      taskFlowLabels,
+      cyclic: resourceGraph.cyclicResourceIds.has(focusedResource.id),
+    };
+  }, [focusedResource, resourceGraph, resources]);
+  const focusedResourcePreviewIdentity = focusedResource
+    ? (resourceCardPreviews.identityByResourceId.get(focusedResource.id) ??
+      null)
+    : null;
+  const focusedResourceCardPreview = focusedResourcePreviewIdentity
+    ? (resourceCardPreviews.previews.get(focusedResourcePreviewIdentity) ??
+      resourceCardPreviews.idlePreview)
+    : resourceCardPreviews.idlePreview;
   const focusedResourceIsAudio = focusedResource?.category === 'audio';
   const hasRegisteredArtImageAssets = manifest.assets.some(
     (asset) =>
@@ -823,20 +1075,281 @@ export default function ProjectDevelopmentView({
   const FocusIcon = focusedResource
     ? categoryIcons[focusedResource.category]
     : FileText;
-  const focusedPreviewMediaType =
-    focusedResource &&
-    mediaPreview.status === 'loaded' &&
-    mediaPreview.resourceId === focusedResource.id
-      ? mediaPreview.preview.mediaType
-      : focusedResource &&
-          imagePreview.status === 'loaded' &&
-          imagePreview.resourceId === focusedResource.id
-        ? imagePreview.preview.mediaType
-        : focusedResource &&
-            textPreview.status === 'loaded' &&
-            textPreview.resourceId === focusedResource.id
-          ? textPreview.preview.mediaType
-          : focusedResource?.mediaType;
+  const focusedPreviewMediaType = focusedResource?.mediaType;
+
+  const resourceSectionScrollKey = useCallback(
+    (category: ResourceCategory, layoutMode = sortMode) =>
+      `${manifest.projectId}\n${layoutMode}\n${category}`,
+    [manifest.projectId, sortMode],
+  );
+  const resourceListScrollKey = `${manifest.projectId}\n${sortMode}`;
+
+  const captureResourceListScrollPosition = useCallback(() => {
+    const canvas = resourceCanvasRef.current;
+    if (!canvas) {
+      return;
+    }
+    resourceListScrollPositionsRef.current.set(resourceListScrollKey, {
+      left: canvas.scrollLeft,
+      top: canvas.scrollTop,
+    });
+  }, [resourceListScrollKey]);
+
+  const queueResourceSectionZoomScroll = useCallback(
+    (
+      category: ResourceCategory,
+      viewport: HTMLElement,
+      left: number,
+      top: number,
+    ) => {
+      const pending = resourceSectionZoomFramesRef.current.get(category);
+      if (pending) {
+        pending.left = left;
+        pending.top = top;
+        pending.viewport = viewport;
+        return;
+      }
+      const entry = {
+        frameId: 0,
+        left,
+        top,
+        viewport,
+      };
+      entry.frameId = window.requestAnimationFrame(() => {
+        const latest = resourceSectionZoomFramesRef.current.get(category);
+        resourceSectionZoomFramesRef.current.delete(category);
+        if (!latest || !latest.viewport.isConnected) {
+          return;
+        }
+        latest.viewport.scrollLeft = Math.max(0, latest.left);
+        latest.viewport.scrollTop = Math.max(0, latest.top);
+        resourceSectionScrollPositionsRef.current.set(
+          resourceSectionScrollKey(category),
+          {
+            left: latest.viewport.scrollLeft,
+            top: latest.viewport.scrollTop,
+          },
+        );
+      });
+      resourceSectionZoomFramesRef.current.set(category, entry);
+    },
+    [resourceSectionScrollKey],
+  );
+
+  const applyAnchoredResourceSectionZoom = useCallback(
+    (
+      category: ResourceCategory,
+      viewport: HTMLElement,
+      nextZoom: number,
+      clientX: number,
+      clientY: number,
+    ) => {
+      const currentZoom =
+        resourceSectionStateRef.current.get(category)?.zoom ?? 1;
+      const normalizedNextZoom = clampProjectResourceSectionZoom(nextZoom);
+      if (normalizedNextZoom === currentZoom) {
+        return;
+      }
+      const viewportRect = viewport.getBoundingClientRect();
+      const localX = Math.min(
+        viewportRect.width,
+        Math.max(0, clientX - viewportRect.left),
+      );
+      const localY = Math.min(
+        viewportRect.height,
+        Math.max(0, clientY - viewportRect.top),
+      );
+      const contentX = (viewport.scrollLeft + localX) / currentZoom;
+      const contentY = (viewport.scrollTop + localY) / currentZoom;
+      setResourceSectionZoom(category, normalizedNextZoom);
+      queueResourceSectionZoomScroll(
+        category,
+        viewport,
+        contentX * normalizedNextZoom - localX,
+        contentY * normalizedNextZoom - localY,
+      );
+    },
+    [queueResourceSectionZoomScroll, setResourceSectionZoom],
+  );
+
+  useEffect(() => {
+    if (mode !== 'resources' || focusedResourceId !== null) {
+      return undefined;
+    }
+    const canvas = resourceCanvasRef.current;
+    if (!canvas) {
+      return undefined;
+    }
+    const zoomFrames = resourceSectionZoomFramesRef.current;
+    const resolveViewport = (event: Event) => {
+      const target = event.target;
+      return target instanceof Element
+        ? target.closest<HTMLElement>('[data-resource-section-scroll]')
+        : null;
+    };
+    const wheel = (event: WheelEvent) => {
+      if (!event.ctrlKey && !event.metaKey) {
+        return;
+      }
+      const viewport = resolveViewport(event);
+      const category = viewport?.dataset.resourceSectionScroll as
+        | ResourceCategory
+        | undefined;
+      if (!viewport || !category) {
+        return;
+      }
+      event.preventDefault();
+      const currentZoom =
+        resourceSectionStateRef.current.get(category)?.zoom ?? 1;
+      applyAnchoredResourceSectionZoom(
+        category,
+        viewport,
+        projectResourceSectionZoomFromWheel(currentZoom, event.deltaY),
+        event.clientX,
+        event.clientY,
+      );
+    };
+    const gestureStart = (rawEvent: Event) => {
+      const event = rawEvent as WebKitGestureEvent;
+      const viewport = resolveViewport(event);
+      const category = viewport?.dataset.resourceSectionScroll as
+        | ResourceCategory
+        | undefined;
+      if (!viewport || !category) {
+        return;
+      }
+      event.preventDefault();
+      const zoom = resourceSectionStateRef.current.get(category)?.zoom ?? 1;
+      const viewportRect = viewport.getBoundingClientRect();
+      const clientX = Number.isFinite(event.clientX)
+        ? (event.clientX as number)
+        : viewportRect.left + viewportRect.width / 2;
+      const clientY = Number.isFinite(event.clientY)
+        ? (event.clientY as number)
+        : viewportRect.top + viewportRect.height / 2;
+      const localX = Math.min(
+        viewportRect.width,
+        Math.max(0, clientX - viewportRect.left),
+      );
+      const localY = Math.min(
+        viewportRect.height,
+        Math.max(0, clientY - viewportRect.top),
+      );
+      resourceSectionGestureRef.current = {
+        category,
+        contentX: (viewport.scrollLeft + localX) / zoom,
+        contentY: (viewport.scrollTop + localY) / zoom,
+        localX,
+        localY,
+        startZoom: zoom,
+        viewport,
+      };
+    };
+    const gestureChange = (rawEvent: Event) => {
+      const event = rawEvent as WebKitGestureEvent;
+      const gesture = resourceSectionGestureRef.current;
+      if (!gesture || !Number.isFinite(event.scale)) {
+        return;
+      }
+      event.preventDefault();
+      const nextZoom = clampProjectResourceSectionZoom(
+        gesture.startZoom * (event.scale as number),
+      );
+      setResourceSectionZoom(gesture.category, nextZoom);
+      queueResourceSectionZoomScroll(
+        gesture.category,
+        gesture.viewport,
+        gesture.contentX * nextZoom - gesture.localX,
+        gesture.contentY * nextZoom - gesture.localY,
+      );
+    };
+    const gestureEnd = (event: Event) => {
+      if (!resourceSectionGestureRef.current) {
+        return;
+      }
+      event.preventDefault();
+      resourceSectionGestureRef.current = null;
+    };
+    canvas.addEventListener('wheel', wheel, { passive: false });
+    canvas.addEventListener('gesturestart', gestureStart, { passive: false });
+    canvas.addEventListener('gesturechange', gestureChange, { passive: false });
+    canvas.addEventListener('gestureend', gestureEnd, { passive: false });
+    return () => {
+      canvas.removeEventListener('wheel', wheel);
+      canvas.removeEventListener('gesturestart', gestureStart);
+      canvas.removeEventListener('gesturechange', gestureChange);
+      canvas.removeEventListener('gestureend', gestureEnd);
+      resourceSectionGestureRef.current = null;
+      for (const pending of zoomFrames.values()) {
+        window.cancelAnimationFrame(pending.frameId);
+      }
+      zoomFrames.clear();
+    };
+  }, [
+    applyAnchoredResourceSectionZoom,
+    focusedResourceId,
+    mode,
+    queueResourceSectionZoomScroll,
+    setResourceSectionZoom,
+  ]);
+
+  const captureResourceSectionScrollPositions = useCallback(() => {
+    const canvas = resourceCanvasRef.current;
+    if (!canvas) {
+      return;
+    }
+    canvas
+      .querySelectorAll<HTMLElement>('[data-resource-section-scroll]')
+      .forEach((viewport) => {
+        const category = viewport.dataset.resourceSectionScroll as
+          | ResourceCategory
+          | undefined;
+        if (!category) {
+          return;
+        }
+        resourceSectionScrollPositionsRef.current.set(
+          resourceSectionScrollKey(category),
+          { left: viewport.scrollLeft, top: viewport.scrollTop },
+        );
+      });
+  }, [resourceSectionScrollKey]);
+
+  useLayoutEffect(() => {
+    if (mode !== 'resources' || focusedResourceId) {
+      return;
+    }
+    const canvas = resourceCanvasRef.current;
+    canvas
+      ?.querySelectorAll<HTMLElement>('[data-resource-section-scroll]')
+      .forEach((viewport) => {
+        const category = viewport.dataset.resourceSectionScroll as
+          | ResourceCategory
+          | undefined;
+        if (!category) {
+          return;
+        }
+        const position = resourceSectionScrollPositionsRef.current.get(
+          resourceSectionScrollKey(category),
+        );
+        viewport.scrollLeft = position?.left ?? 0;
+        viewport.scrollTop = position?.top ?? 0;
+      });
+  }, [focusedResourceId, mode, resourceSectionScrollKey, sortMode]);
+
+  useLayoutEffect(() => {
+    if (mode !== 'resources' || focusedResourceId) {
+      return;
+    }
+    const canvas = resourceCanvasRef.current;
+    if (!canvas) {
+      return;
+    }
+    const position = resourceListScrollPositionsRef.current.get(
+      resourceListScrollKey,
+    );
+    canvas.scrollLeft = position?.left ?? 0;
+    canvas.scrollTop = position?.top ?? 0;
+  }, [focusedResourceId, mode, resourceListScrollKey]);
 
   useEffect(() => {
     if (embeddedPreviewUrl) {
@@ -858,7 +1371,6 @@ export default function ProjectDevelopmentView({
     resourceFocusTriggerIdRef.current = null;
     setSelectedResourceId(null);
     setFocusedResourceId(null);
-    resourceListScrollRef.current = { left: 0, top: 0 };
     restoreResourceListScrollRef.current = false;
   }, [projectPath]);
 
@@ -877,191 +1389,49 @@ export default function ProjectDevelopmentView({
   }, [focusedResourceId]);
 
   useEffect(() => {
-    if (!focusedResourceId || !focusedResourcePath || !focusedResourceIsImage) {
-      setImagePreview({ status: 'idle', resourceId: null });
-      return undefined;
+    if (
+      !focusedResource ||
+      !focusedResourcePreviewIdentity ||
+      focusedResource.category === 'audio'
+    ) {
+      return;
     }
-    const invoke = window.__TAURI__?.core?.invoke;
-    if (!invoke) {
-      setImagePreview({
-        status: 'failed',
-        resourceId: focusedResourceId,
-        error: '图片预览需要在客户端内打开',
-      });
-      return undefined;
-    }
-
-    let cancelled = false;
-    setImagePreview((current) =>
-      current.resourceId === focusedResourceId
-        ? current
-        : { status: 'loading', resourceId: focusedResourceId },
+    requestResourceCardPreview(
+      focusedResource,
+      focusedResourcePreviewIdentity,
+      'detail',
     );
-    void invoke<LocalProjectImagePreview>('read_local_project_image_preview', {
-      projectPath,
-      relativePath: focusedResourcePath,
-    })
-      .then((preview) => {
-        if (!cancelled) {
-          setImagePreview({
-            status: 'loaded',
-            resourceId: focusedResourceId,
-            preview,
-          });
-        }
-      })
-      .catch((error: unknown) => {
-        if (!cancelled) {
-          setImagePreview({
-            status: 'failed',
-            resourceId: focusedResourceId,
-            error: imagePreviewErrorMessage(error),
-          });
-        }
-      });
-    return () => {
-      cancelled = true;
-    };
   }, [
-    focusedResourceId,
-    focusedResourceIsImage,
-    focusedResourcePath,
-    projectPath,
+    focusedResource,
+    focusedResourcePreviewIdentity,
+    requestResourceCardPreview,
   ]);
 
   useEffect(() => {
-    if (
-      !focusedResourceId ||
-      !focusedResourcePath ||
-      focusedResourceCategory !== 'document'
-    ) {
-      setTextPreview({ status: 'idle', resourceId: null });
-      return undefined;
-    }
-    if (focusedResourceContent !== undefined) {
-      setTextPreview({
-        status: 'loaded',
-        resourceId: focusedResourceId,
-        preview: {
-          path: focusedResourcePath,
-          mediaType: focusedResourceMediaType ?? 'text/plain',
-          byteLen: new TextEncoder().encode(focusedResourceContent).byteLength,
-          content: focusedResourceContent,
-        },
-      });
-      return undefined;
-    }
-    const invoke = window.__TAURI__?.core?.invoke;
-    if (!invoke) {
-      setTextPreview({
-        status: 'failed',
-        resourceId: focusedResourceId,
-        error: '文档预览需要在客户端内打开',
-      });
-      return undefined;
-    }
-
-    let cancelled = false;
-    setTextPreview((current) =>
-      current.resourceId === focusedResourceId
-        ? current
-        : { status: 'loading', resourceId: focusedResourceId },
-    );
-    void invoke<LocalProjectTextPreview>('read_local_project_text_preview', {
-      projectPath,
-      relativePath: focusedResourcePath,
-    })
-      .then((preview) => {
-        if (!cancelled) {
-          setTextPreview({
-            status: 'loaded',
-            resourceId: focusedResourceId,
-            preview,
-          });
-        }
-      })
-      .catch((error: unknown) => {
-        if (!cancelled) {
-          setTextPreview({
-            status: 'failed',
-            resourceId: focusedResourceId,
-            error: mediaPreviewErrorMessage(error),
-          });
-        }
-      });
-    return () => {
-      cancelled = true;
-    };
-  }, [
-    focusedResourceCategory,
-    focusedResourceContent,
-    focusedResourceId,
-    focusedResourceMediaType,
-    focusedResourcePath,
-    projectPath,
-  ]);
-
-  useEffect(() => {
-    if (
-      !focusedResourceId ||
-      !focusedResourcePath ||
-      !focusedResourceCategory ||
-      (!focusedResourceIsExtendedArtMedia && !focusedResourceIsAudio)
-    ) {
-      setMediaPreview({ status: 'idle', resourceId: null });
-      setMediaDuration(null);
-      return undefined;
-    }
-    const invoke = window.__TAURI__?.core?.invoke;
-    if (!invoke) {
-      setMediaPreview({
-        status: 'failed',
-        resourceId: focusedResourceId,
-        error: '媒体预览需要在客户端内打开',
-      });
-      return undefined;
-    }
-
-    let cancelled = false;
     setMediaDuration(null);
-    setMediaPreview((current) =>
-      current.resourceId === focusedResourceId
-        ? current
-        : { status: 'loading', resourceId: focusedResourceId },
-    );
-    void invoke<LocalProjectMediaPreview>('read_local_project_media_preview', {
-      projectPath,
-      relativePath: focusedResourcePath,
-      category: focusedResourceCategory,
-    })
-      .then((preview) => {
-        if (!cancelled) {
-          setMediaPreview({
-            status: 'loaded',
-            resourceId: focusedResourceId,
-            preview,
-          });
-        }
-      })
-      .catch((error: unknown) => {
-        if (!cancelled) {
-          setMediaPreview({
-            status: 'failed',
-            resourceId: focusedResourceId,
-            error: mediaPreviewErrorMessage(error),
-          });
-        }
-      });
-    return () => {
-      cancelled = true;
-    };
+    setFocusedAudioPlayIdentity(null);
+  }, [focusedResourcePreviewIdentity]);
+
+  useEffect(() => {
+    if (
+      !focusedResourcePreviewIdentity ||
+      focusedAudioPlayIdentity !== focusedResourcePreviewIdentity ||
+      focusedResourceCardPreview.status !== 'loaded' ||
+      !focusedResourceCardPreview.preview.sourceUrl
+    ) {
+      return;
+    }
+    const audio = focusedAudioRef.current;
+    if (!audio) {
+      return;
+    }
+    void audio.play().catch(() => {
+      setFocusedAudioPlayIdentity(null);
+    });
   }, [
-    focusedResourceCategory,
-    focusedResourceId,
-    focusedResourceIsAudio,
-    focusedResourceIsExtendedArtMedia,
-    focusedResourcePath,
-    projectPath,
+    focusedAudioPlayIdentity,
+    focusedResourceCardPreview,
+    focusedResourcePreviewIdentity,
   ]);
 
   useLayoutEffect(() => {
@@ -1094,8 +1464,11 @@ export default function ProjectDevelopmentView({
     }
     const canvas = resourceCanvasRef.current;
     if (canvas) {
-      canvas.scrollLeft = resourceListScrollRef.current.left;
-      canvas.scrollTop = resourceListScrollRef.current.top;
+      const position = resourceListScrollPositionsRef.current.get(
+        resourceListScrollKey,
+      );
+      canvas.scrollLeft = position?.left ?? 0;
+      canvas.scrollTop = position?.top ?? 0;
       const triggerResourceId = resourceFocusTriggerIdRef.current;
       const triggerCard = triggerResourceId
         ? Array.from(
@@ -1112,21 +1485,156 @@ export default function ProjectDevelopmentView({
     }
     resourceFocusTriggerIdRef.current = null;
     restoreResourceListScrollRef.current = false;
-  }, [focusedResource, focusedResourceId]);
+  }, [focusedResource, focusedResourceId, resourceListScrollKey]);
 
-  const handleResourceSelect = useCallback((resourceId: string) => {
-    const canvas = resourceCanvasRef.current;
-    if (canvas) {
-      resourceListScrollRef.current = {
-        left: canvas.scrollLeft,
-        top: canvas.scrollTop,
+  const stopActiveCardMedia = useCallback(() => {
+    const active = activeCardMediaRef.current;
+    activeCardMediaRef.current = null;
+    protectResourceCardPreview(null);
+    setActiveCardMediaIdentity(null);
+    active?.element?.pause();
+  }, [protectResourceCardPreview]);
+
+  const handleCardMediaReady = useCallback(
+    (identity: string, element: HTMLMediaElement) => {
+      const active = activeCardMediaRef.current;
+      if (!active || active.identity !== identity) {
+        return;
+      }
+      if (active.element && active.element !== element) {
+        active.element.pause();
+      }
+      active.element = element;
+      void element.play().catch(() => {
+        if (activeCardMediaRef.current?.identity === identity) {
+          stopActiveCardMedia();
+        }
+      });
+    },
+    [stopActiveCardMedia],
+  );
+
+  const handleCardMediaToggle = useCallback(
+    (
+      resource: ProjectResource,
+      identity: string,
+      element: HTMLMediaElement | null,
+    ) => {
+      const previous = activeCardMediaRef.current;
+      if (previous?.identity === identity) {
+        stopActiveCardMedia();
+        return;
+      }
+      activeCardMediaRef.current = {
+        resourceId: resource.id,
+        identity,
+        element: null,
       };
+      protectResourceCardPreview(identity);
+      setActiveCardMediaIdentity(identity);
+      previous?.element?.pause();
+      if (element) {
+        handleCardMediaReady(identity, element);
+      }
+    },
+    [handleCardMediaReady, protectResourceCardPreview, stopActiveCardMedia],
+  );
+
+  const handleCardMediaPlaybackChange = useCallback(
+    (
+      resourceId: string,
+      identity: string,
+      element: HTMLMediaElement,
+      playing: boolean,
+    ) => {
+      const active = activeCardMediaRef.current;
+      if (playing) {
+        if (active?.identity !== identity) {
+          active?.element?.pause();
+          activeCardMediaRef.current = { resourceId, identity, element };
+          protectResourceCardPreview(identity);
+          setActiveCardMediaIdentity(identity);
+        } else {
+          active.element = element;
+        }
+        return;
+      }
+      if (active?.identity === identity && active.element === element) {
+        activeCardMediaRef.current = null;
+        protectResourceCardPreview(null);
+        setActiveCardMediaIdentity(null);
+      }
+    },
+    [protectResourceCardPreview],
+  );
+
+  const handleCardPreviewDecodeError = useCallback(
+    (identity: string, error: string) => {
+      failResourceCardPreview(identity, error);
+      if (activeCardMediaRef.current?.identity === identity) {
+        stopActiveCardMedia();
+      }
+    },
+    [failResourceCardPreview, stopActiveCardMedia],
+  );
+
+  const mediaPlaybackScopeKey = `${projectPath}\n${manifest.projectId}\n${sortMode}\n${mode}`;
+  useEffect(
+    () => stopActiveCardMedia(),
+    [mediaPlaybackScopeKey, stopActiveCardMedia],
+  );
+
+  useEffect(() => {
+    const active = activeCardMediaRef.current;
+    if (
+      active &&
+      (!visibleResourceIds.has(active.resourceId) ||
+        resourceCardPreviews.identityByResourceId.get(active.resourceId) !==
+          active.identity)
+    ) {
+      stopActiveCardMedia();
     }
-    suppressResourceFocusRestoreRef.current = false;
-    resourceFocusTriggerIdRef.current = resourceId;
-    setSelectedResourceId(resourceId);
-    setFocusedResourceId(resourceId);
-  }, []);
+  }, [
+    resourceCardPreviews.identityByResourceId,
+    stopActiveCardMedia,
+    visibleResourceIds,
+  ]);
+
+  useEffect(() => {
+    const active = activeCardMediaRef.current;
+    if (
+      active &&
+      resourceCardPreviews.previews.get(active.identity)?.status === 'failed'
+    ) {
+      stopActiveCardMedia();
+    }
+  }, [resourceCardPreviews.previews, stopActiveCardMedia]);
+
+  const handleResourceSelect = useCallback(
+    (resourceId: string) => {
+      stopActiveCardMedia();
+      captureResourceSectionScrollPositions();
+      captureResourceListScrollPosition();
+      suppressResourceFocusRestoreRef.current = false;
+      resourceFocusTriggerIdRef.current = resourceId;
+      setSelectedResourceId(resourceId);
+      setFocusedResourceId(resourceId);
+    },
+    [
+      captureResourceListScrollPosition,
+      captureResourceSectionScrollPositions,
+      stopActiveCardMedia,
+    ],
+  );
+
+  function showResourceSortMode(nextMode: ResourceSortMode) {
+    if (nextMode === sortMode) {
+      return;
+    }
+    captureResourceListScrollPosition();
+    captureResourceSectionScrollPositions();
+    setSortMode(nextMode);
+  }
 
   function closeResourceFocus() {
     restoreResourceListScrollRef.current = true;
@@ -1140,6 +1648,9 @@ export default function ProjectDevelopmentView({
     suppressResourceFocusRestoreRef.current = true;
     restoreResourceListScrollRef.current = false;
     resourceFocusTriggerIdRef.current = null;
+    captureResourceListScrollPosition();
+    captureResourceSectionScrollPositions();
+    stopActiveCardMedia();
     setFocusedResourceId(null);
     setMode('run');
   }
@@ -1193,7 +1704,7 @@ export default function ProjectDevelopmentView({
                     type="button"
                     className={sortMode === 'dependency' ? 'is-active' : ''}
                     aria-pressed={sortMode === 'dependency'}
-                    onClick={() => setSortMode('dependency')}
+                    onClick={() => showResourceSortMode('dependency')}
                   >
                     <FolderTree size={15} aria-hidden="true" />
                     按依赖
@@ -1209,7 +1720,7 @@ export default function ProjectDevelopmentView({
                     type="button"
                     className={sortMode === 'type' ? 'is-active' : ''}
                     aria-pressed={sortMode === 'type'}
-                    onClick={() => setSortMode('type')}
+                    onClick={() => showResourceSortMode('type')}
                   >
                     <ListFilter size={15} aria-hidden="true" />
                     按类型
@@ -1259,129 +1770,6 @@ export default function ProjectDevelopmentView({
                 </button>
               </header>
               <div className="game-resource-focus-body">
-                {focusedResourceIsImage ? (
-                  <div
-                    className="game-resource-image-preview"
-                    aria-label={`${focusedResource.label} 图片预览`}
-                  >
-                    {imagePreview.status === 'loaded' &&
-                    imagePreview.resourceId === focusedResource.id ? (
-                      <img
-                        src={imagePreview.preview.dataUrl}
-                        alt={`${focusedResource.label} 图片预览`}
-                        onError={() =>
-                          setImagePreview({
-                            status: 'failed',
-                            resourceId: focusedResource.id,
-                            error: '图片内容无法解码，请重新生成或替换该资源',
-                          })
-                        }
-                      />
-                    ) : imagePreview.status === 'failed' &&
-                      imagePreview.resourceId === focusedResource.id ? (
-                      <p role="alert">{imagePreview.error}</p>
-                    ) : (
-                      <p role="status">正在载入图片…</p>
-                    )}
-                  </div>
-                ) : null}
-                {focusedResourceIsExtendedArtMedia ? (
-                  <div
-                    className="game-resource-media-preview"
-                    aria-label={`${focusedResource.label} 美术媒体预览`}
-                  >
-                    {mediaPreview.status === 'loaded' &&
-                    mediaPreview.resourceId === focusedResource.id ? (
-                      mediaPreview.preview.mediaType.startsWith('video/') ? (
-                        <video
-                          src={mediaPreview.preview.dataUrl}
-                          controls
-                          tabIndex={0}
-                          preload="metadata"
-                          aria-label={`${focusedResource.label} 视频预览`}
-                          onError={() =>
-                            setMediaPreview({
-                              status: 'failed',
-                              resourceId: focusedResource.id,
-                              error: '视频内容无法解码，请重新生成或替换该资源',
-                            })
-                          }
-                        />
-                      ) : (
-                        <img
-                          src={mediaPreview.preview.dataUrl}
-                          alt={`${focusedResource.label} 美术媒体预览`}
-                          onError={() =>
-                            setMediaPreview({
-                              status: 'failed',
-                              resourceId: focusedResource.id,
-                              error: '美术资源无法解码，请重新生成或替换该资源',
-                            })
-                          }
-                        />
-                      )
-                    ) : mediaPreview.status === 'failed' &&
-                      mediaPreview.resourceId === focusedResource.id ? (
-                      <p role="alert">{mediaPreview.error}</p>
-                    ) : (
-                      <p role="status">正在载入美术资源…</p>
-                    )}
-                  </div>
-                ) : null}
-                {focusedResourceIsAudio ? (
-                  <div
-                    className="game-resource-audio-preview"
-                    aria-label={`${focusedResource.label} 音频预览`}
-                  >
-                    {mediaPreview.status === 'loaded' &&
-                    mediaPreview.resourceId === focusedResource.id ? (
-                      <audio
-                        src={mediaPreview.preview.dataUrl}
-                        controls
-                        tabIndex={0}
-                        preload="metadata"
-                        aria-label={`${focusedResource.label} 音频播放器`}
-                        onLoadedMetadata={(event) =>
-                          setMediaDuration(event.currentTarget.duration)
-                        }
-                        onDurationChange={(event) =>
-                          setMediaDuration(event.currentTarget.duration)
-                        }
-                        onError={() =>
-                          setMediaPreview({
-                            status: 'failed',
-                            resourceId: focusedResource.id,
-                            error: '音频内容无法解码，请重新生成或替换该资源',
-                          })
-                        }
-                      />
-                    ) : mediaPreview.status === 'failed' &&
-                      mediaPreview.resourceId === focusedResource.id ? (
-                      <p role="alert">{mediaPreview.error}</p>
-                    ) : (
-                      <p role="status">正在载入音频…</p>
-                    )}
-                  </div>
-                ) : null}
-                {focusedResource.category === 'document' ? (
-                  <div className="game-resource-document-body">
-                    {textPreview.status === 'loaded' &&
-                    textPreview.resourceId === focusedResource.id ? (
-                      textPreview.preview.content.trim() ? (
-                        <SafeProjectMarkdown
-                          content={textPreview.preview.content}
-                        />
-                      ) : (
-                        <p role="status">文档为空</p>
-                      )
-                    ) : textPreview.status === 'failed' &&
-                      textPreview.resourceId === focusedResource.id ? (
-                      <p role="alert">{textPreview.error}</p>
-                    ) : (
-                      <p role="status">正在载入文档…</p>
-                    )}
-                  </div>
-                ) : null}
                 <dl className="game-resource-focus-metadata">
                   <div>
                     <dt>资源路径</dt>
@@ -1401,6 +1789,51 @@ export default function ProjectDevelopmentView({
                       <dd>{focusedResource.taskTitle}</dd>
                     </div>
                   ) : null}
+                  <div>
+                    <dt>依赖层级</dt>
+                    <dd>{focusedResource.dependencyDepth}</dd>
+                  </div>
+                  <div>
+                    <dt>依赖状态</dt>
+                    <dd>
+                      {focusedResourceDependencyDetails.cyclic
+                        ? '同类型依赖环'
+                        : '正常'}
+                    </dd>
+                  </div>
+                  <div>
+                    <dt>引用上游</dt>
+                    <dd>
+                      {focusedResourceDependencyDetails.upstreamLabels.length >
+                      0
+                        ? focusedResourceDependencyDetails.upstreamLabels.join(
+                            '、',
+                          )
+                        : '暂无同类型引用'}
+                    </dd>
+                  </div>
+                  <div>
+                    <dt>引用下游</dt>
+                    <dd>
+                      {focusedResourceDependencyDetails.downstreamLabels
+                        .length > 0
+                        ? focusedResourceDependencyDetails.downstreamLabels.join(
+                            '、',
+                          )
+                        : '暂无同类型引用'}
+                    </dd>
+                  </div>
+                  <div>
+                    <dt>任务流</dt>
+                    <dd>
+                      {focusedResourceDependencyDetails.taskFlowLabels.length >
+                      0
+                        ? focusedResourceDependencyDetails.taskFlowLabels.join(
+                            '；',
+                          )
+                        : '暂无同类型任务流'}
+                    </dd>
+                  </div>
                   {focusedResourceIsAudio ? (
                     <div>
                       <dt>音频时长</dt>
@@ -1468,6 +1901,82 @@ export default function ProjectDevelopmentView({
                     </>
                   ) : null}
                 </dl>
+                {focusedResourceIsAudio ? (
+                  <div
+                    className="game-resource-audio-preview"
+                    aria-label={`${focusedResource.label} 音频预览`}
+                  >
+                    {focusedResourceCardPreview.status === 'loaded' &&
+                    focusedResourceCardPreview.preview.sourceUrl ? (
+                      <audio
+                        ref={focusedAudioRef}
+                        src={focusedResourceCardPreview.preview.sourceUrl}
+                        controls
+                        tabIndex={0}
+                        preload="metadata"
+                        aria-label={`${focusedResource.label} 音频播放器`}
+                        onLoadedMetadata={(event) =>
+                          setMediaDuration(event.currentTarget.duration)
+                        }
+                        onDurationChange={(event) =>
+                          setMediaDuration(event.currentTarget.duration)
+                        }
+                        onError={() => {
+                          if (focusedResourcePreviewIdentity) {
+                            resourceCardPreviews.failPreview(
+                              focusedResourcePreviewIdentity,
+                              '音频内容无法解码，请重新生成或替换该资源',
+                            );
+                          }
+                        }}
+                      />
+                    ) : focusedResourceCardPreview.status === 'failed' ? (
+                      <p role="alert">{focusedResourceCardPreview.error}</p>
+                    ) : focusedResourceCardPreview.status === 'loading' ? (
+                      <p role="status">正在载入音频…</p>
+                    ) : (
+                      <button
+                        type="button"
+                        className="game-resource-audio-load"
+                        aria-label={`播放 ${focusedResource.label}`}
+                        onClick={() => {
+                          if (!focusedResourcePreviewIdentity) {
+                            return;
+                          }
+                          setFocusedAudioPlayIdentity(
+                            focusedResourcePreviewIdentity,
+                          );
+                          resourceCardPreviews.requestPreview(
+                            focusedResource,
+                            focusedResourcePreviewIdentity,
+                            'play',
+                          );
+                        }}
+                      >
+                        <Play size={18} aria-hidden="true" />
+                        播放音频
+                      </button>
+                    )}
+                  </div>
+                ) : null}
+                {focusedResource.category === 'document' ? (
+                  <div className="game-resource-document-body">
+                    {focusedResourceCardPreview.status === 'loaded' &&
+                    focusedResourceCardPreview.preview.content !== undefined ? (
+                      focusedResourceCardPreview.preview.content.trim() ? (
+                        <SafeProjectMarkdown
+                          content={focusedResourceCardPreview.preview.content}
+                        />
+                      ) : (
+                        <p role="status">文档为空</p>
+                      )
+                    ) : focusedResourceCardPreview.status === 'failed' ? (
+                      <p role="alert">{focusedResourceCardPreview.error}</p>
+                    ) : (
+                      <p role="status">正在载入文档…</p>
+                    )}
+                  </div>
+                ) : null}
               </div>
             </section>
           ) : mode === 'resources' ? (
@@ -1514,6 +2023,15 @@ export default function ProjectDevelopmentView({
                     : undefined
                 }
                 aria-busy={resourceLayoutSaving}
+                onScroll={(event) => {
+                  resourceListScrollPositionsRef.current.set(
+                    resourceListScrollKey,
+                    {
+                      left: event.currentTarget.scrollLeft,
+                      top: event.currentTarget.scrollTop,
+                    },
+                  );
+                }}
               >
                 {sortMode === 'dependency' &&
                 dependencyRelationshipDescriptions.length > 0 ? (
@@ -1530,83 +2048,273 @@ export default function ProjectDevelopmentView({
                   </div>
                 ) : null}
                 <div className="game-resource-canvas-content">
-                  {sortMode === 'dependency' ? (
-                    <ResourceDependencyOverlay
-                      key={`${projectPath}:${manifest.projectId}`}
-                      graph={resourceGraph}
-                      positions={resourceLayout.positions}
-                      visibleResourceIds={visibleResourceIds}
-                    />
-                  ) : null}
-                  {categoryOrder.map((category) => {
-                    const categoryResources =
-                      visibleResourcesByCategory.get(category) ?? [];
-                    const baseExtent = resourceBaseExtentByCategory.get(
-                      category,
-                    ) ?? { width: 0, height: 0 };
-                    const extent = {
-                      width:
-                        baseExtent.width +
-                        (sortMode === 'dependency'
-                          ? RESOURCE_DEPENDENCY_VISUAL_GUTTER
-                          : 0),
-                      height: baseExtent.height,
-                    };
-                    const Icon = categoryIcons[category];
-                    return (
-                      <section
-                        className="game-resource-section"
-                        aria-label={categoryLabels[category]}
-                        key={category}
-                      >
-                        <header>
-                          <span>
-                            <Icon size={16} aria-hidden="true" />
-                            {categoryLabels[category]}
-                          </span>
-                          <small>{categoryResources.length}</small>
-                        </header>
-                        {categoryResources.length > 0 ? (
+                  <div
+                    className="game-resource-section-stack"
+                    data-testid={
+                      sortMode === 'dependency'
+                        ? 'resource-dependency-overlay'
+                        : undefined
+                    }
+                  >
+                    {categoryOrder.map((category) => {
+                      const categoryResources =
+                        visibleResourcesByCategory.get(category) ?? [];
+                      const baseExtent = resourceBaseExtentByCategory.get(
+                        category,
+                      ) ?? { width: 0, height: 0 };
+                      const extent = {
+                        width:
+                          baseExtent.width +
+                          (sortMode === 'dependency'
+                            ? RESOURCE_DEPENDENCY_VISUAL_GUTTER
+                            : 0),
+                        height: baseExtent.height,
+                      };
+                      const Icon = categoryIcons[category];
+                      const sectionHeight =
+                        resourceSectionHeights.sectionStates.get(category);
+                      if (!sectionHeight) {
+                        return null;
+                      }
+                      return (
+                        <section
+                          className="game-resource-section"
+                          aria-label={categoryLabels[category]}
+                          key={category}
+                          style={
+                            {
+                              '--resource-section-height': `${sectionHeight.height}px`,
+                              '--resource-section-zoom': sectionHeight.zoom,
+                            } as CSSProperties
+                          }
+                        >
+                          <header>
+                            <span>
+                              <Icon size={16} aria-hidden="true" />
+                              {categoryLabels[category]}
+                            </span>
+                            <div className="game-resource-section-actions">
+                              <small
+                                aria-label={`${categoryLabels[category]}资源数量`}
+                              >
+                                {categoryResources.length} 项
+                              </small>
+                              <div
+                                className="game-resource-section-height-actions"
+                                role="group"
+                                aria-label={`${categoryLabels[category]}分区高度`}
+                              >
+                                <button
+                                  type="button"
+                                  aria-label={`缩小${categoryLabels[category]}分区`}
+                                  title={`缩小${categoryLabels[category]}分区高度`}
+                                  disabled={sectionHeight.atMin}
+                                  onClick={() =>
+                                    resourceSectionHeights.updateSectionHeight(
+                                      category,
+                                      'decrease',
+                                    )
+                                  }
+                                >
+                                  <Minus size={14} aria-hidden="true" />
+                                </button>
+                                <button
+                                  type="button"
+                                  aria-label={`恢复${categoryLabels[category]}分区默认尺寸`}
+                                  title={`恢复${categoryLabels[category]}分区默认高度`}
+                                  disabled={sectionHeight.atDefault}
+                                  onClick={() =>
+                                    resourceSectionHeights.updateSectionHeight(
+                                      category,
+                                      'reset',
+                                    )
+                                  }
+                                >
+                                  <RotateCcw size={13} aria-hidden="true" />
+                                </button>
+                                <button
+                                  type="button"
+                                  aria-label={`放大${categoryLabels[category]}分区`}
+                                  title={`增加${categoryLabels[category]}分区高度`}
+                                  disabled={sectionHeight.atMax}
+                                  onClick={() =>
+                                    resourceSectionHeights.updateSectionHeight(
+                                      category,
+                                      'increase',
+                                    )
+                                  }
+                                >
+                                  <Plus size={14} aria-hidden="true" />
+                                </button>
+                              </div>
+                              <div
+                                className="game-resource-section-zoom-actions"
+                                role="group"
+                                aria-label={`${categoryLabels[category]}内容缩放`}
+                              >
+                                <button
+                                  type="button"
+                                  aria-label={`缩小${categoryLabels[category]}内容`}
+                                  title={`缩小${categoryLabels[category]}内容`}
+                                  disabled={sectionHeight.atMinZoom}
+                                  onClick={() =>
+                                    resourceSectionHeights.updateSectionZoom(
+                                      category,
+                                      'decrease',
+                                    )
+                                  }
+                                >
+                                  <ZoomOut size={14} aria-hidden="true" />
+                                </button>
+                                <button
+                                  type="button"
+                                  className="game-resource-section-zoom-value"
+                                  aria-label={`恢复${categoryLabels[category]}内容默认缩放，当前${Math.round(
+                                    sectionHeight.zoom * 100,
+                                  )}%`}
+                                  title={`恢复${categoryLabels[category]}内容为 100%`}
+                                  disabled={sectionHeight.atDefaultZoom}
+                                  onClick={() =>
+                                    resourceSectionHeights.updateSectionZoom(
+                                      category,
+                                      'reset',
+                                    )
+                                  }
+                                >
+                                  {Math.round(sectionHeight.zoom * 100)}%
+                                </button>
+                                <button
+                                  type="button"
+                                  aria-label={`放大${categoryLabels[category]}内容`}
+                                  title={`放大${categoryLabels[category]}内容`}
+                                  disabled={sectionHeight.atMaxZoom}
+                                  onClick={() =>
+                                    resourceSectionHeights.updateSectionZoom(
+                                      category,
+                                      'increase',
+                                    )
+                                  }
+                                >
+                                  <ZoomIn size={14} aria-hidden="true" />
+                                </button>
+                              </div>
+                            </div>
+                          </header>
                           <div
-                            className="game-resource-plane"
-                            data-resource-section-plane={category}
-                            style={{
-                              width: `${extent.width}px`,
-                              height: `${extent.height}px`,
+                            className="game-resource-section-viewport"
+                            data-resource-section-scroll={category}
+                            aria-label={`${categoryLabels[category]}分区内容`}
+                            tabIndex={0}
+                            onScroll={(event) => {
+                              resourceSectionScrollPositionsRef.current.set(
+                                resourceSectionScrollKey(category),
+                                {
+                                  left: event.currentTarget.scrollLeft,
+                                  top: event.currentTarget.scrollTop,
+                                },
+                              );
                             }}
                           >
-                            {categoryResources.map((resource) => {
-                              const position = resourcePositionById.get(
-                                resource.id,
-                              );
-                              if (!position) {
-                                return null;
-                              }
-                              const relationState =
-                                selectedVersionBindingResourceIds.has(
-                                  resource.id,
-                                )
-                                  ? 'version-binding'
-                                  : null;
-                              return (
-                                <ResourceCard
-                                  key={resource.id}
-                                  resource={resource}
-                                  selected={resource.id === selectedResourceId}
-                                  relationState={relationState}
-                                  x={position.x}
-                                  y={position.y}
-                                  onSelect={handleResourceSelect}
-                                />
-                              );
-                            })}
+                            {categoryResources.length > 0 ? (
+                              <div
+                                className="game-resource-plane-frame"
+                                style={{
+                                  width: `${Math.ceil(
+                                    extent.width * sectionHeight.zoom,
+                                  )}px`,
+                                  height: `${Math.ceil(
+                                    extent.height * sectionHeight.zoom,
+                                  )}px`,
+                                }}
+                              >
+                                <div
+                                  className="game-resource-plane"
+                                  data-resource-section-plane={category}
+                                  data-resource-section-scale={
+                                    sectionHeight.zoom
+                                  }
+                                  style={{
+                                    width: `${extent.width}px`,
+                                    height: `${extent.height}px`,
+                                  }}
+                                >
+                                  {sortMode === 'dependency' ? (
+                                    <ResourceDependencyOverlay
+                                      key={`${projectPath}:${manifest.projectId}:${category}`}
+                                      graph={resourceGraph}
+                                      positions={resourceLayout.positions}
+                                      section={category}
+                                      visibleResourceIds={visibleResourceIds}
+                                      geometryRevision={`${sectionHeight.height}@${sectionHeight.zoom}`}
+                                    />
+                                  ) : null}
+                                  {categoryResources.map((resource) => {
+                                    const position = resourcePositionById.get(
+                                      resource.id,
+                                    );
+                                    if (!position) {
+                                      return null;
+                                    }
+                                    const relationState =
+                                      selectedVersionBindingResourceIds.has(
+                                        resource.id,
+                                      )
+                                        ? 'version-binding'
+                                        : null;
+                                    const previewIdentity =
+                                      resourceCardPreviews.identityByResourceId.get(
+                                        resource.id,
+                                      );
+                                    if (!previewIdentity) {
+                                      return null;
+                                    }
+                                    return (
+                                      <ResourceCard
+                                        key={resource.id}
+                                        resource={resource}
+                                        selected={
+                                          resource.id === selectedResourceId
+                                        }
+                                        relationState={relationState}
+                                        x={position.x}
+                                        y={position.y}
+                                        previewIdentity={previewIdentity}
+                                        preview={
+                                          resourceCardPreviews.previews.get(
+                                            previewIdentity,
+                                          ) ?? resourceCardPreviews.idlePreview
+                                        }
+                                        activeMediaIdentity={
+                                          activeCardMediaIdentity
+                                        }
+                                        onSelect={handleResourceSelect}
+                                        onObservePreview={
+                                          resourceCardPreviews.observePreview
+                                        }
+                                        onRequestPreview={
+                                          resourceCardPreviews.requestPreview
+                                        }
+                                        onPreviewDecodeError={
+                                          handleCardPreviewDecodeError
+                                        }
+                                        onMediaToggle={handleCardMediaToggle}
+                                        onMediaReady={handleCardMediaReady}
+                                        onMediaPlaybackChange={
+                                          handleCardMediaPlaybackChange
+                                        }
+                                      />
+                                    );
+                                  })}
+                                </div>
+                              </div>
+                            ) : (
+                              <p>暂无已登记资源</p>
+                            )}
                           </div>
-                        ) : (
-                          <p>暂无已登记资源</p>
-                        )}
-                      </section>
-                    );
-                  })}
+                        </section>
+                      );
+                    })}
+                  </div>
                 </div>
               </div>
             </div>
diff --git a/apps/ai-game-creator-shell/src/view/project-development/resourceCanvasLayoutModel.ts b/apps/ai-game-creator-shell/src/view/project-development/resourceCanvasLayoutModel.ts
index d488c68f9..9ec3d756e 100644
--- a/apps/ai-game-creator-shell/src/view/project-development/resourceCanvasLayoutModel.ts
+++ b/apps/ai-game-creator-shell/src/view/project-development/resourceCanvasLayoutModel.ts
@@ -1,4 +1,5 @@
 import {
+  GAME_CREATION_RESOURCE_LAYOUT_MAX_COORDINATE,
   GAME_CREATION_RESOURCE_LAYOUT_SCHEMA_VERSION,
   type ProjectResourceCanvasLayout,
   type ProjectResourceCanvasLayoutMode,
@@ -7,13 +8,16 @@ import {
 } from '../../../../../packages/shared/src/contracts/gameCreationApp';
 
 export const RESOURCE_CANVAS_CARD_WIDTH = 180;
-export const RESOURCE_CANVAS_CARD_HEIGHT = 92;
+export const RESOURCE_CANVAS_CARD_HEIGHT = 128;
 export const RESOURCE_CANVAS_COLUMN_GAP = 16;
 export const RESOURCE_CANVAS_ROW_GAP = 16;
+export const RESOURCE_CANVAS_DEPENDENCY_COLUMN_GAP = 48;
+export const RESOURCE_CANVAS_DEPENDENCY_ROW_GAP = 40;
 export const RESOURCE_CANVAS_DRAG_THRESHOLD = 5;
 export const RESOURCE_CANVAS_TYPE_COLUMNS = 3;
 export const RESOURCE_CANVAS_SECTION_MIN_WIDTH = 620;
 export const RESOURCE_CANVAS_SECTION_MIN_HEIGHT = 108;
+export const RESOURCE_CANVAS_CLUSTER_GAP = 48;
 
 const sectionOrder: ProjectResourceCanvasSection[] = [
   'document',
@@ -31,6 +35,22 @@ export type ResourceCanvasItem = {
   dependencyDepth: number;
 };
 
+/**
+ * This is deliberately a display-only projection of the Rust resource graph.
+ * It never becomes a second dependency source: `dependencyDepth` remains on
+ * ResourceCanvasItem and is still the sole authority for the horizontal layer.
+ */
+export type ResourceCanvasLayoutTopology = {
+  referenceEdges: readonly {
+    sourceResourceId: string;
+    targetResourceId: string;
+  }[];
+  taskFlows: readonly {
+    sourceResourceIds: readonly string[];
+    targetResourceIds: readonly string[];
+  }[];
+};
+
 export type ReconciledResourceCanvasLayout = {
   layout: ProjectResourceCanvasLayout;
   changed: boolean;
@@ -74,6 +94,14 @@ const RESOURCE_CANVAS_SLOT_WIDTH =
   RESOURCE_CANVAS_CARD_WIDTH + RESOURCE_CANVAS_COLUMN_GAP;
 const RESOURCE_CANVAS_SLOT_HEIGHT =
   RESOURCE_CANVAS_CARD_HEIGHT + RESOURCE_CANVAS_ROW_GAP;
+const RESOURCE_CANVAS_DEPENDENCY_SLOT_WIDTH =
+  RESOURCE_CANVAS_CARD_WIDTH + RESOURCE_CANVAS_DEPENDENCY_COLUMN_GAP;
+const RESOURCE_CANVAS_DEPENDENCY_SLOT_HEIGHT =
+  RESOURCE_CANVAS_CARD_HEIGHT + RESOURCE_CANVAS_DEPENDENCY_ROW_GAP;
+const RESOURCE_CANVAS_MAX_DEPENDENCY_COLUMN = Math.floor(
+  GAME_CREATION_RESOURCE_LAYOUT_MAX_COORDINATE /
+    RESOURCE_CANVAS_DEPENDENCY_SLOT_WIDTH,
+);
 
 function positionsOverlap(
   leftX: number,
@@ -143,22 +171,6 @@ class ResourceCanvasOccupancyIndex {
   }
 }
 
-function defaultDependencyPosition(
-  resource: ResourceCanvasItem,
-  occupancy: ResourceCanvasOccupancyIndex,
-  nextYByColumn: Map<number, number>,
-) {
-  const x =
-    Math.max(0, Math.round(resource.dependencyDepth)) *
-    RESOURCE_CANVAS_SLOT_WIDTH;
-  let y = nextYByColumn.get(x) ?? 0;
-  while (occupancy.overlaps(x, y)) {
-    y += RESOURCE_CANVAS_SLOT_HEIGHT;
-  }
-  nextYByColumn.set(x, y + RESOURCE_CANVAS_SLOT_HEIGHT);
-  return { x, y };
-}
-
 function defaultTypePosition(
   occupancy: ResourceCanvasOccupancyIndex,
   nextSlot: number,
@@ -200,9 +212,632 @@ function compareResources(
   );
 }
 
+type DependencyFlow = {
+  sourceResourceIds: string[];
+  targetResourceIds: string[];
+};
+
+type DependencyComponent = {
+  resourceIds: string[];
+  minimumDepth: number;
+  minimumResourceId: string;
+  related: boolean;
+};
+
+type DependencyCycle = {
+  resourceIds: string[];
+  minimumResourceId: string;
+};
+
+type DependencyCluster = {
+  resourceIds: string[];
+  minimumDepth: number;
+  minimumResourceId: string;
+  related: boolean;
+  baseY: number;
+  rowCount: number;
+};
+
+const DEPENDENCY_ORDERING_SCAN_ROUNDS = 2;
+
+function uniqueSortedResourceIds(values: Iterable<string>) {
+  return Array.from(new Set(values)).sort(compareStableIdentifier);
+}
+
+function median(values: readonly number[]) {
+  if (values.length === 0) {
+    return null;
+  }
+  const sorted = [...values].sort((left, right) => left - right);
+  const middle = Math.floor(sorted.length / 2);
+  return sorted.length % 2 === 1
+    ? sorted[middle]!
+    : (sorted[middle - 1]! + sorted[middle]!) / 2;
+}
+
+function addUndirectedNeighbor(
+  neighborsByNodeId: Map<string, Set<string>>,
+  left: string,
+  right: string,
+) {
+  let leftNeighbors = neighborsByNodeId.get(left);
+  if (!leftNeighbors) {
+    leftNeighbors = new Set();
+    neighborsByNodeId.set(left, leftNeighbors);
+  }
+  leftNeighbors.add(right);
+  let rightNeighbors = neighborsByNodeId.get(right);
+  if (!rightNeighbors) {
+    rightNeighbors = new Set();
+    neighborsByNodeId.set(right, rightNeighbors);
+  }
+  rightNeighbors.add(left);
+}
+
+/**
+ * Iterative Kosaraju traversal. The Rust depth is still authoritative; SCCs
+ * here are only a visual contiguity hint for same-depth automatic cards.
+ */
+function dependencyCycles(
+  resourceIds: readonly string[],
+  downstreamIdsByResourceId: ReadonlyMap<string, ReadonlySet<string>>,
+  upstreamIdsByResourceId: ReadonlyMap<string, ReadonlySet<string>>,
+) {
+  const orderedResourceIds = uniqueSortedResourceIds(resourceIds);
+  const visited = new Set<string>();
+  const finishOrder: string[] = [];
+  for (const startResourceId of orderedResourceIds) {
+    if (visited.has(startResourceId)) {
+      continue;
+    }
+    const pending: Array<{ resourceId: string; expanded: boolean }> = [
+      { resourceId: startResourceId, expanded: false },
+    ];
+    while (pending.length > 0) {
+      const current = pending.pop()!;
+      if (current.expanded) {
+        finishOrder.push(current.resourceId);
+        continue;
+      }
+      if (visited.has(current.resourceId)) {
+        continue;
+      }
+      visited.add(current.resourceId);
+      pending.push({ resourceId: current.resourceId, expanded: true });
+      const neighbors = downstreamIdsByResourceId.get(current.resourceId) ?? [];
+      for (const neighbor of neighbors) {
+        if (!visited.has(neighbor)) {
+          pending.push({ resourceId: neighbor, expanded: false });
+        }
+      }
+    }
+  }
+
+  const componentByResourceId = new Map<string, true>();
+  const cycles: DependencyCycle[] = [];
+  for (let index = finishOrder.length - 1; index >= 0; index -= 1) {
+    const startResourceId = finishOrder[index]!;
+    if (componentByResourceId.has(startResourceId)) {
+      continue;
+    }
+    const componentResourceIds: string[] = [];
+    const pending = [startResourceId];
+    while (pending.length > 0) {
+      const resourceId = pending.pop()!;
+      if (componentByResourceId.has(resourceId)) {
+        continue;
+      }
+      componentByResourceId.set(resourceId, true);
+      componentResourceIds.push(resourceId);
+      for (const neighbor of upstreamIdsByResourceId.get(resourceId) ?? []) {
+        if (!componentByResourceId.has(neighbor)) {
+          pending.push(neighbor);
+        }
+      }
+    }
+    const sortedResourceIds = uniqueSortedResourceIds(componentResourceIds);
+    const selfReferential =
+      sortedResourceIds.length === 1 &&
+      Boolean(
+        downstreamIdsByResourceId
+          .get(sortedResourceIds[0]!)
+          ?.has(sortedResourceIds[0]!),
+      );
+    if (sortedResourceIds.length > 1 || selfReferential) {
+      cycles.push({
+        resourceIds: sortedResourceIds,
+        minimumResourceId: sortedResourceIds[0] ?? '',
+      });
+    }
+  }
+  return cycles;
+}
+
+function dependencyClusters(
+  sectionResources: readonly ResourceCanvasItem[],
+  topology: ResourceCanvasLayoutTopology | undefined,
+) {
+  const resourceById = new Map(
+    sectionResources.map((resource) => [resource.id, resource]),
+  );
+  const neighborsByNodeId = new Map<string, Set<string>>(
+    sectionResources.map((resource) => [resource.id, new Set<string>()]),
+  );
+  const upstreamReferenceIdsByResourceId = new Map<string, Set<string>>(
+    sectionResources.map((resource) => [resource.id, new Set<string>()]),
+  );
+  const downstreamReferenceIdsByResourceId = new Map<string, Set<string>>(
+    sectionResources.map((resource) => [resource.id, new Set<string>()]),
+  );
+  const incomingFlowsByResourceId = new Map<string, DependencyFlow[]>(
+    sectionResources.map((resource) => [resource.id, []]),
+  );
+  const outgoingFlowsByResourceId = new Map<string, DependencyFlow[]>(
+    sectionResources.map((resource) => [resource.id, []]),
+  );
+  const relatedResourceIds = new Set<string>();
+  const flows: DependencyFlow[] = [];
+
+  for (const edge of topology?.referenceEdges ?? []) {
+    const source = resourceById.get(edge.sourceResourceId);
+    const target = resourceById.get(edge.targetResourceId);
+    if (source && target) {
+      addUndirectedNeighbor(neighborsByNodeId, source.id, target.id);
+      upstreamReferenceIdsByResourceId.get(target.id)?.add(source.id);
+      downstreamReferenceIdsByResourceId.get(source.id)?.add(target.id);
+      relatedResourceIds.add(source.id);
+      relatedResourceIds.add(target.id);
+    }
+  }
+
+  const cycles = dependencyCycles(
+    sectionResources.map((resource) => resource.id),
+    downstreamReferenceIdsByResourceId,
+    upstreamReferenceIdsByResourceId,
+  );
+
+  for (const flow of topology?.taskFlows ?? []) {
+    const sourceResourceIds = uniqueSortedResourceIds(
+      flow.sourceResourceIds.filter((resourceId) =>
+        resourceById.has(resourceId),
+      ),
+    );
+    const targetResourceIds = uniqueSortedResourceIds(
+      flow.targetResourceIds.filter((resourceId) =>
+        resourceById.has(resourceId),
+      ),
+    );
+    if (sourceResourceIds.length === 0 || targetResourceIds.length === 0) {
+      continue;
+    }
+    const normalizedFlow: DependencyFlow = {
+      sourceResourceIds,
+      targetResourceIds,
+    };
+    flows.push(normalizedFlow);
+    const members = uniqueSortedResourceIds([
+      ...sourceResourceIds,
+      ...targetResourceIds,
+    ]);
+    // Connect the hyperedge as a star, not a cartesian product of members.
+    const flowNodeId = `\u0000flow:${flows.length - 1}`;
+    neighborsByNodeId.set(flowNodeId, new Set<string>());
+    for (const resourceId of members) {
+      addUndirectedNeighbor(neighborsByNodeId, flowNodeId, resourceId);
+      relatedResourceIds.add(resourceId);
+    }
+    for (const resourceId of sourceResourceIds) {
+      outgoingFlowsByResourceId.get(resourceId)?.push(normalizedFlow);
+    }
+    for (const resourceId of targetResourceIds) {
+      incomingFlowsByResourceId.get(resourceId)?.push(normalizedFlow);
+    }
+  }
+
+  const layoutComponentByResourceId = new Map<string, number>();
+  const components: DependencyComponent[] = [];
+  for (const resource of [...sectionResources].sort((left, right) =>
+    compareStableIdentifier(left.id, right.id),
+  )) {
+    if (layoutComponentByResourceId.has(resource.id)) {
+      continue;
+    }
+    const pending = [resource.id];
+    const visitedNodes = new Set<string>();
+    const resourceIds: string[] = [];
+    while (pending.length > 0) {
+      const nodeId = pending.pop()!;
+      if (visitedNodes.has(nodeId)) {
+        continue;
+      }
+      visitedNodes.add(nodeId);
+      const nodeResource = resourceById.get(nodeId);
+      if (nodeResource) {
+        resourceIds.push(nodeId);
+      }
+      for (const neighbor of neighborsByNodeId.get(nodeId) ?? []) {
+        if (!visitedNodes.has(neighbor)) {
+          pending.push(neighbor);
+        }
+      }
+    }
+    const sortedResourceIds = uniqueSortedResourceIds(resourceIds);
+    const componentIndex = components.length;
+    sortedResourceIds.forEach((resourceId) =>
+      layoutComponentByResourceId.set(resourceId, componentIndex),
+    );
+    components.push({
+      resourceIds: sortedResourceIds,
+      minimumDepth: Math.min(
+        ...sortedResourceIds.map(
+          (resourceId) => resourceById.get(resourceId)?.dependencyDepth ?? 0,
+        ),
+      ),
+      minimumResourceId: sortedResourceIds[0] ?? '',
+      related: sortedResourceIds.some((resourceId) =>
+        relatedResourceIds.has(resourceId),
+      ),
+    });
+  }
+
+  return {
+    componentByResourceId: layoutComponentByResourceId,
+    cycles,
+    components,
+    incomingFlowsByResourceId,
+    outgoingFlowsByResourceId,
+    upstreamReferenceIdsByResourceId,
+    downstreamReferenceIdsByResourceId,
+    flows,
+  };
+}
+
+function dependencyTopologyForSection(
+  sectionResources: readonly ResourceCanvasItem[],
+  topology: ResourceCanvasLayoutTopology | undefined,
+) {
+  return dependencyClusters(sectionResources, topology);
+}
+
+function sortDependencyBucket(
+  resourceIds: string[],
+  resourceById: ReadonlyMap<string, ResourceCanvasItem>,
+  rankByResourceId: ReadonlyMap<string, number>,
+  scanDirection: 'forward' | 'reverse',
+  topology: ReturnType<typeof dependencyTopologyForSection>,
+  flowSignalByFlow: ReadonlyMap<DependencyFlow, number | null>,
+) {
+  type OrderingUnit = {
+    resourceIds: string[];
+    minimumResourceId: string;
+    previousRank: number;
+    signal: number | null;
+  };
+  const resourceIdSet = new Set(resourceIds);
+  const claimedResourceIds = new Set<string>();
+  const units: OrderingUnit[] = [];
+  for (const cycle of topology.cycles) {
+    const cycleResourceIds = cycle.resourceIds.filter((resourceId) =>
+      resourceIdSet.has(resourceId),
+    );
+    if (cycleResourceIds.length !== cycle.resourceIds.length) {
+      continue;
+    }
+    cycleResourceIds.forEach((resourceId) =>
+      claimedResourceIds.add(resourceId),
+    );
+    units.push({
+      resourceIds: cycleResourceIds,
+      minimumResourceId: cycle.minimumResourceId,
+      previousRank: Math.min(
+        ...cycleResourceIds.map(
+          (resourceId) => rankByResourceId.get(resourceId) ?? 0,
+        ),
+      ),
+      signal: null,
+    });
+  }
+  for (const resourceId of resourceIds) {
+    if (claimedResourceIds.has(resourceId)) {
+      continue;
+    }
+    units.push({
+      resourceIds: [resourceId],
+      minimumResourceId: resourceId,
+      previousRank: rankByResourceId.get(resourceId) ?? 0,
+      signal: null,
+    });
+  }
+  for (const unit of units) {
+    const signals: number[] = [];
+    for (const resourceId of unit.resourceIds) {
+      const resource = resourceById.get(resourceId);
+      if (!resource) {
+        continue;
+      }
+      const directNeighborIds =
+        scanDirection === 'forward'
+          ? topology.upstreamReferenceIdsByResourceId.get(resourceId)
+          : topology.downstreamReferenceIdsByResourceId.get(resourceId);
+      for (const neighborId of directNeighborIds ?? []) {
+        const neighbor = resourceById.get(neighborId);
+        const rank = rankByResourceId.get(neighborId);
+        const isLayerNeighbor =
+          neighbor &&
+          rank !== undefined &&
+          (scanDirection === 'forward'
+            ? neighbor.dependencyDepth < resource.dependencyDepth
+            : neighbor.dependencyDepth > resource.dependencyDepth);
+        if (isLayerNeighbor && rank !== undefined) {
+          signals.push(rank);
+        }
+      }
+      const flows =
+        scanDirection === 'forward'
+          ? topology.incomingFlowsByResourceId.get(resourceId)
+          : topology.outgoingFlowsByResourceId.get(resourceId);
+      for (const flow of flows ?? []) {
+        const value = flowSignalByFlow.get(flow);
+        if (value !== null && value !== undefined) {
+          signals.push(value);
+        }
+      }
+    }
+    unit.signal = median(signals);
+  }
+  units.sort((left, right) => {
+    const leftSignal = left.signal;
+    const rightSignal = right.signal;
+    if (leftSignal !== null && leftSignal !== undefined) {
+      if (rightSignal === null || rightSignal === undefined) {
+        return -1;
+      }
+      if (leftSignal !== rightSignal) {
+        return leftSignal - rightSignal;
+      }
+    } else if (rightSignal !== null && rightSignal !== undefined) {
+      return 1;
+    }
+    return (
+      left.previousRank - right.previousRank ||
+      compareStableIdentifier(left.minimumResourceId, right.minimumResourceId)
+    );
+  });
+  resourceIds.splice(
+    0,
+    resourceIds.length,
+    ...units.flatMap((unit) =>
+      [...unit.resourceIds].sort(
+        (left, right) =>
+          (rankByResourceId.get(left) ?? 0) -
+            (rankByResourceId.get(right) ?? 0) ||
+          compareStableIdentifier(left, right),
+      ),
+    ),
+  );
+}
+
+function dependencyAutomaticPositions(
+  section: ProjectResourceCanvasSection,
+  sectionResources: readonly ResourceCanvasItem[],
+  automaticResources: readonly ResourceCanvasItem[],
+  preservedPositions: readonly ProjectResourceCanvasPosition[],
+  topology: ResourceCanvasLayoutTopology | undefined,
+) {
+  const resourceById = new Map(
+    sectionResources.map((resource) => [resource.id, resource]),
+  );
+  const automaticIds = new Set(
+    automaticResources.map((resource) => resource.id),
+  );
+  const topologyForSection = dependencyTopologyForSection(
+    sectionResources,
+    topology,
+  );
+  const relatedComponents = topologyForSection.components
+    .filter((component) => component.related)
+    .sort(
+      (left, right) =>
+        left.minimumDepth - right.minimumDepth ||
+        compareStableIdentifier(
+          left.minimumResourceId,
+          right.minimumResourceId,
+        ),
+    );
+  const isolatedResourceIds = topologyForSection.components
+    .filter((component) => !component.related)
+    .flatMap((component) => component.resourceIds)
+    .filter((resourceId) => automaticIds.has(resourceId))
+    .sort(compareStableIdentifier);
+
+  const clusters: DependencyCluster[] = [];
+  let nextClusterY = 0;
+  for (const component of relatedComponents) {
+    const resourceIds = component.resourceIds.filter((resourceId) =>
+      automaticIds.has(resourceId),
+    );
+    if (resourceIds.length === 0) {
+      continue;
+    }
+    const bucketCounts = new Map<number, number>();
+    for (const resourceId of resourceIds) {
+      const depth = resourceById.get(resourceId)?.dependencyDepth ?? 0;
+      bucketCounts.set(depth, (bucketCounts.get(depth) ?? 0) + 1);
+    }
+    const cluster = {
+      resourceIds,
+      minimumDepth: component.minimumDepth,
+      minimumResourceId: component.minimumResourceId,
+      related: true,
+      baseY: nextClusterY,
+      rowCount: Math.max(1, ...bucketCounts.values()),
+    };
+    clusters.push(cluster);
+    nextClusterY +=
+      cluster.rowCount * RESOURCE_CANVAS_DEPENDENCY_SLOT_HEIGHT +
+      RESOURCE_CANVAS_CLUSTER_GAP;
+  }
+  if (isolatedResourceIds.length > 0) {
+    const isolatedBucketCounts = new Map<number, number>();
+    for (const resourceId of isolatedResourceIds) {
+      const depth = resourceById.get(resourceId)?.dependencyDepth ?? 0;
+      isolatedBucketCounts.set(
+        depth,
+        (isolatedBucketCounts.get(depth) ?? 0) + 1,
+      );
+    }
+    clusters.push({
+      resourceIds: isolatedResourceIds,
+      minimumDepth: Number.MAX_SAFE_INTEGER,
+      minimumResourceId: isolatedResourceIds[0] ?? '',
+      related: false,
+      baseY: nextClusterY,
+      rowCount: Math.max(1, ...isolatedBucketCounts.values()),
+    });
+  }
+
+  const rankByResourceId = new Map<string, number>();
+  for (const position of preservedPositions) {
+    rankByResourceId.set(
+      position.resourceId,
+      position.y / RESOURCE_CANVAS_DEPENDENCY_SLOT_HEIGHT,
+    );
+  }
+  const orderedIdsByClusterAndDepth = new Map<
+    DependencyCluster,
+    Map<number, string[]>
+  >();
+  for (const cluster of clusters) {
+    const idsByDepth = new Map<number, string[]>();
+    for (const resourceId of cluster.resourceIds) {
+      const resource = resourceById.get(resourceId);
+      if (!resource) {
+        continue;
+      }
+      const ids = idsByDepth.get(resource.dependencyDepth) ?? [];
+      ids.push(resourceId);
+      idsByDepth.set(resource.dependencyDepth, ids);
+    }
+    for (const [depth, resourceIds] of idsByDepth) {
+      resourceIds.sort(compareStableIdentifier);
+      const bucketBaseY =
+        cluster.baseY +
+        (cluster.related
+          ? ((cluster.rowCount - resourceIds.length) *
+              RESOURCE_CANVAS_DEPENDENCY_SLOT_HEIGHT) /
+            2
+          : 0);
+      resourceIds.forEach((resourceId, index) =>
+        rankByResourceId.set(
+          resourceId,
+          (bucketBaseY + index * RESOURCE_CANVAS_DEPENDENCY_SLOT_HEIGHT) /
+            RESOURCE_CANVAS_DEPENDENCY_SLOT_HEIGHT,
+        ),
+      );
+      idsByDepth.set(depth, resourceIds);
+    }
+    orderedIdsByClusterAndDepth.set(cluster, idsByDepth);
+  }
+
+  for (let round = 0; round < DEPENDENCY_ORDERING_SCAN_ROUNDS; round += 1) {
+    for (const scanDirection of ['forward', 'reverse'] as const) {
+      const flowSignalByFlow = new Map<DependencyFlow, number | null>();
+      for (const flow of topologyForSection.flows) {
+        const signalResourceIds =
+          scanDirection === 'forward'
+            ? flow.sourceResourceIds
+            : flow.targetResourceIds;
+        flowSignalByFlow.set(
+          flow,
+          median(
+            signalResourceIds.flatMap((resourceId) => {
+              const rank = rankByResourceId.get(resourceId);
+              return rank === undefined ? [] : [rank];
+            }),
+          ),
+        );
+      }
+      for (const cluster of clusters) {
+        if (!cluster.related) {
+          continue;
+        }
+        const idsByDepth = orderedIdsByClusterAndDepth.get(cluster)!;
+        const depths = Array.from(idsByDepth.keys()).sort((left, right) =>
+          scanDirection === 'forward' ? left - right : right - left,
+        );
+        for (const depth of depths) {
+          const resourceIds = idsByDepth.get(depth)!;
+          sortDependencyBucket(
+            resourceIds,
+            resourceById,
+            rankByResourceId,
+            scanDirection,
+            topologyForSection,
+            flowSignalByFlow,
+          );
+          resourceIds.forEach((resourceId, index) =>
+            rankByResourceId.set(
+              resourceId,
+              (cluster.baseY +
+                (cluster.related
+                  ? ((cluster.rowCount - resourceIds.length) *
+                      RESOURCE_CANVAS_DEPENDENCY_SLOT_HEIGHT) /
+                    2
+                  : 0) +
+                index * RESOURCE_CANVAS_DEPENDENCY_SLOT_HEIGHT) /
+                RESOURCE_CANVAS_DEPENDENCY_SLOT_HEIGHT,
+            ),
+          );
+        }
+      }
+    }
+  }
+
+  const occupancy = new ResourceCanvasOccupancyIndex([...preservedPositions]);
+  const positions: ProjectResourceCanvasPosition[] = [];
+  for (const cluster of clusters) {
+    const idsByDepth = orderedIdsByClusterAndDepth.get(cluster)!;
+    for (const [depth, resourceIds] of Array.from(idsByDepth).sort(
+      ([left], [right]) => left - right,
+    )) {
+      const normalizedDepth = Number.isFinite(depth)
+        ? Math.max(0, Math.round(depth))
+        : 0;
+      const x =
+        Math.min(normalizedDepth, RESOURCE_CANVAS_MAX_DEPENDENCY_COLUMN) *
+        RESOURCE_CANVAS_DEPENDENCY_SLOT_WIDTH;
+      const bucketBaseY =
+        cluster.baseY +
+        (cluster.related
+          ? ((cluster.rowCount - resourceIds.length) *
+              RESOURCE_CANVAS_DEPENDENCY_SLOT_HEIGHT) /
+            2
+          : 0);
+      for (let index = 0; index < resourceIds.length; index += 1) {
+        const resourceId = resourceIds[index]!;
+        let y = bucketBaseY + index * RESOURCE_CANVAS_DEPENDENCY_SLOT_HEIGHT;
+        while (occupancy.overlaps(x, y)) {
+          y += RESOURCE_CANVAS_DEPENDENCY_SLOT_HEIGHT;
+        }
+        const position: ProjectResourceCanvasPosition = {
+          resourceId,
+          section,
+          x,
+          y,
+          manuallyPlaced: false,
+        };
+        positions.push(position);
+        occupancy.add(position);
+      }
+    }
+  }
+  return positions;
+}
+
 export function reconcileResourceCanvasLayout(
   source: ProjectResourceCanvasLayout,
   resources: ResourceCanvasItem[],
+  topology?: ResourceCanvasLayoutTopology,
 ): ReconciledResourceCanvasLayout {
   const resourceById = new Map(
     resources.map((resource) => [resource.id, resource]),
@@ -235,21 +870,29 @@ export function reconcileResourceCanvasLayout(
 
   for (const section of sectionOrder) {
     const sectionPositions = positionsBySection.get(section) ?? [];
-    const occupancy = new ResourceCanvasOccupancyIndex(sectionPositions);
-    const nextYByColumn = new Map<number, number>();
+    const sectionResources = resources.filter(
+      (resource) => resource.category === section,
+    );
     let nextTypeSlot = 0;
     const newResources = (newResourcesBySection.get(section) ?? []).sort(
       (left, right) => compareResources(source.mode, left, right),
     );
+    if (source.mode === 'dependency') {
+      const automaticPositions = dependencyAutomaticPositions(
+        section,
+        sectionResources,
+        newResources,
+        sectionPositions,
+        topology,
+      );
+      sectionPositions.push(...automaticPositions);
+      continue;
+    }
+    const occupancy = new ResourceCanvasOccupancyIndex(sectionPositions);
     for (const resource of newResources) {
-      let point: { x: number; y: number };
-      if (source.mode === 'dependency') {
-        point = defaultDependencyPosition(resource, occupancy, nextYByColumn);
-      } else {
-        const placement = defaultTypePosition(occupancy, nextTypeSlot);
-        point = placement.point;
-        nextTypeSlot = placement.nextSlot;
-      }
+      const placement = defaultTypePosition(occupancy, nextTypeSlot);
+      const point = placement.point;
+      nextTypeSlot = placement.nextSlot;
       const position: ProjectResourceCanvasPosition = {
         resourceId: resource.id,
         section,
@@ -286,8 +929,16 @@ export function moveResourceCanvasPosition(
   x: number,
   y: number,
 ): ProjectResourceCanvasLayout {
-  const normalizedX = Math.max(0, Math.round(x));
-  const normalizedY = Math.max(0, Math.round(y));
+  const finiteX = Number.isFinite(x) ? x : 0;
+  const finiteY = Number.isFinite(y) ? y : 0;
+  const normalizedX = Math.min(
+    GAME_CREATION_RESOURCE_LAYOUT_MAX_COORDINATE,
+    Math.max(0, Math.round(finiteX)),
+  );
+  const normalizedY = Math.min(
+    GAME_CREATION_RESOURCE_LAYOUT_MAX_COORDINATE,
+    Math.max(0, Math.round(finiteY)),
+  );
   return {
     ...layout,
     positions: layout.positions.map((position) =>
diff --git a/apps/ai-game-creator-shell/src/view/project-development/resourceCardPreviewModel.ts b/apps/ai-game-creator-shell/src/view/project-development/resourceCardPreviewModel.ts
new file mode 100644
index 000000000..5e48d98d6
--- /dev/null
+++ b/apps/ai-game-creator-shell/src/view/project-development/resourceCardPreviewModel.ts
@@ -0,0 +1,167 @@
+import type { ProjectResourceCanvasLayoutMode } from '../../../../../packages/shared/src/contracts/gameCreationApp';
+import type { ProjectResource } from './resourceProjectionModel';
+
+export const PROJECT_RESOURCE_CARD_PREVIEW_CONCURRENCY = 3;
+export const PROJECT_RESOURCE_CARD_PREVIEW_CACHE_LIMIT = 48;
+export const PROJECT_RESOURCE_CARD_PREVIEW_CACHE_BYTE_LIMIT = 64 * 1024 * 1024;
+export const PROJECT_RESOURCE_CARD_PREVIEW_QUEUE_LIMIT = 96;
+export const PROJECT_RESOURCE_CARD_PREVIEW_ACTIVE_QUEUE_RESERVE =
+  PROJECT_RESOURCE_CARD_PREVIEW_CONCURRENCY;
+
+export type ProjectResourceCardPreviewKind =
+  | 'raster-image'
+  | 'media-image'
+  | 'video'
+  | 'audio'
+  | 'document'
+  | 'version'
+  | 'placeholder';
+
+export type ProjectResourceCardPreviewPayload = {
+  path: string;
+  mediaType: string;
+  byteLen: number;
+  sourceUrl?: string;
+  content?: string;
+};
+
+export type ProjectResourceCardPreviewTransportPayload = Omit<
+  ProjectResourceCardPreviewPayload,
+  'sourceUrl'
+> & {
+  dataUrl?: string;
+};
+
+export type ProjectResourceCardPreviewCacheEntry = {
+  identity: string;
+  retainedBytes: number;
+};
+
+export type ProjectResourceCardPreviewState =
+  | { status: 'idle' }
+  | { status: 'loading' }
+  | {
+      status: 'loaded';
+      preview: ProjectResourceCardPreviewPayload;
+    }
+  | { status: 'failed'; error: string; retryable: boolean };
+
+export const IDLE_PROJECT_RESOURCE_CARD_PREVIEW = {
+  status: 'idle',
+} as const satisfies ProjectResourceCardPreviewState;
+
+function normalizedProjectResourceCardPreviewRetainedBytes(
+  retainedBytes: number,
+) {
+  return Number.isSafeInteger(retainedBytes) && retainedBytes >= 0
+    ? retainedBytes
+    : PROJECT_RESOURCE_CARD_PREVIEW_CACHE_BYTE_LIMIT + 1;
+}
+
+export function projectResourceCardPreviewEvictionIdentities(
+  entries: readonly ProjectResourceCardPreviewCacheEntry[],
+  protectedIdentity: string | null,
+): string[] {
+  let retainedCount = entries.length;
+  let retainedBytes = entries.reduce(
+    (total, entry) =>
+      total +
+      normalizedProjectResourceCardPreviewRetainedBytes(entry.retainedBytes),
+    0,
+  );
+  const evicted = new Set<string>();
+  const overBudget = () =>
+    retainedCount > PROJECT_RESOURCE_CARD_PREVIEW_CACHE_LIMIT ||
+    retainedBytes > PROJECT_RESOURCE_CARD_PREVIEW_CACHE_BYTE_LIMIT;
+
+  for (const entry of entries) {
+    if (!overBudget()) {
+      break;
+    }
+    if (entry.identity === protectedIdentity) {
+      continue;
+    }
+    evicted.add(entry.identity);
+    retainedCount -= 1;
+    retainedBytes -= normalizedProjectResourceCardPreviewRetainedBytes(
+      entry.retainedBytes,
+    );
+  }
+
+  if (overBudget() && protectedIdentity) {
+    const protectedEntry = entries.find(
+      (entry) => entry.identity === protectedIdentity,
+    );
+    if (protectedEntry && !evicted.has(protectedEntry.identity)) {
+      evicted.add(protectedEntry.identity);
+    }
+  }
+
+  return Array.from(evicted);
+}
+
+const rasterImageExtension = /\.(png|jpe?g|webp)$/iu;
+const extendedImageExtension = /\.(gif|svg|avif|bmp)$/iu;
+const videoExtension = /\.(mp4|webm|mov)$/iu;
+
+export function projectResourceCardPreviewKind(
+  resource: ProjectResource,
+): ProjectResourceCardPreviewKind {
+  if (resource.category === 'version') {
+    return 'version';
+  }
+  if (resource.category === 'document') {
+    return 'document';
+  }
+  if (resource.category === 'audio') {
+    return 'audio';
+  }
+  const mediaType = resource.mediaType.trim().toLowerCase();
+  if (mediaType.startsWith('video/') || videoExtension.test(resource.path)) {
+    return 'video';
+  }
+  if (
+    ['image/png', 'image/jpeg', 'image/jpg', 'image/webp'].includes(
+      mediaType,
+    ) ||
+    rasterImageExtension.test(resource.path)
+  ) {
+    return 'raster-image';
+  }
+  if (
+    mediaType.startsWith('image/') ||
+    extendedImageExtension.test(resource.path)
+  ) {
+    return 'media-image';
+  }
+  return 'placeholder';
+}
+
+export function projectResourceCardPreviewIdentity(input: {
+  projectPath: string;
+  projectId: string;
+  mode: ProjectResourceCanvasLayoutMode;
+  resource: ProjectResource;
+}) {
+  return JSON.stringify([
+    input.projectPath,
+    input.projectId,
+    input.mode,
+    input.resource.id,
+    input.resource.category,
+    input.resource.path,
+    input.resource.mediaType,
+  ]);
+}
+
+export function summarizeProjectResourceDocument(content: string) {
+  return content
+    .replace(/!\[[^\]]*\]\([^)]*\)/gu, ' ')
+    .replace(/\[([^\]]+)\]\([^)]*\)/gu, '$1')
+    .replace(/<[^>]*>/gu, ' ')
+    .replace(/[`*_~>#|{}[\]]/gu, ' ')
+    .replace(/^\s*[-+]\s+/gmu, '')
+    .replace(/\s+/gu, ' ')
+    .trim()
+    .slice(0, 180);
+}
diff --git a/apps/ai-game-creator-shell/src/view/project-development/resourceSectionHeightModel.ts b/apps/ai-game-creator-shell/src/view/project-development/resourceSectionHeightModel.ts
new file mode 100644
index 000000000..b9c93d964
--- /dev/null
+++ b/apps/ai-game-creator-shell/src/view/project-development/resourceSectionHeightModel.ts
@@ -0,0 +1,122 @@
+import type {
+  ProjectResourceCanvasLayoutMode,
+  ProjectResourceCanvasSection,
+} from '../../../../../packages/shared/src/contracts/gameCreationApp';
+import { RESOURCE_CANVAS_CARD_HEIGHT } from './resourceCanvasLayoutModel';
+
+export const RESOURCE_SECTION_HEIGHT_STEP = 72;
+export const RESOURCE_SECTION_MIN_HEIGHT = RESOURCE_CANVAS_CARD_HEIGHT + 88;
+export const RESOURCE_SECTION_DEFAULT_HEIGHT = 340;
+export const RESOURCE_SECTION_FALLBACK_MAX_HEIGHT = 640;
+export const RESOURCE_CANVAS_VERTICAL_INSET = 24;
+export const RESOURCE_SECTION_ZOOM_MIN = 0.5;
+export const RESOURCE_SECTION_ZOOM_MAX = 2;
+export const RESOURCE_SECTION_ZOOM_DEFAULT = 1;
+export const RESOURCE_SECTION_ZOOM_STEP = 0.1;
+
+export type ProjectResourceSectionHeightBounds = {
+  min: number;
+  max: number;
+};
+
+export type ProjectResourceSectionHeightAction =
+  | 'decrease'
+  | 'increase'
+  | 'reset';
+
+export type ProjectResourceSectionZoomAction =
+  | 'decrease'
+  | 'increase'
+  | 'reset';
+
+export function projectResourceSectionHeightKey(input: {
+  projectId: string;
+  mode: ProjectResourceCanvasLayoutMode;
+  section: ProjectResourceCanvasSection;
+}) {
+  return `${input.projectId}\n${input.mode}\n${input.section}`;
+}
+
+export function projectResourceSectionHeightBounds(
+  canvasClientHeight: number,
+): ProjectResourceSectionHeightBounds {
+  const availableHeight =
+    Number.isFinite(canvasClientHeight) && canvasClientHeight > 0
+      ? Math.floor(canvasClientHeight) - RESOURCE_CANVAS_VERTICAL_INSET
+      : RESOURCE_SECTION_FALLBACK_MAX_HEIGHT;
+  return {
+    min: RESOURCE_SECTION_MIN_HEIGHT,
+    max: Math.max(RESOURCE_SECTION_MIN_HEIGHT, availableHeight),
+  };
+}
+
+export function clampProjectResourceSectionHeight(
+  height: number,
+  bounds: ProjectResourceSectionHeightBounds,
+) {
+  const normalized = Number.isFinite(height)
+    ? Math.round(height)
+    : RESOURCE_SECTION_DEFAULT_HEIGHT;
+  return Math.min(bounds.max, Math.max(bounds.min, normalized));
+}
+
+export function defaultProjectResourceSectionHeight(
+  bounds: ProjectResourceSectionHeightBounds,
+) {
+  return clampProjectResourceSectionHeight(
+    RESOURCE_SECTION_DEFAULT_HEIGHT,
+    bounds,
+  );
+}
+
+export function updateProjectResourceSectionHeight(
+  currentHeight: number,
+  action: ProjectResourceSectionHeightAction,
+  bounds: ProjectResourceSectionHeightBounds,
+) {
+  if (action === 'reset') {
+    return defaultProjectResourceSectionHeight(bounds);
+  }
+  const delta =
+    action === 'increase'
+      ? RESOURCE_SECTION_HEIGHT_STEP
+      : -RESOURCE_SECTION_HEIGHT_STEP;
+  return clampProjectResourceSectionHeight(currentHeight + delta, bounds);
+}
+
+export function clampProjectResourceSectionZoom(zoom: number) {
+  const normalized = Number.isFinite(zoom)
+    ? Math.round(zoom * 100) / 100
+    : RESOURCE_SECTION_ZOOM_DEFAULT;
+  return Math.min(
+    RESOURCE_SECTION_ZOOM_MAX,
+    Math.max(RESOURCE_SECTION_ZOOM_MIN, normalized),
+  );
+}
+
+export function updateProjectResourceSectionZoom(
+  currentZoom: number,
+  action: ProjectResourceSectionZoomAction,
+) {
+  if (action === 'reset') {
+    return RESOURCE_SECTION_ZOOM_DEFAULT;
+  }
+  return clampProjectResourceSectionZoom(
+    currentZoom +
+      (action === 'increase'
+        ? RESOURCE_SECTION_ZOOM_STEP
+        : -RESOURCE_SECTION_ZOOM_STEP),
+  );
+}
+
+export function projectResourceSectionZoomFromWheel(
+  currentZoom: number,
+  deltaY: number,
+) {
+  if (!Number.isFinite(deltaY) || deltaY === 0) {
+    return clampProjectResourceSectionZoom(currentZoom);
+  }
+  return clampProjectResourceSectionZoom(
+    currentZoom * Math.exp(-deltaY * 0.0025),
+  );
+}
diff --git a/apps/ai-game-creator-shell/src/view/project-development/useProjectResourceCanvasLayout.ts b/apps/ai-game-creator-shell/src/view/project-development/useProjectResourceCanvasLayout.ts
index 66a6a6802..366bef49d 100644
--- a/apps/ai-game-creator-shell/src/view/project-development/useProjectResourceCanvasLayout.ts
+++ b/apps/ai-game-creator-shell/src/view/project-development/useProjectResourceCanvasLayout.ts
@@ -6,12 +6,16 @@ import type {
   ProjectResourceCanvasSection,
   UpdateProjectResourceCanvasLayoutResult,
 } from '../../../../../packages/shared/src/contracts/gameCreationApp';
-import { isSafeProjectResourceCanvasLayoutRevision } from '../../../../../packages/shared/src/contracts/gameCreationApp';
+import {
+  isSafeProjectResourceCanvasCoordinate,
+  isSafeProjectResourceCanvasLayoutRevision,
+} from '../../../../../packages/shared/src/contracts/gameCreationApp';
 import {
   createEmptyResourceCanvasLayout,
   moveResourceCanvasPosition,
   reconcileResourceCanvasLayout,
   type ResourceCanvasItem,
+  type ResourceCanvasLayoutTopology,
 } from './resourceCanvasLayoutModel';
 
 type LayoutNotice =
@@ -74,6 +78,73 @@ export function createResourceSignature(resources: ResourceCanvasItem[]) {
     .join('\n');
 }
 
+/**
+ * A bounded, identity-only input to dependency automatic placement. Display
+ * labels deliberately stay out: the resource list's coordination signature
+ * already covers them, while topology changes must be detectable even when
+ * every depth and resource count is unchanged.
+ */
+export function createResourceTopologySignature(
+  topology: ResourceCanvasLayoutTopology | undefined,
+) {
+  if (!topology) {
+    return '';
+  }
+  const entries = [
+    ...topology.referenceEdges
+    .map(
+      (edge) =>
+        `r:${JSON.stringify([edge.sourceResourceId, edge.targetResourceId])}`,
+    )
+    .sort(compareStableText),
+    ...topology.taskFlows
+    .map((flow) =>
+      `f:${JSON.stringify([
+        [...new Set(flow.sourceResourceIds)]
+          .sort(compareStableText),
+        [...new Set(flow.targetResourceIds)]
+          .sort(compareStableText),
+      ])}`,
+    )
+    .sort(compareStableText),
+  ];
+  return stableTopologyDigest([...new Set(entries)].sort(compareStableText));
+}
+
+function compareStableText(left: string, right: string) {
+  return left < right ? -1 : left > right ? 1 : 0;
+}
+
+/**
+ * Keeps the sidecar coordination input fixed-size even for a large graph.
+ * The canonical entries retain all stable endpoint and flow-member identities
+ * while being digested; labels and browser geometry never participate.
+ */
+function stableTopologyDigest(entries: readonly string[]) {
+  let forward = 0x811c9dc5;
+  let reverse = 0x9e3779b9;
+  for (const entry of entries) {
+    for (let index = 0; index < entry.length; index += 1) {
+      forward = Math.imul(forward ^ entry.charCodeAt(index), 0x01000193);
+      reverse = Math.imul(
+        reverse ^ entry.charCodeAt(entry.length - index - 1),
+        0x85ebca6b,
+      );
+    }
+    forward = Math.imul(forward ^ 10, 0x01000193);
+    reverse = Math.imul(reverse ^ 10, 0x85ebca6b);
+  }
+  return `${(entries.length >>> 0).toString(16).padStart(8, '0')}:${(
+    forward >>> 0
+  )
+    .toString(16)
+    .padStart(8, '0')}:${(
+    reverse >>> 0
+  )
+    .toString(16)
+    .padStart(8, '0')}`;
+}
+
 function layoutMatchesScope(
   layout: ProjectResourceCanvasLayout,
   scope: LayoutScope,
@@ -100,23 +171,46 @@ function positionsEqual(
   );
 }
 
+function layoutCoordinatesAreSafe(layout: ProjectResourceCanvasLayout) {
+  return layout.positions.every(
+    (position) =>
+      isSafeProjectResourceCanvasCoordinate(position.x) &&
+      isSafeProjectResourceCanvasCoordinate(position.y),
+  );
+}
+
 function reconcileLayout(
   source: ProjectResourceCanvasLayout,
   resources: ResourceCanvasItem[],
   rederiveAutomaticPositions: boolean,
+  topology: ResourceCanvasLayoutTopology | undefined,
 ) {
   if (!rederiveAutomaticPositions) {
-    return reconcileResourceCanvasLayout(source, resources);
+    const reconciled = reconcileResourceCanvasLayout(
+      source,
+      resources,
+      topology,
+    );
+    return layoutCoordinatesAreSafe(reconciled.layout)
+      ? reconciled
+      : { layout: source, changed: false };
   }
   const manualSource = {
     ...source,
     positions: source.positions.filter((position) => position.manuallyPlaced),
   };
-  const reconciled = reconcileResourceCanvasLayout(manualSource, resources);
-  return {
+  const reconciled = reconcileResourceCanvasLayout(
+    manualSource,
+    resources,
+    topology,
+  );
+  const result = {
     layout: reconciled.layout,
     changed: !positionsEqual(source.positions, reconciled.layout.positions),
   };
+  return layoutCoordinatesAreSafe(result.layout)
+    ? result
+    : { layout: source, changed: false };
 }
 
 export function useProjectResourceCanvasLayout({
@@ -124,6 +218,7 @@ export function useProjectResourceCanvasLayout({
   projectId,
   mode,
   resources,
+  topology,
   initializationReady = true,
   rederiveAutomaticPositions = false,
 }: {
@@ -131,19 +226,29 @@ export function useProjectResourceCanvasLayout({
   projectId: string;
   mode: ProjectResourceCanvasLayoutMode;
   resources: ResourceCanvasItem[];
+  topology?: ResourceCanvasLayoutTopology;
   initializationReady?: boolean;
   rederiveAutomaticPositions?: boolean;
 }) {
   const scopeKey = createScopeKey(projectPath, projectId, mode);
+  const topologySignature = useMemo(
+    () => createResourceTopologySignature(topology),
+    [topology],
+  );
   const resourceSignature = useMemo(
-    () => createResourceSignature(resources),
-    [resources],
+    () => [createResourceSignature(resources), topologySignature].join('\n'),
+    [resources, topologySignature],
   );
   const fallback = useMemo(
     () => {
       const empty = createEmptyResourceCanvasLayout(projectId, mode);
       return initializationReady
-        ? reconcileLayout(empty, resources, rederiveAutomaticPositions).layout
+        ? reconcileLayout(
+            empty,
+            resources,
+            rederiveAutomaticPositions,
+            topology,
+          ).layout
         : empty;
     }, [
       initializationReady,
@@ -151,6 +256,7 @@ export function useProjectResourceCanvasLayout({
       projectId,
       rederiveAutomaticPositions,
       resources,
+      topology,
     ]);
   const [layout, setLayout] = useState<ProjectResourceCanvasLayout>(fallback);
   const [notice, setNotice] = useState<LayoutNotice>('');
@@ -159,6 +265,7 @@ export function useProjectResourceCanvasLayout({
   const layoutRef = useRef<ProjectResourceCanvasLayout>(fallback);
   const persistedLayoutRef = useRef<ProjectResourceCanvasLayout>(fallback);
   const resourcesRef = useRef(resources);
+  const topologyRef = useRef(topology);
   const resourceSignatureRef = useRef(resourceSignature);
   const initializedScopeEpochRef = useRef<number | null>(null);
   const scopeRef = useRef<LayoutScope>({
@@ -177,6 +284,7 @@ export function useProjectResourceCanvasLayout({
   >(() => undefined);
 
   resourcesRef.current = resources;
+  topologyRef.current = topology;
   resourceSignatureRef.current = resourceSignature;
 
   const applyLayout = useCallback((next: ProjectResourceCanvasLayout) => {
@@ -202,6 +310,7 @@ export function useProjectResourceCanvasLayout({
         persistedLayoutRef.current,
         resourcesRef.current,
         rederiveAutomaticPositions,
+        topologyRef.current,
       ).layout;
       for (const intent of writeQueueRef.current) {
         if (intent.scopeEpoch === scopeEpoch && intent.kind === 'manual') {
@@ -281,6 +390,7 @@ export function useProjectResourceCanvasLayout({
       persistedLayoutRef.current,
       resourcesRef.current,
       rederiveAutomaticPositions,
+      topologyRef.current,
     );
     if (intent.kind === 'resources' && !reconciled.changed) {
       removeWriteIntent(intent);
@@ -329,7 +439,10 @@ export function useProjectResourceCanvasLayout({
     }
 
     const expectedRevision = persistedLayoutRef.current.revision;
-    if (!isSafeProjectResourceCanvasLayoutRevision(expectedRevision)) {
+    if (
+      !isSafeProjectResourceCanvasLayoutRevision(expectedRevision) ||
+      !layoutCoordinatesAreSafe(candidate)
+    ) {
       removeWriteIntent(intent);
       rebuildOptimisticLayout(scope.epoch);
       if (intent.kind === 'manual') {
@@ -364,9 +477,10 @@ export function useProjectResourceCanvasLayout({
           return;
         }
         if (
-          !isSafeProjectResourceCanvasLayoutRevision(result.layout.revision)
+          !isSafeProjectResourceCanvasLayoutRevision(result.layout.revision) ||
+          !layoutCoordinatesAreSafe(result.layout)
         ) {
-          throw new Error('layout response revision is not a safe integer');
+          throw new Error('layout response revision or coordinates are invalid');
         }
         if (!layoutMatchesScope(result.layout, currentScope)) {
           throw new Error('layout response scope mismatch');
@@ -383,6 +497,7 @@ export function useProjectResourceCanvasLayout({
               result.layout,
               resourcesRef.current,
               rederiveAutomaticPositions,
+              topologyRef.current,
             )
               .changed
           ) {
@@ -403,6 +518,7 @@ export function useProjectResourceCanvasLayout({
             result.layout,
             resourcesRef.current,
             rederiveAutomaticPositions,
+            topologyRef.current,
           ).changed;
           const nextRetry =
             intent.kind === 'resources' ? intent.conflictRetries + 1 : 0;
@@ -501,6 +617,7 @@ export function useProjectResourceCanvasLayout({
       emptyLayout,
       resourcesRef.current,
       rederiveAutomaticPositions,
+      topologyRef.current,
     ).layout;
     persistedLayoutRef.current = initialFallback;
     applyLayout(initialFallback);
@@ -523,8 +640,11 @@ export function useProjectResourceCanvasLayout({
         if (cancelled || scopeRef.current.epoch !== epoch) {
           return;
         }
-        if (!isSafeProjectResourceCanvasLayoutRevision(loaded.revision)) {
-          throw new Error('layout response revision is not a safe integer');
+        if (
+          !isSafeProjectResourceCanvasLayoutRevision(loaded.revision) ||
+          !layoutCoordinatesAreSafe(loaded)
+        ) {
+          throw new Error('layout response revision or coordinates are invalid');
         }
         if (!layoutMatchesScope(loaded, scope)) {
           return;
@@ -536,6 +656,7 @@ export function useProjectResourceCanvasLayout({
             loaded,
             resourcesRef.current,
             rederiveAutomaticPositions,
+            topologyRef.current,
           ).changed
         ) {
           enqueueResourceSyncRef.current(epoch);
@@ -580,6 +701,7 @@ export function useProjectResourceCanvasLayout({
       layoutRef.current,
       resourcesRef.current,
       rederiveAutomaticPositions,
+      topologyRef.current,
     );
     applyLayout(reconciledCurrent.layout);
     if (
@@ -588,6 +710,7 @@ export function useProjectResourceCanvasLayout({
         persistedLayoutRef.current,
         resourcesRef.current,
         rederiveAutomaticPositions,
+        topologyRef.current,
       ).changed
     ) {
       enqueueResourceSyncRef.current(scope.epoch);
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
new file mode 100644
index 000000000..addc950db
--- /dev/null
+++ b/apps/ai-game-creator-shell/src/view/project-development/useProjectResourceCardPreviews.ts
@@ -0,0 +1,659 @@
+import {
+  useCallback,
+  useEffect,
+  useLayoutEffect,
+  useMemo,
+  useRef,
+  useState,
+} from 'react';
+
+import type { ProjectResourceCanvasLayoutMode } from '../../../../../packages/shared/src/contracts/gameCreationApp';
+import {
+  cancelLocalProjectResourcePreviewScope,
+  createProjectResourcePreviewRequestId,
+  createProjectResourcePreviewScopeId,
+  isProjectResourcePreviewCancellation,
+} from '../../services/projectResourcePreviewTransport';
+import {
+  IDLE_PROJECT_RESOURCE_CARD_PREVIEW,
+  PROJECT_RESOURCE_CARD_PREVIEW_ACTIVE_QUEUE_RESERVE,
+  PROJECT_RESOURCE_CARD_PREVIEW_CACHE_BYTE_LIMIT,
+  PROJECT_RESOURCE_CARD_PREVIEW_CONCURRENCY,
+  PROJECT_RESOURCE_CARD_PREVIEW_QUEUE_LIMIT,
+  projectResourceCardPreviewEvictionIdentities,
+  projectResourceCardPreviewIdentity,
+  projectResourceCardPreviewKind,
+  type ProjectResourceCardPreviewPayload,
+  type ProjectResourceCardPreviewState,
+  type ProjectResourceCardPreviewTransportPayload,
+} from './resourceCardPreviewModel';
+import type { ProjectResource } from './resourceProjectionModel';
+
+type PreviewRequestReason = 'visible' | 'detail' | 'play';
+
+type PreviewJob = {
+  scopeKey: string;
+  scopeId: string;
+  scopeEpoch: number;
+  identity: string;
+  resource: ProjectResource;
+  reason: PreviewRequestReason;
+};
+
+type MaterializedPreview = {
+  preview: ProjectResourceCardPreviewPayload;
+  retainedBytes: number;
+  objectUrl: string | null;
+};
+
+type CachedPreview = {
+  retainedBytes: number;
+  objectUrl: string | null;
+};
+
+type ObservedPreviewCard = {
+  identity: string;
+  resource: ProjectResource;
+};
+
+function previewReadErrorMessage(
+  resource: ProjectResource,
+  error: unknown,
+): { error: string; retryable: boolean } {
+  const message = error instanceof Error ? error.message : String(error);
+  if (message.includes('项目权限策略要求用户确认')) {
+    return {
+      error: `当前项目策略要求先确认读取${
+        resource.category === 'document' ? '文档' : '资源'
+      }，确认后请关闭详情并重试`,
+      retryable: true,
+    };
+  }
+  if (message.includes('项目权限策略拒绝执行')) {
+    return {
+      error: `当前项目策略不允许读取${
+        resource.category === 'document' ? '文档' : '资源'
+      }，调整策略后请关闭详情并重试`,
+      retryable: true,
+    };
+  }
+  if (message.includes('发生漂移') || message.includes('发生替换')) {
+    return {
+      error: '资源读取期间发生变化，请关闭详情并重试',
+      retryable: true,
+    };
+  }
+  if (
+    message.includes('不能超过') ||
+    message.includes('UTF-8') ||
+    message.includes('只支持') ||
+    message.includes('脚本或外部资源引用') ||
+    message.includes('图片尺寸过大') ||
+    message.includes('图片尺寸溢出') ||
+    message.includes('图片结构无效') ||
+    message.includes('内容无效') ||
+    message.includes('文件为空') ||
+    message.includes('图片不能为空') ||
+    message.includes('签名与登记类型不一致')
+  ) {
+    return {
+      error: message
+        .replace('image.inspect', '图片预览')
+        .replace('，暂时无法在客户端预览', '，无法在客户端预览'),
+      retryable: false,
+    };
+  }
+  return {
+    error: '资源暂时无法读取，请关闭详情并重试',
+    retryable: true,
+  };
+}
+
+const previewRequestPriority: Record<PreviewRequestReason, number> = {
+  visible: 0,
+  detail: 1,
+  play: 2,
+};
+
+function materializeProjectResourceCardPreview(
+  transport: ProjectResourceCardPreviewTransportPayload,
+): MaterializedPreview {
+  if (!transport.dataUrl) {
+    return {
+      preview: {
+        path: transport.path,
+        mediaType: transport.mediaType,
+        byteLen: transport.byteLen,
+        content: transport.content,
+      },
+      retainedBytes:
+        transport.content === undefined
+          ? 0
+          : new TextEncoder().encode(transport.content).byteLength,
+      objectUrl: null,
+    };
+  }
+  const prefix = `data:${transport.mediaType};base64,`;
+  if (!transport.dataUrl.startsWith(prefix)) {
+    throw new Error('媒体预览内容无效：data URL 类型与媒体类型不一致');
+  }
+  let decoded: string;
+  try {
+    decoded = window.atob(transport.dataUrl.slice(prefix.length));
+  } catch {
+    throw new Error('媒体预览内容无效：base64 解码失败');
+  }
+  const bytes = new Uint8Array(decoded.length);
+  for (let index = 0; index < decoded.length; index += 1) {
+    bytes[index] = decoded.charCodeAt(index);
+  }
+  const blob = new Blob([bytes], { type: transport.mediaType });
+  if (blob.size > PROJECT_RESOURCE_CARD_PREVIEW_CACHE_BYTE_LIMIT) {
+    throw new Error('媒体预览不能超过客户端缓存字节预算');
+  }
+  const objectUrl = URL.createObjectURL(blob);
+  return {
+    preview: {
+      path: transport.path,
+      mediaType: transport.mediaType,
+      byteLen: transport.byteLen,
+      sourceUrl: objectUrl,
+    },
+    retainedBytes: blob.size,
+    objectUrl,
+  };
+}
+
+function nextPreviewJob(queue: PreviewJob[]) {
+  let nextIndex = 0;
+  for (let index = 1; index < queue.length; index += 1) {
+    if (
+      previewRequestPriority[queue[index]!.reason] >
+      previewRequestPriority[queue[nextIndex]!.reason]
+    ) {
+      nextIndex = index;
+    }
+  }
+  return queue.splice(nextIndex, 1)[0];
+}
+
+export function useProjectResourceCardPreviews(input: {
+  projectPath: string;
+  projectId: string;
+  mode: ProjectResourceCanvasLayoutMode;
+  resources: ProjectResource[];
+  canvasRef: React.RefObject<HTMLDivElement | null>;
+}) {
+  const scopeKey = JSON.stringify([
+    input.projectPath,
+    input.projectId,
+    input.mode,
+  ]);
+  const identityByResourceId = useMemo(
+    () =>
+      new Map(
+        input.resources.map((resource) => [
+          resource.id,
+          projectResourceCardPreviewIdentity({
+            projectPath: input.projectPath,
+            projectId: input.projectId,
+            mode: input.mode,
+            resource,
+          }),
+        ]),
+      ),
+    [input.mode, input.projectId, input.projectPath, input.resources],
+  );
+  const [previews, setPreviews] = useState<
+    Map<string, ProjectResourceCardPreviewState>
+  >(new Map());
+  const [initialScopeId] = useState(createProjectResourcePreviewScopeId);
+  const previewsRef = useRef(previews);
+  const scopeKeyRef = useRef(scopeKey);
+  const scopeIdRef = useRef(initialScopeId);
+  const scopeInitializedRef = useRef(false);
+  const scopeEpochRef = useRef(0);
+  const identityByResourceIdRef = useRef(identityByResourceId);
+  const validIdentitiesRef = useRef(new Set(identityByResourceId.values()));
+  const observerRef = useRef<IntersectionObserver | null>(null);
+  const observedCardsRef = useRef(new Map<HTMLElement, ObservedPreviewCard>());
+  const queueRef = useRef<PreviewJob[]>([]);
+  const queuedIdentitiesRef = useRef(new Map<string, number>());
+  const pendingIdentitiesRef = useRef(new Map<string, number>());
+  const cacheOrderRef = useRef(new Map<string, true>());
+  const cachedPreviewsRef = useRef(new Map<string, CachedPreview>());
+  const cacheBytesRef = useRef(0);
+  const activeReadsRef = useRef({ scopeEpoch: 0, count: 0 });
+  const protectedIdentityRef = useRef<string | null>(null);
+  const drainQueueRef = useRef<() => void>(() => undefined);
+
+  scopeKeyRef.current = scopeKey;
+  identityByResourceIdRef.current = identityByResourceId;
+  validIdentitiesRef.current = new Set(identityByResourceId.values());
+
+  const isCurrentJob = useCallback((job: PreviewJob) => {
+    return (
+      scopeEpochRef.current === job.scopeEpoch &&
+      scopeKeyRef.current === job.scopeKey &&
+      scopeIdRef.current === job.scopeId &&
+      identityByResourceIdRef.current.get(job.resource.id) === job.identity
+    );
+  }, []);
+
+  const disposeCachedPreview = useCallback((identity: string) => {
+    const cached = cachedPreviewsRef.current.get(identity);
+    if (!cached) {
+      return;
+    }
+    cachedPreviewsRef.current.delete(identity);
+    cacheBytesRef.current = Math.max(
+      0,
+      cacheBytesRef.current - cached.retainedBytes,
+    );
+    if (cached.objectUrl) {
+      URL.revokeObjectURL(cached.objectUrl);
+    }
+  }, []);
+
+  const disposeAllCachedPreviews = useCallback(() => {
+    for (const identity of Array.from(cachedPreviewsRef.current.keys())) {
+      disposeCachedPreview(identity);
+    }
+    cacheOrderRef.current.clear();
+    cacheBytesRef.current = 0;
+  }, [disposeCachedPreview]);
+
+  const publishPreview = useCallback(
+    (
+      identity: string,
+      state: ProjectResourceCardPreviewState,
+      materialized?: MaterializedPreview,
+    ) => {
+      const next = new Map(previewsRef.current);
+      cacheOrderRef.current.delete(identity);
+      disposeCachedPreview(identity);
+      next.set(identity, state);
+      if (state.status === 'loaded' || state.status === 'failed') {
+        const cached = materialized
+          ? {
+              retainedBytes: materialized.retainedBytes,
+              objectUrl: materialized.objectUrl,
+            }
+          : { retainedBytes: 0, objectUrl: null };
+        cachedPreviewsRef.current.set(identity, cached);
+        cacheBytesRef.current += cached.retainedBytes;
+        cacheOrderRef.current.set(identity, true);
+        const evictedIdentities = projectResourceCardPreviewEvictionIdentities(
+          Array.from(cacheOrderRef.current.keys()).map((cachedIdentity) => ({
+            identity: cachedIdentity,
+            retainedBytes:
+              cachedPreviewsRef.current.get(cachedIdentity)?.retainedBytes ?? 0,
+          })),
+          protectedIdentityRef.current,
+        );
+        for (const evictedIdentity of evictedIdentities) {
+          cacheOrderRef.current.delete(evictedIdentity);
+          disposeCachedPreview(evictedIdentity);
+          next.delete(evictedIdentity);
+        }
+      }
+      previewsRef.current = next;
+      setPreviews(next);
+    },
+    [disposeCachedPreview],
+  );
+
+  const readPreview = useCallback(
+    async (
+      job: PreviewJob,
+    ): Promise<ProjectResourceCardPreviewTransportPayload> => {
+      const kind = projectResourceCardPreviewKind(job.resource);
+      if (kind === 'document' && job.resource.content !== undefined) {
+        return {
+          path: job.resource.path,
+          mediaType: job.resource.mediaType,
+          byteLen: new TextEncoder().encode(job.resource.content).byteLength,
+          content: job.resource.content,
+        };
+      }
+      const invoke = window.__TAURI__?.core?.invoke;
+      if (!invoke) {
+        throw new Error(
+          kind === 'document'
+            ? '文档预览需要在客户端内打开'
+            : '媒体预览需要在客户端内打开',
+        );
+      }
+      if (kind === 'raster-image') {
+        return invoke<ProjectResourceCardPreviewTransportPayload>(
+          'read_local_project_image_preview',
+          {
+            projectPath: input.projectPath,
+            relativePath: job.resource.path,
+            scopeId: job.scopeId,
+            requestId: createProjectResourcePreviewRequestId(),
+          },
+        );
+      }
+      if (kind === 'document') {
+        return invoke<ProjectResourceCardPreviewTransportPayload>(
+          'read_local_project_text_preview',
+          {
+            projectPath: input.projectPath,
+            relativePath: job.resource.path,
+            scopeId: job.scopeId,
+            requestId: createProjectResourcePreviewRequestId(),
+          },
+        );
+      }
+      return invoke<ProjectResourceCardPreviewTransportPayload>(
+        'read_local_project_media_preview',
+        {
+          projectPath: input.projectPath,
+          relativePath: job.resource.path,
+          category: job.resource.category,
+          scopeId: job.scopeId,
+          requestId: createProjectResourcePreviewRequestId(),
+        },
+      );
+    },
+    [input.projectPath],
+  );
+
+  const drainQueue = useCallback(() => {
+    while (
+      activeReadsRef.current.scopeEpoch === scopeEpochRef.current &&
+      activeReadsRef.current.count <
+        PROJECT_RESOURCE_CARD_PREVIEW_CONCURRENCY &&
+      queueRef.current.length > 0
+    ) {
+      const job = nextPreviewJob(queueRef.current);
+      if (!job) {
+        break;
+      }
+      if (queuedIdentitiesRef.current.get(job.identity) === job.scopeEpoch) {
+        queuedIdentitiesRef.current.delete(job.identity);
+      }
+      if (!isCurrentJob(job)) {
+        continue;
+      }
+      activeReadsRef.current.count += 1;
+      pendingIdentitiesRef.current.set(job.identity, job.scopeEpoch);
+      publishPreview(job.identity, { status: 'loading' });
+      void readPreview(job)
+        .then((transport) => {
+          if (isCurrentJob(job)) {
+            const materialized =
+              materializeProjectResourceCardPreview(transport);
+            if (!isCurrentJob(job)) {
+              if (materialized.objectUrl) {
+                URL.revokeObjectURL(materialized.objectUrl);
+              }
+              return;
+            }
+            publishPreview(
+              job.identity,
+              { status: 'loaded', preview: materialized.preview },
+              materialized,
+            );
+          }
+        })
+        .catch((error: unknown) => {
+          if (
+            isCurrentJob(job) &&
+            !isProjectResourcePreviewCancellation(error)
+          ) {
+            const failure = previewReadErrorMessage(job.resource, error);
+            publishPreview(job.identity, {
+              status: 'failed',
+              ...failure,
+            });
+          }
+        })
+        .finally(() => {
+          if (
+            pendingIdentitiesRef.current.get(job.identity) === job.scopeEpoch
+          ) {
+            pendingIdentitiesRef.current.delete(job.identity);
+          }
+          if (activeReadsRef.current.scopeEpoch === job.scopeEpoch) {
+            activeReadsRef.current.count = Math.max(
+              0,
+              activeReadsRef.current.count - 1,
+            );
+            drainQueueRef.current();
+          }
+        });
+    }
+  }, [isCurrentJob, publishPreview, readPreview]);
+  drainQueueRef.current = drainQueue;
+
+  const touchCachedPreview = useCallback((identity: string) => {
+    if (!cacheOrderRef.current.has(identity)) {
+      return;
+    }
+    cacheOrderRef.current.delete(identity);
+    cacheOrderRef.current.set(identity, true);
+  }, []);
+
+  const requestPreview = useCallback(
+    (
+      resource: ProjectResource,
+      identity: string,
+      reason: PreviewRequestReason,
+    ) => {
+      if (identityByResourceIdRef.current.get(resource.id) !== identity) {
+        return;
+      }
+      const kind = projectResourceCardPreviewKind(resource);
+      if (
+        kind === 'version' ||
+        kind === 'placeholder' ||
+        (kind === 'audio' && reason !== 'play')
+      ) {
+        return;
+      }
+      const current = previewsRef.current.get(identity);
+      if (current?.status === 'loaded') {
+        touchCachedPreview(identity);
+        return;
+      }
+      if (current?.status === 'failed') {
+        if (reason === 'visible' || !current.retryable) {
+          touchCachedPreview(identity);
+          return;
+        }
+      }
+      if (
+        current?.status === 'loading' ||
+        pendingIdentitiesRef.current.get(identity) === scopeEpochRef.current
+      ) {
+        return;
+      }
+      const queuedJob =
+        queuedIdentitiesRef.current.get(identity) === scopeEpochRef.current
+          ? queueRef.current.find((job) => job.identity === identity)
+          : undefined;
+      if (queuedJob) {
+        if (
+          previewRequestPriority[reason] >
+          previewRequestPriority[queuedJob.reason]
+        ) {
+          queuedJob.reason = reason;
+        }
+        return;
+      }
+      const visibleQueueLimit =
+        PROJECT_RESOURCE_CARD_PREVIEW_QUEUE_LIMIT -
+        PROJECT_RESOURCE_CARD_PREVIEW_ACTIVE_QUEUE_RESERVE;
+      if (
+        reason === 'visible' &&
+        queueRef.current.length >= visibleQueueLimit
+      ) {
+        return;
+      }
+      if (
+        queueRef.current.length >= PROJECT_RESOURCE_CARD_PREVIEW_QUEUE_LIMIT
+      ) {
+        let replaceIndex = -1;
+        for (let index = queueRef.current.length - 1; index >= 0; index -= 1) {
+          if (queueRef.current[index]?.reason === 'visible') {
+            replaceIndex = index;
+            break;
+          }
+        }
+        if (reason === 'visible' || replaceIndex < 0) {
+          return;
+        }
+        const [replacedJob] = queueRef.current.splice(replaceIndex, 1);
+        if (replacedJob) {
+          queuedIdentitiesRef.current.delete(replacedJob.identity);
+        }
+      }
+      cacheOrderRef.current.delete(identity);
+      queuedIdentitiesRef.current.set(identity, scopeEpochRef.current);
+      queueRef.current.push({
+        scopeKey: scopeKeyRef.current,
+        scopeId: scopeIdRef.current,
+        scopeEpoch: scopeEpochRef.current,
+        identity,
+        resource,
+        reason,
+      });
+      drainQueueRef.current();
+    },
+    [touchCachedPreview],
+  );
+
+  const observePreview = useCallback(
+    (element: HTMLElement, resource: ProjectResource, identity: string) => {
+      const binding = { resource, identity };
+      observedCardsRef.current.set(element, binding);
+      observerRef.current?.observe(element);
+      return () => {
+        observerRef.current?.unobserve(element);
+        if (observedCardsRef.current.get(element) === binding) {
+          observedCardsRef.current.delete(element);
+        }
+      };
+    },
+    [],
+  );
+
+  const failPreview = useCallback(
+    (identity: string, error: string, retryable = false) => {
+      if (!validIdentitiesRef.current.has(identity)) {
+        return;
+      }
+      publishPreview(identity, { status: 'failed', error, retryable });
+    },
+    [publishPreview],
+  );
+
+  const protectPreview = useCallback((identity: string | null) => {
+    protectedIdentityRef.current = identity;
+  }, []);
+
+  useLayoutEffect(() => {
+    if (scopeInitializedRef.current) {
+      const previousScopeId = scopeIdRef.current;
+      scopeIdRef.current = createProjectResourcePreviewScopeId();
+      cancelLocalProjectResourcePreviewScope(previousScopeId);
+    } else {
+      scopeInitializedRef.current = true;
+    }
+    scopeEpochRef.current += 1;
+    activeReadsRef.current = {
+      scopeEpoch: scopeEpochRef.current,
+      count: 0,
+    };
+    queueRef.current = [];
+    queuedIdentitiesRef.current.clear();
+    pendingIdentitiesRef.current.clear();
+    disposeAllCachedPreviews();
+    cacheOrderRef.current.clear();
+    protectedIdentityRef.current = null;
+    previewsRef.current = new Map();
+    setPreviews(new Map());
+  }, [disposeAllCachedPreviews, scopeKey]);
+
+  useEffect(() => {
+    const validIdentities = new Set(identityByResourceId.values());
+    const current = previewsRef.current;
+    const next = new Map(
+      Array.from(current).filter(([identity]) => validIdentities.has(identity)),
+    );
+    for (const identity of Array.from(cacheOrderRef.current.keys())) {
+      if (!validIdentitiesRef.current.has(identity)) {
+        cacheOrderRef.current.delete(identity);
+        disposeCachedPreview(identity);
+      }
+    }
+    if (next.size !== current.size) {
+      previewsRef.current = next;
+      setPreviews(next);
+    }
+  }, [disposeCachedPreview, identityByResourceId]);
+
+  useEffect(
+    () => () => {
+      cancelLocalProjectResourcePreviewScope(scopeIdRef.current);
+      scopeEpochRef.current += 1;
+      queueRef.current = [];
+      queuedIdentitiesRef.current.clear();
+      pendingIdentitiesRef.current.clear();
+      activeReadsRef.current = {
+        scopeEpoch: scopeEpochRef.current,
+        count: 0,
+      };
+      disposeAllCachedPreviews();
+    },
+    [disposeAllCachedPreviews],
+  );
+
+  useEffect(() => {
+    const IntersectionObserverClass = window.IntersectionObserver;
+    if (!IntersectionObserverClass) {
+      return undefined;
+    }
+    const observer = new IntersectionObserverClass(
+      (entries) => {
+        for (const entry of entries) {
+          if (!entry.isIntersecting) {
+            continue;
+          }
+          const binding = observedCardsRef.current.get(
+            entry.target as HTMLElement,
+          );
+          if (binding) {
+            requestPreview(binding.resource, binding.identity, 'visible');
+          }
+        }
+      },
+      {
+        root: input.canvasRef.current,
+        rootMargin: '160px',
+      },
+    );
+    observerRef.current = observer;
+    for (const element of observedCardsRef.current.keys()) {
+      observer.observe(element);
+    }
+    return () => {
+      observer.disconnect();
+      if (observerRef.current === observer) {
+        observerRef.current = null;
+      }
+    };
+  }, [input.canvasRef, requestPreview, scopeKey]);
+
+  return {
+    identityByResourceId,
+    previews,
+    idlePreview: IDLE_PROJECT_RESOURCE_CARD_PREVIEW,
+    observePreview,
+    requestPreview,
+    failPreview,
+    protectPreview,
+  };
+}
diff --git a/apps/ai-game-creator-shell/src/view/project-development/useProjectResourceSectionHeights.ts b/apps/ai-game-creator-shell/src/view/project-development/useProjectResourceSectionHeights.ts
new file mode 100644
index 000000000..43d94bec3
--- /dev/null
+++ b/apps/ai-game-creator-shell/src/view/project-development/useProjectResourceSectionHeights.ts
@@ -0,0 +1,239 @@
+import {
+  type RefObject,
+  useCallback,
+  useLayoutEffect,
+  useMemo,
+  useState,
+} from 'react';
+
+import type {
+  ProjectResourceCanvasLayoutMode,
+  ProjectResourceCanvasSection,
+} from '../../../../../packages/shared/src/contracts/gameCreationApp';
+import {
+  clampProjectResourceSectionHeight,
+  clampProjectResourceSectionZoom,
+  defaultProjectResourceSectionHeight,
+  type ProjectResourceSectionHeightAction,
+  projectResourceSectionHeightBounds,
+  projectResourceSectionHeightKey,
+  type ProjectResourceSectionZoomAction,
+  RESOURCE_SECTION_ZOOM_DEFAULT,
+  RESOURCE_SECTION_ZOOM_MAX,
+  RESOURCE_SECTION_ZOOM_MIN,
+  updateProjectResourceSectionHeight,
+  updateProjectResourceSectionZoom,
+} from './resourceSectionHeightModel';
+
+const RESOURCE_LAYOUT_MODES: readonly ProjectResourceCanvasLayoutMode[] = [
+  'dependency',
+  'type',
+];
+const RESOURCE_SECTIONS: readonly ProjectResourceCanvasSection[] = [
+  'document',
+  'version',
+  'art',
+  'audio',
+];
+
+export type ProjectResourceSectionHeightState = {
+  height: number;
+  min: number;
+  max: number;
+  defaultHeight: number;
+  atMin: boolean;
+  atMax: boolean;
+  atDefault: boolean;
+  zoom: number;
+  atMinZoom: boolean;
+  atMaxZoom: boolean;
+  atDefaultZoom: boolean;
+};
+
+export function useProjectResourceSectionHeights(input: {
+  projectId: string;
+  mode: ProjectResourceCanvasLayoutMode;
+  canvasRef: RefObject<HTMLDivElement | null>;
+  enabled: boolean;
+}) {
+  const { canvasRef, enabled, mode, projectId } = input;
+  const [bounds, setBounds] = useState(() =>
+    projectResourceSectionHeightBounds(0),
+  );
+  const [sessionHeights, setSessionHeights] = useState<Map<string, number>>(
+    () => new Map(),
+  );
+  const [sessionZooms, setSessionZooms] = useState<Map<string, number>>(
+    () => new Map(),
+  );
+
+  useLayoutEffect(() => {
+    if (!enabled) {
+      return undefined;
+    }
+    let frameId: number | null = null;
+    const measure = () => {
+      frameId = null;
+      const canvasHeight = canvasRef.current?.clientHeight ?? 0;
+      if (canvasHeight <= 0) {
+        return;
+      }
+      const nextBounds = projectResourceSectionHeightBounds(canvasHeight);
+      setBounds((current) =>
+        current.min === nextBounds.min && current.max === nextBounds.max
+          ? current
+          : nextBounds,
+      );
+      setSessionHeights((current) => {
+        let next: Map<string, number> | null = null;
+        for (const layoutMode of RESOURCE_LAYOUT_MODES) {
+          for (const section of RESOURCE_SECTIONS) {
+            const key = projectResourceSectionHeightKey({
+              projectId,
+              mode: layoutMode,
+              section,
+            });
+            const height = current.get(key);
+            if (height === undefined) {
+              continue;
+            }
+            const clamped = clampProjectResourceSectionHeight(
+              height,
+              nextBounds,
+            );
+            if (clamped !== height) {
+              next ??= new Map(current);
+              next.set(key, clamped);
+            }
+          }
+        }
+        return next ?? current;
+      });
+    };
+    const scheduleMeasure = () => {
+      if (frameId !== null) {
+        return;
+      }
+      frameId = window.requestAnimationFrame(measure);
+    };
+    measure();
+    window.addEventListener('resize', scheduleMeasure);
+    return () => {
+      if (frameId !== null) {
+        window.cancelAnimationFrame(frameId);
+      }
+      window.removeEventListener('resize', scheduleMeasure);
+    };
+  }, [canvasRef, enabled, projectId]);
+
+  const sectionStates = useMemo(() => {
+    const defaultHeight = defaultProjectResourceSectionHeight(bounds);
+    return new Map(
+      RESOURCE_SECTIONS.map((section) => {
+        const key = projectResourceSectionHeightKey({
+          projectId,
+          mode,
+          section,
+        });
+        const height = clampProjectResourceSectionHeight(
+          sessionHeights.get(key) ?? defaultHeight,
+          bounds,
+        );
+        const zoom = clampProjectResourceSectionZoom(
+          sessionZooms.get(key) ?? RESOURCE_SECTION_ZOOM_DEFAULT,
+        );
+        return [
+          section,
+          {
+            height,
+            min: bounds.min,
+            max: bounds.max,
+            defaultHeight,
+            atMin: height === bounds.min,
+            atMax: height === bounds.max,
+            atDefault: height === defaultHeight,
+            zoom,
+            atMinZoom: zoom === RESOURCE_SECTION_ZOOM_MIN,
+            atMaxZoom: zoom === RESOURCE_SECTION_ZOOM_MAX,
+            atDefaultZoom: zoom === RESOURCE_SECTION_ZOOM_DEFAULT,
+          } satisfies ProjectResourceSectionHeightState,
+        ] as const;
+      }),
+    );
+  }, [bounds, mode, projectId, sessionHeights, sessionZooms]);
+
+  const updateSectionHeight = useCallback(
+    (
+      section: ProjectResourceCanvasSection,
+      action: ProjectResourceSectionHeightAction,
+    ) => {
+      const key = projectResourceSectionHeightKey({ projectId, mode, section });
+      setSessionHeights((current) => {
+        const currentHeight = clampProjectResourceSectionHeight(
+          current.get(key) ?? defaultProjectResourceSectionHeight(bounds),
+          bounds,
+        );
+        const nextHeight = updateProjectResourceSectionHeight(
+          currentHeight,
+          action,
+          bounds,
+        );
+        if (nextHeight === currentHeight) {
+          return current;
+        }
+        const next = new Map(current);
+        next.set(key, nextHeight);
+        return next;
+      });
+    },
+    [bounds, mode, projectId],
+  );
+
+  const setSectionZoom = useCallback(
+    (section: ProjectResourceCanvasSection, zoom: number) => {
+      const key = projectResourceSectionHeightKey({ projectId, mode, section });
+      const nextZoom = clampProjectResourceSectionZoom(zoom);
+      setSessionZooms((current) => {
+        const currentZoom = clampProjectResourceSectionZoom(
+          current.get(key) ?? RESOURCE_SECTION_ZOOM_DEFAULT,
+        );
+        if (nextZoom === currentZoom) {
+          return current;
+        }
+        const next = new Map(current);
+        next.set(key, nextZoom);
+        return next;
+      });
+    },
+    [mode, projectId],
+  );
+
+  const updateSectionZoom = useCallback(
+    (
+      section: ProjectResourceCanvasSection,
+      action: ProjectResourceSectionZoomAction,
+    ) => {
+      const key = projectResourceSectionHeightKey({ projectId, mode, section });
+      setSessionZooms((current) => {
+        const currentZoom = clampProjectResourceSectionZoom(
+          current.get(key) ?? RESOURCE_SECTION_ZOOM_DEFAULT,
+        );
+        const nextZoom = updateProjectResourceSectionZoom(currentZoom, action);
+        if (nextZoom === currentZoom) {
+          return current;
+        }
+        const next = new Map(current);
+        next.set(key, nextZoom);
+        return next;
+      });
+    },
+    [mode, projectId],
+  );
+
+  return {
+    sectionStates,
+    setSectionZoom,
+    updateSectionHeight,
+    updateSectionZoom,
+  };
+}
diff --git a/apps/ai-game-creator-shell/tests/ResourceDependencyOverlay.test.ts b/apps/ai-game-creator-shell/tests/ResourceDependencyOverlay.test.ts
index 8a0edb6ce..17e0c10e9 100644
--- a/apps/ai-game-creator-shell/tests/ResourceDependencyOverlay.test.ts
+++ b/apps/ai-game-creator-shell/tests/ResourceDependencyOverlay.test.ts
@@ -2,12 +2,22 @@
 import { readFileSync } from 'node:fs';
 import { resolve } from 'node:path';
 
-import { act, render, screen, waitFor } from '@testing-library/react';
+import {
+  act,
+  fireEvent,
+  render,
+  screen,
+  waitFor,
+} from '@testing-library/react';
 import React from 'react';
 import { describe, expect, it, vi } from 'vitest';
 
 import type { ProjectResourceCanvasPosition } from '../../../packages/shared/src/contracts/gameCreationApp';
 import type { ProjectResourceCanvasSection } from '../../../packages/shared/src/contracts/gameCreationApp';
+import {
+  RESOURCE_CANVAS_CARD_WIDTH,
+  RESOURCE_CANVAS_DEPENDENCY_COLUMN_GAP,
+} from '../src/view/project-development/resourceCanvasLayoutModel';
 import {
   normalizeProjectResourceGraph,
   type ProjectResourceGraph,
@@ -123,19 +133,30 @@ function OverlayHarness({
   );
   return React.createElement(
     'div',
-    null,
+    { 'data-testid': 'resource-dependency-overlay' },
     ...sections.map((section) =>
-      React.createElement('div', {
-        key: section,
-        'data-resource-section-plane': section,
-      }),
+      React.createElement(
+        'div',
+        {
+          key: section,
+          'data-resource-section-scroll': section,
+        },
+        React.createElement(
+          'div',
+          {
+            'data-resource-section-plane': section,
+            'data-resource-section-scale': '1',
+          },
+          React.createElement(ResourceDependencyOverlay, {
+            ref: section === sections[0] ? overlayRef : undefined,
+            graph,
+            positions,
+            section,
+            visibleResourceIds,
+          }),
+        ),
+      ),
     ),
-    React.createElement(ResourceDependencyOverlay, {
-      ref: overlayRef,
-      graph,
-      positions,
-      visibleResourceIds,
-    }),
   );
 }
 
@@ -154,7 +175,7 @@ function overlayView(
 }
 
 describe('ResourceDependencyOverlay', () => {
-  it('renders exact references and one aggregated task trunk without cartesian paths', async () => {
+  it('renders exact references without visualizing aggregated task flows', async () => {
     const graph = graphFixture();
     const positions = Array.from(graph.resourceIds).map((resourceId, index) =>
       position(resourceId, (index % 3) * 220, Math.floor(index / 3) * 120),
@@ -167,27 +188,11 @@ describe('ResourceDependencyOverlay', () => {
         overlay.querySelectorAll('[data-edge-kind="asset-reference"]'),
       ).toHaveLength(2),
     );
-    const taskFlow = overlay.querySelector('[data-edge-kind="task-flow"]');
-    expect(taskFlow).not.toBeNull();
-    const taskPaths = Array.from(
-      taskFlow?.querySelectorAll<SVGPathElement>('path') ?? [],
-    );
-    expect(taskPaths).toHaveLength(7);
-    expect(
-      taskPaths.every((path) => path.getAttribute('d')?.includes(' C ')),
-    ).toBe(true);
-    expect(
-      taskPaths.some((path) => path.getAttribute('d')?.includes(' L ')),
-    ).toBe(false);
-    expect(taskFlow?.querySelectorAll('path[marker-end]')).toHaveLength(3);
-    expect(
-      overlay
-        .querySelector('marker[id$="-task-flow-arrow"]')
-        ?.getAttribute('markerUnits'),
-    ).toBe('userSpaceOnUse');
+    expect(overlay.querySelector('[data-edge-kind="task-flow"]')).toBeNull();
+    expect(overlay.querySelector('marker[id$="-task-flow-arrow"]')).toBeNull();
   });
 
-  it('omits cross-section task endpoints and keeps same-section task flow groups', async () => {
+  it('omits task flows and cross-section exact references', async () => {
     const graph = graphFixture();
     const positions = [
       position('source:one', 0, 0, 'document'),
@@ -206,21 +211,224 @@ describe('ResourceDependencyOverlay', () => {
     );
 
     const overlay = await screen.findByTestId('resource-dependency-overlay');
-    const taskFlow = await waitFor(() => {
-      const flows = overlay.querySelectorAll('[data-edge-kind="task-flow"]');
-      expect(flows).toHaveLength(1);
-      return flows.item(0);
-    });
-    expect(taskFlow.getAttribute('data-resource-section')).toBe('art');
-    expect(taskFlow.querySelectorAll('path')).toHaveLength(4);
-    expect(
-      Array.from(taskFlow.querySelectorAll('[data-resource-id]')).map((node) =>
-        node.getAttribute('data-resource-id'),
-      ),
-    ).toEqual(['source:two', 'target:one', 'target:two']);
+    await waitFor(() =>
+      expect(
+        overlay.querySelectorAll('[data-edge-kind="task-flow"]'),
+      ).toHaveLength(0),
+    );
     expect(
       overlay.querySelectorAll('[data-edge-kind="asset-reference"]'),
-    ).toHaveLength(1);
+    ).toHaveLength(0);
+  });
+
+  it('owns each relationship in exactly one section plane and isolates section scrolling', async () => {
+    const resourceIds = [
+      'art:source',
+      'art:target',
+      'version:source',
+      'version:target',
+    ];
+    const artReferenceId = 'reference:art';
+    const versionReferenceId = 'reference:version';
+    const graph = normalizeProjectResourceGraph({
+      resourceIds,
+      referenceEdges: [
+        {
+          id: artReferenceId,
+          kind: 'asset-reference',
+          sourceResourceId: 'art:source',
+          targetResourceId: 'art:target',
+          cyclic: false,
+        },
+        {
+          id: versionReferenceId,
+          kind: 'asset-reference',
+          sourceResourceId: 'version:source',
+          targetResourceId: 'version:target',
+          cyclic: false,
+        },
+      ],
+      taskFlows: [],
+      connectionIndex: resourceIds.map((resourceId) => ({
+        resourceId,
+        upstreamReferenceResourceIds: resourceId.endsWith(':target')
+          ? [resourceId.replace(':target', ':source')]
+          : [],
+        downstreamReferenceResourceIds: resourceId.endsWith(':source')
+          ? [resourceId.replace(':source', ':target')]
+          : [],
+        referenceEdgeIds: [
+          resourceId.startsWith('art:') ? artReferenceId : versionReferenceId,
+        ],
+        taskFlowIds: [],
+      })),
+      producerAssignments: [],
+      dependencyDepths: [],
+      unresolvedReferenceResourceIds: [],
+      cyclicResourceIds: [],
+      cyclicTaskIds: [],
+      producerMappingTruncated: false,
+    });
+    const positions = [
+      position('art:source', 0, 0, 'art'),
+      position('art:target', 240, 0, 'art'),
+      position('version:source', 0, 0, 'version'),
+      position('version:target', 240, 0, 'version'),
+    ];
+    const originalGetBoundingClientRect =
+      HTMLElement.prototype.getBoundingClientRect;
+    const getBoundingClientRect = vi
+      .spyOn(HTMLElement.prototype, 'getBoundingClientRect')
+      .mockImplementation(function getSectionRect(this: HTMLElement) {
+        if (this.hasAttribute('data-resource-section-scroll')) {
+          return {
+            x: 0,
+            y: 0,
+            left: 0,
+            top: 0,
+            right: 600,
+            bottom: 200,
+            width: 600,
+            height: 200,
+            toJSON: () => ({}),
+          } as DOMRect;
+        }
+        return originalGetBoundingClientRect.call(this);
+      });
+    try {
+      const rendered = render(
+        overlayView(graph, positions, new Set(resourceIds)),
+      );
+      const artOverlay = await screen.findByTestId(
+        'resource-dependency-overlay-art',
+      );
+      const versionOverlay = await screen.findByTestId(
+        'resource-dependency-overlay-version',
+      );
+      await waitFor(() => {
+        expect(
+          artOverlay.querySelector(`[data-edge-id='${artReferenceId}']`),
+        ).not.toBeNull();
+        expect(
+          versionOverlay.querySelector(
+            `[data-edge-id='${versionReferenceId}']`,
+          ),
+        ).not.toBeNull();
+      });
+      expect(
+        artOverlay.querySelector(`[data-edge-id='${versionReferenceId}']`),
+      ).toBeNull();
+      expect(
+        versionOverlay.querySelector(`[data-edge-id='${artReferenceId}']`),
+      ).toBeNull();
+      const versionPathBeforeScroll = versionOverlay
+        .querySelector(`[data-edge-id='${versionReferenceId}']`)
+        ?.getAttribute('d');
+
+      const artViewport = rendered.container.querySelector<HTMLElement>(
+        '[data-resource-section-scroll="art"]',
+      );
+      if (!artViewport) {
+        throw new Error('missing art viewport');
+      }
+      artViewport.scrollTop = 80;
+      fireEvent.scroll(artViewport);
+      await waitFor(() =>
+        expect(artOverlay.getAttribute('data-logical-viewport')).toBe(
+          '0,80,600,200',
+        ),
+      );
+      expect(versionOverlay.getAttribute('data-logical-viewport')).toBe(
+        '0,0,600,200',
+      );
+      expect(
+        versionOverlay
+          .querySelector(`[data-edge-id='${versionReferenceId}']`)
+          ?.getAttribute('d'),
+      ).toBe(versionPathBeforeScroll);
+    } finally {
+      getBoundingClientRect.mockRestore();
+    }
+  });
+
+  it('assigns stable separate ports to same-section reference edges', async () => {
+    const resourceIds = ['source', 'target:upper', 'target:lower'];
+    const graph = normalizeProjectResourceGraph({
+      resourceIds,
+      referenceEdges: [
+        {
+          id: 'reference:upper',
+          kind: 'asset-reference',
+          sourceResourceId: 'source',
+          targetResourceId: 'target:upper',
+          cyclic: false,
+        },
+        {
+          id: 'reference:lower',
+          kind: 'asset-reference',
+          sourceResourceId: 'source',
+          targetResourceId: 'target:lower',
+          cyclic: false,
+        },
+      ],
+      taskFlows: [],
+      connectionIndex: resourceIds.map((resourceId) => ({
+        resourceId,
+        upstreamReferenceResourceIds: resourceId === 'source' ? [] : ['source'],
+        downstreamReferenceResourceIds:
+          resourceId === 'source' ? ['target:upper', 'target:lower'] : [],
+        referenceEdgeIds:
+          resourceId === 'source'
+            ? ['reference:upper', 'reference:lower']
+            : [
+                resourceId === 'target:upper'
+                  ? 'reference:upper'
+                  : 'reference:lower',
+              ],
+        taskFlowIds: [],
+      })),
+      producerAssignments: [],
+      dependencyDepths: [],
+      unresolvedReferenceResourceIds: [],
+      cyclicResourceIds: [],
+      cyclicTaskIds: [],
+      producerMappingTruncated: false,
+    });
+    const positions = [
+      position('source', 0, 72),
+      position('target:upper', 240, 0),
+      position('target:lower', 240, 144),
+    ];
+    const view = render(
+      overlayView(graph, positions, new Set(graph.resourceIds)),
+    );
+    const overlay = await screen.findByTestId('resource-dependency-overlay');
+    const paths = await waitFor(() => {
+      const result = Array.from(
+        overlay.querySelectorAll<SVGPathElement>(
+          '[data-edge-kind="asset-reference"]',
+        ),
+      );
+      expect(result).toHaveLength(2);
+      return result;
+    });
+    expect(
+      paths.map((path) => path.getAttribute('data-source-port-offset')),
+    ).toEqual(['7', '-7']);
+    expect(new Set(paths.map((path) => path.getAttribute('d'))).size).toBe(2);
+
+    const firstPaths = paths.map((path) => path.getAttribute('d'));
+    view.rerender(overlayView(graph, positions, new Set(graph.resourceIds)));
+    await waitFor(() =>
+      expect(
+        Array.from(
+          overlay.querySelectorAll<SVGPathElement>(
+            '[data-edge-kind="asset-reference"]',
+          ),
+          (path) => path.getAttribute('d'),
+        ),
+      ).toEqual(firstPaths),
+    );
   });
 
   it('filters hidden endpoints and updates path geometry when positions change', async () => {
@@ -246,6 +454,16 @@ describe('ResourceDependencyOverlay', () => {
       expect(path).not.toBeNull();
       return path?.getAttribute('d');
     });
+    const horizontalReference = overlay.querySelector<SVGPathElement>(
+      '[data-edge-kind="asset-reference"]',
+    );
+    expect(horizontalReference?.getAttribute('data-route-axis')).toBe(
+      'horizontal',
+    );
+    expect(horizontalReference?.getAttribute('marker-end')).toContain(
+      'asset-reference-arrow',
+    );
+    expect(firstPath).toContain('230 64');
 
     act(() =>
       overlayRef.current?.updateDragPreview({
@@ -270,7 +488,168 @@ describe('ResourceDependencyOverlay', () => {
     );
   });
 
-  it('keeps the section origin when updating a dragged path', async () => {
+  it('keeps reference endpoints in the same logical plane that owns scaling', async () => {
+    const graph = graphFixture();
+    render(
+      React.createElement(
+        'div',
+        { 'data-testid': 'resource-dependency-overlay' },
+        React.createElement(
+          'div',
+          { 'data-resource-section-scroll': 'art' },
+          React.createElement(
+            'div',
+            {
+              'data-resource-section-plane': 'art',
+              'data-resource-section-scale': '1.5',
+            },
+            React.createElement(ResourceDependencyOverlay, {
+              graph,
+              positions: [
+                position('source:one', 0, 0),
+                position(
+                  'target:one',
+                  RESOURCE_CANVAS_CARD_WIDTH +
+                    RESOURCE_CANVAS_DEPENDENCY_COLUMN_GAP,
+                  0,
+                ),
+              ],
+              section: 'art',
+              visibleResourceIds: new Set(['source:one', 'target:one']),
+              geometryRevision: '340@1.5',
+            }),
+          ),
+        ),
+      ),
+    );
+
+    const overlay = await screen.findByTestId('resource-dependency-overlay');
+    const reference = await waitFor(() => {
+      const path = overlay.querySelector<SVGPathElement>(
+        '[data-edge-kind="asset-reference"]',
+      );
+      expect(path).not.toBeNull();
+      return path as SVGPathElement;
+    });
+    expect(reference.getAttribute('data-route-axis')).toBe('horizontal');
+    expect(reference.getAttribute('d')).toBe('M 180 64 L 218 64');
+    expect(reference.closest('[data-resource-section-scale="1.5"]')).not.toBe(
+      null,
+    );
+  });
+
+  it('keeps a relationship mounted while scrolling partial cards and marks an offscreen continuation', async () => {
+    const graph = graphFixture();
+    const originalGetBoundingClientRect =
+      HTMLElement.prototype.getBoundingClientRect;
+    const getBoundingClientRect = vi
+      .spyOn(HTMLElement.prototype, 'getBoundingClientRect')
+      .mockImplementation(function getSectionRect(this: HTMLElement) {
+        const rect = (
+          left: number,
+          top: number,
+          width: number,
+          height: number,
+        ) =>
+          ({
+            x: left,
+            y: top,
+            left,
+            top,
+            right: left + width,
+            bottom: top + height,
+            width,
+            height,
+            toJSON: () => ({}),
+          }) as DOMRect;
+        if (this.classList.contains('test-resource-content')) {
+          return rect(0, 0, 600, 600);
+        }
+        if (this.dataset.resourceSectionScroll === 'art') {
+          return rect(0, 100, 600, 240);
+        }
+        if (this.dataset.resourceSectionPlane === 'art') {
+          const viewport = this.closest<HTMLElement>(
+            '[data-resource-section-scroll="art"]',
+          );
+          return rect(0, 100 - (viewport?.scrollTop ?? 0), 600, 600);
+        }
+        return originalGetBoundingClientRect.call(this);
+      });
+    try {
+      const rendered = render(
+        React.createElement(
+          'div',
+          {
+            className: 'test-resource-content',
+            'data-testid': 'resource-dependency-overlay',
+          },
+          React.createElement(
+            'div',
+            { 'data-resource-section-scroll': 'art' },
+            React.createElement(
+              'div',
+              {
+                'data-resource-section-plane': 'art',
+                'data-resource-section-scale': '1',
+              },
+              React.createElement(ResourceDependencyOverlay, {
+                graph,
+                positions: [
+                  position('source:one', 0, 0),
+                  position('target:one', 0, 320),
+                ],
+                section: 'art',
+                visibleResourceIds: new Set(['source:one', 'target:one']),
+              }),
+            ),
+          ),
+        ),
+      );
+      const overlay = await screen.findByTestId('resource-dependency-overlay');
+      const selector = '[data-edge-kind="asset-reference"]';
+      const reference = await waitFor(() => {
+        const path = overlay.querySelector<SVGPathElement>(selector);
+        expect(path).not.toBeNull();
+        expect(path?.getAttribute('data-route-axis')).toBe('vertical');
+        return path as SVGPathElement;
+      });
+      expect(reference.getAttribute('marker-end')).toContain(
+        'asset-reference-arrow',
+      );
+      expect(reference.getAttribute('data-edge-continuation')).toBe('outgoing');
+      expect(reference.getAttribute('data-offscreen-target')).toBe('true');
+
+      const viewport = rendered.container.querySelector<HTMLElement>(
+        '[data-resource-section-scroll="art"]',
+      );
+      if (!viewport) {
+        throw new Error('missing art viewport');
+      }
+      viewport.scrollTop = 80;
+      fireEvent.scroll(viewport);
+      await waitFor(() =>
+        expect(overlay.querySelector(selector)).toBe(reference),
+      );
+      viewport.scrollTop = 180;
+      fireEvent.scroll(viewport);
+      await waitFor(() => {
+        expect(overlay.querySelector(selector)).toBe(reference);
+        expect(reference.getAttribute('data-edge-continuation')).toBe(
+          'incoming',
+        );
+      });
+      viewport.scrollTop = 500;
+      fireEvent.scroll(viewport);
+      await waitFor(() =>
+        expect(Boolean(overlay.querySelector(selector))).toBe(false),
+      );
+    } finally {
+      getBoundingClientRect.mockRestore();
+    }
+  });
+
+  it('keeps drag previews in plane-local coordinates', async () => {
     const getBoundingClientRect = vi
       .spyOn(HTMLElement.prototype, 'getBoundingClientRect')
       .mockImplementation(function () {
@@ -300,7 +679,7 @@ describe('ResourceDependencyOverlay', () => {
       const selector = '[data-edge-kind="asset-reference"]';
       await waitFor(() =>
         expect(overlay.querySelector(selector)?.getAttribute('d')).toContain(
-          'M 320 126',
+          'M 180 64 L 230 64',
         ),
       );
 
@@ -312,9 +691,12 @@ describe('ResourceDependencyOverlay', () => {
         }),
       );
       await waitFor(() =>
-        expect(overlay.querySelector(selector)?.getAttribute('d')).toContain(
-          'M 400 166',
-        ),
+        expect(
+          overlay.querySelector(selector)?.getAttribute('data-route-axis'),
+        ).toBe('vertical'),
+      );
+      expect(overlay.querySelector(selector)?.getAttribute('d')).toContain(
+        'M 170 40',
       );
     } finally {
       getBoundingClientRect.mockRestore();
@@ -344,7 +726,7 @@ describe('ResourceDependencyOverlay', () => {
     expect(selfLoop.getAttribute('data-cyclic')).toBe('true');
     expect(selfLoop.getAttribute('data-self-loop')).toBe('true');
     expect(selfLoop.getAttribute('d')).toBe(
-      'M 204 96 C 260 96, 260 60, 204 60',
+      'M 214 114 C 270 114, 270 78, 214 78',
     );
     expect(selfLoop.getAttribute('marker-end')).toContain(
       'asset-reference-arrow',
@@ -359,7 +741,7 @@ describe('ResourceDependencyOverlay', () => {
     );
     await waitFor(() =>
       expect(selfLoop.getAttribute('d')).toBe(
-        'M 264 112 C 320 112, 320 76, 264 76',
+        'M 274 130 C 330 130, 330 94, 274 94',
       ),
     );
   });
@@ -372,41 +754,41 @@ describe('ResourceDependencyOverlay', () => {
     render(overlayView(graph, positions, new Set(graph.resourceIds)));
     const overlay = await screen.findByTestId('resource-dependency-overlay');
     await waitFor(() =>
-      expect(overlay.querySelectorAll('[data-edge-kind]')).toHaveLength(3),
+      expect(overlay.querySelectorAll('[data-edge-kind]')).toHaveLength(2),
     );
     expect(overlay.querySelector('.is-highlighted')).toBeNull();
     expect(overlay.querySelector('.is-dimmed')).toBeNull();
   });
 
-  it('updates only adjacent paths while dragging inside a 4096-resource topology', async () => {
+  it('keeps 4096-resource exact-reference output bounded to positioned members', async () => {
     const resourceIds = Array.from(
       { length: 4096 },
       (_, index) => `resource:${index}`,
     );
-    const taskFlows = resourceIds.slice(1).map((resourceId, index) => ({
-      id: `flow:${index}:${index + 1}`,
-      kind: 'task-flow' as const,
-      sourceTaskId: `task:${index}`,
-      targetTaskId: `task:${index + 1}`,
-      sourceResourceIds: [`resource:${index}`],
-      targetResourceIds: [resourceId],
+    const referenceEdges = resourceIds.slice(1).map((resourceId, index) => ({
+      id: `reference:${index}:${index + 1}`,
+      kind: 'asset-reference' as const,
+      sourceResourceId: `resource:${index}`,
+      targetResourceId: resourceId,
       cyclic: false,
     }));
     const graph = normalizeProjectResourceGraph({
       resourceIds,
-      referenceEdges: [],
-      taskFlows,
+      referenceEdges,
+      taskFlows: [],
       connectionIndex: resourceIds.map((resourceId, index) => ({
         resourceId,
-        upstreamReferenceResourceIds: [],
-        downstreamReferenceResourceIds: [],
-        referenceEdgeIds: [],
-        taskFlowIds: [
-          ...(index > 0 ? [`flow:${index - 1}:${index}`] : []),
+        upstreamReferenceResourceIds:
+          index > 0 ? [`resource:${index - 1}`] : [],
+        downstreamReferenceResourceIds:
+          index < resourceIds.length - 1 ? [`resource:${index + 1}`] : [],
+        referenceEdgeIds: [
+          ...(index > 0 ? [`reference:${index - 1}:${index}`] : []),
           ...(index < resourceIds.length - 1
-            ? [`flow:${index}:${index + 1}`]
+            ? [`reference:${index}:${index + 1}`]
             : []),
         ],
+        taskFlowIds: [],
       })),
       producerAssignments: [],
       dependencyDepths: [],
@@ -426,25 +808,22 @@ describe('ResourceDependencyOverlay', () => {
     const overlay = await screen.findByTestId('resource-dependency-overlay');
     await waitFor(() =>
       expect(
-        overlay.querySelectorAll('[data-edge-kind="task-flow"]'),
+        overlay.querySelectorAll('[data-edge-kind="asset-reference"]'),
+      ).toHaveLength(2),
+    );
+    expect(overlay.querySelector('[data-edge-kind="task-flow"]')).toBeNull();
+    act(() =>
+      overlayRef.current?.updateDragPreview({
+        resourceId: 'resource:2048',
+        x: 260,
+        y: 32,
+      }),
+    );
+    await waitFor(() =>
+      expect(
+        overlay.querySelectorAll('[data-edge-kind="asset-reference"]'),
       ).toHaveLength(2),
     );
-    const setAttribute = vi.spyOn(SVGElement.prototype, 'setAttribute');
-    try {
-      act(() =>
-        overlayRef.current?.updateDragPreview({
-          resourceId: 'resource:2048',
-          x: 260,
-          y: 32,
-        }),
-      );
-      const geometryUpdates = setAttribute.mock.calls.filter(
-        ([name]) => name === 'd',
-      );
-      expect(geometryUpdates).toHaveLength(6);
-    } finally {
-      setAttribute.mockRestore();
-    }
   });
 
   it('disconnects layout observers when the SVG layer is destroyed', () => {
diff --git a/apps/ai-game-creator-shell/tests/appSurface/harness.ts b/apps/ai-game-creator-shell/tests/appSurface/harness.ts
index 3fd45b7a7..1dc8d110e 100644
--- a/apps/ai-game-creator-shell/tests/appSurface/harness.ts
+++ b/apps/ai-game-creator-shell/tests/appSurface/harness.ts
@@ -29,6 +29,14 @@ const originalPointerEvent = Object.getOwnPropertyDescriptor(
   window,
   'PointerEvent',
 );
+const originalIntersectionObserver = Object.getOwnPropertyDescriptor(
+  window,
+  'IntersectionObserver',
+);
+const originalResizeObserver = Object.getOwnPropertyDescriptor(
+  window,
+  'ResizeObserver',
+);
 
 class TestPointerEvent extends MouseEvent {
   readonly pointerId: number;
@@ -758,6 +766,20 @@ afterEach(() => {
   } else {
     Reflect.deleteProperty(window, 'PointerEvent');
   }
+  if (originalIntersectionObserver) {
+    Object.defineProperty(
+      window,
+      'IntersectionObserver',
+      originalIntersectionObserver,
+    );
+  } else {
+    Reflect.deleteProperty(window, 'IntersectionObserver');
+  }
+  if (originalResizeObserver) {
+    Object.defineProperty(window, 'ResizeObserver', originalResizeObserver);
+  } else {
+    Reflect.deleteProperty(window, 'ResizeObserver');
+  }
 });
 export {
   act,
diff --git a/apps/ai-game-creator-shell/tests/appSurface/home.suite.ts b/apps/ai-game-creator-shell/tests/appSurface/home.suite.ts
index 49f9220ab..dcb8fe845 100644
--- a/apps/ai-game-creator-shell/tests/appSurface/home.suite.ts
+++ b/apps/ai-game-creator-shell/tests/appSurface/home.suite.ts
@@ -1297,7 +1297,9 @@ export function registerHomeProjectCreationTests() {
       '第一行\n第二行\n第三行',
     );
     expect(
-      await screen.findByText('assets/uploads/reference.png'),
+      await screen.findByRole('button', {
+        name: '打开资源详情：美术资源 reference.png',
+      }),
     ).not.toBeNull();
     expect(invoke).toHaveBeenCalledWith('init_local_game_project', {
       projectPath: '/tmp/home-created-game',
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 9d419224a..98d06af2d 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
@@ -25,8 +25,16 @@ import {
 import {
   RESOURCE_CANVAS_CARD_WIDTH,
   RESOURCE_CANVAS_COLUMN_GAP,
+  RESOURCE_CANVAS_DEPENDENCY_COLUMN_GAP,
 } from '../../src/view/project-development/resourceCanvasLayoutModel';
+import { normalizeProjectResourceGraph } from '../../src/view/project-development/resourceDependencyGraphModel';
+import { ResourceDependencyOverlay } from '../../src/view/project-development/ResourceDependencyOverlay';
 import type { ProjectAgentResultSummary } from '../../src/view/project-development/resourceProjectionModel';
+import {
+  RESOURCE_CANVAS_VERTICAL_INSET,
+  RESOURCE_SECTION_DEFAULT_HEIGHT,
+  RESOURCE_SECTION_HEIGHT_STEP,
+} from '../../src/view/project-development/resourceSectionHeightModel';
 import {
   act,
   agentRuntimeUserInputRequest,
@@ -95,6 +103,74 @@ function resourceGraphForInputs(args?: Record<string, unknown>) {
   };
 }
 
+function installResourceCardIntersectionObserver() {
+  const instances: Array<{
+    callback: IntersectionObserverCallback;
+    observed: Set<Element>;
+    observer: IntersectionObserver;
+  }> = [];
+
+  class ResourceCardIntersectionObserver {
+    readonly root = null;
+    readonly rootMargin = '160px';
+    readonly thresholds = [0];
+    readonly observed = new Set<Element>();
+
+    constructor(readonly callback: IntersectionObserverCallback) {
+      instances.push({
+        callback,
+        observed: this.observed,
+        observer: this as unknown as IntersectionObserver,
+      });
+    }
+
+    observe(element: Element) {
+      this.observed.add(element);
+    }
+
+    unobserve(element: Element) {
+      this.observed.delete(element);
+    }
+
+    disconnect() {
+      this.observed.clear();
+    }
+
+    takeRecords() {
+      return [];
+    }
+  }
+
+  Object.defineProperty(window, 'IntersectionObserver', {
+    configurable: true,
+    value: ResourceCardIntersectionObserver,
+  });
+
+  return {
+    triggerVisible(elements?: Element[]) {
+      const instance = instances.at(-1);
+      if (!instance) {
+        throw new Error('resource card IntersectionObserver was not created');
+      }
+      const targets = elements ?? Array.from(instance.observed);
+      instance.callback(
+        targets.map(
+          (target) =>
+            ({
+              target,
+              isIntersecting: true,
+              intersectionRatio: 1,
+            }) as IntersectionObserverEntry,
+        ),
+        instance.observer,
+      );
+    },
+    observedCount() {
+      return instances.at(-1)?.observed.size ?? 0;
+    },
+  };
+}
+
 function gameChatRuntimeEvent({
   agentId = 'project-supervisor',
   taskId = agentId,
@@ -692,6 +768,786 @@ export function registerProjectWorkbenchFoundationTests() {
     expect(screen.getByRole('article', { name: /发布 Agent/ })).not.toBeNull();
   });
 
+  it('keeps four resource section heights independent across modes, projects, details, and viewport clamps', async () => {
+    function addSectionResources(
+      manifest: ReturnType<typeof createGameCreationAppManifest>,
+    ) {
+      manifest.assets = [
+        {
+          id: 'section-document',
+          kind: 'design-document',
+          mediaType: 'text/markdown',
+          localPath: 'memory/section.md',
+          source: { kind: 'generated', taskId: 'design-foundation' },
+        },
+        {
+          id: 'section-art',
+          kind: 'character',
+          mediaType: 'image/png',
+          localPath: 'assets/section.png',
+          source: { kind: 'generated', taskId: 'art-asset-plan' },
+        },
+        {
+          id: 'section-audio',
+          kind: 'background-music',
+          mediaType: 'audio/mpeg',
+          localPath: 'assets/section.mp3',
+          source: { kind: 'generated', taskId: 'audio-asset-plan' },
+        },
+      ];
+      manifest.versions = [
+        {
+          versionId: 'section-version',
+          parentVersionId: null,
+          projectRevision: 1,
+          resourceBindings: [],
+          createdReason: 'initial',
+          createdAt: 1,
+        },
+      ];
+    }
+
+    const manifestA = createGameCreationAppManifest(
+      'workbench-section-height-a',
+      '分区高度项目甲',
+    );
+    addSectionResources(manifestA);
+    const manifestB = createGameCreationAppManifest(
+      'workbench-section-height-b',
+      '分区高度项目乙',
+    );
+    addSectionResources(manifestB);
+    let layoutRevision = 0;
+    const invoke = vi.fn(
+      async (command: string, args?: Record<string, unknown>) => {
+        if (command === 'read_local_project_resource_graph') {
+          return resourceGraphForInputs(args);
+        }
+        if (command === 'read_local_project_resource_canvas_layout') {
+          return {
+            schemaVersion: 'game-creator-resource-layout.v1',
+            projectId: args?.expectedProjectId,
+            mode: args?.mode,
+            revision: layoutRevision,
+            positions: [],
+            updatedAt: layoutRevision,
+          };
+        }
+        if (command === 'update_local_project_resource_canvas_layout') {
+          layoutRevision += 1;
+          return {
+            status: 'updated',
+            layout: {
+              schemaVersion: 'game-creator-resource-layout.v1',
+              projectId: args?.expectedProjectId,
+              mode: args?.mode,
+              revision: layoutRevision,
+              positions: args?.positions,
+              updatedAt: layoutRevision,
+            },
+          };
+        }
+        throw new Error(`unexpected invoke ${command}`);
+      },
+    );
+    window.__TAURI__ = { core: { invoke } };
+
+    const viewProps = {
+      projectName: manifestA.name,
+      projectPath: '/tmp/workbench-section-height-a',
+      manifest: manifestA,
+      attachments: [],
+      recentRunStatus: null,
+      recentRunStopReason: null,
+      supervisor: React.createElement('div', null, '项目总控'),
+      onHomeOpen: vi.fn(),
+      onProjectsOpen: vi.fn(),
+    };
+    const rendered = render(
+      React.createElement(ProjectDevelopmentView, viewProps),
+    );
+    await screen.findByRole('button', { name: '缩小文档分区' });
+
+    const sectionHeight = (label: string) =>
+      screen
+        .getByRole('region', { name: label })
+        .style.getPropertyValue('--resource-section-height');
+    const sectionZoom = (label: string) =>
+      Number(
+        screen
+          .getByRole('region', { name: label })
+          .querySelector<HTMLElement>('[data-resource-section-plane]')?.dataset
+          .resourceSectionScale ?? 0,
+      );
+    expect(sectionHeight('文档')).toBe(`${RESOURCE_SECTION_DEFAULT_HEIGHT}px`);
+    expect(sectionHeight('项目版本')).toBe(
+      `${RESOURCE_SECTION_DEFAULT_HEIGHT}px`,
+    );
+    expect(sectionHeight('美术资源')).toBe(
+      `${RESOURCE_SECTION_DEFAULT_HEIGHT}px`,
+    );
+    expect(sectionHeight('音乐音效资源')).toBe(
+      `${RESOURCE_SECTION_DEFAULT_HEIGHT}px`,
+    );
+    expect(sectionZoom('文档')).toBe(1);
+    expect(sectionZoom('美术资源')).toBe(1);
+
+    const layoutUpdatesBeforeZoom = invoke.mock.calls.filter(
+      ([command]) => command === 'update_local_project_resource_canvas_layout',
+    ).length;
+    fireEvent.click(screen.getByRole('button', { name: '放大文档内容' }));
+    expect(sectionZoom('文档')).toBe(1.1);
+    expect(sectionZoom('项目版本')).toBe(1);
+    const documentZoomViewport = screen.getByLabelText('文档分区内容');
+    const ordinaryWheel = new WheelEvent('wheel', {
+      bubbles: true,
+      cancelable: true,
+      deltaY: -100,
+    });
+    expect(documentZoomViewport.dispatchEvent(ordinaryWheel)).toBe(true);
+    expect(ordinaryWheel.defaultPrevented).toBe(false);
+    expect(sectionZoom('文档')).toBe(1.1);
+    const zoomWheel = new WheelEvent('wheel', {
+      bubbles: true,
+      cancelable: true,
+      clientX: 0,
+      clientY: 0,
+      ctrlKey: true,
+      deltaY: -100,
+    });
+    let zoomWheelDispatchResult = true;
+    act(() => {
+      zoomWheelDispatchResult = documentZoomViewport.dispatchEvent(zoomWheel);
+    });
+    expect(zoomWheelDispatchResult).toBe(false);
+    expect(zoomWheel.defaultPrevented).toBe(true);
+    await waitFor(() => expect(sectionZoom('文档')).toBeGreaterThan(1.1));
+    const zoomBeforeWebKitGesture = sectionZoom('文档');
+    const gestureStart = new Event('gesturestart', {
+      bubbles: true,
+      cancelable: true,
+    });
+    Object.defineProperties(gestureStart, {
+      clientX: { value: 0 },
+      clientY: { value: 0 },
+    });
+    const gestureChange = new Event('gesturechange', {
+      bubbles: true,
+      cancelable: true,
+    });
+    Object.defineProperty(gestureChange, 'scale', { value: 1.1 });
+    act(() => {
+      documentZoomViewport.dispatchEvent(gestureStart);
+      documentZoomViewport.dispatchEvent(gestureChange);
+      documentZoomViewport.dispatchEvent(
+        new Event('gestureend', { bubbles: true, cancelable: true }),
+      );
+    });
+    await waitFor(() =>
+      expect(sectionZoom('文档')).toBeGreaterThan(zoomBeforeWebKitGesture),
+    );
+    expect(
+      invoke.mock.calls.filter(
+        ([command]) =>
+          command === 'update_local_project_resource_canvas_layout',
+      ),
+    ).toHaveLength(layoutUpdatesBeforeZoom);
+
+    const dependencyDocumentDecrease = screen.getByRole('button', {
+      name: '缩小文档分区',
+    });
+    dependencyDocumentDecrease.focus();
+    const layoutUpdatesBeforeResize = invoke.mock.calls.filter(
+      ([command]) => command === 'update_local_project_resource_canvas_layout',
+    ).length;
+    fireEvent.click(dependencyDocumentDecrease);
+    expect(document.activeElement).toBe(dependencyDocumentDecrease);
+    expect(sectionHeight('文档')).toBe(
+      `${RESOURCE_SECTION_DEFAULT_HEIGHT - RESOURCE_SECTION_HEIGHT_STEP}px`,
+    );
+    expect(sectionHeight('项目版本')).toBe(
+      `${RESOURCE_SECTION_DEFAULT_HEIGHT}px`,
+    );
+    expect(
+      invoke.mock.calls.filter(
+        ([command]) =>
+          command === 'update_local_project_resource_canvas_layout',
+      ),
+    ).toHaveLength(layoutUpdatesBeforeResize);
+
+    const dependencyOuterCanvas = screen.getByLabelText(
+      '资源依赖视图',
+    ) as HTMLDivElement;
+    dependencyOuterCanvas.scrollLeft = 31;
+    dependencyOuterCanvas.scrollTop = 47;
+    fireEvent.scroll(dependencyOuterCanvas);
+
+    fireEvent.click(screen.getByRole('button', { name: '按类型' }));
+    const typeOuterCanvas = screen.getByLabelText(
+      '资源类型视图',
+    ) as HTMLDivElement;
+    expect(typeOuterCanvas.scrollLeft).toBe(0);
+    expect(typeOuterCanvas.scrollTop).toBe(0);
+    typeOuterCanvas.scrollLeft = 52;
+    typeOuterCanvas.scrollTop = 68;
+    fireEvent.scroll(typeOuterCanvas);
+    expect(sectionHeight('文档')).toBe(`${RESOURCE_SECTION_DEFAULT_HEIGHT}px`);
+    expect(sectionZoom('文档')).toBe(1);
+    fireEvent.click(screen.getByRole('button', { name: '放大文档内容' }));
+    expect(sectionZoom('文档')).toBe(1.1);
+    fireEvent.click(screen.getByRole('button', { name: '放大文档分区' }));
+    expect(sectionHeight('文档')).toBe(
+      `${RESOURCE_SECTION_DEFAULT_HEIGHT + RESOURCE_SECTION_HEIGHT_STEP}px`,
+    );
+    fireEvent.click(screen.getByRole('button', { name: '按依赖' }));
+    expect(
+      (screen.getByLabelText('资源依赖视图') as HTMLDivElement).scrollLeft,
+    ).toBe(31);
+    expect(
+      (screen.getByLabelText('资源依赖视图') as HTMLDivElement).scrollTop,
+    ).toBe(47);
+    expect(sectionHeight('文档')).toBe(
+      `${RESOURCE_SECTION_DEFAULT_HEIGHT - RESOURCE_SECTION_HEIGHT_STEP}px`,
+    );
+    expect(sectionZoom('文档')).toBeGreaterThan(1.1);
+
+    const documentViewport = screen.getByLabelText(
+      '文档分区内容',
+    ) as HTMLDivElement;
+    documentViewport.scrollTop = 44;
+    documentViewport.scrollLeft = 12;
+    fireEvent.scroll(documentViewport);
+    fireEvent.click(
+      await screen.findByRole('button', {
+        name: /打开资源详情：项目版本 版本 1/,
+      }),
+    );
+    fireEvent.click(screen.getByRole('button', { name: '收起资源' }));
+    const restoredDocumentViewport = screen.getByLabelText(
+      '文档分区内容',
+    ) as HTMLDivElement;
+    expect(restoredDocumentViewport.scrollTop).toBe(44);
+    expect(restoredDocumentViewport.scrollLeft).toBe(12);
+    expect(sectionHeight('文档')).toBe(
+      `${RESOURCE_SECTION_DEFAULT_HEIGHT - RESOURCE_SECTION_HEIGHT_STEP}px`,
+    );
+
+    let canvasHeight = 420;
+    const canvas = screen.getByLabelText('资源依赖视图');
+    Object.defineProperty(canvas, 'clientHeight', {
+      configurable: true,
+      get: () => canvasHeight,
+    });
+    await act(async () => {
+      fireEvent(window, new Event('resize'));
+      await new Promise<void>((resolveFrame) =>
+        window.requestAnimationFrame(() => resolveFrame()),
+      );
+    });
+    const artIncrease = screen.getByRole('button', {
+      name: '放大美术资源分区',
+    }) as HTMLButtonElement;
+    fireEvent.click(artIncrease);
+    fireEvent.click(artIncrease);
+    fireEvent.click(artIncrease);
+    await waitFor(() => expect(artIncrease.disabled).toBe(true));
+    expect(sectionHeight('美术资源')).toBe(
+      `${canvasHeight - RESOURCE_CANVAS_VERTICAL_INSET}px`,
+    );
+
+    canvasHeight = 300;
+    await act(async () => {
+      fireEvent(window, new Event('resize'));
+      await new Promise<void>((resolveFrame) =>
+        window.requestAnimationFrame(() => resolveFrame()),
+      );
+    });
+    await waitFor(() =>
+      expect(sectionHeight('美术资源')).toBe(
+        `${canvasHeight - RESOURCE_CANVAS_VERTICAL_INSET}px`,
+      ),
+    );
+
+    canvasHeight = 500;
+    rendered.rerender(
+      React.createElement(ProjectDevelopmentView, {
+        ...viewProps,
+        projectName: manifestB.name,
+        projectPath: '/tmp/workbench-section-height-b',
+        manifest: manifestB,
+      }),
+    );
+    await act(async () => {
+      fireEvent(window, new Event('resize'));
+      await new Promise<void>((resolveFrame) =>
+        window.requestAnimationFrame(() => resolveFrame()),
+      );
+    });
+    await waitFor(() =>
+      expect(sectionHeight('文档')).toBe(
+        `${RESOURCE_SECTION_DEFAULT_HEIGHT}px`,
+      ),
+    );
+    expect(sectionZoom('文档')).toBe(1);
+    expect(
+      (screen.getByLabelText('资源依赖视图') as HTMLDivElement).scrollTop,
+    ).toBe(0);
+    rendered.rerender(React.createElement(ProjectDevelopmentView, viewProps));
+    await waitFor(() =>
+      expect(sectionHeight('文档')).toBe(
+        `${RESOURCE_SECTION_DEFAULT_HEIGHT - RESOURCE_SECTION_HEIGHT_STEP}px`,
+      ),
+    );
+    expect(sectionZoom('文档')).toBeGreaterThan(1.1);
+    expect(
+      (screen.getByLabelText('资源依赖视图') as HTMLDivElement).scrollLeft,
+    ).toBe(31);
+    expect(
+      (screen.getByLabelText('资源依赖视图') as HTMLDivElement).scrollTop,
+    ).toBe(47);
+    fireEvent.click(screen.getByRole('button', { name: '按类型' }));
+    expect(
+      (screen.getByLabelText('资源类型视图') as HTMLDivElement).scrollLeft,
+    ).toBe(52);
+    expect(
+      (screen.getByLabelText('资源类型视图') as HTMLDivElement).scrollTop,
+    ).toBe(68);
+    fireEvent.click(screen.getByRole('button', { name: '按依赖' }));
+    fireEvent.click(
+      screen.getByRole('button', {
+        name: '恢复文档分区默认尺寸',
+      }),
+    );
+    expect(sectionHeight('文档')).toBe(`${RESOURCE_SECTION_DEFAULT_HEIGHT}px`);
+  });
+
+  it('renders one body-first card system in both layouts and separates detail from single-media playback', async () => {
+    const observer = installResourceCardIntersectionObserver();
+    const manifest = createGameCreationAppManifest(
+      'workbench-body-first-cards',
+      '本体化资源卡测试',
+    );
+    manifest.assets = [
+      {
+        id: 'hero-image',
+        kind: 'character',
+        mediaType: 'image/png',
+        localPath: 'assets/hero.png',
+        source: { kind: 'generated', taskId: 'art-asset-plan' },
+      },
+      {
+        id: 'intro-video',
+        kind: 'video',
+        mediaType: 'video/mp4',
+        localPath: 'assets/intro.mp4',
+        source: { kind: 'generated', taskId: 'art-asset-plan' },
+      },
+      {
+        id: 'theme-audio',
+        kind: 'background-music',
+        mediaType: 'audio/mpeg',
+        localPath: 'assets/theme.mp3',
+        source: { kind: 'generated', taskId: 'audio-asset-plan' },
+      },
+      {
+        id: 'design-document',
+        kind: 'design-document',
+        mediaType: 'text/markdown',
+        localPath: 'memory/design.md',
+        source: { kind: 'generated', taskId: 'design-foundation' },
+      },
+    ];
+    manifest.versions = [
+      {
+        versionId: 'version-initial',
+        parentVersionId: null,
+        projectRevision: 1,
+        resourceBindings: [],
+        createdReason: 'initial',
+        createdAt: 1,
+      },
+    ];
+    let layoutRevision = 0;
+    const imageDataUrl =
+      'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAB';
+    const invoke = vi.fn(
+      async (command: string, args?: Record<string, unknown>) => {
+        if (command === 'read_local_project_resource_graph') {
+          return resourceGraphForInputs(args);
+        }
+        if (command === 'read_local_project_resource_canvas_layout') {
+          return {
+            schemaVersion: 'game-creator-resource-layout.v1',
+            projectId: manifest.projectId,
+            mode: args?.mode,
+            revision: layoutRevision,
+            positions: [],
+            updatedAt: 0,
+          };
+        }
+        if (command === 'update_local_project_resource_canvas_layout') {
+          layoutRevision += 1;
+          return {
+            status: 'updated',
+            layout: {
+              schemaVersion: 'game-creator-resource-layout.v1',
+              projectId: manifest.projectId,
+              mode: args?.mode,
+              revision: layoutRevision,
+              positions: args?.positions,
+              updatedAt: layoutRevision,
+            },
+          };
+        }
+        if (command === 'read_local_project_image_preview') {
+          return {
+            path: String(args?.relativePath ?? ''),
+            mediaType: 'image/png',
+            byteLen: 12,
+            dataUrl: imageDataUrl,
+          };
+        }
+        if (command === 'read_local_project_text_preview') {
+          return {
+            path: String(args?.relativePath ?? ''),
+            mediaType: 'text/markdown',
+            byteLen: 24,
+            content: '# 玩法摘要\n\n这是安全的卡片正文摘要。',
+          };
+        }
+        if (command === 'read_local_project_media_preview') {
+          const relativePath = String(args?.relativePath ?? '');
+          return relativePath.endsWith('.mp3')
+            ? {
+                path: relativePath,
+                mediaType: 'audio/mpeg',
+                byteLen: 32,
+                dataUrl: 'data:audio/mpeg;base64,SUQz',
+              }
+            : {
+                path: relativePath,
+                mediaType: 'video/mp4',
+                byteLen: 48,
+                dataUrl: 'data:video/mp4;base64,AAAAIGZ0eXA=',
+              };
+        }
+        throw new Error(`unexpected invoke ${command}`);
+      },
+    );
+    window.__TAURI__ = { core: { invoke } };
+    const play = vi
+      .spyOn(HTMLMediaElement.prototype, 'play')
+      .mockResolvedValue(undefined);
+    const pause = vi
+      .spyOn(HTMLMediaElement.prototype, 'pause')
+      .mockImplementation(() => undefined);
+
+    const viewProps = {
+      projectName: manifest.name,
+      projectPath: '/tmp/workbench-body-first-cards',
+      manifest,
+      attachments: [],
+      recentRunStatus: null,
+      recentRunStopReason: null,
+      supervisor: React.createElement('div', null, '项目总控'),
+      onHomeOpen: vi.fn(),
+      onProjectsOpen: vi.fn(),
+    };
+    const rendered = render(
+      React.createElement(ProjectDevelopmentView, viewProps),
+    );
+
+    const heroDetailButton = await screen.findByRole('button', {
+      name: /打开资源详情：美术资源 hero\.png/,
+    });
+    const heroCard = heroDetailButton.closest('.game-resource-card');
+    expect(heroCard?.textContent).not.toContain('hero.png');
+    expect(heroCard?.textContent).not.toContain('assets/hero.png');
+    expect(heroCard?.textContent).not.toContain('Agent 生成');
+    expect(
+      heroCard?.querySelector('.game-resource-card-open button'),
+    ).toBeNull();
+    await waitFor(() => expect(observer.observedCount()).toBe(5));
+    act(() => observer.triggerVisible());
+
+    await waitFor(() => {
+      expect(
+        heroCard
+          ?.querySelector('.game-resource-card-visual > img')
+          ?.getAttribute('src'),
+      ).toBe('blob:mock-attachment-preview');
+      expect(screen.getByText(/这是安全的卡片正文摘要。/)).not.toBeNull();
+    });
+    expect(
+      invoke.mock.calls.some(
+        ([command, args]) =>
+          command === 'read_local_project_media_preview' &&
+          args?.category === 'audio',
+      ),
+    ).toBe(false);
+
+    const videoControl = screen.getByRole('button', {
+      name: '播放 intro.mp4',
+    });
+    const videoCard = videoControl.closest('.game-resource-card');
+    const video = videoCard?.querySelector('video');
+    expect(video).not.toBeNull();
+    expect(video?.preload).toBe('auto');
+    fireEvent.loadedData(video!);
+    fireEvent.click(videoControl);
+    expect(screen.queryByRole('region', { name: 'intro.mp4' })).toBeNull();
+    expect(screen.getByLabelText('资源依赖视图')).not.toBeNull();
+    const pauseVideoControl = screen.getByRole('button', {
+      name: '暂停 intro.mp4',
+    });
+    pauseVideoControl.focus();
+
+    rendered.rerender(
+      React.createElement(ProjectDevelopmentView, {
+        ...viewProps,
+        manifest: { ...manifest },
+      }),
+    );
+    const stableVideoControl = screen.getByRole('button', {
+      name: '暂停 intro.mp4',
+    });
+    expect(stableVideoControl).toBe(pauseVideoControl);
+    expect(document.activeElement).toBe(stableVideoControl);
+
+    fireEvent.click(screen.getByRole('button', { name: '播放 theme.mp3' }));
+    await waitFor(() => {
+      expect(
+        invoke.mock.calls.some(
+          ([command, args]) =>
+            command === 'read_local_project_media_preview' &&
+            args?.category === 'audio',
+        ),
+      ).toBe(true);
+      expect(play).toHaveBeenCalled();
+    });
+    expect(pause.mock.instances).toContain(video);
+    expect(screen.queryByRole('region', { name: 'theme.mp3' })).toBeNull();
+
+    fireEvent.click(heroDetailButton);
+    const heroFocus = await screen.findByRole('region', { name: 'hero.png' });
+    expect(within(heroFocus).getByText('assets/hero.png')).not.toBeNull();
+    expect(within(heroFocus).getByText('Agent 生成')).not.toBeNull();
+    expect(within(heroFocus).getByText('image/png')).not.toBeNull();
+    expect(
+      invoke.mock.calls.filter(
+        ([command]) => command === 'read_local_project_image_preview',
+      ),
+    ).toHaveLength(1);
+    fireEvent.click(
+      within(heroFocus).getByRole('button', { name: '收起资源' }),
+    );
+
+    fireEvent.click(screen.getByRole('button', { name: '按类型' }));
+    await waitFor(() => expect(observer.observedCount()).toBe(5));
+    act(() => observer.triggerVisible());
+    expect(screen.getByLabelText('资源类型视图')).not.toBeNull();
+    const typeVideoControl = await screen.findByRole('button', {
+      name: '播放 intro.mp4',
+    });
+    const typeVideo = typeVideoControl
+      .closest('.game-resource-card')
+      ?.querySelector('video');
+    expect(typeVideo).not.toBeNull();
+    fireEvent.loadedData(typeVideo!);
+    fireEvent.click(typeVideoControl);
+    await waitFor(() =>
+      expect(
+        screen.getByRole('button', { name: '暂停 intro.mp4' }),
+      ).not.toBeNull(),
+    );
+    pause.mockClear();
+    const search = screen.getByLabelText('搜索项目资源');
+    fireEvent.change(search, { target: { value: 'assets/hero.png' } });
+    await waitFor(() => expect(pause.mock.instances).toContain(typeVideo));
+    expect(screen.getByRole('button', { name: /hero\.png/ })).not.toBeNull();
+    expect(screen.queryByRole('button', { name: /intro\.mp4/ })).toBeNull();
+    const typeHeroCard = screen
+      .getByRole('button', { name: /hero\.png/ })
+      .closest('.game-resource-card');
+    await waitFor(() =>
+      expect(
+        typeHeroCard?.querySelector('.game-resource-card-visual > img'),
+      ).not.toBeNull(),
+    );
+    fireEvent.error(
+      typeHeroCard!.querySelector('.game-resource-card-visual > img')!,
+    );
+    expect(
+      typeHeroCard?.querySelector('.game-resource-card-visual > img'),
+    ).toBeNull();
+    expect(
+      typeHeroCard?.querySelector('.game-resource-card-placeholder'),
+    ).not.toBeNull();
+  });
+
+  it('bounds visible preview concurrency, deduplicates requests, evicts old entries, and drops late project results', async () => {
+    const observer = installResourceCardIntersectionObserver();
+    const manifest = createGameCreationAppManifest(
+      'workbench-preview-scheduler',
+      '预览调度测试',
+    );
+    manifest.assets = Array.from({ length: 49 }, (_, index) => ({
+      id: `image-${index}`,
+      kind: 'character',
+      mediaType: 'image/png',
+      localPath: `assets/image-${index}.png`,
+      source: { kind: 'generated' as const },
+    }));
+    const pending: Array<{
+      path: string;
+      resolve: (value: {
+        path: string;
+        mediaType: string;
+        byteLen: number;
+        dataUrl: string;
+      }) => void;
+    }> = [];
+    let layoutRevision = 0;
+    const invoke = vi.fn(
+      async (command: string, args?: Record<string, unknown>) => {
+        if (command === 'read_local_project_resource_graph') {
+          return resourceGraphForInputs(args);
+        }
+        if (command === 'read_local_project_resource_canvas_layout') {
+          return {
+            schemaVersion: 'game-creator-resource-layout.v1',
+            projectId: manifest.projectId,
+            mode: args?.mode,
+            revision: layoutRevision,
+            positions: [],
+            updatedAt: 0,
+          };
+        }
+        if (command === 'update_local_project_resource_canvas_layout') {
+          layoutRevision += 1;
+          return {
+            status: 'updated',
+            layout: {
+              schemaVersion: 'game-creator-resource-layout.v1',
+              projectId: manifest.projectId,
+              mode: args?.mode,
+              revision: layoutRevision,
+              positions: args?.positions,
+              updatedAt: layoutRevision,
+            },
+          };
+        }
+        if (command === 'read_local_project_image_preview') {
+          const path = String(args?.relativePath ?? '');
+          return new Promise((resolvePreview) => {
+            pending.push({ path, resolve: resolvePreview });
+          });
+        }
+        throw new Error(`unexpected invoke ${command}`);
+      },
+    );
+    window.__TAURI__ = { core: { invoke } };
+    const props = {
+      projectName: manifest.name,
+      projectPath: '/tmp/workbench-preview-scheduler',
+      manifest,
+      attachments: [],
+      recentRunStatus: null,
+      recentRunStopReason: null,
+      supervisor: React.createElement('div', null, '项目总控'),
+      onHomeOpen: vi.fn(),
+      onProjectsOpen: vi.fn(),
+    };
+    const rendered = render(React.createElement(ProjectDevelopmentView, props));
+    await waitFor(() => expect(observer.observedCount()).toBe(49));
+    act(() => {
+      observer.triggerVisible();
+      observer.triggerVisible();
+    });
+    await waitFor(() => expect(pending).toHaveLength(3));
+    expect(
+      invoke.mock.calls.filter(
+        ([command]) => command === 'read_local_project_image_preview',
+      ),
+    ).toHaveLength(3);
+
+    for (let index = 0; index < 49; index += 1) {
+      await waitFor(() => expect(pending[index]).toBeDefined());
+      const request = pending[index]!;
+      act(() => {
+        request.resolve({
+          path: request.path,
+          mediaType: 'image/png',
+          byteLen: 1,
+          dataUrl: `data:image/png;base64,${window.btoa(String(index))}`,
+        });
+      });
+    }
+    await waitFor(() => {
+      expect(
+        document.querySelectorAll('.game-resource-card-visual > img'),
+      ).toHaveLength(48);
+    });
+
+    const lateManifest = createGameCreationAppManifest(
+      'workbench-preview-scheduler-next',
+      '新项目',
+    );
+    lateManifest.assets = [
+      {
+        id: 'next-image',
+        kind: 'character',
+        mediaType: 'image/png',
+        localPath: 'assets/next.png',
+        source: { kind: 'generated' },
+      },
+    ];
+    manifest.projectId = lateManifest.projectId;
+    rendered.rerender(
+      React.createElement(ProjectDevelopmentView, {
+        ...props,
+        projectPath: '/tmp/workbench-preview-scheduler-next',
+        projectName: lateManifest.name,
+        manifest: lateManifest,
+      }),
+    );
+    await waitFor(() =>
+      expect(screen.getByRole('button', { name: /next\.png/ })).not.toBeNull(),
+    );
+    await waitFor(() => expect(observer.observedCount()).toBe(1));
+    act(() => observer.triggerVisible());
+    await waitFor(() => expect(pending[49]).toBeDefined());
+    manifest.projectId = 'workbench-preview-scheduler-final';
+    rendered.rerender(
+      React.createElement(ProjectDevelopmentView, {
+        ...props,
+        projectPath: '/tmp/workbench-preview-scheduler-final',
+        projectName: '最终空项目',
+        manifest: {
+          ...createGameCreationAppManifest(
+            'workbench-preview-scheduler-final',
+            '最终空项目',
+          ),
+          assets: [],
+        },
+      }),
+    );
+    const objectUrlCountBeforeLateResult = vi.mocked(URL.createObjectURL).mock
+      .calls.length;
+    act(() => {
+      pending[49]!.resolve({
+        path: 'assets/next.png',
+        mediaType: 'image/png',
+        byteLen: 1,
+        dataUrl: 'data:image/png;base64,LATE',
+      });
+    });
+    await act(async () => Promise.resolve());
+    expect(URL.createObjectURL).toHaveBeenCalledTimes(
+      objectUrlCountBeforeLateResult,
+    );
+  });
+
   it('renders immutable manifest versions, their parent graph, and bound asset highlights', async () => {
     const manifest = createGameCreationAppManifest(
       'workbench-versions',
@@ -743,17 +1599,19 @@ export function registerProjectWorkbenchFoundationTests() {
     );
 
     fireEvent.click(screen.getByRole('button', { name: '按类型' }));
-    const resourceCards = screen.getAllByTitle('打开资源详情');
-    const rootVersionCard = resourceCards.find((card) =>
-      card.textContent?.includes('版本 1'),
-    );
-    const childVersionCard = resourceCards.find((card) =>
-      card.textContent?.includes('版本 2'),
-    );
+    const rootVersionButton = screen.getByRole('button', {
+      name: /打开资源详情：项目版本 版本 1/,
+    });
+    const childVersionButton = screen.getByRole('button', {
+      name: /打开资源详情：项目版本 版本 2/,
+    });
+    const rootVersionCard = rootVersionButton.closest('.game-resource-card');
+    const childVersionCard = childVersionButton.closest('.game-resource-card');
     expect(rootVersionCard?.textContent).toContain('1 个直接子版本');
-    expect(childVersionCard?.textContent).toContain('父版本 version-root');
+    expect(childVersionCard?.textContent).toContain('暂无直接子版本');
+    expect(childVersionCard?.textContent).not.toContain('version-root');
 
-    fireEvent.click(childVersionCard!);
+    fireEvent.click(childVersionButton);
     const versionFocus = screen.getByRole('region', { name: '版本 2' });
     expect(within(versionFocus).getByText('version-child')).not.toBeNull();
     expect(within(versionFocus).getByText('version-root')).not.toBeNull();
@@ -767,8 +1625,8 @@ export function registerProjectWorkbenchFoundationTests() {
 
     fireEvent.click(screen.getByRole('button', { name: '收起资源' }));
     const playerCard = screen
-      .getAllByTitle('打开资源详情')
-      .find((card) => card.textContent?.includes('player.png'));
+      .getByRole('button', { name: /player\.png/ })
+      .closest('.game-resource-card');
     expect(playerCard?.classList.contains('is-relation-version-binding')).toBe(
       true,
     );
@@ -776,15 +1634,15 @@ export function registerProjectWorkbenchFoundationTests() {
     fireEvent.click(screen.getByRole('button', { name: '按依赖' }));
     await waitFor(() => {
       const dependencyPlayerCard = screen
-        .getAllByTitle('打开资源详情')
-        .find((card) => card.textContent?.includes('player.png'));
+        .getByRole('button', { name: /player\.png/ })
+        .closest('.game-resource-card');
       expect(
         dependencyPlayerCard?.classList.contains('is-relation-version-binding'),
       ).toBe(true);
     });
   });
 
-  it('opens text receipts in the central focus state and restores the resource list context', () => {
+  it('opens text receipts in the central focus state and restores the resource list context', async () => {
     const manifest = createGameCreationAppManifest(
       'workbench-resource-details',
       '不应显示的项目标题',
@@ -854,29 +1712,29 @@ export function registerProjectWorkbenchFoundationTests() {
     resourceCanvas.scrollLeft = 48;
     resourceCanvas.scrollTop = 36;
 
-    const resourceCards = screen.getAllByTitle('打开资源详情');
-    const artReceiptCard = resourceCards.find((card) =>
-      card.textContent?.includes('美术资源计划 Agent 文本回执'),
-    );
-    expect(artReceiptCard).not.toBeUndefined();
+    const artReceiptButton = screen.getByRole('button', {
+      name: /打开资源详情：文档 美术资源计划 Agent 文本回执/,
+    });
+    const artReceiptCard = artReceiptButton.closest('.game-resource-card');
+    expect(artReceiptCard).not.toBeNull();
     const originalStyle = artReceiptCard?.getAttribute('style');
-    fireEvent.pointerDown(artReceiptCard!, {
+    fireEvent.pointerDown(artReceiptButton, {
       pointerId: 7,
       button: 0,
       clientX: 0,
       clientY: 0,
     });
-    fireEvent.pointerMove(artReceiptCard!, {
+    fireEvent.pointerMove(artReceiptButton, {
       pointerId: 7,
       clientX: 240,
       clientY: 32,
     });
-    fireEvent.pointerUp(artReceiptCard!, {
+    fireEvent.pointerUp(artReceiptButton, {
       pointerId: 7,
       clientX: 240,
       clientY: 32,
     });
-    fireEvent.pointerCancel(artReceiptCard!, { pointerId: 7 });
+    fireEvent.pointerCancel(artReceiptButton, { pointerId: 7 });
     expect(artReceiptCard?.getAttribute('style')).toBe(originalStyle);
     expect(artReceiptCard?.classList.contains('is-dragging')).toBe(false);
     const styles = readFileSync(
@@ -884,11 +1742,11 @@ export function registerProjectWorkbenchFoundationTests() {
       'utf8',
     );
     expect(styles).toMatch(
-      /\.game-resource-card\s*\{[^}]*cursor:\s*pointer[^}]*touch-action:\s*manipulation/s,
+      /\.game-resource-card-open\s*\{[^}]*cursor:\s*pointer[^}]*touch-action:\s*manipulation/s,
     );
     expect(styles).not.toMatch(/\.game-resource-card\.is-dragging/);
 
-    fireEvent.click(artReceiptCard!);
+    fireEvent.click(artReceiptButton);
     const workbenchStage = screen.getByLabelText('项目主视窗');
     expect(workbenchStage.getAttribute('data-resource-view-state')).toBe(
       'resources.focused.document',
@@ -901,7 +1759,7 @@ export function registerProjectWorkbenchFoundationTests() {
       name: '美术资源计划 Agent 文本回执',
     });
     expect(
-      within(receiptFocus).getByRole('heading', { name: '美术计划' }),
+      await within(receiptFocus).findByRole('heading', { name: '美术计划' }),
     ).not.toBeNull();
     expect(within(receiptFocus).getByText('仅有美术计划')).not.toBeNull();
     expect(within(receiptFocus).getByText('没有图片文件')).not.toBeNull();
@@ -936,25 +1794,21 @@ export function registerProjectWorkbenchFoundationTests() {
     ) as HTMLDivElement;
     expect(restoredCanvas.scrollLeft).toBe(48);
     expect(restoredCanvas.scrollTop).toBe(36);
-    const restoredCard = screen
-      .getAllByTitle('打开资源详情')
-      .find((card) =>
-        card.textContent?.includes('美术资源计划 Agent 文本回执'),
-      );
+    const restoredCard = screen.getByRole('button', {
+      name: /打开资源详情：文档 美术资源计划 Agent 文本回执/,
+    });
     expect(restoredCard?.getAttribute('aria-pressed')).toBe('true');
     expect(document.activeElement).toBe(restoredCard);
-    fireEvent.click(restoredCard!);
+    fireEvent.click(restoredCard);
     expect(
       screen.getByRole('region', {
         name: '美术资源计划 Agent 文本回执',
       }),
     ).not.toBeNull();
     fireEvent.keyDown(window, { key: 'Escape' });
-    const escapeRestoredCard = screen
-      .getAllByTitle('打开资源详情')
-      .find((card) =>
-        card.textContent?.includes('美术资源计划 Agent 文本回执'),
-      );
+    const escapeRestoredCard = screen.getByRole('button', {
+      name: /打开资源详情：文档 美术资源计划 Agent 文本回执/,
+    });
     expect(document.activeElement).toBe(escapeRestoredCard);
   });
 
@@ -1074,6 +1928,7 @@ export function registerProjectWorkbenchFoundationTests() {
       },
     );
     window.__TAURI__ = { core: { invoke } };
+    vi.spyOn(HTMLMediaElement.prototype, 'play').mockResolvedValue(undefined);
 
     render(
       React.createElement(ProjectDevelopmentView, {
@@ -1104,41 +1959,50 @@ export function registerProjectWorkbenchFoundationTests() {
     );
 
     fireEvent.click(screen.getByRole('button', { name: /icon\.svg/ }));
-    const artPreview = await screen.findByLabelText('icon.svg 美术媒体预览');
-    await waitFor(() => {
-      expect(artPreview.querySelector('img')?.getAttribute('src')).toBe(
-        'data:image/svg+xml;base64,PHN2Zy8+',
-      );
+    const artDetails = await screen.findByRole('region', { name: 'icon.svg' });
+    expect(within(artDetails).getByText('assets/icon.svg')).not.toBeNull();
+    expect(within(artDetails).getByText('image/svg+xml')).not.toBeNull();
+    expect(within(artDetails).getByText('依赖层级')).not.toBeNull();
+    expect(screen.queryByLabelText('icon.svg 图片预览')).toBeNull();
+    expect(artDetails.querySelector('img')).toBeNull();
+    fireEvent.click(
+      within(artDetails).getByRole('button', { name: '收起资源' }),
+    );
+
+    fireEvent.click(
+      screen.getByRole('button', {
+        name: '打开资源详情：美术资源 intro.mp4',
+      }),
+    );
+    const videoDetails = await screen.findByRole('region', {
+      name: 'intro.mp4',
     });
+    expect(within(videoDetails).getByText('assets/intro.mp4')).not.toBeNull();
+    expect(within(videoDetails).getByText('video/mp4')).not.toBeNull();
+    expect(screen.queryByLabelText('intro.mp4 视频预览')).toBeNull();
+    expect(videoDetails.querySelector('video')).toBeNull();
     fireEvent.click(
-      within(screen.getByRole('region', { name: 'icon.svg' })).getByRole(
-        'button',
-        { name: '收起资源' },
-      ),
+      within(videoDetails).getByRole('button', { name: '收起资源' }),
     );
 
-    fireEvent.click(screen.getByRole('button', { name: /intro\.mp4/ }));
-    const video = (await screen.findByLabelText(
-      'intro.mp4 视频预览',
-    )) as HTMLVideoElement;
-    expect(video.controls).toBe(true);
-    expect(video.preload).toBe('metadata');
-    expect(video.getAttribute('src')).toBe(
-      'data:video/mp4;base64,AAAAIGZ0eXA=',
-    );
     fireEvent.click(
-      within(screen.getByRole('region', { name: 'intro.mp4' })).getByRole(
-        'button',
-        { name: '收起资源' },
-      ),
+      screen.getByRole('button', {
+        name: '打开资源详情：音乐音效资源 bgm.mp3',
+      }),
     );
-
-    fireEvent.click(screen.getByRole('button', { name: /bgm\.mp3/ }));
+    expect(
+      invoke.mock.calls.some(
+        ([command, args]) =>
+          command === 'read_local_project_media_preview' &&
+          args?.category === 'audio',
+      ),
+    ).toBe(false);
+    fireEvent.click(screen.getByRole('button', { name: '播放 bgm.mp3' }));
     const audio = (await screen.findByLabelText(
       'bgm.mp3 音频播放器',
     )) as HTMLAudioElement;
     expect(audio.controls).toBe(true);
-    expect(audio.getAttribute('src')).toBe('data:audio/mpeg;base64,SUQz');
+    expect(audio.getAttribute('src')).toBe('blob:mock-attachment-preview');
     expect(screen.getByText('载入后显示')).not.toBeNull();
     expect(invoke).toHaveBeenCalledWith(
       'read_local_project_media_preview',
@@ -1153,7 +2017,7 @@ export function registerProjectWorkbenchFoundationTests() {
 
     fireEvent.click(screen.getByRole('button', { name: /blocked\.md/ }));
     expect((await screen.findByRole('alert')).textContent).toBe(
-      '当前项目策略要求先确认读取资源',
+      '当前项目策略要求先确认读取文档，确认后请关闭详情并重试',
     );
     expect(screen.getByLabelText('陶泥儿 Agent 对话')).not.toBeNull();
     expect(screen.getByLabelText('子 Agent 状态栏')).not.toBeNull();
@@ -1213,6 +2077,7 @@ export function registerProjectWorkbenchFoundationTests() {
       },
     );
     window.__TAURI__ = { core: { invoke } };
+    vi.spyOn(HTMLMediaElement.prototype, 'play').mockResolvedValue(undefined);
     const viewProps = {
       projectName: manifest.name,
       projectPath: '/tmp/workbench-resource-focus-updates',
@@ -1230,7 +2095,12 @@ export function registerProjectWorkbenchFoundationTests() {
       }),
     );
 
-    fireEvent.click(await screen.findByRole('button', { name: /focus\.mp3/ }));
+    fireEvent.click(
+      await screen.findByRole('button', {
+        name: '打开资源详情：音乐音效资源 focus.mp3',
+      }),
+    );
+    fireEvent.click(screen.getByRole('button', { name: '播放 focus.mp3' }));
     const audio = (await screen.findByLabelText(
       'focus.mp3 音频播放器',
     )) as HTMLAudioElement;
@@ -1281,7 +2151,7 @@ export function registerProjectWorkbenchFoundationTests() {
     ).toBe(false);
   });
 
-  it('renders, filters, and destroys persistent resource dependency lines without cross-section task flows', async () => {
+  it('renders, filters, and destroys same-category resource dependency lines', async () => {
     const manifest = createGameCreationAppManifest(
       'workbench-resource-graph',
       '资源依赖图测试',
@@ -1289,7 +2159,7 @@ export function registerProjectWorkbenchFoundationTests() {
     manifest.assets.push(
       {
         id: 'dependency-spec',
-        kind: 'design-spec',
+        kind: 'ui-spec',
         mediaType: 'application/json',
         localPath: 'assets/spec-source.json',
         source: {
@@ -1327,6 +2197,8 @@ export function registerProjectWorkbenchFoundationTests() {
       'asset-reference:["asset:dependency-spec","asset:dependency-ui"]';
     const selfReferenceId =
       'asset-reference:["asset:unrelated-cycle","asset:unrelated-cycle"]';
+    const crossReferenceId =
+      'asset-reference:["asset:dependency-spec","asset:unrelated-cycle"]';
     const flowId = 'task-flow:["art-director","design-foundation"]';
     let layoutRevision = 0;
     const invoke = vi.fn(
@@ -1362,6 +2234,13 @@ export function registerProjectWorkbenchFoundationTests() {
                 targetResourceId: 'asset:unrelated-cycle',
                 cyclic: true,
               },
+              {
+                id: crossReferenceId,
+                kind: 'asset-reference',
+                sourceResourceId: 'asset:dependency-spec',
+                targetResourceId: 'asset:unrelated-cycle',
+                cyclic: false,
+              },
             ],
             taskFlows: [
               {
@@ -1378,8 +2257,11 @@ export function registerProjectWorkbenchFoundationTests() {
               {
                 resourceId: 'asset:dependency-spec',
                 upstreamReferenceResourceIds: [],
-                downstreamReferenceResourceIds: ['asset:dependency-ui'],
-                referenceEdgeIds: [referenceId],
+                downstreamReferenceResourceIds: [
+                  'asset:dependency-ui',
+                  'asset:unrelated-cycle',
+                ],
+                referenceEdgeIds: [referenceId, crossReferenceId],
                 taskFlowIds: [flowId],
               },
               {
@@ -1391,9 +2273,12 @@ export function registerProjectWorkbenchFoundationTests() {
               },
               {
                 resourceId: 'asset:unrelated-cycle',
-                upstreamReferenceResourceIds: ['asset:unrelated-cycle'],
+                upstreamReferenceResourceIds: [
+                  'asset:dependency-spec',
+                  'asset:unrelated-cycle',
+                ],
                 downstreamReferenceResourceIds: ['asset:unrelated-cycle'],
-                referenceEdgeIds: [selfReferenceId],
+                referenceEdgeIds: [selfReferenceId, crossReferenceId],
                 taskFlowIds: [],
               },
             ],
@@ -1486,7 +2371,19 @@ export function registerProjectWorkbenchFoundationTests() {
     expect(relationshipDescription?.textContent).toContain(
       'ui-dependency.json（待视觉验收） 引用 spec-source.json',
     );
-    expect(overlay.getAttribute('aria-hidden')).toBe('true');
+    expect(
+      overlay.querySelector(`[data-edge-id='${crossReferenceId}']`),
+    ).toBeNull();
+    expect(relationshipDescription?.textContent).not.toContain(
+      'unrelated-cycle.json 引用 spec-source.json',
+    );
+    expect(relationshipDescription?.textContent).not.toContain('art-director');
+    expect(
+      Array.from(overlay.querySelectorAll('svg')).every(
+        (sectionOverlay) =>
+          sectionOverlay.getAttribute('aria-hidden') === 'true',
+      ),
+    ).toBe(true);
 
     fireEvent.click(screen.getByRole('button', { name: '按类型' }));
     expect(screen.queryByTestId('resource-dependency-overlay')).toBeNull();
@@ -1573,7 +2470,9 @@ export function registerProjectWorkbenchFoundationTests() {
         ?.classList.contains('is-dimmed'),
     ).toBe(false);
 
-    const previousOverlay = overlay;
+    const previousReferencePaths = Array.from(
+      overlay.querySelectorAll('[data-edge-kind]'),
+    );
     const nextManifest = createGameCreationAppManifest(
       'workbench-resource-graph-next',
       '新资源依赖图测试',
@@ -1594,9 +2493,232 @@ export function registerProjectWorkbenchFoundationTests() {
     const nextOverlay = await screen.findByTestId(
       'resource-dependency-overlay',
     );
-    expect(nextOverlay).not.toBe(previousOverlay);
-    expect(previousOverlay.isConnected).toBe(false);
-    expect(nextOverlay.querySelector('[data-edge-kind]')).toBeNull();
+    expect(previousReferencePaths).not.toHaveLength(0);
+    await waitFor(() => {
+      expect(
+        previousReferencePaths.every(
+          (previousReferencePath) => !previousReferencePath.isConnected,
+        ),
+      ).toBe(true);
+      expect(nextOverlay.querySelector('[data-edge-kind]')).toBeNull();
+    });
+  });
+
+  it('coalesces section scroll geometry, keeps partial endpoints stable, and cleans one dependency observer', async () => {
+    const referenceId = 'asset-reference:["resource-a","resource-b"]';
+    const graph = normalizeProjectResourceGraph({
+      resourceIds: ['resource-a', 'resource-b'],
+      referenceEdges: [
+        {
+          id: referenceId,
+          kind: 'asset-reference',
+          sourceResourceId: 'resource-a',
+          targetResourceId: 'resource-b',
+          cyclic: false,
+        },
+      ],
+      taskFlows: [],
+      connectionIndex: [
+        {
+          resourceId: 'resource-a',
+          upstreamReferenceResourceIds: [],
+          downstreamReferenceResourceIds: ['resource-b'],
+          referenceEdgeIds: [referenceId],
+          taskFlowIds: [],
+        },
+        {
+          resourceId: 'resource-b',
+          upstreamReferenceResourceIds: ['resource-a'],
+          downstreamReferenceResourceIds: [],
+          referenceEdgeIds: [referenceId],
+          taskFlowIds: [],
+        },
+      ],
+      producerAssignments: [],
+      dependencyDepths: [],
+      unresolvedReferenceResourceIds: [],
+      cyclicResourceIds: [],
+      cyclicTaskIds: [],
+      producerMappingTruncated: false,
+    });
+    const positions: ProjectResourceCanvasPosition[] = [
+      {
+        resourceId: 'resource-a',
+        section: 'art',
+        x: 0,
+        y: 0,
+        manuallyPlaced: false,
+      },
+      {
+        resourceId: 'resource-b',
+        section: 'art',
+        x: 0,
+        y: 144,
+        manuallyPlaced: false,
+      },
+    ];
+    let observerCount = 0;
+    let observerDisconnected = false;
+    class TestResizeObserver {
+      constructor(readonly callback: ResizeObserverCallback) {
+        observerCount += 1;
+      }
+
+      observe() {}
+
+      unobserve() {}
+
+      disconnect() {
+        observerDisconnected = true;
+      }
+    }
+    Object.defineProperty(window, 'ResizeObserver', {
+      configurable: true,
+      value: TestResizeObserver,
+    });
+    const animationFrame = vi.spyOn(window, 'requestAnimationFrame');
+    const originalGetBoundingClientRect =
+      HTMLElement.prototype.getBoundingClientRect;
+    vi.spyOn(HTMLElement.prototype, 'getBoundingClientRect').mockImplementation(
+      function getSectionRect(this: HTMLElement) {
+        const rect = (
+          left: number,
+          top: number,
+          width: number,
+          height: number,
+        ) =>
+          ({
+            x: left,
+            y: top,
+            left,
+            top,
+            right: left + width,
+            bottom: top + height,
+            width,
+            height,
+            toJSON: () => ({}),
+          }) as DOMRect;
+        if (this.classList.contains('test-resource-content')) {
+          return rect(0, 0, 600, 800);
+        }
+        if (this.dataset.resourceSectionScroll === 'art') {
+          return rect(0, 100, 600, 300);
+        }
+        if (this.dataset.resourceSectionPlane === 'art') {
+          const viewport = this.closest<HTMLElement>(
+            '[data-resource-section-scroll="art"]',
+          );
+          return rect(
+            -(viewport?.scrollLeft ?? 0),
+            100 - (viewport?.scrollTop ?? 0),
+            600,
+            400,
+          );
+        }
+        return originalGetBoundingClientRect.call(this);
+      },
+    );
+
+    const rendered = render(
+      React.createElement(
+        'div',
+        { className: 'test-resource-outer' },
+        React.createElement(
+          'div',
+          {
+            className: 'test-resource-content',
+            'data-testid': 'resource-dependency-overlay',
+          },
+          React.createElement(
+            'section',
+            null,
+            React.createElement(
+              'div',
+              {
+                'data-resource-section-scroll': 'art',
+              },
+              React.createElement(
+                'div',
+                {
+                  'data-resource-section-plane': 'art',
+                  'data-resource-section-scale': '1',
+                },
+                React.createElement(ResourceDependencyOverlay, {
+                  graph,
+                  positions,
+                  section: 'art',
+                  visibleResourceIds: new Set(['resource-a', 'resource-b']),
+                  geometryRevision: '340@1',
+                }),
+              ),
+            ),
+          ),
+        ),
+      ),
+    );
+
+    const overlay = await screen.findByTestId('resource-dependency-overlay');
+    const referenceSelector = `[data-edge-id='${referenceId}']`;
+    await waitFor(() => {
+      const referencePath = overlay.querySelector(referenceSelector);
+      expect(referencePath?.getAttribute('d')).toBeTruthy();
+      expect(referencePath?.getAttribute('data-route-axis')).toBe('vertical');
+      expect(referencePath?.getAttribute('marker-end')).toMatch(
+        /^url\(#.+-asset-reference-arrow\)$/u,
+      );
+    });
+    expect(observerCount).toBe(1);
+    expect(
+      overlay
+        .querySelector('[data-testid="resource-dependency-overlay-art"]')
+        ?.parentElement?.getAttribute('data-resource-section-plane'),
+    ).toBe('art');
+    expect(overlay.querySelector('clipPath')).toBeNull();
+
+    const viewport = rendered.container.querySelector<HTMLElement>(
+      '[data-resource-section-scroll="art"]',
+    );
+    if (!viewport) {
+      throw new Error('missing art section viewport');
+    }
+    const removeViewportListener = vi.spyOn(viewport, 'removeEventListener');
+    const referenceBeforeScroll = overlay.querySelector(referenceSelector);
+    expect(referenceBeforeScroll).not.toBeNull();
+    const frameCountBeforeScroll = animationFrame.mock.calls.length;
+    viewport.scrollTop = 80;
+    fireEvent.scroll(viewport);
+    fireEvent.scroll(viewport);
+    fireEvent.scroll(viewport);
+    // A geometry frame can already be pending from the initial height pass.
+    // In that case every scroll reuses it; otherwise the first scroll schedules
+    // exactly one frame. Both cases satisfy the one-frame coalescing contract.
+    expect(
+      animationFrame.mock.calls.length - frameCountBeforeScroll,
+    ).toBeLessThanOrEqual(1);
+    await waitFor(() => {
+      expect(overlay.querySelector(referenceSelector)).toBe(
+        referenceBeforeScroll,
+      );
+      expect(
+        overlay
+          .querySelector('[data-testid="resource-dependency-overlay-art"]')
+          ?.getAttribute('data-logical-viewport'),
+      ).toBe('0,80,600,300');
+    });
+
+    viewport.scrollTop = 0;
+    fireEvent.scroll(viewport);
+    await waitFor(() =>
+      expect(overlay.querySelector(referenceSelector)).toBe(
+        referenceBeforeScroll,
+      ),
+    );
+    rendered.unmount();
+    expect(observerDisconnected).toBe(true);
+    expect(removeViewportListener).toHaveBeenCalledWith(
+      'scroll',
+      expect.any(Function),
+    );
   });
 
   it('waits for the scoped resource graph before initializing dependency layout', async () => {
@@ -1666,13 +2788,21 @@ export function registerProjectWorkbenchFoundationTests() {
 
     await waitFor(() => expect(resolveGraph).not.toBeNull());
     expect(layoutReads).toBe(0);
-    expect(screen.queryByText('延迟依赖图回执')).toBeNull();
+    expect(
+      screen.queryByRole('button', {
+        name: '打开资源详情：文档 延迟依赖图回执',
+      }),
+    ).toBeNull();
 
     await act(async () => {
       resolveGraph?.();
       await Promise.resolve();
     });
-    expect(await screen.findByText('延迟依赖图回执')).not.toBeNull();
+    expect(
+      await screen.findByRole('button', {
+        name: '打开资源详情：文档 延迟依赖图回执',
+      }),
+    ).not.toBeNull();
     expect(layoutReads).toBe(1);
   });
 
@@ -1741,8 +2871,10 @@ export function registerProjectWorkbenchFoundationTests() {
         supervisor: React.createElement('div', null, '项目总控'),
       });
     const view = render(renderView([firstResult]));
-    const firstCardContent = await screen.findByText('稳定依赖图回执');
-    const firstCard = firstCardContent.closest('button');
+    const firstCardButton = await screen.findByRole('button', {
+      name: '打开资源详情：文档 稳定依赖图回执',
+    });
+    const firstCard = firstCardButton.closest('.game-resource-card');
     expect(firstCard).not.toBeNull();
     expect(graphReads).toBe(1);
 
@@ -1765,13 +2897,21 @@ export function registerProjectWorkbenchFoundationTests() {
     await waitFor(() => expect(graphReads).toBe(2));
     expect(resolveGraphRefresh).not.toBeNull();
     expect(firstCard?.isConnected).toBe(true);
-    expect(screen.getByText('稳定依赖图回执')).not.toBeNull();
+    expect(
+      screen.getByRole('button', {
+        name: '打开资源详情：文档 稳定依赖图回执',
+      }),
+    ).not.toBeNull();
 
     await act(async () => {
       resolveGraphRefresh?.();
       await Promise.resolve();
     });
-    expect(await screen.findByText('刷新期间新增回执')).not.toBeNull();
+    expect(
+      await screen.findByRole('button', {
+        name: '打开资源详情：文档 刷新期间新增回执',
+      }),
+    ).not.toBeNull();
     expect(firstCard?.isConnected).toBe(true);
   });
 
@@ -1816,7 +2956,8 @@ export function registerProjectWorkbenchFoundationTests() {
         },
       },
     );
-    const slotWidth = RESOURCE_CANVAS_CARD_WIDTH + RESOURCE_CANVAS_COLUMN_GAP;
+    const slotWidth =
+      RESOURCE_CANVAS_CARD_WIDTH + RESOURCE_CANVAS_DEPENDENCY_COLUMN_GAP;
     const existingPositions: ProjectResourceCanvasPosition[] = [
       {
         resourceId: 'asset:truncated-depth-0',
@@ -1973,9 +3114,11 @@ export function registerProjectWorkbenchFoundationTests() {
 
     await waitFor(() => expect(layoutReads).toBe(1));
     const cards = [0, 1, 2].map((depth) =>
-      screen.getByRole('button', {
-        name: new RegExp(`truncated-depth-${depth}\\.json`, 'u'),
-      }),
+      screen
+        .getByRole('button', {
+          name: new RegExp(`truncated-depth-${depth}\\.json`, 'u'),
+        })
+        .closest('.game-resource-card'),
     );
     await waitFor(() => {
       expect(cards[0]?.getAttribute('style')).toContain('--resource-x: 0px');
@@ -2053,7 +3196,10 @@ export function registerProjectWorkbenchFoundationTests() {
     }
 
     renderWorkbench();
-    const card = (await screen.findByText('布局持久化回执')).closest('button');
+    const cardButton = await screen.findByRole('button', {
+      name: '打开资源详情：文档 布局持久化回执',
+    });
+    const card = cardButton.closest('.game-resource-card');
     expect(card).not.toBeNull();
     await waitFor(() => {
       expect(card?.getAttribute('style')).toContain('--resource-x: 12px');
@@ -2064,23 +3210,23 @@ export function registerProjectWorkbenchFoundationTests() {
       ([command]) => command === 'update_local_project_resource_canvas_layout',
     ).length;
 
-    fireEvent.pointerDown(card!, {
+    fireEvent.pointerDown(cardButton, {
       pointerId: 11,
       button: 0,
       clientX: 20,
       clientY: 30,
     });
-    fireEvent.pointerMove(card!, {
+    fireEvent.pointerMove(cardButton, {
       pointerId: 11,
       clientX: 100,
       clientY: 60,
     });
-    fireEvent.pointerUp(card!, {
+    fireEvent.pointerUp(cardButton, {
       pointerId: 11,
       clientX: 100,
       clientY: 60,
     });
-    fireEvent.pointerCancel(card!, { pointerId: 11 });
+    fireEvent.pointerCancel(cardButton, { pointerId: 11 });
     expect(card?.getAttribute('style')).toBe(originalStyle);
     expect(card?.classList.contains('is-dragging')).toBe(false);
     expect(
@@ -2090,16 +3236,18 @@ export function registerProjectWorkbenchFoundationTests() {
       ),
     ).toHaveLength(layoutUpdatesBeforePointer);
 
-    fireEvent.click(card!);
+    fireEvent.click(cardButton);
     expect(
       screen.getByRole('region', { name: '布局持久化回执' }),
     ).not.toBeNull();
 
     cleanup();
     renderWorkbench();
-    const restoredCard = (await screen.findByText('布局持久化回执')).closest(
-      'button',
-    );
+    const restoredCard = (
+      await screen.findByRole('button', {
+        name: '打开资源详情：文档 布局持久化回执',
+      })
+    ).closest('.game-resource-card');
     await waitFor(() => {
       expect(restoredCard?.getAttribute('style')).toContain(
         '--resource-x: 12px',
@@ -2261,7 +3409,9 @@ export function registerProjectWorkbenchFoundationTests() {
       await screen.findByText('布局保存失败，已保留当前会话布局'),
     ).not.toBeNull();
     expect(
-      screen.getByText('自动排版失败回执').closest('button'),
+      screen.getByRole('button', {
+        name: '打开资源详情：文档 自动排版失败回执',
+      }),
     ).not.toBeNull();
   });
 
@@ -2297,6 +3447,18 @@ export function registerProjectWorkbenchFoundationTests() {
     expect(styles).toMatch(
       /@media \(max-width: 760px\)[\s\S]*?\.game-workbench-layout\s*\{[^}]*height:\s*auto/,
     );
+    expect(styles).toMatch(
+      /\.game-resource-canvas-content\s*\{[^}]*width:\s*100%[^}]*min-width:\s*max\(100%, 620px\)/s,
+    );
+    expect(styles).toMatch(
+      /\.game-resource-section\s*\{[^}]*grid-template-rows:\s*auto minmax\(0, 1fr\)[^}]*height:\s*var\(--resource-section-height\)[^}]*overflow:\s*hidden/s,
+    );
+    expect(styles).toMatch(
+      /\.game-resource-section-viewport\s*\{[^}]*overflow:\s*auto[^}]*overscroll-behavior:\s*contain/s,
+    );
+    expect(styles).not.toMatch(
+      /\.game-resource-section\s*\{[^}]*position:\s*absolute/s,
+    );
   });
 
   it('enables the run presentation and renders registered images in the resource viewer', async () => {
@@ -2384,23 +3546,12 @@ export function registerProjectWorkbenchFoundationTests() {
       target: { value: 'hero.png' },
     });
     fireEvent.click(screen.getByRole('button', { name: /hero\.png/ }));
-    expect(screen.getByRole('region', { name: 'hero.png' })).not.toBeNull();
-    expect(screen.getAllByText('assets/hero.png').length).toBeGreaterThan(0);
-    const previewImage = await screen.findByRole('img', {
-      name: 'hero.png 图片预览',
-    });
-    expect(previewImage.getAttribute('src')).toBe(
-      'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNk+A8AAQUBAScY42YAAAAASUVORK5CYII=',
-    );
-    expect(
-      invoke.mock.calls.filter(
-        ([command]) => command === 'read_local_project_image_preview',
-      ),
-    ).toHaveLength(1);
-    fireEvent.error(previewImage);
-    expect(screen.getByRole('alert').textContent).toBe(
-      '图片内容无法解码，请重新生成或替换该资源',
-    );
+    const heroDetails = screen.getByRole('region', { name: 'hero.png' });
+    expect(within(heroDetails).getByText('assets/hero.png')).not.toBeNull();
+    expect(within(heroDetails).getByText('image/png')).not.toBeNull();
+    expect(within(heroDetails).getByText('引用上游')).not.toBeNull();
+    expect(heroDetails.querySelector('img')).toBeNull();
+    expect(screen.queryByRole('img', { name: 'hero.png 图片预览' })).toBeNull();
   });
 
   it('marks an unvalidated UI prototype as a candidate image', () => {
@@ -2449,8 +3600,9 @@ export function registerProjectWorkbenchFoundationTests() {
     const candidate = screen.getByRole('button', {
       name: /ui-prototype\.png（待视觉验收）/,
     });
-    expect(candidate.textContent).toContain('画板 · 候选界面图');
-    expect(candidate.textContent).toContain('assets/ui-prototype.png');
+    const candidateCard = candidate.closest('.game-resource-card');
+    expect(candidateCard?.textContent).not.toContain('画板 · 候选界面图');
+    expect(candidateCard?.textContent).not.toContain('assets/ui-prototype.png');
     expect(screen.getByText('仅完成计划')).not.toBeNull();
     expect(
       screen.getByText('美术资源计划已完成，尚未生成或登记图片'),
@@ -5526,7 +6678,7 @@ export function registerProjectSupervisorSurfaceTests() {
       core: { invoke },
       event: { listen: harness.listen },
     };
-    render(
+    const { unmount } = render(
       React.createElement(App, {
         initialProjectPath: projectPath,
         projectSupervisorOnly: true,
@@ -5555,26 +6707,25 @@ export function registerProjectSupervisorSurfaceTests() {
         })
         .getAttribute('src'),
     ).toBe(webpDataUrl);
-    expect(
-      invoke.mock.calls.filter(
-        ([command]) => command === 'read_local_project_image_preview',
-      ),
-    ).toEqual([
-      [
-        'read_local_project_image_preview',
-        {
-          projectPath,
-          relativePath: 'assets/art-spritesheet.png',
-        },
-      ],
-      [
-        'read_local_project_image_preview',
-        {
-          projectPath,
-          relativePath: 'assets/ui-prototype.webp',
-        },
-      ],
-    ]);
+    const imageReadCalls = invoke.mock.calls.filter(
+      ([command]) => command === 'read_local_project_image_preview',
+    );
+    expect(imageReadCalls).toHaveLength(2);
+    expect(imageReadCalls[0]?.[1]).toMatchObject({
+      projectPath,
+      relativePath: 'assets/art-spritesheet.png',
+      scopeId: expect.any(String),
+      requestId: expect.any(String),
+    });
+    expect(imageReadCalls[1]?.[1]).toMatchObject({
+      projectPath,
+      relativePath: 'assets/ui-prototype.webp',
+      scopeId: imageReadCalls[0]?.[1]?.scopeId,
+      requestId: expect.any(String),
+    });
+    expect(imageReadCalls[1]?.[1]?.requestId).not.toBe(
+      imageReadCalls[0]?.[1]?.requestId,
+    );
 
     fireEvent.click(
       within(imageCard).getByRole('button', {
@@ -5630,6 +6781,11 @@ export function registerProjectSupervisorSurfaceTests() {
         ([command]) => command === 'append_local_conversation_message',
       ),
     ).toHaveLength(0);
+    unmount();
+    expect(invoke).toHaveBeenCalledWith(
+      'cancel_local_project_resource_preview_scope',
+      { scopeId: imageReadCalls[0]?.[1]?.scopeId },
+    );
   });
 
   it('persists one terminal game-chat stage record and keeps it in the next round', async () => {
@@ -8270,23 +9426,37 @@ export function registerProjectSupervisorSurfaceTests() {
     fireEvent.click(within(resultDialog).getByRole('button', { name: '关闭' }));
     const documentResources = screen.getByLabelText('文档');
     expect(
-      within(documentResources).getByText('程序 Agent 文本回执'),
+      within(documentResources).getByRole('button', {
+        name: '打开资源详情：文档 程序 Agent 文本回执',
+      }),
+    ).not.toBeNull();
+    const designReceiptCard = within(documentResources).getByRole('button', {
+      name: '打开资源详情：文档 策划 Agent 文本回执',
+    });
+    expect(designReceiptCard).not.toBeNull();
+    expect(
+      within(documentResources).getByRole('button', {
+        name: '打开资源详情：文档 美术资源计划 Agent 文本回执',
+      }),
     ).not.toBeNull();
     expect(
-      within(documentResources).getByText('策划 Agent 文本回执'),
-    ).not.toBeNull();
-    expect(
-      within(documentResources).getByText('美术资源计划 Agent 文本回执'),
-    ).not.toBeNull();
-    expect(
-      within(documentResources).getByText('数值 Agent 文本回执'),
+      within(documentResources).getByRole('button', {
+        name: '打开资源详情：文档 数值 Agent 文本回执',
+      }),
     ).not.toBeNull();
     expect(documentResources.textContent).not.toContain(
       '当前新一轮策划失败，不得覆盖旧成果。',
     );
+    fireEvent.click(designReceiptCard);
+    const designReceiptFocus = await screen.findByRole('region', {
+      name: '策划 Agent 文本回执',
+    });
     expect(
-      within(documentResources).getByText('历史成果 · 策划 Agent'),
+      within(designReceiptFocus).getByText('历史成果 · 策划 Agent'),
     ).not.toBeNull();
+    fireEvent.click(
+      within(designReceiptFocus).getByRole('button', { name: '收起资源' }),
+    );
 
     failProfessionalConversationReads = true;
     const conversationReadCountBeforeFailure =
@@ -8302,14 +9472,14 @@ export function registerProjectSupervisorSurfaceTests() {
           conversationReadCountBeforeFailure,
         );
         expect(
-          within(screen.getByLabelText('文档')).getByText(
-            '策划 Agent 文本回执',
-          ),
+          within(screen.getByLabelText('文档')).getByRole('button', {
+            name: '打开资源详情：文档 策划 Agent 文本回执',
+          }),
         ).not.toBeNull();
         expect(
-          within(screen.getByLabelText('文档')).getByText(
-            '程序 Agent 文本回执',
-          ),
+          within(screen.getByLabelText('文档')).getByRole('button', {
+            name: '打开资源详情：文档 程序 Agent 文本回执',
+          }),
         ).not.toBeNull();
       },
       { timeout: 2500 },
@@ -8332,7 +9502,7 @@ export function registerProjectSupervisorSurfaceTests() {
     );
     const updatedDesignCard = await waitFor(() => {
       const card = within(screen.getByLabelText('文档')).getByRole('button', {
-        name: /^策划 Agent 文本回执/u,
+        name: '打开资源详情：文档 策划 Agent 文本回执',
       });
       expect(card.getAttribute('data-resource-id')).toContain(
         'agent-finalization-33333333333333333333333333333333',
@@ -8480,9 +9650,9 @@ export function registerProjectSupervisorSurfaceTests() {
           ).getByText('等待中'),
         ).not.toBeNull();
         expect(
-          within(screen.getByLabelText('文档')).getByText(
-            '策划 Agent 文本回执',
-          ),
+          within(screen.getByLabelText('文档')).getByRole('button', {
+            name: '打开资源详情：文档 策划 Agent 文本回执',
+          }),
         ).not.toBeNull();
       },
       { timeout: 2500 },
diff --git a/apps/ai-game-creator-shell/tests/resourceCanvasLayoutModel.test.ts b/apps/ai-game-creator-shell/tests/resourceCanvasLayoutModel.test.ts
index 768b3f812..4502f9f94 100644
--- a/apps/ai-game-creator-shell/tests/resourceCanvasLayoutModel.test.ts
+++ b/apps/ai-game-creator-shell/tests/resourceCanvasLayoutModel.test.ts
@@ -1,5 +1,9 @@
 import { describe, expect, it } from 'vitest';
 
+import {
+  GAME_CREATION_RESOURCE_LAYOUT_MAX_COORDINATE,
+  isSafeProjectResourceCanvasCoordinate,
+} from '../../../packages/shared/src/contracts/gameCreationApp';
 import {
   createEmptyResourceCanvasLayout,
   moveResourceCanvasPosition,
@@ -7,8 +11,10 @@ import {
   RESOURCE_CANVAS_CARD_HEIGHT,
   RESOURCE_CANVAS_CARD_WIDTH,
   RESOURCE_CANVAS_COLUMN_GAP,
-  RESOURCE_CANVAS_ROW_GAP,
+  RESOURCE_CANVAS_DEPENDENCY_COLUMN_GAP,
+  RESOURCE_CANVAS_DEPENDENCY_ROW_GAP,
   type ResourceCanvasItem,
+  type ResourceCanvasLayoutTopology,
 } from '../src/view/project-development/resourceCanvasLayoutModel';
 
 function resource(
@@ -26,6 +32,24 @@ function resource(
   };
 }
 
+function dependencyTopology(
+  referenceEdges: ResourceCanvasLayoutTopology['referenceEdges'] = [],
+  taskFlows: ResourceCanvasLayoutTopology['taskFlows'] = [],
+): ResourceCanvasLayoutTopology {
+  return { referenceEdges, taskFlows };
+}
+
+function positionById(
+  layout: ReturnType<typeof reconcileResourceCanvasLayout>['layout'],
+  resourceId: string,
+) {
+  const position = layout.positions.find(
+    (candidate) => candidate.resourceId === resourceId,
+  );
+  expect(position).toBeDefined();
+  return position!;
+}
+
 describe('resource canvas layout model', () => {
   it('creates non-overlapping defaults and keeps the two modes independent', () => {
     const resources = [
@@ -46,14 +70,14 @@ describe('resource canvas layout model', () => {
       { resourceId: 'a', x: 0, y: 0, manuallyPlaced: false },
       {
         resourceId: 'c',
-        x: RESOURCE_CANVAS_CARD_WIDTH + RESOURCE_CANVAS_COLUMN_GAP,
+        x: RESOURCE_CANVAS_CARD_WIDTH + RESOURCE_CANVAS_DEPENDENCY_COLUMN_GAP,
         y: 0,
         manuallyPlaced: false,
       },
       {
         resourceId: 'b',
         x: 0,
-        y: RESOURCE_CANVAS_CARD_HEIGHT + RESOURCE_CANVAS_ROW_GAP,
+        y: RESOURCE_CANVAS_CARD_HEIGHT + RESOURCE_CANVAS_DEPENDENCY_ROW_GAP,
         manuallyPlaced: false,
       },
     ]);
@@ -180,6 +204,330 @@ describe('resource canvas layout model', () => {
     ]);
   });
 
+  it('keeps connected art cards close while placing separate components before isolates', () => {
+    const layout = reconcileResourceCanvasLayout(
+      createEmptyResourceCanvasLayout('project-clusters', 'dependency'),
+      [
+        resource('art:canvas', 'art', 0),
+        resource('art:wireframe', 'art', 1),
+        resource('art:character', 'art', 0),
+        resource('art:screen', 'art', 1),
+        resource('art:unrelated', 'art', 0),
+      ],
+      dependencyTopology([
+        {
+          sourceResourceId: 'art:canvas',
+          targetResourceId: 'art:wireframe',
+        },
+        {
+          sourceResourceId: 'art:character',
+          targetResourceId: 'art:screen',
+        },
+      ]),
+    ).layout;
+
+    const canvas = positionById(layout, 'art:canvas');
+    const wireframe = positionById(layout, 'art:wireframe');
+    const character = positionById(layout, 'art:character');
+    const screen = positionById(layout, 'art:screen');
+    const unrelated = positionById(layout, 'art:unrelated');
+
+    expect(wireframe.y).toBe(canvas.y);
+    expect(screen.y).toBe(character.y);
+    expect(character.y - canvas.y).toBeGreaterThanOrEqual(
+      RESOURCE_CANVAS_CARD_HEIGHT + RESOURCE_CANVAS_DEPENDENCY_ROW_GAP,
+    );
+    expect(unrelated.y).toBeGreaterThan(screen.y);
+  });
+
+  it('ignores cross-category references and task flows when forming layout clusters', () => {
+    const layout = reconcileResourceCanvasLayout(
+      createEmptyResourceCanvasLayout(
+        'project-no-cross-category',
+        'dependency',
+      ),
+      [
+        resource('art:a', 'art', 0),
+        resource('art:b', 'art', 0),
+        resource('document:a', 'document', 0),
+      ],
+      dependencyTopology(
+        [
+          {
+            sourceResourceId: 'document:a',
+            targetResourceId: 'art:a',
+          },
+        ],
+        [
+          {
+            sourceResourceIds: ['document:a'],
+            targetResourceIds: ['art:a'],
+          },
+        ],
+      ),
+    ).layout;
+
+    expect(positionById(layout, 'art:a').y).toBe(0);
+    expect(positionById(layout, 'art:b').y).toBe(
+      RESOURCE_CANVAS_CARD_HEIGHT + RESOURCE_CANVAS_DEPENDENCY_ROW_GAP,
+    );
+    expect(positionById(layout, 'document:a')).toMatchObject({
+      section: 'document',
+      y: 0,
+    });
+  });
+
+  it('uses bounded layer scans to align multi-edge targets with their upstream neighbors', () => {
+    const layout = reconcileResourceCanvasLayout(
+      createEmptyResourceCanvasLayout('project-crossings', 'dependency'),
+      [
+        resource('source:bottom', 'art', 0),
+        resource('source:top', 'art', 0),
+        resource('target:first', 'art', 1),
+        resource('target:second', 'art', 1),
+      ],
+      dependencyTopology(
+        [
+          {
+            sourceResourceId: 'source:bottom',
+            targetResourceId: 'target:second',
+          },
+          {
+            sourceResourceId: 'source:top',
+            targetResourceId: 'target:first',
+          },
+        ],
+        [
+          {
+            sourceResourceIds: ['source:bottom', 'source:top'],
+            targetResourceIds: ['target:first', 'target:second'],
+          },
+        ],
+      ),
+    ).layout;
+
+    expect(positionById(layout, 'source:bottom').y).toBeLessThan(
+      positionById(layout, 'source:top').y,
+    );
+    expect(positionById(layout, 'target:second').y).toBeLessThan(
+      positionById(layout, 'target:first').y,
+    );
+  });
+
+  it('centers narrow dependency layers so diamond edges have balanced lengths', () => {
+    const layout = reconcileResourceCanvasLayout(
+      createEmptyResourceCanvasLayout('project-balanced-diamond', 'dependency'),
+      [
+        resource('source', 'art', 0),
+        resource('middle:upper', 'art', 1),
+        resource('middle:lower', 'art', 1),
+        resource('target', 'art', 2),
+      ],
+      dependencyTopology([
+        { sourceResourceId: 'source', targetResourceId: 'middle:upper' },
+        { sourceResourceId: 'source', targetResourceId: 'middle:lower' },
+        { sourceResourceId: 'middle:upper', targetResourceId: 'target' },
+        { sourceResourceId: 'middle:lower', targetResourceId: 'target' },
+      ]),
+    ).layout;
+    const dependencySlotHeight =
+      RESOURCE_CANVAS_CARD_HEIGHT + RESOURCE_CANVAS_DEPENDENCY_ROW_GAP;
+    const dependencySlotWidth =
+      RESOURCE_CANVAS_CARD_WIDTH + RESOURCE_CANVAS_DEPENDENCY_COLUMN_GAP;
+
+    expect(positionById(layout, 'middle:lower')).toMatchObject({
+      x: dependencySlotWidth,
+      y: 0,
+    });
+    expect(positionById(layout, 'middle:upper')).toMatchObject({
+      x: dependencySlotWidth,
+      y: dependencySlotHeight,
+    });
+    expect(positionById(layout, 'source')).toMatchObject({
+      x: 0,
+      y: dependencySlotHeight / 2,
+    });
+    expect(positionById(layout, 'target')).toMatchObject({
+      x: dependencySlotWidth * 2,
+      y: dependencySlotHeight / 2,
+    });
+  });
+
+  it('keeps cycles contiguous, preserves their Rust depth, and leaves cross-section cards in place', () => {
+    const layout = reconcileResourceCanvasLayout(
+      createEmptyResourceCanvasLayout('project-cycles', 'dependency'),
+      [
+        resource('art:cycle-a', 'art', 2),
+        resource('art:cycle-b', 'art', 2),
+        resource('art:after-cycle', 'art', 3),
+        resource('art:self', 'art', 0),
+        resource('document:brief', 'document', 0),
+      ],
+      dependencyTopology([
+        { sourceResourceId: 'art:cycle-a', targetResourceId: 'art:cycle-b' },
+        { sourceResourceId: 'art:cycle-b', targetResourceId: 'art:cycle-a' },
+        {
+          sourceResourceId: 'art:cycle-b',
+          targetResourceId: 'art:after-cycle',
+        },
+        { sourceResourceId: 'art:self', targetResourceId: 'art:self' },
+        {
+          sourceResourceId: 'document:brief',
+          targetResourceId: 'art:cycle-a',
+        },
+      ]),
+    ).layout;
+
+    const cycleA = positionById(layout, 'art:cycle-a');
+    const cycleB = positionById(layout, 'art:cycle-b');
+    const afterCycle = positionById(layout, 'art:after-cycle');
+    expect(cycleA.x).toBe(
+      2 * (RESOURCE_CANVAS_CARD_WIDTH + RESOURCE_CANVAS_DEPENDENCY_COLUMN_GAP),
+    );
+    expect(cycleB.x).toBe(cycleA.x);
+    expect(Math.abs(cycleA.y - cycleB.y)).toBe(
+      RESOURCE_CANVAS_CARD_HEIGHT + RESOURCE_CANVAS_DEPENDENCY_ROW_GAP,
+    );
+    expect(afterCycle.x).toBe(
+      3 * (RESOURCE_CANVAS_CARD_WIDTH + RESOURCE_CANVAS_DEPENDENCY_COLUMN_GAP),
+    );
+    expect(positionById(layout, 'document:brief').section).toBe('document');
+  });
+
+  it('keeps same-depth cycle members consecutive when another related card shares the layer', () => {
+    const layout = reconcileResourceCanvasLayout(
+      createEmptyResourceCanvasLayout('project-cycle-contiguity', 'dependency'),
+      [
+        resource('art:cycle-a', 'art', 2),
+        resource('art:cycle-b', 'art', 2),
+        resource('art:sibling', 'art', 2),
+        resource('art:after', 'art', 3),
+      ],
+      dependencyTopology([
+        { sourceResourceId: 'art:cycle-a', targetResourceId: 'art:cycle-b' },
+        { sourceResourceId: 'art:cycle-b', targetResourceId: 'art:cycle-a' },
+        { sourceResourceId: 'art:cycle-b', targetResourceId: 'art:after' },
+        { sourceResourceId: 'art:sibling', targetResourceId: 'art:after' },
+      ]),
+    ).layout;
+
+    const cycleRows = ['art:cycle-a', 'art:cycle-b']
+      .map((resourceId) => positionById(layout, resourceId).y)
+      .sort((left, right) => left - right);
+    const siblingRow = positionById(layout, 'art:sibling').y;
+    expect(cycleRows[1] - cycleRows[0]).toBe(
+      RESOURCE_CANVAS_CARD_HEIGHT + RESOURCE_CANVAS_DEPENDENCY_ROW_GAP,
+    );
+    expect(siblingRow).toBeGreaterThan(cycleRows[1]);
+  });
+
+  it('is deterministic, does not modify type placement, and avoids historical manual positions', () => {
+    const resources = [
+      resource('art:source', 'art', 0),
+      resource('art:target', 'art', 1),
+      resource('art:other', 'art', 1),
+    ];
+    const topology = dependencyTopology([
+      { sourceResourceId: 'art:source', targetResourceId: 'art:target' },
+    ]);
+    const source = createEmptyResourceCanvasLayout(
+      'project-stable',
+      'dependency',
+    );
+    source.positions = [
+      {
+        resourceId: 'art:other',
+        section: 'art',
+        x: RESOURCE_CANVAS_CARD_WIDTH + RESOURCE_CANVAS_COLUMN_GAP,
+        y: 0,
+        manuallyPlaced: true,
+      },
+    ];
+    const first = reconcileResourceCanvasLayout(
+      source,
+      resources,
+      topology,
+    ).layout;
+    const second = reconcileResourceCanvasLayout(
+      source,
+      resources,
+      topology,
+    ).layout;
+    const type = reconcileResourceCanvasLayout(
+      createEmptyResourceCanvasLayout('project-stable', 'type'),
+      resources,
+      topology,
+    ).layout;
+
+    expect(second.positions).toEqual(first.positions);
+    expect(positionById(first, 'art:other')).toMatchObject({
+      x: RESOURCE_CANVAS_CARD_WIDTH + RESOURCE_CANVAS_COLUMN_GAP,
+      y: 0,
+      manuallyPlaced: true,
+    });
+    expect(positionById(first, 'art:target').y).toBe(
+      RESOURCE_CANVAS_CARD_HEIGHT + RESOURCE_CANVAS_DEPENDENCY_ROW_GAP,
+    );
+    expect(positionById(type, 'art:other')).toMatchObject({ x: 0, y: 0 });
+  });
+
+  it('saturates super-deep dependency columns and avoids collisions within the coordinate contract', () => {
+    const resources = [
+      resource('art:depth-4385', 'art', 4_385),
+      resource('art:depth-4386-a', 'art', 4_386),
+      resource('art:depth-4386-b', 'art', 4_386),
+      resource('art:depth-9000', 'art', 9_000),
+    ];
+    const layout = reconcileResourceCanvasLayout(
+      createEmptyResourceCanvasLayout('project-deep-dependency', 'dependency'),
+      resources,
+    ).layout;
+    const repeatedLayout = reconcileResourceCanvasLayout(
+      createEmptyResourceCanvasLayout('project-deep-dependency', 'dependency'),
+      resources,
+    ).layout;
+    const lastLegalColumn =
+      Math.floor(
+        GAME_CREATION_RESOURCE_LAYOUT_MAX_COORDINATE /
+          (RESOURCE_CANVAS_CARD_WIDTH + RESOURCE_CANVAS_DEPENDENCY_COLUMN_GAP),
+      ) *
+      (RESOURCE_CANVAS_CARD_WIDTH + RESOURCE_CANVAS_DEPENDENCY_COLUMN_GAP);
+    const deepPositions = [
+      positionById(layout, 'art:depth-4386-a'),
+      positionById(layout, 'art:depth-4386-b'),
+      positionById(layout, 'art:depth-9000'),
+    ];
+
+    expect(lastLegalColumn).toBe(999_780);
+    expect(
+      isSafeProjectResourceCanvasCoordinate(
+        GAME_CREATION_RESOURCE_LAYOUT_MAX_COORDINATE,
+      ),
+    ).toBe(true);
+    expect(
+      isSafeProjectResourceCanvasCoordinate(
+        GAME_CREATION_RESOURCE_LAYOUT_MAX_COORDINATE + 1,
+      ),
+    ).toBe(false);
+    expect(deepPositions.map((position) => position.x)).toEqual([
+      lastLegalColumn,
+      lastLegalColumn,
+      lastLegalColumn,
+    ]);
+    expect(new Set(deepPositions.map((position) => position.y)).size).toBe(3);
+    expect(repeatedLayout.positions).toEqual(layout.positions);
+    expect(
+      layout.positions.every(
+        (position) =>
+          isSafeProjectResourceCanvasCoordinate(position.x) &&
+          isSafeProjectResourceCanvasCoordinate(position.y),
+      ),
+    ).toBe(true);
+    expect(resources.map((resource) => resource.dependencyDepth)).toEqual([
+      4_385, 4_386, 4_386, 9_000,
+    ]);
+  });
+
   it.each(['dependency', 'type'] as const)(
     'reconciles 4096 resources in %s mode within the bounded layout budget',
     (mode) => {
@@ -205,4 +553,32 @@ describe('resource canvas layout model', () => {
       expect(elapsedMs).toBeLessThan(2000);
     },
   );
+
+  it('keeps dependency clustering within the 4096-resource layout budget', () => {
+    const resources = Array.from({ length: 4096 }, (_, index) =>
+      resource(
+        `resource-${index.toString().padStart(4, '0')}`,
+        'art',
+        index % 64,
+      ),
+    );
+    const topology = dependencyTopology(
+      resources.slice(1).map((target, index) => ({
+        sourceResourceId: resources[index]!.id,
+        targetResourceId: target.id,
+      })),
+    );
+    const startedAt = performance.now();
+    const layout = reconcileResourceCanvasLayout(
+      createEmptyResourceCanvasLayout(
+        'project-cluster-performance',
+        'dependency',
+      ),
+      resources,
+      topology,
+    ).layout;
+
+    expect(layout.positions).toHaveLength(4096);
+    expect(performance.now() - startedAt).toBeLessThan(2000);
+  });
 });
diff --git a/apps/ai-game-creator-shell/tests/resourceSectionHeightModel.test.ts b/apps/ai-game-creator-shell/tests/resourceSectionHeightModel.test.ts
new file mode 100644
index 000000000..bbe22d520
--- /dev/null
+++ b/apps/ai-game-creator-shell/tests/resourceSectionHeightModel.test.ts
@@ -0,0 +1,103 @@
+import { describe, expect, it } from 'vitest';
+
+import { RESOURCE_CANVAS_CARD_HEIGHT } from '../src/view/project-development/resourceCanvasLayoutModel';
+import {
+  clampProjectResourceSectionZoom,
+  defaultProjectResourceSectionHeight,
+  projectResourceSectionHeightBounds,
+  projectResourceSectionHeightKey,
+  projectResourceSectionZoomFromWheel,
+  RESOURCE_CANVAS_VERTICAL_INSET,
+  RESOURCE_SECTION_DEFAULT_HEIGHT,
+  RESOURCE_SECTION_HEIGHT_STEP,
+  RESOURCE_SECTION_MIN_HEIGHT,
+  RESOURCE_SECTION_ZOOM_DEFAULT,
+  RESOURCE_SECTION_ZOOM_MAX,
+  RESOURCE_SECTION_ZOOM_MIN,
+  updateProjectResourceSectionHeight,
+  updateProjectResourceSectionZoom,
+} from '../src/view/project-development/resourceSectionHeightModel';
+
+describe('resource section height model', () => {
+  it('isolates session keys by project, mode, and section', () => {
+    expect(
+      projectResourceSectionHeightKey({
+        projectId: 'project-a',
+        mode: 'dependency',
+        section: 'document',
+      }),
+    ).not.toBe(
+      projectResourceSectionHeightKey({
+        projectId: 'project-a',
+        mode: 'type',
+        section: 'document',
+      }),
+    );
+    expect(
+      projectResourceSectionHeightKey({
+        projectId: 'project-a',
+        mode: 'dependency',
+        section: 'document',
+      }),
+    ).not.toBe(
+      projectResourceSectionHeightKey({
+        projectId: 'project-b',
+        mode: 'dependency',
+        section: 'document',
+      }),
+    );
+  });
+
+  it('keeps a full card row above the minimum and clamps to the canvas height', () => {
+    expect(RESOURCE_SECTION_MIN_HEIGHT).toBeGreaterThan(
+      RESOURCE_CANVAS_CARD_HEIGHT,
+    );
+    const bounds = projectResourceSectionHeightBounds(480);
+    expect(bounds).toEqual({
+      min: RESOURCE_SECTION_MIN_HEIGHT,
+      max: 480 - RESOURCE_CANVAS_VERTICAL_INSET,
+    });
+
+    let height = defaultProjectResourceSectionHeight(bounds);
+    expect(height).toBe(RESOURCE_SECTION_DEFAULT_HEIGHT);
+    height = updateProjectResourceSectionHeight(height, 'increase', bounds);
+    expect(height).toBe(
+      RESOURCE_SECTION_DEFAULT_HEIGHT + RESOURCE_SECTION_HEIGHT_STEP,
+    );
+    height = updateProjectResourceSectionHeight(height, 'increase', bounds);
+    expect(height).toBe(bounds.max);
+    height = updateProjectResourceSectionHeight(height, 'reset', bounds);
+    expect(height).toBe(RESOURCE_SECTION_DEFAULT_HEIGHT);
+  });
+
+  it('uses the minimum as the hard upper bound only when the viewport is smaller', () => {
+    const bounds = projectResourceSectionHeightBounds(120);
+    expect(bounds.min).toBe(RESOURCE_SECTION_MIN_HEIGHT);
+    expect(bounds.max).toBe(RESOURCE_SECTION_MIN_HEIGHT);
+    expect(
+      updateProjectResourceSectionHeight(
+        RESOURCE_SECTION_DEFAULT_HEIGHT,
+        'increase',
+        bounds,
+      ),
+    ).toBe(RESOURCE_SECTION_MIN_HEIGHT);
+  });
+
+  it('clamps button and trackpad zoom deterministically', () => {
+    expect(
+      updateProjectResourceSectionZoom(
+        RESOURCE_SECTION_ZOOM_DEFAULT,
+        'increase',
+      ),
+    ).toBe(1.1);
+    expect(updateProjectResourceSectionZoom(1.1, 'decrease')).toBe(1);
+    expect(updateProjectResourceSectionZoom(1.7, 'reset')).toBe(1);
+    expect(clampProjectResourceSectionZoom(0.1)).toBe(
+      RESOURCE_SECTION_ZOOM_MIN,
+    );
+    expect(clampProjectResourceSectionZoom(4)).toBe(RESOURCE_SECTION_ZOOM_MAX);
+    expect(projectResourceSectionZoomFromWheel(1, -100)).toBeGreaterThan(1);
+    expect(projectResourceSectionZoomFromWheel(1, 100)).toBeLessThan(1);
+    expect(projectResourceSectionZoomFromWheel(1.23, 0)).toBe(1.23);
+  });
+});
diff --git a/apps/ai-game-creator-shell/tests/useProjectResourceCanvasLayout.test.ts b/apps/ai-game-creator-shell/tests/useProjectResourceCanvasLayout.test.ts
index 1b4cf3e2c..4a5390d18 100644
--- a/apps/ai-game-creator-shell/tests/useProjectResourceCanvasLayout.test.ts
+++ b/apps/ai-game-creator-shell/tests/useProjectResourceCanvasLayout.test.ts
@@ -9,14 +9,21 @@ import type {
   ProjectResourceCanvasPosition,
 } from '../../../packages/shared/src/contracts/gameCreationApp';
 import { GAME_CREATION_RESOURCE_LAYOUT_MAX_SAFE_REVISION } from '../../../packages/shared/src/contracts/gameCreationApp';
-import type { ResourceCanvasItem } from '../src/view/project-development/resourceCanvasLayoutModel';
+import {
+  RESOURCE_CANVAS_CARD_WIDTH,
+  RESOURCE_CANVAS_DEPENDENCY_COLUMN_GAP,
+  type ResourceCanvasItem,
+} from '../src/view/project-development/resourceCanvasLayoutModel';
 import {
   createResourceSignature,
+  createResourceTopologySignature,
   useProjectResourceCanvasLayout,
 } from '../src/view/project-development/useProjectResourceCanvasLayout';
 
 const projectId = 'layout-hook-project';
 const projectPath = '/tmp/layout-hook-project';
+const dependencySlotWidth =
+  RESOURCE_CANVAS_CARD_WIDTH + RESOURCE_CANVAS_DEPENDENCY_COLUMN_GAP;
 
 function resource(id: string): ResourceCanvasItem {
   return {
@@ -83,6 +90,45 @@ describe('useProjectResourceCanvasLayout', () => {
     );
   });
 
+  it('uses a stable identity-only topology signature', () => {
+    const topology = {
+      referenceEdges: [
+        { sourceResourceId: 'asset-b', targetResourceId: 'asset-c' },
+        { sourceResourceId: 'asset-a', targetResourceId: 'asset-b' },
+      ],
+      taskFlows: [
+        {
+          sourceResourceIds: ['asset-a', 'asset-b'],
+          targetResourceIds: ['asset-c'],
+        },
+      ],
+    };
+    expect(createResourceTopologySignature(topology)).toBe(
+      createResourceTopologySignature({
+        referenceEdges: [...topology.referenceEdges].reverse(),
+        taskFlows: [
+          {
+            sourceResourceIds: ['asset-b', 'asset-a', 'asset-a'],
+            targetResourceIds: ['asset-c'],
+          },
+        ],
+      }),
+    );
+  });
+
+  it('keeps large topology signatures bounded without using resource labels', () => {
+    const signature = createResourceTopologySignature({
+      referenceEdges: Array.from({ length: 4095 }, (_, index) => ({
+        sourceResourceId: `resource-${index}`,
+        targetResourceId: `resource-${index + 1}`,
+      })),
+      taskFlows: [],
+    });
+
+    expect(signature).toMatch(/^[0-9a-f]{8}:[0-9a-f]{8}:[0-9a-f]{8}$/u);
+    expect(signature).toHaveLength(26);
+  });
+
   it('waits for dependency graph initialization before reading or writing layout', async () => {
     const updates: ProjectResourceCanvasPosition[][] = [];
     const invoke = vi.fn(
@@ -131,7 +177,7 @@ describe('useProjectResourceCanvasLayout', () => {
     await waitFor(() => expect(updates).toHaveLength(1));
     expect(result.current.layout.positions[0]).toMatchObject({
       resourceId: 'resource-a',
-      x: 392,
+      x: dependencySlotWidth * 2,
       manuallyPlaced: false,
     });
     expect(invoke.mock.calls[0]?.[0]).toBe(
@@ -186,13 +232,13 @@ describe('useProjectResourceCanvasLayout', () => {
         }),
         expect.objectContaining({
           resourceId: 'resource-depth-1',
-          x: 196,
+          x: dependencySlotWidth,
           y: 0,
           manuallyPlaced: false,
         }),
         expect.objectContaining({
           resourceId: 'resource-depth-2',
-          x: 392,
+          x: dependencySlotWidth * 2,
           y: 0,
           manuallyPlaced: false,
         }),
@@ -242,7 +288,7 @@ describe('useProjectResourceCanvasLayout', () => {
       expect.arrayContaining([
         expect.objectContaining({
           resourceId: 'resource-a',
-          x: 392,
+          x: dependencySlotWidth * 2,
           manuallyPlaced: false,
         }),
         expect.objectContaining({
@@ -255,6 +301,80 @@ describe('useProjectResourceCanvasLayout', () => {
     );
   });
 
+  it('rederives automatic positions when topology changes without a depth change', async () => {
+    const resources = [
+      resource('resource-a'),
+      { ...resource('resource-b'), dependencyDepth: 1 },
+      { ...resource('resource-c'), dependencyDepth: 1 },
+    ];
+    const updates: ProjectResourceCanvasPosition[][] = [];
+    const invoke = vi.fn(
+      async (command: string, args?: Record<string, unknown>) => {
+        if (command === 'read_local_project_resource_canvas_layout') {
+          return persistedLayout('dependency', 4, [
+            automaticPosition('resource-a', 0, 0),
+            automaticPosition('resource-b', 196, 128),
+            automaticPosition('resource-c', 196, 0),
+          ]);
+        }
+        if (command === 'update_local_project_resource_canvas_layout') {
+          const positions = structuredClone(
+            args?.positions as ProjectResourceCanvasPosition[],
+          );
+          updates.push(positions);
+          return {
+            status: 'updated' as const,
+            layout: persistedLayout(
+              'dependency',
+              updates.length + 4,
+              positions,
+            ),
+          };
+        }
+        throw new Error(`unexpected invoke ${command}`);
+      },
+    );
+    window.__TAURI__ = { core: { invoke } };
+    const { rerender } = renderHook(
+      ({ topology }) =>
+        useProjectResourceCanvasLayout({
+          projectPath,
+          projectId,
+          mode: 'dependency',
+          resources,
+          topology,
+          rederiveAutomaticPositions: true,
+        }),
+      {
+        initialProps: {
+          topology: {
+            referenceEdges: [
+              {
+                sourceResourceId: 'resource-a',
+                targetResourceId: 'resource-b',
+              },
+            ],
+            taskFlows: [],
+          },
+        },
+      },
+    );
+
+    await waitFor(() => expect(updates).toHaveLength(1));
+    rerender({
+      topology: {
+        referenceEdges: [
+          { sourceResourceId: 'resource-a', targetResourceId: 'resource-c' },
+        ],
+        taskFlows: [],
+      },
+    });
+    await waitFor(() => expect(updates).toHaveLength(2));
+    expect(
+      updates[1]?.find(({ resourceId }) => resourceId === 'resource-c'),
+    ).toMatchObject({ x: dependencySlotWidth, y: 0, manuallyPlaced: false });
+  });
+
   it('rejects an unsafe revision from the initial IPC read without writing', async () => {
     const resourceA = resource('resource-a');
     const invoke = vi.fn(async (command: string) => {
diff --git a/apps/ai-game-creator-shell/tests/useProjectResourceCardPreviews.test.ts b/apps/ai-game-creator-shell/tests/useProjectResourceCardPreviews.test.ts
new file mode 100644
index 000000000..53e6adb70
--- /dev/null
+++ b/apps/ai-game-creator-shell/tests/useProjectResourceCardPreviews.test.ts
@@ -0,0 +1,686 @@
+// @vitest-environment jsdom
+
+import { act, cleanup, renderHook, waitFor } from '@testing-library/react';
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+
+import { isProjectResourcePreviewCancellation } from '../src/services/projectResourcePreviewTransport';
+import {
+  PROJECT_RESOURCE_CARD_PREVIEW_CACHE_BYTE_LIMIT,
+  PROJECT_RESOURCE_CARD_PREVIEW_CACHE_LIMIT,
+  projectResourceCardPreviewEvictionIdentities,
+} from '../src/view/project-development/resourceCardPreviewModel';
+import type { ProjectResource } from '../src/view/project-development/resourceProjectionModel';
+import { useProjectResourceCardPreviews } from '../src/view/project-development/useProjectResourceCardPreviews';
+
+const originalCreateObjectUrl = Object.getOwnPropertyDescriptor(
+  URL,
+  'createObjectURL',
+);
+const originalRevokeObjectUrl = Object.getOwnPropertyDescriptor(
+  URL,
+  'revokeObjectURL',
+);
+
+function resource(
+  id: string,
+  input: Partial<ProjectResource> = {},
+): ProjectResource {
+  return {
+    id,
+    category: 'art',
+    subtype: 'image',
+    label: id,
+    path: `assets/${id}.png`,
+    mediaType: 'image/png',
+    sourceLabel: '测试',
+    taskTitle: null,
+    manifestAssetId: id,
+    producerTaskId: null,
+    externalResourceId: null,
+    referenceResourceIds: [],
+    dependencies: [],
+    dependencyDepth: 0,
+    ...input,
+  };
+}
+
+function preview(path: string, mediaType = 'image/png') {
+  return {
+    path,
+    mediaType,
+    byteLen: 4,
+    dataUrl: `data:${mediaType};base64,dGVzdA==`,
+  };
+}
+
+function deferred<T>() {
+  let resolve!: (value: T) => void;
+  const promise = new Promise<T>((next) => {
+    resolve = next;
+  });
+  return { promise, resolve };
+}
+
+function previewReadCalls(invoke: ReturnType<typeof vi.fn>) {
+  return invoke.mock.calls.filter(([command]) =>
+    String(command).startsWith('read_local_project_'),
+  );
+}
+
+type DeferredPreview = ReturnType<typeof deferred<ReturnType<typeof preview>>>;
+
+beforeEach(() => {
+  let nextObjectUrl = 0;
+  Object.defineProperties(URL, {
+    createObjectURL: {
+      configurable: true,
+      value: vi.fn(() => `blob:resource-preview-${nextObjectUrl++}`),
+    },
+    revokeObjectURL: {
+      configurable: true,
+      value: vi.fn(),
+    },
+  });
+});
+
+afterEach(() => {
+  cleanup();
+  window.__TAURI__ = undefined;
+  vi.restoreAllMocks();
+  if (originalCreateObjectUrl) {
+    Object.defineProperty(URL, 'createObjectURL', originalCreateObjectUrl);
+  } else {
+    Reflect.deleteProperty(URL, 'createObjectURL');
+  }
+  if (originalRevokeObjectUrl) {
+    Object.defineProperty(URL, 'revokeObjectURL', originalRevokeObjectUrl);
+  } else {
+    Reflect.deleteProperty(URL, 'revokeObjectURL');
+  }
+});
+
+describe('useProjectResourceCardPreviews', () => {
+  it('only treats the exact native cancellation category as cancellation', () => {
+    const cancellation = 'project-resource-preview-scope-cancelled';
+    expect(isProjectResourcePreviewCancellation(cancellation)).toBe(true);
+    expect(isProjectResourcePreviewCancellation(new Error(cancellation))).toBe(
+      true,
+    );
+    expect(
+      isProjectResourcePreviewCancellation(
+        `资源路径包含 ${cancellation} 但读取失败`,
+      ),
+    ).toBe(false);
+    expect(
+      isProjectResourcePreviewCancellation({ message: cancellation }),
+    ).toBe(false);
+  });
+
+  it('evicts by total retained bytes before the item limit and preserves an active preview', () => {
+    const mebibyte = 1024 * 1024;
+    expect(
+      projectResourceCardPreviewEvictionIdentities(
+        [
+          { identity: 'active', retainedBytes: 32 * mebibyte },
+          { identity: 'older', retainedBytes: 32 * mebibyte },
+          { identity: 'newer', retainedBytes: 32 * mebibyte },
+        ],
+        'active',
+      ),
+    ).toEqual(['older']);
+    expect(
+      projectResourceCardPreviewEvictionIdentities(
+        Array.from(
+          { length: PROJECT_RESOURCE_CARD_PREVIEW_CACHE_LIMIT + 1 },
+          (_, index) => ({ identity: `item-${index}`, retainedBytes: 1 }),
+        ),
+        null,
+      ),
+    ).toEqual(['item-0']);
+    expect(PROJECT_RESOURCE_CARD_PREVIEW_CACHE_BYTE_LIMIT).toBe(64 * mebibyte);
+    expect(
+      projectResourceCardPreviewEvictionIdentities(
+        [
+          { identity: 'invalid', retainedBytes: Number.NaN },
+          { identity: 'older-valid', retainedBytes: 40 * mebibyte },
+          { identity: 'newer-valid', retainedBytes: 40 * mebibyte },
+        ],
+        null,
+      ),
+    ).toEqual(['invalid', 'older-valid']);
+    expect(
+      projectResourceCardPreviewEvictionIdentities(
+        [
+          { identity: 'invalid', retainedBytes: -1 },
+          { identity: 'valid', retainedBytes: 1 },
+        ],
+        null,
+      ),
+    ).toEqual(['invalid']);
+    expect(
+      projectResourceCardPreviewEvictionIdentities(
+        [
+          {
+            identity: 'oversized-active',
+            retainedBytes: PROJECT_RESOURCE_CARD_PREVIEW_CACHE_BYTE_LIMIT + 1,
+          },
+        ],
+        'oversized-active',
+      ),
+    ).toEqual(['oversized-active']);
+  });
+
+  it('retries transient failures only for explicit detail intent', async () => {
+    const art = resource('retry-art');
+    const invoke = vi
+      .fn()
+      .mockRejectedValueOnce(
+        new Error('读取项目媒体资源失败：temporarily busy'),
+      )
+      .mockResolvedValueOnce(preview(art.path));
+    window.__TAURI__ = { core: { invoke } };
+    const canvasRef = { current: document.createElement('div') };
+    const { result } = renderHook(() =>
+      useProjectResourceCardPreviews({
+        projectPath: '/tmp/preview-retry',
+        projectId: 'preview-retry',
+        mode: 'dependency',
+        resources: [art],
+        canvasRef,
+      }),
+    );
+    const identity = result.current.identityByResourceId.get(art.id)!;
+
+    act(() => result.current.requestPreview(art, identity, 'visible'));
+    await waitFor(() =>
+      expect(result.current.previews.get(identity)).toMatchObject({
+        status: 'failed',
+        retryable: true,
+      }),
+    );
+    expect(result.current.previews.get(identity)).toMatchObject({
+      error: expect.stringContaining('关闭详情并重试'),
+    });
+
+    act(() => result.current.requestPreview(art, identity, 'visible'));
+    expect(invoke).toHaveBeenCalledTimes(1);
+
+    act(() => result.current.requestPreview(art, identity, 'detail'));
+    await waitFor(() =>
+      expect(result.current.previews.get(identity)?.status).toBe('loaded'),
+    );
+    expect(invoke).toHaveBeenCalledTimes(2);
+  });
+
+  it('keeps permanent decode and safety failures cached across user intent', async () => {
+    const art = resource('broken-art');
+    const invoke = vi
+      .fn()
+      .mockRejectedValue(
+        new Error('image.inspect 图片结构无效：assets/broken.png'),
+      );
+    window.__TAURI__ = { core: { invoke } };
+    const canvasRef = { current: document.createElement('div') };
+    const { result } = renderHook(() =>
+      useProjectResourceCardPreviews({
+        projectPath: '/tmp/preview-permanent',
+        projectId: 'preview-permanent',
+        mode: 'dependency',
+        resources: [art],
+        canvasRef,
+      }),
+    );
+    const identity = result.current.identityByResourceId.get(art.id)!;
+
+    act(() => result.current.requestPreview(art, identity, 'visible'));
+    await waitFor(() =>
+      expect(result.current.previews.get(identity)).toMatchObject({
+        status: 'failed',
+        retryable: false,
+      }),
+    );
+    expect(result.current.previews.get(identity)).toMatchObject({
+      error: expect.not.stringContaining('关闭详情并重试'),
+    });
+
+    act(() => result.current.requestPreview(art, identity, 'detail'));
+    act(() => result.current.requestPreview(art, identity, 'play'));
+    expect(invoke).toHaveBeenCalledTimes(1);
+  });
+
+  it('reserves the bounded queue for intent and drains play before prefetch', async () => {
+    const resources = Array.from({ length: 99 }, (_, index) =>
+      resource(`queue-${index.toString().padStart(3, '0')}`),
+    );
+    const audio = resource('queue-audio', {
+      category: 'audio',
+      subtype: 'background-music',
+      path: 'assets/queue-audio.mp3',
+      mediaType: 'audio/mpeg',
+    });
+    resources.push(audio);
+    const firstRead = deferred<ReturnType<typeof preview>>();
+    const secondRead = deferred<ReturnType<typeof preview>>();
+    const thirdRead = deferred<ReturnType<typeof preview>>();
+    const blockedReads = [firstRead, secondRead, thirdRead];
+    const invoke = vi.fn((_: string, args?: Record<string, unknown>) => {
+      const blocked = blockedReads[invoke.mock.calls.length - 1];
+      return blocked?.promise ?? new Promise(() => undefined);
+    });
+    window.__TAURI__ = { core: { invoke } };
+    const canvasRef = { current: document.createElement('div') };
+    const { result } = renderHook(() =>
+      useProjectResourceCardPreviews({
+        projectPath: '/tmp/preview-queue',
+        projectId: 'preview-queue',
+        mode: 'dependency',
+        resources,
+        canvasRef,
+      }),
+    );
+
+    act(() => {
+      for (const candidate of resources.slice(0, 99)) {
+        result.current.requestPreview(
+          candidate,
+          result.current.identityByResourceId.get(candidate.id)!,
+          'visible',
+        );
+      }
+      for (const candidate of resources.slice(96, 99)) {
+        result.current.requestPreview(
+          candidate,
+          result.current.identityByResourceId.get(candidate.id)!,
+          'detail',
+        );
+      }
+      result.current.requestPreview(
+        audio,
+        result.current.identityByResourceId.get(audio.id)!,
+        'play',
+      );
+    });
+    expect(invoke).toHaveBeenCalledTimes(3);
+
+    await act(async () => {
+      firstRead.resolve(preview(resources[0]!.path));
+      await Promise.resolve();
+      await Promise.resolve();
+    });
+
+    expect(invoke.mock.calls[3]?.[0]).toBe('read_local_project_media_preview');
+    expect(invoke.mock.calls[3]?.[1]).toMatchObject({
+      relativePath: audio.path,
+    });
+  });
+
+  it('releases Blob URLs while continuously browsing beyond the cache limit', async () => {
+    const resources = Array.from(
+      { length: PROJECT_RESOURCE_CARD_PREVIEW_CACHE_LIMIT + 7 },
+      (_, index) =>
+        resource(`video-${index}`, {
+          path: `assets/video-${index}.mp4`,
+          mediaType: 'video/mp4',
+        }),
+    );
+    const invoke = vi.fn(async (_: string, args?: Record<string, unknown>) =>
+      preview(String(args?.relativePath ?? ''), 'video/mp4'),
+    );
+    window.__TAURI__ = { core: { invoke } };
+    const canvasRef = { current: document.createElement('div') };
+    const { result, unmount } = renderHook(() =>
+      useProjectResourceCardPreviews({
+        projectPath: '/tmp/preview-continuous-media',
+        projectId: 'preview-continuous-media',
+        mode: 'dependency',
+        resources,
+        canvasRef,
+      }),
+    );
+
+    for (const candidate of resources) {
+      const identity = result.current.identityByResourceId.get(candidate.id)!;
+      act(() => result.current.requestPreview(candidate, identity, 'visible'));
+      await waitFor(() =>
+        expect(result.current.previews.get(identity)?.status).toBe('loaded'),
+      );
+    }
+
+    expect(
+      Array.from(result.current.previews.values()).filter(
+        (state) => state.status === 'loaded',
+      ),
+    ).toHaveLength(PROJECT_RESOURCE_CARD_PREVIEW_CACHE_LIMIT);
+    expect(URL.createObjectURL).toHaveBeenCalledTimes(resources.length);
+    expect(URL.revokeObjectURL).toHaveBeenCalledTimes(7);
+
+    unmount();
+    expect(URL.revokeObjectURL).toHaveBeenCalledTimes(resources.length);
+  });
+
+  it('releases each Blob URL once when identity changes and a retry replaces state', async () => {
+    const original = resource('changing-art');
+    const replacement = resource('changing-art', {
+      path: 'assets/changing-art-v2.png',
+    });
+    const invoke = vi.fn(async (_: string, args?: Record<string, unknown>) =>
+      preview(String(args?.relativePath ?? '')),
+    );
+    window.__TAURI__ = { core: { invoke } };
+    const canvasRef = { current: document.createElement('div') };
+    const { result, rerender, unmount } = renderHook(
+      (resources: ProjectResource[]) =>
+        useProjectResourceCardPreviews({
+          projectPath: '/tmp/preview-identity-change',
+          projectId: 'preview-identity-change',
+          mode: 'dependency',
+          resources,
+          canvasRef,
+        }),
+      { initialProps: [original] },
+    );
+    const originalIdentity = result.current.identityByResourceId.get(
+      original.id,
+    )!;
+
+    act(() =>
+      result.current.requestPreview(original, originalIdentity, 'visible'),
+    );
+    await waitFor(() =>
+      expect(result.current.previews.get(originalIdentity)?.status).toBe(
+        'loaded',
+      ),
+    );
+    expect(URL.revokeObjectURL).not.toHaveBeenCalled();
+
+    rerender([replacement]);
+    const replacementIdentity = result.current.identityByResourceId.get(
+      replacement.id,
+    )!;
+    expect(replacementIdentity).not.toBe(originalIdentity);
+    await waitFor(() =>
+      expect(result.current.previews.has(originalIdentity)).toBe(false),
+    );
+    expect(URL.revokeObjectURL).toHaveBeenCalledTimes(1);
+    expect(URL.revokeObjectURL).toHaveBeenLastCalledWith(
+      'blob:resource-preview-0',
+    );
+
+    act(() =>
+      result.current.requestPreview(replacement, replacementIdentity, 'detail'),
+    );
+    await waitFor(() =>
+      expect(result.current.previews.get(replacementIdentity)?.status).toBe(
+        'loaded',
+      ),
+    );
+    act(() =>
+      result.current.failPreview(replacementIdentity, '暂时失败', true),
+    );
+    expect(URL.revokeObjectURL).toHaveBeenCalledTimes(2);
+    expect(URL.revokeObjectURL).toHaveBeenLastCalledWith(
+      'blob:resource-preview-1',
+    );
+
+    act(() =>
+      result.current.requestPreview(replacement, replacementIdentity, 'detail'),
+    );
+    await waitFor(() =>
+      expect(result.current.previews.get(replacementIdentity)?.status).toBe(
+        'loaded',
+      ),
+    );
+    unmount();
+    expect(URL.revokeObjectURL).toHaveBeenCalledTimes(3);
+    expect(URL.revokeObjectURL).toHaveBeenLastCalledWith(
+      'blob:resource-preview-2',
+    );
+  });
+
+  it('cancels the old native scope before issuing a fresh scope and ignores an old finally', async () => {
+    const scopeAResources = Array.from({ length: 3 }, (_, index) =>
+      resource(`scope-a-${index}`),
+    );
+    const scopeBResources = Array.from({ length: 4 }, (_, index) =>
+      resource(`scope-b-${index}`),
+    );
+    const pending: Array<{
+      path: string;
+      read: DeferredPreview;
+    }> = [];
+    const invoke = vi.fn((command: string, args?: Record<string, unknown>) => {
+      if (command === 'cancel_local_project_resource_preview_scope') {
+        return Promise.resolve();
+      }
+      const read = deferred<ReturnType<typeof preview>>();
+      pending.push({ path: String(args?.relativePath ?? ''), read });
+      return read.promise;
+    });
+    window.__TAURI__ = { core: { invoke } };
+    const canvasRef = { current: document.createElement('div') };
+    const { result, rerender } = renderHook(
+      (props: {
+        projectPath: string;
+        projectId: string;
+        resources: ProjectResource[];
+      }) =>
+        useProjectResourceCardPreviews({
+          ...props,
+          mode: 'dependency',
+          canvasRef,
+        }),
+      {
+        initialProps: {
+          projectPath: '/tmp/preview-scope-a',
+          projectId: 'preview-scope-a',
+          resources: scopeAResources,
+        },
+      },
+    );
+
+    act(() => {
+      for (const candidate of scopeAResources) {
+        result.current.requestPreview(
+          candidate,
+          result.current.identityByResourceId.get(candidate.id)!,
+          'visible',
+        );
+      }
+    });
+    expect(previewReadCalls(invoke)).toHaveLength(3);
+    const firstScopeId = previewReadCalls(invoke)[0]?.[1]?.scopeId;
+    expect(firstScopeId).toEqual(expect.any(String));
+    expect(previewReadCalls(invoke).map((call) => call[1]?.scopeId)).toEqual([
+      firstScopeId,
+      firstScopeId,
+      firstScopeId,
+    ]);
+    expect(
+      new Set(previewReadCalls(invoke).map((call) => call[1]?.requestId)).size,
+    ).toBe(3);
+
+    rerender({
+      projectPath: '/tmp/preview-scope-b',
+      projectId: 'preview-scope-b',
+      resources: scopeBResources,
+    });
+    act(() => {
+      for (const candidate of scopeBResources) {
+        result.current.requestPreview(
+          candidate,
+          result.current.identityByResourceId.get(candidate.id)!,
+          'visible',
+        );
+      }
+    });
+    const cancelCallIndex = invoke.mock.calls.findIndex(
+      ([command]) => command === 'cancel_local_project_resource_preview_scope',
+    );
+    const firstScopeBReadIndex = invoke.mock.calls.findIndex(
+      ([command, args]) =>
+        String(command).startsWith('read_local_project_') &&
+        args?.projectPath === '/tmp/preview-scope-b',
+    );
+    expect(cancelCallIndex).toBeGreaterThanOrEqual(0);
+    expect(cancelCallIndex).toBeLessThan(firstScopeBReadIndex);
+    expect(invoke.mock.calls[cancelCallIndex]?.[1]).toEqual({
+      scopeId: firstScopeId,
+    });
+    expect(previewReadCalls(invoke)).toHaveLength(6);
+    const secondScopeId = previewReadCalls(invoke)[3]?.[1]?.scopeId;
+    expect(secondScopeId).toEqual(expect.any(String));
+    expect(secondScopeId).not.toBe(firstScopeId);
+
+    await act(async () => {
+      pending[0]!.read.resolve(preview(pending[0]!.path));
+      await Promise.resolve();
+      await Promise.resolve();
+    });
+    expect(previewReadCalls(invoke)).toHaveLength(6);
+
+    await act(async () => {
+      pending[3]!.read.resolve(preview(pending[3]!.path));
+      await Promise.resolve();
+      await Promise.resolve();
+    });
+    await waitFor(() => expect(previewReadCalls(invoke)).toHaveLength(7));
+  });
+
+  it('rotates the native scope for a mode-only change and cancels the final scope on unmount', () => {
+    const art = resource('mode-switch-art');
+    const invoke = vi.fn((command: string) => {
+      if (command === 'cancel_local_project_resource_preview_scope') {
+        return Promise.resolve();
+      }
+      return new Promise(() => undefined);
+    });
+    window.__TAURI__ = { core: { invoke } };
+    const canvasRef = { current: document.createElement('div') };
+    const { result, rerender, unmount } = renderHook(
+      (mode: 'dependency' | 'type') =>
+        useProjectResourceCardPreviews({
+          projectPath: '/tmp/preview-mode-switch',
+          projectId: 'preview-mode-switch',
+          mode,
+          resources: [art],
+          canvasRef,
+        }),
+      { initialProps: 'dependency' as const },
+    );
+
+    act(() =>
+      result.current.requestPreview(
+        art,
+        result.current.identityByResourceId.get(art.id)!,
+        'visible',
+      ),
+    );
+    const firstScopeId = previewReadCalls(invoke)[0]?.[1]?.scopeId;
+    expect(firstScopeId).toEqual(expect.any(String));
+
+    rerender('type');
+    expect(invoke).toHaveBeenCalledWith(
+      'cancel_local_project_resource_preview_scope',
+      { scopeId: firstScopeId },
+    );
+    act(() =>
+      result.current.requestPreview(
+        art,
+        result.current.identityByResourceId.get(art.id)!,
+        'visible',
+      ),
+    );
+    const secondScopeId = previewReadCalls(invoke)[1]?.[1]?.scopeId;
+    expect(secondScopeId).toEqual(expect.any(String));
+    expect(secondScopeId).not.toBe(firstScopeId);
+
+    unmount();
+    const cancelledScopeIds = invoke.mock.calls
+      .filter(
+        ([command]) =>
+          command === 'cancel_local_project_resource_preview_scope',
+      )
+      .map((call) => call[1]?.scopeId);
+    expect(cancelledScopeIds).toEqual([firstScopeId, secondScopeId]);
+  });
+
+  it('rejects an A-B-A late result even when scope and identity match again', async () => {
+    const art = resource('aba-art');
+    const pending: DeferredPreview[] = [];
+    const invoke = vi.fn((command: string) => {
+      if (command === 'cancel_local_project_resource_preview_scope') {
+        return Promise.resolve();
+      }
+      const read = deferred<ReturnType<typeof preview>>();
+      pending.push(read);
+      return read.promise;
+    });
+    window.__TAURI__ = { core: { invoke } };
+    const canvasRef = { current: document.createElement('div') };
+    const { result, rerender } = renderHook(
+      (props: { projectPath: string; projectId: string }) =>
+        useProjectResourceCardPreviews({
+          ...props,
+          mode: 'dependency',
+          resources: [art],
+          canvasRef,
+        }),
+      {
+        initialProps: {
+          projectPath: '/tmp/preview-aba-a',
+          projectId: 'preview-aba-a',
+        },
+      },
+    );
+    const firstIdentity = result.current.identityByResourceId.get(art.id)!;
+    act(() => result.current.requestPreview(art, firstIdentity, 'visible'));
+
+    rerender({
+      projectPath: '/tmp/preview-aba-b',
+      projectId: 'preview-aba-b',
+    });
+    rerender({
+      projectPath: '/tmp/preview-aba-a',
+      projectId: 'preview-aba-a',
+    });
+    const currentIdentity = result.current.identityByResourceId.get(art.id)!;
+    expect(currentIdentity).toBe(firstIdentity);
+    act(() => result.current.requestPreview(art, currentIdentity, 'visible'));
+    const readCalls = previewReadCalls(invoke);
+    expect(readCalls).toHaveLength(2);
+    expect(readCalls[1]?.[1]?.scopeId).not.toBe(readCalls[0]?.[1]?.scopeId);
+    const cancelledScopeIds = invoke.mock.calls
+      .filter(
+        ([command]) =>
+          command === 'cancel_local_project_resource_preview_scope',
+      )
+      .map((call) => call[1]?.scopeId);
+    expect(cancelledScopeIds).toEqual([
+      readCalls[0]?.[1]?.scopeId,
+      expect.any(String),
+    ]);
+    expect(cancelledScopeIds[1]).not.toBe(cancelledScopeIds[0]);
+
+    await act(async () => {
+      pending[0]!.resolve(preview(art.path));
+      await Promise.resolve();
+      await Promise.resolve();
+    });
+    expect(result.current.previews.get(currentIdentity)?.status).toBe(
+      'loading',
+    );
+    expect(URL.createObjectURL).not.toHaveBeenCalled();
+
+    await act(async () => {
+      pending[1]!.resolve(preview(art.path));
+      await Promise.resolve();
+      await Promise.resolve();
+    });
+    await waitFor(() =>
+      expect(result.current.previews.get(currentIdentity)?.status).toBe(
+        'loaded',
+      ),
+    );
+    expect(URL.createObjectURL).toHaveBeenCalledTimes(1);
+  });
+});
diff --git a/docs/prd/【AI游戏创作】项目开发工作台PRD-2026-07-20.md b/docs/prd/【AI游戏创作】项目开发工作台PRD-2026-07-20.md
index 282c61124..066d33f4f 100644
--- a/docs/prd/【AI游戏创作】项目开发工作台PRD-2026-07-20.md
+++ b/docs/prd/【AI游戏创作】项目开发工作台PRD-2026-07-20.md
@@ -1,6 +1,6 @@
 # AI 游戏创作项目开发工作台 PRD
 
-更新时间：`2026-08-10`（现有 Godot 项目入口与项目根绑定）
+更新时间：`2026-08-10`（资源卡本体化、分区缩放、同类型依赖聚类与详情优先收口；现有 Godot 项目入口与项目根绑定）
 
 ## 1. 产品定位
 
@@ -50,6 +50,22 @@
 - 资源分区由资源投影固定，前端交互不能改变分类。
 - 资源卡手动拖动、拖动持久化、拖动性能与冲突后的重新拖动提示全部暂缓，不作为当前产品合同或验收条件。
 
+#### 3.3.1 资源管理三个串行阶段
+
+1. 阶段一“资源卡本体化”：`dependency / type` 两种布局共用同一个资源卡组件和预览调度器。图片与安全 SVG 直接显示主体并保留透明棋盘底；视频显示首个可解码画面并可在卡内播放；音频使用清晰的音频视觉和独立播放键；文档显示安全纯文本摘要或稳定类型占位；项目版本不伪造媒体，只显示稳定版本视觉和必要的父子 / 绑定状态。中央详情以元数据、Rust 权威依赖关系和版本信息为主，不重复放大图片、SVG 或视频；文档正文和按用户意图读取的音频控件位于元数据之后。
+2. 阶段二“分区独立缩放”（已完成）同时包含互不替代的分区可视高度和内容倍率。文档、项目版本、美术资源、音乐音效资源的标题栏分别保留高度减小 / 恢复 / 增大，并新增 `50%..200%` 内容缩放减小 / 百分比复位 / 增大；触摸板捏合、`Ctrl/Cmd + wheel` 与按钮使用同一倍率模型，普通双指滚动仍只滚动。高度与倍率都以 `projectId + layoutMode + category` 隔离并只保留在当前会话内存；倍率以分区 viewport 中的手势中心为锚点，逻辑 `x / y`、`180×128` 本体尺寸和媒体比例不变。最小高度固定容纳标题操作与至少一排卡片，最大高度以中央资源画布当前可用高度为上限。分区保持正常文档流，后续分区由外层资源画布滚动访问，单区内容在缩放后仍只在该区内部滚动。两类表现态都不修改 manifest、`game-creator-resource-layout.v1`、布局 CAS 或资源身份，不重建媒体控件、不抢走焦点，也不恢复卡片拖动。
+3. 阶段三“依赖布局聚类”（已完成）：仅在 `dependency` 模式中，按固定资源分区对当前 Rust 只读图返回的同类型精确引用边和同类型聚合任务流做弱连通分组；任务流以流节点连接其成员，绝不展开成资源笛卡尔积，但只作为布局邻近提示，不绘制虚线、不进入画布关系说明。`dependencyDepth` 是唯一横向层级权威；每个相关簇先按“最小深度 -> 最小稳定资源 ID”排序，再在同层进行固定两轮由左至右、由右至左的中位数扫描，平局回退稳定资源 ID；同 SCC/环成员保持连续，环后资源继续按 Rust 深度推进。孤立资源是稳定单例组，紧凑排在相关簇之后，簇之间保持固定留白。跨分类 read model 关系不改变 Rust 业务真相，但不得进入前端布局邻接、关系说明或 SVG；搜索只隐藏卡片和橙色精确引用边，不重算组或压缩坐标。历史 `manuallyPlaced=true` 坐标继续原样保留并参与自动坐标避让。聚类是可派生表现，不新增 manifest 字段、sidecar schema、SpacetimeDB 表或第二套依赖真相。
+
+#### 3.3.2 本体化资源卡交互与性能合同
+
+- 卡片默认可视区域不再显示文件名、资源名称、来源、路径、任务和媒体类型等详细文本。这些字段继续进入搜索索引和中央详情；卡片“打开详情”入口的可访问名称必须包含稳定可辨识的资源名与类别。
+- 卡片外层是非交互容器；“打开详情”与“播放 / 暂停”必须是可分别键盘聚焦的同级按钮，禁止在 `<button>` 中嵌套 `<button>`。播放键不选择资源、不打开详情。
+- 同一时间最多播放一个卡片音频或视频。打开详情、切换布局模式、切换项目、进入运行视图、搜索 / 筛选隐藏当前资源、当前资源被删除或资源身份 / 路径变化时，必须暂停旧媒体并收口待播放意图；卡片卸载还必须执行防御性暂停。同资源 ID 的无关 manifest 更新不得重建控件或抢走焦点。
+- 图片、视频首帧和项目文档只在卡片进入资源画布可见区及小幅预取边界后读取；音频只在用户点击播放后读取。前端逻辑调度器必须使用有界并发、同身份去重、有界 LRU 淘汰，不允许按全部投影同步启动读取。`play > detail > visible` 是固定调度优先级；可见性预取不得占满全部队列容量或静默丢弃播放 / 详情请求，主动请求进入硬上限队列时必须替换最低优先级的排队预取并优先执行。终态预览缓存同时受 `48` 项和 `64 MiB` 总载荷双重上限约束，媒体按解码后的 Blob 字节、文档按 UTF-8 字节计入；Tauri 返回的 data URL 只允许作为 IPC 临时载体，进入 React 状态前必须转换为可撤销的 Blob URL。LRU 淘汰、资源删除、项目 / mode 切换和卸载都必须 `revokeObjectURL`，不能让 base64 字符串或失效 Blob 长期占用 WebView。
+- 卡片读取继续调用 `read_local_project_image_preview`、`read_local_project_media_preview` 和 `read_local_project_text_preview`；项目边界、manifest / 任务登记、`file.read` 策略、普通文件 / 链接、签名、尺寸和读取漂移门禁不变。每个 Hook 挂载及每次 `projectPath + projectId + mode` 变化必须生成不复用的 `scopeId`，每个实际读取生成唯一 `requestId`；每个队列任务和结果继续绑定完整的 `projectPath + projectId + mode + resourceId + category + path + mediaType`。前端 scope epoch 只隔离逻辑队列、缓存和异步回调；三个读取命令在 Tauri 进程中共用唯一的全局 `3` 槽物理读取管理器，不能因项目、mode、Hook 或窗口不同获得额外物理槽。scope 切换或卸载必须调用窄职责 `cancel_local_project_resource_preview_scope`，使等待 permit 和分块读取中的旧任务协作取消；旧 epoch 的 `then / catch / finally` 仍不得写入、释放或扣减新 scope 的前端状态，`A → B → A` 也不得复用第一轮 A 的 scope、请求或迟到结果。
+- 原生读取必须在命令入口、权限 / 登记复核后、打开文件后、每个固定上限读取块之间、签名 / 图片结构校验前、漂移复核前和 base64 编码前检查取消。取消的排队任务不得打开文件，取消的在途任务不得生成 data URL 或 Blob URL；全局 permit 只能在对应原生任务结束后释放。重复 `requestId` 失败关闭，取消未知或已完成 scope 幂等成功；成功、失败和取消均必须清理活动 request / scope registry。为防止近期 request ID 重放和已取消 scope 复活，原生管理器继续保留有界 tombstone：seen request 最多 `8192` 项；非活动 cancelled scope 的保留预算为 `1024` 项，仍有请求的已取消 scope 必须临时钉住，最后一个请求结束后立即重新淘汰到预算内。明确取消只静默收口旧 scope，当前 scope 的真实 transient / permanent 失败语义不变。
+- 安全读取失败、图片解码失败或视频无可解码画面时，卡片展示稳定类型占位，不挂载破图，不降级为项目外 URL 或裸路径读取。滚动可见性不得自动重试已失败预取；读取漂移、文件替换和通用暂时失败标记为 transient，用户再次打开详情或点击播放时可以显式重试。超尺寸、损坏、类型不支持和不安全 SVG 等永久失败继续缓存且不得用“关闭后重试”误导用户。
+
 ### 3.4 数值微调
 
 - 数值修改立即写入当前项目的编辑态配置。
@@ -131,11 +147,11 @@ idle -> focused(document|art|audio|version) -> idle
 ```
 
 - 文档：合法 Agent 文本回执直接使用对话投影内容；项目文件只允许读取当前 manifest 已登记资产或已完成任务产物中的 Markdown、文本、JSON、YAML、TOML，必须经过 `file.read` auto 权限、相对路径、项目边界、普通文件、符号链接 / 硬链接、读取漂移、2 MiB、UTF-8 与扩展名白名单校验。正文使用不执行 HTML、不加载远程图片、不产生可点击外链的安全 Markdown 渲染，并在中央画布内独立滚动；读取失败显示错误空态。
-- 美术：PNG、JPEG、WEBP 继续使用图片魔数与像素边界预览；GIF、SVG、AVIF、BMP、MP4、WebM、MOV 通过新增受控媒体读取链路按文件签名校验后在中央画布放大聚焦。SVG 额外拒绝脚本、事件处理器、外部资源引用和实体声明；视频使用内置播放控件。读取失败显示错误空态。
+- 美术：PNG、JPEG、WEBP、GIF、SVG、AVIF、BMP、MP4、WebM、MOV 只在资源卡本体中按既有受控读取、文件签名与解码门禁展示；中央详情不重复加载或放大图片 / 视频本体。SVG 继续拒绝脚本、事件处理器、外部资源引用和实体声明。
 - 音频：只读取 manifest 已登记音频或已成功导入且登记到 manifest 的附件，按文件签名接受 MP3、WAV、OGG / Opus、M4A、AAC、FLAC；聚焦态展示实际格式、浏览器解码后的时长以及带播放进度和暂停能力的内置播放器。音频任务声明中的未登记路径继续不得读取或播放。
 - 版本：只展示 manifest 中正式、不可变的迭代版本记录；版本卡展示项目修订、创建原因与父版本，聚焦态同时展示直接子版本和资源绑定。点击版本卡后高亮仍存在于当前资源投影中的引用资源；缺失历史资源只保留绑定身份，不生成幽灵资源卡。资源替换仍留给后续切片。
 - mentor 最新决定：资源聚焦不提供工具栏，也不提供工具侧边栏。
-- 点击资源后，中央主视窗从 `resources.list` 切换为 `resources.focused.document / art / audio / version`，左侧平台导航、右侧 Supervisor 对话和底部 Agent 状态栏保持原位；聚焦容器只包含标题、资源主体、必要元数据与右上角收起按钮，不使用页面级浮层或可拖动标题栏。
+- 点击资源后，中央主视窗从 `resources.list` 切换为 `resources.focused.document / art / audio / version`，左侧平台导航、右侧 Supervisor 对话和底部 Agent 状态栏保持原位。聚焦容器以路径、类型、来源任务、Rust 权威依赖层级、同类型上下游、同类型任务流和版本字段为首屏主体；美术图片与视频不在详情页重复展示大尺寸本体，避免遮挡信息。文档正文与按意图加载的音频控制位于元数据之后；不使用页面级浮层或可拖动标题栏。
 - 焦点转换以稳定资源 ID 为准。只有从资源列表进入详情或从一个资源 ID 切换到另一个 ID 时聚焦详情 region；同一资源 ID 因 manifest 更新而重新投影时，不得抢走详情内音频 / 视频控件、文档链接或收起按钮的当前焦点。
 - 显式收起或按 Escape 后恢复进入前的搜索条件、dependency / type 布局模式、资源画布滚动位置和选中资源，并优先把键盘焦点还给原触发资源卡；这些只属于当前前端会话，不写入布局 sidecar。若资源已经被后台删除，必须清理 stale focused / selected ID、关闭详情并把焦点落到“搜索项目资源”，不得落到 `body`。项目切换和进入运行视图必须取消旧项目的焦点恢复意图。
 - 阶段四只新增上述受控读取与媒体展示；阶段六在同一聚焦容器内补齐正式版本只读展示和引用高亮，但不新增资源聚焦工具栏 / 工具侧边栏，不新增美术编辑、音频编辑 / 替换、资源重新生成、版本替换或运行模块。飞书原需求中“编辑并生成新资源”的条件项仍暂缓，不能只打开画板却缺少回写、`referenceResourceIds` 血缘登记、新资源自动选中与邻近布局的完整闭环。
@@ -168,7 +184,7 @@ P0 中 `approvalMode` 只能有效写入 `strict`；其它值只能作为不可
 
 ### 5.2 资源画布布局（P1）
 
-实现状态（2026-08-03）：dependency / type 双模式通过项目内 CAS sidecar 独立持久化；dependency 模式由 Tauri Rust 只读构建关系拓扑与确定性依赖深度、前端 SVG 派生几何，图结构和线段均不写入布局 sidecar。依赖图加载完成前设布局初始化屏障，避免以临时 `dependencyDepth=0` 生成并持久化错误坐标。当前用户入口只允许自动布局与资源卡点击；资源卡手动拖动已按 mentor 决定暂缓。历史 sidecar 坐标继续只读恢复，底层布局读写与 CAS 合同保留，但当前没有用户手动布局入口。资源替换、缩放 / 平移等其余 P1 能力仍按本文非目标保持未实现。
+实现状态（2026-08-10）：dependency / type 双模式通过项目内 CAS sidecar 独立持久化；dependency 模式由 Tauri Rust 只读构建关系拓扑与确定性依赖深度、前端 SVG 派生几何，图结构和线段均不写入布局 sidecar。依赖图加载完成前设布局初始化屏障，避免以临时 `dependencyDepth=0` 生成并持久化错误坐标。当前用户入口只允许自动布局与资源卡点击；资源卡手动拖动已按 mentor 决定暂缓。历史 sidecar 坐标继续只读恢复，底层布局读写与 CAS 合同保留，但当前没有用户手动布局入口。阶段二的分区可视高度与内容倍率都是和 sidecar 完全分离的当前会话表现态；内容倍率不改变持久逻辑坐标或资源身份。整个资源画布的自由平移、资源替换等其余 P1 能力仍按本文非目标保持未实现。
 
 ```ts
 type ProjectResourceCanvasLayout = {
@@ -251,10 +267,11 @@ type UpdateProjectResourceCanvasLayoutResult =
 
 - 资源卡是可点击按钮，只负责选择资源并让中央主视窗进入当前唯一资源聚焦状态；不得绑定卡片级 `pointerdown / pointermove / pointerup / pointercancel` 拖动处理器。
 - 指针移动不得修改卡片 `x / y`、不得产生拖动预览、不得更新依赖线几何，也不得提交手动布局 CAS。卡片 title、cursor、`touch-action` 和 class 不得暗示可拖动。
-- dependency 默认布局按 `dependencyDepth` 形成横向层级，同层资源纵向寻找第一个不重叠位置；type 默认布局固定按“资源子类型 -> 媒体类型 -> 名称 -> 资源 ID”稳定排序，在分区内从左到右、从上到下寻找第一个空位。布局模型的 `subtype` 必填：manifest 资产使用 `asset.kind`，任务产物、导入附件与 Agent 文本成果分别使用稳定的 `task-artifact`、`attachment`、`agent-result`，不得以缺失值或显示文案兜底；资源协调签名必须包含 subtype。卡片尺寸与间距由单一前端布局模型常量维护。
-- type 模式资源集合变化时保留全部仍存在的坐标，只为新 ID 计算默认位置，并删除已确认失效的旧 ID。dependency 模式只永久保留 `manuallyPlaced=true` 的用户坐标；`manuallyPlaced=false` 属于可派生自动位置，在 Rust 关系图首次就绪或可信 producer / dependency depth 变化后按最终拓扑确定性重算。自动重算不得移动手动坐标，协调结果与持久布局逐项一致时不得产生 CAS 写入。
+- dependency 默认布局按 Rust 返回的 `dependencyDepth` 形成横向层级；同层仅在所属固定分区内按精确引用、聚合 task-flow 的稳定邻接、连通簇和固定两轮中位数扫描确定纵向次序，随后寻找第一个不重叠位置。task-flow 只作为聚合超边参与分组和排序，不能生成资源两两边。dependency 自动布局使用专用 `48px` 列间走线区和 `40px` 行间走线区；相关簇以本簇最大层行数为高度，资源较少的层在该高度中居中，避免菱形 / 分叉关系一侧极短、另一侧过长。type 默认布局继续使用原有 `16px` 行列间距，并固定按“资源子类型 -> 媒体类型 -> 名称 -> 资源 ID”稳定排序。布局模型的 `subtype` 必填：manifest 资产使用 `asset.kind`，任务产物、导入附件与 Agent 文本成果分别使用稳定的 `task-artifact`、`attachment`、`agent-result`，不得以缺失值或显示文案兜底；资源协调签名必须包含 subtype。卡片尺寸、间距和 `0..=1_000_000` 坐标上限由前后端同名合同维护。超深依赖仍保留原始 `dependencyDepth` 业务真相，但显示坐标在上限列确定性饱和并纵向避让；自动布局在 IPC 前必须保证全部 `x / y` 合法，不能向 Tauri 永久重放必然失败的坐标。
+- type 模式资源集合变化时保留全部仍存在的坐标，只为新 ID 计算默认位置，并删除已确认失效的旧 ID。dependency 模式只永久保留 `manuallyPlaced=true` 的历史坐标；`manuallyPlaced=false` 属于可派生自动位置，在 Rust 关系图首次就绪、`dependencyDepth` 或资源拓扑身份签名（精确引用端点和聚合 task-flow 成员）变化后按最终拓扑确定性重算。签名以稳定资源 ID 的规范端点 / 成员序列生成固定大小摘要，不使用显示名称或浏览器测量值；自动重算不得移动手动坐标，协调结果与持久布局逐项一致时不得产生 CAS 写入。
 - 搜索或筛选只隐藏卡片，不删除、压缩或重排其坐标；清空搜索后恢复原位置。
-- 窗口尺寸变化只改变可视范围和分区滚动边界，不回写、裁切或缩放持久坐标。当前客户端继续以 `1280×800` 横屏合同验收。
+- 窗口尺寸变化只改变可视范围和分区滚动边界，不回写或裁切持久坐标。当前客户端继续以 `1280×800` 横屏合同验收。
+- 分区高度和内容倍率都不属于逻辑布局几何。资源卡始终使用原 `x / y` 与 `180×128` 逻辑尺寸；内容 plane 只在显示层按 `50%..200%` 变换，并用同比例 frame 形成真实滚动范围。标题栏后的分区 viewport 使用内部滚动暴露缩放后的卡片，整个分区继续参与外层正常文档流。触摸板捏合、`Ctrl/Cmd + wheel` 与缩放按钮共享倍率状态，普通 wheel 不缩放；`Ctrl/Cmd + wheel` 必须由可取消的原生 `{ passive: false }` 监听处理并真实取消 WebView 默认缩放。搜索、项目或 mode 切换均不得把倍率写回布局。分区内部滚动按 `projectId + mode + category` 隔离，外层资源画布按 `projectId + mode` 隔离，二者在详情开关、模式与项目切换后分别恢复。
 - 打开项目、切换 mode 或当前 mode 首次出现新资源时执行“读取 -> 协调 -> 必要时 CAS 写入”；dependency 模式必须先等待与当前 `projectPath + projectId + resource inputs` 匹配的 Rust 图进入 `ready` 或 `failed` 终态，等待期间不得创建 fallback、读取 sidecar、协调资源或入队保存。`failed` 只允许以空图降级初始化一次。项目或 mode 已切换后返回的旧异步结果必须丢弃。
 - 同一 `projectPath + projectId + mode` 的首次读取与资源集合协调必须分开：资源集合变化不得取消已经发出的读取或保存。当前 scope 内资源自动协调写入使用单写者 FIFO，任一时刻最多一个 CAS 在途，后一笔必须使用前一笔成功返回的 revision。切换项目或 mode 后，旧 scope 的在途请求不能阻塞新 scope 队列；前端放弃旧请求槽位并丢弃其迟到响应，后端继续依靠 `expectedProjectId + expectedRevision + 系统锁` 仲裁已发出的请求。
 - 自动协调 CAS 冲突时直接载入返回的最新布局；仍需协调时可以基于权威 revision 最多追加 `2` 次重试，持续跨窗口写入时不得无限自旋。当前提示只说明“布局已在其他窗口更新”，不得要求用户重新拖动。
@@ -271,17 +288,18 @@ type UpdateProjectResourceCanvasLayoutResult =
 - 阶段五实现状态（2026-08-03）：dependency 自动排列同时消费任务 DAG 与精确资源引用。Rust 把可信 producer 的任务深度作为资源深度下限，再对 `asset-reference` 图做迭代式 SCC 压缩与确定性层级传播；被引用资源位于引用资源之前，同一引用环共享稳定深度，环后资源继续递增，没有引用关系的资源保持默认不重叠位置。布局深度通过独立 `dependencyDepths` 返回，不能把 producer assignment 冒充全部资源的布局结果。
 - `producerMappingTruncated=true` 只关闭依赖有界 Agent DB 审计的 `producerAssignments`、`taskFlows` 和 `cyclicTaskIds`。Rust 返回的 `dependencyDepths` 仍是 manifest / 精确引用 read model 的权威结果，前端必须过滤未知资源、负数、非整数和非安全整数后继续消费；不得因 producer 截断清空全部深度，也不得在前端重算替代深度。`referenceEdges`、connection index 中的 reference 关系、`cyclicResourceIds` 和 unresolved reference 继续保持可信。
 - 图层只在 dependency 模式挂载；type 模式不得渲染 SVG、连线或 marker。切换 mode、切换项目或卸载工作台时必须销毁旧图层，并清理尺寸观察和窗口事件监听。
-- 输入固定为当前资源投影的全部卡片身份 / 坐标与 Tauri Rust 返回的 `ProjectResourceGraph` 只读 DTO；Rust 负责资源过滤、去重、迭代式环检测、SCC 压缩后的确定性依赖深度、任务流聚合和一跳连接索引，前端只负责 DTO 防御归一化、浏览器几何与原生 SVG path / marker。SVG 叠加在资源卡底层并设置 `pointer-events: none`，不得引入 D3、React Flow 等图表库，也不得阻断卡片点击。
-- `asset-reference` 表示精确资源引用，使用明亮橙色实线与连续贝塞尔曲线。`GameCreationAppAssetManifestEntry.source.referenceResourceIds` 中的外部资源 ID 必须先唯一匹配另一项资产的 `source.resourceId`，再映射为当前资源卡 ID；缺失、重复或已删除的目标均不得渲染幽灵连线。
-- `task-flow` 表示同一资源类型内的任务产物流转，使用灰色圆头虚线；文档、项目版本、美术、音频之间不得绘制跨分区虚线。任务依赖按 `sourceTaskId -> targetTaskId + section` 分区聚合为一条主线，两端只保留同分区资源并绘制平滑曲线分支，不得出现直角折线；禁止对上下游资源生成笛卡尔积连线。任务主线与分支可以使用不同线宽和透明度表达聚合层级，但不能改变端点或方向语义。
+- 输入固定为当前资源投影的全部卡片身份 / 坐标与 Tauri Rust 返回的 `ProjectResourceGraph` 只读 DTO；Rust 负责资源过滤、去重、迭代式环检测、SCC 压缩后的确定性依赖深度、任务流聚合和一跳连接索引，前端只负责 DTO 防御归一化、逻辑 viewport 裁剪与原生 SVG path / marker。每个固定分区在自己的 `.game-resource-plane` 内持有一个 SVG，SVG 与卡片直接消费同一逻辑坐标、卡片尺寸、CSS scale 和 viewport scroll；端点主路径不得再通过 `getBoundingClientRect` 拼接全局屏幕坐标。SVG 位于资源卡底层并设置 `pointer-events: none`，不得引入 D3、React Flow 等图表库，也不得阻断卡片点击。
+- `asset-reference` 表示精确资源引用；只有两端属于同一固定资源分类时才进入前端布局邻接、无障碍关系说明和 SVG，使用明亮橙色实线与实心箭头。跨分类引用仍可存在于 Rust read model，但资源管理画布不得绘线、不得以它形成布局簇或边界偏置。`GameCreationAppAssetManifestEntry.source.referenceResourceIds` 中的外部资源 ID 必须先唯一匹配另一项资产的 `source.resourceId`，再映射为当前资源卡 ID；缺失、重复或已删除的目标均不得渲染幽灵连线。
+- `task-flow` 表示同一资源类型内的任务产物流转，但资源画布不再绘制灰色虚线或任务流 marker，也不把它加入 `aria-describedby` 关系说明。它只按 `sourceTaskId -> targetTaskId + section` 作为聚合超边参与 dependency 连通簇和中位数排序，禁止对上下游资源生成笛卡尔积邻接；详情仍可展示 Rust read model 已证明的任务信息。
 - 画布资产 producer 只能来自 `agent.runtime.canvas.asset_generate` 的 `assetId -> agentId` 审计且 `agentId` 必须存在于当前 manifest；External Editor `source.taskId` 属于平台生成任务命名空间，禁止当作 manifest task ID。证据缺失、冲突或有界审计读取未覆盖时不生成对应 task flow，不猜测归属。
 - 图模型必须对资源引用图和完整任务依赖图做迭代式环检测，不得用无界递归遍历；参与环的可见边保留渲染并标记 cyclic，环本身不能造成重复生成或死循环。
 - 资源自引用的起点与终点为同一张卡片时，必须绘制在卡片外侧的可见闭环并保留箭头，不得让路径穿过卡片后被底层 SVG 层级遮挡。
-- 搜索只允许为当前可见端点生成几何；任一精确引用端点隐藏时该线隐藏，聚合任务流只保留仍可见的两端分支，任一侧没有可见资源时整条任务流隐藏。
-- 资源点击只进入中央聚焦并保留当前选中卡片，不改变依赖卡片或连线的颜色、线宽与透明度；关系线始终直接展示，不提供点击后的上下游高亮或无关线弱化。
+- 搜索只允许为当前可见端点生成几何；任一精确引用端点隐藏时该橙线隐藏。task-flow 不产生显示几何，搜索也不因此重排布局。
+- 同类型精确引用按稳定边 ID 和对端次序为同一卡片同侧的多条边分配独立端口；横向层级可用时优先左右连接，同列或横向间隙不足时才上下连接。同轴端点直接用直线，需转向时使用正交线段与最大 `10px` 的小圆角，不使用大范围贝塞尔控制柄。端口顺序不使用显示名称、随机数或浏览器枚举顺序，相同输入必须产生相同路径。资源点击只进入中央聚焦并保留当前选中卡片，不改变依赖卡片或连线的颜色、线宽与透明度；关系线始终直接展示，不提供点击后的上下游高亮或无关线弱化。
 - 资源卡 Pointer Move 不改变基础 positions 或 SVG 几何。连线只随布局读取、资源自动协调、搜索、项目切换或 section origin 变化而更新。
-- `ResizeObserver` 在单个图层生命周期只允许构造一次。dependency section 额外提供至少 `64px` 右侧视觉 gutter，确保最右侧自环和箭头可完整滚动显示，但不得修改卡片坐标或布局 sidecar。
-- 阶段五不改变手动位置边界：已有 `manuallyPlaced=true` 坐标原样保留，资源引用新增或变化只允许重新派生 `manuallyPlaced=false` 的自动坐标；任务流继续按任务对与资源分区聚合，禁止为了计算深度或绘线生成资源笛卡尔积。
+- 每个已挂载 dependency 分区最多构造一个 `ResizeObserver`，四区总数最多四个；observer 只维护该分区的逻辑 viewport，不测量或重建卡片屏幕端点。dependency section 额外提供至少 `64px` 右侧视觉 gutter，确保最右侧自环和箭头可完整滚动显示，但不得修改卡片坐标或布局 sidecar。
+- 分区高度、分区内部滚动和窗口 resize 在各分区内通过单一 `requestAnimationFrame` 调度器合并逻辑 viewport 更新，不得在每个 scroll event 中同步重算。浏览器以分区 viewport 原生裁剪同属该 plane 的 SVG 和卡片，因此线段不能穿过标题栏或泄漏到其它分区；一端可见时绘制入向 / 出向边界继续线，两端都离屏时不渲染。项目 / mode 切换或卸载时必须清理对应 observer、scroll 与 window resize 监听。
+- 阶段五不改变手动位置边界：已有 `manuallyPlaced=true` 坐标原样保留，资源引用新增或变化只允许重新派生 `manuallyPlaced=false` 的自动坐标；任务流继续按任务对与资源分区聚合，禁止为了布局分组生成资源笛卡尔积，且不进入 SVG。
 
 ### 5.3 资源类型与替换兼容性（P1）
 
@@ -439,15 +457,17 @@ type ProjectAgentMudPointAttribution = {
 
 ### 7.3 P1 资源依赖关系图验收
 
-1. dependency 模式显示对画布背景至少 `3:1` 对比度的橙色实线资源引用，并只在同一资源类型分区内显示灰色虚线任务流；跨类型不显示虚线，type 模式没有图层或连线。
+1. dependency 模式只显示同一资源类型分区内的精确引用，使用对画布背景至少 `3:1` 对比度的橙色实线箭头；聚合任务流只参与布局，不绘制灰色虚线或 marker。type 模式没有图层或连线。
 2. 精确引用只接受唯一有效的外部资源 ID 映射，删除或不存在的资源不产生幽灵连线。
-3. 多资源任务依赖按资源类型分区后，各分区只形成一条聚合主线与 `O(S+T)` 条端点分支，不产生 `S×T` 连线或跨分区虚线。
+3. 多资源任务依赖按资源类型分区后只形成布局超边，以 `O(S+T)` 成员关系参与聚类，不产生 `S×T` 邻接、SVG 主线、端点分支或跨分区虚线。
 4. 资源引用环和无资源产物参与的任务环都可被有限遍历识别，界面不死循环。
 5. 搜索触发端点过滤；资源点击不改变上下游卡片或任何连线的视觉状态，资源卡指针移动不更新线段，点击与中央聚焦行为不回归。
 6. 切换布局模式或项目后旧 SVG、ResizeObserver 与窗口监听全部清理；图层从不写入 layout sidecar、manifest 或其它持久化。
 7. 4096 资源链式 fixture 继续验证拓扑、聚合复杂度和自动布局性能；拖动局部更新与真实 Chromium 拖动帧预算暂缓，不作为当前验收条件。最右侧自环与箭头仍需完整显示。
 8. Rust 图读取延迟时，dependency sidecar 在图进入 `ready / failed` 前没有读取或写入；首次布局直接使用 Rust 返回的最终 producer 与 dependency depth。Agent DB 有界读取截断时 producer、task flow 与 `cyclicTaskIds` 失败关闭，精确 manifest 引用及 Rust 返回的合法 `dependencyDepths` 继续到达布局层。重新打开包含深度 `0 / 1 / 2` 自动坐标的旧布局时不得降成全 `0` 或持久化扁平布局；手动位置逐项不变，自动位置按最终拓扑协调且相同结果不增加 revision。
-9. 依赖 SVG 作为装饰层不可聚焦并对辅助技术隐藏；画布通过关联的视觉隐藏文本逐条说明当前可见资源引用和任务流，搜索过滤或模式切换后文本与可见关系同步变化。
+9. 依赖 SVG 作为装饰层不可聚焦并对辅助技术隐藏；画布通过关联的视觉隐藏文本逐条说明当前可见的橙色精确引用，搜索过滤或模式切换后文本与可见关系同步变化。task-flow 不进入该关系说明。
+10. 精确引用使用橙色实线和可见箭头；dependency 自动卡片之间保留横向 `48px`、纵向 `40px` 走线区，相关簇的窄层按本簇最大层高度居中。不同横向层级且卡片间有空间时使用左右端口优先的横线，同列、同深度或横向空间不足时才使用上下端口纵向降级。同行 / 同列直接连线，需要转向时只使用正交线段与最大 `10px` 小圆角。同一卡片同侧的多条精确引用按稳定边 ID 与对端位置分配不同端口；自引用继续在卡片右侧外绕，箭头端点与卡片保留固定显示间隙。
+11. 每个分区 SVG 必须位于拥有相应资源卡的 `.game-resource-plane` 内，以同一逻辑坐标随原生滚动和 CSS scale 同步移动；滚动 / 缩放不得通过异步 DOM 屏幕测量重新绑定端点。分区 viewport 原生裁剪本区 SVG，不使用四区 viewport 并集裁剪；一端离屏时只显示对应方向、带同语义箭头的边界继续线，不保留指向已裁剪卡片的悬空主路径，两端离屏时隐藏。搜索隐藏精确引用任一端点时整边隐藏。
 
 ### 7.4 P1 正式项目版本阶段六验收
 
@@ -458,18 +478,28 @@ type ProjectAgentMudPointAttribution = {
 5. 任意现有 manifest 写入只能保留磁盘版本前缀并追加新记录；存储边界以跨进程专用锁串行覆盖旧状态读取、前缀校验、安装和回读，修改、删除、重排或并发旧快照覆盖已有版本时写入失败。
 6. 版本选择和高亮不写 manifest、布局 sidecar 或 project revision；dependency / type 两种布局都可显示绑定高亮，既有依赖关系 SVG 语义不变。
 
-### 7.5 阶段七完整验收
+### 7.5 资源分区独立高度验收
+
+1. 四个分区均可独立缩小、放大和恢复默认高度；任一分区变化时其它分区高度、资源卡尺寸和媒体比例不变。到达上下限时对应按钮同时具备正确的 disabled 视觉与辅助技术语义。
+2. 高度、倍率和分区内部滚动按 `projectId + dependency|type + document|version|art|audio` 隔离，外层资源画布位置按 `projectId + dependency|type` 隔离；切换模式、切换项目和打开 / 关闭资源详情后，分别恢复当前会话中的内外滚动位置，且键盘焦点不被无关重置。
+3. 最小高度可操作标题控制并完整容纳至少一排卡片；最大高度不超过中央资源画布当前可用高度。窗口变小后超界尺寸被永久夹取到新上限，后续放大窗口不自动恢复旧超界值。
+4. 分区放大只在正常文档流中下推后续分区，不使用浮层、绝对定位、负 margin 或 z-index 覆盖。分区内容超出时内部可滚动，外层画布仍可滚动访问其它分区，`1280×800` 无页面级溢出。
+5. dependency 线在高度、分区内部滚动、外层滚动和窗口 resize 后仍与可见卡片端点对齐；单端卡片被分区 viewport 裁掉时只保留边界继续线，不保留悬空主路径，两端都被裁掉时隐藏，线段不穿过标题栏。滚动与 resize 在每个分区内使用单一 `requestAnimationFrame` 合帧，每个分区 plane 最多创建一个 `ResizeObserver` 并在卸载时清理全部监听。
+6. 高度操作不调用 `update_local_project_resource_canvas_layout`，不改 manifest、不更新 sidecar revision；阶段一的图片 / 视频 / 音频 / 文档 / 版本卡片、单媒体播放与中央详情回归全部通过。
+
+### 7.6 阶段七完整验收
 
 1. 对照飞书需求、当前 PRD、技术方案、代码、测试与阶段提交复核阶段零至阶段六；美术编辑生成新资源继续按本 PRD 已确认的闭环条件暂缓，不作为遗漏或伪完成。
-2. AppSurface 同时覆盖文档、图片、SVG、音频和视频聚焦；视频必须使用原生 `controls` 且 `preload="metadata"`，读取策略失败时中央主视窗显示安全空态，右侧对话和底部 Agent 状态栏继续存在。
-3. `1280×800` 应用内浏览器实测 `window`、document 与 body 均无页面级横向或纵向溢出。浏览器开发页受真实登录门禁保护，不为验收绕过认证或伪造 Tauri；工作台内部结构由 AppSurface 集成测试与资源布局 CSS 合同测试复核。
-4. 根目录全量 Vitest、前后端 typecheck / lint / build、Rust workspace test / check、SpacetimeDB schema、原生壳、内容 / 编码、生产运维与部署门禁全部通过后，阶段七才允许提交。
-5. 本地 `.env`、`.env.local`、密钥、缓存、日志和构建产物不进入阶段七提交；提交前再次执行编码检查和 `git diff --check`。
+2. AppSurface 同时覆盖文档、图片、SVG、音频和视频资源卡与中央聚焦：图片、SVG 和视频主体只在卡内展示，中央详情展示元数据与依赖信息且不重复挂载 `img / video`；文档正文与按意图读取的原生音频 `controls` 位于详情元数据之后。读取策略失败时卡片或详情显示与错误类型一致的安全空态，右侧对话和底部 Agent 状态栏继续存在。
+3. 预览回归必须同时覆盖前端意图调度与原生物理读取：连续项目 / mode / Hook / 窗口切换和 `A → B → A` 下，全进程真实读取峰值始终 `<= 3`；旧 scope 的等待与在途任务可取消，新 scope 在旧任务最近取消点后取得 permit；取消任务不进入 base64 / Blob 阶段，不写当前状态，活动 request / scope registry 最终清零。seen request tombstone 最多保留 `8192` 项；非活动 cancelled scope tombstone 的预算为 `1024` 项，仍活动的取消 scope 可为防复活临时超出预算，但必须在对应 scope 结束后立即收敛。不得把这两类防重放 / 防复活 tombstone 误判为活动 registry 泄漏。文档、图片、安全 SVG、视频与音频原有登记、权限、路径、签名、尺寸、链接和漂移门禁必须全部回归。
+4. `1280×800` 必须在当前 HEAD 的真实、已认证应用 WebView / Chromium 中测量 `window`、documentElement 与 body 的 client / scroll 宽高，证明页面级横向和纵向均无溢出，并确认右侧对话、输入区和底部 Agent Dock 的边界全部位于视口内。浏览器开发页受真实登录门禁保护，不为验收绕过认证或伪造 Tauri；AppSurface 与资源布局 CSS 合同测试只作为内部结构回归，不能替代本条真实测量。验证记录必须包含当前 commit、视口、测量值、操作步骤和结果，确保可重复复核。
+5. 根目录全量 Vitest、前后端 typecheck / lint / build、Rust workspace test / check、SpacetimeDB schema、原生壳、内容 / 编码、生产运维与部署门禁全部通过后，阶段七才允许提交。
+6. 本地 `.env`、`.env.local`、密钥、缓存、日志和构建产物不进入阶段七提交；提交前再次执行编码检查和 `git diff --check`。
 
 ## 8. 非目标
 
 - 当前收口不实现资源卡手动拖动，也不实现资源聚焦工具栏、资源聚焦工具侧边栏、美术编辑、音频编辑 / 替换、资源重新生成、资源替换、下一迭代版本创建入口、运行版本切换、版本回滚、运行模块扩展、测试切片、运行态消费版本、数值参数或泥点归因。正式版本记录已经成为 manifest 业务真相，但当前只读取、校验和展示已有记录。
-- 本切片不持久化资源聚焦状态、画布缩放 / 平移、搜索条件、筛选条件或当前 mode；聚焦退出时的列表上下文恢复只限当前前端会话，这些状态如需跨重启保存必须另行扩展合同，不能塞入 `game-creator-resource-layout.v1`。
+- 本切片不持久化资源聚焦状态、分区高度、分区内部滚动、画布缩放 / 平移、搜索条件、筛选条件或当前 mode；聚焦退出时的列表上下文恢复只限当前前端会话，这些状态如需跨重启保存必须另行扩展合同，不能塞入 `game-creator-resource-layout.v1`。
 - 不修改 SpacetimeDB schema。
 - 不开放普通用户 Agent.md/Skill。
 - 不自动确认 Agent 动作，不自动触发可能扣费的生成。
diff --git a/docs/project-memory/plans/【实施计划】资源管理评审缺陷修复与阶段七收口-2026-08-11.md b/docs/project-memory/plans/【实施计划】资源管理评审缺陷修复与阶段七收口-2026-08-11.md
new file mode 100644
index 000000000..b0119f777
--- /dev/null
+++ b/docs/project-memory/plans/【实施计划】资源管理评审缺陷修复与阶段七收口-2026-08-11.md
@@ -0,0 +1,374 @@
+# 资源管理评审缺陷修复与阶段七收口实施计划
+
+日期：`2026-08-11`
+
+状态：`T0–T5 已完成；T6 进行中；T7 未开始`
+
+适用分支：`codex/resource-management-final`
+
+当前实现基线：隔离分支 `codex/resource-management-clean` 的三提交树（基于 `origin/master@3c457feb4c82d123e9bd311ae69aab0192f94e3c`，与源分支本地权威快照逐字节一致）
+
+已融合主线：`origin/master@3c457feb4c82d123e9bd311ae69aab0192f94e3c`
+
+权威产品合同：[`docs/prd/【AI游戏创作】项目开发工作台PRD-2026-07-20.md`](../../prd/【AI游戏创作】项目开发工作台PRD-2026-07-20.md)
+
+长期决策入口：[`docs/project-memory/shared-memory/decision-log.md`](../shared-memory/decision-log.md)
+
+> 本文是本轮资源管理收口期间的临时执行合同。后续 Agent 每次继续本任务时，必须先重新核对当前 Git 状态、最新 `origin/master`、权威 PRD 和本文状态，再从第一个未完成阶段继续；不得把历史测试结果当成当前 HEAD 的证据。本文只在 T7 的删除门禁满足后删除。
+
+## 一、计划用途与更新规则
+
+1. 本文负责把当前评审阻塞项、实现边界、测试矩阵、真实验收、Git 历史整理和最终删除条件收在同一处，避免后续会话只修其中一条后提前宣称完成。
+2. 每个阶段只有在对应实现、测试和证据都完成后，才能把状态从“未开始”改成“已完成”；命令被中断、受环境限制或只通过定向测试时，必须写成“阻塞”或“部分通过”。
+3. 如果代码、最新主线或权威 PRD 与本文冲突，以代码和最新权威文档为准；先局部修订本文和权威文档，再继续编码。
+4. 不把本文写入 `docs/README.md` 或长期共享记忆索引。它是阶段性计划，不是新的产品合同。
+5. `.env`、`.env.local`、密钥、认证状态、日志、缓存、测试数据库和构建产物始终视为用户或本机所有，不得修改、暂存或提交。
+6. 不执行隐式 `stash`、硬重置、覆盖式 checkout 或未获授权的强制推送。需要改写远端 PR 分支历史时，必须先取得用户对 `--force-with-lease` 的明确授权。
+
+## 二、T0 审计结论
+
+### 2.1 当前 Git 状态
+
+- T0 首次审计时 `HEAD` 与上游均为 `d29fc1e0fb62d0714646fe3b7346db1847664693`，主线为 `origin/master@755bf808587a7cb663c458160e1f102a4a676ff8`。
+- T1 于 `2026-08-11` 结束原未完成 merge，形成本地提交 `ac3c028f5`；随后把上一阶段 Native HTTP 候选调整和本轮临时计划保存为本地 checkpoint `bbca9471c`，最后以 `42f1bd359` 融合 `origin/master@aa5c857060af4fe2644b21e0679a727490995935`。
+- `42f1bd359` 形成时已融合 `aa5c857060af4fe2644b21e0679a727490995935`。T5 执行期间重新 fetch 后，`origin/master` 又前进到 `3c457feb4c82d123e9bd311ae69aab0192f94e3c`；先以 `373d03eb3` 保护本轮资源修复现场，再由 `b2be9de2f` 无冲突融合新增 PR #155。该主线提交修改完美像素逻辑分辨率、External v1 文档契约和图片画布生成链路，不直接修改资源预览实现；两份共享记忆文档已并列保留双方新增内容。最新主线现为 `HEAD` 祖先，无 `MERGE_HEAD`、无未解决冲突。
+- 本地快照提交后，任务侧没有未提交文件；未提交区域只保留：
+  - 用户所有的 `.env` 与 `.env.local`；永久排除。
+  - `server-rs/crates/api-server/server-rs/.data/tracking-outbox/` 生成数据；默认从读取、修改、暂存和提交中明确排除，只有取得用户明确授权后才能核对目标并定向清理，且不能扩大删除范围。
+- 按用户要求，上一阶段 Native 候选改动不在 T1 继续复测或阻塞本轮资源预览修复；其最终去留与完整 Native 门禁统一留到 T4/T5。
+
+### 2.2 当前两条 P1 根因
+
+#### P1-A：旧 scope 的 Tauri 读取没有取消，实际资源占用不再全局有界
+
+当前 `useProjectResourceCardPreviews.ts` 在项目或布局 mode 切换时：
+
+- 推进 `scopeEpochRef`；
+- 清空当前队列、pending identity 和终态缓存；
+- 把 `activeReadsRef` 直接换成新 epoch 的 `{ count: 0 }`；
+- 立即允许新 scope 再发起 3 个读取。
+
+但是已经发出的 `read_local_project_image_preview`、`read_local_project_media_preview` 和 `read_local_project_text_preview` 没有 request ID、scope ID 或取消令牌。现有测试把 A scope 的 3 个 Promise 保持挂起后切到 B，并明确期待总 `invoke` 数立即变成 6。这只证明迟到回调不会写错新状态，没有证明底层读取、base64 临时字符串和 WebView 瞬时内存仍然有界。
+
+Tauri 当前读取路径又会整文件读入内存：图片最多 `8 MiB`，文档最多 `2 MiB`，媒体最多 `32 MiB`；媒体随后还会生成 base64 data URL。连续 dependency/type、项目或 A→B→A 切换可以不断叠加旧物理读取，绕过 `64 MiB` 终态缓存预算。
+
+#### P1-B：缺少绑定当前 HEAD 的真实 `1280×800` 验收证据
+
+PRD §7.6.3 已明确要求真实、已认证应用 WebView / Chromium 记录：
+
+- 当前 commit；
+- 真实视口；
+- `window`、`documentElement` 与 `body` 的 client / scroll 宽高；
+- 中央主视窗、右侧对话、输入区和底部 Agent Dock 的关键边界；
+- 操作步骤与结果。
+
+评审截图记录当前 PR 普通评论为空，既有 CI run 也没有对应 artifact。AppSurface、JSDOM 和 CSS 正则测试只能作为结构回归，不能替代这条人工门禁；实施 T6 前还必须在 Gitea 重新核对最新外部状态。该门禁对应 PRD §7.6 第 4 项。
+
+### 2.3 其它评审阻塞项
+
+- Native shell 曾出现 `1800 passed / 1 failed`，失败用例为 `game_chat_pure_continue_inherits_failed_root_semantics_and_manifest_progress`，表现为项目锁占用。必须先得到当前融合树上的可复现结果、第一错误和根因，再确认当前未暂存的 HTTP 插件 feature 调整是否真的相关。
+- 当前 PR 分支包含不符合仓库提交规范的英文 merge 标题、空正文或仅冲突清单正文。最终远端历史不能继续保留这些提交。
+- 当前 HEAD 没有有效审批。最新主线、全部 required CI、真实 `1280×800` 证据和提交历史整理完成后，必须重新请求评审并取得有效批准。
+
+## 三、目标、非目标与不变量
+
+### 3.1 本轮目标
+
+1. 让资源卡预览读取在前端逻辑队列和 Tauri 物理读取两层都保持有界。
+2. 项目或 mode 切换时取消旧 scope 的排队/在途读取，使新 scope 不被旧 scope 长期饿死，也不通过重置前端计数制造物理超额并发。
+3. 保持 `play > detail > visible`、队列硬上限、同身份去重、48 项/64 MiB LRU、Blob URL 回收、transient/permanent 分类与 A→B→A 隔离。
+4. 融合最新主线并解决当前 merge，不回退主线新增的现有 Godot 项目入口和其它现役能力。
+5. 修复或证伪 Native shell 单测失败，跑完当前工作流要求的全部门禁。
+6. 在最终 PR HEAD 上完成真实、已认证 `1280×800` 测量并记录可复核证据。
+7. 用中文标题和逐行中文正文整理 PR 分支历史，重新取得 required CI 与有效评审。
+
+### 3.2 明确非目标
+
+- 不恢复资源卡拖动，不新增手动拖动持久化。
+- 不修改 manifest、项目版本结构、Rust 资源依赖图、SpacetimeDB schema、资源布局 sidecar schema 或布局 CAS。
+- 不改变 `dependencyDepth` 的 Rust 权威地位，不在前端重新推导业务真相。
+- 不放宽项目根、manifest/任务登记、`file.read` 策略、普通文件/链接、签名、尺寸、读取漂移或安全 SVG 门禁。
+- 不新增平行资源页面、第二套预览系统或通用任务调度框架。
+- 不把真实登录信息、项目绝对路径、Cookie 或本机验收资料提交到仓库。
+
+### 3.3 必须保持的现有合同
+
+| 合同 | 必须保持的结果 |
+| --- | --- |
+| 前端优先级 | `play > detail > visible`；主动请求可替换最低优先级排队预取 |
+| 前端逻辑队列 | 总上限 `96`；可见性预取保留主动请求槽位 |
+| 终态缓存 | 最多 `48` 项且最多 `64 MiB`；媒体按 Blob 字节、文档按 UTF-8 字节计入 |
+| IPC 载荷 | data URL 只作临时传输；进入 React 状态前转 Blob URL |
+| 回收 | 淘汰、资源删除、项目/mode 切换、身份变化和卸载均撤销 Blob URL |
+| 身份 | `projectPath + projectId + mode + resourceId + category + path + mediaType` 全量绑定 |
+| 异步隔离 | 旧 epoch 的 then/catch/finally 不写入、不释放也不扣减新 scope 状态 |
+| 媒体行为 | 搜索隐藏、切换视图/项目/mode、详情打开或资源删除时暂停旧媒体 |
+| 安全读取 | 原有三条 Tauri command 名称与全部安全门禁不变 |
+
+## 四、冻结的修复方案
+
+### 4.1 两层调度边界
+
+前端继续负责“用户意图与展示状态”，Tauri 新增唯一的进程级物理读取管理器负责“真实并发与取消”：
+
+```text
+资源卡可见/详情/播放意图
+  -> 前端优先级队列（96，play > detail > visible）
+  -> Tauri requestId + scopeId
+  -> 原生全局读取管理器（所有窗口/项目/mode 合计最多 3 个 permit）
+  -> 权限/登记/路径/签名/漂移门禁
+  -> 有界分块读取与取消检查
+  -> data URL 临时回传
+  -> Blob URL + 48 项/64 MiB 终态 LRU
+```
+
+前端的 3 槽只用于当前 Hook 的逻辑泵；原生 3 槽才是跨 scope、跨 Hook、跨窗口的物理上限。任何旧 scope 都不能因为前端重置计数而获得额外物理读取槽。
+
+### 4.2 scope 与 request 身份
+
+- 每次 Hook 挂载和每次 `projectPath + projectId + mode` 变化都生成新的不透明 `scopeId`；A→B→A 的第三个 scope 不复用第一个 A 的 ID。
+- 每个实际 IPC 读取生成唯一 `requestId`，并继续携带完整资源身份。
+- 三个现有读取命令保留命令名，只增加内部调度所需的 `scopeId/requestId` 参数；不得把三个安全读取入口合并成新的宽泛文件读取命令。
+- 新增窄职责 `cancel_local_project_resource_preview_scope` 命令，只接受不透明 scope ID，不接受路径，也不读取文件。
+- 重复 request ID 失败关闭；取消未知或已经结束的 scope 幂等成功，避免卸载与切换竞态制造用户错误。
+
+### 4.3 原生取消与全局并发
+
+- 在 Tauri app state 中注册唯一 `ProjectResourcePreviewReadManager`，全进程共享 `3` 个 permit。
+- 等待 permit 的任务必须同时等待 scope 取消；旧 scope 一旦取消，尚未取得 permit 的任务立即退出，不进入文件读取。
+- 已取得 permit 的任务使用共享取消令牌，并在以下边界检查取消：命令入口、权限/manifest 登记复核后、打开文件后、每个固定上限读取块之间、媒体签名/图片结构检查前、漂移复核前和 base64 编码前。
+- 物理 permit 只能由对应原生任务在结束或确认取消后释放；前端 scope 切换不得直接释放原生 permit。
+- 读取使用固定小块并继续受现有 `2/8/32 MiB` 文件上限约束。取消后的字节缓冲和临时 base64 不进入返回值；取消不得生成 Blob URL。
+- 原生取消返回稳定的内部取消类别。当前 scope 的真实失败仍按 transient/permanent 规则展示；旧 scope 或明确取消结果静默收口，不能显示成当前资源失败。
+- 原生管理器必须在成功、失败、取消、panic/join error 和窗口卸载路径清理活动 request/scope 注册，不能形成永久活动 registry 泄漏；seen request tombstone 最多保留 `8192` 项；非活动 cancelled scope tombstone 的预算为 `1024` 项，仍有请求的已取消 scope 必须临时钉住，最后一个请求结束后立即重新收敛。
+
+### 4.4 新 scope 不被旧 scope 饿死
+
+- scope 切换时，前端先推进 epoch、停止媒体、清理队列/缓存并向原生管理器发送旧 scope 取消，再泵入新 scope 请求；取消命令不阻塞 React 提交。
+- 新请求可以立即进入原生等待队列；旧排队任务会因取消退出，旧在途任务在最近的分块取消点释放 permit，新 scope 随即取得槽位。
+- 不采用“每个 scope 自己拥有 3 个物理槽”的方案，也不采用仅靠忽略 Promise 结果的伪取消。
+- 如果实施中发现某个平台普通文件读取无法在合理边界内执行协作取消，必须暂停并补充平台级可中断方案；不得退回无限叠加旧读取。
+
+### 4.5 文档先行修正
+
+编码前先局部修正以下权威文档：
+
+- PRD §3.3.2：把“每个 scope 获得独立并发计数”改为“每个 scope 拥有独立逻辑状态/epoch，但物理读取使用进程级全局 3 槽并可取消旧 scope”。
+- PRD §7.6：加入跨 scope 物理并发、取消确认、连续切换和无旧 base64/Blob 残留验收。
+- `decision-log.md` 当前资源管理决策：区分逻辑 epoch 与物理全局调度，纠正会允许 6 个未完成读取并存的旧表述。
+- `pitfalls.md`：新增“读预览与 CAS 写入不同，不能只丢弃旧 Promise 后重置物理槽”的长期排障结论。
+- AI 游戏创作 App 技术方案中与资源预览并发/验收重复的段落同步到同一口径。
+
+## 五、预计改动范围
+
+| 文件 | 预计职责 |
+| --- | --- |
+| `apps/ai-game-creator-shell/src/view/project-development/useProjectResourceCardPreviews.ts` | 生成 scope/request ID、发送取消、保留优先级队列与 epoch 防线、静默处理取消 |
+| `apps/ai-game-creator-shell/src/view/project-development/resourceCardPreviewModel.ts` | 仅在需要时补充窄的调度常量/类型；不承载原生业务规则 |
+| `apps/ai-game-creator-shell/src-tauri/src/resource_preview_scheduler.rs` | 新增进程级 3 槽、活动 scope/request registry、等待取消与清理，以及 `8192 / 1024` 两类有界 tombstone；不读取任意路径 |
+| `apps/ai-game-creator-shell/src-tauri/src/resource_inspect.rs` | 文档/媒体分块读取与取消检查，保留稳定读取和安全 SVG 门禁 |
+| `apps/ai-game-creator-shell/src-tauri/src/image_inspect.rs` | 图片预览读取接入同一取消探针，保留尺寸/签名/漂移门禁 |
+| `apps/ai-game-creator-shell/src-tauri/src/commands.rs` | 三个读取命令接入 manager，并增加窄 scope 取消命令 |
+| `apps/ai-game-creator-shell/src-tauri/src/main.rs` | 注册 app state 与取消 command |
+| `apps/ai-game-creator-shell/tests/useProjectResourceCardPreviews.test.ts` | 改写错误的“6 个挂起读取即成功”用例并补连续切换/取消/ABA 回归 |
+| `apps/ai-game-creator-shell/src-tauri/src/tests/project_tools.rs` 及 scheduler 单测 | 覆盖全局并发、排队取消、分块取消、活动 registry 清理、两类 tombstone 有界淘汰和安全门禁回归 |
+| AppSurface/相关前端测试 | 证明卡片、详情、播放、搜索隐藏与资源切换没有回归 |
+| PRD、技术方案、decision log、pitfalls | 同步最终合同与已验证经验 |
+
+如实际实现需要修改 manifest、资源图、布局 sidecar、SpacetimeDB、外部 API 或媒体安全策略，立即停止并重新评审；这些不属于本计划的默认授权范围。
+
+## 六、阶段执行顺序
+
+### T1：收口当前 merge 与工作区所有权
+
+1. 再次获取并核对最新 `origin/master`；若主线已越过当前融合基线 `aa5c857060af4fe2644b21e0679a727490995935`，更新本文基线后重新审计差异。
+2. 检查 staged merge diff，确认所有冲突解析同时保留资源管理合同和主线 Godot 项目入口。
+3. 单独审计未暂存的 Native shell 候选修复；只有复现结果支持因果时才纳入。
+4. 永久排除 `.env`、`.env.local` 与 tracking-outbox；未取得用户明确授权时不得读取、删除、暂存或提交 tracking-outbox，获授权后也只能核对明确目标并定向清理，不触碰其它目录。
+5. 以中文标题和逐行中文正文结束本地融合，保留一个可回退的本地集成锚点；暂不推送。
+
+退出条件：merge 已结束、最新主线是祖先、无未解决冲突、用户配置未进入 index、`git diff --check` 和 staged diff 审计通过。
+
+### T2：先修正文档合同
+
+1. 按 §4.5 更新 PRD、技术方案、decision log 和 pitfalls。
+2. 明确取消类别、全局 3 槽、scope/request 身份、分块取消点、活动 registry 清理、seen request `8192` 硬上限、cancelled scope `1024` 非活动预算与活动钉住后收敛语义，以及现有安全门禁。
+3. 确认文档没有把 AppSurface/CSS 测试写成 `1280×800` 实测替代品。
+
+退出条件：文档已经具体到可以直接指导 TypeScript/Rust 字段、状态和测试，不再保留“独立 scope 物理 3 槽”的歧义。
+
+### T3：实现可取消的全局预览读取
+
+1. 先实现并单测原生 scheduler、取消令牌和清理守卫。
+2. 把图片、文档、媒体读取改成可检查取消的有界分块读取；保持所有安全门禁和大小上限。
+3. 将三个 Tauri command 接入原生 manager，注册取消 command 与 app state。
+4. 前端生成唯一 scope/request ID，在切换和卸载时取消旧 scope；保留当前优先级、LRU、Blob 回收与 epoch 防线。
+5. 对取消和旧 scope 结果执行静默收口；当前 scope 的真实 transient/permanent 错误行为不变。
+
+退出条件：任意时刻原生实际读取不超过 3；旧 scope 取消后新 scope 能取得槽位；取消任务不编码 data URL、不创建 Blob URL、不污染新 scope。
+
+### T4：补齐本轮资源预览回归
+
+> 2026-08-11 用户补充执行顺序：上一阶段 Native shell 候选故障暂不复测、不阻塞本轮资源预览缺陷修复；先完成并定向验证本轮改动，Native 单项与全量门禁统一保留到 T5 最终验证。
+
+#### 前端/跨层必测矩阵
+
+- `play > detail > visible` 和 96 队列硬上限不回归。
+- 48 项/64 MiB 双重 LRU、连续媒体浏览和 Blob URL 恰好一次回收不回归。
+- A→B 时旧 scope 被取消，不能再把 6 个未取消读取并存当成成功标准。
+- A→B→A、项目切换、dependency/type 快速连续切换至少覆盖多轮；旧 then/catch/finally、取消 ACK 和活动 request registry 清理均不能改写新 scope；两类 tombstone 继续按 `8192 / 1024` 上限有界保留和淘汰。
+- 3 个旧读取挂起时切换 scope：原生活动数峰值始终 `<= 3`，B 在旧读取确认取消后启动，旧任务不进入 base64/Blob 阶段。
+- 取消发生在等待 permit、读取首块后、读取末块前、签名/结构检查前和 base64 前时都可安全退出。
+- 文档/图片/安全 SVG/视频/音频的登记、策略、类型、大小、链接、漂移和替换门禁全部回归。
+- 搜索隐藏立即暂停、详情与播放意图、资源身份变化、卸载和 AppSurface 展示不回归。
+
+退出条件：本轮新增/改写的前端、scheduler、安全读取与 AppSurface 回归全部通过；旧 scope、取消 ACK 和异常/崩溃清理不污染新 scope；Native shell 仍明确留在 T5，不能把“暂缓”写成“已通过”。
+
+### T5：全量本地门禁
+
+进入全量命令前，先单独运行旧 Native shell 失败用例：
+
+```bash
+cargo test --locked --manifest-path apps/ai-game-creator-shell/src-tauri/Cargo.toml game_chat_pure_continue_inherits_failed_root_semantics_and_manifest_progress -- --test-threads=1 --nocapture
+```
+
+若失败，记录第一错误、锁路径、持有者生命周期和最小复现，不先假设是 flaky；同时核对当前 `tauri-plugin-http` feature 调整是否存在直接因果，无因果则从本分支排除该候选改动。定向用例连续通过后再运行完整 Tauri suite 与 `npm run check:native-shells`，不能用单测通过替代完整门禁。
+
+按从窄到宽顺序执行并记录 commit、命令、通过数和失败原因：
+
+```bash
+npm run test -- apps/ai-game-creator-shell/tests/useProjectResourceCardPreviews.test.ts apps/ai-game-creator-shell/tests/appSurface/project-development.suite.ts
+npm run ai-game-creator-shell:typecheck
+cargo test --locked --manifest-path apps/ai-game-creator-shell/src-tauri/Cargo.toml -- --test-threads=1
+npm run ai-game-creator-shell:check
+npm run lint
+npm run test
+npm run build
+npm run check:content
+npm run check:server-rs-ddd
+npm run bgfilter-worker:smoke-test
+npm run check:production-health-patrol
+npm run check:production-api-release
+npm run check:production-api-deploy
+cargo test --locked --workspace --no-fail-fast --manifest-path server-rs/Cargo.toml
+cargo check --locked -p api-server --all-targets --manifest-path server-rs/Cargo.toml
+cargo check --locked -p spacetime-module --manifest-path server-rs/Cargo.toml
+npm run check:native-shells
+npm run check:encoding
+git diff --check
+```
+
+若环境导致 `listen EPERM`、网络依赖下载或真实认证阻塞，必须把它与源码失败分开记录，并在允许的环境重跑对应 required gate；不得把“被中断/被沙箱阻塞”写成通过。
+
+按用户补充要求，最终生产实现树完成上述全量 native 门禁后，若后续只修改测试夹具的确定性而不改变生产实现，可以只运行直接受影响的定向回归、格式与静态检查；T6 推送后的 required CI 仍必须在最终干净提交上全量通过。该窄例外不能用于替代生产代码、依赖图或运行时合同变化后的完整门禁。
+
+退出条件：PRD §7.6 第 5 项对应的本地门禁全部通过，或仅剩必须由 Gitea runner/真实登录环境完成且已明确记录的外部门禁。
+
+### T6：整理提交历史、推送并完成真实验收
+
+#### 干净历史
+
+1. 基于最终最新 `origin/master` 在隔离 worktree 构造干净分支，把最终资源管理树按逻辑提交移植过去；不使用破坏当前用户工作区的 reset/checkout。
+2. 最终 PR 历史不得包含 `d29fc1e0f`、`647820825`、`189e5bb59` 等不合规提交。
+3. 每个提交使用中文标题，标题后逐行写明修改内容。例如：
+
+   ```text
+   修复资源预览跨范围并发泄漏
+
+   增加原生全局有界预览读取与取消协议
+   保持资源安全读取和终态缓存回收合同
+   补齐跨范围取消与内存边界回归测试
+   ```
+
+   资源管理实现与合同、Runtime 测试夹具竞态、Native HTTP 的 OS 自动代理隔离必须分别成组；第三组已由同一源码树上的 A/B 门禁证明必要，不能再混入资源管理提交或省略因果记录。
+
+   - 第一组：资源管理实现、前端/Tauri/AppSurface 测试、PRD/技术方案、临时计划，以及 `decision-log.md` 的资源管理 hunk。
+   - 第二组：`main_loop_tests.rs`、`autonomous_completion_contract_tests.rs` 与 `canvas_generation.rs` 的 Runtime / HTTP 测试夹具确定性修复。
+   - 第三组：`Cargo.toml`、`Cargo.lock`、`check-native-shells.mjs` 与 `decision-log.md` 的 HTTP 边界 hunk。
+
+   `decision-log.md` 横跨第一、第三组，必须按 hunk 暂存；当前本地 checkpoint 不进入最终第四组，全部折叠进上述逻辑提交。
+
+4. 推送前逐文件暂存，只包含任务代码/文档；`.env`、`.env.local`、tracking-outbox、日志、缓存和构建产物必须从暂存和提交中明确排除。tracking-outbox 只有取得用户明确授权后才允许定向清理。
+5. 对同一 PR 分支的历史替换只使用带精确旧 OID 的 `--force-with-lease=<ref>:<oid>`，且执行前必须获得用户明确授权并重新用 `git ls-remote` 核对远端 lease；lease 漂移立即停止，禁止退化为 `--force`，也禁止先普通推送当前不合规历史。
+
+#### Gitea required CI
+
+最终远端 commit 必须同时通过：
+
+- `Project CI / Repository checks (pull_request)`
+- `Project CI / Frontend tests (pull_request)`
+- `Project CI / Backend tests (pull_request)`
+- `Project CI / Native shell tests (pull_request)`
+
+任一 job 失败时，先记录失败 job、第一错误、根因和计划，再修复并重跑；不得只重跑到偶然绿色或跳过 required context。
+
+#### 真实 `1280×800` 验收
+
+只在已推送、CI 对应的当前 HEAD 上执行：
+
+1. 使用真实已认证应用 WebView 或 Chromium，正常登录并打开真实本地项目工作台；不绕过认证，不伪造 Tauri，不把 Cookie/Token 写入证据。
+2. 把内容视口设为精确 `1280×800`，确认 `window.innerWidth === 1280`、`window.innerHeight === 800`。
+3. 至少记录以下值：
+   - `window.innerWidth/innerHeight/devicePixelRatio`；
+   - `document.documentElement.clientWidth/clientHeight/scrollWidth/scrollHeight`；
+   - `document.body.clientWidth/clientHeight/scrollWidth/scrollHeight`；
+   - `.game-project-workbench`、`.game-workbench-stage`、`.game-workbench-chat`、`.project-supervisor-composer`、`.game-agent-dock` 的 `getBoundingClientRect()`；
+   - 每个关键矩形是否满足 `left/top >= 0` 且 `right <= innerWidth`、`bottom <= innerHeight`。
+4. 操作 dependency/type 切换、四分区内外滚动、分区高度/倍率、搜索过滤、文档详情、音频播放、图片/SVG/视频卡和退出详情；确认右侧对话、输入区与底部 Dock 全程在视口内，页面级横向/纵向均无溢出。
+5. 在 PR 普通评论记录最终 commit、平台/WebView 或 Chromium 版本、视口、全部测量值、关键操作、结果和必要截图。截图只作辅助，数值记录才是门禁证据。
+
+退出条件：四个 required CI 全绿，真实测量评论已绑定当前 PR HEAD，且重新请求评审后取得有效批准。
+
+### T7：删除本文并对最终 HEAD 再验收
+
+只有以下条件全部满足时才删除本文：
+
+- [ ] P1-A 的全局有界取消实现和全部回归已完成。
+- [ ] Native shell 阻塞已解决，全部本地门禁已通过。
+- [ ] 最新主线已经成为 PR 分支祖先且无未解决冲突。
+- [ ] 不合规历史已经从远端 PR 分支移除。
+- [ ] 四个 required CI 在删除前的代码完成 commit 上全部通过。
+- [ ] 删除前的代码完成 commit 已有真实 `1280×800` 证据和有效批准。
+- [ ] 没有剩余评审线程、未记录风险或待实现功能被伪称完成。
+
+删除本文后使用单独中文提交，例如：
+
+```text
+删除已完成的资源管理临时计划
+
+移除已全部执行完成的阶段性计划文档
+保留权威 PRD 技术方案与长期决策记录
+```
+
+由于删除会产生新的最终 HEAD，删除提交推送后必须再次：
+
+1. 跑四个 required CI；
+2. 在同一真实环境复核并记录最终 commit 的 `1280×800` 数值（可以引用相同步骤，但必须写出新 commit 和实际结果）；
+3. 确认 Gitea 没有因新提交撤销审批；如审批失效，重新请求并取得批准；
+4. 确认仓库最终树中不存在本文，且 `.env`、`.env.local`、tracking-outbox、日志、缓存和构建产物均未提交；tracking-outbox 仍保持排除，除非用户另行明确授权定向清理。
+
+最终退出条件：计划文档已删除，删除后的最终 HEAD 通过全部 required CI、真实测量和有效审批，PR 无未解决阻塞项。
+
+## 七、阶段状态表
+
+| 阶段 | 状态 | 完成证据 |
+| --- | --- | --- |
+| T0 审计并冻结计划 | 已完成 | 2026-08-11 核对 Git、PRD、前端 Hook、Tauri 读取链路、现有测试与评审截图 |
+| T1 收口 merge 与工作区所有权 | 已完成 | `b2be9de2f` 已无冲突融合 `origin/master@3c457feb4c82d123e9bd311ae69aab0192f94e3c`，最新主线为 `HEAD` 祖先；`.env`、`.env.local` 与 tracking-outbox 始终排除 |
+| T2 修正文档合同 | 已完成 | PRD、技术方案、decision log 与 pitfalls 已明确逻辑 scope、进程级全局 3 槽、scope/request 身份、分块取消点、活动 registry 清理、`8192 / 1024` tombstone 有界淘汰和安全读取不变量；编码检查与 `git diff --check` 通过 |
+| T3 实现全局有界取消 | 已完成 | 新增全进程共享 3 permit scheduler、活动 scope/request registry、seen request `8192` 项硬上限，以及 cancelled scope `1024` 项非活动预算与活动钉住后收敛；permit 和 registration guard 由真实 blocking 任务持有，外层 future abort 不提前释放物理槽或切断取消；三条既有读取命令接入 `spawn_blocking` 和 64 KiB 分块取消，Hook 与 Supervisor 成果图片入口均使用唯一 scope/request 并在切换或卸载时取消；跨窗口 ID fallback 也使用随机熵避免同毫秒碰撞 |
+| T4 本轮资源预览回归 | 已完成 | Hook `10/10`、scheduler `8/8`、resource inspect `4/4`、AppSurface `368/368`、Supervisor 成果图片定向 `1/1`、图片 base64 取消与自动读取策略定向用例通过；新增 outer future abort、cancel 可达性、tombstone 收敛与精确取消错误反例。三条 main-loop 竞态和 pure-continue 用例定向通过，回执夹具同时等待父子 execution lane 收口；shell typecheck、ESLint、`cargo fmt --check`、编码检查、`git diff --check` 通过 |
+| T5 全量本地门禁 | 已完成 | 最新主线融合后，`npm run lint` 全部子门禁通过；`npm run test` 为 `206 files / 2812 passed / 8 skipped / 0 failed`；build、content、server-rs DDD 通过；server-rs workspace 中 api-server `894 passed / 6 ignored`、spacetime-module `230 passed / 1 ignored`、platform-llm `131 passed`、shared-contracts `72 passed`，两个 cargo check 通过；BgFilter worker `4/4`、production health patrol、release 与 deploy 四项 Frontend CI 门禁通过。A 组为显式关闭插件默认 feature 的 `eee777651` 最终生产实现树，完整 `npm run check:native-shells` 通过：Tauri 主测试 `1775 passed / 14 ignored`，integration `2/2 + 14/14`，agent-run smoke、两套 release build 与最终扫描通过。B 组只把 `tauri-plugin-http` 恢复为默认 feature 并运行同一命令：前端 `644/644`、Runtime Core `19/19`、platform-llm `134 passed / 1 ignored`、shared-contracts `11/11` 后，该次 Tauri 结果为 `1760 passed / 15 failed / 14 ignored`；首错把预期 transport/outcome-unknown 改写成代理 `502` 且出现 `Go-http-client/1.1`，其它失败不在本文逐项宣称根因。恢复 A 后 `Cargo.toml` 与 `Cargo.lock` 均重新等同 `eee777651`；Cargo feature 复核证明默认插件会把 `reqwest/system-proxy` 合并到全部原生客户端，故该独立边界保留并在 T6 单独成组。定向复验另发现非阻塞 listener 接受的请求 stream 可在 macOS 继承非阻塞状态，测试 helper 已在读取前显式恢复 blocking 并继续保留 10 秒超时；按用户允许的测试夹具窄验证边界，响应丢失与精确重放两条直接回归随后各 `1/1` 通过。tracking-outbox 最后一次已记录为 `512` 个并明确排除；最终 feature 图无 `system-proxy`，编码、Rustfmt、Node 语法与 `git diff --check` 通过 |
+| T6 干净历史、远端 CI、真实验收与批准 | 进行中 | 已确认 `origin/master@3c457feb4c82d123e9bd311ae69aab0192f94e3c` 未漂移；本地权威快照已提交，隔离分支 `codex/resource-management-clean` 已构造“资源管理实现与合同 / Runtime 与 HTTP 测试夹具竞态 / Native HTTP 系统代理隔离”三组中文提交，并通过 tree hash、逐字节 diff、无 merge、洁净工作树及 `.env*` / tracking-outbox 排除核对。远端覆盖推送尚未获用户授权，禁止执行；required CI、真实 `1280×800` 与有效审批尚未执行 |
+| T7 删除计划并复验最终 HEAD | 未开始 | 待补 |
+
+## 八、最终完成定义
+
+- 资源预览物理读取跨 scope、跨项目、跨 mode 和跨窗口始终全局 `<= 3`，旧 scope 可取消且不再累积 base64/Blob 瞬时内存。
+- 当前优先级、队列、LRU、Blob 回收、媒体暂停、失败重试、ABA epoch 和全部安全读取门禁无回归。
+- 最新主线已融合，现有 Godot 项目入口及其它主线能力无回归。
+- Native shell 单项和全量门禁均通过，四个 Gitea required job 均为最终 HEAD 的绿色结果。
+- 最终 HEAD 的真实、已认证 `1280×800` 数值证据可在 PR 评论复核，AppSurface/CSS 测试没有冒充该证据。
+- PR 历史中的提交标题和正文符合中文规范，远端分支改写经过授权且使用 `--force-with-lease`。
+- `.env`、`.env.local`、密钥、认证资料、tracking-outbox、日志、缓存和构建产物没有进入提交。
+- 本临时计划已按 T7 删除；最终 PR 仍保留同步后的权威 PRD、技术方案、decision log 和 pitfalls。
diff --git a/docs/project-memory/shared-memory/decision-log.md b/docs/project-memory/shared-memory/decision-log.md
index d6fa72fc3..5120c447a 100644
--- a/docs/project-memory/shared-memory/decision-log.md
+++ b/docs/project-memory/shared-memory/decision-log.md
@@ -1,5 +1,49 @@
 # 决策记录
 
+## 2026-08-10 资源管理评审阻塞项按第二轮正式合同修复
+
+- 背景：资源管理第一轮实现后，人工验证继续暴露 WebView 默认缩放、预览队列饥饿、过滤后媒体残留播放、外层滚动串 scope、超深依赖坐标越过 Rust 上限和暂时错误无法重试等问题。部分 PRD / 技术方案仍描述第一轮的中央媒体预览、单全局 Overlay 和统一 section scope，已经与第二轮代码及验收结论冲突。
+- 决策：以当前代码、2026-08-10 最新资源管理决定和第二轮人工验证为正式合同。`Ctrl/Cmd + wheel` 使用原生 `{ passive: false }` 委托监听；预览固定 `play > detail > visible` 且总队列上限 `96`，主动请求可替换最低优先级预取；终态缓存同时限制为 `48` 项与 `64 MiB`，IPC data URL 立即转成可撤销 Blob URL；项目 / mode 使用单调 scope epoch 隔离逻辑队列、缓存与异步回调，但物理读取由 Tauri 进程级唯一 `3` 槽管理器统一限制。每次挂载或 scope 切换生成不复用的 `scopeId`，每次 IPC 读取生成唯一 `requestId`；切换和卸载通过窄取消命令中止旧 scope 的排队 / 分块读取，取消任务不得进入 base64 / Blob 阶段。成功、失败和取消后清理活动 request / scope registry，同时保留有界 tombstone：seen request 上限 `8192`；非活动 cancelled scope 预算 `1024`，活动取消 scope 为防复活可临时钉住，结束后立即重新收敛。搜索隐藏立即暂停媒体；外层滚动按 `projectId + mode`、内层按 `projectId + mode + section` 隔离；前后端坐标共同限制为 `0..=1_000_000`，超深 dependency 只饱和显示列并保留原始深度；失败预览区分 transient / permanent，仅用户意图重试 transient。
+- 展示边界：图片、安全 SVG 和视频主体只在资源卡内展示；中央详情以元数据、同类型依赖和版本信息为主，文档正文与按意图读取的音频控件保留。每个分区拥有自己的 SVG plane；单端离屏显示边界继续线，两端离屏隐藏。`1280×800` 需要已认证 WebView / Chromium 的当前 HEAD 真实测量，CSS 正则测试不能冒充实测证据。
+- 兼容与边界：不修改 manifest、Rust 资源图、SpacetimeDB、sidecar schema、布局 CAS 或媒体安全读取门禁；不恢复资源卡拖动。过期文档在同一次变更内同步修正，避免实现通过测试但评审继续依据旧合同。
+- 验证方式：新增原生 wheel 取消、队列优先级 / 硬上限、Blob / 总字节 LRU、连续媒体浏览、挂起旧 scope / ABA epoch、原生全局活动峰值 `<= 3`、等待与分块取消、取消前无 base64 / Blob、活动 registry 清零及 `8192 / 1024` tombstone 有界淘汰、transient 重试、过滤后暂停、外层滚动 scope、坐标边界及 Rust 安全读取回归；继续运行 AppSurface、纯布局模型、Tauri 定向测试、编码检查和 `git diff --check`。真实 `1280×800` 是自动测试外的跨文件人工门禁，必须由当前 HEAD 的已认证 WebView / Chromium 实测并在 PR 评论中记录；记录缺失时不得声称阶段七完成。
+- 关联文档：`docs/prd/【AI游戏创作】项目开发工作台PRD-2026-07-20.md`、`docs/technical/【技术方案】AI游戏创作智能体App实施计划-2026-06-24.md`。
+
+## 2026-08-10 任务流退出画布连线且 dependency 层间距为精确引用留走线区
+
+- 背景：人工验收确认灰色聚合 task-flow 虚线与橙色精确引用叠加后增加噪音，但用户在画布上只需要判断资源间的真实精确引用。原 dependency 自动布局沿用 type 模式 `16px` 行列间距，目标箭头预留 `10px` 后，相邻卡片间的橙线线身只剩约 `6–14px`；菱形 / 分叉簇又把单节点层与多节点层顶部对齐，形成同组一侧很短、另一侧明显过长。
+- 决策：Rust read model、详情数据和布局拓扑继续保留合法 task-flow；前端仍用流节点的 `O(S+T)` 成员关系参与同类型连通簇和中位数排序，但 `ResourceDependencyOverlay`、SVG marker、CSS 虚线和画布 `aria-describedby` 关系说明不再渲染或宣告 task-flow。画布关系层只显示同类型 `asset-reference` 的橙色实线箭头。
+- 间距与对齐：dependency 自动布局使用独立的 `48px` 列间距和 `40px` 行间距，type 模式继续使用 `16px`。每个相关簇以最大层行数确定高度；同簇资源较少的层增加稳定的半差偏移，在最大层高度中居中。Rust `dependencyDepth` 仍唯一决定横向层级，稳定 ID 仍决定平局，不压缩深度、不截断真实端点；已有历史手动坐标原样保留并继续优先占位。
+- 边界：本次只调整前端可派生自动坐标与显示关系集合，不修改 manifest、Rust resource graph、SpacetimeDB、sidecar schema、CAS、scope epoch、单写者 FIFO 或搜索不重排合同，不恢复资源卡拖动。自动 dependency 坐标会通过现有协调流程按新间距重派生；type 坐标不变。
+- 验证方式：布局纯模型覆盖 dependency / type 间距隔离、菱形窄层居中、手动坐标避让、确定性和 4096 项性能；Overlay / AppSurface 覆盖 task-flow 零 path / marker / 关系说明、橙色箭头最小可辨认走线区、跨分区、自环、滚动 / 缩放绑定和完整前端回归。
+- 关联文档：`docs/prd/【AI游戏创作】项目开发工作台PRD-2026-07-20.md`、`docs/technical/【技术方案】AI游戏创作智能体App实施计划-2026-06-24.md`。
+
+## 2026-08-10 依赖 SVG 改为分区 plane 所有并使用逻辑坐标路由
+
+- 背景：全局 SVG 与四个独立 section plane 是不同滚动 / transform 坐标系。旧实现通过 `getBoundingClientRect + requestAnimationFrame + React state` 把卡片屏幕 rect 反投影到全局图层；触摸板缩放或连续滚动时，浏览器先在合成层移动卡片，异步测量后的线才追赶，因此会出现线与卡片分离、同一关系忽隐忽现。四 viewport 的并集 clipPath 还允许某区线段泄漏到另一分区。大贝塞尔控制柄进一步放大了视觉绕行。
+- 决策：固定四区各自把 `ResourceDependencyOverlay` 挂在拥有卡片的 `.game-resource-plane` 内。SVG 与卡片直接消费同一 sidecar 逻辑坐标、`180×128` 卡片常量、CSS scale 和 viewport scroll；浏览器原生 transform / overflow 负责机械同步和分区裁剪，主路径不再依赖 DOM 屏幕坐标测量。每区只用一个 `ResizeObserver` 与 RAF 维护逻辑 viewport，四区合计最多四个；一端离屏时对称输出 incoming / outgoing 边界继续线，两端离屏时隐藏。
+- 路由：精确引用在同行 / 同列时使用直线，需要转向时使用正交线段与最大 `10px` 二次曲线小圆角；仅自引用保留卡片外侧贝塞尔闭环。同侧稳定端口和同类型过滤不变。该条最初保留的灰色聚合 task-flow 虚线已被上方“任务流退出画布连线”决定替代，task-flow 只保留布局超边语义。
+- 边界：只改变前端派生 SVG 的所有权、显示裁剪和路径形状；Rust resource graph、`dependencyDepths`、producer 截断降级、manifest、SpacetimeDB、dependency / type sidecar、CAS、scope epoch、单写者 FIFO、搜索不重排和历史手动坐标均不变。没有恢复卡片拖动。
+- 验证方式：SVG 定向回归覆盖直线 / 小圆角、橙色 marker、自环、同侧端口、task-flow 零渲染、缩放同 plane、incoming / outgoing、两端离屏、四区互不串线及单区滚动隔离；ProjectDevelopment / AppSurface 继续覆盖模式和项目销毁、媒体卡、分区缩放与页面骨架。
+- 关联文档：`docs/prd/【AI游戏创作】项目开发工作台PRD-2026-07-20.md`、`docs/technical/【技术方案】AI游戏创作智能体App实施计划-2026-06-24.md`。
+
+## 2026-08-10 资源画布只展示同类型关系且详情以信息为主
+
+- 背景：人工验收发现跨分类精确引用在四个独立 viewport 中只能显示成断裂长线；同一美术卡多入 / 多出时，多条精确引用与聚合任务流复用卡片中心端口，线段重叠；点击美术卡后大图占满中央视窗，路径、来源和依赖信息被挤到首屏之外。
+- 决策：Rust 资源图、`dependencyDepths`、manifest 引用和 producer 降级语义保持不变；前端布局拓扑、无障碍关系说明与 SVG 只消费两端同属 `document / version / art / audio` 之一的关系。跨分类 reference edge 与跨分类-only task-flow 不形成布局簇、边界偏置或连线。相同分区内，同一卡片同侧的精确边按对端坐标与稳定边 ID 有界分配独立端口；横向层级仍优先左右连接，同列或空间不足才上下连接。源端可见而目标离屏时保留关系 DOM，但画面只显示边界短继续箭头。该条中的 task-flow 显示口径已由上方最新决定替代为仅参与布局。
+- 详情合同：点击资源卡后，元数据、Rust 权威依赖层级、同类型精确上下游、同类型任务流和版本信息位于内容首部；美术图片 / 视频不在详情重复读取或放大，仍在列表卡本体中展示。文档正文和按播放意图读取的音频控制位于元数据之后。
+- 兼容与复杂度：不修改 Rust read model、manifest、SpacetimeDB 或 sidecar schema；历史手动坐标、type 布局、搜索不重排、分区高度 / 倍率及单写者 FIFO 不变。过滤与端口分配为线性收集加稳定排序，task-flow 继续按超边成员处理，不构造资源笛卡尔积。
+- 验证方式：覆盖跨分类精确引用不渲染 / 不聚类、跨分类-only task-flow 不聚类、全部 task-flow 不绘线、同侧多边端口确定性、离屏长线收敛、详情无大图 / 视频且元数据与依赖字段可见，并继续运行 4096 布局、媒体卡、分区缩放与 AppSurface 回归。
+- 关联文档：`docs/prd/【AI游戏创作】项目开发工作台PRD-2026-07-20.md`、`docs/technical/【技术方案】AI游戏创作智能体App实施计划-2026-06-24.md`。
+
+## 2026-08-10 分区内容缩放与持续关系线替代阶段二旧显示口径
+
+- 背景：阶段二最初把“缩放”只解释为分区可视高度，并让 SVG 只为完整位于 viewport 的卡片建立端点。人工验收发现触摸板无法缩放内容、精确引用箭头在裁剪边界不稳定、纵向长线容易被截断，以及同一关系随分区滚动时有时无。
+- 决策：保留已有分区高度，同时新增互不替代的 `50%..200%` 内容倍率；按钮、触摸板 `Ctrl/Cmd + wheel` 和 WebKit 捏合共用确定性 clamp，普通双指仍滚动。高度与倍率都按 `projectId + mode + section` 留在会话态，不进入 sidecar。SVG 与卡片共用分区 plane 和 CSS scale；合法关系不再因端点没有“完整可见”而卸载，一端离屏时在可见区边界显示同语义继续箭头。精确引用恢复橙色实线实心箭头，不同层优先左右端口横连，只有同列或横向间距不足时才上下端口纵连；自环继续在卡片外侧。
+- 替代关系：本条替代下方 2026-08-07 阶段二中“缩放只等于可视高度”和“只为完整可见卡片建立端点”的显示口径；其中曾采用的全局 SVG、四 viewport 联合 clip 和单全局 Observer 又由上方“依赖 SVG 改为分区 plane 所有”决定替代。高度模型、四分区、会话隔离、内外滚动和无布局 CAS 等其它决定继续有效。阶段一媒体卡、阶段三确定性聚类、Rust `dependencyDepths`、producer 截断降级、历史手动坐标与 type sidecar 均不变。
+- 验证方式：纯倍率模型覆盖按钮 / wheel 边界；AppSurface 覆盖项目、mode、section 隔离、普通 wheel、Ctrl wheel、WebKit gesture 与零布局写入；SVG 覆盖同 plane 倍率、橙色 marker、直线 / 小圆角横纵路由、自环间隙、双向边界继续线、分区原生裁剪、每区单 Observer、task-flow 零渲染和 4096 精确关系有界输出。
+- 关联文档：`docs/prd/【AI游戏创作】项目开发工作台PRD-2026-07-20.md`、`docs/technical/【技术方案】AI游戏创作智能体App实施计划-2026-06-24.md`。
+
 ## 2026-08-07 game-chat 使用单主路径按需补齐美术
 
 - 背景：原 game-chat 把 Supervisor 的意图判断之后又硬接为 `design-director / code-director / art-* / code-prototype / preview-*` 固定图。`code-director` 代替程序主 Agent 判断素材缺口，会让“把现有美术资源应用到游戏中”被错误翻译成先生成美术，且美术回执无法天然回到同一个代码 Run 完成接入。
@@ -8,6 +52,30 @@
 - 验证方式：覆盖路由后只启动 `code-prototype`、既有素材零美术委派、精确缺口才允许单个对应 child、child 的 `game/**`、memory 和 manifest 写入拒绝而 `assets/**` 写入允许、回执恢复同一主 Run，以及主 Agent 的接入、静态 smoke 与双视口试玩；追加真实 scheduler 对旧 canonical task 的同 Run 恢复、旧固定美术 child 及其历史 isolated 后代对 Canvas/memory/manifest/project scope 零 mutation、伪只读 `agent.run_status` 阻断、嵌套美术 child 硬截止对账回执；另跑完整 DAG 非回归。
 - 关联文档：`docs/technical/【技术方案】AI游戏创作智能体App实施计划-2026-06-24.md`。
 
+## 2026-08-07 资源管理阶段三以确定性分层聚类收口
+
+- 背景：阶段一已经统一 `180×128` 资源卡本体与媒体播放，阶段二已经把四个固定资源分区改为独立可视高度和内部滚动；原 dependency 自动布局仍只按 Rust `dependencyDepth` 横向分层、同层按名称排布，容易让已有合法关系形成长线和交叉。
+- 决策：`dependencyDepths` 继续是唯一横向层级真相，前端只消费现有 Rust resource graph 的合法 `asset-reference` 与未截断 producer mapping 下的聚合 `task-flow`。每个固定分区迭代建立弱连通分量，task-flow 以流节点连接成员而非展开资源笛卡尔积；相关簇按最小深度、最小稳定资源 ID 排列，孤立资源统一紧凑置后。簇内固定执行两轮左右中位数扫描，精确引用使用上下游相邻层 rank，task-flow 使用另一端成员的中位 rank，平局回退稳定资源 ID。原“跨分区边界偏好”已由 2026-08-10 同类型关系决定替代，跨分类关系不再进入前端布局。搜索仍只过滤可见卡片 / SVG，不参与布局；环继续依赖 Rust SCC 深度，成员可连续排列、环后资源继续前进。
+- 兼容与复杂度：只重派生 `manuallyPlaced=false` 的 dependency 坐标，历史手动位置原样保留且先占用避让；type 坐标不改。资源协调签名加入由稳定 ID 的规范端点 / task-flow 成员序列导出的固定大小摘要，因此邻接改变即使深度不变也会写入同一 sidecar FIFO / CAS，不增 schema、manifest、SpacetimeDB 或第二存储。遍历为迭代式 `O(V + E)`，排序扫描轮数固定，流成员不构成全量配对。
+- 三阶段状态：阶段一资源卡本体与单媒体播放、阶段二分区可视高度 / 内外滚动和阶段三依赖聚类均已实施；它们共用既有卡片尺寸、SVG 几何、sidecar、scope epoch 与单写者 FIFO，均不恢复卡片拖动。
+- 验证方式：布局模型与 Hook 覆盖同区关系簇、独立簇与孤立项、多入多出 / 聚合流、环 / 自环、跨区、不变输入确定性、手动坐标避让、type 不变、邻接签名更新与 4096 项性能；依赖图 / SVG、ProjectDevelopment / AppSurface 和阶段一 / 二回归继续作为整体验收。
+- 关联文档：`docs/prd/【AI游戏创作】项目开发工作台PRD-2026-07-20.md`、`docs/technical/【技术方案】AI游戏创作智能体App实施计划-2026-06-24.md`。
+
+## 2026-08-07 资源管理阶段二以分区可视高度完成独立缩放
+
+- 背景：阶段一已把 `180×128` 资源卡本体、预览调度与单媒体播放统一到 dependency / type 两种布局。“分区缩放”旧文档一度定义为卡片 `50%..200%`，会破坏本体卡尺寸、媒体比例与依赖端点。
+- 决策：阶段二固定为调整四个资源分区的可视高度，而非任何卡片、媒体、文字或浏览器缩放。会话内存 Map 以 `projectId + mode + section` 隔离状态，不写 localStorage / sessionStorage、manifest 或 `game-creator-resource-layout.v1`，也不发布局 CAS。上限为中央资源画布的当前可用高度，窗口变小时对当前项目两种 mode 的既有值同步且永久夹取；不在放大窗口时回弹旧超界值。
+- 布局与图层：分区是正常文档流 grid item，标题与内部 viewport 分离；仅 viewport 内滚动超出内容，外层画布仍在分区之间滚动。本条原先采用的单全局 SVG、单 Observer、完整可见端点和四 viewport 合集裁线已被 2026-08-10 的分区 plane 自有 SVG 决定替代；分区正常文档流和内外滚动合同继续有效。
+- 验证：纯高度模型回归锁定分区键隔离、最小一排卡片与中央画布上限；AppSurface 覆盖四区独立、两 mode / 两项目隔离、详情与内外滚动恢复、resize 夹取与零 CAS；SVG 回归覆盖单 observer、RAF 合帧、viewport 裁线与卸载清理。
+
+## 2026-08-07 资源管理三项改造串行落地且先完成资源卡本体化
+
+- 背景：固定四区资源投影、dependency / type 布局、依赖 SVG、中央详情和受控文档 / 媒体读取已落地，但列表卡片仍只显示图标、名称、来源与路径，不利于直接辨认资源主体。后续还需要分区缩放和依赖布局聚类，三项不能各自发明尺寸、几何或资源真相。
+- 决策：按“本体卡 -> 分区缩放 -> 依赖聚类”串行实施。阶段一让两种布局共用同一个卡片与画布级预览 Controller，用现有受控 Tauri 命令按可见性有界读取图片、视频首帧和文档摘要，音频只在用户播放后读取；卡上详细文本后置到中央详情，详情与播放使用合法同级按钮。同时播放上限为一，项目 / mode / 详情 / 运行视图 / 资源身份变化时统一收口媒体状态。
+- 后续约束：阶段二只调整分区 viewport 高度，保持卡片 rect 和逻辑坐标不变；SVG 对每个 viewport 做可见端点与裁线。阶段三的依赖聚类只从当前 Rust 只读图按分区派生稳定弱连通组，搜索不参与坐标派生。两者都不修改 manifest、SpacetimeDB 或 `game-creator-resource-layout.v1`，不恢复资源卡拖动。
+- 验证方式：AppSurface 覆盖两种布局的本体卡、图片 / 视频 / 音频 / 文档 / 版本、合法点击与键盘语义、单媒体播放、可见性懒加载、去重 / 并发 / LRU、迟到丢弃、失败占位、隐藏字段搜索和详情信息保留；布局纯模型与 SVG 回归继续锁定同一卡片尺寸。
+- 关联文档：`docs/prd/【AI游戏创作】项目开发工作台PRD-2026-07-20.md`、`docs/technical/【技术方案】AI游戏创作智能体App实施计划-2026-06-24.md`。
+
 ## 2026-08-03 资源管理阶段七以完整 CI 与可重复界面合同收口
 
 - 背景：飞书资源管理需求的阶段零至阶段六已经分别完成资源卡禁拖、固定资源投影、中央聚焦、安全文档 / 媒体预览、依赖深度与正式版本只读模型；最后需要统一复核需求边界并用当前主分支完整门禁排除集成回归。
@@ -154,7 +222,7 @@
 > 状态：其中资源卡 Pointer Move 拖动预览与局部更新验收已由 2026-08-03 mentor 最新决定暂缓；只读拓扑、SVG 派生展示、搜索与选择高亮合同继续生效。
 
 - 背景：资源画布已有 dependency / type 双模式坐标与本地 CAS sidecar，但 dependency 模式尚未把当前 manifest 中可证明的资源引用和任务流转可视化；关系图不能反向污染布局持久化或建立第二套资源真相。
-- 决策：dependency 模式由 Tauri Rust 只读命令从当前 manifest、资源卡身份和有界 `.agent/agent.db` 审计构建稳定 `ProjectResourceGraph` read model，前端只归一化 DTO、测量卡片坐标并用原生 SVG 渲染。资产 `source.referenceResourceIds` 只在唯一匹配另一资产 `source.resourceId` 后形成橙色实线；任务依赖按任务对聚合为灰色虚线主线与两端分支，禁止资源笛卡尔积。Rust 以迭代式强连通分量分析识别资源环和完整任务 DAG 环，并返回资源局部连接索引。
+- 决策：dependency 模式由 Tauri Rust 只读命令从当前 manifest、资源卡身份和有界 `.agent/agent.db` 审计构建稳定 `ProjectResourceGraph` read model，前端只归一化 DTO、测量卡片坐标并用原生 SVG 渲染。资产 `source.referenceResourceIds` 只在唯一匹配另一资产 `source.resourceId` 后形成橙色实线；任务依赖按任务对聚合，禁止资源笛卡尔积。本条最初把聚合任务流绘制为灰色虚线主线与分支，该显示口径已由 2026-08-10 最新决定替代为只参与布局、不进入 SVG。Rust 以迭代式强连通分量分析识别资源环和完整任务 DAG 环，并返回资源局部连接索引。
 - 任务身份：External Editor 响应中的 `source.taskId` 是平台生成任务 ID，不等于本地 manifest task ID，禁止据此分配 producer。画布资产只接受 `agent.runtime.canvas.asset_generate` 审计中经当前 manifest task 校验的 `assetId -> agentId`；证据缺失、冲突或已超出有界读取窗口时不生成对应 task flow。任务产物与 Agent 回执继续使用自身已有的 manifest task 身份。
 - 生命周期与边界：Pointer Move 先用 `requestAnimationFrame` 合帧；基础 positions 与拖动预览分离，SVG 静态拓扑保持复用，每帧只按局部索引更新拖动资源关联的 reference edge 和 task flow。`ResizeObserver` 在单个图层生命周期只创建一次。type 模式不挂载图层；切换 mode、项目或卸载工作台时销毁 SVG、Observer 和窗口监听。SVG 统一 `pointer-events: none`；path、marker、图结构和 section 原点从不持久化。
 - 数据边界：本切片只新增 Tauri Rust 只读 read model，不修改 layout sidecar、`resourceCanvasLayoutModel.ts`、manifest、api-server、SpacetimeDB schema 或生成绑定，也不引入第三方图表库。dependency section 只在显示层额外预留 `64px` 右侧视觉 gutter，卡片坐标和持久化布局不变。
diff --git a/docs/project-memory/shared-memory/pitfalls.md b/docs/project-memory/shared-memory/pitfalls.md
index f3a638797..a5d5a6bb0 100644
--- a/docs/project-memory/shared-memory/pitfalls.md
+++ b/docs/project-memory/shared-memory/pitfalls.md
@@ -14,6 +14,30 @@
 - 关联：相关文件、文档、提交或 Issue
 ```
 
+## 资源管理第二轮修复后不能继续用第一轮文档和弱测试作为验收合同
+
+- 现象：代码已经改成分区内 SVG plane 和卡内媒体，文档仍要求单全局 Overlay 或中央大图；CSS 正则和浅层 AppSurface 测试保持绿色，但真实 Tauri WebView 仍会默认缩放、主动预览请求饥饿、过滤后媒体继续播放或超深布局反复提交非法坐标。
+- 原因：第一轮编码时同步编写的 PRD / 技术方案被后续代码修复绕过，第二轮只改实现和局部测试，没有把新验证结论回写正式合同。React 合成 wheel 事件、单例滚动 ref、只按数量限制的 base64 缓存、跨 scope 共用的活动读取计数、无优先级有界队列和前后端不同坐标边界又分别跨越浏览器、会话状态与 IPC 边界，浅层文本断言无法证明运行时行为。
+- 处理：每轮验证后按“当前代码 + 最新决策 + 真实运行证据”同步修订 PRD、技术方案、决策记录和回归测试。原生可取消事件要直接断言 `defaultPrevented`；队列验证主动请求替换预取；预览 data URL 只作临时传输并转为可撤销 Blob URL，LRU 同时限制项目数和总字节；项目 / mode 切换推进 epoch，旧 `finally` 不得扣减新 scope；媒体状态同时核对可见集合；滚动分别按内外 scope 保存；坐标合同由共享 TS 与 Rust 同边界维护；暂时 / 永久错误在模型中显式分类。
+- 验证：运行定向 hook / AppSurface / 纯布局 / Rust 边界测试，再执行类型检查、编码检查和 `git diff --check`。涉及窗口几何和 WebView 行为时，还必须在当前 HEAD 的已认证 `1280×800` WebView / Chromium 中记录 `window`、document、body 和关键容器测量；CSS 正则只保留为静态防回退门。
+- 关联：`apps/ai-game-creator-shell/src/view/project-development/index.tsx`、`apps/ai-game-creator-shell/src/view/project-development/useProjectResourceCardPreviews.ts`、`apps/ai-game-creator-shell/src/view/project-development/resourceCanvasLayoutModel.ts`、`apps/ai-game-creator-shell/src-tauri/src/project/resource_layout.rs`、`docs/prd/【AI游戏创作】项目开发工作台PRD-2026-07-20.md`。
+
+## 预览读取不能像放弃旧 CAS 回调一样直接重置并发槽
+
+- 现象：A 项目的 3 个预览 IPC 仍挂起时切到 B，前端把活动计数归零并立即再发 3 个；界面不会被 A 的迟到结果污染，但原生同时保留 6 个读取。连续项目 / mode / Hook / 窗口切换会继续叠加整文件缓冲、base64 临时字符串和 WebView IPC 载荷，绕过 `64 MiB` 终态缓存预算。
+- 原因：布局 CAS 已经发出后只能依靠 revision / 系统锁仲裁，前端放弃回调是正确语义；只读预览却有明确的物理内存和文件读取成本，可以协作取消。把 scope epoch 的逻辑隔离误当成底层取消，又让每个 scope 自行拥有 3 个物理槽，实际并发就不再全局有界。
+- 处理：前端继续用 epoch、优先级队列、LRU 和完整资源身份隔离展示状态，但每次挂载 / scope 变化生成不复用的 `scopeId`，每次 IPC 生成唯一 `requestId`。三个安全读取命令共用 Tauri 进程级 3 permit 管理器；切换和卸载调用窄 scope 取消命令，等待 permit 与固定块读取都检查取消。permit 和 request/scope 清理 guard 必须移入真正的 `spawn_blocking` 读取闭包；WebView 卸载或调用方 abort 只会丢弃外层等待，不能让仍在运行的 blocking 读取提前释放物理槽或从取消 registry 消失。取消任务在 base64 前退出，所有终态清理活动 request / scope registry。seen request tombstone 最多保留 `8192` 项；非活动 cancelled scope tombstone 的预算为 `1024` 项，活动取消 scope 为防复活必须临时钉住并在结束后重新收敛。不得为了追求整个 registry 字面清零而删除防重放 / 防复活记录，也不得让已经结束的 scope 长期占用预算外记录。不得放宽原有项目边界、登记、权限、链接、签名、大小、漂移或安全 SVG 门禁。
+- 验证：先让旧 scope 占满 3 个 permit，再连续执行 A → B → A、mode、Hook 和多窗口切换；断言原生活动峰值始终 `<= 3`，旧等待任务不打开文件，旧在途任务在最近检查点释放，新 scope 随后启动，取消任务不编码 data URL / 不创建 Blob URL，最终活动 request / scope registry 为零。阻塞读取进入后主动 abort 外层 future，必须证明旧 blocking 任务仍占 permit、仍可按 scope 取消且新请求不能提前启动。另分别证明 seen request `8192` 项的硬上限、cancelled scope 超预算时不淘汰活动记录，以及任一活动 scope 结束后非活动 tombstone 立即收敛到 `1024` 项预算。前端再断言旧 `then / catch / finally` 和取消 ACK 均不写新 scope；内部取消类别只允许精确匹配，不能因真实错误正文恰好包含该标识而静默吞错。
+- 关联：`apps/ai-game-creator-shell/src/view/project-development/useProjectResourceCardPreviews.ts`、`apps/ai-game-creator-shell/src-tauri/src/resource_preview_scheduler.rs`、`apps/ai-game-creator-shell/src-tauri/src/resource_inspect.rs`、`apps/ai-game-creator-shell/src-tauri/src/image_inspect.rs`。
+
+## 依赖线与资源卡不在同一 transform 层时会在滚动和缩放中分离
+
+- 现象：静止时依赖线似乎对齐，触摸板缩放或连续滚动后线段会追赶、漂移或忽隐忽现；某一资源分区的长线还可能出现在相邻分区。
+- 原因：资源卡位于各自可滚动、可缩放的 section plane，全局 SVG 却是外层兄弟节点；通过 `getBoundingClientRect`、RAF 和 React state 重建屏幕端点无法与浏览器合成层 transform 原子同步。把四个 viewport 做成一个 clipPath 并集也不具备“每条线属于哪个分区”的所有权语义。
+- 处理：让每个固定分区在自己的 `.game-resource-plane` 中拥有独立 SVG，卡片与路径都直接使用布局逻辑坐标并共享父级 CSS scale / 原生 scroll；viewport 原生 overflow 负责本区裁剪。DOM 测量只换算本区逻辑 viewport，用于完整路径、incoming / outgoing 继续线和两端离屏隐藏，不参与端点身份或主路径坐标。每区 observer 和 RAF 各至多一个，卸载时清理。
+- 验证：同时挂载至少两个分区和各自同类型关系，断言每条边只存在于对应分区 SVG；只滚动其中一分区，另一分区的逻辑 viewport 与 path 不变。另覆盖缩放后 SVG / 卡片仍在同一 plane、双向离屏继续线、两端离屏隐藏、marker、自环以及 mode / 项目切换清理。
+- 关联：`apps/ai-game-creator-shell/src/view/project-development/ResourceDependencyOverlay.tsx`、`apps/ai-game-creator-shell/tests/ResourceDependencyOverlay.test.ts`、`docs/prd/【AI游戏创作】项目开发工作台PRD-2026-07-20.md`。
+
 ## 派生 Debug 会让完整配置经应用状态递归进入日志
 
 - 现象：配置和状态当前没有直接日志调用，但新增一行 `debug!(?state, ...)` 或 `format!("{config:?}")` 就能把 JWT、后台口令、支付私钥、OSS / provider key 与 SpacetimeDB token 一次性写入日志及 OTel 留存面。
@@ -71,6 +95,14 @@
 - 验证：用真实 scheduler 恢复确定性 v1 主 Run；把旧 scheduler 美术 child 置为 running，断言 `canvas.asset_generate`、`memory.write`、`task.create`、`task.update` 和 `agent.run_status` 均被拒绝；再持久化其历史 `game/**` writeScope isolated 后代，断言恢复执行写操作仍失败且项目未变。对当前合法美术 child 同样验证 memory/manifest 零写入，再让它带在途外部生成命中硬截止，断言状态进入 `needs-reconciliation` 且 pending/batch/外部生成账本原样保留。
 - 关联：`apps/ai-game-creator-shell/src-tauri/src/agent/runtime_driver/task_start.rs`、`runtime_driver/game_chat_fast_path.rs`、`runtime_driver/main_loop.rs`、`runtime_tools/file_ops.rs`。
 
+## 委派幂等与 child 写入测试不能和真实后台 worker 抢状态
+
+- 现象：测试刚建立 static delivery，自动 parent-wake 就抢先恢复并终结父 Run，使随后同 action 重放被“当前 durable task 仍为 running”拒绝；受限美术 child 测试也可能在后台 worker 抢先终态后，让本应允许的 `assets/**` 写入误报 verification failure。
+- 原因：测试 fixture 同时手工推进 journal/manifest，又允许真实后台 future 执行同一父子 Run；单测运行时序决定谁最后写入。若为让测试通过而把 active durable task 门禁整体移动到 existing-child 分支之后，该分支仍可能补建 delivery 或投影 Ready，反而允许终态/过期父 Run 发生修复性写入。
+- 处理：保留生产门禁顺序，父 Run 终态后的迟到 delivery 继续只允许 suppressed。需要断言回执、claim 与同 action 重放时，测试持有父 Agent execution lane，断言结束后释放再执行 wake；直接测试 child 写工具时持有目标 Agent lane，再把 child 持久推进到 `running`。所有 lane 均由 RAII 释放，不能依赖后台 future 的调度时机。
+- 验证：覆盖父 Run active 时 claimed delivery 的同 action 重放返回 existing、不同 action 的重复缺口仍被拒绝、父终态后的新委派/迟到 delivery 继续失败关闭或 suppressed、合法运行中 child 只可写 `assets/**`。macOS 直接拼接 `std::env::temp_dir()` 的仓库安全测试还应先规范化临时根，避免 `/var -> /private/var` 被误当成项目内符号链接。
+- 关联：`apps/ai-game-creator-shell/src-tauri/src/agent/runtime_tools/delegation.rs`、`apps/ai-game-creator-shell/src-tauri/src/agent/runtime_driver/main_loop_tests.rs`、`apps/ai-game-creator-shell/src-tauri/src/repository_context.rs`。
+
 ## 执行锁移交给未确认启动的异步 future 会制造永久 queued
 
 - 现象：父 Supervisor 与 Runner 一直显示运行中、heartbeat 正常，专业 Agent 已有 `background_task.queued` 和 `autonomous_ready_task.scheduled`，对应执行锁也被 Runner 持有，但该 child 永远没有 running journal、`turn.started` 或后续 Runtime event；其它同批 Agent 可能已经完成。
@@ -111,6 +143,30 @@
 - 验证：单测覆盖 CAS 边界（满了返回失败且计数不越界、上限为 0 时任何进入都失败），并由独立用例覆盖 guard 离开作用域后的计数归还。预算耗尽路径只断言 `504`，不得通过另一个测试也会修改的进程级 static before/after 来推断“未入队”，也不得用串行锁或 `--test-threads=1` 掩盖隔离问题。
 - 关联：`server-rs/crates/api-server/src/editor_project.rs`（`try_enter_bounded_queue`、`EditorPixelArtSnapQueueGuard`）。
 
+## dependency 不能复用 type 的紧凑间距或让窄层始终顶部对齐
+
+- 现象：相邻卡片间的橙色引用只剩一个箭头，看起来像长度异常；同一个菱形 / 分叉关系中，上半组线很短而下半组线绕很远。
+- 原因：type 模式的 `16px` 紧凑行列间距不足以同时容纳 marker 安全距离和可辨认线身；分层布局若只按每层 index 从簇顶向下排，单节点层无法与多节点层的垂直中心对齐。
+- 处理：dependency 自动坐标使用独立 `48px` 列间距和 `40px` 行间距，type 继续使用 `16px`。相关簇记录最大层行数，每层起始 y 增加 `(maxRows - layerRows) * dependencySlotHeight / 2` 的确定性偏移；平局仍用稳定资源 ID，手动坐标仍原样占位。不能通过裁短长线、偏移真实端点或压缩 Rust depth 伪造一致长度。
+- 验证：纯模型锁定 type / dependency 间距隔离、四节点菱形的首尾单节点层居中、同层稳定顺序、历史手动坐标和 4096 项性能；Overlay 使用相邻 dependency 槽位证明箭头前保留可辨认线身。
+- 关联：`apps/ai-game-creator-shell/src/view/project-development/resourceCanvasLayoutModel.ts`、`ResourceDependencyOverlay.tsx`、`resourceCanvasLayoutModel.test.ts`。
+
+## 依赖聚类不能把聚合 task-flow 展开为资源两两边
+
+- 现象：为了让 task-flow 的两端资源靠近，若对每个 source × target 构造边，资源多的任务流会迅速放大内存、排序工作和虚假关系；同一图输入还可能随着成员枚举顺序出现不稳定排列。
+- 原因：task-flow 的业务语义是任务对的聚合流，不是资源间的完整笛卡尔依赖；dependency depth 也已经由 Rust SCC read model 权威计算，前端不能用布局边重建业务方向。
+- 处理：布局分组把每条 flow 作为一个临时流节点，仅与其 source / target 成员相连；中位数扫描读取流另一端成员现有 rank 的中位值。遍历保持迭代式，扫描轮数固定，所有初始序和最终平局都以稳定资源 ID 收口。用于自动重派生的拓扑签名先按固定分类过滤并规范化稳定 ID，再生成固定大小摘要，不能把显示名、卡片大小或浏览器几何加入签名。跨分类 reference 与跨分类-only task-flow 不进入前端布局；所有 task-flow 都不进入 SVG 或画布关系说明。`producerMappingTruncated` 时继续只消费现有同类型精确引用，不重建 task-flow。
+- 验证：纯模型覆盖多入、多出、聚合 task-flow、环、4096 链和重复输入坐标一致；Hook 覆盖仅改邻接、深度不变仍重派生自动坐标。不得把搜索后的可见集传入聚类。
+- 关联：`apps/ai-game-creator-shell/src/view/project-development/resourceCanvasLayoutModel.ts`、`useProjectResourceCanvasLayout.ts`、`resourceDependencyGraphModel.ts`。
+
+## 四分区 SVG 不能把跨类型业务关系当成可绘制几何
+
+- 现象：跨分类资源位于彼此独立滚动和裁剪的 viewport；若仍绘制一条全局 SVG 路径，只会在两个分区中留下没有完整上下文的断线，滚动时还会看似随机出现或消失。同一卡片多边若都锚在中心点，也会让合法的同类型线叠成一束。
+- 原因：Rust read model 的业务关系范围大于资源管理画布的展示合同；四分区视图没有跨标题栏的合法连线走廊。几何层直接遍历全部 reference edge 等于把业务真相误当成全部可视关系；单中心端口又忽略了边的稳定身份与对端顺序。
+- 处理：保留 Rust 图与权威深度；布局拓扑按资源分类过滤 reference 和 task-flow 超边切片，关系说明与 SVG 则只消费同类型精确引用。相同分区内按对端坐标、稳定边 ID 为同侧精确边分配有界端口。不要通过改变端点、隐藏同类型合法精确边或生成资源笛卡尔积来换取整洁。
+- 验证：同时覆盖跨分类精确引用与跨分类-only flow 不聚类 / 不绘制、全部 task-flow 零 SVG / 零画布关系说明、同侧多边端口不重合且重复输入路径一致、同类环 / 自环和 4096 项回归。
+- 关联：`apps/ai-game-creator-shell/src/view/project-development/index.tsx`、`ResourceDependencyOverlay.tsx`、`resourceCanvasLayoutModel.ts`。
+
 ## Linux 生产脚本门禁不能假设本地也是 GNU userland
 
 - 现象：macOS 本地运行维护页、生产 API 部署和 Rust 产物门禁时，依次出现 `mv: illegal option -- T`、`mapfile: command not found`、`/usr/bin/cp` / `/usr/bin/chmod` 不存在，以及 `.rlib` 明明含有 `.o` 却报告“没有可扫描成员”；安全修复计划还会把 `/var/folders` 到 `/private/var/folders` 的系统别名误判为用户符号链接。
@@ -119,12 +175,20 @@
 - 验证：运行 `npm run check:maintenance-page`、`npm run check:production-api-deploy`、`npm run check:server-rs-ddd`、`npm run test -- scripts/spacetime-repair-editor-canvas-resources.test.ts`，并在 Linux CI 保留同一生产脚本语义。
 - 关联：`scripts/deploy/maintenance-on.sh`、`scripts/check-maintenance-page.mjs`、`scripts/check-production-api-deploy.mjs`、`scripts/deploy/production-api-deploy.sh`、`scripts/check-module-runtime-artifact.mjs`、`scripts/spacetime-repair-editor-canvas-resources.mjs`。
 
+## 分区内部滚动不能只重测分区原点
+
+- 现象：若滚动时只重测分区原点，线会停在旧位置或穿过标题栏；若进一步把“卡片完整位于 viewport”当作关系挂载条件，同一合法关系会在卡片刚触边时突然消失、滚回又出现，箭头也可能恰好落在 clip 外而只剩一截线。
+- 原因：全局 SVG 与 section plane 不共享 transform / scroll，`getBoundingClientRect + RAF + state` 重建屏幕端点只能异步追赶浏览器合成层；卡片可见性又是显示裁剪状态，不是关系身份。SVG marker 贴卡或贴裁剪边界时还可能只剩主 path。
+- 处理：每个 section plane 自己持有 SVG，让路径和卡片直接使用同一逻辑坐标与父级 scale / scroll；每区只以一个 Observer 和 RAF 维护逻辑 viewport。精确引用源端或目标端单独离屏时分别绘制 outgoing / incoming 边界继续线，两端离屏才隐藏；目标锚点预留固定箭头间隙，marker 使用 `userSpaceOnUse` 且允许 overflow；自环整体外移避免箭头压卡。搜索隐藏端点仍属于业务可见性过滤，不能与 viewport 裁剪混用。
+- 验证：覆盖同帧多次 scroll 只调度一次 RAF、部分离屏时 outgoing / incoming 正确切换、两端离屏隐藏、缩放后路径与卡片仍处于同一 plane、箭头可见、分区互不串线，以及每区单 observer 与卸载清理。搜索隐藏任一精确端点时整条橙线隐藏；task-flow 始终不渲染。
+- 关联：`apps/ai-game-creator-shell/src/view/project-development/ResourceDependencyOverlay.tsx`、`apps/ai-game-creator-shell/tests/appSurface/project-development.suite.ts`。
+
 ## External Editor taskId 不能当作本地 manifest taskId
 
-- 现象：画布资产之间已有橙色精确引用线，但依赖任务之间没有灰色 task flow；测试用 `design-foundation` 之类字符串时正常，真实生成返回 `task-1` 后失败。
+- 现象：Rust read model、资源详情或 dependency 聚类中缺少本应存在的 task-flow；测试用 `design-foundation` 之类字符串时正常，真实生成返回 `task-1` 后失败。画布不显示灰色 task-flow 是当前产品决定，不能再用是否出现虚线判断 producer 映射是否正确。
 - 原因：`GameCreationAppAssetSource.taskId` 保存的是 External Editor 生成任务身份，命名空间与本地 `.agent/manifest.json` 的 Agent/task 身份不同；前端用 `taskById.get(source.taskId)` 会让真实画布资产全部失去 producer。
 - 处理：资源依赖图的 Tauri Rust read model 从有界 `.agent/agent.db` 读取 `agent.runtime.canvas.asset_generate`，以 `assetId -> agentId` 映射 producer，并要求 `agentId` 存在于当前 manifest。记录缺失、多个不同有效 Agent 冲突或读取已截断时失败关闭 producer assignment、task flow 与对应 `cyclicTaskIds`，不回退 `source.taskId`。精确 `asset-reference` 仍只依赖 manifest 中外部 resourceId 的唯一匹配；Rust 独立返回的 `dependencyDepths` 继续作为 manifest / reference read model 权威结果，前端只过滤未知资源、负数、非整数和非安全整数，不得因 producer 截断把它整体清空。
-- 验证：Rust fixture 把 `source.taskId` 固定为 `task-1 / task-2`，只有审计提供 `art-director / design-foundation` 后才生成 task flow；移除或截断审计后橙色引用保留、灰色任务流消失，合法深度仍为 `asset:spec=0 / asset:ui=1`。AppSurface 使用截断生产数据形状证明深度 `0 / 1 / 2` 真实到达卡片布局，并且不会把已有自动坐标持久化成扁平布局。
+- 验证：Rust fixture 把 `source.taskId` 固定为 `task-1 / task-2`，只有审计提供 `art-director / design-foundation` 后才生成 task-flow read model；移除或截断审计后该 flow 消失但橙色引用保留，合法深度仍为 `asset:spec=0 / asset:ui=1`。前端始终断言 task-flow 零 SVG；AppSurface 使用截断生产数据形状证明深度 `0 / 1 / 2` 真实到达卡片布局，并且不会把已有自动坐标持久化成扁平布局。
 - 关联：`apps/ai-game-creator-shell/src-tauri/src/project/resource_dependency_graph.rs`、`apps/ai-game-creator-shell/src/view/project-development/resourceDependencyGraphModel.ts`、`docs/technical/【技术方案】AI游戏创作智能体App实施计划-2026-06-24.md`。
 
 ## 依赖图未就绪时不能先初始化资源布局
diff --git a/docs/technical/【技术方案】AI游戏创作智能体App实施计划-2026-06-24.md b/docs/technical/【技术方案】AI游戏创作智能体App实施计划-2026-06-24.md
index e36598558..0eb5a8941 100644
--- a/docs/technical/【技术方案】AI游戏创作智能体App实施计划-2026-06-24.md
+++ b/docs/technical/【技术方案】AI游戏创作智能体App实施计划-2026-06-24.md
@@ -391,7 +391,7 @@ game-project/
 - `canvas.project_sync` 复用 Genarrative External Editor API，读取用户平台 API Key 可访问的画板项目快照，通过 `/api/external/v1/assets/read-url` 换签并把资源下载到本地项目 `assets/canvas-sync/`；默认 API base URL 为 `http://127.0.0.1:8082`，可用 Tauri 应用配置目录中的 `game-creator.config.json` 的 `editorApi.baseUrl` 覆盖，API Key 从同一配置的 `editorApi.apiKey` 读取，不写入项目文件、trace、manifest 或日志。
 - Agent loop 中美术组 `Asset` 和音乐组 `SFX` 会读取 `.agent/manifest.json`；图片生成先通过 External Editor API 项目与素材库接口准备同名画布会话，再带稳定 `Idempotency-Key` 调用生成端点。Runtime 在私有生成账本持久化精确请求、幂等键和返回的 `operationId`，并按 `pollAfterMs` 查询统一状态端点；completed 后从 compact result 取得稳定 objectKey/resourceId，再通过 `/api/external/v1/assets/read-url` 换签下载到受控本地 `assets/` 路径，登记为 `canvas` 来源资产并追加 `canvas.asset_generate` 本地索引记录。API Key 不写入项目文件；幂等键只作为该动作的私有可恢复身份保存，不进入 agent.db、trace、manifest、observation 或日志；operationId 允许出现在脱敏的对账错误与私有账本中，但不进入 manifest。未配置 Key、查询 failed 或 compact result 缺少稳定媒体引用时，图片产物型任务保持阻塞/失败，不能以文字计划完成。音乐组仍只建议同步已有音频资源，不调用图片生成接口。
 - `canvas.asset_import` 当前作为最小真实链路：导入项目目录内已有文件为 `canvas` 来源资产，并要求记录画板项目 ID 以及 resourceId 或 assetObjectId。
-- 项目工作台点击已登记图片时必须在中央主视窗的资源聚焦状态中直接渲染图片，而不是只展示路径与 MIME。图片通过受控 Tauri 命令从项目 `assets/` / `game/` 读取，只允许 manifest 已登记资产或已完成任务产物，并复用 `file.read` auto 权限、图片魔数、文件大小、像素尺寸、普通文件、路径漂移和符号链接校验后以 data URL 返回；首版只支持 PNG、JPEG、WEBP，不向 WebView 暴露任意本机文件协议或绝对路径。
+- 项目工作台只在资源卡本体中渲染已登记图片与安全 SVG，并在卡内展示视频首个可解码画面；中央资源聚焦以路径、MIME、来源、Rust 权威依赖和版本信息为主，不重复挂载或放大图片、SVG、视频。媒体通过受控 Tauri 命令从项目 `assets/` / `game/` 读取，只允许 manifest 已登记资产或已完成任务产物，并复用 `file.read` auto 权限、图片魔数、文件大小、像素尺寸、普通文件、路径漂移和符号链接校验。Rust data URL 只承担一次 IPC 传输，前端立即按实际解码字节建立 Blob URL 并丢弃 base64 字符串；不向 WebView 暴露任意本机文件协议或绝对路径。
 - 2026-08-03 阶段四在上述图片链路外新增 `read_local_project_text_preview` 与 `read_local_project_media_preview`。前者只接收当前 manifest 已登记文档或已完成任务中的 Markdown / 文本 / JSON / YAML / TOML，限制 2 MiB 与 UTF-8；Agent 文本回执继续直接消费合法对话投影，不反查本地路径。后者的美术分支接收 GIF、安全 SVG、AVIF、BMP、MP4、WebM、MOV，音频分支只接收 manifest 已登记的 MP3、WAV、OGG / Opus、M4A、AAC、FLAC，二进制媒体限制 32 MiB。两条命令统一执行 `file.read` auto 权限、规范化相对路径、项目边界、敏感路径、普通文件、父目录链接、硬链接、读取漂移和重开身份复核；媒体按文件签名而非只按扩展名或 MIME 建立 data URL，SVG 额外拒绝活动内容与外部引用。
 - `canvas.export_import` 复用 `/editor/canvas` 已有素材导出 ZIP 格式，读取根 `metadata.json`、复制 `images/` / `media/` / `sequences/` 到本地项目 `assets/canvas-imports/`，再按导出层登记为 `canvas` 来源资产；导出包不保存真实 resourceId 时，使用 `canvas-export:<file>` 作为可追踪 assetObjectId，不伪造后端资源行。
 
@@ -404,7 +404,24 @@ game-project/
 - 页面骨架固定为左侧现有全局导航、中间主视窗、右侧陶泥儿对话和底部子 Agent 状态栏；不新建第二套客户端或平行项目页。
 - 中间主视窗提供 `资源管理 / 运行` 切换。`code-prototype` 任务完成前运行入口保持视觉不可用，但仍可点击查看“当前无可运行版本”，不能使用会阻断说明交互的原生 `disabled` 或 `aria-disabled`；完成后才允许进入运行表现层。切回资源管理只修改前端展示态，不伪造后端预览暂停结果。
 - 资源管理从当前 `GameCreationAppManifest`（包含可选 `versions`）、合法 Agent 文本回执和已导入附件派生资源，固定按文档、项目版本、美术资源、音乐音效资源分区；未知任务产物不再兜底为版本，任务声明中的未登记音频也不冒充正式音频。`按依赖 / 按类型` 使用各自前端排列，dependency 模式额外绘制当前 manifest 与资源投影可证明的依赖关系。排列与图层都不写回 manifest，不能推断或伪造缺失依赖。
-- 资源卡支持点击聚焦、搜索和类型筛选。2026-07-28 起完成两套二维坐标与本地 CAS sidecar；2026-07-31 起 dependency 模式增加不持久化的原生 SVG 关系图层。2026-08-03 mentor 决定暂缓资源卡拖动，当前卡片不挂载 Pointer Down / Move / Up / Cancel 拖动入口，只允许自动布局和点击聚焦。聚焦态替换中央主视窗内容，保留左侧导航、右侧对话和底部 Agent 状态栏，退出后恢复搜索、布局模式、滚动位置与选中资源；不提供工具栏、工具侧边栏或可拖动标题栏。阶段四已补齐安全本地文档、扩展美术媒体与音频聚焦，正文独立滚动，视频 / 音频使用内置媒体控件，失败显示空态；美术编辑、音频编辑 / 替换、版本替换或运行模块仍不在本阶段。
+- 资源卡支持点击聚焦、搜索和类型筛选。2026-07-28 起完成两套二维坐标与本地 CAS sidecar；2026-07-31 起 dependency 模式增加不持久化的原生 SVG 关系图层。2026-08-03 mentor 决定暂缓资源卡拖动，当前卡片不挂载 Pointer Down / Move / Up / Cancel 拖动入口，只允许自动布局和点击聚焦。聚焦态替换中央主视窗内容，保留左侧导航、右侧对话和底部 Agent 状态栏，退出后恢复搜索、布局模式、滚动位置与选中资源；不提供工具栏、工具侧边栏或可拖动标题栏。2026-08-10 起聚焦态以资源元数据、Rust 权威深度、同类型上下游 / 任务流和版本信息为首屏；美术图片与视频只保留卡内本体，不在详情重复放大。安全文档正文与按意图读取的音频控制位于元数据之后；美术编辑、音频编辑 / 替换、版本替换或运行模块仍不在本阶段。
+
+#### 资源管理串行改造：本体卡、分区缩放与依赖聚类
+
+- 三项必须串行落地：阶段一先把资源卡改为媒体 / 文档 / 版本本体；阶段二再引入分区级可视高度与独立内容倍率；阶段三最后在 dependency 自动坐标派生中增加稳定聚类。三阶段都复用 `ProjectDevelopmentView`、`projectResourcesFromReadModels`、现有详情状态机、安全 Tauri 读取命令、布局 sidecar 和 Rust 资源图，不新建页面、manifest 真相或平行资源模型。
+- 阶段一只保留一个 `ResourceCard`。卡外层用非交互容器承载绝对坐标、选中与关系高亮；其内的详情覆盖按钮和媒体播放按钮是同级 DOM，分别键盘聚焦。视觉层对读屏隐藏，详情按钮使用“打开资源详情：<类别> <名称>”的精确 `aria-label`；播放键使用“播放 / 暂停 <名称>”，不依赖视觉文件名。
+- 卡片类型与读取路由一个纯分类函数决定：PNG / JPEG / WEBP 调用 `read_local_project_image_preview`；GIF / SVG / AVIF / BMP 和 MP4 / WebM / MOV 调用 `read_local_project_media_preview`；文件文档调用 `read_local_project_text_preview`；Agent 文本回执直接消费已有安全字符串；音频只在播放意图发生后调用 `read_local_project_media_preview`；版本和不可预览类型不发 IPC。文档卡摘要只以 React 纯文本渲染，不执行 Markdown HTML、图片或链接。
+- `ProjectResourceCardPreviewController` 在画布级持有唯一 `IntersectionObserver`，`root` 指向当前资源画布，只为交叉卡片入队。当前 Hook 的逻辑读取并发上限固定为 `3`，总排队硬上限固定为 `96`；终态内存预览 LRU 同时限制为最多 `48` 项和 `64 MiB` 总载荷，媒体以 Blob 实际字节、文档以 UTF-8 字节计入。排队中、在途与已缓存的相同身份都去重。调度优先级固定为 `play > detail > visible`，可见预取不得占满全部主动容量；队列已满时，播放 / 详情请求替换最低优先级的排队预取并优先执行。音频不接受可见预取，只接受用户播放意图。缓存替换、淘汰、资源失效、scope 切换和卸载统一撤销 Blob URL；活动媒体可在预算内免于普通 LRU 淘汰，但不能突破总字节硬上限。
+- 失败预览区分 transient 与 permanent：读取漂移、文件替换和通用暂时错误可由用户再次打开详情或点击播放显式重试；超尺寸、损坏、类型不支持和危险 SVG 等永久错误继续进入有界失败状态。滚动可见性不自动重试任一失败项，错误 UI 只在 transient 情况提示关闭后重试。
+- 预览身份键固定包含 `projectPath / projectId / mode / resourceId / category / path / mediaType`。每次 Controller 挂载以及每次 `projectPath + projectId + mode` 变化都生成新的不透明 `scopeId`，`A → B → A` 不复用第一轮 A；每个真正进入 IPC 的读取再生成唯一 `requestId`。Controller 的 epoch、逻辑活动计数、队列、缓存和 Promise 回调仍按当前 scope 隔离，旧 `then / catch / finally` 不能写入或扣减新 scope。
+- Tauri app state 注册唯一 `ProjectResourcePreviewReadManager`，三个既有读取 command 共同使用进程级 `3` permit semaphore 和活动 request / scope registry；不同 Controller、项目、mode 或窗口都不能扩张物理读取上限。scope 切换与卸载先失效前端 epoch、暂停媒体、清理队列与 Blob，再异步调用窄职责 `cancel_local_project_resource_preview_scope(scopeId)`；取消未知或已结束 scope 幂等成功，重复 request ID 失败关闭。等待 permit 的任务同时等待取消；已取得 permit 的任务在命令入口、安全策略与登记复核后、打开文件后、每个固定块之间、签名 / 结构校验前、漂移复核前和 base64 前检查共享取消状态。
+- 图片、文档和媒体读取改为受原 `2 / 8 / 32 MiB` 上限约束的固定小块读取，permit 只由对应原生任务在成功、失败或取消后释放。取消任务不编码 data URL、不返回字节给前端、不创建 Blob URL；成功、失败、取消和 join error 都通过清理守卫移除活动 request / scope registry。seen request tombstone 保留最近至多 `8192` 项；非活动 cancelled scope tombstone 的保留预算为 `1024` 项，仍有请求的已取消 scope 必须跳过淘汰并可临时超出预算，最后一个请求结束后立即重新收敛。因此终态断言只要求活动 registry 清零，不要求 tombstone 清零。明确取消只静默收口旧 scope；当前 scope 的真实 transient / permanent 错误分类不变。详情打开、mode / 项目切换、运行视图、搜索 / 筛选隐藏当前媒体、资源删除或当前媒体身份变化继续暂停旧元素并清除待播放 ID；卡片卸载时再执行防御性暂停。
+- 解码容错在 DOM 层二次收口：`img` 只在安全读取成功后挂载，`error` 后立即卸载并回退类型占位；`video` 在 `loadeddata` 前保持占位，只在首个可解码画面后显示，`error` 后卸载。图片与视频的卡内几何统一 `object-fit: contain`，透明媒体壳使用棋盘底。
+- 卡片宽高从 `resourceCanvasLayoutModel.ts` 的 `RESOURCE_CANVAS_CARD_WIDTH / HEIGHT` 作为唯一权威值，React 把它们以 CSS 变量注入资源画布；卡片 CSS、slot 间距、分区 extent 与 `ResourceDependencyOverlay` 端点继续消费这两个常量，不允许在 CSS 中再写第二套尺寸。
+- 阶段二把“分区高度”和“分区内容倍率”作为两个独立表现态。高度、倍率和分区内部滚动的前端会话 Map 以 `projectId + mode + section` 隔离；外层资源画布滚动以 `projectId + mode` 隔离。它们都不使用 localStorage / sessionStorage，不写 manifest 或 `game-creator-resource-layout.v1`。高度模型继续定义默认值、步长、“标题操作 + 至少一排 180×128 卡片”下限和由 `.game-resource-canvas.clientHeight` 夹取的上限；倍率模型固定 `0.5..2`、按钮步长 `0.1`，触摸板 `Ctrl/Cmd + wheel` 使用有界指数映射，WebKit `gesturestart/change/end` 使用同一 clamp。普通 wheel 不缩放；`Ctrl/Cmd + wheel` 由画布上的原生委托监听以 `{ passive: false }` 注册，先真实取消 WebView 默认缩放，再按最近的 section viewport 执行锚点缩放。捏合以 viewport 内手势中心换算逻辑内容坐标，并在下一帧补偿 scroll，避免缩放目标跳离指针。
+- 每个分区使用固定标题行与 `minmax(0, 1fr)` 内部 viewport；分区本体仍是 `.game-resource-canvas-content` 中的普通 grid item。逻辑 plane 继续承载未缩放的卡片坐标和 `180×128` 本体尺寸，外层 frame 按倍率设置真实滚动 extent，plane 仅使用 `transform-origin: 0 0` 的视觉 scale。超出当前高度或缩放范围时由分区 viewport 内部滚动，外层 `.game-resource-canvas` 只负责分区之间滚动。高度、倍率和内部滚动均不调用布局 CAS，也不改变媒体 React key；详情、项目或 mode 切换前捕获对应 scope，返回时分别恢复外层与分区滚动及原卡片焦点，未保存过的 scope 从 `0` 开始。
+- 固定四区分别在自己的 `.game-resource-plane` 内挂载 `ResourceDependencyOverlay`。每个分区最多创建一个 `ResizeObserver`，并把本区 scroll / resize / observer 回调合并到本区单一在途 `requestAnimationFrame`；SVG 和卡片直接消费同一逻辑坐标与父 plane scale，不通过异步屏幕测量重绑端点。分区 viewport 原生裁剪本区 SVG；一端离屏时只保留对应方向、带同语义 marker 的边界继续线，两端离屏时隐藏。项目 / mode 切换、搜索隐藏、资源删除和卸载继续丢弃旧 viewport / path 并清理 observer 与监听。
+- 阶段三的聚类已落在 `reconcileResourceCanvasLayout` 的 dependency 自动坐标派生步骤。它先按资源分类过滤 reference edge，并把 task-flow 按固定分类切成仅在同类 source / target 同时存在时有效的聚合超边；每个 section 再用精确边与 flow 临时节点建无向邻接表，以迭代遍历生成弱连通组。task-flow 只以“流节点 -> 成员”的线性成员关联参与布局，绝不展开 source × target 资源组合，不绘制 SVG，也不把搜索后的 visible set 用作输入。`dependencyDepth` 仍唯一决定横向业务层级；相关簇按 `minDependencyDepth + minStableResourceId` 排序，孤立集合置于所有相关簇之后，簇间使用单一布局常量留白。每个相关簇内先按稳定资源 ID 建同层初始序，再做固定两轮左至右 / 右至左的中位数扫描：精确引用读取相邻层的上下游 rank，task-flow 读取另一端成员 rank 的中位数，平局按稳定资源 ID 收口。dependency 自动位置使用 `48px` 列间走线区和 `40px` 行间走线区；每个相关簇以最大层行数确定高度，资源较少的层增加确定性半差偏移而在簇内居中，菱形 / 分叉两侧因此保持均衡。type 模式仍使用原 `16px` 行列间距。跨分类 read model 关系不进入前端聚类、边界偏置或拓扑签名，但 Rust 深度与原始图真相不改。显示坐标必须遵守前后端共享的 `0..=1_000_000` 上限；超深依赖在最后合法列确定性饱和，保留原始 `dependencyDepth`，同列资源继续按稳定顺序纵向避让。若任一自动 `x / y` 无法在合法域内落槽，协调必须在 IPC 前失败关闭，不持续提交必然被 Rust 拒绝的坐标。算法保持 `O(V + E)` 图遍历，加固定轮数的层内稳定排序和现有有界占用索引；4096 资源不允许全量配对。旧的 `manuallyPlaced=true` 坐标先占位并原样保留，聚类只派生自动坐标；同类型拓扑身份签名只记录有界的资源 ID 端点 / 成员，以便深度未变但邻接变化时触发重派生。图边、cluster ID 和签名都不写 sidecar。
 - 运行表现层首版直接嵌入当前项目的 loopback 游戏画面，并展示上一项 / 暂停继续 / 下一项切片控制、素材信息和数值微调面板。`preview.start` 启动本地 server 后把真实 URL 回写工作台，`preview.open` 只激活客户端内运行视图，不再调用系统浏览器；切片、参数调整和自然语言新增调节项首版仍只保留本地 UI 草稿，不修改代码或 manifest。
 - 右侧继续复用现有 Project Supervisor 会话、Runtime 澄清和确认链路；输入区展示 `严格审批 / 风险审批 / 无需审批` 独立面板。P0 只有严格审批可选；风险审批和无需审批保持视觉不可用但允许点击查看原因，不替代 Runtime 的逐动作权限、确认、sandbox 或 reconciliation 门禁。风险 Rank 算法记录在 `docs/project-memory/todos/【待解决】AI游戏创作高风险审批Rank-2026-07-20.md`，前端不得自行计算。
 - 底部状态栏默认展示策划、美术、程序 3 组，并允许在同一栏展开数值、音频、发布组；状态来自 manifest 与当前 Supervisor run 的 Runtime，悬停显示当前任务与进度。累计泥点必须等待后端计费归因投影；Agent.md 编辑和自定义 Skill 在来源审核、版本、权限、sandbox 与回滚合同完备前不向普通用户开放。
@@ -422,13 +439,13 @@ game-project/
 2026-08-03 需求收口：资源卡手动拖动暂缓。历史 sidecar 坐标继续只读恢复，自动布局仍可为资源集合协调提交 CAS；sidecar schema、布局读取、FIFO、跨窗口系统锁和 Rust CAS 基础设施全部保留，但当前没有用户手动布局入口。
 
 - dependency 与 type 分别保存到 `.agent/workbench/resource-layouts/dependency.json` 和 `type.json`，schema 固定为 `game-creator-resource-layout.v1`。布局是本地工作台 UI sidecar，不进入 manifest、游戏项目 mutation revision、Runtime verification、Agent 产物、资产或云端事实。
-- `x / y` 使用 section 内容坐标，`updatedAt` 使用 Unix 毫秒；文件缺失只合成 revision `0` 空布局且不产生只读副作用。每个 mode 按 `projectId + mode + expectedRevision` 做 CAS，成功 revision 加一，冲突返回最新完整布局且不写文件。revision 虽在 Rust 中使用 `u64`，但跨 JSON / Tauri / TypeScript 的合法域固定为 `0..=Number.MAX_SAFE_INTEGER`；共享 DTO 序列化与反序列化、Tauri 输入和前端 IPC 响应均执行同一边界校验。
+- `x / y` 使用 section 内容坐标，前后端合法域固定为 `0..=1_000_000`；`updatedAt` 使用 Unix 毫秒。文件缺失只合成 revision `0` 空布局且不产生只读副作用。每个 mode 按 `projectId + mode + expectedRevision` 做 CAS，成功 revision 加一，冲突返回最新完整布局且不写文件。revision 虽在 Rust 中使用 `u64`，但跨 JSON / Tauri / TypeScript 的合法域固定为 `0..=Number.MAX_SAFE_INTEGER`；共享 DTO 序列化与反序列化、Tauri 输入和前端 IPC 响应均执行同一边界校验。前端自动坐标在 IPC 前按坐标合同验证，dependency 深度过大时只饱和显示列而不修改 Rust 返回的原始深度；纵向避让也不得越过上限。
 - Tauri 命令固定为 `read_local_project_resource_canvas_layout` 与 `update_local_project_resource_canvas_layout`。写命令先只读确认有效 manifest，再通过持久 `.layout.lock` 入口获取句柄级跨窗口系统锁，并在锁内复核 projectId、重新读取当前 sidecar。Unix 使用 `flock`，Windows 使用不共享文件句柄；释放只通过句柄 Drop / 进程退出完成，不使用 mtime stale 回收，也不删除锁文件。其余写入继续复用安全路径、链接检查、容量上限、恢复副本与原子替换能力；不能只依赖 React 状态或进程内锁。
 - 前端从当前项目开发大组件中拆出纯布局模型与持久 Hook。默认布局、碰撞检查、资源增删协调和 section 边界由纯模型负责；读取、异步身份、CAS、错误回滚和冲突载入由 Hook 负责。Hook 以 `projectPath + projectId + mode` epoch 隔离异步结果，资源变化不取消首读或在途保存；自动协调写入经同一 FIFO 串行提交，每笔都使用最近一次成功 / 冲突响应的权威 revision。资源卡是普通可点击按钮，不绑定卡片级 Pointer 拖动处理器；指针移动不修改 CSS 坐标、不调用 SVG preview、不提交手动布局 CAS。
 - 新资源只在第一次进入某个 mode 时计算默认不重叠位置；全部现存坐标保持不变。搜索、筛选、窗口 resize 和 mode 切换不得重排或回写已有坐标，窄视图通过 section 画布范围与滚动访问，不裁切持久坐标。
 - type 默认布局固定按 `subtype -> mediaType -> label -> id` 排序。manifest 资产的 subtype 使用 `asset.kind`，任务产物、导入附件和 Agent 文本成果使用稳定的来源 fallback；subtype 必须进入资源协调签名，不能因 MIME 相同而退化成按名称混排。
 - 自动协调保存失败时保留当前会话布局；CAS 冲突载入对方最新布局，需要继续协调时最多追加两次重试，持续跨窗口竞争时停止自旋。用户提示只说明“布局已在其他窗口更新”，不要求重新拖动。损坏、未知 schema、身份冲突、超限与链接文件失败关闭，不能用空布局覆盖原文件。
-- 本布局持久化切片不包含资源关系线、资源替换、聚焦态持久化、缩放 / 平移、搜索 / 筛选条件、当前 mode，也不修改 `api-server` 或 SpacetimeDB。资源关系线与当前会话内中央聚焦已在后续独立前端切片接入，不改变本段 sidecar 合同；其余 P1 能力继续独立实施。
+- 本布局持久化切片不包含资源关系线、资源替换、聚焦态持久化、分区高度、分区内容倍率、整个画布平移、搜索 / 筛选条件、当前 mode，也不修改 `api-server` 或 SpacetimeDB。资源关系线、当前会话内中央聚焦、分区独立高度与内容倍率已在后续独立前端切片接入，都不改变本段 sidecar 合同；其余 P1 能力继续独立实施。
 
 历史实施顺序已完成 TypeScript / Rust DTO、Tauri sidecar/CAS、前端纯模型与持久 Hook。二维手动拖动接线现已暂缓；重新开放前必须先更新 PRD 与验收合同。任何后续步骤不得用 `localStorage`、manifest 字段或只在当前 React 会话有效的状态冒充项目持久化。
 
@@ -443,15 +460,15 @@ game-project/
 - `read_local_project_resource_graph` 读取当前 manifest、前端资源卡身份列表和最多 `32 MiB` 的安全 Agent DB 尾部，通过 Rust 构建稳定 read model；读取使用既有 Agent DB 普通文件 / 链接 / 追加锁边界，不新增数据库或 sidecar。返回资源 ID、引用边、聚合任务流、producer assignment、独立 `dependencyDepths`、循环集合、unresolved 外部 ID、局部连接索引和 `producerMappingTruncated`。
 - 精确引用把 manifest 资产 `source.referenceResourceIds` 唯一匹配到另一资产的 `source.resourceId`，再转换为本次资源卡 ID；无匹配、多匹配、重复卡片或已删除资源只记录为 unresolved / 忽略，不生成边。引用边按 `sourceResourceId + targetResourceId` 稳定去重；前端 `resourceDependencyGraphModel.ts` 再做一次 DTO 端点防御过滤，避免异步切项目时出现幽灵线。
 - task flow 只读取存在于当前 manifest 的任务依赖。画布资产 producer 仅接受 `agent.runtime.canvas.asset_generate` 中经 manifest 校验的 `assetId -> agentId`；External Editor 返回并保存在 `source.taskId` 的 `task-1` 等身份属于平台生成任务，禁止复用为 manifest task。多个有效 Agent 对同一资产形成冲突或证据缺失时，不生成该资产对应 task flow。任务产物 / Agent 回执继续使用资源投影中已有的 manifest task 身份。
-- 资源按可信 producer 分组，每个 `sourceTaskId -> targetTaskId` 只生成一个聚合 flow；SVG 侧绘制 source 分支、唯一主线和 target 分支，路径数量为 `O(S+T)`，禁止资源笛卡尔积。局部连接索引保存 resource 关联的 reference edge ID / task flow ID，不预先展开 `S×T` 邻接矩阵。
+- 资源按可信 producer 分组，每个 `sourceTaskId -> targetTaskId` 只生成一个聚合 flow；前端布局以 `O(S+T)` 成员关系消费该超边，禁止资源笛卡尔积。task-flow 不进入 SVG 或画布无障碍关系说明。局部连接索引仍保存 resource 关联的 reference edge ID / task flow ID，不预先展开 `S×T` 邻接矩阵。
 - 资源引用图和完整任务依赖图在 Rust 分别使用迭代式强连通分量分析。任务环检测不能依赖可视 task flow 是否有两端资源，否则无产物任务参与的环会漏报；循环边只带 cyclic 标记，不触发递归展开。
-- `ResourceDependencyOverlay.tsx` 使用原生 SVG path/marker，绝对定位在 `.game-resource-canvas-content` 底层并统一 `pointer-events: none`。橙色实线表示 `asset-reference`，灰色圆头虚线表示 `task-flow`；两类连线统一使用连续贝塞尔曲线，任务主线略强于两端分支，箭头使用不随高亮线宽缩放的稳定用户空间尺寸，避免直角折线、突兀拐弯和箭头跳变。不引入 D3、React Flow 或其它图表依赖。
+- `ResourceDependencyOverlay.tsx` 使用原生 SVG path/marker；每个固定资源分区在自己的 `.game-resource-plane` 内挂载一个绝对定位 SVG，并统一 `pointer-events: none`。SVG 与卡片直接使用同一逻辑 `x / y`、权威卡片尺寸、父 plane CSS scale 和 viewport scroll，不再用 `getBoundingClientRect` 把四区卡片屏幕坐标拼到全局图层。画布只用橙色实线与橙色实心箭头表示同类型 `asset-reference`；task-flow、跨分类关系均不进入渲染。dependency 专用 `48px / 40px` 行列间距为相邻卡片预留可辨认线身；相关簇窄层居中减少同组边长差。不同横向层级且卡片间隙不少于固定阈值时优先从左右端口横连，同列、同深度或横向空间不足时才从上下端口纵连。同一卡片同侧的精确边按对端坐标与稳定边 ID 排序，在卡片边界内有界分配端口。同行 / 同列使用直线，需转向时只使用正交线段和最大 `10px` 二次曲线小圆角；自环保留卡外贝塞尔闭环。目标锚点为 marker 预留固定间隙，marker 使用用户空间尺寸并允许自身 overflow。不引入 D3、React Flow 或其它图表依赖。
 - `asset-reference` 的 source / target 是同一资源时使用卡片右侧外绕贝塞尔闭环，两个锚点分开且 marker 保留在返回锚点；路径不穿过卡片。dependency section 在现有 extent 外额外增加 `64px` 右侧视觉 gutter，确保最右卡片的闭环和箭头可滚动显示；不改卡片坐标、`resourceCanvasLayoutModel.ts` 或 sidecar。
-- 图层用 SVG 自身节点定位所属画布容器，测量各 section plane 相对原点；`ResizeObserver` 在图层挂载时只创建一次，与 window resize 一起负责重新测量并在卸载时清理。type 模式不挂载图层且释放 graph state；项目身份作为 key，切换 mode、项目或工作台卸载都会销毁旧 SVG。
+- 图层只从 SVG 父 plane 找到所属 section viewport；每个分区最多一个 `ResizeObserver`，并把该区 scroll / window resize 合并到单个 RAF，仅维护 `scroll / scale / client size` 换算后的逻辑 viewport。分区 viewport 通过浏览器原生 overflow 同时裁剪本区卡片和 SVG，因此不需要全局四区 clipPath，也不会穿过标题栏或泄漏到相邻分区。搜索决定精确引用端点是否参与几何；在 viewport 中两端可见时绘制完整路径，一端可见时绘制对称的 incoming / outgoing 边界继续线，两端离屏时不渲染。type 模式不挂载图层且释放 graph state；项目身份作为 key，切换 mode、项目或工作台卸载都会销毁旧 SVG。
 - 基础 positions 保持稳定；卡片 Pointer Move 不进入 SVG preview，只有搜索、选择、项目切换、真实 positions 或 section origin 变化才重新协调图层。SVG 几何从不持久化。
 - Rust、前端 DTO/SVG 和工作台 AppSurface 回归覆盖生产 `task-1` 数据形状、真实 producer、证据缺失、精确引用、去重、无效 ID、完整任务环、4096 链式拓扑、聚合复杂度、搜索过滤、选择高亮、稳定 Observer、type 模式卸载与项目切换销毁。局部拖动更新与真实 Chromium 拖动性能目标暂缓。
 
-2026-08-03 阶段五加固，2026-08-05 明确截断信任边界：Rust read model 把 producer assignment 与布局深度分离。完整任务图先经 SCC 压缩形成可信 producer 的任务深度下限，精确资源引用图再经迭代式 SCC 压缩和确定性最长层级传播形成所有可见资源的 `dependencyDepths`；因此同一任务的派生资源、缺少 producer 审计的 manifest 资源和引用环都能稳定满足“被引用资源在前、引用资源在后”，没有引用关系的资源保持深度 `0`。`producerMappingTruncated=true` 只表示有界 Agent DB 尾部不足以证明 producer：前端必须失败关闭 `producerAssignments`、`taskFlows` 及其 `cyclicTaskIds`，但继续严格校验并消费 Rust 从当前 manifest、精确引用和仍可信下限构建的 `dependencyDepths`；`referenceEdges`、connection index 中的 reference 关系、`cyclicResourceIds` 和 unresolved reference 同样继续有效。前端不递归推导正式依赖层级。dependency 模式以 scope 化 `idle / loading / ready / failed` 状态阻断布局 Hook；图终态前不创建 fallback、不读取或写入 sidecar，图失败只以空图初始化一次。读取已有 dependency 布局时保留全部 `manuallyPlaced=true` 坐标，把 `manuallyPlaced=false` 作为可派生自动位置按最终深度重新协调；结果未变化时不写入。任务流仍按任务对聚合，不为布局计算或 SVG 绘制生成资源笛卡尔积。
+2026-08-03 阶段五加固，2026-08-05 明确截断信任边界：Rust read model 把 producer assignment 与布局深度分离。完整任务图先经 SCC 压缩形成可信 producer 的任务深度下限，精确资源引用图再经迭代式 SCC 压缩和确定性最长层级传播形成所有可见资源的 `dependencyDepths`；因此同一任务的派生资源、缺少 producer 审计的 manifest 资源和引用环都能稳定满足“被引用资源在前、引用资源在后”，没有引用关系的资源保持深度 `0`。`producerMappingTruncated=true` 只表示有界 Agent DB 尾部不足以证明 producer：前端必须失败关闭 `producerAssignments`、`taskFlows` 及其 `cyclicTaskIds`，但继续严格校验并消费 Rust 从当前 manifest、精确引用和仍可信下限构建的 `dependencyDepths`；`referenceEdges`、connection index 中的 reference 关系、`cyclicResourceIds` 和 unresolved reference 同样继续有效。前端不递归推导正式依赖层级。dependency 模式以 scope 化 `idle / loading / ready / failed` 状态阻断布局 Hook；图终态前不创建 fallback、不读取或写入 sidecar，图失败只以空图初始化一次。读取已有 dependency 布局时保留全部 `manuallyPlaced=true` 坐标，把 `manuallyPlaced=false` 作为可派生自动位置按最终深度重新协调；结果未变化时不写入。任务流仍按任务对聚合，只作为布局超边使用，不生成资源笛卡尔积或 SVG。
 
 2026-08-03 阶段六：正式迭代版本直接扩展本地 `.agent/manifest.json`，不新增 checkpoint / layout sidecar / SpacetimeDB 平行业务真相。共享 Rust / TypeScript 合同新增可选 `versions: GameIterationVersion[]`；旧项目缺失字段时只读为空，不回填。Rust 在 manifest 读写边界校验版本唯一性、父先于子、根/原因一致、父子修订与时间单调、slot 唯一和 JavaScript 安全整数，并在覆盖已有 manifest 前要求磁盘版本数组是新数组的逐项相等前缀，从存储边界保证历史记录不可修改、删除或重排。
 
@@ -471,7 +488,7 @@ game-project/
 
 - 用户能创建本地 Web 游戏项目。
 - 用户进入项目开发页后能看到资源管理主视窗、陶泥儿对话栏和底部策划 / 美术 / 程序 Agent 状态栏；`1280×800` 最小横屏窗口和更大桌面窗口均不得出现页面级横向 / 纵向溢出，对话输入与底部 Agent 状态栏始终位于视口内。
-- 资源管理可在按依赖 / 按类型之间切换、搜索资源并点击打开当前资源详情；dependency 模式展示可验证的资源引用和聚合任务流，搜索过滤端点、选择高亮直接上下游。资源卡不可拖动，Pointer Move 不更新坐标、线段或手动布局；所有展示数据来自当前 manifest、当前资源投影或当前项目导入附件。
+- 资源管理可在按依赖 / 按类型之间切换、搜索资源并点击打开当前资源详情；dependency 画布只展示可验证的橙色精确资源引用，聚合任务流只参与自动布局并可在详情中读取。搜索过滤精确引用端点。资源卡不可拖动，Pointer Move 不更新坐标、线段或手动布局；所有展示数据来自当前 manifest、当前资源投影或当前项目导入附件。
 - 首个 `code-prototype` 任务未完成时运行入口不可进入并给出可感知提示；完成后可进入运行表现层，真实预览直接加载到客户端内受限运行容器。
 - 审批档位通过独立弹出面板切换，默认严格审批；界面选择不得绕过 Runtime 现有确认门禁。
 - 聊天输入 `/plan` 可在普通聊天消息里查看下一轮分工计划，不读取任务文件、不启动 run、不修改项目，也不新增普通用户计划面板。
@@ -540,7 +557,7 @@ game-project/
 
 ## v1 验收证据矩阵
 
-- 2026-08-03 资源管理阶段七收口：阶段零至阶段六已逐项对照飞书需求、当前 PRD、实现、测试与提交证据，剩余工作仅为完整验收。AppSurface 新增原生视频 `controls + preload="metadata"` 与资源读取策略失败安全空态回归，并确认失败时右侧 Project Supervisor 对话和底部 Agent Dock 不被中央主视窗替换；全量 Vitest 为 `171` 个文件、`2155 passed / 5 skipped`。应用内浏览器固定 `1280×800` 后，`window`、document 与 body 的 client / scroll 宽高均为 `1280×800`，未出现页面级溢出；开发页真实登录门禁未被绕过，工作台内部结构继续由 AppSurface 和 CSS 合同测试作为可重复证据。最终门禁还包括 lint、build、Rust workspace test / check、SpacetimeDB schema、原生壳、内容 / 编码和生产运维检查；本地 `.env*` 不进入提交。
+- 2026-08-03 资源管理阶段七收口：阶段零至阶段六已逐项对照飞书需求、当前 PRD、实现、测试与提交证据，剩余工作仅为完整验收。AppSurface 新增原生视频 `controls + preload="metadata"` 与资源读取策略失败安全空态回归，并确认失败时右侧 Project Supervisor 对话和底部 Agent Dock 不被中央主视窗替换；全量 Vitest 为 `171` 个文件、`2155 passed / 5 skipped`。当时应用内浏览器固定 `1280×800` 后，`window`、document 与 body 的 client / scroll 宽高均为 `1280×800`，未出现页面级溢出；开发页真实登录门禁未被绕过，工作台内部结构继续由 AppSurface 和 CSS 合同测试作为可重复证据。该实测只属于当时被测 HEAD，后续资源管理代码变更必须在新的当前 HEAD 重新测量并通过 PR 评论记录，不能复用本条历史数值。最终门禁还包括 lint、build、Rust workspace test / check、SpacetimeDB schema、原生壳、内容 / 编码和生产运维检查；本地 `.env*` 不进入提交。
 - `npm run ai-game-creator-shell:check`：覆盖壳 typecheck、聊天命令单测、用户 / 开发窗口 UI 边界 smoke、主窗口命令按钮复用 `/help` 命令列表、主窗口项目摘要从 manifest / trace 派生任务完成数、ready 数、资产来源分布和最近命令且未选项目时不显示、灵感草稿只填充输入框不提交、能力按钮复用 `/capabilities`、LLM状态按钮复用 `/llm-status` 且结果回填 Agent 状态列表、聊天侧 `/agents` 汇总和单 Agent 对话的 provider / 模型 / 流式 / API Key 读取状态、开发日志面板只读读取 `.agent/logs/command.log` / `preview.log` / `agent.log`、项目状态按钮复用 `/status`、权限按钮复用 `/policy` 且策略草稿按钮只填入 `/policy-confirm project.index` / `/policy-confirm asset.register` / `/policy-confirm memory.write` / `/policy-confirm preview.start` / `/policy-confirm preview.open` / `/policy-confirm preview.stop` / `/policy-confirm agent.run_status` / `/policy-confirm conversation.read` / `/policy-confirm conversation.write`、审计按钮复用 `/audit`、资产按钮复用 `/assets` 且资产结果可一键复用 `/read`、任务按钮复用 `/tasks`、聊天侧 `/agents` 汇总每个 Agent 的当前状态、聊天侧 `/agent-conversations` 列出 Agent 对话读取命令、聊天侧 `/agent-memories` 列出 Agent 私有记忆读取命令、Trace 按钮复用 `/trace`、文件按钮复用 `/files` 且文件结果可一键复用 `/read`、索引按钮复用 `/index`、记忆 / 短期记忆 / 黑板按钮复用 `/memory long|short|blackboard`、快照按钮复用 `/checkpoint`、快照列表按钮复用 `/checkpoints` 且 checkpoint 结果可一键复用 `/diff` / `/restore`、历史按钮复用 `/history`、受限命令白名单按钮复用 `/commands` 且无需项目初始化、静态自检快捷按钮复用 `/smoke`、预览状态快捷按钮复用 `/preview-status`、主窗口运行时配置面板读写 Tauri 配置目录中的 `game-creator.config.json`、支持全局与每个 agent 单独选择 LLM Provider 且不把 API Key 写入聊天、单 Agent 对话面板可手动追加私有记忆且走 `memory.write` 策略、主窗口提供音效登记、画板音频导入和常用生成产物读取草稿入口，聊天侧 `/art` 可盘点美术素材且不直接触发平台生成或画板同步，聊天侧 `/context` 可盘点生成上下文来源且不直接读取上下文文件，聊天侧 `/timeline` 可汇总项目活动时间线且不直接读取日志或 trace 文件，聊天侧 `/artifacts` 可列出常用生成产物读取命令，聊天侧 `/run-artifacts` 可列出最近 run 产物读取命令，聊天侧 `/run-files` 可列出 Agent 运行辅助文件读取命令，聊天侧 `/logs` 可列出固定日志读取命令且不直接读取日志，聊天侧 `/brief` 只基于当前已加载的 manifest / 最近 run trace / 预览状态 / 资产数量 / 最近命令生成项目简报，聊天侧 `/goal` 只基于当前 manifest.goal / 最近 run goal / taskGraph.goal 汇总创作目标来源，提供 `/next` 或 `/agent-resume 细化目标：` 后续草稿且不直接触发 Tauri 读写、文件读取、预览启动或新增面板，聊天侧 `/mvp` 只基于当前 manifest / 最近 run trace / preview / 任务 / 资产 / 最近命令汇总本轮最小可玩范围，提供 `/run` 等后续草稿且不直接触发 Tauri 读写、文件读取、预览启动、导出或新增面板，聊天侧 `/audience` 只基于当前 manifest / 最近 run trace / preview 准备首批试玩对象和观察重点且不直接触发 Tauri 读写、预览启动、导出或继续 run，聊天侧 `/feedback` 只基于当前 manifest / 最近 run trace / preview 准备试玩反馈模板和修改说明草稿且不直接触发 Tauri 读写、预览启动或继续 run，聊天侧 `/next` 基于当前已加载的 manifest / 最近 run trace 输出下一步建议和 `/goal` / `/mvp` / `/accessibility` / `/performance` / `/tasks` / `/criteria` / `/groups` / `/budget` / `/qa` / `/changes` / `/trace` / `/run` / `/open-preview` / `/test-plan` / `/audience` / `/feedback` / `/assets` / `/art` / `/context` / `/timeline` / `/artifacts` / `/run-artifacts` / `/run-files` / `/logs` / `/agent-resume ` 等安全命令草稿方向，提供一个首选草稿且不直接触发 Tauri 读写、预览启动或文件读取，聊天侧 `/capabilities` 展示标准 Agent 能力清单且不打开开发面板、聊天侧 `/audit` 从 manifest / 本地文件 / `.agent/run.latest.json` 分别汇总用户面、6 组任务配置、6 组协作证据、任务编排、loop、记忆、本地产物、HTTP 预览、画板回流和权限日志证据且不打开开发面板；未生成 `.agent/run.latest.json` 前，`/audit` 只能标记任务配置通过，不能把 6 组协作证据误判为通过；trace 已存在但状态为 `failed`、`needs-revision`、`running`、`max-passes-exhausted` 或缺少 `Evaluator passed` 步骤时，`/audit` 不能把 loop 误判为通过。聊天侧 `/llm-status` 只显示 base_url / model / API Key 已读取状态且不泄露密钥本体、聊天侧长期记忆查看 / 追加 / 覆盖 / 删除的授权本地项目路径、上传资产写入后的 manifest 刷新和 `/assets` 聊天可见性、`/smoke` 聊天侧确认后只通过授权本地项目路径执行白名单 `game.static_smoke`、`/run` 聊天侧确认后通过授权本地项目路径执行 `game.static_smoke`、启动 `127.0.0.1` 本地预览并切换客户端运行视图、`/preview` 聊天侧确认后通过授权本地项目路径启动 `127.0.0.1` 本地预览并切换客户端运行视图、`/status` 聊天侧项目 / 任务 / 资产 / 预览 / 最近命令汇总、`/files` 聊天侧本地项目文件列表、`/read` 聊天侧文件读取的授权本地项目路径、`/tasks` 聊天侧任务拆分与下一步专业组展示的授权本地项目路径、聊天确认生成后实时展示 Planner / Orchestrator / 角色 brief / Generator / Evaluator / 写盘 / 自检进度，并自动读取 `.agent/run.latest.json` 在普通聊天消息里展示 Run、LLM 对话、loop 轮次、工具调用、active / carry-over 任务、返工焦点、编排轮次、最近步骤、画板同步建议命令和本地产物快照、`/trace` 聊天侧读取 `.agent/run.latest.json` 并展示 loop 轮次 / active 任务 / 返工路线 / dependency waves 的授权本地项目路径、`platform-agent` 编排测试、共享契约测试、Tauri 本地能力测试和无密钥本地 provider 端到端 smoke；用于证明独立 App、真实 LLM-compatible loop、本地落盘、自检和 HTTP 预览闭环，并覆盖 loop 跑满 3 轮失败时不会写入最终游戏产物。
 - V1.17 单 Agent 持久计划验收：Rust 定向用例覆盖 native function 显式 `planUpdate`、文本 JSON omission 兼容、输入上限、单调 revision、外层 failed / budget-exhausted 保留最后可信进度、终态保留、工具 action 下标零推进、未完成步骤阻止 final、损坏状态失败关闭、context bundle v3/v2 恢复、finalization v2 计划快照与 assistant 已落盘后的 state 丢失恢复，以及 thinking / legacy plan / repair 公共审计零正文；`appSurface.test.ts` 覆盖开发 UI 刷新后完整 8 步仍在，以及普通用户 Supervisor 只显示完成数、当前步骤、等待、下一步和协作数量。2026-07-16 正式 `openai_chat / gpt-5.5` 的 `steer-runner-kill` suite 已证明 Runner boot 切换和 same-run steer 后 Agent/Session/run 不变、终态步骤不丢、revision 不回退、旧动作零执行、副作用零重放、唯一 assistant/completed 与零正文/密钥/路径公共泄漏，当前门禁状态为 PASS。
 - V1.18 单 Agent 持久 Goal mode 验收：Rust/Runner 定向用例覆盖 Goal CAS 生命周期、当前 Session/run 隔离、Provider 中断安全边界、paused 重启不自启、同 run resume、旧 cancel tombstone 清理、当前 v5 context、v5 pending action 的 Goal 快照门禁、旧 schema 失败关闭、Goal edit 后自动/确认动作转 `blocked` 并重规划、finalization v3 以及 assistant 后 Runtime/Goal completed 顺序；`appSurface.test.ts` 覆盖 `执行 / 聊天 / 目标`、独立 Goal 弹层、完整控制动作和正式用户界面隔离。2026-07-16 真实 `openai_chat / gpt-5.5` 已完成 revision 1 -> 2、旧动作 blocked 且零执行、真实失败后 patchset 修复、pause、Runner pidfd 强杀换 boot、重启零推进、显式同 run resume；最终代码快照复跑有 11 组 Provider lifecycle 闭合、计划 revision 11 八步完成、唯一 assistant、零副作用重放和零 Goal/密钥/路径公共泄漏，门禁状态为 PASS。
@@ -945,4 +962,4 @@ game-project/
 - 后台 Agent 的 manifest 变化以共用 Runtime 状态投影 / 终态 emitter 作为失效因果点：`game-creator-agent-runtime-update` 的 Rust / TypeScript DTO 固定携带 `manifestInvalidated`，且 App 必须在 Supervisor、selected agent、session 和 run 身份的任何 early return 之前处理失效。GUI 进程内 Runtime 直接发该事件；External Runner 是独立进程、没有 GUI `AppHandle`，因此 Runner 协议 v5 的 `runner.attach_gui_owner` 必须登记 GUI 创建的随机 loopback 端口和 64 位随机令牌，Runner 的同一 emitter 通过受令牌保护的短连接转发 `game-creator-manifest-invalidated`。两条路径都只传项目路径与 Agent 身份，不复制 manifest，也不靠轮询补偿。
 - App 收到当前项目的 Runtime / relay 失效后重新调用 `get_local_game_manifest`。重读按项目 single-flight 合并事件风暴；读取中再到达失效只追加一轮串行重读，不并发提交同项目响应。应用结果同时校验组件仍挂载、当前项目路径和项目 scope version；项目切换、组件卸载或旧 scope 的迟到响应不得覆盖新项目。Project Supervisor 再通过既有 `onManifestChange(projectPath, manifest)` 向启动器外传完整快照，启动器只更新仍为同一路径的活动项目上下文；资源列表、依赖图输入、任务状态、运行入口和正式版本卡必须在当前页面实时重投影，不要求关闭或重开项目。集成测试记录“事件未重新打开项目”的调用基线前，必须先等待项目写入最近列表后触发的只读目录状态刷新完成，不能把这项合法后台检查误算成失效事件副作用。
 - `.agent/agent.db` 有界尾部读取报告截断时，审计 producer 映射失败关闭，不生成基于不完整审计的 producer、task flow 或对应任务环。前端收到截断 DTO 时只剔除 `producerAssignments`、`taskFlows` 与对应 `cyclicTaskIds`；Rust 根据当前 manifest、精确资源引用和仍可信任务深度下限返回的 `dependencyDepths` 继续保留，前端只校验资源仍存在且深度为非负安全整数，不得自行重算或压平权威深度。精确引用边、reference connection index、`cyclicResourceIds` 与 unresolved references 同样继续保留。
-- 资源依赖 SVG 继续作为不可交互装饰层隐藏，但 dependency 画布通过 `aria-describedby` 提供当前可见精确引用和任务流的文本等价列表。中央资源聚焦按稳定 `resourceId` 驱动焦点状态：仅 `null -> id` 或 `idA -> idB` 聚焦详情 region，同一 ID 的 manifest 重投影不得抢走音频、视频、链接或关闭按钮焦点；显式收起和 Escape 恢复画布滚动并优先聚焦原触发卡片。聚焦资源被删除时清理 stale focused / selected ID，关闭详情并把焦点落到资源搜索框；项目切换或运行视图切换清除旧恢复意图，不得恢复旧项目卡片。橙色引用线及箭头使用对 `#fffdfa` 画布达到至少 `3:1` 的颜色。
+- 资源依赖 SVG 继续作为不可交互装饰层隐藏，但 dependency 画布通过 `aria-describedby` 只提供当前可见橙色精确引用的文本等价列表；task-flow 不进入画布关系说明。中央资源聚焦按稳定 `resourceId` 驱动焦点状态：仅 `null -> id` 或 `idA -> idB` 聚焦详情 region，同一 ID 的 manifest 重投影不得抢走音频、视频、链接或关闭按钮焦点；显式收起和 Escape 恢复画布滚动并优先聚焦原触发卡片。聚焦资源被删除时清理 stale focused / selected ID，关闭详情并把焦点落到资源搜索框；项目切换或运行视图切换清除旧恢复意图，不得恢复旧项目卡片。橙色引用线及箭头使用对 `#fffdfa` 画布达到至少 `3:1` 的颜色。
diff --git a/packages/shared/src/contracts/gameCreationApp.ts b/packages/shared/src/contracts/gameCreationApp.ts
index 79492e3a1..961a6fd0d 100644
--- a/packages/shared/src/contracts/gameCreationApp.ts
+++ b/packages/shared/src/contracts/gameCreationApp.ts
@@ -471,6 +471,7 @@ export interface GameCreationAppAssetManifestEntry {
 export const GAME_CREATION_RESOURCE_LAYOUT_SCHEMA_VERSION =
   'game-creator-resource-layout.v1' as const;
 export const GAME_CREATION_RESOURCE_LAYOUT_MAX_SAFE_REVISION = 9_007_199_254_740_991;
+export const GAME_CREATION_RESOURCE_LAYOUT_MAX_COORDINATE = 1_000_000;
 
 export function isSafeProjectResourceCanvasLayoutRevision(
   value: unknown,
@@ -483,6 +484,17 @@ export function isSafeProjectResourceCanvasLayoutRevision(
   );
 }
 
+export function isSafeProjectResourceCanvasCoordinate(
+  value: unknown,
+): value is number {
+  return (
+    typeof value === 'number' &&
+    Number.isSafeInteger(value) &&
+    value >= 0 &&
+    value <= GAME_CREATION_RESOURCE_LAYOUT_MAX_COORDINATE
+  );
+}
+
 export type ProjectResourceCanvasLayoutMode = 'dependency' | 'type';
 
 export type ProjectResourceCanvasSection =