vzcode 2.28.0 → 2.30.0

package/src/llm-streaming-ui/components/ChatInput.tsx

@@ -10,10 +10,50 @@ import {
   ButtonGroup,
   ToggleButton,
 } from '../../client/bootstrap';
-import { enableAskMode } from '../../client/featureFlags';
+import {
+  enableAskMode,
+  enableVoiceInput,
+} from '../../client/featureFlags';
 import { useSpeechRecognition } from './useSpeechRecognition';
 import { MicSVG, MicOffSVG } from '../../client/Icons';
 
+/**
+ * Microphone toggle for voice typing. Purely presentational: the
+ * speech recognition state lives in `ChatInputComponent`, and is only
+ * ever instantiated when the user actually toggles the button.
+ *
+ * Rendered only when `enableVoiceInput` is set. See `featureFlags`.
+ */
+const VoiceInputButton = ({
+  isSpeaking,
+  onToggle,
+}: {
+  isSpeaking: boolean;
+  onToggle: () => void;
+}) => {
+  const label = isSpeaking
+    ? 'Stop voice typing'
+    : 'Start voice typing';
+
+  return (
+    <Button
+      variant={isSpeaking ? 'danger' : 'outline-secondary'}
+      size="sm"
+      onClick={onToggle}
+      aria-label={label}
+      title={label}
+      style={{
+        borderColor: isSpeaking ? undefined : '#dee2e6',
+        borderRadius: '0.375rem',
+        borderWidth: '1px',
+        borderStyle: 'solid',
+      }}
+    >
+      {isSpeaking ? <MicOffSVG /> : <MicSVG />}
+    </Button>
+  );
+};
+
 interface ChatInputProps {
   aiChatMessage: string;
   setAIChatMessage: (message: string) => void;
@@ -39,7 +79,8 @@ const ChatInputComponent = ({
 }: ChatInputProps) => {
   const inputRef = useRef<HTMLTextAreaElement>(null);
 
-  // Use the speech recognition hook
+  // Speech recognition is created lazily on first toggle, so simply
+  // mounting this hook does not touch any browser media APIs.
   const {
     isSpeaking,
     toggleSpeechRecognition,
@@ -186,33 +227,12 @@ const ChatInputComponent = ({
             {aiChatMessage ? 'Press Enter to send' : ''}
           </span>
           <div style={{ display: 'flex', gap: '8px' }}>
-            <Button
-              variant={
-                isSpeaking ? 'danger' : 'outline-secondary'
-              }
-              size="sm"
-              onClick={toggleSpeechRecognition}
-              aria-label={
-                isSpeaking
-                  ? 'Stop voice typing'
-                  : 'Start voice typing'
-              }
-              title={
-                isSpeaking
-                  ? 'Stop voice typing'
-                  : 'Start voice typing'
-              }
-              style={{
-                borderColor: isSpeaking
-                  ? undefined
-                  : '#dee2e6',
-                borderRadius: '0.375rem',
-                borderWidth: '1px',
-                borderStyle: 'solid',
-              }}
-            >
-              {isSpeaking ? <MicOffSVG /> : <MicSVG />}
-            </Button>
+            {enableVoiceInput && (
+              <VoiceInputButton
+                isSpeaking={isSpeaking}
+                onToggle={toggleSpeechRecognition}
+              />
+            )}
             <Button
               variant={
                 aiChatMessage.trim()

package/src/llm-streaming-ui/components/useSpeechRecognition.ts

@@ -2,6 +2,7 @@ import {
   useState,
   useEffect,
   useCallback,
+  useRef,
   Dispatch,
   SetStateAction,
 } from 'react';
@@ -12,18 +13,41 @@ export interface UseSpeechRecognitionResult {
   stopSpeaking: () => void;
 }
 
+/**
+ * Speech-to-text input for the AI chat box.
+ *
+ * The underlying `SpeechRecognition` instance is created lazily, on the
+ * first call to `toggleSpeechRecognition`, rather than eagerly when the
+ * hook mounts. Eager construction can make some browsers show a
+ * microphone permission prompt as soon as the editor loads, before the
+ * user has asked for voice input.
+ */
 export const useSpeechRecognition = (
   onTranscriptChange: Dispatch<SetStateAction<string>>,
 ): UseSpeechRecognitionResult => {
   const [isSpeaking, setIsSpeaking] =
     useState<boolean>(false);
-  const [recognition, setRecognition] =
-    // @ts-ignore
-    useState<SpeechRecognition | null>(null);
-  const [, setFinalTranscript] = useState<string>('');
-
-  // Speech recognition setup
+  // `SpeechRecognition` is not part of the DOM lib, so the type
+  // reference is suppressed here, as with the constructor lookups below.
+  // @ts-ignore
+  const recognitionRef = useRef<SpeechRecognition | null>(
+    null,
+  );
+
+  // Keep the latest callback in a ref so the lazily-created
+  // recognition instance always calls the current handler, without
+  // having to tear down and recreate the instance.
+  const onTranscriptChangeRef = useRef(onTranscriptChange);
   useEffect(() => {
+    onTranscriptChangeRef.current = onTranscriptChange;
+  }, [onTranscriptChange]);
+
+  // Create the SpeechRecognition instance on first use.
+  const getRecognition = useCallback(() => {
+    if (recognitionRef.current) {
+      return recognitionRef.current;
+    }
+
     // Check if browser supports SpeechRecognition
     const SpeechRecognition =
       // @ts-ignore
@@ -31,56 +55,52 @@ export const useSpeechRecognition = (
       // @ts-ignore
       window.webkitSpeechRecognition;
 
-    if (SpeechRecognition) {
-      const recognitionInstance = new SpeechRecognition();
-      recognitionInstance.continuous = true;
-      recognitionInstance.interimResults = true;
-
-      recognitionInstance.onresult = (event) => {
-        let finalText = '';
-        let interimText = '';
-
-        // Process all results to separate final and interim text
-        for (let i = 0; i < event.results.length; i++) {
-          const result = event.results[i];
-          if (result.isFinal) {
-            finalText += result[0].transcript;
-          } else {
-            interimText += result[0].transcript;
-          }
+    if (!SpeechRecognition) {
+      return null;
+    }
+
+    const recognitionInstance = new SpeechRecognition();
+    recognitionInstance.continuous = true;
+    recognitionInstance.interimResults = true;
+
+    recognitionInstance.onresult = (event) => {
+      let finalText = '';
+      let interimText = '';
+
+      // Process all results to separate final and interim text
+      for (let i = 0; i < event.results.length; i++) {
+        const result = event.results[i];
+        if (result.isFinal) {
+          finalText += result[0].transcript;
+        } else {
+          interimText += result[0].transcript;
         }
+      }
 
-        // Update our final transcript state
-        setFinalTranscript(finalText);
-
-        // Combine final and interim text and update the prompt
-        const fullTranscript = finalText + interimText;
-        onTranscriptChange(fullTranscript);
-      };
-
-      recognitionInstance.onerror = (event) => {
-        console.error(
-          'Speech recognition error',
-          event.error,
-        );
-        setIsSpeaking(false);
-      };
-
-      recognitionInstance.onend = () => {
-        setIsSpeaking(false);
-        // Reset final transcript when recognition ends
-        setFinalTranscript('');
-      };
-
-      setRecognition(recognitionInstance);
-
-      return () => {
-        recognitionInstance.abort();
-      };
-    }
-  }, [onTranscriptChange]);
+      // Combine final and interim text and update the prompt
+      onTranscriptChangeRef.current(
+        finalText + interimText,
+      );
+    };
+
+    recognitionInstance.onerror = (event) => {
+      console.error(
+        'Speech recognition error',
+        event.error,
+      );
+      setIsSpeaking(false);
+    };
+
+    recognitionInstance.onend = () => {
+      setIsSpeaking(false);
+    };
+
+    recognitionRef.current = recognitionInstance;
+    return recognitionInstance;
+  }, []);
 
   const toggleSpeechRecognition = useCallback(() => {
+    const recognition = getRecognition();
     if (!recognition) {
       console.error(
         'Speech recognition not supported in this browser',
@@ -92,21 +112,25 @@ export const useSpeechRecognition = (
       recognition.stop();
       setIsSpeaking(false);
     } else {
-      // Reset final transcript when starting new recognition
-      setFinalTranscript('');
       recognition.start();
       setIsSpeaking(true);
     }
-  }, [isSpeaking, recognition]);
+  }, [getRecognition, isSpeaking]);
 
   const stopSpeaking = useCallback(() => {
-    if (recognition && isSpeaking) {
-      recognition.stop();
+    if (recognitionRef.current && isSpeaking) {
+      recognitionRef.current.stop();
       setIsSpeaking(false);
-      // Reset final transcript when manually stopping
-      setFinalTranscript('');
     }
-  }, [isSpeaking, recognition]);
+  }, [isSpeaking]);
+
+  // Release the microphone if the component unmounts while listening.
+  useEffect(
+    () => () => {
+      recognitionRef.current?.abort();
+    },
+    [],
+  );
 
   return {
     isSpeaking,

package/src/server/aiChatHandler/index.ts

@@ -4,6 +4,7 @@ import {
   ensureChatExists,
   addUserMessage,
   setAIStatus,
+  setChatAIMetadata,
 } from '../../llm-streaming-server/chatOperations.js';
 import { createLLMFunction } from '../../llm-streaming-server/llmStreaming.js';
 import { performAIEditing } from '../../llm-streaming-server/aiEditing.js';
@@ -23,15 +24,31 @@ export const handleAIChatMessage =
   ({
     shareDBDoc,
     onCreditDeduction,
+    onGenerationFinished,
     model,
     aiRequestOptions,
     enableReasoningTokens,
+    baseCommitId,
+    escalationLevel,
   }: {
     shareDBDoc: ShareDBDoc<VizContent>;
     onCreditDeduction?: any;
+    onGenerationFinished?: (result: {
+      success: boolean;
+      editResult?: any;
+      metrics?: any;
+      error?: any;
+    }) => Promise<void> | void;
     model?: string;
     aiRequestOptions?: any;
     enableReasoningTokens?: boolean;
+    // Phase 3: explicit escalation base. Persisted on the chat so that
+    // repeated "Try Harder" clicks are idempotent and do not depend on
+    // the fragile `parent(currentCommit)` heuristic.
+    baseCommitId?: string;
+    // Explicit escalation level, persisted on the chat so it survives
+    // reloads and is shared across clients.
+    escalationLevel?: number;
   }) =>
   async (req: any, res: any) => {
     const { content, chatId } = req.body;
@@ -60,6 +77,13 @@ export const handleAIChatMessage =
       // Add user message to chat
       addUserMessage(shareDBDoc, chatId, content);
 
+      // Persist explicit escalation metadata on the chat, so that
+      // retries are idempotent and the level survives reloads.
+      setChatAIMetadata(shareDBDoc, chatId, {
+        baseCommitId,
+        escalationLevel,
+      });
+
       // Return success immediately - AI generation continues in background
       res.status(200).json('success');
 
@@ -72,6 +96,7 @@ export const handleAIChatMessage =
         aiRequestOptions,
         enableReasoningTokens,
         onCreditDeduction,
+        onGenerationFinished,
       }).catch((error) => {
         console.error(
           'Background AI processing error:',
@@ -96,6 +121,7 @@ const processAIRequestAsync = async ({
   aiRequestOptions,
   enableReasoningTokens,
   onCreditDeduction,
+  onGenerationFinished,
 }: {
   shareDBDoc: ShareDBDoc<VizContent>;
   chatId: string;
@@ -104,6 +130,12 @@ const processAIRequestAsync = async ({
   aiRequestOptions?: any;
   enableReasoningTokens?: boolean;
   onCreditDeduction?: any;
+  onGenerationFinished?: (result: {
+    success: boolean;
+    editResult?: any;
+    metrics?: any;
+    error?: any;
+  }) => Promise<void> | void;
 }) => {
   try {
     // Create LLM function for streaming
@@ -128,23 +160,40 @@ const processAIRequestAsync = async ({
       runCode,
     });
 
-    // Handle credit deduction if callback is provided
+    // Billing is best-effort. It must NEVER prevent the edit from
+    // being committed. Any metadata failure is logged and swallowed.
+    let metrics: any = null;
     if (onCreditDeduction && editResult.generationId) {
       try {
-        await onCreditDeduction(
-          await getGenerationMetadata({
-            apiKey:
-              aiRequestOptions?.apiKey ||
-              process.env.VZCODE_EDIT_WITH_AI_API_KEY,
-            generationId: editResult.generationId,
-          }),
-        );
+        metrics = await getGenerationMetadata({
+          apiKey:
+            aiRequestOptions?.apiKey ||
+            process.env.VZCODE_EDIT_WITH_AI_API_KEY,
+          generationId: editResult.generationId,
+        });
+        await onCreditDeduction(metrics);
       } catch (creditError) {
         console.error(
-          'Credit deduction error:',
+          'Credit deduction error (edit will still be finalized):',
           creditError,
         );
-        // Don't fail the request if credit deduction fails
+      }
+    }
+
+    // Always notify settlement on success, regardless of billing
+    // outcome, so the caller can commit the edit and release locks.
+    if (onGenerationFinished) {
+      try {
+        await onGenerationFinished({
+          success: true,
+          editResult,
+          metrics,
+        });
+      } catch (settleError) {
+        console.error(
+          'onGenerationFinished (success) error:',
+          settleError,
+        );
       }
     }
 
@@ -153,6 +202,23 @@ const processAIRequestAsync = async ({
   } catch (error) {
     // Set error status and add error message to chat
     setAIStatus(shareDBDoc, chatId, 'error');
+
+    // Always notify settlement on failure so the caller can roll back
+    // the pre-restore snapshot and release locks.
+    if (onGenerationFinished) {
+      try {
+        await onGenerationFinished({
+          success: false,
+          error,
+        });
+      } catch (settleError) {
+        console.error(
+          'onGenerationFinished (failure) error:',
+          settleError,
+        );
+      }
+    }
+
     handleBackgroundError(shareDBDoc, chatId, error);
   }
 };

package/src/types.ts

@@ -262,6 +262,9 @@ export interface ExtendedVizChat extends VizChat {
   currentStatus?: string;
   isStreaming?: boolean;
   model?: string; // The LLM model used for this chat
+  // Phase 3: explicit escalation metadata persisted on the chat.
+  baseCommitId?: string; // Commit the current AI attempt is applied on top of
+  escalationLevel?: number; // How many times "Try Harder" has been pressed
 }
 
 // Extended VizChatMessage with progressive rendering support

package/src/vite-env.d.ts

@@ -2,6 +2,7 @@
 
 interface ImportMetaEnv {
   readonly VITE_ENABLE_LIVEKIT: string;
+  readonly VITE_ENABLE_VOICE_INPUT: string;
   // Add other environment variables here as needed
 }