Enable browser recording (#4182)

skyvern-frontend/src/components/BrowserStream.tsx

@@ -627,11 +627,14 @@ function BrowserStream({
           "source" in data &&
           typeof data.source === "string"
         ) {
+          const event = data as MessageInExfiltratedEvent;
+
           return {
             kind: "exfiltrated-event",
-            event_name: data.event_name,
-            params: data.params,
-            source: data.source,
+            event_name: event.event_name,
+            params: event.params,
+            source: event.source,
+            timestamp: event.timestamp,
           } as MessageInExfiltratedEvent;
         }
         break;
@@ -803,6 +806,7 @@ function BrowserStream({
                           if (!hasEvents) {
                             e.preventDefault();
                             recordingStore.setIsRecording(false);
+                            recordingStore.reset();
                           }
                         }}
                       >
@@ -826,6 +830,7 @@ function BrowserStream({
                             variant="destructive"
                             onClick={() => {
                               recordingStore.setIsRecording(false);
+                              recordingStore.reset();
                             }}
                           >
                             Cancel recording

skyvern-frontend/src/components/Flippable.tsx

@@ -1,4 +1,6 @@
 import { ReactNode, Children, useRef, useEffect } from "react";
+
+import { useRecordingStore } from "@/store/useRecordingStore";
 import { cn } from "@/util/utils";
 
 interface FlippableProps {
@@ -22,6 +24,7 @@ export function Flippable({
   className,
   preserveFrontsideHeight = false,
 }: FlippableProps) {
+  const recordingStore = useRecordingStore();
   const childrenArray = Children.toArray(children);
   const front = childrenArray[0];
   const back = childrenArray[1];
@@ -48,7 +51,12 @@ export function Flippable({
   }, [facing, preserveFrontsideHeight]);
 
   return (
-    <div className={className} style={{ perspective: "1000px" }}>
+    <div
+      className={cn(className, {
+        "pointer-events-none opacity-50": recordingStore.isRecording,
+      })}
+      style={{ perspective: "1000px" }}
+    >
       <div
         className={cn(
           "transition-transform duration-700",