feat(implementer): WCAG accessibility, diagrams, mobile optimization
- 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>
This commit is contained in:
TheFlow
parent
7a4603b3a6
commit
50d1644bf4
4 changed files with 308 additions and 53 deletions
127
public/docs/diagrams/architecture-main-flow.svg
Normal file
127
public/docs/diagrams/architecture-main-flow.svg
Normal file
|
|
@ -0,0 +1,127 @@
|
|||
<?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>
|
||||
|
After Width: | Height: | Size: 6.5 KiB |
113
public/docs/diagrams/trigger-decision-tree.svg
Normal file
113
public/docs/diagrams/trigger-decision-tree.svg
Normal file
|
|
@ -0,0 +1,113 @@
|
|||
<?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>
|
||||
|
After Width: | Height: | Size: 6.6 KiB |
|
|
@ -9,21 +9,43 @@
|
|||
<link rel="manifest" href="/manifest.json">
|
||||
<meta name="theme-color" content="#3b82f6">
|
||||
<link rel="icon" type="image/svg+xml" href="/favicon-new.svg">
|
||||
<link rel="stylesheet" href="/css/fonts.css">
|
||||
<link rel="stylesheet" href="/css/tailwind.css?v=0.1.0.1760254958072">
|
||||
<link rel="stylesheet" href="/css/tractatus-theme.min.css?v=1760816800">
|
||||
<link rel="stylesheet" href="/css/fonts.css?v=1761131164">
|
||||
<link rel="stylesheet" href="/css/tailwind.css?v=1761131164">
|
||||
<link rel="stylesheet" href="/css/tractatus-theme.min.css?v=1761131164">
|
||||
<style>
|
||||
.skip-link { position: absolute; left: -9999px; top: 0; }
|
||||
.skip-link:focus { left: 0; z-index: 100; background: white; padding: 1rem; border: 2px solid #3b82f6; }
|
||||
a:focus, button:focus { outline: 3px solid #3b82f6; outline-offset: 2px; }
|
||||
a:focus:not(:focus-visible) { outline: none; }
|
||||
a:focus-visible { outline: 3px solid #3b82f6; outline-offset: 2px; }
|
||||
|
||||
/* Mobile code block optimizations */
|
||||
pre {
|
||||
-webkit-overflow-scrolling: touch;
|
||||
max-width: 100%;
|
||||
}
|
||||
pre code {
|
||||
display: block;
|
||||
white-space: pre;
|
||||
word-wrap: normal;
|
||||
}
|
||||
@media (max-width: 640px) {
|
||||
pre { font-size: 11px; }
|
||||
body { font-size: 16px; } /* Prevent iOS zoom on input focus */
|
||||
}
|
||||
|
||||
/* Diagram sizing */
|
||||
.diagram-img {
|
||||
max-width: 600px;
|
||||
width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body class="bg-gray-50">
|
||||
|
||||
<a href="#main-content" class="skip-link">Skip to main content</a>
|
||||
<script src="/js/components/navbar.js?v=0.1.0.1760254958072"></script>
|
||||
<script src="/js/components/navbar.js?v=1761131164"></script>
|
||||
|
||||
<!-- Breadcrumb -->
|
||||
<nav class="bg-gray-50 border-b border-gray-200 py-3" aria-label="Breadcrumb">
|
||||
|
|
@ -53,17 +75,18 @@
|
|||
<!-- Quick Links -->
|
||||
<div class="bg-white border-b border-gray-200">
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-4">
|
||||
<nav class="flex justify-center space-x-8 text-sm">
|
||||
<a href="#architecture" class="text-blue-600 hover:text-blue-800 font-medium">Architecture</a>
|
||||
<a href="#services" class="text-blue-600 hover:text-blue-800 font-medium">Services</a>
|
||||
<a href="#api" class="text-blue-600 hover:text-blue-800 font-medium">API Reference</a>
|
||||
<a href="#examples" class="text-blue-600 hover:text-blue-800 font-medium">Code Examples</a>
|
||||
<a href="#deployment" class="text-blue-600 hover:text-blue-800 font-medium">Deployment</a>
|
||||
<nav class="flex justify-center flex-wrap gap-4 sm:gap-8" aria-label="Page sections">
|
||||
<a href="#architecture" class="text-blue-600 hover:text-blue-800 font-medium px-2 py-2 min-h-[44px] flex items-center">Architecture</a>
|
||||
<a href="#services" class="text-blue-600 hover:text-blue-800 font-medium px-2 py-2 min-h-[44px] flex items-center">Services</a>
|
||||
<a href="#api" class="text-blue-600 hover:text-blue-800 font-medium px-2 py-2 min-h-[44px] flex items-center">API Reference</a>
|
||||
<a href="#examples" class="text-blue-600 hover:text-blue-800 font-medium px-2 py-2 min-h-[44px] flex items-center">Code Examples</a>
|
||||
<a href="#deployment" class="text-blue-600 hover:text-blue-800 font-medium px-2 py-2 min-h-[44px] flex items-center">Deployment</a>
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Framework Architecture -->
|
||||
<main id="main-content">
|
||||
<div id="architecture" class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-16">
|
||||
<h2 class="text-3xl font-bold text-gray-900 mb-8">Framework Architecture</h2>
|
||||
|
||||
|
|
@ -73,13 +96,14 @@
|
|||
<div class="bg-gray-50 rounded-lg p-6">
|
||||
<img src="/docs/diagrams/architecture-main-flow.svg"
|
||||
alt="Tractatus Framework Architecture: Shows how 6 governance services interact in sequence"
|
||||
class="w-full h-auto"
|
||||
class="diagram-img"
|
||||
loading="lazy">
|
||||
</div>
|
||||
<div class="mt-6 flex gap-4">
|
||||
<a href="/docs/diagrams/architecture-main-flow.svg" download
|
||||
class="inline-flex items-center bg-blue-600 text-white px-4 py-2 rounded-lg text-sm font-semibold hover:bg-blue-700 transition">
|
||||
<svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
class="inline-flex items-center bg-blue-600 text-white px-4 py-2 rounded-lg text-sm font-semibold hover:bg-blue-700 transition min-h-[44px]"
|
||||
aria-label="Download architecture main flow diagram as SVG">
|
||||
<svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 10v6m0 0l-3-3m3 3l3-3m2 8H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/>
|
||||
</svg>
|
||||
Download SVG
|
||||
|
|
@ -93,13 +117,14 @@
|
|||
<div class="bg-gray-50 rounded-lg p-6">
|
||||
<img src="/docs/diagrams/trigger-decision-tree.svg"
|
||||
alt="Service Trigger Decision Tree: When each framework service activates"
|
||||
class="w-full h-auto"
|
||||
class="diagram-img"
|
||||
loading="lazy">
|
||||
</div>
|
||||
<div class="mt-6 flex gap-4">
|
||||
<a href="/docs/diagrams/trigger-decision-tree.svg" download
|
||||
class="inline-flex items-center bg-blue-600 text-white px-4 py-2 rounded-lg text-sm font-semibold hover:bg-blue-700 transition">
|
||||
<svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
class="inline-flex items-center bg-blue-600 text-white px-4 py-2 rounded-lg text-sm font-semibold hover:bg-blue-700 transition min-h-[44px]"
|
||||
aria-label="Download service trigger decision tree as SVG">
|
||||
<svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 10v6m0 0l-3-3m3 3l3-3m2 8H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/>
|
||||
</svg>
|
||||
Download SVG
|
||||
|
|
@ -129,11 +154,9 @@
|
|||
<li>PURPOSE (12.4) - Goal definition</li>
|
||||
</ul>
|
||||
</div>
|
||||
<code class="block bg-gray-900 text-gray-100 p-3 rounded text-xs overflow-x-auto">
|
||||
const { checkBoundary } = require('./services/BoundaryEnforcer')
|
||||
<pre role="region" aria-label="BoundaryEnforcer example code" class="bg-gray-900 text-gray-100 p-3 rounded text-xs overflow-x-auto"><code>const { checkBoundary } = require('./services/BoundaryEnforcer')
|
||||
const result = await checkBoundary(decision)
|
||||
// Returns: { allowed: false, requires_human: true }
|
||||
</code>
|
||||
// Returns: { allowed: false, requires_human: true }</code></pre>
|
||||
</div>
|
||||
|
||||
<!-- InstructionPersistenceClassifier -->
|
||||
|
|
@ -151,11 +174,9 @@ const result = await checkBoundary(decision)
|
|||
<li>Explicitness score (0.0-1.0)</li>
|
||||
</ul>
|
||||
</div>
|
||||
<code class="block bg-gray-900 text-gray-100 p-3 rounded text-xs overflow-x-auto">
|
||||
const { classify } = require('./services/InstructionPersistenceClassifier')
|
||||
<pre role="region" aria-label="InstructionPersistenceClassifier example code" class="bg-gray-900 text-gray-100 p-3 rounded text-xs overflow-x-auto"><code>const { classify } = require('./services/InstructionPersistenceClassifier')
|
||||
const result = await classify(instruction)
|
||||
// Returns: { quadrant, persistence, temporal_scope, explicitness }
|
||||
</code>
|
||||
// Returns: { quadrant, persistence, temporal_scope, explicitness }</code></pre>
|
||||
</div>
|
||||
|
||||
<!-- CrossReferenceValidator -->
|
||||
|
|
@ -172,11 +193,9 @@ const result = await classify(instruction)
|
|||
<li>Provides correct parameters when rejected</li>
|
||||
</ul>
|
||||
</div>
|
||||
<code class="block bg-gray-900 text-gray-100 p-3 rounded text-xs overflow-x-auto">
|
||||
const { validate } = require('./services/CrossReferenceValidator')
|
||||
<pre role="region" aria-label="CrossReferenceValidator example code" class="bg-gray-900 text-gray-100 p-3 rounded text-xs overflow-x-auto"><code>const { validate } = require('./services/CrossReferenceValidator')
|
||||
const result = await validate(action, instructions)
|
||||
// Returns: { status: 'REJECTED', conflicts, correct_parameters }
|
||||
</code>
|
||||
// Returns: { status: 'REJECTED', conflicts, correct_parameters }</code></pre>
|
||||
</div>
|
||||
|
||||
<!-- ContextPressureMonitor -->
|
||||
|
|
@ -194,11 +213,9 @@ const result = await validate(action, instructions)
|
|||
<li>CRITICAL (90%+) - Suggest handoff</li>
|
||||
</ul>
|
||||
</div>
|
||||
<code class="block bg-gray-900 text-gray-100 p-3 rounded text-xs overflow-x-auto">
|
||||
const { analyzePressure } = require('./services/ContextPressureMonitor')
|
||||
<pre role="region" aria-label="ContextPressureMonitor example code" class="bg-gray-900 text-gray-100 p-3 rounded text-xs overflow-x-auto"><code>const { analyzePressure } = require('./services/ContextPressureMonitor')
|
||||
const result = await analyzePressure(tokens, messages)
|
||||
// Returns: { level: 'HIGH', score: 82, shouldReduce: true }
|
||||
</code>
|
||||
// Returns: { level: 'HIGH', score: 82, shouldReduce: true }</code></pre>
|
||||
</div>
|
||||
|
||||
<!-- MetacognitiveVerifier -->
|
||||
|
|
@ -215,11 +232,9 @@ const result = await analyzePressure(tokens, messages)
|
|||
<li>Requires confirmation if confidence < 0.7</li>
|
||||
</ul>
|
||||
</div>
|
||||
<code class="block bg-gray-900 text-gray-100 p-3 rounded text-xs overflow-x-auto">
|
||||
const { verify } = require('./services/MetacognitiveVerifier')
|
||||
<pre role="region" aria-label="MetacognitiveVerifier example code" class="bg-gray-900 text-gray-100 p-3 rounded text-xs overflow-x-auto"><code>const { verify } = require('./services/MetacognitiveVerifier')
|
||||
const result = await verify(action, reasoning)
|
||||
// Returns: { confidence: 0.65, requires_confirmation: true }
|
||||
</code>
|
||||
// Returns: { confidence: 0.65, requires_confirmation: true }</code></pre>
|
||||
</div>
|
||||
|
||||
<!-- PluralisticDeliberationOrchestrator -->
|
||||
|
|
@ -237,11 +252,9 @@ const result = await verify(action, reasoning)
|
|||
<li>Precedent storage</li>
|
||||
</ul>
|
||||
</div>
|
||||
<code class="block bg-gray-900 text-gray-100 p-3 rounded text-xs overflow-x-auto">
|
||||
const { orchestrate } = require('./services/PluralisticDeliberationOrchestrator')
|
||||
<pre role="region" aria-label="PluralisticDeliberationOrchestrator example code" class="bg-gray-900 text-gray-100 p-3 rounded text-xs overflow-x-auto"><code>const { orchestrate } = require('./services/PluralisticDeliberationOrchestrator')
|
||||
const result = await orchestrate(decision, stakeholders)
|
||||
// Returns: { decision, perspectives, conflicts_identified }
|
||||
</code>
|
||||
// Returns: { decision, perspectives, conflicts_identified }</code></pre>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
@ -622,14 +635,15 @@ npm start</code></pre>
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<!-- Footer -->
|
||||
<script src="/js/i18n-simple.js?v=1760818106"></script>
|
||||
<script src="/js/components/language-selector.js?v=1760818106"></script>
|
||||
<script src="/js/scroll-animations.js"></script>
|
||||
<script src="/js/page-transitions.js"></script>
|
||||
<script src="/js/version-manager.js"></script>
|
||||
<script src="/js/components/footer.js"></script>
|
||||
<script src="/js/i18n-simple.js?v=1761131164"></script>
|
||||
<script src="/js/components/language-selector.js?v=1761131164"></script>
|
||||
<script src="/js/scroll-animations.js?v=1761131164"></script>
|
||||
<script src="/js/page-transitions.js?v=1761131164"></script>
|
||||
<script src="/js/version-manager.js?v=1761131164"></script>
|
||||
<script src="/js/components/footer.js?v=1761131164"></script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -1,12 +1,13 @@
|
|||
{
|
||||
"version": "1.3.0",
|
||||
"buildDate": "2025-10-22T14:00:00Z",
|
||||
"version": "1.4.0",
|
||||
"buildDate": "2025-10-23T00:04:00Z",
|
||||
"changelog": [
|
||||
"FIXED: Footer i18n - Implemented deep merge instead of shallow merge",
|
||||
"Root cause: Shallow merge overwrote footer translations from common.json",
|
||||
"Solution: Recursive deepMerge() preserves nested objects during translation merge",
|
||||
"Added diagnostic logging: footer.about_heading value confirmed in console",
|
||||
"Researcher page: Categorical imperative, Berlin/Weil, WCAG compliance"
|
||||
"Implementer page: Full WCAG accessibility, diagrams from public repo, mobile optimization",
|
||||
"Added diagrams: architecture-main-flow.svg, trigger-decision-tree.svg (6.6KB each)",
|
||||
"Fixed skip link: Added id='main-content' to main element",
|
||||
"Improved touch targets: 44px minimum on all interactive elements",
|
||||
"Enhanced code blocks: ARIA labels, better mobile scrolling, 11px font on mobile",
|
||||
"Previous: Footer i18n deep merge fix, Researcher page Berlin/Weil foundations"
|
||||
],
|
||||
"forceUpdate": true,
|
||||
"minVersion": "1.1.5"
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue