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>
113 lines
6.6 KiB
XML
113 lines
6.6 KiB
XML
<?xml version="1.0" encoding="UTF-8"?>
|
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 900" width="1000" height="900">
|
|
<defs>
|
|
<style>
|
|
.decision { fill: #fff3e0; stroke: #f57c00; stroke-width: 2; }
|
|
.action-green { fill: #e8f5e9; stroke: #388e3c; stroke-width: 2; }
|
|
.action-blue { fill: #e3f2fd; stroke: #1976d2; stroke-width: 2; }
|
|
.action-red { fill: #ffebee; stroke: #c62828; stroke-width: 2; }
|
|
.text { font-family: Arial, sans-serif; font-size: 13px; fill: #333; }
|
|
.title { font-family: Arial, sans-serif; font-size: 18px; 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: 11px; fill: #666; font-weight: bold; }
|
|
</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="500" y="30" class="title" text-anchor="middle">Deliberation Trigger Decision Tree</text>
|
|
|
|
<!-- Root: Conflict Detected? -->
|
|
<polygon points="500,60 620,110 500,160 380,110" class="decision"/>
|
|
<text x="500" y="107" class="text" text-anchor="middle" font-weight="bold">Conflict</text>
|
|
<text x="500" y="124" class="text" text-anchor="middle" font-weight="bold">Detected?</text>
|
|
|
|
<!-- NO: Proceed -->
|
|
<path d="M 620 110 L 720 110" class="arrow"/>
|
|
<text x="655" y="105" class="label">NO</text>
|
|
<rect x="720" y="85" width="130" height="50" class="action-green" rx="5"/>
|
|
<text x="785" y="108" class="text" text-anchor="middle" font-weight="bold">✓ Proceed</text>
|
|
<text x="785" y="123" class="text" text-anchor="middle" font-size="11">No deliberation needed</text>
|
|
|
|
<!-- YES: Check Severity -->
|
|
<path d="M 500 160 L 500 220" class="arrow"/>
|
|
<text x="510" y="195" class="label">YES</text>
|
|
|
|
<!-- Severity Check -->
|
|
<polygon points="500,220 640,280 500,340 360,280" class="decision"/>
|
|
<text x="500" y="272" class="text" text-anchor="middle" font-weight="bold">Severity</text>
|
|
<text x="500" y="289" class="text" text-anchor="middle" font-weight="bold">Level?</text>
|
|
|
|
<!-- CRITICAL -->
|
|
<path d="M 360 280 L 200 280" class="arrow"/>
|
|
<text x="265" y="275" class="label">CRITICAL</text>
|
|
<rect x="50" y="255" width="150" height="70" class="action-red" rx="5"/>
|
|
<text x="125" y="278" class="text" text-anchor="middle" font-weight="bold">✗ Block Immediately</text>
|
|
<text x="125" y="295" class="text" text-anchor="middle" font-size="11">No deliberation</text>
|
|
<text x="125" y="310" class="text" text-anchor="middle" font-size="11">(e.g., severe ethical violation)</text>
|
|
|
|
<!-- HIGH/MODERATE: Check Persistence -->
|
|
<path d="M 500 340 L 500 410" class="arrow"/>
|
|
<text x="510" y="380" class="label">HIGH/MOD</text>
|
|
|
|
<!-- Persistence Check -->
|
|
<polygon points="500,410 650,470 500,530 350,470" class="decision"/>
|
|
<text x="500" y="462" class="text" text-anchor="middle" font-weight="bold">HIGH Persistence</text>
|
|
<text x="500" y="479" class="text" text-anchor="middle" font-weight="bold">Instruction?</text>
|
|
|
|
<!-- NO: Fast Path -->
|
|
<path d="M 650 470 L 780 470" class="arrow"/>
|
|
<text x="700" y="465" class="label">NO</text>
|
|
<rect x="780" y="435" width="180" height="80" class="action-blue" rx="5"/>
|
|
<text x="870" y="460" class="text" text-anchor="middle" font-weight="bold">⚡ Fast Path (1-round)</text>
|
|
<text x="870" y="478" class="text" text-anchor="middle" font-size="11">• LOW/MEDIUM persistence</text>
|
|
<text x="870" y="493" class="text" text-anchor="middle" font-size="11">• Reversible actions</text>
|
|
<text x="870" y="508" class="text" text-anchor="middle" font-size="11">Time: 30 sec - 2 min</text>
|
|
|
|
<!-- YES: Check Ethical Boundary -->
|
|
<path d="M 500 530 L 500 600" class="arrow"/>
|
|
<text x="510" y="570" class="label">YES</text>
|
|
|
|
<!-- Ethical Boundary Check -->
|
|
<polygon points="500,600 650,660 500,720 350,660" class="decision"/>
|
|
<text x="500" y="652" class="text" text-anchor="middle" font-weight="bold">Ethical Boundary</text>
|
|
<text x="500" y="669" class="text" text-anchor="middle" font-weight="bold">Violation?</text>
|
|
|
|
<!-- Branch to 4-Round (either YES or NO from ethical check) -->
|
|
<path d="M 500 720 L 500 780" class="arrow"/>
|
|
<text x="510" y="755" class="label">YES or NO</text>
|
|
<text x="510" y="768" class="label" font-size="10">(if HIGH persistence)</text>
|
|
|
|
<!-- 4-Round Protocol -->
|
|
<rect x="300" y="780" width="400" height="110" class="action-blue" rx="5"/>
|
|
<text x="500" y="805" class="text" text-anchor="middle" font-weight="bold">⚙ 4-Round Protocol</text>
|
|
<text x="500" y="823" class="text" text-anchor="middle" font-size="11">Triggers when:</text>
|
|
<text x="500" y="838" class="text" text-anchor="middle" font-size="11">• HIGH persistence conflict (confidence ≥80%) OR</text>
|
|
<text x="500" y="853" class="text" text-anchor="middle" font-size="11">• MODERATE/HIGH ethical boundary violation OR</text>
|
|
<text x="500" y="868" class="text" text-anchor="middle" font-size="11">• 3+ accumulated conflicts in session</text>
|
|
<text x="500" y="883" class="text" text-anchor="middle" font-size="10">Time: 8-15 minutes</text>
|
|
|
|
<!-- Manual Triggers (side branch) -->
|
|
<rect x="50" y="410" width="220" height="110" class="action-blue" rx="5" stroke-dasharray="5,5"/>
|
|
<text x="160" y="432" class="text" text-anchor="middle" font-weight="bold">📋 Manual Triggers</text>
|
|
<text x="160" y="450" class="text" text-anchor="middle" font-size="11">(User-initiated)</text>
|
|
<text x="160" y="470" class="text" text-anchor="middle" font-size="11">• "I want to deliberate on this"</text>
|
|
<text x="160" y="485" class="text" text-anchor="middle" font-size="11">• "Help me think through this"</text>
|
|
<text x="160" y="500" class="text" text-anchor="middle" font-size="11">• "What are the trade-offs?"</text>
|
|
<text x="160" y="515" class="text" text-anchor="middle" font-size="11">→ Always triggers 4-round</text>
|
|
|
|
<path d="M 160 520 L 320 650" class="arrow" stroke-dasharray="5,5"/>
|
|
|
|
<!-- Legend -->
|
|
<rect x="50" y="800" width="180" height="80" fill="none" stroke="#999" stroke-width="1" rx="3"/>
|
|
<text x="140" y="820" class="text" text-anchor="middle" font-weight="bold">Legend</text>
|
|
<rect x="60" y="828" width="15" height="15" class="action-red"/>
|
|
<text x="82" y="840" class="text" font-size="11">Block (no deliberation)</text>
|
|
<rect x="60" y="848" width="15" height="15" class="action-blue"/>
|
|
<text x="82" y="860" class="text" font-size="11">Deliberation (4-round or fast)</text>
|
|
<rect x="60" y="868" width="15" height="15" class="action-green"/>
|
|
<text x="82" y="880" class="text" font-size="11">Proceed (no conflict)</text>
|
|
|
|
</svg>
|