From 4f1766b5011c02aa889212678f1565e49ae5a5f2 Mon Sep 17 00:00:00 2001
From: AndyMik90 <andre@mikalsenutvikling.no>
Date: Thu, 18 Dec 2025 20:49:46 +0100
Subject: [PATCH] fix: correct CompetitorAnalysisViewer to match type
 definitions
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Fix TypeScript errors by using correct property names from types:
- Replace userQuotes with source and frequency fields
- Change opportunityScore to opportunity
- Replace summary with insightsSummary structure
- Display top pain points, differentiator opportunities, and market trends

All properties now match the CompetitorPainPoint and CompetitorAnalysis
type definitions in roadmap.ts.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
---
 .../components/CompetitorAnalysisViewer.tsx   | 74 ++++++++++++++-----
 1 file changed, 54 insertions(+), 20 deletions(-)

diff --git a/auto-claude-ui/src/renderer/components/CompetitorAnalysisViewer.tsx b/auto-claude-ui/src/renderer/components/CompetitorAnalysisViewer.tsx
index f8f900c6..c71043d7 100644
--- a/auto-claude-ui/src/renderer/components/CompetitorAnalysisViewer.tsx
+++ b/auto-claude-ui/src/renderer/components/CompetitorAnalysisViewer.tsx
@@ -107,24 +107,26 @@ export function CompetitorAnalysisViewer({
                               <p className="text-sm font-medium">
                                 {painPoint.description}
                               </p>
-                              {painPoint.userQuotes && painPoint.userQuotes.length > 0 && (
-                                <div className="mt-2 space-y-1">
-                                  {painPoint.userQuotes.map((quote, idx) => (
-                                    <p
-                                      key={idx}
-                                      className="text-xs text-muted-foreground italic border-l-2 border-muted pl-2"
-                                    >
-                                      "{quote}"
-                                    </p>
-                                  ))}
-                                </div>
-                              )}
-                              {painPoint.opportunityScore !== undefined && (
+                              {painPoint.source && (
                                 <div className="mt-2">
                                   <span className="text-xs text-muted-foreground">
-                                    Opportunity Score:{' '}
+                                    Source: <span className="italic">{painPoint.source}</span>
+                                  </span>
+                                </div>
+                              )}
+                              {painPoint.frequency && (
+                                <div className="mt-1">
+                                  <span className="text-xs text-muted-foreground">
+                                    Frequency: {painPoint.frequency}
+                                  </span>
+                                </div>
+                              )}
+                              {painPoint.opportunity && (
+                                <div className="mt-1">
+                                  <span className="text-xs text-muted-foreground">
+                                    Opportunity:{' '}
                                     <span className="font-medium text-foreground">
-                                      {painPoint.opportunityScore}/10
+                                      {painPoint.opportunity}
                                     </span>
                                   </span>
                                 </div>
@@ -139,11 +141,43 @@ export function CompetitorAnalysisViewer({
               </div>
             ))}
 
-            {/* Summary */}
-            {analysis.summary && (
-              <div className="rounded-lg bg-primary/5 border border-primary/20 p-4">
-                <h4 className="text-sm font-semibold mb-2">Market Summary</h4>
-                <p className="text-sm text-muted-foreground">{analysis.summary}</p>
+            {/* Insights Summary */}
+            {analysis.insightsSummary && (
+              <div className="rounded-lg bg-primary/5 border border-primary/20 p-4 space-y-3">
+                <h4 className="text-sm font-semibold">Market Insights Summary</h4>
+
+                {analysis.insightsSummary.topPainPoints.length > 0 && (
+                  <div>
+                    <p className="text-xs font-medium text-muted-foreground mb-1">Top Pain Points:</p>
+                    <ul className="text-sm space-y-1">
+                      {analysis.insightsSummary.topPainPoints.map((point, idx) => (
+                        <li key={idx} className="text-muted-foreground">• {point}</li>
+                      ))}
+                    </ul>
+                  </div>
+                )}
+
+                {analysis.insightsSummary.differentiatorOpportunities.length > 0 && (
+                  <div>
+                    <p className="text-xs font-medium text-muted-foreground mb-1">Differentiator Opportunities:</p>
+                    <ul className="text-sm space-y-1">
+                      {analysis.insightsSummary.differentiatorOpportunities.map((opp, idx) => (
+                        <li key={idx} className="text-muted-foreground">• {opp}</li>
+                      ))}
+                    </ul>
+                  </div>
+                )}
+
+                {analysis.insightsSummary.marketTrends.length > 0 && (
+                  <div>
+                    <p className="text-xs font-medium text-muted-foreground mb-1">Market Trends:</p>
+                    <ul className="text-sm space-y-1">
+                      {analysis.insightsSummary.marketTrends.map((trend, idx) => (
+                        <li key={idx} className="text-muted-foreground">• {trend}</li>
+                      ))}
+                    </ul>
+                  </div>
+                )}
               </div>
             )}
           </div>