diff --git a/components/mission-control/MacroReportGenerator.tsx b/components/mission-control/MacroReportGenerator.tsx new file mode 100644 index 0000000..dd41c9c --- /dev/null +++ b/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 ( +
+

📊 Macro Report Generator

+ +

+ Generate professional macro analysis reports like "The Macroverse" — self-contained HTML files with dark design, live data, and animated charts. +

+ + + + {report && ( +
+

{report}

+
+ )} +
+ ) +} diff --git a/components/mission-control/TradingPanel.tsx b/components/mission-control/TradingPanel.tsx index 498ca4f..89704fa 100644 --- a/components/mission-control/TradingPanel.tsx +++ b/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() { )} + {/* Macro Report Tab */} + {activeTab === 'macro' && ( + + )} + {/* Full Analysis Modal */} {showFullAnalysis && (