tractatus/public
TheFlow 2e5756a43c feat(demos): create interactive pluralistic deliberation demo
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 <noreply@anthropic.com>
2025-10-19 22:03:25 +13:00
..
.well-known security: comprehensive security audit and hardening 2025-10-10 05:34:40 +13:00
about style(ui): update theme, branding, and GitHub repository links 2025-10-19 12:48:29 +13:00
admin style(ui): update theme, branding, and GitHub repository links 2025-10-19 12:48:29 +13:00
css feat(phase3): add data visualizations for context pressure and activity timeline 2025-10-19 20:49:26 +13:00
demos feat(demos): create interactive pluralistic deliberation demo 2025-10-19 22:03:25 +13:00
downloads docs: regenerate PDFs and update documentation metadata 2025-10-14 10:53:48 +13:00
fonts fix(csp): clean all public-facing pages - 75 violations fixed (66%) 2025-10-19 13:17:50 +13:00
images feat(interactive): add clickable central core and improve desktop layout 2025-10-19 16:37:27 +13:00
js feat(demos): create interactive pluralistic deliberation demo 2025-10-19 22:03:25 +13:00
koha fix(a11y): improve text contrast on koha transparency page 2025-10-19 14:07:38 +13:00
locales fix(i18n): add German and French translations for performance evidence section 2025-10-19 21:59:59 +13:00
about.html feat(phase3): implement smooth page transitions with fade effect 2025-10-19 20:44:25 +13:00
api-reference.html style(ui): update theme, branding, and GitHub repository links 2025-10-19 12:48:29 +13:00
architecture.html fix(accessibility): improve contrast ratios and add meta description 2025-10-19 20:55:04 +13:00
blog-post.html style(ui): update theme, branding, and GitHub repository links 2025-10-19 12:48:29 +13:00
blog.html style(ui): update theme, branding, and GitHub repository links 2025-10-19 12:48:29 +13:00
case-submission.html fix(csp): clean all public-facing pages - 75 violations fixed (66%) 2025-10-19 13:17:50 +13:00
check-version.html style(ui): update theme, branding, and GitHub repository links 2025-10-19 12:48:29 +13:00
docs-viewer.html feat(phase3): add code snippet copy buttons and collapsible TOC 2025-10-19 15:27:33 +13:00
docs.html perf(docs): improve LCP with deferred scripts and font preloading 2025-10-19 21:22:05 +13:00
faq.html fix(accessibility): improve contrast ratios and add meta description 2025-10-19 20:55:04 +13:00
favicon-new.svg fix(csp): clean all public-facing pages - 75 violations fixed (66%) 2025-10-19 13:17:50 +13:00
favicon.ico feat: implement Rule Manager and Project Manager admin systems 2025-10-11 17:16:51 +13:00
favicon.svg feat: comprehensive documentation improvements and GitHub integration 2025-10-09 14:33:14 +13:00
implementer.html fix(contact): replace personal email with research@agenticgovernance.digital 2025-10-19 21:00:38 +13:00
index.html fix(i18n): add German and French translations for performance evidence section 2025-10-19 21:59:59 +13:00
koha.html fix(accessibility): improve contrast ratios and add meta description 2025-10-19 20:55:04 +13:00
leader.html feat(phase3): implement smooth page transitions with fade effect 2025-10-19 20:44:25 +13:00
manifest.json style(ui): update theme, branding, and GitHub repository links 2025-10-19 12:48:29 +13:00
media-inquiry.html fix(csp): clean all public-facing pages - 75 violations fixed (66%) 2025-10-19 13:17:50 +13:00
media-triage-transparency.html style(ui): update theme, branding, and GitHub repository links 2025-10-19 12:48:29 +13:00
privacy.html fix(i18n): add cache-busting version strings to privacy page scripts 2025-10-19 14:56:25 +13:00
researcher.html feat(phase3): implement smooth page transitions with fade effect 2025-10-19 20:44:25 +13:00
service-worker.js style(ui): update theme, branding, and GitHub repository links 2025-10-19 12:48:29 +13:00
version.json style(ui): update theme, branding, and GitHub repository links 2025-10-19 12:48:29 +13:00