1715 lines
92 KiB
HTML
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.1770451093421">
|
|
<link rel="stylesheet" href="/css/tailwind.css?v=0.1.2.1770451093421">
|
|
<link rel="stylesheet" href="/css/tractatus-theme.min.css?v=0.1.2.1770451093421">
|
|
<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.1770451093421"></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.1770451093421"></script>
|
|
<script src="/js/components/language-selector.js?v=0.1.2.1770451093421"></script>
|
|
<script src="/js/scroll-animations.js?v=0.1.2.1770451093421"></script>
|
|
<script src="/js/page-transitions.js?v=0.1.2.1770451093421"></script>
|
|
|
|
<script src="/js/version-manager.js?v=0.1.2.1770451093421"></script>
|
|
|
|
<!-- Share CTA functionality -->
|
|
<script src="/js/share-cta.js?v=0.1.2.1770451093421"></script>
|
|
|
|
<script src="/js/components/footer.js?v=0.1.2.1770451093421"></script>
|
|
|
|
<!-- Feedback System (Governed by Tractatus + Agent Lightning) -->
|
|
<script src="/js/components/feedback.js?v=0.1.2.1770451093421"></script>
|
|
|
|
<!-- Newsletter Subscription Modal -->
|
|
<script src="/js/components/newsletter.js?v=0.1.2.1770451093421"></script>
|
|
|
|
</body>
|
|
</html>
|