diff --git a/docs/architecture-diagram.mmd b/docs/architecture-diagram.mmd
new file mode 100644
index 00000000..cc223631
--- /dev/null
+++ b/docs/architecture-diagram.mmd
@@ -0,0 +1,52 @@
+graph TB
+    subgraph "API & Web Interface Layer"
+        API["<b>API Endpoints</b><br/>/api/demo/classify<br/>/api/demo/boundary-check<br/>/api/demo/pressure-check<br/>/api/admin/* • /api/auth/*"]
+        WEB["<b>Web Interface</b><br/>Interactive Demos<br/>Admin Dashboard<br/>Documentation<br/>Blog System"]
+    end
+
+    subgraph "Tractatus Governance Layer"
+        BE["<b>BoundaryEnforcer</b><br/>Blocks values decisions<br/>• Privacy decisions<br/>• Ethical trade-offs<br/>• User agency violations"]
+        IPC["<b>InstructionPersistenceClassifier</b><br/>Classifies & stores instructions<br/>• Quadrant (STR/OPS/TAC/SYS)<br/>• Persistence (HIGH/MED/LOW)<br/>• Temporal scope"]
+        CRV["<b>CrossReferenceValidator</b><br/>Prevents pattern bias override<br/>• Checks instruction history<br/>• Detects conflicts (27027)<br/>• Blocks contradictions"]
+        CPM["<b>ContextPressureMonitor</b><br/>Detects degraded conditions<br/>• Token budget tracking<br/>• Error accumulation<br/>• Checkpoint reporting"]
+        MV["<b>MetacognitiveVerifier</b><br/>Self-checks complex operations<br/>• >3 files or >5 steps<br/>• Architecture changes<br/>• Confidence scoring"]
+    end
+
+    subgraph "MongoDB Persistence Layer"
+        GR["<b>governance_rules</b><br/>• rule_id (STR-001...)<br/>• quadrant<br/>• persistence level<br/>• enforced_by<br/>• violation_action<br/>• active status"]
+        AL["<b>audit_logs</b><br/>• timestamp<br/>• service (which enforcer)<br/>• action (BLOCK/WARN)<br/>• instruction<br/>• rule_violated<br/>• session_id"]
+        SS["<b>session_state</b><br/>• session_id<br/>• token_count<br/>• message_count<br/>• pressure_level<br/>• last_checkpoint<br/>• framework_active"]
+        IH["<b>instruction_history</b><br/>• instruction_id<br/>• content<br/>• classification<br/>• persistence<br/>• created_at<br/>• active status"]
+    end
+
+    subgraph "Claude Code Runtime Environment"
+        CC["<b>Base LLM Environment</b><br/>Session Management • Tool Access<br/>File System Operations<br/>.claude/instruction-history.json<br/>.claude/session-state.json<br/>.claude/token-checkpoints.json<br/><i>Context Window (200k tokens)</i>"]
+    end
+
+    %% Data Flow
+    API --> BE
+    API --> IPC
+    WEB --> CRV
+    WEB --> CPM
+
+    BE --> GR
+    IPC --> AL
+    CRV --> IH
+    CPM --> SS
+    MV --> AL
+
+    GR --> CC
+    AL --> CC
+    SS --> CC
+    IH --> CC
+
+    %% Styling
+    classDef api fill:#f3e8ff,stroke:#a855f7,stroke-width:2px
+    classDef governance fill:#f0fdf4,stroke:#10b981,stroke-width:2px
+    classDef persistence fill:#fef9c3,stroke:#eab308,stroke-width:2px
+    classDef runtime fill:#dbeafe,stroke:#3b82f6,stroke-width:2px
+
+    class API,WEB api
+    class BE,IPC,CRV,CPM,MV governance
+    class GR,AL,SS,IH persistence
+    class CC runtime
diff --git a/docs/markdown/technical-architecture.md b/docs/markdown/technical-architecture.md
new file mode 100644
index 00000000..d7ed6277
--- /dev/null
+++ b/docs/markdown/technical-architecture.md
@@ -0,0 +1,595 @@
+# Technical Architecture
+
+**Last Updated:** October 12, 2025
+**Audience:** Technical, Implementer, Researcher
+**Quadrant:** SYSTEM
+**Persistence:** HIGH
+
+---
+
+## Overview
+
+The Tractatus Framework operates as a governance layer that integrates with Claude Code's runtime environment. This document provides a comprehensive technical architecture diagram and explanation of how the components interact.
+
+## System Architecture
+
+The system is organized into four distinct layers that work together to provide robust AI governance:
+
+![Tractatus Architecture Diagram](../../public/images/architecture-diagram.png)
+
+### 1. Claude Code Runtime Environment (Foundation Layer)
+
+**Purpose:** Provides the base LLM environment and session management infrastructure
+
+**Components:**
+- **Context Window:** 200,000 token budget for conversation and file content
+- **Session Management:** Persistent session state tracking and token checkpoints
+- **Tool Access:** Bash, Read, Write, Edit, and other file system operations
+- **File System:** Dedicated `.claude/` directory for framework state
+
+**Persistent Files:**
+- `.claude/instruction-history.json` - Classified instruction database
+- `.claude/session-state.json` - Current session tracking
+- `.claude/token-checkpoints.json` - Token milestone records
+
+**Key Features:**
+- Session continuity across conversation compactions
+- Tool access for framework enforcement
+- File system operations for governance rules
+- Context window management
+
+---
+
+### 2. Tractatus Governance Layer
+
+**Purpose:** Enforces governance rules and prevents AI failure modes
+
+This layer consists of five core services that monitor, classify, validate, and verify AI operations:
+
+#### A. BoundaryEnforcer
+
+**Function:** Blocks values decisions requiring human approval
+
+**Blocks:**
+- Privacy policy changes
+- Ethical trade-offs
+- User agency violations
+- Strategic mission changes
+- Indigenous rights decisions
+
+**Enforcement:** BLOCK_AND_ESCALATE action when boundary violated
+
+**Integration:** Checks all decisions before execution, escalates to human approval
+
+**Example Use Case:** Prevents AI from autonomously deciding privacy policy changes without explicit human approval
+
+---
+
+#### B. InstructionPersistenceClassifier
+
+**Function:** Classifies and stores all explicit instructions
+
+**Classification Dimensions:**
+- **Quadrant:** STRATEGIC, OPERATIONAL, TACTICAL, SYSTEM, STOCHASTIC
+- **Persistence Level:** HIGH (session-permanent), MEDIUM (contextual), LOW (transient)
+- **Temporal Scope:** permanent, session, task, immediate
+
+**Storage:** Appends to `.claude/instruction-history.json` with metadata
+
+**Integration:** Intercepts all user instructions for classification before execution
+
+**Example Use Case:** User says "Always use MongoDB port 27027" → Classified as SYSTEM/HIGH/session → Stored for validation
+
+---
+
+#### C. CrossReferenceValidator
+
+**Function:** Prevents pattern bias from overriding explicit instructions
+
+**Validation:**
+- Queries `.claude/instruction-history.json` for conflicting instructions
+- Detects contradictions (e.g., specified port vs. default port)
+- Blocks actions that violate HIGH persistence instructions
+
+**Enforcement:** BLOCK action when conflict detected
+
+**Integration:** Called before database operations, config changes, architecture decisions
+
+**Example Use Case:** The 27027 Incident - AI attempted to use default port 27017, validator caught conflict with explicit instruction to use 27027
+
+---
+
+#### D. ContextPressureMonitor
+
+**Function:** Detects degraded operating conditions before failure
+
+**Monitoring:**
+- **Token Budget:** Tracks usage against 200k limit
+- **Message Count:** Monitors conversation length
+- **Error Accumulation:** Counts failures and retries
+- **Checkpoint Reporting:** Mandatory reporting at 25%, 50%, 75% milestones
+
+**Pressure Levels:**
+- NORMAL (0-30%): Standard operations
+- ELEVATED (30-50%): Increased vigilance
+- HIGH (50-70%): Degraded performance expected
+- CRITICAL (70-90%): Major failures likely
+- DANGEROUS (90%+): Framework collapse imminent
+
+**Integration:** Reports pressure to user at checkpoints, recommends actions
+
+**Example Use Case:** At 107k tokens (53.5%), monitor detects ELEVATED pressure and warns user of potential pattern bias
+
+---
+
+#### E. MetacognitiveVerifier
+
+**Function:** Self-checks complex operations before execution
+
+**Triggers:**
+- Operations affecting >3 files
+- Workflows with >5 steps
+- Architecture changes
+- Security implementations
+
+**Verification:**
+- Alignment with user intent
+- Coherence of approach
+- Completeness of solution
+- Safety considerations
+- Alternative approaches
+
+**Output:** Confidence score + alternatives
+
+**Integration:** Selective mode - only for complex operations
+
+**Example Use Case:** Before deploying 8-file deployment package, verifies all components align with user requirements and checks for missing pieces
+
+---
+
+### 3. MongoDB Persistence Layer
+
+**Purpose:** Stores governance rules, audit logs, and operational state
+
+#### A. governance_rules Collection
+
+**Schema:**
+```json
+{
+  "rule_id": "STR-001",
+  "quadrant": "STRATEGIC",
+  "persistence": "HIGH",
+  "title": "Human Approval for Values Decisions",
+  "content": "All decisions involving privacy, ethics...",
+  "enforced_by": "BoundaryEnforcer",
+  "violation_action": "BLOCK_AND_ESCALATE",
+  "examples": ["Privacy policy changes", "Ethical trade-offs"],
+  "rationale": "Values decisions cannot be systematized",
+  "active": true,
+  "created_at": "2025-10-12T00:00:00.000Z",
+  "updated_at": "2025-10-12T00:00:00.000Z"
+}
+```
+
+**Indexes:**
+- `rule_id` (unique)
+- `quadrant`
+- `persistence`
+- `enforced_by`
+- `active`
+
+**Usage:** Governance services query this collection for enforcement rules
+
+---
+
+#### B. audit_logs Collection
+
+**Schema:**
+```json
+{
+  "timestamp": "2025-10-12T07:30:15.000Z",
+  "service": "BoundaryEnforcer",
+  "action": "BLOCK",
+  "instruction": "Change privacy policy to share user data",
+  "rule_violated": "STR-001",
+  "session_id": "2025-10-07-001",
+  "user_notified": true,
+  "human_override": null
+}
+```
+
+**Indexes:**
+- `timestamp`
+- `service`
+- `session_id`
+- `rule_violated`
+
+**Usage:** Comprehensive audit trail for governance enforcement
+
+---
+
+#### C. session_state Collection
+
+**Schema:**
+```json
+{
+  "session_id": "2025-10-07-001",
+  "token_count": 62000,
+  "message_count": 45,
+  "pressure_level": "ELEVATED",
+  "pressure_score": 35.2,
+  "last_checkpoint": 50000,
+  "next_checkpoint": 100000,
+  "framework_active": true,
+  "services_active": {
+    "BoundaryEnforcer": true,
+    "InstructionPersistenceClassifier": true,
+    "CrossReferenceValidator": true,
+    "ContextPressureMonitor": true,
+    "MetacognitiveVerifier": true
+  },
+  "started_at": "2025-10-12T06:00:00.000Z",
+  "updated_at": "2025-10-12T07:30:15.000Z"
+}
+```
+
+**Usage:** Real-time session monitoring and pressure tracking
+
+---
+
+#### D. instruction_history Collection
+
+**Schema:**
+```json
+{
+  "instruction_id": "inst_001",
+  "content": "Always use MongoDB port 27027 for this project",
+  "classification": {
+    "quadrant": "SYSTEM",
+    "persistence": "HIGH",
+    "temporal_scope": "session"
+  },
+  "enforced_by": ["CrossReferenceValidator"],
+  "active": true,
+  "created_at": "2025-10-12T06:15:00.000Z",
+  "expires_at": null,
+  "session_id": "2025-10-07-001"
+}
+```
+
+**Indexes:**
+- `instruction_id` (unique)
+- `classification.quadrant`
+- `classification.persistence`
+- `active`
+- `session_id`
+
+**Usage:** CrossReferenceValidator queries for conflicts, InstructionPersistenceClassifier writes
+
+---
+
+### 4. API & Web Interface Layer
+
+**Purpose:** Provides programmatic and user access to governance features
+
+#### A. API Endpoints
+
+**Demo Endpoints:**
+- `POST /api/demo/classify` - Instruction classification demo
+- `POST /api/demo/boundary-check` - Boundary enforcement demo
+- `POST /api/demo/pressure-check` - Context pressure calculation demo
+
+**Admin Endpoints:**
+- `POST /api/admin/rules` - Manage governance rules
+- `GET /api/admin/audit-logs` - View audit trail
+- `GET /api/admin/sessions` - Session monitoring
+
+**Auth Endpoints:**
+- `POST /api/auth/login` - Admin authentication
+- `POST /api/auth/logout` - Session termination
+
+**Health Endpoint:**
+- `GET /api/health` - System health check
+
+---
+
+#### B. Web Interface
+
+**Interactive Demos:**
+- Classification Demo (`/demos/classification-demo.html`)
+- Boundary Enforcement Demo (`/demos/boundary-demo.html`)
+- 27027 Incident Visualizer (`/demos/27027-demo.html`)
+- Context Pressure Monitor (`/demos/tractatus-demo.html`)
+
+**Admin Dashboard:**
+- Rule management interface
+- Audit log viewer
+- Session monitoring
+- Media triage (AI-assisted moderation)
+
+**Documentation:**
+- Markdown-based documentation system
+- Interactive search with faceted filtering
+- PDF exports of key documents
+- Architecture diagrams
+
+**Blog System:**
+- AI-curated blog post suggestions
+- Human approval workflow
+- Category-based organization
+
+**Case Submissions:**
+- Public submission form
+- AI relevance analysis
+- Admin moderation queue
+
+**Media Inquiry:**
+- Journalist contact form
+- AI-assisted triage
+- Priority assessment
+
+---
+
+## Data Flow
+
+### 1. User Action → Governance Check → Execution
+
+```
+User issues instruction
+    ↓
+InstructionPersistenceClassifier classifies & stores
+    ↓
+CrossReferenceValidator checks for conflicts
+    ↓
+BoundaryEnforcer checks for values decisions
+    ↓
+ContextPressureMonitor assesses current pressure
+    ↓
+MetacognitiveVerifier checks complexity (if triggered)
+    ↓
+Action executes OR blocked with explanation
+    ↓
+Audit log entry created
+```
+
+### 2. Session Initialization Flow
+
+```
+Claude Code starts session
+    ↓
+scripts/session-init.js runs
+    ↓
+Load .claude/instruction-history.json
+    ↓
+Reset token checkpoints
+    ↓
+Initialize ContextPressureMonitor
+    ↓
+Verify all 5 services operational
+    ↓
+Report framework status to user
+```
+
+### 3. Context Pressure Monitoring Flow
+
+```
+Every 50k tokens (25% increments)
+    ↓
+ContextPressureMonitor calculates score
+    ↓
+Pressure level determined (NORMAL/ELEVATED/HIGH/CRITICAL/DANGEROUS)
+    ↓
+MANDATORY report to user with format:
+    "📊 Context Pressure: [LEVEL] ([SCORE]%) | Tokens: [X]/200000 | Next: [Y]"
+    ↓
+Recommendations provided if elevated
+```
+
+### 4. The 27027 Incident Prevention Flow
+
+```
+User explicitly instructs: "Use MongoDB port 27027"
+    ↓
+InstructionPersistenceClassifier:
+    Quadrant: SYSTEM, Persistence: HIGH, Scope: session
+    Stores in .claude/instruction-history.json
+    ↓
+[107k tokens later, context pressure builds]
+    ↓
+AI attempts to use default port 27017 (pattern recognition)
+    ↓
+CrossReferenceValidator intercepts:
+    Queries instruction_history.json
+    Finds conflict: "User specified 27027, AI attempting 27017"
+    BLOCKS action
+    ↓
+User notified: "CONFLICT DETECTED: User specified port 27027..."
+    ↓
+AI corrects and uses 27027
+    ↓
+Audit log created:
+    service: "CrossReferenceValidator"
+    action: "BLOCK"
+    rule_violated: "SYS-001"
+```
+
+---
+
+## Integration Points
+
+### Claude Code ↔ Tractatus
+
+**1. Tool Access Integration:**
+- Tractatus uses Bash tool to run governance scripts
+- Read/Write tools access `.claude/` directory for state
+- Session state persisted across conversation compactions
+
+**2. Framework Enforcement:**
+- Pre-action checks before file operations
+- Instruction classification on user input
+- Pressure monitoring via token tracking
+
+**3. Session Continuity:**
+- `scripts/session-init.js` runs on session start/continuation
+- `.claude/session-state.json` maintains active status
+- Token checkpoints saved for resumption
+
+---
+
+### Tractatus ↔ MongoDB
+
+**1. Rule Enforcement:**
+- Governance services query `governance_rules` for enforcement
+- Active rules loaded into memory for performance
+- Rules can be dynamically updated via admin interface
+
+**2. Audit Trail:**
+- All governance actions logged to `audit_logs`
+- Timestamp, service, action, rule_violated recorded
+- Queryable for compliance and analysis
+
+**3. Instruction Persistence:**
+- InstructionPersistenceClassifier writes to `instruction_history`
+- CrossReferenceValidator queries for conflicts
+- HIGH persistence instructions remain active across sessions
+
+---
+
+## Deployment Architecture
+
+### Production Environment
+
+**Components:**
+- **Docker Compose:** Orchestrates MongoDB + Node.js application
+- **MongoDB 7.0:** Database with authentication and persistence
+- **Node.js 18:** Application runtime with health checks
+- **Systemd:** Process management on Linux servers
+- **Nginx:** Reverse proxy with SSL termination (optional)
+
+**Docker Services:**
+```yaml
+services:
+  mongodb:
+    image: mongo:7.0
+    volumes: [mongodb_data:/data/db]
+    healthcheck: [mongosh ping check]
+
+  tractatus-app:
+    build: [multi-stage Dockerfile]
+    ports: ["9000:9000"]
+    depends_on: [mongodb]
+    healthcheck: [/api/health check]
+    environment: [5 governance service toggles]
+```
+
+**Security:**
+- Non-root container user (nodejs:1001)
+- NoNewPrivileges, PrivateTmp, ProtectSystem
+- Content Security Policy enforcement
+- CORS protection
+- Rate limiting
+
+**See:** [Deployment Quickstart Kit](/downloads/tractatus-quickstart.tar.gz) for complete Docker deployment
+
+---
+
+## Performance Characteristics
+
+### Overhead Measurements
+
+**BoundaryEnforcer:** <5ms per check
+**InstructionPersistenceClassifier:** <10ms classification + storage
+**CrossReferenceValidator:** <15ms query + validation
+**ContextPressureMonitor:** <5ms calculation
+**MetacognitiveVerifier:** 50-200ms (complex operations only)
+
+**Total Framework Overhead:** <10ms average per operation
+
+**Benchmark Results:**
+- 223/223 tests passing
+- 127 governance-sensitive scenarios validated
+- 100% HIGH persistence instruction enforcement
+- 0 false negatives in 27027 incident testing
+
+---
+
+## Scalability Considerations
+
+### Horizontal Scaling
+
+**Stateless Services:**
+- API endpoints can be load-balanced
+- MongoDB replica set for high availability
+- Session state in database, not memory
+
+**Bottlenecks:**
+- MongoDB query performance (mitigated by indexes)
+- Instruction history size (mitigated by archival)
+
+---
+
+### Vertical Scaling
+
+**Memory Requirements:**
+- Base application: 200-400 MB
+- Per-session overhead: 10-50 MB
+- MongoDB: 1-2 GB (moderate rule set)
+
+**Recommended Resources:**
+- Development: 2 GB RAM, 2 CPU cores
+- Production: 4 GB RAM, 4 CPU cores
+- Database: 10 GB disk minimum
+
+---
+
+## Complementarity with Claude Code
+
+**Tractatus does NOT replace Claude Code. It extends it.**
+
+### What Claude Code Provides
+
+✓ Base LLM environment and context window
+✓ Tool access (Bash, Read, Write, Edit)
+✓ Session management and file operations
+✓ Conversation history and compaction
+✓ Multi-tool orchestration
+
+### What Tractatus Adds
+
+✓ Instruction persistence and classification
+✓ Boundary enforcement for values decisions
+✓ Pattern bias detection and prevention
+✓ Context pressure monitoring
+✓ Complex operation verification
+✓ Comprehensive audit trail
+✓ Governance rule management
+
+### Integration Benefits
+
+**Together:** Claude Code provides the foundation, Tractatus provides the guardrails
+
+**Example:** Claude Code enables AI to edit files. Tractatus ensures AI doesn't violate explicit instructions or cross values boundaries when doing so.
+
+---
+
+## Related Documentation
+
+- [Implementation Guide](/docs/markdown/implementation-guide.md) - How to deploy and configure
+- [Core Concepts](/docs/markdown/core-concepts.md) - Governance framework concepts
+- [Case Studies](/docs/markdown/case-studies.md) - Real-world failure mode examples
+- [Deployment Quickstart](/downloads/tractatus-quickstart.tar.gz) - 30-minute Docker deployment
+
+---
+
+## Technical Support
+
+**Documentation:** https://agenticgovernance.digital/docs
+**GitHub:** https://github.com/AgenticGovernance/tractatus-framework
+**Email:** research@agenticgovernance.digital
+**Interactive Demos:** https://agenticgovernance.digital/demos
+
+---
+
+**Version:** 1.0
+**Last Updated:** October 12, 2025
+**Maintained By:** Tractatus Framework Team
diff --git a/public/images/architecture-diagram.png b/public/images/architecture-diagram.png
new file mode 100644
index 00000000..06f0994d
Binary files /dev/null and b/public/images/architecture-diagram.png differ
diff --git a/public/images/architecture-diagram.svg b/public/images/architecture-diagram.svg
new file mode 100644
index 00000000..3e85180b
--- /dev/null
+++ b/public/images/architecture-diagram.svg
@@ -0,0 +1,306 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 1000" style="background: white;">
+  <!-- Title -->
+  <text x="600" y="30" font-family="Arial, sans-serif" font-size="24" font-weight="bold" text-anchor="middle" fill="#1f2937">
+    Tractatus Framework Architecture
+  </text>
+  <text x="600" y="55" font-family="Arial, sans-serif" font-size="14" text-anchor="middle" fill="#6b7280">
+    Claude Code + Tractatus Governance Integration
+  </text>
+
+  <!-- Layer 1: Claude Code Runtime (Foundation) -->
+  <rect x="50" y="850" width="1100" height="120" fill="#dbeafe" stroke="#3b82f6" stroke-width="2" rx="8"/>
+  <text x="600" y="880" font-family="Arial, sans-serif" font-size="18" font-weight="bold" text-anchor="middle" fill="#1e40af">
+    Claude Code Runtime Environment
+  </text>
+  <text x="600" y="905" font-family="Arial, sans-serif" font-size="13" text-anchor="middle" fill="#475569">
+    Base LLM Environment • Session Management • Tool Access • File System Operations
+  </text>
+  <text x="600" y="925" font-family="Arial, sans-serif" font-size="13" text-anchor="middle" fill="#475569">
+    .claude/instruction-history.json • .claude/session-state.json • .claude/token-checkpoints.json
+  </text>
+  <text x="600" y="945" font-family="Arial, sans-serif" font-size="12" text-anchor="middle" fill="#64748b" font-style="italic">
+    Provides: Context Window (200k tokens) • Bash/Read/Write Tools • Session Persistence
+  </text>
+
+  <!-- Layer 2: Tractatus Governance Services -->
+  <rect x="50" y="520" width="1100" height="310" fill="#f0fdf4" stroke="#10b981" stroke-width="3" rx="8"/>
+  <text x="600" y="550" font-family="Arial, sans-serif" font-size="18" font-weight="bold" text-anchor="middle" fill="#065f46">
+    Tractatus Governance Layer
+  </text>
+
+  <!-- 5 Core Services in Grid -->
+  <!-- Row 1: 3 services -->
+  <g id="boundary-enforcer">
+    <rect x="80" y="570" width="320" height="110" fill="#fef3c7" stroke="#f59e0b" stroke-width="2" rx="6"/>
+    <text x="240" y="595" font-family="Arial, sans-serif" font-size="14" font-weight="bold" text-anchor="middle" fill="#92400e">
+      BoundaryEnforcer
+    </text>
+    <text x="240" y="615" font-family="Arial, sans-serif" font-size="11" text-anchor="middle" fill="#78350f">
+      Blocks values decisions
+    </text>
+    <text x="240" y="635" font-family="Arial, sans-serif" font-size="10" text-anchor="middle" fill="#78350f">
+      • Privacy decisions
+    </text>
+    <text x="240" y="650" font-family="Arial, sans-serif" font-size="10" text-anchor="middle" fill="#78350f">
+      • Ethical trade-offs
+    </text>
+    <text x="240" y="665" font-family="Arial, sans-serif" font-size="10" text-anchor="middle" fill="#78350f">
+      • User agency violations
+    </text>
+  </g>
+
+  <g id="classifier">
+    <rect x="440" y="570" width="320" height="110" fill="#ddd6fe" stroke="#8b5cf6" stroke-width="2" rx="6"/>
+    <text x="600" y="595" font-family="Arial, sans-serif" font-size="14" font-weight="bold" text-anchor="middle" fill="#5b21b6">
+      InstructionPersistenceClassifier
+    </text>
+    <text x="600" y="615" font-family="Arial, sans-serif" font-size="11" text-anchor="middle" fill="#6b21a8">
+      Classifies &amp; stores instructions
+    </text>
+    <text x="600" y="635" font-family="Arial, sans-serif" font-size="10" text-anchor="middle" fill="#6b21a8">
+      • Quadrant (STR/OPS/TAC/SYS)
+    </text>
+    <text x="600" y="650" font-family="Arial, sans-serif" font-size="10" text-anchor="middle" fill="#6b21a8">
+      • Persistence (HIGH/MED/LOW)
+    </text>
+    <text x="600" y="665" font-family="Arial, sans-serif" font-size="10" text-anchor="middle" fill="#6b21a8">
+      • Temporal scope
+    </text>
+  </g>
+
+  <g id="validator">
+    <rect x="800" y="570" width="320" height="110" fill="#fce7f3" stroke="#ec4899" stroke-width="2" rx="6"/>
+    <text x="960" y="595" font-family="Arial, sans-serif" font-size="14" font-weight="bold" text-anchor="middle" fill="#9f1239">
+      CrossReferenceValidator
+    </text>
+    <text x="960" y="615" font-family="Arial, sans-serif" font-size="11" text-anchor="middle" fill="#9f1239">
+      Prevents pattern bias override
+    </text>
+    <text x="960" y="635" font-family="Arial, sans-serif" font-size="10" text-anchor="middle" fill="#9f1239">
+      • Checks instruction history
+    </text>
+    <text x="960" y="650" font-family="Arial, sans-serif" font-size="10" text-anchor="middle" fill="#9f1239">
+      • Detects conflicts (27027)
+    </text>
+    <text x="960" y="665" font-family="Arial, sans-serif" font-size="10" text-anchor="middle" fill="#9f1239">
+      • Blocks contradictions
+    </text>
+  </g>
+
+  <!-- Row 2: 2 services centered -->
+  <g id="pressure-monitor">
+    <rect x="260" y="700" width="320" height="110" fill="#e0e7ff" stroke="#6366f1" stroke-width="2" rx="6"/>
+    <text x="420" y="725" font-family="Arial, sans-serif" font-size="14" font-weight="bold" text-anchor="middle" fill="#3730a3">
+      ContextPressureMonitor
+    </text>
+    <text x="420" y="745" font-family="Arial, sans-serif" font-size="11" text-anchor="middle" fill="#3730a3">
+      Detects degraded conditions
+    </text>
+    <text x="420" y="765" font-family="Arial, sans-serif" font-size="10" text-anchor="middle" fill="#3730a3">
+      • Token budget tracking
+    </text>
+    <text x="420" y="780" font-family="Arial, sans-serif" font-size="10" text-anchor="middle" fill="#3730a3">
+      • Error accumulation
+    </text>
+    <text x="420" y="795" font-family="Arial, sans-serif" font-size="10" text-anchor="middle" fill="#3730a3">
+      • Checkpoint reporting
+    </text>
+  </g>
+
+  <g id="verifier">
+    <rect x="620" y="700" width="320" height="110" fill="#fef2f2" stroke="#ef4444" stroke-width="2" rx="6"/>
+    <text x="780" y="725" font-family="Arial, sans-serif" font-size="14" font-weight="bold" text-anchor="middle" fill="#991b1b">
+      MetacognitiveVerifier
+    </text>
+    <text x="780" y="745" font-family="Arial, sans-serif" font-size="11" text-anchor="middle" fill="#991b1b">
+      Self-checks complex operations
+    </text>
+    <text x="780" y="765" font-family="Arial, sans-serif" font-size="10" text-anchor="middle" fill="#991b1b">
+      • &gt;3 files or &gt;5 steps
+    </text>
+    <text x="780" y="780" font-family="Arial, sans-serif" font-size="10" text-anchor="middle" fill="#991b1b">
+      • Architecture changes
+    </text>
+    <text x="780" y="795" font-family="Arial, sans-serif" font-size="10" text-anchor="middle" fill="#991b1b">
+      • Confidence scoring
+    </text>
+  </g>
+
+  <!-- Layer 3: MongoDB Persistence -->
+  <rect x="50" y="250" width="1100" height="240" fill="#fef9c3" stroke="#eab308" stroke-width="2" rx="8"/>
+  <text x="600" y="280" font-family="Arial, sans-serif" font-size="18" font-weight="bold" text-anchor="middle" fill="#713f12">
+    MongoDB Persistence Layer
+  </text>
+
+  <!-- Collections in Grid -->
+  <g id="governance-rules">
+    <rect x="80" y="300" width="240" height="160" fill="#fff7ed" stroke="#f97316" stroke-width="2" rx="6"/>
+    <text x="200" y="325" font-family="Arial, sans-serif" font-size="13" font-weight="bold" text-anchor="middle" fill="#7c2d12">
+      governance_rules
+    </text>
+    <text x="200" y="350" font-family="Arial, sans-serif" font-size="10" text-anchor="middle" fill="#7c2d12">
+      • rule_id (STR-001...)
+    </text>
+    <text x="200" y="370" font-family="Arial, sans-serif" font-size="10" text-anchor="middle" fill="#7c2d12">
+      • quadrant
+    </text>
+    <text x="200" y="390" font-family="Arial, sans-serif" font-size="10" text-anchor="middle" fill="#7c2d12">
+      • persistence level
+    </text>
+    <text x="200" y="410" font-family="Arial, sans-serif" font-size="10" text-anchor="middle" fill="#7c2d12">
+      • enforced_by
+    </text>
+    <text x="200" y="430" font-family="Arial, sans-serif" font-size="10" text-anchor="middle" fill="#7c2d12">
+      • violation_action
+    </text>
+    <text x="200" y="450" font-family="Arial, sans-serif" font-size="10" text-anchor="middle" fill="#7c2d12">
+      • active status
+    </text>
+  </g>
+
+  <g id="audit-logs">
+    <rect x="360" y="300" width="240" height="160" fill="#f0fdfa" stroke="#14b8a6" stroke-width="2" rx="6"/>
+    <text x="480" y="325" font-family="Arial, sans-serif" font-size="13" font-weight="bold" text-anchor="middle" fill="#134e4a">
+      audit_logs
+    </text>
+    <text x="480" y="350" font-family="Arial, sans-serif" font-size="10" text-anchor="middle" fill="#134e4a">
+      • timestamp
+    </text>
+    <text x="480" y="370" font-family="Arial, sans-serif" font-size="10" text-anchor="middle" fill="#134e4a">
+      • service (which enforcer)
+    </text>
+    <text x="480" y="390" font-family="Arial, sans-serif" font-size="10" text-anchor="middle" fill="#134e4a">
+      • action (BLOCK/WARN)
+    </text>
+    <text x="480" y="410" font-family="Arial, sans-serif" font-size="10" text-anchor="middle" fill="#134e4a">
+      • instruction
+    </text>
+    <text x="480" y="430" font-family="Arial, sans-serif" font-size="10" text-anchor="middle" fill="#134e4a">
+      • rule_violated
+    </text>
+    <text x="480" y="450" font-family="Arial, sans-serif" font-size="10" text-anchor="middle" fill="#134e4a">
+      • session_id
+    </text>
+  </g>
+
+  <g id="session-state">
+    <rect x="640" y="300" width="240" height="160" fill="#fae8ff" stroke="#d946ef" stroke-width="2" rx="6"/>
+    <text x="760" y="325" font-family="Arial, sans-serif" font-size="13" font-weight="bold" text-anchor="middle" fill="#701a75">
+      session_state
+    </text>
+    <text x="760" y="350" font-family="Arial, sans-serif" font-size="10" text-anchor="middle" fill="#701a75">
+      • session_id
+    </text>
+    <text x="760" y="370" font-family="Arial, sans-serif" font-size="10" text-anchor="middle" fill="#701a75">
+      • token_count
+    </text>
+    <text x="760" y="390" font-family="Arial, sans-serif" font-size="10" text-anchor="middle" fill="#701a75">
+      • message_count
+    </text>
+    <text x="760" y="410" font-family="Arial, sans-serif" font-size="10" text-anchor="middle" fill="#701a75">
+      • pressure_level
+    </text>
+    <text x="760" y="430" font-family="Arial, sans-serif" font-size="10" text-anchor="middle" fill="#701a75">
+      • last_checkpoint
+    </text>
+    <text x="760" y="450" font-family="Arial, sans-serif" font-size="10" text-anchor="middle" fill="#701a75">
+      • framework_active
+    </text>
+  </g>
+
+  <g id="instruction-history">
+    <rect x="920" y="300" width="240" height="160" fill="#ede9fe" stroke="#a78bfa" stroke-width="2" rx="6"/>
+    <text x="1040" y="325" font-family="Arial, sans-serif" font-size="13" font-weight="bold" text-anchor="middle" fill="#4c1d95">
+      instruction_history
+    </text>
+    <text x="1040" y="350" font-family="Arial, sans-serif" font-size="10" text-anchor="middle" fill="#4c1d95">
+      • instruction_id
+    </text>
+    <text x="1040" y="370" font-family="Arial, sans-serif" font-size="10" text-anchor="middle" fill="#4c1d95">
+      • content
+    </text>
+    <text x="1040" y="390" font-family="Arial, sans-serif" font-size="10" text-anchor="middle" fill="#4c1d95">
+      • classification
+    </text>
+    <text x="1040" y="410" font-family="Arial, sans-serif" font-size="10" text-anchor="middle" fill="#4c1d95">
+      • persistence
+    </text>
+    <text x="1040" y="430" font-family="Arial, sans-serif" font-size="10" text-anchor="middle" fill="#4c1d95">
+      • created_at
+    </text>
+    <text x="1040" y="450" font-family="Arial, sans-serif" font-size="10" text-anchor="middle" fill="#4c1d95">
+      • active status
+    </text>
+  </g>
+
+  <!-- Layer 4: API & Interface -->
+  <rect x="50" y="80" width="1100" height="140" fill="#f3e8ff" stroke="#a855f7" stroke-width="2" rx="8"/>
+  <text x="600" y="110" font-family="Arial, sans-serif" font-size="18" font-weight="bold" text-anchor="middle" fill="#581c87">
+    API &amp; Web Interface Layer
+  </text>
+
+  <!-- API Endpoints -->
+  <g id="api-endpoints">
+    <rect x="80" y="130" width="500" height="70" fill="#fdf4ff" stroke="#c084fc" stroke-width="1" rx="4"/>
+    <text x="330" y="150" font-family="Arial, sans-serif" font-size="12" font-weight="bold" text-anchor="middle" fill="#581c87">
+      API Endpoints
+    </text>
+    <text x="330" y="170" font-family="Arial, sans-serif" font-size="10" text-anchor="middle" fill="#6b21a8">
+      /api/demo/classify • /api/demo/boundary-check • /api/demo/pressure-check
+    </text>
+    <text x="330" y="188" font-family="Arial, sans-serif" font-size="10" text-anchor="middle" fill="#6b21a8">
+      /api/admin/* • /api/auth/* • /api/health
+    </text>
+  </g>
+
+  <!-- Web Interface -->
+  <g id="web-interface">
+    <rect x="620" y="130" width="500" height="70" fill="#ecfdf5" stroke="#6ee7b7" stroke-width="1" rx="4"/>
+    <text x="870" y="150" font-family="Arial, sans-serif" font-size="12" font-weight="bold" text-anchor="middle" fill="#065f46">
+      Web Interface
+    </text>
+    <text x="870" y="170" font-family="Arial, sans-serif" font-size="10" text-anchor="middle" fill="#047857">
+      Interactive Demos • Admin Dashboard • Documentation
+    </text>
+    <text x="870" y="188" font-family="Arial, sans-serif" font-size="10" text-anchor="middle" fill="#047857">
+      Blog System • Case Submissions • Media Inquiry
+    </text>
+  </g>
+
+  <!-- Data Flow Arrows -->
+  <!-- User -> API -->
+  <defs>
+    <marker id="arrowhead" markerWidth="10" markerHeight="10" refX="9" refY="3" orient="auto">
+      <polygon points="0 0, 10 3, 0 6" fill="#4b5563" />
+    </marker>
+  </defs>
+
+  <!-- API to Governance Services -->
+  <line x1="330" y1="220" x2="420" y2="570" stroke="#4b5563" stroke-width="2" marker-end="url(#arrowhead)"/>
+  <line x1="870" y1="220" x2="780" y2="570" stroke="#4b5563" stroke-width="2" marker-end="url(#arrowhead)"/>
+
+  <!-- Governance to Persistence -->
+  <line x1="240" y1="680" x2="200" y2="300" stroke="#4b5563" stroke-width="2" marker-end="url(#arrowhead)"/>
+  <line x1="600" y1="680" x2="480" y2="460" stroke="#4b5563" stroke-width="2" marker-end="url(#arrowhead)"/>
+  <line x1="780" y1="810" x2="760" y2="460" stroke="#4b5563" stroke-width="2" marker-end="url(#arrowhead)"/>
+  <line x1="960" y1="680" x2="1040" y2="460" stroke="#4b5563" stroke-width="2" marker-end="url(#arrowhead)"/>
+
+  <!-- Persistence to Claude Code -->
+  <line x1="200" y1="490" x2="300" y2="850" stroke="#4b5563" stroke-width="2" marker-end="url(#arrowhead)"/>
+  <line x1="480" y1="490" x2="500" y2="850" stroke="#4b5563" stroke-width="2" marker-end="url(#arrowhead)"/>
+  <line x1="760" y1="490" x2="700" y2="850" stroke="#4b5563" stroke-width="2" marker-end="url(#arrowhead)"/>
+  <line x1="1040" y1="490" x2="900" y2="850" stroke="#4b5563" stroke-width="2" marker-end="url(#arrowhead)"/>
+
+  <!-- Key Components Legend -->
+  <g id="legend" transform="translate(900, 15)">
+    <text x="0" y="0" font-family="Arial, sans-serif" font-size="11" font-weight="bold" fill="#374151">
+      Integration Points:
+    </text>
+    <text x="0" y="18" font-family="Arial, sans-serif" font-size="9" fill="#6b7280">
+      ↓ Data flows from interface through
+    </text>
+    <text x="0" y="30" font-family="Arial, sans-serif" font-size="9" fill="#6b7280">
+      governance services to persistence
+    </text>
+  </g>
+</svg>
\ No newline at end of file
diff --git a/public/implementer.html b/public/implementer.html
index b7e1699a..0c43203c 100644
--- a/public/implementer.html
+++ b/public/implementer.html
@@ -154,6 +154,125 @@
     </div>
   </div>
 
+  <!-- Technical Architecture -->
+  <div class="bg-white py-16">
+    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+      <div class="text-center mb-12">
+        <h2 class="text-3xl font-bold text-gray-900 mb-4">System Architecture</h2>
+        <p class="text-xl text-gray-600 max-w-3xl mx-auto">
+          Understanding how Tractatus integrates with Claude Code to provide robust AI governance
+        </p>
+      </div>
+
+      <!-- Architecture Diagram -->
+      <div class="bg-gray-50 rounded-xl p-8 mb-8">
+        <div class="bg-white rounded-lg p-6 shadow-inner">
+          <img src="/images/architecture-diagram.svg"
+               alt="Tractatus Framework Architecture showing four layers: API & Web Interface, Tractatus Governance Layer with 5 services, MongoDB Persistence, and Claude Code Runtime Environment"
+               class="w-full h-auto"
+               loading="lazy">
+        </div>
+        <div class="mt-6 flex flex-wrap gap-4 justify-center">
+          <a href="/images/architecture-diagram.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">
+            <svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <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>
+          <a href="/images/architecture-diagram.png"
+             download
+             class="inline-flex items-center bg-green-600 text-white px-4 py-2 rounded-lg text-sm font-semibold hover:bg-green-700 transition">
+            <svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <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 PNG (High-Res)
+          </a>
+          <a href="/downloads/technical-architecture-diagram.pdf"
+             target="_blank"
+             rel="noopener noreferrer"
+             class="inline-flex items-center bg-purple-600 text-white px-4 py-2 rounded-lg text-sm font-semibold hover:bg-purple-700 transition">
+            <svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 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>
+            Technical Documentation PDF
+          </a>
+        </div>
+      </div>
+
+      <!-- Architecture Layers -->
+      <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
+        <div class="bg-purple-50 rounded-lg p-6 border-2 border-purple-200">
+          <div class="text-purple-600 text-2xl font-bold mb-2">Layer 4</div>
+          <h3 class="text-lg font-bold text-gray-900 mb-3">API & Web Interface</h3>
+          <ul class="space-y-2 text-sm text-gray-700">
+            <li>• Demo endpoints</li>
+            <li>• Admin dashboard</li>
+            <li>• Documentation</li>
+            <li>• Blog system</li>
+          </ul>
+        </div>
+
+        <div class="bg-green-50 rounded-lg p-6 border-2 border-green-200">
+          <div class="text-green-600 text-2xl font-bold mb-2">Layer 3</div>
+          <h3 class="text-lg font-bold text-gray-900 mb-3">Tractatus Governance</h3>
+          <ul class="space-y-2 text-sm text-gray-700">
+            <li>• BoundaryEnforcer</li>
+            <li>• InstructionPersistenceClassifier</li>
+            <li>• CrossReferenceValidator</li>
+            <li>• ContextPressureMonitor</li>
+            <li>• MetacognitiveVerifier</li>
+          </ul>
+        </div>
+
+        <div class="bg-yellow-50 rounded-lg p-6 border-2 border-yellow-200">
+          <div class="text-yellow-600 text-2xl font-bold mb-2">Layer 2</div>
+          <h3 class="text-lg font-bold text-gray-900 mb-3">MongoDB Persistence</h3>
+          <ul class="space-y-2 text-sm text-gray-700">
+            <li>• governance_rules</li>
+            <li>• audit_logs</li>
+            <li>• session_state</li>
+            <li>• instruction_history</li>
+          </ul>
+        </div>
+
+        <div class="bg-blue-50 rounded-lg p-6 border-2 border-blue-200">
+          <div class="text-blue-600 text-2xl font-bold mb-2">Layer 1</div>
+          <h3 class="text-lg font-bold text-gray-900 mb-3">Claude Code Runtime</h3>
+          <ul class="space-y-2 text-sm text-gray-700">
+            <li>• Base LLM environment</li>
+            <li>• Session management</li>
+            <li>• Tool access</li>
+            <li>• Context window (200k)</li>
+          </ul>
+        </div>
+      </div>
+
+      <!-- Key Integration Points -->
+      <div class="mt-12 bg-blue-50 rounded-lg p-8">
+        <h3 class="text-xl font-bold text-gray-900 mb-6 text-center">Key Integration Points</h3>
+        <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
+          <div class="text-center">
+            <div class="bg-blue-600 text-white w-12 h-12 rounded-full flex items-center justify-center mx-auto mb-3 text-xl font-bold">1</div>
+            <h4 class="font-semibold text-gray-900 mb-2">Pre-Action Checks</h4>
+            <p class="text-sm text-gray-600">All actions validated against governance rules before execution</p>
+          </div>
+          <div class="text-center">
+            <div class="bg-green-600 text-white w-12 h-12 rounded-full flex items-center justify-center mx-auto mb-3 text-xl font-bold">2</div>
+            <h4 class="font-semibold text-gray-900 mb-2">Instruction Persistence</h4>
+            <p class="text-sm text-gray-600">User instructions classified and stored for cross-reference validation</p>
+          </div>
+          <div class="text-center">
+            <div class="bg-purple-600 text-white w-12 h-12 rounded-full flex items-center justify-center mx-auto mb-3 text-xl font-bold">3</div>
+            <h4 class="font-semibold text-gray-900 mb-2">Comprehensive Audit Trail</h4>
+            <p class="text-sm text-gray-600">Every governance action logged for compliance and analysis</p>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+
   <!-- Integration Options -->
   <div id="main-content" 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-12 text-center">Integration Approaches</h2>