Add first-run onboarding wizard for recording mechanics

Introduce a minimal, skippable first-run wizard that teaches the record
key. On first authenticated launch it renders as a full-screen takeover
(gated above PusherProvider) so the stream/compose keyboard handlers are
not mounted to compete for the same keys.

Steps: welcome, hold ` to record, tap V to switch audio/video, tap ` to
toggle recording, mic/camera permission priming, and a recap. The lessons
detect the real gestures and never block — Esc or the Skip control
dismisses at any point.

Reuses existing pieces: VideoAudioToggle, useMediaDevices().requestLabels
for permission priming, KeyHint, and isTypingTarget. Extracts the shared
HOLD_THRESHOLD_MS into lib/constants and reuses it in the compose overlay.

Resolves #259

Co-Authored-By: Claude Opus 4.8 <[email protected]>
Claude-Session: https://claude.ai/code/session_01A9AHySdLb1zfZAEm6SuaQP

js/desktop/src/App.tsx

@@ -23,12 +23,18 @@ import {
 import { SoundEffectsProvider } from '@/lib/sound-effects/sound-effects-provider';
 import { platform } from '@/lib/platform';
 import { InAppAutoplayCard } from '@/components/in-app-autoplay-card';
+import { useOnboardingStore } from '@/stores/onboarding-store';
+import { OnboardingOverlay } from '@/features/onboarding/onboarding-overlay';
 
 const queryClient = createQueryClient();
 
 const App = () => {
   const status = useAuthStore((s) => s.status);
   const restoreSession = useAuthStore((s) => s.restoreSession);
+  const hasCompletedOnboarding = useOnboardingStore(
+    (s) => s.hasCompletedOnboarding,
+  );
+  const markOnboardingComplete = useOnboardingStore((s) => s.markComplete);
 
   useEffect(() => {
     restoreSession();
@@ -46,6 +52,10 @@ const App = () => {
     return <LoginPage />;
   }
 
+  if (!hasCompletedOnboarding) {
+    return <OnboardingOverlay onComplete={markOnboardingComplete} />;
+  }
+
   return (
     <PusherProvider>
       <AuthenticatedApp />