Add mobile-specific navigation pattern to resolve catch-22 UX issue where
users couldn't see documents without scrolling but didn't know to scroll.
Changes:
- Add mobile CSS to toggle between sidebar and document viewer
- Add back button to return to document list on mobile
- Add document-active body class to manage navigation state
- Update GitHub repository links to correct URL
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
- Add English, German, and French translations for Koha donation system
- Add manage_subscription translations for Customer Portal
- Add transparency page translations
- Support for multi-language donation experience
Prepared for future Māori translation (mi/) outreach in Dec 2025
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
- Add createPortalSession endpoint to koha.controller.js
- Add POST /api/koha/portal route with rate limiting
- Add 'Manage Your Subscription' section to koha.html
- Implement handleManageSubscription() in koha-donation.js
- Add Koha link to navigation menu in navbar.js
- Allow donors to self-manage subscriptions via Stripe portal
- Portal supports: payment method updates, cancellation, invoice history
Ref: Customer Portal setup docs in docs/STRIPE_CUSTOMER_PORTAL_NEXT_STEPS.md
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
UX Simplification:
- Remove dropdown selector completely (was causing rendering conflicts)
- Use icon-only buttons on ALL devices (mobile and desktop)
- Show all 4 languages: 🇬🇧 English, 🇩🇪 Deutsch, 🇫🇷 Français, 🇳🇿 Te Reo Māori
- Māori button shows as disabled with "Planned" tooltip
Technical Changes:
- Eliminate all responsive breakpoint logic (md:hidden, md:block, md:flex)
- Single unified rendering path for all screen sizes
- Removed desktop dropdown and associated event handlers
- Simplified to one flex container with 4 icon buttons
- Active state management works across all buttons including disabled
Fixes:
- Resolves persistent issue where both dropdown and icons appeared on desktop
- Eliminates Tailwind responsive class conflicts
- Consistent UX across all devices
- Better touch targets (44x44px) on all platforms
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
Issue Confirmed by User:
- After F12 cache clear, initial load works
- BUT on desktop, both dropdown AND icons are rendering together
- Expected: Desktop shows ONLY dropdown, Mobile shows ONLY icons
Previous Attempt Failed:
- Desktop: `hidden md:flex md:relative`
- Mobile: `flex gap-1 md:hidden`
- Problem: `flex` as base class on mobile container created specificity conflict
- Both containers showed on desktop despite `md:hidden`
Root Cause:
- Mixing layout classes (flex) with visibility classes (hidden) on same element
- Tailwind applies base styles first, then responsive modifiers
- `flex` set display:flex, then `md:hidden` tried to override
- CSS specificity and cascade caused unpredictable behavior
Solution - Separate Display Control from Layout:
Desktop Container:
```html
<div class="hidden md:block"> <!-- Display control -->
<div class="relative"> <!-- Layout/positioning -->
<select>...</select>
</div>
</div>
```
Mobile Container:
```html
<div class="block md:hidden"> <!-- Display control -->
<div class="flex gap-1"> <!-- Layout -->
...buttons...
</div>
</div>
```
Why This Works:
1. Parent divs ONLY control visibility (hidden/block/md:hidden/md:block)
2. Child divs ONLY control layout (relative/flex/gap)
3. No conflicting display properties on same element
4. Clean separation of concerns
5. Predictable Tailwind cascade behavior
Behavior:
- Mobile (<768px):
- Desktop container: `hidden` (not visible) ✓
- Mobile container: `block` (visible) ✓
- Desktop (≥768px):
- Desktop container: `md:block` (visible) ✓
- Mobile container: `md:hidden` (not visible) ✓
Technical Notes:
- `hidden` = display: none !important (base)
- `md:block` = display: block at ≥768px
- `md:hidden` = display: none !important at ≥768px
- No flex/relative on visibility-controlling elements
- Nested structure ensures proper cascade
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
Critical Issue:
- Desktop showed NOTHING on initial load after cache clear
- Then both dropdown AND icons appeared together
- Expected: Desktop = dropdown ONLY, Mobile = icons ONLY
Root Cause Analysis:
1. Wrapper div `language-selector` had no display control
2. Nested structure with `hidden md:block` on desktop container
3. Nested structure with `md:hidden` wrapping flex container on mobile
4. Tailwind `hidden` class uses `display: none !important`
5. Complex nesting caused CSS specificity and timing issues
6. Both containers fought for visibility control
Previous Structure (BROKEN):
```html
<div class="language-selector">
<!-- Desktop -->
<div class="hidden md:block md:relative">
<select>...</select>
</div>
<!-- Mobile -->
<div class="md:hidden">
<div class="flex gap-1">
...buttons...
</div>
</div>
</div>
```
New Structure (FIXED):
```html
<!-- Desktop - Direct sibling -->
<div class="hidden md:flex md:relative">
<select>...</select>
</div>
<!-- Mobile - Direct sibling -->
<div class="flex gap-1 md:hidden">
...buttons...
</div>
```
Key Improvements:
1. Removed wrapper div - eliminated ambiguity
2. Made both containers direct siblings in parent
3. Desktop: `hidden md:flex md:relative`
- hidden on mobile (display: none)
- flex on desktop (display: flex at md+)
- relative positioning only on desktop
4. Mobile: `flex gap-1 md:hidden`
- flex with gap on mobile (display: flex)
- hidden on desktop (display: none at md+)
5. Removed extra nested div wrappers
6. Each container explicitly controls own visibility AND layout
Technical Details:
- Tailwind mobile-first: base = mobile, md: = desktop (≥768px)
- `hidden` = display: none !important (all sizes)
- `md:flex` = display: flex at ≥768px
- `md:hidden` = display: none at ≥768px
- Using `flex` instead of `block` for better layout control
- Siblings don't interfere with each other's display logic
Result:
- Desktop (≥768px): Dropdown visible (flex), Icons hidden ✓
- Mobile (<768px): Icons visible (flex), Dropdown hidden ✓
- Clean, predictable behavior with no timing issues
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
Issue:
- After cache clear, desktop was showing BOTH dropdown AND icon buttons
- Mobile was correctly showing only icon buttons
- Expected: Desktop = dropdown only, Mobile = icons only
Root Cause:
- Tailwind responsive classes were conflicting
- `flex md:hidden gap-1` applied flex at all times, then hid at md+
- `relative` was unconditionally applied to desktop dropdown container
- Separation of concerns was unclear between visibility and layout
Fix Applied:
1. Desktop dropdown container:
- Before: `class="hidden md:block relative"`
- After: `class="hidden md:block md:relative"`
- Now `relative` only applies at md+ breakpoint
2. Mobile icons container:
- Before: `class="flex md:hidden gap-1"` (single div)
- After: `class="md:hidden"` wrapping `class="flex gap-1"` (nested divs)
- Separated visibility control from layout control
- Parent div: controls visibility (hidden at md+)
- Child div: controls layout (flex with gap)
Technical Explanation:
- Tailwind mobile-first: Base styles apply to all, md: applies at ≥768px
- `hidden md:block` = hidden by default, block at md+
- `md:hidden` = visible by default, hidden at md+
- Nesting clarifies intent and prevents class conflicts
Result:
- Desktop (≥768px): Dropdown visible, icons hidden ✓
- Mobile (<768px): Icons visible, dropdown hidden ✓
Deployment:
- language-selector.js deployed to production
- Cache-busting version already in place (?v=0.1.0.1760643941)
- Users should see correct behavior after hard refresh
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
Language Selector Issues Resolved:
- Add cache-busting version (v0.1.0.1760643941) to i18n-simple.js
- Add cache-busting version to language-selector.js on all pages
- Previously: Scripts cached without versions, causing stale JS to load
- Now: Browser forced to reload latest language selector code
Pages Updated with Cache-Busting:
- index.html: Added ?v= to both i18n scripts
- about.html: Added ?v= to both i18n scripts
- researcher.html: Added ?v= to both i18n scripts
- leader.html: Added ?v= to both i18n scripts
- implementer.html: Added ?v= to both i18n scripts
- faq.html: Added ?v= to both i18n scripts
- docs.html: Added missing i18n scripts + cache-busting
Root Cause Analysis:
- navbar.js had cache-busting (?v=0.1.0.1760254958072)
- i18n scripts had NO cache-busting
- Browsers served cached old versions of language-selector.js
- Language selector container created by navbar, but old selector code failed
Technical Details:
- Desktop language selector: Already correctly shows dropdown only (hidden md:block)
- Mobile language selector: Already correctly shows icons only (flex md:hidden)
- No code changes needed - cache was the issue
- Script loading order: navbar.js → i18n-simple.js → language-selector.js
Deployment:
- All 7 HTML pages deployed to production
- Language selector now appears on all pages including index.html
- Cache invalidation forces browser to fetch new JavaScript
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
Critical Bug Fix:
- about.html had 55 data-i18n attributes but NO i18n scripts loaded
- Language selector appeared but clicking did nothing (confusing UX)
Added Before </body>:
- <script src="/js/i18n-simple.js"></script>
- <script src="/js/components/language-selector.js"></script>
Impact:
✅ about.html now fully functional in 3 languages (en/de/fr)
✅ All 55 translation keys now active
✅ Language switching works correctly
Testing:
- Verified scripts load after footer content
- Confirmed translation files accessible via HTTP
- Language selector now triggers content updates
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
The navbar had two language selector containers:
1. Main navbar: #language-selector-container (responsive design)
2. Mobile menu: #mobile-menu-language-selector (unused, empty)
Since the main navbar language selector already has responsive behavior:
- Desktop: Shows dropdown with text
- Mobile: Shows icon-only buttons
The mobile menu duplicate container is unnecessary and caused confusion.
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
Mobile UX Improvements:
- Replace dropdown with icon-only buttons on mobile (<768px)
- Show flag icons (🇬🇧🇩🇪🇫🇷) with 44x44px touch targets
- Preserve dropdown with text on desktop (≥768px)
- Add visual feedback for active language selection
- Responsive design using Tailwind md: breakpoint
Pages Updated:
- Add i18n support to researcher.html
- Add i18n support to leader.html
- Add i18n support to implementer.html
- Add i18n support to about.html
- Add i18n support to faq.html
Technical Changes:
- Dual rendering: desktop dropdown + mobile icon buttons
- Event handlers for both desktop select and mobile buttons
- Active state management with visual indicators
- Accessibility: aria-labels and tooltips on icons
- Auto-refresh selector on language change
Mobile Optimization:
- Reduced navbar crowding on small screens
- Better touch targets (min 44x44px)
- Clear visual feedback for language selection
- No text truncation on mobile
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
Mobile UX Improvements:
- Replace dropdown with icon-only flags on mobile (< 768px)
- Add 44x44px touch targets for better mobile interaction
- Add language selector to mobile menu drawer
- Desktop keeps full dropdown with language names (≥ 768px)
Language Selector Features:
- Mobile navbar: Icon-only buttons (🇬🇧🇩🇪🇫🇷)
- Desktop navbar: Dropdown with full text
- Mobile drawer: Full language list with checkmarks
- Active state: Blue ring around selected language
- Auto-close drawer after language selection
Accessibility:
- ARIA labels on all buttons
- aria-pressed state for current language
- Minimum 44x44px touch targets (WCAG AA)
- Keyboard navigation support maintained
- Screen reader support with role="group"
Technical Changes:
- language-selector.js: Rewritten with responsive versions
- navbar.js: Added mobile-menu-language-selector container
- i18n-simple.js: Added languageChanged event dispatch
UX Benefits:
- Space savings: ~87px saved in mobile navbar
- No crowding between language selector and hamburger menu
- Flag emojis are universally recognizable
- Touch-friendly buttons meet iOS/Android standards
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
- Update development context text to clarify progressive stages
- Add prominent CTA buttons for Theoretical Foundations PDFs
- Add navigation button to /architecture.html in Six-Component section
- Add Appendix B: Glossary of Terms to Research Documentation
- Improve button styling for better visibility and accessibility
- Verify implementer.html and leader.html navigation (all working)
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
Changes:
- Add user feedback when PWA installation unavailable
- Remove all inline event handlers (onclick=) for CSP compliance
- Show helpful messages: "Already Installed" vs "Browser Not Supported"
- Auto-dismiss unavailable message after 8 seconds
- All buttons now use addEventListener (CSP compliant)
Fixes: Non-responsive install button when prompt unavailable
Security: Full CSP compliance - no inline event handlers
Changed copyright from "Tractatus AI Safety Framework" (not a legal entity)
to "John G Stroh" (actual copyright holder) for legal clarity.
Files updated:
- 13 HTML files (all website pages)
- Consistent with LICENSE file (Copyright 2025 John G Stroh)
- Deployed to production
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
Rewrote Copilot governance answer to match the restrained, analytical tone of the leader page, removing overconfident American-style assertions.
Key changes:
- Opening: "creates significant liability exposure" → "raises structural questions about governance"
- Removed dramatic scenarios: "Post-incident: 'How did this get approved?' No audit trail. No answer."
- Removed unvalidated cost claims (£500k-£2M settlements, specific ROI figures)
- Added development context: "proof-of-concept validated in a single project context"
- Changed assertions to observations: "will cause" → "may create", "is" → "raises questions about"
- Removed sales pitch language: "Case closed", "catastrophic liability exposure"
- Added honest limitations: "If your rules are inadequate...Tractatus enforces those inadequacies architecturally"
- Changed CTA: Removed "pro bono offer" for removed "show you exactly where your exposure is"
- Used cautious framing: "Whether this constitutes 'compliance-grade' evidence depends on your regulatory context"
Tone now matches leader page:
- Measured, intellectual engagement
- Evidence-based claims with context
- Acknowledges uncertainty
- Focuses on structural governance questions
- No prescriptive assertions
Version: 1.1.0 → 1.1.1
User feedback: "I like your overconfident American attitude. It has its place on this planet, but not here."
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
**Modal Scrolling Fix** (addresses user issue with 8-question visibility limit):
- Restructured modal layout to use dedicated scrollable wrapper
- Changed overflow-y-auto to overflow-y-scroll for always-visible scrollbar
- Separated scrollable container from content padding wrapper
- Modal now properly scrolls through all 28+ FAQ items
**PWA Meta Tag Update**:
- Added standard mobile-web-app-capable meta tag
- Replaced deprecated apple-mobile-web-app-capable (kept for compatibility)
- Resolves browser deprecation warning
Technical Details:
- New structure: flex-1 scrollable wrapper > padded content div
- Ensures min-h-0 works correctly with flexbox for scroll overflow
- Location: public/faq.html:505-570
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
## Bug Fixes
- Fixed inline FAQ markdown rendering with error handling
- Added try-catch around marked.parse() for inline FAQs
- Added fallback to plain text with line breaks on parse failure
- Enhanced logging for FAQ rendering diagnostics
## New Instruction (inst_040)
Created rule requiring complete coverage when user says "all":
- "update all pages" means EVERY page, not representative subset
- Must identify complete scope before starting
- Verify ALL items processed before marking complete
- Ask user to prioritize if scope >20 items
## Rationale
User reported inline FAQs showing raw markdown instead of formatted HTML.
Root cause: createInlineFAQItemHTML lacked error handling that was added
to createFAQItemHTML in previous version. Both functions now have consistent
error handling with logging.
User directive: When saying "all", Claude must not choose subset.
## Version
- Bumped to 1.0.5
- Force update enabled
- Synced inst_040 to production
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
## FAQ Modal Fixes
- Fix modal scrolling: changed max-h-[85vh] to h-[85vh] with min-h-0
- Added flex-shrink-0 to modal header for proper flex behavior
- Users can now scroll through all 30 FAQ questions (was stuck at 8)
- Enhanced markdown parsing with error handling and fallback
## UI Improvements
- Removed Quick Actions section from FAQ page per user request
- Standardized footer across 7 user-facing pages
- Added Newsletter link under Community section in all footers
## Pages Updated
- faq.html, researcher.html, implementer.html, leader.html
- about.html, media-inquiry.html, case-submission.html
## Version
- Bumped to 1.0.4 with force update enabled
- Service worker cache updated
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
- Regenerated all PDF downloads with updated timestamps
- Updated markdown metadata across documentation
- Fixed ContextPressureMonitor test for conversation length tracking
- Documentation consistency improvements
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
**FAQ Enhancements:**
- Added 6 new Leader-focused questions (TCO, board justification, liability, metrics, compliance)
- Reordered all 28 questions to prioritize Leaders (IDs 1-18)
- Added sorting by ID to ensure consistent order
- Improved question categorization and keywords
**UI Improvements:**
- Enhanced search and filter functionality
- Improved markdown rendering in FAQ answers
- Better accessibility and keyboard navigation
Leaders now see business-critical questions first, followed by
technical implementation and research questions.
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
Implements cache busting and progressive web app features:
**Version Management:**
- version.json manifest with changelog tracking
- Service worker with automatic update checking (hourly)
- Update notification UI with changelog display
- Configurable forced updates after timeout
- Cache control headers for optimal performance
**PWA Features:**
- manifest.json with app shortcuts
- Apple touch icon support
- "Add to Home Screen" functionality
- Offline support via service worker
**Cache Strategy:**
- HTML: 5-minute cache with revalidation
- CSS/JS: 1-year immutable cache
- Images: 1-year immutable cache
- version.json/service-worker.js: no-cache
**Integration:**
- All main pages updated with PWA meta tags
- Version manager loaded on all user-facing pages
- Production deployment successful
Users who previously visited the site will now automatically receive
update notifications when version changes.
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
Created new /architecture.html page with generic architecture diagram that emphasizes Tractatus works with any agent runtime (not just Claude Code). Revised tone to reflect early-stage research status, including limitations section and call for industry collaboration, per user feedback on avoiding overconfident claims.
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
- Fixed GitHub repository URLs (anthropics org, not AgenticGovernance)
- Updated navigation links to use specific document URLs instead of generic /docs.html
- Added instruction persistence system explanation to introduction
- Regenerated PDFs with corrections
- Remove inline styles from category rendering (CSP violation)
- Apply collapsed state via JavaScript after DOM insertion
- Update cache version to v=0.1.0.1760254264664 across all HTML files
- Categories now properly collapsed on page load (Research, Advanced, Case Studies, Business, Archives)
- Add 'Advanced Topics' category for value pluralism & deep dives
- Rename Value Pluralism FAQ to 'Understanding Value Pluralism'
- Restore research documents from archives (Research Foundations, Organizational Theory, etc.)
- Set most categories to collapsed by default for cleaner UX
- Restore Executive Brief to Business & Leadership
- Archive PoC session summaries
- Create comprehensive migration script for recategorization
Two fixes for production deployment:
1. FAQ Answer Truncation Fix:
- Changed max-height from 2000px to none in faq.html
- Allows answers to expand to full height without cutting off
- Fixes Q18-Q22 (value pluralism) answers being truncated
2. Cache Busting:
- Updated version from v=1.0.3 to v=1.0.4
- Forces browser cache refresh for JavaScript and CSS
- Ensures value pluralism documents visible in docs.html sidebar
- Updated in both faq.html and docs.html
User feedback: "Some of the Answers in the new Q&As are cutting off
the bottom end of the Answer" and "I cannot find the three new files
in the left sidebar at docs.html on production"
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
- Update integrated implementation roadmap with Phase 2 completions
- Update blog curation admin interface
- Update implementer page with value pluralism content
Reflects October 12 production status
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
- Update glossary (v1.1) with value pluralism terminology
- Update case studies with value pluralism examples
- Update core concepts to include foundational pluralism
- Update introduction with 6th core service
- Update technical architecture and comparison matrix
- Update implementation guide with value pluralism sections
All markdown reflects 6-service production architecture
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
- Update docs.html with MongoDB-integrated documents
- Add value pluralism documents to sidebar categories
- Update docs-app.js for proper document retrieval
- Sync navbar changes across UI pages
Documents now searchable and properly categorized in docs viewer
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
- Q18: What is value pluralism and why Tractatus uses it
- Q19: How Tractatus handles moral disagreement without hierarchy
- Q20: What makes value pluralism different from relativism
- Q21: How urgent decisions work with value pluralism
- Q22: Can organizations use this without adopting specific values
Added 5 comprehensive questions with researcher/leader audience tags
FAQ now covers full value pluralism approach
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
- Created openapi.yaml (1,621 lines, 46KB)
- Documents all API endpoints with full schemas
- Authentication, Documents, Governance Services, Audit, Admin
- Added OpenAPI download link to api-reference.html
- Deployed to production
Task 12 (API Documentation) - OpenAPI spec complete
Changed implementer.html 'Deployment Quickstart Kit' section to 'Deployment Architecture Guide':
REMOVED:
- Download link for tractatus-quickstart.tar.gz (contained production configs)
- docker-compose.yml, .env.example, sample governance rules
- verify-deployment.sh script
- Installation and troubleshooting guides with production details
ADDED:
- Link to GitHub deployment-guide/ (sanitized conceptual documentation)
- Conceptual architecture and patterns description
- Security best practices overview
- Contact info for production implementation support (john.stroh.nz@pm.me)
Rationale: Production deployment package on public website provided attack surface. Sanitized guide maintains educational value without exposing implementation details.
Deployed to: https://agenticgovernance.digital/implementer.html
