feat: add InsightsBadge component to display carousel guidance

jest.config.js

@@ -0,0 +1,19 @@
+const nextJest = require('next/jest')
+
+const createJestConfig = nextJest({
+  // Provide the path to your Next.js app to load next.config.js and .env files in your test environment
+  dir: './',
+})
+
+// Add any custom config to be passed to Jest
+const customJestConfig = {
+  setupFilesAfterEnv: ['<rootDir>/jest.setup.js'],
+  testEnvironment: 'jsdom',
+  moduleNameMapper: {
+    '^@/(.*)$': '<rootDir>/src/$1',
+  },
+  testMatch: ['**/*.test.ts', '**/*.test.tsx'],
+}
+
+// createJestConfig is exported this way to ensure that next/jest can load the Next.js config which is async
+module.exports = createJestConfig(customJestConfig)

jest.setup.js

@@ -0,0 +1,2 @@
+// jest.setup.js is a place to add global test setup/teardown
+import '@testing-library/jest-dom';

src/components/carousel/InsightsBadge.test.tsx

@@ -0,0 +1,85 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import InsightsBadge from './InsightsBadge';
+import type { GeneratedInsight } from '@/lib/analytics/insights';
+
+describe('InsightsBadge', () => {
+  it('should render null when no insights provided', () => {
+    const { container } = render(<InsightsBadge insights={[]} />);
+    expect(container.firstChild).toBeNull();
+  });
+
+  it('should display insight count when insights provided', () => {
+    const insights: GeneratedInsight[] = [
+      {
+        id: 'test-1',
+        observation: 'Bold statement template performed well',
+        confidence_level: 'high',
+        applies_to: 'template',
+        recommendation: 'Use bold-statement',
+        created_at: new Date().toISOString(),
+      },
+    ];
+
+    render(<InsightsBadge insights={insights} />);
+    expect(screen.getByText(/1 insight/i)).toBeInTheDocument();
+  });
+
+  it('should show high confidence indicator', () => {
+    const insights: GeneratedInsight[] = [
+      {
+        id: 'test-1',
+        observation: 'Test observation',
+        confidence_level: 'high',
+        applies_to: 'template',
+        recommendation: 'Test recommendation',
+        created_at: new Date().toISOString(),
+      },
+    ];
+
+    render(<InsightsBadge insights={insights} />);
+    expect(screen.getByText(/Based on your past performance/i)).toBeInTheDocument();
+  });
+
+  it('should display recommendation text in user-friendly language', () => {
+    const insights: GeneratedInsight[] = [
+      {
+        id: 'test-1',
+        observation: 'Bold statement template got 45% engagement',
+        confidence_level: 'high',
+        applies_to: 'template',
+        recommendation: 'Use bold-statement for maximum impact',
+        created_at: new Date().toISOString(),
+      },
+    ];
+
+    render(<InsightsBadge insights={insights} />);
+    expect(screen.getByText(/Use bold-statement/i)).toBeInTheDocument();
+  });
+
+  it('should display multiple insights in a list', () => {
+    const insights: GeneratedInsight[] = [
+      {
+        id: 'test-1',
+        observation: 'Bold statement template performed best',
+        confidence_level: 'high',
+        applies_to: 'template',
+        recommendation: 'Use bold-statement',
+        created_at: new Date().toISOString(),
+      },
+      {
+        id: 'test-2',
+        observation: 'Blue palette drove engagement',
+        confidence_level: 'medium',
+        applies_to: 'palette',
+        recommendation: 'Try blue palette',
+        created_at: new Date().toISOString(),
+      },
+    ];
+
+    render(<InsightsBadge insights={insights} />);
+    expect(screen.getByText(/2 insights/i)).toBeInTheDocument();
+    expect(screen.getByText(/Use bold-statement/i)).toBeInTheDocument();
+    expect(screen.getByText(/Try blue palette/i)).toBeInTheDocument();
+  });
+});

src/components/carousel/InsightsBadge.tsx

@@ -0,0 +1,45 @@
+'use client';
+
+import React from 'react';
+import type { GeneratedInsight } from '@/lib/analytics/insights';
+
+interface InsightsBadgeProps {
+  insights: GeneratedInsight[];
+}
+
+/**
+ * Display insights that guided carousel creation.
+ * Shows in the UI during carousel review before publishing.
+ */
+export default function InsightsBadge({ insights }: InsightsBadgeProps) {
+  if (!insights || insights.length === 0) {
+    return null;
+  }
+
+  const count = insights.length;
+  const highConfCount = insights.filter((i) => i.confidence_level === 'high').length;
+
+  return (
+    <div className="bg-blue-50 border border-blue-200 rounded-lg p-4 mb-4">
+      <div className="flex items-start gap-3">
+        <div className="text-xl">💡</div>
+        <div className="flex-1">
+          <h3 className="font-semibold text-gray-900 mb-2">
+            Based on your past performance
+          </h3>
+          <p className="text-sm text-gray-600 mb-3">
+            {count} {count === 1 ? 'insight' : 'insights'} from your recent carousels are guiding this one{highConfCount > 0 ? ' (high confidence)' : ''}:
+          </p>
+          <ul className="space-y-2 text-sm">
+            {insights.map((insight) => (
+              <li key={insight.id} className="flex items-start gap-2">
+                <span className="text-gray-400 mt-1">•</span>
+                <span className="text-gray-700">{insight.recommendation}</span>
+              </li>
+            ))}
+          </ul>
+        </div>
+      </div>
+    </div>
+  );
+}