bmad-elsabro 1.0.0

package/renderer/hooks/useWorkflowState.ts

@@ -0,0 +1,309 @@
+/**
+ * useWorkflowState Hook
+ *
+ * React hook for managing workflow state with persistence.
+ * Provides methods to save, load, and manage workflows via Electron IPC.
+ *
+ * Features:
+ * - Save workflows to filesystem
+ * - Load workflows from filesystem
+ * - List all workflows
+ * - Delete workflows
+ * - Auto-save support
+ * - State synchronization
+ *
+ * @module renderer/hooks/useWorkflowState
+ */
+
+import { useState, useEffect, useCallback } from 'react';
+
+/**
+ * Workflow data structure
+ */
+export interface WorkflowData {
+  id: string;
+  name: string;
+  nodes: unknown[];
+  edges: unknown[];
+  createdAt: string | Date;
+  updatedAt: string | Date;
+}
+
+/**
+ * Workflow list item
+ */
+export interface WorkflowListItem {
+  id: string;
+  name: string;
+  path: string;
+  createdAt: string;
+  updatedAt: string;
+}
+
+/**
+ * Hook result interface
+ */
+export interface UseWorkflowStateResult {
+  /**
+   * Current workflow data
+   */
+  workflow: WorkflowData | null;
+
+  /**
+   * Loading state
+   */
+  loading: boolean;
+
+  /**
+   * Error message
+   */
+  error: string | null;
+
+  /**
+   * Save current workflow
+   */
+  saveWorkflow: (workflow: WorkflowData) => Promise<boolean>;
+
+  /**
+   * Load workflow by ID
+   */
+  loadWorkflow: (workflowId: string) => Promise<void>;
+
+  /**
+   * List all workflows
+   */
+  listWorkflows: () => Promise<WorkflowListItem[]>;
+
+  /**
+   * Delete workflow by ID
+   */
+  deleteWorkflow: (workflowId: string) => Promise<boolean>;
+
+  /**
+   * Clear current workflow
+   */
+  clearWorkflow: () => void;
+
+  /**
+   * Check if workflow is saved
+   */
+  isSaved: boolean;
+
+  /**
+   * Mark workflow as modified
+   */
+  markAsModified: () => void;
+}
+
+/**
+ * useWorkflowState Hook
+ *
+ * Manages workflow state with persistence via Electron IPC.
+ *
+ * @param workflowId - Optional initial workflow ID to load
+ * @param autoSave - Enable auto-save on changes (default: false)
+ * @param autoSaveDelay - Auto-save delay in milliseconds (default: 2000)
+ * @returns Hook result with workflow state and methods
+ *
+ * @example
+ * ```tsx
+ * const {
+ *   workflow,
+ *   saveWorkflow,
+ *   loadWorkflow,
+ *   listWorkflows
+ * } = useWorkflowState('workflow-123');
+ *
+ * // Save workflow
+ * await saveWorkflow(workflowData);
+ *
+ * // Load workflow
+ * await loadWorkflow('workflow-456');
+ *
+ * // List all workflows
+ * const workflows = await listWorkflows();
+ * ```
+ */
+export function useWorkflowState(
+  workflowId?: string,
+  autoSave: boolean = false,
+  autoSaveDelay: number = 2000
+): UseWorkflowStateResult {
+  const [workflow, setWorkflow] = useState<WorkflowData | null>(null);
+  const [loading, setLoading] = useState<boolean>(false);
+  const [error, setError] = useState<string | null>(null);
+  const [isSaved, setIsSaved] = useState<boolean>(true);
+  const [autoSaveTimer, setAutoSaveTimer] = useState<NodeJS.Timeout | null>(null);
+
+  /**
+   * Save workflow to filesystem
+   */
+  const saveWorkflow = useCallback(async (workflowData: WorkflowData): Promise<boolean> => {
+    try {
+      setLoading(true);
+      setError(null);
+
+      const result = await window.electron.invoke('workflow:save', workflowData);
+
+      if (result.success) {
+        setWorkflow(workflowData);
+        setIsSaved(true);
+        return true;
+      } else {
+        setError(result.error || 'Failed to save workflow');
+        return false;
+      }
+    } catch (err) {
+      const errorMessage = err instanceof Error ? err.message : 'Unknown error';
+      setError(errorMessage);
+      return false;
+    } finally {
+      setLoading(false);
+    }
+  }, []);
+
+  /**
+   * Load workflow from filesystem
+   */
+  const loadWorkflow = useCallback(async (id: string): Promise<void> => {
+    try {
+      setLoading(true);
+      setError(null);
+
+      const result = await window.electron.invoke('workflow:load', id);
+
+      if (result) {
+        setWorkflow(result);
+        setIsSaved(true);
+      } else {
+        setError(`Workflow ${id} not found`);
+        setWorkflow(null);
+      }
+    } catch (err) {
+      const errorMessage = err instanceof Error ? err.message : 'Unknown error';
+      setError(errorMessage);
+      setWorkflow(null);
+    } finally {
+      setLoading(false);
+    }
+  }, []);
+
+  /**
+   * List all workflows
+   */
+  const listWorkflows = useCallback(async (): Promise<WorkflowListItem[]> => {
+    try {
+      setLoading(true);
+      setError(null);
+
+      const workflows = await window.electron.invoke('workflow:list');
+      return workflows || [];
+    } catch (err) {
+      const errorMessage = err instanceof Error ? err.message : 'Unknown error';
+      setError(errorMessage);
+      return [];
+    } finally {
+      setLoading(false);
+    }
+  }, []);
+
+  /**
+   * Delete workflow
+   */
+  const deleteWorkflow = useCallback(async (id: string): Promise<boolean> => {
+    try {
+      setLoading(true);
+      setError(null);
+
+      const result = await window.electron.invoke('workflow:delete', id);
+
+      if (result.success) {
+        // Clear current workflow if it's the one being deleted
+        if (workflow && workflow.id === id) {
+          setWorkflow(null);
+          setIsSaved(true);
+        }
+        return true;
+      } else {
+        setError(result.error || 'Failed to delete workflow');
+        return false;
+      }
+    } catch (err) {
+      const errorMessage = err instanceof Error ? err.message : 'Unknown error';
+      setError(errorMessage);
+      return false;
+    } finally {
+      setLoading(false);
+    }
+  }, [workflow]);
+
+  /**
+   * Clear current workflow
+   */
+  const clearWorkflow = useCallback(() => {
+    setWorkflow(null);
+    setIsSaved(true);
+    setError(null);
+
+    // Clear auto-save timer
+    if (autoSaveTimer) {
+      clearTimeout(autoSaveTimer);
+      setAutoSaveTimer(null);
+    }
+  }, [autoSaveTimer]);
+
+  /**
+   * Mark workflow as modified (unsaved)
+   */
+  const markAsModified = useCallback(() => {
+    setIsSaved(false);
+
+    // Schedule auto-save if enabled
+    if (autoSave && workflow) {
+      // Clear existing timer
+      if (autoSaveTimer) {
+        clearTimeout(autoSaveTimer);
+      }
+
+      // Set new timer
+      const timer = setTimeout(() => {
+        saveWorkflow(workflow);
+      }, autoSaveDelay);
+
+      setAutoSaveTimer(timer);
+    }
+  }, [autoSave, workflow, autoSaveDelay, autoSaveTimer, saveWorkflow]);
+
+  /**
+   * Load initial workflow on mount
+   */
+  useEffect(() => {
+    if (workflowId) {
+      loadWorkflow(workflowId);
+    }
+  }, [workflowId, loadWorkflow]);
+
+  /**
+   * Cleanup auto-save timer on unmount
+   */
+  useEffect(() => {
+    return () => {
+      if (autoSaveTimer) {
+        clearTimeout(autoSaveTimer);
+      }
+    };
+  }, [autoSaveTimer]);
+
+  return {
+    workflow,
+    loading,
+    error,
+    saveWorkflow,
+    loadWorkflow,
+    listWorkflows,
+    deleteWorkflow,
+    clearWorkflow,
+    isSaved,
+    markAsModified,
+  };
+}

package/renderer/index.html

@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta
+      http-equiv="Content-Security-Policy"
+      content="default-src 'self'; script-src 'self'; style-src 'self' 'unsafe-inline';"
+    />
+    <title>BMAD Studio</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="./index.tsx"></script>
+  </body>
+</html>

package/renderer/index.tsx

@@ -0,0 +1,17 @@
+import React from 'react';
+import { createRoot } from 'react-dom/client';
+import App from './App';
+import './styles.css';
+
+const container = document.getElementById('root');
+
+if (!container) {
+  throw new Error('Failed to find root element');
+}
+
+const root = createRoot(container);
+root.render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>
+);

package/renderer/lib/MONACO_OFFLINE_CONFIG.md

@@ -0,0 +1,153 @@
+# Monaco Editor Offline Configuration
+
+This document explains how Monaco Editor is configured for offline usage in the BMAD Studio Electron application.
+
+## Overview
+
+Monaco Editor is configured to load all resources from local node_modules instead of CDN, ensuring the application works completely offline. This is critical for Electron applications that may run without internet connectivity.
+
+## Architecture
+
+### Files Involved
+
+1. **`renderer/lib/monaco-loader.ts`** - Main configuration module
+   - Configures `self.MonacoEnvironment.getWorkerUrl`
+   - Provides environment-aware worker path resolution
+   - Exports editor options and language mappings
+
+2. **`public/monaco-workers/index.js`** - Worker loader placeholder
+   - Serves as documentation for worker configuration
+   - Actual loading handled by monaco-loader.ts
+
+3. **`vite-plugin-monaco-editor.ts`** - Vite build plugin
+   - Copies worker files from node_modules to dist during build
+   - Maintains proper directory structure for workers
+   - Only runs during production build
+
+4. **`vite.config.ts`** - Vite configuration
+   - Registers Monaco plugin
+   - Configures worker handling
+   - Sets up dev server to allow node_modules access
+
+## How It Works
+
+### Development Mode
+
+In development mode (Vite dev server):
+- Workers are loaded from `/node_modules/monaco-editor/esm/vs`
+- Vite serves files directly from node_modules
+- No build step required for workers
+- Hot reload works normally
+
+### Production Mode
+
+In production (built application):
+- Vite plugin copies workers to `dist/renderer/monacoeditorwork`
+- Workers are loaded from `./monacoeditorwork` relative path
+- All resources bundled with application
+- Works completely offline with file:// protocol
+
+## Worker Files
+
+Monaco Editor uses Web Workers for language features:
+
+| Worker | Purpose | Languages |
+|--------|---------|-----------|
+| `editor.worker.js` | Basic editor features | All (fallback) |
+| `ts.worker.js` | TypeScript/JavaScript IntelliSense | TS, JS |
+| `json.worker.js` | JSON schema validation | JSON |
+| `css.worker.js` | CSS syntax checking | CSS, SCSS, LESS |
+| `html.worker.js` | HTML validation | HTML, Handlebars, Razor |
+
+## Usage
+
+### Initialize Monaco
+
+```typescript
+import { initializeMonaco, getLanguageOptions } from '@/lib/monaco-loader';
+
+// Initialize Monaco before creating editors
+const monaco = initializeMonaco();
+
+// Create editor with language-specific options
+const editor = monaco.editor.create(element, {
+  ...getLanguageOptions('typescript'),
+  value: 'const x = 10;',
+});
+```
+
+### File Type Detection
+
+```typescript
+import { getLanguageFromFilePath } from '@/lib/monaco-loader';
+
+const language = getLanguageFromFilePath('example.ts');
+// Returns: 'typescript'
+```
+
+## Verification
+
+To verify Monaco loads offline:
+
+1. Build the application: `npm run electron:build`
+2. Disable network connection
+3. Launch the built app
+4. Open code editor component
+5. Verify:
+   - Editor renders correctly
+   - Syntax highlighting works
+   - IntelliSense/autocomplete functional
+   - No network errors in DevTools
+
+## Troubleshooting
+
+### Workers Not Loading
+
+**Symptom**: Editor works but IntelliSense/autocomplete missing
+
+**Solution**: Check that worker files exist in build:
+```bash
+ls -la dist/renderer/monacoeditorwork/
+```
+
+Should contain subdirectories: `editor/`, `language/json/`, `language/typescript/`, etc.
+
+### CSP Errors
+
+**Symptom**: "Refused to load worker" errors in console
+
+**Solution**: Verify Content Security Policy in `electron/main.ts` allows workers:
+```typescript
+webPreferences: {
+  // ... other options
+  webSecurity: true, // Enable for security
+}
+```
+
+### Wrong Paths in Production
+
+**Symptom**: 404 errors for worker files
+
+**Solution**: Verify `base: './'` in vite.config.ts for relative paths
+
+## Performance
+
+- Initial load: Workers lazy-loaded on first use
+- Memory: ~5-10MB per language worker
+- CPU: Workers run in separate threads (non-blocking)
+
+## Security
+
+- All workers loaded from application bundle
+- No external network requests
+- Sandboxed worker execution
+- Proper CSP configuration required
+
+## Maintenance
+
+When updating Monaco Editor version:
+
+1. Test worker loading in both dev and production
+2. Verify all language features work
+3. Check worker file paths haven't changed
+4. Update this documentation if needed