@tpitre/story-ui 1.7.1 → 2.0.1

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

@@ -1,13 +1,18 @@
 import fetch from 'node-fetch';
 import { generateStory } from '../../story-generator/generateStory.js';
-import crypto from 'crypto';
+import * as crypto from 'crypto';
 import { buildClaudePrompt as buildFlexiblePrompt } from '../../story-generator/promptGenerator.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 { isBlacklistedComponent, isBlacklistedIcon, getBlacklistErrorMessage, ICON_CORRECTIONS } from '../../story-generator/componentBlacklist.js';
 import { StoryTracker } from '../../story-generator/storyTracker.js';
 import { EnhancedComponentDiscovery } from '../../story-generator/enhancedComponentDiscovery.js';
+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
@@ -20,26 +25,70 @@ async function buildClaudePrompt(userPrompt) {
     const config = loadUserConfig();
     const discovery = new EnhancedComponentDiscovery(config);
     const components = await discovery.discoverAll();
-    return buildFlexiblePrompt(userPrompt, config, components);
+    return await buildFlexiblePrompt(userPrompt, config, components);
 }
-// Enhanced function that includes conversation context
-async function buildClaudePromptWithContext(userPrompt, config, conversation) {
+// Enhanced function that includes conversation context and previous code
+async function buildClaudePromptWithContext(userPrompt, config, conversation, previousCode) {
     const discovery = new EnhancedComponentDiscovery(config);
     const components = await discovery.discoverAll();
-    // If no conversation context, use the standard prompt
+    // Always start with component discovery as the authoritative source
+    console.log(`📦 Discovered ${components.length} components from ${config.importPath}`);
+    const availableComponents = components.map(c => c.name).join(', ');
+    console.log(`✅ Available components: ${availableComponents}`);
+    // Build base prompt with discovered components (always required)
+    let prompt = await buildFlexiblePrompt(userPrompt, config, components);
+    // Try to enhance with bundled documentation for usage patterns and design tokens
+    console.log('📋 Using bundled documentation for enhancement');
+    const documentation = getDocumentation(config.importPath);
+    if (documentation) {
+        const bundledEnhancement = `
+
+📚 BUNDLED DOCUMENTATION:
+${Object.entries(documentation.components || {}).map(([name, info]) => {
+            // Only include docs for components that actually exist in the discovered list
+            if (components.some(c => c.name === name)) {
+                return `- ${name}: ${info.description || 'Component available'}
+   ${info.variants ? `Variants: ${info.variants.join(', ')}` : ''}
+   ${info.commonProps ? `Props: ${info.commonProps.join(', ')}` : ''}
+   ${info.examples ? `\n   Examples:\n${info.examples.map((ex) => `   // ${ex.label}
+   ${ex.code}`).join('\n')}` : ''}`;
+            }
+            return null;
+        }).filter(Boolean).join('\n\n')}`;
+        prompt = prompt.replace('User request:', `${bundledEnhancement}
+
+User request:`);
+    }
+    // If no conversation context, return the prompt as-is
     if (!conversation || conversation.length <= 1) {
-        return buildFlexiblePrompt(userPrompt, config, components);
+        return prompt;
     }
     // Extract conversation context for modifications
     const conversationContext = conversation
         .slice(0, -1) // Remove the current message (last one)
         .map((msg) => `${msg.role === 'user' ? 'User' : 'Assistant'}: ${msg.content}`)
         .join('\n\n');
-    // Get the base prompt
-    const basePrompt = buildFlexiblePrompt(userPrompt, config, components);
+    // Build contextual prompt with previous code if available
+    let contextSection = `CONVERSATION CONTEXT (for modifications/updates):
+${conversationContext}`;
+    if (previousCode) {
+        contextSection += `
+
+PREVIOUS GENERATED CODE (this is what you're modifying):
+\`\`\`tsx
+${previousCode}
+\`\`\`
+
+CRITICAL INSTRUCTIONS FOR MODIFICATIONS:
+1. DO NOT regenerate the entire story from scratch
+2. PRESERVE all existing styling, components, and structure
+3. ONLY change what the user specifically requests
+4. Keep the exact same layout (Grid structure, columns, etc.) unless explicitly asked to change it
+5. Maintain all visual styling (colors, shadows, spacing) unless asked to modify them
+6. Think of this as EDITING the code above, not creating new code`;
+    }
     // Add conversation context to the prompt
-    const contextualPrompt = basePrompt.replace('User request:', `CONVERSATION CONTEXT (for modifications/updates):
-${conversationContext}
+    const contextualPrompt = prompt.replace('User request:', `${contextSection}
 
 IMPORTANT: The user is asking to modify/update the story based on the above conversation.
 - Keep the SAME layout structure (number of columns, grid setup) unless explicitly asked to change it
@@ -50,6 +99,9 @@ Current modification request:`);
     return contextualPrompt;
 }
 function slugify(str) {
+    if (!str || typeof str !== 'string') {
+        return 'untitled';
+    }
     return str
         .toLowerCase()
         .replace(/[^a-z0-9]+/g, '-')
@@ -60,7 +112,7 @@ 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(prompt) {
+async function callClaude(messages) {
     const apiKey = process.env.CLAUDE_API_KEY;
     if (!apiKey)
         throw new Error('Claude API key not set');
@@ -73,8 +125,8 @@ async function callClaude(prompt) {
         },
         body: JSON.stringify({
             model: CLAUDE_MODEL,
-            max_tokens: 4096,
-            messages: [{ role: 'user', content: prompt }],
+            max_tokens: 8192,
+            messages,
         }),
     });
     const data = await response.json();
@@ -82,6 +134,9 @@ async function callClaude(prompt) {
     return data?.content?.[0]?.text || data?.completion || '';
 }
 function cleanPromptForTitle(prompt) {
+    if (!prompt || typeof prompt !== 'string') {
+        return 'Untitled Story';
+    }
     // Remove common leading phrases (case-insensitive)
     const leadingPhrases = [
         /^generate (a|an|the)? /i,
@@ -127,7 +182,7 @@ async function getClaudeTitle(userPrompt) {
         '',
         'Title:'
     ].join('\n');
-    const aiText = await callClaude(titlePrompt);
+    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) {
@@ -153,7 +208,101 @@ function escapeTitleForTS(title) {
         .replace(/\r/g, '\\r') // Escape carriage returns
         .replace(/\t/g, '\\t'); // Escape tabs
 }
+function extractImportsFromCode(code, importPath) {
+    const imports = [];
+    // Match import statements from the specific import path
+    const importRegex = new RegExp(`import\\s*{([^}]+)}\\s*from\\s*['"]${importPath.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')}['"]`, 'g');
+    let match;
+    while ((match = importRegex.exec(code)) !== null) {
+        const importList = match[1];
+        // Split by comma and clean up each import
+        const components = importList.split(',').map(comp => comp.trim());
+        imports.push(...components);
+    }
+    return imports;
+}
+async function preValidateImports(code, config, discovery) {
+    const errors = [];
+    // Extract imports from the main import path
+    const componentImports = extractImportsFromCode(code, config.importPath);
+    // Use the enhanced discovery to validate components
+    const validation = await discovery.validateComponentNames(componentImports);
+    // Check for blacklisted components first
+    const allowedComponents = new Set(discovery.getAvailableComponentNames());
+    for (const importName of componentImports) {
+        if (isBlacklistedComponent(importName, allowedComponents, config.importPath)) {
+            const errorMsg = getBlacklistErrorMessage(importName, config.importPath);
+            errors.push(`Blacklisted component detected: ${errorMsg}`);
+        }
+    }
+    // Add invalid component errors with suggestions
+    for (const invalidComponent of validation.invalid) {
+        const suggestion = validation.suggestions.get(invalidComponent);
+        if (suggestion) {
+            errors.push(`Invalid component: "${invalidComponent}" does not exist in ${config.importPath}. Did you mean "${suggestion}"?`);
+        }
+        else {
+            errors.push(`Invalid component: "${invalidComponent}" does not exist in ${config.importPath}. Available components: ${validation.valid.slice(0, 5).join(', ')}${validation.valid.length > 5 ? '...' : ''}`);
+        }
+    }
+    // Extract icon imports (keep existing icon validation)
+    if (config.iconImports?.package) {
+        const allowedIcons = new Set(config.iconImports?.commonIcons || []);
+        const iconImports = extractImportsFromCode(code, config.iconImports.package);
+        for (const iconName of iconImports) {
+            if (isBlacklistedIcon(iconName, allowedIcons)) {
+                const correction = ICON_CORRECTIONS[iconName];
+                if (correction) {
+                    errors.push(`Invalid icon: "${iconName}" does not exist. Did you mean "${correction}"?`);
+                }
+                else {
+                    errors.push(`Invalid icon: "${iconName}" is not in the list of available icons.`);
+                }
+            }
+            else if (!allowedIcons.has(iconName)) {
+                // Try to find a similar icon
+                const similarIcon = findSimilarIcon(iconName, allowedIcons);
+                if (similarIcon) {
+                    errors.push(`Invalid icon: "${iconName}" does not exist. Did you mean "${similarIcon}"?`);
+                }
+                else {
+                    errors.push(`Invalid icon: "${iconName}" is not in the list of available icons.`);
+                }
+            }
+        }
+    }
+    return {
+        isValid: errors.length === 0,
+        errors
+    };
+}
+function findSimilarIcon(iconName, allowedIcons) {
+    if (!iconName || typeof iconName !== 'string') {
+        return null;
+    }
+    // Simple similarity check - find icons that contain similar words
+    const iconLower = iconName.toLowerCase();
+    for (const allowed of allowedIcons) {
+        const allowedLower = allowed.toLowerCase();
+        // Check if the core word matches
+        if (iconLower.includes('commit') && allowedLower.includes('commit'))
+            return allowed;
+        if (iconLower.includes('branch') && allowedLower.includes('branch'))
+            return allowed;
+        if (iconLower.includes('merge') && allowedLower.includes('merge'))
+            return allowed;
+        if (iconLower.includes('pull') && allowedLower.includes('pull'))
+            return allowed;
+    }
+    return null;
+}
 function fileNameFromTitle(title, hash) {
+    if (!title || typeof title !== 'string') {
+        title = 'untitled';
+    }
+    if (!hash || typeof hash !== 'string') {
+        hash = 'default';
+    }
     // Lowercase, replace spaces/special chars with dashes, remove quotes, truncate
     let base = title
         .toLowerCase()
@@ -183,42 +332,126 @@ export async function generateStoryFromPrompt(req, res) {
         const isProduction = gitignoreManager.isProductionMode();
         // Initialize story tracker for managing updates vs new creations
         const storyTracker = new StoryTracker(config);
+        // Initialize history manager - use the current working directory
+        const historyManager = new StoryHistoryManager(process.cwd());
         // Check if this is an update to an existing story
         const isUpdate = fileName && conversation && conversation.length > 2;
-        // Build prompt with conversation context if available
-        const fullPrompt = await buildClaudePromptWithContext(prompt, config, conversation);
-        console.log('Layout configuration:', JSON.stringify(config.layoutRules, null, 2));
-        console.log('Claude prompt:', fullPrompt);
-        const aiText = await callClaude(fullPrompt);
-        console.log('Claude raw response:', aiText);
+        // Get previous code if this is an update
+        let previousCode;
+        let parentVersionId;
+        if (isUpdate && fileName) {
+            const currentVersion = historyManager.getCurrentVersion(fileName);
+            if (currentVersion) {
+                previousCode = currentVersion.code;
+                parentVersionId = currentVersion.id;
+                console.log('🔄 Found previous version for iteration');
+            }
+        }
+        // --- Start of Validation and Retry Loop ---
+        let aiText = '';
+        let validationErrors = [];
+        const maxRetries = 3;
+        let attempts = 0;
+        const initialPrompt = await buildClaudePromptWithContext(prompt, config, conversation, previousCode);
+        const messages = [{ role: 'user', content: initialPrompt }];
+        while (attempts < maxRetries) {
+            attempts++;
+            console.log(`--- Story Generation Attempt ${attempts} ---`);
+            const claudeResponse = await callClaude(messages);
+            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...');
+                    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;
+                }
+                else {
+                    // On last attempt, accept the response as is
+                    break;
+                }
+            }
+            else {
+                aiText = extractedCode;
+            }
+            validationErrors = validateStory(aiText);
+            if (validationErrors.length === 0) {
+                console.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}`));
+            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. Do not use the forbidden patterns.`;
+                messages.push({ role: 'assistant', content: claudeResponse });
+                messages.push({ role: 'user', content: retryPrompt });
+            }
+        }
+        if (validationErrors.length > 0) {
+            console.error(`Story generation failed after ${maxRetries} attempts.`);
+            // Optional: decide if you want to return an error or proceed with the last attempt
+            // 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);
+        // Create enhanced component discovery for validation
+        const discovery = new EnhancedComponentDiscovery(config);
+        await discovery.discoverAll();
+        // Pre-validate imports in the raw AI text to catch blacklisted components early
+        const preValidation = await preValidateImports(aiText, config, discovery);
+        if (!preValidation.isValid) {
+            console.error('Pre-validation failed - blacklisted components detected:', preValidation.errors);
+            // Return error immediately without creating file
+            return res.status(400).json({
+                error: 'Generated code contains invalid imports',
+                details: preValidation.errors,
+                suggestion: 'The AI tried to use components that do not exist. Please try rephrasing your request using basic components like Box, Stack, Header, Button, etc.'
+            });
+        }
         // Use the new robust validation system
-        const validationResult = extractAndValidateCodeBlock(aiText);
+        const validationResult = extractAndValidateCodeBlock(aiText, config);
         let fileContents;
         let hasValidationWarnings = false;
-        if (!validationResult.isValid) {
+        console.log('Validation result:', {
+            isValid: validationResult.isValid,
+            errors: validationResult.errors,
+            warnings: validationResult.warnings,
+            hasFixedCode: !!validationResult.fixedCode
+        });
+        if (!validationResult.isValid && !validationResult.fixedCode) {
             console.error('Generated code validation failed:', validationResult.errors);
-            // If we have fixedCode, use it
+            // Create fallback story only if we can't fix the code
+            console.log('Creating fallback story due to validation failure');
+            fileContents = createFallbackStory(prompt, config);
+            hasValidationWarnings = true;
+        }
+        else {
+            // Use fixed code if available, otherwise use the extracted code
             if (validationResult.fixedCode) {
                 fileContents = validationResult.fixedCode;
                 hasValidationWarnings = true;
-                console.log('Using auto-fixed code with warnings:', validationResult.warnings);
-            }
-            else {
-                // Create fallback story
-                console.log('Creating fallback story due to validation failure');
-                fileContents = createFallbackStory(prompt, config);
-                hasValidationWarnings = true;
-            }
-        }
-        else {
-            // Extract the validated code
-            const codeMatch = aiText.match(/```(?:tsx|jsx|typescript|ts|js|javascript)?\s*([\s\S]*?)\s*```/i);
-            if (codeMatch) {
-                fileContents = codeMatch[1].trim();
+                console.log('Using auto-fixed code');
             }
             else {
-                const importIdx = aiText.indexOf('import');
-                fileContents = importIdx !== -1 ? aiText.slice(importIdx).trim() : aiText.trim();
+                // Extract the validated code
+                const codeMatch = aiText.match(/```(?:tsx|jsx|typescript|ts|js|javascript)?\s*([\s\S]*?)\s*```/i);
+                if (codeMatch) {
+                    fileContents = codeMatch[1].trim();
+                }
+                else {
+                    // Fallback: extract from import to end of valid TypeScript
+                    const importIdx = aiText.indexOf('import');
+                    if (importIdx !== -1) {
+                        fileContents = aiText;
+                    }
+                    else {
+                        fileContents = aiText.trim();
+                    }
+                }
             }
             if (validationResult.warnings && validationResult.warnings.length > 0) {
                 hasValidationWarnings = true;
@@ -229,6 +462,12 @@ 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.' });
         }
+        // CRITICAL: Ensure React import exists but avoid duplicates
+        if (!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);
         // Generate title based on conversation context
         let aiTitle;
         if (isUpdate) {
@@ -245,26 +484,34 @@ export async function generateStoryFromPrompt(req, res) {
         }
         // Escape the title for TypeScript
         const prettyPrompt = escapeTitleForTS(aiTitle);
-        const fixedFileContents = fileContents.replace(/(export default \{\s*\n\s*title:\s*["'])([^"']+)(["'])/, (match, p1, _p2, p3) => {
+        // 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 there's an existing story with this title or prompt
-        const existingByTitle = storyTracker.findByTitle(aiTitle);
-        const existingByPrompt = storyTracker.findByPrompt(prompt);
-        const existingStory = existingByTitle || existingByPrompt;
+        // 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 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) {
+            // When updating within a conversation, look for the story by fileName
+            existingStory = storyTracker.findByTitle(aiTitle);
+            if (existingStory && existingStory.fileName !== fileName) {
+                // If found story has different fileName, it's not the same story
+                existingStory = null;
+            }
+        }
+        // Remove the automatic "find by prompt" logic that was preventing duplicates
         // Generate unique ID and filename
         let hash, finalFileName, storyId;
         let isActuallyUpdate = false;
-        if (existingStory) {
-            // Use existing story's details to update instead of creating duplicate
-            console.log(`Found existing story "${existingStory.title}" - updating instead of creating new`);
-            hash = existingStory.hash;
-            finalFileName = existingStory.fileName;
-            storyId = existingStory.storyId;
-            isActuallyUpdate = true;
-        }
-        else if (isUpdate && fileName) {
+        if (isUpdate && fileName) {
             // For conversation-based updates, use existing fileName and ID
             finalFileName = fileName;
             // Extract hash from existing fileName if possible
@@ -274,10 +521,12 @@ export async function generateStoryFromPrompt(req, res) {
             isActuallyUpdate = true;
         }
         else {
-            // For new stories, generate new IDs
-            hash = crypto.createHash('sha1').update(prompt).digest('hex').slice(0, 8);
+            // For new stories, ALWAYS generate new IDs with timestamp to ensure uniqueness
+            const timestamp = Date.now();
+            hash = crypto.createHash('sha1').update(prompt + timestamp).digest('hex').slice(0, 8);
             finalFileName = fileName || fileNameFromTitle(aiTitle, hash);
             storyId = `story-${hash}`;
+            isActuallyUpdate = false;
         }
         if (isProduction) {
             // Production: Store in memory
@@ -303,6 +552,8 @@ export async function generateStoryFromPrompt(req, res) {
                 prompt
             };
             storyTracker.registerStory(mapping);
+            // Save to history
+            historyManager.addVersion(finalFileName, prompt, fixedFileContents, parentVersionId);
             console.log(`Story ${isActuallyUpdate ? 'updated' : 'stored'} in memory: ${storyId}`);
             res.json({
                 success: true,
@@ -322,7 +573,11 @@ export async function generateStoryFromPrompt(req, res) {
         }
         else {
             // Development: Write to file system
-            const outPath = generateStory({ fileContents: fixedFileContents, fileName: finalFileName });
+            const outPath = generateStory({
+                fileContents: fixedFileContents,
+                fileName: finalFileName,
+                config: config
+            });
             // Register with story tracker
             const mapping = {
                 title: aiTitle,
@@ -334,6 +589,8 @@ export async function generateStoryFromPrompt(req, res) {
                 prompt
             };
             storyTracker.registerStory(mapping);
+            // Save to history
+            historyManager.addVersion(finalFileName, prompt, fixedFileContents, parentVersionId);
             console.log(`Story ${isActuallyUpdate ? 'updated' : 'written'} to:`, outPath);
             res.json({
                 success: true,
@@ -356,6 +613,16 @@ 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
  */