@tpitre/story-ui 1.2.0 → 1.4.0

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

@@ -6,6 +6,8 @@ import { buildClaudePrompt as buildFlexiblePrompt } from '../../story-generator/
 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 { StoryTracker } from '../../story-generator/storyTracker.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
@@ -177,6 +179,8 @@ export async function generateStoryFromPrompt(req, res) {
         const gitignoreManager = setupProductionGitignore(config);
         const storyService = getInMemoryStoryService(config);
         const isProduction = gitignoreManager.isProductionMode();
+        // Initialize story tracker for managing updates vs new creations
+        const storyTracker = new StoryTracker(config);
         // Check if this is an update to an existing story
         const isUpdate = fileName && conversation && conversation.length > 2;
         // Build prompt with conversation context if available
@@ -185,17 +189,43 @@ export async function generateStoryFromPrompt(req, res) {
         console.log('Claude prompt:', fullPrompt);
         const aiText = await callClaude(fullPrompt);
         console.log('Claude raw response:', aiText);
-        let fileContents = extractCodeBlock(aiText);
-        if (!fileContents) {
-            // Fallback: try to extract from first import statement onward
-            const importIdx = aiText.indexOf('import');
-            if (importIdx !== -1) {
-                fileContents = aiText.slice(importIdx).trim();
+        // Use the new robust validation system
+        const validationResult = extractAndValidateCodeBlock(aiText);
+        let fileContents;
+        let hasValidationWarnings = false;
+        if (!validationResult.isValid) {
+            console.error('Generated code validation failed:', validationResult.errors);
+            // If we have fixedCode, use it
+            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;
             }
         }
-        if (!fileContents || !fileContents.startsWith('import')) {
-            console.error('No valid code block or import found in Claude response. Skipping file write.');
-            return res.status(500).json({ error: 'Claude did not return a valid code block.' });
+        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();
+            }
+            else {
+                const importIdx = aiText.indexOf('import');
+                fileContents = importIdx !== -1 ? aiText.slice(importIdx).trim() : aiText.trim();
+            }
+            if (validationResult.warnings.length > 0) {
+                hasValidationWarnings = true;
+                console.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.' });
         }
         // Generate title based on conversation context
         let aiTitle;
@@ -217,15 +247,29 @@ export async function generateStoryFromPrompt(req, res) {
             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;
         // Generate unique ID and filename
         let hash, finalFileName, storyId;
-        if (isUpdate && fileName) {
-            // For updates, use existing fileName and ID
+        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) {
+            // For conversation-based updates, use 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;
         }
         else {
             // For new stories, generate new IDs
@@ -238,15 +282,26 @@ export async function generateStoryFromPrompt(req, res) {
             const generatedStory = {
                 id: storyId,
                 title: aiTitle,
-                description: isUpdate ? `Updated: ${prompt}` : prompt,
+                description: isActuallyUpdate ? `Updated: ${prompt}` : prompt,
                 content: fixedFileContents,
-                createdAt: isUpdate ? (new Date()) : new Date(),
+                createdAt: isActuallyUpdate ? (new Date()) : new Date(),
                 lastAccessed: new Date(),
-                prompt: isUpdate ? conversation.map((msg) => `${msg.role}: ${msg.content}`).join('\n\n') : prompt,
+                prompt: isActuallyUpdate ? conversation.map((msg) => `${msg.role}: ${msg.content}`).join('\n\n') : prompt,
                 components: extractComponentsFromContent(fixedFileContents)
             };
             storyService.storeStory(generatedStory);
-            console.log(`Story ${isUpdate ? 'updated' : 'stored'} in memory: ${storyId}`);
+            // Register with story tracker
+            const mapping = {
+                title: aiTitle,
+                fileName: finalFileName,
+                storyId,
+                hash,
+                createdAt: new Date().toISOString(),
+                updatedAt: new Date().toISOString(),
+                prompt
+            };
+            storyTracker.registerStory(mapping);
+            console.log(`Story ${isActuallyUpdate ? 'updated' : 'stored'} in memory: ${storyId}`);
             res.json({
                 success: true,
                 fileName: finalFileName,
@@ -255,13 +310,29 @@ export async function generateStoryFromPrompt(req, res) {
                 story: fileContents,
                 environment: 'production',
                 storage: 'in-memory',
-                isUpdate
+                isUpdate: isActuallyUpdate,
+                validation: {
+                    hasWarnings: hasValidationWarnings,
+                    errors: validationResult.errors || [],
+                    warnings: validationResult.warnings || []
+                }
             });
         }
         else {
             // Development: Write to file system
             const outPath = generateStory({ fileContents: fixedFileContents, fileName: finalFileName });
-            console.log(`Story ${isUpdate ? 'updated' : 'written'} to:`, outPath);
+            // Register with story tracker
+            const mapping = {
+                title: aiTitle,
+                fileName: finalFileName,
+                storyId,
+                hash,
+                createdAt: new Date().toISOString(),
+                updatedAt: new Date().toISOString(),
+                prompt
+            };
+            storyTracker.registerStory(mapping);
+            console.log(`Story ${isActuallyUpdate ? 'updated' : 'written'} to:`, outPath);
             res.json({
                 success: true,
                 fileName: finalFileName,
@@ -270,7 +341,12 @@ export async function generateStoryFromPrompt(req, res) {
                 story: fileContents,
                 environment: 'development',
                 storage: 'file-system',
-                isUpdate
+                isUpdate: isActuallyUpdate,
+                validation: {
+                    hasWarnings: hasValidationWarnings,
+                    errors: validationResult.errors || [],
+                    warnings: validationResult.warnings || []
+                }
             });
         }
     }

package/dist/story-generator/configLoader.js

@@ -28,13 +28,18 @@ export function loadUserConfig() {
                 console.log(`Loading Story UI config from: ${configPath}`);
                 // Read and evaluate the config file
                 const configContent = fs.readFileSync(configPath, 'utf-8');
-                // Simple evaluation for CommonJS modules
-                if (configContent.includes('module.exports')) {
+                // Handle both CommonJS and ES modules
+                if (configContent.includes('module.exports') || configContent.includes('export default')) {
                     // Create a temporary module context
                     const module = { exports: {} };
                     const exports = module.exports;
+                    // For ES modules, convert to CommonJS for evaluation
+                    let evalContent = configContent;
+                    if (configContent.includes('export default')) {
+                        evalContent = configContent.replace(/export\s+default\s+/, 'module.exports = ');
+                    }
                     // Evaluate the config file content
-                    eval(configContent);
+                    eval(evalContent);
                     const userConfig = module.exports;
                     const config = createStoryUIConfig(userConfig.default || userConfig);
                     // Cache the loaded config
@@ -82,13 +87,14 @@ export function validateConfig(config) {
     if (!config.componentsPath && !config.componentsMetadataPath && (!config.components || config.components.length === 0)) {
         errors.push('Either componentsPath, componentsMetadataPath, or a components array must be specified');
     }
-    if (config.componentsPath && !fs.existsSync(config.componentsPath)) {
+    // Only validate componentsPath if it's provided (not null/undefined)
+    if (config.componentsPath && config.componentsPath !== null && !fs.existsSync(config.componentsPath)) {
         errors.push(`Components path does not exist: ${config.componentsPath}`);
     }
     if (config.componentsMetadataPath && !fs.existsSync(config.componentsMetadataPath)) {
         errors.push(`Components metadata path does not exist: ${config.componentsMetadataPath}`);
     }
-    // Check import path
+    // Check import path - but allow actual library names like 'antd'
     if (!config.importPath || config.importPath === 'your-component-library' || config.importPath.trim() === '') {
         errors.push('importPath must be configured to point to your component library');
     }

package/dist/story-generator/storyTracker.js

@@ -0,0 +1,150 @@
+import fs from 'fs';
+import path from 'path';
+export class StoryTracker {
+    constructor(config) {
+        this.mappingFile = path.join(path.dirname(config.generatedStoriesPath), '.story-mappings.json');
+        this.mappings = new Map();
+        this.loadMappings();
+    }
+    /**
+     * Load existing mappings from disk
+     */
+    loadMappings() {
+        try {
+            if (fs.existsSync(this.mappingFile)) {
+                const data = JSON.parse(fs.readFileSync(this.mappingFile, 'utf-8'));
+                for (const mapping of data) {
+                    this.mappings.set(mapping.title.toLowerCase(), mapping);
+                }
+            }
+        }
+        catch (error) {
+            console.warn('Failed to load story mappings:', error);
+            this.mappings = new Map();
+        }
+    }
+    /**
+     * Save mappings to disk
+     */
+    saveMappings() {
+        try {
+            const data = Array.from(this.mappings.values());
+            fs.writeFileSync(this.mappingFile, JSON.stringify(data, null, 2));
+        }
+        catch (error) {
+            console.error('Failed to save story mappings:', error);
+        }
+    }
+    /**
+     * Find an existing story by title
+     */
+    findByTitle(title) {
+        // Normalize the title for comparison
+        const normalizedTitle = title.toLowerCase().trim();
+        // Try exact match first
+        let mapping = this.mappings.get(normalizedTitle);
+        if (mapping)
+            return mapping;
+        // Try fuzzy matching for similar titles
+        for (const [key, value] of this.mappings) {
+            // Check if the key contains the normalized title or vice versa
+            if (key.includes(normalizedTitle) || normalizedTitle.includes(key)) {
+                return value;
+            }
+            // Check for very similar titles (e.g., "dashboard" vs "inventory dashboard")
+            const keywords = normalizedTitle.split(/\s+/);
+            const keyKeywords = key.split(/\s+/);
+            // If all keywords from the shorter title are in the longer one
+            const shortKeywords = keywords.length < keyKeywords.length ? keywords : keyKeywords;
+            const longKeywords = keywords.length < keyKeywords.length ? keyKeywords : keywords;
+            if (shortKeywords.every(word => longKeywords.includes(word))) {
+                return value;
+            }
+        }
+        return undefined;
+    }
+    /**
+     * Find an existing story by prompt similarity
+     */
+    findByPrompt(prompt) {
+        const normalizedPrompt = prompt.toLowerCase().trim();
+        // Remove common prefixes like "generate a", "create a", etc.
+        const cleanPrompt = normalizedPrompt
+            .replace(/^(generate|create|build|make|design|show|write|produce|construct|draft|compose|implement|add|render|display)\s+(a|an|the)?\s*/i, '')
+            .trim();
+        // Try to find by similar prompts
+        for (const mapping of this.mappings.values()) {
+            const mappingPrompt = mapping.prompt.toLowerCase()
+                .replace(/^(generate|create|build|make|design|show|write|produce|construct|draft|compose|implement|add|render|display)\s+(a|an|the)?\s*/i, '')
+                .trim();
+            if (mappingPrompt === cleanPrompt) {
+                return mapping;
+            }
+        }
+        return undefined;
+    }
+    /**
+     * Register a new or updated story
+     */
+    registerStory(mapping) {
+        const normalizedTitle = mapping.title.toLowerCase();
+        // Check if we're updating an existing story
+        const existing = this.findByTitle(mapping.title);
+        if (existing) {
+            // Update the existing mapping
+            mapping.createdAt = existing.createdAt;
+            mapping.updatedAt = new Date().toISOString();
+        }
+        else {
+            // New story
+            mapping.createdAt = new Date().toISOString();
+            mapping.updatedAt = mapping.createdAt;
+        }
+        this.mappings.set(normalizedTitle, mapping);
+        this.saveMappings();
+    }
+    /**
+     * Remove a story mapping
+     */
+    removeStory(titleOrFileName) {
+        // Try to find by title first
+        const byTitle = this.findByTitle(titleOrFileName);
+        if (byTitle) {
+            this.mappings.delete(byTitle.title.toLowerCase());
+            this.saveMappings();
+            return true;
+        }
+        // Try to find by filename
+        for (const [key, mapping] of this.mappings) {
+            if (mapping.fileName === titleOrFileName) {
+                this.mappings.delete(key);
+                this.saveMappings();
+                return true;
+            }
+        }
+        return false;
+    }
+    /**
+     * Get all story mappings
+     */
+    getAllMappings() {
+        return Array.from(this.mappings.values());
+    }
+    /**
+     * Clean up orphaned mappings (stories that no longer exist)
+     */
+    cleanupOrphaned(generatedStoriesPath) {
+        let removed = 0;
+        for (const [key, mapping] of this.mappings) {
+            const filePath = path.join(generatedStoriesPath, mapping.fileName);
+            if (!fs.existsSync(filePath)) {
+                this.mappings.delete(key);
+                removed++;
+            }
+        }
+        if (removed > 0) {
+            this.saveMappings();
+        }
+        return removed;
+    }
+}

package/dist/story-generator/validateStory.js

@@ -0,0 +1,262 @@
+import * as ts from 'typescript';
+/**
+ * Validates TypeScript code syntax and attempts to fix common issues
+ */
+export function validateStoryCode(code, fileName = 'story.tsx') {
+    const result = {
+        isValid: true,
+        errors: [],
+        warnings: []
+    };
+    try {
+        // Create a TypeScript source file
+        const sourceFile = ts.createSourceFile(fileName, code, ts.ScriptTarget.Latest, true, ts.ScriptKind.TSX);
+        // Check for syntax errors using the program API
+        const compilerOptions = {
+            jsx: ts.JsxEmit.ReactJSX,
+            target: ts.ScriptTarget.Latest,
+            module: ts.ModuleKind.ESNext,
+            allowJs: true,
+            skipLibCheck: true
+        };
+        // Create a program to get diagnostics
+        const program = ts.createProgram([fileName], compilerOptions, {
+            getSourceFile: (name) => name === fileName ? sourceFile : undefined,
+            writeFile: () => { },
+            getCurrentDirectory: () => '',
+            getDirectories: () => [],
+            fileExists: (name) => name === fileName,
+            readFile: () => '',
+            getCanonicalFileName: (name) => name,
+            useCaseSensitiveFileNames: () => true,
+            getNewLine: () => '\n',
+            getDefaultLibFileName: () => 'lib.d.ts'
+        });
+        const syntaxErrors = program.getSyntacticDiagnostics(sourceFile);
+        if (syntaxErrors.length > 0) {
+            result.isValid = false;
+            for (const diagnostic of syntaxErrors) {
+                if (diagnostic.file && diagnostic.start !== undefined) {
+                    const position = diagnostic.file.getLineAndCharacterOfPosition(diagnostic.start);
+                    const message = ts.flattenDiagnosticMessageText(diagnostic.messageText, '\n');
+                    result.errors.push(`Line ${position.line + 1}, Column ${position.character + 1}: ${message}`);
+                }
+                else {
+                    result.errors.push(ts.flattenDiagnosticMessageText(diagnostic.messageText, '\n'));
+                }
+            }
+        }
+        // Additional semantic checks
+        const semanticErrors = performSemanticChecks(sourceFile);
+        result.errors.push(...semanticErrors);
+        if (result.errors.length > 0) {
+            result.isValid = false;
+            // Attempt to fix common issues
+            const fixedCode = attemptAutoFix(code, result.errors);
+            if (fixedCode && fixedCode !== code) {
+                result.fixedCode = fixedCode;
+                // Re-validate the fixed code
+                const fixedValidation = validateStoryCode(fixedCode, fileName);
+                if (fixedValidation.isValid) {
+                    result.isValid = true;
+                    result.warnings.push('Code was automatically fixed for syntax errors');
+                }
+            }
+        }
+    }
+    catch (error) {
+        result.isValid = false;
+        result.errors.push(`Validation error: ${error instanceof Error ? error.message : 'Unknown error'}`);
+    }
+    return result;
+}
+/**
+ * Performs additional semantic checks on the AST
+ */
+function performSemanticChecks(sourceFile) {
+    const errors = [];
+    function visit(node) {
+        // Check for unclosed JSX elements
+        if (ts.isJsxElement(node) || ts.isJsxSelfClosingElement(node)) {
+            // Additional JSX-specific checks could go here
+        }
+        // Check for missing imports
+        if (ts.isIdentifier(node) && node.text && /^[A-Z]/.test(node.text)) {
+            // This is a potential component reference - would need more context to validate
+        }
+        ts.forEachChild(node, visit);
+    }
+    visit(sourceFile);
+    return errors;
+}
+/**
+ * Attempts to automatically fix common syntax errors
+ */
+function attemptAutoFix(code, errors) {
+    let fixedCode = code;
+    // Fix common issues based on error patterns
+    for (const error of errors) {
+        if (error.includes('expected ","')) {
+            // Try to fix missing commas in object literals
+            fixedCode = fixMissingCommas(fixedCode);
+        }
+        if (error.includes('Unexpected token')) {
+            // Try to fix unexpected tokens
+            fixedCode = fixUnexpectedTokens(fixedCode);
+        }
+        if (error.includes('Unterminated string literal')) {
+            // Try to fix unterminated strings
+            fixedCode = fixUnterminatedStrings(fixedCode);
+        }
+        if (error.includes('JSX element') && error.includes('has no corresponding closing tag')) {
+            // Try to fix unclosed JSX elements
+            fixedCode = fixUnclosedJSX(fixedCode);
+        }
+    }
+    return fixedCode;
+}
+/**
+ * Fixes missing commas in object literals and function parameters
+ */
+function fixMissingCommas(code) {
+    // Common patterns where commas might be missing
+    const fixes = [
+        // Fix object property definitions
+        { pattern: /(\w+):\s*([^,}\n]+)\s*\n\s*(\w+):/g, replacement: '$1: $2,\n  $3:' },
+        // Fix array elements
+        { pattern: /(\w+)\s*\n\s*(\w+)/g, replacement: '$1,\n  $2' },
+        // Fix function parameters
+        { pattern: /(\w+:\s*\w+)\s*\n\s*(\w+:)/g, replacement: '$1,\n  $2' }
+    ];
+    let fixedCode = code;
+    for (const fix of fixes) {
+        fixedCode = fixedCode.replace(fix.pattern, fix.replacement);
+    }
+    return fixedCode;
+}
+/**
+ * Fixes unexpected token issues
+ */
+function fixUnexpectedTokens(code) {
+    let fixedCode = code;
+    // Fix common unexpected token issues
+    const fixes = [
+        // Fix missing semicolons
+        { pattern: /^(\s*)(export\s+\w+.*[^;])\s*$/gm, replacement: '$1$2;' },
+        // Fix missing quotes around strings
+        { pattern: /:\s*([^"'\s,}]+)\s*(,|\})/g, replacement: ': "$1"$2' },
+        // Fix trailing commas in objects
+        { pattern: /,(\s*\})/g, replacement: '$1' }
+    ];
+    for (const fix of fixes) {
+        fixedCode = fixedCode.replace(fix.pattern, fix.replacement);
+    }
+    return fixedCode;
+}
+/**
+ * Fixes unterminated string literals
+ */
+function fixUnterminatedStrings(code) {
+    let fixedCode = code;
+    // Find lines with unterminated strings and try to fix them
+    const lines = fixedCode.split('\n');
+    for (let i = 0; i < lines.length; i++) {
+        const line = lines[i];
+        // Check for unterminated quotes
+        const singleQuoteCount = (line.match(/'/g) || []).length;
+        const doubleQuoteCount = (line.match(/"/g) || []).length;
+        if (singleQuoteCount % 2 !== 0) {
+            lines[i] = line + "'";
+        }
+        else if (doubleQuoteCount % 2 !== 0) {
+            lines[i] = line + '"';
+        }
+    }
+    return lines.join('\n');
+}
+/**
+ * Fixes unclosed JSX elements
+ */
+function fixUnclosedJSX(code) {
+    let fixedCode = code;
+    // Simple heuristic to fix common JSX issues
+    const jsxOpenTags = fixedCode.match(/<[A-Z]\w*[^>]*>/g) || [];
+    const jsxCloseTags = fixedCode.match(/<\/[A-Z]\w*>/g) || [];
+    // If we have more opening tags than closing tags, try to balance them
+    if (jsxOpenTags.length > jsxCloseTags.length) {
+        // This is a very basic fix - in practice, you'd need more sophisticated parsing
+        // For now, we'll just add a warning
+    }
+    return fixedCode;
+}
+/**
+ * Extracts and validates code blocks from AI responses
+ */
+export function extractAndValidateCodeBlock(aiResponse) {
+    // Try multiple extraction methods
+    const extractionMethods = [
+        // Standard code blocks
+        (text) => {
+            const match = text.match(/```(?:tsx|jsx|typescript|ts|js|javascript)?\s*([\s\S]*?)\s*```/i);
+            return match ? match[1].trim() : null;
+        },
+        // Code starting with import
+        (text) => {
+            const importIndex = text.indexOf('import');
+            return importIndex !== -1 ? text.slice(importIndex).trim() : null;
+        },
+        // Code starting with export
+        (text) => {
+            const exportIndex = text.indexOf('export');
+            return exportIndex !== -1 ? text.slice(exportIndex).trim() : null;
+        }
+    ];
+    let extractedCode = null;
+    for (const method of extractionMethods) {
+        extractedCode = method(aiResponse);
+        if (extractedCode)
+            break;
+    }
+    if (!extractedCode) {
+        return {
+            isValid: false,
+            errors: ['No valid TypeScript code found in AI response'],
+            warnings: []
+        };
+    }
+    // Validate the extracted code
+    return validateStoryCode(extractedCode);
+}
+/**
+ * Creates a fallback story template when generation fails
+ */
+export function createFallbackStory(prompt, config) {
+    const title = prompt.length > 50 ? prompt.substring(0, 50) + '...' : prompt;
+    const escapedTitle = title.replace(/"/g, '\\"');
+    return `import React from 'react';
+import type { StoryObj } from '@storybook/react';
+
+// Fallback story generated due to AI generation error
+export default {
+  title: '${config.storyPrefix || 'Generated/'}${escapedTitle}',
+  component: () => (
+    <div style={{ padding: '2rem', textAlign: 'center', border: '2px dashed #ccc', borderRadius: '8px' }}>
+      <h2>Story Generation Error</h2>
+      <p>The AI-generated story contained syntax errors and could not be created.</p>
+      <p><strong>Original prompt:</strong> ${escapedTitle}</p>
+      <p>Please try rephrasing your request or contact support.</p>
+    </div>
+  ),
+  parameters: {
+    docs: {
+      description: {
+        story: 'This is a fallback story created when the AI generation failed due to syntax errors.'
+      }
+    }
+  }
+};
+
+export const Default: StoryObj = {
+  args: {}
+};`;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tpitre/story-ui",
-  "version": "1.2.0",
+  "version": "1.4.0",
   "description": "AI-powered Storybook story generator for any React component library",
   "type": "module",
   "main": "dist/index.js",
@@ -41,7 +41,7 @@
   "license": "MIT",
   "repository": {
     "type": "git",
-    "url": "https://github.com/southleft/story-ui.git"
+    "url": "git+https://github.com/southleft/story-ui.git"
   },
   "bugs": {
     "url": "https://github.com/southleft/story-ui/issues"
@@ -62,7 +62,8 @@
     "dotenv": "^16.3.1",
     "express": "^4.18.2",
     "inquirer": "^9.2.0",
-    "node-fetch": "^2.6.7"
+    "node-fetch": "^2.6.7",
+    "typescript": "^5.8.3"
   },
   "devDependencies": {
     "@commitlint/cli": "^19.6.1",
@@ -82,8 +83,7 @@
     "cz-conventional-changelog": "^3.3.0",
     "husky": "^9.1.7",
     "semantic-release": "^24.2.0",
-    "ts-node": "^10.9.2",
-    "typescript": "^5.8.3"
+    "ts-node": "^10.9.2"
   },
   "peerDependencies": {
     "@storybook/react": ">=6.0.0",

package/templates/StoryUI/StoryUIPanel.tsx

@@ -501,10 +501,45 @@ const StoryUIPanel: React.FC = () => {
 
       // Create user-friendly response message instead of showing raw markup
       let responseMessage: string;
+      let statusIcon = '✅';
+
+      // Check for validation issues
+      if (data.validation && data.validation.hasWarnings) {
+        statusIcon = '⚠️';
+        const warningCount = data.validation.warnings.length;
+        const errorCount = data.validation.errors.length;
+
+        if (errorCount > 0) {
+          statusIcon = '🔧';
+        }
+      }
+
       if (data.isUpdate) {
-        responseMessage = `✅ Updated your story: "${data.title}"\n\nI've made the requested changes while keeping the same layout structure. You can view the updated component in Storybook.`;
+        responseMessage = `${statusIcon} Updated your story: "${data.title}"\n\nI've made the requested changes while keeping the same layout structure. You can view the updated component in Storybook.`;
       } else {
-        responseMessage = `✅ Created new story: "${data.title}"\n\nI've generated the component with the requested features. You can view it in Storybook where you'll see both the rendered component and its markup in the Docs tab.`;
+        responseMessage = `${statusIcon} Created new story: "${data.title}"\n\nI've generated the component with the requested features. You can view it in Storybook where you'll see both the rendered component and its markup in the Docs tab.`;
+      }
+
+      // Add validation information if there are issues
+      if (data.validation && data.validation.hasWarnings) {
+        responseMessage += '\n\n';
+
+        if (data.validation.errors.length > 0) {
+          responseMessage += `🔧 **Auto-fixed ${data.validation.errors.length} syntax error(s):**\n`;
+          responseMessage += data.validation.errors.slice(0, 3).map(error => `  • ${error}`).join('\n');
+          if (data.validation.errors.length > 3) {
+            responseMessage += `\n  • ... and ${data.validation.errors.length - 3} more`;
+          }
+          responseMessage += '\n';
+        }
+
+        if (data.validation.warnings.length > 0) {
+          responseMessage += `⚠️ **Warnings:**\n`;
+          responseMessage += data.validation.warnings.slice(0, 2).map(warning => `  • ${warning}`).join('\n');
+          if (data.validation.warnings.length > 2) {
+            responseMessage += `\n  • ... and ${data.validation.warnings.length - 2} more`;
+          }
+        }
       }
 
       const aiMsg = { role: 'ai' as const, content: responseMessage };

package/dist/test-storybooks/chakra-test/src/components/index.js

@@ -1,3 +0,0 @@
-export { Button } from './Button';
-export { Card } from './Card';
-export { Input } from './Input';

package/dist/test-storybooks/custom-design-test/src/components/index.js

@@ -1,3 +0,0 @@
-export { Button } from './Button';
-export { Card } from './Card';
-export { Input } from './Input';

package/dist/tsconfig.tsbuildinfo

@@ -1 +0,0 @@
-{"root":["../index.ts","../story-ui.config.loader.ts","../story-ui.config.ts","../cli/index.ts","../cli/setup.ts","../mcp-server/index.ts","../mcp-server/routes/claude.ts","../mcp-server/routes/components.ts","../mcp-server/routes/generatestory.ts","../mcp-server/routes/memorystories.ts","../mcp-server/routes/storysync.ts","../story-generator/componentdiscovery.ts","../story-generator/configloader.ts","../story-generator/generatestory.ts","../story-generator/gitignoremanager.ts","../story-generator/inmemorystoryservice.ts","../story-generator/productiongitignoremanager.ts","../story-generator/promptgenerator.ts","../story-generator/storysync.ts"],"version":"5.8.3"}