6811605477
- Create korero-counter-arguments.html (STO-INN-0004) with styled critique cards - Remove umami-tracker.js and all references from HTML files - Update privacy.html Section 6 to reflect "No Analytics" policy Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
906 lines
55 KiB
HTML
906 lines
55 KiB
HTML
<!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.">
|
|
|
|
<!-- Open Graph / Facebook -->
|
|
<meta property="og:type" content="website">
|
|
<meta property="og:url" content="https://agenticgovernance.digital/architecture.html">
|
|
<meta property="og:title" content="Five Architectural Principles for AI Safety | Tractatus">
|
|
<meta property="og:description" content="Governance woven into deployment architecture. Deep Interlock, Structure-Preserving, Gradients, Living Process, Not-Separateness - adapted from Christopher Alexander's pattern languages.">
|
|
<meta property="og:image" content="https://agenticgovernance.digital/images/social-preview.png">
|
|
<meta property="og:image:width" content="1200">
|
|
<meta property="og:image:height" content="630">
|
|
<meta property="og:site_name" content="Tractatus Framework">
|
|
<meta property="og:see_also" content="https://www.facebook.com/agenticgovernance">
|
|
|
|
<!-- Twitter -->
|
|
<meta name="twitter:card" content="summary_large_image">
|
|
<meta name="twitter:url" content="https://agenticgovernance.digital/architecture.html">
|
|
<meta name="twitter:title" content="Five Architectural Principles for AI Safety | Tractatus">
|
|
<meta name="twitter:description" content="Governance woven into deployment architecture. Deep Interlock, Structure-Preserving, Gradients, Living Process, Not-Separateness - adapted from Christopher Alexander's pattern languages.">
|
|
<meta name="twitter:image" content="https://agenticgovernance.digital/images/social-preview.png">
|
|
|
|
<link rel="icon" type="image/svg+xml" href="/favicon-new.svg">
|
|
<link rel="stylesheet" href="/css/fonts.css?v=0.1.0.1761283486841">
|
|
<link rel="stylesheet" href="/css/tailwind.css?v=0.1.0.1761283486841">
|
|
<link rel="stylesheet" href="/css/tractatus-theme.min.css?v=0.1.0.1761283486841">
|
|
<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>
|
|
|
|
<!-- Auto-reload on service worker update -->
|
|
</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.1761283486841" defer></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" data-i18n="breadcrumb.home"></a></li>
|
|
<li class="text-gray-400">/</li>
|
|
<li class="text-gray-900 font-medium" aria-current="page" data-i18n="breadcrumb.current"></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" data-i18n="hero.badge">
|
|
🏛️ BUILT ON LIVING SYSTEMS PRINCIPLES
|
|
</div>
|
|
<h1 class="text-5xl md:text-6xl font-bold mb-6" data-i18n="hero.title">
|
|
Five Architectural Principles for AI Safety
|
|
</h1>
|
|
<p class="text-xl md:text-2xl text-white mb-8 max-w-4xl mx-auto" data-i18n-html="hero.subtitle">
|
|
Tractatus governance is <strong>woven into deployment architecture</strong>, not bolted on. Five principles guide how the framework evolves, maintains coherence, and resists bypass—making it structurally more difficult (though not impossible) to circumvent through prompting.
|
|
</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" data-i18n="hero.challenge_label">The Problem:</strong> <span data-i18n="hero.challenge_text">Behavioral training can be manipulated through cleverly crafted prompts. AI governance based solely on internal reasoning is vulnerable to jailbreaks.</span>
|
|
</p>
|
|
<p class="text-lg text-blue-50 mt-3">
|
|
<strong class="text-white" data-i18n="hero.approach_label">Our Approach:</strong> <span data-i18n="hero.approach_text">Architectural enforcement operating in the critical execution path—governance services validate every action before it executes, independent of the AI's internal reasoning.</span>
|
|
</p>
|
|
</div>
|
|
<div class="flex flex-col sm:flex-row gap-4 justify-center">
|
|
<a href="#five-principles" class="inline-block bg-white text-blue-700 px-8 py-3 rounded-lg font-semibold hover:bg-blue-50 transition" data-i18n="hero.cta_principles">
|
|
See the Five Principles
|
|
</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" data-i18n="hero.cta_docs">
|
|
Read Documentation
|
|
</a>
|
|
</div>
|
|
|
|
<!-- Hero Graphic: Architectural Blueprint -->
|
|
<div class="mt-12 max-w-4xl mx-auto">
|
|
<img src="/images/social-preview.png"
|
|
alt="Tractatus Framework architectural diagram showing human agency at the center with interconnected governance services forming a structural network"
|
|
class="rounded-lg shadow-2xl border-2 border-blue-300/30"
|
|
loading="lazy">
|
|
</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" data-i18n="comparison.heading"></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" data-i18n="comparison.behavioral_title">
|
|
<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 data-i18n-html="comparison.behavioral_item1"></span>
|
|
</li>
|
|
<li class="flex items-start">
|
|
<span class="mr-2">❌</span>
|
|
<span data-i18n-html="comparison.behavioral_item2"></span>
|
|
</li>
|
|
<li class="flex items-start">
|
|
<span class="mr-2">❌</span>
|
|
<span data-i18n-html="comparison.behavioral_item3"></span>
|
|
</li>
|
|
<li class="flex items-start">
|
|
<span class="mr-2">❌</span>
|
|
<span data-i18n-html="comparison.behavioral_item4"></span>
|
|
</li>
|
|
<li class="flex items-start">
|
|
<span class="mr-2">❌</span>
|
|
<span data-i18n-html="comparison.behavioral_item5"></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 data-i18n-html="comparison.structural_item1"></span>
|
|
</li>
|
|
<li class="flex items-start">
|
|
<span class="mr-2">✅</span>
|
|
<span data-i18n-html="comparison.structural_item2"></span>
|
|
</li>
|
|
<li class="flex items-start">
|
|
<span class="mr-2">✅</span>
|
|
<span data-i18n-html="comparison.structural_item3"></span>
|
|
</li>
|
|
<li class="flex items-start">
|
|
<span class="mr-2">✅</span>
|
|
<span data-i18n-html="comparison.structural_item4"></span>
|
|
</li>
|
|
<li class="flex items-start">
|
|
<span class="mr-2">✅</span>
|
|
<span data-i18n-html="comparison.structural_item5"></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" data-i18n="comparison.hypothesis_title"></h3>
|
|
<p class="text-lg text-gray-700 text-center max-w-4xl mx-auto" data-i18n-html="comparison.hypothesis_text">
|
|
<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>
|
|
|
|
<!-- Five Principles Section -->
|
|
<section id="five-principles" class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-16">
|
|
<div class="text-center mb-12">
|
|
<h2 class="text-4xl font-bold text-gray-900 mb-4" data-i18n="principles.heading">Five Architectural Principles</h2>
|
|
<p class="text-xl text-gray-600 max-w-3xl mx-auto" data-i18n-html="principles.subtitle">
|
|
These principles, adapted from Christopher Alexander's work on living systems, guide how Tractatus evolves and maintains coherence. They're not documentation—they're <strong>design criteria</strong> enforced architecturally.
|
|
</p>
|
|
</div>
|
|
|
|
<!-- Principle 1: Not-Separateness -->
|
|
<div class="mb-16">
|
|
<div class="flex items-start mb-6">
|
|
<div class="flex-shrink-0 w-16 h-16 bg-gradient-to-br from-emerald-500 to-emerald-600 rounded-xl flex items-center justify-center text-white text-2xl font-bold mr-4">1</div>
|
|
<div>
|
|
<h3 class="text-3xl font-bold text-gray-900 mb-2" data-i18n="principles.not_separateness.title">Not-Separateness: Governance in the Critical Path</h3>
|
|
<p class="text-lg text-emerald-700 italic" data-i18n="principles.not_separateness.principle">Governance woven into deployment architecture, not bolted on</p>
|
|
</div>
|
|
</div>
|
|
<div class="bg-emerald-50 rounded-xl p-8 border border-emerald-200">
|
|
<p class="text-gray-700 mb-4" data-i18n="principles.not_separateness.description">
|
|
Tractatus governance services operate <strong>in the critical execution path</strong>—every action passes through validation before executing. This isn't monitoring after-the-fact, it's architectural enforcement that cannot be bypassed.
|
|
</p>
|
|
<div class="bg-white rounded-lg p-4 mb-4">
|
|
<p class="text-sm font-semibold text-gray-900 mb-2" data-i18n="principles.not_separateness.example_label">Example: PreToolUse Hook</p>
|
|
<p class="text-sm text-gray-600" data-i18n="principles.not_separateness.example">
|
|
When the AI attempts to edit a file, the PreToolUse hook intercepts <em>before execution</em>. BoundaryEnforcer, CrossReferenceValidator, and other services validate the action. If any service blocks, the edit never happens—architecturally impossible to bypass.
|
|
</p>
|
|
</div>
|
|
<p class="text-sm text-gray-600 italic" data-i18n="principles.not_separateness.contrast">
|
|
<strong>Contrast:</strong> Bolt-on compliance systems monitor actions after they occur, creating separation between governance and execution. An AI agent could theoretically disable monitoring or exploit gaps. Tractatus eliminates that separation.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Principle 2: Deep Interlock -->
|
|
<div class="mb-16">
|
|
<div class="flex items-start mb-6">
|
|
<div class="flex-shrink-0 w-16 h-16 bg-gradient-to-br from-indigo-500 to-indigo-600 rounded-xl flex items-center justify-center text-white text-2xl font-bold mr-4">2</div>
|
|
<div>
|
|
<h3 class="text-3xl font-bold text-gray-900 mb-2" data-i18n="principles.deep_interlock.title">Deep Interlock: Services Reinforce Each Other</h3>
|
|
<p class="text-lg text-indigo-700 italic" data-i18n="principles.deep_interlock.principle">Coordinated governance, not isolated checks</p>
|
|
</div>
|
|
</div>
|
|
<div class="bg-indigo-50 rounded-xl p-8 border border-indigo-200">
|
|
<p class="text-gray-700 mb-4" data-i18n="principles.deep_interlock.description">
|
|
The six governance services don't operate in silos—they coordinate through mutual validation. High context pressure intensifies boundary checking. Instruction persistence affects cross-reference validation. Service outputs feed into each other, creating resilience through redundancy.
|
|
</p>
|
|
<div class="bg-white rounded-lg p-4 mb-4">
|
|
<p class="text-sm font-semibold text-gray-900 mb-2" data-i18n="principles.deep_interlock.example_label">Example: The 27027 Incident</p>
|
|
<p class="text-sm text-gray-600" data-i18n="principles.deep_interlock.example">
|
|
AI attempted to use default database port despite HIGH persistence instruction specifying port 27027. InstructionPersistenceClassifier flagged the instruction. ContextPressureMonitor detected 53.5% pressure. CrossReferenceValidator caught the conflict. BoundaryEnforcer blocked the action. Four services working together prevented the error.
|
|
</p>
|
|
</div>
|
|
<p class="text-sm text-gray-600 italic" data-i18n="principles.deep_interlock.benefit">
|
|
<strong>Why it matters:</strong> Single service bypass doesn't compromise governance. An attacker would need to circumvent multiple coordinated services simultaneously—exponentially harder than defeating isolated checks.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Principle 3: Gradients Not Binary -->
|
|
<div class="mb-16">
|
|
<div class="flex items-start mb-6">
|
|
<div class="flex-shrink-0 w-16 h-16 bg-gradient-to-br from-amber-500 to-amber-600 rounded-xl flex items-center justify-center text-white text-2xl font-bold mr-4">3</div>
|
|
<div>
|
|
<h3 class="text-3xl font-bold text-gray-900 mb-2" data-i18n="principles.gradients.title">Gradients Not Binary: Nuanced Responses</h3>
|
|
<p class="text-lg text-amber-700 italic" data-i18n="principles.gradients.principle">Intensity levels, not yes/no switches</p>
|
|
</div>
|
|
</div>
|
|
<div class="bg-amber-50 rounded-xl p-8 border border-amber-200">
|
|
<p class="text-gray-700 mb-4" data-i18n="principles.gradients.description">
|
|
Governance operates on gradients: NORMAL → ELEVATED → HIGH → CRITICAL. Context pressure, security impact, and validation rigor all scale with intensity. This mirrors how living systems adapt—gradual responses, not mechanical on/off.
|
|
</p>
|
|
<div class="bg-white rounded-lg p-4 mb-4">
|
|
<p class="text-sm font-semibold text-gray-900 mb-2" data-i18n="principles.gradients.example_label">Example: Context Pressure Monitoring</p>
|
|
<p class="text-sm text-gray-600" data-i18n="principles.gradients.example">
|
|
At NORMAL pressure (0-25%), routine operations proceed smoothly. At ELEVATED (25-50%), validation becomes more thorough. At HIGH (50-75%), human review triggers more frequently. At CRITICAL (>75%), framework recommends session closedown. Graduated response prevents both alert fatigue and catastrophic failures.
|
|
</p>
|
|
</div>
|
|
<p class="text-sm text-gray-600 italic" data-i18n="principles.gradients.contrast">
|
|
<strong>Contrast:</strong> Binary "allowed/blocked" systems create brittleness—either everything passes or nothing does. Gradients enable natural adaptation to varying risk levels.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Principle 4: Structure-Preserving -->
|
|
<div class="mb-16">
|
|
<div class="flex items-start mb-6">
|
|
<div class="flex-shrink-0 w-16 h-16 bg-gradient-to-br from-purple-500 to-purple-600 rounded-xl flex items-center justify-center text-white text-2xl font-bold mr-4">4</div>
|
|
<div>
|
|
<h3 class="text-3xl font-bold text-gray-900 mb-2" data-i18n="principles.structure_preserving.title">Structure-Preserving: Audit Continuity</h3>
|
|
<p class="text-lg text-purple-700 italic" data-i18n="principles.structure_preserving.principle">Changes enhance without breaking</p>
|
|
</div>
|
|
</div>
|
|
<div class="bg-purple-50 rounded-xl p-8 border border-purple-200">
|
|
<p class="text-gray-700 mb-4" data-i18n="principles.structure_preserving.description">
|
|
Framework changes must preserve wholeness—audit logs remain interpretable, decisions remain valid, institutional memory survives evolution. Version 4.2 logs are readable in version 4.4. Six-month-old audit decisions still make sense. Structure-preserving transformations maintain coherence across time.
|
|
</p>
|
|
<div class="bg-white rounded-lg p-4 mb-4">
|
|
<p class="text-sm font-semibold text-gray-900 mb-2" data-i18n="principles.structure_preserving.example_label">Example: Adding Framework Fade Detection</p>
|
|
<p class="text-sm text-gray-600" data-i18n="principles.structure_preserving.example">
|
|
When inst_064 (framework fade detection) was added, it monitored all six services without changing their core definitions. Pre-existing audit logs remained valid. Service behavior evolved, but historical decisions stayed interpretable. Enhancement without fracture.
|
|
</p>
|
|
</div>
|
|
<p class="text-sm text-gray-600 italic" data-i18n="principles.structure_preserving.regulatory">
|
|
<strong>Regulatory advantage:</strong> Regulators need stable audit trails. Structure-preserving evolution lets the framework adapt while maintaining compliance continuity—no need to re-interpret old decisions every version.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Principle 5: Living Process -->
|
|
<div class="mb-8">
|
|
<div class="flex items-start mb-6">
|
|
<div class="flex-shrink-0 w-16 h-16 bg-gradient-to-br from-rose-500 to-rose-600 rounded-xl flex items-center justify-center text-white text-2xl font-bold mr-4">5</div>
|
|
<div>
|
|
<h3 class="text-3xl font-bold text-gray-900 mb-2" data-i18n="principles.living_process.title">Living Process: Evidence-Based Evolution</h3>
|
|
<p class="text-lg text-rose-700 italic" data-i18n="principles.living_process.principle">Grows from real failures, not theory</p>
|
|
</div>
|
|
</div>
|
|
<div class="bg-rose-50 rounded-xl p-8 border border-rose-200">
|
|
<p class="text-gray-700 mb-4" data-i18n="principles.living_process.description">
|
|
Framework changes emerge from observed reality, not predetermined plans. When services went unused, we added fade detection. When selective verification reduced noise, we evolved triggering criteria. Real operational experience drives evolution—no building solutions to theoretical problems.
|
|
</p>
|
|
<div class="bg-white rounded-lg p-4 mb-4">
|
|
<p class="text-sm font-semibold text-gray-900 mb-2" data-i18n="principles.living_process.example_label">Example: MetacognitiveVerifier Selective Mode</p>
|
|
<p class="text-sm text-gray-600" data-i18n="principles.living_process.example">
|
|
Audit logs showed MetacognitiveVerifier activating on trivial operations, creating noise. Rather than theorize about thresholds, we analyzed real trigger patterns. Selective mode emerged from data—verify only complex operations (3+ file modifications, 5+ sequential steps). Performance improved based on evidence, not guesswork.
|
|
</p>
|
|
</div>
|
|
<p class="text-sm text-gray-600 italic" data-i18n="principles.living_process.contrast">
|
|
<strong>Contrast:</strong> Over-engineered systems solve imagined problems. Living process builds only what reality proves necessary—lean, effective, grounded in operational truth.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- How They Work Together -->
|
|
<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" data-i18n="principles.together.title">How the Five Principles Work Together</h3>
|
|
<div class="max-w-3xl mx-auto">
|
|
<p class="text-gray-700 mb-4" data-i18n-html="principles.together.description">
|
|
These principles aren't independent—they form an interlocking pattern. <strong>Not-separateness</strong> requires <strong>deep interlock</strong> between services. <strong>Gradients</strong> enable natural adaptation. <strong>Living process</strong> drives changes that must be <strong>structure-preserving</strong> to maintain wholeness.
|
|
</p>
|
|
<div class="bg-white rounded-lg p-6 font-mono text-sm text-gray-700">
|
|
<div class="text-center">
|
|
<p data-i18n="principles.together.flow_1">Not-Separateness (governance in critical path)</p>
|
|
<p class="text-blue-600">↓ requires</p>
|
|
<p data-i18n="principles.together.flow_2">Deep Interlock (services coordinate)</p>
|
|
<p class="text-blue-600">↓ enables</p>
|
|
<p data-i18n="principles.together.flow_3">Gradients (nuanced responses)</p>
|
|
<p class="text-blue-600">↓ guided by</p>
|
|
<p data-i18n="principles.together.flow_4">Living Process (evidence-based evolution)</p>
|
|
<p class="text-blue-600">↓ constrained by</p>
|
|
<p data-i18n="principles.together.flow_5">Structure-Preserving (audit continuity)</p>
|
|
<p class="text-blue-600 mt-2">↓</p>
|
|
<p class="font-bold" data-i18n="principles.together.result">System Wholeness</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</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" data-i18n="architecture_diagram.title"></h2>
|
|
<p class="text-xl text-gray-600 max-w-3xl mx-auto" data-i18n-html="architecture_diagram.subtitle">
|
|
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" data-i18n="architecture_diagram.layer1_title"></h3>
|
|
<p class="text-blue-800 text-sm" data-i18n="architecture_diagram.layer1_desc">
|
|
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" data-i18n="architecture_diagram.layer2_title"></h3>
|
|
<p class="text-green-800 text-sm" data-i18n="architecture_diagram.layer2_desc">
|
|
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" data-i18n="architecture_diagram.layer3_title"></h3>
|
|
<p class="text-yellow-800 text-sm" data-i18n="architecture_diagram.layer3_desc">
|
|
Immutable audit logs, governance rules, instruction history. Independent of AI runtime—can't be altered by prompts.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Interactive Exploration Section -->
|
|
<section class="bg-gradient-to-br from-yellow-50 to-orange-50 py-16 border-y border-orange-200">
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
|
|
<div class="inline-block bg-orange-600 text-white px-4 py-2 rounded-lg font-semibold mb-6 text-sm" data-i18n="interactive_exploration.badge">
|
|
🔍 INTERACTIVE EXPLORATION
|
|
</div>
|
|
<h2 class="text-4xl md:text-5xl font-bold mb-6 text-gray-900" data-i18n="interactive_exploration.heading">
|
|
See the Framework in Action
|
|
</h2>
|
|
<p class="text-xl text-gray-700 mb-8 max-w-3xl mx-auto" data-i18n-html="interactive_exploration.intro">
|
|
Explore <strong>3,942 real governance decisions</strong> from production deployment.
|
|
Filter by service, pressure level, and coordination patterns to understand how
|
|
Deep Interlock operates in practice.
|
|
</p>
|
|
<div class="flex flex-col sm:flex-row gap-4 justify-center">
|
|
<a href="https://huggingface.co/spaces/tractatus-framework/audit-log-viewer"
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
class="inline-block bg-orange-600 text-white px-8 py-4 rounded-lg font-bold text-lg hover:bg-orange-700 transition shadow-lg hover:shadow-xl"
|
|
data-i18n="interactive_exploration.hf_cta">
|
|
🤗 Launch Interactive Explorer on Hugging Face
|
|
</a>
|
|
<a href="/researcher.html"
|
|
class="inline-block bg-white text-gray-900 px-8 py-4 rounded-lg font-semibold text-lg hover:bg-gray-100 transition border-2 border-gray-300"
|
|
data-i18n="interactive_exploration.researcher_cta">
|
|
For Researchers →
|
|
</a>
|
|
</div>
|
|
<p class="text-sm text-gray-600 mt-6" data-i18n="interactive_exploration.footer_note">
|
|
Apache 2.0 licensed • All data anonymized • No sign-up required
|
|
</p>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Six Core Services -->
|
|
<section class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-16">
|
|
<div class="text-center mb-12">
|
|
<h2 class="text-4xl font-bold text-gray-900 mb-4" data-i18n="services.heading">Six Governance Services</h2>
|
|
<p class="text-xl text-gray-600 max-w-3xl mx-auto" data-i18n-html="services.subtitle">
|
|
These services implement the five principles in practice. Each service embodies <strong>not-separateness</strong> (operating in the critical path), <strong>deep interlock</strong> (coordinating with others), and <strong>gradients</strong> (intensity-based responses).
|
|
</p>
|
|
</div>
|
|
|
|
<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 min-w-0 max-w-full overflow-hidden" 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 break-words overflow-wrap-anywhere" data-i18n="services.boundary.name"></h3>
|
|
</div>
|
|
<p class="text-gray-600 text-sm mb-3 break-words overflow-wrap-anywhere" data-i18n="services.boundary.description">
|
|
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" data-i18n-html="services.boundary.promise">
|
|
<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 min-w-0 max-w-full overflow-hidden" 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 break-words overflow-wrap-anywhere" data-i18n="services.instruction.name"></h3>
|
|
</div>
|
|
<p class="text-gray-600 text-sm mb-3 break-words overflow-wrap-anywhere" data-i18n="services.instruction.description">
|
|
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" data-i18n-html="services.instruction.promise">
|
|
<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 min-w-0 max-w-full overflow-hidden" 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 break-words overflow-wrap-anywhere" data-i18n="services.validator.name"></h3>
|
|
</div>
|
|
<p class="text-gray-600 text-sm mb-3 break-words overflow-wrap-anywhere">
|
|
<span data-i18n="services.validator.description"></span>
|
|
</p>
|
|
<div class="text-xs rounded px-3 py-2" class="badge-validator" data-i18n-html="services.validator.promise">
|
|
<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 min-w-0 max-w-full overflow-hidden" 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 break-words overflow-wrap-anywhere" data-i18n="services.pressure.name"></h3>
|
|
</div>
|
|
<p class="text-gray-600 text-sm mb-3 break-words overflow-wrap-anywhere">
|
|
<span data-i18n="services.pressure.description"></span>
|
|
</p>
|
|
<div class="text-xs rounded px-3 py-2" class="badge-pressure" data-i18n-html="services.pressure.promise">
|
|
<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 min-w-0 max-w-full overflow-hidden" 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 break-words overflow-wrap-anywhere" data-i18n="services.metacognitive.name"></h3>
|
|
</div>
|
|
<p class="text-gray-600 text-sm mb-3 break-words overflow-wrap-anywhere">
|
|
<span data-i18n="services.metacognitive.description"></span>
|
|
</p>
|
|
<div class="text-xs rounded px-3 py-2" class="badge-metacognitive" data-i18n-html="services.metacognitive.promise">
|
|
<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 min-w-0 max-w-full overflow-hidden" 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 break-words overflow-wrap-anywhere" data-i18n="services.deliberation.name"></h3>
|
|
</div>
|
|
<p class="text-gray-600 text-sm mb-3 break-words overflow-wrap-anywhere">
|
|
<span data-i18n="services.deliberation.description"></span>
|
|
</p>
|
|
<div class="text-xs rounded px-3 py-2" class="badge-deliberation" data-i18n-html="services.deliberation.promise">
|
|
<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" data-i18n="interactive.title"></h2>
|
|
<p class="text-xl text-gray-600 max-w-3xl mx-auto mb-4"data-i18n="interactive.subtitle">
|
|
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 data-i18n="interactive.tip_label"></strong> <span data-i18n-html="interactive.tip_text"></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 w-full max-w-full overflow-x-auto">
|
|
<!-- 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">
|
|
<svg width="600" height="600" viewBox="0 0 600 600" xmlns="http://www.w3.org/2000/svg" id="interactive-arch-diagram">
|
|
<defs>
|
|
<!-- Central core gradient (shared with Passport - cyan to blue) -->
|
|
<radialGradient id="tractatusCoreInteractive">
|
|
<stop offset="0%" stop-color="#64ffda" stop-opacity="1" />
|
|
<stop offset="70%" stop-color="#448aff" stop-opacity="1" />
|
|
<stop offset="100%" stop-color="#0ea5e9" stop-opacity="1" />
|
|
</radialGradient>
|
|
|
|
<!-- Service-specific gradients (6 governance services) -->
|
|
<linearGradient id="serviceBoundaryInt" x1="0%" y1="0%" x2="100%" y2="100%">
|
|
<stop offset="0%" stop-color="#10b981" stop-opacity="1" />
|
|
<stop offset="100%" stop-color="#059669" stop-opacity="1" />
|
|
</linearGradient>
|
|
|
|
<linearGradient id="serviceInstructionInt" x1="0%" y1="0%" x2="100%" y2="100%">
|
|
<stop offset="0%" stop-color="#6366f1" stop-opacity="1" />
|
|
<stop offset="100%" stop-color="#4f46e5" stop-opacity="1" />
|
|
</linearGradient>
|
|
|
|
<linearGradient id="serviceValidatorInt" x1="0%" y1="0%" x2="100%" y2="100%">
|
|
<stop offset="0%" stop-color="#8b5cf6" stop-opacity="1" />
|
|
<stop offset="100%" stop-color="#7c3aed" stop-opacity="1" />
|
|
</linearGradient>
|
|
|
|
<linearGradient id="servicePressureInt" x1="0%" y1="0%" x2="100%" y2="100%">
|
|
<stop offset="0%" stop-color="#f59e0b" stop-opacity="1" />
|
|
<stop offset="100%" stop-color="#d97706" stop-opacity="1" />
|
|
</linearGradient>
|
|
|
|
<linearGradient id="serviceMetacognitiveInt" x1="0%" y1="0%" x2="100%" y2="100%">
|
|
<stop offset="0%" stop-color="#ec4899" stop-opacity="1" />
|
|
<stop offset="100%" stop-color="#db2777" stop-opacity="1" />
|
|
</linearGradient>
|
|
|
|
<linearGradient id="serviceDeliberationInt" x1="0%" y1="0%" x2="100%" y2="100%">
|
|
<stop offset="0%" stop-color="#14b8a6" stop-opacity="1" />
|
|
<stop offset="100%" stop-color="#0d9488" stop-opacity="1" />
|
|
</linearGradient>
|
|
|
|
<filter id="dropShadowInt">
|
|
<feDropShadow dx="0" dy="4" stdDeviation="6" flood-opacity="0.3"/>
|
|
</filter>
|
|
|
|
<filter id="glow">
|
|
<feGaussianBlur stdDeviation="4" result="coloredBlur"/>
|
|
<feMerge>
|
|
<feMergeNode in="coloredBlur"/>
|
|
<feMergeNode in="SourceGraphic"/>
|
|
</feMerge>
|
|
</filter>
|
|
</defs>
|
|
|
|
<!-- Background -->
|
|
<rect width="600" height="600" fill="#f9fafb"/>
|
|
|
|
<!-- Orbital rings (subtle, static in interactive version) -->
|
|
<circle cx="300" cy="300" r="255" stroke="#64ffda" stroke-width="1" opacity="0.15" fill="none"/>
|
|
<circle cx="300" cy="300" r="210" stroke="#64ffda" stroke-width="1" opacity="0.25" fill="none"/>
|
|
<circle cx="300" cy="300" r="165" stroke="#64ffda" stroke-width="1" opacity="0.35" fill="none"/>
|
|
|
|
<!-- Connection lines (will be made interactive) -->
|
|
<g id="connection-lines">
|
|
<line id="conn-boundary" x1="300" y1="300" x2="300" y2="105" stroke="#10b981" stroke-width="3" opacity="0.3" class="connection-line"/>
|
|
<line id="conn-instruction" x1="300" y1="300" x2="468" y2="202.5" stroke="#6366f1" stroke-width="3" opacity="0.3" class="connection-line"/>
|
|
<line id="conn-validator" x1="300" y1="300" x2="468" y2="397.5" stroke="#8b5cf6" stroke-width="3" opacity="0.3" class="connection-line"/>
|
|
<line id="conn-pressure" x1="300" y1="300" x2="300" y2="495" stroke="#f59e0b" stroke-width="3" opacity="0.3" class="connection-line"/>
|
|
<line id="conn-metacognitive" x1="300" y1="300" x2="132" y2="397.5" stroke="#ec4899" stroke-width="3" opacity="0.3" class="connection-line"/>
|
|
<line id="conn-deliberation" x1="300" y1="300" x2="132" y2="202.5" stroke="#14b8a6" stroke-width="3" opacity="0.3" class="connection-line"/>
|
|
</g>
|
|
|
|
<!-- Service nodes (clickable) -->
|
|
<g id="service-nodes">
|
|
<!-- 1. BoundaryEnforcer (top) - Green -->
|
|
<g id="node-boundary" class="service-node" data-service="boundary" style="cursor: pointer;">
|
|
<circle cx="300" cy="105" r="45" fill="url(#serviceBoundaryInt)" filter="url(#dropShadowInt)" opacity="0.95"/>
|
|
<text x="300" y="115" text-anchor="middle" font-family="Arial, sans-serif" font-size="32" font-weight="bold" fill="white">B</text>
|
|
<title>BoundaryEnforcer - Click for details</title>
|
|
</g>
|
|
|
|
<!-- 2. InstructionPersistenceClassifier (top-right) - Indigo -->
|
|
<g id="node-instruction" class="service-node" data-service="instruction" style="cursor: pointer;">
|
|
<circle cx="468" cy="202.5" r="45" fill="url(#serviceInstructionInt)" filter="url(#dropShadowInt)" opacity="0.95"/>
|
|
<text x="468" y="212.5" text-anchor="middle" font-family="Arial, sans-serif" font-size="32" font-weight="bold" fill="white">I</text>
|
|
<title>InstructionPersistenceClassifier - Click for details</title>
|
|
</g>
|
|
|
|
<!-- 3. CrossReferenceValidator (bottom-right) - Purple -->
|
|
<g id="node-validator" class="service-node" data-service="validator" style="cursor: pointer;">
|
|
<circle cx="468" cy="397.5" r="45" fill="url(#serviceValidatorInt)" filter="url(#dropShadowInt)" opacity="0.95"/>
|
|
<text x="468" y="407.5" text-anchor="middle" font-family="Arial, sans-serif" font-size="32" font-weight="bold" fill="white">V</text>
|
|
<title>CrossReferenceValidator - Click for details</title>
|
|
</g>
|
|
|
|
<!-- 4. ContextPressureMonitor (bottom) - Amber -->
|
|
<g id="node-pressure" class="service-node" data-service="pressure" style="cursor: pointer;">
|
|
<circle cx="300" cy="495" r="45" fill="url(#servicePressureInt)" filter="url(#dropShadowInt)" opacity="0.95"/>
|
|
<text x="300" y="505" text-anchor="middle" font-family="Arial, sans-serif" font-size="32" font-weight="bold" fill="white">P</text>
|
|
<title>ContextPressureMonitor - Click for details</title>
|
|
</g>
|
|
|
|
<!-- 5. MetacognitiveVerifier (bottom-left) - Rose -->
|
|
<g id="node-metacognitive" class="service-node" data-service="metacognitive" style="cursor: pointer;">
|
|
<circle cx="132" cy="397.5" r="45" fill="url(#serviceMetacognitiveInt)" filter="url(#dropShadowInt)" opacity="0.95"/>
|
|
<text x="132" y="407.5" text-anchor="middle" font-family="Arial, sans-serif" font-size="32" font-weight="bold" fill="white">M</text>
|
|
<title>MetacognitiveVerifier - Click for details</title>
|
|
</g>
|
|
|
|
<!-- 6. PluralisticDeliberationOrchestrator (top-left) - Teal -->
|
|
<g id="node-deliberation" class="service-node" data-service="deliberation" style="cursor: pointer;">
|
|
<circle cx="132" cy="202.5" r="45" fill="url(#serviceDeliberationInt)" filter="url(#dropShadowInt)" opacity="0.95"/>
|
|
<text x="132" y="212.5" text-anchor="middle" font-family="Arial, sans-serif" font-size="32" font-weight="bold" fill="white">D</text>
|
|
<title>PluralisticDeliberationOrchestrator - Click for details</title>
|
|
</g>
|
|
</g>
|
|
|
|
<!-- Central core (clickable) -->
|
|
<g id="central-core" class="service-node" data-service="overview" style="cursor: pointer;">
|
|
<circle cx="300" cy="300" r="85" fill="url(#tractatusCoreInteractive)" filter="url(#dropShadowInt)"/>
|
|
<circle cx="300" cy="300" r="68" fill="rgba(0,0,0,0.25)"/>
|
|
<text x="300" y="320" text-anchor="middle" font-family="Arial, sans-serif" font-size="64" font-weight="bold" fill="white" opacity="0.95">T</text>
|
|
<text x="300" y="345" text-anchor="middle" font-family="Arial, sans-serif" font-size="14" fill="white" opacity="0.8">Tractatus</text>
|
|
<title>Tractatus Core - Click to see how all services work together</title>
|
|
</g>
|
|
|
|
<style>
|
|
.service-node:hover circle {
|
|
filter: url(#dropShadowInt) url(#glow);
|
|
opacity: 1;
|
|
}
|
|
|
|
.service-node.active circle {
|
|
stroke: white;
|
|
stroke-width: 4;
|
|
filter: url(#dropShadowInt) url(#glow);
|
|
}
|
|
|
|
.connection-line {
|
|
transition: opacity 0.3s ease, stroke-width 0.3s ease;
|
|
}
|
|
|
|
.connection-line.active {
|
|
opacity: 0.8;
|
|
stroke-width: 5;
|
|
}
|
|
</style>
|
|
</svg>
|
|
</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" data-i18n="interactive.panel_default_title"></h3>
|
|
<p class="text-sm text-gray-500 max-w-md" data-i18n="interactive.panel_default_text"></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" data-i18n="data_viz.heading"></h2>
|
|
<p class="text-xl text-gray-600 mb-12 text-center max-w-3xl mx-auto" data-i18n="data_viz.subtitle">
|
|
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">
|
|
<div id="pressure-chart"></div>
|
|
</div>
|
|
|
|
<!-- Framework Activity Timeline -->
|
|
<div class="bg-gray-50 rounded-xl shadow-lg p-6 border border-gray-200">
|
|
<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" data-i18n="production.heading"></h2>
|
|
<p class="text-xl text-gray-600 mb-8 text-center max-w-3xl mx-auto">
|
|
<span data-i18n-html="production.subtitle">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" data-i18n="production.implementation_title"></h3>
|
|
<p class="text-gray-700 mb-4" data-i18n-html="production.implementation_intro"></p>
|
|
<p class="text-gray-700 mb-3 text-sm italic" data-i18n="production.implementation_results_intro"></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 data-i18n-html="production.result1"></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 data-i18n-html="production.result2"></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 data-i18n-html="production.result3"></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 data-i18n-html="production.result4"></span>
|
|
</li>
|
|
</ul>
|
|
<p class="text-gray-600 text-xs mt-3 italic" data-i18n="production.disclaimer"></p>
|
|
<div class="mt-6">
|
|
<a href="/images/architecture-diagram.svg" class="inline-block text-blue-600 hover:text-blue-700 font-medium" data-i18n="production.diagram_link"></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" data-i18n="production.testing_title"></h4>
|
|
<p class="text-gray-700 text-sm mb-3">
|
|
<span data-i18n-html="production.testing_text1"></span>
|
|
</p>
|
|
<p class="text-gray-700 text-sm">
|
|
<span data-i18n-html="production.testing_text2"></span>
|
|
</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" data-i18n="limitations.heading"></h2>
|
|
|
|
<div class="space-y-4 text-amber-800">
|
|
<p class="text-lg" data-i18n-html="limitations.intro"></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" data-i18n="limitations.quote"></p>
|
|
<p class="text-gray-600 text-sm" data-i18n="limitations.quote_attribution"></p>
|
|
</div>
|
|
|
|
<h3 class="text-xl font-bold text-amber-900 mt-6 mb-3" data-i18n="limitations.known_heading"></h3>
|
|
<ul class="space-y-2 ml-6">
|
|
<li class="flex items-start">
|
|
<span class="mr-2">•</span>
|
|
<span data-i18n-html="limitations.limitation1"></span>
|
|
</li>
|
|
<li class="flex items-start">
|
|
<span class="mr-2">•</span>
|
|
<span data-i18n-html="limitations.limitation2"></span>
|
|
</li>
|
|
<li class="flex items-start">
|
|
<span class="mr-2">•</span>
|
|
<span data-i18n-html="limitations.limitation3"></span>
|
|
</li>
|
|
<li class="flex items-start">
|
|
<span class="mr-2">•</span>
|
|
<span data-i18n-html="limitations.limitation4"></span>
|
|
</li>
|
|
<li class="flex items-start">
|
|
<span class="mr-2">•</span>
|
|
<span data-i18n-html="limitations.limitation5"></span>
|
|
</li>
|
|
</ul>
|
|
|
|
<h3 class="text-xl font-bold text-amber-900 mt-6 mb-3" data-i18n="limitations.needs_heading"></h3>
|
|
<ul class="space-y-2 ml-6">
|
|
<li class="flex items-start">
|
|
<span class="mr-2">🔬</span>
|
|
<span data-i18n="limitations.need1"></span>
|
|
</li>
|
|
<li class="flex items-start">
|
|
<span class="mr-2">🔴</span>
|
|
<span data-i18n="limitations.need2"></span>
|
|
</li>
|
|
<li class="flex items-start">
|
|
<span class="mr-2">🏢</span>
|
|
<span data-i18n="limitations.need3"></span>
|
|
</li>
|
|
<li class="flex items-start">
|
|
<span class="mr-2">🤝</span>
|
|
<span data-i18n="limitations.need4"></span>
|
|
</li>
|
|
<li class="flex items-start">
|
|
<span class="mr-2">📊</span>
|
|
<span data-i18n="limitations.need5"></span>
|
|
<p class="text-lg mt-6 font-semibold" data-i18n="limitations.conclusion"></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" data-i18n="cta.heading"></h2>
|
|
<p class="text-xl mb-8 opacity-90 max-w-3xl mx-auto" data-i18n-html="cta.subtitle"></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" data-i18n="cta.btn_docs"></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" data-i18n="cta.btn_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" data-i18n="cta.btn_implementation"></a>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
</main>
|
|
|
|
<!-- Footer -->
|
|
<!-- Internationalization -->
|
|
<script src="/js/i18n-simple.js?v=0.1.4.1761439039276" defer></script>
|
|
<script src="/js/components/language-selector.js?v=0.1.0.1761283486841" defer></script>
|
|
|
|
<!-- Scroll Animations (Phase 3) -->
|
|
<script src="/js/scroll-animations.js?v=0.1.0.1761283486841"></script>
|
|
<!-- Page Transitions (Phase 3) -->
|
|
<script src="/js/page-transitions.js?v=0.1.0.1761283486841"></script>
|
|
|
|
|
|
<!-- Interactive Architecture Diagram (Phase 3) -->
|
|
<script src="/js/components/interactive-diagram.js?v=0.1.3.1761438894566" defer></script>
|
|
|
|
<!-- Data Visualizations (Phase 3) -->
|
|
<script src="/js/components/pressure-chart.js?v=0.1.0.1761283486841"></script>
|
|
<script src="/js/components/activity-timeline.js?v=0.1.0.1761283486841"></script>
|
|
|
|
<!-- Footer Component -->
|
|
<script src="/js/components/footer.js?v=0.1.0.1761283486841"></script>
|
|
|
|
</body>
|
|
</html>
|