@tpitre/story-ui 4.13.0 → 4.13.1

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.1",
   "description": "AI-powered Storybook story generator with dynamic component discovery",
   "type": "module",
   "main": "dist/index.js",

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"}