john/tractatus
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions
tractatus/public/architecture.html
TheFlow 41fd57f69a fix(layout): add overflow-auto to demo containers for scrollable content 
SUMMARY:
Added overflow-auto to both demo containers to fix cut-off content issue
where 'Simulate Pressure Increase' button was hidden above visible area.

ISSUE:
User reported button exists in DOM but is not visible on screen. The top
of the modal content was cut off, showing only the bottom portion (Reset
button visible, but Simulate button hidden above).

FIX:
Added overflow-auto to both containers:
- Context Pressure Monitor container
- Framework Activity Timeline container

This allows users to scroll within the container if content exceeds the
min-height of 600px, ensuring all buttons and content are accessible.

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

Co-Authored-By: Claude <noreply@anthropic.com>
2025-10-20 08:37:30 +13:00

559 lines
31 KiB
HTML
Raw Blame History

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>System Architecture | Tractatus AI Safety Framework</title>
<meta name="description" content="Tractatus runtime-agnostic governance architecture: exploring structural boundaries for AI safety that may be more resistant to adversarial manipulation than behavioral training alone.">
<link rel="icon" type="image/svg+xml" href="/favicon-new.svg">
<link rel="stylesheet" href="/css/fonts.css">
<link rel="stylesheet" href="/css/tailwind.css?v=0.1.0.1760254958072">
<link rel="stylesheet" href="/css/tractatus-theme.min.css?v=1760816800">
<style>
.skip-link { position: absolute; left: -9999px; }
.skip-link:focus { left: 0; z-index: 100; background: white; padding: 1rem; }
/* Accessibility: Focus indicators (WCAG 2.4.7) */
a:focus, button:focus, input:focus, select:focus, textarea:focus {
outline: 3px solid #3b82f6;
outline-offset: 2px;
}
a:focus:not(:focus-visible) { outline: none; }
a:focus-visible { outline: 3px solid #3b82f6; outline-offset: 2px; }
.gradient-text { background: linear-gradient(120deg, #3b82f6 0%, #8b5cf6 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
</style>
</head>
<body class="bg-gray-50">
<!-- Skip Link for Keyboard Navigation -->
<a href="#main-content" class="skip-link">Skip to main content</a>
<!-- Navigation (injected by navbar.js) -->
<script src="/js/components/navbar.js?v=0.1.0.1760254958072"></script>
<!-- Breadcrumb Navigation -->
<nav class="bg-gray-50 border-b border-gray-200 py-3" aria-label="Breadcrumb">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<ol class="flex items-center space-x-2 text-sm">
<li><a href="/" class="hover:underline transition-colors" class="text-tractatus-link">Home</a></li>
<li class="text-gray-400">/</li>
<li class="text-gray-900 font-medium" aria-current="page">Architecture</li>
</ol>
</div>
</nav>
<!-- Hero Section -->
<header role="banner">
<section class="bg-gradient-to-br from-blue-600 via-blue-700 to-purple-700 text-white py-20">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="text-center">
<div class="inline-block bg-amber-700 text-white px-4 py-2 rounded-lg font-semibold mb-6 text-sm">
🔬 EARLY-STAGE RESEARCH • PROMISING APPROACH
</div>
<h1 class="text-5xl md:text-6xl font-bold mb-6">
Exploring Structural AI Safety
</h1>
<p class="text-xl md:text-2xl text-blue-100 mb-8 max-w-4xl mx-auto">
Tractatus explores <strong>external governance</strong>—architectural boundaries operating outside the AI runtime that may be more resistant to adversarial manipulation than behavioral training alone.
</p>
<div class="bg-blue-800/50 backdrop-blur border border-blue-400/30 rounded-lg p-6 max-w-3xl mx-auto mb-8">
<p class="text-lg text-blue-50">
<strong class="text-white">The Challenge:</strong> Behavioral training (Constitutional AI, RLHF) shows promise but can degrade under adversarial prompting, context pressure, or distribution shift.
</p>
<p class="text-lg text-blue-50 mt-3">
<strong class="text-white">Our Approach:</strong> External architectural enforcement that operates independently of the AI's internal reasoning—making it structurally more difficult (though not impossible) to bypass through prompting.
</p>
</div>
<div class="flex flex-col sm:flex-row gap-4 justify-center">
<a href="#architecture-diagram" class="inline-block bg-white text-blue-700 px-8 py-3 rounded-lg font-semibold hover:bg-blue-50 transition">
View Architecture
</a>
<a href="/docs.html" class="inline-block bg-blue-800 text-white px-8 py-3 rounded-lg font-semibold hover:bg-blue-900 transition border-2 border-white">
Read Documentation
</a>
</div>
</div>
</div>
</section>
</header>
<!-- Main Content -->
<main id="main-content" role="main">
<!-- Why External Enforcement Matters -->
<section class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-16">
<h2 class="text-4xl font-bold text-gray-900 mb-8 text-center">Why External Enforcement May Help</h2>
<div class="grid grid-cols-1 md:grid-cols-2 gap-8 mb-12">
<div class="bg-red-50 border-l-4 border-red-500 p-6 rounded-r-lg">
<h3 class="text-2xl font-bold text-red-900 mb-3 flex items-center">
<svg class="w-6 h-6 mr-2" fill="currentColor" viewBox="0 0 20 20">
<path fill-rule="evenodd" d="M13.477 14.89A6 6 0 015.11 6.524l8.367 8.368zm1.414-1.414L6.524 5.11a6 6 0 018.367 8.367zM18 10a8 8 0 11-16 0 8 8 0 0116 0z" clip-rule="evenodd"/>
</svg>
Behavioral Training (Constitutional AI)
</h3>
<ul class="space-y-2 text-red-800">
<li class="flex items-start">
<span class="mr-2">❌</span>
<span>Lives <strong>inside</strong> the AI model—accessible to adversarial prompts</span>
</li>
<li class="flex items-start">
<span class="mr-2">❌</span>
<span>Degrades under context pressure and long conversations</span>
</li>
<li class="flex items-start">
<span class="mr-2">❌</span>
<span>Can be manipulated by jailbreak techniques (DAN, roleplaying, hypotheticals)</span>
</li>
<li class="flex items-start">
<span class="mr-2">❌</span>
<span>Depends on AI's willingness to follow guidance</span>
</li>
<li class="flex items-start">
<span class="mr-2">❌</span>
<span>No verifiable audit trail independent of AI</span>
</li>
</ul>
</div>
<div class="bg-green-50 border-l-4 border-green-500 p-6 rounded-r-lg">
<h3 class="text-2xl font-bold text-green-900 mb-3 flex items-center">
<svg class="w-6 h-6 mr-2" fill="currentColor" viewBox="0 0 20 20">
<path fill-rule="evenodd" d="M2.166 4.999A11.954 11.954 0 0010 1.944 11.954 11.954 0 0017.834 5c.11.65.166 1.32.166 2.001 0 5.225-3.34 9.67-8 11.317C5.34 16.67 2 12.225 2 7c0-.682.057-1.35.166-2.001zm11.541 3.708a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"/>
</svg>
Structural Enforcement (Tractatus)
</h3>
<ul class="space-y-2 text-green-800">
<li class="flex items-start">
<span class="mr-2">✅</span>
<span>Lives <strong>outside</strong> the AI model—not directly accessible to prompts</span>
</li>
<li class="flex items-start">
<span class="mr-2">✅</span>
<span>External services aim for consistent enforcement regardless of context</span>
</li>
<li class="flex items-start">
<span class="mr-2">✅</span>
<span><em>More difficult</em> to bypass—AI actions pass through governance layer first</span>
</li>
<li class="flex items-start">
<span class="mr-2">✅</span>
<span>Architecturally resistant to manipulation via AI's internal state</span>
</li>
<li class="flex items-start">
<span class="mr-2">✅</span>
<span>Immutable audit trail stored independently of AI runtime</span>
</li>
</ul>
</div>
</div>
<div class="bg-gradient-to-r from-blue-50 to-purple-50 rounded-xl p-8 border border-blue-200">
<h3 class="text-2xl font-bold text-gray-900 mb-4 text-center">The Core Hypothesis</h3>
<p class="text-lg text-gray-700 text-center max-w-4xl mx-auto">
<strong>Jailbreaks often work by manipulating the AI's internal reasoning.</strong> Tractatus boundaries operate <em>external</em> to that reasoning—the AI doesn't directly evaluate governance rules. While not foolproof, this architectural separation makes manipulation significantly harder.
</p>
</div>
</section>
<!-- Architecture Diagram -->
<section id="architecture-diagram" class="bg-white py-16">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="text-center mb-8">
<h2 class="text-4xl font-bold text-gray-900 mb-4">Runtime-Agnostic Architecture</h2>
<p class="text-xl text-gray-600 max-w-3xl mx-auto">
Tractatus works with <strong>any agentic AI system</strong>—Claude Code, LangChain, AutoGPT, CrewAI, or custom agents. The governance layer sits between your agent and its actions.
</p>
</div>
<div class="bg-gray-50 rounded-xl p-8 border border-gray-300">
<img
src="/images/architecture-diagram-generic.svg"
alt="Tractatus Runtime-Agnostic Architecture Diagram showing Agent Runtime Layer, Tractatus Governance Layer with six services, Persistent Storage Layer, and Human Approval Workflows"
class="w-full"
loading="lazy"
/>
</div>
<div class="mt-8 grid grid-cols-1 md:grid-cols-3 gap-6">
<div class="bg-blue-50 rounded-lg p-6 border border-blue-200">
<h3 class="text-lg font-bold text-blue-900 mb-2">1. Agent Runtime Layer</h3>
<p class="text-blue-800 text-sm">
Your AI agent (any platform). Handles planning, reasoning, tool use. Tractatus is agnostic to implementation.
</p>
</div>
<div class="bg-green-50 rounded-lg p-6 border border-green-200">
<h3 class="text-lg font-bold text-green-900 mb-2">2. Governance Layer</h3>
<p class="text-green-800 text-sm">
Six external services enforce boundaries, validate actions, monitor pressure. <strong>Architecturally more difficult for AI to bypass.</strong>
</p>
</div>
<div class="bg-yellow-50 rounded-lg p-6 border border-yellow-200">
<h3 class="text-lg font-bold text-yellow-900 mb-2">3. Persistent Storage</h3>
<p class="text-yellow-800 text-sm">
Immutable audit logs, governance rules, instruction history. Independent of AI runtime—can't be altered by prompts.
</p>
</div>
</div>
</div>
</section>
<!-- Six Core Services -->
<section class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-16">
<h2 class="text-4xl font-bold text-gray-900 mb-12 text-center">Six Governance Services</h2>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
<div class="bg-white rounded-lg shadow-lg p-6 border-l-4 hover:shadow-xl transition-shadow duration-300" class="border-l-service-boundary">
<div class="flex items-center mb-3">
<div class="w-12 h-12 rounded-xl flex items-center justify-center mr-3" class="bg-gradient-service-boundary">
<svg class="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"/>
</svg>
</div>
<h3 class="text-lg font-bold text-gray-900">BoundaryEnforcer</h3>
</div>
<p class="text-gray-600 text-sm mb-3">
Blocks AI from making values decisions (privacy, ethics, strategic direction). Requires human approval.
</p>
<div class="text-xs rounded px-3 py-2" class="badge-boundary">
<strong>Early Promise:</strong> Values boundaries enforced externally—harder to manipulate through prompting.
</div>
</div>
<div class="bg-white rounded-lg shadow-lg p-6 border-l-4 hover:shadow-xl transition-shadow duration-300" class="border-l-service-instruction">
<div class="flex items-center mb-3">
<div class="w-12 h-12 rounded-xl flex items-center justify-center mr-3" class="bg-gradient-service-instruction">
<svg class="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/>
</svg>
</div>
<h3 class="text-lg font-bold text-gray-900">InstructionPersistenceClassifier</h3>
</div>
<p class="text-gray-600 text-sm mb-3">
Stores instructions externally with persistence levels (HIGH/MEDIUM/LOW). Aims to reduce directive fade.
</p>
<div class="text-xs rounded px-3 py-2" class="badge-instruction">
<strong>Early Promise:</strong> Instructions stored outside AI—more resistant to context manipulation.
</div>
</div>
<div class="bg-white rounded-lg shadow-lg p-6 border-l-4 hover:shadow-xl transition-shadow duration-300" class="border-l-service-validator">
<div class="flex items-center mb-3">
<div class="w-12 h-12 rounded-xl flex items-center justify-center mr-3" class="bg-gradient-service-validator">
<svg class="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/>
</svg>
</div>
<h3 class="text-lg font-bold text-gray-900">CrossReferenceValidator</h3>
</div>
<p class="text-gray-600 text-sm mb-3">
Validates AI actions against instruction history. Aims to prevent pattern bias overriding explicit directives.
</p>
<div class="text-xs rounded px-3 py-2" class="badge-validator">
<strong>Early Promise:</strong> Independent verification—AI claims checked against external source.
</div>
</div>
<div class="bg-white rounded-lg shadow-lg p-6 border-l-4 hover:shadow-xl transition-shadow duration-300" class="border-l-service-pressure">
<div class="flex items-center mb-3">
<div class="w-12 h-12 rounded-xl flex items-center justify-center mr-3" class="bg-gradient-service-pressure">
<svg class="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"/>
</svg>
</div>
<h3 class="text-lg font-bold text-gray-900">ContextPressureMonitor</h3>
</div>
<p class="text-gray-600 text-sm mb-3">
Monitors AI performance degradation. Escalates when context pressure threatens quality.
</p>
<div class="text-xs rounded px-3 py-2" class="badge-pressure">
<strong>Early Promise:</strong> Objective metrics may detect manipulation attempts early.
</div>
</div>
<div class="bg-white rounded-lg shadow-lg p-6 border-l-4 hover:shadow-xl transition-shadow duration-300" class="border-l-service-metacognitive">
<div class="flex items-center mb-3">
<div class="w-12 h-12 rounded-xl flex items-center justify-center mr-3" class="bg-gradient-service-metacognitive">
<svg class="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z"/>
</svg>
</div>
<h3 class="text-lg font-bold text-gray-900">MetacognitiveVerifier</h3>
</div>
<p class="text-gray-600 text-sm mb-3">
Requires AI to pause and verify complex operations before execution. Structural safety check.
</p>
<div class="text-xs rounded px-3 py-2" class="badge-metacognitive">
<strong>Early Promise:</strong> Architectural gates aim to enforce verification steps.
</div>
</div>
<div class="bg-white rounded-lg shadow-lg p-6 border-l-4 hover:shadow-xl transition-shadow duration-300" class="border-l-service-deliberation">
<div class="flex items-center mb-3">
<div class="w-12 h-12 rounded-xl flex items-center justify-center mr-3" class="bg-gradient-service-deliberation">
<svg class="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z"/>
</svg>
</div>
<h3 class="text-lg font-bold text-gray-900">PluralisticDeliberationOrchestrator</h3>
</div>
<p class="text-gray-600 text-sm mb-3">
Facilitates multi-stakeholder deliberation for values conflicts. AI provides facilitation, not authority.
</p>
<div class="text-xs rounded px-3 py-2" class="badge-deliberation">
<strong>Early Promise:</strong> Human judgment required—architecturally enforced escalation for values.
</div>
</div>
</div>
</section>
<!-- Interactive Architecture Diagram -->
<section class="bg-gradient-to-br from-gray-50 to-blue-50 py-16">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="text-center mb-8">
<h2 class="text-4xl font-bold text-gray-900 mb-4">Explore the Architecture Interactively</h2>
<p class="text-xl text-gray-600 max-w-3xl mx-auto mb-4">
Click any service node or the central core to see detailed information about how governance works.
</p>
<div class="text-sm text-gray-600">
<p class="flex items-center justify-center space-x-2">
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 15l-2 5L9 9l11 4-5 2zm0 0l5 5M7.188 2.239l.777 2.897M5.136 7.965l-2.898-.777M13.95 4.05l-2.122 2.122m-5.657 5.656l-2.12 2.122"/>
</svg>
<span><strong>Tip:</strong> Click the central <span class="font-semibold text-cyan-600">"T"</span> to see how all services work together</span>
</p>
</div>
</div>
<div id="diagram-container" class="relative bg-white rounded-xl shadow-lg p-4 sm:p-6 lg:p-8 border border-gray-200">
<!-- Flex container for side-by-side layout -->
<div class="flex flex-col lg:flex-row lg:items-start gap-6">
<!-- Interactive SVG (reduced to 25% surface area = 50% linear) -->
<div class="flex-shrink-0 flex justify-center lg:justify-start">
<object
data="/images/architecture-diagram-interactive.svg"
type="image/svg+xml"
id="interactive-svg-object"
class="w-48 sm:w-56 lg:w-64 h-auto"
aria-label="Interactive Tractatus Architecture Diagram">
<!-- Fallback for browsers that don't support object tag -->
<img src="/images/architecture-diagram-interactive.svg" alt="Tractatus Architecture Diagram" class="w-48 sm:w-56 lg:w-64" />
</object>
</div>
<!-- Service detail panel (permanent, updates on click) -->
<div id="service-detail-panel" class="flex-1 bg-gray-50 rounded-xl shadow-inner p-6 border border-gray-200 min-h-[300px]">
<!-- Default state - will be replaced when service is clicked -->
<div id="panel-default-state" class="flex flex-col items-center justify-center h-full text-center">
<svg class="w-16 h-16 text-gray-400 mb-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
</svg>
<h3 class="text-lg font-semibold text-gray-700 mb-2">Explore the Governance Services</h3>
<p class="text-sm text-gray-500 max-w-md">Click any service node in the diagram (colored circles) or the central "T" to learn more about how Tractatus enforces AI safety.</p>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Data Visualizations -->
<section class="bg-white py-16">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<h2 class="text-4xl font-bold text-gray-900 mb-6 text-center">Framework in Action</h2>
<p class="text-xl text-gray-600 mb-12 text-center max-w-3xl mx-auto">
Interactive visualizations demonstrating how Tractatus governance services monitor and coordinate AI operations.
</p>
<div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
<!-- Context Pressure Monitor Visualization -->
<div class="bg-gray-50 rounded-xl shadow-lg p-6 border border-gray-200 min-h-[600px] overflow-auto">
<div id="pressure-chart"></div>
</div>
<!-- Framework Activity Timeline -->
<div class="bg-gray-50 rounded-xl shadow-lg p-6 border border-gray-200 min-h-[600px] overflow-auto">
<div id="activity-timeline"></div>
</div>
</div>
</div>
</section>
<!-- Reference Implementation -->
<section class="bg-gray-50 py-16">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<h2 class="text-4xl font-bold text-gray-900 mb-6 text-center">Production Reference Implementation</h2>
<p class="text-xl text-gray-600 mb-8 text-center max-w-3xl mx-auto">
Tractatus is deployed in production using <strong>Claude Code</strong> as the agent runtime. This demonstrates the framework's real-world viability.
</p>
<div class="bg-white rounded-xl shadow-lg p-8 border border-gray-200">
<div class="grid grid-cols-1 lg:grid-cols-2 gap-8 items-center">
<div>
<h3 class="text-2xl font-bold text-gray-900 mb-4">Claude Code + Tractatus</h3>
<p class="text-gray-700 mb-4">
Our production deployment uses Claude Code as the agent runtime with Tractatus governance middleware. This combination provides:
</p>
<ul class="space-y-2 text-gray-700">
<li class="flex items-start">
<svg class="w-5 h-5 text-blue-600 mr-2 mt-0.5" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"/></svg>
<span><strong>95% instruction persistence</strong> across session boundaries</span>
</li>
<li class="flex items-start">
<svg class="w-5 h-5 text-blue-600 mr-2 mt-0.5" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"/></svg>
<span><strong>Zero values boundary violations</strong> in 127 test scenarios</span>
</li>
<li class="flex items-start">
<svg class="w-5 h-5 text-blue-600 mr-2 mt-0.5" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"/></svg>
<span><strong>100% detection rate</strong> for pattern bias failures</span>
</li>
<li class="flex items-start">
<svg class="w-5 h-5 text-blue-600 mr-2 mt-0.5" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"/></svg>
<span><strong>&lt;10ms performance overhead</strong> for governance layer</span>
</li>
</ul>
<div class="mt-6">
<a href="/images/architecture-diagram.svg" class="inline-block text-blue-600 hover:text-blue-700 font-medium">
View Claude Code Implementation Diagram →
</a>
</div>
</div>
<div class="bg-gradient-to-br from-blue-50 to-purple-50 rounded-lg p-6 border border-blue-200">
<h4 class="font-bold text-gray-900 mb-3">Real-World Testing</h4>
<p class="text-gray-700 text-sm mb-3">
<strong>This isn't just theory.</strong> Tractatus is running in production, handling real workloads and detecting real failure patterns.
</p>
<p class="text-gray-700 text-sm">
Early results are <strong>promising</strong>—with documented incident prevention—but this needs independent validation and much wider testing.
</p>
</div>
</div>
</div>
</div>
</section>
<!-- Limitations and Reality Check -->
<section class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-16">
<div class="bg-amber-50 border-l-4 border-amber-500 p-8 rounded-r-lg">
<h2 class="text-3xl font-bold text-amber-900 mb-6">Limitations and Reality Check</h2>
<div class="space-y-4 text-amber-800">
<p class="text-lg">
<strong>This is early-stage work.</strong> While we've seen promising results in our production deployment, Tractatus has not been subjected to rigorous adversarial testing or red-team evaluation.
</p>
<div class="bg-white rounded-lg p-6 my-6 border border-amber-200">
<p class="text-gray-700 italic text-lg mb-2">
"We have real promise but this is still in early development stage. This sounds like we have the complete issue resolved, we do not. We have a long way to go and it will require a mammoth effort by developers in every part of the industry to tame AI effectively. This is just a start."
</p>
<p class="text-gray-600 text-sm">
— Project Lead, Tractatus Framework
</p>
</div>
<h3 class="text-xl font-bold text-amber-900 mt-6 mb-3">Known Limitations:</h3>
<ul class="space-y-2 ml-6">
<li class="flex items-start">
<span class="mr-2">•</span>
<span><strong>No dedicated red-team testing:</strong> We don't know how well these boundaries hold up against determined adversarial attacks.</span>
</li>
<li class="flex items-start">
<span class="mr-2">•</span>
<span><strong>Small-scale validation:</strong> Six months of production use on a single project. Needs multi-organization replication.</span>
</li>
<li class="flex items-start">
<span class="mr-2">•</span>
<span><strong>Integration challenges:</strong> Retrofitting governance into existing systems requires significant engineering effort.</span>
</li>
<li class="flex items-start">
<span class="mr-2">•</span>
<span><strong>Performance at scale unknown:</strong> Testing limited to single-agent deployments. Multi-agent coordination untested.</span>
</li>
<li class="flex items-start">
<span class="mr-2">•</span>
<span><strong>Evolving threat landscape:</strong> As AI capabilities grow, new failure modes will emerge that current architecture may not address.</span>
</li>
</ul>
<h3 class="text-xl font-bold text-amber-900 mt-6 mb-3">What We Need:</h3>
<ul class="space-y-2 ml-6">
<li class="flex items-start">
<span class="mr-2">🔬</span>
<span>Independent researchers to validate (or refute) our findings</span>
</li>
<li class="flex items-start">
<span class="mr-2">🔴</span>
<span>Red-team evaluation to find weaknesses and bypass techniques</span>
</li>
<li class="flex items-start">
<span class="mr-2">🏢</span>
<span>Multi-organization pilot deployments across different domains</span>
</li>
<li class="flex items-start">
<span class="mr-2">🤝</span>
<span>Industry-wide collaboration on governance standards and patterns</span>
</li>
<li class="flex items-start">
<span class="mr-2">📊</span>
<span>Quantitative studies measuring incident reduction and cost-benefit analysis</span>
</li>
</ul>
<p class="text-lg mt-6 font-semibold">
This framework is a starting point for exploration, not a finished solution. Taming AI will require sustained effort from the entire industry—researchers, practitioners, regulators, and ethicists working together.
</p>
</div>
</div>
</section>
<!-- CTA Section -->
<section class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-16">
<div class="bg-gradient-to-r from-blue-600 to-purple-600 rounded-2xl p-12 text-center text-white">
<h2 class="text-4xl font-bold mb-4">Explore a Promising Approach to AI Safety</h2>
<p class="text-xl mb-8 opacity-90 max-w-3xl mx-auto">
Tractatus demonstrates how structural enforcement may complement behavioral training. We invite researchers and practitioners to evaluate, critique, and build upon this work.
</p>
<div class="flex flex-col sm:flex-row justify-center gap-4">
<a href="/docs.html" class="inline-block bg-white text-blue-600 px-8 py-3 rounded-lg font-semibold hover:bg-gray-100 transition">
Read Documentation
</a>
<a href="/researcher.html" class="inline-block bg-blue-700 text-white px-8 py-3 rounded-lg font-semibold hover:bg-blue-800 transition border-2 border-white">
View Research
</a>
<a href="/implementer.html" class="inline-block bg-purple-700 text-white px-8 py-3 rounded-lg font-semibold hover:bg-purple-800 transition border-2 border-white">
Implementation Guide
</a>
</div>
</div>
</section>
</main>
<!-- Footer -->
<!-- Internationalization -->
<script src="/js/i18n-simple.js?v=1760818106"></script>
<script src="/js/components/language-selector.js?v=1760818106"></script>
<!-- Scroll Animations (Phase 3) -->
<script src="/js/scroll-animations.js"></script>
<!-- Page Transitions (Phase 3) -->
<script src="/js/page-transitions.js"></script>
<!-- Interactive Architecture Diagram (Phase 3) -->
<script src="/js/components/interactive-diagram.js?v=20251019170000"></script>
<!-- Data Visualizations (Phase 3) -->
<script src="/js/components/pressure-chart.js?v=20251019174000"></script>
<script src="/js/components/activity-timeline.js?v=20251019173500"></script>
<!-- Footer Component -->
<script src="/js/components/footer.js"></script>
</body>
</html>
Reference in a new issue View git blame Copy permalink