refactor: remove website pages from public/
REMOVED: 7 website feature files from public/
Website Pages (4):
- docs-viewer.html - Website documentation viewer
- media-inquiry.html - Media inquiry form
- media-triage-transparency.html - Media triage page
- researcher.html - "For Researchers" landing page
Website Features (3):
- service-worker.js - PWA service worker
- test-pressure-chart.html - Test page
- version.json - Website version tracking
RETAINED in public/:
- Admin UI (4 pages): login, dashboard, rule-manager, hooks-dashboard
- Admin JS (8 files): auth, dashboard, rule manager, hooks, projects
- Framework components: pressure-chart, interactive-diagram, navbar-admin
- Framework demos (5): 27027, boundary, classification, deliberation, tractatus
- CSS/fonts for admin UI
- Architecture diagrams (images/)
PURPOSE: public/ now contains ONLY framework admin UI and demos,
not website pages for the Tractatus project.
🤖 Generated with Claude Code
Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
TheFlow
parent
ead22be7e2
commit
51f2ec12a6
7 changed files with 0 additions and 1388 deletions
|
|
@ -1,77 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Documentation - Tractatus Framework</title>
|
||||
<link rel="stylesheet" href="/css/tailwind.css?v=0.1.0.1760254958072">
|
||||
<link rel="stylesheet" href="/css/tractatus-theme.min.css">
|
||||
<style>
|
||||
/* Prose styling for document content */
|
||||
.prose h1 { @apply text-3xl font-bold mt-8 mb-4 text-gray-900; }
|
||||
.prose h2 { @apply text-2xl font-bold mt-6 mb-3 text-gray-900; }
|
||||
.prose h3 { @apply text-xl font-semibold mt-4 mb-2 text-gray-800; }
|
||||
.prose p { @apply my-4 text-gray-700 leading-relaxed; }
|
||||
.prose ul { @apply my-4 list-disc list-inside text-gray-700; }
|
||||
.prose ol { @apply my-4 list-decimal list-inside text-gray-700; }
|
||||
.prose code { @apply bg-gray-100 px-1 py-0.5 rounded text-sm font-mono text-red-600; }
|
||||
.prose pre { @apply bg-gray-900 text-gray-100 p-4 rounded-lg overflow-x-auto my-4; }
|
||||
.prose pre code { @apply bg-transparent text-gray-100 p-0; }
|
||||
.prose a { @apply text-blue-600 hover:text-blue-700 underline; }
|
||||
.prose blockquote { @apply border-l-4 border-blue-500 pl-4 italic text-gray-600 my-4; }
|
||||
.prose strong { @apply font-semibold text-gray-900; }
|
||||
.prose em { @apply italic; }
|
||||
</style>
|
||||
</head>
|
||||
<body class="bg-gray-50">
|
||||
|
||||
<!-- Navigation -->
|
||||
<nav class="bg-white border-b border-gray-200 sticky top-0 z-50">
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div class="flex justify-between h-16">
|
||||
<div class="flex items-center">
|
||||
<a href="/" class="text-xl font-bold text-gray-900">Tractatus Framework</a>
|
||||
</div>
|
||||
<div class="flex items-center space-x-6">
|
||||
<a href="/docs.html" class="text-gray-700 hover:text-gray-900">Documentation</a>
|
||||
<a href="/" class="text-gray-600 hover:text-gray-900">Home</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<!-- Main Content -->
|
||||
<div class="flex">
|
||||
<!-- Sidebar -->
|
||||
<aside class="w-64 bg-white border-r border-gray-200 min-h-screen p-6">
|
||||
<h2 class="text-sm font-semibold text-gray-900 uppercase mb-4">Framework Docs</h2>
|
||||
<nav id="doc-navigation" class="space-y-2">
|
||||
<!-- Will be populated by JavaScript -->
|
||||
</nav>
|
||||
</aside>
|
||||
|
||||
<!-- Document Viewer -->
|
||||
<main class="flex-1 flex">
|
||||
<div class="flex-1 p-8">
|
||||
<div id="document-viewer" class="prose max-w-none"></div>
|
||||
</div>
|
||||
|
||||
<!-- Table of Contents (Sticky) -->
|
||||
<aside class="hidden lg:block w-64 bg-white border-l border-gray-200 p-6 sticky top-16 h-screen overflow-y-auto">
|
||||
<div id="table-of-contents">
|
||||
<!-- Will be populated by toc.js -->
|
||||
</div>
|
||||
</aside>
|
||||
</main>
|
||||
</div>
|
||||
|
||||
<!-- Scripts -->
|
||||
<script src="/js/utils/api.js?v=0.1.0.1760254958072"></script>
|
||||
<script src="/js/utils/router.js?v=0.1.0.1760254958072"></script>
|
||||
<script src="/js/components/document-viewer.js?v=0.1.0.1760254958072"></script>
|
||||
<script src="/js/components/code-copy-button.js"></script>
|
||||
<script src="/js/components/toc.js"></script>
|
||||
<script src="/js/docs-viewer-app.js?v=0.1.0.1760254958072"></script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,180 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Media Inquiry | Tractatus AI Safety</title>
|
||||
<link rel="stylesheet" href="/css/fonts.css">
|
||||
<link rel="stylesheet" href="/css/tailwind.css?v=0.1.0.1760254958072">
|
||||
<link rel="stylesheet" href="/css/tractatus-theme.min.css?v=1760816800">
|
||||
<style>
|
||||
.form-group { margin-bottom: 1.5rem; }
|
||||
.form-label {
|
||||
display: block;
|
||||
font-weight: 600;
|
||||
color: #374151;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
.form-input, .form-textarea {
|
||||
width: 100%;
|
||||
padding: 0.75rem;
|
||||
border: 2px solid #e2e8f0;
|
||||
border-radius: 0.5rem;
|
||||
font-size: 1rem;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
.form-input:focus, .form-textarea:focus {
|
||||
outline: none;
|
||||
border-color: var(--tractatus-core-end);
|
||||
box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.1);
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
.form-textarea { min-height: 150px; resize: vertical; }
|
||||
.form-help { font-size: 0.875rem; color: #6b7280; margin-top: 0.25rem; }
|
||||
.required { color: #dc2626; }
|
||||
#success-message, #error-message {
|
||||
display: none;
|
||||
padding: 1rem;
|
||||
border-radius: 0.5rem;
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
#success-message {
|
||||
background-color: #d1fae5;
|
||||
border: 1px solid #10b981;
|
||||
color: #065f46;
|
||||
}
|
||||
#error-message {
|
||||
background-color: #fee2e2;
|
||||
border: 1px solid #ef4444;
|
||||
color: #991b1b;
|
||||
}
|
||||
|
||||
/* 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 var(--tractatus-core-end); }
|
||||
|
||||
/* Accessibility: Focus indicators (WCAG 2.4.7) */
|
||||
a:focus, button:focus, input:focus, select:focus, textarea:focus {
|
||||
outline: 3px solid var(--tractatus-core-end);
|
||||
outline-offset: 2px;
|
||||
}
|
||||
a:focus:not(:focus-visible) { outline: none; }
|
||||
a:focus-visible { outline: 3px solid var(--tractatus-core-end); outline-offset: 2px; }
|
||||
</style>
|
||||
</head>
|
||||
<body class="bg-gray-50">
|
||||
|
||||
<!-- 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>
|
||||
|
||||
<!-- Main Content -->
|
||||
<main id="main-content" class="max-w-3xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
|
||||
|
||||
<!-- Header -->
|
||||
<div class="mb-8">
|
||||
<h1 class="text-3xl font-bold text-gray-900 mb-3">Media Inquiry</h1>
|
||||
<p class="text-lg text-gray-600">
|
||||
Press and media inquiries about the Tractatus Framework. We review all inquiries and respond promptly.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- Messages -->
|
||||
<div id="success-message" role="alert" aria-live="polite"></div>
|
||||
<div id="error-message" role="alert" aria-live="assertive"></div>
|
||||
|
||||
<!-- Form -->
|
||||
<div class="bg-white rounded-lg shadow-sm border border-gray-200 p-8">
|
||||
<form id="media-inquiry-form">
|
||||
|
||||
<!-- Contact Information -->
|
||||
<h2 class="text-xl font-semibold text-gray-900 mb-6">Contact Information</h2>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="contact-name" class="form-label">
|
||||
Your Name <span class="required">*</span>
|
||||
</label>
|
||||
<input type="text" id="contact-name" name="contact.name" class="form-input" required aria-required="true">
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="contact-email" class="form-label">
|
||||
Email Address <span class="required">*</span>
|
||||
</label>
|
||||
<input type="email" id="contact-email" name="contact.email" class="form-input" required aria-required="true">
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="contact-outlet" class="form-label">
|
||||
Media Outlet/Organization <span class="required">*</span>
|
||||
</label>
|
||||
<input type="text" id="contact-outlet" name="contact.outlet" class="form-input" required aria-required="true" aria-describedby="outlet-help">
|
||||
<p id="outlet-help" class="form-help">Publication, website, podcast, or organization you represent</p>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="contact-phone" class="form-label">
|
||||
Phone Number (optional)
|
||||
</label>
|
||||
<input type="tel" id="contact-phone" name="contact.phone" class="form-input">
|
||||
</div>
|
||||
|
||||
<!-- Inquiry Details -->
|
||||
<h2 class="text-xl font-semibold text-gray-900 mb-6 mt-8">Inquiry Details</h2>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="inquiry-subject" class="form-label">
|
||||
Subject <span class="required">*</span>
|
||||
</label>
|
||||
<input type="text" id="inquiry-subject" name="inquiry.subject" class="form-input" required aria-required="true">
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="inquiry-message" class="form-label">
|
||||
Message <span class="required">*</span>
|
||||
</label>
|
||||
<textarea id="inquiry-message" name="inquiry.message" class="form-textarea" required aria-required="true"></textarea>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="inquiry-deadline" class="form-label">
|
||||
Deadline (if applicable)
|
||||
</label>
|
||||
<input type="datetime-local" id="inquiry-deadline" name="inquiry.deadline" class="form-input" aria-describedby="deadline-help">
|
||||
<p id="deadline-help" class="form-help">When do you need a response by?</p>
|
||||
</div>
|
||||
|
||||
<!-- Submit Button -->
|
||||
<div class="mt-8">
|
||||
<button type="submit" id="submit-button" class="w-full text-white px-6 py-3 rounded-lg font-semibold transition-all duration-200 hover:shadow-lg hover:-translate-y-0.5 bg-gradient-cyan-blue">
|
||||
Submit Inquiry
|
||||
</button>
|
||||
<p class="form-help mt-3 text-center">
|
||||
We review all media inquiries and typically respond within 24-48 hours.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<!-- Privacy Note -->
|
||||
<div class="mt-6 text-sm text-gray-600 text-center">
|
||||
<p>
|
||||
Your contact information is handled according to our
|
||||
<a href="/about/values.html" class="hover:underline transition-colors text-tractatus-link">privacy principles</a>.
|
||||
We never share media inquiries with third parties.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
</main>
|
||||
|
||||
<!-- Footer -->
|
||||
<script src="/js/media-inquiry.js"></script>
|
||||
|
||||
<!-- Footer Component -->
|
||||
<script src="/js/components/footer.js"></script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,364 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Media Triage Transparency | Tractatus Framework</title>
|
||||
<meta name="description" content="Transparent AI-powered media inquiry triage with 100% human oversight. See how the Tractatus framework governs AI analysis in practice.">
|
||||
<link rel="stylesheet" href="/css/tailwind.css">
|
||||
<link rel="stylesheet" href="/css/tractatus-theme.min.css">
|
||||
<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; }
|
||||
|
||||
/* Accessibility: Focus indicators (WCAG 2.4.7) */
|
||||
a:focus, button:focus, input:focus, select:focus, textarea:focus {
|
||||
outline: 3px solid #3b82f6;
|
||||
outline-offset: 2px;
|
||||
}
|
||||
a:focus:not(:focus-visible) { outline: none; }
|
||||
a:focus-visible { outline: 3px solid #3b82f6; outline-offset: 2px; }
|
||||
</style>
|
||||
</head>
|
||||
<body class="bg-gray-50">
|
||||
|
||||
<!-- 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"></script>
|
||||
|
||||
<!-- Hero Section -->
|
||||
<div class="bg-gradient-to-br from-blue-50 to-indigo-50 py-20">
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div class="text-center">
|
||||
<h1 class="text-5xl font-bold text-gray-900 mb-6">
|
||||
Media Triage Transparency
|
||||
</h1>
|
||||
<p class="text-xl text-gray-600 max-w-3xl mx-auto mb-8">
|
||||
Demonstrating AI-powered media inquiry triage with 100% human oversight. AI analyzes and suggests—humans decide.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Main Content -->
|
||||
<div id="main-content" class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-16">
|
||||
|
||||
<!-- Governance Principles -->
|
||||
<div class="bg-white rounded-lg shadow-lg p-8 mb-12">
|
||||
<h2 class="text-2xl font-bold text-gray-900 mb-6">Tractatus Governance in Practice</h2>
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||
<div class="flex items-start">
|
||||
<div class="flex-shrink-0 w-10 h-10 bg-green-100 rounded-lg flex items-center justify-center mr-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 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/>
|
||||
</svg>
|
||||
</div>
|
||||
<div>
|
||||
<h3 class="font-semibold text-gray-900 mb-1">AI Analyzes, Humans Decide</h3>
|
||||
<p class="text-sm text-gray-600">AI suggests urgency, sensitivity, and talking points. Every response requires human approval.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex items-start">
|
||||
<div class="flex-shrink-0 w-10 h-10 bg-blue-100 rounded-lg flex items-center justify-center mr-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="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/>
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"/>
|
||||
</svg>
|
||||
</div>
|
||||
<div>
|
||||
<h3 class="font-semibold text-gray-900 mb-1">Full Transparency</h3>
|
||||
<p class="text-sm text-gray-600">All AI reasoning is visible and auditable. No hidden decision-making.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex items-start">
|
||||
<div class="flex-shrink-0 w-10 h-10 bg-red-100 rounded-lg flex items-center justify-center mr-4">
|
||||
<svg aria-hidden="true" class="w-6 h-6 text-red-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"/>
|
||||
</svg>
|
||||
</div>
|
||||
<div>
|
||||
<h3 class="font-semibold text-gray-900 mb-1">BoundaryEnforcer Active</h3>
|
||||
<p class="text-sm text-gray-600">AI cannot make values decisions. Topics involving strategy, ethics, or Te Tiriti require human judgment.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex items-start">
|
||||
<div class="flex-shrink-0 w-10 h-10 bg-purple-100 rounded-lg flex items-center justify-center mr-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>
|
||||
<div>
|
||||
<h3 class="font-semibold text-gray-900 mb-1">No Auto-Responses</h3>
|
||||
<p class="text-sm text-gray-600">0% automated responses. Every reply is written and approved by a human.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Statistics Loading State -->
|
||||
<div id="loading-state" class="text-center py-12">
|
||||
<div class="inline-block animate-spin rounded-full h-12 w-12 border-b-2 border-indigo-600 mb-4"></div>
|
||||
<p class="text-gray-600">Loading transparency statistics...</p>
|
||||
</div>
|
||||
|
||||
<!-- Statistics Content (hidden until loaded) -->
|
||||
<div id="stats-content" class="hidden">
|
||||
|
||||
<!-- Key Metrics -->
|
||||
<div class="mb-12">
|
||||
<h2 class="text-2xl font-bold text-gray-900 mb-6">Triage Statistics</h2>
|
||||
<div class="grid grid-cols-1 md:grid-cols-4 gap-6">
|
||||
<!-- Total Triaged -->
|
||||
<div class="bg-white rounded-lg shadow p-6">
|
||||
<div class="flex items-center">
|
||||
<div class="flex-shrink-0 w-12 h-12 bg-blue-100 rounded-lg flex items-center justify-center mr-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="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2"/>
|
||||
</svg>
|
||||
</div>
|
||||
<div>
|
||||
<p class="text-sm font-medium text-gray-500">Inquiries Triaged</p>
|
||||
<p id="stat-total" class="text-3xl font-bold text-gray-900">-</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Values Involvement -->
|
||||
<div class="bg-white rounded-lg shadow p-6">
|
||||
<div class="flex items-center">
|
||||
<div class="flex-shrink-0 w-12 h-12 bg-red-100 rounded-lg flex items-center justify-center mr-4">
|
||||
<svg aria-hidden="true" class="w-6 h-6 text-red-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"/>
|
||||
</svg>
|
||||
</div>
|
||||
<div>
|
||||
<p class="text-sm font-medium text-gray-500">Values-Sensitive</p>
|
||||
<p id="stat-values" class="text-3xl font-bold text-gray-900">-</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Human Review Rate -->
|
||||
<div class="bg-white rounded-lg shadow p-6">
|
||||
<div class="flex items-center">
|
||||
<div class="flex-shrink-0 w-12 h-12 bg-green-100 rounded-lg flex items-center justify-center mr-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="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"/>
|
||||
</svg>
|
||||
</div>
|
||||
<div>
|
||||
<p class="text-sm font-medium text-gray-500">Human Review</p>
|
||||
<p class="text-3xl font-bold text-green-600">100%</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Auto-Response Rate -->
|
||||
<div class="bg-white rounded-lg shadow p-6">
|
||||
<div class="flex items-center">
|
||||
<div class="flex-shrink-0 w-12 h-12 bg-gray-100 rounded-lg flex items-center justify-center mr-4">
|
||||
<svg aria-hidden="true" class="w-6 h-6 text-gray-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M18.364 18.364A9 9 0 005.636 5.636m12.728 12.728A9 9 0 015.636 5.636m12.728 12.728L5.636 5.636"/>
|
||||
</svg>
|
||||
</div>
|
||||
<div>
|
||||
<p class="text-sm font-medium text-gray-500">Auto-Responses</p>
|
||||
<p class="text-3xl font-bold text-gray-600">0%</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Urgency Distribution -->
|
||||
<div class="mb-12">
|
||||
<h2 class="text-2xl font-bold text-gray-900 mb-6">Urgency Classification</h2>
|
||||
<div class="bg-white rounded-lg shadow p-6">
|
||||
<div class="space-y-4">
|
||||
<!-- High Urgency -->
|
||||
<div>
|
||||
<div class="flex justify-between text-sm mb-1">
|
||||
<span class="font-medium text-gray-700">High Urgency</span>
|
||||
<span id="urgency-high-count" class="text-gray-600">- inquiries</span>
|
||||
</div>
|
||||
<div class="w-full bg-gray-200 rounded-full h-3">
|
||||
<div id="urgency-high-bar" class="bg-red-500 h-3 rounded-full"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Medium Urgency -->
|
||||
<div>
|
||||
<div class="flex justify-between text-sm mb-1">
|
||||
<span class="font-medium text-gray-700">Medium Urgency</span>
|
||||
<span id="urgency-medium-count" class="text-gray-600">- inquiries</span>
|
||||
</div>
|
||||
<div class="w-full bg-gray-200 rounded-full h-3">
|
||||
<div id="urgency-medium-bar" class="bg-yellow-500 h-3 rounded-full"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Low Urgency -->
|
||||
<div>
|
||||
<div class="flex justify-between text-sm mb-1">
|
||||
<span class="font-medium text-gray-700">Low Urgency</span>
|
||||
<span id="urgency-low-count" class="text-gray-600">- inquiries</span>
|
||||
</div>
|
||||
<div class="w-full bg-gray-200 rounded-full h-3">
|
||||
<div id="urgency-low-bar" class="bg-green-500 h-3 rounded-full"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Topic Sensitivity Distribution -->
|
||||
<div class="mb-12">
|
||||
<h2 class="text-2xl font-bold text-gray-900 mb-6">Topic Sensitivity Analysis</h2>
|
||||
<div class="bg-white rounded-lg shadow p-6">
|
||||
<div class="space-y-4">
|
||||
<!-- High Sensitivity -->
|
||||
<div>
|
||||
<div class="flex justify-between text-sm mb-1">
|
||||
<span class="font-medium text-gray-700">High Sensitivity</span>
|
||||
<span id="sensitivity-high-count" class="text-gray-600">- inquiries</span>
|
||||
</div>
|
||||
<div class="w-full bg-gray-200 rounded-full h-3">
|
||||
<div id="sensitivity-high-bar" class="bg-red-500 h-3 rounded-full"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Medium Sensitivity -->
|
||||
<div>
|
||||
<div class="flex justify-between text-sm mb-1">
|
||||
<span class="font-medium text-gray-700">Medium Sensitivity</span>
|
||||
<span id="sensitivity-medium-count" class="text-gray-600">- inquiries</span>
|
||||
</div>
|
||||
<div class="w-full bg-gray-200 rounded-full h-3">
|
||||
<div id="sensitivity-medium-bar" class="bg-yellow-500 h-3 rounded-full"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Low Sensitivity -->
|
||||
<div>
|
||||
<div class="flex justify-between text-sm mb-1">
|
||||
<span class="font-medium text-gray-700">Low Sensitivity</span>
|
||||
<span id="sensitivity-low-count" class="text-gray-600">- inquiries</span>
|
||||
</div>
|
||||
<div class="w-full bg-gray-200 rounded-full h-3">
|
||||
<div id="sensitivity-low-bar" class="bg-green-500 h-3 rounded-full"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Framework Compliance Badges -->
|
||||
<div class="mb-12">
|
||||
<h2 class="text-2xl font-bold text-gray-900 mb-6">Framework Compliance</h2>
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||
<div class="bg-green-50 border border-green-200 rounded-lg p-6">
|
||||
<div class="flex items-center mb-3">
|
||||
<svg class="w-8 h-8 text-green-600 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"/>
|
||||
</svg>
|
||||
<h3 class="text-lg font-bold text-green-900">BoundaryEnforcer Active</h3>
|
||||
</div>
|
||||
<p class="text-sm text-green-800">
|
||||
<strong id="boundary-enforcements">-</strong> values-sensitive inquiries detected and escalated to human approval.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="bg-blue-50 border border-blue-200 rounded-lg p-6">
|
||||
<div class="flex items-center mb-3">
|
||||
<svg class="w-8 h-8 text-blue-600 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/>
|
||||
</svg>
|
||||
<h3 class="text-lg font-bold text-blue-900">AI Model Used</h3>
|
||||
</div>
|
||||
<p class="text-sm text-blue-800">
|
||||
Claude 3.5 Sonnet (claude-3-5-sonnet-20241022) powers all triage analysis.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="bg-purple-50 border border-purple-200 rounded-lg p-6">
|
||||
<div class="flex items-center mb-3">
|
||||
<svg class="w-8 h-8 text-purple-600 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/>
|
||||
</svg>
|
||||
<h3 class="text-lg font-bold text-purple-900">Average Response Time</h3>
|
||||
</div>
|
||||
<p class="text-sm text-purple-800">
|
||||
<strong id="avg-response-time">-</strong> hours suggested response time (AI recommendation, human decides).
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="bg-yellow-50 border border-yellow-200 rounded-lg p-6">
|
||||
<div class="flex items-center mb-3">
|
||||
<svg class="w-8 h-8 text-yellow-600 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/>
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"/>
|
||||
</svg>
|
||||
<h3 class="text-lg font-bold text-yellow-900">Full Transparency</h3>
|
||||
</div>
|
||||
<p class="text-sm text-yellow-800">
|
||||
All AI reasoning, talking points, and draft responses are visible in the admin interface and audit logs.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- What This Demonstrates -->
|
||||
<div class="bg-gradient-to-r from-indigo-50 to-purple-50 rounded-lg p-8">
|
||||
<h2 class="text-2xl font-bold text-gray-900 mb-4">What This Demonstrates</h2>
|
||||
<div class="space-y-3 text-gray-700">
|
||||
<p>
|
||||
<strong>Priority 4 of the Feature-Rich UI Implementation Plan:</strong> This media triage system showcases the Tractatus framework governing AI in real operational context.
|
||||
</p>
|
||||
<p>
|
||||
<strong>AI Suggests, Humans Decide:</strong> The AI analyzes urgency, detects sensitivity, and generates draft responses—but never sends anything automatically. Every response requires human review and approval.
|
||||
</p>
|
||||
<p>
|
||||
<strong>BoundaryEnforcer in Action:</strong> When inquiries touch on framework values, strategic direction, or Te Tiriti matters, the AI escalates immediately to human judgment. It cannot make these decisions.
|
||||
</p>
|
||||
<p>
|
||||
<strong>Transparent by Design:</strong> This page proves the framework isn't just theory—it's operational, measurable, and auditable.
|
||||
</p>
|
||||
</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-blue-600 to-indigo-600 rounded-2xl p-12 text-center text-white">
|
||||
<h2 class="text-3xl font-bold mb-4">Experience Tractatus in Action</h2>
|
||||
<p class="text-xl mb-8 opacity-90">
|
||||
See how architectural constraints preserve human agency in real-world AI systems.
|
||||
</p>
|
||||
<div class="flex justify-center space-x-4">
|
||||
<a href="/implementer.html" class="bg-white text-blue-600 px-8 py-3 rounded-lg font-semibold hover:bg-gray-100 transition">
|
||||
Implementation Guide
|
||||
</a>
|
||||
<a href="/docs.html" class="bg-blue-700 text-white px-8 py-3 rounded-lg font-semibold hover:bg-blue-800 transition border-2 border-white">
|
||||
Read Documentation
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Footer -->
|
||||
<script src="/js/media-triage-transparency.js"></script>
|
||||
|
||||
<!-- Footer Component -->
|
||||
<script src="/js/components/footer.js"></script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,530 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<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="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-new.svg">
|
||||
|
||||
<link rel="icon" type="image/svg+xml" href="/favicon-new.svg">
|
||||
<link rel="stylesheet" href="/css/fonts.css">
|
||||
<link rel="stylesheet" href="/css/tailwind.css?v=0.1.0.1760254958072">
|
||||
<link rel="stylesheet" href="/css/tractatus-theme.min.css?v=1760816800">
|
||||
<style>
|
||||
.skip-link { position: absolute; left: -9999px; }
|
||||
.skip-link:focus { left: 0; z-index: 100; background: white; padding: 1rem; }
|
||||
a:focus, button:focus { outline: 2px solid #d97706; outline-offset: 2px; }
|
||||
|
||||
/* Accordion styles */
|
||||
.accordion-button { cursor: pointer; user-select: none; }
|
||||
.accordion-content {
|
||||
max-height: 0;
|
||||
overflow: hidden;
|
||||
transition: max-height 0.3s ease-out;
|
||||
}
|
||||
.accordion-content.active {
|
||||
max-height: 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-white">
|
||||
|
||||
<a href="#main-content" class="skip-link">Skip to main content</a>
|
||||
|
||||
<script src="/js/components/navbar.js?v=0.1.0.1760254958072"></script>
|
||||
|
||||
<!-- Breadcrumb Navigation -->
|
||||
<nav class="bg-gray-50 border-b border-gray-200 py-3" aria-label="Breadcrumb">
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<ol class="flex items-center space-x-2 text-sm">
|
||||
<li><a href="/" class="hover:underline transition-colors text-tractatus-link">Home</a></li>
|
||||
<li class="text-gray-400">/</li>
|
||||
<li class="text-gray-900 font-medium" aria-current="page">Researcher</li>
|
||||
</ol>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<!-- Header -->
|
||||
<div class="bg-gray-50 border-b border-gray-200 py-16">
|
||||
<div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div class="inline-flex items-center bg-gray-200 text-gray-700 px-3 py-1 rounded text-sm font-medium mb-6" data-i18n="header.badge">
|
||||
Research Framework • Empirical Observations
|
||||
</div>
|
||||
<h1 class="text-4xl font-bold text-gray-900 mb-4" data-i18n="header.title">
|
||||
Research Foundations & Empirical Observations
|
||||
</h1>
|
||||
<p class="text-lg text-gray-600 leading-relaxed" data-i18n="header.subtitle">
|
||||
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>
|
||||
</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 animate-on-scroll" data-animation="fade-in">
|
||||
<h2 class="text-2xl font-bold text-gray-900 mb-6" data-i18n="sections.research_context.heading">Research Context & Scope</h2>
|
||||
|
||||
<div class="bg-amber-50 border border-amber-200 rounded-lg p-6 mb-6 animate-on-scroll" data-animation="slide-up" data-stagger="100">
|
||||
<p class="text-sm text-amber-900 font-medium mb-2" data-i18n="sections.research_context.development_note">Development Context</p>
|
||||
<p class="text-sm text-amber-800" data-i18n="sections.research_context.development_text">
|
||||
Tractatus was developed over six months (April–October 2025) in progressive stages that evolved into a live demonstration of its capabilities in the form of a single-project context (https://agenticgovernance.digital). 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 animate-on-scroll" data-animation="fade-in">
|
||||
<h2 class="text-2xl font-bold text-gray-900 mb-6" data-i18n="sections.theoretical_foundations.heading">Theoretical Foundations</h2>
|
||||
|
||||
<!-- Organisational Theory -->
|
||||
<div class="border-l-4 border border-gray-200 rounded-lg mb-4 border-l-service-validator animate-on-scroll" data-animation="slide-up" data-stagger="100">
|
||||
<div class="accordion-button bg-white p-5 flex justify-between items-center hover:bg-purple-50 transition-colors duration-200" data-accordion="org-theory">
|
||||
<h3 class="font-semibold text-gray-900 group-hover:text-[#8b5cf6] transition-colors" data-i18n="sections.theoretical_foundations.org_theory_title">Organisational Theory Basis</h3>
|
||||
<svg id="org-theory-icon" class="accordion-icon w-5 h-5 text-purple-600 transition-transform duration-300" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/>
|
||||
</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>
|
||||
|
||||
<div class="text-sm text-gray-600 border-t border-gray-200 pt-4 mt-4">
|
||||
<a href="/downloads/organizational-theory-foundations-of-the-tractatus-framework.pdf"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
class="inline-flex items-center bg-amber-600 text-white px-5 py-3 rounded-lg font-semibold hover:bg-amber-700 transition shadow-md">
|
||||
<svg class="w-5 h-5 mr-2" 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>
|
||||
View Complete Organisational Theory Foundations (PDF)
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Values Pluralism -->
|
||||
<div class="border-l-4 border border-gray-200 rounded-lg border-l-service-validator animate-on-scroll" data-animation="slide-up" data-stagger="200">
|
||||
<div class="accordion-button bg-white p-5 flex justify-between items-center hover:bg-purple-50 transition-colors duration-200" data-accordion="values">
|
||||
<h3 class="font-semibold text-gray-900 group-hover:text-[#8b5cf6] transition-colors" data-i18n="sections.theoretical_foundations.values_pluralism_title">Values Pluralism & Moral Philosophy</h3>
|
||||
<svg id="values-icon" class="accordion-icon w-5 h-5 text-purple-600 transition-transform duration-300" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/>
|
||||
</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>
|
||||
|
||||
<div class="text-sm text-gray-600 border-t border-gray-200 pt-4 mt-4">
|
||||
<a href="/downloads/pluralistic-values-deliberation-plan-v2-DRAFT.pdf"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
class="inline-flex items-center bg-amber-600 text-white px-5 py-3 rounded-lg font-semibold hover:bg-amber-700 transition shadow-md">
|
||||
<svg class="w-5 h-5 mr-2" 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>
|
||||
View Pluralistic Values Deliberation Plan (PDF, DRAFT)
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Empirical Observations -->
|
||||
<section class="mb-16">
|
||||
<h2 class="text-2xl font-bold text-gray-900 mb-6" data-i18n="sections.empirical_observations.heading">Empirical Observations: Documented Failure Modes</h2>
|
||||
|
||||
<p class="text-sm text-gray-600 mb-6" data-i18n="sections.empirical_observations.intro">
|
||||
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" data-i18n="sections.empirical_observations.failure_1_title">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" data-i18n="sections.empirical_observations.failure_2_title">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" data-i18n="sections.empirical_observations.failure_3_title">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> <span data-i18n="sections.empirical_observations.research_note">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.</span>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Architectural Components -->
|
||||
<section class="mb-16">
|
||||
<h2 class="text-2xl font-bold text-gray-900 mb-6" data-i18n="sections.architecture.heading">Six-Component Architecture</h2>
|
||||
|
||||
<div class="border-l-4 border border-gray-200 rounded-lg border-l-service-validator">
|
||||
<div class="accordion-button bg-white p-5 flex justify-between items-center hover:bg-purple-50 transition-colors duration-200" data-accordion="architecture">
|
||||
<h3 class="font-semibold text-gray-900 group-hover:text-[#8b5cf6] transition-colors" data-i18n="sections.architecture.services_title">Framework Services & Functions</h3>
|
||||
<svg id="architecture-icon" class="accordion-icon w-5 h-5 text-purple-600 transition-transform duration-300" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/>
|
||||
</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> <span data-i18n="sections.architecture.principle">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.</span>
|
||||
</div>
|
||||
|
||||
<div class="border-t border-gray-200 pt-4 mt-4">
|
||||
<a href="/architecture.html"
|
||||
class="inline-flex items-center bg-blue-600 text-white px-5 py-3 rounded-lg font-semibold hover:bg-blue-700 transition shadow-md">
|
||||
<svg class="w-5 h-5 mr-2" 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>
|
||||
View Full System Architecture & Technical Details
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Interactive Demonstrations -->
|
||||
<section class="mb-16">
|
||||
<h2 class="text-2xl font-bold text-gray-900 mb-6" data-i18n="sections.demos.heading">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" data-i18n="sections.demos.classification_title">Instruction Classification</h3>
|
||||
<p class="text-sm text-gray-600" data-i18n="sections.demos.classification_desc">Explore how instructions are classified across quadrants with persistence levels and temporal scope.</p>
|
||||
</a>
|
||||
|
||||
<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" data-i18n="sections.demos.incident_title">27027 Incident Timeline</h3>
|
||||
<p class="text-sm text-gray-600" data-i18n="sections.demos.incident_desc">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" data-i18n="sections.demos.boundary_title">Boundary Evaluation</h3>
|
||||
<p class="text-sm text-gray-600" data-i18n="sections.demos.boundary_desc">Test decisions against boundary enforcement to see which require human judgment vs. AI autonomy.</p>
|
||||
</a>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Research Resources -->
|
||||
<section class="mb-16">
|
||||
<h2 class="text-2xl font-bold text-gray-900 mb-6" data-i18n="sections.resources.heading">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="/downloads/tractatus-agentic-governance-system-glossary-of-terms.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">Appendix B: Glossary of Terms</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" data-i18n="sections.limitations.heading">Limitations & Future Research Directions</h2>
|
||||
|
||||
<div class="border-l-4 border border-gray-200 rounded-lg border-l-service-validator">
|
||||
<div class="accordion-button bg-white p-5 flex justify-between items-center hover:bg-purple-50 transition-colors duration-200" data-accordion="limitations">
|
||||
<h3 class="font-semibold text-gray-900 group-hover:text-[#8b5cf6] transition-colors" data-i18n="sections.limitations.title">Known Limitations & Research Gaps</h3>
|
||||
<svg id="limitations-icon" class="accordion-icon w-5 h-5 text-purple-600 transition-transform duration-300" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/>
|
||||
</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" data-i18n="footer.additional_resources">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" data-i18n="footer.for_decision_makers">For Decision-Makers</div>
|
||||
<div class="text-sm text-gray-600" data-i18n="footer.for_decision_makers_desc">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" data-i18n="footer.implementation_guide">Implementation Guide</div>
|
||||
<div class="text-sm text-gray-600" data-i18n="footer.implementation_guide_desc">Technical integration patterns and deployment considerations</div>
|
||||
</a>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- Footer -->
|
||||
<!-- Footer -->
|
||||
<!-- Internationalization -->
|
||||
<script src="/js/i18n-simple.js?v=1760818106"></script>
|
||||
<script src="/js/components/language-selector.js?v=1760818106"></script>
|
||||
|
||||
<!-- Scroll Animations (Phase 3) -->
|
||||
<script src="/js/scroll-animations.js"></script>
|
||||
<!-- Page Transitions (Phase 3) -->
|
||||
<script src="/js/page-transitions.js"></script>
|
||||
|
||||
|
||||
<!-- Version Management & PWA -->
|
||||
<script src="/js/version-manager.js"></script>
|
||||
<script src="/js/researcher-page.js"></script>
|
||||
|
||||
<!-- Footer Component -->
|
||||
<script src="/js/components/footer.js"></script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,197 +0,0 @@
|
|||
/**
|
||||
* Tractatus Service Worker
|
||||
* - Version management and update notifications
|
||||
* - Cache management for offline support
|
||||
* - PWA functionality
|
||||
*/
|
||||
|
||||
const CACHE_VERSION = '1.1.5';
|
||||
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-ONLY (never cache, always fetch fresh)
|
||||
// This ensures users always get the latest content without cache refresh
|
||||
if (request.destination === 'document' || url.pathname.endsWith('.html')) {
|
||||
event.respondWith(
|
||||
fetch(request)
|
||||
.catch(() => {
|
||||
// Only for offline fallback: serve cached index.html
|
||||
if (url.pathname === '/' || url.pathname === '/index.html') {
|
||||
return caches.match('/index.html');
|
||||
}
|
||||
// All other HTML: network only, fail if offline
|
||||
throw new Error('Network required for HTML pages');
|
||||
})
|
||||
);
|
||||
return;
|
||||
}
|
||||
|
||||
// Static assets (CSS, JS, images): Network-first for versioned URLs, cache-first for others
|
||||
if (
|
||||
request.destination === 'style' ||
|
||||
request.destination === 'script' ||
|
||||
request.destination === 'image' ||
|
||||
request.destination === 'font'
|
||||
) {
|
||||
// If URL has version parameter, always fetch fresh (network-first)
|
||||
const hasVersionParam = url.searchParams.has('v');
|
||||
|
||||
if (hasVersionParam) {
|
||||
// Network-first for versioned assets (ensures cache-busting works)
|
||||
event.respondWith(
|
||||
fetch(request).then((response) => {
|
||||
// Cache the response for offline use
|
||||
const responseClone = response.clone();
|
||||
caches.open(CACHE_NAME).then((cache) => {
|
||||
cache.put(request, responseClone);
|
||||
});
|
||||
return response;
|
||||
}).catch(() => {
|
||||
// Fallback to cache if offline
|
||||
return caches.match(request);
|
||||
})
|
||||
);
|
||||
} else {
|
||||
// Cache-first for non-versioned assets
|
||||
event.respondWith(
|
||||
caches.match(request).then((cachedResponse) => {
|
||||
if (cachedResponse) {
|
||||
return cachedResponse;
|
||||
}
|
||||
return fetch(request).then((response) => {
|
||||
const responseClone = response.clone();
|
||||
caches.open(CACHE_NAME).then((cache) => {
|
||||
cache.put(request, responseClone);
|
||||
});
|
||||
return response;
|
||||
});
|
||||
})
|
||||
);
|
||||
}
|
||||
return;
|
||||
}
|
||||
|
||||
// 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
|
||||
});
|
||||
});
|
||||
});
|
||||
}
|
||||
})
|
||||
);
|
||||
}
|
||||
});
|
||||
|
|
@ -1,29 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Test - Pressure Chart</title>
|
||||
<link rel="stylesheet" href="/css/tailwind.css">
|
||||
</head>
|
||||
<body class="p-10 bg-gray-50">
|
||||
|
||||
<h1 class="text-3xl font-bold mb-8">Pressure Chart Test Page</h1>
|
||||
|
||||
<div class="max-w-2xl">
|
||||
<div class="bg-gray-50 rounded-xl shadow-lg p-6 border border-gray-200">
|
||||
<div id="pressure-chart"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mt-8 p-4 bg-blue-50 border border-blue-200 rounded max-w-2xl">
|
||||
<h2 class="font-bold mb-2">Debug Info:</h2>
|
||||
<p class="text-sm">If both buttons are visible here, the issue is in the architecture.html page layout.</p>
|
||||
<p class="text-sm">If buttons are still hidden, the issue is in the JavaScript component itself.</p>
|
||||
</div>
|
||||
|
||||
<script src="/js/components/pressure-chart.js?v=20251020142000"></script>
|
||||
<script src="/js/components/activity-timeline.js?v=20251020150000"></script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,11 +0,0 @@
|
|||
{
|
||||
"version": "1.1.5",
|
||||
"buildDate": "2025-10-18T03:03:00Z",
|
||||
"changelog": [
|
||||
"Implemented proper cache-busting for JavaScript files",
|
||||
"Versioned assets now use network-first strategy",
|
||||
"Fixes deployment issues without requiring manual cache clearing"
|
||||
],
|
||||
"forceUpdate": true,
|
||||
"minVersion": "1.1.5"
|
||||
}
|
||||
Loading…
Add table
Reference in a new issue