@tpitre/story-ui 4.13.0 → 4.13.2

package/dist/cli/setup.js

@@ -206,7 +206,7 @@ const LLM_PROVIDERS = {
     claude: {
         name: 'Claude (Anthropic)',
         envKey: 'ANTHROPIC_API_KEY',
-        models: ['claude-opus-4-5-20251101', 'claude-sonnet-4-5-20250929', 'claude-haiku-4-5-20251001'],
+        models: ['claude-opus-4-6', 'claude-sonnet-4-6', 'claude-opus-4-20250514', 'claude-sonnet-4-5-20250929', 'claude-haiku-4-5-20251001'],
         docsUrl: 'https://console.anthropic.com/',
         description: 'Recommended - Best for complex reasoning and code quality'
     },

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;AAiGrD,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;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"}

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

@@ -5,12 +5,37 @@
  */
 import { BaseLLMProvider } from './base-provider.js';
 import { logger } from '../logger.js';
-// Claude model definitions - Updated December 2025
-// Top 4 models only - Reference: Anthropic API documentation
+// Claude model definitions - Updated March 2026
 const CLAUDE_MODELS = [
     {
-        id: 'claude-opus-4-5-20251101',
-        name: 'Claude Opus 4.5',
+        id: 'claude-opus-4-6',
+        name: 'Claude Opus 4.6',
+        provider: 'claude',
+        contextWindow: 200000,
+        maxOutputTokens: 32000,
+        supportsVision: true,
+        supportsDocuments: true,
+        supportsFunctionCalling: true,
+        supportsStreaming: true,
+        inputPricePer1kTokens: 0.015,
+        outputPricePer1kTokens: 0.075,
+    },
+    {
+        id: 'claude-sonnet-4-6',
+        name: 'Claude Sonnet 4.6',
+        provider: 'claude',
+        contextWindow: 200000,
+        maxOutputTokens: 16000,
+        supportsVision: true,
+        supportsDocuments: true,
+        supportsFunctionCalling: true,
+        supportsStreaming: true,
+        inputPricePer1kTokens: 0.003,
+        outputPricePer1kTokens: 0.015,
+    },
+    {
+        id: 'claude-opus-4-20250514',
+        name: 'Claude Opus 4',
         provider: 'claude',
         contextWindow: 200000,
         maxOutputTokens: 32000,
@@ -61,8 +86,8 @@ const CLAUDE_MODELS = [
         outputPricePer1kTokens: 0.015,
     },
 ];
-// Default model - Claude Sonnet 4.5 (recommended for agents and coding)
-const DEFAULT_MODEL = 'claude-opus-4-5-20251101';
+// Default model - Claude Sonnet 4.6 (latest recommended)
+const DEFAULT_MODEL = 'claude-sonnet-4-6';
 // API configuration
 const ANTHROPIC_API_URL = 'https://api.anthropic.com/v1/messages';
 const ANTHROPIC_VERSION = '2023-06-01';

package/dist/story-generator/llm-providers/settings-manager.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"settings-manager.d.ts","sourceRoot":"","sources":["../../../story-generator/llm-providers/settings-manager.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;GAYG;AAEH,OAAO,EAAE,YAAY,EAA0B,MAAM,YAAY,CAAC;AAIlE,MAAM,WAAW,YAAY;IAC3B,gBAAgB,CAAC,EAAE,YAAY,CAAC;IAChC,aAAa,CAAC,EAAE,MAAM,CAAC;CAExB;AAED,MAAM,WAAW,cAAc;IAC7B,eAAe,EAAE,YAAY,CAAC;IAC9B,YAAY,EAAE,MAAM,CAAC;IACrB,gBAAgB,EAAE,YAAY,EAAE,CAAC;IACjC,aAAa,EAAE,MAAM,EAAE,CAAC;IACxB,kBAAkB,EAAE,OAAO,CAAC;CAC7B;AAED,MAAM,WAAW,eAAe;IAC9B,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,EAAE,MAAM,CAAC;IACb,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,aAAa,CAAC,EAAE,OAAO,CAAC;CACzB;AAED,MAAM,WAAW,gBAAgB;IAC/B,SAAS,EAAE,eAAe,EAAE,CAAC;IAC7B,MAAM,EAAE,eAAe,EAAE,CAAC;IAC1B,eAAe,EAAE,YAAY,CAAC;IAC9B,YAAY,EAAE,MAAM,CAAC;IACrB,MAAM,EAAE;QACN,kBAAkB,EAAE,OAAO,CAAC;QAC5B,eAAe,EAAE,OAAO,CAAC;KAC1B,CAAC;CACH;AAED;;GAEG;AACH,wBAAgB,kBAAkB,IAAI,cAAc,CA0BnD;AAED;;GAEG;AACH,wBAAgB,qBAAqB,CAAC,MAAM,EAAE,cAAc,GAAG,eAAe,EAAE,CAyB/E;AAED;;GAEG;AACH,wBAAgB,kBAAkB,CAChC,QAAQ,EAAE,YAAY,EACtB,MAAM,EAAE,cAAc,GACrB,eAAe,EAAE,CAmCnB;AAED;;GAEG;AACH,wBAAgB,iBAAiB,CAC/B,QAAQ,EAAE,YAAY,EACtB,KAAK,EAAE,MAAM,EACb,MAAM,EAAE,cAAc,GACrB;IAAE,KAAK,EAAE,OAAO,CAAC;IAAC,KAAK,CAAC,EAAE,MAAM,CAAA;CAAE,CA4BpC;AAED;;GAEG;AACH,wBAAgB,gBAAgB,CAC9B,eAAe,CAAC,EAAE,YAAY,EAC9B,YAAY,CAAC,EAAE,MAAM,GACpB,gBAAgB,CAuBlB;AAED;;GAEG;AACH,wBAAgB,iBAAiB,CAAC,QAAQ,EAAE,YAAY,GAAG;IACzD,QAAQ,EAAE,YAAY,CAAC;IACvB,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,OAAO,CAAC;IACjB,cAAc,CAAC,EAAE,MAAM,CAAC;CACzB,CAuBA"}
+{"version":3,"file":"settings-manager.d.ts","sourceRoot":"","sources":["../../../story-generator/llm-providers/settings-manager.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;GAYG;AAEH,OAAO,EAAE,YAAY,EAA0B,MAAM,YAAY,CAAC;AAIlE,MAAM,WAAW,YAAY;IAC3B,gBAAgB,CAAC,EAAE,YAAY,CAAC;IAChC,aAAa,CAAC,EAAE,MAAM,CAAC;CAExB;AAED,MAAM,WAAW,cAAc;IAC7B,eAAe,EAAE,YAAY,CAAC;IAC9B,YAAY,EAAE,MAAM,CAAC;IACrB,gBAAgB,EAAE,YAAY,EAAE,CAAC;IACjC,aAAa,EAAE,MAAM,EAAE,CAAC;IACxB,kBAAkB,EAAE,OAAO,CAAC;CAC7B;AAED,MAAM,WAAW,eAAe;IAC9B,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,EAAE,MAAM,CAAC;IACb,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,aAAa,CAAC,EAAE,OAAO,CAAC;CACzB;AAED,MAAM,WAAW,gBAAgB;IAC/B,SAAS,EAAE,eAAe,EAAE,CAAC;IAC7B,MAAM,EAAE,eAAe,EAAE,CAAC;IAC1B,eAAe,EAAE,YAAY,CAAC;IAC9B,YAAY,EAAE,MAAM,CAAC;IACrB,MAAM,EAAE;QACN,kBAAkB,EAAE,OAAO,CAAC;QAC5B,eAAe,EAAE,OAAO,CAAC;KAC1B,CAAC;CACH;AAED;;GAEG;AACH,wBAAgB,kBAAkB,IAAI,cAAc,CA0BnD;AAED;;GAEG;AACH,wBAAgB,qBAAqB,CAAC,MAAM,EAAE,cAAc,GAAG,eAAe,EAAE,CAyB/E;AAED;;GAEG;AACH,wBAAgB,kBAAkB,CAChC,QAAQ,EAAE,YAAY,EACtB,MAAM,EAAE,cAAc,GACrB,eAAe,EAAE,CAoCnB;AAED;;GAEG;AACH,wBAAgB,iBAAiB,CAC/B,QAAQ,EAAE,YAAY,EACtB,KAAK,EAAE,MAAM,EACb,MAAM,EAAE,cAAc,GACrB;IAAE,KAAK,EAAE,OAAO,CAAC;IAAC,KAAK,CAAC,EAAE,MAAM,CAAA;CAAE,CA4BpC;AAED;;GAEG;AACH,wBAAgB,gBAAgB,CAC9B,eAAe,CAAC,EAAE,YAAY,EAC9B,YAAY,CAAC,EAAE,MAAM,GACpB,gBAAgB,CAuBlB;AAED;;GAEG;AACH,wBAAgB,iBAAiB,CAAC,QAAQ,EAAE,YAAY,GAAG;IACzD,QAAQ,EAAE,YAAY,CAAC;IACvB,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,OAAO,CAAC;IACjB,cAAc,CAAC,EAAE,MAAM,CAAC;CACzB,CAuBA"}

package/dist/story-generator/llm-providers/settings-manager.js

@@ -18,7 +18,7 @@ import { logger } from '../logger.js';
  */
 export function loadSettingsConfig() {
     const defaultProvider = process.env.DEFAULT_PROVIDER || 'claude';
-    const defaultModel = process.env.DEFAULT_MODEL || 'claude-opus-4-5-20251101';
+    const defaultModel = process.env.DEFAULT_MODEL || 'claude-sonnet-4-6';
     // Parse allowed providers
     const allowedProvidersEnv = process.env.ALLOWED_PROVIDERS;
     const allowedProviders = allowedProvidersEnv
@@ -79,7 +79,8 @@ export function getAvailableModels(provider, config) {
     // Mark recommended models based on capabilities
     const recommendedModels = [
         // Claude
-        'claude-opus-4-5-20251101', // Claude Opus 4.5 - flagship
+        'claude-opus-4-6', // Claude Opus 4.6 - flagship
+        'claude-sonnet-4-6', // Claude Sonnet 4.6
         'claude-sonnet-4-5-20250929',
         // OpenAI
         'gpt-5.1', // GPT-5.1 - flagship

package/dist/story-generator/llm-providers/story-llm-service.js

@@ -97,7 +97,7 @@ export async function chatCompletion(messages, options) {
     try {
         const response = await provider.chat(chatMessages, {
             model: options?.model,
-            maxTokens: options?.maxTokens || 8192,
+            maxTokens: options?.maxTokens,
             temperature: options?.temperature,
             systemPrompt,
         });
@@ -156,7 +156,7 @@ export async function chatCompletionWithImages(messages, options) {
     try {
         const response = await provider.chat(chatMessages, {
             model: options?.model,
-            maxTokens: options?.maxTokens || 8192,
+            maxTokens: options?.maxTokens,
             temperature: options?.temperature,
         });
         return response.content;

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

@@ -1 +1 @@
-{"version":3,"file":"StoryUIPanel.d.ts","sourceRoot":"","sources":["../../../templates/StoryUI/StoryUIPanel.tsx"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAGH,OAAO,oBAAoB,CAAC;AAkkC5B,UAAU,iBAAiB;IACzB,OAAO,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;CAC3B;AAED,iBAAS,YAAY,CAAC,EAAE,OAAO,EAAE,EAAE,iBAAiB,2CA03CnD;AAED,eAAe,YAAY,CAAC;AAC5B,OAAO,EAAE,YAAY,EAAE,CAAC"}
+{"version":3,"file":"StoryUIPanel.d.ts","sourceRoot":"","sources":["../../../templates/StoryUI/StoryUIPanel.tsx"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAGH,OAAO,oBAAoB,CAAC;AAokC5B,UAAU,iBAAiB;IACzB,OAAO,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;CAC3B;AAED,iBAAS,YAAY,CAAC,EAAE,OAAO,EAAE,EAAE,iBAAiB,2CA03CnD;AAED,eAAe,YAAY,CAAC;AAC5B,OAAO,EAAE,YAAY,EAAE,CAAC"}

package/dist/templates/StoryUI/StoryUIPanel.js

@@ -579,7 +579,9 @@ function formatTime(timestamp) {
 function getModelDisplayName(model) {
     const displayNames = {
         // Claude models
-        'claude-opus-4-5-20251101': 'Claude Opus 4.5',
+        'claude-opus-4-6': 'Claude Opus 4.6',
+        'claude-sonnet-4-6': 'Claude Sonnet 4.6',
+        'claude-opus-4-20250514': 'Claude Opus 4',
         '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',

package/dist/templates/StoryUI/StoryUIPanel.tsx

@@ -777,7 +777,9 @@ function formatTime(timestamp: number): string {
 function getModelDisplayName(model: string): string {
   const displayNames: Record<string, string> = {
     // Claude models
-    'claude-opus-4-5-20251101': 'Claude Opus 4.5',
+    'claude-opus-4-6': 'Claude Opus 4.6',
+    'claude-sonnet-4-6': 'Claude Sonnet 4.6',
+    'claude-opus-4-20250514': 'Claude Opus 4',
     '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',

package/dist/templates/StoryUI/voice/VoiceCanvas.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"VoiceCanvas.d.ts","sourceRoot":"","sources":["../../../../templates/StoryUI/voice/VoiceCanvas.tsx"],"names":[],"mappings":"AA0BA,MAAM,WAAW,gBAAgB;IAC/B,OAAO,EAAE,MAAM,CAAC;IAChB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,oEAAoE;IACpE,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,yEAAyE;IACzE,MAAM,CAAC,EAAE,CAAC,MAAM,EAAE;QAAE,QAAQ,EAAE,MAAM,CAAC;QAAC,IAAI,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,KAAK,IAAI,CAAC;IAC7E,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACnC;AAID,wBAAgB,WAAW,CAAC,EAC1B,OAAO,EACP,QAAQ,EACR,KAAK,EACL,MAAM,EACN,OAAO,GACR,EAAE,gBAAgB,2CAipBlB"}
+{"version":3,"file":"VoiceCanvas.d.ts","sourceRoot":"","sources":["../../../../templates/StoryUI/voice/VoiceCanvas.tsx"],"names":[],"mappings":"AA0BA,MAAM,WAAW,gBAAgB;IAC/B,OAAO,EAAE,MAAM,CAAC;IAChB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,oEAAoE;IACpE,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,yEAAyE;IACzE,MAAM,CAAC,EAAE,CAAC,MAAM,EAAE;QAAE,QAAQ,EAAE,MAAM,CAAC;QAAC,IAAI,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,KAAK,IAAI,CAAC;IAC7E,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACnC;AAID,wBAAgB,WAAW,CAAC,EAC1B,OAAO,EACP,QAAQ,EACR,KAAK,EACL,MAAM,EACN,OAAO,GACR,EAAE,gBAAgB,2CA0rBlB"}

package/dist/templates/StoryUI/voice/VoiceCanvas.js

@@ -34,6 +34,7 @@ export function VoiceCanvas({ apiBase, provider, model, onSave, onError, }) {
     const [statusText, setStatusText] = useState('');
     const [errorMessage, setErrorMessage] = useState('');
     const [savedMessage, setSavedMessage] = useState('');
+    const [lastPrompt, setLastPrompt] = useState('');
     // ── Last prompt (used for auto-title on save) ─────────────────
     const lastPromptRef = useRef('');
     // ── Voice input ──────────────────────────────────────────────
@@ -52,6 +53,9 @@ export function VoiceCanvas({ apiBase, provider, model, onSave, onError, }) {
     const stopListeningRef = useRef(() => { });
     const currentCodeRef = useRef(currentCode);
     currentCodeRef.current = currentCode;
+    // Incremented on every new generation to prevent stale finally blocks from
+    // clobbering the state of a newer in-flight request.
+    const generationCounterRef = useRef(0);
     // Ref to the preview iframe element
     const iframeRef = useRef(null);
     // True after the iframe fires its onLoad event
@@ -75,11 +79,21 @@ export function VoiceCanvas({ apiBase, provider, model, onSave, onError, }) {
     const sendCanvasRequest = useCallback(async (transcript) => {
         if (abortRef.current)
             abortRef.current.abort();
+        // Stamp this generation so stale finally blocks from aborted requests
+        // don't clobber the state of a newer in-flight request.
+        const genId = ++generationCounterRef.current;
         setIsGenerating(true);
         setStatusText('Thinking...');
         setErrorMessage('');
         const controller = new AbortController();
         abortRef.current = controller;
+        // 120-second safety timeout — prevents infinite "Thinking…" when the
+        // MCP server accepts the connection but the LLM takes too long.
+        let timedOut = false;
+        const timeoutId = setTimeout(() => {
+            timedOut = true;
+            controller.abort();
+        }, 120000);
         try {
             const currentCode = currentCodeRef.current;
             const isEdit = currentCode.trim().length > 0;
@@ -115,6 +129,7 @@ export function VoiceCanvas({ apiBase, provider, model, onSave, onError, }) {
                     setIframeKey(k => k + 1);
                 }
                 lastPromptRef.current = transcript;
+                setLastPrompt(transcript);
                 try {
                     localStorage.setItem(LS_PROMPT_KEY, transcript);
                 }
@@ -130,16 +145,28 @@ export function VoiceCanvas({ apiBase, provider, model, onSave, onError, }) {
             setStatusText('');
         }
         catch (error) {
-            if (error.name === 'AbortError')
+            if (error.name === 'AbortError') {
+                // Only surface a timeout error if this is still the active generation.
+                if (timedOut && generationCounterRef.current === genId) {
+                    setErrorMessage('Request timed out — the LLM took too long. Please try again.');
+                    setStatusText('');
+                }
                 return;
-            const msg = error instanceof Error ? error.message : String(error);
-            setErrorMessage(msg);
-            setStatusText('');
-            onError?.(msg);
+            }
+            if (generationCounterRef.current === genId) {
+                const msg = error instanceof Error ? error.message : String(error);
+                setErrorMessage(msg);
+                setStatusText('');
+                onError?.(msg);
+            }
         }
         finally {
-            setIsGenerating(false);
-            abortRef.current = null;
+            clearTimeout(timeoutId);
+            // Only reset shared state if no newer generation has started since we began.
+            if (generationCounterRef.current === genId) {
+                setIsGenerating(false);
+                abortRef.current = null;
+            }
         }
     }, [apiBase, provider, model, storyReady, sendCodeToIframe, onError]);
     // ── Undo ──────────────────────────────────────────────────────
@@ -234,8 +261,13 @@ export function VoiceCanvas({ apiBase, provider, model, onSave, onError, }) {
             clearTimeout(autoSubmitRef.current);
         autoSubmitRef.current = setTimeout(() => {
             const prompt = transcript.trim();
-            if (prompt)
+            if (prompt) {
+                // Clear the pending transcript BEFORE sending so that stopListening
+                // (if pressed moments later) doesn't fire a duplicate request.
+                pendingTranscriptRef.current = '';
+                setPendingTranscript('');
                 sendCanvasRequest(prompt);
+            }
             autoSubmitRef.current = null;
         }, 1200);
     }, [sendCanvasRequest]);
@@ -444,6 +476,7 @@ export function VoiceCanvas({ apiBase, provider, model, onSave, onError, }) {
             const savedPrompt = localStorage.getItem(LS_PROMPT_KEY);
             if (savedPrompt) {
                 lastPromptRef.current = savedPrompt;
+                setLastPrompt(savedPrompt);
             }
         }
         catch { /* localStorage unavailable */ }
@@ -473,5 +506,5 @@ export function VoiceCanvas({ apiBase, provider, model, onSave, onError, }) {
         return (_jsx("div", { className: "sui-canvas-container", children: _jsxs("div", { className: "sui-canvas-unsupported", children: [_jsxs("svg", { width: "48", height: "48", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: [_jsx("path", { d: "M12 2a3 3 0 0 0-3 3v7a3 3 0 0 0 6 0V5a3 3 0 0 0-3-3Z" }), _jsx("path", { d: "M19 10v2a7 7 0 0 1-14 0v-2" }), _jsx("line", { x1: "12", x2: "12", y1: "19", y2: "22" }), _jsx("line", { x1: "2", x2: "22", y1: "2", y2: "22", stroke: "currentColor", strokeWidth: "1.5" })] }), _jsx("h2", { className: "sui-canvas-unsupported-title", children: "Voice not available" }), _jsx("p", { className: "sui-canvas-unsupported-desc", children: "Voice Canvas requires the Web Speech API, which isn't supported in this browser. Try Chrome or Edge for the full experience." })] }) }));
     }
     // ── Render ─────────────────────────────────────────────────────
-    return (_jsxs("div", { className: "sui-canvas-container", children: [_jsxs("div", { className: "sui-canvas-preview", children: [!storyReady && !isGenerating && (_jsxs("div", { className: "sui-canvas-empty", children: [_jsx("div", { className: "sui-canvas-empty-icon", children: _jsxs("svg", { width: "48", height: "48", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round", children: [_jsx("path", { d: "M12 2a3 3 0 0 0-3 3v7a3 3 0 0 0 6 0V5a3 3 0 0 0-3-3Z" }), _jsx("path", { d: "M19 10v2a7 7 0 0 1-14 0v-2" }), _jsx("line", { x1: "12", x2: "12", y1: "19", y2: "22" })] }) }), _jsx("h2", { className: "sui-canvas-empty-title", children: "Voice Canvas" }), _jsx("p", { className: "sui-canvas-empty-desc", children: "Speak to build interfaces live with your design system components." }), _jsx("p", { className: "sui-canvas-empty-hint", children: "Try: \"Create a product card with an image, title, price, and buy button\"" })] })), !storyReady && isGenerating && (_jsxs("div", { className: "sui-canvas-progress", children: [_jsx("div", { className: "sui-canvas-progress-spinner" }), _jsx("span", { className: "sui-canvas-progress-text", children: statusText || 'Building...' })] })), storyReady && (_jsxs("div", { className: "sui-canvas-live-wrapper", children: [isGenerating && (_jsxs("div", { className: "sui-canvas-regen-overlay", children: [_jsx("div", { className: "sui-canvas-progress-spinner sui-canvas-progress-spinner--sm" }), _jsx("span", { children: statusText || 'Regenerating...' })] })), _jsx("iframe", { ref: iframeRef, src: iframeSrc, title: "Voice Canvas Preview", className: "sui-canvas-iframe", onLoad: handleIframeLoad }, iframeKey)] })), !isGenerating && errorMessage && (_jsxs("div", { className: "sui-canvas-error", children: [_jsx("span", { children: errorMessage }), _jsx("button", { type: "button", className: "sui-canvas-error-dismiss", onClick: () => setErrorMessage(''), "aria-label": "Dismiss error", children: "\u00D7" })] })), savedMessage && (_jsxs("div", { className: "sui-canvas-saved-toast", children: [_jsx("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: _jsx("polyline", { points: "20 6 9 17 4 12" }) }), _jsxs("span", { children: ["Saved: ", savedMessage] })] }))] }), statusText && !isGenerating && (_jsx("div", { className: "sui-canvas-status-bar", children: _jsx("span", { className: "sui-canvas-explanation", children: statusText }) })), _jsxs("div", { className: `sui-canvas-bar ${isListening ? 'sui-canvas-bar--active' : ''}`, children: [_jsxs("div", { className: "sui-canvas-bar-left", children: [_jsxs("button", { type: "button", className: `sui-canvas-mic ${isListening ? 'sui-canvas-mic--active' : ''}`, onClick: toggleListening, "aria-label": isListening ? 'Stop voice input' : 'Start voice input', children: [_jsxs("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [_jsx("path", { d: "M12 2a3 3 0 0 0-3 3v7a3 3 0 0 0 6 0V5a3 3 0 0 0-3-3Z" }), _jsx("path", { d: "M19 10v2a7 7 0 0 1-14 0v-2" }), _jsx("line", { x1: "12", x2: "12", y1: "19", y2: "22" })] }), isListening && _jsx("span", { className: "sui-canvas-mic-pulse" })] }), _jsx("div", { className: "sui-canvas-transcript", children: isGenerating ? (_jsx("span", { className: "sui-canvas-status-rendering", children: statusText || 'Building interface...' })) : interimText ? (_jsxs("span", { className: "sui-canvas-status-interim", children: [pendingTranscript ? pendingTranscript + ' ' : '', interimText] })) : pendingTranscript ? (_jsx("span", { className: "sui-canvas-status-final", children: pendingTranscript })) : isListening ? (_jsx("span", { className: "sui-canvas-status-listening", children: "Listening... describe what you want to build" })) : (_jsx("span", { className: "sui-canvas-status-hint", children: "Click the mic and describe what to build" })) })] }), _jsxs("div", { className: "sui-canvas-bar-right", children: [canUndo && (_jsx("button", { type: "button", className: "sui-canvas-action", onClick: undo, title: "Undo (Cmd+Z)", children: _jsxs("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: [_jsx("polyline", { points: "1 4 1 10 7 10" }), _jsx("path", { d: "M3.51 15a9 9 0 1 0 2.13-9.36L1 10" })] }) })), canRedo && (_jsx("button", { type: "button", className: "sui-canvas-action", onClick: redo, title: "Redo (Cmd+Shift+Z)", children: _jsxs("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: [_jsx("polyline", { points: "23 4 23 10 17 10" }), _jsx("path", { d: "M20.49 15a9 9 0 1 1-2.13-9.36L23 10" })] }) })), hasContent && (_jsx("button", { type: "button", className: "sui-canvas-action", onClick: saveStory, title: "Save as story", children: _jsxs("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: [_jsx("path", { d: "M19 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11l5 5v11a2 2 0 0 1-2 2z" }), _jsx("polyline", { points: "17 21 17 13 7 13 7 21" }), _jsx("polyline", { points: "7 3 7 8 15 8" })] }) })), hasContent && (_jsx("button", { type: "button", className: "sui-canvas-action", onClick: clear, title: "Clear canvas", children: _jsxs("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", 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" })] }) }))] })] })] }));
+    return (_jsxs("div", { className: "sui-canvas-container", children: [_jsxs("div", { className: "sui-canvas-preview", children: [!storyReady && !isGenerating && (_jsxs("div", { className: "sui-canvas-empty", children: [_jsx("div", { className: "sui-canvas-empty-icon", children: _jsxs("svg", { width: "48", height: "48", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round", children: [_jsx("path", { d: "M12 2a3 3 0 0 0-3 3v7a3 3 0 0 0 6 0V5a3 3 0 0 0-3-3Z" }), _jsx("path", { d: "M19 10v2a7 7 0 0 1-14 0v-2" }), _jsx("line", { x1: "12", x2: "12", y1: "19", y2: "22" })] }) }), _jsx("h2", { className: "sui-canvas-empty-title", children: "Voice Canvas" }), _jsx("p", { className: "sui-canvas-empty-desc", children: "Speak to build interfaces live with your design system components." }), _jsx("p", { className: "sui-canvas-empty-hint", children: "Try: \"Create a product card with an image, title, price, and buy button\"" })] })), !storyReady && isGenerating && (_jsxs("div", { className: "sui-canvas-progress", children: [_jsx("div", { className: "sui-canvas-progress-spinner" }), _jsx("span", { className: "sui-canvas-progress-text", children: statusText || 'Building...' })] })), storyReady && (_jsxs("div", { className: "sui-canvas-live-wrapper", children: [isGenerating && (_jsxs("div", { className: "sui-canvas-regen-overlay", children: [_jsx("div", { className: "sui-canvas-progress-spinner sui-canvas-progress-spinner--sm" }), _jsx("span", { children: statusText || 'Regenerating...' })] })), _jsx("iframe", { ref: iframeRef, src: iframeSrc, title: "Voice Canvas Preview", className: "sui-canvas-iframe", onLoad: handleIframeLoad }, iframeKey)] })), !isGenerating && errorMessage && (_jsxs("div", { className: "sui-canvas-error", children: [_jsx("span", { children: errorMessage }), _jsx("button", { type: "button", className: "sui-canvas-error-dismiss", onClick: () => setErrorMessage(''), "aria-label": "Dismiss error", children: "\u00D7" })] })), savedMessage && (_jsxs("div", { className: "sui-canvas-saved-toast", children: [_jsx("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: _jsx("polyline", { points: "20 6 9 17 4 12" }) }), _jsxs("span", { children: ["Saved: ", savedMessage] })] }))] }), statusText && !isGenerating && (_jsx("div", { className: "sui-canvas-status-bar", children: _jsx("span", { className: "sui-canvas-explanation", children: statusText }) })), _jsxs("div", { className: `sui-canvas-bar ${isListening ? 'sui-canvas-bar--active' : ''}`, children: [_jsxs("div", { className: "sui-canvas-bar-left", children: [_jsxs("button", { type: "button", className: `sui-canvas-mic ${isListening ? 'sui-canvas-mic--active' : ''}`, onClick: toggleListening, "aria-label": isListening ? 'Stop voice input' : 'Start voice input', children: [_jsxs("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [_jsx("path", { d: "M12 2a3 3 0 0 0-3 3v7a3 3 0 0 0 6 0V5a3 3 0 0 0-3-3Z" }), _jsx("path", { d: "M19 10v2a7 7 0 0 1-14 0v-2" }), _jsx("line", { x1: "12", x2: "12", y1: "19", y2: "22" })] }), isListening && _jsx("span", { className: "sui-canvas-mic-pulse" })] }), _jsx("div", { className: "sui-canvas-transcript", children: isGenerating ? (_jsx("span", { className: "sui-canvas-status-rendering", children: statusText || 'Building interface...' })) : interimText ? (_jsxs("span", { className: "sui-canvas-status-interim", children: [pendingTranscript ? pendingTranscript + ' ' : '', interimText] })) : pendingTranscript ? (_jsx("span", { className: "sui-canvas-status-final", children: pendingTranscript })) : isListening ? (_jsx("span", { className: "sui-canvas-status-listening", children: "Listening... describe what you want to build" })) : lastPrompt ? (_jsxs("span", { className: "sui-canvas-status-hint", title: lastPrompt, children: ["\u2713 ", lastPrompt.length > 72 ? lastPrompt.slice(0, 69) + '…' : lastPrompt] })) : (_jsx("span", { className: "sui-canvas-status-hint", children: "Click the mic and describe what to build" })) })] }), _jsxs("div", { className: "sui-canvas-bar-right", children: [canUndo && (_jsx("button", { type: "button", className: "sui-canvas-action", onClick: undo, title: "Undo (Cmd+Z)", children: _jsxs("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: [_jsx("polyline", { points: "1 4 1 10 7 10" }), _jsx("path", { d: "M3.51 15a9 9 0 1 0 2.13-9.36L1 10" })] }) })), canRedo && (_jsx("button", { type: "button", className: "sui-canvas-action", onClick: redo, title: "Redo (Cmd+Shift+Z)", children: _jsxs("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: [_jsx("polyline", { points: "23 4 23 10 17 10" }), _jsx("path", { d: "M20.49 15a9 9 0 1 1-2.13-9.36L23 10" })] }) })), hasContent && (_jsx("button", { type: "button", className: "sui-canvas-action", onClick: saveStory, title: "Save as story", children: _jsxs("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: [_jsx("path", { d: "M19 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11l5 5v11a2 2 0 0 1-2 2z" }), _jsx("polyline", { points: "17 21 17 13 7 13 7 21" }), _jsx("polyline", { points: "7 3 7 8 15 8" })] }) })), hasContent && (_jsx("button", { type: "button", className: "sui-canvas-action", onClick: clear, title: "Clear canvas", children: _jsxs("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", 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" })] }) }))] })] })] }));
 }

package/dist/templates/StoryUI/voice/VoiceCanvas.tsx

@@ -57,6 +57,7 @@ export function VoiceCanvas({
   const [statusText, setStatusText] = useState('');
   const [errorMessage, setErrorMessage] = useState('');
   const [savedMessage, setSavedMessage] = useState('');
+  const [lastPrompt, setLastPrompt] = useState('');
 
   // ── Last prompt (used for auto-title on save) ─────────────────
   const lastPromptRef = useRef('');
@@ -78,6 +79,9 @@ export function VoiceCanvas({
   const stopListeningRef = useRef<() => void>(() => {});
   const currentCodeRef = useRef(currentCode);
   currentCodeRef.current = currentCode;
+  // Incremented on every new generation to prevent stale finally blocks from
+  // clobbering the state of a newer in-flight request.
+  const generationCounterRef = useRef(0);
   // Ref to the preview iframe element
   const iframeRef = useRef<HTMLIFrameElement>(null);
   // True after the iframe fires its onLoad event
@@ -105,6 +109,10 @@ export function VoiceCanvas({
   const sendCanvasRequest = useCallback(async (transcript: string) => {
     if (abortRef.current) abortRef.current.abort();
 
+    // Stamp this generation so stale finally blocks from aborted requests
+    // don't clobber the state of a newer in-flight request.
+    const genId = ++generationCounterRef.current;
+
     setIsGenerating(true);
     setStatusText('Thinking...');
     setErrorMessage('');
@@ -112,6 +120,14 @@ export function VoiceCanvas({
     const controller = new AbortController();
     abortRef.current = controller;
 
+    // 120-second safety timeout — prevents infinite "Thinking…" when the
+    // MCP server accepts the connection but the LLM takes too long.
+    let timedOut = false;
+    const timeoutId = setTimeout(() => {
+      timedOut = true;
+      controller.abort();
+    }, 120_000);
+
     try {
       const currentCode = currentCodeRef.current;
       const isEdit = currentCode.trim().length > 0;
@@ -155,6 +171,7 @@ export function VoiceCanvas({
         }
 
         lastPromptRef.current = transcript;
+        setLastPrompt(transcript);
         try { localStorage.setItem(LS_PROMPT_KEY, transcript); } catch {}
         conversationRef.current.push(
           { role: 'user', content: transcript },
@@ -169,14 +186,27 @@ export function VoiceCanvas({
 
       setStatusText('');
     } catch (error) {
-      if ((error as Error).name === 'AbortError') return;
-      const msg = error instanceof Error ? error.message : String(error);
-      setErrorMessage(msg);
-      setStatusText('');
-      onError?.(msg);
+      if ((error as Error).name === 'AbortError') {
+        // Only surface a timeout error if this is still the active generation.
+        if (timedOut && generationCounterRef.current === genId) {
+          setErrorMessage('Request timed out — the LLM took too long. Please try again.');
+          setStatusText('');
+        }
+        return;
+      }
+      if (generationCounterRef.current === genId) {
+        const msg = error instanceof Error ? error.message : String(error);
+        setErrorMessage(msg);
+        setStatusText('');
+        onError?.(msg);
+      }
     } finally {
-      setIsGenerating(false);
-      abortRef.current = null;
+      clearTimeout(timeoutId);
+      // Only reset shared state if no newer generation has started since we began.
+      if (generationCounterRef.current === genId) {
+        setIsGenerating(false);
+        abortRef.current = null;
+      }
     }
   }, [apiBase, provider, model, storyReady, sendCodeToIframe, onError]);
 
@@ -275,7 +305,13 @@ export function VoiceCanvas({
     if (autoSubmitRef.current) clearTimeout(autoSubmitRef.current);
     autoSubmitRef.current = setTimeout(() => {
       const prompt = transcript.trim();
-      if (prompt) sendCanvasRequest(prompt);
+      if (prompt) {
+        // Clear the pending transcript BEFORE sending so that stopListening
+        // (if pressed moments later) doesn't fire a duplicate request.
+        pendingTranscriptRef.current = '';
+        setPendingTranscript('');
+        sendCanvasRequest(prompt);
+      }
       autoSubmitRef.current = null;
     }, 1200);
   }, [sendCanvasRequest]);
@@ -471,6 +507,7 @@ export function VoiceCanvas({
       const savedPrompt = localStorage.getItem(LS_PROMPT_KEY);
       if (savedPrompt) {
         lastPromptRef.current = savedPrompt;
+        setLastPrompt(savedPrompt);
       }
     } catch { /* localStorage unavailable */ }
   }, []); // eslint-disable-line react-hooks/exhaustive-deps
@@ -642,6 +679,10 @@ export function VoiceCanvas({
               <span className="sui-canvas-status-final">{pendingTranscript}</span>
             ) : isListening ? (
               <span className="sui-canvas-status-listening">Listening... describe what you want to build</span>
+            ) : lastPrompt ? (
+              <span className="sui-canvas-status-hint" title={lastPrompt}>
+                ✓ {lastPrompt.length > 72 ? lastPrompt.slice(0, 69) + '…' : lastPrompt}
+              </span>
             ) : (
               <span className="sui-canvas-status-hint">Click the mic and describe what to build</span>
             )}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tpitre/story-ui",
-  "version": "4.13.0",
+  "version": "4.13.2",
   "description": "AI-powered Storybook story generator with dynamic component discovery",
   "type": "module",
   "main": "dist/index.js",

package/templates/StoryUI/StoryUIPanel.tsx

@@ -777,7 +777,9 @@ function formatTime(timestamp: number): string {
 function getModelDisplayName(model: string): string {
   const displayNames: Record<string, string> = {
     // Claude models
-    'claude-opus-4-5-20251101': 'Claude Opus 4.5',
+    'claude-opus-4-6': 'Claude Opus 4.6',
+    'claude-sonnet-4-6': 'Claude Sonnet 4.6',
+    'claude-opus-4-20250514': 'Claude Opus 4',
     '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',

package/templates/StoryUI/voice/VoiceCanvas.tsx

@@ -57,6 +57,7 @@ export function VoiceCanvas({
   const [statusText, setStatusText] = useState('');
   const [errorMessage, setErrorMessage] = useState('');
   const [savedMessage, setSavedMessage] = useState('');
+  const [lastPrompt, setLastPrompt] = useState('');
 
   // ── Last prompt (used for auto-title on save) ─────────────────
   const lastPromptRef = useRef('');
@@ -78,6 +79,9 @@ export function VoiceCanvas({
   const stopListeningRef = useRef<() => void>(() => {});
   const currentCodeRef = useRef(currentCode);
   currentCodeRef.current = currentCode;
+  // Incremented on every new generation to prevent stale finally blocks from
+  // clobbering the state of a newer in-flight request.
+  const generationCounterRef = useRef(0);
   // Ref to the preview iframe element
   const iframeRef = useRef<HTMLIFrameElement>(null);
   // True after the iframe fires its onLoad event
@@ -105,6 +109,10 @@ export function VoiceCanvas({
   const sendCanvasRequest = useCallback(async (transcript: string) => {
     if (abortRef.current) abortRef.current.abort();
 
+    // Stamp this generation so stale finally blocks from aborted requests
+    // don't clobber the state of a newer in-flight request.
+    const genId = ++generationCounterRef.current;
+
     setIsGenerating(true);
     setStatusText('Thinking...');
     setErrorMessage('');
@@ -112,6 +120,14 @@ export function VoiceCanvas({
     const controller = new AbortController();
     abortRef.current = controller;
 
+    // 120-second safety timeout — prevents infinite "Thinking…" when the
+    // MCP server accepts the connection but the LLM takes too long.
+    let timedOut = false;
+    const timeoutId = setTimeout(() => {
+      timedOut = true;
+      controller.abort();
+    }, 120_000);
+
     try {
       const currentCode = currentCodeRef.current;
       const isEdit = currentCode.trim().length > 0;
@@ -155,6 +171,7 @@ export function VoiceCanvas({
         }
 
         lastPromptRef.current = transcript;
+        setLastPrompt(transcript);
         try { localStorage.setItem(LS_PROMPT_KEY, transcript); } catch {}
         conversationRef.current.push(
           { role: 'user', content: transcript },
@@ -169,14 +186,27 @@ export function VoiceCanvas({
 
       setStatusText('');
     } catch (error) {
-      if ((error as Error).name === 'AbortError') return;
-      const msg = error instanceof Error ? error.message : String(error);
-      setErrorMessage(msg);
-      setStatusText('');
-      onError?.(msg);
+      if ((error as Error).name === 'AbortError') {
+        // Only surface a timeout error if this is still the active generation.
+        if (timedOut && generationCounterRef.current === genId) {
+          setErrorMessage('Request timed out — the LLM took too long. Please try again.');
+          setStatusText('');
+        }
+        return;
+      }
+      if (generationCounterRef.current === genId) {
+        const msg = error instanceof Error ? error.message : String(error);
+        setErrorMessage(msg);
+        setStatusText('');
+        onError?.(msg);
+      }
     } finally {
-      setIsGenerating(false);
-      abortRef.current = null;
+      clearTimeout(timeoutId);
+      // Only reset shared state if no newer generation has started since we began.
+      if (generationCounterRef.current === genId) {
+        setIsGenerating(false);
+        abortRef.current = null;
+      }
     }
   }, [apiBase, provider, model, storyReady, sendCodeToIframe, onError]);
 
@@ -275,7 +305,13 @@ export function VoiceCanvas({
     if (autoSubmitRef.current) clearTimeout(autoSubmitRef.current);
     autoSubmitRef.current = setTimeout(() => {
       const prompt = transcript.trim();
-      if (prompt) sendCanvasRequest(prompt);
+      if (prompt) {
+        // Clear the pending transcript BEFORE sending so that stopListening
+        // (if pressed moments later) doesn't fire a duplicate request.
+        pendingTranscriptRef.current = '';
+        setPendingTranscript('');
+        sendCanvasRequest(prompt);
+      }
       autoSubmitRef.current = null;
     }, 1200);
   }, [sendCanvasRequest]);
@@ -471,6 +507,7 @@ export function VoiceCanvas({
       const savedPrompt = localStorage.getItem(LS_PROMPT_KEY);
       if (savedPrompt) {
         lastPromptRef.current = savedPrompt;
+        setLastPrompt(savedPrompt);
       }
     } catch { /* localStorage unavailable */ }
   }, []); // eslint-disable-line react-hooks/exhaustive-deps
@@ -642,6 +679,10 @@ export function VoiceCanvas({
               <span className="sui-canvas-status-final">{pendingTranscript}</span>
             ) : isListening ? (
               <span className="sui-canvas-status-listening">Listening... describe what you want to build</span>
+            ) : lastPrompt ? (
+              <span className="sui-canvas-status-hint" title={lastPrompt}>
+                ✓ {lastPrompt.length > 72 ? lastPrompt.slice(0, 69) + '…' : lastPrompt}
+              </span>
             ) : (
               <span className="sui-canvas-status-hint">Click the mic and describe what to build</span>
             )}

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

@@ -1,17 +0,0 @@
-/**
- * Convert Voice Canvas HTML to Storybook Story (Hybrid Mode)
- *
- * Generates a hybrid story file with two exports:
- * - Reference: iframe-based render of the exact voice canvas HTML (100% visual fidelity, no LLM)
- * - Default: LLM-generated component-based implementation using the project's design system
- *
- * Unlike dumping HTML into the prompt field, this endpoint:
- * - Parses the HTML structure and extracts semantic intent
- * - Maps inline styles to design system tokens/props
- * - Generates component-based code using actual imports
- * - Preserves visual fidelity through structural constraints
- * - Provides a pixel-perfect reference via iframe for comparison
- */
-import { Request, Response } from 'express';
-export declare function convertToStory(req: Request, res: Response): Promise<void>;
-//# sourceMappingURL=convertToStory.d.ts.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"convertToStory.d.ts","sourceRoot":"","sources":["../../../mcp-server/routes/convertToStory.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;GAaG;AAEH,OAAO,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,SAAS,CAAC;AA2jB5C,wBAAsB,cAAc,CAAC,GAAG,EAAE,OAAO,EAAE,GAAG,EAAE,QAAQ,GAAG,OAAO,CAAC,IAAI,CAAC,CAuP/E"}