@mseep/claudian 2.0.25

package/src/shared/mention/VaultMentionCache.ts

@@ -0,0 +1,106 @@
+import type { App, TFile } from 'obsidian';
+import { TFolder } from 'obsidian';
+
+export interface VaultFileCacheOptions {
+  onLoadError?: (error: unknown) => void;
+}
+
+export class VaultFileCache {
+  private cachedFiles: TFile[] = [];
+  private dirty = true;
+  private isInitialized = false;
+
+  constructor(
+    private app: App,
+    private options: VaultFileCacheOptions = {}
+  ) {}
+
+  initializeInBackground(): void {
+    if (this.isInitialized) return;
+
+    window.setTimeout(() => {
+      this.tryRefreshFiles();
+    }, 0);
+  }
+
+  markDirty(): void {
+    this.dirty = true;
+  }
+
+  getFiles(): TFile[] {
+    if (this.dirty || !this.isInitialized) {
+      this.tryRefreshFiles();
+    }
+    return this.cachedFiles;
+  }
+
+  private tryRefreshFiles(): void {
+    try {
+      this.cachedFiles = this.app.vault.getFiles();
+      this.dirty = false;
+    } catch (error) {
+      this.options.onLoadError?.(error);
+      // Keep stale cache on failure. If data exists, avoid retrying each call.
+      if (this.cachedFiles.length > 0) {
+        this.dirty = false;
+      }
+    } finally {
+      this.isInitialized = true;
+    }
+  }
+}
+
+function isVisibleFolder(folder: TFolder): boolean {
+  const normalizedPath = folder.path
+    .replace(/\\/g, '/')
+    .replace(/\/+$/, '');
+  if (!normalizedPath) return false;
+  return !normalizedPath.split('/').some(segment => segment.startsWith('.'));
+}
+
+export class VaultFolderCache {
+  private cachedFolders: TFolder[] = [];
+  private dirty = true;
+  private isInitialized = false;
+
+  constructor(private app: App) {}
+
+  initializeInBackground(): void {
+    if (this.isInitialized) return;
+
+    window.setTimeout(() => {
+      this.tryRefreshFolders();
+    }, 0);
+  }
+
+  markDirty(): void {
+    this.dirty = true;
+  }
+
+  getFolders(): TFolder[] {
+    if (this.dirty || !this.isInitialized) {
+      this.tryRefreshFolders();
+    }
+    return this.cachedFolders;
+  }
+
+  private tryRefreshFolders(): void {
+    try {
+      this.cachedFolders = this.loadFolders();
+      this.dirty = false;
+    } catch {
+      // Keep stale cache on failure. If data exists, avoid retrying each call.
+      if (this.cachedFolders.length > 0) {
+        this.dirty = false;
+      }
+    } finally {
+      this.isInitialized = true;
+    }
+  }
+
+  private loadFolders(): TFolder[] {
+    return this.app.vault
+      .getAllLoadedFiles()
+      .filter((file): file is TFolder => file instanceof TFolder && isVisibleFolder(file));
+  }
+}

package/src/shared/mention/VaultMentionDataProvider.ts

@@ -0,0 +1,51 @@
+import type { App, TFile } from 'obsidian';
+
+import { VaultFileCache, VaultFolderCache } from './VaultMentionCache';
+
+export interface VaultMentionDataProviderOptions {
+  onFileLoadError?: () => void;
+}
+
+export class VaultMentionDataProvider {
+  private fileCache: VaultFileCache;
+  private folderCache: VaultFolderCache;
+  private hasReportedFileLoadError = false;
+
+  constructor(
+    app: App,
+    options: VaultMentionDataProviderOptions = {}
+  ) {
+    this.fileCache = new VaultFileCache(app, {
+      onLoadError: () => {
+        if (this.hasReportedFileLoadError) return;
+        this.hasReportedFileLoadError = true;
+        options.onFileLoadError?.();
+      },
+    });
+    this.folderCache = new VaultFolderCache(app);
+  }
+
+  initializeInBackground(): void {
+    this.fileCache.initializeInBackground();
+    this.folderCache.initializeInBackground();
+  }
+
+  markFilesDirty(): void {
+    this.fileCache.markDirty();
+  }
+
+  markFoldersDirty(): void {
+    this.folderCache.markDirty();
+  }
+
+  getCachedVaultFiles(): TFile[] {
+    return this.fileCache.getFiles();
+  }
+
+  getCachedVaultFolders(): Array<{ name: string; path: string }> {
+    return this.folderCache.getFolders().map(folder => ({
+      name: folder.name,
+      path: folder.path,
+    }));
+  }
+}

package/src/shared/mention/types.ts

@@ -0,0 +1,67 @@
+import type { TFile } from 'obsidian';
+
+import type {
+  AgentMentionProvider,
+  AgentMentionSource,
+} from '../../core/providers/types';
+
+export interface FileMentionItem {
+  type: 'file';
+  name: string;
+  path: string;
+  file: TFile;
+}
+
+export interface FolderMentionItem {
+  type: 'folder';
+  name: string;
+  path: string;
+}
+
+export interface McpServerMentionItem {
+  type: 'mcp-server';
+  name: string;
+}
+
+export interface ContextFileMentionItem {
+  type: 'context-file';
+  name: string;
+  absolutePath: string;
+  contextRoot: string;
+  folderName: string;
+}
+
+export interface ContextFolderMentionItem {
+  type: 'context-folder';
+  name: string;
+  contextRoot: string;
+  folderName: string;
+}
+
+export interface AgentMentionItem {
+  type: 'agent';
+  /** Display name */
+  name: string;
+  /** Full ID (namespaced for plugins) */
+  id: string;
+  /** Brief description */
+  description?: string;
+  /** Source of the agent */
+  source: AgentMentionSource;
+}
+
+export interface AgentFolderMentionItem {
+  type: 'agent-folder';
+  name: string;
+}
+
+export type { AgentMentionProvider };
+
+export type MentionItem =
+  | FileMentionItem
+  | FolderMentionItem
+  | McpServerMentionItem
+  | ContextFileMentionItem
+  | ContextFolderMentionItem
+  | AgentMentionItem
+  | AgentFolderMentionItem;

package/src/shared/modals/ConfirmModal.ts

@@ -0,0 +1,60 @@
+import { type App,Modal, Setting } from 'obsidian';
+
+import { t } from '../../i18n/i18n';
+
+export function confirmDelete(app: App, message: string): Promise<boolean> {
+  return new Promise(resolve => {
+    new ConfirmModal(app, message, resolve).open();
+  });
+}
+
+export function confirm(app: App, message: string, confirmText: string): Promise<boolean> {
+  return new Promise(resolve => {
+    new ConfirmModal(app, message, resolve, confirmText).open();
+  });
+}
+
+class ConfirmModal extends Modal {
+  private message: string;
+  private resolve: (confirmed: boolean) => void;
+  private resolved = false;
+  private confirmText: string;
+
+  constructor(app: App, message: string, resolve: (confirmed: boolean) => void, confirmText?: string) {
+    super(app);
+    this.message = message;
+    this.resolve = resolve;
+    this.confirmText = confirmText ?? t('common.delete');
+  }
+
+  onOpen() {
+    this.setTitle(t('common.confirm'));
+    this.modalEl.addClass('claudian-confirm-modal');
+
+    this.contentEl.createEl('p', { text: this.message });
+
+    new Setting(this.contentEl)
+      .addButton(btn =>
+        btn
+          .setButtonText(t('common.cancel'))
+          .onClick(() => this.close())
+      )
+      .addButton(btn =>
+        btn
+          .setButtonText(this.confirmText)
+          .setWarning()
+          .onClick(() => {
+            this.resolved = true;
+            this.resolve(true);
+            this.close();
+          })
+      );
+  }
+
+  onClose() {
+    if (!this.resolved) {
+      this.resolve(false);
+    }
+    this.contentEl.empty();
+  }
+}

package/src/shared/modals/ForkTargetModal.ts

@@ -0,0 +1,47 @@
+import { type App, Modal } from 'obsidian';
+
+import { t } from '../../i18n/i18n';
+
+export type ForkTarget = 'new-tab' | 'current-tab';
+
+export function chooseForkTarget(app: App): Promise<ForkTarget | null> {
+  return new Promise(resolve => {
+    new ForkTargetModal(app, resolve).open();
+  });
+}
+
+class ForkTargetModal extends Modal {
+  private resolve: (target: ForkTarget | null) => void;
+  private resolved = false;
+
+  constructor(app: App, resolve: (target: ForkTarget | null) => void) {
+    super(app);
+    this.resolve = resolve;
+  }
+
+  onOpen() {
+    this.setTitle(t('chat.fork.chooseTarget'));
+    this.modalEl.addClass('claudian-fork-target-modal');
+
+    const list = this.contentEl.createDiv({ cls: 'claudian-fork-target-list' });
+
+    this.createOption(list, 'current-tab', t('chat.fork.targetCurrentTab'));
+    this.createOption(list, 'new-tab', t('chat.fork.targetNewTab'));
+  }
+
+  private createOption(container: HTMLElement, target: ForkTarget, label: string): void {
+    const item = container.createDiv({ cls: 'claudian-fork-target-option', text: label });
+    item.addEventListener('click', () => {
+      this.resolved = true;
+      this.resolve(target);
+      this.close();
+    });
+  }
+
+  onClose() {
+    if (!this.resolved) {
+      this.resolve(null);
+    }
+    this.contentEl.empty();
+  }
+}

package/src/shared/modals/InstructionConfirmModal.ts

@@ -0,0 +1,281 @@
+/**
+ * Claudian - Instruction modal
+ *
+ * Unified modal that handles all instruction mode states:
+ * - Loading (initial processing)
+ * - Clarification (agent asks question)
+ * - Confirmation (final instruction review)
+ */
+
+import type { App } from 'obsidian';
+import { Modal, TextAreaComponent } from 'obsidian';
+
+export type InstructionDecision = 'accept' | 'reject';
+
+type ModalState = 'loading' | 'clarification' | 'confirmation';
+
+export interface InstructionModalCallbacks {
+  onAccept: (finalInstruction: string) => void;
+  onReject: () => void;
+  onClarificationSubmit: (response: string) => Promise<void>;
+}
+
+export class InstructionModal extends Modal {
+  private rawInstruction: string;
+  private callbacks: InstructionModalCallbacks;
+  private state: ModalState = 'loading';
+  private resolved = false;
+
+  // UI elements
+  private contentSectionEl: HTMLElement | null = null;
+  private loadingEl: HTMLElement | null = null;
+  private clarificationEl: HTMLElement | null = null;
+  private confirmationEl: HTMLElement | null = null;
+  private buttonsEl: HTMLElement | null = null;
+
+  // Clarification state
+  private clarificationTextEl: HTMLElement | null = null;
+  private responseTextarea: TextAreaComponent | null = null;
+  private isSubmitting = false;
+
+  // Confirmation state
+  private refinedInstruction: string = '';
+  private editTextarea: TextAreaComponent | null = null;
+  private isEditing = false;
+  private refinedDisplayEl: HTMLElement | null = null;
+  private editContainerEl: HTMLElement | null = null;
+  private editBtnEl: HTMLButtonElement | null = null;
+
+  constructor(
+    app: App,
+    rawInstruction: string,
+    callbacks: InstructionModalCallbacks
+  ) {
+    super(app);
+    this.rawInstruction = rawInstruction;
+    this.callbacks = callbacks;
+  }
+
+  onOpen() {
+    const { contentEl } = this;
+    contentEl.addClass('claudian-instruction-modal');
+    this.setTitle('Add custom instruction');
+
+    // User input section (always visible)
+    const inputSection = contentEl.createDiv({ cls: 'claudian-instruction-section' });
+    const inputLabel = inputSection.createDiv({ cls: 'claudian-instruction-label' });
+    inputLabel.setText('Your input:');
+    const inputText = inputSection.createDiv({ cls: 'claudian-instruction-original' });
+    inputText.setText(this.rawInstruction);
+
+    // Main content section (changes based on state)
+    this.contentSectionEl = contentEl.createDiv({ cls: 'claudian-instruction-content-section' });
+
+    // Loading state
+    this.loadingEl = this.contentSectionEl.createDiv({ cls: 'claudian-instruction-loading' });
+    this.loadingEl.createDiv({ cls: 'claudian-instruction-spinner' });
+    this.loadingEl.createSpan({ text: 'Processing your instruction...' });
+
+    // Clarification state (hidden initially)
+    this.clarificationEl = this.contentSectionEl.createDiv({ cls: 'claudian-instruction-clarification-section' });
+    this.clarificationEl.addClass('claudian-hidden');
+    this.clarificationTextEl = this.clarificationEl.createDiv({ cls: 'claudian-instruction-clarification' });
+
+    const responseSection = this.clarificationEl.createDiv({ cls: 'claudian-instruction-section' });
+    const responseLabel = responseSection.createDiv({ cls: 'claudian-instruction-label' });
+    responseLabel.setText('Your response:');
+
+    this.responseTextarea = new TextAreaComponent(responseSection);
+    this.responseTextarea.inputEl.addClass('claudian-instruction-response-textarea');
+    this.responseTextarea.inputEl.rows = 3;
+    this.responseTextarea.inputEl.placeholder = 'Provide more details...';
+
+    this.responseTextarea.inputEl.addEventListener('keydown', (e) => {
+      // Check !e.isComposing for IME support (Chinese, Japanese, Korean, etc.)
+      if (e.key === 'Enter' && !e.shiftKey && !e.isComposing && !this.isSubmitting) {
+        e.preventDefault();
+        void this.submitClarification();
+      }
+    });
+
+    // Confirmation state (hidden initially)
+    this.confirmationEl = this.contentSectionEl.createDiv({ cls: 'claudian-instruction-confirmation-section' });
+    this.confirmationEl.addClass('claudian-hidden');
+
+    // Refined instruction display/edit
+    const refinedSection = this.confirmationEl.createDiv({ cls: 'claudian-instruction-section' });
+    const refinedLabel = refinedSection.createDiv({ cls: 'claudian-instruction-label' });
+    refinedLabel.setText('Refined snippet:');
+
+    this.refinedDisplayEl = refinedSection.createDiv({ cls: 'claudian-instruction-refined' });
+    this.editContainerEl = refinedSection.createDiv({ cls: 'claudian-instruction-edit-container' });
+    this.editContainerEl.addClass('claudian-hidden');
+
+    this.editTextarea = new TextAreaComponent(this.editContainerEl);
+    this.editTextarea.inputEl.addClass('claudian-instruction-edit-textarea');
+    this.editTextarea.inputEl.rows = 4;
+
+    // Buttons (changes based on state)
+    this.buttonsEl = contentEl.createDiv({ cls: 'claudian-instruction-buttons' });
+    this.updateButtons();
+
+    this.showState('loading');
+  }
+
+  showClarification(clarification: string) {
+    if (this.clarificationTextEl) {
+      this.clarificationTextEl.setText(clarification);
+    }
+    if (this.responseTextarea) {
+      this.responseTextarea.setValue('');
+    }
+    this.isSubmitting = false;
+    this.showState('clarification');
+    this.responseTextarea?.inputEl.focus();
+  }
+
+  showConfirmation(refinedInstruction: string) {
+    this.refinedInstruction = refinedInstruction;
+
+    if (this.refinedDisplayEl) {
+      this.refinedDisplayEl.setText(refinedInstruction);
+    }
+    if (this.editTextarea) {
+      this.editTextarea.setValue(refinedInstruction);
+    }
+
+    this.showState('confirmation');
+  }
+
+  showError(error: string) {
+    // Just close - the error notice will be shown by caller
+    this.resolved = true;
+    this.close();
+  }
+
+  showClarificationLoading() {
+    this.isSubmitting = true;
+    if (this.loadingEl) {
+      this.loadingEl.querySelector('.claudian-instruction-spinner');
+      const text = this.loadingEl.querySelector('span');
+      if (text) text.textContent = 'Processing...';
+    }
+    this.showState('loading');
+  }
+
+  private showState(state: ModalState) {
+    this.state = state;
+
+    if (this.loadingEl) {
+      this.loadingEl.toggleClass('claudian-hidden', state !== 'loading');
+    }
+    if (this.clarificationEl) {
+      this.clarificationEl.toggleClass('claudian-hidden', state !== 'clarification');
+    }
+    if (this.confirmationEl) {
+      this.confirmationEl.toggleClass('claudian-hidden', state !== 'confirmation');
+    }
+
+    this.updateButtons();
+  }
+
+  private updateButtons() {
+    if (!this.buttonsEl) return;
+    this.buttonsEl.empty();
+
+    const cancelBtn = this.buttonsEl.createEl('button', {
+      text: 'Cancel',
+      cls: 'claudian-instruction-btn claudian-instruction-reject-btn',
+      attr: { 'aria-label': 'Cancel' }
+    });
+    cancelBtn.addEventListener('click', () => this.handleReject());
+
+    if (this.state === 'clarification') {
+      const submitBtn = this.buttonsEl.createEl('button', {
+        text: 'Submit',
+        cls: 'claudian-instruction-btn claudian-instruction-accept-btn',
+        attr: { 'aria-label': 'Submit response' }
+      });
+      submitBtn.addEventListener('click', () => {
+        void this.submitClarification();
+      });
+    } else if (this.state === 'confirmation') {
+      this.editBtnEl = this.buttonsEl.createEl('button', {
+        text: 'Edit',
+        cls: 'claudian-instruction-btn claudian-instruction-edit-btn',
+        attr: { 'aria-label': 'Edit instruction' }
+      });
+      this.editBtnEl.addEventListener('click', () => this.toggleEdit());
+
+      const acceptBtn = this.buttonsEl.createEl('button', {
+        text: 'Accept',
+        cls: 'claudian-instruction-btn claudian-instruction-accept-btn',
+        attr: { 'aria-label': 'Accept instruction' }
+      });
+      acceptBtn.addEventListener('click', () => this.handleAccept());
+      acceptBtn.focus();
+    }
+  }
+
+  private async submitClarification() {
+    const response = this.responseTextarea?.getValue().trim();
+    if (!response || this.isSubmitting) return;
+
+    this.showClarificationLoading();
+
+    try {
+      await this.callbacks.onClarificationSubmit(response);
+    } catch {
+      // On error, go back to clarification state
+      this.isSubmitting = false;
+      this.showState('clarification');
+    }
+  }
+
+  private toggleEdit() {
+    this.isEditing = !this.isEditing;
+
+    if (this.isEditing) {
+      this.refinedDisplayEl?.addClass('claudian-hidden');
+      this.editContainerEl?.removeClass('claudian-hidden');
+      if (this.editBtnEl) this.editBtnEl.setText('Preview');
+      this.editTextarea?.inputEl.focus();
+    } else {
+      const edited = this.editTextarea?.getValue() || this.refinedInstruction;
+      this.refinedInstruction = edited;
+      if (this.refinedDisplayEl) {
+        this.refinedDisplayEl.setText(edited);
+        this.refinedDisplayEl.removeClass('claudian-hidden');
+      }
+      this.editContainerEl?.addClass('claudian-hidden');
+      if (this.editBtnEl) this.editBtnEl.setText('Edit');
+    }
+  }
+
+  private handleAccept() {
+    if (this.resolved) return;
+    this.resolved = true;
+
+    const finalInstruction = this.isEditing
+      ? (this.editTextarea?.getValue() || this.refinedInstruction)
+      : this.refinedInstruction;
+
+    this.callbacks.onAccept(finalInstruction);
+    this.close();
+  }
+
+  private handleReject() {
+    if (this.resolved) return;
+    this.resolved = true;
+    this.callbacks.onReject();
+    this.close();
+  }
+
+  onClose() {
+    if (!this.resolved) {
+      this.resolved = true;
+      this.callbacks.onReject();
+    }
+    this.contentEl.empty();
+  }
+}

package/src/style/CLAUDE.md

@@ -0,0 +1,49 @@
+# CSS Style Guide
+
+## Structure
+
+```
+src/style/
+├── base/           # container, animations (@keyframes), variables
+├── components/     # header, history, messages, code, thinking, toolcalls, status-panel, subagent, input, context-footer, tabs, nav-sidebar
+├── toolbar/        # model-selector, thinking-selector, permission-toggle, service-tier-toggle, external-context, mcp-selector
+├── features/       # file-context, image-context, image-modal, inline-edit, diff, slash-commands, file-link, image-embed, plan-mode, ask-user-question, resume-session
+├── modals/         # instruction, mcp-modal, fork-target
+├── settings/       # base (shared .claudian-sp-* panel layout), env-snippets, slash-settings, mcp-settings, plugin-settings, agent-settings
+├── accessibility.css
+└── index.css       # Build order (@import list)
+```
+
+## Build
+
+CSS is built into root `styles.css` via `npm run build:css`. It is invoked by both `npm run dev` and `npm run build`.
+
+**Adding new modules**: Register in `index.css` via `@import` or the CSS build will fail.
+
+## Conventions
+
+- **Prefix**: Claudian-owned classes should use the `.claudian-` prefix; shared Obsidian host selectors and generic state classes may remain unprefixed
+- **BEM-lite**: Prefer `.claudian-{block}`, `.claudian-{block}-{element}`, `.claudian-{block}--{modifier}` for Claudian-owned selectors
+- **No `!important`**: Avoid unless overriding Obsidian defaults
+- **CSS variables**: Use Obsidian's `--background-*`, `--text-*`, `--interactive-*` tokens
+
+## Naming Patterns
+
+| Pattern | Examples |
+|---------|----------|
+| Layout | `-container`, `-header`, `-messages`, `-input` |
+| Messages | `-message`, `-message-user`, `-message-assistant` |
+| Tool calls | `-tool-call`, `-tool-header`, `-tool-content`, `-tool-status` |
+| Thinking | `-thinking-block`, `-thinking-header`, `-thinking-content` |
+| Panels | `-todo-list`, `-todo-item`, `-subagent-list`, `-subagent-header` |
+| Context | `-file-chip`, `-image-chip`, `-mention-dropdown` |
+| Plan mode | `-plan-approval-inline`, `-plan-content-preview`, `-plan-permissions`, plus shared `-ask-*` classes for approval/revision controls |
+| Ask user | `-ask-list`, `-ask-item`, `-ask-cursor`, `-ask-hints` |
+| Command panel | `-status-panel-bash`, `-status-panel-bash-header`, `-status-panel-bash-entry`, `-status-panel-bash-actions` |
+| Modals | `-instruction-modal`, `-mcp-modal`, `-fork-target-*` |
+
+## Gotchas
+
+- Obsidian uses `body.theme-dark` / `body.theme-light` for theme detection
+- Modal z-index must be > 1000 to overlay Obsidian UI
+- Use `var(--font-monospace)` for code blocks, not hardcoded fonts

package/src/style/accessibility.css

@@ -0,0 +1,40 @@
+/* Accessibility - Focus Visible Styles */
+
+/* outline + offset + border-radius */
+.claudian-tool-header:focus-visible,
+.claudian-thinking-header:focus-visible,
+.claudian-subagent-header:focus-visible,
+.claudian-input-nav-btn:focus-visible,
+.claudian-model-btn:focus-visible,
+.claudian-thinking-current:focus-visible {
+  outline: 2px solid var(--interactive-accent);
+  outline-offset: 2px;
+  border-radius: 4px;
+}
+
+/* outline + offset only */
+.claudian-action-btn:focus-visible,
+.claudian-toggle-switch:focus-visible,
+.claudian-file-chip:focus-visible,
+.claudian-image-chip:focus-visible,
+.claudian-file-chip-remove:focus-visible,
+.claudian-image-remove:focus-visible,
+.claudian-image-modal-close:focus-visible,
+.claudian-approved-remove-btn:focus-visible,
+.claudian-save-env-btn:focus-visible,
+.claudian-restore-snippet-btn:focus-visible,
+.claudian-edit-snippet-btn:focus-visible,
+.claudian-delete-snippet-btn:focus-visible,
+.claudian-cancel-btn:focus-visible,
+.claudian-save-btn:focus-visible,
+.claudian-code-lang-label:focus-visible {
+  outline: 2px solid var(--interactive-accent);
+  outline-offset: 2px;
+}
+
+/* outline + negative offset + border-radius */
+.claudian-history-item-content:focus-visible {
+  outline: 2px solid var(--interactive-accent);
+  outline-offset: -2px;
+  border-radius: 4px;
+}