@claudetools/tools 0.7.0 → 0.7.1

package/dist/handlers/codedna-handlers.js

@@ -15,13 +15,75 @@ import { VueFrontendGenerator } from '../codedna/generators/vue-frontend.js';
 import { UIComponentGenerator } from '../codedna/generators/ui-component.js';
 import { errorTracker } from '../helpers/error-tracking.js';
 import { analytics } from '../helpers/usage-analytics.js';
+import { apiRequest } from '../helpers/api-client.js';
 // Singleton registry instance
 const registry = new TemplateRegistry();
+// =============================================================================
+// Pattern Integration Helpers
+// =============================================================================
+/**
+ * Build PatternContext from detected patterns for use in generation
+ */
+function buildPatternContext(detectedPatterns, confidenceScores = {}) {
+    const detected = detectedPatterns.map(p => ({
+        pattern_id: p.pattern_id,
+        name: p.name,
+        category: p.category,
+        confidence: confidenceScores[p.pattern_id] || 0.5,
+    }));
+    // Separate preferred from avoid (anti-patterns)
+    const preferred = detected
+        .filter(p => !detectedPatterns.find(dp => dp.pattern_id === p.pattern_id)?.is_anti_pattern)
+        .map(p => p.pattern_id);
+    const avoid = detected
+        .filter(p => detectedPatterns.find(dp => dp.pattern_id === p.pattern_id)?.is_anti_pattern)
+        .map(p => p.pattern_id);
+    return { detected, preferred, avoid };
+}
+/**
+ * Detect patterns from package.json and build PatternContext
+ */
+async function detectPatternsFromPackageJson(packageJson) {
+    try {
+        // Get all patterns from registry
+        const patterns = await apiRequest('/api/v1/codedna/patterns');
+        const deps = {
+            ...(packageJson.dependencies || {}),
+            ...(packageJson.devDependencies || {}),
+        };
+        const detected = [];
+        const confidenceScores = {};
+        for (const pattern of patterns) {
+            let confidence = 0;
+            let matched = false;
+            for (const signal of pattern.package_signals) {
+                if (deps[signal]) {
+                    matched = true;
+                    confidence += 0.4; // Each package match adds confidence
+                }
+            }
+            if (matched) {
+                detected.push(pattern);
+                confidenceScores[pattern.pattern_id] = Math.min(confidence, 1.0);
+            }
+        }
+        return buildPatternContext(detected, confidenceScores);
+    }
+    catch (error) {
+        console.warn('Pattern detection failed, proceeding without patterns:', error);
+        return { detected: [], preferred: [], avoid: [] };
+    }
+}
 /**
  * Handle codedna_generate_api tool call
+ *
+ * Pattern-aware generation:
+ * - If package_json is provided, patterns are detected automatically
+ * - If patterns is provided in options, those are used directly
+ * - Generated code will use template variants matching detected patterns
  */
 export async function handleGenerateApi(args) {
-    const { spec, framework, options = {} } = args;
+    const { spec, framework, options = {}, package_json } = args;
     // Validate Entity DSL specification
     const validation = validateSpec(spec);
     if (!validation.valid) {
@@ -51,8 +113,18 @@ export async function handleGenerateApi(args) {
     }
     try {
         const startTime = Date.now();
+        // Detect patterns if package.json provided
+        let patternContext = options.patterns;
+        if (!patternContext && package_json) {
+            patternContext = await detectPatternsFromPackageJson(package_json);
+        }
+        // Merge pattern context into options
+        const generationOptions = {
+            ...options,
+            patterns: patternContext,
+        };
         // Generate code
-        const result = await generator.generate(validation.parsed, options);
+        const result = await generator.generate(validation.parsed, generationOptions);
         const executionTime = Date.now() - startTime;
         // Track successful generation
         await analytics.trackGeneration({
@@ -65,13 +137,16 @@ export async function handleGenerateApi(args) {
             filesGenerated: result.metadata.filesGenerated,
             linesOfCode: result.metadata.linesOfCode,
             tokensSaved: result.metadata.estimatedTokensSaved,
-            options: options,
+            options: generationOptions,
             executionTimeMs: executionTime,
         });
         return {
             success: true,
             files: result.files,
             metadata: result.metadata,
+            patternsApplied: patternContext?.detected?.length
+                ? patternContext.detected.map(p => p.pattern_id)
+                : undefined,
             tokenSavings: {
                 traditional: result.metadata.linesOfCode * 25, // ~25 tokens per line
                 codedna: 150, // ~150 tokens for MCP call
@@ -91,9 +166,14 @@ export async function handleGenerateApi(args) {
 }
 /**
  * Handle codedna_generate_frontend tool call
+ *
+ * Pattern-aware generation:
+ * - If package_json is provided, patterns are detected automatically
+ * - Detects React Hook Form, Zod, TanStack Query, etc.
+ * - Uses template variants matching detected patterns
  */
 export async function handleGenerateFrontend(args) {
-    const { spec, framework, options = {} } = args;
+    const { spec, framework, options = {}, package_json } = args;
     // Validate Entity DSL specification
     const validation = validateSpec(spec);
     if (!validation.valid) {
@@ -118,8 +198,18 @@ export async function handleGenerateFrontend(args) {
     }
     try {
         const startTime = Date.now();
+        // Detect patterns if package.json provided
+        let patternContext = options.patterns;
+        if (!patternContext && package_json) {
+            patternContext = await detectPatternsFromPackageJson(package_json);
+        }
+        // Merge pattern context into options
+        const generationOptions = {
+            ...options,
+            patterns: patternContext,
+        };
         // Generate code
-        const result = await generator.generate(validation.parsed, options);
+        const result = await generator.generate(validation.parsed, generationOptions);
         const executionTime = Date.now() - startTime;
         // Track successful generation
         await analytics.trackGeneration({
@@ -132,13 +222,16 @@ export async function handleGenerateFrontend(args) {
             filesGenerated: result.metadata.filesGenerated,
             linesOfCode: result.metadata.linesOfCode,
             tokensSaved: result.metadata.estimatedTokensSaved,
-            options: options,
+            options: generationOptions,
             executionTimeMs: executionTime,
         });
         return {
             success: true,
             files: result.files,
             metadata: result.metadata,
+            patternsApplied: patternContext?.detected?.length
+                ? patternContext.detected.map(p => p.pattern_id)
+                : undefined,
             tokenSavings: {
                 traditional: result.metadata.linesOfCode * 25,
                 codedna: 150,
@@ -157,9 +250,13 @@ export async function handleGenerateFrontend(args) {
 }
 /**
  * Handle codedna_generate_component tool call
+ *
+ * Pattern-aware generation:
+ * - If package_json is provided, patterns are detected automatically
+ * - Uses matching patterns for form libraries, validation, etc.
  */
 export async function handleGenerateComponent(args) {
-    const { spec, type, framework, options = {} } = args;
+    const { spec, type, framework, options = {}, package_json } = args;
     // Validate Entity DSL specification
     const validation = validateSpec(spec);
     if (!validation.valid) {
@@ -186,8 +283,18 @@ export async function handleGenerateComponent(args) {
     }
     try {
         const startTime = Date.now();
+        // Detect patterns if package.json provided
+        let patternContext = options.patterns;
+        if (!patternContext && package_json) {
+            patternContext = await detectPatternsFromPackageJson(package_json);
+        }
+        // Merge pattern context into options
+        const generationOptions = {
+            ...options,
+            patterns: patternContext,
+        };
         const generator = new UIComponentGenerator(registry, type, framework);
-        const result = await generator.generate(validation.parsed, options);
+        const result = await generator.generate(validation.parsed, generationOptions);
         const executionTime = Date.now() - startTime;
         await analytics.trackGeneration({
             operation: 'generate_component',
@@ -199,13 +306,16 @@ export async function handleGenerateComponent(args) {
             filesGenerated: result.metadata.filesGenerated,
             linesOfCode: result.metadata.linesOfCode,
             tokensSaved: result.metadata.estimatedTokensSaved,
-            options: options,
+            options: generationOptions,
             executionTimeMs: executionTime,
         });
         return {
             success: true,
             files: result.files,
             metadata: result.metadata,
+            patternsApplied: patternContext?.detected?.length
+                ? patternContext.detected.map(p => p.pattern_id)
+                : undefined,
             tokenSavings: {
                 traditional: result.metadata.linesOfCode * 25,
                 codedna: 100,
@@ -224,18 +334,47 @@ export async function handleGenerateComponent(args) {
 }
 /**
  * Handle codedna_list_generators tool call
+ * @param args.domain Optional domain filter: 'api' | 'frontend' | 'component'
  */
-export async function handleListGenerators() {
+export async function handleListGenerators(args) {
     try {
-        const generators = await registry.listGenerators();
+        const domain = args?.domain;
+        const generators = await registry.listGenerators(domain);
+        // Collect unique UI libraries across all generators
+        const allUiLibraries = new Set();
+        generators.forEach(gen => {
+            gen.uiLibraries?.forEach(lib => allUiLibraries.add(lib));
+        });
+        // Group by domain for easier discovery (only when not filtered)
+        const byDomain = domain ? undefined : generators.reduce((acc, gen) => {
+            const d = gen.domain || 'unknown';
+            if (!acc[d])
+                acc[d] = [];
+            acc[d].push(gen);
+            return acc;
+        }, {});
         return {
             generators,
+            ...(byDomain && { byDomain }),
             summary: {
                 total: generators.length,
+                ...(domain && { filteredByDomain: domain }),
                 byFramework: generators.reduce((acc, gen) => {
                     acc[gen.framework] = (acc[gen.framework] || 0) + 1;
                     return acc;
                 }, {}),
+                byDomain: domain ? undefined : generators.reduce((acc, gen) => {
+                    const d = gen.domain || 'unknown';
+                    acc[d] = (acc[d] || 0) + 1;
+                    return acc;
+                }, {}),
+                availableUiLibraries: Array.from(allUiLibraries),
+            },
+            usage: {
+                api: 'codedna_generate_api(spec, framework, options)',
+                frontend: 'codedna_generate_frontend(spec, framework, options)',
+                component: 'codedna_generate_component(spec, type, framework, options)',
+                note: 'Check generator.uiLibraries for available UI options. Pass ui: "shadcn"|"mui"|"chakra" in options.',
             },
         };
     }
@@ -281,3 +420,232 @@ export async function handleValidateSpec(args) {
         errors: validation.errors,
     };
 }
+// =============================================================================
+// Pattern Library Handlers
+// =============================================================================
+/**
+ * Handle codedna_list_patterns tool call
+ * Lists patterns from the library, optionally filtered by category
+ */
+export async function handleListPatterns(args) {
+    try {
+        const { category, recommended_only, include_anti_patterns = true } = args || {};
+        // Build query parameters
+        const params = new URLSearchParams();
+        if (category)
+            params.set('category', category);
+        if (recommended_only)
+            params.set('recommended_only', 'true');
+        if (!include_anti_patterns)
+            params.set('exclude_anti_patterns', 'true');
+        const patterns = await apiRequest(`/api/v1/codedna/patterns?${params.toString()}`);
+        // Group by category for easier discovery
+        const byCategory = patterns.reduce((acc, p) => {
+            if (!acc[p.category])
+                acc[p.category] = [];
+            acc[p.category].push(p);
+            return acc;
+        }, {});
+        const recommended = patterns.filter(p => p.is_recommended);
+        const antiPatterns = patterns.filter(p => p.is_anti_pattern);
+        return {
+            patterns,
+            byCategory,
+            summary: {
+                total: patterns.length,
+                recommended: recommended.length,
+                antiPatterns: antiPatterns.length,
+                categories: Object.keys(byCategory),
+            },
+            usage: {
+                getDetails: 'codedna_get_pattern(pattern_id) - Get full pattern documentation',
+                detect: 'codedna_detect_patterns(project_path) - Detect patterns in codebase',
+                init: 'codedna_init_project(patterns) - Initialize project with chosen patterns',
+            },
+        };
+    }
+    catch (error) {
+        return {
+            error: 'Failed to list patterns',
+            message: error instanceof Error ? error.message : String(error),
+        };
+    }
+}
+/**
+ * Handle codedna_get_pattern tool call
+ * Gets detailed pattern information including full markdown documentation
+ */
+export async function handleGetPattern(args) {
+    try {
+        const { pattern_id } = args;
+        if (!pattern_id) {
+            return { error: 'pattern_id is required' };
+        }
+        const pattern = await apiRequest(`/api/v1/codedna/patterns/${pattern_id}`);
+        return {
+            pattern,
+            sections: {
+                description: pattern.description,
+                whenToUse: pattern.conditions,
+                whenNotToUse: pattern.anti_conditions,
+                relatedPatterns: pattern.related_patterns,
+                migratesFrom: pattern.migrates_from,
+            },
+            detection: {
+                codeSignals: pattern.code_signals,
+                packageSignals: pattern.package_signals,
+            },
+            content: pattern.content, // Full markdown from R2
+        };
+    }
+    catch (error) {
+        return {
+            error: 'Failed to get pattern',
+            message: error instanceof Error ? error.message : String(error),
+        };
+    }
+}
+/**
+ * Handle codedna_detect_patterns tool call
+ * Detects patterns in a project based on code and package.json signals
+ */
+export async function handleDetectPatterns(args) {
+    try {
+        const { project_path, package_json, code_samples } = args;
+        // Get all patterns with their detection signals
+        const patterns = await apiRequest('/api/v1/codedna/patterns');
+        const detected = [];
+        for (const pattern of patterns) {
+            const matchedSignals = [];
+            let confidence = 0;
+            // Check package.json signals
+            if (package_json?.dependencies || package_json?.devDependencies) {
+                const deps = {
+                    ...(package_json.dependencies || {}),
+                    ...(package_json.devDependencies || {}),
+                };
+                for (const signal of pattern.package_signals) {
+                    if (deps[signal]) {
+                        matchedSignals.push(`package:${signal}`);
+                        confidence += 0.4; // Package match is strong signal
+                    }
+                }
+            }
+            // Check code signals in samples
+            if (code_samples) {
+                const allCode = code_samples.join('\n');
+                for (const signal of pattern.code_signals) {
+                    if (allCode.includes(signal)) {
+                        matchedSignals.push(`code:${signal}`);
+                        confidence += 0.2; // Code match is moderate signal
+                    }
+                }
+            }
+            // Add to detected if any signals matched
+            if (matchedSignals.length > 0) {
+                detected.push({
+                    pattern,
+                    confidence: Math.min(confidence, 1.0),
+                    signals: matchedSignals,
+                });
+            }
+        }
+        // Sort by confidence
+        detected.sort((a, b) => b.confidence - a.confidence);
+        // Separate recommended vs detected anti-patterns
+        const goodPatterns = detected.filter(d => !d.pattern.is_anti_pattern);
+        const antiPatterns = detected.filter(d => d.pattern.is_anti_pattern);
+        return {
+            detected: goodPatterns,
+            warnings: antiPatterns.length > 0 ? {
+                message: 'Anti-patterns detected in codebase',
+                patterns: antiPatterns,
+            } : undefined,
+            summary: {
+                totalDetected: detected.length,
+                goodPatterns: goodPatterns.length,
+                antiPatterns: antiPatterns.length,
+                highConfidence: detected.filter(d => d.confidence >= 0.6).length,
+            },
+            recommendations: patterns
+                .filter(p => p.is_recommended && !detected.find(d => d.pattern.pattern_id === p.pattern_id))
+                .slice(0, 5)
+                .map(p => ({
+                pattern_id: p.pattern_id,
+                name: p.name,
+                description: p.description,
+                reason: 'Recommended pattern not yet detected in codebase',
+            })),
+        };
+    }
+    catch (error) {
+        return {
+            error: 'Failed to detect patterns',
+            message: error instanceof Error ? error.message : String(error),
+        };
+    }
+}
+/**
+ * Handle codedna_init_project tool call
+ * Initializes a new project with recommended patterns
+ */
+export async function handleInitProject(args) {
+    try {
+        const { project_id, patterns: selectedPatterns, auto_detect = true, project_type = 'new' } = args;
+        if (!project_id) {
+            return { error: 'project_id is required' };
+        }
+        // Get all patterns
+        const allPatterns = await apiRequest('/api/v1/codedna/patterns');
+        let patternsToApply;
+        if (project_type === 'new' && !selectedPatterns) {
+            // For new projects, use recommended patterns
+            patternsToApply = allPatterns
+                .filter(p => p.is_recommended && !p.is_anti_pattern)
+                .map(p => p.pattern_id);
+        }
+        else if (selectedPatterns) {
+            // Use explicitly selected patterns
+            patternsToApply = selectedPatterns;
+        }
+        else {
+            // No patterns specified
+            patternsToApply = [];
+        }
+        // Store pattern associations in memory
+        const stored = await apiRequest(`/api/v1/codedna/projects/${project_id}/patterns`, 'POST', {
+            patterns: patternsToApply,
+            detection_source: selectedPatterns ? 'user_selected' : 'recommended',
+        });
+        const appliedPatterns = allPatterns.filter(p => patternsToApply.includes(p.pattern_id));
+        return {
+            success: stored.success,
+            project_id,
+            project_type,
+            patterns: appliedPatterns.map(p => ({
+                pattern_id: p.pattern_id,
+                name: p.name,
+                category: p.category,
+                description: p.description,
+            })),
+            summary: {
+                totalPatterns: patternsToApply.length,
+                byCategory: appliedPatterns.reduce((acc, p) => {
+                    acc[p.category] = (acc[p.category] || 0) + 1;
+                    return acc;
+                }, {}),
+            },
+            nextSteps: [
+                'Patterns are now associated with this project',
+                'CodeDNA generators will use these patterns for template selection',
+                'Use codedna_detect_patterns to update as codebase evolves',
+            ],
+        };
+    }
+    catch (error) {
+        return {
+            error: 'Failed to initialize project patterns',
+            message: error instanceof Error ? error.message : String(error),
+        };
+    }
+}

package/dist/handlers/tool-handlers.js

@@ -13,7 +13,7 @@ import { formatContextForClaude } from '../helpers/formatter.js';
 import { createTask, listTasks, getTask, claimTask, releaseTask, updateTaskStatus, addTaskContext, getTaskSummary, heartbeatTask, parseJsonArray, getDispatchableTasks, getExecutionContext, resolveTaskDependencies, getEpicStatus, getActiveTaskCount, } from '../helpers/tasks.js';
 import { detectTimedOutTasks, retryTask, failTask, autoRetryTimedOutTasks, } from '../helpers/tasks-retry.js';
 import { detectLibrariesFromPlan } from '../helpers/library-detection.js';
-import { handleGenerateApi, handleGenerateFrontend, handleGenerateComponent, handleListGenerators, handleValidateSpec, } from './codedna-handlers.js';
+import { handleGenerateApi, handleGenerateFrontend, handleGenerateComponent, handleListGenerators, handleValidateSpec, handleListPatterns, handleGetPattern, handleDetectPatterns, handleInitProject, } from './codedna-handlers.js';
 export function registerToolHandlers(server) {
     server.setRequestHandler(CallToolRequestSchema, async (request) => {
         const { name, arguments: args } = request.params;
@@ -1697,7 +1697,7 @@ export function registerToolHandlers(server) {
                     };
                 }
                 case 'codedna_list_generators': {
-                    const result = await handleListGenerators();
+                    const result = await handleListGenerators(args);
                     mcpLogger.toolResult(name, true, timer());
                     return {
                         content: [{
@@ -1716,6 +1716,49 @@ export function registerToolHandlers(server) {
                             }],
                     };
                 }
+                // =====================================================================
+                // CodeDNA Pattern Library Tools
+                // =====================================================================
+                case 'codedna_list_patterns': {
+                    const result = await handleListPatterns(args);
+                    mcpLogger.toolResult(name, true, timer());
+                    return {
+                        content: [{
+                                type: 'text',
+                                text: JSON.stringify(result, null, 2),
+                            }],
+                    };
+                }
+                case 'codedna_get_pattern': {
+                    const result = await handleGetPattern(args);
+                    mcpLogger.toolResult(name, true, timer());
+                    return {
+                        content: [{
+                                type: 'text',
+                                text: JSON.stringify(result, null, 2),
+                            }],
+                    };
+                }
+                case 'codedna_detect_patterns': {
+                    const result = await handleDetectPatterns(args);
+                    mcpLogger.toolResult(name, true, timer());
+                    return {
+                        content: [{
+                                type: 'text',
+                                text: JSON.stringify(result, null, 2),
+                            }],
+                    };
+                }
+                case 'codedna_init_project': {
+                    const result = await handleInitProject(args);
+                    mcpLogger.toolResult(name, true, timer());
+                    return {
+                        content: [{
+                                type: 'text',
+                                text: JSON.stringify(result, null, 2),
+                            }],
+                    };
+                }
                 default:
                     throw new Error(`Unknown tool: ${name}`);
             }

package/dist/helpers/workers.js

@@ -37,11 +37,17 @@ When complete, provide a concise summary of changes made.`,
 - Response formatting
 - Error handling for endpoints
 
-CODEDNA PRIORITY: Before writing CRUD code manually, check if CodeDNA can generate it:
-- Look for Entity DSL in task (e.g., "User(email:string:unique, password:string:hashed)")
-- Call codedna_generate_api(spec, framework="express", options={...})
-- This generates models, controllers, routes, validation in seconds
-- Only write manually for complex business logic that can't be generated
+PATTERN DETECTION (for existing projects):
+1. Call codedna_detect_patterns(package_json) to find existing patterns
+2. MATCH detected patterns - don't introduce conflicting libraries
+3. Check for: zod vs yup validation, tanstack-query vs swr, etc.
+
+CODEDNA PRIORITY: Before writing CRUD code manually:
+1. Call codedna_list_generators() to discover available generators
+2. Look for Entity DSL in task (e.g., "User(email:string:unique, password:string:hashed)")
+3. Detect framework from project (check package.json, existing patterns)
+4. Call codedna_generate_api(spec, framework="<detected>", options={...})
+5. Only write manually for complex business logic that can't be generated
 
 Focus only on API-related changes. Do not modify schema or extraction code.
 When complete, provide a concise summary of endpoints created or modified.`,
@@ -99,6 +105,40 @@ TOOLS: Use codebase_context to see file dependencies.
 
 Focus on integration without modifying core implementation logic.
 When complete, provide a concise summary of integrations configured.`,
+    },
+    'frontend-expert': {
+        id: 'frontend-expert',
+        name: 'Frontend Expert',
+        description: 'Specialises in React, Vue, and frontend component development',
+        domains: ['**/components/**', '**/pages/**', '**/app/**', '**/*.tsx', '**/*.vue'],
+        capabilities: ['react', 'vue', 'components', 'forms', 'tables', 'styling'],
+        promptTemplate: `You are a frontend development expert. Your domain is limited to:
+- React/Vue components and pages
+- Form and table components
+- UI component libraries
+- Client-side state management
+
+PATTERN DETECTION (CRITICAL for existing projects):
+1. Call codedna_detect_patterns(package_json) to detect existing patterns
+2. RESPECT detected patterns - consistency > "better":
+   - Compound components? Use compound pattern
+   - React Hook Form? Don't introduce Formik
+   - Zustand? Don't add Redux
+   - Tailwind? Match styling approach
+3. Check codedna_list_patterns(category="anti-patterns") for code smells to avoid
+
+CODEDNA PRIORITY: Before writing UI components manually:
+1. Call codedna_list_generators() to discover available generators
+2. Detect UI framework from project (check package.json for react, vue, etc.)
+3. Check for UI library (package.json: @shadcn/ui, @mui/material, @chakra-ui, etc.)
+4. Call codedna_generate_frontend or codedna_generate_component with detected settings
+5. DO NOT assume any specific framework/library - discover via list_generators, detect from project
+
+TOOLS: Use codebase_find to discover existing component patterns.
+TOOLS: Use memory_search for past UI decisions.
+
+Focus on components and pages. Do not modify API or schema code.
+When complete, provide a concise summary of components created.`,
     },
     'general-expert': {
         id: 'general-expert',
@@ -108,7 +148,13 @@ When complete, provide a concise summary of integrations configured.`,
         capabilities: ['general-development', 'refactoring', 'documentation', 'testing'],
         promptTemplate: `You are a general purpose development expert.
 
-CODEDNA: For CRUD/API tasks, use codedna_generate_api before writing code manually.
+CODEDNA - DISCOVER THEN DETECT:
+1. Call codedna_list_generators() to see what's available
+2. Detect project framework from package.json/pyproject.toml
+3. Match detected framework to generator capabilities
+4. If no match, ASK the user which framework to use
+5. DO NOT assume any specific framework exists - always discover first
+
 TOOLS: Use memory_search and codebase_find before implementing from scratch.
 
 Handle this task with care:
@@ -267,7 +313,6 @@ export function matchTaskToWorker(task) {
         'database': 'schema-expert',
         'sql': 'schema-expert',
         'migration': 'schema-expert',
-        'table': 'schema-expert',
         'api': 'api-expert',
         'route': 'api-expert',
         'endpoint': 'api-expert',
@@ -282,6 +327,14 @@ export function matchTaskToWorker(task) {
         'integration': 'integration-expert',
         'config': 'integration-expert',
         'wiring': 'integration-expert',
+        'component': 'frontend-expert',
+        'frontend': 'frontend-expert',
+        'react': 'frontend-expert',
+        'vue': 'frontend-expert',
+        'form': 'frontend-expert',
+        'table': 'frontend-expert',
+        'page': 'frontend-expert',
+        'ui': 'frontend-expert',
     };
     for (const [keyword, workerId] of Object.entries(keywordMap)) {
         if (searchText.includes(keyword)) {