feat(persona-quiz): persist tags incrementally + use shared Feed inter-question

Previously the inter-question feed preview used a bespoke component
(`PersonaQuizFeedPreview`) that fired its own `feedPreview` query with
ad-hoc tag filters. Meanwhile the reveal screen used the shared `Feed`
component reading from persisted `feedSettings`. Two parallel implementations
of the same idea, with the reveal one being the better-tested code path.

Unify on the persistence-based approach:

- After every answer, follow newly-earned tags via `followTags` (the same
  hook `TagSelection` uses). `followedRef` tracks the session's delta so
  we never re-fire follow calls for tags we've already streamed.
- Debounced `refetchPreview` invalidates `[RequestKey.FeedPreview]` cache
  entries after each follow burst, prompting the shared `Feed` to re-fetch.
- Replace `PersonaQuizFeedPreview` JSX with the standard `Feed` +
  `FeedLayoutProvider` block (same as `EditTag` and `PersonaQuizReveal`).
- `PersonaQuizFeedPreview.tsx` deleted entirely.

Side effect: the user's actual `feedSettings` shapes live as they answer
the quiz. By the time they reach the reveal, all quiz tags are already
followed and `TagSelection` shows them as selected without any seeding
work. `finishQuiz` now only fires `followTags` for tags that haven't
been streamed yet (typically just the fallback backfill).

Tests:
- Updated the "walks Q→A→reveal" assertion to collect the union of every
  `followTags` call rather than expecting a single batched one.
- Added `SettingsContext` and `Feed` mocks so the orchestration tests
  don't try to mount the real Feed pipeline.
- All 4 tests still pass.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

Author: davidercruz

packages/shared/src/features/onboarding/steps/FunnelPersonaQuiz/FunnelPersonaQuiz.spec.tsx

@@ -37,6 +37,22 @@ jest.mock('../../../../hooks/useConditionalFeature', () => ({
   useConditionalFeature: () => ({ value: false }),
 }));
 
+jest.mock('../../../../contexts/SettingsContext', () => ({
+  useSettingsContext: () => ({
+    sidebarExpanded: false,
+    autoDismissNotifications: false,
+  }),
+  ThemeMode: { Light: 'light', Dark: 'dark' },
+}));
+
+// Heavy Feed component is exercised by other test suites; here we only need it
+// to mount without exploding so the orchestration's inter-question render
+// path is covered.
+jest.mock('../../../../components/Feed', () => ({
+  __esModule: true,
+  default: () => null,
+}));
+
 const mockFollowTags = jest.fn().mockResolvedValue(undefined);
 jest.mock('../../../../hooks/useMutateFilters', () => ({
   __esModule: true,
@@ -220,9 +236,14 @@ describe('FunnelPersonaQuiz', () => {
     ).toBeInTheDocument();
     fireEvent.click(screen.getByText('Looks good'));
     await waitFor(() => {
-      expect(mockFollowTags).toHaveBeenCalledWith({
-        tags: expect.arrayContaining(['react', 'tailwind', 'typescript']),
-      });
+      // Tags are followed incrementally during the quiz — collect the union
+      // of every `followTags` call so we can assert the full quiz tag set.
+      const allFollowedTags = mockFollowTags.mock.calls.flatMap(
+        ([{ tags }]) => tags,
+      );
+      expect(allFollowedTags).toEqual(
+        expect.arrayContaining(['react', 'tailwind', 'typescript']),
+      );
     });
     await waitFor(() => {
       expect(onTransition).toHaveBeenCalledWith(

packages/shared/src/features/onboarding/steps/FunnelPersonaQuiz/PersonaQuizFeedPreview.tsx

@@ -6,7 +6,7 @@ import React, {
   useRef,
   useState,
 } from 'react';
-import { useMutation } from '@tanstack/react-query';
+import { useMutation, useQueryClient } from '@tanstack/react-query';
 import type {
   FunnelStepPersonaQuiz,
   FunnelStepPersonaQuizParameters,
@@ -20,11 +20,15 @@ import { useLogContext } from '../../../../contexts/LogContext';
 import { LogEvent } from '../../../../lib/log';
 import useMutateFilters from '../../../../hooks/useMutateFilters';
 import useFeedSettings from '../../../../hooks/useFeedSettings';
+import useDebounceFn from '../../../../hooks/useDebounceFn';
 import { usePersonaQuizState } from './usePersonaQuizState';
 import type { PersonaQuizAnswer } from './usePersonaQuizState';
 import { PersonaQuizQuestionView } from './PersonaQuizQuestion';
-import { PersonaQuizFeedPreview } from './PersonaQuizFeedPreview';
 import { PersonaQuizReveal } from './PersonaQuizReveal';
+import Feed from '../../../../components/Feed';
+import { FeedLayoutProvider } from '../../../../contexts/FeedContext';
+import { OtherFeedPage, RequestKey } from '../../../../lib/query';
+import { PREVIEW_FEED_QUERY } from '../../../../graphql/feed';
 
 const dedupePreserveOrder = (tags: string[]): string[] =>
   Array.from(new Set(tags));
@@ -39,6 +43,7 @@ function FunnelPersonaQuizComponent({
   const user = auth?.user;
   const { followTags } = useMutateFilters(user);
   const { feedSettings } = useFeedSettings();
+  const queryClient = useQueryClient();
 
   const params = parameters as FunnelStepPersonaQuizParameters;
   const {
@@ -87,6 +92,31 @@ function FunnelPersonaQuizComponent({
     [tagScores, selection.tagConfidenceFloor],
   );
 
+  // Incrementally persist newly-earned tags after each answer so the shared
+  // Feed preview reflects the user's evolving interests live. We track the
+  // session's "already followed" set so we don't re-fire follow calls for
+  // tags we've already sent.
+  const followedRef = useRef<Set<string>>(new Set());
+  const [refetchPreview] = useDebounceFn(() => {
+    queryClient.invalidateQueries({
+      queryKey: [RequestKey.FeedPreview],
+      predicate: (q) => !q.queryKey.includes(RequestKey.FeedPreviewCustom),
+    });
+  }, 800);
+
+  useEffect(() => {
+    if (phase !== 'question' || !user?.id) {
+      return;
+    }
+    const fresh = accumulatedTags.filter((t) => !followedRef.current.has(t));
+    if (fresh.length === 0) {
+      return;
+    }
+    fresh.forEach((t) => followedRef.current.add(t));
+    Promise.resolve(followTags({ tags: fresh })).catch(() => undefined);
+    refetchPreview();
+  }, [accumulatedTags, phase, user?.id, followTags, refetchPreview]);
+
   // Resolve the archetype from the terminal question's `archetypeId`, build
   // the final tag list, persist it (so `TagSelection` on the reveal screen
   // sees the quiz tags pre-selected via `feedSettings`), then transition to
@@ -106,9 +136,14 @@ function FunnelPersonaQuizComponent({
         ...(selection.fallbackTags ?? []),
       ]).slice(0, selection.targetTotalTags);
 
-      // Fire-and-forget — TagSelection re-renders when feedSettings updates.
-      if (merged.length > 0) {
-        Promise.resolve(followTags({ tags: merged })).catch(() => undefined);
+      // Most tags are already followed (we stream them incrementally as the
+      // user answers). Only fire `followTags` for the residue — typically the
+      // fallback tags backfilled to reach `targetTotalTags`.
+      const fresh = merged.filter((t) => !followedRef.current.has(t));
+      if (fresh.length > 0) {
+        fresh.forEach((t) => followedRef.current.add(t));
+        Promise.resolve(followTags({ tags: fresh })).catch(() => undefined);
+        refetchPreview();
       }
 
       enrichmentComplete(merged);
@@ -121,6 +156,7 @@ function FunnelPersonaQuizComponent({
       selection.fallbackTags,
       enrichmentComplete,
       followTags,
+      refetchPreview,
     ],
   );
 
@@ -259,8 +295,18 @@ function FunnelPersonaQuizComponent({
           totalSteps={selection.maxQuestions}
           onSelect={handleAnswer}
         />
-        {answers.length >= 1 && (
-          <PersonaQuizFeedPreview includeTags={accumulatedTags} />
+        {answers.length >= 1 && user?.id && (
+          <FeedLayoutProvider>
+            <Feed
+              className="relative mx-auto px-6 pt-10 tablet:left-1/2 tablet:w-screen tablet:-translate-x-1/2"
+              feedName={OtherFeedPage.Preview}
+              feedQueryKey={[RequestKey.FeedPreview, user.id]}
+              query={PREVIEW_FEED_QUERY}
+              showSearch={false}
+              options={{ refetchOnMount: false }}
+              allowPin
+            />
+          </FeedLayoutProvider>
         )}
       </div>
     );