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

106
components/modules/whale/WhaleBlueprintModal.tsx Normal file
View File

@@ -0,0 +1,106 @@
import React from 'react';
import { Settings, X } from 'lucide-react';
interface WhaleBlueprintModalProps {
isOpen: boolean;
onClose: () => void;
}
export default function WhaleBlueprintModal({ isOpen, onClose }: WhaleBlueprintModalProps) {
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-sky-400 to-blue-400 bg-clip-text text-transparent flex items-center gap-2">
<Settings className="w-5 h-5 text-sky-400" /> Whale Satellites - 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">Whale Ingestion &amp; Filters</h3>
<p className="text-xs text-slate-400 mt-1">Operational details of boutique manager tracking and conviction scoring.</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-sky-400 uppercase tracking-wider font-mono">1. Boutique Manager Filter</h4>
<p className="text-xs text-slate-400 leading-relaxed font-sans">
The universe is restricted to active boutique investment firms holding between $100M and $5B in Assets Under Management (AUM), exhibiting an Active Share exceeding 80%. This excludes large index-trackers and highlights alpha-generating concentrated stock pickers.
</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-sky-400 uppercase tracking-wider font-mono">2. Concentration Index (CI)</h4>
<p className="text-xs text-slate-400 leading-relaxed font-sans">
Prioritizes portfolios where the top 10 holdings represent more than 50% of the total reported holdings value. This ensures that the positions tracked reflect high-conviction ideas where managers are willing to expose significant capital.
</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-sky-400 uppercase tracking-wider font-mono">3. Velocity of Conviction (VoC)</h4>
<p className="text-xs text-slate-400 leading-relaxed font-sans">
Measures the quarterly change in portfolio weighting for each asset. It isolates managers' active additions or liquidations ($\Delta W_i$), sorting the dashboard holdings strictly by positive conviction velocity to find accumulating trends.
</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-sky-400 uppercase tracking-wider font-mono">4. 13F Filing Lag Warning</h4>
<p className="text-xs text-slate-400 leading-relaxed font-sans">
Form 13F filings are submitted up to 45 days after the end of the calendar quarter. The system displays these shifts as lagging indicators and overlays them with volume markers to confirm whether the manager is still actively buying.
</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 Layout &amp; Mechanics</h3>
<div className="text-xs text-slate-400 space-y-3 leading-relaxed">
<p>
<strong className="text-sky-400 font-semibold">Whale Profile Cards:</strong> The left sidebar allows selecting the active boutique manager (e.g. Scion Asset Management, Akre Capital, Mairs &amp; Power). Displays their current AUM, Concentration index, and top holdings size.
</p>
<p>
<strong className="text-sky-400 font-semibold">Transactions Ledger:</strong> The right table shows the selected manager's quarterly additions and reductions. Shows security names, tickers, shares held, reported values, portfolio weights, and calculated VoC deltas.
</p>
<p>
<strong className="text-sky-400 font-semibold">DEV_MODE Offline Protection:</strong> When offline, the `/api/whale/screener` endpoint bypasses SEC EDGAR connections and returns stored mock files, indicating isShieldActive: true.
</p>
</div>
</div>
</div>
</div>
</div>
);
}

26
components/modules/whale/WhaleMathModal.tsx
View File

@@ -26,8 +26,8 @@ export default function WhaleMathModal({ isOpen, onClose }: WhaleMathModalProps)
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="bg-slate-900 border border-slate-800/80 rounded-3xl w-full max-w-5xl h-[85vh] flex flex-col overflow-hidden shadow-2xl relative text-slate-350">
<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-5xl h-[85vh] flex flex-col overflow-hidden shadow-2xl relative text-slate-355">
{/* Modal Header */}
<div className="flex justify-between items-center px-6 py-4 bg-slate-950/50 border-b border-slate-800/80">
@@ -50,7 +50,7 @@ export default function WhaleMathModal({ isOpen, onClose }: WhaleMathModalProps)
<div className="flex-1 overflow-y-auto p-6 sm:p-8 space-y-8 text-slate-300 scrollbar-thin">
{/* Executive Overview */}
<div className="bg-slate-955/30 rounded-2xl p-5 border border-slate-850 space-y-2">
<div className="bg-slate-950/30 rounded-2xl p-5 border border-slate-850 space-y-2">
<h3 className="text-sm font-bold text-slate-100 flex items-center gap-2">
<ShieldAlert className="w-4 h-4 text-blue-400" /> Executive Overview
</h3>
@@ -67,10 +67,10 @@ export default function WhaleMathModal({ isOpen, onClose }: WhaleMathModalProps)
<p className="text-xs leading-relaxed text-slate-400">
Institutional investment managers with over $100 million in Assets Under Management (AUM) are legally mandated by the SEC to submit Form 13F within 45 days after the end of each calendar quarter. This lag presents a structural challenge for quantitative models, as holdings data represents historical positions:
</p>
<div className="bg-slate-955/40 p-5 rounded-2xl border border-slate-850 my-2 text-xs space-y-3 text-slate-400 leading-relaxed">
<div className="bg-slate-950/40 p-5 rounded-2xl border border-slate-850 my-2 text-xs space-y-3 text-slate-400 leading-relaxed">
<div>
<strong className="text-blue-300 block mb-1">I. Retrospective Analysis:</strong>
Positions disclosed on day \(T + 45\) reflect the portfolio state at day \(T\). As a result, short-term momentum models cannot directly trade 13F filings.
Positions disclosed on day <InlineMath math="T + 45" /> reflect the portfolio state at day <InlineMath math="T" />. As a result, short-term momentum models cannot directly trade 13F filings.
</div>
<div>
<strong className="text-blue-300 block mb-1">II. Informational Asymmetry:</strong>
@@ -87,26 +87,26 @@ export default function WhaleMathModal({ isOpen, onClose }: WhaleMathModalProps)
<p className="text-xs leading-relaxed text-slate-400">
Rather than tracking the absolute number of shares bought or sold, the screener measures changes in the relative portfolio weight of each asset. This normalizes for AUM changes caused by overall market movements:
</p>
<div className="bg-slate-955/40 p-5 rounded-2xl border border-slate-850 my-2 space-y-4">
<div className="bg-slate-950/40 p-5 rounded-2xl border border-slate-850 my-2 space-y-4">
<div>
<p className="text-xs text-slate-300 mb-2 font-semibold">Velocity of Conviction (VoC) Delta:</p>
<BlockMath math="\\text{VoC}_{i} = w_{i, t} - w_{i, t-1}" />
<BlockMath math="\text{VoC}_{i} = w_{i, t} - w_{i, t-1}" />
<p className="text-xs text-slate-300 my-2 font-semibold">Asset Portfolio Weight Calculation:</p>
<BlockMath math="w_{i, t} = \\frac{V_{i, t}}{\\sum_{j} V_{j, t}} \\times 100" />
<BlockMath math="w_{i, t} = \frac{V_{i, t}}{\sum_{j} V_{j, t}} \times 100" />
<p className="text-[10px] text-slate-500 mt-3 font-mono leading-relaxed">
Where:
<br />
- <InlineMath math="w_{i, t}" /> is the portfolio weight of asset \(i\) at the end of the current quarter \(t\) (expressed as a percentage).
- <InlineMath math="w_{i, t}" /> is the portfolio weight of asset <InlineMath math="i" /> at the end of the current quarter <InlineMath math="t" /> (expressed as a percentage).
<br />
- <InlineMath math="w_{i, t-1}" /> is the portfolio weight of asset \(i\) at the end of the previous quarter \(t-1\).
- <InlineMath math="w_{i, t-1}" /> is the portfolio weight of asset <InlineMath math="i" /> at the end of the previous quarter <InlineMath math="t-1" />.
<br />
- <InlineMath math="V_{i, t}" /> is the market value of the position in asset \(i\) as reported in the 13F filing for quarter \(t\).
- <InlineMath math="V_{i, t}" /> is the market value of the position in asset <InlineMath math="i" /> as reported in the 13F filing for quarter <InlineMath math="t" />.
<br />
- <InlineMath math="\\sum_{j} V_{j, t}" /> represents the total market value of all reported equity holdings in the filing for quarter \(t\) (AUM proxy).
- <InlineMath math="\sum_{j} V_{j, t}" /> represents the total market value of all reported equity holdings in the filing for quarter <InlineMath math="t" /> (AUM proxy).
</p>
</div>
<p className="text-xs leading-relaxed text-slate-400">
<strong className="text-blue-300">Strategic Rationale:</strong> A positive VoC delta {"\\(\\text{VoC}_i > 0\\)"} indicates that the manager has actively allocated capital to the asset relative to other holdings, suggesting high-conviction buying. Conversely, a negative delta {"\\(\\text{VoC}_i < 0\\)"} indicates relative allocation decreases, showing active selling or profit-taking.
<strong className="text-blue-300">Strategic Rationale:</strong> A positive VoC delta <InlineMath math="\text{VoC}_i > 0" /> indicates that the manager has actively allocated capital to the asset relative to other holdings, suggesting high-conviction buying. Conversely, a negative delta <InlineMath math="\text{VoC}_i < 0" /> indicates relative allocation decreases, showing active selling or profit-taking.
</p>
</div>
</div>

15
components/modules/whale/WhaleScreener.tsx
View File

@@ -2,6 +2,7 @@
import React, { useState, useEffect } from 'react';
import WhaleMathModal from './WhaleMathModal';
import WhaleBlueprintModal from './WhaleBlueprintModal';
import {
Compass, ArrowUpRight, ArrowDownRight, Minus, BookOpen, AlertCircle, RefreshCw, Layers, DollarSign, Calendar, TrendingUp
} from 'lucide-react';
@@ -33,6 +34,7 @@ export default function WhaleScreener() {
const [positions, setPositions] = useState<PositionDelta[]>([]);
const [isShieldActive, setIsShieldActive] = useState(false);
const [isMathModalOpen, setIsMathModalOpen] = useState(false);
const [isBlueprintModalOpen, setIsBlueprintModalOpen] = useState(false);
const [refreshKey, setRefreshKey] = useState(0);
useEffect(() => {
@@ -123,18 +125,26 @@ export default function WhaleScreener() {
<div className="flex items-center gap-3 w-full md:w-auto justify-end">
<button
onClick={() => setRefreshKey(prev => prev + 1)}
className="flex items-center justify-center p-2.5 rounded-xl bg-slate-955/80 hover:bg-slate-900 border border-slate-800 hover:border-slate-700 transition-all text-slate-400 hover:text-slate-200 h-11 w-11 cursor-pointer"
className="flex items-center justify-center p-2.5 rounded-xl bg-slate-950/80 hover:bg-slate-900 border border-slate-800 hover:border-slate-700 transition-all text-slate-400 hover:text-slate-200 h-11 w-11 cursor-pointer"
title="Refresh holdings"
>
<RefreshCw className="w-4 h-4" />
</button>
<button
onClick={() => setIsMathModalOpen(true)}
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-blue-400 w-full md:w-auto justify-center h-11 cursor-pointer"
className="flex items-center gap-1.5 px-4 py-2.5 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-blue-400 w-full md:w-auto justify-center h-11 cursor-pointer"
>
<BookOpen className="w-4 h-4" />
<span>📖 Quantitative Handbook</span>
</button>
<button
onClick={() => setIsBlueprintModalOpen(true)}
className="flex items-center gap-1.5 px-4 py-2.5 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-blue-400 w-full md:w-auto justify-center h-11 cursor-pointer animate-pulse-slow"
>
<Compass className="w-4 h-4" />
<span>⚙️ Operational Blueprint</span>
</button>
</div>
</div>
</div>
@@ -259,6 +269,7 @@ export default function WhaleScreener() {
</div>
<WhaleMathModal isOpen={isMathModalOpen} onClose={() => setIsMathModalOpen(false)} />
<WhaleBlueprintModal isOpen={isBlueprintModalOpen} onClose={() => setIsBlueprintModalOpen(false)} />
</div>
);
}