feat(households): pick events + provider launch tracking (Phase F)

app.client/src/features/tonight/TonightPicker.tsx

@@ -16,6 +16,7 @@ import type { Theme } from '../../styles/theme';
 import { useActiveHousehold } from './useActiveHousehold';
 import { useTonightHomepagePreference } from './useTonightHomepage';
 import { useCommitPick, useTonightPick } from './useTonightPick';
+import { households } from '../../services/api/households';
 import type { Mood, RecommendationCard } from '../../services/api/households';
 
 const MOODS: { id: Mood; label: string }[] = [
@@ -100,6 +101,22 @@ const Rationale = styled(Typography)<{ theme: Theme }>`
   color: ${({ theme }) => theme.colors.text.secondary};
 `;
 
+const ProviderLaunchButton = styled.button<{ theme: Theme }>`
+  padding: ${({ theme }) => theme.spacing.xs} ${({ theme }) => theme.spacing.sm};
+  border-radius: 999px;
+  border: 1px solid ${({ theme }) => theme.colors.primary};
+  background: ${({ theme }) => theme.colors.primary};
+  color: #ffffff;
+  cursor: pointer;
+  font-size: ${({ theme }) => theme.typography.fontSize.sm};
+  font-weight: ${({ theme }) => theme.typography.fontWeight.medium};
+  transition: opacity 0.15s ease;
+
+  &:hover {
+    opacity: 0.85;
+  }
+`;
+
 const ActionRow = styled(Flex)<{ theme: Theme }>`
   margin-top: ${({ theme }) => theme.spacing.lg};
   gap: ${({ theme }) => theme.spacing.md};
@@ -155,7 +172,24 @@ const TonightPicker: React.FC = () => {
     });
   };
 
+  const recordEvent = (
+    card: RecommendationCard,
+    kind: 'accepted' | 'swapped' | 'dismissed'
+  ) => {
+    if (!household) return;
+    void households
+      .recordPickEvent(household.id, {
+        tmdb_id: card.tmdb_id,
+        media_type: card.media_type,
+        kind,
+        mood,
+        minutes_budget: minutes,
+      })
+      .catch(() => undefined);
+  };
+
   const onSwap = (card: RecommendationCard) => {
+    recordEvent(card, 'swapped');
     const next = [...excludedTmdbIds, card.tmdb_id];
     setExcludedTmdbIds(next);
     pickMutation.mutate({
@@ -167,6 +201,7 @@ const TonightPicker: React.FC = () => {
   };
 
   const onCommit = (card: RecommendationCard) => {
+    recordEvent(card, 'accepted');
     commitMutation.mutate(
       {
         tmdbId: card.tmdb_id,
@@ -183,6 +218,33 @@ const TonightPicker: React.FC = () => {
     );
   };
 
+  const onDismiss = (card: RecommendationCard) => {
+    recordEvent(card, 'dismissed');
+    setDismissed(true);
+  };
+
+  const onLaunchProvider = async (
+    card: RecommendationCard,
+    providerSlug: string
+  ) => {
+    if (!household) return;
+    try {
+      const { url } = await households.launchProvider(
+        household.id,
+        card.tmdb_id,
+        {
+          provider_slug: providerSlug,
+          media_type: card.media_type,
+          mood,
+          minutes_budget: minutes,
+        }
+      );
+      window.open(url, '_blank', 'noopener,noreferrer');
+    } catch {
+      // Launch failed (provider not available in region); silently no-op
+    }
+  };
+
   const toggleProvider = (id: string) => {
     setProviders(prev =>
       prev.includes(id) ? prev.filter(p => p !== id) : [...prev, id]
@@ -316,9 +378,15 @@ const TonightPicker: React.FC = () => {
                       </Badge>
                     )}
                     {providerBadges.map(p => (
-                      <Badge key={p.provider_id} variant="primary">
-                        {p.provider_name}
-                      </Badge>
+                      <ProviderLaunchButton
+                        key={p.provider_id}
+                        type="button"
+                        onClick={() =>
+                          onLaunchProvider(result.pick, p.provider_name)
+                        }
+                      >
+                        Watch on {p.provider_name}
+                      </ProviderLaunchButton>
                     ))}
                   </Flex>
                   <Rationale variant="body2">{result.rationale}</Rationale>
@@ -341,7 +409,10 @@ const TonightPicker: React.FC = () => {
                     >
                       Swap
                     </Button>
-                    <Button variant="text" onClick={() => setDismissed(true)}>
+                    <Button
+                      variant="text"
+                      onClick={() => onDismiss(result.pick)}
+                    >
                       Not tonight
                     </Button>
                   </ActionRow>

app.client/src/services/api/households.ts

@@ -118,4 +118,59 @@ export const households = {
       }
     );
   },
+
+  recordPickEvent: async (
+    householdId: string,
+    body: PickEventBody
+  ): Promise<{ id: string }> => {
+    return fetchWithAuth(`/api/households/${householdId}/pick-events`, {
+      method: 'POST',
+      body: JSON.stringify(body),
+    });
+  },
+
+  launchProvider: async (
+    householdId: string,
+    tmdbId: number,
+    body: LaunchProviderBody
+  ): Promise<LaunchProviderResult> => {
+    return fetchWithAuth(
+      `/api/households/${householdId}/picks/${tmdbId}/launch`,
+      {
+        method: 'POST',
+        body: JSON.stringify(body),
+      }
+    );
+  },
 };
+
+export type PickEventKind =
+  | 'proposed'
+  | 'accepted'
+  | 'swapped'
+  | 'dismissed'
+  | 'provider_launched';
+
+export interface PickEventBody {
+  tmdb_id: number;
+  media_type: 'movie' | 'tv';
+  kind: PickEventKind;
+  mood?: Mood;
+  minutes_budget?: number;
+  provider_slug?: string;
+  region?: string;
+}
+
+export interface LaunchProviderBody {
+  provider_slug: string;
+  media_type: 'movie' | 'tv';
+  region?: string;
+  mood?: Mood;
+  minutes_budget?: number;
+}
+
+export interface LaunchProviderResult {
+  url: string;
+  provider_name: string;
+  region: string;
+}

backend/src/controllers/household.controller.ts

@@ -8,6 +8,7 @@ import {
 	isOwner,
 	listForUser,
 } from '../services/household.service';
+import { recordPickEvent } from '../services/pickEvent.service';
 import { defaultRecommendationService } from '../services/recommendation.service';
 import type { Mood } from '../services/recommendation.types';
 
@@ -49,6 +50,20 @@ export const pickForHousehold = async (req: Request, res: Response) => {
 			...(body.region ? { region: body.region } : {}),
 			...(body.excludeTmdbIds ? { excludeTmdbIds: body.excludeTmdbIds } : {}),
 		});
+
+		void recordPickEvent({
+			household_id: householdId,
+			user_id: userId,
+			tmdb_id: result.pick.tmdb_id,
+			media_type: result.pick.media_type,
+			kind: 'proposed',
+			mood: body.mood,
+			minutes_budget: body.minutes,
+			region: body.region ?? null,
+		}).catch(err => {
+			console.warn('Failed to record proposed pick event', err);
+		});
+
 		return res.json(result);
 	} catch (error) {
 		console.error('Error picking for household:', error);