feat(editor): add Cap recording import for timeline stitching (#1712)

Implements the recording import feature from issue #1712. Users can now
import additional Cap recordings into the editor — imported recordings
are appended to the timeline and stitched together on export.

Changes:
- ExternalRecordingReference struct in project config
- ProjectRecordingsMeta::new_with_external() loads primary + external segments
- create_all_segments() in editor builds unified segment list
- import_cap_recording Tauri command: validates resolution match, prevents
  duplicate imports, computes correct clip index offsets, appends timeline segments
- Export and preview pipelines updated to pass external_recordings through
- Timeline UI: "Import recording" button with folder picker + reload on success

⚠️ Not locally tested — macOS Sequoia TCC blocks ScreenCaptureKit on
unsigned dev binaries, preventing the app from recording. Build passes
(cargo build + pnpm typecheck clean). Needs testing on a signed build
or by a reviewer with a valid dev certificate.

Known limitations:
- External recording paths stored as absolute strings (breaks if folder is moved)
- window.location.reload() on import (loses unsaved editor state)

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

Author: MinitJain

apps/desktop/src-tauri/src/export.rs

@@ -327,7 +327,7 @@ pub async fn generate_export_preview(
     settings: ExportPreviewSettings,
 ) -> Result<ExportPreviewResult, String> {
     use base64::{Engine, engine::general_purpose::STANDARD};
-    use cap_editor::create_segments;
+    use cap_editor::create_all_segments;
     use std::time::Instant;
 
     let recording_meta = RecordingMeta::load_for_project(&project_path)
@@ -337,12 +337,16 @@ pub async fn generate_export_preview(
         return Err("Cannot preview non-studio recordings".to_string());
     };
 
-    let project_config =
-        export_project_config(recording_meta.project_config(), settings.cursor_only);
+    let source_project_config = recording_meta.project_config();
+    let project_config = export_project_config(source_project_config.clone(), settings.cursor_only);
 
     let recordings = Arc::new(
-        ProjectRecordingsMeta::new(&recording_meta.project_path, studio_meta)
-            .map_err(|e| format!("Failed to load recordings: {e}"))?,
+        ProjectRecordingsMeta::new_with_external(
+            &recording_meta.project_path,
+            studio_meta,
+            &source_project_config.external_recordings,
+        )
+        .map_err(|e| format!("Failed to load recordings: {e}"))?,
     );
 
     let render_constants = Arc::new(
@@ -355,9 +359,14 @@ pub async fn generate_export_preview(
         .map_err(|e| format!("Failed to create render constants: {e}"))?,
     );
 
-    let segments = create_segments(&recording_meta, studio_meta, false)
-        .await
-        .map_err(|e| format!("Failed to create segments: {e}"))?;
+    let segments = create_all_segments(
+        &recording_meta,
+        studio_meta,
+        &source_project_config.external_recordings,
+        false,
+    )
+    .await
+    .map_err(|e| format!("Failed to create segments: {e}"))?;
 
     let render_segments: Vec<RenderSegment> = segments
         .iter()

apps/desktop/src-tauri/src/lib.rs

@@ -2078,6 +2078,137 @@ async fn get_editor_project_path(window: Window) -> Result<PathBuf, String> {
     Ok(path.clone())
 }
 
+#[derive(Serialize, Type, tauri_specta::Event, Clone, Debug)]
+pub struct CapRecordingImported {
+    pub project_path: String,
+}
+
+#[tauri::command]
+#[specta::specta]
+async fn import_cap_recording(window: Window, recording_path: PathBuf) -> Result<(), String> {
+    let CapWindowId::Editor { id } =
+        CapWindowId::from_str(window.label()).map_err(|e| e.to_string())?
+    else {
+        return Err("Invalid window".to_string());
+    };
+
+    let project_path = {
+        let window_ids = EditorWindowIds::get(window.app_handle());
+        let window_ids = window_ids.ids.lock().unwrap();
+        let Some((path, _)) = window_ids.iter().find(|(_, _id)| *_id == id) else {
+            return Err("Editor instance not found".to_string());
+        };
+        path.clone()
+    };
+
+    if !recording_path.exists() || !recording_path.join("recording-meta.json").exists() {
+        return Err("Not a valid Cap recording".to_string());
+    }
+
+    let ext_meta = RecordingMeta::load_for_project(&recording_path)
+        .map_err(|e| format!("Failed to load recording meta: {e}"))?;
+    let RecordingMetaInner::Studio(ext_studio_meta) = &ext_meta.inner else {
+        return Err("External recording is not a studio recording".to_string());
+    };
+
+    let primary_meta = RecordingMeta::load_for_project(&project_path)
+        .map_err(|e| format!("Failed to load project meta: {e}"))?;
+    let RecordingMetaInner::Studio(primary_studio_meta) = &primary_meta.inner else {
+        return Err("Project is not a studio recording".to_string());
+    };
+
+    let primary_recordings =
+        cap_rendering::ProjectRecordingsMeta::new(&primary_meta.project_path, primary_studio_meta)
+            .map_err(|e| format!("Failed to load primary recordings: {e}"))?;
+    let ext_recordings =
+        cap_rendering::ProjectRecordingsMeta::new(&recording_path, ext_studio_meta)
+            .map_err(|e| format!("Failed to load external recordings: {e}"))?;
+
+    if let (Some(primary_first), Some(ext_first)) = (
+        primary_recordings.segments.first(),
+        ext_recordings.segments.first(),
+    ) {
+        if ext_first.display.width != primary_first.display.width
+            || ext_first.display.height != primary_first.display.height
+        {
+            return Err(format!(
+                "Recording resolution {}x{} does not match project resolution {}x{}",
+                ext_first.display.width,
+                ext_first.display.height,
+                primary_first.display.width,
+                primary_first.display.height,
+            ));
+        }
+    }
+
+    let mut project_config = ProjectConfiguration::load(&project_path)
+        .map_err(|e| format!("Failed to load project config: {e}"))?;
+
+    if project_config
+        .external_recordings
+        .iter()
+        .any(|r| std::path::Path::new(&r.path) == recording_path)
+    {
+        return Err("This recording has already been imported".to_string());
+    }
+
+    let clip_index_offset = (primary_recordings.segments.len()
+        + project_config
+            .external_recordings
+            .iter()
+            .map(|r| {
+                let p = std::path::PathBuf::from(&r.path);
+                RecordingMeta::load_for_project(&p)
+                    .ok()
+                    .and_then(|m| {
+                        m.studio_meta().map(|s| match s {
+                            cap_project::StudioRecordingMeta::SingleSegment { .. } => 1usize,
+                            cap_project::StudioRecordingMeta::MultipleSegments { inner } => {
+                                inner.segments.len()
+                            }
+                        })
+                    })
+                    .unwrap_or(0)
+            })
+            .sum::<usize>()) as u32;
+
+    let label = ext_meta.pretty_name.clone();
+
+    project_config
+        .external_recordings
+        .push(cap_project::ExternalRecordingReference {
+            path: recording_path.to_string_lossy().to_string(),
+            label: Some(label),
+        });
+
+    let timeline = project_config.timeline.get_or_insert_with(Default::default);
+
+    let ext_segment_count = ext_recordings.segments.len();
+    for i in 0..ext_segment_count {
+        let duration = ext_recordings.segments[i].duration();
+        timeline.segments.push(cap_project::TimelineSegment {
+            recording_clip: clip_index_offset + i as u32,
+            start: 0.0,
+            end: duration,
+            timescale: 1.0,
+        });
+    }
+
+    project_config
+        .write(&project_path)
+        .map_err(|e| format!("Failed to save project config: {e}"))?;
+
+    EditorInstances::remove(window.clone()).await;
+
+    CapRecordingImported {
+        project_path: project_path.to_string_lossy().to_string(),
+    }
+    .emit(&window)
+    .map_err(|e| format!("Failed to emit event: {e}"))?;
+
+    Ok(())
+}
+
 #[tauri::command]
 #[specta::specta]
 #[instrument(skip(editor))]
@@ -3355,6 +3486,7 @@ pub async fn run(recording_logging_handle: LoggingHandle, logs_dir: PathBuf) {
             export::generate_export_preview_fast,
             import::start_video_import,
             import::check_import_ready,
+            import_cap_recording,
             copy_file_to_path,
             copy_video_to_clipboard,
             copy_screenshot_to_clipboard,
@@ -3461,6 +3593,7 @@ pub async fn run(recording_logging_handle: LoggingHandle, logs_dir: PathBuf) {
             hotkeys::OnEscapePress,
             upload::UploadProgressEvent,
             import::VideoImportProgress,
+            CapRecordingImported,
             SetCaptureAreaPending,
             DevicesUpdated,
         ])

apps/desktop/src/routes/editor/Timeline/ClipTrack.tsx

@@ -6,7 +6,6 @@ import { cx } from "cva";
 import {
 	batch,
 	type ComponentProps,
-	batch,
 	createEffect,
 	createMemo,
 	createRoot,

apps/desktop/src/routes/editor/Timeline/index.tsx

@@ -2,6 +2,7 @@ import { createElementBounds } from "@solid-primitives/bounds";
 import { createEventListener } from "@solid-primitives/event-listener";
 import { LogicalPosition } from "@tauri-apps/api/dpi";
 import { Menu, MenuItem } from "@tauri-apps/api/menu";
+import { open as openDialog } from "@tauri-apps/plugin-dialog";
 import { platform } from "@tauri-apps/plugin-os";
 import { cx } from "cva";
 import {
@@ -25,7 +26,7 @@ import "./styles.css";
 import Tooltip from "~/components/Tooltip";
 import { defaultCaptionSettings } from "~/store/captions";
 import { defaultKeyboardSettings } from "~/store/keyboard";
-import { commands } from "~/utils/tauri";
+import { commands, events } from "~/utils/tauri";
 import {
 	applyCaptionResultToProject,
 	getCaptionGenerationErrorMessage,
@@ -722,6 +723,35 @@ export function Timeline(props: {
 		}
 	};
 
+	const [isImporting, setIsImporting] = createSignal(false);
+
+	const handleImportCapRecording = async () => {
+		const selected = await openDialog({
+			directory: true,
+			title: "Select a Cap Recording to Import",
+			filters: [{ name: "Cap Recording", extensions: ["cap"] }],
+		});
+		if (!selected || typeof selected !== "string") return;
+		if (!selected.endsWith(".cap")) {
+			toast.error("Please select a .cap recording folder");
+			return;
+		}
+		setIsImporting(true);
+		try {
+			await commands.importCapRecording(selected);
+		} catch (e) {
+			toast.error(String(e));
+			setIsImporting(false);
+		}
+	};
+
+	const importedListenerPromise = events.capRecordingImported.listen(() => {
+		window.location.reload();
+	});
+	onCleanup(() => {
+		importedListenerPromise.then((unlisten) => unlisten());
+	});
+
 	const split = () => editorState.timeline.interactMode === "split";
 
 	const maskImage = () => {
@@ -840,14 +870,29 @@ export function Timeline(props: {
 					<div class="absolute inset-0 flex items-end">
 						<TimelineMarkings />
 					</div>
-					<div class="absolute bottom-0 z-30">
+					<div class="absolute bottom-0 z-30 flex items-center gap-2">
 						<Tooltip content="Add track">
 							<TrackManager
 								options={trackOptions()}
 								onToggle={handleToggleTrack}
 								onAdd={handleAddTrack}
 							/>
 						</Tooltip>
+						<Tooltip content="Import Cap recording">
+							<button
+								class="flex items-center gap-1.5 px-3 py-1.5 rounded-xl bg-blue-500 text-white text-xs font-medium disabled:opacity-50"
+								onClick={handleImportCapRecording}
+								disabled={isImporting()}
+							>
+								<Show
+									when={isImporting()}
+									fallback={<IconLucidePlus class="size-3" />}
+								>
+									<IconLucideLoader2 class="size-3 animate-spin" />
+								</Show>
+								Import recording
+							</button>
+						</Tooltip>
 					</div>
 				</div>
 				<Show when={!editorState.playing && editorState.previewTime}>
@@ -908,7 +953,9 @@ export function Timeline(props: {
 						}}
 					>
 						<div class="flex flex-col gap-2 min-h-full">
-							<TrackRow icon={trackIcons.clip}>
+							<TrackRow
+								icon={trackIcons.clip}
+							>
 								<ClipTrack
 									ref={setTimelineRef}
 									handleUpdatePlayhead={handleUpdatePlayhead}
@@ -998,6 +1045,19 @@ export function Timeline(props: {
 									/>
 								</TrackRow>
 							</Show>
+							<button
+								class="flex items-center gap-1.5 px-3 py-2 mt-1 rounded-xl bg-blue-500 text-white text-xs font-medium disabled:opacity-50 self-start"
+								onClick={handleImportCapRecording}
+								disabled={isImporting()}
+							>
+								<Show
+									when={isImporting()}
+									fallback={<IconLucidePlus class="size-3" />}
+								>
+									<IconLucideLoader2 class="size-3 animate-spin" />
+								</Show>
+								Import recording
+							</button>
 						</div>
 					</div>
 				</div>
@@ -1011,6 +1071,8 @@ function TrackRow(props: {
 	children: JSX.Element;
 	onDelete?: () => void;
 	onContextMenu?: (e: MouseEvent) => void;
+	onImport?: () => void;
+	importing?: boolean;
 }) {
 	return (
 		<div
@@ -1039,6 +1101,25 @@ function TrackRow(props: {
 						<IconCapTrash class="size-4" />
 					</button>
 				</Show>
+				<Show when={props.onImport}>
+					<button
+						class="absolute inset-0 z-20 flex items-center justify-center rounded-xl border border-blue-400/70 bg-blue-500/90 text-white disabled:opacity-50"
+						onClick={(e) => {
+							e.stopPropagation();
+							props.onImport?.();
+						}}
+						onMouseDown={(e) => e.stopPropagation()}
+						disabled={props.importing}
+						title="Import Cap recording"
+					>
+						<Show
+							when={props.importing}
+							fallback={<IconLucidePlus class="size-4" />}
+						>
+							<IconLucideLoader2 class="size-4 animate-spin" />
+						</Show>
+					</button>
+				</Show>
 			</div>
 			<div class="flex-1 relative overflow-hidden min-w-0">
 				{props.children}