@tpitre/story-ui 3.7.0 → 3.9.0

package/dist/cli/index.js

@@ -6,6 +6,7 @@ import path from 'path';
 import { fileURLToPath } from 'url';
 import { setupCommand, cleanupDefaultStorybookComponents } from './setup.js';
 import { deployCommand } from './deploy.js';
+import { updateCommand, statusCommand } from './update.js';
 import net from 'net';
 const __filename = fileURLToPath(import.meta.url);
 const __dirname = path.dirname(__filename);
@@ -279,4 +280,25 @@ program
         mcpServer.kill('SIGINT');
     });
 });
+program
+    .command('update')
+    .description('Update Story UI managed files to the latest version')
+    .option('-f, --force', 'Skip confirmation prompts')
+    .option('--no-backup', 'Skip creating backups of existing files')
+    .option('-n, --dry-run', 'Show what would be updated without making changes')
+    .option('-v, --verbose', 'Show detailed output')
+    .action(async (options) => {
+    await updateCommand({
+        force: options.force,
+        backup: options.backup,
+        dryRun: options.dryRun,
+        verbose: options.verbose
+    });
+});
+program
+    .command('status')
+    .description('Show Story UI installation status and version info')
+    .action(() => {
+    statusCommand();
+});
 program.parse(process.argv);

package/dist/cli/setup.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"setup.d.ts","sourceRoot":"","sources":["../../cli/setup.ts"],"names":[],"mappings":"AAkCA;;GAEG;AACH,wBAAgB,iCAAiC,SA8ChD;AA2VD,MAAM,WAAW,YAAY;IAC3B,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,WAAW,CAAC,EAAE,QAAQ,GAAG,QAAQ,GAAG,QAAQ,CAAC;IAC7C,GAAG,CAAC,EAAE,OAAO,CAAC;IACd,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB;AAED,wBAAsB,YAAY,CAAC,OAAO,GAAE,YAAiB,iBAwsB5D"}
+{"version":3,"file":"setup.d.ts","sourceRoot":"","sources":["../../cli/setup.ts"],"names":[],"mappings":"AAmDA;;GAEG;AACH,wBAAgB,iCAAiC,SA8ChD;AAiWD,MAAM,WAAW,YAAY;IAC3B,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,WAAW,CAAC,EAAE,QAAQ,GAAG,QAAQ,GAAG,QAAQ,CAAC;IAC7C,GAAG,CAAC,EAAE,OAAO,CAAC;IACd,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB;AAED,wBAAsB,YAAY,CAAC,OAAO,GAAE,YAAiB,iBA2sB5D"}

package/dist/cli/setup.js

@@ -8,6 +8,23 @@ import net from 'net';
 import { execSync } from 'child_process';
 const __filename = fileURLToPath(import.meta.url);
 const __dirname = path.dirname(__filename);
+/**
+ * Get the Story UI package version for version tracking
+ */
+function getStoryUIVersion() {
+    try {
+        const pkgRoot = path.resolve(__dirname, '..');
+        const packageJsonPath = path.join(pkgRoot, 'package.json');
+        if (fs.existsSync(packageJsonPath)) {
+            const packageJson = JSON.parse(fs.readFileSync(packageJsonPath, 'utf-8'));
+            return packageJson.version || 'unknown';
+        }
+    }
+    catch (error) {
+        // Fallback
+    }
+    return 'unknown';
+}
 // FIRST_EDIT: helper functions to check for free ports
 async function isPortAvailable(port) {
     return new Promise((resolve) => {
@@ -244,10 +261,16 @@ const DESIGN_SYSTEM_CONFIGS = {
         framework: 'vue'
     },
     vuetify: {
-        packages: ['vuetify'],
+        packages: ['vuetify', '@mdi/font', '@fontsource/roboto'],
         name: 'Vuetify',
         importPath: 'vuetify',
-        additionalSetup: 'import "vuetify/styles";',
+        additionalSetup: `import "vuetify/styles";
+import "@mdi/font/css/materialdesignicons.css";
+// Roboto font required for proper Vuetify typography
+import "@fontsource/roboto/300.css";
+import "@fontsource/roboto/400.css";
+import "@fontsource/roboto/500.css";
+import "@fontsource/roboto/700.css";`,
         framework: 'vue'
     },
     'element-plus': {
@@ -835,6 +858,9 @@ Material UI (MUI) is a React component library implementing Material Design.
     config.componentFramework = componentFramework; // react, angular, vue, svelte, or web-components
     config.storybookFramework = storybookFramework; // e.g., @storybook/react-vite, @storybook/angular
     config.llmProvider = answers.llmProvider || 'claude'; // claude, openai, or gemini
+    // Add version tracking for update command
+    config._storyUIVersion = getStoryUIVersion();
+    config._lastUpdated = new Date().toISOString();
     // Create configuration file
     const configContent = `module.exports = ${JSON.stringify(config, null, 2)};`;
     const configPath = path.join(process.cwd(), 'story-ui.config.js');

package/dist/cli/update.d.ts

@@ -0,0 +1,29 @@
+/**
+ * Story UI Update Command
+ *
+ * Refreshes managed Story UI files (StoryUIPanel.tsx, StoryUIPanel.mdx, index.tsx)
+ * while preserving user configuration files (story-ui.config.js, .env, etc.)
+ */
+export interface UpdateOptions {
+    force?: boolean;
+    backup?: boolean;
+    dryRun?: boolean;
+    verbose?: boolean;
+}
+export interface UpdateResult {
+    success: boolean;
+    filesUpdated: string[];
+    filesBackedUp: string[];
+    errors: string[];
+    currentVersion: string;
+    newVersion: string;
+}
+/**
+ * Main update command
+ */
+export declare function updateCommand(options?: UpdateOptions): Promise<UpdateResult>;
+/**
+ * Show current Story UI installation status
+ */
+export declare function statusCommand(): void;
+//# sourceMappingURL=update.d.ts.map

package/dist/cli/update.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"update.d.ts","sourceRoot":"","sources":["../../cli/update.ts"],"names":[],"mappings":"AASA;;;;;GAKG;AAEH,MAAM,WAAW,aAAa;IAC5B,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAED,MAAM,WAAW,YAAY;IAC3B,OAAO,EAAE,OAAO,CAAC;IACjB,YAAY,EAAE,MAAM,EAAE,CAAC;IACvB,aAAa,EAAE,MAAM,EAAE,CAAC;IACxB,MAAM,EAAE,MAAM,EAAE,CAAC;IACjB,cAAc,EAAE,MAAM,CAAC;IACvB,UAAU,EAAE,MAAM,CAAC;CACpB;AA2SD;;GAEG;AACH,wBAAsB,aAAa,CAAC,OAAO,GAAE,aAAkB,GAAG,OAAO,CAAC,YAAY,CAAC,CAkItF;AAED;;GAEG;AACH,wBAAgB,aAAa,IAAI,IAAI,CA+BpC"}

package/dist/cli/update.js

@@ -0,0 +1,398 @@
+import fs from 'fs';
+import path from 'path';
+import chalk from 'chalk';
+import { fileURLToPath } from 'url';
+import inquirer from 'inquirer';
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+// Files managed by Story UI that can be safely overwritten
+const MANAGED_FILES = [
+    {
+        source: 'templates/StoryUI/StoryUIPanel.tsx',
+        target: 'src/stories/StoryUI/StoryUIPanel.tsx',
+        description: 'Main chat panel component'
+    },
+    {
+        source: 'templates/StoryUI/StoryUIPanel.mdx',
+        target: 'src/stories/StoryUI/StoryUIPanel.mdx',
+        description: 'Cross-framework MDX wrapper'
+    },
+    {
+        source: 'templates/StoryUI/index.tsx',
+        target: 'src/stories/StoryUI/index.tsx',
+        description: 'Panel registration'
+    }
+];
+// Files that should NEVER be modified by update
+const USER_CONFIG_FILES = [
+    'story-ui.config.js',
+    'story-ui.config.mjs',
+    'story-ui.config.cjs',
+    '.env',
+    'story-ui-considerations.md',
+    'story-ui-docs/'
+];
+// Directories that should NEVER be touched
+const PROTECTED_DIRECTORIES = [
+    'src/stories/generated/'
+];
+/**
+ * Get the Story UI package version
+ */
+function getPackageVersion() {
+    try {
+        // Try multiple paths to find package.json
+        // When running from dist/cli/index.js, we need to go up 2 levels
+        const possiblePaths = [
+            path.resolve(__dirname, '..', 'package.json'), // From dist/cli
+            path.resolve(__dirname, '..', '..', 'package.json'), // From src/cli
+        ];
+        for (const packageJsonPath of possiblePaths) {
+            if (fs.existsSync(packageJsonPath)) {
+                const packageJson = JSON.parse(fs.readFileSync(packageJsonPath, 'utf-8'));
+                if (packageJson.name === '@tpitre/story-ui' && packageJson.version) {
+                    return packageJson.version;
+                }
+            }
+        }
+    }
+    catch (error) {
+        // Fallback
+    }
+    return 'unknown';
+}
+/**
+ * Detect if Story UI is initialized in the current directory
+ */
+function detectStoryUIInstallation() {
+    const cwd = process.cwd();
+    // Check for Story UI directory
+    const possibleStoryUIDirs = [
+        path.join(cwd, 'src', 'stories', 'StoryUI'),
+        path.join(cwd, 'stories', 'StoryUI')
+    ];
+    let storyUIDir;
+    for (const dir of possibleStoryUIDirs) {
+        if (fs.existsSync(dir)) {
+            storyUIDir = dir;
+            break;
+        }
+    }
+    // Check for config file
+    const configFiles = [
+        'story-ui.config.js',
+        'story-ui.config.mjs',
+        'story-ui.config.cjs'
+    ];
+    let configPath;
+    for (const configFile of configFiles) {
+        const fullPath = path.join(cwd, configFile);
+        if (fs.existsSync(fullPath)) {
+            configPath = fullPath;
+            break;
+        }
+    }
+    // Try to read installed version from config
+    let installedVersion;
+    if (configPath) {
+        try {
+            const configContent = fs.readFileSync(configPath, 'utf-8');
+            const versionMatch = configContent.match(/_storyUIVersion:\s*['"]([^'"]+)['"]/);
+            if (versionMatch) {
+                installedVersion = versionMatch[1];
+            }
+        }
+        catch (error) {
+            // Ignore read errors
+        }
+    }
+    return {
+        isInstalled: !!(storyUIDir || configPath),
+        storyUIDir,
+        configPath,
+        installedVersion
+    };
+}
+/**
+ * Create a backup of a file
+ */
+function createBackup(filePath) {
+    if (!fs.existsSync(filePath)) {
+        return null;
+    }
+    const timestamp = new Date().toISOString().replace(/[:.]/g, '-');
+    const backupPath = `${filePath}.backup-${timestamp}`;
+    try {
+        fs.copyFileSync(filePath, backupPath);
+        return backupPath;
+    }
+    catch (error) {
+        return null;
+    }
+}
+/**
+ * Get the source path for a template file
+ */
+function getSourcePath(relativePath) {
+    // First try the dist directory (when installed as package)
+    const pkgRoot = path.resolve(__dirname, '..');
+    const distPath = path.join(pkgRoot, relativePath);
+    if (fs.existsSync(distPath)) {
+        return distPath;
+    }
+    // Fall back to project root (when running in development)
+    const projectRoot = path.resolve(__dirname, '..', '..');
+    const projectPath = path.join(projectRoot, relativePath);
+    if (fs.existsSync(projectPath)) {
+        return projectPath;
+    }
+    throw new Error(`Template file not found: ${relativePath}`);
+}
+/**
+ * Compare file contents to check if update is needed
+ */
+function filesAreDifferent(sourcePath, targetPath) {
+    if (!fs.existsSync(targetPath)) {
+        return true;
+    }
+    try {
+        const sourceContent = fs.readFileSync(sourcePath, 'utf-8');
+        const targetContent = fs.readFileSync(targetPath, 'utf-8');
+        return sourceContent !== targetContent;
+    }
+    catch (error) {
+        return true;
+    }
+}
+/**
+ * Update a single managed file
+ */
+function updateManagedFile(sourceRelative, targetRelative, options) {
+    const cwd = process.cwd();
+    const targetPath = path.join(cwd, targetRelative);
+    try {
+        const sourcePath = getSourcePath(sourceRelative);
+        // Check if update is needed
+        if (!filesAreDifferent(sourcePath, targetPath)) {
+            if (options.verbose) {
+                console.log(chalk.gray(`  ⏭️  ${targetRelative} (already up to date)`));
+            }
+            return { updated: false };
+        }
+        if (options.dryRun) {
+            console.log(chalk.cyan(`  📋 Would update: ${targetRelative}`));
+            return { updated: true };
+        }
+        // Create backup if enabled and file exists
+        let backupPath;
+        if (options.backup !== false && fs.existsSync(targetPath)) {
+            const backup = createBackup(targetPath);
+            if (backup) {
+                backupPath = backup;
+                if (options.verbose) {
+                    console.log(chalk.gray(`  💾 Backed up: ${path.basename(backup)}`));
+                }
+            }
+        }
+        // Ensure target directory exists
+        const targetDir = path.dirname(targetPath);
+        if (!fs.existsSync(targetDir)) {
+            fs.mkdirSync(targetDir, { recursive: true });
+        }
+        // Copy the new file
+        fs.copyFileSync(sourcePath, targetPath);
+        console.log(chalk.green(`  ✅ Updated: ${targetRelative}`));
+        return { updated: true, backupPath };
+    }
+    catch (error) {
+        return { updated: false, error: error.message };
+    }
+}
+/**
+ * Update the config file with version tracking
+ */
+function updateConfigVersion(configPath, version) {
+    try {
+        let content = fs.readFileSync(configPath, 'utf-8');
+        // Check if version tracking already exists
+        const hasVersion = /_storyUIVersion/.test(content);
+        const hasLastUpdated = /_lastUpdated/.test(content);
+        const timestamp = new Date().toISOString();
+        if (hasVersion) {
+            // Update existing version
+            content = content.replace(/_storyUIVersion:\s*['"][^'"]*['"]/, `_storyUIVersion: '${version}'`);
+        }
+        if (hasLastUpdated) {
+            // Update existing timestamp
+            content = content.replace(/_lastUpdated:\s*['"][^'"]*['"]/, `_lastUpdated: '${timestamp}'`);
+        }
+        // If neither exists, add them before the closing brace
+        if (!hasVersion && !hasLastUpdated) {
+            // Find the last property and add version tracking
+            const insertPosition = content.lastIndexOf('}');
+            if (insertPosition !== -1) {
+                const versionFields = `
+  // Story UI version tracking (auto-generated)
+  _storyUIVersion: '${version}',
+  _lastUpdated: '${timestamp}',
+`;
+                // Check if there's a trailing comma needed
+                const beforeInsert = content.substring(0, insertPosition).trim();
+                const needsComma = beforeInsert.endsWith(',') || beforeInsert.endsWith('{') ? '' : ',';
+                content = content.substring(0, insertPosition - 1) +
+                    needsComma +
+                    versionFields +
+                    '};' +
+                    content.substring(insertPosition + 1);
+            }
+        }
+        fs.writeFileSync(configPath, content);
+        return true;
+    }
+    catch (error) {
+        return false;
+    }
+}
+/**
+ * Main update command
+ */
+export async function updateCommand(options = {}) {
+    const result = {
+        success: false,
+        filesUpdated: [],
+        filesBackedUp: [],
+        errors: [],
+        currentVersion: 'unknown',
+        newVersion: getPackageVersion()
+    };
+    console.log(chalk.bold('\n🔄 Story UI Update\n'));
+    // Step 1: Detect installation
+    const installation = detectStoryUIInstallation();
+    if (!installation.isInstalled) {
+        console.log(chalk.red('❌ Story UI is not initialized in this directory.'));
+        console.log(chalk.yellow('   Run "npx story-ui init" first to set up Story UI.'));
+        result.errors.push('Story UI not initialized');
+        return result;
+    }
+    result.currentVersion = installation.installedVersion || 'unknown';
+    console.log(chalk.gray(`   Current version: ${result.currentVersion}`));
+    console.log(chalk.gray(`   New version: ${result.newVersion}`));
+    // Step 2: Show what will be updated
+    console.log(chalk.bold('\n📦 Managed files to update:'));
+    const filesToUpdate = [];
+    for (const file of MANAGED_FILES) {
+        try {
+            const sourcePath = getSourcePath(file.source);
+            const targetPath = path.join(process.cwd(), file.target);
+            const needsUpdate = filesAreDifferent(sourcePath, targetPath);
+            if (needsUpdate) {
+                filesToUpdate.push(file);
+                console.log(chalk.cyan(`   • ${file.target}`));
+                console.log(chalk.gray(`     ${file.description}`));
+            }
+            else if (options.verbose) {
+                console.log(chalk.gray(`   ⏭️ ${file.target} (up to date)`));
+            }
+        }
+        catch (error) {
+            console.log(chalk.red(`   ❌ ${file.target}: ${error.message}`));
+            result.errors.push(`${file.target}: ${error.message}`);
+        }
+    }
+    if (filesToUpdate.length === 0) {
+        console.log(chalk.green('\n✅ All files are already up to date!'));
+        result.success = true;
+        return result;
+    }
+    // Step 3: Confirm update (unless --force or --dry-run)
+    if (!options.force && !options.dryRun) {
+        console.log(chalk.yellow('\n⚠️  The following will NOT be modified:'));
+        console.log(chalk.gray('   • story-ui.config.js (your configuration)'));
+        console.log(chalk.gray('   • .env (your API keys)'));
+        console.log(chalk.gray('   • story-ui-docs/ (your documentation)'));
+        console.log(chalk.gray('   • src/stories/generated/ (your generated stories)'));
+        const { confirm } = await inquirer.prompt([{
+                type: 'confirm',
+                name: 'confirm',
+                message: `Update ${filesToUpdate.length} file(s)?`,
+                default: true
+            }]);
+        if (!confirm) {
+            console.log(chalk.yellow('\n⏹️  Update cancelled.'));
+            return result;
+        }
+    }
+    // Step 4: Perform updates
+    if (options.dryRun) {
+        console.log(chalk.bold('\n📋 Dry run - no changes made:'));
+    }
+    else {
+        console.log(chalk.bold('\n🔧 Updating files...'));
+    }
+    for (const file of filesToUpdate) {
+        const updateResult = updateManagedFile(file.source, file.target, options);
+        if (updateResult.updated) {
+            result.filesUpdated.push(file.target);
+        }
+        if (updateResult.backupPath) {
+            result.filesBackedUp.push(updateResult.backupPath);
+        }
+        if (updateResult.error) {
+            result.errors.push(`${file.target}: ${updateResult.error}`);
+        }
+    }
+    // Step 5: Update config version tracking
+    if (!options.dryRun && installation.configPath) {
+        if (updateConfigVersion(installation.configPath, result.newVersion)) {
+            console.log(chalk.gray(`\n   Updated version tracking in ${path.basename(installation.configPath)}`));
+        }
+    }
+    // Step 6: Summary
+    console.log(chalk.bold('\n📊 Update Summary:'));
+    console.log(chalk.green(`   ✅ Files updated: ${result.filesUpdated.length}`));
+    if (result.filesBackedUp.length > 0) {
+        console.log(chalk.gray(`   💾 Backups created: ${result.filesBackedUp.length}`));
+    }
+    if (result.errors.length > 0) {
+        console.log(chalk.red(`   ❌ Errors: ${result.errors.length}`));
+        for (const error of result.errors) {
+            console.log(chalk.red(`      • ${error}`));
+        }
+    }
+    result.success = result.errors.length === 0;
+    if (result.success && !options.dryRun) {
+        console.log(chalk.green('\n✅ Story UI updated successfully!'));
+        console.log(chalk.gray('   Restart Storybook to see the changes.'));
+    }
+    return result;
+}
+/**
+ * Show current Story UI installation status
+ */
+export function statusCommand() {
+    console.log(chalk.bold('\n📊 Story UI Status\n'));
+    const installation = detectStoryUIInstallation();
+    const packageVersion = getPackageVersion();
+    if (!installation.isInstalled) {
+        console.log(chalk.red('❌ Story UI is not initialized in this directory.'));
+        console.log(chalk.gray('   Run "npx story-ui init" to set up Story UI.'));
+        return;
+    }
+    console.log(chalk.green('✅ Story UI is installed'));
+    console.log(chalk.gray(`   Package version: ${packageVersion}`));
+    console.log(chalk.gray(`   Installed version: ${installation.installedVersion || 'unknown'}`));
+    if (installation.configPath) {
+        console.log(chalk.gray(`   Config: ${path.basename(installation.configPath)}`));
+    }
+    if (installation.storyUIDir) {
+        console.log(chalk.gray(`   Panel directory: ${installation.storyUIDir}`));
+    }
+    // Check for updates
+    if (installation.installedVersion && installation.installedVersion !== packageVersion) {
+        console.log(chalk.yellow(`\n⚡ Update available: ${installation.installedVersion} → ${packageVersion}`));
+        console.log(chalk.gray('   Run "npx story-ui update" to update.'));
+    }
+    else if (installation.installedVersion === packageVersion) {
+        console.log(chalk.green('\n✅ Up to date!'));
+    }
+}

package/dist/mcp-server/index.js

@@ -263,6 +263,87 @@ app.post('/story-ui/delete', async (req, res) => {
         res.status(500).json({ error: 'Failed to delete story' });
     }
 });
+// Bulk delete stories
+app.post('/story-ui/stories/delete-bulk', async (req, res) => {
+    try {
+        const { ids } = req.body;
+        if (!ids || !Array.isArray(ids) || ids.length === 0) {
+            return res.status(400).json({ error: 'ids array is required' });
+        }
+        console.log(`🗑️ Bulk deleting ${ids.length} stories`);
+        const storiesPath = config.generatedStoriesPath;
+        const deleted = [];
+        const notFound = [];
+        const errors = [];
+        for (const id of ids) {
+            try {
+                const fileName = id.endsWith('.stories.tsx') ? id : `${id}.stories.tsx`;
+                const filePath = path.join(storiesPath, fileName);
+                if (fs.existsSync(filePath)) {
+                    fs.unlinkSync(filePath);
+                    deleted.push(id);
+                    console.log(`✅ Deleted: ${fileName}`);
+                }
+                else {
+                    notFound.push(id);
+                }
+            }
+            catch (err) {
+                errors.push(id);
+                console.error(`❌ Error deleting ${id}:`, err);
+            }
+        }
+        console.log(`📊 Bulk delete complete: ${deleted.length} deleted, ${notFound.length} not found, ${errors.length} errors`);
+        return res.json({
+            success: true,
+            deleted,
+            notFound,
+            errors,
+            summary: {
+                requested: ids.length,
+                deleted: deleted.length,
+                notFound: notFound.length,
+                errors: errors.length
+            }
+        });
+    }
+    catch (error) {
+        console.error('Error in bulk delete:', error);
+        return res.status(500).json({ error: 'Failed to bulk delete stories' });
+    }
+});
+// Clear all generated stories
+app.delete('/story-ui/stories', async (req, res) => {
+    try {
+        const storiesPath = config.generatedStoriesPath;
+        console.log(`🗑️ Clearing all stories from: ${storiesPath}`);
+        if (!fs.existsSync(storiesPath)) {
+            return res.json({ success: true, deleted: 0, message: 'No stories directory found' });
+        }
+        const files = fs.readdirSync(storiesPath);
+        const storyFiles = files.filter(file => file.endsWith('.stories.tsx'));
+        let deleted = 0;
+        for (const file of storyFiles) {
+            try {
+                fs.unlinkSync(path.join(storiesPath, file));
+                deleted++;
+            }
+            catch (err) {
+                console.error(`Error deleting ${file}:`, err);
+            }
+        }
+        console.log(`✅ Cleared ${deleted} stories`);
+        return res.json({
+            success: true,
+            deleted,
+            message: `Cleared ${deleted} stories`
+        });
+    }
+    catch (error) {
+        console.error('Error clearing stories:', error);
+        return res.status(500).json({ error: 'Failed to clear stories' });
+    }
+});
 // MCP Remote HTTP transport routes (for Claude Desktop remote connections)
 // Provides Streamable HTTP and legacy SSE endpoints for remote MCP access
 app.use('/mcp-remote', mcpRemoteRouter);

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

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

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

@@ -18,6 +18,7 @@ import { chatCompletion, generateTitle as llmGenerateTitle, isProviderConfigured
 import { processImageInputs } from '../../story-generator/imageProcessor.js';
 import { buildVisionAwarePrompt } from '../../story-generator/visionPrompts.js';
 import { aggregateValidationErrors, shouldContinueRetrying, buildSelfHealingPrompt, hasNoErrors, getTotalErrorCount, createEmptyErrors, formatErrorsForLog, selectBestAttempt, } from '../../story-generator/selfHealingLoop.js';
+import { validateStoryRuntime, formatRuntimeErrorForHealing, isRuntimeValidationEnabled, } from '../../story-generator/runtimeValidator.js';
 // Build suggestion using the user's actual discovered components (design-system agnostic)
 function buildComponentSuggestion(components) {
     if (!components?.length) {
@@ -730,6 +731,33 @@ export async function generateStoryFromPrompt(req, res) {
         // Save to history
         historyManager.addVersion(finalFileName, prompt, fixedFileContents, parentVersionId);
         logger.log(`Story ${isActualUpdate ? 'updated' : 'written'} to:`, outPath);
+        // --- RUNTIME VALIDATION: Check if story loads in Storybook ---
+        // This catches errors that static validation cannot detect, like CSF module loader errors
+        let runtimeValidationResult = { success: true, storyExists: true };
+        let hasRuntimeError = false;
+        if (isRuntimeValidationEnabled()) {
+            logger.info('🔍 Running runtime validation...');
+            try {
+                runtimeValidationResult = await validateStoryRuntime(fixedFileContents, aiTitle, config.storyPrefix);
+                if (!runtimeValidationResult.success) {
+                    hasRuntimeError = true;
+                    hasValidationWarnings = true;
+                    logger.error(`❌ Runtime validation failed: ${runtimeValidationResult.renderError}`);
+                    logger.error(`   Error type: ${runtimeValidationResult.errorType}`);
+                    // Format the error for potential future self-healing
+                    const runtimeErrorMessage = formatRuntimeErrorForHealing(runtimeValidationResult);
+                    logger.debug('Runtime error details:', runtimeErrorMessage);
+                }
+                else {
+                    logger.info('✅ Runtime validation passed - story loads correctly in Storybook');
+                }
+            }
+            catch (runtimeErr) {
+                // Don't fail the request if runtime validation itself fails (e.g., Storybook not running)
+                logger.warn(`⚠️ Runtime validation could not complete: ${runtimeErr.message}`);
+                logger.warn('   Story was saved but runtime status is unknown');
+            }
+        }
         // Track URL redirect if this is an update and the title changed
         if (isActualUpdate && oldTitle && oldStoryUrl) {
             const newTitleMatch = fixedFileContents.match(/title:\s*["']([^"']+)['"]/);
@@ -759,6 +787,14 @@ export async function generateStoryFromPrompt(req, res) {
                 warnings: [],
                 selfHealingUsed,
                 attempts
+            },
+            runtimeValidation: {
+                enabled: isRuntimeValidationEnabled(),
+                success: runtimeValidationResult.success,
+                storyExists: runtimeValidationResult.storyExists,
+                error: runtimeValidationResult.renderError,
+                errorType: runtimeValidationResult.errorType,
+                details: runtimeValidationResult.details
             }
         });
     }