@tpitre/story-ui 3.6.2 → 3.7.0

package/dist/templates/StoryUI/StoryUIPanel.js

@@ -37,8 +37,8 @@ const renderMarkdown = (text) => {
             if (codeMatch) {
                 parts.push(_jsx("code", { style: {
                         background: 'rgba(0,0,0,0.08)',
-                        padding: '1px 5px',
-                        borderRadius: '3px',
+                        padding: '1px 4px',
+                        borderRadius: '4px',
                         fontFamily: 'ui-monospace, monospace',
                         fontSize: '0.88em'
                     }, children: codeMatch[1] }, `c-${paragraphIndex}-${keyIndex++}`));
@@ -69,7 +69,7 @@ const renderMarkdown = (text) => {
         }
         return parts;
     };
-    return (_jsx(_Fragment, { children: paragraphs.map((paragraph, index) => (_jsx("div", { style: { marginBottom: index < paragraphs.length - 1 ? '12px' : 0 }, children: parseInline(paragraph.trim(), index) }, `p-${index}`))) }));
+    return (_jsx(_Fragment, { children: paragraphs.map((paragraph, index) => (_jsx("div", { style: { marginBottom: index < paragraphs.length - 1 ? '8px' : 0 }, children: parseInline(paragraph.trim(), index) }, `p-${index}`))) }));
 };
 // Inline SVG icons for status indicators (avoiding emojis)
 const StatusIcons = {
@@ -78,6 +78,38 @@ const StatusIcons = {
     tip: (_jsxs("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", style: { color: '#f59e0b', verticalAlign: 'middle', marginRight: '4px' }, children: [_jsx("circle", { cx: "12", cy: "12", r: "10" }), _jsx("line", { x1: "12", y1: "16", x2: "12", y2: "12" }), _jsx("line", { x1: "12", y1: "8", x2: "12.01", y2: "8" })] })),
     wrench: (_jsx("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", style: { color: '#6366f1', verticalAlign: 'middle', marginRight: '4px' }, children: _jsx("path", { d: "M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z" }) }))
 };
+// Model display names for friendly UI presentation
+// Maps API model IDs to human-readable names
+const MODEL_DISPLAY_NAMES = {
+    // Claude models
+    'claude-opus-4-5-20251101': 'Claude Opus 4.5',
+    'claude-sonnet-4-5-20250929': 'Claude Sonnet 4.5',
+    'claude-haiku-4-5-20251001': 'Claude Haiku 4.5',
+    'claude-sonnet-4-20250514': 'Claude Sonnet 4',
+    'claude-opus-4-20250514': 'Claude Opus 4',
+    'claude-3-7-sonnet-20250219': 'Claude 3.7 Sonnet',
+    'claude-3-5-sonnet-20241022': 'Claude 3.5 Sonnet',
+    'claude-3-5-haiku-20241022': 'Claude 3.5 Haiku',
+    // OpenAI models
+    'gpt-5.1': 'GPT-5.1',
+    'gpt-5.1-thinking': 'GPT-5.1 Thinking',
+    'gpt-5': 'GPT-5',
+    'gpt-4o': 'GPT-4o',
+    'gpt-4o-mini': 'GPT-4o Mini',
+    'o1': 'o1',
+    'o1-mini': 'o1 Mini',
+    // Gemini models
+    'gemini-3-pro': 'Gemini 3 Pro',
+    'gemini-3-pro-preview': 'Gemini 3 Pro Preview',
+    'gemini-2.0-flash-exp': 'Gemini 2.0 Flash Exp',
+    'gemini-2.0-flash': 'Gemini 2.0 Flash',
+    'gemini-1.5-pro': 'Gemini 1.5 Pro',
+    'gemini-1.5-flash': 'Gemini 1.5 Flash',
+};
+// Get friendly display name for a model, falling back to the API name if not found
+const getModelDisplayName = (modelId) => {
+    return MODEL_DISPLAY_NAMES[modelId] || modelId;
+};
 // Determine the MCP API base URL.
 // Priority order:
 // 1. VITE_STORY_UI_EDGE_URL - Edge Worker URL for cloud deployments
@@ -131,44 +163,12 @@ const titleToStoryPath = (title) => {
     const kebabTitle = title.toLowerCase().replace(/[^a-z0-9]+/g, '-').replace(/^-|-$/g, '');
     return `generated-${kebabTitle}--default`;
 };
-// Helper to store generated code for the Source Code panel to display
-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__ = {};
-    }
-    // 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
 // In all modes, this provides a better UX by auto-navigating to the new story
-const navigateToNewStory = (title, code, delayMs = 1500) => {
+const navigateToNewStory = (title, _code, delayMs = 1500) => {
     const storyPath = titleToStoryPath(title);
     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, title);
-    }
     setTimeout(() => {
         // Navigate the TOP window (parent Storybook UI), not the iframe
         // The Story UI panel runs inside an iframe, so we need window.top to escape it
@@ -305,7 +305,7 @@ const syncWithActualStories = async () => {
                             content: story.prompt || `Generate ${story.title}`
                         }, {
                             role: 'ai',
-                            content: `✅ Created story: "${story.title}"\n\nThis story was recovered from memory. You can continue updating it or view it in Storybook.`
+                            content: `[SUCCESS] Created story: "${story.title}"\n\nThis story was recovered from memory. You can continue updating it or view it in Storybook.`
                         }],
                     lastUpdated: new Date(story.updatedAt || story.createdAt).getTime()
                 };
@@ -414,16 +414,61 @@ const testMCPConnection = async () => {
         return { connected: false, error: error instanceof Error ? error.message : 'Unknown error' };
     }
 };
+// Fetch orphan stories (stories on disk without corresponding chat history)
+const fetchOrphanStories = async () => {
+    try {
+        const response = await fetch(STORIES_API);
+        if (!response.ok) {
+            console.error('Failed to fetch stories from backend for orphan detection');
+            return [];
+        }
+        const contentType = response.headers.get('content-type');
+        if (!contentType || !contentType.includes('application/json')) {
+            console.error('Server returned non-JSON response for orphan detection');
+            return [];
+        }
+        const data = await response.json();
+        const serverStories = data.stories || [];
+        // Load current chats from localStorage
+        const existingChats = loadChats();
+        const chatIds = new Set(existingChats.map(chat => chat.id));
+        const chatFileNames = new Set(existingChats.map(chat => chat.fileName).filter(Boolean));
+        // Find stories that don't have a matching chat
+        const orphans = [];
+        serverStories.forEach((story) => {
+            const storyId = story.id || story.storyId || story.fileName;
+            const fileName = story.fileName || '';
+            // Check if this story has a corresponding chat
+            const hasMatchingChat = chatIds.has(storyId) || chatFileNames.has(fileName);
+            if (!hasMatchingChat && fileName) {
+                orphans.push({
+                    id: storyId,
+                    fileName: fileName,
+                    title: story.title || fileName.replace(/\.stories\.(tsx|ts|jsx|js)$/, ''),
+                    createdAt: new Date(story.createdAt || Date.now()).getTime(),
+                });
+            }
+        });
+        // Sort by creation date, newest first
+        return orphans.sort((a, b) => b.createdAt - a.createdAt);
+    }
+    catch (error) {
+        console.error('Error fetching orphan stories:', error);
+        return [];
+    }
+};
 // Component styles
 const STYLES = {
     container: {
         display: 'flex',
         flexDirection: 'row',
-        fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif',
+        fontFamily: '"IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", sans-serif',
         height: '100vh',
         overflow: 'hidden',
         background: 'linear-gradient(135deg, #1e293b 0%, #334155 100%)',
         color: '#e2e8f0',
+        fontSize: '14px',
+        lineHeight: '1.5',
     },
     // Sidebar
     sidebar: {
@@ -441,44 +486,44 @@ const STYLES = {
     },
     sidebarToggle: {
         width: '100%',
-        padding: '8px 12px',
-        background: '#3b82f6',
-        color: 'white',
-        border: 'none',
-        borderRadius: '6px',
-        fontSize: '13px',
-        fontWeight: '500',
+        padding: '10px 14px',
+        background: 'rgba(59, 130, 246, 0.15)',
+        color: '#e2e8f0',
+        border: '1px solid rgba(59, 130, 246, 0.3)',
+        borderRadius: '8px',
+        fontSize: '14px',
+        fontWeight: '600',
         cursor: 'pointer',
-        marginBottom: '6px',
+        marginBottom: '8px',
         transition: 'all 0.2s ease',
         boxShadow: 'none',
         display: 'flex',
         alignItems: 'center',
-        justifyContent: 'center',
-        gap: '6px',
+        justifyContent: 'flex-start',
+        gap: '10px',
         lineHeight: '1',
     },
     newChatButton: {
         width: '100%',
-        padding: '8px 12px',
+        padding: '10px 14px',
         background: '#3b82f6',
         color: 'white',
         border: 'none',
-        borderRadius: '6px',
-        fontSize: '13px',
-        fontWeight: '500',
+        borderRadius: '8px',
+        fontSize: '14px',
+        fontWeight: '600',
         cursor: 'pointer',
-        marginBottom: '12px',
+        marginBottom: '16px',
         transition: 'all 0.2s ease',
-        boxShadow: 'none',
+        boxShadow: '0 2px 8px rgba(59, 130, 246, 0.25)',
         display: 'flex',
         alignItems: 'center',
-        justifyContent: 'center',
-        gap: '6px',
+        justifyContent: 'flex-start',
+        gap: '10px',
         lineHeight: '1',
     },
     chatItem: {
-        padding: '8px 10px',
+        padding: '8px 12px',
         marginBottom: '4px',
         background: 'rgba(255, 255, 255, 0.05)',
         borderRadius: '6px',
@@ -492,7 +537,7 @@ const STYLES = {
         borderLeft: '2px solid #3b82f6',
     },
     chatItemTitle: {
-        fontSize: '13px',
+        fontSize: '14px',
         fontWeight: '500',
         marginBottom: '2px',
         whiteSpace: 'nowrap',
@@ -500,7 +545,7 @@ const STYLES = {
         textOverflow: 'ellipsis',
     },
     chatItemTime: {
-        fontSize: '11px',
+        fontSize: '12px',
         color: '#94a3b8',
     },
     deleteButton: {
@@ -541,10 +586,9 @@ const STYLES = {
         color: '#94a3b8',
         textAlign: 'center',
         marginTop: '60px',
-        fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif',
     },
     emptyStateTitle: {
-        fontSize: '16px',
+        fontSize: '15px',
         fontWeight: '500',
         marginBottom: '8px',
         color: '#cbd5e1',
@@ -556,62 +600,64 @@ const STYLES = {
     // Message bubbles
     messageContainer: {
         display: 'flex',
-        marginBottom: '10px',
+        marginBottom: '8px',
     },
     userMessage: {
-        background: '#3b82f6',
-        color: '#ffffff',
+        background: 'rgba(59, 130, 246, 0.12)',
+        color: '#e2e8f0',
         borderRadius: '16px 16px 4px 16px',
         padding: '10px 14px',
         maxWidth: '85%',
         marginLeft: 'auto',
         fontSize: '14px',
-        lineHeight: '1.5',
-        fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif',
+        lineHeight: '1.45',
         boxShadow: 'none',
         wordWrap: 'break-word',
+        border: '1px solid rgba(59, 130, 246, 0.2)',
     },
     aiMessage: {
         background: 'rgba(255, 255, 255, 0.95)',
         color: '#1f2937',
         borderRadius: '16px 16px 16px 4px',
         padding: '10px 14px',
-        maxWidth: '85%',
+        maxWidth: '90%',
         fontSize: '14px',
-        lineHeight: '1.5',
-        fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif',
-        boxShadow: '0 1px 3px rgba(0, 0, 0, 0.08)',
+        lineHeight: '1.45',
+        boxShadow: '0 1px 2px rgba(0, 0, 0, 0.06)',
+        border: '1px solid rgba(0, 0, 0, 0.08)',
         wordWrap: 'break-word',
         whiteSpace: 'pre-wrap',
     },
     loadingMessage: {
-        background: 'rgba(255, 255, 255, 0.9)',
-        color: '#6b7280',
+        background: 'rgba(255, 255, 255, 0.95)',
+        color: '#4b5563',
         borderRadius: '16px 16px 16px 4px',
         padding: '10px 14px',
         fontSize: '14px',
-        fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif',
+        lineHeight: '1.45',
         display: 'flex',
         alignItems: 'center',
-        gap: '6px',
+        gap: '8px',
+        border: '1px solid rgba(0, 0, 0, 0.08)',
+        boxShadow: '0 1px 2px rgba(0, 0, 0, 0.06)',
     },
     // Input form
     inputForm: {
         display: 'flex',
         alignItems: 'center',
-        gap: '10px',
+        gap: '12px',
         margin: '0 16px 16px 16px',
-        padding: '10px',
+        padding: '12px',
         background: 'rgba(255, 255, 255, 0.03)',
-        borderRadius: '10px',
+        borderRadius: '12px',
         border: '1px solid rgba(255, 255, 255, 0.08)',
         backdropFilter: 'blur(10px)',
     },
     textInput: {
-        fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif',
+        font: 'inherit',
         flex: 1,
-        padding: '10px 14px',
-        borderRadius: '6px',
+        padding: '12px 16px',
+        borderRadius: '8px',
         border: '1px solid rgba(255, 255, 255, 0.15)',
         fontSize: '13px',
         color: '#1f2937',
@@ -621,20 +667,21 @@ const STYLES = {
         boxSizing: 'border-box',
     },
     sendButton: {
-        fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif',
+        font: 'inherit',
         padding: '10px 16px',
-        borderRadius: '6px',
+        borderRadius: '10px',
         border: 'none',
-        background: '#10b981',
-        color: '#ffffff',
-        fontSize: '13px',
-        fontWeight: '500',
+        background: '#3b82f6',
+        color: 'white',
+        fontSize: '14px',
+        fontWeight: '600',
         cursor: 'pointer',
         display: 'flex',
         alignItems: 'center',
-        gap: '5px',
-        transition: 'all 0.15s ease',
-        boxShadow: 'none',
+        gap: '6px',
+        transition: 'all 0.2s ease',
+        boxShadow: '0 2px 8px rgba(59, 130, 246, 0.35)',
+        flexShrink: 0,
     },
     errorMessage: {
         background: 'rgba(248, 113, 113, 0.1)',
@@ -642,7 +689,7 @@ const STYLES = {
         padding: '8px 12px',
         borderRadius: '6px',
         fontSize: '13px',
-        marginBottom: '10px',
+        marginBottom: '8px',
         border: '1px solid rgba(248, 113, 113, 0.2)',
     },
     loadingDots: {
@@ -657,38 +704,41 @@ const STYLES = {
     },
     codeBlock: {
         background: '#1e293b',
-        padding: '10px 12px',
-        borderRadius: '6px',
+        padding: '12px',
+        borderRadius: '8px',
         fontFamily: 'Consolas, Monaco, "Andale Mono", "Ubuntu Mono", monospace',
         fontSize: '12px',
         lineHeight: '1.5',
         overflowX: 'auto',
-        marginTop: '6px',
+        marginTop: '8px',
         border: '1px solid rgba(255, 255, 255, 0.08)',
     },
     // Streaming progress styles
     streamingContainer: {
         background: 'rgba(255, 255, 255, 0.95)',
         borderRadius: '16px 16px 16px 4px',
-        padding: '12px',
-        maxWidth: '85%',
-        boxShadow: '0 1px 3px rgba(0, 0, 0, 0.08)',
+        padding: '10px 14px',
+        maxWidth: '90%',
+        boxShadow: '0 1px 2px rgba(0, 0, 0, 0.06)',
+        border: '1px solid rgba(0, 0, 0, 0.08)',
+        fontSize: '14px',
+        lineHeight: '1.45',
     },
     intentPreview: {
-        background: 'rgba(59, 130, 246, 0.08)',
+        background: 'rgba(59, 130, 246, 0.06)',
         borderRadius: '8px',
-        padding: '10px',
+        padding: '10px 12px',
         marginBottom: '10px',
-        border: '1px solid rgba(59, 130, 246, 0.15)',
+        border: '1px solid rgba(59, 130, 246, 0.12)',
     },
     intentTitle: {
         fontSize: '13px',
         fontWeight: '600',
         color: '#1e40af',
-        marginBottom: '6px',
+        marginBottom: '8px',
         display: 'flex',
         alignItems: 'center',
-        gap: '5px',
+        gap: '4px',
     },
     intentStrategy: {
         fontSize: '12px',
@@ -699,22 +749,22 @@ const STYLES = {
         display: 'flex',
         flexWrap: 'wrap',
         gap: '4px',
-        marginTop: '6px',
+        marginTop: '8px',
     },
     componentTag: {
         background: 'rgba(59, 130, 246, 0.12)',
         color: '#1d4ed8',
-        fontSize: '10px',
-        padding: '2px 6px',
+        fontSize: '11px',
+        padding: '2px 8px',
         borderRadius: '10px',
         fontWeight: '500',
     },
     progressBar: {
         background: 'rgba(0, 0, 0, 0.08)',
-        borderRadius: '3px',
+        borderRadius: '4px',
         height: '4px',
-        marginTop: '10px',
-        marginBottom: '6px',
+        marginTop: '12px',
+        marginBottom: '8px',
         overflow: 'hidden',
     },
     progressFill: {
@@ -724,14 +774,16 @@ const STYLES = {
         transition: 'width 0.3s ease',
     },
     progressPhase: {
-        fontSize: '11px',
-        color: '#6b7280',
+        fontSize: '14px',
+        color: '#4b5563',
         display: 'flex',
         alignItems: 'center',
-        gap: '5px',
+        gap: '6px',
+        fontWeight: '500',
+        lineHeight: '1.45',
     },
     phaseIcon: {
-        fontSize: '12px',
+        fontSize: '14px',
     },
     validationBox: {
         marginTop: '8px',
@@ -757,18 +809,18 @@ const STYLES = {
     retryBadge: {
         background: 'rgba(245, 158, 11, 0.12)',
         color: '#b45309',
-        fontSize: '10px',
+        fontSize: '11px',
         padding: '2px 8px',
         borderRadius: '10px',
         display: 'inline-flex',
         alignItems: 'center',
-        gap: '3px',
-        marginTop: '6px',
+        gap: '4px',
+        marginTop: '8px',
     },
     completionSummary: {
         marginTop: '10px',
         paddingTop: '10px',
-        borderTop: '1px solid rgba(0, 0, 0, 0.08)',
+        borderTop: '1px solid rgba(0, 0, 0, 0.06)',
     },
     summaryTitle: {
         fontSize: '14px',
@@ -778,23 +830,24 @@ const STYLES = {
         display: 'flex',
         alignItems: 'center',
         gap: '6px',
+        lineHeight: '1.45',
     },
     summaryDescription: {
-        fontSize: '12px',
+        fontSize: '14px',
         color: '#4b5563',
-        lineHeight: '1.5',
+        lineHeight: '1.45',
     },
     metricsRow: {
         display: 'flex',
-        gap: '12px',
-        marginTop: '8px',
-        fontSize: '10px',
+        gap: '10px',
+        marginTop: '6px',
+        fontSize: '13px',
         color: '#6b7280',
     },
     metric: {
         display: 'flex',
         alignItems: 'center',
-        gap: '3px',
+        gap: '4px',
     },
     // Code viewer styles for generated stories
     codeViewerContainer: {
@@ -820,7 +873,7 @@ const STYLES = {
         background: 'rgba(59, 130, 246, 0.15)',
     },
     codeViewerContent: {
-        marginTop: '10px',
+        marginTop: '12px',
         background: '#1e293b',
         borderRadius: '8px',
         overflow: 'hidden',
@@ -840,7 +893,7 @@ const STYLES = {
         fontFamily: 'ui-monospace, monospace',
     },
     copyButton: {
-        padding: '4px 10px',
+        padding: '4px 12px',
         fontSize: '11px',
         fontWeight: '500',
         color: '#e2e8f0',
@@ -888,12 +941,12 @@ const STYLES = {
     imagePreviewContainer: {
         display: 'flex',
         flexWrap: 'wrap',
-        gap: '6px',
+        gap: '8px',
         padding: '8px 12px',
         background: 'rgba(255, 255, 255, 0.03)',
         borderBottom: '1px solid rgba(255, 255, 255, 0.08)',
         margin: '0 16px',
-        borderRadius: '6px 6px 0 0',
+        borderRadius: '8px 8px 0 0',
     },
     imagePreviewItem: {
         position: 'relative',
@@ -929,15 +982,15 @@ const STYLES = {
     imagePreviewLabel: {
         display: 'flex',
         alignItems: 'center',
-        gap: '6px',
+        gap: '8px',
         fontSize: '12px',
         color: '#94a3b8',
         marginRight: 'auto',
     },
     userMessageImages: {
         display: 'flex',
-        gap: '6px',
-        marginTop: '6px',
+        gap: '8px',
+        marginTop: '8px',
         flexWrap: 'wrap',
     },
     userMessageImage: {
@@ -976,24 +1029,138 @@ const STYLES = {
         boxShadow: '0 2px 8px rgba(59, 130, 246, 0.3)',
     },
 };
-// Add custom style for loading animation
-const styleSheet = document.createElement('style');
-styleSheet.textContent = `
-  @keyframes loadingDots {
-    0%, 20% { content: "."; }
-    40% { content: ".."; }
-    60%, 100% { content: "..."; }
-  }
+// Add custom style for loading animation and IBM Plex Sans font
+// Use a unique ID to prevent duplicate stylesheets during HMR
+const STYLESHEET_ID = 'story-ui-panel-styles';
+if (!document.getElementById(STYLESHEET_ID)) {
+    // Load IBM Plex Sans font
+    const fontLink = document.createElement('link');
+    fontLink.rel = 'stylesheet';
+    fontLink.href = 'https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500;600;700&display=swap';
+    document.head.appendChild(fontLink);
+    const styleSheet = document.createElement('style');
+    styleSheet.id = STYLESHEET_ID;
+    styleSheet.textContent = `
+    @keyframes loadingDots {
+      0%, 20% { content: "."; }
+      40% { content: ".."; }
+      60%, 100% { content: "..."; }
+    }
+
+    .loading-dots::after {
+      content: ".";
+      animation: loadingDots 1.4s infinite;
+    }
+
+    /* Override Storybook's default styles with !important */
+    .story-ui-panel,
+    .story-ui-panel * {
+      font-family: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
+    }
+
+    .story-ui-panel {
+      font-size: 14px !important;
+      line-height: 1.5 !important;
+    }
+
+    /* Message bubbles - consistent styling */
+    .story-ui-message {
+      font-size: 16px !important;
+      line-height: 1.45 !important;
+      padding: 12px 16px !important;
+    }
+
+    .story-ui-user-message {
+      background: rgba(59, 130, 246, 0.12) !important;
+      color: #e2e8f0 !important;
+      border-radius: 18px 18px 4px 18px !important;
+      border: 1px solid rgba(59, 130, 246, 0.2) !important;
+    }
 
-  .loading-dots::after {
-    content: ".";
-    animation: loadingDots 1.4s infinite;
-  }
-`;
-document.head.appendChild(styleSheet);
+    .story-ui-ai-message {
+      background: rgba(255, 255, 255, 0.97) !important;
+      color: #1f2937 !important;
+      border-radius: 18px 18px 18px 4px !important;
+      border: 1px solid rgba(0, 0, 0, 0.08) !important;
+      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08) !important;
+    }
+
+    /* Override nested elements in AI messages (from renderMarkdown)
+    .story-ui-ai-message p,
+    .story-ui-ai-message span,
+    .story-ui-ai-message strong,
+    .story-ui-ai-message em,
+    .story-ui-ai-message li,
+    .story-ui-ai-message ul,
+    .story-ui-ai-message ol {
+      font-size: 14px !important;
+      line-height: 1.45 !important;
+      margin: 0 !important;
+    } */
+
+    .story-ui-ai-message p + p {
+      margin-top: 8px !important;
+    }
+
+    /* Status text */
+    .story-ui-status {
+      font-size: 13px !important;
+      font-weight: 400 !important;
+    }
+
+    .story-ui-status-connected {
+      color: #10b981 !important;
+    }
+
+    .story-ui-status-disconnected {
+      color: #ef4444 !important;
+    }
+
+    /* Sidebar buttons */
+    .story-ui-sidebar button {
+      font-size: 14px !important;
+      font-weight: 600 !important;
+    }
+
+    /* Header text */
+    .story-ui-header h1 {
+      font-size: 24px !important;
+      font-weight: 700 !important;
+    }
+
+    .story-ui-header p {
+      font-size: 14px !important;
+      color: #94a3b8 !important;
+    }
+
+    /* Input field */
+    .story-ui-input {
+      font-size: 14px !important;
+      font-family: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
+    }
+
+    /* Code blocks in messages */
+    .story-ui-ai-message code {
+      font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace !important;
+      font-size: 13px !important;
+      background: rgba(0, 0, 0, 0.06) !important;
+      padding: 2px 6px !important;
+      border-radius: 4px !important;
+    }
+  `;
+    document.head.appendChild(styleSheet);
+}
 // Helper function to format timestamp
 const formatTime = (timestamp) => {
+    // Handle invalid timestamps
+    if (!timestamp || isNaN(timestamp) || timestamp <= 0) {
+        return '';
+    }
     const date = new Date(timestamp);
+    // Check if the date is valid
+    if (isNaN(date.getTime())) {
+        return '';
+    }
     const now = new Date();
     const diffMs = now.getTime() - date.getTime();
     const diffMins = Math.floor(diffMs / 60000);
@@ -1009,19 +1176,19 @@ const formatTime = (timestamp) => {
         return `${diffDays}d ago`;
     return date.toLocaleDateString();
 };
-// Helper to get phase icon and text
+// Helper to get phase text (no icons - cleaner UI)
 const getPhaseInfo = (phase) => {
     const phases = {
-        config_loaded: { icon: '⚙️', text: 'Loading configuration' },
-        components_discovered: { icon: '🔍', text: 'Discovering components' },
-        prompt_built: { icon: '📝', text: 'Building prompt' },
-        llm_thinking: { icon: '🤔', text: 'AI is thinking' },
-        code_extracted: { icon: '📦', text: 'Extracting code' },
-        validating: { icon: '✅', text: 'Validating output' },
-        post_processing: { icon: '🔧', text: 'Processing' },
-        saving: { icon: '💾', text: 'Saving story' },
+        config_loaded: { text: 'Loading configuration' },
+        components_discovered: { text: 'Discovering components' },
+        prompt_built: { text: 'Building prompt' },
+        llm_thinking: { text: 'AI is thinking' },
+        code_extracted: { text: 'Extracting code' },
+        validating: { text: 'Validating output' },
+        post_processing: { text: 'Processing' },
+        saving: { text: 'Saving story' },
     };
-    return phases[phase] || { icon: '⏳', text: 'Working' };
+    return phases[phase] || { text: 'Working' };
 };
 // Streaming Progress Message Component
 const StreamingProgressMessage = ({ streamingData }) => {
@@ -1041,20 +1208,20 @@ const StreamingProgressMessage = ({ streamingData }) => {
     };
     // If completed, show completion summary
     if (completion) {
-        return (_jsx("div", { style: STYLES.streamingContainer, children: _jsxs("div", { style: STYLES.completionSummary, children: [_jsxs("div", { style: STYLES.summaryTitle, children: [completion.success ? '✅' : '❌', " ", completion.title] }), _jsx("div", { style: STYLES.summaryDescription, children: completion.summary.description }), completion.componentsUsed.length > 0 && (_jsxs("div", { style: { marginTop: '10px' }, children: [_jsx("div", { style: { fontSize: '12px', color: '#6b7280', marginBottom: '6px' }, children: "Components used:" }), _jsx("div", { style: STYLES.intentComponents, children: completion.componentsUsed.map((comp, i) => (_jsx("span", { style: STYLES.componentTag, children: comp.name }, i))) })] })), completion.layoutChoices.length > 0 && (_jsxs("div", { style: { marginTop: '10px' }, children: [_jsx("div", { style: { fontSize: '12px', color: '#6b7280', marginBottom: '6px' }, children: "Layout:" }), _jsx("div", { style: { fontSize: '12px', color: '#4b5563' }, children: completion.layoutChoices.map(l => l.pattern).join(', ') })] })), completion.validation && !completion.validation.isValid && (_jsxs("div", { style: { ...STYLES.validationBox, ...STYLES.validationWarning }, children: ["\u26A0\uFE0F ", completion.validation.autoFixApplied ? 'Auto-fixed issues' : 'Minor issues detected'] })), completion.suggestions && completion.suggestions.length > 0 && (_jsxs("div", { style: { marginTop: '10px', fontSize: '12px', color: '#6b7280' }, children: ["\uD83D\uDCA1 ", completion.suggestions[0]] })), completion.metrics && (_jsxs("div", { style: STYLES.metricsRow, children: [_jsxs("span", { style: STYLES.metric, children: ["\u23F1\uFE0F ", (completion.metrics.totalTimeMs / 1000).toFixed(1), "s"] }), _jsxs("span", { style: STYLES.metric, children: ["\uD83D\uDD04 ", completion.metrics.llmCallsCount, " LLM calls"] })] })), completion.code && (_jsxs("div", { style: STYLES.codeViewerContainer, children: [_jsxs("div", { style: STYLES.codeViewerToggle, onClick: () => setShowCode(!showCode), role: "button", tabIndex: 0, onKeyDown: (e) => e.key === 'Enter' && setShowCode(!showCode), children: [_jsxs("span", { children: [showCode ? '▼' : '▶', " View Generated Code"] }), _jsx("span", { style: { fontSize: '11px', color: '#6366f1' }, children: completion.fileName })] }), showCode && (_jsxs("div", { style: STYLES.codeViewerContent, children: [_jsxs("div", { style: STYLES.codeViewerHeader, children: [_jsx("span", { style: STYLES.codeViewerFileName, children: completion.fileName }), _jsx("button", { style: {
+        return (_jsx("div", { style: STYLES.streamingContainer, children: _jsxs("div", { style: STYLES.completionSummary, children: [_jsxs("div", { style: STYLES.summaryTitle, children: [completion.success ? StatusIcons.success : StatusIcons.error, " ", completion.title] }), _jsx("div", { style: STYLES.summaryDescription, children: completion.summary.description }), completion.componentsUsed.length > 0 && (_jsxs("div", { style: { marginTop: '12px' }, children: [_jsx("div", { style: { fontSize: '12px', color: '#6b7280', marginBottom: '8px' }, children: "Components used:" }), _jsx("div", { style: STYLES.intentComponents, children: completion.componentsUsed.map((comp, i) => (_jsx("span", { style: STYLES.componentTag, children: comp.name }, i))) })] })), completion.layoutChoices.length > 0 && (_jsxs("div", { style: { marginTop: '12px' }, children: [_jsx("div", { style: { fontSize: '12px', color: '#6b7280', marginBottom: '8px' }, children: "Layout:" }), _jsx("div", { style: { fontSize: '12px', color: '#4b5563' }, children: completion.layoutChoices.map(l => l.pattern).join(', ') })] })), completion.validation && !completion.validation.isValid && (_jsx("div", { style: { ...STYLES.validationBox, ...STYLES.validationWarning }, children: completion.validation.autoFixApplied ? 'Auto-fixed issues' : 'Minor issues detected' })), completion.suggestions && completion.suggestions.length > 0 && (_jsxs("div", { style: { marginTop: '12px', fontSize: '12px', color: '#6b7280', display: 'flex', alignItems: 'flex-start', gap: '6px' }, children: [StatusIcons.tip, " ", _jsx("span", { children: completion.suggestions[0] })] })), completion.metrics && (_jsxs("div", { style: STYLES.metricsRow, children: [_jsxs("span", { style: STYLES.metric, children: [(completion.metrics.totalTimeMs / 1000).toFixed(1), "s"] }), _jsxs("span", { style: STYLES.metric, children: [completion.metrics.llmCallsCount, " LLM calls"] })] })), completion.code && (_jsxs("div", { style: STYLES.codeViewerContainer, children: [_jsxs("div", { style: STYLES.codeViewerToggle, onClick: () => setShowCode(!showCode), role: "button", tabIndex: 0, onKeyDown: (e) => e.key === 'Enter' && setShowCode(!showCode), children: [_jsxs("span", { children: [showCode ? '▼' : '▶', " View Generated Code"] }), _jsx("span", { style: { fontSize: '11px', color: '#6366f1' }, children: completion.fileName })] }), showCode && (_jsxs("div", { style: STYLES.codeViewerContent, children: [_jsxs("div", { style: STYLES.codeViewerHeader, children: [_jsx("span", { style: STYLES.codeViewerFileName, children: completion.fileName }), _jsx("button", { style: {
                                                     ...STYLES.copyButton,
                                                     ...(copyStatus === 'copied' ? STYLES.copyButtonSuccess : {})
-                                                }, onClick: () => handleCopyCode(completion.code), children: copyStatus === 'copied' ? '✓ Copied!' : 'Copy Code' })] }), _jsx("pre", { style: STYLES.codeViewerPre, children: _jsx("code", { children: completion.code }) })] }))] }))] }) }));
+                                                }, onClick: () => handleCopyCode(completion.code), children: copyStatus === 'copied' ? 'Copied' : 'Copy' })] }), _jsx("pre", { style: STYLES.codeViewerPre, children: _jsx("code", { children: completion.code }) })] }))] }))] }) }));
     }
     // If error, show error
     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] })] }) }));
+        return (_jsx("div", { style: STYLES.streamingContainer, children: _jsxs("div", { style: { ...STYLES.validationBox, ...STYLES.validationError }, children: [_jsxs("strong", { style: { display: 'flex', alignItems: 'center', gap: '6px' }, children: [StatusIcons.error, " ", error.message] }), error.details && _jsx("div", { style: { marginTop: '4px' }, children: error.details }), error.suggestion && _jsxs("div", { style: { marginTop: '8px', display: 'flex', alignItems: 'flex-start', gap: '6px' }, children: [StatusIcons.tip, " ", _jsx("span", { children: error.suggestion })] })] }) }));
     }
     // 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: {
+    return (_jsxs("div", { style: STYLES.streamingContainer, children: [_jsxs("div", { style: STYLES.intentPreview, children: [_jsxs("div", { style: STYLES.progressPhase, children: [_jsx("span", { children: "Generating 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}%`
-                            } }) }))] }), 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" }) }))] }));
+                            } }) }))] }), retry && (_jsxs("div", { style: STYLES.retryBadge, children: ["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() {
@@ -1073,6 +1240,7 @@ function StoryUIPanel() {
     const [streamingState, setStreamingState] = useState(null);
     const [attachedImages, setAttachedImages] = useState([]);
     const [considerations, setConsiderations] = useState('');
+    const [orphanStories, setOrphanStories] = useState([]);
     const chatEndRef = useRef(null);
     const inputRef = useRef(null);
     const fileInputRef = useRef(null);
@@ -1319,6 +1487,9 @@ function StoryUIPanel() {
                     setActiveChatId(sortedChats[0].id);
                     setActiveTitle(sortedChats[0].title);
                 }
+                // Fetch orphan stories (stories on disk without chat history)
+                const orphans = await fetchOrphanStories();
+                setOrphanStories(orphans);
             }
             else {
                 // Load from local storage if server is not available
@@ -1421,10 +1592,10 @@ function StoryUIPanel() {
         // In Edge mode, stories are stored in Durable Objects, not on filesystem
         if (!isUpdate && !hasShownRefreshHint.current) {
             if (isEdgeMode()) {
-                parts.push(`\n\n_Story saved to cloud. View code in chat history above._`);
+                parts.push(`\n\n_Story saved to cloud. View code in chat history recent chats navigation._`);
             }
             else {
-                parts.push(`\n\n_Refresh Storybook (Cmd/Ctrl + R) to see new stories in the sidebar._`);
+                parts.push(`\n\n_Might need toefresh Storybook (Cmd/Ctrl + R) to see new stories in the sidebar._`);
             }
             hasShownRefreshHint.current = true;
         }
@@ -1460,10 +1631,6 @@ 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();
@@ -1488,10 +1655,6 @@ 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) => {
@@ -1637,13 +1800,13 @@ function StoryUIPanel() {
                     const data = await handleSendNonStreaming(userInput, newConversation);
                     // Process non-streaming response (same as before)
                     let responseMessage;
-                    const statusIcon = data.validation?.hasWarnings ? (data.validation.errors?.length > 0 ? '🔧' : '⚠️') : '✅';
+                    const statusMarker = data.validation?.hasWarnings ? (data.validation.errors?.length > 0 ? '[WRENCH]' : '[TIP]') : '[SUCCESS]';
                     // Build conversational response for fallback
                     if (data.isUpdate) {
-                        responseMessage = `${statusIcon} **Updated: "${data.title}"**\n\nI've made the requested changes to your component. You can view the updated version in Storybook.\n\n_Check the Docs tab to see both the rendered component and its code._`;
+                        responseMessage = `${statusMarker} **Updated: "${data.title}"**\n\nI've made the requested changes to your component. You can view the updated version in Storybook.\n\n_Check the Docs tab to see both the rendered component and its code._`;
                     }
                     else {
-                        responseMessage = `${statusIcon} **Created: "${data.title}"**\n\nI've generated the component with the requested features. You can view it in Storybook where you'll see both the rendered component and its markup.\n\n💡 **Note**: If you don't see the story immediately, you may need to refresh your Storybook page (Cmd/Ctrl + R).`;
+                        responseMessage = `${statusMarker} **Created: "${data.title}"**\n\nI've generated the component with the requested features. You can view it in Storybook where you'll see both the rendered component and its markup.\n\n[TIP] **Note**: If you don't see the story immediately, you may need to refresh your Storybook page (Cmd/Ctrl + R).`;
                     }
                     const aiMsg = { role: 'ai', content: responseMessage };
                     const updatedConversation = [...newConversation, aiMsg];
@@ -1664,10 +1827,6 @@ 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();
@@ -1689,10 +1848,6 @@ 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) {
@@ -1713,13 +1868,13 @@ function StoryUIPanel() {
             try {
                 const data = await handleSendNonStreaming(userInput, newConversation);
                 let responseMessage;
-                const statusIcon = data.validation?.hasWarnings ? (data.validation.errors?.length > 0 ? '🔧' : '⚠️') : '✅';
+                const statusMarker = data.validation?.hasWarnings ? (data.validation.errors?.length > 0 ? '[WRENCH]' : '[TIP]') : '[SUCCESS]';
                 // Build conversational response for non-streaming mode
                 if (data.isUpdate) {
-                    responseMessage = `${statusIcon} **Updated: "${data.title}"**\n\nI've made the requested changes to your component. You can view the updated version in Storybook.\n\n_Check the Docs tab to see both the rendered component and its code._`;
+                    responseMessage = `${statusMarker} **Updated: "${data.title}"**\n\nI've made the requested changes to your component. You can view the updated version in Storybook.\n\n_Check the Docs tab to see both the rendered component and its code._`;
                 }
                 else {
-                    responseMessage = `${statusIcon} **Created: "${data.title}"**\n\nI've generated the component with the requested features. You can view it in Storybook where you'll see both the rendered component and its markup.\n\n💡 **Note**: If you don't see the story immediately, you may need to refresh your Storybook page (Cmd/Ctrl + R).`;
+                    responseMessage = `${statusMarker} **Created: "${data.title}"**\n\nI've generated the component with the requested features. You can view it in Storybook where you'll see both the rendered component and its markup.\n\n[TIP] **Note**: If you don't see the story immediately, you may need to refresh your Storybook page (Cmd/Ctrl + R).`;
                 }
                 const aiMsg = { role: 'ai', content: responseMessage };
                 const updatedConversation = [...newConversation, aiMsg];
@@ -1739,10 +1894,6 @@ 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();
@@ -1762,10 +1913,6 @@ 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) {
@@ -1814,22 +1961,22 @@ function StoryUIPanel() {
             }
         }
     };
-    return (_jsxs("div", { style: STYLES.container, children: [_jsxs("div", { style: {
+    return (_jsxs("div", { className: "story-ui-panel", style: STYLES.container, children: [_jsxs("div", { style: {
                     ...STYLES.sidebar,
                     ...(sidebarOpen ? {} : STYLES.sidebarCollapsed),
                 }, children: [sidebarOpen && (_jsxs("div", { style: { flex: 1, overflowY: 'auto', padding: '16px' }, children: [_jsxs("button", { onClick: () => setSidebarOpen(false), style: STYLES.sidebarToggle, title: "Collapse sidebar", onMouseEnter: (e) => {
-                                    e.currentTarget.style.transform = 'translateY(-1px)';
-                                    e.currentTarget.style.boxShadow = '0 4px 16px rgba(59, 130, 246, 0.4)';
+                                    e.currentTarget.style.background = 'rgba(59, 130, 246, 0.25)';
+                                    e.currentTarget.style.borderColor = 'rgba(59, 130, 246, 0.5)';
                                 }, onMouseLeave: (e) => {
-                                    e.currentTarget.style.transform = 'translateY(0)';
-                                    e.currentTarget.style.boxShadow = '0 2px 8px rgba(59, 130, 246, 0.3)';
-                                }, children: [_jsx("span", { style: { lineHeight: '0.5', display: 'inline-block', alignItems: 'center', width: '10px', height: '10px' }, children: "\u2630" }), _jsx("span", { children: "Chats" })] }), _jsxs("button", { onClick: handleNewChat, style: STYLES.newChatButton, onMouseEnter: (e) => {
-                                    e.currentTarget.style.transform = 'translateY(-1px)';
-                                    e.currentTarget.style.boxShadow = '0 4px 16px rgba(59, 130, 246, 0.4)';
+                                    e.currentTarget.style.background = 'rgba(59, 130, 246, 0.15)';
+                                    e.currentTarget.style.borderColor = 'rgba(59, 130, 246, 0.3)';
+                                }, children: [_jsx("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: _jsx("path", { d: "M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z" }) }), _jsx("span", { children: "Chats" })] }), _jsxs("button", { onClick: handleNewChat, style: STYLES.newChatButton, onMouseEnter: (e) => {
+                                    e.currentTarget.style.background = '#2563eb';
+                                    e.currentTarget.style.boxShadow = '0 4px 12px rgba(59, 130, 246, 0.4)';
                                 }, onMouseLeave: (e) => {
-                                    e.currentTarget.style.transform = 'translateY(0)';
-                                    e.currentTarget.style.boxShadow = '0 2px 8px rgba(59, 130, 246, 0.2)';
-                                }, children: [_jsx("span", { style: { lineHeight: '0.5', display: 'inline-block', alignItems: 'center', width: '10px', height: '10px' }, children: "+" }), _jsx("span", { children: "New Chat" })] }), recentChats.length > 0 && (_jsx("div", { style: {
+                                    e.currentTarget.style.background = '#3b82f6';
+                                    e.currentTarget.style.boxShadow = '0 2px 8px rgba(59, 130, 246, 0.25)';
+                                }, children: [_jsxs("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round", children: [_jsx("line", { x1: "12", y1: "5", x2: "12", y2: "19" }), _jsx("line", { x1: "5", y1: "12", x2: "19", y2: "12" })] }), _jsx("span", { children: "New Chat" })] }), recentChats.length > 0 && (_jsx("div", { style: {
                                     color: '#64748b',
                                     fontSize: '12px',
                                     marginBottom: '8px',
@@ -1853,7 +2000,45 @@ function StoryUIPanel() {
                                     const deleteBtn = e.currentTarget.querySelector('.delete-btn');
                                     if (deleteBtn)
                                         deleteBtn.style.opacity = '0';
-                                }, children: [_jsx("div", { style: STYLES.chatItemTitle, children: chat.title }), _jsx("div", { style: STYLES.chatItemTime, children: formatTime(chat.lastUpdated) }), _jsx("button", { className: "delete-btn", onClick: (e) => handleDeleteChat(chat.id, e), style: STYLES.deleteButton, title: "Delete chat", children: "\u2715" })] }, chat.id)))] })), !sidebarOpen && (_jsx("div", { style: { padding: '8px', display: 'flex', justifyContent: 'center' }, children: _jsx("button", { onClick: () => setSidebarOpen(true), style: {
+                                }, children: [_jsx("div", { style: STYLES.chatItemTitle, children: chat.title }), _jsx("div", { style: STYLES.chatItemTime, children: formatTime(chat.lastUpdated) }), _jsx("button", { className: "delete-btn", onClick: (e) => handleDeleteChat(chat.id, e), style: STYLES.deleteButton, title: "Delete chat", children: _jsxs("svg", { width: "12", height: "12", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [_jsx("line", { x1: "18", y1: "6", x2: "6", y2: "18" }), _jsx("line", { x1: "6", y1: "6", x2: "18", y2: "18" })] }) })] }, chat.id))), orphanStories.length > 0 && (_jsxs(_Fragment, { children: [_jsx("div", { style: {
+                                            color: '#64748b',
+                                            fontSize: '12px',
+                                            marginTop: '16px',
+                                            marginBottom: '8px',
+                                            fontWeight: '500',
+                                            textTransform: 'uppercase',
+                                            letterSpacing: '0.05em',
+                                        }, children: "Generated Files" }), orphanStories.map(story => (_jsxs("div", { style: {
+                                            ...STYLES.chatItem,
+                                            background: 'rgba(251, 191, 36, 0.1)',
+                                            borderLeft: '3px solid rgba(251, 191, 36, 0.5)',
+                                        }, onMouseEnter: (e) => {
+                                            e.currentTarget.style.background = 'rgba(251, 191, 36, 0.15)';
+                                            const deleteBtn = e.currentTarget.querySelector('.delete-orphan-btn');
+                                            if (deleteBtn)
+                                                deleteBtn.style.opacity = '1';
+                                        }, onMouseLeave: (e) => {
+                                            e.currentTarget.style.background = 'rgba(251, 191, 36, 0.1)';
+                                            const deleteBtn = e.currentTarget.querySelector('.delete-orphan-btn');
+                                            if (deleteBtn)
+                                                deleteBtn.style.opacity = '0';
+                                        }, children: [_jsx("div", { style: STYLES.chatItemTitle, children: story.title }), _jsx("div", { style: { ...STYLES.chatItemTime, fontSize: '11px' }, children: story.fileName }), _jsx("button", { className: "delete-orphan-btn", onClick: async (e) => {
+                                                    e.stopPropagation();
+                                                    try {
+                                                        const response = await fetch(`${STORIES_API}/${story.id}`, {
+                                                            method: 'DELETE',
+                                                        });
+                                                        if (response.ok) {
+                                                            setOrphanStories(prev => prev.filter(s => s.id !== story.id));
+                                                        }
+                                                        else {
+                                                            console.error('Failed to delete orphan story');
+                                                        }
+                                                    }
+                                                    catch (err) {
+                                                        console.error('Error deleting orphan story:', err);
+                                                    }
+                                                }, style: STYLES.deleteButton, title: "Delete generated file", children: _jsxs("svg", { width: "12", height: "12", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [_jsx("line", { x1: "18", y1: "6", x2: "6", y2: "18" }), _jsx("line", { x1: "6", y1: "6", x2: "18", y2: "18" })] }) })] }, story.id)))] }))] })), !sidebarOpen && (_jsx("div", { style: { padding: '8px', display: 'flex', justifyContent: 'center' }, children: _jsx("button", { onClick: () => setSidebarOpen(true), style: {
                                 ...STYLES.sidebarToggle,
                                 width: '38px',
                                 height: '38px',
@@ -1866,33 +2051,34 @@ function StoryUIPanel() {
                             }, onMouseLeave: (e) => {
                                 e.currentTarget.style.transform = 'scale(1)';
                                 e.currentTarget.style.background = '#3b82f6';
-                            }, children: _jsx("span", { style: { lineHeight: '0.4', display: 'inline-block', height: '10px' }, children: "\u2630" }) }) }))] }), _jsxs("div", { style: { ...STYLES.mainContent, position: 'relative' }, onDragEnter: handleDragEnter, onDragLeave: handleDragLeave, onDragOver: handleDragOver, onDrop: handleDrop, children: [isDragging && (_jsx("div", { style: STYLES.dropOverlay, children: _jsxs("div", { style: STYLES.dropOverlayText, children: [_jsx("svg", { width: 24, height: 24, viewBox: "0 0 24 24", fill: "currentColor", children: _jsx("path", { d: "M21 19V5c0-1.1-.9-2-2-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2zM8.5 13.5l2.5 3.01L14.5 12l4.5 6H5l3.5-4.5z" }) }), "Drop images here"] }) })), _jsxs("div", { style: STYLES.chatHeader, children: [_jsx("h1", { style: {
-                                    fontSize: '24px',
+                            }, children: _jsxs("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [_jsx("line", { x1: "3", y1: "6", x2: "21", y2: "6" }), _jsx("line", { x1: "3", y1: "12", x2: "21", y2: "12" }), _jsx("line", { x1: "3", y1: "18", x2: "21", y2: "18" })] }) }) }))] }), _jsxs("div", { style: { ...STYLES.mainContent, position: 'relative' }, onDragEnter: handleDragEnter, onDragLeave: handleDragLeave, onDragOver: handleDragOver, onDrop: handleDrop, children: [isDragging && (_jsx("div", { style: STYLES.dropOverlay, children: _jsxs("div", { style: STYLES.dropOverlayText, children: [_jsx("svg", { width: 24, height: 24, viewBox: "0 0 24 24", fill: "currentColor", children: _jsx("path", { d: "M21 19V5c0-1.1-.9-2-2-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2zM8.5 13.5l2.5 3.01L14.5 12l4.5 6H5l3.5-4.5z" }) }), "Drop images here"] }) })), _jsxs("div", { style: STYLES.chatHeader, children: [_jsx("h1", { style: {
+                                    fontSize: '22px',
                                     margin: 0,
-                                    fontWeight: '600',
+                                    fontWeight: '700',
                                     background: 'linear-gradient(135deg, #60a5fa 0%, #3b82f6 100%)',
                                     WebkitBackgroundClip: 'text',
                                     WebkitTextFillColor: 'transparent',
-                                    display: 'inline-block'
-                                }, children: "Story UI" }), _jsx("p", { style: { fontSize: '14px', margin: '4px 0 0 0', color: '#94a3b8' }, children: "Generate Storybook stories with AI" }), _jsxs("div", { style: {
+                                    display: 'inline-block',
+                                    letterSpacing: '-0.02em'
+                                }, children: "Story UI" }), _jsx("p", { style: { fontSize: '14px', margin: '6px 0 0 0', color: '#94a3b8', fontWeight: '500' }, children: "Generate Storybook stories with AI" }), _jsxs("div", { style: {
                                     display: 'flex',
                                     alignItems: 'center',
-                                    gap: '8px',
-                                    marginTop: '8px',
-                                    fontSize: '12px'
+                                    gap: '6px',
+                                    marginTop: '10px',
+                                    fontSize: '11px'
                                 }, children: [_jsx("div", { style: {
-                                            width: '8px',
-                                            height: '8px',
+                                            width: '6px',
+                                            height: '6px',
                                             borderRadius: '50%',
                                             backgroundColor: connectionStatus.connected ? '#10b981' : '#f87171'
-                                        } }), _jsx("span", { style: { color: connectionStatus.connected ? '#10b981' : '#f87171' }, children: connectionStatus.connected
+                                        } }), _jsx("span", { className: `story-ui-status ${connectionStatus.connected ? 'story-ui-status-connected' : 'story-ui-status-disconnected'}`, style: { color: connectionStatus.connected ? '#10b981' : '#ef4444', fontWeight: '400' }, children: connectionStatus.connected
                                             ? `Connected to ${getConnectionDisplayText()}`
                                             : `Disconnected: ${connectionStatus.error || 'Server not running'}` })] }), connectionStatus.connected && availableProviders.length > 0 && (_jsxs("div", { style: {
                                     display: 'flex',
                                     gap: '12px',
                                     marginTop: '12px',
                                     flexWrap: 'wrap'
-                                }, children: [_jsxs("div", { style: { display: 'flex', alignItems: 'center', gap: '6px' }, children: [_jsx("label", { style: { fontSize: '12px', color: '#94a3b8' }, children: "Provider:" }), _jsx("select", { value: selectedProvider, onChange: (e) => {
+                                }, children: [_jsxs("div", { style: { display: 'flex', alignItems: 'center', gap: '8px' }, children: [_jsx("label", { style: { fontSize: '12px', color: '#94a3b8', fontWeight: '500' }, children: "Provider:" }), _jsx("select", { value: selectedProvider, onChange: (e) => {
                                                     const newProvider = e.target.value;
                                                     setSelectedProvider(newProvider);
                                                     // Reset model to first available for new provider
@@ -1908,7 +2094,7 @@ function StoryUIPanel() {
                                                     padding: '4px 8px',
                                                     fontSize: '12px',
                                                     cursor: 'pointer'
-                                                }, children: availableProviders.map(p => (_jsx("option", { value: p.type, children: p.name }, p.type))) })] }), _jsxs("div", { style: { display: 'flex', alignItems: 'center', gap: '6px' }, children: [_jsx("label", { style: { fontSize: '12px', color: '#94a3b8' }, children: "Model:" }), _jsx("select", { value: selectedModel, onChange: (e) => setSelectedModel(e.target.value), style: {
+                                                }, children: availableProviders.map(p => (_jsx("option", { value: p.type, children: p.name }, p.type))) })] }), _jsxs("div", { style: { display: 'flex', alignItems: 'center', gap: '8px' }, children: [_jsx("label", { style: { fontSize: '12px', color: '#94a3b8', fontWeight: '500' }, children: "Model:" }), _jsx("select", { value: selectedModel, onChange: (e) => setSelectedModel(e.target.value), style: {
                                                     background: '#1e293b',
                                                     border: '1px solid #334155',
                                                     borderRadius: '6px',
@@ -1919,9 +2105,9 @@ function StoryUIPanel() {
                                                     maxWidth: '200px'
                                                 }, children: availableProviders
                                                     .find(p => p.type === selectedProvider)
-                                                    ?.models.map(model => (_jsx("option", { value: model, children: model }, model))) })] })] }))] }), _jsxs("div", { style: STYLES.chatContainer, children: [error && (_jsx("div", { style: STYLES.errorMessage, children: error })), conversation.length === 0 && !loading && (_jsxs("div", { style: STYLES.emptyState, children: [_jsx("div", { style: STYLES.emptyStateTitle, children: "Start a new conversation" }), _jsx("div", { style: STYLES.emptyStateSubtitle, children: "Describe the UI component you'd like to create" })] })), conversation.map((msg, i) => (_jsx("div", { style: STYLES.messageContainer, children: _jsxs("div", { style: msg.role === 'user' ? STYLES.userMessage : STYLES.aiMessage, children: [msg.role === 'ai' ? renderMarkdown(msg.content) : msg.content, msg.role === 'user' && msg.attachedImages && msg.attachedImages.length > 0 && (_jsx("div", { style: STYLES.userMessageImages, children: msg.attachedImages.map((img) => (_jsx("img", { src: img.base64
+                                                    ?.models.map(model => (_jsx("option", { value: model, children: getModelDisplayName(model) }, model))) })] })] }))] }), _jsxs("div", { style: STYLES.chatContainer, children: [error && (_jsx("div", { style: STYLES.errorMessage, children: error })), conversation.length === 0 && !loading && (_jsxs("div", { style: STYLES.emptyState, children: [_jsx("div", { style: STYLES.emptyStateTitle, children: "Start a new conversation" }), _jsx("div", { style: STYLES.emptyStateSubtitle, children: "Describe the UI component you'd like to create" })] })), conversation.map((msg, i) => (_jsx("div", { style: STYLES.messageContainer, children: _jsxs("div", { className: `story-ui-message ${msg.role === 'user' ? 'story-ui-user-message' : 'story-ui-ai-message'}`, style: msg.role === 'user' ? STYLES.userMessage : STYLES.aiMessage, children: [msg.role === 'ai' ? renderMarkdown(msg.content) : msg.content, msg.role === 'user' && msg.attachedImages && msg.attachedImages.length > 0 && (_jsx("div", { style: STYLES.userMessageImages, children: msg.attachedImages.map((img) => (_jsx("img", { src: img.base64
                                                     ? `data:${img.mediaType || 'image/png'};base64,${img.base64}`
-                                                    : img.preview, alt: "attached", style: STYLES.userMessageImage }, img.id))) }))] }) }, i))), loading && (_jsx("div", { style: STYLES.messageContainer, children: streamingState ? (_jsx(StreamingProgressMessage, { streamingData: streamingState })) : (_jsxs("div", { style: STYLES.loadingMessage, children: [_jsx("span", { children: "Generating story" }), _jsx("span", { className: "loading-dots" })] })) })), _jsx("div", { ref: chatEndRef })] }), _jsx("input", { ref: fileInputRef, type: "file", accept: "image/*", multiple: true, style: { display: 'none' }, onChange: handleFileSelect }), attachedImages.length > 0 && (_jsxs("div", { style: STYLES.imagePreviewContainer, children: [_jsxs("span", { style: STYLES.imagePreviewLabel, children: [_jsx("svg", { width: 14, height: 14, viewBox: "0 0 24 24", fill: "currentColor", children: _jsx("path", { d: "M21 19V5c0-1.1-.9-2-2-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2zM8.5 13.5l2.5 3.01L14.5 12l4.5 6H5l3.5-4.5z" }) }), attachedImages.length, " image", attachedImages.length > 1 ? 's' : '', " attached"] }), attachedImages.map((img) => (_jsxs("div", { style: STYLES.imagePreviewItem, children: [_jsx("img", { src: img.preview, alt: "preview", style: STYLES.imagePreviewImg }), _jsx("button", { type: "button", style: STYLES.imageRemoveButton, onClick: () => removeAttachedImage(img.id), title: "Remove image", children: "\u00D7" })] }, img.id)))] })), _jsxs("form", { onSubmit: handleSend, style: {
+                                                    : img.preview, alt: "attached", style: STYLES.userMessageImage }, img.id))) }))] }) }, i))), loading && (_jsx("div", { style: STYLES.messageContainer, children: streamingState ? (_jsx(StreamingProgressMessage, { streamingData: streamingState })) : (_jsxs("div", { style: STYLES.loadingMessage, children: [_jsx("span", { children: "Generating story" }), _jsx("span", { className: "loading-dots" })] })) })), _jsx("div", { ref: chatEndRef })] }), _jsx("input", { ref: fileInputRef, type: "file", accept: "image/*", multiple: true, style: { display: 'none' }, onChange: handleFileSelect }), attachedImages.length > 0 && (_jsxs("div", { style: STYLES.imagePreviewContainer, children: [_jsxs("span", { style: STYLES.imagePreviewLabel, children: [_jsx("svg", { width: 14, height: 14, viewBox: "0 0 24 24", fill: "currentColor", children: _jsx("path", { d: "M21 19V5c0-1.1-.9-2-2-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2zM8.5 13.5l2.5 3.01L14.5 12l4.5 6H5l3.5-4.5z" }) }), attachedImages.length, " image", attachedImages.length > 1 ? 's' : '', " attached"] }), attachedImages.map((img) => (_jsxs("div", { style: STYLES.imagePreviewItem, children: [_jsx("img", { src: img.preview, alt: "preview", style: STYLES.imagePreviewImg }), _jsx("button", { type: "button", style: STYLES.imageRemoveButton, onClick: () => removeAttachedImage(img.id), title: "Remove image", children: _jsxs("svg", { width: "12", height: "12", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [_jsx("line", { x1: "18", y1: "6", x2: "6", y2: "18" }), _jsx("line", { x1: "6", y1: "6", x2: "18", y2: "18" })] }) })] }, img.id)))] })), _jsxs("form", { onSubmit: handleSend, style: {
                             ...STYLES.inputForm,
                             ...(attachedImages.length > 0 ? {
                                 marginTop: 0,
@@ -1955,20 +2141,22 @@ function StoryUIPanel() {
                                 } }), _jsxs("button", { type: "submit", disabled: loading || (!input.trim() && attachedImages.length === 0), style: {
                                     ...STYLES.sendButton,
                                     ...(loading || (!input.trim() && attachedImages.length === 0) ? {
-                                        opacity: 0.5,
+                                        opacity: 0.4,
                                         cursor: 'not-allowed',
-                                        background: '#6b7280',
+                                        background: '#64748b',
                                         boxShadow: 'none'
                                     } : {})
                                 }, onMouseEnter: (e) => {
                                     if (!loading && (input.trim() || attachedImages.length > 0)) {
-                                        e.currentTarget.style.transform = 'scale(1.05)';
-                                        e.currentTarget.style.boxShadow = '0 4px 16px rgba(16, 185, 129, 0.4)';
+                                        e.currentTarget.style.background = '#2563eb';
+                                        e.currentTarget.style.boxShadow = '0 4px 16px rgba(59, 130, 246, 0.5)';
                                     }
                                 }, onMouseLeave: (e) => {
-                                    e.currentTarget.style.transform = 'scale(1)';
-                                    e.currentTarget.style.boxShadow = '0 2px 8px rgba(16, 185, 129, 0.3)';
-                                }, children: [_jsx("span", { children: "Send" }), _jsx("svg", { width: 16, height: 16, viewBox: "0 0 24 24", fill: "currentColor", children: _jsx("path", { d: "M2.01 21L23 12 2.01 3 2 10l15 2-15 2z" }) })] })] })] })] }));
+                                    if (!loading && (input.trim() || attachedImages.length > 0)) {
+                                        e.currentTarget.style.background = '#3b82f6';
+                                        e.currentTarget.style.boxShadow = '0 2px 8px rgba(59, 130, 246, 0.35)';
+                                    }
+                                }, children: [_jsx("svg", { width: 18, height: 18, viewBox: "0 0 24 24", fill: "currentColor", children: _jsx("path", { d: "M2.01 21L23 12 2.01 3 2 10l15 2-15 2z" }) }), _jsx("span", { children: "Send" })] })] })] })] }));
 }
 export default StoryUIPanel;
 export { StoryUIPanel };