Spaces:
Running
Running
| <!-- SILENTPATTERN FINAL BUILD: 2025-12-15 | pages: 10 | features: hash-deep-linking, lab-navigator, access-modal, form-validation, program-dossiers, active-card-states --> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8" /> | |
| <meta name="viewport" content="width=device-width,initial-scale=1.0" /> | |
| <title>SILENTPATTERN — Programs</title> | |
| <!-- Tailwind --> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <!-- Three.js + Vanta (pinned) --> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vanta.net.min.js"></script> | |
| <!-- Icons + Font --> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap"> | |
| <style> | |
| body { font-family: 'Inter', sans-serif; } | |
| .gradient-text { | |
| background: linear-gradient(90deg, #6366f1, #8b5cf6, #ec4899); | |
| -webkit-background-clip: text; | |
| background-clip: text; | |
| color: transparent; | |
| } | |
| .aura { | |
| background: | |
| radial-gradient(circle at 25% 20%, rgba(99,102,241,0.22), transparent 44%), | |
| radial-gradient(circle at 80% 75%, rgba(236,72,153,0.12), transparent 50%), | |
| radial-gradient(circle at 55% 45%, rgba(139,92,246,0.10), transparent 60%); | |
| } | |
| .conscious-element { transition: all 0.28s ease; } | |
| .conscious-element:hover { transform: translateY(-2px); } | |
| .focus-ring:focus { outline: none; box-shadow: 0 0 0 2px rgba(99,102,241,0.65); } | |
| /* Scrollbar for dossier panel */ | |
| .thin-scroll { | |
| scrollbar-width: thin; | |
| scrollbar-color: #4f46e5 #1e1b4b; | |
| } | |
| .thin-scroll::-webkit-scrollbar { width: 6px; } | |
| .thin-scroll::-webkit-scrollbar-track { background: #1e1b4b; } | |
| .thin-scroll::-webkit-scrollbar-thumb { background-color: #4f46e5; border-radius: 3px; } | |
| .modal { transition: opacity 0.3s ease, transform 0.3s ease; } | |
| .modal-hidden { opacity: 0; transform: translateY(20px); pointer-events: none; } | |
| .modal-visible { opacity: 1; transform: translateY(0); } | |
| /* Stage badges */ | |
| .badge { | |
| display: inline-flex; | |
| align-items: center; | |
| gap: 8px; | |
| padding: 6px 10px; | |
| border-radius: 999px; | |
| font-size: 12px; | |
| border: 1px solid rgba(148,163,184,0.18); | |
| background: rgba(15,23,42,0.25); | |
| color: rgba(226,232,240,0.9); | |
| letter-spacing: 0.08em; | |
| text-transform: uppercase; | |
| } | |
| .dot { width: 8px; height: 8px; border-radius: 999px; } | |
| .dot-concept { background: rgba(99,102,241,0.9); } | |
| .dot-proto { background: rgba(139,92,246,0.9); } | |
| .dot-validated { background: rgba(16,185,129,0.9); } | |
| /* Subtle "bay" grid */ | |
| .bay-grid { | |
| background-image: | |
| linear-gradient(rgba(148,163,184,0.06) 1px, transparent 1px), | |
| linear-gradient(90deg, rgba(148,163,184,0.06) 1px, transparent 1px); | |
| background-size: 40px 40px; | |
| background-position: center; | |
| } | |
| /* Active card state (minimal, consistent with design) */ | |
| .program-card.active { | |
| border-color: rgba(99,102,241,0.55) ; | |
| box-shadow: 0 0 0 1px rgba(99,102,241,0.22), 0 0 28px rgba(99,102,241,0.08); | |
| transform: translateY(-1px); | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-black text-white overflow-x-hidden"> | |
| <!-- Animated background --> | |
| <div id="vanta-bg" class="fixed top-0 left-0 w-full h-full z-0"></div> | |
| <!-- Minimal top bar --> | |
| <nav class="relative z-10 py-6 px-8 flex justify-between items-center backdrop-blur-sm"> | |
| <a href="index.html" class="flex items-center space-x-2"> | |
| <div class="w-8 h-8 rounded-full bg-indigo-600 flex items-center justify-center"> | |
| <div class="w-2 h-2 rounded-full bg-white animate-pulse"></div> | |
| </div> | |
| <span class="text-xl font-semibold">SILENTPATTERN</span> | |
| </a> | |
| <div class="flex items-center space-x-3"> | |
| <button id="lab-nav-btn" | |
| class="w-10 h-10 rounded-full border border-indigo-500/40 bg-gray-900/20 hover:bg-gray-900/40 backdrop-blur-sm transition flex items-center justify-center focus-ring" | |
| aria-label="Open Lab Navigator" title="Lab Navigator" aria-controls="lab-navigator" aria-haspopup="dialog"> | |
| <i class="fas fa-asterisk text-indigo-300 text-sm"></i> | |
| </button> | |
| <button id="access-btn" | |
| class="px-6 py-2 bg-gradient-to-r from-indigo-600 to-purple-600 rounded-full hover:opacity-90 transition focus-ring" | |
| aria-controls="access-modal" aria-haspopup="dialog"> | |
| Access | |
| </button> | |
| </div> | |
| </nav> | |
| <!-- HERO --> | |
| <section class="relative z-10 px-6 pt-14 pb-8"> | |
| <div class="max-w-6xl mx-auto"> | |
| <div class="flex flex-col gap-5"> | |
| <div class="inline-flex items-center gap-3 self-start px-4 py-2 rounded-full border border-gray-800 bg-gray-900/20 backdrop-blur-sm"> | |
| <span class="w-2 h-2 rounded-full bg-indigo-400 animate-pulse"></span> | |
| <span class="text-xs text-gray-300 tracking-widest uppercase">Programs</span> | |
| <span class="text-xs text-gray-500">Research artifacts and prototypes</span> | |
| </div> | |
| <h1 class="text-3xl md:text-6xl font-bold leading-tight"> | |
| <span class="gradient-text">Program Bay</span><br> | |
| Capabilities as auditable systems | |
| </h1> | |
| <p class="text-gray-300 max-w-3xl text-lg md:text-xl"> | |
| SILENTPATTERN is presented as an interface, not a brochure. Each program has a dossier: scope, assumptions, evaluation protocol, and access gates. | |
| </p> | |
| <div class="text-xs text-gray-500 max-w-3xl"> | |
| Note: Programs involving markets are research prototypes. Nothing here constitutes investment advice, solicitation, or performance claims. | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- PROGRAM BAY + DOSSIER PANEL --> | |
| <section class="relative z-10 px-6 pb-16"> | |
| <div class="max-w-6xl mx-auto"> | |
| <div class="grid grid-cols-1 lg:grid-cols-5 gap-6"> | |
| <!-- LEFT: Program Bay --> | |
| <div class="lg:col-span-3 rounded-2xl border border-gray-800 bg-gray-900/20 overflow-hidden aura"> | |
| <div class="px-6 py-5 border-b border-gray-800/60 flex items-center justify-between"> | |
| <div> | |
| <div class="text-sm text-gray-200 font-medium">Program Bay</div> | |
| <div class="text-xs text-gray-500 mt-1">Select a module to load its dossier.</div> | |
| </div> | |
| <div class="text-xs px-2.5 py-1 rounded-full border border-indigo-500/30 text-indigo-200 bg-indigo-900/15"> | |
| INTERFACE MODE | |
| </div> | |
| </div> | |
| <div class="p-6 bay-grid"> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-4"> | |
| <!-- MCAP --> | |
| <button type="button" | |
| class="program-card text-left rounded-2xl border border-gray-800 bg-gray-900/30 hover:border-indigo-500/55 hover:bg-gray-900/45 transition p-5 conscious-element focus-ring" | |
| data-dossier="mcap" aria-label="Open dossier: MCAP" aria-pressed="false"> | |
| <div class="flex items-start justify-between gap-4"> | |
| <div> | |
| <div class="text-lg font-semibold text-gray-100">MCAP</div> | |
| <div class="text-xs text-gray-500 mt-1">Minimal Causal Abstraction Principle</div> | |
| </div> | |
| <span class="badge"><span class="dot dot-proto"></span>Prototype</span> | |
| </div> | |
| <p class="text-sm text-gray-300 mt-4 leading-relaxed"> | |
| A compression rule for causal structure: preserve intervention-relevant information while minimizing representation. | |
| </p> | |
| <div class="mt-4 text-xs text-gray-500 flex items-center gap-2"> | |
| <i class="fas fa-shield-halved"></i> | |
| <span>Evaluation-first; claims gated by evidence</span> | |
| </div> | |
| </button> | |
| <!-- CHAI --> | |
| <button type="button" | |
| class="program-card text-left rounded-2xl border border-gray-800 bg-gray-900/30 hover:border-indigo-500/55 hover:bg-gray-900/45 transition p-5 conscious-element focus-ring" | |
| data-dossier="chai" aria-label="Open dossier: CHAI" aria-pressed="false"> | |
| <div class="flex items-start justify-between gap-4"> | |
| <div> | |
| <div class="text-lg font-semibold text-gray-100">CHAI</div> | |
| <div class="text-xs text-gray-500 mt-1">Forecasting & regime inference stack</div> | |
| </div> | |
| <span class="badge"><span class="dot dot-concept"></span>Concept</span> | |
| </div> | |
| <p class="text-sm text-gray-300 mt-4 leading-relaxed"> | |
| A research pipeline for market prediction under distribution shift: features, regimes, calibration, and robust validation. | |
| </p> | |
| <div class="mt-4 text-xs text-gray-500 flex items-center gap-2"> | |
| <i class="fas fa-triangle-exclamation"></i> | |
| <span>Markets are adversarial; protocols matter</span> | |
| </div> | |
| </button> | |
| <!-- Quantum Lambda --> | |
| <button type="button" | |
| class="program-card text-left rounded-2xl border border-gray-800 bg-gray-900/30 hover:border-indigo-500/55 hover:bg-gray-900/45 transition p-5 conscious-element focus-ring" | |
| data-dossier="quantum_lambda" aria-label="Open dossier: Quantum Lambda" aria-pressed="false"> | |
| <div class="flex items-start justify-between gap-4"> | |
| <div> | |
| <div class="text-lg font-semibold text-gray-100">Quantum Lambda</div> | |
| <div class="text-xs text-gray-500 mt-1">High-frequency decision systems</div> | |
| </div> | |
| <span class="badge"><span class="dot dot-concept"></span>Concept</span> | |
| </div> | |
| <p class="text-sm text-gray-300 mt-4 leading-relaxed"> | |
| A microstructure-aware control loop: latency budgets, execution constraints, and risk-aware action selection. | |
| </p> | |
| <div class="mt-4 text-xs text-gray-500 flex items-center gap-2"> | |
| <i class="fas fa-stopwatch"></i> | |
| <span>Assumptions must be explicit (latency, slippage)</span> | |
| </div> | |
| </button> | |
| <!-- AI Scientist --> | |
| <button type="button" | |
| class="program-card text-left rounded-2xl border border-gray-800 bg-gray-900/30 hover:border-indigo-500/55 hover:bg-gray-900/45 transition p-5 conscious-element focus-ring" | |
| data-dossier="ai_scientist" aria-label="Open dossier: AI Scientist" aria-pressed="false"> | |
| <div class="flex items-start justify-between gap-4"> | |
| <div> | |
| <div class="text-lg font-semibold text-gray-100">AI Scientist</div> | |
| <div class="text-xs text-gray-500 mt-1">Hypothesis → Experiment → Report</div> | |
| </div> | |
| <span class="badge"><span class="dot dot-proto"></span>Prototype</span> | |
| </div> | |
| <p class="text-sm text-gray-300 mt-4 leading-relaxed"> | |
| An internal research engine that standardizes experiments, enforces reproducibility, and generates concise research notes with uncertainty. | |
| </p> | |
| <div class="mt-4 text-xs text-gray-500 flex items-center gap-2"> | |
| <i class="fas fa-flask"></i> | |
| <span>Reproducibility is a feature, not a slogan</span> | |
| </div> | |
| </button> | |
| <!-- Agentic Workforce --> | |
| <button type="button" | |
| class="program-card text-left rounded-2xl border border-gray-800 bg-gray-900/30 hover:border-indigo-500/55 hover:bg-gray-900/45 transition p-5 conscious-element focus-ring md:col-span-2" | |
| data-dossier="agentic_workforce" aria-label="Open dossier: Agentic Workforce" aria-pressed="false"> | |
| <div class="flex items-start justify-between gap-4"> | |
| <div> | |
| <div class="text-lg font-semibold text-gray-100">Agentic Workforce</div> | |
| <div class="text-xs text-gray-500 mt-1">Autonomous workflows under governance</div> | |
| </div> | |
| <span class="badge"><span class="dot dot-concept"></span>Concept</span> | |
| </div> | |
| <p class="text-sm text-gray-300 mt-4 leading-relaxed"> | |
| "AI employees" as controlled agents: scoped permissions, logging, approval gates, and outcome verification. | |
| </p> | |
| <div class="mt-4 text-xs text-gray-500 flex items-center gap-2"> | |
| <i class="fas fa-key"></i> | |
| <span>Permissions + audits + fail-closed behaviors</span> | |
| </div> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- RIGHT: Dossier Panel --> | |
| <div class="lg:col-span-2 rounded-2xl border border-gray-800 bg-gray-900/30 overflow-hidden"> | |
| <div class="px-6 py-5 border-b border-gray-800/60"> | |
| <div class="flex items-start justify-between gap-4"> | |
| <div> | |
| <div id="dossier-title" class="text-lg font-semibold text-gray-100">Dossier</div> | |
| <div id="dossier-subtitle" class="text-xs text-gray-500 mt-1">Select a module to load details.</div> | |
| </div> | |
| <div id="dossier-status" | |
| class="text-xs px-2.5 py-1 rounded-full border border-indigo-500/30 text-indigo-200 bg-indigo-900/15"> | |
| READY | |
| </div> | |
| </div> | |
| </div> | |
| <div class="p-6 space-y-5 max-h-[740px] overflow-auto thin-scroll"> | |
| <div class="rounded-xl border border-gray-800 bg-black/20 p-4"> | |
| <div class="text-xs text-gray-400 uppercase tracking-wider mb-2">Summary</div> | |
| <div id="dossier-body" class="text-sm text-gray-300 leading-relaxed"> | |
| This panel is designed to be stable and audit-friendly: scope, assumptions, evaluation protocol, and access gates. | |
| </div> | |
| </div> | |
| <div class="rounded-xl border border-gray-800 bg-black/20 p-4"> | |
| <div class="text-xs text-gray-400 uppercase tracking-wider mb-2">Evidence Capsule</div> | |
| <ul id="dossier-evidence" class="text-sm text-gray-300 space-y-1"> | |
| <li class="text-gray-500">No module selected.</li> | |
| </ul> | |
| </div> | |
| <div class="rounded-xl border border-gray-800 bg-black/20 p-4"> | |
| <div class="text-xs text-gray-400 uppercase tracking-wider mb-2">Public Interface</div> | |
| <div id="dossier-public" class="text-sm text-gray-300 leading-relaxed"> | |
| Public copy remains conservative. Claims scale with verified evidence. | |
| </div> | |
| </div> | |
| <div class="rounded-xl border border-gray-800 bg-black/20 p-4"> | |
| <div class="text-xs text-gray-400 uppercase tracking-wider mb-2">Evaluation Protocol</div> | |
| <div id="dossier-eval" class="text-sm text-gray-300 leading-relaxed"> | |
| Define the benchmark first; then allow the method to earn its reputation. | |
| </div> | |
| </div> | |
| <div class="flex flex-col gap-3"> | |
| <button id="dossier-primary" | |
| class="px-5 py-3 rounded-xl bg-gradient-to-r from-indigo-600 to-purple-600 hover:opacity-90 transition focus-ring"> | |
| Request Access | |
| </button> | |
| <button id="dossier-secondary" | |
| class="px-5 py-3 rounded-xl border border-gray-700 bg-gray-900/20 hover:bg-gray-900/35 transition focus-ring"> | |
| Open Console | |
| </button> | |
| </div> | |
| <div id="dossier-meta" class="text-xs text-gray-500"> | |
| Last updated: <span class="text-gray-300">—</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- CAPABILITY PRIMITIVES (SHORT, NON-BROCHURE) --> | |
| <section class="relative z-10 px-6 pb-16"> | |
| <div class="max-w-6xl mx-auto rounded-2xl border border-gray-800 bg-gray-900/20 overflow-hidden"> | |
| <div class="px-6 py-5 border-b border-gray-800/60 flex items-center justify-between"> | |
| <div> | |
| <div class="text-sm text-gray-200 font-medium">Capability Primitives</div> | |
| <div class="text-xs text-gray-500 mt-1">The building blocks behind programs.</div> | |
| </div> | |
| <div class="text-xs text-gray-500">Concise by design</div> | |
| </div> | |
| <div class="p-6 grid grid-cols-1 md:grid-cols-2 gap-4"> | |
| <div class="rounded-2xl border border-gray-800 bg-gray-900/30 p-5"> | |
| <div class="text-sm font-semibold text-gray-100">Causal Abstraction</div> | |
| <div class="text-sm text-gray-300 mt-2"> | |
| Distill mechanisms, not correlations. Prefer intervention-relevant representations. | |
| </div> | |
| </div> | |
| <div class="rounded-2xl border border-gray-800 bg-gray-900/30 p-5"> | |
| <div class="text-sm font-semibold text-gray-100">Regime Awareness</div> | |
| <div class="text-sm text-gray-300 mt-2"> | |
| Models must survive distribution shift; calibration and uncertainty are first-class. | |
| </div> | |
| </div> | |
| <div class="rounded-2xl border border-gray-800 bg-gray-900/30 p-5"> | |
| <div class="text-sm font-semibold text-gray-100">Experiment Automation</div> | |
| <div class="text-sm text-gray-300 mt-2"> | |
| Repeatable harnesses, tracked assumptions, and reportable deltas per change. | |
| </div> | |
| </div> | |
| <div class="rounded-2xl border border-gray-800 bg-gray-900/30 p-5"> | |
| <div class="text-sm font-semibold text-gray-100">Agentic Orchestration</div> | |
| <div class="text-sm text-gray-300 mt-2"> | |
| Autonomous workflows with permissions, logs, approvals, and fail-closed behavior. | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Minimal Footer --> | |
| <footer class="relative z-10 px-6 pb-10"> | |
| <div class="max-w-6xl mx-auto border-t border-gray-800/60 pt-8 flex flex-col md:flex-row justify-between items-center gap-4"> | |
| <div class="text-sm text-gray-500">© 2025 SILENTPATTERN. All rights reserved.</div> | |
| <div class="text-sm text-gray-500 flex gap-6"> | |
| <a href="research.html" class="hover:text-indigo-400 transition">Research</a> | |
| <a href="privacy.html" class="hover:text-indigo-400 transition">Privacy</a> | |
| <a href="terms.html" class="hover:text-indigo-400 transition">Terms</a> | |
| <a href="contact.html" class="hover:text-indigo-400 transition">Contact</a> | |
| </div> | |
| </div> | |
| </footer> | |
| <!-- ACCESS MODAL --> | |
| <div id="access-modal" | |
| class="fixed inset-0 z-50 flex items-center justify-center bg-black/80 backdrop-blur-sm modal modal-hidden" | |
| role="dialog" aria-modal="true" aria-labelledby="access-modal-title" tabindex="-1"> | |
| <div class="bg-gray-900/90 border border-gray-800 rounded-xl max-w-md w-full mx-4 relative overflow-hidden"> | |
| <div class="absolute inset-x-0 top-0 h-1 bg-gradient-to-r from-indigo-600 to-purple-600"></div> | |
| <div class="p-6"> | |
| <div class="flex justify-between items-start mb-6"> | |
| <div> | |
| <h3 class="text-xl font-bold" id="access-modal-title">Request Access</h3> | |
| <p class="text-gray-400 mt-1">Curated access for research and evaluation</p> | |
| </div> | |
| <button id="close-access-modal" class="text-gray-400 hover:text-white focus-ring" aria-label="Close"> | |
| <i class="fas fa-times"></i> | |
| </button> | |
| </div> | |
| <div id="access-feedback" | |
| class="hidden mb-4 rounded-lg border border-gray-800 bg-black/25 px-4 py-3 text-sm" | |
| role="status" aria-live="polite"></div> | |
| <form id="access-form" class="space-y-4" novalidate> | |
| <div> | |
| <label for="name" class="block text-sm font-medium mb-1">Full Name</label> | |
| <input type="text" id="name" class="w-full bg-gray-800/50 border border-gray-700 rounded-lg px-4 py-2 focus-ring" autocomplete="name"> | |
| <p id="name-error" class="hidden mt-1 text-xs text-red-300">Please enter your full name.</p> | |
| </div> | |
| <div> | |
| <label for="email" class="block text-sm font-medium mb-1">Email</label> | |
| <input type="email" id="email" class="w-full bg-gray-800/50 border border-gray-700 rounded-lg px-4 py-2 focus-ring" autocomplete="email"> | |
| <p id="email-error" class="hidden mt-1 text-xs text-red-300">Please enter a valid email address.</p> | |
| </div> | |
| <div> | |
| <label for="institution" class="block text-sm font-medium mb-1">Institution/Organization</label> | |
| <input type="text" id="institution" class="w-full bg-gray-800/50 border border-gray-700 rounded-lg px-4 py-2 focus-ring" autocomplete="organization"> | |
| <p id="institution-error" class="hidden mt-1 text-xs text-red-300">Please enter your institution/organization.</p> | |
| </div> | |
| <div> | |
| <label for="purpose" class="block text-sm font-medium mb-1">Purpose</label> | |
| <select id="purpose" class="w-full bg-gray-800/50 border border-gray-700 rounded-lg px-4 py-2 focus-ring"> | |
| <option value="">Select a purpose</option> | |
| <option value="research">Academic / Independent Research</option> | |
| <option value="development">Engineering / Product Evaluation</option> | |
| <option value="partnership">Partnership</option> | |
| <option value="other">Other</option> | |
| </select> | |
| <p id="purpose-error" class="hidden mt-1 text-xs text-red-300">Please select a purpose.</p> | |
| </div> | |
| <div class="pt-2"> | |
| <button type="submit" class="w-full py-3 bg-gradient-to-r from-indigo-600 to-purple-600 rounded-lg hover:opacity-90 transition focus-ring"> | |
| Submit Request | |
| </button> | |
| </div> | |
| </form> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- LAB NAVIGATOR --> | |
| <div id="lab-navigator" | |
| class="fixed inset-0 z-[60] bg-black/80 backdrop-blur-md modal modal-hidden" | |
| role="dialog" aria-modal="true" aria-label="Lab Navigator" tabindex="-1"> | |
| <div class="absolute inset-0" data-lab-close="true"></div> | |
| <div class="relative w-full h-full flex items-center justify-center p-6"> | |
| <div class="w-full max-w-6xl mx-auto grid grid-cols-1 lg:grid-cols-2 gap-6"> | |
| <div class="relative rounded-2xl border border-gray-800 bg-gray-900/20 overflow-hidden"> | |
| <div class="flex items-center justify-between px-5 py-4 border-b border-gray-800/60"> | |
| <div class="flex items-center space-x-3"> | |
| <div class="w-7 h-7 rounded-full bg-indigo-600 flex items-center justify-center"> | |
| <div class="w-1.5 h-1.5 rounded-full bg-white animate-pulse"></div> | |
| </div> | |
| <div> | |
| <div class="text-sm text-gray-300 tracking-wide">SILENTPATTERN</div> | |
| <div class="text-xs text-gray-500">Lab Navigator</div> | |
| </div> | |
| </div> | |
| <button id="lab-nav-close" | |
| class="w-9 h-9 rounded-full border border-gray-800 bg-gray-900/30 hover:bg-gray-900/50 transition flex items-center justify-center focus-ring" | |
| aria-label="Close Lab Navigator"> | |
| <i class="fas fa-times text-gray-300 text-sm"></i> | |
| </button> | |
| </div> | |
| <div class="relative p-6 min-h-[420px]"> | |
| <div class="absolute inset-0 opacity-70 pointer-events-none" | |
| style="background: radial-gradient(circle at 30% 20%, rgba(99,102,241,0.18), transparent 45%), | |
| radial-gradient(circle at 70% 70%, rgba(236,72,153,0.10), transparent 50%);"></div> | |
| <div class="relative grid grid-cols-1 sm:grid-cols-2 gap-3"> | |
| <button class="lab-node text-left rounded-xl border border-gray-800 bg-gray-900/30 hover:border-indigo-500/50 hover:bg-gray-900/45 transition p-4 focus-ring" | |
| data-dossier="start" aria-current="false"> | |
| <div class="text-sm text-gray-200 font-medium">Start Here</div> | |
| <div class="text-xs text-gray-500 mt-1">Entry interface</div> | |
| </button> | |
| <button class="lab-node text-left rounded-xl border border-gray-800 bg-gray-900/30 hover:border-indigo-500/50 hover:bg-gray-900/45 transition p-4 focus-ring" | |
| data-dossier="programs" aria-current="false"> | |
| <div class="text-sm text-gray-200 font-medium">Programs</div> | |
| <div class="text-xs text-gray-500 mt-1">This page</div> | |
| </button> | |
| <button class="lab-node text-left rounded-xl border border-gray-800 bg-gray-900/30 hover:border-indigo-500/50 hover:bg-gray-900/45 transition p-4 focus-ring" | |
| data-dossier="console" aria-current="false"> | |
| <div class="text-sm text-gray-200 font-medium">Console</div> | |
| <div class="text-xs text-gray-500 mt-1">Controlled chat</div> | |
| </button> | |
| <button class="lab-node text-left rounded-xl border border-gray-800 bg-gray-900/30 hover:border-indigo-500/50 hover:bg-gray-900/45 transition p-4 focus-ring" | |
| data-dossier="research" aria-current="false"> | |
| <div class="text-sm text-gray-200 font-medium">Research</div> | |
| <div class="text-xs text-gray-500 mt-1">Notes and briefs</div> | |
| </button> | |
| <button class="lab-node text-left rounded-xl border border-gray-800 bg-gray-900/30 hover:border-indigo-500/50 hover:bg-gray-900/45 transition p-4 focus-ring sm:col-span-2" | |
| data-dossier="access" aria-current="false"> | |
| <div class="text-sm text-gray-200 font-medium">Access</div> | |
| <div class="text-xs text-gray-500 mt-1">Curated entry</div> | |
| </button> | |
| </div> | |
| <div class="relative mt-6 text-xs text-gray-500"> | |
| Tip: Press <span class="text-gray-300">Esc</span> to close. | |
| </div> | |
| </div> | |
| </div> | |
| <div class="relative rounded-2xl border border-gray-800 bg-gray-900/30 overflow-hidden"> | |
| <div class="px-6 py-5 border-b border-gray-800/60"> | |
| <div class="flex items-start justify-between gap-4"> | |
| <div> | |
| <div id="lab-dossier-title" class="text-lg font-semibold text-gray-100">Lab Dossier</div> | |
| <div id="lab-dossier-subtitle" class="text-xs text-gray-500 mt-1">Select a node to load details.</div> | |
| </div> | |
| <div id="lab-dossier-status" | |
| class="text-xs px-2.5 py-1 rounded-full border border-indigo-500/30 text-indigo-200 bg-indigo-900/15"> | |
| READY | |
| </div> | |
| </div> | |
| </div> | |
| <div class="p-6 space-y-5 max-h-[560px] overflow-auto thin-scroll"> | |
| <div id="lab-dossier-body" class="text-sm text-gray-300 leading-relaxed"> | |
| This interface reveals SILENTPATTERN as a set of research programs and operational systems. | |
| The public layer is minimal by design; depth is opened intentionally. | |
| </div> | |
| <div class="rounded-xl border border-gray-800 bg-black/20 p-4"> | |
| <div class="text-xs text-gray-400 uppercase tracking-wider mb-2">Evidence Capsule</div> | |
| <ul id="lab-dossier-evidence" class="text-sm text-gray-300 space-y-1"> | |
| <li class="text-gray-500">No dossier selected.</li> | |
| </ul> | |
| </div> | |
| <div class="flex flex-col sm:flex-row gap-3"> | |
| <button id="lab-dossier-primary" | |
| class="flex-1 px-5 py-3 rounded-xl bg-gradient-to-r from-indigo-600 to-purple-600 hover:opacity-90 transition focus-ring"> | |
| Open | |
| </button> | |
| <button id="lab-dossier-secondary" | |
| class="flex-1 px-5 py-3 rounded-xl border border-gray-700 bg-gray-900/20 hover:bg-gray-900/35 transition focus-ring"> | |
| View Note | |
| </button> | |
| </div> | |
| <div id="lab-dossier-meta" class="text-xs text-gray-500"> | |
| Last updated: <span class="text-gray-300">—</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <script> | |
| // Site-wide configuration | |
| const CONFIG = { | |
| MODAL_HASHES: new Set(['lab', 'access']), | |
| DOSSIER_HASHES: new Set(['mcap', 'chai', 'quantum_lambda', 'ai_scientist', 'agentic_workforce']) | |
| }; | |
| /* ------------------------------------------------------------- | |
| UTILITY FUNCTIONS (consistent with index.html) | |
| ------------------------------------------------------------- */ | |
| function escapeHtml(str) { | |
| return String(str) | |
| .replaceAll('&', '&') | |
| .replaceAll('<', '<') | |
| .replaceAll('>', '>') | |
| .replaceAll('"', '"') | |
| .replaceAll("'", '''); | |
| } | |
| function isValidEmail(email) { | |
| return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email); | |
| } | |
| function currentHashKey() { | |
| const h = (window.location.hash || '').replace('#', '').trim(); | |
| return h; | |
| } | |
| function setHash(key, replace = false) { | |
| if (!key) return; | |
| if (window.location.hash.replace('#', '') === key) return; | |
| if (replace) { | |
| history.replaceState(null, '', '#' + key); | |
| } else { | |
| history.pushState(null, '', '#' + key); | |
| } | |
| } | |
| function clearHashIf(key) { | |
| const h = currentHashKey(); | |
| if (!h) return; | |
| if (!key || h === key) { | |
| history.replaceState(null, '', window.location.pathname + window.location.search); | |
| } | |
| } | |
| /* ------------------------------------------------------------- | |
| MODAL HELPERS (consistent with index.html) | |
| ------------------------------------------------------------- */ | |
| function trapFocus(modal) { | |
| const focusable = modal.querySelectorAll('a, button, input, select, textarea, [tabindex]:not([tabindex="-1"])'); | |
| if (!focusable.length) return; | |
| const first = focusable[0]; | |
| const last = focusable[focusable.length - 1]; | |
| function handler(e) { | |
| if (e.key === 'Tab') { | |
| if (e.shiftKey) { | |
| if (document.activeElement === first) { e.preventDefault(); last.focus(); } | |
| } else { | |
| if (document.activeElement === last) { e.preventDefault(); first.focus(); } | |
| } | |
| } | |
| } | |
| modal.addEventListener('keydown', handler); | |
| modal._focusHandler = handler; | |
| } | |
| function untrapFocus(modal) { | |
| if (modal._focusHandler) { | |
| modal.removeEventListener('keydown', modal._focusHandler); | |
| delete modal._focusHandler; | |
| } | |
| } | |
| const toggleModal = (modal, show) => { | |
| if (show) { | |
| modal.classList.remove('modal-hidden'); | |
| modal.classList.add('modal-visible'); | |
| document.body.style.overflow = 'hidden'; | |
| setTimeout(() => { modal.focus(); trapFocus(modal); }, 0); | |
| } else { | |
| modal.classList.remove('modal-visible'); | |
| modal.classList.add('modal-hidden'); | |
| document.body.style.overflow = ''; | |
| untrapFocus(modal); | |
| } | |
| }; | |
| /* ------------------------------------------------------------- | |
| VANTA BACKGROUND (guarded) | |
| ------------------------------------------------------------- */ | |
| let vantaEffect = null; | |
| try { | |
| if (window.VANTA && typeof VANTA.NET === 'function') { | |
| vantaEffect = VANTA.NET({ | |
| el: "#vanta-bg", | |
| mouseControls: true, | |
| touchControls: true, | |
| gyroControls: false, | |
| minHeight: 200.00, | |
| minWidth: 200.00, | |
| scale: 1.00, | |
| scaleMobile: 1.00, | |
| color: 0x4f46e5, | |
| backgroundColor: 0x020617, | |
| points: 12.00, | |
| maxDistance: 20.00, | |
| spacing: 15.00 | |
| }); | |
| } | |
| } catch (_) { | |
| vantaEffect = null; | |
| } | |
| window.addEventListener('resize', () => { | |
| if (vantaEffect && typeof vantaEffect.resize === 'function') vantaEffect.resize(); | |
| }); | |
| /* ------------------------------------------------------------- | |
| ACCESS MODAL + INLINE FEEDBACK | |
| ------------------------------------------------------------- */ | |
| const accessModal = document.getElementById('access-modal'); | |
| const accessBtn = document.getElementById('access-btn'); | |
| const closeAccessModal = document.getElementById('close-access-modal'); | |
| const accessForm = document.getElementById('access-form'); | |
| const accessFeedback = document.getElementById('access-feedback'); | |
| const nameEl = document.getElementById('name'); | |
| const emailEl = document.getElementById('email'); | |
| const institutionEl = document.getElementById('institution'); | |
| const purposeEl = document.getElementById('purpose'); | |
| const nameErr = document.getElementById('name-error'); | |
| const emailErr = document.getElementById('email-error'); | |
| const institutionErr = document.getElementById('institution-error'); | |
| const purposeErr = document.getElementById('purpose-error'); | |
| function setAccessFeedback(kind, text) { | |
| if (!accessFeedback) return; | |
| accessFeedback.classList.remove('hidden'); | |
| accessFeedback.classList.remove('border-red-500/30', 'bg-red-900/10', 'text-red-200'); | |
| accessFeedback.classList.remove('border-emerald-500/30', 'bg-emerald-900/10', 'text-emerald-200'); | |
| accessFeedback.classList.remove('border-indigo-500/30', 'bg-indigo-900/10', 'text-indigo-200'); | |
| if (kind === 'error') { | |
| accessFeedback.classList.add('border-red-500/30', 'bg-red-900/10', 'text-red-200'); | |
| } else if (kind === 'success') { | |
| accessFeedback.classList.add('border-emerald-500/30', 'bg-emerald-900/10', 'text-emerald-200'); | |
| } else { | |
| accessFeedback.classList.add('border-indigo-500/30', 'bg-indigo-900/10', 'text-indigo-200'); | |
| } | |
| accessFeedback.textContent = text; | |
| } | |
| function hideAccessFeedback() { | |
| if (!accessFeedback) return; | |
| accessFeedback.textContent = ''; | |
| accessFeedback.classList.add('hidden'); | |
| accessFeedback.classList.remove( | |
| 'border-red-500/30','bg-red-900/10','text-red-200', | |
| 'border-emerald-500/30','bg-emerald-900/10','text-emerald-200', | |
| 'border-indigo-500/30','bg-indigo-900/10','text-indigo-200' | |
| ); | |
| } | |
| function setFieldError(inputEl, errorEl, isError) { | |
| if (!inputEl || !errorEl) return; | |
| if (isError) { | |
| errorEl.classList.remove('hidden'); | |
| inputEl.setAttribute('aria-invalid', 'true'); | |
| inputEl.classList.add('border-red-500/60'); | |
| } else { | |
| errorEl.classList.add('hidden'); | |
| inputEl.removeAttribute('aria-invalid'); | |
| inputEl.classList.remove('border-red-500/60'); | |
| } | |
| } | |
| function resetAccessErrors() { | |
| hideAccessFeedback(); | |
| setFieldError(nameEl, nameErr, false); | |
| setFieldError(emailEl, emailErr, false); | |
| setFieldError(institutionEl, institutionErr, false); | |
| setFieldError(purposeEl, purposeErr, false); | |
| } | |
| function openAccessModal(setHashFlag = true) { | |
| resetAccessErrors(); | |
| toggleModal(accessModal, true); | |
| if (setHashFlag) setHash('access'); | |
| setTimeout(() => nameEl && nameEl.focus(), 80); | |
| } | |
| function closeAccessModal(clearHashFlag = true) { | |
| toggleModal(accessModal, false); | |
| if (clearHashFlag) clearHashIf('access'); | |
| } | |
| accessBtn.addEventListener('click', () => openAccessModal(true)); | |
| if (closeAccessModal) closeAccessModal.addEventListener('click', () => closeAccessModal(true)); | |
| if (accessModal) { | |
| accessModal.addEventListener('click', (e) => { | |
| if (e.target === accessModal) closeAccessModal(true); | |
| }); | |
| } | |
| if (accessForm) { | |
| // Clear per-field errors on input | |
| [nameEl, emailEl, institutionEl, purposeEl].forEach(el => { | |
| if (!el) return; | |
| el.addEventListener('input', () => { | |
| if (el === nameEl) setFieldError(nameEl, nameErr, !nameEl.value.trim()); | |
| if (el === emailEl) setFieldError(emailEl, emailErr, !isValidEmail(emailEl.value.trim())); | |
| if (el === institutionEl) setFieldError(institutionEl, institutionErr, !institutionEl.value.trim()); | |
| if (el === purposeEl) setFieldError(purposeEl, purposeErr, !purposeEl.value); | |
| }); | |
| el.addEventListener('change', () => el.dispatchEvent(new Event('input'))); | |
| }); | |
| accessForm.addEventListener('submit', (e) => { | |
| e.preventDefault(); | |
| resetAccessErrors(); | |
| const name = (nameEl?.value || '').trim(); | |
| const email = (emailEl?.value || '').trim(); | |
| const institution = (institutionEl?.value || '').trim(); | |
| const purpose = (purposeEl?.value || '').trim(); | |
| let ok = true; | |
| if (!name) { setFieldError(nameEl, nameErr, true); ok = false; } | |
| if (!email || !isValidEmail(email)) { setFieldError(emailEl, emailErr, true); ok = false; } | |
| if (!institution) { setFieldError(institutionEl, institutionErr, true); ok = false; } | |
| if (!purpose) { setFieldError(purposeEl, purposeErr, true); ok = false; } | |
| if (!ok) { | |
| setAccessFeedback('error', 'Please correct the highlighted fields and resubmit.'); | |
| return; | |
| } | |
| setAccessFeedback('success', 'Request received. You will be contacted after review.'); | |
| accessForm.reset(); | |
| }); | |
| } | |
| /* ------------------------------------------------------------- | |
| LAB NAVIGATOR | |
| ------------------------------------------------------------- */ | |
| const labNav = document.getElementById('lab-navigator'); | |
| const labNavBtn = document.getElementById('lab-nav-btn'); | |
| const labNavClose = document.getElementById('lab-nav-close'); | |
| const LAB_DOSSIERS = { | |
| start: { | |
| title: "Start Here", | |
| subtitle: "Entry interface", | |
| status: "ACTIVE", | |
| body: "Return to the main interface.", | |
| evidence: ["Public entry layer", "Programs as dossiers", "Console for controlled interaction"], | |
| primary: { label: "Go to Index", action: () => { window.location.href = "index.html"; } }, | |
| secondary: { label: "Programs", action: () => { window.location.href = "capabilities.html"; } }, | |
| updated: "—" | |
| }, | |
| programs: { | |
| title: "Programs", | |
| subtitle: "This page", | |
| status: "ACTIVE", | |
| body: "Program Bay: MCAP, CHAI, Quantum Lambda, AI Scientist, Agentic Workforce.", | |
| evidence: ["Dossiers with maturity levels", "Evidence capsules", "Access gates"], | |
| primary: { label: "Close Navigator", action: () => closeLabNav(true) }, | |
| secondary: { label: "View Note", action: () => { | |
| // Demo note viewer | |
| const modal = document.createElement('div'); | |
| modal.className = 'fixed inset-0 z-50 flex items-center justify-center bg-black/80 backdrop-blur-sm modal modal-visible'; | |
| modal.innerHTML = ` | |
| <div class="bg-gray-900/90 border border-gray-800 rounded-xl max-w-2xl w-full mx-4 relative overflow-hidden"> | |
| <div class="absolute inset-x-0 top-0 h-1 bg-gradient-to-r from-indigo-600 to-purple-600"></div> | |
| <div class="p-6"> | |
| <div class="flex justify-between items-start mb-6"> | |
| <h3 class="text-xl font-bold">Program Technical Note</h3> | |
| <button class="text-gray-400 hover:text-white close-note-viewer focus-ring"> | |
| <i class="fas fa-times"></i> | |
| </button> | |
| </div> | |
| <p class="text-gray-300 mb-4">Technical notes contain evaluation protocols, assumptions, and evidence capsules. Available to qualified researchers.</p> | |
| <button class="w-full py-3 bg-gradient-to-r from-indigo-600 to-purple-600 rounded-lg hover:opacity-90 transition close-note-viewer focus-ring"> | |
| Close | |
| </button> | |
| </div> | |
| </div> | |
| `; | |
| document.body.appendChild(modal); | |
| const closeBtn = modal.querySelector('.close-note-viewer'); | |
| closeBtn.addEventListener('click', () => { | |
| toggleModal(modal, false); | |
| setTimeout(() => modal.remove(), 300); | |
| }); | |
| modal.addEventListener('click', (e) => { | |
| if (e.target === modal) { | |
| toggleModal(modal, false); | |
| setTimeout(() => modal.remove(), 300); | |
| } | |
| }); | |
| toggleModal(modal, true); | |
| } }, | |
| updated: "—" | |
| }, | |
| console: { | |
| title: "Console", | |
| subtitle: "Controlled chat", | |
| status: "DRAFT", | |
| body: "Controlled chat with exportable transcripts. Model access must remain server-side.", | |
| evidence: ["No client-side secrets", "Audit-ready transcripts", "Fail-closed behaviors"], | |
| primary: { label: "Open Console", action: () => { window.location.href = "chat.html"; } }, | |
| secondary: { label: "Research", action: () => { window.location.href = "research.html"; } }, | |
| updated: "—" | |
| }, | |
| research: { | |
| title: "Research", | |
| subtitle: "Notes and briefs", | |
| status: "DRAFT", | |
| body: "Technical notes, evaluation methodology, and changelogs.", | |
| evidence: ["Evaluation philosophy", "Benchmarks + baselines", "Limitations and failure modes"], | |
| primary: { label: "Open Research", action: () => { window.location.href = "research.html"; } }, | |
| secondary: { label: "Contact", action: () => { window.location.href = "contact.html"; } }, | |
| updated: "—" | |
| }, | |
| access: { | |
| title: "Access", | |
| subtitle: "Curated entry", | |
| status: "ACTIVE", | |
| body: "Request access for controlled demos and evaluation workflows.", | |
| evidence: ["Application-based", "Segmented by intent", "Controlled demos"], | |
| primary: { label: "Request Access", action: () => { closeLabNav(true); openAccessModal(true); } }, | |
| secondary: { label: "Contact", action: () => { window.location.href = "contact.html"; } }, | |
| updated: "—" | |
| } | |
| }; | |
| const labDossierTitle = document.getElementById('lab-dossier-title'); | |
| const labDossierSubtitle = document.getElementById('lab-dossier-subtitle'); | |
| const labDossierStatus = document.getElementById('lab-dossier-status'); | |
| const labDossierBody = document.getElementById('lab-dossier-body'); | |
| const labDossierEvidence = document.getElementById('lab-dossier-evidence'); | |
| const labDossierPrimary = document.getElementById('lab-dossier-primary'); | |
| const labDossierSecondary = document.getElementById('lab-dossier-secondary'); | |
| const labDossierMeta = document.getElementById('lab-dossier-meta'); | |
| function setActiveLabNode(key) { | |
| document.querySelectorAll('.lab-node').forEach(btn => { | |
| const isActive = btn.getAttribute('data-dossier') === key; | |
| btn.classList.toggle('active', isActive); | |
| btn.setAttribute('aria-current', isActive ? 'true' : 'false'); | |
| }); | |
| } | |
| function renderLabDossier(key) { | |
| const d = LAB_DOSSIERS[key]; | |
| if (!d) return; | |
| setActiveLabNode(key); | |
| labDossierTitle.textContent = d.title; | |
| labDossierSubtitle.textContent = d.subtitle; | |
| labDossierStatus.textContent = d.status; | |
| labDossierBody.textContent = d.body; | |
| labDossierEvidence.innerHTML = ""; | |
| d.evidence.forEach(item => { | |
| const li = document.createElement('li'); | |
| li.textContent = item; | |
| labDossierEvidence.appendChild(li); | |
| }); | |
| labDossierPrimary.textContent = d.primary.label; | |
| labDossierPrimary.onclick = d.primary.action; | |
| labDossierSecondary.textContent = d.secondary.label; | |
| labDossierSecondary.onclick = d.secondary.action; | |
| labDossierMeta.innerHTML = `Last updated: <span class="text-gray-300">${d.updated}</span>`; | |
| } | |
| function openLabNav(setHashFlag = true) { | |
| toggleModal(labNav, true); | |
| if (setHashFlag) setHash('lab'); | |
| setTimeout(() => labNav.focus(), 0); | |
| // Ensure a stable default selection when opened | |
| const alreadyActive = document.querySelector('.lab-node.active'); | |
| if (!alreadyActive) renderLabDossier('programs'); | |
| } | |
| function closeLabNav(clearHashFlag = true) { | |
| toggleModal(labNav, false); | |
| if (clearHashFlag) clearHashIf('lab'); | |
| } | |
| labNavBtn.addEventListener('click', () => openLabNav(true)); | |
| labNavClose.addEventListener('click', () => closeLabNav(true)); | |
| labNav.addEventListener('click', (e) => { | |
| const shouldClose = e.target && e.target.getAttribute('data-lab-close') === 'true'; | |
| if (shouldClose) closeLabNav(true); | |
| }); | |
| document.querySelectorAll('.lab-node').forEach(btn => { | |
| btn.addEventListener('click', () => { | |
| const key = btn.getAttribute('data-dossier'); | |
| renderLabDossier(key); | |
| }); | |
| }); | |
| /* ------------------------------------------------------------- | |
| PROGRAM DOSSIERS | |
| + Hash deep-linking (#mcap, #chai, etc.) | |
| + Active-card state (aria-pressed) | |
| + popstate handling for back/forward reliability | |
| ------------------------------------------------------------- */ | |
| const DOSSIERS = { | |
| mcap: { | |
| title: "MCAP", | |
| subtitle: "Minimal Causal Abstraction Principle", | |
| status: "PROTOTYPE", | |
| body: | |
| "MCAP is a proposed principle for building minimal representations of systems that preserve intervention-relevant causal structure. The public posture remains conservative until results are reproduced and benchmarked.", | |
| evidence: [ | |
| "Defined abstraction objective (intervention-relevant compression)", | |
| "Planned: causal fidelity checks under interventions", | |
| "Planned: baseline comparisons (causal discovery + representation learning)" | |
| ], | |
| public: | |
| "Public-facing language should emphasize: a research principle, an evaluation harness, and transparent baselines. Avoid performance claims until replicated.", | |
| eval: | |
| "Evaluation focus: (1) identifiability assumptions, (2) interventional accuracy, (3) stability under distribution shift, (4) ablation against simpler baselines. Prefer preregistered protocols where possible.", | |
| primary: { label: "Request Access", action: () => openAccessModal(true) }, | |
| secondary: { label: "Open Console", action: () => { window.location.href = "chat.html"; } }, | |
| updated: "—" | |
| }, | |
| chai: { | |
| title: "CHAI", | |
| subtitle: "Forecasting & regime inference stack", | |
| status: "CONCEPT", | |
| body: | |
| "CHAI is positioned as a forecasting pipeline that prioritizes robustness: regime detection, calibration, and evidence-first evaluation. Markets are adversarial; the protocol is the product.", | |
| evidence: [ | |
| "Regime-aware framing (distribution shift explicit)", | |
| "Planned: walk-forward evaluation + leakage controls", | |
| "Planned: calibration and uncertainty reporting" | |
| ], | |
| public: | |
| "Public copy should emphasize methodology and evaluation (walk-forward, leakage prevention, calibration). Avoid any statement implying guaranteed returns or 'high accuracy.'", | |
| eval: | |
| "Evaluation focus: strict temporal splits, realistic transaction cost modeling, sensitivity to slippage assumptions, and robustness across assets/regimes. Report uncertainty and failure modes.", | |
| primary: { label: "Request Access", action: () => openAccessModal(true) }, | |
| secondary: { label: "Open Console", action: () => { window.location.href = "chat.html"; } }, | |
| updated: "—" | |
| }, | |
| quantum_lambda: { | |
| title: "Quantum Lambda", | |
| subtitle: "High-frequency decision systems", | |
| status: "CONCEPT", | |
| body: | |
| "Quantum Lambda is framed as a decision system under tight latency constraints. The core requirement is explicit assumptions: data latency, execution model, risk limits, and compliance boundaries.", | |
| evidence: [ | |
| "Microstructure-aware constraints (latency/slippage explicit)", | |
| "Planned: simulation harness with realistic fills", | |
| "Planned: risk controls as first-class objects" | |
| ], | |
| public: | |
| "Public copy should focus on systems engineering (constraints, risk, audit trails). Do not imply edge without verification. Emphasize that this is research, not a trading service.", | |
| eval: | |
| "Evaluation focus: execution realism, latency budgets, out-of-sample stability, and adversarial conditions. If assumptions are not auditable, results are not meaningful.", | |
| primary: { label: "Request Access", action: () => openAccessModal(true) }, | |
| secondary: { label: "Open Console", action: () => { window.location.href = "chat.html"; } }, | |
| updated: "—" | |
| }, | |
| ai_scientist: { | |
| title: "AI Scientist", | |
| subtitle: "Hypothesis → Experiment → Report", | |
| status: "PROTOTYPE", | |
| body: | |
| "The AI Scientist is the lab's internal instrument: it standardizes experiments, manages baselines, logs assumptions, and produces concise research notes with uncertainty and reproducibility hooks.", | |
| evidence: [ | |
| "Experiment templates (dataset → protocol → metrics)", | |
| "Baseline registry + ablation tracking", | |
| "Report generator (results + uncertainty + failure modes)" | |
| ], | |
| public: | |
| "Public positioning: an internal research engine for reproducibility and speed. Emphasize transparency, auditable reports, and discipline in evaluation.", | |
| eval: | |
| "Evaluation focus: reproducibility rates, time-to-result, and quality of decision-making under uncertainty. Output must be traceable from claim → experiment → evidence.", | |
| primary: { label: "Open Console", action: () => { window.location.href = "chat.html"; } }, | |
| secondary: { label: "Research", action: () => { window.location.href = "research.html"; } }, | |
| updated: "—" | |
| }, | |
| agentic_workforce: { | |
| title: "Agentic Workforce", | |
| subtitle: "Autonomous workflows under governance", | |
| status: "CONCEPT", | |
| body: | |
| "Agentic AI employees are introduced as controlled agents, not unbounded automation: scoped permissions, action logs, approval gates, and verification layers. Governance is the differentiator.", | |
| evidence: [ | |
| "Scope definitions (what agents can and cannot do)", | |
| "Audit trails (logs, transcripts, tool usage)", | |
| "Approval gates (human-in-the-loop where required)" | |
| ], | |
| public: | |
| "Public positioning: a governed agent platform for research ops and internal productivity. Avoid anthropomorphic claims; emphasize controls, accountability, and measurable outcomes.", | |
| eval: | |
| "Evaluation focus: error rates, containment failures avoided, auditability, and ROI in constrained workflows (data prep, experiments, reporting). Fail-closed behaviors are required.", | |
| primary: { label: "Request Access", action: () => openAccessModal(true) }, | |
| secondary: { label: "Contact", action: () => { window.location.href = "contact.html"; } }, | |
| updated: "—" | |
| } | |
| }; | |
| const dossierTitle = document.getElementById('dossier-title'); | |
| const dossierSubtitle = document.getElementById('dossier-subtitle'); | |
| const dossierStatus = document.getElementById('dossier-status'); | |
| const dossierBody = document.getElementById('dossier-body'); | |
| const dossierEvidence = document.getElementById('dossier-evidence'); | |
| const dossierPublic = document.getElementById('dossier-public'); | |
| const dossierEval = document.getElementById('dossier-eval'); | |
| const dossierPrimary = document.getElementById('dossier-primary'); | |
| const dossierSecondary = document.getElementById('dossier-secondary'); | |
| const dossierMeta = document.getElementById('dossier-meta'); | |
| const programCards = Array.from(document.querySelectorAll('.program-card')); | |
| function setActiveCard(key) { | |
| programCards.forEach(btn => { | |
| const isMatch = btn.getAttribute('data-dossier') === key; | |
| btn.classList.toggle('active', isMatch); | |
| btn.setAttribute('aria-pressed', String(isMatch)); | |
| }); | |
| } | |
| function updateHash(key, replace = false) { | |
| const nextHash = `#${key}`; | |
| if (replace) { | |
| history.replaceState(null, '', nextHash); | |
| } else { | |
| history.pushState(null, '', nextHash); | |
| } | |
| } | |
| function normalizeHashToKey() { | |
| const raw = (window.location.hash || '').replace('#', '').trim().toLowerCase(); | |
| return raw && DOSSIERS[raw] ? raw : null; | |
| } | |
| function renderDossier(key, opts = { setHash: true, replaceHash: false, setActive: true }) { | |
| const d = DOSSIERS[key]; | |
| if (!d) return; | |
| dossierTitle.textContent = d.title; | |
| dossierSubtitle.textContent = d.subtitle; | |
| dossierStatus.textContent = d.status; | |
| dossierBody.textContent = d.body; | |
| dossierEvidence.innerHTML = ""; | |
| d.evidence.forEach(item => { | |
| const li = document.createElement('li'); | |
| li.textContent = item; | |
| dossierEvidence.appendChild(li); | |
| }); | |
| dossierPublic.textContent = d.public; | |
| dossierEval.textContent = d.eval; | |
| dossierPrimary.textContent = d.primary.label; | |
| dossierPrimary.onclick = d.primary.action; | |
| dossierSecondary.textContent = d.secondary.label; | |
| dossierSecondary.onclick = d.secondary.action; | |
| dossierMeta.innerHTML = `Last updated: <span class="text-gray-300">${d.updated}</span>`; | |
| if (opts.setActive) setActiveCard(key); | |
| if (opts.setHash) updateHash(key, opts.replaceHash); | |
| if (!opts.replaceHash) { | |
| const isSmall = window.matchMedia && window.matchMedia('(max-width: 1023px)').matches; | |
| if (isSmall) dossierTitle.scrollIntoView({ behavior: 'smooth', block: 'start' }); | |
| } | |
| } | |
| programCards.forEach(btn => { | |
| btn.addEventListener('click', () => { | |
| const key = btn.getAttribute('data-dossier'); | |
| if (!key) return; | |
| renderDossier(key, { setHash: true, replaceHash: false, setActive: true }); | |
| }); | |
| }); | |
| (function initFromHashOrDefault() { | |
| const keyFromHash = normalizeHashToKey(); | |
| const key = keyFromHash || 'mcap'; | |
| renderDossier(key, { setHash: true, replaceHash: true, setActive: true }); | |
| })(); | |
| window.addEventListener('hashchange', () => { | |
| const keyFromHash = normalizeHashToKey(); | |
| if (keyFromHash) { | |
| renderDossier(keyFromHash, { setHash: false, replaceHash: false, setActive: true }); | |
| } | |
| }); | |
| window.addEventListener('popstate', () => { | |
| const keyFromHash = normalizeHashToKey() || 'mcap'; | |
| renderDossier(keyFromHash, { setHash: false, replaceHash: false, setActive: true }); | |
| }); | |
| /* ------------------------------------------------------------- | |
| HASH ROUTER: handle modal hashes too | |
| ------------------------------------------------------------- */ | |
| function applyHashState() { | |
| const key = currentHashKey(); | |
| if (CONFIG.MODAL_HASHES.has(key)) { | |
| if (key === 'lab') openLabNav(false); | |
| if (key === 'access') openAccessModal(false); | |
| } else if (CONFIG.DOSSIER_HASHES.has(key)) { | |
| // Already handled by hashchange/popstate above | |
| } | |
| } | |
| window.addEventListener('hashchange', applyHashState); | |
| applyHashState(); // Initial load | |
| /* ------------------------------------------------------------- | |
| GLOBAL ESC BEHAVIOR | |
| ------------------------------------------------------------- */ | |
| document.addEventListener('keydown', (e) => { | |
| if (e.key === 'Escape') { | |
| if (labNav && !labNav.classList.contains('modal-hidden')) closeLabNav(true); | |
| if (accessModal && !accessModal.classList.contains('modal-hidden')) closeAccessModal(true); | |
| } | |
| }); | |
| // Initial lab dossier render | |
| renderLabDossier('programs'); | |
| </script> | |
| </body> | |
| </html> |