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

components/modules/insider/InsiderBlueprintModal.tsx

@@ -0,0 +1,96 @@
+import React from 'react';
+import { Settings, X } from 'lucide-react';
+
+interface InsiderBlueprintModalProps {
+  isOpen: boolean;
+  onClose: () => void;
+}
+
+export default function InsiderBlueprintModal({ isOpen, onClose }: InsiderBlueprintModalProps) {
+  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-amber-400 to-yellow-400 bg-clip-text text-transparent flex items-center gap-2">
+              <Settings className="w-5 h-5 text-amber-400" /> Insider Trades - 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">Insider Trade Ingestion &amp; Filters</h3>
+            <p className="text-xs text-slate-400 mt-1">Operational details of corporate insider trade tracking.</p>
+          </div>
+
+          {/* Core Mechanics */}
+          <div className="grid grid-cols-1 md:grid-cols-3 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-amber-400 uppercase tracking-wider font-mono">1. SEC Form 4 Tracking</h4>
+              <p className="text-xs text-slate-400 leading-relaxed font-sans">
+                Monitors corporate insider purchases and sales filed on SEC Form 4. Concentrates on high-ranking corporate officers (CEO, CFO, COO) and board directors, whose trading behaviors exhibit historical correlation with forward stock performance.
+              </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-amber-400 uppercase tracking-wider font-mono">2. Trade Size Filters</h4>
+              <p className="text-xs text-slate-400 leading-relaxed font-sans">
+                Filters transactions by absolute dollar size (prioritizing trades exceeding $100k) and percentage weight change relative to the insider's existing ownership stake. This helps eliminate routine stock option exercises and automated sales.
+              </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-amber-400 uppercase tracking-wider font-mono">3. DEV_MODE Interception</h4>
+              <p className="text-xs text-slate-400 leading-relaxed font-sans">
+                When the offline shield is active, the `/api/insider` route short-circuits live FMP calls and serves a high-fidelity local database file to guarantee zero API consumption costs.
+              </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-amber-400 font-semibold">Insider Trades Ledger:</strong> Displays raw trade data: Tickers, Insider Names, Roles (CEO, Director, etc.), Buy/Sell transaction types, trade dates, shares traded, prices per share, and calculated total transaction values.
+              </p>
+              <p>
+                <strong className="text-amber-400 font-semibold">API Layer Status Badge:</strong> Displays the status in the top control bar, showing `🟢 LIVE API` or `🟡 DEV-ARCHIV AKTIV` depending on the environment shield.
+              </p>
+            </div>
+          </div>
+
+        </div>
+      </div>
+    </div>
+  );
+}

components/modules/insider/InsiderDemo.tsx

@@ -7,6 +7,7 @@ import { BarChart, Bar, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContaine
 import 'katex/dist/katex.min.css';
 import { BlockMath, InlineMath } from 'react-katex';
 import InsiderMathModal from './InsiderMathModal';
+import InsiderBlueprintModal from './InsiderBlueprintModal';
 import {
   Shield, User, Landmark, ChevronDown, ChevronUp, Radio, Building2, AlertTriangle, Percent,
   BookOpen
@@ -80,6 +81,7 @@ export default function InsiderDemo() {
   }[] | null>(null);
   const [showMathAccordion, setShowMathAccordion] = useState(false);
   const [isMathModalOpen, setIsMathModalOpen] = useState(false);
+  const [isBlueprintModalOpen, setIsBlueprintModalOpen] = useState(false);
   const [isShieldActive, setIsShieldActive] = useState(false);
   const [loading, setLoading] = useState(false);
   const [errorMsg, setErrorMsg] = useState<string | null>(null);
@@ -273,6 +275,14 @@ export default function InsiderDemo() {
             <span>📖 Quantitative Handbook</span>
           </button>
 
+          <button
+            onClick={() => setIsBlueprintModalOpen(true)}
+            className="flex items-center gap-1.5 px-4 py-2 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-purple-400 justify-center h-11"
+          >
+            <Radio className="w-3.5 h-3.5" />
+            <span>⚙️ Operational Blueprint</span>
+          </button>
+
           <div className="bg-slate-900 border border-slate-800 rounded-xl px-4 py-2 flex items-center gap-3 h-11">
             <Shield className="text-purple-400 w-5 h-5" />
             <div>
@@ -700,6 +710,7 @@ export default function InsiderDemo() {
       </div>
 
       <InsiderMathModal isOpen={isMathModalOpen} onClose={() => setIsMathModalOpen(false)} />
+      <InsiderBlueprintModal isOpen={isBlueprintModalOpen} onClose={() => setIsBlueprintModalOpen(false)} />
     </div>
   );
 }

components/modules/insider/InsiderMathModal.tsx

@@ -26,8 +26,8 @@ export default function InsiderMathModal({ isOpen, onClose }: InsiderMathModalPr
   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-4xl h-[80vh] flex flex-col overflow-hidden shadow-2xl relative text-slate-300">
+    <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-330">
         
         {/* Modal Header */}
         <div className="flex justify-between items-center px-6 py-4 bg-slate-950/40 border-b border-slate-800/60">
@@ -70,8 +70,8 @@ export default function InsiderMathModal({ isOpen, onClose }: InsiderMathModalPr
               <p className="text-xs leading-relaxed text-slate-400">
                 Insiders have unique company information, but clusters yield highest significance. A cluster is registered if:
               </p>
-              <div className="bg-slate-955/40 p-4 rounded-xl border border-slate-800/60 my-2">
-                <BlockMath math="\\text{Count}_{\\text{insiders}} \\ge 3 \\quad \\text{within a rolling 14-day window}" />
+              <div className="bg-slate-950/40 p-4 rounded-xl border border-slate-800/60 my-2">
+                <BlockMath math="\text{Count}_{\text{insiders}} \ge 3 \quad \text{within a rolling 14-day window}" />
                 <p className="text-[11px] text-slate-400 font-mono mt-2 text-center">
                   Insiders must represent distinct entities (e.g. CEO, CFO, and Directors trading concurrently).
                 </p>
@@ -83,8 +83,8 @@ export default function InsiderMathModal({ isOpen, onClose }: InsiderMathModalPr
               <p className="text-xs leading-relaxed text-slate-400">
                 The Insider Intensity Score scales signals based on size, conviction value, and count of participants:
               </p>
-              <div className="bg-slate-955/40 p-4 rounded-xl border border-slate-800/60 my-2">
-                <BlockMath math="I_{\\text{score}} = \\ln\\left(\\sum_{k=1}^N \\text{Volume}_{\\text{shares}, k}\\right) \\times \\left(\\frac{\\sum_{k=1}^N \\text{Value}_{\\text{USD}, k}}{\\text{Market Cap}}\\right) \\times \\text{Count}_{\\text{insiders}}" />
+              <div className="bg-slate-950/40 p-4 rounded-xl border border-slate-800/60 my-2">
+                <BlockMath math="I_{\text{score}} = \ln\left(\sum_{k=1}^N \text{Volume}_{\text{shares}, k}\right) \times \left(\frac{\sum_{k=1}^N \text{Value}_{\text{USD}, k}}{\text{Market Cap}}\right) \times \text{Count}_{\text{insiders}}" />
               </div>
             </div>
 
@@ -93,9 +93,9 @@ export default function InsiderMathModal({ isOpen, onClose }: InsiderMathModalPr
               <p className="text-xs leading-relaxed text-slate-400">
                 The engine cross-references corporate clusters with the Overreaction Scanner, isolating stocks with the highest rebound probabilities:
               </p>
-              <div className="bg-slate-955/40 p-4 rounded-xl border border-slate-800/60 my-2">
+              <div className="bg-slate-950/40 p-4 rounded-xl border border-slate-800/60 my-2">
                 <p className="text-xs leading-relaxed font-mono">
-                  {"If "}<InlineMath math="\\text{Alert} \\in \\text{Scanner}_{\\text{Oversold}}" />{" and "}<InlineMath math="\\text{Cluster} \\in \\text{Insider}_{\\text{Active}}" />{":"}
+                  {"If "}<InlineMath math="\text{Alert} \in \text{Scanner}_{\text{Oversold}}" />{" and "}<InlineMath math="\text{Cluster} \in \text{Insider}_{\text{Active}}" />{":"}
                   <br/>
                   Prioritize tickers showing asymmetric insider buying during panic drops, suggesting fundamental divergence from market sentiment.
                 </p>