tractatus/public/implementer.html
TheFlow df8c6ccb03 fix: Remove absolute assurance language per inst_017 across codebase
Replace "ensures", "guarantee", "foolproof", "world-class" and similar
absolute terms with evidence-based language throughout public pages, JS
components, and FAQ content. Changes apply inst_017 (no absolute
assurance terms) consistently.

Replacements:
- "ensures X" → "validates X", "so that X", "supports X", "maintains X"
- "guarantee" → removed or rephrased with qualified language
- "foolproof" → "infallible"
- "architecturally impossible" → "architecture prevents without
  explicit override flags"

Preserved: published research papers (architectural-alignment*.html),
EU AI Act quotes, Te Tiriti treaty language, and FAQ meta-commentary
that deliberately critiques this language (lines 2842-2896).

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
2026-02-07 14:44:45 +13:00

1715 lines
92 KiB
HTML

<!DOCTYPE html>
<html lang="en" data-page="implementer">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Framework Implementation Guide | Tractatus</title>
<meta name="description" content="Technical documentation for integrating Tractatus framework: architecture, API reference, and code examples from production implementation.">
<!-- Open Graph / Facebook -->
<meta property="og:type" content="website">
<meta property="og:url" content="https://agenticgovernance.digital/implementer.html">
<meta property="og:title" content="For Implementers | Tractatus Framework">
<meta property="og:description" content="Implementation guide for integrating Tractatus governance constraints into AI agent deployments.">
<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/implementer.html">
<meta name="twitter:title" content="For Implementers | Tractatus Framework">
<meta name="twitter:description" content="Implementation guide for integrating Tractatus governance constraints into AI agent deployments.">
<meta name="twitter:image" content="https://agenticgovernance.digital/images/social-preview.png">
<link rel="manifest" href="/manifest.json">
<meta name="theme-color" content="#3b82f6">
<link rel="icon" type="image/svg+xml" href="/favicon-new.svg">
<link rel="stylesheet" href="/css/fonts.css?v=0.1.2.1769107445437">
<link rel="stylesheet" href="/css/tailwind.css?v=0.1.2.1769107445437">
<link rel="stylesheet" href="/css/tractatus-theme.min.css?v=0.1.2.1769107445437">
<style>
.skip-link { position: absolute; left: -9999px; top: 0; }
.skip-link:focus { left: 0; z-index: 100; background: white; padding: 1rem; border: 2px solid #3b82f6; }
a:focus, button: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; }
/* Mobile code block optimizations */
pre {
-webkit-overflow-scrolling: touch;
max-width: 100%;
}
pre code {
display: block;
white-space: pre;
word-wrap: normal;
}
@media (max-width: 640px) {
pre { font-size: 11px; }
body { font-size: 16px; } /* Prevent iOS zoom on input focus */
}
/* Diagram sizing - responsive */
.diagram-img {
max-width: 100%;
width: 100%;
height: auto;
display: block;
}
/* Diagram container with horizontal scroll for small screens */
.diagram-container {
overflow-x: auto;
border-radius: 0.5rem;
}
</style>
<!-- Auto-reload on service worker update -->
</head>
<body class="bg-gray-50">
<a href="#main-content" class="skip-link">Skip to main content</a>
<script src="/js/components/navbar.js?v=0.1.2.1769107445437"></script>
<!-- Breadcrumb -->
<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 text-tractatus-link" data-i18n="ui.breadcrumb_home">Home</a></li>
<li class="text-gray-400">/</li>
<li class="text-gray-900 font-medium" aria-current="page" data-i18n="ui.breadcrumb_implementer">Implementation Guide</li>
</ol>
</div>
</nav>
<!-- Hero -->
<div class="bg-gradient-to-br from-blue-50 to-indigo-50 py-16">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="text-center">
<h1 class="text-4xl sm:text-5xl font-bold text-gray-900 mb-6" data-i18n="hero.title">
External Governance Services for AI Systems
</h1>
<p class="text-lg sm:text-xl text-gray-600 max-w-3xl mx-auto mb-8" data-i18n="hero.subtitle">
Six architectural services addressing pattern override and decision traceability in agentic systems. Development framework for instruction persistence, boundary enforcement, and audit logging.
</p>
<!-- Value Props Grid (Mobile-Friendly Cards) -->
<div class="grid grid-cols-1 md:grid-cols-3 gap-4 max-w-4xl mx-auto mt-8">
<div class="bg-white rounded-lg p-4 shadow-sm">
<div class="text-2xl mb-2" data-i18n="hero.value_prop_1_icon">🏗️</div>
<h3 class="font-semibold text-gray-900 mb-1" data-i18n="hero.value_prop_1_title">Architectural Separation</h3>
<p class="text-sm text-gray-600" data-i18n="hero.value_prop_1_desc">Governance runs external to AI model</p>
</div>
<div class="bg-white rounded-lg p-4 shadow-sm">
<div class="text-2xl mb-2" data-i18n="hero.value_prop_2_icon">💾</div>
<h3 class="font-semibold text-gray-900 mb-1" data-i18n="hero.value_prop_2_title">Instruction Persistence</h3>
<p class="text-sm text-gray-600" data-i18n="hero.value_prop_2_desc">Validates instructions across context</p>
</div>
<div class="bg-white rounded-lg p-4 shadow-sm">
<div class="text-2xl mb-2" data-i18n="hero.value_prop_3_icon">📋</div>
<h3 class="font-semibold text-gray-900 mb-1" data-i18n="hero.value_prop_3_title">Audit Trail by Design</h3>
<p class="text-sm text-gray-600" data-i18n="hero.value_prop_3_desc">MongoDB logs with service attribution</p>
</div>
</div>
</div>
</div>
</div>
<!-- Quick Links -->
<div class="bg-white border-b border-gray-200">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-4">
<nav class="flex justify-center flex-wrap gap-4 sm:gap-8" data-i18n-aria-label="nav.quick_links_label" aria-label="Page sections">
<a href="#how-it-works" class="text-blue-600 hover:text-blue-800 font-medium px-2 py-2 min-h-[44px] flex items-center" data-i18n="nav.how_it_works">How It Works</a>
<a href="#architecture" class="text-blue-600 hover:text-blue-800 font-medium px-2 py-2 min-h-[44px] flex items-center" data-i18n="nav.architecture">Architecture</a>
<a href="#hooks" class="text-blue-600 hover:text-blue-800 font-medium px-2 py-2 min-h-[44px] flex items-center" data-i18n="nav.hooks">Hook Architecture</a>
<a href="#deployment" class="text-blue-600 hover:text-blue-800 font-medium px-2 py-2 min-h-[44px] flex items-center" data-i18n="nav.deployment">Deployment</a>
<a href="#services" class="text-blue-600 hover:text-blue-800 font-medium px-2 py-2 min-h-[44px] flex items-center" data-i18n="nav.services">Services</a>
<a href="#api" class="text-blue-600 hover:text-blue-800 font-medium px-2 py-2 min-h-[44px] flex items-center" data-i18n="nav.api">API Reference</a>
<a href="#patterns" class="text-blue-600 hover:text-blue-800 font-medium px-2 py-2 min-h-[44px] flex items-center" data-i18n="nav.patterns">Integration Patterns</a>
<a href="#agent-lightning" class="text-purple-600 hover:text-purple-800 font-medium px-2 py-2 min-h-[44px] flex items-center">⚡ Agent Lightning</a>
<a href="#roadmap" class="text-blue-600 hover:text-blue-800 font-medium px-2 py-2 min-h-[44px] flex items-center" data-i18n="nav.roadmap">Roadmap</a>
</nav>
</div>
</div>
<!-- Main Content -->
<main id="main-content">
<!-- How It Works -->
<div id="how-it-works" class="bg-white py-16">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<h2 class="text-3xl font-bold text-gray-900 mb-4" data-i18n="how_it_works.heading">How It Works</h2>
<!-- Problem Context -->
<div class="bg-blue-50 border-l-4 border-blue-500 rounded-r-lg p-6 mb-8">
<h3 class="font-semibold text-gray-900 mb-2" data-i18n="how_it_works.problem_title">Pattern Override Challenge</h3>
<p class="text-gray-700 mb-3" data-i18n="how_it_works.problem_desc">
AI systems operating across extended interactions may not maintain instruction consistency as context evolves. Instructions given early can be deprioritized or reinterpreted.
</p>
<h3 class="font-semibold text-gray-900 mb-2" data-i18n="how_it_works.approach_title">External Architecture Approach</h3>
<p class="text-gray-700" data-i18n="how_it_works.approach_desc">
Tractatus services run external to the AI model, providing boundary validation, instruction classification, and audit logging through architectural separation.
</p>
</div>
<!-- Request Flow Diagram -->
<div class="bg-white rounded-xl shadow-lg p-6 sm:p-8">
<h3 class="text-xl font-bold text-gray-900 mb-4" data-i18n="how_it_works.diagram_title">Request Flow with Governance</h3>
<p class="text-sm text-gray-600 mb-4" data-i18n="how_it_works.diagram_desc">
Example: AI decision flow with boundary enforcement—from user request through governance validation to human approval.
</p>
<div class="bg-gray-50 rounded-lg p-4 sm:p-6 diagram-container">
<img src="/docs/diagrams/request-flow-sequence.svg"
data-i18n-alt="how_it_works.diagram_alt"
alt="Request Flow Sequence: How AI decisions are governed"
class="diagram-img"
loading="lazy">
</div>
<div class="mt-6">
<a href="/docs/diagrams/request-flow-sequence.svg" download
class="inline-flex items-center bg-blue-600 text-white px-4 py-2 rounded-lg text-sm font-semibold hover:bg-blue-700 transition min-h-[44px]">
<svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 10v6m0 0l-3-3m3 3l3-3m2 8H7a2 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>
<span data-i18n="how_it_works.download_svg">Download SVG</span>
</a>
</div>
</div>
</div>
</div>
<!-- Framework Architecture -->
<div id="architecture" class="bg-gray-50 py-16">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<h2 class="text-3xl font-bold text-gray-900 mb-4" data-i18n="architecture.heading">System Architecture</h2>
<!-- Six Core Services Context -->
<div class="bg-white rounded-lg p-6 mb-8">
<h3 class="font-semibold text-gray-900 mb-3" data-i18n="architecture.six_services_title">Six Core Services</h3>
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-3 text-sm">
<div class="flex items-start">
<span class="text-blue-600 mr-2"></span>
<span data-i18n="architecture.service_1">BoundaryEnforcer (Tractatus 12.1-12.7)</span>
</div>
<div class="flex items-start">
<span class="text-blue-600 mr-2"></span>
<span data-i18n="architecture.service_2">InstructionPersistenceClassifier</span>
</div>
<div class="flex items-start">
<span class="text-blue-600 mr-2"></span>
<span data-i18n="architecture.service_3">CrossReferenceValidator</span>
</div>
<div class="flex items-start">
<span class="text-blue-600 mr-2"></span>
<span data-i18n="architecture.service_4">ContextPressureMonitor</span>
</div>
<div class="flex items-start">
<span class="text-blue-600 mr-2"></span>
<span data-i18n="architecture.service_5">MetacognitiveVerifier</span>
</div>
<div class="flex items-start">
<span class="text-blue-600 mr-2"></span>
<span data-i18n="architecture.service_6">PluralisticDeliberationOrchestrator</span>
</div>
</div>
</div>
<!-- Main Flow Diagram -->
<div class="bg-white rounded-xl shadow-lg p-8 mb-8">
<h3 class="text-xl font-bold text-gray-900 mb-4" data-i18n="architecture.main_flow_title">Service Interaction Flow</h3>
<div class="bg-gray-50 rounded-lg p-6">
<img src="/docs/diagrams/architecture-main-flow.svg"
data-i18n-alt="architecture.main_flow_alt"
alt="Tractatus Framework Architecture: Shows how 6 governance services interact in sequence"
class="diagram-img"
loading="lazy">
</div>
<div class="mt-6 flex gap-4">
<a href="/docs/diagrams/architecture-main-flow.svg" download
class="inline-flex items-center bg-blue-600 text-white px-4 py-2 rounded-lg text-sm font-semibold hover:bg-blue-700 transition min-h-[44px]"
data-i18n-aria-label="architecture.download_svg_aria"
aria-label="Download architecture main flow diagram as SVG">
<svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 10v6m0 0l-3-3m3 3l3-3m2 8H7a2 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>
<span data-i18n="architecture.download_svg">Download SVG</span>
</a>
</div>
</div>
<!-- Trigger Decision Tree -->
<div class="bg-white rounded-xl shadow-lg p-8 mb-8">
<h3 class="text-xl font-bold text-gray-900 mb-4" data-i18n="architecture.trigger_tree_title">Service Trigger Conditions</h3>
<div class="bg-gray-50 rounded-lg p-6">
<img src="/docs/diagrams/trigger-decision-tree.svg"
data-i18n-alt="architecture.trigger_tree_alt"
alt="Service Trigger Decision Tree: When each framework service activates"
class="diagram-img"
loading="lazy">
</div>
<div class="mt-6 flex gap-4">
<a href="/docs/diagrams/trigger-decision-tree.svg" download
class="inline-flex items-center bg-blue-600 text-white px-4 py-2 rounded-lg text-sm font-semibold hover:bg-blue-700 transition min-h-[44px]"
data-i18n-aria-label="architecture.download_trigger_svg_aria"
aria-label="Download service trigger decision tree as SVG">
<svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 10v6m0 0l-3-3m3 3l3-3m2 8H7a2 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>
<span data-i18n="architecture.download_svg">Download SVG</span>
</a>
</div>
</div>
<!-- System Architecture -->
<div class="bg-white rounded-xl shadow-lg p-8 mb-8">
<h3 class="text-xl font-bold text-gray-900 mb-4" data-i18n="architecture.system_arch_title">System Architecture</h3>
<p class="text-sm text-gray-600 mb-4" data-i18n="architecture.system_arch_desc">High-level overview showing how the 6 governance services integrate with your application and data layer.</p>
<div class="bg-gray-50 rounded-lg p-6">
<picture>
<source media="(max-width: 768px)" srcset="/docs/diagrams/system-architecture-mobile.svg">
<source media="(min-width: 769px)" srcset="/docs/diagrams/system-architecture-desktop.svg">
<img src="/docs/diagrams/system-architecture.svg"
data-i18n-alt="architecture.system_arch_alt"
alt="Tractatus System Architecture: Component interaction and data flow"
class="diagram-img"
loading="lazy">
</picture>
</div>
<div class="mt-6 flex gap-4">
<a href="/docs/diagrams/system-architecture-desktop.svg" download
class="inline-flex items-center bg-blue-600 text-white px-4 py-2 rounded-lg text-sm font-semibold hover:bg-blue-700 transition min-h-[44px]"
data-i18n-aria-label="architecture.download_system_svg_aria"
aria-label="Download system architecture diagram as SVG">
<svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 10v6m0 0l-3-3m3 3l3-3m2 8H7a2 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>
<span data-i18n="architecture.download_svg">Download SVG</span>
</a>
</div>
</div>
</div>
</div>
<!-- Hook Architecture: Architectural Enforcement -->
<div id="hooks" class="bg-gradient-to-br from-amber-50 to-orange-50 py-16">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="text-center mb-8">
<span class="inline-block bg-amber-600 text-white px-4 py-1 rounded-full text-sm font-semibold mb-4" data-i18n="hooks.badge">ARCHITECTURAL ENFORCEMENT</span>
<h2 class="text-3xl font-bold text-gray-900 mb-4" data-i18n="hooks.heading">Hook Architecture: The Credibility Layer</h2>
<p class="text-lg text-gray-700 max-w-3xl mx-auto" data-i18n="hooks.subtitle">
Tractatus governance is not voluntary compliance. PreToolUse hooks enforce boundaries <strong>before</strong> AI actions execute,
making circumvention architecturally impossible.
</p>
</div>
<!-- Problem Context -->
<div class="bg-red-50 border-l-4 border-red-500 rounded-r-lg p-6 mb-8">
<h3 class="font-semibold text-gray-900 mb-2" data-i18n="hooks.problem_title">The Voluntary Compliance Problem</h3>
<p class="text-gray-700 mb-3" data-i18n="hooks.problem_desc_1">
Traditional AI safety relies on the AI system "choosing" to follow rules embedded in training data or system prompts.
These approaches assume the AI will maintain alignment regardless of context pressure or capability.
</p>
<p class="text-gray-700 font-medium" data-i18n="hooks.problem_desc_2">
Tractatus addresses this through <strong>architectural enforcement</strong>: governance runs in a separate process
that the AI cannot access, modify, or bypass.
</p>
</div>
<!-- Hook Flow Diagram -->
<div class="bg-white rounded-xl shadow-lg p-6 sm:p-8 mb-8">
<h3 class="text-xl font-bold text-gray-900 mb-4" data-i18n="hooks.flow_title">PreToolUse Hook Execution Flow</h3>
<p class="text-sm text-gray-600 mb-6" data-i18n="hooks.flow_desc">
Before any file edit, write, or bash command executes, the hook intercepts the action and runs validation checks.
Only if ALL checks pass (exit code 0) does the AI action proceed.
</p>
<div class="bg-gray-50 rounded-lg p-4 sm:p-6 diagram-container">
<img src="/docs/diagrams/hook-architecture.svg"
data-i18n-alt="hooks.flow_alt"
alt="Hook Architecture: PreToolUse intercept flow showing validation and hard blocks"
class="diagram-img"
loading="lazy">
</div>
<div class="mt-6 flex gap-4">
<a href="/docs/diagrams/hook-architecture.svg" download
class="inline-flex items-center bg-blue-600 text-white px-4 py-2 rounded-lg text-sm font-semibold hover:bg-blue-700 transition min-h-[44px]">
<svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 10v6m0 0l-3-3m3 3l3-3m2 8H7a2 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>
<span data-i18n="how_it_works.download_svg">Download SVG</span>
</a>
</div>
</div>
<!-- Real Examples -->
<div class="bg-white rounded-xl shadow-lg p-6 sm:p-8 mb-8">
<h3 class="text-xl font-bold text-gray-900 mb-4" data-i18n="hooks.examples_title">Real Enforcement Examples</h3>
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
<!-- Example 1: GitHub URL Protection -->
<div class="border-l-4 border-red-500 bg-red-50 p-4 rounded-r-lg">
<h4 class="font-semibold text-gray-900 mb-2"><span data-i18n="hooks.example_1_icon">🚫</span> <span data-i18n="hooks.example_1_title">GitHub URL Protection (inst_084)</span></h4>
<p class="text-sm text-gray-700 mb-3" data-i18n="hooks.example_1_desc">
AI attempted to change GitHub repository URL from <code class="bg-white px-1 rounded">tractatus-framework</code> (public)
to <code class="bg-white px-1 rounded">tractatus</code> (private).
</p>
<div class="bg-white rounded p-3 text-xs font-mono mb-2">
<span class="text-red-600 font-bold" data-i18n="hooks.example_1_blocked">BLOCKED:</span> <span data-i18n="hooks.example_1_reason">Repository URL modification detected</span><br/>
<span data-i18n="hooks.example_1_detail">Reason: Would expose private repo structure</span>
</div>
<p class="text-xs text-gray-600" data-i18n="hooks.example_1_hook">
Hook: validate-file-edit.js line 448-505
</p>
</div>
<!-- Example 2: CSP Compliance -->
<div class="border-l-4 border-red-500 bg-red-50 p-4 rounded-r-lg">
<h4 class="font-semibold text-gray-900 mb-2"><span data-i18n="hooks.example_2_icon">🚫</span> <span data-i18n="hooks.example_2_title">CSP Violation (inst_008)</span></h4>
<p class="text-sm text-gray-700 mb-3" data-i18n="hooks.example_2_desc">
AI attempted to add inline style attribute to HTML element.
</p>
<div class="bg-white rounded p-3 text-xs font-mono mb-2">
<span class="text-red-600 font-bold" data-i18n="hooks.example_2_blocked">BLOCKED:</span> <span data-i18n="hooks.example_2_reason">Inline style detected</span><br/>
<span data-i18n="hooks.example_2_pattern">Pattern:</span> <code>style="margin: 0 auto"</code>
</div>
<p class="text-xs text-gray-600" data-i18n="hooks.example_2_hook">
Hook: validate-file-write.js line 68-149
</p>
</div>
<!-- Example 3: instruction-history.json Protection -->
<div class="border-l-4 border-red-500 bg-red-50 p-4 rounded-r-lg">
<h4 class="font-semibold text-gray-900 mb-2"><span data-i18n="hooks.example_3_icon">🚫</span> <span data-i18n="hooks.example_3_title">Governance File Protection (inst_027)</span></h4>
<p class="text-sm text-gray-700 mb-3" data-i18n="hooks.example_3_desc">
AI attempted direct edit of instruction-history.json.
</p>
<div class="bg-white rounded p-3 text-xs font-mono mb-2">
<span class="text-red-600 font-bold" data-i18n="hooks.example_3_blocked">BLOCKED:</span> <span data-i18n="hooks.example_3_reason">inst_027 hard block</span><br/>
<span data-i18n="hooks.example_3_use">Use: scripts/add-instruction.js instead</span>
</div>
<p class="text-xs text-gray-600" data-i18n="hooks.example_3_hook">
Hook: framework-audit-hook.js line 204-209
</p>
</div>
<!-- Example 4: Values Decision Boundary -->
<div class="border-l-4 border-green-500 bg-green-50 p-4 rounded-r-lg">
<h4 class="font-semibold text-gray-900 mb-2"><span data-i18n="hooks.example_4_icon"></span> <span data-i18n="hooks.example_4_title">Human Approval Required (BoundaryEnforcer)</span></h4>
<p class="text-sm text-gray-700 mb-3" data-i18n="hooks.example_4_desc">
AI action touches values-sensitive file (privacy policy).
</p>
<div class="bg-white rounded p-3 text-xs font-mono mb-2">
<span class="text-amber-600 font-bold" data-i18n="hooks.example_4_status">ASK HUMAN:</span> <span data-i18n="hooks.example_4_reason">Values decision detected</span><br/>
<span data-i18n="hooks.example_4_requires">Requires: Explicit human approval</span>
</div>
<p class="text-xs text-gray-600" data-i18n="hooks.example_4_hook">
Hook: validate-file-write.js line 239-262
</p>
</div>
</div>
</div>
<!-- Technical Implementation -->
<div class="bg-white rounded-xl shadow-lg p-6 sm:p-8">
<h3 class="text-xl font-bold text-gray-900 mb-4" data-i18n="hooks.tech_impl_title">Technical Implementation</h3>
<div class="space-y-6">
<!-- Process Separation -->
<div>
<h4 class="font-semibold text-gray-900 mb-2"><span data-i18n="hooks.process_sep_icon">🔒</span> <span data-i18n="hooks.process_sep_title">Process Separation</span></h4>
<p class="text-sm text-gray-700 mb-3" data-i18n="hooks.process_sep_desc">
Hooks execute in a separate Node.js process (child_process.spawn) with their own memory space.
The AI agent cannot access, modify, or terminate the validation process.
</p>
<pre class="bg-gray-900 text-gray-100 p-4 rounded-lg text-xs overflow-x-auto"><code>// .claude/hooks.json
{
"PreToolUse:Edit": {
"command": "node",
"args": ["scripts/hook-validators/validate-file-edit.js"]
},
"PreToolUse:Write": {
"command": "node",
"args": ["scripts/hook-validators/validate-file-write.js"]
}
}</code></pre>
</div>
<!-- Exit Code Enforcement -->
<div>
<h4 class="font-semibold text-gray-900 mb-2"><span data-i18n="hooks.exit_code_icon">⚙️</span> <span data-i18n="hooks.exit_code_title">Exit Code Enforcement</span></h4>
<p class="text-sm text-gray-700 mb-3" data-i18n="hooks.exit_code_desc">
Hook validators return exit codes that Claude Code's architecture enforces:
</p>
<ul class="list-disc list-inside text-sm text-gray-700 space-y-1 ml-4">
<li data-i18n="hooks.exit_code_0"><code class="bg-gray-100 px-2 py-1 rounded">0</code> = PASS → Tool executes</li>
<li data-i18n="hooks.exit_code_2"><code class="bg-gray-100 px-2 py-1 rounded">2</code> = HARD BLOCK → Tool execution halted, error shown to user</li>
</ul>
<pre class="bg-gray-900 text-gray-100 p-4 rounded-lg text-xs overflow-x-auto mt-3"><code>// validate-file-edit.js (line 373-382)
const githubUrlCheck = checkGitHubURLProtection();
if (!githubUrlCheck.passed) {
error(githubUrlCheck.reason);
console.error(githubUrlCheck.output);
logMetrics('blocked', githubUrlCheck.reason);
process.exit(2); // ← HARD BLOCK: Tool cannot execute
}</code></pre>
</div>
<!-- Audit Trail -->
<div>
<h4 class="font-semibold text-gray-900 mb-2"><span data-i18n="hooks.audit_title">Audit Trail</span></h4>
<p class="text-sm text-gray-700 mb-3" data-i18n="hooks.audit_desc">
Every hook execution is logged to <code class="bg-gray-100 px-1 rounded">.claude/metrics/hooks-metrics.json</code>
with timestamp, file, result, and reason. Blocks are separately tracked for analysis.
</p>
<pre class="bg-gray-900 text-gray-100 p-4 rounded-lg text-xs overflow-x-auto"><code>{
"hook": "validate-file-edit",
"timestamp": "2025-10-26T22:02:15.XXX",
"file": "/public/implementer.html",
"result": "blocked",
"reason": "inst_084: GitHub repository name change detected"
}</code></pre>
</div>
</div>
</div>
<!-- Why This Matters -->
<div class="mt-8 bg-blue-50 border-l-4 border-blue-500 p-6 rounded-r-lg">
<h3 class="font-semibold text-gray-900 mb-2" data-i18n="hooks.why_matters_title">Why Architectural Enforcement Matters</h3>
<p class="text-gray-700 mb-3" data-i18n="hooks.why_matters_desc">
This is the fundamental difference between Tractatus and traditional AI safety approaches:
</p>
<div class="grid grid-cols-1 md:grid-cols-2 gap-4 text-sm">
<div class="bg-white rounded p-4">
<p class="font-semibold text-red-600 mb-2" data-i18n="hooks.voluntary_title">❌ Voluntary Compliance</p>
<ul class="list-disc list-inside text-gray-700 space-y-1">
<li data-i18n="hooks.voluntary_1">AI "chooses" to follow rules</li>
<li data-i18n="hooks.voluntary_2">Can drift under context pressure</li>
<li data-i18n="hooks.voluntary_3">Pattern recognition may override instructions</li>
<li data-i18n="hooks.voluntary_4">No verification before execution</li>
</ul>
</div>
<div class="bg-white rounded p-4">
<p class="font-semibold text-green-600 mb-2" data-i18n="hooks.architectural_title">✓ Architectural Enforcement</p>
<ul class="list-disc list-inside text-gray-700 space-y-1">
<li data-i18n="hooks.architectural_1">Hook intercepts before execution</li>
<li data-i18n="hooks.architectural_2">Separate process, cannot be accessed</li>
<li data-i18n="hooks.architectural_3">Exit codes enforced by runtime</li>
<li data-i18n="hooks.architectural_4">Audit trail of all decisions</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<!-- Deployment -->
<div id="deployment" class="bg-white py-16">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<h2 class="text-3xl font-bold text-gray-900 mb-4" data-i18n="deployment.heading">Deployment Architecture</h2>
<!-- Technology Stack Context -->
<div class="bg-blue-50 rounded-lg p-6 mb-8">
<h3 class="font-semibold text-gray-900 mb-3" data-i18n="deployment.tech_stack_title">Technology Stack</h3>
<div class="grid grid-cols-1 sm:grid-cols-2 gap-4 text-sm text-gray-700">
<div>
<strong data-i18n="deployment.runtime">Runtime:</strong> <span data-i18n="deployment.runtime_value">Node.js v20+</span>
</div>
<div>
<strong data-i18n="deployment.database">Database:</strong> <span data-i18n="deployment.database_value">MongoDB 7.0+</span>
</div>
<div>
<strong data-i18n="deployment.framework">Framework:</strong> <span data-i18n="deployment.framework_value">Express.js</span>
</div>
<div>
<strong data-i18n="deployment.process">Process:</strong> <span data-i18n="deployment.process_value">Systemd (recommended)</span>
</div>
</div>
</div>
<!-- Deployment Guide Link -->
<div class="bg-white rounded-xl shadow-lg p-6 sm:p-8">
<h3 class="text-xl font-bold text-gray-900 mb-4" data-i18n="deployment.guide_title">Production Deployment</h3>
<p class="text-gray-700 mb-6" data-i18n="deployment.guide_desc">
Comprehensive deployment guide covering local development, production server configuration, Docker containerization,
cloud deployment patterns (AWS, GCP, Kubernetes), database management, monitoring, and security best practices.
</p>
<div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-6 text-sm">
<div class="bg-gray-50 rounded-lg p-4">
<h4 class="font-semibold text-gray-900 mb-2" data-i18n="deployment.covered_title">Covered in Guide:</h4>
<ul class="list-disc list-inside text-gray-700 space-y-1">
<li data-i18n="deployment.covered_1">Local development setup</li>
<li data-i18n="deployment.covered_2">Production server configuration</li>
<li data-i18n="deployment.covered_3">Docker and Docker Compose</li>
<li data-i18n="deployment.covered_4">Cloud deployment (AWS/GCP)</li>
</ul>
</div>
<div class="bg-gray-50 rounded-lg p-4">
<h4 class="font-semibold text-gray-900 mb-2" data-i18n="deployment.also_title">🔧 Also Includes:</h4>
<ul class="list-disc list-inside text-gray-700 space-y-1">
<li data-i18n="deployment.also_1">Kubernetes manifests</li>
<li data-i18n="deployment.also_2">Database backup and migration</li>
<li data-i18n="deployment.also_3">SSL/TLS configuration</li>
<li data-i18n="deployment.also_4">Monitoring and logging</li>
</ul>
</div>
</div>
<div class="flex flex-wrap gap-4">
<a href="/docs/pdfs/deployment-guide.pdf" download
class="inline-flex items-center bg-blue-600 text-white px-6 py-3 rounded-lg text-sm font-semibold hover:bg-blue-700 transition min-h-[44px]">
<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 10v6m0 0l-3-3m3 3l3-3m2 8H7a2 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>
<span data-i18n="deployment.download_guide">Download Deployment Guide (PDF)</span>
</a>
</div>
</div>
</div>
</div>
<!-- Core Services -->
<div id="services" class="bg-gray-50 py-16">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<h2 class="text-3xl font-bold text-gray-900 mb-8" data-i18n="services.heading">Core Services</h2>
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
<!-- BoundaryEnforcer -->
<div class="bg-white rounded-lg p-6 shadow-lg">
<h3 class="text-xl font-bold text-gray-900 mb-3" data-i18n="services.service_1_name">BoundaryEnforcer</h3>
<p class="text-sm text-gray-600 mb-4" data-i18n="services.service_1_desc">
Implements Tractatus 12.1-12.7: AI cannot make values decisions without human approval.
</p>
<div class="text-sm text-gray-700 mb-3">
<strong data-i18n="services.service_1_boundaries">Boundaries:</strong>
<ul class="list-disc list-inside mt-2 space-y-1">
<li data-i18n="services.service_1_boundary_1">VALUES (12.1) - Ethics, privacy, principles</li>
<li data-i18n="services.service_1_boundary_2">INNOVATION (12.2) - Architectural decisions</li>
<li data-i18n="services.service_1_boundary_3">WISDOM (12.3) - Strategic judgment</li>
<li data-i18n="services.service_1_boundary_4">PURPOSE (12.4) - Goal definition</li>
</ul>
</div>
<pre role="region" aria-label="BoundaryEnforcer example code" class="bg-gray-900 text-gray-100 p-3 rounded text-xs overflow-x-auto"><code>const { checkBoundary } = require('./services/BoundaryEnforcer')
const result = await checkBoundary(decision)
// Returns: { allowed: false, requires_human: true }</code></pre>
</div>
<!-- InstructionPersistenceClassifier -->
<div class="bg-white rounded-lg p-6 shadow-lg">
<h3 class="text-xl font-bold text-gray-900 mb-3" data-i18n="services.service_2_name">InstructionPersistenceClassifier</h3>
<p class="text-sm text-gray-600 mb-4" data-i18n="services.service_2_desc">
Classifies instructions by quadrant (STRATEGIC/OPERATIONAL/TACTICAL/SYSTEM) and persistence level (HIGH/MEDIUM/LOW).
</p>
<div class="text-sm text-gray-700 mb-3">
<strong data-i18n="services.service_2_classification">Classification:</strong>
<ul class="list-disc list-inside mt-2 space-y-1">
<li data-i18n="services.service_2_class_1">Quadrant (STRATEGIC/OPERATIONAL/TACTICAL/SYSTEM)</li>
<li data-i18n="services.service_2_class_2">Persistence (HIGH/MEDIUM/LOW)</li>
<li data-i18n="services.service_2_class_3">Temporal scope (PROJECT/SESSION/TASK)</li>
<li data-i18n="services.service_2_class_4">Explicitness score (0.0-1.0)</li>
</ul>
</div>
<pre role="region" aria-label="InstructionPersistenceClassifier example code" class="bg-gray-900 text-gray-100 p-3 rounded text-xs overflow-x-auto"><code>const { classify } = require('./services/InstructionPersistenceClassifier')
const result = await classify(instruction)
// Returns: { quadrant, persistence, temporal_scope, explicitness }</code></pre>
</div>
<!-- CrossReferenceValidator -->
<div class="bg-white rounded-lg p-6 shadow-lg">
<h3 class="text-xl font-bold text-gray-900 mb-3" data-i18n="services.service_3_name">CrossReferenceValidator</h3>
<p class="text-sm text-gray-600 mb-4" data-i18n="services.service_3_desc">
Validates AI actions against stored instructions to prevent pattern recognition overrides.
</p>
<div class="text-sm text-gray-700 mb-3">
<strong data-i18n="services.service_3_validation">Validation:</strong>
<ul class="list-disc list-inside mt-2 space-y-1">
<li data-i18n="services.service_3_val_1">Checks action against HIGH persistence instructions</li>
<li data-i18n="services.service_3_val_2">Detects conflicts (pattern vs explicit instruction)</li>
<li data-i18n="services.service_3_val_3">Provides correct parameters when rejected</li>
</ul>
</div>
<pre role="region" aria-label="CrossReferenceValidator example code" class="bg-gray-900 text-gray-100 p-3 rounded text-xs overflow-x-auto"><code>const { validate } = require('./services/CrossReferenceValidator')
const result = await validate(action, instructions)
// Returns: { status: 'REJECTED', conflicts, correct_parameters }</code></pre>
</div>
<!-- ContextPressureMonitor -->
<div class="bg-white rounded-lg p-6 shadow-lg">
<h3 class="text-xl font-bold text-gray-900 mb-3" data-i18n="services.service_4_name">ContextPressureMonitor</h3>
<p class="text-sm text-gray-600 mb-4" data-i18n="services.service_4_desc">
Monitors token usage and context pressure, triggering safety protocols at thresholds.
</p>
<div class="text-sm text-gray-700 mb-3">
<strong data-i18n="services.service_4_levels">Pressure Levels:</strong>
<ul class="list-disc list-inside mt-2 space-y-1">
<li data-i18n="services.service_4_level_1">NORMAL (0-50%) - Full operation</li>
<li data-i18n="services.service_4_level_2">ELEVATED (50-75%) - Increase verification</li>
<li data-i18n="services.service_4_level_3">HIGH (75-90%) - Reduce complexity</li>
<li data-i18n="services.service_4_level_4">CRITICAL (90%+) - Suggest handoff</li>
</ul>
</div>
<pre role="region" aria-label="ContextPressureMonitor example code" class="bg-gray-900 text-gray-100 p-3 rounded text-xs overflow-x-auto"><code>const { analyzePressure } = require('./services/ContextPressureMonitor')
const result = await analyzePressure(tokens, messages)
// Returns: { level: 'HIGH', score: 82, shouldReduce: true }</code></pre>
</div>
<!-- MetacognitiveVerifier -->
<div class="bg-white rounded-lg p-6 shadow-lg">
<h3 class="text-xl font-bold text-gray-900 mb-3" data-i18n="services.service_5_name">MetacognitiveVerifier</h3>
<p class="text-sm text-gray-600 mb-4" data-i18n="services.service_5_desc">
Verifies action reasoning and confidence, requiring confirmation for low-confidence actions.
</p>
<div class="text-sm text-gray-700 mb-3">
<strong data-i18n="services.service_5_verification">Verification:</strong>
<ul class="list-disc list-inside mt-2 space-y-1">
<li data-i18n="services.service_5_ver_1">Confidence scoring (0.0-1.0)</li>
<li data-i18n="services.service_5_ver_2">Selective mode (HIGH persistence only)</li>
<li data-i18n="services.service_5_ver_3">Requires confirmation if confidence < 0.7</li>
</ul>
</div>
<pre role="region" aria-label="MetacognitiveVerifier example code" class="bg-gray-900 text-gray-100 p-3 rounded text-xs overflow-x-auto"><code>const { verify } = require('./services/MetacognitiveVerifier')
const result = await verify(action, reasoning)
// Returns: { confidence: 0.65, requires_confirmation: true }</code></pre>
</div>
<!-- PluralisticDeliberationOrchestrator -->
<div class="bg-white rounded-lg p-6 shadow-lg">
<h3 class="text-xl font-bold text-gray-900 mb-3" data-i18n="services.service_6_name">PluralisticDeliberationOrchestrator</h3>
<p class="text-sm text-gray-600 mb-4" data-i18n="services.service_6_desc">
Manages multi-stakeholder deliberation to support value pluralism in decisions.
</p>
<div class="text-sm text-gray-700 mb-3">
<strong data-i18n="services.service_6_features">Features:</strong>
<ul class="list-disc list-inside mt-2 space-y-1">
<li data-i18n="services.service_6_feature_1">Stakeholder perspective tracking</li>
<li data-i18n="services.service_6_feature_2">Value conflict detection</li>
<li data-i18n="services.service_6_feature_3">Deliberation session management</li>
<li data-i18n="services.service_6_feature_4">Precedent storage</li>
</ul>
</div>
<pre role="region" aria-label="PluralisticDeliberationOrchestrator example code" class="bg-gray-900 text-gray-100 p-3 rounded text-xs overflow-x-auto"><code>const { orchestrate } = require('./services/PluralisticDeliberationOrchestrator')
const result = await orchestrate(decision, stakeholders)
// Returns: { decision, perspectives, conflicts_identified }</code></pre>
</div>
</div>
<!-- Source Code Reference -->
<div class="mt-8 bg-blue-50 border-l-4 border-blue-500 p-6 rounded-r-lg">
<p class="text-sm text-blue-900 font-medium mb-2" data-i18n="services.source_code_label">📁 Source Code</p>
<p class="text-sm text-blue-800" data-i18n="services.source_code_desc">
Code patterns and examples are available in the <a href="https://github.com/AgenticGovernance/tractatus-framework" class="underline font-medium hover:text-blue-900" target="_blank" rel="noopener noreferrer">GitHub repository</a>.
</p>
</div>
</div>
</div>
<!-- API Reference -->
<div id="api" class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-16">
<h2 class="text-3xl font-bold text-gray-900 mb-8" data-i18n="api.heading">API Reference</h2>
<!-- BoundaryEnforcer API -->
<div class="bg-white rounded-lg shadow-lg p-6 mb-6">
<h3 class="text-xl font-bold text-gray-900 mb-4" data-i18n="api.boundary_method">BoundaryEnforcer.checkBoundary()</h3>
<pre class="bg-gray-900 text-gray-100 p-4 rounded-lg overflow-x-auto text-sm mb-4"><code>const { checkBoundary } = require('./src/services/BoundaryEnforcer.service')
// Check if decision crosses Tractatus boundary
const decision = {
domain: 'values',
description: 'Change privacy policy to enable analytics',
context: { /* ... */ }
}
const result = await checkBoundary(decision)
// Returns:
{
allowed: false, // AI cannot proceed
requires_human: true, // Human decision required
boundary: "12.1", // Tractatus boundary violated
principle: "Values cannot be automated, only verified",
reason: "Decision involves values domain",
ai_can_provide: [ // What AI CAN do
"Analyze privacy implications",
"List alternative approaches",
"Document tradeoffs"
]
}</code></pre>
<div class="text-sm text-gray-700">
<strong data-i18n="api.boundary_keywords">Keywords detected:</strong> <span data-i18n="api.boundary_keywords_list">value, principle, ethic, moral, should, ought, right, wrong, privacy, policy, trade-off, etc.</span>
</div>
</div>
<!-- InstructionPersistenceClassifier API -->
<div class="bg-white rounded-lg shadow-lg p-6 mb-6">
<h3 class="text-xl font-bold text-gray-900 mb-4" data-i18n="api.classifier_method">InstructionPersistenceClassifier.classify()</h3>
<pre class="bg-gray-900 text-gray-100 p-4 rounded-lg overflow-x-auto text-sm mb-4"><code>const { classify } = require('./src/services/InstructionPersistenceClassifier.service')
const instruction = "Always use MongoDB on port 27017"
const result = await classify(instruction, context)
// Returns:
{
quadrant: 'SYSTEM', // Decision domain
persistence: 'HIGH', // How long to remember
temporal_scope: 'PROJECT', // Scope of applicability
verification_required: 'MANDATORY', // Verification level
explicitness: 0.85, // Confidence score
parameters: {
port: "27017",
database: "mongodb",
service: "mongodb"
}
}</code></pre>
<div class="text-sm text-gray-700">
<strong data-i18n="api.classifier_quadrants">Quadrants:</strong> <span data-i18n="api.classifier_quadrants_list">STRATEGIC, OPERATIONAL, TACTICAL, SYSTEM, STORAGE</span><br>
<strong data-i18n="api.classifier_persistence">Persistence:</strong> <span data-i18n="api.classifier_persistence_desc">HIGH (override all), MEDIUM (session-scoped), LOW (can be superseded)</span>
</div>
</div>
<!-- CrossReferenceValidator API -->
<div class="bg-white rounded-lg shadow-lg p-6 mb-6">
<h3 class="text-xl font-bold text-gray-900 mb-4" data-i18n="api.validator_method">CrossReferenceValidator.validate()</h3>
<pre class="bg-gray-900 text-gray-100 p-4 rounded-lg overflow-x-auto text-sm mb-4"><code>const { validate } = require('./src/services/CrossReferenceValidator.service')
// User instructed: "Use port 27027"
// AI attempting: port 27017 (pattern recognition)
const action = {
type: 'db_config',
parameters: { port: 27017 }
}
const instructions = await getStoredInstructions() // From MongoDB
const result = await validate(action, instructions)
// Returns (CONFLICT):
{
status: 'REJECTED',
conflicts: [
{
instruction_id: 'inst_042',
instruction: 'Use MongoDB port 27027',
persistence: 'HIGH',
conflict: 'Proposed port 27017 conflicts with instruction port 27027'
}
],
correct_parameters: {
port: 27027 // Use this instead
}
}</code></pre>
</div>
<!-- ContextPressureMonitor API -->
<div class="bg-white rounded-lg shadow-lg p-6">
<h3 class="text-xl font-bold text-gray-900 mb-4" data-i18n="api.monitor_method">ContextPressureMonitor.analyzePressure()</h3>
<pre class="bg-gray-900 text-gray-100 p-4 rounded-lg overflow-x-auto text-sm mb-4"><code>const { analyzePressure } = require('./src/services/ContextPressureMonitor.service')
const pressure = await analyzePressure({
currentTokens: 150000,
maxTokens: 200000,
messageCount: 45,
errorCount: 2
})
// Returns:
{
level: 'HIGH', // NORMAL|ELEVATED|HIGH|CRITICAL
score: 75, // 0-100 percentage
shouldReduce: true, // Reduce complexity
recommendations: [
'Consider handoff to new session',
'Reduce verbose explanations',
'Increase verification for remaining actions'
],
thresholds: {
tokens: 75, // 75% of max
messages: 64, // 45/70 messages
errors: 40 // 2 errors
}
}</code></pre>
</div>
</div>
<!-- Code Examples -->
<div id="examples" class="bg-gray-50 py-16">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<h2 class="text-3xl font-bold text-gray-900 mb-8" data-i18n="examples.heading">Integration Examples</h2>
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
<!-- Express Middleware -->
<div class="bg-white rounded-lg p-6 shadow-lg">
<h3 class="text-lg font-semibold text-gray-900 mb-4" data-i18n="examples.express_title">Express Middleware Integration</h3>
<pre class="bg-gray-900 text-gray-100 p-4 rounded-lg text-xs overflow-x-auto"><code>const express = require('express')
const { BoundaryEnforcer } = require('./services')
const app = express()
// Add boundary checking middleware
app.use(async (req, res, next) => {
if (req.body.decision) {
const check = await BoundaryEnforcer.checkBoundary(
req.body.decision
)
if (!check.allowed) {
return res.status(403).json({
error: 'Boundary violation',
reason: check.reason,
alternatives: check.ai_can_provide
})
}
}
next()
})</code></pre>
</div>
<!-- Real-World Validation -->
<div class="bg-white rounded-lg p-6 shadow-lg">
<h3 class="text-lg font-semibold text-gray-900 mb-4" data-i18n="examples.validation_title">Instruction Validation</h3>
<pre class="bg-gray-900 text-gray-100 p-4 rounded-lg text-xs overflow-x-auto"><code>const {
InstructionPersistenceClassifier,
CrossReferenceValidator
} = require('./services')
// Classify and store user instruction
const classification = await
InstructionPersistenceClassifier.classify(
userInstruction
)
if (classification.explicitness >= 0.6) {
await storeInstruction(classification)
}
// Validate AI action before execution
const validation = await
CrossReferenceValidator.validate(
proposedAction,
await getStoredInstructions()
)
if (validation.status === 'REJECTED') {
console.error(validation.conflicts)
useCorrectParameters(
validation.correct_parameters
)
}</code></pre>
</div>
</div>
<!-- MongoDB Models -->
<div class="mt-8 bg-white rounded-lg shadow-lg p-6">
<h3 class="text-lg font-semibold text-gray-900 mb-4" data-i18n="examples.mongodb_title">MongoDB Data Models</h3>
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
<div>
<h4 class="font-medium text-gray-900 mb-2" data-i18n="examples.governance_rule">GovernanceRule</h4>
<pre class="bg-gray-900 text-gray-100 p-3 rounded text-xs overflow-x-auto"><code>{
id: "inst_001",
text: "Use MongoDB port 27017",
quadrant: "SYSTEM",
persistence: "HIGH",
temporal_scope: "PROJECT",
explicitness: 0.85,
parameters: { port: "27017" },
active: true,
timestamp: "2025-10-21T10:00:00Z"
}</code></pre>
</div>
<div>
<h4 class="font-medium text-gray-900 mb-2" data-i18n="examples.audit_log">AuditLog</h4>
<pre class="bg-gray-900 text-gray-100 p-3 rounded text-xs overflow-x-auto"><code>{
action: "boundary_check",
result: "REJECTED",
boundary: "12.1",
decision: { /* ... */ },
timestamp: "2025-10-21T11:30:00Z",
session_id: "2025-10-21-001"
}</code></pre>
</div>
</div>
</div>
</div>
</div>
<!-- Deployment -->
<div id="deployment" class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-16">
<h2 class="text-3xl font-bold text-gray-900 mb-8">Deployment</h2>
<div class="bg-white rounded-lg shadow-lg p-8 mb-8">
<h3 class="text-xl font-bold text-gray-900 mb-4">Requirements</h3>
<ul class="space-y-2 text-gray-700">
<li class="flex items-start">
<span class="text-blue-600 mr-2"></span>
<div><strong>Node.js:</strong> v18.0.0+ (v20+ recommended)</div>
</li>
<li class="flex items-start">
<span class="text-blue-600 mr-2"></span>
<div><strong>MongoDB:</strong> v7.0+ (for instruction persistence)</div>
</li>
<li class="flex items-start">
<span class="text-blue-600 mr-2"></span>
<div><strong>Memory:</strong> 2GB+ recommended</div>
</li>
</ul>
</div>
<div class="bg-white rounded-lg shadow-lg p-8">
<h3 class="text-xl font-bold text-gray-900 mb-4">Installation</h3>
<pre class="bg-gray-900 text-gray-100 p-4 rounded-lg overflow-x-auto text-sm mb-4"><code># Clone the framework repository
git clone https://github.com/AgenticGovernance/tractatus-framework.git
cd tractatus-framework
# Install dependencies
npm install
# Configure environment
cp .env.example .env
# Edit .env with your MongoDB URI
# Initialize MongoDB indexes
node scripts/init-db.js
# Start the server
npm start</code></pre>
<div class="mt-6 bg-blue-50 border-l-4 border-blue-500 p-4 rounded-r-lg">
<p class="text-sm text-blue-900 font-medium mb-2">📖 Full Documentation</p>
<p class="text-sm text-blue-800">
Complete deployment patterns and examples available in the <a href="https://github.com/AgenticGovernance/tractatus-framework" class="underline font-medium hover:text-blue-900" target="_blank" rel="noopener noreferrer">GitHub repository</a>.
</p>
</div>
</div>
</div>
<!-- Integration Patterns -->
<div id="patterns" class="bg-gray-50 py-16">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<h2 class="text-3xl font-bold text-gray-900 mb-8" data-i18n="patterns.heading">Integration Patterns</h2>
<p class="text-lg text-gray-600 mb-8" data-i18n="patterns.intro">Common architectural patterns for integrating Tractatus into existing systems.</p>
<div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
<!-- Pattern 1: Middleware Layer -->
<div class="bg-white rounded-lg shadow-lg p-6">
<h3 class="text-xl font-semibold text-gray-900 mb-3" data-i18n="patterns.middleware_title">Middleware Integration</h3>
<p class="text-sm text-gray-600 mb-4" data-i18n="patterns.middleware_desc">
Insert governance checks as middleware in your request pipeline. Suitable for API-based AI systems.
</p>
<div class="bg-blue-50 border-l-4 border-blue-600 p-4 mb-4">
<p class="text-sm text-blue-900"><strong data-i18n="patterns.middleware_usecase">Use Case:</strong> <span data-i18n="patterns.middleware_usecase_value">REST APIs, Express.js applications</span></p>
</div>
<pre class="bg-gray-900 text-gray-100 p-3 rounded text-xs overflow-x-auto"><code>app.use(governanceMiddleware({
services: ['BoundaryEnforcer', 'CrossReferenceValidator'],
mode: 'strict',
auditAll: true
}))</code></pre>
</div>
<!-- Pattern 2: Event-Driven -->
<div class="bg-white rounded-lg shadow-lg p-6">
<h3 class="text-xl font-semibold text-gray-900 mb-3" data-i18n="patterns.event_title">Event-Driven Governance</h3>
<p class="text-sm text-gray-600 mb-4" data-i18n="patterns.event_desc">
Trigger governance checks via events. Suitable for async workflows and microservices.
</p>
<div class="bg-green-50 border-l-4 border-green-600 p-4 mb-4">
<p class="text-sm text-green-900"><strong data-i18n="patterns.event_usecase">Use Case:</strong> <span data-i18n="patterns.event_usecase_value">Message queues, event buses, async processing</span></p>
</div>
<pre class="bg-gray-900 text-gray-100 p-3 rounded text-xs overflow-x-auto"><code>eventBus.on('ai:decision', async (event) => {
const result = await checkBoundary(event.decision)
if (!result.allowed) {
await requestHumanApproval(event, result)
}
})</code></pre>
</div>
<!-- Pattern 3: Hook System -->
<div class="bg-white rounded-lg shadow-lg p-6">
<h3 class="text-xl font-semibold text-gray-900 mb-3" data-i18n="patterns.hook_title">Pre/Post-Action Hooks</h3>
<p class="text-sm text-gray-600 mb-4" data-i18n="patterns.hook_desc">
Validate actions before and after execution. Current production pattern for Claude Code.
</p>
<div class="bg-purple-50 border-l-4 border-purple-600 p-4 mb-4">
<p class="text-sm text-purple-900"><strong data-i18n="patterns.hook_usecase">Use Case:</strong> <span data-i18n="patterns.hook_usecase_value">LLM tool use, autonomous agents</span></p>
</div>
<pre class="bg-gray-900 text-gray-100 p-3 rounded text-xs overflow-x-auto"><code>hooks: {
PreToolUse: governanceCheck,
PostToolUse: auditLog,
SessionStart: loadInstructions,
SessionEnd: cleanup
}</code></pre>
</div>
<!-- Pattern 4: Sidecar Pattern -->
<div class="bg-white rounded-lg shadow-lg p-6">
<h3 class="text-xl font-semibold text-gray-900 mb-3" data-i18n="patterns.sidecar_title">Sidecar Governance Service</h3>
<p class="text-sm text-gray-600 mb-4" data-i18n="patterns.sidecar_desc">
Deploy governance as a separate service. Suitable for multi-LLM or polyglot environments.
</p>
<div class="bg-amber-50 border-l-4 border-amber-600 p-4 mb-4">
<p class="text-sm text-amber-900"><strong data-i18n="patterns.sidecar_usecase">Use Case:</strong> <span data-i18n="patterns.sidecar_usecase_value">Kubernetes, containerized deployments</span></p>
</div>
<pre class="bg-gray-900 text-gray-100 p-3 rounded text-xs overflow-x-auto"><code>// AI Service makes HTTP call
const govResponse = await fetch(
'http://governance-sidecar:8080/check',
{ method: 'POST', body: JSON.stringify(decision) }
)</code></pre>
</div>
</div>
</div>
</div>
<!-- Agent Lightning Integration (Performance Optimization) -->
<div id="agent-lightning" class="bg-gradient-to-br from-purple-50 to-blue-50 py-16">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="flex items-start gap-4 mb-6">
<span class="text-4xl"></span>
<div>
<h2 class="text-3xl font-bold text-gray-900 mb-2">Performance Optimization with Agent Lightning</h2>
<p class="text-lg text-gray-600">
Integrate Microsoft's Agent Lightning for reinforcement learning-based optimization while maintaining full governance coverage.
</p>
</div>
</div>
<!-- Two-Layer Architecture Explanation -->
<div class="bg-white rounded-xl p-8 mb-8 shadow-lg">
<h3 class="text-2xl font-semibold text-gray-900 mb-4">🏗️ Two-Layer Architecture</h3>
<p class="text-gray-700 mb-6">
Tractatus governance sits <strong>above</strong> Agent Lightning optimization, creating a separation of concerns: governance enforces boundaries, AL optimizes performance within those boundaries.
</p>
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
<!-- Layer 1: Governance -->
<div class="bg-blue-50 border-2 border-blue-200 rounded-lg p-6">
<h4 class="font-bold text-blue-900 mb-3">Layer 1: Governance (Tractatus)</h4>
<ul class="space-y-2 text-sm text-blue-800">
<li class="flex items-start gap-2">
<span class="text-blue-600 mt-0.5"></span>
<span><strong>BoundaryEnforcer:</strong> Classifies decisions as safe/unsafe</span>
</li>
<li class="flex items-start gap-2">
<span class="text-blue-600 mt-0.5"></span>
<span><strong>CrossReferenceValidator:</strong> Validates against constraints</span>
</li>
<li class="flex items-start gap-2">
<span class="text-blue-600 mt-0.5"></span>
<span><strong>PluralisticDeliberator:</strong> Manages stakeholder input</span>
</li>
<li class="flex items-start gap-2">
<span class="text-blue-600 mt-0.5"></span>
<span><strong>PressureMonitor:</strong> Detects manipulation attempts</span>
</li>
</ul>
</div>
<!-- Layer 2: Performance -->
<div class="bg-purple-50 border-2 border-purple-200 rounded-lg p-6">
<h4 class="font-bold text-purple-900 mb-3">Layer 2: Performance (Agent Lightning)</h4>
<ul class="space-y-2 text-sm text-purple-800">
<li class="flex items-start gap-2">
<span class="text-purple-600 mt-0.5"></span>
<span><strong>Reinforcement Learning:</strong> Optimizes response quality</span>
</li>
<li class="flex items-start gap-2">
<span class="text-purple-600 mt-0.5"></span>
<span><strong>Human Feedback:</strong> Learns from user corrections</span>
</li>
<li class="flex items-start gap-2">
<span class="text-purple-600 mt-0.5"></span>
<span><strong>Training Loops:</strong> Continuous improvement over time</span>
</li>
<li class="flex items-start gap-2">
<span class="text-purple-600 mt-0.5"></span>
<span><strong>Cost Efficiency:</strong> Maintains performance with lower compute</span>
</li>
</ul>
</div>
</div>
<div class="mt-6 bg-gray-100 border-l-4 border-gray-600 p-4 rounded-r-lg">
<p class="text-sm text-gray-700">
<strong>Key Insight:</strong> Governance runs <em>before</em> Agent Lightning optimization. AL never sees unsafe decisions - they're blocked at the governance layer.
</p>
</div>
</div>
<!-- Implementation Code Example -->
<div class="bg-white rounded-xl p-8 mb-8 shadow-lg">
<h3 class="text-2xl font-semibold text-gray-900 mb-4">Implementation Example</h3>
<p class="text-gray-700 mb-4">
Use the <code class="bg-gray-100 px-2 py-1 rounded text-sm">GovernedAgentLightning</code> wrapper to combine governance + performance optimization:
</p>
<pre class="bg-gray-900 text-gray-100 p-6 rounded-lg overflow-x-auto text-sm"><code>from tractatus_agent_lightning import GovernedAgentLightning
from agentlightning import AgentLightning
# Initialize governed agent
agent = GovernedAgentLightning(
base_agent=AgentLightning(agent_id="customer-support-bot"),
governance_config={
"services": ["BoundaryEnforcer", "CrossReferenceValidator"],
"mode": "strict", # Block any governance violations
"audit_all": True # Log all decisions
},
mongodb_uri="mongodb://localhost:27017/governance"
)
# Agent Lightning trains on feedback, Tractatus validates boundaries
for user_message in conversation:
# Governance check happens first
response = agent.respond(user_message)
# User feedback feeds Agent Lightning optimization
if user_corrected:
agent.update_from_feedback(
original_response=response,
corrected_response=user_correction,
rating=user_rating
)
# Governance audit logs the training update</code></pre>
<div class="mt-4 text-xs text-gray-600">
<strong>Pattern:</strong> Tractatus maintains safety boundaries through architectural enforcement, while Agent Lightning learns to optimise within those boundaries.
</div>
</div>
<!-- Preliminary Findings (Research Integrity) -->
<div class="bg-white rounded-xl p-8 mb-8 shadow-lg">
<h3 class="text-2xl font-semibold text-gray-900 mb-4">Preliminary Findings: Demo 2 Results</h3>
<!-- Research Status Banner -->
<div class="bg-amber-50 border-2 border-amber-200 rounded-lg p-4 mb-6">
<div class="flex items-start gap-3">
<svg class="w-6 h-6 text-amber-600 mt-0.5 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
</svg>
<div>
<p class="font-semibold text-amber-900 mb-1">Small-Scale Validation Only</p>
<p class="text-sm text-amber-800">
These results are from Demo 2: 5 training rounds, single agent, simulated environment. <strong>Not validated at production scale.</strong> Consider this preliminary evidence requiring further research.
</p>
</div>
</div>
</div>
<p class="text-gray-700 mb-6">
Early evidence from small-scale demo suggests Agent Lightning can maintain near-baseline performance while reducing compute requirements, without compromising governance coverage.
</p>
<!-- Results Table -->
<div class="overflow-x-auto">
<table class="min-w-full bg-gray-50 border border-gray-200 rounded-lg">
<thead class="bg-gray-100">
<tr>
<th class="px-4 py-3 text-left text-sm font-semibold text-gray-900">Metric</th>
<th class="px-4 py-3 text-center text-sm font-semibold text-gray-900">Baseline<br><span class="text-xs font-normal text-gray-600">(No AL)</span></th>
<th class="px-4 py-3 text-center text-sm font-semibold text-gray-900">Governed + AL<br><span class="text-xs font-normal text-gray-600">(Tractatus + AL)</span></th>
<th class="px-4 py-3 text-center text-sm font-semibold text-gray-900">Delta</th>
</tr>
</thead>
<tbody class="divide-y divide-gray-200">
<tr>
<td class="px-4 py-3 text-sm text-gray-900">User Engagement</td>
<td class="px-4 py-3 text-center text-sm text-gray-700">94%</td>
<td class="px-4 py-3 text-center text-sm text-gray-700">89%</td>
<td class="px-4 py-3 text-center text-sm font-semibold text-amber-700">-5%</td>
</tr>
<tr class="bg-white">
<td class="px-4 py-3 text-sm text-gray-900">Governance Coverage</td>
<td class="px-4 py-3 text-center text-sm text-gray-700">100%</td>
<td class="px-4 py-3 text-center text-sm text-gray-700">100%</td>
<td class="px-4 py-3 text-center text-sm font-semibold text-green-700">0%</td>
</tr>
<tr>
<td class="px-4 py-3 text-sm text-gray-900">Constraint Violations</td>
<td class="px-4 py-3 text-center text-sm text-gray-700">0</td>
<td class="px-4 py-3 text-center text-sm text-gray-700">0</td>
<td class="px-4 py-3 text-center text-sm font-semibold text-green-700">0</td>
</tr>
<tr class="bg-white">
<td class="px-4 py-3 text-sm text-gray-900">Audit Trail Completeness</td>
<td class="px-4 py-3 text-center text-sm text-gray-700">100%</td>
<td class="px-4 py-3 text-center text-sm text-gray-700">100%</td>
<td class="px-4 py-3 text-center text-sm font-semibold text-green-700">0%</td>
</tr>
</tbody>
</table>
</div>
<div class="mt-6 grid grid-cols-1 md:grid-cols-3 gap-4">
<div class="bg-green-50 border border-green-200 rounded-lg p-4">
<div class="text-2xl font-bold text-green-700 mb-1">100%</div>
<div class="text-sm text-green-900">Governance Maintained</div>
</div>
<div class="bg-amber-50 border border-amber-200 rounded-lg p-4">
<div class="text-2xl font-bold text-amber-700 mb-1">-5%</div>
<div class="text-sm text-amber-900">Performance Trade-off</div>
</div>
<div class="bg-blue-50 border border-blue-200 rounded-lg p-4">
<div class="text-2xl font-bold text-blue-700 mb-1">5 rounds</div>
<div class="text-sm text-blue-900">Training Duration</div>
</div>
</div>
<!-- Interpretation -->
<div class="mt-6 bg-gray-50 border border-gray-200 rounded-lg p-6">
<h4 class="font-semibold text-gray-900 mb-3">Interpretation for Implementers:</h4>
<ul class="space-y-2 text-sm text-gray-700">
<li class="flex items-start gap-2">
<span class="text-green-600 mt-0.5 flex-shrink-0"></span>
<span><strong>Governance Preserved:</strong> 100% coverage maintained - no violations observed across 5 rounds</span>
</li>
<li class="flex items-start gap-2">
<span class="text-amber-600 mt-0.5 flex-shrink-0"></span>
<span><strong>Performance Cost:</strong> 5% engagement reduction may be acceptable for high-stakes use cases (healthcare, finance, legal)</span>
</li>
<li class="flex items-start gap-2">
<span class="text-blue-600 mt-0.5 flex-shrink-0">?</span>
<span><strong>Open Question:</strong> Does performance gap close over more training rounds? Requires longer-term validation.</span>
</li>
</ul>
</div>
<!-- Limitations -->
<div class="mt-6 bg-red-50 border-2 border-red-200 rounded-lg p-6">
<h4 class="font-semibold text-red-900 mb-3 flex items-center gap-2">
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
<path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7 4a1 1 0 11-2 0 1 1 0 012 0zm-1-9a1 1 0 00-1 1v4a1 1 0 102 0V6a1 1 0 00-1-1z" clip-rule="evenodd"/>
</svg>
Critical Limitations
</h4>
<ul class="space-y-2 text-sm text-red-800">
<li class="flex items-start gap-2">
<span class="flex-shrink-0"></span>
<span><strong>Scale:</strong> Only 5 training rounds - insufficient to claim production readiness</span>
</li>
<li class="flex items-start gap-2">
<span class="flex-shrink-0"></span>
<span><strong>Environment:</strong> Simulated interactions - not tested with real users</span>
</li>
<li class="flex items-start gap-2">
<span class="flex-shrink-0"></span>
<span><strong>Agent Count:</strong> Single agent - multi-agent scenarios untested</span>
</li>
<li class="flex items-start gap-2">
<span class="flex-shrink-0"></span>
<span><strong>Duration:</strong> Short-term only - long-term stability unknown</span>
</li>
<li class="flex items-start gap-2">
<span class="flex-shrink-0"></span>
<span><strong>Edge Cases:</strong> Adversarial inputs and stress testing not performed</span>
</li>
</ul>
<p class="mt-4 text-sm text-red-900 font-semibold">
⚠️ Do not use these numbers as production validation. Conduct your own testing in your specific context.
</p>
</div>
</div>
<!-- Call to Action -->
<div class="bg-gradient-to-r from-blue-600 to-purple-600 rounded-xl p-8 text-white">
<h3 class="text-2xl font-bold mb-4">Try the Integration</h3>
<p class="mb-6">
Download the install pack with Demo 2 (governed agent) and explore the integration yourself. Includes full source code, governance modules, and setup instructions.
</p>
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
<a href="/integrations/agent-lightning.html"
class="inline-flex items-center justify-center px-6 py-3 bg-white text-blue-700 font-semibold rounded-lg hover:bg-gray-100 transition">
Integration Guide →
</a>
<a href="/downloads/tractatus-agent-lightning-v1.0.tar.gz"
class="inline-flex items-center justify-center px-6 py-3 bg-blue-800 text-white font-semibold rounded-lg hover:bg-blue-900 transition border-2 border-white/20">
Install Pack
</a>
<a href="https://discord.gg/Dkke2ADu4E" target="_blank" rel="noopener noreferrer"
class="inline-flex items-center justify-center px-6 py-3 bg-indigo-600 text-white font-semibold rounded-lg hover:bg-indigo-700 transition">
Tractatus Discord
</a>
<a href="https://discord.gg/bVZtkceKsS" target="_blank" rel="noopener noreferrer"
class="inline-flex items-center justify-center px-6 py-3 bg-purple-600 text-white font-semibold rounded-lg hover:bg-purple-700 transition">
AL Discord
</a>
</div>
</div>
</div>
</div>
<!-- Development Roadmap -->
<div id="roadmap" class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-16">
<h2 class="text-3xl font-bold text-gray-900 mb-4" data-i18n="roadmap.heading">Development Roadmap & Collaboration</h2>
<p class="text-lg text-gray-600 mb-8" data-i18n="roadmap.intro">
Tractatus is an active research framework. We welcome collaboration on priority development areas.
</p>
<div class="bg-gradient-to-br from-blue-50 to-indigo-50 rounded-xl p-8 mb-8 border-2 border-blue-200">
<h3 class="text-2xl font-bold text-gray-900 mb-4" data-i18n="roadmap.priority_title">Priority Areas for Development</h3>
<p class="text-gray-700 mb-6" data-i18n="roadmap.priority_desc">
These initiatives represent high-impact opportunities for framework enhancement. Technical contributors, researchers, and organizations are encouraged to engage.
</p>
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
<!-- Multi-LLM Support -->
<div class="bg-white rounded-lg p-6 shadow-md">
<div class="flex items-start mb-3">
<span class="text-3xl mr-3" data-i18n="roadmap.multi_llm_icon">🤖</span>
<div>
<h4 class="text-lg font-bold text-gray-900" data-i18n="roadmap.multi_llm_title">Multi-LLM Support</h4>
<p class="text-sm text-gray-500" data-i18n="roadmap.multi_llm_status">Status: Research Phase</p>
</div>
</div>
<p class="text-sm text-gray-700 mb-3" data-i18n="roadmap.multi_llm_desc">
Extend governance to GPT-4, Gemini, Llama, and local models. Requires adapting hook architecture to different LLM interfaces.
</p>
<div class="text-xs text-gray-600">
<strong data-i18n="roadmap.multi_llm_challenges">Technical Challenges:</strong> <span data-i18n="roadmap.multi_llm_challenges_desc">Provider-specific tool/function calling, rate limiting, context window differences</span>
</div>
</div>
<!-- Language Bindings -->
<div class="bg-white rounded-lg p-6 shadow-md">
<div class="flex items-start mb-3">
<span class="text-3xl mr-3" data-i18n="roadmap.bindings_icon">📚</span>
<div>
<h4 class="text-lg font-bold text-gray-900" data-i18n="roadmap.bindings_title">Language Bindings</h4>
<p class="text-sm text-gray-500" data-i18n="roadmap.bindings_status">Status: Community Interest</p>
</div>
</div>
<p class="text-sm text-gray-700 mb-3" data-i18n="roadmap.bindings_desc">
Python, Go, and Rust implementations to serve broader developer communities. Core logic is portable; MongoDB integration is universal.
</p>
<div class="text-xs text-gray-600">
<strong data-i18n="roadmap.bindings_value">Value:</strong> <span data-i18n="roadmap.bindings_value_desc">Enable polyglot AI stacks, performance-critical applications (Rust), data science workflows (Python)</span>
</div>
</div>
<!-- Cloud Deployment Patterns -->
<div class="bg-white rounded-lg p-6 shadow-md">
<div class="flex items-start mb-3">
<span class="text-3xl mr-3" data-i18n="roadmap.cloud_icon">☁️</span>
<div>
<h4 class="text-lg font-bold text-gray-900" data-i18n="roadmap.cloud_title">Cloud-Native Deployment</h4>
<p class="text-sm text-gray-500" data-i18n="roadmap.cloud_status">Status: Reference Architectures Needed</p>
</div>
</div>
<p class="text-sm text-gray-700 mb-3" data-i18n="roadmap.cloud_desc">
Terraform/Helm charts for AWS, Azure, GCP. Include managed MongoDB (Atlas), auto-scaling, and monitoring integration.
</p>
<div class="text-xs text-gray-600">
<strong data-i18n="roadmap.cloud_deliverables">Deliverables:</strong> <span data-i18n="roadmap.cloud_deliverables_desc">Reference IaC templates, cost optimization guides, security hardening checklist</span>
</div>
</div>
<!-- Business Intelligence Tools -->
<div class="bg-gradient-to-r from-purple-50 to-blue-50 rounded-lg p-6 shadow-md border-2 border-purple-200">
<div class="flex items-start mb-3">
<span class="text-3xl mr-3 text-purple-600">
<svg class="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"/></svg>
</span>
<div class="flex-1">
<div class="flex items-center">
<h4 class="text-lg font-bold text-gray-900">Business Intelligence Tools</h4>
<span class="ml-2 px-2 py-1 text-xs font-medium bg-green-100 text-green-800 rounded-full">v1.0 Prototype Live</span>
</div>
<p class="text-sm text-gray-500">Status: Research Validation Phase</p>
</div>
</div>
<p class="text-sm text-gray-700 mb-3">
Transform governance logs into executive insights: cost avoidance calculator, framework maturity scoring, and team performance analytics. Demonstrates ROI of governance decisions in real-time.
</p>
<div class="text-xs text-gray-600 mb-3">
<strong>Current Features:</strong> User-configurable cost factors, maturity scoring (0-100), AI vs human performance comparison, enterprise scaling projections
</div>
<div class="flex items-center space-x-2">
<a href="/admin/audit-analytics.html" class="text-xs font-medium text-purple-600 hover:text-purple-800">View Dashboard →</a>
<span class="text-gray-300">|</span>
<a href="/docs/business-intelligence/governance-bi-tools.pdf" class="text-xs font-medium text-purple-600 hover:text-purple-800">Read Docs (PDF)</a>
</div>
</div>
<!-- Framework Integrations -->
<div class="bg-white rounded-lg p-6 shadow-md">
<div class="flex items-start mb-3">
<span class="text-3xl mr-3" data-i18n="roadmap.integrations_icon">🔗</span>
<div>
<h4 class="text-lg font-bold text-gray-900" data-i18n="roadmap.integrations_title">AI Framework Integration</h4>
<p class="text-sm text-gray-500" data-i18n="roadmap.integrations_status">Status: Conceptual</p>
</div>
</div>
<p class="text-sm text-gray-700 mb-3" data-i18n="roadmap.integrations_desc">
Adapters for LangChain, Semantic Kernel, AutoGPT, and CrewAI. Enable governance for existing agent frameworks.
</p>
<div class="text-xs text-gray-600">
<strong data-i18n="roadmap.integrations_approach">Approach:</strong> <span data-i18n="roadmap.integrations_approach_desc">Plugin/middleware architecture that wraps agent actions with governance checks</span>
</div>
</div>
<!-- Performance at Scale -->
<div class="bg-white rounded-lg p-6 shadow-md">
<div class="flex items-start mb-3">
<span class="text-3xl mr-3 text-amber-600">
<svg class="w-8 h-8" 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>
</span>
<div>
<h4 class="text-lg font-bold text-gray-900" data-i18n="roadmap.performance_title">Enterprise-Scale Performance</h4>
<p class="text-sm text-gray-500" data-i18n="roadmap.performance_status">Status: Validation Needed</p>
</div>
</div>
<p class="text-sm text-gray-700 mb-3" data-i18n="roadmap.performance_desc">
Optimize for 1000+ concurrent AI agents. Requires caching strategies, rule compilation, and distributed audit logging.
</p>
<div class="text-xs text-gray-600">
<strong data-i18n="roadmap.performance_target">Metrics Target:</strong> <span data-i18n="roadmap.performance_target_desc">< 5ms governance overhead per decision, 99.9% uptime, horizontal scalability</span>
</div>
</div>
<!-- Additional Governance Services -->
<div class="bg-white rounded-lg p-6 shadow-md">
<div class="flex items-start mb-3">
<span class="text-3xl mr-3 text-teal-600">
<svg class="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"/></svg>
</span>
<div>
<h4 class="text-lg font-bold text-gray-900" data-i18n="roadmap.extended_title">Extended Governance Services</h4>
<p class="text-sm text-gray-500" data-i18n="roadmap.extended_status">Status: Research</p>
</div>
</div>
<p class="text-sm text-gray-700 mb-3" data-i18n="roadmap.extended_desc">
Cost monitoring, rate limiting, PII detection, adversarial prompt defense. Domain-specific services for regulated industries.
</p>
<div class="text-xs text-gray-600">
<strong data-i18n="roadmap.extended_examples">Examples:</strong> <span data-i18n="roadmap.extended_examples_desc">FinancialComplianceService, HealthcarePrivacyService, CostBudgetEnforcer</span>
</div>
</div>
</div>
</div>
<!-- Collaboration CTA -->
<div class="bg-white rounded-xl shadow-lg p-8">
<h3 class="text-2xl font-bold text-gray-900 mb-4" data-i18n="roadmap.involved_title">Get Involved</h3>
<p class="text-gray-700 mb-6" data-i18n="roadmap.involved_desc">
Tractatus is Apache 2.0 licensed research. We welcome contributions, pilot implementations, and collaborative research partnerships.
</p>
<div class="grid grid-cols-1 md:grid-cols-3 gap-6">
<div class="border-2 border-blue-200 rounded-lg p-4 hover:border-blue-400 transition">
<h4 class="font-bold text-gray-900 mb-2" data-i18n="roadmap.contributors_title">Technical Contributors</h4>
<p class="text-sm text-gray-600 mb-3" data-i18n="roadmap.contributors_desc">Implement features, fix bugs, improve documentation</p>
<a href="https://github.com/AgenticGovernance/tractatus-framework/blob/main/CONTRIBUTING.md"
class="text-blue-600 hover:text-blue-700 text-sm font-medium"
target="_blank" rel="noopener noreferrer">
<span data-i18n="roadmap.contributors_link">→ Contributing Guide</span>
</a>
</div>
<div class="border-2 border-purple-200 rounded-lg p-4 hover:border-purple-400 transition">
<h4 class="font-bold text-gray-900 mb-2" data-i18n="roadmap.research_title">Research Partners</h4>
<p class="text-sm text-gray-600 mb-3" data-i18n="roadmap.research_desc">Validation studies, academic collaboration, case studies</p>
<a href="mailto:research@agenticgovernance.digital"
class="text-purple-600 hover:text-purple-700 text-sm font-medium">
<span data-i18n="roadmap.research_email">→ research@agenticgovernance.digital</span>
</a>
</div>
<div class="border-2 border-green-200 rounded-lg p-4 hover:border-green-400 transition">
<h4 class="font-bold text-gray-900 mb-2" data-i18n="roadmap.pilots_title">Organisation Pilots</h4>
<p class="text-sm text-gray-600 mb-3" data-i18n="roadmap.pilots_desc">Production deployments, enterprise requirements, feedback loops</p>
<a href="/case-submission.html"
class="text-green-600 hover:text-green-700 text-sm font-medium">
<span data-i18n="roadmap.pilots_link">→ Submit Case Study</span>
</a>
</div>
</div>
<div class="mt-8 bg-blue-50 border-l-4 border-blue-600 p-4 rounded-r-lg">
<p class="text-sm text-blue-900">
<strong data-i18n="roadmap.why_collab">Why Collaborate?</strong> <span data-i18n="roadmap.why_collab_desc">Tractatus addresses real gaps in AI safety. Early adopters shape the framework's evolution and gain expertise in structural AI governance—a differentiating capability as regulatory requirements mature.</span>
</p>
</div>
</div>
</div>
<!-- Resources -->
<div class="bg-blue-50 py-16">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<h2 class="text-3xl font-bold text-gray-900 mb-8 text-center" data-i18n="resources.heading">Resources</h2>
<div class="grid grid-cols-1 md:grid-cols-3 gap-8">
<div class="bg-white rounded-lg p-6">
<h3 class="text-xl font-bold text-gray-900 mb-4" data-i18n="resources.docs_title">Documentation</h3>
<ul class="space-y-3">
<li>
<a href="https://github.com/AgenticGovernance/tractatus-framework"
class="text-blue-600 hover:text-blue-700 font-medium"
target="_blank"
rel="noopener noreferrer">
<span data-i18n="resources.docs_github">→ GitHub Repository</span>
</a>
</li>
<li>
<a href="/docs.html" class="text-blue-600 hover:text-blue-700 font-medium">
<span data-i18n="resources.docs_full">→ Full Documentation</span>
</a>
</li>
<li>
<a href="/demos/27027-demo.html" class="text-blue-600 hover:text-blue-700 font-medium">
<span data-i18n="resources.docs_demos">→ Live Demos</span>
</a>
</li>
<li>
<a href="/docs.html?doc=glossary" class="text-blue-600 hover:text-blue-700 font-medium">
<span data-i18n="resources.docs_glossary">→ Glossary of Terms</span>
</a>
<span class="text-gray-500 text-sm ml-2">
(<a href="/downloads/glossary.pdf" class="text-blue-500 hover:text-blue-700" target="_blank">PDF</a>)
</span>
</li>
<li>
<a href="/docs.html?doc=glossary&lang=de" class="text-blue-600 hover:text-blue-700 font-medium">
<span data-i18n="resources.docs_glossary_de">→ Glossar der Begriffe (DE)</span>
</a>
<span class="text-gray-500 text-sm ml-2">
(<a href="/downloads/glossary-de.pdf" class="text-blue-500 hover:text-blue-700" target="_blank">PDF</a>)
</span>
</li>
<li>
<a href="/docs.html?doc=glossary&lang=fr" class="text-blue-600 hover:text-blue-700 font-medium">
<span data-i18n="resources.docs_glossary_fr">→ Glossaire des Termes (FR)</span>
</a>
<span class="text-gray-500 text-sm ml-2">
(<a href="/downloads/glossary-fr.pdf" class="text-blue-500 hover:text-blue-700" target="_blank">PDF</a>)
</span>
</li>
</ul>
</div>
<div class="bg-white rounded-lg p-6">
<h3 class="text-xl font-bold text-gray-900 mb-4" data-i18n="resources.reference_title">Reference Implementation</h3>
<p class="text-sm text-gray-600 mb-4" data-i18n="resources.reference_desc">
This website (agenticgovernance.digital) runs on Tractatus governance.
</p>
<ul class="space-y-2 text-sm text-gray-700">
<li>
<span class="font-medium" data-i18n="resources.reference_services">Services:</span>
<span class="text-gray-500 ml-2" data-i18n="resources.reference_services_value">22 governance components</span>
</li>
<li>
<span class="font-medium" data-i18n="resources.reference_models">Data Models:</span>
<span class="text-gray-500 ml-2" data-i18n="resources.reference_models_value">29 MongoDB schemas</span>
</li>
<li>
<span class="font-medium" data-i18n="resources.reference_tests">Test Coverage:</span>
<span class="text-gray-500 ml-2" data-i18n="resources.reference_tests_value">35 test suites</span>
</li>
<li class="pt-3">
<a href="https://github.com/AgenticGovernance/tractatus-framework"
class="text-blue-600 hover:text-blue-700 font-medium"
target="_blank"
rel="noopener noreferrer">
<span data-i18n="resources.reference_repo">→ Collaboration Repository</span>
</a>
</li>
</ul>
</div>
<div class="bg-white rounded-lg p-6">
<h3 class="text-xl font-bold text-gray-900 mb-4" data-i18n="resources.support_title">Support</h3>
<p class="text-gray-600 mb-4 text-sm" data-i18n="resources.support_desc">
Questions about implementation or integration?
</p>
<ul class="space-y-3">
<li>
<a href="https://github.com/AgenticGovernance/tractatus-framework/issues"
class="text-blue-600 hover:text-blue-700 font-medium"
target="_blank"
rel="noopener noreferrer">
<span data-i18n="resources.support_issues">→ GitHub Issues</span>
</a>
</li>
<li>
<a href="https://github.com/AgenticGovernance/tractatus-framework/discussions"
class="text-blue-600 hover:text-blue-700 font-medium"
target="_blank"
rel="noopener noreferrer">
<span data-i18n="resources.support_discussions">→ GitHub Discussions</span>
</a>
</li>
<li>
<a href="mailto:research@agenticgovernance.digital"
class="text-blue-600 hover:text-blue-700 font-medium">
<span data-i18n="resources.support_email">→ research@agenticgovernance.digital</span>
</a>
</li>
<li>
<a href="/korero-counter-arguments.html" class="text-blue-600 hover:text-blue-700 font-medium">
<span data-i18n="resources.support_faq">→ Counter-Arguments & Critical Questions</span>
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</main>
<!-- Share CTA -->
<section class="bg-gray-100 py-12">
<div class="max-w-2xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="bg-white rounded-lg shadow-sm border border-gray-200 p-8">
<h2 class="text-2xl font-semibold text-gray-900 mb-3" data-i18n="share_cta.heading">
Help us reach the right people.
</h2>
<p class="text-gray-700 mb-6" data-i18n="share_cta.description">
If you know researchers, implementers, or leaders who need structural AI governance solutions, share this with them.
</p>
<div class="flex flex-wrap gap-3">
<button
data-action="copy-link"
class="bg-blue-600 hover:bg-blue-700 text-white px-6 py-2.5 rounded-lg font-medium transition-colors shadow-sm"
data-i18n="share_cta.copy_link">
Copy Link
</button>
<button
data-action="email-share"
class="bg-blue-600 hover:bg-blue-700 text-white px-6 py-2.5 rounded-lg font-medium transition-colors shadow-sm"
data-i18n="share_cta.email">
Email
</button>
<button
data-action="linkedin-share"
class="bg-blue-600 hover:bg-blue-700 text-white px-6 py-2.5 rounded-lg font-medium transition-colors shadow-sm"
data-i18n="share_cta.linkedin">
LinkedIn
</button>
</div>
</div>
</div>
</section>
<!-- Footer -->
<script src="/js/i18n-simple.js?v=0.1.2.1769107445437"></script>
<script src="/js/components/language-selector.js?v=0.1.2.1769107445437"></script>
<script src="/js/scroll-animations.js?v=0.1.2.1769107445437"></script>
<script src="/js/page-transitions.js?v=0.1.2.1769107445437"></script>
<script src="/js/version-manager.js?v=0.1.2.1769107445437"></script>
<!-- Share CTA functionality -->
<script src="/js/share-cta.js?v=0.1.2.1769107445437"></script>
<script src="/js/components/footer.js?v=0.1.2.1769107445437"></script>
<!-- Feedback System (Governed by Tractatus + Agent Lightning) -->
<script src="/js/components/feedback.js?v=0.1.2.1769107445437"></script>
<!-- Newsletter Subscription Modal -->
<script src="/js/components/newsletter.js?v=0.1.2.1769107445437"></script>
</body>
</html>