UI improvements: icons, labels, status, and print layout

- Match ProcessFlow MCP icons with MCPDataPanel (DollarSign, TrendingUp, Activity, MessageSquare)
- Add "Macro (US)" label in both ProcessFlow and MCPDataPanel
- Show MCP failure status (API unavailable, Partial data) instead of generic "No data"
- Update print layout to 8.27"x11" (most restrictive common size)
- Compact print styles for single-page fit

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

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

frontend/src/App.tsx

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

frontend/src/components/MCPDataPanel.tsx

@@ -1,5 +1,5 @@
 import React from "react"
-import type { MetricEntry } from "@/lib/api"
+import type { MetricEntry, MCPStatus } from "@/lib/api"
 import type { MCPRawData } from "@/lib/types"
 import {
   DollarSign,
@@ -14,6 +14,7 @@ import {
 interface MCPDataPanelProps {
   metrics: MetricEntry[]
   rawData?: MCPRawData
+  mcpStatus?: MCPStatus
 }
 
 // Format numbers for display
@@ -37,19 +38,33 @@ interface MCPRowProps {
   label: string
   color: string
   children: React.ReactNode
+  status?: 'idle' | 'executing' | 'completed' | 'partial' | 'failed'
 }
 
-function MCPRow({ icon, label, color, children }: MCPRowProps) {
+function MCPRow({ icon, label, color, children, status }: MCPRowProps) {
   const hasContent = React.Children.toArray(children).length > 0
+  const isFailed = status === 'failed'
+  const isPartial = status === 'partial'
+
+  // Determine what to show when no content
+  const getEmptyMessage = () => {
+    if (isFailed) return 'API unavailable'
+    if (isPartial) return 'Partial data'
+    return 'No data'
+  }
 
   return (
-    <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}`}>
+    <div className={`flex items-center gap-2 py-1.5 px-3 border-b border-border last:border-b-0 ${!hasContent && !isFailed ? 'opacity-40' : ''}`}>
+      <div className={`flex items-center gap-2 w-28 shrink-0 ${isFailed ? 'text-red-400' : isPartial ? 'text-amber-400' : color}`}>
         {icon}
         <span className="text-xs font-medium">{label}</span>
       </div>
       <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>}
+        {hasContent ? children : (
+          <span className={`italic ${isFailed ? 'text-red-400' : isPartial ? 'text-amber-400' : 'text-muted-foreground'}`}>
+            {getEmptyMessage()}
+          </span>
+        )}
       </div>
     </div>
   )
@@ -91,7 +106,7 @@ function LinkItem({ title, url }: LinkItemProps) {
   )
 }
 
-export function MCPDataPanel({ metrics, rawData }: MCPDataPanelProps) {
+export function MCPDataPanel({ metrics, rawData, mcpStatus }: MCPDataPanelProps) {
   // Group metrics by source
   const groupedMetrics = React.useMemo(() => {
     const groups: Record<string, Array<{metric: string, value: string | number}>> = {
@@ -150,6 +165,7 @@ export function MCPDataPanel({ metrics, rawData }: MCPDataPanelProps) {
           icon={<DollarSign className="h-4 w-4" />}
           label="Financials"
           color="text-emerald-500"
+          status={mcpStatus?.financials}
         >
           {groupedMetrics.financials.map((m, i) => (
             <DataItem key={i} label={m.metric} value={formatValue(m.value)} />
@@ -161,6 +177,7 @@ export function MCPDataPanel({ metrics, rawData }: MCPDataPanelProps) {
           icon={<TrendingUp className="h-4 w-4" />}
           label="Valuation"
           color="text-blue-500"
+          status={mcpStatus?.valuation}
         >
           {groupedMetrics.valuation.map((m, i) => (
             <DataItem key={i} label={m.metric} value={formatValue(m.value)} />
@@ -172,17 +189,19 @@ export function MCPDataPanel({ metrics, rawData }: MCPDataPanelProps) {
           icon={<Activity className="h-4 w-4" />}
           label="Volatility"
           color="text-yellow-500"
+          status={mcpStatus?.volatility}
         >
           {groupedMetrics.volatility.map((m, i) => (
             <DataItem key={i} label={m.metric} value={formatValue(m.value)} />
           ))}
         </MCPRow>
 
-        {/* Macro */}
+        {/* Macro (US) */}
         <MCPRow
           icon={<Globe className="h-4 w-4" />}
-          label="Macro"
+          label="Macro (US)"
           color="text-purple-500"
+          status={mcpStatus?.macro}
         >
           {groupedMetrics.macro.map((m, i) => (
             <DataItem key={i} label={m.metric} value={formatValue(m.value)} />
@@ -194,6 +213,7 @@ export function MCPDataPanel({ metrics, rawData }: MCPDataPanelProps) {
           icon={<Newspaper className="h-4 w-4" />}
           label="News"
           color="text-orange-500"
+          status={mcpStatus?.news}
         >
           {newsArticles.length > 0 ? (
             newsArticles.map((article, i) => (
@@ -211,6 +231,7 @@ export function MCPDataPanel({ metrics, rawData }: MCPDataPanelProps) {
           icon={<MessageSquare className="h-4 w-4" />}
           label="Sentiment"
           color="text-pink-500"
+          status={mcpStatus?.sentiment}
         >
           {groupedMetrics.sentiment.map((m, i) => (
             <DataItem key={i} label={m.metric} value={formatValue(m.value)} />

frontend/src/components/ProcessFlow.tsx

@@ -14,10 +14,9 @@ import {
   GitBranch,
   TrendingUp,
   DollarSign,
-  BarChart3,
+  Activity,
   Globe,
   Newspaper,
-  Heart,
 } from "lucide-react"
 import type { MCPStatus, LLMStatus } from "@/lib/api"
 
@@ -79,12 +78,12 @@ const NODES = {
 const MCP_START_X = NODES.researcher.x + NODE_SIZE / 2 + 40
 const MCP_GAP = 38
 const MCP_SERVERS = [
-  { id: 'financials', label: 'Financials', icon: TrendingUp, x: MCP_START_X },
-  { id: 'valuation', label: 'Valuation', icon: DollarSign, x: MCP_START_X + MCP_GAP },
-  { id: 'volatility', label: 'Volatility', icon: BarChart3, x: MCP_START_X + MCP_GAP * 2 },
-  { id: 'macro', label: 'Macro', icon: Globe, x: MCP_START_X + MCP_GAP * 3 },
+  { id: 'financials', label: 'Financials', icon: DollarSign, x: MCP_START_X },
+  { id: 'valuation', label: 'Valuation', icon: TrendingUp, x: MCP_START_X + MCP_GAP },
+  { id: 'volatility', label: 'Volatility', icon: Activity, x: MCP_START_X + MCP_GAP * 2 },
+  { id: 'macro', label: 'Macro (US)', icon: Globe, x: MCP_START_X + MCP_GAP * 3 },
   { id: 'news', label: 'News', icon: Newspaper, x: MCP_START_X + MCP_GAP * 4 },
-  { id: 'sentiment', label: 'Sentiment', icon: Heart, x: MCP_START_X + MCP_GAP * 5 },
+  { id: 'sentiment', label: 'Sentiment', icon: MessageSquare, x: MCP_START_X + MCP_GAP * 5 },
 ]
 
 const AGENTS_CENTER_X = (NODES.analyzer.x + NODES.editor.x) / 2

frontend/src/index.css

@@ -609,8 +609,8 @@
   header,
   footer,
   aside,
-  .print\\:hidden,
-  button:not(.print\\:block),
+  .print\:hidden,
+  button:not(.print\:block),
   [role="tablist"] {
     display: none !important;
   }
@@ -619,6 +619,8 @@
   main {
     width: 100% !important;
     max-width: 100% !important;
+    padding: 0 !important;
+    margin: 0 !important;
   }
 
   .container {
@@ -632,26 +634,55 @@
     opacity: 1 !important;
   }
 
-  /* Clean card styles */
+  /* Compact card styles for single page fit */
   .card {
     border: 1px solid #ddd !important;
     box-shadow: none !important;
     break-inside: avoid;
     page-break-inside: avoid;
+    margin-bottom: 0.5rem !important;
+  }
+
+  .card-header {
+    padding: 0.5rem 0.75rem !important;
   }
 
-  /* Ensure text is black */
+  .card-content {
+    padding: 0.5rem 0.75rem !important;
+  }
+
+  /* Ensure text is black - compact sizing */
   body {
     color: black !important;
     background: white !important;
-    font-size: 12pt;
-    line-height: 1.5;
+    font-size: 10pt;
+    line-height: 1.3;
   }
 
-  /* Page margins */
+  /* Page size: 8.27" x 11" (most restrictive common between A4 width and Letter height) */
   @page {
-    margin: 1cm;
-    size: A4;
+    margin: 0.5in;
+    size: 8.27in 11in;
+  }
+
+  /* Compact SWOT grid */
+  .grid.md\:grid-cols-2 {
+    gap: 0.5rem !important;
+  }
+
+  /* Compact list items */
+  ul.space-y-2 {
+    gap: 0.25rem !important;
+  }
+
+  ul.space-y-2 li {
+    margin-bottom: 0.125rem !important;
+  }
+
+  /* Source data panel compact */
+  .divide-y > div {
+    padding-top: 0.25rem !important;
+    padding-bottom: 0.25rem !important;
   }
 
   /* Prevent orphans and widows */
@@ -660,9 +691,23 @@
     widows: 3;
   }
 
-  /* Add section labels for print */
-  .text-strength::before { content: ""; }
-  .text-weakness::before { content: ""; }
-  .text-opportunity::before { content: ""; }
-  .text-threat::before { content: ""; }
+  /* Hide process flow and metrics panel */
+  .h-\[260px\] {
+    display: none !important;
+  }
+
+  /* Compact headings */
+  h2 {
+    font-size: 14pt !important;
+    margin-bottom: 0.5rem !important;
+  }
+
+  h3 {
+    font-size: 11pt !important;
+  }
+
+  /* Quality evaluation compact */
+  .space-y-6 {
+    gap: 0.75rem !important;
+  }
 }

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-DP1mfG7B.js"></script>
-    <link rel="stylesheet" crossorigin href="/assets/index-DRWwG9eL.css">
+    <script type="module" crossorigin src="/assets/index-De5OIPDQ.js"></script>
+    <link rel="stylesheet" crossorigin href="/assets/index-CyMUTshU.css">
   </head>
   <body>
     <div id="root"></div>