From c393e854c7ba44218e9ed03ca1256d7851e35c9c Mon Sep 17 00:00:00 2001
From: Chris Bongers <chrisbongers@gmail.com>
Date: Fri, 4 Sep 2026 14:51:16 +0200
Subject: [PATCH 01/20] feat(monetization): add the sponsor strip experiment
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

A logo wall docked under the main feeds — one static gold slot, four
rotating premium slots and a community row that fills whatever the row
has left — with the breaking-news ticker stacked underneath it. While the
strip is carrying those headlines, the feed drops its Happening Now card.

Impressions, IAB viewable impressions, clicks and a new `air time`
duration event are logged per logo, keyed by tier and slot. The ad source
is a fixture until the `footer_logo` placement exists on the ad server.

Behind `sponsor_strip`, default off.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
---
 packages/shared/src/components/Feed.spec.tsx  |  62 +++
 packages/shared/src/components/Feed.tsx       |   8 +
 .../shared/src/components/MainFeedLayout.tsx  |  21 +
 .../src/components/ScrollToTopButton.tsx      |   4 +-
 .../components/feedback/FeedbackWidget.tsx    |   4 +-
 .../monetization/sponsorStrip/SponsorLogo.tsx | 114 ++++++
 .../sponsorStrip/SponsorStrip.spec.tsx        | 359 ++++++++++++++++++
 .../sponsorStrip/SponsorStrip.tsx             | 173 +++++++++
 .../sponsorStrip/SponsorStripHeadlines.tsx    |  96 +++++
 .../sponsorStrip/mockSponsorStripAds.ts       | 100 +++++
 .../sponsorStrip/sponsorLogoSizing.spec.ts    |  66 ++++
 .../sponsorStrip/sponsorLogoSizing.ts         |  59 +++
 .../sponsorStrip/sponsorStripCreative.spec.ts |  45 +++
 .../sponsorStrip/sponsorStripCreative.ts      |  75 ++++
 .../sponsorStrip/sponsorStripLog.ts           |  38 ++
 .../sponsorStrip/sponsorStripOffset.ts        |  39 ++
 .../sponsorStrip/sponsorStripRotation.spec.ts | 161 ++++++++
 .../sponsorStrip/sponsorStripRotation.ts      | 141 +++++++
 .../sponsorStrip/useSponsorSlotLog.ts         |  95 +++++
 .../sponsorStrip/useSponsorStrip.spec.tsx     | 104 +++++
 .../sponsorStrip/useSponsorStrip.ts           |  54 +++
 .../sponsorStrip/useSponsorStripAds.ts        | 222 +++++++++++
 .../sponsorStrip/useSponsorStripFeed.spec.tsx |  61 +++
 .../sponsorStrip/useSponsorStripFeed.ts       |  44 +++
 .../sponsorStrip/useStripHeadlines.spec.tsx   | 113 ++++++
 .../sponsorStrip/useStripHeadlines.ts         |  47 +++
 .../src/hooks/feed/mockFeedHighlights.spec.ts | 103 +++++
 .../src/hooks/feed/mockFeedHighlights.ts      | 106 ++++++
 packages/shared/src/hooks/useFeed.ts          |  24 +-
 packages/shared/src/lib/ads.ts                |  10 +
 packages/shared/src/lib/featureManagement.ts  |  20 +-
 packages/shared/src/types.ts                  |   8 +
 32 files changed, 2571 insertions(+), 5 deletions(-)
 create mode 100644 packages/shared/src/features/monetization/sponsorStrip/SponsorLogo.tsx
 create mode 100644 packages/shared/src/features/monetization/sponsorStrip/SponsorStrip.spec.tsx
 create mode 100644 packages/shared/src/features/monetization/sponsorStrip/SponsorStrip.tsx
 create mode 100644 packages/shared/src/features/monetization/sponsorStrip/SponsorStripHeadlines.tsx
 create mode 100644 packages/shared/src/features/monetization/sponsorStrip/mockSponsorStripAds.ts
 create mode 100644 packages/shared/src/features/monetization/sponsorStrip/sponsorLogoSizing.spec.ts
 create mode 100644 packages/shared/src/features/monetization/sponsorStrip/sponsorLogoSizing.ts
 create mode 100644 packages/shared/src/features/monetization/sponsorStrip/sponsorStripCreative.spec.ts
 create mode 100644 packages/shared/src/features/monetization/sponsorStrip/sponsorStripCreative.ts
 create mode 100644 packages/shared/src/features/monetization/sponsorStrip/sponsorStripLog.ts
 create mode 100644 packages/shared/src/features/monetization/sponsorStrip/sponsorStripOffset.ts
 create mode 100644 packages/shared/src/features/monetization/sponsorStrip/sponsorStripRotation.spec.ts
 create mode 100644 packages/shared/src/features/monetization/sponsorStrip/sponsorStripRotation.ts
 create mode 100644 packages/shared/src/features/monetization/sponsorStrip/useSponsorSlotLog.ts
 create mode 100644 packages/shared/src/features/monetization/sponsorStrip/useSponsorStrip.spec.tsx
 create mode 100644 packages/shared/src/features/monetization/sponsorStrip/useSponsorStrip.ts
 create mode 100644 packages/shared/src/features/monetization/sponsorStrip/useSponsorStripAds.ts
 create mode 100644 packages/shared/src/features/monetization/sponsorStrip/useSponsorStripFeed.spec.tsx
 create mode 100644 packages/shared/src/features/monetization/sponsorStrip/useSponsorStripFeed.ts
 create mode 100644 packages/shared/src/features/monetization/sponsorStrip/useStripHeadlines.spec.tsx
 create mode 100644 packages/shared/src/features/monetization/sponsorStrip/useStripHeadlines.ts
 create mode 100644 packages/shared/src/hooks/feed/mockFeedHighlights.spec.ts
 create mode 100644 packages/shared/src/hooks/feed/mockFeedHighlights.ts

diff --git a/packages/shared/src/components/Feed.spec.tsx b/packages/shared/src/components/Feed.spec.tsx
index 515c80bc929..37dbc8cb233 100644
--- a/packages/shared/src/components/Feed.spec.tsx
+++ b/packages/shared/src/components/Feed.spec.tsx
@@ -556,6 +556,68 @@ describe('Feed logged in', () => {
     ).toEqual(['postItem', 'postItem', 'highlightItem', 'postItem']);
   });
 
+  // `disableHighlightItems` is set by MainFeedLayout when it mounts the sponsor
+  // strip, which is what carries breaking news in the card's place.
+  it('should drop the Happening Now card when the layout says the strip carries it', async () => {
+    renderComponent(
+      [
+        {
+          request: {
+            query: FEED_V2_QUERY,
+            variables,
+          },
+          result: {
+            data: {
+              page: {
+                pageInfo: defaultFeedPage.pageInfo,
+                edges: [
+                  {
+                    node: {
+                      __typename: 'FeedHighlightsItem',
+                      feedMeta: null,
+                      highlights: [
+                        {
+                          id: 'highlight-1',
+                          channel: 'agents',
+                          headline: 'The first highlight',
+                          highlightedAt: '2026-04-05T09:00:00.000Z',
+                          post: {
+                            id: defaultFeedPage.edges[0].node.id,
+                            commentsPermalink:
+                              defaultFeedPage.edges[0].node.commentsPermalink,
+                          },
+                        },
+                      ],
+                    },
+                  },
+                  {
+                    node: {
+                      __typename: 'FeedPostItem',
+                      post: defaultFeedPage.edges[0].node,
+                      feedMeta: defaultFeedPage.edges[0].node.feedMeta ?? null,
+                    },
+                  },
+                ],
+              },
+            },
+          },
+        },
+      ],
+      defaultUser,
+      SharedFeedPage.MyFeed,
+      FEED_V2_QUERY,
+      { disableHighlightItems: true },
+    );
+
+    await waitForNock();
+
+    // The posts around it still render, so the card is dropped rather than the
+    // whole response being discarded.
+    expect(await screen.findAllByTestId('postItem')).not.toHaveLength(0);
+    expect(screen.queryByTestId('highlightItem')).not.toBeInTheDocument();
+    expect(screen.queryByText('Happening Now')).not.toBeInTheDocument();
+  });
+
   it('should send upvote mutation', async () => {
     let mutationCalled = false;
     renderComponent([
diff --git a/packages/shared/src/components/Feed.tsx b/packages/shared/src/components/Feed.tsx
index c4fe7262a42..b96a5c9774a 100644
--- a/packages/shared/src/components/Feed.tsx
+++ b/packages/shared/src/components/Feed.tsx
@@ -102,6 +102,12 @@ export interface FeedProps<T>
   showSearch?: boolean;
   actionButtons?: ReactNode;
   disableAds?: boolean;
+  /**
+   * Drop the Happening Now card. Owned by the layout that renders the sponsor
+   * strip, which is where breaking news goes while the strip is up — a feed
+   * with no strip above it must never lose the card.
+   */
+  disableHighlightItems?: boolean;
   staticAd?: { ad: Ad; index: number };
   disableAdRefresh?: boolean;
   allowFetchMore?: boolean;
@@ -211,6 +217,7 @@ export default function Feed<T>({
   shortcuts,
   actionButtons,
   disableAds,
+  disableHighlightItems,
   staticAd,
   disableAdRefresh = false,
   allowFetchMore,
@@ -374,6 +381,7 @@ export default function Feed<T>({
       disableTopHero: isV2,
       isHorizontal,
       excludePinnedPosts,
+      disableHighlightItems,
       settings: {
         disableAds,
         staticAd,
diff --git a/packages/shared/src/components/MainFeedLayout.tsx b/packages/shared/src/components/MainFeedLayout.tsx
index bac2a231273..eb679091aaa 100644
--- a/packages/shared/src/components/MainFeedLayout.tsx
+++ b/packages/shared/src/components/MainFeedLayout.tsx
@@ -18,6 +18,8 @@ import { useRouter } from 'next/router';
 import type { FeedProps } from './Feed';
 import Feed from './Feed';
 import { FeedPageLayoutMobile, feedGutter } from './utilities/common';
+import { SponsorStrip } from '../features/monetization/sponsorStrip/SponsorStrip';
+import { useSponsorStripFeed } from '../features/monetization/sponsorStrip/useSponsorStripFeed';
 import { ExploreChipsBar } from './feeds/ExploreChipsBar';
 import { buildPersonalizedCategories } from './feeds/exploreCategories';
 import { useFeeds } from '../hooks/feed/useFeeds';
@@ -778,6 +780,13 @@ export default function MainFeedLayout({
     }
     return '';
   }, [customFeedsData, feedName, router.query.slugOrId]);
+  // Read here rather than inside the feed or the strip: this is the one place
+  // that owns both, so the card can only ever go missing on a surface that is
+  // mounting the strip — with headlines in it — in the card's place.
+  const sponsorStrip = useSponsorStripFeed({
+    feedName,
+    disableAds: feedProps?.disableAds,
+  });
   const v2ActionButtons = feedProps?.actionButtons;
   const showFeedV2PageHeader =
     isV2 &&
@@ -851,6 +860,7 @@ export default function MainFeedLayout({
           feedProps && (
             <Feed
               {...feedProps}
+              disableHighlightItems={sponsorStrip.disableHighlightItems}
               shortcuts={shortcuts}
               topContent={
                 (isExploreTag || shouldUseListFeedLayout) && chipsNode ? (
@@ -870,6 +880,17 @@ export default function MainFeedLayout({
         )}
         {children}
       </FeedPageLayoutComponent>
+      {/* Docked outside the page container so it spans the feed column and
+          pins to the window, and mounted here rather than in each app's
+          MainFeedPage because this is the one component both the webapp and
+          the extension new tab render — and the only place the feed name is
+          already resolved from `default` to the reader's own feed. */}
+      {sponsorStrip.isEnabled && (
+        <SponsorStrip
+          config={sponsorStrip.config}
+          headlines={sponsorStrip.headlines}
+        />
+      )}
     </>
   );
 }
diff --git a/packages/shared/src/components/ScrollToTopButton.tsx b/packages/shared/src/components/ScrollToTopButton.tsx
index 989fb8ca8c7..01066831926 100644
--- a/packages/shared/src/components/ScrollToTopButton.tsx
+++ b/packages/shared/src/components/ScrollToTopButton.tsx
@@ -63,7 +63,9 @@ export default function ScrollToTopButton(): ReactElement | null {
       tabIndex={show ? 0 : -1}
       {...props}
       className={classNames(
-        'absolute right-4 z-2',
+        // Lifts over the sponsor strip when one is docked; the property is
+        // unset otherwise, so the margin collapses to zero.
+        'absolute right-4 z-2 mt-[calc(-1_*_var(--sponsor-strip-height,0px))]',
         showFeedbackButton
           ? '-top-26 tablet:-top-32'
           : '-top-12 tablet:-top-18 laptop:-top-24',
diff --git a/packages/shared/src/components/feedback/FeedbackWidget.tsx b/packages/shared/src/components/feedback/FeedbackWidget.tsx
index 3f548adf7a6..98a79dcab82 100644
--- a/packages/shared/src/components/feedback/FeedbackWidget.tsx
+++ b/packages/shared/src/components/feedback/FeedbackWidget.tsx
@@ -182,7 +182,9 @@ export function FeedbackWidget({
     <Button
       variant={ButtonVariant.Primary}
       size={ButtonSize.Medium}
-      className="group fixed bottom-4 right-4 z-max !h-auto !gap-0 !px-3 py-1.5 shadow-2"
+      // `--sponsor-strip-height` is set only while the sponsor strip is docked
+      // (see `sponsorStripOffset`), so this is the usual 1rem everywhere else.
+      className="group fixed bottom-[calc(1rem_+_var(--sponsor-strip-height,0px))] right-4 z-max !h-auto !gap-0 !px-3 py-1.5 shadow-2"
       onClick={() => openModal({ type: LazyModal.Feedback })}
       aria-label="Send feedback. Real people reply."
       aria-keyshortcuts="Control+Shift+F Meta+Shift+F"
diff --git a/packages/shared/src/features/monetization/sponsorStrip/SponsorLogo.tsx b/packages/shared/src/features/monetization/sponsorStrip/SponsorLogo.tsx
new file mode 100644
index 00000000000..89c22e48acc
--- /dev/null
+++ b/packages/shared/src/features/monetization/sponsorStrip/SponsorLogo.tsx
@@ -0,0 +1,114 @@
+import type { CSSProperties, ReactElement } from 'react';
+import React, { useMemo } from 'react';
+import classNames from 'classnames';
+import { AdPixel } from '../../../components/cards/ad/common/AdPixel';
+import { getViewedPixels } from '../../../components/cards/ad/common/getViewedPixels';
+import { anchorSponsoredRel } from '../../../lib/strings';
+import { boxedLogoHeight } from './sponsorLogoSizing';
+import type { ResolvedSponsor } from './sponsorStripCreative';
+import { useSponsorSlotLog } from './useSponsorSlotLog';
+
+interface SponsorLogoProps {
+  sponsor: ResolvedSponsor;
+  slotIndex: number;
+  cap: number;
+  /**
+   * Fixed box the mark is drawn into. Wall slots use one so the row's width
+   * cannot jump every time a rotation swaps a square mark for a long lockup;
+   * the gold slot takes its natural width instead.
+   */
+  boxWidth?: number;
+  /**
+   * Draw the mark as a single-colour silhouette that takes the surrounding
+   * text colour, instead of the file's own inks. This is what makes a wall of
+   * marks from a dozen advertisers read as one row in both themes — full
+   * colour there is a patchwork, and half the marks die against one ground.
+   * The gold slot is the exception: its brand colour is what was sold.
+   */
+  monochrome?: boolean;
+  /** Height ceiling in px, so a mark cannot outgrow the row it sits in. */
+  maxHeight?: number;
+  className?: string;
+}
+
+export const SponsorLogo = ({
+  sponsor,
+  slotIndex,
+  cap,
+  boxWidth,
+  monochrome = false,
+  maxHeight,
+  className,
+}: SponsorLogoProps): ReactElement => {
+  const { ref, isViewable, onClick } = useSponsorSlotLog<HTMLAnchorElement>({
+    sponsor,
+    slotIndex,
+  });
+  const viewedPixels = useMemo(
+    () => getViewedPixels(sponsor.pixel),
+    [sponsor.pixel],
+  );
+  const height = boxedLogoHeight(
+    sponsor.ratio,
+    cap,
+    boxWidth ?? Number.POSITIVE_INFINITY,
+    maxHeight,
+  );
+  const size: CSSProperties = {
+    height: `${height}px`,
+    width: `${Math.round(height * sponsor.ratio)}px`,
+  };
+
+  return (
+    <a
+      ref={ref}
+      href={sponsor.link}
+      target="_blank"
+      rel={anchorSponsoredRel}
+      title={sponsor.company}
+      onClick={onClick}
+      className={classNames(
+        'relative flex shrink-0 items-center justify-center',
+        className,
+      )}
+      style={boxWidth ? { width: `${boxWidth}px` } : undefined}
+    >
+      {monochrome ? (
+        <span
+          role="img"
+          aria-label={sponsor.company}
+          className="block"
+          style={{
+            ...size,
+            // `bg-current` is not in this palette — the design tokens replace
+            // the default colours — so the ink is painted directly and the
+            // logo file is what shapes it.
+            backgroundColor: 'currentColor',
+            maskImage: `url(${sponsor.logo})`,
+            maskRepeat: 'no-repeat',
+            maskPosition: 'center',
+            maskSize: 'contain',
+            WebkitMaskImage: `url(${sponsor.logo})`,
+            WebkitMaskRepeat: 'no-repeat',
+            WebkitMaskPosition: 'center',
+            WebkitMaskSize: 'contain',
+          }}
+        />
+      ) : (
+        <img
+          src={sponsor.logo}
+          alt={sponsor.company}
+          className="object-contain"
+          style={size}
+        />
+      )}
+      {/* No `fireOnMount`: the ad server should count the impression when the
+          mark reaches the viewport, which is how every other placement counts
+          it. Only the viewable re-fire below is already gated by then. */}
+      <AdPixel pixel={sponsor.pixel} />
+      {isViewable && !!viewedPixels.length && (
+        <AdPixel pixel={viewedPixels} fireOnMount />
+      )}
+    </a>
+  );
+};
diff --git a/packages/shared/src/features/monetization/sponsorStrip/SponsorStrip.spec.tsx b/packages/shared/src/features/monetization/sponsorStrip/SponsorStrip.spec.tsx
new file mode 100644
index 00000000000..56d20572692
--- /dev/null
+++ b/packages/shared/src/features/monetization/sponsorStrip/SponsorStrip.spec.tsx
@@ -0,0 +1,359 @@
+import React from 'react';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import { act, fireEvent, render, screen, within } from '@testing-library/react';
+import type { AuthContextData } from '../../../contexts/AuthContext';
+import AuthContext from '../../../contexts/AuthContext';
+import { getLogContextStatic } from '../../../contexts/LogContext';
+import type { LogContextData } from '../../../hooks/log/useLogContextData';
+import type { PostHighlight } from '../../../graphql/highlights';
+import { AdActions } from '../../../lib/ads';
+import { LogEvent } from '../../../lib/log';
+import type { SponsorStripConfig } from '../../../types';
+import { SponsorStrip } from './SponsorStrip';
+import { fetchSponsorStripAds } from './mockSponsorStripAds';
+import { SponsorTier } from './sponsorStripCreative';
+
+jest.mock('./mockSponsorStripAds', () => ({
+  fetchSponsorStripAds: jest.fn(),
+}));
+
+jest.mock('../../../hooks/utils/useThemedAsset', () => ({
+  useIsLightTheme: () => false,
+}));
+
+const mockFetch = jest.mocked(fetchSponsorStripAds);
+let headlines: PostHighlight[] = [];
+
+const config: SponsorStripConfig = {
+  enabled: true,
+  premiumRotationMs: 40_000,
+  communityRotationMs: 8_000,
+};
+
+const creative = (
+  company: string,
+  tier: SponsorTier,
+  pixel: string[] = [],
+) => ({
+  gen_id: `gen-${company}`,
+  company,
+  logo_img: { light: `light-${company}`, dark: `dark-${company}` },
+  logo_ratio: 3,
+  link: `https://daily.dev/${company}`,
+  pixel,
+  tier,
+});
+
+const headline = (id: string): PostHighlight => ({
+  id,
+  channel: 'agents',
+  headline: `Headline ${id}`,
+  highlightedAt: new Date().toISOString(),
+  post: { id: `post-${id}`, commentsPermalink: `https://daily.dev/p/${id}` },
+});
+
+const PREMIUM = ['p1', 'p2', 'p3', 'p4', 'p5', 'p6'];
+const COMMUNITY = ['c1', 'c2', 'c3', 'c4', 'c5', 'c6', 'c7', 'c8', 'c9', 'c10'];
+
+// Wide enough for eight wall slots — four premium, four community — which
+// leaves the community deck bigger than the row it fills, the only state in
+// which a rotation has anywhere to go.
+const WALL_WIDTH = 900;
+const COMMUNITY_SLOTS = 4;
+
+const ads = [
+  creative('gold', SponsorTier.Gold, ['https://api.daily.dev/px?id=gold']),
+  ...PREMIUM.map((company) => creative(company, SponsorTier.Premium)),
+  ...COMMUNITY.map((company) => creative(company, SponsorTier.Community)),
+];
+
+const logEvent = jest.fn();
+const logEventStart = jest.fn();
+const logEventEnd = jest.fn();
+
+const LogContext = getLogContextStatic();
+
+const renderStrip = () => {
+  const client = new QueryClient({
+    defaultOptions: { queries: { retry: false } },
+  });
+
+  return render(
+    <QueryClientProvider client={client}>
+      <AuthContext.Provider
+        value={
+          {
+            isAuthReady: true,
+            user: { id: 'u1' },
+          } as unknown as AuthContextData
+        }
+      >
+        <LogContext.Provider
+          value={
+            {
+              logEvent,
+              logEventStart,
+              logEventEnd,
+              sendBeacon: jest.fn(),
+            } as unknown as LogContextData
+          }
+        >
+          <SponsorStrip config={config} headlines={headlines} />
+        </LogContext.Provider>
+      </AuthContext.Provider>
+    </QueryClientProvider>,
+  );
+};
+
+/**
+ * Lets the ad query settle before the row is asserted on. The strip runs on
+ * fake timers for its rotation, so the query's promise has to be flushed by
+ * hand rather than waited on.
+ */
+const settle = async () => {
+  await act(async () => {
+    await Promise.resolve();
+    jest.advanceTimersByTime(1);
+    await Promise.resolve();
+  });
+};
+
+const shownLogos = (): string[] =>
+  within(screen.getByTestId('sponsorStripRow'))
+    .getAllByRole('link')
+    .map((link) => link.getAttribute('title') as string);
+
+const extraOf = (call: unknown[]): Record<string, unknown> =>
+  JSON.parse((call[0] as { extra: string }).extra);
+
+const callsFor = (action: AdActions) =>
+  logEvent.mock.calls.filter(
+    ([event]) => (event as { event_name: string }).event_name === action,
+  );
+
+beforeEach(() => {
+  jest.clearAllMocks();
+  jest.useFakeTimers();
+  mockFetch.mockResolvedValue(ads);
+  headlines = [];
+  jest
+    .spyOn(Element.prototype, 'getBoundingClientRect')
+    .mockReturnValue({ width: WALL_WIDTH } as DOMRect);
+});
+
+afterEach(() => {
+  jest.useRealTimers();
+  document.documentElement.style.removeProperty('--sponsor-strip-height');
+});
+
+const setHeadlines = (next: PostHighlight[]) => {
+  headlines = next;
+};
+
+const publishedHeight = (): string =>
+  document.documentElement.style.getPropertyValue('--sponsor-strip-height');
+
+it('should render the gold sponsor, four premium slots and the community row', async () => {
+  renderStrip();
+  await settle();
+
+  const logos = shownLogos();
+
+  expect(logos[0]).toEqual('gold');
+  expect(logos.filter((company) => PREMIUM.includes(company))).toHaveLength(4);
+  expect(logos.filter((company) => COMMUNITY.includes(company))).toHaveLength(
+    COMMUNITY_SLOTS,
+  );
+});
+
+it('should never rotate the gold sponsor', async () => {
+  renderStrip();
+  await settle();
+
+  await act(async () => {
+    jest.advanceTimersByTime(config.premiumRotationMs * 4);
+  });
+
+  expect(shownLogos()[0]).toEqual('gold');
+});
+
+it('should rotate a community slot without repeating a logo already on the row', async () => {
+  renderStrip();
+  await settle();
+
+  const before = shownLogos();
+
+  await act(async () => {
+    jest.advanceTimersByTime(config.communityRotationMs);
+  });
+
+  const after = shownLogos();
+
+  expect(after).not.toEqual(before);
+  expect(new Set(after).size).toEqual(after.length);
+});
+
+it('should hold the premium row while the community row turns over', async () => {
+  renderStrip();
+  await settle();
+
+  const premiumBefore = shownLogos().filter((company) =>
+    PREMIUM.includes(company),
+  );
+
+  await act(async () => {
+    jest.advanceTimersByTime(config.communityRotationMs);
+  });
+
+  expect(shownLogos().filter((company) => PREMIUM.includes(company))).toEqual(
+    premiumBefore,
+  );
+});
+
+it('should log an impression per logo with its tier and slot', async () => {
+  renderStrip();
+  await settle();
+
+  const impressions = callsFor(AdActions.Impression);
+
+  // Exactly one per mark on the row, and none for a mark the row trimmed: the
+  // wall waits to be measured precisely so a creative it is about to drop
+  // never bills an impression on its way through.
+  expect(impressions).toHaveLength(shownLogos().length);
+  expect(extraOf(impressions[0])).toEqual(
+    expect.objectContaining({
+      placement: 'footer_logo',
+      tier: SponsorTier.Gold,
+      slot_index: 0,
+      gen_id: 'gen-gold',
+    }),
+  );
+});
+
+it('should open air time for every logo and close it when one rotates out', async () => {
+  renderStrip();
+  await settle();
+
+  expect(logEventStart).toHaveBeenCalledTimes(shownLogos().length);
+  expect(logEventStart.mock.calls[0][1]).toEqual(
+    expect.objectContaining({ event_name: AdActions.AirTime }),
+  );
+
+  logEventEnd.mockClear();
+
+  await act(async () => {
+    jest.advanceTimersByTime(config.communityRotationMs);
+  });
+
+  expect(logEventEnd).toHaveBeenCalled();
+  expect(logEventEnd.mock.calls[0][0]).toMatch(/^ss-\d+-gen-c\d$/);
+});
+
+it('should log a click with the logo that was clicked', async () => {
+  renderStrip();
+  await settle();
+
+  fireEvent.click(screen.getByTitle('gold'));
+
+  const clicks = callsFor(AdActions.Click);
+
+  expect(clicks).toHaveLength(1);
+  expect(extraOf(clicks[0])).toEqual(
+    expect.objectContaining({ gen_id: 'gen-gold', slot_index: 0 }),
+  );
+});
+
+it("should fire the ad server's impression pixel for a logo that carries one", async () => {
+  renderStrip();
+  await settle();
+
+  const pixels = screen.getAllByTestId('pixel');
+
+  expect(pixels).toHaveLength(1);
+  expect(pixels[0]).toHaveAttribute('src', 'https://api.daily.dev/px?id=gold');
+});
+
+it('should carry the breaking news the feed no longer shows', async () => {
+  setHeadlines([headline('h1'), headline('h2')]);
+  renderStrip();
+  await settle();
+
+  const ticker = within(screen.getByTestId('sponsorStripHeadlines'));
+
+  expect(ticker.getByText('Breaking news')).toBeInTheDocument();
+  expect(ticker.getByText('Headline h1')).toBeInTheDocument();
+  expect(ticker.getByText('Headline h2')).toBeInTheDocument();
+});
+
+it('should still carry the ticker when the ad server has no fill', async () => {
+  mockFetch.mockResolvedValue([]);
+  setHeadlines([headline('h1')]);
+  renderStrip();
+  await settle();
+
+  // The feed's card is suppressed on the strip's behalf, so a strip with no
+  // sponsors must not also drop the headlines.
+  expect(screen.getByTestId('sponsorStripHeadlines')).toBeInTheDocument();
+  expect(screen.queryByTestId('sponsorStripRow')).not.toBeInTheDocument();
+});
+
+it('should render nothing when it has neither sponsors nor headlines', async () => {
+  mockFetch.mockResolvedValue([]);
+  renderStrip();
+  await settle();
+
+  expect(screen.queryByTestId('sponsorStrip')).not.toBeInTheDocument();
+});
+
+it('should log a click on a headline with the headline that was clicked', async () => {
+  setHeadlines([headline('h1'), headline('h2')]);
+  renderStrip();
+  await settle();
+
+  fireEvent.click(screen.getByText('Headline h2'));
+
+  const clicks = logEvent.mock.calls.filter(
+    ([event]) =>
+      (event as { event_name: string }).event_name === LogEvent.Click,
+  );
+
+  expect(extraOf(clicks[0])).toEqual(
+    expect.objectContaining({ clicked_highlight_id: 'h2', position: 1 }),
+  );
+});
+
+it('should publish its height so the floating controls can clear it', async () => {
+  setHeadlines([headline('h1')]);
+  renderStrip();
+  await settle();
+
+  // The sponsor row plus the ticker: the feedback pill and the scroll-to-top
+  // button read this to lift out of the dock's way.
+  expect(publishedHeight()).toEqual('72px');
+});
+
+it('should publish only the height of the row it actually renders', async () => {
+  mockFetch.mockResolvedValue([]);
+  setHeadlines([headline('h1')]);
+  renderStrip();
+  await settle();
+
+  expect(publishedHeight()).toEqual('32px');
+});
+
+it('should take the offset back when it has nothing to show', async () => {
+  mockFetch.mockResolvedValue([]);
+  renderStrip();
+  await settle();
+
+  expect(publishedHeight()).toEqual('');
+});
+
+it('should take the offset back when it unmounts', async () => {
+  setHeadlines([headline('h1')]);
+  const { unmount } = renderStrip();
+  await settle();
+  unmount();
+
+  expect(publishedHeight()).toEqual('');
+});
diff --git a/packages/shared/src/features/monetization/sponsorStrip/SponsorStrip.tsx b/packages/shared/src/features/monetization/sponsorStrip/SponsorStrip.tsx
new file mode 100644
index 00000000000..b66c779a7d2
--- /dev/null
+++ b/packages/shared/src/features/monetization/sponsorStrip/SponsorStrip.tsx
@@ -0,0 +1,173 @@
+import type { ReactElement } from 'react';
+import React from 'react';
+import classNames from 'classnames';
+import { feedGutter } from '../../../components/utilities/common';
+import type { SponsorStripConfig } from '../../../types';
+import {
+  COMMUNITY_CAP,
+  GOLD_CAP,
+  GOLD_MAX_HEIGHT,
+  PREMIUM_CAP,
+  SLOT_WIDTH,
+  WALL_MAX_HEIGHT,
+} from './sponsorLogoSizing';
+import { SponsorLogo } from './SponsorLogo';
+import { SponsorStripHeadlines } from './SponsorStripHeadlines';
+import type { PostHighlight } from '../../../graphql/highlights';
+import type { ResolvedSponsor } from './sponsorStripCreative';
+import {
+  HEADLINES_ROW_HEIGHT,
+  SPONSOR_ROW_HEIGHT,
+  usePublishStripHeight,
+} from './sponsorStripOffset';
+import { PREMIUM_SLOT_COUNT } from './sponsorStripRotation';
+import { useSponsorStripAds } from './useSponsorStripAds';
+
+interface SponsorStripProps {
+  config: SponsorStripConfig;
+  /**
+   * Passed in rather than queried here: the feed layout needs the same list to
+   * decide whether it can give up its Happening Now card, and one query
+   * cannot be allowed to answer that question two different ways.
+   */
+  headlines: PostHighlight[];
+}
+
+interface SponsorRowProps {
+  gold: ResolvedSponsor | null;
+  premium: ResolvedSponsor[];
+  community: ResolvedSponsor[];
+  wallRef: (node: HTMLElement | null) => void;
+}
+
+const SponsorRow = ({
+  gold,
+  premium,
+  community,
+  wallRef,
+}: SponsorRowProps): ReactElement => (
+  <div
+    data-testid="sponsorStripRow"
+    className={classNames(
+      'flex h-10 w-full items-center gap-5 border-t border-border-subtlest-tertiary',
+      feedGutter,
+    )}
+  >
+    {gold && (
+      <div className="flex shrink-0 items-center gap-x-2.5">
+        <span className="whitespace-nowrap text-text-quaternary typo-caption2">
+          Made possible by
+        </span>
+        {/* The gold mark is the one slot that keeps its own inks, its size and
+            its hover: one coloured, live mark against a silhouetted wall is
+            the whole hierarchy of the row. */}
+        <SponsorLogo
+          sponsor={gold}
+          slotIndex={0}
+          cap={GOLD_CAP}
+          maxHeight={GOLD_MAX_HEIGHT}
+          className="origin-left text-text-primary transition-transform duration-200 ease-in-out hover:scale-105"
+        />
+      </div>
+    )}
+    {gold && !!(premium.length || community.length) && (
+      <span
+        aria-hidden
+        className="h-5 w-px shrink-0 bg-border-subtlest-tertiary"
+      />
+    )}
+    {/* One run for both wall tiers, spread with `justify-between` the way the
+        broadcast bar this borrows from distributes its credits: the row
+        breathes on a wide window and tightens before it clips. Premium sits
+        left and carries a hair more ink; the slots are a fixed width, so a
+        rotation swapping a square mark for a long lockup cannot make the whole
+        row shuffle sideways. */}
+    <div
+      ref={wallRef}
+      className="flex min-w-0 flex-1 items-center justify-between gap-4 overflow-hidden"
+    >
+      {premium.map((sponsor, index) => (
+        <SponsorLogo
+          key={sponsor.genId}
+          sponsor={sponsor}
+          slotIndex={index + 1}
+          cap={PREMIUM_CAP}
+          boxWidth={SLOT_WIDTH}
+          maxHeight={WALL_MAX_HEIGHT}
+          monochrome
+          className="text-text-secondary transition-colors hover:text-text-primary"
+        />
+      ))}
+      {community.map((sponsor, index) => (
+        <SponsorLogo
+          key={sponsor.genId}
+          sponsor={sponsor}
+          // Offset by the full premium row rather than by how many premium
+          // creatives happened to fill it, so a slot index means the same
+          // position from one session to the next.
+          slotIndex={index + 1 + PREMIUM_SLOT_COUNT}
+          cap={COMMUNITY_CAP}
+          boxWidth={SLOT_WIDTH}
+          maxHeight={WALL_MAX_HEIGHT}
+          monochrome
+          className="text-text-tertiary transition-colors hover:text-text-primary"
+        />
+      ))}
+    </div>
+  </div>
+);
+
+/**
+ * The dock: the paid row with the breaking-news ticker stacked under it.
+ *
+ * Two rows rather than one, and the reason is not decoration. Browsers draw
+ * their link-status bubble in the bottom corner over whatever the page
+ * renders, and on a feed of links it is up most of the time. Stacking puts
+ * something expendable in its path — a label on ambient data — and lifts the
+ * row an advertiser paid for clear of it. It also earns the space: a permanent
+ * bar carrying only advertising is rent, while one carrying the headlines the
+ * reader came for is a feature that happens to be sponsored.
+ *
+ * Either row can be missing — no fill from the ad server, or no headline
+ * inside the freshness window — and the dock still holds the other one. What
+ * it must never do is show neither while the feed's Happening Now card is
+ * suppressed on its behalf, which is why an empty dock renders nothing at all
+ * and the suppression is keyed to the same gate.
+ */
+export const SponsorStrip = ({
+  config,
+  headlines,
+}: SponsorStripProps): ReactElement | null => {
+  const { gold, premium, community, wallRef } = useSponsorStripAds({
+    enabled: true,
+    config,
+  });
+  const hasSponsors = !!gold || !!premium.length || !!community.length;
+  // Published before the early return so the controls that lift for the dock
+  // also settle back when it has nothing to show.
+  usePublishStripHeight(
+    (hasSponsors ? SPONSOR_ROW_HEIGHT : 0) +
+      (headlines.length ? HEADLINES_ROW_HEIGHT : 0),
+  );
+
+  if (!hasSponsors && !headlines.length) {
+    return null;
+  }
+
+  return (
+    <div
+      data-testid="sponsorStrip"
+      className="sticky bottom-0 z-3 hidden w-full flex-col bg-background-default tablet:flex"
+    >
+      {hasSponsors && (
+        <SponsorRow
+          gold={gold}
+          premium={premium}
+          community={community}
+          wallRef={wallRef}
+        />
+      )}
+      {!!headlines.length && <SponsorStripHeadlines headlines={headlines} />}
+    </div>
+  );
+};
diff --git a/packages/shared/src/features/monetization/sponsorStrip/SponsorStripHeadlines.tsx b/packages/shared/src/features/monetization/sponsorStrip/SponsorStripHeadlines.tsx
new file mode 100644
index 00000000000..6555c7f85c4
--- /dev/null
+++ b/packages/shared/src/features/monetization/sponsorStrip/SponsorStripHeadlines.tsx
@@ -0,0 +1,96 @@
+import type { CSSProperties, ReactElement } from 'react';
+import React, { useCallback } from 'react';
+import classNames from 'classnames';
+import { getHighlightsUrl } from '../../../components/cards/highlight/common';
+import Link from '../../../components/utilities/Link';
+import { RelativeTime } from '../../../components/utilities/RelativeTime';
+import { feedGutter } from '../../../components/utilities/common';
+import { useLogContext } from '../../../contexts/LogContext';
+import type { PostHighlight } from '../../../graphql/highlights';
+import useLogEventOnce from '../../../hooks/log/useLogEventOnce';
+import { feedHighlightsLogEvent } from '../../../lib/feed';
+import { LogEvent, Origin } from '../../../lib/log';
+
+const HEADLINES_FEED_NAME = 'sponsor-strip-headlines';
+
+/**
+ * The row carries more than fits on purpose: it should read as a ticker
+ * continuing past the edge, not a list that happens to end. The fade is what
+ * makes that read as intentional — a hard clip chops a headline in half and
+ * looks like a bug.
+ */
+const fadeStyle: CSSProperties = {
+  maskImage:
+    'linear-gradient(to right, black calc(100% - 2.5rem), transparent)',
+  WebkitMaskImage:
+    'linear-gradient(to right, black calc(100% - 2.5rem), transparent)',
+};
+
+export const SponsorStripHeadlines = ({
+  headlines,
+}: {
+  headlines: PostHighlight[];
+}): ReactElement => {
+  const { logEvent } = useLogContext();
+
+  useLogEventOnce(() =>
+    feedHighlightsLogEvent(LogEvent.Impression, {
+      feedName: HEADLINES_FEED_NAME,
+      action: 'impression',
+      count: headlines.length,
+      highlightIds: headlines.map(({ id }) => id),
+      origin: Origin.Feed,
+    }),
+  );
+
+  const onHeadlineClick = useCallback(
+    (highlight: PostHighlight, position: number) =>
+      logEvent(
+        feedHighlightsLogEvent(LogEvent.Click, {
+          feedName: HEADLINES_FEED_NAME,
+          clickedHighlight: highlight,
+          position,
+          origin: Origin.Feed,
+        }),
+      ),
+    [logEvent],
+  );
+
+  return (
+    <div
+      data-testid="sponsorStripHeadlines"
+      className={classNames(
+        'flex h-8 w-full items-center gap-4 border-t border-border-subtlest-tertiary bg-background-default',
+        feedGutter,
+      )}
+    >
+      {/* The sacrificial left zone, and the reason the strip has two rows at
+          all: the browser paints its link-status bubble over this corner, and
+          a label losing a word to it costs nothing, where the row above it is
+          the one somebody paid for. */}
+      <span className="shrink-0 whitespace-nowrap text-text-quaternary typo-caption2">
+        Breaking news
+      </span>
+      <div
+        className="flex min-w-0 flex-1 items-center gap-5 overflow-hidden"
+        style={fadeStyle}
+      >
+        {headlines.map((highlight, index) => (
+          <Link href={getHighlightsUrl(highlight.id)} key={highlight.id}>
+            <a
+              href={getHighlightsUrl(highlight.id)}
+              onClick={() => onHeadlineClick(highlight, index)}
+              className="flex shrink-0 items-center gap-1.5 whitespace-nowrap text-text-secondary typo-caption1 hover:text-text-primary"
+            >
+              {highlight.headline}
+              <RelativeTime
+                dateTime={highlight.highlightedAt}
+                className="text-text-quaternary"
+              />
+            </a>
+          </Link>
+        ))}
+      </div>
+    </div>
+  );
+};
diff --git a/packages/shared/src/features/monetization/sponsorStrip/mockSponsorStripAds.ts b/packages/shared/src/features/monetization/sponsorStrip/mockSponsorStripAds.ts
new file mode 100644
index 00000000000..801e08b031f
--- /dev/null
+++ b/packages/shared/src/features/monetization/sponsorStrip/mockSponsorStripAds.ts
@@ -0,0 +1,100 @@
+import { SponsorTier } from './sponsorStripCreative';
+
+/**
+ * Stand-in for the `footer_logo` placement while the ad server side is built.
+ * Swapping it for the real thing is one call:
+ *
+ *   GET /v1/a/footer_logo?count=<n>  (+ the consent params in `lib/ads.ts`)
+ *
+ * The payload below is the wire shape `sponsorStripCreativeSchema` parses, so
+ * the response drops in without touching anything downstream.
+ *
+ * PLACEHOLDER DATA — not a sponsorship and not an ad server. The wall marks
+ * are advertiser logos already published on business.daily.dev, borrowed so
+ * the row can be judged at the weight and spacing real assets give it. The
+ * gold slot is deliberately a fictional company: the paid slot is the one
+ * place where a real name would read as a deal that has been signed.
+ *
+ * One mark is deliberately absent: business.daily.dev serves GitLab's logo as
+ * a base64 WebP wrapped in an `<svg>`, and a raster has no alpha shape to mask
+ * — it silhouettes into a solid block. It is the clearest example of why real
+ * inventory needs an asset spec, and it is left out rather than papered over.
+ *
+ * `pixel` is empty throughout. A fixture that pinged the ad server with
+ * invented generation ids would put junk impressions in real reporting; the
+ * pixel path is covered by the specs instead.
+ */
+
+const LOGO_BASE = 'https://business.daily.dev/assets/company-logos';
+
+const wallSponsor = (
+  company: string,
+  file: string,
+  ratio: number,
+  tier: SponsorTier,
+) => ({
+  gen_id: `mock-${file}`,
+  company,
+  // The same file for both themes: the wall silhouettes its marks through a
+  // mask that takes the row's text colour, so one asset serves either ground.
+  // Real creatives are expected to carry a themed pair — see the gold slot,
+  // which cannot be masked because its colour is the point.
+  logo_img: {
+    light: `${LOGO_BASE}/${file}.svg`,
+    dark: `${LOGO_BASE}/${file}.svg`,
+  },
+  logo_ratio: ratio,
+  link: `https://daily.dev/?utm_source=sponsor_strip&sponsor=${file}`,
+  pixel: [] as string[],
+  tier,
+});
+
+const GLYPH_COLOR = '#CE3DF3';
+
+/**
+ * A lockup rather than a word, so the paid slot reads as a logo at a glance
+ * the way the marks beside it do. Two inks: the glyph holds its brand colour
+ * in both themes while the wordmark flips, which is exactly the case a single
+ * flat file cannot serve and the reason the wire contract takes a pair.
+ */
+const goldLockup = (company: string, wordmark: string): string => {
+  const width = company.length * 11 + 46;
+  const svg = `<svg xmlns="http://www.w3.org/2000/svg" width="${width}" height="32" viewBox="0 0 ${width} 32"><rect x="0" y="4" width="24" height="24" rx="7" fill="${GLYPH_COLOR}"/><path d="M7.5 16.5l3.5 3.5 6-7" stroke="#FFFFFF" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round" fill="none"/><text x="32" y="22" font-family="Verdana,Geneva,sans-serif" font-size="17" font-weight="700" fill="${wordmark}">${company}</text></svg>`;
+
+  return `data:image/svg+xml,${encodeURIComponent(svg)}`;
+};
+
+const GOLD_COMPANY = 'Quantile';
+const GOLD_WIDTH = GOLD_COMPANY.length * 11 + 46;
+
+const MOCK_SPONSOR_STRIP_ADS = [
+  {
+    gen_id: 'mock-gold',
+    company: GOLD_COMPANY,
+    logo_img: {
+      light: goldLockup(GOLD_COMPANY, '#0E1217'),
+      dark: goldLockup(GOLD_COMPANY, '#FFFFFF'),
+    },
+    logo_ratio: GOLD_WIDTH / 32,
+    link: 'https://daily.dev/?utm_source=sponsor_strip&sponsor=quantile',
+    pixel: [] as string[],
+    tier: SponsorTier.Gold,
+  },
+  // Ratios are the marks' own, read off each file's viewBox, so the optical
+  // sizing has the same numbers a real creative would carry.
+  wallSponsor('Datadog', 'datadog', 800.5 / 203.19, SponsorTier.Premium),
+  wallSponsor('PostHog', 'posthog', 512 / 90, SponsorTier.Premium),
+  wallSponsor('ClickHouse', 'clickhouse', 584.9 / 103.1, SponsorTier.Premium),
+  wallSponsor('Retool', 'retool', 87 / 17, SponsorTier.Premium),
+  wallSponsor('Snyk', 'snyk', 65 / 35, SponsorTier.Premium),
+  wallSponsor('Okta', 'okta', 512 / 169, SponsorTier.Community),
+  wallSponsor('Neo4j', 'neo4j', 512 / 170, SponsorTier.Community),
+  wallSponsor('Pulumi', 'pulumi', 512 / 128, SponsorTier.Community),
+  wallSponsor('LaunchDarkly', 'launchdarkly', 512 / 80, SponsorTier.Community),
+  wallSponsor('Sonar', 'sonar', 512 / 125, SponsorTier.Community),
+  wallSponsor('JetBrains', 'jetbrains', 298 / 64, SponsorTier.Community),
+  wallSponsor('Sentry', 'sentry', 512 / 113, SponsorTier.Community),
+];
+
+export const fetchSponsorStripAds = async (): Promise<unknown> =>
+  MOCK_SPONSOR_STRIP_ADS;
diff --git a/packages/shared/src/features/monetization/sponsorStrip/sponsorLogoSizing.spec.ts b/packages/shared/src/features/monetization/sponsorStrip/sponsorLogoSizing.spec.ts
new file mode 100644
index 00000000000..4160e92efe0
--- /dev/null
+++ b/packages/shared/src/features/monetization/sponsorStrip/sponsorLogoSizing.spec.ts
@@ -0,0 +1,66 @@
+import {
+  COMMUNITY_CAP,
+  SLOT_GAP,
+  SLOT_WIDTH,
+  WALL_MAX_HEIGHT,
+  boxedLogoHeight,
+  fittedSlotCount,
+  opticalHeight,
+} from './sponsorLogoSizing';
+
+describe('opticalHeight', () => {
+  it('should give a square mark more height than a long lockup', () => {
+    expect(opticalHeight(1, COMMUNITY_CAP)).toBeGreaterThan(
+      opticalHeight(6, COMMUNITY_CAP),
+    );
+  });
+
+  it('should clamp both extremes so nothing blows out the row', () => {
+    expect(opticalHeight(0.1, COMMUNITY_CAP)).toEqual(
+      Math.round(COMMUNITY_CAP * 1.6),
+    );
+    expect(opticalHeight(20, COMMUNITY_CAP)).toEqual(
+      Math.round(COMMUNITY_CAP * 0.8),
+    );
+  });
+});
+
+describe('boxedLogoHeight', () => {
+  it('should hold a wide lockup down to what the box can show', () => {
+    const ratio = 12;
+
+    expect(
+      boxedLogoHeight(ratio, COMMUNITY_CAP, SLOT_WIDTH) * ratio,
+    ).toBeLessThanOrEqual(SLOT_WIDTH);
+  });
+
+  it('should leave a mark that already fits at its optical height', () => {
+    expect(boxedLogoHeight(2, COMMUNITY_CAP, SLOT_WIDTH)).toEqual(
+      opticalHeight(2, COMMUNITY_CAP),
+    );
+  });
+});
+
+describe('boxedLogoHeight, row ceiling', () => {
+  it('should hold a square mark down to the row it sits in', () => {
+    // A 1:1 mark takes the tallest optical height there is, which is what
+    // would otherwise push the row open.
+    expect(
+      boxedLogoHeight(1, COMMUNITY_CAP, SLOT_WIDTH, WALL_MAX_HEIGHT),
+    ).toEqual(WALL_MAX_HEIGHT);
+  });
+});
+
+describe('fittedSlotCount', () => {
+  it('should count the slots that fit with their gaps', () => {
+    const three = SLOT_WIDTH * 3 + SLOT_GAP * 2;
+
+    expect(fittedSlotCount(three)).toEqual(3);
+    expect(fittedSlotCount(three + SLOT_WIDTH - 1)).toEqual(3);
+  });
+
+  it('should treat an unmeasurably narrow row as unmeasured', () => {
+    expect(fittedSlotCount(SLOT_WIDTH - 1)).toBeNull();
+    expect(fittedSlotCount(0)).toBeNull();
+  });
+});
diff --git a/packages/shared/src/features/monetization/sponsorStrip/sponsorLogoSizing.ts b/packages/shared/src/features/monetization/sponsorStrip/sponsorLogoSizing.ts
new file mode 100644
index 00000000000..41fd7626b6f
--- /dev/null
+++ b/packages/shared/src/features/monetization/sponsorStrip/sponsorLogoSizing.ts
@@ -0,0 +1,59 @@
+/** Cap height of the gold mark; it reads a step above the wall, not a tier. */
+export const GOLD_CAP = 22;
+/** The wall's two tiers differ by a hair of ink, not by a wash of opacity. */
+export const PREMIUM_CAP = 17;
+export const COMMUNITY_CAP = 15;
+
+/**
+ * Ceilings for the rows the optical sizing knows nothing about: a near-square
+ * mark would otherwise take its full optical height and outgrow the 40px row.
+ */
+export const GOLD_MAX_HEIGHT = 26;
+export const WALL_MAX_HEIGHT = 20;
+
+/** Fixed box every wall mark is drawn into, and the gap between boxes. */
+export const SLOT_WIDTH = 88;
+export const SLOT_GAP = 16;
+
+const REFERENCE_RATIO = 3.5;
+
+/**
+ * Logo files run from square marks to 6:1 lockups. Sizing them all to one cap
+ * height makes the square ones illegible and lets the long ones dominate, so
+ * height is normalised by area instead — every mark gets roughly the same ink
+ * — and clamped so nothing blows out the row.
+ */
+export const opticalHeight = (ratio: number, cap: number): number =>
+  Math.round(
+    Math.min(
+      cap * 1.6,
+      Math.max(cap * 0.8, cap * Math.sqrt(REFERENCE_RATIO / ratio)),
+    ),
+  );
+
+/** Optical height, held down to whatever fits the box and the row. */
+export const boxedLogoHeight = (
+  ratio: number,
+  cap: number,
+  maxWidth: number,
+  maxHeight: number = Number.POSITIVE_INFINITY,
+): number =>
+  Math.floor(Math.min(opticalHeight(ratio, cap), maxWidth / ratio, maxHeight));
+
+/**
+ * How many fixed-width slots the measured row holds. `null` means "not
+ * measured yet" rather than "nothing fits": a row narrower than a single slot
+ * cannot have been laid out, and treating that as zero would empty the row
+ * with nothing guaranteed to come along and correct it.
+ */
+export const fittedSlotCount = (
+  available: number,
+  slotWidth: number = SLOT_WIDTH,
+  gap: number = SLOT_GAP,
+): number | null => {
+  if (available < slotWidth) {
+    return null;
+  }
+
+  return Math.floor((available + gap) / (slotWidth + gap));
+};
diff --git a/packages/shared/src/features/monetization/sponsorStrip/sponsorStripCreative.spec.ts b/packages/shared/src/features/monetization/sponsorStrip/sponsorStripCreative.spec.ts
new file mode 100644
index 00000000000..8a1ab63431d
--- /dev/null
+++ b/packages/shared/src/features/monetization/sponsorStrip/sponsorStripCreative.spec.ts
@@ -0,0 +1,45 @@
+import {
+  SponsorTier,
+  parseSponsors,
+  resolveSponsor,
+} from './sponsorStripCreative';
+
+const raw = (overrides: Record<string, unknown> = {}) => ({
+  gen_id: 'gen-1',
+  company: 'Quantile',
+  logo_img: { light: 'light.svg', dark: 'dark.svg' },
+  logo_ratio: 3.5,
+  link: 'https://quantile.dev',
+  pixel: ['https://api.daily.dev/px'],
+  tier: SponsorTier.Premium,
+  ...overrides,
+});
+
+describe('parseSponsors', () => {
+  it('should keep a well formed creative', () => {
+    expect(parseSponsors([raw()])).toHaveLength(1);
+  });
+
+  it('should drop a creative the row could not link to', () => {
+    expect(parseSponsors([raw({ link: 'not a url' })])).toEqual([]);
+  });
+
+  it('should treat an unknown tier as community rather than dropping the sale', () => {
+    const [creative] = parseSponsors([raw({ tier: 'platinum' })]);
+
+    expect(creative.tier).toEqual(SponsorTier.Community);
+  });
+
+  it('should tolerate a payload that is not a list', () => {
+    expect(parseSponsors(undefined)).toEqual([]);
+  });
+});
+
+describe('resolveSponsor', () => {
+  it('should pick the logo for the current theme', () => {
+    const [creative] = parseSponsors([raw()]);
+
+    expect(resolveSponsor(creative, true).logo).toEqual('light.svg');
+    expect(resolveSponsor(creative, false).logo).toEqual('dark.svg');
+  });
+});
diff --git a/packages/shared/src/features/monetization/sponsorStrip/sponsorStripCreative.ts b/packages/shared/src/features/monetization/sponsorStrip/sponsorStripCreative.ts
new file mode 100644
index 00000000000..c7e398d83f1
--- /dev/null
+++ b/packages/shared/src/features/monetization/sponsorStrip/sponsorStripCreative.ts
@@ -0,0 +1,75 @@
+import { z } from 'zod';
+import { urlParseSchema } from '../../../lib/links';
+
+export enum SponsorTier {
+  /** One slot, static, always leftmost. Never enters a rotation deck. */
+  Gold = 'gold',
+  Premium = 'premium',
+  Community = 'community',
+}
+
+const themedStringSchema = z.object({
+  dark: z.string(),
+  light: z.string(),
+});
+
+/**
+ * Raw shape of a `footer_logo` creative from the ad server (snake_case JSON),
+ * matching how engagement-ad creatives arrive.
+ */
+export const sponsorStripCreativeSchema = z.object({
+  gen_id: z.string(),
+  company: z.string(),
+  logo_img: themedStringSchema,
+  /**
+   * Intrinsic width / height. Logo files run from square marks to 6:1
+   * lockups, so a row that fixes the height needs the ratio to size the
+   * mark optically rather than letting a long lockup dominate.
+   */
+  logo_ratio: z.number().positive(),
+  link: urlParseSchema,
+  pixel: z.array(z.string()).optional().default([]),
+  /**
+   * An unknown tier lands in community rather than dropping the creative: an
+   * unranked advertiser still earns its impression, an absent one does not.
+   */
+  tier: z.enum(SponsorTier).catch(SponsorTier.Community),
+});
+
+export type SponsorStripCreative = z.infer<typeof sponsorStripCreativeSchema>;
+export type ThemedValue = z.infer<typeof themedStringSchema>;
+
+/** A creative with its themed logo resolved to the current theme. */
+export interface ResolvedSponsor {
+  genId: string;
+  company: string;
+  logo: string;
+  ratio: number;
+  link: string;
+  pixel: string[];
+  tier: SponsorTier;
+}
+
+export const parseSponsors = (raw: unknown): SponsorStripCreative[] => {
+  if (!Array.isArray(raw)) {
+    return [];
+  }
+
+  return raw.flatMap((creative) => {
+    const result = sponsorStripCreativeSchema.safeParse(creative);
+    return result.success ? [result.data] : [];
+  });
+};
+
+export const resolveSponsor = (
+  creative: SponsorStripCreative,
+  isLight: boolean,
+): ResolvedSponsor => ({
+  genId: creative.gen_id,
+  company: creative.company,
+  logo: isLight ? creative.logo_img.light : creative.logo_img.dark,
+  ratio: creative.logo_ratio,
+  link: creative.link,
+  pixel: creative.pixel,
+  tier: creative.tier,
+});
diff --git a/packages/shared/src/features/monetization/sponsorStrip/sponsorStripLog.ts b/packages/shared/src/features/monetization/sponsorStrip/sponsorStripLog.ts
new file mode 100644
index 00000000000..37e782a6554
--- /dev/null
+++ b/packages/shared/src/features/monetization/sponsorStrip/sponsorStripLog.ts
@@ -0,0 +1,38 @@
+import type { LogEvent } from '../../../hooks/log/useLogQueue';
+import type { AdActions } from '../../../lib/ads';
+import { AdPlacement } from '../../../lib/ads';
+import type { ResolvedSponsor } from './sponsorStripCreative';
+
+/**
+ * Every sponsor-strip signal (impression, viewable impression, click, air
+ * time) reports through this one builder, so a logo's whole story can be cut
+ * by tier and slot in the warehouse. Shaped like `adLogEvent` in `lib/feed.ts`
+ * — same `target_type`, same url field — so the strip sits alongside the other
+ * placements rather than needing its own reporting.
+ */
+export const sponsorStripLogEvent = (
+  action: AdActions,
+  sponsor: ResolvedSponsor,
+  slotIndex: number,
+  extra?: Record<string, unknown>,
+): LogEvent => ({
+  event_name: action,
+  target_id: sponsor.company,
+  target_type: 'ad',
+  feed_item_target_url: sponsor.link,
+  extra: JSON.stringify({
+    placement: AdPlacement.SponsorStrip,
+    tier: sponsor.tier,
+    slot_index: slotIndex,
+    gen_id: sponsor.genId,
+    ...extra,
+  }),
+});
+
+/**
+ * Air time is a duration event, so its key has to survive a rotation: the
+ * outgoing logo's event ends under its own key while the incoming one starts
+ * under a new one, in the same render.
+ */
+export const airTimeKey = (slotIndex: number, genId: string): string =>
+  `ss-${slotIndex}-${genId}`;
diff --git a/packages/shared/src/features/monetization/sponsorStrip/sponsorStripOffset.ts b/packages/shared/src/features/monetization/sponsorStrip/sponsorStripOffset.ts
new file mode 100644
index 00000000000..da557bd8211
--- /dev/null
+++ b/packages/shared/src/features/monetization/sponsorStrip/sponsorStripOffset.ts
@@ -0,0 +1,39 @@
+import { useEffect } from 'react';
+
+/**
+ * The dock's height, published on the document root so the controls that float
+ * at the bottom of the viewport can lift clear of it.
+ *
+ * A custom property rather than a context because the consumers are in other
+ * trees entirely: the feedback pill renders from `MainLayout`, the
+ * scroll-to-top button from the webapp's footer wrapper and the extension's
+ * new-tab shell. None of them are below the strip, so nothing React hands
+ * down could reach them. The property only exists while the dock is mounted,
+ * which is what scopes the offset to the experiment.
+ */
+const SPONSOR_STRIP_HEIGHT_VAR = '--sponsor-strip-height';
+
+/**
+ * Row heights, derived rather than measured: both rows are a fixed height by
+ * design, and a number is testable where a ResizeObserver in a headless DOM is
+ * not. Keep these in step with the `h-10` and `h-8` on the rows themselves.
+ */
+export const SPONSOR_ROW_HEIGHT = 40;
+export const HEADLINES_ROW_HEIGHT = 32;
+
+export const usePublishStripHeight = (height: number): void => {
+  useEffect(() => {
+    const { style } = globalThis.document.documentElement;
+
+    if (!height) {
+      style.removeProperty(SPONSOR_STRIP_HEIGHT_VAR);
+      return undefined;
+    }
+
+    style.setProperty(SPONSOR_STRIP_HEIGHT_VAR, `${height}px`);
+
+    return () => {
+      style.removeProperty(SPONSOR_STRIP_HEIGHT_VAR);
+    };
+  }, [height]);
+};
diff --git a/packages/shared/src/features/monetization/sponsorStrip/sponsorStripRotation.spec.ts b/packages/shared/src/features/monetization/sponsorStrip/sponsorStripRotation.spec.ts
new file mode 100644
index 00000000000..a132266dad2
--- /dev/null
+++ b/packages/shared/src/features/monetization/sponsorStrip/sponsorStripRotation.spec.ts
@@ -0,0 +1,161 @@
+import type { SponsorStripCreative } from './sponsorStripCreative';
+import { SponsorTier } from './sponsorStripCreative';
+import {
+  canRotate,
+  createRotation,
+  partitionByTier,
+  resizeRotation,
+  rotateNextSlot,
+  rotateSlot,
+  rotationSponsors,
+} from './sponsorStripRotation';
+
+const creative = (
+  id: string,
+  tier = SponsorTier.Community,
+): SponsorStripCreative =>
+  ({
+    gen_id: id,
+    company: id,
+    tier,
+  } as SponsorStripCreative);
+
+const pool = (size: number, tier = SponsorTier.Community) =>
+  Array.from({ length: size }, (_, index) => creative(`c${index}`, tier));
+
+/** Keeps the deck in pool order so positions are assertable. */
+const noShuffle = <T>(items: T[]): T[] => [...items];
+
+const companies = (creatives: SponsorStripCreative[]) =>
+  creatives.map(({ company }) => company);
+
+describe('partitionByTier', () => {
+  it('should keep a single gold sponsor', () => {
+    const pools = partitionByTier([
+      creative('gold-1', SponsorTier.Gold),
+      creative('gold-2', SponsorTier.Gold),
+      creative('premium-1', SponsorTier.Premium),
+      creative('community-1'),
+    ]);
+
+    expect(pools.gold?.company).toEqual('gold-1');
+    expect(companies(pools.premium)).toEqual(['premium-1']);
+    expect(companies(pools.community)).toEqual(['community-1']);
+  });
+
+  it('should report no gold sponsor when none was sold', () => {
+    expect(partitionByTier(pool(3)).gold).toBeNull();
+  });
+});
+
+describe('createRotation', () => {
+  it('should hold one cursor per slot', () => {
+    const rotation = createRotation(pool(10), 4, noShuffle);
+
+    expect(companies(rotationSponsors(rotation))).toEqual([
+      'c0',
+      'c1',
+      'c2',
+      'c3',
+    ]);
+  });
+
+  it('should not open more slots than the deck can fill', () => {
+    const rotation = createRotation(pool(2), 4, noShuffle);
+
+    expect(rotationSponsors(rotation)).toHaveLength(2);
+  });
+});
+
+describe('rotateSlot', () => {
+  it('should hold still when the deck is no larger than the row', () => {
+    const rotation = createRotation(pool(4), 4, noShuffle);
+
+    expect(canRotate(rotation)).toBe(false);
+    expect(rotateSlot(rotation, 0)).toBe(rotation);
+  });
+
+  it('should replace only the rotated slot', () => {
+    const rotation = rotateSlot(createRotation(pool(6), 4, noShuffle), 1);
+
+    expect(companies(rotationSponsors(rotation))).toEqual([
+      'c0',
+      'c4',
+      'c2',
+      'c3',
+    ]);
+  });
+
+  it('should never show the same sponsor twice, whatever the rotation order', () => {
+    let rotation = createRotation(pool(6), 4, noShuffle);
+
+    // Deliberately lopsided: one slot rotating far more than its neighbours is
+    // what a staggered ticker looks like if a slot count changes mid-session.
+    [0, 0, 0, 2, 0, 1, 0, 0, 3, 0, 0, 0].forEach((slot) => {
+      rotation = rotateSlot(rotation, slot);
+      const shown = companies(rotationSponsors(rotation));
+
+      expect(new Set(shown).size).toEqual(shown.length);
+    });
+  });
+
+  it('should ignore a slot the row does not have', () => {
+    const rotation = createRotation(pool(6), 4, noShuffle);
+
+    expect(rotateSlot(rotation, 9)).toBe(rotation);
+    expect(rotateSlot(rotation, -1)).toBe(rotation);
+  });
+});
+
+describe('rotateNextSlot', () => {
+  it('should take the slots in turn so each holds its logo for a full cycle', () => {
+    let rotation = createRotation(pool(8), 4, noShuffle);
+    const rotated: number[] = [];
+
+    Array.from({ length: 8 }).forEach(() => {
+      const before = rotationSponsors(rotation);
+      rotation = rotateNextSlot(rotation);
+      const after = rotationSponsors(rotation);
+
+      rotated.push(
+        after.findIndex((sponsor, slot) => sponsor !== before[slot]),
+      );
+    });
+
+    expect(rotated).toEqual([0, 1, 2, 3, 0, 1, 2, 3]);
+  });
+
+  it('should do nothing to an empty row', () => {
+    const rotation = createRotation([], 4, noShuffle);
+
+    expect(rotateNextSlot(rotation)).toBe(rotation);
+  });
+});
+
+describe('resizeRotation', () => {
+  it('should drop the rightmost slots when the row narrows', () => {
+    const rotation = resizeRotation(createRotation(pool(8), 4, noShuffle), 2);
+
+    expect(companies(rotationSponsors(rotation))).toEqual(['c0', 'c1']);
+  });
+
+  it('should fill new slots with sponsors that are not already up', () => {
+    const rotation = resizeRotation(createRotation(pool(8), 2, noShuffle), 4);
+    const shown = companies(rotationSponsors(rotation));
+
+    expect(shown).toHaveLength(4);
+    expect(new Set(shown).size).toEqual(4);
+  });
+
+  it('should cap growth at the deck size', () => {
+    const rotation = resizeRotation(createRotation(pool(3), 2, noShuffle), 12);
+
+    expect(rotationSponsors(rotation)).toHaveLength(3);
+  });
+
+  it('should keep the same rotation when nothing changed', () => {
+    const rotation = createRotation(pool(8), 4, noShuffle);
+
+    expect(resizeRotation(rotation, 4)).toBe(rotation);
+  });
+});
diff --git a/packages/shared/src/features/monetization/sponsorStrip/sponsorStripRotation.ts b/packages/shared/src/features/monetization/sponsorStrip/sponsorStripRotation.ts
new file mode 100644
index 00000000000..8cd51c7c207
--- /dev/null
+++ b/packages/shared/src/features/monetization/sponsorStrip/sponsorStripRotation.ts
@@ -0,0 +1,141 @@
+import { shuffleArray } from '../../../lib/func';
+import type { SponsorStripCreative } from './sponsorStripCreative';
+import { SponsorTier } from './sponsorStripCreative';
+
+export const PREMIUM_SLOT_COUNT = 4;
+
+interface SponsorPools {
+  gold: SponsorStripCreative | null;
+  premium: SponsorStripCreative[];
+  community: SponsorStripCreative[];
+}
+
+export const partitionByTier = (
+  sponsors: SponsorStripCreative[],
+): SponsorPools => ({
+  // A second gold creative is dropped rather than demoted. The tier is sold as
+  // the one static slot, so two of them is not a degraded version of what was
+  // sold, it is a different thing.
+  gold: sponsors.find(({ tier }) => tier === SponsorTier.Gold) ?? null,
+  premium: sponsors.filter(({ tier }) => tier === SponsorTier.Premium),
+  community: sponsors.filter(({ tier }) => tier === SponsorTier.Community),
+});
+
+export interface Rotation {
+  deck: SponsorStripCreative[];
+  /**
+   * One absolute draw position per slot; the creative on screen is
+   * `deck[cursor % deck.length]`. Absolute rather than wrapped so a slot's
+   * next draw is always "further down the deck than anything showing".
+   */
+  cursors: number[];
+  next: number;
+}
+
+type Shuffle = <T>(items: T[]) => T[];
+
+export const createRotation = (
+  pool: SponsorStripCreative[],
+  slotCount: number,
+  shuffle: Shuffle = shuffleArray,
+): Rotation => {
+  // Shuffled once per mount so no advertiser is permanently first, and — once
+  // the row starts trimming to fit — none is permanently the one dropped.
+  const deck = shuffle(pool);
+  const count = Math.max(0, Math.min(slotCount, deck.length));
+
+  return {
+    deck,
+    cursors: Array.from({ length: count }, (_, index) => index),
+    next: count,
+  };
+};
+
+export const rotationSponsors = ({
+  deck,
+  cursors,
+}: Rotation): SponsorStripCreative[] =>
+  cursors.map((cursor) => deck[cursor % deck.length]);
+
+/** A deck no larger than the row it fills has nothing to rotate to. */
+export const canRotate = ({ deck, cursors }: Rotation): boolean =>
+  deck.length > cursors.length;
+
+export const rotateSlot = (rotation: Rotation, slot: number): Rotation => {
+  if (!canRotate(rotation) || slot < 0 || slot >= rotation.cursors.length) {
+    return rotation;
+  }
+
+  const { deck, cursors, next } = rotation;
+  const shown = new Set(
+    cursors
+      .filter((_, index) => index !== slot)
+      .map((cursor) => cursor % deck.length),
+  );
+
+  // Skip past anything already on screen, so the same logo can never appear
+  // twice in the row. Terminates because the deck is larger than the row.
+  let position = next;
+  while (shown.has(position % deck.length)) {
+    position += 1;
+  }
+
+  const updated = [...cursors];
+  updated[slot] = position;
+
+  return { deck, cursors: updated, next: position + 1 };
+};
+
+/**
+ * Rotates the slot whose logo has been up longest, which is the lowest draw
+ * position. Deriving the turn from the state rather than from a counter beside
+ * it keeps each slot's turn evenly spaced and makes the ticker a pure step: a
+ * counter captured in an interval callback reads whatever it has reached by the
+ * time React applies the update, not the value it had when the tick fired, so
+ * every queued rotation lands on the same slot.
+ */
+export const rotateNextSlot = (rotation: Rotation): Rotation => {
+  const { cursors } = rotation;
+
+  if (!cursors.length) {
+    return rotation;
+  }
+
+  const oldest = cursors.reduce(
+    (slot, cursor, index) => (cursor < cursors[slot] ? index : slot),
+    0,
+  );
+
+  return rotateSlot(rotation, oldest);
+};
+
+/**
+ * Grows or shrinks the row as the viewport changes. Shrinking drops the
+ * rightmost slots, which is where the trimmed marks were already going.
+ */
+export const resizeRotation = (
+  rotation: Rotation,
+  slotCount: number,
+): Rotation => {
+  const { deck, cursors, next } = rotation;
+  const count = Math.max(0, Math.min(slotCount, deck.length));
+
+  if (count === cursors.length) {
+    return rotation;
+  }
+
+  if (count < cursors.length) {
+    return { deck, cursors: cursors.slice(0, count), next };
+  }
+
+  const added = count - cursors.length;
+
+  return {
+    deck,
+    cursors: [
+      ...cursors,
+      ...Array.from({ length: added }, (_, index) => next + index),
+    ],
+    next: next + added,
+  };
+};
diff --git a/packages/shared/src/features/monetization/sponsorStrip/useSponsorSlotLog.ts b/packages/shared/src/features/monetization/sponsorStrip/useSponsorSlotLog.ts
new file mode 100644
index 00000000000..6f3dbfab009
--- /dev/null
+++ b/packages/shared/src/features/monetization/sponsorStrip/useSponsorSlotLog.ts
@@ -0,0 +1,95 @@
+import { useCallback, useEffect, useRef } from 'react';
+import { useLogContext } from '../../../contexts/LogContext';
+import { AdActions } from '../../../lib/ads';
+import type { ViewabilityData } from '../viewability';
+import { viewabilityLogExtra } from '../viewability';
+import { useViewability } from '../useViewability';
+import type { ResolvedSponsor } from './sponsorStripCreative';
+import { airTimeKey, sponsorStripLogEvent } from './sponsorStripLog';
+
+interface UseSponsorSlotLogProps {
+  sponsor: ResolvedSponsor;
+  slotIndex: number;
+}
+
+interface UseSponsorSlotLog<T extends HTMLElement> {
+  ref: (node: T | null) => void;
+  isViewable: boolean;
+  onClick: () => void;
+}
+
+/**
+ * The four signals for one logo in one slot: an impression when it takes the
+ * slot, an IAB viewable impression when it has actually been seen, air time
+ * for as long as it holds the slot, and a click.
+ */
+export const useSponsorSlotLog = <T extends HTMLElement = HTMLElement>({
+  sponsor,
+  slotIndex,
+}: UseSponsorSlotLogProps): UseSponsorSlotLog<T> => {
+  const { logEvent, logEventStart, logEventEnd } = useLogContext();
+  const sponsorRef = useRef(sponsor);
+  sponsorRef.current = sponsor;
+  const { genId } = sponsor;
+
+  useEffect(() => {
+    const key = airTimeKey(slotIndex, genId);
+    const startAirTime = () =>
+      logEventStart(
+        key,
+        sponsorStripLogEvent(AdActions.AirTime, sponsorRef.current, slotIndex),
+      );
+
+    logEvent(
+      sponsorStripLogEvent(AdActions.Impression, sponsorRef.current, slotIndex),
+    );
+    startAirTime();
+
+    // Going inactive ends every open duration event and beacons it, so a logo
+    // still holding its slot when the reader comes back needs its air time
+    // reopened — `useLogPageView` reopens the page view for the same reason.
+    const onLifecycle = (event: Event) => {
+      const { newState } =
+        (event as CustomEvent<{ newState?: string }>).detail ?? {};
+
+      if (newState === 'active') {
+        startAirTime();
+      }
+    };
+
+    globalThis.addEventListener('statechange', onLifecycle);
+
+    return () => {
+      globalThis.removeEventListener('statechange', onLifecycle);
+      logEventEnd(key);
+    };
+  }, [genId, slotIndex, logEvent, logEventStart, logEventEnd]);
+
+  const onViewable = useCallback(
+    (data: ViewabilityData) =>
+      logEvent(
+        sponsorStripLogEvent(
+          AdActions.Viewable,
+          sponsorRef.current,
+          slotIndex,
+          viewabilityLogExtra(data),
+        ),
+      ),
+    [logEvent, slotIndex],
+  );
+
+  const { ref, isViewable } = useViewability<T>({
+    onViewable,
+    trackingKey: genId,
+  });
+
+  const onClick = useCallback(
+    () =>
+      logEvent(
+        sponsorStripLogEvent(AdActions.Click, sponsorRef.current, slotIndex),
+      ),
+    [logEvent, slotIndex],
+  );
+
+  return { ref, isViewable, onClick };
+};
diff --git a/packages/shared/src/features/monetization/sponsorStrip/useSponsorStrip.spec.tsx b/packages/shared/src/features/monetization/sponsorStrip/useSponsorStrip.spec.tsx
new file mode 100644
index 00000000000..90b0f9c5be2
--- /dev/null
+++ b/packages/shared/src/features/monetization/sponsorStrip/useSponsorStrip.spec.tsx
@@ -0,0 +1,104 @@
+import React from 'react';
+import { renderHook } from '@testing-library/react';
+import type { AuthContextData } from '../../../contexts/AuthContext';
+import AuthContext from '../../../contexts/AuthContext';
+import { getLogContextStatic } from '../../../contexts/LogContext';
+import type { LogContextData } from '../../../hooks/log/useLogContextData';
+import { SharedFeedPage } from '../../../components/utilities/common';
+import { useConditionalFeature } from '../../../hooks/useConditionalFeature';
+import { useViewSizeClient } from '../../../hooks/useViewSize';
+import { useSponsorStrip } from './useSponsorStrip';
+
+jest.mock('../../../hooks/useConditionalFeature', () => ({
+  useConditionalFeature: jest.fn(),
+}));
+
+jest.mock('../../../hooks/useViewSize', () => ({
+  ...(jest.requireActual('../../../hooks/useViewSize') as Record<
+    string,
+    unknown
+  >),
+  useViewSizeClient: jest.fn(),
+}));
+
+const mockFeature = jest.mocked(useConditionalFeature);
+const mockViewSize = jest.mocked(useViewSizeClient);
+
+const config = {
+  enabled: true,
+  premiumRotationMs: 30_000,
+  communityRotationMs: 10_000,
+};
+
+const LogContext = getLogContextStatic();
+
+const render = ({
+  feedName = SharedFeedPage.MyFeed as string,
+  disableAds = false,
+  isPlus = false,
+}: { feedName?: string; disableAds?: boolean; isPlus?: boolean } = {}) =>
+  renderHook(() => useSponsorStrip({ feedName, disableAds }), {
+    wrapper: ({ children }) => (
+      <AuthContext.Provider
+        value={
+          {
+            isAuthReady: true,
+            user: { id: 'u1', isPlus },
+          } as unknown as AuthContextData
+        }
+      >
+        <LogContext.Provider
+          value={{ logEvent: jest.fn() } as unknown as LogContextData}
+        >
+          {children}
+        </LogContext.Provider>
+      </AuthContext.Provider>
+    ),
+  });
+
+beforeEach(() => {
+  jest.clearAllMocks();
+  mockFeature.mockReturnValue({ value: config, isLoading: false });
+  mockViewSize.mockReturnValue(true);
+});
+
+it('should be on for a feed that can show the Happening Now card', () => {
+  expect(render().result.current.isEnabled).toBe(true);
+});
+
+it('should be off when the experiment is off', () => {
+  mockFeature.mockReturnValue({
+    value: { ...config, enabled: false },
+    isLoading: false,
+  });
+
+  expect(render().result.current.isEnabled).toBe(false);
+});
+
+it('should be off for a Plus subscriber, who paid for no ads', () => {
+  expect(render({ isPlus: true }).result.current.isEnabled).toBe(false);
+});
+
+it('should be off on a feed with ads switched off', () => {
+  expect(render({ disableAds: true }).result.current.isEnabled).toBe(false);
+});
+
+it('should be off below tablet, where a logo wall costs more feed than it holds logos', () => {
+  mockViewSize.mockReturnValue(false);
+
+  expect(render().result.current.isEnabled).toBe(false);
+});
+
+it('should be off on a feed that never shows the card', () => {
+  expect(
+    render({ feedName: SharedFeedPage.Search }).result.current.isEnabled,
+  ).toBe(false);
+  expect(render({ feedName: 'squad' }).result.current.isEnabled).toBe(false);
+});
+it('should not evaluate the experiment for anyone who could not see it', () => {
+  render({ isPlus: true });
+
+  expect(mockFeature).toHaveBeenCalledWith(
+    expect.objectContaining({ shouldEvaluate: false }),
+  );
+});
diff --git a/packages/shared/src/features/monetization/sponsorStrip/useSponsorStrip.ts b/packages/shared/src/features/monetization/sponsorStrip/useSponsorStrip.ts
new file mode 100644
index 00000000000..fe39a4454a7
--- /dev/null
+++ b/packages/shared/src/features/monetization/sponsorStrip/useSponsorStrip.ts
@@ -0,0 +1,54 @@
+import { usePlusSubscription } from '../../../hooks/usePlusSubscription';
+import { useConditionalFeature } from '../../../hooks/useConditionalFeature';
+import { HERO_ELIGIBLE_FEEDS } from '../../../hooks/useFeed';
+import { ViewSize, useViewSizeClient } from '../../../hooks/useViewSize';
+import { featureSponsorStrip } from '../../../lib/featureManagement';
+import type { AllFeedPages } from '../../../lib/query';
+import type { SponsorStripConfig } from '../../../types';
+
+interface UseSponsorStripProps {
+  feedName?: string;
+  /** The feed's own ads switch (feed previews, squads) — never inventory. */
+  disableAds?: boolean;
+}
+
+interface UseSponsorStrip {
+  isEnabled: boolean;
+  config: SponsorStripConfig;
+}
+
+/**
+ * The strip shows on the feeds that can show a Happening Now card, and on no
+ * others. Sharing one set with the card means the two can never disagree: the
+ * strip cannot appear on a feed whose card it does not replace, and the card
+ * cannot be suppressed on a feed the strip never reaches.
+ */
+const isSponsorStripFeed = (feedName?: string): boolean =>
+  !!feedName && HERO_ELIGIBLE_FEEDS.has(feedName as AllFeedPages);
+
+/**
+ * The single gate for the sponsor strip. Both the strip itself and the feed's
+ * Happening Now suppression read it, so "is the strip showing" and "is the
+ * card hidden" are the same answer rather than two conditions that have to be
+ * kept in step.
+ */
+export const useSponsorStrip = ({
+  feedName,
+  disableAds,
+}: UseSponsorStripProps = {}): UseSponsorStrip => {
+  const { isPlus } = usePlusSubscription();
+  // `useViewSizeClient`, not `useViewSize`: the latter reads matchMedia in its
+  // first client render while the server renders `false`, so the dock would
+  // appear during hydration and React would throw the whole root away and
+  // re-render it. This one matches the server until after mount.
+  const isTablet = useViewSizeClient(ViewSize.Tablet);
+  // A logo wall on a phone costs more feed than it can hold logos.
+  const isEligible =
+    !isPlus && !disableAds && isTablet && isSponsorStripFeed(feedName);
+  const { value: config } = useConditionalFeature({
+    feature: featureSponsorStrip,
+    shouldEvaluate: isEligible,
+  });
+
+  return { isEnabled: isEligible && config.enabled, config };
+};
diff --git a/packages/shared/src/features/monetization/sponsorStrip/useSponsorStripAds.ts b/packages/shared/src/features/monetization/sponsorStrip/useSponsorStripAds.ts
new file mode 100644
index 00000000000..dac501dc71f
--- /dev/null
+++ b/packages/shared/src/features/monetization/sponsorStrip/useSponsorStripAds.ts
@@ -0,0 +1,222 @@
+import {
+  useCallback,
+  useEffect,
+  useLayoutEffect,
+  useMemo,
+  useState,
+} from 'react';
+import { useQuery } from '@tanstack/react-query';
+import { useIsLightTheme } from '../../../hooks/utils/useThemedAsset';
+import { AdPlacement } from '../../../lib/ads';
+import { disabledRefetch } from '../../../lib/func';
+import { RequestKey } from '../../../lib/query';
+import { ONE_HOUR } from '../../../lib/time';
+import type { SponsorStripConfig } from '../../../types';
+import { fetchSponsorStripAds } from './mockSponsorStripAds';
+import { fittedSlotCount } from './sponsorLogoSizing';
+import type { ResolvedSponsor } from './sponsorStripCreative';
+import { parseSponsors, resolveSponsor } from './sponsorStripCreative';
+import type { Rotation } from './sponsorStripRotation';
+import {
+  PREMIUM_SLOT_COUNT,
+  createRotation,
+  partitionByTier,
+  resizeRotation,
+  rotateNextSlot,
+  rotationSponsors,
+} from './sponsorStripRotation';
+
+interface UseSponsorStripAdsProps {
+  enabled: boolean;
+  config: SponsorStripConfig;
+}
+
+interface UseSponsorStripAds {
+  gold: ResolvedSponsor | null;
+  premium: ResolvedSponsor[];
+  community: ResolvedSponsor[];
+  /** Attach to the wall; its width decides how many marks the row holds. */
+  wallRef: (node: HTMLElement | null) => void;
+}
+
+// A hidden tab must not burn through the decks: rotating there would spend
+// every advertiser's turn on a screen nobody is looking at, and inflate the
+// impression count while it did. Visibility rather than focus, so this and
+// air time (which the log lifecycle ends on hide) pause on the same signal.
+const usePageVisible = (): boolean => {
+  const [isVisible, setIsVisible] = useState(true);
+
+  useEffect(() => {
+    const onChange = () =>
+      setIsVisible(globalThis.document.visibilityState === 'visible');
+
+    onChange();
+    globalThis.document.addEventListener('visibilitychange', onChange);
+
+    return () =>
+      globalThis.document.removeEventListener('visibilitychange', onChange);
+  }, []);
+
+  return isVisible;
+};
+
+/**
+ * How many fixed-width slots the wall holds.
+ *
+ * Nothing is drawn until the row has been measured, which matters for money
+ * rather than for looks: an optimistic first paint renders every creative in
+ * the pool, and each one that renders logs an impression and fires the ad
+ * server's pixel before the row trims a frame later. Measuring in a layout
+ * effect keeps the wall from ever showing a mark it is about to take away, and
+ * the reader sees no empty frame because it runs before the browser paints.
+ */
+const useFittedSlots = (
+  maxSlots: number,
+): { ref: (node: HTMLElement | null) => void; count: number } => {
+  const [element, setElement] = useState<HTMLElement | null>(null);
+  const [fitted, setFitted] = useState<number | null>(null);
+  const ref = useCallback((node: HTMLElement | null) => setElement(node), []);
+
+  useLayoutEffect(() => {
+    if (!element) {
+      return undefined;
+    }
+
+    const measure = (width: number) => {
+      const count = fittedSlotCount(width);
+
+      if (count !== null) {
+        setFitted(count);
+      }
+    };
+
+    measure(element.getBoundingClientRect().width);
+
+    if (typeof ResizeObserver === 'undefined') {
+      return undefined;
+    }
+
+    const observer = new ResizeObserver(([entry]) =>
+      measure(entry.contentRect.width),
+    );
+    observer.observe(element);
+
+    return () => observer.disconnect();
+  }, [element]);
+
+  return { ref, count: fitted === null ? 0 : Math.min(maxSlots, fitted) };
+};
+
+interface UseRotatingSlotsProps {
+  pool: Rotation['deck'];
+  slotCount: number;
+  intervalMs: number;
+  enabled: boolean;
+}
+
+const useRotatingSlots = ({
+  pool,
+  slotCount,
+  intervalMs,
+  enabled,
+}: UseRotatingSlotsProps): Rotation['deck'] => {
+  const isVisible = usePageVisible();
+  const [rotation, setRotation] = useState<Rotation>(() =>
+    createRotation(pool, slotCount),
+  );
+  // Identity, not the array: the pool is rebuilt on every query render, and
+  // reshuffling then would reset the row's order under the reader.
+  const poolKey = pool.map(({ gen_id: genId }) => genId).join(',');
+
+  useEffect(() => {
+    setRotation(createRotation(pool, slotCount));
+    // The pool's contents are what should reseed the deck; `slotCount` is
+    // handled by the resize below, and including it here would reshuffle
+    // every advertiser's position on a window drag.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [poolKey]);
+
+  useEffect(() => {
+    setRotation((current) => resizeRotation(current, slotCount));
+  }, [slotCount]);
+
+  const slots = rotation.cursors.length;
+  const deckSize = rotation.deck.length;
+
+  useEffect(() => {
+    if (!enabled || !isVisible || intervalMs <= 0 || !slots) {
+      return undefined;
+    }
+
+    if (deckSize <= slots) {
+      return undefined;
+    }
+
+    // One slot per tick, oldest first, so each slot turns over once per
+    // interval and the row never swaps every logo at the same instant.
+    const period = Math.max(1, Math.round(intervalMs / slots));
+    const timer = globalThis.setInterval(
+      () => setRotation(rotateNextSlot),
+      period,
+    );
+
+    return () => globalThis.clearInterval(timer);
+  }, [enabled, isVisible, intervalMs, slots, deckSize]);
+
+  return rotationSponsors(rotation);
+};
+
+export const useSponsorStripAds = ({
+  enabled,
+  config,
+}: UseSponsorStripAdsProps): UseSponsorStripAds => {
+  const isLight = useIsLightTheme();
+  const { data } = useQuery({
+    queryKey: [RequestKey.Ads, AdPlacement.SponsorStrip],
+    queryFn: fetchSponsorStripAds,
+    enabled,
+    staleTime: ONE_HOUR,
+    ...disabledRefetch,
+  });
+
+  const pools = useMemo(() => partitionByTier(parseSponsors(data)), [data]);
+  // One gold, four premium, and community takes whatever the row has left:
+  // premium and community share one measured run, so the tiers cannot argue
+  // over the same pixels. The upper bound is the pool itself — a wider window
+  // shows more advertisers rather than the same few further apart.
+  const { ref: wallRef, count: wallSlots } = useFittedSlots(
+    PREMIUM_SLOT_COUNT + pools.community.length,
+  );
+
+  // Reserved from the pool rather than read off the rendered row: the row
+  // fills a render later than the measurement does, and a community count that
+  // subtracted an as-yet-empty premium row would open slots it is about to
+  // take back — each one logging an impression and firing a pixel on its way
+  // through.
+  const premiumSlots = Math.min(PREMIUM_SLOT_COUNT, pools.premium.length);
+  const premium = useRotatingSlots({
+    pool: pools.premium,
+    slotCount: premiumSlots,
+    intervalMs: config.premiumRotationMs,
+    enabled,
+  });
+  const community = useRotatingSlots({
+    pool: pools.community,
+    slotCount: Math.max(0, wallSlots - premiumSlots),
+    intervalMs: config.communityRotationMs,
+    enabled,
+  });
+
+  // Themed logos resolve here rather than in the decks, so switching theme
+  // repaints the row without disturbing anybody's turn in the rotation.
+  const resolved = useMemo(
+    () => ({
+      gold: pools.gold ? resolveSponsor(pools.gold, isLight) : null,
+      premium: premium.map((creative) => resolveSponsor(creative, isLight)),
+      community: community.map((creative) => resolveSponsor(creative, isLight)),
+    }),
+    [pools.gold, premium, community, isLight],
+  );
+
+  return { ...resolved, wallRef };
+};
diff --git a/packages/shared/src/features/monetization/sponsorStrip/useSponsorStripFeed.spec.tsx b/packages/shared/src/features/monetization/sponsorStrip/useSponsorStripFeed.spec.tsx
new file mode 100644
index 00000000000..692604c9650
--- /dev/null
+++ b/packages/shared/src/features/monetization/sponsorStrip/useSponsorStripFeed.spec.tsx
@@ -0,0 +1,61 @@
+import { renderHook } from '@testing-library/react';
+import type { PostHighlight } from '../../../graphql/highlights';
+import { useSponsorStrip } from './useSponsorStrip';
+import { useSponsorStripFeed } from './useSponsorStripFeed';
+import { useStripHeadlines } from './useStripHeadlines';
+
+jest.mock('./useSponsorStrip', () => ({ useSponsorStrip: jest.fn() }));
+jest.mock('./useStripHeadlines', () => ({ useStripHeadlines: jest.fn() }));
+
+const mockStrip = jest.mocked(useSponsorStrip);
+const mockHeadlines = jest.mocked(useStripHeadlines);
+
+const config = {
+  enabled: true,
+  premiumRotationMs: 30_000,
+  communityRotationMs: 10_000,
+};
+
+const headline = { id: 'h1' } as PostHighlight;
+
+const render = () =>
+  renderHook(() => useSponsorStripFeed({ feedName: 'my-feed' }));
+
+beforeEach(() => {
+  jest.clearAllMocks();
+  mockStrip.mockReturnValue({ isEnabled: true, config });
+  mockHeadlines.mockReturnValue([headline]);
+});
+
+it('should drop the feed card when the strip is carrying the headlines', () => {
+  expect(render().result.current.disableHighlightItems).toBe(true);
+});
+
+it('should keep the feed card when the strip has no headlines to carry', () => {
+  // No fresh headline means an empty ticker, and suppressing the card then
+  // would take breaking news out of the product altogether.
+  mockHeadlines.mockReturnValue([]);
+
+  expect(render().result.current.disableHighlightItems).toBe(false);
+});
+
+it('should keep the feed card when the strip is off', () => {
+  mockStrip.mockReturnValue({ isEnabled: false, config });
+
+  expect(render().result.current.disableHighlightItems).toBe(false);
+});
+
+it('should not query headlines when the strip is off', () => {
+  mockStrip.mockReturnValue({ isEnabled: false, config });
+  render();
+
+  expect(mockHeadlines).toHaveBeenCalledWith(false);
+});
+
+it('should hand the strip the same headlines it decided with', () => {
+  const { result } = render();
+
+  expect(result.current.headlines).toEqual([headline]);
+  expect(result.current.isEnabled).toBe(true);
+  expect(result.current.config).toEqual(config);
+});
diff --git a/packages/shared/src/features/monetization/sponsorStrip/useSponsorStripFeed.ts b/packages/shared/src/features/monetization/sponsorStrip/useSponsorStripFeed.ts
new file mode 100644
index 00000000000..bc405ee1585
--- /dev/null
+++ b/packages/shared/src/features/monetization/sponsorStrip/useSponsorStripFeed.ts
@@ -0,0 +1,44 @@
+import type { PostHighlight } from '../../../graphql/highlights';
+import type { SponsorStripConfig } from '../../../types';
+import { useSponsorStrip } from './useSponsorStrip';
+import { useStripHeadlines } from './useStripHeadlines';
+
+interface UseSponsorStripFeedProps {
+  feedName?: string;
+  disableAds?: boolean;
+}
+
+interface UseSponsorStripFeed {
+  isEnabled: boolean;
+  config: SponsorStripConfig;
+  headlines: PostHighlight[];
+  /**
+   * Drop the feed's Happening Now card — true only when the strip is actually
+   * carrying the headlines in its place. With the strip up but no headline
+   * inside the freshness window there is nothing to replace the card with, so
+   * the card stays: breaking news must never fall out of the product entirely
+   * just because the experiment is on.
+   */
+  disableHighlightItems: boolean;
+}
+
+/**
+ * Everything a feed layout needs from the sponsor strip, in one place: whether
+ * to mount it, what to mount it with, and whether the feed underneath should
+ * give up its Happening Now card. One evaluation of the flag and one headlines
+ * query, so the strip and the feed can never be told different things.
+ */
+export const useSponsorStripFeed = ({
+  feedName,
+  disableAds,
+}: UseSponsorStripFeedProps): UseSponsorStripFeed => {
+  const { isEnabled, config } = useSponsorStrip({ feedName, disableAds });
+  const headlines = useStripHeadlines(isEnabled);
+
+  return {
+    isEnabled,
+    config,
+    headlines,
+    disableHighlightItems: isEnabled && !!headlines.length,
+  };
+};
diff --git a/packages/shared/src/features/monetization/sponsorStrip/useStripHeadlines.spec.tsx b/packages/shared/src/features/monetization/sponsorStrip/useStripHeadlines.spec.tsx
new file mode 100644
index 00000000000..909f081c1f1
--- /dev/null
+++ b/packages/shared/src/features/monetization/sponsorStrip/useStripHeadlines.spec.tsx
@@ -0,0 +1,113 @@
+import React from 'react';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import { renderHook, waitFor } from '@testing-library/react';
+import type { MajorHeadlinesData } from '../../../graphql/highlights';
+import { majorHeadlinesQueryOptions } from '../../../graphql/highlights';
+import { ONE_HOUR } from '../../../lib/time';
+import { useStripHeadlines } from './useStripHeadlines';
+
+jest.mock('../../../graphql/highlights', () => ({
+  ...(jest.requireActual('../../../graphql/highlights') as Record<
+    string,
+    unknown
+  >),
+  majorHeadlinesQueryOptions: jest.fn(),
+}));
+
+jest.mock('../../../lib/constants', () => ({
+  ...(jest.requireActual('../../../lib/constants') as Record<string, unknown>),
+  isDevelopment: true,
+}));
+
+const mockQueryOptions = jest.mocked(majorHeadlinesQueryOptions);
+const mockConstants = jest.requireMock('../../../lib/constants') as {
+  isDevelopment: boolean;
+};
+
+const headline = (id: string, ageMs = 0) => ({
+  node: {
+    id,
+    channel: 'agents',
+    headline: `Headline ${id}`,
+    highlightedAt: new Date(Date.now() - ageMs).toISOString(),
+    post: { id: `post-${id}`, commentsPermalink: `https://daily.dev/p/${id}` },
+  },
+});
+
+const setHeadlines = (edges: ReturnType<typeof headline>[]) =>
+  mockQueryOptions.mockReturnValue({
+    queryKey: ['major-headlines', edges.length],
+    queryFn: async () =>
+      ({
+        majorHeadlines: {
+          pageInfo: { hasNextPage: false, endCursor: '' },
+          edges,
+        },
+      } as MajorHeadlinesData),
+  } as ReturnType<typeof majorHeadlinesQueryOptions>);
+
+const render = () => {
+  const client = new QueryClient({
+    defaultOptions: { queries: { retry: false } },
+  });
+
+  return renderHook(() => useStripHeadlines(true), {
+    wrapper: ({ children }) => (
+      <QueryClientProvider client={client}>{children}</QueryClientProvider>
+    ),
+  });
+};
+
+beforeEach(() => {
+  jest.clearAllMocks();
+  mockConstants.isDevelopment = true;
+});
+
+it('should carry the headlines the API returned', async () => {
+  setHeadlines([headline('h1'), headline('h2')]);
+  const { result } = render();
+
+  await waitFor(() =>
+    expect(result.current.map(({ id }) => id)).toEqual(['h1', 'h2']),
+  );
+});
+
+it('should drop a headline older than the freshness window', async () => {
+  setHeadlines([headline('fresh'), headline('stale', 25 * ONE_HOUR)]);
+  const { result } = render();
+
+  await waitFor(() =>
+    expect(result.current.map(({ id }) => id)).toEqual(['fresh']),
+  );
+});
+
+it('should fall back to the fixture in development so the row is never empty', async () => {
+  setHeadlines([]);
+  const { result } = render();
+
+  await waitFor(() => expect(result.current.length).toBeGreaterThan(0));
+  expect(result.current.every(({ id }) => id.startsWith('mock-'))).toBe(true);
+});
+
+it('should not query at all while the strip is off', async () => {
+  setHeadlines([headline('h1')]);
+  const client = new QueryClient({
+    defaultOptions: { queries: { retry: false } },
+  });
+  const { result } = renderHook(() => useStripHeadlines(false), {
+    wrapper: ({ children }) => (
+      <QueryClientProvider client={client}>{children}</QueryClientProvider>
+    ),
+  });
+
+  await waitFor(() => expect(result.current).toEqual([]));
+});
+
+it('should leave the row empty outside development', async () => {
+  mockConstants.isDevelopment = false;
+  setHeadlines([]);
+  const { result } = render();
+
+  await waitFor(() => expect(mockQueryOptions).toHaveBeenCalled());
+  expect(result.current).toEqual([]);
+});
diff --git a/packages/shared/src/features/monetization/sponsorStrip/useStripHeadlines.ts b/packages/shared/src/features/monetization/sponsorStrip/useStripHeadlines.ts
new file mode 100644
index 00000000000..5bff9c8164f
--- /dev/null
+++ b/packages/shared/src/features/monetization/sponsorStrip/useStripHeadlines.ts
@@ -0,0 +1,47 @@
+import { useQuery } from '@tanstack/react-query';
+import type { PostHighlight } from '../../../graphql/highlights';
+import { majorHeadlinesQueryOptions } from '../../../graphql/highlights';
+import { mockStripHeadlines } from '../../../hooks/feed/mockFeedHighlights';
+import { ONE_HOUR, ONE_MINUTE } from '../../../lib/time';
+
+const HEADLINE_LIMIT = 12;
+
+/**
+ * Same 24 hour window the post-page widget uses. A ticker is a claim that
+ * something is happening now, so a day-old headline in it is worse than a
+ * shorter row.
+ */
+const MAX_HEADLINE_AGE_MS = 24 * ONE_HOUR;
+
+/**
+ * The headlines the strip carries, from the same `majorHeadlines` query behind
+ * the Happening Now card and the post-page widget — the strip is a third view
+ * of one set of headlines, not a new source of them.
+ */
+export const useStripHeadlines = (enabled: boolean): PostHighlight[] => {
+  const { data } = useQuery({
+    ...majorHeadlinesQueryOptions({ first: HEADLINE_LIMIT }),
+    enabled,
+    refetchInterval: ONE_MINUTE,
+  });
+
+  if (!enabled) {
+    return [];
+  }
+
+  const cutoff = Date.now() - MAX_HEADLINE_AGE_MS;
+  const headlines = (data?.majorHeadlines?.edges ?? [])
+    .map(({ node }) => node)
+    .filter(({ highlightedAt }) => new Date(highlightedAt).getTime() >= cutoff);
+
+  if (headlines.length) {
+    return headlines;
+  }
+
+  // TEMPORARY: a local session gets no headlines inside the window, which
+  // leaves the row this experiment is built around empty and the strip looking
+  // broken. No query param to remember here — the experiment flag is already
+  // the opt-in, and the fixture cannot reach a real reader because it is
+  // development only. Remove with the rest of `mockFeedHighlights`.
+  return mockStripHeadlines(true);
+};
diff --git a/packages/shared/src/hooks/feed/mockFeedHighlights.spec.ts b/packages/shared/src/hooks/feed/mockFeedHighlights.spec.ts
new file mode 100644
index 00000000000..493fd075daf
--- /dev/null
+++ b/packages/shared/src/hooks/feed/mockFeedHighlights.spec.ts
@@ -0,0 +1,103 @@
+import type { FeedItemData } from '../../graphql/feed';
+import type { Post } from '../../graphql/posts';
+import { withMockFeedHighlights } from './mockFeedHighlights';
+
+jest.mock('../../lib/constants', () => ({
+  ...(jest.requireActual('../../lib/constants') as Record<string, unknown>),
+  isDevelopment: true,
+}));
+
+const mockConstants = jest.requireMock('../../lib/constants') as {
+  isDevelopment: boolean;
+};
+
+const postNode = (id: string) => ({
+  node: {
+    itemType: 'post' as const,
+    post: { id, commentsPermalink: `https://daily.dev/posts/${id}` } as Post,
+    feedMeta: null,
+  },
+});
+
+const pages = (): FeedItemData[] => [
+  {
+    page: {
+      pageInfo: { hasNextPage: false, endCursor: '' },
+      edges: [postNode('p1'), postNode('p2'), postNode('p3')],
+    },
+  },
+];
+
+const itemTypes = (data: FeedItemData[]): string[] =>
+  data[0].page.edges.map(({ node }) => node.itemType);
+
+beforeEach(() => {
+  mockConstants.isDevelopment = true;
+});
+
+it('should leave the feed alone unless it was asked', () => {
+  const data = pages();
+
+  expect(withMockFeedHighlights(data, false)).toBe(data);
+});
+
+it('should never inject outside development, whatever the query says', () => {
+  mockConstants.isDevelopment = false;
+  const data = pages();
+
+  expect(withMockFeedHighlights(data, true)).toBe(data);
+});
+
+it('should insert one card into the first page', () => {
+  const data = withMockFeedHighlights(pages(), true);
+
+  expect(itemTypes(data)).toEqual(['post', 'post', 'highlight', 'post']);
+});
+
+it('should point the rows at real posts so they link somewhere', () => {
+  const data = withMockFeedHighlights(pages(), true);
+  const [{ node }] = data[0].page.edges.filter(
+    ({ node: item }) => item.itemType === 'highlight',
+  );
+
+  expect(node.itemType === 'highlight' && node.highlights.length).toBeTruthy();
+  expect(
+    node.itemType === 'highlight' &&
+      node.highlights.every(({ post }) => !!post.commentsPermalink),
+  ).toBe(true);
+});
+
+it('should keep out of the way when the API sent real highlights', () => {
+  const data: FeedItemData[] = [
+    {
+      page: {
+        pageInfo: { hasNextPage: false, endCursor: '' },
+        edges: [
+          postNode('p1'),
+          {
+            node: {
+              itemType: 'highlight' as const,
+              highlights: [],
+              feedMeta: null,
+            },
+          },
+        ],
+      },
+    },
+  ];
+
+  expect(withMockFeedHighlights(data, true)).toBe(data);
+});
+
+it('should not inject into a page with no posts to link to', () => {
+  const data: FeedItemData[] = [
+    {
+      page: {
+        pageInfo: { hasNextPage: false, endCursor: '' },
+        edges: [],
+      },
+    },
+  ];
+
+  expect(withMockFeedHighlights(data, true)).toBe(data);
+});
diff --git a/packages/shared/src/hooks/feed/mockFeedHighlights.ts b/packages/shared/src/hooks/feed/mockFeedHighlights.ts
new file mode 100644
index 00000000000..6f786e89f0d
--- /dev/null
+++ b/packages/shared/src/hooks/feed/mockFeedHighlights.ts
@@ -0,0 +1,106 @@
+import type { FeedApiItem, FeedItemData } from '../../graphql/feed';
+import { isFeedApiPostItem } from '../../graphql/feed';
+import type { PostHighlight } from '../../graphql/highlights';
+import { isDevelopment } from '../../lib/constants';
+
+/**
+ * TEMPORARY, development only. The Happening Now card comes from the feed API,
+ * which returns no highlight items for a local session, so there is nothing to
+ * watch the sponsor-strip experiment take away. This injects one card into the
+ * first page so both sides of the experiment can be seen locally: with the
+ * strip on the card should be gone, with it off it should be back.
+ *
+ * Opt in with `?mockHighlights=1`. Delete this module and its call in
+ * `useFeed` once the experiment is decided.
+ */
+
+const MOCK_HEADLINES = [
+  'Postgres 18 ships async I/O',
+  'Rust in the Linux kernel: one year on',
+  'The quiet death of the REST client',
+  'We deleted our CI cache and got faster',
+];
+
+/** Far enough in to sit in the feed proper rather than the first row. */
+const INSERT_AT = 2;
+
+const buildMockHighlights = (
+  page: FeedItemData['page'],
+): PostHighlight[] | null => {
+  const posts = page.edges
+    .map(({ node }) => node)
+    .filter(isFeedApiPostItem)
+    .map(({ post }) => post);
+
+  // Real posts, so the rows link somewhere and the card is worth clicking.
+  if (!posts.length) {
+    return null;
+  }
+
+  return MOCK_HEADLINES.map((headline, index) => {
+    const post = posts[index % posts.length];
+
+    return {
+      id: `mock-highlight-${index}`,
+      channel: 'agents',
+      headline,
+      highlightedAt: new Date(Date.now() - index * 45 * 60_000).toISOString(),
+      post: {
+        id: post.id,
+        commentsPermalink: post.commentsPermalink,
+      },
+    };
+  });
+};
+
+/**
+ * The same fixture headlines as a bare list, for the sponsor strip's ticker
+ * row — which has the same problem for the same reason. Returns nothing
+ * outside development, whatever the query param says.
+ */
+export const mockStripHeadlines = (enabled: boolean): PostHighlight[] => {
+  if (!enabled || !isDevelopment) {
+    return [];
+  }
+
+  return MOCK_HEADLINES.map((headline, index) => ({
+    id: `mock-headline-${index}`,
+    channel: 'agents',
+    headline,
+    highlightedAt: new Date(Date.now() - index * 45 * 60_000).toISOString(),
+    post: { id: `mock-post-${index}`, commentsPermalink: '' },
+  }));
+};
+
+export const withMockFeedHighlights = (
+  pages: FeedItemData[],
+  enabled: boolean,
+): FeedItemData[] => {
+  // The environment check is here rather than at the call site so no query
+  // param can put a fixture in front of a real reader.
+  if (!enabled || !isDevelopment || !pages.length) {
+    return pages;
+  }
+
+  const [first, ...rest] = pages;
+
+  if (first.page.edges.some(({ node }) => node.itemType === 'highlight')) {
+    return pages;
+  }
+
+  const highlights = buildMockHighlights(first.page);
+
+  if (!highlights) {
+    return pages;
+  }
+
+  const node: FeedApiItem = {
+    itemType: 'highlight',
+    highlights,
+    feedMeta: null,
+  };
+  const edges = [...first.page.edges];
+  edges.splice(Math.min(INSERT_AT, edges.length), 0, { node });
+
+  return [{ ...first, page: { ...first.page, edges } }, ...rest];
+};
diff --git a/packages/shared/src/hooks/useFeed.ts b/packages/shared/src/hooks/useFeed.ts
index 3176ad002c7..5a06a222ab0 100644
--- a/packages/shared/src/hooks/useFeed.ts
+++ b/packages/shared/src/hooks/useFeed.ts
@@ -63,6 +63,7 @@ import { AdPlacement } from '../lib/ads';
 import { SharedFeedPage } from '../components/utilities';
 import { useTranslation } from './translation/useTranslation';
 import { useFetchAd } from '../features/monetization/useFetchAd';
+import { withMockFeedHighlights } from './feed/mockFeedHighlights';
 import type { Squad } from '../graphql/sources';
 
 interface FeedItemBase<T extends FeedItemType> {
@@ -267,6 +268,13 @@ export interface UseFeedOptionalParams<T> {
    * row, so hero placement is disabled entirely.
    */
   isHorizontal?: boolean;
+  /**
+   * Drop the Happening Now card from the feed. Set while the sponsor strip is
+   * showing, which is where breaking news goes instead; the user's own
+   * `highlightsPlacement` setting is left alone so the card comes back when
+   * the experiment ends.
+   */
+  disableHighlightItems?: boolean;
   /**
    * Drop pinned posts from the feed. `sourceFeed` always orders pinned posts
    * (welcome post, squad pins) first and offers no way to opt out server-side,
@@ -296,6 +304,7 @@ export default function useFeed<T>(
     disableTopHero = false,
     isHorizontal = false,
     excludePinnedPosts = false,
+    disableHighlightItems = false,
   } = params;
   const { numCards: numCardsBySpaciness } = useContext(FeedContext);
   const numCards = numCardsBySpaciness.eco;
@@ -321,6 +330,10 @@ export default function useFeed<T>(
     queryKey: feedQueryKey,
     queryType: 'feed',
   });
+  // TEMPORARY: `?mockHighlights=1` puts a Happening Now card in the feed so
+  // the sponsor-strip experiment can be checked locally, where the API returns
+  // no highlights. Development only — see `mockFeedHighlights`.
+  const shouldMockHighlights = !!router.query?.mockHighlights;
   const isFeedPreview = feedQueryKey?.[0] === RequestKey.FeedPreview;
   const avoidRetry =
     params?.settings?.feedName === SharedFeedPage.Custom && !isPlus;
@@ -692,7 +705,12 @@ export default function useFeed<T>(
         visualCellsSoFar += placement.colSpan;
       };
 
-      feedQuery.data.pages.forEach(({ page }, pageIndex) => {
+      const feedPages = withMockFeedHighlights(
+        feedQuery.data.pages,
+        shouldMockHighlights,
+      );
+
+      feedPages.forEach(({ page }, pageIndex) => {
         page.edges.forEach(({ node }, index: number) => {
           // Bail before the ad slot is claimed, otherwise dropping the post
           // would leave an ad stranded in a slot with nothing after it.
@@ -707,7 +725,7 @@ export default function useFeed<T>(
           }
 
           if (node.itemType === 'highlight') {
-            if (!node.highlights.length) {
+            if (disableHighlightItems || !node.highlights.length) {
               return;
             }
             pushAndAdvance({
@@ -769,6 +787,8 @@ export default function useFeed<T>(
     cadence,
     widenableTypes,
     excludePinnedPosts,
+    disableHighlightItems,
+    shouldMockHighlights,
     effectiveFirstSlotOffset,
   ]);
 
diff --git a/packages/shared/src/lib/ads.ts b/packages/shared/src/lib/ads.ts
index 2588a9addf1..6920fd6452d 100644
--- a/packages/shared/src/lib/ads.ts
+++ b/packages/shared/src/lib/ads.ts
@@ -9,6 +9,11 @@ export enum AdActions {
   // Rendered and seen by IAB rules, unlike `Impression` which only means the
   // creative reached the viewport.
   Viewable = 'viewable impression',
+  // Duration event: logged through `logEventStart`/`logEventEnd`, so it lands
+  // with `event_duration` set to how long the creative held its slot. A
+  // rotating placement needs it because a count of impressions says nothing
+  // about how long any one logo was actually up.
+  AirTime = 'air time',
 }
 
 export enum AdPlacement {
@@ -16,6 +21,11 @@ export enum AdPlacement {
   PostSidebar = 'post-sidebar',
   PostComment = 'post-comment',
   SquadDirectory = 'squad-directory',
+  /**
+   * The sponsor strip's logo wall. The wire value is the ad server's own
+   * placement name, which is why it does not match the client vocabulary.
+   */
+  SponsorStrip = 'footer_logo',
 }
 
 export interface FetchAdByPlacementOptions {
diff --git a/packages/shared/src/lib/featureManagement.ts b/packages/shared/src/lib/featureManagement.ts
index 589a4301eaf..e149bc6fc0e 100644
--- a/packages/shared/src/lib/featureManagement.ts
+++ b/packages/shared/src/lib/featureManagement.ts
@@ -3,7 +3,7 @@ import type { FeedSettingsKeys } from '../contexts/FeedContext';
 import type { PlusItemStatus } from '../components/plus/PlusListItem';
 import { isDevelopment } from './constants';
 import { BriefingType } from '../graphql/posts';
-import type { HeroCardsConfig } from '../types';
+import type { HeroCardsConfig, SponsorStripConfig } from '../types';
 import { PostType } from '../types';
 import { Feature } from './feature';
 
@@ -258,6 +258,24 @@ export const featureOnboardingChrome = new Feature<OnboardingChromeVariant>(
   OnboardingChromeVariant.Control,
 );
 
+/**
+ * Experiment: the sponsor strip — a logo wall docked under the main feeds.
+ * While it shows, the Happening Now card is dropped from the feed: the strip
+ * is where breaking news goes instead, so running both would show it twice.
+ * Suppression follows the strip and not the flag, so a user who cannot see
+ * the strip (Plus, ads disabled, below tablet) keeps the card.
+ *
+ * Default MUST stay `enabled: false` — see the rule at the top of this file.
+ */
+export const featureSponsorStrip = new Feature<SponsorStripConfig>(
+  'sponsor_strip',
+  {
+    enabled: true,
+    premiumRotationMs: 30_000,
+    communityRotationMs: 10_000,
+  },
+);
+
 export const featureLayoutV2 = new Feature('layout_v2', false);
 
 export const featureEngagementBarV2 = new Feature('engagement_bar_v2', false);
diff --git a/packages/shared/src/types.ts b/packages/shared/src/types.ts
index 07a22522047..eb04e1a5710 100644
--- a/packages/shared/src/types.ts
+++ b/packages/shared/src/types.ts
@@ -61,3 +61,11 @@ export type HeroCardsConfig = {
   chipLabels: Partial<Record<PostHeroSignificance, string>>;
   allowedPostTypes: Partial<Record<PostType, boolean>>;
 };
+
+export type SponsorStripConfig = {
+  enabled: boolean;
+  /** Milliseconds a single premium slot holds a logo before it rotates. */
+  premiumRotationMs: number;
+  /** Same, for a community slot. Community turns over faster by design. */
+  communityRotationMs: number;
+};

From f1d856036f9cff3fd536639b7a15761872c618b5 Mon Sep 17 00:00:00 2001
From: Chris Bongers <chrisbongers@gmail.com>
Date: Fri, 4 Sep 2026 15:19:50 +0200
Subject: [PATCH 02/20] fix(monetization): default the sponsor strip flag to
 isDevelopment
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The default was committed as `enabled: true`, which would have shipped the
experiment to everyone on merge with no rollback short of a deploy. On in
development and off in production instead, the way `cores`, `quest_offers`
and `post_boost_ads` are — so a local session still gets the strip while
GrowthBook owns the ramp.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
---
 packages/shared/src/lib/featureManagement.ts | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/packages/shared/src/lib/featureManagement.ts b/packages/shared/src/lib/featureManagement.ts
index e149bc6fc0e..258adae1b3f 100644
--- a/packages/shared/src/lib/featureManagement.ts
+++ b/packages/shared/src/lib/featureManagement.ts
@@ -265,12 +265,15 @@ export const featureOnboardingChrome = new Feature<OnboardingChromeVariant>(
  * Suppression follows the strip and not the flag, so a user who cannot see
  * the strip (Plus, ads disabled, below tablet) keeps the card.
  *
- * Default MUST stay `enabled: false` — see the rule at the top of this file.
+ * On in development and off everywhere else, the way `cores`, `quest_offers`
+ * and `post_boost_ads` are: `isDevelopment` is false in a production build, so
+ * this cannot ship the experiment to anyone — GrowthBook ramps it — while a
+ * local session still gets the strip without anybody forcing a flag.
  */
 export const featureSponsorStrip = new Feature<SponsorStripConfig>(
   'sponsor_strip',
   {
-    enabled: true,
+    enabled: isDevelopment,
     premiumRotationMs: 30_000,
     communityRotationMs: 10_000,
   },

From 6818513eb9c0e4230803e2a2c79fc5a8a6352ba0 Mon Sep 17 00:00:00 2001
From: Chris Bongers <chrisbongers@gmail.com>
Date: Fri, 4 Sep 2026 16:03:47 +0200
Subject: [PATCH 03/20] refactor(monetization): make the sponsor strip flag a
 plain boolean
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Turnover is per page load rather than on a timer: the decks are dealt once
on mount, so the row a reader sees holds for as long as the page does and
the next load deals a different set. That drops the rotation intervals,
and with them the whole config payload — the flag is a boolean like
`cores`, which also removes the chance of a mistyped interval reaching
`setInterval`.

Slot scarcity is unchanged and now stated where it lives: one gold, four
premium, community takes whatever the row has left.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
---
 .../shared/src/components/MainFeedLayout.tsx  |   5 +-
 .../sponsorStrip/SponsorStrip.spec.tsx        |  71 ++-----
 .../sponsorStrip/SponsorStrip.tsx             |   6 +-
 .../sponsorStrip/sponsorStripRotation.spec.ts | 161 ----------------
 .../sponsorStrip/sponsorStripRotation.ts      | 141 --------------
 .../sponsorStrip/sponsorStripSlots.spec.ts    |  35 ++++
 .../sponsorStrip/sponsorStripSlots.ts         |  25 +++
 .../sponsorStrip/useSponsorStrip.spec.tsx     |  31 ++-
 .../sponsorStrip/useSponsorStrip.ts           |  12 +-
 .../sponsorStrip/useSponsorStripAds.ts        | 180 ++++++------------
 .../sponsorStrip/useSponsorStripFeed.spec.tsx |  13 +-
 .../sponsorStrip/useSponsorStripFeed.ts       |  12 +-
 packages/shared/src/lib/featureManagement.ts  |  19 +-
 packages/shared/src/types.ts                  |   8 -
 14 files changed, 157 insertions(+), 562 deletions(-)
 delete mode 100644 packages/shared/src/features/monetization/sponsorStrip/sponsorStripRotation.spec.ts
 delete mode 100644 packages/shared/src/features/monetization/sponsorStrip/sponsorStripRotation.ts
 create mode 100644 packages/shared/src/features/monetization/sponsorStrip/sponsorStripSlots.spec.ts
 create mode 100644 packages/shared/src/features/monetization/sponsorStrip/sponsorStripSlots.ts

diff --git a/packages/shared/src/components/MainFeedLayout.tsx b/packages/shared/src/components/MainFeedLayout.tsx
index eb679091aaa..d6f1664f64a 100644
--- a/packages/shared/src/components/MainFeedLayout.tsx
+++ b/packages/shared/src/components/MainFeedLayout.tsx
@@ -886,10 +886,7 @@ export default function MainFeedLayout({
           the extension new tab render — and the only place the feed name is
           already resolved from `default` to the reader's own feed. */}
       {sponsorStrip.isEnabled && (
-        <SponsorStrip
-          config={sponsorStrip.config}
-          headlines={sponsorStrip.headlines}
-        />
+        <SponsorStrip headlines={sponsorStrip.headlines} />
       )}
     </>
   );
diff --git a/packages/shared/src/features/monetization/sponsorStrip/SponsorStrip.spec.tsx b/packages/shared/src/features/monetization/sponsorStrip/SponsorStrip.spec.tsx
index 56d20572692..f00d3774bf3 100644
--- a/packages/shared/src/features/monetization/sponsorStrip/SponsorStrip.spec.tsx
+++ b/packages/shared/src/features/monetization/sponsorStrip/SponsorStrip.spec.tsx
@@ -8,7 +8,6 @@ import type { LogContextData } from '../../../hooks/log/useLogContextData';
 import type { PostHighlight } from '../../../graphql/highlights';
 import { AdActions } from '../../../lib/ads';
 import { LogEvent } from '../../../lib/log';
-import type { SponsorStripConfig } from '../../../types';
 import { SponsorStrip } from './SponsorStrip';
 import { fetchSponsorStripAds } from './mockSponsorStripAds';
 import { SponsorTier } from './sponsorStripCreative';
@@ -24,12 +23,6 @@ jest.mock('../../../hooks/utils/useThemedAsset', () => ({
 const mockFetch = jest.mocked(fetchSponsorStripAds);
 let headlines: PostHighlight[] = [];
 
-const config: SponsorStripConfig = {
-  enabled: true,
-  premiumRotationMs: 40_000,
-  communityRotationMs: 8_000,
-};
-
 const creative = (
   company: string,
   tier: SponsorTier,
@@ -98,7 +91,7 @@ const renderStrip = () => {
             } as unknown as LogContextData
           }
         >
-          <SponsorStrip config={config} headlines={headlines} />
+          <SponsorStrip headlines={headlines} />
         </LogContext.Provider>
       </AuthContext.Provider>
     </QueryClientProvider>,
@@ -166,50 +159,6 @@ it('should render the gold sponsor, four premium slots and the community row', a
   );
 });
 
-it('should never rotate the gold sponsor', async () => {
-  renderStrip();
-  await settle();
-
-  await act(async () => {
-    jest.advanceTimersByTime(config.premiumRotationMs * 4);
-  });
-
-  expect(shownLogos()[0]).toEqual('gold');
-});
-
-it('should rotate a community slot without repeating a logo already on the row', async () => {
-  renderStrip();
-  await settle();
-
-  const before = shownLogos();
-
-  await act(async () => {
-    jest.advanceTimersByTime(config.communityRotationMs);
-  });
-
-  const after = shownLogos();
-
-  expect(after).not.toEqual(before);
-  expect(new Set(after).size).toEqual(after.length);
-});
-
-it('should hold the premium row while the community row turns over', async () => {
-  renderStrip();
-  await settle();
-
-  const premiumBefore = shownLogos().filter((company) =>
-    PREMIUM.includes(company),
-  );
-
-  await act(async () => {
-    jest.advanceTimersByTime(config.communityRotationMs);
-  });
-
-  expect(shownLogos().filter((company) => PREMIUM.includes(company))).toEqual(
-    premiumBefore,
-  );
-});
-
 it('should log an impression per logo with its tier and slot', async () => {
   renderStrip();
   await settle();
@@ -230,7 +179,7 @@ it('should log an impression per logo with its tier and slot', async () => {
   );
 });
 
-it('should open air time for every logo and close it when one rotates out', async () => {
+it('should open air time for every logo on the row', async () => {
   renderStrip();
   await settle();
 
@@ -238,15 +187,23 @@ it('should open air time for every logo and close it when one rotates out', asyn
   expect(logEventStart.mock.calls[0][1]).toEqual(
     expect.objectContaining({ event_name: AdActions.AirTime }),
   );
+  expect(logEventStart.mock.calls[0][0]).toMatch(/^ss-0-gen-gold$/);
+});
 
-  logEventEnd.mockClear();
+it('should hold the same row for the life of the page', async () => {
+  renderStrip();
+  await settle();
+
+  const before = shownLogos();
 
+  // Turnover is per page load now, so nothing may swap under the reader —
+  // and nothing may log a second impression for a slot that never changed.
   await act(async () => {
-    jest.advanceTimersByTime(config.communityRotationMs);
+    jest.advanceTimersByTime(5 * 60_000);
   });
 
-  expect(logEventEnd).toHaveBeenCalled();
-  expect(logEventEnd.mock.calls[0][0]).toMatch(/^ss-\d+-gen-c\d$/);
+  expect(shownLogos()).toEqual(before);
+  expect(callsFor(AdActions.Impression)).toHaveLength(before.length);
 });
 
 it('should log a click with the logo that was clicked', async () => {
diff --git a/packages/shared/src/features/monetization/sponsorStrip/SponsorStrip.tsx b/packages/shared/src/features/monetization/sponsorStrip/SponsorStrip.tsx
index b66c779a7d2..81c9deaf55a 100644
--- a/packages/shared/src/features/monetization/sponsorStrip/SponsorStrip.tsx
+++ b/packages/shared/src/features/monetization/sponsorStrip/SponsorStrip.tsx
@@ -2,7 +2,6 @@ import type { ReactElement } from 'react';
 import React from 'react';
 import classNames from 'classnames';
 import { feedGutter } from '../../../components/utilities/common';
-import type { SponsorStripConfig } from '../../../types';
 import {
   COMMUNITY_CAP,
   GOLD_CAP,
@@ -20,11 +19,10 @@ import {
   SPONSOR_ROW_HEIGHT,
   usePublishStripHeight,
 } from './sponsorStripOffset';
-import { PREMIUM_SLOT_COUNT } from './sponsorStripRotation';
+import { PREMIUM_SLOT_COUNT } from './sponsorStripSlots';
 import { useSponsorStripAds } from './useSponsorStripAds';
 
 interface SponsorStripProps {
-  config: SponsorStripConfig;
   /**
    * Passed in rather than queried here: the feed layout needs the same list to
    * decide whether it can give up its Happening Now card, and one query
@@ -135,12 +133,10 @@ const SponsorRow = ({
  * and the suppression is keyed to the same gate.
  */
 export const SponsorStrip = ({
-  config,
   headlines,
 }: SponsorStripProps): ReactElement | null => {
   const { gold, premium, community, wallRef } = useSponsorStripAds({
     enabled: true,
-    config,
   });
   const hasSponsors = !!gold || !!premium.length || !!community.length;
   // Published before the early return so the controls that lift for the dock
diff --git a/packages/shared/src/features/monetization/sponsorStrip/sponsorStripRotation.spec.ts b/packages/shared/src/features/monetization/sponsorStrip/sponsorStripRotation.spec.ts
deleted file mode 100644
index a132266dad2..00000000000
--- a/packages/shared/src/features/monetization/sponsorStrip/sponsorStripRotation.spec.ts
+++ /dev/null
@@ -1,161 +0,0 @@
-import type { SponsorStripCreative } from './sponsorStripCreative';
-import { SponsorTier } from './sponsorStripCreative';
-import {
-  canRotate,
-  createRotation,
-  partitionByTier,
-  resizeRotation,
-  rotateNextSlot,
-  rotateSlot,
-  rotationSponsors,
-} from './sponsorStripRotation';
-
-const creative = (
-  id: string,
-  tier = SponsorTier.Community,
-): SponsorStripCreative =>
-  ({
-    gen_id: id,
-    company: id,
-    tier,
-  } as SponsorStripCreative);
-
-const pool = (size: number, tier = SponsorTier.Community) =>
-  Array.from({ length: size }, (_, index) => creative(`c${index}`, tier));
-
-/** Keeps the deck in pool order so positions are assertable. */
-const noShuffle = <T>(items: T[]): T[] => [...items];
-
-const companies = (creatives: SponsorStripCreative[]) =>
-  creatives.map(({ company }) => company);
-
-describe('partitionByTier', () => {
-  it('should keep a single gold sponsor', () => {
-    const pools = partitionByTier([
-      creative('gold-1', SponsorTier.Gold),
-      creative('gold-2', SponsorTier.Gold),
-      creative('premium-1', SponsorTier.Premium),
-      creative('community-1'),
-    ]);
-
-    expect(pools.gold?.company).toEqual('gold-1');
-    expect(companies(pools.premium)).toEqual(['premium-1']);
-    expect(companies(pools.community)).toEqual(['community-1']);
-  });
-
-  it('should report no gold sponsor when none was sold', () => {
-    expect(partitionByTier(pool(3)).gold).toBeNull();
-  });
-});
-
-describe('createRotation', () => {
-  it('should hold one cursor per slot', () => {
-    const rotation = createRotation(pool(10), 4, noShuffle);
-
-    expect(companies(rotationSponsors(rotation))).toEqual([
-      'c0',
-      'c1',
-      'c2',
-      'c3',
-    ]);
-  });
-
-  it('should not open more slots than the deck can fill', () => {
-    const rotation = createRotation(pool(2), 4, noShuffle);
-
-    expect(rotationSponsors(rotation)).toHaveLength(2);
-  });
-});
-
-describe('rotateSlot', () => {
-  it('should hold still when the deck is no larger than the row', () => {
-    const rotation = createRotation(pool(4), 4, noShuffle);
-
-    expect(canRotate(rotation)).toBe(false);
-    expect(rotateSlot(rotation, 0)).toBe(rotation);
-  });
-
-  it('should replace only the rotated slot', () => {
-    const rotation = rotateSlot(createRotation(pool(6), 4, noShuffle), 1);
-
-    expect(companies(rotationSponsors(rotation))).toEqual([
-      'c0',
-      'c4',
-      'c2',
-      'c3',
-    ]);
-  });
-
-  it('should never show the same sponsor twice, whatever the rotation order', () => {
-    let rotation = createRotation(pool(6), 4, noShuffle);
-
-    // Deliberately lopsided: one slot rotating far more than its neighbours is
-    // what a staggered ticker looks like if a slot count changes mid-session.
-    [0, 0, 0, 2, 0, 1, 0, 0, 3, 0, 0, 0].forEach((slot) => {
-      rotation = rotateSlot(rotation, slot);
-      const shown = companies(rotationSponsors(rotation));
-
-      expect(new Set(shown).size).toEqual(shown.length);
-    });
-  });
-
-  it('should ignore a slot the row does not have', () => {
-    const rotation = createRotation(pool(6), 4, noShuffle);
-
-    expect(rotateSlot(rotation, 9)).toBe(rotation);
-    expect(rotateSlot(rotation, -1)).toBe(rotation);
-  });
-});
-
-describe('rotateNextSlot', () => {
-  it('should take the slots in turn so each holds its logo for a full cycle', () => {
-    let rotation = createRotation(pool(8), 4, noShuffle);
-    const rotated: number[] = [];
-
-    Array.from({ length: 8 }).forEach(() => {
-      const before = rotationSponsors(rotation);
-      rotation = rotateNextSlot(rotation);
-      const after = rotationSponsors(rotation);
-
-      rotated.push(
-        after.findIndex((sponsor, slot) => sponsor !== before[slot]),
-      );
-    });
-
-    expect(rotated).toEqual([0, 1, 2, 3, 0, 1, 2, 3]);
-  });
-
-  it('should do nothing to an empty row', () => {
-    const rotation = createRotation([], 4, noShuffle);
-
-    expect(rotateNextSlot(rotation)).toBe(rotation);
-  });
-});
-
-describe('resizeRotation', () => {
-  it('should drop the rightmost slots when the row narrows', () => {
-    const rotation = resizeRotation(createRotation(pool(8), 4, noShuffle), 2);
-
-    expect(companies(rotationSponsors(rotation))).toEqual(['c0', 'c1']);
-  });
-
-  it('should fill new slots with sponsors that are not already up', () => {
-    const rotation = resizeRotation(createRotation(pool(8), 2, noShuffle), 4);
-    const shown = companies(rotationSponsors(rotation));
-
-    expect(shown).toHaveLength(4);
-    expect(new Set(shown).size).toEqual(4);
-  });
-
-  it('should cap growth at the deck size', () => {
-    const rotation = resizeRotation(createRotation(pool(3), 2, noShuffle), 12);
-
-    expect(rotationSponsors(rotation)).toHaveLength(3);
-  });
-
-  it('should keep the same rotation when nothing changed', () => {
-    const rotation = createRotation(pool(8), 4, noShuffle);
-
-    expect(resizeRotation(rotation, 4)).toBe(rotation);
-  });
-});
diff --git a/packages/shared/src/features/monetization/sponsorStrip/sponsorStripRotation.ts b/packages/shared/src/features/monetization/sponsorStrip/sponsorStripRotation.ts
deleted file mode 100644
index 8cd51c7c207..00000000000
--- a/packages/shared/src/features/monetization/sponsorStrip/sponsorStripRotation.ts
+++ /dev/null
@@ -1,141 +0,0 @@
-import { shuffleArray } from '../../../lib/func';
-import type { SponsorStripCreative } from './sponsorStripCreative';
-import { SponsorTier } from './sponsorStripCreative';
-
-export const PREMIUM_SLOT_COUNT = 4;
-
-interface SponsorPools {
-  gold: SponsorStripCreative | null;
-  premium: SponsorStripCreative[];
-  community: SponsorStripCreative[];
-}
-
-export const partitionByTier = (
-  sponsors: SponsorStripCreative[],
-): SponsorPools => ({
-  // A second gold creative is dropped rather than demoted. The tier is sold as
-  // the one static slot, so two of them is not a degraded version of what was
-  // sold, it is a different thing.
-  gold: sponsors.find(({ tier }) => tier === SponsorTier.Gold) ?? null,
-  premium: sponsors.filter(({ tier }) => tier === SponsorTier.Premium),
-  community: sponsors.filter(({ tier }) => tier === SponsorTier.Community),
-});
-
-export interface Rotation {
-  deck: SponsorStripCreative[];
-  /**
-   * One absolute draw position per slot; the creative on screen is
-   * `deck[cursor % deck.length]`. Absolute rather than wrapped so a slot's
-   * next draw is always "further down the deck than anything showing".
-   */
-  cursors: number[];
-  next: number;
-}
-
-type Shuffle = <T>(items: T[]) => T[];
-
-export const createRotation = (
-  pool: SponsorStripCreative[],
-  slotCount: number,
-  shuffle: Shuffle = shuffleArray,
-): Rotation => {
-  // Shuffled once per mount so no advertiser is permanently first, and — once
-  // the row starts trimming to fit — none is permanently the one dropped.
-  const deck = shuffle(pool);
-  const count = Math.max(0, Math.min(slotCount, deck.length));
-
-  return {
-    deck,
-    cursors: Array.from({ length: count }, (_, index) => index),
-    next: count,
-  };
-};
-
-export const rotationSponsors = ({
-  deck,
-  cursors,
-}: Rotation): SponsorStripCreative[] =>
-  cursors.map((cursor) => deck[cursor % deck.length]);
-
-/** A deck no larger than the row it fills has nothing to rotate to. */
-export const canRotate = ({ deck, cursors }: Rotation): boolean =>
-  deck.length > cursors.length;
-
-export const rotateSlot = (rotation: Rotation, slot: number): Rotation => {
-  if (!canRotate(rotation) || slot < 0 || slot >= rotation.cursors.length) {
-    return rotation;
-  }
-
-  const { deck, cursors, next } = rotation;
-  const shown = new Set(
-    cursors
-      .filter((_, index) => index !== slot)
-      .map((cursor) => cursor % deck.length),
-  );
-
-  // Skip past anything already on screen, so the same logo can never appear
-  // twice in the row. Terminates because the deck is larger than the row.
-  let position = next;
-  while (shown.has(position % deck.length)) {
-    position += 1;
-  }
-
-  const updated = [...cursors];
-  updated[slot] = position;
-
-  return { deck, cursors: updated, next: position + 1 };
-};
-
-/**
- * Rotates the slot whose logo has been up longest, which is the lowest draw
- * position. Deriving the turn from the state rather than from a counter beside
- * it keeps each slot's turn evenly spaced and makes the ticker a pure step: a
- * counter captured in an interval callback reads whatever it has reached by the
- * time React applies the update, not the value it had when the tick fired, so
- * every queued rotation lands on the same slot.
- */
-export const rotateNextSlot = (rotation: Rotation): Rotation => {
-  const { cursors } = rotation;
-
-  if (!cursors.length) {
-    return rotation;
-  }
-
-  const oldest = cursors.reduce(
-    (slot, cursor, index) => (cursor < cursors[slot] ? index : slot),
-    0,
-  );
-
-  return rotateSlot(rotation, oldest);
-};
-
-/**
- * Grows or shrinks the row as the viewport changes. Shrinking drops the
- * rightmost slots, which is where the trimmed marks were already going.
- */
-export const resizeRotation = (
-  rotation: Rotation,
-  slotCount: number,
-): Rotation => {
-  const { deck, cursors, next } = rotation;
-  const count = Math.max(0, Math.min(slotCount, deck.length));
-
-  if (count === cursors.length) {
-    return rotation;
-  }
-
-  if (count < cursors.length) {
-    return { deck, cursors: cursors.slice(0, count), next };
-  }
-
-  const added = count - cursors.length;
-
-  return {
-    deck,
-    cursors: [
-      ...cursors,
-      ...Array.from({ length: added }, (_, index) => next + index),
-    ],
-    next: next + added,
-  };
-};
diff --git a/packages/shared/src/features/monetization/sponsorStrip/sponsorStripSlots.spec.ts b/packages/shared/src/features/monetization/sponsorStrip/sponsorStripSlots.spec.ts
new file mode 100644
index 00000000000..391cc6b072b
--- /dev/null
+++ b/packages/shared/src/features/monetization/sponsorStrip/sponsorStripSlots.spec.ts
@@ -0,0 +1,35 @@
+import type { SponsorStripCreative } from './sponsorStripCreative';
+import { SponsorTier } from './sponsorStripCreative';
+import { partitionByTier } from './sponsorStripSlots';
+
+const creative = (
+  id: string,
+  tier = SponsorTier.Community,
+): SponsorStripCreative =>
+  ({
+    gen_id: id,
+    company: id,
+    tier,
+  } as SponsorStripCreative);
+
+const companies = (creatives: SponsorStripCreative[]) =>
+  creatives.map(({ company }) => company);
+
+describe('partitionByTier', () => {
+  it('should keep a single gold sponsor', () => {
+    const pools = partitionByTier([
+      creative('gold-1', SponsorTier.Gold),
+      creative('gold-2', SponsorTier.Gold),
+      creative('premium-1', SponsorTier.Premium),
+      creative('community-1'),
+    ]);
+
+    expect(pools.gold?.company).toEqual('gold-1');
+    expect(companies(pools.premium)).toEqual(['premium-1']);
+    expect(companies(pools.community)).toEqual(['community-1']);
+  });
+
+  it('should report no gold sponsor when none was sold', () => {
+    expect(partitionByTier([creative('c1'), creative('c2')]).gold).toBeNull();
+  });
+});
diff --git a/packages/shared/src/features/monetization/sponsorStrip/sponsorStripSlots.ts b/packages/shared/src/features/monetization/sponsorStrip/sponsorStripSlots.ts
new file mode 100644
index 00000000000..d65fb42e1f7
--- /dev/null
+++ b/packages/shared/src/features/monetization/sponsorStrip/sponsorStripSlots.ts
@@ -0,0 +1,25 @@
+import type { SponsorStripCreative } from './sponsorStripCreative';
+import { SponsorTier } from './sponsorStripCreative';
+
+/**
+ * Premium is deliberately the scarcer tier: one gold, four premium, and
+ * community takes whatever the row has left, which is always more.
+ */
+export const PREMIUM_SLOT_COUNT = 4;
+
+interface SponsorPools {
+  gold: SponsorStripCreative | null;
+  premium: SponsorStripCreative[];
+  community: SponsorStripCreative[];
+}
+
+export const partitionByTier = (
+  sponsors: SponsorStripCreative[],
+): SponsorPools => ({
+  // A second gold creative is dropped rather than demoted. The tier is sold as
+  // the one slot that never shares, so two of them is not a degraded version
+  // of what was sold, it is a different thing.
+  gold: sponsors.find(({ tier }) => tier === SponsorTier.Gold) ?? null,
+  premium: sponsors.filter(({ tier }) => tier === SponsorTier.Premium),
+  community: sponsors.filter(({ tier }) => tier === SponsorTier.Community),
+});
diff --git a/packages/shared/src/features/monetization/sponsorStrip/useSponsorStrip.spec.tsx b/packages/shared/src/features/monetization/sponsorStrip/useSponsorStrip.spec.tsx
index 90b0f9c5be2..24b32dad749 100644
--- a/packages/shared/src/features/monetization/sponsorStrip/useSponsorStrip.spec.tsx
+++ b/packages/shared/src/features/monetization/sponsorStrip/useSponsorStrip.spec.tsx
@@ -24,12 +24,6 @@ jest.mock('../../../hooks/useViewSize', () => ({
 const mockFeature = jest.mocked(useConditionalFeature);
 const mockViewSize = jest.mocked(useViewSizeClient);
 
-const config = {
-  enabled: true,
-  premiumRotationMs: 30_000,
-  communityRotationMs: 10_000,
-};
-
 const LogContext = getLogContextStatic();
 
 const render = ({
@@ -58,42 +52,39 @@ const render = ({
 
 beforeEach(() => {
   jest.clearAllMocks();
-  mockFeature.mockReturnValue({ value: config, isLoading: false });
+  mockFeature.mockReturnValue({ value: true, isLoading: false });
   mockViewSize.mockReturnValue(true);
 });
 
 it('should be on for a feed that can show the Happening Now card', () => {
-  expect(render().result.current.isEnabled).toBe(true);
+  expect(render().result.current).toBe(true);
 });
 
 it('should be off when the experiment is off', () => {
-  mockFeature.mockReturnValue({
-    value: { ...config, enabled: false },
-    isLoading: false,
-  });
+  mockFeature.mockReturnValue({ value: false, isLoading: false });
 
-  expect(render().result.current.isEnabled).toBe(false);
+  expect(render().result.current).toBe(false);
 });
 
 it('should be off for a Plus subscriber, who paid for no ads', () => {
-  expect(render({ isPlus: true }).result.current.isEnabled).toBe(false);
+  expect(render({ isPlus: true }).result.current).toBe(false);
 });
 
 it('should be off on a feed with ads switched off', () => {
-  expect(render({ disableAds: true }).result.current.isEnabled).toBe(false);
+  expect(render({ disableAds: true }).result.current).toBe(false);
 });
 
 it('should be off below tablet, where a logo wall costs more feed than it holds logos', () => {
   mockViewSize.mockReturnValue(false);
 
-  expect(render().result.current.isEnabled).toBe(false);
+  expect(render().result.current).toBe(false);
 });
 
 it('should be off on a feed that never shows the card', () => {
-  expect(
-    render({ feedName: SharedFeedPage.Search }).result.current.isEnabled,
-  ).toBe(false);
-  expect(render({ feedName: 'squad' }).result.current.isEnabled).toBe(false);
+  expect(render({ feedName: SharedFeedPage.Search }).result.current).toBe(
+    false,
+  );
+  expect(render({ feedName: 'squad' }).result.current).toBe(false);
 });
 it('should not evaluate the experiment for anyone who could not see it', () => {
   render({ isPlus: true });
diff --git a/packages/shared/src/features/monetization/sponsorStrip/useSponsorStrip.ts b/packages/shared/src/features/monetization/sponsorStrip/useSponsorStrip.ts
index fe39a4454a7..fa3ea00bb6b 100644
--- a/packages/shared/src/features/monetization/sponsorStrip/useSponsorStrip.ts
+++ b/packages/shared/src/features/monetization/sponsorStrip/useSponsorStrip.ts
@@ -4,7 +4,6 @@ import { HERO_ELIGIBLE_FEEDS } from '../../../hooks/useFeed';
 import { ViewSize, useViewSizeClient } from '../../../hooks/useViewSize';
 import { featureSponsorStrip } from '../../../lib/featureManagement';
 import type { AllFeedPages } from '../../../lib/query';
-import type { SponsorStripConfig } from '../../../types';
 
 interface UseSponsorStripProps {
   feedName?: string;
@@ -12,11 +11,6 @@ interface UseSponsorStripProps {
   disableAds?: boolean;
 }
 
-interface UseSponsorStrip {
-  isEnabled: boolean;
-  config: SponsorStripConfig;
-}
-
 /**
  * The strip shows on the feeds that can show a Happening Now card, and on no
  * others. Sharing one set with the card means the two can never disagree: the
@@ -35,7 +29,7 @@ const isSponsorStripFeed = (feedName?: string): boolean =>
 export const useSponsorStrip = ({
   feedName,
   disableAds,
-}: UseSponsorStripProps = {}): UseSponsorStrip => {
+}: UseSponsorStripProps = {}): boolean => {
   const { isPlus } = usePlusSubscription();
   // `useViewSizeClient`, not `useViewSize`: the latter reads matchMedia in its
   // first client render while the server renders `false`, so the dock would
@@ -45,10 +39,10 @@ export const useSponsorStrip = ({
   // A logo wall on a phone costs more feed than it can hold logos.
   const isEligible =
     !isPlus && !disableAds && isTablet && isSponsorStripFeed(feedName);
-  const { value: config } = useConditionalFeature({
+  const { value: isOn } = useConditionalFeature({
     feature: featureSponsorStrip,
     shouldEvaluate: isEligible,
   });
 
-  return { isEnabled: isEligible && config.enabled, config };
+  return isEligible && isOn;
 };
diff --git a/packages/shared/src/features/monetization/sponsorStrip/useSponsorStripAds.ts b/packages/shared/src/features/monetization/sponsorStrip/useSponsorStripAds.ts
index dac501dc71f..620a10f50db 100644
--- a/packages/shared/src/features/monetization/sponsorStrip/useSponsorStripAds.ts
+++ b/packages/shared/src/features/monetization/sponsorStrip/useSponsorStripAds.ts
@@ -1,35 +1,18 @@
-import {
-  useCallback,
-  useEffect,
-  useLayoutEffect,
-  useMemo,
-  useState,
-} from 'react';
+import { useCallback, useLayoutEffect, useMemo, useState } from 'react';
 import { useQuery } from '@tanstack/react-query';
 import { useIsLightTheme } from '../../../hooks/utils/useThemedAsset';
 import { AdPlacement } from '../../../lib/ads';
-import { disabledRefetch } from '../../../lib/func';
+import { disabledRefetch, shuffleArray } from '../../../lib/func';
 import { RequestKey } from '../../../lib/query';
 import { ONE_HOUR } from '../../../lib/time';
-import type { SponsorStripConfig } from '../../../types';
 import { fetchSponsorStripAds } from './mockSponsorStripAds';
 import { fittedSlotCount } from './sponsorLogoSizing';
-import type { ResolvedSponsor } from './sponsorStripCreative';
+import type {
+  ResolvedSponsor,
+  SponsorStripCreative,
+} from './sponsorStripCreative';
 import { parseSponsors, resolveSponsor } from './sponsorStripCreative';
-import type { Rotation } from './sponsorStripRotation';
-import {
-  PREMIUM_SLOT_COUNT,
-  createRotation,
-  partitionByTier,
-  resizeRotation,
-  rotateNextSlot,
-  rotationSponsors,
-} from './sponsorStripRotation';
-
-interface UseSponsorStripAdsProps {
-  enabled: boolean;
-  config: SponsorStripConfig;
-}
+import { PREMIUM_SLOT_COUNT, partitionByTier } from './sponsorStripSlots';
 
 interface UseSponsorStripAds {
   gold: ResolvedSponsor | null;
@@ -39,27 +22,6 @@ interface UseSponsorStripAds {
   wallRef: (node: HTMLElement | null) => void;
 }
 
-// A hidden tab must not burn through the decks: rotating there would spend
-// every advertiser's turn on a screen nobody is looking at, and inflate the
-// impression count while it did. Visibility rather than focus, so this and
-// air time (which the log lifecycle ends on hide) pause on the same signal.
-const usePageVisible = (): boolean => {
-  const [isVisible, setIsVisible] = useState(true);
-
-  useEffect(() => {
-    const onChange = () =>
-      setIsVisible(globalThis.document.visibilityState === 'visible');
-
-    onChange();
-    globalThis.document.addEventListener('visibilitychange', onChange);
-
-    return () =>
-      globalThis.document.removeEventListener('visibilitychange', onChange);
-  }, []);
-
-  return isVisible;
-};
-
 /**
  * How many fixed-width slots the wall holds.
  *
@@ -107,69 +69,32 @@ const useFittedSlots = (
   return { ref, count: fitted === null ? 0 : Math.min(maxSlots, fitted) };
 };
 
-interface UseRotatingSlotsProps {
-  pool: Rotation['deck'];
-  slotCount: number;
-  intervalMs: number;
-  enabled: boolean;
-}
-
-const useRotatingSlots = ({
-  pool,
-  slotCount,
-  intervalMs,
-  enabled,
-}: UseRotatingSlotsProps): Rotation['deck'] => {
-  const isVisible = usePageVisible();
-  const [rotation, setRotation] = useState<Rotation>(() =>
-    createRotation(pool, slotCount),
-  );
-  // Identity, not the array: the pool is rebuilt on every query render, and
-  // reshuffling then would reset the row's order under the reader.
+/**
+ * The pool in a stable random order, dealt once per page load.
+ *
+ * That is the whole turnover story: the row a reader sees holds for as long as
+ * the page does, and the next load deals a different set, so no advertiser is
+ * permanently first — or permanently the one a narrow window drops. Shuffling
+ * on mount rather than during render also keeps the server markup and the
+ * first client render in agreement.
+ */
+const useDeck = (pool: SponsorStripCreative[]): SponsorStripCreative[] => {
+  // Identity, not the array: the pool is rebuilt on every render of the query,
+  // and reshuffling then would deal a new row under the reader.
   const poolKey = pool.map(({ gen_id: genId }) => genId).join(',');
 
-  useEffect(() => {
-    setRotation(createRotation(pool, slotCount));
-    // The pool's contents are what should reseed the deck; `slotCount` is
-    // handled by the resize below, and including it here would reshuffle
-    // every advertiser's position on a window drag.
+  return useMemo(
+    () => shuffleArray(pool),
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [poolKey]);
-
-  useEffect(() => {
-    setRotation((current) => resizeRotation(current, slotCount));
-  }, [slotCount]);
-
-  const slots = rotation.cursors.length;
-  const deckSize = rotation.deck.length;
-
-  useEffect(() => {
-    if (!enabled || !isVisible || intervalMs <= 0 || !slots) {
-      return undefined;
-    }
-
-    if (deckSize <= slots) {
-      return undefined;
-    }
-
-    // One slot per tick, oldest first, so each slot turns over once per
-    // interval and the row never swaps every logo at the same instant.
-    const period = Math.max(1, Math.round(intervalMs / slots));
-    const timer = globalThis.setInterval(
-      () => setRotation(rotateNextSlot),
-      period,
-    );
-
-    return () => globalThis.clearInterval(timer);
-  }, [enabled, isVisible, intervalMs, slots, deckSize]);
-
-  return rotationSponsors(rotation);
+    [poolKey],
+  );
 };
 
 export const useSponsorStripAds = ({
   enabled,
-  config,
-}: UseSponsorStripAdsProps): UseSponsorStripAds => {
+}: {
+  enabled: boolean;
+}): UseSponsorStripAds => {
   const isLight = useIsLightTheme();
   const { data } = useQuery({
     queryKey: [RequestKey.Ads, AdPlacement.SponsorStrip],
@@ -180,12 +105,16 @@ export const useSponsorStripAds = ({
   });
 
   const pools = useMemo(() => partitionByTier(parseSponsors(data)), [data]);
-  // One gold, four premium, and community takes whatever the row has left:
-  // premium and community share one measured run, so the tiers cannot argue
-  // over the same pixels. The upper bound is the pool itself — a wider window
-  // shows more advertisers rather than the same few further apart.
+  const premiumDeck = useDeck(pools.premium);
+  const communityDeck = useDeck(pools.community);
+
+  // One gold, four premium, and community takes whatever the row has left —
+  // fewer premium slots than community by design. The two tiers share one
+  // measured run so they cannot argue over the same pixels, and the upper
+  // bound is the pool itself: a wider window shows more advertisers rather
+  // than the same few further apart.
   const { ref: wallRef, count: wallSlots } = useFittedSlots(
-    PREMIUM_SLOT_COUNT + pools.community.length,
+    PREMIUM_SLOT_COUNT + communityDeck.length,
   );
 
   // Reserved from the pool rather than read off the rendered row: the row
@@ -193,30 +122,29 @@ export const useSponsorStripAds = ({
   // subtracted an as-yet-empty premium row would open slots it is about to
   // take back — each one logging an impression and firing a pixel on its way
   // through.
-  const premiumSlots = Math.min(PREMIUM_SLOT_COUNT, pools.premium.length);
-  const premium = useRotatingSlots({
-    pool: pools.premium,
-    slotCount: premiumSlots,
-    intervalMs: config.premiumRotationMs,
-    enabled,
-  });
-  const community = useRotatingSlots({
-    pool: pools.community,
-    slotCount: Math.max(0, wallSlots - premiumSlots),
-    intervalMs: config.communityRotationMs,
-    enabled,
-  });
+  const premiumSlots = Math.min(PREMIUM_SLOT_COUNT, premiumDeck.length);
 
   // Themed logos resolve here rather than in the decks, so switching theme
-  // repaints the row without disturbing anybody's turn in the rotation.
-  const resolved = useMemo(
+  // repaints the row without dealing anybody a different slot.
+  return useMemo(
     () => ({
       gold: pools.gold ? resolveSponsor(pools.gold, isLight) : null,
-      premium: premium.map((creative) => resolveSponsor(creative, isLight)),
-      community: community.map((creative) => resolveSponsor(creative, isLight)),
+      premium: premiumDeck
+        .slice(0, premiumSlots)
+        .map((creative) => resolveSponsor(creative, isLight)),
+      community: communityDeck
+        .slice(0, Math.max(0, wallSlots - premiumSlots))
+        .map((creative) => resolveSponsor(creative, isLight)),
+      wallRef,
     }),
-    [pools.gold, premium, community, isLight],
+    [
+      pools.gold,
+      premiumDeck,
+      communityDeck,
+      premiumSlots,
+      wallSlots,
+      isLight,
+      wallRef,
+    ],
   );
-
-  return { ...resolved, wallRef };
 };
diff --git a/packages/shared/src/features/monetization/sponsorStrip/useSponsorStripFeed.spec.tsx b/packages/shared/src/features/monetization/sponsorStrip/useSponsorStripFeed.spec.tsx
index 692604c9650..f91083df317 100644
--- a/packages/shared/src/features/monetization/sponsorStrip/useSponsorStripFeed.spec.tsx
+++ b/packages/shared/src/features/monetization/sponsorStrip/useSponsorStripFeed.spec.tsx
@@ -10,12 +10,6 @@ jest.mock('./useStripHeadlines', () => ({ useStripHeadlines: jest.fn() }));
 const mockStrip = jest.mocked(useSponsorStrip);
 const mockHeadlines = jest.mocked(useStripHeadlines);
 
-const config = {
-  enabled: true,
-  premiumRotationMs: 30_000,
-  communityRotationMs: 10_000,
-};
-
 const headline = { id: 'h1' } as PostHighlight;
 
 const render = () =>
@@ -23,7 +17,7 @@ const render = () =>
 
 beforeEach(() => {
   jest.clearAllMocks();
-  mockStrip.mockReturnValue({ isEnabled: true, config });
+  mockStrip.mockReturnValue(true);
   mockHeadlines.mockReturnValue([headline]);
 });
 
@@ -40,13 +34,13 @@ it('should keep the feed card when the strip has no headlines to carry', () => {
 });
 
 it('should keep the feed card when the strip is off', () => {
-  mockStrip.mockReturnValue({ isEnabled: false, config });
+  mockStrip.mockReturnValue(false);
 
   expect(render().result.current.disableHighlightItems).toBe(false);
 });
 
 it('should not query headlines when the strip is off', () => {
-  mockStrip.mockReturnValue({ isEnabled: false, config });
+  mockStrip.mockReturnValue(false);
   render();
 
   expect(mockHeadlines).toHaveBeenCalledWith(false);
@@ -57,5 +51,4 @@ it('should hand the strip the same headlines it decided with', () => {
 
   expect(result.current.headlines).toEqual([headline]);
   expect(result.current.isEnabled).toBe(true);
-  expect(result.current.config).toEqual(config);
 });
diff --git a/packages/shared/src/features/monetization/sponsorStrip/useSponsorStripFeed.ts b/packages/shared/src/features/monetization/sponsorStrip/useSponsorStripFeed.ts
index bc405ee1585..df0f176ff32 100644
--- a/packages/shared/src/features/monetization/sponsorStrip/useSponsorStripFeed.ts
+++ b/packages/shared/src/features/monetization/sponsorStrip/useSponsorStripFeed.ts
@@ -1,5 +1,4 @@
 import type { PostHighlight } from '../../../graphql/highlights';
-import type { SponsorStripConfig } from '../../../types';
 import { useSponsorStrip } from './useSponsorStrip';
 import { useStripHeadlines } from './useStripHeadlines';
 
@@ -10,7 +9,6 @@ interface UseSponsorStripFeedProps {
 
 interface UseSponsorStripFeed {
   isEnabled: boolean;
-  config: SponsorStripConfig;
   headlines: PostHighlight[];
   /**
    * Drop the feed's Happening Now card — true only when the strip is actually
@@ -24,20 +22,20 @@ interface UseSponsorStripFeed {
 
 /**
  * Everything a feed layout needs from the sponsor strip, in one place: whether
- * to mount it, what to mount it with, and whether the feed underneath should
- * give up its Happening Now card. One evaluation of the flag and one headlines
- * query, so the strip and the feed can never be told different things.
+ * to mount it, the headlines it carries, and whether the feed underneath
+ * should give up its Happening Now card. One evaluation of the flag and one
+ * headlines query, so the strip and the feed can never be told different
+ * things.
  */
 export const useSponsorStripFeed = ({
   feedName,
   disableAds,
 }: UseSponsorStripFeedProps): UseSponsorStripFeed => {
-  const { isEnabled, config } = useSponsorStrip({ feedName, disableAds });
+  const isEnabled = useSponsorStrip({ feedName, disableAds });
   const headlines = useStripHeadlines(isEnabled);
 
   return {
     isEnabled,
-    config,
     headlines,
     disableHighlightItems: isEnabled && !!headlines.length,
   };
diff --git a/packages/shared/src/lib/featureManagement.ts b/packages/shared/src/lib/featureManagement.ts
index 258adae1b3f..cb19ad2c74d 100644
--- a/packages/shared/src/lib/featureManagement.ts
+++ b/packages/shared/src/lib/featureManagement.ts
@@ -3,7 +3,7 @@ import type { FeedSettingsKeys } from '../contexts/FeedContext';
 import type { PlusItemStatus } from '../components/plus/PlusListItem';
 import { isDevelopment } from './constants';
 import { BriefingType } from '../graphql/posts';
-import type { HeroCardsConfig, SponsorStripConfig } from '../types';
+import type { HeroCardsConfig } from '../types';
 import { PostType } from '../types';
 import { Feature } from './feature';
 
@@ -259,25 +259,16 @@ export const featureOnboardingChrome = new Feature<OnboardingChromeVariant>(
 );
 
 /**
- * Experiment: the sponsor strip — a logo wall docked under the main feeds.
- * While it shows, the Happening Now card is dropped from the feed: the strip
- * is where breaking news goes instead, so running both would show it twice.
- * Suppression follows the strip and not the flag, so a user who cannot see
- * the strip (Plus, ads disabled, below tablet) keeps the card.
+ * Experiment: the sponsor strip — a logo wall docked under the main feeds with
+ * the breaking-news ticker under it. While the strip carries those headlines,
+ * the feed drops its Happening Now card, so the two never show it twice.
  *
  * On in development and off everywhere else, the way `cores`, `quest_offers`
  * and `post_boost_ads` are: `isDevelopment` is false in a production build, so
  * this cannot ship the experiment to anyone — GrowthBook ramps it — while a
  * local session still gets the strip without anybody forcing a flag.
  */
-export const featureSponsorStrip = new Feature<SponsorStripConfig>(
-  'sponsor_strip',
-  {
-    enabled: isDevelopment,
-    premiumRotationMs: 30_000,
-    communityRotationMs: 10_000,
-  },
-);
+export const featureSponsorStrip = new Feature('sponsor_strip', isDevelopment);
 
 export const featureLayoutV2 = new Feature('layout_v2', false);
 
diff --git a/packages/shared/src/types.ts b/packages/shared/src/types.ts
index eb04e1a5710..07a22522047 100644
--- a/packages/shared/src/types.ts
+++ b/packages/shared/src/types.ts
@@ -61,11 +61,3 @@ export type HeroCardsConfig = {
   chipLabels: Partial<Record<PostHeroSignificance, string>>;
   allowedPostTypes: Partial<Record<PostType, boolean>>;
 };
-
-export type SponsorStripConfig = {
-  enabled: boolean;
-  /** Milliseconds a single premium slot holds a logo before it rotates. */
-  premiumRotationMs: number;
-  /** Same, for a community slot. Community turns over faster by design. */
-  communityRotationMs: number;
-};

From dddc01723dbf82c7b70687f5dff20f02b1365831 Mon Sep 17 00:00:00 2001
From: Chris Bongers <chrisbongers@gmail.com>
Date: Fri, 4 Sep 2026 16:29:26 +0200
Subject: [PATCH 04/20] fix(monetization): give the sponsor strip its own inset
 in layout v2

`feedGutter` collapses to `px-0` inside the v2 floating card, because the
feed's inset there comes from the grid being narrower than the frame rather
than from padding. The dock spans the frame edge to edge, so it inherited
nothing and its first logo sat against the sidebar. It carries the same
values `feedGutter` uses outside the frame instead, which is where the
cards start in both layouts.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
---
 .../monetization/sponsorStrip/SponsorStrip.tsx       |  4 ++--
 .../sponsorStrip/SponsorStripHeadlines.tsx           |  4 ++--
 .../monetization/sponsorStrip/sponsorStripOffset.ts  | 12 ++++++++++++
 3 files changed, 16 insertions(+), 4 deletions(-)

diff --git a/packages/shared/src/features/monetization/sponsorStrip/SponsorStrip.tsx b/packages/shared/src/features/monetization/sponsorStrip/SponsorStrip.tsx
index 81c9deaf55a..f654527e709 100644
--- a/packages/shared/src/features/monetization/sponsorStrip/SponsorStrip.tsx
+++ b/packages/shared/src/features/monetization/sponsorStrip/SponsorStrip.tsx
@@ -1,7 +1,6 @@
 import type { ReactElement } from 'react';
 import React from 'react';
 import classNames from 'classnames';
-import { feedGutter } from '../../../components/utilities/common';
 import {
   COMMUNITY_CAP,
   GOLD_CAP,
@@ -15,6 +14,7 @@ import { SponsorStripHeadlines } from './SponsorStripHeadlines';
 import type { PostHighlight } from '../../../graphql/highlights';
 import type { ResolvedSponsor } from './sponsorStripCreative';
 import {
+  DOCK_GUTTER,
   HEADLINES_ROW_HEIGHT,
   SPONSOR_ROW_HEIGHT,
   usePublishStripHeight,
@@ -48,7 +48,7 @@ const SponsorRow = ({
     data-testid="sponsorStripRow"
     className={classNames(
       'flex h-10 w-full items-center gap-5 border-t border-border-subtlest-tertiary',
-      feedGutter,
+      DOCK_GUTTER,
     )}
   >
     {gold && (
diff --git a/packages/shared/src/features/monetization/sponsorStrip/SponsorStripHeadlines.tsx b/packages/shared/src/features/monetization/sponsorStrip/SponsorStripHeadlines.tsx
index 6555c7f85c4..745e19eb353 100644
--- a/packages/shared/src/features/monetization/sponsorStrip/SponsorStripHeadlines.tsx
+++ b/packages/shared/src/features/monetization/sponsorStrip/SponsorStripHeadlines.tsx
@@ -4,11 +4,11 @@ import classNames from 'classnames';
 import { getHighlightsUrl } from '../../../components/cards/highlight/common';
 import Link from '../../../components/utilities/Link';
 import { RelativeTime } from '../../../components/utilities/RelativeTime';
-import { feedGutter } from '../../../components/utilities/common';
 import { useLogContext } from '../../../contexts/LogContext';
 import type { PostHighlight } from '../../../graphql/highlights';
 import useLogEventOnce from '../../../hooks/log/useLogEventOnce';
 import { feedHighlightsLogEvent } from '../../../lib/feed';
+import { DOCK_GUTTER } from './sponsorStripOffset';
 import { LogEvent, Origin } from '../../../lib/log';
 
 const HEADLINES_FEED_NAME = 'sponsor-strip-headlines';
@@ -61,7 +61,7 @@ export const SponsorStripHeadlines = ({
       data-testid="sponsorStripHeadlines"
       className={classNames(
         'flex h-8 w-full items-center gap-4 border-t border-border-subtlest-tertiary bg-background-default',
-        feedGutter,
+        DOCK_GUTTER,
       )}
     >
       {/* The sacrificial left zone, and the reason the strip has two rows at
diff --git a/packages/shared/src/features/monetization/sponsorStrip/sponsorStripOffset.ts b/packages/shared/src/features/monetization/sponsorStrip/sponsorStripOffset.ts
index da557bd8211..75931fec89b 100644
--- a/packages/shared/src/features/monetization/sponsorStrip/sponsorStripOffset.ts
+++ b/packages/shared/src/features/monetization/sponsorStrip/sponsorStripOffset.ts
@@ -13,6 +13,18 @@ import { useEffect } from 'react';
  */
 const SPONSOR_STRIP_HEIGHT_VAR = '--sponsor-strip-height';
 
+/**
+ * The dock's own horizontal inset.
+ *
+ * Not `feedGutter`: that one collapses to zero inside the v2 floating card,
+ * because the feed's inset there comes from the grid being narrower than the
+ * frame rather than from padding. The dock spans the frame edge to edge, so a
+ * zeroed gutter leaves its first logo smudged against the sidebar. These are
+ * `feedGutter`'s own values, which is what lines the row up with the cards in
+ * both layouts.
+ */
+export const DOCK_GUTTER = 'px-4 tablet:px-6 laptop:px-10';
+
 /**
  * Row heights, derived rather than measured: both rows are a fixed height by
  * design, and a number is testable where a ResizeObserver in a headless DOM is

From c1731c96f8b3949b0c95bf991e3e2b899b3c6c28 Mon Sep 17 00:00:00 2001
From: Chris Bongers <chrisbongers@gmail.com>
Date: Mon, 7 Sep 2026 10:18:11 +0200
Subject: [PATCH 05/20] feat(monetization): put Google Cloud in the sponsor
 strip's gold slot
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Replaces the fictional Quantile placeholder in the paid slot, per the
design mock-up.

The mark is the official four-colour Google Cloud logo, reusing the exact
asset the Explore ad-card mock-up already established in this repo rather
than sourcing a second copy of it. Its white backing plate is dropped:
that plate exists to round-crop the mark into a favicon, and on the strip
it would sit as a white tile against the dark ground.

The slot keeps its two-ink design — the mark holds its brand colour in
both themes while the wordmark flips — which is the case a single flat
file cannot serve and the reason the wire contract takes a themed pair.
The wordmark is set in the fixture's own stack rather than Google Sans; a
licensed face cannot be inlined, and it is the part a real creative
replaces anyway.

Still a fixture behind the experiment flag. Nothing here says the slot
has been sold, and "Made possible by" claims more than a display
campaign does.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
---
 .../sponsorStrip/mockSponsorStripAds.ts       | 47 ++++++++++++++-----
 1 file changed, 35 insertions(+), 12 deletions(-)

diff --git a/packages/shared/src/features/monetization/sponsorStrip/mockSponsorStripAds.ts b/packages/shared/src/features/monetization/sponsorStrip/mockSponsorStripAds.ts
index 801e08b031f..0e0f9c67111 100644
--- a/packages/shared/src/features/monetization/sponsorStrip/mockSponsorStripAds.ts
+++ b/packages/shared/src/features/monetization/sponsorStrip/mockSponsorStripAds.ts
@@ -12,8 +12,11 @@ import { SponsorTier } from './sponsorStripCreative';
  * PLACEHOLDER DATA — not a sponsorship and not an ad server. The wall marks
  * are advertiser logos already published on business.daily.dev, borrowed so
  * the row can be judged at the weight and spacing real assets give it. The
- * gold slot is deliberately a fictional company: the paid slot is the one
- * place where a real name would read as a deal that has been signed.
+ * gold slot carries Google Cloud, per the design mockup, reusing the mark the
+ * Explore ad-card mockup already established as this repo's Google Cloud
+ * asset. It is still a fixture: nothing here says a gold slot has been sold,
+ * and the "Made possible by" label claims more than a display campaign does,
+ * so this stays behind the experiment flag until the slot is actually sold.
  *
  * One mark is deliberately absent: business.daily.dev serves GitLab's logo as
  * a base64 WebP wrapped in an `<svg>`, and a raster has no alpha shape to mask
@@ -49,34 +52,54 @@ const wallSponsor = (
   tier,
 });
 
-const GLYPH_COLOR = '#CE3DF3';
+/**
+ * The official four-colour Google Cloud mark, from the same devicon source the
+ * Explore ad-card mockup uses, minus that one's white backing plate: the plate
+ * is there to round-crop into a favicon, and on the strip it would sit as a
+ * white tile against the dark ground.
+ */
+const GOOGLE_CLOUD_MARK =
+  '<path fill="#ea4535" d="M80.6 40.3h.4l-.2-.2 14-14v-.3c-11.8-10.4-28.1-14-43.2-9.5C36.5 20.8 24.9 32.8 20.7 48c.2-.1.5-.2.8-.2 5.2-3.4 11.4-5.4 17.9-5.4 2.2 0 4.3.2 6.4.6.1-.1.2-.1.3-.1 9-9.9 24.2-11.1 34.6-2.6h-.1z"/>' +
+  '<path fill="#557ebf" d="M108.1 47.8c-2.3-8.5-7.1-16.2-13.8-22.1L80 39.9c6 4.9 9.5 12.3 9.3 20v2.5c16.9 0 16.9 25.2 0 25.2H63.9v20h-.1l.1.2h25.4c14.6.1 27.5-9.3 31.8-23.1 4.3-13.8-1-28.8-13-36.9z"/>' +
+  '<path fill="#36a852" d="M39 107.9h26.3V87.7H39c-1.9 0-3.7-.4-5.4-1.1l-15.2 14.6v.2c6 4.3 13.2 6.6 20.7 6.6z"/>' +
+  '<path fill="#f9bc15" d="M40.2 41.9c-14.9.1-28.1 9.3-32.9 22.8-4.8 13.6 0 28.5 11.8 37.3l15.6-14.9c-8.6-3.7-10.6-14.5-4-20.8 6.6-6.4 17.8-4.4 21.7 3.8L68 55.2C61.4 46.9 51.1 42 40.2 42.1z"/>';
+
+const GOLD_COMPANY = 'Google Cloud';
+/**
+ * Where the wordmark starts: the mark's own artwork runs x 7.3–120.9 inside a
+ * 128 box, so it is shifted back to the origin and scaled to a 22px cap before
+ * the text follows it. Hard numbers rather than a measured box because an SVG
+ * in an `<img>` never reports one.
+ */
+const WORDMARK_X = 36;
+const GOLD_WIDTH = WORDMARK_X + GOLD_COMPANY.length * 11 + 6;
 
 /**
  * A lockup rather than a word, so the paid slot reads as a logo at a glance
  * the way the marks beside it do. Two inks: the glyph holds its brand colour
  * in both themes while the wordmark flips, which is exactly the case a single
  * flat file cannot serve and the reason the wire contract takes a pair.
+ *
+ * The wordmark is set in the same stack as the rest of this fixture, not in
+ * Google Sans — a licensed face cannot be inlined here, and an approximated
+ * one is the part a real creative would replace anyway.
  */
-const goldLockup = (company: string, wordmark: string): string => {
-  const width = company.length * 11 + 46;
-  const svg = `<svg xmlns="http://www.w3.org/2000/svg" width="${width}" height="32" viewBox="0 0 ${width} 32"><rect x="0" y="4" width="24" height="24" rx="7" fill="${GLYPH_COLOR}"/><path d="M7.5 16.5l3.5 3.5 6-7" stroke="#FFFFFF" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round" fill="none"/><text x="32" y="22" font-family="Verdana,Geneva,sans-serif" font-size="17" font-weight="700" fill="${wordmark}">${company}</text></svg>`;
+const goldLockup = (wordmark: string): string => {
+  const svg = `<svg xmlns="http://www.w3.org/2000/svg" width="${GOLD_WIDTH}" height="32" viewBox="0 0 ${GOLD_WIDTH} 32"><g transform="translate(-1.73 1.45) scale(0.2366)">${GOOGLE_CLOUD_MARK}</g><text x="${WORDMARK_X}" y="22" font-family="Verdana,Geneva,sans-serif" font-size="17" font-weight="700" fill="${wordmark}">${GOLD_COMPANY}</text></svg>`;
 
   return `data:image/svg+xml,${encodeURIComponent(svg)}`;
 };
 
-const GOLD_COMPANY = 'Quantile';
-const GOLD_WIDTH = GOLD_COMPANY.length * 11 + 46;
-
 const MOCK_SPONSOR_STRIP_ADS = [
   {
     gen_id: 'mock-gold',
     company: GOLD_COMPANY,
     logo_img: {
-      light: goldLockup(GOLD_COMPANY, '#0E1217'),
-      dark: goldLockup(GOLD_COMPANY, '#FFFFFF'),
+      light: goldLockup('#0E1217'),
+      dark: goldLockup('#FFFFFF'),
     },
     logo_ratio: GOLD_WIDTH / 32,
-    link: 'https://daily.dev/?utm_source=sponsor_strip&sponsor=quantile',
+    link: 'https://cloud.google.com/free?utm_source=sponsor_strip&sponsor=google-cloud',
     pixel: [] as string[],
     tier: SponsorTier.Gold,
   },

From 364e995ce9d0a57d9d5144cca969deb0e01a6162 Mon Sep 17 00:00:00 2001
From: Chris Bongers <chrisbongers@gmail.com>
Date: Mon, 7 Sep 2026 10:18:29 +0200
Subject: [PATCH 06/20] fix(monetization): let the breaking news ticker follow
 the backend
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The ticker filtered `majorHeadlines` to a 24 hour window client-side, so
on any day the feed went quiet the row emptied and the dock silently
dropped from two rows to one. That is not rare: checked against the live
API, all twelve headlines returned were 36 to 92 hours old and every one
was filtered out, leaving the row gone with nothing to tell the reader
why. The development-only fixture underneath papered over exactly this
on one environment while production had the same hole.

The window was never right for this surface. The row stands in for the
feed's Happening Now card, which applies no age filter at all — it
renders whatever the backend serves — and neither does /highlights. The
gate was copied from the post-page sidebar widget, the one surface of
the three that has it. Deciding what still counts as a major headline is
the backend's call; a second opinion held only by this row just emptied
it.

So the filter goes, and the fixture with it — the API already returns
newest first and every row renders its own relative timestamp. Stays on
the light `majorHeadlines` query the widget uses (4.4KB) rather than the
/highlights document, which carries post bodies at 147KB for the four
fields this row needs.

Also refreshes the `DOCK_GUTTER` note: main dropped `px-4` from
`feedGutter`, so the two constants no longer match below tablet, where
the dock does not render anyway.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
---
 .../sponsorStrip/sponsorStripOffset.ts        |  5 +-
 .../sponsorStrip/useStripHeadlines.spec.tsx   | 53 ++++++++++---------
 .../sponsorStrip/useStripHeadlines.ts         | 44 ++++++---------
 .../src/hooks/feed/mockFeedHighlights.ts      | 19 -------
 4 files changed, 49 insertions(+), 72 deletions(-)

diff --git a/packages/shared/src/features/monetization/sponsorStrip/sponsorStripOffset.ts b/packages/shared/src/features/monetization/sponsorStrip/sponsorStripOffset.ts
index 75931fec89b..c68e972f284 100644
--- a/packages/shared/src/features/monetization/sponsorStrip/sponsorStripOffset.ts
+++ b/packages/shared/src/features/monetization/sponsorStrip/sponsorStripOffset.ts
@@ -20,8 +20,9 @@ const SPONSOR_STRIP_HEIGHT_VAR = '--sponsor-strip-height';
  * because the feed's inset there comes from the grid being narrower than the
  * frame rather than from padding. The dock spans the frame edge to edge, so a
  * zeroed gutter leaves its first logo smudged against the sidebar. These are
- * `feedGutter`'s own values, which is what lines the row up with the cards in
- * both layouts.
+ * `feedGutter`'s tablet-and-up values, which is what lines the row up with the
+ * cards in both layouts. The `px-4` below tablet is inert — the dock is
+ * `hidden tablet:flex` — and kept only so the two constants read alike.
  */
 export const DOCK_GUTTER = 'px-4 tablet:px-6 laptop:px-10';
 
diff --git a/packages/shared/src/features/monetization/sponsorStrip/useStripHeadlines.spec.tsx b/packages/shared/src/features/monetization/sponsorStrip/useStripHeadlines.spec.tsx
index 909f081c1f1..5de5cf58183 100644
--- a/packages/shared/src/features/monetization/sponsorStrip/useStripHeadlines.spec.tsx
+++ b/packages/shared/src/features/monetization/sponsorStrip/useStripHeadlines.spec.tsx
@@ -14,15 +14,7 @@ jest.mock('../../../graphql/highlights', () => ({
   majorHeadlinesQueryOptions: jest.fn(),
 }));
 
-jest.mock('../../../lib/constants', () => ({
-  ...(jest.requireActual('../../../lib/constants') as Record<string, unknown>),
-  isDevelopment: true,
-}));
-
 const mockQueryOptions = jest.mocked(majorHeadlinesQueryOptions);
-const mockConstants = jest.requireMock('../../../lib/constants') as {
-  isDevelopment: boolean;
-};
 
 const headline = (id: string, ageMs = 0) => ({
   node: {
@@ -60,7 +52,6 @@ const render = () => {
 
 beforeEach(() => {
   jest.clearAllMocks();
-  mockConstants.isDevelopment = true;
 });
 
 it('should carry the headlines the API returned', async () => {
@@ -72,21 +63,44 @@ it('should carry the headlines the API returned', async () => {
   );
 });
 
-it('should drop a headline older than the freshness window', async () => {
-  setHeadlines([headline('fresh'), headline('stale', 25 * ONE_HOUR)]);
+// The row stands in for the feed's Happening Now card, which applies no age
+// filter of its own — a stale-only day must still fill the ticker rather than
+// silently dropping the dock to one row.
+it('should carry headlines the backend still serves however old they are', async () => {
+  setHeadlines([
+    headline('old', 36 * ONE_HOUR),
+    headline('older', 92 * ONE_HOUR),
+  ]);
+  const { result } = render();
+
+  await waitFor(() =>
+    expect(result.current.map(({ id }) => id)).toEqual(['old', 'older']),
+  );
+});
+
+it('should keep the order the API returned rather than resorting', async () => {
+  setHeadlines([
+    headline('newest'),
+    headline('middle', 40 * ONE_HOUR),
+    headline('oldest', 90 * ONE_HOUR),
+  ]);
   const { result } = render();
 
   await waitFor(() =>
-    expect(result.current.map(({ id }) => id)).toEqual(['fresh']),
+    expect(result.current.map(({ id }) => id)).toEqual([
+      'newest',
+      'middle',
+      'oldest',
+    ]),
   );
 });
 
-it('should fall back to the fixture in development so the row is never empty', async () => {
+it('should leave the row empty when the API has no headlines at all', async () => {
   setHeadlines([]);
   const { result } = render();
 
-  await waitFor(() => expect(result.current.length).toBeGreaterThan(0));
-  expect(result.current.every(({ id }) => id.startsWith('mock-'))).toBe(true);
+  await waitFor(() => expect(mockQueryOptions).toHaveBeenCalled());
+  expect(result.current).toEqual([]);
 });
 
 it('should not query at all while the strip is off', async () => {
@@ -102,12 +116,3 @@ it('should not query at all while the strip is off', async () => {
 
   await waitFor(() => expect(result.current).toEqual([]));
 });
-
-it('should leave the row empty outside development', async () => {
-  mockConstants.isDevelopment = false;
-  setHeadlines([]);
-  const { result } = render();
-
-  await waitFor(() => expect(mockQueryOptions).toHaveBeenCalled());
-  expect(result.current).toEqual([]);
-});
diff --git a/packages/shared/src/features/monetization/sponsorStrip/useStripHeadlines.ts b/packages/shared/src/features/monetization/sponsorStrip/useStripHeadlines.ts
index 5bff9c8164f..fa41eb2f22e 100644
--- a/packages/shared/src/features/monetization/sponsorStrip/useStripHeadlines.ts
+++ b/packages/shared/src/features/monetization/sponsorStrip/useStripHeadlines.ts
@@ -1,22 +1,26 @@
 import { useQuery } from '@tanstack/react-query';
 import type { PostHighlight } from '../../../graphql/highlights';
 import { majorHeadlinesQueryOptions } from '../../../graphql/highlights';
-import { mockStripHeadlines } from '../../../hooks/feed/mockFeedHighlights';
-import { ONE_HOUR, ONE_MINUTE } from '../../../lib/time';
+import { ONE_MINUTE } from '../../../lib/time';
 
 const HEADLINE_LIMIT = 12;
 
 /**
- * Same 24 hour window the post-page widget uses. A ticker is a claim that
- * something is happening now, so a day-old headline in it is worse than a
- * shorter row.
- */
-const MAX_HEADLINE_AGE_MS = 24 * ONE_HOUR;
-
-/**
- * The headlines the strip carries, from the same `majorHeadlines` query behind
- * the Happening Now card and the post-page widget — the strip is a third view
- * of one set of headlines, not a new source of them.
+ * The headlines the strip carries. Same `majorHeadlines` field the /highlights
+ * page and the post-page widget read, and the same query document as the
+ * widget — the strip is a third view of one set of headlines, not a new source
+ * of them. /highlights wraps the field in its own document only because its
+ * cards need the post bodies, which cost 147KB at its page size and would put
+ * all of it on the feed for four fields this row renders.
+ *
+ * No client-side freshness filter, because the row stands in for the feed's
+ * Happening Now card and has to behave like it: that card renders whatever the
+ * backend serves it, and so does /highlights. Deciding what still counts as a
+ * major headline is the backend's call, and a second opinion held only by this
+ * row emptied it on any day `majorHeadlines` went quiet — which it routinely
+ * does for 36 hours or more — dropping the dock from two rows to one for no
+ * reason the reader could see. The API already returns newest first, and every
+ * row renders its own relative timestamp.
  */
 export const useStripHeadlines = (enabled: boolean): PostHighlight[] => {
   const { data } = useQuery({
@@ -29,19 +33,5 @@ export const useStripHeadlines = (enabled: boolean): PostHighlight[] => {
     return [];
   }
 
-  const cutoff = Date.now() - MAX_HEADLINE_AGE_MS;
-  const headlines = (data?.majorHeadlines?.edges ?? [])
-    .map(({ node }) => node)
-    .filter(({ highlightedAt }) => new Date(highlightedAt).getTime() >= cutoff);
-
-  if (headlines.length) {
-    return headlines;
-  }
-
-  // TEMPORARY: a local session gets no headlines inside the window, which
-  // leaves the row this experiment is built around empty and the strip looking
-  // broken. No query param to remember here — the experiment flag is already
-  // the opt-in, and the fixture cannot reach a real reader because it is
-  // development only. Remove with the rest of `mockFeedHighlights`.
-  return mockStripHeadlines(true);
+  return (data?.majorHeadlines?.edges ?? []).map(({ node }) => node);
 };
diff --git a/packages/shared/src/hooks/feed/mockFeedHighlights.ts b/packages/shared/src/hooks/feed/mockFeedHighlights.ts
index 6f786e89f0d..a93895f2ee5 100644
--- a/packages/shared/src/hooks/feed/mockFeedHighlights.ts
+++ b/packages/shared/src/hooks/feed/mockFeedHighlights.ts
@@ -53,25 +53,6 @@ const buildMockHighlights = (
   });
 };
 
-/**
- * The same fixture headlines as a bare list, for the sponsor strip's ticker
- * row — which has the same problem for the same reason. Returns nothing
- * outside development, whatever the query param says.
- */
-export const mockStripHeadlines = (enabled: boolean): PostHighlight[] => {
-  if (!enabled || !isDevelopment) {
-    return [];
-  }
-
-  return MOCK_HEADLINES.map((headline, index) => ({
-    id: `mock-headline-${index}`,
-    channel: 'agents',
-    headline,
-    highlightedAt: new Date(Date.now() - index * 45 * 60_000).toISOString(),
-    post: { id: `mock-post-${index}`, commentsPermalink: '' },
-  }));
-};
-
 export const withMockFeedHighlights = (
   pages: FeedItemData[],
   enabled: boolean,

From 7e6e6aa26611cd8511d658b0b391dc4c51d4b1ce Mon Sep 17 00:00:00 2001
From: Chris Bongers <chrisbongers@gmail.com>
Date: Mon, 7 Sep 2026 10:41:29 +0200
Subject: [PATCH 07/20] fix(monetization): stop the ticker pulling the feed's
 card out mid-scroll
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

`disableHighlightItems` was read off the headlines having arrived, and the
headlines are their own round trip that lands after the feed has painted.
So the feed rendered its Happening Now card, the query came back, the flag
flipped, and the card was pulled out of the middle of the feed with
everything below it jumping up.

The old 24 hour window hid this: headlines were usually filtered to
nothing, so the flip mostly never happened. Serving them unfiltered made
it fire on every load.

The strip stands in for the card whenever it is up, so that is what the
decision reads now. `useStripHeadlines` reports whether its query has
answered, and the card is given back only when it settles with nothing at
all — breaking news must never fall out of the product entirely just
because the experiment is on.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
---
 .../sponsorStrip/useSponsorStripFeed.spec.tsx | 22 +++++++++---
 .../sponsorStrip/useSponsorStripFeed.ts       | 19 ++++++----
 .../sponsorStrip/useStripHeadlines.spec.tsx   | 35 ++++++++++++++++---
 .../sponsorStrip/useStripHeadlines.ts         | 20 ++++++++---
 4 files changed, 76 insertions(+), 20 deletions(-)

diff --git a/packages/shared/src/features/monetization/sponsorStrip/useSponsorStripFeed.spec.tsx b/packages/shared/src/features/monetization/sponsorStrip/useSponsorStripFeed.spec.tsx
index f91083df317..7c9ec9728ac 100644
--- a/packages/shared/src/features/monetization/sponsorStrip/useSponsorStripFeed.spec.tsx
+++ b/packages/shared/src/features/monetization/sponsorStrip/useSponsorStripFeed.spec.tsx
@@ -12,27 +12,41 @@ const mockHeadlines = jest.mocked(useStripHeadlines);
 
 const headline = { id: 'h1' } as PostHighlight;
 
+const settled = (headlines: PostHighlight[]) => ({
+  headlines,
+  isSettled: true,
+});
+
 const render = () =>
   renderHook(() => useSponsorStripFeed({ feedName: 'my-feed' }));
 
 beforeEach(() => {
   jest.clearAllMocks();
   mockStrip.mockReturnValue(true);
-  mockHeadlines.mockReturnValue([headline]);
+  mockHeadlines.mockReturnValue(settled([headline]));
 });
 
 it('should drop the feed card when the strip is carrying the headlines', () => {
   expect(render().result.current.disableHighlightItems).toBe(true);
 });
 
-it('should keep the feed card when the strip has no headlines to carry', () => {
-  // No fresh headline means an empty ticker, and suppressing the card then
+it('should keep the feed card once the query settles with no headlines', () => {
+  // An empty ticker cannot stand in for the card, and suppressing it then
   // would take breaking news out of the product altogether.
-  mockHeadlines.mockReturnValue([]);
+  mockHeadlines.mockReturnValue(settled([]));
 
   expect(render().result.current.disableHighlightItems).toBe(false);
 });
 
+// The headlines are their own round trip, landing after the feed has painted.
+// Waiting for them flipped this mid-scroll and pulled the card out of the
+// middle of the feed.
+it('should drop the feed card before the headlines have arrived', () => {
+  mockHeadlines.mockReturnValue({ headlines: [], isSettled: false });
+
+  expect(render().result.current.disableHighlightItems).toBe(true);
+});
+
 it('should keep the feed card when the strip is off', () => {
   mockStrip.mockReturnValue(false);
 
diff --git a/packages/shared/src/features/monetization/sponsorStrip/useSponsorStripFeed.ts b/packages/shared/src/features/monetization/sponsorStrip/useSponsorStripFeed.ts
index df0f176ff32..f8d986f5f1a 100644
--- a/packages/shared/src/features/monetization/sponsorStrip/useSponsorStripFeed.ts
+++ b/packages/shared/src/features/monetization/sponsorStrip/useSponsorStripFeed.ts
@@ -11,11 +11,16 @@ interface UseSponsorStripFeed {
   isEnabled: boolean;
   headlines: PostHighlight[];
   /**
-   * Drop the feed's Happening Now card — true only when the strip is actually
-   * carrying the headlines in its place. With the strip up but no headline
-   * inside the freshness window there is nothing to replace the card with, so
-   * the card stays: breaking news must never fall out of the product entirely
-   * just because the experiment is on.
+   * Drop the feed's Happening Now card, because the strip carries those
+   * headlines in its place.
+   *
+   * Decided from the strip being up rather than from the headlines having
+   * arrived. The headlines are their own round trip and land after the feed
+   * has painted, so reading them here flipped this mid-scroll and pulled the
+   * card out of the middle of the feed, jumping everything below it. The one
+   * case that gives the card back is the query settling with nothing at all:
+   * breaking news must never fall out of the product entirely just because
+   * the experiment is on.
    */
   disableHighlightItems: boolean;
 }
@@ -32,11 +37,11 @@ export const useSponsorStripFeed = ({
   disableAds,
 }: UseSponsorStripFeedProps): UseSponsorStripFeed => {
   const isEnabled = useSponsorStrip({ feedName, disableAds });
-  const headlines = useStripHeadlines(isEnabled);
+  const { headlines, isSettled } = useStripHeadlines(isEnabled);
 
   return {
     isEnabled,
     headlines,
-    disableHighlightItems: isEnabled && !!headlines.length,
+    disableHighlightItems: isEnabled && (!isSettled || headlines.length > 0),
   };
 };
diff --git a/packages/shared/src/features/monetization/sponsorStrip/useStripHeadlines.spec.tsx b/packages/shared/src/features/monetization/sponsorStrip/useStripHeadlines.spec.tsx
index 5de5cf58183..7d6f1f3d7d1 100644
--- a/packages/shared/src/features/monetization/sponsorStrip/useStripHeadlines.spec.tsx
+++ b/packages/shared/src/features/monetization/sponsorStrip/useStripHeadlines.spec.tsx
@@ -59,7 +59,7 @@ it('should carry the headlines the API returned', async () => {
   const { result } = render();
 
   await waitFor(() =>
-    expect(result.current.map(({ id }) => id)).toEqual(['h1', 'h2']),
+    expect(result.current.headlines.map(({ id }) => id)).toEqual(['h1', 'h2']),
   );
 });
 
@@ -74,7 +74,10 @@ it('should carry headlines the backend still serves however old they are', async
   const { result } = render();
 
   await waitFor(() =>
-    expect(result.current.map(({ id }) => id)).toEqual(['old', 'older']),
+    expect(result.current.headlines.map(({ id }) => id)).toEqual([
+      'old',
+      'older',
+    ]),
   );
 });
 
@@ -87,7 +90,7 @@ it('should keep the order the API returned rather than resorting', async () => {
   const { result } = render();
 
   await waitFor(() =>
-    expect(result.current.map(({ id }) => id)).toEqual([
+    expect(result.current.headlines.map(({ id }) => id)).toEqual([
       'newest',
       'middle',
       'oldest',
@@ -100,7 +103,7 @@ it('should leave the row empty when the API has no headlines at all', async () =
   const { result } = render();
 
   await waitFor(() => expect(mockQueryOptions).toHaveBeenCalled());
-  expect(result.current).toEqual([]);
+  expect(result.current.headlines).toEqual([]);
 });
 
 it('should not query at all while the strip is off', async () => {
@@ -114,5 +117,27 @@ it('should not query at all while the strip is off', async () => {
     ),
   });
 
-  await waitFor(() => expect(result.current).toEqual([]));
+  await waitFor(() => expect(result.current.headlines).toEqual([]));
+});
+
+it('should report settled only once the query has answered', async () => {
+  setHeadlines([headline('h1')]);
+  const { result } = render();
+
+  expect(result.current.isSettled).toBe(false);
+  await waitFor(() => expect(result.current.isSettled).toBe(true));
+});
+
+it('should count as settled while the strip is off so the feed keeps its card', () => {
+  setHeadlines([headline('h1')]);
+  const client = new QueryClient({
+    defaultOptions: { queries: { retry: false } },
+  });
+  const { result } = renderHook(() => useStripHeadlines(false), {
+    wrapper: ({ children }) => (
+      <QueryClientProvider client={client}>{children}</QueryClientProvider>
+    ),
+  });
+
+  expect(result.current.isSettled).toBe(true);
 });
diff --git a/packages/shared/src/features/monetization/sponsorStrip/useStripHeadlines.ts b/packages/shared/src/features/monetization/sponsorStrip/useStripHeadlines.ts
index fa41eb2f22e..104d24c237c 100644
--- a/packages/shared/src/features/monetization/sponsorStrip/useStripHeadlines.ts
+++ b/packages/shared/src/features/monetization/sponsorStrip/useStripHeadlines.ts
@@ -5,6 +5,15 @@ import { ONE_MINUTE } from '../../../lib/time';
 
 const HEADLINE_LIMIT = 12;
 
+interface StripHeadlines {
+  headlines: PostHighlight[];
+  /**
+   * Whether the query has answered. The feed has to decide about its own
+   * Happening Now card before the answer lands, and cannot wait for it.
+   */
+  isSettled: boolean;
+}
+
 /**
  * The headlines the strip carries. Same `majorHeadlines` field the /highlights
  * page and the post-page widget read, and the same query document as the
@@ -22,16 +31,19 @@ const HEADLINE_LIMIT = 12;
  * reason the reader could see. The API already returns newest first, and every
  * row renders its own relative timestamp.
  */
-export const useStripHeadlines = (enabled: boolean): PostHighlight[] => {
-  const { data } = useQuery({
+export const useStripHeadlines = (enabled: boolean): StripHeadlines => {
+  const { data, isPending } = useQuery({
     ...majorHeadlinesQueryOptions({ first: HEADLINE_LIMIT }),
     enabled,
     refetchInterval: ONE_MINUTE,
   });
 
   if (!enabled) {
-    return [];
+    return { headlines: [], isSettled: true };
   }
 
-  return (data?.majorHeadlines?.edges ?? []).map(({ node }) => node);
+  return {
+    headlines: (data?.majorHeadlines?.edges ?? []).map(({ node }) => node),
+    isSettled: !isPending,
+  };
 };

From d946676204bc92009c2fc74a18da00a05cd72b5c Mon Sep 17 00:00:00 2001
From: Chris Bongers <chrisbongers@gmail.com>
Date: Mon, 7 Sep 2026 10:58:22 +0200
Subject: [PATCH 08/20] fix(monetization): reserve both dock rows so the logos
 stop jumping
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The sponsor row and the ticker are two independent round trips into a dock
pinned to the bottom of the viewport. The ads resolve first, so the paid row
painted alone against the viewport floor, and when the headlines landed a
second row appeared underneath it and shoved the logos upward — a visible
jump on the row somebody paid for, on every load.

Each row now holds its own height open until its own query answers, and
collapses only once that query has answered with nothing to show. The empty
states are unchanged: no fill still means no sponsor row, no headlines still
means no ticker, and neither still means no dock.

`useSponsorStripAds` reports whether the ad query has settled, and
`useSponsorStripFeed` the same for the headlines. The ticker's impression log
is now conditional, because the row is mounted empty while it waits and an
impression logged then reported a ticker of nothing.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
---
 .../shared/src/components/MainFeedLayout.tsx  |  5 +-
 .../sponsorStrip/SponsorStrip.spec.tsx        | 62 ++++++++++++++++++-
 .../sponsorStrip/SponsorStrip.tsx             | 40 ++++++++----
 .../sponsorStrip/SponsorStripHeadlines.tsx    | 21 ++++---
 .../sponsorStrip/useSponsorStripAds.ts        |  9 ++-
 .../sponsorStrip/useSponsorStripFeed.spec.tsx |  1 +
 .../sponsorStrip/useSponsorStripFeed.ts       |  3 +
 7 files changed, 119 insertions(+), 22 deletions(-)

diff --git a/packages/shared/src/components/MainFeedLayout.tsx b/packages/shared/src/components/MainFeedLayout.tsx
index 76d187c2f50..622ba702625 100644
--- a/packages/shared/src/components/MainFeedLayout.tsx
+++ b/packages/shared/src/components/MainFeedLayout.tsx
@@ -893,7 +893,10 @@ export default function MainFeedLayout({
           the extension new tab render — and the only place the feed name is
           already resolved from `default` to the reader's own feed. */}
       {sponsorStrip.isEnabled && (
-        <SponsorStrip headlines={sponsorStrip.headlines} />
+        <SponsorStrip
+          headlines={sponsorStrip.headlines}
+          headlinesSettled={sponsorStrip.headlinesSettled}
+        />
       )}
     </>
   );
diff --git a/packages/shared/src/features/monetization/sponsorStrip/SponsorStrip.spec.tsx b/packages/shared/src/features/monetization/sponsorStrip/SponsorStrip.spec.tsx
index f00d3774bf3..b2a697275b8 100644
--- a/packages/shared/src/features/monetization/sponsorStrip/SponsorStrip.spec.tsx
+++ b/packages/shared/src/features/monetization/sponsorStrip/SponsorStrip.spec.tsx
@@ -22,6 +22,7 @@ jest.mock('../../../hooks/utils/useThemedAsset', () => ({
 
 const mockFetch = jest.mocked(fetchSponsorStripAds);
 let headlines: PostHighlight[] = [];
+let headlinesSettled = true;
 
 const creative = (
   company: string,
@@ -91,7 +92,10 @@ const renderStrip = () => {
             } as unknown as LogContextData
           }
         >
-          <SponsorStrip headlines={headlines} />
+          <SponsorStrip
+            headlines={headlines}
+            headlinesSettled={headlinesSettled}
+          />
         </LogContext.Provider>
       </AuthContext.Provider>
     </QueryClientProvider>,
@@ -129,6 +133,7 @@ beforeEach(() => {
   jest.useFakeTimers();
   mockFetch.mockResolvedValue(ads);
   headlines = [];
+  headlinesSettled = true;
   jest
     .spyOn(Element.prototype, 'getBoundingClientRect')
     .mockReturnValue({ width: WALL_WIDTH } as DOMRect);
@@ -314,3 +319,58 @@ it('should take the offset back when it unmounts', async () => {
 
   expect(publishedHeight()).toEqual('');
 });
+
+// Two independent round trips into a dock pinned to the viewport bottom: a row
+// appearing underneath shoves the logos up, so both are held open until their
+// query answers.
+it('should hold the ticker row open before the headlines arrive', async () => {
+  setHeadlines([]);
+  headlinesSettled = false;
+  renderStrip();
+  await settle();
+
+  expect(screen.getByTestId('sponsorStripHeadlines')).toBeInTheDocument();
+  expect(publishedHeight()).toEqual('72px');
+});
+
+it('should hold the sponsor row open before the ad query answers', () => {
+  setHeadlines([headline('h1')]);
+  renderStrip();
+
+  expect(screen.getByTestId('sponsorStripRow')).toBeInTheDocument();
+  expect(publishedHeight()).toEqual('72px');
+});
+
+const tickerImpressions = () =>
+  logEvent.mock.calls.filter(
+    (call) =>
+      (call[0] as { event_name: string }).event_name === LogEvent.Impression &&
+      extraOf(call).feed === 'sponsor-strip-headlines',
+  );
+
+it('should log the ticker impression once the headlines arrive', async () => {
+  setHeadlines([headline('h1'), headline('h2')]);
+  renderStrip();
+  await settle();
+
+  expect(tickerImpressions()).toHaveLength(1);
+  expect(extraOf(tickerImpressions()[0]).count).toEqual(2);
+});
+
+it('should not log a ticker impression while the row is still empty', async () => {
+  setHeadlines([]);
+  headlinesSettled = false;
+  renderStrip();
+  await settle();
+
+  expect(tickerImpressions()).toHaveLength(0);
+});
+
+it('should collapse the reserved row once the query answers empty', async () => {
+  setHeadlines([]);
+  renderStrip();
+  await settle();
+
+  expect(screen.queryByTestId('sponsorStripHeadlines')).not.toBeInTheDocument();
+  expect(publishedHeight()).toEqual('40px');
+});
diff --git a/packages/shared/src/features/monetization/sponsorStrip/SponsorStrip.tsx b/packages/shared/src/features/monetization/sponsorStrip/SponsorStrip.tsx
index f654527e709..e772d3cf7c7 100644
--- a/packages/shared/src/features/monetization/sponsorStrip/SponsorStrip.tsx
+++ b/packages/shared/src/features/monetization/sponsorStrip/SponsorStrip.tsx
@@ -29,6 +29,8 @@ interface SponsorStripProps {
    * cannot be allowed to answer that question two different ways.
    */
   headlines: PostHighlight[];
+  /** Whether that query has answered; see the row reservation below. */
+  headlinesSettled: boolean;
 }
 
 interface SponsorRowProps {
@@ -126,27 +128,43 @@ const SponsorRow = ({
  * bar carrying only advertising is rent, while one carrying the headlines the
  * reader came for is a feature that happens to be sponsored.
  *
- * Either row can be missing — no fill from the ad server, or no headline
- * inside the freshness window — and the dock still holds the other one. What
- * it must never do is show neither while the feed's Happening Now card is
- * suppressed on its behalf, which is why an empty dock renders nothing at all
- * and the suppression is keyed to the same gate.
+ * Either row can be missing — no fill from the ad server, or no headlines at
+ * all — and the dock still holds the other one. What it must never do is show
+ * neither while the feed's Happening Now card is suppressed on its behalf,
+ * which is why an empty dock renders nothing at all and the suppression is
+ * keyed to the same gate.
+ *
+ * Both rows are held open at their own height until their query answers. They
+ * are two independent round trips into a dock pinned to the bottom of the
+ * viewport, so a row appearing under the logos shoves the logos upward — and
+ * the reader watches the paid row jump on every load. Reserving costs an empty
+ * bar for as long as the queries take; collapsing happens only once a query
+ * has answered and there is genuinely nothing to show.
  */
 export const SponsorStrip = ({
   headlines,
+  headlinesSettled,
 }: SponsorStripProps): ReactElement | null => {
-  const { gold, premium, community, wallRef } = useSponsorStripAds({
+  const {
+    gold,
+    premium,
+    community,
+    wallRef,
+    isSettled: adsSettled,
+  } = useSponsorStripAds({
     enabled: true,
   });
   const hasSponsors = !!gold || !!premium.length || !!community.length;
+  const showSponsorRow = hasSponsors || !adsSettled;
+  const showHeadlines = !!headlines.length || !headlinesSettled;
   // Published before the early return so the controls that lift for the dock
   // also settle back when it has nothing to show.
   usePublishStripHeight(
-    (hasSponsors ? SPONSOR_ROW_HEIGHT : 0) +
-      (headlines.length ? HEADLINES_ROW_HEIGHT : 0),
+    (showSponsorRow ? SPONSOR_ROW_HEIGHT : 0) +
+      (showHeadlines ? HEADLINES_ROW_HEIGHT : 0),
   );
 
-  if (!hasSponsors && !headlines.length) {
+  if (!showSponsorRow && !showHeadlines) {
     return null;
   }
 
@@ -155,7 +173,7 @@ export const SponsorStrip = ({
       data-testid="sponsorStrip"
       className="sticky bottom-0 z-3 hidden w-full flex-col bg-background-default tablet:flex"
     >
-      {hasSponsors && (
+      {showSponsorRow && (
         <SponsorRow
           gold={gold}
           premium={premium}
@@ -163,7 +181,7 @@ export const SponsorStrip = ({
           wallRef={wallRef}
         />
       )}
-      {!!headlines.length && <SponsorStripHeadlines headlines={headlines} />}
+      {showHeadlines && <SponsorStripHeadlines headlines={headlines} />}
     </div>
   );
 };
diff --git a/packages/shared/src/features/monetization/sponsorStrip/SponsorStripHeadlines.tsx b/packages/shared/src/features/monetization/sponsorStrip/SponsorStripHeadlines.tsx
index 745e19eb353..ae9a10c9929 100644
--- a/packages/shared/src/features/monetization/sponsorStrip/SponsorStripHeadlines.tsx
+++ b/packages/shared/src/features/monetization/sponsorStrip/SponsorStripHeadlines.tsx
@@ -33,14 +33,19 @@ export const SponsorStripHeadlines = ({
 }): ReactElement => {
   const { logEvent } = useLogContext();
 
-  useLogEventOnce(() =>
-    feedHighlightsLogEvent(LogEvent.Impression, {
-      feedName: HEADLINES_FEED_NAME,
-      action: 'impression',
-      count: headlines.length,
-      highlightIds: headlines.map(({ id }) => id),
-      origin: Origin.Feed,
-    }),
+  // Conditional because the row is mounted empty to hold its height open
+  // while the query runs, and an impression logged then would report a ticker
+  // of nothing.
+  useLogEventOnce(
+    () =>
+      feedHighlightsLogEvent(LogEvent.Impression, {
+        feedName: HEADLINES_FEED_NAME,
+        action: 'impression',
+        count: headlines.length,
+        highlightIds: headlines.map(({ id }) => id),
+        origin: Origin.Feed,
+      }),
+    { condition: !!headlines.length },
   );
 
   const onHeadlineClick = useCallback(
diff --git a/packages/shared/src/features/monetization/sponsorStrip/useSponsorStripAds.ts b/packages/shared/src/features/monetization/sponsorStrip/useSponsorStripAds.ts
index 620a10f50db..4b8c6a06c6a 100644
--- a/packages/shared/src/features/monetization/sponsorStrip/useSponsorStripAds.ts
+++ b/packages/shared/src/features/monetization/sponsorStrip/useSponsorStripAds.ts
@@ -20,6 +20,11 @@ interface UseSponsorStripAds {
   community: ResolvedSponsor[];
   /** Attach to the wall; its width decides how many marks the row holds. */
   wallRef: (node: HTMLElement | null) => void;
+  /**
+   * Whether the ad query has answered. The dock holds the row's height open
+   * until it has, so a fill landing cannot move the row.
+   */
+  isSettled: boolean;
 }
 
 /**
@@ -96,7 +101,7 @@ export const useSponsorStripAds = ({
   enabled: boolean;
 }): UseSponsorStripAds => {
   const isLight = useIsLightTheme();
-  const { data } = useQuery({
+  const { data, isPending } = useQuery({
     queryKey: [RequestKey.Ads, AdPlacement.SponsorStrip],
     queryFn: fetchSponsorStripAds,
     enabled,
@@ -136,6 +141,7 @@ export const useSponsorStripAds = ({
         .slice(0, Math.max(0, wallSlots - premiumSlots))
         .map((creative) => resolveSponsor(creative, isLight)),
       wallRef,
+      isSettled: !isPending,
     }),
     [
       pools.gold,
@@ -145,6 +151,7 @@ export const useSponsorStripAds = ({
       wallSlots,
       isLight,
       wallRef,
+      isPending,
     ],
   );
 };
diff --git a/packages/shared/src/features/monetization/sponsorStrip/useSponsorStripFeed.spec.tsx b/packages/shared/src/features/monetization/sponsorStrip/useSponsorStripFeed.spec.tsx
index 7c9ec9728ac..17703298f59 100644
--- a/packages/shared/src/features/monetization/sponsorStrip/useSponsorStripFeed.spec.tsx
+++ b/packages/shared/src/features/monetization/sponsorStrip/useSponsorStripFeed.spec.tsx
@@ -65,4 +65,5 @@ it('should hand the strip the same headlines it decided with', () => {
 
   expect(result.current.headlines).toEqual([headline]);
   expect(result.current.isEnabled).toBe(true);
+  expect(result.current.headlinesSettled).toBe(true);
 });
diff --git a/packages/shared/src/features/monetization/sponsorStrip/useSponsorStripFeed.ts b/packages/shared/src/features/monetization/sponsorStrip/useSponsorStripFeed.ts
index f8d986f5f1a..c92c13c271e 100644
--- a/packages/shared/src/features/monetization/sponsorStrip/useSponsorStripFeed.ts
+++ b/packages/shared/src/features/monetization/sponsorStrip/useSponsorStripFeed.ts
@@ -10,6 +10,8 @@ interface UseSponsorStripFeedProps {
 interface UseSponsorStripFeed {
   isEnabled: boolean;
   headlines: PostHighlight[];
+  /** Whether the headlines query has answered; the dock reserves until it has. */
+  headlinesSettled: boolean;
   /**
    * Drop the feed's Happening Now card, because the strip carries those
    * headlines in its place.
@@ -42,6 +44,7 @@ export const useSponsorStripFeed = ({
   return {
     isEnabled,
     headlines,
+    headlinesSettled: isSettled,
     disableHighlightItems: isEnabled && (!isSettled || headlines.length > 0),
   };
 };

From 98da73b821acc8182c8d7448f8c3ee26dac7df8b Mon Sep 17 00:00:00 2001
From: Chris Bongers <chrisbongers@gmail.com>
Date: Mon, 7 Sep 2026 11:10:05 +0200
Subject: [PATCH 09/20] fix(monetization): give the dock one resting place in
 the v2 frame
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

`sticky bottom-0` reaches the viewport bottom only while its containing
block extends past that line. Inside the v2 floating card the block stops
14px short — `laptop:my-3` on the wrapper plus `laptop:p-0.5` on the frame
— so the dock had two resting places: 14px high whenever the card's own
bottom was what was on screen, and flush when it was not. On first paint
the card is `min-h-[calc(100vh-1.5rem)]` and the page is not yet
scrollable, so the dock loaded high and dropped once the feed filled. The
same jump was visible scrolling to the end of the feed.

Pinning to the frame's own inset makes both positions one position, so the
dock rests on the card's bottom edge and stays there. Keyed to the frame's
class rather than to `isV2`, the way `feedGutter` is, because the flag
resolves after mount; outside the frame there is no inset and the offset
stays zero.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
---
 .../monetization/sponsorStrip/SponsorStrip.tsx     | 14 +++++++++++++-
 1 file changed, 13 insertions(+), 1 deletion(-)

diff --git a/packages/shared/src/features/monetization/sponsorStrip/SponsorStrip.tsx b/packages/shared/src/features/monetization/sponsorStrip/SponsorStrip.tsx
index e772d3cf7c7..dff669860d5 100644
--- a/packages/shared/src/features/monetization/sponsorStrip/SponsorStrip.tsx
+++ b/packages/shared/src/features/monetization/sponsorStrip/SponsorStrip.tsx
@@ -171,7 +171,19 @@ export const SponsorStrip = ({
   return (
     <div
       data-testid="sponsorStrip"
-      className="sticky bottom-0 z-3 hidden w-full flex-col bg-background-default tablet:flex"
+      className={classNames(
+        'sticky z-3 hidden w-full flex-col bg-background-default tablet:flex',
+        // Two resting places unless the offset matches the frame's own inset.
+        // `sticky bottom-0` reaches the viewport bottom only while its
+        // containing block extends past it; inside the v2 card that block
+        // stops 14px short — `laptop:my-3` on the wrapper plus `laptop:p-0.5`
+        // on the frame — so the dock sat 14px high on first paint, before the
+        // feed made the page scrollable, and dropped when it did. Pinning to
+        // the same 14px makes both positions one position. Keyed to the
+        // frame's class rather than to `isV2`, like `feedGutter`, because the
+        // flag resolves after mount. Outside the frame there is no inset.
+        'bottom-0 laptop:[.layout-frame_&]:bottom-3.5',
+      )}
     >
       {showSponsorRow && (
         <SponsorRow

From 315a48e5616e93a26731d7ffa35209de76da1a16 Mon Sep 17 00:00:00 2001
From: Chris Bongers <chrisbongers@gmail.com>
Date: Mon, 7 Sep 2026 11:33:56 +0200
Subject: [PATCH 10/20] fix(monetization): let the dock reach the bottom of the
 window

Pinning the dock to the frame's inset stopped it jumping but parked it
14px above the window, which is not where a dock belongs. It now sits
flush and stays there.

`sticky bottom-0` reaches the viewport bottom only while its containing
block extends past that line, and `laptop:overflow-clip` on the v2 frame
means a sticky child can never paint into the frame's gutter. So the frame
gives the gutter up instead: where it holds a dock it drops its bottom
margin, padding, border and corner rounding, and the dock becomes its
bottom edge. Everywhere else the frame is unchanged.

Matched with a `has-[.feed-dock]` variant rather than a prop, because the
frame is two components above the dock's mount point, and written as a
literal because Tailwind scans source text and generates nothing for an
interpolated class name. Verified the four rules land inside the laptop
media query.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
---
 packages/shared/src/components/MainLayout.tsx | 19 ++++++++++++++++++-
 .../sponsorStrip/SponsorStrip.tsx             | 17 +++++++----------
 .../sponsorStrip/sponsorStripOffset.ts        | 13 +++++++++++++
 3 files changed, 38 insertions(+), 11 deletions(-)

diff --git a/packages/shared/src/components/MainLayout.tsx b/packages/shared/src/components/MainLayout.tsx
index 4c672a717bd..3715a2c9567 100644
--- a/packages/shared/src/components/MainLayout.tsx
+++ b/packages/shared/src/components/MainLayout.tsx
@@ -417,7 +417,20 @@ function MainLayoutComponent({
           />
         )}
         {sidebarOwnsHeader ? (
-          <div className="flex min-h-0 flex-1 flex-col laptop:my-3 laptop:ml-1 laptop:mr-3">
+          <div
+            className={classNames(
+              'flex min-h-0 flex-1 flex-col laptop:my-3 laptop:ml-1 laptop:mr-3',
+              // A dock pins to the window, so the frame gives up its bottom
+              // gutter for the one case that holds one. Otherwise the frame
+              // stops 14px short of the viewport and a `sticky bottom-0` dock
+              // inside it cannot reach the bottom, resting there on first
+              // paint and at the end of the feed while pinning flush in
+              // between — a dock that jumps as the feed loads.
+              // Literal, not built from `DOCK_CLASS`: Tailwind scans source
+              // text and generates nothing for an interpolated class name.
+              'laptop:has-[.feed-dock]:mb-0',
+            )}
+          >
             {showHomepageTopBanners && (
               <HomepageTopBanners className="mx-4 mb-3 laptop:mx-0" />
             )}
@@ -432,6 +445,10 @@ function MainLayoutComponent({
                 // No drop shadow — the subtle border defines the floating card
                 // in both themes; shadow-2 cast a heavy bottom shadow.
                 'laptop:overflow-clip laptop:rounded-24 laptop:border laptop:border-border-subtlest-quaternary laptop:bg-background-default laptop:p-0.5',
+                // The dock becomes the frame's bottom edge, so the padding
+                // that would hold it up goes, and the corners it would be
+                // clipped into square off.
+                'laptop:has-[.feed-dock]:rounded-b-none laptop:has-[.feed-dock]:border-b-0 laptop:has-[.feed-dock]:pb-0',
                 LAYOUT_FRAME_CLASS,
                 !hasTopBanners &&
                   !topBanner &&
diff --git a/packages/shared/src/features/monetization/sponsorStrip/SponsorStrip.tsx b/packages/shared/src/features/monetization/sponsorStrip/SponsorStrip.tsx
index dff669860d5..e16a34057d0 100644
--- a/packages/shared/src/features/monetization/sponsorStrip/SponsorStrip.tsx
+++ b/packages/shared/src/features/monetization/sponsorStrip/SponsorStrip.tsx
@@ -14,6 +14,7 @@ import { SponsorStripHeadlines } from './SponsorStripHeadlines';
 import type { PostHighlight } from '../../../graphql/highlights';
 import type { ResolvedSponsor } from './sponsorStripCreative';
 import {
+  DOCK_CLASS,
   DOCK_GUTTER,
   HEADLINES_ROW_HEIGHT,
   SPONSOR_ROW_HEIGHT,
@@ -172,17 +173,13 @@ export const SponsorStrip = ({
     <div
       data-testid="sponsorStrip"
       className={classNames(
-        'sticky z-3 hidden w-full flex-col bg-background-default tablet:flex',
-        // Two resting places unless the offset matches the frame's own inset.
+        'sticky bottom-0 z-3 hidden w-full flex-col bg-background-default tablet:flex',
         // `sticky bottom-0` reaches the viewport bottom only while its
-        // containing block extends past it; inside the v2 card that block
-        // stops 14px short — `laptop:my-3` on the wrapper plus `laptop:p-0.5`
-        // on the frame — so the dock sat 14px high on first paint, before the
-        // feed made the page scrollable, and dropped when it did. Pinning to
-        // the same 14px makes both positions one position. Keyed to the
-        // frame's class rather than to `isV2`, like `feedGutter`, because the
-        // flag resolves after mount. Outside the frame there is no inset.
-        'bottom-0 laptop:[.layout-frame_&]:bottom-3.5',
+        // containing block extends past that line, so the dock needs the v2
+        // frame to run all the way down — see `DOCK_CLASS`, which is how the
+        // frame knows to drop its bottom inset. Without that the dock has two
+        // resting places and jumps between them.
+        DOCK_CLASS,
       )}
     >
       {showSponsorRow && (
diff --git a/packages/shared/src/features/monetization/sponsorStrip/sponsorStripOffset.ts b/packages/shared/src/features/monetization/sponsorStrip/sponsorStripOffset.ts
index c68e972f284..05b033fcfca 100644
--- a/packages/shared/src/features/monetization/sponsorStrip/sponsorStripOffset.ts
+++ b/packages/shared/src/features/monetization/sponsorStrip/sponsorStripOffset.ts
@@ -26,6 +26,19 @@ const SPONSOR_STRIP_HEIGHT_VAR = '--sponsor-strip-height';
  */
 export const DOCK_GUTTER = 'px-4 tablet:px-6 laptop:px-10';
 
+/**
+ * Marks the dock for the v2 frame to style around. The frame floats with a
+ * gutter on every side, and a dock is supposed to pin to the window, so the
+ * frame drops its bottom inset for the one case where it holds one. A class
+ * rather than the test id because this is layout, and rather than a prop
+ * because the frame is two components above the dock's mount point.
+ *
+ * `MainLayout` matches this with literal `has-[.feed-dock]` variants — Tailwind
+ * scans source text and generates nothing for an interpolated class name — so
+ * this value and those selectors have to be changed together.
+ */
+export const DOCK_CLASS = 'feed-dock';
+
 /**
  * Row heights, derived rather than measured: both rows are a fixed height by
  * design, and a number is testable where a ResizeObserver in a headless DOM is

From 810fc9572c635133c9bbbb04ecfc8af1097c9e1c Mon Sep 17 00:00:00 2001
From: Chris Bongers <chrisbongers@gmail.com>
Date: Mon, 7 Sep 2026 11:47:12 +0200
Subject: [PATCH 11/20] fix(monetization): end the frame level with the window
 when it holds a dock

The frame's `min-h` subtracts the chrome above it plus its own margins, so
it finishes exactly at the bottom of the window. Dropping its bottom margin
for the dock left that sum 0.75rem too large: the frame stopped 12px short,
and a `sticky bottom-0` dock rests at its container's end rather than the
window's, so the dock sat 12px high for as long as the feed was too short
to make the page scrollable, then dropped when it wasn't.

Both values lose the margin that is no longer there, which puts the frame's
bottom edge back on the window and the dock flush in either state.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
---
 packages/shared/src/components/MainLayout.tsx | 10 ++++++++--
 1 file changed, 8 insertions(+), 2 deletions(-)

diff --git a/packages/shared/src/components/MainLayout.tsx b/packages/shared/src/components/MainLayout.tsx
index 3715a2c9567..8bb757fed9e 100644
--- a/packages/shared/src/components/MainLayout.tsx
+++ b/packages/shared/src/components/MainLayout.tsx
@@ -450,11 +450,17 @@ function MainLayoutComponent({
                 // clipped into square off.
                 'laptop:has-[.feed-dock]:rounded-b-none laptop:has-[.feed-dock]:border-b-0 laptop:has-[.feed-dock]:pb-0',
                 LAYOUT_FRAME_CLASS,
+                // These subtract exactly the chrome above the frame plus its
+                // own margins, so the frame ends level with the window. With
+                // a dock the bottom margin is gone, so 0.75rem less comes off
+                // — a frame that stops short leaves a `sticky bottom-0` dock
+                // resting at its end, which is what happens for as long as
+                // the feed is too short to make the page scrollable.
                 !hasTopBanners &&
                   !topBanner &&
                   (isBannerAvailable
-                    ? 'laptop:min-h-[calc(100vh-3.5rem)]'
-                    : 'laptop:min-h-[calc(100vh-1.5rem)]'),
+                    ? 'laptop:min-h-[calc(100vh-3.5rem)] laptop:has-[.feed-dock]:min-h-[calc(100vh-2.75rem)]'
+                    : 'laptop:min-h-[calc(100vh-1.5rem)] laptop:has-[.feed-dock]:min-h-[calc(100vh-0.75rem)]'),
               )}
             >
               <RouteProgressBar />

From 84ef608589eb046b4f913c2672648bc7040a5c76 Mon Sep 17 00:00:00 2001
From: Chris Bongers <chrisbongers@gmail.com>
Date: Mon, 7 Sep 2026 14:24:23 +0200
Subject: [PATCH 12/20] feat(monetization): align the dock to the feed and let
 the ticker scroll
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Four things from review.

Alignment: `DOCK_GUTTER` was `feedGutter`'s values copied by hand, and had
already drifted — main dropped `px-4` from `feedGutter`, and more importantly
`feedGutter` collapses to nothing inside the v2 frame while the copy kept
`px-10`, so the dock's contents sat 40px in from the cards above them. The
copy is gone; the dock uses `feedGutter` itself, plus the same width clamp
the grid uses on wide screens, now shared as `feedWidth` rather than spelled
out again. Only the contents are held to those edges — the border and ground
still span the dock, so it reads as one bar under a column of cards.

Hover: the gold mark's scale-up on hover is gone.

Gold sizing: the mark was being optically normalised along with the wall.
That normalising trades height for width to stop a dozen unrelated marks
fighting, which punishes exactly the wide mark-and-wordmark lockup a paid
slot supplies — it came out at 18px, shorter than the tallest silhouette
beside it. It is drawn at a flat 28px now and the width follows. The
wordmark also moves off Verdana, which is far wider than the real one.

Ticker: scrolls horizontally instead of only clipping, so the headlines
under the fade can be reached. Scrollbar hidden; the fade already says the
row continues.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
---
 .../shared/src/components/MainFeedLayout.tsx  |  12 +-
 .../src/components/utilities/common.tsx       |  15 ++
 .../monetization/sponsorStrip/SponsorLogo.tsx |  34 +++-
 .../sponsorStrip/SponsorStrip.tsx             | 147 ++++++++++--------
 .../sponsorStrip/SponsorStripHeadlines.tsx    |  68 ++++----
 .../sponsorStrip/mockSponsorStripAds.ts       |   4 +-
 .../sponsorStrip/sponsorLogoSizing.ts         |  18 ++-
 .../sponsorStrip/sponsorStripOffset.ts        |  13 --
 8 files changed, 186 insertions(+), 125 deletions(-)

diff --git a/packages/shared/src/components/MainFeedLayout.tsx b/packages/shared/src/components/MainFeedLayout.tsx
index 622ba702625..70c59547a9b 100644
--- a/packages/shared/src/components/MainFeedLayout.tsx
+++ b/packages/shared/src/components/MainFeedLayout.tsx
@@ -17,7 +17,11 @@ import classNames from 'classnames';
 import { useRouter } from 'next/router';
 import type { FeedProps } from './Feed';
 import Feed from './Feed';
-import { FeedPageLayoutMobile, feedGutter } from './utilities/common';
+import {
+  FeedPageLayoutMobile,
+  feedGutter,
+  feedWidth,
+} from './utilities/common';
 import { SponsorStrip } from '../features/monetization/sponsorStrip/SponsorStrip';
 import { useSponsorStripFeed } from '../features/monetization/sponsorStrip/useSponsorStripFeed';
 import { ExploreChipsBar } from './feeds/ExploreChipsBar';
@@ -28,7 +32,6 @@ import { AskSearchBanner } from './marketing/banners/AskSearchBanner';
 import { FeedEngagementBanner } from './brand/FeedEngagementBanner';
 import { ExploreSignupStrip } from './auth/ExploreSignupStrip';
 import FeedContext from '../contexts/FeedContext';
-import feedStyles from './Feed.module.css';
 import AuthContext from '../contexts/AuthContext';
 import type { LoggedUser } from '../lib/user';
 import { SharedFeedPage } from './utilities';
@@ -217,10 +220,7 @@ const getQueryBasedOnLogin = (
 // The feed's own width: full width normally, and clamped + centered to the
 // same card-based max-width as the grid on wide screens (desktopL). The CSS
 // vars feed the `styles.container` max-width calc (grid gap is 2rem).
-const feedWidthClassName = classNames(
-  'relative flex w-full flex-col laptopL:mx-auto',
-  feedStyles.container,
-);
+const feedWidthClassName = classNames('relative flex flex-col', feedWidth);
 const commentClassName = {
   container: 'rounded-none border-0 border-b tablet:border-x',
   commentBox: {
diff --git a/packages/shared/src/components/utilities/common.tsx b/packages/shared/src/components/utilities/common.tsx
index b1a14fed99f..466f234e8df 100644
--- a/packages/shared/src/components/utilities/common.tsx
+++ b/packages/shared/src/components/utilities/common.tsx
@@ -3,6 +3,7 @@ import React from 'react';
 import classNames from 'classnames';
 import classed from '../../lib/classed';
 import styles from './utilities.module.css';
+import feedStyles from '../Feed.module.css';
 import { ArrowIcon } from '../icons';
 import { SourceMemberRole } from '../../graphql/sources';
 import type { OrganizationMemberRole } from '../../features/organizations/types';
@@ -136,6 +137,20 @@ export const BaseFeedPage = classed(
 export const feedGutter =
   'tablet:px-6 laptop:px-10 laptop:[.layout-frame_&]:px-0';
 
+/**
+ * The feed grid's own width: full width normally, and clamped and centred to
+ * the same card-based max-width as the grid on wide screens (desktopL). Needs
+ * `--num-cards` and `--feed-gap` set on the element for that calc.
+ *
+ * Chrome that has to line up with the cards pairs this with `feedGutter`:
+ * together they are where the feed's left and right edges actually are, which
+ * neither one is on its own.
+ */
+export const feedWidth = classNames(
+  'w-full laptopL:mx-auto',
+  feedStyles.container,
+);
+
 // Vertical padding only. The horizontal inset moved to FeedContainer
 // (see `feedGutter`) because this component is not in the tree on
 // every feed route — FeedPageLayoutList is used instead on some — and
diff --git a/packages/shared/src/features/monetization/sponsorStrip/SponsorLogo.tsx b/packages/shared/src/features/monetization/sponsorStrip/SponsorLogo.tsx
index 89c22e48acc..051c75d9922 100644
--- a/packages/shared/src/features/monetization/sponsorStrip/SponsorLogo.tsx
+++ b/packages/shared/src/features/monetization/sponsorStrip/SponsorLogo.tsx
@@ -11,7 +11,17 @@ import { useSponsorSlotLog } from './useSponsorSlotLog';
 interface SponsorLogoProps {
   sponsor: ResolvedSponsor;
   slotIndex: number;
-  cap: number;
+  /**
+   * Cap height for the optical sizing that keeps a wall of unrelated marks
+   * looking like one row. Omitted by the slot that sets `exactHeight`.
+   */
+  cap?: number;
+  /**
+   * Draw the mark at exactly this height and let the width follow the ratio.
+   * The gold slot's shape is known and it is meant to dominate, so trading
+   * its height away for width the way the wall does only makes it smaller.
+   */
+  exactHeight?: number;
   /**
    * Fixed box the mark is drawn into. Wall slots use one so the row's width
    * cannot jump every time a rotation swaps a square mark for a long lockup;
@@ -35,6 +45,7 @@ export const SponsorLogo = ({
   sponsor,
   slotIndex,
   cap,
+  exactHeight,
   boxWidth,
   monochrome = false,
   maxHeight,
@@ -48,12 +59,21 @@ export const SponsorLogo = ({
     () => getViewedPixels(sponsor.pixel),
     [sponsor.pixel],
   );
-  const height = boxedLogoHeight(
-    sponsor.ratio,
-    cap,
-    boxWidth ?? Number.POSITIVE_INFINITY,
-    maxHeight,
-  );
+  let height: number;
+
+  if (exactHeight !== undefined) {
+    height = exactHeight;
+  } else if (cap !== undefined) {
+    height = boxedLogoHeight(
+      sponsor.ratio,
+      cap,
+      boxWidth ?? Number.POSITIVE_INFINITY,
+      maxHeight,
+    );
+  } else {
+    throw new Error('SponsorLogo needs either a cap or an exactHeight');
+  }
+
   const size: CSSProperties = {
     height: `${height}px`,
     width: `${Math.round(height * sponsor.ratio)}px`,
diff --git a/packages/shared/src/features/monetization/sponsorStrip/SponsorStrip.tsx b/packages/shared/src/features/monetization/sponsorStrip/SponsorStrip.tsx
index e16a34057d0..b6959c890f2 100644
--- a/packages/shared/src/features/monetization/sponsorStrip/SponsorStrip.tsx
+++ b/packages/shared/src/features/monetization/sponsorStrip/SponsorStrip.tsx
@@ -1,10 +1,9 @@
-import type { ReactElement } from 'react';
-import React from 'react';
+import type { CSSProperties, ReactElement } from 'react';
+import React, { useContext } from 'react';
 import classNames from 'classnames';
 import {
   COMMUNITY_CAP,
-  GOLD_CAP,
-  GOLD_MAX_HEIGHT,
+  GOLD_HEIGHT,
   PREMIUM_CAP,
   SLOT_WIDTH,
   WALL_MAX_HEIGHT,
@@ -15,13 +14,14 @@ import type { PostHighlight } from '../../../graphql/highlights';
 import type { ResolvedSponsor } from './sponsorStripCreative';
 import {
   DOCK_CLASS,
-  DOCK_GUTTER,
   HEADLINES_ROW_HEIGHT,
   SPONSOR_ROW_HEIGHT,
   usePublishStripHeight,
 } from './sponsorStripOffset';
+import { feedGutter, feedWidth } from '../../../components/utilities/common';
 import { PREMIUM_SLOT_COUNT } from './sponsorStripSlots';
 import { useSponsorStripAds } from './useSponsorStripAds';
+import FeedContext from '../../../contexts/FeedContext';
 
 interface SponsorStripProps {
   /**
@@ -39,6 +39,7 @@ interface SponsorRowProps {
   premium: ResolvedSponsor[];
   community: ResolvedSponsor[];
   wallRef: (node: HTMLElement | null) => void;
+  widthStyle: CSSProperties;
 }
 
 const SponsorRow = ({
@@ -46,74 +47,82 @@ const SponsorRow = ({
   premium,
   community,
   wallRef,
+  widthStyle,
 }: SponsorRowProps): ReactElement => (
+  // The border and the ground span the dock; only the content is held to the
+  // feed's own edges, so the row reads as one bar under a column of cards.
   <div
     data-testid="sponsorStripRow"
-    className={classNames(
-      'flex h-10 w-full items-center gap-5 border-t border-border-subtlest-tertiary',
-      DOCK_GUTTER,
-    )}
+    className="w-full border-t border-border-subtlest-tertiary"
   >
-    {gold && (
-      <div className="flex shrink-0 items-center gap-x-2.5">
-        <span className="whitespace-nowrap text-text-quaternary typo-caption2">
-          Made possible by
-        </span>
-        {/* The gold mark is the one slot that keeps its own inks, its size and
-            its hover: one coloured, live mark against a silhouetted wall is
-            the whole hierarchy of the row. */}
-        <SponsorLogo
-          sponsor={gold}
-          slotIndex={0}
-          cap={GOLD_CAP}
-          maxHeight={GOLD_MAX_HEIGHT}
-          className="origin-left text-text-primary transition-transform duration-200 ease-in-out hover:scale-105"
+    <div
+      className={classNames(
+        'flex h-10 items-center gap-5',
+        feedGutter,
+        feedWidth,
+      )}
+      style={widthStyle}
+    >
+      {gold && (
+        <div className="flex shrink-0 items-center gap-x-2.5">
+          <span className="whitespace-nowrap text-text-quaternary typo-caption2">
+            Made possible by
+          </span>
+          {/* The gold mark is the one slot that keeps its own inks and its own
+            size: one coloured mark at full height against a silhouetted wall
+            is the whole hierarchy of the row, without a hover effect on top. */}
+          <SponsorLogo
+            sponsor={gold}
+            slotIndex={0}
+            exactHeight={GOLD_HEIGHT}
+            className="text-text-primary"
+          />
+        </div>
+      )}
+      {gold && !!(premium.length || community.length) && (
+        <span
+          aria-hidden
+          className="h-5 w-px shrink-0 bg-border-subtlest-tertiary"
         />
-      </div>
-    )}
-    {gold && !!(premium.length || community.length) && (
-      <span
-        aria-hidden
-        className="h-5 w-px shrink-0 bg-border-subtlest-tertiary"
-      />
-    )}
-    {/* One run for both wall tiers, spread with `justify-between` the way the
+      )}
+      {/* One run for both wall tiers, spread with `justify-between` the way the
         broadcast bar this borrows from distributes its credits: the row
         breathes on a wide window and tightens before it clips. Premium sits
         left and carries a hair more ink; the slots are a fixed width, so a
         rotation swapping a square mark for a long lockup cannot make the whole
         row shuffle sideways. */}
-    <div
-      ref={wallRef}
-      className="flex min-w-0 flex-1 items-center justify-between gap-4 overflow-hidden"
-    >
-      {premium.map((sponsor, index) => (
-        <SponsorLogo
-          key={sponsor.genId}
-          sponsor={sponsor}
-          slotIndex={index + 1}
-          cap={PREMIUM_CAP}
-          boxWidth={SLOT_WIDTH}
-          maxHeight={WALL_MAX_HEIGHT}
-          monochrome
-          className="text-text-secondary transition-colors hover:text-text-primary"
-        />
-      ))}
-      {community.map((sponsor, index) => (
-        <SponsorLogo
-          key={sponsor.genId}
-          sponsor={sponsor}
-          // Offset by the full premium row rather than by how many premium
-          // creatives happened to fill it, so a slot index means the same
-          // position from one session to the next.
-          slotIndex={index + 1 + PREMIUM_SLOT_COUNT}
-          cap={COMMUNITY_CAP}
-          boxWidth={SLOT_WIDTH}
-          maxHeight={WALL_MAX_HEIGHT}
-          monochrome
-          className="text-text-tertiary transition-colors hover:text-text-primary"
-        />
-      ))}
+      <div
+        ref={wallRef}
+        className="flex min-w-0 flex-1 items-center justify-between gap-4 overflow-hidden"
+      >
+        {premium.map((sponsor, index) => (
+          <SponsorLogo
+            key={sponsor.genId}
+            sponsor={sponsor}
+            slotIndex={index + 1}
+            cap={PREMIUM_CAP}
+            boxWidth={SLOT_WIDTH}
+            maxHeight={WALL_MAX_HEIGHT}
+            monochrome
+            className="text-text-secondary transition-colors hover:text-text-primary"
+          />
+        ))}
+        {community.map((sponsor, index) => (
+          <SponsorLogo
+            key={sponsor.genId}
+            sponsor={sponsor}
+            // Offset by the full premium row rather than by how many premium
+            // creatives happened to fill it, so a slot index means the same
+            // position from one session to the next.
+            slotIndex={index + 1 + PREMIUM_SLOT_COUNT}
+            cap={COMMUNITY_CAP}
+            boxWidth={SLOT_WIDTH}
+            maxHeight={WALL_MAX_HEIGHT}
+            monochrome
+            className="text-text-tertiary transition-colors hover:text-text-primary"
+          />
+        ))}
+      </div>
     </div>
   </div>
 );
@@ -155,6 +164,13 @@ export const SponsorStrip = ({
   } = useSponsorStripAds({
     enabled: true,
   });
+  // Read here rather than passed down: the dock is mounted inside the same
+  // providers as the feed, and the calc behind `feedWidth` needs these.
+  const { numCards } = useContext(FeedContext);
+  const widthStyle = {
+    '--num-cards': numCards.eco,
+    '--feed-gap': '2rem',
+  } as CSSProperties;
   const hasSponsors = !!gold || !!premium.length || !!community.length;
   const showSponsorRow = hasSponsors || !adsSettled;
   const showHeadlines = !!headlines.length || !headlinesSettled;
@@ -188,9 +204,12 @@ export const SponsorStrip = ({
           premium={premium}
           community={community}
           wallRef={wallRef}
+          widthStyle={widthStyle}
         />
       )}
-      {showHeadlines && <SponsorStripHeadlines headlines={headlines} />}
+      {showHeadlines && (
+        <SponsorStripHeadlines headlines={headlines} widthStyle={widthStyle} />
+      )}
     </div>
   );
 };
diff --git a/packages/shared/src/features/monetization/sponsorStrip/SponsorStripHeadlines.tsx b/packages/shared/src/features/monetization/sponsorStrip/SponsorStripHeadlines.tsx
index ae9a10c9929..b42d15125b1 100644
--- a/packages/shared/src/features/monetization/sponsorStrip/SponsorStripHeadlines.tsx
+++ b/packages/shared/src/features/monetization/sponsorStrip/SponsorStripHeadlines.tsx
@@ -8,7 +8,7 @@ import { useLogContext } from '../../../contexts/LogContext';
 import type { PostHighlight } from '../../../graphql/highlights';
 import useLogEventOnce from '../../../hooks/log/useLogEventOnce';
 import { feedHighlightsLogEvent } from '../../../lib/feed';
-import { DOCK_GUTTER } from './sponsorStripOffset';
+import { feedGutter, feedWidth } from '../../../components/utilities/common';
 import { LogEvent, Origin } from '../../../lib/log';
 
 const HEADLINES_FEED_NAME = 'sponsor-strip-headlines';
@@ -28,8 +28,10 @@ const fadeStyle: CSSProperties = {
 
 export const SponsorStripHeadlines = ({
   headlines,
+  widthStyle,
 }: {
   headlines: PostHighlight[];
+  widthStyle: CSSProperties;
 }): ReactElement => {
   const { logEvent } = useLogContext();
 
@@ -64,37 +66,47 @@ export const SponsorStripHeadlines = ({
   return (
     <div
       data-testid="sponsorStripHeadlines"
-      className={classNames(
-        'flex h-8 w-full items-center gap-4 border-t border-border-subtlest-tertiary bg-background-default',
-        DOCK_GUTTER,
-      )}
+      className="w-full border-t border-border-subtlest-tertiary bg-background-default"
     >
-      {/* The sacrificial left zone, and the reason the strip has two rows at
+      <div
+        className={classNames(
+          'flex h-8 items-center gap-4',
+          feedGutter,
+          feedWidth,
+        )}
+        style={widthStyle}
+      >
+        {/* The sacrificial left zone, and the reason the strip has two rows at
           all: the browser paints its link-status bubble over this corner, and
           a label losing a word to it costs nothing, where the row above it is
           the one somebody paid for. */}
-      <span className="shrink-0 whitespace-nowrap text-text-quaternary typo-caption2">
-        Breaking news
-      </span>
-      <div
-        className="flex min-w-0 flex-1 items-center gap-5 overflow-hidden"
-        style={fadeStyle}
-      >
-        {headlines.map((highlight, index) => (
-          <Link href={getHighlightsUrl(highlight.id)} key={highlight.id}>
-            <a
-              href={getHighlightsUrl(highlight.id)}
-              onClick={() => onHeadlineClick(highlight, index)}
-              className="flex shrink-0 items-center gap-1.5 whitespace-nowrap text-text-secondary typo-caption1 hover:text-text-primary"
-            >
-              {highlight.headline}
-              <RelativeTime
-                dateTime={highlight.highlightedAt}
-                className="text-text-quaternary"
-              />
-            </a>
-          </Link>
-        ))}
+        <span className="shrink-0 whitespace-nowrap text-text-quaternary typo-caption2">
+          Breaking news
+        </span>
+        {/* Scrollable rather than merely clipped: the row carries more than it
+          can show, and a reader who wants the headline under the fade has no
+          other way to reach it. The bar is hidden because the fade already
+          says the row continues. */}
+        <div
+          className="no-scrollbar flex min-w-0 flex-1 items-center gap-5 overflow-x-auto"
+          style={fadeStyle}
+        >
+          {headlines.map((highlight, index) => (
+            <Link href={getHighlightsUrl(highlight.id)} key={highlight.id}>
+              <a
+                href={getHighlightsUrl(highlight.id)}
+                onClick={() => onHeadlineClick(highlight, index)}
+                className="flex shrink-0 items-center gap-1.5 whitespace-nowrap text-text-secondary typo-caption1 hover:text-text-primary"
+              >
+                {highlight.headline}
+                <RelativeTime
+                  dateTime={highlight.highlightedAt}
+                  className="text-text-quaternary"
+                />
+              </a>
+            </Link>
+          ))}
+        </div>
       </div>
     </div>
   );
diff --git a/packages/shared/src/features/monetization/sponsorStrip/mockSponsorStripAds.ts b/packages/shared/src/features/monetization/sponsorStrip/mockSponsorStripAds.ts
index 0e0f9c67111..8f8749495ca 100644
--- a/packages/shared/src/features/monetization/sponsorStrip/mockSponsorStripAds.ts
+++ b/packages/shared/src/features/monetization/sponsorStrip/mockSponsorStripAds.ts
@@ -72,7 +72,7 @@ const GOLD_COMPANY = 'Google Cloud';
  * in an `<img>` never reports one.
  */
 const WORDMARK_X = 36;
-const GOLD_WIDTH = WORDMARK_X + GOLD_COMPANY.length * 11 + 6;
+const GOLD_WIDTH = WORDMARK_X + GOLD_COMPANY.length * 9.25 + 6;
 
 /**
  * A lockup rather than a word, so the paid slot reads as a logo at a glance
@@ -85,7 +85,7 @@ const GOLD_WIDTH = WORDMARK_X + GOLD_COMPANY.length * 11 + 6;
  * one is the part a real creative would replace anyway.
  */
 const goldLockup = (wordmark: string): string => {
-  const svg = `<svg xmlns="http://www.w3.org/2000/svg" width="${GOLD_WIDTH}" height="32" viewBox="0 0 ${GOLD_WIDTH} 32"><g transform="translate(-1.73 1.45) scale(0.2366)">${GOOGLE_CLOUD_MARK}</g><text x="${WORDMARK_X}" y="22" font-family="Verdana,Geneva,sans-serif" font-size="17" font-weight="700" fill="${wordmark}">${GOLD_COMPANY}</text></svg>`;
+  const svg = `<svg xmlns="http://www.w3.org/2000/svg" width="${GOLD_WIDTH}" height="32" viewBox="0 0 ${GOLD_WIDTH} 32"><g transform="translate(-1.73 1.45) scale(0.2366)">${GOOGLE_CLOUD_MARK}</g><text x="${WORDMARK_X}" y="22" font-family="'Google Sans','Product Sans',Arial,Helvetica,sans-serif" font-size="17" font-weight="700" fill="${wordmark}">${GOLD_COMPANY}</text></svg>`;
 
   return `data:image/svg+xml,${encodeURIComponent(svg)}`;
 };
diff --git a/packages/shared/src/features/monetization/sponsorStrip/sponsorLogoSizing.ts b/packages/shared/src/features/monetization/sponsorStrip/sponsorLogoSizing.ts
index 41fd7626b6f..e532582a7b1 100644
--- a/packages/shared/src/features/monetization/sponsorStrip/sponsorLogoSizing.ts
+++ b/packages/shared/src/features/monetization/sponsorStrip/sponsorLogoSizing.ts
@@ -1,14 +1,22 @@
-/** Cap height of the gold mark; it reads a step above the wall, not a tier. */
-export const GOLD_CAP = 22;
+/**
+ * The gold mark is drawn at this height, full stop — no optical normalising.
+ * That normalising exists to stop a dozen unrelated wall marks fighting each
+ * other, and it works by trading height for width, so it punishes exactly the
+ * wide mark-plus-wordmark lockup a paid slot is most likely to supply: the
+ * lockup came out shorter than the tallest silhouette beside it, which is the
+ * opposite of what the slot is sold as. One known creative in one slot does
+ * not need normalising, it needs to be the biggest thing on the row.
+ */
+export const GOLD_HEIGHT = 28;
 /** The wall's two tiers differ by a hair of ink, not by a wash of opacity. */
 export const PREMIUM_CAP = 17;
 export const COMMUNITY_CAP = 15;
 
 /**
- * Ceilings for the rows the optical sizing knows nothing about: a near-square
- * mark would otherwise take its full optical height and outgrow the 40px row.
+ * Ceiling for the wall, which the optical sizing knows nothing about: a
+ * near-square mark would otherwise take its full optical height and outgrow
+ * the 40px row.
  */
-export const GOLD_MAX_HEIGHT = 26;
 export const WALL_MAX_HEIGHT = 20;
 
 /** Fixed box every wall mark is drawn into, and the gap between boxes. */
diff --git a/packages/shared/src/features/monetization/sponsorStrip/sponsorStripOffset.ts b/packages/shared/src/features/monetization/sponsorStrip/sponsorStripOffset.ts
index 05b033fcfca..e0d2fab4e38 100644
--- a/packages/shared/src/features/monetization/sponsorStrip/sponsorStripOffset.ts
+++ b/packages/shared/src/features/monetization/sponsorStrip/sponsorStripOffset.ts
@@ -13,19 +13,6 @@ import { useEffect } from 'react';
  */
 const SPONSOR_STRIP_HEIGHT_VAR = '--sponsor-strip-height';
 
-/**
- * The dock's own horizontal inset.
- *
- * Not `feedGutter`: that one collapses to zero inside the v2 floating card,
- * because the feed's inset there comes from the grid being narrower than the
- * frame rather than from padding. The dock spans the frame edge to edge, so a
- * zeroed gutter leaves its first logo smudged against the sidebar. These are
- * `feedGutter`'s tablet-and-up values, which is what lines the row up with the
- * cards in both layouts. The `px-4` below tablet is inert — the dock is
- * `hidden tablet:flex` — and kept only so the two constants read alike.
- */
-export const DOCK_GUTTER = 'px-4 tablet:px-6 laptop:px-10';
-
 /**
  * Marks the dock for the v2 frame to style around. The frame floats with a
  * gutter on every side, and a dock is supposed to pin to the window, so the

From 64499807fa2a1fbff26b732cf03e42aec912600d Mon Sep 17 00:00:00 2001
From: Tsahi Matsliah <41912669+tsahimatsliah@users.noreply.github.com>
Date: Mon, 7 Sep 2026 16:36:17 +0300
Subject: [PATCH 13/20] fix(monetization): use Google Cloud's own lockup in the
 gold slot
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The gold slot carried the cloud-symbol lockup, drawn from the devicon
mark the Explore ad-card mockup uses, with "Google Cloud" set beside it
in a font stack standing in for Google Sans. Google no longer leads with
the symbol: cloud.google.com serves
gstatic.com/cgc/google-cloud-logo-fullcolor.svg — the four-ink Google
wordmark followed by "Cloud", no symbol, in their refreshed palette
(#3186FF, #FC413D, #FFBE00, #00AF57) rather than the classic four. That
file is the artwork now, so the paid slot shows the mark the advertiser
actually publishes instead of an approximation of it.

"Cloud" ships as #212226 — near-black, and it all but disappears against
the dark feed — so it stays the one ink taken off their file and flipped
with the ground, which is what the light/dark pair in the wire contract
is for. Nothing else about the artwork changes.

GOLD_HEIGHT is the slot's box height, and the swap changes what fills it:
a symbol lockup spends most of that box on the symbol, an all-wordmark
lockup spends it on letterforms. At 28 the type came out roughly twice
the size of the old one, so the box drops to the wall's own ceiling — in
colour and half again as wide as a wall slot, it still leads the row.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
---
 .../sponsorStrip/mockSponsorStripAds.ts       | 91 ++++++++++++-------
 .../sponsorStrip/sponsorLogoSizing.ts         |  8 +-
 2 files changed, 67 insertions(+), 32 deletions(-)

diff --git a/packages/shared/src/features/monetization/sponsorStrip/mockSponsorStripAds.ts b/packages/shared/src/features/monetization/sponsorStrip/mockSponsorStripAds.ts
index 8f8749495ca..1a297f901c7 100644
--- a/packages/shared/src/features/monetization/sponsorStrip/mockSponsorStripAds.ts
+++ b/packages/shared/src/features/monetization/sponsorStrip/mockSponsorStripAds.ts
@@ -12,11 +12,11 @@ import { SponsorTier } from './sponsorStripCreative';
  * PLACEHOLDER DATA — not a sponsorship and not an ad server. The wall marks
  * are advertiser logos already published on business.daily.dev, borrowed so
  * the row can be judged at the weight and spacing real assets give it. The
- * gold slot carries Google Cloud, per the design mockup, reusing the mark the
- * Explore ad-card mockup already established as this repo's Google Cloud
- * asset. It is still a fixture: nothing here says a gold slot has been sold,
- * and the "Made possible by" label claims more than a display campaign does,
- * so this stays behind the experiment flag until the slot is actually sold.
+ * gold slot carries Google Cloud, per the design mockup, drawn from the
+ * lockup their own site serves. It is still a fixture: nothing here says a
+ * gold slot has been sold, and the "Made possible by" label claims more than
+ * a display campaign does, so this stays behind the experiment flag until the
+ * slot is actually sold.
  *
  * One mark is deliberately absent: business.daily.dev serves GitLab's logo as
  * a base64 WebP wrapped in an `<svg>`, and a raster has no alpha shape to mask
@@ -53,39 +53,68 @@ const wallSponsor = (
 });
 
 /**
- * The official four-colour Google Cloud mark, from the same devicon source the
- * Explore ad-card mockup uses, minus that one's white backing plate: the plate
- * is there to round-crop into a favicon, and on the strip it would sit as a
- * white tile against the dark ground.
+ * The gold slot's artwork: Google Cloud's own lockup, taken from the file
+ * their site serves (gstatic.com/cgc/google-cloud-logo-fullcolor.svg) — the
+ * four-ink Google wordmark followed by "Cloud", and no cloud symbol. The
+ * symbol lockup is an older mark they no longer lead with, and the inks here
+ * are their refreshed palette, brighter than the classic four.
  */
-const GOOGLE_CLOUD_MARK =
-  '<path fill="#ea4535" d="M80.6 40.3h.4l-.2-.2 14-14v-.3c-11.8-10.4-28.1-14-43.2-9.5C36.5 20.8 24.9 32.8 20.7 48c.2-.1.5-.2.8-.2 5.2-3.4 11.4-5.4 17.9-5.4 2.2 0 4.3.2 6.4.6.1-.1.2-.1.3-.1 9-9.9 24.2-11.1 34.6-2.6h-.1z"/>' +
-  '<path fill="#557ebf" d="M108.1 47.8c-2.3-8.5-7.1-16.2-13.8-22.1L80 39.9c6 4.9 9.5 12.3 9.3 20v2.5c16.9 0 16.9 25.2 0 25.2H63.9v20h-.1l.1.2h25.4c14.6.1 27.5-9.3 31.8-23.1 4.3-13.8-1-28.8-13-36.9z"/>' +
-  '<path fill="#36a852" d="M39 107.9h26.3V87.7H39c-1.9 0-3.7-.4-5.4-1.1l-15.2 14.6v.2c6 4.3 13.2 6.6 20.7 6.6z"/>' +
-  '<path fill="#f9bc15" d="M40.2 41.9c-14.9.1-28.1 9.3-32.9 22.8-4.8 13.6 0 28.5 11.8 37.3l15.6-14.9c-8.6-3.7-10.6-14.5-4-20.8 6.6-6.4 17.8-4.4 21.7 3.8L68 55.2C61.4 46.9 51.1 42 40.2 42.1z"/>';
+const GOOGLE_WORDMARK = [
+  // G
+  {
+    ink: '#3186FF',
+    d: 'M7.666 15.529c-1.423-.014-2.721-.367-3.895-1.058a7.659 7.659 0 0 1-2.766-2.832C.335 10.449 0 9.142 0 7.718c0-1.446.335-2.756 1.005-3.932a7.292 7.292 0 0 1 2.766-2.77C4.945.34 6.25 0 7.687 0c1.119 0 2.144.187 3.077.56a6.008 6.008 0 0 1 2.382 1.722L11.644 3.86c-.587-.602-1.191-1.034-1.813-1.297-.614-.263-1.319-.394-2.113-.394-1.008 0-1.92.228-2.735.685a4.987 4.987 0 0 0-1.937 1.96c-.47.844-.705 1.822-.705 2.936 0 1.086.235 2.057.705 2.915a5.136 5.136 0 0 0 1.927 1.991c.815.478 1.73.716 2.745.716.905 0 1.713-.159 2.424-.477a4.146 4.146 0 0 0 1.74-1.452c.442-.643.708-1.425.798-2.345H7.635V6.95h7.19c.069.457.103.871.103 1.245 0 1.452-.3 2.739-.901 3.859a6.31 6.31 0 0 1-2.559 2.583c-1.098.608-2.365.906-3.802.892z',
+  },
+  // o
+  {
+    ink: '#FC413D',
+    d: 'M21.588 15.53c-1.064 0-2.02-.246-2.87-.737a5.249 5.249 0 0 1-1.978-2.023c-.47-.864-.705-1.836-.705-2.915 0-1.106.242-2.085.725-2.935a5.175 5.175 0 0 1 2-1.992c.842-.47 1.785-.705 2.828-.705 1.057 0 2.006.238 2.849.715a5.156 5.156 0 0 1 2 2.002c.483.858.724 1.83.724 2.915 0 1.08-.238 2.05-.715 2.915a5.208 5.208 0 0 1-1.989 2.033c-.842.484-1.799.726-2.87.726zm0-1.971c.656 0 1.236-.163 1.74-.488a3.308 3.308 0 0 0 1.181-1.338 4.144 4.144 0 0 0 .425-1.878c0-.677-.142-1.293-.425-1.846a3.235 3.235 0 0 0-1.18-1.328 3.174 3.174 0 0 0-1.741-.487c-.608 0-1.167.155-1.678.466a3.38 3.38 0 0 0-1.223 1.307c-.297.554-.445 1.183-.445 1.888 0 .678.138 1.3.414 1.868.283.56.677 1.006 1.181 1.338.511.332 1.095.498 1.75.498z',
+  },
+  // o
+  {
+    ink: '#FFBE00',
+    d: 'M33.637 15.53c-1.064 0-2.02-.246-2.87-.737a5.25 5.25 0 0 1-1.979-2.023c-.47-.864-.704-1.836-.704-2.915 0-1.106.242-2.085.725-2.935a5.173 5.173 0 0 1 2-1.992c.842-.47 1.785-.705 2.828-.705 1.056 0 2.006.238 2.849.715a5.155 5.155 0 0 1 1.999 2.002c.483.858.725 1.83.725 2.915 0 1.08-.238 2.05-.715 2.915a5.21 5.21 0 0 1-1.989 2.033c-.842.484-1.799.726-2.87.726zm0-1.971c.656 0 1.236-.163 1.74-.488a3.309 3.309 0 0 0 1.181-1.338 4.143 4.143 0 0 0 .425-1.878c0-.677-.142-1.293-.425-1.846a3.236 3.236 0 0 0-1.18-1.328 3.174 3.174 0 0 0-1.741-.487c-.608 0-1.168.155-1.678.466a3.381 3.381 0 0 0-1.223 1.307c-.297.554-.445 1.183-.445 1.888 0 .678.138 1.3.414 1.868.283.56.677 1.006 1.18 1.338.512.332 1.096.498 1.752.498z',
+  },
+  // g
+  {
+    ink: '#3186FF',
+    d: 'M45.376 20c-1.188 0-2.169-.25-2.942-.747-.767-.498-1.406-1.29-1.917-2.376l1.948-.86c.324.615.718 1.096 1.18 1.441.463.353 1.03.53 1.7.53 1.022 0 1.799-.298 2.33-.893.54-.595.809-1.424.809-2.49v-.964h-.073c-.166.249-.4.501-.704.757a4.33 4.33 0 0 1-1.12.643 3.95 3.95 0 0 1-1.45.26c-1.043 0-1.947-.232-2.714-.696a4.575 4.575 0 0 1-1.761-1.929c-.407-.83-.611-1.78-.611-2.852 0-1.059.203-2.006.611-2.843.407-.843.988-1.504 1.74-1.981.76-.477 1.644-.716 2.652-.716.719 0 1.378.142 1.98.425.6.284 1.07.689 1.408 1.214h.041V4.606h2.155v9.356c0 4.025-1.754 6.038-5.262 6.038zm0-6.753c.635 0 1.188-.149 1.657-.446.47-.298.829-.71 1.078-1.235.248-.532.373-1.137.373-1.815 0-.692-.125-1.297-.373-1.815a2.754 2.754 0 0 0-1.078-1.214c-.47-.284-1.019-.425-1.647-.425-.615 0-1.157.145-1.627.435-.47.284-.835.688-1.098 1.214-.262.526-.393 1.13-.393 1.815 0 .72.131 1.342.393 1.868.27.525.64.926 1.109 1.203.47.276 1.005.415 1.606.415z',
+  },
+  // l
+  { ink: '#00AF57', d: 'M52.307 15.187V.332h2.258v14.855h-2.258z' },
+  // e
+  {
+    ink: '#FC413D',
+    d: 'M61.233 15.508c-1.588 0-2.904-.512-3.947-1.535-1.035-1.024-1.554-2.372-1.554-4.046 0-1.639.501-2.987 1.503-4.045 1.008-1.065 2.324-1.598 3.947-1.598 1.063 0 1.982.273 2.755.82.78.546 1.395 1.4 1.844 2.562a4.488 4.488 0 0 1 .207.788l-8.494 3.61-.59-1.712 7.033-2.987-.197.944c-.262-.74-.628-1.276-1.098-1.608a2.587 2.587 0 0 0-1.543-.498c-.967 0-1.737.332-2.31.996-.574.657-.86 1.521-.86 2.593 0 1.01.331 1.871.994 2.583.663.713 1.468 1.069 2.414 1.069.566 0 1.095-.142 1.585-.426.49-.283.919-.68 1.285-1.193l1.678 1.1a5.4 5.4 0 0 1-1.927 1.878c-.815.47-1.723.705-2.725.705z',
+  },
+];
 
-const GOLD_COMPANY = 'Google Cloud';
 /**
- * Where the wordmark starts: the mark's own artwork runs x 7.3–120.9 inside a
- * 128 box, so it is shifted back to the origin and scaled to a 22px cap before
- * the text follows it. Hard numbers rather than a measured box because an SVG
- * in an `<img>` never reports one.
+ * "Cloud" ships as #212226 — near-black, and it all but disappears against
+ * the dark feed — so it is the one ink taken off their file and flipped with
+ * the ground instead. Nothing else about the artwork changes.
  */
-const WORDMARK_X = 36;
-const GOLD_WIDTH = WORDMARK_X + GOLD_COMPANY.length * 9.25 + 6;
+const CLOUD_WORD =
+  'M78.58 15.545c-2.204 0-4.041-.74-5.512-2.22-1.471-1.487-2.207-3.347-2.207-5.58 0-2.241.74-4.091 2.217-5.55 1.478-1.46 3.308-2.19 5.49-2.19a7.57 7.57 0 0 1 2.062.28 6.652 6.652 0 0 1 1.803.8c.546.339 1.115.83 1.71 1.473L82.567 4.05c-.511-.546-.95-.933-1.316-1.161a4.272 4.272 0 0 0-1.202-.519 5.418 5.418 0 0 0-1.47-.187c-1.54 0-2.832.512-3.875 1.535-1.043 1.017-1.564 2.355-1.564 4.015 0 1.653.517 3.005 1.553 4.056 1.036 1.044 2.331 1.566 3.885 1.566.546 0 1.07-.076 1.575-.228a5.14 5.14 0 0 0 1.378-.643c.414-.277.863-.685 1.347-1.224l1.616 1.546c-.663.74-1.288 1.29-1.876 1.649-.58.36-1.208.63-1.885.809a8.07 8.07 0 0 1-2.155.28zm7.055-.342V.348h2.258v14.855h-2.258zm9.052.342c-1.61 0-2.939-.536-3.988-1.608-1.05-1.072-1.575-2.42-1.575-4.045 0-1.646.525-2.998 1.575-4.056 1.056-1.058 2.386-1.587 3.988-1.587 1.602 0 2.932.532 3.989 1.597 1.056 1.065 1.584 2.414 1.584 4.046 0 1.625-.524 2.973-1.574 4.045s-2.383 1.608-3.999 1.608zm0-1.97c.946 0 1.74-.343 2.383-1.028.642-.691.963-1.577.963-2.655 0-1.093-.324-1.978-.974-2.656-.642-.678-1.433-1.017-2.372-1.017-.946 0-1.74.34-2.383 1.017-.642.678-.963 1.563-.963 2.656 0 1.078.318 1.964.953 2.655.642.685 1.44 1.027 2.393 1.027zm10.639 1.97c-1.257 0-2.227-.363-2.911-1.09-.684-.732-1.025-1.766-1.025-3.1V4.59h2.258v6.42c0 .865.197 1.526.59 1.982.401.457.971.685 1.71.685.773 0 1.426-.298 1.958-.892.532-.602.797-1.321.797-2.158V4.591h2.259v10.612h-2.145v-2.521l1.026 1.027h-1.088c-.297.533-.759.972-1.388 1.317a4.165 4.165 0 0 1-2.041.52zm11.894 0c-1.443 0-2.642-.522-3.595-1.566-.946-1.051-1.419-2.41-1.419-4.077 0-1.653.48-3.005 1.44-4.056.967-1.051 2.176-1.577 3.626-1.577a4.18 4.18 0 0 1 2.02.498c.621.325 1.088.754 1.399 1.286h.072V.348h2.238v14.855h-2.155v-1.878l.238.415h-.3c-.332.546-.819.986-1.461 1.317a4.59 4.59 0 0 1-2.103.488zm.404-1.95c.905 0 1.664-.346 2.279-1.038.622-.698.933-1.587.933-2.665 0-1.08-.314-1.957-.943-2.635-.622-.678-1.378-1.017-2.269-1.017-.891 0-1.65.34-2.279 1.017-.622.678-.932 1.56-.932 2.645 0 1.072.307 1.957.922 2.655.621.692 1.384 1.038 2.289 1.038z';
+
+const GOLD_COMPANY = 'Google Cloud';
+/** The artwork's own box, so `logo_ratio` below is measured, not guessed. */
+const GOLD_BOX = { width: 123, height: 20 };
 
 /**
  * A lockup rather than a word, so the paid slot reads as a logo at a glance
- * the way the marks beside it do. Two inks: the glyph holds its brand colour
- * in both themes while the wordmark flips, which is exactly the case a single
- * flat file cannot serve and the reason the wire contract takes a pair.
- *
- * The wordmark is set in the same stack as the rest of this fixture, not in
- * Google Sans — a licensed face cannot be inlined here, and an approximated
- * one is the part a real creative would replace anyway.
+ * the way the marks beside it do. Two inks: the wordmark holds its brand
+ * colours in both themes while "Cloud" flips, which is exactly the case a
+ * single flat file cannot serve and the reason the wire contract takes a
+ * pair.
  */
-const goldLockup = (wordmark: string): string => {
-  const svg = `<svg xmlns="http://www.w3.org/2000/svg" width="${GOLD_WIDTH}" height="32" viewBox="0 0 ${GOLD_WIDTH} 32"><g transform="translate(-1.73 1.45) scale(0.2366)">${GOOGLE_CLOUD_MARK}</g><text x="${WORDMARK_X}" y="22" font-family="'Google Sans','Product Sans',Arial,Helvetica,sans-serif" font-size="17" font-weight="700" fill="${wordmark}">${GOLD_COMPANY}</text></svg>`;
+const goldLockup = (cloudInk: string): string => {
+  const wordmark = GOOGLE_WORDMARK.map(
+    ({ ink, d }) => `<path fill="${ink}" d="${d}"/>`,
+  ).join('');
+  const svg =
+    `<svg xmlns="http://www.w3.org/2000/svg" width="${GOLD_BOX.width}" height="${GOLD_BOX.height}" viewBox="0 0 ${GOLD_BOX.width} ${GOLD_BOX.height}">` +
+    `${wordmark}<path fill="${cloudInk}" d="${CLOUD_WORD}"/></svg>`;
 
   return `data:image/svg+xml,${encodeURIComponent(svg)}`;
 };
@@ -98,7 +127,7 @@ const MOCK_SPONSOR_STRIP_ADS = [
       light: goldLockup('#0E1217'),
       dark: goldLockup('#FFFFFF'),
     },
-    logo_ratio: GOLD_WIDTH / 32,
+    logo_ratio: GOLD_BOX.width / GOLD_BOX.height,
     link: 'https://cloud.google.com/free?utm_source=sponsor_strip&sponsor=google-cloud',
     pixel: [] as string[],
     tier: SponsorTier.Gold,
diff --git a/packages/shared/src/features/monetization/sponsorStrip/sponsorLogoSizing.ts b/packages/shared/src/features/monetization/sponsorStrip/sponsorLogoSizing.ts
index e532582a7b1..14b702464af 100644
--- a/packages/shared/src/features/monetization/sponsorStrip/sponsorLogoSizing.ts
+++ b/packages/shared/src/features/monetization/sponsorStrip/sponsorLogoSizing.ts
@@ -6,8 +6,14 @@
  * lockup came out shorter than the tallest silhouette beside it, which is the
  * opposite of what the slot is sold as. One known creative in one slot does
  * not need normalising, it needs to be the biggest thing on the row.
+ *
+ * It is the box height, not the cap height, and a lockup that is all wordmark
+ * spends nearly all of that box on letterforms where a mark-plus-wordmark
+ * spends it on the mark. Sized for the former: matching the wall's ceiling in
+ * height, it still leads the row on width and on being the one slot in
+ * colour.
  */
-export const GOLD_HEIGHT = 28;
+export const GOLD_HEIGHT = 20;
 /** The wall's two tiers differ by a hair of ink, not by a wash of opacity. */
 export const PREMIUM_CAP = 17;
 export const COMMUNITY_CAP = 15;

From a2e1b0bf4b7ce06313fa200bcc0f839a508ceb92 Mon Sep 17 00:00:00 2001
From: Tsahi Matsliah <41912669+tsahimatsliah@users.noreply.github.com>
Date: Tue, 8 Sep 2026 09:28:44 +0300
Subject: [PATCH 14/20] fix(monetization): line the dock up with the cards
 inside the v2 frame
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

`feedGutter` is where the feed's column starts in the legacy layout, and
the dock has used it since the hand-copied `DOCK_GUTTER` went away. Inside
the v2 floating card it is zero — the card is already the frame — but the
grid then takes a `laptop:p-6` inset of its own so the cards sit off the
frame's rounded corners. So in v2 the cards start 24px further in than the
gutter does, and the dock's "Made possible by" and "Breaking news" sat a
full inset to the left of the column they belong to.

Measured on the preview by adding the frame class and then the grid's own
inset to a live feed: card left 44 → 68 while the dock's label stayed at
44. That 24px is the whole bug, and it is why this looked correct in v1 —
there is no inset there for the gutter to miss.

`feedFrameInsetX` carries it, next to `feedGutter` and `feedWidth`, so the
three things that decide where the feed's edges are sit together rather
than one of them being rediscovered per consumer. Horizontal only: the
grid's vertical half is the frame's breathing room, and chrome outside the
grid sets its own height.

It rides its own element in both rows rather than joining the gutter and
the width clamp on one. All three set horizontal padding, and stacked on a
single element which one wins is left to the order Tailwind emits them in.
Nested, they compose: the gutter finds the frame, the inset finds the
cards inside it.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
---
 .../src/components/utilities/common.tsx       |  18 +++
 .../sponsorStrip/SponsorStrip.tsx             | 137 +++++++++---------
 .../sponsorStrip/SponsorStripHeadlines.tsx    |  77 +++++-----
 3 files changed, 130 insertions(+), 102 deletions(-)

diff --git a/packages/shared/src/components/utilities/common.tsx b/packages/shared/src/components/utilities/common.tsx
index 466f234e8df..91476307ff9 100644
--- a/packages/shared/src/components/utilities/common.tsx
+++ b/packages/shared/src/components/utilities/common.tsx
@@ -151,6 +151,24 @@ export const feedWidth = classNames(
   feedStyles.container,
 );
 
+/**
+ * The last step in to the cards, and the one `feedGutter` cannot describe.
+ *
+ * Inside the v2 floating card the gutter is zero — the card is already the
+ * frame — but the grid then takes an inset of its own so the cards sit off
+ * the frame's rounded corners (`laptop:p-6` in FeedContainer). So in v2 the
+ * cards' left and right edges are 24px inside the gutter's, and chrome that
+ * lines up with them by gutter alone lands a full inset short.
+ *
+ * Horizontal only: the grid's vertical half is the frame's own breathing
+ * room, and chrome outside the grid sets its own height.
+ *
+ * Keyed to the frame's class rather than to `isV2` for the same reason
+ * `feedGutter` is: the flag resolves after mount, and this inset has to
+ * appear at exactly the moment the frame it insets from does.
+ */
+export const feedFrameInsetX = 'laptop:[.layout-frame_&]:px-6';
+
 // Vertical padding only. The horizontal inset moved to FeedContainer
 // (see `feedGutter`) because this component is not in the tree on
 // every feed route — FeedPageLayoutList is used instead on some — and
diff --git a/packages/shared/src/features/monetization/sponsorStrip/SponsorStrip.tsx b/packages/shared/src/features/monetization/sponsorStrip/SponsorStrip.tsx
index b6959c890f2..3bb31a19074 100644
--- a/packages/shared/src/features/monetization/sponsorStrip/SponsorStrip.tsx
+++ b/packages/shared/src/features/monetization/sponsorStrip/SponsorStrip.tsx
@@ -18,7 +18,11 @@ import {
   SPONSOR_ROW_HEIGHT,
   usePublishStripHeight,
 } from './sponsorStripOffset';
-import { feedGutter, feedWidth } from '../../../components/utilities/common';
+import {
+  feedFrameInsetX,
+  feedGutter,
+  feedWidth,
+} from '../../../components/utilities/common';
 import { PREMIUM_SLOT_COUNT } from './sponsorStripSlots';
 import { useSponsorStripAds } from './useSponsorStripAds';
 import FeedContext from '../../../contexts/FeedContext';
@@ -55,73 +59,76 @@ const SponsorRow = ({
     data-testid="sponsorStripRow"
     className="w-full border-t border-border-subtlest-tertiary"
   >
-    <div
-      className={classNames(
-        'flex h-10 items-center gap-5',
-        feedGutter,
-        feedWidth,
-      )}
-      style={widthStyle}
-    >
-      {gold && (
-        <div className="flex shrink-0 items-center gap-x-2.5">
-          <span className="whitespace-nowrap text-text-quaternary typo-caption2">
-            Made possible by
-          </span>
-          {/* The gold mark is the one slot that keeps its own inks and its own
-            size: one coloured mark at full height against a silhouetted wall
-            is the whole hierarchy of the row, without a hover effect on top. */}
-          <SponsorLogo
-            sponsor={gold}
-            slotIndex={0}
-            exactHeight={GOLD_HEIGHT}
-            className="text-text-primary"
-          />
-        </div>
-      )}
-      {gold && !!(premium.length || community.length) && (
-        <span
-          aria-hidden
-          className="h-5 w-px shrink-0 bg-border-subtlest-tertiary"
-        />
-      )}
-      {/* One run for both wall tiers, spread with `justify-between` the way the
-        broadcast bar this borrows from distributes its credits: the row
-        breathes on a wide window and tightens before it clips. Premium sits
-        left and carries a hair more ink; the slots are a fixed width, so a
-        rotation swapping a square mark for a long lockup cannot make the whole
-        row shuffle sideways. */}
+    <div className={classNames(feedGutter, feedWidth)} style={widthStyle}>
+      {/* The frame inset rides its own element rather than joining the two
+        above: all three set horizontal padding, and stacking them on one
+        element leaves which wins to the order Tailwind happens to emit
+        them in. Nested, they compose — the gutter finds the frame, and this
+        finds the cards inside it. */}
       <div
-        ref={wallRef}
-        className="flex min-w-0 flex-1 items-center justify-between gap-4 overflow-hidden"
+        className={classNames('flex h-10 items-center gap-5', feedFrameInsetX)}
       >
-        {premium.map((sponsor, index) => (
-          <SponsorLogo
-            key={sponsor.genId}
-            sponsor={sponsor}
-            slotIndex={index + 1}
-            cap={PREMIUM_CAP}
-            boxWidth={SLOT_WIDTH}
-            maxHeight={WALL_MAX_HEIGHT}
-            monochrome
-            className="text-text-secondary transition-colors hover:text-text-primary"
-          />
-        ))}
-        {community.map((sponsor, index) => (
-          <SponsorLogo
-            key={sponsor.genId}
-            sponsor={sponsor}
-            // Offset by the full premium row rather than by how many premium
-            // creatives happened to fill it, so a slot index means the same
-            // position from one session to the next.
-            slotIndex={index + 1 + PREMIUM_SLOT_COUNT}
-            cap={COMMUNITY_CAP}
-            boxWidth={SLOT_WIDTH}
-            maxHeight={WALL_MAX_HEIGHT}
-            monochrome
-            className="text-text-tertiary transition-colors hover:text-text-primary"
+        {gold && (
+          <div className="flex shrink-0 items-center gap-x-2.5">
+            <span className="whitespace-nowrap text-text-quaternary typo-caption2">
+              Made possible by
+            </span>
+            {/* The gold mark is the one slot that keeps its own inks and its
+              own size: one coloured mark at full height against a silhouetted
+              wall is the whole hierarchy of the row, without a hover effect
+              on top. */}
+            <SponsorLogo
+              sponsor={gold}
+              slotIndex={0}
+              exactHeight={GOLD_HEIGHT}
+              className="text-text-primary"
+            />
+          </div>
+        )}
+        {gold && !!(premium.length || community.length) && (
+          <span
+            aria-hidden
+            className="h-5 w-px shrink-0 bg-border-subtlest-tertiary"
           />
-        ))}
+        )}
+        {/* One run for both wall tiers, spread with `justify-between` the way
+          the broadcast bar this borrows from distributes its credits: the row
+          breathes on a wide window and tightens before it clips. Premium sits
+          left and carries a hair more ink; the slots are a fixed width, so a
+          rotation swapping a square mark for a long lockup cannot make the
+          whole row shuffle sideways. */}
+        <div
+          ref={wallRef}
+          className="flex min-w-0 flex-1 items-center justify-between gap-4 overflow-hidden"
+        >
+          {premium.map((sponsor, index) => (
+            <SponsorLogo
+              key={sponsor.genId}
+              sponsor={sponsor}
+              slotIndex={index + 1}
+              cap={PREMIUM_CAP}
+              boxWidth={SLOT_WIDTH}
+              maxHeight={WALL_MAX_HEIGHT}
+              monochrome
+              className="text-text-secondary transition-colors hover:text-text-primary"
+            />
+          ))}
+          {community.map((sponsor, index) => (
+            <SponsorLogo
+              key={sponsor.genId}
+              sponsor={sponsor}
+              // Offset by the full premium row rather than by how many premium
+              // creatives happened to fill it, so a slot index means the same
+              // position from one session to the next.
+              slotIndex={index + 1 + PREMIUM_SLOT_COUNT}
+              cap={COMMUNITY_CAP}
+              boxWidth={SLOT_WIDTH}
+              maxHeight={WALL_MAX_HEIGHT}
+              monochrome
+              className="text-text-tertiary transition-colors hover:text-text-primary"
+            />
+          ))}
+        </div>
       </div>
     </div>
   </div>
diff --git a/packages/shared/src/features/monetization/sponsorStrip/SponsorStripHeadlines.tsx b/packages/shared/src/features/monetization/sponsorStrip/SponsorStripHeadlines.tsx
index b42d15125b1..6d3ce98e5d5 100644
--- a/packages/shared/src/features/monetization/sponsorStrip/SponsorStripHeadlines.tsx
+++ b/packages/shared/src/features/monetization/sponsorStrip/SponsorStripHeadlines.tsx
@@ -8,7 +8,11 @@ import { useLogContext } from '../../../contexts/LogContext';
 import type { PostHighlight } from '../../../graphql/highlights';
 import useLogEventOnce from '../../../hooks/log/useLogEventOnce';
 import { feedHighlightsLogEvent } from '../../../lib/feed';
-import { feedGutter, feedWidth } from '../../../components/utilities/common';
+import {
+  feedFrameInsetX,
+  feedGutter,
+  feedWidth,
+} from '../../../components/utilities/common';
 import { LogEvent, Origin } from '../../../lib/log';
 
 const HEADLINES_FEED_NAME = 'sponsor-strip-headlines';
@@ -68,44 +72,43 @@ export const SponsorStripHeadlines = ({
       data-testid="sponsorStripHeadlines"
       className="w-full border-t border-border-subtlest-tertiary bg-background-default"
     >
-      <div
-        className={classNames(
-          'flex h-8 items-center gap-4',
-          feedGutter,
-          feedWidth,
-        )}
-        style={widthStyle}
-      >
-        {/* The sacrificial left zone, and the reason the strip has two rows at
-          all: the browser paints its link-status bubble over this corner, and
-          a label losing a word to it costs nothing, where the row above it is
-          the one somebody paid for. */}
-        <span className="shrink-0 whitespace-nowrap text-text-quaternary typo-caption2">
-          Breaking news
-        </span>
-        {/* Scrollable rather than merely clipped: the row carries more than it
-          can show, and a reader who wants the headline under the fade has no
-          other way to reach it. The bar is hidden because the fade already
-          says the row continues. */}
+      <div className={classNames(feedGutter, feedWidth)} style={widthStyle}>
+        {/* See the sponsor row: the frame inset is nested rather than stacked
+          so the three horizontal paddings compose instead of racing. */}
         <div
-          className="no-scrollbar flex min-w-0 flex-1 items-center gap-5 overflow-x-auto"
-          style={fadeStyle}
+          className={classNames('flex h-8 items-center gap-4', feedFrameInsetX)}
         >
-          {headlines.map((highlight, index) => (
-            <Link href={getHighlightsUrl(highlight.id)} key={highlight.id}>
-              <a
-                href={getHighlightsUrl(highlight.id)}
-                onClick={() => onHeadlineClick(highlight, index)}
-                className="flex shrink-0 items-center gap-1.5 whitespace-nowrap text-text-secondary typo-caption1 hover:text-text-primary"
-              >
-                {highlight.headline}
-                <RelativeTime
-                  dateTime={highlight.highlightedAt}
-                  className="text-text-quaternary"
-                />
-              </a>
-            </Link>
-          ))}
+          {/* The sacrificial left zone, and the reason the strip has two rows
+            at all: the browser paints its link-status bubble over this corner,
+            and a label losing a word to it costs nothing, where the row above
+            it is the one somebody paid for. */}
+          <span className="shrink-0 whitespace-nowrap text-text-quaternary typo-caption2">
+            Breaking news
+          </span>
+          {/* Scrollable rather than merely clipped: the row carries more than
+            it can show, and a reader who wants the headline under the fade has
+            no other way to reach it. The bar is hidden because the fade
+            already says the row continues. */}
+          <div
+            className="no-scrollbar flex min-w-0 flex-1 items-center gap-5 overflow-x-auto"
+            style={fadeStyle}
+          >
+            {headlines.map((highlight, index) => (
+              <Link href={getHighlightsUrl(highlight.id)} key={highlight.id}>
+                <a
+                  href={getHighlightsUrl(highlight.id)}
+                  onClick={() => onHeadlineClick(highlight, index)}
+                  className="flex shrink-0 items-center gap-1.5 whitespace-nowrap text-text-secondary typo-caption1 hover:text-text-primary"
+                >
+                  {highlight.headline}
+                  <RelativeTime
+                    dateTime={highlight.highlightedAt}
+                    className="text-text-quaternary"
+                  />
+                </a>
+              </Link>
+            ))}
+          </div>
         </div>
       </div>
     </div>

From d55ffb7a6b8f28da50a800a5e1cf1045fd8dfaf2 Mon Sep 17 00:00:00 2001
From: Chris Bongers <chrisbongers@gmail.com>
Date: Wed, 9 Sep 2026 13:45:16 +0200
Subject: [PATCH 15/20] revert(monetization): give the feed back its Happening
 Now card

The strip dropped the feed's Happening Now card on the grounds that the
ticker carried those headlines in its place. It no longer does: the
ticker is about to be fed the statusline mix, which is curated headlines
interleaved with popular posts rather than a second view of one set of
highlights. Two rows showing different things can both stand.

Takes `disableHighlightItems` back out of `useFeed`, `Feed`,
`MainFeedLayout` and `useSponsorStripFeed`, so no feed anywhere can lose
the card.

`mockFeedHighlights` goes with it. Its only purpose was to put a card in
a local feed so there was something to watch the experiment take away,
and nothing takes it away now.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
---
 packages/shared/src/components/Feed.spec.tsx  |  62 -----------
 packages/shared/src/components/Feed.tsx       |   8 --
 .../shared/src/components/MainFeedLayout.tsx  |   1 -
 .../sponsorStrip/useSponsorStripFeed.spec.tsx |  39 ++-----
 .../sponsorStrip/useSponsorStripFeed.ts       |  20 +---
 .../src/hooks/feed/mockFeedHighlights.spec.ts | 103 ------------------
 .../src/hooks/feed/mockFeedHighlights.ts      |  87 ---------------
 packages/shared/src/hooks/useFeed.ts          |  24 +---
 8 files changed, 18 insertions(+), 326 deletions(-)
 delete mode 100644 packages/shared/src/hooks/feed/mockFeedHighlights.spec.ts
 delete mode 100644 packages/shared/src/hooks/feed/mockFeedHighlights.ts

diff --git a/packages/shared/src/components/Feed.spec.tsx b/packages/shared/src/components/Feed.spec.tsx
index 37dbc8cb233..515c80bc929 100644
--- a/packages/shared/src/components/Feed.spec.tsx
+++ b/packages/shared/src/components/Feed.spec.tsx
@@ -556,68 +556,6 @@ describe('Feed logged in', () => {
     ).toEqual(['postItem', 'postItem', 'highlightItem', 'postItem']);
   });
 
-  // `disableHighlightItems` is set by MainFeedLayout when it mounts the sponsor
-  // strip, which is what carries breaking news in the card's place.
-  it('should drop the Happening Now card when the layout says the strip carries it', async () => {
-    renderComponent(
-      [
-        {
-          request: {
-            query: FEED_V2_QUERY,
-            variables,
-          },
-          result: {
-            data: {
-              page: {
-                pageInfo: defaultFeedPage.pageInfo,
-                edges: [
-                  {
-                    node: {
-                      __typename: 'FeedHighlightsItem',
-                      feedMeta: null,
-                      highlights: [
-                        {
-                          id: 'highlight-1',
-                          channel: 'agents',
-                          headline: 'The first highlight',
-                          highlightedAt: '2026-04-05T09:00:00.000Z',
-                          post: {
-                            id: defaultFeedPage.edges[0].node.id,
-                            commentsPermalink:
-                              defaultFeedPage.edges[0].node.commentsPermalink,
-                          },
-                        },
-                      ],
-                    },
-                  },
-                  {
-                    node: {
-                      __typename: 'FeedPostItem',
-                      post: defaultFeedPage.edges[0].node,
-                      feedMeta: defaultFeedPage.edges[0].node.feedMeta ?? null,
-                    },
-                  },
-                ],
-              },
-            },
-          },
-        },
-      ],
-      defaultUser,
-      SharedFeedPage.MyFeed,
-      FEED_V2_QUERY,
-      { disableHighlightItems: true },
-    );
-
-    await waitForNock();
-
-    // The posts around it still render, so the card is dropped rather than the
-    // whole response being discarded.
-    expect(await screen.findAllByTestId('postItem')).not.toHaveLength(0);
-    expect(screen.queryByTestId('highlightItem')).not.toBeInTheDocument();
-    expect(screen.queryByText('Happening Now')).not.toBeInTheDocument();
-  });
-
   it('should send upvote mutation', async () => {
     let mutationCalled = false;
     renderComponent([
diff --git a/packages/shared/src/components/Feed.tsx b/packages/shared/src/components/Feed.tsx
index b96a5c9774a..c4fe7262a42 100644
--- a/packages/shared/src/components/Feed.tsx
+++ b/packages/shared/src/components/Feed.tsx
@@ -102,12 +102,6 @@ export interface FeedProps<T>
   showSearch?: boolean;
   actionButtons?: ReactNode;
   disableAds?: boolean;
-  /**
-   * Drop the Happening Now card. Owned by the layout that renders the sponsor
-   * strip, which is where breaking news goes while the strip is up — a feed
-   * with no strip above it must never lose the card.
-   */
-  disableHighlightItems?: boolean;
   staticAd?: { ad: Ad; index: number };
   disableAdRefresh?: boolean;
   allowFetchMore?: boolean;
@@ -217,7 +211,6 @@ export default function Feed<T>({
   shortcuts,
   actionButtons,
   disableAds,
-  disableHighlightItems,
   staticAd,
   disableAdRefresh = false,
   allowFetchMore,
@@ -381,7 +374,6 @@ export default function Feed<T>({
       disableTopHero: isV2,
       isHorizontal,
       excludePinnedPosts,
-      disableHighlightItems,
       settings: {
         disableAds,
         staticAd,
diff --git a/packages/shared/src/components/MainFeedLayout.tsx b/packages/shared/src/components/MainFeedLayout.tsx
index 70c59547a9b..4292b382eb1 100644
--- a/packages/shared/src/components/MainFeedLayout.tsx
+++ b/packages/shared/src/components/MainFeedLayout.tsx
@@ -867,7 +867,6 @@ export default function MainFeedLayout({
           feedProps && (
             <Feed
               {...feedProps}
-              disableHighlightItems={sponsorStrip.disableHighlightItems}
               shortcuts={shortcuts}
               topContent={
                 (isExploreTag || shouldUseListFeedLayout) && chipsNode ? (
diff --git a/packages/shared/src/features/monetization/sponsorStrip/useSponsorStripFeed.spec.tsx b/packages/shared/src/features/monetization/sponsorStrip/useSponsorStripFeed.spec.tsx
index 17703298f59..194fd5ecbc4 100644
--- a/packages/shared/src/features/monetization/sponsorStrip/useSponsorStripFeed.spec.tsx
+++ b/packages/shared/src/features/monetization/sponsorStrip/useSponsorStripFeed.spec.tsx
@@ -26,33 +26,6 @@ beforeEach(() => {
   mockHeadlines.mockReturnValue(settled([headline]));
 });
 
-it('should drop the feed card when the strip is carrying the headlines', () => {
-  expect(render().result.current.disableHighlightItems).toBe(true);
-});
-
-it('should keep the feed card once the query settles with no headlines', () => {
-  // An empty ticker cannot stand in for the card, and suppressing it then
-  // would take breaking news out of the product altogether.
-  mockHeadlines.mockReturnValue(settled([]));
-
-  expect(render().result.current.disableHighlightItems).toBe(false);
-});
-
-// The headlines are their own round trip, landing after the feed has painted.
-// Waiting for them flipped this mid-scroll and pulled the card out of the
-// middle of the feed.
-it('should drop the feed card before the headlines have arrived', () => {
-  mockHeadlines.mockReturnValue({ headlines: [], isSettled: false });
-
-  expect(render().result.current.disableHighlightItems).toBe(true);
-});
-
-it('should keep the feed card when the strip is off', () => {
-  mockStrip.mockReturnValue(false);
-
-  expect(render().result.current.disableHighlightItems).toBe(false);
-});
-
 it('should not query headlines when the strip is off', () => {
   mockStrip.mockReturnValue(false);
   render();
@@ -67,3 +40,15 @@ it('should hand the strip the same headlines it decided with', () => {
   expect(result.current.isEnabled).toBe(true);
   expect(result.current.headlinesSettled).toBe(true);
 });
+
+it('should report the strip as off when the flag is off', () => {
+  mockStrip.mockReturnValue(false);
+
+  expect(render().result.current.isEnabled).toBe(false);
+});
+
+it('should report the headlines as unsettled while the query runs', () => {
+  mockHeadlines.mockReturnValue({ headlines: [], isSettled: false });
+
+  expect(render().result.current.headlinesSettled).toBe(false);
+});
diff --git a/packages/shared/src/features/monetization/sponsorStrip/useSponsorStripFeed.ts b/packages/shared/src/features/monetization/sponsorStrip/useSponsorStripFeed.ts
index c92c13c271e..e9d09df23e2 100644
--- a/packages/shared/src/features/monetization/sponsorStrip/useSponsorStripFeed.ts
+++ b/packages/shared/src/features/monetization/sponsorStrip/useSponsorStripFeed.ts
@@ -12,27 +12,16 @@ interface UseSponsorStripFeed {
   headlines: PostHighlight[];
   /** Whether the headlines query has answered; the dock reserves until it has. */
   headlinesSettled: boolean;
-  /**
-   * Drop the feed's Happening Now card, because the strip carries those
-   * headlines in its place.
-   *
-   * Decided from the strip being up rather than from the headlines having
-   * arrived. The headlines are their own round trip and land after the feed
-   * has painted, so reading them here flipped this mid-scroll and pulled the
-   * card out of the middle of the feed, jumping everything below it. The one
-   * case that gives the card back is the query settling with nothing at all:
-   * breaking news must never fall out of the product entirely just because
-   * the experiment is on.
-   */
-  disableHighlightItems: boolean;
 }
 
 /**
  * Everything a feed layout needs from the sponsor strip, in one place: whether
- * to mount it, the headlines it carries, and whether the feed underneath
- * should give up its Happening Now card. One evaluation of the flag and one
+ * to mount it and the headlines it carries. One evaluation of the flag and one
  * headlines query, so the strip and the feed can never be told different
  * things.
+ *
+ * The feed keeps its own Happening Now card either way — the ticker is a
+ * separate row with its own content, not a replacement for the card.
  */
 export const useSponsorStripFeed = ({
   feedName,
@@ -45,6 +34,5 @@ export const useSponsorStripFeed = ({
     isEnabled,
     headlines,
     headlinesSettled: isSettled,
-    disableHighlightItems: isEnabled && (!isSettled || headlines.length > 0),
   };
 };
diff --git a/packages/shared/src/hooks/feed/mockFeedHighlights.spec.ts b/packages/shared/src/hooks/feed/mockFeedHighlights.spec.ts
deleted file mode 100644
index 493fd075daf..00000000000
--- a/packages/shared/src/hooks/feed/mockFeedHighlights.spec.ts
+++ /dev/null
@@ -1,103 +0,0 @@
-import type { FeedItemData } from '../../graphql/feed';
-import type { Post } from '../../graphql/posts';
-import { withMockFeedHighlights } from './mockFeedHighlights';
-
-jest.mock('../../lib/constants', () => ({
-  ...(jest.requireActual('../../lib/constants') as Record<string, unknown>),
-  isDevelopment: true,
-}));
-
-const mockConstants = jest.requireMock('../../lib/constants') as {
-  isDevelopment: boolean;
-};
-
-const postNode = (id: string) => ({
-  node: {
-    itemType: 'post' as const,
-    post: { id, commentsPermalink: `https://daily.dev/posts/${id}` } as Post,
-    feedMeta: null,
-  },
-});
-
-const pages = (): FeedItemData[] => [
-  {
-    page: {
-      pageInfo: { hasNextPage: false, endCursor: '' },
-      edges: [postNode('p1'), postNode('p2'), postNode('p3')],
-    },
-  },
-];
-
-const itemTypes = (data: FeedItemData[]): string[] =>
-  data[0].page.edges.map(({ node }) => node.itemType);
-
-beforeEach(() => {
-  mockConstants.isDevelopment = true;
-});
-
-it('should leave the feed alone unless it was asked', () => {
-  const data = pages();
-
-  expect(withMockFeedHighlights(data, false)).toBe(data);
-});
-
-it('should never inject outside development, whatever the query says', () => {
-  mockConstants.isDevelopment = false;
-  const data = pages();
-
-  expect(withMockFeedHighlights(data, true)).toBe(data);
-});
-
-it('should insert one card into the first page', () => {
-  const data = withMockFeedHighlights(pages(), true);
-
-  expect(itemTypes(data)).toEqual(['post', 'post', 'highlight', 'post']);
-});
-
-it('should point the rows at real posts so they link somewhere', () => {
-  const data = withMockFeedHighlights(pages(), true);
-  const [{ node }] = data[0].page.edges.filter(
-    ({ node: item }) => item.itemType === 'highlight',
-  );
-
-  expect(node.itemType === 'highlight' && node.highlights.length).toBeTruthy();
-  expect(
-    node.itemType === 'highlight' &&
-      node.highlights.every(({ post }) => !!post.commentsPermalink),
-  ).toBe(true);
-});
-
-it('should keep out of the way when the API sent real highlights', () => {
-  const data: FeedItemData[] = [
-    {
-      page: {
-        pageInfo: { hasNextPage: false, endCursor: '' },
-        edges: [
-          postNode('p1'),
-          {
-            node: {
-              itemType: 'highlight' as const,
-              highlights: [],
-              feedMeta: null,
-            },
-          },
-        ],
-      },
-    },
-  ];
-
-  expect(withMockFeedHighlights(data, true)).toBe(data);
-});
-
-it('should not inject into a page with no posts to link to', () => {
-  const data: FeedItemData[] = [
-    {
-      page: {
-        pageInfo: { hasNextPage: false, endCursor: '' },
-        edges: [],
-      },
-    },
-  ];
-
-  expect(withMockFeedHighlights(data, true)).toBe(data);
-});
diff --git a/packages/shared/src/hooks/feed/mockFeedHighlights.ts b/packages/shared/src/hooks/feed/mockFeedHighlights.ts
deleted file mode 100644
index a93895f2ee5..00000000000
--- a/packages/shared/src/hooks/feed/mockFeedHighlights.ts
+++ /dev/null
@@ -1,87 +0,0 @@
-import type { FeedApiItem, FeedItemData } from '../../graphql/feed';
-import { isFeedApiPostItem } from '../../graphql/feed';
-import type { PostHighlight } from '../../graphql/highlights';
-import { isDevelopment } from '../../lib/constants';
-
-/**
- * TEMPORARY, development only. The Happening Now card comes from the feed API,
- * which returns no highlight items for a local session, so there is nothing to
- * watch the sponsor-strip experiment take away. This injects one card into the
- * first page so both sides of the experiment can be seen locally: with the
- * strip on the card should be gone, with it off it should be back.
- *
- * Opt in with `?mockHighlights=1`. Delete this module and its call in
- * `useFeed` once the experiment is decided.
- */
-
-const MOCK_HEADLINES = [
-  'Postgres 18 ships async I/O',
-  'Rust in the Linux kernel: one year on',
-  'The quiet death of the REST client',
-  'We deleted our CI cache and got faster',
-];
-
-/** Far enough in to sit in the feed proper rather than the first row. */
-const INSERT_AT = 2;
-
-const buildMockHighlights = (
-  page: FeedItemData['page'],
-): PostHighlight[] | null => {
-  const posts = page.edges
-    .map(({ node }) => node)
-    .filter(isFeedApiPostItem)
-    .map(({ post }) => post);
-
-  // Real posts, so the rows link somewhere and the card is worth clicking.
-  if (!posts.length) {
-    return null;
-  }
-
-  return MOCK_HEADLINES.map((headline, index) => {
-    const post = posts[index % posts.length];
-
-    return {
-      id: `mock-highlight-${index}`,
-      channel: 'agents',
-      headline,
-      highlightedAt: new Date(Date.now() - index * 45 * 60_000).toISOString(),
-      post: {
-        id: post.id,
-        commentsPermalink: post.commentsPermalink,
-      },
-    };
-  });
-};
-
-export const withMockFeedHighlights = (
-  pages: FeedItemData[],
-  enabled: boolean,
-): FeedItemData[] => {
-  // The environment check is here rather than at the call site so no query
-  // param can put a fixture in front of a real reader.
-  if (!enabled || !isDevelopment || !pages.length) {
-    return pages;
-  }
-
-  const [first, ...rest] = pages;
-
-  if (first.page.edges.some(({ node }) => node.itemType === 'highlight')) {
-    return pages;
-  }
-
-  const highlights = buildMockHighlights(first.page);
-
-  if (!highlights) {
-    return pages;
-  }
-
-  const node: FeedApiItem = {
-    itemType: 'highlight',
-    highlights,
-    feedMeta: null,
-  };
-  const edges = [...first.page.edges];
-  edges.splice(Math.min(INSERT_AT, edges.length), 0, { node });
-
-  return [{ ...first, page: { ...first.page, edges } }, ...rest];
-};
diff --git a/packages/shared/src/hooks/useFeed.ts b/packages/shared/src/hooks/useFeed.ts
index 5a06a222ab0..3176ad002c7 100644
--- a/packages/shared/src/hooks/useFeed.ts
+++ b/packages/shared/src/hooks/useFeed.ts
@@ -63,7 +63,6 @@ import { AdPlacement } from '../lib/ads';
 import { SharedFeedPage } from '../components/utilities';
 import { useTranslation } from './translation/useTranslation';
 import { useFetchAd } from '../features/monetization/useFetchAd';
-import { withMockFeedHighlights } from './feed/mockFeedHighlights';
 import type { Squad } from '../graphql/sources';
 
 interface FeedItemBase<T extends FeedItemType> {
@@ -268,13 +267,6 @@ export interface UseFeedOptionalParams<T> {
    * row, so hero placement is disabled entirely.
    */
   isHorizontal?: boolean;
-  /**
-   * Drop the Happening Now card from the feed. Set while the sponsor strip is
-   * showing, which is where breaking news goes instead; the user's own
-   * `highlightsPlacement` setting is left alone so the card comes back when
-   * the experiment ends.
-   */
-  disableHighlightItems?: boolean;
   /**
    * Drop pinned posts from the feed. `sourceFeed` always orders pinned posts
    * (welcome post, squad pins) first and offers no way to opt out server-side,
@@ -304,7 +296,6 @@ export default function useFeed<T>(
     disableTopHero = false,
     isHorizontal = false,
     excludePinnedPosts = false,
-    disableHighlightItems = false,
   } = params;
   const { numCards: numCardsBySpaciness } = useContext(FeedContext);
   const numCards = numCardsBySpaciness.eco;
@@ -330,10 +321,6 @@ export default function useFeed<T>(
     queryKey: feedQueryKey,
     queryType: 'feed',
   });
-  // TEMPORARY: `?mockHighlights=1` puts a Happening Now card in the feed so
-  // the sponsor-strip experiment can be checked locally, where the API returns
-  // no highlights. Development only — see `mockFeedHighlights`.
-  const shouldMockHighlights = !!router.query?.mockHighlights;
   const isFeedPreview = feedQueryKey?.[0] === RequestKey.FeedPreview;
   const avoidRetry =
     params?.settings?.feedName === SharedFeedPage.Custom && !isPlus;
@@ -705,12 +692,7 @@ export default function useFeed<T>(
         visualCellsSoFar += placement.colSpan;
       };
 
-      const feedPages = withMockFeedHighlights(
-        feedQuery.data.pages,
-        shouldMockHighlights,
-      );
-
-      feedPages.forEach(({ page }, pageIndex) => {
+      feedQuery.data.pages.forEach(({ page }, pageIndex) => {
         page.edges.forEach(({ node }, index: number) => {
           // Bail before the ad slot is claimed, otherwise dropping the post
           // would leave an ad stranded in a slot with nothing after it.
@@ -725,7 +707,7 @@ export default function useFeed<T>(
           }
 
           if (node.itemType === 'highlight') {
-            if (disableHighlightItems || !node.highlights.length) {
+            if (!node.highlights.length) {
               return;
             }
             pushAndAdvance({
@@ -787,8 +769,6 @@ export default function useFeed<T>(
     cadence,
     widenableTypes,
     excludePinnedPosts,
-    disableHighlightItems,
-    shouldMockHighlights,
     effectiveFirstSlotOffset,
   ]);
 

From f83e04d080ca105be4bf290a1c6583a0a12067fa Mon Sep 17 00:00:00 2001
From: Chris Bongers <chrisbongers@gmail.com>
Date: Wed, 9 Sep 2026 13:45:40 +0200
Subject: [PATCH 16/20] feat(monetization): feed the ticker from statuslineFeed
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The ticker read `majorHeadlines`, the same field the /highlights page and
the post widget read, which made it a third view of one set of curated
headlines. It now reads `statuslineFeed` (dailydotdev/daily-api#4251):
curated major headlines interleaved with the most-upvoted posts of the
day, deduped — the same mix the Claude Code plugin's statusline shows,
off one resolver and one cache, so the terminal and the web cannot drift
apart on what they show.

Each kind carries the signal that means something for it, the way the
terminal does: a headline is time-sensitive so it keeps its relative
timestamp, while a popular post shows the score that got it into the row.
The label moves from "Breaking news" to "Trending", the row no longer
being only breaking news.

`feedHighlightsLogEvent` now takes the four fields it actually reads
rather than a whole `PostHighlight`, so the ticker can log an item that
has no channel or editorial timestamp to hand over. Strictly widening —
every existing caller still satisfies it — and the feed name is
unchanged, so existing tracking keeps working.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
---
 .../sponsorStrip/SponsorStrip.spec.tsx        | 62 +++++++++---
 .../sponsorStrip/SponsorStrip.tsx             |  4 +-
 .../sponsorStrip/SponsorStripHeadlines.tsx    | 62 +++++++++---
 .../sponsorStrip/useSponsorStripFeed.spec.tsx |  6 +-
 .../sponsorStrip/useSponsorStripFeed.ts       |  4 +-
 .../sponsorStrip/useStripHeadlines.spec.tsx   | 94 ++++++++++---------
 .../sponsorStrip/useStripHeadlines.ts         | 38 ++++----
 packages/shared/src/graphql/statusline.ts     | 55 +++++++++++
 packages/shared/src/lib/feed.ts               | 10 +-
 9 files changed, 235 insertions(+), 100 deletions(-)
 create mode 100644 packages/shared/src/graphql/statusline.ts

diff --git a/packages/shared/src/features/monetization/sponsorStrip/SponsorStrip.spec.tsx b/packages/shared/src/features/monetization/sponsorStrip/SponsorStrip.spec.tsx
index b2a697275b8..14f5a2a97b5 100644
--- a/packages/shared/src/features/monetization/sponsorStrip/SponsorStrip.spec.tsx
+++ b/packages/shared/src/features/monetization/sponsorStrip/SponsorStrip.spec.tsx
@@ -5,7 +5,7 @@ import type { AuthContextData } from '../../../contexts/AuthContext';
 import AuthContext from '../../../contexts/AuthContext';
 import { getLogContextStatic } from '../../../contexts/LogContext';
 import type { LogContextData } from '../../../hooks/log/useLogContextData';
-import type { PostHighlight } from '../../../graphql/highlights';
+import type { StatuslineItem } from '../../../graphql/statusline';
 import { AdActions } from '../../../lib/ads';
 import { LogEvent } from '../../../lib/log';
 import { SponsorStrip } from './SponsorStrip';
@@ -21,7 +21,7 @@ jest.mock('../../../hooks/utils/useThemedAsset', () => ({
 }));
 
 const mockFetch = jest.mocked(fetchSponsorStripAds);
-let headlines: PostHighlight[] = [];
+let headlines: StatuslineItem[] = [];
 let headlinesSettled = true;
 
 const creative = (
@@ -38,12 +38,24 @@ const creative = (
   tier,
 });
 
-const headline = (id: string): PostHighlight => ({
+const headline = (id: string): StatuslineItem => ({
   id,
-  channel: 'agents',
-  headline: `Headline ${id}`,
+  kind: 'HEADLINE',
+  postId: `post-${id}`,
+  title: `Headline ${id}`,
+  upvotes: 0,
+  permalink: `https://daily.dev/posts/${id}`,
   highlightedAt: new Date().toISOString(),
-  post: { id: `post-${id}`, commentsPermalink: `https://daily.dev/p/${id}` },
+});
+
+const popular = (id: string, upvotes = 42): StatuslineItem => ({
+  id,
+  kind: 'POST',
+  postId: id,
+  title: `Post ${id}`,
+  upvotes,
+  permalink: `https://daily.dev/posts/${id}`,
+  highlightedAt: null,
 });
 
 const PREMIUM = ['p1', 'p2', 'p3', 'p4', 'p5', 'p6'];
@@ -144,7 +156,7 @@ afterEach(() => {
   document.documentElement.style.removeProperty('--sponsor-strip-height');
 });
 
-const setHeadlines = (next: PostHighlight[]) => {
+const setHeadlines = (next: StatuslineItem[]) => {
   headlines = next;
 };
 
@@ -235,16 +247,40 @@ it("should fire the ad server's impression pixel for a logo that carries one", a
   expect(pixels[0]).toHaveAttribute('src', 'https://api.daily.dev/px?id=gold');
 });
 
-it('should carry the breaking news the feed no longer shows', async () => {
-  setHeadlines([headline('h1'), headline('h2')]);
+it('should carry the statusline mix in the ticker', async () => {
+  setHeadlines([headline('h1'), popular('p1')]);
   renderStrip();
   await settle();
 
   const ticker = within(screen.getByTestId('sponsorStripHeadlines'));
 
-  expect(ticker.getByText('Breaking news')).toBeInTheDocument();
+  expect(ticker.getByText('Trending')).toBeInTheDocument();
   expect(ticker.getByText('Headline h1')).toBeInTheDocument();
-  expect(ticker.getByText('Headline h2')).toBeInTheDocument();
+  expect(ticker.getByText('Post p1')).toBeInTheDocument();
+});
+
+// Each kind carries the signal that means something for it, the way the
+// terminal statusline does.
+it('should show a timestamp for a headline and a score for a popular post', async () => {
+  setHeadlines([headline('h1'), popular('p1', 42)]);
+  renderStrip();
+  await settle();
+
+  const ticker = within(screen.getByTestId('sponsorStripHeadlines'));
+
+  expect(ticker.getByText('Now')).toBeInTheDocument();
+  expect(ticker.getByText('\u25b242')).toBeInTheDocument();
+});
+
+it('should leave a popular post with no score bare', async () => {
+  setHeadlines([popular('p1', 0)]);
+  renderStrip();
+  await settle();
+
+  const ticker = within(screen.getByTestId('sponsorStripHeadlines'));
+
+  expect(ticker.getByText('Post p1')).toBeInTheDocument();
+  expect(ticker.queryByText(/\u25b2/)).not.toBeInTheDocument();
 });
 
 it('should still carry the ticker when the ad server has no fill', async () => {
@@ -253,8 +289,8 @@ it('should still carry the ticker when the ad server has no fill', async () => {
   renderStrip();
   await settle();
 
-  // The feed's card is suppressed on the strip's behalf, so a strip with no
-  // sponsors must not also drop the headlines.
+  // The two rows are independent: no ad fill must not also cost the reader
+  // the ticker.
   expect(screen.getByTestId('sponsorStripHeadlines')).toBeInTheDocument();
   expect(screen.queryByTestId('sponsorStripRow')).not.toBeInTheDocument();
 });
diff --git a/packages/shared/src/features/monetization/sponsorStrip/SponsorStrip.tsx b/packages/shared/src/features/monetization/sponsorStrip/SponsorStrip.tsx
index 3bb31a19074..68ac70990b1 100644
--- a/packages/shared/src/features/monetization/sponsorStrip/SponsorStrip.tsx
+++ b/packages/shared/src/features/monetization/sponsorStrip/SponsorStrip.tsx
@@ -10,7 +10,7 @@ import {
 } from './sponsorLogoSizing';
 import { SponsorLogo } from './SponsorLogo';
 import { SponsorStripHeadlines } from './SponsorStripHeadlines';
-import type { PostHighlight } from '../../../graphql/highlights';
+import type { StatuslineItem } from '../../../graphql/statusline';
 import type { ResolvedSponsor } from './sponsorStripCreative';
 import {
   DOCK_CLASS,
@@ -33,7 +33,7 @@ interface SponsorStripProps {
    * decide whether it can give up its Happening Now card, and one query
    * cannot be allowed to answer that question two different ways.
    */
-  headlines: PostHighlight[];
+  headlines: StatuslineItem[];
   /** Whether that query has answered; see the row reservation below. */
   headlinesSettled: boolean;
 }
diff --git a/packages/shared/src/features/monetization/sponsorStrip/SponsorStripHeadlines.tsx b/packages/shared/src/features/monetization/sponsorStrip/SponsorStripHeadlines.tsx
index 6d3ce98e5d5..70abc65cae4 100644
--- a/packages/shared/src/features/monetization/sponsorStrip/SponsorStripHeadlines.tsx
+++ b/packages/shared/src/features/monetization/sponsorStrip/SponsorStripHeadlines.tsx
@@ -1,11 +1,10 @@
 import type { CSSProperties, ReactElement } from 'react';
 import React, { useCallback } from 'react';
 import classNames from 'classnames';
-import { getHighlightsUrl } from '../../../components/cards/highlight/common';
 import Link from '../../../components/utilities/Link';
 import { RelativeTime } from '../../../components/utilities/RelativeTime';
 import { useLogContext } from '../../../contexts/LogContext';
-import type { PostHighlight } from '../../../graphql/highlights';
+import type { StatuslineItem } from '../../../graphql/statusline';
 import useLogEventOnce from '../../../hooks/log/useLogEventOnce';
 import { feedHighlightsLogEvent } from '../../../lib/feed';
 import {
@@ -30,11 +29,47 @@ const fadeStyle: CSSProperties = {
     'linear-gradient(to right, black calc(100% - 2.5rem), transparent)',
 };
 
+/**
+ * The log builder reads a highlight-shaped object; a statusline item is the
+ * same four facts under different names.
+ */
+const toLoggedHighlight = (item: StatuslineItem) => ({
+  id: item.id,
+  headline: item.title,
+  post: { id: item.postId, commentsPermalink: item.permalink },
+});
+
+/**
+ * Each kind gets the signal that means something for it, the way the terminal
+ * statusline does: a curated headline is time-sensitive, so it carries how long
+ * ago it broke, while a popular post carries the score that got it into the row.
+ */
+const ItemSignal = ({
+  item,
+}: {
+  item: StatuslineItem;
+}): ReactElement | null => {
+  if (item.kind === 'HEADLINE' && item.highlightedAt) {
+    return (
+      <RelativeTime
+        dateTime={item.highlightedAt}
+        className="text-text-quaternary"
+      />
+    );
+  }
+
+  if (item.upvotes > 0) {
+    return <span className="text-text-quaternary">{`▲${item.upvotes}`}</span>;
+  }
+
+  return null;
+};
+
 export const SponsorStripHeadlines = ({
   headlines,
   widthStyle,
 }: {
-  headlines: PostHighlight[];
+  headlines: StatuslineItem[];
   widthStyle: CSSProperties;
 }): ReactElement => {
   const { logEvent } = useLogContext();
@@ -55,11 +90,11 @@ export const SponsorStripHeadlines = ({
   );
 
   const onHeadlineClick = useCallback(
-    (highlight: PostHighlight, position: number) =>
+    (item: StatuslineItem, position: number) =>
       logEvent(
         feedHighlightsLogEvent(LogEvent.Click, {
           feedName: HEADLINES_FEED_NAME,
-          clickedHighlight: highlight,
+          clickedHighlight: toLoggedHighlight(item),
           position,
           origin: Origin.Feed,
         }),
@@ -83,7 +118,7 @@ export const SponsorStripHeadlines = ({
             and a label losing a word to it costs nothing, where the row above
             it is the one somebody paid for. */}
           <span className="shrink-0 whitespace-nowrap text-text-quaternary typo-caption2">
-            Breaking news
+            Trending
           </span>
           {/* Scrollable rather than merely clipped: the row carries more than
             it can show, and a reader who wants the headline under the fade has
@@ -93,18 +128,15 @@ export const SponsorStripHeadlines = ({
             className="no-scrollbar flex min-w-0 flex-1 items-center gap-5 overflow-x-auto"
             style={fadeStyle}
           >
-            {headlines.map((highlight, index) => (
-              <Link href={getHighlightsUrl(highlight.id)} key={highlight.id}>
+            {headlines.map((item, index) => (
+              <Link href={item.permalink} key={item.id}>
                 <a
-                  href={getHighlightsUrl(highlight.id)}
-                  onClick={() => onHeadlineClick(highlight, index)}
+                  href={item.permalink}
+                  onClick={() => onHeadlineClick(item, index)}
                   className="flex shrink-0 items-center gap-1.5 whitespace-nowrap text-text-secondary typo-caption1 hover:text-text-primary"
                 >
-                  {highlight.headline}
-                  <RelativeTime
-                    dateTime={highlight.highlightedAt}
-                    className="text-text-quaternary"
-                  />
+                  {item.title}
+                  <ItemSignal item={item} />
                 </a>
               </Link>
             ))}
diff --git a/packages/shared/src/features/monetization/sponsorStrip/useSponsorStripFeed.spec.tsx b/packages/shared/src/features/monetization/sponsorStrip/useSponsorStripFeed.spec.tsx
index 194fd5ecbc4..dab23fff9e0 100644
--- a/packages/shared/src/features/monetization/sponsorStrip/useSponsorStripFeed.spec.tsx
+++ b/packages/shared/src/features/monetization/sponsorStrip/useSponsorStripFeed.spec.tsx
@@ -1,5 +1,5 @@
 import { renderHook } from '@testing-library/react';
-import type { PostHighlight } from '../../../graphql/highlights';
+import type { StatuslineItem } from '../../../graphql/statusline';
 import { useSponsorStrip } from './useSponsorStrip';
 import { useSponsorStripFeed } from './useSponsorStripFeed';
 import { useStripHeadlines } from './useStripHeadlines';
@@ -10,9 +10,9 @@ jest.mock('./useStripHeadlines', () => ({ useStripHeadlines: jest.fn() }));
 const mockStrip = jest.mocked(useSponsorStrip);
 const mockHeadlines = jest.mocked(useStripHeadlines);
 
-const headline = { id: 'h1' } as PostHighlight;
+const headline = { id: 'h1' } as StatuslineItem;
 
-const settled = (headlines: PostHighlight[]) => ({
+const settled = (headlines: StatuslineItem[]) => ({
   headlines,
   isSettled: true,
 });
diff --git a/packages/shared/src/features/monetization/sponsorStrip/useSponsorStripFeed.ts b/packages/shared/src/features/monetization/sponsorStrip/useSponsorStripFeed.ts
index e9d09df23e2..cc10d7b583e 100644
--- a/packages/shared/src/features/monetization/sponsorStrip/useSponsorStripFeed.ts
+++ b/packages/shared/src/features/monetization/sponsorStrip/useSponsorStripFeed.ts
@@ -1,4 +1,4 @@
-import type { PostHighlight } from '../../../graphql/highlights';
+import type { StatuslineItem } from '../../../graphql/statusline';
 import { useSponsorStrip } from './useSponsorStrip';
 import { useStripHeadlines } from './useStripHeadlines';
 
@@ -9,7 +9,7 @@ interface UseSponsorStripFeedProps {
 
 interface UseSponsorStripFeed {
   isEnabled: boolean;
-  headlines: PostHighlight[];
+  headlines: StatuslineItem[];
   /** Whether the headlines query has answered; the dock reserves until it has. */
   headlinesSettled: boolean;
 }
diff --git a/packages/shared/src/features/monetization/sponsorStrip/useStripHeadlines.spec.tsx b/packages/shared/src/features/monetization/sponsorStrip/useStripHeadlines.spec.tsx
index 7d6f1f3d7d1..e004de66a94 100644
--- a/packages/shared/src/features/monetization/sponsorStrip/useStripHeadlines.spec.tsx
+++ b/packages/shared/src/features/monetization/sponsorStrip/useStripHeadlines.spec.tsx
@@ -1,42 +1,49 @@
 import React from 'react';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import { renderHook, waitFor } from '@testing-library/react';
-import type { MajorHeadlinesData } from '../../../graphql/highlights';
-import { majorHeadlinesQueryOptions } from '../../../graphql/highlights';
+import type {
+  StatuslineFeedData,
+  StatuslineItem,
+} from '../../../graphql/statusline';
+import { statuslineFeedQueryOptions } from '../../../graphql/statusline';
 import { ONE_HOUR } from '../../../lib/time';
 import { useStripHeadlines } from './useStripHeadlines';
 
-jest.mock('../../../graphql/highlights', () => ({
-  ...(jest.requireActual('../../../graphql/highlights') as Record<
+jest.mock('../../../graphql/statusline', () => ({
+  ...(jest.requireActual('../../../graphql/statusline') as Record<
     string,
     unknown
   >),
-  majorHeadlinesQueryOptions: jest.fn(),
+  statuslineFeedQueryOptions: jest.fn(),
 }));
 
-const mockQueryOptions = jest.mocked(majorHeadlinesQueryOptions);
+const mockQueryOptions = jest.mocked(statuslineFeedQueryOptions);
 
-const headline = (id: string, ageMs = 0) => ({
-  node: {
-    id,
-    channel: 'agents',
-    headline: `Headline ${id}`,
-    highlightedAt: new Date(Date.now() - ageMs).toISOString(),
-    post: { id: `post-${id}`, commentsPermalink: `https://daily.dev/p/${id}` },
-  },
+const headline = (id: string, ageMs = 0): StatuslineItem => ({
+  id,
+  kind: 'HEADLINE',
+  postId: `post-${id}`,
+  title: `Headline ${id}`,
+  upvotes: 0,
+  permalink: `https://daily.dev/posts/${id}`,
+  highlightedAt: new Date(Date.now() - ageMs).toISOString(),
 });
 
-const setHeadlines = (edges: ReturnType<typeof headline>[]) =>
+const post = (id: string, upvotes = 10): StatuslineItem => ({
+  id,
+  kind: 'POST',
+  postId: id,
+  title: `Post ${id}`,
+  upvotes,
+  permalink: `https://daily.dev/posts/${id}`,
+  highlightedAt: null,
+});
+
+const setItems = (statuslineFeed: StatuslineItem[]) =>
   mockQueryOptions.mockReturnValue({
-    queryKey: ['major-headlines', edges.length],
-    queryFn: async () =>
-      ({
-        majorHeadlines: {
-          pageInfo: { hasNextPage: false, endCursor: '' },
-          edges,
-        },
-      } as MajorHeadlinesData),
-  } as ReturnType<typeof majorHeadlinesQueryOptions>);
+    queryKey: ['statusline-feed', statuslineFeed.length],
+    queryFn: async () => ({ statuslineFeed } as StatuslineFeedData),
+  } as ReturnType<typeof statuslineFeedQueryOptions>);
 
 const render = () => {
   const client = new QueryClient({
@@ -54,23 +61,24 @@ beforeEach(() => {
   jest.clearAllMocks();
 });
 
-it('should carry the headlines the API returned', async () => {
-  setHeadlines([headline('h1'), headline('h2')]);
+it('should carry the mix the API returned', async () => {
+  setItems([headline('h1'), post('p1'), headline('h2')]);
   const { result } = render();
 
   await waitFor(() =>
-    expect(result.current.headlines.map(({ id }) => id)).toEqual(['h1', 'h2']),
+    expect(result.current.headlines.map(({ id }) => id)).toEqual([
+      'h1',
+      'p1',
+      'h2',
+    ]),
   );
 });
 
-// The row stands in for the feed's Happening Now card, which applies no age
-// filter of its own — a stale-only day must still fill the ticker rather than
+// Which headlines still count as major, and which posts count as popular, is
+// the backend's call — a stale-only day must still fill the ticker rather than
 // silently dropping the dock to one row.
-it('should carry headlines the backend still serves however old they are', async () => {
-  setHeadlines([
-    headline('old', 36 * ONE_HOUR),
-    headline('older', 92 * ONE_HOUR),
-  ]);
+it('should carry items the backend still serves however old they are', async () => {
+  setItems([headline('old', 36 * ONE_HOUR), headline('older', 92 * ONE_HOUR)]);
   const { result } = render();
 
   await waitFor(() =>
@@ -82,9 +90,9 @@ it('should carry headlines the backend still serves however old they are', async
 });
 
 it('should keep the order the API returned rather than resorting', async () => {
-  setHeadlines([
+  setItems([
     headline('newest'),
-    headline('middle', 40 * ONE_HOUR),
+    post('popular', 400),
     headline('oldest', 90 * ONE_HOUR),
   ]);
   const { result } = render();
@@ -92,14 +100,14 @@ it('should keep the order the API returned rather than resorting', async () => {
   await waitFor(() =>
     expect(result.current.headlines.map(({ id }) => id)).toEqual([
       'newest',
-      'middle',
+      'popular',
       'oldest',
     ]),
   );
 });
 
-it('should leave the row empty when the API has no headlines at all', async () => {
-  setHeadlines([]);
+it('should leave the row empty when the API has nothing at all', async () => {
+  setItems([]);
   const { result } = render();
 
   await waitFor(() => expect(mockQueryOptions).toHaveBeenCalled());
@@ -107,7 +115,7 @@ it('should leave the row empty when the API has no headlines at all', async () =
 });
 
 it('should not query at all while the strip is off', async () => {
-  setHeadlines([headline('h1')]);
+  setItems([headline('h1')]);
   const client = new QueryClient({
     defaultOptions: { queries: { retry: false } },
   });
@@ -121,15 +129,15 @@ it('should not query at all while the strip is off', async () => {
 });
 
 it('should report settled only once the query has answered', async () => {
-  setHeadlines([headline('h1')]);
+  setItems([headline('h1')]);
   const { result } = render();
 
   expect(result.current.isSettled).toBe(false);
   await waitFor(() => expect(result.current.isSettled).toBe(true));
 });
 
-it('should count as settled while the strip is off so the feed keeps its card', () => {
-  setHeadlines([headline('h1')]);
+it('should count as settled while the strip is off so the dock reserves nothing', () => {
+  setItems([headline('h1')]);
   const client = new QueryClient({
     defaultOptions: { queries: { retry: false } },
   });
diff --git a/packages/shared/src/features/monetization/sponsorStrip/useStripHeadlines.ts b/packages/shared/src/features/monetization/sponsorStrip/useStripHeadlines.ts
index 104d24c237c..c98bc06fcc0 100644
--- a/packages/shared/src/features/monetization/sponsorStrip/useStripHeadlines.ts
+++ b/packages/shared/src/features/monetization/sponsorStrip/useStripHeadlines.ts
@@ -1,39 +1,35 @@
 import { useQuery } from '@tanstack/react-query';
-import type { PostHighlight } from '../../../graphql/highlights';
-import { majorHeadlinesQueryOptions } from '../../../graphql/highlights';
+import type { StatuslineItem } from '../../../graphql/statusline';
+import { statuslineFeedQueryOptions } from '../../../graphql/statusline';
 import { ONE_MINUTE } from '../../../lib/time';
 
 const HEADLINE_LIMIT = 12;
 
 interface StripHeadlines {
-  headlines: PostHighlight[];
+  headlines: StatuslineItem[];
   /**
-   * Whether the query has answered. The feed has to decide about its own
-   * Happening Now card before the answer lands, and cannot wait for it.
+   * Whether the query has answered. The dock reserves the row's height until
+   * it has, rather than popping a second row in after the feed has painted.
    */
   isSettled: boolean;
 }
 
 /**
- * The headlines the strip carries. Same `majorHeadlines` field the /highlights
- * page and the post-page widget read, and the same query document as the
- * widget — the strip is a third view of one set of headlines, not a new source
- * of them. /highlights wraps the field in its own document only because its
- * cards need the post bodies, which cost 147KB at its page size and would put
- * all of it on the feed for four fields this row renders.
+ * The items the ticker carries: the same `statuslineFeed` mix the Claude Code
+ * statusline renders as terminal lines — curated major headlines interleaved
+ * with the most-upvoted posts of the day, deduped. One resolver and one cache
+ * sit behind both, so the terminal and the web can never disagree about what
+ * is worth showing; they differ only in how they draw it.
  *
- * No client-side freshness filter, because the row stands in for the feed's
- * Happening Now card and has to behave like it: that card renders whatever the
- * backend serves it, and so does /highlights. Deciding what still counts as a
- * major headline is the backend's call, and a second opinion held only by this
- * row emptied it on any day `majorHeadlines` went quiet — which it routinely
- * does for 36 hours or more — dropping the dock from two rows to one for no
- * reason the reader could see. The API already returns newest first, and every
- * row renders its own relative timestamp.
+ * No client-side freshness filter. Which headlines still count as major, and
+ * which posts count as popular, is the backend's call — a second opinion held
+ * only by this row emptied it on any day the curated set went quiet, dropping
+ * the dock from two rows to one for no reason the reader could see. The API
+ * already returns the mix in the order it wants shown.
  */
 export const useStripHeadlines = (enabled: boolean): StripHeadlines => {
   const { data, isPending } = useQuery({
-    ...majorHeadlinesQueryOptions({ first: HEADLINE_LIMIT }),
+    ...statuslineFeedQueryOptions({ first: HEADLINE_LIMIT }),
     enabled,
     refetchInterval: ONE_MINUTE,
   });
@@ -43,7 +39,7 @@ export const useStripHeadlines = (enabled: boolean): StripHeadlines => {
   }
 
   return {
-    headlines: (data?.majorHeadlines?.edges ?? []).map(({ node }) => node),
+    headlines: data?.statuslineFeed ?? [],
     isSettled: !isPending,
   };
 };
diff --git a/packages/shared/src/graphql/statusline.ts b/packages/shared/src/graphql/statusline.ts
new file mode 100644
index 00000000000..f6dc4524508
--- /dev/null
+++ b/packages/shared/src/graphql/statusline.ts
@@ -0,0 +1,55 @@
+import { gql } from 'graphql-request';
+import { gqlClient } from './common';
+import { ONE_MINUTE } from '../lib/time';
+
+/**
+ * Where a statusline item came from: a curated major headline, or a post off
+ * the popular feed. Headlines are the only kind with an editorial timestamp.
+ */
+export type StatuslineItemKind = 'HEADLINE' | 'POST';
+
+export interface StatuslineItem {
+  /** Highlight id for a HEADLINE, post id for a POST. Stable to key a list on. */
+  id: string;
+  kind: StatuslineItemKind;
+  postId: string;
+  title: string;
+  upvotes: number;
+  permalink: string;
+  /** Set only on headlines — a popular post has no editorial timestamp. */
+  highlightedAt: string | null;
+}
+
+export interface StatuslineFeedData {
+  statuslineFeed: StatuslineItem[];
+}
+
+export const STATUSLINE_FEED_QUERY = gql`
+  query StatuslineFeed($first: Int) {
+    statuslineFeed(first: $first) {
+      id
+      kind
+      postId
+      title
+      upvotes
+      permalink
+      highlightedAt
+    }
+  }
+`;
+
+/**
+ * The curated-headlines-plus-popular mix the Claude Code statusline renders as
+ * terminal lines, as data. One resolver and one cache serve both, so the
+ * terminal and the web cannot drift apart on what they are showing.
+ */
+export const statuslineFeedQueryOptions = ({
+  first,
+}: {
+  first?: number;
+} = {}) => ({
+  queryKey: ['statusline-feed', first ?? 0],
+  queryFn: () =>
+    gqlClient.request<StatuslineFeedData>(STATUSLINE_FEED_QUERY, { first }),
+  staleTime: ONE_MINUTE,
+});
diff --git a/packages/shared/src/lib/feed.ts b/packages/shared/src/lib/feed.ts
index 2ce7f613936..029250190f3 100644
--- a/packages/shared/src/lib/feed.ts
+++ b/packages/shared/src/lib/feed.ts
@@ -185,7 +185,15 @@ interface FeedHighlightsLogEventOptions extends FeedItemPosition {
   ranking?: string;
   action?: string;
   count?: number;
-  clickedHighlight?: PostHighlight;
+  /**
+   * Only the fields this builder actually reads, rather than a whole
+   * `PostHighlight`: the sponsor-strip ticker carries `statuslineFeed` items,
+   * which have no channel or editorial timestamp to hand over. Every caller
+   * passing a full highlight still satisfies it.
+   */
+  clickedHighlight?: Pick<PostHighlight, 'id' | 'headline'> & {
+    post: Pick<PostHighlight['post'], 'id' | 'commentsPermalink'>;
+  };
   highlightIds?: string[];
   feedMeta?: string | null;
   position?: number;

From 1d594ebccafc14379879fe4f685dbb3e59620e97 Mon Sep 17 00:00:00 2001
From: Chris Bongers <chrisbongers@gmail.com>
Date: Wed, 9 Sep 2026 14:46:39 +0200
Subject: [PATCH 17/20] fix(monetization): address review on the ticker and the
 ad fixture
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Analytics (blocking). `id` is a highlight id for a HEADLINE and a post id
for a POST, so writing both into `highlight_ids` / `clicked_highlight_id`
handed one field two key spaces — anything joining it against the
highlights table would mis-join the popular half rather than fail. The
two are now split: `highlight_ids` carries only highlights, `post_ids`
carries the rest, `clicked_highlight_id` is written only for a real
highlight, and every ticker event carries `kind`. Reusing
`HighlightsCard` as the target type for a row that is no longer only
highlights is still worth Ido's call, alongside `air time`.

Headline destination. Curated headlines go back to `/highlights` rather
than the post page, so the reader lands in the same curated context the
Happening Now card leads to; only popular posts go straight to
discussion. This also stops `feed_item_target_url` disagreeing with the
/highlights surface for the same highlight.

Ad fixture (blocking). `fetchSponsorStripAds` returns `[]` outside
development, so ramping the flag cannot put fabricated sponsorships in
front of a reader — the guard is structural rather than a note in a
comment. Every mark is now a generated placeholder for a fictitious
company: no real company is named in the paid slot, no third party's
lockup is hand-transcribed or recoloured, and nothing is hotlinked off
business.daily.dev. Masking, the themed pair and optical sizing are
exercised identically.

Also: `refetchInterval` and `staleTime` matched to the resolver's
five-minute Redis TTL, where a one-minute poll returned an identical
payload four times in five; `ItemSignal` keyed on kind, so a headline
served without a timestamp no longer falls through to an upvote count;
stale `SponsorStrip` comment dropped after the revert; comment density
trimmed per root AGENTS.md.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
---
 .../sponsorStrip/SponsorStrip.spec.tsx        |  72 ++++++-
 .../sponsorStrip/SponsorStrip.tsx             |   5 +-
 .../sponsorStrip/SponsorStripHeadlines.tsx    |  96 +++++----
 .../sponsorStrip/mockSponsorStripAds.ts       | 199 +++++++-----------
 .../sponsorStrip/useStripHeadlines.ts         |  24 +--
 packages/shared/src/graphql/statusline.ts     |  14 +-
 packages/shared/src/lib/feed.ts               |  45 ++--
 7 files changed, 247 insertions(+), 208 deletions(-)

diff --git a/packages/shared/src/features/monetization/sponsorStrip/SponsorStrip.spec.tsx b/packages/shared/src/features/monetization/sponsorStrip/SponsorStrip.spec.tsx
index 14f5a2a97b5..9ab8948013c 100644
--- a/packages/shared/src/features/monetization/sponsorStrip/SponsorStrip.spec.tsx
+++ b/packages/shared/src/features/monetization/sponsorStrip/SponsorStrip.spec.tsx
@@ -303,20 +303,82 @@ it('should render nothing when it has neither sponsors nor headlines', async ()
   expect(screen.queryByTestId('sponsorStrip')).not.toBeInTheDocument();
 });
 
-it('should log a click on a headline with the headline that was clicked', async () => {
+const tickerClicks = () =>
+  logEvent.mock.calls.filter(
+    ([event]) =>
+      (event as { event_name: string }).event_name === LogEvent.Click,
+  );
+
+it('should log a click on a headline with the highlight that was clicked', async () => {
   setHeadlines([headline('h1'), headline('h2')]);
   renderStrip();
   await settle();
 
   fireEvent.click(screen.getByText('Headline h2'));
 
-  const clicks = logEvent.mock.calls.filter(
+  expect(extraOf(tickerClicks()[0])).toEqual(
+    expect.objectContaining({
+      kind: 'HEADLINE',
+      clicked_highlight_id: 'h2',
+      position: 1,
+    }),
+  );
+});
+
+// `id` is a highlight id for a headline and a post id for a popular post, so a
+// post must never be written into `clicked_highlight_id` — anything joining
+// that field against the highlights table would mis-join on the popular half.
+it('should log a click on a popular post without a highlight id', async () => {
+  setHeadlines([headline('h1'), popular('p1')]);
+  renderStrip();
+  await settle();
+
+  fireEvent.click(screen.getByText('Post p1'));
+
+  const extra = extraOf(tickerClicks()[0]);
+
+  expect(extra).toEqual(
+    expect.objectContaining({ kind: 'POST', post_id: 'p1', position: 1 }),
+  );
+  expect(extra).not.toHaveProperty('clicked_highlight_id');
+});
+
+it('should split the two id spaces on the impression', async () => {
+  setHeadlines([headline('h1'), popular('p1'), headline('h2')]);
+  renderStrip();
+  await settle();
+
+  const impression = logEvent.mock.calls.find(
     ([event]) =>
-      (event as { event_name: string }).event_name === LogEvent.Click,
+      (event as { event_name: string }).event_name === LogEvent.Impression &&
+      extraOf([event]).feed === 'sponsor-strip-headlines',
   );
 
-  expect(extraOf(clicks[0])).toEqual(
-    expect.objectContaining({ clicked_highlight_id: 'h2', position: 1 }),
+  expect(extraOf(impression)).toEqual(
+    expect.objectContaining({
+      highlight_ids: ['h1', 'h2'],
+      post_ids: ['p1'],
+      count: 3,
+    }),
+  );
+});
+
+// A curated headline keeps the /highlights destination the Happening Now card
+// leads to; only a popular post goes straight to its discussion page.
+it('should send a headline to /highlights and a post to its permalink', async () => {
+  setHeadlines([headline('h1'), popular('p1')]);
+  renderStrip();
+  await settle();
+
+  const ticker = within(screen.getByTestId('sponsorStripHeadlines'));
+
+  expect(ticker.getByText('Headline h1').closest('a')).toHaveAttribute(
+    'href',
+    expect.stringContaining('highlight=h1'),
+  );
+  expect(ticker.getByText('Post p1').closest('a')).toHaveAttribute(
+    'href',
+    'https://daily.dev/posts/p1',
   );
 });
 
diff --git a/packages/shared/src/features/monetization/sponsorStrip/SponsorStrip.tsx b/packages/shared/src/features/monetization/sponsorStrip/SponsorStrip.tsx
index 68ac70990b1..847c46f2706 100644
--- a/packages/shared/src/features/monetization/sponsorStrip/SponsorStrip.tsx
+++ b/packages/shared/src/features/monetization/sponsorStrip/SponsorStrip.tsx
@@ -29,9 +29,8 @@ import FeedContext from '../../../contexts/FeedContext';
 
 interface SponsorStripProps {
   /**
-   * Passed in rather than queried here: the feed layout needs the same list to
-   * decide whether it can give up its Happening Now card, and one query
-   * cannot be allowed to answer that question two different ways.
+   * Passed in rather than queried here so the dock can reserve the ticker's
+   * height off one query rather than racing a second one.
    */
   headlines: StatuslineItem[];
   /** Whether that query has answered; see the row reservation below. */
diff --git a/packages/shared/src/features/monetization/sponsorStrip/SponsorStripHeadlines.tsx b/packages/shared/src/features/monetization/sponsorStrip/SponsorStripHeadlines.tsx
index 70abc65cae4..1db3472519d 100644
--- a/packages/shared/src/features/monetization/sponsorStrip/SponsorStripHeadlines.tsx
+++ b/packages/shared/src/features/monetization/sponsorStrip/SponsorStripHeadlines.tsx
@@ -1,6 +1,7 @@
 import type { CSSProperties, ReactElement } from 'react';
 import React, { useCallback } from 'react';
 import classNames from 'classnames';
+import { getHighlightsUrl } from '../../../components/cards/highlight/common';
 import Link from '../../../components/utilities/Link';
 import { RelativeTime } from '../../../components/utilities/RelativeTime';
 import { useLogContext } from '../../../contexts/LogContext';
@@ -16,6 +17,16 @@ import { LogEvent, Origin } from '../../../lib/log';
 
 const HEADLINES_FEED_NAME = 'sponsor-strip-headlines';
 
+const isHeadline = (item: StatuslineItem) => item.kind === 'HEADLINE';
+
+/**
+ * A curated headline keeps the `/highlights` destination the Happening Now card
+ * leads to, so the reader lands in the same curated context from either. Only a
+ * popular post goes straight to its discussion page.
+ */
+const destinationOf = (item: StatuslineItem): string =>
+  isHeadline(item) ? getHighlightsUrl(item.id) : item.permalink;
+
 /**
  * The row carries more than fits on purpose: it should read as a ticker
  * continuing past the edge, not a list that happens to end. The fade is what
@@ -29,40 +40,26 @@ const fadeStyle: CSSProperties = {
     'linear-gradient(to right, black calc(100% - 2.5rem), transparent)',
 };
 
-/**
- * The log builder reads a highlight-shaped object; a statusline item is the
- * same four facts under different names.
- */
-const toLoggedHighlight = (item: StatuslineItem) => ({
-  id: item.id,
-  headline: item.title,
-  post: { id: item.postId, commentsPermalink: item.permalink },
-});
-
-/**
- * Each kind gets the signal that means something for it, the way the terminal
- * statusline does: a curated headline is time-sensitive, so it carries how long
- * ago it broke, while a popular post carries the score that got it into the row.
- */
 const ItemSignal = ({
   item,
 }: {
   item: StatuslineItem;
 }): ReactElement | null => {
-  if (item.kind === 'HEADLINE' && item.highlightedAt) {
-    return (
+  // Keyed on kind rather than on the timestamp being present, so a headline
+  // served without one stays bare instead of falling through to an upvote
+  // count it was never meant to show.
+  if (isHeadline(item)) {
+    return item.highlightedAt ? (
       <RelativeTime
         dateTime={item.highlightedAt}
         className="text-text-quaternary"
       />
-    );
+    ) : null;
   }
 
-  if (item.upvotes > 0) {
-    return <span className="text-text-quaternary">{`▲${item.upvotes}`}</span>;
-  }
-
-  return null;
+  return item.upvotes > 0 ? (
+    <span className="text-text-quaternary">{`▲${item.upvotes}`}</span>
+  ) : null;
 };
 
 export const SponsorStripHeadlines = ({
@@ -83,7 +80,13 @@ export const SponsorStripHeadlines = ({
         feedName: HEADLINES_FEED_NAME,
         action: 'impression',
         count: headlines.length,
-        highlightIds: headlines.map(({ id }) => id),
+        // Split by kind: `id` is a highlight id for a headline and a post id
+        // for a popular post, so merging them would hand one field two key
+        // spaces and silently mis-join against the highlights table.
+        highlightIds: headlines.filter(isHeadline).map(({ id }) => id),
+        postIds: headlines
+          .filter((item) => !isHeadline(item))
+          .map(({ id }) => id),
         origin: Origin.Feed,
       }),
     { condition: !!headlines.length },
@@ -94,7 +97,22 @@ export const SponsorStripHeadlines = ({
       logEvent(
         feedHighlightsLogEvent(LogEvent.Click, {
           feedName: HEADLINES_FEED_NAME,
-          clickedHighlight: toLoggedHighlight(item),
+          kind: item.kind,
+          ...(isHeadline(item)
+            ? {
+                clickedHighlight: {
+                  id: item.id,
+                  headline: item.title,
+                  post: { id: item.postId, commentsPermalink: item.permalink },
+                },
+              }
+            : {
+                clickedPost: {
+                  id: item.postId,
+                  title: item.title,
+                  permalink: item.permalink,
+                },
+              }),
           position,
           origin: Origin.Feed,
         }),
@@ -128,18 +146,22 @@ export const SponsorStripHeadlines = ({
             className="no-scrollbar flex min-w-0 flex-1 items-center gap-5 overflow-x-auto"
             style={fadeStyle}
           >
-            {headlines.map((item, index) => (
-              <Link href={item.permalink} key={item.id}>
-                <a
-                  href={item.permalink}
-                  onClick={() => onHeadlineClick(item, index)}
-                  className="flex shrink-0 items-center gap-1.5 whitespace-nowrap text-text-secondary typo-caption1 hover:text-text-primary"
-                >
-                  {item.title}
-                  <ItemSignal item={item} />
-                </a>
-              </Link>
-            ))}
+            {headlines.map((item, index) => {
+              const href = destinationOf(item);
+
+              return (
+                <Link href={href} key={item.id}>
+                  <a
+                    href={href}
+                    onClick={() => onHeadlineClick(item, index)}
+                    className="flex shrink-0 items-center gap-1.5 whitespace-nowrap text-text-secondary typo-caption1 hover:text-text-primary"
+                  >
+                    {item.title}
+                    <ItemSignal item={item} />
+                  </a>
+                </Link>
+              );
+            })}
           </div>
         </div>
       </div>
diff --git a/packages/shared/src/features/monetization/sponsorStrip/mockSponsorStripAds.ts b/packages/shared/src/features/monetization/sponsorStrip/mockSponsorStripAds.ts
index 1a297f901c7..29c76868fe2 100644
--- a/packages/shared/src/features/monetization/sponsorStrip/mockSponsorStripAds.ts
+++ b/packages/shared/src/features/monetization/sponsorStrip/mockSponsorStripAds.ts
@@ -1,3 +1,4 @@
+import { isDevelopment } from '../../../lib/constants';
 import { SponsorTier } from './sponsorStripCreative';
 
 /**
@@ -9,144 +10,100 @@ import { SponsorTier } from './sponsorStripCreative';
  * The payload below is the wire shape `sponsorStripCreativeSchema` parses, so
  * the response drops in without touching anything downstream.
  *
- * PLACEHOLDER DATA — not a sponsorship and not an ad server. The wall marks
- * are advertiser logos already published on business.daily.dev, borrowed so
- * the row can be judged at the weight and spacing real assets give it. The
- * gold slot carries Google Cloud, per the design mockup, drawn from the
- * lockup their own site serves. It is still a fixture: nothing here says a
- * gold slot has been sold, and the "Made possible by" label claims more than
- * a display campaign does, so this stays behind the experiment flag until the
- * slot is actually sold.
- *
- * One mark is deliberately absent: business.daily.dev serves GitLab's logo as
- * a base64 WebP wrapped in an `<svg>`, and a raster has no alpha shape to mask
- * — it silhouettes into a solid block. It is the clearest example of why real
- * inventory needs an asset spec, and it is left out rather than papered over.
- *
- * `pixel` is empty throughout. A fixture that pinged the ad server with
- * invented generation ids would put junk impressions in real reporting; the
- * pixel path is covered by the specs instead.
+ * Every mark is a generated placeholder for a fictitious company, and the guard
+ * at the bottom returns nothing outside development. Both are deliberate: the
+ * row is labelled "Made possible by" and fires real impression, viewable
+ * impression, air time and click events, so a real company's mark here would
+ * claim a sponsorship that does not exist — and ramping the flag, which is the
+ * whole point of it being a flag, would ship that claim. Placeholders exercise
+ * the masking, the themed pair and the optical sizing identically.
+ */
+
+/**
+ * Marks are generated rather than fetched so the fixture pulls nothing from a
+ * third party, and so `logo_ratio` is exact by construction rather than
+ * measured off someone else's file.
  */
+const placeholderMark = (label: string, ratio: number, ink: string): string => {
+  const height = 40;
+  const width = Math.round(height * ratio);
+  const svg =
+    `<svg xmlns="http://www.w3.org/2000/svg" width="${width}" height="${height}" viewBox="0 0 ${width} ${height}">` +
+    `<rect x="0" y="8" width="24" height="24" rx="6" fill="${ink}"/>` +
+    `<text x="32" y="28" font-family="sans-serif" font-size="20" font-weight="700" fill="${ink}">${label}</text>` +
+    `</svg>`;
 
-const LOGO_BASE = 'https://business.daily.dev/assets/company-logos';
+  return `data:image/svg+xml,${encodeURIComponent(svg)}`;
+};
 
-const wallSponsor = (
-  company: string,
-  file: string,
-  ratio: number,
-  tier: SponsorTier,
-) => ({
-  gen_id: `mock-${file}`,
+const slugOf = (company: string) =>
+  company.toLowerCase().replace(/[^a-z0-9]+/g, '-');
+
+const wallSponsor = (company: string, ratio: number, tier: SponsorTier) => ({
+  gen_id: `mock-${slugOf(company)}`,
   company,
-  // The same file for both themes: the wall silhouettes its marks through a
-  // mask that takes the row's text colour, so one asset serves either ground.
-  // Real creatives are expected to carry a themed pair — see the gold slot,
-  // which cannot be masked because its colour is the point.
+  // The same asset for both themes: the wall silhouettes its marks through a
+  // mask that takes the row's text colour, so one serves either ground. Real
+  // creatives are expected to carry a themed pair — see the gold slot, which
+  // cannot be masked because its colour is the point.
   logo_img: {
-    light: `${LOGO_BASE}/${file}.svg`,
-    dark: `${LOGO_BASE}/${file}.svg`,
+    light: placeholderMark(company, ratio, '#000000'),
+    dark: placeholderMark(company, ratio, '#000000'),
   },
   logo_ratio: ratio,
-  link: `https://daily.dev/?utm_source=sponsor_strip&sponsor=${file}`,
+  link: `https://daily.dev/?utm_source=sponsor_strip&sponsor=${slugOf(
+    company,
+  )}`,
   pixel: [] as string[],
   tier,
 });
 
-/**
- * The gold slot's artwork: Google Cloud's own lockup, taken from the file
- * their site serves (gstatic.com/cgc/google-cloud-logo-fullcolor.svg) — the
- * four-ink Google wordmark followed by "Cloud", and no cloud symbol. The
- * symbol lockup is an older mark they no longer lead with, and the inks here
- * are their refreshed palette, brighter than the classic four.
- */
-const GOOGLE_WORDMARK = [
-  // G
-  {
-    ink: '#3186FF',
-    d: 'M7.666 15.529c-1.423-.014-2.721-.367-3.895-1.058a7.659 7.659 0 0 1-2.766-2.832C.335 10.449 0 9.142 0 7.718c0-1.446.335-2.756 1.005-3.932a7.292 7.292 0 0 1 2.766-2.77C4.945.34 6.25 0 7.687 0c1.119 0 2.144.187 3.077.56a6.008 6.008 0 0 1 2.382 1.722L11.644 3.86c-.587-.602-1.191-1.034-1.813-1.297-.614-.263-1.319-.394-2.113-.394-1.008 0-1.92.228-2.735.685a4.987 4.987 0 0 0-1.937 1.96c-.47.844-.705 1.822-.705 2.936 0 1.086.235 2.057.705 2.915a5.136 5.136 0 0 0 1.927 1.991c.815.478 1.73.716 2.745.716.905 0 1.713-.159 2.424-.477a4.146 4.146 0 0 0 1.74-1.452c.442-.643.708-1.425.798-2.345H7.635V6.95h7.19c.069.457.103.871.103 1.245 0 1.452-.3 2.739-.901 3.859a6.31 6.31 0 0 1-2.559 2.583c-1.098.608-2.365.906-3.802.892z',
-  },
-  // o
-  {
-    ink: '#FC413D',
-    d: 'M21.588 15.53c-1.064 0-2.02-.246-2.87-.737a5.249 5.249 0 0 1-1.978-2.023c-.47-.864-.705-1.836-.705-2.915 0-1.106.242-2.085.725-2.935a5.175 5.175 0 0 1 2-1.992c.842-.47 1.785-.705 2.828-.705 1.057 0 2.006.238 2.849.715a5.156 5.156 0 0 1 2 2.002c.483.858.724 1.83.724 2.915 0 1.08-.238 2.05-.715 2.915a5.208 5.208 0 0 1-1.989 2.033c-.842.484-1.799.726-2.87.726zm0-1.971c.656 0 1.236-.163 1.74-.488a3.308 3.308 0 0 0 1.181-1.338 4.144 4.144 0 0 0 .425-1.878c0-.677-.142-1.293-.425-1.846a3.235 3.235 0 0 0-1.18-1.328 3.174 3.174 0 0 0-1.741-.487c-.608 0-1.167.155-1.678.466a3.38 3.38 0 0 0-1.223 1.307c-.297.554-.445 1.183-.445 1.888 0 .678.138 1.3.414 1.868.283.56.677 1.006 1.181 1.338.511.332 1.095.498 1.75.498z',
-  },
-  // o
-  {
-    ink: '#FFBE00',
-    d: 'M33.637 15.53c-1.064 0-2.02-.246-2.87-.737a5.25 5.25 0 0 1-1.979-2.023c-.47-.864-.704-1.836-.704-2.915 0-1.106.242-2.085.725-2.935a5.173 5.173 0 0 1 2-1.992c.842-.47 1.785-.705 2.828-.705 1.056 0 2.006.238 2.849.715a5.155 5.155 0 0 1 1.999 2.002c.483.858.725 1.83.725 2.915 0 1.08-.238 2.05-.715 2.915a5.21 5.21 0 0 1-1.989 2.033c-.842.484-1.799.726-2.87.726zm0-1.971c.656 0 1.236-.163 1.74-.488a3.309 3.309 0 0 0 1.181-1.338 4.143 4.143 0 0 0 .425-1.878c0-.677-.142-1.293-.425-1.846a3.236 3.236 0 0 0-1.18-1.328 3.174 3.174 0 0 0-1.741-.487c-.608 0-1.168.155-1.678.466a3.381 3.381 0 0 0-1.223 1.307c-.297.554-.445 1.183-.445 1.888 0 .678.138 1.3.414 1.868.283.56.677 1.006 1.18 1.338.512.332 1.096.498 1.752.498z',
-  },
-  // g
-  {
-    ink: '#3186FF',
-    d: 'M45.376 20c-1.188 0-2.169-.25-2.942-.747-.767-.498-1.406-1.29-1.917-2.376l1.948-.86c.324.615.718 1.096 1.18 1.441.463.353 1.03.53 1.7.53 1.022 0 1.799-.298 2.33-.893.54-.595.809-1.424.809-2.49v-.964h-.073c-.166.249-.4.501-.704.757a4.33 4.33 0 0 1-1.12.643 3.95 3.95 0 0 1-1.45.26c-1.043 0-1.947-.232-2.714-.696a4.575 4.575 0 0 1-1.761-1.929c-.407-.83-.611-1.78-.611-2.852 0-1.059.203-2.006.611-2.843.407-.843.988-1.504 1.74-1.981.76-.477 1.644-.716 2.652-.716.719 0 1.378.142 1.98.425.6.284 1.07.689 1.408 1.214h.041V4.606h2.155v9.356c0 4.025-1.754 6.038-5.262 6.038zm0-6.753c.635 0 1.188-.149 1.657-.446.47-.298.829-.71 1.078-1.235.248-.532.373-1.137.373-1.815 0-.692-.125-1.297-.373-1.815a2.754 2.754 0 0 0-1.078-1.214c-.47-.284-1.019-.425-1.647-.425-.615 0-1.157.145-1.627.435-.47.284-.835.688-1.098 1.214-.262.526-.393 1.13-.393 1.815 0 .72.131 1.342.393 1.868.27.525.64.926 1.109 1.203.47.276 1.005.415 1.606.415z',
-  },
-  // l
-  { ink: '#00AF57', d: 'M52.307 15.187V.332h2.258v14.855h-2.258z' },
-  // e
-  {
-    ink: '#FC413D',
-    d: 'M61.233 15.508c-1.588 0-2.904-.512-3.947-1.535-1.035-1.024-1.554-2.372-1.554-4.046 0-1.639.501-2.987 1.503-4.045 1.008-1.065 2.324-1.598 3.947-1.598 1.063 0 1.982.273 2.755.82.78.546 1.395 1.4 1.844 2.562a4.488 4.488 0 0 1 .207.788l-8.494 3.61-.59-1.712 7.033-2.987-.197.944c-.262-.74-.628-1.276-1.098-1.608a2.587 2.587 0 0 0-1.543-.498c-.967 0-1.737.332-2.31.996-.574.657-.86 1.521-.86 2.593 0 1.01.331 1.871.994 2.583.663.713 1.468 1.069 2.414 1.069.566 0 1.095-.142 1.585-.426.49-.283.919-.68 1.285-1.193l1.678 1.1a5.4 5.4 0 0 1-1.927 1.878c-.815.47-1.723.705-2.725.705z',
-  },
-];
-
-/**
- * "Cloud" ships as #212226 — near-black, and it all but disappears against
- * the dark feed — so it is the one ink taken off their file and flipped with
- * the ground instead. Nothing else about the artwork changes.
- */
-const CLOUD_WORD =
-  'M78.58 15.545c-2.204 0-4.041-.74-5.512-2.22-1.471-1.487-2.207-3.347-2.207-5.58 0-2.241.74-4.091 2.217-5.55 1.478-1.46 3.308-2.19 5.49-2.19a7.57 7.57 0 0 1 2.062.28 6.652 6.652 0 0 1 1.803.8c.546.339 1.115.83 1.71 1.473L82.567 4.05c-.511-.546-.95-.933-1.316-1.161a4.272 4.272 0 0 0-1.202-.519 5.418 5.418 0 0 0-1.47-.187c-1.54 0-2.832.512-3.875 1.535-1.043 1.017-1.564 2.355-1.564 4.015 0 1.653.517 3.005 1.553 4.056 1.036 1.044 2.331 1.566 3.885 1.566.546 0 1.07-.076 1.575-.228a5.14 5.14 0 0 0 1.378-.643c.414-.277.863-.685 1.347-1.224l1.616 1.546c-.663.74-1.288 1.29-1.876 1.649-.58.36-1.208.63-1.885.809a8.07 8.07 0 0 1-2.155.28zm7.055-.342V.348h2.258v14.855h-2.258zm9.052.342c-1.61 0-2.939-.536-3.988-1.608-1.05-1.072-1.575-2.42-1.575-4.045 0-1.646.525-2.998 1.575-4.056 1.056-1.058 2.386-1.587 3.988-1.587 1.602 0 2.932.532 3.989 1.597 1.056 1.065 1.584 2.414 1.584 4.046 0 1.625-.524 2.973-1.574 4.045s-2.383 1.608-3.999 1.608zm0-1.97c.946 0 1.74-.343 2.383-1.028.642-.691.963-1.577.963-2.655 0-1.093-.324-1.978-.974-2.656-.642-.678-1.433-1.017-2.372-1.017-.946 0-1.74.34-2.383 1.017-.642.678-.963 1.563-.963 2.656 0 1.078.318 1.964.953 2.655.642.685 1.44 1.027 2.393 1.027zm10.639 1.97c-1.257 0-2.227-.363-2.911-1.09-.684-.732-1.025-1.766-1.025-3.1V4.59h2.258v6.42c0 .865.197 1.526.59 1.982.401.457.971.685 1.71.685.773 0 1.426-.298 1.958-.892.532-.602.797-1.321.797-2.158V4.591h2.259v10.612h-2.145v-2.521l1.026 1.027h-1.088c-.297.533-.759.972-1.388 1.317a4.165 4.165 0 0 1-2.041.52zm11.894 0c-1.443 0-2.642-.522-3.595-1.566-.946-1.051-1.419-2.41-1.419-4.077 0-1.653.48-3.005 1.44-4.056.967-1.051 2.176-1.577 3.626-1.577a4.18 4.18 0 0 1 2.02.498c.621.325 1.088.754 1.399 1.286h.072V.348h2.238v14.855h-2.155v-1.878l.238.415h-.3c-.332.546-.819.986-1.461 1.317a4.59 4.59 0 0 1-2.103.488zm.404-1.95c.905 0 1.664-.346 2.279-1.038.622-.698.933-1.587.933-2.665 0-1.08-.314-1.957-.943-2.635-.622-.678-1.378-1.017-2.269-1.017-.891 0-1.65.34-2.279 1.017-.622.678-.932 1.56-.932 2.645 0 1.072.307 1.957.922 2.655.621.692 1.384 1.038 2.289 1.038z';
-
-const GOLD_COMPANY = 'Google Cloud';
-/** The artwork's own box, so `logo_ratio` below is measured, not guessed. */
-const GOLD_BOX = { width: 123, height: 20 };
+const GOLD_COMPANY = 'Relecloud';
+const GOLD_RATIO = 123 / 20;
 
 /**
- * A lockup rather than a word, so the paid slot reads as a logo at a glance
- * the way the marks beside it do. Two inks: the wordmark holds its brand
- * colours in both themes while "Cloud" flips, which is exactly the case a
- * single flat file cannot serve and the reason the wire contract takes a
- * pair.
+ * The gold slot keeps its own colour rather than being masked, which is the one
+ * case a single flat asset cannot serve and the reason the wire contract takes
+ * a themed pair.
  */
-const goldLockup = (cloudInk: string): string => {
-  const wordmark = GOOGLE_WORDMARK.map(
-    ({ ink, d }) => `<path fill="${ink}" d="${d}"/>`,
-  ).join('');
-  const svg =
-    `<svg xmlns="http://www.w3.org/2000/svg" width="${GOLD_BOX.width}" height="${GOLD_BOX.height}" viewBox="0 0 ${GOLD_BOX.width} ${GOLD_BOX.height}">` +
-    `${wordmark}<path fill="${cloudInk}" d="${CLOUD_WORD}"/></svg>`;
-
-  return `data:image/svg+xml,${encodeURIComponent(svg)}`;
+const goldSponsor = {
+  gen_id: 'mock-gold',
+  company: GOLD_COMPANY,
+  logo_img: {
+    light: placeholderMark(GOLD_COMPANY, GOLD_RATIO, '#0E1217'),
+    dark: placeholderMark(GOLD_COMPANY, GOLD_RATIO, '#FFFFFF'),
+  },
+  logo_ratio: GOLD_RATIO,
+  link: `https://daily.dev/?utm_source=sponsor_strip&sponsor=${slugOf(
+    GOLD_COMPANY,
+  )}`,
+  pixel: [] as string[],
+  tier: SponsorTier.Gold,
 };
 
+// Ratios span the range real marks do — a near-square through to a long
+// wordmark — so the optical sizing is exercised across the same spread.
 const MOCK_SPONSOR_STRIP_ADS = [
-  {
-    gen_id: 'mock-gold',
-    company: GOLD_COMPANY,
-    logo_img: {
-      light: goldLockup('#0E1217'),
-      dark: goldLockup('#FFFFFF'),
-    },
-    logo_ratio: GOLD_BOX.width / GOLD_BOX.height,
-    link: 'https://cloud.google.com/free?utm_source=sponsor_strip&sponsor=google-cloud',
-    pixel: [] as string[],
-    tier: SponsorTier.Gold,
-  },
-  // Ratios are the marks' own, read off each file's viewBox, so the optical
-  // sizing has the same numbers a real creative would carry.
-  wallSponsor('Datadog', 'datadog', 800.5 / 203.19, SponsorTier.Premium),
-  wallSponsor('PostHog', 'posthog', 512 / 90, SponsorTier.Premium),
-  wallSponsor('ClickHouse', 'clickhouse', 584.9 / 103.1, SponsorTier.Premium),
-  wallSponsor('Retool', 'retool', 87 / 17, SponsorTier.Premium),
-  wallSponsor('Snyk', 'snyk', 65 / 35, SponsorTier.Premium),
-  wallSponsor('Okta', 'okta', 512 / 169, SponsorTier.Community),
-  wallSponsor('Neo4j', 'neo4j', 512 / 170, SponsorTier.Community),
-  wallSponsor('Pulumi', 'pulumi', 512 / 128, SponsorTier.Community),
-  wallSponsor('LaunchDarkly', 'launchdarkly', 512 / 80, SponsorTier.Community),
-  wallSponsor('Sonar', 'sonar', 512 / 125, SponsorTier.Community),
-  wallSponsor('JetBrains', 'jetbrains', 298 / 64, SponsorTier.Community),
-  wallSponsor('Sentry', 'sentry', 512 / 113, SponsorTier.Community),
+  goldSponsor,
+  wallSponsor('Contoso', 3.94, SponsorTier.Premium),
+  wallSponsor('Fabrikam', 5.69, SponsorTier.Premium),
+  wallSponsor('Northwind', 5.67, SponsorTier.Premium),
+  wallSponsor('Litware', 5.12, SponsorTier.Premium),
+  wallSponsor('Proseware', 1.86, SponsorTier.Premium),
+  wallSponsor('Adventure Works', 3.03, SponsorTier.Community),
+  wallSponsor('Woodgrove', 3.01, SponsorTier.Community),
+  wallSponsor('Tailspin', 4.0, SponsorTier.Community),
+  wallSponsor('Wingtip', 6.4, SponsorTier.Community),
+  wallSponsor('Lucerne', 4.1, SponsorTier.Community),
+  wallSponsor('Trey Research', 4.66, SponsorTier.Community),
+  wallSponsor('Blue Yonder', 4.53, SponsorTier.Community),
 ];
 
+/**
+ * Empty outside development, so ramping `sponsor_strip` cannot put fabricated
+ * sponsorships in front of a reader. The guard is here rather than at the call
+ * site for the reason `mockFeedHighlights` did the same: nothing upstream can
+ * opt back in, and the ramp exercises the dock's empty-row path instead.
+ */
 export const fetchSponsorStripAds = async (): Promise<unknown> =>
-  MOCK_SPONSOR_STRIP_ADS;
+  isDevelopment ? MOCK_SPONSOR_STRIP_ADS : [];
diff --git a/packages/shared/src/features/monetization/sponsorStrip/useStripHeadlines.ts b/packages/shared/src/features/monetization/sponsorStrip/useStripHeadlines.ts
index c98bc06fcc0..91fc9cde7cc 100644
--- a/packages/shared/src/features/monetization/sponsorStrip/useStripHeadlines.ts
+++ b/packages/shared/src/features/monetization/sponsorStrip/useStripHeadlines.ts
@@ -1,37 +1,23 @@
 import { useQuery } from '@tanstack/react-query';
 import type { StatuslineItem } from '../../../graphql/statusline';
 import { statuslineFeedQueryOptions } from '../../../graphql/statusline';
-import { ONE_MINUTE } from '../../../lib/time';
+import { FIVE_MINUTES } from '../../../lib/time';
 
 const HEADLINE_LIMIT = 12;
 
 interface StripHeadlines {
   headlines: StatuslineItem[];
-  /**
-   * Whether the query has answered. The dock reserves the row's height until
-   * it has, rather than popping a second row in after the feed has painted.
-   */
+  /** Whether the query has answered; the dock reserves the row until it has. */
   isSettled: boolean;
 }
 
-/**
- * The items the ticker carries: the same `statuslineFeed` mix the Claude Code
- * statusline renders as terminal lines — curated major headlines interleaved
- * with the most-upvoted posts of the day, deduped. One resolver and one cache
- * sit behind both, so the terminal and the web can never disagree about what
- * is worth showing; they differ only in how they draw it.
- *
- * No client-side freshness filter. Which headlines still count as major, and
- * which posts count as popular, is the backend's call — a second opinion held
- * only by this row emptied it on any day the curated set went quiet, dropping
- * the dock from two rows to one for no reason the reader could see. The API
- * already returns the mix in the order it wants shown.
- */
 export const useStripHeadlines = (enabled: boolean): StripHeadlines => {
   const { data, isPending } = useQuery({
     ...statuslineFeedQueryOptions({ first: HEADLINE_LIMIT }),
     enabled,
-    refetchInterval: ONE_MINUTE,
+    // Matched to the 5-minute Redis TTL the resolver serves off: polling faster
+    // returns a byte-identical payload, for every reader with a feed open.
+    refetchInterval: FIVE_MINUTES,
   });
 
   if (!enabled) {
diff --git a/packages/shared/src/graphql/statusline.ts b/packages/shared/src/graphql/statusline.ts
index f6dc4524508..b0817dcce47 100644
--- a/packages/shared/src/graphql/statusline.ts
+++ b/packages/shared/src/graphql/statusline.ts
@@ -1,11 +1,7 @@
 import { gql } from 'graphql-request';
 import { gqlClient } from './common';
-import { ONE_MINUTE } from '../lib/time';
+import { FIVE_MINUTES } from '../lib/time';
 
-/**
- * Where a statusline item came from: a curated major headline, or a post off
- * the popular feed. Headlines are the only kind with an editorial timestamp.
- */
 export type StatuslineItemKind = 'HEADLINE' | 'POST';
 
 export interface StatuslineItem {
@@ -38,11 +34,7 @@ export const STATUSLINE_FEED_QUERY = gql`
   }
 `;
 
-/**
- * The curated-headlines-plus-popular mix the Claude Code statusline renders as
- * terminal lines, as data. One resolver and one cache serve both, so the
- * terminal and the web cannot drift apart on what they are showing.
- */
+/** The same mix the Claude Code statusline renders, off one shared resolver. */
 export const statuslineFeedQueryOptions = ({
   first,
 }: {
@@ -51,5 +43,5 @@ export const statuslineFeedQueryOptions = ({
   queryKey: ['statusline-feed', first ?? 0],
   queryFn: () =>
     gqlClient.request<StatuslineFeedData>(STATUSLINE_FEED_QUERY, { first }),
-  staleTime: ONE_MINUTE,
+  staleTime: FIVE_MINUTES,
 });
diff --git a/packages/shared/src/lib/feed.ts b/packages/shared/src/lib/feed.ts
index 029250190f3..09749bdf750 100644
--- a/packages/shared/src/lib/feed.ts
+++ b/packages/shared/src/lib/feed.ts
@@ -185,16 +185,22 @@ interface FeedHighlightsLogEventOptions extends FeedItemPosition {
   ranking?: string;
   action?: string;
   count?: number;
-  /**
-   * Only the fields this builder actually reads, rather than a whole
-   * `PostHighlight`: the sponsor-strip ticker carries `statuslineFeed` items,
-   * which have no channel or editorial timestamp to hand over. Every caller
-   * passing a full highlight still satisfies it.
-   */
+  /** Only the fields this builder reads, so a caller need not hold a whole one. */
   clickedHighlight?: Pick<PostHighlight, 'id' | 'headline'> & {
     post: Pick<PostHighlight['post'], 'id' | 'commentsPermalink'>;
   };
+  /**
+   * A clicked row that is a post rather than a highlight. Separate from
+   * `clickedHighlight` so `clicked_highlight_id` is never written with a post
+   * id: the sponsor-strip ticker carries both kinds, and one field holding two
+   * key spaces mis-joins downstream instead of failing loudly.
+   */
+  clickedPost?: { id: string; title: string; permalink: string };
   highlightIds?: string[];
+  /** Post ids from a row that mixes kinds; never merged into `highlightIds`. */
+  postIds?: string[];
+  /** Which kind a single-row event refers to, where the row carries both. */
+  kind?: string;
   feedMeta?: string | null;
   position?: number;
   origin?: Origin;
@@ -211,33 +217,48 @@ export function feedHighlightsLogEvent(
     ranking,
     count,
     clickedHighlight,
+    clickedPost,
     highlightIds,
+    postIds,
+    kind,
     feedMeta,
     position,
     origin,
   }: FeedHighlightsLogEventOptions,
 ): FeedItemLogEvent {
+  const clicked = clickedHighlight
+    ? {
+        title: clickedHighlight.headline,
+        url: clickedHighlight.post.commentsPermalink,
+        postId: clickedHighlight.post.id,
+      }
+    : clickedPost && {
+        title: clickedPost.title,
+        url: clickedPost.permalink,
+        postId: clickedPost.id,
+      };
+
   return {
     event_name: eventName,
     feed_grid_columns: columns,
     feed_item_grid_column: column,
     feed_item_grid_row: row,
     feed_item_meta: feedMeta ?? undefined,
-    feed_item_target_url: clickedHighlight?.post.commentsPermalink,
-    feed_item_title: clickedHighlight?.headline,
+    feed_item_target_url: clicked?.url,
+    feed_item_title: clicked?.title,
     target_type: TargetType.HighlightsCard,
     extra: JSON.stringify({
       ...feedLogExtra(feedName, ranking, undefined, origin).extra,
       ...(action ? { action } : {}),
       ...(typeof count === 'number' ? { count } : {}),
       ...(typeof position === 'number' ? { position } : {}),
+      ...(kind ? { kind } : {}),
       ...(highlightIds?.length ? { highlight_ids: highlightIds } : {}),
+      ...(postIds?.length ? { post_ids: postIds } : {}),
       ...(clickedHighlight
-        ? {
-            clicked_highlight_id: clickedHighlight.id,
-            post_id: clickedHighlight.post.id,
-          }
+        ? { clicked_highlight_id: clickedHighlight.id }
         : {}),
+      ...(clicked ? { post_id: clicked.postId } : {}),
     }),
   };
 }

From f98cb6ac9b3d675a3d807c90d1ebbb25f2033103 Mon Sep 17 00:00:00 2001
From: Chris Bongers <chrisbongers@gmail.com>
Date: Wed, 9 Sep 2026 14:52:39 +0200
Subject: [PATCH 18/20] refactor(monetization): drop the dead enabled flag on
 useSponsorStripAds

Hardcoded `true` at the only call site, and the strip is already gated by
`sponsorStrip.isEnabled` in `MainFeedLayout` before this mounts, so the
query could never be disabled through it.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
---
 .../features/monetization/sponsorStrip/SponsorStrip.tsx    | 4 +---
 .../monetization/sponsorStrip/useSponsorStripAds.ts        | 7 +------
 2 files changed, 2 insertions(+), 9 deletions(-)

diff --git a/packages/shared/src/features/monetization/sponsorStrip/SponsorStrip.tsx b/packages/shared/src/features/monetization/sponsorStrip/SponsorStrip.tsx
index 847c46f2706..a5a699e8cbd 100644
--- a/packages/shared/src/features/monetization/sponsorStrip/SponsorStrip.tsx
+++ b/packages/shared/src/features/monetization/sponsorStrip/SponsorStrip.tsx
@@ -167,9 +167,7 @@ export const SponsorStrip = ({
     community,
     wallRef,
     isSettled: adsSettled,
-  } = useSponsorStripAds({
-    enabled: true,
-  });
+  } = useSponsorStripAds();
   // Read here rather than passed down: the dock is mounted inside the same
   // providers as the feed, and the calc behind `feedWidth` needs these.
   const { numCards } = useContext(FeedContext);
diff --git a/packages/shared/src/features/monetization/sponsorStrip/useSponsorStripAds.ts b/packages/shared/src/features/monetization/sponsorStrip/useSponsorStripAds.ts
index 4b8c6a06c6a..9d764890aa2 100644
--- a/packages/shared/src/features/monetization/sponsorStrip/useSponsorStripAds.ts
+++ b/packages/shared/src/features/monetization/sponsorStrip/useSponsorStripAds.ts
@@ -95,16 +95,11 @@ const useDeck = (pool: SponsorStripCreative[]): SponsorStripCreative[] => {
   );
 };
 
-export const useSponsorStripAds = ({
-  enabled,
-}: {
-  enabled: boolean;
-}): UseSponsorStripAds => {
+export const useSponsorStripAds = (): UseSponsorStripAds => {
   const isLight = useIsLightTheme();
   const { data, isPending } = useQuery({
     queryKey: [RequestKey.Ads, AdPlacement.SponsorStrip],
     queryFn: fetchSponsorStripAds,
-    enabled,
     staleTime: ONE_HOUR,
     ...disabledRefetch,
   });

From d13dbec205a981eca981134bacd4f939b52280a6 Mon Sep 17 00:00:00 2001
From: Chris Bongers <chrisbongers@gmail.com>
Date: Wed, 9 Sep 2026 15:11:21 +0200
Subject: [PATCH 19/20] feat(monetization): make the ticker and the feed card
 disjoint
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The two rows overlapped: the ticker's curated half read the same
`majorHeadlineSignificances` set the feed's Happening Now card renders,
off the same table, so a reader on a strip-enabled feed could see one
story twice on a single screen.

The card keeps headlines; the ticker takes only the popular half of
`statuslineFeed`. Neither has to know about the other, no feed can lose
its card, and a post that is both is already deduped server-side into the
headline this filters out — so the two can no longer collide. The mix is
over-fetched and sliced, since roughly a third of it is dropped.

This also settles the analytics blocker at its root rather than by
labelling it: with no highlights in the row there is no second id space,
so `clicked_highlight_id` and `highlight_ids` are never written, the
`kind` discriminator added for the mixed case is gone again, and only
`post_ids` remains. The per-kind destination and signal branches go with
it — "Trending" is now simply what the row is.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
---
 .../sponsorStrip/SponsorStrip.spec.tsx        | 108 ++++++------------
 .../sponsorStrip/SponsorStripHeadlines.tsx    |  95 ++++-----------
 .../sponsorStrip/useStripHeadlines.spec.tsx   |  49 ++++----
 .../sponsorStrip/useStripHeadlines.ts         |  23 +++-
 packages/shared/src/lib/feed.ts               |   6 +-
 5 files changed, 106 insertions(+), 175 deletions(-)

diff --git a/packages/shared/src/features/monetization/sponsorStrip/SponsorStrip.spec.tsx b/packages/shared/src/features/monetization/sponsorStrip/SponsorStrip.spec.tsx
index 9ab8948013c..55edea280ba 100644
--- a/packages/shared/src/features/monetization/sponsorStrip/SponsorStrip.spec.tsx
+++ b/packages/shared/src/features/monetization/sponsorStrip/SponsorStrip.spec.tsx
@@ -38,16 +38,6 @@ const creative = (
   tier,
 });
 
-const headline = (id: string): StatuslineItem => ({
-  id,
-  kind: 'HEADLINE',
-  postId: `post-${id}`,
-  title: `Headline ${id}`,
-  upvotes: 0,
-  permalink: `https://daily.dev/posts/${id}`,
-  highlightedAt: new Date().toISOString(),
-});
-
 const popular = (id: string, upvotes = 42): StatuslineItem => ({
   id,
   kind: 'POST',
@@ -247,29 +237,26 @@ it("should fire the ad server's impression pixel for a logo that carries one", a
   expect(pixels[0]).toHaveAttribute('src', 'https://api.daily.dev/px?id=gold');
 });
 
-it('should carry the statusline mix in the ticker', async () => {
-  setHeadlines([headline('h1'), popular('p1')]);
+it('should carry the popular posts in the ticker', async () => {
+  setHeadlines([popular('p1'), popular('p2')]);
   renderStrip();
   await settle();
 
   const ticker = within(screen.getByTestId('sponsorStripHeadlines'));
 
   expect(ticker.getByText('Trending')).toBeInTheDocument();
-  expect(ticker.getByText('Headline h1')).toBeInTheDocument();
   expect(ticker.getByText('Post p1')).toBeInTheDocument();
+  expect(ticker.getByText('Post p2')).toBeInTheDocument();
 });
 
-// Each kind carries the signal that means something for it, the way the
-// terminal statusline does.
-it('should show a timestamp for a headline and a score for a popular post', async () => {
-  setHeadlines([headline('h1'), popular('p1', 42)]);
+it('should show the score that got a post into the row', async () => {
+  setHeadlines([popular('p1', 42)]);
   renderStrip();
   await settle();
 
-  const ticker = within(screen.getByTestId('sponsorStripHeadlines'));
-
-  expect(ticker.getByText('Now')).toBeInTheDocument();
-  expect(ticker.getByText('\u25b242')).toBeInTheDocument();
+  expect(
+    within(screen.getByTestId('sponsorStripHeadlines')).getByText('\u25b242'),
+  ).toBeInTheDocument();
 });
 
 it('should leave a popular post with no score bare', async () => {
@@ -285,7 +272,7 @@ it('should leave a popular post with no score bare', async () => {
 
 it('should still carry the ticker when the ad server has no fill', async () => {
   mockFetch.mockResolvedValue([]);
-  setHeadlines([headline('h1')]);
+  setHeadlines([popular('p1')]);
   renderStrip();
   await settle();
 
@@ -309,42 +296,26 @@ const tickerClicks = () =>
       (event as { event_name: string }).event_name === LogEvent.Click,
   );
 
-it('should log a click on a headline with the highlight that was clicked', async () => {
-  setHeadlines([headline('h1'), headline('h2')]);
-  renderStrip();
-  await settle();
-
-  fireEvent.click(screen.getByText('Headline h2'));
-
-  expect(extraOf(tickerClicks()[0])).toEqual(
-    expect.objectContaining({
-      kind: 'HEADLINE',
-      clicked_highlight_id: 'h2',
-      position: 1,
-    }),
-  );
-});
-
-// `id` is a highlight id for a headline and a post id for a popular post, so a
-// post must never be written into `clicked_highlight_id` — anything joining
-// that field against the highlights table would mis-join on the popular half.
-it('should log a click on a popular post without a highlight id', async () => {
-  setHeadlines([headline('h1'), popular('p1')]);
+// The row carries no highlights, so a post id must never reach
+// `clicked_highlight_id` — anything joining that field against the highlights
+// table would mis-join rather than come back empty.
+it('should log a click on a post without a highlight id', async () => {
+  setHeadlines([popular('p1'), popular('p2')]);
   renderStrip();
   await settle();
 
-  fireEvent.click(screen.getByText('Post p1'));
+  fireEvent.click(screen.getByText('Post p2'));
 
   const extra = extraOf(tickerClicks()[0]);
 
   expect(extra).toEqual(
-    expect.objectContaining({ kind: 'POST', post_id: 'p1', position: 1 }),
+    expect.objectContaining({ post_id: 'p2', position: 1 }),
   );
   expect(extra).not.toHaveProperty('clicked_highlight_id');
 });
 
-it('should split the two id spaces on the impression', async () => {
-  setHeadlines([headline('h1'), popular('p1'), headline('h2')]);
+it('should log the impression with post ids only', async () => {
+  setHeadlines([popular('p1'), popular('p2')]);
   renderStrip();
   await settle();
 
@@ -353,37 +324,28 @@ it('should split the two id spaces on the impression', async () => {
       (event as { event_name: string }).event_name === LogEvent.Impression &&
       extraOf([event]).feed === 'sponsor-strip-headlines',
   );
+  const extra = extraOf(impression);
 
-  expect(extraOf(impression)).toEqual(
-    expect.objectContaining({
-      highlight_ids: ['h1', 'h2'],
-      post_ids: ['p1'],
-      count: 3,
-    }),
+  expect(extra).toEqual(
+    expect.objectContaining({ post_ids: ['p1', 'p2'], count: 2 }),
   );
+  expect(extra).not.toHaveProperty('highlight_ids');
 });
 
-// A curated headline keeps the /highlights destination the Happening Now card
-// leads to; only a popular post goes straight to its discussion page.
-it('should send a headline to /highlights and a post to its permalink', async () => {
-  setHeadlines([headline('h1'), popular('p1')]);
+it('should send a ticker row to its post permalink', async () => {
+  setHeadlines([popular('p1')]);
   renderStrip();
   await settle();
 
-  const ticker = within(screen.getByTestId('sponsorStripHeadlines'));
-
-  expect(ticker.getByText('Headline h1').closest('a')).toHaveAttribute(
-    'href',
-    expect.stringContaining('highlight=h1'),
-  );
-  expect(ticker.getByText('Post p1').closest('a')).toHaveAttribute(
-    'href',
-    'https://daily.dev/posts/p1',
-  );
+  expect(
+    within(screen.getByTestId('sponsorStripHeadlines'))
+      .getByText('Post p1')
+      .closest('a'),
+  ).toHaveAttribute('href', 'https://daily.dev/posts/p1');
 });
 
 it('should publish its height so the floating controls can clear it', async () => {
-  setHeadlines([headline('h1')]);
+  setHeadlines([popular('p1')]);
   renderStrip();
   await settle();
 
@@ -394,7 +356,7 @@ it('should publish its height so the floating controls can clear it', async () =
 
 it('should publish only the height of the row it actually renders', async () => {
   mockFetch.mockResolvedValue([]);
-  setHeadlines([headline('h1')]);
+  setHeadlines([popular('p1')]);
   renderStrip();
   await settle();
 
@@ -410,7 +372,7 @@ it('should take the offset back when it has nothing to show', async () => {
 });
 
 it('should take the offset back when it unmounts', async () => {
-  setHeadlines([headline('h1')]);
+  setHeadlines([popular('p1')]);
   const { unmount } = renderStrip();
   await settle();
   unmount();
@@ -432,7 +394,7 @@ it('should hold the ticker row open before the headlines arrive', async () => {
 });
 
 it('should hold the sponsor row open before the ad query answers', () => {
-  setHeadlines([headline('h1')]);
+  setHeadlines([popular('p1')]);
   renderStrip();
 
   expect(screen.getByTestId('sponsorStripRow')).toBeInTheDocument();
@@ -446,8 +408,8 @@ const tickerImpressions = () =>
       extraOf(call).feed === 'sponsor-strip-headlines',
   );
 
-it('should log the ticker impression once the headlines arrive', async () => {
-  setHeadlines([headline('h1'), headline('h2')]);
+it('should log the ticker impression once the rows arrive', async () => {
+  setHeadlines([popular('p1'), popular('p2')]);
   renderStrip();
   await settle();
 
diff --git a/packages/shared/src/features/monetization/sponsorStrip/SponsorStripHeadlines.tsx b/packages/shared/src/features/monetization/sponsorStrip/SponsorStripHeadlines.tsx
index 1db3472519d..c4db836dbf4 100644
--- a/packages/shared/src/features/monetization/sponsorStrip/SponsorStripHeadlines.tsx
+++ b/packages/shared/src/features/monetization/sponsorStrip/SponsorStripHeadlines.tsx
@@ -1,9 +1,7 @@
 import type { CSSProperties, ReactElement } from 'react';
 import React, { useCallback } from 'react';
 import classNames from 'classnames';
-import { getHighlightsUrl } from '../../../components/cards/highlight/common';
 import Link from '../../../components/utilities/Link';
-import { RelativeTime } from '../../../components/utilities/RelativeTime';
 import { useLogContext } from '../../../contexts/LogContext';
 import type { StatuslineItem } from '../../../graphql/statusline';
 import useLogEventOnce from '../../../hooks/log/useLogEventOnce';
@@ -17,16 +15,6 @@ import { LogEvent, Origin } from '../../../lib/log';
 
 const HEADLINES_FEED_NAME = 'sponsor-strip-headlines';
 
-const isHeadline = (item: StatuslineItem) => item.kind === 'HEADLINE';
-
-/**
- * A curated headline keeps the `/highlights` destination the Happening Now card
- * leads to, so the reader lands in the same curated context from either. Only a
- * popular post goes straight to its discussion page.
- */
-const destinationOf = (item: StatuslineItem): string =>
-  isHeadline(item) ? getHighlightsUrl(item.id) : item.permalink;
-
 /**
  * The row carries more than fits on purpose: it should read as a ticker
  * continuing past the edge, not a list that happens to end. The fade is what
@@ -40,28 +28,6 @@ const fadeStyle: CSSProperties = {
     'linear-gradient(to right, black calc(100% - 2.5rem), transparent)',
 };
 
-const ItemSignal = ({
-  item,
-}: {
-  item: StatuslineItem;
-}): ReactElement | null => {
-  // Keyed on kind rather than on the timestamp being present, so a headline
-  // served without one stays bare instead of falling through to an upvote
-  // count it was never meant to show.
-  if (isHeadline(item)) {
-    return item.highlightedAt ? (
-      <RelativeTime
-        dateTime={item.highlightedAt}
-        className="text-text-quaternary"
-      />
-    ) : null;
-  }
-
-  return item.upvotes > 0 ? (
-    <span className="text-text-quaternary">{`▲${item.upvotes}`}</span>
-  ) : null;
-};
-
 export const SponsorStripHeadlines = ({
   headlines,
   widthStyle,
@@ -80,13 +46,9 @@ export const SponsorStripHeadlines = ({
         feedName: HEADLINES_FEED_NAME,
         action: 'impression',
         count: headlines.length,
-        // Split by kind: `id` is a highlight id for a headline and a post id
-        // for a popular post, so merging them would hand one field two key
-        // spaces and silently mis-join against the highlights table.
-        highlightIds: headlines.filter(isHeadline).map(({ id }) => id),
-        postIds: headlines
-          .filter((item) => !isHeadline(item))
-          .map(({ id }) => id),
+        // Post ids, never `highlightIds`: the row carries no highlights, and
+        // the two id spaces must not meet in one field.
+        postIds: headlines.map(({ postId }) => postId),
         origin: Origin.Feed,
       }),
     { condition: !!headlines.length },
@@ -97,22 +59,11 @@ export const SponsorStripHeadlines = ({
       logEvent(
         feedHighlightsLogEvent(LogEvent.Click, {
           feedName: HEADLINES_FEED_NAME,
-          kind: item.kind,
-          ...(isHeadline(item)
-            ? {
-                clickedHighlight: {
-                  id: item.id,
-                  headline: item.title,
-                  post: { id: item.postId, commentsPermalink: item.permalink },
-                },
-              }
-            : {
-                clickedPost: {
-                  id: item.postId,
-                  title: item.title,
-                  permalink: item.permalink,
-                },
-              }),
+          clickedPost: {
+            id: item.postId,
+            title: item.title,
+            permalink: item.permalink,
+          },
           position,
           origin: Origin.Feed,
         }),
@@ -146,22 +97,20 @@ export const SponsorStripHeadlines = ({
             className="no-scrollbar flex min-w-0 flex-1 items-center gap-5 overflow-x-auto"
             style={fadeStyle}
           >
-            {headlines.map((item, index) => {
-              const href = destinationOf(item);
-
-              return (
-                <Link href={href} key={item.id}>
-                  <a
-                    href={href}
-                    onClick={() => onHeadlineClick(item, index)}
-                    className="flex shrink-0 items-center gap-1.5 whitespace-nowrap text-text-secondary typo-caption1 hover:text-text-primary"
-                  >
-                    {item.title}
-                    <ItemSignal item={item} />
-                  </a>
-                </Link>
-              );
-            })}
+            {headlines.map((item, index) => (
+              <Link href={item.permalink} key={item.id}>
+                <a
+                  href={item.permalink}
+                  onClick={() => onHeadlineClick(item, index)}
+                  className="flex shrink-0 items-center gap-1.5 whitespace-nowrap text-text-secondary typo-caption1 hover:text-text-primary"
+                >
+                  {item.title}
+                  {item.upvotes > 0 && (
+                    <span className="text-text-quaternary">{`▲${item.upvotes}`}</span>
+                  )}
+                </a>
+              </Link>
+            ))}
           </div>
         </div>
       </div>
diff --git a/packages/shared/src/features/monetization/sponsorStrip/useStripHeadlines.spec.tsx b/packages/shared/src/features/monetization/sponsorStrip/useStripHeadlines.spec.tsx
index e004de66a94..a43f7779feb 100644
--- a/packages/shared/src/features/monetization/sponsorStrip/useStripHeadlines.spec.tsx
+++ b/packages/shared/src/features/monetization/sponsorStrip/useStripHeadlines.spec.tsx
@@ -6,7 +6,6 @@ import type {
   StatuslineItem,
 } from '../../../graphql/statusline';
 import { statuslineFeedQueryOptions } from '../../../graphql/statusline';
-import { ONE_HOUR } from '../../../lib/time';
 import { useStripHeadlines } from './useStripHeadlines';
 
 jest.mock('../../../graphql/statusline', () => ({
@@ -61,24 +60,29 @@ beforeEach(() => {
   jest.clearAllMocks();
 });
 
-it('should carry the mix the API returned', async () => {
-  setItems([headline('h1'), post('p1'), headline('h2')]);
+// The feed's own Happening Now card renders the curated headlines, off the
+// same table, so carrying them here too would show one story twice on a screen.
+it('should drop the curated half and keep only the popular posts', async () => {
+  setItems([headline('h1'), post('p1'), headline('h2'), post('p2')]);
   const { result } = render();
 
   await waitFor(() =>
-    expect(result.current.headlines.map(({ id }) => id)).toEqual([
-      'h1',
-      'p1',
-      'h2',
-    ]),
+    expect(result.current.headlines.map(({ id }) => id)).toEqual(['p1', 'p2']),
   );
 });
 
-// Which headlines still count as major, and which posts count as popular, is
-// the backend's call — a stale-only day must still fill the ticker rather than
-// silently dropping the dock to one row.
-it('should carry items the backend still serves however old they are', async () => {
-  setItems([headline('old', 36 * ONE_HOUR), headline('older', 92 * ONE_HOUR)]);
+it('should leave the row empty when the mix is all headlines', async () => {
+  setItems([headline('h1'), headline('h2')]);
+  const { result } = render();
+
+  await waitFor(() => expect(mockQueryOptions).toHaveBeenCalled());
+  expect(result.current.headlines).toEqual([]);
+});
+
+// Which posts count as popular is the backend's call — a quiet day must still
+// fill the ticker rather than silently dropping the dock to one row.
+it('should carry posts the backend still serves however old they are', async () => {
+  setItems([post('old'), post('older')]);
   const { result } = render();
 
   await waitFor(() =>
@@ -90,22 +94,25 @@ it('should carry items the backend still serves however old they are', async ()
 });
 
 it('should keep the order the API returned rather than resorting', async () => {
-  setItems([
-    headline('newest'),
-    post('popular', 400),
-    headline('oldest', 90 * ONE_HOUR),
-  ]);
+  setItems([post('first', 4), post('second', 900), post('third', 40)]);
   const { result } = render();
 
   await waitFor(() =>
     expect(result.current.headlines.map(({ id }) => id)).toEqual([
-      'newest',
-      'popular',
-      'oldest',
+      'first',
+      'second',
+      'third',
     ]),
   );
 });
 
+it('should draw no more rows than the ticker shows', async () => {
+  setItems(Array.from({ length: 20 }, (_, i) => post(`p${i}`)));
+  const { result } = render();
+
+  await waitFor(() => expect(result.current.headlines).toHaveLength(12));
+});
+
 it('should leave the row empty when the API has nothing at all', async () => {
   setItems([]);
   const { result } = render();
diff --git a/packages/shared/src/features/monetization/sponsorStrip/useStripHeadlines.ts b/packages/shared/src/features/monetization/sponsorStrip/useStripHeadlines.ts
index 91fc9cde7cc..623955ab26b 100644
--- a/packages/shared/src/features/monetization/sponsorStrip/useStripHeadlines.ts
+++ b/packages/shared/src/features/monetization/sponsorStrip/useStripHeadlines.ts
@@ -3,7 +3,14 @@ import type { StatuslineItem } from '../../../graphql/statusline';
 import { statuslineFeedQueryOptions } from '../../../graphql/statusline';
 import { FIVE_MINUTES } from '../../../lib/time';
 
-const HEADLINE_LIMIT = 12;
+/** How many rows the ticker draws. */
+const DISPLAY_LIMIT = 12;
+/**
+ * Over-fetched because the curated half is dropped below: the mix interleaves
+ * up to ten headlines with the popular feed, so asking for the display count
+ * alone would leave the row half empty.
+ */
+const FETCH_LIMIT = 30;
 
 interface StripHeadlines {
   headlines: StatuslineItem[];
@@ -11,9 +18,17 @@ interface StripHeadlines {
   isSettled: boolean;
 }
 
+/**
+ * The popular half of the statusline mix. The curated half is dropped on
+ * purpose: those are the same major headlines the feed's own Happening Now
+ * card renders, off the same table, so carrying them here would show a reader
+ * one story twice on one screen. The card owns headlines, the ticker owns
+ * what the community is reading, and the two cannot overlap — the server has
+ * already deduped a post that is both, into the headline it filters out.
+ */
 export const useStripHeadlines = (enabled: boolean): StripHeadlines => {
   const { data, isPending } = useQuery({
-    ...statuslineFeedQueryOptions({ first: HEADLINE_LIMIT }),
+    ...statuslineFeedQueryOptions({ first: FETCH_LIMIT }),
     enabled,
     // Matched to the 5-minute Redis TTL the resolver serves off: polling faster
     // returns a byte-identical payload, for every reader with a feed open.
@@ -25,7 +40,9 @@ export const useStripHeadlines = (enabled: boolean): StripHeadlines => {
   }
 
   return {
-    headlines: data?.statuslineFeed ?? [],
+    headlines: (data?.statuslineFeed ?? [])
+      .filter(({ kind }) => kind === 'POST')
+      .slice(0, DISPLAY_LIMIT),
     isSettled: !isPending,
   };
 };
diff --git a/packages/shared/src/lib/feed.ts b/packages/shared/src/lib/feed.ts
index 09749bdf750..69613aaa5ad 100644
--- a/packages/shared/src/lib/feed.ts
+++ b/packages/shared/src/lib/feed.ts
@@ -197,10 +197,8 @@ interface FeedHighlightsLogEventOptions extends FeedItemPosition {
    */
   clickedPost?: { id: string; title: string; permalink: string };
   highlightIds?: string[];
-  /** Post ids from a row that mixes kinds; never merged into `highlightIds`. */
+  /** Post ids from a row that carries posts; never merged into `highlightIds`. */
   postIds?: string[];
-  /** Which kind a single-row event refers to, where the row carries both. */
-  kind?: string;
   feedMeta?: string | null;
   position?: number;
   origin?: Origin;
@@ -220,7 +218,6 @@ export function feedHighlightsLogEvent(
     clickedPost,
     highlightIds,
     postIds,
-    kind,
     feedMeta,
     position,
     origin,
@@ -252,7 +249,6 @@ export function feedHighlightsLogEvent(
       ...(action ? { action } : {}),
       ...(typeof count === 'number' ? { count } : {}),
       ...(typeof position === 'number' ? { position } : {}),
-      ...(kind ? { kind } : {}),
       ...(highlightIds?.length ? { highlight_ids: highlightIds } : {}),
       ...(postIds?.length ? { post_ids: postIds } : {}),
       ...(clickedHighlight

From 444b8f34778e6e33a91ab60ce8acb767e0216f82 Mon Sep 17 00:00:00 2001
From: Chris Bongers <chrisbongers@gmail.com>
Date: Wed, 9 Sep 2026 15:38:51 +0200
Subject: [PATCH 20/20] fix(monetization): bound premium slots by the measured
 wall
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

`premiumSlots` was computed from the deck alone while community, two
lines down, subtracted it from `wallSlots`. Whenever the measured wall
held fewer than four slots all four premium marks still mounted, and the
wall is `overflow-hidden`, so the surplus was clipped.

That is not only cosmetic. `useSponsorSlotLog` logs its impression and
opens its air-time duration event in a mount effect — it is `AdPixel` and
`useViewability` that wait for the viewport, not the internal log event.
So a clipped mark booked an impression and held an open air-time event
for the whole page session without ever being seen, in the paid tier, at
the narrowest width the strip supports. Verified at a 200px wall: four
premium marks mounted into two slots.

`useFittedSlots` measures in a layout effect, so the bound lands before
paint and premium never mounts against the unmeasured zero for long
enough for a passive effect to log it.

Three specs cover it, all of which fail without the clamp: the wall holds
what it measures, and no impression or air time is opened past the fit.
Community is unaffected — it already resolved to zero at that width, so
tier order is what survives the squeeze.

Also drops comments left describing the reverted Happening Now
suppression in `useSponsorStrip`, and the flag comment that still said
the ticker carries the whole `statuslineFeed` mix.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
---
 .../sponsorStrip/SponsorStrip.spec.tsx        | 50 +++++++++++++++++++
 .../sponsorStrip/useSponsorStrip.ts           | 13 ++---
 .../sponsorStrip/useSponsorStripAds.ts        | 19 ++++---
 packages/shared/src/lib/featureManagement.ts  |  6 +--
 4 files changed, 69 insertions(+), 19 deletions(-)

diff --git a/packages/shared/src/features/monetization/sponsorStrip/SponsorStrip.spec.tsx b/packages/shared/src/features/monetization/sponsorStrip/SponsorStrip.spec.tsx
index 55edea280ba..99c5c6eb823 100644
--- a/packages/shared/src/features/monetization/sponsorStrip/SponsorStrip.spec.tsx
+++ b/packages/shared/src/features/monetization/sponsorStrip/SponsorStrip.spec.tsx
@@ -153,6 +153,56 @@ const setHeadlines = (next: StatuslineItem[]) => {
 const publishedHeight = (): string =>
   document.documentElement.style.getPropertyValue('--sponsor-strip-height');
 
+// SLOT_WIDTH 88 + SLOT_GAP 16: floor((200 + 16) / 104) === 2 wall slots, fewer
+// than the four premium marks the deck holds.
+const NARROW_WALL_WIDTH = 200;
+const NARROW_WALL_SLOTS = 2;
+
+const setWallWidth = (width: number) =>
+  jest
+    .spyOn(Element.prototype, 'getBoundingClientRect')
+    .mockReturnValue({ width } as DOMRect);
+
+// Gold sits outside the measured wall; premium and community share it.
+const NARROW_TOTAL_LOGOS = NARROW_WALL_SLOTS + 1;
+
+// The wall is overflow-hidden and a slot books its impression and opens its air
+// time on mount, not on viewport — so a premium mark mounted past the fit would
+// be paid-tier inventory logged as seen while clipped out of sight.
+it('should not mount more premium slots than the measured wall fits', async () => {
+  setWallWidth(NARROW_WALL_WIDTH);
+  renderStrip();
+  await settle();
+
+  const logos = shownLogos();
+
+  expect(logos.filter((company) => company === 'gold')).toHaveLength(1);
+  expect(logos.filter((company) => PREMIUM.includes(company))).toHaveLength(
+    NARROW_WALL_SLOTS,
+  );
+  // Premium already took the whole wall, so community gets nothing — the tier
+  // order is what survives the squeeze, not the premium count.
+  expect(logos.filter((company) => COMMUNITY.includes(company))).toHaveLength(
+    0,
+  );
+});
+
+it('should book no impression for a premium mark the wall cannot fit', async () => {
+  setWallWidth(NARROW_WALL_WIDTH);
+  renderStrip();
+  await settle();
+
+  expect(callsFor(AdActions.Impression)).toHaveLength(NARROW_TOTAL_LOGOS);
+});
+
+it('should open no air time for a premium mark the wall cannot fit', async () => {
+  setWallWidth(NARROW_WALL_WIDTH);
+  renderStrip();
+  await settle();
+
+  expect(logEventStart).toHaveBeenCalledTimes(NARROW_TOTAL_LOGOS);
+});
+
 it('should render the gold sponsor, four premium slots and the community row', async () => {
   renderStrip();
   await settle();
diff --git a/packages/shared/src/features/monetization/sponsorStrip/useSponsorStrip.ts b/packages/shared/src/features/monetization/sponsorStrip/useSponsorStrip.ts
index fa3ea00bb6b..70bb46f55c6 100644
--- a/packages/shared/src/features/monetization/sponsorStrip/useSponsorStrip.ts
+++ b/packages/shared/src/features/monetization/sponsorStrip/useSponsorStrip.ts
@@ -12,20 +12,13 @@ interface UseSponsorStripProps {
 }
 
 /**
- * The strip shows on the feeds that can show a Happening Now card, and on no
- * others. Sharing one set with the card means the two can never disagree: the
- * strip cannot appear on a feed whose card it does not replace, and the card
- * cannot be suppressed on a feed the strip never reaches.
+ * The strip shows on the main feeds and on no others, reusing the hero-eligible
+ * set rather than keeping a second list of feed names in step with it.
  */
 const isSponsorStripFeed = (feedName?: string): boolean =>
   !!feedName && HERO_ELIGIBLE_FEEDS.has(feedName as AllFeedPages);
 
-/**
- * The single gate for the sponsor strip. Both the strip itself and the feed's
- * Happening Now suppression read it, so "is the strip showing" and "is the
- * card hidden" are the same answer rather than two conditions that have to be
- * kept in step.
- */
+/** The single gate for the sponsor strip: flag, surface, viewport and ads. */
 export const useSponsorStrip = ({
   feedName,
   disableAds,
diff --git a/packages/shared/src/features/monetization/sponsorStrip/useSponsorStripAds.ts b/packages/shared/src/features/monetization/sponsorStrip/useSponsorStripAds.ts
index 9d764890aa2..bfd47dc88e6 100644
--- a/packages/shared/src/features/monetization/sponsorStrip/useSponsorStripAds.ts
+++ b/packages/shared/src/features/monetization/sponsorStrip/useSponsorStripAds.ts
@@ -117,12 +117,19 @@ export const useSponsorStripAds = (): UseSponsorStripAds => {
     PREMIUM_SLOT_COUNT + communityDeck.length,
   );
 
-  // Reserved from the pool rather than read off the rendered row: the row
-  // fills a render later than the measurement does, and a community count that
-  // subtracted an as-yet-empty premium row would open slots it is about to
-  // take back — each one logging an impression and firing a pixel on its way
-  // through.
-  const premiumSlots = Math.min(PREMIUM_SLOT_COUNT, premiumDeck.length);
+  // Bounded by the measured wall as well as the pool. The wall is
+  // `overflow-hidden` and a slot opens its impression and air time in a mount
+  // effect rather than on viewport, so a premium mark mounted past the fit
+  // books an impression it was never seen for — in the paid tier, at the
+  // narrowest width the strip supports. Reserved from the pool rather than
+  // counted off the rendered row, which fills a render later than the
+  // measurement; `useFittedSlots` measures in a layout effect, so this lands
+  // before paint rather than after a passive effect has already logged.
+  const premiumSlots = Math.min(
+    PREMIUM_SLOT_COUNT,
+    premiumDeck.length,
+    wallSlots,
+  );
 
   // Themed logos resolve here rather than in the decks, so switching theme
   // repaints the row without dealing anybody a different slot.
diff --git a/packages/shared/src/lib/featureManagement.ts b/packages/shared/src/lib/featureManagement.ts
index 81cba531a71..4b3306140d7 100644
--- a/packages/shared/src/lib/featureManagement.ts
+++ b/packages/shared/src/lib/featureManagement.ts
@@ -249,9 +249,9 @@ export const featureOnboardingChrome = new Feature<OnboardingChromeVariant>(
 
 /**
  * Experiment: the sponsor strip — a logo wall docked under the main feeds with
- * a headlines ticker under it. The ticker carries the `statuslineFeed` mix; the
- * feed keeps its own Happening Now card either way, the two showing different
- * things.
+ * a trending ticker under it. The ticker carries the popular half of
+ * `statuslineFeed`; the feed keeps its own Happening Now card and owns the
+ * curated headlines, so the two rows cannot show the same story.
  *
  * On in development and off everywhere else, the way `cores`, `quest_offers`
  * and `post_boost_ads` are: `isDevelopment` is false in a production build, so