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

style(ui): update theme, branding, and GitHub repository links

Browse source 
Update UI across all pages with:
- New favicon and brand icons (favicon-new.svg, tractatus-icon-new.svg)
- Theme CSS integration (tractatus-theme.min.css)
- Correct GitHub repository links (AgenticGovernance/tractatus)
- PWA manifest updates
- Consistent branding colors and gradients

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

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
TheFlow 2025-10-19 12:48:29 +13:00
parent d32da03b3e
commit 9d390da76b
41 changed files with 627 additions and 1242 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

71
public/about.html
View file

@ -5,7 +5,9 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>About | Tractatus AI Safety Framework</title> <title>About | Tractatus AI Safety Framework</title>
<meta name="description" content="Learn about the Tractatus Framework: our mission, values, team, and commitment to preserving human agency through structural AI safety."> <meta name="description" content="Learn about the Tractatus Framework: our mission, values, team, and commitment to preserving human agency through structural AI safety.">
<link rel="stylesheet" href="/css/fonts.css">
<link rel="stylesheet" href="/css/tailwind.css?v=0.1.0.1760254958072"> <link rel="stylesheet" href="/css/tailwind.css?v=0.1.0.1760254958072">
<link rel="stylesheet" href="/css/tractatus-theme.min.css?v=1760816800">
<style> <style>
/* Accessibility: Skip link */ /* Accessibility: Skip link */
.skip-link { position: absolute; left: -9999px; top: 0; } .skip-link { position: absolute; left: -9999px; top: 0; }
@ -28,6 +30,17 @@
<!-- Navigation (injected by navbar.js) --> <!-- Navigation (injected by navbar.js) -->
<script src="/js/components/navbar.js?v=0.1.0.1760254958072"></script> <script src="/js/components/navbar.js?v=0.1.0.1760254958072"></script>
<!-- Breadcrumb Navigation -->
<nav class="bg-gray-50 border-b border-gray-200 py-3" aria-label="Breadcrumb">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<ol class="flex items-center space-x-2 text-sm">
<li><a href="/" class="hover:underline transition-colors" style="color: var(--tractatus-core-end);">Home</a></li>
<li class="text-gray-400">/</li>
<li class="text-gray-900 font-medium" aria-current="page">About</li>
</ol>
</div>
</nav>
<!-- Hero Section --> <!-- Hero Section -->
<div class="bg-gradient-to-br from-blue-50 to-purple-50 py-20"> <div class="bg-gradient-to-br from-blue-50 to-purple-50 py-20">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
@ -229,60 +242,12 @@
<!-- Footer with Te Tiriti Acknowledgment --> <!-- Footer with Te Tiriti Acknowledgment -->
<!-- Footer --> <!-- Footer -->
<footer class="bg-gray-900 text-gray-400 py-12 mt-16" role="contentinfo">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="grid grid-cols-1 md:grid-cols-5 gap-8">
<div>
<h3 class="text-white font-semibold mb-4">Tractatus Framework</h3>
<p class="text-sm">
Reference implementation of architectural AI safety constraints—structural governance validated in single-project deployment.
</p>
</div>
<div>
<h3 class="text-white font-semibold mb-4">Resources</h3>
<ul class="space-y-2 text-sm">
<li><a href="/docs.html" class="hover:text-white transition">Documentation</a></li>
<li><a href="/demos/tractatus-demo.html" class="hover:text-white transition">Interactive Demos</a></li>
<li><a href="/researcher.html" class="hover:text-white transition">For Researchers</a></li>
<li><a href="/implementer.html" class="hover:text-white transition">For Implementers</a></li>
<li><a href="/leader.html" class="hover:text-white transition">For Leaders</a></li>
<li><a href="/about.html" class="hover:text-white transition">About & Values</a></li>
</ul>
</div>
<div>
<h3 class="text-white font-semibold mb-4">Community</h3>
<ul class="space-y-2 text-sm">
<li><a href="/media-inquiry.html" class="hover:text-white transition">Media Inquiries</a></li>
<li><a href="/case-submission.html" class="hover:text-white transition">Submit Case Study</a></li>
<li><a href="/blog.html" class="hover:text-white transition">Blog</a></li>
<li><a href="/#newsletter" class="hover:text-white transition">Newsletter</a></li>
</ul>
</div>
<div>
<h3 class="text-white font-semibold mb-4">Support This Work</h3>
<ul class="space-y-2 text-sm">
<li><a href="/koha.html" class="hover:text-white transition">Make a Donation</a></li>
<li><a href="/koha/transparency.html" class="hover:text-white transition">Transparency Dashboard</a></li>
</ul>
</div>
<div>
<h3 class="text-white font-semibold mb-4">Acknowledgment</h3>
<p class="text-sm">
This framework acknowledges Te Tiriti o Waitangi and indigenous leadership in digital sovereignty.
Built with respect for CARE Principles and Māori data sovereignty.
</p>
</div>
</div>
<div class="mt-8 pt-8 border-t border-gray-800 text-center text-sm space-y-2">
<p class="text-gray-300">Safety Through Structure, Not Aspiration | Built with <a href="https://claude.ai/claude-code" class="text-blue-400 hover:text-blue-300 transition" target="_blank" rel="noopener">Claude Code</a></p>
<p>© 2025 John G Stroh. Licensed under <a href="https://www.apache.org/licenses/LICENSE-2.0" class="text-blue-400 hover:text-blue-300 transition" target="_blank" rel="noopener">Apache License 2.0</a>.</p>
</div>
</div>
</footer>
<!-- Internationalization --> <!-- Internationalization -->
<script src="/js/i18n-simple.js?v=0.1.0.1760643941"></script> <script src="/js/i18n-simple.js?v=1760818106"></script>
<script src="/js/components/language-selector.js?v=0.1.0.1760643941"></script> <script src="/js/components/language-selector.js?v=1760818106"></script>
<!-- Footer Component -->
<script src="/js/components/footer.js"></script>
</body> </body>
</html> </html>

162
public/about/values.html
View file

@ -5,7 +5,9 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Values & Principles | Tractatus AI Safety Framework</title> <title>Values & Principles | Tractatus AI Safety Framework</title>
<meta name="description" content="Our core values: sovereignty, transparency, harmlessness, and community. Including our commitment to Te Tiriti o Waitangi and indigenous data sovereignty."> <meta name="description" content="Our core values: sovereignty, transparency, harmlessness, and community. Including our commitment to Te Tiriti o Waitangi and indigenous data sovereignty.">
<link rel="stylesheet" href="/css/fonts.css">
<link rel="stylesheet" href="/css/tailwind.css?v=1759833751"> <link rel="stylesheet" href="/css/tailwind.css?v=1759833751">
<link rel="stylesheet" href="/css/tractatus-theme.min.css?v=1760816800">
<style> <style>
html { scroll-behavior: smooth; } html { scroll-behavior: smooth; }
@ -34,10 +36,10 @@
<div class="bg-gradient-to-br from-purple-50 to-blue-50 py-20"> <div class="bg-gradient-to-br from-purple-50 to-blue-50 py-20">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="text-center"> <div class="text-center">
<h1 class="text-5xl font-bold text-gray-900 mb-6"> <h1 class="text-5xl font-bold text-gray-900 mb-6" data-i18n="header.title">
Values & Principles Values & Principles
</h1> </h1>
<p class="text-xl text-gray-600 max-w-3xl mx-auto"> <p class="text-xl text-gray-600 max-w-3xl mx-auto" data-i18n="header.subtitle">
The foundational values that guide the Tractatus Framework's development, governance, and community. The foundational values that guide the Tractatus Framework's development, governance, and community.
</p> </p>
</div> </div>
@ -47,13 +49,13 @@
<!-- Table of Contents --> <!-- Table of Contents -->
<main id="main-content" class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 py-8"> <main id="main-content" class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
<div class="bg-white rounded-lg shadow-sm p-6"> <div class="bg-white rounded-lg shadow-sm p-6">
<h2 class="text-lg font-bold text-gray-900 mb-4">Contents</h2> <h2 class="text-lg font-bold text-gray-900 mb-4" data-i18n="toc.heading">Contents</h2>
<nav class="space-y-2"> <nav class="space-y-2">
<a href="#core-values" class="block text-blue-600 hover:text-blue-700">Core Values</a> <a href="#core-values" class="block text-blue-600 hover:text-blue-700" data-i18n="toc.core_values">Core Values</a>
<a href="#sovereignty" class="block text-blue-600 hover:text-blue-700 pl-4">• Sovereignty</a> <a href="#sovereignty" class="block text-blue-600 hover:text-blue-700 pl-4" data-i18n="toc.sovereignty">• Sovereignty</a>
<a href="#transparency" class="block text-blue-600 hover:text-blue-700 pl-4">• Transparency</a> <a href="#transparency" class="block text-blue-600 hover:text-blue-700 pl-4" data-i18n="toc.transparency">• Transparency</a>
<a href="#harmlessness" class="block text-blue-600 hover:text-blue-700 pl-4">• Harmlessness</a> <a href="#harmlessness" class="block text-blue-600 hover:text-blue-700 pl-4" data-i18n="toc.harmlessness">• Harmlessness</a>
<a href="#community" class="block text-blue-600 hover:text-blue-700 pl-4">• Community</a> <a href="#community" class="block text-blue-600 hover:text-blue-700 pl-4" data-i18n="toc.community">• Community</a>
<a href="#te-tiriti" class="block text-blue-600 hover:text-blue-700">Te Tiriti o Waitangi & Digital Sovereignty</a> <a href="#te-tiriti" class="block text-blue-600 hover:text-blue-700">Te Tiriti o Waitangi & Digital Sovereignty</a>
<a href="#indigenous-data-sovereignty" class="block text-blue-600 hover:text-blue-700">Indigenous Data Sovereignty</a> <a href="#indigenous-data-sovereignty" class="block text-blue-600 hover:text-blue-700">Indigenous Data Sovereignty</a>
<a href="#governance" class="block text-blue-600 hover:text-blue-700">Governance & Accountability</a> <a href="#governance" class="block text-blue-600 hover:text-blue-700">Governance & Accountability</a>
@ -66,21 +68,21 @@
<!-- Core Values --> <!-- Core Values -->
<section id="core-values" class="mb-16"> <section id="core-values" class="mb-16">
<h2 class="text-3xl font-bold text-gray-900 mb-6">Core Values</h2> <h2 class="text-3xl font-bold text-gray-900 mb-6" data-i18n="core_values.heading">Core Values</h2>
<div class="prose prose-lg text-gray-600 mb-8"> <div class="prose prose-lg text-gray-600 mb-8">
<p> <p data-i18n="core_values.intro">
These four values form the foundation of the Tractatus Framework. They are not aspirational—they are architectural. The framework is designed to enforce these values through structure, not training. These four values form the foundation of the Tractatus Framework. They are not aspirational—they are architectural. The framework is designed to enforce these values through structure, not training.
</p> </p>
</div> </div>
<!-- Sovereignty --> <!-- Sovereignty -->
<div id="sovereignty" class="mb-12 bg-white rounded-lg shadow-md p-8 border-l-4 border-green-600"> <div id="sovereignty" class="mb-12 bg-white rounded-lg shadow-md p-8 border-l-4 border-green-600">
<h3 class="text-2xl font-bold text-gray-900 mb-4">1. Sovereignty</h3> <h3 class="text-2xl font-bold text-gray-900 mb-4" data-i18n="sovereignty.title">1. Sovereignty</h3>
<p class="text-gray-600 mb-4"> <p class="text-gray-600 mb-4">
<strong>Principle:</strong> Individuals and communities must maintain control over decisions affecting their data, privacy, values, and agency. AI systems must preserve human sovereignty, not erode it. <strong data-i18n="sovereignty.principle">Principle:</strong> <span data-i18n="sovereignty.principle_text">Individuals and communities must maintain control over decisions affecting their data, privacy, values, and agency. AI systems must preserve human sovereignty, not erode it.</span>
</p> </p>
<h4 class="text-lg font-semibold text-gray-900 mb-2">What This Means in Practice:</h4> <h4 class="text-lg font-semibold text-gray-900 mb-2" data-i18n="sovereignty.practice_heading">What This Means in Practice:</h4>
<ul class="list-disc list-inside text-gray-600 space-y-2 mb-4"> <ul class="list-disc list-inside text-gray-600 space-y-2 mb-4">
<li>AI cannot make values trade-offs (e.g., privacy vs. convenience) without human approval</li> <li>AI cannot make values trade-offs (e.g., privacy vs. convenience) without human approval</li>
<li>Users can always override AI decisions</li> <li>Users can always override AI decisions</li>
@ -89,7 +91,7 @@
<li>No paternalistic "AI knows best" approaches</li> <li>No paternalistic "AI knows best" approaches</li>
</ul> </ul>
<h4 class="text-lg font-semibold text-gray-900 mb-2">Framework Implementation:</h4> <h4 class="text-lg font-semibold text-gray-900 mb-2" data-i18n="sovereignty.framework_heading">Framework Implementation:</h4>
<ul class="list-disc list-inside text-gray-600 space-y-2"> <ul class="list-disc list-inside text-gray-600 space-y-2">
<li><strong>BoundaryEnforcer</strong> blocks values decisions requiring human judgment</li> <li><strong>BoundaryEnforcer</strong> blocks values decisions requiring human judgment</li>
<li><strong>InstructionPersistenceClassifier</strong> respects STRATEGIC and HIGH persistence instructions</li> <li><strong>InstructionPersistenceClassifier</strong> respects STRATEGIC and HIGH persistence instructions</li>
@ -99,12 +101,12 @@
<!-- Transparency --> <!-- Transparency -->
<div id="transparency" class="mb-12 bg-white rounded-lg shadow-md p-8 border-l-4 border-blue-600"> <div id="transparency" class="mb-12 bg-white rounded-lg shadow-md p-8 border-l-4 border-blue-600">
<h3 class="text-2xl font-bold text-gray-900 mb-4">2. Transparency</h3> <h3 class="text-2xl font-bold text-gray-900 mb-4" data-i18n="transparency.title">2. Transparency</h3>
<p class="text-gray-600 mb-4"> <p class="text-gray-600 mb-4">
<strong>Principle:</strong> All AI decisions must be explainable, auditable, and reversible. No black boxes. Users deserve to understand how and why systems make choices. <strong data-i18n="transparency.principle">Principle:</strong> <span data-i18n="transparency.principle_text">All AI decisions must be explainable, auditable, and reversible. No black boxes. Users deserve to understand how and why systems make choices.</span>
</p> </p>
<h4 class="text-lg font-semibold text-gray-900 mb-2">What This Means in Practice:</h4> <h4 class="text-lg font-semibold text-gray-900 mb-2" data-i18n="transparency.practice_heading">What This Means in Practice:</h4>
<ul class="list-disc list-inside text-gray-600 space-y-2 mb-4"> <ul class="list-disc list-inside text-gray-600 space-y-2 mb-4">
<li>Every AI decision includes reasoning and evidence</li> <li>Every AI decision includes reasoning and evidence</li>
<li>Users can inspect instruction history and classification</li> <li>Users can inspect instruction history and classification</li>
@ -113,7 +115,7 @@
<li>Source code is open and auditable</li> <li>Source code is open and auditable</li>
</ul> </ul>
<h4 class="text-lg font-semibold text-gray-900 mb-2">Framework Implementation:</h4> <h4 class="text-lg font-semibold text-gray-900 mb-2" data-i18n="transparency.framework_heading">Framework Implementation:</h4>
<ul class="list-disc list-inside text-gray-600 space-y-2"> <ul class="list-disc list-inside text-gray-600 space-y-2">
<li><strong>CrossReferenceValidator</strong> shows which instruction conflicts with proposed action</li> <li><strong>CrossReferenceValidator</strong> shows which instruction conflicts with proposed action</li>
<li><strong>MetacognitiveVerifier</strong> provides reasoning analysis and confidence scores</li> <li><strong>MetacognitiveVerifier</strong> provides reasoning analysis and confidence scores</li>
@ -123,12 +125,12 @@
<!-- Harmlessness --> <!-- Harmlessness -->
<div id="harmlessness" class="mb-12 bg-white rounded-lg shadow-md p-8 border-l-4 border-purple-600"> <div id="harmlessness" class="mb-12 bg-white rounded-lg shadow-md p-8 border-l-4 border-purple-600">
<h3 class="text-2xl font-bold text-gray-900 mb-4">3. Harmlessness</h3> <h3 class="text-2xl font-bold text-gray-900 mb-4" data-i18n="harmlessness.title">3. Harmlessness</h3>
<p class="text-gray-600 mb-4"> <p class="text-gray-600 mb-4">
<strong>Principle:</strong> AI systems must not cause harm through action or inaction. This includes preventing drift, detecting degradation, and enforcing boundaries against values erosion. <strong data-i18n="harmlessness.principle">Principle:</strong> <span data-i18n="harmlessness.principle_text">AI systems must not cause harm through action or inaction. This includes preventing drift, detecting degradation, and enforcing boundaries against values erosion.</span>
</p> </p>
<h4 class="text-lg font-semibold text-gray-900 mb-2">What This Means in Practice:</h4> <h4 class="text-lg font-semibold text-gray-900 mb-2" data-i18n="harmlessness.practice_heading">What This Means in Practice:</h4>
<ul class="list-disc list-inside text-gray-600 space-y-2 mb-4"> <ul class="list-disc list-inside text-gray-600 space-y-2 mb-4">
<li>Prevent parameter contradictions (e.g., 27027 incident)</li> <li>Prevent parameter contradictions (e.g., 27027 incident)</li>
<li>Detect and halt values drift before deployment</li> <li>Detect and halt values drift before deployment</li>
@ -137,7 +139,7 @@
<li>Fail safely: when uncertain, ask rather than assume</li> <li>Fail safely: when uncertain, ask rather than assume</li>
</ul> </ul>
<h4 class="text-lg font-semibold text-gray-900 mb-2">Framework Implementation:</h4> <h4 class="text-lg font-semibold text-gray-900 mb-2" data-i18n="harmlessness.framework_heading">Framework Implementation:</h4>
<ul class="list-disc list-inside text-gray-600 space-y-2"> <ul class="list-disc list-inside text-gray-600 space-y-2">
<li><strong>ContextPressureMonitor</strong> detects when error probability increases</li> <li><strong>ContextPressureMonitor</strong> detects when error probability increases</li>
<li><strong>BoundaryEnforcer</strong> prevents values drift</li> <li><strong>BoundaryEnforcer</strong> prevents values drift</li>
@ -147,12 +149,12 @@
<!-- Community --> <!-- Community -->
<div id="community" class="mb-12 bg-white rounded-lg shadow-md p-8 border-l-4 border-orange-600"> <div id="community" class="mb-12 bg-white rounded-lg shadow-md p-8 border-l-4 border-orange-600">
<h3 class="text-2xl font-bold text-gray-900 mb-4">4. Community</h3> <h3 class="text-2xl font-bold text-gray-900 mb-4" data-i18n="community.title">4. Community</h3>
<p class="text-gray-600 mb-4"> <p class="text-gray-600 mb-4">
<strong>Principle:</strong> AI safety is a collective endeavor, not a corporate product. Communities must have tools, knowledge, and agency to shape AI systems affecting their lives. <strong>Principle:</strong> AI safety is a collective endeavor, not a corporate product. Communities must have tools, knowledge, and agency to shape AI systems affecting their lives.
</p> </p>
<h4 class="text-lg font-semibold text-gray-900 mb-2">What This Means in Practice:</h4> <h4 class="text-lg font-semibold text-gray-900 mb-2" data-i18n="community.practice_heading">What This Means in Practice:</h4>
<ul class="list-disc list-inside text-gray-600 space-y-2 mb-4"> <ul class="list-disc list-inside text-gray-600 space-y-2 mb-4">
<li>Open source framework under permissive Apache License 2.0 (with patent protection)</li> <li>Open source framework under permissive Apache License 2.0 (with patent protection)</li>
<li>Accessible documentation and educational resources</li> <li>Accessible documentation and educational resources</li>
@ -161,7 +163,7 @@
<li>No paywalls, no vendor lock-in, no proprietary control</li> <li>No paywalls, no vendor lock-in, no proprietary control</li>
</ul> </ul>
<h4 class="text-lg font-semibold text-gray-900 mb-2">Framework Implementation:</h4> <h4 class="text-lg font-semibold text-gray-900 mb-2" data-i18n="community.framework_heading">Framework Implementation:</h4>
<ul class="list-disc list-inside text-gray-600 space-y-2"> <ul class="list-disc list-inside text-gray-600 space-y-2">
<li>All code publicly available on GitHub</li> <li>All code publicly available on GitHub</li>
<li>Interactive demos for education and advocacy</li> <li>Interactive demos for education and advocacy</li>
@ -172,52 +174,52 @@
<!-- Te Tiriti o Waitangi --> <!-- Te Tiriti o Waitangi -->
<section id="te-tiriti" class="mb-16"> <section id="te-tiriti" class="mb-16">
<h2 class="text-3xl font-bold text-gray-900 mb-6">Te Tiriti o Waitangi & Digital Sovereignty</h2> <h2 class="text-3xl font-bold text-gray-900 mb-6" data-i18n="te_tiriti_section.title">Te Tiriti o Waitangi & Digital Sovereignty</h2>
<div class="bg-blue-50 border-l-4 border-blue-600 p-6 rounded-r-lg mb-8"> <div class="bg-blue-50 border-l-4 border-blue-600 p-6 rounded-r-lg mb-8">
<p class="text-blue-900 mb-4"> <p class="text-blue-900 mb-4">
<strong>Context:</strong> The Tractatus Framework is developed in Aotearoa New Zealand. We acknowledge Te Tiriti o Waitangi (the Treaty of Waitangi, 1840) as the founding document of this nation, and recognize the ongoing significance of tino rangatiratanga (self-determination) and kaitiakitanga (guardianship) in the digital realm. <strong data-i18n="te_tiriti_section.context_label">Context:</strong> <span data-i18n="te_tiriti_section.context_text">The Tractatus Framework is developed in Aotearoa New Zealand. We acknowledge Te Tiriti o Waitangi (the Treaty of Waitangi, 1840) as the founding document of this nation, and recognize the ongoing significance of tino rangatiratanga (self-determination) and kaitiakitanga (guardianship) in the digital realm.</span>
</p> </p>
<p class="text-blue-900"> <p class="text-blue-900">
This acknowledgment is not performative. Digital sovereignty—the principle that communities control their own data and technology—has deep roots in indigenous frameworks that predate Western tech by centuries. <span data-i18n="te_tiriti_section.context_para2">This acknowledgment is not performative. Digital sovereignty—the principle that communities control their own data and technology—has deep roots in indigenous frameworks that predate Western tech by centuries.</span>
</p> </p>
</div> </div>
<h3 class="text-xl font-bold text-gray-900 mb-4">Why This Matters for AI Safety</h3> <h3 class="text-xl font-bold text-gray-900 mb-4" data-i18n="te_tiriti_section.why_matters_heading">Why This Matters for AI Safety</h3>
<div class="prose prose-lg text-gray-600 mb-6"> <div class="prose prose-lg text-gray-600 mb-6">
<p> <p>
Te Tiriti o Waitangi establishes principles of partnership, protection, and participation. These principles directly inform the Tractatus Framework's approach to digital sovereignty: <span data-i18n="te_tiriti_section.why_matters_text">Te Tiriti o Waitangi establishes principles of partnership, protection, and participation. These principles directly inform the Tractatus Framework\'s approach to digital sovereignty:</span>
</p> </p>
<ul class="list-disc list-inside space-y-2"> <ul class="list-disc list-inside space-y-2">
<li><strong>Rangatiratanga (sovereignty):</strong> Communities must control decisions affecting their data and values</li> <li><strong data-i18n="te_tiriti_section.rangatiratanga_label">Rangatiratanga (sovereignty):</strong> <span data-i18n="te_tiriti_section.rangatiratanga_text">Communities must control decisions affecting their data and values</span></li>
<li><strong>Kaitiakitanga (guardianship):</strong> AI systems must be stewards, not exploiters, of data and knowledge</li> <li><strong data-i18n="te_tiriti_section.kaitiakitanga_label">Kaitiakitanga (guardianship):</strong> <span data-i18n="te_tiriti_section.kaitiakitanga_text">AI systems must be stewards, not exploiters, of data and knowledge</span></li>
<li><strong>Mana (authority & dignity):</strong> Technology must respect human dignity and cultural context</li> <li><strong data-i18n="te_tiriti_section.mana_label">Mana (authority & dignity):</strong> <span data-i18n="te_tiriti_section.mana_text">Technology must respect human dignity and cultural context</span></li>
<li><strong>Whanaungatanga (relationships):</strong> AI safety is collective, not individual—relationships matter</li> <li><strong data-i18n="te_tiriti_section.whanaungatanga_label">Whanaungatanga (relationships):</strong> <span data-i18n="te_tiriti_section.whanaungatanga_text">AI safety is collective, not individual—relationships matter</span></li>
</ul> </ul>
</div> </div>
<h3 class="text-xl font-bold text-gray-900 mb-4">Our Approach</h3> <h3 class="text-xl font-bold text-gray-900 mb-4" data-i18n="te_tiriti_section.approach_heading">Our Approach</h3>
<div class="prose prose-lg text-gray-600 mb-6"> <div class="prose prose-lg text-gray-600 mb-6">
<p> <p>
We do not claim to speak for Māori or indigenous communities. Instead, we: <span data-i18n="te_tiriti_section.approach_intro">We do not claim to speak for Māori or indigenous communities. Instead, we:</span>
</p> </p>
<ul class="list-disc list-inside space-y-2"> <ul class="list-disc list-inside space-y-2">
<li><strong>Follow established frameworks:</strong> We align with <em>Te Mana Raraunga</em> (Māori Data Sovereignty Network) and CARE Principles for Indigenous Data Governance</li> <li><strong data-i18n="te_tiriti_section.approach_frameworks_label">Follow established frameworks:</strong> <span data-i18n="te_tiriti_section.approach_frameworks_text">We align with <em>Te Mana Raraunga</em> (Māori Data Sovereignty Network) and CARE Principles for Indigenous Data Governance</span></li>
<li><strong>Respect without tokenism:</strong> Te Tiriti forms part of our strategic foundation, not a superficial overlay</li> <li><strong data-i18n="te_tiriti_section.approach_respect_label">Respect without tokenism:</strong> <span data-i18n="te_tiriti_section.approach_respect_text">Te Tiriti forms part of our strategic foundation, not a superficial overlay</span></li>
<li><strong>Avoid premature engagement:</strong> We will not approach Māori organizations for endorsement until we have demonstrated value and impact</li> <li><strong data-i18n="te_tiriti_section.approach_engagement_label">Avoid premature engagement:</strong> <span data-i18n="te_tiriti_section.approach_engagement_text">We will not approach Māori organizations for endorsement until we have demonstrated value and impact</span></li>
<li><strong>Document and learn:</strong> We study indigenous data sovereignty principles and incorporate them architecturally</li> <li><strong data-i18n="te_tiriti_section.approach_learn_label">Document and learn:</strong> <span data-i18n="te_tiriti_section.approach_learn_text">We study indigenous data sovereignty principles and incorporate them architecturally</span></li>
</ul> </ul>
</div> </div>
<div class="bg-gray-100 rounded-lg p-6"> <div class="bg-gray-100 rounded-lg p-6">
<h4 class="text-lg font-semibold text-gray-900 mb-3">Te Tiriti Principles in Practice</h4> <h4 class="text-lg font-semibold text-gray-900 mb-3" data-i18n="te_tiriti_section.principles_heading">Te Tiriti Principles in Practice</h4>
<div class="space-y-4 text-sm text-gray-700"> <div class="space-y-4 text-sm text-gray-700">
<div class="flex items-start"> <div class="flex items-start">
<div class="w-8 h-8 bg-green-100 rounded-full flex items-center justify-center mr-3 flex-shrink-0 mt-1"> <div class="w-8 h-8 bg-green-100 rounded-full flex items-center justify-center mr-3 flex-shrink-0 mt-1">
<span class="text-green-700 font-bold">✓</span> <span class="text-green-700 font-bold">✓</span>
</div> </div>
<div> <div>
<strong>Partnership:</strong> AI systems should be developed in partnership with affected communities, not imposed upon them. <strong data-i18n="te_tiriti_section.partnership_label">Partnership:</strong> <span data-i18n="te_tiriti_section.partnership_text">AI systems should be developed in partnership with affected communities, not imposed upon them.</span>
</div> </div>
</div> </div>
<div class="flex items-start"> <div class="flex items-start">
@ -225,7 +227,7 @@
<span class="text-green-700 font-bold">✓</span> <span class="text-green-700 font-bold">✓</span>
</div> </div>
<div> <div>
<strong>Protection:</strong> The framework protects against values erosion, ensuring cultural contexts are not overridden by AI assumptions. <strong data-i18n="te_tiriti_section.protection_label">Protection:</strong> <span data-i18n="te_tiriti_section.protection_text">The framework protects against values erosion, ensuring cultural contexts are not overridden by AI assumptions.</span>
</div> </div>
</div> </div>
<div class="flex items-start"> <div class="flex items-start">
@ -233,7 +235,7 @@
<span class="text-green-700 font-bold">✓</span> <span class="text-green-700 font-bold">✓</span>
</div> </div>
<div> <div>
<strong>Participation:</strong> Communities maintain agency over AI decisions affecting their data and values. <strong data-i18n="te_tiriti_section.participation_label">Participation:</strong> <span data-i18n="te_tiriti_section.participation_text">Communities maintain agency over AI decisions affecting their data and values.</span>
</div> </div>
</div> </div>
</div> </div>
@ -242,61 +244,61 @@
<!-- Indigenous Data Sovereignty --> <!-- Indigenous Data Sovereignty -->
<section id="indigenous-data-sovereignty" class="mb-16"> <section id="indigenous-data-sovereignty" class="mb-16">
<h2 class="text-3xl font-bold text-gray-900 mb-6">Indigenous Data Sovereignty</h2> <h2 class="text-3xl font-bold text-gray-900 mb-6" data-i18n="indigenous_data.title">Indigenous Data Sovereignty</h2>
<div class="prose prose-lg text-gray-600 mb-6"> <div class="prose prose-lg text-gray-600 mb-6">
<p> <p>
Indigenous data sovereignty is the principle that indigenous peoples have the right to control the collection, ownership, and application of their own data. This goes beyond privacy—it's about self-determination in the digital age. <span data-i18n="indigenous_data.intro">Indigenous data sovereignty is the principle that indigenous peoples have the right to control the collection, ownership, and application of their own data. This goes beyond privacy—it\'s about self-determination in the digital age.</span>
</p> </p>
</div> </div>
<h3 class="text-xl font-bold text-gray-900 mb-4">CARE Principles for Indigenous Data Governance</h3> <h3 class="text-xl font-bold text-gray-900 mb-4" data-i18n="indigenous_data.care_heading">CARE Principles for Indigenous Data Governance</h3>
<p class="text-gray-600 mb-4"> <p class="text-gray-600 mb-4">
The Tractatus Framework aligns with the <a href="https://www.gida-global.org/care" class="text-blue-600 hover:text-blue-700 underline" target="_blank" rel="noopener">CARE Principles</a>, developed by indigenous data governance experts: <span data-i18n="indigenous_data.care_intro">The Tractatus Framework aligns with the <a href="https://www.gida-global.org/care" class="text-blue-600 hover:text-blue-700 underline" target="_blank" rel="noopener">CARE Principles</a>, developed by indigenous data governance experts:</span>
</p> </p>
<div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-8"> <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-8">
<div class="bg-white rounded-lg shadow-sm p-6 border-l-4 border-teal-500"> <div class="bg-white rounded-lg shadow-sm p-6 border-l-4 border-teal-500">
<h4 class="text-lg font-bold text-gray-900 mb-2">Collective Benefit</h4> <h4 class="text-lg font-bold text-gray-900 mb-2" data-i18n="indigenous_data.collective_benefit_label">Collective Benefit</h4>
<p class="text-sm text-gray-600"> <p class="text-sm text-gray-600">
Data ecosystems shall be designed and function in ways that enable Indigenous Peoples to derive benefit from the data. <span data-i18n="indigenous_data.collective_benefit_text">Data ecosystems shall be designed and function in ways that enable Indigenous Peoples to derive benefit from the data.</span>
</p> </p>
</div> </div>
<div class="bg-white rounded-lg shadow-sm p-6 border-l-4 border-blue-500"> <div class="bg-white rounded-lg shadow-sm p-6 border-l-4 border-blue-500">
<h4 class="text-lg font-bold text-gray-900 mb-2">Authority to Control</h4> <h4 class="text-lg font-bold text-gray-900 mb-2" data-i18n="indigenous_data.authority_label">Authority to Control</h4>
<p class="text-sm text-gray-600"> <p class="text-sm text-gray-600">
Indigenous Peoples' rights and interests in Indigenous data must be recognized and their authority to control such data be empowered. <span data-i18n="indigenous_data.authority_text">Indigenous Peoples\' rights and interests in Indigenous data must be recognized and their authority to control such data be empowered.</span>
</p> </p>
</div> </div>
<div class="bg-white rounded-lg shadow-sm p-6 border-l-4 border-purple-500"> <div class="bg-white rounded-lg shadow-sm p-6 border-l-4 border-purple-500">
<h4 class="text-lg font-bold text-gray-900 mb-2">Responsibility</h4> <h4 class="text-lg font-bold text-gray-900 mb-2" data-i18n="indigenous_data.responsibility_label">Responsibility</h4>
<p class="text-sm text-gray-600"> <p class="text-sm text-gray-600">
Those working with Indigenous data have a responsibility to share how data are used to support Indigenous Peoples' self-determination and collective benefit. <span data-i18n="indigenous_data.responsibility_text">Those working with Indigenous data have a responsibility to share how data are used to support Indigenous Peoples\' self-determination and collective benefit.</span>
</p> </p>
</div> </div>
<div class="bg-white rounded-lg shadow-sm p-6 border-l-4 border-green-500"> <div class="bg-white rounded-lg shadow-sm p-6 border-l-4 border-green-500">
<h4 class="text-lg font-bold text-gray-900 mb-2">Ethics</h4> <h4 class="text-lg font-bold text-gray-900 mb-2" data-i18n="indigenous_data.ethics_label">Ethics</h4>
<p class="text-sm text-gray-600"> <p class="text-sm text-gray-600">
Indigenous Peoples' rights and wellbeing should be the primary concern at all stages of the data life cycle and across the data ecosystem. <span data-i18n="indigenous_data.ethics_text">Indigenous Peoples\' rights and wellbeing should be the primary concern at all stages of the data life cycle and across the data ecosystem.</span>
</p> </p>
</div> </div>
</div> </div>
<h3 class="text-xl font-bold text-gray-900 mb-4">Resources & Further Reading</h3> <h3 class="text-xl font-bold text-gray-900 mb-4" data-i18n="indigenous_data.resources_heading">Resources & Further Reading</h3>
<div class="bg-gray-50 rounded-lg p-6"> <div class="bg-gray-50 rounded-lg p-6">
<ul class="space-y-3"> <ul class="space-y-3">
<li> <li>
<a href="https://www.temanararaunga.maori.nz/" class="text-blue-600 hover:text-blue-700 font-medium" target="_blank" rel="noopener"> <a href="https://www.temanararaunga.maori.nz/" class="text-blue-600 hover:text-blue-700 font-medium" target="_blank" rel="noopener">
Te Mana Raraunga – Māori Data Sovereignty Network → <span data-i18n="indigenous_data.tmr_title">Te Mana Raraunga – Māori Data Sovereignty Network →</span>
</a> </a>
<p class="text-sm text-gray-600 mt-1">Leading network advancing Māori data sovereignty in Aotearoa.</p> <p class="text-sm text-gray-600 mt-1">Leading network advancing Māori data sovereignty in Aotearoa.</p>
</li> </li>
<li> <li>
<a href="https://www.gida-global.org/care" class="text-blue-600 hover:text-blue-700 font-medium" target="_blank" rel="noopener"> <a href="https://www.gida-global.org/care" class="text-blue-600 hover:text-blue-700 font-medium" target="_blank" rel="noopener">
CARE Principles for Indigenous Data Governance → <span data-i18n="indigenous_data.care_title">CARE Principles for Indigenous Data Governance →</span>
</a> </a>
<p class="text-sm text-gray-600 mt-1">International framework for indigenous data rights.</p> <p class="text-sm text-gray-600 mt-1">International framework for indigenous data rights.</p>
</li> </li>
@ -306,40 +308,40 @@
<!-- Governance & Accountability --> <!-- Governance & Accountability -->
<section id="governance" class="mb-16"> <section id="governance" class="mb-16">
<h2 class="text-3xl font-bold text-gray-900 mb-6">Governance & Accountability</h2> <h2 class="text-3xl font-bold text-gray-900 mb-6" data-i18n="governance.title">Governance & Accountability</h2>
<div class="prose prose-lg text-gray-600 mb-6"> <div class="prose prose-lg text-gray-600 mb-6">
<p> <p>
Values without enforcement are aspirations. The Tractatus Framework implements these values through architectural governance: <span data-i18n="governance.intro">Values without enforcement are aspirations. The Tractatus Framework implements these values through architectural governance:</span>
</p> </p>
</div> </div>
<div class="space-y-6"> <div class="space-y-6">
<div class="bg-white rounded-lg shadow-sm p-6"> <div class="bg-white rounded-lg shadow-sm p-6">
<h3 class="text-lg font-bold text-gray-900 mb-3">Strategic Review Protocol</h3> <h3 class="text-lg font-bold text-gray-900 mb-3" data-i18n="governance.strategic_review_heading">Strategic Review Protocol</h3>
<p class="text-gray-600"> <p class="text-gray-600">
Quarterly reviews of framework alignment with stated values. Any drift from sovereignty, transparency, harmlessness, or community principles triggers mandatory correction. <span data-i18n="governance.strategic_review_text">Quarterly reviews of framework alignment with stated values. Any drift from sovereignty, transparency, harmlessness, or community principles triggers mandatory correction.</span>
</p> </p>
</div> </div>
<div class="bg-white rounded-lg shadow-sm p-6"> <div class="bg-white rounded-lg shadow-sm p-6">
<h3 class="text-lg font-bold text-gray-900 mb-3">Values Alignment Framework</h3> <h3 class="text-lg font-bold text-gray-900 mb-3" data-i18n="governance.values_alignment_heading">Values Alignment Framework</h3>
<p class="text-gray-600"> <p class="text-gray-600">
All major decisions (architectural changes, partnerships, licensing) must pass values alignment check. If a decision would compromise any core value, it is rejected. <span data-i18n="governance.values_alignment_text">All major decisions (architectural changes, partnerships, licensing) must pass values alignment check. If a decision would compromise any core value, it is rejected.</span>
</p> </p>
</div> </div>
<div class="bg-white rounded-lg shadow-sm p-6"> <div class="bg-white rounded-lg shadow-sm p-6">
<h3 class="text-lg font-bold text-gray-900 mb-3">Human Oversight Requirements</h3> <h3 class="text-lg font-bold text-gray-900 mb-3" data-i18n="governance.human_oversight_heading">Human Oversight Requirements</h3>
<p class="text-gray-600"> <p class="text-gray-600">
AI-generated content (documentation, code examples, case studies) requires human approval before publication. No AI makes values decisions without human judgment. <span data-i18n="governance.human_oversight_text">AI-generated content (documentation, code examples, case studies) requires human approval before publication. No AI makes values decisions without human judgment.</span>
</p> </p>
</div> </div>
<div class="bg-white rounded-lg shadow-sm p-6"> <div class="bg-white rounded-lg shadow-sm p-6">
<h3 class="text-lg font-bold text-gray-900 mb-3">Community Accountability</h3> <h3 class="text-lg font-bold text-gray-900 mb-3" data-i18n="governance.community_accountability_heading">Community Accountability</h3>
<p class="text-gray-600"> <p class="text-gray-600">
Open source development means community oversight. If we fail to uphold these values, the community can fork, modify, or create alternatives. This is by design. <span data-i18n="governance.community_accountability_text">Open source development means community oversight. If we fail to uphold these values, the community can fork, modify, or create alternatives. This is by design.</span>
</p> </p>
</div> </div>
</div> </div>
@ -348,20 +350,20 @@
<!-- Commitment Statement --> <!-- Commitment Statement -->
<section class="mb-16"> <section class="mb-16">
<div class="bg-gradient-to-r from-purple-600 to-blue-600 rounded-2xl p-12 text-white"> <div class="bg-gradient-to-r from-purple-600 to-blue-600 rounded-2xl p-12 text-white">
<h2 class="text-3xl font-bold mb-4">Our Commitment</h2> <h2 class="text-3xl font-bold mb-4" data-i18n="commitment.title">Our Commitment</h2>
<div class="prose prose-lg text-white opacity-95"> <div class="prose prose-lg text-white opacity-95">
<p class="mb-4"> <p class="mb-4">
These values are not negotiable. They form the architectural foundation of the Tractatus Framework. We commit to: <span data-i18n="commitment.intro">These values are not negotiable. They form the architectural foundation of the Tractatus Framework. We commit to:</span>
</p> </p>
<ul class="space-y-2 mb-6"> <ul class="space-y-2 mb-6">
<li>Preserving human sovereignty over values decisions</li> <li data-i18n="commitment.item1">Preserving human sovereignty over values decisions</li>
<li>Maintaining radical transparency in all framework operations</li> <li data-i18n="commitment.item2">Maintaining radical transparency in all framework operations</li>
<li>Preventing harm through structural constraints, not promises</li> <li data-i18n="commitment.item3">Preventing harm through structural constraints, not promises</li>
<li>Building and empowering community, not extracting from it</li> <li data-i18n="commitment.item4">Building and empowering community, not extracting from it</li>
<li>Respecting Te Tiriti o Waitangi and indigenous data sovereignty</li> <li data-i18n="commitment.item5">Respecting Te Tiriti o Waitangi and indigenous data sovereignty</li>
</ul> </ul>
<p class="font-semibold"> <p class="font-semibold">
When in doubt, we choose human agency over AI capability. Always. <span data-i18n="commitment.closing">When in doubt, we choose human agency over AI capability. Always.</span>
</p> </p>
</div> </div>
</div> </div>
@ -411,5 +413,9 @@
</div> </div>
</footer> </footer>
</body> <!-- Internationalization -->
<script src="/js/i18n-simple.js?v=1760823000"></script>
<script src="/js/components/language-selector.js?v=1760823000"></script>

</html> </html>

3
public/admin/audit-analytics.html
View file

@ -4,8 +4,9 @@
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Audit Analytics | Tractatus Admin</title> <title>Audit Analytics | Tractatus Admin</title>
<link rel="icon" type="image/svg+xml" href="/favicon.svg"> <link rel="icon" type="image/svg+xml" href="/favicon-new.svg">
<link rel="stylesheet" href="/css/tailwind.css"> <link rel="stylesheet" href="/css/tailwind.css">
<link rel="stylesheet" href="/css/tractatus-theme.min.css">
<script src="/js/admin/auth-check.js"></script> <script src="/js/admin/auth-check.js"></script>
<style> <style>
html { scroll-behavior: smooth; } html { scroll-behavior: smooth; }

1
public/admin/blog-curation.html
View file

@ -5,6 +5,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Blog Curation | Tractatus Admin</title> <title>Blog Curation | Tractatus Admin</title>
<link rel="stylesheet" href="/css/tailwind.css?v=1759833751"> <link rel="stylesheet" href="/css/tailwind.css?v=1759833751">
<link rel="stylesheet" href="/css/tractatus-theme.min.css">
<script src="/js/admin/auth-check.js"></script> <script src="/js/admin/auth-check.js"></script>
</head> </head>
<body class="bg-gray-50"> <body class="bg-gray-50">

3
public/admin/case-moderation.html
View file

@ -4,8 +4,9 @@
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Case Study Moderation | Tractatus Admin</title> <title>Case Study Moderation | Tractatus Admin</title>
<link rel="icon" type="image/svg+xml" href="/favicon.svg"> <link rel="icon" type="image/svg+xml" href="/favicon-new.svg">
<link rel="stylesheet" href="/css/tailwind.css"> <link rel="stylesheet" href="/css/tailwind.css">
<link rel="stylesheet" href="/css/tractatus-theme.min.css">
<script src="/js/admin/auth-check.js"></script> <script src="/js/admin/auth-check.js"></script>
</head> </head>
<body class="bg-gray-50"> <body class="bg-gray-50">

1
public/admin/claude-md-migrator.html
View file

@ -5,6 +5,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CLAUDE.md Migration Wizard - Tractatus Admin</title> <title>CLAUDE.md Migration Wizard - Tractatus Admin</title>
<link href="../css/tailwind.css" rel="stylesheet"> <link href="../css/tailwind.css" rel="stylesheet">
<link rel="stylesheet" href="/css/tractatus-theme.min.css">
<script src="/js/admin/auth-check.js"></script> <script src="/js/admin/auth-check.js"></script>
</head> </head>
<body class="bg-gray-100"> <body class="bg-gray-100">

1
public/admin/dashboard.html
View file

@ -5,6 +5,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Admin Dashboard | Tractatus Framework</title> <title>Admin Dashboard | Tractatus Framework</title>
<link rel="stylesheet" href="/css/tailwind.css?v=1759833751"> <link rel="stylesheet" href="/css/tailwind.css?v=1759833751">
<link rel="stylesheet" href="/css/tractatus-theme.min.css">
<script src="/js/admin/auth-check.js"></script> <script src="/js/admin/auth-check.js"></script>
</head> </head>
<body class="bg-gray-50"> <body class="bg-gray-50">

1
public/admin/hooks-dashboard.html
View file

@ -5,6 +5,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Framework Hooks Dashboard | Tractatus Admin</title> <title>Framework Hooks Dashboard | Tractatus Admin</title>
<link rel="stylesheet" href="/css/tailwind.css"> <link rel="stylesheet" href="/css/tailwind.css">
<link rel="stylesheet" href="/css/tractatus-theme.min.css">
<script src="/js/admin/auth-check.js"></script> <script src="/js/admin/auth-check.js"></script>
</head> </head>
<body class="bg-gray-50"> <body class="bg-gray-50">

1
public/admin/login.html
View file

@ -5,6 +5,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Admin Login | Tractatus Framework</title> <title>Admin Login | Tractatus Framework</title>
<link rel="stylesheet" href="/css/tailwind.css?v=1759833751"> <link rel="stylesheet" href="/css/tailwind.css?v=1759833751">
<link rel="stylesheet" href="/css/tractatus-theme.min.css">
</head> </head>
<body class="bg-gray-50"> <body class="bg-gray-50">

3
public/admin/media-triage.html
View file

@ -4,8 +4,9 @@
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Media Triage | Tractatus Admin</title> <title>Media Triage | Tractatus Admin</title>
<link rel="icon" type="image/svg+xml" href="/favicon.svg"> <link rel="icon" type="image/svg+xml" href="/favicon-new.svg">
<link rel="stylesheet" href="/css/tailwind.css"> <link rel="stylesheet" href="/css/tailwind.css">
<link rel="stylesheet" href="/css/tractatus-theme.min.css">
<script src="/js/admin/auth-check.js"></script> <script src="/js/admin/auth-check.js"></script>
</head> </head>
<body class="bg-gray-50"> <body class="bg-gray-50">

1
public/admin/newsletter-management.html
View file

@ -5,6 +5,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Newsletter Management | Tractatus Admin</title> <title>Newsletter Management | Tractatus Admin</title>
<link rel="stylesheet" href="/css/tailwind.css?v=1759833751"> <link rel="stylesheet" href="/css/tailwind.css?v=1759833751">
<link rel="stylesheet" href="/css/tractatus-theme.min.css">
<script src="/js/admin/auth-check.js"></script> <script src="/js/admin/auth-check.js"></script>
</head> </head>
<body class="bg-gray-50"> <body class="bg-gray-50">

3
public/admin/project-manager.html
View file

@ -4,8 +4,9 @@
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Project Manager | Multi-Project Governance</title> <title>Project Manager | Multi-Project Governance</title>
<link rel="icon" type="image/svg+xml" href="/favicon.svg"> <link rel="icon" type="image/svg+xml" href="/favicon-new.svg">
<link rel="stylesheet" href="/css/tailwind.css?v=1760127701"> <link rel="stylesheet" href="/css/tailwind.css?v=1760127701">
<link rel="stylesheet" href="/css/tractatus-theme.min.css">
<script src="/js/admin/auth-check.js"></script> <script src="/js/admin/auth-check.js"></script>
</head> </head>
<body class="bg-gray-50"> <body class="bg-gray-50">

3
public/admin/rule-manager.html
View file

@ -4,8 +4,9 @@
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Rule Manager | Multi-Project Governance</title> <title>Rule Manager | Multi-Project Governance</title>
<link rel="icon" type="image/svg+xml" href="/favicon.svg"> <link rel="icon" type="image/svg+xml" href="/favicon-new.svg">
<link rel="stylesheet" href="/css/tailwind.css?v=1760127701"> <link rel="stylesheet" href="/css/tailwind.css?v=1760127701">
<link rel="stylesheet" href="/css/tractatus-theme.min.css">
<script src="/js/admin/auth-check.js"></script> <script src="/js/admin/auth-check.js"></script>
</head> </head>
<body class="bg-gray-50"> <body class="bg-gray-50">

32
public/api-reference.html
View file

@ -6,6 +6,7 @@
<title>API Reference | Tractatus Framework</title> <title>API Reference | Tractatus Framework</title>
<meta name="description" content="Complete API reference for Tractatus Framework - endpoints, authentication, request/response formats, and examples."> <meta name="description" content="Complete API reference for Tractatus Framework - endpoints, authentication, request/response formats, and examples.">
<link rel="stylesheet" href="/css/tailwind.css?v=0.1.0.1760254958072"> <link rel="stylesheet" href="/css/tailwind.css?v=0.1.0.1760254958072">
<link rel="stylesheet" href="/css/tractatus-theme.min.css">
<style> <style>
.endpoint-badge { .endpoint-badge {
@apply inline-block px-2 py-1 rounded text-xs font-mono font-semibold; @apply inline-block px-2 py-1 rounded text-xs font-mono font-semibold;
@ -867,35 +868,8 @@
</div> </div>
<!-- Footer --> <!-- Footer -->
<footer class="bg-gray-900 text-gray-400 py-12 mt-16"> <!-- Footer Component -->
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> <script src="/js/components/footer.js"></script>
<div class="grid grid-cols-1 md:grid-cols-3 gap-8">
<div>
<h3 class="text-white font-bold mb-4">Tractatus Framework</h3>
<p class="text-sm">Preserving human agency through architectural constraints.</p>
</div>
<div>
<h3 class="text-white font-bold mb-4">Documentation</h3>
<ul class="space-y-2 text-sm">
<li><a href="/docs.html" class="hover:text-white">Framework Docs</a></li>
<li><a href="/implementer.html" class="hover:text-white">Implementation Guide</a></li>
<li><a href="/api-reference.html" class="hover:text-white">API Reference</a></li>
</ul>
</div>
<div>
<h3 class="text-white font-bold mb-4">Resources</h3>
<ul class="space-y-2 text-sm">
<li><a href="/demos/classification-demo.html" class="hover:text-white">Interactive Demos</a></li>
<li><a href="/admin/login.html" class="hover:text-white">Admin Portal</a></li>
<li><a href="/" class="hover:text-white">Home</a></li>
</ul>
</div>
</div>
<div class="mt-8 pt-8 border-t border-gray-800 text-center text-sm">
<p>© 2025 John G Stroh. Licensed under <a href="https://www.apache.org/licenses/LICENSE-2.0" class="text-blue-400 hover:text-blue-300 transition" target="_blank" rel="noopener">Apache License 2.0</a>.</p>
</div>
</div>
</footer>
</body> </body>
</html> </html>

106
public/architecture.html
View file

@ -5,8 +5,10 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>System Architecture | Tractatus AI Safety Framework</title> <title>System Architecture | Tractatus AI Safety Framework</title>
<meta name="description" content="Tractatus runtime-agnostic governance architecture: exploring structural boundaries for AI safety that may be more resistant to adversarial manipulation than behavioral training alone."> <meta name="description" content="Tractatus runtime-agnostic governance architecture: exploring structural boundaries for AI safety that may be more resistant to adversarial manipulation than behavioral training alone.">
<link rel="icon" type="image/svg+xml" href="/favicon.svg"> <link rel="icon" type="image/svg+xml" href="/favicon-new.svg">
<link rel="stylesheet" href="/css/fonts.css">
<link rel="stylesheet" href="/css/tailwind.css?v=0.1.0.1760254958072"> <link rel="stylesheet" href="/css/tailwind.css?v=0.1.0.1760254958072">
<link rel="stylesheet" href="/css/tractatus-theme.min.css?v=1760816800">
<style> <style>
.skip-link { position: absolute; left: -9999px; } .skip-link { position: absolute; left: -9999px; }
.skip-link:focus { left: 0; z-index: 100; background: white; padding: 1rem; } .skip-link:focus { left: 0; z-index: 100; background: white; padding: 1rem; }
@ -30,6 +32,17 @@
<!-- Navigation (injected by navbar.js) --> <!-- Navigation (injected by navbar.js) -->
<script src="/js/components/navbar.js?v=0.1.0.1760254958072"></script> <script src="/js/components/navbar.js?v=0.1.0.1760254958072"></script>
<!-- Breadcrumb Navigation -->
<nav class="bg-gray-50 border-b border-gray-200 py-3" aria-label="Breadcrumb">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<ol class="flex items-center space-x-2 text-sm">
<li><a href="/" class="hover:underline transition-colors" style="color: var(--tractatus-core-end);">Home</a></li>
<li class="text-gray-400">/</li>
<li class="text-gray-900 font-medium" aria-current="page">Architecture</li>
</ol>
</div>
</nav>
<!-- Hero Section --> <!-- Hero Section -->
<header role="banner"> <header role="banner">
<section class="bg-gradient-to-br from-blue-600 via-blue-700 to-purple-700 text-white py-20"> <section class="bg-gradient-to-br from-blue-600 via-blue-700 to-purple-700 text-white py-20">
@ -194,10 +207,10 @@
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8"> <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
<div class="bg-white rounded-lg shadow-lg p-6 border-l-4 border-green-500"> <div class="bg-white rounded-lg shadow-lg p-6 border-l-4 hover:shadow-xl transition-shadow duration-300" style="border-left-color: #10b981;">
<div class="flex items-center mb-3"> <div class="flex items-center mb-3">
<div class="w-10 h-10 bg-green-100 rounded-lg flex items-center justify-center mr-3"> <div class="w-12 h-12 rounded-xl flex items-center justify-center mr-3" style="background: linear-gradient(135deg, #10b981 0%, #059669 100%);">
<svg class="w-6 h-6 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <svg class="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"/> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"/>
</svg> </svg>
</div> </div>
@ -206,15 +219,15 @@
<p class="text-gray-600 text-sm mb-3"> <p class="text-gray-600 text-sm mb-3">
Blocks AI from making values decisions (privacy, ethics, strategic direction). Requires human approval. Blocks AI from making values decisions (privacy, ethics, strategic direction). Requires human approval.
</p> </p>
<div class="text-xs text-green-700 bg-green-50 rounded px-3 py-2"> <div class="text-xs rounded px-3 py-2" style="color: #065f46; background-color: #d1fae5;">
<strong>Early Promise:</strong> Values boundaries enforced externally—harder to manipulate through prompting. <strong>Early Promise:</strong> Values boundaries enforced externally—harder to manipulate through prompting.
</div> </div>
</div> </div>
<div class="bg-white rounded-lg shadow-lg p-6 border-l-4 border-blue-500"> <div class="bg-white rounded-lg shadow-lg p-6 border-l-4 hover:shadow-xl transition-shadow duration-300" style="border-left-color: #6366f1;">
<div class="flex items-center mb-3"> <div class="flex items-center mb-3">
<div class="w-10 h-10 bg-blue-100 rounded-lg flex items-center justify-center mr-3"> <div class="w-12 h-12 rounded-xl flex items-center justify-center mr-3" style="background: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%);">
<svg class="w-6 h-6 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <svg class="w-6 h-6 text-white" 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"/> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/>
</svg> </svg>
</div> </div>
@ -223,15 +236,15 @@
<p class="text-gray-600 text-sm mb-3"> <p class="text-gray-600 text-sm mb-3">
Stores instructions externally with persistence levels (HIGH/MEDIUM/LOW). Aims to reduce directive fade. Stores instructions externally with persistence levels (HIGH/MEDIUM/LOW). Aims to reduce directive fade.
</p> </p>
<div class="text-xs text-blue-700 bg-blue-50 rounded px-3 py-2"> <div class="text-xs rounded px-3 py-2" style="color: #3730a3; background-color: #e0e7ff;">
<strong>Early Promise:</strong> Instructions stored outside AI—more resistant to context manipulation. <strong>Early Promise:</strong> Instructions stored outside AI—more resistant to context manipulation.
</div> </div>
</div> </div>
<div class="bg-white rounded-lg shadow-lg p-6 border-l-4 border-purple-500"> <div class="bg-white rounded-lg shadow-lg p-6 border-l-4 hover:shadow-xl transition-shadow duration-300" style="border-left-color: #8b5cf6;">
<div class="flex items-center mb-3"> <div class="flex items-center mb-3">
<div class="w-10 h-10 bg-purple-100 rounded-lg flex items-center justify-center mr-3"> <div class="w-12 h-12 rounded-xl flex items-center justify-center mr-3" style="background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%);">
<svg class="w-6 h-6 text-purple-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <svg class="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/>
</svg> </svg>
</div> </div>
@ -240,15 +253,15 @@
<p class="text-gray-600 text-sm mb-3"> <p class="text-gray-600 text-sm mb-3">
Validates AI actions against instruction history. Aims to prevent pattern bias overriding explicit directives. Validates AI actions against instruction history. Aims to prevent pattern bias overriding explicit directives.
</p> </p>
<div class="text-xs text-purple-700 bg-purple-50 rounded px-3 py-2"> <div class="text-xs rounded px-3 py-2" style="color: #581c87; background-color: #f3e8ff;">
<strong>Early Promise:</strong> Independent verification—AI claims checked against external source. <strong>Early Promise:</strong> Independent verification—AI claims checked against external source.
</div> </div>
</div> </div>
<div class="bg-white rounded-lg shadow-lg p-6 border-l-4 border-yellow-500"> <div class="bg-white rounded-lg shadow-lg p-6 border-l-4 hover:shadow-xl transition-shadow duration-300" style="border-left-color: #f59e0b;">
<div class="flex items-center mb-3"> <div class="flex items-center mb-3">
<div class="w-10 h-10 bg-yellow-100 rounded-lg flex items-center justify-center mr-3"> <div class="w-12 h-12 rounded-xl flex items-center justify-center mr-3" style="background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);">
<svg class="w-6 h-6 text-yellow-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <svg class="w-6 h-6 text-white" 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"/> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"/>
</svg> </svg>
</div> </div>
@ -257,15 +270,15 @@
<p class="text-gray-600 text-sm mb-3"> <p class="text-gray-600 text-sm mb-3">
Monitors AI performance degradation. Escalates when context pressure threatens quality. Monitors AI performance degradation. Escalates when context pressure threatens quality.
</p> </p>
<div class="text-xs text-yellow-700 bg-yellow-50 rounded px-3 py-2"> <div class="text-xs rounded px-3 py-2" style="color: #92400e; background-color: #fef3c7;">
<strong>Early Promise:</strong> Objective metrics may detect manipulation attempts early. <strong>Early Promise:</strong> Objective metrics may detect manipulation attempts early.
</div> </div>
</div> </div>
<div class="bg-white rounded-lg shadow-lg p-6 border-l-4 border-red-500"> <div class="bg-white rounded-lg shadow-lg p-6 border-l-4 hover:shadow-xl transition-shadow duration-300" style="border-left-color: #ec4899;">
<div class="flex items-center mb-3"> <div class="flex items-center mb-3">
<div class="w-10 h-10 bg-red-100 rounded-lg flex items-center justify-center mr-3"> <div class="w-12 h-12 rounded-xl flex items-center justify-center mr-3" style="background: linear-gradient(135deg, #ec4899 0%, #db2777 100%);">
<svg class="w-6 h-6 text-red-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <svg class="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z"/> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z"/>
</svg> </svg>
</div> </div>
@ -274,15 +287,15 @@
<p class="text-gray-600 text-sm mb-3"> <p class="text-gray-600 text-sm mb-3">
Requires AI to pause and verify complex operations before execution. Structural safety check. Requires AI to pause and verify complex operations before execution. Structural safety check.
</p> </p>
<div class="text-xs text-red-700 bg-red-50 rounded px-3 py-2"> <div class="text-xs rounded px-3 py-2" style="color: #831843; background-color: #fce7f3;">
<strong>Early Promise:</strong> Architectural gates aim to enforce verification steps. <strong>Early Promise:</strong> Architectural gates aim to enforce verification steps.
</div> </div>
</div> </div>
<div class="bg-white rounded-lg shadow-lg p-6 border-l-4 border-indigo-500"> <div class="bg-white rounded-lg shadow-lg p-6 border-l-4 hover:shadow-xl transition-shadow duration-300" style="border-left-color: #14b8a6;">
<div class="flex items-center mb-3"> <div class="flex items-center mb-3">
<div class="w-10 h-10 bg-indigo-100 rounded-lg flex items-center justify-center mr-3"> <div class="w-12 h-12 rounded-xl flex items-center justify-center mr-3" style="background: linear-gradient(135deg, #14b8a6 0%, #0d9488 100%);">
<svg class="w-6 h-6 text-indigo-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <svg class="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z"/> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z"/>
</svg> </svg>
</div> </div>
@ -291,7 +304,7 @@
<p class="text-gray-600 text-sm mb-3"> <p class="text-gray-600 text-sm mb-3">
Facilitates multi-stakeholder deliberation for values conflicts. AI provides facilitation, not authority. Facilitates multi-stakeholder deliberation for values conflicts. AI provides facilitation, not authority.
</p> </p>
<div class="text-xs text-indigo-700 bg-indigo-50 rounded px-3 py-2"> <div class="text-xs rounded px-3 py-2" style="color: #134e4a; background-color: #ccfbf1;">
<strong>Early Promise:</strong> Human judgment required—architecturally enforced escalation for values. <strong>Early Promise:</strong> Human judgment required—architecturally enforced escalation for values.
</div> </div>
</div> </div>
@ -450,47 +463,8 @@
</main> </main>
<!-- Footer --> <!-- Footer -->
<footer class="bg-gray-900 text-gray-400 py-12" role="contentinfo"> <!-- Footer Component -->
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> <script src="/js/components/footer.js"></script>
<div class="grid grid-cols-1 md:grid-cols-4 gap-8">
<div>
<h3 class="text-white font-semibold mb-4">Tractatus Framework</h3>
<p class="text-sm">
World's first production implementation of architectural AI safety constraints for human agency preservation.
</p>
</div>
<div>
<h3 class="text-white font-semibold mb-4">Resources</h3>
<ul class="space-y-2 text-sm">
<li><a href="/docs.html" class="hover:text-white transition">Documentation</a></li>
<li><a href="/architecture.html" class="hover:text-white transition">System Architecture</a></li>
<li><a href="/researcher.html" class="hover:text-white transition">For Researchers</a></li>
<li><a href="/implementer.html" class="hover:text-white transition">For Implementers</a></li>
<li><a href="/leader.html" class="hover:text-white transition">For Leaders</a></li>
</ul>
</div>
<div>
<h3 class="text-white font-semibold mb-4">Community</h3>
<ul class="space-y-2 text-sm">
<li><a href="/media-inquiry.html" class="hover:text-white transition">Media Inquiries</a></li>
<li><a href="/case-submission.html" class="hover:text-white transition">Submit Case Study</a></li>
<li><a href="/blog.html" class="hover:text-white transition">Blog</a></li>
</ul>
</div>
<div>
<h3 class="text-white font-semibold mb-4">Support This Work</h3>
<ul class="space-y-2 text-sm">
<li><a href="/koha.html" class="hover:text-white transition">Make a Donation</a></li>
<li><a href="/koha/transparency.html" class="hover:text-white transition">Transparency Dashboard</a></li>
</ul>
</div>
</div>
<div class="mt-8 pt-8 border-t border-gray-800 text-center text-sm space-y-2">
<p class="text-gray-300">Safety Through Structure, Not Aspiration | Built with <a href="https://claude.ai/claude-code" class="text-blue-400 hover:text-blue-300 transition" target="_blank" rel="noopener">Claude Code</a></p>
<p>© 2025 John G Stroh. Licensed under <a href="https://www.apache.org/licenses/LICENSE-2.0" class="text-blue-400 hover:text-blue-300 transition" target="_blank" rel="noopener">Apache License 2.0</a>.</p>
</div>
</div>
</footer>
</body> </body>
</html> </html>

84
public/blog-post.html
View file

@ -5,7 +5,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title id="page-title">Loading... | Tractatus Blog</title> <title id="page-title">Loading... | Tractatus Blog</title>
<meta id="page-description" name="description" content="Tractatus AI Safety Framework blog post"> <meta id="page-description" name="description" content="Tractatus AI Safety Framework blog post">
<link rel="icon" type="image/svg+xml" href="/favicon.svg"> <link rel="icon" type="image/svg+xml" href="/favicon-new.svg">
<!-- Open Graph Meta Tags (Facebook, LinkedIn) --> <!-- Open Graph Meta Tags (Facebook, LinkedIn) -->
<meta property="og:type" content="article"> <meta property="og:type" content="article">
@ -32,6 +32,7 @@
<link rel="alternate" type="application/rss+xml" title="Tractatus Blog RSS Feed" href="/api/blog/rss"> <link rel="alternate" type="application/rss+xml" title="Tractatus Blog RSS Feed" href="/api/blog/rss">
<link rel="stylesheet" href="/css/tailwind.css?v=0.1.0.1760254958072"> <link rel="stylesheet" href="/css/tailwind.css?v=0.1.0.1760254958072">
<link rel="stylesheet" href="/css/tractatus-theme.min.css">
<style> <style>
/* Accessibility: Skip link */ /* Accessibility: Skip link */
.skip-link { position: absolute; left: -9999px; top: 0; } .skip-link { position: absolute; left: -9999px; top: 0; }
@ -211,43 +212,7 @@
<div id="post-body" class="blog-content prose prose-lg max-w-none mb-12"></div> <div id="post-body" class="blog-content prose prose-lg max-w-none mb-12"></div>
<!-- Post Footer --> <!-- Post Footer -->
<footer class="border-t border-gray-200 pt-8"> </article>
<!-- Share Section -->
<div class="mb-8">
<h3 class="text-lg font-semibold text-gray-900 mb-4">Share this post</h3>
<div class="flex gap-3">
<button id="share-twitter" class="flex items-center gap-2 px-4 py-2 bg-blue-400 text-white rounded-lg hover:bg-blue-500 transition">
<svg class="h-5 w-5" fill="currentColor" viewBox="0 0 24 24">
<path d="M23 3a10.9 10.9 0 01-3.14 1.53 4.48 4.48 0 00-7.86 3v1A10.66 10.66 0 013 4s-4 9 5 13a11.64 11.64 0 01-7 2c9 5 20 0 20-11.5a4.5 4.5 0 00-.08-.83A7.72 7.72 0 0023 3z"/>
</svg>
Twitter
</button>
<button id="share-linkedin" class="flex items-center gap-2 px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition">
<svg class="h-5 w-5" fill="currentColor" viewBox="0 0 24 24">
<path d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433a2.062 2.062 0 01-2.063-2.065 2.064 2.064 0 112.063 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z"/>
</svg>
LinkedIn
</button>
<button id="copy-link" class="flex items-center gap-2 px-4 py-2 bg-gray-600 text-white rounded-lg hover:bg-gray-700 transition">
<svg class="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z"/>
</svg>
Copy Link
</button>
</div>
</div>
<!-- Back to Blog -->
<div>
<a href="/blog.html" class="inline-flex items-center text-indigo-600 hover:text-indigo-800 font-medium">
<svg class="h-5 w-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 19l-7-7m0 0l7-7m-7 7h18"/>
</svg>
Back to all posts
</a>
</div>
</footer>
</article>
<!-- Related Posts --> <!-- Related Posts -->
<div id="related-posts-section" class="hidden mt-16 border-t border-gray-200 pt-12"> <div id="related-posts-section" class="hidden mt-16 border-t border-gray-200 pt-12">
@ -259,49 +224,12 @@
</div> </div>
<!-- Footer --> <!-- Footer -->
<footer class="bg-gray-900 text-gray-400 py-12 mt-16">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="grid grid-cols-1 md:grid-cols-4 gap-8">
<div>
<h3 class="text-white font-bold mb-4">Tractatus Framework</h3>
<p class="text-sm">
Preserving human agency through architectural constraints, not aspirational goals.
</p>
</div>
<div>
<h3 class="text-white font-bold mb-4">Audience Paths</h3>
<ul class="space-y-2 text-sm">
<li><a href="/researcher.html" class="hover:text-white">Researchers</a></li>
<li><a href="/implementer.html" class="hover:text-white">Implementers</a></li>
<li><a href="/leader.html" class="hover:text-white">Leaders</a></li>
</ul>
</div>
<div>
<h3 class="text-white font-bold mb-4">Resources</h3>
<ul class="space-y-2 text-sm">
<li><a href="/docs.html" class="hover:text-white">Documentation</a></li>
<li><a href="/blog.html" class="hover:text-white">Blog</a></li>
<li><a href="/demos/classification-demo.html" class="hover:text-white">Interactive Demos</a></li>
<li><a href="/" class="hover:text-white">Home</a></li>
</ul>
</div>
<div>
<h3 class="text-white font-bold mb-4">Community</h3>
<ul class="space-y-2 text-sm">
<li><a href="/media-inquiry.html" class="hover:text-white">Media Inquiries</a></li>
<li><a href="/case-submission.html" class="hover:text-white">Submit Case Study</a></li>
</ul>
</div>
</div>
<div class="mt-8 pt-8 border-t border-gray-800 text-center text-sm space-y-2">
<p class="text-gray-500">Safety Through Structure, Not Aspiration | Built with <a href="https://claude.ai/claude-code" class="text-blue-400 hover:text-blue-300 transition" target="_blank" rel="noopener">Claude Code</a></p>
<p>© 2025 John G Stroh. Licensed under <a href="https://www.apache.org/licenses/LICENSE-2.0" class="text-blue-400 hover:text-blue-300 transition" target="_blank" rel="noopener">Apache License 2.0</a>.</p>
</div>
</div>
</footer>
<!-- Load Blog Post JavaScript --> <!-- Load Blog Post JavaScript -->
<script src="/js/blog-post.js?v=1760394750"></script> <script src="/js/blog-post.js?v=1760394750"></script>
<!-- Footer Component -->
<script src="/js/components/footer.js"></script>
</body> </body>
</html> </html>

47
public/blog.html
View file

@ -5,7 +5,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Blog | Tractatus AI Safety Framework</title> <title>Blog | Tractatus AI Safety Framework</title>
<meta name="description" content="Insights, updates, and analysis on AI governance, safety frameworks, and the Tractatus boundary enforcement approach."> <meta name="description" content="Insights, updates, and analysis on AI governance, safety frameworks, and the Tractatus boundary enforcement approach.">
<link rel="icon" type="image/svg+xml" href="/favicon.svg"> <link rel="icon" type="image/svg+xml" href="/favicon-new.svg">
<!-- Open Graph Meta Tags (Facebook, LinkedIn) --> <!-- Open Graph Meta Tags (Facebook, LinkedIn) -->
<meta property="og:type" content="website"> <meta property="og:type" content="website">
@ -29,6 +29,7 @@
<link rel="alternate" type="application/rss+xml" title="Tractatus Blog RSS Feed" href="/api/blog/rss"> <link rel="alternate" type="application/rss+xml" title="Tractatus Blog RSS Feed" href="/api/blog/rss">
<link rel="stylesheet" href="/css/tailwind.css?v=0.1.0.1760254958072"> <link rel="stylesheet" href="/css/tailwind.css?v=0.1.0.1760254958072">
<link rel="stylesheet" href="/css/tractatus-theme.min.css">
<style> <style>
/* Accessibility: Skip link */ /* Accessibility: Skip link */
.skip-link { position: absolute; left: -9999px; top: 0; } .skip-link { position: absolute; left: -9999px; top: 0; }
@ -258,49 +259,11 @@
</div> </div>
<!-- Footer --> <!-- Footer -->
<footer class="bg-gray-900 text-gray-400 py-12">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="grid grid-cols-1 md:grid-cols-4 gap-8">
<div>
<h3 class="text-white font-bold mb-4">Tractatus Framework</h3>
<p class="text-sm">
Preserving human agency through architectural constraints, not aspirational goals.
</p>
</div>
<div>
<h3 class="text-white font-bold mb-4">Audience Paths</h3>
<ul class="space-y-2 text-sm">
<li><a href="/researcher.html" class="hover:text-white">Researchers</a></li>
<li><a href="/implementer.html" class="hover:text-white">Implementers</a></li>
<li><a href="/leader.html" class="hover:text-white">Leaders</a></li>
</ul>
</div>
<div>
<h3 class="text-white font-bold mb-4">Resources</h3>
<ul class="space-y-2 text-sm">
<li><a href="/docs.html" class="hover:text-white">Documentation</a></li>
<li><a href="/blog.html" class="hover:text-white">Blog</a></li>
<li><a href="/demos/classification-demo.html" class="hover:text-white">Interactive Demos</a></li>
<li><a href="/" class="hover:text-white">Home</a></li>
</ul>
</div>
<div>
<h3 class="text-white font-bold mb-4">Community</h3>
<ul class="space-y-2 text-sm">
<li><a href="/media-inquiry.html" class="hover:text-white">Media Inquiries</a></li>
<li><a href="/case-submission.html" class="hover:text-white">Submit Case Study</a></li>
</ul>
</div>
</div>
<div class="mt-8 pt-8 border-t border-gray-800 text-center text-sm space-y-2">
<p class="text-gray-500">Safety Through Structure, Not Aspiration | Built with <a href="https://claude.ai/claude-code" class="text-blue-400 hover:text-blue-300 transition" target="_blank" rel="noopener">Claude Code</a></p>
<p>© 2025 John G Stroh. Licensed under <a href="https://www.apache.org/licenses/LICENSE-2.0" class="text-blue-400 hover:text-blue-300 transition" target="_blank" rel="noopener">Apache License 2.0</a>.</p>
</div>
</div>
</footer>
<!-- Load Blog JavaScript --> <!-- Load Blog JavaScript -->
<script src="/js/blog.js?v=1760396209"></script> <script src="/js/blog.js?v=1760396209"></script>
<!-- Footer Component -->
<script src="/js/components/footer.js"></script>
</body> </body>
</html> </html>

162
public/case-submission.html
View file

@ -4,19 +4,21 @@
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Submit Case Study | Tractatus AI Safety</title> <title>Submit Case Study | Tractatus AI Safety</title>
<link rel="stylesheet" href="/css/fonts.css">
<link rel="stylesheet" href="/css/tailwind.css?v=0.1.0.1760254958072"> <link rel="stylesheet" href="/css/tailwind.css?v=0.1.0.1760254958072">
<link rel="stylesheet" href="/css/tractatus-theme.min.css?v=1760816800">
<style> <style>
/* Accessibility: Skip link */ /* Accessibility: Skip link */
.skip-link { position: absolute; left: -9999px; top: 0; } .skip-link { position: absolute; left: -9999px; top: 0; }
.skip-link:focus { left: 0; z-index: 100; background: white; padding: 1rem; border: 2px solid #3b82f6; } .skip-link:focus { left: 0; z-index: 100; background: white; padding: 1rem; border: 2px solid var(--tractatus-core-end); }
/* Accessibility: Focus indicators (WCAG 2.4.7) */ /* Accessibility: Focus indicators (WCAG 2.4.7) */
a:focus, button:focus, input:focus, select:focus, textarea:focus { a:focus, button:focus, input:focus, select:focus, textarea:focus {
outline: 3px solid #3b82f6; outline: 3px solid var(--tractatus-core-end);
outline-offset: 2px; outline-offset: 2px;
} }
a:focus:not(:focus-visible) { outline: none; } a:focus:not(:focus-visible) { outline: none; }
a:focus-visible { outline: 3px solid #3b82f6; outline-offset: 2px; } a:focus-visible { outline: 3px solid var(--tractatus-core-end); outline-offset: 2px; }
.form-group { margin-bottom: 1.5rem; } .form-group { margin-bottom: 1.5rem; }
.form-label { .form-label {
@ -28,15 +30,16 @@
.form-input, .form-textarea, .form-select { .form-input, .form-textarea, .form-select {
width: 100%; width: 100%;
padding: 0.75rem; padding: 0.75rem;
border: 1px solid #d1d5db; border: 2px solid #e2e8f0;
border-radius: 0.375rem; border-radius: 0.5rem;
font-size: 1rem; font-size: 1rem;
transition: border-color 0.15s; transition: all 0.2s ease;
} }
.form-input:focus, .form-textarea:focus, .form-select:focus { .form-input:focus, .form-textarea:focus, .form-select:focus {
outline: none; outline: none;
border-color: #3b82f6; border-color: var(--tractatus-core-end);
box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1); box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.1);
transform: translateY(-1px);
} }
.form-textarea { min-height: 150px; resize: vertical; } .form-textarea { min-height: 150px; resize: vertical; }
.form-help { font-size: 0.875rem; color: #6b7280; margin-top: 0.25rem; } .form-help { font-size: 0.875rem; color: #6b7280; margin-top: 0.25rem; }
@ -86,9 +89,9 @@
<p class="text-lg text-gray-600 mb-4"> <p class="text-lg text-gray-600 mb-4">
Share real-world examples of AI safety failures that could have been prevented by the Tractatus Framework. Share real-world examples of AI safety failures that could have been prevented by the Tractatus Framework.
</p> </p>
<div class="bg-blue-50 border-l-4 border-blue-500 p-4 rounded"> <div class="bg-sky-50 border-l-4 p-4 rounded" style="border-left-color: var(--tractatus-core-end);">
<h3 class="text-blue-900 font-semibold mb-2">What makes a good case study?</h3> <h3 class="font-semibold mb-2" style="color: var(--tractatus-core-end);">What makes a good case study?</h3>
<ul class="text-blue-800 text-sm space-y-1"> <ul class="text-gray-700 text-sm space-y-1">
<li>• <strong>Documented failure:</strong> Real incident with evidence (not hypothetical)</li> <li>• <strong>Documented failure:</strong> Real incident with evidence (not hypothetical)</li>
<li>• <strong>Clear failure mode:</strong> Specific way the AI system went wrong</li> <li>• <strong>Clear failure mode:</strong> Specific way the AI system went wrong</li>
<li>• <strong>Tractatus relevance:</strong> Shows how framework boundaries could have helped</li> <li>• <strong>Tractatus relevance:</strong> Shows how framework boundaries could have helped</li>
@ -183,7 +186,7 @@
<label for="case-evidence" class="form-label"> <label for="case-evidence" class="form-label">
Evidence/Sources Evidence/Sources
</label> </label>
<textarea id="case-evidence" name="case_study.evidence" class="form-textarea" style="min-height: 100px;"></textarea> <textarea id="case-evidence" name="case_study.evidence" class="form-textarea"></textarea>
<p class="form-help"> <p class="form-help">
Links to documentation, screenshots, articles, or other evidence (one per line) Links to documentation, screenshots, articles, or other evidence (one per line)
</p> </p>
@ -191,7 +194,7 @@
<!-- Submit Button --> <!-- Submit Button -->
<div class="mt-8"> <div class="mt-8">
<button type="submit" id="submit-button" class="w-full bg-blue-600 text-white px-6 py-3 rounded-lg font-semibold hover:bg-blue-700 transition"> <button type="submit" id="submit-button" class="w-full text-white px-6 py-3 rounded-lg font-semibold transition-all duration-200 hover:shadow-lg hover:-translate-y-0.5" style="background: linear-gradient(135deg, #0ea5e9 0%, #0284c7 100%);">
Submit Case Study Submit Case Study
</button> </button>
<p class="form-help mt-3 text-center"> <p class="form-help mt-3 text-center">
@ -206,141 +209,18 @@
<div class="mt-6 text-sm text-gray-600 text-center"> <div class="mt-6 text-sm text-gray-600 text-center">
<p> <p>
Your submission is handled according to our Your submission is handled according to our
<a href="/about/values.html" class="text-blue-600 hover:text-blue-700">privacy principles</a>. <a href="/about/values.html" class="hover:underline transition-colors" style="color: var(--tractatus-core-end);">privacy principles</a>.
All case studies undergo human review before publication. All case studies undergo human review before publication.
</p> </p>
</div> </div>
</div> </main>
<!-- Footer --> <!-- Footer -->
<footer class="bg-gray-900 text-gray-400 py-12 mt-16" role="contentinfo"> <script src="/js/case-submission.js"></script>
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="grid grid-cols-1 md:grid-cols-5 gap-8">
<div>
<h3 class="text-white font-semibold mb-4">Tractatus Framework</h3>
<p class="text-sm">
Reference implementation of architectural AI safety constraints—structural governance validated in single-project deployment.
</p>
</div>
<div>
<h3 class="text-white font-semibold mb-4">Resources</h3>
<ul class="space-y-2 text-sm">
<li><a href="/docs.html" class="hover:text-white transition">Documentation</a></li>
<li><a href="/demos/tractatus-demo.html" class="hover:text-white transition">Interactive Demos</a></li>
<li><a href="/researcher.html" class="hover:text-white transition">For Researchers</a></li>
<li><a href="/implementer.html" class="hover:text-white transition">For Implementers</a></li>
<li><a href="/leader.html" class="hover:text-white transition">For Leaders</a></li>
<li><a href="/about.html" class="hover:text-white transition">About & Values</a></li>
</ul>
</div>
<div>
<h3 class="text-white font-semibold mb-4">Community</h3>
<ul class="space-y-2 text-sm">
<li><a href="/media-inquiry.html" class="hover:text-white transition">Media Inquiries</a></li>
<li><a href="/case-submission.html" class="hover:text-white transition">Submit Case Study</a></li>
<li><a href="/blog.html" class="hover:text-white transition">Blog</a></li>
<li><a href="/#newsletter" class="hover:text-white transition">Newsletter</a></li>
</ul>
</div>
<div>
<h3 class="text-white font-semibold mb-4">Support This Work</h3>
<ul class="space-y-2 text-sm">
<li><a href="/koha.html" class="hover:text-white transition">Make a Donation</a></li>
<li><a href="/koha/transparency.html" class="hover:text-white transition">Transparency Dashboard</a></li>
</ul>
</div>
<div>
<h3 class="text-white font-semibold mb-4">Acknowledgment</h3>
<p class="text-sm">
This framework acknowledges Te Tiriti o Waitangi and indigenous leadership in digital sovereignty.
Built with respect for CARE Principles and Māori data sovereignty.
</p>
</div>
</div>
<div class="mt-8 pt-8 border-t border-gray-800 text-center text-sm space-y-2">
<p class="text-gray-300">Safety Through Structure, Not Aspiration | Built with <a href="https://claude.ai/claude-code" class="text-blue-400 hover:text-blue-300 transition" target="_blank" rel="noopener">Claude Code</a></p>
<p>© 2025 John G Stroh. Licensed under <a href="https://www.apache.org/licenses/LICENSE-2.0" class="text-blue-400 hover:text-blue-300 transition" target="_blank" rel="noopener">Apache License 2.0</a>.</p>
</div>
</div>
</footer>
<script> <!-- Footer Component -->
const form = document.getElementById('case-submission-form'); <script src="/js/components/footer.js"></script>
const submitButton = document.getElementById('submit-button');
const successMessage = document.getElementById('success-message');
const errorMessage = document.getElementById('error-message');
form.addEventListener('submit', async (e) => {
e.preventDefault();
// Hide previous messages
successMessage.style.display = 'none';
errorMessage.style.display = 'none';
// Disable submit button
submitButton.disabled = true;
submitButton.textContent = 'Submitting...';
// Collect form data
const evidenceText = document.getElementById('case-evidence').value;
const evidence = evidenceText
? evidenceText.split('\n').filter(line => line.trim())
: [];
const formData = {
submitter: {
name: document.getElementById('submitter-name').value,
email: document.getElementById('submitter-email').value,
organization: document.getElementById('submitter-organization').value || null,
public: document.getElementById('submitter-public').checked
},
case_study: {
title: document.getElementById('case-title').value,
description: document.getElementById('case-description').value,
failure_mode: document.getElementById('case-failure-mode').value,
tractatus_applicability: document.getElementById('case-tractatus').value,
evidence: evidence,
attachments: []
}
};
try {
const response = await fetch('/api/cases/submit', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify(formData)
});
const data = await response.json();
if (response.ok) {
// Success
successMessage.textContent = data.message || 'Thank you for your submission. We will review it shortly.';
successMessage.style.display = 'block';
form.reset();
window.scrollTo({ top: 0, behavior: 'smooth' });
} else {
// Error
errorMessage.textContent = data.message || 'An error occurred. Please try again.';
errorMessage.style.display = 'block';
window.scrollTo({ top: 0, behavior: 'smooth' });
}
} catch (error) {
console.error('Submit error:', error);
errorMessage.textContent = 'Network error. Please check your connection and try again.';
errorMessage.style.display = 'block';
window.scrollTo({ top: 0, behavior: 'smooth' });
} finally {
// Re-enable submit button
submitButton.disabled = false;
submitButton.textContent = 'Submit Case Study';
}
});
</script>
</body> </body>
</html> </html>

58
public/check-version.html
View file

@ -40,62 +40,6 @@
</ol> </ol>
</div> </div>
<script> <script src="/js/check-version.js"></script>
// Get the version from the main docs page
fetch('/docs.html?' + Date.now())
.then(r => r.text())
.then(html => {
const match = html.match(/docs-app\.js\?v=(\d+)/);
const version = match ? match[1] : 'NOT FOUND';
const expected = '1759828916';
const correct = version === expected;
// Now fetch the actual JavaScript
return fetch('/js/docs-app.js?v=' + version + '&' + Date.now())
.then(r => r.text())
.then(js => {
const hasNewHandler = js.includes('window.location.href=');
const hasOldHandler = js.includes('event.stopPropagation()');
let html = '';
if (correct && hasNewHandler) {
html = `
<div class="box good">
<h2>✅ Version is CORRECT</h2>
<p>JavaScript version: <code>${version}</code></p>
<p>Handler includes: <code>window.location.href</code></p>
<p><strong>Downloads should work now!</strong></p>
</div>
`;
} else {
html = `
<div class="box bad">
<h2>❌ Version is WRONG</h2>
<p>JavaScript version loaded: <code>${version}</code></p>
<p>Expected: <code>${expected}</code></p>
<p>Has new handler: ${hasNewHandler ? '✅ YES' : '❌ NO'}</p>
<p><strong>Your browser is serving cached files!</strong></p>
</div>
<div class="box">
<h3>Cached JavaScript Snippet:</h3>
<pre>${js.substring(js.indexOf('onclick='), js.indexOf('onclick=') + 200).replace(/</g, '&lt;').replace(/>/g, '&gt;')}</pre>
</div>
`;
}
document.getElementById('results').innerHTML = html;
});
})
.catch(err => {
document.getElementById('results').innerHTML = `
<div class="box bad">
<h2>Error</h2>
<p>${err.message}</p>
</div>
`;
});
</script>
</body> </body>
</html> </html>

5
public/demos/27027-demo.html
View file

@ -4,8 +4,9 @@
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>The 27027 Incident - Tractatus Framework</title> <title>The 27027 Incident - Tractatus Framework</title>
<link rel="icon" type="image/svg+xml" href="/favicon.svg"> <link rel="icon" type="image/svg+xml" href="/favicon-new.svg">
<link rel="stylesheet" href="/css/tailwind.css?v=1759833751"> <link rel="stylesheet" href="/css/tailwind.css?v=1759833751">
<link rel="stylesheet" href="/css/tractatus-theme.min.css">
<style> <style>
@keyframes fadeIn { @keyframes fadeIn {
from { opacity: 0; transform: translateY(10px); } from { opacity: 0; transform: translateY(10px); }
@ -75,7 +76,7 @@
<span id="progress-text">0 / 8</span> <span id="progress-text">0 / 8</span>
</div> </div>
<div class="w-full bg-gray-200 rounded-full h-2"> <div class="w-full bg-gray-200 rounded-full h-2">
<div id="progress-bar" class="bg-blue-600 h-2 rounded-full transition-all duration-300" style="width: 0%"></div> <div id="progress-bar" class="bg-blue-600 h-2 rounded-full transition-all duration-300"></div>
</div> </div>
</div> </div>

1
public/demos/boundary-demo.html
View file

@ -5,6 +5,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Boundary Enforcement Simulator - Tractatus Framework</title> <title>Boundary Enforcement Simulator - Tractatus Framework</title>
<link rel="stylesheet" href="/css/tailwind.css?v=1759833751"> <link rel="stylesheet" href="/css/tailwind.css?v=1759833751">
<link rel="stylesheet" href="/css/tractatus-theme.min.css">
</head> </head>
<body class="bg-gray-50"> <body class="bg-gray-50">

1
public/demos/classification-demo.html
View file

@ -5,6 +5,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Instruction Classification Demo - Tractatus Framework</title> <title>Instruction Classification Demo - Tractatus Framework</title>
<link rel="stylesheet" href="/css/tailwind.css?v=1759833751"> <link rel="stylesheet" href="/css/tailwind.css?v=1759833751">
<link rel="stylesheet" href="/css/tractatus-theme.min.css">
<style> <style>
.quadrant-badge { .quadrant-badge {
@apply inline-block px-3 py-1 rounded-full text-sm font-semibold; @apply inline-block px-3 py-1 rounded-full text-sm font-semibold;

3
public/demos/tractatus-demo.html
View file

@ -5,6 +5,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Tractatus Framework Interactive Demo | AI Safety Architecture</title> <title>Tractatus Framework Interactive Demo | AI Safety Architecture</title>
<link rel="stylesheet" href="/css/tailwind.css?v=1759833751"> <link rel="stylesheet" href="/css/tailwind.css?v=1759833751">
<link rel="stylesheet" href="/css/tractatus-theme.min.css">
<style> <style>
.fade-in { animation: fadeIn 0.5s; } .fade-in { animation: fadeIn 0.5s; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } @keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
@ -345,7 +346,7 @@
<span id="pressure-percentage" class="font-medium">15%</span> <span id="pressure-percentage" class="font-medium">15%</span>
</div> </div>
<div class="w-full bg-gray-200 rounded-full h-3"> <div class="w-full bg-gray-200 rounded-full h-3">
<div id="pressure-bar" class="bg-green-500 h-3 rounded-full transition-all duration-300" style="width: 15%"></div> <div id="pressure-bar" class="bg-green-500 h-3 rounded-full transition-all duration-300"></div>
</div> </div>
</div> </div>
<div id="pressure-recommendations" class="text-sm text-gray-600"> <div id="pressure-recommendations" class="text-sm text-gray-600">

1
public/docs-viewer.html
View file

@ -5,6 +5,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Documentation - Tractatus Framework</title> <title>Documentation - Tractatus Framework</title>
<link rel="stylesheet" href="/css/tailwind.css?v=0.1.0.1760254958072"> <link rel="stylesheet" href="/css/tailwind.css?v=0.1.0.1760254958072">
<link rel="stylesheet" href="/css/tractatus-theme.min.css">
<style> <style>
/* Prose styling for document content */ /* Prose styling for document content */
.prose h1 { @apply text-3xl font-bold mt-8 mb-4 text-gray-900; } .prose h1 { @apply text-3xl font-bold mt-8 mb-4 text-gray-900; }

66
public/faq.html
View file

@ -5,7 +5,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Frequently Asked Questions | Tractatus AI Safety Framework</title> <title>Frequently Asked Questions | Tractatus AI Safety Framework</title>
<meta name="description" content="Common questions about Tractatus framework: implementation, performance, relationship to Claude Code, and governance architecture."> <meta name="description" content="Common questions about Tractatus framework: implementation, performance, relationship to Claude Code, and governance architecture.">
<link rel="icon" type="image/svg+xml" href="/favicon.svg"> <link rel="icon" type="image/svg+xml" href="/favicon-new.svg">
<!-- PWA Manifest --> <!-- PWA Manifest -->
<link rel="manifest" href="/manifest.json"> <link rel="manifest" href="/manifest.json">
@ -16,9 +16,11 @@
<meta name="apple-mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="default"> <meta name="apple-mobile-web-app-status-bar-style" content="default">
<meta name="apple-mobile-web-app-title" content="Tractatus"> <meta name="apple-mobile-web-app-title" content="Tractatus">
<link rel="apple-touch-icon" href="/images/tractatus-icon.svg"> <link rel="apple-touch-icon" href="/images/tractatus-icon-new.svg">
<link rel="stylesheet" href="/css/fonts.css">
<link rel="stylesheet" href="/css/tailwind.css?v=0.1.0.1760254958072"> <link rel="stylesheet" href="/css/tailwind.css?v=0.1.0.1760254958072">
<link rel="stylesheet" href="/css/tractatus-theme.min.css">
<!-- Syntax highlighting for code blocks --> <!-- Syntax highlighting for code blocks -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/github-dark.min.css"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/github-dark.min.css">
@ -442,7 +444,7 @@
</svg> </svg>
<span data-i18n="still_have_questions.submit_case_study_btn">Submit a Case Study</span> <span data-i18n="still_have_questions.submit_case_study_btn">Submit a Case Study</span>
</a> </a>
<a href="https://github.com/AgenticGovernance/tractatus-framework/issues" target="_blank" rel="noopener noreferrer" class="bg-blue-700 text-white px-6 py-3 rounded-lg font-semibold hover:bg-blue-800 transition border-2 border-white inline-flex items-center gap-2"> <a href="https://github.com/AgenticGovernance/tractatus/issues" target="_blank" rel="noopener noreferrer" class="bg-blue-700 text-white px-6 py-3 rounded-lg font-semibold hover:bg-blue-800 transition border-2 border-white inline-flex items-center gap-2">
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24"> <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
<path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.430.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"/> <path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.430.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"/>
</svg> </svg>
@ -460,57 +462,6 @@
</main> </main>
<!-- Footer --> <!-- Footer -->
<footer class="bg-gray-900 text-gray-400 py-12 mt-16" role="contentinfo">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="grid grid-cols-1 md:grid-cols-5 gap-8">
<div>
<h3 class="text-white font-semibold mb-4">Tractatus Framework</h3>
<p class="text-sm">
Reference implementation of architectural AI safety constraints—structural governance validated in single-project deployment.
</p>
</div>
<div>
<h3 class="text-white font-semibold mb-4">Resources</h3>
<ul class="space-y-2 text-sm">
<li><a href="/docs.html" class="hover:text-white transition">Documentation</a></li>
<li><a href="/demos/tractatus-demo.html" class="hover:text-white transition">Interactive Demos</a></li>
<li><a href="/researcher.html" class="hover:text-white transition">For Researchers</a></li>
<li><a href="/implementer.html" class="hover:text-white transition">For Implementers</a></li>
<li><a href="/leader.html" class="hover:text-white transition">For Leaders</a></li>
<li><a href="/about.html" class="hover:text-white transition">About & Values</a></li>
</ul>
</div>
<div>
<h3 class="text-white font-semibold mb-4">Community</h3>
<ul class="space-y-2 text-sm">
<li><a href="/media-inquiry.html" class="hover:text-white transition">Media Inquiries</a></li>
<li><a href="/case-submission.html" class="hover:text-white transition">Submit Case Study</a></li>
<li><a href="/blog.html" class="hover:text-white transition">Blog</a></li>
<li><a href="/#newsletter" class="hover:text-white transition">Newsletter</a></li>
</ul>
</div>
<div>
<h3 class="text-white font-semibold mb-4">Support This Work</h3>
<ul class="space-y-2 text-sm">
<li><a href="/koha.html" class="hover:text-white transition">Make a Donation</a></li>
<li><a href="/koha/transparency.html" class="hover:text-white transition">Transparency Dashboard</a></li>
</ul>
</div>
<div>
<h3 class="text-white font-semibold mb-4">Acknowledgment</h3>
<p class="text-sm">
This framework acknowledges Te Tiriti o Waitangi and indigenous leadership in digital sovereignty.
Built with respect for CARE Principles and Māori data sovereignty.
</p>
</div>
</div>
<div class="mt-8 pt-8 border-t border-gray-800 text-center text-sm space-y-2">
<p class="text-gray-300">Safety Through Structure, Not Aspiration | Built with <a href="https://claude.ai/claude-code" class="text-blue-400 hover:text-blue-300 transition" target="_blank" rel="noopener">Claude Code</a></p>
<p>© 2025 John G Stroh. Licensed under <a href="https://www.apache.org/licenses/LICENSE-2.0" class="text-blue-400 hover:text-blue-300 transition" target="_blank" rel="noopener">Apache License 2.0</a>.</p>
</div>
</div>
</footer>
<!-- Search Modal --> <!-- Search Modal -->
<div id="search-modal" class="fixed inset-0 bg-black bg-opacity-50 z-50 hidden items-center justify-center p-4"> <div id="search-modal" class="fixed inset-0 bg-black bg-opacity-50 z-50 hidden items-center justify-center p-4">
<div class="bg-white rounded-lg shadow-2xl max-w-4xl w-full h-[85vh] flex flex-col"> <div class="bg-white rounded-lg shadow-2xl max-w-4xl w-full h-[85vh] flex flex-col">
@ -679,13 +630,16 @@
</div> </div>
<!-- Internationalization --> <!-- Internationalization -->
<script src="/js/i18n-simple.js?v=0.1.0.1760643941"></script> <script src="/js/i18n-simple.js?v=1760818106"></script>
<script src="/js/components/language-selector.js?v=0.1.0.1760643941"></script> <script src="/js/components/language-selector.js?v=1760818106"></script>
<!-- Version Management & PWA --> <!-- Version Management & PWA -->
<script src="/js/version-manager.js"></script> <script src="/js/version-manager.js"></script>
<script src="/js/faq.js?v=1760430000"></script> <script src="/js/faq.js?v=1760430000"></script>
<!-- Footer Component -->
<script src="/js/components/footer.js"></script>
</body> </body>
</html> </html>

78
public/implementer.html
View file

@ -14,9 +14,12 @@
<meta name="apple-mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="default"> <meta name="apple-mobile-web-app-status-bar-style" content="default">
<meta name="apple-mobile-web-app-title" content="Tractatus"> <meta name="apple-mobile-web-app-title" content="Tractatus">
<link rel="apple-touch-icon" href="/images/tractatus-icon.svg"> <link rel="apple-touch-icon" href="/images/tractatus-icon-new.svg">
<link rel="icon" type="image/svg+xml" href="/favicon-new.svg">
<link rel="stylesheet" href="/css/fonts.css">
<link rel="stylesheet" href="/css/tailwind.css?v=0.1.0.1760254958072"> <link rel="stylesheet" href="/css/tailwind.css?v=0.1.0.1760254958072">
<link rel="stylesheet" href="/css/tractatus-theme.min.css?v=1760816800">
<style> <style>
/* Accessibility: Skip link */ /* Accessibility: Skip link */
.skip-link { position: absolute; left: -9999px; top: 0; } .skip-link { position: absolute; left: -9999px; top: 0; }
@ -39,6 +42,17 @@
<!-- Navigation (injected by navbar.js) --> <!-- Navigation (injected by navbar.js) -->
<script src="/js/components/navbar.js?v=0.1.0.1760254958072"></script> <script src="/js/components/navbar.js?v=0.1.0.1760254958072"></script>
<!-- Breadcrumb Navigation -->
<nav class="bg-gray-50 border-b border-gray-200 py-3" aria-label="Breadcrumb">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<ol class="flex items-center space-x-2 text-sm">
<li><a href="/" class="hover:underline transition-colors" style="color: var(--tractatus-core-end);">Home</a></li>
<li class="text-gray-400">/</li>
<li class="text-gray-900 font-medium" aria-current="page">Implementer</li>
</ol>
</div>
</nav>
<!-- Hero Section --> <!-- Hero Section -->
<div class="bg-gradient-to-br from-blue-50 to-indigo-50 py-20"> <div class="bg-gradient-to-br from-blue-50 to-indigo-50 py-20">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
@ -116,7 +130,7 @@
<span class="text-gray-700 text-sm">Troubleshooting guidance</span> <span class="text-gray-700 text-sm">Troubleshooting guidance</span>
</div> </div>
</div> </div>
<a href="https://github.com/AgenticGovernance/tractatus-framework/tree/main/deployment-guide" <a href="https://github.com/AgenticGovernance/tractatus/tree/main/deployment-guide"
target="_blank" target="_blank"
rel="noopener noreferrer" rel="noopener noreferrer"
class="inline-flex items-center bg-blue-600 text-white px-6 py-3 rounded-lg font-semibold hover:bg-blue-700 transition shadow-lg"> class="inline-flex items-center bg-blue-600 text-white px-6 py-3 rounded-lg font-semibold hover:bg-blue-700 transition shadow-lg">
@ -423,7 +437,7 @@
<div class="bg-blue-50 border-l-4 border-blue-500 p-4 mb-8 rounded-r-lg"> <div class="bg-blue-50 border-l-4 border-blue-500 p-4 mb-8 rounded-r-lg">
<p class="text-sm text-blue-900 font-medium mb-2">⚠️ Note: Reference Implementation</p> <p class="text-sm text-blue-900 font-medium mb-2">⚠️ Note: Reference Implementation</p>
<p class="text-sm text-blue-800"> <p class="text-sm text-blue-800">
The code examples below show conceptual API design. The npm package <code class="bg-blue-100 px-1 py-0.5 rounded">@tractatus/framework</code> is not yet published. To implement these patterns, adapt the governance services from this project's <a href="https://github.com/AgenticGovernance/tractatus-framework" class="underline font-medium hover:text-blue-900">source code</a>. The code examples below show conceptual API design. The npm package <code class="bg-blue-100 px-1 py-0.5 rounded">@tractatus/framework</code> is not yet published. To implement these patterns, adapt the governance services from this project's <a href="https://github.com/AgenticGovernance/tractatus" class="underline font-medium hover:text-blue-900">source code</a>.
</p> </p>
</div> </div>
@ -727,63 +741,15 @@ if (pressure.level === 'CRITICAL') {
</div> </div>
<!-- Footer --> <!-- Footer -->
<footer class="bg-gray-900 text-gray-400 py-12 mt-16" role="contentinfo">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="grid grid-cols-1 md:grid-cols-5 gap-8">
<div>
<h3 class="text-white font-semibold mb-4">Tractatus Framework</h3>
<p class="text-sm">
Reference implementation of architectural AI safety constraints—structural governance validated in single-project deployment.
</p>
</div>
<div>
<h3 class="text-white font-semibold mb-4">Resources</h3>
<ul class="space-y-2 text-sm">
<li><a href="/docs.html" class="hover:text-white transition">Documentation</a></li>
<li><a href="/demos/tractatus-demo.html" class="hover:text-white transition">Interactive Demos</a></li>
<li><a href="/researcher.html" class="hover:text-white transition">For Researchers</a></li>
<li><a href="/implementer.html" class="hover:text-white transition">For Implementers</a></li>
<li><a href="/leader.html" class="hover:text-white transition">For Leaders</a></li>
<li><a href="/about.html" class="hover:text-white transition">About & Values</a></li>
</ul>
</div>
<div>
<h3 class="text-white font-semibold mb-4">Community</h3>
<ul class="space-y-2 text-sm">
<li><a href="/media-inquiry.html" class="hover:text-white transition">Media Inquiries</a></li>
<li><a href="/case-submission.html" class="hover:text-white transition">Submit Case Study</a></li>
<li><a href="/blog.html" class="hover:text-white transition">Blog</a></li>
<li><a href="/#newsletter" class="hover:text-white transition">Newsletter</a></li>
</ul>
</div>
<div>
<h3 class="text-white font-semibold mb-4">Support This Work</h3>
<ul class="space-y-2 text-sm">
<li><a href="/koha.html" class="hover:text-white transition">Make a Donation</a></li>
<li><a href="/koha/transparency.html" class="hover:text-white transition">Transparency Dashboard</a></li>
</ul>
</div>
<div>
<h3 class="text-white font-semibold mb-4">Acknowledgment</h3>
<p class="text-sm">
This framework acknowledges Te Tiriti o Waitangi and indigenous leadership in digital sovereignty.
Built with respect for CARE Principles and Māori data sovereignty.
</p>
</div>
</div>
<div class="mt-8 pt-8 border-t border-gray-800 text-center text-sm space-y-2">
<p class="text-gray-300">Safety Through Structure, Not Aspiration | Built with <a href="https://claude.ai/claude-code" class="text-blue-400 hover:text-blue-300 transition" target="_blank" rel="noopener">Claude Code</a></p>
<p>© 2025 John G Stroh. Licensed under <a href="https://www.apache.org/licenses/LICENSE-2.0" class="text-blue-400 hover:text-blue-300 transition" target="_blank" rel="noopener">Apache License 2.0</a>.</p>
</div>
</div>
</footer>
<!-- Internationalization --> <!-- Internationalization -->
<script src="/js/i18n-simple.js?v=0.1.0.1760643941"></script> <script src="/js/i18n-simple.js?v=1760818106"></script>
<script src="/js/components/language-selector.js?v=0.1.0.1760643941"></script> <script src="/js/components/language-selector.js?v=1760818106"></script>
<!-- Version Management & PWA --> <!-- Version Management & PWA -->
<script src="/js/version-manager.js"></script> <script src="/js/version-manager.js"></script>
<!-- Footer Component -->
<script src="/js/components/footer.js"></script>
</body> </body>
</html> </html>

255
public/index.html
View file

@ -10,14 +10,20 @@
<link rel="manifest" href="/manifest.json"> <link rel="manifest" href="/manifest.json">
<!-- PWA Meta Tags --> <!-- PWA Meta Tags -->
<meta name="theme-color" content="#3b82f6"> <meta name="theme-color" content="#0ea5e9">
<meta name="apple-mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-capable" content="yes">
<meta name="mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="default"> <meta name="apple-mobile-web-app-status-bar-style" content="default">
<meta name="apple-mobile-web-app-title" content="Tractatus"> <meta name="apple-mobile-web-app-title" content="Tractatus">
<link rel="apple-touch-icon" href="/images/tractatus-icon.svg"> <link rel="apple-touch-icon" href="/images/tractatus-icon-new.svg">
<link rel="icon" type="image/svg+xml" href="/favicon-new.svg">
<!-- Fonts -->
<link rel="stylesheet" href="/css/fonts.css">
<link rel="icon" type="image/svg+xml" href="/favicon.svg">
<link rel="stylesheet" href="/css/tailwind.css?v=0.1.0.1760254958072"> <link rel="stylesheet" href="/css/tailwind.css?v=0.1.0.1760254958072">
<link rel="stylesheet" href="/css/tractatus-theme.min.css?v=1760816800">
<style> <style>
.gradient-text { background: linear-gradient(120deg, #3b82f6 0%, #8b5cf6 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .gradient-text { background: linear-gradient(120deg, #3b82f6 0%, #8b5cf6 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
.hover-lift { transition: transform 0.2s; } .hover-lift { transition: transform 0.2s; }
@ -40,19 +46,35 @@
<a href="#main-content" class="skip-link">Skip to main content</a> <a href="#main-content" class="skip-link">Skip to main content</a>
<!-- Navigation (injected by navbar.js) --> <!-- Navigation (injected by navbar.js) -->
<div id="navbar-placeholder" style="min-height: 64px;"></div>
<script src="/js/components/navbar.js?v=0.1.0.1760254958072"></script> <script src="/js/components/navbar.js?v=0.1.0.1760254958072"></script>
<!-- Hero Section --> <!-- Hero Section -->
<header role="banner"> <header role="banner">
<section class="bg-gradient-to-br from-blue-600 via-blue-700 to-purple-700 text-white"> <section class="text-white" style="background: linear-gradient(135deg, #64ffda 0%, #448aff 50%, #0ea5e9 100%);">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-20"> <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-20">
<div class="text-center"> <div class="text-center">
<h1 class="text-5xl md:text-6xl font-bold mb-6" data-i18n="hero.title">Tractatus AI Safety Framework</h1> <!-- Animated Brand Logo -->
<p class="text-xl md:text-2xl text-blue-100 mb-8 max-w-4xl mx-auto" data-i18n="hero.subtitle">Structural constraints that require AI systems to preserve human agency<br>for values decisions—tested on Claude Code</p> <div class="flex justify-center mb-8">
<img src="/images/tractatus-icon-animated.svg"
alt="Tractatus Framework - Six Governance Services"
width="256" height="256" class="w-48 h-48 md:w-64 md:h-64"
loading="eager">
</div>
<h1 class="text-5xl md:text-6xl font-bold mb-6 tracking-tight" style="text-shadow: 0 2px 4px rgba(0,0,0,0.1);" data-i18n="hero.title">Tractatus AI Safety Framework</h1>
<p class="text-xl md:text-2xl mb-8 max-w-4xl mx-auto" style="text-shadow: 0 1px 2px rgba(0,0,0,0.1);" data-i18n="hero.subtitle">Structural constraints that require AI systems to preserve human agency<br>for values decisions—tested on Claude Code</p>
<div class="flex flex-col sm:flex-row gap-4 justify-center"> <div class="flex flex-col sm:flex-row gap-4 justify-center">
<a href="/architecture.html" class="inline-block bg-white text-blue-700 px-8 py-3 rounded-lg font-semibold hover:bg-blue-50 transition" data-i18n="hero.cta_architecture">System Architecture</a> <a href="/architecture.html"
<a href="/docs.html" class="inline-block bg-blue-800 text-white px-8 py-3 rounded-lg font-semibold hover:bg-blue-900 transition" data-i18n="hero.cta_docs">Read Documentation</a> class="inline-block px-8 py-3 rounded-lg font-semibold transition-all duration-300 bg-white text-blue-700 hover:shadow-lg hover:-translate-y-1"
<a href="/faq.html" class="inline-block bg-purple-700 text-white px-8 py-3 rounded-lg font-semibold hover:bg-purple-800 transition" data-i18n="hero.cta_faq">FAQ</a> data-i18n="hero.cta_architecture">System Architecture</a>
<a href="/docs.html"
class="btn-base btn-primary inline-block"
data-i18n="hero.cta_docs">Read Documentation</a>
<a href="/faq.html"
class="btn-base btn-validator inline-block"
data-i18n="hero.cta_faq">FAQ</a>
</div> </div>
</div> </div>
</div> </div>
@ -83,131 +105,151 @@ We recognize this is one small step in addressing AI safety challenges. Explore
<div class="grid grid-cols-1 md:grid-cols-3 gap-8"> <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
<!-- Researcher Path --> <!-- Researcher Path → CrossReferenceValidator (Purple) -->
<div class="bg-white rounded-xl shadow-lg border border-gray-200 overflow-visible hover-lift relative group"> <a href="/researcher.html" class="block bg-white rounded-xl shadow-lg border-l-4 overflow-visible hover:shadow-2xl transition-all duration-300 hover:-translate-y-1 relative group animate-fade-in-scale animate-delay-100" style="border-left-color: var(--service-validator-light);">
<!-- Tooltip --> <!-- Tooltip -->
<div class="absolute bottom-full mb-4 left-1/2 transform -translate-x-1/2 bg-gray-900 text-white text-sm rounded-lg px-4 py-2 opacity-0 group-hover:opacity-100 transition-opacity duration-200 pointer-events-none z-10 w-64 text-center shadow-xl"> <div class="absolute bottom-full mb-4 left-1/2 transform -translate-x-1/2 bg-gray-900 text-white text-sm rounded-lg px-4 py-2 opacity-0 group-hover:opacity-100 transition-opacity duration-200 pointer-events-none z-10 w-64 text-center shadow-xl">
<span data-i18n="paths.researcher.tooltip">For AI safety researchers, academics, and scientists investigating LLM failure modes and governance architectures</span> <span data-i18n="paths.researcher.tooltip">For AI safety researchers, academics, and scientists investigating LLM failure modes and governance architectures</span>
<div class="absolute top-full left-1/2 transform -translate-x-1/2 -translate-y-1/2 rotate-45 w-2 h-2 bg-gray-900"></div> <div class="absolute top-full left-1/2 transform -translate-x-1/2 -translate-y-1/2 rotate-45 w-2 h-2 bg-gray-900"></div>
</div> </div>
<div class="bg-gradient-to-r from-blue-500 to-blue-600 p-6">
<svg aria-hidden="true" class="w-12 h-12 text-white mb-4" 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>
<h3 class="text-2xl font-bold text-white" data-i18n="paths.researcher.title">Researcher</h3>
<p class="text-blue-100 mt-2" data-i18n="paths.researcher.subtitle">Academic & technical depth</p>
</div>
<div class="p-6"> <div class="p-6">
<div class="flex items-center space-x-4 mb-4">
<div class="w-14 h-14 rounded-xl flex items-center justify-center text-2xl" style="background: var(--gradient-btn-validator);">
🔬
</div>
<div>
<h3 class="text-2xl font-bold text-gray-900 group-hover:text-purple-600 transition-colors" data-i18n="paths.researcher.title">Researcher</h3>
<p class="text-gray-600 text-sm" data-i18n="paths.researcher.subtitle">Academic & technical depth</p>
</div>
</div>
<p class="text-gray-700 mb-6" data-i18n="paths.researcher.description"> <p class="text-gray-700 mb-6" data-i18n="paths.researcher.description">
Explore the theoretical foundations, architectural constraints, and scholarly context of the Tractatus framework. Explore the theoretical foundations, architectural constraints, and scholarly context of the Tractatus framework.
</p> </p>
<ul class="space-y-3 mb-6 text-sm"> <ul class="space-y-3 mb-6 text-sm">
<li class="flex items-start"> <li class="flex items-start">
<svg aria-hidden="true" class="w-5 h-5 text-blue-600 mr-2 mt-0.5" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"/></svg> <svg aria-hidden="true" class="w-5 h-5 mr-2 mt-0.5 flex-shrink-0" style="color: var(--service-validator-light);" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"/></svg>
<span class="text-gray-700" data-i18n="paths.researcher.features.0">Technical specifications & proofs</span> <span class="text-gray-700" data-i18n="paths.researcher.features.0">Technical specifications & proofs</span>
</li> </li>
<li class="flex items-start"> <li class="flex items-start">
<svg aria-hidden="true" class="w-5 h-5 text-blue-600 mr-2 mt-0.5" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"/></svg> <svg aria-hidden="true" class="w-5 h-5 mr-2 mt-0.5 flex-shrink-0" style="color: var(--service-validator-light);" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"/></svg>
<span class="text-gray-700" data-i18n="paths.researcher.features.1">Academic research review</span> <span class="text-gray-700" data-i18n="paths.researcher.features.1">Academic research review</span>
</li> </li>
<li class="flex items-start"> <li class="flex items-start">
<svg aria-hidden="true" class="w-5 h-5 text-blue-600 mr-2 mt-0.5" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"/></svg> <svg aria-hidden="true" class="w-5 h-5 mr-2 mt-0.5 flex-shrink-0" style="color: var(--service-validator-light);" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"/></svg>
<span class="text-gray-700" data-i18n="paths.researcher.features.2">Failure mode analysis</span> <span class="text-gray-700" data-i18n="paths.researcher.features.2">Failure mode analysis</span>
</li> </li>
<li class="flex items-start"> <li class="flex items-start">
<svg aria-hidden="true" class="w-5 h-5 text-blue-600 mr-2 mt-0.5" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"/></svg> <svg aria-hidden="true" class="w-5 h-5 mr-2 mt-0.5 flex-shrink-0" style="color: var(--service-validator-light);" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"/></svg>
<span class="text-gray-700" data-i18n="paths.researcher.features.3">Mathematical foundations</span> <span class="text-gray-700" data-i18n="paths.researcher.features.3">Mathematical foundations</span>
</li> </li>
</ul> </ul>
<a href="/researcher.html" class="block w-full text-center bg-blue-600 text-white py-2 rounded-lg hover:bg-blue-700 transition font-medium" data-i18n="paths.researcher.cta">Explore Research
</a>
</div>
</div>
<!-- Implementer Path --> <div class="mt-6 pt-4 border-t border-gray-200">
<div class="bg-white rounded-xl shadow-lg border border-gray-200 overflow-visible hover-lift relative group"> <span class="font-semibold group-hover:underline" style="color: var(--service-validator-dark);" data-i18n="paths.researcher.cta">Explore Research →</span>
</div>
</div>
</a>
<!-- Implementer Path → InstructionPersistenceClassifier (Indigo) -->
<a href="/implementer.html" class="block bg-white rounded-xl shadow-lg border-l-4 overflow-visible hover:shadow-2xl transition-all duration-300 hover:-translate-y-1 relative group animate-fade-in-scale animate-delay-200" style="border-left-color: var(--service-instruction-light);">
<!-- Tooltip --> <!-- Tooltip -->
<div class="absolute bottom-full mb-4 left-1/2 transform -translate-x-1/2 bg-gray-900 text-white text-sm rounded-lg px-4 py-2 opacity-0 group-hover:opacity-100 transition-opacity duration-200 pointer-events-none z-10 w-64 text-center shadow-xl"> <div class="absolute bottom-full mb-4 left-1/2 transform -translate-x-1/2 bg-gray-900 text-white text-sm rounded-lg px-4 py-2 opacity-0 group-hover:opacity-100 transition-opacity duration-200 pointer-events-none z-10 w-64 text-center shadow-xl">
<span data-i18n="paths.implementer.tooltip">For software engineers, ML engineers, and technical teams building production AI systems</span> <span data-i18n="paths.implementer.tooltip">For software engineers, ML engineers, and technical teams building production AI systems</span>
<div class="absolute top-full left-1/2 transform -translate-x-1/2 -translate-y-1/2 rotate-45 w-2 h-2 bg-gray-900"></div> <div class="absolute top-full left-1/2 transform -translate-x-1/2 -translate-y-1/2 rotate-45 w-2 h-2 bg-gray-900"></div>
</div> </div>
<div class="bg-gradient-to-r from-purple-500 to-purple-600 p-6">
<svg aria-hidden="true" class="w-12 h-12 text-white mb-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 20l4-16m4 4l4 4-4 4M6 16l-4-4 4-4"/>
</svg>
<h3 class="text-2xl font-bold text-white" data-i18n="paths.implementer.title">Implementer</h3>
<p class="text-purple-100 mt-2" data-i18n="paths.implementer.subtitle">Code & integration guides</p>
</div>
<div class="p-6"> <div class="p-6">
<div class="flex items-center space-x-4 mb-4">
<div class="w-14 h-14 rounded-xl flex items-center justify-center text-2xl" style="background: var(--gradient-btn-instruction);">
⚙️
</div>
<div>
<h3 class="text-2xl font-bold text-gray-900 group-hover:text-indigo-600 transition-colors" data-i18n="paths.implementer.title">Implementer</h3>
<p class="text-gray-600 text-sm" data-i18n="paths.implementer.subtitle">Code & integration guides</p>
</div>
</div>
<p class="text-gray-700 mb-6" data-i18n="paths.implementer.description"> <p class="text-gray-700 mb-6" data-i18n="paths.implementer.description">
Get hands-on with implementation guides, API documentation, and reference code examples. Get hands-on with implementation guides, API documentation, and reference code examples.
</p> </p>
<ul class="space-y-3 mb-6 text-sm"> <ul class="space-y-3 mb-6 text-sm">
<li class="flex items-start"> <li class="flex items-start">
<svg aria-hidden="true" class="w-5 h-5 text-purple-600 mr-2 mt-0.5" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"/></svg> <svg aria-hidden="true" class="w-5 h-5 mr-2 mt-0.5 flex-shrink-0" style="color: var(--service-instruction-light);" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"/></svg>
<span class="text-gray-700" data-i18n="paths.implementer.features.0">Working code examples</span> <span class="text-gray-700" data-i18n="paths.implementer.features.0">Working code examples</span>
</li> </li>
<li class="flex items-start"> <li class="flex items-start">
<svg aria-hidden="true" class="w-5 h-5 text-purple-600 mr-2 mt-0.5" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"/></svg> <svg aria-hidden="true" class="w-5 h-5 mr-2 mt-0.5 flex-shrink-0" style="color: var(--service-instruction-light);" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"/></svg>
<span class="text-gray-700" data-i18n="paths.implementer.features.1">API integration patterns</span> <span class="text-gray-700" data-i18n="paths.implementer.features.1">API integration patterns</span>
</li> </li>
<li class="flex items-start"> <li class="flex items-start">
<svg aria-hidden="true" class="w-5 h-5 text-purple-600 mr-2 mt-0.5" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"/></svg> <svg aria-hidden="true" class="w-5 h-5 mr-2 mt-0.5 flex-shrink-0" style="color: var(--service-instruction-light);" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"/></svg>
<span class="text-gray-700" data-i18n="paths.implementer.features.2">Service architecture diagrams</span> <span class="text-gray-700" data-i18n="paths.implementer.features.2">Service architecture diagrams</span>
</li> </li>
<li class="flex items-start"> <li class="flex items-start">
<svg aria-hidden="true" class="w-5 h-5 text-purple-600 mr-2 mt-0.5" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"/></svg> <svg aria-hidden="true" class="w-5 h-5 mr-2 mt-0.5 flex-shrink-0" style="color: var(--service-instruction-light);" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"/></svg>
<span class="text-gray-700" data-i18n="paths.implementer.features.3">Deployment best practices</span> <span class="text-gray-700" data-i18n="paths.implementer.features.3">Deployment best practices</span>
</li> </li>
</ul> </ul>
<a href="/implementer.html" class="block w-full text-center bg-purple-600 text-white py-2 rounded-lg hover:bg-purple-700 transition font-medium" data-i18n="paths.implementer.cta">View Implementation Guide
</a>
</div>
</div>
<!-- Leader Path --> <div class="mt-6 pt-4 border-t border-gray-200">
<div class="bg-white rounded-xl shadow-lg border border-gray-200 overflow-visible hover-lift relative group"> <span class="font-semibold group-hover:underline" style="color: var(--service-instruction-dark);" data-i18n="paths.implementer.cta">View Implementation Guide →</span>
</div>
</div>
</a>
<!-- Leader Path → PluralisticDeliberationOrchestrator (Teal) -->
<a href="/leader.html" class="block bg-white rounded-xl shadow-lg border-l-4 overflow-visible hover:shadow-2xl transition-all duration-300 hover:-translate-y-1 relative group animate-fade-in-scale animate-delay-300" style="border-left-color: var(--service-deliberation-light);">
<!-- Tooltip --> <!-- Tooltip -->
<div class="absolute bottom-full mb-4 left-1/2 transform -translate-x-1/2 bg-gray-900 text-white text-sm rounded-lg px-4 py-2 opacity-0 group-hover:opacity-100 transition-opacity duration-200 pointer-events-none z-10 w-64 text-center shadow-xl"> <div class="absolute bottom-full mb-4 left-1/2 transform -translate-x-1/2 bg-gray-900 text-white text-sm rounded-lg px-4 py-2 opacity-0 group-hover:opacity-100 transition-opacity duration-200 pointer-events-none z-10 w-64 text-center shadow-xl">
<span data-i18n="paths.leader.tooltip">For AI executives, research directors, startup founders, and strategic decision makers setting AI safety policy</span> <span data-i18n="paths.leader.tooltip">For AI executives, research directors, startup founders, and strategic decision makers setting AI safety policy</span>
<div class="absolute top-full left-1/2 transform -translate-x-1/2 -translate-y-1/2 rotate-45 w-2 h-2 bg-gray-900"></div> <div class="absolute top-full left-1/2 transform -translate-x-1/2 -translate-y-1/2 rotate-45 w-2 h-2 bg-gray-900"></div>
</div> </div>
<div class="bg-gradient-to-r from-amber-500 to-orange-600 p-6">
<svg aria-hidden="true" class="w-12 h-12 text-white mb-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 20l-5.447-2.724A1 1 0 013 16.382V5.618a1 1 0 011.447-.894L9 7m0 13l6-3m-6 3V7m6 10l4.553 2.276A1 1 0 0021 18.382V7.618a1 1 0 00-.553-.894L15 4m0 13V4m0 0L9 7"/>
</svg>
<h3 class="text-2xl font-bold text-white" data-i18n="paths.leader.title">Leader</h3>
<p class="text-amber-100 mt-2" data-i18n="paths.leader.subtitle">Strategic AI Safety</p>
</div>
<div class="p-6"> <div class="p-6">
<div class="flex items-center space-x-4 mb-4">
<div class="w-14 h-14 rounded-xl flex items-center justify-center text-2xl" style="background: var(--gradient-btn-deliberation);">
💼
</div>
<div>
<h3 class="text-2xl font-bold text-gray-900 group-hover:text-teal-600 transition-colors" data-i18n="paths.leader.title">Leader</h3>
<p class="text-gray-600 text-sm" data-i18n="paths.leader.subtitle">Strategic AI Safety</p>
</div>
</div>
<p class="text-gray-700 mb-6" data-i18n="paths.leader.description"> <p class="text-gray-700 mb-6" data-i18n="paths.leader.description">
Navigate the business case, compliance requirements, and competitive advantages of structural AI safety. Navigate the business case, compliance requirements, and competitive advantages of structural AI safety.
</p> </p>
<ul class="space-y-3 mb-6 text-sm"> <ul class="space-y-3 mb-6 text-sm">
<li class="flex items-start"> <li class="flex items-start">
<svg aria-hidden="true" class="w-5 h-5 text-amber-600 mr-2 mt-0.5" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"/></svg> <svg aria-hidden="true" class="w-5 h-5 mr-2 mt-0.5 flex-shrink-0" style="color: var(--service-deliberation-light);" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"/></svg>
<span class="text-gray-700" data-i18n="paths.leader.features.0">Executive briefing & business case</span> <span class="text-gray-700" data-i18n="paths.leader.features.0">Executive briefing & business case</span>
</li> </li>
<li class="flex items-start"> <li class="flex items-start">
<svg aria-hidden="true" class="w-5 h-5 text-amber-600 mr-2 mt-0.5" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"/></svg> <svg aria-hidden="true" class="w-5 h-5 mr-2 mt-0.5 flex-shrink-0" style="color: var(--service-deliberation-light);" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"/></svg>
<span class="text-gray-700" data-i18n="paths.leader.features.1">Risk management & compliance (EU AI Act)</span> <span class="text-gray-700" data-i18n="paths.leader.features.1">Risk management & compliance (EU AI Act)</span>
</li> </li>
<li class="flex items-start"> <li class="flex items-start">
<svg aria-hidden="true" class="w-5 h-5 text-amber-600 mr-2 mt-0.5" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"/></svg> <svg aria-hidden="true" class="w-5 h-5 mr-2 mt-0.5 flex-shrink-0" style="color: var(--service-deliberation-light);" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"/></svg>
<span class="text-gray-700" data-i18n="paths.leader.features.2">Implementation roadmap & ROI</span> <span class="text-gray-700" data-i18n="paths.leader.features.2">Implementation roadmap & ROI</span>
</li> </li>
<li class="flex items-start"> <li class="flex items-start">
<svg aria-hidden="true" class="w-5 h-5 text-amber-600 mr-2 mt-0.5" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"/></svg> <svg aria-hidden="true" class="w-5 h-5 mr-2 mt-0.5 flex-shrink-0" style="color: var(--service-deliberation-light);" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"/></svg>
<span class="text-gray-700" data-i18n="paths.leader.features.3">Competitive advantage analysis</span> <span class="text-gray-700" data-i18n="paths.leader.features.3">Competitive advantage analysis</span>
</li> </li>
</ul> </ul>
<a href="/leader.html" class="block w-full text-center bg-amber-600 text-white py-3 rounded-lg hover:bg-amber-700 transition font-semibold" data-i18n="paths.leader.cta">View Leadership Resources
</a> <div class="mt-6 pt-4 border-t border-gray-200">
<span class="font-semibold group-hover:underline" style="color: var(--service-deliberation-dark);" data-i18n="paths.leader.cta">View Leadership Resources →</span>
</div>
</div> </div>
</div> </a>
</div>
</section>
</div> </div>
</section> </section>
@ -219,9 +261,9 @@ Navigate the business case, compliance requirements, and competitive advantages
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8"> <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
<div class="border border-gray-200 rounded-lg p-6"> <div class="card-base card-interactive card-service instruction">
<div class="w-12 h-12 bg-blue-100 rounded-lg flex items-center justify-center mb-4"> <div class="w-14 h-14 rounded-xl flex items-center justify-center mb-4" style="background: var(--gradient-btn-instruction);">
<svg aria-hidden="true" class="w-6 h-6 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <svg aria-hidden="true" class="w-7 h-7 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2"/> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2"/>
</svg> </svg>
</div> </div>
@ -231,9 +273,9 @@ Quadrant-based classification (STR/OPS/TAC/SYS/STO) with time-persistence metada
</p> </p>
</div> </div>
<div class="border border-gray-200 rounded-lg p-6"> <div class="card-base card-interactive card-service validator">
<div class="w-12 h-12 bg-purple-100 rounded-lg flex items-center justify-center mb-4"> <div class="w-14 h-14 rounded-xl flex items-center justify-center mb-4" style="background: var(--gradient-btn-validator);">
<svg aria-hidden="true" class="w-6 h-6 text-purple-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <svg aria-hidden="true" class="w-7 h-7 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/>
</svg> </svg>
</div> </div>
@ -243,9 +285,9 @@ Validates AI actions against explicit user instructions to prevent pattern-based
</p> </p>
</div> </div>
<div class="border border-gray-200 rounded-lg p-6"> <div class="card-base card-interactive card-service boundary">
<div class="w-12 h-12 bg-green-100 rounded-lg flex items-center justify-center mb-4"> <div class="w-14 h-14 rounded-xl flex items-center justify-center mb-4" style="background: var(--gradient-btn-boundary);">
<svg aria-hidden="true" class="w-6 h-6 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <svg aria-hidden="true" class="w-7 h-7 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"/> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"/>
</svg> </svg>
</div> </div>
@ -255,9 +297,9 @@ Implements Tractatus 12.1-12.7 boundaries - values decisions architecturally req
</p> </p>
</div> </div>
<div class="border border-gray-200 rounded-lg p-6"> <div class="card-base card-interactive card-service pressure">
<div class="w-12 h-12 bg-yellow-100 rounded-lg flex items-center justify-center mb-4"> <div class="w-14 h-14 rounded-xl flex items-center justify-center mb-4" style="background: var(--gradient-btn-pressure);">
<svg aria-hidden="true" class="w-6 h-6 text-yellow-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <svg aria-hidden="true" class="w-7 h-7 text-white" 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"/> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"/>
</svg> </svg>
</div> </div>
@ -267,9 +309,9 @@ Detects degraded operating conditions (token pressure, errors, complexity) and a
</p> </p>
</div> </div>
<div class="border border-gray-200 rounded-lg p-6"> <div class="card-base card-interactive card-service metacognitive">
<div class="w-12 h-12 bg-red-100 rounded-lg flex items-center justify-center mb-4"> <div class="w-14 h-14 rounded-xl flex items-center justify-center mb-4" style="background: var(--gradient-btn-metacognitive);">
<svg aria-hidden="true" class="w-6 h-6 text-red-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <svg aria-hidden="true" class="w-7 h-7 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z"/> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z"/>
</svg> </svg>
</div> </div>
@ -279,9 +321,9 @@ AI self-checks alignment, coherence, safety before execution - structural pause-
</p> </p>
</div> </div>
<div class="border border-gray-200 rounded-lg p-6"> <div class="card-base card-interactive card-service deliberation">
<div class="w-12 h-12 bg-indigo-100 rounded-lg flex items-center justify-center mb-4"> <div class="w-14 h-14 rounded-xl flex items-center justify-center mb-4" style="background: var(--gradient-btn-deliberation);">
<svg aria-hidden="true" class="w-6 h-6 text-indigo-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <svg aria-hidden="true" class="w-7 h-7 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z"/> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z"/>
</svg> </svg>
</div> </div>
@ -345,63 +387,16 @@ Additional case studies and research findings documented in technical papers
</main> </main>
<!-- Footer --> <!-- Footer -->
<footer class="bg-gray-900 text-gray-400 py-12" role="contentinfo">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="grid grid-cols-1 md:grid-cols-4 gap-8">
<div>
<h3 class="text-white font-semibold mb-4">Tractatus Framework</h3>
<p class="text-sm" data-i18n="footer.description">
Reference implementation of architectural AI safety constraints—structural governance validated in single-project deployment.
</p>
</div>
<div>
<h3 class="text-white font-semibold mb-4">Resources</h3>
<ul class="space-y-2 text-sm">
<li><a href="/docs.html" class="hover:text-white transition">Documentation</a></li>
<li><a href="/demos/tractatus-demo.html" class="hover:text-white transition">Interactive Demos</a></li>
<li><a href="/researcher.html" class="hover:text-white transition">For Researchers</a></li>
<li><a href="/implementer.html" class="hover:text-white transition">For Implementers</a></li>
<li><a href="/leader.html" class="hover:text-white transition">For Leaders</a></li>
<li><a href="/about.html" class="hover:text-white transition">About & Values</a></li>
</ul>
</div>
<div>
<h3 class="text-white font-semibold mb-4">Community</h3>
<ul class="space-y-2 text-sm">
<li><a href="/media-inquiry.html" class="hover:text-white transition">Media Inquiries</a></li>
<li><a href="/case-submission.html" class="hover:text-white transition">Submit Case Study</a></li>
<li><a href="/blog.html" class="hover:text-white transition">Blog</a></li>
</ul>
</div>
<div>
<h3 class="text-white font-semibold mb-4">Support This Work</h3>
<ul class="space-y-2 text-sm">
<li><a href="/koha.html" class="hover:text-white transition">Make a Donation</a></li>
<li><a href="/koha/transparency.html" class="hover:text-white transition">Transparency Dashboard</a></li>
</ul>
</div>
<div>
<h3 class="text-white font-semibold mb-4">Acknowledgment</h3>
<p class="text-sm" data-i18n="footer.acknowledgment">
This framework acknowledges Te Tiriti o Waitangi and indigenous leadership in digital sovereignty.
Built with respect for CARE Principles and Māori data sovereignty.
</p>
</div>
</div>
<div class="mt-8 pt-8 border-t border-gray-800 text-center text-sm space-y-2">
<p class="text-gray-300"><span data-i18n="footer.tagline">Safety Through Structure, Not Aspiration</span> | <span data-i18n="footer.built_with">Built with</span> <a href="https://claude.ai/claude-code" class="text-blue-400 hover:text-blue-300 transition" target="_blank" rel="noopener">Claude Code</a></p>
<p>© 2025 John G Stroh. Licensed under <a href="https://www.apache.org/licenses/LICENSE-2.0" class="text-blue-400 hover:text-blue-300 transition" target="_blank" rel="noopener">Apache License 2.0</a>.</p>
</div>
</div>
</footer>
<!-- Version Management & PWA --> <!-- Version Management & PWA -->
<script src="/js/version-manager.js"></script> <script src="/js/version-manager.js"></script>
<!-- Internationalization --> <!-- Internationalization -->
<script src="/js/i18n-simple.js?v=0.1.0.1760643941"></script> <script src="/js/i18n-simple.js?v=1760818106"></script>
<script src="/js/components/language-selector.js?v=0.1.0.1760643941"></script> <script src="/js/components/language-selector.js?v=1760818106"></script>
<!-- Footer Component -->
<script src="/js/components/footer.js"></script>
</body> </body>
</html> </html>

24
public/js/components/document-viewer.js
View file

@ -103,14 +103,22 @@ class DocumentViewer {
<h2 class="text-lg font-semibold text-gray-900 mb-4">Table of Contents</h2> <h2 class="text-lg font-semibold text-gray-900 mb-4">Table of Contents</h2>
<nav> <nav>
<ul class="space-y-2"> <ul class="space-y-2">
${toc.map(item => ` ${toc.map(item => {
<li style="margin-left: ${(item.level - 1) * 16}px"> // Generate Tailwind margin class based on level
<a href="#${item.id}" const marginClass = item.level === 1 ? '' :
class="text-blue-600 hover:text-blue-700 hover:underline"> item.level === 2 ? 'ml-4' :
${this.escapeHtml(item.text)} item.level === 3 ? 'ml-8' :
</a> item.level === 4 ? 'ml-12' :
</li> 'ml-16';
`).join('')} return `
<li class="${marginClass}">
<a href="#${item.id}"
class="text-blue-600 hover:text-blue-700 hover:underline">
${this.escapeHtml(item.text)}
</a>
</li>
`;
}).join('')}
</ul> </ul>
</nav> </nav>
</div> </div>

6
public/js/components/footer.js
View file

@ -37,7 +37,7 @@
<div> <div>
<h3 class="text-white font-semibold mb-4">Support</h3> <h3 class="text-white font-semibold mb-4">Support</h3>
<ul class="space-y-2 text-sm"> <ul class="space-y-2 text-sm">
<li><a href="/koha.html" class="hover:text-white transition">Donate (Koha)</a></li> <li><a href="/koha.html" class="hover:text-white transition">Support (Koha)</a></li>
<li><a href="/koha/transparency.html" class="hover:text-white transition">Transparency</a></li> <li><a href="/koha/transparency.html" class="hover:text-white transition">Transparency</a></li>
<li><a href="/media-inquiry.html" class="hover:text-white transition">Media Inquiries</a></li> <li><a href="/media-inquiry.html" class="hover:text-white transition">Media Inquiries</a></li>
<li><a href="/case-submission.html" class="hover:text-white transition">Submit Case Study</a></li> <li><a href="/case-submission.html" class="hover:text-white transition">Submit Case Study</a></li>
@ -50,7 +50,7 @@
<ul class="space-y-2 text-sm"> <ul class="space-y-2 text-sm">
<li><a href="/privacy.html" class="hover:text-white transition">Privacy Policy</a></li> <li><a href="/privacy.html" class="hover:text-white transition">Privacy Policy</a></li>
<li><a href="mailto:hello@agenticgovernance.digital" class="hover:text-white transition">Contact Us</a></li> <li><a href="mailto:hello@agenticgovernance.digital" class="hover:text-white transition">Contact Us</a></li>
<li><a href="https://github.com/yourusername/tractatus" class="hover:text-white transition" target="_blank" rel="noopener">GitHub</a></li> <li><a href="https://github.com/AgenticGovernance/tractatus-framework" class="hover:text-white transition" target="_blank" rel="noopener">GitHub</a></li>
</ul> </ul>
</div> </div>
@ -69,7 +69,7 @@
<!-- Bottom Row --> <!-- Bottom Row -->
<div class="flex flex-col md:flex-row justify-between items-center gap-4 text-sm"> <div class="flex flex-col md:flex-row justify-between items-center gap-4 text-sm">
<p class="text-gray-400"> <p class="text-gray-400">
© ${new Date().getFullYear()} Tractatus AI Safety Framework. Licensed under <a href="https://www.apache.org/licenses/LICENSE-2.0" class="text-blue-400 hover:text-blue-300 transition" target="_blank" rel="noopener">Apache 2.0</a>. © ${new Date().getFullYear()} John G Stroh. Licensed under <a href="https://www.apache.org/licenses/LICENSE-2.0" class="text-blue-400 hover:text-blue-300 transition" target="_blank" rel="noopener">Apache 2.0</a>.
</p> </p>
<p class="text-gray-400"> <p class="text-gray-400">
Made in Aotearoa New Zealand 🇳🇿 Made in Aotearoa New Zealand 🇳🇿

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

@ -12,6 +12,7 @@ class TractatusNavbar {
init() { init() {
this.render(); this.render();
this.attachEventListeners(); this.attachEventListeners();
this.setActivePageIndicator();
} }
render() { render() {
@ -25,7 +26,7 @@ class TractatusNavbar {
<a href="/" <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-3 px-3 py-2 -ml-3 rounded-lg hover:bg-blue-50 transition-all duration-200 group"
title="Return to homepage"> title="Return to homepage">
<img src="/images/tractatus-icon.svg" alt="Tractatus Icon" class="w-8 h-8"> <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 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> <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" <svg class="w-4 h-4 text-gray-400 opacity-0 group-hover:opacity-100 transition-opacity ml-1 hidden sm:block"
@ -61,7 +62,7 @@ class TractatusNavbar {
<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">
<div class="flex justify-between items-center px-5 h-16 border-b border-gray-200"> <div class="flex justify-between items-center px-5 h-16 border-b border-gray-200">
<div class="flex items-center space-x-2"> <div class="flex items-center space-x-2">
<img src="/images/tractatus-icon.svg" alt="Tractatus Icon" class="w-6 h-6"> <img src="/images/tractatus-icon-new.svg" alt="Tractatus Icon" class="w-6 h-6">
<span class="font-bold text-gray-900">Navigation</span> <span class="font-bold text-gray-900">Navigation</span>
</div> </div>
<button id="mobile-menu-close-btn" class="text-gray-600 hover:text-gray-900 p-2 rounded hover:bg-gray-100 transition" aria-label="Close menu"> <button id="mobile-menu-close-btn" class="text-gray-600 hover:text-gray-900 p-2 rounded hover:bg-gray-100 transition" aria-label="Close menu">
@ -111,7 +112,12 @@ class TractatusNavbar {
if (existingNavbar) { if (existingNavbar) {
existingNavbar.outerHTML = navHTML; existingNavbar.outerHTML = navHTML;
} else { } else {
document.body.insertAdjacentHTML('afterbegin', navHTML); const placeholder = document.getElementById('navbar-placeholder');
if (placeholder) {
placeholder.outerHTML = navHTML;
} else {
document.body.insertAdjacentHTML('afterbegin', navHTML);
}
} }
} }
@ -174,6 +180,35 @@ class TractatusNavbar {
}); });
}); });
} }
setActivePageIndicator() {
// Get current page path
const currentPath = window.location.pathname;
// Normalize paths (handle both /page.html and /page)
const normalizePath = (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');
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.remove('text-gray-700');
}
});
}
} }
// Auto-initialize when DOM is ready // Auto-initialize when DOM is ready

1
public/koha.html
View file

@ -6,6 +6,7 @@
<title>Koha — Reciprocal Support | Tractatus AI Safety</title> <title>Koha — Reciprocal Support | Tractatus AI Safety</title>
<meta name="description" content="Join a relationship of mutual support for AI safety. Koha is reciprocal giving that maintains community bonds — your contribution sustains this work; our work serves you and the commons."> <meta name="description" content="Join a relationship of mutual support for AI safety. Koha is reciprocal giving that maintains community bonds — your contribution sustains this work; our work serves you and the commons.">
<link rel="stylesheet" href="/css/tailwind.css?v=0.1.0.1760254958072"> <link rel="stylesheet" href="/css/tailwind.css?v=0.1.0.1760254958072">
<link rel="stylesheet" href="/css/tractatus-theme.min.css">
<style> <style>
.gradient-text { background: linear-gradient(120deg, #3b82f6 0%, #8b5cf6 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .gradient-text { background: linear-gradient(120deg, #3b82f6 0%, #8b5cf6 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
.skip-link { position: absolute; left: -9999px; } .skip-link { position: absolute; left: -9999px; }

79
public/koha/success.html
View file

@ -6,6 +6,7 @@
<title>Thank You! | Tractatus Koha</title> <title>Thank You! | Tractatus Koha</title>
<meta name="description" content="Thank you for supporting the Tractatus AI Safety Framework. Your donation helps preserve human agency in AI systems."> <meta name="description" content="Thank you for supporting the Tractatus AI Safety Framework. Your donation helps preserve human agency in AI systems.">
<link rel="stylesheet" href="/css/tailwind.css?v=1759833751"> <link rel="stylesheet" href="/css/tailwind.css?v=1759833751">
<link rel="stylesheet" href="/css/tractatus-theme.min.css">
<style> <style>
.skip-link { position: absolute; left: -9999px; } .skip-link { position: absolute; left: -9999px; }
.skip-link:focus { left: 0; z-index: 100; background: white; padding: 1rem; } .skip-link:focus { left: 0; z-index: 100; background: white; padding: 1rem; }
@ -52,6 +53,13 @@
.fade-in-up { .fade-in-up {
animation: fadeInUp 0.6s ease-out forwards; animation: fadeInUp 0.6s ease-out forwards;
} }
/* Animation delays */
.delay-1 { animation-delay: 0.1s; }
.delay-2 { animation-delay: 0.2s; }
.delay-3 { animation-delay: 0.3s; }
.delay-4 { animation-delay: 0.4s; }
.delay-5 { animation-delay: 0.5s; }
</style> </style>
</head> </head>
<body class="bg-gray-50"> <body class="bg-gray-50">
@ -79,12 +87,12 @@
Ngā mihi nui! Thank You! Ngā mihi nui! Thank You!
</h1> </h1>
<p class="text-xl text-gray-600 mb-8 max-w-2xl mx-auto fade-in-up" style="animation-delay: 0.1s;"> <p class="text-xl text-gray-600 mb-8 max-w-2xl mx-auto fade-in-up delay-1">
Your generous support helps us build architectural AI safety constraints that preserve human agency for everyone. Your generous support helps us build architectural AI safety constraints that preserve human agency for everyone.
</p> </p>
<!-- Donation Details --> <!-- Donation Details -->
<div id="donation-details" class="bg-white shadow-lg rounded-lg p-8 mb-8 fade-in-up" style="animation-delay: 0.2s;"> <div id="donation-details" class="bg-white shadow-lg rounded-lg p-8 mb-8 fade-in-up delay-2">
<h2 class="text-2xl font-bold text-gray-900 mb-6">Donation Details</h2> <h2 class="text-2xl font-bold text-gray-900 mb-6">Donation Details</h2>
<div class="space-y-4 text-left max-w-md mx-auto"> <div class="space-y-4 text-left max-w-md mx-auto">
@ -110,7 +118,7 @@
</div> </div>
<!-- What Happens Next --> <!-- What Happens Next -->
<div class="bg-gradient-to-r from-blue-600 to-purple-600 rounded-lg p-8 mb-8 text-white fade-in-up" style="animation-delay: 0.3s;"> <div class="bg-gradient-to-r from-blue-600 to-purple-600 rounded-lg p-8 mb-8 text-white fade-in-up delay-3">
<h2 class="text-2xl font-bold mb-4">What Happens Next</h2> <h2 class="text-2xl font-bold mb-4">What Happens Next</h2>
<div class="grid grid-cols-1 md:grid-cols-2 gap-6 text-left"> <div class="grid grid-cols-1 md:grid-cols-2 gap-6 text-left">
<div> <div>
@ -164,7 +172,7 @@
</div> </div>
<!-- Monthly Donors Section --> <!-- Monthly Donors Section -->
<div id="monthly-section" class="bg-white shadow rounded-lg p-8 mb-8 fade-in-up" style="animation-delay: 0.4s; display: none;"> <div id="monthly-section" class="hidden bg-white shadow rounded-lg p-8 mb-8 fade-in-up delay-4">
<h2 class="text-2xl font-bold text-gray-900 mb-4">Managing Your Monthly Donation</h2> <h2 class="text-2xl font-bold text-gray-900 mb-4">Managing Your Monthly Donation</h2>
<p class="text-gray-600 mb-6"> <p class="text-gray-600 mb-6">
Your monthly support provides sustainable funding for the Tractatus Framework. You can cancel or modify your donation anytime. Your monthly support provides sustainable funding for the Tractatus Framework. You can cancel or modify your donation anytime.
@ -204,7 +212,7 @@
</div> </div>
<!-- Next Steps --> <!-- Next Steps -->
<div class="flex flex-col sm:flex-row gap-4 justify-center fade-in-up" style="animation-delay: 0.5s;"> <div class="flex flex-col sm:flex-row gap-4 justify-center fade-in-up delay-5">
<a href="/koha/transparency" class="inline-block bg-blue-600 text-white px-8 py-3 rounded-lg font-semibold hover:bg-blue-700 transition"> <a href="/koha/transparency" class="inline-block bg-blue-600 text-white px-8 py-3 rounded-lg font-semibold hover:bg-blue-700 transition">
View Transparency Dashboard View Transparency Dashboard
</a> </a>
@ -219,7 +227,7 @@
</div> </div>
<!-- Loading State --> <!-- Loading State -->
<div id="loading-content" class="text-center" style="display: none;"> <div id="loading-content" class="hidden text-center">
<div class="inline-flex items-center justify-center w-16 h-16 mb-4"> <div class="inline-flex items-center justify-center w-16 h-16 mb-4">
<svg class="animate-spin h-12 w-12 text-blue-600" fill="none" viewBox="0 0 24 24"> <svg class="animate-spin h-12 w-12 text-blue-600" fill="none" viewBox="0 0 24 24">
<circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle> <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
@ -230,7 +238,7 @@
</div> </div>
<!-- Error State --> <!-- Error State -->
<div id="error-content" class="text-center" style="display: none;"> <div id="error-content" class="hidden text-center">
<div class="inline-flex items-center justify-center w-24 h-24 bg-red-100 rounded-full mb-8"> <div class="inline-flex items-center justify-center w-24 h-24 bg-red-100 rounded-full mb-8">
<svg class="w-12 h-12 text-red-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <svg class="w-12 h-12 text-red-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
@ -261,61 +269,8 @@
<!-- Footer --> <!-- Footer -->
<script src="/js/components/footer.js"></script> <script src="/js/components/footer.js"></script>
<!-- Coming Soon Overlay (remove when Stripe is configured) --> <!-- Donation verification -->
<script src="/js/components/coming-soon-overlay.js"></script> <script src="/js/koha-success.js"></script>
<script>
// Get session ID from URL
const urlParams = new URLSearchParams(window.location.search);
const sessionId = urlParams.get('session_id');
// Verify donation
async function verifyDonation() {
if (!sessionId) {
// No session ID - just show success message
document.getElementById('loading-content').style.display = 'none';
document.getElementById('success-content').style.display = 'block';
return;
}
try {
const response = await fetch(`/api/koha/verify/${sessionId}`);
const data = await response.json();
if (data.success && data.data.isSuccessful) {
// Show success content
document.getElementById('loading-content').style.display = 'none';
document.getElementById('success-content').style.display = 'block';
// Update details
document.getElementById('amount').textContent = `$${data.data.amount.toFixed(2)} ${data.data.currency.toUpperCase()}`;
const frequencyText = data.data.frequency === 'monthly' ? 'Monthly Donation' : 'One-Time Donation';
document.getElementById('frequency').textContent = frequencyText;
// Show monthly section if applicable
if (data.data.frequency === 'monthly') {
document.getElementById('monthly-section').style.display = 'block';
}
} else {
throw new Error('Donation not successful');
}
} catch (error) {
console.error('Verification error:', error);
document.getElementById('loading-content').style.display = 'none';
document.getElementById('error-content').style.display = 'block';
}
}
// Verify on page load
if (sessionId) {
document.getElementById('success-content').style.display = 'none';
document.getElementById('loading-content').style.display = 'block';
verifyDonation();
}
</script>
</body> </body>
</html> </html>

74
public/koha/transparency.html
View file

@ -6,6 +6,7 @@
<title>Transparency Dashboard | Tractatus Koha</title> <title>Transparency Dashboard | Tractatus Koha</title>
<meta name="description" content="Full transparency on donations received and how they're allocated to support the Tractatus AI Safety Framework."> <meta name="description" content="Full transparency on donations received and how they're allocated to support the Tractatus AI Safety Framework.">
<link rel="stylesheet" href="/css/tailwind.css?v=1759833751"> <link rel="stylesheet" href="/css/tailwind.css?v=1759833751">
<link rel="stylesheet" href="/css/tractatus-theme.min.css">
<!-- Chart.js for visual analytics --> <!-- Chart.js for visual analytics -->
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.0/dist/chart.umd.min.js" crossorigin="anonymous"></script> <script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.0/dist/chart.umd.min.js" crossorigin="anonymous"></script>
<style> <style>
@ -47,10 +48,10 @@
<!-- Header --> <!-- Header -->
<div class="text-center mb-12"> <div class="text-center mb-12">
<h1 class="text-4xl md:text-5xl font-bold text-gray-900 mb-4"> <h1 class="text-4xl md:text-5xl font-bold text-gray-900 mb-4" data-i18n="heading">
Transparency Dashboard Transparency Dashboard
</h1> </h1>
<p class="text-xl text-gray-600 max-w-3xl mx-auto"> <p class="text-xl text-gray-600 max-w-3xl mx-auto" data-i18n="subheading">
Full visibility into donations received and how we allocate them to support the Tractatus Framework. Full visibility into donations received and how we allocate them to support the Tractatus Framework.
</p> </p>
<div class="flex items-center justify-center gap-4 mt-6"> <div class="flex items-center justify-center gap-4 mt-6">
@ -61,7 +62,7 @@
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <svg class="w-4 h-4" 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"></path> <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"></path>
</svg> </svg>
Export CSV <span data-i18n="export_csv">Export CSV</span>
</button> </button>
</div> </div>
</div> </div>
@ -72,44 +73,44 @@
<!-- Total Received --> <!-- Total Received -->
<div class="stat-card bg-white shadow rounded-lg p-6"> <div class="stat-card bg-white shadow rounded-lg p-6">
<div class="flex items-center justify-between mb-2"> <div class="flex items-center justify-between mb-2">
<h2 class="text-sm font-medium text-gray-600">Total Received</h2> <h2 class="text-sm font-medium text-gray-600" data-i18n="metrics.total_received">Total Received</h2>
<svg class="w-6 h-6 text-green-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <svg class="w-6 h-6 text-green-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
</svg> </svg>
</div> </div>
<div class="text-4xl font-bold text-gray-900" id="total-received">$0</div> <div class="text-4xl font-bold text-gray-900" id="total-received">$0</div>
<div class="text-sm text-gray-500 mt-1">NZD lifetime</div> <div class="text-sm text-gray-500 mt-1" data-i18n="metrics.lifetime">NZD lifetime</div>
</div> </div>
<!-- Monthly Supporters --> <!-- Monthly Supporters -->
<div class="stat-card bg-white shadow rounded-lg p-6"> <div class="stat-card bg-white shadow rounded-lg p-6">
<div class="flex items-center justify-between mb-2"> <div class="flex items-center justify-between mb-2">
<h2 class="text-sm font-medium text-gray-600">Monthly Supporters</h2> <h2 class="text-sm font-medium text-gray-600" data-i18n="metrics.monthly_supporters">Monthly Supporters</h2>
<svg class="w-6 h-6 text-blue-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <svg class="w-6 h-6 text-blue-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z"></path> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z"></path>
</svg> </svg>
</div> </div>
<div class="text-4xl font-bold text-gray-900" id="monthly-supporters">0</div> <div class="text-4xl font-bold text-gray-900" id="monthly-supporters">0</div>
<div class="text-sm text-gray-500 mt-1">Active subscriptions</div> <div class="text-sm text-gray-500 mt-1" data-i18n="metrics.active_subscriptions">Active subscriptions</div>
</div> </div>
<!-- Monthly Recurring --> <!-- Monthly Recurring -->
<div class="stat-card bg-white shadow rounded-lg p-6"> <div class="stat-card bg-white shadow rounded-lg p-6">
<div class="flex items-center justify-between mb-2"> <div class="flex items-center justify-between mb-2">
<h2 class="text-sm font-medium text-gray-600">Monthly Recurring</h2> <h2 class="text-sm font-medium text-gray-600" data-i18n="metrics.monthly_recurring">Monthly Recurring</h2>
<svg class="w-6 h-6 text-purple-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <svg class="w-6 h-6 text-purple-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"></path> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"></path>
</svg> </svg>
</div> </div>
<div class="text-4xl font-bold text-gray-900" id="monthly-revenue">$0</div> <div class="text-4xl font-bold text-gray-900" id="monthly-revenue">$0</div>
<div class="text-sm text-gray-500 mt-1">NZD per month</div> <div class="text-sm text-gray-500 mt-1" data-i18n="metrics.per_month">NZD per month</div>
</div> </div>
</div> </div>
<!-- Allocation Breakdown --> <!-- Allocation Breakdown -->
<div class="bg-white shadow rounded-lg p-8 mb-12"> <div class="bg-white shadow rounded-lg p-8 mb-12">
<h2 class="text-2xl font-bold text-gray-900 mb-6">How Donations Are Allocated</h2> <h2 class="text-2xl font-bold text-gray-900 mb-6" data-i18n="allocation.heading">How Donations Are Allocated</h2>
<!-- Allocation Chart --> <!-- Allocation Chart -->
<div class="mb-8 max-w-md mx-auto"> <div class="mb-8 max-w-md mx-auto">
@ -121,13 +122,13 @@
<div> <div>
<div class="flex justify-between items-center mb-2"> <div class="flex justify-between items-center mb-2">
<div> <div>
<span class="font-semibold text-gray-900">Development</span> <span class="font-semibold text-gray-900" data-i18n="allocation.development">Development</span>
<span class="text-sm text-gray-600 ml-2">Feature development, bug fixes, security updates</span> <span class="text-sm text-gray-600 ml-2" data-i18n="allocation.development_desc">Feature development, bug fixes, security updates</span>
</div> </div>
<span class="font-bold text-blue-600">40%</span> <span class="font-bold text-blue-600">40%</span>
</div> </div>
<div class="w-full bg-gray-200 rounded-full h-3"> <div class="w-full bg-gray-200 rounded-full h-3">
<div class="progress-bar bg-blue-600 h-3 rounded-full" style="width: 0%;" data-width="40"></div> <div class="progress-bar bg-blue-600 h-3 rounded-full" data-width="40"></div>
</div> </div>
</div> </div>
@ -135,13 +136,13 @@
<div> <div>
<div class="flex justify-between items-center mb-2"> <div class="flex justify-between items-center mb-2">
<div> <div>
<span class="font-semibold text-gray-900">Hosting & Infrastructure</span> <span class="font-semibold text-gray-900" data-i18n="allocation.hosting">Hosting & Infrastructure</span>
<span class="text-sm text-gray-600 ml-2">Servers, database, CDN, domain, SSL</span> <span class="text-sm text-gray-600 ml-2" data-i18n="allocation.hosting_desc">Servers, database, CDN, domain, SSL</span>
</div> </div>
<span class="font-bold text-green-600">30%</span> <span class="font-bold text-green-600">30%</span>
</div> </div>
<div class="w-full bg-gray-200 rounded-full h-3"> <div class="w-full bg-gray-200 rounded-full h-3">
<div class="progress-bar bg-green-600 h-3 rounded-full" style="width: 0%;" data-width="30"></div> <div class="progress-bar bg-green-600 h-3 rounded-full" data-width="30"></div>
</div> </div>
</div> </div>
@ -149,13 +150,13 @@
<div> <div>
<div class="flex justify-between items-center mb-2"> <div class="flex justify-between items-center mb-2">
<div> <div>
<span class="font-semibold text-gray-900">Research</span> <span class="font-semibold text-gray-900" data-i18n="allocation.research">Research</span>
<span class="text-sm text-gray-600 ml-2">AI safety research, academic partnerships, publications</span> <span class="text-sm text-gray-600 ml-2" data-i18n="allocation.research_desc">AI safety research, academic partnerships, publications</span>
</div> </div>
<span class="font-bold text-purple-600">20%</span> <span class="font-bold text-purple-600">20%</span>
</div> </div>
<div class="w-full bg-gray-200 rounded-full h-3"> <div class="w-full bg-gray-200 rounded-full h-3">
<div class="progress-bar bg-purple-600 h-3 rounded-full" style="width: 0%;" data-width="20"></div> <div class="progress-bar bg-purple-600 h-3 rounded-full" data-width="20"></div>
</div> </div>
</div> </div>
@ -163,13 +164,13 @@
<div> <div>
<div class="flex justify-between items-center mb-2"> <div class="flex justify-between items-center mb-2">
<div> <div>
<span class="font-semibold text-gray-900">Community</span> <span class="font-semibold text-gray-900" data-i18n="allocation.community">Community</span>
<span class="text-sm text-gray-600 ml-2">Documentation, outreach, contributor support</span> <span class="text-sm text-gray-600 ml-2" data-i18n="allocation.community_desc">Documentation, outreach, contributor support</span>
</div> </div>
<span class="font-bold text-orange-600">10%</span> <span class="font-bold text-orange-600">10%</span>
</div> </div>
<div class="w-full bg-gray-200 rounded-full h-3"> <div class="w-full bg-gray-200 rounded-full h-3">
<div class="progress-bar bg-orange-600 h-3 rounded-full" style="width: 0%;" data-width="10"></div> <div class="progress-bar bg-orange-600 h-3 rounded-full" data-width="10"></div>
</div> </div>
</div> </div>
</div> </div>
@ -178,41 +179,41 @@
<!-- One-Time Donations --> <!-- One-Time Donations -->
<div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-12"> <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-12">
<div class="bg-white shadow rounded-lg p-6"> <div class="bg-white shadow rounded-lg p-6">
<h3 class="text-lg font-semibold text-gray-900 mb-3">One-Time Donations</h3> <h3 class="text-lg font-semibold text-gray-900 mb-3" data-i18n="metrics.one_time_donations">One-Time Donations</h3>
<div class="text-3xl font-bold text-gray-900" id="onetime-count">0</div> <div class="text-3xl font-bold text-gray-900" id="onetime-count">0</div>
<div class="text-sm text-gray-500">Total gifts received</div> <div class="text-sm text-gray-500" data-i18n="metrics.total_gifts">Total gifts received</div>
</div> </div>
<div class="bg-white shadow rounded-lg p-6"> <div class="bg-white shadow rounded-lg p-6">
<h3 class="text-lg font-semibold text-gray-900 mb-3">Average Donation</h3> <h3 class="text-lg font-semibold text-gray-900 mb-3" data-i18n="metrics.average_donation">Average Donation</h3>
<div class="text-3xl font-bold text-gray-900" id="average-donation">$0</div> <div class="text-3xl font-bold text-gray-900" id="average-donation">$0</div>
<div class="text-sm text-gray-500">NZD across all donations</div> <div class="text-sm text-gray-500" data-i18n="metrics.across_all">NZD across all donations</div>
</div> </div>
</div> </div>
<!-- Recent Supporters (Public Acknowledgements) --> <!-- Recent Supporters (Public Acknowledgements) -->
<div class="bg-white shadow rounded-lg p-8"> <div class="bg-white shadow rounded-lg p-8">
<h2 class="text-2xl font-bold text-gray-900 mb-6">Recent Supporters</h2> <h2 class="text-2xl font-bold text-gray-900 mb-6" data-i18n="supporters.heading">Recent Supporters</h2>
<p class="text-gray-600 mb-6"> <p class="text-gray-600 mb-6" data-i18n="supporters.intro">
Thank you to these generous supporters who have opted to be publicly acknowledged. All supporters are valued equally, whether listed here or donating anonymously. Thank you to these generous supporters who have opted to be publicly acknowledged. All supporters are valued equally, whether listed here or donating anonymously.
</p> </p>
<div id="recent-donors" class="space-y-3"> <div id="recent-donors" class="space-y-3">
<p class="text-gray-500 text-center py-8">Loading supporters...</p> <p class="text-gray-500 text-center py-8" data-i18n="supporters.loading">Loading supporters...</p>
</div> </div>
<div id="no-donors" class="text-center py-8 text-gray-500" style="display: none;"> <div id="no-donors" class="hidden text-center py-8 text-gray-500" data-i18n="supporters.none">
No public acknowledgements yet. Be the first to support Tractatus! No public acknowledgements yet. Be the first to support Tractatus!
</div> </div>
</div> </div>
<!-- Call to Action --> <!-- Call to Action -->
<div class="mt-12 bg-gradient-to-r from-blue-600 to-purple-600 rounded-lg p-8 text-center text-white"> <div class="mt-12 bg-gradient-to-r from-blue-600 to-purple-600 rounded-lg p-8 text-center text-white">
<h2 class="text-2xl font-bold mb-4">Support the Tractatus Framework</h2> <h2 class="text-2xl font-bold mb-4" data-i18n="cta.heading">Support the Tractatus Framework</h2>
<p class="text-blue-100 mb-6 max-w-2xl mx-auto"> <p class="text-blue-100 mb-6 max-w-2xl mx-auto" data-i18n="cta.text">
Help us build architectural AI safety constraints that preserve human agency. Every contribution makes a difference. Help us build architectural AI safety constraints that preserve human agency. Every contribution makes a difference.
</p> </p>
<a href="/koha.html" class="inline-block bg-white text-blue-600 px-8 py-3 rounded-lg font-semibold hover:bg-blue-50 transition"> <a href="/koha.html" class="inline-block bg-white text-blue-600 px-8 py-3 rounded-lg font-semibold hover:bg-blue-50 transition" data-i18n="cta.button">
Make a Donation Make a Donation
</a> </a>
</div> </div>
@ -222,11 +223,12 @@
<!-- Footer --> <!-- Footer -->
<script src="/js/components/footer.js"></script> <script src="/js/components/footer.js"></script>
<!-- Coming Soon Overlay (remove when Stripe is configured) -->
<script src="/js/components/coming-soon-overlay.js"></script>
<!-- Transparency Dashboard JavaScript --> <!-- Transparency Dashboard JavaScript -->
<script src="/js/koha-transparency.js"></script> <script src="/js/koha-transparency.js"></script>
<!-- Internationalization -->
<script src="/js/i18n-simple.js"></script>
<script src="/js/components/language-selector.js"></script>
</body> </body>
</html> </html>

96
public/leader.html
View file

@ -14,9 +14,12 @@
<meta name="apple-mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="default"> <meta name="apple-mobile-web-app-status-bar-style" content="default">
<meta name="apple-mobile-web-app-title" content="Tractatus"> <meta name="apple-mobile-web-app-title" content="Tractatus">
<link rel="apple-touch-icon" href="/images/tractatus-icon.svg"> <link rel="apple-touch-icon" href="/images/tractatus-icon-new.svg">
<link rel="icon" type="image/svg+xml" href="/favicon-new.svg">
<link rel="stylesheet" href="/css/fonts.css">
<link rel="stylesheet" href="/css/tailwind.css?v=0.1.0.1760254958072"> <link rel="stylesheet" href="/css/tailwind.css?v=0.1.0.1760254958072">
<link rel="stylesheet" href="/css/tractatus-theme.min.css?v=1760816800">
<style> <style>
.hover-lift { transition: all 0.3s ease; } .hover-lift { transition: all 0.3s ease; }
.hover-lift:hover { transform: translateY(-2px); } .hover-lift:hover { transform: translateY(-2px); }
@ -52,6 +55,17 @@
<script src="/js/components/navbar.js?v=0.1.0.1760254958072"></script> <script src="/js/components/navbar.js?v=0.1.0.1760254958072"></script>
<!-- Breadcrumb Navigation -->
<nav class="bg-gray-50 border-b border-gray-200 py-3" aria-label="Breadcrumb">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<ol class="flex items-center space-x-2 text-sm">
<li><a href="/" class="hover:underline transition-colors" style="color: var(--tractatus-core-end);">Home</a></li>
<li class="text-gray-400">/</li>
<li class="text-gray-900 font-medium" aria-current="page">Leader</li>
</ol>
</div>
</nav>
<!-- Header --> <!-- Header -->
<div class="bg-gray-50 border-b border-gray-200 py-16"> <div class="bg-gray-50 border-b border-gray-200 py-16">
<div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8"> <div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
@ -487,6 +501,24 @@
</svg> </svg>
</a> </a>
</p> </p>
<p class="mt-3">
<strong>AI Safety Research:</strong> Architectural Safeguards Against LLM Hierarchical Dominance — How Tractatus protects pluralistic values from AI pattern bias while maintaining safety boundaries.
<span class="inline-flex gap-3 mt-2">
<a href="/docs/research/ARCHITECTURAL-SAFEGUARDS-Against-LLM-Hierarchical-Dominance-Prose.pdf" target="_blank" class="text-amber-700 hover:text-amber-800 font-medium inline-flex items-center">
PDF
<svg class="w-4 h-4 ml-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"/>
</svg>
</a>
<span class="text-gray-400">|</span>
<a href="/docs.html?doc=architectural-safeguards-against-llm-hierarchical-dominance-prose" class="text-amber-700 hover:text-amber-800 font-medium inline-flex items-center">
Read online
<svg class="w-4 h-4 ml-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/>
</svg>
</a>
</span>
</p>
</div> </div>
</div> </div>
</div> </div>
@ -562,64 +594,16 @@
</div> </div>
<!-- Footer --> <!-- Footer -->
<footer class="bg-gray-900 text-gray-400 py-12 mt-16" role="contentinfo">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="grid grid-cols-1 md:grid-cols-5 gap-8">
<div>
<h3 class="text-white font-semibold mb-4">Tractatus Framework</h3>
<p class="text-sm">
Reference implementation of architectural AI safety constraints—structural governance validated in single-project deployment.
</p>
</div>
<div>
<h3 class="text-white font-semibold mb-4">Resources</h3>
<ul class="space-y-2 text-sm">
<li><a href="/docs.html" class="hover:text-white transition">Documentation</a></li>
<li><a href="/demos/tractatus-demo.html" class="hover:text-white transition">Interactive Demos</a></li>
<li><a href="/researcher.html" class="hover:text-white transition">For Researchers</a></li>
<li><a href="/implementer.html" class="hover:text-white transition">For Implementers</a></li>
<li><a href="/leader.html" class="hover:text-white transition">For Leaders</a></li>
<li><a href="/about.html" class="hover:text-white transition">About & Values</a></li>
</ul>
</div>
<div>
<h3 class="text-white font-semibold mb-4">Community</h3>
<ul class="space-y-2 text-sm">
<li><a href="/media-inquiry.html" class="hover:text-white transition">Media Inquiries</a></li>
<li><a href="/case-submission.html" class="hover:text-white transition">Submit Case Study</a></li>
<li><a href="/blog.html" class="hover:text-white transition">Blog</a></li>
<li><a href="/#newsletter" class="hover:text-white transition">Newsletter</a></li>
</ul>
</div>
<div>
<h3 class="text-white font-semibold mb-4">Support This Work</h3>
<ul class="space-y-2 text-sm">
<li><a href="/koha.html" class="hover:text-white transition">Make a Donation</a></li>
<li><a href="/koha/transparency.html" class="hover:text-white transition">Transparency Dashboard</a></li>
</ul>
</div>
<div>
<h3 class="text-white font-semibold mb-4">Acknowledgment</h3>
<p class="text-sm">
This framework acknowledges Te Tiriti o Waitangi and indigenous leadership in digital sovereignty.
Built with respect for CARE Principles and Māori data sovereignty.
</p>
</div>
</div>
<div class="mt-8 pt-8 border-t border-gray-800 text-center text-sm space-y-2">
<p class="text-gray-300">Safety Through Structure, Not Aspiration | Built with <a href="https://claude.ai/claude-code" class="text-blue-400 hover:text-blue-300 transition" target="_blank" rel="noopener">Claude Code</a></p>
<p>© 2025 John G Stroh. Licensed under <a href="https://www.apache.org/licenses/LICENSE-2.0" class="text-blue-400 hover:text-blue-300 transition" target="_blank" rel="noopener">Apache License 2.0</a>.</p>
</div>
</div>
</footer>
<!-- Internationalization --> <!-- Internationalization -->
<script src="/js/i18n-simple.js?v=0.1.0.1760643941"></script> <script src="/js/i18n-simple.js?v=1760818106"></script>
<script src="/js/components/language-selector.js?v=0.1.0.1760643941"></script> <script src="/js/components/language-selector.js?v=1760818106"></script>
<!-- Version Management & PWA --> <!-- Version Management & PWA -->
<script src="/js/version-manager.js"></script> <script src="/js/version-manager.js?v=0.1.0.1760680958072"></script>
<script src="/js/leader-page.js"></script> <script src="/js/leader-page.js?v=0.1.0.1760680958072"></script>
<!-- Footer Component -->
<script src="/js/components/footer.js"></script>
</body> </body>
</html> </html>

12
public/manifest.json
View file

@ -5,17 +5,17 @@
"start_url": "/", "start_url": "/",
"display": "standalone", "display": "standalone",
"background_color": "#ffffff", "background_color": "#ffffff",
"theme_color": "#3b82f6", "theme_color": "#0ea5e9",
"orientation": "portrait-primary", "orientation": "portrait-primary",
"icons": [ "icons": [
{ {
"src": "/images/tractatus-icon.svg", "src": "/images/tractatus-icon-new.svg",
"sizes": "any", "sizes": "any",
"type": "image/svg+xml", "type": "image/svg+xml",
"purpose": "any maskable" "purpose": "any maskable"
}, },
{ {
"src": "/favicon.svg", "src": "/favicon-new.svg",
"sizes": "any", "sizes": "any",
"type": "image/svg+xml" "type": "image/svg+xml"
} }
@ -27,21 +27,21 @@
"short_name": "Docs", "short_name": "Docs",
"description": "Browse framework documentation", "description": "Browse framework documentation",
"url": "/docs.html", "url": "/docs.html",
"icons": [{ "src": "/images/tractatus-icon.svg", "sizes": "any" }] "icons": [{ "src": "/images/tractatus-icon-new.svg", "sizes": "any" }]
}, },
{ {
"name": "FAQ", "name": "FAQ",
"short_name": "FAQ", "short_name": "FAQ",
"description": "Frequently asked questions", "description": "Frequently asked questions",
"url": "/faq.html", "url": "/faq.html",
"icons": [{ "src": "/images/tractatus-icon.svg", "sizes": "any" }] "icons": [{ "src": "/images/tractatus-icon-new.svg", "sizes": "any" }]
}, },
{ {
"name": "27027 Demo", "name": "27027 Demo",
"short_name": "Demo", "short_name": "Demo",
"description": "Interactive pattern bias demonstration", "description": "Interactive pattern bias demonstration",
"url": "/demos/27027-demo.html", "url": "/demos/27027-demo.html",
"icons": [{ "src": "/images/tractatus-icon.svg", "sizes": "any" }] "icons": [{ "src": "/images/tractatus-icon-new.svg", "sizes": "any" }]
} }
] ]
} }

145
public/media-inquiry.html
View file

@ -4,7 +4,9 @@
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Media Inquiry | Tractatus AI Safety</title> <title>Media Inquiry | Tractatus AI Safety</title>
<link rel="stylesheet" href="/css/fonts.css">
<link rel="stylesheet" href="/css/tailwind.css?v=0.1.0.1760254958072"> <link rel="stylesheet" href="/css/tailwind.css?v=0.1.0.1760254958072">
<link rel="stylesheet" href="/css/tractatus-theme.min.css?v=1760816800">
<style> <style>
.form-group { margin-bottom: 1.5rem; } .form-group { margin-bottom: 1.5rem; }
.form-label { .form-label {
@ -16,15 +18,16 @@
.form-input, .form-textarea { .form-input, .form-textarea {
width: 100%; width: 100%;
padding: 0.75rem; padding: 0.75rem;
border: 1px solid #d1d5db; border: 2px solid #e2e8f0;
border-radius: 0.375rem; border-radius: 0.5rem;
font-size: 1rem; font-size: 1rem;
transition: border-color 0.15s; transition: all 0.2s ease;
} }
.form-input:focus, .form-textarea:focus { .form-input:focus, .form-textarea:focus {
outline: none; outline: none;
border-color: #3b82f6; border-color: var(--tractatus-core-end);
box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1); box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.1);
transform: translateY(-1px);
} }
.form-textarea { min-height: 150px; resize: vertical; } .form-textarea { min-height: 150px; resize: vertical; }
.form-help { font-size: 0.875rem; color: #6b7280; margin-top: 0.25rem; } .form-help { font-size: 0.875rem; color: #6b7280; margin-top: 0.25rem; }
@ -48,15 +51,15 @@
/* Accessibility: Skip link */ /* Accessibility: Skip link */
.skip-link { position: absolute; left: -9999px; top: 0; } .skip-link { position: absolute; left: -9999px; top: 0; }
.skip-link:focus { left: 0; z-index: 100; background: white; padding: 1rem; border: 2px solid #3b82f6; } .skip-link:focus { left: 0; z-index: 100; background: white; padding: 1rem; border: 2px solid var(--tractatus-core-end); }
/* Accessibility: Focus indicators (WCAG 2.4.7) */ /* Accessibility: Focus indicators (WCAG 2.4.7) */
a:focus, button:focus, input:focus, select:focus, textarea:focus { a:focus, button:focus, input:focus, select:focus, textarea:focus {
outline: 3px solid #3b82f6; outline: 3px solid var(--tractatus-core-end);
outline-offset: 2px; outline-offset: 2px;
} }
a:focus:not(:focus-visible) { outline: none; } a:focus:not(:focus-visible) { outline: none; }
a:focus-visible { outline: 3px solid #3b82f6; outline-offset: 2px; } a:focus-visible { outline: 3px solid var(--tractatus-core-end); outline-offset: 2px; }
</style> </style>
</head> </head>
<body class="bg-gray-50"> <body class="bg-gray-50">
@ -145,7 +148,7 @@
<!-- Submit Button --> <!-- Submit Button -->
<div class="mt-8"> <div class="mt-8">
<button type="submit" id="submit-button" class="w-full bg-blue-600 text-white px-6 py-3 rounded-lg font-semibold hover:bg-blue-700 transition"> <button type="submit" id="submit-button" class="w-full text-white px-6 py-3 rounded-lg font-semibold transition-all duration-200 hover:shadow-lg hover:-translate-y-0.5" style="background: linear-gradient(135deg, #0ea5e9 0%, #0284c7 100%);">
Submit Inquiry Submit Inquiry
</button> </button>
<p class="form-help mt-3 text-center"> <p class="form-help mt-3 text-center">
@ -160,7 +163,7 @@
<div class="mt-6 text-sm text-gray-600 text-center"> <div class="mt-6 text-sm text-gray-600 text-center">
<p> <p>
Your contact information is handled according to our Your contact information is handled according to our
<a href="/about/values.html" class="text-blue-600 hover:text-blue-700">privacy principles</a>. <a href="/about/values.html" class="hover:underline transition-colors" style="color: var(--tractatus-core-end);">privacy principles</a>.
We never share media inquiries with third parties. We never share media inquiries with third parties.
</p> </p>
</div> </div>
@ -168,126 +171,10 @@
</main> </main>
<!-- Footer --> <!-- Footer -->
<footer class="bg-gray-900 text-gray-400 py-12 mt-16" role="contentinfo"> <script src="/js/media-inquiry.js"></script>
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="grid grid-cols-1 md:grid-cols-5 gap-8">
<div>
<h3 class="text-white font-semibold mb-4">Tractatus Framework</h3>
<p class="text-sm">
Reference implementation of architectural AI safety constraints—structural governance validated in single-project deployment.
</p>
</div>
<div>
<h3 class="text-white font-semibold mb-4">Resources</h3>
<ul class="space-y-2 text-sm">
<li><a href="/docs.html" class="hover:text-white transition">Documentation</a></li>
<li><a href="/demos/tractatus-demo.html" class="hover:text-white transition">Interactive Demos</a></li>
<li><a href="/researcher.html" class="hover:text-white transition">For Researchers</a></li>
<li><a href="/implementer.html" class="hover:text-white transition">For Implementers</a></li>
<li><a href="/leader.html" class="hover:text-white transition">For Leaders</a></li>
<li><a href="/about.html" class="hover:text-white transition">About & Values</a></li>
</ul>
</div>
<div>
<h3 class="text-white font-semibold mb-4">Community</h3>
<ul class="space-y-2 text-sm">
<li><a href="/media-inquiry.html" class="hover:text-white transition">Media Inquiries</a></li>
<li><a href="/case-submission.html" class="hover:text-white transition">Submit Case Study</a></li>
<li><a href="/blog.html" class="hover:text-white transition">Blog</a></li>
<li><a href="/#newsletter" class="hover:text-white transition">Newsletter</a></li>
</ul>
</div>
<div>
<h3 class="text-white font-semibold mb-4">Support This Work</h3>
<ul class="space-y-2 text-sm">
<li><a href="/koha.html" class="hover:text-white transition">Make a Donation</a></li>
<li><a href="/koha/transparency.html" class="hover:text-white transition">Transparency Dashboard</a></li>
</ul>
</div>
<div>
<h3 class="text-white font-semibold mb-4">Acknowledgment</h3>
<p class="text-sm">
This framework acknowledges Te Tiriti o Waitangi and indigenous leadership in digital sovereignty.
Built with respect for CARE Principles and Māori data sovereignty.
</p>
</div>
</div>
<div class="mt-8 pt-8 border-t border-gray-800 text-center text-sm space-y-2">
<p class="text-gray-300">Safety Through Structure, Not Aspiration | Built with <a href="https://claude.ai/claude-code" class="text-blue-400 hover:text-blue-300 transition" target="_blank" rel="noopener">Claude Code</a></p>
<p>© 2025 John G Stroh. Licensed under <a href="https://www.apache.org/licenses/LICENSE-2.0" class="text-blue-400 hover:text-blue-300 transition" target="_blank" rel="noopener">Apache License 2.0</a>.</p>
</div>
</div>
</footer>
<script> <!-- Footer Component -->
const form = document.getElementById('media-inquiry-form'); <script src="/js/components/footer.js"></script>
const submitButton = document.getElementById('submit-button');
const successMessage = document.getElementById('success-message');
const errorMessage = document.getElementById('error-message');
form.addEventListener('submit', async (e) => {
e.preventDefault();
// Hide previous messages
successMessage.style.display = 'none';
errorMessage.style.display = 'none';
// Disable submit button
submitButton.disabled = true;
submitButton.textContent = 'Submitting...';
// Collect form data
const formData = {
contact: {
name: document.getElementById('contact-name').value,
email: document.getElementById('contact-email').value,
outlet: document.getElementById('contact-outlet').value,
phone: document.getElementById('contact-phone').value || null
},
inquiry: {
subject: document.getElementById('inquiry-subject').value,
message: document.getElementById('inquiry-message').value,
deadline: document.getElementById('inquiry-deadline').value || null,
topic_areas: []
}
};
try {
const response = await fetch('/api/media/inquiries', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify(formData)
});
const data = await response.json();
if (response.ok) {
// Success
successMessage.textContent = data.message || 'Thank you for your inquiry. We will review and respond shortly.';
successMessage.style.display = 'block';
form.reset();
window.scrollTo({ top: 0, behavior: 'smooth' });
} else {
// Error
errorMessage.textContent = data.message || 'An error occurred. Please try again.';
errorMessage.style.display = 'block';
window.scrollTo({ top: 0, behavior: 'smooth' });
}
} catch (error) {
console.error('Submit error:', error);
errorMessage.textContent = 'Network error. Please check your connection and try again.';
errorMessage.style.display = 'block';
window.scrollTo({ top: 0, behavior: 'smooth' });
} finally {
// Re-enable submit button
submitButton.disabled = false;
submitButton.textContent = 'Submit Inquiry';
}
});
</script>
</body> </body>
</html> </html>

56
public/media-triage-transparency.html
View file

@ -6,6 +6,7 @@
<title>Media Triage Transparency | Tractatus Framework</title> <title>Media Triage Transparency | Tractatus Framework</title>
<meta name="description" content="Transparent AI-powered media inquiry triage with 100% human oversight. See how the Tractatus framework governs AI analysis in practice."> <meta name="description" content="Transparent AI-powered media inquiry triage with 100% human oversight. See how the Tractatus framework governs AI analysis in practice.">
<link rel="stylesheet" href="/css/tailwind.css"> <link rel="stylesheet" href="/css/tailwind.css">
<link rel="stylesheet" href="/css/tractatus-theme.min.css">
<style> <style>
/* Accessibility: Skip link */ /* Accessibility: Skip link */
.skip-link { position: absolute; left: -9999px; top: 0; } .skip-link { position: absolute; left: -9999px; top: 0; }
@ -187,7 +188,7 @@
<span id="urgency-high-count" class="text-gray-600">- inquiries</span> <span id="urgency-high-count" class="text-gray-600">- inquiries</span>
</div> </div>
<div class="w-full bg-gray-200 rounded-full h-3"> <div class="w-full bg-gray-200 rounded-full h-3">
<div id="urgency-high-bar" class="bg-red-500 h-3 rounded-full" style="width: 0%"></div> <div id="urgency-high-bar" class="bg-red-500 h-3 rounded-full"></div>
</div> </div>
</div> </div>
@ -198,7 +199,7 @@
<span id="urgency-medium-count" class="text-gray-600">- inquiries</span> <span id="urgency-medium-count" class="text-gray-600">- inquiries</span>
</div> </div>
<div class="w-full bg-gray-200 rounded-full h-3"> <div class="w-full bg-gray-200 rounded-full h-3">
<div id="urgency-medium-bar" class="bg-yellow-500 h-3 rounded-full" style="width: 0%"></div> <div id="urgency-medium-bar" class="bg-yellow-500 h-3 rounded-full"></div>
</div> </div>
</div> </div>
@ -209,7 +210,7 @@
<span id="urgency-low-count" class="text-gray-600">- inquiries</span> <span id="urgency-low-count" class="text-gray-600">- inquiries</span>
</div> </div>
<div class="w-full bg-gray-200 rounded-full h-3"> <div class="w-full bg-gray-200 rounded-full h-3">
<div id="urgency-low-bar" class="bg-green-500 h-3 rounded-full" style="width: 0%"></div> <div id="urgency-low-bar" class="bg-green-500 h-3 rounded-full"></div>
</div> </div>
</div> </div>
</div> </div>
@ -228,7 +229,7 @@
<span id="sensitivity-high-count" class="text-gray-600">- inquiries</span> <span id="sensitivity-high-count" class="text-gray-600">- inquiries</span>
</div> </div>
<div class="w-full bg-gray-200 rounded-full h-3"> <div class="w-full bg-gray-200 rounded-full h-3">
<div id="sensitivity-high-bar" class="bg-red-500 h-3 rounded-full" style="width: 0%"></div> <div id="sensitivity-high-bar" class="bg-red-500 h-3 rounded-full"></div>
</div> </div>
</div> </div>
@ -239,7 +240,7 @@
<span id="sensitivity-medium-count" class="text-gray-600">- inquiries</span> <span id="sensitivity-medium-count" class="text-gray-600">- inquiries</span>
</div> </div>
<div class="w-full bg-gray-200 rounded-full h-3"> <div class="w-full bg-gray-200 rounded-full h-3">
<div id="sensitivity-medium-bar" class="bg-yellow-500 h-3 rounded-full" style="width: 0%"></div> <div id="sensitivity-medium-bar" class="bg-yellow-500 h-3 rounded-full"></div>
</div> </div>
</div> </div>
@ -250,7 +251,7 @@
<span id="sensitivity-low-count" class="text-gray-600">- inquiries</span> <span id="sensitivity-low-count" class="text-gray-600">- inquiries</span>
</div> </div>
<div class="w-full bg-gray-200 rounded-full h-3"> <div class="w-full bg-gray-200 rounded-full h-3">
<div id="sensitivity-low-bar" class="bg-green-500 h-3 rounded-full" style="width: 0%"></div> <div id="sensitivity-low-bar" class="bg-green-500 h-3 rounded-full"></div>
</div> </div>
</div> </div>
</div> </div>
@ -354,47 +355,10 @@
</div> </div>
<!-- Footer --> <!-- Footer -->
<footer class="bg-gray-900 text-gray-400 py-12">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="grid grid-cols-1 md:grid-cols-4 gap-8">
<div>
<h3 class="text-white font-bold mb-4">Tractatus Framework</h3>
<p class="text-sm">
Preserving human agency through architectural constraints, not aspirational goals.
</p>
</div>
<div>
<h3 class="text-white font-bold mb-4">Audience Paths</h3>
<ul class="space-y-2 text-sm">
<li><a href="/researcher.html" class="hover:text-white">Researchers</a></li>
<li><a href="/implementer.html" class="hover:text-white">Implementers</a></li>
<li><a href="/leader.html" class="hover:text-white">Leaders</a></li>
</ul>
</div>
<div>
<h3 class="text-white font-bold mb-4">Resources</h3>
<ul class="space-y-2 text-sm">
<li><a href="/docs.html" class="hover:text-white">Documentation</a></li>
<li><a href="/media-triage-transparency.html" class="hover:text-white">Triage Transparency</a></li>
<li><a href="/" class="hover:text-white">Home</a></li>
</ul>
</div>
<div>
<h3 class="text-white font-bold mb-4">Community</h3>
<ul class="space-y-2 text-sm">
<li><a href="/media-inquiry.html" class="hover:text-white">Media Inquiries</a></li>
<li><a href="/case-submission.html" class="hover:text-white">Submit Case Study</a></li>
</ul>
</div>
</div>
<div class="mt-8 pt-8 border-t border-gray-800 text-center text-sm space-y-2">
<p class="text-gray-500">Safety Through Structure, Not Aspiration | Built with <a href="https://claude.ai/claude-code" class="text-blue-400 hover:text-blue-300 transition" target="_blank" rel="noopener">Claude Code</a></p>
<p>© 2025 John G Stroh. Licensed under <a href="https://www.apache.org/licenses/LICENSE-2.0" class="text-blue-400 hover:text-blue-300 transition" target="_blank" rel="noopener">Apache License 2.0</a>.</p>
</div>
</div>
</footer>
<script src="/js/media-triage-transparency.js"></script> <script src="/js/media-triage-transparency.js"></script>
<!-- Footer Component -->
<script src="/js/components/footer.js"></script>
</body> </body>
</html> </html>

1
public/privacy.html
View file

@ -6,6 +6,7 @@
<title>Privacy Policy | Tractatus AI Safety Framework</title> <title>Privacy Policy | Tractatus AI Safety Framework</title>
<meta name="description" content="Privacy policy for the Tractatus AI Safety Framework. Learn how we collect, use, and protect your data."> <meta name="description" content="Privacy policy for the Tractatus AI Safety Framework. Learn how we collect, use, and protect your data.">
<link rel="stylesheet" href="/css/tailwind.css?v=0.1.0.1760254958072"> <link rel="stylesheet" href="/css/tailwind.css?v=0.1.0.1760254958072">
<link rel="stylesheet" href="/css/tractatus-theme.min.css">
<style> <style>
.skip-link { position: absolute; left: -9999px; } .skip-link { position: absolute; left: -9999px; }
.skip-link:focus { left: 0; z-index: 100; background: white; padding: 1rem; } .skip-link:focus { left: 0; z-index: 100; background: white; padding: 1rem; }

106
public/researcher.html
View file

@ -14,9 +14,12 @@
<meta name="apple-mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="default"> <meta name="apple-mobile-web-app-status-bar-style" content="default">
<meta name="apple-mobile-web-app-title" content="Tractatus"> <meta name="apple-mobile-web-app-title" content="Tractatus">
<link rel="apple-touch-icon" href="/images/tractatus-icon.svg"> <link rel="apple-touch-icon" href="/images/tractatus-icon-new.svg">
<link rel="icon" type="image/svg+xml" href="/favicon-new.svg">
<link rel="stylesheet" href="/css/fonts.css">
<link rel="stylesheet" href="/css/tailwind.css?v=0.1.0.1760254958072"> <link rel="stylesheet" href="/css/tailwind.css?v=0.1.0.1760254958072">
<link rel="stylesheet" href="/css/tractatus-theme.min.css?v=1760816800">
<style> <style>
.skip-link { position: absolute; left: -9999px; } .skip-link { position: absolute; left: -9999px; }
.skip-link:focus { left: 0; z-index: 100; background: white; padding: 1rem; } .skip-link:focus { left: 0; z-index: 100; background: white; padding: 1rem; }
@ -43,6 +46,17 @@
<script src="/js/components/navbar.js?v=0.1.0.1760254958072"></script> <script src="/js/components/navbar.js?v=0.1.0.1760254958072"></script>
<!-- Breadcrumb Navigation -->
<nav class="bg-gray-50 border-b border-gray-200 py-3" aria-label="Breadcrumb">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<ol class="flex items-center space-x-2 text-sm">
<li><a href="/" class="hover:underline transition-colors" style="color: var(--tractatus-core-end);">Home</a></li>
<li class="text-gray-400">/</li>
<li class="text-gray-900 font-medium" aria-current="page">Researcher</li>
</ol>
</div>
</nav>
<!-- Header --> <!-- Header -->
<div class="bg-gray-50 border-b border-gray-200 py-16"> <div class="bg-gray-50 border-b border-gray-200 py-16">
<div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8"> <div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
@ -87,10 +101,10 @@
<h2 class="text-2xl font-bold text-gray-900 mb-6" data-i18n="sections.theoretical_foundations.heading">Theoretical Foundations</h2> <h2 class="text-2xl font-bold text-gray-900 mb-6" data-i18n="sections.theoretical_foundations.heading">Theoretical Foundations</h2>
<!-- Organisational Theory --> <!-- Organisational Theory -->
<div class="border border-gray-300 rounded-lg mb-4"> <div class="border-l-4 border border-gray-200 rounded-lg mb-4" style="border-left-color: #8b5cf6;">
<div class="accordion-button bg-gray-50 p-5 flex justify-between items-center" data-accordion="org-theory"> <div class="accordion-button bg-white p-5 flex justify-between items-center hover:bg-purple-50 transition-colors duration-200" data-accordion="org-theory">
<h3 class="font-semibold text-gray-900" data-i18n="sections.theoretical_foundations.org_theory_title">Organisational Theory Basis</h3> <h3 class="font-semibold text-gray-900 group-hover:text-[#8b5cf6] transition-colors" data-i18n="sections.theoretical_foundations.org_theory_title">Organisational Theory Basis</h3>
<svg id="org-theory-icon" class="accordion-icon w-5 h-5 text-gray-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <svg id="org-theory-icon" class="accordion-icon w-5 h-5 text-purple-600 transition-transform duration-300" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/>
</svg> </svg>
</div> </div>
@ -136,10 +150,10 @@
</div> </div>
<!-- Values Pluralism --> <!-- Values Pluralism -->
<div class="border border-gray-300 rounded-lg"> <div class="border-l-4 border border-gray-200 rounded-lg" style="border-left-color: #8b5cf6;">
<div class="accordion-button bg-gray-50 p-5 flex justify-between items-center" data-accordion="values"> <div class="accordion-button bg-white p-5 flex justify-between items-center hover:bg-purple-50 transition-colors duration-200" data-accordion="values">
<h3 class="font-semibold text-gray-900" data-i18n="sections.theoretical_foundations.values_pluralism_title">Values Pluralism & Moral Philosophy</h3> <h3 class="font-semibold text-gray-900 group-hover:text-[#8b5cf6] transition-colors" data-i18n="sections.theoretical_foundations.values_pluralism_title">Values Pluralism & Moral Philosophy</h3>
<svg id="values-icon" class="accordion-icon w-5 h-5 text-gray-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <svg id="values-icon" class="accordion-icon w-5 h-5 text-purple-600 transition-transform duration-300" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/>
</svg> </svg>
</div> </div>
@ -283,10 +297,10 @@
<section class="mb-16"> <section class="mb-16">
<h2 class="text-2xl font-bold text-gray-900 mb-6" data-i18n="sections.architecture.heading">Six-Component Architecture</h2> <h2 class="text-2xl font-bold text-gray-900 mb-6" data-i18n="sections.architecture.heading">Six-Component Architecture</h2>
<div class="border border-gray-300 rounded-lg"> <div class="border-l-4 border border-gray-200 rounded-lg" style="border-left-color: #8b5cf6;">
<div class="accordion-button bg-gray-50 p-5 flex justify-between items-center" data-accordion="architecture"> <div class="accordion-button bg-white p-5 flex justify-between items-center hover:bg-purple-50 transition-colors duration-200" data-accordion="architecture">
<h3 class="font-semibold text-gray-900" data-i18n="sections.architecture.services_title">Framework Services & Functions</h3> <h3 class="font-semibold text-gray-900 group-hover:text-[#8b5cf6] transition-colors" data-i18n="sections.architecture.services_title">Framework Services & Functions</h3>
<svg id="architecture-icon" class="accordion-icon w-5 h-5 text-gray-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <svg id="architecture-icon" class="accordion-icon w-5 h-5 text-purple-600 transition-transform duration-300" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/>
</svg> </svg>
</div> </div>
@ -425,10 +439,10 @@
<section class="mb-16"> <section class="mb-16">
<h2 class="text-2xl font-bold text-gray-900 mb-6" data-i18n="sections.limitations.heading">Limitations & Future Research Directions</h2> <h2 class="text-2xl font-bold text-gray-900 mb-6" data-i18n="sections.limitations.heading">Limitations & Future Research Directions</h2>
<div class="border border-gray-300 rounded-lg"> <div class="border-l-4 border border-gray-200 rounded-lg" style="border-left-color: #8b5cf6;">
<div class="accordion-button bg-gray-50 p-5 flex justify-between items-center" data-accordion="limitations"> <div class="accordion-button bg-white p-5 flex justify-between items-center hover:bg-purple-50 transition-colors duration-200" data-accordion="limitations">
<h3 class="font-semibold text-gray-900" data-i18n="sections.limitations.title">Known Limitations & Research Gaps</h3> <h3 class="font-semibold text-gray-900 group-hover:text-[#8b5cf6] transition-colors" data-i18n="sections.limitations.title">Known Limitations & Research Gaps</h3>
<svg id="limitations-icon" class="accordion-icon w-5 h-5 text-gray-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <svg id="limitations-icon" class="accordion-icon w-5 h-5 text-purple-600 transition-transform duration-300" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/>
</svg> </svg>
</div> </div>
@ -495,64 +509,16 @@
<!-- Footer --> <!-- Footer -->
<!-- Footer --> <!-- Footer -->
<footer class="bg-gray-900 text-gray-400 py-12 mt-16" role="contentinfo">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="grid grid-cols-1 md:grid-cols-5 gap-8">
<div>
<h3 class="text-white font-semibold mb-4">Tractatus Framework</h3>
<p class="text-sm">
Reference implementation of architectural AI safety constraints—structural governance validated in single-project deployment.
</p>
</div>
<div>
<h3 class="text-white font-semibold mb-4">Resources</h3>
<ul class="space-y-2 text-sm">
<li><a href="/docs.html" class="hover:text-white transition">Documentation</a></li>
<li><a href="/demos/tractatus-demo.html" class="hover:text-white transition">Interactive Demos</a></li>
<li><a href="/researcher.html" class="hover:text-white transition">For Researchers</a></li>
<li><a href="/implementer.html" class="hover:text-white transition">For Implementers</a></li>
<li><a href="/leader.html" class="hover:text-white transition">For Leaders</a></li>
<li><a href="/about.html" class="hover:text-white transition">About & Values</a></li>
</ul>
</div>
<div>
<h3 class="text-white font-semibold mb-4">Community</h3>
<ul class="space-y-2 text-sm">
<li><a href="/media-inquiry.html" class="hover:text-white transition">Media Inquiries</a></li>
<li><a href="/case-submission.html" class="hover:text-white transition">Submit Case Study</a></li>
<li><a href="/blog.html" class="hover:text-white transition">Blog</a></li>
<li><a href="/#newsletter" class="hover:text-white transition">Newsletter</a></li>
</ul>
</div>
<div>
<h3 class="text-white font-semibold mb-4">Support This Work</h3>
<ul class="space-y-2 text-sm">
<li><a href="/koha.html" class="hover:text-white transition">Make a Donation</a></li>
<li><a href="/koha/transparency.html" class="hover:text-white transition">Transparency Dashboard</a></li>
</ul>
</div>
<div>
<h3 class="text-white font-semibold mb-4">Acknowledgment</h3>
<p class="text-sm">
This framework acknowledges Te Tiriti o Waitangi and indigenous leadership in digital sovereignty.
Built with respect for CARE Principles and Māori data sovereignty.
</p>
</div>
</div>
<div class="mt-8 pt-8 border-t border-gray-800 text-center text-sm space-y-2">
<p class="text-gray-300">Safety Through Structure, Not Aspiration | Built with <a href="https://claude.ai/claude-code" class="text-blue-400 hover:text-blue-300 transition" target="_blank" rel="noopener">Claude Code</a></p>
<p>© 2025 John G Stroh. Licensed under <a href="https://www.apache.org/licenses/LICENSE-2.0" class="text-blue-400 hover:text-blue-300 transition" target="_blank" rel="noopener">Apache License 2.0</a>.</p>
</div>
</div>
</footer>
<!-- Internationalization --> <!-- Internationalization -->
<script src="/js/i18n-simple.js?v=0.1.0.1760643941"></script> <script src="/js/i18n-simple.js?v=1760818106"></script>
<script src="/js/components/language-selector.js?v=0.1.0.1760643941"></script> <script src="/js/components/language-selector.js?v=1760818106"></script>
<!-- Version Management & PWA --> <!-- Version Management & PWA -->
<script src="/js/version-manager.js"></script> <script src="/js/version-manager.js"></script>
<script src="/js/researcher-page.js"></script> <script src="/js/researcher-page.js"></script>
<!-- Footer Component -->
<script src="/js/components/footer.js"></script>
</body> </body>
</html> </html>

63
public/service-worker.js
View file

@ -5,7 +5,7 @@
* - PWA functionality * - PWA functionality
*/ */
const CACHE_VERSION = '1.1.1'; const CACHE_VERSION = '1.1.5';
const CACHE_NAME = `tractatus-v${CACHE_VERSION}`; const CACHE_NAME = `tractatus-v${CACHE_VERSION}`;
const VERSION_CHECK_INTERVAL = 3600000; // 1 hour in milliseconds const VERSION_CHECK_INTERVAL = 3600000; // 1 hour in milliseconds
@ -61,48 +61,65 @@ self.addEventListener('fetch', (event) => {
return; return;
} }
// HTML files: Network-first (always check for updates) // HTML files: Network-ONLY (never cache, always fetch fresh)
// This ensures users always get the latest content without cache refresh
if (request.destination === 'document' || url.pathname.endsWith('.html')) { if (request.destination === 'document' || url.pathname.endsWith('.html')) {
event.respondWith( event.respondWith(
fetch(request) fetch(request)
.then((response) => {
// Clone response to cache and return
const responseClone = response.clone();
caches.open(CACHE_NAME).then((cache) => {
cache.put(request, responseClone);
});
return response;
})
.catch(() => { .catch(() => {
// If network fails, try cache // Only for offline fallback: serve cached index.html
return caches.match(request); if (url.pathname === '/' || url.pathname === '/index.html') {
return caches.match('/index.html');
}
// All other HTML: network only, fail if offline
throw new Error('Network required for HTML pages');
}) })
); );
return; return;
} }
// Static assets (CSS, JS, images): Cache-first // Static assets (CSS, JS, images): Network-first for versioned URLs, cache-first for others
if ( if (
request.destination === 'style' || request.destination === 'style' ||
request.destination === 'script' || request.destination === 'script' ||
request.destination === 'image' || request.destination === 'image' ||
request.destination === 'font' request.destination === 'font'
) { ) {
event.respondWith( // If URL has version parameter, always fetch fresh (network-first)
caches.match(request).then((cachedResponse) => { const hasVersionParam = url.searchParams.has('v');
if (cachedResponse) {
return cachedResponse; if (hasVersionParam) {
} // Network-first for versioned assets (ensures cache-busting works)
return fetch(request).then((response) => { event.respondWith(
// Clone response to cache fetch(request).then((response) => {
// Cache the response for offline use
const responseClone = response.clone(); const responseClone = response.clone();
caches.open(CACHE_NAME).then((cache) => { caches.open(CACHE_NAME).then((cache) => {
cache.put(request, responseClone); cache.put(request, responseClone);
}); });
return response; return response;
}); }).catch(() => {
}) // Fallback to cache if offline
); return caches.match(request);
})
);
} else {
// Cache-first for non-versioned assets
event.respondWith(
caches.match(request).then((cachedResponse) => {
if (cachedResponse) {
return cachedResponse;
}
return fetch(request).then((response) => {
const responseClone = response.clone();
caches.open(CACHE_NAME).then((cache) => {
cache.put(request, responseClone);
});
return response;
});
})
);
}
return; return;
} }

12
public/version.json
View file

@ -1,11 +1,11 @@
{ {
"version": "1.1.1", "version": "1.1.5",
"buildDate": "2025-10-14T01:30:00Z", "buildDate": "2025-10-18T03:03:00Z",
"changelog": [ "changelog": [
"Revised Copilot Q&A to match measured tone of leader page", "Implemented proper cache-busting for JavaScript files",
"Removed overconfident claims, added context and limitations", "Versioned assets now use network-first strategy",
"Focused on structural governance questions rather than assertions" "Fixes deployment issues without requiring manual cache clearing"
], ],
"forceUpdate": true, "forceUpdate": true,
"minVersion": "1.1.1" "minVersion": "1.1.5"
} }