ccb4bdaabf
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>
681 lines
38 KiB
HTML
681 lines
38 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>System Architecture | Tractatus AI Safety Framework</title>
|
|
<meta name="description" content="Tractatus runtime-agnostic governance architecture: exploring structural boundaries for AI safety that may be more resistant to adversarial manipulation than behavioral training alone.">
|
|
<link rel="icon" type="image/svg+xml" href="/favicon-new.svg">
|
|
<link rel="stylesheet" href="/css/fonts.css?v=0.1.0.1761283486841">
|
|
<link rel="stylesheet" href="/css/tailwind.css?v=0.1.0.1761283486841">
|
|
<link rel="stylesheet" href="/css/tractatus-theme.min.css?v=0.1.0.1761283486841">
|
|
<style>
|
|
.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; }
|
|
|
|
.gradient-text { background: linear-gradient(120deg, #3b82f6 0%, #8b5cf6 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
|
|
</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) -->
|
|
<script src="/js/components/navbar.js?v=0.1.0.1761283486841" defer></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" class="text-tractatus-link" data-i18n="breadcrumb.home"></a></li>
|
|
<li class="text-gray-400">/</li>
|
|
<li class="text-gray-900 font-medium" aria-current="page" data-i18n="breadcrumb.current"></li>
|
|
</ol>
|
|
</div>
|
|
</nav>
|
|
|
|
<!-- Hero Section -->
|
|
<header role="banner">
|
|
<section class="bg-gradient-to-br from-blue-600 via-blue-700 to-purple-700 text-white py-20">
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
|
<div class="text-center">
|
|
<div class="inline-block bg-amber-700 text-white px-4 py-2 rounded-lg font-semibold mb-6 text-sm" data-i18n="hero.badge">
|
|
🔬 EARLY-STAGE RESEARCH • PROMISING APPROACH
|
|
</div>
|
|
<h1 class="text-5xl md:text-6xl font-bold mb-6" data-i18n="hero.title">
|
|
Exploring Structural AI Safety
|
|
</h1>
|
|
<p class="text-xl md:text-2xl text-blue-100 mb-8 max-w-4xl mx-auto" data-i18n-html="hero.subtitle">
|
|
Tractatus explores <strong>external governance</strong>—architectural boundaries operating outside the AI runtime that may be more resistant to adversarial manipulation than behavioral training alone.
|
|
</p>
|
|
<div class="bg-blue-800/50 backdrop-blur border border-blue-400/30 rounded-lg p-6 max-w-3xl mx-auto mb-8">
|
|
<p class="text-lg text-blue-50">
|
|
<strong class="text-white" data-i18n="hero.challenge_label">The Challenge:</strong> <span data-i18n="hero.challenge_text"></span>
|
|
</p>
|
|
<p class="text-lg text-blue-50 mt-3">
|
|
<strong class="text-white" data-i18n="hero.approach_label">Our Approach:</strong> <span data-i18n="hero.approach_text">External architectural enforcement that operates independently of the AI's internal reasoning—making it structurally more difficult (though not impossible) to bypass through prompting.
|
|
</p>
|
|
</div>
|
|
<div class="flex flex-col sm:flex-row gap-4 justify-center">
|
|
<a href="#architecture-diagram" class="inline-block bg-white text-blue-700 px-8 py-3 rounded-lg font-semibold hover:bg-blue-50 transition" data-i18n="hero.cta_architecture">
|
|
View Architecture
|
|
</a>
|
|
<a href="/docs.html" class="inline-block bg-blue-800 text-white px-8 py-3 rounded-lg font-semibold hover:bg-blue-900 transition border-2 border-white" data-i18n="hero.cta_docs">
|
|
Read Documentation
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</header>
|
|
|
|
<!-- Main Content -->
|
|
<main id="main-content" role="main">
|
|
|
|
<!-- Why External Enforcement Matters -->
|
|
<section class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-16">
|
|
<h2 class="text-4xl font-bold text-gray-900 mb-8 text-center" data-i18n="comparison.heading"></h2>
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-8 mb-12">
|
|
|
|
<div class="bg-red-50 border-l-4 border-red-500 p-6 rounded-r-lg">
|
|
<h3 class="text-2xl font-bold text-red-900 mb-3 flex items-center" data-i18n="comparison.behavioral_title">
|
|
<svg class="w-6 h-6 mr-2" fill="currentColor" viewBox="0 0 20 20">
|
|
<path fill-rule="evenodd" d="M13.477 14.89A6 6 0 015.11 6.524l8.367 8.368zm1.414-1.414L6.524 5.11a6 6 0 018.367 8.367zM18 10a8 8 0 11-16 0 8 8 0 0116 0z" clip-rule="evenodd"/>
|
|
</svg>
|
|
Behavioral Training (Constitutional AI)
|
|
</h3>
|
|
<ul class="space-y-2 text-red-800">
|
|
<li class="flex items-start">
|
|
<span class="mr-2">❌</span>
|
|
<span data-i18n-html="comparison.behavioral_item1"></span>
|
|
</li>
|
|
<li class="flex items-start">
|
|
<span class="mr-2">❌</span>
|
|
<span data-i18n-html="comparison.behavioral_item2"></span>
|
|
</li>
|
|
<li class="flex items-start">
|
|
<span class="mr-2">❌</span>
|
|
<span data-i18n-html="comparison.behavioral_item3"></span>
|
|
</li>
|
|
<li class="flex items-start">
|
|
<span class="mr-2">❌</span>
|
|
<span data-i18n-html="comparison.behavioral_item4"></span>
|
|
</li>
|
|
<li class="flex items-start">
|
|
<span class="mr-2">❌</span>
|
|
<span data-i18n-html="comparison.behavioral_item5"></span>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div class="bg-green-50 border-l-4 border-green-500 p-6 rounded-r-lg">
|
|
<h3 class="text-2xl font-bold text-green-900 mb-3 flex items-center">
|
|
<svg class="w-6 h-6 mr-2" fill="currentColor" viewBox="0 0 20 20">
|
|
<path fill-rule="evenodd" d="M2.166 4.999A11.954 11.954 0 0010 1.944 11.954 11.954 0 0017.834 5c.11.65.166 1.32.166 2.001 0 5.225-3.34 9.67-8 11.317C5.34 16.67 2 12.225 2 7c0-.682.057-1.35.166-2.001zm11.541 3.708a1 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" clip-rule="evenodd"/>
|
|
</svg>
|
|
Structural Enforcement (Tractatus)
|
|
</h3>
|
|
<ul class="space-y-2 text-green-800">
|
|
<li class="flex items-start">
|
|
<span class="mr-2">✅</span>
|
|
<span data-i18n-html="comparison.structural_item1"></span>
|
|
</li>
|
|
<li class="flex items-start">
|
|
<span class="mr-2">✅</span>
|
|
<span data-i18n-html="comparison.structural_item2"></span>
|
|
</li>
|
|
<li class="flex items-start">
|
|
<span class="mr-2">✅</span>
|
|
<span data-i18n-html="comparison.structural_item3"></span>
|
|
</li>
|
|
<li class="flex items-start">
|
|
<span class="mr-2">✅</span>
|
|
<span data-i18n-html="comparison.structural_item4"></span>
|
|
</li>
|
|
<li class="flex items-start">
|
|
<span class="mr-2">✅</span>
|
|
<span data-i18n-html="comparison.structural_item5"></span>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="bg-gradient-to-r from-blue-50 to-purple-50 rounded-xl p-8 border border-blue-200">
|
|
<h3 class="text-2xl font-bold text-gray-900 mb-4 text-center" data-i18n="comparison.hypothesis_title"></h3>
|
|
<p class="text-lg text-gray-700 text-center max-w-4xl mx-auto" data-i18n-html="comparison.hypothesis_text">
|
|
<strong>Jailbreaks often work by manipulating the AI's internal reasoning.</strong> Tractatus boundaries operate <em>external</em> to that reasoning—the AI doesn't directly evaluate governance rules. While not foolproof, this architectural separation makes manipulation significantly harder.
|
|
</p>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Architecture Diagram -->
|
|
<section id="architecture-diagram" class="bg-white py-16">
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
|
<div class="text-center mb-8">
|
|
<h2 class="text-4xl font-bold text-gray-900 mb-4" data-i18n="architecture_diagram.title"></h2>
|
|
<p class="text-xl text-gray-600 max-w-3xl mx-auto" data-i18n-html="architecture_diagram.subtitle">
|
|
Tractatus works with <strong>any agentic AI system</strong>—Claude Code, LangChain, AutoGPT, CrewAI, or custom agents. The governance layer sits between your agent and its actions.
|
|
</p>
|
|
</div>
|
|
|
|
<div class="bg-gray-50 rounded-xl p-8 border border-gray-300">
|
|
<img
|
|
src="/images/architecture-diagram-generic.svg"
|
|
alt="Tractatus Runtime-Agnostic Architecture Diagram showing Agent Runtime Layer, Tractatus Governance Layer with six services, Persistent Storage Layer, and Human Approval Workflows"
|
|
class="w-full"
|
|
loading="lazy"
|
|
/>
|
|
</div>
|
|
|
|
<div class="mt-8 grid grid-cols-1 md:grid-cols-3 gap-6">
|
|
<div class="bg-blue-50 rounded-lg p-6 border border-blue-200">
|
|
<h3 class="text-lg font-bold text-blue-900 mb-2" data-i18n="architecture_diagram.layer1_title"></h3>
|
|
<p class="text-blue-800 text-sm" data-i18n="architecture_diagram.layer1_desc">
|
|
Your AI agent (any platform). Handles planning, reasoning, tool use. Tractatus is agnostic to implementation.
|
|
</p>
|
|
</div>
|
|
<div class="bg-green-50 rounded-lg p-6 border border-green-200">
|
|
<h3 class="text-lg font-bold text-green-900 mb-2" data-i18n="architecture_diagram.layer2_title"></h3>
|
|
<p class="text-green-800 text-sm" data-i18n="architecture_diagram.layer2_desc">
|
|
Six external services enforce boundaries, validate actions, monitor pressure. <strong>Architecturally more difficult for AI to bypass.</strong>
|
|
</p>
|
|
</div>
|
|
<div class="bg-yellow-50 rounded-lg p-6 border border-yellow-200">
|
|
<h3 class="text-lg font-bold text-yellow-900 mb-2" data-i18n="architecture_diagram.layer3_title"></h3>
|
|
<p class="text-yellow-800 text-sm" data-i18n="architecture_diagram.layer3_desc">
|
|
Immutable audit logs, governance rules, instruction history. Independent of AI runtime—can't be altered by prompts.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Six Core Services -->
|
|
<section class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-16">
|
|
<h2 class="text-4xl font-bold text-gray-900 mb-12 text-center" data-i18n="services.heading"></h2>
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
|
|
|
|
<div class="bg-white rounded-lg shadow-lg p-6 border-l-4 hover:shadow-xl transition-shadow duration-300 min-w-0 max-w-full overflow-hidden" class="border-l-service-boundary">
|
|
<div class="flex items-center mb-3">
|
|
<div class="w-12 h-12 rounded-xl flex items-center justify-center mr-3" class="bg-gradient-service-boundary">
|
|
<svg class="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"/>
|
|
</svg>
|
|
</div>
|
|
<h3 class="text-lg font-bold text-gray-900 break-words overflow-wrap-anywhere" data-i18n="services.boundary.name"></h3>
|
|
</div>
|
|
<p class="text-gray-600 text-sm mb-3 break-words overflow-wrap-anywhere" data-i18n="services.boundary.description">
|
|
Blocks AI from making values decisions (privacy, ethics, strategic direction). Requires human approval.
|
|
</p>
|
|
<div class="text-xs rounded px-3 py-2" class="badge-boundary" data-i18n-html="services.boundary.promise">
|
|
<strong>Early Promise:</strong> Values boundaries enforced externally—harder to manipulate through prompting.
|
|
</div>
|
|
</div>
|
|
|
|
<div class="bg-white rounded-lg shadow-lg p-6 border-l-4 hover:shadow-xl transition-shadow duration-300 min-w-0 max-w-full overflow-hidden" class="border-l-service-instruction">
|
|
<div class="flex items-center mb-3">
|
|
<div class="w-12 h-12 rounded-xl flex items-center justify-center mr-3" class="bg-gradient-service-instruction">
|
|
<svg class="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/>
|
|
</svg>
|
|
</div>
|
|
<h3 class="text-lg font-bold text-gray-900 break-words overflow-wrap-anywhere" data-i18n="services.instruction.name"></h3>
|
|
</div>
|
|
<p class="text-gray-600 text-sm mb-3 break-words overflow-wrap-anywhere" data-i18n="services.instruction.description">
|
|
Stores instructions externally with persistence levels (HIGH/MEDIUM/LOW). Aims to reduce directive fade.
|
|
</p>
|
|
<div class="text-xs rounded px-3 py-2" class="badge-instruction" data-i18n-html="services.instruction.promise">
|
|
<strong>Early Promise:</strong> Instructions stored outside AI—more resistant to context manipulation.
|
|
</div>
|
|
</div>
|
|
|
|
<div class="bg-white rounded-lg shadow-lg p-6 border-l-4 hover:shadow-xl transition-shadow duration-300 min-w-0 max-w-full overflow-hidden" class="border-l-service-validator">
|
|
<div class="flex items-center mb-3">
|
|
<div class="w-12 h-12 rounded-xl flex items-center justify-center mr-3" class="bg-gradient-service-validator">
|
|
<svg class="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/>
|
|
</svg>
|
|
</div>
|
|
<h3 class="text-lg font-bold text-gray-900 break-words overflow-wrap-anywhere" data-i18n="services.validator.name"></h3>
|
|
</div>
|
|
<p class="text-gray-600 text-sm mb-3 break-words overflow-wrap-anywhere">
|
|
<span data-i18n="services.validator.description"></span>
|
|
</p>
|
|
<div class="text-xs rounded px-3 py-2" class="badge-validator" data-i18n-html="services.validator.promise">
|
|
<strong>Early Promise:</strong> Independent verification—AI claims checked against external source.
|
|
</div>
|
|
</div>
|
|
|
|
<div class="bg-white rounded-lg shadow-lg p-6 border-l-4 hover:shadow-xl transition-shadow duration-300 min-w-0 max-w-full overflow-hidden" class="border-l-service-pressure">
|
|
<div class="flex items-center mb-3">
|
|
<div class="w-12 h-12 rounded-xl flex items-center justify-center mr-3" class="bg-gradient-service-pressure">
|
|
<svg class="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"/>
|
|
</svg>
|
|
</div>
|
|
<h3 class="text-lg font-bold text-gray-900 break-words overflow-wrap-anywhere" data-i18n="services.pressure.name"></h3>
|
|
</div>
|
|
<p class="text-gray-600 text-sm mb-3 break-words overflow-wrap-anywhere">
|
|
<span data-i18n="services.pressure.description"></span>
|
|
</p>
|
|
<div class="text-xs rounded px-3 py-2" class="badge-pressure" data-i18n-html="services.pressure.promise">
|
|
<strong>Early Promise:</strong> Objective metrics may detect manipulation attempts early.
|
|
</div>
|
|
</div>
|
|
|
|
<div class="bg-white rounded-lg shadow-lg p-6 border-l-4 hover:shadow-xl transition-shadow duration-300 min-w-0 max-w-full overflow-hidden" class="border-l-service-metacognitive">
|
|
<div class="flex items-center mb-3">
|
|
<div class="w-12 h-12 rounded-xl flex items-center justify-center mr-3" class="bg-gradient-service-metacognitive">
|
|
<svg class="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z"/>
|
|
</svg>
|
|
</div>
|
|
<h3 class="text-lg font-bold text-gray-900 break-words overflow-wrap-anywhere" data-i18n="services.metacognitive.name"></h3>
|
|
</div>
|
|
<p class="text-gray-600 text-sm mb-3 break-words overflow-wrap-anywhere">
|
|
<span data-i18n="services.metacognitive.description"></span>
|
|
</p>
|
|
<div class="text-xs rounded px-3 py-2" class="badge-metacognitive" data-i18n-html="services.metacognitive.promise">
|
|
<strong>Early Promise:</strong> Architectural gates aim to enforce verification steps.
|
|
</div>
|
|
</div>
|
|
|
|
<div class="bg-white rounded-lg shadow-lg p-6 border-l-4 hover:shadow-xl transition-shadow duration-300 min-w-0 max-w-full overflow-hidden" class="border-l-service-deliberation">
|
|
<div class="flex items-center mb-3">
|
|
<div class="w-12 h-12 rounded-xl flex items-center justify-center mr-3" class="bg-gradient-service-deliberation">
|
|
<svg class="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z"/>
|
|
</svg>
|
|
</div>
|
|
<h3 class="text-lg font-bold text-gray-900 break-words overflow-wrap-anywhere" data-i18n="services.deliberation.name"></h3>
|
|
</div>
|
|
<p class="text-gray-600 text-sm mb-3 break-words overflow-wrap-anywhere">
|
|
<span data-i18n="services.deliberation.description"></span>
|
|
</p>
|
|
<div class="text-xs rounded px-3 py-2" class="badge-deliberation" data-i18n-html="services.deliberation.promise">
|
|
<strong>Early Promise:</strong> Human judgment required—architecturally enforced escalation for values.
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Interactive Architecture Diagram -->
|
|
<section class="bg-gradient-to-br from-gray-50 to-blue-50 py-16">
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
|
<div class="text-center mb-8">
|
|
<h2 class="text-4xl font-bold text-gray-900 mb-4" data-i18n="interactive.title"></h2>
|
|
<p class="text-xl text-gray-600 max-w-3xl mx-auto mb-4"data-i18n="interactive.subtitle">
|
|
Click any service node or the central core to see detailed information about how governance works.
|
|
</p>
|
|
<div class="text-sm text-gray-600">
|
|
<p class="flex items-center justify-center space-x-2">
|
|
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 15l-2 5L9 9l11 4-5 2zm0 0l5 5M7.188 2.239l.777 2.897M5.136 7.965l-2.898-.777M13.95 4.05l-2.122 2.122m-5.657 5.656l-2.12 2.122"/>
|
|
</svg>
|
|
<span><strong data-i18n="interactive.tip_label"></strong> <span data-i18n-html="interactive.tip_text"></span>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="diagram-container" class="relative bg-white rounded-xl shadow-lg p-4 sm:p-6 lg:p-8 border border-gray-200 w-full max-w-full overflow-x-auto">
|
|
<!-- Flex container for side-by-side layout -->
|
|
<div class="flex flex-col lg:flex-row lg:items-start gap-6">
|
|
<!-- Interactive SVG (reduced to 25% surface area = 50% linear) -->
|
|
<div class="flex-shrink-0 flex justify-center lg:justify-start">
|
|
<svg width="600" height="600" viewBox="0 0 600 600" xmlns="http://www.w3.org/2000/svg" id="interactive-arch-diagram">
|
|
<defs>
|
|
<!-- Central core gradient (shared with Passport - cyan to blue) -->
|
|
<radialGradient id="tractatusCoreInteractive">
|
|
<stop offset="0%" stop-color="#64ffda" stop-opacity="1" />
|
|
<stop offset="70%" stop-color="#448aff" stop-opacity="1" />
|
|
<stop offset="100%" stop-color="#0ea5e9" stop-opacity="1" />
|
|
</radialGradient>
|
|
|
|
<!-- Service-specific gradients (6 governance services) -->
|
|
<linearGradient id="serviceBoundaryInt" x1="0%" y1="0%" x2="100%" y2="100%">
|
|
<stop offset="0%" stop-color="#10b981" stop-opacity="1" />
|
|
<stop offset="100%" stop-color="#059669" stop-opacity="1" />
|
|
</linearGradient>
|
|
|
|
<linearGradient id="serviceInstructionInt" x1="0%" y1="0%" x2="100%" y2="100%">
|
|
<stop offset="0%" stop-color="#6366f1" stop-opacity="1" />
|
|
<stop offset="100%" stop-color="#4f46e5" stop-opacity="1" />
|
|
</linearGradient>
|
|
|
|
<linearGradient id="serviceValidatorInt" x1="0%" y1="0%" x2="100%" y2="100%">
|
|
<stop offset="0%" stop-color="#8b5cf6" stop-opacity="1" />
|
|
<stop offset="100%" stop-color="#7c3aed" stop-opacity="1" />
|
|
</linearGradient>
|
|
|
|
<linearGradient id="servicePressureInt" x1="0%" y1="0%" x2="100%" y2="100%">
|
|
<stop offset="0%" stop-color="#f59e0b" stop-opacity="1" />
|
|
<stop offset="100%" stop-color="#d97706" stop-opacity="1" />
|
|
</linearGradient>
|
|
|
|
<linearGradient id="serviceMetacognitiveInt" x1="0%" y1="0%" x2="100%" y2="100%">
|
|
<stop offset="0%" stop-color="#ec4899" stop-opacity="1" />
|
|
<stop offset="100%" stop-color="#db2777" stop-opacity="1" />
|
|
</linearGradient>
|
|
|
|
<linearGradient id="serviceDeliberationInt" x1="0%" y1="0%" x2="100%" y2="100%">
|
|
<stop offset="0%" stop-color="#14b8a6" stop-opacity="1" />
|
|
<stop offset="100%" stop-color="#0d9488" stop-opacity="1" />
|
|
</linearGradient>
|
|
|
|
<filter id="dropShadowInt">
|
|
<feDropShadow dx="0" dy="4" stdDeviation="6" flood-opacity="0.3"/>
|
|
</filter>
|
|
|
|
<filter id="glow">
|
|
<feGaussianBlur stdDeviation="4" result="coloredBlur"/>
|
|
<feMerge>
|
|
<feMergeNode in="coloredBlur"/>
|
|
<feMergeNode in="SourceGraphic"/>
|
|
</feMerge>
|
|
</filter>
|
|
</defs>
|
|
|
|
<!-- Background -->
|
|
<rect width="600" height="600" fill="#f9fafb"/>
|
|
|
|
<!-- Orbital rings (subtle, static in interactive version) -->
|
|
<circle cx="300" cy="300" r="255" stroke="#64ffda" stroke-width="1" opacity="0.15" fill="none"/>
|
|
<circle cx="300" cy="300" r="210" stroke="#64ffda" stroke-width="1" opacity="0.25" fill="none"/>
|
|
<circle cx="300" cy="300" r="165" stroke="#64ffda" stroke-width="1" opacity="0.35" fill="none"/>
|
|
|
|
<!-- Connection lines (will be made interactive) -->
|
|
<g id="connection-lines">
|
|
<line id="conn-boundary" x1="300" y1="300" x2="300" y2="105" stroke="#10b981" stroke-width="3" opacity="0.3" class="connection-line"/>
|
|
<line id="conn-instruction" x1="300" y1="300" x2="468" y2="202.5" stroke="#6366f1" stroke-width="3" opacity="0.3" class="connection-line"/>
|
|
<line id="conn-validator" x1="300" y1="300" x2="468" y2="397.5" stroke="#8b5cf6" stroke-width="3" opacity="0.3" class="connection-line"/>
|
|
<line id="conn-pressure" x1="300" y1="300" x2="300" y2="495" stroke="#f59e0b" stroke-width="3" opacity="0.3" class="connection-line"/>
|
|
<line id="conn-metacognitive" x1="300" y1="300" x2="132" y2="397.5" stroke="#ec4899" stroke-width="3" opacity="0.3" class="connection-line"/>
|
|
<line id="conn-deliberation" x1="300" y1="300" x2="132" y2="202.5" stroke="#14b8a6" stroke-width="3" opacity="0.3" class="connection-line"/>
|
|
</g>
|
|
|
|
<!-- Service nodes (clickable) -->
|
|
<g id="service-nodes">
|
|
<!-- 1. BoundaryEnforcer (top) - Green -->
|
|
<g id="node-boundary" class="service-node" data-service="boundary" style="cursor: pointer;">
|
|
<circle cx="300" cy="105" r="45" fill="url(#serviceBoundaryInt)" filter="url(#dropShadowInt)" opacity="0.95"/>
|
|
<text x="300" y="115" text-anchor="middle" font-family="Arial, sans-serif" font-size="32" font-weight="bold" fill="white">B</text>
|
|
<title>BoundaryEnforcer - Click for details</title>
|
|
</g>
|
|
|
|
<!-- 2. InstructionPersistenceClassifier (top-right) - Indigo -->
|
|
<g id="node-instruction" class="service-node" data-service="instruction" style="cursor: pointer;">
|
|
<circle cx="468" cy="202.5" r="45" fill="url(#serviceInstructionInt)" filter="url(#dropShadowInt)" opacity="0.95"/>
|
|
<text x="468" y="212.5" text-anchor="middle" font-family="Arial, sans-serif" font-size="32" font-weight="bold" fill="white">I</text>
|
|
<title>InstructionPersistenceClassifier - Click for details</title>
|
|
</g>
|
|
|
|
<!-- 3. CrossReferenceValidator (bottom-right) - Purple -->
|
|
<g id="node-validator" class="service-node" data-service="validator" style="cursor: pointer;">
|
|
<circle cx="468" cy="397.5" r="45" fill="url(#serviceValidatorInt)" filter="url(#dropShadowInt)" opacity="0.95"/>
|
|
<text x="468" y="407.5" text-anchor="middle" font-family="Arial, sans-serif" font-size="32" font-weight="bold" fill="white">V</text>
|
|
<title>CrossReferenceValidator - Click for details</title>
|
|
</g>
|
|
|
|
<!-- 4. ContextPressureMonitor (bottom) - Amber -->
|
|
<g id="node-pressure" class="service-node" data-service="pressure" style="cursor: pointer;">
|
|
<circle cx="300" cy="495" r="45" fill="url(#servicePressureInt)" filter="url(#dropShadowInt)" opacity="0.95"/>
|
|
<text x="300" y="505" text-anchor="middle" font-family="Arial, sans-serif" font-size="32" font-weight="bold" fill="white">P</text>
|
|
<title>ContextPressureMonitor - Click for details</title>
|
|
</g>
|
|
|
|
<!-- 5. MetacognitiveVerifier (bottom-left) - Rose -->
|
|
<g id="node-metacognitive" class="service-node" data-service="metacognitive" style="cursor: pointer;">
|
|
<circle cx="132" cy="397.5" r="45" fill="url(#serviceMetacognitiveInt)" filter="url(#dropShadowInt)" opacity="0.95"/>
|
|
<text x="132" y="407.5" text-anchor="middle" font-family="Arial, sans-serif" font-size="32" font-weight="bold" fill="white">M</text>
|
|
<title>MetacognitiveVerifier - Click for details</title>
|
|
</g>
|
|
|
|
<!-- 6. PluralisticDeliberationOrchestrator (top-left) - Teal -->
|
|
<g id="node-deliberation" class="service-node" data-service="deliberation" style="cursor: pointer;">
|
|
<circle cx="132" cy="202.5" r="45" fill="url(#serviceDeliberationInt)" filter="url(#dropShadowInt)" opacity="0.95"/>
|
|
<text x="132" y="212.5" text-anchor="middle" font-family="Arial, sans-serif" font-size="32" font-weight="bold" fill="white">D</text>
|
|
<title>PluralisticDeliberationOrchestrator - Click for details</title>
|
|
</g>
|
|
</g>
|
|
|
|
<!-- Central core (clickable) -->
|
|
<g id="central-core" class="service-node" data-service="overview" style="cursor: pointer;">
|
|
<circle cx="300" cy="300" r="85" fill="url(#tractatusCoreInteractive)" filter="url(#dropShadowInt)"/>
|
|
<circle cx="300" cy="300" r="68" fill="rgba(0,0,0,0.25)"/>
|
|
<text x="300" y="320" text-anchor="middle" font-family="Arial, sans-serif" font-size="64" font-weight="bold" fill="white" opacity="0.95">T</text>
|
|
<text x="300" y="345" text-anchor="middle" font-family="Arial, sans-serif" font-size="14" fill="white" opacity="0.8">Tractatus</text>
|
|
<title>Tractatus Core - Click to see how all services work together</title>
|
|
</g>
|
|
|
|
<style>
|
|
.service-node:hover circle {
|
|
filter: url(#dropShadowInt) url(#glow);
|
|
opacity: 1;
|
|
}
|
|
|
|
.service-node.active circle {
|
|
stroke: white;
|
|
stroke-width: 4;
|
|
filter: url(#dropShadowInt) url(#glow);
|
|
}
|
|
|
|
.connection-line {
|
|
transition: opacity 0.3s ease, stroke-width 0.3s ease;
|
|
}
|
|
|
|
.connection-line.active {
|
|
opacity: 0.8;
|
|
stroke-width: 5;
|
|
}
|
|
</style>
|
|
</svg>
|
|
</div>
|
|
|
|
<!-- Service detail panel (permanent, updates on click) -->
|
|
<div id="service-detail-panel" class="flex-1 bg-gray-50 rounded-xl shadow-inner p-6 border border-gray-200 min-h-[300px]">
|
|
<!-- Default state - will be replaced when service is clicked -->
|
|
<div id="panel-default-state" class="flex flex-col items-center justify-center h-full text-center">
|
|
<svg class="w-16 h-16 text-gray-400 mb-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
|
|
</svg>
|
|
<h3 class="text-lg font-semibold text-gray-700 mb-2" data-i18n="interactive.panel_default_title"></h3>
|
|
<p class="text-sm text-gray-500 max-w-md" data-i18n="interactive.panel_default_text"></p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Data Visualizations -->
|
|
<section class="bg-white py-16">
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
|
<h2 class="text-4xl font-bold text-gray-900 mb-6 text-center" data-i18n="data_viz.heading"></h2>
|
|
<p class="text-xl text-gray-600 mb-12 text-center max-w-3xl mx-auto" data-i18n="data_viz.subtitle">
|
|
Interactive visualizations demonstrating how Tractatus governance services monitor and coordinate AI operations.
|
|
</p>
|
|
|
|
<div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
|
|
<!-- Context Pressure Monitor Visualization -->
|
|
<div class="bg-gray-50 rounded-xl shadow-lg p-6 border border-gray-200">
|
|
<div id="pressure-chart"></div>
|
|
</div>
|
|
|
|
<!-- Framework Activity Timeline -->
|
|
<div class="bg-gray-50 rounded-xl shadow-lg p-6 border border-gray-200">
|
|
<div id="activity-timeline"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Reference Implementation -->
|
|
<section class="bg-gray-50 py-16">
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
|
<h2 class="text-4xl font-bold text-gray-900 mb-6 text-center" data-i18n="production.heading"></h2>
|
|
<p class="text-xl text-gray-600 mb-8 text-center max-w-3xl mx-auto">
|
|
<span data-i18n-html="production.subtitle">Tractatus is deployed in production using <strong>Claude Code</strong> as the agent runtime. This demonstrates the framework's real-world viability.
|
|
</p>
|
|
|
|
<div class="bg-white rounded-xl shadow-lg p-8 border border-gray-200">
|
|
<div class="grid grid-cols-1 lg:grid-cols-2 gap-8 items-center">
|
|
<div>
|
|
<h3 class="text-2xl font-bold text-gray-900 mb-4" data-i18n="production.implementation_title"></h3>
|
|
<p class="text-gray-700 mb-4" data-i18n-html="production.implementation_intro"></p>
|
|
<p class="text-gray-700 mb-3 text-sm italic" data-i18n="production.implementation_results_intro"></p>
|
|
<ul class="space-y-2 text-gray-700">
|
|
<li class="flex items-start">
|
|
<svg class="w-5 h-5 text-blue-600 mr-2 mt-0.5" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"/></svg>
|
|
<span data-i18n-html="production.result1"></span>
|
|
</li>
|
|
<li class="flex items-start">
|
|
<svg class="w-5 h-5 text-blue-600 mr-2 mt-0.5" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"/></svg>
|
|
<span data-i18n-html="production.result2"></span>
|
|
</li>
|
|
<li class="flex items-start">
|
|
<svg class="w-5 h-5 text-blue-600 mr-2 mt-0.5" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"/></svg>
|
|
<span data-i18n-html="production.result3"></span>
|
|
</li>
|
|
<li class="flex items-start">
|
|
<svg class="w-5 h-5 text-blue-600 mr-2 mt-0.5" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"/></svg>
|
|
<span data-i18n-html="production.result4"></span>
|
|
</li>
|
|
</ul>
|
|
<p class="text-gray-600 text-xs mt-3 italic" data-i18n="production.disclaimer"></p>
|
|
<div class="mt-6">
|
|
<a href="/images/architecture-diagram.svg" class="inline-block text-blue-600 hover:text-blue-700 font-medium" data-i18n="production.diagram_link"></a>
|
|
</div>
|
|
</div>
|
|
<div class="bg-gradient-to-br from-blue-50 to-purple-50 rounded-lg p-6 border border-blue-200">
|
|
<h4 class="font-bold text-gray-900 mb-3" data-i18n="production.testing_title"></h4>
|
|
<p class="text-gray-700 text-sm mb-3">
|
|
<span data-i18n-html="production.testing_text1"></span>
|
|
</p>
|
|
<p class="text-gray-700 text-sm">
|
|
<span data-i18n-html="production.testing_text2"></span>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Limitations and Reality Check -->
|
|
<section class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-16">
|
|
<div class="bg-amber-50 border-l-4 border-amber-500 p-8 rounded-r-lg">
|
|
<h2 class="text-3xl font-bold text-amber-900 mb-6" data-i18n="limitations.heading"></h2>
|
|
|
|
<div class="space-y-4 text-amber-800">
|
|
<p class="text-lg" data-i18n-html="limitations.intro"></p>
|
|
|
|
|
|
<div class="bg-white rounded-lg p-6 my-6 border border-amber-200">
|
|
<p class="text-gray-700 italic text-lg mb-2" data-i18n="limitations.quote"></p>
|
|
<p class="text-gray-600 text-sm" data-i18n="limitations.quote_attribution"></p>
|
|
</div>
|
|
|
|
<h3 class="text-xl font-bold text-amber-900 mt-6 mb-3" data-i18n="limitations.known_heading"></h3>
|
|
<ul class="space-y-2 ml-6">
|
|
<li class="flex items-start">
|
|
<span class="mr-2">•</span>
|
|
<span data-i18n-html="limitations.limitation1"></span>
|
|
</li>
|
|
<li class="flex items-start">
|
|
<span class="mr-2">•</span>
|
|
<span data-i18n-html="limitations.limitation2"></span>
|
|
</li>
|
|
<li class="flex items-start">
|
|
<span class="mr-2">•</span>
|
|
<span data-i18n-html="limitations.limitation3"></span>
|
|
</li>
|
|
<li class="flex items-start">
|
|
<span class="mr-2">•</span>
|
|
<span data-i18n-html="limitations.limitation4"></span>
|
|
</li>
|
|
<li class="flex items-start">
|
|
<span class="mr-2">•</span>
|
|
<span data-i18n-html="limitations.limitation5"></span>
|
|
</li>
|
|
</ul>
|
|
|
|
<h3 class="text-xl font-bold text-amber-900 mt-6 mb-3" data-i18n="limitations.needs_heading"></h3>
|
|
<ul class="space-y-2 ml-6">
|
|
<li class="flex items-start">
|
|
<span class="mr-2">🔬</span>
|
|
<span data-i18n="limitations.need1"></span>
|
|
</li>
|
|
<li class="flex items-start">
|
|
<span class="mr-2">🔴</span>
|
|
<span data-i18n="limitations.need2"></span>
|
|
</li>
|
|
<li class="flex items-start">
|
|
<span class="mr-2">🏢</span>
|
|
<span data-i18n="limitations.need3"></span>
|
|
</li>
|
|
<li class="flex items-start">
|
|
<span class="mr-2">🤝</span>
|
|
<span data-i18n="limitations.need4"></span>
|
|
</li>
|
|
<li class="flex items-start">
|
|
<span class="mr-2">📊</span>
|
|
<span data-i18n="limitations.need5"></span>
|
|
<p class="text-lg mt-6 font-semibold" data-i18n="limitations.conclusion"></p>
|
|
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- CTA Section -->
|
|
<section 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-purple-600 rounded-2xl p-12 text-center text-white">
|
|
<h2 class="text-4xl font-bold mb-4" data-i18n="cta.heading"></h2>
|
|
<p class="text-xl mb-8 opacity-90 max-w-3xl mx-auto" data-i18n-html="cta.subtitle"></p>
|
|
<div class="flex flex-col sm:flex-row justify-center gap-4">
|
|
<a href="/docs.html" class="inline-block bg-white text-blue-600 px-8 py-3 rounded-lg font-semibold hover:bg-gray-100 transition" data-i18n="cta.btn_docs"></a>
|
|
<a href="/researcher.html" class="inline-block bg-blue-700 text-white px-8 py-3 rounded-lg font-semibold hover:bg-blue-800 transition border-2 border-white" data-i18n="cta.btn_research"></a>
|
|
<a href="/implementer.html" class="inline-block bg-purple-700 text-white px-8 py-3 rounded-lg font-semibold hover:bg-purple-800 transition border-2 border-white" data-i18n="cta.btn_implementation"></a>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
</main>
|
|
|
|
<!-- Footer -->
|
|
<!-- Internationalization -->
|
|
<script src="/js/i18n-simple.js?v=0.1.4.1761439039276" defer></script>
|
|
<script src="/js/components/language-selector.js?v=0.1.0.1761283486841" defer></script>
|
|
|
|
<!-- Scroll Animations (Phase 3) -->
|
|
<script src="/js/scroll-animations.js?v=0.1.0.1761283486841"></script>
|
|
<!-- Page Transitions (Phase 3) -->
|
|
<script src="/js/page-transitions.js?v=0.1.0.1761283486841"></script>
|
|
|
|
|
|
<!-- Interactive Architecture Diagram (Phase 3) -->
|
|
<script src="/js/components/interactive-diagram.js?v=0.1.3.1761438894566" defer></script>
|
|
|
|
<!-- Data Visualizations (Phase 3) -->
|
|
<script src="/js/components/pressure-chart.js?v=0.1.0.1761283486841"></script>
|
|
<script src="/js/components/activity-timeline.js?v=0.1.0.1761283486841"></script>
|
|
|
|
<!-- Footer Component -->
|
|
<script src="/js/components/footer.js?v=0.1.0.1761283486841"></script>
|
|
|
|
</body>
|
|
</html>
|