tractatus/public/docs/diagrams/archive/deployment-architecture-old.svg
TheFlow 3aae86edf9 feat(implementer): major page redesign with hook architecture and responsive diagrams
## Implementer Page Enhancements

### Hero Section Redesign
- Changed title to "External Governance Services for AI Systems"
- Added three value proposition cards (Architectural Separation, Instruction Persistence, Audit Trail)
- Governance-compliant messaging (addresses vs prevents, designed to vs guarantees)
- Mobile-responsive card layout

### New "How It Works" Section
- Pattern Override Challenge explanation
- External Architecture Approach
- Request Flow with Governance diagram
- SVG download links

### New "Hook Architecture" Section (Credibility Layer)
- Architectural enforcement explanation
- Four real enforcement examples:
  * inst_084 GitHub URL Protection
  * inst_008 CSP Compliance
  * inst_027 Governance file protection
  * BoundaryEnforcer values decisions
- New hook-architecture.svg diagram showing PreToolUse flow
- Process separation and exit code enforcement details

### Deployment Section Improvements
- Removed broken "View Online" button
- PDF-only deployment guide download
- Simplified, cleaner presentation

### Responsive Diagrams
- Created system-architecture-mobile.svg (400x600px simplified)
- Created system-architecture-desktop.svg (full detail)
- Picture element with media queries for responsive switching
- Fixed request-flow-sequence.svg (restored from archive)

## Security & Governance

### inst_084 GitHub URL Modification Protocol
- HARD BLOCK on GitHub URL changes without explicit approval
- Prevents accidental private repository exposure
- Implemented in both validate-file-edit.js and validate-file-write.js
- Regex pattern matching for repository name changes
- Detailed error messages with context

### Hook Validator Improvements
- Fixed stderr output issue (console.log → console.error)
- Added checkGitHubURLProtection() function
- Enhanced error messaging for blocked actions

## Documentation

### New Deployment Guide
- Created comprehensive 14KB markdown guide (docs/markdown/deployment-guide.md)
- Generated 284KB PDF (public/docs/pdfs/deployment-guide.pdf)
- Covers: local dev, production, Docker, K8s, AWS, GCP, monitoring, security
- Removed MongoDB credential examples to comply with inst_069/070

### Diagram Archive
- Moved old diagrams to public/docs/diagrams/archive/
- Preserved deployment-architecture-old.svg
- Preserved request-flow-sequence-old.svg
- Preserved system-architecture-old.svg

## Cache & Version
- Bumped version to 0.1.2
- Updated changelog with all implementer changes
- forceUpdate: true for new diagrams and PDFs
- minVersion: 0.1.4

## Context
This addresses user feedback on implementer.html from 2025-10-26:
- Broken diagrams (404 errors, cut off at bottom)
- Need for credibility layer (hook architecture)
- GitHub URL security incident prevention
- Mobile responsiveness issues
- Deployment guide accessibility

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

Co-Authored-By: Claude <noreply@anthropic.com>
2025-10-26 23:14:22 +13:00

73 lines
4.2 KiB
XML

<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 &amp; 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 &amp; 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>