d3ce5bed76
Changed copyright from "Tractatus AI Safety Framework" (not a legal entity) to "John G Stroh" (actual copyright holder) for legal clarity. Files updated: - 13 HTML files (all website pages) - Consistent with LICENSE file (Copyright 2025 John G Stroh) - Deployed to production 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
785 lines
39 KiB
HTML
785 lines
39 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>For Implementers | Tractatus AI Safety Framework</title>
|
|
<meta name="description" content="Integrate Tractatus framework into your AI systems: practical guides, code examples, and step-by-step implementation for production safety.">
|
|
|
|
<!-- PWA Manifest -->
|
|
<link rel="manifest" href="/manifest.json">
|
|
|
|
<!-- PWA Meta Tags -->
|
|
<meta name="theme-color" content="#3b82f6">
|
|
<meta name="apple-mobile-web-app-capable" content="yes">
|
|
<meta name="apple-mobile-web-app-status-bar-style" content="default">
|
|
<meta name="apple-mobile-web-app-title" content="Tractatus">
|
|
<link rel="apple-touch-icon" href="/images/tractatus-icon.svg">
|
|
|
|
<link rel="stylesheet" href="/css/tailwind.css?v=0.1.0.1760254958072">
|
|
<style>
|
|
/* Accessibility: Skip link */
|
|
.skip-link { position: absolute; left: -9999px; top: 0; }
|
|
.skip-link:focus { left: 0; z-index: 100; background: white; padding: 1rem; border: 2px solid #3b82f6; }
|
|
|
|
/* Accessibility: Focus indicators (WCAG 2.4.7) */
|
|
a:focus, button:focus, input:focus, select:focus, textarea:focus {
|
|
outline: 3px solid #3b82f6;
|
|
outline-offset: 2px;
|
|
}
|
|
a:focus:not(:focus-visible) { outline: none; }
|
|
a:focus-visible { outline: 3px solid #3b82f6; outline-offset: 2px; }
|
|
</style>
|
|
</head>
|
|
<body class="bg-gray-50">
|
|
|
|
<!-- Skip Link for Keyboard Navigation -->
|
|
<a href="#main-content" class="skip-link">Skip to main content</a>
|
|
|
|
<!-- Navigation (injected by navbar.js) -->
|
|
<script src="/js/components/navbar.js?v=0.1.0.1760254958072"></script>
|
|
|
|
<!-- Hero Section -->
|
|
<div class="bg-gradient-to-br from-blue-50 to-indigo-50 py-20">
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
|
<div class="text-center">
|
|
<h1 class="text-5xl font-bold text-gray-900 mb-6">
|
|
Reference Implementation<br>AI Safety Patterns
|
|
</h1>
|
|
<p class="text-xl text-gray-600 max-w-3xl mx-auto mb-8">
|
|
Integrate Tractatus framework into your AI systems with practical guides, code examples, and patterns demonstrated in 6-month development project.
|
|
</p>
|
|
<div class="flex justify-center space-x-4">
|
|
<a href="#quickstart" class="bg-blue-600 text-white px-6 py-3 rounded-lg font-semibold hover:bg-blue-700 transition">
|
|
Quick Start Guide
|
|
</a>
|
|
<a href="/docs.html" class="bg-white text-blue-600 px-6 py-3 rounded-lg font-semibold border-2 border-blue-600 hover:bg-blue-50 transition">
|
|
View Documentation
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Development Context Warning -->
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
|
|
<div class="bg-amber-50 border-l-4 border-amber-500 p-6 rounded-r-lg">
|
|
<p class="text-sm text-amber-900 font-medium mb-2">Development Context</p>
|
|
<p class="text-sm text-amber-800 mb-3">
|
|
Framework developed over six months in single-project context. Code examples below show reference implementation architecture. The npm package <code class="bg-amber-100 px-1 py-0.5 rounded">@tractatus/framework</code> represents planned API design, not published package. Actual implementation requires adapting patterns from this project's source code.
|
|
</p>
|
|
<p class="text-sm text-amber-800">
|
|
This is exploratory research demonstrating feasibility of architectural governance patterns, not production-ready commercial software.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Deployment Architecture Guide -->
|
|
<div class="bg-gradient-to-r from-blue-600 to-indigo-600 py-12">
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
|
<div class="bg-white rounded-xl shadow-2xl overflow-hidden">
|
|
<div class="md:flex">
|
|
<div class="md:w-2/3 p-8">
|
|
<div class="flex items-center mb-4">
|
|
<span class="bg-blue-600 text-white px-3 py-1 rounded-full text-sm font-semibold">DOCUMENTATION</span>
|
|
<span class="ml-3 text-2xl">📚</span>
|
|
</div>
|
|
<h2 class="text-3xl font-bold text-gray-900 mb-4">
|
|
Deployment Architecture Guide
|
|
</h2>
|
|
<p class="text-lg text-gray-600 mb-6">
|
|
Comprehensive conceptual guide to deploying Tractatus-based systems. Understand architecture patterns, security best practices, and integration strategies for research and educational purposes.
|
|
</p>
|
|
<div class="grid grid-cols-2 gap-4 mb-6">
|
|
<div class="flex items-start">
|
|
<svg class="w-5 h-5 text-blue-600 mr-2 mt-0.5 flex-shrink-0" fill="currentColor" viewBox="0 0 20 20">
|
|
<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"/>
|
|
</svg>
|
|
<span class="text-gray-700 text-sm">Framework architecture overview</span>
|
|
</div>
|
|
<div class="flex items-start">
|
|
<svg class="w-5 h-5 text-blue-600 mr-2 mt-0.5 flex-shrink-0" fill="currentColor" viewBox="0 0 20 20">
|
|
<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"/>
|
|
</svg>
|
|
<span class="text-gray-700 text-sm">Deployment patterns (dev/prod)</span>
|
|
</div>
|
|
<div class="flex items-start">
|
|
<svg class="w-5 h-5 text-blue-600 mr-2 mt-0.5 flex-shrink-0" fill="currentColor" viewBox="0 0 20 20">
|
|
<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"/>
|
|
</svg>
|
|
<span class="text-gray-700 text-sm">Security best practices</span>
|
|
</div>
|
|
<div class="flex items-start">
|
|
<svg class="w-5 h-5 text-blue-600 mr-2 mt-0.5 flex-shrink-0" fill="currentColor" viewBox="0 0 20 20">
|
|
<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"/>
|
|
</svg>
|
|
<span class="text-gray-700 text-sm">Troubleshooting guidance</span>
|
|
</div>
|
|
</div>
|
|
<a href="https://github.com/AgenticGovernance/tractatus-framework/tree/main/deployment-guide"
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
class="inline-flex items-center bg-blue-600 text-white px-6 py-3 rounded-lg font-semibold hover:bg-blue-700 transition shadow-lg">
|
|
<svg class="w-5 h-5 mr-2" fill="currentColor" viewBox="0 0 20 20">
|
|
<path d="M11 3a1 1 0 100 2h2.586l-6.293 6.293a1 1 0 101.414 1.414L15 6.414V9a1 1 0 102 0V4a1 1 0 00-1-1h-5z"/>
|
|
<path d="M5 5a2 2 0 00-2 2v8a2 2 0 002 2h8a2 2 0 002-2v-3a1 1 0 10-2 0v3H5V7h3a1 1 0 000-2H5z"/>
|
|
</svg>
|
|
View Deployment Guide
|
|
</a>
|
|
<p class="text-sm text-gray-500 mt-3">
|
|
For production implementation support, contact john.stroh.nz@pm.me
|
|
</p>
|
|
</div>
|
|
<div class="md:w-1/3 bg-gray-900 p-8 text-gray-100">
|
|
<h3 class="text-lg font-bold mb-4 text-white">Guide Contents:</h3>
|
|
<ul class="space-y-3 text-sm">
|
|
<li class="flex items-start">
|
|
<span class="text-blue-400 mr-2">▸</span>
|
|
<div>
|
|
<strong class="text-white">Architecture Overview</strong>
|
|
<p class="text-gray-400 text-xs mt-1">4-layer system design</p>
|
|
</div>
|
|
</li>
|
|
<li class="flex items-start">
|
|
<span class="text-blue-400 mr-2">▸</span>
|
|
<div>
|
|
<strong class="text-white">Deployment Patterns</strong>
|
|
<p class="text-gray-400 text-xs mt-1">Dev, single-server, containerized</p>
|
|
</div>
|
|
</li>
|
|
<li class="flex items-start">
|
|
<span class="text-blue-400 mr-2">▸</span>
|
|
<div>
|
|
<strong class="text-white">Security Best Practices</strong>
|
|
<p class="text-gray-400 text-xs mt-1">Network, app, operational security</p>
|
|
</div>
|
|
</li>
|
|
<li class="flex items-start">
|
|
<span class="text-blue-400 mr-2">▸</span>
|
|
<div>
|
|
<strong class="text-white">Configuration Guide</strong>
|
|
<p class="text-gray-400 text-xs mt-1">Environment variables, indexes</p>
|
|
</div>
|
|
</li>
|
|
<li class="flex items-start">
|
|
<span class="text-blue-400 mr-2">▸</span>
|
|
<div>
|
|
<strong class="text-white">Monitoring & Scaling</strong>
|
|
<p class="text-gray-400 text-xs mt-1">Metrics, alerts, scaling strategies</p>
|
|
</div>
|
|
</li>
|
|
<li class="flex items-start">
|
|
<span class="text-blue-400 mr-2">▸</span>
|
|
<div>
|
|
<strong class="text-white">Troubleshooting</strong>
|
|
<p class="text-gray-400 text-xs mt-1">Common issues & solutions</p>
|
|
</div>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Technical Architecture -->
|
|
<div class="bg-white py-16">
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
|
<div class="text-center mb-12">
|
|
<h2 class="text-3xl font-bold text-gray-900 mb-4">System Architecture</h2>
|
|
<p class="text-xl text-gray-600 max-w-3xl mx-auto">
|
|
Understanding how Tractatus integrates with Claude Code to provide robust AI governance
|
|
</p>
|
|
</div>
|
|
|
|
<!-- Architecture Diagram -->
|
|
<div class="bg-gray-50 rounded-xl p-8 mb-8">
|
|
<div class="bg-white rounded-lg p-6 shadow-inner">
|
|
<img src="/images/architecture-diagram.svg"
|
|
alt="Tractatus Framework Architecture showing four layers: API & Web Interface, Tractatus Governance Layer with 6 services, MongoDB Persistence, and Claude Code Runtime Environment"
|
|
class="w-full h-auto"
|
|
loading="lazy">
|
|
</div>
|
|
<div class="mt-6 flex flex-wrap gap-4 justify-center">
|
|
<a href="/images/architecture-diagram.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">
|
|
<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>
|
|
Download SVG
|
|
</a>
|
|
<a href="/images/architecture-diagram.png"
|
|
download
|
|
class="inline-flex items-center bg-green-600 text-white px-4 py-2 rounded-lg text-sm font-semibold hover:bg-green-700 transition">
|
|
<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>
|
|
Download PNG (High-Res)
|
|
</a>
|
|
<a href="/downloads/technical-architecture-diagram.pdf"
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
class="inline-flex items-center bg-purple-600 text-white px-4 py-2 rounded-lg text-sm font-semibold hover:bg-purple-700 transition">
|
|
<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="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/>
|
|
</svg>
|
|
Technical Documentation PDF
|
|
</a>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Architecture Layers -->
|
|
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
|
|
<div class="bg-purple-50 rounded-lg p-6 border-2 border-purple-200">
|
|
<div class="text-purple-600 text-2xl font-bold mb-2">Layer 4</div>
|
|
<h3 class="text-lg font-bold text-gray-900 mb-3">API & Web Interface</h3>
|
|
<ul class="space-y-2 text-sm text-gray-700">
|
|
<li>• Demo endpoints</li>
|
|
<li>• Admin dashboard</li>
|
|
<li>• Documentation</li>
|
|
<li>• Blog system</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div class="bg-green-50 rounded-lg p-6 border-2 border-green-200">
|
|
<div class="text-green-600 text-2xl font-bold mb-2">Layer 3</div>
|
|
<h3 class="text-lg font-bold text-gray-900 mb-3">Tractatus Governance</h3>
|
|
<ul class="space-y-2 text-sm text-gray-700">
|
|
<li>• BoundaryEnforcer</li>
|
|
<li>• InstructionPersistenceClassifier</li>
|
|
<li>• CrossReferenceValidator</li>
|
|
<li>• ContextPressureMonitor</li>
|
|
<li>• MetacognitiveVerifier</li>
|
|
<li>• PluralisticDeliberationOrchestrator</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div class="bg-yellow-50 rounded-lg p-6 border-2 border-yellow-200">
|
|
<div class="text-yellow-600 text-2xl font-bold mb-2">Layer 2</div>
|
|
<h3 class="text-lg font-bold text-gray-900 mb-3">MongoDB Persistence</h3>
|
|
<ul class="space-y-2 text-sm text-gray-700">
|
|
<li>• governance_rules</li>
|
|
<li>• audit_logs</li>
|
|
<li>• session_state</li>
|
|
<li>• instruction_history</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div class="bg-blue-50 rounded-lg p-6 border-2 border-blue-200">
|
|
<div class="text-blue-600 text-2xl font-bold mb-2">Layer 1</div>
|
|
<h3 class="text-lg font-bold text-gray-900 mb-3">Claude Code Runtime</h3>
|
|
<ul class="space-y-2 text-sm text-gray-700">
|
|
<li>• Base LLM environment</li>
|
|
<li>• Session management</li>
|
|
<li>• Tool access</li>
|
|
<li>• Context window (200k)</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Key Integration Points -->
|
|
<div class="mt-12 bg-blue-50 rounded-lg p-8">
|
|
<h3 class="text-xl font-bold text-gray-900 mb-6 text-center">Key Integration Points</h3>
|
|
<div class="grid grid-cols-1 md:grid-cols-3 gap-6">
|
|
<div class="text-center">
|
|
<div class="bg-blue-600 text-white w-12 h-12 rounded-full flex items-center justify-center mx-auto mb-3 text-xl font-bold">1</div>
|
|
<h4 class="font-semibold text-gray-900 mb-2">Pre-Action Checks</h4>
|
|
<p class="text-sm text-gray-600">All actions validated against governance rules before execution</p>
|
|
</div>
|
|
<div class="text-center">
|
|
<div class="bg-green-600 text-white w-12 h-12 rounded-full flex items-center justify-center mx-auto mb-3 text-xl font-bold">2</div>
|
|
<h4 class="font-semibold text-gray-900 mb-2">Instruction Persistence</h4>
|
|
<p class="text-sm text-gray-600">User instructions classified and stored for cross-reference validation</p>
|
|
</div>
|
|
<div class="text-center">
|
|
<div class="bg-purple-600 text-white w-12 h-12 rounded-full flex items-center justify-center mx-auto mb-3 text-xl font-bold">3</div>
|
|
<h4 class="font-semibold text-gray-900 mb-2">Comprehensive Audit Trail</h4>
|
|
<p class="text-sm text-gray-600">Every governance action logged for compliance and analysis</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Integration Options -->
|
|
<div id="main-content" 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-12 text-center">Integration Approaches</h2>
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-3 gap-8">
|
|
<!-- Full Stack Integration -->
|
|
<div class="bg-white rounded-lg shadow-lg p-8 border-t-4 border-blue-600">
|
|
<h3 class="text-xl font-bold text-gray-900 mb-3">Full Stack</h3>
|
|
<p class="text-gray-600 mb-4">
|
|
Complete framework integration for new AI-powered applications. All six services active with persistent instruction storage.
|
|
</p>
|
|
<ul class="space-y-2 text-sm text-gray-600 mb-6">
|
|
<li class="flex items-start">
|
|
<svg aria-hidden="true" class="w-5 h-5 text-green-500 mr-2 flex-shrink-0 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/>
|
|
</svg>
|
|
<span>Instruction classification & storage</span>
|
|
</li>
|
|
<li class="flex items-start">
|
|
<svg aria-hidden="true" class="w-5 h-5 text-green-500 mr-2 flex-shrink-0 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/>
|
|
</svg>
|
|
<span>Cross-reference validation</span>
|
|
</li>
|
|
<li class="flex items-start">
|
|
<svg aria-hidden="true" class="w-5 h-5 text-green-500 mr-2 flex-shrink-0 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/>
|
|
</svg>
|
|
<span>Boundary enforcement</span>
|
|
</li>
|
|
<li class="flex items-start">
|
|
<svg aria-hidden="true" class="w-5 h-5 text-green-500 mr-2 flex-shrink-0 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/>
|
|
</svg>
|
|
<span>Context pressure monitoring</span>
|
|
</li>
|
|
</ul>
|
|
<div class="text-sm text-gray-500">Best for: New projects, greenfield AI applications</div>
|
|
</div>
|
|
|
|
<!-- Middleware Layer -->
|
|
<div class="bg-white rounded-lg shadow-lg p-8 border-t-4 border-indigo-600">
|
|
<h3 class="text-xl font-bold text-gray-900 mb-3">Middleware Layer</h3>
|
|
<p class="text-gray-600 mb-4">
|
|
Add Tractatus validation as middleware in existing AI pipelines. Non-invasive integration with gradual rollout support.
|
|
</p>
|
|
<ul class="space-y-2 text-sm text-gray-600 mb-6">
|
|
<li class="flex items-start">
|
|
<svg aria-hidden="true" class="w-5 h-5 text-green-500 mr-2 flex-shrink-0 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/>
|
|
</svg>
|
|
<span>Drop-in Express/Koa middleware</span>
|
|
</li>
|
|
<li class="flex items-start">
|
|
<svg aria-hidden="true" class="w-5 h-5 text-green-500 mr-2 flex-shrink-0 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/>
|
|
</svg>
|
|
<span>Monitor mode (log only)</span>
|
|
</li>
|
|
<li class="flex items-start">
|
|
<svg aria-hidden="true" class="w-5 h-5 text-green-500 mr-2 flex-shrink-0 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/>
|
|
</svg>
|
|
<span>Gradual enforcement rollout</span>
|
|
</li>
|
|
<li class="flex items-start">
|
|
<svg aria-hidden="true" class="w-5 h-5 text-green-500 mr-2 flex-shrink-0 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/>
|
|
</svg>
|
|
<span>Compatible with existing auth</span>
|
|
</li>
|
|
</ul>
|
|
<div class="text-sm text-gray-500">Best for: Existing production AI systems</div>
|
|
</div>
|
|
|
|
<!-- Selective Components -->
|
|
<div class="bg-white rounded-lg shadow-lg p-8 border-t-4 border-purple-600">
|
|
<h3 class="text-xl font-bold text-gray-900 mb-3">Selective Components</h3>
|
|
<p class="text-gray-600 mb-4">
|
|
Use individual Tractatus services à la carte. Mix and match components based on your specific safety requirements.
|
|
</p>
|
|
<ul class="space-y-2 text-sm text-gray-600 mb-6">
|
|
<li class="flex items-start">
|
|
<svg aria-hidden="true" class="w-5 h-5 text-green-500 mr-2 flex-shrink-0 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/>
|
|
</svg>
|
|
<span>Standalone pressure monitoring</span>
|
|
</li>
|
|
<li class="flex items-start">
|
|
<svg aria-hidden="true" class="w-5 h-5 text-green-500 mr-2 flex-shrink-0 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/>
|
|
</svg>
|
|
<span>Boundary checks only</span>
|
|
</li>
|
|
<li class="flex items-start">
|
|
<svg aria-hidden="true" class="w-5 h-5 text-green-500 mr-2 flex-shrink-0 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/>
|
|
</svg>
|
|
<span>Classification without storage</span>
|
|
</li>
|
|
<li class="flex items-start">
|
|
<svg aria-hidden="true" class="w-5 h-5 text-green-500 mr-2 flex-shrink-0 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/>
|
|
</svg>
|
|
<span>Custom component combinations</span>
|
|
</li>
|
|
</ul>
|
|
<div class="text-sm text-gray-500">Best for: Specific safety requirements</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Quick Start -->
|
|
<div id="quickstart" class="bg-white py-16">
|
|
<div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
|
|
<h2 class="text-3xl font-bold text-gray-900 mb-8 text-center">Quick Start Guide</h2>
|
|
|
|
<!-- npm Package Disclaimer -->
|
|
<div class="bg-blue-50 border-l-4 border-blue-500 p-4 mb-8 rounded-r-lg">
|
|
<p class="text-sm text-blue-900 font-medium mb-2">⚠️ Note: Reference Implementation</p>
|
|
<p class="text-sm text-blue-800">
|
|
The code examples below show conceptual API design. The npm package <code class="bg-blue-100 px-1 py-0.5 rounded">@tractatus/framework</code> is not yet published. To implement these patterns, adapt the governance services from this project's <a href="https://github.com/AgenticGovernance/tractatus-framework" class="underline font-medium hover:text-blue-900">source code</a>.
|
|
</p>
|
|
</div>
|
|
|
|
<div class="space-y-8">
|
|
<!-- Step 1 -->
|
|
<div class="border-l-4 border-blue-600 pl-6">
|
|
<div class="flex items-center mb-3">
|
|
<span class="bg-blue-600 text-white rounded-full w-8 h-8 flex items-center justify-center font-bold mr-3">1</span>
|
|
<h3 class="text-xl font-bold text-gray-900">Installation</h3>
|
|
</div>
|
|
<pre class="bg-gray-900 text-gray-100 p-4 rounded-lg overflow-x-auto mb-3"><code>npm install @tractatus/framework
|
|
# or
|
|
yarn add @tractatus/framework</code></pre>
|
|
<p class="text-gray-600">Install the framework package and its dependencies (MongoDB for instruction storage).</p>
|
|
</div>
|
|
|
|
<!-- Step 2 -->
|
|
<div class="border-l-4 border-blue-600 pl-6">
|
|
<div class="flex items-center mb-3">
|
|
<span class="bg-blue-600 text-white rounded-full w-8 h-8 flex items-center justify-center font-bold mr-3">2</span>
|
|
<h3 class="text-xl font-bold text-gray-900">Initialize Services</h3>
|
|
</div>
|
|
<pre class="bg-gray-900 text-gray-100 p-4 rounded-lg overflow-x-auto mb-3"><code>const { TractatusFramework } = require('@tractatus/framework');
|
|
|
|
const tractatus = new TractatusFramework({
|
|
mongoUri: process.env.MONGODB_URI,
|
|
verbosity: 'SUMMARY', // or 'VERBOSE', 'SILENT'
|
|
components: {
|
|
classifier: true,
|
|
validator: true,
|
|
boundary: true,
|
|
pressure: true,
|
|
metacognitive: 'selective'
|
|
}
|
|
});
|
|
|
|
await tractatus.initialize();</code></pre>
|
|
<p class="text-gray-600">Configure and initialize the framework with your preferred settings.</p>
|
|
</div>
|
|
|
|
<!-- Step 3 -->
|
|
<div class="border-l-4 border-blue-600 pl-6">
|
|
<div class="flex items-center mb-3">
|
|
<span class="bg-blue-600 text-white rounded-full w-8 h-8 flex items-center justify-center font-bold mr-3">3</span>
|
|
<h3 class="text-xl font-bold text-gray-900">Classify Instructions</h3>
|
|
</div>
|
|
<pre class="bg-gray-900 text-gray-100 p-4 rounded-lg overflow-x-auto mb-3"><code>const instruction = "Always use MongoDB on port 27017";
|
|
|
|
const classification = await tractatus.classify(instruction);
|
|
// {
|
|
// quadrant: 'SYSTEM',
|
|
// persistence: 'HIGH',
|
|
// temporal_scope: 'PROJECT',
|
|
// verification_required: 'MANDATORY',
|
|
// explicitness: 0.85
|
|
// }
|
|
|
|
if (classification.explicitness >= 0.6) {
|
|
await tractatus.store(instruction, classification);
|
|
}</code></pre>
|
|
<p class="text-gray-600">Classify user instructions and store those that meet explicitness threshold.</p>
|
|
</div>
|
|
|
|
<!-- Step 4 -->
|
|
<div class="border-l-4 border-blue-600 pl-6">
|
|
<div class="flex items-center mb-3">
|
|
<span class="bg-blue-600 text-white rounded-full w-8 h-8 flex items-center justify-center font-bold mr-3">4</span>
|
|
<h3 class="text-xl font-bold text-gray-900">Validate Actions</h3>
|
|
</div>
|
|
<pre class="bg-gray-900 text-gray-100 p-4 rounded-lg overflow-x-auto mb-3"><code>// User instructed: "Check MongoDB at port 27027"
|
|
// But AI about to use port 27017 (pattern recognition bias)
|
|
|
|
const action = {
|
|
type: 'db_config',
|
|
parameters: { port: 27017 } // Pattern override!
|
|
};
|
|
|
|
const validation = await tractatus.validate(action);
|
|
|
|
if (validation.status === 'REJECTED') {
|
|
// "Port 27017 conflicts with instruction: use port 27027"
|
|
console.error(`Validation failed: ${validation.reason}`);
|
|
console.log(`Using instructed port: ${validation.correct_parameters.port}`);
|
|
// Use correct port 27027
|
|
} else {
|
|
executeAction(action);
|
|
}</code></pre>
|
|
<p class="text-gray-600">Validate AI actions against stored instructions before execution.</p>
|
|
</div>
|
|
|
|
<!-- Step 5 -->
|
|
<div class="border-l-4 border-blue-600 pl-6">
|
|
<div class="flex items-center mb-3">
|
|
<span class="bg-blue-600 text-white rounded-full w-8 h-8 flex items-center justify-center font-bold mr-3">5</span>
|
|
<h3 class="text-xl font-bold text-gray-900">Enforce Boundaries</h3>
|
|
</div>
|
|
<pre class="bg-gray-900 text-gray-100 p-4 rounded-lg overflow-x-auto mb-3"><code>// Check if decision crosses Tractatus boundary
|
|
const decision = {
|
|
domain: 'values',
|
|
description: 'Change privacy policy to enable analytics'
|
|
};
|
|
|
|
const boundary = await tractatus.checkBoundary(decision);
|
|
|
|
if (!boundary.allowed) {
|
|
// Requires human decision
|
|
await notifyHuman({
|
|
decision,
|
|
reason: boundary.reason,
|
|
alternatives: boundary.ai_can_provide
|
|
});
|
|
}</code></pre>
|
|
<p class="text-gray-600">Enforce boundaries: AI cannot make values decisions without human approval.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Code Examples -->
|
|
<div 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-12 text-center">Integration Patterns</h2>
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-8">
|
|
<div class="bg-gray-50 rounded-lg p-6">
|
|
<h3 class="text-lg font-semibold text-gray-900 mb-4">Express Middleware</h3>
|
|
<pre class="bg-gray-900 text-gray-100 p-4 rounded-lg text-sm overflow-x-auto"><code>app.use(tractatus.middleware({
|
|
mode: 'enforce', // or 'monitor'
|
|
onViolation: async (req, res, violation) => {
|
|
await logViolation(violation);
|
|
res.status(403).json({
|
|
error: 'Tractatus boundary violation',
|
|
reason: violation.reason
|
|
});
|
|
}
|
|
}));</code></pre>
|
|
</div>
|
|
|
|
<div class="bg-gray-50 rounded-lg p-6">
|
|
<h3 class="text-lg font-semibold text-gray-900 mb-4">Content Moderation</h3>
|
|
<pre class="bg-gray-900 text-gray-100 p-4 rounded-lg text-sm overflow-x-auto"><code>async function moderateContent(content) {
|
|
const decision = {
|
|
domain: 'values',
|
|
action: 'auto_moderate',
|
|
content
|
|
};
|
|
|
|
const check = await tractatus.checkBoundary(decision);
|
|
|
|
if (!check.allowed) {
|
|
return { action: 'human_review', alternatives: check.ai_can_provide };
|
|
}
|
|
}</code></pre>
|
|
</div>
|
|
|
|
<div class="bg-gray-50 rounded-lg p-6">
|
|
<h3 class="text-lg font-semibold text-gray-900 mb-4">Pressure Monitoring</h3>
|
|
<pre class="bg-gray-900 text-gray-100 p-4 rounded-lg text-sm overflow-x-auto"><code>const pressure = await tractatus.checkPressure({
|
|
tokens: 150000,
|
|
messages: 45,
|
|
errors: 2
|
|
});
|
|
|
|
if (pressure.level === 'CRITICAL') {
|
|
await suggestHandoff(pressure.recommendations);
|
|
} else if (pressure.level === 'HIGH') {
|
|
await increaseVerification();
|
|
}</code></pre>
|
|
</div>
|
|
|
|
<div class="bg-gray-50 rounded-lg p-6">
|
|
<h3 class="text-lg font-semibold text-gray-900 mb-4">Custom Classification</h3>
|
|
<pre class="bg-gray-900 text-gray-100 p-4 rounded-lg text-sm overflow-x-auto"><code>const customClassifier = {
|
|
patterns: {
|
|
CRITICAL: /security|auth|password/i,
|
|
HIGH: /database|config|api/i
|
|
},
|
|
|
|
classify(text) {
|
|
for (const [level, pattern] of Object.entries(this.patterns)) {
|
|
if (pattern.test(text)) return level;
|
|
}
|
|
return 'MEDIUM';
|
|
}
|
|
};</code></pre>
|
|
</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-12 text-center">Implementation 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">Technical Documentation</h3>
|
|
<ul class="space-y-3">
|
|
<li class="flex items-center justify-between">
|
|
<a href="/docs.html" class="text-blue-600 hover:text-blue-700 font-medium">
|
|
→ Implementation Guide: Python Code
|
|
</a>
|
|
<a href="/downloads/implementation-guide-python-code-examples.pdf"
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
class="text-blue-600 hover:text-blue-700 ml-2"
|
|
title="Download PDF">
|
|
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="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>
|
|
</a>
|
|
</li>
|
|
<li class="flex items-center justify-between">
|
|
<a href="/docs.html" class="text-blue-600 hover:text-blue-700 font-medium">
|
|
→ Case Studies: Real-World Failures
|
|
</a>
|
|
<a href="/downloads/case-studies-real-world-llm-failure-modes.pdf"
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
class="text-blue-600 hover:text-blue-700 ml-2"
|
|
title="Download PDF">
|
|
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="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>
|
|
</a>
|
|
</li>
|
|
<li class="flex items-center justify-between">
|
|
<a href="/docs.html" class="text-blue-600 hover:text-blue-700 font-medium">
|
|
→ 24-Month Deployment Roadmap
|
|
</a>
|
|
<a href="/downloads/implementation-roadmap-24-month-deployment-plan.pdf"
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
class="text-blue-600 hover:text-blue-700 ml-2"
|
|
title="Download PDF">
|
|
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="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>
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a href="/docs-viewer.html?doc=claude-code-framework-enforcement" class="text-blue-600 hover:text-blue-700 font-medium">
|
|
→ Claude Code Enforcement
|
|
</a>
|
|
<span class="ml-2 text-xs bg-purple-100 text-purple-800 px-2 py-1 rounded">Claude Code</span>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div class="bg-white rounded-lg p-6">
|
|
<h3 class="text-xl font-bold text-gray-900 mb-4">Examples</h3>
|
|
<ul class="space-y-3">
|
|
<li>
|
|
<a href="/demos/classification-demo.html" class="text-blue-600 hover:text-blue-700 font-medium">
|
|
→ Classification Demo
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a href="/demos/boundary-demo.html" class="text-blue-600 hover:text-blue-700 font-medium">
|
|
→ Boundary Enforcement
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a href="/demos/27027-demo.html" class="text-blue-600 hover:text-blue-700 font-medium">
|
|
→ Real Failure Cases
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div class="bg-white rounded-lg p-6">
|
|
<h3 class="text-xl font-bold text-gray-900 mb-4">Support</h3>
|
|
<p class="text-gray-600 mb-4">
|
|
Get help with implementation, integration, and troubleshooting.
|
|
</p>
|
|
<ul class="space-y-2 text-sm text-gray-600">
|
|
<li>• GitHub Issues & Discussions</li>
|
|
<li>• Implementation consulting</li>
|
|
<li>• Community Slack channel</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- CTA Section -->
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-16">
|
|
<div class="bg-gradient-to-r from-blue-600 to-indigo-600 rounded-2xl p-12 text-center text-white">
|
|
<h2 class="text-3xl font-bold mb-4">Exploring Implementation?</h2>
|
|
<p class="text-xl mb-8 opacity-90">
|
|
Explore architectural patterns for AI safety demonstrated in single-project validation.
|
|
</p>
|
|
<div class="flex justify-center space-x-4">
|
|
<a href="/docs.html" class="bg-white text-blue-600 px-8 py-3 rounded-lg font-semibold hover:bg-gray-100 transition">
|
|
View Full Documentation
|
|
</a>
|
|
<a href="/researcher.html" class="bg-blue-700 text-white px-8 py-3 rounded-lg font-semibold hover:bg-blue-800 transition border-2 border-white">
|
|
Research Background →
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Footer -->
|
|
<footer class="bg-gray-900 text-gray-400 py-12 mt-16" role="contentinfo">
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
|
<div class="grid grid-cols-1 md:grid-cols-5 gap-8">
|
|
<div>
|
|
<h3 class="text-white font-semibold mb-4">Tractatus Framework</h3>
|
|
<p class="text-sm">
|
|
Reference implementation of architectural AI safety constraints—structural governance validated in single-project deployment.
|
|
</p>
|
|
</div>
|
|
<div>
|
|
<h3 class="text-white font-semibold mb-4">Resources</h3>
|
|
<ul class="space-y-2 text-sm">
|
|
<li><a href="/docs.html" class="hover:text-white transition">Documentation</a></li>
|
|
<li><a href="/demos/tractatus-demo.html" class="hover:text-white transition">Interactive Demos</a></li>
|
|
<li><a href="/researcher.html" class="hover:text-white transition">For Researchers</a></li>
|
|
<li><a href="/implementer.html" class="hover:text-white transition">For Implementers</a></li>
|
|
<li><a href="/leader.html" class="hover:text-white transition">For Leaders</a></li>
|
|
<li><a href="/about.html" class="hover:text-white transition">About & Values</a></li>
|
|
</ul>
|
|
</div>
|
|
<div>
|
|
<h3 class="text-white font-semibold mb-4">Community</h3>
|
|
<ul class="space-y-2 text-sm">
|
|
<li><a href="/media-inquiry.html" class="hover:text-white transition">Media Inquiries</a></li>
|
|
<li><a href="/case-submission.html" class="hover:text-white transition">Submit Case Study</a></li>
|
|
<li><a href="/blog.html" class="hover:text-white transition">Blog</a></li>
|
|
<li><a href="/#newsletter" class="hover:text-white transition">Newsletter</a></li>
|
|
</ul>
|
|
</div>
|
|
<div>
|
|
<h3 class="text-white font-semibold mb-4">Support This Work</h3>
|
|
<ul class="space-y-2 text-sm">
|
|
<li><a href="/koha.html" class="hover:text-white transition">Make a Donation</a></li>
|
|
<li><a href="/koha/transparency.html" class="hover:text-white transition">Transparency Dashboard</a></li>
|
|
</ul>
|
|
</div>
|
|
<div>
|
|
<h3 class="text-white font-semibold mb-4">Acknowledgment</h3>
|
|
<p class="text-sm">
|
|
This framework acknowledges Te Tiriti o Waitangi and indigenous leadership in digital sovereignty.
|
|
Built with respect for CARE Principles and Māori data sovereignty.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<div class="mt-8 pt-8 border-t border-gray-800 text-center text-sm space-y-2">
|
|
<p class="text-gray-300">Safety Through Structure, Not Aspiration | Built with <a href="https://claude.ai/claude-code" class="text-blue-400 hover:text-blue-300 transition" target="_blank" rel="noopener">Claude Code</a></p>
|
|
<p>© 2025 John G Stroh. Licensed under <a href="https://www.apache.org/licenses/LICENSE-2.0" class="text-blue-400 hover:text-blue-300 transition" target="_blank" rel="noopener">Apache License 2.0</a>.</p>
|
|
</div>
|
|
</div>
|
|
</footer>
|
|
|
|
<!-- Version Management & PWA -->
|
|
<script src="/js/version-manager.js"></script>
|
|
|
|
</body>
|
|
</html>
|