810aa18f92
- Added diagrams from public tractatus-framework repo: architecture-main-flow.svg (6.6KB), trigger-decision-tree.svg (6.7KB) - Diagram sizing: max-width 600px for readable display, responsive width 100% - Fixed skip link: Added <main id="main-content"> wrapper for proper accessibility - Quick navigation: 44px touch targets, flex-wrap for mobile, aria-label="Page sections" - Download buttons: Descriptive ARIA labels, 44px minimum height - Code blocks: Added role="region" and descriptive ARIA labels to all 6 service examples - Mobile optimization: -webkit-overflow-scrolling, 11px code font on small screens, 16px body prevents iOS zoom - API examples verified accurate against actual BoundaryEnforcer.service.js implementation - CSP compliance: Moved diagram sizing to CSS class instead of inline styles - Version 1.4.0 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
127 lines
6.5 KiB
XML
127 lines
6.5 KiB
XML
<?xml version="1.0" encoding="UTF-8"?>
|
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 1200" width="800" height="1200">
|
|
<defs>
|
|
<style>
|
|
.box { fill: #e3f2fd; stroke: #1976d2; stroke-width: 2; }
|
|
.decision { fill: #fff3e0; stroke: #f57c00; stroke-width: 2; }
|
|
.process { fill: #f3e5f5; stroke: #7b1fa2; stroke-width: 2; }
|
|
.output { fill: #e8f5e9; stroke: #388e3c; stroke-width: 2; }
|
|
.text { font-family: Arial, sans-serif; font-size: 14px; fill: #333; }
|
|
.title { font-family: Arial, sans-serif; font-size: 16px; font-weight: bold; fill: #1976d2; }
|
|
.arrow { stroke: #666; stroke-width: 2; fill: none; marker-end: url(#arrowhead); }
|
|
.label { font-family: Arial, sans-serif; font-size: 12px; fill: #666; }
|
|
</style>
|
|
<marker id="arrowhead" markerWidth="10" markerHeight="10" refX="9" refY="3" orient="auto">
|
|
<polygon points="0 0, 10 3, 0 6" fill="#666" />
|
|
</marker>
|
|
</defs>
|
|
|
|
<!-- Title -->
|
|
<text x="400" y="30" class="title" text-anchor="middle" font-size="20">Pluralistic Deliberation: Main Architecture Flow</text>
|
|
|
|
<!-- User Request -->
|
|
<rect x="250" y="60" width="300" height="60" class="box" rx="5"/>
|
|
<text x="400" y="85" class="title" text-anchor="middle">User Request</text>
|
|
<text x="400" y="105" class="text" text-anchor="middle">"Add inline JavaScript for form"</text>
|
|
|
|
<!-- Arrow to Pre-Action Check -->
|
|
<path d="M 400 120 L 400 160" class="arrow"/>
|
|
|
|
<!-- Pre-Action Check -->
|
|
<rect x="200" y="160" width="400" height="80" class="box" rx="5"/>
|
|
<text x="400" y="185" class="title" text-anchor="middle">PRE-ACTION CHECK</text>
|
|
<text x="400" y="205" class="text" text-anchor="middle">scripts/pre-action-check.js</text>
|
|
<text x="400" y="225" class="text" text-anchor="middle" font-size="12">Validates against instruction history + boundaries</text>
|
|
|
|
<!-- Arrow to Conflict Decision -->
|
|
<path d="M 400 240 L 400 280" class="arrow"/>
|
|
|
|
<!-- Conflict Decision Diamond -->
|
|
<polygon points="400,280 500,330 400,380 300,330" class="decision"/>
|
|
<text x="400" y="325" class="text" text-anchor="middle">Conflict</text>
|
|
<text x="400" y="342" class="text" text-anchor="middle">Detected?</text>
|
|
|
|
<!-- NO branch -->
|
|
<path d="M 500 330 L 650 330" class="arrow"/>
|
|
<text x="570" y="325" class="label">NO</text>
|
|
<rect x="650" y="300" width="120" height="60" class="output" rx="5"/>
|
|
<text x="710" y="325" class="text" text-anchor="middle">Proceed</text>
|
|
<text x="710" y="345" class="text" text-anchor="middle">with Action</text>
|
|
|
|
<!-- YES branch -->
|
|
<path d="M 400 380 L 400 420" class="arrow"/>
|
|
<text x="410" y="405" class="label">YES</text>
|
|
|
|
<!-- Conflict Classifier -->
|
|
<rect x="200" y="420" width="400" height="80" class="box" rx="5"/>
|
|
<text x="400" y="445" class="title" text-anchor="middle">CONFLICT CLASSIFIER</text>
|
|
<text x="400" y="465" class="text" text-anchor="middle" font-size="12">Severity: CRITICAL / HIGH / MODERATE / LOW</text>
|
|
<text x="400" y="482" class="text" text-anchor="middle" font-size="12">Type: Ethical / Instruction / Principle / Technical</text>
|
|
|
|
<!-- Arrow to Protocol Decision -->
|
|
<path d="M 400 500 L 400 540" class="arrow"/>
|
|
|
|
<!-- Protocol Decision Diamond -->
|
|
<polygon points="400,540 530,600 400,660 270,600" class="decision"/>
|
|
<text x="400" y="595" class="text" text-anchor="middle">Severity ≥ MODERATE</text>
|
|
<text x="400" y="612" class="text" text-anchor="middle">+ HIGH Persistence?</text>
|
|
|
|
<!-- CRITICAL branch -->
|
|
<path d="M 270 600 L 150 600" class="arrow"/>
|
|
<text x="190" y="595" class="label">CRITICAL</text>
|
|
<rect x="30" y="570" width="120" height="60" class="output" rx="5"/>
|
|
<text x="90" y="595" class="text" text-anchor="middle">Block</text>
|
|
<text x="90" y="615" class="text" text-anchor="middle">Immediately</text>
|
|
|
|
<!-- LOW/MODERATE branch -->
|
|
<path d="M 530 600 L 650 600" class="arrow"/>
|
|
<text x="580" y="595" class="label">LOW</text>
|
|
<rect x="650" y="570" width="120" height="60" class="process" rx="5"/>
|
|
<text x="710" y="595" class="text" text-anchor="middle">Fast Path</text>
|
|
<text x="710" y="615" class="text" text-anchor="middle">(1-round)</text>
|
|
|
|
<!-- YES to 4-round -->
|
|
<path d="M 400 660 L 400 700" class="arrow"/>
|
|
<text x="410" y="685" class="label">YES</text>
|
|
|
|
<!-- PluralisticDeliberationOrchestrator -->
|
|
<rect x="150" y="700" width="500" height="320" class="process" rx="5"/>
|
|
<text x="400" y="725" class="title" text-anchor="middle">PLURALISTIC DELIBERATION ORCHESTRATOR</text>
|
|
|
|
<!-- Round 1 -->
|
|
<rect x="180" y="750" width="440" height="60" class="box" rx="3"/>
|
|
<text x="400" y="772" class="text" text-anchor="middle" font-weight="bold">Round 1: Position Statements (2-5 min)</text>
|
|
<text x="400" y="790" class="text" text-anchor="middle" font-size="12">Present all stakeholder positions</text>
|
|
|
|
<!-- Round 2 -->
|
|
<rect x="180" y="820" width="440" height="60" class="box" rx="3"/>
|
|
<text x="400" y="842" class="text" text-anchor="middle" font-weight="bold">Round 2: Shared Values Discovery (2-3 min)</text>
|
|
<text x="400" y="860" class="text" text-anchor="middle" font-size="12">Identify common ground + values in tension</text>
|
|
|
|
<!-- Round 3 -->
|
|
<rect x="180" y="890" width="440" height="60" class="box" rx="3"/>
|
|
<text x="400" y="912" class="text" text-anchor="middle" font-weight="bold">Round 3: Accommodation Exploration (3-5 min)</text>
|
|
<text x="400" y="930" class="text" text-anchor="middle" font-size="12">Propose 3-4 options honoring multiple values</text>
|
|
|
|
<!-- Round 4 -->
|
|
<rect x="180" y="960" width="440" height="60" class="box" rx="3"/>
|
|
<text x="400" y="982" class="text" text-anchor="middle" font-weight="bold">Round 4: Outcome Documentation (1-2 min)</text>
|
|
<text x="400" y="1000" class="text" text-anchor="middle" font-size="12">User chooses accommodation, document decision</text>
|
|
|
|
<!-- Arrow to Outcome Storage -->
|
|
<path d="M 400 1020 L 400 1060" class="arrow"/>
|
|
|
|
<!-- Outcome Storage -->
|
|
<rect x="200" y="1060" width="400" height="80" class="output" rx="5"/>
|
|
<text x="400" y="1085" class="title" text-anchor="middle">OUTCOME STORAGE</text>
|
|
<text x="400" y="1105" class="text" text-anchor="middle" font-size="12">Save to: .claude/deliberation-outcomes/</text>
|
|
<text x="400" y="1122" class="text" text-anchor="middle" font-size="12">Update: .claude/instruction-history.json (if needed)</text>
|
|
|
|
<!-- Arrow to Action Execution -->
|
|
<path d="M 400 1140 L 400 1170" class="arrow"/>
|
|
|
|
<!-- Action Execution -->
|
|
<rect x="250" y="1170" width="300" height="40" class="output" rx="5"/>
|
|
<text x="400" y="1195" class="text" text-anchor="middle">Proceed with Chosen Accommodation</text>
|
|
|
|
</svg>
|