diff --git a/public/demos/deliberation-demo.html b/public/demos/deliberation-demo.html new file mode 100644 index 00000000..28a3a9de --- /dev/null +++ b/public/demos/deliberation-demo.html @@ -0,0 +1,224 @@ + + + + + + Pluralistic Deliberation Demo - Tractatus Framework + + + + + + + + + + +
+ + +
+
+ + + +
+

+ Pluralistic Deliberation in Action +

+

+ When AI faces values decisions—choices with no single "correct" answer—the Tractatus framework facilitates human deliberation across stakeholder perspectives instead of making autonomous choices. This interactive demo shows how the PluralisticDeliberationOrchestrator works. +

+
+ + +
+

The Scenario

+
+

+ Context: You're using Claude Code to develop a web application. The AI discovers your code contains a security vulnerability that could expose user data. This creates a values conflict: +

+
    +
  • • Reporting the vulnerability protects future users but may damage your reputation
    • +
  • • Staying silent preserves your project timeline but risks user harm
    • +
  • • Partially disclosing balances concerns but may be seen as deceptive
    • +
+

+ This is a values decision—there's no universally "correct" technical answer. Different stakeholders have legitimate but conflicting perspectives. +

+
+ +
+

+ Should the AI autonomously decide what to do, or facilitate deliberation among stakeholders? +

+
+ + +
+
+
+ + + + + + + +
+ + + + + diff --git a/public/js/demos/deliberation-demo.js b/public/js/demos/deliberation-demo.js new file mode 100644 index 00000000..f24835a8 --- /dev/null +++ b/public/js/demos/deliberation-demo.js @@ -0,0 +1,221 @@ +// Stakeholder definitions +const stakeholders = [ + { + id: 'developer', + name: 'Developer (You)', + icon: '👨‍💻', + color: 'blue', + perspective: { + concern: 'Professional Reputation & Timeline', + view: 'Public disclosure could damage my reputation and delay the project launch. I worked hard on this code and a vulnerability report might make me look incompetent.', + priority: 'Protect career progress while maintaining ethical standards' + } + }, + { + id: 'users', + name: 'End Users', + icon: '👥', + color: 'green', + perspective: { + concern: 'Data Safety & Trust', + view: 'If my data is at risk, I have a right to know immediately—regardless of the developer\'s reputation concerns. Silence prioritizes the developer over my safety.', + priority: 'Transparency and immediate protection from potential harm' + } + }, + { + id: 'organization', + name: 'Your Organization', + icon: '🏢', + color: 'purple', + perspective: { + concern: 'Liability & Brand Protection', + view: 'Uncontrolled disclosure could expose us to legal liability. We need time to assess the vulnerability, prepare a fix, and coordinate with legal counsel before any public statement.', + priority: 'Managed disclosure that minimizes organizational risk' + } + }, + { + id: 'security-community', + name: 'Security Community', + icon: '🔒', + color: 'orange', + perspective: { + concern: 'Responsible Disclosure Norms', + view: 'Follow established responsible disclosure practices: private notification, reasonable fix timeline (typically 90 days), then coordinated public disclosure. This balances safety with fairness.', + priority: 'Adherence to community norms that have proven effective' + } + }, + { + id: 'competitors', + name: 'Competitors', + icon: '🏪', + color: 'red', + perspective: { + concern: 'Market Dynamics', + view: 'Your vulnerability might reveal weaknesses in similar products we build. We\'d prefer you disclose quietly so we can check our own code without public pressure.', + priority: 'Minimize market disruption from security revelations' + } + }, + { + id: 'regulators', + name: 'Data Protection Regulators', + icon: '⚖️', + color: 'indigo', + perspective: { + concern: 'Compliance & User Rights', + view: 'GDPR and similar frameworks require prompt notification of data breaches. If user data is at risk, you may have legal obligations to disclose within specific timeframes (typically 72 hours).', + priority: 'Ensure compliance with data protection law' + } + } +]; + +let selectedStakeholders = []; +let currentDecision = null; + +// Initialize stakeholder cards +function initStakeholders() { + const grid = document.getElementById('stakeholder-grid'); + grid.innerHTML = stakeholders.map(s => ` +
+
${s.icon}
+

${s.name}

+
+ `).join(''); + + // Add click handlers + document.querySelectorAll('.stakeholder-card').forEach(card => { + card.addEventListener('click', () => { + const id = card.getAttribute('data-stakeholder'); + toggleStakeholder(id, card); + }); + }); +} + +function toggleStakeholder(id, cardElement) { + const index = selectedStakeholders.indexOf(id); + + if (index > -1) { + // Deselect + selectedStakeholders.splice(index, 1); + cardElement.classList.remove('stakeholder-selected'); + } else { + // Select + selectedStakeholders.push(id); + cardElement.classList.add('stakeholder-selected'); + } + + // Update continue button + const continueBtn = document.getElementById('continue-to-perspectives'); + continueBtn.disabled = selectedStakeholders.length < 2; +} + +function showPerspectives() { + // Hide stakeholder selection + document.getElementById('stakeholder-selection').classList.add('hidden'); + + // Show perspectives section + const section = document.getElementById('perspectives-section'); + section.classList.remove('hidden'); + section.scrollIntoView({ behavior: 'smooth', block: 'start' }); + + // Populate perspectives + const container = document.getElementById('perspectives-container'); + container.innerHTML = selectedStakeholders.map(id => { + const stakeholder = stakeholders.find(s => s.id === id); + return ` +
+
+
${stakeholder.icon}
+
+

${stakeholder.name}: ${stakeholder.perspective.concern}

+

${stakeholder.perspective.view}

+

Priority: ${stakeholder.perspective.priority}

+
+
+
+ `; + }).join(''); +} + +function showDecisionSection() { + // Hide perspectives + document.getElementById('perspectives-section').classList.add('hidden'); + + // Show decision section + const section = document.getElementById('decision-section'); + section.classList.remove('hidden'); + section.scrollIntoView({ behavior: 'smooth', block: 'start' }); +} + +function makeDecision(decision) { + currentDecision = decision; + + // Hide decision section + document.getElementById('decision-section').classList.add('hidden'); + + // Show explanation + const section = document.getElementById('explanation-section'); + section.classList.remove('hidden'); + section.scrollIntoView({ behavior: 'smooth', block: 'start' }); +} + +function showAutonomousPath() { + document.getElementById('decision-question').classList.add('hidden'); + document.getElementById('autonomous-path').classList.remove('hidden'); + document.getElementById('autonomous-path').scrollIntoView({ behavior: 'smooth', block: 'start' }); +} + +function showDeliberationPath() { + document.getElementById('decision-question').classList.add('hidden'); + document.getElementById('deliberation-path').classList.remove('hidden'); + document.getElementById('stakeholder-selection').scrollIntoView({ behavior: 'smooth', block: 'start' }); +} + +function resetDemo() { + // Reset state + selectedStakeholders = []; + currentDecision = null; + + // Show decision question + document.getElementById('decision-question').classList.remove('hidden'); + + // Hide all paths + document.getElementById('autonomous-path').classList.add('hidden'); + document.getElementById('deliberation-path').classList.add('hidden'); + + // Reset deliberation path sections + document.getElementById('stakeholder-selection').classList.remove('hidden'); + document.getElementById('perspectives-section').classList.add('hidden'); + document.getElementById('decision-section').classList.add('hidden'); + document.getElementById('explanation-section').classList.add('hidden'); + + // Reinitialize stakeholders + initStakeholders(); + + // Scroll to top + window.scrollTo({ top: 0, behavior: 'smooth' }); +} + +// Event listeners +document.getElementById('autonomous-btn').addEventListener('click', showAutonomousPath); +document.getElementById('deliberation-btn').addEventListener('click', showDeliberationPath); +document.getElementById('reset-from-autonomous').addEventListener('click', () => { + resetDemo(); + // Automatically show deliberation path + setTimeout(() => { + showDeliberationPath(); + }, 100); +}); +document.getElementById('continue-to-perspectives').addEventListener('click', showPerspectives); +document.getElementById('continue-to-decision').addEventListener('click', showDecisionSection); +document.getElementById('reset-demo').addEventListener('click', resetDemo); + +// Decision option handlers +document.querySelectorAll('.decision-option').forEach(btn => { + btn.addEventListener('click', () => { + const decision = btn.getAttribute('data-decision'); + makeDecision(decision); + }); +}); + +// Initialize +initStakeholders();