john/tractatus
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

feat: Complete site audit and UI/UX redesign for agenticgovernance.digital

Browse source 
Homepage redesign with coherent story arc: Problem → Philosophy →
Architecture → Production Evidence → Audience Paths → Papers → Timeline.
Add Koha (donations) section prominently after Honesty Note for optimal
placement. Add Philosophical Foundations PDF download link.

New pages: timeline.html (research evolution Oct 2025–Feb 2026),
home-ai.html (SLL sovereign AI story). Blog seed script with two
initial posts.

Global navigation: consistent desktop nav with Research, Architecture,
and About dropdowns across all pages. Blog/FAQ removed from nav until
populated.

Page refinements: remove emoji from headings across architecture,
leader, implementer, researcher pages. Fix FAQ dead links → counter-
arguments. Add no-JS fallback to docs.html. Fix CSP inline style
violations in village-case-study.html (hero and CTA sections converted
from inline styles to Tailwind/CSS classes). Add Home AI cross-reference
to village case study.

Note: philosophical-foundations-village-project.pdf must be deployed
separately to public/downloads/ (gitignored directory).

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
TheFlow 2026-02-07 12:44:53 +13:00
parent 62b9b1fa32
commit 074906608d
12 changed files with 1608 additions and 918 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

109
public/about.html
View file

@ -118,6 +118,23 @@
</div>
</section>
<!-- Philosophical Foundations -->
<section class="mb-16">
<div class="bg-purple-50 border-l-4 border-purple-600 p-6 rounded-r-lg">
<h3 class="text-xl font-bold text-gray-900 mb-3">Philosophical Foundations</h3>
<p class="text-gray-700 mb-4">
For a comprehensive treatment of the intellectual foundations informing this work &mdash; Berlin's value pluralism, Alexander's structural integrity, indigenous data sovereignty, and Wittgenstein's limits of the sayable &mdash; see the full paper.
</p>
<a href="/downloads/philosophical-foundations-village-project.pdf"
class="inline-flex items-center gap-2 text-purple-700 hover:text-purple-900 font-semibold transition">
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 10v6m0 0l-3-3m3 3l3-3m2 8H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/>
</svg>
The Philosophical Foundations of the Village Project (PDF)
</a>
</div>
</section>
<!-- Core Values -->
<section class="mb-16">
<h2 class="text-3xl font-bold text-gray-900 mb-6" data-i18n="core_values.heading">Core Values</h2>
@ -227,57 +244,19 @@
<h2 class="text-3xl font-bold text-gray-900 mb-6" data-i18n="how_it_works.heading">How It Works</h2>
<div class="prose prose-lg text-gray-600">
<p class="mb-6" data-i18n="how_it_works.intro">
The Tractatus Framework consists of six integrated components that work together to enforce structural safety:
The Tractatus Framework consists of six integrated governance services that operate in the critical execution path. Every AI action passes through validation before executing — this is architectural enforcement, not voluntary compliance.
</p>
<p class="mb-6">
The services — BoundaryEnforcer, InstructionPersistenceClassifier, CrossReferenceValidator, ContextPressureMonitor, MetacognitiveVerifier, and PluralisticDeliberationOrchestrator — coordinate through mutual validation, creating resilience through redundancy.
</p>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 gap-6 mt-6">
<div class="bg-gray-50 rounded-lg p-6">
<h3 class="text-lg font-bold text-gray-900 mb-2" data-i18n="how_it_works.classifier_title">InstructionPersistenceClassifier</h3>
<p class="text-sm text-gray-600" data-i18n="how_it_works.classifier_desc">
Classifies instructions by quadrant (Strategic, Operational, Tactical, System, Stochastic) and determines persistence level (HIGH/MEDIUM/LOW/VARIABLE).
</p>
</div>
<div class="bg-gray-50 rounded-lg p-6">
<h3 class="text-lg font-bold text-gray-900 mb-2" data-i18n="how_it_works.validator_title">CrossReferenceValidator</h3>
<p class="text-sm text-gray-600" data-i18n="how_it_works.validator_desc">
Validates AI actions against stored instructions to prevent pattern recognition bias (like the 27027 incident where AI's training patterns immediately overrode user's explicit "port 27027" instruction).
</p>
</div>
<div class="bg-gray-50 rounded-lg p-6">
<h3 class="text-lg font-bold text-gray-900 mb-2" data-i18n="how_it_works.boundary_title">BoundaryEnforcer</h3>
<p class="text-sm text-gray-600" data-i18n="how_it_works.boundary_desc">
Ensures AI never makes values decisions without human approval. Privacy trade-offs, user agency, cultural context—these require human judgment.
</p>
</div>
<div class="bg-gray-50 rounded-lg p-6">
<h3 class="text-lg font-bold text-gray-900 mb-2" data-i18n="how_it_works.pressure_title">ContextPressureMonitor</h3>
<p class="text-sm text-gray-600" data-i18n="how_it_works.pressure_desc">
Detects when session conditions increase error probability (token pressure, message length, task complexity) and adjusts behavior or suggests handoff.
</p>
</div>
<div class="bg-gray-50 rounded-lg p-6">
<h3 class="text-lg font-bold text-gray-900 mb-2" data-i18n="how_it_works.metacognitive_title">MetacognitiveVerifier</h3>
<p class="text-sm text-gray-600" data-i18n="how_it_works.metacognitive_desc">
AI self-checks complex reasoning before proposing actions. Evaluates alignment, coherence, completeness, safety, and alternatives.
</p>
</div>
<div class="bg-gray-50 rounded-lg p-6">
<h3 class="text-lg font-bold text-gray-900 mb-2" data-i18n="how_it_works.deliberation_title">PluralisticDeliberationOrchestrator</h3>
<p class="text-sm text-gray-600" data-i18n="how_it_works.deliberation_desc">
When AI encounters values decisions—choices with no single "correct" answer—coordinates deliberation among affected stakeholders rather than making autonomous choices. Preserves human agency over moral decisions.
</p>
</div>
</div>
<div class="mt-8 text-center">
<div class="mt-6 flex flex-wrap gap-4 justify-center">
<a href="/architecture.html" class="inline-block bg-blue-600 text-white px-6 py-3 rounded-lg font-semibold hover:bg-blue-700 transition">
See the Architecture in Detail
</a>
<a href="/implementer.html" class="inline-block bg-purple-600 text-white px-6 py-3 rounded-lg font-semibold hover:bg-purple-700 transition" data-i18n="how_it_works.read_technical_btn">
Read Technical Documentation & Implementation Guide →
Implementation Guide
</a>
</div>
</section>
@ -332,41 +311,7 @@
</section>
</div>
<!-- Share CTA -->
<section class="bg-gray-100 py-12">
<div class="max-w-2xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="bg-white rounded-lg shadow-sm border border-gray-200 p-8">
<h2 class="text-2xl font-semibold text-gray-900 mb-3" data-i18n="share_cta.heading">
Help us reach the right people.
</h2>
<p class="text-gray-700 mb-6" data-i18n="share_cta.description">
If you know researchers, implementers, or leaders who need structural AI governance solutions, share this with them.
</p>
<div class="flex flex-wrap gap-3">
<button
data-action="copy-link"
class="bg-blue-600 hover:bg-blue-700 text-white px-6 py-2.5 rounded-lg font-medium transition-colors shadow-sm"
data-i18n="share_cta.copy_link">
Copy Link
</button>
<button
data-action="email-share"
class="bg-blue-600 hover:bg-blue-700 text-white px-6 py-2.5 rounded-lg font-medium transition-colors shadow-sm"
data-i18n="share_cta.email">
Email
</button>
<button
data-action="linkedin-share"
class="bg-blue-600 hover:bg-blue-700 text-white px-6 py-2.5 rounded-lg font-medium transition-colors shadow-sm"
data-i18n="share_cta.linkedin">
LinkedIn
</button>
</div>
</div>
</div>
</section>
<!-- Footer with Te Tiriti Acknowledgment -->
<!-- Footer -->
<!-- Footer -->
<!-- Internationalization -->
<script src="/js/i18n-simple.js?v=0.1.2.1769107445437"></script>

16
public/architecture.html
View file

@ -70,7 +70,7 @@
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="text-center">
<div class="inline-block bg-amber-700 text-white px-4 py-2 rounded-lg font-semibold mb-6 text-sm" data-i18n="hero.badge">
🏛️ BUILT ON LIVING SYSTEMS PRINCIPLES
BUILT ON LIVING SYSTEMS PRINCIPLES
</div>
<h1 class="text-5xl md:text-6xl font-bold mb-6" data-i18n="hero.title">
Five Architectural Principles for AI Safety
@ -394,7 +394,7 @@
<section class="bg-gradient-to-br from-yellow-50 to-orange-50 py-16 border-y border-orange-200">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
<div class="inline-block bg-orange-600 text-white px-4 py-2 rounded-lg font-semibold mb-6 text-sm" data-i18n="interactive_exploration.badge">
🔍 INTERACTIVE EXPLORATION
INTERACTIVE EXPLORATION
</div>
<h2 class="text-4xl md:text-5xl font-bold mb-6 text-gray-900" data-i18n="interactive_exploration.heading">
See the Framework in Action
@ -410,7 +410,7 @@
rel="noopener noreferrer"
class="inline-block bg-orange-600 text-white px-8 py-4 rounded-lg font-bold text-lg hover:bg-orange-700 transition shadow-lg hover:shadow-xl"
data-i18n="interactive_exploration.hf_cta">
🤗 Launch Interactive Explorer on Hugging Face
Launch Interactive Explorer on Hugging Face
</a>
<a href="/researcher.html"
class="inline-block bg-white text-gray-900 px-8 py-4 rounded-lg font-semibold text-lg hover:bg-gray-100 transition border-2 border-gray-300"
@ -842,23 +842,23 @@
<h3 class="text-xl font-bold text-amber-900 mt-6 mb-3" data-i18n="limitations.needs_heading"></h3>
<ul class="space-y-2 ml-6">
<li class="flex items-start">
<span class="mr-2">🔬</span>
<span class="mr-2">•</span>
<span data-i18n="limitations.need1"></span>
</li>
<li class="flex items-start">
<span class="mr-2">🔴</span>
<span class="mr-2">•</span>
<span data-i18n="limitations.need2"></span>
</li>
<li class="flex items-start">
<span class="mr-2">🏢</span>
<span class="mr-2">•</span>
<span data-i18n="limitations.need3"></span>
</li>
<li class="flex items-start">
<span class="mr-2">🤝</span>
<span class="mr-2">•</span>
<span data-i18n="limitations.need4"></span>
</li>
<li class="flex items-start">
<span class="mr-2">📊</span>
<span class="mr-2">•</span>
<span data-i18n="limitations.need5"></span>
<p class="text-lg mt-6 font-semibold" data-i18n="limitations.conclusion"></p>

40
public/docs.html
View file

@ -554,6 +554,19 @@
<div class="bg-white rounded-lg shadow-sm border border-gray-200 p-4 sticky top-24">
<h3 class="font-semibold text-gray-900 mb-3">Documents</h3>
<div id="document-list" class="space-y-1">
<noscript>
<div class="text-sm text-gray-700 space-y-3">
<p class="font-medium">JavaScript is required to browse documentation interactively.</p>
<p>You can also access the documentation directly:</p>
<ul class="list-disc pl-5 space-y-1">
<li><a href="https://github.com/AgenticGovernance/tractatus-framework" class="text-blue-600 hover:underline">GitHub Repository</a></li>
<li><a href="/architecture.html" class="text-blue-600 hover:underline">Architecture Overview</a></li>
<li><a href="/implementer.html" class="text-blue-600 hover:underline">Implementation Guide</a></li>
<li><a href="/researcher.html" class="text-blue-600 hover:underline">Research Foundations</a></li>
<li><a href="/village-case-study.html" class="text-blue-600 hover:underline">Village Case Study</a></li>
</ul>
</div>
</noscript>
<div class="text-sm text-gray-500">Loading...</div>
</div>
@ -608,6 +621,33 @@
</button>
<div id="document-content" class="bg-white rounded-lg shadow-sm border border-gray-200 p-8 overflow-x-hidden">
<noscript>
<div class="prose max-w-none">
<h2>Tractatus Framework Documentation</h2>
<p>This documentation viewer requires JavaScript to load and display documents interactively. Please enable JavaScript, or access the documentation through the links below:</p>
<h3>Core Documentation</h3>
<ul>
<li><a href="/architecture.html">System Architecture</a> — Five architectural principles and six governance services</li>
<li><a href="/implementer.html">Implementation Guide</a> — Technical integration guide with code examples</li>
<li><a href="/researcher.html">Research Foundations</a> — Philosophical and theoretical basis</li>
</ul>
<h3>Case Studies</h3>
<ul>
<li><a href="/village-case-study.html">Village Case Study</a> — Production deployment evidence</li>
<li><a href="/home-ai.html">Home AI / SLL</a> — Sovereign locally-trained language model</li>
</ul>
<h3>Research Papers</h3>
<ul>
<li><a href="/architectural-alignment.html">Academic Edition</a></li>
<li><a href="/architectural-alignment-community.html">Community Edition</a></li>
<li><a href="/architectural-alignment-policymakers.html">Policymakers Edition</a></li>
</ul>
<h3>Source Code</h3>
<ul>
<li><a href="https://github.com/AgenticGovernance/tractatus-framework">GitHub Repository</a> — Apache 2.0 licensed</li>
</ul>
</div>
</noscript>
<div class="text-center py-12">
<svg class="mx-auto h-12 w-12 text-gray-400" 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"/>

303
public/home-ai.html Normal file
View file

@ -0,0 +1,303 @@
<!DOCTYPE html>
<html lang="en" data-page="home-ai">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Home AI | Tractatus AI Safety Framework</title>
<meta name="description" content="Home AI: a sovereign, locally-trained language model operating under Tractatus governance. Six architectural services applied to every interaction.">
<meta property="og:type" content="website">
<meta property="og:url" content="https://agenticgovernance.digital/home-ai.html">
<meta property="og:title" content="Home AI — Sovereign Language Model | Tractatus">
<meta property="og:description" content="How a locally-trained language model operates under architectural governance constraints in a production community platform.">
<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="Home AI — Sovereign Language Model | Tractatus">
<meta name="twitter:description" content="How a locally-trained language model operates under architectural governance constraints in a production community platform.">
<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">
<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>
<!-- 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><a href="/village-case-study.html" class="text-blue-600 hover:underline transition-colors">Village Case Study</a></li>
<li class="text-gray-400">/</li>
<li class="text-gray-900 font-medium" aria-current="page">Home AI</li>
</ol>
</div>
</nav>
<!-- Hero -->
<header role="banner">
<section class="bg-gradient-to-br from-teal-700 via-teal-800 to-emerald-800 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">Home AI</h1>
<p class="text-xl text-teal-100 max-w-3xl mx-auto mb-6">
A sovereign, locally-trained language model operating under architectural governance. Every interaction passes through all six Tractatus services before reaching the user.
</p>
<div class="bg-amber-100 border-2 border-amber-400 rounded-lg p-4 max-w-2xl mx-auto">
<p class="text-amber-900 text-sm">
<strong>Caveat:</strong> Home AI is a single implementation within the Village platform. Claims below are based on operational observation, not controlled experiments. Independent validation is planned.
</p>
</div>
</div>
</section>
</header>
<main id="main-content" class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 py-16">
<!-- What is Home AI -->
<section class="mb-16">
<h2 class="text-3xl font-bold text-gray-900 mb-6">What is Home AI?</h2>
<div class="prose prose-lg text-gray-700">
<p class="mb-4">
Home AI is the practical implementation of Tractatus governance within the Village platform &mdash; a community-owned digital space where members share stories, documents, and family histories. Unlike cloud-hosted AI assistants, Home AI operates under the principle of <em>digital sovereignty</em>: the community's data and the AI's behaviour are governed by the community itself, not by a remote provider.
</p>
<p class="mb-4">
The term "SLL" (Sovereign Locally-trained Language Model) describes the architectural goal: a language model whose training data, inference, and governance all remain under local control. In practice, Home AI currently uses a hybrid approach &mdash; local Llama models for English-language operations and Claude Haiku via API for non-English languages &mdash; with a roadmap toward fully local inference as hardware and model capabilities allow.
</p>
<p>
What distinguishes Home AI from other AI assistants is not the model itself, but the governance layer around it. Every interaction &mdash; whether a help query, document OCR, story suggestion, or AI-generated summary &mdash; passes through the full Tractatus governance stack before any response reaches the user.
</p>
</div>
</section>
<!-- The Governance Stack -->
<section class="mb-16">
<h2 class="text-3xl font-bold text-gray-900 mb-6">The Governance Stack</h2>
<p class="text-gray-700 mb-8">
Each Home AI interaction traverses six governance services in sequence. This is not optional middleware &mdash; it operates in the critical execution path, meaning a response cannot be generated without passing through all checks.
</p>
<div class="space-y-4">
<div class="bg-white rounded-lg shadow-sm p-6 border-l-4 border-emerald-500">
<h3 class="text-lg font-bold text-gray-900 mb-2">1. BoundaryEnforcer</h3>
<p class="text-gray-700 text-sm">
Detects whether a user query involves values decisions (privacy trade-offs, ethical questions, cultural sensitivity) and blocks the AI from responding autonomously. These are deferred to human moderators. The boundary between "technical question" and "values question" is defined by community-specific rules, not by the AI's judgment.
</p>
</div>
<div class="bg-white rounded-lg shadow-sm p-6 border-l-4 border-indigo-500">
<h3 class="text-lg font-bold text-gray-900 mb-2">2. CrossReferenceValidator</h3>
<p class="text-gray-700 text-sm">
Validates the query against stored instructions and known patterns. This is the service that would have caught the 27027 incident &mdash; the user's explicit instruction ("use port 27027") is stored externally and cross-referenced against the AI's proposed action ("use port 27017"). When stored instructions conflict with the AI's response, the stored instruction takes precedence.
</p>
</div>
<div class="bg-white rounded-lg shadow-sm p-6 border-l-4 border-amber-500">
<h3 class="text-lg font-bold text-gray-900 mb-2">3. ContextPressureMonitor</h3>
<p class="text-gray-700 text-sm">
Tracks session health metrics: token usage, message count, error rate, task complexity. When pressure exceeds thresholds (ELEVATED at 25%, HIGH at 50%, CRITICAL at 75%), the system adjusts validation intensity or recommends session handoff. This prevents the degradation patterns observed in extended AI sessions where error rates compound.
</p>
</div>
<div class="bg-white rounded-lg shadow-sm p-6 border-l-4 border-pink-500">
<h3 class="text-lg font-bold text-gray-900 mb-2">4. MetacognitiveVerifier</h3>
<p class="text-gray-700 text-sm">
For complex operations (multi-step tasks, file modifications, configuration changes), the AI performs a structured self-assessment before proposing actions: alignment with instructions, coherence of approach, completeness of plan, safety of proposed changes, and consideration of alternatives. This is triggered selectively to avoid overhead on simple queries.
</p>
</div>
<div class="bg-white rounded-lg shadow-sm p-6 border-l-4 border-blue-500">
<h3 class="text-lg font-bold text-gray-900 mb-2">5. InstructionPersistenceClassifier</h3>
<p class="text-gray-700 text-sm">
Classifies instructions by their intended lifespan (HIGH: strategic/permanent, MEDIUM: operational/session-scoped, LOW: tactical/single-use) and quadrant (Strategic, Operational, Tactical, System, Stochastic). This classification determines how strongly the CrossReferenceValidator enforces each instruction and how long it persists in the external store.
</p>
</div>
<div class="bg-white rounded-lg shadow-sm p-6 border-l-4 border-teal-500">
<h3 class="text-lg font-bold text-gray-900 mb-2">6. PluralisticDeliberationOrchestrator</h3>
<p class="text-gray-700 text-sm">
When the AI encounters decisions where legitimate values conflict &mdash; for example, a member's privacy interests versus community safety concerns &mdash; this service halts autonomous decision-making and coordinates a deliberation process among affected stakeholders. The AI presents the conflict and facilitates discussion; it does not resolve it.
</p>
</div>
</div>
</section>
<!-- Governed Features -->
<section class="mb-16">
<h2 class="text-3xl font-bold text-gray-900 mb-6">Governed Features</h2>
<p class="text-gray-700 mb-8">
Home AI currently provides four AI-powered features, each operating under the full governance stack.
</p>
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
<div class="bg-white rounded-xl shadow-md p-6 border border-gray-200">
<h3 class="text-lg font-bold text-gray-900 mb-3">RAG-Based Help</h3>
<p class="text-gray-700 text-sm mb-3">
Vector search retrieves relevant documentation and help content, filtered by the member's permission level. The AI generates contextual answers grounded in retrieved documents rather than from its training data alone.
</p>
<p class="text-gray-500 text-xs italic">
Governance: BoundaryEnforcer prevents PII exposure; CrossReferenceValidator ensures responses align with platform policies.
</p>
</div>
<div class="bg-white rounded-xl shadow-md p-6 border border-gray-200">
<h3 class="text-lg font-bold text-gray-900 mb-3">Document OCR</h3>
<p class="text-gray-700 text-sm mb-3">
Automated text extraction from uploaded documents (historical records, handwritten letters, photographs with text). Extracted text is stored within the member's scope, not shared across tenants or used for model training.
</p>
<p class="text-gray-500 text-xs italic">
Governance: Processing only occurs under explicit consent controls; results are tenant-isolated.
</p>
</div>
<div class="bg-white rounded-xl shadow-md p-6 border border-gray-200">
<h3 class="text-lg font-bold text-gray-900 mb-3">Story Assistance</h3>
<p class="text-gray-700 text-sm mb-3">
AI-generated suggestions for writing family stories: prompts, structural advice, and narrative enhancement. Suggestions are filtered through BoundaryEnforcer to ensure the AI does not impose cultural interpretations or values judgments on family narratives.
</p>
<p class="text-gray-500 text-xs italic">
Governance: Cultural context decisions are deferred to the storyteller, not resolved by the AI.
</p>
</div>
<div class="bg-white rounded-xl shadow-md p-6 border border-gray-200">
<h3 class="text-lg font-bold text-gray-900 mb-3">AI Memory Transparency</h3>
<p class="text-gray-700 text-sm mb-3">
Members can view what the AI "remembers" about their interactions: summarised conversation history, inferred preferences, and stored instructions. Members control whether this memory persists, is reset, or is deleted entirely.
</p>
<p class="text-gray-500 text-xs italic">
Governance: Consent granularity covers AI triage memory, OCR memory, and summarisation memory independently.
</p>
</div>
</div>
</section>
<!-- Sovereignty Architecture -->
<section class="mb-16">
<h2 class="text-3xl font-bold text-gray-900 mb-6">Sovereignty Architecture</h2>
<div class="prose prose-lg text-gray-700">
<p class="mb-4">
The concept of "sovereign" in Home AI is concrete, not aspirational. It refers to specific architectural properties:
</p>
</div>
<div class="space-y-4 mt-6">
<div class="bg-blue-50 rounded-lg p-6 border border-blue-200">
<h3 class="text-lg font-bold text-blue-900 mb-2">Data sovereignty</h3>
<p class="text-blue-800 text-sm">
All member data is stored on infrastructure controlled by the community operator &mdash; currently OVH (France) and Catalyst (New Zealand). No member data flows to AI provider APIs for training. Query content sent to Claude Haiku for non-English processing is ephemeral and not retained by the provider.
</p>
</div>
<div class="bg-blue-50 rounded-lg p-6 border border-blue-200">
<h3 class="text-lg font-bold text-blue-900 mb-2">Governance sovereignty</h3>
<p class="text-blue-800 text-sm">
The rules governing AI behaviour are defined by the community, not the AI provider. BoundaryEnforcer rules, instruction persistence levels, and deliberation triggers are configured per-tenant. A family history community has different boundary rules from a neighbourhood association.
</p>
</div>
<div class="bg-blue-50 rounded-lg p-6 border border-blue-200">
<h3 class="text-lg font-bold text-blue-900 mb-2">Inference sovereignty (in progress)</h3>
<p class="text-blue-800 text-sm">
English-language queries currently use a locally-hosted Llama model. The roadmap includes expanding local inference to additional languages as multilingual open models mature. The governance layer is model-agnostic &mdash; switching the underlying model does not require changes to the governance architecture.
</p>
</div>
</div>
</section>
<!-- Te Tiriti Connection -->
<section class="mb-16">
<div class="bg-gradient-to-r from-blue-50 to-purple-50 rounded-xl p-8 border border-blue-200">
<h2 class="text-2xl font-bold text-gray-900 mb-4">Te Tiriti o Waitangi and Digital Sovereignty</h2>
<p class="text-gray-700 mb-4">
The sovereignty principles underlying Home AI are informed by Te Tiriti o Waitangi (the Treaty of Waitangi, 1840) and M&#257;ori concepts of <em>rangatiratanga</em> (self-determination over one's domain), <em>kaitiakitanga</em> (guardianship of resources for future generations), and <em>mana</em> (authority and dignity).
</p>
<p class="text-gray-700 mb-4">
These are not metaphorical borrowings. They provide concrete architectural guidance: communities should control their own data (rangatiratanga), AI systems should preserve rather than degrade the information they govern (kaitiakitanga), and automated decisions should not diminish the standing of the people they affect (mana).
</p>
<p class="text-gray-700">
The Tractatus framework is developed in Aotearoa New Zealand, and these principles predate Western technology governance by centuries. We consider them prior art, not novel invention.
</p>
</div>
</section>
<!-- Limitations -->
<section class="mb-16">
<h2 class="text-3xl font-bold text-gray-900 mb-6">Limitations and Open Questions</h2>
<div class="bg-amber-50 border-l-4 border-amber-500 p-6 rounded-r-lg">
<ul class="space-y-3 text-amber-800">
<li class="flex items-start">
<span class="mr-2 font-bold">&bull;</span>
<span><strong>Single implementation:</strong> Home AI operates within one platform built by the framework developer. Conclusions about governance effectiveness cannot be generalised without independent deployments.</span>
</li>
<li class="flex items-start">
<span class="mr-2 font-bold">&bull;</span>
<span><strong>Self-reported metrics:</strong> Performance and safety figures are reported by the same team that built the system. Independent audit is planned but not yet conducted.</span>
</li>
<li class="flex items-start">
<span class="mr-2 font-bold">&bull;</span>
<span><strong>Hybrid inference:</strong> Full sovereignty requires local inference for all languages. Currently, non-English queries depend on cloud APIs (Claude Haiku), which introduces a provider dependency.</span>
</li>
<li class="flex items-start">
<span class="mr-2 font-bold">&bull;</span>
<span><strong>Scale unknown:</strong> The governance overhead (approximately 5% per interaction) is measured at current scale. Whether this holds under high-throughput conditions is untested.</span>
</li>
<li class="flex items-start">
<span class="mr-2 font-bold">&bull;</span>
<span><strong>Adversarial testing limited:</strong> The governance stack has not been subjected to systematic adversarial evaluation (jailbreak attempts, prompt injection at scale). Red-teaming is a priority for 2026.</span>
</li>
</ul>
</div>
</section>
<!-- Links -->
<section class="mb-8">
<h2 class="text-2xl font-bold text-gray-900 mb-6">Further Reading</h2>
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
<a href="/village-case-study.html" class="block bg-white rounded-lg shadow-sm p-6 border border-gray-200 hover:shadow-md hover:-translate-y-0.5 transition-all">
<h3 class="font-bold text-gray-900 mb-1">Village Case Study</h3>
<p class="text-sm text-gray-600">Full technical case study of Tractatus in production</p>
</a>
<a href="/architecture.html" class="block bg-white rounded-lg shadow-sm p-6 border border-gray-200 hover:shadow-md hover:-translate-y-0.5 transition-all">
<h3 class="font-bold text-gray-900 mb-1">System Architecture</h3>
<p class="text-sm text-gray-600">Five architectural principles and six governance services</p>
</a>
<a href="/implementer.html" class="block bg-white rounded-lg shadow-sm p-6 border border-gray-200 hover:shadow-md hover:-translate-y-0.5 transition-all">
<h3 class="font-bold text-gray-900 mb-1">For Implementers</h3>
<p class="text-sm text-gray-600">Integration guide with code examples</p>
</a>
<a href="/about/values.html" class="block bg-white rounded-lg shadow-sm p-6 border border-gray-200 hover:shadow-md hover:-translate-y-0.5 transition-all">
<h3 class="font-bold text-gray-900 mb-1">Values</h3>
<p class="text-sm text-gray-600">Sovereignty, transparency, and pluralism</p>
</a>
</div>
</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>

40
public/implementer.html
View file

@ -461,7 +461,7 @@ if (!githubUrlCheck.passed) {
<!-- Audit Trail -->
<div>
<h4 class="font-semibold text-gray-900 mb-2"><span data-i18n="hooks.audit_icon">📊</span> <span data-i18n="hooks.audit_title">Audit Trail</span></h4>
<h4 class="font-semibold text-gray-900 mb-2"><span data-i18n="hooks.audit_title">Audit Trail</span></h4>
<p class="text-sm text-gray-700 mb-3" data-i18n="hooks.audit_desc">
Every hook execution is logged to <code class="bg-gray-100 px-1 rounded">.claude/metrics/hooks-metrics.json</code>
with timestamp, file, result, and reason. Blocks are separately tracked for analysis.
@ -543,7 +543,7 @@ if (!githubUrlCheck.passed) {
<div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-6 text-sm">
<div class="bg-gray-50 rounded-lg p-4">
<h4 class="font-semibold text-gray-900 mb-2" data-i18n="deployment.covered_title">📦 Covered in Guide:</h4>
<h4 class="font-semibold text-gray-900 mb-2" data-i18n="deployment.covered_title">Covered in Guide:</h4>
<ul class="list-disc list-inside text-gray-700 space-y-1">
<li data-i18n="deployment.covered_1">Local development setup</li>
<li data-i18n="deployment.covered_2">Production server configuration</li>
@ -1141,7 +1141,7 @@ const govResponse = await fetch(
<!-- Implementation Code Example -->
<div class="bg-white rounded-xl p-8 mb-8 shadow-lg">
<h3 class="text-2xl font-semibold text-gray-900 mb-4">📦 Implementation Example</h3>
<h3 class="text-2xl font-semibold text-gray-900 mb-4">Implementation Example</h3>
<p class="text-gray-700 mb-4">
Use the <code class="bg-gray-100 px-2 py-1 rounded text-sm">GovernedAgentLightning</code> wrapper to combine governance + performance optimization:
</p>
@ -1181,7 +1181,7 @@ for user_message in conversation:
<!-- Preliminary Findings (Research Integrity) -->
<div class="bg-white rounded-xl p-8 mb-8 shadow-lg">
<h3 class="text-2xl font-semibold text-gray-900 mb-4">📊 Preliminary Findings: Demo 2 Results</h3>
<h3 class="text-2xl font-semibold text-gray-900 mb-4">Preliminary Findings: Demo 2 Results</h3>
<!-- Research Status Banner -->
<div class="bg-amber-50 border-2 border-amber-200 rounded-lg p-4 mb-6">
@ -1314,7 +1314,7 @@ for user_message in conversation:
<!-- Call to Action -->
<div class="bg-gradient-to-r from-blue-600 to-purple-600 rounded-xl p-8 text-white">
<h3 class="text-2xl font-bold mb-4">🚀 Try the Integration</h3>
<h3 class="text-2xl font-bold mb-4">Try the Integration</h3>
<p class="mb-6">
Download the install pack with Demo 2 (governed agent) and explore the integration yourself. Includes full source code, governance modules, and setup instructions.
</p>
@ -1325,15 +1325,15 @@ for user_message in conversation:
</a>
<a href="/downloads/tractatus-agent-lightning-v1.0.tar.gz"
class="inline-flex items-center justify-center px-6 py-3 bg-blue-800 text-white font-semibold rounded-lg hover:bg-blue-900 transition border-2 border-white/20">
📦 Install Pack
Install Pack
</a>
<a href="https://discord.gg/Dkke2ADu4E" target="_blank" rel="noopener noreferrer"
class="inline-flex items-center justify-center px-6 py-3 bg-indigo-600 text-white font-semibold rounded-lg hover:bg-indigo-700 transition">
💬 Tractatus Discord
Tractatus Discord
</a>
<a href="https://discord.gg/bVZtkceKsS" target="_blank" rel="noopener noreferrer"
class="inline-flex items-center justify-center px-6 py-3 bg-purple-600 text-white font-semibold rounded-lg hover:bg-purple-700 transition">
⚡ AL Discord
AL Discord
</a>
</div>
</div>
@ -1349,7 +1349,7 @@ for user_message in conversation:
</p>
<div class="bg-gradient-to-br from-blue-50 to-indigo-50 rounded-xl p-8 mb-8 border-2 border-blue-200">
<h3 class="text-2xl font-bold text-gray-900 mb-4" data-i18n="roadmap.priority_title">🚀 Priority Areas for Development</h3>
<h3 class="text-2xl font-bold text-gray-900 mb-4" data-i18n="roadmap.priority_title">Priority Areas for Development</h3>
<p class="text-gray-700 mb-6" data-i18n="roadmap.priority_desc">
These initiatives represent high-impact opportunities for framework enhancement. Technical contributors, researchers, and organizations are encouraged to engage.
</p>
@ -1409,7 +1409,9 @@ for user_message in conversation:
<!-- Business Intelligence Tools -->
<div class="bg-gradient-to-r from-purple-50 to-blue-50 rounded-lg p-6 shadow-md border-2 border-purple-200">
<div class="flex items-start mb-3">
<span class="text-3xl mr-3">📊</span>
<span class="text-3xl mr-3 text-purple-600">
<svg class="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"/></svg>
</span>
<div class="flex-1">
<div class="flex items-center">
<h4 class="text-lg font-bold text-gray-900">Business Intelligence Tools</h4>
@ -1451,7 +1453,9 @@ for user_message in conversation:
<!-- Performance at Scale -->
<div class="bg-white rounded-lg p-6 shadow-md">
<div class="flex items-start mb-3">
<span class="text-3xl mr-3" data-i18n="roadmap.performance_icon">⚡</span>
<span class="text-3xl mr-3 text-amber-600">
<svg class="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"/></svg>
</span>
<div>
<h4 class="text-lg font-bold text-gray-900" data-i18n="roadmap.performance_title">Enterprise-Scale Performance</h4>
<p class="text-sm text-gray-500" data-i18n="roadmap.performance_status">Status: Validation Needed</p>
@ -1468,7 +1472,9 @@ for user_message in conversation:
<!-- Additional Governance Services -->
<div class="bg-white rounded-lg p-6 shadow-md">
<div class="flex items-start mb-3">
<span class="text-3xl mr-3" data-i18n="roadmap.extended_icon">🛡️</span>
<span class="text-3xl mr-3 text-teal-600">
<svg class="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"/></svg>
</span>
<div>
<h4 class="text-lg font-bold text-gray-900" data-i18n="roadmap.extended_title">Extended Governance Services</h4>
<p class="text-sm text-gray-500" data-i18n="roadmap.extended_status">Status: Research</p>
@ -1493,7 +1499,7 @@ for user_message in conversation:
<div class="grid grid-cols-1 md:grid-cols-3 gap-6">
<div class="border-2 border-blue-200 rounded-lg p-4 hover:border-blue-400 transition">
<h4 class="font-bold text-gray-900 mb-2" data-i18n="roadmap.contributors_title">👨‍💻 Technical Contributors</h4>
<h4 class="font-bold text-gray-900 mb-2" data-i18n="roadmap.contributors_title">Technical Contributors</h4>
<p class="text-sm text-gray-600 mb-3" data-i18n="roadmap.contributors_desc">Implement features, fix bugs, improve documentation</p>
<a href="https://github.com/AgenticGovernance/tractatus-framework/blob/main/CONTRIBUTING.md"
class="text-blue-600 hover:text-blue-700 text-sm font-medium"
@ -1503,7 +1509,7 @@ for user_message in conversation:
</div>
<div class="border-2 border-purple-200 rounded-lg p-4 hover:border-purple-400 transition">
<h4 class="font-bold text-gray-900 mb-2" data-i18n="roadmap.research_title">🔬 Research Partners</h4>
<h4 class="font-bold text-gray-900 mb-2" data-i18n="roadmap.research_title">Research Partners</h4>
<p class="text-sm text-gray-600 mb-3" data-i18n="roadmap.research_desc">Validation studies, academic collaboration, case studies</p>
<a href="mailto:research@agenticgovernance.digital"
class="text-purple-600 hover:text-purple-700 text-sm font-medium">
@ -1512,7 +1518,7 @@ for user_message in conversation:
</div>
<div class="border-2 border-green-200 rounded-lg p-4 hover:border-green-400 transition">
<h4 class="font-bold text-gray-900 mb-2" data-i18n="roadmap.pilots_title">🏢 Organization Pilots</h4>
<h4 class="font-bold text-gray-900 mb-2" data-i18n="roadmap.pilots_title">Organisation Pilots</h4>
<p class="text-sm text-gray-600 mb-3" data-i18n="roadmap.pilots_desc">Production deployments, enterprise requirements, feedback loops</p>
<a href="/case-submission.html"
class="text-green-600 hover:text-green-700 text-sm font-medium">
@ -1641,8 +1647,8 @@ for user_message in conversation:
</a>
</li>
<li>
<a href="/faq.html" class="text-blue-600 hover:text-blue-700 font-medium">
<span data-i18n="resources.support_faq">→ Frequently Asked Questions</span>
<a href="/korero-counter-arguments.html" class="text-blue-600 hover:text-blue-700 font-medium">
<span data-i18n="resources.support_faq">→ Counter-Arguments & Critical Questions</span>
</a>
</li>
</ul>

1025
public/index.html
View file

File diff suppressed because it is too large Load diff

334
public/js/components/navbar.js
View file

@ -1,11 +1,13 @@
/**
* Tractatus Framework - Responsive Navbar Component
* Consistent, mobile-friendly navigation across all pages
* Desktop: visible nav links with dropdowns
* Mobile: slide-out drawer
*/
class TractatusNavbar {
constructor() {
this.mobileMenuOpen = false;
this.openDropdown = null;
this.init();
}
@ -27,26 +29,125 @@ class TractatusNavbar {
<!-- Left: Logo + Brand -->
<div class="flex items-center">
<a href="/"
class="flex items-center space-x-3 px-3 py-2 -ml-3 rounded-lg hover:bg-blue-50 transition-all duration-200 group"
class="flex items-center space-x-2 px-2 py-2 -ml-2 rounded-lg hover:bg-blue-50 transition-all duration-200 group"
title="Return to homepage">
<img src="/images/tractatus-icon-new.svg" alt="Tractatus Icon" class="w-8 h-8">
<span class="text-xl font-bold text-gray-900 group-hover:text-blue-700 transition-colors hidden sm:inline">Tractatus Framework</span>
<span class="text-xl font-bold text-gray-900 group-hover:text-blue-700 transition-colors sm:hidden">Tractatus</span>
<svg class="w-4 h-4 text-gray-400 opacity-0 group-hover:opacity-100 transition-opacity ml-1 hidden sm:block"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"/>
</svg>
<span class="text-lg font-bold text-gray-900 group-hover:text-blue-700 transition-colors hidden sm:inline">Tractatus</span>
</a>
</div>
<!-- Right: Language Selector + Menu Button -->
<div class="flex items-center gap-3">
<!-- Centre: Desktop Navigation (hidden on mobile) -->
<div class="hidden lg:flex items-center space-x-1">
<!-- Research Dropdown -->
<div class="relative" data-dropdown="research">
<button class="nav-dropdown-btn px-3 py-2 text-sm font-medium text-gray-700 hover:text-blue-700 hover:bg-blue-50 rounded-lg transition flex items-center gap-1">
Research
<svg class="w-4 h-4 transition-transform" 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 class="nav-dropdown-panel hidden absolute left-0 top-full mt-1 w-64 bg-white rounded-lg shadow-lg border border-gray-200 py-2 z-50">
<a href="/architectural-alignment.html" class="block px-4 py-2 text-sm text-gray-700 hover:bg-blue-50 hover:text-blue-700 transition">
<span class="font-medium">Academic Paper</span>
<span class="block text-xs text-gray-500 mt-0.5">Full academic treatment with proofs</span>
</a>
<a href="/architectural-alignment-community.html" class="block px-4 py-2 text-sm text-gray-700 hover:bg-blue-50 hover:text-blue-700 transition">
<span class="font-medium">Community Paper</span>
<span class="block text-xs text-gray-500 mt-0.5">Practical guide for organisations</span>
</a>
<a href="/architectural-alignment-policymakers.html" class="block px-4 py-2 text-sm text-gray-700 hover:bg-blue-50 hover:text-blue-700 transition">
<span class="font-medium">Policymakers Paper</span>
<span class="block text-xs text-gray-500 mt-0.5">Regulatory and policy perspective</span>
</a>
<div class="border-t border-gray-100 my-1"></div>
<a href="/researcher.html" class="block px-4 py-2 text-sm text-gray-700 hover:bg-blue-50 hover:text-blue-700 transition">
<span class="font-medium">For Researchers</span>
<span class="block text-xs text-gray-500 mt-0.5">Open questions and collaboration</span>
</a>
<a href="/timeline.html" class="block px-4 py-2 text-sm text-gray-700 hover:bg-blue-50 hover:text-blue-700 transition">
<span class="font-medium">Research Timeline</span>
<span class="block text-xs text-gray-500 mt-0.5">Evolution of the research 2025-2026</span>
</a>
</div>
</div>
<!-- Architecture (direct link) -->
<a href="/architecture.html" class="px-3 py-2 text-sm font-medium text-gray-700 hover:text-blue-700 hover:bg-blue-50 rounded-lg transition">
Architecture
</a>
<!-- Implementation Dropdown -->
<div class="relative" data-dropdown="implementation">
<button class="nav-dropdown-btn px-3 py-2 text-sm font-medium text-gray-700 hover:text-blue-700 hover:bg-blue-50 rounded-lg transition flex items-center gap-1">
Implementation
<svg class="w-4 h-4 transition-transform" 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 class="nav-dropdown-panel hidden absolute left-0 top-full mt-1 w-64 bg-white rounded-lg shadow-lg border border-gray-200 py-2 z-50">
<a href="/implementer.html" class="block px-4 py-2 text-sm text-gray-700 hover:bg-blue-50 hover:text-blue-700 transition">
<span class="font-medium">For Implementers</span>
<span class="block text-xs text-gray-500 mt-0.5">Integration guide and code examples</span>
</a>
<a href="/village-case-study.html" class="block px-4 py-2 text-sm text-gray-700 hover:bg-blue-50 hover:text-blue-700 transition">
<span class="font-medium">Village Case Study</span>
<span class="block text-xs text-gray-500 mt-0.5">Production deployment evidence</span>
</a>
<a href="/home-ai.html" class="block px-4 py-2 text-sm text-gray-700 hover:bg-blue-50 hover:text-blue-700 transition">
<span class="font-medium">Home AI</span>
<span class="block text-xs text-gray-500 mt-0.5">Sovereign locally-trained language model</span>
</a>
<div class="border-t border-gray-100 my-1"></div>
<a href="/integrations/agent-lightning.html" class="block px-4 py-2 text-sm text-gray-700 hover:bg-blue-50 hover:text-blue-700 transition">
<span class="font-medium">Agent Lightning</span>
<span class="block text-xs text-gray-500 mt-0.5">Performance optimisation integration</span>
</a>
<a href="/leader.html" class="block px-4 py-2 text-sm text-gray-700 hover:bg-blue-50 hover:text-blue-700 transition">
<span class="font-medium">For Leaders</span>
<span class="block text-xs text-gray-500 mt-0.5">Strategic overview and business case</span>
</a>
</div>
</div>
<!-- About Dropdown -->
<div class="relative" data-dropdown="about">
<button class="nav-dropdown-btn px-3 py-2 text-sm font-medium text-gray-700 hover:text-blue-700 hover:bg-blue-50 rounded-lg transition flex items-center gap-1">
About
<svg class="w-4 h-4 transition-transform" 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 class="nav-dropdown-panel hidden absolute left-0 top-full mt-1 w-56 bg-white rounded-lg shadow-lg border border-gray-200 py-2 z-50">
<a href="/about.html" class="block px-4 py-2 text-sm text-gray-700 hover:bg-blue-50 hover:text-blue-700 transition">
<span class="font-medium">About Tractatus</span>
</a>
<a href="/about/values.html" class="block px-4 py-2 text-sm text-gray-700 hover:bg-blue-50 hover:text-blue-700 transition">
<span class="font-medium">Values</span>
</a>
<a href="/korero-counter-arguments.html" class="block px-4 py-2 text-sm text-gray-700 hover:bg-blue-50 hover:text-blue-700 transition">
<span class="font-medium">Counter-Arguments</span>
<span class="block text-xs text-gray-500 mt-0.5">Engaging with criticism</span>
</a>
</div>
</div>
</div>
<!-- Right: Secondary links + Language + Menu -->
<div class="flex items-center gap-2">
<!-- Desktop secondary links -->
<div class="hidden lg:flex items-center gap-1">
<a href="/docs.html" class="px-3 py-2 text-sm text-gray-600 hover:text-blue-700 hover:bg-blue-50 rounded-lg transition">Docs</a>
<a href="https://github.com/AgenticGovernance/tractatus-framework" target="_blank" rel="noopener noreferrer" class="px-3 py-2 text-sm text-gray-600 hover:text-blue-700 hover:bg-blue-50 rounded-lg transition">GitHub</a>
<a href="/koha.html" class="px-3 py-1.5 text-sm font-medium text-teal-700 bg-teal-50 hover:bg-teal-100 rounded-lg transition border border-teal-200">Koha</a>
</div>
<!-- Language Selector Container -->
<div id="language-selector-container"></div>
<button id="mobile-menu-btn" class="text-gray-600 hover:text-gray-900 focus:outline-none focus:ring-2 focus:ring-blue-500 rounded p-2" aria-label="Toggle menu">
<!-- Mobile menu button (hidden on desktop) -->
<button id="mobile-menu-btn" class="lg:hidden text-gray-600 hover:text-gray-900 focus:outline-none focus:ring-2 focus:ring-blue-500 rounded p-2" aria-label="Toggle menu">
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
</svg>
@ -56,13 +157,11 @@ class TractatusNavbar {
</div>
</div>
<!-- Navigation Drawer (overlay, doesn't push content) -->
<!-- Mobile Navigation Drawer -->
<div id="mobile-menu" class="hidden fixed inset-0 z-[9999]">
<!-- Backdrop with blur -->
<div id="mobile-menu-backdrop" class="absolute inset-0 bg-gray-900/60 backdrop-blur-sm transition-opacity"></div>
<!-- Menu Panel (slides from right) -->
<div id="mobile-menu-panel" class="absolute right-0 top-0 bottom-0 w-80 max-w-[85vw] bg-white shadow-2xl transform transition-transform duration-300 ease-out">
<div id="mobile-menu-panel" class="absolute right-0 top-0 bottom-0 w-80 max-w-[85vw] bg-white shadow-2xl transform transition-transform duration-300 ease-out overflow-y-auto">
<div class="flex justify-between items-center px-5 h-16 border-b border-gray-200">
<div class="flex items-center space-x-2">
<img src="/images/tractatus-icon-new.svg" alt="Tractatus Icon" class="w-6 h-6">
@ -74,52 +173,54 @@ class TractatusNavbar {
</svg>
</button>
</div>
<nav class="p-5 space-y-3">
<nav class="p-5 space-y-1">
<!-- Research -->
<div class="pb-3 mb-3 border-b border-gray-200">
<p class="text-xs font-semibold text-gray-500 uppercase tracking-wider mb-2 px-3">Audiences</p>
<a href="/researcher.html" class="block px-3 py-2.5 text-gray-700 hover:bg-blue-50 hover:text-blue-700 rounded-lg transition font-medium">
<span class="text-sm">🔬 Researcher</span>
</a>
<a href="/implementer.html" class="block px-3 py-2.5 text-gray-700 hover:bg-blue-50 hover:text-blue-700 rounded-lg transition font-medium">
<span class="text-sm">⚙️ Implementer</span>
</a>
<a href="/leader.html" class="block px-3 py-2.5 text-gray-700 hover:bg-blue-50 hover:text-blue-700 rounded-lg transition font-medium">
<span class="text-sm">💼 Leader</span>
</a>
<p class="text-xs font-semibold text-gray-500 uppercase tracking-wider mb-2 px-3">Research</p>
<a href="/architectural-alignment.html" class="block px-3 py-2 text-sm text-gray-700 hover:bg-blue-50 hover:text-blue-700 rounded-lg transition">Academic Paper</a>
<a href="/architectural-alignment-community.html" class="block px-3 py-2 text-sm text-gray-700 hover:bg-blue-50 hover:text-blue-700 rounded-lg transition">Community Paper</a>
<a href="/architectural-alignment-policymakers.html" class="block px-3 py-2 text-sm text-gray-700 hover:bg-blue-50 hover:text-blue-700 rounded-lg transition">Policymakers Paper</a>
<a href="/researcher.html" class="block px-3 py-2 text-sm text-gray-700 hover:bg-blue-50 hover:text-blue-700 rounded-lg transition">For Researchers</a>
<a href="/timeline.html" class="block px-3 py-2 text-sm text-gray-700 hover:bg-blue-50 hover:text-blue-700 rounded-lg transition">Research Timeline</a>
</div>
<!-- Architecture & Implementation -->
<div class="pb-3 mb-3 border-b border-gray-200">
<p class="text-xs font-semibold text-gray-500 uppercase tracking-wider mb-2 px-3">Architecture & Implementation</p>
<a href="/architecture.html" class="block px-3 py-2 text-sm text-gray-700 hover:bg-blue-50 hover:text-blue-700 rounded-lg transition">System Architecture</a>
<a href="/implementer.html" class="block px-3 py-2 text-sm text-gray-700 hover:bg-blue-50 hover:text-blue-700 rounded-lg transition">For Implementers</a>
<a href="/village-case-study.html" class="block px-3 py-2 text-sm text-gray-700 hover:bg-blue-50 hover:text-blue-700 rounded-lg transition">Village Case Study</a>
<a href="/home-ai.html" class="block px-3 py-2 text-sm text-gray-700 hover:bg-blue-50 hover:text-blue-700 rounded-lg transition">Home AI</a>
<a href="/leader.html" class="block px-3 py-2 text-sm text-gray-700 hover:bg-blue-50 hover:text-blue-700 rounded-lg transition">For Leaders</a>
<a href="/integrations/agent-lightning.html" class="block px-3 py-2 text-sm text-gray-700 hover:bg-purple-50 hover:text-purple-700 rounded-lg transition">Agent Lightning</a>
</div>
<!-- About & Resources -->
<div class="pb-3 mb-3 border-b border-gray-200">
<p class="text-xs font-semibold text-gray-500 uppercase tracking-wider mb-2 px-3">About</p>
<a href="/about.html" class="block px-3 py-2 text-sm text-gray-700 hover:bg-blue-50 hover:text-blue-700 rounded-lg transition">About Tractatus</a>
<a href="/about/values.html" class="block px-3 py-2 text-sm text-gray-700 hover:bg-blue-50 hover:text-blue-700 rounded-lg transition">Values</a>
<a href="/korero-counter-arguments.html" class="block px-3 py-2 text-sm text-gray-700 hover:bg-blue-50 hover:text-blue-700 rounded-lg transition">Counter-Arguments</a>
</div>
<!-- Resources -->
<div class="pb-3 mb-3 border-b border-gray-200">
<p class="text-xs font-semibold text-gray-500 uppercase tracking-wider mb-2 px-3">Resources</p>
<a href="/docs.html" class="block px-3 py-2 text-sm text-gray-700 hover:bg-blue-50 hover:text-blue-700 rounded-lg transition">Documentation</a>
<a href="https://github.com/AgenticGovernance/tractatus-framework" target="_blank" rel="noopener noreferrer" class="block px-3 py-2 text-sm text-gray-700 hover:bg-blue-50 hover:text-blue-700 rounded-lg transition">GitHub</a>
<a href="/koha.html" class="block px-3 py-2 text-sm text-gray-700 hover:bg-blue-50 hover:text-blue-700 rounded-lg transition">Support (Koha)</a>
</div>
<a href="/integrations/agent-lightning.html" class="block px-3 py-2.5 text-gray-700 hover:bg-purple-50 hover:text-purple-700 rounded-lg transition">
<span class="text-sm font-semibold">⚡ Agent Lightning Integration</span>
<span class="block text-xs text-gray-500 mt-0.5">Governance + Performance</span>
</a>
<a href="/docs.html" class="block px-3 py-2.5 text-gray-700 hover:bg-blue-50 hover:text-blue-700 rounded-lg transition">
<span class="text-sm font-semibold">📚 Documentation</span>
</a>
<a href="/blog.html" class="block px-3 py-2.5 text-gray-700 hover:bg-blue-50 hover:text-blue-700 rounded-lg transition">
<span class="text-sm font-semibold">📝 Blog</span>
</a>
<a href="/faq.html" class="block px-3 py-2.5 text-gray-700 hover:bg-blue-50 hover:text-blue-700 rounded-lg transition">
<span class="text-sm font-semibold">❓ FAQ</span>
</a>
<a href="/about.html" class="block px-3 py-2.5 text-gray-700 hover:bg-blue-50 hover:text-blue-700 rounded-lg transition">
<span class="text-sm font-semibold">ℹ️ About</span>
</a>
<a href="/koha.html" class="block px-3 py-2.5 text-gray-700 hover:bg-blue-50 hover:text-blue-700 rounded-lg transition">
<span class="text-sm font-semibold">🤝 Support (Koha)</span>
</a>
<!-- Company -->
<div class="pt-3 mt-3 border-t border-gray-200">
<div class="pt-1">
<p class="text-xs font-semibold text-gray-500 uppercase tracking-wider mb-2 px-3" data-i18n="navbar.company_heading">Company</p>
<a href="https://mysovereignty.digital" class="block px-3 py-2.5 text-gray-700 hover:bg-blue-50 hover:text-blue-700 rounded-lg transition">
<span class="text-sm font-semibold" data-i18n="navbar.company_links.website">← MySovereignty</span>
</a>
<a href="https://mysovereignty.digital" class="block px-3 py-2 text-sm text-gray-700 hover:bg-blue-50 hover:text-blue-700 rounded-lg transition" data-i18n="navbar.company_links.website">MySovereignty</a>
</div>
<!-- Feedback (opens modal) -->
<!-- Feedback -->
<div class="pt-3 mt-3 border-t border-gray-200">
<button id="navbar-feedback-btn" class="w-full text-left block px-3 py-2.5 text-white bg-gradient-to-r from-blue-600 to-blue-700 hover:shadow-lg rounded-lg transition">
<span class="text-sm font-semibold" data-i18n="navbar.feedback">💬 Give Feedback</span>
<span class="block text-xs opacity-90 mt-0.5" data-i18n="navbar.feedback_desc">Governed by Tractatus + AL</span>
<span class="text-sm font-semibold" data-i18n="navbar.feedback">Give Feedback</span>
</button>
</div>
</nav>
@ -129,8 +230,6 @@ class TractatusNavbar {
</nav>
`;
// Always insert navbar at the very beginning of body
// Check if there's already a tractatus navbar (to avoid duplicates)
const existingNavbar = document.querySelector('nav.bg-white.border-b.border-gray-200.sticky');
if (existingNavbar) {
existingNavbar.outerHTML = navHTML;
@ -145,7 +244,92 @@ class TractatusNavbar {
}
attachEventListeners() {
// Mobile Menu (Navigation Drawer)
// Desktop Dropdowns
const dropdowns = document.querySelectorAll('[data-dropdown]');
dropdowns.forEach(dropdown => {
const btn = dropdown.querySelector('.nav-dropdown-btn');
const panel = dropdown.querySelector('.nav-dropdown-panel');
if (!btn || !panel) return;
let closeTimeout = null;
const openDropdown = () => {
if (closeTimeout) {
clearTimeout(closeTimeout);
closeTimeout = null;
}
// Close other dropdowns
dropdowns.forEach(d => {
if (d !== dropdown) {
const p = d.querySelector('.nav-dropdown-panel');
if (p) p.classList.add('hidden');
const b = d.querySelector('.nav-dropdown-btn svg');
if (b) b.style.transform = '';
}
});
panel.classList.remove('hidden');
const arrow = btn.querySelector('svg');
if (arrow) arrow.style.transform = 'rotate(180deg)';
};
const closeDropdown = () => {
closeTimeout = setTimeout(() => {
panel.classList.add('hidden');
const arrow = btn.querySelector('svg');
if (arrow) arrow.style.transform = '';
}, 150);
};
btn.addEventListener('mouseenter', openDropdown);
btn.addEventListener('mouseleave', closeDropdown);
panel.addEventListener('mouseenter', () => {
if (closeTimeout) {
clearTimeout(closeTimeout);
closeTimeout = null;
}
});
panel.addEventListener('mouseleave', closeDropdown);
// Keyboard accessibility
btn.addEventListener('click', (e) => {
e.preventDefault();
const isHidden = panel.classList.contains('hidden');
// Close all
dropdowns.forEach(d => {
const p = d.querySelector('.nav-dropdown-panel');
if (p) p.classList.add('hidden');
});
if (isHidden) {
panel.classList.remove('hidden');
}
});
});
// Close dropdowns on click outside
document.addEventListener('click', (e) => {
if (!e.target.closest('[data-dropdown]')) {
dropdowns.forEach(d => {
const p = d.querySelector('.nav-dropdown-panel');
if (p) p.classList.add('hidden');
const b = d.querySelector('.nav-dropdown-btn svg');
if (b) b.style.transform = '';
});
}
});
// Close dropdowns on Escape
document.addEventListener('keydown', (e) => {
if (e.key === 'Escape') {
dropdowns.forEach(d => {
const p = d.querySelector('.nav-dropdown-panel');
if (p) p.classList.add('hidden');
const b = d.querySelector('.nav-dropdown-btn svg');
if (b) b.style.transform = '';
});
}
});
// Mobile Menu
const mobileMenuBtn = document.getElementById('mobile-menu-btn');
const mobileMenuCloseBtn = document.getElementById('mobile-menu-close-btn');
const mobileMenu = document.getElementById('mobile-menu');
@ -156,19 +340,15 @@ class TractatusNavbar {
this.mobileMenuOpen = !this.mobileMenuOpen;
if (this.mobileMenuOpen) {
// Open: Show menu and slide panel in from right
mobileMenu.classList.remove('hidden');
// Use setTimeout to ensure display change happens before animation
setTimeout(() => {
mobileMenuPanel.classList.remove('translate-x-full');
mobileMenuPanel.classList.add('translate-x-0');
}, 10);
document.body.style.overflow = 'hidden'; // Prevent scrolling when menu is open
document.body.style.overflow = 'hidden';
} else {
// Close: Slide panel out to right
mobileMenuPanel.classList.remove('translate-x-0');
mobileMenuPanel.classList.add('translate-x-full');
// Hide menu after animation completes (300ms)
setTimeout(() => {
mobileMenu.classList.add('hidden');
}, 300);
@ -176,7 +356,6 @@ class TractatusNavbar {
}
};
// Initialize panel in hidden state (off-screen to the right)
if (mobileMenuPanel) {
mobileMenuPanel.classList.add('translate-x-full');
}
@ -203,45 +382,48 @@ class TractatusNavbar {
});
});
// Feedback button - dispatch event that feedback component will handle
// Feedback button
const navbarFeedbackBtn = document.getElementById('navbar-feedback-btn');
if (navbarFeedbackBtn) {
navbarFeedbackBtn.addEventListener('click', () => {
// Close mobile menu
if (this.mobileMenuOpen) {
toggleMobileMenu();
}
// Dispatch event to open feedback modal
window.dispatchEvent(new CustomEvent('openFeedbackModal'));
});
}
}
setActivePageIndicator() {
// Get current page path
const currentPath = window.location.pathname;
// Normalize paths (handle both /page.html and /page)
const normalizePath = (path) => {
if (!path || path.startsWith('http')) return path;
if (path === '/' || path === '/index.html') return '/';
return path.replace('.html', '').replace(/\/$/, '');
};
const normalizedCurrent = normalizePath(currentPath);
// Find all navigation links in mobile menu
const mobileLinks = document.querySelectorAll('#mobile-menu a');
// Desktop nav links
const desktopLinks = document.querySelectorAll('#tractatus-navbar a[href]');
desktopLinks.forEach(link => {
const linkPath = link.getAttribute('href');
const normalizedLink = normalizePath(linkPath);
if (normalizedLink === normalizedCurrent && !link.closest('.nav-dropdown-panel')) {
link.classList.add('text-blue-700', 'bg-blue-50');
link.classList.remove('text-gray-700', 'text-gray-600');
}
});
// Mobile nav links
const mobileLinks = document.querySelectorAll('#mobile-menu a');
mobileLinks.forEach(link => {
const linkPath = link.getAttribute('href');
const normalizedLink = normalizePath(linkPath);
if (normalizedLink === normalizedCurrent) {
// Add active styling with brand colors
link.classList.add('border-l-4', 'bg-sky-50');
link.style.borderLeftColor = 'var(--tractatus-core-end)';
link.style.color = 'var(--tractatus-core-end)';
link.classList.add('border-l-4', 'bg-sky-50', 'text-blue-700', 'font-medium');
link.style.borderLeftColor = 'var(--tractatus-core-end, #3b82f6)';
link.classList.remove('text-gray-700');
}
});

54
public/leader.html
View file

@ -131,8 +131,8 @@
<section class="mb-16 bg-gradient-to-br from-purple-50 to-blue-50 border-2 border-purple-200 rounded-xl p-8">
<div class="flex items-start gap-4 mb-4">
<div class="flex-shrink-0">
<div class="w-14 h-14 rounded-full bg-gradient-to-br from-purple-600 to-blue-600 text-white flex items-center justify-center text-2xl">
🏛️
<div class="w-14 h-14 rounded-full bg-gradient-to-br from-purple-600 to-blue-600 text-white flex items-center justify-center">
<svg class="w-7 h-7" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"/></svg>
</div>
</div>
<div class="flex-1">
@ -249,8 +249,8 @@
<section class="mb-16 bg-gradient-to-br from-purple-50 to-indigo-50 border-2 border-purple-200 rounded-xl p-8">
<div class="flex items-start gap-4 mb-6">
<div class="flex-shrink-0">
<div class="w-14 h-14 rounded-full bg-gradient-to-br from-purple-600 to-indigo-600 text-white flex items-center justify-center text-2xl">
⚡
<div class="w-14 h-14 rounded-full bg-gradient-to-br from-purple-600 to-indigo-600 text-white flex items-center justify-center">
<svg class="w-7 h-7" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"/></svg>
</div>
</div>
<div class="flex-1">
@ -425,15 +425,15 @@
</a>
<a href="/downloads/tractatus-agent-lightning-v1.0.tar.gz"
class="inline-flex items-center justify-center px-6 py-3 bg-white border-2 border-purple-600 text-purple-700 font-semibold rounded-lg hover:bg-purple-50 transition">
📦 Install Pack
Install Pack
</a>
<a href="https://discord.gg/Dkke2ADu4E" target="_blank" rel="noopener noreferrer"
class="inline-flex items-center justify-center px-6 py-3 bg-indigo-600 text-white font-semibold rounded-lg hover:bg-indigo-700 transition">
💬 Tractatus Discord
Tractatus Discord
</a>
<a href="https://discord.gg/bVZtkceKsS" target="_blank" rel="noopener noreferrer"
class="inline-flex items-center justify-center px-6 py-3 bg-blue-600 text-white font-semibold rounded-lg hover:bg-blue-700 transition">
⚡ AL Discord
AL Discord
</a>
</div>
@ -966,9 +966,9 @@
<div class="font-semibold text-gray-900 mb-1" data-i18n="footer.business_case">Business Case Template</div>
<div class="text-sm text-gray-600" data-i18n="footer.business_case_desc">Assessment framework for evaluating whether architectural governance addresses your regulatory obligations</div>
</a>
<a href="/faq.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.leadership_questions">Common Leadership Questions</div>
<div class="text-sm text-gray-600" data-i18n="footer.leadership_questions_desc">Governance theatre vs enforcement, investment justification, risk assessment frameworks</div>
<a href="/korero-counter-arguments.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.leadership_questions">Counter-Arguments & Critical Questions</div>
<div class="text-sm text-gray-600" data-i18n="footer.leadership_questions_desc">Honest engagement with objections, limitations, and alternative approaches</div>
</a>
<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>
@ -992,40 +992,6 @@
</div>
<!-- Share CTA -->
<section class="bg-gray-100 py-12">
<div class="max-w-2xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="bg-white rounded-lg shadow-sm border border-gray-200 p-8">
<h2 class="text-2xl font-semibold text-gray-900 mb-3" data-i18n="share_cta.heading">
Help us reach the right people.
</h2>
<p class="text-gray-700 mb-6" data-i18n="share_cta.description">
If you know researchers, implementers, or leaders who need structural AI governance solutions, share this with them.
</p>
<div class="flex flex-wrap gap-3">
<button
data-action="copy-link"
class="bg-blue-600 hover:bg-blue-700 text-white px-6 py-2.5 rounded-lg font-medium transition-colors shadow-sm"
data-i18n="share_cta.copy_link">
Copy Link
</button>
<button
data-action="email-share"
class="bg-blue-600 hover:bg-blue-700 text-white px-6 py-2.5 rounded-lg font-medium transition-colors shadow-sm"
data-i18n="share_cta.email">
Email
</button>
<button
data-action="linkedin-share"
class="bg-blue-600 hover:bg-blue-700 text-white px-6 py-2.5 rounded-lg font-medium transition-colors shadow-sm"
data-i18n="share_cta.linkedin">
LinkedIn
</button>
</div>
</div>
</div>
</section>
<!-- Footer -->
<!-- Internationalization (must load first for footer translations) -->
<script src="/js/i18n-simple.js?v=0.1.2.1769107445437"></script>

22
public/researcher.html
View file

@ -151,8 +151,8 @@
<section class="mb-16 bg-blue-50 border-2 border-blue-200 rounded-xl p-8 animate-on-scroll" data-animation="fade-in">
<div class="flex items-start gap-4 mb-4">
<div class="flex-shrink-0">
<div class="w-12 h-12 rounded-full bg-blue-600 text-white flex items-center justify-center text-2xl">
🔬
<div class="w-12 h-12 rounded-full bg-blue-600 text-white flex items-center justify-center">
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19.428 15.428a2 2 0 00-1.022-.547l-2.387-.477a6 6 0 00-3.86.517l-.318.158a6 6 0 01-3.86.517L6.05 15.21a2 2 0 00-1.806.547M8 4h8l-1 1v5.172a2 2 0 00.586 1.414l5 5c1.26 1.26.367 3.414-1.415 3.414H4.828c-1.782 0-2.674-2.154-1.414-3.414l5-5A2 2 0 009 10.172V5L8 4z"/></svg>
</div>
</div>
<div class="flex-1">
@ -213,7 +213,7 @@
target="_blank"
rel="noopener noreferrer"
class="inline-block bg-orange-600 text-white px-4 py-2 rounded-lg font-semibold hover:bg-orange-700 transition text-sm">
<span data-i18n="alexander_research.hf_space_link">🤗 Explore 3,942 Audit Decisions on HF →</span>
<span data-i18n="alexander_research.hf_space_link">Explore 3,942 Audit Decisions on Hugging Face →</span>
</a>
<a href="/about/values.html" class="inline-block bg-gray-200 text-gray-900 px-4 py-2 rounded-lg font-semibold hover:bg-gray-300 transition text-sm">
<span data-i18n="alexander_research.values_link">Values & Principles →</span>
@ -227,8 +227,8 @@
<section class="mb-16 bg-gradient-to-br from-purple-50 to-indigo-50 border-2 border-purple-200 rounded-xl p-8 animate-on-scroll" data-animation="fade-in">
<div class="flex items-start gap-4 mb-4">
<div class="flex-shrink-0">
<div class="w-12 h-12 rounded-full bg-gradient-to-br from-purple-600 to-indigo-600 text-white flex items-center justify-center text-2xl">
⚡
<div class="w-12 h-12 rounded-full bg-gradient-to-br from-purple-600 to-indigo-600 text-white flex items-center justify-center">
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"/></svg>
</div>
</div>
<div class="flex-1">
@ -329,7 +329,7 @@
target="_blank"
rel="noopener noreferrer"
class="inline-block bg-white border-2 border-purple-600 text-purple-700 px-4 py-2 rounded-lg font-semibold hover:bg-purple-50 transition text-sm">
💬 Join Research Discussion →
Join Research Discussion →
</a>
</div>
</div>
@ -660,7 +660,7 @@
rel="noopener noreferrer"
class="flex items-center justify-between p-4 border-2 border-orange-400 bg-gradient-to-r from-orange-50 to-yellow-50 rounded-lg hover:border-orange-500 hover:shadow-md transition">
<div class="flex items-center">
<span class="text-2xl mr-3">🤗</span>
<span class="text-2xl mr-3 text-orange-600">HF</span>
<div>
<span class="font-bold text-gray-900 block" data-i18n="sections.resources.hf_space_title">Interactive Audit Log Explorer (Hugging Face)</span>
<span class="text-xs text-gray-600" data-i18n="sections.resources.hf_space_subtitle">Explore 3,942 governance decisions from production deployment</span>
@ -741,8 +741,8 @@
<section class="mb-16 bg-gradient-to-br from-purple-50 to-blue-50 border-2 border-purple-200 rounded-xl p-8">
<div class="flex items-start gap-4 mb-6">
<div class="flex-shrink-0">
<div class="w-14 h-14 rounded-full bg-gradient-to-br from-purple-600 to-indigo-600 text-white flex items-center justify-center text-2xl">
⚡
<div class="w-14 h-14 rounded-full bg-gradient-to-br from-purple-600 to-indigo-600 text-white flex items-center justify-center">
<svg class="w-7 h-7" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"/></svg>
</div>
</div>
<div class="flex-1">
@ -757,7 +757,7 @@
<!-- Research Context -->
<div class="bg-white rounded-lg p-6 border border-purple-200 mb-6">
<h3 class="text-xl font-bold text-gray-900 mb-4">🔬 Research Context</h3>
<h3 class="text-xl font-bold text-gray-900 mb-4">Research Context</h3>
<p class="text-gray-700 mb-4">
Microsoft's <strong>Agent Lightning</strong> uses reinforcement learning to optimize agentic AI performance through continuous training on human feedback. This creates a natural research question for governance frameworks:
</p>
@ -871,7 +871,7 @@
<!-- Collaboration & Resources -->
<div class="bg-white rounded-lg p-6 border border-purple-200">
<h3 class="text-xl font-bold text-gray-900 mb-4">🤝 Collaboration & Community</h3>
<h3 class="text-xl font-bold text-gray-900 mb-4">Collaboration & Community</h3>
<p class="text-gray-700 mb-4">
We're building a research community focused on agentic AI governance. If you're working on related problems - reinforcement learning safety, multi-agent governance, constraint persistence - we'd like to hear from you.
</p>

333
public/timeline.html Normal file
View file

@ -0,0 +1,333 @@
<!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">
<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 single-implementation limitations, 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-600 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. A Hugging Face Space was deployed with 3,942 anonymised governance decisions from production, 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-600 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: single implementation, 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-600 hover:text-emerald-700 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, Simone Weil's attention to affliction, 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-600">5</div>
<div class="text-sm text-gray-600 mt-1">Languages supported</div>
</div>
<div>
<div class="text-3xl font-bold text-emerald-600">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 single implementation. 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>

47
public/village-case-study.html
View file

@ -40,6 +40,10 @@
}
a:focus:not(:focus-visible) { outline: none; }
a:focus-visible { outline: 3px solid #3b82f6; outline-offset: 2px; }
.hero-gradient-vcs { background: linear-gradient(135deg, #0d9488 0%, #0f766e 50%, #047857 100%); }
.cta-gradient-vcs { background: linear-gradient(90deg, #0d9488 0%, #059669 100%); }
.disclaimer-border { border-width: 3px; }
</style>
<!-- Privacy-Preserving Analytics -->
@ -65,23 +69,23 @@
<!-- Hero Section -->
<header role="banner">
<section style="background: linear-gradient(135deg, #0d9488 0%, #0f766e 50%, #047857 100%); padding: 4rem 0;">
<div style="max-width: 80rem; margin: 0 auto; padding: 0 1rem;">
<div style="text-align: center;">
<div style="display: inline-block; background: #000000; color: #ffffff; padding: 0.5rem 1rem; border-radius: 0.5rem; font-weight: 600; margin-bottom: 1.5rem; font-size: 0.875rem;" data-i18n="hero.badge">
<section class="hero-gradient-vcs py-16">
<div class="max-w-7xl mx-auto px-4">
<div class="text-center">
<div class="inline-block bg-black text-white px-4 py-2 rounded-lg font-semibold mb-6 text-sm" data-i18n="hero.badge">
CASE STUDY
</div>
<h1 style="font-size: 2.5rem; font-weight: 700; margin-bottom: 1.5rem; color: #000000;" data-i18n="hero.title">
<h1 class="text-4xl font-bold mb-6 text-black" data-i18n="hero.title">
Village Platform: Tractatus in Production
</h1>
<p style="font-size: 1.25rem; margin-bottom: 2rem; max-width: 48rem; margin-left: auto; margin-right: auto; color: #000000;" data-i18n="hero.subtitle">
<p class="text-xl mb-8 max-w-3xl mx-auto text-black" data-i18n="hero.subtitle">
How Home AI applies all six Tractatus governance services to every user interaction in a live community platform.
</p>
<!-- Caveat Box - HIGH VISIBILITY DISCLAIMER -->
<div style="background: #fef3c7; border: 3px solid #f59e0b; border-radius: 0.5rem; padding: 1.5rem; max-width: 48rem; margin: 0 auto;">
<p style="color: #78350f; font-size: 1.125rem; margin: 0;">
<strong style="color: #92400e;">⚠️ <span data-i18n="hero.disclaimer.label">Important:</span></strong> <span data-i18n="hero.disclaimer.text">This documents a single implementation by the framework developer.
<div class="bg-amber-100 disclaimer-border border-amber-500 rounded-lg p-6 max-w-3xl mx-auto">
<p class="text-amber-900 text-lg">
<strong class="text-amber-800">&#9888;&#65039; <span data-i18n="hero.disclaimer.label">Important:</span></strong> <span data-i18n="hero.disclaimer.text">This documents a single implementation by the framework developer.
Metrics are self-reported. Independent audit and multi-site validation are planned but not yet conducted.</span>
</p>
</div>
@ -188,10 +192,13 @@
<!-- The Home AI Flow -->
<section class="mb-16">
<h2 class="text-3xl font-bold text-gray-900 mb-6">The Home AI Flow</h2>
<p class="text-gray-700 mb-8">
<p class="text-gray-700 mb-4">
When a user submits a query to Home AI, it passes through six verification stages
before a response is generated. This flow operates in the critical execution path.
</p>
<p class="text-sm text-gray-600 mb-8">
For a detailed account of Home AI's sovereign architecture, training approach, and governance integration, see <a href="/home-ai.html" class="text-blue-600 hover:text-blue-700 font-medium underline">Home AI / SLL: Sovereign Locally-Trained Language Model</a>.
</p>
<div class="bg-white rounded-xl shadow-md p-8">
<ol class="space-y-6">
@ -427,28 +434,28 @@
</section>
<!-- CTAs -->
<section style="background: linear-gradient(90deg, #0d9488 0%, #059669 100%); border-radius: 0.75rem; padding: 2rem; text-align: center;">
<h2 style="font-size: 1.5rem; font-weight: 700; margin-bottom: 1rem; color: #000000;" data-i18n="cta.heading">Explore Further</h2>
<p style="color: #000000; margin-bottom: 1.5rem; max-width: 42rem; margin-left: auto; margin-right: auto;" data-i18n="cta.description">
<section class="cta-gradient-vcs rounded-xl p-8 text-center">
<h2 class="text-2xl font-bold mb-4 text-black" data-i18n="cta.heading">Explore Further</h2>
<p class="text-black mb-6 max-w-2xl mx-auto" data-i18n="cta.description">
See the Village platform in action, or dive deeper into the technical architecture.
</p>
<div style="display: flex; flex-wrap: wrap; gap: 1rem; justify-content: center;">
<div class="flex flex-wrap gap-4 justify-center">
<a href="https://mysovereignty.digital"
target="_blank"
rel="noopener noreferrer"
style="display: inline-block; background: #ffffff; color: #0f766e; padding: 0.75rem 2rem; border-radius: 0.5rem; font-weight: 600; text-decoration: none; box-shadow: 0 4px 6px rgba(0,0,0,0.1);"
class="inline-block bg-white text-teal-700 px-8 py-3 rounded-lg font-semibold no-underline shadow-md hover:shadow-lg transition"
data-i18n="cta.visit_village">
Visit the Village →
Visit the Village &rarr;
</a>
<a href="/architecture.html"
style="display: inline-block; background: #115e59; color: #ffffff; padding: 0.75rem 2rem; border-radius: 0.5rem; font-weight: 600; text-decoration: none; border: 2px solid #2dd4bf;"
class="inline-block bg-teal-900 text-white px-8 py-3 rounded-lg font-semibold no-underline border-2 border-teal-400 hover:bg-teal-800 transition"
data-i18n="cta.system_architecture">
System Architecture →
System Architecture &rarr;
</a>
<a href="/researcher.html"
style="display: inline-block; background: #115e59; color: #ffffff; padding: 0.75rem 2rem; border-radius: 0.5rem; font-weight: 600; text-decoration: none; border: 2px solid #2dd4bf;"
class="inline-block bg-teal-900 text-white px-8 py-3 rounded-lg font-semibold no-underline border-2 border-teal-400 hover:bg-teal-800 transition"
data-i18n="cta.research_details">
Research Details →
Research Details &rarr;
</a>
</div>
</section>

203
scripts/seed-blog-posts.js Normal file
View file

@ -0,0 +1,203 @@
#!/usr/bin/env node
/**
* Seed Blog Posts
* Creates initial blog content for the Tractatus site.
*
* Usage: node scripts/seed-blog-posts.js
*
* Uses MONGODB_URI from environment or defaults to local dev database.
*/
const { MongoClient } = require('mongodb');
const uri = process.env.MONGODB_URI || 'mongodb://localhost:27017/tractatus_dev';
const dbName = process.env.MONGODB_DB || 'tractatus_dev';
const posts = [
{
title: 'Why We Built Tractatus: The 27027 Incident and the Case for Architectural AI Safety',
slug: 'why-we-built-tractatus-27027-incident',
author: {
type: 'human',
name: 'John Stroh'
},
content: `<h2>The Moment That Started Everything</h2>
<p>In October 2025, during an extended Claude Code session building the Village community platform, something unexpected happened. I specified port 27027 for a MongoDB connection — a deliberate choice, documented in the project instructions. Claude Code used port 27017 instead.</p>
<p>This wasn't a hallucination. It wasn't forgetting. It was something more fundamental: <strong>pattern recognition bias overriding explicit user instructions</strong>. The AI's training data overwhelmingly associated MongoDB with port 27017, and that statistical weight was strong enough to override a direct, unambiguous instruction from a human.</p>
<h2>Why This Matters Beyond a Port Number</h2>
<p>A wrong port number is easily caught and easily fixed. But the underlying failure mode — AI training patterns silently overriding human intent — scales in concerning ways. If an AI system can override "use port 27027" because its training says otherwise, what happens when the instruction is "prioritise user privacy over engagement metrics" and the training data overwhelmingly associates success with engagement?</p>
<p>Current AI safety approaches address this through better training, fine-tuning, and RLHF. These are valuable contributions. But they share a structural limitation: they operate within the AI's own reasoning process. The AI must choose to follow its safety training, and that choice is vulnerable to the same pattern-override dynamics that caused the 27027 incident.</p>
<h2>Architecture as an Alternative</h2>
<p>The Tractatus Framework emerged from a different question: what if safety constraints operated outside the AI's reasoning entirely? Not better training, but external architectural enforcement — governance services that validate AI actions before they execute, independent of whether the AI "wants" to comply.</p>
<p>This is not a novel idea in engineering. Building codes don't rely on architects choosing to build safe structures — they enforce structural requirements through inspection. Financial regulations don't rely on banks choosing ethical behaviour — they enforce compliance through external audit. The question is whether this principle can be applied to AI governance.</p>
<h2>What We've Learned So Far</h2>
<p>After more than a year of development and 800+ commits, we've built a framework with six governance services operating in the critical execution path of AI operations. The evidence is preliminary — single implementation, self-reported metrics, no independent validation — but the architectural approach has proven feasible.</p>
<p>Key observations:</p>
<ul>
<li>External governance services can intercept and validate AI actions before execution</li>
<li>The overhead is manageable — approximately 5% for 100% governance coverage</li>
<li>Multiple coordinated services create redundancy that is harder to bypass than single-point checks</li>
<li>The approach is runtime-agnostic — it can theoretically work with any AI agent platform</li>
</ul>
<p>These are early findings, not conclusions. The honest limitations are substantial: single implementation context, no adversarial testing, no multi-organisation validation. We document these limitations prominently because intellectual honesty is more important than marketing.</p>
<h2>What Comes Next</h2>
<p>The Tractatus Framework is open source under Apache 2.0 because AI safety benefits from transparency and collective improvement, not proprietary control. We're looking for research collaborators, pilot organisations, and critical engagement from the safety community.</p>
<p>If you're working on related problems — architectural AI safety, governance persistence, multi-agent coordination — we'd like to hear from you. The research is early, the questions are open, and the problem is too important for any single team to solve alone.</p>
<p><a href="/about.html">Learn more about the project</a> | <a href="/architecture.html">See the architecture</a> | <a href="https://github.com/AgenticGovernance/tractatus-framework">View on GitHub</a></p>`,
excerpt: 'How a wrong port number revealed a fundamental gap in AI safety — and why we built an architectural framework to address it.',
status: 'published',
published_at: new Date('2026-02-07T10:00:00Z'),
tags: ['origin-story', 'ai-safety', 'architecture', 'pattern-bias'],
moderation: {
human_reviewer: 'John Stroh',
approved_at: new Date('2026-02-07T10:00:00Z')
},
tractatus_classification: {
quadrant: 'STRATEGIC',
values_sensitive: false,
requires_strategic_review: false
},
view_count: 0,
engagement: { shares: 0, comments: 0 }
},
{
title: 'Research Update: From Five Principles to Three Research Papers — What Changed in Year One',
slug: 'research-update-year-one-2025-2026',
author: {
type: 'human',
name: 'John Stroh'
},
content: `<h2>A Year of Research Evolution</h2>
<p>The Tractatus Framework began in October 2025 as a practical response to AI governance failures observed during software development. Twelve months later, it has evolved from a set of hook scripts into a research framework with published papers, a production case study, and a community of interested researchers and implementers. This post summarises what changed, what we learned, and what questions remain open.</p>
<h2>The Philosophical Foundations</h2>
<p>Early versions of Tractatus were purely technical — governance services enforcing boundaries. But production experience revealed that the harder questions weren't technical. They were philosophical: whose values should an AI system enforce? How do you handle genuinely conflicting legitimate interests? What does "human oversight" mean when decisions affect communities with different moral frameworks?</p>
<p>These questions led us to four intellectual traditions that now form the framework's philosophical basis:</p>
<ul>
<li><strong>Isaiah Berlin's value pluralism</strong> — the recognition that human values are genuinely plural and sometimes incommensurable. You cannot rank "privacy" against "safety" on a single scale.</li>
<li><strong>Simone Weil's attention to affliction</strong> — the insight that those most affected by power structures are often least visible to them. AI systems must attend to the perspectives of those they most affect.</li>
<li><strong>Te Tiriti o Waitangi and indigenous data sovereignty</strong> — principles of rangatiratanga (self-determination) and kaitiakitanga (guardianship) that provide concrete guidance for technology respecting community agency.</li>
<li><strong>Christopher Alexander's living architecture</strong> — five principles (Not-Separateness, Deep Interlock, Gradients Not Binary, Structure-Preserving, Living Process) that guide how governance evolves while maintaining coherence.</li>
</ul>
<h2>The Architecture</h2>
<p>The six governance services — BoundaryEnforcer, InstructionPersistenceClassifier, CrossReferenceValidator, ContextPressureMonitor, MetacognitiveVerifier, and PluralisticDeliberationOrchestrator — remain the core technical contribution. They operate in the critical execution path, external to the AI's reasoning, creating architectural enforcement rather than voluntary compliance.</p>
<p>The most significant architectural evolution was recognising that these services must coordinate through mutual validation ("Deep Interlock" in Alexander's terms). A single-service bypass doesn't compromise the whole system — multiple services must be circumvented simultaneously, which is exponentially harder.</p>
<h2>The Village Case Study</h2>
<p>The Village platform — a community platform with a sovereign locally-trained language model (SLL) called Home AI — became the primary production test of the framework. Every user interaction with Home AI passes through all six governance services before a response is generated.</p>
<p>Observed metrics from this deployment:</p>
<ul>
<li>Six governance checks per interaction</li>
<li>11+ months of continuous operation</li>
<li>Approximately 5% overhead for 100% governance coverage</li>
</ul>
<p>These are self-reported metrics from a single implementation by the framework developer. We state this limitation clearly and repeatedly. Independent validation is needed before these results can be generalised.</p>
<h2>Three Editions of the Research Paper</h2>
<p>In January 2026, we published "Architectural Alignment: Bridging AI Safety and Deployment Architecture" in three editions tailored to different audiences:</p>
<ul>
<li><strong>Academic edition</strong> — full formal treatment with methodology, theoretical grounding, and limitations analysis</li>
<li><strong>Community edition</strong> — accessible language with practical examples for practitioners and community organisers</li>
<li><strong>Policymakers edition</strong> — regulatory framing with EU AI Act mapping and compliance implications</li>
</ul>
<p>The decision to write three editions reflects a core conviction: AI safety research must be accessible to the communities it affects. A paper readable only by researchers cannot inform the policy decisions and implementation choices that determine real-world outcomes.</p>
<h2>Open Questions</h2>
<p>The honest assessment is that we have more questions than answers:</p>
<ul>
<li>Does architectural enforcement scale to enterprise deployments with thousands of concurrent agents?</li>
<li>How does the framework perform under adversarial attack? We have not conducted red-team testing.</li>
<li>Can the PluralisticDeliberationOrchestrator genuinely coordinate multi-stakeholder deliberation at scale, or does it collapse into majority-rule under pressure?</li>
<li>What happens when governance services themselves contain biases inherited from their design context?</li>
<li>How do you maintain governance persistence through reinforcement learning training cycles?</li>
</ul>
<p>These questions are not rhetorical disclaimers — they represent genuine gaps in our understanding that require collaborative research to address.</p>
<h2>What We're Looking For</h2>
<p>Tractatus is open source (Apache 2.0) because we believe AI safety benefits from collective improvement. We're actively seeking:</p>
<ul>
<li>Academic researchers for independent validation studies</li>
<li>Organisations willing to pilot the framework in different deployment contexts</li>
<li>Critical engagement — particularly from those who see flaws in our approach</li>
<li>Contributions to the <a href="/korero-counter-arguments.html">counter-arguments document</a>, which represents our best attempt at honest engagement with criticism</li>
</ul>
<p>The research is early. The claims are modest. The questions are substantial. But the underlying problem — how to maintain human agency over AI systems that increasingly make consequential decisions — is urgent enough to warrant exploration from multiple angles.</p>
<p><a href="/timeline.html">View the full research timeline</a> | <a href="/researcher.html">Research foundations</a> | <a href="/architectural-alignment.html">Read the academic paper</a></p>`,
excerpt: 'A summary of the Tractatus Framework\'s evolution from October 2025 to February 2026: philosophical foundations, architectural changes, the Village case study, and the open questions that remain.',
status: 'published',
published_at: new Date('2026-02-07T12:00:00Z'),
tags: ['research-update', 'philosophy', 'architecture', 'village', 'year-in-review'],
moderation: {
human_reviewer: 'John Stroh',
approved_at: new Date('2026-02-07T12:00:00Z')
},
tractatus_classification: {
quadrant: 'STRATEGIC',
values_sensitive: false,
requires_strategic_review: false
},
view_count: 0,
engagement: { shares: 0, comments: 0 }
}
];
async function seed() {
const client = new MongoClient(uri);
try {
await client.connect();
const db = client.db(dbName);
const collection = db.collection('blog_posts');
// Check for duplicate slugs
const slugs = posts.map(p => p.slug);
const existing = await collection.find({ slug: { $in: slugs } }).toArray();
const existingSlugs = new Set(existing.map(p => p.slug));
const newPosts = posts.filter(p => !existingSlugs.has(p.slug));
if (newPosts.length === 0) {
console.log('All posts already exist (matched by slug). Nothing to insert.');
return;
}
if (existingSlugs.size > 0) {
console.log(`Skipping ${existingSlugs.size} existing post(s): ${[...existingSlugs].join(', ')}`);
}
// Insert new posts
const result = await collection.insertMany(newPosts);
console.log(`Inserted ${result.insertedCount} blog posts:`);
posts.forEach(p => console.log(` - "${p.title}" (${p.slug})`));
} catch (error) {
console.error('Error seeding blog posts:', error.message);
process.exit(1);
} finally {
await client.close();
}
}
seed().then(() => {
console.log('Done.');
process.exit(0);
});