tractatus/public/test-pressure-chart.html
TheFlow 7c62d35bf9 fix(ui): improve pressure monitor visibility and add timeline synchronization
SUMMARY:
Fixed button visibility issues in Context Pressure Monitor and added
interactive timeline synchronization. Three selectable execution paths
with realistic timing profiles.

UI FIXES (pressure-chart.js):
- Reduced gauge size 20% to prevent arc cut-off
- Changed button layout to side-by-side (flex-row)
- Fixed Reset button contrast (bg-gray-900 for WCAG AA)
- Added mobile responsive layout (flex-col sm:flex-row)
- Removed all wrapper div backgrounds causing visibility issues
- Trigger timeline simulation when pressure simulation runs

TIMELINE ENHANCEMENTS (activity-timeline.js):
- Added three execution path profiles (Fast/Standard/Complex)
- Fast: 65ms total (simple requests, all checks pass)
- Standard: 135ms total (needs validation and verification)
- Complex: 285ms total (requires deliberation and consensus)
- Real-time event activation synchronized with pressure changes
- Added timing disclaimer (estimates based on performance data)
- Path selection UI with radio buttons

ARCHITECTURE PAGE:
- Updated script versions for cache-busting
- Added test page for standalone pressure chart debugging

ISSUE RESOLVED:
User reported 'Simulate Pressure Increase' button hidden. Root cause:
Tailwind CSS class conflicts (user correctly identified early). Resolved
by simplifying button layout and removing constraining containers.

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

Co-Authored-By: Claude <noreply@anthropic.com>
2025-10-20 17:18:13 +13:00

29 lines
1,023 B
HTML

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Test - Pressure Chart</title>
<link rel="stylesheet" href="/css/tailwind.css">
</head>
<body class="p-10 bg-gray-50">
<h1 class="text-3xl font-bold mb-8">Pressure Chart Test Page</h1>
<div class="max-w-2xl">
<div class="bg-gray-50 rounded-xl shadow-lg p-6 border border-gray-200">
<div id="pressure-chart"></div>
</div>
</div>
<div class="mt-8 p-4 bg-blue-50 border border-blue-200 rounded max-w-2xl">
<h2 class="font-bold mb-2">Debug Info:</h2>
<p class="text-sm">If both buttons are visible here, the issue is in the architecture.html page layout.</p>
<p class="text-sm">If buttons are still hidden, the issue is in the JavaScript component itself.</p>
</div>
<script src="/js/components/pressure-chart.js?v=20251020142000"></script>
<script src="/js/components/activity-timeline.js?v=20251020150000"></script>
</body>
</html>