@tpitre/story-ui 3.6.2 → 3.8.0

package/dist/mcp-server/routes/generateStoryStream.js

@@ -12,6 +12,7 @@ import * as path from 'path';
 import { generateStory } from '../../story-generator/generateStory.js';
 import { EnhancedComponentDiscovery } from '../../story-generator/enhancedComponentDiscovery.js';
 import { buildClaudePrompt as buildFlexiblePrompt, buildFrameworkAwarePrompt, detectProjectFramework, } from '../../story-generator/promptGenerator.js';
+import { getAdapter } from '../../story-generator/framework-adapters/index.js';
 import { loadUserConfig, validateConfig } from '../../story-generator/configLoader.js';
 import { extractAndValidateCodeBlock, createFallbackStory } from '../../story-generator/validateStory.js';
 import { isBlacklistedComponent, isBlacklistedIcon, getBlacklistErrorMessage, ICON_CORRECTIONS } from '../../story-generator/componentBlacklist.js';
@@ -19,7 +20,10 @@ import { StoryTracker } from '../../story-generator/storyTracker.js';
 import { getDocumentation } from '../../story-generator/documentation-sources.js';
 import { postProcessStory } from '../../story-generator/postProcessStory.js';
 import { validateStory } from '../../story-generator/storyValidator.js';
+import { validateStoryCode } from '../../story-generator/validateStory.js';
+import { aggregateValidationErrors, shouldContinueRetrying, buildSelfHealingPrompt, hasNoErrors, getTotalErrorCount, createEmptyErrors, formatErrorsForLog, selectBestAttempt, } from '../../story-generator/selfHealingLoop.js';
 import { StoryHistoryManager } from '../../story-generator/storyHistory.js';
+import { logger } from '../../story-generator/logger.js';
 import { UrlRedirectService } from '../../story-generator/urlRedirectService.js';
 import { chatCompletion, generateTitle as llmGenerateTitle, isProviderConfigured, getProviderInfo, chatCompletionWithImages, buildMessageWithImages } from '../../story-generator/llm-providers/story-llm-service.js';
 import { processImageInputs } from '../../story-generator/imageProcessor.js';
@@ -94,11 +98,30 @@ class StreamWriter {
         return Date.now() - this.startTime;
     }
 }
+// Build suggestion using the user's actual discovered components (design-system agnostic)
+function buildComponentSuggestion(components) {
+    if (!components?.length) {
+        return 'Check your story-ui.config.js to ensure components are properly configured.';
+    }
+    // Show a sample of the user's actual available components (up to 5)
+    const sampleComponents = components
+        .slice(0, 5)
+        .map(c => c.name)
+        .join(', ');
+    const moreCount = components.length > 5
+        ? ` and ${components.length - 5} more`
+        : '';
+    return `Your available components include: ${sampleComponents}${moreCount}. Check story-ui.config.js if expected components are missing.`;
+}
 // Analyze prompt to determine intent
 async function analyzeIntent(prompt, config, conversation, previousCode, options) {
-    // Determine framework
+    // Determine framework - priority: config > explicit option > auto-detect > default
     let framework = 'react';
-    if (options.framework) {
+    if (config.componentFramework) {
+        // First priority: use config.componentFramework if set
+        framework = config.componentFramework;
+    }
+    else if (options.framework) {
         framework = options.framework;
     }
     else if (options.autoDetectFramework) {
@@ -458,25 +481,53 @@ export async function generateStoryFromPromptStream(req, res) {
         const messages = [
             { role: 'user', content: initialPrompt }
         ];
-        // Step 4: Call LLM
+        // Step 4: Call LLM with Self-Healing Loop
         currentStep++;
         stream.sendProgress(currentStep, totalSteps, 'llm_thinking', 'AI is generating your story...');
-        // Validation and retry loop
+        // Determine framework for self-healing options
+        const detectedFrameworkForHealing = config.componentFramework ||
+            framework ||
+            intent.framework ||
+            'react';
+        // Get available component names for self-healing prompts
+        const availableComponentNames = components.map(c => c.name);
+        // Self-healing options (design-system agnostic)
+        const selfHealingOptions = {
+            maxAttempts: 3,
+            availableComponents: availableComponentNames,
+            framework: detectedFrameworkForHealing,
+            importPath: config.importPath,
+        };
+        // Initialize self-healing state
         let aiText = '';
-        let validationErrors = [];
-        const maxRetries = 3;
+        let finalErrors = createEmptyErrors();
+        const errorHistory = [];
+        const allAttempts = [];
         let attempts = 0;
-        while (attempts < maxRetries) {
+        let selfHealingUsed = false;
+        let lastClaudeResponse = '';
+        // Self-Healing Retry Loop
+        while (attempts < selfHealingOptions.maxAttempts) {
             attempts++;
             stream.trackLLMCall();
             if (attempts > 1) {
-                stream.sendRetry(attempts, maxRetries, 'Fixing validation errors', validationErrors.map(e => e.message));
+                selfHealingUsed = true;
+                const allErrors = [
+                    ...finalErrors.syntaxErrors,
+                    ...finalErrors.patternErrors,
+                    ...finalErrors.importErrors,
+                ];
+                stream.sendRetry(attempts, selfHealingOptions.maxAttempts, 'AI self-healing: fixing validation errors', allErrors);
+                logger.log(`🔄 Self-healing attempt ${attempts}/${selfHealingOptions.maxAttempts}`);
             }
+            // Call LLM
             const claudeResponse = await callLLM(messages, processedImages.length > 0 ? processedImages : undefined);
+            lastClaudeResponse = claudeResponse;
+            // Extract code block
             const extractedCode = extractCodeBlock(claudeResponse);
             if (!extractedCode) {
                 aiText = claudeResponse;
-                if (attempts < maxRetries) {
+                if (attempts < selfHealingOptions.maxAttempts) {
                     messages.push({ role: 'assistant', content: aiText });
                     messages.push({ role: 'user', content: 'You did not provide a code block. Please provide the complete story in a single `tsx` code block.' });
                     continue;
@@ -488,46 +539,92 @@ export async function generateStoryFromPromptStream(req, res) {
             else {
                 aiText = extractedCode;
             }
-            // Step 5: Validate
+            // Step 5: Comprehensive Validation (Pattern + AST + Import)
             currentStep = 5;
             stream.sendProgress(currentStep, totalSteps, 'validating', 'Validating generated code...');
-            validationErrors = validateStory(aiText);
-            if (validationErrors.length === 0) {
+            // 1. Pattern validation
+            const patternErrors = validateStory(aiText);
+            // 2. AST validation with auto-fix attempt
+            let astResult = null;
+            let codeToValidate = aiText;
+            try {
+                astResult = validateStoryCode(aiText, 'story.tsx', config);
+                if (astResult.fixedCode) {
+                    codeToValidate = astResult.fixedCode;
+                    aiText = codeToValidate;
+                    logger.log('🔧 Auto-fix applied for syntax issues');
+                }
+            }
+            catch (astError) {
+                logger.error('AST validation error:', astError);
+            }
+            // 3. Import validation
+            const importValidation = await preValidateImports(codeToValidate, config, discovery);
+            const importErrors = importValidation.isValid ? [] : importValidation.errors;
+            // Aggregate all errors
+            const currentErrors = aggregateValidationErrors(astResult, patternErrors, importErrors);
+            errorHistory.push(currentErrors);
+            allAttempts.push({ code: aiText, errors: currentErrors });
+            // Check if we have no errors
+            if (hasNoErrors(currentErrors)) {
+                logger.log('✅ Validation passed on attempt', attempts);
                 stream.sendValidation({
                     isValid: true,
                     errors: [],
                     warnings: [],
-                    autoFixApplied: false
+                    autoFixApplied: !!astResult?.fixedCode
                 });
+                finalErrors = currentErrors;
                 break;
             }
+            // Log validation failures
+            logger.log(`⚠️ Attempt ${attempts} validation errors: ${formatErrorsForLog(currentErrors)}`);
             stream.sendValidation({
                 isValid: false,
-                errors: validationErrors.map(e => e.message),
+                errors: [
+                    ...currentErrors.syntaxErrors,
+                    ...currentErrors.patternErrors,
+                    ...currentErrors.importErrors,
+                ],
                 warnings: [],
-                autoFixApplied: false
+                autoFixApplied: !!astResult?.fixedCode
             });
-            if (attempts < maxRetries) {
-                const errorFeedback = validationErrors
-                    .map(err => `- Line ${err.line}: ${err.message}`)
-                    .join('\n');
-                const retryPrompt = `Your previous attempt failed validation with the following errors:\n${errorFeedback}\n\nPlease correct these issues and provide the full, valid story code.`;
-                messages.push({ role: 'assistant', content: claudeResponse });
-                messages.push({ role: 'user', content: retryPrompt });
+            finalErrors = currentErrors;
+            // Check if we should continue retrying
+            const retryDecision = shouldContinueRetrying(attempts, selfHealingOptions.maxAttempts, errorHistory);
+            if (!retryDecision.shouldRetry) {
+                logger.log(`🛑 Stopping retries: ${retryDecision.reason}`);
+                break;
+            }
+            // Build self-healing prompt and add to messages
+            const healingPrompt = buildSelfHealingPrompt(aiText, currentErrors, attempts, selfHealingOptions);
+            messages.push({ role: 'assistant', content: claudeResponse });
+            messages.push({ role: 'user', content: healingPrompt });
+        }
+        // Select best attempt if we still have errors
+        if (!hasNoErrors(finalErrors) && allAttempts.length > 0) {
+            const bestAttempt = selectBestAttempt(allAttempts);
+            if (bestAttempt) {
+                aiText = bestAttempt.code;
+                finalErrors = bestAttempt.errors;
+                logger.log(`📌 Selected best attempt with ${getTotalErrorCount(finalErrors)} errors`);
             }
         }
-        // Step 6: Code extraction and validation
+        // Log self-healing summary
+        if (selfHealingUsed) {
+            logger.log(`🔄 Self-healing summary: ${attempts} attempts, final errors: ${formatErrorsForLog(finalErrors)}`);
+        }
+        // Step 6: Code extraction and final processing
         currentStep = 6;
         stream.sendProgress(currentStep, totalSteps, 'code_extracted', 'Processing generated code...');
-        // Pre-validate imports
-        const preValidation = await preValidateImports(aiText, config, discovery);
-        if (!preValidation.isValid) {
+        // If we still have import errors after all attempts, report them
+        if (finalErrors.importErrors.length > 0) {
             stream.sendError({
                 code: 'INVALID_IMPORTS',
                 message: 'Generated code contains invalid imports',
-                details: preValidation.errors.join('; '),
+                details: finalErrors.importErrors.join('; '),
                 recoverable: true,
-                suggestion: 'Try using basic components like Box, Stack, Button'
+                suggestion: buildComponentSuggestion(components)
             });
             res.end();
             return;
@@ -569,11 +666,22 @@ export async function generateStoryFromPromptStream(req, res) {
         // Step 7: Post-processing
         currentStep++;
         stream.sendProgress(currentStep, totalSteps, 'post_processing', 'Applying finishing touches...');
-        // Ensure React import
-        if (!fileContents.includes("import React from 'react';")) {
+        // Detect framework from config or auto-detection
+        const detectedFramework = config.componentFramework ||
+            framework ||
+            intent.framework ||
+            'react';
+        // Only add React import for React framework
+        if (detectedFramework === 'react' && !fileContents.includes("import React from 'react';")) {
             fileContents = "import React from 'react';\n" + fileContents;
         }
         let fixedFileContents = postProcessStory(fileContents, config.importPath);
+        // Apply framework-specific post-processing
+        const frameworkAdapter = getAdapter(detectedFramework);
+        if (frameworkAdapter) {
+            logger.log(`🔧 Applying ${detectedFramework} framework post-processing`);
+            fixedFileContents = frameworkAdapter.postProcess(fixedFileContents);
+        }
         // Generate title
         let aiTitle;
         if (isActualUpdate && originalTitle) {
@@ -631,6 +739,10 @@ export async function generateStoryFromPromptStream(req, res) {
             finalFileName = fileName || fileNameFromTitle(aiTitle, hash);
             storyId = `story-${hash}`;
         }
+        // Ensure file extension is correct
+        if (finalFileName && !finalFileName.endsWith('.stories.tsx')) {
+            finalFileName = finalFileName + '.stories.tsx';
+        }
         // Step 8: Save story
         currentStep++;
         stream.sendProgress(currentStep, totalSteps, 'saving', 'Saving your story...');
@@ -712,7 +824,13 @@ async function buildClaudePromptWithContext(userPrompt, config, conversation, pr
     const discoveredComponents = components || await discovery.discoverAll();
     let useFrameworkAware = false;
     let frameworkOptions;
-    if (options?.framework) {
+    // Priority: config.componentFramework > explicit option > auto-detect
+    if (config.componentFramework) {
+        // First priority: use config.componentFramework if set
+        useFrameworkAware = true;
+        frameworkOptions = { framework: config.componentFramework };
+    }
+    else if (options?.framework) {
         useFrameworkAware = true;
         frameworkOptions = { framework: options.framework };
     }

package/dist/story-generator/dynamicPackageDiscovery.d.ts

@@ -10,12 +10,17 @@ export interface PackageExports {
     packageVersion: string;
 }
 /**
- * Dynamically discovers what components are actually available in an installed package
+ * Dynamically discovers what components are actually available in an installed package.
+ *
+ * IMPORTANT: This class is FRAMEWORK-aware, not DESIGN-SYSTEM-aware.
+ * It uses GENERIC patterns based on the framework type (React, Vue, Angular, Svelte, Web Components)
+ * without any knowledge of specific design systems (Mantine, Vuetify, Material, Skeleton, Shoelace, etc.)
  */
 export declare class DynamicPackageDiscovery {
     private packageName;
     private projectRoot;
-    constructor(packageName: string, projectRoot?: string);
+    private framework;
+    constructor(packageName: string, projectRoot?: string, framework?: string);
     /**
      * Get the real exports from the installed package
      */
@@ -63,8 +68,36 @@ export declare class DynamicPackageDiscovery {
     /**
      * Alternative discovery method when package imports fail due to CSS
      * Analyzes package.json exports and TypeScript definitions
+     *
+     * IMPORTANT: This uses GENERIC framework-based discovery patterns.
+     * It has NO knowledge of specific design systems - only framework types.
      */
     private discoverFromPackageStructure;
+    /**
+     * GENERIC Vue Framework Discovery: Parse ES module re-exports
+     * Works with Vue component libraries that use: export * from "./ComponentName/index.js" pattern
+     * Searches common locations: lib/components/, src/components/, components/
+     */
+    private discoverVueFrameworkComponents;
+    /**
+     * GENERIC Web Components Discovery: Parse custom-elements.json manifest
+     * Custom Elements Manifest is a standard spec for documenting Web Components
+     * Works with any Web Components library that provides a custom-elements.json manifest
+     */
+    private discoverWebComponentsFromManifest;
+    /**
+     * GENERIC Angular Framework Discovery: Scan module directories
+     * Works with Angular component libraries that use NgModule patterns
+     * Discovers modules based on directory structure and file patterns
+     */
+    private discoverAngularFrameworkComponents;
+    /**
+     * GENERIC Svelte Framework Discovery: Scan for .svelte component files
+     * Works with any Svelte component library that includes .svelte files
+     * Searches common locations: dist/, src/, lib/, components/
+     * Also detects CSS-only packages that provide no Svelte components
+     */
+    private discoverSvelteFrameworkComponents;
     /**
      * Scan package subdirectories for components (e.g., antd/button, chakra-ui/input)
      */

package/dist/story-generator/dynamicPackageDiscovery.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"dynamicPackageDiscovery.d.ts","sourceRoot":"","sources":["../../story-generator/dynamicPackageDiscovery.ts"],"names":[],"mappings":"AAMA,MAAM,WAAW,oBAAoB;IACnC,IAAI,EAAE,MAAM,CAAC;IACb,WAAW,EAAE,OAAO,CAAC;IACrB,IAAI,EAAE,UAAU,GAAG,OAAO,GAAG,QAAQ,GAAG,SAAS,CAAC;IAClD,eAAe,CAAC,EAAE,MAAM,CAAC;CAC1B;AAED,MAAM,WAAW,cAAc;IAC7B,UAAU,EAAE,oBAAoB,EAAE,CAAC;IACnC,UAAU,EAAE,MAAM,EAAE,CAAC;IACrB,cAAc,EAAE,MAAM,CAAC;CACxB;AAED;;GAEG;AACH,qBAAa,uBAAuB;IAClC,OAAO,CAAC,WAAW,CAAS;IAC5B,OAAO,CAAC,WAAW,CAAS;gBAEhB,WAAW,EAAE,MAAM,EAAE,WAAW,GAAE,MAAsB;IAKpE;;OAEG;IACG,qBAAqB,IAAI,OAAO,CAAC,cAAc,GAAG,IAAI,CAAC;IA0G7D;;OAEG;YACW,cAAc;IAiD5B;;OAEG;IACH,OAAO,CAAC,iBAAiB;IA2BzB;;OAEG;IACH,OAAO,CAAC,eAAe;IA4BvB;;OAEG;IACH,OAAO,CAAC,uBAAuB;IAyB/B;;OAEG;IACH,OAAO,CAAC,0BAA0B;IASlC;;OAEG;IACH,OAAO,CAAC,aAAa;IA6BrB;;OAEG;IACG,0BAA0B,IAAI,OAAO,CAAC,MAAM,EAAE,CAAC;IAYrD;;OAEG;IACG,sBAAsB,CAAC,cAAc,EAAE,MAAM,EAAE,GAAG,OAAO,CAAC;QAC9D,KAAK,EAAE,MAAM,EAAE,CAAC;QAChB,OAAO,EAAE,MAAM,EAAE,CAAC;QAClB,WAAW,EAAE,GAAG,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;KAClC,CAAC;IAyBF;;OAEG;IACH,OAAO,CAAC,oBAAoB;IAkC5B;;;OAGG;IACH,OAAO,CAAC,4BAA4B;IA2CpC;;OAEG;IACH,OAAO,CAAC,2BAA2B;IAiDnC;;OAEG;IACH,OAAO,CAAC,4BAA4B;IAoCpC;;OAEG;IACH,OAAO,CAAC,eAAe;IAcvB;;OAEG;IACH,OAAO,CAAC,6BAA6B;IAyBrC;;OAEG;IACH,OAAO,CAAC,iCAAiC;CA+B1C;AAED;;GAEG;AACH,wBAAgB,sBAAsB,CAAC,WAAW,EAAE,MAAM,EAAE,WAAW,CAAC,EAAE,MAAM,GAAG,uBAAuB,CAEzG;AAED;;GAEG;AACH,wBAAsB,oBAAoB,CAAC,WAAW,EAAE,MAAM,EAAE,WAAW,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC,MAAM,EAAE,CAAC,CAGvG"}
+{"version":3,"file":"dynamicPackageDiscovery.d.ts","sourceRoot":"","sources":["../../story-generator/dynamicPackageDiscovery.ts"],"names":[],"mappings":"AAMA,MAAM,WAAW,oBAAoB;IACnC,IAAI,EAAE,MAAM,CAAC;IACb,WAAW,EAAE,OAAO,CAAC;IACrB,IAAI,EAAE,UAAU,GAAG,OAAO,GAAG,QAAQ,GAAG,SAAS,CAAC;IAClD,eAAe,CAAC,EAAE,MAAM,CAAC;CAC1B;AAED,MAAM,WAAW,cAAc;IAC7B,UAAU,EAAE,oBAAoB,EAAE,CAAC;IACnC,UAAU,EAAE,MAAM,EAAE,CAAC;IACrB,cAAc,EAAE,MAAM,CAAC;CACxB;AAED;;;;;;GAMG;AACH,qBAAa,uBAAuB;IAClC,OAAO,CAAC,WAAW,CAAS;IAC5B,OAAO,CAAC,WAAW,CAAS;IAC5B,OAAO,CAAC,SAAS,CAAS;gBAEd,WAAW,EAAE,MAAM,EAAE,WAAW,GAAE,MAAsB,EAAE,SAAS,GAAE,MAAgB;IAMjG;;OAEG;IACG,qBAAqB,IAAI,OAAO,CAAC,cAAc,GAAG,IAAI,CAAC;IA0H7D;;OAEG;YACW,cAAc;IAiD5B;;OAEG;IACH,OAAO,CAAC,iBAAiB;IA2BzB;;OAEG;IACH,OAAO,CAAC,eAAe;IA4BvB;;OAEG;IACH,OAAO,CAAC,uBAAuB;IAyB/B;;OAEG;IACH,OAAO,CAAC,0BAA0B;IASlC;;OAEG;IACH,OAAO,CAAC,aAAa;IA6BrB;;OAEG;IACG,0BAA0B,IAAI,OAAO,CAAC,MAAM,EAAE,CAAC;IAYrD;;OAEG;IACG,sBAAsB,CAAC,cAAc,EAAE,MAAM,EAAE,GAAG,OAAO,CAAC;QAC9D,KAAK,EAAE,MAAM,EAAE,CAAC;QAChB,OAAO,EAAE,MAAM,EAAE,CAAC;QAClB,WAAW,EAAE,GAAG,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;KAClC,CAAC;IAyBF;;OAEG;IACH,OAAO,CAAC,oBAAoB;IAkC5B;;;;;;OAMG;IACH,OAAO,CAAC,4BAA4B;IAyFpC;;;;OAIG;IACH,OAAO,CAAC,8BAA8B;IAwDtC;;;;OAIG;IACH,OAAO,CAAC,iCAAiC;IAyDzC;;;;OAIG;IACH,OAAO,CAAC,kCAAkC;IA0E1C;;;;;OAKG;IACH,OAAO,CAAC,iCAAiC;IAqFzC;;OAEG;IACH,OAAO,CAAC,2BAA2B;IAiDnC;;OAEG;IACH,OAAO,CAAC,4BAA4B;IAoCpC;;OAEG;IACH,OAAO,CAAC,eAAe;IAcvB;;OAEG;IACH,OAAO,CAAC,6BAA6B;IAyBrC;;OAEG;IACH,OAAO,CAAC,iCAAiC;CA+B1C;AAED;;GAEG;AACH,wBAAgB,sBAAsB,CAAC,WAAW,EAAE,MAAM,EAAE,WAAW,CAAC,EAAE,MAAM,GAAG,uBAAuB,CAEzG;AAED;;GAEG;AACH,wBAAsB,oBAAoB,CAAC,WAAW,EAAE,MAAM,EAAE,WAAW,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC,MAAM,EAAE,CAAC,CAGvG"}