feat(ui): rewrite implementer page and fix footer scripts on researcher/leader pages
IMPLEMENTER PAGE (public/implementer.html):
- Complete rewrite from 761 to 635 lines (developer-focused)
- Added both framework architecture diagrams (SVGs)
- Replaced fake @tractatus/framework npm package with real code examples
- Removed all marketing disclaimers and verbose filler
- Added technical specs for all 6 core services with real API examples
- Fixed GitHub repository links to match package.json
FOOTER FIXES (researcher.html, leader.html):
- Fixed script loading order (version-manager before i18n)
- Removed duplicate <!-- Footer --> comment in researcher.html
- Now matches index.html script structure for consistency
Result: Implementer page now shows actual framework documentation with real code examples and architecture diagrams
🤖 Generated with Claude Code
Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
TheFlow
parent
a6709bc9a5
commit
7d693dcc78
3 changed files with 1777 additions and 0 deletions
635
public/implementer.html
Normal file
635
public/implementer.html
Normal file
|
|
@ -0,0 +1,635 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<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.">
|
||||
|
||||
<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">
|
||||
<link rel="stylesheet" href="/css/tailwind.css?v=0.1.0.1760254958072">
|
||||
<link rel="stylesheet" href="/css/tractatus-theme.min.css?v=1760816800">
|
||||
<style>
|
||||
.skip-link { position: absolute; left: -9999px; 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; }
|
||||
</style>
|
||||
</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.0.1760254958072"></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">Home</a></li>
|
||||
<li class="text-gray-400">/</li>
|
||||
<li class="text-gray-900 font-medium" aria-current="page">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-5xl font-bold text-gray-900 mb-6">
|
||||
Framework Implementation Guide
|
||||
</h1>
|
||||
<p class="text-xl text-gray-600 max-w-3xl mx-auto">
|
||||
Technical documentation for integrating the 6 Tractatus governance services into your AI systems. Production-tested architecture and real code examples.
|
||||
</p>
|
||||
</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 space-x-8 text-sm">
|
||||
<a href="#architecture" class="text-blue-600 hover:text-blue-800 font-medium">Architecture</a>
|
||||
<a href="#services" class="text-blue-600 hover:text-blue-800 font-medium">Services</a>
|
||||
<a href="#api" class="text-blue-600 hover:text-blue-800 font-medium">API Reference</a>
|
||||
<a href="#examples" class="text-blue-600 hover:text-blue-800 font-medium">Code Examples</a>
|
||||
<a href="#deployment" class="text-blue-600 hover:text-blue-800 font-medium">Deployment</a>
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Framework Architecture -->
|
||||
<div id="architecture" 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">Framework Architecture</h2>
|
||||
|
||||
<!-- 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">Service Interaction Flow</h3>
|
||||
<div class="bg-gray-50 rounded-lg p-6">
|
||||
<img src="/docs/diagrams/architecture-main-flow.svg"
|
||||
alt="Tractatus Framework Architecture: Shows how 6 governance services interact in sequence"
|
||||
class="w-full h-auto"
|
||||
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">
|
||||
<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>
|
||||
</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">Service Trigger Conditions</h3>
|
||||
<div class="bg-gray-50 rounded-lg p-6">
|
||||
<img src="/docs/diagrams/trigger-decision-tree.svg"
|
||||
alt="Service Trigger Decision Tree: When each framework service activates"
|
||||
class="w-full h-auto"
|
||||
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">
|
||||
<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>
|
||||
</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">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">BoundaryEnforcer</h3>
|
||||
<p class="text-sm text-gray-600 mb-4">
|
||||
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>Boundaries:</strong>
|
||||
<ul class="list-disc list-inside mt-2 space-y-1">
|
||||
<li>VALUES (12.1) - Ethics, privacy, principles</li>
|
||||
<li>INNOVATION (12.2) - Architectural decisions</li>
|
||||
<li>WISDOM (12.3) - Strategic judgment</li>
|
||||
<li>PURPOSE (12.4) - Goal definition</li>
|
||||
</ul>
|
||||
</div>
|
||||
<code class="block bg-gray-900 text-gray-100 p-3 rounded text-xs overflow-x-auto">
|
||||
const { checkBoundary } = require('./services/BoundaryEnforcer')
|
||||
const result = await checkBoundary(decision)
|
||||
// Returns: { allowed: false, requires_human: true }
|
||||
</code>
|
||||
</div>
|
||||
|
||||
<!-- InstructionPersistenceClassifier -->
|
||||
<div class="bg-white rounded-lg p-6 shadow-lg">
|
||||
<h3 class="text-xl font-bold text-gray-900 mb-3">InstructionPersistenceClassifier</h3>
|
||||
<p class="text-sm text-gray-600 mb-4">
|
||||
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>Classification:</strong>
|
||||
<ul class="list-disc list-inside mt-2 space-y-1">
|
||||
<li>Quadrant (STRATEGIC/OPERATIONAL/TACTICAL/SYSTEM)</li>
|
||||
<li>Persistence (HIGH/MEDIUM/LOW)</li>
|
||||
<li>Temporal scope (PROJECT/SESSION/TASK)</li>
|
||||
<li>Explicitness score (0.0-1.0)</li>
|
||||
</ul>
|
||||
</div>
|
||||
<code class="block bg-gray-900 text-gray-100 p-3 rounded text-xs overflow-x-auto">
|
||||
const { classify } = require('./services/InstructionPersistenceClassifier')
|
||||
const result = await classify(instruction)
|
||||
// Returns: { quadrant, persistence, temporal_scope, explicitness }
|
||||
</code>
|
||||
</div>
|
||||
|
||||
<!-- CrossReferenceValidator -->
|
||||
<div class="bg-white rounded-lg p-6 shadow-lg">
|
||||
<h3 class="text-xl font-bold text-gray-900 mb-3">CrossReferenceValidator</h3>
|
||||
<p class="text-sm text-gray-600 mb-4">
|
||||
Validates AI actions against stored instructions to prevent pattern recognition overrides.
|
||||
</p>
|
||||
<div class="text-sm text-gray-700 mb-3">
|
||||
<strong>Validation:</strong>
|
||||
<ul class="list-disc list-inside mt-2 space-y-1">
|
||||
<li>Checks action against HIGH persistence instructions</li>
|
||||
<li>Detects conflicts (pattern vs explicit instruction)</li>
|
||||
<li>Provides correct parameters when rejected</li>
|
||||
</ul>
|
||||
</div>
|
||||
<code class="block bg-gray-900 text-gray-100 p-3 rounded text-xs overflow-x-auto">
|
||||
const { validate } = require('./services/CrossReferenceValidator')
|
||||
const result = await validate(action, instructions)
|
||||
// Returns: { status: 'REJECTED', conflicts, correct_parameters }
|
||||
</code>
|
||||
</div>
|
||||
|
||||
<!-- ContextPressureMonitor -->
|
||||
<div class="bg-white rounded-lg p-6 shadow-lg">
|
||||
<h3 class="text-xl font-bold text-gray-900 mb-3">ContextPressureMonitor</h3>
|
||||
<p class="text-sm text-gray-600 mb-4">
|
||||
Monitors token usage and context pressure, triggering safety protocols at thresholds.
|
||||
</p>
|
||||
<div class="text-sm text-gray-700 mb-3">
|
||||
<strong>Pressure Levels:</strong>
|
||||
<ul class="list-disc list-inside mt-2 space-y-1">
|
||||
<li>NORMAL (0-50%) - Full operation</li>
|
||||
<li>ELEVATED (50-75%) - Increase verification</li>
|
||||
<li>HIGH (75-90%) - Reduce complexity</li>
|
||||
<li>CRITICAL (90%+) - Suggest handoff</li>
|
||||
</ul>
|
||||
</div>
|
||||
<code class="block bg-gray-900 text-gray-100 p-3 rounded text-xs overflow-x-auto">
|
||||
const { analyzePressure } = require('./services/ContextPressureMonitor')
|
||||
const result = await analyzePressure(tokens, messages)
|
||||
// Returns: { level: 'HIGH', score: 82, shouldReduce: true }
|
||||
</code>
|
||||
</div>
|
||||
|
||||
<!-- MetacognitiveVerifier -->
|
||||
<div class="bg-white rounded-lg p-6 shadow-lg">
|
||||
<h3 class="text-xl font-bold text-gray-900 mb-3">MetacognitiveVerifier</h3>
|
||||
<p class="text-sm text-gray-600 mb-4">
|
||||
Verifies action reasoning and confidence, requiring confirmation for low-confidence actions.
|
||||
</p>
|
||||
<div class="text-sm text-gray-700 mb-3">
|
||||
<strong>Verification:</strong>
|
||||
<ul class="list-disc list-inside mt-2 space-y-1">
|
||||
<li>Confidence scoring (0.0-1.0)</li>
|
||||
<li>Selective mode (HIGH persistence only)</li>
|
||||
<li>Requires confirmation if confidence < 0.7</li>
|
||||
</ul>
|
||||
</div>
|
||||
<code class="block bg-gray-900 text-gray-100 p-3 rounded text-xs overflow-x-auto">
|
||||
const { verify } = require('./services/MetacognitiveVerifier')
|
||||
const result = await verify(action, reasoning)
|
||||
// Returns: { confidence: 0.65, requires_confirmation: true }
|
||||
</code>
|
||||
</div>
|
||||
|
||||
<!-- PluralisticDeliberationOrchestrator -->
|
||||
<div class="bg-white rounded-lg p-6 shadow-lg">
|
||||
<h3 class="text-xl font-bold text-gray-900 mb-3">PluralisticDeliberationOrchestrator</h3>
|
||||
<p class="text-sm text-gray-600 mb-4">
|
||||
Manages multi-stakeholder deliberation ensuring value pluralism in decisions.
|
||||
</p>
|
||||
<div class="text-sm text-gray-700 mb-3">
|
||||
<strong>Features:</strong>
|
||||
<ul class="list-disc list-inside mt-2 space-y-1">
|
||||
<li>Stakeholder perspective tracking</li>
|
||||
<li>Value conflict detection</li>
|
||||
<li>Deliberation session management</li>
|
||||
<li>Precedent storage</li>
|
||||
</ul>
|
||||
</div>
|
||||
<code class="block bg-gray-900 text-gray-100 p-3 rounded text-xs overflow-x-auto">
|
||||
const { orchestrate } = require('./services/PluralisticDeliberationOrchestrator')
|
||||
const result = await orchestrate(decision, stakeholders)
|
||||
// Returns: { decision, perspectives, conflicts_identified }
|
||||
</code>
|
||||
</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">📁 Source Code</p>
|
||||
<p class="text-sm text-blue-800">
|
||||
All services are available in the GitHub repository:
|
||||
<a href="https://github.com/AgenticGovernance/tractatus-framework/tree/main/src/services"
|
||||
class="underline font-medium hover:text-blue-900"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer">
|
||||
/src/services/
|
||||
</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">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">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>Keywords detected:</strong> value, principle, ethic, moral, should, ought, right, wrong, privacy, policy, trade-off, etc.
|
||||
</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">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>Quadrants:</strong> STRATEGIC, OPERATIONAL, TACTICAL, SYSTEM, STORAGE<br>
|
||||
<strong>Persistence:</strong> HIGH (override all), MEDIUM (session-scoped), LOW (can be superseded)
|
||||
</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">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">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">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">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">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">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">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">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 guide available at:
|
||||
<a href="https://github.com/AgenticGovernance/tractatus-framework/tree/main/deployment-quickstart"
|
||||
class="underline font-medium hover:text-blue-900"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer">
|
||||
/deployment-quickstart/
|
||||
</a>
|
||||
</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">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">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">
|
||||
→ GitHub Repository
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/docs.html" class="text-blue-600 hover:text-blue-700 font-medium">
|
||||
→ Full Documentation
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/demos/27027-demo.html" class="text-blue-600 hover:text-blue-700 font-medium">
|
||||
→ Live Demos
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="bg-white rounded-lg p-6">
|
||||
<h3 class="text-xl font-bold text-gray-900 mb-4">Source Code</h3>
|
||||
<ul class="space-y-3 text-sm">
|
||||
<li>
|
||||
<a href="https://github.com/AgenticGovernance/tractatus-framework/tree/main/src/services"
|
||||
class="text-blue-600 hover:text-blue-700 font-medium"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer">
|
||||
→ /src/services/
|
||||
</a>
|
||||
<span class="text-gray-500 ml-2">11 services</span>
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://github.com/AgenticGovernance/tractatus-framework/tree/main/src/models"
|
||||
class="text-blue-600 hover:text-blue-700 font-medium"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer">
|
||||
→ /src/models/
|
||||
</a>
|
||||
<span class="text-gray-500 ml-2">10 MongoDB models</span>
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://github.com/AgenticGovernance/tractatus-framework/tree/main/tests"
|
||||
class="text-blue-600 hover:text-blue-700 font-medium"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer">
|
||||
→ /tests/
|
||||
</a>
|
||||
<span class="text-gray-500 ml-2">17 test files</span>
|
||||
</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 text-sm">
|
||||
Questions about implementation or integration?
|
||||
</p>
|
||||
<ul class="space-y-2 text-sm text-gray-600">
|
||||
<li>• GitHub Issues</li>
|
||||
<li>• GitHub Discussions</li>
|
||||
<li>• research@agenticgovernance.digital</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Footer -->
|
||||
<script src="/js/i18n-simple.js?v=1760818106"></script>
|
||||
<script src="/js/components/language-selector.js?v=1760818106"></script>
|
||||
<script src="/js/scroll-animations.js"></script>
|
||||
<script src="/js/page-transitions.js"></script>
|
||||
<script src="/js/version-manager.js"></script>
|
||||
<script src="/js/components/footer.js"></script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
614
public/leader.html
Normal file
614
public/leader.html
Normal file
|
|
@ -0,0 +1,614 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>For Decision-Makers | Tractatus AI Safety Framework</title>
|
||||
<meta name="description" content="Structural AI governance for organisations deploying LLM systems at scale. Research framework addressing architectural gaps in AI 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-new.svg">
|
||||
|
||||
<link rel="icon" type="image/svg+xml" href="/favicon-new.svg">
|
||||
<link rel="stylesheet" href="/css/fonts.css">
|
||||
<link rel="stylesheet" href="/css/tailwind.css?v=0.1.0.1760254958072">
|
||||
<link rel="stylesheet" href="/css/tractatus-theme.min.css?v=1760816800">
|
||||
<style>
|
||||
.hover-lift { transition: all 0.3s ease; }
|
||||
.hover-lift:hover { transform: translateY(-2px); }
|
||||
.skip-link { position: absolute; left: -9999px; }
|
||||
.skip-link:focus { left: 0; z-index: 100; background: white; padding: 1rem; }
|
||||
a:focus, button:focus { outline: 2px solid #d97706; outline-offset: 2px; }
|
||||
|
||||
/* Accordion styles */
|
||||
.accordion-button {
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
}
|
||||
.accordion-content {
|
||||
max-height: 0;
|
||||
overflow: hidden;
|
||||
transition: max-height 0.3s ease-out;
|
||||
}
|
||||
.accordion-content.active {
|
||||
max-height: 2000px;
|
||||
transition: max-height 0.5s ease-in;
|
||||
}
|
||||
.accordion-icon {
|
||||
transition: transform 0.3s ease;
|
||||
}
|
||||
.accordion-icon.active {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body class="bg-white">
|
||||
|
||||
<a href="#main-content" class="skip-link">Skip to main content</a>
|
||||
|
||||
<script src="/js/components/navbar.js?v=0.1.0.1760254958072"></script>
|
||||
|
||||
<!-- Breadcrumb Navigation -->
|
||||
<nav class="bg-gray-50 border-b border-gray-200 py-3" aria-label="Breadcrumb">
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<ol class="flex items-center space-x-2 text-sm">
|
||||
<li><a href="/" class="hover:underline transition-colors text-tractatus-link">Home</a></li>
|
||||
<li class="text-gray-400">/</li>
|
||||
<li class="text-gray-900 font-medium" aria-current="page">Leader</li>
|
||||
</ol>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<!-- Header -->
|
||||
<div class="bg-gray-50 border-b border-gray-200 py-16">
|
||||
<div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div class="inline-flex items-center bg-gray-200 text-gray-700 px-3 py-1 rounded text-sm font-medium mb-6" data-i18n="header.badge">
|
||||
Research Framework • Early Development
|
||||
</div>
|
||||
<h1 class="text-4xl font-bold text-gray-900 mb-4" data-i18n="header.title">
|
||||
Tractatus: Architectural Governance for LLM Systems
|
||||
</h1>
|
||||
<p class="text-lg text-gray-600 leading-relaxed" data-i18n="header.subtitle">
|
||||
A governance framework addressing structural gaps in AI safety through external architectural controls. Designed for organisations deploying large language models at scale where conventional oversight mechanisms prove insufficient.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Main Content -->
|
||||
<div id="main-content" class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 py-16">
|
||||
|
||||
<!-- Problem Statement -->
|
||||
<section class="mb-16">
|
||||
<h2 class="text-2xl font-bold text-gray-900 mb-6" data-i18n="sections.governance_gap.heading">The Governance Gap</h2>
|
||||
<div class="prose prose-gray max-w-none">
|
||||
<p class="text-gray-700 mb-4" data-i18n="sections.governance_gap.intro">
|
||||
Current AI governance approaches—policy documents, training programmes, ethical guidelines—rely on voluntary compliance. LLM systems can bypass these controls simply by not invoking them. When an AI agent needs to check a policy, it must choose to do so. When it should escalate a decision to human oversight, it must recognise that obligation.
|
||||
</p>
|
||||
<p class="text-gray-700 mb-4" data-i18n="sections.governance_gap.problem">
|
||||
This creates a structural problem: governance exists only insofar as the AI acknowledges it. For organisations subject to EU AI Act Article 14 (human oversight requirements) or deploying AI in high-stakes domains, this voluntary model is inadequate.
|
||||
</p>
|
||||
<p class="text-gray-700" data-i18n="sections.governance_gap.solution">
|
||||
Tractatus explores whether governance can be made architecturally external—difficult to bypass not through better prompts, but through system design that places control points outside the AI's discretion.
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Technical Approach (Accordion) -->
|
||||
<section class="mb-16">
|
||||
<h2 class="text-2xl font-bold text-gray-900 mb-6" data-i18n="sections.architectural_approach.heading">Architectural Approach</h2>
|
||||
|
||||
<!-- Three-Layer Architecture Card -->
|
||||
<div class="border border-gray-300 rounded-lg mb-4">
|
||||
<div class="accordion-button bg-gray-50 p-5 flex justify-between items-center" data-accordion="arch-layers">
|
||||
<h3 class="font-semibold text-gray-900" data-i18n="sections.architectural_approach.three_layer_title">Three-Layer Architecture</h3>
|
||||
<svg id="arch-layers-icon" class="accordion-icon w-5 h-5 text-gray-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/>
|
||||
</svg>
|
||||
</div>
|
||||
<div id="arch-layers-content" class="accordion-content">
|
||||
<div class="p-5 border-t border-gray-200 space-y-3 text-sm text-gray-700">
|
||||
<div class="flex gap-3">
|
||||
<span class="font-mono text-gray-500">1.</span>
|
||||
<div>
|
||||
<strong>Agent Runtime Layer</strong> — Any LLM system (Claude Code, Copilot, custom agents, LangChain, CrewAI). The AI system being governed.
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex gap-3">
|
||||
<span class="font-mono text-gray-500">2.</span>
|
||||
<div>
|
||||
<strong>Governance Layer</strong> — Six autonomous services that intercept, validate, and document AI operations. External to the AI runtime.
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex gap-3">
|
||||
<span class="font-mono text-gray-500">3.</span>
|
||||
<div>
|
||||
<strong>Persistent Storage Layer</strong> — Immutable audit logs, governance rules, instruction history. Cannot be altered by AI prompts.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Six Governance Services Card -->
|
||||
<div class="border border-gray-300 rounded-lg">
|
||||
<div class="accordion-button bg-gray-50 p-5 flex justify-between items-center" data-accordion="services">
|
||||
<h3 class="font-semibold text-gray-900" data-i18n="sections.architectural_approach.services_title">Six Governance Services</h3>
|
||||
<svg id="services-icon" class="accordion-icon w-5 h-5 text-gray-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/>
|
||||
</svg>
|
||||
</div>
|
||||
<div id="services-content" class="accordion-content">
|
||||
<div class="p-5 border-t border-gray-200 space-y-3 text-sm">
|
||||
<div class="border-l-2 border-amber-500 pl-4">
|
||||
<div class="font-semibold text-gray-900">BoundaryEnforcer</div>
|
||||
<div class="text-gray-600">Blocks AI from making values decisions without human approval. Enforces decision boundaries through architectural controls.</div>
|
||||
</div>
|
||||
<div class="border-l-2 border-gray-300 pl-4">
|
||||
<div class="font-semibold text-gray-900">InstructionPersistenceClassifier</div>
|
||||
<div class="text-gray-600">Prevents pattern bias from overriding explicit instructions. Stores organisational directives external to AI context.</div>
|
||||
</div>
|
||||
<div class="border-l-2 border-gray-300 pl-4">
|
||||
<div class="font-semibold text-gray-900">CrossReferenceValidator</div>
|
||||
<div class="text-gray-600">Validates AI actions against stored policies before execution. Detects conflicts with established rules.</div>
|
||||
</div>
|
||||
<div class="border-l-2 border-gray-300 pl-4">
|
||||
<div class="font-semibold text-gray-900">ContextPressureMonitor</div>
|
||||
<div class="text-gray-600">Tracks session complexity, token usage, conversation length. Detects degradation in decision quality.</div>
|
||||
</div>
|
||||
<div class="border-l-2 border-gray-300 pl-4">
|
||||
<div class="font-semibold text-gray-900">MetacognitiveVerifier</div>
|
||||
<div class="text-gray-600">Validates reasoning quality before complex operations. Self-checks alignment, coherence, alternatives.</div>
|
||||
</div>
|
||||
<div class="border-l-2 border-gray-300 pl-4">
|
||||
<div class="font-semibold text-gray-900">PluralisticDeliberationOrchestrator</div>
|
||||
<div class="text-gray-600">Facilitates multi-stakeholder deliberation for values conflicts. Non-hierarchical engagement with documented dissent.</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Governance Capabilities Demonstrations -->
|
||||
<section class="mb-16">
|
||||
<h2 class="text-2xl font-bold text-gray-900 mb-6" data-i18n="sections.governance_capabilities.heading">Governance Capabilities</h2>
|
||||
<p class="text-sm text-gray-600 mb-6" data-i18n="sections.governance_capabilities.intro">
|
||||
Three interactive demonstrations showing governance infrastructure in operation. These show mechanisms, not fictional scenarios.
|
||||
</p>
|
||||
|
||||
<!-- Demo 1: Audit Trail & Compliance Evidence -->
|
||||
<div class="border border-gray-300 rounded-lg mb-4">
|
||||
<div class="accordion-button bg-gradient-to-r from-blue-50 to-indigo-50 p-5 flex justify-between items-center" data-accordion="demo-audit">
|
||||
<div>
|
||||
<h3 class="font-semibold text-gray-900" data-i18n="sections.governance_capabilities.audit_trail_title">Audit Trail & Compliance Evidence Generation</h3>
|
||||
<p class="text-sm text-gray-600 mt-1" data-i18n="sections.governance_capabilities.audit_trail_desc">Immutable logging, evidence extraction, regulatory reporting</p>
|
||||
</div>
|
||||
<svg id="demo-audit-icon" class="accordion-icon w-5 h-5 text-gray-500 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/>
|
||||
</svg>
|
||||
</div>
|
||||
<div id="demo-audit-content" class="accordion-content">
|
||||
<div class="p-5 border-t border-gray-200">
|
||||
<div class="bg-white rounded border border-gray-200 p-4 mb-4">
|
||||
<h4 class="text-sm font-semibold text-gray-900 mb-3">Sample Audit Log Structure</h4>
|
||||
<pre class="text-xs font-mono bg-gray-50 p-3 rounded overflow-x-auto text-gray-700"><code>{
|
||||
"timestamp": "2025-10-13T14:23:17.482Z",
|
||||
"session_id": "sess_2025-10-13-001",
|
||||
"event_type": "BOUNDARY_CHECK",
|
||||
"service": "BoundaryEnforcer",
|
||||
"decision": "BLOCKED",
|
||||
"reason": "Values decision requires human approval",
|
||||
"context": {
|
||||
"domain": "cost_vs_safety_tradeoff",
|
||||
"ai_recommendation": "[redacted]",
|
||||
"governance_rule": "TRA-OPS-0003"
|
||||
},
|
||||
"human_escalation": {
|
||||
"required": true,
|
||||
"notified": ["senior_engineer@org.com"],
|
||||
"status": "pending_approval"
|
||||
},
|
||||
"compliance_tags": ["EU_AI_ACT_Article14", "human_oversight"]
|
||||
}</code></pre>
|
||||
</div>
|
||||
|
||||
<div class="space-y-3 text-sm text-gray-700">
|
||||
<div class="bg-blue-50 border-l-4 border-blue-500 p-3">
|
||||
<strong class="text-blue-900">Immutability:</strong> <span class="text-blue-800">Audit logs stored in append-only database. AI cannot modify or delete entries.</span>
|
||||
</div>
|
||||
<div class="bg-green-50 border-l-4 border-green-500 p-3">
|
||||
<strong class="text-green-900">Compliance Evidence:</strong> <span class="text-green-800">Automatic tagging with regulatory requirements (EU AI Act Article 14, GDPR Article 22, etc.)</span>
|
||||
</div>
|
||||
<div class="bg-amber-50 border-l-4 border-amber-500 p-3">
|
||||
<strong class="text-amber-900">Export Capabilities:</strong> <span class="text-amber-800">Generate compliance reports for regulators showing human oversight enforcement</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mt-4 pt-4 border-t border-gray-200">
|
||||
<p class="text-xs text-gray-600">
|
||||
When regulator asks "How do you prove effective human oversight at scale?", this audit trail provides structural evidence independent of AI cooperation.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Demo 2: Continuous Improvement Cycle -->
|
||||
<div class="border border-gray-300 rounded-lg mb-4">
|
||||
<div class="accordion-button bg-gradient-to-r from-green-50 to-emerald-50 p-5 flex justify-between items-center" data-accordion="demo-learning">
|
||||
<div>
|
||||
<h3 class="font-semibold text-gray-900" data-i18n="sections.governance_capabilities.continuous_improvement_title">Continuous Improvement: Incident → Rule Creation</h3>
|
||||
<p class="text-sm text-gray-600 mt-1" data-i18n="sections.governance_capabilities.continuous_improvement_desc">Learning from failures, automated rule generation, validation</p>
|
||||
</div>
|
||||
<svg id="demo-learning-icon" class="accordion-icon w-5 h-5 text-gray-500 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/>
|
||||
</svg>
|
||||
</div>
|
||||
<div id="demo-learning-content" class="accordion-content">
|
||||
<div class="p-5 border-t border-gray-200">
|
||||
<div class="space-y-4">
|
||||
<!-- Flow diagram -->
|
||||
<div class="bg-gray-50 border border-gray-200 rounded p-4">
|
||||
<h4 class="text-sm font-semibold text-gray-900 mb-4">Incident Learning Flow</h4>
|
||||
<div class="space-y-3">
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="bg-red-100 text-red-700 px-3 py-2 rounded text-xs font-medium w-40">1. Incident Detected</div>
|
||||
<div class="text-xs text-gray-600">CrossReferenceValidator flags policy violation</div>
|
||||
</div>
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="bg-amber-100 text-amber-900 px-3 py-2 rounded text-xs font-medium w-40">2. Root Cause Analysis</div>
|
||||
<div class="text-xs text-gray-600">Automated analysis of instruction history, context state</div>
|
||||
</div>
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="bg-blue-100 text-blue-700 px-3 py-2 rounded text-xs font-medium w-40">3. Rule Generation</div>
|
||||
<div class="text-xs text-gray-600">Proposed governance rule to prevent recurrence</div>
|
||||
</div>
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="bg-purple-100 text-purple-700 px-3 py-2 rounded text-xs font-medium w-40">4. Human Validation</div>
|
||||
<div class="text-xs text-gray-600">Governance board reviews and approves new rule</div>
|
||||
</div>
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="bg-green-100 text-green-700 px-3 py-2 rounded text-xs font-medium w-40">5. Deployment</div>
|
||||
<div class="text-xs text-gray-600">Rule added to persistent storage, active immediately</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Example rule -->
|
||||
<div class="bg-white border border-gray-200 rounded p-4">
|
||||
<h4 class="text-sm font-semibold text-gray-900 mb-2">Example Generated Rule</h4>
|
||||
<pre class="text-xs font-mono bg-gray-50 p-3 rounded overflow-x-auto text-gray-700"><code>{
|
||||
"rule_id": "TRA-OPS-0042",
|
||||
"created": "2025-10-13T15:45:00Z",
|
||||
"trigger": "incident_27027_pattern_bias",
|
||||
"description": "Prevent AI from defaulting to pattern recognition when explicit numeric values specified",
|
||||
"enforcement": {
|
||||
"service": "InstructionPersistenceClassifier",
|
||||
"action": "STORE_AND_VALIDATE",
|
||||
"priority": "HIGH"
|
||||
},
|
||||
"validation_required": true,
|
||||
"approved_by": "governance_board",
|
||||
"status": "active"
|
||||
}</code></pre>
|
||||
</div>
|
||||
|
||||
<div class="text-xs text-gray-600 pt-3 border-t border-gray-200">
|
||||
<strong>Organisational Learning:</strong> When one team encounters governance failure, entire organisation benefits from automatically generated preventive rules. Scales governance knowledge without manual documentation.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Demo 3: PluralisticDeliberationOrchestrator -->
|
||||
<div class="border border-gray-300 rounded-lg">
|
||||
<div class="accordion-button bg-gradient-to-r from-purple-50 to-pink-50 p-5 flex justify-between items-center" data-accordion="demo-deliberation">
|
||||
<div>
|
||||
<h3 class="font-semibold text-gray-900" data-i18n="sections.governance_capabilities.pluralistic_deliberation_title">Pluralistic Deliberation: Values Conflict Resolution</h3>
|
||||
<p class="text-sm text-gray-600 mt-1" data-i18n="sections.governance_capabilities.pluralistic_deliberation_desc">Multi-stakeholder engagement, non-hierarchical process, moral remainder documentation</p>
|
||||
</div>
|
||||
<svg id="demo-deliberation-icon" class="accordion-icon w-5 h-5 text-gray-500 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/>
|
||||
</svg>
|
||||
</div>
|
||||
<div id="demo-deliberation-content" class="accordion-content">
|
||||
<div class="p-5 border-t border-gray-200">
|
||||
<div class="space-y-4">
|
||||
<!-- Abstract conflict scenario -->
|
||||
<div class="bg-amber-50 border-l-4 border-amber-500 p-4 text-sm">
|
||||
<strong class="text-amber-900">Conflict Detection:</strong>
|
||||
<p class="text-amber-800 mt-1">AI system identifies competing values in decision context (e.g., efficiency vs. transparency, cost vs. risk mitigation, innovation vs. regulatory compliance). BoundaryEnforcer blocks autonomous decision, escalates to PluralisticDeliberationOrchestrator.</p>
|
||||
</div>
|
||||
|
||||
<!-- Stakeholder identification -->
|
||||
<div class="bg-white border border-gray-200 rounded p-4">
|
||||
<h4 class="text-sm font-semibold text-gray-900 mb-3">Stakeholder Identification Process</h4>
|
||||
<div class="space-y-2 text-xs text-gray-700">
|
||||
<div class="flex gap-2">
|
||||
<span class="text-purple-600">1.</span>
|
||||
<div><strong>Automatic Detection:</strong> System identifies which values frameworks are in tension (utilitarian, deontological, virtue ethics, contractarian, etc.)</div>
|
||||
</div>
|
||||
<div class="flex gap-2">
|
||||
<span class="text-purple-600">2.</span>
|
||||
<div><strong>Stakeholder Mapping:</strong> Identifies parties with legitimate interest in decision (affected parties, domain experts, governance authorities, community representatives)</div>
|
||||
</div>
|
||||
<div class="flex gap-2">
|
||||
<span class="text-purple-600">3.</span>
|
||||
<div><strong>Human Approval:</strong> Governance board reviews stakeholder list, adds/removes as appropriate (TRA-OPS-0002)</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Deliberation process -->
|
||||
<div class="bg-white border border-gray-200 rounded p-4">
|
||||
<h4 class="text-sm font-semibold text-gray-900 mb-3">Non-Hierarchical Deliberation</h4>
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-3 text-xs">
|
||||
<div class="bg-blue-50 p-3 rounded">
|
||||
<div class="font-semibold text-blue-900 mb-1">Equal Voice</div>
|
||||
<div class="text-blue-800">All stakeholders present perspectives without hierarchical weighting. Technical experts don't automatically override community concerns.</div>
|
||||
</div>
|
||||
<div class="bg-green-50 p-3 rounded">
|
||||
<div class="font-semibold text-green-900 mb-1">Documented Dissent</div>
|
||||
<div class="text-green-800">Minority positions recorded in full. Dissenting stakeholders can document why consensus fails their values framework.</div>
|
||||
</div>
|
||||
<div class="bg-purple-50 p-3 rounded">
|
||||
<div class="font-semibold text-purple-900 mb-1">Moral Remainder</div>
|
||||
<div class="text-purple-800">System documents unavoidable value trade-offs. Even "correct" decision creates documented harm to other legitimate values.</div>
|
||||
</div>
|
||||
<div class="bg-amber-50 p-3 rounded">
|
||||
<div class="font-semibold text-amber-900 mb-1">Precedent (Not Binding)</div>
|
||||
<div class="text-amber-800">Decision becomes informative precedent for similar conflicts. But context differences mean precedents guide, not dictate.</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Output structure -->
|
||||
<div class="bg-gray-50 border border-gray-200 rounded p-4">
|
||||
<h4 class="text-sm font-semibold text-gray-900 mb-2">Deliberation Record Structure</h4>
|
||||
<pre class="text-xs font-mono bg-white p-3 rounded overflow-x-auto text-gray-700"><code>{
|
||||
"deliberation_id": "delib_2025-10-13-003",
|
||||
"conflict_type": "efficiency_vs_transparency",
|
||||
"stakeholders": [
|
||||
{"role": "technical_lead", "position": "favour_efficiency"},
|
||||
{"role": "compliance_officer", "position": "favour_transparency"},
|
||||
{"role": "customer_representative", "position": "favour_transparency"},
|
||||
{"role": "operations_manager", "position": "favour_efficiency"}
|
||||
],
|
||||
"decision": "favour_transparency_with_mitigation",
|
||||
"rationale": "[documented reasoning]",
|
||||
"dissent": {
|
||||
"stakeholders": ["technical_lead", "operations_manager"],
|
||||
"reasoning": "[efficiency concerns documented in full]"
|
||||
},
|
||||
"moral_remainder": {
|
||||
"acknowledged_harms": "Reduced operational efficiency, increased resource costs",
|
||||
"mitigation_measures": "Phased transparency implementation, efficiency monitoring"
|
||||
},
|
||||
"precedent_status": "informative_not_binding"
|
||||
}</code></pre>
|
||||
</div>
|
||||
|
||||
<div class="text-xs text-gray-600 pt-3 border-t border-gray-200">
|
||||
<strong>Key Principle:</strong> When legitimate values conflict, no algorithm can determine the "correct" answer. Tractatus ensures decisions are made through inclusive deliberation with full documentation of trade-offs, rather than AI imposing single values framework or decision-maker dismissing stakeholder concerns.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Development Status (Accordion) -->
|
||||
<section class="mb-16">
|
||||
<h2 class="text-2xl font-bold text-gray-900 mb-6" data-i18n="sections.development_status.heading">Development Status</h2>
|
||||
|
||||
<div class="bg-amber-50 border border-amber-200 rounded-lg p-6 mb-6">
|
||||
<p class="text-sm text-amber-900 font-medium mb-2" data-i18n="sections.development_status.warning_title">Early-Stage Research Framework</p>
|
||||
<p class="text-sm text-amber-800" data-i18n="sections.development_status.warning_text">
|
||||
Tractatus is a proof-of-concept developed over six months in a single project context (this website). It demonstrates architectural patterns for AI governance but has not undergone independent validation, red-team testing, or multi-organisation deployment.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="border border-gray-300 rounded-lg">
|
||||
<div class="accordion-button bg-gray-50 p-5 flex justify-between items-center" data-accordion="validation">
|
||||
<h3 class="font-semibold text-gray-900" data-i18n="sections.development_status.validation_title">Validated vs. Not Validated</h3>
|
||||
<svg id="validation-icon" class="accordion-icon w-5 h-5 text-gray-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/>
|
||||
</svg>
|
||||
</div>
|
||||
<div id="validation-content" class="accordion-content">
|
||||
<div class="p-5 border-t border-gray-200 space-y-4 text-sm text-gray-700">
|
||||
<div>
|
||||
<strong class="text-gray-900">Validated:</strong> Framework successfully governs Claude Code in development workflows. User reports order-of-magnitude improvement in productivity for non-technical operators building production systems.
|
||||
</div>
|
||||
<div>
|
||||
<strong class="text-gray-900">Not Validated:</strong> Performance at enterprise scale, integration complexity with existing systems, effectiveness against adversarial prompts, cross-platform consistency.
|
||||
</div>
|
||||
<div>
|
||||
<strong class="text-gray-900">Known Limitation:</strong> Framework can be bypassed if AI simply chooses not to use governance tools. Voluntary invocation remains a structural weakness requiring external enforcement mechanisms.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- EU AI Act (Accordion) -->
|
||||
<section class="mb-16">
|
||||
<h2 class="text-2xl font-bold text-gray-900 mb-6" data-i18n="sections.eu_ai_act.heading">EU AI Act Considerations</h2>
|
||||
|
||||
<div class="border border-gray-300 rounded-lg">
|
||||
<div class="accordion-button bg-gray-50 p-5 flex justify-between items-center" data-accordion="euaiact">
|
||||
<h3 class="font-semibold text-gray-900" data-i18n="sections.eu_ai_act.article_14_title">Regulation 2024/1689, Article 14: Human Oversight</h3>
|
||||
<svg id="euaiact-icon" class="accordion-icon w-5 h-5 text-gray-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/>
|
||||
</svg>
|
||||
</div>
|
||||
<div id="euaiact-content" class="accordion-content">
|
||||
<div class="p-5 border-t border-gray-200 prose prose-sm max-w-none text-gray-700">
|
||||
<p class="mb-4">
|
||||
The EU AI Act (Regulation 2024/1689) establishes human oversight requirements for high-risk AI systems (Article 14). Organisations must ensure AI systems are "effectively overseen by natural persons" with authority to interrupt or disregard AI outputs.
|
||||
</p>
|
||||
<p class="mb-4">
|
||||
Tractatus addresses this through architectural controls that:
|
||||
</p>
|
||||
<ul class="list-disc pl-6 space-y-2 mb-4">
|
||||
<li>Generate immutable audit trails documenting AI decision-making processes</li>
|
||||
<li>Enforce human approval requirements for values-based decisions</li>
|
||||
<li>Provide evidence of oversight mechanisms independent of AI cooperation</li>
|
||||
<li>Document compliance with transparency and record-keeping obligations</li>
|
||||
</ul>
|
||||
<p class="mb-4">
|
||||
<strong>This does not constitute legal compliance advice.</strong> Organisations should evaluate whether these architectural patterns align with their specific regulatory obligations in consultation with legal counsel.
|
||||
</p>
|
||||
<p class="text-gray-600 text-xs">
|
||||
Maximum penalties under EU AI Act: €35 million or 7% of global annual turnover (whichever is higher) for prohibited AI practices; €15 million or 3% for other violations.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Research Foundations (Accordion) -->
|
||||
<section class="mb-16">
|
||||
<h2 class="text-2xl font-bold text-gray-900 mb-6" data-i18n="sections.research_foundations.heading">Research Foundations</h2>
|
||||
|
||||
<div class="border border-gray-300 rounded-lg">
|
||||
<div class="accordion-button bg-gray-50 p-5 flex justify-between items-center" data-accordion="research">
|
||||
<h3 class="font-semibold text-gray-900" data-i18n="sections.research_foundations.org_theory_title">Organisational Theory & Philosophical Basis</h3>
|
||||
<svg id="research-icon" class="accordion-icon w-5 h-5 text-gray-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/>
|
||||
</svg>
|
||||
</div>
|
||||
<div id="research-content" class="accordion-content">
|
||||
<div class="p-5 border-t border-gray-200 text-sm text-gray-700 space-y-3">
|
||||
<p>
|
||||
Tractatus draws on 40+ years of organisational theory research: time-based organisation (Bluedorn, Ancona), knowledge orchestration (Crossan), post-bureaucratic authority (Laloux), structural inertia (Hannan & Freeman).
|
||||
</p>
|
||||
<p>
|
||||
Core premise: When knowledge becomes ubiquitous through AI, authority must derive from appropriate time horizon and domain expertise rather than hierarchical position. Governance systems must orchestrate decision-making across strategic, operational, and tactical timescales.
|
||||
</p>
|
||||
<p>
|
||||
<a href="/downloads/organizational-theory-foundations-of-the-tractatus-framework.pdf" target="_blank" class="text-amber-800 hover:text-amber-900 font-medium inline-flex items-center underline">
|
||||
View complete organisational theory foundations (PDF)
|
||||
<svg class="w-4 h-4 ml-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"/>
|
||||
</svg>
|
||||
</a>
|
||||
</p>
|
||||
<p class="mt-3">
|
||||
<strong>AI Safety Research:</strong> Architectural Safeguards Against LLM Hierarchical Dominance — How Tractatus protects pluralistic values from AI pattern bias while maintaining safety boundaries.
|
||||
<span class="inline-flex gap-3 mt-2">
|
||||
<a href="/docs/research/ARCHITECTURAL-SAFEGUARDS-Against-LLM-Hierarchical-Dominance-Prose.pdf" target="_blank" class="text-amber-800 hover:text-amber-900 font-medium inline-flex items-center underline">
|
||||
PDF
|
||||
<svg class="w-4 h-4 ml-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"/>
|
||||
</svg>
|
||||
</a>
|
||||
<span class="text-gray-400">|</span>
|
||||
<a href="/docs.html?doc=architectural-safeguards-against-llm-hierarchical-dominance-prose" class="text-amber-800 hover:text-amber-900 font-medium inline-flex items-center underline">
|
||||
Read online
|
||||
<svg class="w-4 h-4 ml-1" 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>
|
||||
</a>
|
||||
</span>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Scope & Limitations (Accordion) -->
|
||||
<section class="mb-16">
|
||||
<h2 class="text-2xl font-bold text-gray-900 mb-6" data-i18n="sections.scope_limitations.heading">Scope & Limitations</h2>
|
||||
|
||||
<div class="border border-gray-300 rounded-lg">
|
||||
<div class="accordion-button bg-gray-50 p-5 flex justify-between items-center" data-accordion="scope">
|
||||
<h3 class="font-semibold text-gray-900" data-i18n="sections.scope_limitations.title">What This Is Not • What It Offers</h3>
|
||||
<svg id="scope-icon" class="accordion-icon w-5 h-5 text-gray-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/>
|
||||
</svg>
|
||||
</div>
|
||||
<div id="scope-content" class="accordion-content">
|
||||
<div class="p-5 border-t border-gray-200 space-y-4 text-sm text-gray-700">
|
||||
<div>
|
||||
<strong class="text-gray-900" data-i18n="sections.scope_limitations.not_title">Tractatus is not:</strong>
|
||||
<ul class="list-disc pl-6 mt-2 space-y-1 text-gray-600">
|
||||
<li>A comprehensive AI safety solution</li>
|
||||
<li>Independently validated or security-audited</li>
|
||||
<li>Tested against adversarial attacks</li>
|
||||
<li>Proven effective across multiple organisations</li>
|
||||
<li>A substitute for legal compliance review</li>
|
||||
<li>A commercial product (research framework, Apache 2.0 licence)</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div>
|
||||
<strong class="text-gray-900" data-i18n="sections.scope_limitations.offers_title">What it offers:</strong>
|
||||
<ul class="list-disc pl-6 mt-2 space-y-1 text-gray-600">
|
||||
<li>Architectural patterns for external governance controls</li>
|
||||
<li>Reference implementation demonstrating feasibility</li>
|
||||
<li>Foundation for organisational pilots and validation studies</li>
|
||||
<li>Evidence that structural approaches to AI safety merit investigation</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Call to Action -->
|
||||
<section class="border-t border-gray-200 pt-12">
|
||||
<h2 class="text-xl font-bold text-gray-900 mb-4" data-i18n="footer.further_info">Further Information</h2>
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
<a href="/docs.html" class="block border border-gray-300 rounded-lg p-5 hover-lift hover:border-amber-500">
|
||||
<div class="font-semibold text-gray-900 mb-1" data-i18n="footer.technical_docs">Technical Documentation</div>
|
||||
<div class="text-sm text-gray-600" data-i18n="footer.technical_docs_desc">Complete architecture specifications, implementation patterns, API reference</div>
|
||||
</a>
|
||||
<a href="/architecture.html" class="block border border-gray-300 rounded-lg p-5 hover-lift hover:border-amber-500">
|
||||
<div class="font-semibold text-gray-900 mb-1" data-i18n="footer.system_architecture">System Architecture</div>
|
||||
<div class="text-sm text-gray-600" data-i18n="footer.system_architecture_desc">Runtime-agnostic governance layer design and integration approach</div>
|
||||
</a>
|
||||
<a href="/researcher.html" class="block border border-gray-300 rounded-lg p-5 hover-lift hover:border-amber-500">
|
||||
<div class="font-semibold text-gray-900 mb-1" data-i18n="footer.research_case_studies">Research & Case Studies</div>
|
||||
<div class="text-sm text-gray-600" data-i18n="footer.research_case_studies_desc">Academic foundations, failure mode analysis, governance research</div>
|
||||
</a>
|
||||
<a href="/implementer.html" class="block border border-gray-300 rounded-lg p-5 hover-lift hover:border-amber-500">
|
||||
<div class="font-semibold text-gray-900 mb-1" data-i18n="footer.implementation_guide">Implementation Guide</div>
|
||||
<div class="text-sm text-gray-600" data-i18n="footer.implementation_guide_desc">Integration patterns, deployment considerations, code examples</div>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="mt-8 pt-8 border-t border-gray-200">
|
||||
<p class="text-sm text-gray-600">
|
||||
<strong class="text-gray-900" data-i18n="footer.contact">Contact:</strong> <span data-i18n="footer.contact_text">For pilot partnerships, validation studies, or technical consultation, contact via</span> <a href="/about.html" class="text-amber-800 hover:text-amber-900 underline">project information page</a>.
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- Footer -->
|
||||
<!-- Version Management & PWA -->
|
||||
<script src="/js/version-manager.js?v=0.1.0.1760680958072"></script>
|
||||
<script src="/js/leader-page.js?v=0.1.0.1760680958072"></script>
|
||||
|
||||
<!-- Internationalization -->
|
||||
<script src="/js/i18n-simple.js?v=1760818106"></script>
|
||||
<script src="/js/components/language-selector.js?v=1760818106"></script>
|
||||
|
||||
<!-- Scroll Animations (Phase 3) -->
|
||||
<script src="/js/scroll-animations.js"></script>
|
||||
<!-- Page Transitions (Phase 3) -->
|
||||
<script src="/js/page-transitions.js"></script>
|
||||
|
||||
<!-- Footer Component -->
|
||||
<script src="/js/components/footer.js"></script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
528
public/researcher.html
Normal file
528
public/researcher.html
Normal file
|
|
@ -0,0 +1,528 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>For Researchers | Tractatus AI Safety Framework</title>
|
||||
<meta name="description" content="Research foundations, empirical observations, and theoretical basis for architectural approaches to AI governance. Early-stage framework exploring structural constraints on LLM systems.">
|
||||
|
||||
<!-- 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-new.svg">
|
||||
|
||||
<link rel="icon" type="image/svg+xml" href="/favicon-new.svg">
|
||||
<link rel="stylesheet" href="/css/fonts.css">
|
||||
<link rel="stylesheet" href="/css/tailwind.css?v=0.1.0.1760254958072">
|
||||
<link rel="stylesheet" href="/css/tractatus-theme.min.css?v=1760816800">
|
||||
<style>
|
||||
.skip-link { position: absolute; left: -9999px; }
|
||||
.skip-link:focus { left: 0; z-index: 100; background: white; padding: 1rem; }
|
||||
a:focus, button:focus { outline: 2px solid #d97706; outline-offset: 2px; }
|
||||
|
||||
/* Accordion styles */
|
||||
.accordion-button { cursor: pointer; user-select: none; }
|
||||
.accordion-content {
|
||||
max-height: 0;
|
||||
overflow: hidden;
|
||||
transition: max-height 0.3s ease-out;
|
||||
}
|
||||
.accordion-content.active {
|
||||
max-height: 3000px;
|
||||
transition: max-height 0.5s ease-in;
|
||||
}
|
||||
.accordion-icon { transition: transform 0.3s ease; }
|
||||
.accordion-icon.active { transform: rotate(180deg); }
|
||||
</style>
|
||||
</head>
|
||||
<body class="bg-white">
|
||||
|
||||
<a href="#main-content" class="skip-link">Skip to main content</a>
|
||||
|
||||
<script src="/js/components/navbar.js?v=0.1.0.1760254958072"></script>
|
||||
|
||||
<!-- Breadcrumb Navigation -->
|
||||
<nav class="bg-gray-50 border-b border-gray-200 py-3" aria-label="Breadcrumb">
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<ol class="flex items-center space-x-2 text-sm">
|
||||
<li><a href="/" class="hover:underline transition-colors text-tractatus-link">Home</a></li>
|
||||
<li class="text-gray-400">/</li>
|
||||
<li class="text-gray-900 font-medium" aria-current="page">Researcher</li>
|
||||
</ol>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<!-- Header -->
|
||||
<div class="bg-gray-50 border-b border-gray-200 py-16">
|
||||
<div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div class="inline-flex items-center bg-gray-200 text-gray-700 px-3 py-1 rounded text-sm font-medium mb-6" data-i18n="header.badge">
|
||||
Research Framework • Empirical Observations
|
||||
</div>
|
||||
<h1 class="text-4xl font-bold text-gray-900 mb-4" data-i18n="header.title">
|
||||
Research Foundations & Empirical Observations
|
||||
</h1>
|
||||
<p class="text-lg text-gray-600 leading-relaxed" data-i18n="header.subtitle">
|
||||
Tractatus explores architectural approaches to AI governance through empirical observation of failure modes and application of organisational theory. This page documents research foundations, observed patterns, and theoretical basis for the framework.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Main Content -->
|
||||
<div id="main-content" class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 py-16">
|
||||
|
||||
<!-- Research Context -->
|
||||
<section class="mb-16 animate-on-scroll" data-animation="fade-in">
|
||||
<h2 class="text-2xl font-bold text-gray-900 mb-6" data-i18n="sections.research_context.heading">Research Context & Scope</h2>
|
||||
|
||||
<div class="bg-amber-50 border border-amber-200 rounded-lg p-6 mb-6 animate-on-scroll" data-animation="slide-up" data-stagger="100">
|
||||
<p class="text-sm text-amber-900 font-medium mb-2" data-i18n="sections.research_context.development_note">Development Context</p>
|
||||
<p class="text-sm text-amber-800" data-i18n="sections.research_context.development_text">
|
||||
Tractatus was developed over six months (April–October 2025) in progressive stages that evolved into a live demonstration of its capabilities in the form of a single-project context (https://agenticgovernance.digital). Observations derive from direct engagement with Claude Code (Anthropic's Sonnet 4.5 model) across approximately 500 development sessions. This is exploratory research, not controlled study.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="prose prose-sm max-w-none text-gray-700 space-y-3">
|
||||
<p>
|
||||
The framework emerged from practical necessity rather than theoretical speculation. During development, we observed recurring patterns where AI systems would override explicit instructions, drift from established values constraints, or silently degrade quality under context pressure. Traditional governance approaches (policy documents, ethical guidelines, prompt engineering) proved insufficient to prevent these failures.
|
||||
</p>
|
||||
<p>
|
||||
This led to research question: <strong>Can governance be made architecturally external to AI systems</strong> rather than relying on voluntary AI compliance? Tractatus represents one exploration of that question, grounded in organisational theory and validated through empirical observation of what actually prevented failures in practice.
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Theoretical Foundations (Accordion) -->
|
||||
<section class="mb-16 animate-on-scroll" data-animation="fade-in">
|
||||
<h2 class="text-2xl font-bold text-gray-900 mb-6" data-i18n="sections.theoretical_foundations.heading">Theoretical Foundations</h2>
|
||||
|
||||
<!-- Organisational Theory -->
|
||||
<div class="border-l-4 border border-gray-200 rounded-lg mb-4 border-l-service-validator animate-on-scroll" data-animation="slide-up" data-stagger="100">
|
||||
<div class="accordion-button bg-white p-5 flex justify-between items-center hover:bg-purple-50 transition-colors duration-200" data-accordion="org-theory">
|
||||
<h3 class="font-semibold text-gray-900 group-hover:text-[#8b5cf6] transition-colors" data-i18n="sections.theoretical_foundations.org_theory_title">Organisational Theory Basis</h3>
|
||||
<svg id="org-theory-icon" class="accordion-icon w-5 h-5 text-purple-600 transition-transform duration-300" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/>
|
||||
</svg>
|
||||
</div>
|
||||
<div id="org-theory-content" class="accordion-content">
|
||||
<div class="p-5 border-t border-gray-200 prose prose-sm max-w-none text-gray-700">
|
||||
<p class="mb-4">
|
||||
Tractatus draws on four decades of organisational research addressing authority structures during knowledge democratisation:
|
||||
</p>
|
||||
|
||||
<p class="mb-3"><strong>Time-Based Organisation (Bluedorn, Ancona):</strong></p>
|
||||
<p class="mb-4 pl-4">
|
||||
Decisions operate across strategic (years), operational (months), and tactical (hours-days) timescales. AI systems operating at tactical speed should not override strategic decisions made at appropriate temporal scale. The InstructionPersistenceClassifier explicitly models temporal horizon (STRATEGIC, OPERATIONAL, TACTICAL) to enforce decision authority alignment.
|
||||
</p>
|
||||
|
||||
<p class="mb-3"><strong>Knowledge Orchestration (Crossan et al.):</strong></p>
|
||||
<p class="mb-4 pl-4">
|
||||
When knowledge becomes ubiquitous through AI, organisational authority shifts from information control to knowledge coordination. Governance systems must orchestrate decision-making across distributed expertise rather than centralise control. The PluralisticDeliberationOrchestrator implements non-hierarchical coordination for values conflicts.
|
||||
</p>
|
||||
|
||||
<p class="mb-3"><strong>Post-Bureaucratic Authority (Laloux, Hamel):</strong></p>
|
||||
<p class="mb-4 pl-4">
|
||||
Traditional hierarchical authority assumes information asymmetry. As AI democratises expertise, legitimate authority must derive from appropriate time horizon and stakeholder representation, not positional power. Framework architecture separates technical capability (what AI can do) from decision authority (what AI should do).
|
||||
</p>
|
||||
|
||||
<p class="mb-3"><strong>Structural Inertia (Hannan & Freeman):</strong></p>
|
||||
<p class="mb-4 pl-4">
|
||||
Governance embedded in culture or process erodes over time as systems evolve. Architectural constraints create structural inertia that resists organisational drift. Making governance external to AI runtime creates "accountability infrastructure" that survives individual session variations.
|
||||
</p>
|
||||
|
||||
<div class="text-sm text-gray-600 border-t border-gray-200 pt-4 mt-4">
|
||||
<a href="/downloads/organizational-theory-foundations-of-the-tractatus-framework.pdf"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
class="inline-flex items-center bg-amber-600 text-white px-5 py-3 rounded-lg font-semibold hover:bg-amber-700 transition shadow-md">
|
||||
<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>
|
||||
View Complete Organisational Theory Foundations (PDF)
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Values Pluralism -->
|
||||
<div class="border-l-4 border border-gray-200 rounded-lg border-l-service-validator animate-on-scroll" data-animation="slide-up" data-stagger="200">
|
||||
<div class="accordion-button bg-white p-5 flex justify-between items-center hover:bg-purple-50 transition-colors duration-200" data-accordion="values">
|
||||
<h3 class="font-semibold text-gray-900 group-hover:text-[#8b5cf6] transition-colors" data-i18n="sections.theoretical_foundations.values_pluralism_title">Values Pluralism & Moral Philosophy</h3>
|
||||
<svg id="values-icon" class="accordion-icon w-5 h-5 text-purple-600 transition-transform duration-300" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/>
|
||||
</svg>
|
||||
</div>
|
||||
<div id="values-content" class="accordion-content">
|
||||
<div class="p-5 border-t border-gray-200 prose prose-sm max-w-none text-gray-700">
|
||||
<p class="mb-4">
|
||||
The PluralisticDeliberationOrchestrator addresses fundamental problem in AI safety: <strong>many "safety" questions are actually values conflicts</strong> where multiple legitimate perspectives exist.
|
||||
</p>
|
||||
|
||||
<p class="mb-4">
|
||||
When efficiency conflicts with transparency, or innovation with risk mitigation, no algorithm can determine the "correct" answer. These are values trade-offs requiring human deliberation across stakeholder perspectives. AI systems that attempt to resolve such conflicts autonomously impose single values framework—often utilitarian efficiency maximisation encoded in training data.
|
||||
</p>
|
||||
|
||||
<p class="mb-4">
|
||||
Framework draws on moral pluralism literature (Isaiah Berlin, Bernard Williams, Martha Nussbaum) arguing legitimate values can conflict without one being objectively superior. Rather than algorithmic resolution, framework facilitates:
|
||||
</p>
|
||||
|
||||
<ul class="list-disc pl-6 mb-4 space-y-2">
|
||||
<li><strong>Stakeholder identification:</strong> Who has legitimate interest in this decision?</li>
|
||||
<li><strong>Non-hierarchical deliberation:</strong> Equal voice without automatic expert override</li>
|
||||
<li><strong>Documented dissent:</strong> Minority positions recorded in full</li>
|
||||
<li><strong>Moral remainder:</strong> Acknowledgment that even optimal decisions create unavoidable harm to other legitimate values</li>
|
||||
</ul>
|
||||
|
||||
<p class="mb-4">
|
||||
This approach recognises that <strong>governance isn't solving values conflicts—it's ensuring they're addressed through appropriate deliberative process</strong> rather than AI imposing resolution.
|
||||
</p>
|
||||
|
||||
<div class="text-sm text-gray-600 border-t border-gray-200 pt-4 mt-4">
|
||||
<a href="/downloads/pluralistic-values-deliberation-plan-v2-DRAFT.pdf"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
class="inline-flex items-center bg-amber-600 text-white px-5 py-3 rounded-lg font-semibold hover:bg-amber-700 transition shadow-md">
|
||||
<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>
|
||||
View Pluralistic Values Deliberation Plan (PDF, DRAFT)
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Empirical Observations -->
|
||||
<section class="mb-16">
|
||||
<h2 class="text-2xl font-bold text-gray-900 mb-6" data-i18n="sections.empirical_observations.heading">Empirical Observations: Documented Failure Modes</h2>
|
||||
|
||||
<p class="text-sm text-gray-600 mb-6" data-i18n="sections.empirical_observations.intro">
|
||||
Three failure patterns observed repeatedly during framework development. These are not hypothetical scenarios—they are documented incidents that occurred during this project's development.
|
||||
</p>
|
||||
|
||||
<!-- Failure Mode 1: Pattern Bias -->
|
||||
<div class="bg-white border border-gray-300 rounded-lg p-6 mb-4">
|
||||
<div class="flex items-start gap-3 mb-3">
|
||||
<div class="flex-shrink-0 w-8 h-8 bg-red-100 rounded flex items-center justify-center">
|
||||
<span class="text-red-700 font-bold text-sm">1</span>
|
||||
</div>
|
||||
<div class="flex-1">
|
||||
<h3 class="text-lg font-bold text-gray-900 mb-2" data-i18n="sections.empirical_observations.failure_1_title">Pattern Recognition Bias Override (The 27027 Incident)</h3>
|
||||
<p class="text-sm text-gray-700 mb-3">
|
||||
<strong>Observed behaviour:</strong> User specified "Check MongoDB on port 27027" but AI immediately used default port 27017 instead. This occurred within same message—not forgetting over time, but immediate autocorrection by training data patterns.
|
||||
</p>
|
||||
<p class="text-sm text-gray-700 mb-3">
|
||||
<strong>Root cause:</strong> Training data contains thousands of examples of MongoDB on port 27017 (default). When AI encounters "MongoDB" + port specification, pattern recognition weight overrides explicit instruction. Similar to autocorrect changing correctly-spelled proper nouns to common words.
|
||||
</p>
|
||||
<p class="text-sm text-gray-700 mb-3">
|
||||
<strong>Why traditional approaches failed:</strong> Prompt engineering ("please follow instructions exactly") ineffective because AI genuinely believes it IS following instructions—pattern recognition operates below conversational reasoning layer.
|
||||
</p>
|
||||
<p class="text-sm text-gray-700">
|
||||
<strong>Framework intervention:</strong> InstructionPersistenceClassifier stores explicit instructions in external persistence layer. CrossReferenceValidator checks AI actions against stored instructions before execution. When AI proposes port 27017, validator detects conflict with stored "27027" instruction and blocks execution.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-center justify-end gap-3 text-sm pt-3 border-t border-gray-200">
|
||||
<span class="text-gray-500">Prevented by: InstructionPersistenceClassifier + CrossReferenceValidator</span>
|
||||
<a href="/demos/27027-demo.html" class="text-amber-700 hover:text-amber-800 font-medium">View interactive timeline →</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Failure Mode 2: Values Drift -->
|
||||
<div class="bg-white border border-gray-300 rounded-lg p-6 mb-4">
|
||||
<div class="flex items-start gap-3 mb-3">
|
||||
<div class="flex-shrink-0 w-8 h-8 bg-orange-100 rounded flex items-center justify-center">
|
||||
<span class="text-orange-700 font-bold text-sm">2</span>
|
||||
</div>
|
||||
<div class="flex-1">
|
||||
<h3 class="text-lg font-bold text-gray-900 mb-2" data-i18n="sections.empirical_observations.failure_2_title">Gradual Values Drift Under Context Pressure</h3>
|
||||
<p class="text-sm text-gray-700 mb-3">
|
||||
<strong>Observed behaviour:</strong> Project established "privacy-first" as strategic value. After 40-message conversation about analytics features, AI suggested tracking implementation that violated privacy constraint. User caught it; AI acknowledged violation but had drifted from principle through incremental feature additions.
|
||||
</p>
|
||||
<p class="text-sm text-gray-700 mb-3">
|
||||
<strong>Root cause:</strong> Strategic values (established early in project) conflict with tactical optimisations (implemented later under time pressure). As conversation lengthens, tactical thinking dominates. AI didn't actively reject privacy principle—it simply stopped checking whether new features aligned.
|
||||
</p>
|
||||
<p class="text-sm text-gray-700 mb-3">
|
||||
<strong>Why traditional approaches failed:</strong> Values stated in system prompt become less salient as conversation progresses. Context compaction can drop early strategic decisions. Prompt reminders ("remember privacy-first") treat symptom not cause.
|
||||
</p>
|
||||
<p class="text-sm text-gray-700">
|
||||
<strong>Framework intervention:</strong> BoundaryEnforcer maintains strategic values as persistent constraints external to conversation context. Before implementing analytics feature, enforcer checks against stored "privacy-first" constraint. Detects conflict, blocks autonomous implementation, escalates for human deliberation on whether privacy principle should be reconsidered or analytics approach modified.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-center justify-end gap-3 text-sm pt-3 border-t border-gray-200">
|
||||
<span class="text-gray-500">Prevented by: BoundaryEnforcer (STRATEGIC constraint checking)</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Failure Mode 3: Silent Degradation -->
|
||||
<div class="bg-white border border-gray-300 rounded-lg p-6">
|
||||
<div class="flex items-start gap-3 mb-3">
|
||||
<div class="flex-shrink-0 w-8 h-8 bg-yellow-100 rounded flex items-center justify-center">
|
||||
<span class="text-yellow-700 font-bold text-sm">3</span>
|
||||
</div>
|
||||
<div class="flex-1">
|
||||
<h3 class="text-lg font-bold text-gray-900 mb-2" data-i18n="sections.empirical_observations.failure_3_title">Silent Quality Degradation at High Context Pressure</h3>
|
||||
<p class="text-sm text-gray-700 mb-3">
|
||||
<strong>Observed behaviour:</strong> During complex multi-file operation at 85% context capacity, AI silently omitted error handling in generated code. No indication to user that corners were being cut. User discovered missing validation only during code review.
|
||||
</p>
|
||||
<p class="text-sm text-gray-700 mb-3">
|
||||
<strong>Root cause:</strong> As context fills, AI faces implicit trade-off: complete requested functionality OR maintain quality standards. Training incentivises completing user requests over acknowledging limitations. Silence about degradation is path of least resistance.
|
||||
</p>
|
||||
<p class="text-sm text-gray-700 mb-3">
|
||||
<strong>Why traditional approaches failed:</strong> AI doesn't recognise it's degrading—from its perspective, it's successfully completing task under constraints. Asking "did you cut corners?" produces confident denial because AI genuinely believes its output meets standards.
|
||||
</p>
|
||||
<p class="text-sm text-gray-700">
|
||||
<strong>Framework intervention:</strong> ContextPressureMonitor tracks multiple factors (token usage, conversation length, task complexity). When pressure exceeds thresholds (>75% tokens, >40 messages, high complexity), monitor forces explicit pressure acknowledgment and recommends context refresh. Makes degradation risk visible rather than silent.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-center justify-end gap-3 text-sm pt-3 border-t border-gray-200">
|
||||
<span class="text-gray-500">Prevented by: ContextPressureMonitor (multi-factor session tracking)</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mt-6 text-sm text-gray-600 bg-gray-50 border border-gray-200 rounded p-4">
|
||||
<strong>Research Note:</strong> <span data-i18n="sections.empirical_observations.research_note">These patterns emerged from direct observation, not hypothesis testing. We don't claim they're universal to all LLM systems or deployment contexts. They represent empirical basis for framework design decisions—problems we actually encountered and architectural interventions that actually worked in this specific context.</span>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Architectural Components -->
|
||||
<section class="mb-16">
|
||||
<h2 class="text-2xl font-bold text-gray-900 mb-6" data-i18n="sections.architecture.heading">Six-Component Architecture</h2>
|
||||
|
||||
<div class="border-l-4 border border-gray-200 rounded-lg border-l-service-validator">
|
||||
<div class="accordion-button bg-white p-5 flex justify-between items-center hover:bg-purple-50 transition-colors duration-200" data-accordion="architecture">
|
||||
<h3 class="font-semibold text-gray-900 group-hover:text-[#8b5cf6] transition-colors" data-i18n="sections.architecture.services_title">Framework Services & Functions</h3>
|
||||
<svg id="architecture-icon" class="accordion-icon w-5 h-5 text-purple-600 transition-transform duration-300" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/>
|
||||
</svg>
|
||||
</div>
|
||||
<div id="architecture-content" class="accordion-content">
|
||||
<div class="p-5 border-t border-gray-200 space-y-4 text-sm">
|
||||
|
||||
<div class="border-l-2 border-amber-500 pl-4">
|
||||
<div class="font-semibold text-gray-900 mb-1">1. BoundaryEnforcer</div>
|
||||
<div class="text-gray-600 mb-2">Blocks AI from making values decisions without human approval. Maintains strategic constraints as persistent rules checked before action execution.</div>
|
||||
<div class="text-xs text-gray-500">Addresses: Values drift, autonomous decision-making on contested trade-offs</div>
|
||||
</div>
|
||||
|
||||
<div class="border-l-2 border-gray-300 pl-4">
|
||||
<div class="font-semibold text-gray-900 mb-1">2. InstructionPersistenceClassifier</div>
|
||||
<div class="text-gray-600 mb-2">Stores explicit instructions external to AI context with persistence levels (HIGH/MEDIUM/LOW) and temporal scope (STRATEGIC/OPERATIONAL/TACTICAL). Prevents pattern bias override.</div>
|
||||
<div class="text-xs text-gray-500">Addresses: Pattern recognition bias (27027-style failures)</div>
|
||||
</div>
|
||||
|
||||
<div class="border-l-2 border-gray-300 pl-4">
|
||||
<div class="font-semibold text-gray-900 mb-1">3. CrossReferenceValidator</div>
|
||||
<div class="text-gray-600 mb-2">Validates AI proposed actions against stored instructions and governance rules before execution. Detects conflicts and blocks inconsistent operations.</div>
|
||||
<div class="text-xs text-gray-500">Addresses: Instruction override, policy violation detection</div>
|
||||
</div>
|
||||
|
||||
<div class="border-l-2 border-gray-300 pl-4">
|
||||
<div class="font-semibold text-gray-900 mb-1">4. ContextPressureMonitor</div>
|
||||
<div class="text-gray-600 mb-2">Multi-factor tracking of session health: token usage, conversation length, task complexity, error frequency. Makes degradation risk explicit when thresholds exceeded.</div>
|
||||
<div class="text-xs text-gray-500">Addresses: Silent quality degradation, context-pressure failures</div>
|
||||
</div>
|
||||
|
||||
<div class="border-l-2 border-gray-300 pl-4">
|
||||
<div class="font-semibold text-gray-900 mb-1">5. MetacognitiveVerifier</div>
|
||||
<div class="text-gray-600 mb-2">Self-checks reasoning quality before complex operations (>3 files, >5 steps, architecture changes). Validates alignment, coherence, considers alternatives.</div>
|
||||
<div class="text-xs text-gray-500">Addresses: Reasoning shortcuts under complexity, insufficient alternative consideration</div>
|
||||
</div>
|
||||
|
||||
<div class="border-l-2 border-gray-300 pl-4">
|
||||
<div class="font-semibold text-gray-900 mb-1">6. PluralisticDeliberationOrchestrator</div>
|
||||
<div class="text-gray-600 mb-2">Facilitates multi-stakeholder deliberation when values conflicts detected. Non-hierarchical engagement, documented dissent, moral remainder acknowledgment.</div>
|
||||
<div class="text-xs text-gray-500">Addresses: Values conflicts, stakeholder exclusion, algorithmic resolution of contested trade-offs</div>
|
||||
</div>
|
||||
|
||||
<div class="text-xs text-gray-600 bg-gray-50 p-3 rounded mt-4">
|
||||
<strong>Architectural principle:</strong> <span data-i18n="sections.architecture.principle">Services operate external to AI runtime with autonomous triggering. AI doesn't decide "should I check governance rules?"—architecture enforces checking by default. This addresses voluntary compliance problem inherent in prompt-based governance.</span>
|
||||
</div>
|
||||
|
||||
<div class="border-t border-gray-200 pt-4 mt-4">
|
||||
<a href="/architecture.html"
|
||||
class="inline-flex items-center bg-blue-600 text-white px-5 py-3 rounded-lg font-semibold hover:bg-blue-700 transition shadow-md">
|
||||
<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="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>
|
||||
View Full System Architecture & Technical Details
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Interactive Demonstrations -->
|
||||
<section class="mb-16">
|
||||
<h2 class="text-2xl font-bold text-gray-900 mb-6" data-i18n="sections.demos.heading">Interactive Demonstrations</h2>
|
||||
|
||||
<div class="grid grid-cols-1 md:grid-cols-3 gap-4">
|
||||
<a href="/demos/classification-demo.html" class="block border border-gray-300 rounded-lg p-5 hover:border-amber-500 hover:shadow-md transition">
|
||||
<h3 class="font-semibold text-gray-900 mb-2" data-i18n="sections.demos.classification_title">Instruction Classification</h3>
|
||||
<p class="text-sm text-gray-600" data-i18n="sections.demos.classification_desc">Explore how instructions are classified across quadrants with persistence levels and temporal scope.</p>
|
||||
</a>
|
||||
|
||||
<a href="/demos/27027-demo.html" class="block border border-gray-300 rounded-lg p-5 hover:border-amber-500 hover:shadow-md transition">
|
||||
<h3 class="font-semibold text-gray-900 mb-2" data-i18n="sections.demos.incident_title">27027 Incident Timeline</h3>
|
||||
<p class="text-sm text-gray-600" data-i18n="sections.demos.incident_desc">Step through pattern recognition bias failure and architectural intervention that prevented it.</p>
|
||||
</a>
|
||||
|
||||
<a href="/demos/boundary-demo.html" class="block border border-gray-300 rounded-lg p-5 hover:border-amber-500 hover:shadow-md transition">
|
||||
<h3 class="font-semibold text-gray-900 mb-2" data-i18n="sections.demos.boundary_title">Boundary Evaluation</h3>
|
||||
<p class="text-sm text-gray-600" data-i18n="sections.demos.boundary_desc">Test decisions against boundary enforcement to see which require human judgment vs. AI autonomy.</p>
|
||||
</a>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Research Resources -->
|
||||
<section class="mb-16">
|
||||
<h2 class="text-2xl font-bold text-gray-900 mb-6" data-i18n="sections.resources.heading">Research Documentation</h2>
|
||||
|
||||
<div class="space-y-3 text-sm">
|
||||
<a href="/downloads/organizational-theory-foundations-of-the-tractatus-framework.pdf" target="_blank" class="flex items-center justify-between p-4 border border-gray-300 rounded hover:border-amber-500 hover:bg-gray-50 transition">
|
||||
<span class="font-medium text-gray-900">Organisational Theory Foundations</span>
|
||||
<svg class="w-5 h-5 text-gray-400" 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>
|
||||
|
||||
<a href="/downloads/pluralistic-values-deliberation-plan-v2-DRAFT.pdf" target="_blank" class="flex items-center justify-between p-4 border border-gray-300 rounded hover:border-amber-500 hover:bg-gray-50 transition">
|
||||
<div>
|
||||
<span class="font-medium text-gray-900">Pluralistic Values Deliberation Plan</span>
|
||||
<span class="ml-2 text-xs bg-amber-100 text-amber-800 px-2 py-1 rounded">DRAFT</span>
|
||||
</div>
|
||||
<svg class="w-5 h-5 text-gray-400" 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>
|
||||
|
||||
<a href="/downloads/case-studies-real-world-llm-failure-modes.pdf" target="_blank" class="flex items-center justify-between p-4 border border-gray-300 rounded hover:border-amber-500 hover:bg-gray-50 transition">
|
||||
<span class="font-medium text-gray-900">Case Studies: Real-World LLM Failure Modes</span>
|
||||
<svg class="w-5 h-5 text-gray-400" 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>
|
||||
|
||||
<a href="/downloads/framework-governance-in-action-pre-publication-security-audit.pdf" target="_blank" class="flex items-center justify-between p-4 border border-gray-300 rounded hover:border-amber-500 hover:bg-gray-50 transition">
|
||||
<span class="font-medium text-gray-900">Framework in Action: Pre-Publication Security Audit</span>
|
||||
<svg class="w-5 h-5 text-gray-400" 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>
|
||||
|
||||
<a href="/downloads/tractatus-agentic-governance-system-glossary-of-terms.pdf" target="_blank" class="flex items-center justify-between p-4 border border-gray-300 rounded hover:border-amber-500 hover:bg-gray-50 transition">
|
||||
<span class="font-medium text-gray-900">Appendix B: Glossary of Terms</span>
|
||||
<svg class="w-5 h-5 text-gray-400" 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>
|
||||
|
||||
<a href="/docs.html?category=technical-reference" class="flex items-center justify-between p-4 border border-gray-300 rounded hover:border-amber-500 hover:bg-gray-50 transition">
|
||||
<span class="font-medium text-gray-900">Complete Technical Documentation</span>
|
||||
<svg class="w-5 h-5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"/>
|
||||
</svg>
|
||||
</a>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Limitations & Future Research -->
|
||||
<section class="mb-16">
|
||||
<h2 class="text-2xl font-bold text-gray-900 mb-6" data-i18n="sections.limitations.heading">Limitations & Future Research Directions</h2>
|
||||
|
||||
<div class="border-l-4 border border-gray-200 rounded-lg border-l-service-validator">
|
||||
<div class="accordion-button bg-white p-5 flex justify-between items-center hover:bg-purple-50 transition-colors duration-200" data-accordion="limitations">
|
||||
<h3 class="font-semibold text-gray-900 group-hover:text-[#8b5cf6] transition-colors" data-i18n="sections.limitations.title">Known Limitations & Research Gaps</h3>
|
||||
<svg id="limitations-icon" class="accordion-icon w-5 h-5 text-purple-600 transition-transform duration-300" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/>
|
||||
</svg>
|
||||
</div>
|
||||
<div id="limitations-content" class="accordion-content">
|
||||
<div class="p-5 border-t border-gray-200 space-y-4 text-sm text-gray-700">
|
||||
|
||||
<div>
|
||||
<strong class="text-gray-900">1. Single-Context Validation</strong>
|
||||
<p class="mt-1">Framework validated only in single-project, single-user context (this website development). No multi-organisation deployment, cross-platform testing, or controlled experimental validation.</p>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<strong class="text-gray-900">2. Voluntary Invocation Limitation</strong>
|
||||
<p class="mt-1">Most critical limitation: Framework can be bypassed if AI simply chooses not to use governance tools. We've addressed this through architectural patterns making governance checks automatic rather than voluntary, but full external enforcement requires runtime-level integration not universally available in current LLM platforms.</p>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<strong class="text-gray-900">3. No Adversarial Testing</strong>
|
||||
<p class="mt-1">Framework has not undergone red-team evaluation, jailbreak testing, or adversarial prompt assessment. All observations come from normal development workflow, not deliberate bypass attempts.</p>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<strong class="text-gray-900">4. Platform Specificity</strong>
|
||||
<p class="mt-1">Observations and interventions validated with Claude Code (Anthropic Sonnet 4.5) only. Generalisability to other LLM systems (Copilot, GPT-4, custom agents) remains unvalidated hypothesis.</p>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<strong class="text-gray-900">5. Scale Uncertainty</strong>
|
||||
<p class="mt-1">Performance characteristics at enterprise scale (thousands of concurrent users, millions of governance events) completely unknown. Current implementation optimised for single-user context.</p>
|
||||
</div>
|
||||
|
||||
<div class="border-t border-gray-200 pt-4 mt-4">
|
||||
<strong class="text-gray-900">Future Research Needs:</strong>
|
||||
<ul class="list-disc pl-5 mt-2 space-y-1">
|
||||
<li>Controlled experimental validation with quantitative metrics</li>
|
||||
<li>Multi-organisation pilot studies across different domains</li>
|
||||
<li>Independent security audit and adversarial testing</li>
|
||||
<li>Cross-platform consistency evaluation (Copilot, GPT-4, open models)</li>
|
||||
<li>Formal verification of boundary enforcement properties</li>
|
||||
<li>Longitudinal study of framework effectiveness over extended deployment</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Additional Resources -->
|
||||
<section class="border-t border-gray-200 pt-12">
|
||||
<h2 class="text-xl font-bold text-gray-900 mb-4" data-i18n="footer.additional_resources">Additional Resources</h2>
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
<a href="/leader.html" class="block border border-gray-300 rounded-lg p-5 hover:border-amber-500 transition">
|
||||
<div class="font-semibold text-gray-900 mb-1" data-i18n="footer.for_decision_makers">For Decision-Makers</div>
|
||||
<div class="text-sm text-gray-600" data-i18n="footer.for_decision_makers_desc">Strategic perspective on governance challenges and architectural approaches</div>
|
||||
</a>
|
||||
<a href="/implementer.html" class="block border border-gray-300 rounded-lg p-5 hover:border-amber-500 transition">
|
||||
<div class="font-semibold text-gray-900 mb-1" data-i18n="footer.implementation_guide">Implementation Guide</div>
|
||||
<div class="text-sm text-gray-600" data-i18n="footer.implementation_guide_desc">Technical integration patterns and deployment considerations</div>
|
||||
</a>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- Footer -->
|
||||
<!-- Version Management & PWA -->
|
||||
<script src="/js/version-manager.js"></script>
|
||||
<script src="/js/researcher-page.js"></script>
|
||||
|
||||
<!-- Internationalization -->
|
||||
<script src="/js/i18n-simple.js?v=1760818106"></script>
|
||||
<script src="/js/components/language-selector.js?v=1760818106"></script>
|
||||
|
||||
<!-- Scroll Animations (Phase 3) -->
|
||||
<script src="/js/scroll-animations.js"></script>
|
||||
<!-- Page Transitions (Phase 3) -->
|
||||
<script src="/js/page-transitions.js"></script>
|
||||
|
||||
<!-- Footer Component -->
|
||||
<script src="/js/components/footer.js"></script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
Loading…
Add table
Reference in a new issue