@tpitre/story-ui 4.14.0 → 4.16.0

package/dist/cli/setup.js

@@ -206,21 +206,21 @@ const LLM_PROVIDERS = {
     claude: {
         name: 'Claude (Anthropic)',
         envKey: 'ANTHROPIC_API_KEY',
-        models: ['claude-opus-4-6', 'claude-sonnet-4-6', 'claude-opus-4-20250514', 'claude-sonnet-4-5-20250929', 'claude-haiku-4-5-20251001'],
+        models: ['claude-opus-4-6', 'claude-sonnet-4-6', 'claude-haiku-4-5-20251001'],
         docsUrl: 'https://console.anthropic.com/',
         description: 'Recommended - Best for complex reasoning and code quality'
     },
     openai: {
         name: 'OpenAI (GPT)',
         envKey: 'OPENAI_API_KEY',
-        models: ['gpt-4.1', 'gpt-4.1-mini', 'o3', 'o4-mini', 'gpt-4o', 'gpt-4o-mini'],
+        models: ['gpt-5.4', 'gpt-5.4-mini', 'o4-mini'],
         docsUrl: 'https://platform.openai.com/api-keys',
         description: 'Versatile and fast'
     },
     gemini: {
         name: 'Google Gemini',
         envKey: 'GEMINI_API_KEY',
-        models: ['gemini-3.1-pro-preview', 'gemini-2.5-pro', 'gemini-2.5-flash', 'gemini-2.5-flash-lite', 'gemini-3-flash-preview'],
+        models: ['gemini-3.1-pro-preview', 'gemini-3-flash-preview', 'gemini-2.5-flash'],
         docsUrl: 'https://aistudio.google.com/app/apikey',
         description: 'Cost-effective with good performance'
     }

package/dist/mcp-server/index.js

@@ -23,10 +23,8 @@ import { getProviders, getModels, configureProviderRoute, validateApiKey, setDef
 import { listFrameworks, detectCurrentFramework, getFrameworkDetails, validateStoryForFramework, postProcessStoryForFramework, } from './routes/frameworks.js';
 import mcpRemoteRouter from './routes/mcpRemote.js';
 // Voice Canvas endpoints
-import { canvasIntentHandler, warmCanvasComponentCache } from './routes/canvasIntent.js';
 import { canvasSaveHandler } from './routes/canvasSave.js';
 import { canvasGenerateHandler, ensureVoiceCanvasStory } from './routes/canvasGenerate.js';
-import { canvasPreviewHandler } from './routes/canvasPreview.js';
 import { getAdapterRegistry } from '../story-generator/framework-adapters/index.js';
 // Manifest — story ↔ chat source of truth
 import { manifestGetHandler, manifestPatchHandler, manifestDeleteHandler, manifestReconcileHandler, manifestPollHandler, } from './routes/manifest.js';
@@ -110,9 +108,7 @@ app.post('/mcp/generate-story', generateStoryFromPrompt);
 app.post('/mcp/generate-story-stream', generateStoryFromPromptStream);
 // Voice Canvas endpoints
 app.post('/mcp/canvas-generate', canvasGenerateHandler); // generate + write voice-canvas.stories.tsx
-app.post('/mcp/canvas-preview', canvasPreviewHandler); // undo/redo: rewrite voice-canvas.stories.tsx
 app.post('/mcp/canvas-save', canvasSaveHandler); // save canvas to named .stories.tsx
-app.post('/mcp/canvas-intent', canvasIntentHandler); // legacy (kept for compatibility)
 // Manifest — story ↔ chat source of truth
 // NOTE: /reconcile must be registered BEFORE /:fileName to avoid route conflict
 app.get('/story-ui/manifest/poll', manifestPollHandler);
@@ -883,8 +879,6 @@ if (storybookProxyEnabled) {
 app.listen(PORT, () => {
     console.error(`MCP server running on port ${PORT}`);
     console.error(`Stories will be generated to: ${config.generatedStoriesPath}`);
-    // Pre-warm canvas component cache in background so first voice request is fast
-    warmCanvasComponentCache().catch(() => { });
     // Ensure voice-canvas scratchpad story file exists before client polling starts.
     // If it's missing, the first canvas generate creates it, triggering a false-positive
     // "externally generated story" detection which reloads the page and kills Voice Canvas.

package/dist/mcp-server/routes/canvasGenerate.d.ts

@@ -15,11 +15,33 @@
  */
 import { Request, Response } from 'express';
 export declare const VOICE_CANVAS_STORY_ID = "generated-voice-canvas--default";
-export declare function ensureReactLive(): void;
+export declare function ensureReactLive(): Promise<void>;
 /**
  * Write the static voice-canvas story template if it doesn't exist yet.
  * Subsequent calls are no-ops — the file never changes after initial creation.
  */
 export declare function ensureVoiceCanvasStory(storiesDir: string): void;
+/**
+ * If the LLM forgot to add a render() call (required by react-live noInline mode),
+ * detect the last defined PascalCase component and append render(<ComponentName />).
+ * This prevents the "No-Inline evaluations must call render" error when voice input
+ * is ambiguous or short and the LLM skips the final line.
+ */
+export declare function ensureRenderCall(code: string): string;
+/**
+ * Extract the canvas component code from the LLM response.
+ * Handles markdown code fences and stray text.
+ */
+export declare function extractCanvasCode(response: string): string;
+/**
+ * Scan LLM-generated canvas code for dangerous patterns and neutralize them.
+ *
+ * Instead of rejecting the entire response, each dangerous token is replaced
+ * with a safe alternative (typically a comment + `undefined` or `void(`) so
+ * the rest of the generated JSX remains functional.
+ *
+ * Returns the sanitized code string.  Logs a warning for every pattern found.
+ */
+export declare function sanitizeCanvasCode(code: string): string;
 export declare function canvasGenerateHandler(req: Request, res: Response): Promise<Response<any, Record<string, any>>>;
 //# sourceMappingURL=canvasGenerate.d.ts.map

package/dist/mcp-server/routes/canvasGenerate.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"canvasGenerate.d.ts","sourceRoot":"","sources":["../../../mcp-server/routes/canvasGenerate.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;GAcG;AAEH,OAAO,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,SAAS,CAAC;AAW5C,eAAO,MAAM,qBAAqB,oCAAoC,CAAC;AAmIvE,wBAAgB,eAAe,IAAI,IAAI,CAuBtC;AAID;;;GAGG;AACH,wBAAgB,sBAAsB,CAAC,UAAU,EAAE,MAAM,GAAG,IAAI,CAU/D;AAuBD,wBAAsB,qBAAqB,CAAC,GAAG,EAAE,OAAO,EAAE,GAAG,EAAE,QAAQ,+CAwEtE"}
+{"version":3,"file":"canvasGenerate.d.ts","sourceRoot":"","sources":["../../../mcp-server/routes/canvasGenerate.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;GAcG;AAEH,OAAO,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,SAAS,CAAC;AAkB5C,eAAO,MAAM,qBAAqB,oCAAoC,CAAC;AAuIvE,wBAAsB,eAAe,IAAI,OAAO,CAAC,IAAI,CAAC,CAmCrD;AAID;;;GAGG;AACH,wBAAgB,sBAAsB,CAAC,UAAU,EAAE,MAAM,GAAG,IAAI,CAU/D;AAID;;;;;GAKG;AACH,wBAAgB,gBAAgB,CAAC,IAAI,EAAE,MAAM,GAAG,MAAM,CAOrD;AAED;;;GAGG;AACH,wBAAgB,iBAAiB,CAAC,QAAQ,EAAE,MAAM,GAAG,MAAM,CAc1D;AAgED;;;;;;;;GAQG;AACH,wBAAgB,kBAAkB,CAAC,IAAI,EAAE,MAAM,GAAG,MAAM,CAsBvD;AAID,wBAAsB,qBAAqB,CAAC,GAAG,EAAE,OAAO,EAAE,GAAG,EAAE,QAAQ,+CA0GtE"}

package/dist/mcp-server/routes/canvasGenerate.js

@@ -15,12 +15,17 @@
  */
 import fs from 'fs';
 import path from 'path';
-import { execSync } from 'child_process';
+import { exec } from 'child_process';
+import { promisify } from 'util';
+const execAsync = promisify(exec);
 import { loadUserConfig } from '../../story-generator/configLoader.js';
 import { EnhancedComponentDiscovery } from '../../story-generator/enhancedComponentDiscovery.js';
 import { buildClaudePrompt } from '../../story-generator/promptGenerator.js';
 import { chatCompletion } from '../../story-generator/llm-providers/story-llm-service.js';
 import { logger } from '../../story-generator/logger.js';
+// ── Component discovery cache ─────────────────────────────────
+let _componentCache = null;
+const COMPONENT_CACHE_TTL = 300000; // 5 minutes
 // ── Constants ─────────────────────────────────────────────────
 export const VOICE_CANVAS_STORY_ID = 'generated-voice-canvas--default';
 const VOICE_CANVAS_STORY_FILE = 'voice-canvas.stories.tsx';
@@ -122,6 +127,8 @@ export const Default: StoryObj = {
 
     useEffect(() => {
       const handler = (e: MessageEvent) => {
+        // Only accept messages from same origin to prevent cross-origin code injection
+        if (e.origin !== window.location.origin) return;
         if (e.data?.type === 'VOICE_CANVAS_UPDATE' && typeof e.data.code === 'string') {
           setCode(e.data.code);
           try { localStorage.setItem('${LS_KEY}', e.data.code); } catch {}
@@ -149,31 +156,43 @@ export const Default: StoryObj = {
  * Detects pnpm / yarn / npm automatically.
  */
 let reactLiveChecked = false;
-export function ensureReactLive() {
+let reactLiveInstalling = null;
+export async function ensureReactLive() {
     if (reactLiveChecked)
         return;
-    reactLiveChecked = true;
+    // If another request is already installing, wait for it
+    if (reactLiveInstalling)
+        return reactLiveInstalling;
     const cwd = process.cwd();
     const reactLiveDir = path.join(cwd, 'node_modules', 'react-live');
-    if (fs.existsSync(reactLiveDir))
+    if (fs.existsSync(reactLiveDir)) {
+        reactLiveChecked = true;
         return;
+    }
     logger.log('[canvas-generate] react-live not found — installing...');
-    try {
-        let cmd = 'npm install react-live --save';
-        if (fs.existsSync(path.join(cwd, 'pnpm-lock.yaml'))) {
-            cmd = 'pnpm add react-live';
+    reactLiveInstalling = (async () => {
+        try {
+            let cmd = 'npm install react-live --save';
+            if (fs.existsSync(path.join(cwd, 'pnpm-lock.yaml'))) {
+                cmd = 'pnpm add react-live';
+            }
+            else if (fs.existsSync(path.join(cwd, 'yarn.lock'))) {
+                cmd = 'yarn add react-live';
+            }
+            await execAsync(cmd, { cwd });
+            reactLiveChecked = true;
+            logger.log('[canvas-generate] react-live installed successfully');
         }
-        else if (fs.existsSync(path.join(cwd, 'yarn.lock'))) {
-            cmd = 'yarn add react-live';
+        catch (err) {
+            const msg = err instanceof Error ? err.message : String(err);
+            logger.error('[canvas-generate] Could not auto-install react-live', { error: msg });
+            logger.log('[canvas-generate] Run manually: npm install react-live');
         }
-        execSync(cmd, { cwd, stdio: 'pipe' });
-        logger.log('[canvas-generate] react-live installed successfully');
-    }
-    catch (err) {
-        const msg = err instanceof Error ? err.message : String(err);
-        logger.error('[canvas-generate] Could not auto-install react-live', { error: msg });
-        logger.log('[canvas-generate] Run manually: npm install react-live');
-    }
+        finally {
+            reactLiveInstalling = null;
+        }
+    })();
+    return reactLiveInstalling;
 }
 // ── Write story to disk (once) ────────────────────────────────
 /**
@@ -192,29 +211,144 @@ export function ensureVoiceCanvasStory(storiesDir) {
     }
 }
 // ── Code extraction ───────────────────────────────────────────
+/**
+ * If the LLM forgot to add a render() call (required by react-live noInline mode),
+ * detect the last defined PascalCase component and append render(<ComponentName />).
+ * This prevents the "No-Inline evaluations must call render" error when voice input
+ * is ambiguous or short and the LLM skips the final line.
+ */
+export function ensureRenderCall(code) {
+    if (/\brender\s*\(/.test(code))
+        return code;
+    // Find the last PascalCase component/const defined in the code
+    const matches = [...code.matchAll(/(?:const|function)\s+([A-Z][A-Za-z0-9]*)/g)];
+    const componentName = matches.at(-1)?.[1] ?? 'Canvas';
+    return `${code}\nrender(<${componentName} />);`;
+}
 /**
  * Extract the canvas component code from the LLM response.
  * Handles markdown code fences and stray text.
  */
-function extractCanvasCode(response) {
+export function extractCanvasCode(response) {
+    let code;
     // Prefer explicit code fence
     const fenceMatch = response.match(/```(?:jsx|tsx|js|ts)?\n([\s\S]+?)\n```/);
-    if (fenceMatch)
-        return fenceMatch[1].trim();
-    // Fall back: find the Canvas component block
-    const canvasMatch = response.match(/(const Canvas\s*=[\s\S]+?render\s*\(<Canvas\s*\/>?\);?\s*$)/m);
-    if (canvasMatch)
-        return canvasMatch[1].trim();
-    // Last resort: return the whole response trimmed
-    return response.trim();
+    if (fenceMatch) {
+        code = fenceMatch[1].trim();
+    }
+    else {
+        // Fall back: find the Canvas component block
+        const canvasMatch = response.match(/(const Canvas\s*=[\s\S]+?render\s*\(<Canvas\s*\/>?\);?\s*$)/m);
+        code = canvasMatch ? canvasMatch[1].trim() : response.trim();
+    }
+    return ensureRenderCall(code);
+}
+// ── Security sanitization ─────────────────────────────────────
+/**
+ * Dangerous patterns that must be neutralized in LLM-generated canvas code.
+ *
+ * Each entry defines a regex (applied with the global flag) and a replacement
+ * string.  The replacement comments out the dangerous call so the surrounding
+ * code still parses — this avoids rejecting an entire response because the LLM
+ * happened to mention one of these tokens inside a string literal or comment.
+ *
+ * Categories covered:
+ *   - Arbitrary code execution (eval, Function constructor)
+ *   - Cookie / domain access
+ *   - Storage APIs (localStorage, sessionStorage)
+ *   - Network requests (fetch, XMLHttpRequest, WebSocket)
+ *   - Location manipulation
+ *   - Script injection
+ *   - Unsafe React patterns (dangerouslySetInnerHTML)
+ *   - Prototype pollution (__proto__, constructor.prototype)
+ *   - Dynamic / CommonJS imports
+ */
+const DANGEROUS_PATTERNS = [
+    // Arbitrary code execution
+    { pattern: /\beval\s*\(/g, label: 'eval()', replacement: '/* [sanitized: eval] */void(' },
+    { pattern: /\bnew\s+Function\s*\(/g, label: 'new Function()', replacement: '/* [sanitized: new Function] */void(' },
+    { pattern: /\bFunction\s*\(/g, label: 'Function()', replacement: '/* [sanitized: Function] */void(' },
+    // Cookie / domain access
+    { pattern: /\bdocument\.cookie\b/g, label: 'document.cookie', replacement: '/* [sanitized: document.cookie] */undefined' },
+    { pattern: /\bdocument\.domain\b/g, label: 'document.domain', replacement: '/* [sanitized: document.domain] */undefined' },
+    // Storage APIs
+    { pattern: /\blocalStorage\b/g, label: 'localStorage', replacement: '/* [sanitized: localStorage] */undefined' },
+    { pattern: /\bsessionStorage\b/g, label: 'sessionStorage', replacement: '/* [sanitized: sessionStorage] */undefined' },
+    // Network requests
+    { pattern: /\bfetch\s*\(/g, label: 'fetch()', replacement: '/* [sanitized: fetch] */void(' },
+    { pattern: /\bnew\s+XMLHttpRequest\b/g, label: 'XMLHttpRequest', replacement: '/* [sanitized: XMLHttpRequest] */undefined' },
+    { pattern: /\bXMLHttpRequest\b/g, label: 'XMLHttpRequest', replacement: '/* [sanitized: XMLHttpRequest] */undefined' },
+    { pattern: /\bnew\s+WebSocket\s*\(/g, label: 'WebSocket', replacement: '/* [sanitized: WebSocket] */void(' },
+    { pattern: /\bWebSocket\s*\(/g, label: 'WebSocket', replacement: '/* [sanitized: WebSocket] */void(' },
+    // Location manipulation
+    { pattern: /\bwindow\.location\b/g, label: 'window.location', replacement: '/* [sanitized: window.location] */undefined' },
+    // Script injection
+    { pattern: /<script\b/gi, label: '<script>', replacement: '/* [sanitized: script tag] */undefined' },
+    // Unsafe React patterns
+    { pattern: /\bdangerouslySetInnerHTML\b/g, label: 'dangerouslySetInnerHTML', replacement: '/* [sanitized: dangerouslySetInnerHTML] */undefined' },
+    // Prototype pollution
+    { pattern: /__proto__/g, label: '__proto__', replacement: '/* [sanitized: __proto__] */undefined' },
+    { pattern: /\bconstructor\.prototype\b/g, label: 'constructor.prototype', replacement: '/* [sanitized: constructor.prototype] */undefined' },
+    // Dynamic imports
+    { pattern: /\bimport\s*\(/g, label: 'dynamic import()', replacement: '/* [sanitized: dynamic import] */void(' },
+    // CommonJS require
+    { pattern: /\brequire\s*\(/g, label: 'require()', replacement: '/* [sanitized: require] */void(' },
+];
+/**
+ * Scan LLM-generated canvas code for dangerous patterns and neutralize them.
+ *
+ * Instead of rejecting the entire response, each dangerous token is replaced
+ * with a safe alternative (typically a comment + `undefined` or `void(`) so
+ * the rest of the generated JSX remains functional.
+ *
+ * Returns the sanitized code string.  Logs a warning for every pattern found.
+ */
+export function sanitizeCanvasCode(code) {
+    let sanitized = code;
+    const found = [];
+    for (const { pattern, label, replacement } of DANGEROUS_PATTERNS) {
+        // Reset lastIndex in case the regex was used before (global flag)
+        pattern.lastIndex = 0;
+        if (pattern.test(sanitized)) {
+            found.push(label);
+            // Reset again before replace — .test() advances lastIndex
+            pattern.lastIndex = 0;
+            sanitized = sanitized.replace(pattern, replacement);
+        }
+    }
+    if (found.length > 0) {
+        logger.warn(`[canvas-generate] Sanitized ${found.length} dangerous pattern(s) from LLM output: ${found.join(', ')}`);
+    }
+    return sanitized;
 }
 // ── Handler ───────────────────────────────────────────────────
 export async function canvasGenerateHandler(req, res) {
     try {
-        const { prompt, canvasCode, provider, model, conversationHistory = [], } = req.body;
+        let { prompt, canvasCode, provider, model, conversationHistory = [], } = req.body;
         if (!prompt || typeof prompt !== 'string') {
             return res.status(400).json({ error: 'prompt is required' });
         }
+        // ── Request body size limits (truncate, don't reject) ──────
+        const MAX_PROMPT = 5000;
+        const MAX_CANVAS_CODE = 50000;
+        const MAX_HISTORY_ENTRIES = 50;
+        const MAX_HISTORY_CONTENT = 10000;
+        if (prompt.length > MAX_PROMPT) {
+            prompt = prompt.slice(0, MAX_PROMPT);
+        }
+        if (canvasCode && typeof canvasCode === 'string' && canvasCode.length > MAX_CANVAS_CODE) {
+            canvasCode = canvasCode.slice(0, MAX_CANVAS_CODE);
+        }
+        if (Array.isArray(conversationHistory)) {
+            if (conversationHistory.length > MAX_HISTORY_ENTRIES) {
+                conversationHistory = conversationHistory.slice(-MAX_HISTORY_ENTRIES);
+            }
+            for (const entry of conversationHistory) {
+                if (entry && typeof entry.content === 'string' && entry.content.length > MAX_HISTORY_CONTENT) {
+                    entry.content = entry.content.slice(0, MAX_HISTORY_CONTENT);
+                }
+            }
+        }
         // Load config + discover components — same quality context as standard generation
         const config = loadUserConfig();
         // Voice Canvas requires React — it uses react-live to render JSX in the browser.
@@ -223,8 +357,16 @@ export async function canvasGenerateHandler(req, res) {
                 error: `Voice Canvas is only available for React-based Storybook projects. Current framework: ${config.componentFramework}`,
             });
         }
-        const discovery = new EnhancedComponentDiscovery(config);
-        const components = await discovery.discoverAll();
+        let components;
+        const now = Date.now();
+        if (_componentCache && now - _componentCache.timestamp < COMPONENT_CACHE_TTL) {
+            components = _componentCache.components;
+        }
+        else {
+            const discovery = new EnhancedComponentDiscovery(config);
+            components = await discovery.discoverAll();
+            _componentCache = { components, timestamp: now };
+        }
         // Build the system prompt using the standard prompt pipeline
         const baseSystemPrompt = await buildClaudePrompt(prompt, config, components);
         const systemPrompt = baseSystemPrompt + '\n' + CANVAS_MODE_SUFFIX;
@@ -248,10 +390,14 @@ export async function canvasGenerateHandler(req, res) {
             maxTokens: 4096,
             temperature: 0.3,
         });
-        // Extract the canvas code from the LLM response
-        const result = extractCanvasCode(response);
+        // Extract the canvas code from the LLM response and sanitize it.
+        // sanitizeCanvasCode neutralizes dangerous patterns (eval, fetch, script
+        // injection, prototype pollution, etc.) before the code reaches the
+        // client where react-live would execute it as arbitrary JS.
+        const rawCode = extractCanvasCode(response);
+        const result = sanitizeCanvasCode(rawCode);
         // Ensure react-live is installed and story template exists (no-ops after first run)
-        ensureReactLive();
+        await ensureReactLive();
         const storiesDir = config.generatedStoriesPath || './src/stories/generated/';
         ensureVoiceCanvasStory(storiesDir);
         logger.log(`[canvas-generate] Generated ${result.split('\n').length} lines for: "${prompt.slice(0, 60)}"`);

package/dist/mcp-server/routes/canvasSave.d.ts

@@ -9,5 +9,12 @@
  * Returns: { fileName, filePath, code }
  */
 import { Request, Response } from 'express';
+/**
+ * Convert a react-live canvas component (JSX string) to a proper .stories.tsx file.
+ * The input is in the format: `const Canvas = () => { ... }; render(<Canvas />);`
+ */
+export declare function jsxCodeToStory(jsxCode: string, title: string, importPath: string): string;
+/** Derive a readable title from the last voice/text prompt. */
+export declare function titleFromPrompt(prompt: string): string;
 export declare function canvasSaveHandler(req: Request, res: Response): Promise<Response<any, Record<string, any>>>;
 //# sourceMappingURL=canvasSave.d.ts.map

package/dist/mcp-server/routes/canvasSave.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"canvasSave.d.ts","sourceRoot":"","sources":["../../../mcp-server/routes/canvasSave.ts"],"names":[],"mappings":"AAAA;;;;;;;;;GASG;AAEH,OAAO,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,SAAS,CAAC;AA0M5C,wBAAsB,iBAAiB,CAAC,GAAG,EAAE,OAAO,EAAE,GAAG,EAAE,QAAQ,+CAgGlE"}
+{"version":3,"file":"canvasSave.d.ts","sourceRoot":"","sources":["../../../mcp-server/routes/canvasSave.ts"],"names":[],"mappings":"AAAA;;;;;;;;;GASG;AAEH,OAAO,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,SAAS,CAAC;AA0I5C;;;GAGG;AACH,wBAAgB,cAAc,CAAC,OAAO,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,UAAU,EAAE,MAAM,GAAG,MAAM,CAwCzF;AAID,+DAA+D;AAC/D,wBAAgB,eAAe,CAAC,MAAM,EAAE,MAAM,GAAG,MAAM,CAatD;AAED,wBAAsB,iBAAiB,CAAC,GAAG,EAAE,OAAO,EAAE,GAAG,EAAE,QAAQ,+CAiHlE"}

package/dist/mcp-server/routes/canvasSave.js

@@ -125,7 +125,7 @@ ${jsx}
  * Convert a react-live canvas component (JSX string) to a proper .stories.tsx file.
  * The input is in the format: `const Canvas = () => { ... }; render(<Canvas />);`
  */
-function jsxCodeToStory(jsxCode, title, importPath) {
+export function jsxCodeToStory(jsxCode, title, importPath) {
     // Remove the render(<Canvas />) call at the end
     const cleanCode = jsxCode.replace(/\nrender\s*\(<Canvas\s*\/>\);?\s*$/, '').trim();
     // Extract component names used in JSX (uppercase identifiers after '<')
@@ -166,7 +166,7 @@ function jsxCodeToStory(jsxCode, title, importPath) {
 }
 // ── Express handler ─────────────────────────────────────────
 /** Derive a readable title from the last voice/text prompt. */
-function titleFromPrompt(prompt) {
+export function titleFromPrompt(prompt) {
     // Strip filler words, take first ~6 meaningful words, title-case
     const stop = new Set(['a', 'an', 'the', 'with', 'and', 'for', 'of', 'to', 'in', 'on', 'at', 'by']);
     const words = prompt
@@ -183,15 +183,29 @@ function titleFromPrompt(prompt) {
 }
 export async function canvasSaveHandler(req, res) {
     try {
-        const { tree, jsxCode, title: rawTitle, lastPrompt } = req.body;
+        const { tree, jsxCode, title: rawTitle, lastPrompt: rawLastPrompt } = req.body;
+        // ── Request body size limits ───────────────────────────────
+        const MAX_JSX_CODE = 100000;
+        const MAX_TITLE = 200;
+        const MAX_LAST_PROMPT = 5000;
+        if (jsxCode && typeof jsxCode === 'string' && jsxCode.length > MAX_JSX_CODE) {
+            return res.status(400).json({ error: `jsxCode exceeds maximum length of ${MAX_JSX_CODE} characters` });
+        }
+        // Truncate title and lastPrompt if needed (safe to trim these)
+        const safeTitle = (rawTitle && typeof rawTitle === 'string')
+            ? rawTitle.slice(0, MAX_TITLE)
+            : rawTitle;
+        const lastPrompt = (rawLastPrompt && typeof rawLastPrompt === 'string' && rawLastPrompt.length > MAX_LAST_PROMPT)
+            ? rawLastPrompt.slice(0, MAX_LAST_PROMPT)
+            : rawLastPrompt;
         // Auto-generate title from last prompt if not provided
-        const title = (rawTitle && typeof rawTitle === 'string' && rawTitle.trim())
-            ? rawTitle.trim()
+        const title = (safeTitle && typeof safeTitle === 'string' && safeTitle.trim())
+            ? safeTitle.trim()
             : (lastPrompt && typeof lastPrompt === 'string' && lastPrompt.trim())
                 ? titleFromPrompt(lastPrompt.trim())
-                : 'Voice Canvas';
+                : `Canvas ${new Date().toLocaleDateString('en-US', { month: 'short', day: 'numeric', hour: 'numeric', minute: '2-digit' })}`;
         const config = loadUserConfig();
-        const importPath = config.importPath || '@mantine/core';
+        const importPath = config.importPath || '';
         const storiesDir = config.generatedStoriesPath || './src/stories/generated/';
         let code;
         if (jsxCode && typeof jsxCode === 'string' && jsxCode.trim()) {

package/dist/story-generator/llm-providers/claude-provider.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"claude-provider.d.ts","sourceRoot":"","sources":["../../../story-generator/llm-providers/claude-provider.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,EACL,YAAY,EACZ,cAAc,EACd,SAAS,EACT,WAAW,EACX,WAAW,EACX,YAAY,EACZ,WAAW,EACX,gBAAgB,EAGjB,MAAM,YAAY,CAAC;AACpB,OAAO,EAAE,eAAe,EAAE,MAAM,oBAAoB,CAAC;AA0HrD,qBAAa,cAAe,SAAQ,eAAe;IACjD,QAAQ,CAAC,IAAI,YAAY;IACzB,QAAQ,CAAC,IAAI,EAAE,YAAY,CAAY;IACvC,QAAQ,CAAC,eAAe,cAAiB;gBAE7B,MAAM,CAAC,EAAE,OAAO,CAAC,cAAc,CAAC;IAUtC,IAAI,CAAC,QAAQ,EAAE,WAAW,EAAE,EAAE,OAAO,CAAC,EAAE,WAAW,GAAG,OAAO,CAAC,YAAY,CAAC;IAkE1E,UAAU,CACf,QAAQ,EAAE,WAAW,EAAE,EACvB,OAAO,CAAC,EAAE,WAAW,GACpB,aAAa,CAAC,WAAW,CAAC;IAuGvB,cAAc,CAAC,MAAM,EAAE,MAAM,GAAG,OAAO,CAAC,gBAAgB,CAAC;IAgD/D,OAAO,CAAC,eAAe;IASvB,OAAO,CAAC,cAAc;IAgCtB,OAAO,CAAC,eAAe;IAoBvB,OAAO,CAAC,aAAa;IAiBrB,cAAc,CAAC,IAAI,EAAE,MAAM,GAAG,MAAM;CAMrC;AAGD,wBAAgB,oBAAoB,CAAC,MAAM,CAAC,EAAE,OAAO,CAAC,cAAc,CAAC,GAAG,cAAc,CAErF"}
+{"version":3,"file":"claude-provider.d.ts","sourceRoot":"","sources":["../../../story-generator/llm-providers/claude-provider.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,EACL,YAAY,EACZ,cAAc,EACd,SAAS,EACT,WAAW,EACX,WAAW,EACX,YAAY,EACZ,WAAW,EACX,gBAAgB,EAGjB,MAAM,YAAY,CAAC;AACpB,OAAO,EAAE,eAAe,EAAE,MAAM,oBAAoB,CAAC;AAmFrD,qBAAa,cAAe,SAAQ,eAAe;IACjD,QAAQ,CAAC,IAAI,YAAY;IACzB,QAAQ,CAAC,IAAI,EAAE,YAAY,CAAY;IACvC,QAAQ,CAAC,eAAe,cAAiB;gBAE7B,MAAM,CAAC,EAAE,OAAO,CAAC,cAAc,CAAC;IAUtC,IAAI,CAAC,QAAQ,EAAE,WAAW,EAAE,EAAE,OAAO,CAAC,EAAE,WAAW,GAAG,OAAO,CAAC,YAAY,CAAC;IAkE1E,UAAU,CACf,QAAQ,EAAE,WAAW,EAAE,EACvB,OAAO,CAAC,EAAE,WAAW,GACpB,aAAa,CAAC,WAAW,CAAC;IAuGvB,cAAc,CAAC,MAAM,EAAE,MAAM,GAAG,OAAO,CAAC,gBAAgB,CAAC;IAgD/D,OAAO,CAAC,eAAe;IASvB,OAAO,CAAC,cAAc;IAgCtB,OAAO,CAAC,eAAe;IAoBvB,OAAO,CAAC,aAAa;IAiBrB,cAAc,CAAC,IAAI,EAAE,MAAM,GAAG,MAAM;CAMrC;AAGD,wBAAgB,oBAAoB,CAAC,MAAM,CAAC,EAAE,OAAO,CAAC,cAAc,CAAC,GAAG,cAAc,CAErF"}

package/dist/story-generator/llm-providers/claude-provider.js

@@ -33,32 +33,6 @@ const CLAUDE_MODELS = [
         inputPricePer1kTokens: 0.003,
         outputPricePer1kTokens: 0.015,
     },
-    {
-        id: 'claude-opus-4-20250514',
-        name: 'Claude Opus 4',
-        provider: 'claude',
-        contextWindow: 200000,
-        maxOutputTokens: 32000,
-        supportsVision: true,
-        supportsDocuments: true,
-        supportsFunctionCalling: true,
-        supportsStreaming: true,
-        inputPricePer1kTokens: 0.015,
-        outputPricePer1kTokens: 0.075,
-    },
-    {
-        id: 'claude-sonnet-4-5-20250929',
-        name: 'Claude Sonnet 4.5',
-        provider: 'claude',
-        contextWindow: 200000,
-        maxOutputTokens: 16000,
-        supportsVision: true,
-        supportsDocuments: true,
-        supportsFunctionCalling: true,
-        supportsStreaming: true,
-        inputPricePer1kTokens: 0.003,
-        outputPricePer1kTokens: 0.015,
-    },
     {
         id: 'claude-haiku-4-5-20251001',
         name: 'Claude Haiku 4.5',
@@ -70,19 +44,6 @@ const CLAUDE_MODELS = [
         supportsFunctionCalling: true,
         supportsStreaming: true,
         inputPricePer1kTokens: 0.0008,
-        outputPricePer1kTokens: 0.004,
-    },
-    {
-        id: 'claude-sonnet-4-20250514',
-        name: 'Claude Sonnet 4',
-        provider: 'claude',
-        contextWindow: 200000,
-        maxOutputTokens: 16000,
-        supportsVision: true,
-        supportsDocuments: true,
-        supportsFunctionCalling: true,
-        supportsStreaming: true,
-        inputPricePer1kTokens: 0.003,
         outputPricePer1kTokens: 0.015,
     },
 ];

package/dist/story-generator/llm-providers/gemini-provider.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"gemini-provider.d.ts","sourceRoot":"","sources":["../../../story-generator/llm-providers/gemini-provider.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,EACL,YAAY,EACZ,cAAc,EACd,SAAS,EACT,WAAW,EACX,WAAW,EACX,YAAY,EACZ,WAAW,EACX,gBAAgB,EAGjB,MAAM,YAAY,CAAC;AACpB,OAAO,EAAE,eAAe,EAAE,MAAM,oBAAoB,CAAC;AAkHrD,qBAAa,cAAe,SAAQ,eAAe;IACjD,QAAQ,CAAC,IAAI,YAAY;IACzB,QAAQ,CAAC,IAAI,EAAE,YAAY,CAAY;IACvC,QAAQ,CAAC,eAAe,cAAiB;gBAE7B,MAAM,CAAC,EAAE,OAAO,CAAC,cAAc,CAAC;IAU5C,OAAO,CAAC,SAAS;IAKX,IAAI,CAAC,QAAQ,EAAE,WAAW,EAAE,EAAE,OAAO,CAAC,EAAE,WAAW,GAAG,OAAO,CAAC,YAAY,CAAC;IA6D1E,UAAU,CACf,QAAQ,EAAE,WAAW,EAAE,EACvB,OAAO,CAAC,EAAE,WAAW,GACpB,aAAa,CAAC,WAAW,CAAC;IA+GvB,cAAc,CAAC,MAAM,EAAE,MAAM,GAAG,OAAO,CAAC,gBAAgB,CAAC;IA8C/D,OAAO,CAAC,eAAe;IASvB,OAAO,CAAC,cAAc;IAqCtB,OAAO,CAAC,eAAe;IAmBvB,OAAO,CAAC,eAAe;IAiBvB,cAAc,CAAC,IAAI,EAAE,MAAM,GAAG,MAAM;CAKrC;AAGD,wBAAgB,oBAAoB,CAAC,MAAM,CAAC,EAAE,OAAO,CAAC,cAAc,CAAC,GAAG,cAAc,CAErF"}
+{"version":3,"file":"gemini-provider.d.ts","sourceRoot":"","sources":["../../../story-generator/llm-providers/gemini-provider.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,EACL,YAAY,EACZ,cAAc,EACd,SAAS,EACT,WAAW,EACX,WAAW,EACX,YAAY,EACZ,WAAW,EACX,gBAAgB,EAGjB,MAAM,YAAY,CAAC;AACpB,OAAO,EAAE,eAAe,EAAE,MAAM,oBAAoB,CAAC;AAuFrD,qBAAa,cAAe,SAAQ,eAAe;IACjD,QAAQ,CAAC,IAAI,YAAY;IACzB,QAAQ,CAAC,IAAI,EAAE,YAAY,CAAY;IACvC,QAAQ,CAAC,eAAe,cAAiB;gBAE7B,MAAM,CAAC,EAAE,OAAO,CAAC,cAAc,CAAC;IAU5C,OAAO,CAAC,SAAS;IAKX,IAAI,CAAC,QAAQ,EAAE,WAAW,EAAE,EAAE,OAAO,CAAC,EAAE,WAAW,GAAG,OAAO,CAAC,YAAY,CAAC;IA8D1E,UAAU,CACf,QAAQ,EAAE,WAAW,EAAE,EACvB,OAAO,CAAC,EAAE,WAAW,GACpB,aAAa,CAAC,WAAW,CAAC;IAgHvB,cAAc,CAAC,MAAM,EAAE,MAAM,GAAG,OAAO,CAAC,gBAAgB,CAAC;IA+C/D,OAAO,CAAC,eAAe;IASvB,OAAO,CAAC,cAAc;IAqCtB,OAAO,CAAC,eAAe;IAmBvB,OAAO,CAAC,eAAe;IAiBvB,cAAc,CAAC,IAAI,EAAE,MAAM,GAAG,MAAM;CAKrC;AAGD,wBAAgB,oBAAoB,CAAC,MAAM,CAAC,EAAE,OAAO,CAAC,cAAc,CAAC,GAAG,cAAc,CAErF"}

package/dist/story-generator/llm-providers/gemini-provider.js

@@ -23,8 +23,8 @@ const GEMINI_MODELS = [
         outputPricePer1kTokens: 0.012,
     },
     {
-        id: 'gemini-2.5-pro',
-        name: 'Gemini 2.5 Pro',
+        id: 'gemini-3-flash-preview',
+        name: 'Gemini 3 Flash Preview',
         provider: 'gemini',
         contextWindow: 1048576,
         maxOutputTokens: 65536,
@@ -32,9 +32,8 @@ const GEMINI_MODELS = [
         supportsDocuments: true,
         supportsFunctionCalling: true,
         supportsStreaming: true,
-        supportsReasoning: true,
-        inputPricePer1kTokens: 0.00125,
-        outputPricePer1kTokens: 0.01,
+        inputPricePer1kTokens: 0.00015,
+        outputPricePer1kTokens: 0.0006,
     },
     {
         id: 'gemini-2.5-flash',
@@ -50,35 +49,9 @@ const GEMINI_MODELS = [
         inputPricePer1kTokens: 0.00015,
         outputPricePer1kTokens: 0.0006,
     },
-    {
-        id: 'gemini-2.5-flash-lite',
-        name: 'Gemini 2.5 Flash Lite',
-        provider: 'gemini',
-        contextWindow: 1048576,
-        maxOutputTokens: 65536,
-        supportsVision: true,
-        supportsDocuments: true,
-        supportsFunctionCalling: true,
-        supportsStreaming: true,
-        inputPricePer1kTokens: 0.00008,
-        outputPricePer1kTokens: 0.0003,
-    },
-    {
-        id: 'gemini-3-flash-preview',
-        name: 'Gemini 3 Flash Preview',
-        provider: 'gemini',
-        contextWindow: 1048576,
-        maxOutputTokens: 65536,
-        supportsVision: true,
-        supportsDocuments: true,
-        supportsFunctionCalling: true,
-        supportsStreaming: true,
-        inputPricePer1kTokens: 0.00015,
-        outputPricePer1kTokens: 0.0006,
-    },
 ];
-// Default model - Gemini 2.5 Pro (stable flagship, March 2026)
-const DEFAULT_MODEL = 'gemini-2.5-pro';
+// Default model - Gemini 3.1 Pro Preview (flagship, March 2026)
+const DEFAULT_MODEL = 'gemini-3.1-pro-preview';
 // API configuration
 const GEMINI_API_BASE = 'https://generativelanguage.googleapis.com/v1beta/models';
 export class GeminiProvider extends BaseLLMProvider {
@@ -124,12 +97,13 @@ export class GeminiProvider extends BaseLLMProvider {
                 parts: [{ text: systemPrompt }],
             };
         }
-        const url = `${this.getApiUrl(model)}?key=${apiKey}`;
+        const url = this.getApiUrl(model);
         try {
             const response = await fetch(url, {
                 method: 'POST',
                 headers: {
                     'Content-Type': 'application/json',
+                    'x-goog-api-key': apiKey,
                 },
                 body: JSON.stringify(requestBody),
                 signal: AbortSignal.timeout(this.config.timeout || 120000),
@@ -174,12 +148,13 @@ export class GeminiProvider extends BaseLLMProvider {
                 parts: [{ text: systemPrompt }],
             };
         }
-        const url = `${this.getApiUrl(model, true)}?key=${apiKey}&alt=sse`;
+        const url = `${this.getApiUrl(model, true)}?alt=sse`;
         try {
             const response = await fetch(url, {
                 method: 'POST',
                 headers: {
                     'Content-Type': 'application/json',
+                    'x-goog-api-key': apiKey,
                 },
                 body: JSON.stringify(requestBody),
                 signal: AbortSignal.timeout(this.config.timeout || 120000),
@@ -251,11 +226,12 @@ export class GeminiProvider extends BaseLLMProvider {
     async validateApiKey(apiKey) {
         try {
             // Make a minimal API call to validate the key
-            const url = `${this.getApiUrl('gemini-2.0-flash')}?key=${apiKey}`;
+            const url = this.getApiUrl('gemini-2.5-flash');
             const response = await fetch(url, {
                 method: 'POST',
                 headers: {
                     'Content-Type': 'application/json',
+                    'x-goog-api-key': apiKey,
                 },
                 body: JSON.stringify({
                     contents: [{ parts: [{ text: 'Hi' }] }],