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>
This commit is contained in:
TheFlow
parent
45d01b57b0
commit
97f6a15ec1
4 changed files with 587 additions and 0 deletions
73
public/docs/diagrams/deployment-architecture.svg
Normal file
73
public/docs/diagrams/deployment-architecture.svg
Normal file
|
|
@ -0,0 +1,73 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 900 550">
|
||||
<defs>
|
||||
<style>
|
||||
.server { fill: #f1f5f9; stroke: #475569; stroke-width: 2; }
|
||||
.node { fill: #22c55e; stroke: #16a34a; stroke-width: 2; }
|
||||
.db { fill: #10b981; stroke: #059669; stroke-width: 2; }
|
||||
.monitor { fill: #f59e0b; stroke: #d97706; stroke-width: 2; }
|
||||
.label { fill: #1e293b; font-family: Arial, sans-serif; font-size: 13px; font-weight: bold; }
|
||||
.small { fill: #64748b; font-family: Arial, sans-serif; font-size: 11px; }
|
||||
.arrow { stroke: #64748b; stroke-width: 2; fill: none; marker-end: url(#arr); }
|
||||
.title { fill: #0f172a; font-family: Arial, sans-serif; font-size: 18px; font-weight: bold; }
|
||||
</style>
|
||||
<marker id="arr" markerWidth="8" markerHeight="8" refX="7" refY="4" orient="auto">
|
||||
<polygon points="0 0, 8 4, 0 8" fill="#64748b" />
|
||||
</marker>
|
||||
</defs>
|
||||
|
||||
<text x="450" y="30" class="title" text-anchor="middle">Production Deployment Architecture</text>
|
||||
|
||||
<!-- Server Box -->
|
||||
<rect x="50" y="60" width="800" height="420" class="server" rx="8"/>
|
||||
<text x="70" y="85" class="label">Production Server (Ubuntu 22.04 LTS)</text>
|
||||
|
||||
<!-- Node.js Application -->
|
||||
<rect x="100" y="120" width="280" height="140" class="node" rx="6"/>
|
||||
<text x="240" y="145" class="label" text-anchor="middle" fill="#fff">Node.js Application</text>
|
||||
<text x="240" y="165" class="small" text-anchor="middle" fill="#d1fae5">Port: 9000 (App)</text>
|
||||
<text x="240" y="183" class="small" text-anchor="middle" fill="#d1fae5">Port: 8888 (Cred Vault)</text>
|
||||
<text x="120" y="210" class="small" fill="#d1fae5">• Express.js Server</text>
|
||||
<text x="120" y="228" class="small" fill="#d1fae5">• Tractatus Services</text>
|
||||
<text x="120" y="246" class="small" fill="#d1fae5">• Systemd managed</text>
|
||||
|
||||
<!-- MongoDB -->
|
||||
<rect x="100" y="300" width="280" height="140" class="db" rx="6"/>
|
||||
<text x="240" y="325" class="label" text-anchor="middle" fill="#fff">MongoDB 7.0+</text>
|
||||
<text x="240" y="345" class="small" text-anchor="middle" fill="#d1fae5">Port: 27017</text>
|
||||
<text x="120" y="370" class="small" fill="#d1fae5">• tractatus_dev database</text>
|
||||
<text x="120" y="388" class="small" fill="#d1fae5">• governance_rules</text>
|
||||
<text x="120" y="406" class="small" fill="#d1fae5">• audit_logs</text>
|
||||
<text x="120" y="424" class="small" fill="#d1fae5">• session_state</text>
|
||||
|
||||
<!-- Monitoring Stack -->
|
||||
<rect x="480" y="120" width="280" height="140" class="monitor" rx="6"/>
|
||||
<text x="620" y="145" class="label" text-anchor="middle" fill="#fff">Monitoring & Logging</text>
|
||||
<text x="500" y="175" class="small" fill="#fef3c7">• Audit Dashboard (Port 9000)</text>
|
||||
<text x="500" y="193" class="small" fill="#fef3c7">• Service Logs (journalctl)</text>
|
||||
<text x="500" y="211" class="small" fill="#fef3c7">• Performance Metrics</text>
|
||||
<text x="500" y="229" class="small" fill="#fef3c7">• Context Pressure Analytics</text>
|
||||
<text x="500" y="247" class="small" fill="#fef3c7">• Framework Health Checks</text>
|
||||
|
||||
<!-- Backup & Security -->
|
||||
<rect x="480" y="300" width="280" height="140" class="server" rx="6" stroke="#dc2626" stroke-width="3"/>
|
||||
<text x="620" y="325" class="label" text-anchor="middle" fill="#dc2626">Security & Backup</text>
|
||||
<text x="500" y="355" class="small">• Automated DB backups</text>
|
||||
<text x="500" y="373" class="small">• SSH key-based access</text>
|
||||
<text x="500" y="391" class="small">• Defense-in-depth (5 layers)</text>
|
||||
<text x="500" y="409" class="small">• Pre-commit hooks</text>
|
||||
<text x="500" y="427" class="small">• Credential vault isolation</text>
|
||||
|
||||
<!-- Arrows -->
|
||||
<path d="M 240 260 L 240 300" class="arrow"/>
|
||||
<path d="M 380 190 L 480 190" class="arrow"/>
|
||||
<path d="M 380 370 L 480 370" class="arrow"/>
|
||||
|
||||
<!-- External Access -->
|
||||
<rect x="350" y="10" width="200" height="35" fill="#3b82f6" stroke="#1e40af" stroke-width="2" rx="4"/>
|
||||
<text x="450" y="33" class="label" text-anchor="middle" fill="#fff">HTTPS (Port 443)</text>
|
||||
|
||||
<path d="M 450 45 L 240 120" class="arrow" stroke="#3b82f6" stroke-width="3"/>
|
||||
|
||||
<!-- Legend -->
|
||||
<text x="70" y="520" class="small" fill="#475569">Production Environment: Ubuntu Server + Node.js v20 + MongoDB 7.0 + Systemd</text>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 4.2 KiB |
116
public/docs/diagrams/request-flow-sequence.svg
Normal file
116
public/docs/diagrams/request-flow-sequence.svg
Normal file
|
|
@ -0,0 +1,116 @@
|
|||
<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>
|
||||
|
After Width: | Height: | Size: 5.4 KiB |
91
public/docs/diagrams/system-architecture.svg
Normal file
91
public/docs/diagrams/system-architecture.svg
Normal file
|
|
@ -0,0 +1,91 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 600">
|
||||
<defs>
|
||||
<style>
|
||||
.component { fill: #fff; stroke: #2563eb; stroke-width: 2; }
|
||||
.service { fill: #dbeafe; stroke: #1e40af; stroke-width: 2; }
|
||||
.data { fill: #1e293b; stroke: #0f172a; stroke-width: 2; }
|
||||
.text { fill: #1e293b; font-family: Arial, sans-serif; font-size: 14px; }
|
||||
.label { fill: #1e293b; font-family: Arial, sans-serif; font-size: 12px; font-weight: bold; }
|
||||
.small { fill: #64748b; font-family: Arial, sans-serif; font-size: 10px; }
|
||||
.arrow { stroke: #475569; stroke-width: 2; fill: none; marker-end: url(#arrowhead); }
|
||||
.section-label { fill: #475569; font-family: Arial, sans-serif; font-size: 16px; 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="#475569" />
|
||||
</marker>
|
||||
</defs>
|
||||
|
||||
<!-- Application Layer -->
|
||||
<text x="400" y="30" class="section-label" text-anchor="middle">Application Layer</text>
|
||||
<rect x="300" y="50" width="200" height="60" class="component" rx="5"/>
|
||||
<text x="400" y="75" class="label" text-anchor="middle">AI Application</text>
|
||||
<text x="400" y="95" class="small" text-anchor="middle">Claude Code / Custom LLM</text>
|
||||
|
||||
<!-- Governance Layer -->
|
||||
<text x="400" y="160" class="section-label" text-anchor="middle">Tractatus Governance Layer</text>
|
||||
|
||||
<!-- Row 1: 3 services -->
|
||||
<rect x="50" y="190" width="180" height="70" class="service" rx="5"/>
|
||||
<text x="140" y="215" class="label" text-anchor="middle">BoundaryEnforcer</text>
|
||||
<text x="140" y="235" class="small" text-anchor="middle">Values Decisions</text>
|
||||
<text x="140" y="250" class="small" text-anchor="middle">(Tractatus 12.1-12.7)</text>
|
||||
|
||||
<rect x="310" y="190" width="180" height="70" class="service" rx="5"/>
|
||||
<text x="400" y="215" class="label" text-anchor="middle">InstructionPersistence</text>
|
||||
<text x="400" y="235" class="small" text-anchor="middle">Classifier</text>
|
||||
<text x="400" y="250" class="small" text-anchor="middle">(Quadrant + Persistence)</text>
|
||||
|
||||
<rect x="570" y="190" width="180" height="70" class="service" rx="5"/>
|
||||
<text x="660" y="215" class="label" text-anchor="middle">CrossReference</text>
|
||||
<text x="660" y="235" class="small" text-anchor="middle">Validator</text>
|
||||
<text x="660" y="250" class="small" text-anchor="middle">(Pattern Override Prevention)</text>
|
||||
|
||||
<!-- Row 2: 3 services -->
|
||||
<rect x="50" y="290" width="180" height="70" class="service" rx="5"/>
|
||||
<text x="140" y="315" class="label" text-anchor="middle">ContextPressure</text>
|
||||
<text x="140" y="335" class="small" text-anchor="middle">Monitor</text>
|
||||
<text x="140" y="350" class="small" text-anchor="middle">(Token & Complexity)</text>
|
||||
|
||||
<rect x="310" y="290" width="180" height="70" class="service" rx="5"/>
|
||||
<text x="400" y="315" class="label" text-anchor="middle">Metacognitive</text>
|
||||
<text x="400" y="335" class="small" text-anchor="middle">Verifier</text>
|
||||
<text x="400" y="350" class="small" text-anchor="middle">(Confidence Scoring)</text>
|
||||
|
||||
<rect x="570" y="290" width="180" height="70" class="service" rx="5"/>
|
||||
<text x="660" y="315" class="label" text-anchor="middle">Pluralistic</text>
|
||||
<text x="660" y="335" class="small" text-anchor="middle">Deliberation</text>
|
||||
<text x="660" y="350" class="small" text-anchor="middle">(Multi-Stakeholder)</text>
|
||||
|
||||
<!-- Data Layer -->
|
||||
<text x="400" y="410" class="section-label" text-anchor="middle">Data Layer</text>
|
||||
|
||||
<rect x="200" y="440" width="180" height="80" class="service" rx="5"/>
|
||||
<text x="290" y="465" class="label" text-anchor="middle">MemoryProxy v3</text>
|
||||
<text x="290" y="485" class="small" text-anchor="middle">Hybrid Storage</text>
|
||||
<text x="290" y="505" class="small" text-anchor="middle">(MongoDB + Optional API)</text>
|
||||
|
||||
<rect x="420" y="440" width="180" height="80" class="data" rx="5"/>
|
||||
<text x="510" y="465" class="label" text-anchor="middle" fill="#fff">MongoDB</text>
|
||||
<text x="510" y="485" class="small" text-anchor="middle" fill="#94a3b8">Instructions Database</text>
|
||||
<text x="510" y="505" class="small" text-anchor="middle" fill="#94a3b8">Audit Logs</text>
|
||||
|
||||
<!-- Arrows -->
|
||||
<!-- Application to Services -->
|
||||
<path d="M 400 110 L 140 190" class="arrow"/>
|
||||
<path d="M 400 110 L 400 190" class="arrow"/>
|
||||
<path d="M 400 110 L 660 190" class="arrow"/>
|
||||
|
||||
<!-- Services to MemoryProxy -->
|
||||
<path d="M 140 260 L 250 440" class="arrow"/>
|
||||
<path d="M 400 260 L 320 440" class="arrow"/>
|
||||
<path d="M 660 260 L 350 440" class="arrow"/>
|
||||
<path d="M 140 360 L 270 440" class="arrow"/>
|
||||
<path d="M 400 360 L 290 440" class="arrow"/>
|
||||
<path d="M 660 360 L 340 440" class="arrow"/>
|
||||
|
||||
<!-- MemoryProxy to MongoDB -->
|
||||
<path d="M 380 480 L 420 480" class="arrow"/>
|
||||
|
||||
<!-- Legend -->
|
||||
<text x="50" y="570" class="small" fill="#64748b">6 Governance Services • Persistent Storage • Production-Tested Architecture</text>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 4.9 KiB |
|
|
@ -81,6 +81,8 @@
|
|||
<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>
|
||||
<a href="#patterns" class="text-blue-600 hover:text-blue-800 font-medium px-2 py-2 min-h-[44px] flex items-center">Integration Patterns</a>
|
||||
<a href="#roadmap" class="text-blue-600 hover:text-blue-800 font-medium px-2 py-2 min-h-[44px] flex items-center">Roadmap</a>
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -131,6 +133,72 @@
|
|||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- System Architecture -->
|
||||
<div class="bg-white rounded-xl shadow-lg p-8 mb-8">
|
||||
<h3 class="text-xl font-bold text-gray-900 mb-4">System Architecture</h3>
|
||||
<p class="text-sm text-gray-600 mb-4">High-level overview showing how the 6 governance services integrate with your application and data layer.</p>
|
||||
<div class="bg-gray-50 rounded-lg p-6">
|
||||
<img src="/docs/diagrams/system-architecture.svg"
|
||||
alt="Tractatus System Architecture: Component interaction and data flow"
|
||||
class="diagram-img"
|
||||
loading="lazy">
|
||||
</div>
|
||||
<div class="mt-6 flex gap-4">
|
||||
<a href="/docs/diagrams/system-architecture.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 min-h-[44px]"
|
||||
aria-label="Download system architecture 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
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Request Flow Sequence -->
|
||||
<div class="bg-white rounded-xl shadow-lg p-8 mb-8">
|
||||
<h3 class="text-xl font-bold text-gray-900 mb-4">Request Flow Sequence</h3>
|
||||
<p class="text-sm text-gray-600 mb-4">Typical AI decision flow with governance enforcement: from user request through boundary checking to human approval.</p>
|
||||
<div class="bg-gray-50 rounded-lg p-6">
|
||||
<img src="/docs/diagrams/request-flow-sequence.svg"
|
||||
alt="Request Flow Sequence: How AI decisions are governed from request to completion"
|
||||
class="diagram-img"
|
||||
loading="lazy">
|
||||
</div>
|
||||
<div class="mt-6 flex gap-4">
|
||||
<a href="/docs/diagrams/request-flow-sequence.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 min-h-[44px]"
|
||||
aria-label="Download request flow sequence 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
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Deployment Architecture -->
|
||||
<div class="bg-white rounded-xl shadow-lg p-8">
|
||||
<h3 class="text-xl font-bold text-gray-900 mb-4">Deployment Architecture</h3>
|
||||
<p class="text-sm text-gray-600 mb-4">Production deployment reference showing Node.js application, MongoDB, and monitoring stack configuration.</p>
|
||||
<div class="bg-gray-50 rounded-lg p-6">
|
||||
<img src="/docs/diagrams/deployment-architecture.svg"
|
||||
alt="Deployment Architecture: Production server setup with monitoring and security"
|
||||
class="diagram-img"
|
||||
loading="lazy">
|
||||
</div>
|
||||
<div class="mt-6 flex gap-4">
|
||||
<a href="/docs/diagrams/deployment-architecture.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 min-h-[44px]"
|
||||
aria-label="Download deployment architecture 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
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Core Services -->
|
||||
|
|
@ -558,6 +626,245 @@ npm start</code></pre>
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Integration Patterns -->
|
||||
<div id="patterns" class="bg-gray-50 py-16">
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<h2 class="text-3xl font-bold text-gray-900 mb-8">Integration Patterns</h2>
|
||||
<p class="text-lg text-gray-600 mb-8">Common architectural patterns for integrating Tractatus into existing systems.</p>
|
||||
|
||||
<div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
|
||||
<!-- Pattern 1: Middleware Layer -->
|
||||
<div class="bg-white rounded-lg shadow-lg p-6">
|
||||
<h3 class="text-xl font-semibold text-gray-900 mb-3">Middleware Integration</h3>
|
||||
<p class="text-sm text-gray-600 mb-4">
|
||||
Insert governance checks as middleware in your request pipeline. Suitable for API-based AI systems.
|
||||
</p>
|
||||
<div class="bg-blue-50 border-l-4 border-blue-600 p-4 mb-4">
|
||||
<p class="text-sm text-blue-900"><strong>Use Case:</strong> REST APIs, Express.js applications</p>
|
||||
</div>
|
||||
<pre class="bg-gray-900 text-gray-100 p-3 rounded text-xs overflow-x-auto"><code>app.use(governanceMiddleware({
|
||||
services: ['BoundaryEnforcer', 'CrossReferenceValidator'],
|
||||
mode: 'strict',
|
||||
auditAll: true
|
||||
}))</code></pre>
|
||||
</div>
|
||||
|
||||
<!-- Pattern 2: Event-Driven -->
|
||||
<div class="bg-white rounded-lg shadow-lg p-6">
|
||||
<h3 class="text-xl font-semibold text-gray-900 mb-3">Event-Driven Governance</h3>
|
||||
<p class="text-sm text-gray-600 mb-4">
|
||||
Trigger governance checks via events. Suitable for async workflows and microservices.
|
||||
</p>
|
||||
<div class="bg-green-50 border-l-4 border-green-600 p-4 mb-4">
|
||||
<p class="text-sm text-green-900"><strong>Use Case:</strong> Message queues, event buses, async processing</p>
|
||||
</div>
|
||||
<pre class="bg-gray-900 text-gray-100 p-3 rounded text-xs overflow-x-auto"><code>eventBus.on('ai:decision', async (event) => {
|
||||
const result = await checkBoundary(event.decision)
|
||||
if (!result.allowed) {
|
||||
await requestHumanApproval(event, result)
|
||||
}
|
||||
})</code></pre>
|
||||
</div>
|
||||
|
||||
<!-- Pattern 3: Hook System -->
|
||||
<div class="bg-white rounded-lg shadow-lg p-6">
|
||||
<h3 class="text-xl font-semibold text-gray-900 mb-3">Pre/Post-Action Hooks</h3>
|
||||
<p class="text-sm text-gray-600 mb-4">
|
||||
Validate actions before and after execution. Current production pattern for Claude Code.
|
||||
</p>
|
||||
<div class="bg-purple-50 border-l-4 border-purple-600 p-4 mb-4">
|
||||
<p class="text-sm text-purple-900"><strong>Use Case:</strong> LLM tool use, autonomous agents</p>
|
||||
</div>
|
||||
<pre class="bg-gray-900 text-gray-100 p-3 rounded text-xs overflow-x-auto"><code>hooks: {
|
||||
PreToolUse: governanceCheck,
|
||||
PostToolUse: auditLog,
|
||||
SessionStart: loadInstructions,
|
||||
SessionEnd: cleanup
|
||||
}</code></pre>
|
||||
</div>
|
||||
|
||||
<!-- Pattern 4: Sidecar Pattern -->
|
||||
<div class="bg-white rounded-lg shadow-lg p-6">
|
||||
<h3 class="text-xl font-semibold text-gray-900 mb-3">Sidecar Governance Service</h3>
|
||||
<p class="text-sm text-gray-600 mb-4">
|
||||
Deploy governance as a separate service. Suitable for multi-LLM or polyglot environments.
|
||||
</p>
|
||||
<div class="bg-amber-50 border-l-4 border-amber-600 p-4 mb-4">
|
||||
<p class="text-sm text-amber-900"><strong>Use Case:</strong> Kubernetes, containerized deployments</p>
|
||||
</div>
|
||||
<pre class="bg-gray-900 text-gray-100 p-3 rounded text-xs overflow-x-auto"><code>// AI Service makes HTTP call
|
||||
const govResponse = await fetch(
|
||||
'http://governance-sidecar:8080/check',
|
||||
{ method: 'POST', body: JSON.stringify(decision) }
|
||||
)</code></pre>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Development Roadmap -->
|
||||
<div id="roadmap" 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-4">Development Roadmap & Collaboration</h2>
|
||||
<p class="text-lg text-gray-600 mb-8">
|
||||
Tractatus is an active research framework. We welcome collaboration on priority development areas.
|
||||
</p>
|
||||
|
||||
<div class="bg-gradient-to-br from-blue-50 to-indigo-50 rounded-xl p-8 mb-8 border-2 border-blue-200">
|
||||
<h3 class="text-2xl font-bold text-gray-900 mb-4">🚀 Priority Areas for Development</h3>
|
||||
<p class="text-gray-700 mb-6">
|
||||
These initiatives represent high-impact opportunities for framework enhancement. Technical contributors, researchers, and organizations are encouraged to engage.
|
||||
</p>
|
||||
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||
<!-- Multi-LLM Support -->
|
||||
<div class="bg-white rounded-lg p-6 shadow-md">
|
||||
<div class="flex items-start mb-3">
|
||||
<span class="text-3xl mr-3">🤖</span>
|
||||
<div>
|
||||
<h4 class="text-lg font-bold text-gray-900">Multi-LLM Support</h4>
|
||||
<p class="text-sm text-gray-500">Status: Research Phase</p>
|
||||
</div>
|
||||
</div>
|
||||
<p class="text-sm text-gray-700 mb-3">
|
||||
Extend governance to GPT-4, Gemini, Llama, and local models. Requires adapting hook architecture to different LLM interfaces.
|
||||
</p>
|
||||
<div class="text-xs text-gray-600">
|
||||
<strong>Technical Challenges:</strong> Provider-specific tool/function calling, rate limiting, context window differences
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Language Bindings -->
|
||||
<div class="bg-white rounded-lg p-6 shadow-md">
|
||||
<div class="flex items-start mb-3">
|
||||
<span class="text-3xl mr-3">📚</span>
|
||||
<div>
|
||||
<h4 class="text-lg font-bold text-gray-900">Language Bindings</h4>
|
||||
<p class="text-sm text-gray-500">Status: Community Interest</p>
|
||||
</div>
|
||||
</div>
|
||||
<p class="text-sm text-gray-700 mb-3">
|
||||
Python, Go, and Rust implementations to serve broader developer communities. Core logic is portable; MongoDB integration is universal.
|
||||
</p>
|
||||
<div class="text-xs text-gray-600">
|
||||
<strong>Value:</strong> Enable polyglot AI stacks, performance-critical applications (Rust), data science workflows (Python)
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Cloud Deployment Patterns -->
|
||||
<div class="bg-white rounded-lg p-6 shadow-md">
|
||||
<div class="flex items-start mb-3">
|
||||
<span class="text-3xl mr-3">☁️</span>
|
||||
<div>
|
||||
<h4 class="text-lg font-bold text-gray-900">Cloud-Native Deployment</h4>
|
||||
<p class="text-sm text-gray-500">Status: Reference Architectures Needed</p>
|
||||
</div>
|
||||
</div>
|
||||
<p class="text-sm text-gray-700 mb-3">
|
||||
Terraform/Helm charts for AWS, Azure, GCP. Include managed MongoDB (Atlas), auto-scaling, and monitoring integration.
|
||||
</p>
|
||||
<div class="text-xs text-gray-600">
|
||||
<strong>Deliverables:</strong> Reference IaC templates, cost optimization guides, security hardening checklist
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Framework Integrations -->
|
||||
<div class="bg-white rounded-lg p-6 shadow-md">
|
||||
<div class="flex items-start mb-3">
|
||||
<span class="text-3xl mr-3">🔗</span>
|
||||
<div>
|
||||
<h4 class="text-lg font-bold text-gray-900">AI Framework Integration</h4>
|
||||
<p class="text-sm text-gray-500">Status: Conceptual</p>
|
||||
</div>
|
||||
</div>
|
||||
<p class="text-sm text-gray-700 mb-3">
|
||||
Adapters for LangChain, Semantic Kernel, AutoGPT, and CrewAI. Enable governance for existing agent frameworks.
|
||||
</p>
|
||||
<div class="text-xs text-gray-600">
|
||||
<strong>Approach:</strong> Plugin/middleware architecture that wraps agent actions with governance checks
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Performance at Scale -->
|
||||
<div class="bg-white rounded-lg p-6 shadow-md">
|
||||
<div class="flex items-start mb-3">
|
||||
<span class="text-3xl mr-3">⚡</span>
|
||||
<div>
|
||||
<h4 class="text-lg font-bold text-gray-900">Enterprise-Scale Performance</h4>
|
||||
<p class="text-sm text-gray-500">Status: Validation Needed</p>
|
||||
</div>
|
||||
</div>
|
||||
<p class="text-sm text-gray-700 mb-3">
|
||||
Optimize for 1000+ concurrent AI agents. Requires caching strategies, rule compilation, and distributed audit logging.
|
||||
</p>
|
||||
<div class="text-xs text-gray-600">
|
||||
<strong>Metrics Target:</strong> < 5ms governance overhead per decision, 99.9% uptime, horizontal scalability
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Additional Governance Services -->
|
||||
<div class="bg-white rounded-lg p-6 shadow-md">
|
||||
<div class="flex items-start mb-3">
|
||||
<span class="text-3xl mr-3">🛡️</span>
|
||||
<div>
|
||||
<h4 class="text-lg font-bold text-gray-900">Extended Governance Services</h4>
|
||||
<p class="text-sm text-gray-500">Status: Research</p>
|
||||
</div>
|
||||
</div>
|
||||
<p class="text-sm text-gray-700 mb-3">
|
||||
Cost monitoring, rate limiting, PII detection, adversarial prompt defense. Domain-specific services for regulated industries.
|
||||
</p>
|
||||
<div class="text-xs text-gray-600">
|
||||
<strong>Examples:</strong> FinancialComplianceService, HealthcarePrivacyService, CostBudgetEnforcer
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Collaboration CTA -->
|
||||
<div class="bg-white rounded-xl shadow-lg p-8">
|
||||
<h3 class="text-2xl font-bold text-gray-900 mb-4">Get Involved</h3>
|
||||
<p class="text-gray-700 mb-6">
|
||||
Tractatus is Apache 2.0 licensed research. We welcome contributions, pilot implementations, and collaborative research partnerships.
|
||||
</p>
|
||||
|
||||
<div class="grid grid-cols-1 md:grid-cols-3 gap-6">
|
||||
<div class="border-2 border-blue-200 rounded-lg p-4 hover:border-blue-400 transition">
|
||||
<h4 class="font-bold text-gray-900 mb-2">👨💻 Technical Contributors</h4>
|
||||
<p class="text-sm text-gray-600 mb-3">Implement features, fix bugs, improve documentation</p>
|
||||
<a href="https://github.com/AgenticGovernance/tractatus-framework/blob/main/CONTRIBUTING.md"
|
||||
class="text-blue-600 hover:text-blue-700 text-sm font-medium"
|
||||
target="_blank" rel="noopener noreferrer">
|
||||
→ Contributing Guide
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="border-2 border-purple-200 rounded-lg p-4 hover:border-purple-400 transition">
|
||||
<h4 class="font-bold text-gray-900 mb-2">🔬 Research Partners</h4>
|
||||
<p class="text-sm text-gray-600 mb-3">Validation studies, academic collaboration, case studies</p>
|
||||
<a href="mailto:research@agenticgovernance.digital"
|
||||
class="text-purple-600 hover:text-purple-700 text-sm font-medium">
|
||||
→ research@agenticgovernance.digital
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="border-2 border-green-200 rounded-lg p-4 hover:border-green-400 transition">
|
||||
<h4 class="font-bold text-gray-900 mb-2">🏢 Organization Pilots</h4>
|
||||
<p class="text-sm text-gray-600 mb-3">Production deployments, enterprise requirements, feedback loops</p>
|
||||
<a href="/case-submission.html"
|
||||
class="text-green-600 hover:text-green-700 text-sm font-medium">
|
||||
→ Submit Case Study
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mt-8 bg-blue-50 border-l-4 border-blue-600 p-4 rounded-r-lg">
|
||||
<p class="text-sm text-blue-900">
|
||||
<strong>Why Collaborate?</strong> Tractatus addresses real gaps in AI safety. Early adopters shape the framework's evolution and gain expertise in structural AI governance—a differentiating capability as regulatory requirements mature.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Resources -->
|
||||
<div class="bg-blue-50 py-16">
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue