Add Trust & Transparency Layer with Motion/Navigation Enhancements

[Copilot]

Adds transparency affordances to communicate security status, data provenance, ethical principles, and system risks. Implements comprehensive accessibility including full reduce-motion support and keyboard navigation.

Changes

Trust HUD

• Header ribbon displaying governance lock, data residency, encryption standards, uptime, last audit
• Click-through modals with source attribution and timestamps
• Real-time updates with change animations (respects prefers-reduced-motion)
• Minimizable with localStorage persistence

Data Provenance

• Per-section pills indicating local vs remote data sources
• "Show the math" tooltips on metrics revealing: source, refresh interval, calculation method, scope
• Enhanced notifications with source, reason, severity, MCP lineage indicators
• Animated flow indicators on remote data (disabled with reduce-motion)

Ethics Drawer

• Side panel with 6 guiding principles (least privilege, minimal data, transparency, consent, accessibility, bias disclosure)
• Inline ethics notes on retention controls, analytics toggles
• Accessible via Alt+E, ESC to close, proper focus management

Risk & Safety

• Auto-detection of destructive actions (delete, reset, clear, disable, export)
• Risk badges (high/medium/low) with visual indicators
• Interstitial modals for medium/high risk actions showing risk score, impact, cancellation
• Keyboard-first with default focus on Cancel

Settings Panel

Trust & Safety section:

• Analytics toggle with local-only guarantee
• Data retention slider (7-90 days) with dynamic risk bands
• Outbound connections list (MCP Gateway, External APIs)
• Sync status indicator (Saved/Saving/Error)

Appearance section:

• Theme swatches with live preview
• Accent color picker (4 gradients)
• Reduce motion toggle (also auto-detects system preference)

Keyboard shortcuts:

• Complete list with visual kbd elements
• Safe defaults reset

Mini-Map Navigation

• Fixed quick-jump panel with 7 sections (Dashboard, Verticals, Governance, Activity, Analytics, System Map, Settings)
• Alt+1-7 shortcuts, Ctrl+↑/↓ section navigation
• Active section tracking via IntersectionObserver
• Smooth scroll with highlight effect on destination

Implementation

Pure HTML/CSS/JS with no dependencies. Modular architecture:

// Reduce-motion detection at app level
const prefersReducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)');
if (prefersReducedMotion.matches) {
    document.body.classList.add('reduce-motion');
}

// Components respect the flag
addChangeGlow(element) {
    const prefersReducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
    if (prefersReducedMotion) {
        element.classList.add('changed-subtle');
    } else {
        element.classList.add('changed-glow');
    }
}

CSS cascade handles motion preferences:

body.reduce-motion * {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
}

/* Keep essential transitions */
body.reduce-motion button {
    transition: background-color 0.15s ease !important;
}

/* Replace pulses with gentle fades */
body.reduce-motion .pulse {
    animation: gentle-fade 3s ease-in-out infinite;
}

Accessibility

• Reduce Motion: Auto-detect + manual override, pulses/flows → gentle fades
• Keyboard: Alt+1-7, Alt+D/V/G/T/E, Ctrl+↑/↓, ESC, full Tab navigation with focus trapping
• Screen Readers: Semantic HTML, comprehensive ARIA labels, proper landmark roles
• Focus Management: Clear outlines, logical tab order, focus return on modal close

Screenshots

Trust HUD in header with data provenance pills:

Ethics drawer (Alt+E):

Trust HUD detail modal with source attribution:

Settings panel with Trust & Safety controls:

Files

Added:

• js/trust-hud.js, js/ethics-drawer.js, js/data-provenance.js, js/risk-safety.js, js/mini-map.js
• css/trust-hud.css, css/ethics-drawer.css, css/data-provenance.css, css/risk-safety.css, css/mini-map.css
• TRUST_TRANSPARENCY_FEATURES.md - Technical documentation

Modified:

• index.html - CSS/JS includes
• js/main.js - Reduce-motion detection
• css/animations.css - Enhanced motion preference support

Original prompt

Add Trust & Transparency Layer + Motion/Navi Enhancements

Goal

Make the Heady Admin UI more visual, always-in-motion (respecting reduce motion), and explicitly transparent about trust, security, ethics, and data foundations. Build on existing UI (settings, command palette, toasts, dashboards).

Scope

Apply changes across HeadySystems_v13/apps/heady_admin_ui/ (main dashboard and shared components). Focus on UI/UX layers; no backend changes.

Tasks

1) Trust HUD (header ribbon)

• Add a lightweight HUD in header showing: Governance Lock state, Data Residency, Encryption state, Uptime, Last Audit time.
• Animated pulse/glow on change; subdued when reduce-motion is enabled.
• Click/hover shows mini detail (source + timestamp).

2) Data Flow & Provenance affordances

• Add per-section “What leaves vs stays” pills with animated arrows; honor reduce-motion.
• Add “Show the math” hovers on key metrics/status cards: source, last refresh, calculation rule, scope (local vs remote).
• For notifications/toasts: include source, reason, severity, and a small lineage icon if data came via MCP.

3) Ethics/Principles drawer

• Add collapsible side drawer summarizing guiding principles (least privilege, minimal data, transparency-first, consent-forward, reduce-motion-respect, bias/limits disclosure).
• Link out to detailed docs if present.
• Add inline “Ethics note” chips on retention, analytics, auto-refresh controls explaining intent.

4) Risk & Safety interstitials

• For privileged/destructive actions, add a short interstitial: reason, risk score, confirm/cancel.
• Add “risk heat” overlay badge on such buttons (warn state) with tooltip.

5) Motion with accessibility

• Ensure reduce-motion setting fully disables pulses/flows and swaps to gentle fades.
• Keep purposeful motion: edge flows animate only on live traffic; badges shimmer only on change; command palette uses quick zoom-in; mini-map/quick-jump tray for main sections with keyboard hints.

6) Settings additions (extend PR #18)

• Add “Trust & Safety” section: analytics toggle, retention slider with risk band, outbound data list, audit trail link, sync status chip (Saved/Saving/Error) with tiny progress.
• Add accent/theme live preview swatches.
• Warn on shortcut conflicts; add “safe defaults”.

7) Navigation aids

• Add mini-map/quick-jump tray (Dashboard, Verticals, Governance, Activity, Analytics, System Map, Settings) with Alt+1..n hints.

Files (expected)

• Update: index.html, shared header/nav, toasts, status cards, settings UI/JS
• Add (if needed): small CSS/JS modules for HUD, drawer, risk modal, mini-map

Requirements

• Pure HTML/CSS/JS; no external libs.
• Respect existing theme/animation tokens and reduce-motion.
• Responsive and keyboard accessible; ARIA labels for new controls.
• Keep animations performant (CSS or rAF).

Deliverables

• Updated UI reflecting trust/safety HUD, data flow affordances, ethics drawer, risk interstitials, settings Trust & Safety, mini-map, and motion tuned for accessibility.
• Short usage notes in PR description and inline comments where needed.

This pull request was created from Copilot chat.

---

💡 You can make Copilot smarter by setting up custom instructions, customizing its development environment and configuring Model Context Protocol (MCP) servers. Learn more Copilot coding agent tips in the docs.