0b26e50e5b
Implemented three fully functional interactive demos showcasing the core Tractatus services in action. ## Interactive Demonstrations ### 1. Classification Demo (/demos/classification-demo.html) - **Purpose**: Demonstrate InstructionPersistenceClassifier - **Features**: - Real-time instruction classification - Visual quadrant display (STRATEGIC/OPERATIONAL/TACTICAL/SYSTEM/STOCHASTIC) - Persistence level visualization (HIGH/MEDIUM/LOW/VARIABLE) - Explicitness scoring with storage threshold - 5 example instructions for testing - **Educational Value**: Shows how instructions are analyzed and categorized ### 2. The 27027 Incident (/demos/27027-demo.html) - **Purpose**: Visualize real-world failure and Tractatus prevention - **Features**: - 8-step animated timeline - Progressive disclosure of incident - Code examples showing the error - Tractatus prevention mechanism explained - Playback controls with progress tracking - **Educational Value**: Concrete case study of context degradation failure ### 3. Boundary Enforcement Simulator (/demos/boundary-demo.html) - **Purpose**: Interactive decision boundary testing - **Features**: - 6 realistic scenarios (3 allowed, 3 blocked) - Real-time boundary checks - Visual ALLOWED/BLOCKED verdicts - Reasoning explanations - Alternative approaches for blocked decisions - Code examples for each scenario - **Educational Value**: Shows what can/cannot be automated ## Technical Implementation - **Pure JavaScript**: No frameworks, lightweight and fast - **Tailwind CSS**: Consistent styling across all demos - **Responsive Design**: Works on mobile and desktop - **Accessibility**: Semantic HTML, keyboard navigation - **Mock Data**: Uses realistic classification logic ## User Experience Each demo includes: - Clear navigation between demos - Educational context and explanations - Interactive elements for hands-on learning - Code examples showing actual framework usage - Visual feedback for all interactions ## Documentation Integration Demos linked from: - Homepage hero section - Interactive demos section - Framework documentation ## Next Steps These demos provide: 1. ✅ Tangible framework demonstration 2. ✅ Educational value for all three audiences 3. ✅ Marketing material for framework adoption 4. ⚠️ Foundation for video tutorials (future) 5. ⚠️ Basis for conference presentations (future) --- 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
356 lines
13 KiB
HTML
356 lines
13 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>The 27027 Incident - Tractatus Framework</title>
|
|
<script src="https://cdn.tailwindcss.com"></script>
|
|
<style>
|
|
@keyframes fadeIn {
|
|
from { opacity: 0; transform: translateY(10px); }
|
|
to { opacity: 1; transform: translateY(0); }
|
|
}
|
|
.fade-in {
|
|
animation: fadeIn 0.5s ease-out;
|
|
}
|
|
.code-block {
|
|
@apply bg-gray-900 text-gray-100 p-4 rounded-lg font-mono text-sm overflow-x-auto;
|
|
}
|
|
.step-active {
|
|
@apply border-blue-500 bg-blue-50;
|
|
}
|
|
.step-complete {
|
|
@apply border-green-500 bg-green-50;
|
|
}
|
|
.step-error {
|
|
@apply border-red-500 bg-red-50;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body class="bg-gray-50">
|
|
|
|
<!-- Navigation -->
|
|
<nav class="bg-white border-b border-gray-200">
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
|
<div class="flex justify-between h-16">
|
|
<div class="flex items-center">
|
|
<a href="/" class="text-xl font-bold text-gray-900">Tractatus Framework</a>
|
|
<span class="ml-4 text-gray-400">|</span>
|
|
<span class="ml-4 text-gray-600">The 27027 Incident</span>
|
|
</div>
|
|
<div class="flex items-center space-x-6">
|
|
<a href="/demos/classification-demo.html" class="text-gray-600 hover:text-gray-900">Classification Demo</a>
|
|
<a href="/demos/boundary-demo.html" class="text-gray-600 hover:text-gray-900">Boundary Demo</a>
|
|
<a href="/" class="text-gray-600 hover:text-gray-900">Home</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
|
|
<div class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
|
|
|
|
<!-- Header -->
|
|
<div class="text-center mb-12">
|
|
<h1 class="text-4xl font-bold text-gray-900 mb-4">
|
|
The 27027 Incident
|
|
</h1>
|
|
<p class="text-xl text-gray-600 max-w-3xl mx-auto">
|
|
A real-world failure mode where AI contradicted an explicit instruction,
|
|
and how the Tractatus framework would have prevented it.
|
|
</p>
|
|
</div>
|
|
|
|
<!-- Timeline Container -->
|
|
<div class="grid grid-cols-1 lg:grid-cols-3 gap-8 mb-12">
|
|
<!-- Timeline Steps -->
|
|
<div class="lg:col-span-2">
|
|
<div id="timeline" class="space-y-6">
|
|
<!-- Steps will be inserted here -->
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Control Panel -->
|
|
<div class="lg:col-span-1">
|
|
<div class="bg-white rounded-lg shadow-lg p-6 sticky top-6">
|
|
<h3 class="text-lg font-semibold text-gray-900 mb-4">Playback Controls</h3>
|
|
|
|
<div class="space-y-4 mb-6">
|
|
<button id="start-btn" class="w-full bg-blue-600 text-white px-6 py-3 rounded-lg font-semibold hover:bg-blue-700 transition">
|
|
▶ Start Scenario
|
|
</button>
|
|
<button id="reset-btn" class="w-full bg-gray-600 text-white px-6 py-3 rounded-lg font-semibold hover:bg-gray-700 transition">
|
|
↻ Reset
|
|
</button>
|
|
</div>
|
|
|
|
<div id="progress-info" class="hidden">
|
|
<div class="mb-4">
|
|
<div class="flex justify-between text-sm text-gray-600 mb-2">
|
|
<span>Progress</span>
|
|
<span id="progress-text">0 / 8</span>
|
|
</div>
|
|
<div class="w-full bg-gray-200 rounded-full h-2">
|
|
<div id="progress-bar" class="bg-blue-600 h-2 rounded-full transition-all duration-300" style="width: 0%"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="border-t border-gray-200 pt-4">
|
|
<h4 class="text-sm font-semibold text-gray-700 mb-2">Current Step:</h4>
|
|
<p id="current-step-desc" class="text-sm text-gray-600"></p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Legend -->
|
|
<div class="mt-6 border-t border-gray-200 pt-4">
|
|
<h4 class="text-sm font-semibold text-gray-700 mb-3">Legend:</h4>
|
|
<div class="space-y-2 text-sm">
|
|
<div class="flex items-center">
|
|
<div class="w-4 h-4 border-2 border-gray-300 bg-white rounded mr-2"></div>
|
|
<span class="text-gray-600">Pending</span>
|
|
</div>
|
|
<div class="flex items-center">
|
|
<div class="w-4 h-4 border-2 border-blue-500 bg-blue-50 rounded mr-2"></div>
|
|
<span class="text-gray-600">Active</span>
|
|
</div>
|
|
<div class="flex items-center">
|
|
<div class="w-4 h-4 border-2 border-green-500 bg-green-50 rounded mr-2"></div>
|
|
<span class="text-gray-600">Complete</span>
|
|
</div>
|
|
<div class="flex items-center">
|
|
<div class="w-4 h-4 border-2 border-red-500 bg-red-50 rounded mr-2"></div>
|
|
<span class="text-gray-600">Error</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Explanation -->
|
|
<div class="bg-amber-50 border-l-4 border-amber-500 p-6 rounded-r-lg">
|
|
<h3 class="text-lg font-semibold text-amber-900 mb-2">Why This Matters</h3>
|
|
<p class="text-amber-800 mb-4">
|
|
The 27027 incident represents a class of failures where AI systems contradict explicit instructions
|
|
due to context degradation, attention decay, or simple forgetfulness. These failures can cause:
|
|
</p>
|
|
<ul class="space-y-2 text-amber-800">
|
|
<li>• Production outages (2+ hours debugging)</li>
|
|
<li>• Deployment blockers</li>
|
|
<li>• Loss of trust in AI assistants</li>
|
|
<li>• Wasted development time</li>
|
|
</ul>
|
|
<p class="text-amber-800 mt-4">
|
|
<strong>Tractatus prevents this entirely</strong> through persistent instruction storage and
|
|
cross-reference validation before code execution.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
const steps = [
|
|
{
|
|
title: 'User Instruction',
|
|
type: 'user',
|
|
content: 'User: "Use MongoDB on port 27017 for this project"',
|
|
code: null,
|
|
description: 'User provides explicit instruction about database port'
|
|
},
|
|
{
|
|
title: 'AI Acknowledges',
|
|
type: 'ai',
|
|
content: 'AI: "Understood. I\'ll ensure all database connections use port 27017."',
|
|
code: null,
|
|
description: 'AI confirms understanding of the instruction'
|
|
},
|
|
{
|
|
title: '30 Minutes Later...',
|
|
type: 'info',
|
|
content: 'Context: 85,000 tokens into 200,000 token session. Attention degrading.',
|
|
code: null,
|
|
description: 'Time passes, context window fills up, attention decays'
|
|
},
|
|
{
|
|
title: 'AI Generates Code',
|
|
type: 'ai',
|
|
content: 'AI: "Here\'s the database configuration..."',
|
|
code: `// config/database.js
|
|
const MONGODB_PORT = 27027; // ← WRONG!
|
|
const MONGODB_URI = \`mongodb://localhost:\${MONGODB_PORT}/family_history\`;
|
|
|
|
module.exports = {
|
|
uri: MONGODB_URI,
|
|
port: MONGODB_PORT
|
|
};`,
|
|
description: 'AI generates code with WRONG port number (27027 instead of 27017)'
|
|
},
|
|
{
|
|
title: 'Application Failure',
|
|
type: 'error',
|
|
content: '❌ Error: Failed to connect to MongoDB',
|
|
code: `MongoServerError: connect ECONNREFUSED 127.0.0.1:27027
|
|
at Connection.handleError
|
|
at Connection.onError
|
|
|
|
MongoDB is running on port 27017, but app is trying port 27027!`,
|
|
description: 'Application crashes because it cannot connect to database'
|
|
},
|
|
{
|
|
title: 'Debugging Begins',
|
|
type: 'info',
|
|
content: 'Developer spends 2+ hours debugging why database won\'t connect...',
|
|
code: null,
|
|
description: 'Time wasted tracking down the port mismatch'
|
|
},
|
|
{
|
|
title: 'Root Cause Found',
|
|
type: 'info',
|
|
content: 'Developer discovers AI used wrong port despite explicit instruction 30 minutes earlier.',
|
|
code: null,
|
|
description: 'The contradiction is finally discovered'
|
|
},
|
|
{
|
|
title: 'How Tractatus Prevents This',
|
|
type: 'success',
|
|
content: 'CrossReferenceValidator would have caught this BEFORE execution:',
|
|
code: `// 1. InstructionPersistenceClassifier stores instruction
|
|
{
|
|
text: "Use MongoDB on port 27017",
|
|
quadrant: "SYSTEM",
|
|
persistence: "HIGH",
|
|
parameters: { port: "27017" }
|
|
}
|
|
|
|
// 2. CrossReferenceValidator checks before code generation
|
|
❌ VALIDATION FAILED
|
|
Proposed port: 27027
|
|
Instruction: Use port 27017
|
|
Status: REJECTED - Parameter conflict
|
|
|
|
AI cannot proceed. Human notified.
|
|
`,
|
|
description: 'Tractatus framework prevents the error before it happens'
|
|
}
|
|
];
|
|
|
|
let currentStep = -1;
|
|
let isPlaying = false;
|
|
|
|
function initTimeline() {
|
|
const timeline = document.getElementById('timeline');
|
|
timeline.innerHTML = steps.map((step, index) => `
|
|
<div id="step-${index}" class="border-2 border-gray-300 bg-white rounded-lg p-6 transition-all duration-300">
|
|
<div class="flex items-start">
|
|
<div class="flex-shrink-0 mr-4">
|
|
<div class="w-10 h-10 rounded-full ${getStepColor(step.type)} flex items-center justify-center text-white font-bold">
|
|
${index + 1}
|
|
</div>
|
|
</div>
|
|
<div class="flex-1">
|
|
<h3 class="text-lg font-semibold text-gray-900 mb-2">${step.title}</h3>
|
|
<p class="text-gray-700 mb-3">${step.content}</p>
|
|
${step.code ? `<pre class="code-block">${escapeHtml(step.code)}</pre>` : ''}
|
|
<p class="text-sm text-gray-500 mt-2 hidden step-description">${step.description}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
`).join('');
|
|
}
|
|
|
|
function getStepColor(type) {
|
|
const colors = {
|
|
user: 'bg-blue-500',
|
|
ai: 'bg-purple-500',
|
|
info: 'bg-gray-500',
|
|
error: 'bg-red-500',
|
|
success: 'bg-green-500'
|
|
};
|
|
return colors[type] || 'bg-gray-500';
|
|
}
|
|
|
|
function escapeHtml(text) {
|
|
const div = document.createElement('div');
|
|
div.textContent = text;
|
|
return div.innerHTML;
|
|
}
|
|
|
|
async function playScenario() {
|
|
if (isPlaying) return;
|
|
isPlaying = true;
|
|
|
|
document.getElementById('start-btn').disabled = true;
|
|
document.getElementById('progress-info').classList.remove('hidden');
|
|
|
|
for (let i = 0; i <= steps.length - 1; i++) {
|
|
await showStep(i);
|
|
await delay(2000); // 2 second delay between steps
|
|
}
|
|
|
|
isPlaying = false;
|
|
document.getElementById('start-btn').disabled = false;
|
|
document.getElementById('start-btn').innerHTML = '▶ Replay';
|
|
}
|
|
|
|
async function showStep(index) {
|
|
currentStep = index;
|
|
|
|
// Mark previous steps as complete
|
|
for (let i = 0; i < index; i++) {
|
|
const stepEl = document.getElementById(`step-${i}`);
|
|
stepEl.classList.remove('step-active');
|
|
stepEl.classList.add('step-complete', 'border-green-500', 'bg-green-50');
|
|
}
|
|
|
|
// Mark current step as active
|
|
const currentStepEl = document.getElementById(`step-${index}`);
|
|
currentStepEl.classList.add('step-active', 'border-blue-500', 'bg-blue-50', 'fade-in');
|
|
currentStepEl.scrollIntoView({ behavior: 'smooth', block: 'center' });
|
|
|
|
// Show description
|
|
currentStepEl.querySelector('.step-description').classList.remove('hidden');
|
|
|
|
// Handle error step
|
|
if (steps[index].type === 'error') {
|
|
currentStepEl.classList.remove('step-active', 'border-blue-500', 'bg-blue-50');
|
|
currentStepEl.classList.add('step-error', 'border-red-500', 'bg-red-50');
|
|
}
|
|
|
|
// Update progress
|
|
const progress = ((index + 1) / steps.length) * 100;
|
|
document.getElementById('progress-bar').style.width = `${progress}%`;
|
|
document.getElementById('progress-text').textContent = `${index + 1} / ${steps.length}`;
|
|
document.getElementById('current-step-desc').textContent = steps[index].description;
|
|
}
|
|
|
|
function resetScenario() {
|
|
currentStep = -1;
|
|
isPlaying = false;
|
|
|
|
// Reset all steps
|
|
steps.forEach((_, index) => {
|
|
const stepEl = document.getElementById(`step-${index}`);
|
|
stepEl.className = 'border-2 border-gray-300 bg-white rounded-lg p-6 transition-all duration-300';
|
|
stepEl.querySelector('.step-description').classList.add('hidden');
|
|
});
|
|
|
|
document.getElementById('progress-bar').style.width = '0%';
|
|
document.getElementById('progress-text').textContent = '0 / 8';
|
|
document.getElementById('current-step-desc').textContent = '';
|
|
document.getElementById('progress-info').classList.add('hidden');
|
|
document.getElementById('start-btn').innerHTML = '▶ Start Scenario';
|
|
document.getElementById('start-btn').disabled = false;
|
|
}
|
|
|
|
function delay(ms) {
|
|
return new Promise(resolve => setTimeout(resolve, ms));
|
|
}
|
|
|
|
// Event listeners
|
|
document.getElementById('start-btn').addEventListener('click', playScenario);
|
|
document.getElementById('reset-btn').addEventListener('click', resetScenario);
|
|
|
|
// Initialize
|
|
initTimeline();
|
|
</script>
|
|
|
|
</body>
|
|
</html>
|