feat(interactive): add clickable central core and improve desktop layout
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>
This commit is contained in:
TheFlow
parent
55d48f1192
commit
bc2a58903f
3 changed files with 49 additions and 28 deletions
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
Before Width: | Height: | Size: 7.6 KiB After Width: | Height: | Size: 7.8 KiB |
|
|
@ -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 {
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue