@@ -13,6 +13,11 @@ version with its date and start a fresh empty `[Unreleased]` above it.
 
 ### Changed
 
+- Editor, browser, and canvas selections now appear as inline chips inside the
+  composer text (matching `@file` mentions) instead of pills on the row above
+  the input. The selection is still sent as its `<editor_selection>`,
+  `<browser_selection>`, or `<canvas_selection>` snapshot, and the chip's token
+  now travels in the message text too.
 - The context usage meter beside the composer is now a complete ring that fills
   clockwise from the top, replacing the 240° arc. The percentage, the hover
   tooltip, and the pale-red warning state above 80% are unchanged.
@@ -24,6 +29,8 @@ version with its date and start a fresh empty `[Unreleased]` above it.
 
 ### Removed
 
+- The selection pills above the composer are gone; that row now only shows
+  image previews.
 - The current-note chip above the composer is gone. Use the "Excluded tags"
   setting to keep a note out of context.
 
 
@@ -1,42 +1,42 @@
 import type { App, ItemView } from 'obsidian';
 
 import type { BrowserSelectionContext } from '../../../core/context/types';
-import { updateContextRowHasContent } from './context-row-visibility';
-import { bindSelectionChipRemove, setSelectionChipLabel } from './selection-chip';
+import {
+  appendSelectionToken,
+  buildBrowserSelectionToken,
+  removeSelectionToken,
+  type SelectionTokenReference,
+  type SelectionTokenSink,
+  truncateLabel,
+} from './selection-token';
 
 const BROWSER_SELECTION_POLL_INTERVAL = 250;
+const ORPHAN_TOKEN_PATTERN = /@browser:\S+/;
 
 type BrowserLikeWebview = HTMLElement & {
   executeJavaScript?: (code: string, userGesture?: boolean) => Promise<unknown>;
 };
 
 export class BrowserSelectionController {
   private app: App;
-  private indicatorEl: HTMLElement;
-  private inputEl: HTMLElement;
-  private contextRowEl: HTMLElement;
-  private onVisibilityChange: (() => void) | null;
+  private inputEl: HTMLTextAreaElement;
+  private tokenSink: SelectionTokenSink;
   private storedSelection: BrowserSelectionContext | null = null;
+  private storedToken: string | null = null;
+  private syncingToken = false;
   private pollInterval: number | null = null;
   private pollInFlight = false;
+  private readonly handleInput = (): void => this.reconcileToken();
 
-  constructor(
-    app: App,
-    indicatorEl: HTMLElement,
-    inputEl: HTMLElement,
-    contextRowEl: HTMLElement,
-    onVisibilityChange?: () => void
-  ) {
+  constructor(app: App, inputEl: HTMLTextAreaElement, tokenSink: SelectionTokenSink) {
     this.app = app;
-    this.indicatorEl = indicatorEl;
     this.inputEl = inputEl;
-    this.contextRowEl = contextRowEl;
-    this.onVisibilityChange = onVisibilityChange ?? null;
-    bindSelectionChipRemove(this.indicatorEl, () => this.clear());
+    this.tokenSink = tokenSink;
   }
 
   start(): void {
     if (this.pollInterval) return;
+    this.inputEl.addEventListener('input', this.handleInput);
     this.pollInterval = window.setInterval(() => {
       void this.poll();
     }, BROWSER_SELECTION_POLL_INTERVAL);
@@ -47,6 +47,7 @@ export class BrowserSelectionController {
       window.clearInterval(this.pollInterval);
       this.pollInterval = null;
     }
+    this.inputEl.removeEventListener('input', this.handleInput);
     this.clear();
   }
 
@@ -65,7 +66,7 @@ export class BrowserSelectionController {
         const nextContext = this.buildContext(browserView.view, browserView.viewType, browserView.containerEl, selectedText);
         if (!this.isSameSelection(nextContext, this.storedSelection)) {
           this.storedSelection = nextContext;
-          this.updateIndicator();
+          this.applyToken(this.buildToken(nextContext), nextContext);
         }
       } else {
         this.clearWhenInputIsNotFocused();
@@ -236,50 +237,75 @@ export class BrowserSelectionController {
       && left.url === right.url;
   }
 
-  private clearWhenInputIsNotFocused(): void {
-    if (this.inputEl.ownerDocument.activeElement === this.inputEl) return;
-    if (this.storedSelection) {
-      this.storedSelection = null;
-      this.updateIndicator();
-    }
+  private displayTitle(context: BrowserSelectionContext): string {
+    return context.title ?? context.url ?? context.source;
   }
 
-  private updateIndicator(): void {
-    if (!this.indicatorEl) return;
+  private buildToken(context: BrowserSelectionContext): string {
+    return buildBrowserSelectionToken(this.displayTitle(context));
+  }
 
-    if (this.storedSelection) {
-      const lineCount = this.storedSelection.selectedText.split(/\r?\n/).length;
-      const lineLabel = lineCount === 1 ? 'line' : 'lines';
-      setSelectionChipLabel(this.indicatorEl, `${lineCount} ${lineLabel} selected`);
-      this.indicatorEl.setAttribute('title', this.buildIndicatorTitle());
-      this.indicatorEl.removeClass('qoderian-hidden');
-    } else {
-      this.indicatorEl.addClass('qoderian-hidden');
-      setSelectionChipLabel(this.indicatorEl, '');
-      this.indicatorEl.removeAttribute('title');
+  private buildReference(token: string, context: BrowserSelectionContext): SelectionTokenReference {
+    return {
+      token,
+      path: context.url ?? context.source,
+      kind: 'browser-selection',
+      label: truncateLabel(this.displayTitle(context)),
+      icon: 'globe',
+    };
+  }
+
+  private applyToken(nextToken: string | null, context?: BrowserSelectionContext): void {
+    if (nextToken === this.storedToken) return;
+
+    this.syncingToken = true;
+    try {
+      const previous = this.storedToken;
+      this.storedToken = nextToken;
+      if (previous) {
+        removeSelectionToken(this.inputEl, previous);
+        this.tokenSink.unregister(previous);
+      }
+      if (nextToken && context) {
+        appendSelectionToken(this.inputEl, nextToken);
+        this.tokenSink.register(this.buildReference(nextToken, context));
+      }
+    } finally {
+      this.syncingToken = false;
     }
-    this.updateContextRowVisibility();
   }
 
-  private buildIndicatorTitle(): string {
-    if (!this.storedSelection) return '';
+  private reconcileToken(): void {
+    if (this.syncingToken) return;
 
-    const charCount = this.storedSelection.selectedText.length;
-    const charLabel = charCount === 1 ? 'char' : 'chars';
-    const lines = [`${charCount} ${charLabel} selected`, `source=${this.storedSelection.source}`];
-    if (this.storedSelection.title) {
-      lines.push(`title=${this.storedSelection.title}`);
+    const value = this.inputEl.value;
+    if (this.storedToken) {
+      if (!value.includes(this.storedToken)) {
+        const stale = this.storedToken;
+        this.storedToken = null;
+        this.storedSelection = null;
+        this.tokenSink.unregister(stale);
+      }
+      return;
     }
-    if (this.storedSelection.url) {
-      lines.push(this.storedSelection.url);
+
+    const orphan = value.match(ORPHAN_TOKEN_PATTERN)?.[0];
+    if (orphan) {
+      this.syncingToken = true;
+      try {
+        removeSelectionToken(this.inputEl, orphan);
+      } finally {
+        this.syncingToken = false;
+      }
     }
-    return lines.join('\n');
   }
 
-  updateContextRowVisibility(): void {
-    if (!this.contextRowEl) return;
-    updateContextRowHasContent(this.contextRowEl);
-    this.onVisibilityChange?.();
+  private clearWhenInputIsNotFocused(): void {
+    if (this.inputEl.ownerDocument.activeElement === this.inputEl) return;
+    if (this.storedSelection) {
+      this.storedSelection = null;
+      this.applyToken(null);
+    }
   }
 
   getContext(): BrowserSelectionContext | null {
@@ -292,6 +318,6 @@ export class BrowserSelectionController {
 
   clear(): void {
     this.storedSelection = null;
-    this.updateIndicator();
+    this.applyToken(null);
   }
 }
@@ -1,10 +1,18 @@
 import type { App, ItemView } from 'obsidian';
 
 import type { CanvasSelectionContext } from '../../../core/context/types';
-import { updateContextRowHasContent } from './context-row-visibility';
-import { bindSelectionChipRemove, setSelectionChipLabel } from './selection-chip';
+import {
+  appendSelectionToken,
+  basename,
+  buildCanvasSelectionToken,
+  removeSelectionToken,
+  type SelectionTokenReference,
+  type SelectionTokenSink,
+  truncateLabel,
+} from './selection-token';
 
 const CANVAS_POLL_INTERVAL = 250;
+const ORPHAN_TOKEN_PATTERN = /@canvas:\S+/;
 
 type CanvasSelectionNode = { id?: unknown };
 
@@ -19,30 +27,23 @@ type CanvasViewLike = ItemView & {
 
 export class CanvasSelectionController {
   private app: App;
-  private indicatorEl: HTMLElement;
-  private inputEl: HTMLElement;
-  private contextRowEl: HTMLElement;
-  private onVisibilityChange: (() => void) | null;
+  private inputEl: HTMLTextAreaElement;
+  private tokenSink: SelectionTokenSink;
   private storedSelection: CanvasSelectionContext | null = null;
+  private storedToken: string | null = null;
+  private syncingToken = false;
   private pollInterval: number | null = null;
+  private readonly handleInput = (): void => this.reconcileToken();
 
-  constructor(
-    app: App,
-    indicatorEl: HTMLElement,
-    inputEl: HTMLElement,
-    contextRowEl: HTMLElement,
-    onVisibilityChange?: () => void
-  ) {
+  constructor(app: App, inputEl: HTMLTextAreaElement, tokenSink: SelectionTokenSink) {
     this.app = app;
-    this.indicatorEl = indicatorEl;
     this.inputEl = inputEl;
-    this.contextRowEl = contextRowEl;
-    this.onVisibilityChange = onVisibilityChange ?? null;
-    bindSelectionChipRemove(this.indicatorEl, () => this.clear());
+    this.tokenSink = tokenSink;
   }
 
   start(): void {
     if (this.pollInterval) return;
+    this.inputEl.addEventListener('input', this.handleInput);
     this.pollInterval = window.setInterval(() => this.poll(), CANVAS_POLL_INTERVAL);
   }
 
@@ -51,6 +52,7 @@ export class CanvasSelectionController {
       window.clearInterval(this.pollInterval);
       this.pollInterval = null;
     }
+    this.inputEl.removeEventListener('input', this.handleInput);
     this.clear();
   }
 
@@ -77,12 +79,12 @@ export class CanvasSelectionController {
 
       if (!sameSelection) {
         this.storedSelection = { canvasPath, nodeIds };
-        this.updateIndicator();
+        this.applyToken(buildCanvasSelectionToken(canvasPath), canvasPath);
       }
     } else if (this.getActiveElement() !== this.inputEl) {
       if (this.storedSelection) {
         this.storedSelection = null;
-        this.updateIndicator();
+        this.applyToken(null);
       }
     }
   }
@@ -104,26 +106,59 @@ export class CanvasSelectionController {
     return leaf ? (leaf.view as CanvasViewLike) : null;
   }
 
-  private updateIndicator(): void {
-    if (!this.indicatorEl) return;
-
-    if (this.storedSelection) {
-      const { nodeIds } = this.storedSelection;
-      setSelectionChipLabel(this.indicatorEl, nodeIds.length === 1
-        ? `node "${nodeIds[0]}" selected`
-        : `${nodeIds.length} nodes selected`);
-      this.indicatorEl.removeClass('qoderian-hidden');
-    } else {
-      this.indicatorEl.addClass('qoderian-hidden');
-      setSelectionChipLabel(this.indicatorEl, '');
+  private buildReference(token: string, canvasPath: string): SelectionTokenReference {
+    return {
+      token,
+      path: canvasPath,
+      kind: 'canvas-selection',
+      label: truncateLabel(basename(canvasPath)),
+      icon: 'network',
+    };
+  }
+
+  private applyToken(nextToken: string | null, canvasPath?: string): void {
+    if (nextToken === this.storedToken) return;
+
+    this.syncingToken = true;
+    try {
+      const previous = this.storedToken;
+      this.storedToken = nextToken;
+      if (previous) {
+        removeSelectionToken(this.inputEl, previous);
+        this.tokenSink.unregister(previous);
+      }
+      if (nextToken && canvasPath) {
+        appendSelectionToken(this.inputEl, nextToken);
+        this.tokenSink.register(this.buildReference(nextToken, canvasPath));
+      }
+    } finally {
+      this.syncingToken = false;
     }
-    this.updateContextRowVisibility();
   }
 
-  updateContextRowVisibility(): void {
-    if (!this.contextRowEl) return;
-    updateContextRowHasContent(this.contextRowEl);
-    this.onVisibilityChange?.();
+  private reconcileToken(): void {
+    if (this.syncingToken) return;
+
+    const value = this.inputEl.value;
+    if (this.storedToken) {
+      if (!value.includes(this.storedToken)) {
+        const stale = this.storedToken;
+        this.storedToken = null;
+        this.storedSelection = null;
+        this.tokenSink.unregister(stale);
+      }
+      return;
+    }
+
+    const orphan = value.match(ORPHAN_TOKEN_PATTERN)?.[0];
+    if (orphan) {
+      this.syncingToken = true;
+      try {
+        removeSelectionToken(this.inputEl, orphan);
+      } finally {
+        this.syncingToken = false;
+      }
+    }
   }
 
   getContext(): CanvasSelectionContext | null {
@@ -140,6 +175,6 @@ export class CanvasSelectionController {
 
   clear(): void {
     this.storedSelection = null;
-    this.updateIndicator();
+    this.applyToken(null);
   }
 }