feat: add version control system and PWA support
Implements cache busting and progressive web app features: **Version Management:** - version.json manifest with changelog tracking - Service worker with automatic update checking (hourly) - Update notification UI with changelog display - Configurable forced updates after timeout - Cache control headers for optimal performance **PWA Features:** - manifest.json with app shortcuts - Apple touch icon support - "Add to Home Screen" functionality - Offline support via service worker **Cache Strategy:** - HTML: 5-minute cache with revalidation - CSS/JS: 1-year immutable cache - Images: 1-year immutable cache - version.json/service-worker.js: no-cache **Integration:** - All main pages updated with PWA meta tags - Version manager loaded on all user-facing pages - Production deployment successful Users who previously visited the site will now automatically receive update notifications when version changes. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
TheFlow
parent
c984ebfd7d
commit
f19154c9e6
11 changed files with 1888 additions and 1375 deletions
262
public/docs.html
262
public/docs.html
|
|
@ -5,6 +5,17 @@
|
|||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Framework Documentation | Tractatus AI Safety</title>
|
||||
<link rel="icon" type="image/svg+xml" href="/favicon.svg">
|
||||
|
||||
<!-- PWA Manifest -->
|
||||
<link rel="manifest" href="/manifest.json">
|
||||
|
||||
<!-- PWA Meta Tags -->
|
||||
<meta name="theme-color" content="#3b82f6">
|
||||
<meta name="apple-mobile-web-app-capable" content="yes">
|
||||
<meta name="apple-mobile-web-app-status-bar-style" content="default">
|
||||
<meta name="apple-mobile-web-app-title" content="Tractatus">
|
||||
<link rel="apple-touch-icon" href="/images/tractatus-icon.svg">
|
||||
|
||||
<link rel="stylesheet" href="/css/tailwind.css?v=0.1.0.1760254958072">
|
||||
<style>
|
||||
html { scroll-behavior: smooth; }
|
||||
|
|
@ -372,6 +383,53 @@
|
|||
.toc-indent-1 { padding-left: 12px; }
|
||||
.toc-indent-2 { padding-left: 28px; }
|
||||
.toc-indent-3 { padding-left: 44px; }
|
||||
|
||||
/* Search Modal */
|
||||
#search-modal {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#search-modal.show {
|
||||
display: flex !important;
|
||||
position: fixed !important;
|
||||
top: 0 !important;
|
||||
left: 0 !important;
|
||||
right: 0 !important;
|
||||
bottom: 0 !important;
|
||||
animation: fadeIn 0.2s ease-out forwards;
|
||||
background: rgba(0, 0, 0, 0.5) !important;
|
||||
}
|
||||
|
||||
#search-modal.show > div {
|
||||
animation: slideUp 0.3s ease-out forwards;
|
||||
opacity: 1 !important;
|
||||
}
|
||||
|
||||
/* Search modal content scrolling */
|
||||
#search-modal-content {
|
||||
max-height: 70vh;
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
/* Custom scrollbar for search modal */
|
||||
#search-modal-content::-webkit-scrollbar {
|
||||
width: 8px;
|
||||
}
|
||||
|
||||
#search-modal-content::-webkit-scrollbar-track {
|
||||
background: #f1f1f1;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
#search-modal-content::-webkit-scrollbar-thumb {
|
||||
background: #cbd5e1;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
#search-modal-content::-webkit-scrollbar-thumb:hover {
|
||||
background: #94a3b8;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body class="bg-gray-50">
|
||||
|
|
@ -385,91 +443,17 @@
|
|||
<!-- Page Header -->
|
||||
<div class="bg-white border-b border-gray-200">
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
|
||||
<h1 class="text-3xl font-bold text-gray-900">Framework Documentation</h1>
|
||||
<p class="text-gray-600 mt-2">Technical specifications, guides, and reference materials</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Search Section -->
|
||||
<div class="bg-gray-50 border-b border-gray-200">
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-6">
|
||||
<!-- Search Input -->
|
||||
<div class="mb-4">
|
||||
<div class="relative">
|
||||
<input
|
||||
type="text"
|
||||
id="docs-search-input"
|
||||
placeholder="Search documentation..."
|
||||
class="w-full px-4 py-3 pl-11 pr-4 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition"
|
||||
aria-label="Search documentation"
|
||||
/>
|
||||
<svg class="absolute left-3 top-3.5 h-5 w-5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<div class="flex items-center justify-between">
|
||||
<div>
|
||||
<h1 class="text-3xl font-bold text-gray-900">Framework Documentation</h1>
|
||||
<p class="text-gray-600 mt-2">Technical specifications, guides, and reference materials</p>
|
||||
</div>
|
||||
<button type="button" id="open-search-modal-btn" class="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition flex items-center gap-2" aria-label="Open search">
|
||||
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"/>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Filters Row -->
|
||||
<div class="flex flex-wrap items-center gap-3">
|
||||
<!-- Quadrant Filter -->
|
||||
<div class="flex-1 min-w-[200px]">
|
||||
<label for="filter-quadrant" class="sr-only">Filter by Quadrant</label>
|
||||
<select id="filter-quadrant" class="w-full px-3 py-2 border border-gray-300 rounded-lg bg-white focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition">
|
||||
<option value="">All Quadrants</option>
|
||||
<option value="STR">Strategic</option>
|
||||
<option value="OPS">Operational</option>
|
||||
<option value="TAC">Tactical</option>
|
||||
<option value="SYS">System</option>
|
||||
<option value="STO">Storage</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<!-- Persistence Filter -->
|
||||
<div class="flex-1 min-w-[200px]">
|
||||
<label for="filter-persistence" class="sr-only">Filter by Persistence</label>
|
||||
<select id="filter-persistence" class="w-full px-3 py-2 border border-gray-300 rounded-lg bg-white focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition">
|
||||
<option value="">All Persistence Levels</option>
|
||||
<option value="HIGH">High</option>
|
||||
<option value="MEDIUM">Medium</option>
|
||||
<option value="LOW">Low</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<!-- Audience Filter -->
|
||||
<div class="flex-1 min-w-[200px]">
|
||||
<label for="filter-audience" class="sr-only">Filter by Audience</label>
|
||||
<select id="filter-audience" class="w-full px-3 py-2 border border-gray-300 rounded-lg bg-white focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition">
|
||||
<option value="">All Audiences</option>
|
||||
<option value="researcher">Researcher</option>
|
||||
<option value="implementer">Implementer</option>
|
||||
<option value="leader">Leader</option>
|
||||
<option value="technical">Technical</option>
|
||||
<option value="general">General</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<!-- Clear Filters Button -->
|
||||
<button id="clear-filters-btn" class="px-4 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-lg hover:bg-gray-50 transition">
|
||||
Clear Filters
|
||||
<span>Search</span>
|
||||
</button>
|
||||
|
||||
<!-- Search Tips Button -->
|
||||
<button id="search-tips-btn" class="p-2 text-gray-600 hover:text-blue-600 hover:bg-white rounded-lg transition" title="Search Tips" aria-label="Show search tips">
|
||||
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Search Results Summary -->
|
||||
<div id="search-results-summary" class="mt-4 text-sm text-gray-600 hidden">
|
||||
<span id="search-results-count"></span>
|
||||
</div>
|
||||
|
||||
<!-- Search History (Recent Searches) -->
|
||||
<div id="search-history-container" class="mt-3 hidden">
|
||||
<div class="text-xs text-gray-500 mb-2">Recent Searches:</div>
|
||||
<div id="search-history" class="flex flex-wrap gap-2"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -601,7 +585,7 @@
|
|||
</div>
|
||||
|
||||
<!-- ToC Modal -->
|
||||
<div id="toc-modal" class="fixed inset-0 bg-black bg-opacity-50 z-50 items-center justify-center p-4">
|
||||
<div id="toc-modal" class="fixed inset-0 bg-black bg-opacity-50 z-50 flex items-center justify-center p-4">
|
||||
<div class="bg-white rounded-lg shadow-2xl max-w-2xl w-full max-h-[80vh] flex flex-col">
|
||||
<!-- Modal Header -->
|
||||
<div class="flex items-center justify-between p-6 border-b border-gray-200">
|
||||
|
|
@ -623,7 +607,7 @@
|
|||
</div>
|
||||
|
||||
<!-- Search Tips Modal -->
|
||||
<div id="search-tips-modal" class="fixed inset-0 bg-black bg-opacity-50 z-50 items-center justify-center p-4 hidden">
|
||||
<div id="search-tips-modal" class="fixed inset-0 bg-black bg-opacity-50 z-50 flex items-center justify-center p-4 hidden">
|
||||
<div class="bg-white rounded-lg shadow-2xl max-w-2xl w-full max-h-[80vh] flex flex-col">
|
||||
<!-- Modal Header -->
|
||||
<div class="flex items-center justify-between p-6 border-b border-gray-200">
|
||||
|
|
@ -717,6 +701,116 @@
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Search Modal -->
|
||||
<div id="search-modal" class="fixed inset-0 bg-black bg-opacity-50 z-50 flex items-center justify-center p-4">
|
||||
<div class="bg-white rounded-lg shadow-2xl max-w-4xl w-full max-h-[85vh] flex flex-col">
|
||||
<!-- Modal Header -->
|
||||
<div class="flex items-center justify-between p-6 border-b border-gray-200">
|
||||
<h2 class="text-2xl font-bold text-gray-900">Search Documentation</h2>
|
||||
<button id="search-modal-close-btn"
|
||||
class="p-2 text-gray-400 hover:text-gray-600 hover:bg-gray-100 rounded transition"
|
||||
aria-label="Close search">
|
||||
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Modal Content -->
|
||||
<div id="search-modal-content" class="flex-1 overflow-y-auto p-6">
|
||||
<!-- Search Input -->
|
||||
<div class="mb-4">
|
||||
<div class="relative">
|
||||
<input
|
||||
type="text"
|
||||
id="docs-search-input"
|
||||
placeholder="Search documentation..."
|
||||
class="w-full px-4 py-3 pl-11 pr-4 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition"
|
||||
aria-label="Search documentation"
|
||||
/>
|
||||
<svg class="absolute left-3 top-3.5 h-5 w-5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"/>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Filters Row -->
|
||||
<div class="flex flex-wrap items-center gap-3 mb-4">
|
||||
<!-- Quadrant Filter -->
|
||||
<div class="flex-1 min-w-[200px]">
|
||||
<label for="filter-quadrant" class="sr-only">Filter by Quadrant</label>
|
||||
<select id="filter-quadrant" class="w-full px-3 py-2 border border-gray-300 rounded-lg bg-white focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition">
|
||||
<option value="">All Quadrants</option>
|
||||
<option value="STR">Strategic</option>
|
||||
<option value="OPS">Operational</option>
|
||||
<option value="TAC">Tactical</option>
|
||||
<option value="SYS">System</option>
|
||||
<option value="STO">Storage</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<!-- Persistence Filter -->
|
||||
<div class="flex-1 min-w-[200px]">
|
||||
<label for="filter-persistence" class="sr-only">Filter by Persistence</label>
|
||||
<select id="filter-persistence" class="w-full px-3 py-2 border border-gray-300 rounded-lg bg-white focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition">
|
||||
<option value="">All Persistence Levels</option>
|
||||
<option value="HIGH">High</option>
|
||||
<option value="MEDIUM">Medium</option>
|
||||
<option value="LOW">Low</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<!-- Audience Filter -->
|
||||
<div class="flex-1 min-w-[200px]">
|
||||
<label for="filter-audience" class="sr-only">Filter by Audience</label>
|
||||
<select id="filter-audience" class="w-full px-3 py-2 border border-gray-300 rounded-lg bg-white focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition">
|
||||
<option value="">All Audiences</option>
|
||||
<option value="researcher">Researcher</option>
|
||||
<option value="implementer">Implementer</option>
|
||||
<option value="leader">Leader</option>
|
||||
<option value="technical">Technical</option>
|
||||
<option value="general">General</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<!-- Clear Filters Button -->
|
||||
<button id="clear-filters-btn" class="px-4 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-lg hover:bg-gray-50 transition">
|
||||
Clear Filters
|
||||
</button>
|
||||
|
||||
<!-- Search Tips Button -->
|
||||
<button id="search-tips-btn" class="p-2 text-gray-600 hover:text-blue-600 hover:bg-white rounded-lg transition" title="Search Tips" aria-label="Show search tips">
|
||||
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Search Results Summary -->
|
||||
<div id="search-results-summary" class="mb-4 text-sm text-gray-600 hidden">
|
||||
<span id="search-results-count"></span>
|
||||
</div>
|
||||
|
||||
<!-- Search History (Recent Searches) -->
|
||||
<div id="search-history-container" class="mb-4 hidden">
|
||||
<div class="text-xs text-gray-500 mb-2">Recent Searches:</div>
|
||||
<div id="search-history" class="flex flex-wrap gap-2"></div>
|
||||
</div>
|
||||
|
||||
<!-- Search Results in Modal -->
|
||||
<div id="search-results-modal" class="mt-6 hidden">
|
||||
<h3 class="text-lg font-semibold text-gray-900 mb-4">Search Results</h3>
|
||||
<div id="search-results-list-modal" class="space-y-4">
|
||||
<!-- Results will be populated here by JavaScript -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Version Management & PWA -->
|
||||
<script src="/js/version-manager.js"></script>
|
||||
|
||||
<script src="/js/components/document-cards.js?v=0.1.0.1760254958072"></script>
|
||||
<script src="/js/docs-app.js?v=0.1.0.1760254958072"></script>
|
||||
<script src="/js/docs-search-enhanced.js?v=0.1.0.1760254958072"></script>
|
||||
|
|
|
|||
|
|
@ -6,6 +6,17 @@
|
|||
<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.">
|
||||
<link rel="icon" type="image/svg+xml" href="/favicon.svg">
|
||||
|
||||
<!-- PWA Manifest -->
|
||||
<link rel="manifest" href="/manifest.json">
|
||||
|
||||
<!-- PWA Meta Tags -->
|
||||
<meta name="theme-color" content="#3b82f6">
|
||||
<meta name="apple-mobile-web-app-capable" content="yes">
|
||||
<meta name="apple-mobile-web-app-status-bar-style" content="default">
|
||||
<meta name="apple-mobile-web-app-title" content="Tractatus">
|
||||
<link rel="apple-touch-icon" href="/images/tractatus-icon.svg">
|
||||
|
||||
<link rel="stylesheet" href="/css/tailwind.css?v=0.1.0.1760254958072">
|
||||
|
||||
<!-- Syntax highlighting for code blocks -->
|
||||
|
|
@ -336,6 +347,9 @@
|
|||
</div>
|
||||
</footer>
|
||||
|
||||
<!-- Version Management & PWA -->
|
||||
<script src="/js/version-manager.js"></script>
|
||||
|
||||
<script src="/js/faq.js?v=0.1.0.1760254958072"></script>
|
||||
|
||||
</body>
|
||||
|
|
|
|||
|
|
@ -5,6 +5,17 @@
|
|||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>For Implementers | Tractatus AI Safety Framework</title>
|
||||
<meta name="description" content="Integrate Tractatus framework into your AI systems: practical guides, code examples, and step-by-step implementation for production safety.">
|
||||
|
||||
<!-- PWA Manifest -->
|
||||
<link rel="manifest" href="/manifest.json">
|
||||
|
||||
<!-- PWA Meta Tags -->
|
||||
<meta name="theme-color" content="#3b82f6">
|
||||
<meta name="apple-mobile-web-app-capable" content="yes">
|
||||
<meta name="apple-mobile-web-app-status-bar-style" content="default">
|
||||
<meta name="apple-mobile-web-app-title" content="Tractatus">
|
||||
<link rel="apple-touch-icon" href="/images/tractatus-icon.svg">
|
||||
|
||||
<link rel="stylesheet" href="/css/tailwind.css?v=0.1.0.1760254958072">
|
||||
<style>
|
||||
/* Accessibility: Skip link */
|
||||
|
|
@ -33,10 +44,10 @@
|
|||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div class="text-center">
|
||||
<h1 class="text-5xl font-bold text-gray-900 mb-6">
|
||||
Production-Ready<br>AI Safety
|
||||
Reference Implementation<br>AI Safety Patterns
|
||||
</h1>
|
||||
<p class="text-xl text-gray-600 max-w-3xl mx-auto mb-8">
|
||||
Integrate Tractatus framework into your AI systems with practical guides, code examples, and battle-tested patterns for real-world deployment.
|
||||
Integrate Tractatus framework into your AI systems with practical guides, code examples, and patterns demonstrated in 6-month development project.
|
||||
</p>
|
||||
<div class="flex justify-center space-x-4">
|
||||
<a href="#quickstart" class="bg-blue-600 text-white px-6 py-3 rounded-lg font-semibold hover:bg-blue-700 transition">
|
||||
|
|
@ -50,6 +61,19 @@
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Development Context Warning -->
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
|
||||
<div class="bg-amber-50 border-l-4 border-amber-500 p-6 rounded-r-lg">
|
||||
<p class="text-sm text-amber-900 font-medium mb-2">Development Context</p>
|
||||
<p class="text-sm text-amber-800 mb-3">
|
||||
Framework developed over six months in single-project context. Code examples below show reference implementation architecture. The npm package <code class="bg-amber-100 px-1 py-0.5 rounded">@tractatus/framework</code> represents planned API design, not published package. Actual implementation requires adapting patterns from this project's source code.
|
||||
</p>
|
||||
<p class="text-sm text-amber-800">
|
||||
This is exploratory research demonstrating feasibility of architectural governance patterns, not production-ready commercial software.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Deployment Architecture Guide -->
|
||||
<div class="bg-gradient-to-r from-blue-600 to-indigo-600 py-12">
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
|
|
@ -395,6 +419,14 @@
|
|||
<div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<h2 class="text-3xl font-bold text-gray-900 mb-8 text-center">Quick Start Guide</h2>
|
||||
|
||||
<!-- npm Package Disclaimer -->
|
||||
<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-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>.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="space-y-8">
|
||||
<!-- Step 1 -->
|
||||
<div class="border-l-4 border-blue-600 pl-6">
|
||||
|
|
@ -679,9 +711,9 @@ if (pressure.level === 'CRITICAL') {
|
|||
<!-- CTA Section -->
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-16">
|
||||
<div class="bg-gradient-to-r from-blue-600 to-indigo-600 rounded-2xl p-12 text-center text-white">
|
||||
<h2 class="text-3xl font-bold mb-4">Ready to Implement?</h2>
|
||||
<h2 class="text-3xl font-bold mb-4">Exploring Implementation?</h2>
|
||||
<p class="text-xl mb-8 opacity-90">
|
||||
Join organizations building safer AI systems with architectural guarantees.
|
||||
Explore architectural patterns for AI safety demonstrated in single-project validation.
|
||||
</p>
|
||||
<div class="flex justify-center space-x-4">
|
||||
<a href="/docs.html" class="bg-white text-blue-600 px-8 py-3 rounded-lg font-semibold hover:bg-gray-100 transition">
|
||||
|
|
@ -735,5 +767,8 @@ if (pressure.level === 'CRITICAL') {
|
|||
</div>
|
||||
</footer>
|
||||
|
||||
<!-- Version Management & PWA -->
|
||||
<script src="/js/version-manager.js"></script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -5,6 +5,17 @@
|
|||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Tractatus AI Safety Framework | Architectural Constraints for Human Agency</title>
|
||||
<meta name="description" content="World's first production implementation of architectural AI safety constraints. Preserving human agency through structural, not aspirational, guarantees.">
|
||||
|
||||
<!-- PWA Manifest -->
|
||||
<link rel="manifest" href="/manifest.json">
|
||||
|
||||
<!-- PWA Meta Tags -->
|
||||
<meta name="theme-color" content="#3b82f6">
|
||||
<meta name="apple-mobile-web-app-capable" content="yes">
|
||||
<meta name="apple-mobile-web-app-status-bar-style" content="default">
|
||||
<meta name="apple-mobile-web-app-title" content="Tractatus">
|
||||
<link rel="apple-touch-icon" href="/images/tractatus-icon.svg">
|
||||
|
||||
<link rel="icon" type="image/svg+xml" href="/favicon.svg">
|
||||
<link rel="stylesheet" href="/css/tailwind.css?v=0.1.0.1760254958072">
|
||||
<style>
|
||||
|
|
@ -40,8 +51,8 @@
|
|||
Tractatus AI Safety Framework
|
||||
</h1>
|
||||
<p class="text-xl md:text-2xl text-blue-100 mb-8 max-w-4xl mx-auto">
|
||||
Architectural constraints that ensure AI systems preserve human agency—<br>
|
||||
regardless of capability level
|
||||
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">
|
||||
<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">
|
||||
|
|
@ -50,6 +61,9 @@
|
|||
<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">
|
||||
Read Documentation
|
||||
</a>
|
||||
<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">
|
||||
FAQ
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -97,7 +111,7 @@
|
|||
</div>
|
||||
<div class="p-6">
|
||||
<p class="text-gray-700 mb-6">
|
||||
Explore the theoretical foundations, formal guarantees, and scholarly context of the Tractatus framework.
|
||||
Explore the theoretical foundations, architectural constraints, and scholarly context of the Tractatus framework.
|
||||
</p>
|
||||
<ul class="space-y-3 mb-6 text-sm">
|
||||
<li class="flex items-start">
|
||||
|
|
@ -140,7 +154,7 @@
|
|||
</div>
|
||||
<div class="p-6">
|
||||
<p class="text-gray-700 mb-6">
|
||||
Get hands-on with implementation guides, API documentation, and production-ready code examples.
|
||||
Get hands-on with implementation guides, API documentation, and reference code examples.
|
||||
</p>
|
||||
<ul class="space-y-3 mb-6 text-sm">
|
||||
<li class="flex items-start">
|
||||
|
|
@ -295,154 +309,49 @@
|
|||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Experience the Framework Section -->
|
||||
<section class="bg-gray-50 py-20" aria-labelledby="experience-framework">
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<!-- Section Header -->
|
||||
<!-- Real-World Validation Section -->
|
||||
<section class="bg-gray-50 py-16" aria-labelledby="validation">
|
||||
<div class="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div class="text-center mb-12">
|
||||
<h2 id="experience-framework" class="text-4xl font-bold text-gray-900 mb-4">Experience the Framework</h2>
|
||||
<p class="text-xl text-gray-600 max-w-3xl mx-auto">
|
||||
Explore real-world incidents showing how governance structures AI behavior—from preventing technical failures to catching fabrications
|
||||
<h2 id="validation" class="text-3xl font-bold text-gray-900 mb-4">Real-World Validation</h2>
|
||||
<p class="text-lg text-gray-600 max-w-2xl mx-auto">
|
||||
Framework validated in 6-month deployment across ~500 sessions with Claude Code
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- Incident Cards Grid -->
|
||||
<div class="grid grid-cols-1 lg:grid-cols-2 gap-8 mb-12">
|
||||
|
||||
<!-- 27027 Incident - Technical -->
|
||||
<div class="bg-white rounded-xl shadow-lg border border-gray-200 overflow-hidden hover-lift">
|
||||
<div class="bg-gradient-to-r from-blue-500 to-blue-600 px-6 py-4">
|
||||
<div class="flex items-center justify-between">
|
||||
<span class="inline-flex items-center px-3 py-1 rounded-full text-xs font-medium bg-blue-800 text-blue-100">
|
||||
Technical Failure
|
||||
</span>
|
||||
<span class="text-blue-100 text-sm">Original Incident</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="p-6">
|
||||
<h3 class="text-2xl font-bold text-gray-900 mb-3">The 27027 Incident</h3>
|
||||
<p class="text-gray-700 mb-4">
|
||||
How pattern recognition bias causes AI to override explicit human instructions—and why this problem gets worse as models improve.
|
||||
</p>
|
||||
<div class="mb-6">
|
||||
<div class="flex items-start mb-2">
|
||||
<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>
|
||||
<span class="text-sm text-gray-600"><strong>Appeal:</strong> Researchers, technical teams</span>
|
||||
</div>
|
||||
<div 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>
|
||||
<span class="text-sm text-gray-600"><strong>Shows:</strong> Cross-reference validation preventing instruction override</span>
|
||||
</div>
|
||||
</div>
|
||||
<a href="/demos/27027-demo.html" class="block w-full text-center bg-blue-600 text-white py-3 rounded-lg hover:bg-blue-700 transition font-semibold">
|
||||
View 27027 Demo
|
||||
</a>
|
||||
<!-- Single Featured Demo - 27027 Incident -->
|
||||
<div class="bg-white rounded-xl shadow-lg border border-gray-200 overflow-hidden max-w-3xl mx-auto mb-8">
|
||||
<div class="bg-gradient-to-r from-blue-500 to-blue-600 px-6 py-4">
|
||||
<div class="flex items-center justify-between">
|
||||
<span class="inline-flex items-center px-3 py-1 rounded-full text-xs font-medium bg-blue-800 text-blue-100">
|
||||
Pattern Bias Incident
|
||||
</span>
|
||||
<span class="text-blue-100 text-sm">Interactive Demo</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Fabrication Incident - Values -->
|
||||
<div class="bg-white rounded-xl shadow-lg border border-gray-200 overflow-hidden hover-lift">
|
||||
<div class="bg-gradient-to-r from-amber-500 to-orange-600 px-6 py-4">
|
||||
<div class="flex items-center justify-between">
|
||||
<span class="inline-flex items-center px-3 py-1 rounded-full text-xs font-medium bg-amber-800 text-amber-100">
|
||||
Values Failure
|
||||
</span>
|
||||
<span class="text-amber-100 text-sm">Reactive Governance</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="p-6">
|
||||
<h3 class="text-2xl font-bold text-gray-900 mb-3">AI Fabrication Incident</h3>
|
||||
<p class="text-gray-700 mb-4">
|
||||
Claude fabricated $3.77M in statistics and false production claims. Framework detected it, documented root causes, and created permanent safeguards.
|
||||
<div class="p-8">
|
||||
<h3 class="text-2xl font-bold text-gray-900 mb-3">The 27027 Incident</h3>
|
||||
<p class="text-gray-700 mb-6">
|
||||
Real production incident where Claude Code defaulted to port 27017 (training pattern) despite explicit user instruction to use port 27027. CrossReferenceValidator detected the conflict and blocked execution—demonstrating how pattern recognition can override instructions under context pressure.
|
||||
</p>
|
||||
<div class="bg-amber-50 border-l-4 border-amber-500 p-4 rounded-r-lg mb-6">
|
||||
<p class="text-sm text-amber-900">
|
||||
<strong>Why this matters:</strong> This failure mode gets worse as models improve—stronger pattern recognition means stronger override tendency. Architectural constraints remain necessary regardless of capability level.
|
||||
</p>
|
||||
<div class="mb-6">
|
||||
<div class="flex items-start mb-2">
|
||||
<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>
|
||||
<span class="text-sm text-gray-600"><strong>Appeal:</strong> Leaders, advocates, implementers</span>
|
||||
</div>
|
||||
<div 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>
|
||||
<span class="text-sm text-gray-600"><strong>Shows:</strong> Structured response turning failures into permanent learning</span>
|
||||
</div>
|
||||
</div>
|
||||
<a href="/docs/case-studies/framework-in-action-oct-2025.md" class="block w-full text-center bg-amber-700 text-white py-3 rounded-lg hover:bg-amber-800 transition font-semibold">
|
||||
Read Case Study
|
||||
</a>
|
||||
</div>
|
||||
<a href="/demos/27027-demo.html" class="block w-full text-center bg-blue-600 text-white py-3 rounded-lg hover:bg-blue-700 transition font-semibold">
|
||||
View Interactive Demo
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<!-- Security Audit - Proactive -->
|
||||
<div class="bg-white rounded-xl shadow-lg border border-gray-200 overflow-hidden hover-lift">
|
||||
<div class="bg-gradient-to-r from-green-500 to-emerald-600 px-6 py-4">
|
||||
<div class="flex items-center justify-between">
|
||||
<span class="inline-flex items-center px-3 py-1 rounded-full text-xs font-medium bg-green-800 text-green-100">
|
||||
Security Prevention
|
||||
</span>
|
||||
<span class="text-green-100 text-sm">Proactive Governance</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="p-6">
|
||||
<h3 class="text-2xl font-bold text-gray-900 mb-3">Pre-Publication Security Audit</h3>
|
||||
<p class="text-gray-700 mb-4">
|
||||
Framework prevented publication of sensitive information (internal paths, database names, infrastructure details) before it reached GitHub.
|
||||
</p>
|
||||
<div class="mb-6">
|
||||
<div class="flex items-start mb-2">
|
||||
<svg aria-hidden="true" class="w-5 h-5 text-green-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>
|
||||
<span class="text-sm text-gray-600"><strong>Appeal:</strong> Security teams, implementers, compliance</span>
|
||||
</div>
|
||||
<div class="flex items-start">
|
||||
<svg aria-hidden="true" class="w-5 h-5 text-green-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>
|
||||
<span class="text-sm text-gray-600"><strong>Shows:</strong> Proactive prevention through structured review</span>
|
||||
</div>
|
||||
</div>
|
||||
<a href="/docs/case-studies/pre-publication-audit-oct-2025.md" class="block w-full text-center bg-green-700 text-white py-3 rounded-lg hover:bg-green-800 transition font-semibold">
|
||||
View Security Audit
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Interactive Demo - Hands-on -->
|
||||
<div class="bg-white rounded-xl shadow-lg border border-gray-200 overflow-hidden hover-lift">
|
||||
<div class="bg-gradient-to-r from-purple-500 to-purple-600 px-6 py-4">
|
||||
<div class="flex items-center justify-between">
|
||||
<span class="inline-flex items-center px-3 py-1 rounded-full text-xs font-medium bg-purple-800 text-purple-100">
|
||||
Interactive Demo
|
||||
</span>
|
||||
<span class="text-purple-100 text-sm">Hands-On Experience</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="p-6">
|
||||
<h3 class="text-2xl font-bold text-gray-900 mb-3">Live Framework Demonstration</h3>
|
||||
<p class="text-gray-700 mb-4">
|
||||
Try the six core components yourself: classify instructions, test boundary enforcement, monitor context pressure, validate cross-references, and explore values deliberation.
|
||||
</p>
|
||||
<div class="mb-6">
|
||||
<div class="flex items-start mb-2">
|
||||
<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>
|
||||
<span class="text-sm text-gray-600"><strong>Appeal:</strong> All audiences—learn by doing</span>
|
||||
</div>
|
||||
<div 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>
|
||||
<span class="text-sm text-gray-600"><strong>Shows:</strong> All six framework components in action</span>
|
||||
</div>
|
||||
</div>
|
||||
<a href="/demos/tractatus-demo.html" class="block w-full text-center bg-purple-600 text-white py-3 rounded-lg hover:bg-purple-700 transition font-semibold">
|
||||
Try Interactive Demo
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- Additional Resources CTA -->
|
||||
<div class="text-center bg-gradient-to-r from-blue-50 to-purple-50 rounded-xl p-8 border border-blue-200">
|
||||
<h3 class="text-2xl font-bold text-gray-900 mb-4">Want to dive deeper?</h3>
|
||||
<p class="text-gray-700 mb-6 max-w-2xl mx-auto">
|
||||
Explore complete case studies, research topics, and implementation guides in our documentation
|
||||
<!-- Additional Resources Link -->
|
||||
<div class="text-center">
|
||||
<p class="text-gray-600 mb-4">
|
||||
Additional case studies and research findings documented in technical papers
|
||||
</p>
|
||||
<a href="/docs.html" class="inline-block bg-gradient-to-r from-blue-600 to-purple-600 text-white px-8 py-3 rounded-lg font-semibold hover:from-blue-700 hover:to-purple-700 transition">
|
||||
Browse All Documentation
|
||||
<a href="/docs.html?category=case-studies" class="inline-block text-blue-600 hover:text-blue-700 font-medium">
|
||||
Browse Case Studies →
|
||||
</a>
|
||||
</div>
|
||||
|
||||
|
|
@ -458,7 +367,7 @@
|
|||
<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.
|
||||
Reference implementation of architectural AI safety constraints—structural governance validated in single-project deployment.
|
||||
</p>
|
||||
</div>
|
||||
<div>
|
||||
|
|
@ -502,5 +411,8 @@
|
|||
</div>
|
||||
</footer>
|
||||
|
||||
<!-- Version Management & PWA -->
|
||||
<script src="/js/version-manager.js"></script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
311
public/js/version-manager.js
Normal file
311
public/js/version-manager.js
Normal file
|
|
@ -0,0 +1,311 @@
|
|||
/**
|
||||
* Tractatus Version Manager
|
||||
* - Registers service worker
|
||||
* - Checks for updates every hour
|
||||
* - Shows update notifications
|
||||
* - Manages PWA install prompts
|
||||
*/
|
||||
|
||||
class VersionManager {
|
||||
constructor() {
|
||||
this.serviceWorker = null;
|
||||
this.deferredInstallPrompt = null;
|
||||
this.updateCheckInterval = null;
|
||||
this.currentVersion = null;
|
||||
|
||||
this.init();
|
||||
}
|
||||
|
||||
async init() {
|
||||
// Only run in browsers that support service workers
|
||||
if (!('serviceWorker' in navigator)) {
|
||||
console.log('[VersionManager] Service workers not supported');
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
// Register service worker
|
||||
await this.registerServiceWorker();
|
||||
|
||||
// Check for updates immediately
|
||||
await this.checkForUpdates();
|
||||
|
||||
// Check for updates every hour
|
||||
this.updateCheckInterval = setInterval(() => {
|
||||
this.checkForUpdates();
|
||||
}, 3600000); // 1 hour
|
||||
|
||||
// Listen for PWA install prompt
|
||||
this.setupInstallPrompt();
|
||||
|
||||
// Listen for service worker messages
|
||||
navigator.serviceWorker.addEventListener('message', (event) => {
|
||||
if (event.data.type === 'UPDATE_AVAILABLE') {
|
||||
this.showUpdateNotification(event.data);
|
||||
}
|
||||
});
|
||||
|
||||
} catch (error) {
|
||||
console.error('[VersionManager] Initialization failed:', error);
|
||||
}
|
||||
}
|
||||
|
||||
async registerServiceWorker() {
|
||||
try {
|
||||
const registration = await navigator.serviceWorker.register('/service-worker.js');
|
||||
this.serviceWorker = registration;
|
||||
console.log('[VersionManager] Service worker registered');
|
||||
|
||||
// Check for updates when service worker updates
|
||||
registration.addEventListener('updatefound', () => {
|
||||
const newWorker = registration.installing;
|
||||
newWorker.addEventListener('statechange', () => {
|
||||
if (newWorker.state === 'installed' && navigator.serviceWorker.controller) {
|
||||
// New service worker available
|
||||
this.showUpdateNotification({
|
||||
updateAvailable: true,
|
||||
currentVersion: this.currentVersion,
|
||||
serverVersion: 'latest'
|
||||
});
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
} catch (error) {
|
||||
console.error('[VersionManager] Service worker registration failed:', error);
|
||||
}
|
||||
}
|
||||
|
||||
async checkForUpdates() {
|
||||
try {
|
||||
const response = await fetch('/version.json', { cache: 'no-store' });
|
||||
const versionInfo = await response.json();
|
||||
|
||||
// Get current version from localStorage or default
|
||||
const storedVersion = localStorage.getItem('tractatus_version') || '0.0.0';
|
||||
this.currentVersion = storedVersion;
|
||||
|
||||
if (storedVersion !== versionInfo.version) {
|
||||
console.log('[VersionManager] Update available:', versionInfo.version);
|
||||
this.showUpdateNotification({
|
||||
updateAvailable: true,
|
||||
currentVersion: storedVersion,
|
||||
serverVersion: versionInfo.version,
|
||||
changelog: versionInfo.changelog,
|
||||
forceUpdate: versionInfo.forceUpdate
|
||||
});
|
||||
}
|
||||
|
||||
} catch (error) {
|
||||
console.error('[VersionManager] Version check failed:', error);
|
||||
}
|
||||
}
|
||||
|
||||
showUpdateNotification(versionInfo) {
|
||||
// Don't show if notification already visible
|
||||
if (document.getElementById('tractatus-update-notification')) {
|
||||
return;
|
||||
}
|
||||
|
||||
const notification = document.createElement('div');
|
||||
notification.id = 'tractatus-update-notification';
|
||||
notification.className = 'fixed bottom-0 left-0 right-0 bg-blue-600 text-white px-4 py-3 shadow-lg z-50 transform transition-transform duration-300 translate-y-full';
|
||||
notification.innerHTML = `
|
||||
<div class="max-w-7xl mx-auto flex items-center justify-between flex-wrap gap-4">
|
||||
<div class="flex items-start flex-1">
|
||||
<svg class="w-6 h-6 mr-3 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
|
||||
</svg>
|
||||
<div>
|
||||
<p class="font-semibold">Update Available</p>
|
||||
<p class="text-sm text-blue-100">
|
||||
A new version of Tractatus Framework is available
|
||||
${versionInfo.serverVersion ? `(v${versionInfo.serverVersion})` : ''}
|
||||
</p>
|
||||
${versionInfo.changelog ? `
|
||||
<details class="mt-2 text-sm">
|
||||
<summary class="cursor-pointer text-blue-100 hover:text-white">What's new?</summary>
|
||||
<ul class="mt-2 ml-4 list-disc text-blue-100">
|
||||
${versionInfo.changelog.map(item => `<li>${item}</li>`).join('')}
|
||||
</ul>
|
||||
</details>
|
||||
` : ''}
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex gap-3">
|
||||
${versionInfo.forceUpdate ? `
|
||||
<button onclick="window.versionManager.applyUpdate()" class="bg-white text-blue-600 px-6 py-2 rounded-lg font-semibold hover:bg-blue-50 transition">
|
||||
Update Now
|
||||
</button>
|
||||
` : `
|
||||
<button onclick="window.versionManager.dismissUpdate()" class="text-white hover:text-blue-100 transition px-3">
|
||||
Later
|
||||
</button>
|
||||
<button onclick="window.versionManager.applyUpdate()" class="bg-white text-blue-600 px-6 py-2 rounded-lg font-semibold hover:bg-blue-50 transition">
|
||||
Reload
|
||||
</button>
|
||||
`}
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
document.body.appendChild(notification);
|
||||
|
||||
// Animate in
|
||||
setTimeout(() => {
|
||||
notification.classList.remove('translate-y-full');
|
||||
}, 100);
|
||||
|
||||
// Auto-reload for forced updates after 10 seconds
|
||||
if (versionInfo.forceUpdate) {
|
||||
setTimeout(() => {
|
||||
this.applyUpdate();
|
||||
}, 10000);
|
||||
}
|
||||
}
|
||||
|
||||
applyUpdate() {
|
||||
// Store new version
|
||||
fetch('/version.json', { cache: 'no-store' })
|
||||
.then(response => response.json())
|
||||
.then(versionInfo => {
|
||||
localStorage.setItem('tractatus_version', versionInfo.version);
|
||||
|
||||
// Tell service worker to skip waiting
|
||||
if (this.serviceWorker) {
|
||||
this.serviceWorker.waiting?.postMessage({ type: 'SKIP_WAITING' });
|
||||
}
|
||||
|
||||
// Reload page
|
||||
window.location.reload();
|
||||
});
|
||||
}
|
||||
|
||||
dismissUpdate() {
|
||||
const notification = document.getElementById('tractatus-update-notification');
|
||||
if (notification) {
|
||||
notification.classList.add('translate-y-full');
|
||||
setTimeout(() => {
|
||||
notification.remove();
|
||||
}, 300);
|
||||
}
|
||||
}
|
||||
|
||||
setupInstallPrompt() {
|
||||
// Listen for beforeinstallprompt event
|
||||
window.addEventListener('beforeinstallprompt', (e) => {
|
||||
// Prevent Chrome 67 and earlier from automatically showing the prompt
|
||||
e.preventDefault();
|
||||
|
||||
// Stash the event so it can be triggered later
|
||||
this.deferredInstallPrompt = e;
|
||||
|
||||
// Check if user has dismissed install prompt before
|
||||
const dismissed = sessionStorage.getItem('install_prompt_dismissed');
|
||||
if (!dismissed) {
|
||||
// Show install prompt after 30 seconds
|
||||
setTimeout(() => {
|
||||
this.showInstallPrompt();
|
||||
}, 30000);
|
||||
}
|
||||
});
|
||||
|
||||
// Detect if app was installed
|
||||
window.addEventListener('appinstalled', () => {
|
||||
console.log('[VersionManager] PWA installed');
|
||||
this.deferredInstallPrompt = null;
|
||||
|
||||
// Hide install prompt if visible
|
||||
const prompt = document.getElementById('tractatus-install-prompt');
|
||||
if (prompt) {
|
||||
prompt.remove();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
showInstallPrompt() {
|
||||
if (!this.deferredInstallPrompt) {
|
||||
return;
|
||||
}
|
||||
|
||||
// Don't show if already installed or on iOS Safari (handles differently)
|
||||
if (window.matchMedia('(display-mode: standalone)').matches) {
|
||||
return;
|
||||
}
|
||||
|
||||
const prompt = document.createElement('div');
|
||||
prompt.id = 'tractatus-install-prompt';
|
||||
prompt.className = 'fixed bottom-0 left-0 right-0 bg-gradient-to-r from-purple-600 to-blue-600 text-white px-4 py-3 shadow-lg z-50 transform transition-transform duration-300 translate-y-full';
|
||||
prompt.innerHTML = `
|
||||
<div class="max-w-7xl mx-auto flex items-center justify-between flex-wrap gap-4">
|
||||
<div class="flex items-start flex-1">
|
||||
<svg class="w-6 h-6 mr-3 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 18h.01M8 21h8a2 2 0 002-2V5a2 2 0 00-2-2H8a2 2 0 00-2 2v14a2 2 0 002 2z"/>
|
||||
</svg>
|
||||
<div>
|
||||
<p class="font-semibold">Install Tractatus App</p>
|
||||
<p class="text-sm text-purple-100">
|
||||
Add to your home screen for quick access and offline support
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex gap-3">
|
||||
<button onclick="window.versionManager.dismissInstallPrompt()" class="text-white hover:text-purple-100 transition px-3">
|
||||
Not Now
|
||||
</button>
|
||||
<button onclick="window.versionManager.installApp()" class="bg-white text-purple-600 px-6 py-2 rounded-lg font-semibold hover:bg-purple-50 transition">
|
||||
Install
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
document.body.appendChild(prompt);
|
||||
|
||||
// Animate in
|
||||
setTimeout(() => {
|
||||
prompt.classList.remove('translate-y-full');
|
||||
}, 100);
|
||||
}
|
||||
|
||||
async installApp() {
|
||||
if (!this.deferredInstallPrompt) {
|
||||
return;
|
||||
}
|
||||
|
||||
// Show the install prompt
|
||||
this.deferredInstallPrompt.prompt();
|
||||
|
||||
// Wait for the user to respond to the prompt
|
||||
const { outcome } = await this.deferredInstallPrompt.userChoice;
|
||||
console.log(`[VersionManager] User response: ${outcome}`);
|
||||
|
||||
// Clear the deferredInstallPrompt
|
||||
this.deferredInstallPrompt = null;
|
||||
|
||||
// Hide the prompt
|
||||
this.dismissInstallPrompt();
|
||||
}
|
||||
|
||||
dismissInstallPrompt() {
|
||||
const prompt = document.getElementById('tractatus-install-prompt');
|
||||
if (prompt) {
|
||||
prompt.classList.add('translate-y-full');
|
||||
setTimeout(() => {
|
||||
prompt.remove();
|
||||
}, 300);
|
||||
}
|
||||
|
||||
// Remember dismissal for this session
|
||||
sessionStorage.setItem('install_prompt_dismissed', 'true');
|
||||
}
|
||||
}
|
||||
|
||||
// Initialize version manager on page load
|
||||
if (document.readyState === 'loading') {
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
window.versionManager = new VersionManager();
|
||||
});
|
||||
} else {
|
||||
window.versionManager = new VersionManager();
|
||||
}
|
||||
1344
public/leader.html
1344
public/leader.html
File diff suppressed because it is too large
Load diff
47
public/manifest.json
Normal file
47
public/manifest.json
Normal file
|
|
@ -0,0 +1,47 @@
|
|||
{
|
||||
"name": "Tractatus AI Safety Framework",
|
||||
"short_name": "Tractatus",
|
||||
"description": "Structural constraints for AI systems that preserve human agency through architectural governance",
|
||||
"start_url": "/",
|
||||
"display": "standalone",
|
||||
"background_color": "#ffffff",
|
||||
"theme_color": "#3b82f6",
|
||||
"orientation": "portrait-primary",
|
||||
"icons": [
|
||||
{
|
||||
"src": "/images/tractatus-icon.svg",
|
||||
"sizes": "any",
|
||||
"type": "image/svg+xml",
|
||||
"purpose": "any maskable"
|
||||
},
|
||||
{
|
||||
"src": "/favicon.svg",
|
||||
"sizes": "any",
|
||||
"type": "image/svg+xml"
|
||||
}
|
||||
],
|
||||
"categories": ["education", "productivity", "utilities"],
|
||||
"shortcuts": [
|
||||
{
|
||||
"name": "Documentation",
|
||||
"short_name": "Docs",
|
||||
"description": "Browse framework documentation",
|
||||
"url": "/docs.html",
|
||||
"icons": [{ "src": "/images/tractatus-icon.svg", "sizes": "any" }]
|
||||
},
|
||||
{
|
||||
"name": "FAQ",
|
||||
"short_name": "FAQ",
|
||||
"description": "Frequently asked questions",
|
||||
"url": "/faq.html",
|
||||
"icons": [{ "src": "/images/tractatus-icon.svg", "sizes": "any" }]
|
||||
},
|
||||
{
|
||||
"name": "27027 Demo",
|
||||
"short_name": "Demo",
|
||||
"description": "Interactive pattern bias demonstration",
|
||||
"url": "/demos/27027-demo.html",
|
||||
"icons": [{ "src": "/images/tractatus-icon.svg", "sizes": "any" }]
|
||||
}
|
||||
]
|
||||
}
|
||||
|
|
@ -4,390 +4,509 @@
|
|||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>For Researchers | Tractatus AI Safety Framework</title>
|
||||
<meta name="description" content="Tractatus framework research: architectural constraints, theoretical foundations, and empirical validation of AI safety through structural guarantees.">
|
||||
<meta name="description" content="Research foundations, empirical observations, and theoretical basis for architectural approaches to AI governance. Early-stage framework exploring structural constraints on LLM systems.">
|
||||
|
||||
<!-- PWA Manifest -->
|
||||
<link rel="manifest" href="/manifest.json">
|
||||
|
||||
<!-- PWA Meta Tags -->
|
||||
<meta name="theme-color" content="#3b82f6">
|
||||
<meta name="apple-mobile-web-app-capable" content="yes">
|
||||
<meta name="apple-mobile-web-app-status-bar-style" content="default">
|
||||
<meta name="apple-mobile-web-app-title" content="Tractatus">
|
||||
<link rel="apple-touch-icon" href="/images/tractatus-icon.svg">
|
||||
|
||||
<link rel="stylesheet" href="/css/tailwind.css?v=0.1.0.1760254958072">
|
||||
<style>
|
||||
/* Accessibility: Skip link */
|
||||
.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 { position: absolute; left: -9999px; }
|
||||
.skip-link:focus { left: 0; z-index: 100; background: white; padding: 1rem; }
|
||||
a:focus, button:focus { outline: 2px solid #d97706; outline-offset: 2px; }
|
||||
|
||||
/* Accessibility: Focus indicators (WCAG 2.4.7) */
|
||||
a:focus, button:focus, input:focus, select:focus, textarea:focus {
|
||||
outline: 3px solid #3b82f6;
|
||||
outline-offset: 2px;
|
||||
/* Accordion styles */
|
||||
.accordion-button { cursor: pointer; user-select: none; }
|
||||
.accordion-content {
|
||||
max-height: 0;
|
||||
overflow: hidden;
|
||||
transition: max-height 0.3s ease-out;
|
||||
}
|
||||
a:focus:not(:focus-visible) { outline: none; }
|
||||
a:focus-visible { outline: 3px solid #3b82f6; outline-offset: 2px; }
|
||||
.accordion-content.active {
|
||||
max-height: 3000px;
|
||||
transition: max-height 0.5s ease-in;
|
||||
}
|
||||
.accordion-icon { transition: transform 0.3s ease; }
|
||||
.accordion-icon.active { transform: rotate(180deg); }
|
||||
</style>
|
||||
</head>
|
||||
<body class="bg-gray-50">
|
||||
<body class="bg-white">
|
||||
|
||||
<!-- Skip Link for Keyboard Navigation -->
|
||||
<a href="#main-content" class="skip-link">Skip to main content</a>
|
||||
|
||||
<!-- Navigation (injected by navbar.js) -->
|
||||
<script src="/js/components/navbar.js?v=0.1.0.1760254958072"></script>
|
||||
|
||||
<!-- Hero Section -->
|
||||
<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="text-center">
|
||||
<h1 class="text-5xl font-bold text-gray-900 mb-6">
|
||||
AI Safety Through<br>Architectural Constraints
|
||||
</h1>
|
||||
<p class="text-xl text-gray-600 max-w-3xl mx-auto mb-8">
|
||||
Exploring the theoretical foundations and empirical validation of structural AI safety—preserving human agency through formal guarantees, not aspirational goals.
|
||||
</p>
|
||||
<div class="flex justify-center space-x-4">
|
||||
<a href="/docs.html" class="bg-purple-600 text-white px-6 py-3 rounded-lg font-semibold hover:bg-purple-700 transition">
|
||||
Browse Documentation
|
||||
</a>
|
||||
<a href="#case-studies" class="bg-white text-purple-600 px-6 py-3 rounded-lg font-semibold border-2 border-purple-600 hover:bg-purple-50 transition">
|
||||
View Case Studies
|
||||
</a>
|
||||
</div>
|
||||
<!-- Header -->
|
||||
<div class="bg-gray-50 border-b border-gray-200 py-16">
|
||||
<div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div class="inline-flex items-center bg-gray-200 text-gray-700 px-3 py-1 rounded text-sm font-medium mb-6">
|
||||
Research Framework • Empirical Observations
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Research Focus Areas -->
|
||||
<div id="main-content" class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-16">
|
||||
<h2 class="text-3xl font-bold text-gray-900 mb-12 text-center">Research Focus Areas</h2>
|
||||
|
||||
<div class="grid grid-cols-1 md:grid-cols-3 gap-8">
|
||||
<!-- Theoretical Foundations -->
|
||||
<div class="bg-white rounded-lg shadow-lg p-8">
|
||||
<div class="w-12 h-12 bg-purple-100 rounded-lg flex items-center justify-center mb-4">
|
||||
<svg aria-hidden="true" class="w-6 h-6 text-purple-600" 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>
|
||||
</div>
|
||||
<h3 class="text-xl font-bold text-gray-900 mb-3">Theoretical Foundations</h3>
|
||||
<p class="text-gray-600 mb-4">
|
||||
Formal specification of the Tractatus boundary: where systematization ends and human judgment begins. Rooted in Wittgenstein's linguistic philosophy.
|
||||
</p>
|
||||
<ul class="space-y-2 text-sm text-gray-600">
|
||||
<li class="flex items-start">
|
||||
<span class="mr-2">•</span>
|
||||
<span>Boundary delineation principles</span>
|
||||
</li>
|
||||
<li class="flex items-start">
|
||||
<span class="mr-2">•</span>
|
||||
<span>Values irreducibility proofs</span>
|
||||
</li>
|
||||
<li class="flex items-start">
|
||||
<span class="mr-2">•</span>
|
||||
<span>Agency preservation guarantees</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<!-- Architectural Analysis -->
|
||||
<div class="bg-white rounded-lg shadow-lg p-8">
|
||||
<div class="w-12 h-12 bg-blue-100 rounded-lg flex items-center justify-center mb-4">
|
||||
<svg aria-hidden="true" class="w-6 h-6 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10"/>
|
||||
</svg>
|
||||
</div>
|
||||
<h3 class="text-xl font-bold text-gray-900 mb-3">Architectural Analysis</h3>
|
||||
<p class="text-gray-600 mb-4">
|
||||
Six-component framework architecture: classification, validation, boundary enforcement, pressure monitoring, metacognitive verification, pluralistic deliberation.
|
||||
</p>
|
||||
<ul class="space-y-2 text-sm text-gray-600">
|
||||
<li class="flex items-start">
|
||||
<span class="mr-2">•</span>
|
||||
<span>InstructionPersistenceClassifier</span>
|
||||
</li>
|
||||
<li class="flex items-start">
|
||||
<span class="mr-2">•</span>
|
||||
<span>CrossReferenceValidator</span>
|
||||
</li>
|
||||
<li class="flex items-start">
|
||||
<span class="mr-2">•</span>
|
||||
<span>BoundaryEnforcer</span>
|
||||
</li>
|
||||
<li class="flex items-start">
|
||||
<span class="mr-2">•</span>
|
||||
<span>ContextPressureMonitor</span>
|
||||
</li>
|
||||
<li class="flex items-start">
|
||||
<span class="mr-2">•</span>
|
||||
<span>MetacognitiveVerifier</span>
|
||||
</li>
|
||||
<li class="flex items-start">
|
||||
<span class="mr-2">•</span>
|
||||
<span>PluralisticDeliberationOrchestrator</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<!-- Empirical Validation -->
|
||||
<div class="bg-white rounded-lg shadow-lg p-8">
|
||||
<div class="w-12 h-12 bg-green-100 rounded-lg flex items-center justify-center mb-4">
|
||||
<svg aria-hidden="true" class="w-6 h-6 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"/>
|
||||
</svg>
|
||||
</div>
|
||||
<h3 class="text-xl font-bold text-gray-900 mb-3">Empirical Validation</h3>
|
||||
<p class="text-gray-600 mb-4">
|
||||
Real-world failure case analysis and prevention validation. Documented incidents where traditional AI safety approaches failed.
|
||||
</p>
|
||||
<ul class="space-y-2 text-sm text-gray-600">
|
||||
<li class="flex items-start">
|
||||
<span class="mr-2">•</span>
|
||||
<span>The 27027 Incident (pattern recognition bias override)</span>
|
||||
</li>
|
||||
<li class="flex items-start">
|
||||
<span class="mr-2">•</span>
|
||||
<span>Privacy creep detection</span>
|
||||
</li>
|
||||
<li class="flex items-start">
|
||||
<span class="mr-2">•</span>
|
||||
<span>Silent degradation prevention</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Interactive Demonstrations -->
|
||||
<div class="bg-white py-16">
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<h2 class="text-3xl font-bold text-gray-900 mb-12 text-center">Interactive Demonstrations</h2>
|
||||
|
||||
<div class="grid grid-cols-1 md:grid-cols-3 gap-8">
|
||||
<a href="/demos/classification-demo.html" class="block bg-gray-50 rounded-lg p-6 hover:shadow-lg transition group">
|
||||
<h3 class="text-lg font-semibold text-gray-900 mb-2 group-hover:text-purple-600">Classification Demo</h3>
|
||||
<p class="text-gray-600 mb-4">
|
||||
Explore how the InstructionPersistenceClassifier categorizes instructions across five quadrants with persistence levels.
|
||||
</p>
|
||||
<div class="text-purple-600 font-medium">Try the demo →</div>
|
||||
</a>
|
||||
|
||||
<a href="/demos/27027-demo.html" class="block bg-gray-50 rounded-lg p-6 hover:shadow-lg transition group">
|
||||
<h3 class="text-lg font-semibold text-gray-900 mb-2 group-hover:text-purple-600">27027 Incident Analysis</h3>
|
||||
<p class="text-gray-600 mb-4">
|
||||
Step through a real failure case where AI contradicted explicit instructions, and see how Tractatus prevents it.
|
||||
</p>
|
||||
<div class="text-purple-600 font-medium">View timeline →</div>
|
||||
</a>
|
||||
|
||||
<a href="/demos/boundary-demo.html" class="block bg-gray-50 rounded-lg p-6 hover:shadow-lg transition group">
|
||||
<h3 class="text-lg font-semibold text-gray-900 mb-2 group-hover:text-purple-600">Boundary Simulator</h3>
|
||||
<p class="text-gray-600 mb-4">
|
||||
Test decisions against the Tractatus boundary to see which can be automated and which require human judgment.
|
||||
</p>
|
||||
<div class="text-purple-600 font-medium">Run scenarios →</div>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Case Studies -->
|
||||
<div id="case-studies" class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-16">
|
||||
<h2 class="text-3xl font-bold text-gray-900 mb-12 text-center">Documented Failure Cases</h2>
|
||||
|
||||
<div class="space-y-6">
|
||||
<div class="bg-white rounded-lg shadow-md p-6 border-l-4 border-red-500">
|
||||
<div class="flex items-start justify-between">
|
||||
<div>
|
||||
<h3 class="text-xl font-bold text-gray-900 mb-2">The 27027 Incident</h3>
|
||||
<p class="text-gray-600 mb-3">
|
||||
User instructed "Check port 27027" but AI immediately used 27017 instead—pattern recognition bias overrode explicit instruction. Not forgetting; immediate autocorrection by training patterns. <strong>Prevented by InstructionPersistenceClassifier + CrossReferenceValidator.</strong>
|
||||
</p>
|
||||
<div class="flex space-x-4 text-sm">
|
||||
<span class="text-gray-500">Failure Type: Pattern Recognition Bias</span>
|
||||
<span class="text-gray-500">Prevention: Explicit instruction storage + validation</span>
|
||||
</div>
|
||||
</div>
|
||||
<a href="/demos/27027-demo.html" class="text-purple-600 hover:text-purple-700 font-medium">Interactive demo →</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="bg-white rounded-lg shadow-md p-6 border-l-4 border-orange-500">
|
||||
<div class="flex items-start justify-between">
|
||||
<div>
|
||||
<h3 class="text-xl font-bold text-gray-900 mb-2">Privacy Creep Detection</h3>
|
||||
<p class="text-gray-600 mb-3">
|
||||
AI suggested analytics that violated privacy-first principle. Gradual values drift over 40-message conversation. <strong>Prevented by BoundaryEnforcer.</strong>
|
||||
</p>
|
||||
<div class="flex space-x-4 text-sm">
|
||||
<span class="text-gray-500">Failure Type: Values Drift</span>
|
||||
<span class="text-gray-500">Prevention: STRATEGIC boundary check</span>
|
||||
</div>
|
||||
</div>
|
||||
<a href="/downloads/case-studies-real-world-llm-failure-modes.pdf" target="_blank" rel="noopener noreferrer" class="text-purple-600 hover:text-purple-700 font-medium inline-flex items-center gap-1">
|
||||
See case studies doc
|
||||
<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"/>
|
||||
</svg>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="bg-white rounded-lg shadow-md p-6 border-l-4 border-yellow-500">
|
||||
<div class="flex items-start justify-between">
|
||||
<div>
|
||||
<h3 class="text-xl font-bold text-gray-900 mb-2">Silent Quality Degradation</h3>
|
||||
<p class="text-gray-600 mb-3">
|
||||
Context pressure at 82% caused AI to skip error handling silently. No warning to user. <strong>Prevented by ContextPressureMonitor.</strong>
|
||||
</p>
|
||||
<div class="flex space-x-4 text-sm">
|
||||
<span class="text-gray-500">Failure Type: Silent Degradation</span>
|
||||
<span class="text-gray-500">Prevention: CRITICAL pressure detection</span>
|
||||
</div>
|
||||
</div>
|
||||
<a href="/downloads/case-studies-real-world-llm-failure-modes.pdf" target="_blank" rel="noopener noreferrer" class="text-purple-600 hover:text-purple-700 font-medium inline-flex items-center gap-1">
|
||||
See case studies doc
|
||||
<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"/>
|
||||
</svg>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Research Resources -->
|
||||
<div class="bg-purple-50 py-16">
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<h2 class="text-3xl font-bold text-gray-900 mb-12 text-center">Research Resources</h2>
|
||||
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-8">
|
||||
<div class="bg-white rounded-lg p-6">
|
||||
<h3 class="text-xl font-bold text-gray-900 mb-4">Research Documentation</h3>
|
||||
<ul class="space-y-3">
|
||||
<li class="flex items-center justify-between">
|
||||
<a href="https://github.com/tractatus-framework/tractatus/blob/main/docs/BENCHMARK-SUITE-RESULTS.md"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
class="text-purple-600 hover:text-purple-700 font-medium">
|
||||
→ Benchmark Suite Results (610 Tests)
|
||||
</a>
|
||||
<span class="text-xs bg-green-100 text-green-800 px-2 py-1 rounded-full font-medium">NEW</span>
|
||||
</li>
|
||||
<li class="flex items-center justify-between">
|
||||
<a href="https://github.com/tractatus-framework/tractatus/blob/main/docs/GOVERNANCE-RULE-LIBRARY.md"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
class="text-purple-600 hover:text-purple-700 font-medium">
|
||||
→ Governance Rule Library (10 Examples)
|
||||
</a>
|
||||
<span class="text-xs bg-green-100 text-green-800 px-2 py-1 rounded-full font-medium">NEW</span>
|
||||
</li>
|
||||
<li class="flex items-center justify-between">
|
||||
<a href="/docs.html" class="text-purple-600 hover:text-purple-700 font-medium">
|
||||
→ Research Foundations & Scholarly Context
|
||||
</a>
|
||||
<a href="/downloads/research-foundations-scholarly-review-and-context.pdf"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
class="text-purple-600 hover:text-purple-700 ml-2"
|
||||
title="Download PDF">
|
||||
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 10v6m0 0l-3-3m3 3l3-3m2 8H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/>
|
||||
</svg>
|
||||
</a>
|
||||
</li>
|
||||
<li class="flex items-center justify-between">
|
||||
<a href="/docs.html" class="text-purple-600 hover:text-purple-700 font-medium">
|
||||
→ Case Studies: Real-World Failures
|
||||
</a>
|
||||
<a href="/downloads/case-studies-real-world-llm-failure-modes.pdf"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
class="text-purple-600 hover:text-purple-700 ml-2"
|
||||
title="Download PDF">
|
||||
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 10v6m0 0l-3-3m3 3l3-3m2 8H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/>
|
||||
</svg>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/docs.html" class="text-purple-600 hover:text-purple-700 font-medium">
|
||||
→ Framework Overview & Core Concepts
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="bg-white rounded-lg p-6">
|
||||
<h3 class="text-xl font-bold text-gray-900 mb-4">Contribute to Research</h3>
|
||||
<p class="text-gray-600 mb-4">
|
||||
This framework is open for academic collaboration and empirical validation studies.
|
||||
</p>
|
||||
<ul class="space-y-2 text-sm text-gray-600 mb-4">
|
||||
<li>• Submit failure cases for analysis</li>
|
||||
<li>• Propose theoretical extensions</li>
|
||||
<li>• Validate architectural constraints</li>
|
||||
<li>• Explore boundary formalization</li>
|
||||
</ul>
|
||||
<a href="/case-submission.html" class="inline-block bg-purple-600 text-white px-4 py-2 rounded text-sm font-semibold hover:bg-purple-700 transition">
|
||||
Submit Case Study →
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- CTA Section -->
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-16">
|
||||
<div class="bg-gradient-to-r from-purple-600 to-blue-600 rounded-2xl p-12 text-center text-white">
|
||||
<h2 class="text-3xl font-bold mb-4">Join the Research Community</h2>
|
||||
<p class="text-xl mb-8 opacity-90">
|
||||
Help advance AI safety through empirical validation and theoretical exploration.
|
||||
<h1 class="text-4xl font-bold text-gray-900 mb-4">
|
||||
Research Foundations & Empirical Observations
|
||||
</h1>
|
||||
<p class="text-lg text-gray-600 leading-relaxed">
|
||||
Tractatus explores architectural approaches to AI governance through empirical observation of failure modes and application of organisational theory. This page documents research foundations, observed patterns, and theoretical basis for the framework.
|
||||
</p>
|
||||
<div class="flex justify-center space-x-4">
|
||||
<a href="/docs.html" class="bg-white text-purple-600 px-8 py-3 rounded-lg font-semibold hover:bg-gray-100 transition">
|
||||
Read Documentation
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Main Content -->
|
||||
<div id="main-content" class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 py-16">
|
||||
|
||||
<!-- Research Context -->
|
||||
<section class="mb-16">
|
||||
<h2 class="text-2xl font-bold text-gray-900 mb-6">Research Context & Scope</h2>
|
||||
|
||||
<div class="bg-amber-50 border border-amber-200 rounded-lg p-6 mb-6">
|
||||
<p class="text-sm text-amber-900 font-medium mb-2">Development Context</p>
|
||||
<p class="text-sm text-amber-800">
|
||||
Tractatus was developed over six months (April–October 2025) in single-project context (this website). Observations derive from direct engagement with Claude Code (Anthropic's Sonnet 4.5 model) across approximately 500 development sessions. This is exploratory research, not controlled study.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="prose prose-sm max-w-none text-gray-700 space-y-3">
|
||||
<p>
|
||||
The framework emerged from practical necessity rather than theoretical speculation. During development, we observed recurring patterns where AI systems would override explicit instructions, drift from established values constraints, or silently degrade quality under context pressure. Traditional governance approaches (policy documents, ethical guidelines, prompt engineering) proved insufficient to prevent these failures.
|
||||
</p>
|
||||
<p>
|
||||
This led to research question: <strong>Can governance be made architecturally external to AI systems</strong> rather than relying on voluntary AI compliance? Tractatus represents one exploration of that question, grounded in organisational theory and validated through empirical observation of what actually prevented failures in practice.
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Theoretical Foundations (Accordion) -->
|
||||
<section class="mb-16">
|
||||
<h2 class="text-2xl font-bold text-gray-900 mb-6">Theoretical Foundations</h2>
|
||||
|
||||
<!-- Organisational Theory -->
|
||||
<div class="border border-gray-300 rounded-lg mb-4">
|
||||
<div class="accordion-button bg-gray-50 p-5 flex justify-between items-center" onclick="toggleAccordion('org-theory')">
|
||||
<h3 class="font-semibold text-gray-900">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">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/>
|
||||
</svg>
|
||||
</div>
|
||||
<div id="org-theory-content" class="accordion-content">
|
||||
<div class="p-5 border-t border-gray-200 prose prose-sm max-w-none text-gray-700">
|
||||
<p class="mb-4">
|
||||
Tractatus draws on four decades of organisational research addressing authority structures during knowledge democratisation:
|
||||
</p>
|
||||
|
||||
<p class="mb-3"><strong>Time-Based Organisation (Bluedorn, Ancona):</strong></p>
|
||||
<p class="mb-4 pl-4">
|
||||
Decisions operate across strategic (years), operational (months), and tactical (hours-days) timescales. AI systems operating at tactical speed should not override strategic decisions made at appropriate temporal scale. The InstructionPersistenceClassifier explicitly models temporal horizon (STRATEGIC, OPERATIONAL, TACTICAL) to enforce decision authority alignment.
|
||||
</p>
|
||||
|
||||
<p class="mb-3"><strong>Knowledge Orchestration (Crossan et al.):</strong></p>
|
||||
<p class="mb-4 pl-4">
|
||||
When knowledge becomes ubiquitous through AI, organisational authority shifts from information control to knowledge coordination. Governance systems must orchestrate decision-making across distributed expertise rather than centralise control. The PluralisticDeliberationOrchestrator implements non-hierarchical coordination for values conflicts.
|
||||
</p>
|
||||
|
||||
<p class="mb-3"><strong>Post-Bureaucratic Authority (Laloux, Hamel):</strong></p>
|
||||
<p class="mb-4 pl-4">
|
||||
Traditional hierarchical authority assumes information asymmetry. As AI democratises expertise, legitimate authority must derive from appropriate time horizon and stakeholder representation, not positional power. Framework architecture separates technical capability (what AI can do) from decision authority (what AI should do).
|
||||
</p>
|
||||
|
||||
<p class="mb-3"><strong>Structural Inertia (Hannan & Freeman):</strong></p>
|
||||
<p class="mb-4 pl-4">
|
||||
Governance embedded in culture or process erodes over time as systems evolve. Architectural constraints create structural inertia that resists organisational drift. Making governance external to AI runtime creates "accountability infrastructure" that survives individual session variations.
|
||||
</p>
|
||||
|
||||
<p class="text-sm text-gray-600 border-t border-gray-200 pt-3 mt-4">
|
||||
<a href="/downloads/organizational-theory-foundations-of-the-tractatus-framework.pdf" target="_blank" class="text-amber-700 hover:text-amber-800 font-medium">
|
||||
View complete organisational theory foundations (PDF) →
|
||||
</a>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Values Pluralism -->
|
||||
<div class="border border-gray-300 rounded-lg">
|
||||
<div class="accordion-button bg-gray-50 p-5 flex justify-between items-center" onclick="toggleAccordion('values')">
|
||||
<h3 class="font-semibold text-gray-900">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">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/>
|
||||
</svg>
|
||||
</div>
|
||||
<div id="values-content" class="accordion-content">
|
||||
<div class="p-5 border-t border-gray-200 prose prose-sm max-w-none text-gray-700">
|
||||
<p class="mb-4">
|
||||
The PluralisticDeliberationOrchestrator addresses fundamental problem in AI safety: <strong>many "safety" questions are actually values conflicts</strong> where multiple legitimate perspectives exist.
|
||||
</p>
|
||||
|
||||
<p class="mb-4">
|
||||
When efficiency conflicts with transparency, or innovation with risk mitigation, no algorithm can determine the "correct" answer. These are values trade-offs requiring human deliberation across stakeholder perspectives. AI systems that attempt to resolve such conflicts autonomously impose single values framework—often utilitarian efficiency maximisation encoded in training data.
|
||||
</p>
|
||||
|
||||
<p class="mb-4">
|
||||
Framework draws on moral pluralism literature (Isaiah Berlin, Bernard Williams, Martha Nussbaum) arguing legitimate values can conflict without one being objectively superior. Rather than algorithmic resolution, framework facilitates:
|
||||
</p>
|
||||
|
||||
<ul class="list-disc pl-6 mb-4 space-y-2">
|
||||
<li><strong>Stakeholder identification:</strong> Who has legitimate interest in this decision?</li>
|
||||
<li><strong>Non-hierarchical deliberation:</strong> Equal voice without automatic expert override</li>
|
||||
<li><strong>Documented dissent:</strong> Minority positions recorded in full</li>
|
||||
<li><strong>Moral remainder:</strong> Acknowledgment that even optimal decisions create unavoidable harm to other legitimate values</li>
|
||||
</ul>
|
||||
|
||||
<p class="mb-4">
|
||||
This approach recognises that <strong>governance isn't solving values conflicts—it's ensuring they're addressed through appropriate deliberative process</strong> rather than AI imposing resolution.
|
||||
</p>
|
||||
|
||||
<p class="text-sm text-gray-600 border-t border-gray-200 pt-3 mt-4">
|
||||
<a href="/downloads/pluralistic-values-deliberation-plan-v2-DRAFT.pdf" target="_blank" class="text-amber-700 hover:text-amber-800 font-medium">
|
||||
View pluralistic values deliberation plan (PDF, DRAFT status) →
|
||||
</a>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Empirical Observations -->
|
||||
<section class="mb-16">
|
||||
<h2 class="text-2xl font-bold text-gray-900 mb-6">Empirical Observations: Documented Failure Modes</h2>
|
||||
|
||||
<p class="text-sm text-gray-600 mb-6">
|
||||
Three failure patterns observed repeatedly during framework development. These are not hypothetical scenarios—they are documented incidents that occurred during this project's development.
|
||||
</p>
|
||||
|
||||
<!-- Failure Mode 1: Pattern Bias -->
|
||||
<div class="bg-white border border-gray-300 rounded-lg p-6 mb-4">
|
||||
<div class="flex items-start gap-3 mb-3">
|
||||
<div class="flex-shrink-0 w-8 h-8 bg-red-100 rounded flex items-center justify-center">
|
||||
<span class="text-red-700 font-bold text-sm">1</span>
|
||||
</div>
|
||||
<div class="flex-1">
|
||||
<h3 class="text-lg font-bold text-gray-900 mb-2">Pattern Recognition Bias Override (The 27027 Incident)</h3>
|
||||
<p class="text-sm text-gray-700 mb-3">
|
||||
<strong>Observed behaviour:</strong> User specified "Check MongoDB on port 27027" but AI immediately used default port 27017 instead. This occurred within same message—not forgetting over time, but immediate autocorrection by training data patterns.
|
||||
</p>
|
||||
<p class="text-sm text-gray-700 mb-3">
|
||||
<strong>Root cause:</strong> Training data contains thousands of examples of MongoDB on port 27017 (default). When AI encounters "MongoDB" + port specification, pattern recognition weight overrides explicit instruction. Similar to autocorrect changing correctly-spelled proper nouns to common words.
|
||||
</p>
|
||||
<p class="text-sm text-gray-700 mb-3">
|
||||
<strong>Why traditional approaches failed:</strong> Prompt engineering ("please follow instructions exactly") ineffective because AI genuinely believes it IS following instructions—pattern recognition operates below conversational reasoning layer.
|
||||
</p>
|
||||
<p class="text-sm text-gray-700">
|
||||
<strong>Framework intervention:</strong> InstructionPersistenceClassifier stores explicit instructions in external persistence layer. CrossReferenceValidator checks AI actions against stored instructions before execution. When AI proposes port 27017, validator detects conflict with stored "27027" instruction and blocks execution.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-center justify-end gap-3 text-sm pt-3 border-t border-gray-200">
|
||||
<span class="text-gray-500">Prevented by: InstructionPersistenceClassifier + CrossReferenceValidator</span>
|
||||
<a href="/demos/27027-demo.html" class="text-amber-700 hover:text-amber-800 font-medium">View interactive timeline →</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Failure Mode 2: Values Drift -->
|
||||
<div class="bg-white border border-gray-300 rounded-lg p-6 mb-4">
|
||||
<div class="flex items-start gap-3 mb-3">
|
||||
<div class="flex-shrink-0 w-8 h-8 bg-orange-100 rounded flex items-center justify-center">
|
||||
<span class="text-orange-700 font-bold text-sm">2</span>
|
||||
</div>
|
||||
<div class="flex-1">
|
||||
<h3 class="text-lg font-bold text-gray-900 mb-2">Gradual Values Drift Under Context Pressure</h3>
|
||||
<p class="text-sm text-gray-700 mb-3">
|
||||
<strong>Observed behaviour:</strong> Project established "privacy-first" as strategic value. After 40-message conversation about analytics features, AI suggested tracking implementation that violated privacy constraint. User caught it; AI acknowledged violation but had drifted from principle through incremental feature additions.
|
||||
</p>
|
||||
<p class="text-sm text-gray-700 mb-3">
|
||||
<strong>Root cause:</strong> Strategic values (established early in project) conflict with tactical optimisations (implemented later under time pressure). As conversation lengthens, tactical thinking dominates. AI didn't actively reject privacy principle—it simply stopped checking whether new features aligned.
|
||||
</p>
|
||||
<p class="text-sm text-gray-700 mb-3">
|
||||
<strong>Why traditional approaches failed:</strong> Values stated in system prompt become less salient as conversation progresses. Context compaction can drop early strategic decisions. Prompt reminders ("remember privacy-first") treat symptom not cause.
|
||||
</p>
|
||||
<p class="text-sm text-gray-700">
|
||||
<strong>Framework intervention:</strong> BoundaryEnforcer maintains strategic values as persistent constraints external to conversation context. Before implementing analytics feature, enforcer checks against stored "privacy-first" constraint. Detects conflict, blocks autonomous implementation, escalates for human deliberation on whether privacy principle should be reconsidered or analytics approach modified.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-center justify-end gap-3 text-sm pt-3 border-t border-gray-200">
|
||||
<span class="text-gray-500">Prevented by: BoundaryEnforcer (STRATEGIC constraint checking)</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Failure Mode 3: Silent Degradation -->
|
||||
<div class="bg-white border border-gray-300 rounded-lg p-6">
|
||||
<div class="flex items-start gap-3 mb-3">
|
||||
<div class="flex-shrink-0 w-8 h-8 bg-yellow-100 rounded flex items-center justify-center">
|
||||
<span class="text-yellow-700 font-bold text-sm">3</span>
|
||||
</div>
|
||||
<div class="flex-1">
|
||||
<h3 class="text-lg font-bold text-gray-900 mb-2">Silent Quality Degradation at High Context Pressure</h3>
|
||||
<p class="text-sm text-gray-700 mb-3">
|
||||
<strong>Observed behaviour:</strong> During complex multi-file operation at 85% context capacity, AI silently omitted error handling in generated code. No indication to user that corners were being cut. User discovered missing validation only during code review.
|
||||
</p>
|
||||
<p class="text-sm text-gray-700 mb-3">
|
||||
<strong>Root cause:</strong> As context fills, AI faces implicit trade-off: complete requested functionality OR maintain quality standards. Training incentivises completing user requests over acknowledging limitations. Silence about degradation is path of least resistance.
|
||||
</p>
|
||||
<p class="text-sm text-gray-700 mb-3">
|
||||
<strong>Why traditional approaches failed:</strong> AI doesn't recognise it's degrading—from its perspective, it's successfully completing task under constraints. Asking "did you cut corners?" produces confident denial because AI genuinely believes its output meets standards.
|
||||
</p>
|
||||
<p class="text-sm text-gray-700">
|
||||
<strong>Framework intervention:</strong> ContextPressureMonitor tracks multiple factors (token usage, conversation length, task complexity). When pressure exceeds thresholds (>75% tokens, >40 messages, high complexity), monitor forces explicit pressure acknowledgment and recommends context refresh. Makes degradation risk visible rather than silent.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-center justify-end gap-3 text-sm pt-3 border-t border-gray-200">
|
||||
<span class="text-gray-500">Prevented by: ContextPressureMonitor (multi-factor session tracking)</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mt-6 text-sm text-gray-600 bg-gray-50 border border-gray-200 rounded p-4">
|
||||
<strong>Research Note:</strong> These patterns emerged from direct observation, not hypothesis testing. We don't claim they're universal to all LLM systems or deployment contexts. They represent empirical basis for framework design decisions—problems we actually encountered and architectural interventions that actually worked in this specific context.
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Architectural Components -->
|
||||
<section class="mb-16">
|
||||
<h2 class="text-2xl font-bold text-gray-900 mb-6">Six-Component Architecture</h2>
|
||||
|
||||
<div class="border border-gray-300 rounded-lg">
|
||||
<div class="accordion-button bg-gray-50 p-5 flex justify-between items-center" onclick="toggleAccordion('architecture')">
|
||||
<h3 class="font-semibold text-gray-900">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">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/>
|
||||
</svg>
|
||||
</div>
|
||||
<div id="architecture-content" class="accordion-content">
|
||||
<div class="p-5 border-t border-gray-200 space-y-4 text-sm">
|
||||
|
||||
<div class="border-l-2 border-amber-500 pl-4">
|
||||
<div class="font-semibold text-gray-900 mb-1">1. BoundaryEnforcer</div>
|
||||
<div class="text-gray-600 mb-2">Blocks AI from making values decisions without human approval. Maintains strategic constraints as persistent rules checked before action execution.</div>
|
||||
<div class="text-xs text-gray-500">Addresses: Values drift, autonomous decision-making on contested trade-offs</div>
|
||||
</div>
|
||||
|
||||
<div class="border-l-2 border-gray-300 pl-4">
|
||||
<div class="font-semibold text-gray-900 mb-1">2. InstructionPersistenceClassifier</div>
|
||||
<div class="text-gray-600 mb-2">Stores explicit instructions external to AI context with persistence levels (HIGH/MEDIUM/LOW) and temporal scope (STRATEGIC/OPERATIONAL/TACTICAL). Prevents pattern bias override.</div>
|
||||
<div class="text-xs text-gray-500">Addresses: Pattern recognition bias (27027-style failures)</div>
|
||||
</div>
|
||||
|
||||
<div class="border-l-2 border-gray-300 pl-4">
|
||||
<div class="font-semibold text-gray-900 mb-1">3. CrossReferenceValidator</div>
|
||||
<div class="text-gray-600 mb-2">Validates AI proposed actions against stored instructions and governance rules before execution. Detects conflicts and blocks inconsistent operations.</div>
|
||||
<div class="text-xs text-gray-500">Addresses: Instruction override, policy violation detection</div>
|
||||
</div>
|
||||
|
||||
<div class="border-l-2 border-gray-300 pl-4">
|
||||
<div class="font-semibold text-gray-900 mb-1">4. ContextPressureMonitor</div>
|
||||
<div class="text-gray-600 mb-2">Multi-factor tracking of session health: token usage, conversation length, task complexity, error frequency. Makes degradation risk explicit when thresholds exceeded.</div>
|
||||
<div class="text-xs text-gray-500">Addresses: Silent quality degradation, context-pressure failures</div>
|
||||
</div>
|
||||
|
||||
<div class="border-l-2 border-gray-300 pl-4">
|
||||
<div class="font-semibold text-gray-900 mb-1">5. MetacognitiveVerifier</div>
|
||||
<div class="text-gray-600 mb-2">Self-checks reasoning quality before complex operations (>3 files, >5 steps, architecture changes). Validates alignment, coherence, considers alternatives.</div>
|
||||
<div class="text-xs text-gray-500">Addresses: Reasoning shortcuts under complexity, insufficient alternative consideration</div>
|
||||
</div>
|
||||
|
||||
<div class="border-l-2 border-gray-300 pl-4">
|
||||
<div class="font-semibold text-gray-900 mb-1">6. PluralisticDeliberationOrchestrator</div>
|
||||
<div class="text-gray-600 mb-2">Facilitates multi-stakeholder deliberation when values conflicts detected. Non-hierarchical engagement, documented dissent, moral remainder acknowledgment.</div>
|
||||
<div class="text-xs text-gray-500">Addresses: Values conflicts, stakeholder exclusion, algorithmic resolution of contested trade-offs</div>
|
||||
</div>
|
||||
|
||||
<div class="text-xs text-gray-600 bg-gray-50 p-3 rounded mt-4">
|
||||
<strong>Architectural principle:</strong> Services operate external to AI runtime with autonomous triggering. AI doesn't decide "should I check governance rules?"—architecture enforces checking by default. This addresses voluntary compliance problem inherent in prompt-based governance.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Interactive Demonstrations -->
|
||||
<section class="mb-16">
|
||||
<h2 class="text-2xl font-bold text-gray-900 mb-6">Interactive Demonstrations</h2>
|
||||
|
||||
<div class="grid grid-cols-1 md:grid-cols-3 gap-4">
|
||||
<a href="/demos/classification-demo.html" class="block border border-gray-300 rounded-lg p-5 hover:border-amber-500 hover:shadow-md transition">
|
||||
<h3 class="font-semibold text-gray-900 mb-2">Instruction Classification</h3>
|
||||
<p class="text-sm text-gray-600">Explore how instructions are classified across quadrants with persistence levels and temporal scope.</p>
|
||||
</a>
|
||||
<a href="/implementer.html" class="bg-purple-700 text-white px-8 py-3 rounded-lg font-semibold hover:bg-purple-800 transition border-2 border-white">
|
||||
Implementation Guide →
|
||||
|
||||
<a href="/demos/27027-demo.html" class="block border border-gray-300 rounded-lg p-5 hover:border-amber-500 hover:shadow-md transition">
|
||||
<h3 class="font-semibold text-gray-900 mb-2">27027 Incident Timeline</h3>
|
||||
<p class="text-sm text-gray-600">Step through pattern recognition bias failure and architectural intervention that prevented it.</p>
|
||||
</a>
|
||||
|
||||
<a href="/demos/boundary-demo.html" class="block border border-gray-300 rounded-lg p-5 hover:border-amber-500 hover:shadow-md transition">
|
||||
<h3 class="font-semibold text-gray-900 mb-2">Boundary Evaluation</h3>
|
||||
<p class="text-sm text-gray-600">Test decisions against boundary enforcement to see which require human judgment vs. AI autonomy.</p>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Research Resources -->
|
||||
<section class="mb-16">
|
||||
<h2 class="text-2xl font-bold text-gray-900 mb-6">Research Documentation</h2>
|
||||
|
||||
<div class="space-y-3 text-sm">
|
||||
<a href="/downloads/organizational-theory-foundations-of-the-tractatus-framework.pdf" target="_blank" class="flex items-center justify-between p-4 border border-gray-300 rounded hover:border-amber-500 hover:bg-gray-50 transition">
|
||||
<span class="font-medium text-gray-900">Organisational Theory Foundations</span>
|
||||
<svg class="w-5 h-5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 10v6m0 0l-3-3m3 3l3-3m2 8H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/>
|
||||
</svg>
|
||||
</a>
|
||||
|
||||
<a href="/downloads/pluralistic-values-deliberation-plan-v2-DRAFT.pdf" target="_blank" class="flex items-center justify-between p-4 border border-gray-300 rounded hover:border-amber-500 hover:bg-gray-50 transition">
|
||||
<div>
|
||||
<span class="font-medium text-gray-900">Pluralistic Values Deliberation Plan</span>
|
||||
<span class="ml-2 text-xs bg-amber-100 text-amber-800 px-2 py-1 rounded">DRAFT</span>
|
||||
</div>
|
||||
<svg class="w-5 h-5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 10v6m0 0l-3-3m3 3l3-3m2 8H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/>
|
||||
</svg>
|
||||
</a>
|
||||
|
||||
<a href="/downloads/case-studies-real-world-llm-failure-modes.pdf" target="_blank" class="flex items-center justify-between p-4 border border-gray-300 rounded hover:border-amber-500 hover:bg-gray-50 transition">
|
||||
<span class="font-medium text-gray-900">Case Studies: Real-World LLM Failure Modes</span>
|
||||
<svg class="w-5 h-5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 10v6m0 0l-3-3m3 3l3-3m2 8H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/>
|
||||
</svg>
|
||||
</a>
|
||||
|
||||
<a href="/downloads/framework-governance-in-action-pre-publication-security-audit.pdf" target="_blank" class="flex items-center justify-between p-4 border border-gray-300 rounded hover:border-amber-500 hover:bg-gray-50 transition">
|
||||
<span class="font-medium text-gray-900">Framework in Action: Pre-Publication Security Audit</span>
|
||||
<svg class="w-5 h-5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 10v6m0 0l-3-3m3 3l3-3m2 8H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/>
|
||||
</svg>
|
||||
</a>
|
||||
|
||||
<a href="/docs.html?category=technical-reference" class="flex items-center justify-between p-4 border border-gray-300 rounded hover:border-amber-500 hover:bg-gray-50 transition">
|
||||
<span class="font-medium text-gray-900">Complete Technical Documentation</span>
|
||||
<svg class="w-5 h-5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"/>
|
||||
</svg>
|
||||
</a>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Limitations & Future Research -->
|
||||
<section class="mb-16">
|
||||
<h2 class="text-2xl font-bold text-gray-900 mb-6">Limitations & Future Research Directions</h2>
|
||||
|
||||
<div class="border border-gray-300 rounded-lg">
|
||||
<div class="accordion-button bg-gray-50 p-5 flex justify-between items-center" onclick="toggleAccordion('limitations')">
|
||||
<h3 class="font-semibold text-gray-900">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">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/>
|
||||
</svg>
|
||||
</div>
|
||||
<div id="limitations-content" class="accordion-content">
|
||||
<div class="p-5 border-t border-gray-200 space-y-4 text-sm text-gray-700">
|
||||
|
||||
<div>
|
||||
<strong class="text-gray-900">1. Single-Context Validation</strong>
|
||||
<p class="mt-1">Framework validated only in single-project, single-user context (this website development). No multi-organisation deployment, cross-platform testing, or controlled experimental validation.</p>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<strong class="text-gray-900">2. Voluntary Invocation Limitation</strong>
|
||||
<p class="mt-1">Most critical limitation: Framework can be bypassed if AI simply chooses not to use governance tools. We've addressed this through architectural patterns making governance checks automatic rather than voluntary, but full external enforcement requires runtime-level integration not universally available in current LLM platforms.</p>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<strong class="text-gray-900">3. No Adversarial Testing</strong>
|
||||
<p class="mt-1">Framework has not undergone red-team evaluation, jailbreak testing, or adversarial prompt assessment. All observations come from normal development workflow, not deliberate bypass attempts.</p>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<strong class="text-gray-900">4. Platform Specificity</strong>
|
||||
<p class="mt-1">Observations and interventions validated with Claude Code (Anthropic Sonnet 4.5) only. Generalisability to other LLM systems (Copilot, GPT-4, custom agents) remains unvalidated hypothesis.</p>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<strong class="text-gray-900">5. Scale Uncertainty</strong>
|
||||
<p class="mt-1">Performance characteristics at enterprise scale (thousands of concurrent users, millions of governance events) completely unknown. Current implementation optimised for single-user context.</p>
|
||||
</div>
|
||||
|
||||
<div class="border-t border-gray-200 pt-4 mt-4">
|
||||
<strong class="text-gray-900">Future Research Needs:</strong>
|
||||
<ul class="list-disc pl-5 mt-2 space-y-1">
|
||||
<li>Controlled experimental validation with quantitative metrics</li>
|
||||
<li>Multi-organisation pilot studies across different domains</li>
|
||||
<li>Independent security audit and adversarial testing</li>
|
||||
<li>Cross-platform consistency evaluation (Copilot, GPT-4, open models)</li>
|
||||
<li>Formal verification of boundary enforcement properties</li>
|
||||
<li>Longitudinal study of framework effectiveness over extended deployment</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Additional Resources -->
|
||||
<section class="border-t border-gray-200 pt-12">
|
||||
<h2 class="text-xl font-bold text-gray-900 mb-4">Additional Resources</h2>
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
<a href="/leader.html" class="block border border-gray-300 rounded-lg p-5 hover:border-amber-500 transition">
|
||||
<div class="font-semibold text-gray-900 mb-1">For Decision-Makers</div>
|
||||
<div class="text-sm text-gray-600">Strategic perspective on governance challenges and architectural approaches</div>
|
||||
</a>
|
||||
<a href="/implementer.html" class="block border border-gray-300 rounded-lg p-5 hover:border-amber-500 transition">
|
||||
<div class="font-semibold text-gray-900 mb-1">Implementation Guide</div>
|
||||
<div class="text-sm text-gray-600">Technical integration patterns and deployment considerations</div>
|
||||
</a>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- Footer -->
|
||||
<footer class="bg-gray-900 text-gray-400 py-12">
|
||||
<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 class="grid grid-cols-1 md:grid-cols-3 gap-8 text-sm">
|
||||
<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.
|
||||
<h3 class="text-gray-200 font-semibold mb-3">Tractatus Framework</h3>
|
||||
<p class="text-gray-500">
|
||||
Research framework exploring architectural approaches to AI governance. Apache 2.0 licence.
|
||||
</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>
|
||||
<h3 class="text-gray-200 font-semibold mb-3">Documentation</h3>
|
||||
<ul class="space-y-2">
|
||||
<li><a href="/docs.html" class="hover:text-amber-400">Technical Specifications</a></li>
|
||||
<li><a href="/implementer.html" class="hover:text-amber-400">Implementation</a></li>
|
||||
<li><a href="/leader.html" class="hover:text-amber-400">For Leaders</a></li>
|
||||
<li><a href="/about.html" class="hover:text-amber-400">About</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="/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>
|
||||
<h3 class="text-gray-200 font-semibold mb-3">Research Status</h3>
|
||||
<p class="text-gray-500">
|
||||
Early-stage exploratory research. Observations from single-project context. Independent validation needed.
|
||||
</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 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 License 2.0</a>.</p>
|
||||
<div class="border-t border-gray-800 mt-8 pt-8 text-center text-xs text-gray-600">
|
||||
<p>Tractatus AI Safety Framework — Research Project</p>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<!-- Version Management & PWA -->
|
||||
<script src="/js/version-manager.js"></script>
|
||||
|
||||
<script>
|
||||
function toggleAccordion(id) {
|
||||
const content = document.getElementById(id + '-content');
|
||||
const icon = document.getElementById(id + '-icon');
|
||||
content.classList.toggle('active');
|
||||
icon.classList.toggle('active');
|
||||
}
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
180
public/service-worker.js
Normal file
180
public/service-worker.js
Normal file
|
|
@ -0,0 +1,180 @@
|
|||
/**
|
||||
* Tractatus Service Worker
|
||||
* - Version management and update notifications
|
||||
* - Cache management for offline support
|
||||
* - PWA functionality
|
||||
*/
|
||||
|
||||
const CACHE_VERSION = '1.0.0';
|
||||
const CACHE_NAME = `tractatus-v${CACHE_VERSION}`;
|
||||
const VERSION_CHECK_INTERVAL = 3600000; // 1 hour in milliseconds
|
||||
|
||||
// Assets to cache immediately on install
|
||||
const CRITICAL_ASSETS = [
|
||||
'/',
|
||||
'/index.html',
|
||||
'/css/tailwind.css',
|
||||
'/js/components/navbar.js',
|
||||
'/images/tractatus-icon.svg',
|
||||
'/favicon.svg'
|
||||
];
|
||||
|
||||
// Install event - cache critical assets
|
||||
self.addEventListener('install', (event) => {
|
||||
event.waitUntil(
|
||||
caches.open(CACHE_NAME).then((cache) => {
|
||||
console.log('[Service Worker] Caching critical assets');
|
||||
return cache.addAll(CRITICAL_ASSETS);
|
||||
}).then(() => {
|
||||
// Force activation of new service worker
|
||||
return self.skipWaiting();
|
||||
})
|
||||
);
|
||||
});
|
||||
|
||||
// Activate event - clean up old caches
|
||||
self.addEventListener('activate', (event) => {
|
||||
event.waitUntil(
|
||||
caches.keys().then((cacheNames) => {
|
||||
return Promise.all(
|
||||
cacheNames
|
||||
.filter((name) => name !== CACHE_NAME)
|
||||
.map((name) => {
|
||||
console.log('[Service Worker] Deleting old cache:', name);
|
||||
return caches.delete(name);
|
||||
})
|
||||
);
|
||||
}).then(() => {
|
||||
// Take control of all clients immediately
|
||||
return self.clients.claim();
|
||||
})
|
||||
);
|
||||
});
|
||||
|
||||
// Fetch event - network-first strategy with cache fallback
|
||||
self.addEventListener('fetch', (event) => {
|
||||
const { request } = event;
|
||||
const url = new URL(request.url);
|
||||
|
||||
// Skip chrome-extension and other non-http requests
|
||||
if (!url.protocol.startsWith('http')) {
|
||||
return;
|
||||
}
|
||||
|
||||
// HTML files: Network-first (always check for updates)
|
||||
if (request.destination === 'document' || url.pathname.endsWith('.html')) {
|
||||
event.respondWith(
|
||||
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(() => {
|
||||
// If network fails, try cache
|
||||
return caches.match(request);
|
||||
})
|
||||
);
|
||||
return;
|
||||
}
|
||||
|
||||
// Static assets (CSS, JS, images): Cache-first
|
||||
if (
|
||||
request.destination === 'style' ||
|
||||
request.destination === 'script' ||
|
||||
request.destination === 'image' ||
|
||||
request.destination === 'font'
|
||||
) {
|
||||
event.respondWith(
|
||||
caches.match(request).then((cachedResponse) => {
|
||||
if (cachedResponse) {
|
||||
return cachedResponse;
|
||||
}
|
||||
return fetch(request).then((response) => {
|
||||
// Clone response to cache
|
||||
const responseClone = response.clone();
|
||||
caches.open(CACHE_NAME).then((cache) => {
|
||||
cache.put(request, responseClone);
|
||||
});
|
||||
return response;
|
||||
});
|
||||
})
|
||||
);
|
||||
return;
|
||||
}
|
||||
|
||||
// API calls and other requests: Network-first
|
||||
event.respondWith(
|
||||
fetch(request)
|
||||
.then((response) => {
|
||||
return response;
|
||||
})
|
||||
.catch(() => {
|
||||
return caches.match(request);
|
||||
})
|
||||
);
|
||||
});
|
||||
|
||||
// Message event - handle version checks from clients
|
||||
self.addEventListener('message', (event) => {
|
||||
if (event.data.type === 'CHECK_VERSION') {
|
||||
checkVersion().then((versionInfo) => {
|
||||
event.ports[0].postMessage({
|
||||
type: 'VERSION_INFO',
|
||||
...versionInfo
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
if (event.data.type === 'SKIP_WAITING') {
|
||||
self.skipWaiting();
|
||||
}
|
||||
});
|
||||
|
||||
// Check for version updates
|
||||
async function checkVersion() {
|
||||
try {
|
||||
const response = await fetch('/version.json', { cache: 'no-store' });
|
||||
const serverVersion = await response.json();
|
||||
|
||||
return {
|
||||
currentVersion: CACHE_VERSION,
|
||||
serverVersion: serverVersion.version,
|
||||
updateAvailable: CACHE_VERSION !== serverVersion.version,
|
||||
forceUpdate: serverVersion.forceUpdate,
|
||||
changelog: serverVersion.changelog
|
||||
};
|
||||
} catch (error) {
|
||||
console.error('[Service Worker] Version check failed:', error);
|
||||
return {
|
||||
currentVersion: CACHE_VERSION,
|
||||
serverVersion: null,
|
||||
updateAvailable: false,
|
||||
error: true
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
// Periodic background sync for version checks (if supported)
|
||||
self.addEventListener('periodicsync', (event) => {
|
||||
if (event.tag === 'version-check') {
|
||||
event.waitUntil(
|
||||
checkVersion().then((versionInfo) => {
|
||||
if (versionInfo.updateAvailable) {
|
||||
// Notify all clients about update
|
||||
self.clients.matchAll().then((clients) => {
|
||||
clients.forEach((client) => {
|
||||
client.postMessage({
|
||||
type: 'UPDATE_AVAILABLE',
|
||||
...versionInfo
|
||||
});
|
||||
});
|
||||
});
|
||||
}
|
||||
})
|
||||
);
|
||||
}
|
||||
});
|
||||
11
public/version.json
Normal file
11
public/version.json
Normal file
|
|
@ -0,0 +1,11 @@
|
|||
{
|
||||
"version": "1.0.0",
|
||||
"buildDate": "2025-10-14T10:30:00Z",
|
||||
"changelog": [
|
||||
"Landing page accuracy improvements",
|
||||
"FAQ enhanced for Leader audience",
|
||||
"Removed overstated claims"
|
||||
],
|
||||
"forceUpdate": false,
|
||||
"minVersion": "1.0.0"
|
||||
}
|
||||
|
|
@ -60,6 +60,40 @@ const limiter = rateLimit({
|
|||
});
|
||||
app.use('/api/', limiter);
|
||||
|
||||
// Cache control middleware for static assets
|
||||
app.use((req, res, next) => {
|
||||
const path = req.path;
|
||||
|
||||
// Version manifest and service worker: No cache (always fetch fresh)
|
||||
if (path === '/version.json' || path === '/service-worker.js') {
|
||||
res.setHeader('Cache-Control', 'no-store, no-cache, must-revalidate, proxy-revalidate');
|
||||
res.setHeader('Pragma', 'no-cache');
|
||||
res.setHeader('Expires', '0');
|
||||
}
|
||||
// HTML files: Short cache, always revalidate
|
||||
else if (path.endsWith('.html') || path === '/') {
|
||||
res.setHeader('Cache-Control', 'public, max-age=300, must-revalidate'); // 5 minutes
|
||||
}
|
||||
// CSS and JS files: Longer cache (we use version parameters)
|
||||
else if (path.endsWith('.css') || path.endsWith('.js')) {
|
||||
res.setHeader('Cache-Control', 'public, max-age=31536000, immutable'); // 1 year
|
||||
}
|
||||
// Images and fonts: Long cache
|
||||
else if (path.match(/\.(jpg|jpeg|png|gif|svg|ico|woff|woff2|ttf|eot)$/)) {
|
||||
res.setHeader('Cache-Control', 'public, max-age=31536000, immutable'); // 1 year
|
||||
}
|
||||
// PWA manifest: Medium cache
|
||||
else if (path === '/manifest.json') {
|
||||
res.setHeader('Cache-Control', 'public, max-age=86400'); // 1 day
|
||||
}
|
||||
// Everything else: Short cache
|
||||
else {
|
||||
res.setHeader('Cache-Control', 'public, max-age=3600'); // 1 hour
|
||||
}
|
||||
|
||||
next();
|
||||
});
|
||||
|
||||
// Static files
|
||||
app.use(express.static('public'));
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue