From d7bbb4789cdadb6916b0a1d8d3b156a4e0461a6a Mon Sep 17 00:00:00 2001
From: Nakul Srivastava <imnakul44@gmail.com>
Date: Mon, 28 Sep 2026 14:16:00 +0530
Subject: [PATCH 1/9] fix(playback): allow recorded video from the asset
 protocol

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 apps/desktop/src-tauri/tauri.conf.json |  2 +-
 apps/desktop/src/test/csp.test.ts      | 15 +++++++++++++++
 2 files changed, 16 insertions(+), 1 deletion(-)
 create mode 100644 apps/desktop/src/test/csp.test.ts

diff --git a/apps/desktop/src-tauri/tauri.conf.json b/apps/desktop/src-tauri/tauri.conf.json
index 4f0ef66..0b41999 100644
--- a/apps/desktop/src-tauri/tauri.conf.json
+++ b/apps/desktop/src-tauri/tauri.conf.json
@@ -42,7 +42,7 @@
       }
     ],
     "security": {
-      "csp": "default-src 'self' customprotocol: asset:; img-src 'self' asset: http://asset.localhost blob: data:; style-src 'self' 'unsafe-inline'; connect-src ipc: http://ipc.localhost",
+      "csp": "default-src 'self' customprotocol: asset:; img-src 'self' asset: http://asset.localhost blob: data:; media-src 'self' asset: http://asset.localhost blob:; style-src 'self' 'unsafe-inline'; connect-src ipc: http://ipc.localhost",
       "assetProtocol": {
         "enable": true,
         "scope": [
diff --git a/apps/desktop/src/test/csp.test.ts b/apps/desktop/src/test/csp.test.ts
new file mode 100644
index 0000000..bf6e35c
--- /dev/null
+++ b/apps/desktop/src/test/csp.test.ts
@@ -0,0 +1,15 @@
+import { describe, expect, it } from "vitest";
+import config from "../../src-tauri/tauri.conf.json";
+
+/**
+ * Recordings play from the asset protocol (`http://asset.localhost/…`), so
+ * `media-src` must allow it. Without this, `<video>` falls back to
+ * `default-src` and every recording shows 0:00.
+ */
+describe("content security policy", () => {
+  it("allows video from the asset protocol", () => {
+    const csp = (config as { app: { security: { csp: string } } }).app.security.csp;
+    const media = /(?:^|;)\s*media-src\s+([^;]*)/.exec(csp)?.[1] ?? "";
+    expect(media).toContain("http://asset.localhost");
+  });
+});

From 4a7c44ff059051601352810434e05ad3cb990326 Mon Sep 17 00:00:00 2001
From: Nakul Srivastava <imnakul44@gmail.com>
Date: Mon, 28 Sep 2026 14:27:31 +0530
Subject: [PATCH 2/9] fix(camera): close with the recorder, clip to shape, add
 glyphs and drag

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 .../src-tauri/capabilities/default.json       |  1 +
 apps/desktop/src-tauri/src/lib.rs             |  3 +
 .../src/components/CameraPreview.test.tsx     | 57 +++++++++++++
 apps/desktop/src/components/CameraPreview.tsx | 82 +++++++++++++------
 apps/desktop/src/components/icons.tsx         |  2 +
 5 files changed, 122 insertions(+), 23 deletions(-)

diff --git a/apps/desktop/src-tauri/capabilities/default.json b/apps/desktop/src-tauri/capabilities/default.json
index d462412..d618432 100644
--- a/apps/desktop/src-tauri/capabilities/default.json
+++ b/apps/desktop/src-tauri/capabilities/default.json
@@ -8,6 +8,7 @@
     "core:event:default",
     "core:window:default",
     "core:window:allow-close",
+    "core:window:allow-start-dragging",
     "core:window:allow-set-resizable",
     "dialog:default",
     "autostart:allow-enable",
diff --git a/apps/desktop/src-tauri/src/lib.rs b/apps/desktop/src-tauri/src/lib.rs
index c728f8a..cd9ff1c 100644
--- a/apps/desktop/src-tauri/src/lib.rs
+++ b/apps/desktop/src-tauri/src/lib.rs
@@ -1694,6 +1694,9 @@ fn close_recorder(
     if let Some(window) = app.get_webview_window("record-region") {
         let _ = window.destroy();
     }
+    if let Some(window) = app.get_webview_window("camera") {
+        let _ = window.destroy();
+    }
     if let Some(window) = app.get_webview_window("recorder") {
         let _ = window.destroy();
     }
diff --git a/apps/desktop/src/components/CameraPreview.test.tsx b/apps/desktop/src/components/CameraPreview.test.tsx
index 4c19d12..8904fe2 100644
--- a/apps/desktop/src/components/CameraPreview.test.tsx
+++ b/apps/desktop/src/components/CameraPreview.test.tsx
@@ -8,8 +8,15 @@ const mocks = {
   prepare: vi.fn<() => Promise<void>>(() => Promise.resolve()),
   settings: vi.fn<() => Promise<void>>(() => Promise.resolve()),
   stream: vi.fn<() => Promise<MediaStream>>(),
+  drag: vi.fn<() => Promise<void>>(() => Promise.resolve()),
 };
 
+vi.mock("@tauri-apps/api/window", () => ({
+  getCurrentWindow: (): { startDragging: () => Promise<void> } => ({
+    startDragging: (): Promise<void> => mocks.drag(),
+  }),
+}));
+
 vi.mock("../lib/recordingTauri", () => ({
   cameraReady: (mode: string): Promise<void> => mocks.ready(mode),
   closeCamera: (): Promise<void> => mocks.close(),
@@ -80,6 +87,56 @@ describe("CameraPreview", () => {
     },
   );
 
+  it("shows shape glyphs with pressed state and no text", async () => {
+    mocks.stream.mockResolvedValue({ getTracks: () => [] } as unknown as MediaStream);
+    render(<CameraPreview />);
+    await screen.findByLabelText("Camera preview");
+
+    for (const name of ["Circle camera", "Rounded camera", "Square camera"] as const) {
+      const button = screen.getByRole("button", { name });
+      expect(button).toHaveTextContent("");
+      expect(button.querySelector("svg")).not.toBeNull();
+    }
+    expect(screen.getByRole("button", { name: "Circle camera" })).toHaveAttribute(
+      "aria-pressed",
+      "true",
+    );
+    fireEvent.click(screen.getByRole("button", { name: "Square camera" }));
+    expect(screen.getByRole("button", { name: "Square camera" })).toHaveAttribute(
+      "aria-pressed",
+      "true",
+    );
+    const close = screen.getByRole("button", { name: "Close the camera" });
+    expect(close.querySelector("svg")).not.toBeNull();
+    expect(close).not.toHaveTextContent("close");
+  });
+
+  it("clips the bubble per shape", async () => {
+    mocks.stream.mockResolvedValue({ getTracks: () => [] } as unknown as MediaStream);
+    render(<CameraPreview />);
+    const video = await screen.findByLabelText("Camera preview");
+    const wrapper = video.parentElement;
+    expect(wrapper?.className).toContain("[clip-path:circle(50%)]");
+
+    fireEvent.click(screen.getByRole("button", { name: "Rounded camera" }));
+    expect(video.parentElement?.className).toContain("[clip-path:inset(0_round_22%)]");
+
+    fireEvent.click(screen.getByRole("button", { name: "Square camera" }));
+    expect(video.parentElement?.className).not.toContain("clip-path");
+  });
+
+  it("drags the bubble but not from its controls", async () => {
+    mocks.stream.mockResolvedValue({ getTracks: () => [] } as unknown as MediaStream);
+    render(<CameraPreview />);
+    const video = await screen.findByLabelText("Camera preview");
+
+    fireEvent.pointerDown(video, { button: 0 });
+    expect(mocks.drag).toHaveBeenCalledTimes(1);
+
+    fireEvent.pointerDown(screen.getByRole("button", { name: "Circle camera" }), { button: 0 });
+    expect(mocks.drag).toHaveBeenCalledTimes(1);
+  });
+
   it("retries in place and reveals the live bubble on success", async () => {
     mocks.stream.mockImplementation(failingStream("NotAllowedError"));
     render(<CameraPreview />);
diff --git a/apps/desktop/src/components/CameraPreview.tsx b/apps/desktop/src/components/CameraPreview.tsx
index 2287f1a..0ac0295 100644
--- a/apps/desktop/src/components/CameraPreview.tsx
+++ b/apps/desktop/src/components/CameraPreview.tsx
@@ -1,5 +1,7 @@
 import { useCallback, useEffect, useRef, useState } from "react";
+import { getCurrentWindow } from "@tauri-apps/api/window";
 import { cameraShapes, type CameraShape } from "../domain/videoScene";
+import { Cancel, CircleShape, RoundedSquareShape, SquareShape } from "./icons";
 import {
   cameraReady,
   closeCamera,
@@ -13,6 +15,26 @@ const shapeClass: Readonly<Record<CameraShape, string>> = {
   square: "rounded-none",
 };
 
+/** Hard clip for the live image. A transformed video escapes `overflow:
+ * hidden` + radius in Chromium, so the clip follows the border shape. */
+const shapeClip: Readonly<Record<CameraShape, string>> = {
+  circle: "[clip-path:circle(50%)]",
+  rounded: "[clip-path:inset(0_round_22%)]",
+  square: "",
+};
+
+const shapeIcon: Readonly<Record<CameraShape, typeof CircleShape>> = {
+  circle: CircleShape,
+  rounded: RoundedSquareShape,
+  square: SquareShape,
+};
+
+const shapeLabel: Readonly<Record<CameraShape, string>> = {
+  circle: "Circle camera",
+  rounded: "Rounded camera",
+  square: "Square camera",
+};
+
 type CameraFailure =
   | { kind: "blocked" }
   | { kind: "missing" }
@@ -119,41 +141,55 @@ export function CameraPreview(): React.JSX.Element {
   return (
     <div className="group flex h-screen w-screen items-center justify-center bg-transparent p-1">
       {failure === null ? (
-        <div className={`relative size-full overflow-hidden border-2 border-white/70 bg-black shadow-[0_18px_48px_rgba(0,0,0,0.5)] ${shapeClass[shape]}`}>
-          <video
-            aria-label="Camera preview"
-            autoPlay
-            className="size-full -scale-x-100 object-cover"
-            muted
-            playsInline
-            ref={videoRef}
-          />
+        <div className={`relative size-full border-2 border-white/70 bg-black shadow-[0_18px_48px_rgba(0,0,0,0.5)] ${shapeClass[shape]}`}>
+          <div
+            className={`size-full ${shapeClip[shape]}`}
+            onPointerDown={(event) => {
+              if (event.button !== 0) return;
+              if (event.target instanceof Element && event.target.closest("[data-camera-control]") !== null) return;
+              event.preventDefault();
+              void getCurrentWindow().startDragging().catch(() => undefined);
+            }}
+          >
+            <video
+              aria-label="Camera preview"
+              autoPlay
+              className="size-full -scale-x-100 object-cover"
+              muted
+              playsInline
+              ref={videoRef}
+            />
+          </div>
           {/* Controls stay hidden until hover so the preview reads as a camera,
               not a widget, while the presenter is on screen. */}
           <div
             aria-label="Camera shape"
             className="absolute inset-x-0 bottom-0 flex justify-center gap-1 bg-black/55 p-1 opacity-0 transition-opacity group-hover:opacity-100 group-focus-within:opacity-100"
+            data-camera-control="true"
             role="group"
           >
-            {cameraShapes.map((option) => (
-              <button
-                aria-label={`Use a ${option} camera`}
-                aria-pressed={shape === option}
-                className="rounded px-1.5 py-0.5 text-[11px] font-semibold text-stone-300 outline-none transition hover:text-white focus-visible:ring-2 focus-visible:ring-white aria-pressed:bg-white aria-pressed:text-stone-900"
-                key={option}
-                type="button"
-                onClick={() => setShape(option)}
-              >
-                {option}
-              </button>
-            ))}
+            {cameraShapes.map((option) => {
+              const Icon = shapeIcon[option];
+              return (
+                <button
+                  aria-label={shapeLabel[option]}
+                  aria-pressed={shape === option}
+                  className="grid size-[22px] place-items-center rounded text-stone-300 outline-none transition hover:text-white focus-visible:ring-2 focus-visible:ring-white aria-pressed:bg-white aria-pressed:text-stone-900"
+                  key={option}
+                  type="button"
+                  onClick={() => setShape(option)}
+                >
+                  <Icon aria-hidden="true" size={12} />
+                </button>
+              );
+            })}
             <button
               aria-label="Close the camera"
-              className="rounded px-1.5 py-0.5 text-[11px] font-semibold text-[#ff8a80] outline-none transition hover:text-white focus-visible:ring-2 focus-visible:ring-white"
+              className="grid size-[22px] place-items-center rounded text-[#ff8a80] outline-none transition hover:text-white focus-visible:ring-2 focus-visible:ring-white"
               type="button"
               onClick={() => void closeCamera()}
             >
-              close
+              <Cancel aria-hidden="true" size={12} />
             </button>
           </div>
         </div>
diff --git a/apps/desktop/src/components/icons.tsx b/apps/desktop/src/components/icons.tsx
index 788f3e6..ffa2e0d 100644
--- a/apps/desktop/src/components/icons.tsx
+++ b/apps/desktop/src/components/icons.tsx
@@ -68,6 +68,7 @@ import {
   SplinePointerIcon,
   SpotlightIcon,
   SquareIcon,
+  SquareRoundCornerIcon,
   Sun03Icon,
   Tablet01Icon,
   TextIcon,
@@ -177,6 +178,7 @@ export const Smartphone = createCapkitIcon(SmartPhone01Icon);
 export const Sparkles = createCapkitIcon(SparklesIcon);
 export const Spotlight = createCapkitIcon(SpotlightIcon);
 export const SquareShape = createCapkitIcon(SquareIcon);
+export const RoundedSquareShape = createCapkitIcon(SquareRoundCornerIcon);
 export const Sun = createCapkitIcon(Sun03Icon);
 export const Tablet = createCapkitIcon(Tablet01Icon);
 export const Text = createCapkitIcon(TextIcon);

From 583a3046f897bf6f4fd5c302775c74200c978fa3 Mon Sep 17 00:00:00 2001
From: Nakul Srivastava <imnakul44@gmail.com>
Date: Mon, 28 Sep 2026 16:22:26 +0530
Subject: [PATCH 3/9] feat(recorder): record the camera as its own track and
 edit it in Studio

The overlay camera previously burned into the capture. It now records
a separate camera track that Studio can reposition, resize, toggle,
and seek in sync with the screen video.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 apps/desktop/src-tauri/src/domain.rs          |  21 +++
 apps/desktop/src-tauri/src/lib.rs             |  34 ++++-
 .../src/platform/windows_recorder/mod.rs      |   2 +
 .../src-tauri/src/services/recording.rs       |  99 ++++++++++++-
 .../src/components/CameraPreview.test.tsx     | 130 ++++++++++++++++++
 apps/desktop/src/components/CameraPreview.tsx | 119 ++++++++++++++++
 .../src/components/RecorderDock.test.tsx      |  70 +++++++++-
 apps/desktop/src/components/RecorderDock.tsx  |   4 +
 .../components/dashboard/RecordView.test.tsx  |   1 +
 .../dashboard/RecordingPreview.test.tsx       |   1 +
 .../components/dashboard/StudioView.test.tsx  |  11 ++
 .../src/components/dashboard/StudioView.tsx   | 108 ++++++++++++++-
 .../dashboard/showcase/primitives.tsx         |   3 +
 .../dashboard/studio/StudioPanels.tsx         |  11 +-
 apps/desktop/src/domain/recording.ts          |   1 +
 apps/desktop/src/domain/videoScene.test.ts    |  40 ++++++
 apps/desktop/src/domain/videoScene.ts         |  18 ++-
 apps/desktop/src/lib/recordingTauri.test.ts   |  44 ++++++
 apps/desktop/src/lib/recordingTauri.ts        |  28 ++++
 apps/desktop/src/lib/videoExport.test.ts      |  46 ++++++-
 apps/desktop/src/lib/videoExport.ts           |  13 +-
 21 files changed, 789 insertions(+), 15 deletions(-)
 create mode 100644 apps/desktop/src/domain/videoScene.test.ts
 create mode 100644 apps/desktop/src/lib/recordingTauri.test.ts

diff --git a/apps/desktop/src-tauri/src/domain.rs b/apps/desktop/src-tauri/src/domain.rs
index 563895a..dafc5d7 100644
--- a/apps/desktop/src-tauri/src/domain.rs
+++ b/apps/desktop/src-tauri/src/domain.rs
@@ -320,6 +320,7 @@ pub struct RecordingArtifactsDto {
     pub cursor_path: Option<String>,
     pub system_audio_path: Option<String>,
     pub microphone_path: Option<String>,
+    pub camera_path: Option<String>,
     pub width: u32,
     pub height: u32,
     pub fps: u32,
@@ -383,6 +384,26 @@ pub struct CursorTrackDto {
 mod request_tests {
     use super::RecordingRequestDto;
 
+    #[test]
+    fn camera_path_serializes_in_camel_case() {
+        let value = serde_json::to_value(super::RecordingArtifactsDto {
+            id: "rec-1".into(),
+            directory: "dir".into(),
+            video_path: "video.mp4".into(),
+            cursor_path: None,
+            system_audio_path: None,
+            microphone_path: None,
+            camera_path: Some("camera.mp4".into()),
+            width: 1920,
+            height: 1080,
+            fps: 30,
+            duration_seconds: 1.0,
+            stats: super::RecordingStatsDto::default(),
+        })
+        .expect("artifacts serialize");
+        assert_eq!(value["cameraPath"], "camera.mp4");
+    }
+
     #[test]
     fn system_audio_device_id_defaults_to_none() {
         let request = serde_json::from_value::<RecordingRequestDto>(serde_json::json!({
diff --git a/apps/desktop/src-tauri/src/lib.rs b/apps/desktop/src-tauri/src/lib.rs
index cd9ff1c..c75afe2 100644
--- a/apps/desktop/src-tauri/src/lib.rs
+++ b/apps/desktop/src-tauri/src/lib.rs
@@ -1441,10 +1441,40 @@ async fn cancel_recording(app: AppHandle) -> Result<(), SnaphubError> {
 /// Pauses or resumes the recording; paused time is omitted from the output.
 #[tauri::command]
 fn set_recording_paused(
+    app: AppHandle,
     service: tauri::State<'_, RecordingService>,
     paused: bool,
 ) -> Result<bool, SnaphubError> {
-    service.set_paused(paused)
+    let settled = service.set_paused(paused)?;
+    let _ = app.emit(
+        "snaphub://recording-paused",
+        serde_json::json!({ "paused": settled }),
+    );
+    Ok(settled)
+}
+
+/// Starts the camera sidecar for the recording in flight.
+#[tauri::command]
+fn begin_camera_track(
+    service: tauri::State<'_, RecordingService>,
+    extension: String,
+) -> Result<(), SnaphubError> {
+    service.begin_camera_track(&extension)
+}
+
+/// Appends one camera chunk. The frontend ignores the error when no track is
+/// active.
+#[tauri::command]
+fn append_camera_chunk(
+    service: tauri::State<'_, RecordingService>,
+    request: tauri::ipc::Request,
+) -> Result<(), SnaphubError> {
+    let tauri::ipc::InvokeBody::Raw(bytes) = request.body() else {
+        return Err(SnaphubError::Record(
+            "Camera chunk must be raw bytes".into(),
+        ));
+    };
+    service.append_camera_chunk(bytes)
 }
 
 /// Opens the webcam window, excluded from capture so the preview cannot end up
@@ -2112,6 +2142,8 @@ pub fn run() {
             stop_recording,
             cancel_recording,
             recording_status,
+            begin_camera_track,
+            append_camera_chunk,
             set_capture_exclusion,
             recorder_ready,
             fit_recorder,
diff --git a/apps/desktop/src-tauri/src/platform/windows_recorder/mod.rs b/apps/desktop/src-tauri/src/platform/windows_recorder/mod.rs
index c0185c8..bd3cc5b 100644
--- a/apps/desktop/src-tauri/src/platform/windows_recorder/mod.rs
+++ b/apps/desktop/src-tauri/src/platform/windows_recorder/mod.rs
@@ -579,6 +579,8 @@ impl RecordingSession for WindowsRecordingSession {
             cursor_path: cursor_path.map(|path| path.to_string_lossy().into_owned()),
             system_audio_path: system_audio_path.map(|path| path.to_string_lossy().into_owned()),
             microphone_path: microphone_path.map(|path| path.to_string_lossy().into_owned()),
+            // The service sets the real path after the camera file closes.
+            camera_path: None,
             width: self.width,
             height: self.height,
             fps: self.fps,
diff --git a/apps/desktop/src-tauri/src/services/recording.rs b/apps/desktop/src-tauri/src/services/recording.rs
index 34a798e..bf22820 100644
--- a/apps/desktop/src-tauri/src/services/recording.rs
+++ b/apps/desktop/src-tauri/src/services/recording.rs
@@ -1,3 +1,5 @@
+use std::fs::File;
+use std::io::Write;
 use std::path::PathBuf;
 use std::sync::{Arc, Mutex};
 
@@ -14,11 +16,19 @@ use crate::platform::{
 ///
 /// Registered separately from `CaptureService` so the screenshot path and its
 /// tests stay unaware of recording.
+/// A camera sidecar being appended from the camera webview.
+struct CameraTrack {
+    path: PathBuf,
+    file: Option<File>,
+}
+
 pub struct RecordingService {
     recorder: Arc<dyn ScreenRecordingBackend>,
     audio: Arc<dyn AudioDeviceBackend>,
     exclusion: Arc<dyn WindowCaptureExclusionBackend>,
     active: Mutex<Option<Box<dyn RecordingSession>>>,
+    camera: Mutex<Option<CameraTrack>>,
+    camera_dir: Mutex<Option<PathBuf>>,
     root: PathBuf,
 }
 
@@ -33,6 +43,8 @@ impl RecordingService {
             audio,
             exclusion,
             active: Mutex::new(None),
+            camera: Mutex::new(None),
+            camera_dir: Mutex::new(None),
             root: recordings_root(),
         }
     }
@@ -66,6 +78,9 @@ impl RecordingService {
         let directory = self.root.join(session_stamp());
         let (session, audio_failures) = self.recorder.start(request, &directory)?;
         *active = Some(session);
+        if let Ok(mut camera_dir) = self.camera_dir.lock() {
+            *camera_dir = Some(directory);
+        }
         Ok(audio_failures)
     }
 
@@ -79,7 +94,83 @@ impl RecordingService {
             .lock()?
             .take()
             .ok_or_else(|| SnaphubError::Record("No recording is in progress".into()))?;
-        session.stop()
+        let mut artifacts = session.stop()?;
+        // The camera file handle closes before the path is read, so a
+        // half-flushed track is either a real file or absent.
+        artifacts.camera_path = self.finish_camera_track();
+        if let Ok(mut camera_dir) = self.camera_dir.lock() {
+            *camera_dir = None;
+        }
+        Ok(artifacts)
+    }
+
+    /// Starts the camera sidecar for the recording in flight. Only `"mp4"`
+    /// and `"webm"` are accepted; a second begin for the same session is an
+    /// error.
+    pub fn begin_camera_track(&self, extension: &str) -> Result<(), SnaphubError> {
+        if extension != "mp4" && extension != "webm" {
+            return Err(SnaphubError::Record(format!(
+                "Unsupported camera container: {extension}"
+            )));
+        }
+        if self.lock()?.is_none() {
+            return Err(SnaphubError::Record("No recording is in progress".into()));
+        }
+        let mut camera = self
+            .camera
+            .lock()
+            .map_err(|_| SnaphubError::Record("The camera registry was poisoned".into()))?;
+        if camera.is_some() {
+            return Err(SnaphubError::Record(
+                "A camera track is already started".into(),
+            ));
+        }
+        let directory = self
+            .camera_dir
+            .lock()
+            .map_err(|_| SnaphubError::Record("The camera registry was poisoned".into()))?
+            .clone()
+            .ok_or_else(|| SnaphubError::Record("No recording is in progress".into()))?;
+        let path = directory.join(format!("camera.{extension}"));
+        let file = File::create(&path).map_err(|error| SnaphubError::Record(error.to_string()))?;
+        *camera = Some(CameraTrack {
+            path,
+            file: Some(file),
+        });
+        Ok(())
+    }
+
+    /// Appends one recorder chunk. Without an active track it errors, and the
+    /// frontend ignores it.
+    pub fn append_camera_chunk(&self, bytes: &[u8]) -> Result<(), SnaphubError> {
+        let mut camera = self
+            .camera
+            .lock()
+            .map_err(|_| SnaphubError::Record("The camera registry was poisoned".into()))?;
+        let Some(track) = camera.as_mut() else {
+            return Err(SnaphubError::Record("No camera track is active".into()));
+        };
+        let Some(file) = track.file.as_mut() else {
+            return Err(SnaphubError::Record("No camera track is active".into()));
+        };
+        if let Err(error) = file.write_all(bytes) {
+            track.file.take();
+            return Err(SnaphubError::Record(format!(
+                "Camera chunk failed: {error}"
+            )));
+        }
+        Ok(())
+    }
+
+    /// Drops the file handle and returns the path when it exists and is not
+    /// empty.
+    fn finish_camera_track(&self) -> Option<String> {
+        let track = self.camera.lock().ok()?.take()?;
+        drop(track.file);
+        std::fs::metadata(&track.path)
+            .ok()
+            .filter(|meta| meta.len() > 0)?;
+        Some(track.path.to_string_lossy().into_owned())
     }
 
     /// Pauses or resumes the recording in flight.
@@ -96,6 +187,12 @@ impl RecordingService {
         if let Some(session) = self.lock()?.take() {
             session.cancel();
         }
+        if let Ok(mut camera) = self.camera.lock() {
+            camera.take();
+        }
+        if let Ok(mut camera_dir) = self.camera_dir.lock() {
+            *camera_dir = None;
+        }
         Ok(())
     }
 
diff --git a/apps/desktop/src/components/CameraPreview.test.tsx b/apps/desktop/src/components/CameraPreview.test.tsx
index 8904fe2..e0d886d 100644
--- a/apps/desktop/src/components/CameraPreview.test.tsx
+++ b/apps/desktop/src/components/CameraPreview.test.tsx
@@ -9,15 +9,78 @@ const mocks = {
   settings: vi.fn<() => Promise<void>>(() => Promise.resolve()),
   stream: vi.fn<() => Promise<MediaStream>>(),
   drag: vi.fn<() => Promise<void>>(() => Promise.resolve()),
+  trackBegin: vi.fn<(extension: string) => Promise<void>>(() => Promise.resolve()),
+  chunk: vi.fn<(bytes: Uint8Array) => Promise<void>>(() => Promise.resolve()),
 };
 
+class FakeRecorder {
+  static instances: FakeRecorder[] = [];
+  ondataavailable: ((event: { data: Blob }) => void) | null = null;
+  onstop: (() => void) | null = null;
+  state: "inactive" | "recording" | "paused" = "inactive";
+  constructor(
+    public stream: unknown,
+    public options: unknown,
+  ) {
+    FakeRecorder.instances.push(this);
+  }
+  start(): void {
+    this.state = "recording";
+  }
+  stop(): void {
+    this.state = "inactive";
+    this.onstop?.();
+  }
+  pause(): void {
+    this.state = "paused";
+  }
+  resume(): void {
+    this.state = "recording";
+  }
+  static isTypeSupported(type: string): boolean {
+    return type === "video/mp4;codecs=avc1";
+  }
+}
+
 vi.mock("@tauri-apps/api/window", () => ({
   getCurrentWindow: (): { startDragging: () => Promise<void> } => ({
     startDragging: (): Promise<void> => mocks.drag(),
   }),
 }));
 
+type StartedHandler = () => void;
+type PausedHandler = (event: { payload: { paused: boolean } }) => void;
+
+const cameraEvents = vi.hoisted((): {
+  started: StartedHandler | null;
+  paused: PausedHandler | null;
+  finish: StartedHandler | null;
+} => ({
+  started: null,
+  paused: null,
+  finish: null,
+}));
+
+const emitted: string[] = [];
+
+vi.mock("@tauri-apps/api/event", () => ({
+  // The handler is stored untyped on purpose: the component's own listen
+  // calls carry the real payload types, and the tests below drive them.
+  listen: (event: string, handler: never): Promise<() => void> => {
+    if (event === "snaphub://recording-started") cameraEvents.started = handler;
+    else if (event === "snaphub://recording-paused") cameraEvents.paused = handler;
+    else if (event === "snaphub://camera-track-finish") cameraEvents.finish = handler;
+    return Promise.resolve((): void => undefined);
+  },
+  emit: (event: string): Promise<void> => {
+    emitted.push(event);
+    return Promise.resolve();
+  },
+}));
+
 vi.mock("../lib/recordingTauri", () => ({
+  beginCameraTrack: (extension: string): Promise<void> => mocks.trackBegin(extension),
+  appendCameraChunk: (bytes: Uint8Array): Promise<void> => mocks.chunk(bytes),
   cameraReady: (mode: string): Promise<void> => mocks.ready(mode),
   closeCamera: (): Promise<void> => mocks.close(),
   prepareCameraPermission: (): Promise<void> => mocks.prepare(),
@@ -43,6 +106,12 @@ describe("CameraPreview", () => {
     cleanup();
     vi.clearAllMocks();
     vi.restoreAllMocks();
+    vi.unstubAllGlobals();
+    cameraEvents.started = null;
+    cameraEvents.paused = null;
+    cameraEvents.finish = null;
+    emitted.length = 0;
+    FakeRecorder.instances.length = 0;
   });
 
   it("reveals itself under StrictMode remounting, where the first frame is cancelled", async () => {
@@ -137,6 +206,67 @@ describe("CameraPreview", () => {
     expect(mocks.drag).toHaveBeenCalledTimes(1);
   });
 
+  it("appends chunks in order and emits finished after the last append", async () => {
+    mocks.stream.mockResolvedValue({ getTracks: () => [] } as unknown as MediaStream);
+    vi.stubGlobal("MediaRecorder", FakeRecorder);
+    render(<CameraPreview />);
+    await screen.findByLabelText("Camera preview");
+    await vi.waitFor(() => {
+      expect(mocks.ready).toHaveBeenCalled();
+    });
+    await vi.waitFor(() => {
+      expect(cameraEvents.started).not.toBeNull();
+    });
+
+    cameraEvents.started?.();
+    await vi.waitFor(() => expect(mocks.trackBegin).toHaveBeenCalledWith("mp4"));
+    await vi.waitFor(() => expect(FakeRecorder.instances.length).toBeGreaterThan(0));
+    const recorder = FakeRecorder.instances.at(-1);
+    expect(recorder).not.toBeUndefined();
+
+    let resolveFirst!: () => void;
+    mocks.chunk.mockImplementationOnce(
+      () => new Promise<void>((resolve) => {
+        resolveFirst = resolve;
+      }),
+    );
+    recorder?.ondataavailable?.({ data: new Blob(["one"]) });
+    recorder?.ondataavailable?.({ data: new Blob(["two"]) });
+    recorder?.ondataavailable?.({ data: new Blob(["three"]) });
+    await vi.waitFor(() => expect(mocks.chunk).toHaveBeenCalledTimes(1));
+    resolveFirst();
+    await vi.waitFor(() => expect(mocks.chunk).toHaveBeenCalledTimes(3));
+    const sizes = mocks.chunk.mock.calls.map((call) => call[0].length);
+    expect(sizes).toEqual([3, 3, 5]);
+
+    cameraEvents.finish?.();
+    await vi.waitFor(() => {
+      expect(emitted).toContain("snaphub://camera-track-finished");
+    });
+  });
+
+  it("pauses and resumes the camera recorder with the recording", async () => {
+    mocks.stream.mockResolvedValue({ getTracks: () => [] } as unknown as MediaStream);
+    vi.stubGlobal("MediaRecorder", FakeRecorder);
+    render(<CameraPreview />);
+    await screen.findByLabelText("Camera preview");
+    await vi.waitFor(() => {
+      expect(mocks.ready).toHaveBeenCalled();
+    });
+    await vi.waitFor(() => {
+      expect(cameraEvents.started).not.toBeNull();
+    });
+
+    cameraEvents.started?.();
+    await vi.waitFor(() => expect(FakeRecorder.instances.length).toBeGreaterThan(0));
+    const recorder = FakeRecorder.instances.at(-1);
+
+    cameraEvents.paused?.({ payload: { paused: true } });
+    expect(recorder?.state).toBe("paused");
+    cameraEvents.paused?.({ payload: { paused: false } });
+    expect(recorder?.state).toBe("recording");
+  });
+
   it("retries in place and reveals the live bubble on success", async () => {
     mocks.stream.mockImplementation(failingStream("NotAllowedError"));
     render(<CameraPreview />);
diff --git a/apps/desktop/src/components/CameraPreview.tsx b/apps/desktop/src/components/CameraPreview.tsx
index 0ac0295..3fd058d 100644
--- a/apps/desktop/src/components/CameraPreview.tsx
+++ b/apps/desktop/src/components/CameraPreview.tsx
@@ -1,8 +1,11 @@
 import { useCallback, useEffect, useRef, useState } from "react";
+import { emit, listen } from "@tauri-apps/api/event";
 import { getCurrentWindow } from "@tauri-apps/api/window";
 import { cameraShapes, type CameraShape } from "../domain/videoScene";
 import { Cancel, CircleShape, RoundedSquareShape, SquareShape } from "./icons";
 import {
+  appendCameraChunk,
+  beginCameraTrack,
   cameraReady,
   closeCamera,
   openCameraPrivacySettings,
@@ -72,12 +75,31 @@ function failureFor(error: unknown): CameraFailure {
  * blocked. The dock's Camera button is the user's consent, so access is
  * granted for this webview before asking, and a decline can be retried.
  */
+type CameraMime = { type: string; extension: "mp4" | "webm" };
+
+function pickCameraMime(): CameraMime | null {
+  if (typeof MediaRecorder === "undefined") return null;
+  if (MediaRecorder.isTypeSupported("video/mp4;codecs=avc1")) {
+    return { type: "video/mp4;codecs=avc1", extension: "mp4" };
+  }
+  if (MediaRecorder.isTypeSupported("video/webm;codecs=vp9")) {
+    return { type: "video/webm;codecs=vp9", extension: "webm" };
+  }
+  if (MediaRecorder.isTypeSupported("video/webm")) {
+    return { type: "video/webm", extension: "webm" };
+  }
+  return null;
+}
+
 export function CameraPreview(): React.JSX.Element {
   const [shape, setShape] = useState<CameraShape>("circle");
   const [failure, setFailure] = useState<CameraFailure | null>(null);
   const [retrying, setRetrying] = useState(false);
   const videoRef = useRef<HTMLVideoElement | null>(null);
   const streamRef = useRef<MediaStream | null>(null);
+  const recorderRef = useRef<MediaRecorder | null>(null);
+  const chainRef = useRef<Promise<void>>(Promise.resolve());
+  const appendFailedRef = useRef(false);
 
   const stopStream = useCallback((): void => {
     const stream = streamRef.current;
@@ -123,12 +145,109 @@ export function CameraPreview(): React.JSX.Element {
     return (): void => {
       lifetime.active = false;
       if (lifetime.frame !== undefined) window.cancelAnimationFrame(lifetime.frame);
+      const recorder = recorderRef.current;
+      recorderRef.current = null;
+      if (recorder !== null && recorder.state !== "inactive") {
+        try {
+          recorder.stop();
+        } catch {
+          // Already stopping; the window is going away anyway.
+        }
+      }
       const stream = streamRef.current;
       if (stream !== null) for (const track of stream.getTracks()) track.stop();
       streamRef.current = null;
     };
   }, [startStream]);
 
+  // Camera track: records the preview's stream while a recording runs.
+  useEffect(() => {
+    let stops: (() => void)[] = [];
+    void (async (): Promise<void> => {
+      stops = [
+        await listen("snaphub://recording-started", () => {
+          const stream = streamRef.current;
+          if (stream === null || recorderRef.current !== null) return;
+          const mime = pickCameraMime();
+          if (mime === null) return;
+          void beginCameraTrack(mime.extension)
+            .then(() => {
+              if (streamRef.current !== stream) return;
+              const recorder = new MediaRecorder(stream, {
+                mimeType: mime.type,
+                videoBitsPerSecond: 4_000_000,
+              });
+              recorderRef.current = recorder;
+              appendFailedRef.current = false;
+              recorder.ondataavailable = (event: BlobEvent): void => {
+                if (event.data.size === 0) return;
+                event.data.arrayBuffer().then((buffer) => {
+                  chainRef.current = chainRef.current.then(() =>
+                    appendCameraChunk(new Uint8Array(buffer)).catch(() => {
+                      appendFailedRef.current = true;
+                      const active = recorderRef.current;
+                      recorderRef.current = null;
+                      if (active !== null && active.state !== "inactive") {
+                        try {
+                          active.stop();
+                        } catch {
+                          // Already stopping.
+                        }
+                      }
+                    }),
+                  );
+                }).catch(() => undefined);
+              };
+              recorder.start(1000);
+            })
+            .catch(() => undefined);
+        }),
+        await listen<{ paused: boolean }>("snaphub://recording-paused", (event) => {
+          const recorder = recorderRef.current;
+          if (recorder === null) return;
+          try {
+            if (event.payload.paused && recorder.state === "recording") recorder.pause();
+            else if (!event.payload.paused && recorder.state === "paused") recorder.resume();
+          } catch {
+            // A recorder that cannot pause keeps recording; the track stays usable.
+          }
+        }),
+        await listen("snaphub://camera-track-finish", () => {
+          const recorder = recorderRef.current;
+          if (recorder === null) {
+            void emit("snaphub://camera-track-finished").catch(() => undefined);
+            return;
+          }
+          recorderRef.current = null;
+          const finished = new Promise<void>((resolve) => {
+            const done = (): void => resolve();
+            recorder.ondataavailable = (event: BlobEvent): void => {
+              if (event.data.size === 0) return;
+              event.data.arrayBuffer().then((buffer) => {
+                chainRef.current = chainRef.current.then(() =>
+                  appendCameraChunk(new Uint8Array(buffer)).catch(() => undefined),
+                );
+              }).catch(() => undefined);
+            };
+            recorder.onstop = (): void => done();
+            try {
+              recorder.stop();
+            } catch {
+              done();
+            }
+          });
+          void finished.then(() => chainRef.current).then(() => {
+            void emit("snaphub://camera-track-finished").catch(() => undefined);
+          });
+        }),
+      ];
+    })();
+    return (): void => {
+      for (const stop of stops) stop();
+      stops = [];
+    };
+  }, []);
+
   const retry = useCallback(async (): Promise<void> => {
     setRetrying(true);
     try {
diff --git a/apps/desktop/src/components/RecorderDock.test.tsx b/apps/desktop/src/components/RecorderDock.test.tsx
index 566e829..88630c1 100644
--- a/apps/desktop/src/components/RecorderDock.test.tsx
+++ b/apps/desktop/src/components/RecorderDock.test.tsx
@@ -36,6 +36,7 @@ const artifacts: RecordingArtifacts = {
   cursorPath: "C:/Temp/CapKit/recordings/one/cursor.json",
   systemAudioPath: null,
   microphonePath: null,
+  cameraPath: null,
   width: 2560,
   height: 1440,
   fps: 30,
@@ -62,6 +63,8 @@ const mocks = {
   stop: vi.fn<() => Promise<RecordingArtifacts>>(() => Promise.resolve(artifacts)),
   cancel: vi.fn<() => Promise<void>>(() => Promise.resolve()),
   close: vi.fn<() => Promise<void>>(() => Promise.resolve()),
+  cameraOpen: vi.fn<() => Promise<void>>(() => Promise.resolve()),
+  cameraClose: vi.fn<() => Promise<void>>(() => Promise.resolve()),
   ready: vi.fn<() => Promise<void>>(() => Promise.resolve()),
   fit: vi.fn<(width: number, height: number) => Promise<void>>(() => Promise.resolve()),
   border: vi.fn<(bounds: unknown) => Promise<void>>(() => Promise.resolve()),
@@ -77,8 +80,30 @@ const audioFailedListeners = vi.hoisted(() => ({
   handlers: [] as ((kind: string) => void)[],
 }));
 
-vi.mock("../lib/recordingTauri", () => ({
-  fitRecorder: (width: number, height: number): Promise<void> => mocks.fit(width, height),
+const dockEvents = vi.hoisted((): { finished: (() => void) | null } => ({
+  finished: null,
+}));
+
+const emittedEvents = vi.hoisted(() => ({
+  events: [] as string[],
+}));
+
+vi.mock("@tauri-apps/api/event", () => ({
+  listen: (event: string, handler: never): Promise<() => void> => {
+    if (event === "snaphub://camera-track-finished") dockEvents.finished = handler;
+    return Promise.resolve((): void => undefined);
+  },
+  emit: (event: string): Promise<void> => {
+    emittedEvents.events.push(event);
+    return Promise.resolve();
+  },
+}));
+
+vi.mock("../lib/recordingTauri", async (importOriginal) => {
+  const actual = await importOriginal<typeof import("../lib/recordingTauri")>();
+  return {
+    ...actual,
+    fitRecorder: (width: number, height: number): Promise<void> => mocks.fit(width, height),
   openRecordRegion: (): Promise<void> => mocks.openRegion(),
   listenForRecordRegion: (
     onSelected: (selection: { displayId: string; bounds: { x: number; y: number; width: number; height: number } }) => void,
@@ -101,12 +126,15 @@ vi.mock("../lib/recordingTauri", () => ({
   stopRecording: (): Promise<RecordingArtifacts> => mocks.stop(),
   cancelRecording: (): Promise<void> => mocks.cancel(),
   closeRecorder: (): Promise<void> => mocks.close(),
+  openCamera: (): Promise<void> => mocks.cameraOpen(),
+  closeCamera: (): Promise<void> => mocks.cameraClose(),
   recorderReady: (): Promise<void> => mocks.ready(),
   recordingStatus: (): Promise<null> => Promise.resolve(null),
   showRecordingBorder: (bounds: unknown): Promise<void> => mocks.border(bounds),
   hideRecordingBorder: (): Promise<void> => Promise.resolve(),
   recordingSrc: (path: string): string => path,
-}));
+  };
+});
 
 vi.mock("../lib/tauri", () => ({
   describeInvokeError: (_error: unknown, fallback: string): string => fallback,
@@ -123,6 +151,8 @@ describe("RecorderDock", () => {
     regionListeners.selected = null;
     regionListeners.cancelled = null;
     audioFailedListeners.handlers.length = 0;
+    dockEvents.finished = null;
+    emittedEvents.events.length = 0;
   });
 
   it("reveals itself only after its first frame, so a hidden window never flashes", async () => {
@@ -305,6 +335,40 @@ describe("RecorderDock", () => {
     ).toBeVisible();
   });
 
+  it("flushes the camera track before stopping, then closes", async () => {
+    render(<RecorderDock />);
+    await screen.findByRole("button", { name: "Choose what to record" });
+    fireEvent.change(screen.getByRole("combobox", { name: "Countdown before recording" }), {
+      target: { value: "0" },
+    });
+
+    fireEvent.click(screen.getByRole("button", { name: "Show the camera" }));
+    fireEvent.click(screen.getByRole("button", { name: "Start recording" }));
+    await screen.findByRole("button", { name: "Stop and save this recording" });
+
+    const order: string[] = [];
+    mocks.stop.mockImplementationOnce(() => {
+      order.push("stop");
+      return Promise.resolve(artifacts);
+    });
+    mocks.close.mockImplementationOnce(() => {
+      order.push("close");
+      return Promise.resolve();
+    });
+
+    fireEvent.click(screen.getByRole("button", { name: "Stop and save this recording" }));
+    await waitFor(() => {
+      expect(emittedEvents.events).toContain("snaphub://camera-track-finish");
+    });
+    dockEvents.finished?.();
+    await waitFor(() => {
+      expect(order).toEqual(["stop", "close"]);
+    });
+    const finishIndex = emittedEvents.events.indexOf("snaphub://camera-track-finish");
+    expect(finishIndex).toBeGreaterThanOrEqual(0);
+    expect(mocks.stop).toHaveBeenCalledTimes(1);
+  });
+
   it("re-enables drawing with no error when the overlay is cancelled", async () => {
     render(<RecorderDock />);
     await screen.findByRole("button", { name: "Choose what to record" });
diff --git a/apps/desktop/src/components/RecorderDock.tsx b/apps/desktop/src/components/RecorderDock.tsx
index cc1d16b..8e148fb 100644
--- a/apps/desktop/src/components/RecorderDock.tsx
+++ b/apps/desktop/src/components/RecorderDock.tsx
@@ -23,6 +23,7 @@ import {
   cancelRecording,
   closeCamera,
   closeRecorder,
+  finishCameraTrack,
   hideRecordingBorder,
   listenForAudioFailure,
   listenForRecordRegion,
@@ -381,6 +382,9 @@ export function RecorderDock(): React.JSX.Element {
     setPhase("saving");
     await hideRecordingBorder();
     try {
+      if (camera) {
+        await finishCameraTrack();
+      }
       const artifacts = await stopRecording();
       const raw = window.localStorage.getItem(recordingLibraryStorageKey);
       const parsed = raw === null ? null : recordingLibrarySchema.safeParse(JSON.parse(raw) as unknown);
diff --git a/apps/desktop/src/components/dashboard/RecordView.test.tsx b/apps/desktop/src/components/dashboard/RecordView.test.tsx
index 96eaabc..1f2b258 100644
--- a/apps/desktop/src/components/dashboard/RecordView.test.tsx
+++ b/apps/desktop/src/components/dashboard/RecordView.test.tsx
@@ -11,6 +11,7 @@ const recording: RecordingArtifacts = {
   cursorPath: null,
   systemAudioPath: null,
   microphonePath: null,
+  cameraPath: null,
   width: 1920,
   height: 1080,
   fps: 30,
diff --git a/apps/desktop/src/components/dashboard/RecordingPreview.test.tsx b/apps/desktop/src/components/dashboard/RecordingPreview.test.tsx
index 10179eb..574c206 100644
--- a/apps/desktop/src/components/dashboard/RecordingPreview.test.tsx
+++ b/apps/desktop/src/components/dashboard/RecordingPreview.test.tsx
@@ -11,6 +11,7 @@ const item: RecordingArtifacts = {
   cursorPath: "C:/Temp/CapKit/recordings/one/cursor.json",
   systemAudioPath: null,
   microphonePath: null,
+  cameraPath: null,
   width: 1920,
   height: 1080,
   fps: 30,
diff --git a/apps/desktop/src/components/dashboard/StudioView.test.tsx b/apps/desktop/src/components/dashboard/StudioView.test.tsx
index 3e8c16d..88ed0bb 100644
--- a/apps/desktop/src/components/dashboard/StudioView.test.tsx
+++ b/apps/desktop/src/components/dashboard/StudioView.test.tsx
@@ -11,6 +11,7 @@ const recording: RecordingArtifacts = {
   cursorPath: "C:/Temp/CapKit/recordings/one/cursor.json",
   systemAudioPath: "C:/Temp/CapKit/recordings/one/audio-system.m4a",
   microphonePath: null,
+  cameraPath: null,
   width: 1920,
   height: 1080,
   fps: 30,
@@ -90,6 +91,16 @@ describe("StudioView", () => {
     });
   });
 
+  it("shows the camera empty state and disables its toggle without a track", async () => {
+    render(<StudioView />);
+    await screen.findByRole("img", { name: "Composed preview" });
+
+    fireEvent.click(screen.getByRole("tab", { name: "Show Motion controls" }));
+    fireEvent.click(screen.getByRole("button", { name: "Camera" }));
+    expect(await screen.findByText("This recording has no camera")).toBeVisible();
+    expect(screen.getByRole("switch", { name: "Show camera" })).toBeDisabled();
+  });
+
   it("exposes the stage, motion, and audio panels", async () => {
     render(<StudioView />);
     await screen.findByRole("img", { name: "Composed preview" });
diff --git a/apps/desktop/src/components/dashboard/StudioView.tsx b/apps/desktop/src/components/dashboard/StudioView.tsx
index 0bbc136..15db8e5 100644
--- a/apps/desktop/src/components/dashboard/StudioView.tsx
+++ b/apps/desktop/src/components/dashboard/StudioView.tsx
@@ -9,6 +9,7 @@ import {
 } from "../../domain/recording";
 import { fitRatioBox, stageAspectRatio, type Look, type Size } from "../../domain/showcase";
 import {
+  cameraRect,
   defaultVideoScene,
   storedVideoScenesSchema,
   trimmedDuration,
@@ -67,9 +68,12 @@ export function StudioView({ initialRecording = null }: { initialRecording?: Rec
   const [areaSize, setAreaSize] = useState<Size>({ width: 960, height: 540 });
 
   const videoRef = useRef<HTMLVideoElement | null>(null);
+  const cameraRef = useRef<HTMLVideoElement | null>(null);
   const canvasRef = useRef<HTMLCanvasElement | null>(null);
   const areaRef = useRef<HTMLDivElement | null>(null);
   const frameRef = useRef(0);
+  const cameraDragRef = useRef<{ dx: number; dy: number } | null>(null);
+  const [cameraHover, setCameraHover] = useState(false);
 
   useEffect(() => {
     const entries = readLibrary();
@@ -133,6 +137,8 @@ export function StudioView({ initialRecording = null }: { initialRecording?: Rec
     [track],
   );
 
+  const hasCameraTrack = selected?.cameraPath != null;
+
   // One renderer for preview and export, driven here at animation rate.
   const draw = useCallback(
     (at: number) => {
@@ -152,7 +158,7 @@ export function StudioView({ initialRecording = null }: { initialRecording?: Rec
           media: video,
           mediaSize,
           background: null,
-          camera: null,
+          camera: hasCameraTrack ? cameraRef.current : null,
           cursor: cursorPath.length === 0 ? null : cursorAt(cursorPath, at),
           clickPulse: clickPulseAt(track?.events ?? [], at),
         },
@@ -161,27 +167,43 @@ export function StudioView({ initialRecording = null }: { initialRecording?: Rec
         at,
       );
     },
-    [scene, mediaSize, stageBox, keyframes, cursorPath, track],
+    [scene, mediaSize, stageBox, keyframes, cursorPath, track, hasCameraTrack],
   );
 
   useEffect(() => {
     draw(time);
   }, [draw, time]);
 
+  const syncCamera = useCallback((to: number, play: boolean): void => {
+    const camera = cameraRef.current;
+    if (camera === null) return;
+    if (Math.abs(camera.currentTime - to) > 0.05 || camera.paused === play) {
+      camera.currentTime = to;
+    }
+    if (play) void camera.play().catch(() => undefined);
+    else camera.pause();
+  }, []);
+
   useEffect(() => {
     if (!playing) return;
     const video = videoRef.current;
     if (video === null) return;
+    syncCamera(video.currentTime, true);
     void video.play().catch(() => setPlaying(false));
 
     const tick = (): void => {
       const current = video.currentTime;
       if (current >= scene.trim.end) {
         video.pause();
+        syncCamera(current, false);
         setPlaying(false);
         setTime(scene.trim.end);
         return;
       }
+      const camera = cameraRef.current;
+      if (camera !== null && Math.abs(camera.currentTime - current) > 0.15) {
+        camera.currentTime = current;
+      }
       setTime(current);
       draw(current);
       frameRef.current = window.requestAnimationFrame(tick);
@@ -190,13 +212,15 @@ export function StudioView({ initialRecording = null }: { initialRecording?: Rec
     return (): void => {
       window.cancelAnimationFrame(frameRef.current);
       video.pause();
+      syncCamera(video.currentTime, false);
     };
-  }, [playing, scene.trim.end, draw]);
+  }, [playing, scene.trim.end, draw, syncCamera]);
 
   function seek(next: number): void {
     const video = videoRef.current;
     setTime(next);
     if (video !== null) video.currentTime = next;
+    syncCamera(next, false);
   }
 
   function togglePlay(): void {
@@ -204,6 +228,7 @@ export function StudioView({ initialRecording = null }: { initialRecording?: Rec
     if (video === null) return;
     if (playing) {
       video.pause();
+      syncCamera(video.currentTime, false);
       setPlaying(false);
       return;
     }
@@ -211,6 +236,59 @@ export function StudioView({ initialRecording = null }: { initialRecording?: Rec
     setPlaying(true);
   }
 
+  function stagePoint(event: React.PointerEvent<HTMLCanvasElement>): { x: number; y: number } | null {
+    const canvas = canvasRef.current;
+    if (canvas === null) return null;
+    const rect = canvas.getBoundingClientRect();
+    if (rect.width <= 0 || rect.height <= 0) return null;
+    return {
+      x: ((event.clientX - rect.left) / rect.width) * stageBox.width,
+      y: ((event.clientY - rect.top) / rect.height) * stageBox.height,
+    };
+  }
+
+  function inCameraBubble(point: { x: number; y: number }): { x: number; y: number; width: number; height: number } | null {
+    if (!hasCameraTrack || !scene.camera.show) return null;
+    const bubble = cameraRect(scene.camera, stageBox);
+    if (point.x < bubble.x || point.x > bubble.x + bubble.width) return null;
+    if (point.y < bubble.y || point.y > bubble.y + bubble.height) return null;
+    return bubble;
+  }
+
+  function handlePreviewPointerDown(event: React.PointerEvent<HTMLCanvasElement>): void {
+    if (event.button !== 0) return;
+    const point = stagePoint(event);
+    if (point === null) return;
+    const bubble = inCameraBubble(point);
+    if (bubble === null) return;
+    cameraDragRef.current = { dx: point.x - bubble.x, dy: point.y - bubble.y };
+    event.currentTarget.setPointerCapture(event.pointerId);
+  }
+
+  function handlePreviewPointerMove(event: React.PointerEvent<HTMLCanvasElement>): void {
+    const point = stagePoint(event);
+    if (point === null) return;
+    const drag = cameraDragRef.current;
+    if (drag !== null) {
+      patch({
+        camera: {
+          ...scene.camera,
+          position: {
+            x: (point.x - drag.dx) / stageBox.width,
+            y: (point.y - drag.dy) / stageBox.height,
+          },
+        },
+      });
+      return;
+    }
+    setCameraHover(inCameraBubble(point) !== null);
+  }
+
+  function handlePreviewPointerUp(): void {
+    cameraDragRef.current = null;
+    setCameraHover(false);
+  }
+
   const patch = useCallback((next: Partial<VideoScene>): void => {
     setScene((current) => ({ ...current, ...next }));
   }, []);
@@ -234,7 +312,7 @@ export function StudioView({ initialRecording = null }: { initialRecording?: Rec
     try {
       const blob = await exportVideo({
         video,
-        camera: null,
+        camera: cameraRef.current,
         background: null,
         scene,
         track,
@@ -288,6 +366,17 @@ export function StudioView({ initialRecording = null }: { initialRecording?: Rec
         src={recordingSrc(selected.videoPath)}
         onLoadedMetadata={() => draw(time)}
       />
+      {selected.cameraPath === null ? null : (
+        <video
+          aria-hidden="true"
+          className="hidden"
+          muted
+          playsInline
+          preload="auto"
+          ref={cameraRef}
+          src={recordingSrc(selected.cameraPath)}
+        />
+      )}
 
       <div className="grid min-h-0 flex-1 grid-cols-[minmax(0,1fr)_300px] gap-3">
         <main aria-label="Studio preview" className="flex min-h-0 min-w-0 flex-col overflow-hidden rounded-lg border border-stone-300/80 bg-[#dfe0da] dark:border-white/10 dark:bg-[#191b19]">
@@ -349,6 +438,16 @@ export function StudioView({ initialRecording = null }: { initialRecording?: Rec
               className="max-h-full max-w-full rounded-md shadow-lg"
               ref={canvasRef}
               role="img"
+              style={{
+                cursor: cameraDragRef.current !== null
+                  ? "grabbing"
+                  : cameraHover && hasCameraTrack && scene.camera.show
+                    ? "grab"
+                    : undefined,
+              }}
+              onPointerDown={handlePreviewPointerDown}
+              onPointerMove={handlePreviewPointerMove}
+              onPointerUp={handlePreviewPointerUp}
             />
           </div>
 
@@ -392,6 +491,7 @@ export function StudioView({ initialRecording = null }: { initialRecording?: Rec
             {tab === "motion" ? (
               <MotionPanel
                 clickCount={clickTimes.length}
+                hasCameraTrack={hasCameraTrack}
                 hasCursorTrack={track !== null}
                 scene={scene}
                 onPatchCamera={(next: Partial<CameraLayout>) => patch({ camera: { ...scene.camera, ...next } })}
diff --git a/apps/desktop/src/components/dashboard/showcase/primitives.tsx b/apps/desktop/src/components/dashboard/showcase/primitives.tsx
index 895ffcf..fb55565 100644
--- a/apps/desktop/src/components/dashboard/showcase/primitives.tsx
+++ b/apps/desktop/src/components/dashboard/showcase/primitives.tsx
@@ -161,10 +161,12 @@ export function Toggle({
   label,
   checked,
   onChange,
+  disabled = false,
 }: {
   label: string;
   checked: boolean;
   onChange: (value: boolean) => void;
+  disabled?: boolean;
 }): React.JSX.Element {
   return (
     <label className="flex cursor-pointer items-center justify-between gap-3 py-0.5">
@@ -174,6 +176,7 @@ export function Toggle({
           aria-label={label}
           checked={checked}
           className="peer sr-only"
+          disabled={disabled}
           role="switch"
           type="checkbox"
           onChange={(event) => onChange(event.currentTarget.checked)}
diff --git a/apps/desktop/src/components/dashboard/studio/StudioPanels.tsx b/apps/desktop/src/components/dashboard/studio/StudioPanels.tsx
index b386d09..5862170 100644
--- a/apps/desktop/src/components/dashboard/studio/StudioPanels.tsx
+++ b/apps/desktop/src/components/dashboard/studio/StudioPanels.tsx
@@ -155,6 +155,7 @@ export function StagePanel({ scene, onPatch, onApplyLook }: { scene: VideoScene;
 export function MotionPanel({
   scene,
   hasCursorTrack,
+  hasCameraTrack,
   clickCount,
   onPatchCursor,
   onPatchZoom,
@@ -162,6 +163,7 @@ export function MotionPanel({
 }: {
   scene: VideoScene;
   hasCursorTrack: boolean;
+  hasCameraTrack: boolean;
   clickCount: number;
   onPatchCursor: (patch: Partial<CursorStyle>) => void;
   onPatchZoom: (patch: Partial<ZoomSettings>) => void;
@@ -217,7 +219,12 @@ export function MotionPanel({
       </div>
 
       <CollapsibleSection icon={Video} title="Camera">
-        <Toggle checked={scene.camera.show} label="Show camera" onChange={(value) => onPatchCamera({ show: value })} />
+        {hasCameraTrack ? null : (
+          <p className="mb-2.5 rounded-md border border-dashed border-stone-300 px-2.5 py-2 text-[12px] leading-5 text-stone-500 dark:border-white/12 dark:text-stone-400">
+            This recording has no camera
+          </p>
+        )}
+        <Toggle checked={scene.camera.show} label="Show camera" onChange={(value) => onPatchCamera({ show: value })} disabled={!hasCameraTrack} />
         <div className={scene.camera.show ? "space-y-3.5" : "pointer-events-none space-y-3.5 opacity-40"}>
           <div className="grid grid-cols-3 gap-1.5">
             {cameraShapes.map((shape) => (
@@ -228,7 +235,7 @@ export function MotionPanel({
           </div>
           <div className="grid grid-cols-2 gap-1.5">
             {cameraCorners.map((corner) => (
-              <Chip active={scene.camera.corner === corner} key={corner} label={`Place the camera ${corner.replace("-", " ")}`} onClick={() => onPatchCamera({ corner })}>
+              <Chip active={scene.camera.corner === corner && scene.camera.position === null} key={corner} label={`Place the camera ${corner.replace("-", " ")}`} onClick={() => onPatchCamera({ corner, position: null })}>
                 {corner.replace("-", " ")}
               </Chip>
             ))}
diff --git a/apps/desktop/src/domain/recording.ts b/apps/desktop/src/domain/recording.ts
index d1a8bff..2887add 100644
--- a/apps/desktop/src/domain/recording.ts
+++ b/apps/desktop/src/domain/recording.ts
@@ -48,6 +48,7 @@ export const recordingArtifactsSchema = z.object({
   cursorPath: z.string().nullable(),
   systemAudioPath: z.string().nullable(),
   microphonePath: z.string().nullable(),
+  cameraPath: z.string().nullable().default(null),
   width: z.number(),
   height: z.number(),
   fps: z.number(),
diff --git a/apps/desktop/src/domain/videoScene.test.ts b/apps/desktop/src/domain/videoScene.test.ts
new file mode 100644
index 0000000..1ce661d
--- /dev/null
+++ b/apps/desktop/src/domain/videoScene.test.ts
@@ -0,0 +1,40 @@
+import { describe, expect, it } from "vitest";
+import {
+  cameraLayoutSchema,
+  cameraRect,
+  defaultCameraLayout,
+  type CameraLayout,
+} from "./videoScene";
+
+const stage = { width: 1280, height: 720 };
+
+function layout(next?: Partial<CameraLayout>): CameraLayout {
+  return { ...defaultCameraLayout, ...next };
+}
+
+describe("cameraRect", () => {
+  it("places the bubble at a free position as stage fractions", () => {
+    const rect = cameraRect(layout({ position: { x: 0.5, y: 0.25 } }), stage);
+    expect(rect.x).toBeCloseTo(640);
+    expect(rect.y).toBeCloseTo(180);
+  });
+
+  it("clamps a free position inside the stage", () => {
+    const rect = cameraRect(layout({ position: { x: 2, y: -1 } }), stage);
+    expect(rect.x + rect.width).toBeLessThanOrEqual(stage.width);
+    expect(rect.y).toBeGreaterThanOrEqual(0);
+  });
+
+  it("uses the corner when no free position is set", () => {
+    const rect = cameraRect(layout({ corner: "top-left", position: null }), stage);
+    expect(rect.x).toBe(defaultCameraLayout.margin);
+    expect(rect.y).toBe(defaultCameraLayout.margin);
+  });
+
+  it("parses an old scene without a position", () => {
+    const legacy = JSON.parse(JSON.stringify(defaultCameraLayout)) as Record<string, unknown>;
+    delete legacy.position;
+    const parsed = cameraLayoutSchema.parse(legacy);
+    expect(parsed.position).toBeNull();
+  });
+});
diff --git a/apps/desktop/src/domain/videoScene.ts b/apps/desktop/src/domain/videoScene.ts
index 8d6e532..abcce69 100644
--- a/apps/desktop/src/domain/videoScene.ts
+++ b/apps/desktop/src/domain/videoScene.ts
@@ -53,6 +53,9 @@ export const cameraLayoutSchema = z.object({
   size: z.number(),
   margin: z.number(),
   mirrored: z.boolean(),
+  /** Free bubble position: top-left corner as fractions of the stage (0-1).
+   * Choosing a corner resets it to null. */
+  position: z.object({ x: z.number(), y: z.number() }).nullable().default(null),
 });
 
 export type CameraLayout = z.infer<typeof cameraLayoutSchema>;
@@ -64,6 +67,7 @@ export const defaultCameraLayout: CameraLayout = {
   size: 24,
   margin: 32,
   mirrored: true,
+  position: null,
 };
 
 /* -------------------------------------------------------------------------- */
@@ -173,12 +177,24 @@ export function trimmedDuration(trim: Trim): number {
   return Math.max(0, trim.end - trim.start);
 }
 
-/** Where the camera sits inside the stage, in pixels. */
+/** Where the camera sits inside the stage, in pixels. A free `position` wins;
+ * otherwise the corner is used, as before. */
 export function cameraRect(
   layout: CameraLayout,
   stage: Size,
 ): { x: number; y: number; width: number; height: number } {
   const diameter = (Math.min(stage.width, stage.height) * layout.size) / 100;
+  if (layout.position !== null) {
+    const x = Math.min(
+      Math.max(0, layout.position.x * stage.width),
+      Math.max(0, stage.width - diameter),
+    );
+    const y = Math.min(
+      Math.max(0, layout.position.y * stage.height),
+      Math.max(0, stage.height - diameter),
+    );
+    return { x, y, width: diameter, height: diameter };
+  }
   const margin = layout.margin;
   const right = stage.width - diameter - margin;
   const bottom = stage.height - diameter - margin;
diff --git a/apps/desktop/src/lib/recordingTauri.test.ts b/apps/desktop/src/lib/recordingTauri.test.ts
new file mode 100644
index 0000000..c9d088f
--- /dev/null
+++ b/apps/desktop/src/lib/recordingTauri.test.ts
@@ -0,0 +1,44 @@
+import { afterEach, describe, expect, it, vi } from "vitest";
+import { finishCameraTrack } from "./recordingTauri";
+
+const cameraFinished = vi.hoisted((): { handler: (() => void) | null } => ({
+  handler: null,
+}));
+
+vi.mock("@tauri-apps/api/event", () => ({
+  listen: (event: string, handler: never): Promise<() => void> => {
+    if (event === "snaphub://camera-track-finished") cameraFinished.handler = handler;
+    return Promise.resolve((): void => undefined);
+  },
+  emit: (): Promise<void> => Promise.resolve(),
+}));
+
+describe("finishCameraTrack", () => {
+  afterEach(() => {
+    vi.clearAllMocks();
+    vi.useRealTimers();
+    cameraFinished.handler = null;
+  });
+
+  it("resolves when the finished event arrives", async () => {
+    const finished = finishCameraTrack(3000);
+    await vi.waitFor(() => {
+      expect(cameraFinished.handler).not.toBeNull();
+    });
+    cameraFinished.handler?.();
+    await finished;
+  });
+
+  it("resolves after the timeout when nothing arrives", async () => {
+    vi.useFakeTimers();
+    const finished = finishCameraTrack(3000);
+    await vi.advanceTimersByTimeAsync(2999);
+    let settled = false;
+    void finished.then(() => {
+      settled = true;
+    });
+    await vi.advanceTimersByTimeAsync(1);
+    expect(settled).toBe(true);
+    await finished;
+  });
+});
diff --git a/apps/desktop/src/lib/recordingTauri.ts b/apps/desktop/src/lib/recordingTauri.ts
index 6addee0..f7c1a50 100644
--- a/apps/desktop/src/lib/recordingTauri.ts
+++ b/apps/desktop/src/lib/recordingTauri.ts
@@ -127,6 +127,34 @@ export async function closeRecorder(): Promise<void> {
   await invoke("close_recorder");
 }
 
+export async function beginCameraTrack(extension: string): Promise<void> {
+  await invoke("begin_camera_track", { extension });
+}
+
+export async function appendCameraChunk(bytes: Uint8Array): Promise<void> {
+  await invoke("append_camera_chunk", bytes);
+}
+
+/** Asks the camera window to flush its track, then waits for `finished` or
+ * 3000 ms. A timeout is not an error: the track keeps whatever was flushed.
+ * Subscribing before emitting closes the race between the two. */
+export async function finishCameraTrack(timeoutMs = 3000): Promise<void> {
+  const { emit, listen } = await import("@tauri-apps/api/event");
+  await new Promise<void>((resolve) => {
+    let settled = false;
+    const done = (): void => {
+      if (settled) return;
+      settled = true;
+      window.clearTimeout(timer);
+      resolve();
+    };
+    const timer = window.setTimeout(done, timeoutMs);
+    void listen("snaphub://camera-track-finished", () => done())
+      .then(() => emit("snaphub://camera-track-finish"))
+      .catch(() => undefined);
+  });
+}
+
 export async function openRecordRegion(displayId: string): Promise<void> {
   await invoke("open_record_region", { displayId });
 }
diff --git a/apps/desktop/src/lib/videoExport.test.ts b/apps/desktop/src/lib/videoExport.test.ts
index a748efa..4ea52b0 100644
--- a/apps/desktop/src/lib/videoExport.test.ts
+++ b/apps/desktop/src/lib/videoExport.test.ts
@@ -1,5 +1,5 @@
 import { describe, expect, it } from "vitest";
-import { GifEncoder } from "./videoExport";
+import { GifEncoder, seekAll } from "./videoExport";
 
 /** A plain object shaped like `ImageData`, since jsdom has no real Canvas. */
 function fakeFrame(width: number, height: number, rgb: readonly [number, number, number]): ImageData {
@@ -74,3 +74,47 @@ describe("GifEncoder", () => {
     expect(descriptorFlags).toBe(0x87);
   });
 });
+
+describe("seekAll", () => {
+  /** A video element stand-in: setting currentTime fires seeked at once. */
+  function fakeSeekable(): {
+    currentTime: number;
+    addEventListener: (type: string, listener: () => void) => void;
+    removeEventListener: (type: string, listener: () => void) => void;
+  } {
+    let time = 0;
+    const listeners = new Set<() => void>();
+    return {
+      get currentTime(): number {
+        return time;
+      },
+      set currentTime(next: number) {
+        time = next;
+        for (const listener of [...listeners]) listener();
+      },
+      addEventListener: (_type: string, listener: () => void): void => {
+        listeners.add(listener);
+      },
+      removeEventListener: (_type: string, listener: () => void): void => {
+        listeners.delete(listener);
+      },
+    };
+  }
+
+  it("seeks the camera to the same time as the video", async () => {
+    const video = fakeSeekable();
+    const camera = fakeSeekable();
+    await seekAll(
+      { video: video as unknown as HTMLVideoElement, camera: camera as unknown as HTMLVideoElement },
+      4.25,
+    );
+    expect(video.currentTime).toBe(4.25);
+    expect(camera.currentTime).toBe(4.25);
+  });
+
+  it("skips the camera when there is none", async () => {
+    const video = fakeSeekable();
+    await seekAll({ video: video as unknown as HTMLVideoElement, camera: null }, 1.5);
+    expect(video.currentTime).toBe(1.5);
+  });
+});
diff --git a/apps/desktop/src/lib/videoExport.ts b/apps/desktop/src/lib/videoExport.ts
index fb9cc33..85b11dc 100644
--- a/apps/desktop/src/lib/videoExport.ts
+++ b/apps/desktop/src/lib/videoExport.ts
@@ -77,6 +77,15 @@ function seek(video: HTMLVideoElement, time: number): Promise<void> {
   });
 }
 
+/** Seeks the main video and, when present, the camera to the same time. */
+export async function seekAll(
+  request: Pick<ExportRequest, "video" | "camera">,
+  time: number,
+): Promise<void> {
+  await seek(request.video, time);
+  if (request.camera !== null) await seek(request.camera, time);
+}
+
 /**
  * Renders and encodes the trimmed composition.
  *
@@ -135,7 +144,7 @@ export async function exportVideo(request: ExportRequest): Promise<Blob> {
       throw new DOMException("Export cancelled", "AbortError");
     }
     const time = index / fps;
-    await seek(video, scene.trim.start + time);
+    await seekAll(request, scene.trim.start + time);
     drawOne(context, scene, request, { width, height }, mediaSize, keyframes, cursorPath, events, time);
 
     const frame = new VideoFrame(canvas, { timestamp: Math.round(time * 1e6), duration: Math.round(1e6 / fps) });
@@ -189,7 +198,7 @@ async function exportGif(gif: GifContext): Promise<Blob> {
   for (let index = 0; index < total; index += 1) {
     if (gif.signal?.aborted === true) throw new DOMException("Export cancelled", "AbortError");
     const time = index / gifFps;
-    await seek(gif.video, gif.scene.trim.start + time);
+    await seekAll(gif, gif.scene.trim.start + time);
     drawOne(gif.context, gif.scene, gif, { width: gif.width, height: gif.height }, gif.mediaSize, gif.keyframes, gif.cursorPath, gif.events, time);
     outContext.drawImage(gif.canvas, 0, 0, width, height);
     encoder.addFrame(outContext.getImageData(0, 0, width, height), Math.round(100 / gifFps));

From 8adfa90ba9935e2bd02dc1cdd2f41d022ca8a0f3 Mon Sep 17 00:00:00 2001
From: Nakul Srivastava <imnakul44@gmail.com>
Date: Mon, 28 Sep 2026 16:28:49 +0530
Subject: [PATCH 4/9] feat(recorder): follow the display's native frame rate
 and scale bitrate

High-refresh displays can now record at their native rate (floored at
60 fps, capped by what H.264 level 5.2 allows at the capture size),
and the encoder bitrate scales with the frame rate up to 80 Mbps.
Settings saved before Native existed still parse.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 apps/desktop/src-tauri/src/domain.rs          |  3 ++
 .../src/platform/windows_recorder/encoder.rs  | 43 ++++++++++++++--
 .../src/platform/windows_recorder/mod.rs      | 15 +++++-
 .../src/components/RecorderDock.test.tsx      | 51 +++++++++++++------
 apps/desktop/src/components/RecorderDock.tsx  | 14 ++++-
 apps/desktop/src/domain/recording.test.ts     | 21 ++++++++
 apps/desktop/src/domain/recording.ts          | 14 +++--
 7 files changed, 136 insertions(+), 25 deletions(-)

diff --git a/apps/desktop/src-tauri/src/domain.rs b/apps/desktop/src-tauri/src/domain.rs
index dafc5d7..612308a 100644
--- a/apps/desktop/src-tauri/src/domain.rs
+++ b/apps/desktop/src-tauri/src/domain.rs
@@ -270,6 +270,9 @@ pub struct RecordingSourceDto {
     pub display_id: String,
     pub scale_factor: f64,
     pub is_primary: bool,
+    /// Monitor refresh rate in Hz, rounded. Windows report their owning
+    /// display's rate.
+    pub refresh_rate: u32,
     /// A one-off downscaled preview, so the picker never asks the user to
     /// choose a source blind. Absent when the capture failed for that source
     /// (e.g. a protected window); the source is still selectable.
diff --git a/apps/desktop/src-tauri/src/platform/windows_recorder/encoder.rs b/apps/desktop/src-tauri/src/platform/windows_recorder/encoder.rs
index a27b9f9..e330561 100644
--- a/apps/desktop/src-tauri/src/platform/windows_recorder/encoder.rs
+++ b/apps/desktop/src-tauri/src/platform/windows_recorder/encoder.rs
@@ -23,14 +23,24 @@ const HNS_PER_SECOND: i64 = 10_000_000;
 /// Screen recordings are mostly flat colour and text, so they compress far
 /// better than camera footage; these are deliberately generous rather than
 /// tuned, since a soft screenshot is the one artefact users notice immediately.
-fn target_bitrate(width: u32, height: u32) -> u32 {
+/// Scales the base bitrate with the frame rate, capped at 80 Mbps, so high
+/// refresh recordings stay sharp without unbounded files.
+fn target_bitrate_for_fps(width: u32, height: u32, fps: u32) -> u32 {
     let pixels = u64::from(width) * u64::from(height);
-    match pixels {
+    let base = match pixels {
         p if p <= 1_280 * 720 => 8_000_000,
         p if p <= 1_920 * 1_080 => 12_000_000,
         p if p <= 2_560 * 1_440 => 24_000_000,
         _ => 40_000_000,
-    }
+    };
+    let scale = f64::from(fps).max(60.0) / 60.0;
+    ((base as f64 * scale).round() as u64).clamp(1, 80_000_000) as u32
+}
+
+/// Highest frame rate the H.264 level 5.2 macroblock rate allows.
+pub(crate) fn max_fps_for(width: u32, height: u32) -> u32 {
+    let blocks = width.div_ceil(16) as u64 * height.div_ceil(16) as u64;
+    (2_073_600 / blocks.max(1)) as u32
 }
 
 fn pack_u64(high: u32, low: u32) -> u64 {
@@ -117,7 +127,7 @@ impl VideoEncoder {
             width,
             height,
             fps,
-            Some(target_bitrate(width, height)),
+            Some(target_bitrate_for_fps(width, height, fps)),
         )?;
         // SAFETY: `output` is a fully configured media type.
         let stream = unsafe { writer.AddStream(&output) }.map_err(SnaphubError::encode)?;
@@ -230,3 +240,28 @@ impl VideoEncoder {
         unsafe { self.writer.Finalize() }.map_err(SnaphubError::encode)
     }
 }
+
+#[cfg(test)]
+mod bitrate_tests {
+    use super::{max_fps_for, target_bitrate_for_fps};
+
+    #[test]
+    fn max_fps_follows_the_level_52_macroblock_rate() {
+        assert_eq!(max_fps_for(1920, 1080), 254);
+        assert_eq!(max_fps_for(2560, 1440), 144);
+        assert_eq!(max_fps_for(3840, 2160), 64);
+    }
+
+    #[test]
+    fn bitrate_holds_at_60_and_scales_above() {
+        assert_eq!(target_bitrate_for_fps(1920, 1080, 30), 12_000_000);
+        assert_eq!(target_bitrate_for_fps(1920, 1080, 60), 12_000_000);
+        assert_eq!(target_bitrate_for_fps(1920, 1080, 120), 24_000_000);
+        assert_eq!(target_bitrate_for_fps(1920, 1080, 144), 28_800_000);
+    }
+
+    #[test]
+    fn bitrate_caps_at_80_mbps() {
+        assert_eq!(target_bitrate_for_fps(3840, 2160, 240), 80_000_000);
+    }
+}
diff --git a/apps/desktop/src-tauri/src/platform/windows_recorder/mod.rs b/apps/desktop/src-tauri/src/platform/windows_recorder/mod.rs
index bd3cc5b..09e9fe1 100644
--- a/apps/desktop/src-tauri/src/platform/windows_recorder/mod.rs
+++ b/apps/desktop/src-tauri/src/platform/windows_recorder/mod.rs
@@ -230,6 +230,11 @@ impl ScreenRecordingBackend for WindowsRecorderBackend {
                 display_id,
                 scale_factor: f64::from(monitor.scale_factor().unwrap_or(1.0)),
                 is_primary: monitor.is_primary().unwrap_or(false),
+                refresh_rate: monitor
+                    .frequency()
+                    .ok()
+                    .map(|hertz| hertz.round() as u32)
+                    .unwrap_or(60),
                 thumbnail_path,
             });
         }
@@ -281,6 +286,11 @@ impl ScreenRecordingBackend for WindowsRecorderBackend {
                 display_id,
                 scale_factor: f64::from(monitor.scale_factor().unwrap_or(1.0)),
                 is_primary: false,
+                refresh_rate: monitor
+                    .frequency()
+                    .ok()
+                    .map(|hertz| hertz.round() as u32)
+                    .unwrap_or(60),
                 thumbnail_path,
             });
         }
@@ -361,13 +371,16 @@ impl WindowsRecordingSession {
             )
         });
 
-        let fps = request.fps.clamp(10, 120);
+        let fps = request.fps.clamp(10, 240);
         let id = uuid::Uuid::new_v4().to_string();
         let video_path = directory.join("video.mp4");
 
         let stream = CaptureStream::start(monitor, region, request.capture_cursor)?;
         let width = stream.width;
         let height = stream.height;
+        // High refresh rates can exceed what H.264 level 5.2 allows at this
+        // size, so the recording uses the highest allowed rate instead.
+        let fps = fps.min(encoder::max_fps_for(width, height));
         // The request region is in desktop coordinates; the area is computed
         // from its display-local form, matching the frame pool above.
         let local = request.region.map(|region| Rect {
diff --git a/apps/desktop/src/components/RecorderDock.test.tsx b/apps/desktop/src/components/RecorderDock.test.tsx
index 88630c1..af069d6 100644
--- a/apps/desktop/src/components/RecorderDock.test.tsx
+++ b/apps/desktop/src/components/RecorderDock.test.tsx
@@ -11,6 +11,7 @@ const display: RecordingSource = {
   displayId: "1",
   scaleFactor: 1,
   isPrimary: true,
+  refreshRate: 144,
   thumbnailPath: null,
 };
 
@@ -19,6 +20,7 @@ const secondDisplay: RecordingSource = {
   id: "display:2",
   title: "Side monitor",
   isPrimary: false,
+  refreshRate: 60,
 };
 
 const editorWindow: RecordingSource = {
@@ -320,21 +322,6 @@ describe("RecorderDock", () => {
     ).toBeVisible();
   });
 
-  it("warns when a requested audio track cannot be opened", async () => {
-    render(<RecorderDock />);
-    await screen.findByRole("button", { name: "Choose what to record" });
-
-    audioFailedListeners.handlers.forEach((handler) => handler("microphone"));
-    expect(
-      await screen.findByText("The microphone could not be recorded. The video is still recording."),
-    ).toBeVisible();
-
-    audioFailedListeners.handlers.forEach((handler) => handler("system"));
-    expect(
-      await screen.findByText("System audio could not be recorded. The video is still recording."),
-    ).toBeVisible();
-  });
-
   it("flushes the camera track before stopping, then closes", async () => {
     render(<RecorderDock />);
     await screen.findByRole("button", { name: "Choose what to record" });
@@ -369,6 +356,40 @@ describe("RecorderDock", () => {
     expect(mocks.stop).toHaveBeenCalledTimes(1);
   });
 
+  it("offers Native on a fast display and hides it on a 60 Hz one", async () => {
+    render(<RecorderDock />);
+    await screen.findByRole("button", { name: "Choose what to record" });
+
+    const quality = screen.getByRole("combobox", { name: "Frame rate" });
+    expect(quality.textContent).toContain("Native (144 fps)");
+
+    fireEvent.click(screen.getByRole("button", { name: "Choose what to record" }));
+    fireEvent.click(screen.getByRole("option", { name: "Record Side monitor" }));
+    await waitFor(() => {
+      expect(screen.getByRole("button", { name: "Choose what to record" })).toHaveTextContent(
+        "Side monitor",
+      );
+    });
+    expect(screen.getByRole("combobox", { name: "Frame rate" }).textContent).not.toContain(
+      "Native",
+    );
+  });
+
+  it("warns when a requested audio track cannot be opened", async () => {
+    render(<RecorderDock />);
+    await screen.findByRole("button", { name: "Choose what to record" });
+
+    audioFailedListeners.handlers.forEach((handler) => handler("microphone"));
+    expect(
+      await screen.findByText("The microphone could not be recorded. The video is still recording."),
+    ).toBeVisible();
+
+    audioFailedListeners.handlers.forEach((handler) => handler("system"));
+    expect(
+      await screen.findByText("System audio could not be recorded. The video is still recording."),
+    ).toBeVisible();
+  });
+
   it("re-enables drawing with no error when the overlay is cancelled", async () => {
     render(<RecorderDock />);
     await screen.findByRole("button", { name: "Choose what to record" });
diff --git a/apps/desktop/src/components/RecorderDock.tsx b/apps/desktop/src/components/RecorderDock.tsx
index 8e148fb..209b573 100644
--- a/apps/desktop/src/components/RecorderDock.tsx
+++ b/apps/desktop/src/components/RecorderDock.tsx
@@ -240,6 +240,7 @@ export function RecorderDock(): React.JSX.Element {
   // silently stay active once its mode is no longer the one shown.
   const active =
     visibleSources.find((source) => source.id === settings.sourceId) ?? visibleSources.at(0) ?? null;
+  const nativeFps = Math.round(active?.refreshRate ?? 60);
 
   // Closes the source picker on a pointer down outside the dock card. The
   // picker lives inside the card now, so the card is the boundary.
@@ -671,12 +672,21 @@ export function RecorderDock(): React.JSX.Element {
                 <select
                   aria-label="Frame rate"
                   className={selectClass}
-                  value={String(settings.fps)}
-                  onChange={(event) => patch({ fps: Number(event.currentTarget.value) as FrameRate })}
+                  value={settings.fps === "native" ? "native" : String(settings.fps)}
+                  onChange={(event) =>
+                    patch(
+                      event.currentTarget.value === "native"
+                        ? { fps: "native" }
+                        : { fps: Number(event.currentTarget.value) as Exclude<FrameRate, "native"> },
+                    )
+                  }
                 >
                   {frameRates.map((rate) => (
                     <option key={rate} value={String(rate)}>{`${String(rate)} fps`}</option>
                   ))}
+                  {nativeFps > 60 ? (
+                    <option value="native">{`Native (${String(nativeFps)} fps)`}</option>
+                  ) : null}
                 </select>
               </label>
 
diff --git a/apps/desktop/src/domain/recording.test.ts b/apps/desktop/src/domain/recording.test.ts
index 5fd0ae6..8a60ba1 100644
--- a/apps/desktop/src/domain/recording.test.ts
+++ b/apps/desktop/src/domain/recording.test.ts
@@ -17,6 +17,7 @@ const display: RecordingSource = {
   displayId: "1",
   scaleFactor: 1,
   isPrimary: true,
+  refreshRate: 144,
   thumbnailPath: null,
 };
 
@@ -95,6 +96,26 @@ describe("requests", () => {
     ).toBe("speakers-2");
   });
 
+  it("resolves native to the display rate, floored at 60", () => {
+    expect(
+      toRecordingRequest({ ...defaultRecorderSettings, fps: "native" }, display, null).fps,
+    ).toBe(144);
+    expect(
+      toRecordingRequest(
+        { ...defaultRecorderSettings, fps: "native" },
+        { ...display, refreshRate: 50 },
+        null,
+      ).fps,
+    ).toBe(60);
+    expect(toRecordingRequest(defaultRecorderSettings, display, null).fps).toBe(30);
+  });
+
+  it("parses settings saved before native existed", () => {
+    const legacy = JSON.parse(JSON.stringify(defaultRecorderSettings)) as Record<string, unknown>;
+    const parsed = readRecorderSettings(JSON.stringify(legacy));
+    expect(parsed.fps).toBe(30);
+  });
+
   it("leaves the hardware cursor out of the frames by default", () => {
     // The cursor is recorded as its own track precisely so the editor can
     // smooth it; burning it in would make that impossible.
diff --git a/apps/desktop/src/domain/recording.ts b/apps/desktop/src/domain/recording.ts
index 2887add..39ab830 100644
--- a/apps/desktop/src/domain/recording.ts
+++ b/apps/desktop/src/domain/recording.ts
@@ -16,6 +16,7 @@ export const recordingSourceSchema = z.object({
   displayId: z.string(),
   scaleFactor: z.number(),
   isPrimary: z.boolean(),
+  refreshRate: z.number().default(60),
   /** A one-off downscaled preview; absent when that source could not be captured. */
   thumbnailPath: z.string().nullable(),
 });
@@ -72,7 +73,7 @@ export const captureModeSchema = z.enum(["display", "window", "region"]);
 export type CaptureMode = z.infer<typeof captureModeSchema>;
 
 export const frameRates = [24, 30, 60] as const;
-export type FrameRate = (typeof frameRates)[number];
+export type FrameRate = (typeof frameRates)[number] | "native";
 
 export const countdownSeconds = [0, 3, 5, 10] as const;
 export type CountdownSeconds = (typeof countdownSeconds)[number];
@@ -80,7 +81,7 @@ export type CountdownSeconds = (typeof countdownSeconds)[number];
 export const recorderSettingsSchema = z.object({
   mode: captureModeSchema,
   sourceId: z.string(),
-  fps: z.union([z.literal(24), z.literal(30), z.literal(60)]),
+  fps: z.union([z.literal(24), z.literal(30), z.literal(60), z.literal("native")]),
   countdown: z.union([z.literal(0), z.literal(3), z.literal(5), z.literal(10)]),
   systemAudio: z.boolean(),
   microphone: z.boolean(),
@@ -157,6 +158,13 @@ export function repeatRatio(stats: RecordingStats): number {
   return total <= 0 ? 0 : stats.droppedFrames / total;
 }
 
+/** Resolves a frame-rate setting against a display: "native" follows the
+ * monitor's refresh rate, floored at 60. */
+export function resolveFrameRate(fps: FrameRate, refreshRate: number): number {
+  if (fps !== "native") return fps;
+  return Math.max(60, Math.round(refreshRate));
+}
+
 /** Turns a chosen source and mode into the payload the backend expects. */
 export function toRecordingRequest(
   settings: RecorderSettings,
@@ -178,7 +186,7 @@ export function toRecordingRequest(
   return {
     displayId: source.displayId,
     region: crop,
-    fps: settings.fps,
+    fps: resolveFrameRate(settings.fps, source.refreshRate),
     captureCursor: settings.captureCursor,
     systemAudio: settings.systemAudio,
     microphone: settings.microphone,

From 8e22f99d52938ccd176dfcd7257397954d54fb37 Mon Sep 17 00:00:00 2001
From: Nakul Srivastava <imnakul44@gmail.com>
Date: Mon, 28 Sep 2026 16:39:02 +0530
Subject: [PATCH 5/9] feat(recorder): fit the dock in one row and keep a
 dragged position

The setup phase is a single row: grip, icon-only modes, source
trigger, region redraw, split audio buttons with device menus, camera
toggle, an options popover for quality and countdown, then close and
record. One popover opens at a time; Escape and outside clicks close it
and return focus. A dragged dock keeps its bottom-centre point on later
fits instead of snapping back.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 apps/desktop/src-tauri/src/lib.rs             | 111 +++-
 .../src/components/RecorderDock.test.tsx      | 180 +++++-
 apps/desktop/src/components/RecorderDock.tsx  | 522 ++++++++++++------
 apps/desktop/src/lib/recordingTauri.ts        |  14 +-
 4 files changed, 621 insertions(+), 206 deletions(-)

diff --git a/apps/desktop/src-tauri/src/lib.rs b/apps/desktop/src-tauri/src/lib.rs
index c75afe2..352041b 100644
--- a/apps/desktop/src-tauri/src/lib.rs
+++ b/apps/desktop/src-tauri/src/lib.rs
@@ -1968,6 +1968,46 @@ fn dock_frame(
     }
 }
 
+/// Computes the recorder frame after the user has dragged it.
+///
+/// The window's current bottom-centre point stays fixed and the frame grows
+/// upward around the new content size, so opening a menu never pushes a
+/// dragged dock back to the default spot. The result is clamped inside the
+/// work area. `current` is the physical outer frame; the content size is
+/// logical.
+fn dock_frame_keep_position(
+    work_area: Rect,
+    current: Rect,
+    scale: f64,
+    content_width: f64,
+    content_height: f64,
+) -> Rect {
+    let width = (content_width * scale)
+        .round()
+        .min(work_area.width)
+        .max(1.0);
+    let height = (content_height * scale)
+        .round()
+        .min(work_area.height)
+        .max(1.0);
+    let bottom_centre_x = current.x + current.width / 2.0;
+    let bottom = current.y + current.height;
+    let x = (bottom_centre_x - width / 2.0).clamp(
+        work_area.x,
+        (work_area.x + work_area.width - width).max(work_area.x),
+    );
+    let y = (bottom - height).clamp(
+        work_area.y,
+        (work_area.y + work_area.height - height).max(work_area.y),
+    );
+    Rect {
+        x,
+        y,
+        width,
+        height,
+    }
+}
+
 /// Computes the camera window's physical frame.
 ///
 /// `live` is the 260 logical px bottom-left bubble, 24 px from the work area's
@@ -2024,7 +2064,12 @@ fn window_work_area(app: &AppHandle, window: &WebviewWindow) -> Option<(Rect, f6
 /// A sync command is safe here: it builds no window, and `set_size` and
 /// `set_position` do not deadlock.
 #[tauri::command]
-fn fit_recorder(app: AppHandle, width: f64, height: f64) -> Result<(), SnaphubError> {
+fn fit_recorder(
+    app: AppHandle,
+    width: f64,
+    height: f64,
+    keep_position: bool,
+) -> Result<(), SnaphubError> {
     if !width.is_finite() || !height.is_finite() || width <= 0.0 || height <= 0.0 {
         return Err(SnaphubError::Window(
             "Recorder size must be finite and positive".into(),
@@ -2037,7 +2082,26 @@ fn fit_recorder(app: AppHandle, width: f64, height: f64) -> Result<(), SnaphubEr
     };
     let (work_area, scale) = window_work_area(&app, &window)
         .ok_or_else(|| SnaphubError::Window("No display available for the recorder".into()))?;
-    let frame = dock_frame(work_area, scale, width, height, 24.0);
+    // A dragged dock keeps its bottom-centre point and grows upward; a window
+    // that cannot report its frame falls back to the default placement.
+    let frame = if keep_position {
+        let current = window
+            .outer_position()
+            .ok()
+            .zip(window.outer_size().ok())
+            .map(|(position, size)| Rect {
+                x: f64::from(position.x),
+                y: f64::from(position.y),
+                width: f64::from(size.width),
+                height: f64::from(size.height),
+            });
+        current.map_or_else(
+            || dock_frame(work_area, scale, width, height, 24.0),
+            |current| dock_frame_keep_position(work_area, current, scale, width, height),
+        )
+    } else {
+        dock_frame(work_area, scale, width, height, 24.0)
+    };
     window
         .set_position(PhysicalPosition::new(
             frame.x.round() as i32,
@@ -2571,6 +2635,49 @@ mod recorder_layout_tests {
         assert_eq!(frame.y, 0.0);
     }
 
+    #[test]
+    fn keep_position_holds_the_bottom_centre_and_grows_upward() {
+        // The dock was dragged left of centre; opening a taller menu keeps
+        // the bottom-centre point and extends the top.
+        let current = work_area(300.0, 800.0, 724.0, 140.0);
+        let frame = dock_frame_keep_position(
+            work_area(0.0, 0.0, 1920.0, 1040.0),
+            current,
+            1.0,
+            724.0,
+            300.0,
+        );
+        assert_eq!(frame.x, 300.0);
+        assert_eq!(frame.width, 724.0);
+        assert_eq!(frame.height, 300.0);
+        assert_eq!(frame.y, 800.0 + 140.0 - 300.0);
+    }
+
+    #[test]
+    fn keep_position_clamps_inside_the_work_area() {
+        // Dragged into the bottom-right corner, then grown past both edges.
+        let current = work_area(1800.0, 900.0, 724.0, 140.0);
+        let frame = dock_frame_keep_position(
+            work_area(0.0, 0.0, 1920.0, 1040.0),
+            current,
+            1.0,
+            900.0,
+            300.0,
+        );
+        assert_eq!(frame.x, 1920.0 - 900.0);
+        assert_eq!(frame.y, 900.0 + 140.0 - 300.0);
+        // Content taller than the work area fills it from the top.
+        let frame = dock_frame_keep_position(
+            work_area(0.0, 0.0, 1920.0, 400.0),
+            current,
+            1.0,
+            724.0,
+            900.0,
+        );
+        assert_eq!(frame.height, 400.0);
+        assert_eq!(frame.y, 0.0);
+    }
+
     #[test]
     fn logical_box_scales_to_physical_px() {
         let area = logical_box_to_desktop(
diff --git a/apps/desktop/src/components/RecorderDock.test.tsx b/apps/desktop/src/components/RecorderDock.test.tsx
index af069d6..f4289c5 100644
--- a/apps/desktop/src/components/RecorderDock.test.tsx
+++ b/apps/desktop/src/components/RecorderDock.test.tsx
@@ -1,4 +1,4 @@
-import { cleanup, fireEvent, render, screen, waitFor } from "@testing-library/react";
+import { cleanup, fireEvent, render, screen, waitFor, within } from "@testing-library/react";
 import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
 import type { RecordingArtifacts, RecordingSource } from "../domain/recording";
 import { RecorderDock } from "./RecorderDock";
@@ -68,7 +68,10 @@ const mocks = {
   cameraOpen: vi.fn<() => Promise<void>>(() => Promise.resolve()),
   cameraClose: vi.fn<() => Promise<void>>(() => Promise.resolve()),
   ready: vi.fn<() => Promise<void>>(() => Promise.resolve()),
-  fit: vi.fn<(width: number, height: number) => Promise<void>>(() => Promise.resolve()),
+  fit: vi.fn<(width: number, height: number, keepPosition: boolean) => Promise<void>>(
+    () => Promise.resolve(),
+  ),
+  drag: vi.fn<() => Promise<void>>(() => Promise.resolve()),
   border: vi.fn<(bounds: unknown) => Promise<void>>(() => Promise.resolve()),
   openRegion: vi.fn<() => Promise<void>>(() => Promise.resolve()),
 };
@@ -105,7 +108,8 @@ vi.mock("../lib/recordingTauri", async (importOriginal) => {
   const actual = await importOriginal<typeof import("../lib/recordingTauri")>();
   return {
     ...actual,
-    fitRecorder: (width: number, height: number): Promise<void> => mocks.fit(width, height),
+    fitRecorder: (width: number, height: number, keepPosition: boolean): Promise<void> =>
+    mocks.fit(width, height, keepPosition),
   openRecordRegion: (): Promise<void> => mocks.openRegion(),
   listenForRecordRegion: (
     onSelected: (selection: { displayId: string; bounds: { x: number; y: number; width: number; height: number } }) => void,
@@ -142,6 +146,17 @@ vi.mock("../lib/tauri", () => ({
   describeInvokeError: (_error: unknown, fallback: string): string => fallback,
 }));
 
+vi.mock("@tauri-apps/api/window", () => ({
+  getCurrentWindow: (): { startDragging: () => Promise<void> } => ({
+    startDragging: (): Promise<void> => mocks.drag(),
+  }),
+}));
+
+async function openOptions(): Promise<void> {
+  fireEvent.click(await screen.findByRole("button", { name: "Recording options" }));
+  await screen.findByRole("combobox", { name: "Frame rate" });
+}
+
 describe("RecorderDock", () => {
   beforeEach(() => {
     window.localStorage.clear();
@@ -190,7 +205,7 @@ describe("RecorderDock", () => {
       await waitFor(() => {
         expect(mocks.ready).toHaveBeenCalled();
       });
-      expect(mocks.fit).toHaveBeenCalledWith(724, 140);
+      expect(mocks.fit).toHaveBeenCalledWith(724, 140, false);
       const fitOrder = mocks.fit.mock.invocationCallOrder[0] ?? Number.POSITIVE_INFINITY;
       const readyOrder = mocks.ready.mock.invocationCallOrder[0] ?? Number.NEGATIVE_INFINITY;
       expect(fitOrder).toBeLessThan(readyOrder);
@@ -247,6 +262,7 @@ describe("RecorderDock", () => {
     render(<RecorderDock />);
     await screen.findByRole("button", { name: "Choose what to record" });
     fireEvent.click(screen.getByRole("button", { name: "Record a region" }));
+    await openOptions();
     fireEvent.change(screen.getByRole("combobox", { name: "Countdown before recording" }), {
       target: { value: "0" },
     });
@@ -259,7 +275,7 @@ describe("RecorderDock", () => {
 
     regionListeners.selected?.({ displayId: "1", bounds: { x: 10, y: 20, width: 640, height: 360 } });
     const redraw = await screen.findByRole("button", { name: "Redraw area to record" });
-    expect(redraw).toHaveTextContent("640 × 360 · Redraw");
+    expect(redraw).toHaveAttribute("title", "640 × 360 · Redraw");
     expect(screen.getByRole("button", { name: "Start recording" })).not.toBeDisabled();
 
     fireEvent.click(screen.getByRole("button", { name: "Start recording" }));
@@ -273,24 +289,34 @@ describe("RecorderDock", () => {
     );
   });
 
-  it("lists both device kinds with defaults and disables selects with their toggles", async () => {
+  it("lists both device kinds with defaults in their menus and remembers the pick", async () => {
     render(<RecorderDock />);
     await screen.findByRole("button", { name: "Choose what to record" });
 
-    const microphone = screen.getByRole("combobox", { name: "Microphone device" });
-    const speaker = screen.getByRole("combobox", { name: "Speaker device" });
-    expect(microphone).toBeDisabled();
-    expect(speaker).not.toBeDisabled();
-    for (const [select, names] of [
-      [microphone, ["Default (Headset)", "Headset", "USB Mic"]],
-      [speaker, ["Default (Speakers)", "Speakers", "Headphones"]],
-    ] as const) {
-      const options = Array.from(select.querySelectorAll("option")).map((option) => option.textContent);
-      expect(options).toEqual(names);
-    }
+    fireEvent.click(screen.getByRole("button", { name: "Choose microphone" }));
+    const micMenu = await screen.findByRole("listbox", { name: "Microphone device" });
+    expect(
+      within(micMenu).getByRole("option", { name: "Use the default device" }),
+    ).toHaveTextContent("Default (Headset)");
+    expect(
+      within(micMenu).getByRole("option", { name: "Use the default device" }),
+    ).toHaveAttribute("aria-selected", "true");
+    fireEvent.click(within(micMenu).getByRole("option", { name: "Use USB Mic" }));
+    await waitFor(() => {
+      expect(
+        screen.queryByRole("listbox", { name: "Microphone device" }),
+      ).not.toBeInTheDocument();
+    });
+    expect(window.localStorage.getItem("capkit.recorder.settings.v1")).toContain(
+      '"microphoneDeviceId":"mic-2"',
+    );
 
-    fireEvent.click(screen.getByRole("button", { name: "Record the microphone" }));
-    expect(screen.getByRole("combobox", { name: "Microphone device" })).not.toBeDisabled();
+    fireEvent.click(screen.getByRole("button", { name: "Choose speaker" }));
+    const speakerMenu = await screen.findByRole("listbox", { name: "Speaker device" });
+    const names = within(speakerMenu)
+      .getAllByRole("option")
+      .map((option) => option.textContent);
+    expect(names).toEqual(["Default (Speakers)", "Speakers", "Headphones"]);
   });
 
   it("resets a missing device on refocus and shows the fallback message", async () => {
@@ -310,21 +336,32 @@ describe("RecorderDock", () => {
     );
     render(<RecorderDock />);
     await screen.findByRole("button", { name: "Choose what to record" });
-    expect(screen.getByRole("combobox", { name: "Microphone device" })).toHaveValue("mic-1");
+    fireEvent.click(screen.getByRole("button", { name: "Choose microphone" }));
+    const micMenu = await screen.findByRole("listbox", { name: "Microphone device" });
+    expect(within(micMenu).getByRole("option", { name: "Use Headset" })).toHaveAttribute(
+      "aria-selected",
+      "true",
+    );
+    fireEvent.keyDown(screen.getByRole("toolbar", { name: "Recorder" }), { key: "Escape" });
 
     mocks.devices.mockResolvedValueOnce(audioDeviceList.filter((device) => device.id !== "mic-1"));
     fireEvent(window, new Event("focus"));
     await waitFor(() => {
-      expect(screen.getByRole("combobox", { name: "Microphone device" })).toHaveValue("");
+      expect(
+        screen.getByText("Your chosen microphone is not connected, so the default will be used."),
+      ).toBeVisible();
     });
+    fireEvent.click(screen.getByRole("button", { name: "Choose microphone" }));
+    const fallbackMenu = await screen.findByRole("listbox", { name: "Microphone device" });
     expect(
-      screen.getByText("Your chosen microphone is not connected, so the default will be used."),
-    ).toBeVisible();
+      within(fallbackMenu).getByRole("option", { name: "Use the default device" }),
+    ).toHaveAttribute("aria-selected", "true");
   });
 
   it("flushes the camera track before stopping, then closes", async () => {
     render(<RecorderDock />);
     await screen.findByRole("button", { name: "Choose what to record" });
+    await openOptions();
     fireEvent.change(screen.getByRole("combobox", { name: "Countdown before recording" }), {
       target: { value: "0" },
     });
@@ -360,8 +397,10 @@ describe("RecorderDock", () => {
     render(<RecorderDock />);
     await screen.findByRole("button", { name: "Choose what to record" });
 
-    const quality = screen.getByRole("combobox", { name: "Frame rate" });
-    expect(quality.textContent).toContain("Native (144 fps)");
+    await openOptions();
+    expect(screen.getByRole("combobox", { name: "Frame rate" }).textContent).toContain(
+      "Native (144 fps)",
+    );
 
     fireEvent.click(screen.getByRole("button", { name: "Choose what to record" }));
     fireEvent.click(screen.getByRole("option", { name: "Record Side monitor" }));
@@ -370,6 +409,7 @@ describe("RecorderDock", () => {
         "Side monitor",
       );
     });
+    await openOptions();
     expect(screen.getByRole("combobox", { name: "Frame rate" }).textContent).not.toContain(
       "Native",
     );
@@ -459,6 +499,7 @@ describe("RecorderDock", () => {
       expect(screen.getByRole("button", { name: "Start recording" })).toBeEnabled();
     });
 
+    await openOptions();
     fireEvent.change(screen.getByRole("combobox", { name: "Countdown before recording" }), {
       target: { value: "0" },
     });
@@ -477,6 +518,7 @@ describe("RecorderDock", () => {
     });
 
     // Skip the countdown so the test exercises stop, not the timer.
+    await openOptions();
     fireEvent.change(screen.getByRole("combobox", { name: "Countdown before recording" }), {
       target: { value: "0" },
     });
@@ -497,6 +539,7 @@ describe("RecorderDock", () => {
     await waitFor(() => {
       expect(screen.getByRole("button", { name: "Start recording" })).toBeEnabled();
     });
+    await openOptions();
     fireEvent.change(screen.getByRole("combobox", { name: "Countdown before recording" }), {
       target: { value: "0" },
     });
@@ -518,4 +561,91 @@ describe("RecorderDock", () => {
     expect(screen.getByRole("button", { name: "Record the microphone" })).toHaveAttribute("aria-pressed", "true");
     expect(window.localStorage.getItem("capkit.recorder.settings.v1")).toContain('"microphone":true');
   });
+
+  it("fits the setup phase in a single row without inline device or quality controls", async () => {
+    render(<RecorderDock />);
+    await screen.findByRole("button", { name: "Choose what to record" });
+
+    const row = screen.getByTestId("setup-row");
+    for (const name of [
+      "Move the recorder",
+      "Record a screen",
+      "Record a window",
+      "Record a region",
+      "Choose what to record",
+      "Record system audio",
+      "Choose speaker",
+      "Record the microphone",
+      "Choose microphone",
+      "Show the camera",
+      "Recording options",
+      "Close the recorder",
+      "Start recording",
+    ]) {
+      expect(within(row).getByRole("button", { name })).toBeVisible();
+    }
+    expect(screen.queryByRole("combobox", { name: "Frame rate" })).not.toBeInTheDocument();
+    expect(
+      screen.queryByRole("combobox", { name: "Countdown before recording" }),
+    ).not.toBeInTheDocument();
+    expect(screen.queryByRole("listbox", { name: "Microphone device" })).not.toBeInTheDocument();
+  });
+
+  it("moves the dock from either grip and keeps its position on later fits", async () => {
+    const rect = {
+      x: 0, y: 0, width: 724, height: 140, top: 0, left: 0, right: 724, bottom: 140,
+      toJSON: (): string => "{}",
+    } as DOMRect;
+    const measure = vi.spyOn(HTMLElement.prototype, "getBoundingClientRect").mockReturnValue(rect);
+    try {
+      render(<RecorderDock />);
+      const grip = await screen.findByRole("button", { name: "Move the recorder" });
+      fireEvent.pointerDown(grip);
+      expect(mocks.drag).toHaveBeenCalledTimes(1);
+      await waitFor(() => {
+        expect(mocks.fit).toHaveBeenCalledWith(724, 140, true);
+      });
+
+      // A non-primary button never starts a drag.
+      mocks.drag.mockClear();
+      fireEvent.pointerDown(grip, { button: 2 });
+      expect(mocks.drag).not.toHaveBeenCalled();
+
+      // Pointer down on a control does not drag either.
+      fireEvent.pointerDown(screen.getByRole("button", { name: "Start recording" }));
+      expect(mocks.drag).not.toHaveBeenCalled();
+    } finally {
+      measure.mockRestore();
+    }
+  });
+
+  it("closes a menu with Escape and returns focus to its trigger", async () => {
+    render(<RecorderDock />);
+    await screen.findByRole("button", { name: "Choose what to record" });
+
+    const trigger = screen.getByRole("button", { name: "Choose microphone" });
+    fireEvent.click(trigger);
+    expect(await screen.findByRole("listbox", { name: "Microphone device" })).toBeVisible();
+
+    fireEvent.keyDown(screen.getByRole("toolbar", { name: "Recorder" }), { key: "Escape" });
+    await waitFor(() => {
+      expect(
+        screen.queryByRole("listbox", { name: "Microphone device" }),
+      ).not.toBeInTheDocument();
+    });
+    expect(trigger).toHaveFocus();
+  });
+
+  it("keeps only one menu open at a time", async () => {
+    render(<RecorderDock />);
+    await screen.findByRole("button", { name: "Choose what to record" });
+
+    fireEvent.click(screen.getByRole("button", { name: "Choose microphone" }));
+    expect(await screen.findByRole("listbox", { name: "Microphone device" })).toBeVisible();
+    fireEvent.click(screen.getByRole("button", { name: "Recording options" }));
+    expect(
+      screen.queryByRole("listbox", { name: "Microphone device" }),
+    ).not.toBeInTheDocument();
+    expect(screen.getByRole("combobox", { name: "Frame rate" })).toBeVisible();
+  });
 });
diff --git a/apps/desktop/src/components/RecorderDock.tsx b/apps/desktop/src/components/RecorderDock.tsx
index 209b573..0f59d46 100644
--- a/apps/desktop/src/components/RecorderDock.tsx
+++ b/apps/desktop/src/components/RecorderDock.tsx
@@ -1,5 +1,6 @@
-import { useCallback, useEffect, useLayoutEffect, useRef, useState } from "react";
+import { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
 import { isTauri } from "@tauri-apps/api/core";
+import { getCurrentWindow } from "@tauri-apps/api/window";
 import {
   countdownSeconds,
   defaultRecorderSettings,
@@ -41,7 +42,7 @@ import {
   stopRecording,
 } from "../lib/recordingTauri";
 import { describeInvokeError } from "../lib/tauri";
-import { Cancel, ChevronDown, Computer, Crop, Delete, Mic, Pause, Play, Record, Speaker, Stop, Video } from "./icons";
+import { Cancel, ChevronDown, Computer, Crop, Delete, Grip, Mic, Pause, Play, Record, Settings, Speaker, Stop, Video } from "./icons";
 
 type Phase = "setup" | "counting" | "recording" | "saving";
 
@@ -57,6 +58,23 @@ const controlClass =
 const selectClass =
   "h-7 rounded-md border border-white/12 bg-[#22231f] px-1.5 text-[12px] font-semibold text-stone-200 outline-none focus-visible:ring-2 focus-visible:ring-[var(--snaphub-accent)]";
 
+// Icon-only toolbar buttons. Same borders and focus as the text controls,
+// sized for the single setup row.
+const iconControlClass =
+  "inline-flex size-7 shrink-0 items-center justify-center rounded-md border border-white/12 bg-white/6 text-stone-200 outline-none transition hover:border-white/25 hover:text-white focus-visible:ring-2 focus-visible:ring-[var(--snaphub-accent)] disabled:cursor-not-allowed disabled:opacity-40 aria-pressed:border-white aria-pressed:bg-white aria-pressed:text-stone-900";
+
+// The joined halves of an audio split button. Separate constants (rather than
+// overriding `iconControlClass`) so the corner radius never depends on which
+// utility the cascade happens to prefer.
+const splitToggleClass =
+  "inline-flex h-7 w-7 shrink-0 items-center justify-center rounded-l-md rounded-r-none border border-white/12 bg-white/6 text-stone-200 outline-none transition hover:border-white/25 hover:text-white focus-visible:ring-2 focus-visible:ring-[var(--snaphub-accent)] disabled:cursor-not-allowed disabled:opacity-40 aria-pressed:border-white aria-pressed:bg-white aria-pressed:text-stone-900";
+
+const splitChevronClass =
+  "inline-flex h-7 w-5 shrink-0 items-center justify-center rounded-l-none rounded-r-md border border-l-0 border-white/12 bg-white/6 text-stone-200 outline-none transition hover:border-white/25 hover:text-white focus-visible:ring-2 focus-visible:ring-[var(--snaphub-accent)] disabled:cursor-not-allowed disabled:opacity-40";
+
+/** Which popover is open above the setup row. Only one is ever open. */
+type DockMenu = "source" | "system" | "mic" | "options";
+
 /**
  * The recorder's floating dock.
  *
@@ -76,12 +94,17 @@ export function RecorderDock(): React.JSX.Element {
   const [excluded, setExcluded] = useState(true);
   const [paused, setPaused] = useState(false);
   const [camera, setCamera] = useState(false);
-  const [sourcePickerOpen, setSourcePickerOpen] = useState(false);
+  const [openMenu, setOpenMenu] = useState<DockMenu | null>(null);
+  const [dragged, setDragged] = useState(false);
   const [region, setRegion] = useState<RecordRegionSelection | null>(null);
   const [drawingRegion, setDrawingRegion] = useState(false);
   const pickerRef = useRef<HTMLDivElement | null>(null);
   const dockSizeRef = useRef<HTMLDivElement | null>(null);
+  const menuRef = useRef<HTMLDivElement | null>(null);
   const sourceTriggerRef = useRef<HTMLButtonElement | null>(null);
+  const systemTriggerRef = useRef<HTMLButtonElement | null>(null);
+  const micTriggerRef = useRef<HTMLButtonElement | null>(null);
+  const optionsTriggerRef = useRef<HTMLButtonElement | null>(null);
   const pendingDisplayRef = useRef<string | null>(null);
 
   useEffect(() => {
@@ -94,7 +117,8 @@ export function RecorderDock(): React.JSX.Element {
   }, []);
 
   // Measures the dock and fits the window to it. Skips zero sizes, which only
-  // happen where there is no layout (jsdom).
+  // happen where there is no layout (jsdom). After the first drag the
+  // backend keeps the dock's bottom-centre point instead of re-docking it.
   const fitDock = useCallback(async (): Promise<void> => {
     const node = dockSizeRef.current;
     if (node === null) return;
@@ -102,7 +126,21 @@ export function RecorderDock(): React.JSX.Element {
     const width = Math.ceil(rect.width);
     const height = Math.ceil(rect.height);
     if (width <= 0 || height <= 0) return;
-    await fitRecorder(width, height);
+    await fitRecorder(width, height, dragged);
+  }, [dragged]);
+
+  // Re-asserts the kept position right after a drag, so the backend learns
+  // it before the next resize fit runs.
+  useEffect(() => {
+    if (!dragged) return;
+    void fitDock().catch(() => undefined);
+  }, [dragged, fitDock]);
+
+  // Dragging either the grip or the camera bubble moves its window. The
+  // flag marks the dock as user-placed, so later fits keep its position.
+  const startWindowDrag = useCallback((): void => {
+    setDragged(true);
+    void getCurrentWindow().startDragging().catch(() => undefined);
   }, []);
 
   // Reveal ordering: the window is built hidden, the first fit runs, then the
@@ -242,21 +280,45 @@ export function RecorderDock(): React.JSX.Element {
     visibleSources.find((source) => source.id === settings.sourceId) ?? visibleSources.at(0) ?? null;
   const nativeFps = Math.round(active?.refreshRate ?? 60);
 
-  // Closes the source picker on a pointer down outside the dock card. The
-  // picker lives inside the card now, so the card is the boundary.
+  // Ref objects are stable, so the mapping outlives every render.
+  const menuTriggerRefs = useMemo(
+    () => ({
+      source: sourceTriggerRef,
+      system: systemTriggerRef,
+      mic: micTriggerRef,
+      options: optionsTriggerRef,
+    }) as const,
+    [],
+  );
+
+  const closeMenuFocusTrigger = useCallback((): void => {
+    setOpenMenu((current) => {
+      if (current !== null) menuTriggerRefs[current].current?.focus();
+      return null;
+    });
+  }, [menuTriggerRefs]);
+
+  function toggleMenu(menu: DockMenu): void {
+    setOpenMenu((current) => (current === menu ? null : menu));
+  }
+
+  // Closes the open popover on a pointer down outside it, and on a trigger
+  // the click toggles instead. Every popover lives inside the card, so a
+  // menu opening never moves the dock on its own.
   useEffect(() => {
-    if (!sourcePickerOpen) return;
+    if (openMenu === null) return;
     function onPointerDown(event: PointerEvent): void {
-      if (pickerRef.current?.contains(event.target as Node) === false) setSourcePickerOpen(false);
+      const target = event.target as Node | null;
+      if (target === null) return;
+      if (menuRef.current?.contains(target) === true) return;
+      const onTrigger = Object.values(menuTriggerRefs).some(
+        (ref) => ref.current?.contains(target) === true,
+      );
+      if (!onTrigger) closeMenuFocusTrigger();
     }
     document.addEventListener("pointerdown", onPointerDown);
     return (): void => document.removeEventListener("pointerdown", onPointerDown);
-  }, [sourcePickerOpen]);
-
-  const closePickerFocusTrigger = useCallback((): void => {
-    setSourcePickerOpen(false);
-    sourceTriggerRef.current?.focus();
-  }, []);
+  }, [openMenu, closeMenuFocusTrigger]);
 
   // Region overlay results. A selection for a display that is no longer
   // current is ignored, but drawing always ends. No isTauri guard: the dock
@@ -314,7 +376,7 @@ export function RecorderDock(): React.JSX.Element {
       setError("Choose something to record first");
       return;
     }
-    setSourcePickerOpen(false);
+    setOpenMenu(null);
     setError(null);
     try {
       // A window records as the crop of its display it currently occupies, so
@@ -344,7 +406,7 @@ export function RecorderDock(): React.JSX.Element {
       setError("Choose something to record first");
       return;
     }
-    setSourcePickerOpen(false);
+    setOpenMenu(null);
     // Shown for the whole countdown, not just once recording starts, so the
     // target is visible before a single frame is captured.
     const bounds =
@@ -408,9 +470,9 @@ export function RecorderDock(): React.JSX.Element {
   }
 
   function handleCardKeyDown(event: React.KeyboardEvent<HTMLDivElement>): void {
-    if (event.key === "Escape" && sourcePickerOpen) {
+    if (event.key === "Escape" && openMenu !== null) {
       event.preventDefault();
-      closePickerFocusTrigger();
+      closeMenuFocusTrigger();
     }
   }
 
@@ -439,37 +501,9 @@ export function RecorderDock(): React.JSX.Element {
         role="toolbar"
         onKeyDown={handleCardKeyDown}
       >
-        {sourcePickerOpen ? (
-          <div
-            aria-label="Available sources"
-            className="grid max-h-64 grid-cols-3 gap-1.5 overflow-y-auto"
-            role="listbox"
-          >
-            {visibleSources.length === 0 ? (
-              <p className="col-span-3 px-2 py-3 text-center text-[12px] text-stone-400">Nothing available to record</p>
-            ) : (
-              visibleSources.map((source) => (
-                <button
-                  aria-label={`Record ${source.title}`}
-                  aria-selected={source.id === active?.id}
-                  className="flex flex-col gap-1 rounded-md border border-transparent p-1 text-left outline-none transition hover:border-white/15 hover:bg-white/6 focus-visible:ring-2 focus-visible:ring-[var(--snaphub-accent)] aria-selected:border-[var(--snaphub-accent)] aria-selected:bg-white/8"
-                  key={source.id}
-                  role="option"
-                  type="button"
-                  onClick={() => {
-                    patch({ sourceId: source.id });
-                    setSourcePickerOpen(false);
-                  }}
-                >
-                  <SourceThumbnail className="aspect-video w-full rounded bg-black/40" source={source} iconSize={18} />
-                  <span className="truncate text-[11px] font-medium text-stone-200">{source.title}</span>
-                </button>
-              ))
-            )}
-          </div>
-        ) : null}
         {phase === "recording" || phase === "saving" ? (
           <div className="flex items-center gap-2.5">
+            <DragGrip onDrag={startWindowDrag} />
             <span
               aria-hidden="true"
               className={`size-2.5 shrink-0 rounded-full ${paused ? "bg-amber-300" : "animate-pulse bg-[#ff5b4d]"}`}
@@ -523,35 +557,151 @@ export function RecorderDock(): React.JSX.Element {
           </div>
         ) : (
           <>
-            <div className="flex flex-wrap items-center gap-1.5">
-              <div aria-label="What to record" className="flex items-center gap-1" role="group">
+            {openMenu === null ? null : (
+              <div ref={menuRef}>
+                {openMenu === "source" ? (
+                  <div
+                    aria-label="Available sources"
+                    className="grid max-h-64 grid-cols-3 gap-1.5 overflow-y-auto"
+                    role="listbox"
+                  >
+                    {visibleSources.length === 0 ? (
+                      <p className="col-span-3 px-2 py-3 text-center text-[12px] text-stone-400">
+                        Nothing available to record
+                      </p>
+                    ) : (
+                      visibleSources.map((source) => (
+                        <button
+                          aria-label={`Record ${source.title}`}
+                          aria-selected={source.id === active?.id}
+                          className="flex flex-col gap-1 rounded-md border border-transparent p-1 text-left outline-none transition hover:border-white/15 hover:bg-white/6 focus-visible:ring-2 focus-visible:ring-[var(--snaphub-accent)] aria-selected:border-[var(--snaphub-accent)] aria-selected:bg-white/8"
+                          key={source.id}
+                          role="option"
+                          type="button"
+                          onClick={() => {
+                            patch({ sourceId: source.id });
+                            closeMenuFocusTrigger();
+                          }}
+                        >
+                          <SourceThumbnail
+                            className="aspect-video w-full rounded bg-black/40"
+                            source={source}
+                            iconSize={18}
+                          />
+                          <span className="truncate text-[11px] font-medium text-stone-200">
+                            {source.title}
+                          </span>
+                        </button>
+                      ))
+                    )}
+                  </div>
+                ) : null}
+                {openMenu === "system" ? (
+                  <DeviceMenu
+                    devices={speakers}
+                    emptyLabel="No speakers found"
+                    label="Speaker device"
+                    value={settings.systemAudioDeviceId}
+                    onPick={(systemAudioDeviceId) => {
+                      patch({ systemAudioDeviceId });
+                      closeMenuFocusTrigger();
+                    }}
+                  />
+                ) : null}
+                {openMenu === "mic" ? (
+                  <DeviceMenu
+                    devices={microphones}
+                    emptyLabel="No microphones found"
+                    label="Microphone device"
+                    value={settings.microphoneDeviceId}
+                    onPick={(microphoneDeviceId) => {
+                      patch({ microphoneDeviceId });
+                      closeMenuFocusTrigger();
+                    }}
+                  />
+                ) : null}
+                {openMenu === "options" ? (
+                  <div className="flex flex-wrap items-center gap-3 px-1 py-1">
+                    <label className="flex items-center gap-1.5 text-[12px] font-semibold text-stone-400">
+                      Quality
+                      <select
+                        aria-label="Frame rate"
+                        className={selectClass}
+                        value={settings.fps === "native" ? "native" : String(settings.fps)}
+                        onChange={(event) =>
+                          patch(
+                            event.currentTarget.value === "native"
+                              ? { fps: "native" }
+                              : {
+                                  fps: Number(event.currentTarget.value) as Exclude<
+                                    FrameRate,
+                                    "native"
+                                  >,
+                                },
+                          )
+                        }
+                      >
+                        {frameRates.map((rate) => (
+                          <option key={rate} value={String(rate)}>{`${String(rate)} fps`}</option>
+                        ))}
+                        {nativeFps > 60 ? (
+                          <option value="native">{`Native (${String(nativeFps)} fps)`}</option>
+                        ) : null}
+                      </select>
+                    </label>
+
+                    <label className="flex items-center gap-1.5 text-[12px] font-semibold text-stone-400">
+                      Countdown
+                      <select
+                        aria-label="Countdown before recording"
+                        className={selectClass}
+                        value={String(settings.countdown)}
+                        onChange={(event) =>
+                          patch({ countdown: Number(event.currentTarget.value) as CountdownSeconds })
+                        }
+                      >
+                        {countdownSeconds.map((value) => (
+                          <option key={value} value={String(value)}>
+                            {value === 0 ? "None" : `${String(value)}s`}
+                          </option>
+                        ))}
+                      </select>
+                    </label>
+                  </div>
+                ) : null}
+              </div>
+            )}
+            <div className="flex items-center gap-1.5" data-testid="setup-row">
+              <DragGrip onDrag={startWindowDrag} />
+
+              <div aria-label="What to record" className="flex shrink-0 items-center gap-1" role="group">
                 {modes.map((mode) => {
                   const Icon = mode.icon;
                   return (
                     <button
                       aria-label={`Record a ${mode.label.toLowerCase()}`}
                       aria-pressed={settings.mode === mode.id}
-                      className={controlClass}
+                      className={iconControlClass}
                       key={mode.id}
+                      title={mode.label}
                       type="button"
                       onClick={() => patch({ mode: mode.id })}
                     >
                       <Icon aria-hidden="true" size={14} />
-                      {mode.label}
                     </button>
                   );
                 })}
               </div>
 
-              <div>
+              <div className="min-w-0">
                 <button
-                  aria-expanded={sourcePickerOpen}
+                  aria-expanded={openMenu === "source"}
                   aria-haspopup="listbox"
                   aria-label="Choose what to record"
-                  className={`${controlClass} max-w-[220px]`}
+                  className={`${controlClass} max-w-[180px]`}
                   ref={sourceTriggerRef}
                   type="button"
-                  onClick={() => setSourcePickerOpen((value) => !value)}
+                  onClick={() => toggleMenu("source")}
                 >
                   {active === null ? (
                     <span className="text-stone-400">Nothing available</span>
@@ -561,7 +711,11 @@ export function RecorderDock(): React.JSX.Element {
                       <span className="min-w-0 flex-1 truncate text-left">{active.title}</span>
                     </>
                   )}
-                  <ChevronDown aria-hidden="true" className={sourcePickerOpen ? "rotate-180" : ""} size={12} />
+                  <ChevronDown
+                    aria-hidden="true"
+                    className={openMenu === "source" ? "rotate-180" : ""}
+                    size={12}
+                  />
                 </button>
               </div>
 
@@ -569,91 +723,85 @@ export function RecorderDock(): React.JSX.Element {
                 region === null ? (
                   <button
                     aria-label="Draw area to record"
-                    className={controlClass}
+                    className={iconControlClass}
                     disabled={active === null || drawingRegion}
+                    title={drawingRegion ? "Drawing…" : "Draw area"}
                     type="button"
                     onClick={drawArea}
                   >
                     <Crop aria-hidden="true" size={14} />
-                    {drawingRegion ? "Drawing…" : "Draw area"}
                   </button>
                 ) : (
                   <button
                     aria-label="Redraw area to record"
-                    className={controlClass}
+                    className={iconControlClass}
                     disabled={drawingRegion}
+                    title={`${String(Math.round(region.bounds.width))} × ${String(Math.round(region.bounds.height))} · Redraw`}
                     type="button"
                     onClick={drawArea}
                   >
                     <Crop aria-hidden="true" size={14} />
-                    {`${String(Math.round(region.bounds.width))} × ${String(Math.round(region.bounds.height))} · Redraw`}
                   </button>
                 )
               ) : null}
 
-              <div className="ml-auto flex items-center gap-1.5">
+              <span aria-hidden="true" className="h-5 w-px shrink-0 bg-white/12" />
+
+              <div className="flex shrink-0 items-center">
                 <button
-                  aria-label="Close the recorder"
-                  className={controlClass}
+                  aria-label="Record system audio"
+                  aria-pressed={settings.systemAudio}
+                  className={splitToggleClass}
+                  title="Record system audio"
                   type="button"
-                  onClick={() => void closeRecorder()}
+                  onClick={() => patch({ systemAudio: !settings.systemAudio })}
                 >
-                  <Cancel aria-hidden="true" size={14} />
+                  <Speaker aria-hidden="true" size={14} />
                 </button>
                 <button
-                  aria-label="Start recording"
-                  className="inline-flex items-center gap-1.5 rounded-md bg-[var(--snaphub-accent)] px-3.5 py-1.5 text-[12px] font-bold text-[#171815] outline-none transition hover:brightness-110 focus-visible:ring-2 focus-visible:ring-white disabled:opacity-40"
-                  disabled={active === null || (settings.mode === "region" && region === null)}
+                  aria-expanded={openMenu === "system"}
+                  aria-haspopup="listbox"
+                  aria-label="Choose speaker"
+                  className={splitChevronClass}
+                  ref={systemTriggerRef}
+                  title="Choose speaker"
                   type="button"
-                  onClick={requestStart}
+                  onClick={() => toggleMenu("system")}
                 >
-                  <Record aria-hidden="true" size={14} />
-                  Record
+                  <ChevronDown aria-hidden="true" className={openMenu === "system" ? "rotate-180" : ""} size={12} />
+                </button>
+              </div>
+
+              <div className="flex shrink-0 items-center">
+                <button
+                  aria-label="Record the microphone"
+                  aria-pressed={settings.microphone}
+                  className={splitToggleClass}
+                  title="Record the microphone"
+                  type="button"
+                  onClick={() => patch({ microphone: !settings.microphone })}
+                >
+                  <Mic aria-hidden="true" size={14} />
+                </button>
+                <button
+                  aria-expanded={openMenu === "mic"}
+                  aria-haspopup="listbox"
+                  aria-label="Choose microphone"
+                  className={splitChevronClass}
+                  ref={micTriggerRef}
+                  title="Choose microphone"
+                  type="button"
+                  onClick={() => toggleMenu("mic")}
+                >
+                  <ChevronDown aria-hidden="true" className={openMenu === "mic" ? "rotate-180" : ""} size={12} />
                 </button>
               </div>
-            </div>
 
-            <div className="flex flex-wrap items-center gap-1.5 border-t border-white/8 pt-2">
-              <button
-                aria-label="Record system audio"
-                aria-pressed={settings.systemAudio}
-                className={controlClass}
-                type="button"
-                onClick={() => patch({ systemAudio: !settings.systemAudio })}
-              >
-                <Speaker aria-hidden="true" size={14} />
-                System
-              </button>
-              <DeviceSelect
-                devices={speakers}
-                disabled={!settings.systemAudio}
-                emptyLabel="No speakers found"
-                label="Speaker device"
-                value={settings.systemAudioDeviceId}
-                onChange={(systemAudioDeviceId) => patch({ systemAudioDeviceId })}
-              />
-              <button
-                aria-label="Record the microphone"
-                aria-pressed={settings.microphone}
-                className={controlClass}
-                type="button"
-                onClick={() => patch({ microphone: !settings.microphone })}
-              >
-                <Mic aria-hidden="true" size={14} />
-                Mic
-              </button>
-              <DeviceSelect
-                devices={microphones}
-                disabled={!settings.microphone}
-                emptyLabel="No microphones found"
-                label="Microphone device"
-                value={settings.microphoneDeviceId}
-                onChange={(microphoneDeviceId) => patch({ microphoneDeviceId })}
-              />
               <button
                 aria-label="Show the camera"
                 aria-pressed={camera}
-                className={controlClass}
+                className={iconControlClass}
+                title="Camera"
                 type="button"
                 onClick={() => {
                   const next = !camera;
@@ -662,51 +810,41 @@ export function RecorderDock(): React.JSX.Element {
                 }}
               >
                 <Video aria-hidden="true" size={14} />
-                Camera
               </button>
-            </div>
 
-            <div className="flex flex-wrap items-center gap-1.5 border-t border-white/8 pt-2">
-              <label className="flex items-center gap-1.5 text-[12px] font-semibold text-stone-400">
-                Quality
-                <select
-                  aria-label="Frame rate"
-                  className={selectClass}
-                  value={settings.fps === "native" ? "native" : String(settings.fps)}
-                  onChange={(event) =>
-                    patch(
-                      event.currentTarget.value === "native"
-                        ? { fps: "native" }
-                        : { fps: Number(event.currentTarget.value) as Exclude<FrameRate, "native"> },
-                    )
-                  }
-                >
-                  {frameRates.map((rate) => (
-                    <option key={rate} value={String(rate)}>{`${String(rate)} fps`}</option>
-                  ))}
-                  {nativeFps > 60 ? (
-                    <option value="native">{`Native (${String(nativeFps)} fps)`}</option>
-                  ) : null}
-                </select>
-              </label>
-
-              <label className="flex items-center gap-1.5 text-[12px] font-semibold text-stone-400">
-                Countdown
-                <select
-                  aria-label="Countdown before recording"
-                  className={selectClass}
-                  value={String(settings.countdown)}
-                  onChange={(event) =>
-                    patch({ countdown: Number(event.currentTarget.value) as CountdownSeconds })
-                  }
-                >
-                  {countdownSeconds.map((value) => (
-                    <option key={value} value={String(value)}>
-                      {value === 0 ? "None" : `${String(value)}s`}
-                    </option>
-                  ))}
-                </select>
-              </label>
+              <button
+                aria-expanded={openMenu === "options"}
+                aria-label="Recording options"
+                className={iconControlClass}
+                ref={optionsTriggerRef}
+                title="Recording options"
+                type="button"
+                onClick={() => toggleMenu("options")}
+              >
+                <Settings aria-hidden="true" size={14} />
+              </button>
+
+              <span aria-hidden="true" className="h-5 w-px shrink-0 bg-white/12" />
+
+              <button
+                aria-label="Close the recorder"
+                className={iconControlClass}
+                title="Close"
+                type="button"
+                onClick={() => void closeRecorder()}
+              >
+                <Cancel aria-hidden="true" size={14} />
+              </button>
+              <button
+                aria-label="Start recording"
+                className="inline-flex shrink-0 items-center gap-1.5 rounded-md bg-[var(--snaphub-accent)] px-3.5 py-1.5 text-[12px] font-bold text-[#171815] outline-none transition hover:brightness-110 focus-visible:ring-2 focus-visible:ring-white disabled:opacity-40"
+                disabled={active === null || (settings.mode === "region" && region === null)}
+                type="button"
+                onClick={requestStart}
+              >
+                <Record aria-hidden="true" size={14} />
+                Record
+              </button>
             </div>
           </>
         )}
@@ -733,47 +871,79 @@ export function RecorderDock(): React.JSX.Element {
 }
 
 /**
- * An audio device choice. The first option always follows the OS default; a
- * missing device list leaves a single disabled option and the toggle usable.
+ * The dock's drag handle. Pointer down on the primary button starts a window
+ * drag and marks the dock as user-placed, so later fits keep its position.
  */
-function DeviceSelect({
+function DragGrip({ onDrag }: { onDrag: () => void }): React.JSX.Element {
+  return (
+    <button
+      aria-label="Move the recorder"
+      className={`${iconControlClass} cursor-grab active:cursor-grabbing`}
+      title="Move the recorder"
+      type="button"
+      onPointerDown={(event) => {
+        if (event.button !== 0) return;
+        onDrag();
+      }}
+    >
+      <Grip aria-hidden="true" size={14} />
+    </button>
+  );
+}
+
+/**
+ * An audio device choice inside a popover. The first option always follows
+ * the OS default; a missing device list leaves an explanatory line and the
+ * toggle usable.
+ */
+function DeviceMenu({
   devices,
-  disabled,
   emptyLabel,
   label,
   value,
-  onChange,
+  onPick,
 }: {
   devices: readonly AudioDevice[];
-  disabled: boolean;
   emptyLabel: string;
   label: string;
   value: string;
-  onChange: (id: string) => void;
+  onPick: (id: string) => void;
 }): React.JSX.Element {
-  const fallback = devices.find((device) => device.isDefault) ?? null;
   if (devices.length === 0) {
     return (
-      <select aria-label={label} className={`${selectClass} max-w-[180px] truncate`} disabled value="">
-        <option value="">{emptyLabel}</option>
-      </select>
+      <p className="px-2 py-3 text-center text-[12px] text-stone-400" role="status">
+        {emptyLabel}
+      </p>
     );
   }
+  const fallback = devices.find((device) => device.isDefault) ?? null;
+  const options = [
+    { id: "", name: fallback === null ? "Default" : `Default (${fallback.name})` },
+    ...devices,
+  ];
   return (
-    <select
+    <div
       aria-label={label}
-      className={`${selectClass} max-w-[180px] truncate`}
-      disabled={disabled}
-      value={value}
-      onChange={(event) => onChange(event.currentTarget.value)}
+      className="flex max-h-64 flex-col gap-0.5 overflow-y-auto"
+      role="listbox"
     >
-      <option value="">{fallback === null ? "Default" : `Default (${fallback.name})`}</option>
-      {devices.map((device) => (
-        <option key={device.id} value={device.id}>
-          {device.name}
-        </option>
+      {options.map((device) => (
+        <button
+          aria-label={device.id === "" ? "Use the default device" : `Use ${device.name}`}
+          aria-selected={device.id === value}
+          className="flex items-center gap-2 rounded-md px-2 py-1.5 text-left text-[12px] font-medium text-stone-200 outline-none transition hover:bg-white/6 focus-visible:ring-2 focus-visible:ring-[var(--snaphub-accent)] aria-selected:bg-white/8 aria-selected:text-white"
+          key={device.id === "" ? "default" : device.id}
+          role="option"
+          type="button"
+          onClick={() => onPick(device.id)}
+        >
+          <span className="min-w-0 flex-1 truncate">{device.name}</span>
+          {device.id === value ? (
+            <span aria-hidden="true" className="size-1.5 shrink-0 rounded-full bg-[var(--snaphub-accent)]" />
+          ) : null}
+        </button>
       ))}
-    </select>
+    </div>
   );
 }
 
diff --git a/apps/desktop/src/lib/recordingTauri.ts b/apps/desktop/src/lib/recordingTauri.ts
index f7c1a50..c07f2a9 100644
--- a/apps/desktop/src/lib/recordingTauri.ts
+++ b/apps/desktop/src/lib/recordingTauri.ts
@@ -76,9 +76,17 @@ export async function setRecordingPaused(paused: boolean): Promise<boolean> {
   return Boolean(await invoke("set_recording_paused", { paused }));
 }
 
-/** Fits the recorder window to its content; the backend anchors and clamps it. */
-export async function fitRecorder(width: number, height: number): Promise<void> {
-  await invoke("fit_recorder", { width, height });
+/**
+ * Fits the recorder window to its content. Once the user has dragged the
+ * dock (`keepPosition`), the backend keeps its bottom-centre point and grows
+ * upward instead of re-docking it, and clamps it inside the work area.
+ */
+export async function fitRecorder(
+  width: number,
+  height: number,
+  keepPosition: boolean,
+): Promise<void> {
+  await invoke("fit_recorder", { width, height, keepPosition });
 }
 
 /**

From c8b9c2e60ec28e8ef40a5d601f2099ead810b7eb Mon Sep 17 00:00:00 2001
From: Nakul Srivastava <imnakul44@gmail.com>
Date: Mon, 28 Sep 2026 16:48:15 +0530
Subject: [PATCH 6/9] feat(recorder): save recordings in a configurable Videos
 folder

New installs record into Videos\CapKit instead of the temp folder, and
Settings shows a Saved recordings row with choose, open and reset. The
preferences file now carries both folders, so saving one never erases
the other, and the asset scope follows the recordings folder across
restarts. The Recordings grid matches Screenshots at four columns.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 apps/desktop/src-tauri/src/lib.rs             |  55 +++++++
 .../desktop/src-tauri/src/services/capture.rs | 144 +++++++++++++++++-
 .../src-tauri/src/services/recording.rs       |  54 +++++--
 .../dashboard/DashboardPanel.test.tsx         |   4 +-
 .../components/dashboard/RecordView.test.tsx  |  14 ++
 .../src/components/dashboard/RecordView.tsx   |   2 +-
 .../src/components/dashboard/SettingsView.tsx |  72 ++++++++-
 apps/desktop/src/lib/tauri.ts                 |  23 +++
 8 files changed, 350 insertions(+), 18 deletions(-)

diff --git a/apps/desktop/src-tauri/src/lib.rs b/apps/desktop/src-tauri/src/lib.rs
index 352041b..5dfb48e 100644
--- a/apps/desktop/src-tauri/src/lib.rs
+++ b/apps/desktop/src-tauri/src/lib.rs
@@ -1438,6 +1438,50 @@ async fn cancel_recording(app: AppHandle) -> Result<(), SnaphubError> {
         .and_then(|result| result)
 }
 
+/// Where new screen recordings are saved. The folder is opted into the asset
+/// protocol scope at startup and after every change, so recordings keep
+/// playing after a restart wherever the user puts them.
+#[tauri::command]
+fn get_recording_directory(
+    service: tauri::State<'_, RecordingService>,
+) -> Result<String, SnaphubError> {
+    service
+        .recording_directory()
+        .map(|path| path.to_string_lossy().into_owned())
+}
+
+#[tauri::command]
+fn set_recording_directory(app: AppHandle, directory: String) -> Result<String, SnaphubError> {
+    let path = app
+        .state::<RecordingService>()
+        .set_recording_directory(PathBuf::from(directory))?;
+    let _ = app.asset_protocol_scope().allow_directory(&path, true);
+    Ok(path.to_string_lossy().into_owned())
+}
+
+#[tauri::command]
+fn reset_recording_directory(app: AppHandle) -> Result<String, SnaphubError> {
+    let path = app
+        .state::<RecordingService>()
+        .reset_recording_directory()?;
+    let _ = app.asset_protocol_scope().allow_directory(&path, true);
+    Ok(path.to_string_lossy().into_owned())
+}
+
+#[tauri::command]
+fn open_recording_directory(
+    service: tauri::State<'_, RecordingService>,
+) -> Result<(), SnaphubError> {
+    let directory = service.recording_directory()?;
+    std::fs::create_dir_all(&directory).map_err(|error| SnaphubError::Record(error.to_string()))?;
+    #[cfg(target_os = "windows")]
+    return platform::windows_shell::open_path(&directory, false);
+    #[cfg(not(target_os = "windows"))]
+    Err(SnaphubError::Window(
+        "Opening folders is not implemented on this platform".into(),
+    ))
+}
+
 /// Pauses or resumes the recording; paused time is omitted from the output.
 #[tauri::command]
 fn set_recording_paused(
@@ -2205,6 +2249,10 @@ pub fn run() {
             start_recording,
             stop_recording,
             cancel_recording,
+            get_recording_directory,
+            set_recording_directory,
+            reset_recording_directory,
+            open_recording_directory,
             recording_status,
             begin_camera_track,
             append_camera_chunk,
@@ -2242,6 +2290,13 @@ pub fn run() {
                 .asset_protocol_scope()
                 .allow_directory(std::env::temp_dir().join("CapKit"), true);
 
+            // A user-chosen recordings folder lives outside the temp scope,
+            // so it is opted in too. Without this, recordings there would
+            // stop playing after a restart.
+            if let Ok(directory) = app.state::<RecordingService>().recording_directory() {
+                let _ = app.asset_protocol_scope().allow_directory(directory, true);
+            }
+
             let configured = app
                 .state::<ShortcutConfiguration>()
                 .0
diff --git a/apps/desktop/src-tauri/src/services/capture.rs b/apps/desktop/src-tauri/src/services/capture.rs
index b028e01..ced078f 100644
--- a/apps/desktop/src-tauri/src/services/capture.rs
+++ b/apps/desktop/src-tauri/src/services/capture.rs
@@ -1212,6 +1212,8 @@ fn default_save_directory() -> PathBuf {
 #[derive(serde::Deserialize, serde::Serialize)]
 struct StoragePreferences {
     save_directory: PathBuf,
+    #[serde(default)]
+    recording_directory: Option<PathBuf>,
 }
 
 fn storage_preferences_path() -> PathBuf {
@@ -1262,19 +1264,151 @@ fn load_save_directory() -> PathBuf {
     default_save_directory()
 }
 
+/// Reads the whole preferences file, so saving one folder never erases the
+/// other. A missing or unparsable file falls back to the photo default with
+/// no recordings folder chosen.
 fn persist_save_directory(directory: &Path) -> Result<(), SnaphubError> {
-    let path = storage_preferences_path();
+    update_storage_preferences(|preferences| {
+        preferences.save_directory = directory.to_path_buf();
+    })
+}
+
+/// Applies one field change to the preferences file, leaving every other
+/// field exactly as it was.
+fn update_storage_preferences(
+    update: impl FnOnce(&mut StoragePreferences),
+) -> Result<(), SnaphubError> {
+    update_storage_preferences_at(&storage_preferences_path(), update)
+}
+
+fn update_storage_preferences_at(
+    path: &Path,
+    update: impl FnOnce(&mut StoragePreferences),
+) -> Result<(), SnaphubError> {
+    let mut preferences = read_storage_preferences_from(path);
+    update(&mut preferences);
+    write_storage_preferences_to(path, &preferences)
+}
+
+fn read_storage_preferences() -> StoragePreferences {
+    read_storage_preferences_from(&storage_preferences_path())
+}
+
+fn read_storage_preferences_from(path: &Path) -> StoragePreferences {
+    fs::read_to_string(path)
+        .ok()
+        .and_then(|raw| serde_json::from_str::<StoragePreferences>(&raw).ok())
+        .unwrap_or(StoragePreferences {
+            save_directory: default_save_directory(),
+            recording_directory: None,
+        })
+}
+
+fn write_storage_preferences_to(
+    path: &Path,
+    preferences: &StoragePreferences,
+) -> Result<(), SnaphubError> {
     let parent = path
         .parent()
         .ok_or_else(|| SnaphubError::Export("Storage settings path is invalid".into()))?;
     fs::create_dir_all(parent).map_err(SnaphubError::export)?;
-    let bytes = serde_json::to_vec_pretty(&StoragePreferences {
-        save_directory: directory.to_path_buf(),
-    })
-    .map_err(SnaphubError::export)?;
+    let bytes = serde_json::to_vec_pretty(preferences).map_err(SnaphubError::export)?;
     fs::write(path, bytes).map_err(SnaphubError::export)
 }
 
+/// The user's recordings folder, or the Videos default when none was chosen.
+pub(crate) fn load_recording_directory() -> PathBuf {
+    read_storage_preferences()
+        .recording_directory
+        .filter(|directory| directory.is_absolute())
+        .unwrap_or_else(default_recording_directory)
+}
+
+pub(crate) fn default_recording_directory() -> PathBuf {
+    dirs::video_dir()
+        .map(|directory| directory.join("CapKit"))
+        .unwrap_or_else(|| std::env::temp_dir().join("CapKit").join("recordings"))
+}
+
+pub(crate) fn persist_recording_directory(directory: &Path) -> Result<(), SnaphubError> {
+    update_storage_preferences(|preferences| {
+        preferences.recording_directory = Some(directory.to_path_buf());
+    })
+}
+
+#[cfg(test)]
+mod storage_preferences_tests {
+    use super::*;
+
+    /// A scratch preferences file, so the tests never touch the real config.
+    fn scratch_preferences_path() -> PathBuf {
+        std::env::temp_dir().join(format!(
+            "capkit-storage-preferences-{}.json",
+            std::process::id()
+        ))
+    }
+
+    #[test]
+    fn saving_one_folder_keeps_the_other() {
+        let path = scratch_preferences_path();
+        write_storage_preferences_to(
+            &path,
+            &StoragePreferences {
+                save_directory: PathBuf::from("C:/Photos/CapKit"),
+                recording_directory: None,
+            },
+        )
+        .expect("scratch preferences write");
+
+        // Saving the recordings folder keeps the photo folder, through the
+        // same read-modify-write the production setters use.
+        update_storage_preferences_at(&path, |preferences| {
+            preferences.recording_directory = Some(PathBuf::from("D:/Video/CapKit"));
+        })
+        .expect("recordings folder saves");
+        let reloaded = read_storage_preferences_from(&path);
+        assert_eq!(reloaded.save_directory, PathBuf::from("C:/Photos/CapKit"));
+        assert_eq!(
+            reloaded.recording_directory,
+            Some(PathBuf::from("D:/Video/CapKit"))
+        );
+
+        // Saving the photo folder keeps the recordings folder.
+        update_storage_preferences_at(&path, |preferences| {
+            preferences.save_directory = PathBuf::from("C:/Photos/Other");
+        })
+        .expect("photo folder saves");
+        let reloaded = read_storage_preferences_from(&path);
+        assert_eq!(reloaded.save_directory, PathBuf::from("C:/Photos/Other"));
+        assert_eq!(
+            reloaded.recording_directory,
+            Some(PathBuf::from("D:/Video/CapKit"))
+        );
+
+        let _ = fs::remove_file(&path);
+    }
+
+    #[test]
+    fn the_default_recordings_folder_lives_in_videos() {
+        let default = default_recording_directory();
+        assert_eq!(
+            default.file_name().and_then(|name| name.to_str()),
+            Some("CapKit")
+        );
+        if let Some(video) = dirs::video_dir() {
+            assert_eq!(default, video.join("CapKit"));
+        }
+    }
+
+    #[test]
+    fn old_preferences_without_a_recordings_folder_still_parse() {
+        let raw = r#"{"save_directory": "C:/Photos/CapKit"}"#;
+        let parsed: StoragePreferences = serde_json::from_str(raw).expect("old preferences parse");
+        assert_eq!(parsed.save_directory, PathBuf::from("C:/Photos/CapKit"));
+        assert_eq!(parsed.recording_directory, None);
+    }
+}
+
 fn previous_default_save_directory() -> PathBuf {
     dirs::picture_dir()
         .unwrap_or_else(|| std::env::current_dir().unwrap_or_else(|_| PathBuf::from(".")))
diff --git a/apps/desktop/src-tauri/src/services/recording.rs b/apps/desktop/src-tauri/src/services/recording.rs
index bf22820..73832c1 100644
--- a/apps/desktop/src-tauri/src/services/recording.rs
+++ b/apps/desktop/src-tauri/src/services/recording.rs
@@ -11,6 +11,9 @@ use crate::error::SnaphubError;
 use crate::platform::{
     AudioDeviceBackend, RecordingSession, ScreenRecordingBackend, WindowCaptureExclusionBackend,
 };
+use crate::services::capture::{
+    default_recording_directory, load_recording_directory, persist_recording_directory,
+};
 
 /// Owns the one recording that can be in flight at a time.
 ///
@@ -29,7 +32,7 @@ pub struct RecordingService {
     active: Mutex<Option<Box<dyn RecordingSession>>>,
     camera: Mutex<Option<CameraTrack>>,
     camera_dir: Mutex<Option<PathBuf>>,
-    root: PathBuf,
+    root: Mutex<PathBuf>,
 }
 
 impl RecordingService {
@@ -38,6 +41,8 @@ impl RecordingService {
         audio: Arc<dyn AudioDeviceBackend>,
         exclusion: Arc<dyn WindowCaptureExclusionBackend>,
     ) -> Self {
+        let root = load_recording_directory();
+        let _ = std::fs::create_dir_all(&root);
         Self {
             recorder,
             audio,
@@ -45,7 +50,7 @@ impl RecordingService {
             active: Mutex::new(None),
             camera: Mutex::new(None),
             camera_dir: Mutex::new(None),
-            root: recordings_root(),
+            root: Mutex::new(root),
         }
     }
 
@@ -75,7 +80,11 @@ impl RecordingService {
                 "A recording is already in progress".into(),
             ));
         }
-        let directory = self.root.join(session_stamp());
+        let root =
+            self.root.lock().map(|root| root.clone()).map_err(|_| {
+                SnaphubError::Record("The recording location is unavailable".into())
+            })?;
+        let directory = root.join(session_stamp());
         let (session, audio_failures) = self.recorder.start(request, &directory)?;
         *active = Some(session);
         if let Ok(mut camera_dir) = self.camera_dir.lock() {
@@ -183,6 +192,39 @@ impl RecordingService {
         Ok(session.is_paused())
     }
 
+    /// The folder new recordings are saved in. It starts as the Videos
+    /// default and follows whatever the user picks in Settings.
+    pub fn recording_directory(&self) -> Result<PathBuf, SnaphubError> {
+        self.root
+            .lock()
+            .map(|root| root.clone())
+            .map_err(|_| SnaphubError::Record("The recording location is unavailable".into()))
+    }
+
+    pub fn set_recording_directory(&self, directory: PathBuf) -> Result<PathBuf, SnaphubError> {
+        if !directory.is_absolute() {
+            return Err(SnaphubError::Record(
+                "Choose an absolute folder for recordings".into(),
+            ));
+        }
+        std::fs::create_dir_all(&directory)
+            .map_err(|error| SnaphubError::Record(error.to_string()))?;
+        let directory = directory
+            .canonicalize()
+            .map_err(|error| SnaphubError::Record(error.to_string()))?;
+        persist_recording_directory(&directory)?;
+        *self
+            .root
+            .lock()
+            .map_err(|_| SnaphubError::Record("The recording location is unavailable".into()))? =
+            directory.clone();
+        Ok(directory)
+    }
+
+    pub fn reset_recording_directory(&self) -> Result<PathBuf, SnaphubError> {
+        self.set_recording_directory(default_recording_directory())
+    }
+
     pub fn cancel(&self) -> Result<(), SnaphubError> {
         if let Some(session) = self.lock()?.take() {
             session.cancel();
@@ -205,12 +247,6 @@ impl RecordingService {
     }
 }
 
-/// Recordings are large and disposable until exported, so they live beside the
-/// other temporary session data rather than in the user's pictures folder.
-fn recordings_root() -> PathBuf {
-    std::env::temp_dir().join("CapKit").join("recordings")
-}
-
 fn session_stamp() -> String {
     chrono::Local::now().format("%Y-%m-%d-%H%M%S").to_string()
 }
diff --git a/apps/desktop/src/components/dashboard/DashboardPanel.test.tsx b/apps/desktop/src/components/dashboard/DashboardPanel.test.tsx
index 4d86261..abe61c8 100644
--- a/apps/desktop/src/components/dashboard/DashboardPanel.test.tsx
+++ b/apps/desktop/src/components/dashboard/DashboardPanel.test.tsx
@@ -117,7 +117,7 @@ describe("DashboardPanel", () => {
       resets += screen.getAllByRole("button", { name: "Reset this section" }).length;
     }
 
-    expect(resets).toBe(10);
+    expect(resets).toBe(11);
   });
 
   it("provides inline resets for overlay tint and individual shortcuts", () => {
@@ -391,7 +391,7 @@ describe("DashboardPanel", () => {
 
 /** Section titles per tab, in the order each tab shows them. */
 const sectionTitles = {
-  General: ["Open at startup", "Theme accent", "Saved captures"],
+  General: ["Open at startup", "Theme accent", "Saved captures", "Saved recordings"],
   Screenshots: [
     "Choose what stays within reach",
     "Colors & default size",
diff --git a/apps/desktop/src/components/dashboard/RecordView.test.tsx b/apps/desktop/src/components/dashboard/RecordView.test.tsx
index 1f2b258..a641a0d 100644
--- a/apps/desktop/src/components/dashboard/RecordView.test.tsx
+++ b/apps/desktop/src/components/dashboard/RecordView.test.tsx
@@ -92,6 +92,20 @@ describe("RecordView", () => {
     expect(openRecorder).toHaveBeenCalledTimes(1);
   });
 
+  it("shows recordings in a four-column grid on wide windows, like screenshots", () => {
+    render(<RecordView />);
+
+    const list = screen.getByRole("list", { name: "Recordings" });
+    for (const gridClass of [
+      "grid-cols-2",
+      "lg:grid-cols-3",
+      "xl:grid-cols-4",
+      "2xl:grid-cols-5",
+    ]) {
+      expect(list).toHaveClass(gridClass);
+    }
+  });
+
   it("edits a recording in place and returns to the library", async () => {
     render(<RecordView />);
 
diff --git a/apps/desktop/src/components/dashboard/RecordView.tsx b/apps/desktop/src/components/dashboard/RecordView.tsx
index 0a704bf..df45a46 100644
--- a/apps/desktop/src/components/dashboard/RecordView.tsx
+++ b/apps/desktop/src/components/dashboard/RecordView.tsx
@@ -146,7 +146,7 @@ export function RecordView(): React.JSX.Element {
             </div>
           </div>
         ) : (
-          <ul aria-label="Recordings" className="grid grid-cols-2 gap-3 xl:grid-cols-3">
+          <ul aria-label="Recordings" className="grid grid-cols-2 gap-3 lg:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-5">
             {library.map((item) => (
               <li
                 className="overflow-hidden rounded-lg border border-stone-300/80 bg-white/60 dark:border-white/10 dark:bg-white/5"
diff --git a/apps/desktop/src/components/dashboard/SettingsView.tsx b/apps/desktop/src/components/dashboard/SettingsView.tsx
index 71261e2..bf88813 100644
--- a/apps/desktop/src/components/dashboard/SettingsView.tsx
+++ b/apps/desktop/src/components/dashboard/SettingsView.tsx
@@ -30,8 +30,12 @@ import {
 } from "../../domain/settings";
 import {
   describeInvokeError,
+  getRecordingDirectory,
   getSaveDirectory,
+  openRecordingDirectory,
+  resetRecordingDirectory,
   resetSaveDirectory,
+  setRecordingDirectory,
   setSaveDirectory,
   updateGlobalShortcuts,
 } from "../../lib/tauri";
@@ -77,6 +81,7 @@ const settingsTabs = [
 type SettingsSectionId =
   | "startup"
   | "save-location"
+  | "save-recordings"
   | "theme-accent"
   | "capture-toolbar"
   | "colors"
@@ -87,7 +92,7 @@ type SettingsSectionId =
   | "shortcuts";
 
 const settingsSections: Record<SettingsTabId, readonly SettingsSectionId[]> = {
-  general: ["startup", "save-location", "theme-accent"],
+  general: ["startup", "save-location", "save-recordings", "theme-accent"],
   screenshots: ["capture-toolbar", "colors", "detection", "capture-cursor", "scrolling"],
   "screen-draw": ["on-screen-toolbar"],
   shortcuts: ["shortcuts"],
@@ -104,6 +109,7 @@ function defaultOpenSections(): Record<SettingsSectionId, boolean> {
   const open: Record<SettingsSectionId, boolean> = {
     startup: false,
     "save-location": false,
+    "save-recordings": false,
     "theme-accent": false,
     "capture-toolbar": false,
     colors: false,
@@ -128,6 +134,9 @@ export function SettingsView(): React.JSX.Element {
   const [saveDirectory, setSaveDirectoryState] = useState("Pictures\\Capkit");
   const [storageMessage, setStorageMessage] = useState<string | null>(null);
   const [choosingDirectory, setChoosingDirectory] = useState(false);
+  const [recordingDirectory, setRecordingDirectoryState] = useState("Videos\\Capkit");
+  const [recordingMessage, setRecordingMessage] = useState<string | null>(null);
+  const [choosingRecordingDirectory, setChoosingRecordingDirectory] = useState(false);
   const [activeTab, setActiveTab] = useState<SettingsTabId>("general");
   const [openSections, setOpenSections] = useState<Record<SettingsSectionId, boolean>>(defaultOpenSections);
 
@@ -135,6 +144,11 @@ export function SettingsView(): React.JSX.Element {
     void getSaveDirectory()
       .then(setSaveDirectoryState)
       .catch((error: unknown) => setStorageMessage(describeInvokeError(error, "Save location could not be loaded")));
+    void getRecordingDirectory()
+      .then(setRecordingDirectoryState)
+      .catch((error: unknown) =>
+        setRecordingMessage(describeInvokeError(error, "Recordings location could not be loaded")),
+      );
   }, []);
 
   useEffect(() => {
@@ -423,6 +437,49 @@ export function SettingsView(): React.JSX.Element {
     }
   }
 
+  async function chooseRecordingDirectory(): Promise<void> {
+    if (!isTauri()) {
+      setRecordingMessage("Folder selection is available in the Windows desktop app");
+      return;
+    }
+    setChoosingRecordingDirectory(true);
+    setRecordingMessage(null);
+    try {
+      const selected = await open({
+        defaultPath: recordingDirectory,
+        directory: true,
+        multiple: false,
+        title: "Choose where Capkit saves recordings",
+      });
+      if (typeof selected !== "string") return;
+      const directory = await setRecordingDirectory(selected);
+      setRecordingDirectoryState(directory);
+      setRecordingMessage("New recordings will save here automatically");
+    } catch (error: unknown) {
+      setRecordingMessage(describeInvokeError(error, "Recordings location could not be changed"));
+    } finally {
+      setChoosingRecordingDirectory(false);
+    }
+  }
+
+  async function openRecordingsFolder(): Promise<void> {
+    try {
+      await openRecordingDirectory();
+    } catch (error: unknown) {
+      setRecordingMessage(describeInvokeError(error, "Recordings folder could not be opened"));
+    }
+  }
+
+  async function resetRecordings(): Promise<void> {
+    try {
+      const directory = await resetRecordingDirectory();
+      setRecordingDirectoryState(directory);
+      setRecordingMessage("Recordings location reset");
+    } catch (error: unknown) {
+      setRecordingMessage(describeInvokeError(error, "Recordings location could not be reset"));
+    }
+  }
+
   return (
     <div className="mx-auto max-w-[960px] px-7 pb-12 pt-7">
       <header className="mb-6 flex items-end justify-between border-b border-stone-300/80 pb-5 dark:border-white/10">
@@ -457,6 +514,19 @@ export function SettingsView(): React.JSX.Element {
             {storageMessage === null ? null : <p aria-live="polite" className="mt-2 text-[12px] text-stone-500 dark:text-stone-400">{storageMessage}</p>}
             <SectionReset onClick={() => void resetStorage()} />
           </SettingsSection>
+          <SettingsSection id="save-recordings" onToggle={toggleSection} open={openSections["save-recordings"]} icon={FolderCog} eyebrow="Storage" title="Saved recordings" description="Where new screen recordings are saved.">
+            <div className="flex items-center gap-3 rounded-lg border border-stone-200 bg-white px-3 py-3 dark:border-white/10 dark:bg-[#2b2c29]">
+              <span className="grid size-8 shrink-0 place-items-center rounded-md bg-stone-100 text-stone-500 dark:bg-white/6 dark:text-stone-400"><FolderOpen aria-hidden="true" size={15} /></span>
+              <div className="min-w-0 flex-1">
+                <p className="text-[12px] font-semibold text-stone-800 dark:text-stone-200">Default recordings location</p>
+                <p className="mt-0.5 truncate font-mono text-[11px] text-stone-500 dark:text-stone-400" title={recordingDirectory}>{recordingDirectory}</p>
+              </div>
+              <button aria-label="Choose default recordings location" className="shrink-0 rounded-md border border-stone-300 bg-stone-50 px-3 py-1.5 text-[12px] font-semibold text-stone-700 outline-none transition hover:border-stone-500 focus-visible:ring-2 focus-visible:ring-[var(--snaphub-accent)] disabled:cursor-wait disabled:opacity-60 dark:border-white/10 dark:bg-[#333431] dark:text-stone-300 dark:hover:border-white/20" disabled={choosingRecordingDirectory} type="button" onClick={() => void chooseRecordingDirectory()}>{choosingRecordingDirectory ? "Opening…" : "Choose folder"}</button>
+              <button aria-label="Open recordings folder" className="shrink-0 rounded-md border border-stone-300 bg-stone-50 px-3 py-1.5 text-[12px] font-semibold text-stone-700 outline-none transition hover:border-stone-500 focus-visible:ring-2 focus-visible:ring-[var(--snaphub-accent)] dark:border-white/10 dark:bg-[#333431] dark:text-stone-300 dark:hover:border-white/20" type="button" onClick={() => void openRecordingsFolder()}>Open folder</button>
+            </div>
+            {recordingMessage === null ? null : <p aria-live="polite" className="mt-2 text-[12px] text-stone-500 dark:text-stone-400">{recordingMessage}</p>}
+            <SectionReset onClick={() => void resetRecordings()} />
+          </SettingsSection>
           </>
         ) : activeTab === "screenshots" ? (
           <>
diff --git a/apps/desktop/src/lib/tauri.ts b/apps/desktop/src/lib/tauri.ts
index 1accb1a..2d873c7 100644
--- a/apps/desktop/src/lib/tauri.ts
+++ b/apps/desktop/src/lib/tauri.ts
@@ -295,6 +295,29 @@ export async function openSaveDirectory(): Promise<void> {
   await invoke("open_save_directory");
 }
 
+export async function getRecordingDirectory(): Promise<string> {
+  if (!isTauri()) return "Videos\\Capkit";
+  const raw: unknown = await invoke("get_recording_directory");
+  return z.string().min(1).parse(raw);
+}
+
+export async function setRecordingDirectory(directory: string): Promise<string> {
+  if (!isTauri()) return directory;
+  const raw: unknown = await invoke("set_recording_directory", { directory });
+  return z.string().min(1).parse(raw);
+}
+
+export async function resetRecordingDirectory(): Promise<string> {
+  if (!isTauri()) return "Videos\\Capkit";
+  const raw: unknown = await invoke("reset_recording_directory");
+  return z.string().min(1).parse(raw);
+}
+
+export async function openRecordingDirectory(): Promise<void> {
+  if (!isTauri()) return;
+  await invoke("open_recording_directory");
+}
+
 export async function openSavedCapture(path: string): Promise<void> {
   if (!isTauri()) return;
   await invoke("open_saved_capture", { path });

From c1bae3ac1941553e4d51791f7c10c1a99f4ebc6d Mon Sep 17 00:00:00 2001
From: Nakul Srivastava <imnakul44@gmail.com>
Date: Mon, 28 Sep 2026 16:50:47 +0530
Subject: [PATCH 7/9] docs(0.3.0): correct the camera track status and record
 the release notes

Camera, native frame rate and the recordings folder are now described
as built. Decisions cover the CSP media-src widening, the H.264 level
cap and the camera handshake timeout, with user-facing notes for 0.3.0.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 CHANGELOG-PUBLIC.md     | 18 ++++++++++++++++++
 README.md               |  4 +++-
 docs/current-status.md  |  8 ++++----
 docs/feature-roadmap.md |  4 +++-
 docs/local-features.md  |  5 +++--
 5 files changed, 31 insertions(+), 8 deletions(-)

diff --git a/CHANGELOG-PUBLIC.md b/CHANGELOG-PUBLIC.md
index 825089b..a5e5d48 100644
--- a/CHANGELOG-PUBLIC.md
+++ b/CHANGELOG-PUBLIC.md
@@ -2,6 +2,24 @@
 
 User-facing changes only, grouped by date under Added / Improved / Fixed.
 
+## 0.3.0 — 2026-09-28
+
+### Fixed
+
+- Recordings play back with their real duration, in the Record list and in Studio.
+- The camera bubble closes when recording stops or is discarded, clips cleanly to its circle, rounded or square shape, and drags anywhere.
+
+### Added
+
+- The camera records as its own track: move it freely in Studio, toggle it, and keep it in MP4 and GIF exports.
+- Native frame rate: record at your monitor's refresh rate on fast displays.
+- Recordings save to Videos\CapKit, changeable with choose, open and reset in Settings.
+- The recorder is a single draggable row that stays where you put it.
+
+### Improved
+
+- The Recordings grid shows four columns on wide windows, like Screenshots.
+
 ## 0.2.1 — 2026-09-28
 
 ### Fixed
diff --git a/README.md b/README.md
index c2e2657..d93539c 100644
--- a/README.md
+++ b/README.md
@@ -88,8 +88,10 @@ The selected area becomes the editor. Tools appear right beside it.
 
 - Record a display, a single window, or an area you draw.
 - Choose your microphone and speaker. The recording controls stay out of the video.
+- Native frame rate up to your monitor's refresh rate.
 - The cursor is recorded as its own track, so the editor can smooth it and zoom in automatically on clicks.
-- Trim, add a webcam bubble, apply a Showcase look, and export to MP4 or GIF.
+- Record your webcam as its own track, then move and shape it in the editor.
+- Trim, apply a Showcase look, and export to MP4 or GIF.
 
 ### Showcase
 
diff --git a/docs/current-status.md b/docs/current-status.md
index d22f7fc..c07547d 100644
--- a/docs/current-status.md
+++ b/docs/current-status.md
@@ -84,10 +84,10 @@ This document records what exists in the runtime today. The roadmap remains the
 - **Phase 2:** Combined image editor and visual asset Studio.
 - **Phase 3:** Full local-library metadata, organization, tags, search, retention controls, and folder watching. The current dashboard is deliberately a lightweight on-demand view of the configured save directory, not this full library.
 - **Phase 4:** Accounts, Cloudflare R2 storage, share URLs, view analytics, quotas, and billing.
-- **Implemented, frame-by-frame validation pending:** Screen recording. Display, window, and drawn-region sources (the region overlay asks for an area per session and never persists it); countdown; a content-sized floating dock excluded from the video through `WDA_EXCLUDEFROMCAPTURE`; H.264 through the Media Foundation sink writer with no CPU-side frame copy; system-audio and microphone AAC sidecars with per-device selection and fallback warnings; and a 250 Hz cursor and click track written alongside every recording. The recordings list overlays the cursor track on the letterboxed video. Verified by three ignored-by-default integration tests that need an interactive desktop; run them with `cargo test -- --ignored`.
-- **Implemented:** The camera window grants access on the dock click through WebView2 and clears a persisted deny, with a centred recovery panel (settings link, retry, close) when Windows blocks access or no camera exists.
-- **Implemented, manual export validation pending:** The video Studio. Non-destructive trim, the Showcase treatment applied to video (background/padding/radius/shadow/effects via a shared `scene.ts`), cursor smoothing and automatic zoom-on-click (a `src/domain/zoomKeyframes.ts` keyframe track, mergeable with manual overrides), a mirrored circle/square/rounded webcam track excluded from screen capture, pause/resume that omits paused time from the output, and MP4 (WebCodecs + `mp4-muxer`) or GIF (hand-written encoder) export.
-  - Verified by automated tests: 176 frontend tests including GIF byte-format correctness (signature, trailer, loop extension, declared dimensions) and compositor draw-order/gating logic against a fake Canvas2D context.
+- **Implemented, frame-by-frame validation pending:** Screen recording. Display, window, and drawn-region sources (the region overlay asks for an area per session and never persists it); countdown; a single-row floating dock that can be dragged by its grip and keeps its position (excluded from the video through `WDA_EXCLUDEFROMCAPTURE`); H.264 through the Media Foundation sink writer with no CPU-side frame copy; 24/30/60 fps plus a Native rate that follows the display's refresh rate (floored at 60, capped by the H.264 level 5.2 macroblock rate) with bitrate scaling to match; system-audio and microphone AAC sidecars with per-device selection and fallback warnings; and a 250 Hz cursor and click track written alongside every recording. New installs save under `Videos\CapKit` (configurable in Settings; the asset scope follows the folder across restarts). The recordings list overlays the cursor track on the letterboxed video and plays through the asset protocol. Verified by three ignored-by-default integration tests that need an interactive desktop; run them with `cargo test -- --ignored`.
+- **Implemented:** The camera window grants access on the dock click through WebView2 and clears a persisted deny, with a centred recovery panel (settings link, retry, close) when Windows blocks access or no camera exists. It closes with the recorder, clips the video to its circle/rounded/square shape, and can be dragged by the video itself.
+- **Implemented, manual export validation pending:** The video Studio. Non-destructive trim, the Showcase treatment applied to video (background/padding/radius/shadow/effects via a shared `scene.ts`), cursor smoothing and automatic zoom-on-click (a `src/domain/zoomKeyframes.ts` keyframe track, mergeable with manual overrides), the camera as its own recorded track (`camera.mp4`, `webm` fallback) placed by corner or free drag, kept in step with the screen video within 150 ms, and included in MP4 and GIF exports (recordings without one show an empty Camera state), pause/resume that omits paused time from the output, and MP4 (WebCodecs + `mp4-muxer`) or GIF (hand-written encoder) export.
+  - Verified by automated tests: 318 frontend tests including GIF byte-format correctness (signature, trailer, loop extension, declared dimensions) and compositor draw-order/gating logic against a fake Canvas2D context.
   - **Not yet verified:** encoding a real recording through `VideoEncoder` inside the packaged app's WebView2. Manual steps: Record a short clip -> Studio -> trim, apply a look, confirm zoom keyframes appear on clicks -> Export MP4 -> confirm it opens in Windows Media Player/PowerPoint/Chrome at the declared resolution with audio in sync -> Export GIF -> confirm it animates and loops.
 - **Think Later:** OCR area capture, QR-code detection, color detection, AI, and collaboration.
 
diff --git a/docs/feature-roadmap.md b/docs/feature-roadmap.md
index db08894..bd6ad48 100644
--- a/docs/feature-roadmap.md
+++ b/docs/feature-roadmap.md
@@ -70,7 +70,9 @@ The Phase 1 dashboard's on-demand view of the configured save folder is a conven
 - A cursor and click metadata track recorded alongside the video, which cannot be reconstructed afterwards
 - Smooth interpolated cursor motion and automatic zoom on click, editable as keyframes
 - The Showcase treatment applied to video: background, padding, corner radius, and shadow
-- Webcam as a separate track, croppable to circle, square, or rounded shapes
+- Webcam as a separate track, croppable to circle, square, or rounded shapes, freely placeable in Studio and included in exports
+- Native frame rate following the display's refresh rate, capped by the H.264 level 5.2 macroblock rate
+- Recordings saved under `Videos\CapKit`, configurable in Settings
 - MP4 and GIF export
 
 ## Think Later
diff --git a/docs/local-features.md b/docs/local-features.md
index d730bda..21e4449 100644
--- a/docs/local-features.md
+++ b/docs/local-features.md
@@ -90,8 +90,9 @@ The editor is in-place: the selected pixels remain the immutable source while an
 ## Recording and Studio
 
 - **Implemented:** Display, window, and region recording sources.
-- **Implemented:** Countdown, floating dock exclusion from the recording, H.264 Media Foundation capture, system-audio and microphone AAC sidecars, cursor/click track, pause/resume, and recording status.
-- **Implemented:** Studio trim, shared Showcase treatment, cursor smoothing, automatic zoom-on-click keyframes, webcam circle/square/rounded track, MP4 WebCodecs export, and GIF export.
+- **Implemented:** Countdown, single-row draggable floating dock exclusion from the recording, H.264 Media Foundation capture, 24/30/60 fps plus a Native rate following the display refresh rate, system-audio and microphone AAC sidecars, cursor/click track, pause/resume, and recording status.
+- **Implemented:** Studio trim, shared Showcase treatment, cursor smoothing, automatic zoom-on-click keyframes, webcam recorded as its own circle/square/rounded track with free placement, MP4 WebCodecs export, and GIF export.
+- **Implemented:** Recordings save under `Videos\CapKit` by default, configurable with choose/open/reset in Settings.
 - **Partial:** Packaged WebView2 `VideoEncoder` availability and real export playback/audio-sync acceptance remain manual checks.
 
 ## Settings and shortcuts

From 77bb6358e917f5d3953c3207f31f38c05360634d Mon Sep 17 00:00:00 2001
From: Nakul Srivastava <imnakul44@gmail.com>
Date: Mon, 28 Sep 2026 16:52:09 +0530
Subject: [PATCH 8/9] docs(0.3.0): record the asset media-src, frame-rate cap
 and camera handshake decisions

---
 docs/decision-log.md | 19 +++++++++++++++++++
 1 file changed, 19 insertions(+)

diff --git a/docs/decision-log.md b/docs/decision-log.md
index 649dac5..4c5b190 100644
--- a/docs/decision-log.md
+++ b/docs/decision-log.md
@@ -1,5 +1,24 @@
 # Decision Log
 
+## 2026-09-28 - Recordings play from the asset protocol via a narrow media-src
+
+- **Confirmed:** the CSP gains `media-src 'self' asset: http://asset.localhost blob:` and nothing else, so `<video>` loads recordings from `convertFileSrc` URLs on Windows while images keep working through `img-src`. A config test pins the directive.
+- **Rejected:** widening `default-src`, which would loosen every other content type too.
+- **Rationale:** without `media-src`, video falls back to `default-src`, which lacks `http://asset.localhost`, and every recording shows 0:00. This also unblocks the Studio source video, preview, and export.
+
+## 2026-09-28 - Native frame rate is capped by the H.264 level 5.2 macroblock rate
+
+- **Confirmed:** the requested fps is clamped to `floor(2_073_600 / (ceil(w/16) * ceil(h/16)))` before the encoder is created, so 1080p can record at 144 Hz while 4K stays near 60; the bitrate scales by `max(1.0, fps / 60)` up to 80 Mbps. The Record list shows the real fps.
+- **Rejected:** a fixed 120 fps option, which would lengthen the Quality menu for little benefit; uncapped native, which fails the sink writer at high resolutions.
+- **Rationale:** a fixed 144 fps request at 4K exceeds what H.264 level 5.2 allows; capping keeps one Native option that always produces a playable file.
+
+## 2026-09-28 - Camera Stop handshake waits up to 3 s and never fails
+
+- **Confirmed:** on Stop the dock emits `snaphub://camera-track-finish` and waits for `snaphub://camera-track-finished` or 3000 ms, whichever comes first; a timeout is not an error and the track keeps whatever 1 s chunks were flushed. A failed chunk append stops the MediaRecorder and leaves the preview running.
+- **Rejected:** blocking Stop indefinitely on a stuck camera webview; skipping the wait and losing the tail second.
+- **Rationale:** the camera records in the camera webview with MediaRecorder, so Stop must flush the tail before the backend closes the file; hanging Stop forever is worse than a track missing its last second.
+- **Provisional:** camera/screen start offset of up to about 150 ms is accepted; there is no frame-accurate sync.
+
 ## 2026-09-26 - Pinned images move by a drag handle; click-through removed
 
 - **Confirmed:** Pinned images are moved via a drag handle in their corner, supporting pointer drag and keyboard nudges with arrow keys (10 physical px, or 50 with Shift).

From 5be93cfd622d5299d317a0fc4de65d8a09217e79 Mon Sep 17 00:00:00 2001
From: Nakul Srivastava <imnakul44@gmail.com>
Date: Mon, 28 Sep 2026 16:52:21 +0530
Subject: [PATCH 9/9] chore(release): v0.3.0

---
 apps/desktop/package.json              | 2 +-
 apps/desktop/src-tauri/Cargo.lock      | 2 +-
 apps/desktop/src-tauri/Cargo.toml      | 2 +-
 apps/desktop/src-tauri/tauri.conf.json | 2 +-
 package.json                           | 2 +-
 5 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/apps/desktop/package.json b/apps/desktop/package.json
index d911cb2..bb92a85 100644
--- a/apps/desktop/package.json
+++ b/apps/desktop/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@snaphub/desktop",
-  "version": "0.2.1",
+  "version": "0.3.0",
   "private": true,
   "type": "module",
   "scripts": {
diff --git a/apps/desktop/src-tauri/Cargo.lock b/apps/desktop/src-tauri/Cargo.lock
index d62d37b..c8930cd 100644
--- a/apps/desktop/src-tauri/Cargo.lock
+++ b/apps/desktop/src-tauri/Cargo.lock
@@ -604,7 +604,7 @@ dependencies = [
 
 [[package]]
 name = "capkit-desktop"
-version = "0.2.1"
+version = "0.3.0"
 dependencies = [
  "ab_glyph",
  "arboard",
diff --git a/apps/desktop/src-tauri/Cargo.toml b/apps/desktop/src-tauri/Cargo.toml
index 1b7e251..2541e52 100644
--- a/apps/desktop/src-tauri/Cargo.toml
+++ b/apps/desktop/src-tauri/Cargo.toml
@@ -1,6 +1,6 @@
 [package]
 name = "capkit-desktop"
-version = "0.2.1"
+version = "0.3.0"
 description = "CapKit lightweight desktop toolkit to capture, record, and showcase"
 authors = ["CapKit"]
 edition = "2024"
diff --git a/apps/desktop/src-tauri/tauri.conf.json b/apps/desktop/src-tauri/tauri.conf.json
index 0b41999..89021b0 100644
--- a/apps/desktop/src-tauri/tauri.conf.json
+++ b/apps/desktop/src-tauri/tauri.conf.json
@@ -1,7 +1,7 @@
 {
   "$schema": "https://schema.tauri.app/config/2",
   "productName": "CapKit",
-  "version": "0.2.1",
+  "version": "0.3.0",
   "identifier": "com.snaphub.desktop",
   "build": {
     "beforeDevCommand": "pnpm dev",
diff --git a/package.json b/package.json
index 1bb5805..0926edf 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "snaphub",
-  "version": "0.2.1",
+  "version": "0.3.0",
   "private": true,
   "packageManager": "pnpm@11.14.0",
   "scripts": {