feat: engagement ads

.gitignore

@@ -54,4 +54,5 @@ figma-images/
 node-compile-cache/
 
 # Plan files
-plans/*.md
+plans/*.md
+.cursor/plans/

packages/shared/src/components/FeedItemComponent.tsx

@@ -42,6 +42,8 @@ import { LogExtraContextProvider } from '../contexts/LogExtraContext';
 import { SquadAdList } from './cards/ad/squad/SquadAdList';
 import { SquadAdGrid } from './cards/ad/squad/SquadAdGrid';
 import { adLogEvent, feedHighlightsLogEvent, feedLogExtra } from '../lib/feed';
+import { findCreativeForTags } from '../lib/engagementAds';
+import { useEngagementAdsContext } from '../contexts/EngagementAdsContext';
 import { useLogContext } from '../contexts/LogContext';
 import { MarketingCtaVariant } from './marketingCta/common';
 import { MarketingCtaBriefing } from './marketingCta/MarketingCtaBriefing';
@@ -192,6 +194,7 @@ export const withFeedLogExtraContext = (
     props: FeedItemComponentProps,
   ): ReactElement | null => {
     const { item } = props;
+    const { creatives } = useEngagementAdsContext();
 
     if ([FeedItemType.Ad, FeedItemType.Post].includes(item?.type)) {
       return (
@@ -213,6 +216,17 @@ export const withFeedLogExtraContext = (
               extraData.referrer_target_type = post?.id
                 ? TargetType.Post
                 : undefined;
+
+              if (
+                item.type === FeedItemType.Post &&
+                post?.tags &&
+                creatives.length > 0
+              ) {
+                const creative = findCreativeForTags(creatives, post.tags);
+                if (creative) {
+                  extraData.gen_id = creative.genId;
+                }
+              }
             }
 
             if (isBoostedSquadAd(item)) {

packages/shared/src/components/brand/BrandedTag.module.css

@@ -0,0 +1,62 @@
+/* BrandedTag - Micro-interaction animations for sponsored tags */
+
+.brandedTag {
+  cursor: pointer;
+  transition: transform 0.2s ease;
+}
+
+.brandedTag:hover {
+  transform: scale(1.02);
+}
+
+/* Tag content */
+.tagContent {
+  opacity: 1;
+  transform: translateY(0);
+}
+
+/* Branded content */
+.brandedContent {
+  opacity: 0;
+  transform: scale(0.9);
+}
+
+.brandedContent.fadeIn {
+  opacity: 1;
+  transform: scale(1);
+}
+
+/* Brand logo pulse effect */
+.brandLogo {
+  animation: logoPulse 2s ease-in-out infinite;
+}
+
+@keyframes logoPulse {
+  0%, 100% {
+    transform: scale(1);
+    filter: drop-shadow(0 0 0 transparent);
+  }
+  50% {
+    transform: scale(1.1);
+    filter: drop-shadow(0 0 4px currentColor);
+  }
+}
+
+/* Brand text */
+.brandText {
+  white-space: nowrap;
+}
+
+/* Animated (branded) state — continuous glow, no entrance animation */
+.animated {
+  animation: tagGlow 2s ease-in-out infinite;
+}
+
+@keyframes tagGlow {
+  0%, 100% {
+    box-shadow: 0 0 0 0 transparent;
+  }
+  50% {
+    box-shadow: 0 0 8px 0 var(--brand-primary, #6e40c9);
+  }
+}

packages/shared/src/components/brand/BrandedTag.spec.tsx

@@ -0,0 +1,74 @@
+import React from 'react';
+import { QueryClient } from '@tanstack/react-query';
+import { render, screen } from '@testing-library/react';
+import { TestBootProvider } from '../../../__tests__/helpers/boot';
+import { defaultQueryClientTestingConfig } from '../../../__tests__/helpers/tanstack-query';
+import type { EngagementCreative } from '../../lib/engagementAds';
+import { EngagementAdsProvider } from '../../contexts/EngagementAdsContext';
+import { BrandedTag } from './BrandedTag';
+
+const creative: EngagementCreative = {
+  gen_id: 'c1',
+  promoted_name: 'Copilot',
+  promoted_body: 'AI pair programming',
+  promoted_cta: 'Try free',
+  promoted_url: 'https://example.com',
+  promoted_logo_img: {
+    dark: 'https://example.com/logo-dark.png',
+    light: 'https://example.com/logo-light.png',
+  },
+  promoted_icon_img: {
+    dark: 'https://example.com/icon-dark.png',
+    light: 'https://example.com/icon-light.png',
+  },
+  promoted_gradient_start: { dark: '#000', light: '#fff' },
+  promoted_gradient_end: { dark: '#111', light: '#eee' },
+  tools: ['vscode'],
+  keywords: ['AI'],
+  tags: ['ai'],
+};
+
+let queryClient: QueryClient;
+
+beforeEach(() => {
+  queryClient = new QueryClient(defaultQueryClientTestingConfig);
+});
+
+const renderTag = (tag: string, creatives: EngagementCreative[] = []) =>
+  render(
+    <TestBootProvider client={queryClient}>
+      <EngagementAdsProvider rawCreatives={creatives}>
+        <BrandedTag tag={tag} />
+      </EngagementAdsProvider>
+    </TestBootProvider>,
+  );
+
+describe('BrandedTag', () => {
+  it('renders plain #tag when no creative matches', () => {
+    renderTag('react');
+    expect(screen.getByText('#react')).toBeInTheDocument();
+    expect(screen.queryByAltText('Copilot')).not.toBeInTheDocument();
+  });
+
+  it('renders brand name and logo when the tag is sponsored', () => {
+    renderTag('ai', [creative]);
+    expect(screen.getByText('#ai - powered by Copilot')).toBeInTheDocument();
+    // Don't pin the theme: either dark or light resolution is acceptable
+    expect(screen.getByAltText('Copilot')).toHaveAttribute(
+      'src',
+      expect.stringMatching(/https:\/\/example\.com\/logo-(dark|light)\.png/),
+    );
+  });
+
+  it('falls back to plain tag when branding is disabled', () => {
+    render(
+      <TestBootProvider client={queryClient}>
+        <EngagementAdsProvider rawCreatives={[creative]}>
+          <BrandedTag tag="ai" disableBranding />
+        </EngagementAdsProvider>
+      </TestBootProvider>,
+    );
+    expect(screen.getByText('#ai')).toBeInTheDocument();
+    expect(screen.queryByText(/powered by/)).not.toBeInTheDocument();
+  });
+});