diff --git a/public/architecture.html b/public/architecture.html index 1e6e49a1..46723791 100644 --- a/public/architecture.html +++ b/public/architecture.html @@ -373,12 +373,12 @@
-
+
-
+
@@ -549,8 +549,8 @@ - - + + diff --git a/public/js/components/activity-timeline.js b/public/js/components/activity-timeline.js index cea95db4..d3d57ecd 100644 --- a/public/js/components/activity-timeline.js +++ b/public/js/components/activity-timeline.js @@ -14,83 +14,126 @@ class ActivityTimeline { return; } - this.events = [ - { - time: '0ms', - service: 'instruction', - name: 'InstructionPersistence', - action: 'Load HIGH persistence instructions', - color: '#6366f1' + this.currentPath = 'fast'; // Default to fast path + + // Define three execution paths with realistic timings + this.pathProfiles = { + fast: { + name: 'Fast Path', + description: 'Simple request, all checks pass', + totalTime: '65ms', + events: [ + { time: '0ms', timeMs: 0, service: 'instruction', name: 'InstructionPersistence', action: 'Load cached instructions', color: '#4338ca' }, + { time: '5ms', timeMs: 5, service: 'validator', name: 'CrossReferenceValidator', action: 'Quick validation check', color: '#6d28d9' }, + { time: '15ms', timeMs: 15, service: 'boundary', name: 'BoundaryEnforcer', action: 'Auto-approved operation', color: '#047857' }, + { time: '25ms', timeMs: 25, service: 'pressure', name: 'ContextPressureMonitor', action: 'Normal pressure detected', color: '#b45309' }, + { time: '50ms', timeMs: 50, service: 'validator', name: 'CrossReferenceValidator', action: 'Final validation', color: '#6d28d9' }, + { time: '65ms', timeMs: 65, service: 'pressure', name: 'ContextPressureMonitor', action: 'Update metrics', color: '#b45309' } + ] }, - { - time: '50ms', - service: 'validator', - name: 'CrossReferenceValidator', - action: 'Verify request against instruction history', - color: '#8b5cf6' + standard: { + name: 'Standard Path', + description: 'Needs validation and verification', + totalTime: '135ms', + events: [ + { time: '0ms', timeMs: 0, service: 'instruction', name: 'InstructionPersistence', action: 'Load HIGH persistence instructions', color: '#4338ca' }, + { time: '8ms', timeMs: 8, service: 'validator', name: 'CrossReferenceValidator', action: 'Verify against instruction history', color: '#6d28d9' }, + { time: '30ms', timeMs: 30, service: 'boundary', name: 'BoundaryEnforcer', action: 'Check approval requirements', color: '#047857' }, + { time: '55ms', timeMs: 55, service: 'pressure', name: 'ContextPressureMonitor', action: 'Calculate pressure level', color: '#b45309' }, + { time: '95ms', timeMs: 95, service: 'metacognitive', name: 'MetacognitiveVerifier', action: 'Verify operation alignment', color: '#be185d' }, + { time: '120ms', timeMs: 120, service: 'validator', name: 'CrossReferenceValidator', action: 'Final validation check', color: '#6d28d9' }, + { time: '135ms', timeMs: 135, service: 'pressure', name: 'ContextPressureMonitor', action: 'Update pressure metrics', color: '#b45309' } + ] }, - { - time: '100ms', - service: 'boundary', - name: 'BoundaryEnforcer', - action: 'Check if request requires human approval', - color: '#10b981' - }, - { - time: '150ms', - service: 'pressure', - name: 'ContextPressureMonitor', - action: 'Calculate current pressure level', - color: '#f59e0b' - }, - { - time: '200ms', - service: 'metacognitive', - name: 'MetacognitiveVerifier', - action: 'Verify operation alignment', - color: '#ec4899' - }, - { - time: '250ms', - service: 'deliberation', - name: 'PluralisticDeliberation', - action: 'Coordinate stakeholder perspectives', - color: '#14b8a6' + complex: { + name: 'Complex Path', + description: 'Requires deliberation and consensus', + totalTime: '285ms', + events: [ + { time: '0ms', timeMs: 0, service: 'instruction', name: 'InstructionPersistence', action: 'Load HIGH persistence instructions', color: '#4338ca' }, + { time: '8ms', timeMs: 8, service: 'validator', name: 'CrossReferenceValidator', action: 'Verify request against instruction history', color: '#6d28d9' }, + { time: '35ms', timeMs: 35, service: 'boundary', name: 'BoundaryEnforcer', action: 'Check if request requires human approval', color: '#047857' }, + { time: '60ms', timeMs: 60, service: 'pressure', name: 'ContextPressureMonitor', action: 'Calculate current pressure level', color: '#b45309' }, + { time: '105ms', timeMs: 105, service: 'metacognitive', name: 'MetacognitiveVerifier', action: 'Verify operation alignment', color: '#be185d' }, + { time: '160ms', timeMs: 160, service: 'deliberation', name: 'PluralisticDeliberation', action: 'Coordinate stakeholder perspectives', color: '#0f766e' }, + { time: '255ms', timeMs: 255, service: 'validator', name: 'CrossReferenceValidator', action: 'Final validation check', color: '#6d28d9' }, + { time: '285ms', timeMs: 285, service: 'pressure', name: 'ContextPressureMonitor', action: 'Update pressure metrics', color: '#b45309' } + ] } - ]; + }; + + // Initialize with fast path by default + this.events = this.pathProfiles[this.currentPath].events; this.init(); } init() { this.render(); + this.isSimulating = false; console.log('[ActivityTimeline] Initialized'); } render() { const eventsHTML = this.events.map((event, index) => ` -
+
- ${event.time} + ${event.time}
-
+
-
+
${event.name}
-
${event.action}
+
${event.action}
`).join(''); + const currentProfile = this.pathProfiles[this.currentPath]; + this.container.innerHTML = `
-
-

Governance Flow

- Request Processing +
+

Governance Flow

+

Estimated timing based on current performance data

+
+ + +
+
Execution Path:
+
+ + + +
+
${currentProfile.description}
+
+ + +
+

+ This shows the framework's governance components working together to validate and process each request. Each component has a specific role in ensuring safe, values-aligned AI operation. +

+

+ Note: Timing values are estimates based on current performance statistics and may vary in production. +

@@ -98,13 +141,37 @@ class ActivityTimeline {
- Total processing time: 250ms | All services coordinated + Total processing time: ${currentProfile.totalTime} | All services coordinated
`; // Apply colors via JavaScript (CSP-compliant) this.applyColors(); + + // Attach event listeners to path radio buttons + this.attachPathListeners(); + } + + attachPathListeners() { + const radios = this.container.querySelectorAll('.path-radio'); + radios.forEach(radio => { + radio.addEventListener('change', (e) => { + this.setPath(e.target.value); + }); + }); + } + + setPath(pathName) { + if (!this.pathProfiles[pathName]) { + console.error(`[ActivityTimeline] Unknown path: ${pathName}`); + return; + } + + console.log(`[ActivityTimeline] Switching to ${pathName} path`); + this.currentPath = pathName; + this.events = this.pathProfiles[pathName].events; + this.render(); } applyColors() { @@ -118,6 +185,96 @@ class ActivityTimeline { name.style.color = color; }); } + + activateEvent(index) { + const eventElement = this.container.querySelector(`[data-event-index="${index}"]`); + if (!eventElement) return; + + const event = this.events[index]; + + // Highlight the event card + eventElement.style.borderColor = event.color; + eventElement.style.backgroundColor = `${event.color}10`; // 10% opacity + eventElement.style.boxShadow = `0 4px 12px ${event.color}40`; + + // Enlarge and pulse the service dot + const dot = eventElement.querySelector('.service-dot'); + if (dot) { + dot.style.width = '12px'; + dot.style.height = '12px'; + dot.style.boxShadow = `0 0 8px ${event.color}`; + } + + console.log(`[ActivityTimeline] Activated event ${index}: ${event.name}`); + } + + deactivateEvent(index) { + const eventElement = this.container.querySelector(`[data-event-index="${index}"]`); + if (!eventElement) return; + + // Reset to default styling + eventElement.style.borderColor = '#e5e7eb'; + eventElement.style.backgroundColor = '#ffffff'; + eventElement.style.boxShadow = ''; + + // Reset service dot + const dot = eventElement.querySelector('.service-dot'); + if (dot) { + dot.style.width = '12px'; + dot.style.height = '12px'; + dot.style.boxShadow = ''; + } + } + + async simulateFlow() { + if (this.isSimulating) { + console.log('[ActivityTimeline] Already simulating, ignoring request'); + return; + } + + this.isSimulating = true; + console.log('[ActivityTimeline] Starting governance flow simulation'); + + // Reset all events first + for (let i = 0; i < this.events.length; i++) { + this.deactivateEvent(i); + } + + // Simulate each event activation with realistic timing + for (let i = 0; i < this.events.length; i++) { + const event = this.events[i]; + const prevEvent = i > 0 ? this.events[i - 1] : null; + + // Calculate actual delay based on event timing (scaled 2x for visibility) + const delay = prevEvent ? (event.timeMs - prevEvent.timeMs) * 2 : 0; + + await new Promise(resolve => setTimeout(resolve, delay)); + + // Deactivate previous event + if (i > 0) { + this.deactivateEvent(i - 1); + } + + // Activate current event + this.activateEvent(i); + console.log(`[ActivityTimeline] Event ${i} activated at ${event.time} (delay: ${delay}ms)`); + } + + // Keep the last event active for a moment, then deactivate + await new Promise(resolve => setTimeout(resolve, 800)); + this.deactivateEvent(this.events.length - 1); + + this.isSimulating = false; + console.log('[ActivityTimeline] Governance flow simulation complete'); + } + + reset() { + console.log('[ActivityTimeline] Resetting timeline'); + for (let i = 0; i < this.events.length; i++) { + this.deactivateEvent(i); + } + this.isSimulating = false; + } } // Auto-initialize if container exists diff --git a/public/js/components/pressure-chart.js b/public/js/components/pressure-chart.js index cdf8cde1..39f1086d 100644 --- a/public/js/components/pressure-chart.js +++ b/public/js/components/pressure-chart.js @@ -7,8 +7,10 @@ */ class PressureChart { - constructor(containerId) { + constructor(containerId, gaugeContainerId = 'pressure-gauge') { this.container = document.getElementById(containerId); + this.gaugeContainer = document.getElementById(gaugeContainerId); + if (!this.container) { console.error(`[PressureChart] Container #${containerId} not found`); return; @@ -36,61 +38,64 @@ class PressureChart { render() { console.log('[PressureChart] render() called, container:', this.container); + this.container.innerHTML = ` -
-
-

Context Pressure Monitor

- NORMAL +
+

Context Pressure Monitor

+
+ NORMAL
+
- -
- - - +
+ + +
- - +
+

+ Interactive Demo: Click "Simulate Pressure" to watch how context pressure builds. As token usage increases, tasks become more complex, and error rates rise. The framework monitors this relationship to detect when AI performance may degrade. +

+

+ The timeline on the right shows how six governance components coordinate to validate each request and maintain safe operation. +

+
- - 0% - Pressure Level - + + + + 0% + Pressure Level + + +
+
+
0
+
Tokens Used
- - -
-
-
0
-
Tokens Used
-
-
-
Low
-
Complexity
-
-
-
0
-
Error Rate
-
+
+
Low
+
Complexity
- - -
- - +
+
0
+
Error Rate
`; + // Clear gauge container if it exists (no longer needed) + if (this.gaugeContainer) { + this.gaugeContainer.innerHTML = ''; + } + // Store references this.elements = { gaugeFill: document.getElementById('gauge-fill'), @@ -159,11 +164,11 @@ class PressureChart { const angle = (level / 100) * 180; // 0-180 degrees const radians = (angle * Math.PI) / 180; - // Calculate arc endpoint + // Calculate arc endpoint (20% smaller gauge: radius 96 instead of 120) const centerX = 150; const centerY = 120; - const radius = 120; - const startX = 30; + const radius = 96; + const startX = 54; const startY = 120; const endX = centerX + radius * Math.cos(Math.PI - radians); const endY = centerY - radius * Math.sin(Math.PI - radians); @@ -191,12 +196,39 @@ class PressureChart { } this.elements.gaugeFill.setAttribute('stroke', color); + + // Update status badge with animation + const previousStatus = this.elements.status.textContent; this.elements.status.textContent = status; - const statusClasses = 'text-xs font-medium uppercase'; - const colorClass = level < 25 ? 'text-green-600' : - level < 50 ? 'text-amber-600' : - level < 75 ? 'text-red-600' : 'text-red-800'; - this.elements.status.className = `${statusClasses} ${colorClass}`; + + // Badge styling based on level + const baseClasses = 'px-4 py-2 rounded-full text-sm font-bold uppercase transition-all duration-500'; + let bgClass, textClass; + + if (level < 25) { + bgClass = 'bg-green-100'; + textClass = 'text-green-700'; + } else if (level < 50) { + bgClass = 'bg-amber-100'; + textClass = 'text-amber-700'; + } else if (level < 75) { + bgClass = 'bg-red-100'; + textClass = 'text-red-700'; + } else { + bgClass = 'bg-red-200'; + textClass = 'text-red-900'; + } + + // Add pulse animation when status changes + const pulseClass = previousStatus !== status ? 'animate-pulse' : ''; + this.elements.status.className = `${baseClasses} ${bgClass} ${textClass} ${pulseClass}`; + + // Remove pulse after animation + if (pulseClass) { + setTimeout(() => { + this.elements.status.className = `${baseClasses} ${bgClass} ${textClass}`; + }, 1000); + } // Update metrics based on pressure level const tokens = Math.round(level * 2000); // 0-200k tokens @@ -211,6 +243,13 @@ class PressureChart { simulate() { console.log('[PressureChart] Simulate button clicked - starting pressure simulation'); + + // Trigger timeline simulation if available + if (window.activityTimeline) { + console.log('[PressureChart] Triggering governance flow timeline'); + window.activityTimeline.simulateFlow(); + } + // Simulate pressure increasing from current to 85% const targetLevels = [30, 50, 70, 85]; let index = 0; @@ -228,6 +267,13 @@ class PressureChart { reset() { console.log('[PressureChart] Reset button clicked'); + + // Reset timeline if available + if (window.activityTimeline) { + console.log('[PressureChart] Resetting governance flow timeline'); + window.activityTimeline.reset(); + } + this.setLevel(0); } } diff --git a/public/test-pressure-chart.html b/public/test-pressure-chart.html new file mode 100644 index 00000000..68d6202e --- /dev/null +++ b/public/test-pressure-chart.html @@ -0,0 +1,29 @@ + + + + + + Test - Pressure Chart + + + + +

Pressure Chart Test Page

+ +
+
+
+
+
+ +
+

Debug Info:

+

If both buttons are visible here, the issue is in the architecture.html page layout.

+

If buttons are still hidden, the issue is in the JavaScript component itself.

+
+ + + + + +