From b7a659cdfed02f9147a2a250227e0b233815dad1 Mon Sep 17 00:00:00 2001
From: Suzumiya <suzmii@qq.com>
Date: Tue, 8 Sep 2026 16:19:45 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20AGC=20=E8=81=8A=E5=A4=A9=E6=94=AF?=
 =?UTF-8?q?=E6=8C=81=E7=B4=A0=E6=9D=90=E4=B8=8E=E8=BF=90=E8=A1=8C=E7=94=BB?=
 =?UTF-8?q?=E9=9D=A2=E7=BB=93=E6=9E=84=E5=8C=96=E5=BC=95=E7=94=A8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 新增通用素材引用编辑器与结构化引用协议

- 三个聊天入口接入 @ 候选和素材选择面板

- 资源卡新增 @引用 入口

- 运行画面新增区域点选与 runtime-region 引用

- Rust 按 manifest 二次校验并生成安全投影

- 补充前端与 Rust 定向测试
---
 .../src-tauri/src/agent.rs                    |   2 +
 .../src/agent/direct_codex_references.rs      | 326 ++++++++
 .../src-tauri/src/agent/direct_runtime.rs     |  26 +-
 .../src-tauri/src/preview.rs                  | 107 +++
 apps/ai-game-creator-shell/src/App.tsx        |  71 +-
 .../LocalGamePreviewFrame.tsx                 | 145 +++-
 .../ProjectSupervisorView.tsx                 |  40 +-
 .../ProjectWorkspaceChatPane.tsx              |  33 +-
 .../ResourceReferenceChip.tsx                 |  48 ++
 .../ResourceReferenceInput.tsx                | 714 ++++++++++++++++++
 .../ResourceReferenceNode.tsx                 |  91 +++
 .../SupervisorChatOnlyView.tsx                |  40 +-
 .../project-workspace/resourceReferences.ts   | 153 ++++
 apps/ai-game-creator-shell/src/styles.css     | 450 +++++++++++
 .../src/view/project-development/index.tsx    |  83 ++
 .../tests/resourceReferenceInput.test.tsx     | 184 +++++
 .../【功能说明】AGC聊天素材引用-2026-09-08.md |  27 +
 17 files changed, 2480 insertions(+), 60 deletions(-)
 create mode 100644 apps/ai-game-creator-shell/src-tauri/src/agent/direct_codex_references.rs
 create mode 100644 apps/ai-game-creator-shell/src/features/project-workspace/ResourceReferenceChip.tsx
 create mode 100644 apps/ai-game-creator-shell/src/features/project-workspace/ResourceReferenceInput.tsx
 create mode 100644 apps/ai-game-creator-shell/src/features/project-workspace/ResourceReferenceNode.tsx
 create mode 100644 apps/ai-game-creator-shell/src/features/project-workspace/resourceReferences.ts
 create mode 100644 apps/ai-game-creator-shell/tests/resourceReferenceInput.test.tsx
 create mode 100644 docs/【功能说明】AGC聊天素材引用-2026-09-08.md

diff --git a/apps/ai-game-creator-shell/src-tauri/src/agent.rs b/apps/ai-game-creator-shell/src-tauri/src/agent.rs
index cc37945ca..aeab6c9ab 100644
--- a/apps/ai-game-creator-shell/src-tauri/src/agent.rs
+++ b/apps/ai-game-creator-shell/src-tauri/src/agent.rs
@@ -16,6 +16,7 @@ mod direct_codex_attachments;
 mod direct_codex_audit;
 mod direct_project_history;
 mod direct_project_turn_history;
+mod direct_codex_references;
 mod direct_runtime;
 mod direct_tool_bridge;
 mod direct_tools_mcp;
@@ -42,6 +43,7 @@ pub(crate) use direct_codex_attachments::*;
 pub(crate) use direct_codex_audit::*;
 pub(crate) use direct_project_history::*;
 pub(crate) use direct_project_turn_history::*;
+pub(crate) use direct_codex_references::*;
 pub(crate) use direct_runtime::*;
 pub(crate) use direct_tool_bridge::*;
 pub(crate) use direct_tools_mcp::*;
diff --git a/apps/ai-game-creator-shell/src-tauri/src/agent/direct_codex_references.rs b/apps/ai-game-creator-shell/src-tauri/src/agent/direct_codex_references.rs
new file mode 100644
index 000000000..c8a3e07b2
--- /dev/null
+++ b/apps/ai-game-creator-shell/src-tauri/src/agent/direct_codex_references.rs
@@ -0,0 +1,326 @@
+use super::*;
+
+pub(crate) const MAX_DIRECT_CODEX_REFERENCES: usize = 32;
+const MAX_DIRECT_CODEX_REFERENCE_ID_CHARS: usize = 200;
+const MAX_DIRECT_CODEX_REFERENCE_LABEL_CHARS: usize = 160;
+const MAX_DIRECT_CODEX_REFERENCE_SOURCE_CHARS: usize = 32;
+const MAX_DIRECT_CODEX_REFERENCE_ELEMENT_CHARS: usize = 80;
+const MAX_DIRECT_CODEX_REFERENCE_TEXT_CHARS: usize = 240;
+
+const DIRECT_CODEX_REFERENCE_HEADER: &str =
+    "[本轮用户引用素材：以下均为当前项目已确认的安全引用。请使用稳定资源 ID 和项目相对路径读取，不要读取或输出其它路径。]";
+
+#[derive(Clone, Debug, serde::Deserialize)]
+#[serde(rename_all = "camelCase", tag = "type")]
+pub(crate) enum DirectCodexTurnReference {
+    #[serde(rename = "resource")]
+    Resource(DirectCodexResourceReference),
+    #[serde(rename = "runtime-region")]
+    RuntimeRegion(DirectCodexRuntimeRegionReference),
+}
+
+#[derive(Clone, Debug, serde::Deserialize)]
+#[serde(rename_all = "camelCase")]
+pub(crate) struct DirectCodexResourceReference {
+    pub(crate) resource_id: String,
+    #[serde(default)]
+    pub(crate) label: Option<String>,
+    #[serde(default)]
+    pub(crate) source: Option<String>,
+}
+
+#[derive(Clone, Debug, serde::Deserialize)]
+#[serde(rename_all = "camelCase")]
+pub(crate) struct DirectCodexRuntimeRegionReference {
+    #[serde(default)]
+    pub(crate) label: Option<String>,
+    #[serde(default)]
+    pub(crate) run_id: Option<String>,
+    #[serde(default)]
+    pub(crate) version_id: Option<String>,
+    #[serde(default)]
+    pub(crate) element_tag: Option<String>,
+    #[serde(default)]
+    pub(crate) element_role: Option<String>,
+    #[serde(default)]
+    pub(crate) text: Option<String>,
+    #[serde(default)]
+    pub(crate) width: Option<f64>,
+    #[serde(default)]
+    pub(crate) height: Option<f64>,
+    #[serde(default)]
+    pub(crate) resource_ids: Vec<String>,
+}
+
+fn sanitize_reference_text(value: &str, max_chars: usize) -> Option<String> {
+    let sanitized = value
+        .trim()
+        .chars()
+        .filter(|character| !character.is_control())
+        .take(max_chars)
+        .collect::<String>();
+    if sanitized.is_empty() {
+        None
+    } else {
+        Some(sanitized)
+    }
+}
+
+fn sanitize_reference_label(value: Option<&str>) -> Option<String> {
+    value.and_then(|value| sanitize_reference_text(value, MAX_DIRECT_CODEX_REFERENCE_LABEL_CHARS))
+}
+
+fn sanitize_reference_source(value: Option<&str>) -> Option<String> {
+    let value = sanitize_reference_text(value?, MAX_DIRECT_CODEX_REFERENCE_SOURCE_CHARS)?;
+    if value
+        .chars()
+        .all(|character| character.is_ascii_alphanumeric() || matches!(character, '-' | '_' | '.'))
+    {
+        Some(value)
+    } else {
+        None
+    }
+}
+
+fn sanitize_reference_element(value: Option<&str>) -> Option<String> {
+    let value = sanitize_reference_text(value?, MAX_DIRECT_CODEX_REFERENCE_ELEMENT_CHARS)?;
+    if value
+        .chars()
+        .all(|character| character.is_ascii_alphanumeric() || matches!(character, '-' | '_' | '.'))
+    {
+        Some(value)
+    } else {
+        None
+    }
+}
+
+fn sanitize_reference_dimension(value: Option<f64>) -> Option<u32> {
+    value
+        .filter(|value| value.is_finite() && *value > 0.0)
+        .map(|value| value.round().clamp(1.0, 100_000.0) as u32)
+}
+
+fn asset_display_label(asset: &GameCreationAppAssetManifestEntry) -> String {
+    let basename = asset
+        .local_path
+        .rsplit(['/', '\\'])
+        .next()
+        .unwrap_or(&asset.id);
+    let without_extension = basename
+        .rsplit_once('.')
+        .map(|(name, _)| name)
+        .unwrap_or(basename)
+        .trim();
+    if without_extension.is_empty() {
+        asset.id.clone()
+    } else {
+        without_extension
+            .chars()
+            .filter(|character| !character.is_control())
+            .take(MAX_DIRECT_CODEX_REFERENCE_LABEL_CHARS)
+            .collect()
+    }
+}
+
+fn validate_resource_reference_id(value: &str) -> Result<String, String> {
+    let resource_id = value.trim();
+    if resource_id.is_empty()
+        || resource_id.chars().count() > MAX_DIRECT_CODEX_REFERENCE_ID_CHARS
+        || resource_id.chars().any(char::is_control)
+    {
+        return Err("引用的素材 ID 无效，请移除后重新选择".to_string());
+    }
+    Ok(resource_id.to_string())
+}
+
+fn render_resource_reference_line(
+    manifest: &GameCreationAppManifest,
+    reference: &DirectCodexResourceReference,
+) -> Result<String, String> {
+    let resource_id = validate_resource_reference_id(&reference.resource_id)?;
+    let asset = manifest
+        .assets
+        .iter()
+        .find(|asset| asset.id == resource_id)
+        .ok_or_else(|| "引用的素材已不存在，请移除后重新选择".to_string())?;
+    let local_path = sanitize_attachment_local_path(&asset.local_path)
+        .ok_or_else(|| "引用的素材路径无效，请移除后重新选择".to_string())?;
+    let label = sanitize_reference_label(reference.label.as_deref())
+        .unwrap_or_else(|| asset_display_label(asset));
+    let source = sanitize_reference_source(reference.source.as_deref())
+        .unwrap_or_else(|| "unknown".to_string());
+    Ok(format!(
+        "- 素材 ID：{resource_id}；名称：{label}；类型：{}；媒体类型：{}；项目路径：{local_path}；来源：{source}",
+        asset.kind, asset.media_type
+    ))
+}
+
+fn render_runtime_region_reference_line(
+    manifest: &GameCreationAppManifest,
+    reference: &DirectCodexRuntimeRegionReference,
+) -> Result<String, String> {
+    let label = sanitize_reference_label(reference.label.as_deref())
+        .unwrap_or_else(|| "运行画面区域".to_string());
+    let run_id = sanitize_reference_source(reference.run_id.as_deref());
+    let version_id = sanitize_reference_source(reference.version_id.as_deref());
+    let element_tag = sanitize_reference_element(reference.element_tag.as_deref());
+    let element_role = sanitize_reference_element(reference.element_role.as_deref());
+    let text = reference
+        .text
+        .as_deref()
+        .and_then(|value| sanitize_reference_text(value, MAX_DIRECT_CODEX_REFERENCE_TEXT_CHARS));
+    let width = sanitize_reference_dimension(reference.width);
+    let height = sanitize_reference_dimension(reference.height);
+
+    let mut related_resource_ids = Vec::new();
+    for resource_id in &reference.resource_ids {
+        let resource_id = validate_resource_reference_id(resource_id)?;
+        if !manifest.assets.iter().any(|asset| asset.id == resource_id) {
+            return Err("运行画面引用的素材已变化，请重新点选".to_string());
+        }
+        related_resource_ids.push(resource_id);
+    }
+
+    let mut parts = vec![format!("名称：{label}")];
+    if let Some(run_id) = run_id {
+        parts.push(format!("运行标识：{run_id}"));
+    }
+    if let Some(version_id) = version_id {
+        parts.push(format!("版本标识：{version_id}"));
+    }
+    if let Some(element_tag) = element_tag {
+        parts.push(format!("元素：{element_tag}"));
+    }
+    if let Some(element_role) = element_role {
+        parts.push(format!("角色：{element_role}"));
+    }
+    if let Some(text) = text {
+        parts.push(format!("文本摘要：{text}"));
+    }
+    if let (Some(width), Some(height)) = (width, height) {
+        parts.push(format!("尺寸：{width}x{height}"));
+    }
+    if !related_resource_ids.is_empty() {
+        parts.push(format!("关联素材 ID：{}", related_resource_ids.join(",")));
+    }
+    Ok(format!("- 运行画面区域：{}", parts.join("；")))
+}
+
+pub(crate) fn render_direct_codex_references_section(
+    root: &Path,
+    references: &[DirectCodexTurnReference],
+) -> Result<Option<String>, String> {
+    if references.is_empty() {
+        return Ok(None);
+    }
+    if references.len() > MAX_DIRECT_CODEX_REFERENCES {
+        return Err(format!("一次最多引用 {MAX_DIRECT_CODEX_REFERENCES} 个素材"));
+    }
+    let manifest = read_manifest_for_project(root)?;
+    let mut lines = Vec::with_capacity(references.len());
+    for reference in references {
+        lines.push(match reference {
+            DirectCodexTurnReference::Resource(reference) => {
+                render_resource_reference_line(&manifest, reference)?
+            }
+            DirectCodexTurnReference::RuntimeRegion(reference) => {
+                render_runtime_region_reference_line(&manifest, reference)?
+            }
+        });
+    }
+    Ok(Some(
+        std::iter::once(DIRECT_CODEX_REFERENCE_HEADER.to_string())
+            .chain(lines)
+            .collect::<Vec<_>>()
+            .join("\n"),
+    ))
+}
+
+#[cfg(test)]
+mod tests {
+    use super::*;
+
+    fn fixture_project() -> tempfile::TempDir {
+        let directory = tempfile::tempdir().expect("temp project");
+        let root = directory.path();
+        std::fs::create_dir_all(root.join(".agent")).expect("create agent dir");
+        let mut manifest = new_game_creation_app_manifest("project-1", "测试项目");
+        manifest.assets.push(GameCreationAppAssetManifestEntry {
+            id: "asset-hero".to_string(),
+            kind: "character".to_string(),
+            media_type: "image/png".to_string(),
+            local_path: "assets/hero.png".to_string(),
+            source: GameCreationAppAssetSource {
+                kind: GameCreationAppAssetSourceKind::Uploaded,
+                canvas_project_id: None,
+                resource_id: None,
+                asset_object_id: None,
+                task_id: None,
+                prompt: None,
+                model: None,
+                generation_route: None,
+                generation_kind: None,
+                reference_resource_ids: Vec::new(),
+            },
+            image_sequence_frames: None,
+            image_sequence_duration_ms: None,
+        });
+        write_manifest(&root.join(".agent/manifest.json"), &manifest).expect("write manifest");
+        directory
+    }
+
+    #[test]
+    fn resource_reference_uses_manifest_identity_and_never_accepts_client_paths() {
+        let project = fixture_project();
+        let reference: DirectCodexTurnReference = serde_json::from_str(
+            r#"{"type":"resource","resourceId":"asset-hero","label":"主角","source":"asset-picker","localPath":"C:\\secret.png"}"#,
+        )
+        .expect("reference json");
+        let section = render_direct_codex_references_section(
+            project.path(),
+            std::slice::from_ref(&reference),
+        )
+        .expect("render")
+        .expect("section");
+        assert!(section.contains("素材 ID：asset-hero"));
+        assert!(section.contains("名称：主角"));
+        assert!(section.contains("项目路径：assets/hero.png"));
+        assert!(!section.contains("C:\\secret.png"));
+    }
+
+    #[test]
+    fn deleted_resource_fails_closed() {
+        let project = fixture_project();
+        let reference: DirectCodexTurnReference = serde_json::from_str(
+            r#"{"type":"resource","resourceId":"asset-missing","label":"不存在"}"#,
+        )
+        .expect("reference json");
+        let error = render_direct_codex_references_section(
+            project.path(),
+            std::slice::from_ref(&reference),
+        )
+        .expect_err("missing resource");
+        assert_eq!(error, "引用的素材已不存在，请移除后重新选择");
+    }
+
+    #[test]
+    fn runtime_region_keeps_only_safe_summary_and_existing_resource_ids() {
+        let project = fixture_project();
+        let reference: DirectCodexTurnReference = serde_json::from_str(
+            r#"{"type":"runtime-region","label":"开始按钮","runId":"run-1","elementTag":"button","elementRole":"button","text":"开始游戏","width":120.4,"height":40.2,"resourceIds":["asset-hero"],"html":"<button onclick=secret>"}"#,
+        )
+        .expect("reference json");
+        let section = render_direct_codex_references_section(
+            project.path(),
+            std::slice::from_ref(&reference),
+        )
+        .expect("render")
+        .expect("section");
+        assert!(section.contains("运行画面区域：名称：开始按钮"));
+        assert!(section.contains("文本摘要：开始游戏"));
+        assert!(section.contains("尺寸：120x40"));
+        assert!(section.contains("关联素材 ID：asset-hero"));
+        assert!(!section.contains("onclick"));
+        assert!(!section.contains("secret"));
+    }
+}
diff --git a/apps/ai-game-creator-shell/src-tauri/src/agent/direct_runtime.rs b/apps/ai-game-creator-shell/src-tauri/src/agent/direct_runtime.rs
index e7974ba25..4be5cf487 100644
--- a/apps/ai-game-creator-shell/src-tauri/src/agent/direct_runtime.rs
+++ b/apps/ai-game-creator-shell/src-tauri/src/agent/direct_runtime.rs
@@ -4414,6 +4414,7 @@ pub(crate) async fn chat_with_game_creator_direct_codex(
     creation_type: Option<String>,
     client_turn_id: Option<String>,
     attachments: Option<Vec<DirectCodexTurnAttachment>>,
+    references: Option<Vec<DirectCodexTurnReference>>,
 ) -> Result<String, String> {
     let root = Path::new(project_path.trim());
     let turn_id = normalize_direct_client_turn_id(client_turn_id.as_deref())?;
@@ -4428,16 +4429,33 @@ pub(crate) async fn chat_with_game_creator_direct_codex(
         &prompt,
         attachments.as_deref().unwrap_or_default(),
     );
-    let user_prompt = match render_direct_codex_user_prompt(
-        &prompt,
-        attachments.as_deref().unwrap_or_default(),
-    ) {
+    let attachments = attachments.unwrap_or_default();
+    let references = references.unwrap_or_default();
+    let mut user_prompt = match render_direct_codex_user_prompt(&prompt, &attachments) {
         Ok(prompt) => prompt,
+        Err(_) if !references.is_empty() && prompt.trim().is_empty() => String::new(),
         Err(error) => {
             audit.finish(false);
             return Err(error);
         }
     };
+    if let Some(reference_section) = match render_direct_codex_references_section(root, &references)
+    {
+        Ok(section) => section,
+        Err(error) => {
+            audit.finish(false);
+            return Err(error);
+        }
+    } {
+        if !user_prompt.trim().is_empty() {
+            user_prompt.push_str("\n\n");
+        }
+        user_prompt.push_str(&reference_section);
+    }
+    if user_prompt.trim().is_empty() {
+        audit.finish(false);
+        return Err("聊天内容不能为空".to_string());
+    }
     let reply = match run_direct_game_creator_turn_at_with_creation_type_and_emitter(
         root,
         &user_prompt,
diff --git a/apps/ai-game-creator-shell/src-tauri/src/preview.rs b/apps/ai-game-creator-shell/src-tauri/src/preview.rs
index f79c9bc39..528b3a386 100644
--- a/apps/ai-game-creator-shell/src-tauri/src/preview.rs
+++ b/apps/ai-game-creator-shell/src-tauri/src/preview.rs
@@ -488,6 +488,113 @@ const PREVIEW_FIT_BRIDGE_SCRIPT: &str = r#"(() => {
       if (!document.hidden) schedule();
     }, 500);
   };
+  const inspectMessageType = 'genarrative.local-preview-inspect.v1';
+  const inspectState = { enabled: false, overlay: null, current: null };
+  const inspectOverlay = () => {
+    if (inspectState.overlay) return inspectState.overlay;
+    const overlay = document.createElement('div');
+    overlay.dataset.genarrativePreviewInspect = 'true';
+    overlay.style.cssText = 'position:fixed;z-index:2147483647;pointer-events:none;border:2px solid #f97316;background:rgba(249,115,22,0.14);box-shadow:inset 0 0 0 1px rgba(255,255,255,0.85);';
+    (document.body || document.documentElement).appendChild(overlay);
+    inspectState.overlay = overlay;
+    return overlay;
+  };
+  const clearInspectOverlay = () => {
+    inspectState.overlay?.remove();
+    inspectState.overlay = null;
+    inspectState.current = null;
+  };
+  const inspectElementSummary = (element) => {
+    const rect = element.getBoundingClientRect();
+    const tag = element.tagName ? element.tagName.toLowerCase() : 'div';
+    const role = (element.getAttribute && element.getAttribute('role')) || '';
+    const text = (element.innerText || element.textContent || '')
+      .replace(/\s+/g, ' ')
+      .trim()
+      .slice(0, 120);
+    const resourceIds = [];
+    if (element.getAttribute) {
+      for (const name of ['data-resource-id', 'data-asset-id', 'data-genarrative-resource-id']) {
+        const value = element.getAttribute(name);
+        if (value && !resourceIds.includes(value)) resourceIds.push(value);
+      }
+    }
+    const media = element.querySelector ? element.querySelector('img,video,audio') : null;
+    const rawSource =
+      (element.getAttribute && element.getAttribute('src')) ||
+      (media && media.getAttribute && media.getAttribute('src')) ||
+      '';
+    let sourcePath = '';
+    if (rawSource) {
+      try {
+        sourcePath = new URL(rawSource, window.location.href).pathname;
+      } catch {
+        sourcePath = '';
+      }
+    }
+    return {
+      label: text || tag,
+      elementTag: tag,
+      elementRole: role.slice(0, 80),
+      text,
+      width: Math.max(1, Math.round(rect.width)),
+      height: Math.max(1, Math.round(rect.height)),
+      resourceIds,
+      sourcePath,
+    };
+  };
+  const postInspect = (action, selection) => {
+    window.parent.postMessage({ type: inspectMessageType, action, selection }, '*');
+  };
+  const stopInspect = (cancelled) => {
+    if (!inspectState.enabled) return;
+    inspectState.enabled = false;
+    document.removeEventListener('mousemove', handleInspectMove, true);
+    document.removeEventListener('click', handleInspectClick, true);
+    document.removeEventListener('keydown', handleInspectKeyDown, true);
+    clearInspectOverlay();
+    postInspect(cancelled ? 'cancelled' : 'disabled');
+  };
+  const handleInspectMove = (event) => {
+    if (!inspectState.enabled) return;
+    const target = event.target;
+    if (!(target instanceof Element)) return;
+    inspectState.current = target;
+    const rect = target.getBoundingClientRect();
+    const overlay = inspectOverlay();
+    overlay.style.left = `${rect.left}px`;
+    overlay.style.top = `${rect.top}px`;
+    overlay.style.width = `${rect.width}px`;
+    overlay.style.height = `${rect.height}px`;
+  };
+  const handleInspectClick = (event) => {
+    if (!inspectState.enabled) return;
+    event.preventDefault();
+    event.stopPropagation();
+    const target = event.target;
+    if (target instanceof Element) postInspect('selected', inspectElementSummary(target));
+    stopInspect(false);
+  };
+  const handleInspectKeyDown = (event) => {
+    if (!inspectState.enabled || event.key !== 'Escape') return;
+    event.preventDefault();
+    stopInspect(true);
+  };
+  const startInspect = () => {
+    if (inspectState.enabled) return;
+    inspectState.enabled = true;
+    document.addEventListener('mousemove', handleInspectMove, true);
+    document.addEventListener('click', handleInspectClick, true);
+    document.addEventListener('keydown', handleInspectKeyDown, true);
+    postInspect('enabled');
+  };
+  window.addEventListener('message', (event) => {
+    if (event.source !== window.parent) return;
+    const data = event.data;
+    if (!data || data.type !== inspectMessageType) return;
+    if (data.action === 'enable') startInspect();
+    else if (data.action === 'disable') stopInspect(false);
+  });
   if (ready) activate();
   else window.addEventListener('load', activate, { once: true });
 })();"#;
diff --git a/apps/ai-game-creator-shell/src/App.tsx b/apps/ai-game-creator-shell/src/App.tsx
index d5c2067e8..587238530 100644
--- a/apps/ai-game-creator-shell/src/App.tsx
+++ b/apps/ai-game-creator-shell/src/App.tsx
@@ -239,6 +239,15 @@ import {
 import { handleProjectSummaryChatCommand } from './features/project-workspace/projectSummaryCommands';
 import { ProjectSupervisorView } from './features/project-workspace/ProjectSupervisorView';
 import { ProjectWorkspaceChatPane } from './features/project-workspace/ProjectWorkspaceChatPane';
+import type { ResourceReferenceInputHandle } from './features/project-workspace/ResourceReferenceInput';
+import type {
+  ChatComposerDraft,
+  ChatReference,
+} from './features/project-workspace/resourceReferences';
+import {
+  RESOURCE_REFERENCE_INSERT_EVENT,
+  type ResourceReferenceInsertEventDetail,
+} from './features/project-workspace/resourceReferences';
 import { SupervisorChatOnlyView } from './features/project-workspace/SupervisorChatOnlyView';
 import { RuntimeConfigDialog } from './features/runtime-config/RuntimeConfigDialog';
 import {
@@ -490,6 +499,7 @@ type ExecuteChatAgentReplyInput = {
   creationType?: HomeCreationType | null;
   attachments?: DirectCodexTurnAttachment[];
   directPolicyChecked?: boolean;
+  references?: ChatReference[];
 };
 
 export function App({
@@ -591,6 +601,8 @@ export function App({
       ? readSupervisorChatDraft(initialProjectPath)
       : '',
   );
+  const [chatReferences, setChatReferences] = useState<ChatReference[]>([]);
+  const chatComposerRef = useRef<ResourceReferenceInputHandle | null>(null);
   const [chatAgentBusy, setChatAgentBusy] = useState(false);
   const [directCodexProgress, setDirectCodexProgress] = useState('');
   const [directCodexStatus, setDirectCodexStatus] = useState<
@@ -850,7 +862,7 @@ export function App({
   }, [hydratePlanGddState, localProject?.projectPath]);
   const [projectSupervisorExpectedRunId, setProjectSupervisorExpectedRunId] =
     useState<string | null>(null);
-  const chatInputRef = useRef<HTMLInputElement | null>(null);
+  const chatInputRef = useRef<HTMLDivElement | null>(null);
   const supervisorChatMessagesRef = useRef<HTMLDivElement | null>(null);
   const supervisorChatShouldFollowLatestRef = useRef(true);
   const [assetStatus, setAssetStatus] = useState('未上传');
@@ -2928,6 +2940,7 @@ export function App({
       if (supervisorChatOnly) {
         setChatInput(readSupervisorChatDraft(openedProject.projectPath));
       }
+      setChatReferences([]);
       setManifest(openedProject.manifest);
       setProjectFiles([]);
       setProjectCheckpoints([]);
@@ -3167,9 +3180,34 @@ export function App({
 
   function prepareChatCommandDraft(commandDraft: string) {
     setChatInput(commandDraft);
+    setChatReferences([]);
     window.setTimeout(() => chatInputRef.current?.focus(), 0);
   }
 
+  function handleChatComposerChange(draft: ChatComposerDraft) {
+    setChatInput(draft.text);
+    setChatReferences(draft.references);
+  }
+
+  useEffect(() => {
+    const handleResourceReferenceInsert = (event: Event) => {
+      const detail = (event as CustomEvent<ResourceReferenceInsertEventDetail>)
+        .detail;
+      if (!detail?.reference) return;
+      chatComposerRef.current?.insertReferences([detail.reference]);
+      chatComposerRef.current?.focus();
+    };
+    window.addEventListener(
+      RESOURCE_REFERENCE_INSERT_EVENT,
+      handleResourceReferenceInsert,
+    );
+    return () =>
+      window.removeEventListener(
+        RESOURCE_REFERENCE_INSERT_EVENT,
+        handleResourceReferenceInsert,
+      );
+  }, []);
+
   function prepareProjectAssetRegisterDraft(localPath: string) {
     prepareChatCommandDraft(projectFileActionDrafts(localPath).assetCommand);
   }
@@ -4175,15 +4213,17 @@ export function App({
   async function handleChatSubmit(event: FormEvent<HTMLFormElement>) {
     event.preventDefault();
     const prompt = chatInput.trim();
+    const references = chatReferences;
     if (agentRuntimeNeedsUserInput(projectSupervisorRuntimeRef.current)) {
       setProjectSupervisorRuntimeError('请先回答项目总控 Agent 当前的澄清问题');
       return;
     }
-    if (!prompt || chatAgentBusy) {
+    if ((!prompt && references.length === 0) || chatAgentBusy) {
       return;
     }
 
     setChatInput('');
+    setChatReferences([]);
     setMessages((current) => [
       ...current,
       {
@@ -5271,7 +5311,7 @@ export function App({
       return;
     }
 
-    void executeChatAgentReply({ prompt });
+    void executeChatAgentReply({ prompt, references });
   }
 
   async function executeLlmConfigStatus() {
@@ -5418,6 +5458,7 @@ export function App({
     creationType,
     attachments,
     directPolicyChecked = false,
+    references,
   }: ExecuteChatAgentReplyInput) {
     // Product default: send the conversation directly to Codex app-server.
     // The legacy Supervisor/harness path remains below for rollback and tests.
@@ -5560,6 +5601,7 @@ export function App({
             clientTurnId: string;
             creationType?: HomeCreationType;
             attachments?: DirectCodexTurnAttachment[];
+            references?: ChatReference[];
           } = {
             projectPath: directProjectPath,
             prompt,
@@ -5571,6 +5613,9 @@ export function App({
           if (attachments?.length) {
             directTurnInput.attachments = attachments;
           }
+          if (references?.length) {
+            directTurnInput.references = references;
+          }
           const reply = await directInvoke<string>(
             'chat_with_game_creator_direct_codex',
             directTurnInput,
@@ -10819,6 +10864,7 @@ export function App({
   ) {
     event.preventDefault();
     const prompt = chatInput.trim();
+    const references = chatReferences;
     if (
       !directCodexProductRuntime &&
       supervisorChatOnly &&
@@ -10834,7 +10880,7 @@ export function App({
       setProjectSupervisorRuntimeError('请先回答项目总控 Agent 当前的澄清问题');
       return;
     }
-    if (!prompt || chatAgentBusy) {
+    if ((!prompt && references.length === 0) || chatAgentBusy) {
       return;
     }
     if (directCodexProductRuntime && prompt === '/history') {
@@ -10843,6 +10889,7 @@ export function App({
         return;
       }
       setChatInput('');
+      setChatReferences([]);
       void loadProjectConversation(nextProjectPath, false, 'replace');
       return;
     }
@@ -10853,6 +10900,7 @@ export function App({
       ? createDirectCodexConversationTurnId()
       : undefined;
     setChatInput('');
+    setChatReferences([]);
     setMessages((current) => [
       ...current,
       {
@@ -10873,6 +10921,7 @@ export function App({
     void executeChatAgentReply({
       prompt,
       clientTurnId: directConversationTurnId,
+      references,
     });
   }
 
@@ -10889,9 +10938,11 @@ export function App({
       <SupervisorChatOnlyView
         chatAgentBusy={chatAgentBusy}
         chatInput={chatInput}
+        chatReferences={chatReferences}
+        composerRef={chatComposerRef}
         messagesRef={supervisorChatMessagesRef}
         onCancelConfirmation={cancelUiCommandConfirmation}
-        onChatInputChange={setChatInput}
+        onChatInputChange={handleChatComposerChange}
         onCloseRuntimeConfig={() => setRuntimeConfigOpen(false)}
         onConfirmConfirmation={confirmUiCommand}
         onOpenRuntimeConfig={() => setRuntimeConfigOpen(true)}
@@ -10917,6 +10968,7 @@ export function App({
         hiddenConversationCount={hiddenConversationCount}
         needsUserInput={projectSupervisorNeedsUserInput}
         visibleMessages={visibleMessages}
+        visibleMainProjectAssets={visibleMainProjectAssets}
         workspaceStatus={workspaceStatus}
         expectedRunId={projectSupervisorExpectedRunId}
       />
@@ -10927,6 +10979,8 @@ export function App({
     return (
       <ProjectSupervisorView
         chatInput={chatInput}
+        chatReferences={chatReferences}
+        composerRef={chatComposerRef}
         directCodex={directCodexProductRuntime}
         directStatus={directCodexProductRuntime ? directCodexStatus : null}
         directProcessDetail={
@@ -10940,7 +10994,7 @@ export function App({
         }
         onCancelConfirmation={cancelUiCommandConfirmation}
         onCancelPendingCommand={handlePendingCommandCancel}
-        onChatInputChange={setChatInput}
+        onChatInputChange={handleChatComposerChange}
         onConfirmConfirmation={confirmUiCommand}
         onConfirmPendingCommand={() => void handlePendingCommandConfirm()}
         onScroll={handleSupervisorChatScroll}
@@ -10957,6 +11011,7 @@ export function App({
             : projectSupervisorTransientReply
         }
         visibleMessages={visibleMessages}
+        visibleMainProjectAssets={visibleMainProjectAssets}
         visibleProfessionalAgentCards={visibleProfessionalAgentCards}
         showProfessionalCollaboration={
           !directCodexProductRuntime && orchestrationMode === 'professional-dag'
@@ -11005,6 +11060,8 @@ export function App({
         cancelUiCommandConfirmation={cancelUiCommandConfirmation}
         chatAgentBusy={chatAgentBusy}
         chatInput={chatInput}
+        chatReferences={chatReferences}
+        composerRef={chatComposerRef}
         chatInputRef={chatInputRef}
         confirmProjectCreateInNonEmptyFolder={
           confirmProjectCreateInNonEmptyFolder
@@ -11078,7 +11135,7 @@ export function App({
         queueRunLocalShortcut={queueRunLocalShortcut}
         queueStaticSmokeShortcut={queueStaticSmokeShortcut}
         scheduleReadyAgentTasks={scheduleReadyAgentTasks}
-        setChatInput={setChatInput}
+        onChatComposerChange={handleChatComposerChange}
         showChatHelp={showChatHelp}
         showEarlierConversationMessages={showEarlierConversationMessages}
         visibleMainProjectAssets={visibleMainProjectAssets}
diff --git a/apps/ai-game-creator-shell/src/features/project-workspace/LocalGamePreviewFrame.tsx b/apps/ai-game-creator-shell/src/features/project-workspace/LocalGamePreviewFrame.tsx
index eae16c9c5..c121c6449 100644
--- a/apps/ai-game-creator-shell/src/features/project-workspace/LocalGamePreviewFrame.tsx
+++ b/apps/ai-game-creator-shell/src/features/project-workspace/LocalGamePreviewFrame.tsx
@@ -1,9 +1,29 @@
 /* eslint-disable react-refresh/only-export-components -- The URL and fit helpers are exported with their small rendering adapter for focused tests. */
 
-import { useEffect, useMemo, useRef, useState } from 'react';
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 
 export const LOCAL_GAME_PREVIEW_SIZE_MESSAGE =
   'genarrative.local-preview-size.v1';
+export const LOCAL_GAME_PREVIEW_INSPECT_MESSAGE =
+  'genarrative.local-preview-inspect.v1';
+
+export type LocalGamePreviewInspectSelection = {
+  label: string;
+  elementTag?: string;
+  elementRole?: string;
+  text?: string;
+  width?: number;
+  height?: number;
+  resourceIds: string[];
+  sourcePath?: string;
+};
+
+type LocalGamePreviewInspectMessage =
+  | {
+      action: 'selected';
+      selection: LocalGamePreviewInspectSelection;
+    }
+  | { action: 'enabled' | 'disabled' | 'cancelled' };
 
 export type LocalGamePreviewContentSize = {
   contentWidth: number;
@@ -54,6 +74,77 @@ function positiveFiniteDimension(value: unknown) {
     : null;
 }
 
+function sanitizeInspectText(value: unknown, maxChars: number) {
+  if (typeof value !== 'string') return undefined;
+  const sanitized = value
+    .trim()
+    .replace(/\s+/gu, ' ')
+    .split('')
+    .filter((character) => character.charCodeAt(0) >= 32)
+    .join('')
+    .slice(0, maxChars);
+  return sanitized || undefined;
+}
+
+function sanitizeInspectIdentifier(value: unknown, maxChars: number) {
+  const sanitized = sanitizeInspectText(value, maxChars);
+  if (!sanitized) return undefined;
+  return /^[A-Za-z0-9._-]+$/u.test(sanitized) ? sanitized : undefined;
+}
+
+function sanitizeInspectSourcePath(value: unknown) {
+  const sanitized = sanitizeInspectText(value, 512);
+  if (!sanitized) return undefined;
+  try {
+    return new URL(sanitized, 'http://local.invalid').pathname.slice(0, 512);
+  } catch {
+    return undefined;
+  }
+}
+
+export function parseLocalGamePreviewInspectMessage(
+  value: unknown,
+): LocalGamePreviewInspectMessage | null {
+  if (!value || typeof value !== 'object') return null;
+  const candidate = value as Record<string, unknown>;
+  if (candidate.type !== LOCAL_GAME_PREVIEW_INSPECT_MESSAGE) return null;
+  const action = candidate.action;
+  if (action === 'enabled' || action === 'disabled' || action === 'cancelled') {
+    return { action };
+  }
+  if (
+    action !== 'selected' ||
+    !candidate.selection ||
+    typeof candidate.selection !== 'object'
+  ) {
+    return null;
+  }
+  const selection = candidate.selection as Record<string, unknown>;
+  const label =
+    sanitizeInspectText(selection.label, 120) ??
+    sanitizeInspectIdentifier(selection.elementTag, 80);
+  if (!label) return null;
+  const resourceIds = Array.isArray(selection.resourceIds)
+    ? selection.resourceIds
+        .map((value) => sanitizeInspectIdentifier(value, 200))
+        .filter((value): value is string => Boolean(value))
+        .slice(0, 32)
+    : [];
+  return {
+    action: 'selected',
+    selection: {
+      label,
+      elementTag: sanitizeInspectIdentifier(selection.elementTag, 80),
+      elementRole: sanitizeInspectIdentifier(selection.elementRole, 80),
+      text: sanitizeInspectText(selection.text, 120),
+      width: positiveFiniteDimension(selection.width) ?? undefined,
+      height: positiveFiniteDimension(selection.height) ?? undefined,
+      resourceIds,
+      sourcePath: sanitizeInspectSourcePath(selection.sourcePath),
+    },
+  };
+}
+
 export function parseLocalGamePreviewContentSize(
   value: unknown,
 ): LocalGamePreviewContentSize | null {
@@ -150,10 +241,16 @@ export function LocalGamePreviewFrame({
   preview,
   title,
   className,
+  inspectMode = false,
+  onInspectSelection,
+  onInspectExit,
 }: {
   preview: LocalGamePreviewLike | null | undefined;
   title: string;
   className?: string;
+  inspectMode?: boolean;
+  onInspectSelection?: (selection: LocalGamePreviewInspectSelection) => void;
+  onInspectExit?: () => void;
 }) {
   const embeddedUrl = resolveEmbeddedPreviewUrl(preview);
   const containerRef = useRef<HTMLDivElement>(null);
@@ -166,6 +263,34 @@ export function LocalGamePreviewFrame({
   const [containerSize, setContainerSize] = useState({ width: 1, height: 1 });
   const [contentSize, setContentSize] =
     useState<LocalGamePreviewContentSize | null>(null);
+  const postInspectAction = useCallback(
+    (action: 'enable' | 'disable') => {
+      if (!embeddedUrl) return;
+      const iframeWindow = iframeRef.current?.contentWindow;
+      if (!iframeWindow) return;
+      iframeWindow.postMessage(
+        { type: LOCAL_GAME_PREVIEW_INSPECT_MESSAGE, action },
+        new URL(embeddedUrl).origin,
+      );
+    },
+    [embeddedUrl],
+  );
+
+  useEffect(() => {
+    postInspectAction(inspectMode ? 'enable' : 'disable');
+  }, [inspectMode, postInspectAction]);
+
+  useEffect(() => {
+    if (!inspectMode) return;
+    const handleKeyDown = (event: KeyboardEvent) => {
+      if (event.key !== 'Escape') return;
+      event.preventDefault();
+      postInspectAction('disable');
+      onInspectExit?.();
+    };
+    window.addEventListener('keydown', handleKeyDown, true);
+    return () => window.removeEventListener('keydown', handleKeyDown, true);
+  }, [inspectMode, onInspectExit, postInspectAction]);
 
   useEffect(() => {
     const container = containerRef.current;
@@ -215,7 +340,20 @@ export function LocalGamePreviewFrame({
         return;
       }
       const next = parseLocalGamePreviewContentSize(event.data);
-      if (!next) return;
+      if (!next) {
+        const inspect = parseLocalGamePreviewInspectMessage(event.data);
+        if (inspect) {
+          if (inspect.action === 'selected') {
+            onInspectSelection?.(inspect.selection);
+          } else if (
+            inspect.action === 'cancelled' ||
+            inspect.action === 'disabled'
+          ) {
+            onInspectExit?.();
+          }
+        }
+        return;
+      }
       const current = contentSizeRef.current;
       const nativeViewport = measuredContainerSizeRef.current;
       const appliedViewport = resolveLocalGamePreviewFitLayout(
@@ -244,7 +382,7 @@ export function LocalGamePreviewFrame({
     };
     window.addEventListener('message', handleMessage);
     return () => window.removeEventListener('message', handleMessage);
-  }, [embeddedUrl]);
+  }, [embeddedUrl, onInspectExit, onInspectSelection]);
 
   const fit = useMemo(
     () => resolveLocalGamePreviewFitLayout(containerSize, contentSize),
@@ -268,6 +406,7 @@ export function LocalGamePreviewFrame({
         }}
         sandbox="allow-scripts allow-same-origin allow-forms allow-pointer-lock"
         allow="autoplay; fullscreen; gamepad"
+        onLoad={() => postInspectAction(inspectMode ? 'enable' : 'disable')}
       />
     </div>
   );
diff --git a/apps/ai-game-creator-shell/src/features/project-workspace/ProjectSupervisorView.tsx b/apps/ai-game-creator-shell/src/features/project-workspace/ProjectSupervisorView.tsx
index 98737a746..ce067fc1b 100644
--- a/apps/ai-game-creator-shell/src/features/project-workspace/ProjectSupervisorView.tsx
+++ b/apps/ai-game-creator-shell/src/features/project-workspace/ProjectSupervisorView.tsx
@@ -1,10 +1,9 @@
 import { ArrowUp, Loader2 } from 'lucide-react';
 import type {
   ComponentProps,
-  Dispatch,
   FormEventHandler,
+  Ref,
   RefObject,
-  SetStateAction,
   UIEventHandler,
 } from 'react';
 import { useEffect, useRef, useState } from 'react';
@@ -40,6 +39,11 @@ import {
 import { isPlanningLaneRuntime } from './planningLane';
 import { PlanningLaneRuntimeStrip } from './PlanningLaneRuntimeStrip';
 import { resolvePendingCommandProjectPath } from './projectCommandPolicy';
+import {
+  ResourceReferenceInput,
+  type ResourceReferenceInputHandle,
+} from './ResourceReferenceInput';
+import type { ChatComposerDraft, ChatReference } from './resourceReferences';
 
 type RuntimePanelProps = ComponentProps<typeof ProjectSupervisorRuntimePanel>;
 
@@ -64,6 +68,8 @@ function directStatusTitle(status: string | null | undefined) {
 
 type ProjectSupervisorViewProps = RuntimePanelProps & {
   chatInput: string;
+  chatReferences: ChatReference[];
+  composerRef?: Ref<ResourceReferenceInputHandle>;
   directCodex?: boolean;
   directStatus?: GameCreatorDirectTurnUpdateStatus | null;
   directProcessDetail?: string;
@@ -73,7 +79,7 @@ type ProjectSupervisorViewProps = RuntimePanelProps & {
   needsUserInput: boolean;
   onCancelConfirmation: () => void;
   onCancelPendingCommand: () => void;
-  onChatInputChange: Dispatch<SetStateAction<string>>;
+  onChatInputChange: (draft: ChatComposerDraft) => void;
   onConfirmConfirmation: () => void;
   onConfirmPendingCommand: () => void;
   onScroll: UIEventHandler<HTMLDivElement>;
@@ -97,10 +103,13 @@ type ProjectSupervisorViewProps = RuntimePanelProps & {
     comment: string | null,
   ) => Promise<void>;
   onMakeGameFromApprovedGdd?: () => Promise<void>;
+  visibleMainProjectAssets?: import('../../../../../packages/shared/src/contracts/gameCreationApp').GameCreationAppAssetManifestEntry[];
 };
 
 export function ProjectSupervisorView({
   chatInput,
+  chatReferences,
+  composerRef,
   directCodex = false,
   directStatus = null,
   directProcessDetail = '',
@@ -131,6 +140,7 @@ export function ProjectSupervisorView({
   onPlanGddRefresh,
   onPlanGddDecision,
   onMakeGameFromApprovedGdd,
+  visibleMainProjectAssets = [],
   ...runtimePanelProps
 }: ProjectSupervisorViewProps) {
   const [expandedProcessKey, setExpandedProcessKey] = useState<string | null>(
@@ -350,29 +360,23 @@ export function ProjectSupervisorView({
             void validateModel();
           }}
         >
-          <textarea
-            aria-label={directCodex ? '陶泥儿对话内容' : '项目需求'}
+          <ResourceReferenceInput
+            ref={composerRef}
+            ariaLabel={directCodex ? '陶泥儿对话内容' : '项目需求'}
+            assets={visibleMainProjectAssets}
+            projectPath={projectPath}
             disabled={
               runtimePanelProps.controlBusy || needsUserInput || modelValidating
             }
             rows={3}
             value={chatInput}
+            references={chatReferences}
             placeholder={
               directCodex
-                ? '告诉陶泥儿接下来要做什么'
-                : '告诉项目总控接下来要做什么'
+                ? '告诉陶泥儿接下来要做什么，或输入 @ 选择资源'
+                : '告诉项目总控接下来要做什么，或输入 @ 选择资源'
             }
-            onChange={(event) => onChatInputChange(event.currentTarget.value)}
-            onKeyDown={(event) => {
-              if (
-                event.key === 'Enter' &&
-                !event.shiftKey &&
-                !event.nativeEvent.isComposing
-              ) {
-                event.preventDefault();
-                event.currentTarget.form?.requestSubmit();
-              }
-            }}
+            onChange={onChatInputChange}
           />
           {directCodex ? (
             <ConversationModelSelect
diff --git a/apps/ai-game-creator-shell/src/features/project-workspace/ProjectWorkspaceChatPane.tsx b/apps/ai-game-creator-shell/src/features/project-workspace/ProjectWorkspaceChatPane.tsx
index 4d7b5c8ea..27ffbe0fb 100644
--- a/apps/ai-game-creator-shell/src/features/project-workspace/ProjectWorkspaceChatPane.tsx
+++ b/apps/ai-game-creator-shell/src/features/project-workspace/ProjectWorkspaceChatPane.tsx
@@ -1,9 +1,8 @@
 import type {
   ChangeEventHandler,
-  Dispatch,
   FormEventHandler,
+  Ref,
   RefObject,
-  SetStateAction,
   UIEventHandler,
 } from 'react';
 import { Fragment } from 'react';
@@ -51,6 +50,11 @@ import {
   pendingCommandTitle,
 } from './pendingCommandPresentation';
 import { resolvePendingCommandProjectPath } from './projectCommandPolicy';
+import {
+  ResourceReferenceInput,
+  type ResourceReferenceInputHandle,
+} from './ResourceReferenceInput';
+import type { ChatComposerDraft, ChatReference } from './resourceReferences';
 
 type ProjectWorkspaceChatPaneProps = {
   agentRunStatus: string;
@@ -60,7 +64,9 @@ type ProjectWorkspaceChatPaneProps = {
   cancelUiCommandConfirmation: () => void;
   chatAgentBusy: boolean;
   chatInput: string;
-  chatInputRef: RefObject<HTMLInputElement | null>;
+  chatReferences: ChatReference[];
+  composerRef?: Ref<ResourceReferenceInputHandle>;
+  chatInputRef: RefObject<HTMLDivElement | null>;
   confirmProjectCreateInNonEmptyFolder: () => void;
   confirmUiCommand: () => Promise<void>;
   currentProjectTitle: string;
@@ -186,7 +192,7 @@ type ProjectWorkspaceChatPaneProps = {
   queueRunLocalShortcut: () => void;
   queueStaticSmokeShortcut: () => void;
   scheduleReadyAgentTasks: (skipPolicyConfirm?: boolean) => Promise<void>;
-  setChatInput: Dispatch<SetStateAction<string>>;
+  onChatComposerChange: (draft: ChatComposerDraft) => void;
   showChatHelp: () => void;
   showEarlierConversationMessages: () => void;
   visibleMainProjectAssets: GameCreationAppAssetManifestEntry[];
@@ -204,6 +210,8 @@ export function ProjectWorkspaceChatPane({
   cancelUiCommandConfirmation,
   chatAgentBusy,
   chatInput,
+  chatReferences,
+  composerRef,
   chatInputRef,
   confirmProjectCreateInNonEmptyFolder,
   confirmUiCommand,
@@ -269,7 +277,7 @@ export function ProjectWorkspaceChatPane({
   queueRunLocalShortcut,
   queueStaticSmokeShortcut,
   scheduleReadyAgentTasks,
-  setChatInput,
+  onChatComposerChange,
   showChatHelp,
   showEarlierConversationMessages,
   visibleMainProjectAssets,
@@ -933,13 +941,18 @@ export function ProjectWorkspaceChatPane({
               onChange={handleAssetUpload}
             />
           </label>
-          <input
-            ref={chatInputRef}
-            aria-label="创作想法"
+          <ResourceReferenceInput
+            ref={composerRef}
+            inputRef={chatInputRef}
+            ariaLabel="创作想法"
+            assets={visibleMainProjectAssets}
+            projectPath={projectPath}
             disabled={chatAgentBusy || projectSupervisorNeedsUserInput}
+            multiline={false}
             value={chatInput}
-            placeholder="例如：像素风横版动作小游戏"
-            onChange={(event) => setChatInput(event.currentTarget.value)}
+            references={chatReferences}
+            placeholder="例如：像素风横版动作小游戏，或输入 @ 选择资源"
+            onChange={onChatComposerChange}
           />
           <button
             type="submit"
diff --git a/apps/ai-game-creator-shell/src/features/project-workspace/ResourceReferenceChip.tsx b/apps/ai-game-creator-shell/src/features/project-workspace/ResourceReferenceChip.tsx
new file mode 100644
index 000000000..79fc67c3e
--- /dev/null
+++ b/apps/ai-game-creator-shell/src/features/project-workspace/ResourceReferenceChip.tsx
@@ -0,0 +1,48 @@
+import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
+import { $getNodeByKey, type NodeKey } from 'lexical';
+import { X } from 'lucide-react';
+
+import type { ChatReference } from './resourceReferences';
+
+export function ResourceReferenceChip({
+  reference,
+  nodeKey,
+}: {
+  reference: ChatReference;
+  nodeKey: NodeKey;
+}) {
+  const [editor] = useLexicalComposerContext();
+  return (
+    <span
+      className="resource-reference-chip"
+      data-resource-reference-id={
+        reference.type === 'resource' ? reference.resourceId : undefined
+      }
+      data-runtime-region-reference={
+        reference.type === 'runtime-region' ? 'true' : undefined
+      }
+      contentEditable={false}
+      title={
+        reference.type === 'resource'
+          ? `${reference.label} · ${reference.kind}`
+          : `${reference.label} · 运行区域`
+      }
+    >
+      <span aria-hidden="true">@</span>
+      <span className="resource-reference-chip-label">{reference.label}</span>
+      <button
+        type="button"
+        aria-label={`移除引用 ${reference.label}`}
+        onMouseDown={(event) => event.preventDefault()}
+        onClick={() => {
+          editor.update(() => {
+            const node = $getNodeByKey(nodeKey);
+            node?.remove();
+          });
+        }}
+      >
+        <X size={11} aria-hidden="true" />
+      </button>
+    </span>
+  );
+}
diff --git a/apps/ai-game-creator-shell/src/features/project-workspace/ResourceReferenceInput.tsx b/apps/ai-game-creator-shell/src/features/project-workspace/ResourceReferenceInput.tsx
new file mode 100644
index 000000000..bf0a53899
--- /dev/null
+++ b/apps/ai-game-creator-shell/src/features/project-workspace/ResourceReferenceInput.tsx
@@ -0,0 +1,714 @@
+import { LexicalComposer } from '@lexical/react/LexicalComposer';
+import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
+import { ContentEditable } from '@lexical/react/LexicalContentEditable';
+import { LexicalErrorBoundary } from '@lexical/react/LexicalErrorBoundary';
+import { OnChangePlugin } from '@lexical/react/LexicalOnChangePlugin';
+import { RichTextPlugin } from '@lexical/react/LexicalRichTextPlugin';
+import {
+  LexicalTypeaheadMenuPlugin,
+  MenuOption,
+  type MenuRenderFn,
+  useBasicTypeaheadTriggerMatch,
+} from '@lexical/react/LexicalTypeaheadMenuPlugin';
+import {
+  $createParagraphNode,
+  $createTextNode,
+  $getRoot,
+  $getSelection,
+  $isElementNode,
+  $isLineBreakNode,
+  $isRangeSelection,
+  $isTextNode,
+  COMMAND_PRIORITY_HIGH,
+  type EditorState,
+  KEY_ENTER_COMMAND,
+  KEY_ESCAPE_COMMAND,
+  type LexicalNode,
+  type TextNode,
+} from 'lexical';
+import {
+  AtSign,
+  Check,
+  FileText,
+  Image as ImageIcon,
+  Loader2,
+  Music2,
+  Search,
+  Video,
+} from 'lucide-react';
+import {
+  forwardRef,
+  type Ref,
+  type RefObject,
+  useCallback,
+  useEffect,
+  useImperativeHandle,
+  useMemo,
+  useRef,
+  useState,
+} from 'react';
+import { createPortal } from 'react-dom';
+
+import type { GameCreationAppAssetManifestEntry } from '../../../../../packages/shared/src/contracts/gameCreationApp';
+import { resolveTauriInvoke } from '../../app/tauri';
+import {
+  cancelLocalProjectResourcePreviewScope,
+  createProjectResourcePreviewRequestId,
+  createProjectResourcePreviewScopeId,
+} from '../../services/projectResourcePreviewTransport';
+import {
+  $createResourceReferenceNode,
+  $isResourceReferenceNode,
+  ResourceReferenceNode,
+} from './ResourceReferenceNode';
+import {
+  type ChatComposerDraft,
+  type ChatReference,
+  dedupeChatReferences,
+  RESOURCE_REFERENCE_FILTERS,
+  type ResourceReference,
+  type ResourceReferenceFilter,
+  resourceReferenceFilterKind,
+  resourceReferenceFromAsset,
+  resourceReferenceMatchesQuery,
+} from './resourceReferences';
+
+type ResourceReferenceInputProps = {
+  value: string;
+  references: ChatReference[];
+  onChange: (draft: ChatComposerDraft) => void;
+  assets: GameCreationAppAssetManifestEntry[];
+  projectPath: string;
+  disabled?: boolean;
+  placeholder?: string;
+  ariaLabel: string;
+  multiline?: boolean;
+  rows?: number;
+  inputRef?: RefObject<HTMLDivElement | null>;
+};
+
+export type ResourceReferenceInputHandle = {
+  insertReferences: (references: ChatReference[]) => void;
+  focus: () => void;
+};
+
+class ResourceMentionOption extends MenuOption {
+  reference: ResourceReference;
+
+  constructor(reference: ResourceReference) {
+    super(reference.resourceId);
+    this.reference = reference;
+  }
+}
+
+function referenceListKey(references: ChatReference[]) {
+  return references
+    .map((reference) =>
+      reference.type === 'resource'
+        ? `resource:${reference.resourceId}:${reference.source}:${reference.label}`
+        : `runtime-region:${reference.runId ?? ''}:${reference.label}:${
+            reference.elementTag ?? ''
+          }:${reference.text ?? ''}`,
+    )
+    .join('\u0001');
+}
+
+function sameDraft(left: ChatComposerDraft, right: ChatComposerDraft) {
+  return (
+    left.text === right.text &&
+    referenceListKey(left.references) === referenceListKey(right.references)
+  );
+}
+
+function collectDraftParts(
+  node: LexicalNode,
+  textParts: string[],
+  references: ChatReference[],
+) {
+  if ($isTextNode(node)) {
+    textParts.push(node.getTextContent());
+    return;
+  }
+  if ($isLineBreakNode(node)) {
+    textParts.push('\n');
+    return;
+  }
+  if ($isResourceReferenceNode(node)) {
+    textParts.push(`@${node.__reference.label}`);
+    references.push(node.__reference);
+    return;
+  }
+  if ($isElementNode(node)) {
+    node.getChildren().forEach((child, index) => {
+      if (index > 0 && node.getType() === 'root') {
+        textParts.push('\n');
+      }
+      collectDraftParts(child, textParts, references);
+    });
+  }
+}
+
+function readDraftFromEditorState(editorState: EditorState): ChatComposerDraft {
+  return editorState.read(() => {
+    const textParts: string[] = [];
+    const references: ChatReference[] = [];
+    collectDraftParts($getRoot(), textParts, references);
+    return {
+      text: textParts.join('').trim(),
+      references: dedupeChatReferences(references),
+    };
+  });
+}
+
+function appendTextParagraphs(
+  paragraphs: string[],
+  append: (nodes: LexicalNode[]) => void,
+) {
+  paragraphs.forEach((paragraphText) => {
+    const paragraph = $createParagraphNode();
+    if (paragraphText) {
+      paragraph.append($createTextNode(paragraphText));
+    }
+    append([paragraph]);
+  });
+}
+
+function ResourceReferenceEditor({
+  value,
+  references,
+  onChange,
+  assets,
+  projectPath,
+  disabled,
+  placeholder,
+  ariaLabel,
+  multiline,
+  rows,
+  inputRef,
+  composerRef,
+}: ResourceReferenceInputProps & {
+  composerRef?: Ref<ResourceReferenceInputHandle>;
+}) {
+  const [editor] = useLexicalComposerContext();
+  const lastEmittedDraftRef = useRef<ChatComposerDraft>({
+    text: '',
+    references: [],
+  });
+  const [query, setQuery] = useState<string | null>(null);
+  const [pickerOpen, setPickerOpen] = useState(false);
+  const [pickerQuery, setPickerQuery] = useState('');
+  const [pickerFilter, setPickerFilter] =
+    useState<ResourceReferenceFilter>('all');
+  const [selectedResourceIds, setSelectedResourceIds] = useState<string[]>([]);
+  const [pickerPosition, setPickerPosition] = useState<{
+    left: number;
+    bottom: number;
+    width: number;
+  } | null>(null);
+  const rootRef = useRef<HTMLDivElement>(null);
+  const previewScopeIdRef = useRef(createProjectResourcePreviewScopeId());
+
+  const assetReferences = useMemo(
+    () =>
+      assets
+        .filter(
+          (asset) => asset.localPath && !asset.localPath.startsWith('.agent/'),
+        )
+        .map((asset) => resourceReferenceFromAsset(asset, 'asset-picker')),
+    [assets],
+  );
+
+  const mentionOptions = useMemo(() => {
+    if (query === null) return [];
+    return assetReferences
+      .filter((reference) => resourceReferenceMatchesQuery(reference, query))
+      .slice(0, 8)
+      .map((reference) => new ResourceMentionOption(reference));
+  }, [assetReferences, query]);
+
+  const triggerFn = useBasicTypeaheadTriggerMatch('@', {
+    minLength: 0,
+    maxLength: 64,
+    allowWhitespace: false,
+  });
+
+  const insertReferences = useCallback(
+    (nextReferences: ChatReference[]) => {
+      if (nextReferences.length === 0) return;
+      editor.update(() => {
+        let selection = $getSelection();
+        if (!$isRangeSelection(selection)) {
+          $getRoot().selectEnd();
+          selection = $getSelection();
+        }
+        if ($isRangeSelection(selection)) {
+          selection.insertNodes(
+            nextReferences.flatMap((reference) => [
+              $createResourceReferenceNode(reference),
+              $createTextNode(' '),
+            ]),
+          );
+        }
+      });
+      editor.focus();
+    },
+    [editor],
+  );
+
+  useImperativeHandle(
+    composerRef,
+    () => ({
+      insertReferences,
+      focus: () => editor.focus(),
+    }),
+    [editor, insertReferences],
+  );
+
+  useEffect(() => {
+    editor.setEditable(!disabled);
+  }, [disabled, editor]);
+
+  useEffect(() => {
+    const nextDraft: ChatComposerDraft = {
+      text: value,
+      references,
+    };
+    if (sameDraft(lastEmittedDraftRef.current, nextDraft)) {
+      return;
+    }
+    editor.update(() => {
+      const root = $getRoot();
+      root.clear();
+      appendTextParagraphs(value.split(/\r?\n/u), (nodes) => {
+        root.append(...nodes);
+      });
+      if (references.length > 0) {
+        const referenceParagraph = $createParagraphNode();
+        referenceParagraph.append(
+          $createTextNode(' '),
+          ...references.flatMap((reference) => [
+            $createResourceReferenceNode(reference),
+            $createTextNode(' '),
+          ]),
+        );
+        root.append(referenceParagraph);
+      }
+    });
+    lastEmittedDraftRef.current = nextDraft;
+  }, [editor, references, value]);
+
+  useEffect(
+    () => () => {
+      cancelLocalProjectResourcePreviewScope(previewScopeIdRef.current);
+    },
+    [],
+  );
+
+  useEffect(
+    () =>
+      editor.registerCommand(
+        KEY_ENTER_COMMAND,
+        (event) => {
+          if (!event || event.shiftKey || event.isComposing) {
+            return false;
+          }
+          event.preventDefault();
+          (event.target as HTMLElement | null)
+            ?.closest('form')
+            ?.requestSubmit();
+          return true;
+        },
+        COMMAND_PRIORITY_HIGH,
+      ),
+    [editor],
+  );
+
+  useEffect(
+    () =>
+      editor.registerCommand(
+        KEY_ESCAPE_COMMAND,
+        () => {
+          if (!pickerOpen) return false;
+          setPickerOpen(false);
+          return true;
+        },
+        COMMAND_PRIORITY_HIGH,
+      ),
+    [editor, pickerOpen],
+  );
+
+  const handleSelectMention = useCallback(
+    (
+      option: ResourceMentionOption,
+      textNodeContainingQuery: TextNode | null,
+      closeMenu: () => void,
+    ) => {
+      textNodeContainingQuery?.remove();
+      const selection = $getSelection();
+      if ($isRangeSelection(selection)) {
+        selection.insertNodes([
+          $createResourceReferenceNode(option.reference),
+          $createTextNode(' '),
+        ]);
+      } else {
+        const paragraph = $createParagraphNode();
+        paragraph.append(
+          $createResourceReferenceNode(option.reference),
+          $createTextNode(' '),
+        );
+        $getRoot().append(paragraph);
+      }
+      closeMenu();
+    },
+    [],
+  );
+
+  const renderMentionMenu: MenuRenderFn<ResourceMentionOption> = useCallback(
+    (anchorElementRef, itemProps) => {
+      if (!anchorElementRef.current || itemProps.options.length === 0) {
+        return null;
+      }
+      return createPortal(
+        <div
+          className="resource-reference-menu"
+          role="listbox"
+          aria-label="候选素材"
+        >
+          {itemProps.options.map((option, index) => (
+            <button
+              type="button"
+              role="option"
+              key={option.key}
+              ref={(element) => option.setRefElement(element)}
+              aria-selected={itemProps.selectedIndex === index}
+              className={
+                itemProps.selectedIndex === index ? 'is-active' : undefined
+              }
+              onMouseEnter={() => itemProps.setHighlightedIndex(index)}
+              onMouseDown={(event) => event.preventDefault()}
+              onClick={() => itemProps.selectOptionAndCleanUp(option)}
+            >
+              <span>{option.reference.label}</span>
+              <small>{option.reference.kind}</small>
+            </button>
+          ))}
+        </div>,
+        anchorElementRef.current,
+      );
+    },
+    [],
+  );
+
+  const pickerReferences = useMemo(() => {
+    return assetReferences.filter((reference) => {
+      if (!resourceReferenceMatchesQuery(reference, pickerQuery)) return false;
+      if (pickerFilter === 'all') return true;
+      return resourceReferenceFilterKind(reference) === pickerFilter;
+    });
+  }, [assetReferences, pickerFilter, pickerQuery]);
+
+  const visiblePickerReferences = pickerReferences.slice(0, 120);
+
+  const updatePickerPosition = useCallback(() => {
+    const rect = rootRef.current?.getBoundingClientRect();
+    if (!rect) return;
+    const width = Math.min(
+      Math.max(rect.width, 360),
+      Math.max(280, window.innerWidth - 24),
+    );
+    const left = Math.min(
+      Math.max(12, rect.left),
+      Math.max(12, window.innerWidth - width - 12),
+    );
+    setPickerPosition({
+      left,
+      bottom: Math.max(12, window.innerHeight - rect.top + 8),
+      width,
+    });
+  }, []);
+
+  useEffect(() => {
+    if (!pickerOpen) {
+      setPickerPosition(null);
+      return;
+    }
+    updatePickerPosition();
+    window.addEventListener('resize', updatePickerPosition);
+    window.addEventListener('scroll', updatePickerPosition, true);
+    return () => {
+      window.removeEventListener('resize', updatePickerPosition);
+      window.removeEventListener('scroll', updatePickerPosition, true);
+    };
+  }, [pickerOpen, updatePickerPosition]);
+
+  return (
+    <div
+      ref={rootRef}
+      className={`resource-reference-input${multiline ? '' : ' is-single-line'}`}
+      data-disabled={disabled ? 'true' : undefined}
+    >
+      <RichTextPlugin
+        contentEditable={
+          <ContentEditable
+            ref={inputRef}
+            aria-label={ariaLabel}
+            className="resource-reference-input-editor"
+            style={
+              multiline && rows
+                ? { minHeight: `${Math.max(72, rows * 22)}px` }
+                : undefined
+            }
+          />
+        }
+        placeholder={
+          <span className="resource-reference-input-placeholder">
+            {placeholder}
+          </span>
+        }
+        ErrorBoundary={LexicalErrorBoundary}
+      />
+      <div className="resource-reference-input-actions">
+        <button
+          type="button"
+          className="resource-reference-input-at"
+          aria-label="插入素材引用"
+          title="插入素材引用"
+          disabled={disabled}
+          onMouseDown={(event) => event.preventDefault()}
+          onClick={() => {
+            setPickerQuery('');
+            setPickerFilter('all');
+            setSelectedResourceIds([]);
+            setPickerOpen(true);
+          }}
+        >
+          <AtSign size={15} aria-hidden="true" />
+        </button>
+      </div>
+      <LexicalTypeaheadMenuPlugin<ResourceMentionOption>
+        options={mentionOptions}
+        triggerFn={triggerFn}
+        onQueryChange={setQuery}
+        onSelectOption={(option, textNode, closeMenu) =>
+          handleSelectMention(option, textNode, closeMenu)
+        }
+        menuRenderFn={renderMentionMenu}
+        preselectFirstItem
+      />
+      {pickerOpen && pickerPosition
+        ? createPortal(
+            <div
+              className="resource-reference-picker"
+              role="dialog"
+              aria-modal="false"
+              aria-label="选择素材"
+              style={{
+                left: `${pickerPosition.left}px`,
+                bottom: `${pickerPosition.bottom}px`,
+                right: 'auto',
+                width: `${pickerPosition.width}px`,
+              }}
+            >
+              <header>
+                <strong>选择素材</strong>
+                <button
+                  type="button"
+                  aria-label="关闭素材选择"
+                  onClick={() => setPickerOpen(false)}
+                >
+                  ×
+                </button>
+              </header>
+              <div className="resource-reference-picker-search">
+                <Search size={14} aria-hidden="true" />
+                <input
+                  aria-label="搜索素材"
+                  value={pickerQuery}
+                  placeholder="搜索名称或资源 ID"
+                  onChange={(event) =>
+                    setPickerQuery(event.currentTarget.value)
+                  }
+                />
+              </div>
+              <div className="resource-reference-picker-filters" role="group">
+                {RESOURCE_REFERENCE_FILTERS.map((filter) => (
+                  <button
+                    type="button"
+                    key={filter.id}
+                    aria-pressed={pickerFilter === filter.id}
+                    onClick={() => setPickerFilter(filter.id)}
+                  >
+                    {filter.label}
+                  </button>
+                ))}
+              </div>
+              <div className="resource-reference-picker-list" role="listbox">
+                {visiblePickerReferences.length === 0 ? (
+                  <p className="resource-reference-picker-empty">
+                    {assetReferences.length === 0
+                      ? '当前项目还没有已登记素材'
+                      : '没有匹配的素材'}
+                  </p>
+                ) : (
+                  visiblePickerReferences.map((reference) => {
+                    const selected = selectedResourceIds.includes(
+                      reference.resourceId,
+                    );
+                    return (
+                      <button
+                        type="button"
+                        role="option"
+                        aria-selected={selected}
+                        key={`${reference.resourceId}:${reference.kind}`}
+                        className={selected ? 'is-selected' : undefined}
+                        onClick={() =>
+                          setSelectedResourceIds((current) =>
+                            current.includes(reference.resourceId)
+                              ? current.filter(
+                                  (resourceId) =>
+                                    resourceId !== reference.resourceId,
+                                )
+                              : [...current, reference.resourceId],
+                          )
+                        }
+                      >
+                        <ResourcePickerThumbnail
+                          asset={assets.find(
+                            (asset) => asset.id === reference.resourceId,
+                          )}
+                          projectPath={projectPath}
+                          scopeId={previewScopeIdRef.current}
+                        />
+                        <span>
+                          <strong>{reference.label}</strong>
+                          <small>
+                            {reference.kind} · {reference.mediaType}
+                          </small>
+                        </span>
+                        {selected ? (
+                          <Check size={14} aria-hidden="true" />
+                        ) : null}
+                      </button>
+                    );
+                  })
+                )}
+              </div>
+              <footer>
+                <span>
+                  已选择 {selectedResourceIds.length} 个
+                  {pickerReferences.length > visiblePickerReferences.length
+                    ? `，当前显示前 ${visiblePickerReferences.length} 个`
+                    : ''}
+                </span>
+                <button
+                  type="button"
+                  disabled={selectedResourceIds.length === 0}
+                  onClick={() => {
+                    insertReferences(
+                      assetReferences.filter((reference) =>
+                        selectedResourceIds.includes(reference.resourceId),
+                      ),
+                    );
+                    setPickerOpen(false);
+                  }}
+                >
+                  插入引用
+                </button>
+              </footer>
+            </div>,
+            document.body,
+          )
+        : null}
+      <OnChangePlugin
+        onChange={(editorState) => {
+          const nextDraft = readDraftFromEditorState(editorState);
+          if (sameDraft(lastEmittedDraftRef.current, nextDraft)) {
+            return;
+          }
+          lastEmittedDraftRef.current = nextDraft;
+          onChange(nextDraft);
+        }}
+      />
+    </div>
+  );
+}
+
+function ResourcePickerThumbnail({
+  asset,
+  projectPath,
+  scopeId,
+}: {
+  asset?: GameCreationAppAssetManifestEntry;
+  projectPath: string;
+  scopeId: string;
+}) {
+  const [previewUrl, setPreviewUrl] = useState<string | null>(null);
+  const [failed, setFailed] = useState(false);
+  const mediaType = asset?.mediaType.toLowerCase() ?? '';
+  const kind = asset?.kind.toLowerCase() ?? '';
+
+  useEffect(() => {
+    setPreviewUrl(null);
+    setFailed(false);
+    if (!asset || !projectPath || !mediaType.startsWith('image/')) {
+      return;
+    }
+    const invoke = resolveTauriInvoke();
+    if (!invoke) return;
+    let cancelled = false;
+    void invoke<{ dataUrl: string }>('read_local_project_image_preview', {
+      projectPath,
+      relativePath: asset.localPath,
+      scopeId,
+      requestId: createProjectResourcePreviewRequestId(),
+    })
+      .then((result) => {
+        if (!cancelled) setPreviewUrl(result.dataUrl);
+      })
+      .catch(() => {
+        if (!cancelled) setFailed(true);
+      });
+    return () => {
+      cancelled = true;
+    };
+  }, [asset, mediaType, projectPath, scopeId]);
+
+  if (previewUrl) {
+    return <img src={previewUrl} alt="" />;
+  }
+  if (failed) {
+    return <FileText size={18} aria-hidden="true" />;
+  }
+  if (mediaType.startsWith('video/')) {
+    return <Video size={18} aria-hidden="true" />;
+  }
+  if (mediaType.startsWith('audio/')) {
+    return <Music2 size={18} aria-hidden="true" />;
+  }
+  if (mediaType.startsWith('image/')) {
+    return <Loader2 size={18} className="animate-spin" aria-hidden="true" />;
+  }
+  if (kind === 'ui' || mediaType === 'application/json') {
+    return <FileText size={18} aria-hidden="true" />;
+  }
+  return <ImageIcon size={18} aria-hidden="true" />;
+}
+
+export const ResourceReferenceInput = forwardRef<
+  ResourceReferenceInputHandle,
+  ResourceReferenceInputProps
+>(function ResourceReferenceInput(props, ref) {
+  return (
+    <LexicalComposer
+      initialConfig={{
+        namespace: 'agc-resource-reference-input',
+        nodes: [ResourceReferenceNode],
+        onError: (error) => {
+          throw error;
+        },
+      }}
+    >
+      <ResourceReferenceEditor {...props} composerRef={ref} />
+    </LexicalComposer>
+  );
+});
diff --git a/apps/ai-game-creator-shell/src/features/project-workspace/ResourceReferenceNode.tsx b/apps/ai-game-creator-shell/src/features/project-workspace/ResourceReferenceNode.tsx
new file mode 100644
index 000000000..dbb76a248
--- /dev/null
+++ b/apps/ai-game-creator-shell/src/features/project-workspace/ResourceReferenceNode.tsx
@@ -0,0 +1,91 @@
+import {
+  $applyNodeReplacement,
+  DecoratorNode,
+  type EditorConfig,
+  type LexicalNode,
+  type NodeKey,
+  type SerializedLexicalNode,
+  type Spread,
+} from 'lexical';
+import type { ReactNode } from 'react';
+
+import { ResourceReferenceChip } from './ResourceReferenceChip';
+import type { ChatReference } from './resourceReferences';
+
+export type SerializedResourceReferenceNode = Spread<
+  {
+    reference: ChatReference;
+    type: 'resource-reference';
+    version: 1;
+  },
+  SerializedLexicalNode
+>;
+
+export class ResourceReferenceNode extends DecoratorNode<ReactNode> {
+  __reference: ChatReference;
+
+  static getType() {
+    return 'resource-reference';
+  }
+
+  static clone(node: ResourceReferenceNode) {
+    return new ResourceReferenceNode(node.__reference, node.__key);
+  }
+
+  static importJSON(serializedNode: SerializedResourceReferenceNode) {
+    return $createResourceReferenceNode(serializedNode.reference);
+  }
+
+  constructor(reference: ChatReference, key?: NodeKey) {
+    super(key);
+    this.__reference = reference;
+  }
+
+  exportJSON(): SerializedResourceReferenceNode {
+    return {
+      ...super.exportJSON(),
+      reference: this.__reference,
+      type: 'resource-reference',
+      version: 1,
+    };
+  }
+
+  createDOM(_config: EditorConfig) {
+    return document.createElement('span');
+  }
+
+  updateDOM() {
+    return false;
+  }
+
+  getTextContent() {
+    return `@${this.__reference.label}`;
+  }
+
+  isInline() {
+    return true;
+  }
+
+  isKeyboardSelectable() {
+    return true;
+  }
+
+  decorate() {
+    return (
+      <ResourceReferenceChip
+        reference={this.__reference}
+        nodeKey={this.__key}
+      />
+    );
+  }
+}
+
+export function $createResourceReferenceNode(reference: ChatReference) {
+  return $applyNodeReplacement(new ResourceReferenceNode(reference));
+}
+
+export function $isResourceReferenceNode(
+  node: LexicalNode | null | undefined,
+): node is ResourceReferenceNode {
+  return node instanceof ResourceReferenceNode;
+}
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 799035449..f57ea820a 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
@@ -1,10 +1,9 @@
 import { Send, Settings } from 'lucide-react';
 import type {
   ComponentProps,
-  Dispatch,
   FormEventHandler,
+  Ref,
   RefObject,
-  SetStateAction,
   UIEvent,
   UIEventHandler,
 } from 'react';
@@ -30,6 +29,11 @@ import {
   pendingCommandDetail,
   pendingCommandTitle,
 } from './pendingCommandPresentation';
+import {
+  ResourceReferenceInput,
+  type ResourceReferenceInputHandle,
+} from './ResourceReferenceInput';
+import type { ChatComposerDraft, ChatReference } from './resourceReferences';
 
 type RuntimeControlProps = ComponentProps<
   typeof ProjectSupervisorRuntimeControls
@@ -40,10 +44,12 @@ const CHAT_SCROLL_BOTTOM_THRESHOLD = 24;
 type SupervisorChatOnlyViewProps = {
   chatAgentBusy: boolean;
   chatInput: string;
+  chatReferences: ChatReference[];
+  composerRef?: Ref<ResourceReferenceInputHandle>;
   directCodex?: boolean;
   messagesRef: RefObject<HTMLDivElement | null>;
   onCancelConfirmation: () => void;
-  onChatInputChange: Dispatch<SetStateAction<string>>;
+  onChatInputChange: (draft: ChatComposerDraft) => void;
   onCloseRuntimeConfig: () => void;
   onConfirmConfirmation: () => void;
   onOpenRuntimeConfig: () => void;
@@ -67,11 +73,14 @@ type SupervisorChatOnlyViewProps = {
   visibleMessages: ChatMessage[];
   workspaceStatus: string;
   expectedRunId?: string | null;
+  visibleMainProjectAssets?: import('../../../../../packages/shared/src/contracts/gameCreationApp').GameCreationAppAssetManifestEntry[];
 };
 
 export function SupervisorChatOnlyView({
   chatAgentBusy,
   chatInput,
+  chatReferences,
+  composerRef,
   directCodex = false,
   messagesRef,
   onCancelConfirmation,
@@ -98,6 +107,7 @@ export function SupervisorChatOnlyView({
   needsUserInput,
   visibleMessages,
   workspaceStatus,
+  visibleMainProjectAssets = [],
 }: SupervisorChatOnlyViewProps) {
   const shouldFollowLatestRef = useRef(true);
   const running = Boolean(
@@ -299,27 +309,21 @@ export function SupervisorChatOnlyView({
           ) : null}
         </div>
         <form className="supervisor-chat-only-composer" onSubmit={onSubmit}>
-          <textarea
-            aria-label={directCodex ? '陶泥儿对话内容' : '项目总控对话内容'}
+          <ResourceReferenceInput
+            ref={composerRef}
+            ariaLabel={directCodex ? '陶泥儿对话内容' : '项目总控对话内容'}
+            assets={visibleMainProjectAssets}
+            projectPath={projectPath}
             disabled={chatAgentBusy || needsUserInput}
             rows={3}
             value={chatInput}
+            references={chatReferences}
             placeholder={
               directCodex
-                ? '告诉陶泥儿接下来要做什么'
-                : '给项目总控 Agent 发消息'
+                ? '告诉陶泥儿接下来要做什么，或输入 @ 选择资源'
+                : '给项目总控 Agent 发消息，或输入 @ 选择资源'
             }
-            onChange={(event) => onChatInputChange(event.currentTarget.value)}
-            onKeyDown={(event) => {
-              if (
-                event.key === 'Enter' &&
-                !event.shiftKey &&
-                !event.nativeEvent.isComposing
-              ) {
-                event.preventDefault();
-                event.currentTarget.form?.requestSubmit();
-              }
-            }}
+            onChange={onChatInputChange}
           />
           <button
             type="submit"
diff --git a/apps/ai-game-creator-shell/src/features/project-workspace/resourceReferences.ts b/apps/ai-game-creator-shell/src/features/project-workspace/resourceReferences.ts
new file mode 100644
index 000000000..b397c6a75
--- /dev/null
+++ b/apps/ai-game-creator-shell/src/features/project-workspace/resourceReferences.ts
@@ -0,0 +1,153 @@
+import type { GameCreationAppAssetManifestEntry } from '../../../../../packages/shared/src/contracts/gameCreationApp';
+
+export type ResourceReferenceSource =
+  | 'asset-picker'
+  | 'resource-card'
+  | 'version-asset'
+  | 'runtime-picker';
+
+export type ResourceReference = {
+  type: 'resource';
+  resourceId: string;
+  kind: string;
+  mediaType: string;
+  label: string;
+  source: ResourceReferenceSource;
+};
+
+export type RuntimeRegionReference = {
+  type: 'runtime-region';
+  label: string;
+  runId?: string;
+  versionId?: string;
+  elementTag?: string;
+  elementRole?: string;
+  text?: string;
+  width?: number;
+  height?: number;
+  resourceIds: string[];
+  source: 'runtime-picker';
+};
+
+export type ChatReference = ResourceReference | RuntimeRegionReference;
+
+export type ChatComposerDraft = {
+  text: string;
+  references: ChatReference[];
+};
+
+export const RESOURCE_REFERENCE_INSERT_EVENT = 'agc-resource-reference-insert';
+
+export type ResourceReferenceInsertEventDetail = {
+  reference: ChatReference;
+};
+
+export function dispatchResourceReferenceInsert(reference: ChatReference) {
+  if (typeof window === 'undefined') return;
+  window.dispatchEvent(
+    new CustomEvent<ResourceReferenceInsertEventDetail>(
+      RESOURCE_REFERENCE_INSERT_EVENT,
+      { detail: { reference } },
+    ),
+  );
+}
+
+export const EMPTY_CHAT_COMPOSER_DRAFT: ChatComposerDraft = {
+  text: '',
+  references: [],
+};
+
+export function resourceDisplayName(asset: GameCreationAppAssetManifestEntry) {
+  const fileName = asset.localPath.split(/[\\/]/u).pop() ?? asset.id;
+  return fileName.replace(/\.[^.]+$/u, '').trim() || asset.id;
+}
+
+export function resourceReferenceFromAsset(
+  asset: GameCreationAppAssetManifestEntry,
+  source: ResourceReferenceSource,
+): ResourceReference {
+  return {
+    type: 'resource',
+    resourceId: asset.id,
+    kind: asset.kind,
+    mediaType: asset.mediaType,
+    label: resourceDisplayName(asset),
+    source,
+  };
+}
+
+export function sameResourceReference(
+  left: ResourceReference,
+  right: ResourceReference,
+) {
+  return (
+    left.resourceId === right.resourceId &&
+    left.kind === right.kind &&
+    left.mediaType === right.mediaType &&
+    left.label === right.label &&
+    left.source === right.source
+  );
+}
+
+export function resourceReferenceMatchesQuery(
+  reference: ResourceReference,
+  query: string,
+) {
+  const normalizedQuery = query.trim().toLowerCase();
+  if (!normalizedQuery) return true;
+  return (
+    reference.label.toLowerCase().includes(normalizedQuery) ||
+    reference.resourceId.toLowerCase().includes(normalizedQuery) ||
+    reference.kind.toLowerCase().includes(normalizedQuery)
+  );
+}
+
+export function resourceReferenceFilterKind(reference: ResourceReference) {
+  const mediaType = reference.mediaType.toLowerCase();
+  const kind = reference.kind.toLowerCase();
+  if (mediaType.startsWith('image/')) return 'image';
+  if (mediaType.startsWith('video/')) return 'video';
+  if (mediaType.startsWith('audio/')) return 'audio';
+  if (mediaType === 'application/json' || kind === 'ui') return 'ui';
+  if (
+    mediaType.startsWith('text/') ||
+    mediaType === 'application/json' ||
+    kind === 'document' ||
+    kind === 'code'
+  ) {
+    return 'document';
+  }
+  return 'other';
+}
+
+export const RESOURCE_REFERENCE_FILTERS = [
+  { id: 'all', label: '全部' },
+  { id: 'image', label: '图片' },
+  { id: 'video', label: '视频' },
+  { id: 'audio', label: '音频' },
+  { id: 'ui', label: 'UI' },
+  { id: 'document', label: '文档' },
+  { id: 'other', label: '其它' },
+] as const;
+
+export type ResourceReferenceFilter =
+  (typeof RESOURCE_REFERENCE_FILTERS)[number]['id'];
+
+function chatReferenceKey(reference: ChatReference) {
+  if (reference.type === 'resource') {
+    return `resource:${reference.resourceId}:${reference.source}`;
+  }
+  return `runtime-region:${reference.runId ?? ''}:${reference.label}:${
+    reference.elementTag ?? ''
+  }:${reference.text ?? ''}`;
+}
+
+export function dedupeChatReferences(references: ChatReference[]) {
+  const seen = new Set<string>();
+  return references.filter((reference) => {
+    const key = chatReferenceKey(reference);
+    if (seen.has(key)) return false;
+    seen.add(key);
+    return true;
+  });
+}
diff --git a/apps/ai-game-creator-shell/src/styles.css b/apps/ai-game-creator-shell/src/styles.css
index 201a310a2..40b9bc2b5 100644
--- a/apps/ai-game-creator-shell/src/styles.css
+++ b/apps/ai-game-creator-shell/src/styles.css
@@ -4415,6 +4415,341 @@ h2 {
   background: #1f6feb;
 }
 
+.resource-reference-input {
+  position: relative;
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto;
+  align-items: end;
+  gap: 8px;
+  min-width: 0;
+  flex: 1;
+  padding: 8px 8px 8px 12px;
+  border: 1px solid #cfd6df;
+  border-radius: 8px;
+  background: #fff;
+  color: #111827;
+  font: inherit;
+}
+
+.resource-reference-input:focus-within {
+  border-color: #6b7280;
+  outline: 2px solid rgb(107 114 128 / 18%);
+  outline-offset: 1px;
+}
+
+.resource-reference-input[data-disabled='true'] {
+  cursor: not-allowed;
+  opacity: 0.55;
+}
+
+.resource-reference-input-editor {
+  min-width: 0;
+  min-height: 72px;
+  max-height: 180px;
+  overflow-y: auto;
+  outline: 0;
+  line-height: 1.5;
+  white-space: pre-wrap;
+  overflow-wrap: anywhere;
+}
+
+.resource-reference-input.is-single-line .resource-reference-input-editor {
+  min-height: 24px;
+  max-height: 24px;
+  overflow: hidden;
+  white-space: nowrap;
+}
+
+.resource-reference-input-placeholder {
+  position: absolute;
+  top: 9px;
+  left: 13px;
+  pointer-events: none;
+  color: #8a94a6;
+}
+
+.resource-reference-input-actions {
+  display: flex;
+  align-items: end;
+  gap: 6px;
+}
+
+.resource-reference-input-at {
+  display: grid;
+  width: 28px;
+  height: 28px;
+  padding: 0;
+  border: 1px solid #cfd6df;
+  border-radius: 8px;
+  background: #f8fafc;
+  color: #475569;
+  place-items: center;
+  cursor: pointer;
+}
+
+.resource-reference-input-at:hover:not(:disabled) {
+  border-color: #94a3b8;
+  color: #0f172a;
+}
+
+.resource-reference-input-at:disabled {
+  cursor: not-allowed;
+  opacity: 0.5;
+}
+
+.resource-reference-chip {
+  display: inline-flex;
+  align-items: center;
+  gap: 2px;
+  margin: 0 2px;
+  padding: 1px 4px 1px 6px;
+  border: 1px solid #bfdbfe;
+  border-radius: 7px;
+  background: #eff6ff;
+  color: #1d4ed8;
+  font-size: 12px;
+  font-weight: 650;
+  line-height: 1.5;
+  vertical-align: baseline;
+  white-space: nowrap;
+}
+
+.resource-reference-chip-label {
+  max-width: 180px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.resource-reference-chip button {
+  display: grid;
+  width: 15px;
+  height: 15px;
+  padding: 0;
+  border: 0;
+  border-radius: 4px;
+  background: transparent;
+  color: inherit;
+  place-items: center;
+  cursor: pointer;
+}
+
+.resource-reference-chip button:hover {
+  background: rgb(29 78 216 / 12%);
+}
+
+.resource-reference-menu {
+  display: grid;
+  gap: 2px;
+  min-width: 240px;
+  max-height: 260px;
+  overflow: auto;
+  padding: 6px;
+  border: 1px solid var(--platform-subpanel-border, #dbe3ef);
+  border-radius: 12px;
+  background: var(--platform-panel-fill, #fff);
+  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.16);
+}
+
+.resource-reference-menu button {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  width: 100%;
+  padding: 8px 10px;
+  border: 0;
+  border-radius: 8px;
+  background: transparent;
+  color: inherit;
+  text-align: left;
+  cursor: pointer;
+}
+
+.resource-reference-menu button:hover,
+.resource-reference-menu button.is-active {
+  background: var(--platform-subpanel-fill, #f1f5f9);
+}
+
+.resource-reference-menu small {
+  color: var(--platform-muted-text, #64748b);
+}
+
+.resource-reference-picker {
+  position: absolute;
+  z-index: 80;
+  right: 0;
+  bottom: calc(100% + 8px);
+  display: grid;
+  grid-template-rows: auto auto auto minmax(0, 1fr) auto;
+  width: min(440px, 88vw);
+  max-height: min(480px, 70vh);
+  overflow: hidden;
+  border: 1px solid var(--platform-subpanel-border, #dbe3ef);
+  border-radius: 14px;
+  background: var(--platform-panel-fill, #fff);
+  box-shadow: 0 18px 48px rgba(15, 23, 42, 0.22);
+}
+
+.resource-reference-picker > header,
+.resource-reference-picker > footer {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 10px;
+  padding: 10px 12px;
+}
+
+.resource-reference-picker > header {
+  border-bottom: 1px solid var(--platform-subpanel-border, #e2e8f0);
+}
+
+.resource-reference-picker > header button {
+  width: 24px;
+  height: 24px;
+  padding: 0;
+  border: 0;
+  border-radius: 6px;
+  background: transparent;
+  color: inherit;
+  cursor: pointer;
+}
+
+.resource-reference-picker-search {
+  display: grid;
+  grid-template-columns: auto minmax(0, 1fr);
+  align-items: center;
+  gap: 8px;
+  margin: 10px 12px 8px;
+  padding: 0 10px;
+  border: 1px solid var(--platform-surface-border, #dbe3ef);
+  border-radius: 9px;
+  background: var(--platform-input-fill, #fff);
+}
+
+.resource-reference-picker-search input {
+  height: 34px;
+  min-width: 0;
+  border: 0;
+  outline: 0;
+  background: transparent;
+  color: inherit;
+  font: inherit;
+}
+
+.resource-reference-picker-filters {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+  padding: 0 12px 8px;
+}
+
+.resource-reference-picker-filters button {
+  min-height: 26px;
+  padding: 0 10px;
+  border: 1px solid var(--platform-surface-border, #dbe3ef);
+  border-radius: 999px;
+  background: transparent;
+  color: inherit;
+  font-size: 12px;
+  cursor: pointer;
+}
+
+.resource-reference-picker-filters button[aria-pressed='true'] {
+  border-color: var(--platform-button-primary-border, #2563eb);
+  background: var(--platform-button-primary-fill, #2563eb);
+  color: var(--platform-button-primary-text, #fff);
+}
+
+.resource-reference-picker-list {
+  display: grid;
+  gap: 4px;
+  min-height: 0;
+  overflow: auto;
+  padding: 0 8px 8px;
+}
+
+.resource-reference-picker-list > button {
+  display: grid;
+  grid-template-columns: 44px minmax(0, 1fr) auto;
+  align-items: center;
+  gap: 10px;
+  width: 100%;
+  padding: 7px 8px;
+  border: 1px solid transparent;
+  border-radius: 10px;
+  background: transparent;
+  color: inherit;
+  text-align: left;
+  cursor: pointer;
+}
+
+.resource-reference-picker-list > button:hover,
+.resource-reference-picker-list > button.is-selected {
+  border-color: var(--platform-nav-active-border, #bfdbfe);
+  background: var(--platform-subpanel-fill, #f1f5f9);
+}
+
+.resource-reference-picker-list > button > img,
+.resource-reference-picker-list > button > svg {
+  display: grid;
+  width: 44px;
+  height: 44px;
+  border-radius: 8px;
+  background: var(--platform-subpanel-fill, #f1f5f9);
+  object-fit: cover;
+  place-items: center;
+  padding: 12px;
+  color: var(--platform-muted-text, #64748b);
+}
+
+.resource-reference-picker-list > button > img {
+  padding: 0;
+}
+
+.resource-reference-picker-list > button > span {
+  display: grid;
+  gap: 2px;
+  min-width: 0;
+}
+
+.resource-reference-picker-list > button strong,
+.resource-reference-picker-list > button small {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.resource-reference-picker-list > button small,
+.resource-reference-picker-empty,
+.resource-reference-picker > footer span {
+  color: var(--platform-muted-text, #64748b);
+  font-size: 12px;
+}
+
+.resource-reference-picker-empty {
+  margin: 12px;
+  text-align: center;
+}
+
+.resource-reference-picker > footer {
+  border-top: 1px solid var(--platform-subpanel-border, #e2e8f0);
+}
+
+.resource-reference-picker > footer button {
+  min-height: 32px;
+  padding: 0 14px;
+  border: 1px solid var(--platform-button-primary-border, #2563eb);
+  border-radius: 8px;
+  background: var(--platform-button-primary-fill, #2563eb);
+  color: var(--platform-button-primary-text, #fff);
+  cursor: pointer;
+}
+
+.resource-reference-picker > footer button:disabled {
+  cursor: not-allowed;
+  opacity: 0.5;
+}
+
 .composer {
   display: grid;
   grid-template-columns: auto minmax(0, 1fr) auto;
@@ -5220,6 +5555,12 @@ iframe.preview-frame {
   opacity: 0.6;
 }
 
+.game-workbench-view-actions .game-workbench-inspect-button.is-active {
+  border-color: var(--platform-button-primary-border);
+  background: var(--platform-button-primary-fill);
+  color: var(--platform-button-primary-text);
+}
+
 .game-resource-reorder-status {
   min-width: 0;
   color: #9a725f;
@@ -6020,6 +6361,36 @@ iframe.preview-frame {
   outline-offset: 1px;
 }
 
+.game-resource-card-reference {
+  position: absolute;
+  right: 49px;
+  bottom: 9px;
+  z-index: 2;
+  display: grid;
+  width: 30px;
+  height: 30px;
+  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:not(:has(.game-resource-card-media-control))
+  .game-resource-card-reference {
+  right: 9px;
+}
+
+.game-resource-card-reference:hover,
+.game-resource-card-reference:focus-visible {
+  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 {
@@ -8640,4 +9011,83 @@ iframe.preview-frame {
   color: #6b7280;
   background: #fff;
   font-size: 12px;
+
+.project-supervisor-composer .resource-reference-input {
+  min-height: 72px;
+}
+
+.supervisor-chat-only-composer .resource-reference-input {
+  min-height: 74px;
+}
+
+.supervisor-chat-only-composer .resource-reference-input-editor {
+  min-height: 54px;
+  max-height: 54px;
+}
+
+.composer .resource-reference-input {
+  align-items: center;
+  min-height: 42px;
+  padding: 4px 6px 4px 12px;
+}
+
+.composer .resource-reference-input-editor {
+  min-height: 24px;
+  max-height: 24px;
+}
+
+.game-workbench-chat
+  .project-supervisor-surface.is-direct-codex
+  .project-supervisor-composer
+  .resource-reference-input {
+  display: grid;
+  width: 100%;
+  min-height: 88px;
+  padding: 12px 46px 10px 15px;
+  border-color: var(--platform-surface-border);
+  border-radius: 14px;
+  background: var(--platform-input-fill);
+  color: var(--platform-text-strong);
+  pointer-events: auto;
+}
+
+.game-workbench-chat
+  .project-supervisor-surface.is-direct-codex
+  .project-supervisor-composer
+  .resource-reference-input:focus-within {
+  border-color: var(--platform-surface-hover-border);
+  outline: none;
+  box-shadow: 0 0 0 3px var(--platform-input-focus-ring);
+}
+
+.game-workbench-chat
+  .project-supervisor-surface.is-direct-codex
+  .project-supervisor-composer
+  .resource-reference-input-editor {
+  min-height: 64px;
+  max-height: 160px;
+  padding: 0;
+  font-size: 13px;
+  line-height: 1.6;
+}
+
+.game-workbench-chat
+  .project-supervisor-surface.is-direct-codex
+  .project-supervisor-composer
+  .resource-reference-input-actions {
+  position: absolute;
+  right: 10px;
+  bottom: 10px;
+}
+
+.game-workbench-chat
+  .project-supervisor-surface.is-direct-codex
+  .project-supervisor-composer
+  .resource-reference-input-at {
+  width: 30px;
+  height: 30px;
+  border: 0;
+  border-radius: 9px;
+  background: var(--platform-button-primary-fill);
+  color: var(--platform-button-primary-text);
 }
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 f539fc02f..aee175cb8 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
@@ -4,7 +4,9 @@ import {
   resolveViewportFromWheel,
 } from '@genarrative/image-canvas-core';
 import {
+  AtSign,
   Code2,
+  Crosshair,
   FileText,
   FolderTree,
   Gamepad2,
@@ -61,8 +63,10 @@ import {
 } from '../../features/asset-canvas/tauriImageCanvasHostAdapter';
 import {
   LocalGamePreviewFrame,
+  type LocalGamePreviewInspectSelection,
   resolveEmbeddedPreviewUrl,
 } from '../../features/project-workspace/LocalGamePreviewFrame';
+import { dispatchResourceReferenceInsert } from '../../features/project-workspace/resourceReferences';
 import { ensureUiDesignResourceForPrototype } from '../../features/ui-editor/uiDesignResourceBridge';
 import {
   currentPlatformSessionGeneration,
@@ -837,6 +841,28 @@ const ResourceCard = memo(function ResourceCard({
           )}
         </button>
       ) : null}
+      {resource.manifestAssetId ? (
+        <button
+          type="button"
+          className="game-resource-card-reference"
+          aria-label={`引用资源 ${resource.label}`}
+          title="@引用"
+          onPointerDown={(event) => event.stopPropagation()}
+          onClick={(event) => {
+            event.stopPropagation();
+            dispatchResourceReferenceInsert({
+              type: 'resource',
+              resourceId: resource.manifestAssetId!,
+              kind: resource.subtype || resource.category,
+              mediaType: resource.mediaType,
+              label: resource.label,
+              source: 'resource-card',
+            });
+          }}
+        >
+          <AtSign size={16} aria-hidden="true" />
+        </button>
+      ) : null}
     </div>
   );
 });
@@ -858,6 +884,7 @@ export default function ProjectDevelopmentView({
 }: ProjectDevelopmentViewProps) {
   const professionalDagVisible = orchestrationMode === 'professional-dag';
   const [mode, setMode] = useState<WorkbenchMode>('resources');
+  const [runtimeInspectMode, setRuntimeInspectMode] = useState(false);
   const [sortMode, setSortMode] = useState<ResourceSortMode>('dependency');
   const [searchText, setSearchText] = useState('');
   const [resourceCanvasViewports, setResourceCanvasViewports] =
@@ -1083,6 +1110,41 @@ export default function ProjectDevelopmentView({
     manifest.tasks.some(
       (task) => task.id === 'code-prototype' && task.status === 'completed',
     );
+  useEffect(() => {
+    if (mode !== 'run' || !embeddedPreviewUrl) {
+      setRuntimeInspectMode(false);
+    }
+  }, [embeddedPreviewUrl, mode]);
+  const handleRuntimeInspectSelection = useCallback(
+    (selection: LocalGamePreviewInspectSelection) => {
+      const sourceName = selection.sourcePath?.split('/').pop()?.toLowerCase();
+      const matchedResourceIds = sourceName
+        ? manifest.assets
+            .filter(
+              (asset) =>
+                asset.localPath.split(/[\\/]/u).pop()?.toLowerCase() ===
+                sourceName,
+            )
+            .map((asset) => asset.id)
+        : [];
+      dispatchResourceReferenceInsert({
+        type: 'runtime-region',
+        label: selection.label,
+        runId: preview?.port ? `preview-${preview.port}` : undefined,
+        elementTag: selection.elementTag,
+        elementRole: selection.elementRole,
+        text: selection.text,
+        width: selection.width,
+        height: selection.height,
+        resourceIds: [
+          ...new Set([...selection.resourceIds, ...matchedResourceIds]),
+        ],
+        source: 'runtime-picker',
+      });
+      setRuntimeInspectMode(false);
+    },
+    [manifest.assets, preview?.port],
+  );
   const projectedResources = useMemo(
     () => projectResourcesFromReadModels(manifest, attachments, agentResults),
     [agentResults, attachments, manifest],
@@ -4280,6 +4342,24 @@ export default function ProjectDevelopmentView({
                 <Play size={15} aria-hidden="true" />
                 播放
               </button>
+              {mode === 'run' && embeddedPreviewUrl ? (
+                <button
+                  type="button"
+                  className={`game-workbench-inspect-button${
+                    runtimeInspectMode ? ' is-active' : ''
+                  }`}
+                  aria-pressed={runtimeInspectMode}
+                  onClick={() => setRuntimeInspectMode((current) => !current)}
+                  title={
+                    runtimeInspectMode
+                      ? '退出素材点选'
+                      : '在运行画面中选择要引用的区域'
+                  }
+                >
+                  <Crosshair size={15} aria-hidden="true" />
+                  {runtimeInspectMode ? '退出点选' : '点选素材'}
+                </button>
+              ) : null}
               {mode === 'resources' &&
               !assetCanvasRoute &&
               !resourceEditorRoute &&
@@ -5090,6 +5170,9 @@ export default function ProjectDevelopmentView({
                   <LocalGamePreviewFrame
                     title={`${projectName} 游戏运行画面`}
                     preview={preview}
+                    inspectMode={runtimeInspectMode}
+                    onInspectSelection={handleRuntimeInspectSelection}
+                    onInspectExit={() => setRuntimeInspectMode(false)}
                   />
                 ) : (
                   <div className="game-run-preview-empty">
diff --git a/apps/ai-game-creator-shell/tests/resourceReferenceInput.test.tsx b/apps/ai-game-creator-shell/tests/resourceReferenceInput.test.tsx
new file mode 100644
index 000000000..c7798d3c1
--- /dev/null
+++ b/apps/ai-game-creator-shell/tests/resourceReferenceInput.test.tsx
@@ -0,0 +1,184 @@
+// @vitest-environment jsdom
+import { cleanup, render, screen, waitFor } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { afterEach, describe, expect, test, vi } from 'vitest';
+
+import type { GameCreationAppAssetManifestEntry } from '../../../packages/shared/src/contracts/gameCreationApp';
+import {
+  LOCAL_GAME_PREVIEW_INSPECT_MESSAGE,
+  parseLocalGamePreviewInspectMessage,
+} from '../src/features/project-workspace/LocalGamePreviewFrame';
+import { ResourceReferenceInput } from '../src/features/project-workspace/ResourceReferenceInput';
+import {
+  type ChatComposerDraft,
+  type ChatReference,
+  dispatchResourceReferenceInsert,
+  RESOURCE_REFERENCE_INSERT_EVENT,
+  resourceReferenceFilterKind,
+  resourceReferenceFromAsset,
+  resourceReferenceMatchesQuery,
+} from '../src/features/project-workspace/resourceReferences';
+
+function asset(
+  id: string,
+  kind: string,
+  mediaType: string,
+  localPath: string,
+): GameCreationAppAssetManifestEntry {
+  return {
+    id,
+    kind,
+    mediaType,
+    localPath,
+    source: { kind: 'uploaded' },
+  };
+}
+
+const assets = [
+  asset('hero', 'character', 'image/png', 'assets/hero.png'),
+  asset('enemy', 'character', 'image/png', 'assets/enemy.png'),
+  asset('theme', 'background-music', 'audio/mpeg', 'assets/theme.mp3'),
+];
+
+afterEach(cleanup);
+
+describe('ResourceReferenceInput', () => {
+  test('opens the asset picker, supports multi-select, and inserts stable references', async () => {
+    const user = userEvent.setup();
+    const onChange = vi.fn<(draft: ChatComposerDraft) => void>();
+    render(
+      <ResourceReferenceInput
+        value=""
+        references={[]}
+        onChange={onChange}
+        assets={assets}
+        projectPath="C:/project"
+        ariaLabel="聊天"
+      />,
+    );
+
+    await user.click(screen.getByRole('button', { name: '插入素材引用' }));
+    expect(screen.getByRole('dialog', { name: '选择素材' })).not.toBeNull();
+
+    await user.click(screen.getByRole('option', { name: /hero/u }));
+    await user.click(screen.getByRole('option', { name: /enemy/u }));
+    await user.click(screen.getByRole('button', { name: '插入引用' }));
+
+    await waitFor(() => {
+      expect(onChange).toHaveBeenCalled();
+    });
+    const draft = onChange.mock.calls.at(-1)?.[0];
+    expect(draft?.text).toBe('@hero @enemy');
+    expect(draft?.references.map((reference) => reference.resourceId)).toEqual([
+      'hero',
+      'enemy',
+    ]);
+    expect(
+      document.querySelector('[data-resource-reference-id="hero"]'),
+    ).not.toBeNull();
+  });
+
+  test('filters candidate references by name, id, kind, and media category', () => {
+    const hero = resourceReferenceFromAsset(assets[0]!, 'asset-picker');
+    const theme = resourceReferenceFromAsset(assets[2]!, 'asset-picker');
+    expect(resourceReferenceMatchesQuery(hero, 'her')).toBe(true);
+    expect(resourceReferenceMatchesQuery(hero, 'character')).toBe(true);
+    expect(resourceReferenceMatchesQuery(hero, 'missing')).toBe(false);
+    expect(resourceReferenceFilterKind(hero)).toBe('image');
+    expect(resourceReferenceFilterKind(theme)).toBe('audio');
+  });
+
+  test('resource-card insertion uses the shared structured reference event', () => {
+    const reference = resourceReferenceFromAsset(assets[0]!, 'resource-card');
+    const listener = vi.fn();
+    window.addEventListener(RESOURCE_REFERENCE_INSERT_EVENT, listener);
+    dispatchResourceReferenceInsert(reference);
+    window.removeEventListener(RESOURCE_REFERENCE_INSERT_EVENT, listener);
+    expect(listener).toHaveBeenCalledTimes(1);
+    expect(
+      (listener.mock.calls[0]?.[0] as CustomEvent).detail.reference,
+    ).toEqual(reference);
+  });
+
+  test('runtime inspect messages only expose the bounded safe selection shape', () => {
+    expect(
+      parseLocalGamePreviewInspectMessage({
+        type: LOCAL_GAME_PREVIEW_INSPECT_MESSAGE,
+        action: 'selected',
+        selection: {
+          label: '开始游戏',
+          elementTag: 'button',
+          elementRole: 'button',
+          text: '开始游戏',
+          width: 120.4,
+          height: 40.2,
+          resourceIds: ['hero', 'bad id', '../secret'],
+          sourcePath: '/assets/hero.png?token=secret',
+          html: '<button>secret</button>',
+        },
+      }),
+    ).toEqual({
+      action: 'selected',
+      selection: {
+        label: '开始游戏',
+        elementTag: 'button',
+        elementRole: 'button',
+        text: '开始游戏',
+        width: 120.4,
+        height: 40.2,
+        resourceIds: ['hero'],
+        sourcePath: '/assets/hero.png',
+      },
+    });
+    expect(
+      parseLocalGamePreviewInspectMessage({
+        type: 'unknown',
+        action: 'selected',
+      }),
+    ).toBeNull();
+  });
+
+  test('runtime-region references travel through the same structured event', () => {
+    const reference: ChatReference = {
+      type: 'runtime-region',
+      label: '开始按钮',
+      runId: 'preview-3101',
+      elementTag: 'button',
+      text: '开始游戏',
+      resourceIds: ['hero'],
+      source: 'runtime-picker',
+    };
+    const listener = vi.fn();
+    window.addEventListener(RESOURCE_REFERENCE_INSERT_EVENT, listener);
+    dispatchResourceReferenceInsert(reference);
+    window.removeEventListener(RESOURCE_REFERENCE_INSERT_EVENT, listener);
+    expect(
+      (listener.mock.calls[0]?.[0] as CustomEvent).detail.reference,
+    ).toEqual(reference);
+  });
+
+  test('removing a chip keeps the remaining text editable', async () => {
+    const user = userEvent.setup();
+    const onChange = vi.fn<(draft: ChatComposerDraft) => void>();
+    render(
+      <ResourceReferenceInput
+        value=""
+        references={[]}
+        onChange={onChange}
+        assets={assets}
+        projectPath="C:/project"
+        ariaLabel="聊天"
+      />,
+    );
+
+    await user.click(screen.getByRole('button', { name: '插入素材引用' }));
+    await user.click(screen.getByRole('option', { name: /hero/u }));
+    await user.click(screen.getByRole('button', { name: '插入引用' }));
+    await screen.findByRole('button', { name: '移除引用 hero' });
+
+    await user.click(screen.getByRole('button', { name: '移除引用 hero' }));
+    await waitFor(() => {
+      expect(onChange.mock.calls.at(-1)?.[0].references).toHaveLength(0);
+    });
+  });
+});
diff --git a/docs/【功能说明】AGC聊天素材引用-2026-09-08.md b/docs/【功能说明】AGC聊天素材引用-2026-09-08.md
new file mode 100644
index 000000000..65b401428
--- /dev/null
+++ b/docs/【功能说明】AGC聊天素材引用-2026-09-08.md
@@ -0,0 +1,27 @@
+# AGC 聊天素材引用
+
+更新时间：2026-09-08
+
+AGC 聊天输入框支持以结构化引用标记当前项目已登记素材。输入 `@` 会按素材名称、资源 ID 和类型过滤候选项；也可以点击输入框右侧的 `@` 按钮打开素材选择面板。
+
+素材选择面板支持缩略图、名称或资源 ID 搜索、类型筛选和多选。确认后素材以 `@素材名` 芯片插入编辑器，用户可以在芯片前后继续编辑自然语言，也可以单独删除芯片。芯片内部保存稳定 `resourceId`，展示名称只用于界面，不参与引用解析。
+
+提交时前端同时发送用户文本和 `references` 数组。Rust 在发起 Agent 回合前读取当前项目 manifest，逐项复核资源是否存在、路径是否安全，并以 manifest 中的 `id / kind / mediaType / localPath` 作为权威投影；客户端传入的路径、名称和类型不会被直接信任。已删除或不存在的资源会阻止发送并提示用户移除后重新选择。
+
+当前已完成：
+
+- 三个聊天入口共用 `ResourceReferenceInput`；
+- 输入 `@` 触发候选，支持键盘选择和 Esc 关闭；
+- `@` 按钮打开素材选择面板；
+- 支持搜索、类型筛选和多选；
+- 素材芯片可插入、编辑和删除；
+- 资源画布素材卡提供 `@引用`；
+- 运行画面提供“点选素材”，可选中 HTML 区域并生成 `runtime-region` 引用；
+- 提交请求携带结构化 `references`；
+- Rust 按 manifest 二次校验并生成安全投影；
+- 普通无引用消息保持原有行为。
+
+当前未完成：
+
+- 跨会话恢复引用芯片的精确光标位置；
+- 资源改名后的引用显示名自动刷新。