From 3fbccf6d2f7e24a342654794ed5f94bb90c5202e Mon Sep 17 00:00:00 2001 From: TheFlow Date: Sun, 19 Oct 2025 18:25:47 +1300 Subject: [PATCH] feat(ui): reduce diagram size 75% and add permanent side-by-side panel MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit SUMMARY: Reduced interactive diagram size by 75% (to 25% of original) and implemented permanent service detail panel that displays side-by-side with the diagram on all viewports. CHANGES: 1. Diagram Size Reduction (architecture.html): - Mobile: 384px → 96px (max-w-[96px]) - Tablet: 448px → 128px (sm:max-w-[128px]) - Desktop: 512px → 160px (lg:max-w-[160px]) - Removed max-height constraint - Removed mobile/desktop conditional widths 2. Permanent Service Panel (architecture.html): - Added permanent #service-detail-panel div - Default state: Info icon with instructions - Always visible (flex-1 layout) - Min height: 300px for consistent sizing - Background: gray-50 with shadow-inner 3. JavaScript Updates (interactive-diagram.js): - Removed dynamic panel creation/removal logic - Removed close button functionality - Removed closePanel() method entirely - Removed fade-in/fade-out animations - Panel now updates in-place when service clicked - Border color changes to match selected service 4. Layout Improvements (architecture.html): - Changed to gap-6 (applies to all viewports) - Diagram and panel always side-by-side on desktop - Stacked vertically on mobile (flex-col lg:flex-row) - Removed mb-6 lg:mb-0 (gap handles spacing) RESPONSIVE BEHAVIOR: - Mobile (<1024px): Stacked vertically, diagram 96px, panel below - Desktop (≥1024px): Side-by-side, diagram 160px, panel fills remaining space UX IMPROVEMENTS: ✓ Diagram much smaller, less dominant ✓ Service details always visible on canvas ✓ No modal/popup behavior - permanent panel ✓ Default state guides user to click nodes ✓ Cleaner, more professional layout CACHE-BUSTING: Updated interactive-diagram.js version to v=20251019164500 🤖 Generated with Claude Code (https://claude.com/claude-code) Co-Authored-By: Claude --- .claude/metrics/hooks-metrics.json | 32 ++++++++++- public/architecture.html | 27 ++++++--- public/js/components/interactive-diagram.js | 64 +++------------------ 3 files changed, 56 insertions(+), 67 deletions(-) diff --git a/.claude/metrics/hooks-metrics.json b/.claude/metrics/hooks-metrics.json index 8a16164f..5e590d55 100644 --- a/.claude/metrics/hooks-metrics.json +++ b/.claude/metrics/hooks-metrics.json @@ -4381,6 +4381,34 @@ "file": "/home/theflow/projects/tractatus/public/architecture.html", "result": "passed", "reason": null + }, + { + "hook": "validate-file-edit", + "timestamp": "2025-10-19T05:23:26.729Z", + "file": "/home/theflow/projects/tractatus/public/architecture.html", + "result": "passed", + "reason": null + }, + { + "hook": "validate-file-edit", + "timestamp": "2025-10-19T05:24:02.051Z", + "file": "/home/theflow/projects/tractatus/public/js/components/interactive-diagram.js", + "result": "passed", + "reason": null + }, + { + "hook": "validate-file-edit", + "timestamp": "2025-10-19T05:24:14.356Z", + "file": "/home/theflow/projects/tractatus/public/js/components/interactive-diagram.js", + "result": "passed", + "reason": null + }, + { + "hook": "validate-file-edit", + "timestamp": "2025-10-19T05:24:20.477Z", + "file": "/home/theflow/projects/tractatus/public/architecture.html", + "result": "passed", + "reason": null } ], "blocks": [ @@ -4620,9 +4648,9 @@ } ], "session_stats": { - "total_edit_hooks": 441, + "total_edit_hooks": 445, "total_edit_blocks": 34, - "last_updated": "2025-10-19T05:19:01.520Z", + "last_updated": "2025-10-19T05:24:20.477Z", "total_write_hooks": 185, "total_write_blocks": 5 } diff --git a/public/architecture.html b/public/architecture.html index 4ab1525b..d9dd31df 100644 --- a/public/architecture.html +++ b/public/architecture.html @@ -331,23 +331,32 @@
- -
- -
+ +
+ +
- Tractatus Architecture Diagram + Tractatus Architecture Diagram
- - + +
+ +
+ + + +

Explore the Governance Services

+

Click any service node in the diagram (colored circles) or the central "T" to learn more about how Tractatus enforces AI safety.

+
+
@@ -512,7 +521,7 @@ - + diff --git a/public/js/components/interactive-diagram.js b/public/js/components/interactive-diagram.js index 5ecbc2af..5ccb675f 100644 --- a/public/js/components/interactive-diagram.js +++ b/public/js/components/interactive-diagram.js @@ -250,28 +250,19 @@ class InteractiveDiagram { } renderServicePanel(service) { - let panel = document.getElementById('service-detail-panel'); + const panel = document.getElementById('service-detail-panel'); if (!panel) { - panel = document.createElement('div'); - panel.id = 'service-detail-panel'; - panel.className = 'w-full lg:flex-1 bg-white rounded-xl shadow-2xl p-4 sm:p-6 border-2 lg:min-w-[400px]'; - panel.style.borderColor = service.color; - - // 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] Flex container not found'); - return; - } - } else { - panel.style.borderColor = service.color; + console.error('[InteractiveDiagram] Service detail panel not found in DOM'); + return; } + // Update border color to match selected service + panel.style.borderColor = service.color; + panel.style.borderWidth = '2px'; + const html = ` -
+
${service.icon} @@ -281,11 +272,6 @@ class InteractiveDiagram { ${service.shortName}
-

${service.description}

@@ -339,40 +325,6 @@ class InteractiveDiagram { const color = promiseText.getAttribute('data-color'); promiseText.style.color = color; } - - // Add close button event listener (CSP-compliant) - const closeBtn = panel.querySelector('#close-panel-btn'); - if (closeBtn) { - closeBtn.addEventListener('click', () => this.closePanel()); - } - - panel.style.opacity = '0'; - panel.style.transform = 'translateY(20px)'; - panel.style.transition = 'opacity 0.3s ease, transform 0.3s ease'; - - setTimeout(() => { - panel.style.opacity = '1'; - panel.style.transform = 'translateY(0)'; - }, 10); - } - - closePanel() { - const panel = document.getElementById('service-detail-panel'); - if (panel) { - panel.style.opacity = '0'; - panel.style.transform = 'translateY(20px)'; - - setTimeout(() => { - panel.remove(); - }, 300); - } - - if (this.svg) { - this.svg.querySelectorAll('.service-node').forEach(n => n.classList.remove('active')); - this.svg.querySelectorAll('.connection-line').forEach(l => l.classList.remove('active')); - } - - this.activeService = null; } addKeyboardNavigation(nodes) {