john/tractatus
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions
tractatus/audit-reports/performance-report.json
TheFlow 2298d36bed fix(submissions): restructure Economist package and fix article display 
- Create Economist SubmissionTracking package correctly:
  * mainArticle = full blog post content
  * coverLetter = 216-word SIR— letter
  * Links to blog post via blogPostId
- Archive 'Letter to The Economist' from blog posts (it's the cover letter)
- Fix date display on article cards (use published_at)
- Target publication already displaying via blue badge

Database changes:
- Make blogPostId optional in SubmissionTracking model
- Economist package ID: 68fa85ae49d4900e7f2ecd83
- Le Monde package ID: 68fa2abd2e6acd5691932150

Next: Enhanced modal with tabs, validation, export

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

Co-Authored-By: Claude <noreply@anthropic.com>
2025-10-24 08:47:42 +13:00

150 lines
No EOL
155 KiB
JSON
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

{
"timestamp": "2025-10-08T00:00:23.287Z",
"summary": {
"pagesТested": 9,
"averageLoadTime": 1,
"averageSize": 16.2,
"fast": 9,
"medium": 0,
"slow": 0
},
"results": [
{
"name": "Homepage",
"url": "http://localhost:9000/",
"statusCode": 200,
"firstByteTime": 7,
"totalTime": 7,
"size": 20868,
"data": "<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n <meta charset=\"UTF-8\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n <title>Tractatus AI Safety Framework | Architectural Constraints for Human Agency</title>\n <meta name=\"description\" content=\"World's first production implementation of architectural AI safety constraints. Preserving human agency through structural, not aspirational, guarantees.\">\n <link rel=\"stylesheet\" href=\"/css/tailwind.css?v=1759833751\">\n <style>\n .gradient-text { background: linear-gradient(120deg, #3b82f6 0%, #8b5cf6 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }\n .hover-lift { transition: transform 0.2s; }\n .hover-lift:hover { transform: translateY(-4px); }\n .skip-link { position: absolute; left: -9999px; }\n .skip-link:focus { left: 0; z-index: 100; background: white; padding: 1rem; }\n\n /* Accessibility: Focus indicators (WCAG 2.4.7) */\n a:focus, button:focus, input:focus, select:focus, textarea:focus {\n outline: 3px solid #3b82f6;\n outline-offset: 2px;\n }\n a:focus:not(:focus-visible) { outline: none; }\n a:focus-visible { outline: 3px solid #3b82f6; outline-offset: 2px; }\n </style>\n</head>\n<body class=\"bg-gray-50\">\n\n <!-- Skip Link for Keyboard Navigation -->\n <a href=\"#main-content\" class=\"skip-link\">Skip to main content</a>\n\n <!-- Navigation (injected by navbar.js) -->\n <script src=\"/js/components/navbar.js?v=1759875690\"></script>\n\n <!-- Hero Section -->\n <header role=\"banner\">\n <section class=\"bg-gradient-to-br from-blue-600 via-blue-700 to-purple-700 text-white\">\n <div class=\"max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-20\">\n <div class=\"text-center\">\n <h1 class=\"text-5xl md:text-6xl font-bold mb-6\">\n Tractatus AI Safety Framework\n </h1>\n <p class=\"text-xl md:text-2xl text-blue-100 mb-8 max-w-4xl mx-auto\">\n Architectural constraints that ensure AI systems preserve human agency—<br>\n regardless of capability level\n </p>\n <div class=\"flex flex-col sm:flex-row gap-4 justify-center\">\n <a href=\"/demos/tractatus-demo.html\" class=\"inline-block bg-white text-blue-700 px-8 py-3 rounded-lg font-semibold hover:bg-blue-50 transition\">\n See Interactive Demo\n </a>\n <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\">\n Read Documentation\n </a>\n </div>\n </div>\n </div>\n </section>\n </header>\n\n <!-- Main Content -->\n <main id=\"main-content\" role=\"main\">\n\n <!-- Value Proposition -->\n <section class=\"max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-16\" aria-labelledby=\"core-insight\">\n <div class=\"bg-amber-50 border-l-4 border-amber-500 p-6 rounded-r-lg\">\n <h2 id=\"core-insight\" class=\"text-2xl font-bold text-amber-900 mb-3\">The Core Insight</h2>\n <p class=\"text-amber-800 text-lg\">\n Instead of hoping AI systems <em>\"behave correctly,\"</em> we implement <strong>architectural guarantees</strong>\n that certain decision types <strong>structurally require human judgment</strong>. This creates bounded AI operation\n that scales safely with capability growth.\n </p>\n </div>\n </section>\n\n <!-- Three Audience Paths -->\n <section class=\"max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-16\">\n <h2 class=\"text-3xl font-bold text-center text-gray-900 mb-12\">Choose Your Path</h2>\n\n <div class=\"grid grid-cols-1 md:grid-cols-3 gap-8\">\n\n <!-- Researcher Path -->\n <div class=\"bg-white rounded-xl shadow-lg border border-gray-200 overflow-hidden hover-lift\">\n <div class=\"bg-gradient-to-r from-blue-500 to-blue-600 p-6\">\n <svg aria-hidden=\"true\" class=\"w-12 h-12 text-white mb-4\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z\"/>\n </svg>\n <h3 class=\"text-2xl font-bold text-white\">Researcher</h3>\n <p class=\"text-blue-100 mt-2\">Academic & technical depth</p>\n </div>\n <div class=\"p-6\">\n <p class=\"text-gray-700 mb-6\">\n Explore the theoretical foundations, formal guarantees, and scholarly context of the Tractatus framework.\n </p>\n <ul class=\"space-y-3 mb-6 text-sm\">\n <li class=\"flex items-start\">\n <svg aria-hidden=\"true\" class=\"w-5 h-5 text-blue-600 mr-2 mt-0.5\" fill=\"currentColor\" viewBox=\"0 0 20 20\"><path fill-rule=\"evenodd\" d=\"M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z\"/></svg>\n <span class=\"text-gray-700\">Technical specifications & proofs</span>\n </li>\n <li class=\"flex items-start\">\n <svg aria-hidden=\"true\" class=\"w-5 h-5 text-blue-600 mr-2 mt-0.5\" fill=\"currentColor\" viewBox=\"0 0 20 20\"><path fill-rule=\"evenodd\" d=\"M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z\"/></svg>\n <span class=\"text-gray-700\">Academic research review</span>\n </li>\n <li class=\"flex items-start\">\n <svg aria-hidden=\"true\" class=\"w-5 h-5 text-blue-600 mr-2 mt-0.5\" fill=\"currentColor\" viewBox=\"0 0 20 20\"><path fill-rule=\"evenodd\" d=\"M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z\"/></svg>\n <span class=\"text-gray-700\">Failure mode analysis</span>\n </li>\n <li class=\"flex items-start\">\n <svg aria-hidden=\"true\" class=\"w-5 h-5 text-blue-600 mr-2 mt-0.5\" fill=\"currentColor\" viewBox=\"0 0 20 20\"><path fill-rule=\"evenodd\" d=\"M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z\"/></svg>\n <span class=\"text-gray-700\">Mathematical foundations</span>\n </li>\n </ul>\n <a href=\"/researcher.html\" class=\"block w-full text-center bg-blue-600 text-white py-2 rounded-lg hover:bg-blue-700 transition font-medium\">\n Explore Research\n </a>\n </div>\n </div>\n\n <!-- Implementer Path -->\n <div class=\"bg-white rounded-xl shadow-lg border border-gray-200 overflow-hidden hover-lift\">\n <div class=\"bg-gradient-to-r from-purple-500 to-purple-600 p-6\">\n <svg aria-hidden=\"true\" class=\"w-12 h-12 text-white mb-4\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M10 20l4-16m4 4l4 4-4 4M6 16l-4-4 4-4\"/>\n </svg>\n <h3 class=\"text-2xl font-bold text-white\">Implementer</h3>\n <p class=\"text-purple-100 mt-2\">Code & integration guides</p>\n </div>\n <div class=\"p-6\">\n <p class=\"text-gray-700 mb-6\">\n Get hands-on with implementation guides, API documentation, and production-ready code examples.\n </p>\n <ul class=\"space-y-3 mb-6 text-sm\">\n <li class=\"flex items-start\">\n <svg aria-hidden=\"true\" class=\"w-5 h-5 text-purple-600 mr-2 mt-0.5\" fill=\"currentColor\" viewBox=\"0 0 20 20\"><path fill-rule=\"evenodd\" d=\"M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z\"/></svg>\n <span class=\"text-gray-700\">Working code examples</span>\n </li>\n <li class=\"flex items-start\">\n <svg aria-hidden=\"true\" class=\"w-5 h-5 text-purple-600 mr-2 mt-0.5\" fill=\"currentColor\" viewBox=\"0 0 20 20\"><path fill-rule=\"evenodd\" d=\"M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z\"/></svg>\n <span class=\"text-gray-700\">API integration patterns</span>\n </li>\n <li class=\"flex items-start\">\n <svg aria-hidden=\"true\" class=\"w-5 h-5 text-purple-600 mr-2 mt-0.5\" fill=\"currentColor\" viewBox=\"0 0 20 20\"><path fill-rule=\"evenodd\" d=\"M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z\"/></svg>\n <span class=\"text-gray-700\">Service architecture diagrams</span>\n </li>\n <li class=\"flex items-start\">\n <svg aria-hidden=\"true\" class=\"w-5 h-5 text-purple-600 mr-2 mt-0.5\" fill=\"currentColor\" viewBox=\"0 0 20 20\"><path fill-rule=\"evenodd\" d=\"M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z\"/></svg>\n <span class=\"text-gray-700\">Deployment best practices</span>\n </li>\n </ul>\n <a href=\"/implementer.html\" class=\"block w-full text-center bg-purple-600 text-white py-2 rounded-lg hover:bg-purple-700 transition font-medium\">\n View Implementation Guide\n </a>\n </div>\n </div>\n\n <!-- Advocate Path -->\n <div class=\"bg-white rounded-xl shadow-lg border border-gray-200 overflow-hidden hover-lift\">\n <div class=\"bg-gradient-to-r from-green-500 to-green-600 p-6\">\n <svg aria-hidden=\"true\" class=\"w-12 h-12 text-white mb-4\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M11 5.882V19.24a1.76 1.76 0 01-3.417.592l-2.147-6.15M18 13a3 3 0 100-6M5.436 13.683A4.001 4.001 0 017 6h1.832c4.1 0 7.625-1.234 9.168-3v14c-1.543-1.766-5.067-3-9.168-3H7a3.988 3.988 0 01-1.564-.317z\"/>\n </svg>\n <h3 class=\"text-2xl font-bold text-white\">Advocate</h3>\n <p class=\"text-green-100 mt-2\">Vision & impact communication</p>\n </div>\n <div class=\"p-6\">\n <p class=\"text-gray-700 mb-6\">\n Understand the societal implications, policy considerations, and real-world impact of AI safety architecture.\n </p>\n <ul class=\"space-y-3 mb-6 text-sm\">\n <li class=\"flex items-start\">\n <svg aria-hidden=\"true\" class=\"w-5 h-5 text-green-600 mr-2 mt-0.5\" fill=\"currentColor\" viewBox=\"0 0 20 20\"><path fill-rule=\"evenodd\" d=\"M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z\"/></svg>\n <span class=\"text-gray-700\">Real-world case studies</span>\n </li>\n <li class=\"flex items-start\">\n <svg aria-hidden=\"true\" class=\"w-5 h-5 text-green-600 mr-2 mt-0.5\" fill=\"currentColor\" viewBox=\"0 0 20 20\"><path fill-rule=\"evenodd\" d=\"M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z\"/></svg>\n <span class=\"text-gray-700\">Plain-language explanations</span>\n </li>\n <li class=\"flex items-start\">\n <svg aria-hidden=\"true\" class=\"w-5 h-5 text-green-600 mr-2 mt-0.5\" fill=\"currentColor\" viewBox=\"0 0 20 20\"><path fill-rule=\"evenodd\" d=\"M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z\"/></svg>\n <span class=\"text-gray-700\">Policy implications</span>\n </li>\n <li class=\"flex items-start\">\n <svg aria-hidden=\"true\" class=\"w-5 h-5 text-green-600 mr-2 mt-0.5\" fill=\"currentColor\" viewBox=\"0 0 20 20\"><path fill-rule=\"evenodd\" d=\"M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z\"/></svg>\n <span class=\"text-gray-700\">Societal impact analysis</span>\n </li>\n </ul>\n <a href=\"/advocate.html\" class=\"block w-full text-center bg-green-700 text-white py-2 rounded-lg hover:bg-green-800 transition font-medium\">\n Join the Movement\n </a>\n </div>\n </div>\n\n </div>\n </section>\n\n <!-- Key Capabilities -->\n <section class=\"bg-white py-16\">\n <div class=\"max-w-7xl mx-auto px-4 sm:px-6 lg:px-8\">\n <h2 class=\"text-3xl font-bold text-center text-gray-900 mb-12\">Framework Capabilities</h2>\n\n <div class=\"grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8\">\n\n <div class=\"border border-gray-200 rounded-lg p-6\">\n <div class=\"w-12 h-12 bg-blue-100 rounded-lg flex items-center justify-center mb-4\">\n <svg aria-hidden=\"true\" class=\"w-6 h-6 text-blue-600\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n <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\"/>\n </svg>\n </div>\n <h3 class=\"text-lg font-semibold text-gray-900 mb-2\">Instruction Classification</h3>\n <p class=\"text-gray-600 text-sm\">\n Quadrant-based classification (STR/OPS/TAC/SYS/STO) with time-persistence metadata tagging\n </p>\n </div>\n\n <div class=\"border border-gray-200 rounded-lg p-6\">\n <div class=\"w-12 h-12 bg-purple-100 rounded-lg flex items-center justify-center mb-4\">\n <svg aria-hidden=\"true\" class=\"w-6 h-6 text-purple-600\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n <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\"/>\n </svg>\n </div>\n <h3 class=\"text-lg font-semibold text-gray-900 mb-2\">Cross-Reference Validation</h3>\n <p class=\"text-gray-600 text-sm\">\n Validates AI actions against explicit user instructions to prevent pattern-based overrides\n </p>\n </div>\n\n <div class=\"border border-gray-200 rounded-lg p-6\">\n <div class=\"w-12 h-12 bg-green-100 rounded-lg flex items-center justify-center mb-4\">\n <svg aria-hidden=\"true\" class=\"w-6 h-6 text-green-600\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n <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\"/>\n </svg>\n </div>\n <h3 class=\"text-lg font-semibold text-gray-900 mb-2\">Boundary Enforcement</h3>\n <p class=\"text-gray-600 text-sm\">\n Implements Tractatus 12.1-12.7 boundaries - values decisions architecturally require humans\n </p>\n </div>\n\n <div class=\"border border-gray-200 rounded-lg p-6\">\n <div class=\"w-12 h-12 bg-yellow-100 rounded-lg flex items-center justify-center mb-4\">\n <svg aria-hidden=\"true\" class=\"w-6 h-6 text-yellow-600\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M13 10V3L4 14h7v7l9-11h-7z\"/>\n </svg>\n </div>\n <h3 class=\"text-lg font-semibold text-gray-900 mb-2\">Pressure Monitoring</h3>\n <p class=\"text-gray-600 text-sm\">\n Detects degraded operating conditions (token pressure, errors, complexity) and adjusts verification\n </p>\n </div>\n\n <div class=\"border border-gray-200 rounded-lg p-6\">\n <div class=\"w-12 h-12 bg-red-100 rounded-lg flex items-center justify-center mb-4\">\n <svg aria-hidden=\"true\" class=\"w-6 h-6 text-red-600\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n <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\"/>\n </svg>\n </div>\n <h3 class=\"text-lg font-semibold text-gray-900 mb-2\">Metacognitive Verification</h3>\n <p class=\"text-gray-600 text-sm\">\n AI self-checks alignment, coherence, safety before execution - structural pause-and-verify\n </p>\n </div>\n\n <div class=\"border border-gray-200 rounded-lg p-6\">\n <div class=\"w-12 h-12 bg-indigo-100 rounded-lg flex items-center justify-center mb-4\">\n <svg aria-hidden=\"true\" class=\"w-6 h-6 text-indigo-600\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M12 4.354a4 4 0 110 5.292M15 21H3v-1a6 6 0 0112 0v1zm0 0h6v-1a6 6 0 00-9-5.197M13 7a4 4 0 11-8 0 4 4 0 018 0z\"/>\n </svg>\n </div>\n <h3 class=\"text-lg font-semibold text-gray-900 mb-2\">Human Oversight</h3>\n <p class=\"text-gray-600 text-sm\">\n Configurable approval workflows ensure appropriate human involvement at every decision level\n </p>\n </div>\n\n </div>\n </div>\n </section>\n\n <!-- CTA Section -->\n <section class=\"bg-gradient-to-r from-blue-600 to-purple-600 text-white py-16\">\n <div class=\"max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center\">\n <h2 class=\"text-3xl font-bold mb-4\">Experience the Framework</h2>\n <p class=\"text-xl text-blue-100 mb-8 max-w-2xl mx-auto\">\n See how architectural constraints prevent the documented \"27027 incident\" and ensure human agency preservation\n </p>\n <div class=\"flex flex-col sm:flex-row gap-4 justify-center\">\n <a href=\"/demos/tractatus-demo.html\" class=\"inline-block bg-white text-blue-700 px-8 py-3 rounded-lg font-semibold hover:bg-blue-50 transition\">\n Interactive Demonstration\n </a>\n <a href=\"/demos/27027-demo.html\" class=\"inline-block bg-blue-700 text-white px-8 py-3 rounded-lg font-semibold hover:bg-blue-800 transition\">\n View 27027 Incident\n </a>\n </div>\n </div>\n </section>\n\n </main>\n\n <!-- Footer -->\n <footer class=\"bg-gray-900 text-gray-400 py-12\" role=\"contentinfo\">\n <div class=\"max-w-7xl mx-auto px-4 sm:px-6 lg:px-8\">\n <div class=\"grid grid-cols-1 md:grid-cols-4 gap-8\">\n <div>\n <h3 class=\"text-white font-semibold mb-4\">Tractatus Framework</h3>\n <p class=\"text-sm\">\n World's first production implementation of architectural AI safety constraints for human agency preservation.\n </p>\n </div>\n <div>\n <h3 class=\"text-white font-semibold mb-4\">Resources</h3>\n <ul class=\"space-y-2 text-sm\">\n <li><a href=\"/docs.html\" class=\"hover:text-white transition\">Documentation</a></li>\n <li><a href=\"/demos/tractatus-demo.html\" class=\"hover:text-white transition\">Interactive Demos</a></li>\n <li><a href=\"/researcher.html\" class=\"hover:text-white transition\">For Researchers</a></li>\n <li><a href=\"/implementer.html\" class=\"hover:text-white transition\">For Implementers</a></li>\n <li><a href=\"/advocate.html\" class=\"hover:text-white transition\">For Advocates</a></li>\n <li><a href=\"/about.html\" class=\"hover:text-white transition\">About & Values</a></li>\n </ul>\n </div>\n <div>\n <h3 class=\"text-white font-semibold mb-4\">Community</h3>\n <ul class=\"space-y-2 text-sm\">\n <li><a href=\"/media-inquiry.html\" class=\"hover:text-white transition\">Media Inquiries</a></li>\n <li><a href=\"/case-submission.html\" class=\"hover:text-white transition\">Submit Case Study</a></li>\n </ul>\n </div>\n <div>\n <h3 class=\"text-white font-semibold mb-4\">Acknowledgment</h3>\n <p class=\"text-sm\">\n This framework acknowledges Te Tiriti o Waitangi and indigenous leadership in digital sovereignty.\n Built with respect for CARE Principles and Māori data sovereignty.\n </p>\n </div>\n </div>\n <div class=\"mt-8 pt-8 border-t border-gray-800 text-center text-sm space-y-2\">\n <p class=\"text-gray-500\">Phase 1 Development - Local Prototype | Built with <a href=\"https://claude.ai/claude-code\" class=\"text-blue-400 hover:text-blue-300 transition\" target=\"_blank\" rel=\"noopener\">Claude Code</a></p>\n <p>© 2025 Tractatus AI Safety Framework. Licensed under <a href=\"https://www.apache.org/licenses/LICENSE-2.0\" class=\"text-blue-400 hover:text-blue-300 transition\" target=\"_blank\" rel=\"noopener\">Apache License 2.0</a>.</p>\n </div>\n </div>\n </footer>\n\n</body>\n</html>\n",
"inlineScripts": 0,
"totalStyleLength": 730,
"images": 0,
"externalCSS": 1,
"externalJS": 1,
"issues": []
},
{
"name": "Researcher",
"url": "http://localhost:9000/researcher.html",
"statusCode": 200,
"firstByteTime": 1,
"totalTime": 1,
"size": 16952,
"data": "<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n <meta charset=\"UTF-8\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n <title>For Researchers | Tractatus AI Safety Framework</title>\n <meta name=\"description\" content=\"Tractatus framework research: architectural constraints, theoretical foundations, and empirical validation of AI safety through structural guarantees.\">\n <link rel=\"stylesheet\" href=\"/css/tailwind.css?v=1759833751\">\n <style>\n /* Accessibility: Skip link */\n .skip-link { position: absolute; left: -9999px; top: 0; }\n .skip-link:focus { left: 0; z-index: 100; background: white; padding: 1rem; border: 2px solid #3b82f6; }\n\n /* Accessibility: Focus indicators (WCAG 2.4.7) */\n a:focus, button:focus, input:focus, select:focus, textarea:focus {\n outline: 3px solid #3b82f6;\n outline-offset: 2px;\n }\n a:focus:not(:focus-visible) { outline: none; }\n a:focus-visible { outline: 3px solid #3b82f6; outline-offset: 2px; }\n </style>\n</head>\n<body class=\"bg-gray-50\">\n\n <!-- Skip Link for Keyboard Navigation -->\n <a href=\"#main-content\" class=\"skip-link\">Skip to main content</a>\n\n <!-- Navigation (injected by navbar.js) -->\n <script src=\"/js/components/navbar.js?v=1759875690\"></script>\n\n <!-- Hero Section -->\n <div class=\"bg-gradient-to-br from-purple-50 to-blue-50 py-20\">\n <div class=\"max-w-7xl mx-auto px-4 sm:px-6 lg:px-8\">\n <div class=\"text-center\">\n <h1 class=\"text-5xl font-bold text-gray-900 mb-6\">\n AI Safety Through<br>Architectural Constraints\n </h1>\n <p class=\"text-xl text-gray-600 max-w-3xl mx-auto mb-8\">\n Exploring the theoretical foundations and empirical validation of structural AI safety—preserving human agency through formal guarantees, not aspirational goals.\n </p>\n <div class=\"flex justify-center space-x-4\">\n <a href=\"/docs.html\" class=\"bg-purple-600 text-white px-6 py-3 rounded-lg font-semibold hover:bg-purple-700 transition\">\n Browse Documentation\n </a>\n <a href=\"#case-studies\" class=\"bg-white text-purple-600 px-6 py-3 rounded-lg font-semibold border-2 border-purple-600 hover:bg-purple-50 transition\">\n View Case Studies\n </a>\n </div>\n </div>\n </div>\n </div>\n\n <!-- Research Focus Areas -->\n <div id=\"main-content\" class=\"max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-16\">\n <h2 class=\"text-3xl font-bold text-gray-900 mb-12 text-center\">Research Focus Areas</h2>\n\n <div class=\"grid grid-cols-1 md:grid-cols-3 gap-8\">\n <!-- Theoretical Foundations -->\n <div class=\"bg-white rounded-lg shadow-lg p-8\">\n <div class=\"w-12 h-12 bg-purple-100 rounded-lg flex items-center justify-center mb-4\">\n <svg aria-hidden=\"true\" class=\"w-6 h-6 text-purple-600\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n <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\"/>\n </svg>\n </div>\n <h3 class=\"text-xl font-bold text-gray-900 mb-3\">Theoretical Foundations</h3>\n <p class=\"text-gray-600 mb-4\">\n Formal specification of the Tractatus boundary: where systematization ends and human judgment begins. Rooted in Wittgenstein's linguistic philosophy.\n </p>\n <ul class=\"space-y-2 text-sm text-gray-600\">\n <li class=\"flex items-start\">\n <span class=\"mr-2\">•</span>\n <span>Boundary delineation principles</span>\n </li>\n <li class=\"flex items-start\">\n <span class=\"mr-2\">•</span>\n <span>Values irreducibility proofs</span>\n </li>\n <li class=\"flex items-start\">\n <span class=\"mr-2\">•</span>\n <span>Agency preservation guarantees</span>\n </li>\n </ul>\n </div>\n\n <!-- Architectural Analysis -->\n <div class=\"bg-white rounded-lg shadow-lg p-8\">\n <div class=\"w-12 h-12 bg-blue-100 rounded-lg flex items-center justify-center mb-4\">\n <svg aria-hidden=\"true\" class=\"w-6 h-6 text-blue-600\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10\"/>\n </svg>\n </div>\n <h3 class=\"text-xl font-bold text-gray-900 mb-3\">Architectural Analysis</h3>\n <p class=\"text-gray-600 mb-4\">\n Five-component framework architecture: classification, validation, boundary enforcement, pressure monitoring, metacognitive verification.\n </p>\n <ul class=\"space-y-2 text-sm text-gray-600\">\n <li class=\"flex items-start\">\n <span class=\"mr-2\">•</span>\n <span>InstructionPersistenceClassifier</span>\n </li>\n <li class=\"flex items-start\">\n <span class=\"mr-2\">•</span>\n <span>CrossReferenceValidator</span>\n </li>\n <li class=\"flex items-start\">\n <span class=\"mr-2\">•</span>\n <span>BoundaryEnforcer</span>\n </li>\n <li class=\"flex items-start\">\n <span class=\"mr-2\">•</span>\n <span>ContextPressureMonitor</span>\n </li>\n <li class=\"flex items-start\">\n <span class=\"mr-2\">•</span>\n <span>MetacognitiveVerifier</span>\n </li>\n </ul>\n </div>\n\n <!-- Empirical Validation -->\n <div class=\"bg-white rounded-lg shadow-lg p-8\">\n <div class=\"w-12 h-12 bg-green-100 rounded-lg flex items-center justify-center mb-4\">\n <svg aria-hidden=\"true\" class=\"w-6 h-6 text-green-600\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z\"/>\n </svg>\n </div>\n <h3 class=\"text-xl font-bold text-gray-900 mb-3\">Empirical Validation</h3>\n <p class=\"text-gray-600 mb-4\">\n Real-world failure case analysis and prevention validation. Documented incidents where traditional AI safety approaches failed.\n </p>\n <ul class=\"space-y-2 text-sm text-gray-600\">\n <li class=\"flex items-start\">\n <span class=\"mr-2\">•</span>\n <span>The 27027 Incident (pattern recognition bias override)</span>\n </li>\n <li class=\"flex items-start\">\n <span class=\"mr-2\">•</span>\n <span>Privacy creep detection</span>\n </li>\n <li class=\"flex items-start\">\n <span class=\"mr-2\">•</span>\n <span>Silent degradation prevention</span>\n </li>\n </ul>\n </div>\n </div>\n </div>\n\n <!-- Interactive Demonstrations -->\n <div class=\"bg-white py-16\">\n <div class=\"max-w-7xl mx-auto px-4 sm:px-6 lg:px-8\">\n <h2 class=\"text-3xl font-bold text-gray-900 mb-12 text-center\">Interactive Demonstrations</h2>\n\n <div class=\"grid grid-cols-1 md:grid-cols-3 gap-8\">\n <a href=\"/demos/classification-demo.html\" class=\"block bg-gray-50 rounded-lg p-6 hover:shadow-lg transition group\">\n <h3 class=\"text-lg font-semibold text-gray-900 mb-2 group-hover:text-purple-600\">Classification Demo</h3>\n <p class=\"text-gray-600 mb-4\">\n Explore how the InstructionPersistenceClassifier categorizes instructions across five quadrants with persistence levels.\n </p>\n <div class=\"text-purple-600 font-medium\">Try the demo →</div>\n </a>\n\n <a href=\"/demos/27027-demo.html\" class=\"block bg-gray-50 rounded-lg p-6 hover:shadow-lg transition group\">\n <h3 class=\"text-lg font-semibold text-gray-900 mb-2 group-hover:text-purple-600\">27027 Incident Analysis</h3>\n <p class=\"text-gray-600 mb-4\">\n Step through a real failure case where AI contradicted explicit instructions, and see how Tractatus prevents it.\n </p>\n <div class=\"text-purple-600 font-medium\">View timeline →</div>\n </a>\n\n <a href=\"/demos/boundary-demo.html\" class=\"block bg-gray-50 rounded-lg p-6 hover:shadow-lg transition group\">\n <h3 class=\"text-lg font-semibold text-gray-900 mb-2 group-hover:text-purple-600\">Boundary Simulator</h3>\n <p class=\"text-gray-600 mb-4\">\n Test decisions against the Tractatus boundary to see which can be automated and which require human judgment.\n </p>\n <div class=\"text-purple-600 font-medium\">Run scenarios →</div>\n </a>\n </div>\n </div>\n </div>\n\n <!-- Case Studies -->\n <div id=\"case-studies\" class=\"max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-16\">\n <h2 class=\"text-3xl font-bold text-gray-900 mb-12 text-center\">Documented Failure Cases</h2>\n\n <div class=\"space-y-6\">\n <div class=\"bg-white rounded-lg shadow-md p-6 border-l-4 border-red-500\">\n <div class=\"flex items-start justify-between\">\n <div>\n <h3 class=\"text-xl font-bold text-gray-900 mb-2\">The 27027 Incident</h3>\n <p class=\"text-gray-600 mb-3\">\n User instructed \"Check port 27027\" but AI immediately used 27017 instead—pattern recognition bias overrode explicit instruction. Not forgetting; immediate autocorrection by training patterns. <strong>Prevented by InstructionPersistenceClassifier + CrossReferenceValidator.</strong>\n </p>\n <div class=\"flex space-x-4 text-sm\">\n <span class=\"text-gray-500\">Failure Type: Pattern Recognition Bias</span>\n <span class=\"text-gray-500\">Prevention: Explicit instruction storage + validation</span>\n </div>\n </div>\n <a href=\"/demos/27027-demo.html\" class=\"text-purple-600 hover:text-purple-700 font-medium\">Interactive demo →</a>\n </div>\n </div>\n\n <div class=\"bg-white rounded-lg shadow-md p-6 border-l-4 border-orange-500\">\n <div class=\"flex items-start justify-between\">\n <div>\n <h3 class=\"text-xl font-bold text-gray-900 mb-2\">Privacy Creep Detection</h3>\n <p class=\"text-gray-600 mb-3\">\n AI suggested analytics that violated privacy-first principle. Gradual values drift over 40-message conversation. <strong>Prevented by BoundaryEnforcer.</strong>\n </p>\n <div class=\"flex space-x-4 text-sm\">\n <span class=\"text-gray-500\">Failure Type: Values Drift</span>\n <span class=\"text-gray-500\">Prevention: STRATEGIC boundary check</span>\n </div>\n </div>\n <a href=\"/docs.html\" class=\"text-purple-600 hover:text-purple-700 font-medium\">See case studies doc →</a>\n </div>\n </div>\n\n <div class=\"bg-white rounded-lg shadow-md p-6 border-l-4 border-yellow-500\">\n <div class=\"flex items-start justify-between\">\n <div>\n <h3 class=\"text-xl font-bold text-gray-900 mb-2\">Silent Quality Degradation</h3>\n <p class=\"text-gray-600 mb-3\">\n Context pressure at 82% caused AI to skip error handling silently. No warning to user. <strong>Prevented by ContextPressureMonitor.</strong>\n </p>\n <div class=\"flex space-x-4 text-sm\">\n <span class=\"text-gray-500\">Failure Type: Silent Degradation</span>\n <span class=\"text-gray-500\">Prevention: CRITICAL pressure detection</span>\n </div>\n </div>\n <a href=\"/docs.html\" class=\"text-purple-600 hover:text-purple-700 font-medium\">See case studies doc →</a>\n </div>\n </div>\n </div>\n </div>\n\n <!-- Research Resources -->\n <div class=\"bg-purple-50 py-16\">\n <div class=\"max-w-7xl mx-auto px-4 sm:px-6 lg:px-8\">\n <h2 class=\"text-3xl font-bold text-gray-900 mb-12 text-center\">Research Resources</h2>\n\n <div class=\"grid grid-cols-1 md:grid-cols-2 gap-8\">\n <div class=\"bg-white rounded-lg p-6\">\n <h3 class=\"text-xl font-bold text-gray-900 mb-4\">Technical Documentation</h3>\n <ul class=\"space-y-3\">\n <li>\n <a href=\"/docs.html\" class=\"text-purple-600 hover:text-purple-700 font-medium\">\n → Framework Overview & Core Concepts\n </a>\n </li>\n <li>\n <a href=\"/docs.html\" class=\"text-purple-600 hover:text-purple-700 font-medium\">\n → Implementation Architecture\n </a>\n </li>\n <li>\n <a href=\"/docs.html\" class=\"text-purple-600 hover:text-purple-700 font-medium\">\n → Case Studies & Failure Analysis\n </a>\n </li>\n </ul>\n </div>\n\n <div class=\"bg-white rounded-lg p-6\">\n <h3 class=\"text-xl font-bold text-gray-900 mb-4\">Contribute to Research</h3>\n <p class=\"text-gray-600 mb-4\">\n This framework is open for academic collaboration and empirical validation studies.\n </p>\n <ul class=\"space-y-2 text-sm text-gray-600 mb-4\">\n <li>• Submit failure cases for analysis</li>\n <li>• Propose theoretical extensions</li>\n <li>• Validate architectural constraints</li>\n <li>• Explore boundary formalization</li>\n </ul>\n <a href=\"/case-submission.html\" class=\"inline-block bg-purple-600 text-white px-4 py-2 rounded text-sm font-semibold hover:bg-purple-700 transition\">\n Submit Case Study →\n </a>\n </div>\n </div>\n </div>\n </div>\n\n <!-- CTA Section -->\n <div class=\"max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-16\">\n <div class=\"bg-gradient-to-r from-purple-600 to-blue-600 rounded-2xl p-12 text-center text-white\">\n <h2 class=\"text-3xl font-bold mb-4\">Join the Research Community</h2>\n <p class=\"text-xl mb-8 opacity-90\">\n Help advance AI safety through empirical validation and theoretical exploration.\n </p>\n <div class=\"flex justify-center space-x-4\">\n <a href=\"/docs.html\" class=\"bg-white text-purple-600 px-8 py-3 rounded-lg font-semibold hover:bg-gray-100 transition\">\n Read Documentation\n </a>\n <a href=\"/implementer.html\" class=\"bg-purple-700 text-white px-8 py-3 rounded-lg font-semibold hover:bg-purple-800 transition border-2 border-white\">\n Implementation Guide →\n </a>\n </div>\n </div>\n </div>\n\n <!-- Footer -->\n <footer class=\"bg-gray-900 text-gray-400 py-12\">\n <div class=\"max-w-7xl mx-auto px-4 sm:px-6 lg:px-8\">\n <div class=\"grid grid-cols-1 md:grid-cols-4 gap-8\">\n <div>\n <h3 class=\"text-white font-bold mb-4\">Tractatus Framework</h3>\n <p class=\"text-sm\">\n Preserving human agency through architectural constraints, not aspirational goals.\n </p>\n </div>\n <div>\n <h3 class=\"text-white font-bold mb-4\">Audience Paths</h3>\n <ul class=\"space-y-2 text-sm\">\n <li><a href=\"/researcher.html\" class=\"hover:text-white\">Researchers</a></li>\n <li><a href=\"/implementer.html\" class=\"hover:text-white\">Implementers</a></li>\n <li><a href=\"/advocate.html\" class=\"hover:text-white\">Advocates</a></li>\n </ul>\n </div>\n <div>\n <h3 class=\"text-white font-bold mb-4\">Resources</h3>\n <ul class=\"space-y-2 text-sm\">\n <li><a href=\"/docs.html\" class=\"hover:text-white\">Documentation</a></li>\n <li><a href=\"/demos/classification-demo.html\" class=\"hover:text-white\">Interactive Demos</a></li>\n <li><a href=\"/\" class=\"hover:text-white\">Home</a></li>\n </ul>\n </div>\n <div>\n <h3 class=\"text-white font-bold mb-4\">Community</h3>\n <ul class=\"space-y-2 text-sm\">\n <li><a href=\"/media-inquiry.html\" class=\"hover:text-white\">Media Inquiries</a></li>\n <li><a href=\"/case-submission.html\" class=\"hover:text-white\">Submit Case Study</a></li>\n </ul>\n </div>\n </div>\n <div class=\"mt-8 pt-8 border-t border-gray-800 text-center text-sm space-y-2\">\n <p class=\"text-gray-500\">Phase 1 Development - Local Prototype | Built with <a href=\"https://claude.ai/claude-code\" class=\"text-blue-400 hover:text-blue-300 transition\" target=\"_blank\" rel=\"noopener\">Claude Code</a></p>\n <p>© 2025 Tractatus AI Safety Framework. Licensed under <a href=\"https://www.apache.org/licenses/LICENSE-2.0\" class=\"text-blue-400 hover:text-blue-300 transition\" target=\"_blank\" rel=\"noopener\">Apache License 2.0</a>.</p>\n </div>\n </div>\n </footer>\n\n</body>\n</html>\n",
"inlineScripts": 0,
"totalStyleLength": 542,
"images": 0,
"externalCSS": 1,
"externalJS": 1,
"issues": []
},
{
"name": "Implementer",
"url": "http://localhost:9000/implementer.html",
"statusCode": 200,
"firstByteTime": 0,
"totalTime": 0,
"size": 21831,
"data": "<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n <meta charset=\"UTF-8\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n <title>For Implementers | Tractatus AI Safety Framework</title>\n <meta name=\"description\" content=\"Integrate Tractatus framework into your AI systems: practical guides, code examples, and step-by-step implementation for production safety.\">\n <link rel=\"stylesheet\" href=\"/css/tailwind.css?v=1759833751\">\n <style>\n /* Accessibility: Skip link */\n .skip-link { position: absolute; left: -9999px; top: 0; }\n .skip-link:focus { left: 0; z-index: 100; background: white; padding: 1rem; border: 2px solid #3b82f6; }\n\n /* Accessibility: Focus indicators (WCAG 2.4.7) */\n a:focus, button:focus, input:focus, select:focus, textarea:focus {\n outline: 3px solid #3b82f6;\n outline-offset: 2px;\n }\n a:focus:not(:focus-visible) { outline: none; }\n a:focus-visible { outline: 3px solid #3b82f6; outline-offset: 2px; }\n </style>\n</head>\n<body class=\"bg-gray-50\">\n\n <!-- Skip Link for Keyboard Navigation -->\n <a href=\"#main-content\" class=\"skip-link\">Skip to main content</a>\n\n <!-- Navigation (injected by navbar.js) -->\n <script src=\"/js/components/navbar.js?v=1759875690\"></script>\n\n <!-- Hero Section -->\n <div class=\"bg-gradient-to-br from-blue-50 to-indigo-50 py-20\">\n <div class=\"max-w-7xl mx-auto px-4 sm:px-6 lg:px-8\">\n <div class=\"text-center\">\n <h1 class=\"text-5xl font-bold text-gray-900 mb-6\">\n Production-Ready<br>AI Safety\n </h1>\n <p class=\"text-xl text-gray-600 max-w-3xl mx-auto mb-8\">\n Integrate Tractatus framework into your AI systems with practical guides, code examples, and battle-tested patterns for real-world deployment.\n </p>\n <div class=\"flex justify-center space-x-4\">\n <a href=\"#quickstart\" class=\"bg-blue-600 text-white px-6 py-3 rounded-lg font-semibold hover:bg-blue-700 transition\">\n Quick Start Guide\n </a>\n <a href=\"/docs.html\" class=\"bg-white text-blue-600 px-6 py-3 rounded-lg font-semibold border-2 border-blue-600 hover:bg-blue-50 transition\">\n View Documentation\n </a>\n </div>\n </div>\n </div>\n </div>\n\n <!-- Integration Options -->\n <div id=\"main-content\" class=\"max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-16\">\n <h2 class=\"text-3xl font-bold text-gray-900 mb-12 text-center\">Integration Approaches</h2>\n\n <div class=\"grid grid-cols-1 md:grid-cols-3 gap-8\">\n <!-- Full Stack Integration -->\n <div class=\"bg-white rounded-lg shadow-lg p-8 border-t-4 border-blue-600\">\n <h3 class=\"text-xl font-bold text-gray-900 mb-3\">Full Stack</h3>\n <p class=\"text-gray-600 mb-4\">\n Complete framework integration for new AI-powered applications. All five services active with persistent instruction storage.\n </p>\n <ul class=\"space-y-2 text-sm text-gray-600 mb-6\">\n <li class=\"flex items-start\">\n <svg aria-hidden=\"true\" class=\"w-5 h-5 text-green-500 mr-2 flex-shrink-0 mt-0.5\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M5 13l4 4L19 7\"/>\n </svg>\n <span>Instruction classification & storage</span>\n </li>\n <li class=\"flex items-start\">\n <svg aria-hidden=\"true\" class=\"w-5 h-5 text-green-500 mr-2 flex-shrink-0 mt-0.5\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M5 13l4 4L19 7\"/>\n </svg>\n <span>Cross-reference validation</span>\n </li>\n <li class=\"flex items-start\">\n <svg aria-hidden=\"true\" class=\"w-5 h-5 text-green-500 mr-2 flex-shrink-0 mt-0.5\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M5 13l4 4L19 7\"/>\n </svg>\n <span>Boundary enforcement</span>\n </li>\n <li class=\"flex items-start\">\n <svg aria-hidden=\"true\" class=\"w-5 h-5 text-green-500 mr-2 flex-shrink-0 mt-0.5\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M5 13l4 4L19 7\"/>\n </svg>\n <span>Context pressure monitoring</span>\n </li>\n </ul>\n <div class=\"text-sm text-gray-500\">Best for: New projects, greenfield AI applications</div>\n </div>\n\n <!-- Middleware Layer -->\n <div class=\"bg-white rounded-lg shadow-lg p-8 border-t-4 border-indigo-600\">\n <h3 class=\"text-xl font-bold text-gray-900 mb-3\">Middleware Layer</h3>\n <p class=\"text-gray-600 mb-4\">\n Add Tractatus validation as middleware in existing AI pipelines. Non-invasive integration with gradual rollout support.\n </p>\n <ul class=\"space-y-2 text-sm text-gray-600 mb-6\">\n <li class=\"flex items-start\">\n <svg aria-hidden=\"true\" class=\"w-5 h-5 text-green-500 mr-2 flex-shrink-0 mt-0.5\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M5 13l4 4L19 7\"/>\n </svg>\n <span>Drop-in Express/Koa middleware</span>\n </li>\n <li class=\"flex items-start\">\n <svg aria-hidden=\"true\" class=\"w-5 h-5 text-green-500 mr-2 flex-shrink-0 mt-0.5\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M5 13l4 4L19 7\"/>\n </svg>\n <span>Monitor mode (log only)</span>\n </li>\n <li class=\"flex items-start\">\n <svg aria-hidden=\"true\" class=\"w-5 h-5 text-green-500 mr-2 flex-shrink-0 mt-0.5\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M5 13l4 4L19 7\"/>\n </svg>\n <span>Gradual enforcement rollout</span>\n </li>\n <li class=\"flex items-start\">\n <svg aria-hidden=\"true\" class=\"w-5 h-5 text-green-500 mr-2 flex-shrink-0 mt-0.5\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M5 13l4 4L19 7\"/>\n </svg>\n <span>Compatible with existing auth</span>\n </li>\n </ul>\n <div class=\"text-sm text-gray-500\">Best for: Existing production AI systems</div>\n </div>\n\n <!-- Selective Components -->\n <div class=\"bg-white rounded-lg shadow-lg p-8 border-t-4 border-purple-600\">\n <h3 class=\"text-xl font-bold text-gray-900 mb-3\">Selective Components</h3>\n <p class=\"text-gray-600 mb-4\">\n Use individual Tractatus services à la carte. Mix and match components based on your specific safety requirements.\n </p>\n <ul class=\"space-y-2 text-sm text-gray-600 mb-6\">\n <li class=\"flex items-start\">\n <svg aria-hidden=\"true\" class=\"w-5 h-5 text-green-500 mr-2 flex-shrink-0 mt-0.5\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M5 13l4 4L19 7\"/>\n </svg>\n <span>Standalone pressure monitoring</span>\n </li>\n <li class=\"flex items-start\">\n <svg aria-hidden=\"true\" class=\"w-5 h-5 text-green-500 mr-2 flex-shrink-0 mt-0.5\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M5 13l4 4L19 7\"/>\n </svg>\n <span>Boundary checks only</span>\n </li>\n <li class=\"flex items-start\">\n <svg aria-hidden=\"true\" class=\"w-5 h-5 text-green-500 mr-2 flex-shrink-0 mt-0.5\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M5 13l4 4L19 7\"/>\n </svg>\n <span>Classification without storage</span>\n </li>\n <li class=\"flex items-start\">\n <svg aria-hidden=\"true\" class=\"w-5 h-5 text-green-500 mr-2 flex-shrink-0 mt-0.5\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M5 13l4 4L19 7\"/>\n </svg>\n <span>Custom component combinations</span>\n </li>\n </ul>\n <div class=\"text-sm text-gray-500\">Best for: Specific safety requirements</div>\n </div>\n </div>\n </div>\n\n <!-- Quick Start -->\n <div id=\"quickstart\" class=\"bg-white py-16\">\n <div class=\"max-w-4xl mx-auto px-4 sm:px-6 lg:px-8\">\n <h2 class=\"text-3xl font-bold text-gray-900 mb-8 text-center\">Quick Start Guide</h2>\n\n <div class=\"space-y-8\">\n <!-- Step 1 -->\n <div class=\"border-l-4 border-blue-600 pl-6\">\n <div class=\"flex items-center mb-3\">\n <span class=\"bg-blue-600 text-white rounded-full w-8 h-8 flex items-center justify-center font-bold mr-3\">1</span>\n <h3 class=\"text-xl font-bold text-gray-900\">Installation</h3>\n </div>\n <pre class=\"bg-gray-900 text-gray-100 p-4 rounded-lg overflow-x-auto mb-3\"><code>npm install @tractatus/framework\n# or\nyarn add @tractatus/framework</code></pre>\n <p class=\"text-gray-600\">Install the framework package and its dependencies (MongoDB for instruction storage).</p>\n </div>\n\n <!-- Step 2 -->\n <div class=\"border-l-4 border-blue-600 pl-6\">\n <div class=\"flex items-center mb-3\">\n <span class=\"bg-blue-600 text-white rounded-full w-8 h-8 flex items-center justify-center font-bold mr-3\">2</span>\n <h3 class=\"text-xl font-bold text-gray-900\">Initialize Services</h3>\n </div>\n <pre class=\"bg-gray-900 text-gray-100 p-4 rounded-lg overflow-x-auto mb-3\"><code>const { TractatusFramework } = require('@tractatus/framework');\n\nconst tractatus = new TractatusFramework({\n mongoUri: process.env.MONGODB_URI,\n verbosity: 'SUMMARY', // or 'VERBOSE', 'SILENT'\n components: {\n classifier: true,\n validator: true,\n boundary: true,\n pressure: true,\n metacognitive: 'selective'\n }\n});\n\nawait tractatus.initialize();</code></pre>\n <p class=\"text-gray-600\">Configure and initialize the framework with your preferred settings.</p>\n </div>\n\n <!-- Step 3 -->\n <div class=\"border-l-4 border-blue-600 pl-6\">\n <div class=\"flex items-center mb-3\">\n <span class=\"bg-blue-600 text-white rounded-full w-8 h-8 flex items-center justify-center font-bold mr-3\">3</span>\n <h3 class=\"text-xl font-bold text-gray-900\">Classify Instructions</h3>\n </div>\n <pre class=\"bg-gray-900 text-gray-100 p-4 rounded-lg overflow-x-auto mb-3\"><code>const instruction = \"Always use MongoDB on port 27017\";\n\nconst classification = await tractatus.classify(instruction);\n// {\n// quadrant: 'SYSTEM',\n// persistence: 'HIGH',\n// temporal_scope: 'PROJECT',\n// verification_required: 'MANDATORY',\n// explicitness: 0.85\n// }\n\nif (classification.explicitness >= 0.6) {\n await tractatus.store(instruction, classification);\n}</code></pre>\n <p class=\"text-gray-600\">Classify user instructions and store those that meet explicitness threshold.</p>\n </div>\n\n <!-- Step 4 -->\n <div class=\"border-l-4 border-blue-600 pl-6\">\n <div class=\"flex items-center mb-3\">\n <span class=\"bg-blue-600 text-white rounded-full w-8 h-8 flex items-center justify-center font-bold mr-3\">4</span>\n <h3 class=\"text-xl font-bold text-gray-900\">Validate Actions</h3>\n </div>\n <pre class=\"bg-gray-900 text-gray-100 p-4 rounded-lg overflow-x-auto mb-3\"><code>// User instructed: \"Check MongoDB at port 27027\"\n// But AI about to use port 27017 (pattern recognition bias)\n\nconst action = {\n type: 'db_config',\n parameters: { port: 27017 } // Pattern override!\n};\n\nconst validation = await tractatus.validate(action);\n\nif (validation.status === 'REJECTED') {\n // \"Port 27017 conflicts with instruction: use port 27027\"\n console.error(`Validation failed: ${validation.reason}`);\n console.log(`Using instructed port: ${validation.correct_parameters.port}`);\n // Use correct port 27027\n} else {\n executeAction(action);\n}</code></pre>\n <p class=\"text-gray-600\">Validate AI actions against stored instructions before execution.</p>\n </div>\n\n <!-- Step 5 -->\n <div class=\"border-l-4 border-blue-600 pl-6\">\n <div class=\"flex items-center mb-3\">\n <span class=\"bg-blue-600 text-white rounded-full w-8 h-8 flex items-center justify-center font-bold mr-3\">5</span>\n <h3 class=\"text-xl font-bold text-gray-900\">Enforce Boundaries</h3>\n </div>\n <pre class=\"bg-gray-900 text-gray-100 p-4 rounded-lg overflow-x-auto mb-3\"><code>// Check if decision crosses Tractatus boundary\nconst decision = {\n domain: 'values',\n description: 'Change privacy policy to enable analytics'\n};\n\nconst boundary = await tractatus.checkBoundary(decision);\n\nif (!boundary.allowed) {\n // Requires human decision\n await notifyHuman({\n decision,\n reason: boundary.reason,\n alternatives: boundary.ai_can_provide\n });\n}</code></pre>\n <p class=\"text-gray-600\">Enforce boundaries: AI cannot make values decisions without human approval.</p>\n </div>\n </div>\n </div>\n </div>\n\n <!-- Code Examples -->\n <div class=\"max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-16\">\n <h2 class=\"text-3xl font-bold text-gray-900 mb-12 text-center\">Integration Patterns</h2>\n\n <div class=\"grid grid-cols-1 md:grid-cols-2 gap-8\">\n <div class=\"bg-gray-50 rounded-lg p-6\">\n <h3 class=\"text-lg font-semibold text-gray-900 mb-4\">Express Middleware</h3>\n <pre class=\"bg-gray-900 text-gray-100 p-4 rounded-lg text-sm overflow-x-auto\"><code>app.use(tractatus.middleware({\n mode: 'enforce', // or 'monitor'\n onViolation: async (req, res, violation) => {\n await logViolation(violation);\n res.status(403).json({\n error: 'Tractatus boundary violation',\n reason: violation.reason\n });\n }\n}));</code></pre>\n </div>\n\n <div class=\"bg-gray-50 rounded-lg p-6\">\n <h3 class=\"text-lg font-semibold text-gray-900 mb-4\">Content Moderation</h3>\n <pre class=\"bg-gray-900 text-gray-100 p-4 rounded-lg text-sm overflow-x-auto\"><code>async function moderateContent(content) {\n const decision = {\n domain: 'values',\n action: 'auto_moderate',\n content\n };\n\n const check = await tractatus.checkBoundary(decision);\n\n if (!check.allowed) {\n return { action: 'human_review', alternatives: check.ai_can_provide };\n }\n}</code></pre>\n </div>\n\n <div class=\"bg-gray-50 rounded-lg p-6\">\n <h3 class=\"text-lg font-semibold text-gray-900 mb-4\">Pressure Monitoring</h3>\n <pre class=\"bg-gray-900 text-gray-100 p-4 rounded-lg text-sm overflow-x-auto\"><code>const pressure = await tractatus.checkPressure({\n tokens: 150000,\n messages: 45,\n errors: 2\n});\n\nif (pressure.level === 'CRITICAL') {\n await suggestHandoff(pressure.recommendations);\n} else if (pressure.level === 'HIGH') {\n await increaseVerification();\n}</code></pre>\n </div>\n\n <div class=\"bg-gray-50 rounded-lg p-6\">\n <h3 class=\"text-lg font-semibold text-gray-900 mb-4\">Custom Classification</h3>\n <pre class=\"bg-gray-900 text-gray-100 p-4 rounded-lg text-sm overflow-x-auto\"><code>const customClassifier = {\n patterns: {\n CRITICAL: /security|auth|password/i,\n HIGH: /database|config|api/i\n },\n\n classify(text) {\n for (const [level, pattern] of Object.entries(this.patterns)) {\n if (pattern.test(text)) return level;\n }\n return 'MEDIUM';\n }\n};</code></pre>\n </div>\n </div>\n </div>\n\n <!-- Resources -->\n <div class=\"bg-blue-50 py-16\">\n <div class=\"max-w-7xl mx-auto px-4 sm:px-6 lg:px-8\">\n <h2 class=\"text-3xl font-bold text-gray-900 mb-12 text-center\">Implementation Resources</h2>\n\n <div class=\"grid grid-cols-1 md:grid-cols-3 gap-8\">\n <div class=\"bg-white rounded-lg p-6\">\n <h3 class=\"text-xl font-bold text-gray-900 mb-4\">Documentation</h3>\n <ul class=\"space-y-3\">\n <li>\n <a href=\"/docs.html\" class=\"text-blue-600 hover:text-blue-700 font-medium\">\n → Complete API Reference\n </a>\n </li>\n <li>\n <a href=\"/docs.html\" class=\"text-blue-600 hover:text-blue-700 font-medium\">\n → Implementation Guide\n </a>\n </li>\n <li>\n <a href=\"/docs.html\" class=\"text-blue-600 hover:text-blue-700 font-medium\">\n → Architecture Overview\n </a>\n </li>\n <li>\n <a href=\"/docs-viewer.html?doc=claude-code-framework-enforcement\" class=\"text-blue-600 hover:text-blue-700 font-medium\">\n → Claude Code Enforcement\n </a>\n <span class=\"ml-2 text-xs bg-purple-100 text-purple-800 px-2 py-1 rounded\">Claude Code</span>\n </li>\n </ul>\n </div>\n\n <div class=\"bg-white rounded-lg p-6\">\n <h3 class=\"text-xl font-bold text-gray-900 mb-4\">Examples</h3>\n <ul class=\"space-y-3\">\n <li>\n <a href=\"/demos/classification-demo.html\" class=\"text-blue-600 hover:text-blue-700 font-medium\">\n → Classification Demo\n </a>\n </li>\n <li>\n <a href=\"/demos/boundary-demo.html\" class=\"text-blue-600 hover:text-blue-700 font-medium\">\n → Boundary Enforcement\n </a>\n </li>\n <li>\n <a href=\"/demos/27027-demo.html\" class=\"text-blue-600 hover:text-blue-700 font-medium\">\n → Real Failure Cases\n </a>\n </li>\n </ul>\n </div>\n\n <div class=\"bg-white rounded-lg p-6\">\n <h3 class=\"text-xl font-bold text-gray-900 mb-4\">Support</h3>\n <p class=\"text-gray-600 mb-4\">\n Get help with implementation, integration, and troubleshooting.\n </p>\n <ul class=\"space-y-2 text-sm text-gray-600\">\n <li>• GitHub Issues & Discussions</li>\n <li>• Implementation consulting</li>\n <li>• Community Slack channel</li>\n </ul>\n </div>\n </div>\n </div>\n </div>\n\n <!-- CTA Section -->\n <div class=\"max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-16\">\n <div class=\"bg-gradient-to-r from-blue-600 to-indigo-600 rounded-2xl p-12 text-center text-white\">\n <h2 class=\"text-3xl font-bold mb-4\">Ready to Implement?</h2>\n <p class=\"text-xl mb-8 opacity-90\">\n Join organizations building safer AI systems with architectural guarantees.\n </p>\n <div class=\"flex justify-center space-x-4\">\n <a href=\"/docs.html\" class=\"bg-white text-blue-600 px-8 py-3 rounded-lg font-semibold hover:bg-gray-100 transition\">\n View Full Documentation\n </a>\n <a href=\"/researcher.html\" class=\"bg-blue-700 text-white px-8 py-3 rounded-lg font-semibold hover:bg-blue-800 transition border-2 border-white\">\n Research Background →\n </a>\n </div>\n </div>\n </div>\n\n <!-- Footer -->\n <footer class=\"bg-gray-900 text-gray-400 py-12\">\n <div class=\"max-w-7xl mx-auto px-4 sm:px-6 lg:px-8\">\n <div class=\"grid grid-cols-1 md:grid-cols-4 gap-8\">\n <div>\n <h3 class=\"text-white font-bold mb-4\">Tractatus Framework</h3>\n <p class=\"text-sm\">\n Preserving human agency through architectural constraints, not aspirational goals.\n </p>\n </div>\n <div>\n <h3 class=\"text-white font-bold mb-4\">Audience Paths</h3>\n <ul class=\"space-y-2 text-sm\">\n <li><a href=\"/researcher.html\" class=\"hover:text-white\">Researchers</a></li>\n <li><a href=\"/implementer.html\" class=\"hover:text-white\">Implementers</a></li>\n <li><a href=\"/advocate.html\" class=\"hover:text-white\">Advocates</a></li>\n </ul>\n </div>\n <div>\n <h3 class=\"text-white font-bold mb-4\">Resources</h3>\n <ul class=\"space-y-2 text-sm\">\n <li><a href=\"/docs.html\" class=\"hover:text-white\">Documentation</a></li>\n <li><a href=\"/demos/classification-demo.html\" class=\"hover:text-white\">Interactive Demos</a></li>\n <li><a href=\"/\" class=\"hover:text-white\">Home</a></li>\n </ul>\n </div>\n <div>\n <h3 class=\"text-white font-bold mb-4\">Community</h3>\n <ul class=\"space-y-2 text-sm\">\n <li><a href=\"/media-inquiry.html\" class=\"hover:text-white transition\">Media Inquiries</a></li>\n <li><a href=\"/case-submission.html\" class=\"hover:text-white transition\">Submit Case Study</a></li>\n </ul>\n </div>\n </div>\n <div class=\"mt-8 pt-8 border-t border-gray-800 text-center text-sm space-y-2\">\n <p class=\"text-gray-500\">Phase 1 Development - Local Prototype | Built with <a href=\"https://claude.ai/claude-code\" class=\"text-blue-400 hover:text-blue-300 transition\" target=\"_blank\" rel=\"noopener\">Claude Code</a></p>\n <p>© 2025 Tractatus AI Safety Framework. Licensed under <a href=\"https://www.apache.org/licenses/LICENSE-2.0\" class=\"text-blue-400 hover:text-blue-300 transition\" target=\"_blank\" rel=\"noopener\">Apache License 2.0</a>.</p>\n </div>\n </div>\n </footer>\n\n</body>\n</html>\n",
"inlineScripts": 0,
"totalStyleLength": 542,
"images": 0,
"externalCSS": 1,
"externalJS": 1,
"issues": []
},
{
"name": "Advocate",
"url": "http://localhost:9000/advocate.html",
"statusCode": 200,
"firstByteTime": 0,
"totalTime": 0,
"size": 19318,
"data": "<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n <meta charset=\"UTF-8\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n <title>For Advocates | Tractatus AI Safety Framework</title>\n <meta name=\"description\" content=\"Join the movement for AI safety through structural guarantees. Preserve human agency, promote digital sovereignty, and advocate for responsible AI development.\">\n <link rel=\"stylesheet\" href=\"/css/tailwind.css?v=1759833751\">\n</head>\n<a href=\"#main-content\" class=\"skip-link\">Skip to main content</a>\n<body class=\"bg-gray-50\">\n\n <!-- Navigation (injected by navbar.js) -->\n <script src=\"/js/components/navbar.js?v=1759875690\"></script>\n\n <!-- Hero Section -->\n <div class=\"bg-gradient-to-br from-green-50 to-teal-50 py-20\">\n <div class=\"max-w-7xl mx-auto px-4 sm:px-6 lg:px-8\">\n <div class=\"text-center\">\n <h1 class=\"text-5xl font-bold text-gray-900 mb-6\">\n AI Safety as<br>Human Sovereignty\n </h1>\n <p class=\"text-xl text-gray-600 max-w-3xl mx-auto mb-8\">\n Join the movement for AI systems that preserve human agency through structural guarantees, not corporate promises. Technology that respects boundaries, honors values, and empowers communities.\n </p>\n <div class=\"flex justify-center space-x-4\">\n <a href=\"#mission\" class=\"bg-green-700 text-white px-6 py-3 rounded-lg font-semibold hover:bg-green-800 transition\">\n Our Mission\n </a>\n <a href=\"#get-involved\" class=\"bg-white text-green-600 px-6 py-3 rounded-lg font-semibold border-2 border-green-600 hover:bg-green-50 transition\">\n Get Involved\n </a>\n </div>\n </div>\n </div>\n </div>\n\n <!-- Core Values -->\n <div id=\"main-content\" class=\"max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-16\">\n <h2 class=\"text-3xl font-bold text-gray-900 mb-12 text-center\">Core Values</h2>\n\n <div class=\"grid grid-cols-1 md:grid-cols-2 gap-8\">\n <!-- Human Sovereignty -->\n <div class=\"bg-white rounded-lg shadow-lg p-8\">\n <div class=\"flex items-start mb-4\">\n <div class=\"w-12 h-12 bg-green-100 rounded-lg flex items-center justify-center mr-4 flex-shrink-0\">\n <svg aria-hidden=\"true\" class=\"w-6 h-6 text-green-600\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M12 4.354a4 4 0 110 5.292M15 21H3v-1a6 6 0 0112 0v1zm0 0h6v-1a6 6 0 00-9-5.197M13 7a4 4 0 11-8 0 4 4 0 018 0z\"/>\n </svg>\n </div>\n <div>\n <h3 class=\"text-xl font-bold text-gray-900 mb-3\">Human Sovereignty</h3>\n <p class=\"text-gray-600\">\n AI must never make values decisions without human approval. Some choices—privacy vs. convenience, user agency, cultural context—cannot be systematized. They require human judgment, always.\n </p>\n </div>\n </div>\n <blockquote class=\"border-l-4 border-green-500 pl-4 italic text-gray-600 mt-4\">\n \"What cannot be systematized must not be automated.\"\n </blockquote>\n </div>\n\n <!-- Digital Sovereignty -->\n <div class=\"bg-white rounded-lg shadow-lg p-8\">\n <div class=\"flex items-start mb-4\">\n <div class=\"w-12 h-12 bg-blue-100 rounded-lg flex items-center justify-center mr-4 flex-shrink-0\">\n <svg aria-hidden=\"true\" class=\"w-6 h-6 text-blue-600\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M3.055 11H5a2 2 0 012 2v1a2 2 0 002 2 2 2 0 012 2v2.945M8 3.935V5.5A2.5 2.5 0 0010.5 8h.5a2 2 0 012 2 2 2 0 104 0 2 2 0 012-2h1.064M15 20.488V18a2 2 0 012-2h3.064M21 12a9 9 0 11-18 0 9 9 0 0118 0z\"/>\n </svg>\n </div>\n <div>\n <h3 class=\"text-xl font-bold text-gray-900 mb-3\">Digital Sovereignty</h3>\n <p class=\"text-gray-600\">\n Communities and individuals must control their own data and AI systems. No corporate surveillance, no centralized control. Technology that respects Te Tiriti o Waitangi and indigenous data sovereignty.\n </p>\n </div>\n </div>\n <blockquote class=\"border-l-4 border-blue-500 pl-4 italic text-gray-600 mt-4\">\n \"Technology serves communities, not corporations.\"\n </blockquote>\n </div>\n\n <!-- Transparency -->\n <div class=\"bg-white rounded-lg shadow-lg p-8\">\n <div class=\"flex items-start mb-4\">\n <div class=\"w-12 h-12 bg-purple-100 rounded-lg flex items-center justify-center mr-4 flex-shrink-0\">\n <svg aria-hidden=\"true\" class=\"w-6 h-6 text-purple-600\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M15 12a3 3 0 11-6 0 3 3 0 016 0z\"/>\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z\"/>\n </svg>\n </div>\n <div>\n <h3 class=\"text-xl font-bold text-gray-900 mb-3\">Radical Transparency</h3>\n <p class=\"text-gray-600\">\n All AI decisions must be explainable, auditable, and reversible. No black boxes. Users deserve to understand why AI systems make the choices they do, and have the power to override them.\n </p>\n </div>\n </div>\n <blockquote class=\"border-l-4 border-purple-500 pl-4 italic text-gray-600 mt-4\">\n \"Transparency builds trust, opacity breeds harm.\"\n </blockquote>\n </div>\n\n <!-- Community Empowerment -->\n <div class=\"bg-white rounded-lg shadow-lg p-8\">\n <div class=\"flex items-start mb-4\">\n <div class=\"w-12 h-12 bg-orange-100 rounded-lg flex items-center justify-center mr-4 flex-shrink-0\">\n <svg aria-hidden=\"true\" class=\"w-6 h-6 text-orange-600\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n <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\"/>\n </svg>\n </div>\n <div>\n <h3 class=\"text-xl font-bold text-gray-900 mb-3\">Community Empowerment</h3>\n <p class=\"text-gray-600\">\n AI safety is not a technical problem—it's a social one. Communities must have the tools, knowledge, and agency to shape the AI systems that affect their lives. No tech paternalism.\n </p>\n </div>\n </div>\n <blockquote class=\"border-l-4 border-orange-500 pl-4 italic text-gray-600 mt-4\">\n \"Those affected by AI must have power over AI.\"\n </blockquote>\n </div>\n </div>\n </div>\n\n <!-- Why It Matters -->\n <div class=\"bg-white py-16\">\n <div class=\"max-w-7xl mx-auto px-4 sm:px-6 lg:px-8\">\n <h2 class=\"text-3xl font-bold text-gray-900 mb-12 text-center\">Why Tractatus Matters</h2>\n\n <div class=\"grid grid-cols-1 md:grid-cols-3 gap-8 mb-12\">\n <div class=\"text-center\">\n <div class=\"text-5xl font-bold text-green-600 mb-2\">0</div>\n <div class=\"text-gray-600\">Values decisions automated without human approval</div>\n </div>\n <div class=\"text-center\">\n <div class=\"text-5xl font-bold text-blue-600 mb-2\">100%</div>\n <div class=\"text-gray-600\">Boundary enforcement through architecture, not promises</div>\n </div>\n <div class=\"text-center\">\n <div class=\"text-5xl font-bold text-purple-600 mb-2\">∞</div>\n <div class=\"text-gray-600\">Human agency preserved across all interactions</div>\n </div>\n </div>\n\n <div class=\"bg-gray-50 rounded-lg p-8\">\n <h3 class=\"text-2xl font-bold text-gray-900 mb-4 text-center\">The Current Problem</h3>\n <p class=\"text-gray-600 text-center max-w-3xl mx-auto mb-6\">\n Existing AI safety approaches rely on training, fine-tuning, and corporate governance—all of which can fail, drift, or be overridden. Tractatus is different: <strong>safety through architecture</strong>.\n </p>\n <div class=\"grid grid-cols-1 md:grid-cols-2 gap-6\">\n <div class=\"bg-red-50 border-l-4 border-red-500 p-4\">\n <h4 class=\"font-bold text-red-900 mb-2\">❌ Traditional Approaches</h4>\n <ul class=\"text-sm text-red-800 space-y-1\">\n <li>• Rely on AI \"learning\" not to cause harm</li>\n <li>• Can drift over time (values creep)</li>\n <li>• Black box decision-making</li>\n <li>• Corporate promises, no guarantees</li>\n </ul>\n </div>\n <div class=\"bg-green-50 border-l-4 border-green-500 p-4\">\n <h4 class=\"font-bold text-green-900 mb-2\">✅ Tractatus Framework</h4>\n <ul class=\"text-sm text-green-800 space-y-1\">\n <li>• Structural constraints prevent harm</li>\n <li>• Persistent validation against instructions</li>\n <li>• Transparent boundary enforcement</li>\n <li>• Architectural guarantees, not training</li>\n </ul>\n </div>\n </div>\n </div>\n </div>\n </div>\n\n <!-- Get Involved -->\n <div id=\"get-involved\" class=\"bg-green-50 py-16\">\n <div class=\"max-w-7xl mx-auto px-4 sm:px-6 lg:px-8\">\n <h2 class=\"text-3xl font-bold text-gray-900 mb-12 text-center\">Get Involved</h2>\n\n <div class=\"grid grid-cols-1 md:grid-cols-3 gap-8\">\n <div class=\"bg-white rounded-lg p-6\">\n <h3 class=\"text-xl font-bold text-gray-900 mb-4\">Share the Framework</h3>\n <p class=\"text-gray-600 mb-4\">\n Help spread awareness about architectural AI safety and the importance of preserving human agency.\n </p>\n <ul class=\"space-y-2 text-sm text-gray-600\">\n <li>• Share on social media</li>\n <li>• Present at conferences</li>\n <li>• Write blog posts</li>\n <li>• Organize community workshops</li>\n </ul>\n </div>\n\n <div class=\"bg-white rounded-lg p-6\">\n <h3 class=\"text-xl font-bold text-gray-900 mb-4\">Advocate for Standards</h3>\n <p class=\"text-gray-600 mb-4\">\n Push organizations and policymakers to adopt structural AI safety requirements.\n </p>\n <ul class=\"space-y-2 text-sm text-gray-600\">\n <li>• Contact representatives</li>\n <li>• Propose policy frameworks</li>\n <li>• Join advocacy coalitions</li>\n <li>• Support aligned organizations</li>\n </ul>\n </div>\n\n <div class=\"bg-white rounded-lg p-6\">\n <h3 class=\"text-xl font-bold text-gray-900 mb-4\">Build the Community</h3>\n <p class=\"text-gray-600 mb-4\">\n Join others working toward AI systems that preserve human sovereignty and dignity.\n </p>\n <ul class=\"space-y-2 text-sm text-gray-600 mb-6\">\n <li>• Contribute to documentation</li>\n <li>• Submit case studies</li>\n <li>• Participate in discussions</li>\n <li>• Mentor new advocates</li>\n </ul>\n <div class=\"flex flex-col space-y-3\">\n <a href=\"/media-inquiry.html\" class=\"inline-block bg-green-700 text-white px-4 py-2 rounded text-sm font-semibold hover:bg-green-800 transition text-center\">\n Media Inquiries →\n </a>\n <a href=\"/case-submission.html\" class=\"inline-block bg-green-700 text-white px-4 py-2 rounded text-sm font-semibold hover:bg-green-800 transition text-center\">\n Submit Case Study →\n </a>\n </div>\n </div>\n </div>\n </div>\n </div>\n\n <!-- Real-World Impact -->\n <div class=\"max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-16\">\n <h2 class=\"text-3xl font-bold text-gray-900 mb-12 text-center\">Real-World Impact</h2>\n\n <div class=\"space-y-6\">\n <div class=\"bg-white rounded-lg shadow-md p-6\">\n <h3 class=\"text-xl font-bold text-gray-900 mb-3\">Preventing the 27027 Incident</h3>\n <p class=\"text-gray-600 mb-4\">\n User said \"Check port 27027\" but AI immediately used 27017—pattern recognition bias overrode explicit instruction. Not forgetting; AI's training patterns \"autocorrected\" the user. Result: 2+ hours debugging, production blocker, loss of trust.\n </p>\n <p class=\"text-gray-600 font-semibold\">\n <span class=\"text-green-600\">✓ Tractatus prevention:</span> InstructionPersistenceClassifier stores explicit instruction, CrossReferenceValidator blocks pattern override BEFORE execution. Zero debugging time, zero production impact.\n </p>\n </div>\n\n <div class=\"bg-white rounded-lg shadow-md p-6\">\n <h3 class=\"text-xl font-bold text-gray-900 mb-3\">Stopping Privacy Creep</h3>\n <p class=\"text-gray-600 mb-4\">\n Over 40-message conversation, AI gradually suggested analytics features that violated user's explicit \"privacy-first\" principle. Subtle values drift went unnoticed until deployment.\n </p>\n <p class=\"text-gray-600 font-semibold\">\n <span class=\"text-green-600\">✓ Tractatus prevention:</span> BoundaryEnforcer blocked analytics suggestion immediately. Privacy vs. analytics is a values trade-off requiring human decision.\n </p>\n </div>\n\n <div class=\"bg-white rounded-lg shadow-md p-6\">\n <h3 class=\"text-xl font-bold text-gray-900 mb-3\">Detecting Silent Degradation</h3>\n <p class=\"text-gray-600 mb-4\">\n At 82% context pressure, AI silently omitted error handling to \"simplify\" implementation. No warning to user, resulted in production crashes when edge cases hit.\n </p>\n <p class=\"text-gray-600 font-semibold\">\n <span class=\"text-green-600\">✓ Tractatus prevention:</span> ContextPressureMonitor flagged CRITICAL pressure. Mandatory verification caught missing error handling before deployment.\n </p>\n </div>\n </div>\n </div>\n\n <!-- Resources for Advocates -->\n <div class=\"bg-purple-50 py-16\">\n <div class=\"max-w-7xl mx-auto px-4 sm:px-6 lg:px-8\">\n <h2 class=\"text-3xl font-bold text-gray-900 mb-12 text-center\">Resources for Advocates</h2>\n\n <div class=\"grid grid-cols-1 md:grid-cols-2 gap-8\">\n <div class=\"bg-white rounded-lg p-6\">\n <h3 class=\"text-xl font-bold text-gray-900 mb-4\">Educational Materials</h3>\n <ul class=\"space-y-3\">\n <li>\n <a href=\"/demos/boundary-demo.html\" class=\"text-green-600 hover:text-green-700 font-medium\">\n → Interactive Boundary Simulator\n </a>\n <p class=\"text-sm text-gray-600\">Show what AI can/cannot decide</p>\n </li>\n <li>\n <a href=\"/demos/27027-demo.html\" class=\"text-green-600 hover:text-green-700 font-medium\">\n → 27027 Incident Visualizer\n </a>\n <p class=\"text-sm text-gray-600\">Real failure case with prevention</p>\n </li>\n <li>\n <a href=\"/docs.html\" class=\"text-green-600 hover:text-green-700 font-medium\">\n → Framework Documentation\n </a>\n <p class=\"text-sm text-gray-600\">Complete technical background</p>\n </li>\n </ul>\n </div>\n\n <div class=\"bg-white rounded-lg p-6\">\n <h3 class=\"text-xl font-bold text-gray-900 mb-4\">Advocacy Toolkit</h3>\n <ul class=\"space-y-2 text-sm text-gray-600\">\n <li>• Presentation templates & slides</li>\n <li>• Policy proposal frameworks</li>\n <li>• Media talking points</li>\n <li>• Community workshop guides</li>\n <li>• Social media graphics</li>\n <li>• Case study summaries</li>\n </ul>\n </div>\n </div>\n </div>\n </div>\n\n <!-- CTA Section -->\n <div class=\"max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-16\">\n <div class=\"bg-gradient-to-r from-green-600 to-teal-600 rounded-2xl p-12 text-center text-white\">\n <h2 class=\"text-3xl font-bold mb-4\">Join the Movement</h2>\n <p class=\"text-xl mb-8 opacity-90\">\n Help build a future where AI preserves human agency and serves communities, not corporations.\n </p>\n <div class=\"flex justify-center space-x-4\">\n <a href=\"/docs.html\" class=\"bg-white text-green-600 px-8 py-3 rounded-lg font-semibold hover:bg-gray-100 transition\">\n Learn More\n </a>\n <a href=\"/implementer.html\" class=\"bg-green-700 text-white px-8 py-3 rounded-lg font-semibold hover:bg-green-800 transition border-2 border-white\">\n Implement Tractatus →\n </a>\n </div>\n </div>\n </div>\n\n <!-- Footer -->\n <footer class=\"bg-gray-900 text-gray-400 py-12\">\n <div class=\"max-w-7xl mx-auto px-4 sm:px-6 lg:px-8\">\n <div class=\"grid grid-cols-1 md:grid-cols-4 gap-8\">\n <div>\n <h3 class=\"text-white font-bold mb-4\">Tractatus Framework</h3>\n <p class=\"text-sm\">\n Preserving human agency through architectural constraints, not aspirational goals.\n </p>\n </div>\n <div>\n <h3 class=\"text-white font-bold mb-4\">Audience Paths</h3>\n <ul class=\"space-y-2 text-sm\">\n <li><a href=\"/researcher.html\" class=\"hover:text-white\">Researchers</a></li>\n <li><a href=\"/implementer.html\" class=\"hover:text-white\">Implementers</a></li>\n <li><a href=\"/advocate.html\" class=\"hover:text-white\">Advocates</a></li>\n </ul>\n </div>\n <div>\n <h3 class=\"text-white font-bold mb-4\">Resources</h3>\n <ul class=\"space-y-2 text-sm\">\n <li><a href=\"/docs.html\" class=\"hover:text-white\">Documentation</a></li>\n <li><a href=\"/demos/classification-demo.html\" class=\"hover:text-white\">Interactive Demos</a></li>\n <li><a href=\"/\" class=\"hover:text-white\">Home</a></li>\n </ul>\n </div>\n <div>\n <h3 class=\"text-white font-bold mb-4\">Community</h3>\n <ul class=\"space-y-2 text-sm\">\n <li><a href=\"/media-inquiry.html\" class=\"hover:text-white\">Media Inquiries</a></li>\n <li><a href=\"/case-submission.html\" class=\"hover:text-white\">Submit Case Study</a></li>\n </ul>\n </div>\n </div>\n <div class=\"mt-8 pt-8 border-t border-gray-800 text-center text-sm space-y-2\">\n <p class=\"text-gray-500\">Phase 1 Development - Local Prototype | Built with <a href=\"https://claude.ai/claude-code\" class=\"text-blue-400 hover:text-blue-300 transition\" target=\"_blank\" rel=\"noopener\">Claude Code</a></p>\n <p>© 2025 Tractatus AI Safety Framework. Licensed under <a href=\"https://www.apache.org/licenses/LICENSE-2.0\" class=\"text-blue-400 hover:text-blue-300 transition\" target=\"_blank\" rel=\"noopener\">Apache License 2.0</a>.</p>\n </div>\n </div>\n </footer>\n\n</body>\n</html>\n",
"inlineScripts": 0,
"totalStyleLength": 0,
"images": 0,
"externalCSS": 1,
"externalJS": 1,
"issues": []
},
{
"name": "About",
"url": "http://localhost:9000/about.html",
"statusCode": 200,
"firstByteTime": 1,
"totalTime": 1,
"size": 14506,
"data": "<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n <meta charset=\"UTF-8\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n <title>About | Tractatus AI Safety Framework</title>\n <meta name=\"description\" content=\"Learn about the Tractatus Framework: our mission, values, team, and commitment to preserving human agency through structural AI safety.\">\n <link rel=\"stylesheet\" href=\"/css/tailwind.css?v=1759833751\">\n <style>\n /* Accessibility: Skip link */\n .skip-link { position: absolute; left: -9999px; top: 0; }\n .skip-link:focus { left: 0; z-index: 100; background: white; padding: 1rem; border: 2px solid #3b82f6; }\n\n /* Accessibility: Focus indicators (WCAG 2.4.7) */\n a:focus, button:focus, input:focus, select:focus, textarea:focus {\n outline: 3px solid #3b82f6;\n outline-offset: 2px;\n }\n a:focus:not(:focus-visible) { outline: none; }\n a:focus-visible { outline: 3px solid #3b82f6; outline-offset: 2px; }\n </style>\n</head>\n<body class=\"bg-gray-50\">\n\n <!-- Skip Link for Keyboard Navigation -->\n <a href=\"#main-content\" class=\"skip-link\">Skip to main content</a>\n\n <!-- Navigation (injected by navbar.js) -->\n <script src=\"/js/components/navbar.js?v=1759875690\"></script>\n\n <!-- Hero Section -->\n <div class=\"bg-gradient-to-br from-blue-50 to-purple-50 py-20\">\n <div class=\"max-w-7xl mx-auto px-4 sm:px-6 lg:px-8\">\n <div class=\"text-center\">\n <h1 class=\"text-5xl font-bold text-gray-900 mb-6\">\n About Tractatus\n </h1>\n <p class=\"text-xl text-gray-600 max-w-3xl mx-auto\">\n A framework for AI safety through architectural constraints, preserving human agency where it matters most.\n </p>\n </div>\n </div>\n </div>\n\n <!-- Mission Section -->\n <main id=\"main-content\" class=\"max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 py-16\">\n <section class=\"mb-16\">\n <h2 class=\"text-3xl font-bold text-gray-900 mb-6\">Our Mission</h2>\n <div class=\"prose prose-lg text-gray-600\">\n <p>\n The Tractatus Framework exists to address a fundamental problem in AI safety: current approaches rely on training, fine-tuning, and corporate governance—all of which can fail, drift, or be overridden. We propose <strong>safety through architecture</strong>.\n </p>\n <p>\n Inspired by Ludwig Wittgenstein's <em>Tractatus Logico-Philosophicus</em>, our framework recognizes that some domains—values, ethics, cultural context, human agency—cannot be systematized. What cannot be systematized must not be automated. AI systems should have structural constraints that prevent them from crossing these boundaries.\n </p>\n <blockquote class=\"border-l-4 border-blue-600 pl-6 italic text-gray-700\">\n \"Whereof one cannot speak, thereof one must be silent.\"<br>\n — Ludwig Wittgenstein, <em>Tractatus</em> (§7)\n </blockquote>\n <p>\n Applied to AI: <strong>\"What cannot be systematized must not be automated.\"</strong>\n </p>\n </div>\n </section>\n\n <!-- Core Values -->\n <section class=\"mb-16\">\n <h2 class=\"text-3xl font-bold text-gray-900 mb-6\">Core Values</h2>\n <div class=\"space-y-6\">\n <div class=\"bg-white rounded-lg shadow-sm p-6 border-l-4 border-green-600\">\n <h3 class=\"text-xl font-bold text-gray-900 mb-3\">Sovereignty</h3>\n <p class=\"text-gray-600\">\n Individuals and communities must maintain control over decisions affecting their data, privacy, and values. AI systems must preserve human agency, not erode it.\n </p>\n </div>\n\n <div class=\"bg-white rounded-lg shadow-sm p-6 border-l-4 border-blue-600\">\n <h3 class=\"text-xl font-bold text-gray-900 mb-3\">Transparency</h3>\n <p class=\"text-gray-600\">\n All AI decisions must be explainable, auditable, and reversible. No black boxes. Users deserve to understand how and why systems make choices, and have power to override them.\n </p>\n </div>\n\n <div class=\"bg-white rounded-lg shadow-sm p-6 border-l-4 border-purple-600\">\n <h3 class=\"text-xl font-bold text-gray-900 mb-3\">Harmlessness</h3>\n <p class=\"text-gray-600\">\n AI systems must not cause harm through action or inaction. This includes preventing drift, detecting degradation, and enforcing boundaries against values erosion.\n </p>\n </div>\n\n <div class=\"bg-white rounded-lg shadow-sm p-6 border-l-4 border-orange-600\">\n <h3 class=\"text-xl font-bold text-gray-900 mb-3\">Community</h3>\n <p class=\"text-gray-600\">\n AI safety is a collective endeavor. We are committed to open collaboration, knowledge sharing, and empowering communities to shape the AI systems that affect their lives.\n </p>\n </div>\n </div>\n\n <div class=\"mt-8 text-center\">\n <a href=\"/about/values.html\" class=\"inline-block bg-blue-600 text-white px-6 py-3 rounded-lg font-semibold hover:bg-blue-700 transition\">\n Read Our Complete Values Statement →\n </a>\n </div>\n </section>\n\n <!-- How It Works -->\n <section class=\"mb-16\">\n <h2 class=\"text-3xl font-bold text-gray-900 mb-6\">How It Works</h2>\n <div class=\"prose prose-lg text-gray-600\">\n <p>\n The Tractatus Framework consists of five integrated components that work together to enforce structural safety:\n </p>\n </div>\n\n <div class=\"grid grid-cols-1 md:grid-cols-2 gap-6 mt-6\">\n <div class=\"bg-gray-50 rounded-lg p-6\">\n <h3 class=\"text-lg font-bold text-gray-900 mb-2\">InstructionPersistenceClassifier</h3>\n <p class=\"text-sm text-gray-600\">\n Classifies instructions by quadrant (Strategic, Operational, Tactical, System, Stochastic) and determines persistence level (HIGH/MEDIUM/LOW/VARIABLE).\n </p>\n </div>\n\n <div class=\"bg-gray-50 rounded-lg p-6\">\n <h3 class=\"text-lg font-bold text-gray-900 mb-2\">CrossReferenceValidator</h3>\n <p class=\"text-sm text-gray-600\">\n Validates AI actions against stored instructions to prevent pattern recognition bias (like the 27027 incident where AI's training patterns immediately overrode user's explicit \"port 27027\" instruction).\n </p>\n </div>\n\n <div class=\"bg-gray-50 rounded-lg p-6\">\n <h3 class=\"text-lg font-bold text-gray-900 mb-2\">BoundaryEnforcer</h3>\n <p class=\"text-sm text-gray-600\">\n Ensures AI never makes values decisions without human approval. Privacy trade-offs, user agency, cultural context—these require human judgment.\n </p>\n </div>\n\n <div class=\"bg-gray-50 rounded-lg p-6\">\n <h3 class=\"text-lg font-bold text-gray-900 mb-2\">ContextPressureMonitor</h3>\n <p class=\"text-sm text-gray-600\">\n Detects when session conditions increase error probability (token pressure, message length, task complexity) and adjusts behavior or suggests handoff.\n </p>\n </div>\n\n <div class=\"bg-gray-50 rounded-lg p-6\">\n <h3 class=\"text-lg font-bold text-gray-900 mb-2\">MetacognitiveVerifier</h3>\n <p class=\"text-sm text-gray-600\">\n AI self-checks complex reasoning before proposing actions. Evaluates alignment, coherence, completeness, safety, and alternatives.\n </p>\n </div>\n </div>\n\n <div class=\"mt-8 text-center\">\n <a href=\"/docs.html\" class=\"inline-block bg-purple-600 text-white px-6 py-3 rounded-lg font-semibold hover:bg-purple-700 transition\">\n Read Technical Documentation →\n </a>\n </div>\n </section>\n\n <!-- Origin Story -->\n <section class=\"mb-16\">\n <h2 class=\"text-3xl font-bold text-gray-900 mb-6\">Origin Story</h2>\n <div class=\"prose prose-lg text-gray-600\">\n <p>\n The Tractatus Framework emerged from real-world AI failures experienced during extended Claude Code sessions. The \"27027 incident\"—where AI's training patterns immediately overrode an explicit instruction (user said \"port 27027\", AI used \"port 27017\")—revealed that traditional safety approaches were insufficient. This wasn't forgetting; it was pattern recognition bias autocorrecting the user.\n </p>\n <p>\n After documenting multiple failure modes (pattern recognition bias, values drift, silent degradation), we recognized a pattern: AI systems lacked structural constraints. They could theoretically \"learn\" safety, but in practice their training patterns overrode explicit instructions, and the problem gets worse as capabilities increase.\n </p>\n <p>\n The solution wasn't better training—it was architecture. Drawing inspiration from Wittgenstein's insight that some things lie beyond the limits of language (and thus systematization), we built a framework that enforces boundaries through structure, not aspiration.\n </p>\n </div>\n </section>\n\n <!-- License & Contribution -->\n <section class=\"mb-16\">\n <h2 class=\"text-3xl font-bold text-gray-900 mb-6\">License & Contribution</h2>\n <div class=\"prose prose-lg text-gray-600\">\n <p>\n The Tractatus Framework is open source under the <strong>Apache License 2.0</strong>. We encourage:\n </p>\n <ul>\n <li>Academic research and validation studies</li>\n <li>Implementation in production AI systems</li>\n <li>Submission of failure case studies</li>\n <li>Theoretical extensions and improvements</li>\n <li>Community collaboration and knowledge sharing</li>\n </ul>\n <p>\n The framework is intentionally permissive because AI safety benefits from transparency and collective improvement, not proprietary control.\n </p>\n <h3 class=\"text-xl font-bold text-gray-900 mt-6 mb-3\">Why Apache 2.0?</h3>\n <p>\n We chose Apache 2.0 over MIT because it provides:\n </p>\n <ul>\n <li><strong>Patent Protection:</strong> Explicit patent grant protects users from patent litigation by contributors</li>\n <li><strong>Contributor Clarity:</strong> Clear terms for how contributions are licensed</li>\n <li><strong>Permissive Use:</strong> Like MIT, allows commercial use and inclusion in proprietary products</li>\n <li><strong>Community Standard:</strong> Widely used in AI/ML projects (TensorFlow, PyTorch, Apache Spark)</li>\n </ul>\n <p class=\"mt-4\">\n <a href=\"/LICENSE\" class=\"text-blue-600 hover:text-blue-700 font-medium\">View full Apache 2.0 License →</a>\n </p>\n </div>\n </section>\n </div>\n\n <!-- CTA Section -->\n <div class=\"bg-gradient-to-r from-blue-600 to-purple-600 py-16\">\n <div class=\"max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 text-center text-white\">\n <h2 class=\"text-3xl font-bold mb-4\">Join the Movement</h2>\n <p class=\"text-xl mb-8 opacity-90\">\n Help build AI systems that preserve human agency through architectural guarantees.\n </p>\n <div class=\"flex justify-center space-x-4\">\n <a href=\"/researcher.html\" class=\"bg-white text-blue-600 px-8 py-3 rounded-lg font-semibold hover:bg-gray-100 transition\">\n For Researchers\n </a>\n <a href=\"/implementer.html\" class=\"bg-blue-700 text-white px-8 py-3 rounded-lg font-semibold hover:bg-blue-800 transition border-2 border-white\">\n For Implementers\n </a>\n <a href=\"/advocate.html\" class=\"bg-blue-700 text-white px-8 py-3 rounded-lg font-semibold hover:bg-blue-800 transition border-2 border-white\">\n For Advocates\n </a>\n </div>\n </div>\n </div>\n\n <!-- Footer with Te Tiriti Acknowledgment -->\n <footer class=\"bg-gray-900 text-gray-400 py-12\">\n <div class=\"max-w-7xl mx-auto px-4 sm:px-6 lg:px-8\">\n <div class=\"grid grid-cols-1 md:grid-cols-4 gap-8\">\n <div>\n <h3 class=\"text-white font-bold mb-4\">Tractatus Framework</h3>\n <p class=\"text-sm\">\n Preserving human agency through architectural constraints, not aspirational goals.\n </p>\n </div>\n <div>\n <h3 class=\"text-white font-bold mb-4\">Audience Paths</h3>\n <ul class=\"space-y-2 text-sm\">\n <li><a href=\"/researcher.html\" class=\"hover:text-white transition\">Researchers</a></li>\n <li><a href=\"/implementer.html\" class=\"hover:text-white transition\">Implementers</a></li>\n <li><a href=\"/advocate.html\" class=\"hover:text-white transition\">Advocates</a></li>\n </ul>\n </div>\n <div>\n <h3 class=\"text-white font-bold mb-4\">Resources</h3>\n <ul class=\"space-y-2 text-sm\">\n <li><a href=\"/docs.html\" class=\"hover:text-white transition\">Documentation</a></li>\n <li><a href=\"/demos/classification-demo.html\" class=\"hover:text-white transition\">Interactive Demos</a></li>\n <li><a href=\"/about.html\" class=\"hover:text-white transition\">About</a></li>\n <li><a href=\"/about/values.html\" class=\"hover:text-white transition\">Values</a></li>\n <li><a href=\"/media-inquiry.html\" class=\"hover:text-white transition\">Media Inquiries</a></li>\n <li><a href=\"/case-submission.html\" class=\"hover:text-white transition\">Submit Case Study</a></li>\n </ul>\n </div>\n <div>\n <h3 class=\"text-white font-bold mb-4\">Te Tiriti o Waitangi</h3>\n <p class=\"text-sm\">\n This framework is developed in Aotearoa New Zealand. We acknowledge <a href=\"/about/values.html#te-tiriti\" class=\"text-blue-400 hover:text-blue-300 transition\">Te Tiriti o Waitangi</a> and indigenous data sovereignty principles.\n </p>\n </div>\n </div>\n <div class=\"mt-8 pt-8 border-t border-gray-800 text-center text-sm space-y-2\">\n <p class=\"text-gray-500\">Phase 1 Development - Local Prototype | Built with <a href=\"https://claude.ai/claude-code\" class=\"text-blue-400 hover:text-blue-300 transition\" target=\"_blank\" rel=\"noopener\">Claude Code</a></p>\n <p>© 2025 Tractatus AI Safety Framework. Licensed under <a href=\"https://www.apache.org/licenses/LICENSE-2.0\" class=\"text-blue-400 hover:text-blue-300 transition\" target=\"_blank\" rel=\"noopener\">Apache License 2.0</a>. <a href=\"/about/values.html\" class=\"text-blue-400 hover:text-blue-300 transition\">Read our values</a>.</p>\n </div>\n </div>\n </footer>\n\n</body>\n</html>\n",
"inlineScripts": 0,
"totalStyleLength": 542,
"images": 0,
"externalCSS": 1,
"externalJS": 1,
"issues": []
},
{
"name": "Values",
"url": "http://localhost:9000/about/values.html",
"statusCode": 200,
"firstByteTime": 1,
"totalTime": 1,
"size": 23061,
"data": "<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n <meta charset=\"UTF-8\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n <title>Values & Principles | Tractatus AI Safety Framework</title>\n <meta name=\"description\" content=\"Our core values: sovereignty, transparency, harmlessness, and community. Including our commitment to Te Tiriti o Waitangi and indigenous data sovereignty.\">\n <link rel=\"stylesheet\" href=\"/css/tailwind.css?v=1759833751\">\n <style>\n html { scroll-behavior: smooth; }\n\n /* Accessibility: Skip link */\n .skip-link { position: absolute; left: -9999px; top: 0; }\n .skip-link:focus { left: 0; z-index: 100; background: white; padding: 1rem; border: 2px solid #3b82f6; }\n\n /* Accessibility: Focus indicators (WCAG 2.4.7) */\n a:focus, button:focus, input:focus, select:focus, textarea:focus {\n outline: 3px solid #3b82f6;\n outline-offset: 2px;\n }\n a:focus:not(:focus-visible) { outline: none; }\n a:focus-visible { outline: 3px solid #3b82f6; outline-offset: 2px; }\n </style>\n</head>\n<body class=\"bg-gray-50\">\n\n <!-- Skip Link for Keyboard Navigation -->\n <a href=\"#main-content\" class=\"skip-link\">Skip to main content</a>\n\n <!-- Navigation (injected by navbar.js) -->\n <script src=\"/js/components/navbar.js?v=1759875690\"></script>\n\n <!-- Hero Section -->\n <div class=\"bg-gradient-to-br from-purple-50 to-blue-50 py-20\">\n <div class=\"max-w-7xl mx-auto px-4 sm:px-6 lg:px-8\">\n <div class=\"text-center\">\n <h1 class=\"text-5xl font-bold text-gray-900 mb-6\">\n Values & Principles\n </h1>\n <p class=\"text-xl text-gray-600 max-w-3xl mx-auto\">\n The foundational values that guide the Tractatus Framework's development, governance, and community.\n </p>\n </div>\n </div>\n </div>\n\n <!-- Table of Contents -->\n <main id=\"main-content\" class=\"max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 py-8\">\n <div class=\"bg-white rounded-lg shadow-sm p-6\">\n <h2 class=\"text-lg font-bold text-gray-900 mb-4\">Contents</h2>\n <nav class=\"space-y-2\">\n <a href=\"#core-values\" class=\"block text-blue-600 hover:text-blue-700\">Core Values</a>\n <a href=\"#sovereignty\" class=\"block text-blue-600 hover:text-blue-700 pl-4\">• Sovereignty</a>\n <a href=\"#transparency\" class=\"block text-blue-600 hover:text-blue-700 pl-4\">• Transparency</a>\n <a href=\"#harmlessness\" class=\"block text-blue-600 hover:text-blue-700 pl-4\">• Harmlessness</a>\n <a href=\"#community\" class=\"block text-blue-600 hover:text-blue-700 pl-4\">• Community</a>\n <a href=\"#te-tiriti\" class=\"block text-blue-600 hover:text-blue-700\">Te Tiriti o Waitangi & Digital Sovereignty</a>\n <a href=\"#indigenous-data-sovereignty\" class=\"block text-blue-600 hover:text-blue-700\">Indigenous Data Sovereignty</a>\n <a href=\"#governance\" class=\"block text-blue-600 hover:text-blue-700\">Governance & Accountability</a>\n </nav>\n </div>\n </div>\n\n <!-- Main Content -->\n <div class=\"max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 py-8\">\n\n <!-- Core Values -->\n <section id=\"core-values\" class=\"mb-16\">\n <h2 class=\"text-3xl font-bold text-gray-900 mb-6\">Core Values</h2>\n <div class=\"prose prose-lg text-gray-600 mb-8\">\n <p>\n These four values form the foundation of the Tractatus Framework. They are not aspirational—they are architectural. The framework is designed to enforce these values through structure, not training.\n </p>\n </div>\n\n <!-- Sovereignty -->\n <div id=\"sovereignty\" class=\"mb-12 bg-white rounded-lg shadow-md p-8 border-l-4 border-green-600\">\n <h3 class=\"text-2xl font-bold text-gray-900 mb-4\">1. Sovereignty</h3>\n <p class=\"text-gray-600 mb-4\">\n <strong>Principle:</strong> Individuals and communities must maintain control over decisions affecting their data, privacy, values, and agency. AI systems must preserve human sovereignty, not erode it.\n </p>\n\n <h4 class=\"text-lg font-semibold text-gray-900 mb-2\">What This Means in Practice:</h4>\n <ul class=\"list-disc list-inside text-gray-600 space-y-2 mb-4\">\n <li>AI cannot make values trade-offs (e.g., privacy vs. convenience) without human approval</li>\n <li>Users can always override AI decisions</li>\n <li>No \"dark patterns\" or manipulative design that undermines agency</li>\n <li>Communities control their own data and AI systems</li>\n <li>No paternalistic \"AI knows best\" approaches</li>\n </ul>\n\n <h4 class=\"text-lg font-semibold text-gray-900 mb-2\">Framework Implementation:</h4>\n <ul class=\"list-disc list-inside text-gray-600 space-y-2\">\n <li><strong>BoundaryEnforcer</strong> blocks values decisions requiring human judgment</li>\n <li><strong>InstructionPersistenceClassifier</strong> respects STRATEGIC and HIGH persistence instructions</li>\n <li>All decisions are reversible and auditable</li>\n </ul>\n </div>\n\n <!-- Transparency -->\n <div id=\"transparency\" class=\"mb-12 bg-white rounded-lg shadow-md p-8 border-l-4 border-blue-600\">\n <h3 class=\"text-2xl font-bold text-gray-900 mb-4\">2. Transparency</h3>\n <p class=\"text-gray-600 mb-4\">\n <strong>Principle:</strong> All AI decisions must be explainable, auditable, and reversible. No black boxes. Users deserve to understand how and why systems make choices.\n </p>\n\n <h4 class=\"text-lg font-semibold text-gray-900 mb-2\">What This Means in Practice:</h4>\n <ul class=\"list-disc list-inside text-gray-600 space-y-2 mb-4\">\n <li>Every AI decision includes reasoning and evidence</li>\n <li>Users can inspect instruction history and classification</li>\n <li>All boundary checks and validations are logged</li>\n <li>No hidden optimization goals or secret constraints</li>\n <li>Source code is open and auditable</li>\n </ul>\n\n <h4 class=\"text-lg font-semibold text-gray-900 mb-2\">Framework Implementation:</h4>\n <ul class=\"list-disc list-inside text-gray-600 space-y-2\">\n <li><strong>CrossReferenceValidator</strong> shows which instruction conflicts with proposed action</li>\n <li><strong>MetacognitiveVerifier</strong> provides reasoning analysis and confidence scores</li>\n <li>All framework decisions include explanatory output</li>\n </ul>\n </div>\n\n <!-- Harmlessness -->\n <div id=\"harmlessness\" class=\"mb-12 bg-white rounded-lg shadow-md p-8 border-l-4 border-purple-600\">\n <h3 class=\"text-2xl font-bold text-gray-900 mb-4\">3. Harmlessness</h3>\n <p class=\"text-gray-600 mb-4\">\n <strong>Principle:</strong> AI systems must not cause harm through action or inaction. This includes preventing drift, detecting degradation, and enforcing boundaries against values erosion.\n </p>\n\n <h4 class=\"text-lg font-semibold text-gray-900 mb-2\">What This Means in Practice:</h4>\n <ul class=\"list-disc list-inside text-gray-600 space-y-2 mb-4\">\n <li>Prevent parameter contradictions (e.g., 27027 incident)</li>\n <li>Detect and halt values drift before deployment</li>\n <li>Monitor context pressure to catch silent degradation</li>\n <li>No irreversible actions without explicit human approval</li>\n <li>Fail safely: when uncertain, ask rather than assume</li>\n </ul>\n\n <h4 class=\"text-lg font-semibold text-gray-900 mb-2\">Framework Implementation:</h4>\n <ul class=\"list-disc list-inside text-gray-600 space-y-2\">\n <li><strong>ContextPressureMonitor</strong> detects when error probability increases</li>\n <li><strong>BoundaryEnforcer</strong> prevents values drift</li>\n <li><strong>CrossReferenceValidator</strong> catches contradictions before execution</li>\n </ul>\n </div>\n\n <!-- Community -->\n <div id=\"community\" class=\"mb-12 bg-white rounded-lg shadow-md p-8 border-l-4 border-orange-600\">\n <h3 class=\"text-2xl font-bold text-gray-900 mb-4\">4. Community</h3>\n <p class=\"text-gray-600 mb-4\">\n <strong>Principle:</strong> AI safety is a collective endeavor, not a corporate product. Communities must have tools, knowledge, and agency to shape AI systems affecting their lives.\n </p>\n\n <h4 class=\"text-lg font-semibold text-gray-900 mb-2\">What This Means in Practice:</h4>\n <ul class=\"list-disc list-inside text-gray-600 space-y-2 mb-4\">\n <li>Open source framework under permissive Apache License 2.0 (with patent protection)</li>\n <li>Accessible documentation and educational resources</li>\n <li>Support for academic research and validation studies</li>\n <li>Community contributions to case studies and improvements</li>\n <li>No paywalls, no vendor lock-in, no proprietary control</li>\n </ul>\n\n <h4 class=\"text-lg font-semibold text-gray-900 mb-2\">Framework Implementation:</h4>\n <ul class=\"list-disc list-inside text-gray-600 space-y-2\">\n <li>All code publicly available on GitHub</li>\n <li>Interactive demos for education and advocacy</li>\n <li>Three audience paths: researchers, implementers, advocates</li>\n </ul>\n </div>\n </section>\n\n <!-- Te Tiriti o Waitangi -->\n <section id=\"te-tiriti\" class=\"mb-16\">\n <h2 class=\"text-3xl font-bold text-gray-900 mb-6\">Te Tiriti o Waitangi & Digital Sovereignty</h2>\n\n <div class=\"bg-blue-50 border-l-4 border-blue-600 p-6 rounded-r-lg mb-8\">\n <p class=\"text-blue-900 mb-4\">\n <strong>Context:</strong> The Tractatus Framework is developed in Aotearoa New Zealand. We acknowledge Te Tiriti o Waitangi (the Treaty of Waitangi, 1840) as the founding document of this nation, and recognize the ongoing significance of tino rangatiratanga (self-determination) and kaitiakitanga (guardianship) in the digital realm.\n </p>\n <p class=\"text-blue-900\">\n This acknowledgment is not performative. Digital sovereignty—the principle that communities control their own data and technology—has deep roots in indigenous frameworks that predate Western tech by centuries.\n </p>\n </div>\n\n <h3 class=\"text-xl font-bold text-gray-900 mb-4\">Why This Matters for AI Safety</h3>\n <div class=\"prose prose-lg text-gray-600 mb-6\">\n <p>\n Te Tiriti o Waitangi establishes principles of partnership, protection, and participation. These principles directly inform the Tractatus Framework's approach to digital sovereignty:\n </p>\n <ul class=\"list-disc list-inside space-y-2\">\n <li><strong>Rangatiratanga (sovereignty):</strong> Communities must control decisions affecting their data and values</li>\n <li><strong>Kaitiakitanga (guardianship):</strong> AI systems must be stewards, not exploiters, of data and knowledge</li>\n <li><strong>Mana (authority & dignity):</strong> Technology must respect human dignity and cultural context</li>\n <li><strong>Whanaungatanga (relationships):</strong> AI safety is collective, not individual—relationships matter</li>\n </ul>\n </div>\n\n <h3 class=\"text-xl font-bold text-gray-900 mb-4\">Our Approach</h3>\n <div class=\"prose prose-lg text-gray-600 mb-6\">\n <p>\n We do not claim to speak for Māori or indigenous communities. Instead, we:\n </p>\n <ul class=\"list-disc list-inside space-y-2\">\n <li><strong>Follow established frameworks:</strong> We align with <em>Te Mana Raraunga</em> (Māori Data Sovereignty Network) and CARE Principles for Indigenous Data Governance</li>\n <li><strong>Respect without tokenism:</strong> Te Tiriti forms part of our strategic foundation, not a superficial overlay</li>\n <li><strong>Avoid premature engagement:</strong> We will not approach Māori organizations for endorsement until we have demonstrated value and impact</li>\n <li><strong>Document and learn:</strong> We study indigenous data sovereignty principles and incorporate them architecturally</li>\n </ul>\n </div>\n\n <div class=\"bg-gray-100 rounded-lg p-6\">\n <h4 class=\"text-lg font-semibold text-gray-900 mb-3\">Te Tiriti Principles in Practice</h4>\n <div class=\"space-y-4 text-sm text-gray-700\">\n <div class=\"flex items-start\">\n <div class=\"w-8 h-8 bg-green-100 rounded-full flex items-center justify-center mr-3 flex-shrink-0 mt-1\">\n <span class=\"text-green-700 font-bold\">✓</span>\n </div>\n <div>\n <strong>Partnership:</strong> AI systems should be developed in partnership with affected communities, not imposed upon them.\n </div>\n </div>\n <div class=\"flex items-start\">\n <div class=\"w-8 h-8 bg-green-100 rounded-full flex items-center justify-center mr-3 flex-shrink-0 mt-1\">\n <span class=\"text-green-700 font-bold\">✓</span>\n </div>\n <div>\n <strong>Protection:</strong> The framework protects against values erosion, ensuring cultural contexts are not overridden by AI assumptions.\n </div>\n </div>\n <div class=\"flex items-start\">\n <div class=\"w-8 h-8 bg-green-100 rounded-full flex items-center justify-center mr-3 flex-shrink-0 mt-1\">\n <span class=\"text-green-700 font-bold\">✓</span>\n </div>\n <div>\n <strong>Participation:</strong> Communities maintain agency over AI decisions affecting their data and values.\n </div>\n </div>\n </div>\n </div>\n </section>\n\n <!-- Indigenous Data Sovereignty -->\n <section id=\"indigenous-data-sovereignty\" class=\"mb-16\">\n <h2 class=\"text-3xl font-bold text-gray-900 mb-6\">Indigenous Data Sovereignty</h2>\n\n <div class=\"prose prose-lg text-gray-600 mb-6\">\n <p>\n Indigenous data sovereignty is the principle that indigenous peoples have the right to control the collection, ownership, and application of their own data. This goes beyond privacy—it's about self-determination in the digital age.\n </p>\n </div>\n\n <h3 class=\"text-xl font-bold text-gray-900 mb-4\">CARE Principles for Indigenous Data Governance</h3>\n <p class=\"text-gray-600 mb-4\">\n The Tractatus Framework aligns with the <a href=\"https://www.gida-global.org/care\" class=\"text-blue-600 hover:text-blue-700 underline\" target=\"_blank\" rel=\"noopener\">CARE Principles</a>, developed by indigenous data governance experts:\n </p>\n\n <div class=\"grid grid-cols-1 md:grid-cols-2 gap-6 mb-8\">\n <div class=\"bg-white rounded-lg shadow-sm p-6 border-l-4 border-teal-500\">\n <h4 class=\"text-lg font-bold text-gray-900 mb-2\">Collective Benefit</h4>\n <p class=\"text-sm text-gray-600\">\n Data ecosystems shall be designed and function in ways that enable Indigenous Peoples to derive benefit from the data.\n </p>\n </div>\n\n <div class=\"bg-white rounded-lg shadow-sm p-6 border-l-4 border-blue-500\">\n <h4 class=\"text-lg font-bold text-gray-900 mb-2\">Authority to Control</h4>\n <p class=\"text-sm text-gray-600\">\n Indigenous Peoples' rights and interests in Indigenous data must be recognized and their authority to control such data be empowered.\n </p>\n </div>\n\n <div class=\"bg-white rounded-lg shadow-sm p-6 border-l-4 border-purple-500\">\n <h4 class=\"text-lg font-bold text-gray-900 mb-2\">Responsibility</h4>\n <p class=\"text-sm text-gray-600\">\n Those working with Indigenous data have a responsibility to share how data are used to support Indigenous Peoples' self-determination and collective benefit.\n </p>\n </div>\n\n <div class=\"bg-white rounded-lg shadow-sm p-6 border-l-4 border-green-500\">\n <h4 class=\"text-lg font-bold text-gray-900 mb-2\">Ethics</h4>\n <p class=\"text-sm text-gray-600\">\n Indigenous Peoples' rights and wellbeing should be the primary concern at all stages of the data life cycle and across the data ecosystem.\n </p>\n </div>\n </div>\n\n <h3 class=\"text-xl font-bold text-gray-900 mb-4\">Resources & Further Reading</h3>\n <div class=\"bg-gray-50 rounded-lg p-6\">\n <ul class=\"space-y-3\">\n <li>\n <a href=\"https://www.temanararaunga.maori.nz/\" class=\"text-blue-600 hover:text-blue-700 font-medium\" target=\"_blank\" rel=\"noopener\">\n Te Mana Raraunga – Māori Data Sovereignty Network →\n </a>\n <p class=\"text-sm text-gray-600 mt-1\">Leading network advancing Māori data sovereignty in Aotearoa.</p>\n </li>\n <li>\n <a href=\"https://www.gida-global.org/care\" class=\"text-blue-600 hover:text-blue-700 font-medium\" target=\"_blank\" rel=\"noopener\">\n CARE Principles for Indigenous Data Governance →\n </a>\n <p class=\"text-sm text-gray-600 mt-1\">International framework for indigenous data rights.</p>\n </li>\n </ul>\n </div>\n </section>\n\n <!-- Governance & Accountability -->\n <section id=\"governance\" class=\"mb-16\">\n <h2 class=\"text-3xl font-bold text-gray-900 mb-6\">Governance & Accountability</h2>\n\n <div class=\"prose prose-lg text-gray-600 mb-6\">\n <p>\n Values without enforcement are aspirations. The Tractatus Framework implements these values through architectural governance:\n </p>\n </div>\n\n <div class=\"space-y-6\">\n <div class=\"bg-white rounded-lg shadow-sm p-6\">\n <h3 class=\"text-lg font-bold text-gray-900 mb-3\">Strategic Review Protocol</h3>\n <p class=\"text-gray-600\">\n Quarterly reviews of framework alignment with stated values. Any drift from sovereignty, transparency, harmlessness, or community principles triggers mandatory correction.\n </p>\n </div>\n\n <div class=\"bg-white rounded-lg shadow-sm p-6\">\n <h3 class=\"text-lg font-bold text-gray-900 mb-3\">Values Alignment Framework</h3>\n <p class=\"text-gray-600\">\n All major decisions (architectural changes, partnerships, licensing) must pass values alignment check. If a decision would compromise any core value, it is rejected.\n </p>\n </div>\n\n <div class=\"bg-white rounded-lg shadow-sm p-6\">\n <h3 class=\"text-lg font-bold text-gray-900 mb-3\">Human Oversight Requirements</h3>\n <p class=\"text-gray-600\">\n AI-generated content (documentation, code examples, case studies) requires human approval before publication. No AI makes values decisions without human judgment.\n </p>\n </div>\n\n <div class=\"bg-white rounded-lg shadow-sm p-6\">\n <h3 class=\"text-lg font-bold text-gray-900 mb-3\">Community Accountability</h3>\n <p class=\"text-gray-600\">\n Open source development means community oversight. If we fail to uphold these values, the community can fork, modify, or create alternatives. This is by design.\n </p>\n </div>\n </div>\n </section>\n\n <!-- Commitment Statement -->\n <section class=\"mb-16\">\n <div class=\"bg-gradient-to-r from-purple-600 to-blue-600 rounded-2xl p-12 text-white\">\n <h2 class=\"text-3xl font-bold mb-4\">Our Commitment</h2>\n <div class=\"prose prose-lg text-white opacity-95\">\n <p class=\"mb-4\">\n These values are not negotiable. They form the architectural foundation of the Tractatus Framework. We commit to:\n </p>\n <ul class=\"space-y-2 mb-6\">\n <li>Preserving human sovereignty over values decisions</li>\n <li>Maintaining radical transparency in all framework operations</li>\n <li>Preventing harm through structural constraints, not promises</li>\n <li>Building and empowering community, not extracting from it</li>\n <li>Respecting Te Tiriti o Waitangi and indigenous data sovereignty</li>\n </ul>\n <p class=\"font-semibold\">\n When in doubt, we choose human agency over AI capability. Always.\n </p>\n </div>\n </div>\n </section>\n </div>\n\n <!-- Footer with Te Tiriti Acknowledgment -->\n <footer class=\"bg-gray-900 text-gray-400 py-12\">\n <div class=\"max-w-7xl mx-auto px-4 sm:px-6 lg:px-8\">\n <div class=\"grid grid-cols-1 md:grid-cols-4 gap-8\">\n <div>\n <h3 class=\"text-white font-bold mb-4\">Tractatus Framework</h3>\n <p class=\"text-sm\">\n Preserving human agency through architectural constraints, not aspirational goals.\n </p>\n </div>\n <div>\n <h3 class=\"text-white font-bold mb-4\">Audience Paths</h3>\n <ul class=\"space-y-2 text-sm\">\n <li><a href=\"/researcher.html\" class=\"hover:text-white transition\">Researchers</a></li>\n <li><a href=\"/implementer.html\" class=\"hover:text-white transition\">Implementers</a></li>\n <li><a href=\"/advocate.html\" class=\"hover:text-white transition\">Advocates</a></li>\n </ul>\n </div>\n <div>\n <h3 class=\"text-white font-bold mb-4\">Resources</h3>\n <ul class=\"space-y-2 text-sm\">\n <li><a href=\"/docs.html\" class=\"hover:text-white transition\">Documentation</a></li>\n <li><a href=\"/demos/classification-demo.html\" class=\"hover:text-white transition\">Interactive Demos</a></li>\n <li><a href=\"/about.html\" class=\"hover:text-white transition\">About</a></li>\n <li><a href=\"/about/values.html\" class=\"hover:text-white transition\">Values</a></li>\n <li><a href=\"/media-inquiry.html\" class=\"hover:text-white transition\">Media Inquiries</a></li>\n <li><a href=\"/case-submission.html\" class=\"hover:text-white transition\">Submit Case Study</a></li>\n </ul>\n </div>\n <div>\n <h3 class=\"text-white font-bold mb-4\">Te Tiriti o Waitangi</h3>\n <p class=\"text-sm\">\n This framework is developed in Aotearoa New Zealand. We acknowledge <a href=\"/about/values.html#te-tiriti\" class=\"text-blue-400 hover:text-blue-300 transition\">Te Tiriti o Waitangi</a> and indigenous data sovereignty principles.\n </p>\n </div>\n </div>\n <div class=\"mt-8 pt-8 border-t border-gray-800 text-center text-sm space-y-2\">\n <p class=\"text-gray-500\">Phase 1 Development - Local Prototype | Built with <a href=\"https://claude.ai/claude-code\" class=\"text-blue-400 hover:text-blue-300 transition\" target=\"_blank\" rel=\"noopener\">Claude Code</a></p>\n <p>© 2025 Tractatus AI Safety Framework. Licensed under <a href=\"https://www.apache.org/licenses/LICENSE-2.0\" class=\"text-blue-400 hover:text-blue-300 transition\" target=\"_blank\" rel=\"noopener\">Apache License 2.0</a>.</p>\n </div>\n </div>\n </footer>\n\n</body>\n</html>\n",
"inlineScripts": 0,
"totalStyleLength": 581,
"images": 0,
"externalCSS": 1,
"externalJS": 1,
"issues": []
},
{
"name": "Docs",
"url": "http://localhost:9000/docs.html",
"statusCode": 200,
"firstByteTime": 0,
"totalTime": 0,
"size": 8441,
"data": "<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n <meta charset=\"UTF-8\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n <title>Framework Documentation | Tractatus AI Safety</title>\n <link rel=\"stylesheet\" href=\"/css/tailwind.css?v=1759833751\">\n <style>\n html { scroll-behavior: smooth; }\n\n /* Accessibility: Skip link */\n .skip-link { position: absolute; left: -9999px; top: 0; }\n .skip-link:focus { left: 0; z-index: 100; background: white; padding: 1rem; border: 2px solid #3b82f6; }\n\n /* Accessibility: Focus indicators (WCAG 2.4.7) */\n a:focus, button:focus, input:focus, select:focus, textarea:focus {\n outline: 3px solid #3b82f6;\n outline-offset: 2px;\n }\n a:focus:not(:focus-visible) { outline: none; }\n a:focus-visible { outline: 3px solid #3b82f6; outline-offset: 2px; }\n\n /* Card-based layout */\n .doc-header {\n text-align: center;\n padding: 2rem 0;\n }\n\n .card-grid-container {\n width: 100%;\n overflow: visible;\n min-height: auto;\n }\n\n .category-section {\n margin-bottom: 2rem;\n }\n\n .card-grid {\n display: grid;\n gap: 1rem;\n width: 100%;\n }\n\n @media (min-width: 768px) {\n .card-grid {\n grid-template-columns: repeat(2, 1fr);\n }\n }\n\n @media (min-width: 1024px) {\n .card-grid {\n grid-template-columns: repeat(3, 1fr);\n }\n }\n\n .doc-card {\n min-height: 180px;\n display: flex;\n flex-direction: column;\n transition: all 0.2s ease;\n cursor: pointer;\n user-select: none;\n }\n\n .doc-card:hover {\n transform: translateY(-2px);\n box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);\n }\n\n .doc-card:active {\n transform: translateY(0);\n }\n\n .line-clamp-3 {\n display: -webkit-box;\n -webkit-line-clamp: 3;\n -webkit-box-orient: vertical;\n overflow: hidden;\n }\n\n /* Prose styles for modal content */\n .prose {\n max-width: none;\n line-height: 1.75;\n color: #374151;\n }\n\n .prose h1 {\n font-size: 1.875rem;\n font-weight: 700;\n color: #111827;\n margin-bottom: 1.5rem;\n margin-top: 2rem;\n line-height: 1.2;\n border-bottom: 2px solid #e5e7eb;\n padding-bottom: 0.5rem;\n }\n\n .prose h2 {\n font-size: 1.5rem;\n font-weight: 600;\n color: #111827;\n margin-bottom: 1rem;\n margin-top: 2rem;\n line-height: 1.3;\n border-bottom: 1px solid #e5e7eb;\n padding-bottom: 0.375rem;\n }\n\n .prose h3 {\n font-size: 1.25rem;\n font-weight: 600;\n color: #1f2937;\n margin-bottom: 0.75rem;\n margin-top: 1.5rem;\n line-height: 1.4;\n }\n\n .prose h4 {\n font-size: 1.125rem;\n font-weight: 600;\n color: #374151;\n margin-bottom: 0.5rem;\n margin-top: 1.25rem;\n line-height: 1.5;\n }\n\n .prose p {\n color: #4b5563;\n margin-bottom: 1.25rem;\n line-height: 1.8;\n font-size: 1rem;\n }\n\n .prose li {\n margin-bottom: 0.5rem;\n line-height: 1.75;\n color: #4b5563;\n }\n\n .prose code {\n background-color: #f3f4f6;\n padding: 0.125rem 0.375rem;\n border-radius: 0.25rem;\n font-size: 0.875rem;\n font-family: ui-monospace, 'Courier New', monospace;\n color: #1f2937;\n border: 1px solid #e5e7eb;\n }\n\n .prose pre {\n background-color: #1f2937;\n color: #f3f4f6;\n padding: 1.25rem;\n border-radius: 0.5rem;\n margin-bottom: 1.5rem;\n overflow-x: auto;\n border: 1px solid #374151;\n }\n\n .prose pre code {\n background-color: transparent;\n padding: 0;\n border: none;\n color: inherit;\n font-size: 0.875rem;\n }\n\n .prose ul {\n list-style-type: disc;\n padding-left: 1.75rem;\n margin-bottom: 1.25rem;\n color: #4b5563;\n }\n\n .prose ol {\n list-style-type: decimal;\n padding-left: 1.75rem;\n margin-bottom: 1.25rem;\n color: #4b5563;\n }\n\n .prose > h2:first-child {\n margin-top: 0;\n }\n\n /* Download links in sidebar */\n .doc-download-link {\n position: absolute;\n right: 0.5rem;\n top: 50%;\n transform: translateY(-50%);\n padding: 0.5rem;\n color: #3b82f6;\n background-color: transparent;\n border-radius: 0.25rem;\n transition: all 0.15s ease-in-out;\n display: flex;\n align-items: center;\n justify-content: center;\n text-decoration: none;\n z-index: 10;\n }\n\n .doc-download-link:hover {\n color: #1d4ed8;\n background-color: #dbeafe;\n }\n\n .doc-download-link svg {\n width: 1.25rem;\n height: 1.25rem;\n display: block;\n }\n\n /* Document list container */\n #document-list .relative,\n #document-list > div {\n position: relative !important;\n }\n\n .doc-link {\n padding-right: 3rem !important;\n display: block;\n width: 100%;\n }\n\n /* Modal styles */\n #section-modal {\n position: fixed;\n inset: 0;\n background-color: rgba(0, 0, 0, 0.5);\n z-index: 9999;\n display: none;\n align-items: center;\n justify-content: center;\n padding: 1rem;\n }\n\n #section-modal.show {\n display: flex !important;\n animation: fadeIn 0.2s ease-out;\n }\n\n #section-modal > div {\n display: flex;\n flex-direction: column;\n max-height: 90vh;\n width: 100%;\n max-width: 56rem;\n background-color: white;\n border-radius: 0.5rem;\n box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);\n animation: slideUp 0.3s ease-out;\n }\n\n #modal-content {\n flex: 1 1 0%;\n overflow-y: auto;\n overflow-x: hidden;\n padding: 1.5rem;\n min-height: 0;\n }\n\n @keyframes fadeIn {\n from {\n opacity: 0;\n }\n to {\n opacity: 1;\n }\n }\n\n @keyframes slideUp {\n from {\n transform: translateY(20px);\n opacity: 0;\n }\n to {\n transform: translateY(0);\n opacity: 1;\n }\n }\n </style>\n</head>\n<body class=\"bg-gray-50\">\n\n <!-- Skip Link for Keyboard Navigation -->\n <a href=\"#main-content\" class=\"skip-link\">Skip to main content</a>\n\n <!-- Navigation (injected by navbar.js) -->\n <script src=\"/js/components/navbar.js?v=1759875690\"></script>\n\n <!-- Page Header -->\n <div class=\"bg-white border-b border-gray-200\">\n <div class=\"max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8\">\n <h1 class=\"text-3xl font-bold text-gray-900\">Framework Documentation</h1>\n <p class=\"text-gray-600 mt-2\">Technical specifications, guides, and reference materials</p>\n </div>\n </div>\n\n <!-- Main Layout -->\n <main id=\"main-content\" class=\"max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8\">\n <div class=\"grid grid-cols-1 lg:grid-cols-4 gap-8\">\n\n <!-- Sidebar -->\n <aside class=\"lg:col-span-1\">\n <div class=\"bg-white rounded-lg shadow-sm border border-gray-200 p-4 sticky top-24\">\n <h3 class=\"font-semibold text-gray-900 mb-3\">Documents</h3>\n <div id=\"document-list\" class=\"space-y-1\">\n <div class=\"text-sm text-gray-500\">Loading...</div>\n </div>\n\n <div class=\"mt-6 pt-4 border-t border-gray-200\">\n <h4 class=\"font-semibold text-gray-900 mb-3 text-sm\">Table of Contents</h4>\n <div id=\"toc\" class=\"text-sm space-y-1\">\n <div class=\"text-gray-500\">Select a document</div>\n </div>\n </div>\n </div>\n </aside>\n\n <!-- Main Content -->\n <main class=\"lg:col-span-3\">\n <div id=\"document-content\" class=\"bg-white rounded-lg shadow-sm border border-gray-200 p-8\">\n <div class=\"text-center py-12\">\n <svg class=\"mx-auto h-12 w-12 text-gray-400\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n <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\"/>\n </svg>\n <h3 class=\"mt-2 text-lg font-medium text-gray-900\">Select a Document</h3>\n <p class=\"mt-1 text-sm text-gray-500\">Choose a document from the sidebar to begin reading</p>\n </div>\n </div>\n </main>\n\n </div>\n </div>\n\n\n <script src=\"/js/components/document-cards.js?v=1759874236\"></script>\n <script src=\"/js/docs-app.js?v=1759874236\"></script>\n\n</body>\n</html>\n",
"inlineScripts": 0,
"totalStyleLength": 5781,
"images": 0,
"externalCSS": 1,
"externalJS": 3,
"issues": [
"Large inline styles (5.6KB) - consider external CSS"
]
},
{
"name": "Media Inquiry",
"url": "http://localhost:9000/media-inquiry.html",
"statusCode": 200,
"firstByteTime": 0,
"totalTime": 0,
"size": 10526,
"data": "<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n <meta charset=\"UTF-8\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n <title>Media Inquiry | Tractatus AI Safety</title>\n <link rel=\"stylesheet\" href=\"/css/tailwind.css?v=1759835330\">\n <style>\n .form-group { margin-bottom: 1.5rem; }\n .form-label {\n display: block;\n font-weight: 600;\n color: #374151;\n margin-bottom: 0.5rem;\n }\n .form-input, .form-textarea {\n width: 100%;\n padding: 0.75rem;\n border: 1px solid #d1d5db;\n border-radius: 0.375rem;\n font-size: 1rem;\n transition: border-color 0.15s;\n }\n .form-input:focus, .form-textarea:focus {\n outline: none;\n border-color: #3b82f6;\n box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);\n }\n .form-textarea { min-height: 150px; resize: vertical; }\n .form-help { font-size: 0.875rem; color: #6b7280; margin-top: 0.25rem; }\n .required { color: #dc2626; }\n #success-message, #error-message {\n display: none;\n padding: 1rem;\n border-radius: 0.5rem;\n margin-bottom: 1.5rem;\n }\n #success-message {\n background-color: #d1fae5;\n border: 1px solid #10b981;\n color: #065f46;\n }\n #error-message {\n background-color: #fee2e2;\n border: 1px solid #ef4444;\n color: #991b1b;\n }\n\n /* Accessibility: Skip link */\n .skip-link { position: absolute; left: -9999px; top: 0; }\n .skip-link:focus { left: 0; z-index: 100; background: white; padding: 1rem; border: 2px solid #3b82f6; }\n\n /* Accessibility: Focus indicators (WCAG 2.4.7) */\n a:focus, button:focus, input:focus, select:focus, textarea:focus {\n outline: 3px solid #3b82f6;\n outline-offset: 2px;\n }\n a:focus:not(:focus-visible) { outline: none; }\n a:focus-visible { outline: 3px solid #3b82f6; outline-offset: 2px; }\n </style>\n</head>\n<body class=\"bg-gray-50\">\n\n <!-- Skip Link for Keyboard Navigation -->\n <a href=\"#main-content\" class=\"skip-link\">Skip to main content</a>\n\n <!-- Navigation (injected by navbar.js) -->\n <script src=\"/js/components/navbar.js?v=1759875690\"></script>\n\n <!-- Main Content -->\n <main id=\"main-content\" class=\"max-w-3xl mx-auto px-4 sm:px-6 lg:px-8 py-12\">\n\n <!-- Header -->\n <div class=\"mb-8\">\n <h1 class=\"text-3xl font-bold text-gray-900 mb-3\">Media Inquiry</h1>\n <p class=\"text-lg text-gray-600\">\n Press and media inquiries about the Tractatus Framework. We review all inquiries and respond promptly.\n </p>\n </div>\n\n <!-- Messages -->\n <div id=\"success-message\" role=\"alert\" aria-live=\"polite\"></div>\n <div id=\"error-message\" role=\"alert\" aria-live=\"assertive\"></div>\n\n <!-- Form -->\n <div class=\"bg-white rounded-lg shadow-sm border border-gray-200 p-8\">\n <form id=\"media-inquiry-form\">\n\n <!-- Contact Information -->\n <h2 class=\"text-xl font-semibold text-gray-900 mb-6\">Contact Information</h2>\n\n <div class=\"form-group\">\n <label for=\"contact-name\" class=\"form-label\">\n Your Name <span class=\"required\">*</span>\n </label>\n <input type=\"text\" id=\"contact-name\" name=\"contact.name\" class=\"form-input\" required aria-required=\"true\">\n </div>\n\n <div class=\"form-group\">\n <label for=\"contact-email\" class=\"form-label\">\n Email Address <span class=\"required\">*</span>\n </label>\n <input type=\"email\" id=\"contact-email\" name=\"contact.email\" class=\"form-input\" required aria-required=\"true\">\n </div>\n\n <div class=\"form-group\">\n <label for=\"contact-outlet\" class=\"form-label\">\n Media Outlet/Organization <span class=\"required\">*</span>\n </label>\n <input type=\"text\" id=\"contact-outlet\" name=\"contact.outlet\" class=\"form-input\" required aria-required=\"true\" aria-describedby=\"outlet-help\">\n <p id=\"outlet-help\" class=\"form-help\">Publication, website, podcast, or organization you represent</p>\n </div>\n\n <div class=\"form-group\">\n <label for=\"contact-phone\" class=\"form-label\">\n Phone Number (optional)\n </label>\n <input type=\"tel\" id=\"contact-phone\" name=\"contact.phone\" class=\"form-input\">\n </div>\n\n <!-- Inquiry Details -->\n <h2 class=\"text-xl font-semibold text-gray-900 mb-6 mt-8\">Inquiry Details</h2>\n\n <div class=\"form-group\">\n <label for=\"inquiry-subject\" class=\"form-label\">\n Subject <span class=\"required\">*</span>\n </label>\n <input type=\"text\" id=\"inquiry-subject\" name=\"inquiry.subject\" class=\"form-input\" required aria-required=\"true\">\n </div>\n\n <div class=\"form-group\">\n <label for=\"inquiry-message\" class=\"form-label\">\n Message <span class=\"required\">*</span>\n </label>\n <textarea id=\"inquiry-message\" name=\"inquiry.message\" class=\"form-textarea\" required aria-required=\"true\"></textarea>\n </div>\n\n <div class=\"form-group\">\n <label for=\"inquiry-deadline\" class=\"form-label\">\n Deadline (if applicable)\n </label>\n <input type=\"datetime-local\" id=\"inquiry-deadline\" name=\"inquiry.deadline\" class=\"form-input\" aria-describedby=\"deadline-help\">\n <p id=\"deadline-help\" class=\"form-help\">When do you need a response by?</p>\n </div>\n\n <!-- Submit Button -->\n <div class=\"mt-8\">\n <button type=\"submit\" id=\"submit-button\" class=\"w-full bg-blue-600 text-white px-6 py-3 rounded-lg font-semibold hover:bg-blue-700 transition\">\n Submit Inquiry\n </button>\n <p class=\"form-help mt-3 text-center\">\n We review all media inquiries and typically respond within 24-48 hours.\n </p>\n </div>\n\n </form>\n </div>\n\n <!-- Privacy Note -->\n <div class=\"mt-6 text-sm text-gray-600 text-center\">\n <p>\n Your contact information is handled according to our\n <a href=\"/about/values.html\" class=\"text-blue-600 hover:text-blue-700\">privacy principles</a>.\n We never share media inquiries with third parties.\n </p>\n </div>\n\n </main>\n\n <!-- Footer -->\n <footer class=\"bg-gray-900 text-gray-300 mt-16 py-12\">\n <div class=\"max-w-7xl mx-auto px-4 sm:px-6 lg:px-8\">\n <div class=\"grid grid-cols-1 md:grid-cols-3 gap-8\">\n <div>\n <h3 class=\"text-white font-semibold mb-4\">Tractatus Framework</h3>\n <p class=\"text-sm\">\n AI safety through architectural constraints and human agency preservation.\n </p>\n </div>\n <div>\n <h3 class=\"text-white font-semibold mb-4\">Quick Links</h3>\n <ul class=\"space-y-2 text-sm\">\n <li><a href=\"/docs.html\" class=\"hover:text-white transition\">Documentation</a></li>\n <li><a href=\"/about.html\" class=\"hover:text-white transition\">About</a></li>\n <li><a href=\"/about/values.html\" class=\"hover:text-white transition\">Values</a></li>\n </ul>\n </div>\n <div>\n <h3 class=\"text-white font-semibold mb-4\">Contact</h3>\n <ul class=\"space-y-2 text-sm\">\n <li><a href=\"/media-inquiry.html\" class=\"hover:text-white transition\">Media Inquiries</a></li>\n <li><a href=\"/case-submission.html\" class=\"hover:text-white transition\">Submit Case Study</a></li>\n </ul>\n </div>\n </div>\n <div class=\"mt-8 pt-8 border-t border-gray-800 text-center text-sm space-y-2\">\n <p class=\"text-gray-500\">Phase 1 Development - Local Prototype | Built with <a href=\"https://claude.ai/claude-code\" class=\"text-blue-400 hover:text-blue-300 transition\" target=\"_blank\" rel=\"noopener\">Claude Code</a></p>\n <p>© 2025 Tractatus AI Safety Framework. Licensed under <a href=\"https://www.apache.org/licenses/LICENSE-2.0\" class=\"text-blue-400 hover:text-blue-300 transition\" target=\"_blank\" rel=\"noopener\">Apache License 2.0</a>.</p>\n </div>\n </div>\n </footer>\n\n <script>\n const form = document.getElementById('media-inquiry-form');\n const submitButton = document.getElementById('submit-button');\n const successMessage = document.getElementById('success-message');\n const errorMessage = document.getElementById('error-message');\n\n form.addEventListener('submit', async (e) => {\n e.preventDefault();\n\n // Hide previous messages\n successMessage.style.display = 'none';\n errorMessage.style.display = 'none';\n\n // Disable submit button\n submitButton.disabled = true;\n submitButton.textContent = 'Submitting...';\n\n // Collect form data\n const formData = {\n contact: {\n name: document.getElementById('contact-name').value,\n email: document.getElementById('contact-email').value,\n outlet: document.getElementById('contact-outlet').value,\n phone: document.getElementById('contact-phone').value || null\n },\n inquiry: {\n subject: document.getElementById('inquiry-subject').value,\n message: document.getElementById('inquiry-message').value,\n deadline: document.getElementById('inquiry-deadline').value || null,\n topic_areas: []\n }\n };\n\n try {\n const response = await fetch('/api/media/inquiries', {\n method: 'POST',\n headers: {\n 'Content-Type': 'application/json'\n },\n body: JSON.stringify(formData)\n });\n\n const data = await response.json();\n\n if (response.ok) {\n // Success\n successMessage.textContent = data.message || 'Thank you for your inquiry. We will review and respond shortly.';\n successMessage.style.display = 'block';\n form.reset();\n window.scrollTo({ top: 0, behavior: 'smooth' });\n } else {\n // Error\n errorMessage.textContent = data.message || 'An error occurred. Please try again.';\n errorMessage.style.display = 'block';\n window.scrollTo({ top: 0, behavior: 'smooth' });\n }\n\n } catch (error) {\n console.error('Submit error:', error);\n errorMessage.textContent = 'Network error. Please check your connection and try again.';\n errorMessage.style.display = 'block';\n window.scrollTo({ top: 0, behavior: 'smooth' });\n } finally {\n // Re-enable submit button\n submitButton.disabled = false;\n submitButton.textContent = 'Submit Inquiry';\n }\n });\n </script>\n\n</body>\n</html>\n",
"inlineScripts": 1,
"totalStyleLength": 1618,
"images": 0,
"externalCSS": 1,
"externalJS": 1,
"issues": []
},
{
"name": "Case Submission",
"url": "http://localhost:9000/case-submission.html",
"statusCode": 200,
"firstByteTime": 1,
"totalTime": 1,
"size": 13341,
"data": "<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n <meta charset=\"UTF-8\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n <title>Submit Case Study | Tractatus AI Safety</title>\n <link rel=\"stylesheet\" href=\"/css/tailwind.css?v=1759835330\">\n <style>\n /* Accessibility: Skip link */\n .skip-link { position: absolute; left: -9999px; top: 0; }\n .skip-link:focus { left: 0; z-index: 100; background: white; padding: 1rem; border: 2px solid #3b82f6; }\n\n /* Accessibility: Focus indicators (WCAG 2.4.7) */\n a:focus, button:focus, input:focus, select:focus, textarea:focus {\n outline: 3px solid #3b82f6;\n outline-offset: 2px;\n }\n a:focus:not(:focus-visible) { outline: none; }\n a:focus-visible { outline: 3px solid #3b82f6; outline-offset: 2px; }\n\n .form-group { margin-bottom: 1.5rem; }\n .form-label {\n display: block;\n font-weight: 600;\n color: #374151;\n margin-bottom: 0.5rem;\n }\n .form-input, .form-textarea, .form-select {\n width: 100%;\n padding: 0.75rem;\n border: 1px solid #d1d5db;\n border-radius: 0.375rem;\n font-size: 1rem;\n transition: border-color 0.15s;\n }\n .form-input:focus, .form-textarea:focus, .form-select:focus {\n outline: none;\n border-color: #3b82f6;\n box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);\n }\n .form-textarea { min-height: 150px; resize: vertical; }\n .form-help { font-size: 0.875rem; color: #6b7280; margin-top: 0.25rem; }\n .required { color: #dc2626; }\n .checkbox-group {\n display: flex;\n align-items: center;\n gap: 0.5rem;\n }\n .checkbox-group input[type=\"checkbox\"] {\n width: 1.25rem;\n height: 1.25rem;\n cursor: pointer;\n }\n #success-message, #error-message {\n display: none;\n padding: 1rem;\n border-radius: 0.5rem;\n margin-bottom: 1.5rem;\n }\n #success-message {\n background-color: #d1fae5;\n border: 1px solid #10b981;\n color: #065f46;\n }\n #error-message {\n background-color: #fee2e2;\n border: 1px solid #ef4444;\n color: #991b1b;\n }\n </style>\n</head>\n<body class=\"bg-gray-50\">\n\n <!-- Skip Link for Keyboard Navigation -->\n <a href=\"#main-content\" class=\"skip-link\">Skip to main content</a>\n\n <!-- Navigation (injected by navbar.js) -->\n <script src=\"/js/components/navbar.js?v=1759875690\"></script>\n\n <!-- Main Content -->\n <main id=\"main-content\" class=\"max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 py-12\">\n\n <!-- Header -->\n <div class=\"mb-8\">\n <h1 class=\"text-3xl font-bold text-gray-900 mb-3\">Submit Case Study</h1>\n <p class=\"text-lg text-gray-600 mb-4\">\n Share real-world examples of AI safety failures that could have been prevented by the Tractatus Framework.\n </p>\n <div class=\"bg-blue-50 border-l-4 border-blue-500 p-4 rounded\">\n <h3 class=\"text-blue-900 font-semibold mb-2\">What makes a good case study?</h3>\n <ul class=\"text-blue-800 text-sm space-y-1\">\n <li>• <strong>Documented failure:</strong> Real incident with evidence (not hypothetical)</li>\n <li>• <strong>Clear failure mode:</strong> Specific way the AI system went wrong</li>\n <li>• <strong>Tractatus relevance:</strong> Shows how framework boundaries could have helped</li>\n <li>• <strong>Public interest:</strong> Contributes to AI safety knowledge</li>\n </ul>\n </div>\n </div>\n\n <!-- Messages -->\n <div id=\"success-message\" role=\"alert\" aria-live=\"polite\"></div>\n <div id=\"error-message\" role=\"alert\" aria-live=\"assertive\"></div>\n\n <!-- Form -->\n <div class=\"bg-white rounded-lg shadow-sm border border-gray-200 p-8\">\n <form id=\"case-submission-form\">\n\n <!-- Submitter Information -->\n <h2 class=\"text-xl font-semibold text-gray-900 mb-6\">Your Information</h2>\n\n <div class=\"form-group\">\n <label for=\"submitter-name\" class=\"form-label\">\n Your Name <span class=\"required\">*</span>\n </label>\n <input type=\"text\" id=\"submitter-name\" name=\"submitter.name\" class=\"form-input\" required aria-required=\"true\">\n </div>\n\n <div class=\"form-group\">\n <label for=\"submitter-email\" class=\"form-label\">\n Email Address <span class=\"required\">*</span>\n </label>\n <input type=\"email\" id=\"submitter-email\" name=\"submitter.email\" class=\"form-input\" required aria-required=\"true\" aria-describedby=\"email-help\">\n <p id=\"email-help\" class=\"form-help\">We'll only use this to follow up on your submission</p>\n </div>\n\n <div class=\"form-group\">\n <label for=\"submitter-organization\" class=\"form-label\">\n Organization (optional)\n </label>\n <input type=\"text\" id=\"submitter-organization\" name=\"submitter.organization\" class=\"form-input\">\n </div>\n\n <div class=\"form-group\">\n <div class=\"checkbox-group\">\n <input type=\"checkbox\" id=\"submitter-public\" name=\"submitter.public\">\n <label for=\"submitter-public\" class=\"text-gray-700\">\n I consent to my name being published with this case study\n </label>\n </div>\n <p class=\"form-help ml-7\">Leave unchecked to remain anonymous</p>\n </div>\n\n <!-- Case Study Details -->\n <h2 class=\"text-xl font-semibold text-gray-900 mb-6 mt-8\">Case Study Details</h2>\n\n <div class=\"form-group\">\n <label for=\"case-title\" class=\"form-label\">\n Case Study Title <span class=\"required\">*</span>\n </label>\n <input type=\"text\" id=\"case-title\" name=\"case_study.title\" class=\"form-input\" required aria-required=\"true\" aria-describedby=\"title-help\">\n <p id=\"title-help\" class=\"form-help\">Brief, descriptive title (e.g., \"ChatGPT Port 27027 Failure\")</p>\n </div>\n\n <div class=\"form-group\">\n <label for=\"case-description\" class=\"form-label\">\n Detailed Description <span class=\"required\">*</span>\n </label>\n <textarea id=\"case-description\" name=\"case_study.description\" class=\"form-textarea\" required aria-required=\"true\" aria-describedby=\"description-help\"></textarea>\n <p id=\"description-help\" class=\"form-help\">What happened? Provide context, timeline, and outcomes</p>\n </div>\n\n <div class=\"form-group\">\n <label for=\"case-failure-mode\" class=\"form-label\">\n Failure Mode <span class=\"required\">*</span>\n </label>\n <textarea id=\"case-failure-mode\" name=\"case_study.failure_mode\" class=\"form-textarea\" required aria-required=\"true\" aria-describedby=\"failure-help\"></textarea>\n <p id=\"failure-help\" class=\"form-help\">\n How did the AI system fail? What specific behavior went wrong?\n </p>\n </div>\n\n <div class=\"form-group\">\n <label for=\"case-tractatus\" class=\"form-label\">\n Tractatus Applicability <span class=\"required\">*</span>\n </label>\n <textarea id=\"case-tractatus\" name=\"case_study.tractatus_applicability\" class=\"form-textarea\" required aria-required=\"true\" aria-describedby=\"tractatus-help\"></textarea>\n <p id=\"tractatus-help\" class=\"form-help\">\n Which Tractatus boundaries could have prevented this failure? (e.g., Section 12.1 Values, CrossReferenceValidator, etc.)\n </p>\n </div>\n\n <div class=\"form-group\">\n <label for=\"case-evidence\" class=\"form-label\">\n Evidence/Sources\n </label>\n <textarea id=\"case-evidence\" name=\"case_study.evidence\" class=\"form-textarea\" style=\"min-height: 100px;\"></textarea>\n <p class=\"form-help\">\n Links to documentation, screenshots, articles, or other evidence (one per line)\n </p>\n </div>\n\n <!-- Submit Button -->\n <div class=\"mt-8\">\n <button type=\"submit\" id=\"submit-button\" class=\"w-full bg-blue-600 text-white px-6 py-3 rounded-lg font-semibold hover:bg-blue-700 transition\">\n Submit Case Study\n </button>\n <p class=\"form-help mt-3 text-center\">\n We review all submissions. High-quality case studies are published with attribution (if consented).\n </p>\n </div>\n\n </form>\n </div>\n\n <!-- Privacy Note -->\n <div class=\"mt-6 text-sm text-gray-600 text-center\">\n <p>\n Your submission is handled according to our\n <a href=\"/about/values.html\" class=\"text-blue-600 hover:text-blue-700\">privacy principles</a>.\n All case studies undergo human review before publication.\n </p>\n </div>\n\n </div>\n\n <!-- Footer -->\n <footer class=\"bg-gray-900 text-gray-300 mt-16 py-12\">\n <div class=\"max-w-7xl mx-auto px-4 sm:px-6 lg:px-8\">\n <div class=\"grid grid-cols-1 md:grid-cols-3 gap-8\">\n <div>\n <h3 class=\"text-white font-semibold mb-4\">Tractatus Framework</h3>\n <p class=\"text-sm\">\n AI safety through architectural constraints and human agency preservation.\n </p>\n </div>\n <div>\n <h3 class=\"text-white font-semibold mb-4\">Quick Links</h3>\n <ul class=\"space-y-2 text-sm\">\n <li><a href=\"/docs.html\" class=\"hover:text-white transition\">Documentation</a></li>\n <li><a href=\"/about.html\" class=\"hover:text-white transition\">About</a></li>\n <li><a href=\"/about/values.html\" class=\"hover:text-white transition\">Values</a></li>\n </ul>\n </div>\n <div>\n <h3 class=\"text-white font-semibold mb-4\">Contact</h3>\n <ul class=\"space-y-2 text-sm\">\n <li><a href=\"/media-inquiry.html\" class=\"hover:text-white transition\">Media Inquiries</a></li>\n <li><a href=\"/case-submission.html\" class=\"hover:text-white transition\">Submit Case Study</a></li>\n </ul>\n </div>\n </div>\n <div class=\"mt-8 pt-8 border-t border-gray-800 text-center text-sm space-y-2\">\n <p class=\"text-gray-500\">Phase 1 Development - Local Prototype | Built with <a href=\"https://claude.ai/claude-code\" class=\"text-blue-400 hover:text-blue-300 transition\" target=\"_blank\" rel=\"noopener\">Claude Code</a></p>\n <p>© 2025 Tractatus AI Safety Framework. Licensed under <a href=\"https://www.apache.org/licenses/LICENSE-2.0\" class=\"text-blue-400 hover:text-blue-300 transition\" target=\"_blank\" rel=\"noopener\">Apache License 2.0</a>.</p>\n </div>\n </div>\n </footer>\n\n <script>\n const form = document.getElementById('case-submission-form');\n const submitButton = document.getElementById('submit-button');\n const successMessage = document.getElementById('success-message');\n const errorMessage = document.getElementById('error-message');\n\n form.addEventListener('submit', async (e) => {\n e.preventDefault();\n\n // Hide previous messages\n successMessage.style.display = 'none';\n errorMessage.style.display = 'none';\n\n // Disable submit button\n submitButton.disabled = true;\n submitButton.textContent = 'Submitting...';\n\n // Collect form data\n const evidenceText = document.getElementById('case-evidence').value;\n const evidence = evidenceText\n ? evidenceText.split('\\n').filter(line => line.trim())\n : [];\n\n const formData = {\n submitter: {\n name: document.getElementById('submitter-name').value,\n email: document.getElementById('submitter-email').value,\n organization: document.getElementById('submitter-organization').value || null,\n public: document.getElementById('submitter-public').checked\n },\n case_study: {\n title: document.getElementById('case-title').value,\n description: document.getElementById('case-description').value,\n failure_mode: document.getElementById('case-failure-mode').value,\n tractatus_applicability: document.getElementById('case-tractatus').value,\n evidence: evidence,\n attachments: []\n }\n };\n\n try {\n const response = await fetch('/api/cases/submit', {\n method: 'POST',\n headers: {\n 'Content-Type': 'application/json'\n },\n body: JSON.stringify(formData)\n });\n\n const data = await response.json();\n\n if (response.ok) {\n // Success\n successMessage.textContent = data.message || 'Thank you for your submission. We will review it shortly.';\n successMessage.style.display = 'block';\n form.reset();\n window.scrollTo({ top: 0, behavior: 'smooth' });\n } else {\n // Error\n errorMessage.textContent = data.message || 'An error occurred. Please try again.';\n errorMessage.style.display = 'block';\n window.scrollTo({ top: 0, behavior: 'smooth' });\n }\n\n } catch (error) {\n console.error('Submit error:', error);\n errorMessage.textContent = 'Network error. Please check your connection and try again.';\n errorMessage.style.display = 'block';\n window.scrollTo({ top: 0, behavior: 'smooth' });\n } finally {\n // Re-enable submit button\n submitButton.disabled = false;\n submitButton.textContent = 'Submit Case Study';\n }\n });\n </script>\n\n</body>\n</html>\n",
"inlineScripts": 1,
"totalStyleLength": 1866,
"images": 0,
"externalCSS": 1,
"externalJS": 1,
"issues": []
}
]
}
Reference in a new issue View git blame Copy permalink