@tpitre/story-ui 1.7.1 → 2.0.1

package/templates/StoryUI/StoryUIPanel.tsx

@@ -1,56 +1,224 @@
 import React, { useState, useRef, useEffect } from 'react';
 
-// Simple port configuration - defaults to 4001, configurable via window.STORY_UI_MCP_PORT
-const MCP_PORT = (window as any).STORY_UI_MCP_PORT || '4001';
-const MCP_API = `http://localhost:${MCP_PORT}/mcp/generate-story`;
-const SYNC_API = `http://localhost:${MCP_PORT}/mcp/sync`;
-const LOCAL_STORAGE_KEY = 'story_ui_chat_history_v2'; // Updated version for sync
-const MAX_RECENT_CHATS = 20;
-
+// Message type
 interface Message {
   role: 'user' | 'ai';
   content: string;
 }
 
+// Session type
 interface ChatSession {
-  id: string; // fileName or hash
+  id: string;
   title: string;
   fileName: string;
   conversation: Message[];
   lastUpdated: number;
-  isValid?: boolean; // Whether the story still exists
 }
 
-// Professional, self-contained styles - no external dependencies
-const STYLES = {
-  // Typography - Professional font stack like ChatGPT
-  fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif',
+// Determine the MCP API port.
+// 1. Check multiple possible environment variables/overrides in order of preference
+// 2. Check VITE_STORY_UI_PORT from environment
+// 3. Check window.__STORY_UI_PORT__ set by host application
+// 4. Otherwise fall back to the default 4001.
+const getApiPort = () => {
+  // Check for Vite environment variable
+  const vitePort = (import.meta as any).env?.VITE_STORY_UI_PORT;
+  if (vitePort) return String(vitePort);
+  
+  // Check for window override (legacy support)
+  const windowOverride = (window as any).__STORY_UI_PORT__;
+  if (windowOverride) return String(windowOverride);
+  
+  // Check for MCP port override set by stories file
+  const mcpOverride = (window as any).STORY_UI_MCP_PORT;
+  if (mcpOverride) return String(mcpOverride);
+  
+  return '4001';
+};
+
+const MCP_API = `http://localhost:${getApiPort()}/story-ui/generate`;
+const STORIES_API = `http://localhost:${getApiPort()}/story-ui/stories`;
+const DELETE_API_BASE = `http://localhost:${getApiPort()}/story-ui/stories`;
+const STORAGE_KEY = `story-ui-chats-${window.location.port}`;
+const MAX_RECENT_CHATS = 20;
+
+// Load from localStorage
+const loadChats = (): ChatSession[] => {
+  try {
+    const stored = localStorage.getItem(STORAGE_KEY);
+    if (!stored) return [];
+    const chats = JSON.parse(stored) as ChatSession[];
+    // Sort by lastUpdated and limit
+    return chats
+      .sort((a, b) => b.lastUpdated - a.lastUpdated)
+      .slice(0, MAX_RECENT_CHATS);
+  } catch (e) {
+    console.error('Failed to load chats:', e);
+    return [];
+  }
+};
+
+// Save to localStorage
+const saveChats = (chats: ChatSession[]) => {
+  try {
+    // Keep only the most recent chats
+    const toSave = chats
+      .sort((a, b) => b.lastUpdated - a.lastUpdated)
+      .slice(0, MAX_RECENT_CHATS);
+    localStorage.setItem(STORAGE_KEY, JSON.stringify(toSave));
+  } catch (e) {
+    console.error('Failed to save chats:', e);
+  }
+};
+
+// Sync with memory stories from backend
+const syncWithActualStories = async (): Promise<ChatSession[]> => {
+  try {
+    const response = await fetch(STORIES_API);
+    if (!response.ok) {
+      console.error('Failed to fetch stories from backend');
+      return loadChats();
+    }
+
+    // Check if response is JSON
+    const contentType = response.headers.get('content-type');
+    if (!contentType || !contentType.includes('application/json')) {
+      console.error('Server returned non-JSON response, likely server not running or wrong port');
+      return loadChats();
+    }
+
+    const data = await response.json();
+    const memoryStories = data.stories || [];
+
+    // Load existing chats
+    const existingChats = loadChats();
+
+    // Create a map for quick lookup
+    const chatMap = new Map<string, ChatSession>();
+    existingChats.forEach(chat => {
+      chatMap.set(chat.id, chat);
+      if (chat.fileName) {
+        chatMap.set(chat.fileName, chat);
+      }
+    });
+
+    // Update or add memory stories
+    memoryStories.forEach((story: any) => {
+      const storyId = story.storyId || story.fileName;
+      const existingChat = chatMap.get(storyId) || chatMap.get(story.fileName);
+
+      if (existingChat) {
+        // Update existing chat with latest info
+        existingChat.title = story.title || existingChat.title;
+        existingChat.fileName = story.fileName || existingChat.fileName;
+        existingChat.lastUpdated = new Date(story.updatedAt || story.createdAt).getTime();
+      } else {
+        // Create new chat from memory story
+        const newChat: ChatSession = {
+          id: storyId,
+          title: story.title || story.fileName,
+          fileName: story.fileName,
+          conversation: [{
+            role: 'user',
+            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.`
+          }],
+          lastUpdated: new Date(story.updatedAt || story.createdAt).getTime()
+        };
+        chatMap.set(storyId, newChat);
+      }
+    });
+
+    // Convert back to array and save
+    const syncedChats = Array.from(chatMap.values());
+    saveChats(syncedChats);
+
+    return syncedChats;
+  } catch (error) {
+    console.error('Error syncing with backend:', error);
+    return loadChats();
+  }
+};
+
+// Delete story and chat
+const deleteStoryAndChat = async (chatId: string): Promise<boolean> => {
+  try {
+    // First try to delete from backend
+    const response = await fetch(`${DELETE_API_BASE}/${chatId}`, {
+      method: 'DELETE',
+      headers: { 'Content-Type': 'application/json' }
+    });
+
+    if (!response.ok) {
+      console.error('Failed to delete story from backend');
+      return false;
+    }
+
+    // Check if response is JSON
+    const contentType = response.headers.get('content-type');
+    if (!contentType || !contentType.includes('application/json')) {
+      console.error('Server returned non-JSON response, likely server not running or wrong port');
+      return false;
+    }
+
+    // Then remove from local storage
+    const chats = loadChats().filter(chat => chat.id !== chatId);
+    saveChats(chats);
 
-  // Base container with CSS reset
+    return true;
+  } catch (error) {
+    console.error('Error deleting story:', error);
+    return false;
+  }
+};
+
+// Test connection to MCP server
+const testMCPConnection = async (): Promise<{ connected: boolean; error?: string }> => {
+  try {
+    const response = await fetch(STORIES_API, {
+      method: 'GET',
+      headers: { 'Content-Type': 'application/json' },
+    });
+
+    if (!response.ok) {
+      return { connected: false, error: `HTTP ${response.status}: ${response.statusText}` };
+    }
+
+    const contentType = response.headers.get('content-type');
+    if (!contentType || !contentType.includes('application/json')) {
+      return { connected: false, error: 'Server returned non-JSON response (likely wrong port or server not running)' };
+    }
+
+    return { connected: true };
+  } catch (error) {
+    return { connected: false, error: error instanceof Error ? error.message : 'Unknown error' };
+  }
+};
+
+// Component styles
+const STYLES = {
   container: {
-    fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif',
-    fontSize: '14px',
-    lineHeight: '1.5',
-    color: '#ffffff',
-    margin: 0,
-    padding: 0,
-    boxSizing: 'border-box' as const,
     display: 'flex',
-    height: '600px',
-    background: 'linear-gradient(135deg, #1a1a2e 0%, #16213e 100%)',
-    boxShadow: '0 8px 32px rgba(0, 0, 0, 0.3)',
+    flexDirection: 'row' as const,
+    fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif',
+    height: '100vh',
     overflow: 'hidden',
-    border: '1px solid rgba(255, 255, 255, 0.1)',
+    background: 'linear-gradient(135deg, #1e293b 0%, #334155 100%)',
+    color: '#e2e8f0',
   },
 
-  // Sidebar styles
+  // Sidebar
   sidebar: {
     width: '280px',
-    background: 'linear-gradient(180deg, #0f172a 0%, #1e293b 100%)',
+    background: 'rgba(255, 255, 255, 0.05)',
     borderRight: '1px solid rgba(255, 255, 255, 0.1)',
     display: 'flex',
     flexDirection: 'column' as const,
-    transition: 'all 0.3s cubic-bezier(0.4, 0, 0.2, 1)',
+    backdropFilter: 'blur(10px)',
+    transition: 'width 0.3s ease',
+    position: 'relative' as const,
   },
 
   sidebarCollapsed: {
@@ -58,96 +226,105 @@ const STYLES = {
   },
 
   sidebarToggle: {
-    fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif',
+    width: '100%',
+    padding: '10px 16px',
     background: 'linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%)',
-    color: '#ffffff',
+    color: 'white',
     border: 'none',
     borderRadius: '8px',
-    margin: '16px',
-    padding: '12px 16px',
-    fontWeight: '600',
     fontSize: '14px',
+    fontWeight: '500',
     cursor: 'pointer',
+    marginBottom: '8px',
     transition: 'all 0.2s ease',
+    boxShadow: '0 2px 8px rgba(59, 130, 246, 0.3)',
     display: 'flex',
     alignItems: 'center',
     justifyContent: 'center',
-    boxShadow: '0 2px 8px rgba(59, 130, 246, 0.3)',
+    gap: '8px',
   },
 
   newChatButton: {
-    fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif',
     width: '100%',
-    padding: '12px 16px',
-    marginBottom: '12px',
-    borderRadius: '8px',
-    border: '1px solid rgba(59, 130, 246, 0.3)',
+    padding: '10px 16px',
     background: 'linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%)',
-    color: '#ffffff',
-    fontWeight: '600',
+    color: 'white',
+    border: 'none',
+    borderRadius: '8px',
     fontSize: '14px',
+    fontWeight: '500',
     cursor: 'pointer',
+    marginBottom: '16px',
     transition: 'all 0.2s ease',
     boxShadow: '0 2px 8px rgba(59, 130, 246, 0.2)',
   },
 
   chatItem: {
-    fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif',
-    width: '100%',
-    textAlign: 'left' as const,
-    padding: '12px 40px 12px 16px',
+    padding: '12px 16px',
+    marginBottom: '8px',
+    background: 'rgba(255, 255, 255, 0.08)',
     borderRadius: '8px',
-    border: '1px solid transparent',
-    background: 'rgba(255, 255, 255, 0.05)',
-    color: '#e2e8f0',
-    fontWeight: '400',
-    fontSize: '13px',
     cursor: 'pointer',
-    overflow: 'hidden',
-    textOverflow: 'ellipsis',
-    whiteSpace: 'nowrap' as const,
     transition: 'all 0.2s ease',
-    marginBottom: '4px',
+    position: 'relative' as const,
+    paddingRight: '40px',
   },
 
   chatItemActive: {
-    border: '1px solid rgba(59, 130, 246, 0.5)',
-    background: 'rgba(59, 130, 246, 0.1)',
-    color: '#60a5fa',
+    background: 'rgba(59, 130, 246, 0.2)',
+    borderLeft: '3px solid #3b82f6',
+  },
+
+  chatItemTitle: {
+    fontSize: '14px',
     fontWeight: '500',
+    marginBottom: '4px',
+    whiteSpace: 'nowrap' as const,
+    overflow: 'hidden',
+    textOverflow: 'ellipsis',
+  },
+
+  chatItemTime: {
+    fontSize: '12px',
+    color: '#94a3b8',
   },
 
-  // Main chat area
-  mainArea: {
+  deleteButton: {
+    position: 'absolute' as const,
+    right: '8px',
+    top: '50%',
+    transform: 'translateY(-50%)',
+    background: 'rgba(239, 68, 68, 0.8)',
+    color: 'white',
+    border: 'none',
+    borderRadius: '4px',
+    padding: '4px 8px',
+    fontSize: '12px',
+    cursor: 'pointer',
+    opacity: 0,
+    transition: 'opacity 0.2s ease',
+  },
+
+  // Main content
+  mainContent: {
     flex: 1,
     display: 'flex',
     flexDirection: 'column' as const,
-    background: 'rgba(255, 255, 255, 0.02)',
+    overflow: 'hidden',
   },
 
-  header: {
-    fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif',
-    color: '#f8fafc',
-    margin: '0',
-    padding: '24px 24px 16px 24px',
-    fontSize: '20px',
-    fontWeight: '600',
-    letterSpacing: '-0.01em',
-    background: 'linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%)',
-    WebkitBackgroundClip: 'text',
-    WebkitTextFillColor: 'transparent',
-    backgroundClip: 'text',
+  chatHeader: {
+    padding: '20px 24px',
+    borderBottom: '1px solid rgba(255, 255, 255, 0.1)',
+    background: 'rgba(255, 255, 255, 0.05)',
+    backdropFilter: 'blur(10px)',
   },
 
   chatContainer: {
     flex: 1,
+    padding: '24px',
     overflowY: 'auto' as const,
-    background: 'rgba(0, 0, 0, 0.2)',
-    borderRadius: '12px',
-    padding: '20px',
-    margin: '0 24px 16px 24px',
-    border: '1px solid rgba(255, 255, 255, 0.1)',
-    backdropFilter: 'blur(10px)',
+    scrollBehavior: 'smooth' as const,
   },
 
   emptyState: {
@@ -249,222 +426,118 @@ const STYLES = {
     border: 'none',
     background: 'linear-gradient(135deg, #10b981 0%, #059669 100%)',
     color: '#ffffff',
-    fontWeight: '600',
     fontSize: '14px',
+    fontWeight: '500',
     cursor: 'pointer',
+    display: 'flex',
+    alignItems: 'center',
+    gap: '6px',
     transition: 'all 0.2s ease',
     boxShadow: '0 2px 8px rgba(16, 185, 129, 0.3)',
   },
 
-  sendButtonDisabled: {
-    background: 'rgba(107, 114, 128, 0.5)',
-    cursor: 'not-allowed',
-    boxShadow: 'none',
-  },
-
   errorMessage: {
-    color: '#ef4444',
-    margin: '0 24px 16px 24px',
+    background: 'rgba(248, 113, 113, 0.1)',
+    color: '#f87171',
     padding: '12px 16px',
-    background: 'rgba(239, 68, 68, 0.1)',
     borderRadius: '8px',
-    border: '1px solid rgba(239, 68, 68, 0.3)',
-    fontSize: '13px',
-    fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif',
+    fontSize: '14px',
+    marginBottom: '16px',
+    border: '1px solid rgba(248, 113, 113, 0.3)',
   },
 
-  deleteButton: {
-    position: 'absolute' as const,
-    right: '8px',
-    top: '50%',
-    transform: 'translateY(-50%)',
-    width: '20px',
-    height: '20px',
-    borderRadius: '4px',
-    border: 'none',
-    background: 'rgba(239, 68, 68, 0.8)',
-    color: '#ffffff',
-    fontSize: '12px',
-    fontWeight: 'bold',
-    cursor: 'pointer',
-    display: 'flex',
-    alignItems: 'center',
-    justifyContent: 'center',
-    transition: 'all 0.2s ease',
-    zIndex: 10,
-    fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif',
+  loadingDots: {
+    display: 'inline-block',
+    animation: 'loadingDots 1.4s infinite',
   },
-};
-
-function loadChats(): ChatSession[] {
-  try {
-    const raw = localStorage.getItem(LOCAL_STORAGE_KEY);
-    if (!raw) return [];
-    return JSON.parse(raw) as ChatSession[];
-  } catch {
-    return [];
-  }
-}
 
-function saveChats(chats: ChatSession[]) {
-  localStorage.setItem(LOCAL_STORAGE_KEY, JSON.stringify(chats));
-}
-
-function removeDuplicateChats(chats: ChatSession[]): ChatSession[] {
-  const seen = new Set<string>();
-  const seenTitles = new Map<string, ChatSession>();
-
-  return chats.filter(chat => {
-    // Remove exact ID duplicates
-    if (seen.has(chat.id)) {
-      return false;
-    }
-    seen.add(chat.id);
-
-    // For title duplicates, keep the most recent one
-    const existingChat = seenTitles.get(chat.title);
-    if (existingChat) {
-      if (chat.lastUpdated > existingChat.lastUpdated) {
-        // Remove the older chat and keep this newer one
-        const oldIndex = chats.findIndex(c => c.id === existingChat.id);
-        if (oldIndex !== -1) {
-          seen.delete(existingChat.id);
-        }
-        seenTitles.set(chat.title, chat);
-        return true;
-      } else {
-        // Keep the existing newer chat, skip this one
-        return false;
-      }
-    } else {
-      seenTitles.set(chat.title, chat);
-      return true;
-    }
-  });
-}
-
-async function syncWithActualStories(): Promise<ChatSession[]> {
-  try {
-    // Get actual stories from the server
-    const response = await fetch(`${SYNC_API}/stories`);
-    const data = await response.json();
-
-    if (!data.success) {
-      console.warn('Failed to sync with actual stories:', data.error);
-      return loadChats();
-    }
-
-    const actualStories = data.stories;
-    const existingChats = loadChats();
-
-    // More robust matching: check multiple ID formats to prevent duplicates
-    const validChats = existingChats.filter(chat => {
-      return actualStories.some((story: { id: string; fileName: string }) => {
-        // Direct ID match
-        if (story.id === chat.id) return true;
-
-        // Filename match
-        if (story.fileName === chat.fileName) return true;
-
-        // Check if chat ID matches story filename (old format)
-        if (story.fileName === chat.id) return true;
-
-        // Check if story ID matches chat filename (common mismatch)
-        if (story.id === chat.fileName) return true;
-
-        return false;
-      });
-    });
-
-    // Only add stories that truly don't have chat sessions after robust checking
-    const newChats: ChatSession[] = actualStories
-      .filter((story: { id: string; fileName: string }) => {
-        return !existingChats.some(chat => {
-          // Check all possible matches to avoid creating duplicates
-          return chat.id === story.id ||
-                 chat.fileName === story.fileName ||
-                 chat.id === story.fileName ||
-                 chat.fileName === story.id;
-        });
-      })
-      .map((story: { id: string; title: string; fileName: string; createdAt: string }) => ({
-        id: story.id,
-        title: story.title,
-        fileName: story.fileName,
-        conversation: [
-          { role: 'ai' as const, content: `Story "${story.title}" was found.\nGenerated: ${new Date(story.createdAt).toLocaleString()}` }
-        ],
-        lastUpdated: new Date(story.createdAt).getTime(),
-        isValid: true
-      }));
-
-    // Mark all chats as valid and combine
-    const combinedChats = [...validChats.map(chat => ({ ...chat, isValid: true })), ...newChats];
-
-    // Remove any duplicates that might have been created
-    const syncedChats = removeDuplicateChats(combinedChats);
-
-    // Save the synchronized chats
-    saveChats(syncedChats);
+  '@keyframes loadingDots': {
+    '0%': { content: '""' },
+    '25%': { content: '"."' },
+    '50%': { content: '".."' },
+    '75%': { content: '"..."' },
+  },
 
-    console.log('Sync completed:', {
-      totalStories: actualStories.length,
-      existingChats: existingChats.length,
-      validChats: validChats.length,
-      newChats: newChats.length,
-      finalChats: syncedChats.length
-    });
+  codeBlock: {
+    background: '#1e293b',
+    padding: '12px 16px',
+    borderRadius: '8px',
+    fontFamily: 'Consolas, Monaco, "Andale Mono", "Ubuntu Mono", monospace',
+    fontSize: '13px',
+    lineHeight: '1.6',
+    overflowX: 'auto' as const,
+    marginTop: '8px',
+    border: '1px solid rgba(255, 255, 255, 0.1)',
+  },
+};
 
-    return syncedChats;
-  } catch (error) {
-    console.warn('Failed to sync with server:', error);
-    return loadChats();
+// Add custom style for loading animation
+const styleSheet = document.createElement('style');
+styleSheet.textContent = `
+  @keyframes loadingDots {
+    0%, 20% { content: "."; }
+    40% { content: ".."; }
+    60%, 100% { content: "..."; }
   }
-}
 
-async function deleteStoryAndChat(storyId: string): Promise<boolean> {
-  try {
-    const response = await fetch(`${SYNC_API}/stories/${storyId}`, {
-      method: 'DELETE'
-    });
-    const data = await response.json();
-
-    if (data.success) {
-      // Remove from localStorage
-      const chats = loadChats().filter(chat => chat.id !== storyId);
-      saveChats(chats);
-      return true;
-    }
-
-    return false;
-  } catch (error) {
-    console.warn('Failed to delete story:', error);
-    return false;
+  .loading-dots::after {
+    content: ".";
+    animation: loadingDots 1.4s infinite;
   }
-}
+`;
+document.head.appendChild(styleSheet);
+
+// Helper function to format timestamp
+const formatTime = (timestamp: number): string => {
+  const date = new Date(timestamp);
+  const now = new Date();
+  const diffMs = now.getTime() - date.getTime();
+  const diffMins = Math.floor(diffMs / 60000);
+  const diffHours = Math.floor(diffMs / 3600000);
+  const diffDays = Math.floor(diffMs / 86400000);
+
+  if (diffMins < 1) return 'just now';
+  if (diffMins < 60) return `${diffMins}m ago`;
+  if (diffHours < 24) return `${diffHours}h ago`;
+  if (diffDays < 7) return `${diffDays}d ago`;
+  return date.toLocaleDateString();
+};
 
-const StoryUIPanel: React.FC = () => {
-  const [conversation, setConversation] = useState<Message[]>([]);
+// Main component
+export function StoryUIPanel() {
   const [input, setInput] = useState('');
+  const [conversation, setConversation] = useState<Message[]>([]);
   const [loading, setLoading] = useState(false);
   const [error, setError] = useState<string | null>(null);
   const [recentChats, setRecentChats] = useState<ChatSession[]>([]);
   const [activeChatId, setActiveChatId] = useState<string | null>(null);
   const [activeTitle, setActiveTitle] = useState<string>('');
   const [sidebarOpen, setSidebarOpen] = useState(true);
+  const [connectionStatus, setConnectionStatus] = useState<{ connected: boolean; error?: string }>({ connected: false });
   const chatEndRef = useRef<HTMLDivElement | null>(null);
+  const inputRef = useRef<HTMLInputElement | null>(null);
 
   // Load and sync chats on mount
   useEffect(() => {
     const initializeChats = async () => {
-      const syncedChats = await syncWithActualStories();
-      const sortedChats = syncedChats.sort((a, b) => b.lastUpdated - a.lastUpdated).slice(0, MAX_RECENT_CHATS);
-      setRecentChats(sortedChats);
-
-      if (sortedChats.length > 0) {
-        setConversation(sortedChats[0].conversation);
-        setActiveChatId(sortedChats[0].id);
-        setActiveTitle(sortedChats[0].title);
+      // Test connection first
+      const connectionTest = await testMCPConnection();
+      setConnectionStatus(connectionTest);
+      
+      if (connectionTest.connected) {
+        const syncedChats = await syncWithActualStories();
+        const sortedChats = syncedChats.sort((a, b) => b.lastUpdated - a.lastUpdated).slice(0, MAX_RECENT_CHATS);
+        setRecentChats(sortedChats);
+
+        if (sortedChats.length > 0) {
+          setConversation(sortedChats[0].conversation);
+          setActiveChatId(sortedChats[0].id);
+          setActiveTitle(sortedChats[0].title);
+        }
+      } else {
+        // Load from local storage if server is not available
+        const localChats = loadChats();
+        setRecentChats(localChats);
       }
     };
 
@@ -483,6 +556,17 @@ const StoryUIPanel: React.FC = () => {
     if (!input.trim()) return;
     setError(null);
     setLoading(true);
+    
+    // Test connection before sending
+    const connectionTest = await testMCPConnection();
+    setConnectionStatus(connectionTest);
+    
+    if (!connectionTest.connected) {
+      setError(`Cannot connect to MCP server: ${connectionTest.error || 'Server not running'}`);
+      setLoading(false);
+      return;
+    }
+    
     const newConversation = [...conversation, { role: 'user' as const, content: input }];
     setConversation(newConversation);
     setInput('');
@@ -496,6 +580,14 @@ const StoryUIPanel: React.FC = () => {
           fileName: activeChatId || undefined,
         }),
       });
+      
+      // Check if response is JSON
+      const contentType = res.headers.get('content-type');
+      if (!contentType || !contentType.includes('application/json')) {
+        const text = await res.text();
+        throw new Error(`Server returned non-JSON response (likely server not running or wrong port). Response: ${text.substring(0, 200)}...`);
+      }
+      
       const data = await res.json();
       if (!res.ok || !data.success) throw new Error(data.error || 'Story generation failed');
 
@@ -518,6 +610,9 @@ const StoryUIPanel: React.FC = () => {
         responseMessage = `${statusIcon} Updated your story: "${data.title}"\n\nI've made the requested changes while keeping the same layout structure. You can view the updated component in Storybook.`;
       } else {
         responseMessage = `${statusIcon} Created new story: "${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 in the Docs tab.`;
+
+        // IMPORTANT: Add a note about refreshing for new stories
+        responseMessage += '\n\n💡 **Note**: If you don\'t see the story immediately, you may need to refresh your Storybook page (Cmd/Ctrl + R) for new stories to appear in the sidebar.';
       }
 
       // Add validation information if there are issues
@@ -707,26 +802,23 @@ const StoryUIPanel: React.FC = () => {
         ...STYLES.sidebar,
         ...(sidebarOpen ? {} : STYLES.sidebarCollapsed),
       }}>
-        <button
-          onClick={() => setSidebarOpen(o => !o)}
-          style={{
-            ...STYLES.sidebarToggle,
-            ...(sidebarOpen ? {} : { width: '40px', height: '40px', padding: '0' }),
-          }}
-          title={sidebarOpen ? 'Collapse sidebar' : 'Expand sidebar'}
-          onMouseEnter={(e) => {
-            e.currentTarget.style.transform = 'scale(1.05)';
-            e.currentTarget.style.boxShadow = '0 4px 16px rgba(59, 130, 246, 0.4)';
-          }}
-          onMouseLeave={(e) => {
-            e.currentTarget.style.transform = 'scale(1)';
-            e.currentTarget.style.boxShadow = '0 2px 8px rgba(59, 130, 246, 0.3)';
-          }}
-        >
-          {sidebarOpen ? '☰ Chats' : '☰'}
-        </button>
         {sidebarOpen && (
-          <div style={{ flex: 1, overflowY: 'auto', padding: '0 16px 16px 16px' }}>
+          <div style={{ flex: 1, overflowY: 'auto', padding: '16px' }}>
+            <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)';
+              }}
+              onMouseLeave={(e) => {
+                e.currentTarget.style.transform = 'translateY(0)';
+                e.currentTarget.style.boxShadow = '0 2px 8px rgba(59, 130, 246, 0.3)';
+              }}
+            >
+              ☰ Chats
+            </button>
             <button
               onClick={handleNewChat}
               style={STYLES.newChatButton}
@@ -749,79 +841,131 @@ const StoryUIPanel: React.FC = () => {
                 fontWeight: '500',
                 textTransform: 'uppercase',
                 letterSpacing: '0.05em',
-                fontFamily: STYLES.fontFamily,
               }}>
-                Recent
+                Recent Chats
               </div>
             )}
             {recentChats.map(chat => (
               <div
                 key={chat.id}
+                onClick={() => handleSelectChat(chat)}
                 style={{
-                  position: 'relative',
-                  marginBottom: '4px',
+                  ...STYLES.chatItem,
+                  ...(activeChatId === chat.id ? STYLES.chatItemActive : {}),
+                }}
+                onMouseEnter={(e) => {
+                  if (activeChatId !== chat.id) {
+                    e.currentTarget.style.background = 'rgba(255, 255, 255, 0.12)';
+                  }
+                  const deleteBtn = e.currentTarget.querySelector('.delete-btn') as HTMLElement;
+                  if (deleteBtn) deleteBtn.style.opacity = '1';
+                }}
+                onMouseLeave={(e) => {
+                  if (activeChatId !== chat.id) {
+                    e.currentTarget.style.background = 'rgba(255, 255, 255, 0.08)';
+                  }
+                  const deleteBtn = e.currentTarget.querySelector('.delete-btn') as HTMLElement;
+                  if (deleteBtn) deleteBtn.style.opacity = '0';
                 }}
               >
+                <div style={STYLES.chatItemTitle}>{chat.title}</div>
+                <div style={STYLES.chatItemTime}>{formatTime(chat.lastUpdated)}</div>
                 <button
-                  onClick={() => handleSelectChat(chat)}
-                  style={{
-                    ...STYLES.chatItem,
-                    ...(chat.id === activeChatId ? STYLES.chatItemActive : {}),
-                  }}
-                  title={chat.title}
-                  onMouseEnter={(e) => {
-                    if (chat.id !== activeChatId) {
-                      e.currentTarget.style.background = 'rgba(255, 255, 255, 0.1)';
-                    }
-                  }}
-                  onMouseLeave={(e) => {
-                    if (chat.id !== activeChatId) {
-                      e.currentTarget.style.background = 'rgba(255, 255, 255, 0.05)';
-                    }
-                  }}
-                >
-                  {chat.title}
-                </button>
-                <button
+                  className="delete-btn"
                   onClick={(e) => handleDeleteChat(chat.id, e)}
                   style={STYLES.deleteButton}
-                  title="Delete story and chat"
-                  onMouseEnter={(e) => {
-                    e.currentTarget.style.background = '#ef4444';
-                    e.currentTarget.style.transform = 'translateY(-50%) scale(1.1)';
-                  }}
-                  onMouseLeave={(e) => {
-                    e.currentTarget.style.background = 'rgba(239, 68, 68, 0.8)';
-                    e.currentTarget.style.transform = 'translateY(-50%) scale(1)';
-                  }}
+                  title="Delete chat"
                 >
-                  ×
+                  ✕
                 </button>
               </div>
             ))}
           </div>
         )}
+        {!sidebarOpen && (
+          <div style={{ padding: '16px' }}>
+            <button
+              onClick={() => setSidebarOpen(true)}
+              style={{
+                ...STYLES.sidebarToggle,
+                width: '40px',
+                height: '40px',
+                padding: '0',
+                fontSize: '16px',
+              }}
+              title="Expand sidebar"
+              onMouseEnter={(e) => {
+                e.currentTarget.style.transform = 'scale(1.05)';
+                e.currentTarget.style.boxShadow = '0 4px 16px rgba(59, 130, 246, 0.4)';
+              }}
+              onMouseLeave={(e) => {
+                e.currentTarget.style.transform = 'scale(1)';
+                e.currentTarget.style.boxShadow = '0 2px 8px rgba(59, 130, 246, 0.3)';
+              }}
+            >
+              ☰
+            </button>
+          </div>
+        )}
       </div>
 
-      {/* Main chat area */}
-      <div style={STYLES.mainArea}>
-        <h2 style={STYLES.header}>Story UI: AI Story Generator</h2>
+      {/* Main content */}
+      <div style={STYLES.mainContent}>
+        <div style={STYLES.chatHeader}>
+          <h1 style={{
+            fontSize: '24px',
+            margin: 0,
+            fontWeight: '600',
+            background: 'linear-gradient(135deg, #60a5fa 0%, #3b82f6 100%)',
+            WebkitBackgroundClip: 'text',
+            WebkitTextFillColor: 'transparent',
+            display: 'inline-block'
+          }}>
+            Story UI
+          </h1>
+          <p style={{ fontSize: '14px', margin: '4px 0 0 0', color: '#94a3b8' }}>
+            Generate Storybook stories with AI
+          </p>
+          <div style={{ 
+            display: 'flex', 
+            alignItems: 'center', 
+            gap: '8px', 
+            marginTop: '8px',
+            fontSize: '12px'
+          }}>
+            <div style={{
+              width: '8px',
+              height: '8px',
+              borderRadius: '50%',
+              backgroundColor: connectionStatus.connected ? '#10b981' : '#f87171'
+            }}></div>
+            <span style={{ color: connectionStatus.connected ? '#10b981' : '#f87171' }}>
+              {connectionStatus.connected 
+                ? `Connected to MCP server (port ${getApiPort()})`
+                : `Disconnected: ${connectionStatus.error || 'Server not running'}`
+              }
+            </span>
+          </div>
+        </div>
 
         <div style={STYLES.chatContainer}>
-          {conversation.length === 0 && (
+          {error && (
+            <div style={STYLES.errorMessage}>
+              {error}
+            </div>
+          )}
+
+          {conversation.length === 0 && !loading && (
             <div style={STYLES.emptyState}>
-              <div style={STYLES.emptyStateTitle}>Start a conversation to generate a Storybook story</div>
+              <div style={STYLES.emptyStateTitle}>Start a new conversation</div>
               <div style={STYLES.emptyStateSubtitle}>
-                (e.g. &quot;Build a login form with two fields and a button&quot;)
+                Describe the UI component you'd like to create
               </div>
             </div>
           )}
 
           {conversation.map((msg, i) => (
-            <div key={i} style={{
-              ...STYLES.messageContainer,
-              justifyContent: msg.role === 'user' ? 'flex-end' : 'flex-start',
-            }}>
+            <div key={i} style={STYLES.messageContainer}>
               <div style={msg.role === 'user' ? STYLES.userMessage : STYLES.aiMessage}>
                 {msg.content}
               </div>
@@ -829,16 +973,10 @@ const StoryUIPanel: React.FC = () => {
           ))}
 
           {loading && (
-            <div style={{ ...STYLES.messageContainer, justifyContent: 'flex-start' }}>
+            <div style={STYLES.messageContainer}>
               <div style={STYLES.loadingMessage}>
-                <div style={{
-                  width: '6px',
-                  height: '6px',
-                  backgroundColor: '#6b7280',
-                  borderRadius: '50%',
-                  animation: 'pulse 1.5s ease-in-out infinite',
-                }}></div>
-                Generating...
+                <span>Generating story</span>
+                <span className="loading-dots"></span>
               </div>
             </div>
           )}
@@ -848,12 +986,12 @@ const StoryUIPanel: React.FC = () => {
 
         <form onSubmit={handleSend} style={STYLES.inputForm}>
           <input
+            ref={inputRef}
             type="text"
             value={input}
             onChange={e => setInput(e.target.value)}
-            placeholder="Describe your UI or give feedback..."
+            placeholder="Describe a UI component..."
             style={STYLES.textInput}
-            disabled={loading}
             onFocus={(e) => {
               e.currentTarget.style.borderColor = 'rgba(59, 130, 246, 0.5)';
               e.currentTarget.style.boxShadow = '0 0 0 3px rgba(59, 130, 246, 0.1)';
@@ -868,39 +1006,31 @@ const StoryUIPanel: React.FC = () => {
             disabled={loading || !input.trim()}
             style={{
               ...STYLES.sendButton,
-              ...(loading || !input.trim() ? STYLES.sendButtonDisabled : {}),
+              ...(loading || !input.trim() ? {
+                opacity: 0.5,
+                cursor: 'not-allowed',
+                background: '#6b7280',
+                boxShadow: 'none'
+              } : {})
             }}
             onMouseEnter={(e) => {
               if (!loading && input.trim()) {
-                e.currentTarget.style.transform = 'translateY(-1px)';
+                e.currentTarget.style.transform = 'scale(1.05)';
                 e.currentTarget.style.boxShadow = '0 4px 16px rgba(16, 185, 129, 0.4)';
               }
             }}
             onMouseLeave={(e) => {
-              if (!loading && input.trim()) {
-                e.currentTarget.style.transform = 'translateY(0)';
-                e.currentTarget.style.boxShadow = '0 2px 8px rgba(16, 185, 129, 0.3)';
-              }
+              e.currentTarget.style.transform = 'scale(1)';
+              e.currentTarget.style.boxShadow = '0 2px 8px rgba(16, 185, 129, 0.3)';
             }}
           >
-            {loading ? '...' : 'Send'}
+            <span>Send</span>
+            <svg width={16} height={16} viewBox="0 0 24 24" fill="currentColor">
+              <path d="M2.01 21L23 12 2.01 3 2 10l15 2-15 2z"/>
+            </svg>
           </button>
         </form>
-
-        {error && <div style={STYLES.errorMessage}>{error}</div>}
       </div>
-
-      {/* Add keyframes animation for loading pulse */}
-      <style>
-        {`
-          @keyframes pulse {
-            0%, 100% { opacity: 0.4; }
-            50% { opacity: 1; }
-          }
-        `}
-      </style>
     </div>
   );
-};
-
-export default StoryUIPanel;
+}