325a06139f
Frontend Maintenance: - Updated cache-busting version parameters on all script/CSS links - researcher.html: Version updates for navbar, i18n, scroll-animations - implementer.html: Version updates for components - leader.html: Version updates for components - i18n-simple.js: Updated internationalization utility These version updates ensure users get fresh content after website audit deployment and prevent stale cache issues. All changes deployed to production and verified working.
624 lines
39 KiB
HTML
624 lines
39 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>For 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?v=1761163813">
|
|
<link rel="stylesheet" href="/css/tailwind.css?v=1761163813">
|
|
<link rel="stylesheet" href="/css/tractatus-theme.min.css?v=1761163813">
|
|
<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;
|
|
touch-action: manipulation; /* Prevent double-tap zoom on mobile */
|
|
-webkit-tap-highlight-color: rgba(217, 119, 6, 0.1); /* iOS tap feedback */
|
|
min-height: 44px; /* WCAG touch target minimum */
|
|
border: none;
|
|
background: none;
|
|
width: 100%;
|
|
text-align: left;
|
|
}
|
|
@media (max-width: 640px) {
|
|
.accordion-button { min-height: 48px; } /* Larger touch target on small screens */
|
|
}
|
|
.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=1761163813"></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">
|
|
<button type="button" class="accordion-button bg-gray-50 p-5 flex justify-between items-center" data-accordion="arch-layers" aria-expanded="false" aria-controls="arch-layers-content" id="arch-layers-button">
|
|
<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>
|
|
</button>
|
|
<div id="arch-layers-content" class="accordion-content" role="region" aria-labelledby="arch-layers-button">
|
|
<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">
|
|
<button type="button" class="accordion-button bg-gray-50 p-5 flex justify-between items-center" data-accordion="services" aria-expanded="false" aria-controls="services-content" id="services-button">
|
|
<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>
|
|
</button>
|
|
<div id="services-content" class="accordion-content" role="region" aria-labelledby="services-button">
|
|
<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">
|
|
<button type="button" class="accordion-button bg-gradient-to-r from-blue-50 to-indigo-50 p-5 flex justify-between items-center" data-accordion="demo-audit" aria-expanded="false" aria-controls="demo-audit-content" id="demo-audit-button">
|
|
<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>
|
|
</button>
|
|
<div id="demo-audit-content" class="accordion-content" role="region" aria-labelledby="demo-audit-button">
|
|
<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">
|
|
<button type="button" class="accordion-button bg-gradient-to-r from-green-50 to-emerald-50 p-5 flex justify-between items-center" data-accordion="demo-learning" aria-expanded="false" aria-controls="demo-learning-content" id="demo-learning-button">
|
|
<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>
|
|
</button>
|
|
<div id="demo-learning-content" class="accordion-content" role="region" aria-labelledby="demo-learning-button">
|
|
<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">
|
|
<button type="button" class="accordion-button bg-gradient-to-r from-purple-50 to-pink-50 p-5 flex justify-between items-center" data-accordion="demo-deliberation" aria-expanded="false" aria-controls="demo-deliberation-content" id="demo-deliberation-button">
|
|
<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>
|
|
</button>
|
|
<div id="demo-deliberation-content" class="accordion-content" role="region" aria-labelledby="demo-deliberation-button">
|
|
<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">
|
|
<button type="button" class="accordion-button bg-gray-50 p-5 flex justify-between items-center" data-accordion="validation" aria-expanded="false" aria-controls="validation-content" id="validation-button">
|
|
<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>
|
|
</button>
|
|
<div id="validation-content" class="accordion-content" role="region" aria-labelledby="validation-button">
|
|
<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">
|
|
<button type="button" class="accordion-button bg-gray-50 p-5 flex justify-between items-center" data-accordion="euaiact" aria-expanded="false" aria-controls="euaiact-content" id="euaiact-button">
|
|
<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>
|
|
</button>
|
|
<div id="euaiact-content" class="accordion-content" role="region" aria-labelledby="euaiact-button">
|
|
<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">
|
|
<button type="button" class="accordion-button bg-gray-50 p-5 flex justify-between items-center" data-accordion="research" aria-expanded="false" aria-controls="research-content" id="research-button">
|
|
<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>
|
|
</button>
|
|
<div id="research-content" class="accordion-content" role="region" aria-labelledby="research-button">
|
|
<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">
|
|
<button type="button" class="accordion-button bg-gray-50 p-5 flex justify-between items-center" data-accordion="scope" aria-expanded="false" aria-controls="scope-content" id="scope-button">
|
|
<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>
|
|
</button>
|
|
<div id="scope-content" class="accordion-content" role="region" aria-labelledby="scope-button">
|
|
<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 -->
|
|
<!-- Internationalization (must load first for footer translations) -->
|
|
<script src="/js/i18n-simple.js?v=1761163813"></script>
|
|
<script src="/js/components/language-selector.js?v=1761163813"></script>
|
|
|
|
<!-- Scroll Animations (Phase 3) -->
|
|
<script src="/js/scroll-animations.js?v=1761163813"></script>
|
|
<!-- Page Transitions (Phase 3) -->
|
|
<script src="/js/page-transitions.js?v=1761163813"></script>
|
|
|
|
<!-- Version Management & PWA -->
|
|
<script src="/js/version-manager.js?v=1761163813"></script>
|
|
<script src="/js/leader-page.js?v=1761163813"></script>
|
|
|
|
<!-- Footer Component -->
|
|
<script src="/js/components/footer.js?v=1761163813"></script>
|
|
|
|
</body>
|
|
</html>
|