@mseep/claudian 2.0.25

package/src/features/settings/ui/McpTestModal.ts

@@ -0,0 +1,346 @@
+import type { App } from 'obsidian';
+import { Modal, Notice, setIcon } from 'obsidian';
+
+import type { McpTestResult, McpTool } from '../../../core/mcp/McpTester';
+
+function formatToggleError(error: unknown): string {
+  if (!(error instanceof Error)) return 'Failed to update tool setting';
+
+  const msg = error.message.toLowerCase();
+  if (msg.includes('permission') || msg.includes('eacces')) {
+    return 'Permission denied. Check .claude/ folder permissions.';
+  }
+  if (msg.includes('enospc') || msg.includes('disk full') || msg.includes('no space')) {
+    return 'Disk full. Free up space and try again.';
+  }
+  if (msg.includes('json') || msg.includes('syntax')) {
+    return 'Config file corrupted. Check .claude/mcp.json';
+  }
+  return error.message || 'Failed to update tool setting';
+}
+
+const SVG_NS = 'http://www.w3.org/2000/svg';
+
+function appendSpinnerSvg(container: HTMLElement): void {
+  const svg = container.ownerDocument.createElementNS(SVG_NS, 'svg');
+  svg.setAttribute('viewBox', '0 0 24 24');
+  svg.setAttribute('fill', 'none');
+  svg.setAttribute('stroke', 'currentColor');
+  svg.setAttribute('stroke-width', '2');
+
+  const path = container.ownerDocument.createElementNS(SVG_NS, 'path');
+  path.setAttribute(
+    'd',
+    'M12 2v4M12 18v4M4.93 4.93l2.83 2.83M16.24 16.24l2.83 2.83M2 12h4M18 12h4M4.93 19.07l2.83-2.83M16.24 7.76l2.83-2.83'
+  );
+  svg.appendChild(path);
+
+  container.appendChild(svg);
+}
+
+export class McpTestModal extends Modal {
+  private serverName: string;
+  private result: McpTestResult | null = null;
+  private loading = true;
+  private contentEl_: HTMLElement | null = null;
+  private disabledTools: Set<string>;
+  private onToolToggle?: (toolName: string, enabled: boolean) => Promise<void>;
+  private onBulkToggle?: (disabledTools: string[]) => Promise<void>;
+  private toolToggles: Map<string, { checkbox: HTMLInputElement; container: HTMLElement }> =
+    new Map();
+  private toolElements: Map<string, HTMLElement> = new Map();
+  private toggleAllBtn: HTMLButtonElement | null = null;
+  private pendingToggle = false;
+
+  constructor(
+    app: App,
+    serverName: string,
+    initialDisabledTools?: string[],
+    onToolToggle?: (toolName: string, enabled: boolean) => Promise<void>,
+    onBulkToggle?: (disabledTools: string[]) => Promise<void>
+  ) {
+    super(app);
+    this.serverName = serverName;
+    this.disabledTools = new Set(
+      (initialDisabledTools ?? [])
+        .map((tool) => tool.trim())
+        .filter((tool) => tool.length > 0)
+    );
+    this.onToolToggle = onToolToggle;
+    this.onBulkToggle = onBulkToggle;
+  }
+
+  onOpen() {
+    this.setTitle(`Verify: ${this.serverName}`);
+    this.modalEl.addClass('claudian-mcp-test-modal');
+    this.contentEl_ = this.contentEl;
+    this.renderLoading();
+  }
+
+  setResult(result: McpTestResult) {
+    this.result = result;
+    this.loading = false;
+    this.render();
+  }
+
+  setError(error: string) {
+    this.result = { success: false, tools: [], error };
+    this.loading = false;
+    this.render();
+  }
+
+  private renderLoading() {
+    if (!this.contentEl_) return;
+    this.contentEl_.empty();
+
+    const loadingEl = this.contentEl_.createDiv({ cls: 'claudian-mcp-test-loading' });
+
+    const spinnerEl = loadingEl.createDiv({ cls: 'claudian-mcp-test-spinner' });
+    appendSpinnerSvg(spinnerEl);
+
+    loadingEl.createSpan({ text: 'Connecting to MCP server...' });
+  }
+
+  private render() {
+    if (!this.contentEl_) return;
+    this.contentEl_.empty();
+
+    if (!this.result) {
+      this.renderLoading();
+      return;
+    }
+
+    const statusEl = this.contentEl_.createDiv({ cls: 'claudian-mcp-test-status' });
+
+    const iconEl = statusEl.createSpan({ cls: 'claudian-mcp-test-icon' });
+    if (this.result.success) {
+      setIcon(iconEl, 'check-circle');
+      iconEl.addClass('success');
+    } else {
+      setIcon(iconEl, 'x-circle');
+      iconEl.addClass('error');
+    }
+
+    const textEl = statusEl.createSpan({ cls: 'claudian-mcp-test-text' });
+    if (this.result.success) {
+      let statusText = 'Connected successfully';
+      if (this.result.serverName) {
+        statusText += ` to ${this.result.serverName}`;
+        if (this.result.serverVersion) {
+          statusText += ` v${this.result.serverVersion}`;
+        }
+      }
+      textEl.setText(statusText);
+    } else {
+      textEl.setText('Connection failed');
+    }
+
+    if (this.result.error) {
+      const errorEl = this.contentEl_.createDiv({ cls: 'claudian-mcp-test-error' });
+      errorEl.setText(this.result.error);
+    }
+
+    this.toolToggles.clear();
+    this.toolElements.clear();
+
+    if (this.result.tools.length > 0) {
+      const toolsSection = this.contentEl_.createDiv({ cls: 'claudian-mcp-test-tools' });
+
+      const toolsHeader = toolsSection.createDiv({ cls: 'claudian-mcp-test-tools-header' });
+      toolsHeader.setText(`Available Tools (${this.result.tools.length})`);
+
+      const toolsList = toolsSection.createDiv({ cls: 'claudian-mcp-test-tools-list' });
+
+      for (const tool of this.result.tools) {
+        this.renderTool(toolsList, tool);
+      }
+    } else if (this.result.success) {
+      const noToolsEl = this.contentEl_.createDiv({ cls: 'claudian-mcp-test-no-tools' });
+      noToolsEl.setText('No tools information available. Tools will be loaded when used in chat.');
+    }
+
+    const buttonContainer = this.contentEl_.createDiv({ cls: 'claudian-mcp-test-buttons' });
+
+    if (this.result.tools.length > 0 && this.onToolToggle) {
+      this.toggleAllBtn = buttonContainer.createEl('button', {
+        cls: 'claudian-mcp-toggle-all-btn',
+      });
+      this.updateToggleAllButton();
+      this.toggleAllBtn.addEventListener('click', () => {
+        void this.handleToggleAll();
+      });
+    }
+
+    const closeBtn = buttonContainer.createEl('button', {
+      text: 'Close',
+      cls: 'mod-cta',
+    });
+    closeBtn.addEventListener('click', () => this.close());
+  }
+
+  private renderTool(container: HTMLElement, tool: McpTool) {
+    const toolEl = container.createDiv({ cls: 'claudian-mcp-test-tool' });
+
+    const headerEl = toolEl.createDiv({ cls: 'claudian-mcp-test-tool-header' });
+
+    const iconEl = headerEl.createSpan({ cls: 'claudian-mcp-test-tool-icon' });
+    setIcon(iconEl, 'wrench');
+
+    const nameEl = headerEl.createSpan({ cls: 'claudian-mcp-test-tool-name' });
+    nameEl.setText(tool.name);
+
+    const toggleEl = headerEl.createDiv({ cls: 'claudian-mcp-test-tool-toggle' });
+    const toggleContainer = toggleEl.createDiv({ cls: 'checkbox-container' });
+    const checkbox = toggleContainer.createEl('input', {
+      type: 'checkbox',
+      attr: { tabindex: '0' },
+    });
+
+    const isEnabled = !this.disabledTools.has(tool.name);
+    checkbox.checked = isEnabled;
+    toggleContainer.toggleClass('is-enabled', isEnabled);
+    this.updateToolState(toolEl, isEnabled);
+
+    this.toolToggles.set(tool.name, { checkbox, container: toggleContainer });
+    this.toolElements.set(tool.name, toolEl);
+
+    if (!this.onToolToggle) {
+      checkbox.disabled = true;
+    } else {
+      // Click on container instead of checkbox change event for cross-browser reliability
+      toggleContainer.addEventListener('click', (e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        if (checkbox.disabled) return;
+        checkbox.checked = !checkbox.checked;
+        void this.handleToolToggle(tool.name, checkbox, toggleContainer);
+      });
+    }
+
+    if (tool.description) {
+      const descEl = toolEl.createDiv({ cls: 'claudian-mcp-test-tool-desc' });
+      descEl.setText(tool.description);
+    }
+  }
+
+  private async handleToolToggle(
+    toolName: string,
+    checkbox: HTMLInputElement,
+    container: HTMLElement
+  ) {
+    const toolEl = this.toolElements.get(toolName);
+    if (!toolEl) return;
+
+    const wasDisabled = this.disabledTools.has(toolName);
+    const nextDisabled = !checkbox.checked;
+
+    if (nextDisabled) {
+      this.disabledTools.add(toolName);
+    } else {
+      this.disabledTools.delete(toolName);
+    }
+
+    container.toggleClass('is-enabled', !nextDisabled);
+    this.updateToolState(toolEl, !nextDisabled);
+    this.updateToggleAllButton();
+    checkbox.disabled = true;
+
+    try {
+      await this.onToolToggle?.(toolName, !nextDisabled);
+    } catch (error) {
+      // Rollback
+      if (nextDisabled) {
+        this.disabledTools.delete(toolName);
+      } else {
+        this.disabledTools.add(toolName);
+      }
+      checkbox.checked = !wasDisabled;
+      container.toggleClass('is-enabled', !wasDisabled);
+      this.updateToolState(toolEl, !wasDisabled);
+      this.updateToggleAllButton();
+      new Notice(formatToggleError(error));
+    } finally {
+      checkbox.disabled = false;
+    }
+  }
+
+  private updateToolState(toolEl: HTMLElement, enabled: boolean) {
+    toolEl.toggleClass('claudian-mcp-test-tool-disabled', !enabled);
+  }
+
+  private updateToggleAllButton() {
+    if (!this.toggleAllBtn || !this.result) return;
+
+    const allEnabled = this.disabledTools.size === 0;
+    const allDisabled = this.disabledTools.size === this.result.tools.length;
+
+    if (allEnabled) {
+      this.toggleAllBtn.setText('Disable all');
+      this.toggleAllBtn.toggleClass('is-destructive', true);
+    } else {
+      this.toggleAllBtn.setText(allDisabled ? 'Enable All' : 'Enable All');
+      this.toggleAllBtn.toggleClass('is-destructive', false);
+    }
+  }
+
+  private async handleToggleAll() {
+    if (!this.result || this.pendingToggle || !this.onBulkToggle) return;
+
+    const allEnabled = this.disabledTools.size === 0;
+    const previousDisabled = new Set(this.disabledTools);
+
+    const newDisabledTools: string[] = allEnabled
+      ? this.result.tools.map((t) => t.name) // Disable all
+      : []; // Enable all
+
+    this.pendingToggle = true;
+    if (this.toggleAllBtn) this.toggleAllBtn.disabled = true;
+
+    for (const { checkbox } of this.toolToggles.values()) {
+      checkbox.disabled = true;
+    }
+
+    // Optimistic UI update
+    this.disabledTools = new Set(newDisabledTools);
+    for (const tool of this.result.tools) {
+      const toggle = this.toolToggles.get(tool.name);
+      const toolEl = this.toolElements.get(tool.name);
+      if (!toggle || !toolEl) continue;
+
+      const isEnabled = !this.disabledTools.has(tool.name);
+      toggle.checkbox.checked = isEnabled;
+      toggle.container.toggleClass('is-enabled', isEnabled);
+      this.updateToolState(toolEl, isEnabled);
+    }
+    this.updateToggleAllButton();
+
+    try {
+      await this.onBulkToggle(newDisabledTools);
+    } catch (error) {
+      this.disabledTools = previousDisabled;
+      for (const tool of this.result.tools) {
+        const toggle = this.toolToggles.get(tool.name);
+        const toolEl = this.toolElements.get(tool.name);
+        if (!toggle || !toolEl) continue;
+
+        const isEnabled = !this.disabledTools.has(tool.name);
+        toggle.checkbox.checked = isEnabled;
+        toggle.container.toggleClass('is-enabled', isEnabled);
+        this.updateToolState(toolEl, isEnabled);
+      }
+      this.updateToggleAllButton();
+      new Notice(formatToggleError(error));
+    }
+
+    for (const { checkbox } of this.toolToggles.values()) {
+      checkbox.disabled = false;
+    }
+
+    this.pendingToggle = false;
+    if (this.toggleAllBtn) this.toggleAllBtn.disabled = false;
+  }
+
+  onClose() {
+    this.contentEl.empty();
+  }
+}

package/src/i18n/constants.ts

@@ -0,0 +1,58 @@
+/**
+ * i18n Constants and Utilities
+ *
+ * Centralized constants for language management and UI display
+ */
+
+import type { Locale } from './types';
+
+/**
+ * Supported locales with metadata
+ */
+export interface LocaleInfo {
+  code: Locale;
+  name: string;           // Native name
+  englishName: string;    // English name
+  flag?: string;          // Optional flag emoji
+}
+
+/**
+ * All supported locales with display information
+ */
+export const SUPPORTED_LOCALES: LocaleInfo[] = [
+  { code: 'en', name: 'English', englishName: 'English', flag: '🇺🇸' },
+  { code: 'zh-CN', name: '简体中文', englishName: 'Simplified Chinese', flag: '🇨🇳' },
+  { code: 'zh-TW', name: '繁體中文', englishName: 'Traditional Chinese', flag: '🇹🇼' },
+  { code: 'ja', name: '日本語', englishName: 'Japanese', flag: '🇯🇵' },
+  { code: 'ko', name: '한국어', englishName: 'Korean', flag: '🇰🇷' },
+  { code: 'de', name: 'Deutsch', englishName: 'German', flag: '🇩🇪' },
+  { code: 'fr', name: 'Français', englishName: 'French', flag: '🇫🇷' },
+  { code: 'es', name: 'Español', englishName: 'Spanish', flag: '🇪🇸' },
+  { code: 'ru', name: 'Русский', englishName: 'Russian', flag: '🇷🇺' },
+  { code: 'pt', name: 'Português', englishName: 'Portuguese', flag: '🇧🇷' },
+];
+
+/**
+ * Default locale
+ */
+export const DEFAULT_LOCALE: Locale = 'en';
+
+/**
+ * Get locale info by code
+ */
+export function getLocaleInfo(code: Locale): LocaleInfo | undefined {
+  return SUPPORTED_LOCALES.find(locale => locale.code === code);
+}
+
+/**
+ * Get display string for locale (with optional flag)
+ */
+export function getLocaleDisplayString(code: Locale, includeFlag = true): string {
+  const info = getLocaleInfo(code);
+  if (!info) return code;
+
+  return includeFlag && info.flag
+    ? `${info.flag} ${info.name} (${info.englishName})`
+    : `${info.name} (${info.englishName})`;
+}
+

package/src/i18n/i18n.ts

@@ -0,0 +1,140 @@
+/**
+ * i18n - Internationalization service for Claudian
+ *
+ * Provides translation functionality for all UI strings.
+ * Supports 10 locales with English as the default fallback.
+ */
+
+import * as de from './locales/de.json';
+import * as en from './locales/en.json';
+import * as es from './locales/es.json';
+import * as fr from './locales/fr.json';
+import * as ja from './locales/ja.json';
+import * as ko from './locales/ko.json';
+import * as pt from './locales/pt.json';
+import * as ru from './locales/ru.json';
+import * as zhCN from './locales/zh-CN.json';
+import * as zhTW from './locales/zh-TW.json';
+import type { Locale, TranslationKey } from './types';
+
+const translations: Record<Locale, typeof en> = {
+  en,
+  'zh-CN': zhCN,
+  'zh-TW': zhTW,
+  ja,
+  ko,
+  de,
+  fr,
+  es,
+  ru,
+  pt,
+};
+
+const DEFAULT_LOCALE: Locale = 'en';
+let currentLocale: Locale = DEFAULT_LOCALE;
+
+/**
+ * Get a translation by key with optional parameters
+ */
+export function t(key: TranslationKey, params?: Record<string, string | number>): string {
+  const dict = translations[currentLocale];
+
+  const keys = key.split('.');
+  let value: unknown = dict;
+
+  for (const k of keys) {
+    if (value && typeof value === 'object' && k in value) {
+      value = (value as Record<string, unknown>)[k];
+    } else {
+      if (currentLocale !== DEFAULT_LOCALE) {
+        return tFallback(key, params);
+      }
+      return key;
+    }
+  }
+
+  if (typeof value !== 'string') {
+    return key;
+  }
+
+  if (params) {
+    return value.replace(/\{(\w+)\}/g, (match: string, param: string): string => {
+      const replacement = params[param];
+      return replacement !== undefined ? `${replacement}` : match;
+    });
+  }
+
+  return value;
+}
+
+function tFallback(key: TranslationKey, params?: Record<string, string | number>): string {
+  const dict = translations[DEFAULT_LOCALE];
+  const keys = key.split('.');
+  let value: unknown = dict;
+
+  for (const k of keys) {
+    if (value && typeof value === 'object' && k in value) {
+      value = (value as Record<string, unknown>)[k];
+    } else {
+      return key;
+    }
+  }
+
+  if (typeof value !== 'string') {
+    return key;
+  }
+
+  if (params) {
+    return value.replace(/\{(\w+)\}/g, (match: string, param: string): string => {
+      const replacement = params[param];
+      return replacement !== undefined ? `${replacement}` : match;
+    });
+  }
+
+  return value;
+}
+
+/**
+ * Set the current locale
+ * @returns true if locale was set successfully, false if locale is invalid
+ */
+export function setLocale(locale: Locale): boolean {
+  if (!translations[locale]) {
+    return false;
+  }
+  currentLocale = locale;
+  return true;
+}
+
+/**
+ * Get the current locale
+ */
+export function getLocale(): Locale {
+  return currentLocale;
+}
+
+/**
+ * Get all available locales
+ */
+export function getAvailableLocales(): Locale[] {
+  return Object.keys(translations) as Locale[];
+}
+
+/**
+ * Get display name for a locale
+ */
+export function getLocaleDisplayName(locale: Locale): string {
+  const names: Record<Locale, string> = {
+    'en': 'English',
+    'zh-CN': '简体中文',
+    'zh-TW': '繁體中文',
+    'ja': '日本語',
+    'ko': '한국어',
+    'de': 'Deutsch',
+    'fr': 'Français',
+    'es': 'Español',
+    'ru': 'Русский',
+    'pt': 'Português',
+  };
+  return names[locale] || locale;
+}