From bcc4a4e844944b6f70b4fcf705da46c06be87cd5 Mon Sep 17 00:00:00 2001
From: TheFlow <theflow@sydigital.com>
Date: Sun, 19 Oct 2025 22:10:14 +1300
Subject: [PATCH] fix(demos): resolve initialization timing for pressure chart
 and activity timeline
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

SUMMARY:
Fixed critical bug preventing pressure chart and activity timeline demos
from initializing. Both components now work correctly on architecture page.

ROOT CAUSE:
Scripts loaded at end of body after DOM was already ready. DOMContentLoaded
event had already fired, so initialization callback never executed.

FIX:
Changed initialization to check document.readyState before adding event listener:
- If DOM still loading → wait for DOMContentLoaded event
- If DOM already ready → initialize immediately

FILES FIXED:
- public/js/components/pressure-chart.js (lines 213-227)
- public/js/components/activity-timeline.js (lines 124-137)

IMPACT:
Both demos now function correctly:
✓ Pressure chart: Simulate button works, gauge animates, metrics update
✓ Activity timeline: Governance flow displays with service colors

TESTING:
Verified locally on http://localhost:9000/architecture.html
Both demos initialize and respond to user interactions.

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

Co-Authored-By: Claude <noreply@anthropic.com>
---
 .claude/metrics/hooks-metrics.json        | 18 ++++++++++++++++--
 public/js/components/activity-timeline.js | 11 +++++++++--
 public/js/components/pressure-chart.js    | 11 +++++++++--
 3 files changed, 34 insertions(+), 6 deletions(-)

diff --git a/.claude/metrics/hooks-metrics.json b/.claude/metrics/hooks-metrics.json
index d9d0c107..d26d7b28 100644
--- a/.claude/metrics/hooks-metrics.json
+++ b/.claude/metrics/hooks-metrics.json
@@ -4717,6 +4717,20 @@
       "file": "/home/theflow/projects/tractatus/public/js/demos/deliberation-demo.js",
       "result": "passed",
       "reason": null
+    },
+    {
+      "hook": "validate-file-edit",
+      "timestamp": "2025-10-19T09:06:22.056Z",
+      "file": "/home/theflow/projects/tractatus/public/js/components/pressure-chart.js",
+      "result": "passed",
+      "reason": null
+    },
+    {
+      "hook": "validate-file-edit",
+      "timestamp": "2025-10-19T09:09:35.997Z",
+      "file": "/home/theflow/projects/tractatus/public/js/components/activity-timeline.js",
+      "result": "passed",
+      "reason": null
     }
   ],
   "blocks": [
@@ -4980,9 +4994,9 @@
     }
   ],
   "session_stats": {
-    "total_edit_hooks": 484,
+    "total_edit_hooks": 486,
     "total_edit_blocks": 36,
-    "last_updated": "2025-10-19T09:02:17.123Z",
+    "last_updated": "2025-10-19T09:09:35.997Z",
     "total_write_hooks": 190,
     "total_write_blocks": 7
   }
diff --git a/public/js/components/activity-timeline.js b/public/js/components/activity-timeline.js
index b918a6e4..665f05a3 100644
--- a/public/js/components/activity-timeline.js
+++ b/public/js/components/activity-timeline.js
@@ -122,12 +122,19 @@ class ActivityTimeline {
 
 // Auto-initialize if container exists
 if (typeof window !== 'undefined') {
-  document.addEventListener('DOMContentLoaded', () => {
+  function initActivityTimeline() {
     const container = document.getElementById('activity-timeline');
     if (container) {
       window.activityTimeline = new ActivityTimeline('activity-timeline');
     }
-  });
+  }
+
+  // Initialize immediately if DOM is already loaded, otherwise wait for DOMContentLoaded
+  if (document.readyState === 'loading') {
+    document.addEventListener('DOMContentLoaded', initActivityTimeline);
+  } else {
+    initActivityTimeline();
+  }
 }
 
 // Export for module systems
diff --git a/public/js/components/pressure-chart.js b/public/js/components/pressure-chart.js
index d5bbcb10..32e1a123 100644
--- a/public/js/components/pressure-chart.js
+++ b/public/js/components/pressure-chart.js
@@ -211,12 +211,19 @@ class PressureChart {
 
 // Auto-initialize if container exists
 if (typeof window !== 'undefined') {
-  document.addEventListener('DOMContentLoaded', () => {
+  function initPressureChart() {
     const container = document.getElementById('pressure-chart');
     if (container) {
       window.pressureChart = new PressureChart('pressure-chart');
     }
-  });
+  }
+
+  // Initialize immediately if DOM is already loaded, otherwise wait for DOMContentLoaded
+  if (document.readyState === 'loading') {
+    document.addEventListener('DOMContentLoaded', initPressureChart);
+  } else {
+    initPressureChart();
+  }
 }
 
 // Export for module systems