show overlay during screen recording

js/src/features/compose/compose-overlay.tsx

@@ -508,6 +508,30 @@ export function ComposeOverlay({
           objectFit="cover"
         />
       )}
+      {step === "recording" && recordingSource === "screen" && (
+        <div className="absolute inset-0 z-50 flex flex-col items-center justify-center bg-black/90">
+          <div className="absolute top-8 z-10">
+            <div className="flex items-center gap-2">
+              <span className="h-2.5 w-2.5 animate-pulse rounded-full bg-red-500" />
+              <span className="text-sm text-white/80">Recording screen…</span>
+            </div>
+          </div>
+          <div className="absolute bottom-4 z-10 flex items-center gap-4 text-sm text-white/50">
+            <span>
+              <kbd className="rounded bg-white/10 px-1.5 py-0.5 font-mono text-xs">
+                S
+              </kbd>{" "}
+              stop
+            </span>
+            <span>
+              <kbd className="rounded bg-white/10 px-1.5 py-0.5 font-mono text-xs">
+                Q
+              </kbd>{" "}
+              cancel
+            </span>
+          </div>
+        </div>
+      )}
       {step === "reviewing" && recordingSource === "screen" && reviewBlob && (
         <RecordingOverlay
           step="reviewing"