From 2e5756a43c6ca4e9c19f32252a8e6d50de9faab8 Mon Sep 17 00:00:00 2001 From: TheFlow Date: Sun, 19 Oct 2025 22:03:25 +1300 Subject: [PATCH] feat(demos): create interactive pluralistic deliberation demo MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit SUMMARY: Completed Phase 3 Task 3.4.2 - Created comprehensive interactive demo showing how PluralisticDeliberationOrchestrator facilitates multi-stakeholder values deliberation without making autonomous normative choices. NEW DEMO: PLURALISTIC DELIBERATION **Scenario:** Security vulnerability discovery - should AI report it publicly, fix quietly, or coordinate disclosure? This creates values conflicts between: - Developer reputation vs. user safety - Organizational liability vs. transparency - Community norms vs. market dynamics **Interactive Features:** 1. **Two Paths:** - Autonomous Decision: Shows why AI can't/shouldn't decide values - Deliberation: Shows framework facilitation in action 2. **Stakeholder Selection (Step 1):** - 6 stakeholder types to choose from - Developer, End Users, Organization, Security Community, Competitors, Regulators - Each with distinct icon, color, perspective - Clickable cards with visual selection state - Requires minimum 2 stakeholders to proceed 3. **Perspective Exploration (Step 2):** - Dynamically shows selected stakeholders' views - Each perspective includes: * Primary concern * Full viewpoint explanation * Priority statement - Color-coded by stakeholder type - No ranking or weighting applied 4. **Human Decision (Step 3):** - 4 decision options provided: * Full Disclosure (transparency priority) * Private Fix (balance approach) * Coordinated Disclosure (community norms) * Defer Decision (consult more stakeholders) - Framework facilitates but doesn't decide - Human makes final choice 5. **Explanation Section:** - Side-by-side comparison: * What framework DOES (facilitate, surface, record) * What framework DOESN'T DO (weight, rank, decide) - Explains values pluralism principle - Reset button to try different stakeholder combinations **Design Patterns:** - Teal color scheme (deliberation service brand color) - Service icon in header (multi-stakeholder symbol) - Fade-in animations for smooth UX - Responsive grid layouts - Hover effects on all interactive elements - Clear visual states (selected, active, clickable) **Stakeholder Perspectives (6 total):** 1. **Developer**: Reputation & timeline concerns 2. **End Users**: Data safety & transparency rights 3. **Organization**: Liability & brand protection 4. **Security Community**: Responsible disclosure norms 5. **Competitors**: Market dynamics 6. **Regulators**: Compliance & user rights (GDPR) Each stakeholder has: - Unique icon and color - Specific concern area - Full perspective explanation - Priority statement **Educational Value:** - Demonstrates values incommensurability - Shows why AI shouldn't autonomously decide normative questions - Illustrates framework's facilitation role - Highlights human agency preservation - Explains pluralistic deliberation principle **Technical Details:** HTML (deliberation-demo.html): - 3-step interactive flow - Autonomous vs. deliberation path choice - Dynamic stakeholder cards - Dynamic perspective rendering - 4 decision options - Comprehensive explanation section JavaScript (deliberation-demo.js): - 6 stakeholder definitions with full data - Selection state management - Dynamic content rendering - Event handlers for all interactions - Reset functionality - Smooth scrolling between sections **CSP Compliance:** ✓ Zero violations ✓ No inline event handlers ✓ Event listeners properly attached ✓ Dynamic content via DOM manipulation **Accessibility:** - Semantic HTML structure - Clear visual states - Keyboard navigation supported - Color-coded with text labels - Responsive design maintained **Impact:** Completes ALL Phase 3 interactive features. Users can now: ✓ Understand how deliberation differs from decision-making ✓ Explore different stakeholder perspectives interactively ✓ Experience values pluralism firsthand ✓ See why AI autonomous normative choices are problematic This demo, combined with the enhanced 27027 incident demo, provides complete interactive validation of the Tractatus framework's two key architectural principles: 1. Pattern override prevention (27027 demo) 2. Pluralistic deliberation (this demo) 🤖 Generated with Claude Code (https://claude.com/claude-code) Co-Authored-By: Claude --- public/demos/deliberation-demo.html | 224 +++++++++++++++++++++++++++ public/js/demos/deliberation-demo.js | 221 ++++++++++++++++++++++++++ 2 files changed, 445 insertions(+) create mode 100644 public/demos/deliberation-demo.html create mode 100644 public/js/demos/deliberation-demo.js 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();