john/tractatus
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions
tractatus/public/docs/diagrams/archive/request-flow-sequence-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

116 lines
5.4 KiB
XML
Raw Blame History

<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>
Reference in a new issue View git blame Copy permalink