@tpitre/story-ui 2.1.5 → 2.3.0

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

@@ -1,11 +1,12 @@
-import fetch from 'node-fetch';
 import { generateStory } from '../../story-generator/generateStory.js';
 import * as crypto from 'crypto';
-import { buildClaudePrompt as buildFlexiblePrompt } from '../../story-generator/promptGenerator.js';
+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 { setupProductionGitignore } from '../../story-generator/productionGitignoreManager.js';
 import { getInMemoryStoryService } from '../../story-generator/inMemoryStoryService.js';
-import { extractAndValidateCodeBlock, createFallbackStory } from '../../story-generator/validateStory.js';
+import { extractAndValidateCodeBlock, createFallbackStory, validateStoryCode } from '../../story-generator/validateStory.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';
@@ -13,13 +14,11 @@ import { getDocumentation } from '../../story-generator/documentation-sources.js
 import { postProcessStory } from '../../story-generator/postProcessStory.js';
 import { validateStory } from '../../story-generator/storyValidator.js';
 import { StoryHistoryManager } from '../../story-generator/storyHistory.js';
-const CLAUDE_API_URL = 'https://api.anthropic.com/v1/messages';
-const CLAUDE_MODEL = process.env.CLAUDE_MODEL || 'claude-sonnet-4-20250514';
-// Legacy constants - now using dynamic discovery
-const COMPONENT_LIST = [];
-const SAMPLE_STORY = '';
-// Legacy component reference - now using dynamic discovery
-const COMPONENT_REFERENCE = '';
+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';
+import { buildVisionAwarePrompt } from '../../story-generator/visionPrompts.js';
 // Legacy function - now uses flexible system with enhanced discovery
 async function buildClaudePrompt(userPrompt) {
     const config = loadUserConfig();
@@ -28,17 +27,60 @@ async function buildClaudePrompt(userPrompt) {
     return await buildFlexiblePrompt(userPrompt, config, components);
 }
 // Enhanced function that includes conversation context and previous code
-async function buildClaudePromptWithContext(userPrompt, config, conversation, previousCode) {
+// Now supports multi-framework prompt generation and vision-aware prompts
+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
+        useFrameworkAware = true;
+        frameworkOptions = { framework: options.framework };
+        logger.log(`📦 Using specified framework: ${options.framework}`);
+    }
+    else if (options?.autoDetectFramework) {
+        // Auto-detect framework from project
+        try {
+            const detectedFramework = await detectProjectFramework(process.cwd());
+            useFrameworkAware = true;
+            frameworkOptions = { framework: detectedFramework };
+            logger.log(`📦 Auto-detected framework: ${detectedFramework}`);
+        }
+        catch (error) {
+            logger.warn('Failed to auto-detect framework, using React default', { error });
+        }
+    }
     // Always start with component discovery as the authoritative source
-    console.log(`📦 Discovered ${components.length} components from ${config.importPath}`);
+    logger.log(`📦 Discovered ${components.length} components from ${config.importPath}`);
     const availableComponents = components.map(c => c.name).join(', ');
-    console.log(`✅ Available components: ${availableComponents}`);
+    logger.log(`✅ Available components: ${availableComponents}`);
     // Build base prompt with discovered components (always required)
-    let prompt = await buildFlexiblePrompt(userPrompt, config, components);
+    // 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);
+    }
+    // Enhance prompt with vision-aware context if vision mode is provided
+    if (options?.visionMode) {
+        logger.log(`🔍 Enhancing prompt with vision mode: ${options.visionMode}`);
+        const visionPrompts = buildVisionAwarePrompt({
+            promptType: options.visionMode,
+            userDescription: userPrompt,
+            availableComponents: components.map(c => c.name),
+            framework: frameworkOptions?.framework || 'react',
+            designSystem: options.designSystem,
+        });
+        // Combine the vision system prompt with the existing prompt and add the user prompt
+        prompt = `${visionPrompts.systemPrompt}\n\n---\n\n${prompt}\n\n---\n\n${visionPrompts.userPrompt}`;
+    }
     // Try to enhance with bundled documentation for usage patterns and design tokens
-    console.log('📋 Using bundled documentation for enhancement');
+    logger.log('📋 Using bundled documentation for enhancement');
     const documentation = getDocumentation(config.importPath);
     if (documentation) {
         const bundledEnhancement = `
@@ -112,26 +154,32 @@ function extractCodeBlock(text) {
     const codeBlock = text.match(/```(?:tsx|jsx|typescript|ts|js|javascript)?([\s\S]*?)```/i);
     return codeBlock ? codeBlock[1].trim() : null;
 }
-async function callClaude(messages) {
-    const apiKey = process.env.CLAUDE_API_KEY;
-    if (!apiKey)
-        throw new Error('Claude API key not set');
-    const response = await fetch(CLAUDE_API_URL, {
-        method: 'POST',
-        headers: {
-            'x-api-key': apiKey,
-            'content-type': 'application/json',
-            'anthropic-version': '2023-06-01',
-        },
-        body: JSON.stringify({
-            model: CLAUDE_MODEL,
-            max_tokens: 8192,
-            messages,
-        }),
-    });
-    const data = await response.json();
-    // Try to extract the main content
-    return data?.content?.[0]?.text || data?.completion || '';
+async function callLLM(messages, images) {
+    // Check if any provider is configured
+    if (!isProviderConfigured()) {
+        throw new Error('No LLM provider configured. Please set CLAUDE_API_KEY, OPENAI_API_KEY, or GEMINI_API_KEY.');
+    }
+    const providerInfo = getProviderInfo();
+    logger.debug(`Using ${providerInfo.currentProvider} (${providerInfo.currentModel}) for story generation`);
+    // If images are provided, use vision-capable chat
+    if (images && images.length > 0) {
+        if (!providerInfo.supportsVision) {
+            throw new Error(`${providerInfo.currentProvider} does not support vision. Please configure a vision-capable provider.`);
+        }
+        logger.log(`🖼️ Using vision-capable chat with ${images.length} image(s)`);
+        // Convert messages to include images in the first user message
+        const messagesWithImages = messages.map((msg, index) => {
+            if (msg.role === 'user' && index === 0) {
+                return {
+                    role: msg.role,
+                    content: buildMessageWithImages(msg.content, images)
+                };
+            }
+            return msg;
+        });
+        return await chatCompletionWithImages(messagesWithImages, { maxTokens: 8192 });
+    }
+    return await chatCompletion(messages, { maxTokens: 8192 });
 }
 function cleanPromptForTitle(prompt) {
     if (!prompt || typeof prompt !== 'string') {
@@ -168,34 +216,15 @@ function cleanPromptForTitle(prompt) {
         .trim()
         .replace(/\b\w/g, c => c.toUpperCase()); // Capitalize words
 }
-async function getClaudeTitle(userPrompt) {
-    const titlePrompt = [
-        "Given the following UI description, generate a short, clear, human-friendly title suitable for a Storybook navigation item.",
-        "Requirements:",
-        "- Do not include words like 'Generate', 'Build', or 'Create'",
-        "- Keep it under 50 characters",
-        "- Use simple, clear language",
-        "- Avoid special characters that could break code (use letters, numbers, spaces, hyphens, and basic punctuation only)",
-        '',
-        'UI description:',
-        userPrompt,
-        '',
-        'Title:'
-    ].join('\n');
-    const aiText = await callClaude([{ role: 'user', content: titlePrompt }]);
-    // Take the first non-empty line, trim, and remove quotes if present
-    const lines = aiText.split('\n').map(l => l.trim()).filter(Boolean);
-    if (lines.length > 0) {
-        let title = lines[0].replace(/^['\"]|['\"]$/g, '').trim();
-        // Additional sanitization for safety
-        title = title
-            .replace(/[^\w\s'"?!-]/g, ' ') // Remove problematic characters
-            .replace(/\s+/g, ' ') // Normalize whitespace
-            .trim()
-            .slice(0, 50); // Limit length
-        return title;
+async function getLLMTitle(userPrompt) {
+    // Use the LLM service's built-in title generation
+    try {
+        return await llmGenerateTitle(userPrompt);
+    }
+    catch (error) {
+        logger.warn('Failed to generate title via LLM, using fallback', { error });
+        return '';
     }
-    return '';
 }
 function escapeTitleForTS(title) {
     // Escape all characters that could break TypeScript string literals
@@ -313,7 +342,12 @@ function fileNameFromTitle(title, hash) {
     return `${base}-${hash}.stories.tsx`;
 }
 export async function generateStoryFromPrompt(req, res) {
-    const { prompt, fileName, conversation } = req.body;
+    const { prompt, fileName, conversation, isUpdate, originalTitle, storyId: providedStoryId, framework, // Explicit framework (react, vue, angular, svelte, web-components)
+    autoDetectFramework, // Auto-detect from project (default: false)
+    images, // Array of images for vision-based generation
+    visionMode, // Vision mode: 'screenshot_to_story', 'design_to_story', 'component_analysis', 'layout_analysis'
+    designSystem // Design system being used (chakra-ui, mantine, etc.)
+     } = req.body;
     if (!prompt)
         return res.status(400).json({ error: 'Missing prompt' });
     try {
@@ -326,6 +360,21 @@ export async function generateStoryFromPrompt(req, res) {
                 details: validation.errors
             });
         }
+        // Process images if provided
+        let processedImages = [];
+        if (images && Array.isArray(images) && images.length > 0) {
+            logger.log(`📸 Processing ${images.length} image(s) for vision-based story generation`);
+            try {
+                processedImages = await processImageInputs(images);
+                logger.log(`✅ Successfully processed ${processedImages.length} image(s)`);
+            }
+            catch (imageError) {
+                return res.status(400).json({
+                    error: 'Image processing failed',
+                    details: imageError instanceof Error ? imageError.message : String(imageError)
+                });
+            }
+        }
         // Set up production-ready environment
         const gitignoreManager = setupProductionGitignore(config);
         const storyService = getInMemoryStoryService(config);
@@ -334,17 +383,36 @@ export async function generateStoryFromPrompt(req, res) {
         const storyTracker = new StoryTracker(config);
         // Initialize history manager - use the current working directory
         const historyManager = new StoryHistoryManager(process.cwd());
+        // Initialize URL redirect service
+        // Use the same directory as the stories to ensure consistency
+        const redirectDir = isProduction ? process.cwd() : path.dirname(config.generatedStoriesPath);
+        const redirectService = new UrlRedirectService(redirectDir);
         // Check if this is an update to an existing story
-        const isUpdate = fileName && conversation && conversation.length > 2;
+        // Use the explicit isUpdate flag from request, or fallback to old logic
+        const isActualUpdate = req.body.isUpdate || (fileName && conversation && conversation.length > 2);
         // Get previous code if this is an update
         let previousCode;
         let parentVersionId;
-        if (isUpdate && fileName) {
+        let oldTitle;
+        let oldStoryUrl;
+        if (isActualUpdate && fileName) {
             const currentVersion = historyManager.getCurrentVersion(fileName);
             if (currentVersion) {
                 previousCode = currentVersion.code;
                 parentVersionId = currentVersion.id;
-                console.log('🔄 Found previous version for iteration');
+                logger.log('🔄 Found previous version for iteration');
+                // Extract the old title from previous code
+                const titleMatch = previousCode.match(/title:\s*["']([^"']+)['"]/);
+                if (titleMatch) {
+                    oldTitle = titleMatch[1];
+                    // Remove the prefix to get clean title for URL generation
+                    const cleanOldTitle = oldTitle.replace(config.storyPrefix || 'Generated/', '');
+                    // Convert title to Storybook URL format
+                    oldStoryUrl = `/story/${cleanOldTitle.toLowerCase().replace(/[^a-z0-9]+/g, '-')}--primary`;
+                    logger.log('📌 Previous title:', oldTitle);
+                    logger.log('📌 Clean title for URL:', cleanOldTitle);
+                    logger.log('📌 Previous URL:', oldStoryUrl);
+                }
             }
         }
         // --- Start of Validation and Retry Loop ---
@@ -352,17 +420,24 @@ export async function generateStoryFromPrompt(req, res) {
         let validationErrors = [];
         const maxRetries = 3;
         let attempts = 0;
-        const initialPrompt = await buildClaudePromptWithContext(prompt, config, conversation, previousCode);
+        // Build framework-aware options with vision support
+        const frameworkOptions = {
+            framework: framework,
+            autoDetectFramework: autoDetectFramework === true,
+            visionMode: visionMode,
+            designSystem: designSystem,
+        };
+        const initialPrompt = await buildClaudePromptWithContext(prompt, config, conversation, previousCode, frameworkOptions);
         const messages = [{ role: 'user', content: initialPrompt }];
         while (attempts < maxRetries) {
             attempts++;
-            console.log(`--- Story Generation Attempt ${attempts} ---`);
-            const claudeResponse = await callClaude(messages);
+            logger.log(`--- Story Generation Attempt ${attempts} ---`);
+            const claudeResponse = await callLLM(messages, processedImages.length > 0 ? processedImages : undefined);
             const extractedCode = extractCodeBlock(claudeResponse);
             if (!extractedCode) {
                 aiText = claudeResponse; // Use raw response if no code block
                 if (attempts < maxRetries) {
-                    console.log('No code block found, retrying...');
+                    logger.log('No code block found, retrying...');
                     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;
@@ -377,11 +452,11 @@ export async function generateStoryFromPrompt(req, res) {
             }
             validationErrors = validateStory(aiText);
             if (validationErrors.length === 0) {
-                console.log('✅ Validation successful!');
+                logger.log('✅ Validation successful!');
                 break; // Exit loop on success
             }
-            console.log(`❌ Validation failed with ${validationErrors.length} errors:`);
-            validationErrors.forEach(err => console.log(`  - Line ${err.line}: ${err.message}`));
+            logger.log(`❌ Validation failed with ${validationErrors.length} errors:`);
+            validationErrors.forEach(err => logger.log(`  - Line ${err.line}: ${err.message}`));
             if (attempts < maxRetries) {
                 const errorFeedback = validationErrors
                     .map(err => `- Line ${err.line}: ${err.message}`)
@@ -397,7 +472,7 @@ export async function generateStoryFromPrompt(req, res) {
             // For now, we'll proceed with the last attempt and let the user see the result
         }
         // --- End of Validation and Retry Loop ---
-        console.log('Claude final response:', aiText);
+        logger.log('Claude final response:', aiText);
         // Create enhanced component discovery for validation
         const discovery = new EnhancedComponentDiscovery(config);
         await discovery.discoverAll();
@@ -416,7 +491,7 @@ export async function generateStoryFromPrompt(req, res) {
         const validationResult = extractAndValidateCodeBlock(aiText, config);
         let fileContents;
         let hasValidationWarnings = false;
-        console.log('Validation result:', {
+        logger.log('Validation result:', {
             isValid: validationResult.isValid,
             errors: validationResult.errors,
             warnings: validationResult.warnings,
@@ -425,7 +500,7 @@ export async function generateStoryFromPrompt(req, res) {
         if (!validationResult.isValid && !validationResult.fixedCode) {
             console.error('Generated code validation failed:', validationResult.errors);
             // Create fallback story only if we can't fix the code
-            console.log('Creating fallback story due to validation failure');
+            logger.log('Creating fallback story due to validation failure');
             fileContents = createFallbackStory(prompt, config);
             hasValidationWarnings = true;
         }
@@ -434,7 +509,7 @@ export async function generateStoryFromPrompt(req, res) {
             if (validationResult.fixedCode) {
                 fileContents = validationResult.fixedCode;
                 hasValidationWarnings = true;
-                console.log('Using auto-fixed code');
+                logger.log('Using auto-fixed code');
             }
             else {
                 // Extract the validated code
@@ -455,28 +530,46 @@ export async function generateStoryFromPrompt(req, res) {
             }
             if (validationResult.warnings && validationResult.warnings.length > 0) {
                 hasValidationWarnings = true;
-                console.log('Validation warnings:', validationResult.warnings);
+                logger.log('Validation warnings:', validationResult.warnings);
             }
         }
         if (!fileContents) {
             console.error('No valid code could be extracted or generated.');
             return res.status(500).json({ error: 'Failed to generate valid TypeScript code.' });
         }
-        // CRITICAL: Ensure React import exists but avoid duplicates
-        if (!fileContents.includes("import React from 'react';")) {
+        // Determine the framework being used (priority: request > config > auto-detect > default)
+        const detectedFramework = frameworkOptions.framework ||
+            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;
         }
         // 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
+        if (frameworkAdapter) {
+            logger.log(`🔧 Applying ${detectedFramework} framework post-processing`);
+            fixedFileContents = frameworkAdapter.postProcess(fixedFileContents);
+        }
         // Generate title based on conversation context
         let aiTitle;
-        if (isUpdate) {
-            // For updates, try to keep the original title or modify it slightly
+        if (isActualUpdate && originalTitle) {
+            // For updates, preserve the original title
+            aiTitle = originalTitle;
+            logger.log('📝 Preserving original title for update:', aiTitle);
+        }
+        else if (isActualUpdate) {
+            // For updates without original title, try to keep the original title or modify it slightly
             const originalPrompt = conversation.find((msg) => msg.role === 'user')?.content || prompt;
-            aiTitle = await getClaudeTitle(originalPrompt);
+            aiTitle = await getLLMTitle(originalPrompt);
         }
         else {
-            aiTitle = await getClaudeTitle(prompt);
+            // For new stories, generate a new title
+            aiTitle = await getLLMTitle(prompt);
         }
         if (!aiTitle || aiTitle.length < 2) {
             // Fallback to cleaned prompt if Claude fails
@@ -486,20 +579,55 @@ export async function generateStoryFromPrompt(req, res) {
         const prettyPrompt = escapeTitleForTS(aiTitle);
         // Fix title with storyPrefix - handle both single-line and multi-line formats
         fixedFileContents = fixedFileContents.replace(/(const\s+meta\s*=\s*\{[\s\S]*?title:\s*["'])([^"']+)(["'])/, (match, p1, oldTitle, p3) => {
-            const title = config.storyPrefix + prettyPrompt;
-            return p1 + title + p3;
+            // Check if the title already has the prefix to avoid double prefixing
+            const titleToUse = prettyPrompt.startsWith(config.storyPrefix)
+                ? prettyPrompt
+                : config.storyPrefix + prettyPrompt;
+            return p1 + titleToUse + p3;
         });
         // Fallback: export default { title: "..." } format
         if (!fixedFileContents.includes(config.storyPrefix)) {
             fixedFileContents = fixedFileContents.replace(/(export\s+default\s*\{[\s\S]*?title:\s*["'])([^"']+)(["'])/, (match, p1, oldTitle, p3) => {
-                const title = config.storyPrefix + prettyPrompt;
-                return p1 + title + p3;
+                // Check if the title already has the prefix to avoid double prefixing
+                const titleToUse = prettyPrompt.startsWith(config.storyPrefix)
+                    ? prettyPrompt
+                    : config.storyPrefix + prettyPrompt;
+                return p1 + titleToUse + p3;
             });
         }
+        // FIX #5: Final validation after ALL post-processing
+        // This catches any syntax errors introduced by post-processing (e.g., buggy regex replacements)
+        const finalValidation = validateStoryCode(fixedFileContents, 'story.tsx', config);
+        if (!finalValidation.isValid) {
+            logger.log('⚠️ Post-processing introduced syntax errors:', finalValidation.errors);
+            // If we have fixed code from validation, use it
+            if (finalValidation.fixedCode) {
+                logger.log('✅ Auto-fixed post-processing errors');
+                fixedFileContents = finalValidation.fixedCode;
+            }
+            else {
+                // Post-processing broke the code and we can't fix it
+                // Return an error rather than serving broken code
+                console.error('Post-processing introduced unfixable syntax errors:', finalValidation.errors);
+                return res.status(500).json({
+                    error: 'Story generation failed due to post-processing errors',
+                    details: finalValidation.errors,
+                    suggestion: 'This is a bug in Story UI. Please report this issue with your prompt.',
+                    validation: {
+                        hasWarnings: true,
+                        errors: finalValidation.errors,
+                        warnings: ['Post-processing introduced syntax errors that could not be automatically fixed']
+                    }
+                });
+            }
+        }
+        else {
+            logger.log('✅ Final validation passed after post-processing');
+        }
         // Check if this is an update to an existing story
         // ONLY consider it an update if we're in the same conversation context
         let existingStory = null;
-        if (isUpdate && fileName) {
+        if (isActualUpdate && fileName) {
             // When updating within a conversation, look for the story by fileName
             existingStory = storyTracker.findByTitle(aiTitle);
             if (existingStory && existingStory.fileName !== fileName) {
@@ -510,15 +638,23 @@ export async function generateStoryFromPrompt(req, res) {
         // Remove the automatic "find by prompt" logic that was preventing duplicates
         // Generate unique ID and filename
         let hash, finalFileName, storyId;
-        let isActuallyUpdate = false;
-        if (isUpdate && fileName) {
-            // For conversation-based updates, use existing fileName and ID
+        if (isActualUpdate && (fileName || providedStoryId)) {
+            // For updates, preserve the existing fileName and ID
             finalFileName = fileName;
-            // Extract hash from existing fileName if possible
-            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}`;
-            isActuallyUpdate = true;
+            // Use provided storyId or extract from fileName
+            if (providedStoryId) {
+                storyId = providedStoryId;
+                // Extract hash from storyId
+                const hashMatch = providedStoryId.match(/^story-([a-f0-9]{8})$/);
+                hash = hashMatch ? hashMatch[1] : crypto.createHash('sha1').update(prompt).digest('hex').slice(0, 8);
+            }
+            else {
+                // Extract hash from existing fileName if possible
+                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}`;
+            }
+            logger.log('📌 Preserving story identity for update:', { storyId, fileName: finalFileName });
         }
         else {
             // For new stories, ALWAYS generate new IDs with timestamp to ensure uniqueness
@@ -526,18 +662,18 @@ export async function generateStoryFromPrompt(req, res) {
             hash = crypto.createHash('sha1').update(prompt + timestamp).digest('hex').slice(0, 8);
             finalFileName = fileName || fileNameFromTitle(aiTitle, hash);
             storyId = `story-${hash}`;
-            isActuallyUpdate = false;
+            logger.log('🆕 Creating new story:', { storyId, fileName: finalFileName });
         }
         if (isProduction) {
             // Production: Store in memory
             const generatedStory = {
                 id: storyId,
                 title: aiTitle,
-                description: isActuallyUpdate ? `Updated: ${prompt}` : prompt,
+                description: isActualUpdate ? `Updated: ${prompt}` : prompt,
                 content: fixedFileContents,
-                createdAt: isActuallyUpdate ? (new Date()) : new Date(),
+                createdAt: isActualUpdate ? (new Date()) : new Date(),
                 lastAccessed: new Date(),
-                prompt: isActuallyUpdate ? conversation.map((msg) => `${msg.role}: ${msg.content}`).join('\n\n') : prompt,
+                prompt: isActualUpdate ? conversation.map((msg) => `${msg.role}: ${msg.content}`).join('\n\n') : prompt,
                 components: extractComponentsFromContent(fixedFileContents)
             };
             storyService.storeStory(generatedStory);
@@ -554,7 +690,23 @@ export async function generateStoryFromPrompt(req, res) {
             storyTracker.registerStory(mapping);
             // Save to history
             historyManager.addVersion(finalFileName, prompt, fixedFileContents, parentVersionId);
-            console.log(`Story ${isActuallyUpdate ? 'updated' : 'stored'} in memory: ${storyId}`);
+            logger.log(`Story ${isActualUpdate ? 'updated' : 'stored'} in memory: ${storyId}`);
+            // Track URL redirect if this is an update and the title changed
+            if (isActualUpdate && oldTitle && oldStoryUrl) {
+                // Extract the new title from the fixed content
+                const newTitleMatch = fixedFileContents.match(/title:\s*["']([^"']+)['"]/);
+                if (newTitleMatch) {
+                    const newTitle = newTitleMatch[1];
+                    // Remove the prefix to get clean title for URL
+                    const cleanNewTitle = newTitle.replace(config.storyPrefix, '');
+                    const cleanOldTitle = oldTitle.replace(config.storyPrefix, '');
+                    const newStoryUrl = `/story/${cleanNewTitle.toLowerCase().replace(/[^a-z0-9]+/g, '-')}--primary`;
+                    if (oldStoryUrl !== newStoryUrl) {
+                        redirectService.addRedirect(oldStoryUrl, newStoryUrl, cleanOldTitle, cleanNewTitle, storyId);
+                        logger.log(`🔀 Added redirect: ${oldStoryUrl} → ${newStoryUrl}`);
+                    }
+                }
+            }
             res.json({
                 success: true,
                 fileName: finalFileName,
@@ -563,7 +715,7 @@ export async function generateStoryFromPrompt(req, res) {
                 story: fileContents,
                 environment: 'production',
                 storage: 'in-memory',
-                isUpdate: isActuallyUpdate,
+                isUpdate: isActualUpdate,
                 validation: {
                     hasWarnings: hasValidationWarnings,
                     errors: validationResult?.errors || [],
@@ -591,16 +743,33 @@ export async function generateStoryFromPrompt(req, res) {
             storyTracker.registerStory(mapping);
             // Save to history
             historyManager.addVersion(finalFileName, prompt, fixedFileContents, parentVersionId);
-            console.log(`Story ${isActuallyUpdate ? 'updated' : 'written'} to:`, outPath);
+            logger.log(`Story ${isActualUpdate ? 'updated' : 'written'} to:`, outPath);
+            // Track URL redirect if this is an update and the title changed
+            if (isActualUpdate && oldTitle && oldStoryUrl) {
+                // Extract the new title from the fixed content
+                const newTitleMatch = fixedFileContents.match(/title:\s*["']([^"']+)['"]/);
+                if (newTitleMatch) {
+                    const newTitle = newTitleMatch[1];
+                    // Remove the prefix to get clean title for URL
+                    const cleanNewTitle = newTitle.replace(config.storyPrefix, '');
+                    const cleanOldTitle = oldTitle.replace(config.storyPrefix, '');
+                    const newStoryUrl = `/story/${cleanNewTitle.toLowerCase().replace(/[^a-z0-9]+/g, '-')}--primary`;
+                    if (oldStoryUrl !== newStoryUrl) {
+                        redirectService.addRedirect(oldStoryUrl, newStoryUrl, cleanOldTitle, cleanNewTitle, storyId);
+                        logger.log(`🔀 Added redirect: ${oldStoryUrl} → ${newStoryUrl}`);
+                    }
+                }
+            }
             res.json({
                 success: true,
                 fileName: finalFileName,
+                storyId,
                 outPath,
                 title: aiTitle,
                 story: fileContents,
                 environment: 'development',
                 storage: 'file-system',
-                isUpdate: isActuallyUpdate,
+                isUpdate: isActualUpdate,
                 validation: {
                     hasWarnings: hasValidationWarnings,
                     errors: validationResult?.errors || [],
@@ -613,16 +782,6 @@ export async function generateStoryFromPrompt(req, res) {
         res.status(500).json({ error: err.message || 'Story generation failed' });
     }
 }
-/**
- * Fixes inline styles in the generated story content
- * Converts React camelCase style properties to kebab-case CSS properties
- */
-function fixInlineStyles(content) {
-    // This function is now superseded by the validator and postProcessStory
-    // but can be kept for other potential style cleanups if needed.
-    // For now, the main logic is in the validator.
-    return content;
-}
 /**
  * Extracts component names from story content
  */

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

@@ -0,0 +1,12 @@
+/**
+ * Streaming Story Generation with Two-Way Communication
+ *
+ * This endpoint provides real-time feedback during story generation via SSE.
+ * It enables the chat to show:
+ * 1. Intent preview - what the AI plans to do
+ * 2. Progress updates - step-by-step execution
+ * 3. Execution feedback - detailed completion with reasoning
+ */
+import { Request, Response } from 'express';
+export declare function generateStoryFromPromptStream(req: Request, res: Response): Promise<void>;
+//# sourceMappingURL=generateStoryStream.d.ts.map

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

@@ -0,0 +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;AAqa5C,wBAAsB,6BAA6B,CAAC,GAAG,EAAE,OAAO,EAAE,GAAG,EAAE,QAAQ,iBAge9E"}