@tpitre/story-ui 3.7.0 → 3.9.0

package/dist/story-generator/runtimeValidator.d.ts

@@ -0,0 +1,64 @@
+/**
+ * Runtime Validator for Story UI
+ *
+ * Validates that generated stories actually load and render in Storybook
+ * by making HTTP requests to the running Storybook instance after HMR processes
+ * the new story file.
+ *
+ * This catches runtime errors that static validation cannot detect, such as:
+ * - "importers[path] is not a function" - Storybook CSF loader errors
+ * - Module resolution failures
+ * - Runtime component errors
+ */
+export interface RuntimeValidationResult {
+    success: boolean;
+    storyExists: boolean;
+    renderError?: string;
+    errorType?: 'module_error' | 'render_error' | 'not_found' | 'timeout' | 'connection_error';
+    details?: string;
+}
+export interface RuntimeValidatorConfig {
+    storybookUrl: string;
+    hmrWaitMs?: number;
+    fetchTimeoutMs?: number;
+    retryAttempts?: number;
+    retryDelayMs?: number;
+}
+/**
+ * Get the Storybook URL based on environment configuration
+ */
+export declare function getStorybookUrl(): string | null;
+/**
+ * Check if runtime validation is enabled
+ */
+export declare function isRuntimeValidationEnabled(): boolean;
+/**
+ * Convert a story title to the Storybook story ID prefix format
+ * e.g., "Simple Card" with prefix "Generated/" -> "generated-simple-card"
+ * Note: This returns the prefix only, without the story export name
+ */
+export declare function titleToStoryIdPrefix(title: string, storyPrefix?: string): string;
+/**
+ * Extract the actual title from generated story content
+ * Looks for: title: 'Generated/Something' or title: "Generated/Something"
+ */
+export declare function extractTitleFromStory(storyContent: string): string | null;
+/**
+ * Convert a full story title (like "Generated/Button Click Counter") to story ID prefix
+ */
+export declare function fullTitleToStoryIdPrefix(fullTitle: string): string;
+/**
+ * Validate that a story loads and renders correctly in Storybook
+ *
+ * @param storyContent - The generated story content (used to extract the actual title)
+ * @param fallbackTitle - Fallback title if extraction fails (e.g., "Simple Card")
+ * @param storyPrefix - The story prefix from config (e.g., "Generated/")
+ * @param customConfig - Runtime validator configuration
+ * @returns Validation result with success status and any errors
+ */
+export declare function validateStoryRuntime(storyContent: string, fallbackTitle: string, storyPrefix?: string, customConfig?: Partial<RuntimeValidatorConfig>): Promise<RuntimeValidationResult>;
+/**
+ * Format runtime validation errors for the self-healing prompt
+ */
+export declare function formatRuntimeErrorForHealing(result: RuntimeValidationResult): string;
+//# sourceMappingURL=runtimeValidator.d.ts.map

package/dist/story-generator/runtimeValidator.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"runtimeValidator.d.ts","sourceRoot":"","sources":["../../story-generator/runtimeValidator.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;GAWG;AAIH,MAAM,WAAW,uBAAuB;IACtC,OAAO,EAAE,OAAO,CAAC;IACjB,WAAW,EAAE,OAAO,CAAC;IACrB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,SAAS,CAAC,EAAE,cAAc,GAAG,cAAc,GAAG,WAAW,GAAG,SAAS,GAAG,kBAAkB,CAAC;IAC3F,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB;AAED,MAAM,WAAW,sBAAsB;IACrC,YAAY,EAAE,MAAM,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;AAeD;;GAEG;AACH,wBAAgB,eAAe,IAAI,MAAM,GAAG,IAAI,CAmB/C;AAED;;GAEG;AACH,wBAAgB,0BAA0B,IAAI,OAAO,CAcpD;AAED;;;;GAIG;AACH,wBAAgB,oBAAoB,CAAC,KAAK,EAAE,MAAM,EAAE,WAAW,GAAE,MAAqB,GAAG,MAAM,CAQ9F;AAED;;;GAGG;AACH,wBAAgB,qBAAqB,CAAC,YAAY,EAAE,MAAM,GAAG,MAAM,GAAG,IAAI,CAOzE;AAED;;GAEG;AACH,wBAAgB,wBAAwB,CAAC,SAAS,EAAE,MAAM,GAAG,MAAM,CAKlE;AAiJD;;;;;;;;GAQG;AACH,wBAAsB,oBAAoB,CACxC,YAAY,EAAE,MAAM,EACpB,aAAa,EAAE,MAAM,EACrB,WAAW,GAAE,MAAqB,EAClC,YAAY,CAAC,EAAE,OAAO,CAAC,sBAAsB,CAAC,GAC7C,OAAO,CAAC,uBAAuB,CAAC,CA6FlC;AAED;;GAEG;AACH,wBAAgB,4BAA4B,CAAC,MAAM,EAAE,uBAAuB,GAAG,MAAM,CAoDpF"}

package/dist/story-generator/runtimeValidator.js

@@ -0,0 +1,356 @@
+/**
+ * Runtime Validator for Story UI
+ *
+ * Validates that generated stories actually load and render in Storybook
+ * by making HTTP requests to the running Storybook instance after HMR processes
+ * the new story file.
+ *
+ * This catches runtime errors that static validation cannot detect, such as:
+ * - "importers[path] is not a function" - Storybook CSF loader errors
+ * - Module resolution failures
+ * - Runtime component errors
+ */
+import { logger } from './logger.js';
+// Known Storybook runtime error patterns
+const RUNTIME_ERROR_PATTERNS = [
+    { pattern: /importers\[.*?\] is not a function/i, type: 'module_error', description: 'CSF module loader error' },
+    { pattern: /Cannot read propert.*of undefined/i, type: 'render_error', description: 'Component render error' },
+    { pattern: /is not defined/i, type: 'render_error', description: 'Undefined variable error' },
+    { pattern: /Module not found/i, type: 'module_error', description: 'Module resolution error' },
+    { pattern: /Failed to resolve import/i, type: 'module_error', description: 'Import resolution error' },
+    { pattern: /SyntaxError/i, type: 'module_error', description: 'Runtime syntax error' },
+    { pattern: /Unexpected token/i, type: 'module_error', description: 'Parse error' },
+    { pattern: /ReferenceError/i, type: 'render_error', description: 'Reference error' },
+    { pattern: /TypeError/i, type: 'render_error', description: 'Type error' },
+];
+/**
+ * Get the Storybook URL based on environment configuration
+ */
+export function getStorybookUrl() {
+    // Priority 1: Explicit storybookUrl in environment
+    if (process.env.STORYBOOK_URL) {
+        return process.env.STORYBOOK_URL;
+    }
+    // Priority 2: Proxy mode - use internal Storybook port
+    if (process.env.STORYBOOK_PROXY_ENABLED === 'true') {
+        const proxyPort = process.env.STORYBOOK_PROXY_PORT || '6006';
+        return `http://localhost:${proxyPort}`;
+    }
+    // Priority 3: Explicit Storybook port
+    if (process.env.STORYBOOK_PORT) {
+        return `http://localhost:${process.env.STORYBOOK_PORT}`;
+    }
+    // Priority 4: Default local Storybook
+    return 'http://localhost:6006';
+}
+/**
+ * Check if runtime validation is enabled
+ */
+export function isRuntimeValidationEnabled() {
+    // Enabled by default if we can determine a Storybook URL
+    // Can be explicitly disabled with STORYBOOK_RUNTIME_VALIDATION=false
+    if (process.env.STORYBOOK_RUNTIME_VALIDATION === 'false') {
+        return false;
+    }
+    // In proxy mode, always enable since we know Storybook is accessible
+    if (process.env.STORYBOOK_PROXY_ENABLED === 'true') {
+        return true;
+    }
+    // Otherwise, enable if explicitly set to true
+    return process.env.STORYBOOK_RUNTIME_VALIDATION === 'true';
+}
+/**
+ * Convert a story title to the Storybook story ID prefix format
+ * e.g., "Simple Card" with prefix "Generated/" -> "generated-simple-card"
+ * Note: This returns the prefix only, without the story export name
+ */
+export function titleToStoryIdPrefix(title, storyPrefix = 'Generated/') {
+    // Remove prefix and convert to kebab case
+    const fullTitle = storyPrefix + title;
+    const kebabTitle = fullTitle
+        .toLowerCase()
+        .replace(/[^a-z0-9]+/g, '-')
+        .replace(/^-|-$/g, '');
+    return kebabTitle;
+}
+/**
+ * Extract the actual title from generated story content
+ * Looks for: title: 'Generated/Something' or title: "Generated/Something"
+ */
+export function extractTitleFromStory(storyContent) {
+    const titleMatch = storyContent.match(/title:\s*['"]([^'"]+)['"]/);
+    if (titleMatch) {
+        // Return the full title (including prefix like "Generated/")
+        return titleMatch[1];
+    }
+    return null;
+}
+/**
+ * Convert a full story title (like "Generated/Button Click Counter") to story ID prefix
+ */
+export function fullTitleToStoryIdPrefix(fullTitle) {
+    return fullTitle
+        .toLowerCase()
+        .replace(/[^a-z0-9]+/g, '-')
+        .replace(/^-|-$/g, '');
+}
+/**
+ * Sleep utility
+ */
+function sleep(ms) {
+    return new Promise(resolve => setTimeout(resolve, ms));
+}
+/**
+ * Fetch with timeout
+ */
+async function fetchWithTimeout(url, timeoutMs) {
+    const controller = new AbortController();
+    const timeoutId = setTimeout(() => controller.abort(), timeoutMs);
+    try {
+        const response = await fetch(url, { signal: controller.signal });
+        clearTimeout(timeoutId);
+        return response;
+    }
+    catch (error) {
+        clearTimeout(timeoutId);
+        if (error.name === 'AbortError') {
+            throw new Error(`Request timed out after ${timeoutMs}ms`);
+        }
+        throw error;
+    }
+}
+/**
+ * Check if stories exist in Storybook's index that match the given title prefix
+ * Returns the first matching story ID for iframe validation
+ */
+async function checkStoryInIndex(storyIdPrefix, storybookUrl, config) {
+    const indexUrl = `${storybookUrl}/index.json`;
+    const timeout = config.fetchTimeoutMs || 5000;
+    try {
+        const response = await fetchWithTimeout(indexUrl, timeout);
+        if (!response.ok) {
+            return { exists: false, error: `Index returned ${response.status}` };
+        }
+        const index = await response.json();
+        // Storybook 7+ uses 'entries', older versions use 'stories'
+        const stories = index.entries || index.stories || {};
+        // Find story IDs that match our prefix (not docs entries)
+        const matchingIds = Object.keys(stories).filter(id => {
+            // Skip docs entries - we want actual story entries
+            if (id.endsWith('--docs'))
+                return false;
+            // Check if the ID starts with our prefix
+            return id.startsWith(storyIdPrefix + '--');
+        });
+        if (matchingIds.length > 0) {
+            return { exists: true, matchingStoryId: matchingIds[0] };
+        }
+        return { exists: false };
+    }
+    catch (error) {
+        return { exists: false, error: error.message };
+    }
+}
+/**
+ * Check the story iframe for runtime errors
+ */
+async function checkStoryIframe(storyId, storybookUrl, config) {
+    const iframeUrl = `${storybookUrl}/iframe.html?id=${storyId}&viewMode=story`;
+    const timeout = config.fetchTimeoutMs || 5000;
+    try {
+        const response = await fetchWithTimeout(iframeUrl, timeout);
+        if (!response.ok) {
+            return {
+                success: false,
+                error: `Story iframe returned ${response.status}`,
+                errorType: 'not_found'
+            };
+        }
+        const html = await response.text();
+        // Check for known error patterns in the HTML response
+        for (const { pattern, type, description } of RUNTIME_ERROR_PATTERNS) {
+            if (pattern.test(html)) {
+                // Extract the actual error message if possible
+                const match = html.match(/<pre[^>]*>([\s\S]*?)<\/pre>/i) ||
+                    html.match(/Error:?\s*([^\n<]+)/i);
+                const errorDetail = match ? match[1].trim().substring(0, 200) : description;
+                return {
+                    success: false,
+                    error: errorDetail,
+                    errorType: type
+                };
+            }
+        }
+        // Check for Storybook error boundary markers
+        // Note: We need to check for VISIBLE errors, not just the error display template
+        // The 'sb-show-errordisplay' class is added to body when an error is actually shown
+        // IMPORTANT: Must use regex to check for class attribute, not just includes()
+        // because ':not(.sb-show-errordisplay)' exists in CSS selectors
+        const hasVisibleError = /class="[^"]*sb-show-errordisplay[^"]*"/i.test(html);
+        // Check for actual error content in the error display elements (non-empty)
+        const hasErrorContent = /<h1[^>]*id="error-message"[^>]*>[^<]+<\/h1>/i.test(html) ||
+            /<code[^>]*id="error-stack"[^>]*>[^<]+<\/code>/i.test(html);
+        // Check for specific error text (not in CSS context)
+        const hasDocsError = />\s*DocsRenderer error/i.test(html);
+        const hasStoryError = /class="[^"]*story-error[^"]*"/i.test(html);
+        if (hasVisibleError || hasErrorContent || hasDocsError || hasStoryError) {
+            // Try to extract the actual error message
+            const errorMsgMatch = html.match(/<h1[^>]*id="error-message"[^>]*>([^<]+)<\/h1>/i);
+            const errorDetail = errorMsgMatch ? errorMsgMatch[1].trim() : 'Storybook error boundary triggered';
+            return {
+                success: false,
+                error: errorDetail,
+                errorType: 'render_error'
+            };
+        }
+        return { success: true };
+    }
+    catch (error) {
+        if (error.message.includes('timed out')) {
+            return { success: false, error: error.message, errorType: 'timeout' };
+        }
+        return { success: false, error: error.message, errorType: 'connection_error' };
+    }
+}
+/**
+ * Validate that a story loads and renders correctly in Storybook
+ *
+ * @param storyContent - The generated story content (used to extract the actual title)
+ * @param fallbackTitle - Fallback title if extraction fails (e.g., "Simple Card")
+ * @param storyPrefix - The story prefix from config (e.g., "Generated/")
+ * @param customConfig - Runtime validator configuration
+ * @returns Validation result with success status and any errors
+ */
+export async function validateStoryRuntime(storyContent, fallbackTitle, storyPrefix = 'Generated/', customConfig) {
+    // Check if runtime validation is enabled
+    if (!isRuntimeValidationEnabled()) {
+        logger.debug('Runtime validation disabled, skipping');
+        return { success: true, storyExists: true };
+    }
+    const storybookUrl = getStorybookUrl();
+    if (!storybookUrl) {
+        logger.warn('Could not determine Storybook URL for runtime validation');
+        return { success: true, storyExists: true, details: 'Storybook URL not configured' };
+    }
+    const config = {
+        storybookUrl,
+        hmrWaitMs: 3000,
+        fetchTimeoutMs: 5000,
+        retryAttempts: 3,
+        retryDelayMs: 1000,
+        ...customConfig
+    };
+    // Extract the actual title from the story content, or use fallback
+    const extractedTitle = extractTitleFromStory(storyContent);
+    let storyIdPrefix;
+    if (extractedTitle) {
+        // Use the exact title from the generated code
+        storyIdPrefix = fullTitleToStoryIdPrefix(extractedTitle);
+        logger.debug(`Extracted title from story: "${extractedTitle}" -> prefix: "${storyIdPrefix}"`);
+    }
+    else {
+        // Fall back to constructing from the provided title
+        storyIdPrefix = titleToStoryIdPrefix(fallbackTitle, storyPrefix);
+        logger.debug(`Using fallback title: "${fallbackTitle}" -> prefix: "${storyIdPrefix}"`);
+    }
+    logger.info(`Runtime validation: checking stories with prefix "${storyIdPrefix}" at ${storybookUrl}`);
+    // Wait for HMR to process the new file
+    logger.debug(`Waiting ${config.hmrWaitMs}ms for HMR to process...`);
+    await sleep(config.hmrWaitMs);
+    // Step 1: Check if story appears in the index (with retries for HMR timing)
+    let matchingStoryId;
+    let lastIndexError;
+    for (let attempt = 1; attempt <= config.retryAttempts; attempt++) {
+        const indexResult = await checkStoryInIndex(storyIdPrefix, storybookUrl, config);
+        if (indexResult.exists && indexResult.matchingStoryId) {
+            matchingStoryId = indexResult.matchingStoryId;
+            logger.debug(`Found matching story: "${matchingStoryId}"`);
+            break;
+        }
+        lastIndexError = indexResult.error;
+        if (attempt < config.retryAttempts) {
+            logger.debug(`Story not found in index (attempt ${attempt}/${config.retryAttempts}), waiting...`);
+            await sleep(config.retryDelayMs);
+        }
+    }
+    if (!matchingStoryId) {
+        logger.warn(`Stories with prefix "${storyIdPrefix}" not found in Storybook index after ${config.retryAttempts} attempts`);
+        return {
+            success: false,
+            storyExists: false,
+            errorType: 'not_found',
+            renderError: lastIndexError || 'Story not found in Storybook index - HMR may not have processed the file',
+            details: `Story ID prefix: ${storyIdPrefix}`
+        };
+    }
+    // Step 2: Load the story iframe and check for runtime errors
+    const iframeResult = await checkStoryIframe(matchingStoryId, storybookUrl, config);
+    if (!iframeResult.success) {
+        logger.error(`Runtime error detected in story "${matchingStoryId}": ${iframeResult.error}`);
+        return {
+            success: false,
+            storyExists: true,
+            renderError: iframeResult.error,
+            errorType: iframeResult.errorType,
+            details: `Story ID: ${matchingStoryId}, URL: ${storybookUrl}/iframe.html?id=${matchingStoryId}`
+        };
+    }
+    logger.info(`Runtime validation passed for story "${matchingStoryId}"`);
+    return {
+        success: true,
+        storyExists: true
+    };
+}
+/**
+ * Format runtime validation errors for the self-healing prompt
+ */
+export function formatRuntimeErrorForHealing(result) {
+    if (result.success)
+        return '';
+    const parts = [];
+    parts.push(`RUNTIME ERROR: The generated story failed to load in Storybook.`);
+    if (result.renderError) {
+        parts.push(`Error: ${result.renderError}`);
+    }
+    if (result.errorType === 'module_error') {
+        parts.push(`This is a module/import error. Common causes:`);
+        parts.push(`- Invalid CSF (Component Story Format) structure`);
+        parts.push(`- Missing or malformed default export (meta)`);
+        parts.push(`- Story exports that conflict with Storybook internals`);
+        parts.push(`- Invalid import statements`);
+        parts.push(`\nEnsure the story follows this exact structure:`);
+        parts.push(`\`\`\`tsx`);
+        parts.push(`import type { Meta, StoryObj } from '@storybook/react';`);
+        parts.push(`import { Component } from '@design-system/core';`);
+        parts.push(``);
+        parts.push(`const meta: Meta<typeof Component> = {`);
+        parts.push(`  title: 'Generated/Story Title',`);
+        parts.push(`  component: Component,`);
+        parts.push(`};`);
+        parts.push(``);
+        parts.push(`export default meta;`);
+        parts.push(`type Story = StoryObj<typeof meta>;`);
+        parts.push(``);
+        parts.push(`export const Default: Story = {`);
+        parts.push(`  render: () => <Component />,`);
+        parts.push(`};`);
+        parts.push(`\`\`\``);
+    }
+    else if (result.errorType === 'render_error') {
+        parts.push(`This is a component render error. Common causes:`);
+        parts.push(`- Using undefined variables or components`);
+        parts.push(`- Invalid props passed to components`);
+        parts.push(`- Missing required props`);
+        parts.push(`- Incorrect component composition`);
+    }
+    else if (result.errorType === 'not_found') {
+        parts.push(`The story was not found in Storybook's index. This usually means:`);
+        parts.push(`- The file has syntax errors that prevent Storybook from parsing it`);
+        parts.push(`- The story title/path doesn't match expected format`);
+        parts.push(`- The default export is missing or invalid`);
+    }
+    if (result.details) {
+        parts.push(`\nDetails: ${result.details}`);
+    }
+    return parts.join('\n');
+}

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

@@ -1 +1 @@
-{"version":3,"file":"StoryUIPanel.d.ts","sourceRoot":"","sources":["../../../templates/StoryUI/StoryUIPanel.tsx"],"names":[],"mappings":"AAymDA,iBAAS,YAAY,4CAuyCpB;AAED,eAAe,YAAY,CAAC;AAC5B,OAAO,EAAE,YAAY,EAAE,CAAC"}
+{"version":3,"file":"StoryUIPanel.d.ts","sourceRoot":"","sources":["../../../templates/StoryUI/StoryUIPanel.tsx"],"names":[],"mappings":"AAymDA,iBAAS,YAAY,4CAygDpB;AAED,eAAe,YAAY,CAAC;AAC5B,OAAO,EAAE,YAAY,EAAE,CAAC"}

package/dist/templates/StoryUI/StoryUIPanel.js

@@ -1241,6 +1241,8 @@ function StoryUIPanel() {
     const [attachedImages, setAttachedImages] = useState([]);
     const [considerations, setConsiderations] = useState('');
     const [orphanStories, setOrphanStories] = useState([]);
+    const [selectedStoryIds, setSelectedStoryIds] = useState(new Set());
+    const [isBulkDeleting, setIsBulkDeleting] = useState(false);
     const chatEndRef = useRef(null);
     const inputRef = useRef(null);
     const fileInputRef = useRef(null);
@@ -1961,6 +1963,92 @@ 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);
+            }
+            return newSet;
+        });
+    };
+    // Select/deselect all stories
+    const toggleSelectAll = () => {
+        if (selectedStoryIds.size === orphanStories.length) {
+            setSelectedStoryIds(new Set());
+        }
+        else {
+            setSelectedStoryIds(new Set(orphanStories.map(s => s.id)));
+        }
+    };
+    // Bulk delete selected stories
+    const handleBulkDelete = async () => {
+        if (selectedStoryIds.size === 0)
+            return;
+        const count = selectedStoryIds.size;
+        if (!confirm(`Delete ${count} selected ${count === 1 ? 'story' : 'stories'}? This action cannot be undone.`)) {
+            return;
+        }
+        setIsBulkDeleting(true);
+        try {
+            const response = await fetch(`${STORIES_API}/delete-bulk`, {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({ ids: Array.from(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`);
+            }
+            else {
+                alert('Failed to delete some stories. Please try again.');
+            }
+        }
+        catch (err) {
+            console.error('Error bulk deleting stories:', err);
+            alert('Failed to delete stories. Please try again.');
+        }
+        finally {
+            setIsBulkDeleting(false);
+        }
+    };
+    // Clear all generated stories
+    const handleClearAll = async () => {
+        if (orphanStories.length === 0)
+            return;
+        if (!confirm(`Delete ALL ${orphanStories.length} generated stories? This action cannot be undone.`)) {
+            return;
+        }
+        setIsBulkDeleting(true);
+        try {
+            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`);
+            }
+            else {
+                alert('Failed to clear stories. Please try again.');
+            }
+        }
+        catch (err) {
+            console.error('Error clearing stories:', err);
+            alert('Failed to clear stories. Please try again.');
+        }
+        finally {
+            setIsBulkDeleting(false);
+        }
+    };
     return (_jsxs("div", { className: "story-ui-panel", style: STYLES.container, children: [_jsxs("div", { style: {
                     ...STYLES.sidebar,
                     ...(sidebarOpen ? {} : STYLES.sidebarCollapsed),
@@ -2001,28 +2089,107 @@ function StoryUIPanel() {
                                     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: {
-                                            color: '#64748b',
-                                            fontSize: '12px',
+                                            display: 'flex',
+                                            alignItems: 'center',
+                                            justifyContent: 'space-between',
                                             marginTop: '16px',
                                             marginBottom: '8px',
-                                            fontWeight: '500',
-                                            textTransform: 'uppercase',
-                                            letterSpacing: '0.05em',
-                                        }, children: "Generated Files" }), orphanStories.map(story => (_jsxs("div", { style: {
+                                        }, 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: 'rgba(251, 191, 36, 0.1)',
-                                            borderLeft: '3px solid rgba(251, 191, 36, 0.5)',
+                                            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) => {
-                                            e.currentTarget.style.background = 'rgba(251, 191, 36, 0.15)';
+                                            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) => {
-                                            e.currentTarget.style.background = 'rgba(251, 191, 36, 0.1)';
+                                            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("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) => {
+                                        }, 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}`, {
@@ -2030,6 +2197,11 @@ function StoryUIPanel() {
                                                         });
                                                         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');