427 lines
29 KiB
HTML
427 lines
29 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<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="Production implementation of architectural AI safety constraints. Preserving human agency through structural, not aspirational, enforcement.">
|
|
|
|
<!-- PWA Manifest -->
|
|
<link rel="manifest" href="/manifest.json">
|
|
|
|
<!-- PWA Meta Tags -->
|
|
<meta name="theme-color" content="#0ea5e9">
|
|
<meta name="apple-mobile-web-app-capable" content="yes">
|
|
<meta name="mobile-web-app-capable" content="yes">
|
|
<meta name="apple-mobile-web-app-status-bar-style" content="default">
|
|
<meta name="apple-mobile-web-app-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">
|
|
|
|
<!-- Fonts -->
|
|
<link rel="stylesheet" href="/css/fonts.css?v=0.1.0.1761276928922">
|
|
|
|
<link rel="stylesheet" href="/css/tailwind.css?v=0.1.0.1761276928922">
|
|
<link rel="stylesheet" href="/css/tractatus-theme.min.css?v=0.1.0.1761276928922">
|
|
<style>
|
|
.gradient-text { background: linear-gradient(120deg, #3b82f6 0%, #8b5cf6 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
|
|
.hover-lift { transition: transform 0.2s; }
|
|
.hover-lift:hover { transform: translateY(-4px); }
|
|
.skip-link { position: absolute; left: -9999px; }
|
|
.skip-link:focus { left: 0; z-index: 100; background: white; padding: 1rem; }
|
|
|
|
/* 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) -->
|
|
<div id="navbar-placeholder" class="min-h-16"></div>
|
|
<script src="/js/components/navbar.js?v=0.1.0.1761276928922"></script>
|
|
|
|
<!-- Hero Section -->
|
|
<header role="banner">
|
|
<section class="text-white bg-gradient-tractatus">
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-20">
|
|
<div class="text-center">
|
|
<!-- Animated Brand Logo -->
|
|
<div class="flex justify-center mb-8">
|
|
<img src="/images/tractatus-icon-animated.svg"
|
|
alt="Tractatus Framework - Six Governance Services"
|
|
width="256" height="256" class="w-48 h-48 md:w-64 md:h-64"
|
|
loading="eager">
|
|
</div>
|
|
|
|
<h1 class="text-5xl md:text-6xl font-bold mb-6 tracking-tight" class="text-shadow-md" data-i18n="hero.title">Tractatus AI Safety Framework</h1>
|
|
<p class="text-xl md:text-2xl mb-8 max-w-4xl mx-auto" class="text-shadow-sm" data-i18n="hero.subtitle">Structural constraints that require AI systems to preserve human agency<br>for values decisions—tested on Claude Code</p>
|
|
|
|
<div class="flex flex-col sm:flex-row gap-4 justify-center">
|
|
<a href="/architecture.html"
|
|
class="inline-block px-8 py-3 rounded-lg font-semibold transition-all duration-300 bg-white text-blue-700 hover:shadow-lg hover:-translate-y-1"
|
|
data-i18n="hero.cta_architecture">System Architecture</a>
|
|
<a href="/docs.html"
|
|
class="btn-base btn-primary inline-block"
|
|
data-i18n="hero.cta_docs">Read Documentation</a>
|
|
<a href="/faq.html"
|
|
class="btn-base btn-validator inline-block"
|
|
data-i18n="hero.cta_faq">FAQ</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</header>
|
|
|
|
<!-- Main Content -->
|
|
<main id="main-content" role="main">
|
|
|
|
<!-- Value Proposition -->
|
|
<section class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-16" aria-labelledby="core-insight">
|
|
<div class="bg-amber-50 border-l-4 border-amber-500 p-6 rounded-r-lg animate-on-scroll" data-animation="slide-up">
|
|
<h2 id="core-insight" class="text-2xl font-bold text-amber-900 mb-3" data-i18n="value_prop.heading">A Starting Point</h2>
|
|
<p class="text-amber-800 text-lg" data-i18n-html="value_prop.text">
|
|
Aligning advanced AI with human values is among the most consequential challenges we face. As capability growth accelerates under big tech momentum, we confront a categorical imperative: preserve human agency over values decisions, or risk ceding control entirely.<br><br>Instead of hoping AI systems <em>"behave correctly,"</em> we propose <strong>structural constraints</strong> where certain decision types <strong>require human judgment</strong>. These architectural boundaries can adapt to individual, organizational, and societal norms—creating a foundation for bounded AI operation that may scale more safely with capability growth.<br><br>If this approach can work at scale, Tractatus may represent a turning point—a path where AI enhances human capability without compromising human sovereignty. Explore the framework through the lens that resonates with your work.
|
|
</p>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Three Audience Paths -->
|
|
<section class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 pt-4 pb-16">
|
|
<div class="grid grid-cols-1 md:grid-cols-3 gap-8">
|
|
|
|
<!-- Researcher Path → CrossReferenceValidator (Purple) -->
|
|
<a href="/researcher.html" class="block bg-white rounded-xl shadow-lg border-l-4 overflow-visible hover:shadow-2xl transition-all duration-300 hover:-translate-y-1 relative group animate-on-scroll border-l-service-validator" data-animation="scale-in" data-stagger="100">
|
|
<!-- Tooltip -->
|
|
<div class="absolute bottom-full mb-4 left-1/2 transform -translate-x-1/2 bg-gray-900 text-white text-sm rounded-lg px-4 py-2 opacity-0 group-hover:opacity-100 transition-opacity duration-200 pointer-events-none z-10 w-64 text-center shadow-xl">
|
|
<span data-i18n="paths.researcher.tooltip">For AI safety researchers, academics, and scientists investigating LLM failure modes and governance architectures</span>
|
|
<div class="absolute top-full left-1/2 transform -translate-x-1/2 -translate-y-1/2 rotate-45 w-2 h-2 bg-gray-900"></div>
|
|
</div>
|
|
|
|
<div class="p-6">
|
|
<div class="flex items-center space-x-4 mb-4">
|
|
<div class="w-14 h-14 rounded-xl flex items-center justify-center text-2xl" class="bg-gradient-service-validator">
|
|
🔬
|
|
</div>
|
|
<div>
|
|
<h3 class="text-2xl font-bold text-gray-900 group-hover:text-purple-600 transition-colors" data-i18n="paths.researcher.title">Researcher</h3>
|
|
<p class="text-gray-600 text-sm" data-i18n="paths.researcher.subtitle">Academic & technical depth</p>
|
|
</div>
|
|
</div>
|
|
|
|
<p class="text-gray-700 mb-6" data-i18n="paths.researcher.description">
|
|
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">
|
|
<svg aria-hidden="true" class="w-5 h-5 mr-2 mt-0.5 flex-shrink-0" class="text-service-validator" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"/></svg>
|
|
<span class="text-gray-700" data-i18n="paths.researcher.features.0">Technical specifications & proofs</span>
|
|
</li>
|
|
<li class="flex items-start">
|
|
<svg aria-hidden="true" class="w-5 h-5 mr-2 mt-0.5 flex-shrink-0" class="text-service-validator" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"/></svg>
|
|
<span class="text-gray-700" data-i18n="paths.researcher.features.1">Academic research review</span>
|
|
</li>
|
|
<li class="flex items-start">
|
|
<svg aria-hidden="true" class="w-5 h-5 mr-2 mt-0.5 flex-shrink-0" class="text-service-validator" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"/></svg>
|
|
<span class="text-gray-700" data-i18n="paths.researcher.features.2">Failure mode analysis</span>
|
|
</li>
|
|
<li class="flex items-start">
|
|
<svg aria-hidden="true" class="w-5 h-5 mr-2 mt-0.5 flex-shrink-0" class="text-service-validator" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"/></svg>
|
|
<span class="text-gray-700" data-i18n="paths.researcher.features.3">Mathematical foundations</span>
|
|
</li>
|
|
</ul>
|
|
|
|
<div class="mt-6 pt-4 border-t border-gray-200">
|
|
<span class="font-semibold group-hover:underline" class="text-service-validator" data-i18n="paths.researcher.cta">Explore Research →</span>
|
|
</div>
|
|
</div>
|
|
</a>
|
|
|
|
<!-- Implementer Path → InstructionPersistenceClassifier (Indigo) -->
|
|
<a href="/implementer.html" class="block bg-white rounded-xl shadow-lg border-l-4 overflow-visible hover:shadow-2xl transition-all duration-300 hover:-translate-y-1 relative group animate-on-scroll border-l-service-instruction" data-animation="scale-in" data-stagger="200">
|
|
<!-- Tooltip -->
|
|
<div class="absolute bottom-full mb-4 left-1/2 transform -translate-x-1/2 bg-gray-900 text-white text-sm rounded-lg px-4 py-2 opacity-0 group-hover:opacity-100 transition-opacity duration-200 pointer-events-none z-10 w-64 text-center shadow-xl">
|
|
<span data-i18n="paths.implementer.tooltip">For software engineers, ML engineers, and technical teams building production AI systems</span>
|
|
<div class="absolute top-full left-1/2 transform -translate-x-1/2 -translate-y-1/2 rotate-45 w-2 h-2 bg-gray-900"></div>
|
|
</div>
|
|
|
|
<div class="p-6">
|
|
<div class="flex items-center space-x-4 mb-4">
|
|
<div class="w-14 h-14 rounded-xl flex items-center justify-center text-2xl" class="bg-gradient-service-instruction">
|
|
⚙️
|
|
</div>
|
|
<div>
|
|
<h3 class="text-2xl font-bold text-gray-900 group-hover:text-indigo-600 transition-colors" data-i18n="paths.implementer.title">Implementer</h3>
|
|
<p class="text-gray-600 text-sm" data-i18n="paths.implementer.subtitle">Code & integration guides</p>
|
|
</div>
|
|
</div>
|
|
|
|
<p class="text-gray-700 mb-6" data-i18n="paths.implementer.description">
|
|
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">
|
|
<svg aria-hidden="true" class="w-5 h-5 mr-2 mt-0.5 flex-shrink-0" class="text-service-instruction" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"/></svg>
|
|
<span class="text-gray-700" data-i18n="paths.implementer.features.0">Working code examples</span>
|
|
</li>
|
|
<li class="flex items-start">
|
|
<svg aria-hidden="true" class="w-5 h-5 mr-2 mt-0.5 flex-shrink-0" class="text-service-instruction" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"/></svg>
|
|
<span class="text-gray-700" data-i18n="paths.implementer.features.1">API integration patterns</span>
|
|
</li>
|
|
<li class="flex items-start">
|
|
<svg aria-hidden="true" class="w-5 h-5 mr-2 mt-0.5 flex-shrink-0" class="text-service-instruction" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"/></svg>
|
|
<span class="text-gray-700" data-i18n="paths.implementer.features.2">Service architecture diagrams</span>
|
|
</li>
|
|
<li class="flex items-start">
|
|
<svg aria-hidden="true" class="w-5 h-5 mr-2 mt-0.5 flex-shrink-0" class="text-service-instruction" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"/></svg>
|
|
<span class="text-gray-700" data-i18n="paths.implementer.features.3">Deployment best practices</span>
|
|
</li>
|
|
</ul>
|
|
|
|
<div class="mt-6 pt-4 border-t border-gray-200">
|
|
<span class="font-semibold group-hover:underline" class="text-service-instruction" data-i18n="paths.implementer.cta">View Implementation Guide →</span>
|
|
</div>
|
|
</div>
|
|
</a>
|
|
|
|
<!-- Leader Path → PluralisticDeliberationOrchestrator (Teal) -->
|
|
<a href="/leader.html" class="block bg-white rounded-xl shadow-lg border-l-4 overflow-visible hover:shadow-2xl transition-all duration-300 hover:-translate-y-1 relative group animate-on-scroll border-l-service-deliberation" data-animation="scale-in" data-stagger="300">
|
|
<!-- Tooltip -->
|
|
<div class="absolute bottom-full mb-4 left-1/2 transform -translate-x-1/2 bg-gray-900 text-white text-sm rounded-lg px-4 py-2 opacity-0 group-hover:opacity-100 transition-opacity duration-200 pointer-events-none z-10 w-64 text-center shadow-xl">
|
|
<span data-i18n="paths.leader.tooltip">For AI executives, research directors, startup founders, and strategic decision makers setting AI safety policy</span>
|
|
<div class="absolute top-full left-1/2 transform -translate-x-1/2 -translate-y-1/2 rotate-45 w-2 h-2 bg-gray-900"></div>
|
|
</div>
|
|
|
|
<div class="p-6">
|
|
<div class="flex items-center space-x-4 mb-4">
|
|
<div class="w-14 h-14 rounded-xl flex items-center justify-center text-2xl" class="bg-gradient-service-deliberation">
|
|
💼
|
|
</div>
|
|
<div>
|
|
<h3 class="text-2xl font-bold text-gray-900 group-hover:text-teal-600 transition-colors" data-i18n="paths.leader.title">Leader</h3>
|
|
<p class="text-gray-600 text-sm" data-i18n="paths.leader.subtitle">Strategic AI Safety</p>
|
|
</div>
|
|
</div>
|
|
|
|
<p class="text-gray-700 mb-6" data-i18n="paths.leader.description">
|
|
Navigate the business case, compliance requirements, and competitive advantages of structural AI safety.
|
|
</p>
|
|
|
|
<ul class="space-y-3 mb-6 text-sm">
|
|
<li class="flex items-start">
|
|
<svg aria-hidden="true" class="w-5 h-5 mr-2 mt-0.5 flex-shrink-0" class="text-service-deliberation" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"/></svg>
|
|
<span class="text-gray-700" data-i18n="paths.leader.features.0">Executive briefing & business case</span>
|
|
</li>
|
|
<li class="flex items-start">
|
|
<svg aria-hidden="true" class="w-5 h-5 mr-2 mt-0.5 flex-shrink-0" class="text-service-deliberation" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"/></svg>
|
|
<span class="text-gray-700" data-i18n="paths.leader.features.1">Risk management & compliance (EU AI Act)</span>
|
|
</li>
|
|
<li class="flex items-start">
|
|
<svg aria-hidden="true" class="w-5 h-5 mr-2 mt-0.5 flex-shrink-0" class="text-service-deliberation" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"/></svg>
|
|
<span class="text-gray-700" data-i18n="paths.leader.features.2">Implementation roadmap & ROI</span>
|
|
</li>
|
|
<li class="flex items-start">
|
|
<svg aria-hidden="true" class="w-5 h-5 mr-2 mt-0.5 flex-shrink-0" class="text-service-deliberation" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"/></svg>
|
|
<span class="text-gray-700" data-i18n="paths.leader.features.3">Competitive advantage analysis</span>
|
|
</li>
|
|
</ul>
|
|
|
|
<div class="mt-6 pt-4 border-t border-gray-200">
|
|
<span class="font-semibold group-hover:underline" class="text-service-deliberation" data-i18n="paths.leader.cta">View Leadership Resources →</span>
|
|
</div>
|
|
</div>
|
|
</a>
|
|
</div>
|
|
</section>
|
|
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Key Capabilities -->
|
|
<section 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-center text-gray-900 mb-12 animate-on-scroll" data-i18n="capabilities.heading" data-animation="fade-in">Framework Capabilities</h2>
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
|
|
|
|
<div class="card-base card-interactive card-service instruction animate-on-scroll" data-animation="slide-up" data-stagger="100">
|
|
<div class="w-14 h-14 rounded-xl flex items-center justify-center mb-4 bg-gradient-service-instruction">
|
|
<svg aria-hidden="true" class="w-7 h-7 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2"/>
|
|
</svg>
|
|
</div>
|
|
<h3 class="text-lg font-semibold text-gray-900 mb-2" data-i18n="capabilities.items.0.title">Instruction Classification</h3>
|
|
<p class="text-gray-600 text-sm" data-i18n="capabilities.items.0.description">
|
|
Quadrant-based classification (STR/OPS/TAC/SYS/STO) with time-persistence metadata tagging
|
|
</p>
|
|
</div>
|
|
|
|
<div class="card-base card-interactive card-service validator animate-on-scroll" data-animation="slide-up" data-stagger="200">
|
|
<div class="w-14 h-14 rounded-xl flex items-center justify-center mb-4 bg-gradient-service-validator">
|
|
<svg aria-hidden="true" class="w-7 h-7 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/>
|
|
</svg>
|
|
</div>
|
|
<h3 class="text-lg font-semibold text-gray-900 mb-2" data-i18n="capabilities.items.1.title">Cross-Reference Validation</h3>
|
|
<p class="text-gray-600 text-sm" data-i18n="capabilities.items.1.description">
|
|
Validates AI actions against explicit user instructions to prevent pattern-based overrides
|
|
</p>
|
|
</div>
|
|
|
|
<div class="card-base card-interactive card-service boundary animate-on-scroll" data-animation="slide-up" data-stagger="300">
|
|
<div class="w-14 h-14 rounded-xl flex items-center justify-center mb-4 bg-gradient-service-boundary">
|
|
<svg aria-hidden="true" class="w-7 h-7 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"/>
|
|
</svg>
|
|
</div>
|
|
<h3 class="text-lg font-semibold text-gray-900 mb-2" data-i18n="capabilities.items.2.title">Boundary Enforcement</h3>
|
|
<p class="text-gray-600 text-sm" data-i18n="capabilities.items.2.description">
|
|
Implements Tractatus 12.1-12.7 boundaries - values decisions architecturally require humans
|
|
</p>
|
|
</div>
|
|
|
|
<div class="card-base card-interactive card-service pressure animate-on-scroll" data-animation="slide-up" data-stagger="400">
|
|
<div class="w-14 h-14 rounded-xl flex items-center justify-center mb-4 bg-gradient-service-pressure">
|
|
<svg aria-hidden="true" class="w-7 h-7 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"/>
|
|
</svg>
|
|
</div>
|
|
<h3 class="text-lg font-semibold text-gray-900 mb-2" data-i18n="capabilities.items.3.title">Pressure Monitoring</h3>
|
|
<p class="text-gray-600 text-sm" data-i18n="capabilities.items.3.description">
|
|
Detects degraded operating conditions (token pressure, errors, complexity) and adjusts verification
|
|
</p>
|
|
</div>
|
|
|
|
<div class="card-base card-interactive card-service metacognitive animate-on-scroll" data-animation="slide-up" data-stagger="500">
|
|
<div class="w-14 h-14 rounded-xl flex items-center justify-center mb-4 bg-gradient-service-metacognitive">
|
|
<svg aria-hidden="true" class="w-7 h-7 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z"/>
|
|
</svg>
|
|
</div>
|
|
<h3 class="text-lg font-semibold text-gray-900 mb-2" data-i18n="capabilities.items.4.title">Metacognitive Verification</h3>
|
|
<p class="text-gray-600 text-sm" data-i18n="capabilities.items.4.description">
|
|
AI self-checks alignment, coherence, safety before execution - structural pause-and-verify
|
|
</p>
|
|
</div>
|
|
|
|
<div class="card-base card-interactive card-service deliberation animate-on-scroll" data-animation="slide-up" data-stagger="600">
|
|
<div class="w-14 h-14 rounded-xl flex items-center justify-center mb-4 bg-gradient-service-deliberation">
|
|
<svg aria-hidden="true" class="w-7 h-7 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z"/>
|
|
</svg>
|
|
</div>
|
|
<h3 class="text-lg font-semibold text-gray-900 mb-2" data-i18n="capabilities.items.5.title">Pluralistic Deliberation</h3>
|
|
<p class="text-gray-600 text-sm" data-i18n="capabilities.items.5.description">
|
|
Multi-stakeholder values deliberation without hierarchy - facilitates human decision-making for incommensurable values
|
|
</p>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- 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="validation" class="text-3xl font-bold text-gray-900 mb-4" data-i18n="validation.heading">Real-World Validation</h2>
|
|
</div>
|
|
|
|
<!-- Performance & Reliability Evidence -->
|
|
<div class="bg-gradient-to-r from-green-50 to-teal-50 rounded-xl border-2 border-green-200 p-8 mb-8">
|
|
<div class="flex items-start gap-4 mb-4">
|
|
<div class="flex-shrink-0">
|
|
<svg class="w-12 h-12 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 class="flex-1">
|
|
<h3 class="text-2xl font-bold text-gray-900 mb-3" data-i18n="validation.performance_evidence.heading">Preliminary Evidence: Safety and Performance May Be Aligned</h3>
|
|
<p class="text-gray-700 mb-4 leading-relaxed" data-i18n-html="validation.performance_evidence.paragraph_1">
|
|
Production deployment reveals an unexpected pattern: <strong>structural constraints appear to enhance AI reliability rather than constrain it</strong>. Users report completing in one governed session what previously required 3-5 attempts with ungoverned Claude Code—achieving significantly lower error rates and higher-quality outputs under architectural governance.
|
|
</p>
|
|
<p class="text-gray-700 mb-4 leading-relaxed" data-i18n-html="validation.performance_evidence.paragraph_2">
|
|
The mechanism appears to be <strong>prevention of degraded operating conditions</strong>: architectural boundaries stop context pressure failures, instruction drift, and pattern-based overrides before they compound into session-ending errors. By maintaining operational integrity throughout long interactions, the framework creates conditions for sustained high-quality output.
|
|
</p>
|
|
<p class="text-gray-700 leading-relaxed" data-i18n-html="validation.performance_evidence.paragraph_3">
|
|
<strong>If this pattern holds at scale</strong>, it challenges a core assumption blocking AI safety adoption—that governance measures trade performance for safety. Instead, these findings suggest structural constraints may be a path to <em>both</em> safer <em>and</em> more capable AI systems. Statistical validation is ongoing.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="bg-white bg-opacity-60 rounded-lg p-4 border border-green-300">
|
|
<p class="text-sm text-gray-800" data-i18n-html="validation.performance_evidence.methodology_note">
|
|
<strong>Methodology note:</strong> Findings based on qualitative user reports from production deployment. Controlled experiments and quantitative metrics collection scheduled for validation phase.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 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" data-i18n="validation.case_27027.badge">
|
|
Pattern Bias Incident
|
|
</span>
|
|
<span class="text-blue-100 text-sm" data-i18n="validation.case_27027.type">Interactive Demo</span>
|
|
</div>
|
|
</div>
|
|
<div class="p-8">
|
|
<h3 class="text-2xl font-bold text-gray-900 mb-3" data-i18n="validation.case_27027.title">The 27027 Incident</h3>
|
|
<p class="text-gray-700 mb-6" data-i18n="validation.case_27027.description">
|
|
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" data-i18n-html="validation.case_27027.why_matters">
|
|
<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>
|
|
<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" data-i18n="validation.case_27027.cta">View Interactive Demo
|
|
</a>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Additional Resources Link -->
|
|
<div class="text-center">
|
|
<p class="text-gray-600 mb-4" data-i18n="validation.resources.text">
|
|
Additional case studies and research findings documented in technical papers
|
|
</p>
|
|
<a href="/docs.html?category=case-studies" class="inline-block text-blue-600 hover:text-blue-700 font-medium" data-i18n="validation.resources.cta">Browse Case Studies →
|
|
</a>
|
|
</div>
|
|
|
|
</div>
|
|
</section>
|
|
|
|
</main>
|
|
|
|
<!-- Footer -->
|
|
<!-- Version Management & PWA -->
|
|
<script src="/js/version-manager.js?v=0.1.0.1761276928922"></script>
|
|
|
|
|
|
<!-- Internationalization -->
|
|
<script src="/js/i18n-simple.js?v=0.1.0.1761276928922"></script>
|
|
<script src="/js/components/language-selector.js?v=0.1.0.1761276928922"></script>
|
|
|
|
<!-- Scroll Animations (Phase 3) -->
|
|
<script src="/js/scroll-animations.js?v=0.1.0.1761276928922"></script>
|
|
|
|
<!-- Page Transitions (Phase 3) -->
|
|
<script src="/js/page-transitions.js?v=0.1.0.1761276928922"></script>
|
|
|
|
<!-- Footer Component -->
|
|
<script src="/js/components/footer.js?v=0.1.0.1761276928922"></script>
|
|
|
|
</body>
|
|
</html>
|