tractatus/public/timeline.html
TheFlow 0c2c2e463d feat: Audit & update all audience pages with current research and metrics
- Add i18n data-i18n attributes to navbar.js (~30 elements) and expand
  all 4 common.json files with navbar translation keys (EN/DE/FR/MI)
- Replace broken HuggingFace Space links with local audit analytics
  dashboard across 4 HTML files; update counts to 171,800+
- Add Steering Vectors, Taonga Governance, and Home AI sections to
  researcher.html, leader.html, and implementer.html
- Update stale metrics: development period (11+ months), sessions
  (1,000+), instructions (68), model references (Opus 4.6)
- Update roadmap Multi-LLM status to reflect Home AI as first non-Claude
  deployment; add Sovereign Training Pipeline and Taonga Registry items
- Update all EN/DE/FR translation files with new section keys

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
2026-02-11 08:07:26 +13:00

333 lines
20 KiB
HTML

<!DOCTYPE html>
<html lang="en" data-page="timeline">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Research Timeline | Tractatus AI Safety Framework</title>
<meta name="description" content="How the Tractatus framework evolved from a port number incident to a production governance architecture over 800 commits and one year of research.">
<meta property="og:type" content="website">
<meta property="og:url" content="https://agenticgovernance.digital/timeline.html">
<meta property="og:title" content="Research Timeline | Tractatus Framework">
<meta property="og:description" content="The evolution of architectural AI governance research, October 2025 to present.">
<meta property="og:image" content="https://agenticgovernance.digital/images/social-preview.png">
<meta property="og:site_name" content="Tractatus Framework">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="Research Timeline | Tractatus Framework">
<meta name="twitter:description" content="The evolution of architectural AI governance research, October 2025 to present.">
<meta name="twitter:image" content="https://agenticgovernance.digital/images/social-preview.png">
<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">
<link rel="stylesheet" href="/css/tractatus-theme.min.css?v=0.1.3">
<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; }
.timeline-line {
position: absolute;
left: 1.25rem;
top: 0;
bottom: 0;
width: 2px;
background: linear-gradient(to bottom, #3b82f6, #8b5cf6, #14b8a6);
}
@media (min-width: 768px) {
.timeline-line {
left: 50%;
transform: translateX(-50%);
}
}
.timeline-dot {
width: 1rem;
height: 1rem;
border-radius: 50%;
border: 3px solid white;
box-shadow: 0 0 0 2px #3b82f6;
position: absolute;
left: 0.75rem;
top: 0.25rem;
}
.dot-red { box-shadow: 0 0 0 2px #ef4444; }
.dot-indigo { box-shadow: 0 0 0 2px #6366f1; }
.dot-teal { box-shadow: 0 0 0 2px #14b8a6; }
.dot-orange { box-shadow: 0 0 0 2px #f97316; }
.dot-purple { box-shadow: 0 0 0 2px #a855f7; }
.dot-yellow { box-shadow: 0 0 0 2px #eab308; }
.dot-emerald { box-shadow: 0 0 0 2px #10b981; }
.dot-blue { box-shadow: 0 0 0 2px #2563eb; }
.dot-gray { box-shadow: 0 0 0 2px #111827; }
@media (min-width: 768px) {
.timeline-dot {
left: 50%;
transform: translateX(-50%);
}
}
</style>
</head>
<body class="bg-gray-50">
<a href="#main-content" class="skip-link">Skip to main content</a>
<!-- Navigation -->
<div id="navbar-placeholder" class="min-h-16"></div>
<script src="/js/components/navbar.js"></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="text-blue-600 hover:underline transition-colors">Home</a></li>
<li class="text-gray-400">/</li>
<li class="text-gray-900 font-medium" aria-current="page">Research Timeline</li>
</ol>
</div>
</nav>
<!-- Hero -->
<header class="bg-gradient-to-br from-blue-600 via-blue-700 to-purple-700 text-white py-16">
<div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
<h1 class="text-4xl md:text-5xl font-bold mb-4">Research Timeline</h1>
<p class="text-xl text-blue-100 max-w-3xl mx-auto">
How the Tractatus framework evolved from a port number incident to a production governance architecture, across 800 commits and one year of research.
</p>
<p class="text-sm text-blue-200 mt-4">October 2025 &ndash; February 2026</p>
</div>
</header>
<main id="main-content" class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 py-16">
<!-- Context -->
<section class="mb-16">
<div class="bg-amber-50 border-l-4 border-amber-500 p-6 rounded-r-lg">
<h2 class="text-lg font-bold text-amber-900 mb-2">A note on this timeline</h2>
<p class="text-amber-800">
This timeline documents the actual progression of research, not a retrospective narrative. Some directions were abandoned, some emerged unexpectedly, and the framework today differs substantially from what was envisioned at the start. We include the dead ends because they are part of the research record.
</p>
</div>
</section>
<!-- Timeline -->
<section class="relative">
<div class="timeline-line"></div>
<!-- October 2025: Foundation -->
<div class="relative pl-12 md:pl-0 mb-16">
<div class="timeline-dot bg-blue-500"></div>
<div class="md:w-5/12 md:ml-auto md:pl-8">
<div class="bg-white rounded-xl shadow-md p-6 border border-gray-200">
<span class="text-xs font-semibold text-blue-600 uppercase tracking-wider">October 6-7, 2025</span>
<h3 class="text-xl font-bold text-gray-900 mt-1 mb-3">Project Inception</h3>
<p class="text-gray-700 text-sm mb-3">
The Tractatus project began with a MongoDB initialisation and Express server foundation. Within 24 hours, all six governance services were implemented and activated: InstructionPersistenceClassifier, CrossReferenceValidator, BoundaryEnforcer, ContextPressureMonitor, MetacognitiveVerifier, and PluralisticDeliberationOrchestrator.
</p>
<p class="text-gray-700 text-sm">
The initial test suite reached 84.9% coverage. The name "Tractatus" was chosen deliberately &mdash; Wittgenstein's insight that some things lie beyond the limits of language, and therefore beyond systematisation, directly informed the architectural boundary between what AI may decide and what requires human judgment.
</p>
<div class="mt-3 text-xs text-gray-500">First commit: <code>4445b0e</code></div>
</div>
</div>
</div>
<!-- The 27027 Incident -->
<div class="relative pl-12 md:pl-0 mb-16">
<div class="timeline-dot bg-red-500 dot-red"></div>
<div class="md:w-5/12 md:mr-auto md:pr-8">
<div class="bg-white rounded-xl shadow-md p-6 border border-gray-200 border-l-4 border-l-red-500">
<span class="text-xs font-semibold text-red-600 uppercase tracking-wider">The Origin Incident</span>
<h3 class="text-xl font-bold text-gray-900 mt-1 mb-3">The 27027 Incident</h3>
<p class="text-gray-700 text-sm mb-3">
During extended Claude Code sessions, the AI was explicitly told to use port 27027. It used 27017 instead &mdash; not through forgetting, but because its training patterns "autocorrected" the user's instruction. The user said 27027; the model's statistical priors said 27017 (MongoDB's default). Pattern recognition overrode explicit instruction.
</p>
<p class="text-gray-700 text-sm">
This was not an isolated error but a category of failure: <em>training pattern bias overriding explicit user instructions</em>. It demonstrated that safety through training alone is insufficient &mdash; the failure mode gets worse as models become more capable, because stronger patterns produce more confident overrides.
</p>
</div>
</div>
</div>
<!-- Architecture & Audience Pages -->
<div class="relative pl-12 md:pl-0 mb-16">
<div class="timeline-dot bg-indigo-500 dot-indigo"></div>
<div class="md:w-5/12 md:ml-auto md:pl-8">
<div class="bg-white rounded-xl shadow-md p-6 border border-gray-200">
<span class="text-xs font-semibold text-indigo-600 uppercase tracking-wider">October 9-13, 2025</span>
<h3 class="text-xl font-bold text-gray-900 mt-1 mb-3">Audience-Specific Presentation</h3>
<p class="text-gray-700 text-sm mb-3">
Three audience-specific entry points were developed: Researcher (academic depth), Implementer (code examples and integration), and Leader (strategic governance and business case). The architecture page was rewritten to emphasise runtime-agnostic design &mdash; Tractatus works with any agentic AI system, not just Claude Code.
</p>
<p class="text-gray-700 text-sm">
This period established the honest early-stage positioning that characterises the project: acknowledging limited-deployment scope, operator-developer overlap, and the need for independent validation.
</p>
</div>
</div>
</div>
<!-- Internationalisation -->
<div class="relative pl-12 md:pl-0 mb-16">
<div class="timeline-dot bg-teal-500 dot-teal"></div>
<div class="md:w-5/12 md:mr-auto md:pr-8">
<div class="bg-white rounded-xl shadow-md p-6 border border-gray-200">
<span class="text-xs font-semibold text-teal-700 uppercase tracking-wider">October 16-19, 2025</span>
<h3 class="text-xl font-bold text-gray-900 mt-1 mb-3">Internationalisation</h3>
<p class="text-gray-700 text-sm mb-3">
Full i18n support was added across all pages using a custom lightweight system (no framework dependency). Initial languages: English, German, French, with te reo M&#257;ori added later via DeepL. The language selection includes the Tino Rangatiratanga flag for M&#257;ori &mdash; a deliberate choice reflecting the project's commitment to indigenous data sovereignty over national symbolism.
</p>
</div>
</div>
</div>
<!-- Interactive Demos & Visualisation -->
<div class="relative pl-12 md:pl-0 mb-16">
<div class="timeline-dot bg-orange-500 dot-orange"></div>
<div class="md:w-5/12 md:ml-auto md:pl-8">
<div class="bg-white rounded-xl shadow-md p-6 border border-gray-200">
<span class="text-xs font-semibold text-orange-600 uppercase tracking-wider">October 19-23, 2025</span>
<h3 class="text-xl font-bold text-gray-900 mt-1 mb-3">Interactive Demonstrations</h3>
<p class="text-gray-700 text-sm mb-3">
Interactive SVG architecture diagram with clickable service nodes. The 27027 incident recreated as a step-by-step demo showing how each governance service intercepts the failure. An interactive audit analytics dashboard was launched with governance decisions from production (initially 3,942; now exceeding 171,800+), allowing independent exploration of real audit data.
</p>
<p class="text-gray-700 text-sm">
WCAG accessibility compliance was implemented across all audience pages &mdash; skip links, focus indicators, keyboard navigation, and screen reader support.
</p>
</div>
</div>
</div>
<!-- Alexander Principles -->
<div class="relative pl-12 md:pl-0 mb-16">
<div class="timeline-dot bg-purple-500 dot-purple"></div>
<div class="md:w-5/12 md:mr-auto md:pr-8">
<div class="bg-white rounded-xl shadow-md p-6 border border-gray-200">
<span class="text-xs font-semibold text-purple-600 uppercase tracking-wider">October 30-31, 2025</span>
<h3 class="text-xl font-bold text-gray-900 mt-1 mb-3">Christopher Alexander Integration</h3>
<p class="text-gray-700 text-sm mb-3">
The five architectural principles &mdash; Not-Separateness, Deep Interlock, Gradients Not Binary, Structure-Preserving, and Living Process &mdash; were formalised, drawing from Christopher Alexander's work on living systems and pattern languages. These became the design criteria guiding framework evolution, not merely documentation.
</p>
<p class="text-gray-700 text-sm">
This was a pivotal moment: the framework shifted from ad-hoc engineering responses to principled architectural design. Each subsequent change was evaluated against these five criteria.
</p>
</div>
</div>
</div>
<!-- Agent Lightning -->
<div class="relative pl-12 md:pl-0 mb-16">
<div class="timeline-dot bg-yellow-500 dot-yellow"></div>
<div class="md:w-5/12 md:ml-auto md:pl-8">
<div class="bg-white rounded-xl shadow-md p-6 border border-gray-200">
<span class="text-xs font-semibold text-yellow-600 uppercase tracking-wider">November 3-4, 2025</span>
<h3 class="text-xl font-bold text-gray-900 mt-1 mb-3">Agent Lightning Integration</h3>
<p class="text-gray-700 text-sm mb-3">
Integration with Microsoft's Agent Lightning framework for reinforcement learning optimisation. This explored whether governance constraints could be maintained while optimising for performance &mdash; testing the hypothesis that safety and performance might be aligned rather than in tension.
</p>
<p class="text-gray-700 text-sm">
Newsletter and feedback systems were added, both governed through the Tractatus framework itself &mdash; an early example of "eating our own cooking."
</p>
</div>
</div>
</div>
<!-- Village Platform -->
<div class="relative pl-12 md:pl-0 mb-16">
<div class="timeline-dot bg-emerald-500 dot-emerald"></div>
<div class="md:w-5/12 md:mr-auto md:pr-8">
<div class="bg-white rounded-xl shadow-md p-6 border border-gray-200 border-l-4 border-l-emerald-500">
<span class="text-xs font-semibold text-emerald-700 uppercase tracking-wider">December 2025</span>
<h3 class="text-xl font-bold text-gray-900 mt-1 mb-3">Village Case Study</h3>
<p class="text-gray-700 text-sm mb-3">
The Village platform &mdash; a community-governed digital space &mdash; became the primary production deployment of Tractatus governance. Home AI, the platform's locally-scoped language model, applies all six governance services to every user interaction: RAG-based help, document OCR, story assistance, and AI memory transparency.
</p>
<p class="text-gray-700 text-sm">
A formal case study was published documenting the deployment, including honest limitations: early-stage federated deployment, self-reported metrics, operator-developer overlap. Independent validation was scheduled for 2026.
</p>
<a href="/village-case-study.html" class="inline-block mt-3 text-sm text-emerald-700 hover:text-emerald-800 font-medium">Read the case study &rarr;</a>
</div>
</div>
</div>
<!-- Research Papers -->
<div class="relative pl-12 md:pl-0 mb-16">
<div class="timeline-dot bg-blue-600 dot-blue"></div>
<div class="md:w-5/12 md:ml-auto md:pl-8">
<div class="bg-white rounded-xl shadow-md p-6 border border-gray-200 border-l-4 border-l-blue-600">
<span class="text-xs font-semibold text-blue-600 uppercase tracking-wider">January 2026</span>
<h3 class="text-xl font-bold text-gray-900 mt-1 mb-3">Architectural Alignment Papers</h3>
<p class="text-gray-700 text-sm mb-3">
Three editions of the research paper <em>"Interrupting Neural Reasoning Through Constitutional Inference Gating"</em> were published: Academic (full formal treatment), Community (practical adoption guide), and Policymakers (regulatory perspective). The K&#333;rero counter-arguments document was also published &mdash; a deliberate engagement with foreseeable criticisms of the approach.
</p>
<p class="text-gray-700 text-sm">
The papers formalise the philosophical foundations: Isaiah Berlin's value pluralism, Wittgenstein's sayable/unsayable distinction, indigenous data sovereignty from Te Tiriti o Waitangi, and Christopher Alexander's living architecture.
</p>
<div class="flex flex-wrap gap-2 mt-3">
<a href="/architectural-alignment.html" class="text-sm text-blue-600 hover:text-blue-700 font-medium">Academic &rarr;</a>
<a href="/architectural-alignment-community.html" class="text-sm text-blue-600 hover:text-blue-700 font-medium">Community &rarr;</a>
<a href="/architectural-alignment-policymakers.html" class="text-sm text-blue-600 hover:text-blue-700 font-medium">Policymakers &rarr;</a>
</div>
</div>
</div>
</div>
<!-- Current State -->
<div class="relative pl-12 md:pl-0 mb-8">
<div class="timeline-dot bg-gray-900 dot-gray"></div>
<div class="md:w-5/12 md:mr-auto md:pr-8">
<div class="bg-gray-900 rounded-xl shadow-md p-6 text-white">
<span class="text-xs font-semibold text-blue-300 uppercase tracking-wider">February 2026</span>
<h3 class="text-xl font-bold mt-1 mb-3">Current State</h3>
<p class="text-gray-300 text-sm mb-3">
The framework has reached 800 commits across 16 months. Six governance services operate in production. The Village platform provides the primary evidence base, with Home AI applying Tractatus governance to every interaction.
</p>
<div class="space-y-2 text-sm text-gray-300">
<p><strong class="text-white">Open questions:</strong> Does the architecture scale beyond single-tenant deployment? Can the governance overhead be reduced below 5% while maintaining coverage? Does the apparent safety-performance alignment hold under controlled measurement?</p>
<p><strong class="text-white">Next steps:</strong> Independent audit, multi-site validation, controlled performance experiments, and community adoption beyond the development team.</p>
</div>
</div>
</div>
</div>
</section>
<!-- Summary Statistics -->
<section class="mt-16 bg-white rounded-xl shadow-md p-8 border border-gray-200">
<h2 class="text-2xl font-bold text-gray-900 mb-6 text-center">Research by the Numbers</h2>
<div class="grid grid-cols-2 md:grid-cols-4 gap-6 text-center">
<div>
<div class="text-3xl font-bold text-blue-600">800+</div>
<div class="text-sm text-gray-600 mt-1">Commits</div>
</div>
<div>
<div class="text-3xl font-bold text-purple-600">6</div>
<div class="text-sm text-gray-600 mt-1">Governance services</div>
</div>
<div>
<div class="text-3xl font-bold text-teal-700">5</div>
<div class="text-sm text-gray-600 mt-1">Languages supported</div>
</div>
<div>
<div class="text-3xl font-bold text-emerald-700">3</div>
<div class="text-sm text-gray-600 mt-1">Paper editions</div>
</div>
</div>
<p class="text-center text-sm text-gray-500 mt-6 italic">
All metrics self-reported from early-stage federated deployment. Independent validation pending.
</p>
</section>
</main>
<!-- Footer & Scripts -->
<script src="/js/i18n-simple.js"></script>
<script src="/js/components/language-selector.js"></script>
<script src="/js/scroll-animations.js"></script>
<script src="/js/page-transitions.js"></script>
<script src="/js/components/footer.js"></script>
<script src="/js/components/feedback.js"></script>
</body>
</html>