+ {/* Status indicator */}
+
+ {isRecording && (
+
+
+
+
+ )}
+ {isPaused && }
+ {statusLabel}
+
+
+ {/* Timer */}
+ {isActive && (
+
+
{formattedTime}
+
+ {snapshotCount} snapshot{snapshotCount !== 1 ? "s" : ""} captured
+
+
+ )}
+
+ {/* Controls */}
+ {isActive && (
+
+ {isRecording ? (
+
+ ) : (
+
+ )}
+
+
+
+ )}
+
+ );
+}
diff --git a/apps/desktop/src/renderer/components/SourcePicker.tsx b/apps/desktop/src/renderer/components/SourcePicker.tsx
new file mode 100644
index 0000000..be1d63a
--- /dev/null
+++ b/apps/desktop/src/renderer/components/SourcePicker.tsx
@@ -0,0 +1,114 @@
+import { useState, useEffect } from "react";
+import { lapse } from "../lib/desktop";
+import type { DesktopSource } from "@/shared/ipc-channels";
+
+interface SourcePickerProps {
+ selectedId: string | null;
+ onSelect: (source: DesktopSource) => void;
+}
+
+export function SourcePicker({ selectedId, onSelect }: SourcePickerProps) {
+ const [sources, setSources] = useState