fix: render selection indicators as removable context chips (#16)

Align with upstream Claudian context pills: editor/browser/canvas selection indicators become left-aligned chips (icon + label + remove button) instead of right-aligned plain text whose in-flow row pushed the input placeholder down; the remove button clears the selection context.

Author: luoxuanzao

src/features/chat/controllers/browser-selection-controller.ts

@@ -2,6 +2,7 @@ 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';
 
 const BROWSER_SELECTION_POLL_INTERVAL = 250;
 
@@ -31,6 +32,7 @@ export class BrowserSelectionController {
     this.inputEl = inputEl;
     this.contextRowEl = contextRowEl;
     this.onVisibilityChange = onVisibilityChange ?? null;
+    bindSelectionChipRemove(this.indicatorEl, () => this.clear());
   }
 
   start(): void {
@@ -248,12 +250,12 @@ export class BrowserSelectionController {
     if (this.storedSelection) {
       const lineCount = this.storedSelection.selectedText.split(/\r?\n/).length;
       const lineLabel = lineCount === 1 ? 'line' : 'lines';
-      this.indicatorEl.textContent = `${lineCount} ${lineLabel} selected`;
+      setSelectionChipLabel(this.indicatorEl, `${lineCount} ${lineLabel} selected`);
       this.indicatorEl.setAttribute('title', this.buildIndicatorTitle());
       this.indicatorEl.removeClass('qoderian-hidden');
     } else {
       this.indicatorEl.addClass('qoderian-hidden');
-      this.indicatorEl.textContent = '';
+      setSelectionChipLabel(this.indicatorEl, '');
       this.indicatorEl.removeAttribute('title');
     }
     this.updateContextRowVisibility();

src/features/chat/controllers/canvas-selection-controller.ts

@@ -2,6 +2,7 @@ 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';
 
 const CANVAS_POLL_INTERVAL = 250;
 
@@ -37,6 +38,7 @@ export class CanvasSelectionController {
     this.inputEl = inputEl;
     this.contextRowEl = contextRowEl;
     this.onVisibilityChange = onVisibilityChange ?? null;
+    bindSelectionChipRemove(this.indicatorEl, () => this.clear());
   }
 
   start(): void {
@@ -107,12 +109,13 @@ export class CanvasSelectionController {
 
     if (this.storedSelection) {
       const { nodeIds } = this.storedSelection;
-      this.indicatorEl.textContent = nodeIds.length === 1
+      setSelectionChipLabel(this.indicatorEl, nodeIds.length === 1
         ? `node "${nodeIds[0]}" selected`
-        : `${nodeIds.length} nodes selected`;
+        : `${nodeIds.length} nodes selected`);
       this.indicatorEl.removeClass('qoderian-hidden');
     } else {
       this.indicatorEl.addClass('qoderian-hidden');
+      setSelectionChipLabel(this.indicatorEl, '');
     }
     this.updateContextRowVisibility();
   }

src/features/chat/controllers/selection-chip.ts

@@ -0,0 +1,40 @@
+import { setIcon } from 'obsidian';
+
+/** Chip part classes shared with file chips so all context pills look identical. */
+export const SELECTION_CHIP_ICON_CLASS = 'qoderian-file-chip-icon';
+export const SELECTION_CHIP_LABEL_CLASS = 'qoderian-file-chip-name';
+export const SELECTION_CHIP_REMOVE_CLASS = 'qoderian-file-chip-remove';
+
+/**
+ * Builds a context chip (icon + label + remove button) for selection indicators,
+ * matching the file chip pill design.
+ */
+export function createSelectionChip(
+  parentEl: HTMLElement,
+  cls: string,
+  icon: string
+): HTMLElement {
+  const chipEl = parentEl.createDiv({ cls: `${cls} qoderian-hidden` });
+  const iconEl = chipEl.createSpan({ cls: SELECTION_CHIP_ICON_CLASS });
+  setIcon(iconEl, icon);
+  chipEl.createSpan({ cls: SELECTION_CHIP_LABEL_CLASS });
+  const removeEl = chipEl.createSpan({ cls: SELECTION_CHIP_REMOVE_CLASS });
+  removeEl.setText('\u00D7');
+  removeEl.setAttribute('aria-label', 'Remove');
+  return chipEl;
+}
+
+/** Writes the chip label; falls back to the root element when no label span exists. */
+export function setSelectionChipLabel(chipEl: HTMLElement, text: string): void {
+  const labelEl = chipEl.querySelector<HTMLElement>(`.${SELECTION_CHIP_LABEL_CLASS}`);
+  (labelEl ?? chipEl).setText(text);
+}
+
+/** Wires the chip's remove button, when present, to the given callback. */
+export function bindSelectionChipRemove(chipEl: HTMLElement, onRemove: () => void): void {
+  const removeEl = chipEl.querySelector<HTMLElement>(`.${SELECTION_CHIP_REMOVE_CLASS}`);
+  removeEl?.addEventListener('click', (event) => {
+    event.stopPropagation();
+    onRemove();
+  });
+}

src/features/chat/controllers/selection-controller.ts

@@ -5,6 +5,7 @@ import { type EditorSelectionContext, getEditorView } from '../../../core/editor
 import { hideSelectionHighlight, showSelectionHighlight } from '../../../shared/components/selection-highlight';
 import type { StoredSelection } from '../state/types';
 import { updateContextRowHasContent } from './context-row-visibility';
+import { bindSelectionChipRemove, setSelectionChipLabel } from './selection-chip';
 
 const SELECTION_POLL_INTERVAL = 250;
 const INPUT_HANDOFF_GRACE_MS = 1500;
@@ -51,6 +52,7 @@ export class SelectionController {
     this.focusScopeEls = this.normalizeFocusScopes(focusScopeEl);
     this.contextRowEl = contextRowEl;
     this.onVisibilityChange = onVisibilityChange ?? null;
+    bindSelectionChipRemove(this.indicatorEl, () => this.clear());
   }
 
   start(): void {
@@ -384,10 +386,11 @@ export class SelectionController {
 
     if (this.storedSelection) {
       const lineText = this.storedSelection.lineCount === 1 ? 'line' : 'lines';
-      this.indicatorEl.textContent = `${this.storedSelection.lineCount} ${lineText} selected`;
+      setSelectionChipLabel(this.indicatorEl, `${this.storedSelection.lineCount} ${lineText} selected`);
       this.indicatorEl.removeClass('qoderian-hidden');
     } else {
       this.indicatorEl.addClass('qoderian-hidden');
+      setSelectionChipLabel(this.indicatorEl, '');
     }
     this.updateContextRowVisibility();
   }

src/features/chat/tabs/tab.ts

@@ -18,6 +18,7 @@ import { CanvasSelectionController } from '../controllers/canvas-selection-contr
 import { ConversationController } from '../controllers/conversation-controller';
 import { InputController } from '../controllers/input-controller';
 import { NavigationController } from '../controllers/navigation-controller';
+import { createSelectionChip } from '../controllers/selection-chip';
 import { SelectionController } from '../controllers/selection-controller';
 import { StreamController } from '../controllers/stream-controller';
 import { MessageRenderer } from '../rendering/message-renderer';
@@ -494,12 +495,24 @@ export function initializeTabUI(
   // Initialize context managers (file/image)
   initializeContextManagers(tab, plugin);
 
-  // Selection indicator - add to contextRowEl
-  dom.selectionIndicatorEl = dom.contextRowEl.createDiv({ cls: 'qoderian-selection-indicator qoderian-hidden' });
+  // Selection chips - add to contextRowEl (pill style: icon + label + remove)
+  dom.selectionIndicatorEl = createSelectionChip(
+    dom.contextRowEl,
+    'qoderian-selection-indicator',
+    'text-select'
+  );
 
-  dom.browserIndicatorEl = dom.contextRowEl.createDiv({ cls: 'qoderian-browser-selection-indicator qoderian-hidden' });
+  dom.browserIndicatorEl = createSelectionChip(
+    dom.contextRowEl,
+    'qoderian-browser-selection-indicator',
+    'globe'
+  );
 
-  dom.canvasIndicatorEl = dom.contextRowEl.createDiv({ cls: 'qoderian-canvas-indicator qoderian-hidden' });
+  dom.canvasIndicatorEl = createSelectionChip(
+    dom.contextRowEl,
+    'qoderian-canvas-indicator',
+    'network'
+  );
 
   const catalogInfo = options.getQoderCatalogConfig?.() ?? null;
   initializeSlashCommands(

src/style/components/input.css

@@ -29,7 +29,7 @@
   box-shadow: var(--qoderian-input-wrapper-box-shadow);
 }
 
-/* Context row (file chip start, selection indicator end) - inside input wrapper at top */
+/* Context row (context chips: files, images, selections) - inside input wrapper at top */
 /* Collapsed by default; expanded via .has-content class; textarea fills remaining space */
 .qoderian-context-row {
   display: none;
@@ -97,27 +97,29 @@
   height: 16.8px;
 }
 
-/* Selection indicator (shown when text is selected in editor) */
-/* Match file chip height (24px): chip has 16px remove button + 6px padding + 2px border */
-/* Indicator: 12px text + 10px padding (5+5) + 2px border = 24px */
+/* Selection chips (editor / browser / canvas selection context) */
+/* Pill-styled like file chips: icon + label + remove button, left aligned in context row */
 .qoderian-selection-indicator,
 .qoderian-browser-selection-indicator,
 .qoderian-canvas-indicator {
-  color: #7abaff;
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  padding: 3px 6px 3px 8px;
+  background: var(--background-primary);
+  border: 1px solid var(--background-modifier-border);
+  border-radius: 12px;
   font-size: 12px;
   line-height: 1;
-  opacity: 0.9;
-  pointer-events: none;
-  white-space: nowrap;
-  padding: 5px 6px;
-  border: 1px solid transparent;
-  border-radius: 4px;
-  margin-inline-start: auto;
+  max-width: min(200px, 100%);
+  color: var(--text-normal);
   flex-shrink: 0;
-  order: 4;
-  max-width: min(100%, clamp(220px, 64vw, 560px));
-  overflow: hidden;
-  text-overflow: ellipsis;
+}
+
+.qoderian-selection-indicator:hover,
+.qoderian-browser-selection-indicator:hover,
+.qoderian-canvas-indicator:hover {
+  background: var(--background-modifier-hover);
 }
 
 .qoderian-input-wrapper textarea.qoderian-input {

tests/unit/features/chat/controllers/selection-chip.test.ts

@@ -0,0 +1,61 @@
+import { createMockEl } from '@test/helpers/mock-element';
+
+import {
+  bindSelectionChipRemove,
+  createSelectionChip,
+  SELECTION_CHIP_LABEL_CLASS,
+  SELECTION_CHIP_REMOVE_CLASS,
+  setSelectionChipLabel,
+} from '@/features/chat/controllers/selection-chip';
+
+describe('selection-chip', () => {
+  it('builds a hidden chip skeleton with icon, label and remove button', () => {
+    const parent = createMockEl();
+
+    const chip = createSelectionChip(parent as any, 'qoderian-selection-indicator', 'text-select');
+
+    expect(chip.hasClass('qoderian-selection-indicator')).toBe(true);
+    expect(chip.hasClass('qoderian-hidden')).toBe(true);
+    expect(chip.querySelector('.qoderian-file-chip-icon')).not.toBeNull();
+    expect(chip.querySelector(`.${SELECTION_CHIP_LABEL_CLASS}`)).not.toBeNull();
+    const removeEl = chip.querySelector(`.${SELECTION_CHIP_REMOVE_CLASS}`);
+    expect(removeEl).not.toBeNull();
+    expect(removeEl!.textContent).toBe('×');
+    expect(removeEl!.getAttribute('aria-label')).toBe('Remove');
+  });
+
+  it('writes the label into the label span, not the chip root', () => {
+    const chip = createSelectionChip(createMockEl() as any, 'qoderian-selection-indicator', 'text-select');
+
+    setSelectionChipLabel(chip as any, '8 lines selected');
+
+    const label = chip.querySelector(`.${SELECTION_CHIP_LABEL_CLASS}`)!;
+    expect(label.textContent).toBe('8 lines selected');
+    expect(chip.textContent).toBe('');
+  });
+
+  it('falls back to the root element when no label span exists', () => {
+    const bare = createMockEl();
+
+    setSelectionChipLabel(bare as any, '2 lines selected');
+
+    expect(bare.textContent).toBe('2 lines selected');
+  });
+
+  it('invokes onRemove when the remove button is clicked', () => {
+    const chip = createSelectionChip(createMockEl() as any, 'qoderian-selection-indicator', 'text-select');
+    const onRemove = jest.fn();
+    bindSelectionChipRemove(chip as any, onRemove);
+
+    const removeEl = chip.querySelector(`.${SELECTION_CHIP_REMOVE_CLASS}`) as any;
+    removeEl.click();
+
+    expect(onRemove).toHaveBeenCalledTimes(1);
+  });
+
+  it('is a no-op when the chip has no remove button', () => {
+    const bare = createMockEl();
+
+    expect(() => bindSelectionChipRemove(bare as any, jest.fn())).not.toThrow();
+  });
+});

tests/unit/features/chat/controllers/selection-controller.test.ts

@@ -1,5 +1,6 @@
 import { createMockEl } from '@test/helpers/mock-element';
 
+import { createSelectionChip } from '@/features/chat/controllers/selection-chip';
 import { SelectionController } from '@/features/chat/controllers/selection-controller';
 import { hideSelectionHighlight, showSelectionHighlight } from '@/shared/components/selection-highlight';
 
@@ -169,6 +170,24 @@ describe('SelectionController', () => {
     expect(showSelectionHighlight).toHaveBeenCalledWith(editorView, 0, 4);
   });
 
+  it('clears the selection when the chip remove button is clicked', () => {
+    const chipEl = createSelectionChip(contextRowEl, 'qoderian-selection-indicator', 'text-select');
+    const chipController = new SelectionController(app, chipEl as any, inputEl, contextRowEl, undefined, focusScopeEl);
+    chipController.start();
+    jest.advanceTimersByTime(250);
+
+    expect(chipController.hasSelection()).toBe(true);
+    const labelEl = chipEl.querySelector('.qoderian-file-chip-name')!;
+    expect(labelEl.textContent).toBe('1 line selected');
+
+    (chipEl.querySelector('.qoderian-file-chip-remove') as any).click();
+
+    expect(chipController.hasSelection()).toBe(false);
+    expect(chipEl.hasClass('qoderian-hidden')).toBe(true);
+    expect(labelEl.textContent).toBe('');
+    chipController.stop();
+  });
+
   it('clears selection immediately when deselected without input handoff intent', () => {
     controller.start();
     jest.advanceTimersByTime(250);