@tpitre/story-ui 4.1.2 → 4.2.0

package/dist/mcp-server/index.js

@@ -399,6 +399,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/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.2.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);
+  }
+}

package/templates/StoryUI/StoryUIPanel.tsx

@@ -336,6 +336,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(): boolean {
@@ -791,6 +792,8 @@ function StoryUIPanel({ mcpPort }: StoryUIPanelProps) {
   const [contextMenuId, setContextMenuId] = useState<string | null>(null);
   const [renamingChatId, setRenamingChatId] = useState<string | null>(null);
   const [renameValue, setRenameValue] = useState('');
+  const [orphanCount, setOrphanCount] = useState<number>(0);
+  const [isDeletingOrphans, setIsDeletingOrphans] = useState<boolean>(false);
   const chatEndRef = useRef<HTMLDivElement>(null);
   const inputRef = useRef<HTMLInputElement>(null);
   const fileInputRef = useRef<HTMLInputElement>(null);
@@ -1492,6 +1495,62 @@ function StoryUIPanel({ mcpPort }: StoryUIPanelProps) {
     }
   };
 
+  // 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: string, currentTitle: string, e?: React.MouseEvent) => {
     if (e) e.stopPropagation();
     setContextMenuId(null);
@@ -1677,6 +1736,30 @@ function StoryUIPanel({ mcpPort }: StoryUIPanelProps) {
               ))}
             </div>
 
+            {/* Orphan Stories Footer */}
+            {orphanCount > 0 && (
+              <div className="sui-orphan-footer">
+                <button
+                  className="sui-orphan-delete-btn"
+                  onClick={handleDeleteOrphans}
+                  disabled={isDeletingOrphans}
+                  title={`${orphanCount} story ${orphanCount === 1 ? 'file has' : 'files have'} no associated chat`}
+                >
+                  {isDeletingOrphans ? (
+                    <>
+                      <span className="sui-orphan-spinner" />
+                      <span>Deleting...</span>
+                    </>
+                  ) : (
+                    <>
+                      {Icons.trash}
+                      <span>{orphanCount} orphan {orphanCount === 1 ? 'story' : 'stories'}</span>
+                    </>
+                  )}
+                </button>
+              </div>
+            )}
+
           </div>
         )}
         {!state.sidebarOpen && (