From 0727b61de73dd83dffc5c2576c0af016afd6376d Mon Sep 17 00:00:00 2001
From: Prayas Lashkari <prayas.lashkari98@gmail.com>
Date: Sun, 15 Mar 2026 02:07:39 -0400
Subject: [PATCH 1/4] feat: add restart recording functionality in LaunchWindow
 and useScreenRecorder

---
 src/components/launch/LaunchWindow.tsx | 24 +++++++++++++++++++++++-
 src/hooks/useScreenRecorder.ts         | 15 +++++++++++++++
 2 files changed, 38 insertions(+), 1 deletion(-)

diff --git a/src/components/launch/LaunchWindow.tsx b/src/components/launch/LaunchWindow.tsx
index b456dd6..ef3c3b3 100644
--- a/src/components/launch/LaunchWindow.tsx
+++ b/src/components/launch/LaunchWindow.tsx
@@ -4,7 +4,15 @@ import { BsRecordCircle } from "react-icons/bs";
 import { FaRegStopCircle } from "react-icons/fa";
 import { FaFolderOpen } from "react-icons/fa6";
 import { FiMinus, FiX } from "react-icons/fi";
-import { MdMic, MdMicOff, MdMonitor, MdVideoFile, MdVolumeOff, MdVolumeUp } from "react-icons/md";
+import {
+	MdMic,
+	MdMicOff,
+	MdMonitor,
+	MdRestartAlt,
+	MdVideoFile,
+	MdVolumeOff,
+	MdVolumeUp,
+} from "react-icons/md";
 import { RxDragHandleDots2 } from "react-icons/rx";
 import { useAudioLevelMeter } from "../../hooks/useAudioLevelMeter";
 import { useMicrophoneDevices } from "../../hooks/useMicrophoneDevices";
@@ -24,6 +32,7 @@ const ICON_CONFIG = {
 	micOn: { icon: MdMic, size: ICON_SIZE },
 	micOff: { icon: MdMicOff, size: ICON_SIZE },
 	stop: { icon: FaRegStopCircle, size: ICON_SIZE },
+	restart: { icon: MdRestartAlt, size: ICON_SIZE },
 	record: { icon: BsRecordCircle, size: ICON_SIZE },
 	videoFile: { icon: MdVideoFile, size: ICON_SIZE },
 	folder: { icon: FaFolderOpen, size: ICON_SIZE },
@@ -51,6 +60,7 @@ export function LaunchWindow() {
 	const {
 		recording,
 		toggleRecording,
+		restartRecording,
 		microphoneEnabled,
 		setMicrophoneEnabled,
 		microphoneDeviceId,
@@ -256,6 +266,18 @@ export function LaunchWindow() {
 						)}
 					</button>
 
+					{/* Restart recording */}
+					{recording && (
+						<Tooltip content="Restart recording">
+							<button
+								className={`${hudIconBtnClasses} ${styles.electronNoDrag}`}
+								onClick={restartRecording}
+							>
+								{getIcon("restart", "text-white/60")}
+							</button>
+						</Tooltip>
+					)}
+
 					{/* Open video file */}
 					<Tooltip content="Open video file">
 						<button
diff --git a/src/hooks/useScreenRecorder.ts b/src/hooks/useScreenRecorder.ts
index 2ac2e3b..dbe9152 100644
--- a/src/hooks/useScreenRecorder.ts
+++ b/src/hooks/useScreenRecorder.ts
@@ -41,6 +41,7 @@ const MIC_GAIN_BOOST = 1.4;
 type UseScreenRecorderReturn = {
 	recording: boolean;
 	toggleRecording: () => void;
+	restartRecording: () => void;
 	microphoneEnabled: boolean;
 	setMicrophoneEnabled: (enabled: boolean) => void;
 	microphoneDeviceId: string | undefined;
@@ -61,6 +62,7 @@ export function useScreenRecorder(): UseScreenRecorderReturn {
 	const mixingContext = useRef<AudioContext | null>(null);
 	const chunks = useRef<Blob[]>([]);
 	const startTime = useRef<number>(0);
+	const discardRecording = useRef(false);
 
 	const selectMimeType = () => {
 		const preferred = [
@@ -301,6 +303,11 @@ export function useScreenRecorder(): UseScreenRecorderReturn {
 			};
 			recorder.onstop = async () => {
 				stream.current = null;
+				if (discardRecording.current) {
+					discardRecording.current = false;
+					chunks.current = [];
+					return;
+				}
 				if (chunks.current.length === 0) return;
 				const duration = Date.now() - startTime.current;
 				const recordedChunks = chunks.current;
@@ -370,9 +377,17 @@ export function useScreenRecorder(): UseScreenRecorderReturn {
 		recording ? stopRecording.current() : startRecording();
 	};
 
+	const restartRecording = () => {
+		if (!recording) return;
+		discardRecording.current = true;
+		stopRecording.current();
+		startRecording();
+	};
+
 	return {
 		recording,
 		toggleRecording,
+		restartRecording,
 		microphoneEnabled,
 		setMicrophoneEnabled,
 		microphoneDeviceId,

From 119c3acb18eb1c3deda4748f1564e1c7914ce55a Mon Sep 17 00:00:00 2001
From: Prayas Lashkari <prayas.lashkari98@gmail.com>
Date: Tue, 17 Mar 2026 01:57:55 -0400
Subject: [PATCH 2/4] feat: implement async restart recording functionality to
 ensure proper session handling

---
 src/hooks/useScreenRecorder.ts | 16 ++++++++++++++--
 1 file changed, 14 insertions(+), 2 deletions(-)

diff --git a/src/hooks/useScreenRecorder.ts b/src/hooks/useScreenRecorder.ts
index dbe9152..a69da59 100644
--- a/src/hooks/useScreenRecorder.ts
+++ b/src/hooks/useScreenRecorder.ts
@@ -377,11 +377,23 @@ export function useScreenRecorder(): UseScreenRecorderReturn {
 		recording ? stopRecording.current() : startRecording();
 	};
 
-	const restartRecording = () => {
+	const restartRecording = async () => {
 		if (!recording) return;
 		discardRecording.current = true;
+
+		// Wait for the old recorder's onstop to fully complete before starting
+		// a new session, so the discard logic doesn't race with new chunks.
+		const waitForStop = new Promise<void>((resolve) => {
+			if (mediaRecorder.current) {
+				mediaRecorder.current.addEventListener("stop", () => resolve(), { once: true });
+			} else {
+				resolve();
+			}
+		});
+
 		stopRecording.current();
-		startRecording();
+		await waitForStop;
+		await startRecording();
 	};
 
 	return {

From 9a5d94a1c80a8ffbac32b90d61215b7d9c6d9277 Mon Sep 17 00:00:00 2001
From: Prayas Lashkari <prayas.lashkari98@gmail.com>
Date: Tue, 17 Mar 2026 02:00:02 -0400
Subject: [PATCH 3/4] refactor: update VideoEditor layout and add config.json
 for setup and teardown

---
 src/components/video-editor/VideoEditor.tsx | 372 ++++++++++----------
 1 file changed, 182 insertions(+), 190 deletions(-)

diff --git a/src/components/video-editor/VideoEditor.tsx b/src/components/video-editor/VideoEditor.tsx
index b3bdb8d..685c468 100644
--- a/src/components/video-editor/VideoEditor.tsx
+++ b/src/components/video-editor/VideoEditor.tsx
@@ -1222,201 +1222,193 @@ export default function VideoEditor() {
 
 			<div className="flex-1 p-5 gap-4 flex min-h-0 relative">
 				{/* Left Column - Video & Timeline */}
-				<div className="flex-[7] flex flex-col gap-3 min-w-0 h-full">
-					<PanelGroup direction="vertical" className="gap-3">
-						{/* Top section: video preview and controls */}
-						<Panel defaultSize={70} minSize={40}>
-							<div className="w-full h-full flex flex-col items-center justify-center bg-black/40 rounded-2xl border border-white/5 shadow-2xl overflow-hidden">
-								{/* Video preview */}
-								<div
-									className="w-full flex justify-center items-center"
-									style={{ flex: "1 1 auto", margin: "6px 0 0" }}
-								>
-									<div
-										className="relative"
-										style={{
-											width: "auto",
-											height: "100%",
-											aspectRatio:
-												aspectRatio === "native"
-													? getNativeAspectRatioValue(
-															videoPlaybackRef.current?.video?.videoWidth || 1920,
-															videoPlaybackRef.current?.video?.videoHeight || 1080,
-															cropRegion,
-														)
-													: getAspectRatioValue(aspectRatio),
-											maxWidth: "100%",
-											margin: "0 auto",
-											boxSizing: "border-box",
-										}}
-									>
-										<VideoPlayback
-											key={videoPath || "no-video"}
-											aspectRatio={aspectRatio}
-											ref={videoPlaybackRef}
-											videoPath={videoPath || ""}
-											onDurationChange={setDuration}
-											onTimeUpdate={setCurrentTime}
-											currentTime={currentTime}
-											onPlayStateChange={setIsPlaying}
-											onError={setError}
-											wallpaper={wallpaper}
-											zoomRegions={zoomRegions}
-											selectedZoomId={selectedZoomId}
-											onSelectZoom={handleSelectZoom}
-											onZoomFocusChange={handleZoomFocusChange}
-											onZoomFocusDragEnd={commitState}
-											isPlaying={isPlaying}
-											showShadow={shadowIntensity > 0}
-											shadowIntensity={shadowIntensity}
-											showBlur={showBlur}
-											motionBlurAmount={motionBlurAmount}
-											borderRadius={borderRadius}
-											padding={padding}
-											cropRegion={cropRegion}
-											trimRegions={trimRegions}
-											speedRegions={speedRegions}
-											annotationRegions={annotationRegions}
-											selectedAnnotationId={selectedAnnotationId}
-											onSelectAnnotation={handleSelectAnnotation}
-											onAnnotationPositionChange={handleAnnotationPositionChange}
-											onAnnotationSizeChange={handleAnnotationSizeChange}
-										/>
+				<PanelGroup direction="horizontal" className="gap-3">
+					<Panel>
+						<PanelGroup direction="vertical" className="gap-3">
+							{/* Top section: video preview and controls */}
+							<Panel defaultSize={70} maxSize={70} minSize={40}>
+								<div className="w-full h-full flex flex-col items-center justify-center bg-black/40 rounded-2xl border border-white/5 shadow-2xl overflow-hidden">
+									{/* Video preview */}
+									<div className="w-full flex justify-center items-center flex-auto mt-1.5">
+										<div
+											className="relative flex justify-center items-center w-auto h-full max-w-full box-border"
+											style={{
+												aspectRatio:
+													aspectRatio === "native"
+														? getNativeAspectRatioValue(
+																videoPlaybackRef.current?.video?.videoWidth || 1920,
+																videoPlaybackRef.current?.video?.videoHeight || 1080,
+																cropRegion,
+															)
+														: getAspectRatioValue(aspectRatio),
+											}}
+										>
+											<VideoPlayback
+												key={videoPath || "no-video"}
+												aspectRatio={aspectRatio}
+												ref={videoPlaybackRef}
+												videoPath={videoPath || ""}
+												onDurationChange={setDuration}
+												onTimeUpdate={setCurrentTime}
+												currentTime={currentTime}
+												onPlayStateChange={setIsPlaying}
+												onError={setError}
+												wallpaper={wallpaper}
+												zoomRegions={zoomRegions}
+												selectedZoomId={selectedZoomId}
+												onSelectZoom={handleSelectZoom}
+												onZoomFocusChange={handleZoomFocusChange}
+												onZoomFocusDragEnd={commitState}
+												isPlaying={isPlaying}
+												showShadow={shadowIntensity > 0}
+												shadowIntensity={shadowIntensity}
+												showBlur={showBlur}
+												motionBlurAmount={motionBlurAmount}
+												borderRadius={borderRadius}
+												padding={padding}
+												cropRegion={cropRegion}
+												trimRegions={trimRegions}
+												speedRegions={speedRegions}
+												annotationRegions={annotationRegions}
+												selectedAnnotationId={selectedAnnotationId}
+												onSelectAnnotation={handleSelectAnnotation}
+												onAnnotationPositionChange={handleAnnotationPositionChange}
+												onAnnotationSizeChange={handleAnnotationSizeChange}
+											/>
+										</div>
+									</div>
+									{/* Playback controls */}
+									<div className="w-full flex justify-center items-center h-12 flex-shrink-0 px-3 py-1.5 my-1.5">
+										<div className="w-full max-w-[700px]">
+											<PlaybackControls
+												isPlaying={isPlaying}
+												currentTime={currentTime}
+												duration={duration}
+												onTogglePlayPause={togglePlayPause}
+												onSeek={handleSeek}
+											/>
+										</div>
 									</div>
 								</div>
-								{/* Playback controls */}
-								<div
-									className="w-full flex justify-center items-center"
-									style={{
-										height: "48px",
-										flexShrink: 0,
-										padding: "6px 12px",
-										margin: "6px 0 6px 0",
-									}}
-								>
-									<div style={{ width: "100%", maxWidth: "700px" }}>
-										<PlaybackControls
-											isPlaying={isPlaying}
-											currentTime={currentTime}
-											duration={duration}
-											onTogglePlayPause={togglePlayPause}
-											onSeek={handleSeek}
-										/>
-									</div>
+							</Panel>
+
+							<PanelResizeHandle className="bg-[#09090b]/80 hover:bg-[#09090b] transition-colors rounded-full flex items-center justify-center">
+								<div className="w-8 h-1 bg-white/20 rounded-full"></div>
+							</PanelResizeHandle>
+
+							{/* Timeline section */}
+							<Panel defaultSize={30} maxSize={60} minSize={30}>
+								<div className="h-full bg-[#09090b] rounded-2xl border border-white/5 shadow-lg overflow-hidden flex flex-col">
+									<TimelineEditor
+										videoDuration={duration}
+										currentTime={currentTime}
+										onSeek={handleSeek}
+										cursorTelemetry={cursorTelemetry}
+										zoomRegions={zoomRegions}
+										onZoomAdded={handleZoomAdded}
+										onZoomSuggested={handleZoomSuggested}
+										onZoomSpanChange={handleZoomSpanChange}
+										onZoomDelete={handleZoomDelete}
+										selectedZoomId={selectedZoomId}
+										onSelectZoom={handleSelectZoom}
+										trimRegions={trimRegions}
+										onTrimAdded={handleTrimAdded}
+										onTrimSpanChange={handleTrimSpanChange}
+										onTrimDelete={handleTrimDelete}
+										selectedTrimId={selectedTrimId}
+										onSelectTrim={handleSelectTrim}
+										speedRegions={speedRegions}
+										onSpeedAdded={handleSpeedAdded}
+										onSpeedSpanChange={handleSpeedSpanChange}
+										onSpeedDelete={handleSpeedDelete}
+										selectedSpeedId={selectedSpeedId}
+										onSelectSpeed={handleSelectSpeed}
+										annotationRegions={annotationRegions}
+										onAnnotationAdded={handleAnnotationAdded}
+										onAnnotationSpanChange={handleAnnotationSpanChange}
+										onAnnotationDelete={handleAnnotationDelete}
+										selectedAnnotationId={selectedAnnotationId}
+										onSelectAnnotation={handleSelectAnnotation}
+										aspectRatio={aspectRatio}
+										onAspectRatioChange={(ar) => pushState({ aspectRatio: ar })}
+									/>
 								</div>
-							</div>
-						</Panel>
+							</Panel>
+						</PanelGroup>
+					</Panel>
 
-						<PanelResizeHandle className="h-3 bg-[#09090b]/80 hover:bg-[#09090b] transition-colors rounded-full mx-4 flex items-center justify-center">
-							<div className="w-8 h-1 bg-white/20 rounded-full"></div>
-						</PanelResizeHandle>
+					<PanelResizeHandle className="h-full bg-[#09090b]/80 hover:bg-[#09090b] transition-colors rounded-full flex items-center justify-center">
+						<div className="w-1 h-8 bg-white/20 rounded-full"></div>
+					</PanelResizeHandle>
 
-						{/* Timeline section */}
-						<Panel defaultSize={30} minSize={20}>
-							<div className="h-full bg-[#09090b] rounded-2xl border border-white/5 shadow-lg overflow-hidden flex flex-col">
-								<TimelineEditor
-									videoDuration={duration}
-									currentTime={currentTime}
-									onSeek={handleSeek}
-									cursorTelemetry={cursorTelemetry}
-									zoomRegions={zoomRegions}
-									onZoomAdded={handleZoomAdded}
-									onZoomSuggested={handleZoomSuggested}
-									onZoomSpanChange={handleZoomSpanChange}
-									onZoomDelete={handleZoomDelete}
-									selectedZoomId={selectedZoomId}
-									onSelectZoom={handleSelectZoom}
-									trimRegions={trimRegions}
-									onTrimAdded={handleTrimAdded}
-									onTrimSpanChange={handleTrimSpanChange}
-									onTrimDelete={handleTrimDelete}
-									selectedTrimId={selectedTrimId}
-									onSelectTrim={handleSelectTrim}
-									speedRegions={speedRegions}
-									onSpeedAdded={handleSpeedAdded}
-									onSpeedSpanChange={handleSpeedSpanChange}
-									onSpeedDelete={handleSpeedDelete}
-									selectedSpeedId={selectedSpeedId}
-									onSelectSpeed={handleSelectSpeed}
-									annotationRegions={annotationRegions}
-									onAnnotationAdded={handleAnnotationAdded}
-									onAnnotationSpanChange={handleAnnotationSpanChange}
-									onAnnotationDelete={handleAnnotationDelete}
-									selectedAnnotationId={selectedAnnotationId}
-									onSelectAnnotation={handleSelectAnnotation}
-									aspectRatio={aspectRatio}
-									onAspectRatioChange={(ar) => pushState({ aspectRatio: ar })}
-								/>
-							</div>
-						</Panel>
-					</PanelGroup>
-				</div>
-
-				{/* Right section: settings panel */}
-				<SettingsPanel
-					selected={wallpaper}
-					onWallpaperChange={(w) => pushState({ wallpaper: w })}
-					selectedZoomDepth={
-						selectedZoomId ? zoomRegions.find((z) => z.id === selectedZoomId)?.depth : null
-					}
-					onZoomDepthChange={(depth) => selectedZoomId && handleZoomDepthChange(depth)}
-					selectedZoomId={selectedZoomId}
-					onZoomDelete={handleZoomDelete}
-					selectedTrimId={selectedTrimId}
-					onTrimDelete={handleTrimDelete}
-					shadowIntensity={shadowIntensity}
-					onShadowChange={(v) => updateState({ shadowIntensity: v })}
-					onShadowCommit={commitState}
-					showBlur={showBlur}
-					onBlurChange={(v) => pushState({ showBlur: v })}
-					motionBlurAmount={motionBlurAmount}
-					onMotionBlurChange={(v) => updateState({ motionBlurAmount: v })}
-					onMotionBlurCommit={commitState}
-					borderRadius={borderRadius}
-					onBorderRadiusChange={(v) => updateState({ borderRadius: v })}
-					onBorderRadiusCommit={commitState}
-					padding={padding}
-					onPaddingChange={(v) => updateState({ padding: v })}
-					onPaddingCommit={commitState}
-					cropRegion={cropRegion}
-					onCropChange={(r) => pushState({ cropRegion: r })}
-					aspectRatio={aspectRatio}
-					videoElement={videoPlaybackRef.current?.video || null}
-					exportQuality={exportQuality}
-					onExportQualityChange={setExportQuality}
-					exportFormat={exportFormat}
-					onExportFormatChange={setExportFormat}
-					gifFrameRate={gifFrameRate}
-					onGifFrameRateChange={setGifFrameRate}
-					gifLoop={gifLoop}
-					onGifLoopChange={setGifLoop}
-					gifSizePreset={gifSizePreset}
-					onGifSizePresetChange={setGifSizePreset}
-					gifOutputDimensions={calculateOutputDimensions(
-						videoPlaybackRef.current?.video?.videoWidth || 1920,
-						videoPlaybackRef.current?.video?.videoHeight || 1080,
-						gifSizePreset,
-						GIF_SIZE_PRESETS,
-					)}
-					onExport={handleOpenExportDialog}
-					selectedAnnotationId={selectedAnnotationId}
-					annotationRegions={annotationRegions}
-					onAnnotationContentChange={handleAnnotationContentChange}
-					onAnnotationTypeChange={handleAnnotationTypeChange}
-					onAnnotationStyleChange={handleAnnotationStyleChange}
-					onAnnotationFigureDataChange={handleAnnotationFigureDataChange}
-					onAnnotationDelete={handleAnnotationDelete}
-					onSaveProject={handleSaveProject}
-					onLoadProject={handleLoadProject}
-					selectedSpeedId={selectedSpeedId}
-					selectedSpeedValue={
-						selectedSpeedId
-							? (speedRegions.find((r) => r.id === selectedSpeedId)?.speed ?? null)
-							: null
-					}
-					onSpeedChange={handleSpeedChange}
-					onSpeedDelete={handleSpeedDelete}
-				/>
+					{/* Right section: settings panel */}
+					<Panel defaultSize={30} minSize={25} maxSize={50}>
+						<SettingsPanel
+							selected={wallpaper}
+							onWallpaperChange={(w) => pushState({ wallpaper: w })}
+							selectedZoomDepth={
+								selectedZoomId ? zoomRegions.find((z) => z.id === selectedZoomId)?.depth : null
+							}
+							onZoomDepthChange={(depth) => selectedZoomId && handleZoomDepthChange(depth)}
+							selectedZoomId={selectedZoomId}
+							onZoomDelete={handleZoomDelete}
+							selectedTrimId={selectedTrimId}
+							onTrimDelete={handleTrimDelete}
+							shadowIntensity={shadowIntensity}
+							onShadowChange={(v) => updateState({ shadowIntensity: v })}
+							onShadowCommit={commitState}
+							showBlur={showBlur}
+							onBlurChange={(v) => pushState({ showBlur: v })}
+							motionBlurAmount={motionBlurAmount}
+							onMotionBlurChange={(v) => updateState({ motionBlurAmount: v })}
+							onMotionBlurCommit={commitState}
+							borderRadius={borderRadius}
+							onBorderRadiusChange={(v) => updateState({ borderRadius: v })}
+							onBorderRadiusCommit={commitState}
+							padding={padding}
+							onPaddingChange={(v) => updateState({ padding: v })}
+							onPaddingCommit={commitState}
+							cropRegion={cropRegion}
+							onCropChange={(r) => pushState({ cropRegion: r })}
+							aspectRatio={aspectRatio}
+							videoElement={videoPlaybackRef.current?.video || null}
+							exportQuality={exportQuality}
+							onExportQualityChange={setExportQuality}
+							exportFormat={exportFormat}
+							onExportFormatChange={setExportFormat}
+							gifFrameRate={gifFrameRate}
+							onGifFrameRateChange={setGifFrameRate}
+							gifLoop={gifLoop}
+							onGifLoopChange={setGifLoop}
+							gifSizePreset={gifSizePreset}
+							onGifSizePresetChange={setGifSizePreset}
+							gifOutputDimensions={calculateOutputDimensions(
+								videoPlaybackRef.current?.video?.videoWidth || 1920,
+								videoPlaybackRef.current?.video?.videoHeight || 1080,
+								gifSizePreset,
+								GIF_SIZE_PRESETS,
+							)}
+							onExport={handleOpenExportDialog}
+							selectedAnnotationId={selectedAnnotationId}
+							annotationRegions={annotationRegions}
+							onAnnotationContentChange={handleAnnotationContentChange}
+							onAnnotationTypeChange={handleAnnotationTypeChange}
+							onAnnotationStyleChange={handleAnnotationStyleChange}
+							onAnnotationFigureDataChange={handleAnnotationFigureDataChange}
+							onAnnotationDelete={handleAnnotationDelete}
+							onSaveProject={handleSaveProject}
+							onLoadProject={handleLoadProject}
+							selectedSpeedId={selectedSpeedId}
+							selectedSpeedValue={
+								selectedSpeedId
+									? (speedRegions.find((r) => r.id === selectedSpeedId)?.speed ?? null)
+									: null
+							}
+							onSpeedChange={handleSpeedChange}
+							onSpeedDelete={handleSpeedDelete}
+						/>
+					</Panel>
+				</PanelGroup>
 			</div>
 
 			<Toaster theme="dark" className="pointer-events-auto" />

From e2147bec63cf167e703c9fcdf91279427cb367ad Mon Sep 17 00:00:00 2001
From: Prayas Lashkari <prayas.lashkari98@gmail.com>
Date: Tue, 17 Mar 2026 13:48:31 -0400
Subject: [PATCH 4/4] feat: enhance restart recording functionality to prevent
 concurrent restarts

---
 src/hooks/useScreenRecorder.ts | 23 ++++++++++++++---------
 1 file changed, 14 insertions(+), 9 deletions(-)

diff --git a/src/hooks/useScreenRecorder.ts b/src/hooks/useScreenRecorder.ts
index a69da59..cce4df2 100644
--- a/src/hooks/useScreenRecorder.ts
+++ b/src/hooks/useScreenRecorder.ts
@@ -63,6 +63,7 @@ export function useScreenRecorder(): UseScreenRecorderReturn {
 	const chunks = useRef<Blob[]>([]);
 	const startTime = useRef<number>(0);
 	const discardRecording = useRef(false);
+	const restarting = useRef(false);
 
 	const selectMimeType = () => {
 		const preferred = [
@@ -378,22 +379,26 @@ export function useScreenRecorder(): UseScreenRecorderReturn {
 	};
 
 	const restartRecording = async () => {
-		if (!recording) return;
+		if (restarting.current) return;
+
+		const recorder = mediaRecorder.current;
+		if (!recorder || recorder.state !== "recording") return;
+
+		restarting.current = true;
 		discardRecording.current = true;
 
-		// Wait for the old recorder's onstop to fully complete before starting
-		// a new session, so the discard logic doesn't race with new chunks.
 		const waitForStop = new Promise<void>((resolve) => {
-			if (mediaRecorder.current) {
-				mediaRecorder.current.addEventListener("stop", () => resolve(), { once: true });
-			} else {
-				resolve();
-			}
+			recorder.addEventListener("stop", () => resolve(), { once: true });
 		});
 
 		stopRecording.current();
 		await waitForStop;
-		await startRecording();
+
+		try {
+			await startRecording();
+		} finally {
+			restarting.current = false;
+		}
 	};
 
 	return {