@tpitre/story-ui 3.10.2 → 3.10.4

package/dist/mcp-server/routes/generateStory.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"generateStory.d.ts","sourceRoot":"","sources":["../../../mcp-server/routes/generateStory.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,SAAS,CAAC;AAgc5C,wBAAsB,uBAAuB,CAAC,GAAG,EAAE,OAAO,EAAE,GAAG,EAAE,QAAQ,2DAwfxE"}
+{"version":3,"file":"generateStory.d.ts","sourceRoot":"","sources":["../../../mcp-server/routes/generateStory.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,SAAS,CAAC;AAua5C,wBAAsB,uBAAuB,CAAC,GAAG,EAAE,OAAO,EAAE,GAAG,EAAE,QAAQ,2DA0hBxE"}

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

@@ -4,7 +4,8 @@ import * as path from 'path';
 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 { createFallbackStory, validateStoryCode } from '../../story-generator/validateStory.js';
+import { validateStoryCode } from '../../story-generator/validateStory.js';
+import { createFrameworkAwareFallbackStory } from './storyHelpers.js';
 import { isBlacklistedComponent, isBlacklistedIcon, getBlacklistErrorMessage, ICON_CORRECTIONS } from '../../story-generator/componentBlacklist.js';
 import { StoryTracker } from '../../story-generator/storyTracker.js';
 import { EnhancedComponentDiscovery } from '../../story-generator/enhancedComponentDiscovery.js';
@@ -43,54 +44,24 @@ async function buildClaudePrompt(userPrompt) {
 }
 // Enhanced function that includes conversation context and previous code
 // Now supports multi-framework prompt generation and vision-aware prompts
+// NOTE: Framework is now REQUIRED - caller must pass the detected framework
 async function buildClaudePromptWithContext(userPrompt, config, conversation, previousCode, options) {
     const discovery = new EnhancedComponentDiscovery(config);
     const components = await discovery.discoverAll();
-    // Determine if we should use framework-aware prompts
-    let useFrameworkAware = false;
-    let frameworkOptions;
-    if (options?.framework) {
-        // Explicit framework specified in request
-        useFrameworkAware = true;
-        frameworkOptions = { framework: options.framework };
-        logger.log(`📦 Using specified framework: ${options.framework}`);
-    }
-    else if (config.componentFramework || config.framework) {
-        // Framework configured in story-ui.config.js
-        const configFramework = (config.componentFramework || config.framework);
-        useFrameworkAware = true;
-        frameworkOptions = { framework: configFramework };
-        logger.log(`📦 Using framework from config: ${configFramework}`);
-    }
-    else if (options?.autoDetectFramework) {
-        // Auto-detect framework from project
-        try {
-            const detectedFramework = await detectProjectFramework(process.cwd());
-            useFrameworkAware = true;
-            frameworkOptions = { framework: detectedFramework };
-            // CRITICAL: Also set config.componentFramework so validateStoryCode receives the correct framework
-            // This ensures React imports are properly removed for non-React frameworks during post-processing
-            config.componentFramework = detectedFramework;
-            logger.log(`📦 Auto-detected framework: ${detectedFramework}`);
-        }
-        catch (error) {
-            logger.warn('Failed to auto-detect framework, using React default', { error });
-        }
+    // SIMPLIFIED: Trust the passed framework from early detection
+    // The caller (main handler) is responsible for detecting the framework once
+    // We no longer re-detect here - this eliminates duplicate detection and inconsistency
+    if (!options?.framework) {
+        throw new Error('Framework must be passed to buildClaudePromptWithContext - early detection should have determined it');
     }
+    const frameworkOptions = { framework: options.framework };
     // Always start with component discovery as the authoritative source
     logger.log(`📦 Discovered ${components.length} components from ${config.importPath}`);
     const availableComponents = components.map(c => c.name).join(', ');
     logger.log(`✅ Available components: ${availableComponents}`);
-    // Build base prompt with discovered components (always required)
-    // Use framework-aware prompt if configured, otherwise use legacy React prompt
-    let prompt;
-    if (useFrameworkAware && frameworkOptions) {
-        prompt = await buildFrameworkAwarePrompt(userPrompt, config, components, frameworkOptions);
-        logger.log(`🔧 Built framework-aware prompt for ${frameworkOptions.framework}`);
-    }
-    else {
-        prompt = await buildFlexiblePrompt(userPrompt, config, components);
-    }
+    // Build framework-aware prompt since we now always have a framework
+    let prompt = await buildFrameworkAwarePrompt(userPrompt, config, components, frameworkOptions);
+    logger.log(`🔧 Built framework-aware prompt for ${options.framework}`);
     // Enhance prompt with vision-aware context if vision mode is provided
     if (options?.visionMode) {
         logger.log(`🔍 Enhancing prompt with vision mode: ${options.visionMode}`);
@@ -98,7 +69,7 @@ async function buildClaudePromptWithContext(userPrompt, config, conversation, pr
             promptType: options.visionMode,
             userDescription: userPrompt,
             availableComponents: components.map(c => c.name),
-            framework: frameworkOptions?.framework || 'react',
+            framework: options.framework, // Use required framework, no fallback
             designSystem: options.designSystem,
         });
         // Combine the vision system prompt with the existing prompt and add the user prompt
@@ -442,7 +413,8 @@ export async function generateStoryFromPrompt(req, res) {
         let attempts = 0;
         let selfHealingUsed = false;
         // Build framework-aware options with vision support
-        const frameworkOptions = {
+        // NOTE: Will be updated with detectedFramework after early detection
+        let frameworkOptions = {
             framework: framework,
             autoDetectFramework: autoDetectFramework === true,
             visionMode: visionMode,
@@ -452,17 +424,63 @@ export async function generateStoryFromPrompt(req, res) {
         const discovery = new EnhancedComponentDiscovery(config);
         const discoveredComponents = await discovery.discoverAll();
         const componentNames = discoveredComponents.map(c => c.name);
-        // Self-healing options for retry prompts
+        // EARLY FRAMEWORK DETECTION - detect once and use consistently throughout
+        // Priority: request > config.componentFramework > config.framework > auto-detect
+        // CRITICAL: Fail explicitly if no framework can be determined rather than silently defaulting to React
+        let detectedFramework;
+        if (frameworkOptions.framework) {
+            detectedFramework = frameworkOptions.framework;
+            logger.log(`🎯 Using explicit framework from request: ${detectedFramework}`);
+        }
+        else if (config.componentFramework) {
+            detectedFramework = config.componentFramework;
+            logger.log(`🎯 Using framework from config.componentFramework: ${detectedFramework}`);
+        }
+        else if (config.framework) {
+            detectedFramework = config.framework;
+            logger.log(`🎯 Using framework from config.framework: ${detectedFramework}`);
+        }
+        else if (frameworkOptions.autoDetectFramework) {
+            try {
+                detectedFramework = await detectProjectFramework(process.cwd());
+                logger.log(`🎯 Auto-detected framework: ${detectedFramework}`);
+            }
+            catch (error) {
+                // FAIL EXPLICITLY rather than silently defaulting to React
+                logger.error('Failed to auto-detect framework and no framework configured', { error });
+                return res.status(400).json({
+                    error: 'Framework detection failed',
+                    details: 'Could not auto-detect framework. Please set componentFramework in story-ui.config.js or pass framework in the request.',
+                    suggestion: 'Add componentFramework: "react" (or vue, angular, svelte, web-components) to your story-ui.config.js'
+                });
+            }
+        }
+        else {
+            // Default to React only with a warning - this is the ONLY place we default
+            detectedFramework = 'react';
+            logger.warn('⚠️ No framework configured, defaulting to React. Consider setting componentFramework in story-ui.config.js');
+        }
+        // CREATE a properly-typed options object with the detected framework
+        // This ensures TypeScript knows framework is definitely set
+        const promptOptions = {
+            framework: detectedFramework, // Always set from early detection
+            autoDetectFramework: false, // Already detected, don't re-detect
+            visionMode: visionMode,
+            designSystem: designSystem,
+        };
+        // Get the framework adapter early for consistent use
+        const frameworkAdapter = getAdapter(detectedFramework);
+        // Self-healing options for retry prompts - use detected framework
         const selfHealingOptions = {
             maxAttempts: maxRetries,
             availableComponents: componentNames,
-            framework: frameworkOptions.framework || 'react',
+            framework: detectedFramework,
             importPath: config.importPath || 'your-library',
         };
         // Track all attempts for best-attempt selection
         const allAttempts = [];
         const errorHistory = [];
-        const initialPrompt = await buildClaudePromptWithContext(prompt, config, conversation, previousCode, frameworkOptions);
+        const initialPrompt = await buildClaudePromptWithContext(prompt, config, conversation, previousCode, promptOptions);
         const messages = [{ role: 'user', content: initialPrompt }];
         while (attempts < maxRetries) {
             attempts++;
@@ -549,7 +567,7 @@ export async function generateStoryFromPrompt(req, res) {
             else {
                 // Create fallback story only if we have no usable code
                 logger.log('Creating fallback story - no usable code generated');
-                fileContents = createFallbackStory(prompt, config);
+                fileContents = createFrameworkAwareFallbackStory(prompt, config, detectedFramework);
                 hasValidationWarnings = true;
             }
         }
@@ -565,19 +583,9 @@ export async function generateStoryFromPrompt(req, res) {
             console.error('No valid code could be extracted or generated.');
             return res.status(500).json({ error: 'Failed to generate valid TypeScript code.' });
         }
-        // Determine the framework being used (priority: request > config.componentFramework > config.framework > auto-detect > default)
-        // CRITICAL: Check config.componentFramework BEFORE config.framework - many projects use componentFramework (not framework)
-        const detectedFramework = frameworkOptions.framework ||
-            config.componentFramework ||
-            config.framework ||
-            (frameworkOptions.autoDetectFramework ? await detectProjectFramework(process.cwd()).catch(() => 'react') : 'react');
-        logger.log(`🎯 Framework detection: request=${frameworkOptions.framework}, config=${config.framework}, detected=${detectedFramework}`);
-        // Get the framework adapter for post-processing
-        const frameworkAdapter = getAdapter(detectedFramework);
-        // Only add React import for React framework
-        if (detectedFramework === 'react' && !fileContents.includes("import React from 'react';")) {
-            fileContents = "import React from 'react';\n" + fileContents;
-        }
+        // NOTE: Framework detection and adapter retrieval already done earlier in function
+        // detectedFramework and frameworkAdapter are available from lines 555-588
+        // React imports are handled by the adapter's postProcess method, not manually added here
         // Post-processing is now consolidated to run once on the final code
         let fixedFileContents = postProcessStory(fileContents, config.importPath);
         // Apply framework-specific post-processing if adapter is available
@@ -619,11 +627,12 @@ export async function generateStoryFromPrompt(req, res) {
                 storyId = providedStoryId;
                 const hashMatch = providedStoryId.match(/^story-([a-f0-9]{8})$/);
                 hash = hashMatch ? hashMatch[1] : crypto.createHash('sha1').update(prompt + timestamp).digest('hex').slice(0, 8);
-                finalFileName = fileName || `${providedStoryId}.stories.tsx`;
+                finalFileName = fileName || `${providedStoryId}${fileExtension}`;
                 logger.log('📝 Using provided storyId:', finalFileName);
             }
             else if (fileName) {
-                const hashMatch = fileName.match(/-([a-f0-9]{8})(?:\.stories\.tsx)?$/);
+                // Match hash from filename, supporting both .tsx and .ts extensions
+                const hashMatch = fileName.match(/-([a-f0-9]{8})(?:\.stories\.tsx?)?$/);
                 hash = hashMatch ? hashMatch[1] : crypto.createHash('sha1').update(prompt + timestamp).digest('hex').slice(0, 8);
                 storyId = `story-${hash}`;
                 finalFileName = fileName;
@@ -634,8 +643,8 @@ export async function generateStoryFromPrompt(req, res) {
                 storyId = `story-${hash}`;
                 finalFileName = fileNameFromTitle(aiTitle, hash, fileExtension);
             }
-            if (!finalFileName.endsWith('.stories.tsx')) {
-                finalFileName = finalFileName + '.stories.tsx';
+            if (!finalFileName.endsWith(fileExtension)) {
+                finalFileName = finalFileName + fileExtension;
             }
             logger.log('📌 Preserving story identity for update:', { storyId, fileName: finalFileName });
         }
@@ -646,10 +655,11 @@ export async function generateStoryFromPrompt(req, res) {
             storyId = `story-${hash}`;
             logger.log('🆕 Creating new story:', { storyId, fileName: finalFileName });
         }
-        // Escape the title for TypeScript and append hash for uniqueness
+        // Create title for the story
         const prettyPrompt = escapeTitleForTS(aiTitle);
-        // Append hash to title to prevent Storybook duplicate ID errors
-        const uniqueTitle = `${prettyPrompt} (${hash})`;
+        // Use the title without hash suffix for cleaner sidebar display
+        // The filename already contains the hash for uniqueness
+        const uniqueTitle = prettyPrompt;
         // Fix title with storyPrefix and hash - handle both single-line and multi-line formats
         // Note: (?::\s*\w+(?:<[^>]+>)?)? handles TypeScript type annotations including generics
         // e.g., "const meta: Meta = {" or "const meta: Meta<typeof Button> = {"

package/dist/mcp-server/routes/generateStoryStream.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"generateStoryStream.d.ts","sourceRoot":"","sources":["../../../mcp-server/routes/generateStoryStream.ts"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AAEH,OAAO,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,SAAS,CAAC;AA2c5C,wBAAsB,6BAA6B,CAAC,GAAG,EAAE,OAAO,EAAE,GAAG,EAAE,QAAQ,iBA0hB9E"}
+{"version":3,"file":"generateStoryStream.d.ts","sourceRoot":"","sources":["../../../mcp-server/routes/generateStoryStream.ts"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AAEH,OAAO,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,SAAS,CAAC;AAsc5C,wBAAsB,6BAA6B,CAAC,GAAG,EAAE,OAAO,EAAE,GAAG,EAAE,QAAQ,iBAkkB9E"}

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

@@ -11,10 +11,11 @@ import * as crypto from 'crypto';
 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 { 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 { extractAndValidateCodeBlock } from '../../story-generator/validateStory.js';
+import { createFrameworkAwareFallbackStory } from './storyHelpers.js';
 import { isBlacklistedComponent, isBlacklistedIcon, getBlacklistErrorMessage, ICON_CORRECTIONS } from '../../story-generator/componentBlacklist.js';
 import { StoryTracker } from '../../story-generator/storyTracker.js';
 import { getDocumentation } from '../../story-generator/documentation-sources.js';
@@ -114,24 +115,15 @@ function buildComponentSuggestion(components) {
     return `Your available components include: ${sampleComponents}${moreCount}. Check story-ui.config.js if expected components are missing.`;
 }
 // Analyze prompt to determine intent
+// NOTE: Framework is now REQUIRED - caller must detect it first
 async function analyzeIntent(prompt, config, conversation, previousCode, options) {
-    // Determine framework - priority: config > explicit option > auto-detect > default
-    let framework = 'react';
-    if (config.componentFramework) {
-        // First priority: use config.componentFramework if set
-        framework = config.componentFramework;
-    }
-    else if (options.framework) {
-        framework = options.framework;
-    }
-    else if (options.autoDetectFramework) {
-        try {
-            framework = await detectProjectFramework(process.cwd());
-        }
-        catch {
-            framework = 'react';
-        }
+    // SIMPLIFIED: Trust the passed framework from early detection
+    // The caller (main handler) is responsible for detecting the framework once
+    // We no longer re-detect here - this eliminates duplicate detection and inconsistency
+    if (!options.framework) {
+        throw new Error('Framework must be passed to analyzeIntent - early detection should have determined it');
     }
+    const framework = options.framework;
     // Analyze prompt for likely components
     const componentKeywords = {
         button: ['button', 'click', 'submit', 'action', 'cta'],
@@ -407,6 +399,60 @@ export async function generateStoryFromPromptStream(req, res) {
             res.end();
             return;
         }
+        // EARLY FRAMEWORK DETECTION - detect once and use consistently throughout
+        // Priority: request > config.componentFramework > config.framework > auto-detect
+        // CRITICAL: Fail explicitly if no framework can be determined rather than silently defaulting to React
+        let detectedFramework;
+        if (framework) {
+            detectedFramework = framework;
+            logger.log(`🎯 Using explicit framework from request: ${detectedFramework}`);
+        }
+        else if (config.componentFramework) {
+            detectedFramework = config.componentFramework;
+            logger.log(`🎯 Using framework from config.componentFramework: ${detectedFramework}`);
+        }
+        else if (config.framework) {
+            detectedFramework = config.framework;
+            logger.log(`🎯 Using framework from config.framework: ${detectedFramework}`);
+        }
+        else if (autoDetectFramework) {
+            try {
+                detectedFramework = await detectProjectFramework(process.cwd());
+                logger.log(`🎯 Auto-detected framework: ${detectedFramework}`);
+            }
+            catch (error) {
+                // FAIL EXPLICITLY rather than silently defaulting to React
+                logger.error('Failed to auto-detect framework and no framework configured', { error });
+                stream.sendError({
+                    code: 'FRAMEWORK_DETECTION_FAILED',
+                    message: 'Could not auto-detect framework',
+                    details: 'Please set componentFramework in story-ui.config.js or pass framework in the request.',
+                    recoverable: false,
+                    suggestion: 'Add componentFramework: "react" (or vue, angular, svelte, web-components) to your story-ui.config.js'
+                });
+                res.end();
+                return;
+            }
+        }
+        else {
+            // Default to React only with a warning - this is the ONLY place we default
+            detectedFramework = 'react';
+            logger.warn('⚠️ No framework configured, defaulting to React. Consider setting componentFramework in story-ui.config.js');
+        }
+        // Get the framework adapter early for consistent use
+        const frameworkAdapter = getAdapter(detectedFramework);
+        if (!frameworkAdapter) {
+            logger.error(`No adapter found for framework: ${detectedFramework}`);
+            stream.sendError({
+                code: 'ADAPTER_NOT_FOUND',
+                message: `No adapter found for framework: ${detectedFramework}`,
+                recoverable: false,
+                suggestion: 'Check that the framework name is correct: react, vue, angular, svelte, or web-components'
+            });
+            res.end();
+            return;
+        }
+        logger.log(`🔧 Using framework adapter: ${frameworkAdapter.name}`);
         // Process images if provided
         let processedImages = [];
         if (images && Array.isArray(images) && images.length > 0) {
@@ -456,9 +502,10 @@ export async function generateStoryFromPromptStream(req, res) {
             }
         }
         // INTENT PREVIEW: Analyze and show what we're going to do
+        // Pass the already-detected framework - no need for the function to re-detect
         const intent = await analyzeIntent(prompt, config, conversation, previousCode, {
-            framework: framework,
-            autoDetectFramework: autoDetectFramework === true,
+            framework: detectedFramework, // Use early-detected framework, not request's framework
+            autoDetectFramework: false, // Already detected, don't re-detect
             visionMode: visionMode,
             designSystem,
             hasImages: processedImages.length > 0
@@ -470,9 +517,10 @@ export async function generateStoryFromPromptStream(req, res) {
             framework: intent.framework,
             hasContext: intent.promptAnalysis.hasConversationContext
         });
+        // Pass detected framework to prompt builder - no re-detection needed
         const frameworkOptions = {
-            framework: framework,
-            autoDetectFramework: autoDetectFramework === true,
+            framework: detectedFramework, // Use early-detected framework
+            autoDetectFramework: false, // Already detected, don't re-detect
             visionMode: visionMode,
             designSystem: designSystem,
             considerations: considerations,
@@ -484,18 +532,14 @@ export async function generateStoryFromPromptStream(req, res) {
         // Step 4: Call LLM with Self-Healing Loop
         currentStep++;
         stream.sendProgress(currentStep, totalSteps, 'llm_thinking', 'AI is generating your story...');
-        // 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)
+        // Uses detectedFramework from early detection - no need to re-detect
         const selfHealingOptions = {
             maxAttempts: 3,
             availableComponents: availableComponentNames,
-            framework: detectedFrameworkForHealing,
+            framework: detectedFramework,
             importPath: config.importPath,
         };
         // Initialize self-healing state
@@ -634,7 +678,8 @@ export async function generateStoryFromPromptStream(req, res) {
         let fileContents;
         let hasValidationWarnings = false;
         if (!validationResult.isValid && !validationResult.fixedCode) {
-            fileContents = createFallbackStory(prompt, config);
+            // Use framework-aware fallback story
+            fileContents = createFrameworkAwareFallbackStory(prompt, config, detectedFramework);
             hasValidationWarnings = true;
             stream.sendValidation({
                 isValid: false,
@@ -666,22 +711,13 @@ export async function generateStoryFromPromptStream(req, res) {
         // Step 7: Post-processing
         currentStep++;
         stream.sendProgress(currentStep, totalSteps, 'post_processing', 'Applying finishing touches...');
-        // 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;
-        }
+        // Framework detection already done at start - use detectedFramework and frameworkAdapter
+        // The adapter's postProcess() method handles React import injection (or removal for non-React)
         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);
-        }
+        // Apply framework-specific post-processing via adapter
+        const fileExtension = frameworkAdapter?.defaultExtension || '.stories.tsx';
+        logger.log(`🔧 Applying ${detectedFramework} framework post-processing`);
+        fixedFileContents = frameworkAdapter.postProcess(fixedFileContents);
         // Generate title
         let aiTitle;
         if (isActualUpdate && originalTitle) {
@@ -710,23 +746,25 @@ export async function generateStoryFromPromptStream(req, res) {
                 hash = hashMatch ? hashMatch[1] : crypto.createHash('sha1').update(prompt).digest('hex').slice(0, 8);
             }
             else {
-                const hashMatch = fileName?.match(/-([a-f0-9]{8})(?:\.stories\.tsx)?$/);
+                // Match hash from filename, supporting both .tsx and .ts extensions
+                const hashMatch = fileName?.match(/-([a-f0-9]{8})(?:\.stories\.tsx?)?$/);
                 hash = hashMatch ? hashMatch[1] : crypto.createHash('sha1').update(prompt).digest('hex').slice(0, 8);
                 storyId = `story-${hash}`;
             }
             // Ensure finalFileName is always set
-            finalFileName = fileName || fileNameFromTitle(aiTitle, hash);
+            finalFileName = fileName || fileNameFromTitle(aiTitle, hash, fileExtension);
         }
         else {
             const timestamp = Date.now();
             hash = crypto.createHash('sha1').update(prompt + timestamp).digest('hex').slice(0, 8);
-            finalFileName = fileName || fileNameFromTitle(aiTitle, hash);
+            finalFileName = fileName || fileNameFromTitle(aiTitle, hash, fileExtension);
             storyId = `story-${hash}`;
         }
-        // Now create title with hash suffix to ensure uniqueness
+        // Create title for the story
         const prettyPrompt = escapeTitleForTS(aiTitle);
-        // Append hash to title to prevent Storybook duplicate ID errors
-        const uniqueTitle = `${prettyPrompt} (${hash})`;
+        // Use the title without hash suffix for cleaner sidebar display
+        // The filename already contains the hash for uniqueness
+        const uniqueTitle = prettyPrompt;
         // Fix title with storyPrefix and hash
         // Note: (?::\s*\w+(?:<[^>]+>)?)? handles TypeScript type annotations including generics
         // e.g., "const meta: Meta = {" or "const meta: Meta<typeof Button> = {"
@@ -744,9 +782,9 @@ export async function generateStoryFromPromptStream(req, res) {
                 return p1 + titleToUse + p3;
             });
         }
-        // Ensure file extension is correct
-        if (finalFileName && !finalFileName.endsWith('.stories.tsx')) {
-            finalFileName = finalFileName + '.stories.tsx';
+        // Ensure file extension is correct (use framework-specific extension)
+        if (finalFileName && !finalFileName.endsWith(fileExtension)) {
+            finalFileName = finalFileName + fileExtension;
         }
         // Step 8: Save story
         currentStep++;
@@ -824,44 +862,24 @@ export async function generateStoryFromPromptStream(req, res) {
     }
 }
 // Helper functions (copied from generateStory.ts for consistency)
+// NOTE: Framework is now REQUIRED - caller must pass the detected framework
 async function buildClaudePromptWithContext(userPrompt, config, conversation, previousCode, components, options) {
     const discovery = new EnhancedComponentDiscovery(config);
     const discoveredComponents = components || await discovery.discoverAll();
-    let useFrameworkAware = false;
-    let frameworkOptions;
-    // 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 };
-    }
-    else if (options?.autoDetectFramework) {
-        try {
-            const detectedFramework = await detectProjectFramework(process.cwd());
-            useFrameworkAware = true;
-            frameworkOptions = { framework: detectedFramework };
-        }
-        catch {
-            // Default to React
-        }
-    }
-    let prompt;
-    if (useFrameworkAware && frameworkOptions) {
-        prompt = await buildFrameworkAwarePrompt(userPrompt, config, discoveredComponents, frameworkOptions);
-    }
-    else {
-        prompt = await buildFlexiblePrompt(userPrompt, config, discoveredComponents);
+    // SIMPLIFIED: Trust the passed framework from early detection
+    // No more duplicate detection logic here
+    if (!options?.framework) {
+        throw new Error('Framework must be passed to buildClaudePromptWithContext - early detection should have determined it');
     }
+    const frameworkOptions = { framework: options.framework };
+    // Always use framework-aware prompt since we now always have a framework
+    let prompt = await buildFrameworkAwarePrompt(userPrompt, config, discoveredComponents, frameworkOptions);
     if (options?.visionMode) {
         const visionPrompts = buildVisionAwarePrompt({
             promptType: options.visionMode,
             userDescription: userPrompt,
             availableComponents: discoveredComponents.map((c) => c.name),
-            framework: frameworkOptions?.framework || 'react',
+            framework: options.framework, // Use the required framework, no fallback
             designSystem: options.designSystem,
         });
         prompt = `${visionPrompts.systemPrompt}\n\n---\n\n${prompt}\n\n---\n\n${visionPrompts.userPrompt}`;
@@ -962,7 +980,7 @@ function escapeTitleForTS(title) {
         .replace(/\r/g, '\\r')
         .replace(/\t/g, '\\t');
 }
-function fileNameFromTitle(title, hash) {
+function fileNameFromTitle(title, hash, extension = '.stories.tsx') {
     if (!title || typeof title !== 'string') {
         title = 'untitled';
     }
@@ -975,7 +993,7 @@ function fileNameFromTitle(title, hash) {
         .replace(/^-+|-+$/g, '')
         .replace(/"|'/g, '')
         .slice(0, 60);
-    return `${base}-${hash}.stories.tsx`;
+    return `${base}-${hash}${extension}`;
 }
 function extractImportsFromCode(code, importPath) {
     const imports = [];

package/dist/mcp-server/routes/storyHelpers.d.ts

@@ -41,11 +41,19 @@ export declare function escapeTitleForTS(title: string): string;
 export declare function extractImportsFromCode(code: string, importPath: string): string[];
 /**
  * Generate a filename from a story title and hash.
+ * @param title - The story title
+ * @param hash - The unique hash for the story
+ * @param extension - The file extension (e.g., '.stories.tsx' or '.stories.ts')
  */
-export declare function fileNameFromTitle(title: string, hash: string): string;
+export declare function fileNameFromTitle(title: string, hash: string, extension?: string): string;
 /**
  * Find a similar icon name from the allowed icons set.
  * Used for providing suggestions when an invalid icon is used.
  */
 export declare function findSimilarIcon(iconName: string, allowedIcons: Set<string>): string | null;
+/**
+ * Creates a framework-aware fallback story when generation fails.
+ * Uses the adapter to generate framework-appropriate code.
+ */
+export declare function createFrameworkAwareFallbackStory(prompt: string, config: any, framework: string): string;
 //# sourceMappingURL=storyHelpers.d.ts.map

package/dist/mcp-server/routes/storyHelpers.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"storyHelpers.d.ts","sourceRoot":"","sources":["../../../mcp-server/routes/storyHelpers.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAWH,OAAO,EAAE,YAAY,EAAE,MAAM,8CAA8C,CAAC;AAE5E;;GAEG;AACH,wBAAgB,OAAO,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,CAQ3C;AAED;;;GAGG;AACH,wBAAgB,gBAAgB,CAAC,IAAI,EAAE,MAAM,GAAG,MAAM,GAAG,IAAI,CAG5D;AAED;;;GAGG;AACH,wBAAsB,OAAO,CAC3B,QAAQ,EAAE;IAAE,IAAI,EAAE,MAAM,GAAG,WAAW,CAAC;IAAC,OAAO,EAAE,MAAM,CAAA;CAAE,EAAE,EAC3D,MAAM,CAAC,EAAE,YAAY,EAAE,GACtB,OAAO,CAAC,MAAM,CAAC,CA6BjB;AAED;;;GAGG;AACH,wBAAgB,mBAAmB,CAAC,MAAM,EAAE,MAAM,GAAG,MAAM,CAkC1D;AAED;;;GAGG;AACH,wBAAsB,WAAW,CAAC,UAAU,EAAE,MAAM,GAAG,OAAO,CAAC,MAAM,CAAC,CAOrE;AAED;;GAEG;AACH,wBAAgB,gBAAgB,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,CAStD;AAED;;GAEG;AACH,wBAAgB,sBAAsB,CAAC,IAAI,EAAE,MAAM,EAAE,UAAU,EAAE,MAAM,GAAG,MAAM,EAAE,CAajF;AAED;;GAEG;AACH,wBAAgB,iBAAiB,CAAC,KAAK,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,GAAG,MAAM,CAgBrE;AAED;;;GAGG;AACH,wBAAgB,eAAe,CAAC,QAAQ,EAAE,MAAM,EAAE,YAAY,EAAE,GAAG,CAAC,MAAM,CAAC,GAAG,MAAM,GAAG,IAAI,CAwB1F"}
+{"version":3,"file":"storyHelpers.d.ts","sourceRoot":"","sources":["../../../mcp-server/routes/storyHelpers.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAWH,OAAO,EAAE,YAAY,EAAE,MAAM,8CAA8C,CAAC;AAE5E;;GAEG;AACH,wBAAgB,OAAO,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,CAQ3C;AAED;;;GAGG;AACH,wBAAgB,gBAAgB,CAAC,IAAI,EAAE,MAAM,GAAG,MAAM,GAAG,IAAI,CAG5D;AAED;;;GAGG;AACH,wBAAsB,OAAO,CAC3B,QAAQ,EAAE;IAAE,IAAI,EAAE,MAAM,GAAG,WAAW,CAAC;IAAC,OAAO,EAAE,MAAM,CAAA;CAAE,EAAE,EAC3D,MAAM,CAAC,EAAE,YAAY,EAAE,GACtB,OAAO,CAAC,MAAM,CAAC,CA6BjB;AAED;;;GAGG;AACH,wBAAgB,mBAAmB,CAAC,MAAM,EAAE,MAAM,GAAG,MAAM,CAkC1D;AAED;;;GAGG;AACH,wBAAsB,WAAW,CAAC,UAAU,EAAE,MAAM,GAAG,OAAO,CAAC,MAAM,CAAC,CAOrE;AAED;;GAEG;AACH,wBAAgB,gBAAgB,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,CAStD;AAED;;GAEG;AACH,wBAAgB,sBAAsB,CAAC,IAAI,EAAE,MAAM,EAAE,UAAU,EAAE,MAAM,GAAG,MAAM,EAAE,CAajF;AAED;;;;;GAKG;AACH,wBAAgB,iBAAiB,CAAC,KAAK,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,EAAE,SAAS,GAAE,MAAuB,GAAG,MAAM,CAgBzG;AAED;;;GAGG;AACH,wBAAgB,eAAe,CAAC,QAAQ,EAAE,MAAM,EAAE,YAAY,EAAE,GAAG,CAAC,MAAM,CAAC,GAAG,MAAM,GAAG,IAAI,CAwB1F;AAED;;;GAGG;AACH,wBAAgB,iCAAiC,CAC/C,MAAM,EAAE,MAAM,EACd,MAAM,EAAE,GAAG,EACX,SAAS,EAAE,MAAM,GAChB,MAAM,CA0JR"}