feat(researcher): WCAG compliance, Berlin/Weil foundations, fixed footer i18n
- Full WCAG accessibility: ARIA attributes (aria-expanded, aria-controls), keyboard navigation (Enter/Space)
- Reframed research context: Berlin/Weil as primary intellectual foundation (moral pluralism, categorical imperative)
- Bibliography with proper academic citations: Weil (The Need for Roots, Gravity and Grace), Berlin (Four Essays on Liberty)
- Fixed footer i18n: Implemented recursive deepMerge() to preserve nested translation objects
- Root cause: Shallow merge {...obj1, ...obj2} was overwriting entire footer object from common.json
- Consolidated all footer translations in common.json, removed from page-specific files
- Mobile optimization: 44px/48px touch targets, touch-action: manipulation, responsive design
- Progressive enhancement: <noscript> fallback for JavaScript-disabled users
- Version 1.3.0
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
TheFlow
parent
7d693dcc78
commit
7a4603b3a6
9 changed files with 800 additions and 46 deletions
181
public/js/components/footer.js
Normal file
181
public/js/components/footer.js
Normal file
|
|
@ -0,0 +1,181 @@
|
|||
/**
|
||||
* Footer Component - i18n-enabled
|
||||
* Shared footer for all Tractatus pages with language persistence
|
||||
*/
|
||||
|
||||
(function() {
|
||||
'use strict';
|
||||
|
||||
class TractatusFooter {
|
||||
constructor() {
|
||||
this.init();
|
||||
}
|
||||
|
||||
init() {
|
||||
console.log('[Footer] Initializing...');
|
||||
|
||||
// Listen for i18n initialization event (fired by i18n-simple.js)
|
||||
if (window.I18n && window.I18n.translations && window.I18n.translations.footer) {
|
||||
// i18n already loaded
|
||||
console.log('[Footer] i18n already loaded, rendering immediately');
|
||||
this.render();
|
||||
this.attachEventListeners();
|
||||
} else {
|
||||
// Wait for i18nInitialized event
|
||||
console.log('[Footer] Waiting for i18nInitialized event...');
|
||||
window.addEventListener('i18nInitialized', () => {
|
||||
console.log('[Footer] i18n initialized event received');
|
||||
// Double-check translations loaded
|
||||
if (window.I18n && window.I18n.translations && window.I18n.translations.footer) {
|
||||
console.log('[Footer] Footer translations confirmed, rendering');
|
||||
this.render();
|
||||
this.attachEventListeners();
|
||||
} else {
|
||||
console.error('[Footer] Event fired but no footer translations:', window.I18n?.translations);
|
||||
// Render anyway
|
||||
this.render();
|
||||
this.attachEventListeners();
|
||||
}
|
||||
}, { once: true });
|
||||
}
|
||||
}
|
||||
|
||||
render() {
|
||||
const currentYear = new Date().getFullYear();
|
||||
|
||||
// Create footer HTML with data-i18n attributes
|
||||
const footerHTML = `
|
||||
<footer class="bg-gray-900 text-gray-300 mt-16" role="contentinfo">
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
|
||||
|
||||
<!-- Main Footer Content -->
|
||||
<div class="grid grid-cols-1 md:grid-cols-4 gap-8 mb-8">
|
||||
|
||||
<!-- About -->
|
||||
<div>
|
||||
<h3 class="text-white font-semibold mb-4" data-i18n="footer.about_heading">Tractatus Framework</h3>
|
||||
<p class="text-sm text-gray-400" data-i18n="footer.about_text">
|
||||
Architectural constraints for AI safety that preserve human agency through structural, not aspirational, enforcement.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- Documentation -->
|
||||
<div>
|
||||
<h3 class="text-white font-semibold mb-4" data-i18n="footer.documentation_heading">Documentation</h3>
|
||||
<ul class="space-y-2 text-sm">
|
||||
<li><a href="/docs.html" class="hover:text-white transition" data-i18n="footer.documentation_links.framework_docs">Framework Docs</a></li>
|
||||
<li><a href="/about.html" class="hover:text-white transition" data-i18n="footer.documentation_links.about">About</a></li>
|
||||
<li><a href="/about/values.html" class="hover:text-white transition" data-i18n="footer.documentation_links.core_values">Core Values</a></li>
|
||||
<li><a href="/demos/27027-demo.html" class="hover:text-white transition" data-i18n="footer.documentation_links.interactive_demo">Interactive Demo</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<!-- Support -->
|
||||
<div>
|
||||
<h3 class="text-white font-semibold mb-4" data-i18n="footer.support_heading">Support</h3>
|
||||
<ul class="space-y-2 text-sm">
|
||||
<li><a href="/koha.html" class="hover:text-white transition" data-i18n="footer.support_links.koha">Support (Koha)</a></li>
|
||||
<li><a href="/koha/transparency.html" class="hover:text-white transition" data-i18n="footer.support_links.transparency">Transparency</a></li>
|
||||
<li><a href="/media-inquiry.html" class="hover:text-white transition" data-i18n="footer.support_links.media_inquiries">Media Inquiries</a></li>
|
||||
<li><a href="/case-submission.html" class="hover:text-white transition" data-i18n="footer.support_links.submit_case">Submit Case Study</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<!-- Legal & Contact -->
|
||||
<div>
|
||||
<h3 class="text-white font-semibold mb-4" data-i18n="footer.legal_heading">Legal</h3>
|
||||
<ul class="space-y-2 text-sm">
|
||||
<li><a href="/privacy.html" class="hover:text-white transition" data-i18n="footer.legal_links.privacy">Privacy Policy</a></li>
|
||||
<li><a href="mailto:hello@agenticgovernance.digital" class="hover:text-white transition" data-i18n="footer.legal_links.contact">Contact Us</a></li>
|
||||
<li><a href="https://github.com/AgenticGovernance/tractatus-framework" class="hover:text-white transition" target="_blank" rel="noopener">GitHub</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- Divider -->
|
||||
<div class="border-t border-gray-800 pt-8">
|
||||
|
||||
<!-- Te Tiriti Acknowledgement -->
|
||||
<div class="mb-6">
|
||||
<p class="text-sm text-gray-400">
|
||||
<strong class="text-gray-300" data-i18n="footer.te_tiriti_label">Te Tiriti o Waitangi:</strong>
|
||||
<span data-i18n="footer.te_tiriti_text">We acknowledge Te Tiriti o Waitangi and our commitment to partnership, protection, and participation. This project respects Māori data sovereignty (rangatiratanga) and collective guardianship (kaitiakitanga).</span>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- Bottom Row -->
|
||||
<div class="flex flex-col md:flex-row justify-between items-center gap-4 text-sm">
|
||||
<p class="text-gray-400">
|
||||
© ${currentYear} <span data-i18n="footer.copyright">John G Stroh. Licensed under</span> <a href="https://www.apache.org/licenses/LICENSE-2.0" class="text-blue-400 hover:text-blue-300 transition" target="_blank" rel="noopener"><span data-i18n="footer.license">Apache 2.0</span></a>.
|
||||
</p>
|
||||
<p class="text-gray-400" data-i18n="footer.location">
|
||||
Made in Aotearoa New Zealand 🇳🇿
|
||||
</p>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</footer>
|
||||
`;
|
||||
|
||||
// Insert footer at end of body
|
||||
const existingFooter = document.querySelector('footer[role="contentinfo"]');
|
||||
if (existingFooter) {
|
||||
existingFooter.outerHTML = footerHTML;
|
||||
} else if (document.body) {
|
||||
document.body.insertAdjacentHTML('beforeend', footerHTML);
|
||||
} else {
|
||||
// If body not ready, wait for DOM
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
document.body.insertAdjacentHTML('beforeend', footerHTML);
|
||||
this.applyFooterTranslations();
|
||||
});
|
||||
return; // Exit early if DOM not ready
|
||||
}
|
||||
|
||||
// Apply translations after DOM update
|
||||
this.applyFooterTranslations();
|
||||
}
|
||||
|
||||
applyFooterTranslations() {
|
||||
// Use double requestAnimationFrame to ensure DOM is fully painted
|
||||
requestAnimationFrame(() => {
|
||||
requestAnimationFrame(() => {
|
||||
if (window.I18n && window.I18n.applyTranslations) {
|
||||
console.log('[Footer] Applying translations...');
|
||||
console.log('[Footer] Footer exists:', !!document.querySelector('footer[role="contentinfo"]'));
|
||||
console.log('[Footer] Elements with data-i18n:', document.querySelectorAll('footer[role="contentinfo"] [data-i18n]').length);
|
||||
window.I18n.applyTranslations();
|
||||
console.log('[Footer] Translations applied');
|
||||
|
||||
// Verify a sample translation
|
||||
const aboutHeading = document.querySelector('footer [data-i18n="footer.about_heading"]');
|
||||
if (aboutHeading) {
|
||||
console.log('[Footer] about_heading element text:', aboutHeading.innerHTML);
|
||||
}
|
||||
} else {
|
||||
console.warn('[Footer] I18n not available for translation');
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
attachEventListeners() {
|
||||
// Listen for language changes and re-render footer
|
||||
window.addEventListener('languageChanged', (event) => {
|
||||
console.log('[Footer] Language changed to:', event.detail.language);
|
||||
this.render();
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
// Auto-initialize when DOM is ready
|
||||
if (document.readyState === 'loading') {
|
||||
document.addEventListener('DOMContentLoaded', () => new TractatusFooter());
|
||||
} else {
|
||||
new TractatusFooter();
|
||||
}
|
||||
|
||||
})();
|
||||
259
public/js/i18n-simple.js
Normal file
259
public/js/i18n-simple.js
Normal file
|
|
@ -0,0 +1,259 @@
|
|||
/**
|
||||
* Simple i18n system for Tractatus
|
||||
* Supports: en (English), de (German), fr (French), mi (Te Reo Māori - coming soon)
|
||||
*/
|
||||
|
||||
const I18n = {
|
||||
currentLang: 'en',
|
||||
translations: {},
|
||||
supportedLanguages: ['en', 'de', 'fr'],
|
||||
|
||||
async init() {
|
||||
// 1. Detect language preference
|
||||
this.currentLang = this.detectLanguage();
|
||||
|
||||
// 2. Load translations
|
||||
await this.loadTranslations(this.currentLang);
|
||||
|
||||
// 3. Apply to page
|
||||
this.applyTranslations();
|
||||
|
||||
// 4. Update language selector if present
|
||||
this.updateLanguageSelector();
|
||||
|
||||
// 5. Dispatch initialization complete event
|
||||
window.dispatchEvent(new CustomEvent('i18nInitialized', {
|
||||
detail: { language: this.currentLang }
|
||||
}));
|
||||
|
||||
console.log(`[i18n] Initialized with language: ${this.currentLang}`);
|
||||
},
|
||||
|
||||
detectLanguage() {
|
||||
// Priority order:
|
||||
// 1. User's manual selection (localStorage) - allows override via flag clicks
|
||||
// 2. Browser's language setting (automatic detection)
|
||||
// 3. Default to English (fallback)
|
||||
|
||||
// 1. Check localStorage first (user override)
|
||||
const saved = localStorage.getItem('tractatus-lang');
|
||||
if (saved && this.supportedLanguages.includes(saved)) {
|
||||
console.log(`[i18n] Language detected from user preference: ${saved}`);
|
||||
return saved;
|
||||
}
|
||||
|
||||
// 2. Check browser language (automatic detection)
|
||||
const browserLang = (navigator.language || navigator.userLanguage).split('-')[0];
|
||||
if (this.supportedLanguages.includes(browserLang)) {
|
||||
console.log(`[i18n] Language detected from browser: ${browserLang} (from ${navigator.language})`);
|
||||
return browserLang;
|
||||
}
|
||||
|
||||
// 3. Default to English
|
||||
console.log(`[i18n] Language defaulted to: en (browser language '${navigator.language}' not supported)`);
|
||||
return 'en';
|
||||
},
|
||||
|
||||
detectPageName() {
|
||||
// Try to get page name from data attribute first
|
||||
const pageAttr = document.documentElement.getAttribute('data-page');
|
||||
if (pageAttr) {
|
||||
return pageAttr;
|
||||
}
|
||||
|
||||
// Detect from URL path
|
||||
const path = window.location.pathname;
|
||||
|
||||
// Map paths to translation file names
|
||||
const pageMap = {
|
||||
'/': 'homepage',
|
||||
'/index.html': 'homepage',
|
||||
'/researcher.html': 'researcher',
|
||||
'/leader.html': 'leader',
|
||||
'/implementer.html': 'implementer',
|
||||
'/about.html': 'about',
|
||||
'/about/values.html': 'values',
|
||||
'/about/values': 'values',
|
||||
'/faq.html': 'faq',
|
||||
'/koha.html': 'koha',
|
||||
'/koha/transparency.html': 'transparency',
|
||||
'/koha/transparency': 'transparency',
|
||||
'/privacy.html': 'privacy',
|
||||
'/privacy': 'privacy'
|
||||
};
|
||||
|
||||
return pageMap[path] || 'homepage';
|
||||
},
|
||||
|
||||
async loadTranslations(lang) {
|
||||
try {
|
||||
// Always load common translations (footer, navbar, etc.)
|
||||
const commonResponse = await fetch(`/locales/${lang}/common.json`);
|
||||
let commonTranslations = {};
|
||||
if (commonResponse.ok) {
|
||||
commonTranslations = await commonResponse.json();
|
||||
}
|
||||
|
||||
// Load page-specific translations
|
||||
const pageName = this.detectPageName();
|
||||
const pageResponse = await fetch(`/locales/${lang}/${pageName}.json`);
|
||||
let pageTranslations = {};
|
||||
if (pageResponse.ok) {
|
||||
pageTranslations = await pageResponse.json();
|
||||
} else if (pageName !== 'homepage') {
|
||||
// If page-specific translations don't exist, that's okay for some pages
|
||||
console.warn(`[i18n] No translations found for ${lang}/${pageName}, using common only`);
|
||||
} else {
|
||||
throw new Error(`Failed to load translations for ${lang}/${pageName}`);
|
||||
}
|
||||
|
||||
// Deep merge common and page-specific translations (page-specific takes precedence)
|
||||
// Uses deep merge to preserve nested objects like footer in common.json
|
||||
this.translations = this.deepMerge(commonTranslations, pageTranslations);
|
||||
console.log(`[i18n] Loaded translations: common + ${pageName}`);
|
||||
console.log(`[i18n] Footer translations present:`, !!this.translations.footer);
|
||||
console.log(`[i18n] Footer.about_heading:`, this.translations.footer?.about_heading);
|
||||
} catch (error) {
|
||||
console.error(`[i18n] Error loading translations:`, error);
|
||||
// Fallback to English if loading fails
|
||||
if (lang !== 'en') {
|
||||
this.currentLang = 'en';
|
||||
await this.loadTranslations('en');
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
t(key) {
|
||||
const keys = key.split('.');
|
||||
let value = this.translations;
|
||||
|
||||
for (const k of keys) {
|
||||
if (value && typeof value === 'object') {
|
||||
value = value[k];
|
||||
} else {
|
||||
return key; // Return key if translation not found
|
||||
}
|
||||
}
|
||||
|
||||
return value || key;
|
||||
},
|
||||
|
||||
applyTranslations() {
|
||||
// Find all elements with data-i18n attribute
|
||||
// Using innerHTML to preserve formatting like <em>, <strong>, <a> tags in translations
|
||||
document.querySelectorAll('[data-i18n]').forEach(el => {
|
||||
const key = el.dataset.i18n;
|
||||
const translation = this.t(key);
|
||||
|
||||
if (typeof translation === 'string') {
|
||||
el.innerHTML = translation;
|
||||
}
|
||||
});
|
||||
|
||||
// Handle data-i18n-html for HTML content (kept for backward compatibility)
|
||||
document.querySelectorAll('[data-i18n-html]').forEach(el => {
|
||||
const key = el.dataset.i18nHtml;
|
||||
const translation = this.t(key);
|
||||
|
||||
if (typeof translation === 'string') {
|
||||
el.innerHTML = translation;
|
||||
}
|
||||
});
|
||||
|
||||
// Handle data-i18n-placeholder for input placeholders
|
||||
document.querySelectorAll('[data-i18n-placeholder]').forEach(el => {
|
||||
const key = el.dataset.i18nPlaceholder;
|
||||
const translation = this.t(key);
|
||||
|
||||
if (typeof translation === 'string') {
|
||||
el.placeholder = translation;
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
async setLanguage(lang) {
|
||||
if (!this.supportedLanguages.includes(lang)) {
|
||||
console.error(`[i18n] Unsupported language: ${lang}`);
|
||||
return;
|
||||
}
|
||||
|
||||
// Save preference (overrides browser language detection)
|
||||
localStorage.setItem('tractatus-lang', lang);
|
||||
console.log(`[i18n] User manually selected language: ${lang} (saved to localStorage)`);
|
||||
|
||||
// Update current language
|
||||
this.currentLang = lang;
|
||||
|
||||
// Reload translations
|
||||
await this.loadTranslations(lang);
|
||||
|
||||
// Reapply to page
|
||||
this.applyTranslations();
|
||||
|
||||
// Update selector
|
||||
this.updateLanguageSelector();
|
||||
|
||||
// Update HTML lang attribute
|
||||
document.documentElement.lang = lang;
|
||||
|
||||
// Dispatch event for language change
|
||||
window.dispatchEvent(new CustomEvent('languageChanged', {
|
||||
detail: { language: lang }
|
||||
}));
|
||||
|
||||
console.log(`[i18n] Language changed to: ${lang} (will persist across pages)`);
|
||||
},
|
||||
|
||||
updateLanguageSelector() {
|
||||
const selector = document.getElementById('language-selector');
|
||||
if (selector) {
|
||||
selector.value = this.currentLang;
|
||||
}
|
||||
},
|
||||
|
||||
getLanguageName(code) {
|
||||
const names = {
|
||||
'en': 'English',
|
||||
'de': 'Deutsch',
|
||||
'fr': 'Français',
|
||||
'mi': 'Te Reo Māori'
|
||||
};
|
||||
return names[code] || code;
|
||||
},
|
||||
|
||||
/**
|
||||
* Deep merge utility function
|
||||
* Recursively merges source into target without overwriting nested objects
|
||||
* @param {Object} target - Base object (e.g., commonTranslations)
|
||||
* @param {Object} source - Override object (e.g., pageTranslations)
|
||||
* @returns {Object} - Deeply merged result
|
||||
*/
|
||||
deepMerge(target, source) {
|
||||
const output = { ...target };
|
||||
|
||||
for (const key in source) {
|
||||
if (source.hasOwnProperty(key)) {
|
||||
// If both values are objects (and not arrays), merge recursively
|
||||
if (source[key] && typeof source[key] === 'object' && !Array.isArray(source[key]) &&
|
||||
target[key] && typeof target[key] === 'object' && !Array.isArray(target[key])) {
|
||||
output[key] = this.deepMerge(target[key], source[key]);
|
||||
} else {
|
||||
// Otherwise, source value takes precedence
|
||||
output[key] = source[key];
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
return output;
|
||||
}
|
||||
};
|
||||
|
||||
// Auto-initialize when DOM is ready
|
||||
if (document.readyState === 'loading') {
|
||||
document.addEventListener('DOMContentLoaded', () => I18n.init());
|
||||
} else {
|
||||
I18n.init();
|
||||
}
|
||||
|
||||
// Make available globally
|
||||
window.I18n = I18n;
|
||||
48
public/js/researcher-page.js
Normal file
48
public/js/researcher-page.js
Normal file
|
|
@ -0,0 +1,48 @@
|
|||
/**
|
||||
* Researcher Page - Accordion Functionality
|
||||
* Handles expandable/collapsible sections for research content
|
||||
* Implements WAI-ARIA Authoring Practices for accordions
|
||||
*/
|
||||
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
// Get all accordion buttons
|
||||
const accordionButtons = document.querySelectorAll('[data-accordion]');
|
||||
|
||||
accordionButtons.forEach(button => {
|
||||
// Click handler
|
||||
button.addEventListener('click', function() {
|
||||
const accordionId = this.dataset.accordion;
|
||||
toggleAccordion(accordionId, this);
|
||||
});
|
||||
|
||||
// Keyboard handler (Enter and Space)
|
||||
button.addEventListener('keydown', function(e) {
|
||||
if (e.key === 'Enter' || e.key === ' ') {
|
||||
e.preventDefault();
|
||||
const accordionId = this.dataset.accordion;
|
||||
toggleAccordion(accordionId, this);
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
/**
|
||||
* Toggle accordion section open/closed
|
||||
* @param {string} id - Accordion section ID
|
||||
* @param {HTMLElement} button - The button element that triggered toggle
|
||||
*/
|
||||
function toggleAccordion(id, button) {
|
||||
const content = document.getElementById(id + '-content');
|
||||
const icon = document.getElementById(id + '-icon');
|
||||
|
||||
if (content && icon) {
|
||||
const isExpanded = content.classList.contains('active');
|
||||
|
||||
// Toggle CSS classes for visual state
|
||||
content.classList.toggle('active');
|
||||
icon.classList.toggle('active');
|
||||
|
||||
// Update ARIA state
|
||||
button.setAttribute('aria-expanded', isExpanded ? 'false' : 'true');
|
||||
}
|
||||
}
|
||||
});
|
||||
|
|
@ -594,12 +594,8 @@
|
|||
</div>
|
||||
|
||||
<!-- Footer -->
|
||||
<!-- Version Management & PWA -->
|
||||
<script src="/js/version-manager.js?v=0.1.0.1760680958072"></script>
|
||||
<script src="/js/leader-page.js?v=0.1.0.1760680958072"></script>
|
||||
|
||||
<!-- Internationalization -->
|
||||
<script src="/js/i18n-simple.js?v=1760818106"></script>
|
||||
<!-- Internationalization (must load first for footer translations) -->
|
||||
<script src="/js/i18n-simple.js?v=1761130172"></script>
|
||||
<script src="/js/components/language-selector.js?v=1760818106"></script>
|
||||
|
||||
<!-- Scroll Animations (Phase 3) -->
|
||||
|
|
@ -607,8 +603,12 @@
|
|||
<!-- Page Transitions (Phase 3) -->
|
||||
<script src="/js/page-transitions.js"></script>
|
||||
|
||||
<!-- Version Management & PWA -->
|
||||
<script src="/js/version-manager.js?v=0.1.0.1760680958072"></script>
|
||||
<script src="/js/leader-page.js?v=0.1.0.1760680958072"></script>
|
||||
|
||||
<!-- Footer Component -->
|
||||
<script src="/js/components/footer.js"></script>
|
||||
<script src="/js/components/footer.js?v=1761129862"></script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
45
public/locales/en/common.json
Normal file
45
public/locales/en/common.json
Normal file
|
|
@ -0,0 +1,45 @@
|
|||
{
|
||||
"footer": {
|
||||
"about_heading": "Tractatus Framework",
|
||||
"about_text": "Architectural constraints for AI safety that preserve human agency through structural, not aspirational, enforcement.",
|
||||
"documentation_heading": "Documentation",
|
||||
"documentation_links": {
|
||||
"framework_docs": "Framework Docs",
|
||||
"about": "About",
|
||||
"core_values": "Core Values",
|
||||
"interactive_demo": "Interactive Demo"
|
||||
},
|
||||
"support_heading": "Support",
|
||||
"support_links": {
|
||||
"koha": "Support (Koha)",
|
||||
"transparency": "Transparency",
|
||||
"media_inquiries": "Media Inquiries",
|
||||
"submit_case": "Submit Case Study"
|
||||
},
|
||||
"legal_heading": "Legal",
|
||||
"legal_links": {
|
||||
"privacy": "Privacy Policy",
|
||||
"contact": "Contact Us",
|
||||
"github": "GitHub"
|
||||
},
|
||||
"te_tiriti_label": "Te Tiriti o Waitangi:",
|
||||
"te_tiriti_text": "We acknowledge Te Tiriti o Waitangi and our commitment to partnership, protection, and participation. This project respects Māori data sovereignty (rangatiratanga) and collective guardianship (kaitiakitanga).",
|
||||
"copyright": "John G Stroh. Licensed under",
|
||||
"license": "Apache 2.0",
|
||||
"location": "Made in Aotearoa New Zealand 🇳🇿",
|
||||
"additional_resources": "Additional Resources",
|
||||
"for_decision_makers": "For Decision-Makers",
|
||||
"for_decision_makers_desc": "Strategic perspective on governance challenges and architectural approaches",
|
||||
"implementation_guide": "Implementation Guide",
|
||||
"implementation_guide_desc": "Technical integration patterns and deployment considerations",
|
||||
"further_info": "Further Information",
|
||||
"technical_docs": "Technical Documentation",
|
||||
"technical_docs_desc": "Complete architecture specifications, implementation patterns, API reference",
|
||||
"system_architecture": "System Architecture",
|
||||
"system_architecture_desc": "Runtime-agnostic governance layer design and integration approach",
|
||||
"research_case_studies": "Research & Case Studies",
|
||||
"research_case_studies_desc": "Academic foundations, failure mode analysis, governance research",
|
||||
"contact": "Contact:",
|
||||
"contact_text": "For pilot partnerships, validation studies, or technical consultation, contact via"
|
||||
}
|
||||
}
|
||||
54
public/locales/en/leader.json
Normal file
54
public/locales/en/leader.json
Normal file
|
|
@ -0,0 +1,54 @@
|
|||
{
|
||||
"page": {
|
||||
"title": "For Decision-Makers | Tractatus AI Safety Framework",
|
||||
"description": "Structural AI governance for organisations deploying LLM systems at scale. Research framework addressing architectural gaps in AI safety."
|
||||
},
|
||||
"header": {
|
||||
"badge": "Research Framework • Early Development",
|
||||
"title": "Tractatus: Architectural Governance for LLM Systems",
|
||||
"subtitle": "A governance framework addressing structural gaps in AI safety through external architectural controls. Designed for organisations deploying large language models at scale where conventional oversight mechanisms prove insufficient."
|
||||
},
|
||||
"sections": {
|
||||
"governance_gap": {
|
||||
"heading": "The Governance Gap",
|
||||
"intro": "Current AI governance approaches—policy documents, training programmes, ethical guidelines—rely on voluntary compliance. LLM systems can bypass these controls simply by not invoking them. When an AI agent needs to check a policy, it must choose to do so. When it should escalate a decision to human oversight, it must recognise that obligation.",
|
||||
"problem": "This creates a structural problem: governance exists only insofar as the AI acknowledges it. For organisations subject to EU AI Act Article 14 (human oversight requirements) or deploying AI in high-stakes domains, this voluntary model is inadequate.",
|
||||
"solution": "Tractatus explores whether governance can be made architecturally external—difficult to bypass not through better prompts, but through system design that places control points outside the AI's discretion."
|
||||
},
|
||||
"architectural_approach": {
|
||||
"heading": "Architectural Approach",
|
||||
"three_layer_title": "Three-Layer Architecture",
|
||||
"services_title": "Six Governance Services"
|
||||
},
|
||||
"governance_capabilities": {
|
||||
"heading": "Governance Capabilities",
|
||||
"intro": "Three interactive demonstrations showing governance infrastructure in operation. These show mechanisms, not fictional scenarios.",
|
||||
"audit_trail_title": "Audit Trail & Compliance Evidence Generation",
|
||||
"audit_trail_desc": "Immutable logging, evidence extraction, regulatory reporting",
|
||||
"continuous_improvement_title": "Continuous Improvement: Incident → Rule Creation",
|
||||
"continuous_improvement_desc": "Learning from failures, automated rule generation, validation",
|
||||
"pluralistic_deliberation_title": "Pluralistic Deliberation: Values Conflict Resolution",
|
||||
"pluralistic_deliberation_desc": "Multi-stakeholder engagement, non-hierarchical process, moral remainder documentation"
|
||||
},
|
||||
"development_status": {
|
||||
"heading": "Development Status",
|
||||
"warning_title": "Early-Stage Research Framework",
|
||||
"warning_text": "Tractatus is a proof-of-concept developed over six months in a single project context (this website). It demonstrates architectural patterns for AI governance but has not undergone independent validation, red-team testing, or multi-organisation deployment.",
|
||||
"validation_title": "Validated vs. Not Validated"
|
||||
},
|
||||
"eu_ai_act": {
|
||||
"heading": "EU AI Act Considerations",
|
||||
"article_14_title": "Regulation 2024/1689, Article 14: Human Oversight"
|
||||
},
|
||||
"research_foundations": {
|
||||
"heading": "Research Foundations",
|
||||
"org_theory_title": "Organisational Theory & Philosophical Basis"
|
||||
},
|
||||
"scope_limitations": {
|
||||
"heading": "Scope & Limitations",
|
||||
"title": "What This Is Not • What It Offers",
|
||||
"not_title": "Tractatus is not:",
|
||||
"offers_title": "What it offers:"
|
||||
}
|
||||
}
|
||||
}
|
||||
52
public/locales/en/researcher.json
Normal file
52
public/locales/en/researcher.json
Normal file
|
|
@ -0,0 +1,52 @@
|
|||
{
|
||||
"page": {
|
||||
"title": "For Researchers | Tractatus AI Safety Framework",
|
||||
"description": "Research foundations, empirical observations, and theoretical basis for architectural approaches to AI governance. Early-stage framework exploring structural constraints on LLM systems."
|
||||
},
|
||||
"header": {
|
||||
"badge": "Research Framework • Empirical Observations",
|
||||
"title": "Research Foundations & Empirical Observations",
|
||||
"subtitle": "Tractatus explores architectural approaches to AI governance through empirical observation of failure modes and application of organisational theory. This page documents research foundations, observed patterns, and theoretical basis for the framework."
|
||||
},
|
||||
"sections": {
|
||||
"research_context": {
|
||||
"heading": "Research Context & Scope",
|
||||
"development_note": "Development Context",
|
||||
"development_text": "Tractatus was developed over six months (April–October 2025) in progressive stages that evolved into a live demonstration of its capabilities in the form of a single-project context (https://agenticgovernance.digital). Observations derive from direct engagement with Claude Code (Anthropic's Sonnet 4.5 model) across approximately 500 development sessions. This is exploratory research, not controlled study."
|
||||
},
|
||||
"theoretical_foundations": {
|
||||
"heading": "Theoretical Foundations",
|
||||
"org_theory_title": "Organisational Theory Basis",
|
||||
"values_pluralism_title": "Values Pluralism & Moral Philosophy"
|
||||
},
|
||||
"empirical_observations": {
|
||||
"heading": "Empirical Observations: Documented Failure Modes",
|
||||
"intro": "Three failure patterns observed repeatedly during framework development. These are not hypothetical scenarios—they are documented incidents that occurred during this project's development.",
|
||||
"failure_1_title": "Pattern Recognition Bias Override (The 27027 Incident)",
|
||||
"failure_2_title": "Gradual Values Drift Under Context Pressure",
|
||||
"failure_3_title": "Silent Quality Degradation at High Context Pressure",
|
||||
"research_note": "These patterns emerged from direct observation, not hypothesis testing. We don't claim they're universal to all LLM systems or deployment contexts. They represent empirical basis for framework design decisions—problems we actually encountered and architectural interventions that actually worked in this specific context."
|
||||
},
|
||||
"architecture": {
|
||||
"heading": "Six-Component Architecture",
|
||||
"services_title": "Framework Services & Functions",
|
||||
"principle": "Services operate external to AI runtime with autonomous triggering. AI doesn't decide \"should I check governance rules?\"—architecture enforces checking by default. This addresses voluntary compliance problem inherent in prompt-based governance."
|
||||
},
|
||||
"demos": {
|
||||
"heading": "Interactive Demonstrations",
|
||||
"classification_title": "Instruction Classification",
|
||||
"classification_desc": "Explore how instructions are classified across quadrants with persistence levels and temporal scope.",
|
||||
"incident_title": "27027 Incident Timeline",
|
||||
"incident_desc": "Step through pattern recognition bias failure and architectural intervention that prevented it.",
|
||||
"boundary_title": "Boundary Evaluation",
|
||||
"boundary_desc": "Test decisions against boundary enforcement to see which require human judgment vs. AI autonomy."
|
||||
},
|
||||
"resources": {
|
||||
"heading": "Research Documentation"
|
||||
},
|
||||
"limitations": {
|
||||
"heading": "Limitations & Future Research Directions",
|
||||
"title": "Known Limitations & Research Gaps"
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -25,25 +25,50 @@
|
|||
.skip-link:focus { left: 0; z-index: 100; background: white; padding: 1rem; }
|
||||
a:focus, button:focus { outline: 2px solid #d97706; outline-offset: 2px; }
|
||||
|
||||
/* Accordion styles */
|
||||
.accordion-button { cursor: pointer; user-select: none; }
|
||||
/* Accordion styles - mobile-optimized */
|
||||
.accordion-button {
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
touch-action: manipulation; /* Prevent double-tap zoom on mobile */
|
||||
-webkit-tap-highlight-color: rgba(139, 92, 246, 0.1); /* iOS tap feedback */
|
||||
min-height: 44px; /* WCAG touch target minimum */
|
||||
}
|
||||
.accordion-content {
|
||||
max-height: 0;
|
||||
overflow: hidden;
|
||||
transition: max-height 0.3s ease-out;
|
||||
}
|
||||
.accordion-content.active {
|
||||
max-height: 3000px;
|
||||
max-height: 5000px; /* Increased for mobile scrolling */
|
||||
transition: max-height 0.5s ease-in;
|
||||
}
|
||||
.accordion-icon { transition: transform 0.3s ease; }
|
||||
.accordion-icon.active { transform: rotate(180deg); }
|
||||
|
||||
/* Mobile-specific adjustments */
|
||||
@media (max-width: 640px) {
|
||||
.accordion-button { min-height: 48px; } /* Larger touch target on small screens */
|
||||
body { font-size: 16px; } /* Prevent iOS zoom on input focus */
|
||||
}
|
||||
|
||||
/* Progressive enhancement: Show all content if JavaScript disabled */
|
||||
noscript + * .accordion-content {
|
||||
max-height: none !important;
|
||||
overflow: visible !important;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body class="bg-white">
|
||||
|
||||
<a href="#main-content" class="skip-link">Skip to main content</a>
|
||||
|
||||
<!-- JavaScript required notice -->
|
||||
<noscript>
|
||||
<div class="bg-amber-50 border-b border-amber-200 px-4 py-3 text-center text-sm text-amber-900">
|
||||
<strong>Note:</strong> This page uses JavaScript for interactive features (accordions, animations). Content remains accessible but expandable sections will be visible by default.
|
||||
</div>
|
||||
</noscript>
|
||||
|
||||
<script src="/js/components/navbar.js?v=0.1.0.1760254958072"></script>
|
||||
|
||||
<!-- Breadcrumb Navigation -->
|
||||
|
|
@ -88,10 +113,16 @@
|
|||
|
||||
<div class="prose prose-sm max-w-none text-gray-700 space-y-3">
|
||||
<p>
|
||||
The framework emerged from practical necessity rather than theoretical speculation. During development, we observed recurring patterns where AI systems would override explicit instructions, drift from established values constraints, or silently degrade quality under context pressure. Traditional governance approaches (policy documents, ethical guidelines, prompt engineering) proved insufficient to prevent these failures.
|
||||
<strong>Aligning advanced AI with human values is among the most consequential challenges we face.</strong> As capability growth accelerates under big tech momentum, we confront a categorical imperative: preserve human agency over values decisions, or risk ceding control entirely.
|
||||
</p>
|
||||
<p>
|
||||
This led to research question: <strong>Can governance be made architecturally external to AI systems</strong> rather than relying on voluntary AI compliance? Tractatus represents one exploration of that question, grounded in organisational theory and validated through empirical observation of what actually prevented failures in practice.
|
||||
The framework emerged from practical necessity. During development, we observed recurring patterns where AI systems would override explicit instructions, drift from established values constraints, or silently degrade quality under context pressure. Traditional governance approaches (policy documents, ethical guidelines, prompt engineering) proved insufficient to prevent these failures.
|
||||
</p>
|
||||
<p>
|
||||
Instead of hoping AI systems "behave correctly," Tractatus proposes <strong>structural constraints where certain decision types require human judgment</strong>. These architectural boundaries can adapt to individual, organizational, and societal norms—creating a foundation for bounded AI operation that may scale more safely with capability growth.
|
||||
</p>
|
||||
<p>
|
||||
This led to the central research question: <strong>Can governance be made architecturally external to AI systems</strong> rather than relying on voluntary AI compliance? If this approach can work at scale, Tractatus may represent a turning point—a path where AI enhances human capability without compromising human sovereignty.
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
|
|
@ -102,13 +133,17 @@
|
|||
|
||||
<!-- Organisational Theory -->
|
||||
<div class="border-l-4 border border-gray-200 rounded-lg mb-4 border-l-service-validator animate-on-scroll" data-animation="slide-up" data-stagger="100">
|
||||
<div class="accordion-button bg-white p-5 flex justify-between items-center hover:bg-purple-50 transition-colors duration-200" data-accordion="org-theory">
|
||||
<button class="accordion-button bg-white p-5 flex justify-between items-center hover:bg-purple-50 transition-colors duration-200 w-full text-left"
|
||||
data-accordion="org-theory"
|
||||
aria-expanded="false"
|
||||
aria-controls="org-theory-content"
|
||||
id="org-theory-button">
|
||||
<h3 class="font-semibold text-gray-900 group-hover:text-[#8b5cf6] transition-colors" data-i18n="sections.theoretical_foundations.org_theory_title">Organisational Theory Basis</h3>
|
||||
<svg id="org-theory-icon" class="accordion-icon w-5 h-5 text-purple-600 transition-transform duration-300" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<svg id="org-theory-icon" class="accordion-icon w-5 h-5 text-purple-600 transition-transform duration-300" aria-hidden="true" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/>
|
||||
</svg>
|
||||
</div>
|
||||
<div id="org-theory-content" class="accordion-content">
|
||||
</button>
|
||||
<div id="org-theory-content" class="accordion-content" role="region" aria-labelledby="org-theory-button">
|
||||
<div class="p-5 border-t border-gray-200 prose prose-sm max-w-none text-gray-700">
|
||||
<p class="mb-4">
|
||||
Tractatus draws on four decades of organisational research addressing authority structures during knowledge democratisation:
|
||||
|
|
@ -151,35 +186,54 @@
|
|||
|
||||
<!-- Values Pluralism -->
|
||||
<div class="border-l-4 border border-gray-200 rounded-lg border-l-service-validator animate-on-scroll" data-animation="slide-up" data-stagger="200">
|
||||
<div class="accordion-button bg-white p-5 flex justify-between items-center hover:bg-purple-50 transition-colors duration-200" data-accordion="values">
|
||||
<button class="accordion-button bg-white p-5 flex justify-between items-center hover:bg-purple-50 transition-colors duration-200 w-full text-left"
|
||||
data-accordion="values"
|
||||
aria-expanded="false"
|
||||
aria-controls="values-content"
|
||||
id="values-button">
|
||||
<h3 class="font-semibold text-gray-900 group-hover:text-[#8b5cf6] transition-colors" data-i18n="sections.theoretical_foundations.values_pluralism_title">Values Pluralism & Moral Philosophy</h3>
|
||||
<svg id="values-icon" class="accordion-icon w-5 h-5 text-purple-600 transition-transform duration-300" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<svg id="values-icon" class="accordion-icon w-5 h-5 text-purple-600 transition-transform duration-300" aria-hidden="true" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/>
|
||||
</svg>
|
||||
</div>
|
||||
<div id="values-content" class="accordion-content">
|
||||
</button>
|
||||
<div id="values-content" class="accordion-content" role="region" aria-labelledby="values-button">
|
||||
<div class="p-5 border-t border-gray-200 prose prose-sm max-w-none text-gray-700">
|
||||
<div class="bg-blue-50 border border-blue-200 rounded p-3 mb-4 text-sm">
|
||||
<strong>Core Research Focus:</strong> The PluralisticDeliberationOrchestrator represents Tractatus's primary theoretical contribution, addressing how to maintain human values persistence in organizations augmented by AI agents.
|
||||
</div>
|
||||
|
||||
<p class="mb-4">
|
||||
The PluralisticDeliberationOrchestrator addresses fundamental problem in AI safety: <strong>many "safety" questions are actually values conflicts</strong> where multiple legitimate perspectives exist.
|
||||
<strong>The Central Problem:</strong> Many "safety" questions in AI governance are actually values conflicts where multiple legitimate perspectives exist. When efficiency conflicts with transparency, or innovation with risk mitigation, no algorithm can determine the "correct" answer. These are values trade-offs requiring human deliberation across stakeholder perspectives.
|
||||
</p>
|
||||
|
||||
<p class="mb-3"><strong>Isaiah Berlin: Value Pluralism</strong></p>
|
||||
<p class="mb-4 pl-4">
|
||||
Berlin's concept of value pluralism argues that legitimate values can conflict without one being objectively superior. Liberty and equality, justice and mercy, innovation and stability—these are incommensurable goods. AI systems trained on utilitarian efficiency maximization cannot adjudicate between them without imposing a single values framework that excludes legitimate alternatives.
|
||||
</p>
|
||||
|
||||
<p class="mb-3"><strong>Simone Weil: Attention and Human Needs</strong></p>
|
||||
<p class="mb-4 pl-4">
|
||||
Weil's philosophy of attention informs the orchestrator's deliberative process. <em>The Need for Roots</em> identifies fundamental human needs (order, liberty, responsibility, equality, hierarchical structure, honor, security, risk, etc.) that exist in tension. Proper attention requires seeing these needs in their full particularity rather than abstracting them into algorithmic weights. In AI-augmented organizations, the risk is that bot-mediated processes treat human values as optimization parameters rather than incommensurable needs requiring careful attention.
|
||||
</p>
|
||||
|
||||
<p class="mb-3"><strong>Bernard Williams: Moral Remainder</strong></p>
|
||||
<p class="mb-4 pl-4">
|
||||
Williams' concept of moral remainder acknowledges that even optimal decisions create unavoidable harm to other legitimate values. The orchestrator documents dissenting perspectives not as "minority opinions to be overruled" but as legitimate moral positions that the chosen course necessarily violates. This prevents the AI governance equivalent of declaring optimization complete when values conflicts are merely suppressed.
|
||||
</p>
|
||||
|
||||
<p class="mb-4">
|
||||
When efficiency conflicts with transparency, or innovation with risk mitigation, no algorithm can determine the "correct" answer. These are values trade-offs requiring human deliberation across stakeholder perspectives. AI systems that attempt to resolve such conflicts autonomously impose single values framework—often utilitarian efficiency maximisation encoded in training data.
|
||||
</p>
|
||||
|
||||
<p class="mb-4">
|
||||
Framework draws on moral pluralism literature (Isaiah Berlin, Bernard Williams, Martha Nussbaum) arguing legitimate values can conflict without one being objectively superior. Rather than algorithmic resolution, framework facilitates:
|
||||
<strong>Framework Implementation:</strong> Rather than algorithmic resolution, the PluralisticDeliberationOrchestrator facilitates:
|
||||
</p>
|
||||
|
||||
<ul class="list-disc pl-6 mb-4 space-y-2">
|
||||
<li><strong>Stakeholder identification:</strong> Who has legitimate interest in this decision?</li>
|
||||
<li><strong>Non-hierarchical deliberation:</strong> Equal voice without automatic expert override</li>
|
||||
<li><strong>Documented dissent:</strong> Minority positions recorded in full</li>
|
||||
<li><strong>Moral remainder:</strong> Acknowledgment that even optimal decisions create unavoidable harm to other legitimate values</li>
|
||||
<li><strong>Stakeholder identification:</strong> Who has legitimate interest in this decision? (Weil: whose needs are implicated?)</li>
|
||||
<li><strong>Non-hierarchical deliberation:</strong> Equal voice without automatic expert override (Berlin: no privileged value hierarchy)</li>
|
||||
<li><strong>Quality of attention:</strong> Detailed exploration of how decision affects each stakeholder's needs (Weil: particularity not abstraction)</li>
|
||||
<li><strong>Documented dissent:</strong> Minority positions recorded in full (Williams: moral remainder made explicit)</li>
|
||||
</ul>
|
||||
|
||||
<p class="mb-4">
|
||||
This approach recognises that <strong>governance isn't solving values conflicts—it's ensuring they're addressed through appropriate deliberative process</strong> rather than AI imposing resolution.
|
||||
This approach recognises that <strong>governance isn't solving values conflicts—it's ensuring they're addressed through appropriate deliberative process with genuine human attention</strong> rather than AI imposing resolution through training data bias or efficiency metrics.
|
||||
</p>
|
||||
|
||||
<div class="text-sm text-gray-600 border-t border-gray-200 pt-4 mt-4">
|
||||
|
|
@ -298,13 +352,17 @@
|
|||
<h2 class="text-2xl font-bold text-gray-900 mb-6" data-i18n="sections.architecture.heading">Six-Component Architecture</h2>
|
||||
|
||||
<div class="border-l-4 border border-gray-200 rounded-lg border-l-service-validator">
|
||||
<div class="accordion-button bg-white p-5 flex justify-between items-center hover:bg-purple-50 transition-colors duration-200" data-accordion="architecture">
|
||||
<button class="accordion-button bg-white p-5 flex justify-between items-center hover:bg-purple-50 transition-colors duration-200 w-full text-left"
|
||||
data-accordion="architecture"
|
||||
aria-expanded="false"
|
||||
aria-controls="architecture-content"
|
||||
id="architecture-button">
|
||||
<h3 class="font-semibold text-gray-900 group-hover:text-[#8b5cf6] transition-colors" data-i18n="sections.architecture.services_title">Framework Services & Functions</h3>
|
||||
<svg id="architecture-icon" class="accordion-icon w-5 h-5 text-purple-600 transition-transform duration-300" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<svg id="architecture-icon" class="accordion-icon w-5 h-5 text-purple-600 transition-transform duration-300" aria-hidden="true" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/>
|
||||
</svg>
|
||||
</div>
|
||||
<div id="architecture-content" class="accordion-content">
|
||||
</button>
|
||||
<div id="architecture-content" class="accordion-content" role="region" aria-labelledby="architecture-button">
|
||||
<div class="p-5 border-t border-gray-200 space-y-4 text-sm">
|
||||
|
||||
<div class="border-l-2 border-amber-500 pl-4">
|
||||
|
|
@ -440,13 +498,17 @@
|
|||
<h2 class="text-2xl font-bold text-gray-900 mb-6" data-i18n="sections.limitations.heading">Limitations & Future Research Directions</h2>
|
||||
|
||||
<div class="border-l-4 border border-gray-200 rounded-lg border-l-service-validator">
|
||||
<div class="accordion-button bg-white p-5 flex justify-between items-center hover:bg-purple-50 transition-colors duration-200" data-accordion="limitations">
|
||||
<button class="accordion-button bg-white p-5 flex justify-between items-center hover:bg-purple-50 transition-colors duration-200 w-full text-left"
|
||||
data-accordion="limitations"
|
||||
aria-expanded="false"
|
||||
aria-controls="limitations-content"
|
||||
id="limitations-button">
|
||||
<h3 class="font-semibold text-gray-900 group-hover:text-[#8b5cf6] transition-colors" data-i18n="sections.limitations.title">Known Limitations & Research Gaps</h3>
|
||||
<svg id="limitations-icon" class="accordion-icon w-5 h-5 text-purple-600 transition-transform duration-300" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<svg id="limitations-icon" class="accordion-icon w-5 h-5 text-purple-600 transition-transform duration-300" aria-hidden="true" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/>
|
||||
</svg>
|
||||
</div>
|
||||
<div id="limitations-content" class="accordion-content">
|
||||
</button>
|
||||
<div id="limitations-content" class="accordion-content" role="region" aria-labelledby="limitations-button">
|
||||
<div class="p-5 border-t border-gray-200 space-y-4 text-sm text-gray-700">
|
||||
|
||||
<div>
|
||||
|
|
@ -490,6 +552,46 @@
|
|||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Bibliography -->
|
||||
<section class="mb-16 border-t border-gray-200 pt-12">
|
||||
<h2 class="text-2xl font-bold text-gray-900 mb-6">References & Bibliography</h2>
|
||||
|
||||
<div class="prose prose-sm max-w-none text-gray-700 space-y-3">
|
||||
<div class="bg-amber-50 border border-amber-200 rounded p-4 mb-6 text-sm text-amber-900">
|
||||
<strong>Theoretical Priority:</strong> Tractatus emerged from concerns about maintaining human values persistence in AI-augmented organizations. Moral pluralism and deliberative process form the CORE theoretical foundation. Organizational theory provides supporting context for temporal decision authority and structural implementation.
|
||||
</div>
|
||||
|
||||
<h3 class="text-lg font-semibold text-gray-900 mt-6 mb-3">Moral Pluralism & Values Philosophy (Primary Foundation)</h3>
|
||||
<ul class="list-none space-y-2 text-sm">
|
||||
<li class="pl-6 -indent-6">Berlin, Isaiah (1969). <em>Four Essays on Liberty</em>. Oxford: Oxford University Press. [Value pluralism, incommensurability of legitimate values]</li>
|
||||
<li class="pl-6 -indent-6">Weil, Simone (1949/2002). <em>The Need for Roots: Prelude to a Declaration of Duties Towards Mankind</em> (A. Wills, Trans.). London: Routledge. [Human needs, obligations, rootedness in moral community]</li>
|
||||
<li class="pl-6 -indent-6">Weil, Simone (1947/2002). <em>Gravity and Grace</em> (E. Crawford & M. von der Ruhr, Trans.). London: Routledge. [Attention, moral perception, necessity vs. grace]</li>
|
||||
<li class="pl-6 -indent-6">Williams, Bernard (1981). <em>Moral Luck: Philosophical Papers 1973-1980</em>. Cambridge: Cambridge University Press. [Moral remainder, conflicts without resolution]</li>
|
||||
<li class="pl-6 -indent-6">Nussbaum, Martha C. (2000). <em>Women and Human Development: The Capabilities Approach</em>. Cambridge: Cambridge University Press. [Human capabilities, plural values in development]</li>
|
||||
</ul>
|
||||
|
||||
<h3 class="text-lg font-semibold text-gray-900 mt-6 mb-3">Organisational Theory (Supporting Context)</h3>
|
||||
<ul class="list-none space-y-2 text-sm">
|
||||
<li class="pl-6 -indent-6">Bluedorn, A. C., & Denhardt, R. B. (1988). Time and organizations. <em>Journal of Management, 14</em>(2), 299-320. [Temporal decision horizons]</li>
|
||||
<li class="pl-6 -indent-6">Crossan, M. M., Lane, H. W., & White, R. E. (1999). An organizational learning framework: From intuition to institution. <em>Academy of Management Review, 24</em>(3), 522-537. [Knowledge coordination]</li>
|
||||
<li class="pl-6 -indent-6">Hamel, Gary (2007). <em>The Future of Management</em>. Boston: Harvard Business School Press. [Post-hierarchical authority]</li>
|
||||
<li class="pl-6 -indent-6">Hannan, M. T., & Freeman, J. (1984). Structural inertia and organizational change. <em>American Sociological Review, 49</em>(2), 149-164. [Architectural resistance to drift]</li>
|
||||
<li class="pl-6 -indent-6">Laloux, Frederic (2014). <em>Reinventing Organizations: A Guide to Creating Organizations Inspired by the Next Stage of Human Consciousness</em>. Brussels: Nelson Parker. [Distributed decision-making]</li>
|
||||
</ul>
|
||||
|
||||
<h3 class="text-lg font-semibold text-gray-900 mt-6 mb-3">AI Governance & Technical Context</h3>
|
||||
<ul class="list-none space-y-2 text-sm">
|
||||
<li class="pl-6 -indent-6">Anthropic (2024). <em>Claude Code: Technical Documentation</em>. Available at: https://docs.anthropic.com/claude-code</li>
|
||||
</ul>
|
||||
|
||||
<div class="bg-gray-50 border border-gray-200 rounded p-4 mt-6 text-xs text-gray-600">
|
||||
<strong>Note on Intellectual Lineage:</strong> The framework's central concern—human values persistence in AI-augmented organizational contexts—derives from moral philosophy rather than management science. The PluralisticDeliberationOrchestrator represents the primary research focus, embodying Weil's concept of attention to plural human needs and Berlin's recognition of incommensurable values.
|
||||
|
||||
<strong>Berlin and Weil will be integral to further development</strong> of the deliberation component—their work provides the philosophical foundation for understanding how to preserve human agency over values decisions as AI capabilities accelerate. Traditional organizational theory (Weber, Taylor) addresses authority through hierarchy; post-AI organizational contexts require authority through appropriate deliberative process across stakeholder perspectives. Framework development documentation (incident reports, session logs) maintained in project repository but not publicly released pending peer review.
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Additional Resources -->
|
||||
<section class="border-t border-gray-200 pt-12">
|
||||
<h2 class="text-xl font-bold text-gray-900 mb-4" data-i18n="footer.additional_resources">Additional Resources</h2>
|
||||
|
|
@ -508,12 +610,8 @@
|
|||
</div>
|
||||
|
||||
<!-- Footer -->
|
||||
<!-- Version Management & PWA -->
|
||||
<script src="/js/version-manager.js"></script>
|
||||
<script src="/js/researcher-page.js"></script>
|
||||
|
||||
<!-- Internationalization -->
|
||||
<script src="/js/i18n-simple.js?v=1760818106"></script>
|
||||
<!-- Internationalization (must load first for footer translations) -->
|
||||
<script src="/js/i18n-simple.js?v=1761130172"></script>
|
||||
<script src="/js/components/language-selector.js?v=1760818106"></script>
|
||||
|
||||
<!-- Scroll Animations (Phase 3) -->
|
||||
|
|
@ -521,8 +619,12 @@
|
|||
<!-- Page Transitions (Phase 3) -->
|
||||
<script src="/js/page-transitions.js"></script>
|
||||
|
||||
<!-- Version Management & PWA -->
|
||||
<script src="/js/version-manager.js"></script>
|
||||
<script src="/js/researcher-page.js?v=1761127681"></script>
|
||||
|
||||
<!-- Footer Component -->
|
||||
<script src="/js/components/footer.js"></script>
|
||||
<script src="/js/components/footer.js?v=1761129862"></script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
13
public/version.json
Normal file
13
public/version.json
Normal file
|
|
@ -0,0 +1,13 @@
|
|||
{
|
||||
"version": "1.3.0",
|
||||
"buildDate": "2025-10-22T14:00:00Z",
|
||||
"changelog": [
|
||||
"FIXED: Footer i18n - Implemented deep merge instead of shallow merge",
|
||||
"Root cause: Shallow merge overwrote footer translations from common.json",
|
||||
"Solution: Recursive deepMerge() preserves nested objects during translation merge",
|
||||
"Added diagnostic logging: footer.about_heading value confirmed in console",
|
||||
"Researcher page: Categorical imperative, Berlin/Weil, WCAG compliance"
|
||||
],
|
||||
"forceUpdate": true,
|
||||
"minVersion": "1.1.5"
|
||||
}
|
||||
Loading…
Add table
Reference in a new issue