From 9df2a6976f44b9d027cf2f47095ab6776eed2d2d Mon Sep 17 00:00:00 2001
From: "user.name : \"Roshesh Chaware"
 <user.email : "chawareroshesh19@gmail.com>
Date: Sat, 20 Jun 2026 21:56:14 +0530
Subject: [PATCH] feat: add README Insight compact card in Generator section

---
 app/generator/GeneratorClient.tsx             |  2 +
 .../components/ReadmeInsight.test.tsx         | 67 ++++++++++++++++++
 app/generator/components/ReadmeInsight.tsx    | 69 +++++++++++++++++++
 3 files changed, 138 insertions(+)
 create mode 100644 app/generator/components/ReadmeInsight.test.tsx
 create mode 100644 app/generator/components/ReadmeInsight.tsx

diff --git a/app/generator/GeneratorClient.tsx b/app/generator/GeneratorClient.tsx
index a9ddd36e7..50c2e8197 100644
--- a/app/generator/GeneratorClient.tsx
+++ b/app/generator/GeneratorClient.tsx
@@ -6,6 +6,7 @@ import { PreviewPanel } from './components/PreviewPanel';
 import { CompletionScorePanel } from './components/CompletionScorePanel';
 import { ReadmeInsightsPanel } from './components/ReadmeInsightsPanel';
 import { ReadmeHealthBreakdown } from './components/ReadmeHealthBreakdown';
+import { ReadmeInsight } from './components/ReadmeInsight';
 import { generateReadme, getEmptyReadme } from './utils/readmeGenerator';
 import type { GeneratorState } from './types';
 import type { ImportedData } from './utils/githubMapper';
@@ -101,6 +102,7 @@ export function GeneratorClient() {
         <CompletionScorePanel state={state} />
         <ReadmeInsightsPanel state={state} />
         <ReadmeHealthBreakdown state={state} />
+        <ReadmeInsight state={state} />
       </div>
     </div>
   );
diff --git a/app/generator/components/ReadmeInsight.test.tsx b/app/generator/components/ReadmeInsight.test.tsx
new file mode 100644
index 000000000..a8cd97278
--- /dev/null
+++ b/app/generator/components/ReadmeInsight.test.tsx
@@ -0,0 +1,67 @@
+import { render, screen } from '@testing-library/react';
+import '@testing-library/jest-dom/vitest';
+import { describe, it, expect } from 'vitest';
+import { ReadmeInsight } from './ReadmeInsight';
+import type { GeneratorState } from '../types';
+import React from 'react';
+
+const EMPTY_STATE: GeneratorState = {
+  name: '',
+  description: '',
+  selectedTechs: [],
+  selectedSocials: [],
+  socialLinks: {},
+  githubUsername: '',
+  showCommitPulse: false,
+  commitPulseAccent: '',
+  showSnakeGraph: false,
+  showPacmanGraph: false,
+  graphPlacement: 'bottom',
+};
+
+describe('ReadmeInsight Component Tests', () => {
+  it('renders title and correct default tip when state is completely empty', () => {
+    render(<ReadmeInsight state={EMPTY_STATE} />);
+
+    expect(screen.getByText('README Insight')).toBeInTheDocument();
+    expect(screen.getByText('💡 Improve description clarity')).toBeInTheDocument();
+    expect(screen.getByText('Health Boost +20%')).toBeInTheDocument();
+  });
+
+  it('suggests adding badges when description is filled but showCommitPulse is false', () => {
+    const state = { ...EMPTY_STATE, description: 'Awesome project' };
+    render(<ReadmeInsight state={state} />);
+
+    expect(screen.getByText('💡 Add badges for credibility')).toBeInTheDocument();
+    expect(screen.getByText('Health Boost +10%')).toBeInTheDocument();
+  });
+
+  it('suggests including social links when description and commitPulse are enabled but socials are empty', () => {
+    const state = {
+      ...EMPTY_STATE,
+      description: 'Awesome project',
+      showCommitPulse: true,
+      githubUsername: 'roshesh',
+    };
+    render(<ReadmeInsight state={state} />);
+
+    expect(screen.getByText('💡 Include social links')).toBeInTheDocument();
+    expect(screen.getByText('Health Boost +20%')).toBeInTheDocument();
+  });
+
+  it('suggests adding installation steps when all key items are filled', () => {
+    const state = {
+      ...EMPTY_STATE,
+      name: 'CommitPulse',
+      description: 'Awesome project',
+      showCommitPulse: true,
+      githubUsername: 'roshesh',
+      selectedSocials: ['github'],
+      socialLinks: { github: 'https://github.com/roshesh' },
+    };
+    render(<ReadmeInsight state={state} />);
+
+    expect(screen.getByText('💡 Add installation steps')).toBeInTheDocument();
+    expect(screen.getByText('Health Boost +15%')).toBeInTheDocument();
+  });
+});
diff --git a/app/generator/components/ReadmeInsight.tsx b/app/generator/components/ReadmeInsight.tsx
new file mode 100644
index 000000000..52ef05d7d
--- /dev/null
+++ b/app/generator/components/ReadmeInsight.tsx
@@ -0,0 +1,69 @@
+'use client';
+
+import { useMemo } from 'react';
+import { Sparkles } from 'lucide-react';
+import type { GeneratorState } from '../types';
+
+interface ReadmeInsightProps {
+  state: GeneratorState;
+}
+
+export function ReadmeInsight({ state }: ReadmeInsightProps) {
+  const activeTip = useMemo(() => {
+    const hasName = (state.name || '').trim().length > 0;
+    const hasDescription = (state.description || '').trim().length > 0;
+    const hasSocials =
+      (state.selectedSocials?.length || 0) > 0 &&
+      state.selectedSocials.some((id) => (state.socialLinks?.[id] || '').trim().length > 0);
+    const hasCommitPulse = !!state.showCommitPulse;
+
+    if (!hasDescription) {
+      return { text: 'Improve description clarity', boost: '+20%' };
+    }
+    if (!hasCommitPulse) {
+      return { text: 'Add badges for credibility', boost: '+10%' };
+    }
+    if (!hasSocials) {
+      return { text: 'Include social links', boost: '+20%' };
+    }
+    if (!hasName) {
+      return { text: 'Add badges for credibility', boost: '+15%' };
+    }
+
+    // Default fallback
+    return { text: 'Add installation steps', boost: '+15%' };
+  }, [
+    state.name,
+    state.description,
+    state.selectedSocials,
+    state.socialLinks,
+    state.showCommitPulse,
+  ]);
+
+  return (
+    <div
+      className="rounded-2xl border border-gray-200 dark:border-white/10 bg-white dark:bg-[#111111] overflow-hidden shadow-sm hover:border-cyan-500/30 hover:shadow-md dark:hover:shadow-cyan-500/5 transition-all duration-300 w-full p-4 flex flex-col gap-3"
+      aria-label="README Insight"
+    >
+      {/* Header */}
+      <div className="flex items-center gap-2 border-b border-gray-100 dark:border-white/5 pb-2">
+        <Sparkles size={14} className="text-cyan-500 dark:text-cyan-400 animate-pulse" />
+        <h3 className="text-xs font-semibold text-gray-900 dark:text-white uppercase tracking-wider">
+          README Insight
+        </h3>
+      </div>
+
+      {/* Tip & Badge Content */}
+      <div className="flex flex-col gap-2.5">
+        <p className="text-xs text-gray-700 dark:text-white/80 font-medium leading-relaxed">
+          💡 {activeTip.text}
+        </p>
+        <div className="flex">
+          <span className="inline-flex items-center gap-1 px-2.5 py-0.5 rounded-full text-[10px] font-semibold bg-emerald-500/10 text-emerald-600 dark:text-emerald-400 border border-emerald-500/20">
+            Health Boost {activeTip.boost}
+          </span>
+        </div>
+      </div>
+    </div>
+  );
+}