bmad-elsabro 1.0.0

package/renderer/lib/file-system-provider.ts

@@ -0,0 +1,295 @@
+/**
+ * File System Provider for Monaco Editor
+ *
+ * Provides file system operations for Monaco Editor integration with Electron.
+ * Uses IPC to communicate with the main process for secure file operations.
+ *
+ * Patterns followed from tools/cli/lib/file-ops.js:
+ * - Async file operations with proper error handling
+ * - Path normalization for cross-platform compatibility
+ * - File existence checking before operations
+ * - Proper type definitions for all operations
+ */
+
+/**
+ * File system operation result
+ */
+export interface FileOperationResult<T = unknown> {
+  success: boolean;
+  data?: T;
+  error?: string;
+}
+
+/**
+ * File metadata
+ */
+export interface FileMetadata {
+  path: string;
+  size: number;
+  mtime: Date;
+  isDirectory: boolean;
+  isFile: boolean;
+}
+
+/**
+ * File read options
+ */
+export interface FileReadOptions {
+  encoding?: 'utf8' | 'binary';
+  path: string;
+}
+
+/**
+ * File write options
+ */
+export interface FileWriteOptions {
+  path: string;
+  content: string;
+  encoding?: 'utf8';
+}
+
+/**
+ * File list options
+ */
+export interface FileListOptions {
+  path: string;
+  recursive?: boolean;
+  filter?: (path: string) => boolean;
+}
+
+/**
+ * File System Provider class
+ *
+ * Provides an interface for Monaco Editor to interact with the file system
+ * through Electron's IPC mechanism.
+ */
+export class FileSystemProvider {
+  private cache: Map<string, string> = new Map();
+  private cacheEnabled: boolean = true;
+
+  /**
+   * Check if the provider is available (Electron context)
+   */
+  isAvailable(): boolean {
+    return typeof window !== 'undefined' && 'electron' in window;
+  }
+
+  /**
+   * Read file content from the file system
+   * @param filePath - Path to the file to read
+   * @returns File content as string
+   */
+  async readFile(filePath: string): Promise<string> {
+    if (!this.isAvailable()) {
+      throw new Error('File system provider not available in this environment');
+    }
+
+    // Check cache first
+    if (this.cacheEnabled && this.cache.has(filePath)) {
+      return this.cache.get(filePath)!;
+    }
+
+    try {
+      const result = await (window as any).electron.invoke('file:read', {
+        path: filePath,
+      });
+
+      if (result.success && result.data) {
+        const content = result.data.content || '';
+
+        // Cache the result
+        if (this.cacheEnabled) {
+          this.cache.set(filePath, content);
+        }
+
+        return content;
+      } else {
+        throw new Error(result.error || 'Failed to read file');
+      }
+    } catch (error) {
+      const message = error instanceof Error ? error.message : 'Unknown error';
+      throw new Error(`Failed to read file ${filePath}: ${message}`);
+    }
+  }
+
+  /**
+   * Write content to a file
+   * @param filePath - Path to the file to write
+   * @param content - Content to write
+   */
+  async writeFile(filePath: string, content: string): Promise<void> {
+    if (!this.isAvailable()) {
+      throw new Error('File system provider not available in this environment');
+    }
+
+    try {
+      const result = await (window as any).electron.invoke('file:write', {
+        path: filePath,
+        content,
+      });
+
+      if (result.success) {
+        // Update cache
+        if (this.cacheEnabled) {
+          this.cache.set(filePath, content);
+        }
+      } else {
+        throw new Error(result.error || 'Failed to write file');
+      }
+    } catch (error) {
+      const message = error instanceof Error ? error.message : 'Unknown error';
+      throw new Error(`Failed to write file ${filePath}: ${message}`);
+    }
+  }
+
+  /**
+   * Check if a file exists
+   * @param filePath - Path to check
+   * @returns True if file exists
+   */
+  async exists(filePath: string): Promise<boolean> {
+    if (!this.isAvailable()) {
+      return false;
+    }
+
+    try {
+      const content = await this.readFile(filePath);
+      return content !== undefined;
+    } catch {
+      return false;
+    }
+  }
+
+  /**
+   * Get file metadata
+   * @param filePath - Path to the file
+   * @returns File metadata
+   */
+  async getMetadata(filePath: string): Promise<FileMetadata | null> {
+    if (!this.isAvailable()) {
+      return null;
+    }
+
+    try {
+      const result = await (window as any).electron.invoke('file:stat', {
+        path: filePath,
+      });
+
+      if (result.success && result.data) {
+        return {
+          path: filePath,
+          size: result.data.size,
+          mtime: new Date(result.data.mtime),
+          isDirectory: result.data.isDirectory,
+          isFile: result.data.isFile,
+        };
+      }
+
+      return null;
+    } catch {
+      return null;
+    }
+  }
+
+  /**
+   * Clear the file cache
+   */
+  clearCache(): void {
+    this.cache.clear();
+  }
+
+  /**
+   * Remove a specific file from cache
+   * @param filePath - Path to remove from cache
+   */
+  removeCacheEntry(filePath: string): void {
+    this.cache.delete(filePath);
+  }
+
+  /**
+   * Enable or disable caching
+   * @param enabled - Whether to enable caching
+   */
+  setCacheEnabled(enabled: boolean): void {
+    this.cacheEnabled = enabled;
+    if (!enabled) {
+      this.clearCache();
+    }
+  }
+
+  /**
+   * Get cache status
+   */
+  getCacheInfo(): { enabled: boolean; size: number } {
+    return {
+      enabled: this.cacheEnabled,
+      size: this.cache.size,
+    };
+  }
+}
+
+/**
+ * Singleton instance of the file system provider
+ */
+let fileSystemProviderInstance: FileSystemProvider | null = null;
+
+/**
+ * Get the file system provider instance
+ * @returns File system provider singleton
+ */
+export function getFileSystemProvider(): FileSystemProvider {
+  if (!fileSystemProviderInstance) {
+    fileSystemProviderInstance = new FileSystemProvider();
+  }
+  return fileSystemProviderInstance;
+}
+
+/**
+ * Load file content for Monaco Editor
+ * Convenience function for loading files into Monaco Editor
+ *
+ * @param filePath - Path to the file
+ * @returns File content and metadata
+ */
+export async function loadFileForEditor(filePath: string): Promise<{
+  content: string;
+  path: string;
+  metadata: FileMetadata | null;
+}> {
+  const provider = getFileSystemProvider();
+
+  if (!provider.isAvailable()) {
+    throw new Error('File system provider not available');
+  }
+
+  const content = await provider.readFile(filePath);
+  const metadata = await provider.getMetadata(filePath);
+
+  return {
+    content,
+    path: filePath,
+    metadata,
+  };
+}
+
+/**
+ * Save file content from Monaco Editor
+ * Convenience function for saving files from Monaco Editor
+ *
+ * @param filePath - Path to the file
+ * @param content - Content to save
+ */
+export async function saveFileFromEditor(
+  filePath: string,
+  content: string
+): Promise<void> {
+  const provider = getFileSystemProvider();
+
+  if (!provider.isAvailable()) {
+    throw new Error('File system provider not available');
+  }
+
+  await provider.writeFile(filePath, content);
+}
+
+export default FileSystemProvider;

package/renderer/lib/monaco-loader.ts

@@ -0,0 +1,247 @@
+/**
+ * Monaco Editor Offline Loader Configuration
+ *
+ * This module configures Monaco Editor to load from local node_modules
+ * instead of CDN, enabling offline usage in the Electron application.
+ *
+ * Key Features:
+ * - No CDN dependencies (all assets loaded locally)
+ * - Proper worker configuration for Electron environment
+ * - Support for TypeScript, JavaScript, JSON, and YAML languages
+ */
+
+import * as monaco from 'monaco-editor';
+
+/**
+ * Monaco Editor configuration interface
+ */
+export interface MonacoConfig {
+  /**
+   * Path to Monaco Editor assets in node_modules
+   */
+  paths?: {
+    vs?: string;
+  };
+  /**
+   * Custom worker loader function
+   */
+  getWorkerUrl?: (workerId: string, label: string) => string;
+}
+
+/**
+ * Configure Monaco Editor for offline usage in Electron
+ *
+ * This function sets up Monaco to load all resources from local node_modules
+ * instead of a CDN. It configures the worker URLs to point to local files
+ * that are bundled with the application.
+ *
+ * In development mode, workers are loaded from node_modules via Vite dev server.
+ * In production, workers are bundled and loaded from the application's resources.
+ *
+ * @param config - Optional Monaco configuration overrides
+ */
+export function configureMonacoLoader(config?: MonacoConfig): void {
+  // Set up self.MonacoEnvironment for worker configuration
+  if (typeof self !== 'undefined') {
+    (self as any).MonacoEnvironment = {
+      /**
+       * Custom worker URL resolver
+       * Returns proper paths for Monaco workers in Electron environment
+       *
+       * This configuration ensures Monaco works offline by loading workers
+       * from local files instead of a CDN.
+       */
+      getWorkerUrl: function (workerId: string, label: string): string {
+        // Allow custom worker URL resolution
+        if (config?.getWorkerUrl) {
+          return config.getWorkerUrl(workerId, label);
+        }
+
+        // Detect environment: development uses Vite dev server, production uses bundled files
+        const isDev = import.meta.env?.DEV ?? false;
+
+        // In development: use node_modules via Vite's dev server
+        // In production: use relative paths to bundled workers in dist
+        const basePath = isDev
+          ? '/node_modules/monaco-editor/esm/vs'
+          : './monacoeditorwork';
+
+        // Map language labels to their corresponding worker files
+        // These workers provide language features like IntelliSense, syntax checking, etc.
+        switch (label) {
+          case 'json':
+            return `${basePath}/language/json/json.worker.js`;
+          case 'css':
+          case 'scss':
+          case 'less':
+            return `${basePath}/language/css/css.worker.js`;
+          case 'html':
+          case 'handlebars':
+          case 'razor':
+            return `${basePath}/language/html/html.worker.js`;
+          case 'typescript':
+          case 'javascript':
+            return `${basePath}/language/typescript/ts.worker.js`;
+          default:
+            // Default editor worker for basic editing features
+            return `${basePath}/editor/editor.worker.js`;
+        }
+      },
+    };
+  }
+}
+
+/**
+ * Initialize Monaco Editor with offline configuration
+ *
+ * This function should be called before rendering any Monaco Editor instances.
+ * It ensures all Monaco resources are loaded from local files.
+ *
+ * @returns Monaco editor namespace
+ */
+export function initializeMonaco(): typeof monaco {
+  // Configure the loader for offline usage
+  configureMonacoLoader();
+
+  return monaco;
+}
+
+/**
+ * Default Monaco Editor options for the application
+ * These options provide a consistent editing experience across all editors
+ */
+export const defaultMonacoOptions: monaco.editor.IStandaloneEditorConstructionOptions = {
+  // Editor behavior
+  automaticLayout: true,
+  wordWrap: 'on',
+  minimap: { enabled: true },
+  scrollBeyondLastLine: false,
+
+  // Code features
+  suggestOnTriggerCharacters: true,
+  quickSuggestions: true,
+  parameterHints: { enabled: true },
+
+  // Formatting
+  formatOnPaste: true,
+  formatOnType: true,
+
+  // Theme (will be overridden by app theme)
+  theme: 'vs-dark',
+
+  // Font
+  fontSize: 14,
+  fontFamily: 'Menlo, Monaco, "Courier New", monospace',
+  lineHeight: 21,
+
+  // Line numbers
+  lineNumbers: 'on',
+  renderLineHighlight: 'all',
+
+  // Scrolling
+  smoothScrolling: true,
+  mouseWheelScrollSensitivity: 1,
+
+  // Bracket matching
+  matchBrackets: 'always',
+  bracketPairColorization: { enabled: true },
+};
+
+/**
+ * Language-specific Monaco Editor options
+ */
+export const languageOptions: Record<string, Partial<monaco.editor.IStandaloneEditorConstructionOptions>> = {
+  typescript: {
+    tabSize: 2,
+    insertSpaces: true,
+  },
+  javascript: {
+    tabSize: 2,
+    insertSpaces: true,
+  },
+  json: {
+    tabSize: 2,
+    insertSpaces: true,
+    formatOnPaste: true,
+  },
+  yaml: {
+    tabSize: 2,
+    insertSpaces: true,
+  },
+  markdown: {
+    wordWrap: 'on',
+    lineNumbers: 'off',
+  },
+};
+
+/**
+ * Get Monaco Editor options for a specific language
+ *
+ * @param language - The language identifier (typescript, javascript, json, yaml, etc.)
+ * @returns Merged Monaco editor options with language-specific settings
+ */
+export function getLanguageOptions(
+  language: string
+): monaco.editor.IStandaloneEditorConstructionOptions {
+  const langOptions = languageOptions[language] || {};
+  return {
+    ...defaultMonacoOptions,
+    ...langOptions,
+  };
+}
+
+/**
+ * Supported file extensions and their Monaco language mappings
+ */
+export const fileExtensionToLanguage: Record<string, string> = {
+  // TypeScript/JavaScript
+  '.ts': 'typescript',
+  '.tsx': 'typescript',
+  '.js': 'javascript',
+  '.jsx': 'javascript',
+  '.mjs': 'javascript',
+  '.cjs': 'javascript',
+
+  // Markup
+  '.json': 'json',
+  '.yaml': 'yaml',
+  '.yml': 'yaml',
+  '.xml': 'xml',
+  '.html': 'html',
+  '.htm': 'html',
+
+  // Styles
+  '.css': 'css',
+  '.scss': 'scss',
+  '.less': 'less',
+
+  // Documentation
+  '.md': 'markdown',
+  '.markdown': 'markdown',
+
+  // Shell
+  '.sh': 'shell',
+  '.bash': 'shell',
+
+  // Configuration
+  '.env': 'plaintext',
+  '.gitignore': 'plaintext',
+  '.dockerignore': 'plaintext',
+};
+
+/**
+ * Get Monaco language identifier from file path
+ *
+ * @param filePath - The file path or name
+ * @returns Monaco language identifier
+ */
+export function getLanguageFromFilePath(filePath: string): string {
+  const extension = filePath.substring(filePath.lastIndexOf('.'));
+  return fileExtensionToLanguage[extension] || 'plaintext';
+}
+
+// Export Monaco namespace for type definitions
+export { monaco };
+
+// Export default configuration function
+export default configureMonacoLoader;