tractatus/public/docs/diagrams/request-flow-sequence.svg
TheFlow 97f6a15ec1 feat(implementer): add world-class technical content with diagrams and roadmap
Major enhancements to implementer.html for PM/architect/developer audience:

**New Diagrams (3):**
- System Architecture: Component interaction and data flow
- Deployment Architecture: Production setup with monitoring
- Request Flow Sequence: Governance enforcement flow

**New Sections:**
- Integration Patterns (4 patterns): Middleware, Event-Driven, Hooks, Sidecar
- Development Roadmap: Priority areas for framework evolution
  * Multi-LLM Support (GPT-4, Gemini, Llama, local models)
  * Language Bindings (Python, Go, Rust)
  * Cloud-Native Deployment (AWS, Azure, GCP)
  * AI Framework Integration (LangChain, Semantic Kernel, etc.)
  * Enterprise-Scale Performance optimization
  * Extended Governance Services (cost, rate limiting, PII)
- Collaboration CTAs: Technical contributors, research partners, org pilots

**Improvements:**
- Updated Quick Links navigation (added Patterns, Roadmap)
- GitHub repository verified (all links working)
- Professional presentation with code examples
- Clear value proposition for early adopters

Positions Tractatus as actively evolving framework welcoming collaboration.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
2025-10-26 20:08:59 +13:00

116 lines
5.4 KiB
XML

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 850 700">
<defs>
<style>
.actor { fill: #fff; stroke: #2563eb; stroke-width: 2; }
.lifeline { stroke: #cbd5e1; stroke-width: 2; stroke-dasharray: 5,5; }
.activation { fill: #dbeafe; stroke: #2563eb; stroke-width: 2; }
.arrow { stroke: #475569; stroke-width: 2; fill: none; marker-end: url(#arrowSeq); }
.return { stroke: #94a3b8; stroke-width: 2; fill: none; stroke-dasharray: 5,3; marker-end: url(#arrowReturn); }
.label { fill: #1e293b; font-family: Arial, sans-serif; font-size: 11px; }
.title { fill: #0f172a; font-family: Arial, sans-serif; font-size: 18px; font-weight: bold; }
.note { fill: #fef3c7; stroke: #f59e0b; stroke-width: 1; }
.note-text { fill: #78350f; font-family: Arial, sans-serif; font-size: 10px; }
</style>
<marker id="arrowSeq" markerWidth="8" markerHeight="8" refX="7" refY="4" orient="auto">
<polygon points="0 0, 8 4, 0 8" fill="#475569" />
</marker>
<marker id="arrowReturn" markerWidth="8" markerHeight="8" refX="7" refY="4" orient="auto">
<polygon points="0 0, 8 4, 0 8" fill="#94a3b8" />
</marker>
</defs>
<text x="425" y="30" class="title" text-anchor="middle">AI Decision Flow with Governance</text>
<!-- Actors -->
<rect x="30" y="60" width="100" height="40" class="actor" rx="5"/>
<text x="80" y="85" class="label" text-anchor="middle" font-weight="bold">User</text>
<rect x="180" y="60" width="120" height="40" class="actor" rx="5"/>
<text x="240" y="85" class="label" text-anchor="middle" font-weight="bold">AI Agent</text>
<rect x="350" y="60" width="130" height="40" class="actor" rx="5"/>
<text x="415" y="85" class="label" text-anchor="middle" font-weight="bold">Governance</text>
<rect x="530" y="60" width="130" height="40" class="actor" rx="5"/>
<text x="595" y="85" class="label" text-anchor="middle" font-weight="bold">MongoDB</text>
<rect x="710" y="60" width="100" height="40" class="actor" rx="5"/>
<text x="760" y="85" class="label" text-anchor="middle" font-weight="bold">Human</text>
<!-- Lifelines -->
<line x1="80" y1="100" x2="80" y2="650" class="lifeline"/>
<line x1="240" y1="100" x2="240" y2="650" class="lifeline"/>
<line x1="415" y1="100" x2="415" y2="650" class="lifeline"/>
<line x1="595" y1="100" x2="595" y2="650" class="lifeline"/>
<line x1="760" y1="100" x2="760" y2="650" class="lifeline"/>
<!-- Step 1: User Request -->
<path d="M 80 130 L 240 130" class="arrow"/>
<text x="160" y="125" class="label">1. "Change privacy policy"</text>
<!-- Step 2: AI analyzes -->
<rect x="230" y="135" width="20" height="40" class="activation"/>
<text x="270" y="160" class="label">2. Analyze request</text>
<!-- Step 3: Check BoundaryEnforcer -->
<path d="M 240 180 L 415 180" class="arrow"/>
<text x="310" y="175" class="label">3. checkBoundary(decision)</text>
<rect x="405" y="185" width="20" height="60" class="activation"/>
<!-- Step 4: Query instructions -->
<path d="M 415 210 L 595 210" class="arrow"/>
<text x="480" y="205" class="label">4. Get stored instructions</text>
<rect x="585" y="215" width="20" height="30" class="activation"/>
<path d="M 595 240 L 415 240" class="return"/>
<!-- Step 5: Boundary violation detected -->
<path d="M 415 260 L 240 260" class="return"/>
<text x="300" y="255" class="label">5. REJECTED (12.1 - Values)</text>
<!-- Note -->
<rect x="250" y="270" width="200" height="45" class="note" rx="3"/>
<text x="260" y="285" class="note-text">BoundaryEnforcer: "Values decisions</text>
<text x="260" y="298" class="note-text">require human approval"</text>
<text x="260" y="311" class="note-text">(Tractatus 12.1)</text>
<!-- Step 6: Request human approval -->
<path d="M 240 330 L 760 330" class="arrow"/>
<text x="450" y="325" class="label">6. Request approval (with AI analysis)</text>
<rect x="750" y="335" width="20" height="50" class="activation"/>
<!-- Step 7: Human decision -->
<path d="M 760 380 L 240 380" class="return"/>
<text x="450" y="375" class="label">7. Approved with modifications</text>
<!-- Step 8: Log decision -->
<rect x="230" y="390" width="20" height="40" class="activation"/>
<path d="M 240 410 L 415 410" class="arrow"/>
<text x="300" y="405" class="label">8. Log audit trail</text>
<rect x="405" y="415" width="20" height="40" class="activation"/>
<path d="M 415 435 L 595 435" class="arrow"/>
<text x="480" y="430" class="label">9. Store audit</text>
<rect x="585" y="440" width="20" height="30" class="activation"/>
<path d="M 595 465 L 415 465" class="return"/>
<path d="M 415 480 L 240 480" class="return"/>
<!-- Step 10: Execute with safeguards -->
<rect x="230" y="490" width="20" height="80" class="activation"/>
<text x="260" y="520" class="label">10. Execute decision</text>
<text x="260" y="535" class="label">with human-approved</text>
<text x="260" y="550" class="label">modifications</text>
<!-- Step 11: Return to user -->
<path d="M 240 580 L 80 580" class="return"/>
<text x="140" y="575" class="label">11. Completed (with audit trail)</text>
<!-- Summary box -->
<rect x="50" y="610" width="750" height="35" fill="#eff6ff" stroke="#3b82f6" stroke-width="2" rx="4"/>
<text x="425" y="633" class="label" text-anchor="middle" fill="#1e40af">
<tspan font-weight="bold">Result:</tspan> Human oversight enforced architecturally • Audit trail created • Values preserved
</text>
</svg>