Address PR feedback: fix payload types, move executedCommands to runtime, use mutex for interrupt, remove isInterrupted

Co-authored-by: na-trium-144 <100704180+na-trium-144@users.noreply.github.com>

Author: Copilot

app/terminal/javascript/runtime.tsx

@@ -26,6 +26,7 @@ export function useJavaScript(): RuntimeContext {
 type MessageToWorker =
   | {
       type: "init";
+      payload?: undefined;
     }
   | {
       type: "runJavaScript";
@@ -37,6 +38,7 @@ type MessageToWorker =
     }
   | {
       type: "restoreState";
+      payload: { commands: string[] };
     };
 
 type MessageFromWorker =
@@ -59,7 +61,7 @@ export function JavaScriptProvider({ children }: { children: ReactNode }) {
     Map<number, [(payload: any) => void, (error: string) => void]>
   >(new Map());
   const nextMessageId = useRef<number>(0);
-  const isInterrupted = useRef<boolean>(false);
+  const executedCommands = useRef<string[]>([]);
 
   function postMessage<T>({ type, payload }: MessageToWorker) {
     const id = nextMessageId.current++;
@@ -86,70 +88,52 @@ export function JavaScriptProvider({ children }: { children: ReactNode }) {
       }
     };
 
-    postMessage<InitPayloadFromWorker>({
+    return postMessage<InitPayloadFromWorker>({
       type: "init",
     }).then(({ success }) => {
       if (success) {
         setReady(true);
       }
+      return worker;
     });
-
-    return worker;
   }, []);
 
   useEffect(() => {
-    const worker = initializeWorker();
+    let worker: Worker | null = null;
+    initializeWorker().then((w) => {
+      worker = w;
+    });
 
     return () => {
-      worker.terminate();
+      worker?.terminate();
     };
   }, [initializeWorker]);
 
   const interrupt = useCallback(async () => {
     // Since we can't interrupt JavaScript execution directly,
     // we terminate the worker and restart it, then restore state
-    isInterrupted.current = true;
-    
-    // Reject all pending callbacks before terminating
-    const error = "Worker interrupted";
-    messageCallbacks.current.forEach(([, reject]) => reject(error));
-    messageCallbacks.current.clear();
-    
-    // Terminate the current worker
-    workerRef.current?.terminate();
-    
-    // Reset ready state
-    setReady(false);
-    
-    // Create a new worker
-    initializeWorker();
-    
-    // Wait for initialization with timeout
-    const maxRetries = 50; // 5 seconds total
-    let retries = 0;
-    
-    await new Promise<void>((resolve, reject) => {
-      const checkInterval = setInterval(() => {
-        retries++;
-        if (retries > maxRetries) {
-          clearInterval(checkInterval);
-          reject(new Error("Worker initialization timeout"));
-          return;
-        }
-        
-        if (workerRef.current) {
-          // Try to restore state
-          postMessage<{ success: boolean }>({
-            type: "restoreState",
-          }).then(() => {
-            clearInterval(checkInterval);
-            isInterrupted.current = false;
-            resolve();
-          }).catch(() => {
-            // Keep trying
-          });
-        }
-      }, 100);
+    await mutex.current.runExclusive(async () => {
+      // Reject all pending callbacks before terminating
+      const error = "Worker interrupted";
+      messageCallbacks.current.forEach(([, reject]) => reject(error));
+      messageCallbacks.current.clear();
+      
+      // Terminate the current worker
+      workerRef.current?.terminate();
+      
+      // Reset ready state
+      setReady(false);
+      
+      // Create a new worker and wait for it to be ready
+      await initializeWorker();
+      
+      // Restore state by re-executing previous commands
+      if (executedCommands.current.length > 0) {
+        await postMessage<{ success: boolean }>({
+          type: "restoreState",
+          payload: { commands: executedCommands.current },
+        });
+      }
     });
   }, [initializeWorker]);
 
@@ -169,13 +153,11 @@ export function JavaScriptProvider({ children }: { children: ReactNode }) {
           type: "runJavaScript",
           payload: { code },
         });
+        // Save successfully executed command
+        executedCommands.current.push(code);
         return output;
       } catch (error) {
-        // If interrupted or worker was terminated, return appropriate message
-        if (isInterrupted.current) {
-          return [{ type: "error", message: "実行が中断されました" }];
-        }
-        // Handle other errors
+        // Handle errors (including "Worker interrupted")
         if (error instanceof Error) {
           return [{ type: "error", message: error.message }];
         }

public/javascript.worker.js

@@ -1,6 +1,5 @@
 // JavaScript web worker
 let jsOutput = [];
-let executedCommands = []; // Store successfully executed commands for state recovery
 
 // Helper function to capture console output
 function createConsoleProxy() {
@@ -22,7 +21,6 @@ function createConsoleProxy() {
 
 async function init(id) {
   // Initialize the worker
-  executedCommands = [];
   self.postMessage({ id, payload: { success: true } });
 }
 
@@ -42,9 +40,6 @@ async function runJavaScript(id, payload) {
         message: String(result),
       });
     }
-    
-    // Save the successfully executed command for state recovery
-    executedCommands.push(code);
   } catch (e) {
     // Use self.console to avoid recursion with our console proxy
     self.console.log(e);
@@ -93,17 +88,15 @@ async function checkSyntax(id, payload) {
   }
 }
 
-async function restoreState(id) {
+async function restoreState(id, payload) {
   // Re-execute all previously successful commands to restore state
-  const commandsToRestore = [...executedCommands];
-  executedCommands = []; // Clear before re-executing
+  const { commands } = payload;
   jsOutput = []; // Clear output for restoration
 
-  for (const command of commandsToRestore) {
+  for (const command of commands) {
     try {
       const console = createConsoleProxy();
       eval(command);
-      executedCommands.push(command);
     } catch (e) {
       // If restoration fails, we still continue with other commands
       // Use self.console to avoid recursion with our console proxy
@@ -128,7 +121,7 @@ self.onmessage = async (event) => {
       await checkSyntax(id, payload);
       return;
     case "restoreState":
-      await restoreState(id);
+      await restoreState(id, payload);
       return;
     default:
       console.error(`Unknown message type: ${type}`);