@mseep/claudian 2.0.25

package/src/features/chat/controllers/NavigationController.ts

@@ -0,0 +1,209 @@
+import type { KeyboardNavigationSettings } from '../../../core/types';
+import {
+  cancelScheduledAnimationFrame,
+  scheduleAnimationFrame,
+  type ScheduledAnimationFrame,
+} from '../../../utils/animationFrame';
+
+/** Scroll speed in pixels per frame (~60fps = 480px/sec). */
+const SCROLL_SPEED = 8;
+
+export interface NavigationControllerDeps {
+  getMessagesEl: () => HTMLElement;
+  getInputEl: () => HTMLTextAreaElement;
+  getSettings: () => KeyboardNavigationSettings;
+  isStreaming: () => boolean;
+  /** Returns true if a UI component (dropdown, modal, mode) should handle Escape instead. */
+  shouldSkipEscapeHandling?: () => boolean;
+}
+
+export class NavigationController {
+  private deps: NavigationControllerDeps;
+  private scrollDirection: 'up' | 'down' | null = null;
+  private animationFrame: ScheduledAnimationFrame | null = null;
+  private keyboardDocument: Document | null = null;
+  private initialized = false;
+  private disposed = false;
+
+  // Bound handlers for cleanup
+  private boundMessagesKeydown: (e: KeyboardEvent) => void;
+  private boundKeyup: (e: KeyboardEvent) => void;
+  private boundInputKeydown: (e: KeyboardEvent) => void;
+
+  constructor(deps: NavigationControllerDeps) {
+    this.deps = deps;
+    this.boundMessagesKeydown = (e) => this.handleMessagesKeydown(e);
+    this.boundKeyup = (e) => this.handleKeyup(e);
+    this.boundInputKeydown = (e) => this.handleInputKeydown(e);
+  }
+
+  initialize(): void {
+    if (this.initialized || this.disposed) return;
+
+    const messagesEl = this.deps.getMessagesEl();
+    const inputEl = this.deps.getInputEl();
+
+    // Guard against missing DOM elements
+    if (!messagesEl || !inputEl) return;
+
+    // Make messages panel focusable (focus style handled in CSS)
+    messagesEl.setAttribute('tabindex', '0');
+    messagesEl.addClass('claudian-messages-focusable');
+
+    // Attach event listeners
+    messagesEl.addEventListener('keydown', this.boundMessagesKeydown);
+    this.keyboardDocument = messagesEl.ownerDocument;
+    this.keyboardDocument.addEventListener('keyup', this.boundKeyup);
+
+    // Use capture phase to run before other handlers
+    inputEl.addEventListener('keydown', this.boundInputKeydown, { capture: true });
+
+    this.initialized = true;
+  }
+
+  /** Cleans up event listeners and animation frames. */
+  dispose(): void {
+    if (this.disposed) return;
+    this.disposed = true;
+
+    this.stopScrolling();
+
+    // Always clean up document listener first (most important for preventing leaks)
+    this.keyboardDocument?.removeEventListener('keyup', this.boundKeyup);
+    this.keyboardDocument = null;
+
+    // Element cleanup - may already be destroyed during view teardown
+    const messagesEl = this.deps.getMessagesEl();
+    messagesEl?.removeEventListener('keydown', this.boundMessagesKeydown);
+    messagesEl?.removeClass('claudian-messages-focusable');
+
+    const inputEl = this.deps.getInputEl();
+    inputEl?.removeEventListener('keydown', this.boundInputKeydown, { capture: true });
+  }
+
+  // ============================================
+  // Messages Panel Keyboard Handling
+  // ============================================
+
+  private handleMessagesKeydown(e: KeyboardEvent): void {
+    // Ignore if any modifier is held - allow system shortcuts (Ctrl+W, Cmd+W, etc.)
+    if (e.ctrlKey || e.metaKey || e.altKey || e.shiftKey) return;
+
+    const settings = this.deps.getSettings();
+    const key = e.key.toLowerCase();
+
+    // Scroll up
+    if (key === settings.scrollUpKey.toLowerCase()) {
+      e.preventDefault();
+      this.startScrolling('up');
+      return;
+    }
+
+    // Scroll down
+    if (key === settings.scrollDownKey.toLowerCase()) {
+      e.preventDefault();
+      this.startScrolling('down');
+      return;
+    }
+
+    // Focus input (vim 'i' for insert mode)
+    if (key === settings.focusInputKey.toLowerCase()) {
+      e.preventDefault();
+      this.deps.getInputEl().focus();
+      return;
+    }
+  }
+
+  private handleKeyup(e: KeyboardEvent): void {
+    const settings = this.deps.getSettings();
+    const key = e.key.toLowerCase();
+
+    // Stop scrolling when scroll key is released
+    if (
+      key === settings.scrollUpKey.toLowerCase() ||
+      key === settings.scrollDownKey.toLowerCase()
+    ) {
+      this.stopScrolling();
+    }
+  }
+
+  // ============================================
+  // Input Keyboard Handling (Escape)
+  // ============================================
+
+  private handleInputKeydown(e: KeyboardEvent): void {
+    if (e.key !== 'Escape') return;
+
+    // Ignore if composing (IME support for Chinese, Japanese, Korean, etc.)
+    if (e.isComposing) return;
+
+    // If streaming, let existing handler interrupt (don't interfere)
+    if (this.deps.isStreaming()) {
+      return;
+    }
+
+    if (this.deps.shouldSkipEscapeHandling?.()) {
+      return;
+    }
+
+    // Not streaming, no active UI: blur input and focus messages panel
+    e.preventDefault();
+    e.stopPropagation();
+    this.deps.getInputEl().blur();
+    this.deps.getMessagesEl().focus();
+  }
+
+  // ============================================
+  // Continuous Scrolling with requestAnimationFrame
+  // ============================================
+
+  private startScrolling(direction: 'up' | 'down'): void {
+    if (this.scrollDirection === direction) {
+      return; // Already scrolling in this direction
+    }
+
+    this.scrollDirection = direction;
+    this.scrollLoop();
+  }
+
+  private stopScrolling(): void {
+    this.scrollDirection = null;
+    if (this.animationFrame !== null) {
+      cancelScheduledAnimationFrame(this.animationFrame);
+      this.animationFrame = null;
+    }
+  }
+
+  private scrollLoop = (): void => {
+    if (this.scrollDirection === null || this.disposed) return;
+
+    const messagesEl = this.deps.getMessagesEl();
+    if (!messagesEl) {
+      // Element was destroyed - stop scrolling silently (expected on cleanup)
+      this.stopScrolling();
+      return;
+    }
+
+    const scrollAmount = this.scrollDirection === 'up' ? -SCROLL_SPEED : SCROLL_SPEED;
+    messagesEl.scrollTop += scrollAmount;
+
+    this.animationFrame = scheduleAnimationFrame(
+      this.scrollLoop,
+      messagesEl.ownerDocument.defaultView ?? null,
+    );
+  };
+
+  // ============================================
+  // Public API
+  // ============================================
+
+  /** Focuses the messages panel. */
+  focusMessages(): void {
+    this.deps.getMessagesEl().focus();
+  }
+
+  /** Focuses the input. */
+  focusInput(): void {
+    this.deps.getInputEl().focus();
+  }
+}

package/src/features/chat/controllers/SelectionController.ts

@@ -0,0 +1,430 @@
+import type { App } from 'obsidian';
+import { MarkdownView } from 'obsidian';
+
+import { hideSelectionHighlight, showSelectionHighlight } from '../../../shared/components/SelectionHighlight';
+import { type EditorSelectionContext, getEditorView } from '../../../utils/editor';
+import type { StoredSelection } from '../state/types';
+import { updateContextRowHasContent } from './contextRowVisibility';
+
+const SELECTION_POLL_INTERVAL = 250;
+const INPUT_HANDOFF_GRACE_MS = 1500;
+const HIGHLIGHT_KEY = 'claudian-selection';
+
+type CustomHighlightRegistry = {
+  delete: (name: string) => boolean;
+  set: (name: string, highlight: unknown) => void;
+};
+type CustomHighlightConstructor = new (...ranges: Range[]) => unknown;
+type FocusScopeInput = HTMLElement | HTMLElement[];
+
+export class SelectionController {
+  private app: App;
+  private indicatorEl: HTMLElement;
+  private inputEl: HTMLElement;
+  private focusScopeEls: HTMLElement[];
+  private contextRowEl: HTMLElement;
+  private onVisibilityChange: (() => void) | null;
+  private storedSelection: StoredSelection | null = null;
+  private inputHandoffGraceUntil: number | null = null;
+  private pollInterval: number | null = null;
+  private readonly focusScopePointerDownHandler = () => {
+    if (!this.storedSelection) return;
+    this.inputHandoffGraceUntil = Date.now() + INPUT_HANDOFF_GRACE_MS;
+  };
+  private readonly focusScopeFocusInHandler = (event: FocusEvent) => {
+    const relatedTarget = event.relatedTarget as Node | null;
+    if (relatedTarget && this.isNodeWithinFocusScopes(relatedTarget)) return;
+    this.showHighlight();
+  };
+
+  constructor(
+    app: App,
+    indicatorEl: HTMLElement,
+    inputEl: HTMLElement,
+    contextRowEl: HTMLElement,
+    onVisibilityChange?: () => void,
+    focusScopeEl?: FocusScopeInput
+  ) {
+    this.app = app;
+    this.indicatorEl = indicatorEl;
+    this.inputEl = inputEl;
+    this.focusScopeEls = this.normalizeFocusScopes(focusScopeEl);
+    this.contextRowEl = contextRowEl;
+    this.onVisibilityChange = onVisibilityChange ?? null;
+  }
+
+  start(): void {
+    if (this.pollInterval) return;
+    this.inputEl.addEventListener('pointerdown', this.focusScopePointerDownHandler);
+    for (const focusScopeEl of this.focusScopeEls) {
+      if (focusScopeEl !== this.inputEl) {
+        focusScopeEl.addEventListener('pointerdown', this.focusScopePointerDownHandler);
+      }
+      focusScopeEl.addEventListener('focusin', this.focusScopeFocusInHandler);
+    }
+    this.pollInterval = window.setInterval(() => this.poll(), SELECTION_POLL_INTERVAL);
+  }
+
+  stop(): void {
+    if (this.pollInterval) {
+      window.clearInterval(this.pollInterval);
+      this.pollInterval = null;
+    }
+    this.inputEl.removeEventListener('pointerdown', this.focusScopePointerDownHandler);
+    for (const focusScopeEl of this.focusScopeEls) {
+      if (focusScopeEl !== this.inputEl) {
+        focusScopeEl.removeEventListener('pointerdown', this.focusScopePointerDownHandler);
+      }
+      focusScopeEl.removeEventListener('focusin', this.focusScopeFocusInHandler);
+    }
+    this.clear();
+  }
+
+  dispose(): void {
+    this.stop();
+  }
+
+  // ============================================
+  // Selection Polling
+  // ============================================
+
+  private poll(): void {
+    const view = this.app.workspace.getActiveViewOfType(MarkdownView);
+    if (!view) {
+      // Keep the captured selection only while focus is transitioning into
+      // the chat UI; any other leaf switch should drop stale prompt context.
+      this.clearWhenMarkdownContextIsUnavailable();
+      return;
+    }
+
+    // Reading/preview mode has no usable CM6 selection — use DOM selection instead
+    if (view.getMode() === 'preview') {
+      this.pollReadingMode(view);
+      return;
+    }
+
+    const editor = view.editor;
+    const editorView = getEditorView(editor);
+    if (!editorView) {
+      this.clearWhenMarkdownContextIsUnavailable();
+      return;
+    }
+
+    const selectedText = editor.getSelection();
+
+    if (selectedText.trim()) {
+      this.inputHandoffGraceUntil = null;
+      const fromPos = editor.getCursor('from');
+      const toPos = editor.getCursor('to');
+      const from = editor.posToOffset(fromPos);
+      const to = editor.posToOffset(toPos);
+      const startLine = fromPos.line + 1; // 1-indexed for display
+
+      const notePath = view.file?.path || 'unknown';
+      const lineCount = selectedText.split(/\r?\n/).length;
+
+      const s = this.storedSelection;
+      const sameRange = s
+        && s.editorView === editorView
+        && s.from === from
+        && s.to === to
+        && s.notePath === notePath;
+      const unchanged = sameRange
+        && s.selectedText === selectedText
+        && s.lineCount === lineCount
+        && s.startLine === startLine;
+
+      if (!unchanged) {
+        if (s && !sameRange) {
+          this.clearHighlight();
+        }
+        this.storedSelection = { notePath, selectedText, lineCount, startLine, from, to, editorView };
+        this.updateIndicator();
+      }
+    } else {
+      this.handleDeselection();
+    }
+  }
+
+  private pollReadingMode(view: MarkdownView): void {
+    const containerEl = view.containerEl;
+    if (!containerEl) {
+      this.clearWhenMarkdownContextIsUnavailable();
+      return;
+    }
+
+    const selection = this.getDocumentSelection(containerEl.ownerDocument);
+    const selectedText = selection?.toString() ?? '';
+
+    if (selectedText.trim()) {
+      const anchorNode = selection?.anchorNode;
+      const focusNode = selection?.focusNode;
+      if (
+        (!anchorNode || !containerEl.contains(anchorNode))
+        && (!focusNode || !containerEl.contains(focusNode))
+      ) {
+        this.handleDeselection();
+        return;
+      }
+
+      this.inputHandoffGraceUntil = null;
+      const notePath = view.file?.path || 'unknown';
+      const lineCount = selectedText.split(/\r?\n/).length;
+      const domRanges = this.cloneDOMRanges(selection);
+
+      const unchanged = this.storedSelection
+        && this.storedSelection.editorView === undefined
+        && this.storedSelection.notePath === notePath
+        && this.storedSelection.selectedText === selectedText
+        && this.storedSelection.lineCount === lineCount
+        && this.rangeListsMatch(this.storedSelection.domRanges, domRanges);
+
+      if (!unchanged) {
+        this.clearHighlight();
+        this.storedSelection = { notePath, selectedText, lineCount, domRanges };
+        this.updateIndicator();
+      }
+    } else {
+      this.handleDeselection();
+    }
+  }
+
+  private get cssHighlights(): CustomHighlightRegistry | null {
+    const css = typeof CSS === 'undefined'
+      ? null
+      : CSS as unknown as { highlights?: CustomHighlightRegistry };
+    return css?.highlights ?? null;
+  }
+
+  private get highlightConstructor(): CustomHighlightConstructor | null {
+    const ownerWindow = this.inputEl.ownerDocument.defaultView as unknown as {
+      Highlight?: CustomHighlightConstructor;
+    } | null;
+    const rendererWindow = typeof window === 'undefined'
+      ? null
+      : window as unknown as { Highlight?: CustomHighlightConstructor };
+    return ownerWindow?.Highlight ?? rendererWindow?.Highlight ?? null;
+  }
+
+  private rangesMatch(a: Range, b: Range): boolean {
+    return a.startContainer === b.startContainer
+      && a.startOffset === b.startOffset
+      && a.endContainer === b.endContainer
+      && a.endOffset === b.endOffset;
+  }
+
+  private rangeListsMatch(left: Range[] | undefined, right: Range[]): boolean {
+    return left !== undefined
+      && left.length === right.length
+      && left.every((range, index) => this.rangesMatch(range, right[index]));
+  }
+
+  private selectionMatchesRanges(selection: Selection | null, ranges: Range[]): boolean {
+    if (!selection || selection.rangeCount !== ranges.length) return false;
+    for (let i = 0; i < ranges.length; i++) {
+      if (!this.rangesMatch(selection.getRangeAt(i), ranges[i])) {
+        return false;
+      }
+    }
+    return true;
+  }
+
+  private cloneDOMRanges(selection: Selection | null): Range[] {
+    if (!selection) return [];
+    const ranges: Range[] = [];
+    for (let i = 0; i < selection.rangeCount; i++) {
+      ranges.push(selection.getRangeAt(i).cloneRange());
+    }
+    return ranges;
+  }
+
+  private getDocumentSelection(ownerDocument?: Document | null): Selection | null {
+    if (ownerDocument && typeof ownerDocument.getSelection === 'function') {
+      return ownerDocument.getSelection();
+    }
+
+    const fallbackDocument = this.inputEl.ownerDocument;
+    if (fallbackDocument && typeof fallbackDocument.getSelection === 'function') {
+      return fallbackDocument.getSelection();
+    }
+
+    return null;
+  }
+
+  private getActiveElement(ownerDocument?: Document | null): Element | null {
+    return ownerDocument?.activeElement ?? this.inputEl.ownerDocument?.activeElement ?? null;
+  }
+
+  private normalizeFocusScopes(focusScopeEl?: FocusScopeInput): HTMLElement[] {
+    const focusScopes = Array.isArray(focusScopeEl)
+      ? focusScopeEl
+      : [focusScopeEl ?? this.inputEl];
+    return Array.from(new Set(focusScopes.filter(Boolean)));
+  }
+
+  private getFocusScopeOwnerDocument(): Document | null {
+    return this.focusScopeEls[0]?.ownerDocument ?? this.inputEl.ownerDocument ?? null;
+  }
+
+  private isNodeWithinFocusScopes(node: Node): boolean {
+    return this.focusScopeEls.some((focusScopeEl) =>
+      node === focusScopeEl || focusScopeEl.contains(node)
+    );
+  }
+
+  private isFocusWithinChatSidebar(): boolean {
+    const activeElement = this.getActiveElement(this.getFocusScopeOwnerDocument()) as Node | null;
+    return activeElement !== null && this.isNodeWithinFocusScopes(activeElement);
+  }
+
+  private isNativeEditorSelectionVisible(sel: StoredSelection): boolean {
+    if (!sel.editorView || sel.from === undefined || sel.to === undefined) {
+      return false;
+    }
+
+    const activeElement = this.getActiveElement(sel.editorView.dom.ownerDocument) as Node | null;
+    if (activeElement === null || !sel.editorView.dom.contains(activeElement)) {
+      return false;
+    }
+
+    const cmSel = sel.editorView.state.selection.main;
+    return cmSel.from === sel.from && cmSel.to === sel.to;
+  }
+
+  private isNativePreviewSelectionVisible(ranges: Range[]): boolean {
+    if (this.isFocusWithinChatSidebar()) {
+      return false;
+    }
+
+    return this.selectionMatchesRanges(this.getDocumentSelection(this.getFocusScopeOwnerDocument()), ranges);
+  }
+
+  private clearWhenMarkdownContextIsUnavailable(): void {
+    if (!this.storedSelection) return;
+    if (this.isFocusWithinChatSidebar()) {
+      this.inputHandoffGraceUntil = null;
+      return;
+    }
+    if (this.inputHandoffGraceUntil !== null && Date.now() <= this.inputHandoffGraceUntil) {
+      return;
+    }
+
+    this.inputHandoffGraceUntil = null;
+    this.clearHighlight();
+    this.storedSelection = null;
+    this.updateIndicator();
+  }
+
+  private handleDeselection(): void {
+    if (!this.storedSelection) return;
+    if (this.isFocusWithinChatSidebar()) {
+      this.inputHandoffGraceUntil = null;
+      return;
+    }
+
+    if (this.inputHandoffGraceUntil !== null && Date.now() <= this.inputHandoffGraceUntil) {
+      return;
+    }
+
+    this.inputHandoffGraceUntil = null;
+    this.clearHighlight();
+    this.storedSelection = null;
+    this.updateIndicator();
+  }
+
+  // ============================================
+  // Highlight Management
+  // ============================================
+
+  showHighlight(): void {
+    const sel = this.storedSelection;
+    if (!sel) return;
+
+    // Edit mode: prefer native CM6 unfocused selection (.cm-selectionBackground)
+    if (sel.editorView && sel.from !== undefined && sel.to !== undefined) {
+      if (this.isNativeEditorSelectionVisible(sel)) {
+        // Native is showing — clear any stale mock
+        hideSelectionHighlight(sel.editorView);
+        return;
+      }
+      // Native selection not visible (e.g., input has focus) — show mock
+      showSelectionHighlight(sel.editorView, sel.from, sel.to);
+      return;
+    }
+
+    // Preview mode: prefer native DOM selection (::selection)
+    if (sel.domRanges?.length) {
+      if (this.isNativePreviewSelectionVisible(sel.domRanges)) {
+        // Native is showing — clear any stale mock
+        this.cssHighlights?.delete(HIGHLIGHT_KEY);
+        return;
+      }
+      // Native selection not visible (e.g., input has focus) — show mock
+      const validRanges = sel.domRanges.filter(r => r.startContainer.isConnected);
+      const HighlightCtor = this.highlightConstructor;
+      if (validRanges.length && HighlightCtor) {
+        this.cssHighlights?.set(HIGHLIGHT_KEY, new HighlightCtor(...validRanges));
+      }
+    }
+  }
+
+  private clearHighlight(): void {
+    if (this.storedSelection?.editorView) {
+      hideSelectionHighlight(this.storedSelection.editorView);
+    }
+    this.cssHighlights?.delete(HIGHLIGHT_KEY);
+  }
+
+  // ============================================
+  // Indicator
+  // ============================================
+
+  private updateIndicator(): void {
+    if (!this.indicatorEl) return;
+
+    if (this.storedSelection) {
+      const lineText = this.storedSelection.lineCount === 1 ? 'line' : 'lines';
+      this.indicatorEl.textContent = `${this.storedSelection.lineCount} ${lineText} selected`;
+      this.indicatorEl.removeClass('claudian-hidden');
+    } else {
+      this.indicatorEl.addClass('claudian-hidden');
+    }
+    this.updateContextRowVisibility();
+  }
+
+  updateContextRowVisibility(): void {
+    if (!this.contextRowEl) return;
+    updateContextRowHasContent(this.contextRowEl);
+    this.onVisibilityChange?.();
+  }
+
+  // ============================================
+  // Context Access
+  // ============================================
+
+  getContext(): EditorSelectionContext | null {
+    if (!this.storedSelection) return null;
+    return {
+      notePath: this.storedSelection.notePath,
+      mode: 'selection',
+      selectedText: this.storedSelection.selectedText,
+      lineCount: this.storedSelection.lineCount,
+      ...(this.storedSelection.startLine !== undefined && { startLine: this.storedSelection.startLine }),
+    };
+  }
+
+  hasSelection(): boolean {
+    return this.storedSelection !== null;
+  }
+
+  // ============================================
+  // Clear
+  // ============================================
+
+  clear(): void {
+    this.inputHandoffGraceUntil = null;
+    this.clearHighlight();
+    this.storedSelection = null;
+    this.updateIndicator();
+  }
+}