Fix MCPDataPanel to use metrics from activity log

- Use MetricEntry[] from workflow metrics instead of parsing raw_data
- Group metrics by source (financials, valuation, volatility, macro)
- Show news articles from raw_data when available
- Fallback to metric display for news/sentiment if no URLs

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

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

frontend/src/App.tsx

@@ -606,8 +606,8 @@ Generated by Instant SWOT Agent`
                   </div>
 
                   {/* MCP Source Data */}
-                  {analysisResult.raw_data && Object.keys(analysisResult.raw_data).length > 0 && (
-                    <MCPDataPanel rawData={analysisResult.raw_data} />
+                  {metrics.length > 0 && (
+                    <MCPDataPanel metrics={metrics} rawData={analysisResult.raw_data} />
                   )}
 
                   {/* SWOT Cards */}

frontend/src/components/MCPDataPanel.tsx

@@ -1,4 +1,5 @@
 import React from "react"
+import type { MetricEntry } from "@/lib/api"
 import type { MCPRawData } from "@/lib/types"
 import {
   DollarSign,
@@ -11,48 +12,44 @@ import {
 } from "lucide-react"
 
 interface MCPDataPanelProps {
-  rawData: MCPRawData
+  metrics: MetricEntry[]
+  rawData?: MCPRawData
 }
 
 // Format numbers for display
-function formatValue(value: unknown, type: 'currency' | 'percent' | 'ratio' | 'number' = 'number'): string {
+function formatValue(value: string | number): string {
   if (value === null || value === undefined) return '—'
 
-  const num = typeof value === 'number' ? value : parseFloat(String(value))
-  if (isNaN(num)) return String(value)
-
-  switch (type) {
-    case 'currency':
-      if (Math.abs(num) >= 1e12) return `$${(num / 1e12).toFixed(1)}T`
-      if (Math.abs(num) >= 1e9) return `$${(num / 1e9).toFixed(1)}B`
-      if (Math.abs(num) >= 1e6) return `$${(num / 1e6).toFixed(1)}M`
-      return `$${num.toLocaleString()}`
-    case 'percent':
-      return `${(num * 100).toFixed(1)}%`
-    case 'ratio':
-      return num.toFixed(2)
-    default:
-      return num.toFixed(2)
-  }
+  if (typeof value === 'string') return value
+
+  const num = value
+  if (Math.abs(num) >= 1e12) return `$${(num / 1e12).toFixed(1)}T`
+  if (Math.abs(num) >= 1e9) return `$${(num / 1e9).toFixed(1)}B`
+  if (Math.abs(num) >= 1e6) return `$${(num / 1e6).toFixed(1)}M`
+  if (Math.abs(num) < 0.01 && num !== 0) return num.toExponential(2)
+  if (Number.isInteger(num)) return num.toLocaleString()
+  return num.toFixed(2)
 }
 
 // MCP row component
 interface MCPRowProps {
   icon: React.ReactNode
   label: string
+  color: string
   children: React.ReactNode
-  available: boolean
 }
 
-function MCPRow({ icon, label, children, available }: MCPRowProps) {
+function MCPRow({ icon, label, color, children }: MCPRowProps) {
+  const hasContent = React.Children.toArray(children).length > 0
+
   return (
-    <div className={`flex items-center gap-2 py-1.5 px-3 border-b border-border last:border-b-0 ${!available ? 'opacity-50' : ''}`}>
-      <div className="flex items-center gap-2 w-24 shrink-0">
+    <div className={`flex items-center gap-2 py-1.5 px-3 border-b border-border last:border-b-0 ${!hasContent ? 'opacity-40' : ''}`}>
+      <div className={`flex items-center gap-2 w-24 shrink-0 ${color}`}>
         {icon}
-        <span className="text-xs font-medium text-muted-foreground">{label}</span>
+        <span className="text-xs font-medium">{label}</span>
       </div>
-      <div className="flex-1 flex items-center gap-3 overflow-x-auto text-xs">
-        {available ? children : <span className="text-muted-foreground italic">Unavailable</span>}
+      <div className="flex-1 flex items-center gap-4 overflow-x-auto text-xs scrollbar-thin">
+        {hasContent ? children : <span className="text-muted-foreground italic">No data</span>}
       </div>
     </div>
   )
@@ -73,7 +70,7 @@ function DataItem({ label, value }: DataItemProps) {
   )
 }
 
-// Link item component for news/sentiment
+// Link item component for news
 interface LinkItemProps {
   title: string
   url: string
@@ -85,7 +82,7 @@ function LinkItem({ title, url }: LinkItemProps) {
       href={url}
       target="_blank"
       rel="noopener noreferrer"
-      className="inline-flex items-center gap-1 text-blue-400 hover:text-blue-300 hover:underline whitespace-nowrap max-w-[200px] truncate"
+      className="inline-flex items-center gap-1 text-blue-400 hover:text-blue-300 hover:underline whitespace-nowrap max-w-[250px]"
       title={title}
     >
       <span className="truncate">{title}</span>
@@ -94,10 +91,52 @@ function LinkItem({ title, url }: LinkItemProps) {
   )
 }
 
-export function MCPDataPanel({ rawData }: MCPDataPanelProps) {
-  const sourcesAvailable = new Set(rawData.sources_available || [])
-
-  const { financials, valuation, volatility, macro, news, sentiment } = rawData
+export function MCPDataPanel({ metrics, rawData }: MCPDataPanelProps) {
+  // Group metrics by source
+  const groupedMetrics = React.useMemo(() => {
+    const groups: Record<string, Array<{metric: string, value: string | number}>> = {
+      financials: [],
+      valuation: [],
+      volatility: [],
+      macro: [],
+      news: [],
+      sentiment: []
+    }
+
+    for (const m of metrics) {
+      const source = m.source.toLowerCase()
+      if (source in groups) {
+        groups[source].push({ metric: m.metric, value: m.value })
+      }
+    }
+
+    return groups
+  }, [metrics])
+
+  // Extract news articles from raw_data if available
+  const newsArticles = React.useMemo(() => {
+    if (!rawData) return []
+
+    // Try to get articles from metrics.news.articles
+    const newsData = rawData.metrics?.news || rawData.news
+    if (newsData && 'articles' in newsData) {
+      return (newsData.articles as Array<{title: string, url: string}>).slice(0, 4)
+    }
+
+    // Fallback: check if news is an array directly
+    if (Array.isArray(rawData.news)) {
+      return rawData.news.slice(0, 4)
+    }
+
+    return []
+  }, [rawData])
+
+  // Check if we have any data at all
+  const hasAnyData = metrics.length > 0 || newsArticles.length > 0
+
+  if (!hasAnyData) {
+    return null
+  }
 
   return (
     <div className="bg-card rounded-lg border border-border overflow-hidden">
@@ -108,109 +147,74 @@ export function MCPDataPanel({ rawData }: MCPDataPanelProps) {
       <div className="divide-y divide-border">
         {/* Financials */}
         <MCPRow
-          icon={<DollarSign className="h-4 w-4 text-emerald-500" />}
+          icon={<DollarSign className="h-4 w-4" />}
           label="Financials"
-          available={sourcesAvailable.has('financials')}
+          color="text-emerald-500"
         >
-          {financials && (
-            <>
-              {financials.revenue !== undefined && <DataItem label="Revenue" value={formatValue(financials.revenue, 'currency')} />}
-              {financials.gross_margin !== undefined && <DataItem label="Gross Margin" value={formatValue(financials.gross_margin, 'percent')} />}
-              {financials.operating_margin !== undefined && <DataItem label="Op Margin" value={formatValue(financials.operating_margin, 'percent')} />}
-              {financials.net_margin !== undefined && <DataItem label="Net Margin" value={formatValue(financials.net_margin, 'percent')} />}
-              {financials.debt_to_equity !== undefined && <DataItem label="D/E" value={formatValue(financials.debt_to_equity, 'ratio')} />}
-              {financials.current_ratio !== undefined && <DataItem label="Current" value={formatValue(financials.current_ratio, 'ratio')} />}
-            </>
-          )}
+          {groupedMetrics.financials.map((m, i) => (
+            <DataItem key={i} label={m.metric} value={formatValue(m.value)} />
+          ))}
         </MCPRow>
 
         {/* Valuation */}
         <MCPRow
-          icon={<TrendingUp className="h-4 w-4 text-blue-500" />}
+          icon={<TrendingUp className="h-4 w-4" />}
           label="Valuation"
-          available={sourcesAvailable.has('valuation')}
+          color="text-blue-500"
         >
-          {valuation && (
-            <>
-              {valuation.market_cap !== undefined && <DataItem label="Mkt Cap" value={formatValue(valuation.market_cap, 'currency')} />}
-              {valuation.pe_ratio !== undefined && <DataItem label="P/E" value={formatValue(valuation.pe_ratio, 'ratio')} />}
-              {valuation.ps_ratio !== undefined && <DataItem label="P/S" value={formatValue(valuation.ps_ratio, 'ratio')} />}
-              {valuation.pb_ratio !== undefined && <DataItem label="P/B" value={formatValue(valuation.pb_ratio, 'ratio')} />}
-              {valuation.ev_ebitda !== undefined && <DataItem label="EV/EBITDA" value={formatValue(valuation.ev_ebitda, 'ratio')} />}
-              {valuation.peg_ratio !== undefined && <DataItem label="PEG" value={formatValue(valuation.peg_ratio, 'ratio')} />}
-            </>
-          )}
+          {groupedMetrics.valuation.map((m, i) => (
+            <DataItem key={i} label={m.metric} value={formatValue(m.value)} />
+          ))}
         </MCPRow>
 
         {/* Volatility */}
         <MCPRow
-          icon={<Activity className="h-4 w-4 text-yellow-500" />}
+          icon={<Activity className="h-4 w-4" />}
           label="Volatility"
-          available={sourcesAvailable.has('volatility')}
+          color="text-yellow-500"
         >
-          {volatility && (
-            <>
-              {volatility.beta !== undefined && <DataItem label="Beta" value={formatValue(volatility.beta, 'ratio')} />}
-              {volatility.vix !== undefined && <DataItem label="VIX" value={formatValue(volatility.vix, 'ratio')} />}
-              {volatility.historical_volatility !== undefined && <DataItem label="Hist Vol" value={formatValue(volatility.historical_volatility, 'percent')} />}
-              {volatility.implied_volatility !== undefined && <DataItem label="Impl Vol" value={formatValue(volatility.implied_volatility, 'percent')} />}
-            </>
-          )}
+          {groupedMetrics.volatility.map((m, i) => (
+            <DataItem key={i} label={m.metric} value={formatValue(m.value)} />
+          ))}
         </MCPRow>
 
         {/* Macro */}
         <MCPRow
-          icon={<Globe className="h-4 w-4 text-purple-500" />}
+          icon={<Globe className="h-4 w-4" />}
           label="Macro"
-          available={sourcesAvailable.has('macro')}
+          color="text-purple-500"
         >
-          {macro && (
-            <>
-              {macro.gdp_growth !== undefined && <DataItem label="GDP" value={formatValue(macro.gdp_growth, 'percent')} />}
-              {macro.interest_rate !== undefined && <DataItem label="Fed Rate" value={formatValue(macro.interest_rate, 'percent')} />}
-              {macro.inflation_rate !== undefined && <DataItem label="CPI" value={formatValue(macro.inflation_rate, 'percent')} />}
-              {macro.unemployment_rate !== undefined && <DataItem label="Unemp" value={formatValue(macro.unemployment_rate, 'percent')} />}
-            </>
-          )}
+          {groupedMetrics.macro.map((m, i) => (
+            <DataItem key={i} label={m.metric} value={formatValue(m.value)} />
+          ))}
         </MCPRow>
 
         {/* News */}
         <MCPRow
-          icon={<Newspaper className="h-4 w-4 text-orange-500" />}
+          icon={<Newspaper className="h-4 w-4" />}
           label="News"
-          available={sourcesAvailable.has('news')}
+          color="text-orange-500"
         >
-          {news && news.length > 0 && (
-            <>
-              {news.slice(0, 4).map((article, i) => (
-                <LinkItem
-                  key={i}
-                  title={article.title}
-                  url={article.url}
-                />
-              ))}
-              {news.length > 4 && (
-                <span className="text-muted-foreground">+{news.length - 4} more</span>
-              )}
-            </>
-          )}
+          {newsArticles.length > 0 ? (
+            newsArticles.map((article, i) => (
+              <LinkItem key={i} title={article.title} url={article.url} />
+            ))
+          ) : groupedMetrics.news.length > 0 ? (
+            groupedMetrics.news.map((m, i) => (
+              <DataItem key={i} label={m.metric} value={formatValue(m.value)} />
+            ))
+          ) : null}
         </MCPRow>
 
         {/* Sentiment */}
         <MCPRow
-          icon={<MessageSquare className="h-4 w-4 text-pink-500" />}
+          icon={<MessageSquare className="h-4 w-4" />}
           label="Sentiment"
-          available={sourcesAvailable.has('sentiment')}
+          color="text-pink-500"
         >
-          {sentiment && (
-            <>
-              {sentiment.analyst_rating && <DataItem label="Rating" value={String(sentiment.analyst_rating)} />}
-              {sentiment.analyst_target_price !== undefined && <DataItem label="Target" value={formatValue(sentiment.analyst_target_price, 'currency')} />}
-              {sentiment.social_sentiment !== undefined && <DataItem label="Social" value={formatValue(sentiment.social_sentiment, 'percent')} />}
-              {sentiment.news_sentiment !== undefined && <DataItem label="News Sent" value={formatValue(sentiment.news_sentiment, 'percent')} />}
-              {sentiment.insider_sentiment && <DataItem label="Insider" value={String(sentiment.insider_sentiment)} />}
-            </>
-          )}
+          {groupedMetrics.sentiment.map((m, i) => (
+            <DataItem key={i} label={m.metric} value={formatValue(m.value)} />
+          ))}
         </MCPRow>
       </div>
     </div>

frontend/src/lib/types.ts

@@ -26,6 +26,7 @@ export interface SentimentData {
 export interface MCPRawData {
   sources_available?: string[]
   sources_failed?: string[]
+  metrics?: Record<string, unknown>
   // Financials MCP
   financials?: {
     revenue?: number

static/index.html

@@ -5,8 +5,8 @@
     <link rel="icon" type="image/svg+xml" href="/vite.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>frontend</title>
-    <script type="module" crossorigin src="/assets/index-D6SjG3SU.js"></script>
-    <link rel="stylesheet" crossorigin href="/assets/index-BjoTJiPq.css">
+    <script type="module" crossorigin src="/assets/index-DP1mfG7B.js"></script>
+    <link rel="stylesheet" crossorigin href="/assets/index-DRWwG9eL.css">
   </head>
   <body>
     <div id="root"></div>