@tpitre/story-ui 3.8.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/templates/StoryUI/StoryUIPanel.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"StoryUIPanel.d.ts","sourceRoot":"","sources":["../../../templates/StoryUI/StoryUIPanel.tsx"],"names":[],"mappings":"AAymDA,iBAAS,YAAY,4CAuyCpB;AAED,eAAe,YAAY,CAAC;AAC5B,OAAO,EAAE,YAAY,EAAE,CAAC"}
+{"version":3,"file":"StoryUIPanel.d.ts","sourceRoot":"","sources":["../../../templates/StoryUI/StoryUIPanel.tsx"],"names":[],"mappings":"AAymDA,iBAAS,YAAY,4CAygDpB;AAED,eAAe,YAAY,CAAC;AAC5B,OAAO,EAAE,YAAY,EAAE,CAAC"}

package/dist/templates/StoryUI/StoryUIPanel.js

@@ -1241,6 +1241,8 @@ function StoryUIPanel() {
     const [attachedImages, setAttachedImages] = useState([]);
     const [considerations, setConsiderations] = useState('');
     const [orphanStories, setOrphanStories] = useState([]);
+    const [selectedStoryIds, setSelectedStoryIds] = useState(new Set());
+    const [isBulkDeleting, setIsBulkDeleting] = useState(false);
     const chatEndRef = useRef(null);
     const inputRef = useRef(null);
     const fileInputRef = useRef(null);
@@ -1961,6 +1963,92 @@ function StoryUIPanel() {
             }
         }
     };
+    // Toggle story selection for bulk operations
+    const toggleStorySelection = (storyId) => {
+        setSelectedStoryIds(prev => {
+            const newSet = new Set(prev);
+            if (newSet.has(storyId)) {
+                newSet.delete(storyId);
+            }
+            else {
+                newSet.add(storyId);
+            }
+            return newSet;
+        });
+    };
+    // Select/deselect all stories
+    const toggleSelectAll = () => {
+        if (selectedStoryIds.size === orphanStories.length) {
+            setSelectedStoryIds(new Set());
+        }
+        else {
+            setSelectedStoryIds(new Set(orphanStories.map(s => s.id)));
+        }
+    };
+    // Bulk delete selected stories
+    const handleBulkDelete = async () => {
+        if (selectedStoryIds.size === 0)
+            return;
+        const count = selectedStoryIds.size;
+        if (!confirm(`Delete ${count} selected ${count === 1 ? 'story' : 'stories'}? This action cannot be undone.`)) {
+            return;
+        }
+        setIsBulkDeleting(true);
+        try {
+            const response = await fetch(`${STORIES_API}/delete-bulk`, {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({ ids: Array.from(selectedStoryIds) }),
+            });
+            if (response.ok) {
+                const result = await response.json();
+                // Remove deleted stories from state
+                setOrphanStories(prev => prev.filter(s => !selectedStoryIds.has(s.id)));
+                setSelectedStoryIds(new Set());
+                console.log(`Deleted ${result.deleted?.length || count} stories`);
+            }
+            else {
+                alert('Failed to delete some stories. Please try again.');
+            }
+        }
+        catch (err) {
+            console.error('Error bulk deleting stories:', err);
+            alert('Failed to delete stories. Please try again.');
+        }
+        finally {
+            setIsBulkDeleting(false);
+        }
+    };
+    // Clear all generated stories
+    const handleClearAll = async () => {
+        if (orphanStories.length === 0)
+            return;
+        if (!confirm(`Delete ALL ${orphanStories.length} generated stories? This action cannot be undone.`)) {
+            return;
+        }
+        setIsBulkDeleting(true);
+        try {
+            const response = await fetch(STORIES_API, {
+                method: 'DELETE',
+            });
+            if (response.ok) {
+                const result = await response.json();
+                setOrphanStories([]);
+                setSelectedStoryIds(new Set());
+                console.log(`Cleared ${result.deleted || 'all'} stories`);
+            }
+            else {
+                alert('Failed to clear stories. Please try again.');
+            }
+        }
+        catch (err) {
+            console.error('Error clearing stories:', err);
+            alert('Failed to clear stories. Please try again.');
+        }
+        finally {
+            setIsBulkDeleting(false);
+        }
+    };
     return (_jsxs("div", { className: "story-ui-panel", style: STYLES.container, children: [_jsxs("div", { style: {
                     ...STYLES.sidebar,
                     ...(sidebarOpen ? {} : STYLES.sidebarCollapsed),
@@ -2001,28 +2089,107 @@ function StoryUIPanel() {
                                     if (deleteBtn)
                                         deleteBtn.style.opacity = '0';
                                 }, children: [_jsx("div", { style: STYLES.chatItemTitle, children: chat.title }), _jsx("div", { style: STYLES.chatItemTime, children: formatTime(chat.lastUpdated) }), _jsx("button", { className: "delete-btn", onClick: (e) => handleDeleteChat(chat.id, e), style: STYLES.deleteButton, title: "Delete chat", children: _jsxs("svg", { width: "12", height: "12", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [_jsx("line", { x1: "18", y1: "6", x2: "6", y2: "18" }), _jsx("line", { x1: "6", y1: "6", x2: "18", y2: "18" })] }) })] }, chat.id))), orphanStories.length > 0 && (_jsxs(_Fragment, { children: [_jsx("div", { style: {
-                                            color: '#64748b',
-                                            fontSize: '12px',
+                                            display: 'flex',
+                                            alignItems: 'center',
+                                            justifyContent: 'space-between',
                                             marginTop: '16px',
                                             marginBottom: '8px',
-                                            fontWeight: '500',
-                                            textTransform: 'uppercase',
-                                            letterSpacing: '0.05em',
-                                        }, children: "Generated Files" }), orphanStories.map(story => (_jsxs("div", { style: {
+                                        }, children: _jsxs("div", { style: {
+                                                display: 'flex',
+                                                alignItems: 'center',
+                                                gap: '8px',
+                                            }, children: [_jsx("input", { type: "checkbox", checked: selectedStoryIds.size === orphanStories.length && orphanStories.length > 0, onChange: toggleSelectAll, style: {
+                                                        width: '14px',
+                                                        height: '14px',
+                                                        cursor: 'pointer',
+                                                        accentColor: '#3b82f6',
+                                                    }, title: selectedStoryIds.size === orphanStories.length ? 'Deselect all' : 'Select all' }), _jsxs("span", { style: {
+                                                        color: '#64748b',
+                                                        fontSize: '12px',
+                                                        fontWeight: '500',
+                                                        textTransform: 'uppercase',
+                                                        letterSpacing: '0.05em',
+                                                    }, children: ["Generated Files (", orphanStories.length, ")"] })] }) }), selectedStoryIds.size > 0 && (_jsx("div", { style: {
+                                            display: 'flex',
+                                            gap: '8px',
+                                            marginBottom: '12px',
+                                        }, children: _jsx("button", { onClick: handleBulkDelete, disabled: isBulkDeleting, style: {
+                                                flex: 1,
+                                                padding: '6px 10px',
+                                                fontSize: '11px',
+                                                fontWeight: '500',
+                                                background: 'rgba(239, 68, 68, 0.15)',
+                                                color: '#f87171',
+                                                border: '1px solid rgba(239, 68, 68, 0.3)',
+                                                borderRadius: '6px',
+                                                cursor: isBulkDeleting ? 'not-allowed' : 'pointer',
+                                                opacity: isBulkDeleting ? 0.6 : 1,
+                                                transition: 'all 0.15s ease',
+                                            }, onMouseEnter: (e) => {
+                                                if (!isBulkDeleting) {
+                                                    e.currentTarget.style.background = 'rgba(239, 68, 68, 0.25)';
+                                                }
+                                            }, onMouseLeave: (e) => {
+                                                e.currentTarget.style.background = 'rgba(239, 68, 68, 0.15)';
+                                            }, children: isBulkDeleting ? 'Deleting...' : `Delete Selected (${selectedStoryIds.size})` }) })), _jsx("div", { style: {
+                                            display: 'flex',
+                                            gap: '8px',
+                                            marginBottom: '12px',
+                                        }, children: _jsx("button", { onClick: handleClearAll, disabled: isBulkDeleting || orphanStories.length === 0, style: {
+                                                flex: 1,
+                                                padding: '6px 10px',
+                                                fontSize: '11px',
+                                                fontWeight: '500',
+                                                background: 'rgba(100, 116, 139, 0.15)',
+                                                color: '#94a3b8',
+                                                border: '1px solid rgba(100, 116, 139, 0.3)',
+                                                borderRadius: '6px',
+                                                cursor: (isBulkDeleting || orphanStories.length === 0) ? 'not-allowed' : 'pointer',
+                                                opacity: (isBulkDeleting || orphanStories.length === 0) ? 0.6 : 1,
+                                                transition: 'all 0.15s ease',
+                                            }, onMouseEnter: (e) => {
+                                                if (!isBulkDeleting && orphanStories.length > 0) {
+                                                    e.currentTarget.style.background = 'rgba(239, 68, 68, 0.15)';
+                                                    e.currentTarget.style.color = '#f87171';
+                                                    e.currentTarget.style.borderColor = 'rgba(239, 68, 68, 0.3)';
+                                                }
+                                            }, onMouseLeave: (e) => {
+                                                e.currentTarget.style.background = 'rgba(100, 116, 139, 0.15)';
+                                                e.currentTarget.style.color = '#94a3b8';
+                                                e.currentTarget.style.borderColor = 'rgba(100, 116, 139, 0.3)';
+                                            }, children: "Clear All Stories" }) }), orphanStories.map(story => (_jsxs("div", { style: {
                                             ...STYLES.chatItem,
-                                            background: 'rgba(251, 191, 36, 0.1)',
-                                            borderLeft: '3px solid rgba(251, 191, 36, 0.5)',
+                                            background: selectedStoryIds.has(story.id)
+                                                ? 'rgba(59, 130, 246, 0.15)'
+                                                : 'rgba(251, 191, 36, 0.1)',
+                                            borderLeft: selectedStoryIds.has(story.id)
+                                                ? '3px solid rgba(59, 130, 246, 0.5)'
+                                                : '3px solid rgba(251, 191, 36, 0.5)',
+                                            display: 'flex',
+                                            alignItems: 'flex-start',
+                                            gap: '8px',
                                         }, onMouseEnter: (e) => {
-                                            e.currentTarget.style.background = 'rgba(251, 191, 36, 0.15)';
+                                            if (!selectedStoryIds.has(story.id)) {
+                                                e.currentTarget.style.background = 'rgba(251, 191, 36, 0.15)';
+                                            }
                                             const deleteBtn = e.currentTarget.querySelector('.delete-orphan-btn');
                                             if (deleteBtn)
                                                 deleteBtn.style.opacity = '1';
                                         }, onMouseLeave: (e) => {
-                                            e.currentTarget.style.background = 'rgba(251, 191, 36, 0.1)';
+                                            if (!selectedStoryIds.has(story.id)) {
+                                                e.currentTarget.style.background = 'rgba(251, 191, 36, 0.1)';
+                                            }
                                             const deleteBtn = e.currentTarget.querySelector('.delete-orphan-btn');
                                             if (deleteBtn)
                                                 deleteBtn.style.opacity = '0';
-                                        }, children: [_jsx("div", { style: STYLES.chatItemTitle, children: story.title }), _jsx("div", { style: { ...STYLES.chatItemTime, fontSize: '11px' }, children: story.fileName }), _jsx("button", { className: "delete-orphan-btn", onClick: async (e) => {
+                                        }, children: [_jsx("input", { type: "checkbox", checked: selectedStoryIds.has(story.id), onChange: () => toggleStorySelection(story.id), onClick: (e) => e.stopPropagation(), style: {
+                                                    width: '14px',
+                                                    height: '14px',
+                                                    cursor: 'pointer',
+                                                    accentColor: '#3b82f6',
+                                                    marginTop: '2px',
+                                                    flexShrink: 0,
+                                                } }), _jsxs("div", { style: { flex: 1, minWidth: 0 }, children: [_jsx("div", { style: STYLES.chatItemTitle, children: story.title }), _jsx("div", { style: { ...STYLES.chatItemTime, fontSize: '11px' }, children: story.fileName })] }), _jsx("button", { className: "delete-orphan-btn", onClick: async (e) => {
                                                     e.stopPropagation();
                                                     try {
                                                         const response = await fetch(`${STORIES_API}/${story.id}`, {
@@ -2030,6 +2197,11 @@ function StoryUIPanel() {
                                                         });
                                                         if (response.ok) {
                                                             setOrphanStories(prev => prev.filter(s => s.id !== story.id));
+                                                            setSelectedStoryIds(prev => {
+                                                                const newSet = new Set(prev);
+                                                                newSet.delete(story.id);
+                                                                return newSet;
+                                                            });
                                                         }
                                                         else {
                                                             console.error('Failed to delete orphan story');

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tpitre/story-ui",
-  "version": "3.8.0",
+  "version": "3.9.0",
   "description": "AI-powered Storybook story generator with dynamic component discovery",
   "type": "module",
   "main": "dist/index.js",

package/templates/StoryUI/StoryUIPanel.tsx

@@ -1656,6 +1656,8 @@ function StoryUIPanel() {
   const [attachedImages, setAttachedImages] = useState<AttachedImage[]>([]);
   const [considerations, setConsiderations] = useState<string>('');
   const [orphanStories, setOrphanStories] = useState<OrphanStory[]>([]);
+  const [selectedStoryIds, setSelectedStoryIds] = useState<Set<string>>(new Set());
+  const [isBulkDeleting, setIsBulkDeleting] = useState(false);
   const chatEndRef = useRef<HTMLDivElement | null>(null);
   const inputRef = useRef<HTMLInputElement | null>(null);
   const fileInputRef = useRef<HTMLInputElement | null>(null);
@@ -2462,6 +2464,92 @@ function StoryUIPanel() {
     }
   };
 
+  // Toggle story selection for bulk operations
+  const toggleStorySelection = (storyId: string) => {
+    setSelectedStoryIds(prev => {
+      const newSet = new Set(prev);
+      if (newSet.has(storyId)) {
+        newSet.delete(storyId);
+      } else {
+        newSet.add(storyId);
+      }
+      return newSet;
+    });
+  };
+
+  // Select/deselect all stories
+  const toggleSelectAll = () => {
+    if (selectedStoryIds.size === orphanStories.length) {
+      setSelectedStoryIds(new Set());
+    } else {
+      setSelectedStoryIds(new Set(orphanStories.map(s => s.id)));
+    }
+  };
+
+  // Bulk delete selected stories
+  const handleBulkDelete = async () => {
+    if (selectedStoryIds.size === 0) return;
+
+    const count = selectedStoryIds.size;
+    if (!confirm(`Delete ${count} selected ${count === 1 ? 'story' : 'stories'}? This action cannot be undone.`)) {
+      return;
+    }
+
+    setIsBulkDeleting(true);
+    try {
+      const response = await fetch(`${STORIES_API}/delete-bulk`, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ ids: Array.from(selectedStoryIds) }),
+      });
+
+      if (response.ok) {
+        const result = await response.json();
+        // Remove deleted stories from state
+        setOrphanStories(prev => prev.filter(s => !selectedStoryIds.has(s.id)));
+        setSelectedStoryIds(new Set());
+        console.log(`Deleted ${result.deleted?.length || count} stories`);
+      } else {
+        alert('Failed to delete some stories. Please try again.');
+      }
+    } catch (err) {
+      console.error('Error bulk deleting stories:', err);
+      alert('Failed to delete stories. Please try again.');
+    } finally {
+      setIsBulkDeleting(false);
+    }
+  };
+
+  // Clear all generated stories
+  const handleClearAll = async () => {
+    if (orphanStories.length === 0) return;
+
+    if (!confirm(`Delete ALL ${orphanStories.length} generated stories? This action cannot be undone.`)) {
+      return;
+    }
+
+    setIsBulkDeleting(true);
+    try {
+      const response = await fetch(STORIES_API, {
+        method: 'DELETE',
+      });
+
+      if (response.ok) {
+        const result = await response.json();
+        setOrphanStories([]);
+        setSelectedStoryIds(new Set());
+        console.log(`Cleared ${result.deleted || 'all'} stories`);
+      } else {
+        alert('Failed to clear stories. Please try again.');
+      }
+    } catch (err) {
+      console.error('Error clearing stories:', err);
+      alert('Failed to clear stories. Please try again.');
+    } finally {
+      setIsBulkDeleting(false);
+    }
+  };
+
   return (
     <div className="story-ui-panel" style={STYLES.container}>
       {/* Sidebar */}
@@ -2558,40 +2646,173 @@ function StoryUIPanel() {
             {/* Generated Files Section - orphan stories without chat history */}
             {orphanStories.length > 0 && (
               <>
+                {/* Header with Select All and Count */}
                 <div style={{
-                  color: '#64748b',
-                  fontSize: '12px',
+                  display: 'flex',
+                  alignItems: 'center',
+                  justifyContent: 'space-between',
                   marginTop: '16px',
                   marginBottom: '8px',
-                  fontWeight: '500',
-                  textTransform: 'uppercase',
-                  letterSpacing: '0.05em',
                 }}>
-                  Generated Files
+                  <div style={{
+                    display: 'flex',
+                    alignItems: 'center',
+                    gap: '8px',
+                  }}>
+                    <input
+                      type="checkbox"
+                      checked={selectedStoryIds.size === orphanStories.length && orphanStories.length > 0}
+                      onChange={toggleSelectAll}
+                      style={{
+                        width: '14px',
+                        height: '14px',
+                        cursor: 'pointer',
+                        accentColor: '#3b82f6',
+                      }}
+                      title={selectedStoryIds.size === orphanStories.length ? 'Deselect all' : 'Select all'}
+                    />
+                    <span style={{
+                      color: '#64748b',
+                      fontSize: '12px',
+                      fontWeight: '500',
+                      textTransform: 'uppercase',
+                      letterSpacing: '0.05em',
+                    }}>
+                      Generated Files ({orphanStories.length})
+                    </span>
+                  </div>
+                </div>
+
+                {/* Bulk Action Buttons */}
+                {selectedStoryIds.size > 0 && (
+                  <div style={{
+                    display: 'flex',
+                    gap: '8px',
+                    marginBottom: '12px',
+                  }}>
+                    <button
+                      onClick={handleBulkDelete}
+                      disabled={isBulkDeleting}
+                      style={{
+                        flex: 1,
+                        padding: '6px 10px',
+                        fontSize: '11px',
+                        fontWeight: '500',
+                        background: 'rgba(239, 68, 68, 0.15)',
+                        color: '#f87171',
+                        border: '1px solid rgba(239, 68, 68, 0.3)',
+                        borderRadius: '6px',
+                        cursor: isBulkDeleting ? 'not-allowed' : 'pointer',
+                        opacity: isBulkDeleting ? 0.6 : 1,
+                        transition: 'all 0.15s ease',
+                      }}
+                      onMouseEnter={(e) => {
+                        if (!isBulkDeleting) {
+                          e.currentTarget.style.background = 'rgba(239, 68, 68, 0.25)';
+                        }
+                      }}
+                      onMouseLeave={(e) => {
+                        e.currentTarget.style.background = 'rgba(239, 68, 68, 0.15)';
+                      }}
+                    >
+                      {isBulkDeleting ? 'Deleting...' : `Delete Selected (${selectedStoryIds.size})`}
+                    </button>
+                  </div>
+                )}
+
+                {/* Clear All Button (always visible) */}
+                <div style={{
+                  display: 'flex',
+                  gap: '8px',
+                  marginBottom: '12px',
+                }}>
+                  <button
+                    onClick={handleClearAll}
+                    disabled={isBulkDeleting || orphanStories.length === 0}
+                    style={{
+                      flex: 1,
+                      padding: '6px 10px',
+                      fontSize: '11px',
+                      fontWeight: '500',
+                      background: 'rgba(100, 116, 139, 0.15)',
+                      color: '#94a3b8',
+                      border: '1px solid rgba(100, 116, 139, 0.3)',
+                      borderRadius: '6px',
+                      cursor: (isBulkDeleting || orphanStories.length === 0) ? 'not-allowed' : 'pointer',
+                      opacity: (isBulkDeleting || orphanStories.length === 0) ? 0.6 : 1,
+                      transition: 'all 0.15s ease',
+                    }}
+                    onMouseEnter={(e) => {
+                      if (!isBulkDeleting && orphanStories.length > 0) {
+                        e.currentTarget.style.background = 'rgba(239, 68, 68, 0.15)';
+                        e.currentTarget.style.color = '#f87171';
+                        e.currentTarget.style.borderColor = 'rgba(239, 68, 68, 0.3)';
+                      }
+                    }}
+                    onMouseLeave={(e) => {
+                      e.currentTarget.style.background = 'rgba(100, 116, 139, 0.15)';
+                      e.currentTarget.style.color = '#94a3b8';
+                      e.currentTarget.style.borderColor = 'rgba(100, 116, 139, 0.3)';
+                    }}
+                  >
+                    Clear All Stories
+                  </button>
                 </div>
+
+                {/* Story List */}
                 {orphanStories.map(story => (
                   <div
                     key={story.id}
                     style={{
                       ...STYLES.chatItem,
-                      background: 'rgba(251, 191, 36, 0.1)',
-                      borderLeft: '3px solid rgba(251, 191, 36, 0.5)',
+                      background: selectedStoryIds.has(story.id)
+                        ? 'rgba(59, 130, 246, 0.15)'
+                        : 'rgba(251, 191, 36, 0.1)',
+                      borderLeft: selectedStoryIds.has(story.id)
+                        ? '3px solid rgba(59, 130, 246, 0.5)'
+                        : '3px solid rgba(251, 191, 36, 0.5)',
+                      display: 'flex',
+                      alignItems: 'flex-start',
+                      gap: '8px',
                     }}
                     onMouseEnter={(e) => {
-                      e.currentTarget.style.background = 'rgba(251, 191, 36, 0.15)';
+                      if (!selectedStoryIds.has(story.id)) {
+                        e.currentTarget.style.background = 'rgba(251, 191, 36, 0.15)';
+                      }
                       const deleteBtn = e.currentTarget.querySelector('.delete-orphan-btn') as HTMLElement;
                       if (deleteBtn) deleteBtn.style.opacity = '1';
                     }}
                     onMouseLeave={(e) => {
-                      e.currentTarget.style.background = 'rgba(251, 191, 36, 0.1)';
+                      if (!selectedStoryIds.has(story.id)) {
+                        e.currentTarget.style.background = 'rgba(251, 191, 36, 0.1)';
+                      }
                       const deleteBtn = e.currentTarget.querySelector('.delete-orphan-btn') as HTMLElement;
                       if (deleteBtn) deleteBtn.style.opacity = '0';
                     }}
                   >
-                    <div style={STYLES.chatItemTitle}>{story.title}</div>
-                    <div style={{ ...STYLES.chatItemTime, fontSize: '11px' }}>
-                      {story.fileName}
+                    {/* Checkbox */}
+                    <input
+                      type="checkbox"
+                      checked={selectedStoryIds.has(story.id)}
+                      onChange={() => toggleStorySelection(story.id)}
+                      onClick={(e) => e.stopPropagation()}
+                      style={{
+                        width: '14px',
+                        height: '14px',
+                        cursor: 'pointer',
+                        accentColor: '#3b82f6',
+                        marginTop: '2px',
+                        flexShrink: 0,
+                      }}
+                    />
+                    {/* Story Info */}
+                    <div style={{ flex: 1, minWidth: 0 }}>
+                      <div style={STYLES.chatItemTitle}>{story.title}</div>
+                      <div style={{ ...STYLES.chatItemTime, fontSize: '11px' }}>
+                        {story.fileName}
+                      </div>
                     </div>
+                    {/* Delete Button */}
                     <button
                       className="delete-orphan-btn"
                       onClick={async (e) => {
@@ -2602,6 +2823,11 @@ function StoryUIPanel() {
                           });
                           if (response.ok) {
                             setOrphanStories(prev => prev.filter(s => s.id !== story.id));
+                            setSelectedStoryIds(prev => {
+                              const newSet = new Set(prev);
+                              newSet.delete(story.id);
+                              return newSet;
+                            });
                           } else {
                             console.error('Failed to delete orphan story');
                           }