john/tractatus
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions
294 commits 1 branch 0 tags 125 MiB
Commit graph

2 commits

Author SHA1 Message Date
TheFlow
bcc4a4e844 fix(demos): resolve initialization timing for pressure chart and activity timeline 
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>
 2025-10-19 22:10:14 +13:00
TheFlow
6914eff0c8 feat(phase3): add data visualizations for context pressure and activity timeline 
SUMMARY:
Implemented Phase 3 Tasks 3.3.1 and 3.3.2: Interactive data visualizations
showing Context Pressure Monitor metrics and Framework Activity Timeline.

CHANGES:

1. Created pressure-chart.js (new):
   - Interactive SVG gauge showing pressure levels (0-100%)
   - Color-coded status: Green (NORMAL), Amber (ELEVATED), Red (HIGH), Dark Red (CRITICAL)
   - Real-time metrics: Tokens Used, Complexity, Error Rate
   - Simulate button to demonstrate pressure increases
   - Reset button to return to normal state
   - Smooth animations with requestAnimationFrame
   - Respects prefers-reduced-motion

2. Created activity-timeline.js (new):
   - Visual timeline of 6 governance services coordinating
   - Shows request processing flow (0ms-250ms)
   - Service-specific color coding
   - Hover effects on timeline events
   - Total processing time displayed

3. Updated tractatus-theme.css:
   - Added data visualization CSS section
   - .gauge-fill-path transition styles
   - .timeline-event hover effects
   - Respects reduced motion preferences

4. Updated architecture.html:
   - Added "Framework in Action" section
   - Two-column grid layout for visualizations
   - Container divs: #pressure-chart and #activity-timeline
   - Script references for both components

FEATURES:

Context Pressure Visualization:
✓ Animated gauge (0-180 degree arc)
✓ Dynamic color changes based on pressure level
✓ Three metrics tracked (tokens, complexity, errors)
✓ Interactive simulation (30% → 50% → 70% → 85%)
✓ Reset functionality

Framework Activity Timeline:
✓ 6 governance services shown in sequence
✓ Service-specific colors match brand system
✓ Hover effects for interactivity
✓ Total processing time: 250ms

UI_TRANSFORMATION_PROJECT_PLAN.md:
✓ Phase 3 Task 3.3.1: Context Pressure Visualization (COMPLETED)
✓ Phase 3 Task 3.3.2: Framework Activity Timeline (COMPLETED)

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

Co-Authored-By: Claude <noreply@anthropic.com>
 2025-10-19 20:49:26 +13:00