From b2db7afabe9a12a4749c23f70b2ea204311a560d Mon Sep 17 00:00:00 2001
From: ELITA <gonsalveselita05@gmail.com>
Date: Sun, 31 May 2026 21:02:47 +0530
Subject: [PATCH 1/4] perf: memoize IssueCard to avoid unnecessary rerenders

---
 package-lock.json                  |  4 +++
 src/panel/components/IssueCard.tsx | 49 +++++++++++++++---------------
 2 files changed, 28 insertions(+), 25 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 5534842..f38abcf 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -28,6 +28,10 @@
         "vite": "^5.0.12",
         "vitest": "^4.0.18",
         "wrangler": "^4.67.0"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/hoainho"
       }
     },
     "node_modules/@acemir/cssom": {
diff --git a/src/panel/components/IssueCard.tsx b/src/panel/components/IssueCard.tsx
index b050d60..40c4fa4 100644
--- a/src/panel/components/IssueCard.tsx
+++ b/src/panel/components/IssueCard.tsx
@@ -1,4 +1,4 @@
-import { useState } from 'react';
+import React, { useState } from 'react';
 import type { Issue } from '@/types';
 
 interface IssueCardProps {
@@ -79,13 +79,14 @@ const ISSUE_INFO: Record<string, { title: string; why: string; learnUrl?: string
   },
 };
 
-export function IssueCard({ issue }: IssueCardProps) {
+export const IssueCard = React.memo(function IssueCard({
+  issue,
+}: IssueCardProps) {
   const [expanded, setExpanded] = useState(false);
-
   const severity = SEVERITY_CONFIG[issue.severity];
   const info = ISSUE_INFO[issue.type] || { title: issue.type, why: '' };
   const location = issue.location;
-  
+
   const renderCountMatch = issue.message.match(/Rendered (\d+) times/);
   const renderCount = renderCountMatch ? parseInt(renderCountMatch[1], 10) : null;
 
@@ -99,12 +100,12 @@ export function IssueCard({ issue }: IssueCardProps) {
         <div className="issue-info">
           <div className="issue-title-row">
             <h4 className="issue-title">{info.title}</h4>
-            <span 
-              className="severity-badge" 
-              style={{ 
-                backgroundColor: severity.bgColor, 
+            <span
+              className="severity-badge"
+              style={{
+                backgroundColor: severity.bgColor,
                 color: severity.color,
-                border: `1px solid ${severity.color}`
+                border: `1px solid ${severity.color}`,
               }}
             >
               {severity.label}
@@ -160,7 +161,7 @@ export function IssueCard({ issue }: IssueCardProps) {
 
           {location?.closureInfo && (
             <div className="closure-info">
-              <strong><span className="action-badge action-badge--search" /> Closure Timeline:</strong>
+              <strong>🔍 Closure Timeline:</strong>
               <div className="closure-timeline">
                 <div className="timeline-item created">
                   <span className="timeline-badge">Created</span>
@@ -176,7 +177,7 @@ export function IssueCard({ issue }: IssueCardProps) {
                   </span>
                 </div>
               </div>
-              
+
               <div className="closure-details">
                 <div className="closure-row">
                   <span className="closure-label">Function:</span>
@@ -219,7 +220,7 @@ export function IssueCard({ issue }: IssueCardProps) {
           )}
 
           <div className="issue-suggestion">
-            <strong><span className="action-badge action-badge--suggestion" /> Suggestion:</strong>
+            <strong>💡 Suggestion:</strong>
             <p>{issue.suggestion}</p>
           </div>
 
@@ -232,20 +233,18 @@ export function IssueCard({ issue }: IssueCardProps) {
             </div>
           )}
 
-          <div className="issue-actions">
-            {info.learnUrl && (
-              <a
-                href={info.learnUrl}
-                target="_blank"
-                rel="noopener noreferrer"
-                className="learn-link"
-              >
-                <span className="action-badge action-badge--learn" /> Learn more
-              </a>
-            )}
-          </div>
+          {info.learnUrl && (
+            <a
+            href={info.learnUrl}
+            target="_blank"
+             rel="noopener noreferrer"
+             className="learn-more-link"
+            >
+         📚 Learn more
+        </a>
+        )}
         </div>
       )}
     </div>
   );
-}
+});
\ No newline at end of file

From df0c6ebb7dbe780ae8de934b98cd4b0da697b2d3 Mon Sep 17 00:00:00 2001
From: ELITA <gonsalveselita05@gmail.com>
Date: Sun, 31 May 2026 23:18:07 +0530
Subject: [PATCH 2/4] revised perf: memoize IssueCard to avoid unnecessary
 rerenders

---
 package-lock.json                  | 4 ----
 src/panel/components/IssueCard.tsx | 5 ++---
 2 files changed, 2 insertions(+), 7 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index f38abcf..5534842 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -28,10 +28,6 @@
         "vite": "^5.0.12",
         "vitest": "^4.0.18",
         "wrangler": "^4.67.0"
-      },
-      "funding": {
-        "type": "github",
-        "url": "https://github.com/sponsors/hoainho"
       }
     },
     "node_modules/@acemir/cssom": {
diff --git a/src/panel/components/IssueCard.tsx b/src/panel/components/IssueCard.tsx
index 40c4fa4..0150f16 100644
--- a/src/panel/components/IssueCard.tsx
+++ b/src/panel/components/IssueCard.tsx
@@ -79,9 +79,8 @@ const ISSUE_INFO: Record<string, { title: string; why: string; learnUrl?: string
   },
 };
 
-export const IssueCard = React.memo(function IssueCard({
-  issue,
-}: IssueCardProps) {
+export const IssueCard = React.memo(function IssueCard({ issue }: IssueCardProps) {
+
   const [expanded, setExpanded] = useState(false);
   const severity = SEVERITY_CONFIG[issue.severity];
   const info = ISSUE_INFO[issue.type] || { title: issue.type, why: '' };

From 62f84412191a066079b7f6eca9fcc4f9b9313b46 Mon Sep 17 00:00:00 2001
From: ELITA <gonsalveselita05@gmail.com>
Date: Mon, 1 Jun 2026 18:01:55 +0530
Subject: [PATCH 3/4] fix(ui): restore action badge icons and issue-actions
 wrapper

---
 src/panel/components/IssueCard.tsx | 28 +++++++++++++++-------------
 1 file changed, 15 insertions(+), 13 deletions(-)

diff --git a/src/panel/components/IssueCard.tsx b/src/panel/components/IssueCard.tsx
index 0150f16..3da4474 100644
--- a/src/panel/components/IssueCard.tsx
+++ b/src/panel/components/IssueCard.tsx
@@ -160,7 +160,7 @@ export const IssueCard = React.memo(function IssueCard({ issue }: IssueCardProps
 
           {location?.closureInfo && (
             <div className="closure-info">
-              <strong>🔍 Closure Timeline:</strong>
+              <strong><span className="action-badge action-badge--search" /> Closure Timeline:</strong>
               <div className="closure-timeline">
                 <div className="timeline-item created">
                   <span className="timeline-badge">Created</span>
@@ -219,7 +219,7 @@ export const IssueCard = React.memo(function IssueCard({ issue }: IssueCardProps
           )}
 
           <div className="issue-suggestion">
-            <strong>💡 Suggestion:</strong>
+            <strong><span className="action-badge action-badge--suggestion" /> Suggestion:</strong>
             <p>{issue.suggestion}</p>
           </div>
 
@@ -232,18 +232,20 @@ export const IssueCard = React.memo(function IssueCard({ issue }: IssueCardProps
             </div>
           )}
 
-          {info.learnUrl && (
-            <a
-            href={info.learnUrl}
-            target="_blank"
-             rel="noopener noreferrer"
-             className="learn-more-link"
-            >
-         📚 Learn more
-        </a>
-        )}
+         <div className="issue-actions">
+            {info.learnUrl && (
+              <a
+                href={info.learnUrl}
+                target="_blank"
+                rel="noopener noreferrer"
+                className="learn-link"
+              >
+                <span className="action-badge action-badge--learn" /> Learn more
+              </a>
+            )}
+          </div>
         </div>
       )}
     </div>
   );
-});
\ No newline at end of file
+});

From 24773520d2046369be8b8005dd183f6cec297805 Mon Sep 17 00:00:00 2001
From: ELITA <gonsalveselita05@gmail.com>
Date: Tue, 2 Jun 2026 13:24:20 +0530
Subject: [PATCH 4/4] revert: remove ISSUE_INFO entries that lack corresponding
 detectors

---
 src/panel/components/IssueCard.tsx | 29 ++++-------------------------
 1 file changed, 4 insertions(+), 25 deletions(-)

diff --git a/src/panel/components/IssueCard.tsx b/src/panel/components/IssueCard.tsx
index 3da4474..ba6cd21 100644
--- a/src/panel/components/IssueCard.tsx
+++ b/src/panel/components/IssueCard.tsx
@@ -12,11 +12,7 @@ const SEVERITY_CONFIG = {
 };
 
 const ISSUE_INFO: Record<string, { title: string; why: string; learnUrl?: string }> = {
-  DIRECT_STATE_MUTATION: {
-    title: 'Direct State Mutation',
-    why: 'React cannot detect direct state mutations and will not re-render the component.',
-    learnUrl: 'https://react.dev/learn/updating-objects-in-state',
-  },
+  
   MISSING_KEY: {
     title: 'Missing Key in List',
     why: 'Keys help React identify which items have changed, are added, or removed.',
@@ -27,11 +23,7 @@ const ISSUE_INFO: Record<string, { title: string; why: string; learnUrl?: string
     why: 'Using index as key can cause issues when list items are reordered or filtered.',
     learnUrl: 'https://react.dev/learn/rendering-lists#why-does-react-need-keys',
   },
-  DUPLICATE_KEY: {
-    title: 'Duplicate Keys',
-    why: 'Duplicate keys will cause React to incorrectly update and render components.',
-    learnUrl: 'https://react.dev/learn/rendering-lists',
-  },
+
   MISSING_CLEANUP: {
     title: 'Missing Effect Cleanup',
     why: 'Effects with subscriptions, timers, or event listeners need cleanup to prevent memory leaks.',
@@ -42,11 +34,7 @@ const ISSUE_INFO: Record<string, { title: string; why: string; learnUrl?: string
     why: 'Missing dependencies can cause stale closures and bugs.',
     learnUrl: 'https://react.dev/reference/react/useEffect#specifying-reactive-dependencies',
   },
-  EXTRA_DEP: {
-    title: 'Unnecessary Dependencies',
-    why: 'Extra dependencies can cause effects to run more often than needed.',
-    learnUrl: 'https://react.dev/reference/react/useEffect#removing-unnecessary-dependencies',
-  },
+ 
   INFINITE_LOOP_RISK: {
     title: 'Infinite Loop Risk',
     why: 'This effect may cause infinite re-renders if state is updated without proper guards.',
@@ -57,16 +45,7 @@ const ISSUE_INFO: Record<string, { title: string; why: string; learnUrl?: string
     why: 'Too many re-renders can cause performance issues and poor user experience.',
     learnUrl: 'https://react.dev/reference/react/memo',
   },
-  UNNECESSARY_RERENDER: {
-    title: 'Unnecessary Re-render',
-    why: 'Component re-rendered when its props and state did not change.',
-    learnUrl: 'https://react.dev/reference/react/useMemo',
-  },
-  DEV_MODE_IN_PROD: {
-    title: 'Development Mode in Production',
-    why: 'Running React in development mode significantly impacts performance.',
-    learnUrl: 'https://react.dev/learn/react-developer-tools#development-vs-production-builds',
-  },
+
   STALE_CLOSURE: {
     title: 'Stale Closure Detected',
     why: 'This callback was created in an earlier render and may be using outdated state or props values. This is one of the most common and hard-to-debug React bugs.',