@tpitre/story-ui 4.1.2 → 4.3.0

package/README.md

@@ -10,7 +10,7 @@ Story UI revolutionizes component documentation by automatically generating Stor
 ## Why Story UI?
 
 - **Framework Agnostic**: Works with React, Vue, Angular, Svelte, and Web Components
-- **Multi-Provider AI**: Choose between Claude (Anthropic), GPT-5 (OpenAI), or Gemini (Google)
+- **Multi-Provider AI**: Choose between Claude (Anthropic), GPT-4o (OpenAI), or Gemini (Google)
 - **Design System Aware**: Learns your component library and generates appropriate code
 - **Production Ready**: Deploy as a standalone web app with full MCP integration
 - **Zero Lock-in**: Use any component library - Mantine, Vuetify, Angular Material, Shoelace, or your own
@@ -47,6 +47,12 @@ Story UI will guide you through:
 - **TypeScript Support**: Full type-aware story generation
 - **Vision Support**: Attach screenshots for visual component requests
 
+### Story Management
+- **Edit Existing Stories**: Modify any generated story through conversation
+- **Delete Stories**: Remove stories directly from the Story UI panel
+- **Orphan Detection**: Find and clean up stories without associated chat history
+- **Full MCP Integration**: Manage stories via Claude Desktop or any MCP-compatible client
+
 ### Multi-Framework Support
 
 | Framework | Design Systems | Status |
@@ -54,16 +60,16 @@ Story UI will guide you through:
 | React | Mantine, Chakra UI, Material UI, Custom | Fully Supported |
 | Vue | Vuetify, Custom | Fully Supported |
 | Angular | Angular Material, Custom | Fully Supported |
-| Svelte | Skeleton UI, Custom | Fully Supported |
+| Svelte | Flowbite-Svelte, Custom | Fully Supported |
 | Web Components | Shoelace, Custom | Fully Supported |
 
 ### Multi-Provider LLM Support
 
 | Provider | Models | Best For |
 |----------|--------|----------|
-| **Claude** (Anthropic) | Opus 4.5, Sonnet 4.5, Haiku 4.5 | Complex reasoning, code quality |
-| **GPT** (OpenAI) | GPT-5.1, GPT-5.1 Thinking, GPT-4o, GPT-4o Mini | Versatility, speed |
-| **Gemini** (Google) | Gemini 3 Pro, Gemini 2.0 Flash, Gemini 1.5 Pro | Fast generation, cost efficiency |
+| **Claude** (Anthropic) | claude-opus-4-5, claude-sonnet-4-5, claude-haiku-4-5 | Complex reasoning, code quality |
+| **GPT** (OpenAI) | gpt-4o, gpt-4o-mini, o1 | Versatility, speed |
+| **Gemini** (Google) | gemini-2.0-flash, gemini-1.5-pro | Fast generation, cost efficiency |
 
 ### Production Deployment
 - **Railway**: Node.js backend with file-based story persistence
@@ -115,7 +121,7 @@ The interactive installer will ask:
    ```
    ? Which AI provider do you prefer?
      > Claude (Anthropic) - Recommended
-       OpenAI (GPT-5)
+       OpenAI (GPT-4o)
        Google Gemini
 
    ? Enter your API key:
@@ -319,7 +325,7 @@ Once connected, you can use these commands in Claude Desktop:
 
 ## Production Deployment
 
-Story UI v3 can be deployed as a standalone web application accessible from anywhere.
+Story UI can be deployed as a standalone web application accessible from anywhere.
 
 ### Architecture
 
@@ -461,7 +467,7 @@ npx story-ui mcp
 
 ## Upgrading from v2
 
-Story UI v3 is backwards compatible with v2 configurations. However, to take advantage of new features:
+Story UI v4 is backwards compatible with previous configurations. However, to take advantage of new features:
 
 1. **Multi-Provider Support**: Add `llmProvider` to your config
 2. **Framework Detection**: Add `framework` to your config for non-React projects

package/dist/mcp-server/index.js

@@ -78,6 +78,176 @@ app.get('/mcp/frameworks/detect', detectCurrentFramework);
 app.get('/mcp/frameworks/:type', getFrameworkDetails);
 app.post('/mcp/frameworks/validate', validateStoryForFramework);
 app.post('/mcp/frameworks/post-process', postProcessStoryForFramework);
+// MCP story management routes - for Claude Desktop and other MCP clients
+// List all stories
+app.get('/mcp/stories', async (req, res) => {
+    try {
+        const storiesPath = config.generatedStoriesPath;
+        if (!fs.existsSync(storiesPath)) {
+            return res.json({ stories: [] });
+        }
+        const files = fs.readdirSync(storiesPath);
+        const stories = files
+            .filter(file => file.endsWith('.stories.tsx') || file.endsWith('.stories.ts') || file.endsWith('.stories.svelte'))
+            .map(file => {
+            const filePath = path.join(storiesPath, file);
+            const stats = fs.statSync(filePath);
+            const content = fs.readFileSync(filePath, 'utf-8');
+            // Extract title from story file
+            const titleMatch = content.match(/title:\s*['"]([^'"]+)['"]/);
+            let title = titleMatch ? titleMatch[1].replace('Generated/', '') : file.replace(/\.stories\.(tsx|ts|svelte)$/, '');
+            // Remove hash suffix from display title
+            title = title.replace(/\s*\([a-f0-9]{8}\)$/i, '');
+            return {
+                id: file.replace(/\.stories\.(tsx|ts|svelte)$/, ''),
+                storyId: file.replace(/\.stories\.(tsx|ts|svelte)$/, ''),
+                fileName: file,
+                title,
+                lastUpdated: stats.mtime.getTime(),
+                createdAt: stats.birthtime.getTime(),
+                content
+            };
+        })
+            .sort((a, b) => b.lastUpdated - a.lastUpdated);
+        return res.json({ stories });
+    }
+    catch (error) {
+        console.error('Error listing stories:', error);
+        return res.status(500).json({ error: 'Failed to list stories' });
+    }
+});
+// Get a specific story by ID
+app.get('/mcp/stories/:storyId', async (req, res) => {
+    try {
+        const { storyId } = req.params;
+        const storiesPath = config.generatedStoriesPath;
+        if (!fs.existsSync(storiesPath)) {
+            return res.status(404).json({ error: 'Stories directory not found' });
+        }
+        const files = fs.readdirSync(storiesPath);
+        // Extract hash from story ID if in legacy format (story-a1b2c3d4)
+        const hashMatch = storyId.match(/^story-([a-f0-9]{8})$/);
+        const hash = hashMatch ? hashMatch[1] : null;
+        // Find matching file
+        const matchingFile = files.find(file => {
+            // Match by hash suffix
+            if (hash && file.includes(`-${hash}.stories.`))
+                return true;
+            // Match by exact ID
+            if (file.startsWith(`${storyId}.stories.`))
+                return true;
+            // Match by fileName
+            if (file === storyId)
+                return true;
+            // Match by ID without extension
+            if (file.replace(/\.stories\.(tsx|ts|svelte)$/, '') === storyId)
+                return true;
+            return false;
+        });
+        if (!matchingFile) {
+            return res.status(404).json({ error: `Story with ID ${storyId} not found` });
+        }
+        const filePath = path.join(storiesPath, matchingFile);
+        const stats = fs.statSync(filePath);
+        const content = fs.readFileSync(filePath, 'utf-8');
+        // Extract title from story file
+        const titleMatch = content.match(/title:\s*['"]([^'"]+)['"]/);
+        let title = titleMatch ? titleMatch[1].replace('Generated/', '') : matchingFile.replace(/\.stories\.(tsx|ts|svelte)$/, '');
+        title = title.replace(/\s*\([a-f0-9]{8}\)$/i, '');
+        return res.json({
+            id: matchingFile.replace(/\.stories\.(tsx|ts|svelte)$/, ''),
+            storyId: matchingFile.replace(/\.stories\.(tsx|ts|svelte)$/, ''),
+            fileName: matchingFile,
+            title,
+            lastUpdated: stats.mtime.getTime(),
+            createdAt: stats.birthtime.getTime(),
+            timestamp: stats.mtime.getTime(),
+            content,
+            story: content
+        });
+    }
+    catch (error) {
+        console.error('Error getting story:', error);
+        return res.status(500).json({ error: 'Failed to get story' });
+    }
+});
+// Get story content (raw code)
+app.get('/mcp/stories/:storyId/content', async (req, res) => {
+    try {
+        const { storyId } = req.params;
+        const storiesPath = config.generatedStoriesPath;
+        if (!fs.existsSync(storiesPath)) {
+            return res.status(404).send('Stories directory not found');
+        }
+        const files = fs.readdirSync(storiesPath);
+        // Extract hash from story ID if in legacy format
+        const hashMatch = storyId.match(/^story-([a-f0-9]{8})$/);
+        const hash = hashMatch ? hashMatch[1] : null;
+        // Find matching file
+        const matchingFile = files.find(file => {
+            if (hash && file.includes(`-${hash}.stories.`))
+                return true;
+            if (file.startsWith(`${storyId}.stories.`))
+                return true;
+            if (file === storyId)
+                return true;
+            if (file.replace(/\.stories\.(tsx|ts|svelte)$/, '') === storyId)
+                return true;
+            return false;
+        });
+        if (!matchingFile) {
+            return res.status(404).send(`Story with ID ${storyId} not found`);
+        }
+        const filePath = path.join(storiesPath, matchingFile);
+        const content = fs.readFileSync(filePath, 'utf-8');
+        res.type('text/plain').send(content);
+    }
+    catch (error) {
+        console.error('Error getting story content:', error);
+        return res.status(500).send('Failed to get story content');
+    }
+});
+// Delete a story by ID
+app.delete('/mcp/stories/:storyId', async (req, res) => {
+    try {
+        const { storyId } = req.params;
+        const storiesPath = config.generatedStoriesPath;
+        if (!fs.existsSync(storiesPath)) {
+            return res.status(404).json({ error: 'Stories directory not found' });
+        }
+        const files = fs.readdirSync(storiesPath);
+        // Extract hash from story ID if in legacy format
+        const hashMatch = storyId.match(/^story-([a-f0-9]{8})$/);
+        const hash = hashMatch ? hashMatch[1] : null;
+        // Find matching file
+        const matchingFile = files.find(file => {
+            if (hash && file.includes(`-${hash}.stories.`))
+                return true;
+            if (file.startsWith(`${storyId}.stories.`))
+                return true;
+            if (file === storyId)
+                return true;
+            if (file.replace(/\.stories\.(tsx|ts|svelte)$/, '') === storyId)
+                return true;
+            return false;
+        });
+        if (!matchingFile) {
+            return res.status(404).json({ error: `Story with ID ${storyId} not found` });
+        }
+        const filePath = path.join(storiesPath, matchingFile);
+        fs.unlinkSync(filePath);
+        console.log(`🗑️ Deleted story via MCP endpoint: ${matchingFile}`);
+        return res.json({
+            success: true,
+            deleted: matchingFile,
+            message: `Story "${matchingFile}" has been deleted successfully.`
+        });
+    }
+    catch (error) {
+        console.error('Error deleting story:', error);
+        return res.status(500).json({ error: 'Failed to delete story' });
+    }
+});
 // File-based story routes - stories are generated as .stories.tsx files
 // Storybook discovers these automatically via its native file system watching
 // Proxy routes for frontend compatibility (maps /story-ui/ to /mcp/)
@@ -399,6 +569,125 @@ app.delete('/story-ui/stories', async (req, res) => {
         return res.status(500).json({ error: 'Failed to clear stories' });
     }
 });
+// Orphan stories management - find and delete stories without associated chats
+// POST to get list of orphans, DELETE to remove them
+app.post('/story-ui/orphan-stories', async (req, res) => {
+    try {
+        const { chatFileNames } = req.body;
+        if (!chatFileNames || !Array.isArray(chatFileNames)) {
+            return res.status(400).json({ error: 'chatFileNames array is required' });
+        }
+        const storiesPath = config.generatedStoriesPath;
+        if (!fs.existsSync(storiesPath)) {
+            return res.json({ orphans: [], count: 0 });
+        }
+        const files = fs.readdirSync(storiesPath);
+        const storyFiles = files.filter(file => file.endsWith('.stories.tsx') ||
+            file.endsWith('.stories.ts') ||
+            file.endsWith('.stories.svelte'));
+        // Find orphans: stories that don't match any chat fileName
+        const orphans = storyFiles.filter(storyFile => {
+            // Extract the base name without extension for comparison
+            const storyBase = storyFile
+                .replace('.stories.tsx', '')
+                .replace('.stories.ts', '')
+                .replace('.stories.svelte', '');
+            // Check if any chat fileName matches this story
+            return !chatFileNames.some(chatFileName => {
+                if (!chatFileName)
+                    return false;
+                const chatBase = chatFileName
+                    .replace('.stories.tsx', '')
+                    .replace('.stories.ts', '')
+                    .replace('.stories.svelte', '');
+                return storyBase === chatBase || storyFile === chatFileName;
+            });
+        });
+        // Get details for each orphan
+        const orphanDetails = orphans.map(fileName => {
+            const filePath = path.join(storiesPath, fileName);
+            const content = fs.readFileSync(filePath, 'utf-8');
+            const stats = fs.statSync(filePath);
+            // Extract title from story file
+            const titleMatch = content.match(/title:\s*['"]([^'"]+)['"]/);
+            let title = titleMatch ? titleMatch[1].replace('Generated/', '') : fileName.replace(/\.stories\.[a-z]+$/, '');
+            // Remove hash suffix from display title
+            title = title.replace(/\s*\([a-f0-9]{8}\)$/i, '');
+            return {
+                fileName,
+                title,
+                lastUpdated: stats.mtime.getTime()
+            };
+        });
+        console.log(`📋 Found ${orphans.length} orphan stories out of ${storyFiles.length} total`);
+        return res.json({
+            orphans: orphanDetails,
+            count: orphans.length,
+            totalStories: storyFiles.length
+        });
+    }
+    catch (error) {
+        console.error('Error finding orphan stories:', error);
+        return res.status(500).json({ error: 'Failed to find orphan stories' });
+    }
+});
+app.delete('/story-ui/orphan-stories', async (req, res) => {
+    try {
+        const { chatFileNames } = req.body;
+        if (!chatFileNames || !Array.isArray(chatFileNames)) {
+            return res.status(400).json({ error: 'chatFileNames array is required' });
+        }
+        const storiesPath = config.generatedStoriesPath;
+        if (!fs.existsSync(storiesPath)) {
+            return res.json({ deleted: [], count: 0 });
+        }
+        const files = fs.readdirSync(storiesPath);
+        const storyFiles = files.filter(file => file.endsWith('.stories.tsx') ||
+            file.endsWith('.stories.ts') ||
+            file.endsWith('.stories.svelte'));
+        // Find orphans: stories that don't match any chat fileName
+        const orphans = storyFiles.filter(storyFile => {
+            const storyBase = storyFile
+                .replace('.stories.tsx', '')
+                .replace('.stories.ts', '')
+                .replace('.stories.svelte', '');
+            return !chatFileNames.some(chatFileName => {
+                if (!chatFileName)
+                    return false;
+                const chatBase = chatFileName
+                    .replace('.stories.tsx', '')
+                    .replace('.stories.ts', '')
+                    .replace('.stories.svelte', '');
+                return storyBase === chatBase || storyFile === chatFileName;
+            });
+        });
+        // Delete orphans
+        const deleted = [];
+        const errors = [];
+        for (const fileName of orphans) {
+            try {
+                const filePath = path.join(storiesPath, fileName);
+                fs.unlinkSync(filePath);
+                deleted.push(fileName);
+                console.log(`🗑️ Deleted orphan story: ${fileName}`);
+            }
+            catch (err) {
+                errors.push(fileName);
+                console.error(`❌ Error deleting orphan ${fileName}:`, err);
+            }
+        }
+        console.log(`✅ Deleted ${deleted.length} orphan stories`);
+        return res.json({
+            deleted,
+            count: deleted.length,
+            errors: errors.length > 0 ? errors : undefined
+        });
+    }
+    catch (error) {
+        console.error('Error deleting orphan stories:', error);
+        return res.status(500).json({ error: 'Failed to delete orphan stories' });
+    }
+});
 // MCP Remote HTTP transport routes (for Claude Desktop remote connections)
 // Provides Streamable HTTP and legacy SSE endpoints for remote MCP access
 app.use('/mcp-remote', mcpRemoteRouter);

package/dist/mcp-server/mcp-stdio-server.js

@@ -27,7 +27,8 @@ dotenv.config({ path: path.resolve(process.cwd(), '.env') });
 process.env.STORY_UI_MCP_MODE = 'true';
 // Get HTTP server port from environment variables (check multiple possible names)
 const HTTP_PORT = process.env.VITE_STORY_UI_PORT || process.env.STORY_UI_HTTP_PORT || process.env.PORT || '4001';
-const HTTP_BASE_URL = `http://localhost:${HTTP_PORT}`;
+// Allow configurable base URL for Railway/cloud deployments, fallback to localhost for local dev
+const HTTP_BASE_URL = process.env.STORY_UI_HTTP_BASE_URL || `http://localhost:${HTTP_PORT}`;
 // Initialize configuration
 const config = loadUserConfig();
 // Create MCP server instance
@@ -181,8 +182,6 @@ server.setRequestHandler(CallToolRequestSchema, async (request) => {
                     throw new Error(`Failed to generate story: ${error}`);
                 }
                 const result = await response.json();
-                // Debug log to see what we're getting
-                console.error('Story generation result:', JSON.stringify(result, null, 2));
                 return {
                     content: [{
                             type: "text",
@@ -509,8 +508,6 @@ server.setRequestHandler(CallToolRequestSchema, async (request) => {
                         throw new Error(`Failed to update story: ${error}`);
                     }
                     const result = await response.json();
-                    // Debug log to see what we're getting
-                    console.error('Story update result:', JSON.stringify(result, null, 2));
                     return {
                         content: [{
                                 type: "text",

package/dist/story-generator/framework-adapters/index.js

@@ -150,7 +150,7 @@ class AdapterRegistry {
         return {
             systemPrompt: adapter.generateSystemPrompt(config, options),
             componentReference: adapter.generateComponentReference(components, config),
-            layoutInstructions: '', // TODO: Implement layout instructions
+            layoutInstructions: '',
             examples: adapter.generateExamples(config),
             sampleStory: adapter.generateSampleStory(config, components),
             framework: this.detectedFramework || {

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

@@ -1 +1 @@
-{"version":3,"file":"StoryUIPanel.d.ts","sourceRoot":"","sources":["../../../templates/StoryUI/StoryUIPanel.tsx"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAGH,OAAO,oBAAoB,CAAC;AAuwB5B,UAAU,iBAAiB;IACzB,OAAO,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;CAC3B;AAED,iBAAS,YAAY,CAAC,EAAE,OAAO,EAAE,EAAE,iBAAiB,2CAsiCnD;AAED,eAAe,YAAY,CAAC;AAC5B,OAAO,EAAE,YAAY,EAAE,CAAC"}
+{"version":3,"file":"StoryUIPanel.d.ts","sourceRoot":"","sources":["../../../templates/StoryUI/StoryUIPanel.tsx"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAGH,OAAO,oBAAoB,CAAC;AAwwB5B,UAAU,iBAAiB;IACzB,OAAO,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;CAC3B;AAED,iBAAS,YAAY,CAAC,EAAE,OAAO,EAAE,EAAE,iBAAiB,2CAwnCnD;AAED,eAAe,YAAY,CAAC;AAC5B,OAAO,EAAE,YAAY,EAAE,CAAC"}

package/dist/templates/StoryUI/StoryUIPanel.js

@@ -151,6 +151,7 @@ const MCP_API = `${API_BASE}/mcp/generate-story`;
 const MCP_STREAM_API = `${API_BASE}/mcp/generate-story-stream`;
 const PROVIDERS_API = `${API_BASE}/mcp/providers`;
 const STORIES_API = `${API_BASE}/story-ui/stories`;
+const ORPHAN_STORIES_API = `${API_BASE}/story-ui/orphan-stories`;
 const CONSIDERATIONS_API = `${API_BASE}/mcp/considerations`;
 function isEdgeMode() {
     if (typeof window !== 'undefined') {
@@ -444,6 +445,8 @@ function StoryUIPanel({ mcpPort }) {
     const [contextMenuId, setContextMenuId] = useState(null);
     const [renamingChatId, setRenamingChatId] = useState(null);
     const [renameValue, setRenameValue] = useState('');
+    const [orphanCount, setOrphanCount] = useState(0);
+    const [isDeletingOrphans, setIsDeletingOrphans] = useState(false);
     const chatEndRef = useRef(null);
     const inputRef = useRef(null);
     const fileInputRef = useRef(null);
@@ -1144,6 +1147,65 @@ function StoryUIPanel({ mcpPort }) {
             }
         }
     };
+    // Check for orphan stories (stories without associated chats)
+    const checkOrphanStories = useCallback(async () => {
+        if (!state.connectionStatus.connected)
+            return;
+        try {
+            const chatFileNames = state.recentChats.map(chat => chat.fileName);
+            const response = await fetch(ORPHAN_STORIES_API, {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({ chatFileNames }),
+            });
+            if (response.ok) {
+                const data = await response.json();
+                setOrphanCount(data.count || 0);
+            }
+        }
+        catch (error) {
+            console.error('Failed to check orphan stories:', error);
+        }
+    }, [state.connectionStatus.connected, state.recentChats]);
+    // Delete all orphan stories
+    const handleDeleteOrphans = async () => {
+        if (orphanCount === 0)
+            return;
+        if (!confirm(`Delete ${orphanCount} orphan ${orphanCount === 1 ? 'story' : 'stories'}? These are generated story files without associated chats.`)) {
+            return;
+        }
+        setIsDeletingOrphans(true);
+        try {
+            const chatFileNames = state.recentChats.map(chat => chat.fileName);
+            const response = await fetch(ORPHAN_STORIES_API, {
+                method: 'DELETE',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({ chatFileNames }),
+            });
+            if (response.ok) {
+                const data = await response.json();
+                setOrphanCount(0);
+                if (data.count > 0) {
+                    // Show success message briefly
+                    alert(`Deleted ${data.count} orphan ${data.count === 1 ? 'story' : 'stories'}.`);
+                }
+            }
+            else {
+                alert('Failed to delete orphan stories. Please try again.');
+            }
+        }
+        catch (error) {
+            console.error('Failed to delete orphan stories:', error);
+            alert('Failed to delete orphan stories. Please try again.');
+        }
+        finally {
+            setIsDeletingOrphans(false);
+        }
+    };
+    // Check for orphans when chats change or connection is established
+    useEffect(() => {
+        checkOrphanStories();
+    }, [checkOrphanStories]);
     const handleStartRename = (chatId, currentTitle, e) => {
         if (e)
             e.stopPropagation();
@@ -1255,7 +1317,7 @@ function StoryUIPanel({ mcpPort }) {
                                                         handleConfirmRename(chat.id);
                                                     if (e.key === 'Escape')
                                                         handleCancelRename();
-                                                }, onClick: e => e.stopPropagation(), autoFocus: true }), _jsx("button", { className: "sui-button sui-button-icon sui-button-sm", onClick: e => { e.stopPropagation(); handleConfirmRename(chat.id); }, "aria-label": "Save", children: Icons.check }), _jsx("button", { className: "sui-button sui-button-icon sui-button-sm", onClick: e => { e.stopPropagation(); handleCancelRename(); }, "aria-label": "Cancel", children: Icons.x })] })) : (_jsxs(_Fragment, { children: [_jsx("div", { className: "sui-chat-item-title", children: chat.title }), _jsxs("div", { className: "sui-chat-item-actions", children: [_jsx("button", { className: "sui-chat-item-menu sui-button sui-button-icon sui-button-sm", onClick: e => { e.stopPropagation(); setContextMenuId(contextMenuId === chat.id ? null : chat.id); }, "aria-label": "More options", children: Icons.moreVertical }), contextMenuId === chat.id && (_jsxs("div", { className: "sui-context-menu", children: [_jsxs("button", { className: "sui-context-menu-item", onClick: e => handleStartRename(chat.id, chat.title, e), children: [Icons.pencil, _jsx("span", { children: "Rename" })] }), _jsxs("button", { className: "sui-context-menu-item sui-context-menu-item-danger", onClick: e => handleDeleteChat(chat.id, e), children: [Icons.trash, _jsx("span", { children: "Delete" })] })] }))] })] })) }, chat.id))) })] })), !state.sidebarOpen && (_jsx("div", { style: { padding: '12px', display: 'flex', justifyContent: 'center' }, children: _jsx("button", { className: "sui-button sui-button-ghost sui-button-icon", onClick: () => dispatch({ type: 'SET_SIDEBAR', payload: true }), "aria-label": "Show sidebar", children: Icons.panelLeft }) }))] }), _jsxs("main", { className: "sui-main", onDragEnter: handleDragEnter, onDragLeave: handleDragLeave, onDragOver: handleDragOver, onDrop: handleDrop, children: [state.isDragging && (_jsx("div", { className: "sui-drop-overlay", children: _jsxs("div", { className: "sui-drop-overlay-text", children: [Icons.image, _jsx("span", { children: "Drop images here" })] }) })), _jsxs("header", { className: "sui-header", children: [_jsxs("div", { className: "sui-header-left", children: [_jsx("span", { className: "sui-header-title", children: "Story UI" }), _jsxs(Badge, { variant: state.connectionStatus.connected ? 'success' : 'destructive', children: [_jsx("span", { className: "sui-badge-dot" }), state.connectionStatus.connected ? getConnectionDisplayText() : 'Disconnected'] })] }), _jsx("div", { className: "sui-header-right", children: state.connectionStatus.connected && state.availableProviders.length > 0 && (_jsxs(_Fragment, { children: [_jsxs("div", { className: "sui-select", children: [_jsxs("div", { className: "sui-select-trigger", children: [_jsx("span", { children: state.availableProviders.find(p => p.type === state.selectedProvider)?.name || 'Provider' }), Icons.chevronDown] }), _jsx("select", { className: "sui-select-native", value: state.selectedProvider, onChange: e => {
+                                                }, onClick: e => e.stopPropagation(), autoFocus: true }), _jsx("button", { className: "sui-button sui-button-icon sui-button-sm", onClick: e => { e.stopPropagation(); handleConfirmRename(chat.id); }, "aria-label": "Save", children: Icons.check }), _jsx("button", { className: "sui-button sui-button-icon sui-button-sm", onClick: e => { e.stopPropagation(); handleCancelRename(); }, "aria-label": "Cancel", children: Icons.x })] })) : (_jsxs(_Fragment, { children: [_jsx("div", { className: "sui-chat-item-title", children: chat.title }), _jsxs("div", { className: "sui-chat-item-actions", children: [_jsx("button", { className: "sui-chat-item-menu sui-button sui-button-icon sui-button-sm", onClick: e => { e.stopPropagation(); setContextMenuId(contextMenuId === chat.id ? null : chat.id); }, "aria-label": "More options", children: Icons.moreVertical }), contextMenuId === chat.id && (_jsxs("div", { className: "sui-context-menu", children: [_jsxs("button", { className: "sui-context-menu-item", onClick: e => handleStartRename(chat.id, chat.title, e), children: [Icons.pencil, _jsx("span", { children: "Rename" })] }), _jsxs("button", { className: "sui-context-menu-item sui-context-menu-item-danger", onClick: e => handleDeleteChat(chat.id, e), children: [Icons.trash, _jsx("span", { children: "Delete" })] })] }))] })] })) }, chat.id))) }), orphanCount > 0 && (_jsx("div", { className: "sui-orphan-footer", children: _jsx("button", { className: "sui-orphan-delete-btn", onClick: handleDeleteOrphans, disabled: isDeletingOrphans, title: `${orphanCount} story ${orphanCount === 1 ? 'file has' : 'files have'} no associated chat`, children: isDeletingOrphans ? (_jsxs(_Fragment, { children: [_jsx("span", { className: "sui-orphan-spinner" }), _jsx("span", { children: "Deleting..." })] })) : (_jsxs(_Fragment, { children: [Icons.trash, _jsxs("span", { children: [orphanCount, " orphan ", orphanCount === 1 ? 'story' : 'stories'] })] })) }) }))] })), !state.sidebarOpen && (_jsx("div", { style: { padding: '12px', display: 'flex', justifyContent: 'center' }, children: _jsx("button", { className: "sui-button sui-button-ghost sui-button-icon", onClick: () => dispatch({ type: 'SET_SIDEBAR', payload: true }), "aria-label": "Show sidebar", children: Icons.panelLeft }) }))] }), _jsxs("main", { className: "sui-main", onDragEnter: handleDragEnter, onDragLeave: handleDragLeave, onDragOver: handleDragOver, onDrop: handleDrop, children: [state.isDragging && (_jsx("div", { className: "sui-drop-overlay", children: _jsxs("div", { className: "sui-drop-overlay-text", children: [Icons.image, _jsx("span", { children: "Drop images here" })] }) })), _jsxs("header", { className: "sui-header", children: [_jsxs("div", { className: "sui-header-left", children: [_jsx("span", { className: "sui-header-title", children: "Story UI" }), _jsxs(Badge, { variant: state.connectionStatus.connected ? 'success' : 'destructive', children: [_jsx("span", { className: "sui-badge-dot" }), state.connectionStatus.connected ? getConnectionDisplayText() : 'Disconnected'] })] }), _jsx("div", { className: "sui-header-right", children: state.connectionStatus.connected && state.availableProviders.length > 0 && (_jsxs(_Fragment, { children: [_jsxs("div", { className: "sui-select", children: [_jsxs("div", { className: "sui-select-trigger", children: [_jsx("span", { children: state.availableProviders.find(p => p.type === state.selectedProvider)?.name || 'Provider' }), Icons.chevronDown] }), _jsx("select", { className: "sui-select-native", value: state.selectedProvider, onChange: e => {
                                                         const newProvider = e.target.value;
                                                         dispatch({ type: 'SET_SELECTED_PROVIDER', payload: newProvider });
                                                         const provider = state.availableProviders.find(p => p.type === newProvider);

package/package.json

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

package/templates/StoryUI/StoryUIPanel.css

@@ -1467,3 +1467,59 @@
 .sui-hidden {
   display: none;
 }
+
+/* ============================================
+   Orphan Stories Footer
+   ============================================ */
+.sui-orphan-footer {
+  flex-shrink: 0;
+  padding-top: var(--space-2);
+  border-top: 1px solid hsl(var(--border));
+  margin-top: auto;
+}
+
+.sui-orphan-delete-btn {
+  display: flex;
+  align-items: center;
+  gap: var(--space-2);
+  width: 100%;
+  padding: var(--space-2) var(--space-3);
+  border: none;
+  background: transparent;
+  color: hsl(var(--muted-foreground));
+  font-size: 0.75rem;
+  cursor: pointer;
+  border-radius: var(--radius-sm);
+  transition: all var(--transition-fast);
+}
+
+.sui-orphan-delete-btn:hover:not(:disabled) {
+  background: hsl(var(--destructive) / 0.1);
+  color: hsl(var(--destructive));
+}
+
+.sui-orphan-delete-btn:disabled {
+  cursor: not-allowed;
+  opacity: 0.6;
+}
+
+.sui-orphan-delete-btn svg {
+  width: 14px;
+  height: 14px;
+  flex-shrink: 0;
+}
+
+.sui-orphan-spinner {
+  width: 14px;
+  height: 14px;
+  border: 2px solid hsl(var(--muted-foreground) / 0.3);
+  border-top-color: hsl(var(--muted-foreground));
+  border-radius: 50%;
+  animation: sui-spin 0.6s linear infinite;
+}
+
+@keyframes sui-spin {
+  to {
+    transform: rotate(360deg);
+  }
+}