tractatus/public/leader.html
TheFlow 9d390da76b style(ui): update theme, branding, and GitHub repository links
Update UI across all pages with:
- New favicon and brand icons (favicon-new.svg, tractatus-icon-new.svg)
- Theme CSS integration (tractatus-theme.min.css)
- Correct GitHub repository links (AgenticGovernance/tractatus)
- PWA manifest updates
- Consistent branding colors and gradients

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
2025-10-19 12:48:29 +13:00

609 lines
37 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">
<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" style="color: var(--tractatus-core-end);">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-700 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-700 hover:text-amber-800 font-medium inline-flex items-center">
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-700 hover:text-amber-800 font-medium inline-flex items-center">
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-700 hover:text-amber-800 font-medium inline-flex items-center">
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-700 hover:text-amber-800">project information page</a>.
</p>
</div>
</section>
</div>
<!-- Footer -->
<!-- Internationalization -->
<script src="/js/i18n-simple.js?v=1760818106"></script>
<script src="/js/components/language-selector.js?v=1760818106"></script>
<!-- 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>
<!-- Footer Component -->
<script src="/js/components/footer.js"></script>
</body>
</html>