3aae86edf9
## 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>
99 lines
6.1 KiB
XML
99 lines
6.1 KiB
XML
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 600">
|
||
<defs>
|
||
<style>
|
||
.box { fill: #fff; stroke: #2563eb; stroke-width: 2; rx: 8; }
|
||
.box-ai { fill: #dbeafe; stroke: #3b82f6; stroke-width: 3; }
|
||
.box-hook { fill: #fef3c7; stroke: #f59e0b; stroke-width: 3; }
|
||
.box-validate { fill: #f0fdf4; stroke: #10b981; stroke-width: 2; }
|
||
.box-block { fill: #fee2e2; stroke: #ef4444; stroke-width: 3; }
|
||
.box-allow { fill: #f0fdf4; stroke: #10b981; stroke-width: 3; }
|
||
.label { fill: #1e293b; font-family: Arial, sans-serif; font-size: 16px; font-weight: bold; text-anchor: middle; }
|
||
.sublabel { fill: #64748b; font-family: Arial, sans-serif; font-size: 13px; text-anchor: middle; }
|
||
.code { fill: #475569; font-family: 'Courier New', monospace; font-size: 11px; }
|
||
.arrow { stroke: #64748b; stroke-width: 2; fill: none; marker-end: url(#arrow); }
|
||
.arrow-block { stroke: #ef4444; stroke-width: 3; fill: none; marker-end: url(#arrow-block); }
|
||
.arrow-allow { stroke: #10b981; stroke-width: 3; fill: none; marker-end: url(#arrow-allow); }
|
||
.title { fill: #0f172a; font-family: Arial, sans-serif; font-size: 20px; font-weight: bold; text-anchor: middle; }
|
||
.badge { fill: #dc2626; font-family: Arial, sans-serif; font-size: 12px; font-weight: bold; }
|
||
</style>
|
||
<marker id="arrow" markerWidth="10" markerHeight="10" refX="9" refY="5" orient="auto">
|
||
<polygon points="0 0, 10 5, 0 10" fill="#64748b" />
|
||
</marker>
|
||
<marker id="arrow-block" markerWidth="10" markerHeight="10" refX="9" refY="5" orient="auto">
|
||
<polygon points="0 0, 10 5, 0 10" fill="#ef4444" />
|
||
</marker>
|
||
<marker id="arrow-allow" markerWidth="10" markerHeight="10" refX="9" refY="5" orient="auto">
|
||
<polygon points="0 0, 10 5, 0 10" fill="#10b981" />
|
||
</marker>
|
||
</defs>
|
||
|
||
<text x="400" y="30" class="title">Architectural Enforcement: PreToolUse Hook Flow</text>
|
||
<text x="400" y="50" class="sublabel">How governance is enforced before AI can execute actions</text>
|
||
|
||
<rect x="50" y="80" width="200" height="80" class="box-ai" rx="8"/>
|
||
<text x="150" y="110" class="label">AI Agent Action</text>
|
||
<text x="150" y="130" class="sublabel">Edit(/public/index.html)</text>
|
||
<text x="150" y="145" class="code">Change: github.com/A/repo1</text>
|
||
<text x="150" y="157" class="code"> → github.com/A/repo2</text>
|
||
|
||
<path d="M 250 120 L 310 120" class="arrow"/>
|
||
<text x="280" y="110" class="sublabel" style="font-size: 11px;">intercept</text>
|
||
|
||
<rect x="310" y="80" width="200" height="80" class="box-hook" rx="8"/>
|
||
<text x="410" y="110" class="label">PreToolUse Hook</text>
|
||
<text x="410" y="130" class="sublabel">validate-file-edit.js</text>
|
||
<text x="410" y="145" class="code">BEFORE execution</text>
|
||
<text x="410" y="157" class="sublabel" style="fill: #f59e0b; font-weight: bold;">⚠ Architectural layer</text>
|
||
|
||
<path d="M 410 160 L 410 190" class="arrow"/>
|
||
<text x="445" y="180" class="sublabel" style="font-size: 11px;">run checks</text>
|
||
|
||
<rect x="70" y="200" width="180" height="70" class="box-validate" rx="6"/>
|
||
<text x="160" y="225" class="label" style="font-size: 14px;">✓ CSP Compliance</text>
|
||
<text x="160" y="243" class="sublabel" style="font-size: 11px;">No inline styles/scripts</text>
|
||
<text x="160" y="257" class="code" style="font-size: 10px;">checkCSPCompliance()</text>
|
||
|
||
<rect x="270" y="200" width="180" height="70" class="box-validate" rx="6"/>
|
||
<text x="360" y="225" class="label" style="font-size: 14px;">⚠ GitHub URLs</text>
|
||
<text x="360" y="243" class="sublabel" style="font-size: 11px;">inst_084: Hard block</text>
|
||
<text x="360" y="257" class="code" style="font-size: 10px;">checkGitHubURLProtection()</text>
|
||
|
||
<rect x="320" y="207" width="80" height="18" fill="#dc2626" rx="3"/>
|
||
<text x="360" y="219" class="badge" fill="#fff" text-anchor="middle">VIOLATION</text>
|
||
|
||
<rect x="470" y="200" width="180" height="70" class="box-validate" rx="6"/>
|
||
<text x="560" y="225" class="label" style="font-size: 14px;">✓ Boundaries</text>
|
||
<text x="560" y="243" class="sublabel" style="font-size: 11px;">Values decisions blocked</text>
|
||
<text x="560" y="257" class="code" style="font-size: 10px;">checkBoundaryViolation()</text>
|
||
|
||
<path d="M 360 270 L 360 310" class="arrow"/>
|
||
|
||
<polygon points="360,310 420,340 360,370 300,340" fill="#fff" stroke="#64748b" stroke-width="2"/>
|
||
<text x="360" y="345" class="label" style="font-size: 14px;">Pass?</text>
|
||
|
||
<path d="M 300 340 L 150 340 L 150 400" class="arrow-block"/>
|
||
<text x="220" y="332" class="sublabel" fill="#ef4444" style="font-weight: bold;">NO</text>
|
||
|
||
<rect x="50" y="400" width="200" height="100" class="box-block" rx="8"/>
|
||
<text x="150" y="430" class="label" fill="#dc2626">🚫 HARD BLOCK</text>
|
||
<text x="150" y="450" class="sublabel">Exit code: 2</text>
|
||
<text x="150" y="468" class="code">Action halted</text>
|
||
<text x="150" y="482" class="code">Error logged to audit</text>
|
||
<text x="150" y="496" class="sublabel" fill="#dc2626" style="font-weight: bold;">Cannot be bypassed</text>
|
||
|
||
<path d="M 420 340 L 570 340 L 570 400" class="arrow-allow"/>
|
||
<text x="500" y="332" class="sublabel" fill="#10b981" style="font-weight: bold;">YES</text>
|
||
|
||
<rect x="470" y="400" width="200" height="100" class="box-allow" rx="8"/>
|
||
<text x="570" y="430" class="label" fill="#059669">✓ ALLOWED</text>
|
||
<text x="570" y="450" class="sublabel">Exit code: 0</text>
|
||
<text x="570" y="468" class="code">Tool execution proceeds</text>
|
||
<text x="570" y="482" class="code">Audit log: PASSED</text>
|
||
<text x="570" y="496" class="sublabel" fill="#059669">Governance verified</text>
|
||
|
||
<rect x="50" y="520" width="700" height="70" fill="#f8fafc" stroke="#cbd5e1" stroke-width="1" rx="6"/>
|
||
<text x="60" y="542" class="label" style="font-size: 14px; text-anchor: start;">Key Enforcement Mechanisms:</text>
|
||
<text x="70" y="562" class="code" style="font-size: 12px; text-anchor: start;">• Hooks run in separate process (Node.js child_process) – AI cannot access or modify</text>
|
||
<text x="70" y="577" class="code" style="font-size: 12px; text-anchor: start;">• Exit codes control execution: 0=proceed, 2=block – architectural enforcement, not voluntary compliance</text>
|
||
|
||
</svg>
|