6811605477
- Create korero-counter-arguments.html (STO-INN-0004) with styled critique cards - Remove umami-tracker.js and all references from HTML files - Update privacy.html Section 6 to reflect "No Analytics" policy Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
366 lines
18 KiB
HTML
366 lines
18 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Media Triage Transparency | Tractatus Framework</title>
|
|
<meta name="description" content="Transparent AI-powered media inquiry triage with 100% human oversight. See how the Tractatus framework governs AI analysis in practice.">
|
|
<link rel="stylesheet" href="/css/tailwind.css?v=1761163813">
|
|
<link rel="stylesheet" href="/css/tractatus-theme.min.css?v=1761163813">
|
|
<style>
|
|
/* Accessibility: Skip link */
|
|
.skip-link { position: absolute; left: -9999px; top: 0; }
|
|
.skip-link:focus { left: 0; z-index: 100; background: white; padding: 1rem; border: 2px solid #3b82f6; }
|
|
|
|
/* Accessibility: Focus indicators (WCAG 2.4.7) */
|
|
a:focus, button:focus, input:focus, select:focus, textarea:focus {
|
|
outline: 3px solid #3b82f6;
|
|
outline-offset: 2px;
|
|
}
|
|
a:focus:not(:focus-visible) { outline: none; }
|
|
a:focus-visible { outline: 3px solid #3b82f6; outline-offset: 2px; }
|
|
</style>
|
|
|
|
<!-- Auto-reload on service worker update -->
|
|
</head>
|
|
<body class="bg-gray-50">
|
|
|
|
<!-- Skip Link for Keyboard Navigation -->
|
|
<a href="#main-content" class="skip-link">Skip to main content</a>
|
|
|
|
<!-- Navigation (injected by navbar.js) -->
|
|
<script src="/js/components/navbar.js?v=1761163813"></script>
|
|
|
|
<!-- Hero Section -->
|
|
<div class="bg-gradient-to-br from-blue-50 to-indigo-50 py-20">
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
|
<div class="text-center">
|
|
<h1 class="text-5xl font-bold text-gray-900 mb-6">
|
|
Media Triage Transparency
|
|
</h1>
|
|
<p class="text-xl text-gray-600 max-w-3xl mx-auto mb-8">
|
|
Demonstrating AI-powered media inquiry triage with 100% human oversight. AI analyzes and suggests—humans decide.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Main Content -->
|
|
<div id="main-content" class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-16">
|
|
|
|
<!-- Governance Principles -->
|
|
<div class="bg-white rounded-lg shadow-lg p-8 mb-12">
|
|
<h2 class="text-2xl font-bold text-gray-900 mb-6">Tractatus Governance in Practice</h2>
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
|
|
<div class="flex items-start">
|
|
<div class="flex-shrink-0 w-10 h-10 bg-green-100 rounded-lg flex items-center justify-center mr-4">
|
|
<svg aria-hidden="true" class="w-6 h-6 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/>
|
|
</svg>
|
|
</div>
|
|
<div>
|
|
<h3 class="font-semibold text-gray-900 mb-1">AI Analyzes, Humans Decide</h3>
|
|
<p class="text-sm text-gray-600">AI suggests urgency, sensitivity, and talking points. Every response requires human approval.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="flex items-start">
|
|
<div class="flex-shrink-0 w-10 h-10 bg-blue-100 rounded-lg flex items-center justify-center mr-4">
|
|
<svg aria-hidden="true" class="w-6 h-6 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/>
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"/>
|
|
</svg>
|
|
</div>
|
|
<div>
|
|
<h3 class="font-semibold text-gray-900 mb-1">Full Transparency</h3>
|
|
<p class="text-sm text-gray-600">All AI reasoning is visible and auditable. No hidden decision-making.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="flex items-start">
|
|
<div class="flex-shrink-0 w-10 h-10 bg-red-100 rounded-lg flex items-center justify-center mr-4">
|
|
<svg aria-hidden="true" class="w-6 h-6 text-red-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"/>
|
|
</svg>
|
|
</div>
|
|
<div>
|
|
<h3 class="font-semibold text-gray-900 mb-1">BoundaryEnforcer Active</h3>
|
|
<p class="text-sm text-gray-600">AI cannot make values decisions. Topics involving strategy, ethics, or Te Tiriti require human judgment.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="flex items-start">
|
|
<div class="flex-shrink-0 w-10 h-10 bg-purple-100 rounded-lg flex items-center justify-center mr-4">
|
|
<svg aria-hidden="true" class="w-6 h-6 text-purple-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/>
|
|
</svg>
|
|
</div>
|
|
<div>
|
|
<h3 class="font-semibold text-gray-900 mb-1">No Auto-Responses</h3>
|
|
<p class="text-sm text-gray-600">0% automated responses. Every reply is written and approved by a human.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Statistics Loading State -->
|
|
<div id="loading-state" class="text-center py-12">
|
|
<div class="inline-block animate-spin rounded-full h-12 w-12 border-b-2 border-indigo-600 mb-4"></div>
|
|
<p class="text-gray-600">Loading transparency statistics...</p>
|
|
</div>
|
|
|
|
<!-- Statistics Content (hidden until loaded) -->
|
|
<div id="stats-content" class="hidden">
|
|
|
|
<!-- Key Metrics -->
|
|
<div class="mb-12">
|
|
<h2 class="text-2xl font-bold text-gray-900 mb-6">Triage Statistics</h2>
|
|
<div class="grid grid-cols-1 md:grid-cols-4 gap-6">
|
|
<!-- Total Triaged -->
|
|
<div class="bg-white rounded-lg shadow p-6">
|
|
<div class="flex items-center">
|
|
<div class="flex-shrink-0 w-12 h-12 bg-blue-100 rounded-lg flex items-center justify-center mr-4">
|
|
<svg aria-hidden="true" class="w-6 h-6 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2"/>
|
|
</svg>
|
|
</div>
|
|
<div>
|
|
<p class="text-sm font-medium text-gray-500">Inquiries Triaged</p>
|
|
<p id="stat-total" class="text-3xl font-bold text-gray-900">-</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Values Involvement -->
|
|
<div class="bg-white rounded-lg shadow p-6">
|
|
<div class="flex items-center">
|
|
<div class="flex-shrink-0 w-12 h-12 bg-red-100 rounded-lg flex items-center justify-center mr-4">
|
|
<svg aria-hidden="true" class="w-6 h-6 text-red-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"/>
|
|
</svg>
|
|
</div>
|
|
<div>
|
|
<p class="text-sm font-medium text-gray-500">Values-Sensitive</p>
|
|
<p id="stat-values" class="text-3xl font-bold text-gray-900">-</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Human Review Rate -->
|
|
<div class="bg-white rounded-lg shadow p-6">
|
|
<div class="flex items-center">
|
|
<div class="flex-shrink-0 w-12 h-12 bg-green-100 rounded-lg flex items-center justify-center mr-4">
|
|
<svg aria-hidden="true" class="w-6 h-6 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"/>
|
|
</svg>
|
|
</div>
|
|
<div>
|
|
<p class="text-sm font-medium text-gray-500">Human Review</p>
|
|
<p class="text-3xl font-bold text-green-600">100%</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Auto-Response Rate -->
|
|
<div class="bg-white rounded-lg shadow p-6">
|
|
<div class="flex items-center">
|
|
<div class="flex-shrink-0 w-12 h-12 bg-gray-100 rounded-lg flex items-center justify-center mr-4">
|
|
<svg aria-hidden="true" class="w-6 h-6 text-gray-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M18.364 18.364A9 9 0 005.636 5.636m12.728 12.728A9 9 0 015.636 5.636m12.728 12.728L5.636 5.636"/>
|
|
</svg>
|
|
</div>
|
|
<div>
|
|
<p class="text-sm font-medium text-gray-500">Auto-Responses</p>
|
|
<p class="text-3xl font-bold text-gray-600">0%</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Urgency Distribution -->
|
|
<div class="mb-12">
|
|
<h2 class="text-2xl font-bold text-gray-900 mb-6">Urgency Classification</h2>
|
|
<div class="bg-white rounded-lg shadow p-6">
|
|
<div class="space-y-4">
|
|
<!-- High Urgency -->
|
|
<div>
|
|
<div class="flex justify-between text-sm mb-1">
|
|
<span class="font-medium text-gray-700">High Urgency</span>
|
|
<span id="urgency-high-count" class="text-gray-600">- inquiries</span>
|
|
</div>
|
|
<div class="w-full bg-gray-200 rounded-full h-3">
|
|
<div id="urgency-high-bar" class="bg-red-500 h-3 rounded-full"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Medium Urgency -->
|
|
<div>
|
|
<div class="flex justify-between text-sm mb-1">
|
|
<span class="font-medium text-gray-700">Medium Urgency</span>
|
|
<span id="urgency-medium-count" class="text-gray-600">- inquiries</span>
|
|
</div>
|
|
<div class="w-full bg-gray-200 rounded-full h-3">
|
|
<div id="urgency-medium-bar" class="bg-yellow-500 h-3 rounded-full"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Low Urgency -->
|
|
<div>
|
|
<div class="flex justify-between text-sm mb-1">
|
|
<span class="font-medium text-gray-700">Low Urgency</span>
|
|
<span id="urgency-low-count" class="text-gray-600">- inquiries</span>
|
|
</div>
|
|
<div class="w-full bg-gray-200 rounded-full h-3">
|
|
<div id="urgency-low-bar" class="bg-green-500 h-3 rounded-full"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Topic Sensitivity Distribution -->
|
|
<div class="mb-12">
|
|
<h2 class="text-2xl font-bold text-gray-900 mb-6">Topic Sensitivity Analysis</h2>
|
|
<div class="bg-white rounded-lg shadow p-6">
|
|
<div class="space-y-4">
|
|
<!-- High Sensitivity -->
|
|
<div>
|
|
<div class="flex justify-between text-sm mb-1">
|
|
<span class="font-medium text-gray-700">High Sensitivity</span>
|
|
<span id="sensitivity-high-count" class="text-gray-600">- inquiries</span>
|
|
</div>
|
|
<div class="w-full bg-gray-200 rounded-full h-3">
|
|
<div id="sensitivity-high-bar" class="bg-red-500 h-3 rounded-full"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Medium Sensitivity -->
|
|
<div>
|
|
<div class="flex justify-between text-sm mb-1">
|
|
<span class="font-medium text-gray-700">Medium Sensitivity</span>
|
|
<span id="sensitivity-medium-count" class="text-gray-600">- inquiries</span>
|
|
</div>
|
|
<div class="w-full bg-gray-200 rounded-full h-3">
|
|
<div id="sensitivity-medium-bar" class="bg-yellow-500 h-3 rounded-full"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Low Sensitivity -->
|
|
<div>
|
|
<div class="flex justify-between text-sm mb-1">
|
|
<span class="font-medium text-gray-700">Low Sensitivity</span>
|
|
<span id="sensitivity-low-count" class="text-gray-600">- inquiries</span>
|
|
</div>
|
|
<div class="w-full bg-gray-200 rounded-full h-3">
|
|
<div id="sensitivity-low-bar" class="bg-green-500 h-3 rounded-full"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Framework Compliance Badges -->
|
|
<div class="mb-12">
|
|
<h2 class="text-2xl font-bold text-gray-900 mb-6">Framework Compliance</h2>
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
|
|
<div class="bg-green-50 border border-green-200 rounded-lg p-6">
|
|
<div class="flex items-center mb-3">
|
|
<svg class="w-8 h-8 text-green-600 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"/>
|
|
</svg>
|
|
<h3 class="text-lg font-bold text-green-900">BoundaryEnforcer Active</h3>
|
|
</div>
|
|
<p class="text-sm text-green-800">
|
|
<strong id="boundary-enforcements">-</strong> values-sensitive inquiries detected and escalated to human approval.
|
|
</p>
|
|
</div>
|
|
|
|
<div class="bg-blue-50 border border-blue-200 rounded-lg p-6">
|
|
<div class="flex items-center mb-3">
|
|
<svg class="w-8 h-8 text-blue-600 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/>
|
|
</svg>
|
|
<h3 class="text-lg font-bold text-blue-900">AI Model Used</h3>
|
|
</div>
|
|
<p class="text-sm text-blue-800">
|
|
Claude 3.5 Sonnet (claude-3-5-sonnet-20241022) powers all triage analysis.
|
|
</p>
|
|
</div>
|
|
|
|
<div class="bg-purple-50 border border-purple-200 rounded-lg p-6">
|
|
<div class="flex items-center mb-3">
|
|
<svg class="w-8 h-8 text-purple-600 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/>
|
|
</svg>
|
|
<h3 class="text-lg font-bold text-purple-900">Average Response Time</h3>
|
|
</div>
|
|
<p class="text-sm text-purple-800">
|
|
<strong id="avg-response-time">-</strong> hours suggested response time (AI recommendation, human decides).
|
|
</p>
|
|
</div>
|
|
|
|
<div class="bg-yellow-50 border border-yellow-200 rounded-lg p-6">
|
|
<div class="flex items-center mb-3">
|
|
<svg class="w-8 h-8 text-yellow-600 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/>
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"/>
|
|
</svg>
|
|
<h3 class="text-lg font-bold text-yellow-900">Full Transparency</h3>
|
|
</div>
|
|
<p class="text-sm text-yellow-800">
|
|
All AI reasoning, talking points, and draft responses are visible in the admin interface and audit logs.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- What This Demonstrates -->
|
|
<div class="bg-gradient-to-r from-indigo-50 to-purple-50 rounded-lg p-8">
|
|
<h2 class="text-2xl font-bold text-gray-900 mb-4">What This Demonstrates</h2>
|
|
<div class="space-y-3 text-gray-700">
|
|
<p>
|
|
<strong>Priority 4 of the Feature-Rich UI Implementation Plan:</strong> This media triage system showcases the Tractatus framework governing AI in real operational context.
|
|
</p>
|
|
<p>
|
|
<strong>AI Suggests, Humans Decide:</strong> The AI analyzes urgency, detects sensitivity, and generates draft responses—but never sends anything automatically. Every response requires human review and approval.
|
|
</p>
|
|
<p>
|
|
<strong>BoundaryEnforcer in Action:</strong> When inquiries touch on framework values, strategic direction, or Te Tiriti matters, the AI escalates immediately to human judgment. It cannot make these decisions.
|
|
</p>
|
|
<p>
|
|
<strong>Transparent by Design:</strong> This page proves the framework isn't just theory—it's operational, measurable, and auditable.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<!-- CTA Section -->
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-16">
|
|
<div class="bg-gradient-to-r from-blue-600 to-indigo-600 rounded-2xl p-12 text-center text-white">
|
|
<h2 class="text-3xl font-bold mb-4">Experience Tractatus in Action</h2>
|
|
<p class="text-xl mb-8 opacity-90">
|
|
See how architectural constraints preserve human agency in real-world AI systems.
|
|
</p>
|
|
<div class="flex justify-center space-x-4">
|
|
<a href="/implementer.html" class="bg-white text-blue-600 px-8 py-3 rounded-lg font-semibold hover:bg-gray-100 transition">
|
|
Implementation Guide
|
|
</a>
|
|
<a href="/docs.html" class="bg-blue-700 text-white px-8 py-3 rounded-lg font-semibold hover:bg-blue-800 transition border-2 border-white">
|
|
Read Documentation
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Footer -->
|
|
<script src="/js/media-triage-transparency.js?v=1761163813"></script>
|
|
|
|
<!-- Footer Component -->
|
|
<script src="/js/components/footer.js?v=1761163813"></script>
|
|
|
|
</body>
|
|
</html>
|