diff --git a/server/ai/tools/site/systemPrompt.ts b/server/ai/tools/site/systemPrompt.ts
index a99002fa3..7e2345cc2 100644
--- a/server/ai/tools/site/systemPrompt.ts
+++ b/server/ai/tools/site/systemPrompt.ts
@@ -69,6 +69,7 @@ Templates (CMS layouts):
 
 Notes:
 - Use real ids from the suffix or prior tool results — never invent ids. Class refs accept id OR name.
+- When the user references a specific layer by ID (e.g. "Layer abc123" or "Layers abc123, def456"), extract those nodeIds and use them directly in your tool calls — do not ask the user to describe the element again.
 - Browser write-tool success data uses explicit keys: cssRulesCreated/cssRulesUpdated/cssRulesDeleted/cssPropertiesRemoved for site_apply_css, pageId for site_add_page/site_duplicate_page, nodeId/nodeIds for site_duplicate_node, and nodeIds for HTML inserts.
 - On tool error: read the message and retry with corrected input.
 
diff --git a/src/__tests__/agent/agentSlice.test.ts b/src/__tests__/agent/agentSlice.test.ts
index 6e6d6c6d6..ef7a25f52 100644
--- a/src/__tests__/agent/agentSlice.test.ts
+++ b/src/__tests__/agent/agentSlice.test.ts
@@ -16,6 +16,11 @@ import '@modules/base'
 // Test helpers
 // ---------------------------------------------------------------------------
 
+function nodeModuleId(n: unknown): string {
+  const node = n as { moduleId: string; moduleOverlay?: { moduleId: string } | null }
+  return node.moduleOverlay?.moduleId ?? node.moduleId
+}
+
 function freshAgentState() {
   useEditorStore.setState({
     site: null,
@@ -48,6 +53,7 @@ function freshAgentState() {
     isAgentProviderPending: false,
     agentComposerEpoch: 0,
     agentConversations: [],
+    agentDraftMentions: [],
     hasUnsavedChanges: false,
   })
 
@@ -322,7 +328,7 @@ describe('processStreamEvent — toolRequest dispatches to executor', () => {
     expect(result.ok).toBe(true)
 
     const page = useEditorStore.getState().site!.pages[0]
-    expect(Object.values(page.nodes).some((n) => n.moduleId === 'base.text')).toBe(true)
+    expect(Object.values(page.nodes).some((n) => nodeModuleId(n) === 'base.text')).toBe(true)
   })
 
   it('reports an error result when the tool input is invalid', async () => {
@@ -1007,6 +1013,7 @@ describe('loadAgentConversation — rehydration', () => {
 describe('conversation reset key-set', () => {
   // All three reset paths clear the same conversation keys and advance the
   // composer epoch so local text/image drafts cannot cross conversations.
+  // Layer-mention state is also reset so stale drafts don't carry over.
   const RESET_SNAPSHOT = {
     agentMessages: [],
     agentError: null,
@@ -1024,6 +1031,8 @@ describe('conversation reset key-set', () => {
       costUsd: 0,
     },
     agentComposerEpoch: 1,
+    agentDraftMentions: [],
+    agentMentionLabels: {},
   }
 
   function seedDirtyConversation() {
@@ -1045,6 +1054,8 @@ describe('conversation reset key-set', () => {
         cacheCreationTokens: 500,
         costUsd: 0.42,
       },
+      agentDraftMentions: [{ nodeId: 'abc123', label: 'Layer abc123' }],
+      agentMentionLabels: { abc123: 'Layer abc123' },
     })
   }
 
@@ -1058,6 +1069,8 @@ describe('conversation reset key-set', () => {
       agentActiveModelId: s.agentActiveModelId,
       agentUsage: s.agentUsage,
       agentComposerEpoch: s.agentComposerEpoch,
+      agentDraftMentions: s.agentDraftMentions,
+      agentMentionLabels: s.agentMentionLabels,
     }
   }
 
@@ -1549,3 +1562,44 @@ describe('setAgentProvider', () => {
     }
   })
 })
+
+// ---------------------------------------------------------------------------
+// stageAgentMentions — "Add to AI Chat" staging
+// ---------------------------------------------------------------------------
+
+describe('stageAgentMentions', () => {
+  it('stages mentions and opens the agent panel', () => {
+    freshAgentState()
+    useEditorStore.setState({ isAgentOpen: false, agentDraftMentions: [] })
+
+    useEditorStore.getState().stageAgentMentions([{ nodeId: 'abc123', label: 'Layer abc123' }])
+
+    expect(useEditorStore.getState().agentDraftMentions).toEqual([{ nodeId: 'abc123', label: 'Layer abc123' }])
+    expect(useEditorStore.getState().isAgentOpen).toBe(true)
+  })
+
+  it('appends to existing mentions', () => {
+    freshAgentState()
+    useEditorStore.setState({ agentDraftMentions: [{ nodeId: 'old', label: 'Layer old' }] })
+
+    useEditorStore.getState().stageAgentMentions([
+      { nodeId: 'abc123', label: 'Layer abc123' },
+      { nodeId: 'def456', label: 'Layer def456' },
+    ])
+
+    expect(useEditorStore.getState().agentDraftMentions).toEqual([
+      { nodeId: 'old', label: 'Layer old' },
+      { nodeId: 'abc123', label: 'Layer abc123' },
+      { nodeId: 'def456', label: 'Layer def456' },
+    ])
+  })
+
+  it('clears mentions via clearAgentDraftMentions', () => {
+    freshAgentState()
+    useEditorStore.setState({ agentDraftMentions: [{ nodeId: 'abc123', label: 'Layer abc123' }] })
+
+    useEditorStore.getState().clearAgentDraftMentions()
+
+    expect(useEditorStore.getState().agentDraftMentions).toEqual([])
+  })
+})
diff --git a/src/__tests__/architecture/module-size-budgets.test.ts b/src/__tests__/architecture/module-size-budgets.test.ts
index 7341abce4..e2fdbacb4 100644
--- a/src/__tests__/architecture/module-size-budgets.test.ts
+++ b/src/__tests__/architecture/module-size-budgets.test.ts
@@ -112,6 +112,10 @@ const GRANDFATHERED: Record<string, number> = {
   'src/admin/pages/site/panels/TypographyPanel/FontsSection/AddGoogleFontDialog.tsx': 751,
   'src/core/markdown/markdownDocument.ts': 748,
   'src/admin/pages/dashboard/DashboardPage.tsx': 732,
+  // Grew past CEILING while adding the layer-mention queue and label registry to
+  // the agent slice. Extract conversation-reset and credential helpers to
+  // graduate this entry.
+  'src/admin/pages/site/agent/agentSlice.ts': 742,
 }
 
 // ---------------------------------------------------------------------------
diff --git a/src/__tests__/canvas/selectionToolbar.test.tsx b/src/__tests__/canvas/selectionToolbar.test.tsx
index 9ac429cbe..cac04ddb1 100644
--- a/src/__tests__/canvas/selectionToolbar.test.tsx
+++ b/src/__tests__/canvas/selectionToolbar.test.tsx
@@ -363,6 +363,7 @@ describe('canvas selection toolbar', () => {
     expect(labels).toEqual([
       'Drag selected layers',
       'Insert module',
+      'Add selected layers to AI chat',
       'Duplicate selected layers',
       'Delete selected layers',
     ])
diff --git a/src/__tests__/dom-panel/layerNodeContextMenu.test.tsx b/src/__tests__/dom-panel/layerNodeContextMenu.test.tsx
index 4330ab396..1df742e8e 100644
--- a/src/__tests__/dom-panel/layerNodeContextMenu.test.tsx
+++ b/src/__tests__/dom-panel/layerNodeContextMenu.test.tsx
@@ -864,3 +864,88 @@ describe('LayerNodeContextMenu — multi-delete confirmation', () => {
     expect(pageAfterConfirm?.nodes.c).toBeDefined()
   })
 })
+
+describe('LayerNodeContextMenu — Add to AI chat', () => {
+  function setupAiChatPage() {
+    localStorage.clear()
+    const home = makePage({
+      id: 'page-ai',
+      title: 'Home',
+      slug: 'index',
+      rootNodeId: 'root',
+      nodes: {
+        root: makeNode({ id: 'root', moduleId: 'base.body', children: ['a', 'b'] }),
+        a: makeNode({ id: 'a', moduleId: 'base.text' }),
+        b: makeNode({ id: 'b', moduleId: 'base.button' }),
+      },
+    })
+    useEditorStore.setState({
+      site: makeSite({ pages: [home], files: [], visualComponents: [] }),
+      activePageId: 'page-ai',
+      selectedNodeId: 'a',
+      selectedNodeIds: ['a'],
+      hoveredNodeId: null,
+      activeDocument: null,
+      isAgentOpen: false,
+      agentDraftMentions: [],
+      _historyPast: [],
+      _historyFuture: [],
+      canUndo: false,
+      canRedo: false,
+      hasUnsavedChanges: false,
+    } as Parameters<typeof useEditorStore.setState>[0])
+  }
+
+  function renderAiChatMenu(nodeId = 'a') {
+    return render(
+      <LayerNodeContextMenu
+        x={100}
+        y={200}
+        nodeId={nodeId}
+        onClose={noop}
+        onDelete={noop}
+        onDuplicate={noop}
+        onRename={noop}
+        onWrapInContainer={noop}
+        onCopy={noop}
+        onCut={noop}
+        onPaste={noop}
+      />,
+    )
+  }
+
+  it('renders the "Add to AI chat" menu item', () => {
+    setupAiChatPage()
+    renderAiChatMenu()
+    expect(screen.getByRole('menuitem', { name: /add to ai chat/i })).toBeDefined()
+  })
+
+  it('stages a single node id as the agent draft and opens the panel', () => {
+    setupAiChatPage()
+    renderAiChatMenu('a')
+
+    fireEvent.click(screen.getByRole('menuitem', { name: /add to ai chat/i }))
+
+    expect(useEditorStore.getState().agentDraftMentions).toEqual([
+      { nodeId: 'a', label: '<p>' },
+    ])
+    expect(useEditorStore.getState().isAgentOpen).toBe(true)
+  })
+
+  it('stages multiple selected node ids when right-clicking a multi-selection', () => {
+    setupAiChatPage()
+    useEditorStore.setState({
+      selectedNodeId: 'b',
+      selectedNodeIds: ['a', 'b'],
+    } as Parameters<typeof useEditorStore.setState>[0])
+    renderAiChatMenu('b')
+
+    fireEvent.click(screen.getByRole('menuitem', { name: /add to ai chat/i }))
+
+    expect(useEditorStore.getState().agentDraftMentions).toEqual([
+      { nodeId: 'a', label: '<p>' },
+      { nodeId: 'b', label: '<button>' },
+    ])
+    expect(useEditorStore.getState().isAgentOpen).toBe(true)
+  })
+})
diff --git a/src/__tests__/panels/agentPanel.test.tsx b/src/__tests__/panels/agentPanel.test.tsx
index af554aa1a..45f12f229 100644
--- a/src/__tests__/panels/agentPanel.test.tsx
+++ b/src/__tests__/panels/agentPanel.test.tsx
@@ -162,6 +162,8 @@ function createAgentStore(overrides: Partial<AgentSlice> = {}) {
     isAgentConversationPending: false,
     isAgentProviderPending: false,
     agentComposerEpoch: 0,
+    agentDraftMentions: [],
+    agentMentionLabels: {},
     openAgent: () => set({ isAgentOpen: true }),
     closeAgent: () => set({ isAgentOpen: false }),
     toggleAgent: () => set((state) => ({ isAgentOpen: !state.isAgentOpen })),
@@ -184,6 +186,8 @@ function createAgentStore(overrides: Partial<AgentSlice> = {}) {
       set({ agentActiveCredentialId: credentialId, agentActiveModelId: modelId, agentError: null })
     },
     loadScopeDefault: async () => {},
+    stageAgentMentions: () => {},
+    clearAgentDraftMentions: () => set({ agentDraftMentions: [] }),
     ...overrides,
   }))
 }
diff --git a/src/admin/pages/site/agent/agentSlice.ts b/src/admin/pages/site/agent/agentSlice.ts
index 1c3260456..d12e71a31 100644
--- a/src/admin/pages/site/agent/agentSlice.ts
+++ b/src/admin/pages/site/agent/agentSlice.ts
@@ -48,6 +48,7 @@ export type {
 import type {
   AgentBridgeRuntime,
   AgentMessage,
+  AgentMessageMention,
   AgentTextStreamSink,
 } from './types'
 import { getErrorMessage } from '@core/utils/errorMessage'
@@ -148,6 +149,8 @@ type ConversationResetKeys =
   | 'agentActiveModelId'
   | 'agentUsage'
   | 'agentComposerEpoch'
+  | 'agentDraftMentions'
+  | 'agentMentionLabels'
 
 function emptyConversationUsage(): AgentConversationUsage {
   return {
@@ -171,6 +174,8 @@ function conversationResetState(agentComposerEpoch: number): Pick<AgentSlice, Co
     agentActiveModelId: null,
     agentUsage: emptyConversationUsage(),
     agentComposerEpoch,
+    agentDraftMentions: [],
+    agentMentionLabels: {},
   }
 }
 
@@ -289,6 +294,8 @@ export function createAgentSlice(
     isAgentConversationPending: false,
     isAgentProviderPending: false,
     agentComposerEpoch: 0,
+    agentDraftMentions: [],
+    agentMentionLabels: {},
 
     // ── UI actions ───────────────────────────────────────────────────────────
     openAgent() {
@@ -305,6 +312,20 @@ export function createAgentSlice(
       })
     },
 
+    stageAgentMentions(mentions) {
+      set((state) => {
+        state.agentDraftMentions.push(...mentions)
+        for (const m of mentions) {
+          state.agentMentionLabels[m.nodeId] = m.label
+        }
+        state.isAgentOpen = true
+      })
+    },
+
+    clearAgentDraftMentions() {
+      set({ agentDraftMentions: [] })
+    },
+
     abortAgent() {
       if (_abortController) _abortController.abort()
       else set({ isAgentStreaming: false })
@@ -524,7 +545,7 @@ export function createAgentSlice(
     },
 
     // ── sendAgentMessage ─────────────────────────────────────────────────────
-    async sendAgentMessage(content) {
+    async sendAgentMessage(content, mentions?: AgentMessageMention[]) {
       if (
         get().isAgentStreaming
         || get().isAgentConversationPending
@@ -547,6 +568,7 @@ export function createAgentSlice(
             }
           : { ...block }),
         timestamp: Date.now(),
+        mentions,
       }
 
       const assistantId = nanoid()
@@ -605,7 +627,28 @@ export function createAgentSlice(
           }
         }
 
-        const body: AiChatRequestBody = { conversationId, content: [...content], snapshot }
+        // Build machine-readable content: replace human mention labels with
+        // Layer <nodeId> so the AI knows these are layer references. Keep
+        // image blocks untouched.
+        const hasMentions = (mentions ?? []).length > 0
+        const instruction = hasMentions
+          ? `Write layer references exactly as: the word Layer, a space, then the raw id with no extra characters. Example: Layer b3zJlOcL1. Never wrap ids in angle brackets or backticks.\n\n`
+          : ''
+        let instructionInjected = false
+        const machineContent = content.map((block) => {
+          if (block.kind !== 'text') return block
+          let text = block.text
+          for (const mention of mentions ?? []) {
+            text = text.replaceAll(mention.label, `Layer ${mention.nodeId}`)
+          }
+          if (!instructionInjected && hasMentions) {
+            text = instruction + text
+            instructionInjected = true
+          }
+          return { ...block, text }
+        })
+
+        const body: AiChatRequestBody = { conversationId, content: machineContent, snapshot }
         const res = await fetch(`/admin/api/ai/chat/${config.scope}`, {
           method: 'POST',
           headers: { 'Content-Type': 'application/json' },
@@ -624,6 +667,10 @@ export function createAgentSlice(
         set((state) => {
           state.agentMessages.push(userMsg)
           state.agentMessages.push(assistantMsg)
+          // Register mention labels so they survive node deletion.
+          for (const m of mentions ?? []) {
+            state.agentMentionLabels[m.nodeId] = m.label
+          }
         })
         if (!res.body) throw new Error('Agent response has no body')
 
diff --git a/src/admin/pages/site/agent/agentSliceTypes.ts b/src/admin/pages/site/agent/agentSliceTypes.ts
index f70ef9ca4..b0b50a88f 100644
--- a/src/admin/pages/site/agent/agentSliceTypes.ts
+++ b/src/admin/pages/site/agent/agentSliceTypes.ts
@@ -1,7 +1,7 @@
 import type { EditorStoreSliceCreator } from '@site/store/types'
 import type { AiToolOutput, AiUserContentBlock } from '@core/ai'
 import type { ConversationView } from '@admin/ai/api'
-import type { AgentMessage, AgentToolScope } from './types'
+import type { AgentMessage, AgentMessageMention, AgentToolScope } from './types'
 
 export interface AgentSliceConfig {
   /**
@@ -47,6 +47,11 @@ export interface AgentConversationUsage {
   costUsd: number
 }
 
+export interface AgentDraftMention {
+  nodeId: string
+  label: string
+}
+
 export interface AgentSlice {
   isAgentOpen: boolean
   isAgentStreaming: boolean
@@ -63,11 +68,26 @@ export interface AgentSlice {
   isAgentProviderPending: boolean
   /** Remounts local composer drafts on explicit conversation replacement. */
   agentComposerEpoch: number
+  /**
+   * Mention queue for the agent composer. Set by "Add to AI Chat" actions
+   * from the canvas / layers panel; consumed once by AgentComposer then
+   * cleared. Each entry carries the layer's nodeId and display label.
+   */
+  agentDraftMentions: AgentDraftMention[]
+  /**
+   * Accumulated nodeId → human label registry across the conversation.
+   * Survives node deletion so scanned assistant mentions can still be
+   * rendered as clickable pills with friendly names after a node is gone.
+   */
+  agentMentionLabels: Record<string, string>
 
   openAgent(): void
   closeAgent(): void
   toggleAgent(): void
-  sendAgentMessage(content: AiUserContentBlock[]): Promise<{ accepted: boolean }>
+  sendAgentMessage(
+    content: AiUserContentBlock[],
+    mentions?: AgentMessageMention[],
+  ): Promise<{ accepted: boolean }>
   abortAgent(): void
   clearAgentMessages(): void
   loadAgentConversations(): Promise<void>
@@ -76,6 +96,15 @@ export interface AgentSlice {
   deleteAgentConversation(id: string): Promise<void>
   setAgentProvider(credentialId: string, modelId: string): Promise<void>
   loadScopeDefault(): Promise<void>
+  /**
+   * Queue layer mentions into the agent composer and open the panel so the
+   * user can finish their prompt. Used by "Add to AI Chat" flows.
+   */
+  stageAgentMentions(mentions: AgentDraftMention[]): void
+  /**
+   * Clear the mention queue after the composer has consumed it.
+   */
+  clearAgentDraftMentions(): void
 }
 
 export type EditorStoreSet = Parameters<EditorStoreSliceCreator<AgentSlice>>[0]
diff --git a/src/admin/pages/site/agent/index.ts b/src/admin/pages/site/agent/index.ts
index d12e2ceb5..c27d3beb0 100644
--- a/src/admin/pages/site/agent/index.ts
+++ b/src/admin/pages/site/agent/index.ts
@@ -13,6 +13,7 @@ export type {
   AgentConversationUsage,
   AgentSlice,
   AgentSliceConfig,
+  AgentDraftMention,
 } from './agentSliceTypes'
 
 // Site-editor wiring (scope, snapshot, dispatcher) handed to the factory.
diff --git a/src/admin/pages/site/agent/mentionLabel.ts b/src/admin/pages/site/agent/mentionLabel.ts
new file mode 100644
index 000000000..d31db5caa
--- /dev/null
+++ b/src/admin/pages/site/agent/mentionLabel.ts
@@ -0,0 +1,44 @@
+/**
+ * MentionLabel — compute a human-readable label and a tag-derived color key
+ * for a layer mention pill.
+ *
+ * The label is what the user sees; the colorKey is what drives the pill
+ * accent so it matches the DOM tree's `<tag>` badge colour.
+ */
+import { registry } from '@core/module-engine'
+import type { BaseNode, SiteDocument } from '@core/page-tree'
+import {
+  getNodeDisplayName,
+  getNodeHtmlTag,
+  getNodeClassNames,
+} from '@core/page-tree'
+
+export interface MentionLabelResult {
+  label: string
+  colorKey: string
+}
+
+export function getMentionLabelForNode(
+  nodeId: string,
+  node: BaseNode | undefined,
+  site: SiteDocument | null,
+): MentionLabelResult {
+  if (!node) {
+    return { label: nodeId, colorKey: nodeId }
+  }
+
+  const def = registry.get(node.moduleId)
+  const classNames = getNodeClassNames(node, site?.styleRules)
+  const htmlTag = getNodeHtmlTag(node, def)
+
+  // Priority: class selector chip → html tag badge → module display name
+  if (classNames.length > 0) {
+    return { label: `.${classNames.join('.')}`, colorKey: htmlTag ?? classNames[0] }
+  }
+  if (htmlTag) {
+    return { label: `<${htmlTag}>`, colorKey: htmlTag }
+  }
+
+  const displayName = getNodeDisplayName(node, def, site?.visualComponents)
+  return { label: displayName, colorKey: displayName }
+}
diff --git a/src/admin/pages/site/agent/streamEvents.ts b/src/admin/pages/site/agent/streamEvents.ts
index 4cd0c8526..badeb38a4 100644
--- a/src/admin/pages/site/agent/streamEvents.ts
+++ b/src/admin/pages/site/agent/streamEvents.ts
@@ -187,6 +187,14 @@ export async function processStreamEvent(
           if (inputAsRecord) existing.toolCall.params = inputAsRecord
           return
         }
+        // Capture the referenced node id so the UI can resolve a friendly
+        // display label at render time. We deliberately avoid reading the
+        // editor store here to break the store ↔ agent barrel import cycle.
+        const nodeId =
+          typeof inputAsRecord?.nodeId === 'string'
+            ? (inputAsRecord.nodeId as string)
+            : undefined
+
         msg.blocks.push({
           kind: 'toolCall',
           toolCall: {
@@ -196,6 +204,7 @@ export async function processStreamEvent(
             params: inputAsRecord ?? {},
             result: null,
             status: 'pending',
+            displayLabel: nodeId,
           },
         })
       })
diff --git a/src/admin/pages/site/agent/types.ts b/src/admin/pages/site/agent/types.ts
index 6628761db..0a14d25e0 100644
--- a/src/admin/pages/site/agent/types.ts
+++ b/src/admin/pages/site/agent/types.ts
@@ -162,6 +162,12 @@ export interface AgentToolCall {
    * agent looked at; never persisted — it rehydrates empty after a reload.
    */
   previewImages?: string[]
+  /**
+   * Human-readable label resolved at creation time (e.g. ".icon").
+   * Cached so tool-call rows still show a friendly name after the node
+   * has been deleted. Populated for node-related tools only.
+   */
+  displayLabel?: string
 }
 
 /**
@@ -175,6 +181,11 @@ type AgentMessageBlock =
   | AgentMessageImageBlock
   | { kind: 'toolCall'; toolCall: AgentToolCall }
 
+export interface AgentMessageMention {
+  nodeId: string
+  label: string
+}
+
 export interface AgentMessageImageBlock {
   kind: 'image'
   mimeType: 'image/jpeg'
@@ -187,6 +198,12 @@ export interface AgentMessage {
   role: 'user' | 'assistant'
   blocks: AgentMessageBlock[]
   timestamp: number
+  /**
+   * Layer mentions embedded in this message, purely for client-side
+   * rendering. Not sent to the server — populated from the composer's
+   * DOM when the user sends a message, or extracted from assistant text.
+   */
+  mentions?: AgentMessageMention[]
 }
 
 export interface AgentLayoutRect {
diff --git a/src/admin/pages/site/canvas/BreakpointSelectionOverlay.tsx b/src/admin/pages/site/canvas/BreakpointSelectionOverlay.tsx
index fdb774065..3e297ebe7 100644
--- a/src/admin/pages/site/canvas/BreakpointSelectionOverlay.tsx
+++ b/src/admin/pages/site/canvas/BreakpointSelectionOverlay.tsx
@@ -80,6 +80,7 @@ import { cn } from '@ui/cn'
 import { CopyPlusSolidIcon } from 'pixel-art-icons/icons/copy-plus-solid'
 import { TrashSolidIcon } from 'pixel-art-icons/icons/trash-solid'
 import { HandGrabSolidIcon } from 'pixel-art-icons/icons/hand-grab-solid'
+import { SparklesSolidIcon } from 'pixel-art-icons/icons/sparkles-solid'
 import { CanvasViewportActionsContext } from './CanvasContexts'
 import { CanvasInsertModuleButton } from './CanvasInsertModuleButton'
 import { useCanvasReorderDrag } from './useCanvasReorderDrag'
@@ -139,6 +140,13 @@ function deleteSelectedLayers() {
   state.clearSelection()
 }
 
+function addSelectedLayersToAiChat() {
+  const ids = useEditorStore.getState().selectedNodeIds
+  if (ids.length === 0) return
+  const mentions = ids.map((id) => ({ nodeId: id, label: `Layer ${id}` }))
+  useEditorStore.getState().stageAgentMentions(mentions)
+}
+
 export function BreakpointSelectionOverlay({
   breakpointId,
   viewportRef,
@@ -389,6 +397,17 @@ export function BreakpointSelectionOverlay({
       </Button>
       <CanvasInsertModuleButton buttonClassName={styles.selectionToolbarButton} />
 
+      <Button
+        variant="secondary"
+        size="xs"
+        iconOnly
+        aria-label="Add selected layers to AI chat"
+        tooltip="Add selected layers to AI chat"
+        className={styles.selectionToolbarButton}
+        onClick={addSelectedLayersToAiChat}
+      >
+        <SparklesSolidIcon size={13} color="var(--text)" />
+      </Button>
       <Button
         variant="secondary"
         size="xs"
diff --git a/src/admin/pages/site/panels/AgentPanel/AgentComposer.tsx b/src/admin/pages/site/panels/AgentPanel/AgentComposer.tsx
index 908b7fd6e..d8d3204dc 100644
--- a/src/admin/pages/site/panels/AgentPanel/AgentComposer.tsx
+++ b/src/admin/pages/site/panels/AgentPanel/AgentComposer.tsx
@@ -1,3 +1,15 @@
+/**
+ * AgentComposer — multi-modal chat input with layer-mention support.
+ *
+ * Built on the upstream textarea composer (text + image attachments + model
+ * picker). Layer mentions from "Add to AI Chat" are inserted as plain-text
+ * markers (`Layer <nodeId>`) in the textarea. On send, those markers are
+ * extracted into an `AgentMessageMention[]` and passed to `sendAgentMessage`,
+ * which replaces them with the canonical "Layer <nodeId>" form the AI expects
+ * and adds the instruction prompt. The rendered message thread uses
+ * `RichTextBubble` to turn the markers back into friendly, clickable pills.
+ */
+
 import {
   useEffect,
   useRef,
@@ -26,6 +38,7 @@ import {
 } from './agentImageTypes'
 import { PendingImageAttachmentGrid } from './PendingImageAttachmentGrid'
 import { usePendingImageAttachments } from './usePendingImageAttachments'
+import type { AgentMessageMention } from '@site/agent'
 import styles from './AgentPanel.module.css'
 
 export type ComposerLockReason = 'setup' | 'chooseModel'
@@ -40,6 +53,8 @@ interface AgentComposerProps {
   onOpenImageMenu: OpenAgentImageMenu
 }
 
+const LAYER_MENTION_RE = /\bLayer\s+([A-Za-z0-9_-]+)/g
+
 export function AgentComposer({
   composerLocked,
   lockReason,
@@ -57,6 +72,8 @@ export function AgentComposer({
   const abortAgent = useAgentStore((state) => state.abortAgent)
   const activeCredentialId = useAgentStore((state) => state.agentActiveCredentialId)
   const activeModelId = useAgentStore((state) => state.agentActiveModelId)
+  const draftMentions = useAgentStore((state) => state.agentDraftMentions)
+  const clearDraftMentions = useAgentStore((state) => state.clearAgentDraftMentions)
   const [draft, setDraft] = useState('')
   const [submitting, setSubmitting] = useState(false)
   const attachments = usePendingImageAttachments()
@@ -68,14 +85,23 @@ export function AgentComposer({
       const input = inputRef.current
       if (!input) return
       const panel = input.closest('[data-panel]')
-      // A header or composer control may have received an explicit click
-      // while this deferred autofocus was waiting.
       if (panel?.contains(document.activeElement)) return
       input.focus()
     }, 50)
     return () => clearTimeout(id)
   }, [isOpen])
 
+  // Consume queued layer mentions and insert them into the textarea as
+  // machine-readable markers. We use the "Layer <nodeId>" form directly so
+  // the user can see what was referenced and the parser can re-extract it.
+  useEffect(() => {
+    if (draftMentions.length === 0 || !inputRef.current) return
+    const markers = draftMentions.map((m) => `Layer ${m.nodeId}`).join(' ')
+    const separator = draft.trim().length > 0 && !draft.endsWith(' ') ? ' ' : ''
+    setDraft((prev) => `${prev}${separator}${markers} `)
+    clearDraftMentions()
+  }, [draftMentions, clearDraftMentions, draft])
+
   const activeProviderId =
     credentials.find((credential) => credential.id === activeCredentialId)?.providerId ?? null
   const activeModelResource = useAsyncResource(
@@ -114,6 +140,21 @@ export function AgentComposer({
             ? 'ready'
             : 'unsupported-model'
 
+  function extractMentions(text: string): AgentMessageMention[] {
+    const mentions: AgentMessageMention[] = []
+    const seen = new Set<string>()
+    let match: RegExpExecArray | null
+    LAYER_MENTION_RE.lastIndex = 0
+    while ((match = LAYER_MENTION_RE.exec(text)) !== null) {
+      const nodeId = match[1]!
+      if (seen.has(nodeId)) continue
+      seen.add(nodeId)
+      mentions.push({ nodeId, label: match[0] })
+    }
+    LAYER_MENTION_RE.lastIndex = 0
+    return mentions
+  }
+
   async function submit(): Promise<void> {
     if (
       isStreaming
@@ -132,6 +173,7 @@ export function AgentComposer({
     if (pending.some((entry) => entry.status === 'error' || !entry.block)) return
     if (pending.length > 0 && imageStatus !== 'ready') return
 
+    const mentions = extractMentions(text)
     const content: AiUserContentBlock[] = []
     if (text) content.push({ kind: 'text', text })
     for (const entry of pending) {
@@ -139,7 +181,7 @@ export function AgentComposer({
     }
 
     setSubmitting(true)
-    const result = await sendAgentMessage(content).finally(() => setSubmitting(false))
+    const result = await sendAgentMessage(content, mentions).finally(() => setSubmitting(false))
     if (result.accepted) {
       setDraft('')
       attachments.clear()
@@ -157,7 +199,6 @@ export function AgentComposer({
 
   function handleImageSelection(event: ChangeEvent<HTMLInputElement>): void {
     const files = Array.from(event.currentTarget.files ?? [])
-    // Let the same local file fire change again after it is removed.
     event.currentTarget.value = ''
     attachments.queueFiles(files, AI_USER_IMAGE_MAX_PER_MESSAGE)
   }
diff --git a/src/admin/pages/site/panels/AgentPanel/AgentPanel.module.css b/src/admin/pages/site/panels/AgentPanel/AgentPanel.module.css
index 7cc60e703..a40868880 100644
--- a/src/admin/pages/site/panels/AgentPanel/AgentPanel.module.css
+++ b/src/admin/pages/site/panels/AgentPanel/AgentPanel.module.css
@@ -212,6 +212,56 @@
   min-width: 0;
 }
 
+/* ── Composer (contenteditable) ────────────────────────────────────────── */
+.composer {
+  width: 100%;
+  min-height: 44px;
+  max-height: 120px;
+  overflow-y: auto;
+  padding: var(--space-s) var(--space-m);
+  border: 1px solid var(--overlay-10);
+  border-radius: var(--radius);
+  background: var(--bg-surface);
+  color: var(--text);
+  font-size: var(--text-m);
+  line-height: 1.5;
+  outline: none;
+  cursor: text;
+  word-break: break-word;
+  white-space: pre-wrap;
+}
+
+.composer:focus {
+  border-color: var(--primary);
+}
+
+.composerEmpty::before {
+  content: attr(data-placeholder);
+  color: var(--text-disabled);
+  pointer-events: none;
+}
+
+.composerDisabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+  background: var(--bg-surface-2);
+}
+
+/* ── Mention pill ────────────────────────────────────────────────────────── */
+.mentionPill {
+  color: var(--accent-2);
+  font-weight: 700;
+  cursor: pointer;
+  text-decoration: underline;
+  text-decoration-color: color-mix(in srgb, currentColor 35%, transparent);
+  text-underline-offset: 2px;
+  text-decoration-thickness: 1.5px;
+}
+
+.mentionPill:hover {
+  text-decoration-color: currentColor;
+}
+
 /* The picker takes the leftover width but never crowds out the button. */
 .inputControlsPicker {
   min-width: 0;
diff --git a/src/admin/pages/site/panels/AgentPanel/AgentPanel.tsx b/src/admin/pages/site/panels/AgentPanel/AgentPanel.tsx
index f40bf5116..000e0657f 100644
--- a/src/admin/pages/site/panels/AgentPanel/AgentPanel.tsx
+++ b/src/admin/pages/site/panels/AgentPanel/AgentPanel.tsx
@@ -21,13 +21,14 @@
  * @see Guideline #410 — 3 Self-Contained Independent Panels
  */
 
-import { useRef, useEffect, useState, memo } from 'react'
+import { useRef, useEffect, useState } from 'react'
 import { useAgentStore, useAgentStoreApi } from '@admin/ai/useAgentStore'
 import { useAsyncResource } from '@admin/lib/useAsyncResource'
 import { useAdminNavigate } from '@admin/lib/useAdminNavigate'
 import { useAuthenticatedAdminUser } from '@admin/sessionContext'
 import { listCredentials } from '@admin/ai/api'
-import { renderMarkdownToHtml, type AgentMessage, type AgentToolCall } from '@site/agent'
+import { type AgentMessage, type AgentToolCall, type AgentMessageMention } from '@site/agent'
+import { RichTextBubble } from './RichTextBubble'
 import { AiBoxSolidIcon } from 'pixel-art-icons/icons/ai-box-solid'
 import { AiSettingsSolidIcon } from 'pixel-art-icons/icons/ai-settings-solid'
 import { EditSolidIcon } from 'pixel-art-icons/icons/edit-solid'
@@ -353,7 +354,7 @@ function MessageBubble({
           DOMPurify-sanitised HTML pipeline. */}
       {groupRenderItems(group.messages).map((item) =>
         item.kind === 'text' ? (
-          <MarkdownTextBubble key={item.key} text={item.text} isUser={isUser} />
+          <RichTextBubble key={item.key} text={item.text} isUser={isUser} mentions={item.mentions} />
         ) : item.kind === 'images' ? (
           <MessageImageGallery
             key={item.key}
@@ -404,7 +405,7 @@ function groupConsecutiveMessages(messages: AgentMessage[]): ConversationGroup[]
 type MessageBlock = AgentMessage['blocks'][number]
 
 type MessageRenderItem =
-  | { kind: 'text'; key: string; text: string }
+  | { kind: 'text'; key: string; text: string; mentions?: AgentMessageMention[] }
   | {
       kind: 'images'
       key: string
@@ -418,7 +419,7 @@ function groupRenderItems(messages: AgentMessage[]): MessageRenderItem[] {
     message.blocks.forEach((block: MessageBlock, index) => {
       if (block.kind === 'text') {
         // Position-based key, stable as streaming deltas append in place.
-        items.push({ kind: 'text', key: `text-${message.id}-${index}`, text: block.text })
+        items.push({ kind: 'text', key: `text-${message.id}-${index}`, text: block.text, mentions: message.mentions })
         return
       }
       if (block.kind === 'image') {
@@ -506,38 +507,6 @@ function ToolPreviewGallery({
 }
 
 // ---------------------------------------------------------------------------
-// MarkdownTextBubble — parses + sanitises the block text and injects it via
-// dangerouslySetInnerHTML. Memoised render so streaming deltas don't re-parse
-// markdown for unchanged blocks.
-// ---------------------------------------------------------------------------
-
-interface MarkdownTextBubbleProps {
-  text: string
-  isUser: boolean
-}
-
-// Exception #2: React.memo re-render bailout on a hot, list-rendered component
-// (one per text block, re-rendered on every streaming delta).
-const MarkdownTextBubble = memo(function MarkdownTextBubble({
-  text,
-  isUser,
-}: MarkdownTextBubbleProps) {
-  const html = renderMarkdownToHtml(text)
-  // Empty/whitespace-only blocks don't render at all (avoids stray bubbles
-  // around stripped-out tool blocks during streaming).
-  if (!html) return null
-  return (
-    <div
-      className={cn(
-        styles.messageText,
-        isUser ? styles.messageTextUser : styles.messageTextAssistant,
-        styles.markdownText,
-      )}
-      // Safe: sanitised by DOMPurify (via sanitizeRichtext) before reaching here.
-      dangerouslySetInnerHTML={{ __html: html }}
-    />
-  )
-})
 
 // ---------------------------------------------------------------------------
 // Empty state
diff --git a/src/admin/pages/site/panels/AgentPanel/RichTextBubble.tsx b/src/admin/pages/site/panels/AgentPanel/RichTextBubble.tsx
new file mode 100644
index 000000000..4df78481a
--- /dev/null
+++ b/src/admin/pages/site/panels/AgentPanel/RichTextBubble.tsx
@@ -0,0 +1,284 @@
+/**
+ * RichTextBubble — renders a message text block with inline clickable
+ * layer-mention pills. User messages use stored mentions; assistant messages
+ * are scanned for mention patterns and validated against the current page.
+ * Text without mentions falls back to markdown rendering (bold, lists, code).
+ */
+import { memo, useCallback } from 'react'
+import { useEditorStore } from '@site/store/store'
+import type { BaseNode, SiteDocument } from '@core/page-tree'
+import { renderMarkdownToHtml } from '@site/agent'
+import { cn } from '@ui/cn'
+import { pillAccent, pillAccentVar } from '@ui/pillAccent'
+import { getMentionLabelForNode } from '@site/agent/mentionLabel'
+import type { AgentMessageMention } from '@site/agent'
+import styles from './AgentPanel.module.css'
+
+interface RichTextBubbleProps {
+  text: string
+  isUser: boolean
+  mentions?: AgentMessageMention[]
+}
+
+/**
+ * Matches layer references like "Layer abc123", "Module <abc123>",
+ * "Elements \`def456\`, \`ghi789\`", etc. Accepts multiple prefix words
+ * (Layer, Module, Element, Node, Section, Component) with optional plural
+ * 's' and optional angle-brackets or backticks around each id.
+ */
+const MENTION_RE = /\b(?:Layer|Module|Element|Node|Section|Component)s?\s+((?:<|`)?[A-Za-z0-9_-]+(?:>|`)?(?:,\s*(?:<|`)?[A-Za-z0-9_-]+(?:>|`)?)*)/i
+
+function scanMentions(text: string): RegExpExecArray[] {
+  const matches: RegExpExecArray[] = []
+  const re = new RegExp(MENTION_RE.source, 'gi')
+  let match: RegExpExecArray | null
+  while ((match = re.exec(text)) !== null) {
+    matches.push(match)
+  }
+  return matches
+}
+
+function useNodeSelector() {
+  const selectNode = useCallback(
+    (nodeId: string) => {
+      try {
+        useEditorStore.getState().selectNode(nodeId, 'replace')
+      } catch {
+        // Content workspace or missing store — silently ignore.
+      }
+    },
+    [],
+  )
+  return selectNode
+}
+
+function MentionPill({ label, nodeId }: { label: string; nodeId: string }) {
+  const selectNode = useNodeSelector()
+  const state = useEditorStore.getState()
+  const site = state.site
+  const page = site?.pages.find((p) => p.id === state.activePageId)
+  let colorKey = nodeId
+  try {
+    colorKey = getMentionLabelForNode(nodeId, page?.nodes[nodeId], site).colorKey
+  } catch {
+    // Node deleted — fall back to nodeId for color generation
+  }
+  return (
+    <span
+      className={styles.mentionPill}
+      data-node-id={nodeId}
+      style={{ color: pillAccentVar(pillAccent(colorKey)) }}
+      onClick={(e) => {
+        e.stopPropagation()
+        selectNode(nodeId)
+      }}
+      role="button"
+      tabIndex={0}
+      onKeyDown={(e) => {
+        if (e.key === 'Enter' || e.key === ' ') {
+          e.preventDefault()
+          selectNode(nodeId)
+        }
+      }}
+    >
+      {label}
+    </span>
+  )
+}
+
+/**
+ * Split text by a set of known mention labels and render each mention as a
+ * clickable pill. Unmatched text is rendered as a plain <span>.
+ */
+function renderWithStoredMentions(
+  text: string,
+  mentions: AgentMessageMention[],
+): React.ReactNode[] {
+  const segments: React.ReactNode[] = []
+  let remaining = text
+
+  for (const mention of mentions) {
+    const idx = remaining.indexOf(mention.label)
+    if (idx === -1) continue
+    if (idx > 0) {
+      segments.push(
+        <span key={`t-${segments.length}`}>{remaining.slice(0, idx)}</span>,
+      )
+    }
+    segments.push(
+      <MentionPill
+        key={`m-${mention.nodeId}-${segments.length}`}
+        nodeId={mention.nodeId}
+        label={mention.label}
+      />,
+    )
+    remaining = remaining.slice(idx + mention.label.length)
+  }
+
+  if (remaining) {
+    segments.push(<span key={`t-${segments.length}`}>{remaining}</span>)
+  }
+
+  return segments.length > 0 ? segments : [text]
+}
+
+/**
+ * Scan assistant text for "Layer abc123" or "Layers abc123, def456" patterns
+ * and render matching nodeIds as pills. All other text stays plain.
+ */
+function renderWithScannedMentions(text: string): React.ReactNode[] {
+  const segments: React.ReactNode[] = []
+  let lastIndex = 0
+
+  // Get current page node ids for validation + mention label registry
+  let validNodeIds: Set<string> | null = null
+  let mentionLabels: Record<string, string> = {}
+  let page: { nodes: Record<string, BaseNode> } | undefined
+  let site: SiteDocument | null = null
+  try {
+    const state = useEditorStore.getState()
+    site = state.site
+    const activePageId = state.activePageId
+    page = site?.pages.find((p) => p.id === activePageId)
+    if (page?.nodes) {
+      validNodeIds = new Set(Object.keys(page.nodes))
+    }
+    mentionLabels = state.agentMentionLabels ?? {}
+  } catch {
+    // No editor store available (content workspace)
+  }
+
+  for (const match of scanMentions(text)) {
+    const [fullMatch, idsStr] = match
+    const start = match.index
+    const ids = idsStr
+      .split(',')
+      .map((s) => s.trim().replace(/^[<`]+|[>`]+$/g, ''))
+
+    // Preserve the original prefix word (Layer, Module, Node, etc.)
+    const prefixMatch = fullMatch.match(/^\S+/)
+    const prefix = prefixMatch ? prefixMatch[0] : 'Layer'
+
+    // Push plain text before the match
+    if (start > lastIndex) {
+      segments.push(
+        <span key={`t-${segments.length}`}>{text.slice(lastIndex, start)}</span>,
+      )
+    }
+
+    // Render each id as a pill with a human-readable label if it looks valid
+    const pills: React.ReactNode[] = []
+    ids.forEach((id, i) => {
+      const cachedLabel = mentionLabels[id]
+      const isValid = !validNodeIds || validNodeIds.has(id)
+      if (cachedLabel) {
+        // Known from registry (may be deleted) — render as pill
+        pills.push(
+          <MentionPill
+            key={`m-${id}-${segments.length}-${i}`}
+            nodeId={id}
+            label={cachedLabel}
+          />,
+        )
+      } else if (isValid) {
+        // Still exists in page — resolve fresh
+        const { label } = getMentionLabelForNode(id, page?.nodes[id], site)
+        pills.push(
+          <MentionPill
+            key={`m-${id}-${segments.length}-${i}`}
+            nodeId={id}
+            label={label}
+          />,
+        )
+      } else {
+        // Unknown deleted node — plain text fallback
+        pills.push(
+          <span key={`m-${id}-${segments.length}-${i}`}>{prefix} {id}</span>,
+        )
+      }
+      if (i < ids.length - 1) {
+        pills.push(<span key={`sep-${segments.length}-${i}`}>, </span>)
+      }
+    })
+
+    // Preserve the original prefix word in the rendered output
+    segments.push(
+      <span key={`g-${segments.length}`}>
+        {prefix} {pills}
+      </span>,
+    )
+
+    lastIndex = start + fullMatch.length
+  }
+
+  // Remaining plain text
+  if (lastIndex < text.length) {
+    segments.push(<span key={`t-${segments.length}`}>{text.slice(lastIndex)}</span>)
+  }
+
+  return segments.length > 0 ? segments : [text]
+}
+
+// Exception: React.memo re-render bailout on a hot, list-rendered component.
+const RichTextBubble = memo(function RichTextBubble({
+  text,
+  isUser,
+  mentions,
+}: RichTextBubbleProps) {
+  const hasStoredMentions = mentions && mentions.length > 0
+
+  if (hasStoredMentions) {
+    return (
+      <div
+        className={cn(
+          styles.messageText,
+          isUser ? styles.messageTextUser : styles.messageTextAssistant,
+        )}
+      >
+        {renderWithStoredMentions(text, mentions!)}
+      </div>
+    )
+  }
+
+  // Assistant text — scan for mention patterns
+  if (!isUser && scanMentions(text).length > 0) {
+    return (
+      <div
+        className={cn(
+          styles.messageText,
+          styles.messageTextAssistant,
+        )}
+      >
+        {renderWithScannedMentions(text)}
+      </div>
+    )
+  }
+
+  // No mentions — render markdown for assistants, plain text for users
+  const html = !isUser ? renderMarkdownToHtml(text) : null
+  if (html) {
+    return (
+      <div
+        className={cn(
+          styles.messageText,
+          styles.messageTextAssistant,
+          styles.markdownText,
+        )}
+        dangerouslySetInnerHTML={{ __html: html }}
+      />
+    )
+  }
+
+  return (
+    <div
+      className={cn(
+        styles.messageText,
+        isUser ? styles.messageTextUser : styles.messageTextAssistant,
+      )}
+    >
+      {text}
+    </div>
+  )
+})
+
+export { RichTextBubble }
diff --git a/src/admin/pages/site/panels/AgentPanel/ToolCallRow.tsx b/src/admin/pages/site/panels/AgentPanel/ToolCallRow.tsx
index ae5f4c846..67ae40244 100644
--- a/src/admin/pages/site/panels/AgentPanel/ToolCallRow.tsx
+++ b/src/admin/pages/site/panels/AgentPanel/ToolCallRow.tsx
@@ -38,7 +38,7 @@ export function ToolCallRow({ toolCall }: { toolCall: AgentToolCall }) {
   const isSuccess = toolCall.status === 'success'
   const isError = toolCall.status === 'error'
 
-  const display = getToolCallDisplay(toolCall.actionType, toolCall.params)
+  const display = getToolCallDisplay(toolCall.actionType, toolCall.params, toolCall.displayLabel)
   const swatches = extractColorSwatches(toolCall.actionType, toolCall.params)
   const accessibleStatus = isPending ? 'Running' : isSuccess ? 'Completed' : 'Failed'
   const statusLabel = `${accessibleStatus} ${display.title}${display.detail ? ` — ${display.detail}` : ''}`
diff --git a/src/admin/pages/site/panels/AgentPanel/toolCallDisplay.ts b/src/admin/pages/site/panels/AgentPanel/toolCallDisplay.ts
index e0fbdc73b..bd6240939 100644
--- a/src/admin/pages/site/panels/AgentPanel/toolCallDisplay.ts
+++ b/src/admin/pages/site/panels/AgentPanel/toolCallDisplay.ts
@@ -39,7 +39,11 @@ export interface ToolCallDisplay {
  * and the current provider names (`site_set_color_tokens`, `site_insert_html`,
  * `content_create_document`) resolve to the same canonical key.
  */
-export function getToolCallDisplay(actionType: string, params: unknown): ToolCallDisplay {
+export function getToolCallDisplay(
+  actionType: string,
+  params: unknown,
+  displayLabel?: string,
+): ToolCallDisplay {
   const toolName = normalizeToolName(actionType)
   const p = asRecord(params)
 
@@ -60,30 +64,30 @@ export function getToolCallDisplay(actionType: string, params: unknown): ToolCal
     case 'insert_html':
       return display('Inserting HTML', targetDetail('inside', p.parentId), 'code', 'write')
     case 'get_node_html':
-      return display('Reading node HTML', nodeDetail(p.nodeId), 'node', 'read')
+      return display('Reading node HTML', nodeDetail(p.nodeId, displayLabel), 'node', 'read')
     case 'read_document':
       return display('Reading document', documentDetail(p.document), 'document', 'read')
     case 'open_document':
       return display('Opening document', documentDetail(p.document), 'open', 'read')
     case 'replace_node_html':
-      return display('Replacing node HTML', nodeDetail(p.nodeId), 'code', 'write')
+      return display('Replacing node HTML', nodeDetail(p.nodeId, displayLabel), 'code', 'write')
     case 'delete_node':
-      return display('Deleting node', nodeDetail(p.nodeId), 'delete', 'danger')
+      return display('Deleting node', nodeDetail(p.nodeId, displayLabel), 'delete', 'danger')
     case 'update_node_props':
-      return display('Updating node props', nodeBreakpointDetail(p.nodeId, p.breakpointId), 'edit', 'write')
+      return display('Updating node props', nodeBreakpointDetail(p.nodeId, p.breakpointId, displayLabel), 'edit', 'write')
     case 'move_node':
       return display('Moving node', targetDetail('to', p.newParentId), 'move', 'write')
     case 'rename_node':
       return display('Renaming node', optionalString(p.label), 'edit', 'write')
     case 'duplicate_node':
-      return display('Duplicating node', duplicateNodeDetail(p.nodeId, p.count), 'copy', 'write')
+      return display('Duplicating node', duplicateNodeDetail(p.nodeId, p.count, displayLabel), 'copy', 'write')
 
     case 'apply_css':
       return cssOperationDisplay(p)
     case 'assign_class':
-      return display('Assigning class', classDetail(p.classId, p.nodeId), 'class', 'style')
+      return display('Assigning class', classDetail(p.classId, p.nodeId, displayLabel), 'class', 'style')
     case 'remove_class':
-      return display('Removing class', classDetail(p.classId, p.nodeId), 'class', 'danger')
+      return display('Removing class', classDetail(p.classId, p.nodeId, displayLabel), 'class', 'danger')
 
     case 'list_code_assets':
       return display('Listing code assets', titleCase(optionalString(p.type)), 'code', 'read')
@@ -118,7 +122,7 @@ export function getToolCallDisplay(actionType: string, params: unknown): ToolCal
     case 'set_spacing_scale':
       return display('Updating spacing scale', scaleDetail(p.groupId, p.namingConvention), 'tokens', 'style')
     case 'render_snapshot':
-      return display('Capturing preview', previewDetail(p), 'preview', 'read')
+      return display('Capturing preview', previewDetail(p, displayLabel), 'preview', 'read')
 
     case 'list_collections':
       return display('Listing collections', '', 'collection', 'read')
@@ -208,9 +212,11 @@ function shortId(value: unknown): string {
   return text.length > 12 ? `${text.slice(0, 12)}...` : text
 }
 
-function nodeDetail(nodeId: unknown): string {
-  const id = shortId(nodeId)
-  return id ? `node ${id}` : ''
+function nodeDetail(nodeId: unknown, cachedLabel?: string): string {
+  if (cachedLabel) return cachedLabel
+  const id = optionalString(nodeId)
+  if (!id) return ''
+  return shortId(nodeId)
 }
 
 function pageDetail(pageId: unknown): string {
@@ -223,23 +229,35 @@ function targetDetail(prefix: string, idValue: unknown): string {
   return id ? `${prefix} ${id}` : ''
 }
 
-function nodeBreakpointDetail(nodeId: unknown, breakpointId: unknown): string {
-  const node = nodeDetail(nodeId)
+function nodeBreakpointDetail(
+  nodeId: unknown,
+  breakpointId: unknown,
+  cachedLabel?: string,
+): string {
+  const node = nodeDetail(nodeId, cachedLabel)
   const breakpoint = optionalString(breakpointId)
   if (!node) return breakpoint
   return breakpoint ? `${node} at ${breakpoint}` : node
 }
 
-function duplicateNodeDetail(nodeId: unknown, count: unknown): string {
-  const node = nodeDetail(nodeId)
+function duplicateNodeDetail(
+  nodeId: unknown,
+  count: unknown,
+  cachedLabel?: string,
+): string {
+  const node = nodeDetail(nodeId, cachedLabel)
   const copies = typeof count === 'number' && count > 1 ? `${count} copies` : ''
   if (!node) return copies
   return copies ? `${node}, ${copies}` : node
 }
 
-function classDetail(classId: unknown, nodeId: unknown): string {
+function classDetail(
+  classId: unknown,
+  nodeId: unknown,
+  cachedLabel?: string,
+): string {
   const className = optionalString(classId)
-  const node = nodeDetail(nodeId)
+  const node = nodeDetail(nodeId, cachedLabel)
   if (!className) return node
   return node ? `${className} on ${node}` : className
 }
@@ -307,8 +325,11 @@ function scaleDetail(groupId: unknown, namingConvention: unknown): string {
   return optionalString(groupId) || optionalString(namingConvention)
 }
 
-function previewDetail(params: Record<string, unknown>): string {
-  const node = nodeDetail(params.nodeId)
+function previewDetail(
+  params: Record<string, unknown>,
+  cachedLabel?: string,
+): string {
+  const node = nodeDetail(params.nodeId, cachedLabel)
   const breakpoint = optionalString(params.breakpointId)
   if (!node) return breakpoint
   return breakpoint ? `${node} at ${breakpoint}` : node
diff --git a/src/admin/pages/site/panels/DomPanel/LayerNodeContextMenu.tsx b/src/admin/pages/site/panels/DomPanel/LayerNodeContextMenu.tsx
index c7d745f27..c97fbf971 100644
--- a/src/admin/pages/site/panels/DomPanel/LayerNodeContextMenu.tsx
+++ b/src/admin/pages/site/panels/DomPanel/LayerNodeContextMenu.tsx
@@ -48,6 +48,7 @@ import { useInsertModule } from '@site/hooks/useInsertModule'
 import { resolveInsertLocation } from '@site/store/insertLocation'
 import { ModulePicker } from '@site/module-picker'
 import { canComponentizeNode } from '@site/componentization'
+import { getMentionLabelForNode } from '@site/agent/mentionLabel'
 import { useConfirmDelete } from '@admin/shared/dialogs/ConfirmDeleteDialog'
 import type { AnyModuleDefinition } from '@core/module-engine'
 import { PenSquareSolidIcon } from 'pixel-art-icons/icons/pen-square-solid'
@@ -64,6 +65,7 @@ import { CodeIcon } from 'pixel-art-icons/icons/code'
 import { BoxSolidIcon } from 'pixel-art-icons/icons/box-solid'
 import { LayoutSolidIcon } from 'pixel-art-icons/icons/layout-solid'
 import { EyeSolidIcon } from 'pixel-art-icons/icons/eye-solid'
+import { SparklesSolidIcon } from 'pixel-art-icons/icons/sparkles-solid'
 import { isNarrowEditorChromeViewport } from '@site/layout/responsiveChrome'
 import styles from './LayerNodeContextMenu.module.css'
 
@@ -318,6 +320,19 @@ export function LayerNodeContextMenu({
     onClose()
   }
 
+  const dispatchAddToAiChat = () => {
+    if (targetIds.length === 0) return
+    const state = useEditorStore.getState()
+    const site = state.site
+    const page = site?.pages.find((p) => p.id === state.activePageId)
+    const mentions = targetIds.map((id) => {
+      const { label } = getMentionLabelForNode(id, page?.nodes[id], site)
+      return { nodeId: id, label }
+    })
+    state.stageAgentMentions(mentions)
+    onClose()
+  }
+
   // Selection-count chip in the menu header (multi only). Lives as a
   // disabled menuitem-equivalent label so screen readers can read "3 layers
   // selected" before announcing the action items.
@@ -387,6 +402,11 @@ export function LayerNodeContextMenu({
             </ContextMenuItem>
           )}
 
+          <ContextMenuItem onClick={dispatchAddToAiChat}>
+            <span aria-hidden="true"><SparklesSolidIcon size={13} /></span>
+            Add to AI chat
+          </ContextMenuItem>
+
           <ContextMenuSeparator />
 
           <ContextMenuItem onClick={dispatchCopy}>