Closes #014 - System-wide handbook sweep, English consolidation & Crypto state persistence

components/modules/macro/MacroIndicatorsDemo.tsx

@@ -49,11 +49,11 @@ export default function MacroIndicatorsDemo() {
           const data = await response.json();
           setPayload(data);
         } else {
-          setError('Fehler beim Abruf der makroökonomischen Indikatoren.');
+          setError('Error fetching macroeconomic indicators.');
         }
       } catch (err) {
         console.error('Fetch macro indicators error:', err);
-        setError('Netzwerkfehler beim Laden der Makroökonomischen Daten.');
+        setError('Network error loading macroeconomic data.');
       } finally {
         setLoading(false);
       }
@@ -95,7 +95,7 @@ export default function MacroIndicatorsDemo() {
     return {
       name: 'Federal Reserve Net Liquidity Proxy',
       unit: 'T$',
-      category: 'Zentralbanken & Liquidität',
+      category: 'Central Banks & Liquidity',
       current,
       previous,
       trend,
@@ -107,7 +107,7 @@ export default function MacroIndicatorsDemo() {
     return (
       <div className="bg-slate-900/60 backdrop-blur-md border border-slate-800 rounded-2xl p-8 text-slate-100 shadow-xl min-h-[450px] flex flex-col items-center justify-center space-y-4">
         <div className="w-10 h-10 rounded-full border-2 border-indigo-500 border-t-transparent animate-spin" />
-        <div className="text-slate-400 text-sm font-mono animate-pulse">Lade makroökonomisches Datenarchiv...</div>
+        <div className="text-slate-400 text-sm font-mono animate-pulse">Loading macroeconomic data archive...</div>
       </div>
     );
   }
@@ -116,7 +116,7 @@ export default function MacroIndicatorsDemo() {
     return (
       <div className="bg-slate-900/60 backdrop-blur-md border border-slate-800 rounded-2xl p-6 text-slate-100 shadow-xl min-h-[400px] flex items-center justify-center">
         <div className="text-rose-400 font-semibold flex items-center gap-2">
-          <AlertCircle className="w-5 h-5" /> {error || 'Fehler beim Laden.'}
+          <AlertCircle className="w-5 h-5" /> {error || 'Error loading data.'}
         </div>
       </div>
     );
@@ -218,7 +218,7 @@ export default function MacroIndicatorsDemo() {
       <div key={key} className="bg-slate-950/40 border border-slate-850 rounded-xl p-3 flex justify-between items-center hover:bg-slate-950/60 transition-colors">
         <div className="space-y-0.5 max-w-[130px]">
           <div className="text-xs font-semibold text-slate-200 truncate" title={ind.name}>{ind.name}</div>
-          <div className="text-[9px] text-slate-500 font-mono">Vorherig: {ind.previous === null || ind.previous === undefined ? '' : ind.previous}{ind.unit}</div>
+          <div className="text-[9px] text-slate-500 font-mono">Previous: {ind.previous === null || ind.previous === undefined ? '' : ind.previous}{ind.unit}</div>
         </div>
 
         {/* Micro Recharts Sparkline */}
@@ -258,7 +258,7 @@ export default function MacroIndicatorsDemo() {
           <AlertCircle className="w-5 h-5 text-rose-400 shrink-0" />
           <div className="flex-1">
             <span className="font-bold font-mono uppercase tracking-wider block mb-0.5">[⚠️ API Limit - Historical Archive Active]</span>
-            Der Echtzeit-Datenabruf (Juni 2026) ist aufgrund von Ratenbeschränkungen (FMP HTTP 429) gedrosselt. Das System operiert im sicheren, gepufferten historischen Archiv-Modus.
+            Real-time data retrieval (June 2026) is throttled due to rate limits (FMP HTTP 429). The system is operating in a secure, buffered historical archive mode.
           </div>
         </div>
       )}
@@ -271,10 +271,10 @@ export default function MacroIndicatorsDemo() {
           <div className="space-y-1">
             <span className="text-indigo-400 text-xs font-semibold uppercase tracking-wider">Macroeconomics Silo</span>
             <h2 className="text-2xl font-extrabold text-white flex items-center gap-2">
-              <Landmark className="text-indigo-400 w-6 h-6" /> Makroökonomische Indikatoren & Kredit-Silo
+              <Landmark className="text-indigo-400 w-6 h-6" /> Macroeconomic Indicators & Credit Silo
             </h2>
             <p className="text-xs text-slate-400">
-              Analysiert Zyklen, Liquiditätsflüsse und Zinskurven über die letzten 24 Monate.
+              Analyzes cycles, liquidity flows, and yield curves over the past 24 months.
             </p>
           </div>
           
@@ -284,11 +284,11 @@ export default function MacroIndicatorsDemo() {
               className="flex items-center gap-1.5 px-4 py-2.5 rounded-xl bg-slate-955/80 hover:bg-slate-900 border border-slate-800 hover:border-slate-700 transition-all font-semibold text-xs tracking-wider text-indigo-400 w-full md:w-auto justify-center h-11 cursor-pointer"
             >
               <BookOpen className="w-4 h-4" />
-              <span>📖 Modulerklärung</span>
+              <span>📖 Quantitative Handbook</span>
             </button>
             
             <div className="bg-slate-955/80 border border-slate-800 rounded-xl px-4 py-2 text-right shrink-0 h-11 flex flex-col justify-center">
-              <div className="text-[9px] text-slate-555 uppercase font-mono">Letztes Update</div>
+              <div className="text-[9px] text-slate-555 uppercase font-mono">Last Update</div>
               <div className="font-mono text-xs text-slate-300">
                 {new Date(payload.timestamp).toLocaleTimeString()}
               </div>
@@ -309,8 +309,8 @@ export default function MacroIndicatorsDemo() {
           <div className="absolute top-0 right-0 w-24 h-24 bg-rose-500/5 rounded-full blur-2xl -z-10" />
           <div className="flex justify-between items-start">
             <div className="space-y-1">
-              <span className="text-slate-400 text-[10px] font-mono uppercase tracking-wider">Kategorie 1</span>
-              <h4 className="text-sm font-bold text-slate-200">Inflation & Konsum-Stress</h4>
+              <span className="text-slate-400 text-[10px] font-mono uppercase tracking-wider">Category 1</span>
+              <h4 className="text-sm font-bold text-slate-200">Inflation & Consumer Stress</h4>
             </div>
             {/* Glowing Neon-Ampel Light */}
             <div className={`w-3 h-3 rounded-full ${
@@ -321,11 +321,11 @@ export default function MacroIndicatorsDemo() {
           </div>
           <div className="mt-4 space-y-3">
             <div className="text-xs text-slate-400">
-              Risiko-Status:{' '}
+              Risk Status:{' '}
               <span className={`font-bold ${
                 card1Status === 'RED' ? 'text-rose-400' : card1Status === 'AMBER' ? 'text-amber-400' : 'text-emerald-400'
               }`}>
-                {card1Status === 'RED' ? '🚨 Kritischer Konsumdruck' : card1Status === 'AMBER' ? '⚠️ Erhöhtes Risiko' : '✅ Stabil'}
+                {card1Status === 'RED' ? '🚨 Critical Consumer Pressure' : card1Status === 'AMBER' ? '⚠️ Elevated Risk' : '✅ Stable'}
               </span>
             </div>
             <div className="grid grid-cols-3 gap-2 pt-2 border-t border-slate-800/60 text-center font-mono">
@@ -336,13 +336,13 @@ export default function MacroIndicatorsDemo() {
                 </div>
               </div>
               <div>
-                <div className="text-[10px] text-slate-500">Sparquote</div>
+                <div className="text-[10px] text-slate-500">Savings Rate</div>
                 <div className={`text-xs font-bold ${savingsRate && savingsRate.current < 3.0 ? 'text-rose-400' : 'text-slate-200'}`}>
                   {savingsRate ? savingsRate.current.toFixed(1) : '0.0'}%
                 </div>
               </div>
               <div>
-                <div className="text-[10px] text-slate-500">Ausfälle</div>
+                <div className="text-[10px] text-slate-500">Delinquencies</div>
                 <div className={`text-xs font-bold ${ccDelinquency && ccDelinquency.current > 4.5 ? 'text-rose-400' : 'text-slate-200'}`}>
                   {ccDelinquency ? ccDelinquency.current.toFixed(1) : '0.0'}%
                 </div>
@@ -360,8 +360,8 @@ export default function MacroIndicatorsDemo() {
           <div className="absolute top-0 right-0 w-24 h-24 bg-indigo-500/5 rounded-full blur-2xl -z-10" />
           <div className="flex justify-between items-start">
             <div className="space-y-1">
-              <span className="text-slate-400 text-[10px] font-mono uppercase tracking-wider">Kategorie 2</span>
-              <h4 className="text-sm font-bold text-slate-200">Bewertung & Liquidität</h4>
+              <span className="text-slate-400 text-[10px] font-mono uppercase tracking-wider">Category 2</span>
+              <h4 className="text-sm font-bold text-slate-200">Valuation & Liquidity</h4>
             </div>
             {/* Glowing Neon-Ampel Light */}
             <div className={`w-3 h-3 rounded-full ${
@@ -372,11 +372,11 @@ export default function MacroIndicatorsDemo() {
           </div>
           <div className="mt-4 space-y-3">
             <div className="text-xs text-slate-400">
-              Risiko-Status:{' '}
+              Risk Status:{' '}
               <span className={`font-bold ${
                 card2Status === 'RED' ? 'text-rose-400' : card2Status === 'AMBER' ? 'text-amber-400' : 'text-emerald-400'
               }`}>
-                {card2Status === 'RED' ? '🚨 Extreme Überbewertung' : card2Status === 'AMBER' ? '⚠️ Liquiditäts-Engpass' : '✅ Ausreichend'}
+                {card2Status === 'RED' ? '🚨 Extreme Overvaluation' : card2Status === 'AMBER' ? '⚠️ Liquidity Squeeze' : '✅ Sufficient'}
               </span>
             </div>
             <div className="grid grid-cols-2 gap-2 pt-2 border-t border-slate-800/60 text-center font-mono">
@@ -405,8 +405,8 @@ export default function MacroIndicatorsDemo() {
           <div className="absolute top-0 right-0 w-24 h-24 bg-emerald-500/5 rounded-full blur-2xl -z-10" />
           <div className="flex justify-between items-start">
             <div className="space-y-1">
-              <span className="text-slate-400 text-[10px] font-mono uppercase tracking-wider">Kategorie 3</span>
-              <h4 className="text-sm font-bold text-slate-200">Kredit- & Rezessionsrisiko</h4>
+              <span className="text-slate-400 text-[10px] font-mono uppercase tracking-wider">Category 3</span>
+              <h4 className="text-sm font-bold text-slate-200">Credit & Recession Risk</h4>
             </div>
             {/* Glowing Neon-Ampel Light */}
             <div className={`w-3 h-3 rounded-full ${
@@ -417,11 +417,11 @@ export default function MacroIndicatorsDemo() {
           </div>
           <div className="mt-4 space-y-3">
             <div className="text-xs text-slate-400">
-              Risiko-Status:{' '}
+              Risk Status:{' '}
               <span className={`font-bold ${
                 card3Status === 'RED' ? 'text-rose-400' : card3Status === 'AMBER' ? 'text-amber-400' : 'text-emerald-400'
               }`}>
-                {card3Status === 'RED' ? '🚨 Rezessions-Inversion' : card3Status === 'AMBER' ? '⚠️ Zinskurven-Warnung' : '✅ Stabil'}
+                {card3Status === 'RED' ? '🚨 Recession Inversion' : card3Status === 'AMBER' ? '⚠️ Yield Curve Warning' : '✅ Stable'}
               </span>
             </div>
             <div className="grid grid-cols-2 gap-2 pt-2 border-t border-slate-800/60 text-center font-mono">
@@ -451,11 +451,11 @@ export default function MacroIndicatorsDemo() {
         >
           <div className="flex items-center gap-2">
             <Activity className="w-5 h-5 text-indigo-400" />
-            <span>🏛️ Detailliertes makroökonomisches Indikatoren-Hauptbuch (21 Indikatoren)</span>
+            <span>🏛️ Detailed Macroeconomic Indicators Ledger (21 Indicators)</span>
           </div>
           <div className="flex items-center gap-2">
             <span className="text-xs text-slate-500 font-mono">
-              {isAccordionOpen ? 'Einklappen' : 'Ausklappen'}
+              {isAccordionOpen ? 'Collapse' : 'Expand'}
             </span>
             <div className="text-slate-400">
               {isAccordionOpen ? <ChevronUp className="w-4 h-4" /> : <ChevronDown className="w-4 h-4" />}
@@ -472,9 +472,9 @@ export default function MacroIndicatorsDemo() {
               <div className="bg-slate-900/60 backdrop-blur-md border border-slate-800 rounded-2xl p-5 text-slate-100 shadow-xl space-y-4">
                 <div className="border-b border-slate-800 pb-3 flex items-center justify-between">
                   <h3 className="font-bold text-sm text-white flex items-center gap-2">
-                    <Activity className="w-4 h-4 text-emerald-400" /> Inflation & Wachstum
+                    <Activity className="w-4 h-4 text-emerald-400" /> Inflation & Growth
                   </h3>
-                  <span className="text-[10px] bg-emerald-500/10 text-emerald-400 border border-emerald-500/20 px-2 py-0.5 rounded font-mono font-bold">Real-Data</span>
+                  <span className="text-[10px] bg-emerald-500/10 text-emerald-400 border border-emerald-500/20 px-2 py-0.5 rounded font-mono font-bold">Real Data</span>
                 </div>
 
                 <div className="space-y-4">
@@ -490,7 +490,7 @@ export default function MacroIndicatorsDemo() {
               <div className="bg-slate-900/60 backdrop-blur-md border border-slate-800 rounded-2xl p-5 text-slate-100 shadow-xl space-y-4">
                 <div className="border-b border-slate-800 pb-3 flex items-center justify-between">
                   <h3 className="font-bold text-sm text-white flex items-center gap-2">
-                    <Coins className="w-4 h-4 text-indigo-400" /> Zentralbanken & Liquidität
+                    <Coins className="w-4 h-4 text-indigo-400" /> Central Banks & Liquidity
                   </h3>
                   <span className="text-[10px] bg-indigo-500/10 text-indigo-400 border border-indigo-500/20 px-2 py-0.5 rounded font-mono font-bold">M2 / RRP / TGA</span>
                 </div>
@@ -511,7 +511,7 @@ export default function MacroIndicatorsDemo() {
                         <div className="text-xs font-bold text-indigo-300 truncate" title={netLiquidityIndicator.name}>
                           Net Fed Liquidity
                         </div>
-                        <div className="text-[9px] text-indigo-400/70 font-mono">Vorherig: {netLiquidityIndicator.previous}{netLiquidityIndicator.unit}</div>
+                        <div className="text-[9px] text-indigo-400/70 font-mono">Previous: {netLiquidityIndicator.previous}{netLiquidityIndicator.unit}</div>
                       </div>
 
                       {/* Micro Recharts Sparkline */}
@@ -547,9 +547,9 @@ export default function MacroIndicatorsDemo() {
               <div className="bg-slate-900/60 backdrop-blur-md border border-slate-800 rounded-2xl p-5 text-slate-100 shadow-xl space-y-4">
                 <div className="border-b border-slate-800 pb-3 flex items-center justify-between">
                   <h3 className="font-bold text-sm text-white flex items-center gap-2">
-                    <ShieldAlert className="w-4 h-4 text-rose-400" /> Kredit- & Anleihemarkt
+                    <ShieldAlert className="w-4 h-4 text-rose-400" /> Credit & Bond Market
                   </h3>
-                  <span className="text-[10px] bg-rose-500/10 text-rose-400 border border-rose-500/20 px-2 py-0.5 rounded font-mono font-bold">Zinskurven & Spreads</span>
+                  <span className="text-[10px] bg-rose-500/10 text-rose-400 border border-rose-500/20 px-2 py-0.5 rounded font-mono font-bold">Yield Curves & Spreads</span>
                 </div>
 
                 <div className="space-y-4">
@@ -557,10 +557,10 @@ export default function MacroIndicatorsDemo() {
                   {renderRow('yieldSpread', yieldSpread)}
                   {renderRow('hySpread', hySpread)}
 
-                  {/* Sub-section named "Immobilien- & Hypotheken-Kredite" */}
+                  {/* Sub-section named "Real Estate & Mortgage Credit" */}
                   <div className="border-t border-slate-800/80 pt-4 mt-4">
                     <h4 className="text-xs font-bold text-indigo-400 uppercase tracking-wider font-mono mb-3 flex items-center gap-1.5">
-                      <Landmark className="w-3.5 h-3.5" /> Immobilien- & Hypotheken-Kredite
+                      <Landmark className="w-3.5 h-3.5" /> Real Estate & Mortgage Credit
                     </h4>
                   </div>
 
@@ -578,10 +578,10 @@ export default function MacroIndicatorsDemo() {
 
       {/* SECTION 3: Dynamic Macro analysis and explanation */}
       <div className="bg-slate-900/60 backdrop-blur-md border border-slate-800 rounded-2xl p-6 text-slate-100 shadow-xl space-y-4">
-        <h3 className="font-bold text-sm text-slate-200">Systemische Macro- & Kreditmarkt-Analyse</h3>
+        <h3 className="font-bold text-sm text-slate-200">Systemic Macro & Credit Market Analysis</h3>
         <p className="text-xs text-slate-400 leading-relaxed">
-          Zinskurveninversionen (z. B. wenn der <span className="text-indigo-400 font-semibold font-mono">2S10S-Yield-Spread</span> negativ ist) gelten historisch als zuverlässige Vorläufer ökonomischer Kontraktionen. Derzeit beträgt der Spread <span className="text-emerald-400 font-bold font-mono">{yieldSpread !== undefined ? (yieldSpread.current >= 0 ? '+' : '') + yieldSpread.current.toFixed(2) : '0.00'}%</span>. Gleichzeitig signalisiert der Buffett-Indikator mit <span className="text-rose-400 font-bold font-mono">{buffett !== undefined ? buffett.current.toFixed(1) : '0.0'}%</span> eine erhebliche Überbewertung des US-Aktienmarktes relativ zur Wirtschaftsleistung. Im Konsumsektor deutet die Kombination aus einer niedrigen Sparquote (<span className="text-amber-400 font-mono">{savingsRate !== undefined ? savingsRate.current.toFixed(1) : '0.0'}%</span>) und steigenden Kreditkartenausfällen (<span className="text-rose-400 font-mono">{ccDelinquency !== undefined ? ccDelinquency.current.toFixed(1) : '0.0'}%</span>) auf echten Stress hin, während der High-Yield Credit Spread (<span className="text-slate-300 font-bold font-mono">{hySpread !== undefined ? hySpread.current.toFixed(1) : '0.0'}%</span>) noch Stabilität anzeigt. 
-          Monetäre Liquidität (<span className="font-bold text-indigo-300 font-mono">Net Fed Liquidity Proxy: {netLiquidityIndicator ? netLiquidityIndicator.current.toFixed(2) : '0.00'} T$</span>) wirkt als zentraler Impulsgeber: Ein Anstieg des TGA-Volumens oder der RRP-Nutzung zieht freie Liquidität aus dem Bankensystem ab (Bremswirkung für Aktien/Krypto), während ein Abbau dieser Posten zusätzliche Liquidität freisetzt (Rückenwind für Risk Assets).
+          Yield curve inversions (e.g. when the <span className="text-indigo-400 font-semibold font-mono">2S10S Yield Spread</span> is negative) are historically reliable leading indicators of economic contractions. Currently, the spread is <span className="text-emerald-400 font-bold font-mono">{yieldSpread !== undefined ? (yieldSpread.current >= 0 ? '+' : '') + yieldSpread.current.toFixed(2) : '0.00'}%</span>. At the same time, the Buffett Indicator indicates an overvaluation of the US stock market relative to economic output. In the consumer sector, the combination of a low savings rate (<span className="text-amber-400 font-mono">{savingsRate !== undefined ? savingsRate.current.toFixed(1) : '0.0'}%</span>) and rising credit card delinquencies (<span className="text-rose-400 font-mono">{ccDelinquency !== undefined ? ccDelinquency.current.toFixed(1) : '0.0'}%</span>) suggests genuine distress, while the High-Yield credit spread (<span className="text-slate-300 font-bold font-mono">{hySpread !== undefined ? hySpread.current.toFixed(1) : '0.0'}%</span>) still indicates stability. 
+          Monetary liquidity (<span className="font-bold text-indigo-300 font-mono">Net Fed Liquidity Proxy: {netLiquidityIndicator ? netLiquidityIndicator.current.toFixed(2) : '0.00'} T$</span>) acts as a central impulse: an increase in TGA volume or RRP usage drains liquidity from the banking system (headwind for equities/crypto), while a decrease in these items releases additional liquidity (tailwind for risk assets).
         </p>
       </div>