From 06ce4744e91b7ada4af1b6ffd795fdd07ce4e35e Mon Sep 17 00:00:00 2001 From: TheFlow Date: Sun, 26 Oct 2025 13:24:04 +1300 Subject: [PATCH] fix(interactive-diagram): add fallback data to prevent race condition with i18n - Added loadFallbackData() method with English defaults - Check if i18n translations loaded before using them - Falls back to English if window.i18nTranslations not ready yet - Fixes 'Failed to load SVG after 20 retries' error caused by empty serviceData --- public/js/components/interactive-diagram.js | 116 ++++++++++++++++++++ 1 file changed, 116 insertions(+) diff --git a/public/js/components/interactive-diagram.js b/public/js/components/interactive-diagram.js index 7356d483..13b13409 100644 --- a/public/js/components/interactive-diagram.js +++ b/public/js/components/interactive-diagram.js @@ -18,6 +18,14 @@ class InteractiveDiagram { const i18n = window.i18nTranslations || {}; const diagram = i18n.diagram_services || {}; + // If no translations available, use English fallback + const hasTranslations = diagram && Object.keys(diagram).length > 0; + if (!hasTranslations) { + console.warn('[InteractiveDiagram] No translations loaded, using English fallback'); + this.loadFallbackData(); + return; + } + // Define static properties (icons and colors) const staticProps = { overview: { color: '#0ea5e9', icon: '⚙️' }, @@ -57,6 +65,114 @@ class InteractiveDiagram { console.log('[InteractiveDiagram] Loaded translations for', Object.keys(this.serviceData).length, 'services'); } + + loadFallbackData() { + // English fallback data when i18n not ready + 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 is structurally more difficult to bypass than behavioral training alone.' + }, + boundary: { + name: 'BoundaryEnforcer', + shortName: 'Boundary', + color: '#10b981', + icon: '🔒', + description: 'Blocks AI from making values decisions (privacy, ethics, strategic direction). Requires human approval.', + details: [ + 'Enforces Tractatus 12.1-12.7 boundaries', + 'Values decisions architecturally require humans', + 'Prevents AI autonomous decision-making on ethical questions', + 'External enforcement - harder to bypass via prompting' + ], + promise: 'Values boundaries enforced externally—harder to manipulate through prompting.' + }, + instruction: { + name: 'InstructionPersistenceClassifier', + shortName: 'Instruction', + color: '#6366f1', + icon: '📋', + description: 'Stores instructions externally with persistence levels (HIGH/MEDIUM/LOW). Aims to reduce directive fade.', + details: [ + 'Quadrant-based classification (STR/OPS/TAC/SYS/STO)', + 'Time-persistence metadata tagging', + 'Temporal horizon modeling (STRATEGIC, OPERATIONAL, TACTICAL)', + 'External storage independent of AI runtime' + ], + promise: 'Instructions stored outside AI—more resistant to context manipulation.' + }, + validator: { + name: 'CrossReferenceValidator', + shortName: 'Validator', + color: '#8b5cf6', + icon: '✓', + description: 'Validates AI actions against instruction history. Aims to prevent pattern bias overriding explicit directives.', + details: [ + 'Cross-references AI claims with external instruction history', + 'Detects pattern-based overrides of explicit user directives', + 'Independent verification layer', + 'Helps prevent instruction drift' + ], + promise: 'Independent verification—AI claims checked against external source.' + }, + pressure: { + name: 'ContextPressureMonitor', + shortName: 'Pressure', + color: '#f59e0b', + icon: '⚡', + description: 'Monitors AI performance degradation. Escalates when context pressure threatens quality.', + details: [ + 'Tracks token usage, complexity, error rates', + 'Detects degraded operating conditions', + 'Adjusts verification requirements under pressure', + 'Objective metrics for quality monitoring' + ], + promise: 'Objective metrics may detect manipulation attempts early.' + }, + metacognitive: { + name: 'MetacognitiveVerifier', + shortName: 'Metacognitive', + color: '#ec4899', + icon: '💡', + description: 'Requires AI to pause and verify complex operations before execution. Structural safety check.', + details: [ + 'AI self-checks alignment, coherence, safety before execution', + 'Structural pause-and-verify gates', + 'Selective verification (not constant)', + 'Architectural enforcement of reflection steps' + ], + promise: 'Architectural gates aim to enforce verification steps.' + }, + deliberation: { + name: 'PluralisticDeliberationOrchestrator', + shortName: 'Deliberation', + color: '#14b8a6', + icon: '👥', + description: 'Facilitates multi-stakeholder deliberation for values conflicts where no single "correct" answer exists.', + details: [ + 'Non-hierarchical coordination for values conflicts', + 'Stakeholder perspective representation', + 'Consensus-building for ethical trade-offs', + 'Addresses values pluralism in AI safety' + ], + promise: 'Facilitates deliberation across stakeholder perspectives for values conflicts.' + } + }; + console.log('[InteractiveDiagram] Loaded English fallback data for', Object.keys(this.serviceData).length, 'services'); + } + handleLanguageChange() { console.log('[InteractiveDiagram] Language changed, reloading translations'); this.loadTranslations();