From bc2a58903f256e14e3a7e05278e77ba4c137d3de Mon Sep 17 00:00:00 2001
From: TheFlow <theflow@sydigital.com>
Date: Sun, 19 Oct 2025 16:37:27 +1300
Subject: [PATCH] feat(interactive): add clickable central core and improve
 desktop layout
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

SUMMARY:
Enhanced interactive diagram with clickable central core explaining
how all 6 services work together, plus improved side-by-side layout
for better desktop UX.

CHANGES:

1. Clickable Central Core (SVG):
   - Added service-node class and data-service="overview" to central core
   - Added cursor pointer and title for accessibility
   - Users can now click the "T" to see overall governance explanation

2. Overview Service Data (JavaScript):
   - Added 'overview' to serviceData with comprehensive description
   - Explains how all 6 services work together as a system
   - 6 key details about coordinated governance
   - Promise: External architectural enforcement

3. Improved Desktop Layout (HTML):
   - Scaled down diagram from max-w-2xl to max-w-md/lg
   - Changed to flex layout (lg:flex-row) for side-by-side on desktop
   - Panel now appears next to diagram on large screens
   - Stacks vertically on mobile (flex-col)
   - Updated tip text to highlight central core clickability

4. Panel Positioning (JavaScript):
   - Panel inserts into flex container instead of diagram-container
   - Added flex-1 class for proper flex behavior
   - lg:min-w-[400px] ensures readable width on desktop
   - Maintains mobile-first responsive design

DESKTOP UX:
- Diagram on left (max-w-lg = 512px)
- Service details on right (flex-1, grows to fill space)
- Both visible simultaneously on screens ≥1024px

MOBILE UX:
- Diagram full width (max-w-md = 448px, centered)
- Service details below diagram (full width)
- Maintains vertical flow on small screens

IMPACT:
Users can now:
✓ Click central "T" to understand overall governance
✓ See diagram and service details side-by-side (desktop)
✓ Better understand how 6 services coordinate together

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

Co-Authored-By: Claude <noreply@anthropic.com>
---
 public/architecture.html                      | 45 ++++++++++---------
 .../architecture-diagram-interactive.svg      |  5 ++-
 public/js/components/interactive-diagram.js   | 27 ++++++++---
 3 files changed, 49 insertions(+), 28 deletions(-)

diff --git a/public/architecture.html b/public/architecture.html
index edcb27b9..e45c1273 100644
--- a/public/architecture.html
+++ b/public/architecture.html
@@ -317,35 +317,38 @@
     <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
       <div class="text-center mb-8">
         <h2 class="text-4xl font-bold text-gray-900 mb-4">Explore the Architecture Interactively</h2>
-        <p class="text-xl text-gray-600 max-w-3xl mx-auto">
-          Click any service node to see detailed information about how it enforces governance boundaries.
+        <p class="text-xl text-gray-600 max-w-3xl mx-auto mb-4">
+          Click any service node or the central core to see detailed information about how governance works.
         </p>
-      </div>
-
-      <div id="diagram-container" class="relative bg-white rounded-xl shadow-lg p-8 border border-gray-200">
-        <!-- Interactive SVG will be loaded here -->
-        <div class="flex justify-center">
-          <object
-            data="/images/architecture-diagram-interactive.svg"
-            type="image/svg+xml"
-            id="interactive-svg-object"
-            class="w-full max-w-2xl"
-            aria-label="Interactive Tractatus Architecture Diagram">
-            <!-- Fallback for browsers that don't support object tag -->
-            <img src="/images/architecture-diagram-interactive.svg" alt="Tractatus Architecture Diagram" class="w-full max-w-2xl" />
-          </object>
-        </div>
-
-        <div class="mt-6 text-center text-sm text-gray-600">
+        <div class="text-sm text-gray-600">
           <p class="flex items-center justify-center space-x-2">
             <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
               <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 15l-2 5L9 9l11 4-5 2zm0 0l5 5M7.188 2.239l.777 2.897M5.136 7.965l-2.898-.777M13.95 4.05l-2.122 2.122m-5.657 5.656l-2.12 2.122"/>
             </svg>
-            <span><strong>Tip:</strong> Click any colored circle to explore that governance service</span>
+            <span><strong>Tip:</strong> Click the central <span class="font-semibold text-cyan-600">"T"</span> to see how all services work together</span>
           </p>
         </div>
+      </div>
 
-        <!-- Service detail panel will be dynamically inserted here by interactive-diagram.js -->
+      <div id="diagram-container" class="relative bg-white rounded-xl shadow-lg p-6 lg:p-8 border border-gray-200">
+        <!-- Flex container for side-by-side layout on desktop -->
+        <div class="flex flex-col lg:flex-row lg:items-start lg:gap-8">
+          <!-- Interactive SVG -->
+          <div class="flex-shrink-0 flex justify-center lg:justify-start mb-6 lg:mb-0">
+            <object
+              data="/images/architecture-diagram-interactive.svg"
+              type="image/svg+xml"
+              id="interactive-svg-object"
+              class="w-full max-w-md lg:max-w-lg"
+              aria-label="Interactive Tractatus Architecture Diagram">
+              <!-- Fallback for browsers that don't support object tag -->
+              <img src="/images/architecture-diagram-interactive.svg" alt="Tractatus Architecture Diagram" class="w-full max-w-md lg:max-w-lg" />
+            </object>
+          </div>
+
+          <!-- Service detail panel will be dynamically inserted here by interactive-diagram.js -->
+          <!-- It will appear to the right of the diagram on desktop, below on mobile -->
+        </div>
       </div>
     </div>
   </section>
diff --git a/public/images/architecture-diagram-interactive.svg b/public/images/architecture-diagram-interactive.svg
index c18e84e3..cd107e53 100644
--- a/public/images/architecture-diagram-interactive.svg
+++ b/public/images/architecture-diagram-interactive.svg
@@ -115,12 +115,13 @@
     </g>
   </g>
 
-  <!-- Central core -->
-  <g id="central-core">
+  <!-- Central core (clickable) -->
+  <g id="central-core" class="service-node" data-service="overview" style="cursor: pointer;">
     <circle cx="300" cy="300" r="85" fill="url(#tractatusCoreInteractive)" filter="url(#dropShadowInt)"/>
     <circle cx="300" cy="300" r="68" fill="rgba(0,0,0,0.25)"/>
     <text x="300" y="320" text-anchor="middle" font-family="Arial, sans-serif" font-size="64" font-weight="bold" fill="white" opacity="0.95">T</text>
     <text x="300" y="345" text-anchor="middle" font-family="Arial, sans-serif" font-size="14" fill="white" opacity="0.8">Tractatus</text>
+    <title>Tractatus Core - Click to see how all services work together</title>
   </g>
 
   <style>
diff --git a/public/js/components/interactive-diagram.js b/public/js/components/interactive-diagram.js
index 800bfe2b..011efadf 100644
--- a/public/js/components/interactive-diagram.js
+++ b/public/js/components/interactive-diagram.js
@@ -9,6 +9,22 @@
 class InteractiveDiagram {
   constructor() {
     this.serviceData = {
+      overview: {
+        name: 'Tractatus Governance Layer',
+        shortName: 'Overview',
+        color: '#0ea5e9',
+        icon: '⚙️',
+        description: 'Six external governance services working together to enforce AI safety boundaries outside the AI runtime.',
+        details: [
+          'All services operate externally to the AI—making manipulation harder',
+          'Instruction storage and validation work together to prevent directive fade',
+          'Boundary enforcement and deliberation coordinate on values decisions',
+          'Pressure monitoring adjusts verification requirements dynamically',
+          'Metacognitive gates ensure AI pauses before high-risk operations',
+          'Each service addresses a different failure mode in AI safety'
+        ],
+        promise: 'External architectural enforcement that's structurally more difficult to bypass than behavioral training alone.'
+      },
       boundary: {
         name: 'BoundaryEnforcer',
         shortName: 'Boundary',
@@ -239,14 +255,15 @@ class InteractiveDiagram {
     if (!panel) {
       panel = document.createElement('div');
       panel.id = 'service-detail-panel';
-      panel.className = 'bg-white rounded-xl shadow-2xl p-6 border-2';
+      panel.className = 'flex-1 bg-white rounded-xl shadow-2xl p-6 border-2 lg:min-w-[400px]';
       panel.style.borderColor = service.color;
 
-      const container = document.querySelector('#diagram-container');
-      if (container) {
-        container.appendChild(panel);
+      // Insert into the flex container for side-by-side layout
+      const flexContainer = document.querySelector('#diagram-container > div');
+      if (flexContainer) {
+        flexContainer.appendChild(panel);
       } else {
-        console.error('[InteractiveDiagram] Diagram container not found');
+        console.error('[InteractiveDiagram] Flex container not found');
         return;
       }
     } else {