john/tractatus
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions
tractatus/public/index.html
TheFlow d32be2c673 feat(api): implement research inquiry endpoint and Umami analytics 
HIGH PRIORITY: Fixes production 404 error on research inquiry form

Research Inquiry API:
- Add POST /api/research-inquiry endpoint for form submissions
- Add admin endpoints for inquiry management (list, get, assign, respond, delete)
- Create ResearchInquiry model with MongoDB integration
- Add to moderation queue for human review (strategic quadrant)
- Include rate limiting (5 req/min) and CSRF protection
- Tested locally: endpoint responding, data saving to DB

Umami Analytics (Privacy-First):
- Add Docker Compose config for Umami + PostgreSQL
- Create nginx reverse proxy config with SSL support
- Implement privacy-first tracking script (DNT, opt-out, no cookies)
- Integrate tracking across 26 public HTML pages
- Exclude admin pages from tracking (privacy boundary)
- Add comprehensive deployment guide (UMAMI_SETUP_GUIDE.md)
- Environment variables added to .env.example

Files Created (9):
- src/models/ResearchInquiry.model.js
- src/controllers/research.controller.js
- src/routes/research.routes.js
- public/js/components/umami-tracker.js
- deployment-quickstart/nginx-analytics.conf
- deployment-quickstart/UMAMI_SETUP_GUIDE.md
- scripts/add-umami-tracking.sh
- scripts/add-tracking-python.py
- SESSION_SUMMARY_ANALYTICS_RESEARCH_INQUIRY.md

Files Modified (29):
- src/routes/index.js (research routes)
- deployment-quickstart/docker-compose.yml (umami services)
- deployment-quickstart/.env.example (umami config)
- 26 public HTML pages (tracking script)

Values Alignment:
✅ Privacy-First Design (cookie-free, DNT honored, opt-out available)
✅ Human Agency (research inquiries require human review)
✅ Data Sovereignty (self-hosted analytics, no third-party sharing)
✅ GDPR Compliance (no personal data in analytics)
✅ Transparency (open-source tools, documented setup)

Testing Status:
✅ Research inquiry: Locally tested, data verified in MongoDB
⏳ Umami analytics: Pending production deployment

Next Steps:
1. Deploy to production (./scripts/deploy.sh)
2. Test research form on live site
3. Deploy Umami following UMAMI_SETUP_GUIDE.md
4. Update umami-tracker.js with website ID after setup

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

Co-Authored-By: Claude <noreply@anthropic.com>
2025-10-29 01:31:02 +13:00

434 lines
30 KiB
HTML
Raw Blame History

<!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.2.1761652166754">
<link rel="stylesheet" href="/css/tailwind.css?v=0.1.2.1761652166754">
<link rel="stylesheet" href="/css/tractatus-theme.min.css?v=0.1.2.1761652166754">
<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>
<!-- Privacy-Preserving Analytics (Umami - GDPR Compliant, No Cookies) -->
<script src="/js/components/umami-tracker.js"></script>
</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.2.1761652166754"></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: Architecture for Plural Moral Values</h1>
<p class="text-xl md:text-2xl mb-8 max-w-4xl mx-auto" class="text-shadow-sm" data-i18n="hero.subtitle">One architectural approach to governing AI at the coalface where decisions are made.<br>Not amoral AI systems, but plural moral values—enabling organizations to navigate<br>value conflicts thoughtfully. 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">The Choice: Amoral AI or Plural Moral Values</h2>
<p class="text-amber-800 text-lg" data-i18n-html="value_prop.text">
Organizations deploy AI at scale—Copilot writing code, agents handling decisions, systems operating autonomously. But current AI is amoral, making decisions without moral grounding. When efficiency conflicts with safety, these value conflicts are ignored or flattened to optimization metrics.<br><br>Tractatus provides one architectural approach for plural moral values. Not training approaches that hope AI will "behave correctly," but <strong>structural constraints at the coalface where AI operates</strong>. Organizations can navigate value conflicts based on their context—efficiency vs. safety, speed vs. thoroughness—without imposed frameworks from above.<br><br>If this architectural approach works at scale, it may represent a path where AI enhances organizational capability without flattening moral judgment to metrics. One possible approach among others—we're finding out if it scales.
</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 & operational metrics</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-4 animate-on-scroll" data-i18n="capabilities.heading" data-animation="fade-in">Framework Capabilities</h2>
<p class="text-center text-gray-600 text-lg max-w-3xl mx-auto mb-12 animate-on-scroll" data-i18n="capabilities.intro" data-animation="fade-in">
Six architectural services that enable plural moral values by preserving human judgment at the coalface where AI operates.
</p>
<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. Creates compliance audit trail for demonstrating governance in regulatory contexts.
</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, enabling plural moral values rather than imposed frameworks. Prevents AI from exposing credentials or PII, providing GDPR compliance evidence through audit trails.
</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">
Handles plural moral values without imposing hierarchy—facilitates human judgment when efficiency conflicts with safety, data utility conflicts with privacy, or other incommensurable values arise
</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">
Early production evidence suggests an unexpected pattern may be emerging: <strong>structural constraints appear to prevent degraded operating conditions rather than constrain capability</strong>. Users report completing in one governed session what previously required 3-5 attempts with ungoverned Claude Code—achieving lower error rates and higher-quality outputs. If validated through controlled experiments, this would challenge assumptions about governance costs.
</p>
<p class="text-gray-700 mb-4 leading-relaxed" data-i18n-html="validation.performance_evidence.paragraph_2">
The hypothesized mechanism: <strong>prevention of degraded operating conditions</strong> before they compound. Architectural boundaries stop context pressure failures, instruction drift, and pattern-based overrides—maintaining operational integrity throughout long interactions. Whether this pattern holds at scale requires validation.
</p>
<p class="text-gray-700 leading-relaxed" data-i18n-html="validation.performance_evidence.paragraph_3">
<strong>If validated at scale</strong>, this pattern could challenge a core assumption—that governance trades performance for safety. Early evidence suggests structural constraints might enable <em>both</em> safer <em>and</em> more capable AI systems, but controlled experiments are needed to test whether qualitative reports hold under measurement. 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.2.1761652166754"></script>
<!-- Internationalization -->
<script src="/js/i18n-simple.js?v=0.1.2.1761652166754"></script>
<script src="/js/components/language-selector.js?v=0.1.2.1761652166754"></script>
<!-- Scroll Animations (Phase 3) -->
<script src="/js/scroll-animations.js?v=0.1.2.1761652166754"></script>
<!-- Page Transitions (Phase 3) -->
<script src="/js/page-transitions.js?v=0.1.2.1761652166754"></script>
<!-- Footer Component -->
<script src="/js/components/footer.js?v=0.1.2.1761652166754"></script>
</body>
</html>
Reference in a new issue View git blame Copy permalink