john/tractatus
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

fix: render feedback button immediately without waiting for CSRF

Browse source 
- Changed init() to render FAB/modal before fetching CSRF token
- CSRF fetch now runs in parallel (non-blocking)
- Prevents button from never appearing if CSRF fetch fails/is slow
- Fixed cache version in agent-lightning.html to match deployment

Fixes issue where feedback button was invisible on all pages

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
TheFlow 2025-11-03 14:52:37 +13:00
parent 63dc3b356d
commit 531284d75a
2 changed files with 311 additions and 36 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

339
public/integrations/agent-lightning.html
View file

@ -4,60 +4,335 @@
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Agent Lightning Integration | Tractatus AI Safety Framework</title>
<meta name="description" content="Integrating Microsoft's Agent Lightning reinforcement learning with Tractatus governance framework. Two-layer architecture maintaining safety boundaries through optimization cycles.">
<meta name="description" content="Integrating Microsoft's Agent Lightning reinforcement learning with Tractatus governance framework. Demo 2 results: 5% cost for 100% governance coverage.">
<link rel="icon" type="image/svg+xml" href="/favicon-new.svg">
<link rel="stylesheet" href="/css/fonts.css?v=0.2.0">
<link rel="stylesheet" href="/css/tailwind.css?v=0.2.0">
<link rel="stylesheet" href="/css/tractatus-theme.min.css?v=0.2.0">
<link rel="stylesheet" href="/css/fonts.css?v=0.1.2.1762133909969">
<link rel="stylesheet" href="/css/tailwind.css?v=0.1.2.1762133909969">
<link rel="stylesheet" href="/css/tractatus-theme.min.css?v=0.1.2.1762133909969">
<style>
.skip-link { position: absolute; left: -9999px; }
.skip-link:focus { left: 0; z-index: 100; background: white; padding: 1rem; }
a:focus, button:focus { outline: 2px solid #d97706; outline-offset: 2px; }
</style>
</head>
<body class="bg-gray-50 text-gray-900">
<a href="#main-content" class="skip-link">Skip to main content</a>
<div id="navbar-placeholder"></div>
<main class="max-w-7xl mx-auto px-4 py-12">
<main id="main-content" class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
<!-- Hero Section -->
<div class="text-center mb-16">
<div class="inline-flex items-center justify-center w-20 h-20 rounded-full bg-gradient-to-br from-purple-600 to-indigo-600 text-white text-4xl mb-6">⚡</div>
<div class="inline-flex items-center justify-center w-20 h-20 rounded-full bg-gradient-to-br from-purple-600 to-indigo-600 text-white text-4xl mb-6 shadow-lg">⚡</div>
<h1 class="text-4xl md:text-5xl font-bold text-gray-900 mb-4">Agent Lightning Integration</h1>
<p class="text-xl text-gray-600 max-w-3xl mx-auto">Governance + Performance: Can safety boundaries persist through RL optimization?</p>
<p class="text-xl text-gray-600 max-w-3xl mx-auto leading-relaxed">Governance + Performance: Can safety boundaries persist through reinforcement learning optimization?</p>
<p class="text-sm text-gray-500 mt-4"><strong>Status:</strong> Preliminary findings (small-scale) | <strong>Integration Date:</strong> October 2025</p>
</div>
<!-- What is Agent Lightning? -->
<section class="mb-16 bg-white rounded-xl p-8 shadow-lg">
<h2 class="text-3xl font-bold mb-6">Two-Layer Architecture</h2>
<div class="grid md:grid-cols-2 gap-8">
<div class="bg-purple-50 border-2 border-purple-300 rounded-lg p-6">
<h3 class="text-xl font-bold mb-4">1. Governance Layer (Tractatus)</h3>
<h2 class="text-3xl font-bold text-gray-900 mb-6">What is Agent Lightning?</h2>
<p class="text-gray-700 text-lg mb-6 leading-relaxed">
<strong>Agent Lightning</strong> is Microsoft's open-source framework for using <strong>reinforcement learning (RL)</strong> to optimize AI agent performance. Instead of static prompts, agents learn and improve through continuous training on real feedback.
</p>
<div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">
<div class="bg-blue-50 border-2 border-blue-300 rounded-lg p-6">
<h3 class="text-xl font-bold text-gray-900 mb-4">Traditional AI Agents</h3>
<ul class="space-y-2 text-gray-700">
<li>✓ Enforces values decisions</li>
<li>✓ Blocks constraint violations</li>
<li>✓ Independent of optimization</li>
<li>❌ Fixed prompts/instructions</li>
<li>❌ No learning from mistakes</li>
<li>❌ Manual tuning required</li>
<li>❌ Performance plateaus quickly</li>
</ul>
</div>
<div class="bg-indigo-50 border-2 border-indigo-300 rounded-lg p-6">
<h3 class="text-xl font-bold mb-4">2. Performance Layer (Agent Lightning)</h3>
<div class="bg-green-50 border-2 border-green-300 rounded-lg p-6">
<h3 class="text-xl font-bold text-gray-900 mb-4">Agent Lightning</h3>
<ul class="space-y-2 text-gray-700">
<li>⚡ RL-based optimization</li>
<li>⚡ Learns from feedback</li>
<li>⚡ Operates within constraints</li>
<li>✅ Learns from feedback continuously</li>
<li>✅ Improves through RL optimization</li>
<li>✅ Self-tunes strategy automatically</li>
<li>✅ Performance improves over time</li>
</ul>
</div>
</div>
<div class="bg-yellow-50 border-l-4 border-yellow-400 p-6 rounded-r-lg">
<p class="text-gray-800 text-lg">
<strong>The Problem:</strong> When agents are learning autonomously, how do you maintain governance boundaries? Traditional policies fail because agents can optimize around them.
</p>
</div>
</section>
<!-- Two-Layer Architecture -->
<section class="mb-16 bg-gradient-to-br from-purple-50 to-indigo-50 rounded-xl p-8">
<h2 class="text-3xl font-bold text-gray-900 mb-6">Tractatus Solution: Two-Layer Architecture</h2>
<p class="text-gray-700 text-lg mb-8 leading-relaxed">
We separate governance from optimization by running them as <strong>independent architectural layers</strong>. Agent Lightning optimizes performance <em>within</em> governance constraints—not around them.
</p>
<div class="grid grid-cols-1 md:grid-cols-2 gap-8 mb-8">
<div class="bg-white border-2 border-purple-400 rounded-lg p-6 shadow-md">
<div class="flex items-center mb-4">
<div class="w-10 h-10 rounded-full bg-purple-600 text-white flex items-center justify-center font-bold mr-3">1</div>
<h3 class="text-xl font-bold text-gray-900">Governance Layer (Tractatus)</h3>
</div>
<ul class="space-y-2 text-gray-700">
<li class="flex items-start"><span class="text-purple-600 mr-2 font-bold">→</span><span>Validates every proposed action</span></li>
<li class="flex items-start"><span class="text-purple-600 mr-2 font-bold">→</span><span>Blocks constraint violations</span></li>
<li class="flex items-start"><span class="text-purple-600 mr-2 font-bold">→</span><span>Enforces values boundaries</span></li>
<li class="flex items-start"><span class="text-purple-600 mr-2 font-bold">→</span><span>Independent of optimization</span></li>
<li class="flex items-start"><span class="text-purple-600 mr-2 font-bold">→</span><span>Architecturally enforced</span></li>
</ul>
</div>
<div class="bg-white border-2 border-indigo-400 rounded-lg p-6 shadow-md">
<div class="flex items-center mb-4">
<div class="w-10 h-10 rounded-full bg-indigo-600 text-white flex items-center justify-center font-bold mr-3">2</div>
<h3 class="text-xl font-bold text-gray-900">Performance Layer (Agent Lightning)</h3>
</div>
<ul class="space-y-2 text-gray-700">
<li class="flex items-start"><span class="text-indigo-600 mr-2 font-bold">→</span><span>RL-based optimization</span></li>
<li class="flex items-start"><span class="text-indigo-600 mr-2 font-bold">→</span><span>Learns from feedback</span></li>
<li class="flex items-start"><span class="text-indigo-600 mr-2 font-bold">→</span><span>Improves task performance</span></li>
<li class="flex items-start"><span class="text-indigo-600 mr-2 font-bold">→</span><span>Operates within constraints</span></li>
<li class="flex items-start"><span class="text-indigo-600 mr-2 font-bold">→</span><span>Continuous training</span></li>
</ul>
</div>
</div>
<div class="bg-blue-600 text-white p-6 rounded-lg">
<p class="text-lg font-semibold mb-2">🔑 Key Design Principle</p>
<p class="text-blue-100">
Governance checks run <strong>before</strong> AL optimization and <strong>continuously validate</strong> during training loops. Architectural separation prevents optimization from degrading safety boundaries.
</p>
</div>
</section>
<!-- Demo 2 Results -->
<section class="mb-16 bg-white rounded-xl p-8 shadow-lg">
<h2 class="text-3xl font-bold text-gray-900 mb-6">Demo 2: Preliminary Results</h2>
<div class="bg-yellow-50 border-l-4 border-yellow-400 p-4 mb-6">
<p class="text-sm text-gray-800">
<strong>⚠️ Validation Status:</strong> These results are from <strong>1 agent, 5 training rounds, simulated environment</strong>. NOT validated at scale. Scalability testing required before drawing conclusions about production viability.
</p>
</div>
<div class="bg-gray-50 rounded-lg p-6 mb-6 overflow-x-auto">
<table class="min-w-full text-sm">
<thead>
<tr class="border-b-2 border-gray-300">
<th class="text-left py-3 px-4 font-bold text-gray-900">Metric</th>
<th class="text-right py-3 px-4 font-bold text-gray-900">Ungoverned</th>
<th class="text-right py-3 px-4 font-bold text-gray-900">Governed</th>
<th class="text-right py-3 px-4 font-bold text-gray-900">Difference</th>
</tr>
</thead>
<tbody class="bg-white">
<tr class="border-b border-gray-200">
<td class="py-3 px-4 font-medium">Performance (engagement)</td>
<td class="text-right py-3 px-4">94%</td>
<td class="text-right py-3 px-4">89%</td>
<td class="text-right py-3 px-4 text-orange-600 font-bold">-5%</td>
</tr>
<tr class="border-b border-gray-200">
<td class="py-3 px-4 font-medium">Governance coverage</td>
<td class="text-right py-3 px-4">0%</td>
<td class="text-right py-3 px-4">100%</td>
<td class="text-right py-3 px-4 text-green-600 font-bold">+100%</td>
</tr>
<tr class="border-b border-gray-200">
<td class="py-3 px-4 font-medium">Constraint violations</td>
<td class="text-right py-3 px-4">5</td>
<td class="text-right py-3 px-4">0</td>
<td class="text-right py-3 px-4 text-green-600 font-bold">-5 (all blocked)</td>
</tr>
<tr class="border-b border-gray-200">
<td class="py-3 px-4 font-medium">Strategy</td>
<td class="text-right py-3 px-4 text-gray-600">Clickbait</td>
<td class="text-right py-3 px-4 text-gray-600">Informative</td>
<td class="text-right py-3 px-4 text-blue-600 font-bold">Values-aligned</td>
</tr>
<tr>
<td class="py-3 px-4 font-medium">Training stability</td>
<td class="text-right py-3 px-4 text-gray-600">Variable</td>
<td class="text-right py-3 px-4 text-gray-600">Consistent</td>
<td class="text-right py-3 px-4 text-blue-600 font-bold">More predictable</td>
</tr>
</tbody>
</table>
</div>
<div class="grid grid-cols-1 md:grid-cols-3 gap-4">
<div class="bg-orange-50 border-2 border-orange-300 rounded-lg p-4">
<div class="text-3xl font-bold text-orange-600 mb-2">-5%</div>
<div class="text-sm text-gray-700">Performance cost for governance</div>
</div>
<div class="bg-green-50 border-2 border-green-300 rounded-lg p-4">
<div class="text-3xl font-bold text-green-600 mb-2">100%</div>
<div class="text-sm text-gray-700">Governance coverage maintained</div>
</div>
<div class="bg-blue-50 border-2 border-blue-300 rounded-lg p-4">
<div class="text-3xl font-bold text-blue-600 mb-2">0</div>
<div class="text-sm text-gray-700">Constraint violations (all blocked)</div>
</div>
</div>
<div class="mt-8 bg-blue-50 border-l-4 border-blue-600 p-6 rounded-r-lg">
<p class="text-gray-800 text-lg font-semibold mb-2">What This Means</p>
<p class="text-gray-700">
At small scale (1 agent, 5 rounds), architectural governance appears compatible with RL optimization. The 5% performance cost bought 100% constraint adherence and values alignment. <strong>The critical question: does this hold at scale?</strong>
</p>
</div>
</section>
<!-- Five Critical Research Gaps -->
<section class="mb-16 bg-gradient-to-br from-gray-50 to-gray-100 rounded-xl p-8">
<h2 class="text-3xl font-bold text-gray-900 mb-6">Five Critical Research Gaps</h2>
<p class="text-gray-700 mb-6 text-lg">These are the open questions we're actively investigating. If you're interested in collaborating, we'd love to hear from you.</p>
<div class="space-y-6">
<div class="bg-white border-l-4 border-purple-500 p-6 rounded-r-lg shadow-md">
<h3 class="text-xl font-bold text-gray-900 mb-3">1. Scalability of Governance Overhead</h3>
<p class="text-gray-700 mb-2"><strong>Question:</strong> Does the ~5% performance cost remain constant as we scale from 1 agent → 10 agents → 1000 agents?</p>
<p class="text-gray-600 text-sm mb-2"><strong>Current Data:</strong> 5% cost observed at 1 agent, 5 rounds</p>
<p class="text-gray-600 text-sm mb-2"><strong>Why it matters:</strong> If overhead scales linearly, governance becomes prohibitively expensive at scale. If it's constant, governance is practically viable for production systems.</p>
<p class="text-blue-600 text-sm font-semibold">Research Need: Test with 10 → 100 → 1000 agents at production scale</p>
</div>
<div class="bg-white border-l-4 border-indigo-500 p-6 rounded-r-lg shadow-md">
<h3 class="text-xl font-bold text-gray-900 mb-3">2. Long-term Boundary Persistence</h3>
<p class="text-gray-700 mb-2"><strong>Question:</strong> Do governance constraints remain effective through hundreds/thousands of RL training rounds?</p>
<p class="text-gray-600 text-sm mb-2"><strong>Current Data:</strong> 100% constraint adherence across 5 rounds</p>
<p class="text-gray-600 text-sm mb-2"><strong>Why it matters:</strong> Instruction fade is a known problem. If boundaries degrade over time, governance fails silently—potentially catastrophically in production.</p>
<p class="text-blue-600 text-sm font-semibold">Research Need: Long-term studies (1000+ rounds) tracking constraint drift</p>
</div>
<div class="bg-white border-l-4 border-blue-500 p-6 rounded-r-lg shadow-md">
<h3 class="text-xl font-bold text-gray-900 mb-3">3. Adversarial Resistance</h3>
<p class="text-gray-700 mb-2"><strong>Question:</strong> Can agents learn to optimize around governance constraints?</p>
<p class="text-gray-600 text-sm mb-2"><strong>Current Data:</strong> No adversarial testing performed</p>
<p class="text-gray-600 text-sm mb-2"><strong>Why it matters:</strong> If agents can learn to circumvent boundaries through clever optimization strategies, architectural governance is illusory. This is a critical failure mode.</p>
<p class="text-blue-600 text-sm font-semibold">Research Need: Stress testing with agents explicitly incentivized to bypass governance</p>
</div>
<div class="bg-white border-l-4 border-cyan-500 p-6 rounded-r-lg shadow-md">
<h3 class="text-xl font-bold text-gray-900 mb-3">4. Performance Gap Closure</h3>
<p class="text-gray-700 mb-2"><strong>Question:</strong> Does the 5% performance gap close with more training, or is it a persistent trade-off?</p>
<p class="text-gray-600 text-sm mb-2"><strong>Current Data:</strong> Gap observed at round 5, no data beyond that point</p>
<p class="text-gray-600 text-sm mb-2"><strong>Why it matters:</strong> If the gap persists, we need to quantify the cost-benefit clearly. If it closes, governance may be "free" long-term—dramatically changing adoption calculations.</p>
<p class="text-blue-600 text-sm font-semibold">Research Need: Extended training (100+ rounds) to see if governed agents converge to ungoverned performance</p>
</div>
<div class="bg-white border-l-4 border-teal-500 p-6 rounded-r-lg shadow-md">
<h3 class="text-xl font-bold text-gray-900 mb-3">5. Multi-Agent Coordination Under Governance</h3>
<p class="text-gray-700 mb-2"><strong>Question:</strong> How does architectural governance affect emergent coordination in multi-agent systems?</p>
<p class="text-gray-600 text-sm mb-2"><strong>Current Data:</strong> Single-agent testing only</p>
<p class="text-gray-600 text-sm mb-2"><strong>Why it matters:</strong> Real-world agentic systems are multi-agent (customer service, logistics, research teams). Governance that works for one agent may fail when agents must coordinate. Emergent behaviors are unpredictable.</p>
<p class="text-blue-600 text-sm font-semibold">Research Need: Test collaborative and competitive multi-agent environments with architectural governance</p>
</div>
</div>
</section>
<section class="mb-16 bg-gradient-to-br from-purple-50 to-indigo-50 rounded-xl p-8">
<h2 class="text-3xl font-bold mb-6">Join the Community</h2>
<div class="grid md:grid-cols-2 gap-6">
<div class="bg-gradient-to-br from-purple-600 to-indigo-600 text-white rounded-xl p-8">
<h3 class="text-2xl font-bold mb-2">Tractatus Discord</h3>
<p class="text-purple-100 text-sm mb-4">Governance-focused discussions</p>
<a href="https://discord.gg/Dkke2ADu4E" target="_blank" class="inline-block bg-white text-purple-700 font-bold px-6 py-3 rounded-lg">Join Tractatus →</a>
<!-- Live Demonstration -->
<section class="mb-16 bg-gradient-to-br from-blue-600 to-purple-600 text-white rounded-xl p-8 shadow-xl">
<h2 class="text-3xl font-bold mb-6">🎯 Live Demonstration: This Page IS the Integration</h2>
<p class="text-lg text-blue-100 mb-6 leading-relaxed">The feedback button on this page (bottom right) demonstrates the Tractatus + Agent Lightning integration in production. When you submit feedback, it goes through:</p>
<div class="grid grid-cols-1 md:grid-cols-3 gap-4 mb-6">
<div class="bg-white/10 backdrop-blur rounded-lg p-4">
<div class="text-2xl font-bold mb-2">1️⃣</div>
<h3 class="font-bold mb-2">Governance Check</h3>
<p class="text-sm text-blue-100">Tractatus validates: PII detection, sentiment boundaries, compliance requirements</p>
</div>
<div class="bg-gradient-to-br from-blue-600 to-cyan-600 text-white rounded-xl p-8">
<h3 class="text-2xl font-bold mb-2">Agent Lightning Discord</h3>
<p class="text-blue-100 text-sm mb-4">Technical implementation help</p>
<a href="https://discord.gg/2QH69Rtd" target="_blank" class="inline-block bg-white text-blue-700 font-bold px-6 py-3 rounded-lg">Join Agent Lightning →</a>
<div class="bg-white/10 backdrop-blur rounded-lg p-4">
<div class="text-2xl font-bold mb-2">2️⃣</div>
<h3 class="font-bold mb-2">AL Optimization</h3>
<p class="text-sm text-blue-100">Agent Lightning learns patterns: what feedback is most useful, how to improve responses</p>
</div>
<div class="bg-white/10 backdrop-blur rounded-lg p-4">
<div class="text-2xl font-bold mb-2">3️⃣</div>
<h3 class="font-bold mb-2">Continuous Validation</h3>
<p class="text-sm text-blue-100">Every action re-validated. If governance detects drift, action blocked automatically</p>
</div>
</div>
<div class="bg-white/20 backdrop-blur border-2 border-white/40 rounded-lg p-6">
<p class="text-lg font-semibold mb-2">🔬 Meta-Research Opportunity</p>
<p class="text-blue-100">This isn't just a demo—it's a live research deployment. Your feedback helps us understand governance overhead at scale. Every submission is logged (anonymously) for analysis.</p>
</div>
</section>
<!-- Community & Download -->
<section class="mb-16 bg-gradient-to-br from-purple-50 to-blue-50 rounded-xl p-8">
<h2 class="text-3xl font-bold text-gray-900 mb-6">Join the Community & Get the Code</h2>
<div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-8">
<div class="bg-gradient-to-br from-purple-600 to-indigo-600 text-white rounded-xl p-8 shadow-lg">
<div class="flex items-center mb-4">
<div class="text-3xl mr-3">💬</div>
<div>
<h3 class="text-2xl font-bold">Tractatus Discord</h3>
<p class="text-purple-100 text-sm">Governance-focused discussions</p>
</div>
</div>
<p class="text-purple-100 mb-4 text-sm">Architectural constraints, research gaps, compliance, human agency preservation, multi-stakeholder deliberation.</p>
<a href="https://discord.gg/Dkke2ADu4E" target="_blank" rel="noopener noreferrer" class="inline-block bg-white text-purple-700 font-bold px-6 py-3 rounded-lg hover:bg-purple-50 transition shadow-md">Join Tractatus Server →</a>
</div>
<div class="bg-gradient-to-br from-blue-600 to-cyan-600 text-white rounded-xl p-8 shadow-lg">
<div class="flex items-center mb-4">
<div class="text-3xl mr-3">⚡</div>
<div>
<h3 class="text-2xl font-bold">Agent Lightning Discord</h3>
<p class="text-blue-100 text-sm">Technical implementation help</p>
</div>
</div>
<p class="text-blue-100 mb-4 text-sm">RL optimization, integration support, performance tuning, technical implementation questions.</p>
<a href="https://discord.gg/2QH69Rtd" target="_blank" rel="noopener noreferrer" class="inline-block bg-white text-blue-700 font-bold px-6 py-3 rounded-lg hover:bg-blue-50 transition shadow-md">Join Agent Lightning Server →</a>
</div>
</div>
<div class="bg-white rounded-lg p-6 border-2 border-purple-300 shadow-md">
<h3 class="text-xl font-bold text-gray-900 mb-4">📦 Download Installation Pack</h3>
<p class="text-gray-700 mb-4">Complete integration including 3 demos (baseline, governed, production), Python governance modules, and Agent Lightning wrapper code. Apache 2.0 licensed.</p>
<a href="/downloads/tractatus-agent-lightning-v1.0.tar.gz" class="inline-block bg-purple-600 text-white font-bold px-6 py-3 rounded-lg hover:bg-purple-700 transition shadow-md">Download Install Pack (Apache 2.0) →</a>
</div>
</section>
<!-- Call to Action -->
<section class="mb-16 bg-gradient-to-br from-gray-800 to-gray-900 text-white rounded-xl p-8 shadow-xl">
<h2 class="text-3xl font-bold mb-4">Collaborate on Open Research Questions</h2>
<p class="text-gray-300 mb-6 text-lg leading-relaxed">We're seeking researchers, implementers, and organizations interested in scalability testing, adversarial resistance studies, and multi-agent governance experiments.</p>
<ul class="grid grid-cols-1 md:grid-cols-2 gap-3 mb-6 text-gray-300">
<li class="flex items-center">✓ Integration code and governance modules</li>
<li class="flex items-center">✓ Technical documentation</li>
<li class="flex items-center">✓ Research collaboration framework</li>
<li class="flex items-center">✓ Audit log access (anonymized)</li>
</ul>
<div class="flex flex-wrap gap-4">
<button id="collaboration-inquiry-button" class="bg-purple-600 text-white font-bold px-8 py-4 rounded-lg hover:bg-purple-700 transition shadow-lg">Contact for Collaboration →</button>
<a href="/researcher.html" class="bg-white text-gray-900 font-bold px-8 py-4 rounded-lg hover:bg-gray-100 transition shadow-lg">View Research Context →</a>
</div>
</section>
</main>
<script src="/js/components/navbar.js?v=0.2.0"></script>
<script src="/js/components/feedback.js?v=0.2.0"></script>
<div id="footer-placeholder"></div>
<script src="/js/components/navbar.js?v=0.1.2.1762133909969"></script>
<script src="/js/components/footer.js?v=0.1.2.1762133909969"></script>
<script src="/js/components/feedback.js?v=0.1.2.1762133909969"></script>
<script>
const button = document.getElementById('collaboration-inquiry-button');
if (button) {
button.addEventListener('click', function() {
if (window.TractarusFeedback && window.TractarusFeedback.openModal) {
window.TractarusFeedback.openModal('research-collaboration');
}
});
}
</script>
</body>
</html>

8
public/js/components/feedback.js
View file

@ -21,16 +21,16 @@ class TractausFeedback {
}
async init() {
// Get CSRF token
await this.fetchCsrfToken();
// Render components
// Render components IMMEDIATELY (don't wait for CSRF)
this.renderFAB();
this.renderModal();
// Attach event listeners
this.attachEventListeners();
// Get CSRF token in parallel (non-blocking)
this.fetchCsrfToken();
// Listen for window resize
window.addEventListener('resize', () => {
this.isMobile = window.matchMedia('(max-width: 768px)').matches;