tractatus/public/integrations/agent-lightning.html
TheFlow 4b4be5cb0b fix: correct GitHub link and replace broken collaboration button
Fixed issues on Agent Lightning integration page:
- Changed GitHub link from non-existent tractatus-ai/agent-lightning-integration
  to existing tractatus-framework/tractatus-framework repo
- Replaced unresponsive "Contact for Collaboration" button with email display
  (research@agenticgovernance.digital)
- Removed broken click handler script that ran before feedback component loaded

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

Co-Authored-By: Claude <noreply@anthropic.com>
2025-11-03 16:16:03 +13:00

334 lines
22 KiB
HTML
Raw Blame History

This file contains invisible Unicode characters

This file contains invisible Unicode characters that are indistinguishable to humans but may be processed differently by a computer. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!DOCTYPE html>
<html lang="en" data-page="agent-lightning-integration">
<head>
<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. 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.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 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 shadow-lg"></div>
<h1 class="text-4xl md:text-5xl font-bold text-gray-900 mb-4" data-i18n="hero.title">Agent Lightning Integration</h1>
<p class="text-xl text-gray-600 max-w-3xl mx-auto leading-relaxed" data-i18n="hero.subtitle">Governance + Performance: Can safety boundaries persist through reinforcement learning optimization?</p>
<p class="text-sm text-gray-500 mt-4"><strong data-i18n="hero.status">Status:</strong> <span data-i18n="hero.status_value">Preliminary findings (small-scale)</span> | <strong data-i18n="hero.integration_date">Integration Date:</strong> <span data-i18n="hero.integration_date_value">October 2025</span></p>
</div>
<!-- What is Agent Lightning? -->
<section class="mb-16 bg-white rounded-xl p-8 shadow-lg">
<h2 class="text-3xl font-bold text-gray-900 mb-6" data-i18n="what_is.heading">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" data-i18n="what_is.traditional_heading">Traditional AI Agents</h3>
<ul class="space-y-2 text-gray-700">
<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-green-50 border-2 border-green-300 rounded-lg p-6">
<h3 class="text-xl font-bold text-gray-900 mb-4" data-i18n="what_is.al_heading">Agent Lightning</h3>
<ul class="space-y-2 text-gray-700">
<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" data-i18n="architecture.heading">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" data-i18n="results.heading">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" data-i18n="gaps.heading">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>
<!-- 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" data-i18n="demo.heading">🎯 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-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" data-i18n="community.heading">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">📦 Tractatus Framework</h3>
<p class="text-gray-700 mb-4">Governance architecture and framework components. Apache 2.0 licensed on GitHub.</p>
<a href="https://github.com/tractatus-framework/tractatus-framework" target="_blank" rel="noopener noreferrer" class="inline-block bg-purple-600 text-white font-bold px-6 py-3 rounded-lg hover:bg-purple-700 transition shadow-md">View on GitHub (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 text-white" data-i18n="cta.heading">Collaborate on Open Research Questions</h2>
<p class="text-white 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-white">
<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">
<div class="bg-white/20 backdrop-blur border-2 border-white/40 rounded-lg px-6 py-4"><p class="text-white text-sm mb-1 font-semibold">Research Collaboration Inquiries:</p><a href="mailto:research@agenticgovernance.digital" class="text-white text-lg font-bold hover:text-blue-200 transition">research@agenticgovernance.digital</a></div>
<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>
<div id="footer-placeholder"></div>
<!-- Internationalization -->
<script src="/js/i18n-simple.js?v=0.1.2.1762133909969"></script>
<script src="/js/components/language-selector.js?v=0.1.2.1762133909969"></script>
<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>
</body>
</html>