Add Macro Report Generator to Trading tab

components/mission-control/MacroReportGenerator.tsx

@@ -0,0 +1,80 @@
+'use client'
+
+import { useState } from 'react'
+
+export function MacroReportGenerator() {
+  const [generating, setGenerating] = useState(false)
+  const [report, setReport] = useState('')
+
+  const prompt = `You are a professional macro analyst and front‑end designer building a single‑page HTML report for macro traders and investors. Create one self‑contained HTML file.
+
+DESIGN & UX CONSTRAINTS:
+- Use only native HTML + CSS + minimal inline JS
+- No external fonts (use system-stack)
+- Color scheme: dark background (#0f0f12), light gray text (#e0e0e0), blue/orange accents
+- Large, readable, editorial-style typography
+- All charts/gauges CSS-driven
+- Ticker bar: smooth continuous loop
+- Reading progress bar: thin bar at top
+
+REPORT STRUCTURE:
+
+1. Hero + LIVE DATA BAR with key indicators (S&P 500, Initial Claims, Unemployment, Fed Funds, M2, Bitcoin, ETH, Gold)
+
+2. Header: "THE MACROVERSE — Late Business Cycle Analysis" with date and assessment
+
+3. Scrolling ticker bar with macro text
+
+4. Reading progress bar at top
+
+5. Core sections:
+   - 01: Cycle Indicator Formula
+   - 02: Where We Are in the Cycle (timeline)
+   - 03: Negative Feedback Loop (5-step)
+   - 04: Risk Cascade (tiers)
+   - 05: Midterm Year Window
+   - 06: Recession Arrives
+   - 07: Wall Street Views
+   - 08: Positioning
+
+6. Live Macro Indicators Dashboard (4-6 boxes)
+
+7. Cycle Event Timeline
+
+8. Key Watch Levels
+
+9. Footer with sources and disclaimer
+
+OUTPUT: One complete HTML file, copy-paste ready.`
+
+  const generateReport = async () => {
+    setGenerating(true)
+    // This would call an LLM - for now show placeholder
+    setReport('Report generation would use MiniMax or Claude API')
+    setGenerating(false)
+  }
+
+  return (
+    <div className="border border-white/20 rounded-lg p-4 bg-white/5">
+      <h3 className="text-lg font-bold mb-4">📊 Macro Report Generator</h3>
+      
+      <p className="text-white/70 mb-4">
+        Generate professional macro analysis reports like "The Macroverse" — self-contained HTML files with dark design, live data, and animated charts.
+      </p>
+
+      <button
+        onClick={generateReport}
+        disabled={generating}
+        className="px-4 py-2 bg-brand-pink rounded-lg text-white font-medium hover:bg-brand-pink/80 disabled:opacity-50"
+      >
+        {generating ? 'Generating...' : 'Generate Report'}
+      </button>
+
+      {report && (
+        <div className="mt-4 p-3 bg-white/5 rounded-lg">
+          <p className="text-sm text-white/70">{report}</p>
+        </div>
+      )}
+    </div>
+  )
+}

components/mission-control/TradingPanel.tsx

@@ -3,6 +3,7 @@
 import { useState, useEffect } from 'react'
 import { TradingChart } from './TradingChart'
 import { TradingTools } from './TradingTools'
+import { MacroReportGenerator } from './MacroReportGenerator'
 
 type TradingTab = 'research' | 'strategies' | 'execution' | 'journal' | 'tools'
 
@@ -275,6 +276,7 @@ export function TradingPanel() {
     { id: 'execution', label: '⚡ Execution', count: trades.filter(t => t.status === 'open').length },
     { id: 'journal', label: '📔 Journal', count: trades.length },
     { id: 'tools', label: '🧮 Tools', count: 3 },
+    { id: 'macro', label: '📊 Macro Report', count: 0 },
   ]
 
   const filteredTrades = trades.filter(t => {
@@ -564,6 +566,11 @@ export function TradingPanel() {
         <TradingTools />
       )}
 
+      {/* Macro Report Tab */}
+      {activeTab === 'macro' && (
+        <MacroReportGenerator />
+      )}
+
       {/* Full Analysis Modal */}
       {showFullAnalysis && (
         <div className="fixed inset-0 bg-black/80 backdrop-blur-sm z-50 flex items-center justify-center p-4">