feat(ui): UI overhaul — consolidates #305-#309 into single PR#620
Open
natiixnt wants to merge 5 commits into
Open
feat(ui): UI overhaul — consolidates #305-#309 into single PR#620natiixnt wants to merge 5 commits into
natiixnt wants to merge 5 commits into
Conversation
…oggle, and WCAG accessibility - Keyboard shortcuts overlay (press ? for help, 1-8 for tabs, T for theme, P for perf) - Real-time performance monitor with FPS, memory, latency sparklines (draggable) - Enhanced toast notification system with stacking, auto-dismiss, progress bars - Dark/light theme toggle with localStorage persistence and system preference detection - WCAG accessibility: skip-to-content link, ARIA roles/attributes on tabs and panels, arrow key navigation in tab bar, focus-visible outlines - ESLint config for UI directory with security and quality rules
…mode, connection status - Command palette (Ctrl+K / Cmd+K) with fuzzy search across tabs and actions - Activity log panel (L key) with real-time console interception, filters, resizable - Data export utility (E key) for sensor data as JSON/CSV with dialog - Fullscreen mode (F key / F11) for visualization tabs with exit button - Connection status widget in header showing WebSocket state and reconnect
- Mobile hamburger navigation: slide-out drawer replacing tab bar on <768px, swipe-to-close, animated hamburger icon, auto-sync with tab manager - PWA manifest + service worker: installable dashboard, offline shell caching (cache-first for static, network-first for API), auto-cleanup of old caches - 40 unit tests for ToastManager, ThemeToggle, KeyboardShortcuts, PerfMonitor, TabManager - browser-based test runner at ui/tests/unit-tests.html - PWA meta tags: theme-color, apple-mobile-web-app-capable, manifest link - Icon generator page for creating PWA icons (ui/icons/generate.html)
…ion center - Hash router: tabs are bookmarkable/shareable via URL (#demo, #sensing, etc.), syncs with TabManager, supports browser back/forward navigation - Onboarding tour: interactive 6-step first-run walkthrough with spotlight highlighting, step indicators, skip/back/next controls, localStorage persistence - Idle detection: pauses health polling and reduces CSS animations after 3 min of inactivity, resumes on user interaction, integrates with Page Visibility API - Notification center: bell icon in header with unread badge, event history panel with mark-read/clear, persists across page views via sessionStorage
…motion, uptime clock - i18n: English/Polish translations with auto-detection, language selector in header, data-i18n attributes on dashboard elements, localStorage persistence - Screenshot tool (S key): captures active tab to clipboard or downloads PNG, flash effect, canvas rendering with watermark, fallback for tainted canvases - Quick settings panel (gear icon): reduced motion toggle, high contrast mode, compact layout mode, health polling toggle, clear data, reset onboarding - Uptime clock: current time + session duration in header - prefers-reduced-motion: system-level and manual toggle, disables all animations and transitions for vestibular accessibility - High contrast mode: WCAG AAA compliant colors for both light and dark themes - Compact mode: condensed layout for dense information display
This was referenced May 18, 2026
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Consolidates the five stacked UI PRs (#305, #306, #307, #308, #309) into a single comprehensive PR, per discussion on #305 about merge strategy.
Why one PR
All five stacked PRs touched the same shared files (
ui/.eslintrc.json,ui/app.js,ui/components/TabManager.js,ui/index.html,ui/style.css) and were forked from oldermain, so they pairwise-conflicted. Squashing into one comprehensive PR with a single test plan is cleaner than rebasing the stack.The
.claude-flow/agents/*and.claude/agents/*changes flagged in #305 are NOT included here — onlyui/scope.What's included
Base UX layer (was #305)
?help overlay)Power-user tooling (was #306)
Mobile + PWA (was #307)
ui/tests/unit-tests.html)Navigation + ambient (was #308)
Localization + display options (was #309)
data-i18nattributesSkey)prefers-reduced-motionsupportTest plan
ui/index.htmlin Chromium-based browser, confirm app boots without console errors?opens keyboard shortcuts overlay; all listed bindings fire their actionsCtrl+Kopens command palette; fuzzy search hits all registered commandsdata-i18nstrings updateStriggers screenshot of active tab (clipboard or PNG download)ui/tests/unit-tests.htmlin browser → 40/40 passReplaces
Closing #305, #306, #307, #308, #309 in favor of this PR.