@tpitre/story-ui 3.5.0 → 3.6.0

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

@@ -1 +1 @@
-{"version":3,"file":"generateStoryStream.d.ts","sourceRoot":"","sources":["../../../mcp-server/routes/generateStoryStream.ts"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AAEH,OAAO,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,SAAS,CAAC;AAma5C,wBAAsB,6BAA6B,CAAC,GAAG,EAAE,OAAO,EAAE,GAAG,EAAE,QAAQ,iBAob9E"}
+{"version":3,"file":"generateStoryStream.d.ts","sourceRoot":"","sources":["../../../mcp-server/routes/generateStoryStream.ts"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AAEH,OAAO,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,SAAS,CAAC;AAwa5C,wBAAsB,6BAA6B,CAAC,GAAG,EAAE,OAAO,EAAE,GAAG,EAAE,QAAQ,iBAob9E"}

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

@@ -74,6 +74,11 @@ class StreamWriter {
                 llmCallsCount: this.llmCalls
             }
         };
+        console.log('[Story UI Server DEBUG] sendCompletion called:', {
+            hasCode: !!fullCompletion.code,
+            codeLength: fullCompletion.code?.length,
+            title: fullCompletion.title
+        });
         this.send(createStreamEvent('completion', fullCompletion));
     }
     // Send error

package/dist/templates/StoryUI/StoryUIPanel.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"StoryUIPanel.d.ts","sourceRoot":"","sources":["../../../templates/StoryUI/StoryUIPanel.tsx"],"names":[],"mappings":"AAkTA,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,MAAM;QACd,2BAA2B,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;KACtD;CACF;AA6oCD,iBAAS,YAAY,4CAmtCpB;AAED,eAAe,YAAY,CAAC;AAC5B,OAAO,EAAE,YAAY,EAAE,CAAC"}
+{"version":3,"file":"StoryUIPanel.d.ts","sourceRoot":"","sources":["../../../templates/StoryUI/StoryUIPanel.tsx"],"names":[],"mappings":"AAkTA,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,MAAM;QACd,2BAA2B,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;KACtD;CACF;AAooCD,iBAAS,YAAY,4CAkvCpB;AAED,eAAe,YAAY,CAAC;AAC5B,OAAO,EAAE,YAAY,EAAE,CAAC"}

package/dist/templates/StoryUI/StoryUIPanel.js

@@ -132,15 +132,32 @@ const titleToStoryPath = (title) => {
     return `generated-${kebabTitle}--default`;
 };
 // Helper to store generated code for the Source Code panel to display
-const storeGeneratedCode = (title, code) => {
-    const storyPath = titleToStoryPath(title);
+const storeGeneratedCode = (storyId, code, title) => {
     const topWindow = window.top || window;
     // Store code in the top window so it's accessible from manager frame
     if (!topWindow.__STORY_UI_GENERATED_CODE__) {
         topWindow.__STORY_UI_GENERATED_CODE__ = {};
     }
-    topWindow.__STORY_UI_GENERATED_CODE__[storyPath] = code;
-    console.log(`[Story UI] Stored code for story "${storyPath}" in window cache`);
+    // Store with story ID
+    topWindow.__STORY_UI_GENERATED_CODE__[storyId] = code;
+    // Also store in localStorage for persistence across page reloads
+    try {
+        const stored = JSON.parse(localStorage.getItem('storyui_generated_code') || '{}');
+        stored[storyId] = code;
+        // Also store with the title as key for easier lookup
+        if (title) {
+            const storyPath = titleToStoryPath(title);
+            stored[storyPath] = code;
+            stored[title] = code;
+            stored[title.replace(/\s+/g, '')] = code;
+            topWindow.__STORY_UI_GENERATED_CODE__[storyPath] = code;
+        }
+        localStorage.setItem('storyui_generated_code', JSON.stringify(stored));
+        console.log(`[Story UI] Stored code for story "${storyId}" in window cache and localStorage`);
+    }
+    catch (e) {
+        console.warn('[Story UI] Failed to store code in localStorage:', e);
+    }
 };
 // Helper to navigate to a newly created story after generation completes
 // In dev mode with HMR, this prevents the "Couldn't find story after HMR" error
@@ -150,7 +167,7 @@ const navigateToNewStory = (title, code, delayMs = 1500) => {
     console.log(`[Story UI] Will navigate to story "${storyPath}" in ${delayMs}ms...`);
     // Store the code for the Source Code panel if provided
     if (code) {
-        storeGeneratedCode(title, code);
+        storeGeneratedCode(title, code, title);
     }
     setTimeout(() => {
         // Navigate the TOP window (parent Storybook UI), not the iframe
@@ -1033,11 +1050,11 @@ const StreamingProgressMessage = ({ streamingData }) => {
     if (error) {
         return (_jsx("div", { style: STYLES.streamingContainer, children: _jsxs("div", { style: { ...STYLES.validationBox, ...STYLES.validationError }, children: [_jsxs("strong", { children: ["\u274C ", error.message] }), error.details && _jsx("div", { style: { marginTop: '4px' }, children: error.details }), error.suggestion && _jsxs("div", { style: { marginTop: '8px' }, children: ["\uD83D\uDCA1 ", error.suggestion] })] }) }));
     }
-    // Show progress
-    return (_jsxs("div", { style: STYLES.streamingContainer, children: [intent && (_jsxs("div", { style: STYLES.intentPreview, children: [_jsxs("div", { style: STYLES.intentTitle, children: [intent.requestType === 'modification' ? '✏️' : '✨', intent.requestType === 'modification' ? ' Modifying Story' : ' Creating New Story'] }), _jsx("div", { style: STYLES.intentStrategy, children: intent.strategy }), intent.detectedDesignSystem && (_jsxs("div", { style: { fontSize: '12px', color: '#6b7280' }, children: ["Design system: ", _jsx("strong", { children: intent.detectedDesignSystem })] })), intent.estimatedComponents.length > 0 && (_jsx("div", { style: STYLES.intentComponents, children: intent.estimatedComponents.map((comp, i) => (_jsx("span", { style: STYLES.componentTag, children: comp }, i))) }))] })), progress && (_jsxs(_Fragment, { children: [_jsx("div", { style: STYLES.progressBar, children: _jsx("div", { style: {
+    // Show progress - simplified to just show status without verbose details
+    return (_jsxs("div", { style: STYLES.streamingContainer, children: [_jsxs("div", { style: STYLES.intentPreview, children: [_jsxs("div", { style: STYLES.progressPhase, children: [_jsx("span", { style: STYLES.phaseIcon, children: "\uD83E\uDD16" }), _jsx("span", { children: "AI is generating your story..." }), progress && (_jsxs("span", { style: { marginLeft: 'auto', color: '#9ca3af' }, children: [progress.step, "/", progress.totalSteps] }))] }), progress && (_jsx("div", { style: { ...STYLES.progressBar, marginTop: '8px' }, children: _jsx("div", { style: {
                                 ...STYLES.progressFill,
                                 width: `${(progress.step / progress.totalSteps) * 100}%`
-                            } }) }), _jsxs("div", { style: STYLES.progressPhase, children: [_jsx("span", { style: STYLES.phaseIcon, children: getPhaseInfo(progress.phase).icon }), _jsx("span", { children: progress.message || getPhaseInfo(progress.phase).text }), _jsxs("span", { style: { marginLeft: 'auto', color: '#9ca3af' }, children: [progress.step, "/", progress.totalSteps] })] })] })), retry && (_jsxs("div", { style: STYLES.retryBadge, children: ["\uD83D\uDD04 Retry ", retry.attempt, "/", retry.maxAttempts, ": ", retry.reason] })), validation && !validation.isValid && (_jsxs("div", { style: { ...STYLES.validationBox, ...STYLES.validationWarning }, children: [validation.autoFixApplied ? '🔧 Auto-fixing issues...' : '⚠️ Validation issues found', validation.errors.slice(0, 2).map((err, i) => (_jsxs("div", { style: { marginTop: '4px', fontSize: '11px' }, children: ["\u2022 ", err] }, i)))] })), !progress && !intent && (_jsx("div", { style: STYLES.progressPhase, children: _jsx("span", { className: "loading-dots", children: "Connecting" }) }))] }));
+                            } }) }))] }), retry && (_jsxs("div", { style: STYLES.retryBadge, children: ["\uD83D\uDD04 Retry ", retry.attempt, "/", retry.maxAttempts, ": ", retry.reason] })), !progress && !intent && (_jsx("div", { style: STYLES.progressPhase, children: _jsx("span", { className: "loading-dots", children: "Connecting" }) }))] }));
 };
 // Main component
 function StoryUIPanel() {
@@ -1443,6 +1460,10 @@ function StoryUIPanel() {
             }
             saveChats(chats);
             setRecentChats(chats);
+            // Store code for Source Code panel
+            if (completion.code) {
+                storeGeneratedCode(activeChatId, completion.code, activeTitle || completion.title);
+            }
         }
         else {
             const chatId = completion.storyId || completion.fileName || Date.now().toString();
@@ -1467,6 +1488,10 @@ function StoryUIPanel() {
             // This prevents the "Couldn't find story after HMR" error by refreshing
             // after the file system has been updated and HMR has processed the change
             navigateToNewStory(chatTitle, completion.code);
+            // Store code for Source Code panel
+            if (completion.code) {
+                storeGeneratedCode(chatId, completion.code, chatTitle);
+            }
         }
     }, [activeChatId, activeTitle, conversation.length]);
     const handleSend = async (e) => {
@@ -1639,6 +1664,10 @@ function StoryUIPanel() {
                             chats[chatIndex] = updatedSession;
                         saveChats(chats);
                         setRecentChats(chats);
+                        // Store code for Source Code panel
+                        if (data.code) {
+                            storeGeneratedCode(activeChatId, data.code, activeTitle || data.title);
+                        }
                     }
                     else {
                         const chatId = data.storyId || data.fileName || Date.now().toString();
@@ -1660,6 +1689,10 @@ function StoryUIPanel() {
                         setRecentChats(chats);
                         // Auto-navigate to the newly created story
                         navigateToNewStory(chatTitle, data.code);
+                        // Store code for Source Code panel
+                        if (data.code) {
+                            storeGeneratedCode(chatId, data.code, chatTitle);
+                        }
                     }
                 }
                 catch (fallbackErr) {
@@ -1706,14 +1739,19 @@ function StoryUIPanel() {
                         chats[chatIndex] = updatedSession;
                     saveChats(chats);
                     setRecentChats(chats);
+                    // Store code for Source Code panel
+                    if (data.code) {
+                        storeGeneratedCode(activeChatId, data.code, activeTitle || data.title);
+                    }
                 }
                 else {
                     const chatId = data.storyId || data.fileName || Date.now().toString();
+                    const chatTitle = data.title || userInput;
                     setActiveChatId(chatId);
-                    setActiveTitle(data.title || userInput);
+                    setActiveTitle(chatTitle);
                     const newSession = {
                         id: chatId,
-                        title: data.title || userInput,
+                        title: chatTitle,
                         fileName: data.fileName || '',
                         conversation: updatedConversation,
                         lastUpdated: Date.now(),
@@ -1724,6 +1762,10 @@ function StoryUIPanel() {
                         chats.splice(MAX_RECENT_CHATS);
                     saveChats(chats);
                     setRecentChats(chats);
+                    // Store code for Source Code panel
+                    if (data.code) {
+                        storeGeneratedCode(chatId, data.code, chatTitle);
+                    }
                 }
             }
             catch (err) {

package/package.json

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

package/templates/StoryUI/StoryUIPanel.tsx

@@ -311,16 +311,36 @@ declare global {
 }
 
 // Helper to store generated code for the Source Code panel to display
-const storeGeneratedCode = (title: string, code: string) => {
-  const storyPath = titleToStoryPath(title);
+const storeGeneratedCode = (storyId: string, code: string, title?: string) => {
   const topWindow = window.top || window;
 
   // Store code in the top window so it's accessible from manager frame
   if (!topWindow.__STORY_UI_GENERATED_CODE__) {
     topWindow.__STORY_UI_GENERATED_CODE__ = {};
   }
-  topWindow.__STORY_UI_GENERATED_CODE__[storyPath] = code;
-  console.log(`[Story UI] Stored code for story "${storyPath}" in window cache`);
+
+  // Store with story ID
+  topWindow.__STORY_UI_GENERATED_CODE__[storyId] = code;
+
+  // Also store in localStorage for persistence across page reloads
+  try {
+    const stored = JSON.parse(localStorage.getItem('storyui_generated_code') || '{}');
+    stored[storyId] = code;
+
+    // Also store with the title as key for easier lookup
+    if (title) {
+      const storyPath = titleToStoryPath(title);
+      stored[storyPath] = code;
+      stored[title] = code;
+      stored[title.replace(/\s+/g, '')] = code;
+      topWindow.__STORY_UI_GENERATED_CODE__[storyPath] = code;
+    }
+
+    localStorage.setItem('storyui_generated_code', JSON.stringify(stored));
+    console.log(`[Story UI] Stored code for story "${storyId}" in window cache and localStorage`);
+  } catch (e) {
+    console.warn('[Story UI] Failed to store code in localStorage:', e);
+  }
 };
 
 // Helper to navigate to a newly created story after generation completes
@@ -332,7 +352,7 @@ const navigateToNewStory = (title: string, code?: string, delayMs: number = 1500
 
   // Store the code for the Source Code panel if provided
   if (code) {
-    storeGeneratedCode(title, code);
+    storeGeneratedCode(title, code, title);
   }
 
   setTimeout(() => {
@@ -1398,36 +1418,24 @@ const StreamingProgressMessage: React.FC<{ streamingData: StreamingState }> = ({
     );
   }
 
-  // Show progress
+  // Show progress - simplified to just show status without verbose details
   return (
     <div style={STYLES.streamingContainer}>
-      {/* Intent Preview */}
-      {intent && (
-        <div style={STYLES.intentPreview}>
-          <div style={STYLES.intentTitle}>
-            {intent.requestType === 'modification' ? '✏️' : '✨'}
-            {intent.requestType === 'modification' ? ' Modifying Story' : ' Creating New Story'}
-          </div>
-          <div style={STYLES.intentStrategy}>{intent.strategy}</div>
-          {intent.detectedDesignSystem && (
-            <div style={{ fontSize: '12px', color: '#6b7280' }}>
-              Design system: <strong>{intent.detectedDesignSystem}</strong>
-            </div>
-          )}
-          {intent.estimatedComponents.length > 0 && (
-            <div style={STYLES.intentComponents}>
-              {intent.estimatedComponents.map((comp, i) => (
-                <span key={i} style={STYLES.componentTag}>{comp}</span>
-              ))}
-            </div>
+      {/* Simple progress indicator */}
+      <div style={STYLES.intentPreview}>
+        <div style={STYLES.progressPhase}>
+          <span style={STYLES.phaseIcon}>🤖</span>
+          <span>AI is generating your story...</span>
+          {progress && (
+            <span style={{ marginLeft: 'auto', color: '#9ca3af' }}>
+              {progress.step}/{progress.totalSteps}
+            </span>
           )}
         </div>
-      )}
 
-      {/* Progress Bar */}
-      {progress && (
-        <>
-          <div style={STYLES.progressBar}>
+        {/* Progress Bar */}
+        {progress && (
+          <div style={{ ...STYLES.progressBar, marginTop: '8px' }}>
             <div
               style={{
                 ...STYLES.progressFill,
@@ -1435,33 +1443,16 @@ const StreamingProgressMessage: React.FC<{ streamingData: StreamingState }> = ({
               }}
             />
           </div>
-          <div style={STYLES.progressPhase}>
-            <span style={STYLES.phaseIcon}>{getPhaseInfo(progress.phase).icon}</span>
-            <span>{progress.message || getPhaseInfo(progress.phase).text}</span>
-            <span style={{ marginLeft: 'auto', color: '#9ca3af' }}>
-              {progress.step}/{progress.totalSteps}
-            </span>
-          </div>
-        </>
-      )}
+        )}
+      </div>
 
-      {/* Retry Badge */}
+      {/* Retry Badge - only show if retrying */}
       {retry && (
         <div style={STYLES.retryBadge}>
           🔄 Retry {retry.attempt}/{retry.maxAttempts}: {retry.reason}
         </div>
       )}
 
-      {/* Validation Feedback */}
-      {validation && !validation.isValid && (
-        <div style={{ ...STYLES.validationBox, ...STYLES.validationWarning }}>
-          {validation.autoFixApplied ? '🔧 Auto-fixing issues...' : '⚠️ Validation issues found'}
-          {validation.errors.slice(0, 2).map((err, i) => (
-            <div key={i} style={{ marginTop: '4px', fontSize: '11px' }}>• {err}</div>
-          ))}
-        </div>
-      )}
-
       {/* Loading indicator when no specific phase */}
       {!progress && !intent && (
         <div style={STYLES.progressPhase}>
@@ -1942,6 +1933,11 @@ function StoryUIPanel() {
       }
       saveChats(chats);
       setRecentChats(chats);
+
+      // Store code for Source Code panel
+      if (completion.code) {
+        storeGeneratedCode(activeChatId, completion.code, activeTitle || completion.title);
+      }
     } else {
       const chatId = completion.storyId || completion.fileName || Date.now().toString();
       const chatTitle = completion.title || userInput;
@@ -1968,6 +1964,11 @@ function StoryUIPanel() {
       // This prevents the "Couldn't find story after HMR" error by refreshing
       // after the file system has been updated and HMR has processed the change
       navigateToNewStory(chatTitle, completion.code);
+
+      // Store code for Source Code panel
+      if (completion.code) {
+        storeGeneratedCode(chatId, completion.code, chatTitle);
+      }
     }
   }, [activeChatId, activeTitle, conversation.length]);
 
@@ -2158,6 +2159,11 @@ function StoryUIPanel() {
             if (chatIndex !== -1) chats[chatIndex] = updatedSession;
             saveChats(chats);
             setRecentChats(chats);
+
+            // Store code for Source Code panel
+            if (data.code) {
+              storeGeneratedCode(activeChatId, data.code, activeTitle || data.title);
+            }
           } else {
             const chatId = data.storyId || data.fileName || Date.now().toString();
             const chatTitle = data.title || userInput;
@@ -2178,6 +2184,11 @@ function StoryUIPanel() {
 
             // Auto-navigate to the newly created story
             navigateToNewStory(chatTitle, data.code);
+
+            // Store code for Source Code panel
+            if (data.code) {
+              storeGeneratedCode(chatId, data.code, chatTitle);
+            }
           }
         } catch (fallbackErr: unknown) {
           const errorMessage = fallbackErr instanceof Error ? fallbackErr.message : 'Unknown error';
@@ -2223,13 +2234,19 @@ function StoryUIPanel() {
           if (chatIndex !== -1) chats[chatIndex] = updatedSession;
           saveChats(chats);
           setRecentChats(chats);
+
+          // Store code for Source Code panel
+          if (data.code) {
+            storeGeneratedCode(activeChatId, data.code, activeTitle || data.title);
+          }
         } else {
           const chatId = data.storyId || data.fileName || Date.now().toString();
+          const chatTitle = data.title || userInput;
           setActiveChatId(chatId);
-          setActiveTitle(data.title || userInput);
+          setActiveTitle(chatTitle);
           const newSession: ChatSession = {
             id: chatId,
-            title: data.title || userInput,
+            title: chatTitle,
             fileName: data.fileName || '',
             conversation: updatedConversation,
             lastUpdated: Date.now(),
@@ -2239,6 +2256,11 @@ function StoryUIPanel() {
           if (chats.length > MAX_RECENT_CHATS) chats.splice(MAX_RECENT_CHATS);
           saveChats(chats);
           setRecentChats(chats);
+
+          // Store code for Source Code panel
+          if (data.code) {
+            storeGeneratedCode(chatId, data.code, chatTitle);
+          }
         }
       } catch (err: unknown) {
         const errorMessage = err instanceof Error ? err.message : 'Unknown error';

package/templates/StoryUI/manager.tsx

@@ -20,6 +20,29 @@ const EVENTS = {
   STORY_SELECTED: `${ADDON_ID}/story-selected`,
 };
 
+/**
+ * Get the API base URL for story operations.
+ * Works in both local development and production (Railway).
+ */
+const getApiBaseUrl = (): string => {
+  if (typeof window === 'undefined') return 'http://localhost:4001';
+
+  // Check for Railway production domain - use same-origin requests
+  const hostname = window.location.hostname;
+  if (hostname.includes('.railway.app')) {
+    return '';
+  }
+
+  // Check for window overrides (local development)
+  const windowOverride = (window as any).__STORY_UI_PORT__;
+  if (windowOverride) return `http://localhost:${windowOverride}`;
+
+  const mcpOverride = (window as any).STORY_UI_MCP_PORT;
+  if (mcpOverride) return `http://localhost:${mcpOverride}`;
+
+  return 'http://localhost:4001';
+};
+
 // Extend Window to include generated stories cache
 declare global {
   interface Window {
@@ -39,6 +62,47 @@ declare global {
  *   <Button>Click</Button>
  */
 const extractUsageCode = (fullStoryCode: string, variantName?: string): string => {
+  // Helper function to convert object-style props to JSX attribute syntax
+  // e.g., "color: 'blue', variant: 'filled'" -> 'color="blue" variant="filled"'
+  const convertToJsxAttributes = (propsStr: string): string => {
+    if (!propsStr.trim()) return '';
+
+    const attributes: string[] = [];
+    // Match key: value pairs, handling strings, booleans, numbers, and expressions
+    // Pattern: key: 'value' or key: "value" or key: true/false or key: 123 or key: expression
+    const propRegex = /(\w+)\s*:\s*(?:'([^']*)'|"([^"]*)"|(\btrue\b|\bfalse\b)|(\d+(?:\.\d+)?)|(\{[^}]+\})|([^,}\s]+))/g;
+
+    let match;
+    while ((match = propRegex.exec(propsStr)) !== null) {
+      const key = match[1];
+      const stringValueSingle = match[2]; // 'value'
+      const stringValueDouble = match[3]; // "value"
+      const boolValue = match[4]; // true/false
+      const numValue = match[5]; // 123 or 1.5
+      const objValue = match[6]; // {expression}
+      const otherValue = match[7]; // other expressions
+
+      if (stringValueSingle !== undefined) {
+        attributes.push(`${key}="${stringValueSingle}"`);
+      } else if (stringValueDouble !== undefined) {
+        attributes.push(`${key}="${stringValueDouble}"`);
+      } else if (boolValue !== undefined) {
+        if (boolValue === 'true') {
+          attributes.push(key); // Just the prop name for true (e.g., fullWidth)
+        }
+        // Skip false values - they're the default and don't need to be shown
+      } else if (numValue !== undefined) {
+        attributes.push(`${key}={${numValue}}`);
+      } else if (objValue !== undefined) {
+        attributes.push(`${key}=${objValue}`);
+      } else if (otherValue !== undefined) {
+        attributes.push(`${key}={${otherValue}}`);
+      }
+    }
+
+    return attributes.join(' ');
+  };
+
   // Helper function to generate JSX from args
   const generateJsxFromArgs = (argsStr: string, componentName: string): string | null => {
     try {
@@ -46,19 +110,22 @@ const extractUsageCode = (fullStoryCode: string, variantName?: string): string =
       const childrenMatch = argsStr.match(/children:\s*['"`]([^'"`]+)['"`]/);
       const children = childrenMatch ? childrenMatch[1] : '';
 
-      // Extract other props (simplified)
+      // Extract other props (remove children first)
       const propsStr = argsStr
         .replace(/children:\s*['"`][^'"`]*['"`],?/, '') // Remove children
         .replace(/^\{|\}$/g, '') // Remove braces
         .trim();
 
+      // Convert to JSX attribute syntax
+      const jsxAttributes = convertToJsxAttributes(propsStr);
+
       if (children) {
-        if (propsStr) {
-          return `<${componentName} ${propsStr.replace(/,\s*$/, '')}>${children}</${componentName}>`;
+        if (jsxAttributes) {
+          return `<${componentName} ${jsxAttributes}>${children}</${componentName}>`;
         }
         return `<${componentName}>${children}</${componentName}>`;
-      } else if (propsStr) {
-        return `<${componentName} ${propsStr.replace(/,\s*$/, '')} />`;
+      } else if (jsxAttributes) {
+        return `<${componentName} ${jsxAttributes} />`;
       }
       return `<${componentName} />`;
     } catch {
@@ -350,6 +417,26 @@ const styles = {
     color: '#888',
     marginTop: '4px',
   },
+  deleteButton: {
+    background: 'transparent',
+    color: '#C75050',
+    border: '1px solid #C75050',
+    borderRadius: '4px',
+    padding: '4px 10px',
+    fontSize: '11px',
+    cursor: 'pointer',
+    fontWeight: 500,
+  },
+  deleteButtonHover: {
+    background: '#C75050',
+    color: 'white',
+  },
+  deleteButtonDeleting: {
+    background: '#555',
+    color: '#888',
+    border: '1px solid #555',
+    cursor: 'not-allowed',
+  },
 };
 
 /**
@@ -362,6 +449,8 @@ const SourceCodePanel: React.FC<{ active?: boolean }> = ({ active }) => {
   const [storyTitle, setStoryTitle] = useState<string>('');
   const [copied, setCopied] = useState(false);
   const [showFullCode, setShowFullCode] = useState(false);
+  const [isDeleting, setIsDeleting] = useState(false);
+  const [deleteHover, setDeleteHover] = useState(false);
 
   // Get the current story ID
   const currentStoryId = state?.storyId;
@@ -391,6 +480,88 @@ const SourceCodePanel: React.FC<{ active?: boolean }> = ({ active }) => {
     return sourceCode && usageCode && usageCode !== sourceCode;
   }, [sourceCode, usageCode]);
 
+  // Check if this is a generated story (for showing delete button)
+  const isGeneratedStory = useMemo(() => {
+    return currentStoryId?.includes('generated') || false;
+  }, [currentStoryId]);
+
+  // Extract story file ID from the Storybook story ID
+  // e.g., "generated-simple-test-button--primary" -> "SimpleTestButton"
+  const getStoryFileId = useCallback((storyId: string): string => {
+    // Remove "generated-" prefix and variant suffix
+    const match = storyId.match(/^generated[-\/]?(.+?)(?:--.*)?$/i);
+    if (match) {
+      // Convert kebab-case to PascalCase: "simple-test-button" -> "SimpleTestButton"
+      const words = match[1].split('-');
+      return words.map(w => w.charAt(0).toUpperCase() + w.slice(1).toLowerCase()).join('');
+    }
+    return storyId;
+  }, []);
+
+  // Handle delete story
+  const handleDelete = useCallback(async () => {
+    if (!currentStoryId || !isGeneratedStory || isDeleting) return;
+
+    const confirmed = window.confirm('Delete this generated story? This cannot be undone.');
+    if (!confirmed) return;
+
+    setIsDeleting(true);
+
+    try {
+      const apiBase = getApiBaseUrl();
+      const storyFileId = getStoryFileId(currentStoryId);
+
+      console.log('[Source Code Panel] Deleting story:', { currentStoryId, storyFileId, apiBase });
+
+      // Try the RESTful DELETE endpoint first
+      const response = await fetch(`${apiBase}/story-ui/stories/${storyFileId}`, {
+        method: 'DELETE',
+        headers: { 'Content-Type': 'application/json' },
+      });
+
+      if (response.ok) {
+        console.log('[Source Code Panel] Story deleted successfully');
+
+        // Clear local cache
+        const topWindow = window.top || window;
+        if (topWindow.__STORY_UI_GENERATED_CODE__) {
+          delete topWindow.__STORY_UI_GENERATED_CODE__[currentStoryId];
+        }
+        if (window.__STORY_UI_GENERATED_CODE__) {
+          delete window.__STORY_UI_GENERATED_CODE__[currentStoryId];
+        }
+
+        // Clear localStorage cache
+        try {
+          const stored = JSON.parse(localStorage.getItem('storyui_generated_code') || '{}');
+          delete stored[storyFileId];
+          delete stored[currentStoryId];
+          localStorage.setItem('storyui_generated_code', JSON.stringify(stored));
+        } catch (e) {
+          console.warn('[Source Code Panel] Failed to clear localStorage:', e);
+        }
+
+        // Clear the source code display
+        setSourceCode('');
+
+        // Navigate to a different story (Story UI Generator default)
+        api.selectStory('story-ui-story-generator--default');
+
+        // Trigger Storybook refresh to update sidebar
+        window.location.reload();
+      } else {
+        const errorData = await response.json().catch(() => ({}));
+        console.error('[Source Code Panel] Delete failed:', errorData);
+        alert(`Failed to delete story: ${errorData.error || 'Unknown error'}`);
+      }
+    } catch (error) {
+      console.error('[Source Code Panel] Delete error:', error);
+      alert('Failed to delete story. Check console for details.');
+    } finally {
+      setIsDeleting(false);
+    }
+  }, [currentStoryId, isGeneratedStory, isDeleting, api, getStoryFileId]);
+
   // Try to get source code from the story
   useEffect(() => {
     if (!currentStoryId || !active) return;
@@ -624,15 +795,33 @@ const SourceCodePanel: React.FC<{ active?: boolean }> = ({ active }) => {
             </button>
           )}
         </div>
-        <button
-          style={{
-            ...styles.copyButton,
-            background: copied ? '#16825D' : '#0E639C',
-          }}
-          onClick={handleCopy}
-        >
-          {copied ? 'Copied!' : 'Copy'}
-        </button>
+        <div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
+          <button
+            style={{
+              ...styles.copyButton,
+              background: copied ? '#16825D' : '#0E639C',
+            }}
+            onClick={handleCopy}
+          >
+            {copied ? 'Copied!' : 'Copy'}
+          </button>
+          {isGeneratedStory && (
+            <button
+              style={{
+                ...styles.deleteButton,
+                ...(isDeleting ? styles.deleteButtonDeleting : {}),
+                ...(deleteHover && !isDeleting ? styles.deleteButtonHover : {}),
+              }}
+              onClick={handleDelete}
+              onMouseEnter={() => setDeleteHover(true)}
+              onMouseLeave={() => setDeleteHover(false)}
+              disabled={isDeleting}
+              title="Delete this generated story"
+            >
+              {isDeleting ? 'Deleting...' : 'Delete'}
+            </button>
+          )}
+        </div>
       </div>
       <div style={styles.codeContainer}>
         <SyntaxHighlighter code={displayCode} />