Jann/investment-sandbox
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Closes #016 - Deploy Native KaTeX Rig & Dual-Handbook System

Browse Source
This commit is contained in:
Antigravity Agent
2026-06-13 15:16:57 +02:00
parent 59e0a04bfa
commit 94ccf63a38
26 changed files with 1074 additions and 137 deletions
Download Patch File Download Diff File Expand all files Collapse all files

92
components/modules/sandbox/SandboxBlueprintModal.tsx Normal file
View File

@@ -0,0 +1,92 @@
import React from 'react';
import { Settings, X } from 'lucide-react';
interface SandboxBlueprintModalProps {
isOpen: boolean;
onClose: () => void;
}
export default function SandboxBlueprintModal({ isOpen, onClose }: SandboxBlueprintModalProps) {
React.useEffect(() => {
const handleKeyDown = (e: KeyboardEvent) => {
if (e.key === 'Escape') {
onClose();
}
};
if (isOpen) {
window.addEventListener('keydown', handleKeyDown);
}
return () => {
window.removeEventListener('keydown', handleKeyDown);
};
}, [isOpen, onClose]);
if (!isOpen) return null;
return (
<div className="fixed inset-0 z-50 flex items-center justify-center bg-slate-900/85 backdrop-blur-md p-4 sm:p-6 md:p-8 animate-fade-in">
<div className="bg-slate-900 border border-slate-800/80 rounded-3xl w-full max-w-4xl h-[80vh] flex flex-col overflow-hidden shadow-2xl relative text-slate-350">
{/* Modal Header */}
<div className="flex justify-between items-center px-6 py-4 bg-slate-950/45 border-b border-slate-800/60">
<div>
<h2 className="text-base font-bold bg-gradient-to-r from-violet-400 to-fuchsia-400 bg-clip-text text-transparent flex items-center gap-2">
<Settings className="w-5 h-5 text-violet-400" /> Portfolio Sandbox - Operational Blueprint
</h2>
<p className="text-[10px] text-slate-500 font-mono">System User Manual &amp; Interface Mechanics</p>
</div>
<button
onClick={onClose}
className="text-slate-400 hover:text-slate-200 bg-slate-950/50 border border-slate-800 hover:border-slate-700 p-2 rounded-xl transition-all cursor-pointer flex items-center justify-center"
aria-label="Close modal"
>
<X className="w-4 h-4" />
</button>
</div>
{/* Modal Body */}
<div className="flex-1 overflow-y-auto p-6 sm:p-8 space-y-8 text-slate-350 scrollbar-thin">
<div className="border-b border-slate-800/80 pb-3">
<h3 className="text-base font-bold text-slate-200">Portfolio Optimization Controls</h3>
<p className="text-xs text-slate-400 mt-1">Operational specifications of the portfolio management sandbox cockpit.</p>
</div>
{/* Core Mechanics */}
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
<div className="p-4 rounded-xl border border-slate-800/60 bg-slate-950/40 space-y-2">
<h4 className="text-xs font-bold text-violet-400 uppercase tracking-wider font-mono">1. Kelly Sizing Controls</h4>
<p className="text-xs text-slate-400 leading-relaxed font-sans">
Uses success probability inputs and payout odds ratios (average win size / average loss size) to calculate the theoretical optimal leverage size. Enforces a **Half-Kelly** safety buffer by scaling the target bet size by 0.5. This prevents severe downside variance and reduces capital depletion risk.
</p>
</div>
<div className="p-4 rounded-xl border border-slate-800/60 bg-slate-950/40 space-y-2">
<h4 className="text-xs font-bold text-violet-400 uppercase tracking-wider font-mono">2. Weight Calculations</h4>
<p className="text-xs text-slate-400 leading-relaxed font-sans">
Computes the dynamic percentage allocation weights of individual portfolio holdings. It adjusts weights in real-time as asset prices fluctuate or shares are added/removed, ensuring capital exposure remains aligned with target limits.
</p>
</div>
</div>
{/* Interface Specifications */}
<div className="space-y-3">
<h3 className="text-sm font-bold text-slate-200 border-b border-slate-800 pb-2">Interface Actions &amp; Computes</h3>
<div className="text-xs text-slate-400 space-y-3 leading-relaxed">
<p>
<strong className="text-violet-400 font-semibold">Asset Allocation Cockpit:</strong> Allows editing absolute stock quantities and purchasing prices. Computes the aggregate portfolio value, average cost basis, and dollar/percentage changes.
</p>
<p>
<strong className="text-violet-400 font-semibold">Synthetic Portfolio Return (Rpt):</strong> Aggregates historical daily log-returns of individual assets, weighted by current allocations, to chart the hypothetical historical equity curve of the combined portfolio.
</p>
<p>
<strong className="text-violet-400 font-semibold">Swamy-Arora Panel Solver:</strong> Executes a server-side Swamy-Arora random effects regression. Estimates the beta coefficients, residual errors, and variance parameters across panel data structures, allowing architects to model multi-asset risk dynamics.
</p>
</div>
</div>
</div>
</div>
</div>
);
}

11
components/modules/sandbox/SandboxDemo.tsx
View File

@@ -7,6 +7,7 @@ import { LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContai
import 'katex/dist/katex.min.css';
import { BlockMath, InlineMath } from 'react-katex';
import SandboxMathModal from './SandboxMathModal';
import SandboxBlueprintModal from './SandboxBlueprintModal';
import {
TrendingUp, Wallet, ArrowDownRight, ArrowUpRight, Percent, Plus, FolderSync,
HelpCircle, Settings, Calendar, DollarSign, Tag, Check, AlertCircle, ChevronDown, ChevronUp, Sparkles,
@@ -59,6 +60,7 @@ export default function SandboxDemo() {
const [showMathAccordion, setShowMathAccordion] = useState(false);
const [isMathModalOpen, setIsMathModalOpen] = useState(false);
const [isBlueprintModalOpen, setIsBlueprintModalOpen] = useState(false);
const [showMsciBenchmark, setShowMsciBenchmark] = useState(true);
// Kelly Position Sizing states
@@ -411,6 +413,14 @@ export default function SandboxDemo() {
<span>📖 Quantitative Handbook</span>
</button>
<button
onClick={() => setIsBlueprintModalOpen(true)}
className="flex items-center gap-1.5 px-4 py-3 rounded-xl bg-slate-950/80 hover:bg-slate-900 border border-slate-800 hover:border-slate-700 transition-all font-semibold text-xs tracking-wider text-emerald-400 justify-center h-[58px] shrink-0"
>
<Settings className="w-3.5 h-3.5" />
<span>⚙️ Operational Blueprint</span>
</button>
{/* Net Worth Card */}
<div className="flex-1 md:flex-initial bg-slate-950/80 border border-slate-800 rounded-xl p-3 px-5 min-w-[140px]">
<div className="text-[10px] text-slate-400 uppercase font-semibold">Total Value</div>
@@ -1356,6 +1366,7 @@ export default function SandboxDemo() {
</div>
<SandboxMathModal isOpen={isMathModalOpen} onClose={() => setIsMathModalOpen(false)} />
<SandboxBlueprintModal isOpen={isBlueprintModalOpen} onClose={() => setIsBlueprintModalOpen(false)} />
</div>
);
}

24
components/modules/sandbox/SandboxMathModal.tsx
View File

@@ -26,7 +26,7 @@ export default function SandboxMathModal({ isOpen, onClose }: SandboxMathModalPr
if (!isOpen) return null;
return (
<div className="fixed inset-0 z-50 flex items-center justify-center bg-slate-955/90 backdrop-blur-md p-4 sm:p-6 md:p-8">
<div className="fixed inset-0 z-50 flex items-center justify-center bg-slate-950/90 backdrop-blur-md p-4 sm:p-6 md:p-8">
<div className="bg-slate-900 border border-slate-800/80 rounded-3xl w-full max-w-4xl h-[80vh] flex flex-col overflow-hidden shadow-2xl relative text-slate-350">
{/* Modal Header */}
@@ -39,7 +39,7 @@ export default function SandboxMathModal({ isOpen, onClose }: SandboxMathModalPr
</div>
<button
onClick={onClose}
className="text-slate-400 hover:text-slate-200 bg-slate-955/50 border border-slate-800 hover:border-slate-700 p-2 rounded-xl transition-all cursor-pointer flex items-center justify-center"
className="text-slate-400 hover:text-slate-200 bg-slate-950/50 border border-slate-800 hover:border-slate-700 p-2 rounded-xl transition-all cursor-pointer flex items-center justify-center"
aria-label="Close modal"
>
<X className="w-4 h-4" />
@@ -60,11 +60,11 @@ export default function SandboxMathModal({ isOpen, onClose }: SandboxMathModalPr
<div className="bg-slate-950/40 p-4 rounded-xl border border-slate-800/60 my-2 space-y-4">
<div>
<p className="text-xs text-slate-400 mb-1">Active Percentage Weighting (<InlineMath math="w_i" />) Calculation:</p>
<BlockMath math="w_i = \\frac{\\text{Shares}_i \\times P_{\\text{current}, i}}{\\sum_{j} \\text{Shares}_j \\times P_{\\text{current}, j}}" />
<BlockMath math="w_i = \frac{\text{Shares}_i \times P_{\text{current}, i}}{\sum_{j} \text{Shares}_j \times P_{\text{current}, j}}" />
</div>
<div className="border-t border-slate-850 pt-3">
<p className="text-xs text-slate-400 mb-1">Synthetic Portfolio Log Return (<InlineMath math="R_{pt}" />):</p>
<BlockMath math="R_{pt} = \\sum_{i} w_i \\times \\ln\\left(\\frac{P_{t, i}}{P_{t-1, i}}\\right)" />
<BlockMath math="R_{pt} = \sum_{i} w_i \times \ln\left(\frac{P_{t, i}}{P_{t-1, i}}\right)" />
</div>
</div>
</div>
@@ -80,19 +80,19 @@ export default function SandboxMathModal({ isOpen, onClose }: SandboxMathModalPr
<div className="bg-slate-950/40 p-4 rounded-xl border border-slate-800/60 my-2">
<div>
<p className="text-xs text-slate-400 mb-1">Panel Model Specification with VIX Controls:</p>
<BlockMath math="R_{ptj} = \\beta_0 + \\beta_{\\text{drift}} \\text{Pre}_t + \\beta_{\\text{impact}} \\text{Post}_t + \\beta_{\\text{VIX}} VIX_{tj} + u_j + e_{ptj}" />
<BlockMath math="R_{ptj} = \beta_0 + \beta_{\text{drift}} \text{Pre}_t + \beta_{\text{impact}} \text{Post}_t + \beta_{\text{VIX}} VIX_{tj} + u_j + e_{ptj}" />
<p className="text-[10px] text-slate-500 mt-2 font-mono leading-relaxed">
where:
<br />
- <InlineMath math="t \\in [-30, +30]" /> is the relative day offset from event date <InlineMath math="T_j" />.
- <InlineMath math="t \in [-30, +30]" /> is the relative day offset from event date <InlineMath math="T_j" />.
<br />
- <InlineMath math="\\text{Pre}_t = \\mathbb{I}(t < 0)" /> and <InlineMath math="\\text{Post}_t = \\mathbb{I}(t > 0)" /> are relative phase indicators.
- <InlineMath math="\text{Pre}_t = \mathbb{I}(t < 0)" /> and <InlineMath math="\text{Post}_t = \mathbb{I}(t > 0)" /> are relative phase indicators.
<br />
- <InlineMath math="VIX_{tj}" /> is the background market-wide volatility covariate.
<br />
- <InlineMath math="u_j \\sim N(0, \\sigma_u^2)" /> is the random group intercept (event instance shock).
- <InlineMath math="u_j \sim N(0, \sigma_u^2)" /> is the random group intercept (event instance shock).
<br />
- <InlineMath math="e_{ptj} \\sim N(0, \\sigma_e^2)" /> is the residual error.
- <InlineMath math="e_{ptj} \sim N(0, \sigma_e^2)" /> is the residual error.
</p>
</div>
</div>
@@ -109,7 +109,7 @@ export default function SandboxMathModal({ isOpen, onClose }: SandboxMathModalPr
<div className="bg-slate-950/40 p-4 rounded-xl border border-slate-800/60 my-2 space-y-4">
<div>
<p className="text-xs text-slate-400 mb-1">Theoretical Kelly Fraction (<InlineMath math="f^*" />) Equation:</p>
<BlockMath math="f^* = \\frac{p \\cdot b - (1 - p)}{b}" />
<BlockMath math="f^* = \frac{p \cdot b - (1 - p)}{b}" />
<p className="text-[10px] text-slate-500 mt-2 font-mono leading-relaxed">
where:
<br />
@@ -120,9 +120,9 @@ export default function SandboxMathModal({ isOpen, onClose }: SandboxMathModalPr
</div>
<div className="border-t border-slate-850 pt-3">
<p className="text-xs text-slate-400 mb-1">Fractional Kelly (Half-Kelly) Safety Buffer:</p>
<BlockMath math="f_{\\text{applied}} = \\max\\left(0, 0.5 \\times f^*\\right)" />
<BlockMath math="f_{\text{applied}} = \max\left(0, 0.5 \times f^*\right)" />
<p className="text-xs text-slate-400 leading-relaxed mt-2">
To mitigate estimation variance and protect against catastrophic drawdown due to model error or fat-tailed market returns, the cockpit clips the suggested sizing to a **Half-Kelly** multiplier ($0.5$).
To mitigate estimation variance and protect against catastrophic drawdown due to model error or fat-tailed market returns, the cockpit clips the suggested sizing to a **Half-Kelly** multiplier (<InlineMath math="0.5" />).
</p>
</div>
</div>