@tpitre/story-ui 3.9.0 → 3.10.0

package/dist/templates/StoryUI/StoryUIPanel.js

@@ -1,1284 +1,595 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { useState, useRef, useEffect, useCallback } from 'react';
-// Simple markdown renderer for AI messages with icon marker support
-const renderMarkdown = (text) => {
-    // Split by double newlines to get paragraphs
-    const paragraphs = text.split(/\n\n+/);
-    // Parse inline formatting within text
-    const parseInline = (str, paragraphIndex) => {
-        const parts = [];
-        let remaining = str;
-        let keyIndex = 0;
-        while (remaining.length > 0) {
-            // Icon markers: [SUCCESS], [ERROR], [TIP], [WRENCH]
-            const iconMatch = remaining.match(/^\[(SUCCESS|ERROR|TIP|WRENCH)\]/);
-            if (iconMatch) {
-                const iconType = iconMatch[1].toLowerCase();
-                parts.push(_jsx("span", { children: StatusIcons[iconType] }, `icon-${paragraphIndex}-${keyIndex++}`));
-                remaining = remaining.slice(iconMatch[0].length);
-                continue;
-            }
-            // Bold: **text**
-            const boldMatch = remaining.match(/^\*\*(.+?)\*\*/);
-            if (boldMatch) {
-                parts.push(_jsx("strong", { children: boldMatch[1] }, `b-${paragraphIndex}-${keyIndex++}`));
-                remaining = remaining.slice(boldMatch[0].length);
-                continue;
-            }
-            // Italic: _text_
-            const italicMatch = remaining.match(/^_(.+?)_/);
-            if (italicMatch) {
-                parts.push(_jsx("em", { style: { opacity: 0.7, fontSize: '0.9em' }, children: italicMatch[1] }, `i-${paragraphIndex}-${keyIndex++}`));
-                remaining = remaining.slice(italicMatch[0].length);
-                continue;
-            }
-            // Code: `text`
-            const codeMatch = remaining.match(/^`([^`]+)`/);
-            if (codeMatch) {
-                parts.push(_jsx("code", { style: {
-                        background: 'rgba(0,0,0,0.08)',
-                        padding: '1px 4px',
-                        borderRadius: '4px',
-                        fontFamily: 'ui-monospace, monospace',
-                        fontSize: '0.88em'
-                    }, children: codeMatch[1] }, `c-${paragraphIndex}-${keyIndex++}`));
-                remaining = remaining.slice(codeMatch[0].length);
-                continue;
-            }
-            // Single newline within paragraph - convert to space or line break
-            if (remaining.startsWith('\n')) {
-                parts.push(' ');
-                remaining = remaining.slice(1);
-                continue;
-            }
-            // Regular text - consume until next special character or bracket
-            const nextSpecial = remaining.search(/[*_`\[\n]/);
-            if (nextSpecial === -1) {
-                parts.push(remaining);
-                remaining = '';
-            }
-            else if (nextSpecial === 0) {
-                // Special char that didn't match a pattern, treat as regular text
-                parts.push(remaining[0]);
-                remaining = remaining.slice(1);
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+/**
+ * StoryUIPanel - AI-powered Storybook story generator
+ *
+ * ShadCN-inspired design with Gemini-style layout.
+ * Self-contained React component with no external UI dependencies.
+ * Supports light and dark modes based on Storybook theme.
+ */
+import React, { useState, useEffect, useRef, useCallback, useReducer } from 'react';
+import './StoryUIPanel.css';
+const initialState = {
+    sidebarOpen: true,
+    showCode: false,
+    isDragging: false,
+    loading: false,
+    isBulkDeleting: false,
+    conversation: [],
+    recentChats: [],
+    orphanStories: [],
+    activeChatId: null,
+    activeTitle: '',
+    input: '',
+    attachedImages: [],
+    selectedStoryIds: new Set(),
+    availableProviders: [],
+    selectedProvider: '',
+    selectedModel: '',
+    connectionStatus: { connected: false },
+    streamingState: null,
+    error: null,
+    considerations: '',
+    isDarkMode: false,
+};
+function panelReducer(state, action) {
+    switch (action.type) {
+        case 'TOGGLE_SIDEBAR':
+            return { ...state, sidebarOpen: !state.sidebarOpen };
+        case 'SET_SIDEBAR':
+            return { ...state, sidebarOpen: action.payload };
+        case 'TOGGLE_CODE':
+            return { ...state, showCode: !state.showCode };
+        case 'SET_DRAGGING':
+            return { ...state, isDragging: action.payload };
+        case 'SET_LOADING':
+            return { ...state, loading: action.payload };
+        case 'SET_BULK_DELETING':
+            return { ...state, isBulkDeleting: action.payload };
+        case 'SET_CONVERSATION':
+            return { ...state, conversation: action.payload };
+        case 'ADD_MESSAGE':
+            return { ...state, conversation: [...state.conversation, action.payload] };
+        case 'SET_RECENT_CHATS':
+            return { ...state, recentChats: action.payload };
+        case 'SET_ORPHAN_STORIES':
+            return { ...state, orphanStories: action.payload };
+        case 'SET_ACTIVE_CHAT':
+            return { ...state, activeChatId: action.payload.id, activeTitle: action.payload.title };
+        case 'SET_INPUT':
+            return { ...state, input: action.payload };
+        case 'SET_ATTACHED_IMAGES':
+            return { ...state, attachedImages: action.payload };
+        case 'ADD_ATTACHED_IMAGE':
+            return { ...state, attachedImages: [...state.attachedImages, action.payload] };
+        case 'REMOVE_ATTACHED_IMAGE':
+            return {
+                ...state,
+                attachedImages: state.attachedImages.filter(img => img.id !== action.payload),
+            };
+        case 'CLEAR_ATTACHED_IMAGES':
+            return { ...state, attachedImages: [] };
+        case 'SET_SELECTED_STORY_IDS':
+            return { ...state, selectedStoryIds: action.payload };
+        case 'TOGGLE_STORY_SELECTION': {
+            const newSet = new Set(state.selectedStoryIds);
+            if (newSet.has(action.payload)) {
+                newSet.delete(action.payload);
             }
             else {
-                parts.push(remaining.slice(0, nextSpecial));
-                remaining = remaining.slice(nextSpecial);
+                newSet.add(action.payload);
             }
+            return { ...state, selectedStoryIds: newSet };
         }
-        return parts;
-    };
-    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 = {
-    success: (_jsxs("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", style: { color: '#22c55e', verticalAlign: 'middle', marginRight: '6px' }, children: [_jsx("path", { d: "M22 11.08V12a10 10 0 1 1-5.93-9.14" }), _jsx("polyline", { points: "22,4 12,14.01 9,11.01" })] })),
-    error: (_jsxs("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", style: { color: '#ef4444', verticalAlign: 'middle', marginRight: '6px' }, children: [_jsx("circle", { cx: "12", cy: "12", r: "10" }), _jsx("line", { x1: "15", y1: "9", x2: "9", y2: "15" }), _jsx("line", { x1: "9", y1: "9", x2: "15", y2: "15" })] })),
-    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
-// 2. window.__STORY_UI_EDGE_URL__ - Runtime override for edge URL
-// 3. Production domains (railway.app, render.com, pages.dev) - use same origin
-// 4. VITE_STORY_UI_PORT - Custom port for localhost
-// 5. window.__STORY_UI_PORT__ - Legacy port override
-// 6. window.STORY_UI_MCP_PORT - MCP port override
-// 7. Default to localhost:4001
-const getApiBaseUrl = () => {
-    // Check for Edge Worker URL (cloud deployment)
-    const edgeUrl = import.meta.env?.VITE_STORY_UI_EDGE_URL;
-    if (edgeUrl)
-        return edgeUrl.replace(/\/$/, ''); // Remove trailing slash
-    // Check for window override for edge URL (support both naming conventions)
-    const windowEdgeUrl = window.__STORY_UI_EDGE_URL__ || window.STORY_UI_EDGE_URL;
-    if (windowEdgeUrl)
-        return windowEdgeUrl.replace(/\/$/, '');
-    // Check if we're running on Railway production domain
-    // In this case, the MCP server is proxied through the same origin
+        case 'SET_PROVIDERS':
+            return { ...state, availableProviders: action.payload };
+        case 'SET_SELECTED_PROVIDER':
+            return { ...state, selectedProvider: action.payload };
+        case 'SET_SELECTED_MODEL':
+            return { ...state, selectedModel: action.payload };
+        case 'SET_CONNECTION_STATUS':
+            return { ...state, connectionStatus: action.payload };
+        case 'SET_STREAMING_STATE':
+            return { ...state, streamingState: action.payload };
+        case 'UPDATE_STREAMING_STATE':
+            return { ...state, streamingState: { ...state.streamingState, ...action.payload } };
+        case 'SET_ERROR':
+            return { ...state, error: action.payload };
+        case 'SET_CONSIDERATIONS':
+            return { ...state, considerations: action.payload };
+        case 'SET_DARK_MODE':
+            return { ...state, isDarkMode: action.payload };
+        case 'NEW_CHAT':
+            return { ...state, conversation: [], activeChatId: null, activeTitle: '' };
+        default:
+            return state;
+    }
+}
+// ============================================
+// Constants
+// ============================================
+const USE_STREAMING = true;
+const MAX_RECENT_CHATS = 20;
+const CHAT_STORAGE_KEY = 'story-ui-chats';
+const MAX_IMAGES = 4;
+const MAX_IMAGE_SIZE_MB = 20;
+// ============================================
+// Helper Functions
+// ============================================
+function getApiBaseUrl() {
+    if (typeof import.meta !== 'undefined' && import.meta.env?.VITE_STORY_UI_EDGE_URL) {
+        return import.meta.env.VITE_STORY_UI_EDGE_URL;
+    }
     if (typeof window !== 'undefined') {
-        const hostname = window.location.hostname;
-        if (hostname.includes('.railway.app')) {
-            // Use same-origin requests (empty string means relative URLs)
-            return '';
+        if (window.__STORY_UI_EDGE_URL__) {
+            return window.__STORY_UI_EDGE_URL__;
+        }
+        if (window.location.hostname.includes('railway.app')) {
+            return window.location.origin;
         }
     }
-    // Check for Vite port environment variable
-    const vitePort = import.meta.env?.VITE_STORY_UI_PORT;
-    if (vitePort)
-        return `http://localhost:${vitePort}`;
-    // Check for window override (legacy support)
-    const windowOverride = window.__STORY_UI_PORT__;
-    if (windowOverride)
-        return `http://localhost:${windowOverride}`;
-    // Check for MCP port override set by stories file
-    const mcpOverride = window.STORY_UI_MCP_PORT;
-    if (mcpOverride)
-        return `http://localhost:${mcpOverride}`;
-    return 'http://localhost:4001';
-};
-// Helper to check if we're using Edge mode (cloud deployment)
-const isEdgeMode = () => {
-    const baseUrl = getApiBaseUrl();
-    return baseUrl.includes('workers.dev') || baseUrl.includes('pages.dev') ||
-        baseUrl.startsWith('https://') && !baseUrl.includes('localhost');
-};
-// Helper to convert story title to Storybook URL format
-// e.g., "Simple Card With Image" -> "generated-simple-card-with-image--default"
-const titleToStoryPath = (title) => {
-    const kebabTitle = title.toLowerCase().replace(/[^a-z0-9]+/g, '-').replace(/^-|-$/g, '');
-    return `generated-${kebabTitle}--default`;
-};
-// 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 storyPath = titleToStoryPath(title);
-    console.log(`[Story UI] Will navigate to story "${storyPath}" in ${delayMs}ms...`);
-    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
-        const topWindow = window.top || window;
-        const newUrl = `${topWindow.location.origin}/?path=/story/${storyPath}`;
-        console.log(`[Story UI] Navigating parent window to: ${newUrl}`);
-        topWindow.location.href = newUrl;
-    }, delayMs);
-};
-// Legacy helper for backwards compatibility
-const getApiPort = () => {
-    const baseUrl = getApiBaseUrl();
-    const match = baseUrl.match(/:(\d+)$/);
-    return match ? match[1] : '4001';
-};
-// Get connection display text
-const getConnectionDisplayText = () => {
-    const baseUrl = getApiBaseUrl();
-    if (isEdgeMode()) {
-        // Extract domain for Edge URL
-        try {
-            const url = new URL(baseUrl);
-            return `Edge Worker (${url.hostname})`;
+    let port = '4001';
+    if (typeof import.meta !== 'undefined' && import.meta.env?.VITE_STORY_UI_PORT) {
+        port = import.meta.env.VITE_STORY_UI_PORT;
+    }
+    else if (typeof window !== 'undefined') {
+        if (window.__STORY_UI_PORT__) {
+            port = window.__STORY_UI_PORT__;
         }
-        catch {
-            return 'Edge Worker';
+        else if (window.STORY_UI_MCP_PORT) {
+            port = window.STORY_UI_MCP_PORT;
         }
     }
-    return `MCP server (port ${getApiPort()})`;
-};
+    return `http://localhost:${port}`;
+}
 const API_BASE = getApiBaseUrl();
-const MCP_API = `${API_BASE}/story-ui/generate`;
-const MCP_STREAM_API = `${API_BASE}/story-ui/generate-stream`;
+const MCP_API = `${API_BASE}/mcp/generate-story`;
+const MCP_STREAM_API = `${API_BASE}/mcp/generate-story-stream`;
+const PROVIDERS_API = `${API_BASE}/mcp/providers`;
 const STORIES_API = `${API_BASE}/story-ui/stories`;
-const DELETE_API_BASE = `${API_BASE}/story-ui/stories`;
-const PROVIDERS_API = `${API_BASE}/story-ui/providers`;
-// Considerations API URL - includes storybookOrigin param for Edge mode
-const getConsiderationsApiUrl = () => {
-    const baseUrl = `${API_BASE}/story-ui/considerations`;
-    if (isEdgeMode()) {
-        // In Edge mode, tell the Edge Worker where to fetch considerations from
-        // The Storybook origin is where the panel is running (window.location.origin)
-        const storybookOrigin = window.location.origin;
-        return `${baseUrl}?storybookOrigin=${encodeURIComponent(storybookOrigin)}`;
-    }
-    return baseUrl;
-};
-const CONSIDERATIONS_API = getConsiderationsApiUrl();
-const STORAGE_KEY = `story-ui-chats-${window.location.port}`;
-const MAX_RECENT_CHATS = 20;
-// Feature flag: Enable streaming mode (can be toggled for testing)
-const USE_STREAMING = true;
-// Load from localStorage
-const loadChats = () => {
+const CONSIDERATIONS_API = `${API_BASE}/mcp/considerations`;
+function isEdgeMode() {
+    const baseUrl = getApiBaseUrl();
+    return baseUrl.includes('railway.app') || baseUrl.includes('workers.dev');
+}
+function getConnectionDisplayText() {
+    const baseUrl = getApiBaseUrl();
+    if (baseUrl.includes('railway.app'))
+        return 'Railway Cloud';
+    if (baseUrl.includes('workers.dev'))
+        return 'Cloudflare Edge';
+    const port = baseUrl.match(/:(\d+)/)?.[1] || '4001';
+    return `localhost:${port}`;
+}
+function loadChats() {
     try {
-        const stored = localStorage.getItem(STORAGE_KEY);
-        if (!stored)
-            return [];
-        const chats = JSON.parse(stored);
-        // Sort by lastUpdated and limit
-        return chats
-            .sort((a, b) => b.lastUpdated - a.lastUpdated)
-            .slice(0, MAX_RECENT_CHATS);
+        const stored = localStorage.getItem(CHAT_STORAGE_KEY);
+        if (stored)
+            return JSON.parse(stored);
     }
     catch (e) {
         console.error('Failed to load chats:', e);
-        return [];
     }
-};
-// Save to localStorage
-const saveChats = (chats) => {
+    return [];
+}
+function saveChats(chats) {
     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));
+        localStorage.setItem(CHAT_STORAGE_KEY, JSON.stringify(chats));
     }
     catch (e) {
         console.error('Failed to save chats:', e);
     }
-};
-// Sync with memory stories from backend
-const syncWithActualStories = async () => {
-    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 - using chat.id as the primary key
-        const chatMap = new Map();
-        existingChats.forEach(chat => {
-            chatMap.set(chat.id, chat);
-        });
-        // Update or add memory stories
-        memoryStories.forEach((story) => {
-            const storyId = story.storyId || story.fileName;
-            // Look for existing chat by ID or by matching fileName
-            let existingChat = chatMap.get(storyId);
-            // If not found by ID, search by fileName
-            if (!existingChat && story.fileName) {
-                for (const [id, chat] of chatMap.entries()) {
-                    if (chat.fileName === story.fileName) {
-                        existingChat = chat;
-                        break;
-                    }
-                }
-            }
-            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 = {
-                    id: storyId,
-                    title: story.title || story.fileName,
-                    fileName: story.fileName,
-                    conversation: [{
-                            role: 'user',
-                            content: story.prompt || `Generate ${story.title}`
-                        }, {
-                            role: 'ai',
-                            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()
-                };
-                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) => {
-    try {
-        // Remove .stories.tsx extension if present to get the actual story ID
-        const storyId = chatId.replace(/\.stories\.tsx$/, '');
-        console.log(`Attempting to delete story: chatId="${chatId}", storyId="${storyId}"`);
-        let serverDeleteSucceeded = false;
-        // First try to delete from backend
-        try {
-            const response = await fetch(`${DELETE_API_BASE}/${storyId}`, {
-                method: 'DELETE',
-                headers: { 'Content-Type': 'application/json' }
-            });
-            // 404 means story doesn't exist on server - that's OK, we can still clean up localStorage
-            if (response.ok || response.status === 404) {
-                serverDeleteSucceeded = true;
-                if (response.status === 404) {
-                    console.log('Story not found on server (may have been a failed generation), cleaning up localStorage');
-                }
-            }
-            else {
-                console.warn(`Backend delete returned ${response.status}, trying legacy endpoint`);
-            }
-        }
-        catch (fetchError) {
-            console.warn('Backend delete request failed, trying legacy endpoint:', fetchError);
-        }
-        // Try legacy endpoint as fallback only if primary didn't succeed
-        if (!serverDeleteSucceeded) {
-            try {
-                const legacyResponse = await fetch(`${API_BASE}/story-ui/delete`, {
-                    method: 'POST',
-                    headers: { 'Content-Type': 'application/json' },
-                    body: JSON.stringify({
-                        chatId: storyId,
-                        storyId: storyId
-                    })
-                });
-                // 404 is also OK for legacy endpoint
-                if (legacyResponse.ok || legacyResponse.status === 404) {
-                    serverDeleteSucceeded = true;
-                }
-                else {
-                    console.warn('Legacy delete endpoint also returned non-success status');
-                }
-            }
-            catch (legacyError) {
-                console.warn('Legacy delete request failed:', legacyError);
-            }
-        }
-        // Always clean up localStorage - the chat/story data is primarily client-side
-        // Even if server delete failed, we should allow users to clean up their chat history
-        const chats = loadChats().filter(chat => chat.id !== chatId);
-        saveChats(chats);
-        console.log('Cleaned up localStorage chat entry');
-        return true;
-    }
-    catch (error) {
-        console.error('Error deleting story:', error);
-        // Still try to clean up localStorage even on error
-        try {
-            const chats = loadChats().filter(chat => chat.id !== chatId);
-            saveChats(chats);
-            console.log('Cleaned up localStorage despite error');
-            return true;
-        }
-        catch (localError) {
-            console.error('Failed to clean up localStorage:', localError);
-            return false;
-        }
-    }
-};
-// Test connection to MCP server
-const testMCPConnection = async () => {
+}
+async function testMCPConnection() {
     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 };
+        const response = await fetch(PROVIDERS_API, { method: 'GET' });
+        if (response.ok)
+            return { connected: true };
+        return { connected: false, error: `Server returned ${response.status}` };
     }
-    catch (error) {
-        return { connected: false, error: error instanceof Error ? error.message : 'Unknown error' };
+    catch (e) {
+        return { connected: false, error: 'Cannot connect to MCP server' };
     }
-};
-// Fetch orphan stories (stories on disk without corresponding chat history)
-const fetchOrphanStories = async () => {
+}
+// Simply load chats from localStorage - don't filter based on server state
+// Chats should persist independently of whether story files exist
+async function syncWithActualStories() {
+    return loadChats();
+}
+async function fetchOrphanStories() {
     try {
         const response = await fetch(STORIES_API);
-        if (!response.ok) {
-            console.error('Failed to fetch stories from backend for orphan detection');
+        if (!response.ok)
             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);
+        const localChats = loadChats();
+        const chatIds = new Set(localChats.map(c => c.id));
+        return serverStories
+            .filter((s) => !chatIds.has(s.id))
+            .map((s) => ({ id: s.id, title: s.title, fileName: s.fileName }));
     }
-    catch (error) {
-        console.error('Error fetching orphan stories:', error);
+    catch (e) {
         return [];
     }
-};
-// Component styles
-const STYLES = {
-    container: {
-        display: 'flex',
-        flexDirection: 'row',
-        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: {
-        width: '240px',
-        background: 'rgba(255, 255, 255, 0.03)',
-        borderRight: '1px solid rgba(255, 255, 255, 0.08)',
-        display: 'flex',
-        flexDirection: 'column',
-        backdropFilter: 'blur(10px)',
-        transition: 'width 0.3s ease',
-        position: 'relative',
-    },
-    sidebarCollapsed: {
-        width: '56px',
-    },
-    sidebarToggle: {
-        width: '100%',
-        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: '8px',
-        transition: 'all 0.2s ease',
-        boxShadow: 'none',
-        display: 'flex',
-        alignItems: 'center',
-        justifyContent: 'flex-start',
-        gap: '10px',
-        lineHeight: '1',
-    },
-    newChatButton: {
-        width: '100%',
-        padding: '10px 14px',
-        background: '#3b82f6',
-        color: 'white',
-        border: 'none',
-        borderRadius: '8px',
-        fontSize: '14px',
-        fontWeight: '600',
-        cursor: 'pointer',
-        marginBottom: '16px',
-        transition: 'all 0.2s ease',
-        boxShadow: '0 2px 8px rgba(59, 130, 246, 0.25)',
-        display: 'flex',
-        alignItems: 'center',
-        justifyContent: 'flex-start',
-        gap: '10px',
-        lineHeight: '1',
-    },
-    chatItem: {
-        padding: '8px 12px',
-        marginBottom: '4px',
-        background: 'rgba(255, 255, 255, 0.05)',
-        borderRadius: '6px',
-        cursor: 'pointer',
-        transition: 'all 0.15s ease',
-        position: 'relative',
-        paddingRight: '32px',
-    },
-    chatItemActive: {
-        background: 'rgba(59, 130, 246, 0.15)',
-        borderLeft: '2px solid #3b82f6',
-    },
-    chatItemTitle: {
-        fontSize: '14px',
-        fontWeight: '500',
-        marginBottom: '2px',
-        whiteSpace: 'nowrap',
-        overflow: 'hidden',
-        textOverflow: 'ellipsis',
-    },
-    chatItemTime: {
-        fontSize: '12px',
-        color: '#94a3b8',
-    },
-    deleteButton: {
-        position: 'absolute',
-        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',
-        overflow: 'hidden',
-    },
-    chatHeader: {
-        padding: '12px 16px',
-        borderBottom: '1px solid rgba(255, 255, 255, 0.08)',
-        background: 'rgba(255, 255, 255, 0.03)',
-        backdropFilter: 'blur(10px)',
-    },
-    chatContainer: {
-        flex: 1,
-        padding: '16px',
-        overflowY: 'auto',
-        scrollBehavior: 'smooth',
-    },
-    emptyState: {
-        color: '#94a3b8',
-        textAlign: 'center',
-        marginTop: '60px',
-    },
-    emptyStateTitle: {
-        fontSize: '15px',
-        fontWeight: '500',
-        marginBottom: '8px',
-        color: '#cbd5e1',
-    },
-    emptyStateSubtitle: {
-        fontSize: '13px',
-        color: '#64748b',
-    },
-    // Message bubbles
-    messageContainer: {
-        display: 'flex',
-        marginBottom: '8px',
-    },
-    userMessage: {
-        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.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: '90%',
-        fontSize: '14px',
-        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.95)',
-        color: '#4b5563',
-        borderRadius: '16px 16px 16px 4px',
-        padding: '10px 14px',
-        fontSize: '14px',
-        lineHeight: '1.45',
-        display: 'flex',
-        alignItems: 'center',
-        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: '12px',
-        margin: '0 16px 16px 16px',
-        padding: '12px',
-        background: 'rgba(255, 255, 255, 0.03)',
-        borderRadius: '12px',
-        border: '1px solid rgba(255, 255, 255, 0.08)',
-        backdropFilter: 'blur(10px)',
-    },
-    textInput: {
-        font: 'inherit',
-        flex: 1,
-        padding: '12px 16px',
-        borderRadius: '8px',
-        border: '1px solid rgba(255, 255, 255, 0.15)',
-        fontSize: '13px',
-        color: '#1f2937',
-        background: '#ffffff',
-        outline: 'none',
-        transition: 'all 0.15s ease',
-        boxSizing: 'border-box',
-    },
-    sendButton: {
-        font: 'inherit',
-        padding: '10px 16px',
-        borderRadius: '10px',
-        border: 'none',
-        background: '#3b82f6',
-        color: 'white',
-        fontSize: '14px',
-        fontWeight: '600',
-        cursor: 'pointer',
-        display: 'flex',
-        alignItems: 'center',
-        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)',
-        color: '#f87171',
-        padding: '8px 12px',
-        borderRadius: '6px',
-        fontSize: '13px',
-        marginBottom: '8px',
-        border: '1px solid rgba(248, 113, 113, 0.2)',
-    },
-    loadingDots: {
-        display: 'inline-block',
-        animation: 'loadingDots 1.4s infinite',
-    },
-    '@keyframes loadingDots': {
-        '0%': { content: '""' },
-        '25%': { content: '"."' },
-        '50%': { content: '".."' },
-        '75%': { content: '"..."' },
-    },
-    codeBlock: {
-        background: '#1e293b',
-        padding: '12px',
-        borderRadius: '8px',
-        fontFamily: 'Consolas, Monaco, "Andale Mono", "Ubuntu Mono", monospace',
-        fontSize: '12px',
-        lineHeight: '1.5',
-        overflowX: 'auto',
-        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: '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.06)',
-        borderRadius: '8px',
-        padding: '10px 12px',
-        marginBottom: '10px',
-        border: '1px solid rgba(59, 130, 246, 0.12)',
-    },
-    intentTitle: {
-        fontSize: '13px',
-        fontWeight: '600',
-        color: '#1e40af',
-        marginBottom: '8px',
-        display: 'flex',
-        alignItems: 'center',
-        gap: '4px',
-    },
-    intentStrategy: {
-        fontSize: '12px',
-        color: '#4b5563',
-        marginBottom: '4px',
-    },
-    intentComponents: {
-        display: 'flex',
-        flexWrap: 'wrap',
-        gap: '4px',
-        marginTop: '8px',
-    },
-    componentTag: {
-        background: 'rgba(59, 130, 246, 0.12)',
-        color: '#1d4ed8',
-        fontSize: '11px',
-        padding: '2px 8px',
-        borderRadius: '10px',
-        fontWeight: '500',
-    },
-    progressBar: {
-        background: 'rgba(0, 0, 0, 0.08)',
-        borderRadius: '4px',
-        height: '4px',
-        marginTop: '12px',
-        marginBottom: '8px',
-        overflow: 'hidden',
-    },
-    progressFill: {
-        background: '#3b82f6',
-        height: '100%',
-        borderRadius: '3px',
-        transition: 'width 0.3s ease',
-    },
-    progressPhase: {
-        fontSize: '14px',
-        color: '#4b5563',
-        display: 'flex',
-        alignItems: 'center',
-        gap: '6px',
-        fontWeight: '500',
-        lineHeight: '1.45',
-    },
-    phaseIcon: {
-        fontSize: '14px',
-    },
-    validationBox: {
-        marginTop: '8px',
-        padding: '8px',
-        borderRadius: '6px',
-        fontSize: '11px',
-    },
-    validationSuccess: {
-        background: 'rgba(16, 185, 129, 0.08)',
-        border: '1px solid rgba(16, 185, 129, 0.15)',
-        color: '#047857',
-    },
-    validationWarning: {
-        background: 'rgba(245, 158, 11, 0.08)',
-        border: '1px solid rgba(245, 158, 11, 0.15)',
-        color: '#b45309',
-    },
-    validationError: {
-        background: 'rgba(239, 68, 68, 0.08)',
-        border: '1px solid rgba(239, 68, 68, 0.15)',
-        color: '#dc2626',
-    },
-    retryBadge: {
-        background: 'rgba(245, 158, 11, 0.12)',
-        color: '#b45309',
-        fontSize: '11px',
-        padding: '2px 8px',
-        borderRadius: '10px',
-        display: 'inline-flex',
-        alignItems: 'center',
-        gap: '4px',
-        marginTop: '8px',
-    },
-    completionSummary: {
-        marginTop: '10px',
-        paddingTop: '10px',
-        borderTop: '1px solid rgba(0, 0, 0, 0.06)',
-    },
-    summaryTitle: {
-        fontSize: '14px',
-        fontWeight: '600',
-        color: '#111827',
-        marginBottom: '6px',
-        display: 'flex',
-        alignItems: 'center',
-        gap: '6px',
-        lineHeight: '1.45',
-    },
-    summaryDescription: {
-        fontSize: '14px',
-        color: '#4b5563',
-        lineHeight: '1.45',
-    },
-    metricsRow: {
-        display: 'flex',
-        gap: '10px',
-        marginTop: '6px',
-        fontSize: '13px',
-        color: '#6b7280',
-    },
-    metric: {
-        display: 'flex',
-        alignItems: 'center',
-        gap: '4px',
-    },
-    // Code viewer styles for generated stories
-    codeViewerContainer: {
-        marginTop: '12px',
-        borderTop: '1px solid rgba(0, 0, 0, 0.08)',
-        paddingTop: '12px',
-    },
-    codeViewerToggle: {
-        display: 'flex',
-        alignItems: 'center',
-        justifyContent: 'space-between',
-        padding: '8px 12px',
-        background: 'rgba(59, 130, 246, 0.08)',
-        borderRadius: '6px',
-        cursor: 'pointer',
-        border: '1px solid rgba(59, 130, 246, 0.15)',
-        transition: 'all 0.2s ease',
-        fontSize: '13px',
-        fontWeight: '500',
-        color: '#1e40af',
-    },
-    codeViewerToggleHover: {
-        background: 'rgba(59, 130, 246, 0.15)',
-    },
-    codeViewerContent: {
-        marginTop: '12px',
-        background: '#1e293b',
-        borderRadius: '8px',
-        overflow: 'hidden',
-        border: '1px solid rgba(255, 255, 255, 0.08)',
-    },
-    codeViewerHeader: {
-        display: 'flex',
-        alignItems: 'center',
-        justifyContent: 'space-between',
-        padding: '8px 12px',
-        background: 'rgba(0, 0, 0, 0.2)',
-        borderBottom: '1px solid rgba(255, 255, 255, 0.08)',
-    },
-    codeViewerFileName: {
-        fontSize: '12px',
-        color: '#94a3b8',
-        fontFamily: 'ui-monospace, monospace',
-    },
-    copyButton: {
-        padding: '4px 12px',
-        fontSize: '11px',
-        fontWeight: '500',
-        color: '#e2e8f0',
-        background: 'rgba(59, 130, 246, 0.3)',
-        border: '1px solid rgba(59, 130, 246, 0.5)',
-        borderRadius: '4px',
-        cursor: 'pointer',
-        transition: 'all 0.2s ease',
-    },
-    copyButtonSuccess: {
-        background: 'rgba(34, 197, 94, 0.3)',
-        borderColor: 'rgba(34, 197, 94, 0.5)',
-        color: '#86efac',
-    },
-    codeViewerPre: {
-        margin: 0,
-        padding: '12px',
-        fontSize: '11px',
-        lineHeight: '1.5',
-        fontFamily: 'ui-monospace, Consolas, Monaco, monospace',
-        color: '#e2e8f0',
-        overflowX: 'auto',
-        maxHeight: '400px',
-        overflowY: 'auto',
-    },
-    // Image upload styles
-    uploadButton: {
-        display: 'flex',
-        alignItems: 'center',
-        justifyContent: 'center',
-        width: '36px',
-        height: '36px',
-        borderRadius: '6px',
-        border: '1px solid rgba(255, 255, 255, 0.15)',
-        background: 'rgba(255, 255, 255, 0.08)',
-        color: '#e2e8f0',
-        cursor: 'pointer',
-        transition: 'all 0.2s ease',
-        flexShrink: 0,
-    },
-    uploadButtonHover: {
-        background: 'rgba(59, 130, 246, 0.2)',
-        borderColor: 'rgba(59, 130, 246, 0.5)',
-    },
-    imagePreviewContainer: {
-        display: 'flex',
-        flexWrap: 'wrap',
-        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: '8px 8px 0 0',
-    },
-    imagePreviewItem: {
-        position: 'relative',
-        width: '56px',
-        height: '56px',
-        borderRadius: '6px',
-        overflow: 'hidden',
-        border: '1px solid rgba(255, 255, 255, 0.15)',
-        background: '#1e293b',
-    },
-    imagePreviewImg: {
-        width: '100%',
-        height: '100%',
-        objectFit: 'cover',
-    },
-    imageRemoveButton: {
-        position: 'absolute',
-        top: '2px',
-        right: '2px',
-        width: '18px',
-        height: '18px',
-        borderRadius: '50%',
-        background: 'rgba(239, 68, 68, 0.9)',
-        color: 'white',
-        border: 'none',
-        fontSize: '12px',
-        cursor: 'pointer',
-        display: 'flex',
-        alignItems: 'center',
-        justifyContent: 'center',
-        lineHeight: 1,
-    },
-    imagePreviewLabel: {
-        display: 'flex',
-        alignItems: 'center',
-        gap: '8px',
-        fontSize: '12px',
-        color: '#94a3b8',
-        marginRight: 'auto',
-    },
-    userMessageImages: {
-        display: 'flex',
-        gap: '8px',
-        marginTop: '8px',
-        flexWrap: 'wrap',
-    },
-    userMessageImage: {
-        width: '40px',
-        height: '40px',
-        borderRadius: '6px',
-        objectFit: 'cover',
-        border: '1px solid rgba(255, 255, 255, 0.25)',
-    },
-    // Drag and drop overlay
-    dropOverlay: {
-        position: 'absolute',
-        top: 0,
-        left: 0,
-        right: 0,
-        bottom: 0,
-        background: 'rgba(59, 130, 246, 0.12)',
-        border: '2px dashed rgba(59, 130, 246, 0.4)',
-        borderRadius: '10px',
-        display: 'flex',
-        alignItems: 'center',
-        justifyContent: 'center',
-        zIndex: 100,
-        backdropFilter: 'blur(3px)',
-    },
-    dropOverlayText: {
-        background: 'rgba(59, 130, 246, 0.85)',
-        color: 'white',
-        padding: '12px 24px',
-        borderRadius: '8px',
-        fontSize: '14px',
-        fontWeight: '500',
-        display: 'flex',
-        alignItems: 'center',
-        gap: '8px',
-        boxShadow: '0 2px 8px rgba(59, 130, 246, 0.3)',
-    },
-};
-// 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;
-    }
-
-    .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 '';
+async function deleteStoryAndChat(chatId) {
+    try {
+        const response = await fetch(`${STORIES_API}/${chatId}`, { method: 'DELETE' });
+        // Delete chat from localStorage if:
+        // - Story was successfully deleted (200/204)
+        // - Story doesn't exist (404) - orphan chat case
+        if (response.ok || response.status === 404) {
+            const chats = loadChats().filter(c => c.id !== chatId);
+            saveChats(chats);
+            return true;
+        }
+        return false;
     }
-    const date = new Date(timestamp);
-    // Check if the date is valid
-    if (isNaN(date.getTime())) {
-        return '';
+    catch (e) {
+        // On network error, still allow removing the chat from localStorage
+        // since the story file may not exist anyway
+        const chats = loadChats().filter(c => c.id !== chatId);
+        saveChats(chats);
+        return true;
     }
-    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();
-};
-// Helper to get phase text (no icons - cleaner UI)
-const getPhaseInfo = (phase) => {
-    const phases = {
-        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' },
+}
+function formatTime(timestamp) {
+    const now = Date.now();
+    const diff = now - timestamp;
+    const minutes = Math.floor(diff / 60000);
+    const hours = Math.floor(diff / 3600000);
+    const days = Math.floor(diff / 86400000);
+    if (minutes < 1)
+        return 'Just now';
+    if (minutes < 60)
+        return `${minutes}m ago`;
+    if (hours < 24)
+        return `${hours}h ago`;
+    if (days < 7)
+        return `${days}d ago`;
+    return new Date(timestamp).toLocaleDateString();
+}
+function getModelDisplayName(model) {
+    const displayNames = {
+        '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',
+        'gpt-4o': 'GPT-4o',
+        'gpt-4o-mini': 'GPT-4o Mini',
+        'o1': 'o1',
+        'gemini-2.0-flash': 'Gemini 2.0 Flash',
+        'gemini-1.5-pro': 'Gemini 1.5 Pro',
     };
-    return phases[phase] || { text: 'Working' };
+    return displayNames[model] || model;
+}
+// ============================================
+// Icons (Lucide-style SVG)
+// ============================================
+const Icons = {
+    plus: (_jsxs("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [_jsx("path", { d: "M5 12h14" }), _jsx("path", { d: "M12 5v14" })] })),
+    messageSquare: (_jsx("svg", { width: "16", height: "16", 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" }) })),
+    panelLeft: (_jsxs("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [_jsx("rect", { width: "18", height: "18", x: "3", y: "3", rx: "2" }), _jsx("path", { d: "M9 3v18" })] })),
+    x: (_jsxs("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [_jsx("path", { d: "M18 6 6 18" }), _jsx("path", { d: "m6 6 12 12" })] })),
+    image: (_jsxs("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [_jsx("rect", { width: "18", height: "18", x: "3", y: "3", rx: "2", ry: "2" }), _jsx("circle", { cx: "9", cy: "9", r: "2" }), _jsx("path", { d: "m21 15-3.086-3.086a2 2 0 0 0-2.828 0L6 21" })] })),
+    send: (_jsxs("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [_jsx("path", { d: "m22 2-7 20-4-9-9-4Z" }), _jsx("path", { d: "M22 2 11 13" })] })),
+    chevronDown: (_jsx("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: _jsx("path", { d: "m6 9 6 6 6-6" }) })),
+    trash: (_jsxs("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [_jsx("path", { d: "M3 6h18" }), _jsx("path", { d: "M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6" }), _jsx("path", { d: "M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2" })] })),
+    sparkles: (_jsxs("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [_jsx("path", { d: "m12 3-1.912 5.813a2 2 0 0 1-1.275 1.275L3 12l5.813 1.912a2 2 0 0 1 1.275 1.275L12 21l1.912-5.813a2 2 0 0 1 1.275-1.275L21 12l-5.813-1.912a2 2 0 0 1-1.275-1.275L12 3Z" }), _jsx("path", { d: "M5 3v4" }), _jsx("path", { d: "M19 17v4" }), _jsx("path", { d: "M3 5h4" }), _jsx("path", { d: "M17 19h4" })] })),
+    moreVertical: (_jsxs("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [_jsx("circle", { cx: "12", cy: "12", r: "1" }), _jsx("circle", { cx: "12", cy: "5", r: "1" }), _jsx("circle", { cx: "12", cy: "19", r: "1" })] })),
+    pencil: (_jsxs("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [_jsx("path", { d: "M17 3a2.85 2.83 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5Z" }), _jsx("path", { d: "m15 5 4 4" })] })),
+    check: (_jsx("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: _jsx("path", { d: "M20 6 9 17l-5-5" }) })),
+    checkCircle: (_jsxs("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [_jsx("path", { d: "M22 11.08V12a10 10 0 1 1-5.93-9.14" }), _jsx("path", { d: "M22 4 12 14.01l-3-3" })] })),
+    xCircle: (_jsxs("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [_jsx("circle", { cx: "12", cy: "12", r: "10" }), _jsx("path", { d: "m15 9-6 6" }), _jsx("path", { d: "m9 9 6 6" })] })),
+    lightbulb: (_jsxs("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [_jsx("path", { d: "M15 14c.2-1 .7-1.7 1.5-2.5 1-.9 1.5-2.2 1.5-3.5A6 6 0 0 0 6 8c0 1 .2 2.2 1.5 3.5.7.7 1.3 1.5 1.5 2.5" }), _jsx("path", { d: "M9 18h6" }), _jsx("path", { d: "M10 22h4" })] })),
+    wrench: (_jsx("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", 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" }) })),
 };
-// Streaming Progress Message Component
-const StreamingProgressMessage = ({ streamingData }) => {
-    const { intent, progress, validation, retry, completion, error } = streamingData;
-    const [showCode, setShowCode] = useState(true); // Show code by default for better UX
-    const [copyStatus, setCopyStatus] = useState('idle');
-    // Handle copy to clipboard
-    const handleCopyCode = async (code) => {
-        try {
-            await navigator.clipboard.writeText(code);
-            setCopyStatus('copied');
-            setTimeout(() => setCopyStatus('idle'), 2000);
+// ============================================
+// Markdown Renderer
+// ============================================
+function renderMarkdown(content) {
+    const elements = [];
+    let key = 0;
+    // Split content into blocks (paragraphs, lists, headings)
+    const blocks = content.split(/\n\n+/);
+    blocks.forEach(block => {
+        if (!block.trim())
+            return;
+        // Check for headings (# ## ###)
+        const headingMatch = block.match(/^(#{1,6})\s+(.+)$/);
+        if (headingMatch) {
+            const level = headingMatch[1].length;
+            const text = headingMatch[2];
+            const inlineContent = parseInline(text);
+            switch (level) {
+                case 1:
+                    elements.push(_jsx("h1", { children: inlineContent }, key++));
+                    break;
+                case 2:
+                    elements.push(_jsx("h2", { children: inlineContent }, key++));
+                    break;
+                case 3:
+                    elements.push(_jsx("h3", { children: inlineContent }, key++));
+                    break;
+                case 4:
+                    elements.push(_jsx("h4", { children: inlineContent }, key++));
+                    break;
+                case 5:
+                    elements.push(_jsx("h5", { children: inlineContent }, key++));
+                    break;
+                case 6:
+                    elements.push(_jsx("h6", { children: inlineContent }, key++));
+                    break;
+            }
+            return;
         }
-        catch (err) {
-            console.error('Failed to copy:', err);
+        // Check for ordered lists (1. 2. 3.)
+        const orderedListMatch = block.match(/^(\d+\.\s+.+)$/m);
+        if (orderedListMatch) {
+            const items = block.split('\n').filter(line => /^\d+\.\s+/.test(line));
+            const listItems = items.map((item, i) => {
+                const text = item.replace(/^\d+\.\s+/, '');
+                return _jsx("li", { children: parseInline(text) }, i);
+            });
+            elements.push(_jsx("ol", { children: listItems }, key++));
+            return;
         }
-    };
-    // 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 ? 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' })] }), _jsx("pre", { style: STYLES.codeViewerPre, children: _jsx("code", { children: completion.code }) })] }))] }))] }) }));
-    }
-    // If error, show error
+        // Check for unordered lists (- or *)
+        const unorderedListMatch = block.match(/^[-*]\s+.+$/m);
+        if (unorderedListMatch) {
+            const items = block.split('\n').filter(line => /^[-*]\s+/.test(line));
+            const listItems = items.map((item, i) => {
+                const text = item.replace(/^[-*]\s+/, '');
+                return _jsx("li", { children: parseInline(text) }, i);
+            });
+            elements.push(_jsx("ul", { children: listItems }, key++));
+            return;
+        }
+        // Regular paragraph with line breaks preserved
+        const lines = block.split('\n');
+        const paragraphElements = lines.map((line, i) => (_jsxs(React.Fragment, { children: [parseInline(line), i < lines.length - 1 && _jsx("br", {})] }, i)));
+        elements.push(_jsx("p", { children: paragraphElements }, key++));
+    });
+    return _jsx("div", { className: "sui-markdown", children: elements });
+}
+// Parse inline markdown elements and status icons
+function parseInline(text) {
+    const parts = [];
+    let remaining = text;
+    // Replace status markers with icon components
+    // Use {{ICON:n}} format to avoid conflict with markdown underscore patterns
+    const iconReplacements = [
+        { pattern: /\[SUCCESS\]/g, index: 0, icon: _jsx("span", { className: "sui-icon-inline sui-icon-success", "aria-label": "Success", children: Icons.checkCircle }, "icon-0") },
+        { pattern: /\[ERROR\]/g, index: 1, icon: _jsx("span", { className: "sui-icon-inline sui-icon-error", "aria-label": "Error", children: Icons.xCircle }, "icon-1") },
+        { pattern: /\[TIP\]/g, index: 2, icon: _jsx("span", { className: "sui-icon-inline sui-icon-tip", "aria-label": "Tip", children: Icons.lightbulb }, "icon-2") },
+        { pattern: /\[WRENCH\]/g, index: 3, icon: _jsx("span", { className: "sui-icon-inline sui-icon-wrench", "aria-label": "Auto-fixed", children: Icons.wrench }, "icon-3") },
+    ];
+    iconReplacements.forEach(({ pattern, index, icon }) => {
+        remaining = remaining.replace(pattern, `{{ICON:${index}}}`);
+        parts[index] = icon;
+    });
+    // Parse bold, code, italic, and icon placeholders
+    // Icon placeholder {{ICON:n}} uses curly braces to avoid markdown conflicts
+    const regex = /(\*\*[^*]+\*\*|`[^`]+`|_[^_]+_|\{\{ICON:\d+\}\})/g;
+    const tokens = remaining.split(regex);
+    return tokens.map((token, i) => {
+        if (token.startsWith('**') && token.endsWith('**')) {
+            return _jsx("strong", { children: token.slice(2, -2) }, `inline-${i}`);
+        }
+        if (token.startsWith('`') && token.endsWith('`')) {
+            return _jsx("code", { children: token.slice(1, -1) }, `inline-${i}`);
+        }
+        if (token.startsWith('_') && token.endsWith('_') && !token.startsWith('{{')) {
+            return _jsx("em", { children: token.slice(1, -1) }, `inline-${i}`);
+        }
+        if (token.startsWith('{{ICON:')) {
+            const iconIndex = parseInt(token.match(/\{\{ICON:(\d+)\}\}/)?.[1] || '0');
+            return parts[iconIndex] || token;
+        }
+        return token;
+    }).filter(Boolean);
+}
+const Badge = ({ variant = 'default', children, className = '' }) => (_jsx("span", { className: `sui-badge sui-badge-${variant} ${className}`, children: children }));
+const ProgressIndicator = ({ streamingState }) => {
+    const { progress, retry, completion, error } = streamingState;
     if (error) {
-        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 })] })] }) }));
+        return (_jsxs("div", { className: "sui-error", role: "alert", children: [_jsx("strong", { children: error.message }), error.details && _jsx("div", { children: error.details }), error.suggestion && _jsx("div", { children: error.suggestion })] }));
+    }
+    if (completion) {
+        return (_jsxs("div", { className: "sui-completion", children: [_jsxs("div", { className: "sui-completion-header", children: [_jsx("span", { children: completion.success ? '\u2705' : '\u274C' }), _jsxs("span", { children: [completion.summary.action, ": ", completion.title] })] }), completion.componentsUsed.length > 0 && (_jsx("div", { className: "sui-completion-components", children: completion.componentsUsed.map((comp, i) => (_jsx("span", { className: "sui-completion-tag", children: comp.name }, i))) })), completion.metrics && (_jsxs("div", { className: "sui-completion-metrics", children: [_jsxs("span", { children: [(completion.metrics.totalTimeMs / 1000).toFixed(1), "s"] }), _jsxs("span", { children: [completion.metrics.llmCallsCount, " LLM calls"] })] }))] }));
     }
-    // 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", { 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: ["Retry ", retry.attempt, "/", retry.maxAttempts, ": ", retry.reason] })), !progress && !intent && (_jsx("div", { style: STYLES.progressPhase, children: _jsx("span", { className: "loading-dots", children: "Connecting" }) }))] }));
+    return (_jsxs("div", { className: "sui-progress", role: "progressbar", "aria-valuenow": progress?.step, "aria-valuemax": progress?.totalSteps, children: [_jsxs("div", { className: "sui-progress-header", children: [_jsx("span", { className: "sui-progress-label", children: progress?.message || 'Generating story...' }), progress && _jsxs("span", { className: "sui-progress-step", children: [progress.step, "/", progress.totalSteps] })] }), progress && (_jsx("div", { className: "sui-progress-bar", children: _jsx("div", { className: "sui-progress-fill", style: { width: `${(progress.step / progress.totalSteps) * 100}%` } }) })), retry && _jsxs("div", { className: "sui-progress-retry", children: ["Retry ", retry.attempt, "/", retry.maxAttempts, ": ", retry.reason] })] }));
 };
-// Main component
-function StoryUIPanel() {
-    const [input, setInput] = useState('');
-    const [conversation, setConversation] = useState([]);
-    const [loading, setLoading] = useState(false);
-    const [error, setError] = useState(null);
-    const [recentChats, setRecentChats] = useState([]);
-    const [activeChatId, setActiveChatId] = useState(null);
-    const [activeTitle, setActiveTitle] = useState('');
-    const [sidebarOpen, setSidebarOpen] = useState(true);
-    const [connectionStatus, setConnectionStatus] = useState({ connected: false });
-    const [availableProviders, setAvailableProviders] = useState([]);
-    const [selectedProvider, setSelectedProvider] = useState('');
-    const [selectedModel, setSelectedModel] = useState('');
-    const [streamingState, setStreamingState] = useState(null);
-    const [attachedImages, setAttachedImages] = useState([]);
-    const [considerations, setConsiderations] = useState('');
-    const [orphanStories, setOrphanStories] = useState([]);
-    const [selectedStoryIds, setSelectedStoryIds] = useState(new Set());
-    const [isBulkDeleting, setIsBulkDeleting] = useState(false);
+function StoryUIPanel({ mcpPort }) {
+    const [state, dispatch] = useReducer(panelReducer, initialState);
+    const [contextMenuId, setContextMenuId] = useState(null);
+    const [renamingChatId, setRenamingChatId] = useState(null);
+    const [renameValue, setRenameValue] = useState('');
     const chatEndRef = useRef(null);
     const inputRef = useRef(null);
     const fileInputRef = useRef(null);
     const abortControllerRef = useRef(null);
-    // Maximum images allowed
-    const MAX_IMAGES = 4;
-    const MAX_IMAGE_SIZE_MB = 20;
-    // Helper to convert file to base64
+    const hasShownRefreshHint = useRef(false);
+    // Set port override if provided
+    useEffect(() => {
+        if (mcpPort && typeof window !== 'undefined') {
+            window.STORY_UI_MCP_PORT = String(mcpPort);
+        }
+    }, [mcpPort]);
+    // Detect Storybook theme
+    useEffect(() => {
+        const detectTheme = () => {
+            const body = document.body;
+            const html = document.documentElement;
+            // Check URL parameters for Storybook background setting
+            const urlParams = new URLSearchParams(window.location.search);
+            const globals = urlParams.get('globals') || '';
+            const hasStorybookLightBg = globals.includes('backgrounds.value:light');
+            const hasStorybookDarkBg = globals.includes('backgrounds.value:dark') ||
+                globals.includes('backgrounds.value:%23') || // Hex colors starting with #
+                globals.includes('backgrounds.value:!hex');
+            // Check parent frame URL if we're in an iframe (Storybook 8+)
+            let parentHasDarkBg = false;
+            let parentHasLightBg = false;
+            let parentHasDarkClass = false;
+            try {
+                if (window.parent !== window) {
+                    const parentUrl = new URL(window.parent.location.href);
+                    const parentGlobals = parentUrl.searchParams.get('globals') || '';
+                    parentHasLightBg = parentGlobals.includes('backgrounds.value:light');
+                    parentHasDarkBg = parentGlobals.includes('backgrounds.value:dark') ||
+                        parentGlobals.includes('backgrounds.value:%23');
+                    // Check parent document for Storybook dark theme classes
+                    const parentBody = window.parent.document.body;
+                    const parentHtml = window.parent.document.documentElement;
+                    parentHasDarkClass = parentBody.classList.contains('sb-dark') ||
+                        parentHtml.classList.contains('dark') ||
+                        parentHtml.getAttribute('data-theme') === 'dark' ||
+                        parentBody.getAttribute('data-theme') === 'dark';
+                    // Check Storybook 8+ manager theme
+                    const sbMainEl = window.parent.document.querySelector('.sb-main-padded, .sb-show-main');
+                    if (sbMainEl) {
+                        const sbBgColor = window.getComputedStyle(sbMainEl).backgroundColor;
+                        const sbRgb = sbBgColor.match(/\d+/g);
+                        if (sbRgb && sbRgb.length >= 3) {
+                            const sbLuminance = (0.299 * parseInt(sbRgb[0]) + 0.587 * parseInt(sbRgb[1]) + 0.114 * parseInt(sbRgb[2])) / 255;
+                            if (sbLuminance < 0.5)
+                                parentHasDarkClass = true;
+                        }
+                    }
+                }
+            }
+            catch {
+                // Cross-origin access not allowed, ignore
+            }
+            // Check the actual background color of the body
+            const bgColor = window.getComputedStyle(body).backgroundColor;
+            const rgb = bgColor.match(/\d+/g);
+            let isBackgroundDark = false;
+            if (rgb && rgb.length >= 3) {
+                const luminance = (0.299 * parseInt(rgb[0]) + 0.587 * parseInt(rgb[1]) + 0.114 * parseInt(rgb[2])) / 255;
+                isBackgroundDark = luminance < 0.5;
+            }
+            // Check system preference as fallback
+            const systemPrefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
+            // Explicit light mode takes precedence - if user selected "light" in Storybook, respect that
+            const hasExplicitLightMode = hasStorybookLightBg || parentHasLightBg;
+            // Explicit dark mode indicators
+            const hasExplicitDarkMode = body.classList.contains('sb-dark') ||
+                html.classList.contains('dark') ||
+                html.getAttribute('data-theme') === 'dark' ||
+                body.getAttribute('data-theme') === 'dark' ||
+                hasStorybookDarkBg ||
+                parentHasDarkBg;
+            // Determine dark mode: explicit light mode forces light, otherwise check dark indicators
+            const isDark = hasExplicitLightMode
+                ? false
+                : (hasExplicitDarkMode || parentHasDarkClass || isBackgroundDark || systemPrefersDark);
+            dispatch({ type: 'SET_DARK_MODE', payload: isDark });
+        };
+        detectTheme();
+        // Listen for URL changes (Storybook uses popstate for navigation)
+        window.addEventListener('popstate', detectTheme);
+        // Poll for changes since Storybook might change background without popstate
+        const intervalId = setInterval(detectTheme, 500);
+        const observer = new MutationObserver(detectTheme);
+        observer.observe(document.body, { attributes: true, attributeFilter: ['class', 'data-theme', 'style'] });
+        observer.observe(document.documentElement, { attributes: true, attributeFilter: ['class', 'data-theme', 'style'] });
+        const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
+        mediaQuery.addEventListener('change', detectTheme);
+        return () => {
+            window.removeEventListener('popstate', detectTheme);
+            clearInterval(intervalId);
+            observer.disconnect();
+            mediaQuery.removeEventListener('change', detectTheme);
+        };
+    }, []);
+    // Close context menu when clicking outside
+    useEffect(() => {
+        if (!contextMenuId)
+            return;
+        const handleClickOutside = (e) => {
+            const target = e.target;
+            if (!target.closest('.sui-context-menu') && !target.closest('.sui-chat-item-menu')) {
+                setContextMenuId(null);
+            }
+        };
+        document.addEventListener('click', handleClickOutside);
+        return () => document.removeEventListener('click', handleClickOutside);
+    }, [contextMenuId]);
+    // Initialize on mount
+    useEffect(() => {
+        const initialize = async () => {
+            const connectionTest = await testMCPConnection();
+            dispatch({ type: 'SET_CONNECTION_STATUS', payload: connectionTest });
+            if (connectionTest.connected) {
+                try {
+                    const res = await fetch(PROVIDERS_API);
+                    if (res.ok) {
+                        const data = await res.json();
+                        dispatch({ type: 'SET_PROVIDERS', payload: data.providers.filter(p => p.configured) });
+                        if (data.current) {
+                            dispatch({ type: 'SET_SELECTED_PROVIDER', payload: data.current.provider.toLowerCase() });
+                            dispatch({ type: 'SET_SELECTED_MODEL', payload: data.current.model });
+                        }
+                    }
+                }
+                catch (e) {
+                    console.error('Failed to fetch providers:', e);
+                }
+                try {
+                    const res = await fetch(CONSIDERATIONS_API);
+                    if (res.ok) {
+                        const data = await res.json();
+                        if (data.hasConsiderations && data.considerations) {
+                            dispatch({ type: 'SET_CONSIDERATIONS', payload: data.considerations });
+                        }
+                    }
+                }
+                catch (e) {
+                    console.error('Failed to fetch considerations:', e);
+                }
+                const syncedChats = await syncWithActualStories();
+                const sortedChats = syncedChats.sort((a, b) => b.lastUpdated - a.lastUpdated).slice(0, MAX_RECENT_CHATS);
+                dispatch({ type: 'SET_RECENT_CHATS', payload: sortedChats });
+                if (sortedChats.length > 0) {
+                    dispatch({ type: 'SET_CONVERSATION', payload: sortedChats[0].conversation });
+                    dispatch({ type: 'SET_ACTIVE_CHAT', payload: { id: sortedChats[0].id, title: sortedChats[0].title } });
+                }
+            }
+            else {
+                const localChats = loadChats();
+                dispatch({ type: 'SET_RECENT_CHATS', payload: localChats });
+            }
+        };
+        initialize();
+    }, []);
+    // Scroll to bottom on new messages
+    useEffect(() => {
+        chatEndRef.current?.scrollIntoView({ behavior: 'smooth' });
+    }, [state.conversation, state.loading]);
+    // File handling
     const fileToBase64 = (file) => {
         return new Promise((resolve, reject) => {
             const reader = new FileReader();
             reader.readAsDataURL(file);
             reader.onload = () => {
                 const result = reader.result;
-                // Extract base64 data (remove data:image/...;base64, prefix)
-                const base64 = result.split(',')[1];
-                resolve(base64);
+                resolve(result.split(',')[1]);
             };
             reader.onerror = error => reject(error);
         });
     };
-    // Handle file selection
     const handleFileSelect = async (e) => {
         const files = e.target.files;
         if (!files)
             return;
-        const newImages = [];
         const errors = [];
-        for (let i = 0; i < files.length && (attachedImages.length + newImages.length) < MAX_IMAGES; i++) {
+        for (let i = 0; i < files.length && (state.attachedImages.length + i) < MAX_IMAGES; i++) {
             const file = files[i];
-            // Validate file type
             if (!file.type.startsWith('image/')) {
                 errors.push(`${file.name}: Not an image file`);
                 continue;
             }
-            // Validate file size
             if (file.size > MAX_IMAGE_SIZE_MB * 1024 * 1024) {
                 errors.push(`${file.name}: File too large (max ${MAX_IMAGE_SIZE_MB}MB)`);
                 continue;
@@ -1286,59 +597,42 @@ function StoryUIPanel() {
             try {
                 const base64 = await fileToBase64(file);
                 const preview = URL.createObjectURL(file);
-                newImages.push({
-                    id: `${Date.now()}-${i}`,
-                    file,
-                    preview,
-                    base64,
-                    mediaType: file.type || 'image/png',
+                dispatch({
+                    type: 'ADD_ATTACHED_IMAGE',
+                    payload: { id: `${Date.now()}-${i}`, file, preview, base64, mediaType: file.type || 'image/png' },
                 });
             }
-            catch (err) {
+            catch {
                 errors.push(`${file.name}: Failed to process`);
             }
         }
-        if (errors.length > 0) {
-            setError(errors.join('\n'));
-        }
-        setAttachedImages(prev => [...prev, ...newImages]);
-        // Reset file input
-        if (fileInputRef.current) {
+        if (errors.length > 0)
+            dispatch({ type: 'SET_ERROR', payload: errors.join('\n') });
+        if (fileInputRef.current)
             fileInputRef.current.value = '';
-        }
     };
-    // Remove attached image
     const removeAttachedImage = (id) => {
-        setAttachedImages(prev => {
-            const removed = prev.find(img => img.id === id);
-            if (removed) {
-                URL.revokeObjectURL(removed.preview);
-            }
-            return prev.filter(img => img.id !== id);
-        });
+        const img = state.attachedImages.find(i => i.id === id);
+        if (img)
+            URL.revokeObjectURL(img.preview);
+        dispatch({ type: 'REMOVE_ATTACHED_IMAGE', payload: id });
     };
-    // Clear all attached images
     const clearAttachedImages = () => {
-        attachedImages.forEach(img => URL.revokeObjectURL(img.preview));
-        setAttachedImages([]);
+        state.attachedImages.forEach(img => URL.revokeObjectURL(img.preview));
+        dispatch({ type: 'CLEAR_ATTACHED_IMAGES' });
     };
-    // Drag and drop state
-    const [isDragging, setIsDragging] = useState(false);
-    // Handle drag events
+    // Drag and drop handlers
     const handleDragEnter = useCallback((e) => {
         e.preventDefault();
         e.stopPropagation();
-        if (e.dataTransfer.types.includes('Files')) {
-            setIsDragging(true);
-        }
+        if (e.dataTransfer.types.includes('Files'))
+            dispatch({ type: 'SET_DRAGGING', payload: true });
     }, []);
     const handleDragLeave = useCallback((e) => {
         e.preventDefault();
         e.stopPropagation();
-        // Only set to false if we're leaving the main container
-        if (!e.currentTarget.contains(e.relatedTarget)) {
-            setIsDragging(false);
-        }
+        if (!e.currentTarget.contains(e.relatedTarget))
+            dispatch({ type: 'SET_DRAGGING', payload: false });
     }, []);
     const handleDragOver = useCallback((e) => {
         e.preventDefault();
@@ -1347,298 +641,132 @@ function StoryUIPanel() {
     const handleDrop = useCallback(async (e) => {
         e.preventDefault();
         e.stopPropagation();
-        setIsDragging(false);
+        dispatch({ type: 'SET_DRAGGING', payload: false });
         const files = Array.from(e.dataTransfer.files);
         const imageFiles = files.filter(f => f.type.startsWith('image/'));
         if (imageFiles.length === 0) {
-            setError('Please drop image files only');
+            dispatch({ type: 'SET_ERROR', payload: 'Please drop image files only' });
             return;
         }
-        const newImages = [];
         const errors = [];
-        for (let i = 0; i < imageFiles.length && (attachedImages.length + newImages.length) < MAX_IMAGES; i++) {
+        for (let i = 0; i < imageFiles.length && (state.attachedImages.length + i) < MAX_IMAGES; i++) {
             const file = imageFiles[i];
             if (file.size > MAX_IMAGE_SIZE_MB * 1024 * 1024) {
-                errors.push(`${file.name}: File too large (max ${MAX_IMAGE_SIZE_MB}MB)`);
+                errors.push(`${file.name}: File too large`);
                 continue;
             }
             try {
                 const base64 = await fileToBase64(file);
                 const preview = URL.createObjectURL(file);
-                newImages.push({
-                    id: `${Date.now()}-${i}`,
-                    file,
-                    preview,
-                    base64,
-                    mediaType: file.type || 'image/png',
+                dispatch({
+                    type: 'ADD_ATTACHED_IMAGE',
+                    payload: { id: `${Date.now()}-${i}`, file, preview, base64, mediaType: file.type || 'image/png' },
                 });
             }
-            catch (err) {
+            catch {
                 errors.push(`${file.name}: Failed to process`);
             }
         }
-        if (errors.length > 0) {
-            setError(errors.join('\n'));
-        }
-        setAttachedImages(prev => [...prev, ...newImages]);
-    }, [attachedImages.length, fileToBase64]);
-    // Handle clipboard paste for images
+        if (errors.length > 0)
+            dispatch({ type: 'SET_ERROR', payload: errors.join('\n') });
+    }, [state.attachedImages.length]);
+    // Paste handler
     const handlePaste = useCallback(async (e) => {
         const items = e.clipboardData?.items;
         if (!items)
             return;
         const imageItems = [];
         for (let i = 0; i < items.length; i++) {
-            if (items[i].type.startsWith('image/')) {
+            if (items[i].type.startsWith('image/'))
                 imageItems.push(items[i]);
-            }
         }
         if (imageItems.length === 0)
             return;
-        // Prevent default text paste behavior when pasting images
         e.preventDefault();
-        if (attachedImages.length >= MAX_IMAGES) {
-            setError(`Maximum ${MAX_IMAGES} images allowed`);
+        if (state.attachedImages.length >= MAX_IMAGES) {
+            dispatch({ type: 'SET_ERROR', payload: `Maximum ${MAX_IMAGES} images allowed` });
             return;
         }
-        const newImages = [];
-        const errors = [];
-        for (let i = 0; i < imageItems.length && (attachedImages.length + newImages.length) < MAX_IMAGES; i++) {
-            const item = imageItems[i];
-            const file = item.getAsFile();
-            if (!file) {
-                errors.push('Failed to get image from clipboard');
+        for (let i = 0; i < imageItems.length && (state.attachedImages.length + i) < MAX_IMAGES; i++) {
+            const file = imageItems[i].getAsFile();
+            if (!file)
                 continue;
-            }
-            if (file.size > MAX_IMAGE_SIZE_MB * 1024 * 1024) {
-                errors.push(`Pasted image too large (max ${MAX_IMAGE_SIZE_MB}MB)`);
-                continue;
-            }
             try {
                 const base64 = await fileToBase64(file);
                 const preview = URL.createObjectURL(file);
-                // Create a meaningful name for pasted images
                 const timestamp = new Date().toISOString().slice(11, 19).replace(/:/g, '-');
-                const renamedFile = new File([file], `pasted-image-${timestamp}.${file.type.split('/')[1] || 'png'}`, { type: file.type });
-                newImages.push({
-                    id: `paste-${Date.now()}-${i}`,
-                    file: renamedFile,
-                    preview,
-                    base64,
-                    mediaType: file.type || 'image/png',
+                dispatch({
+                    type: 'ADD_ATTACHED_IMAGE',
+                    payload: {
+                        id: `paste-${Date.now()}-${i}`,
+                        file: new File([file], `pasted-image-${timestamp}.png`, { type: file.type }),
+                        preview,
+                        base64,
+                        mediaType: file.type || 'image/png',
+                    },
                 });
             }
-            catch (err) {
-                errors.push('Failed to process pasted image');
+            catch {
+                dispatch({ type: 'SET_ERROR', payload: 'Failed to process pasted image' });
             }
         }
-        if (errors.length > 0) {
-            setError(errors.join('\n'));
-        }
-        if (newImages.length > 0) {
-            setAttachedImages(prev => [...prev, ...newImages]);
-            // Clear any existing error on successful paste
-            if (errors.length === 0) {
-                setError(null);
-            }
-        }
-    }, [attachedImages.length, fileToBase64]);
-    // Load and sync chats on mount
-    useEffect(() => {
-        const initializeChats = async () => {
-            // Test connection first
-            const connectionTest = await testMCPConnection();
-            setConnectionStatus(connectionTest);
-            if (connectionTest.connected) {
-                // Fetch available providers
-                try {
-                    const providersRes = await fetch(PROVIDERS_API);
-                    if (providersRes.ok) {
-                        const providersData = await providersRes.json();
-                        setAvailableProviders(providersData.providers.filter(p => p.configured));
-                        // Set initial selection from server defaults
-                        if (providersData.current) {
-                            setSelectedProvider(providersData.current.provider.toLowerCase());
-                            setSelectedModel(providersData.current.model);
-                        }
-                    }
-                }
-                catch (e) {
-                    console.error('Failed to fetch providers:', e);
-                }
-                // Fetch design system considerations for environment parity
-                // This ensures production gets the same considerations as local development
-                try {
-                    const considerationsRes = await fetch(CONSIDERATIONS_API);
-                    if (considerationsRes.ok) {
-                        const considerationsData = await considerationsRes.json();
-                        if (considerationsData.hasConsiderations && considerationsData.considerations) {
-                            setConsiderations(considerationsData.considerations);
-                            console.log(`Loaded considerations from ${considerationsData.source}`);
-                        }
-                    }
-                }
-                catch (e) {
-                    console.error('Failed to fetch considerations:', e);
-                }
-                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);
-                }
-                // 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
-                const localChats = loadChats();
-                setRecentChats(localChats);
-            }
-        };
-        initializeChats();
-    }, []);
-    // Scroll to bottom on new message
-    useEffect(() => {
-        if (chatEndRef.current) {
-            chatEndRef.current.scrollIntoView({ behavior: 'smooth' });
-        }
-    }, [conversation, loading]);
-    // Helper function for non-streaming fallback
-    const handleSendNonStreaming = async (userInput, newConversation) => {
-        const res = await fetch(MCP_API, {
-            method: 'POST',
-            headers: { 'Content-Type': 'application/json' },
-            body: JSON.stringify({
-                prompt: userInput,
-                conversation: newConversation,
-                fileName: activeChatId || undefined,
-                provider: selectedProvider || undefined,
-                model: selectedModel || undefined,
-                considerations: considerations || undefined,
-            }),
-        });
-        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. Response: ${text.substring(0, 200)}...`);
-        }
-        const data = await res.json();
-        if (!res.ok || !data.success)
-            throw new Error(data.error || 'Story generation failed');
-        return data;
-    };
-    // Helper function to build a conversational response from completion data
-    // Uses special markers [SUCCESS], [ERROR], [TIP], [WRENCH] that renderMarkdown converts to icons
-    // Track whether we've shown the refresh hint in this session
-    const hasShownRefreshHint = useRef(false);
+    }, [state.attachedImages.length]);
+    // Build response message
     const buildConversationalResponse = (completion, isUpdate) => {
         const parts = [];
         const statusMarker = completion.success ? '[SUCCESS]' : '[ERROR]';
-        // Lead with the result - more conversational
-        if (isUpdate) {
-            parts.push(`${statusMarker} **Updated: "${completion.title}"**`);
-        }
-        else {
-            parts.push(`${statusMarker} **Created: "${completion.title}"**`);
-        }
-        // Build component insights with reasons when available
+        parts.push(isUpdate ? `${statusMarker} **Updated: "${completion.title}"**` : `${statusMarker} **Created: "${completion.title}"**`);
         const componentCount = completion.componentsUsed?.length || 0;
         if (componentCount > 0) {
-            const componentList = completion.componentsUsed.slice(0, 5);
-            // Check if we have meaningful reasons (not just "Used in composition")
-            const componentsWithReasons = componentList.filter(c => c.reason && c.reason !== 'Used in composition');
-            if (componentsWithReasons.length > 0) {
-                // Show components with their reasons
-                const insights = componentsWithReasons
-                    .slice(0, 3)
-                    .map(c => `\`${c.name}\` - ${c.reason?.toLowerCase()}`)
-                    .join(', ');
-                parts.push(`\nUsed ${insights}${componentCount > 3 ? ` and ${componentCount - 3} more` : ''}.`);
-            }
-            else {
-                // Fallback to simple list
-                const names = componentList.map(c => `\`${c.name}\``).join(', ');
-                parts.push(`\nBuilt with ${names}${componentCount > 5 ? '...' : ''}.`);
-            }
+            const names = completion.componentsUsed.slice(0, 5).map(c => `\`${c.name}\``).join(', ');
+            parts.push(`\nBuilt with ${names}${componentCount > 5 ? '...' : ''}.`);
         }
-        // Add layout decisions with educational context
-        if (completion.layoutChoices && completion.layoutChoices.length > 0) {
-            const primaryLayout = completion.layoutChoices[0];
-            parts.push(`\n\n**Layout:** ${primaryLayout.pattern} - ${primaryLayout.reason.charAt(0).toLowerCase()}${primaryLayout.reason.slice(1)}.`);
+        if (completion.layoutChoices?.length > 0) {
+            const layout = completion.layoutChoices[0];
+            parts.push(`\n\n**Layout:** ${layout.pattern} - ${layout.reason}.`);
         }
-        // Add style choices only if they add value
-        if (completion.styleChoices && completion.styleChoices.length > 0) {
-            const notableStyles = completion.styleChoices.filter(s => s.reason && s.reason !== 'Semantic color from design system');
-            if (notableStyles.length > 0) {
-                const styleInfo = notableStyles[0];
-                parts.push(` Applied \`${styleInfo.value}\` for ${styleInfo.reason?.toLowerCase() || 'visual consistency'}.`);
-            }
-        }
-        // Add validation fixes notice
         if (completion.validation?.autoFixApplied) {
             parts.push(`\n\n[WRENCH] **Auto-fixed:** Minor syntax issues were automatically corrected.`);
         }
-        // Add suggestions only if meaningful
-        if (completion.suggestions && completion.suggestions.length > 0) {
-            const suggestion = completion.suggestions[0];
-            // Only show if it's not the generic "review the generated code" message
-            if (!suggestion.toLowerCase().includes('review the generated code')) {
-                parts.push(`\n\n[TIP] **Tip:** ${suggestion}`);
-            }
+        if (completion.suggestions && completion.suggestions.length > 0 && !completion.suggestions[0].toLowerCase().includes('review the generated code')) {
+            parts.push(`\n\n[TIP] **Tip:** ${completion.suggestions[0]}`);
         }
-        // Show refresh hint only once per session for new stories (local mode only)
-        // 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 recent chats navigation._`);
-            }
-            else {
-                parts.push(`\n\n_Might need toefresh Storybook (Cmd/Ctrl + R) to see new stories in the sidebar._`);
-            }
+            parts.push(isEdgeMode() ? `\n\n_Story saved to cloud._` : `\n\n_Might need to refresh Storybook (Cmd/Ctrl + R) to see new stories._`);
             hasShownRefreshHint.current = true;
         }
-        // Add metrics in a subtle way (if available)
         if (completion.metrics?.totalTimeMs) {
-            const seconds = (completion.metrics.totalTimeMs / 1000).toFixed(1);
-            parts.push(`\n\n_${seconds}s_`);
+            parts.push(`\n\n_${(completion.metrics.totalTimeMs / 1000).toFixed(1)}s_`);
         }
         return parts.join('');
     };
-    // Helper function to finalize conversation after streaming completes
+    // Finalize streaming
     const finalizeStreamingConversation = useCallback((newConversation, completion, userInput) => {
-        // Build conversational response using rich completion data
         const isUpdate = completion.summary.action === 'updated';
         const responseMessage = buildConversationalResponse(completion, isUpdate);
         const aiMsg = { role: 'ai', content: responseMessage };
         const updatedConversation = [...newConversation, aiMsg];
-        setConversation(updatedConversation);
-        // Update chat session
-        const isExistingSession = activeChatId && conversation.length > 0;
-        if (isExistingSession && activeChatId) {
+        dispatch({ type: 'SET_CONVERSATION', payload: updatedConversation });
+        const isExistingSession = state.activeChatId && state.conversation.length > 0;
+        if (isExistingSession && state.activeChatId) {
             const updatedSession = {
-                id: activeChatId,
-                title: activeTitle,
-                fileName: completion.fileName || activeChatId,
+                id: state.activeChatId,
+                title: state.activeTitle,
+                fileName: completion.fileName || state.activeChatId,
                 conversation: updatedConversation,
                 lastUpdated: Date.now(),
             };
             const chats = loadChats();
-            const chatIndex = chats.findIndex(c => c.id === activeChatId);
-            if (chatIndex !== -1) {
+            const chatIndex = chats.findIndex(c => c.id === state.activeChatId);
+            if (chatIndex !== -1)
                 chats[chatIndex] = updatedSession;
-            }
             saveChats(chats);
-            setRecentChats(chats);
+            dispatch({ type: 'SET_RECENT_CHATS', payload: chats });
         }
         else {
             const chatId = completion.storyId || completion.fileName || Date.now().toString();
             const chatTitle = completion.title || userInput;
-            setActiveChatId(chatId);
-            setActiveTitle(chatTitle);
+            dispatch({ type: 'SET_ACTIVE_CHAT', payload: { id: chatId, title: chatTitle } });
             const newSession = {
                 id: chatId,
                 title: chatTitle,
@@ -1648,66 +776,48 @@ function StoryUIPanel() {
             };
             const chats = loadChats().filter(c => c.id !== chatId);
             chats.unshift(newSession);
-            if (chats.length > MAX_RECENT_CHATS) {
+            if (chats.length > MAX_RECENT_CHATS)
                 chats.splice(MAX_RECENT_CHATS);
-            }
             saveChats(chats);
-            setRecentChats(chats);
-            // Auto-navigate to the newly created story after HMR processes the file
-            // 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);
+            dispatch({ type: 'SET_RECENT_CHATS', payload: chats });
         }
-    }, [activeChatId, activeTitle, conversation.length]);
+    }, [state.activeChatId, state.activeTitle, state.conversation.length]);
+    // Handle send
     const handleSend = async (e) => {
         if (e)
             e.preventDefault();
-        // Allow sending with either text or images
-        if (!input.trim() && attachedImages.length === 0)
+        if (!state.input.trim() && state.attachedImages.length === 0)
             return;
-        // Use input text or default vision prompt if only images
-        const userInput = input.trim() || (attachedImages.length > 0 ? 'Create a component that matches this design' : '');
-        setError(null);
-        setLoading(true);
-        setStreamingState(null);
-        // Test connection before sending
+        const userInput = state.input.trim() || (state.attachedImages.length > 0 ? 'Create a component that matches this design' : '');
+        dispatch({ type: 'SET_ERROR', payload: null });
+        dispatch({ type: 'SET_LOADING', payload: true });
+        dispatch({ type: 'SET_STREAMING_STATE', payload: null });
         const connectionTest = await testMCPConnection();
-        setConnectionStatus(connectionTest);
+        dispatch({ type: 'SET_CONNECTION_STATUS', payload: connectionTest });
         if (!connectionTest.connected) {
-            setError(`Cannot connect to MCP server: ${connectionTest.error || 'Server not running'}`);
-            setLoading(false);
+            dispatch({ type: 'SET_ERROR', payload: `Cannot connect to MCP server: ${connectionTest.error || 'Server not running'}` });
+            dispatch({ type: 'SET_LOADING', payload: false });
             return;
         }
-        // Capture images before clearing
-        const imagesToSend = [...attachedImages];
+        const imagesToSend = [...state.attachedImages];
         const hasImages = imagesToSend.length > 0;
-        // Create user message with images
         const userMessage = {
             role: 'user',
             content: userInput,
-            attachedImages: hasImages ? imagesToSend : undefined
+            attachedImages: hasImages ? imagesToSend : undefined,
         };
-        const newConversation = [...conversation, userMessage];
-        setConversation(newConversation);
-        setInput('');
+        const newConversation = [...state.conversation, userMessage];
+        dispatch({ type: 'SET_CONVERSATION', payload: newConversation });
+        dispatch({ type: 'SET_INPUT', payload: '' });
         clearAttachedImages();
-        // Use streaming if enabled
         if (USE_STREAMING) {
             try {
-                // Cancel any existing request
-                if (abortControllerRef.current) {
+                if (abortControllerRef.current)
                     abortControllerRef.current.abort();
-                }
                 abortControllerRef.current = new AbortController();
-                // Initialize streaming state
-                setStreamingState({});
-                // Prepare images for API request
+                dispatch({ type: 'SET_STREAMING_STATE', payload: {} });
                 const imagePayload = hasImages
-                    ? imagesToSend.map(img => ({
-                        type: 'base64',
-                        data: img.base64,
-                        mediaType: img.file.type,
-                    }))
+                    ? imagesToSend.map(img => ({ type: 'base64', data: img.base64, mediaType: img.file.type }))
                     : undefined;
                 const response = await fetch(MCP_STREAM_API, {
                     method: 'POST',
@@ -1715,25 +825,23 @@ function StoryUIPanel() {
                     body: JSON.stringify({
                         prompt: userInput,
                         conversation: newConversation,
-                        fileName: activeChatId || undefined,
-                        isUpdate: activeChatId && conversation.length > 0,
-                        originalTitle: activeTitle || undefined,
-                        storyId: activeChatId || undefined,
+                        fileName: state.activeChatId || undefined,
+                        isUpdate: state.activeChatId && state.conversation.length > 0,
+                        originalTitle: state.activeTitle || undefined,
+                        storyId: state.activeChatId || undefined,
                         images: imagePayload,
                         visionMode: hasImages ? 'screenshot_to_story' : undefined,
-                        provider: selectedProvider || undefined,
-                        model: selectedModel || undefined,
-                        considerations: considerations || undefined,
+                        provider: state.selectedProvider || undefined,
+                        model: state.selectedModel || undefined,
+                        considerations: state.considerations || undefined,
                     }),
                     signal: abortControllerRef.current.signal,
                 });
-                if (!response.ok) {
+                if (!response.ok)
                     throw new Error(`Streaming request failed: ${response.status}`);
-                }
                 const reader = response.body?.getReader();
-                if (!reader) {
+                if (!reader)
                     throw new Error('No response body');
-                }
                 const decoder = new TextDecoder();
                 let buffer = '';
                 let completionData = null;
@@ -1743,215 +851,109 @@ function StoryUIPanel() {
                     if (done)
                         break;
                     buffer += decoder.decode(value, { stream: true });
-                    // Parse SSE events from buffer
                     const lines = buffer.split('\n');
-                    buffer = lines.pop() || ''; // Keep incomplete line in buffer
+                    buffer = lines.pop() || '';
                     for (const line of lines) {
                         if (line.startsWith('data: ')) {
                             try {
                                 const event = JSON.parse(line.slice(6));
-                                // Update streaming state based on event type
                                 switch (event.type) {
                                     case 'intent':
-                                        setStreamingState(prev => ({ ...prev, intent: event.data }));
+                                        dispatch({ type: 'UPDATE_STREAMING_STATE', payload: { intent: event.data } });
                                         break;
                                     case 'progress':
-                                        setStreamingState(prev => ({ ...prev, progress: event.data }));
+                                        dispatch({ type: 'UPDATE_STREAMING_STATE', payload: { progress: event.data } });
                                         break;
                                     case 'validation':
-                                        setStreamingState(prev => ({ ...prev, validation: event.data }));
+                                        dispatch({ type: 'UPDATE_STREAMING_STATE', payload: { validation: event.data } });
                                         break;
                                     case 'retry':
-                                        setStreamingState(prev => ({ ...prev, retry: event.data }));
+                                        dispatch({ type: 'UPDATE_STREAMING_STATE', payload: { retry: event.data } });
                                         break;
                                     case 'completion':
                                         completionData = event.data;
-                                        setStreamingState(prev => ({ ...prev, completion: event.data }));
+                                        dispatch({ type: 'UPDATE_STREAMING_STATE', payload: { completion: completionData } });
                                         break;
                                     case 'error':
                                         errorData = event.data;
-                                        setStreamingState(prev => ({ ...prev, error: event.data }));
+                                        dispatch({ type: 'UPDATE_STREAMING_STATE', payload: { error: errorData } });
                                         break;
                                 }
                             }
-                            catch (parseError) {
-                                console.warn('Failed to parse SSE event:', line, parseError);
+                            catch {
+                                console.warn('Failed to parse SSE event:', line);
                             }
                         }
                     }
                 }
-                // Handle completion or error
                 if (completionData) {
                     finalizeStreamingConversation(newConversation, completionData, userInput);
                 }
                 else if (errorData) {
-                    setError(errorData.message);
+                    dispatch({ type: 'SET_ERROR', payload: errorData.message });
                     const errorConversation = [...newConversation, { role: 'ai', content: `Error: ${errorData.message}\n\n${errorData.suggestion || ''}` }];
-                    setConversation(errorConversation);
+                    dispatch({ type: 'SET_CONVERSATION', payload: errorConversation });
                 }
             }
             catch (err) {
-                if (err.name === 'AbortError') {
-                    console.log('Request aborted');
+                if (err.name === 'AbortError')
                     return;
-                }
-                // Fall back to non-streaming on error
                 console.warn('Streaming failed, falling back to non-streaming:', err);
-                setStreamingState(null);
+                dispatch({ type: 'SET_STREAMING_STATE', payload: null });
                 try {
-                    const data = await handleSendNonStreaming(userInput, newConversation);
-                    // Process non-streaming response (same as before)
-                    let responseMessage;
-                    const statusMarker = data.validation?.hasWarnings ? (data.validation.errors?.length > 0 ? '[WRENCH]' : '[TIP]') : '[SUCCESS]';
-                    // Build conversational response for fallback
-                    if (data.isUpdate) {
-                        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 = `${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 res = await fetch(MCP_API, {
+                        method: 'POST',
+                        headers: { 'Content-Type': 'application/json' },
+                        body: JSON.stringify({
+                            prompt: userInput,
+                            conversation: newConversation,
+                            fileName: state.activeChatId || undefined,
+                            provider: state.selectedProvider || undefined,
+                            model: state.selectedModel || undefined,
+                            considerations: state.considerations || undefined,
+                        }),
+                    });
+                    const data = await res.json();
+                    if (!res.ok || !data.success)
+                        throw new Error(data.error || 'Story generation failed');
+                    const responseMessage = `[SUCCESS] **Created: "${data.title}"**\n\nStory generated successfully.`;
                     const aiMsg = { role: 'ai', content: responseMessage };
                     const updatedConversation = [...newConversation, aiMsg];
-                    setConversation(updatedConversation);
-                    // Update chat session
-                    const isUpdate = activeChatId && conversation.length > 0;
-                    if (isUpdate && activeChatId) {
-                        const updatedSession = {
-                            id: activeChatId,
-                            title: activeTitle,
-                            fileName: data.fileName || activeChatId,
-                            conversation: updatedConversation,
-                            lastUpdated: Date.now(),
-                        };
-                        const chats = loadChats();
-                        const chatIndex = chats.findIndex(c => c.id === activeChatId);
-                        if (chatIndex !== -1)
-                            chats[chatIndex] = updatedSession;
-                        saveChats(chats);
-                        setRecentChats(chats);
-                    }
-                    else {
-                        const chatId = data.storyId || data.fileName || Date.now().toString();
-                        const chatTitle = data.title || userInput;
-                        setActiveChatId(chatId);
-                        setActiveTitle(chatTitle);
-                        const newSession = {
-                            id: chatId,
-                            title: chatTitle,
-                            fileName: data.fileName || '',
-                            conversation: updatedConversation,
-                            lastUpdated: Date.now(),
-                        };
-                        const chats = loadChats().filter(c => c.id !== chatId);
-                        chats.unshift(newSession);
-                        if (chats.length > MAX_RECENT_CHATS)
-                            chats.splice(MAX_RECENT_CHATS);
-                        saveChats(chats);
-                        setRecentChats(chats);
-                        // Auto-navigate to the newly created story
-                        navigateToNewStory(chatTitle, data.code);
-                    }
+                    dispatch({ type: 'SET_CONVERSATION', payload: updatedConversation });
                 }
                 catch (fallbackErr) {
                     const errorMessage = fallbackErr instanceof Error ? fallbackErr.message : 'Unknown error';
-                    setError(errorMessage);
+                    dispatch({ type: 'SET_ERROR', payload: errorMessage });
                     const errorConversation = [...newConversation, { role: 'ai', content: `Error: ${errorMessage}` }];
-                    setConversation(errorConversation);
+                    dispatch({ type: 'SET_CONVERSATION', payload: errorConversation });
                 }
             }
             finally {
-                setLoading(false);
-                setStreamingState(null);
+                dispatch({ type: 'SET_LOADING', payload: false });
+                dispatch({ type: 'SET_STREAMING_STATE', payload: null });
                 abortControllerRef.current = null;
             }
         }
-        else {
-            // Non-streaming mode (original implementation)
-            try {
-                const data = await handleSendNonStreaming(userInput, newConversation);
-                let responseMessage;
-                const statusMarker = data.validation?.hasWarnings ? (data.validation.errors?.length > 0 ? '[WRENCH]' : '[TIP]') : '[SUCCESS]';
-                // Build conversational response for non-streaming mode
-                if (data.isUpdate) {
-                    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 = `${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];
-                setConversation(updatedConversation);
-                const isUpdate = activeChatId && conversation.length > 0;
-                if (isUpdate && activeChatId) {
-                    const updatedSession = {
-                        id: activeChatId,
-                        title: activeTitle,
-                        fileName: data.fileName || activeChatId,
-                        conversation: updatedConversation,
-                        lastUpdated: Date.now(),
-                    };
-                    const chats = loadChats();
-                    const chatIndex = chats.findIndex(c => c.id === activeChatId);
-                    if (chatIndex !== -1)
-                        chats[chatIndex] = updatedSession;
-                    saveChats(chats);
-                    setRecentChats(chats);
-                }
-                else {
-                    const chatId = data.storyId || data.fileName || Date.now().toString();
-                    const chatTitle = data.title || userInput;
-                    setActiveChatId(chatId);
-                    setActiveTitle(chatTitle);
-                    const newSession = {
-                        id: chatId,
-                        title: chatTitle,
-                        fileName: data.fileName || '',
-                        conversation: updatedConversation,
-                        lastUpdated: Date.now(),
-                    };
-                    const chats = loadChats().filter(c => c.id !== chatId);
-                    chats.unshift(newSession);
-                    if (chats.length > MAX_RECENT_CHATS)
-                        chats.splice(MAX_RECENT_CHATS);
-                    saveChats(chats);
-                    setRecentChats(chats);
-                }
-            }
-            catch (err) {
-                const errorMessage = err instanceof Error ? err.message : 'Unknown error';
-                setError(errorMessage);
-                const errorConversation = [...newConversation, { role: 'ai', content: `Error: ${errorMessage}` }];
-                setConversation(errorConversation);
-            }
-            finally {
-                setLoading(false);
-            }
-        }
     };
+    // Chat management
     const handleSelectChat = (chat) => {
-        setConversation(chat.conversation);
-        setActiveChatId(chat.id);
-        setActiveTitle(chat.title);
-    };
-    const handleNewChat = () => {
-        setConversation([]);
-        setActiveChatId(null);
-        setActiveTitle('');
+        dispatch({ type: 'SET_CONVERSATION', payload: chat.conversation });
+        dispatch({ type: 'SET_ACTIVE_CHAT', payload: { id: chat.id, title: chat.title } });
     };
+    const handleNewChat = () => dispatch({ type: 'NEW_CHAT' });
     const handleDeleteChat = async (chatId, e) => {
-        e.stopPropagation(); // Prevent selecting the chat
+        if (e)
+            e.stopPropagation();
+        setContextMenuId(null);
         if (confirm('Delete this story and chat? This action cannot be undone.')) {
             const success = await deleteStoryAndChat(chatId);
             if (success) {
-                // Update local state
-                const updatedChats = recentChats.filter(chat => chat.id !== chatId);
-                setRecentChats(updatedChats);
-                // If we deleted the active chat, switch to another or clear
-                if (activeChatId === chatId) {
+                const updatedChats = state.recentChats.filter(chat => chat.id !== chatId);
+                dispatch({ type: 'SET_RECENT_CHATS', payload: updatedChats });
+                if (state.activeChatId === chatId) {
                     if (updatedChats.length > 0) {
-                        setConversation(updatedChats[0].conversation);
-                        setActiveChatId(updatedChats[0].id);
-                        setActiveTitle(updatedChats[0].title);
+                        dispatch({ type: 'SET_CONVERSATION', payload: updatedChats[0].conversation });
+                        dispatch({ type: 'SET_ACTIVE_CHAT', payload: { id: updatedChats[0].id, title: updatedChats[0].title } });
                     }
                     else {
                         handleNewChat();
@@ -1963,372 +965,124 @@ function StoryUIPanel() {
             }
         }
     };
-    // Toggle story selection for bulk operations
-    const toggleStorySelection = (storyId) => {
-        setSelectedStoryIds(prev => {
-            const newSet = new Set(prev);
-            if (newSet.has(storyId)) {
-                newSet.delete(storyId);
-            }
-            else {
-                newSet.add(storyId);
+    const handleStartRename = (chatId, currentTitle, e) => {
+        if (e)
+            e.stopPropagation();
+        setContextMenuId(null);
+        setRenamingChatId(chatId);
+        setRenameValue(currentTitle);
+    };
+    const handleConfirmRename = (chatId) => {
+        if (!renameValue.trim()) {
+            setRenamingChatId(null);
+            return;
+        }
+        const chats = loadChats();
+        const chatIndex = chats.findIndex(c => c.id === chatId);
+        if (chatIndex !== -1) {
+            chats[chatIndex].title = renameValue.trim();
+            saveChats(chats);
+            dispatch({ type: 'SET_RECENT_CHATS', payload: chats });
+            if (state.activeChatId === chatId) {
+                dispatch({ type: 'SET_ACTIVE_CHAT', payload: { id: chatId, title: renameValue.trim() } });
             }
-            return newSet;
-        });
+        }
+        setRenamingChatId(null);
+        setRenameValue('');
+    };
+    const handleCancelRename = () => {
+        setRenamingChatId(null);
+        setRenameValue('');
     };
-    // Select/deselect all stories
+    // Orphan story handlers
     const toggleSelectAll = () => {
-        if (selectedStoryIds.size === orphanStories.length) {
-            setSelectedStoryIds(new Set());
+        if (state.selectedStoryIds.size === state.orphanStories.length) {
+            dispatch({ type: 'SET_SELECTED_STORY_IDS', payload: new Set() });
         }
         else {
-            setSelectedStoryIds(new Set(orphanStories.map(s => s.id)));
+            dispatch({ type: 'SET_SELECTED_STORY_IDS', payload: new Set(state.orphanStories.map(s => s.id)) });
         }
     };
-    // Bulk delete selected stories
     const handleBulkDelete = async () => {
-        if (selectedStoryIds.size === 0)
+        if (state.selectedStoryIds.size === 0)
             return;
-        const count = selectedStoryIds.size;
-        if (!confirm(`Delete ${count} selected ${count === 1 ? 'story' : 'stories'}? This action cannot be undone.`)) {
+        const count = state.selectedStoryIds.size;
+        if (!confirm(`Delete ${count} selected ${count === 1 ? 'story' : 'stories'}?`))
             return;
-        }
-        setIsBulkDeleting(true);
+        dispatch({ type: 'SET_BULK_DELETING', payload: true });
         try {
             const response = await fetch(`${STORIES_API}/delete-bulk`, {
                 method: 'POST',
                 headers: { 'Content-Type': 'application/json' },
-                body: JSON.stringify({ ids: Array.from(selectedStoryIds) }),
+                body: JSON.stringify({ ids: Array.from(state.selectedStoryIds) }),
             });
             if (response.ok) {
-                const result = await response.json();
-                // Remove deleted stories from state
-                setOrphanStories(prev => prev.filter(s => !selectedStoryIds.has(s.id)));
-                setSelectedStoryIds(new Set());
-                console.log(`Deleted ${result.deleted?.length || count} stories`);
+                dispatch({ type: 'SET_ORPHAN_STORIES', payload: state.orphanStories.filter(s => !state.selectedStoryIds.has(s.id)) });
+                dispatch({ type: 'SET_SELECTED_STORY_IDS', payload: new Set() });
             }
             else {
-                alert('Failed to delete some stories. Please try again.');
+                alert('Failed to delete some stories.');
             }
         }
-        catch (err) {
-            console.error('Error bulk deleting stories:', err);
-            alert('Failed to delete stories. Please try again.');
+        catch {
+            alert('Failed to delete stories.');
         }
         finally {
-            setIsBulkDeleting(false);
+            dispatch({ type: 'SET_BULK_DELETING', payload: false });
         }
     };
-    // Clear all generated stories
     const handleClearAll = async () => {
-        if (orphanStories.length === 0)
+        if (state.orphanStories.length === 0)
             return;
-        if (!confirm(`Delete ALL ${orphanStories.length} generated stories? This action cannot be undone.`)) {
+        if (!confirm(`Delete ALL ${state.orphanStories.length} generated stories?`))
             return;
-        }
-        setIsBulkDeleting(true);
+        dispatch({ type: 'SET_BULK_DELETING', payload: true });
         try {
-            const response = await fetch(STORIES_API, {
-                method: 'DELETE',
-            });
+            const response = await fetch(STORIES_API, { method: 'DELETE' });
             if (response.ok) {
-                const result = await response.json();
-                setOrphanStories([]);
-                setSelectedStoryIds(new Set());
-                console.log(`Cleared ${result.deleted || 'all'} stories`);
+                dispatch({ type: 'SET_ORPHAN_STORIES', payload: [] });
+                dispatch({ type: 'SET_SELECTED_STORY_IDS', payload: new Set() });
             }
             else {
-                alert('Failed to clear stories. Please try again.');
+                alert('Failed to clear stories.');
             }
         }
-        catch (err) {
-            console.error('Error clearing stories:', err);
-            alert('Failed to clear stories. Please try again.');
+        catch {
+            alert('Failed to clear stories.');
         }
         finally {
-            setIsBulkDeleting(false);
+            dispatch({ type: 'SET_BULK_DELETING', payload: false });
+        }
+    };
+    const handleDeleteOrphan = async (storyId) => {
+        try {
+            const response = await fetch(`${STORIES_API}/${storyId}`, { method: 'DELETE' });
+            if (response.ok) {
+                dispatch({ type: 'SET_ORPHAN_STORIES', payload: state.orphanStories.filter(s => s.id !== storyId) });
+                const newSet = new Set(state.selectedStoryIds);
+                newSet.delete(storyId);
+                dispatch({ type: 'SET_SELECTED_STORY_IDS', payload: newSet });
+            }
+        }
+        catch (err) {
+            console.error('Error deleting orphan story:', err);
         }
     };
-    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.background = 'rgba(59, 130, 246, 0.25)';
-                                    e.currentTarget.style.borderColor = 'rgba(59, 130, 246, 0.5)';
-                                }, onMouseLeave: (e) => {
-                                    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.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',
-                                    fontWeight: '500',
-                                    textTransform: 'uppercase',
-                                    letterSpacing: '0.05em',
-                                }, children: "Recent Chats" })), recentChats.map(chat => (_jsxs("div", { onClick: () => handleSelectChat(chat), style: {
-                                    ...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');
-                                    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');
-                                    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: _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: {
-                                            display: 'flex',
-                                            alignItems: 'center',
-                                            justifyContent: 'space-between',
-                                            marginTop: '16px',
-                                            marginBottom: '8px',
-                                        }, children: _jsxs("div", { style: {
-                                                display: 'flex',
-                                                alignItems: 'center',
-                                                gap: '8px',
-                                            }, children: [_jsx("input", { type: "checkbox", checked: selectedStoryIds.size === orphanStories.length && orphanStories.length > 0, onChange: toggleSelectAll, style: {
-                                                        width: '14px',
-                                                        height: '14px',
-                                                        cursor: 'pointer',
-                                                        accentColor: '#3b82f6',
-                                                    }, title: selectedStoryIds.size === orphanStories.length ? 'Deselect all' : 'Select all' }), _jsxs("span", { style: {
-                                                        color: '#64748b',
-                                                        fontSize: '12px',
-                                                        fontWeight: '500',
-                                                        textTransform: 'uppercase',
-                                                        letterSpacing: '0.05em',
-                                                    }, children: ["Generated Files (", orphanStories.length, ")"] })] }) }), selectedStoryIds.size > 0 && (_jsx("div", { style: {
-                                            display: 'flex',
-                                            gap: '8px',
-                                            marginBottom: '12px',
-                                        }, children: _jsx("button", { onClick: handleBulkDelete, disabled: isBulkDeleting, style: {
-                                                flex: 1,
-                                                padding: '6px 10px',
-                                                fontSize: '11px',
-                                                fontWeight: '500',
-                                                background: 'rgba(239, 68, 68, 0.15)',
-                                                color: '#f87171',
-                                                border: '1px solid rgba(239, 68, 68, 0.3)',
-                                                borderRadius: '6px',
-                                                cursor: isBulkDeleting ? 'not-allowed' : 'pointer',
-                                                opacity: isBulkDeleting ? 0.6 : 1,
-                                                transition: 'all 0.15s ease',
-                                            }, onMouseEnter: (e) => {
-                                                if (!isBulkDeleting) {
-                                                    e.currentTarget.style.background = 'rgba(239, 68, 68, 0.25)';
-                                                }
-                                            }, onMouseLeave: (e) => {
-                                                e.currentTarget.style.background = 'rgba(239, 68, 68, 0.15)';
-                                            }, children: isBulkDeleting ? 'Deleting...' : `Delete Selected (${selectedStoryIds.size})` }) })), _jsx("div", { style: {
-                                            display: 'flex',
-                                            gap: '8px',
-                                            marginBottom: '12px',
-                                        }, children: _jsx("button", { onClick: handleClearAll, disabled: isBulkDeleting || orphanStories.length === 0, style: {
-                                                flex: 1,
-                                                padding: '6px 10px',
-                                                fontSize: '11px',
-                                                fontWeight: '500',
-                                                background: 'rgba(100, 116, 139, 0.15)',
-                                                color: '#94a3b8',
-                                                border: '1px solid rgba(100, 116, 139, 0.3)',
-                                                borderRadius: '6px',
-                                                cursor: (isBulkDeleting || orphanStories.length === 0) ? 'not-allowed' : 'pointer',
-                                                opacity: (isBulkDeleting || orphanStories.length === 0) ? 0.6 : 1,
-                                                transition: 'all 0.15s ease',
-                                            }, onMouseEnter: (e) => {
-                                                if (!isBulkDeleting && orphanStories.length > 0) {
-                                                    e.currentTarget.style.background = 'rgba(239, 68, 68, 0.15)';
-                                                    e.currentTarget.style.color = '#f87171';
-                                                    e.currentTarget.style.borderColor = 'rgba(239, 68, 68, 0.3)';
-                                                }
-                                            }, onMouseLeave: (e) => {
-                                                e.currentTarget.style.background = 'rgba(100, 116, 139, 0.15)';
-                                                e.currentTarget.style.color = '#94a3b8';
-                                                e.currentTarget.style.borderColor = 'rgba(100, 116, 139, 0.3)';
-                                            }, children: "Clear All Stories" }) }), orphanStories.map(story => (_jsxs("div", { style: {
-                                            ...STYLES.chatItem,
-                                            background: selectedStoryIds.has(story.id)
-                                                ? 'rgba(59, 130, 246, 0.15)'
-                                                : 'rgba(251, 191, 36, 0.1)',
-                                            borderLeft: selectedStoryIds.has(story.id)
-                                                ? '3px solid rgba(59, 130, 246, 0.5)'
-                                                : '3px solid rgba(251, 191, 36, 0.5)',
-                                            display: 'flex',
-                                            alignItems: 'flex-start',
-                                            gap: '8px',
-                                        }, onMouseEnter: (e) => {
-                                            if (!selectedStoryIds.has(story.id)) {
-                                                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) => {
-                                            if (!selectedStoryIds.has(story.id)) {
-                                                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("input", { type: "checkbox", checked: selectedStoryIds.has(story.id), onChange: () => toggleStorySelection(story.id), onClick: (e) => e.stopPropagation(), style: {
-                                                    width: '14px',
-                                                    height: '14px',
-                                                    cursor: 'pointer',
-                                                    accentColor: '#3b82f6',
-                                                    marginTop: '2px',
-                                                    flexShrink: 0,
-                                                } }), _jsxs("div", { style: { flex: 1, minWidth: 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));
-                                                            setSelectedStoryIds(prev => {
-                                                                const newSet = new Set(prev);
-                                                                newSet.delete(story.id);
-                                                                return newSet;
-                                                            });
-                                                        }
-                                                        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',
-                                padding: '0',
-                                fontSize: '16px',
-                                borderRadius: '8px',
-                            }, title: "Expand sidebar", onMouseEnter: (e) => {
-                                e.currentTarget.style.transform = 'scale(1.05)';
-                                e.currentTarget.style.background = '#2563eb';
-                            }, onMouseLeave: (e) => {
-                                e.currentTarget.style.transform = 'scale(1)';
-                                e.currentTarget.style.background = '#3b82f6';
-                            }, 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: '700',
-                                    background: 'linear-gradient(135deg, #60a5fa 0%, #3b82f6 100%)',
-                                    WebkitBackgroundClip: 'text',
-                                    WebkitTextFillColor: 'transparent',
-                                    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: '6px',
-                                    marginTop: '10px',
-                                    fontSize: '11px'
-                                }, children: [_jsx("div", { style: {
-                                            width: '6px',
-                                            height: '6px',
-                                            borderRadius: '50%',
-                                            backgroundColor: connectionStatus.connected ? '#10b981' : '#f87171'
-                                        } }), _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: '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
-                                                    const provider = availableProviders.find(p => p.type === newProvider);
-                                                    if (provider && provider.models.length > 0) {
-                                                        setSelectedModel(provider.models[0]);
-                                                    }
-                                                }, style: {
-                                                    background: '#1e293b',
-                                                    border: '1px solid #334155',
-                                                    borderRadius: '6px',
-                                                    color: '#e2e8f0',
-                                                    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: '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',
-                                                    color: '#e2e8f0',
-                                                    padding: '4px 8px',
-                                                    fontSize: '12px',
-                                                    cursor: 'pointer',
-                                                    maxWidth: '200px'
-                                                }, children: availableProviders
-                                                    .find(p => p.type === selectedProvider)
-                                                    ?.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: _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,
-                                borderTopLeftRadius: 0,
-                                borderTopRightRadius: 0,
-                            } : {})
-                        }, children: [_jsx("button", { type: "button", onClick: () => fileInputRef.current?.click(), disabled: loading || attachedImages.length >= MAX_IMAGES, style: {
-                                    ...STYLES.uploadButton,
-                                    ...(attachedImages.length >= MAX_IMAGES ? {
-                                        opacity: 0.5,
-                                        cursor: 'not-allowed',
-                                    } : {})
-                                }, title: attachedImages.length >= MAX_IMAGES
-                                    ? `Maximum ${MAX_IMAGES} images`
-                                    : 'Attach images (screenshots, designs)', onMouseEnter: (e) => {
-                                    if (attachedImages.length < MAX_IMAGES && !loading) {
-                                        e.currentTarget.style.background = 'rgba(59, 130, 246, 0.2)';
-                                        e.currentTarget.style.borderColor = 'rgba(59, 130, 246, 0.5)';
-                                    }
-                                }, onMouseLeave: (e) => {
-                                    e.currentTarget.style.background = 'rgba(255, 255, 255, 0.1)';
-                                    e.currentTarget.style.borderColor = 'rgba(255, 255, 255, 0.2)';
-                                }, children: _jsx("svg", { width: 20, height: 20, 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" }) }) }), _jsx("input", { ref: inputRef, type: "text", value: input, onChange: e => setInput(e.target.value), onPaste: handlePaste, placeholder: attachedImages.length > 0
-                                    ? "Describe what to create from these images..."
-                                    : "Describe a UI component...", style: STYLES.textInput, 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)';
-                                }, onBlur: (e) => {
-                                    e.currentTarget.style.borderColor = 'rgba(255, 255, 255, 0.2)';
-                                    e.currentTarget.style.boxShadow = 'none';
-                                } }), _jsxs("button", { type: "submit", disabled: loading || (!input.trim() && attachedImages.length === 0), style: {
-                                    ...STYLES.sendButton,
-                                    ...(loading || (!input.trim() && attachedImages.length === 0) ? {
-                                        opacity: 0.4,
-                                        cursor: 'not-allowed',
-                                        background: '#64748b',
-                                        boxShadow: 'none'
-                                    } : {})
-                                }, onMouseEnter: (e) => {
-                                    if (!loading && (input.trim() || attachedImages.length > 0)) {
-                                        e.currentTarget.style.background = '#2563eb';
-                                        e.currentTarget.style.boxShadow = '0 4px 16px rgba(59, 130, 246, 0.5)';
-                                    }
-                                }, onMouseLeave: (e) => {
-                                    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" })] })] })] })] }));
+    // ============================================
+    // Render
+    // ============================================
+    return (_jsxs("div", { className: `sui-root ${state.isDarkMode ? 'dark' : ''}`, children: [_jsxs("aside", { className: `sui-sidebar ${state.sidebarOpen ? '' : 'collapsed'}`, "aria-label": "Chat history", children: [state.sidebarOpen && (_jsxs("div", { className: "sui-sidebar-content", children: [_jsxs("button", { className: "sui-button sui-button-ghost", onClick: () => dispatch({ type: 'TOGGLE_SIDEBAR' }), style: { width: '100%', marginBottom: '12px', justifyContent: 'flex-start' }, children: [Icons.panelLeft, _jsx("span", { style: { marginLeft: '8px' }, children: "Hide sidebar" })] }), _jsxs("button", { className: "sui-button sui-button-default", onClick: handleNewChat, style: { width: '100%', marginBottom: '16px' }, children: [Icons.plus, _jsx("span", { children: "New Chat" })] }), _jsx("div", { className: "sui-sidebar-chats", children: state.recentChats.map(chat => (_jsx("div", { className: `sui-chat-item ${state.activeChatId === chat.id ? 'active' : ''} ${contextMenuId === chat.id ? 'menu-open' : ''}`, onClick: () => renamingChatId !== chat.id && handleSelectChat(chat), role: "button", tabIndex: 0, onKeyDown: e => e.key === 'Enter' && renamingChatId !== chat.id && handleSelectChat(chat), children: renamingChatId === chat.id ? (_jsxs("div", { className: "sui-chat-item-rename", children: [_jsx("input", { type: "text", className: "sui-rename-input", value: renameValue, onChange: e => setRenameValue(e.target.value), onKeyDown: e => {
+                                                    if (e.key === 'Enter')
+                                                        handleConfirmRename(chat.id);
+                                                    if (e.key === 'Escape')
+                                                        handleCancelRename();
+                                                }, onClick: e => e.stopPropagation(), autoFocus: true }), _jsx("button", { className: "sui-button sui-button-icon sui-button-sm", onClick: e => { e.stopPropagation(); handleConfirmRename(chat.id); }, "aria-label": "Save", children: Icons.check }), _jsx("button", { className: "sui-button sui-button-icon sui-button-sm", onClick: e => { e.stopPropagation(); handleCancelRename(); }, "aria-label": "Cancel", children: Icons.x })] })) : (_jsxs(_Fragment, { children: [_jsx("div", { className: "sui-chat-item-title", children: chat.title }), _jsxs("div", { className: "sui-chat-item-actions", children: [_jsx("button", { className: "sui-chat-item-menu sui-button sui-button-icon sui-button-sm", onClick: e => { e.stopPropagation(); setContextMenuId(contextMenuId === chat.id ? null : chat.id); }, "aria-label": "More options", children: Icons.moreVertical }), contextMenuId === chat.id && (_jsxs("div", { className: "sui-context-menu", children: [_jsxs("button", { className: "sui-context-menu-item", onClick: e => handleStartRename(chat.id, chat.title, e), children: [Icons.pencil, _jsx("span", { children: "Rename" })] }), _jsxs("button", { className: "sui-context-menu-item sui-context-menu-item-danger", onClick: e => handleDeleteChat(chat.id, e), children: [Icons.trash, _jsx("span", { children: "Delete" })] })] }))] })] })) }, chat.id))) })] })), !state.sidebarOpen && (_jsx("div", { style: { padding: '12px', display: 'flex', justifyContent: 'center' }, children: _jsx("button", { className: "sui-button sui-button-ghost sui-button-icon", onClick: () => dispatch({ type: 'SET_SIDEBAR', payload: true }), "aria-label": "Show sidebar", children: Icons.panelLeft }) }))] }), _jsxs("main", { className: "sui-main", onDragEnter: handleDragEnter, onDragLeave: handleDragLeave, onDragOver: handleDragOver, onDrop: handleDrop, children: [state.isDragging && (_jsx("div", { className: "sui-drop-overlay", children: _jsxs("div", { className: "sui-drop-overlay-text", children: [Icons.image, _jsx("span", { children: "Drop images here" })] }) })), _jsxs("header", { className: "sui-header", children: [_jsxs("div", { className: "sui-header-left", children: [_jsx("span", { className: "sui-header-title", children: "Story UI" }), _jsxs(Badge, { variant: state.connectionStatus.connected ? 'success' : 'destructive', children: [_jsx("span", { className: "sui-badge-dot" }), state.connectionStatus.connected ? getConnectionDisplayText() : 'Disconnected'] })] }), _jsx("div", { className: "sui-header-right", children: state.connectionStatus.connected && state.availableProviders.length > 0 && (_jsxs(_Fragment, { children: [_jsxs("div", { className: "sui-select", children: [_jsxs("div", { className: "sui-select-trigger", children: [_jsx("span", { children: state.availableProviders.find(p => p.type === state.selectedProvider)?.name || 'Provider' }), Icons.chevronDown] }), _jsx("select", { className: "sui-select-native", value: state.selectedProvider, onChange: e => {
+                                                        const newProvider = e.target.value;
+                                                        dispatch({ type: 'SET_SELECTED_PROVIDER', payload: newProvider });
+                                                        const provider = state.availableProviders.find(p => p.type === newProvider);
+                                                        if (provider?.models.length)
+                                                            dispatch({ type: 'SET_SELECTED_MODEL', payload: provider.models[0] });
+                                                    }, "aria-label": "Select provider", children: state.availableProviders.map(p => _jsx("option", { value: p.type, children: p.name }, p.type)) })] }), _jsxs("div", { className: "sui-select", children: [_jsxs("div", { className: "sui-select-trigger", children: [_jsx("span", { children: getModelDisplayName(state.selectedModel) }), Icons.chevronDown] }), _jsx("select", { className: "sui-select-native", value: state.selectedModel, onChange: e => dispatch({ type: 'SET_SELECTED_MODEL', payload: e.target.value }), "aria-label": "Select model", children: state.availableProviders.find(p => p.type === state.selectedProvider)?.models.map(model => (_jsx("option", { value: model, children: getModelDisplayName(model) }, model))) })] })] })) })] }), _jsxs("section", { className: "sui-chat-area", role: "log", "aria-live": "polite", children: [state.error && _jsx("div", { className: "sui-error", role: "alert", style: { margin: '24px' }, children: state.error }), state.conversation.length === 0 && !state.loading ? (_jsxs("div", { className: "sui-welcome", children: [_jsx("h2", { className: "sui-welcome-greeting", children: "What would you like to create?" }), _jsx("p", { className: "sui-welcome-subtitle", children: "Describe any UI component and I'll generate a Storybook story" }), _jsxs("div", { className: "sui-welcome-chips", children: [_jsx("button", { className: "sui-chip", onClick: () => dispatch({ type: 'SET_INPUT', payload: 'Create a responsive card with image, title, and description' }), children: "Card" }), _jsx("button", { className: "sui-chip", onClick: () => dispatch({ type: 'SET_INPUT', payload: 'Create a navigation bar with logo and menu links' }), children: "Navbar" }), _jsx("button", { className: "sui-chip", onClick: () => dispatch({ type: 'SET_INPUT', payload: 'Create a form with input fields and validation' }), children: "Form" }), _jsx("button", { className: "sui-chip", onClick: () => dispatch({ type: 'SET_INPUT', payload: 'Create a hero section with headline and call-to-action' }), children: "Hero" }), _jsx("button", { className: "sui-chip", onClick: () => dispatch({ type: 'SET_INPUT', payload: 'Create a button group with primary and secondary actions' }), children: "Buttons" }), _jsx("button", { className: "sui-chip", onClick: () => dispatch({ type: 'SET_INPUT', payload: 'Create a modal dialog with header, content, and footer' }), children: "Modal" })] })] })) : (_jsxs("div", { className: "sui-chat-messages", children: [state.conversation.map((msg, i) => (_jsx("article", { className: `sui-message ${msg.role === 'user' ? 'sui-message-user' : 'sui-message-ai'}`, children: _jsxs("div", { className: "sui-message-bubble", children: [msg.role === 'ai' ? renderMarkdown(msg.content) : msg.content, msg.role === 'user' && msg.attachedImages && msg.attachedImages.length > 0 && (_jsx("div", { className: "sui-message-images", children: msg.attachedImages.map(img => (_jsx("img", { src: img.base64 ? `data:${img.mediaType};base64,${img.base64}` : img.preview, alt: "attached", className: "sui-message-image" }, img.id))) }))] }) }, i))), state.loading && (_jsx("div", { className: "sui-message sui-message-ai", children: state.streamingState ? _jsx(ProgressIndicator, { streamingState: state.streamingState }) : (_jsx("div", { className: "sui-progress", children: _jsxs("span", { className: "sui-progress-label", children: ["Generating story", _jsx("span", { className: "sui-loading" })] }) })) })), _jsx("div", { ref: chatEndRef })] }))] }), _jsx("div", { className: "sui-input-area", children: _jsxs("div", { className: "sui-input-container", children: [_jsx("input", { ref: fileInputRef, type: "file", accept: "image/*", multiple: true, style: { display: 'none' }, onChange: handleFileSelect }), state.attachedImages.length > 0 && (_jsxs("div", { className: "sui-image-previews", children: [_jsxs("span", { className: "sui-image-preview-label", children: [Icons.image, " ", state.attachedImages.length, " image", state.attachedImages.length > 1 ? 's' : ''] }), state.attachedImages.map(img => (_jsxs("div", { className: "sui-image-preview-item", children: [_jsx("img", { src: img.preview, alt: "preview", className: "sui-image-preview-thumb" }), _jsx("button", { className: "sui-image-preview-remove", onClick: () => removeAttachedImage(img.id), "aria-label": "Remove", children: Icons.x })] }, img.id)))] })), _jsxs("form", { onSubmit: handleSend, className: "sui-input-form", style: state.attachedImages.length > 0 ? { borderTopLeftRadius: 0, borderTopRightRadius: 0 } : undefined, children: [_jsx("button", { type: "button", className: "sui-input-form-upload", onClick: () => fileInputRef.current?.click(), disabled: state.loading || state.attachedImages.length >= MAX_IMAGES, "aria-label": "Attach images", children: Icons.image }), _jsx("input", { ref: inputRef, type: "text", className: "sui-input-form-field", value: state.input, onChange: e => dispatch({ type: 'SET_INPUT', payload: e.target.value }), onPaste: handlePaste, placeholder: state.attachedImages.length > 0 ? 'Describe what to create from these images...' : 'Describe a UI component...' }), _jsx("button", { type: "submit", className: "sui-input-form-send", disabled: state.loading || (!state.input.trim() && state.attachedImages.length === 0), "aria-label": "Send", children: Icons.send })] })] }) })] })] }));
 }
 export default StoryUIPanel;
 export { StoryUIPanel };