fix: security and ux improvements from llm audit

- replace eval() with require() in configLoader for security
- add esm compatibility with createRequire(import.meta.url)
- fix docker healthcheck to use shell form for runtime port
- replace fixed sleep with health check loop in start-live.sh
- add isFallback visual indicator in StoryUIPanel
- update CLAUDE.md version to 3.10.8
- remove self-referential devDependency

Author: tpitre

CLAUDE.md

@@ -1,7 +1,7 @@
 # Story UI - AI Assistant Project Guide
 
-> **Last Updated**: December 4, 2025
-> **Current Version**: 3.6.2
+> **Last Updated**: December 14, 2025
+> **Current Version**: 3.10.8
 > **Production URL**: https://app-production-16de.up.railway.app (Vue/Vuetify example)
 > **Repository**: https://github.com/southleft/story-ui
 

Dockerfile

@@ -52,8 +52,9 @@ RUN chmod +x ./start-live.sh
 EXPOSE ${PORT:-4001}
 
 # Health check - verify MCP server is responding
-HEALTHCHECK --interval=30s --timeout=10s --start-period=30s --retries=3 \
-  CMD wget --no-verbose --tries=1 --spider http://localhost:${PORT:-4001}/story-ui/providers || exit 1
+# Use shell form for runtime $PORT expansion (Railway sets PORT dynamically)
+HEALTHCHECK --interval=30s --timeout=10s --start-period=60s --retries=3 \
+  CMD /bin/sh -c 'wget --no-verbose --tries=1 --spider http://localhost:${PORT:-4001}/story-ui/providers || exit 1'
 
 # Start both servers
 CMD ["./start-live.sh"]

package.json

@@ -96,7 +96,6 @@
     "@semantic-release/github": "^10.3.5",
     "@semantic-release/npm": "^12.0.1",
     "@semantic-release/release-notes-generator": "^14.0.1",
-    "@tpitre/story-ui": "^3.6.2",
     "@types/cors": "^2.8.17",
     "@types/express": "^4.17.21",
     "@types/glob": "^8.1.0",

start-live.sh

@@ -17,18 +17,38 @@ cd "$STORYBOOK_DIR"
 npm run storybook -- --port "$STORYBOOK_PORT" --host 0.0.0.0 --ci --no-open &
 STORYBOOK_PID=$!
 
-# Wait for Storybook to initialize
+# Wait for Storybook to be ready (up to 60 seconds)
 echo "⏳ Waiting for Storybook to start..."
-sleep 10
+MAX_WAIT=60
+WAIT_INTERVAL=2
+ELAPSED=0
 
-# Verify Storybook is running
-if ! kill -0 $STORYBOOK_PID 2>/dev/null; then
-    echo "❌ Storybook failed to start"
+while [ $ELAPSED -lt $MAX_WAIT ]; do
+    # Check if process is still running
+    if ! kill -0 $STORYBOOK_PID 2>/dev/null; then
+        echo "❌ Storybook process exited unexpectedly"
+        exit 1
+    fi
+
+    # Check if Storybook is responding to HTTP requests
+    if wget -q --spider http://localhost:${STORYBOOK_PORT}/ 2>/dev/null; then
+        echo "✅ Storybook dev server is ready on port ${STORYBOOK_PORT}"
+        break
+    fi
+
+    # Wait and retry
+    sleep $WAIT_INTERVAL
+    ELAPSED=$((ELAPSED + WAIT_INTERVAL))
+    echo "   Still waiting... (${ELAPSED}s/${MAX_WAIT}s)"
+done
+
+# Final check - if we exhausted the wait time
+if [ $ELAPSED -ge $MAX_WAIT ]; then
+    echo "❌ Storybook failed to start within ${MAX_WAIT} seconds"
+    kill $STORYBOOK_PID 2>/dev/null
     exit 1
 fi
 
-echo "✅ Storybook dev server running on port ${STORYBOOK_PORT}"
-
 # Start MCP server with Storybook proxy enabled
 echo "🤖 Starting MCP server on port ${MCP_PORT}..."
 cd /app

story-generator/configLoader.ts

@@ -1,7 +1,11 @@
 import fs from 'fs';
 import path from 'path';
+import { createRequire } from 'module';
 import { StoryUIConfig, DEFAULT_CONFIG, createStoryUIConfig } from '../story-ui.config.js';
 
+// Create require function for ESM compatibility
+const require = createRequire(import.meta.url);
+
 // Config cache to prevent excessive loading
 let cachedConfig: StoryUIConfig | null = null;
 let configLoadTime: number = 0;
@@ -37,47 +41,64 @@ export function loadUserConfig(): StoryUIConfig {
         } else {
           console.log(`Loading Story UI config from: ${configPath}`);
         }
-        // Read and evaluate the config file
-        const configContent = fs.readFileSync(configPath, 'utf-8');
-
-        // 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(evalContent);
-
-          const userConfig = module.exports as any;
-          const config = createStoryUIConfig(userConfig.default || userConfig);
-
-          // Detect Storybook framework if not already specified
-          if (!config.storybookFramework) {
-            const packageJsonPath = path.join(process.cwd(), 'package.json');
-            if (fs.existsSync(packageJsonPath)) {
-              try {
-                const packageJson = JSON.parse(fs.readFileSync(packageJsonPath, 'utf-8'));
-                const dependencies = { ...packageJson.dependencies, ...packageJson.devDependencies };
-                config.storybookFramework = detectStorybookFramework(dependencies);
-              } catch (error) {
-                console.warn('Failed to detect Storybook framework:', error);
-              }
+        // Use require() for safe config loading (no eval)
+        // Clear require cache to ensure fresh config on reload
+        const resolvedPath = path.resolve(configPath);
+        delete require.cache[resolvedPath];
+
+        let userConfig: any;
+        try {
+          // eslint-disable-next-line @typescript-eslint/no-var-requires
+          const loadedModule = require(resolvedPath);
+          userConfig = loadedModule.default || loadedModule;
+        } catch (requireError) {
+          // If require() fails (e.g., ESM project with CJS config), fall back to parsing
+          // This handles "type": "module" projects with module.exports configs
+          const configContent = fs.readFileSync(configPath, 'utf-8');
+
+          // Try to extract the config object from CommonJS module.exports
+          // Match module.exports = { ... } with potential trailing semicolons and whitespace
+          const match = configContent.match(/module\.exports\s*=\s*(\{[\s\S]*\})\s*;*/);
+          if (match) {
+            try {
+              // Clean the config object: remove JS comments for JSON.parse compatibility
+              let configObj = match[1]
+                .replace(/\/\/[^\n]*/g, '') // Remove single-line comments
+                .replace(/,(\s*[}\]])/g, '$1'); // Remove trailing commas
+
+              // Use Function constructor (safer than eval, runs in isolated scope)
+              const configFn = new Function(`return ${configObj}`);
+              userConfig = configFn();
+            } catch (parseError) {
+              console.warn(`Failed to parse config from ${configPath}:`, parseError);
+              throw requireError; // Re-throw original error
+            }
+          } else {
+            throw requireError; // Re-throw if we can't parse it
+          }
+        }
+        const config = createStoryUIConfig(userConfig);
+
+        // Detect Storybook framework if not already specified
+        if (!config.storybookFramework) {
+          const packageJsonPath = path.join(process.cwd(), 'package.json');
+          if (fs.existsSync(packageJsonPath)) {
+            try {
+              const packageJson = JSON.parse(fs.readFileSync(packageJsonPath, 'utf-8'));
+              const dependencies = { ...packageJson.dependencies, ...packageJson.devDependencies };
+              config.storybookFramework = detectStorybookFramework(dependencies);
+            } catch (error) {
+              console.warn('Failed to detect Storybook framework:', error);
             }
           }
+        }
 
-          // Cache the loaded config
-          cachedConfig = config;
-          configLoadTime = now;
+        // Cache the loaded config
+        cachedConfig = config;
+        configLoadTime = now;
 
-          return config;
-        }
+        return config;
       } catch (error) {
         console.warn(`Failed to load config from ${configPath}:`, error);
       }

templates/StoryUI/StoryUIPanel.css

@@ -1195,6 +1195,35 @@
   color: hsl(var(--muted-foreground));
 }
 
+/* Fallback story styling (error placeholder was created) */
+.sui-completion-fallback .sui-completion-header {
+  color: hsl(var(--warning, 38 92% 50%));
+}
+
+.sui-completion-fallback-warning {
+  margin-top: var(--space-2);
+  padding: var(--space-2) var(--space-3);
+  background: hsl(var(--warning, 38 92% 50%) / 0.15);
+  border-radius: var(--radius-md);
+  font-size: 0.8125rem;
+}
+
+.sui-completion-fallback-warning strong {
+  display: block;
+  color: hsl(var(--warning, 38 92% 50%));
+  margin-bottom: var(--space-1);
+}
+
+.sui-completion-fallback-warning p {
+  margin: 0;
+  color: hsl(var(--muted-foreground));
+}
+
+/* Error completion styling (generation failed completely) */
+.sui-completion-error .sui-completion-header {
+  color: hsl(var(--destructive));
+}
+
 /* ============================================
    Checkbox
    ============================================ */

templates/StoryUI/StoryUIPanel.tsx

@@ -80,6 +80,7 @@ interface StyleChoice {
 
 interface CompletionFeedback {
   success: boolean;
+  isFallback?: boolean; // True when a fallback error placeholder was created
   storyId?: string;
   fileName?: string;
   title?: string;
@@ -704,12 +705,23 @@ const ProgressIndicator: React.FC<ProgressIndicatorProps> = ({ streamingState })
     );
   }
   if (completion) {
+    // Determine status icon and class based on success and fallback state
+    const isFallback = completion.isFallback === true;
+    const statusIcon = completion.success ? '\u2705' : (isFallback ? '\u26A0\uFE0F' : '\u274C');
+    const statusClass = completion.success ? '' : (isFallback ? 'sui-completion-fallback' : 'sui-completion-error');
+
     return (
-      <div className="sui-completion">
+      <div className={`sui-completion ${statusClass}`}>
         <div className="sui-completion-header">
-          <span>{completion.success ? '\u2705' : '\u274C'}</span>
+          <span>{statusIcon}</span>
           <span>{completion.summary.action}: {completion.title}</span>
         </div>
+        {isFallback && (
+          <div className="sui-completion-fallback-warning">
+            <strong>Error Placeholder Created</strong>
+            <p>Generation failed after retries. A placeholder story was saved that you may want to delete or regenerate.</p>
+          </div>
+        )}
         {completion.componentsUsed.length > 0 && (
           <div className="sui-completion-components">
             {completion.componentsUsed.map((comp, i) => (
@@ -1073,10 +1085,16 @@ function StoryUIPanel({ mcpPort }: StoryUIPanelProps) {
   // Build response message
   const buildConversationalResponse = (completion: CompletionFeedback, isUpdate: boolean): string => {
     const parts: string[] = [];
-    const statusMarker = completion.success ? '[SUCCESS]' : '[ERROR]';
+    const isFallback = completion.isFallback === true;
+    const statusMarker = completion.success ? '[SUCCESS]' : (isFallback ? '[WARNING]' : '[ERROR]');
     // Show "Failed:" when success is false, otherwise "Created:" or "Updated:"
-    const actionWord = completion.success ? (isUpdate ? 'Updated' : 'Created') : 'Failed';
+    const actionWord = completion.success ? (isUpdate ? 'Updated' : 'Created') : (isFallback ? 'Placeholder' : 'Failed');
     parts.push(`${statusMarker} **${actionWord}: "${completion.title}"**`);
+
+    // Add fallback-specific warning
+    if (isFallback) {
+      parts.push(`\n\n⚠️ **Generation failed** - An error placeholder was saved. You may want to delete this story and try again with a simpler request.`);
+    }
     const componentCount = completion.componentsUsed?.length || 0;
     if (componentCount > 0) {
       const names = completion.componentsUsed.slice(0, 5).map(c => `\`${c.name}\``).join(', ');