Plugins (#145)

Chaotic mega-merge into main. THINGS WILL PROBABLY BE BROKEN


* chore: Update soccer-scoreboard submodule to merged commit

- Update submodule reference to include manifest.json v2 registry format
- Version updated to 1.0.1

* refactor: Remove test_mode and logo_dir config reading from base SportsCore

- Remove test_mode initialization and usage
- Remove logo_dir reading from mode_config
- Use LogoDownloader defaults directly for logo directories

* chore: Update plugin submodules after removing global properties

- Update basketball-scoreboard submodule (removed global test_mode, live_priority, dynamic_duration, logo_dir)
- Update soccer-scoreboard submodule (removed global test_mode, live_priority, dynamic_duration, logo_dir)

* feat(calendar): Add credentials.json file upload via web interface

- Add API endpoint /api/v3/plugins/calendar/upload-credentials for file upload
- Validate JSON format and Google OAuth structure
- Save file to plugin directory with secure permissions (0o600)
- Backup existing credentials.json before overwriting
- Add file upload widget support for string fields in config forms
- Add frontend handler handleCredentialsUpload() for single file uploads
- Update .gitignore to allow calendar submodule
- Update calendar submodule reference

* fix(web): Improve spacing for nested configuration sections

- Add dynamic margin based on nesting depth (mb-6 for deeply nested sections)
- Increase padding in nested content areas (py-3 to py-4)
- Add extra spacing after nested sections to prevent overlap
- Enhance CSS spacing for nested sections (1.5rem for nested, 2rem for deeply nested)
- Add padding-bottom to expanded nested content to prevent cutoff
- Fixes issue where game_limits and other nested settings were hidden under next section header

* chore(plugins): Update sports scoreboard plugins with live update interval fix

- Updated hockey-scoreboard, football-scoreboard, basketball-scoreboard, and soccer-scoreboard submodules
- All plugins now fix the interval selection bug that caused live games to update every 5 minutes instead of 30 seconds
- Ensures all live games update at the configured live_update_interval (30s) for timely score updates

* fix: Initialize test_mode in SportsLive and fix config migration

- Add test_mode initialization in SportsLive.__init__() to prevent AttributeError
- Remove invalid new_secrets parameter from save_config_atomic() call in config migration
- Fixes errors: 'NBALiveManager' object has no attribute 'test_mode'
- Fixes errors: ConfigManager.save_config_atomic() got unexpected keyword argument 'new_secrets'

* chore: Update submodules with test_mode initialization fixes

- Update basketball-scoreboard submodule
- Update soccer-scoreboard submodule

* fix(plugins): Auto-stash local changes before plugin updates

- Automatically stash uncommitted changes before git pull during plugin updates
- Prevents update failures when plugins have local modifications
- Improves error messages for git update failures
- Matches behavior of main LEDMatrix update process

* fix(basketball-scoreboard): Update submodule with timeout fix

- Updated basketball-scoreboard plugin to fix update() timeout issue
- Plugin now uses fire-and-forget odds fetching for upcoming games
- Prevents 30-second timeout when processing many upcoming games

Also fixed permission issue on devpi:
- Changed /var/cache/ledmatrix/display_on_demand_state.json permissions
  from 600 to 660 to allow web service (devpi user) to read the file

* fix(cache): Ensure cache files use 660 permissions for group access

- Updated setup_cache.sh to set file permissions to 660 (not 775)
- Updated first_time_install.sh to properly set cache file permissions
- Modified DiskCache to set 660 permissions when creating cache files
- Ensures display_on_demand_state.json and other cache files are readable
  by web service (devpi user) which is in ledmatrix group

This fixes permission issues where cache files were created with 600
permissions, preventing the web service from reading them. Now files
are created with 660 (rw-rw----) allowing group read access.

* fix(soccer-scoreboard): Update submodule with manifest fix

- Updated soccer-scoreboard plugin submodule
- Added missing entry_point and class_name to manifest.json
- Fixes plugin loading error: 'No class_name in manifest'

Also fixed cache file permissions on devpi server:
- Changed display_on_demand_state.json from 600 to 660 permissions
- Allows web service (devpi user) to read cache files

* fix(display): Remove update_display() calls from clear() to prevent black flash

Previously, display_manager.clear() was calling update_display() twice,
which immediately showed a black screen on the hardware before new
content could be drawn. This caused visible black flashes when switching
between modes, especially when plugins switch from general modes (e.g.,
football_upcoming) to specific sub-modes (e.g., nfl_upcoming).

Now clear() only prepares the buffer without updating the hardware.
Callers can decide when to update the display, allowing smooth transitions
from clear → draw → update_display() without intermediate black flashes.

Places that intentionally show a cleared screen (error cases) already
explicitly call update_display() after clear(), so backward compatibility
is maintained.

* fix(scroll): Prevent wrap-around before cycle completion in dynamic duration

- Check scroll completion BEFORE allowing wrap-around
- Clamp scroll_position when complete to prevent visual loop
- Only wrap-around if cycle is not complete yet
- Fixes issue where stocks plugin showed first stock again at end
- Completion logged only once to avoid spam
- Ensures smooth transition to next mode without visual repeat

* fix(on-demand): Ensure on-demand buttons work and display service runs correctly

- Add early stub functions for on-demand modal to ensure availability when Alpine.js initializes
- Increase on-demand request cache max_age from 5min to 1hr to prevent premature expiration
- Fixes issue where on-demand buttons were not functional due to timing issues
- Ensures display service properly picks up on-demand requests when started

* test: Add comprehensive test coverage (30%+)

- Add 100+ new tests across core components
- Add tests for LayoutManager (27 tests)
- Add tests for PluginLoader (14 tests)
- Add tests for SchemaManager (20 tests)
- Add tests for MemoryCache and DiskCache (24 tests)
- Add tests for TextHelper (9 tests)
- Expand error handling tests (7 new tests)
- Improve coverage from 25.63% to 30.26%
- All 237 tests passing

Test files added:
- test/test_layout_manager.py
- test/test_plugin_loader.py
- test/test_schema_manager.py
- test/test_text_helper.py
- test/test_config_service.py
- test/test_display_controller.py
- test/test_display_manager.py
- test/test_error_handling.py
- test/test_font_manager.py
- test/test_plugin_system.py

Updated:
- pytest.ini: Enable coverage reporting with 30% threshold
- test/conftest.py: Enhanced fixtures for better test isolation
- test/test_cache_manager.py: Expanded cache component tests
- test/test_config_manager.py: Additional config tests

Documentation:
- HOW_TO_RUN_TESTS.md: Guide for running and understanding tests

* test(web): Add comprehensive API endpoint tests

- Add 30 new tests for Flask API endpoints in test/test_web_api.py
- Cover config, system, display, plugins, fonts, and error handling APIs
- Increase test coverage from 30.26% to 30.87%
- All 267 tests passing

Tests cover:
- Config API: GET/POST main config, schedule, secrets
- System API: Status, version, system actions
- Display API: Current display, on-demand start/stop
- Plugins API: Installed plugins, health, config, operations, state
- Fonts API: Catalog, tokens, overrides
- Error handling: Invalid JSON, missing fields, 404s

* test(plugins): Add comprehensive integration tests for all plugins

- Add base test class for plugin integration tests
- Create integration tests for all 6 plugins:
  - basketball-scoreboard (11 tests)
  - calendar (10 tests)
  - clock-simple (11 tests)
  - odds-ticker (9 tests)
  - soccer-scoreboard (11 tests)
  - text-display (12 tests)
- Total: 64 new plugin integration tests
- Increase test coverage from 30.87% to 33.38%
- All 331 tests passing

Tests verify:
- Plugin loading and instantiation
- Required methods (update, display)
- Manifest validation
- Display modes
- Config schema validation
- Graceful handling of missing API credentials

Uses hybrid approach: integration tests in main repo,
plugin-specific unit tests remain in plugin submodules.

* Add mqtt-notifications plugin as submodule

* fix(sports): Respect games_to_show settings for favorite teams

- Fix upcoming games to show N games per team (not just 1)
- Fix recent games to show N games per team (not just 1)
- Add duplicate removal for games involving multiple favorite teams
- Match behavior of basketball-scoreboard plugin
- Affects NFL, NHL, and other sports using base_classes/sports.py

* chore: Remove debug instrumentation logs

- Remove temporary debug logging added during fix verification
- Fix confirmed working by user

* debug: Add instrumentation to debug configuration header visibility issue

* fix: Resolve nested section content sliding under next header

- Remove overflow-hidden from nested-section to allow proper document flow
- Add proper z-index and positioning to prevent overlap
- Add margin-top to nested sections for better spacing
- Remove debug instrumentation that was causing ERR_BLOCKED_BY_CLIENT errors

* fix: Prevent unnecessary plugin tab redraws

- Add check to only update tabs when plugin list actually changes
- Increase debounce timeout to batch rapid changes
- Compare plugin IDs before updating to avoid redundant redraws
- Fix setter to check for actual changes before triggering updates

* fix: Prevent form-groups from sliding out of view when nested sections expand

- Increase margin-bottom on nested-sections for better spacing
- Add clear: both to nested-sections to ensure proper document flow
- Change overflow to visible when expanded to allow natural flow
- Add margin-bottom to expanded content
- Add spacing rules for form-groups that follow nested sections
- Add clear spacer div after nested sections

* fix: Reduce excessive debug logging in generateConfigForm

- Only log once per plugin instead of on every function call
- Prevents log spam when Alpine.js re-renders the form multiple times
- Reduces console noise from 10+ logs per plugin to 1 log per plugin

* fix: Prevent nested section content from sliding out of view when expanded

- Remove overflow-hidden from nested-section in base.html (was causing clipping)
- Add scrollIntoView to scroll expanded sections into view within modal
- Set nested-section overflow to visible to prevent content clipping
- Add min-height to nested-content to ensure proper rendering
- Wait for animation to complete before scrolling into view

* fix: Prevent form-groups from overlapping and appearing outside view

- Change nested-section overflow to hidden by default, visible when expanded
- Add :has() selector to allow overflow when content is expanded
- Ensure form-groups after nested sections have proper spacing and positioning
- Add clear: both and width: 100% to prevent overlap
- Use !important for margin-top to ensure spacing is applied
- Ensure form-groups are in normal document flow with float: none

* fix: Use JavaScript to toggle overflow instead of :has() selector

- :has() selector may not be supported in all browsers
- Use JavaScript to set overflow: visible when expanded, hidden when collapsed
- This ensures better browser compatibility while maintaining functionality

* fix: Make parent sections expand when nested sections expand

- Add updateParentNestedContentHeight() helper to recursively update parent heights
- When a nested section expands, recalculate all parent nested-content max-heights
- Ensures parent sections (like NFL) expand to accommodate expanded child sections
- Updates parent heights both on expand and collapse for proper animation

* refactor: Simplify parent section expansion using CSS max-height: none

- Remove complex recursive parent height update function
- Use CSS max-height: none when expanded to allow natural expansion
- Parent sections automatically expand because nested-content has no height constraint
- Simpler and more maintainable solution

* refactor: Remove complex recursive parent height update function

- CSS max-height: none already handles parent expansion automatically
- No need for JavaScript to manually update parent heights
- Much simpler and cleaner solution

* debug: Add instrumentation to debug auto-collapse issue

- Add logging to track toggle calls and state changes
- Add guard to prevent multiple simultaneous toggles
- Pass event object to prevent bubbling
- Improve state detection logic
- Add return false to onclick handlers

* chore: Remove debug instrumentation from toggleNestedSection

- Remove all debug logging code
- Keep functional fixes: event handling, toggle guard, improved state detection
- Code is now clean and production-ready

* fix(web): Add browser refresh note to plugin fetch errors

* refactor(text-display): Update submodule to use ScrollHelper

* fix(text-display): Fix scrolling display issue - update position in display()

* feat(text-display): Add scroll_loop option and improve scroll speed control

* debug: Add instrumentation to track plugin enabled state changes

Added debug logging to investigate why plugins appear to disable themselves:
- Track enabled state during plugin load (before/after schema merge)
- Track enabled state during plugin reload
- Track enabled state preservation during config save
- Track state reconciliation fixes
- Track enabled state updates in on_config_change

This will help identify which code path is causing plugins to disable.

* debug: Fix debug log path to work on Pi

Changed hardcoded log path to use dynamic project root detection:
- Uses LEDMATRIX_ROOT env var if set
- Falls back to detecting project root by looking for config directory
- Creates .cursor directory if it doesn't exist
- Falls back to /tmp/ledmatrix_debug.log if all else fails
- Added better error handling with logger fallback

* Remove debug instrumentation for plugin enabled state tracking

Removed all debug logging that was added to track plugin enabled state changes.
The instrumentation has been removed as requested.

* Reorganize documentation and cleanup test files

- Move documentation files to docs/ directory
- Remove obsolete test files
- Update .gitignore and README

* feat(text-display): Switch to frame-based scrolling with high FPS support

* fix(text-display): Add backward compatibility for ScrollHelper sub-pixel scrolling

* feat(scroll_helper): Add sub-pixel scrolling support for smooth movement

- Add sub-pixel interpolation using scipy (if available) or numpy fallback
- Add set_sub_pixel_scrolling() method to enable/disable feature
- Implement _get_visible_portion_subpixel() for fractional pixel positioning
- Implement _interpolate_subpixel() for linear interpolation
- Prevents pixel skipping at slow scroll speeds
- Maintains backward compatibility with integer pixel path

* fix(scroll_helper): Reset last_update_time in reset_scroll() to prevent jump-ahead

- Reset last_update_time when resetting scroll position
- Prevents large delta_time on next update after reset
- Fixes issue where scroll would immediately complete again after reset
- Ensures smooth scrolling continuation after loop reset

* fix(scroll_helper): Fix numpy broadcasting error in sub-pixel interpolation

- Add output_width parameter to _interpolate_subpixel() for variable widths
- Fix wrap-around case to use correct widths for interpolation
- Handle edge cases where source array is smaller than expected
- Prevent 'could not broadcast input array' errors in sub-pixel scrolling
- Ensure proper width matching in all interpolation paths

* feat(scroll): Add frame-based scrolling mode for smooth LED matrix movement

- Add frame_based_scrolling flag to ScrollHelper
- When enabled, moves fixed pixels per step, throttled by scroll_delay
- Eliminates time-based jitter by ignoring frame timing variations
- Provides stock-ticker-like smooth, predictable scrolling
- Update text-display plugin to use frame-based mode

This addresses stuttering issues where time-based scrolling caused
visual jitter due to frame timing variations in the main display loop.

* fix(scroll): Fix NumPy broadcasting errors in sub-pixel wrap-around

- Ensure _interpolate_subpixel always returns exactly requested width
- Handle cases where scipy.ndimage.shift produces smaller arrays
- Add padding logic for wrap-around cases when arrays are smaller than expected
- Prevents 'could not broadcast input array' errors during scrolling

* refactor(scroll): Remove sub-pixel interpolation, use high FPS integer scrolling

- Disable sub-pixel scrolling by default in ScrollHelper
- Simplify get_visible_portion to always use integer pixel positioning
- Restore frame-based scrolling logic for smooth high FPS movement
- Use high frame rate (like stock ticker) for smoothness instead of interpolation
- Reduces complexity and eliminates broadcasting errors

* fix(scroll): Prevent large pixel jumps in frame-based scrolling

- Initialize last_step_time properly to prevent huge initial jumps
- Clamp scroll_speed to max 5 pixels/frame in frame-based mode
- Prevents 60-pixel jumps when scroll_speed is misconfigured
- Simplified step calculation to avoid lag catch-up jumps

* fix(text-display): Align config schema and add validation

- Update submodule reference
- Adds warning and logging for scroll_speed config issues

* fix(scroll): Simplify frame-based scrolling to match stock ticker behavior

- Remove throttling logic from frame-based scrolling
- Move pixels every call (DisplayController's loop timing controls rate)
- Add enable_scrolling attribute to text-display plugin for high-FPS treatment
- Matches stock ticker: simple, predictable movement every frame
- Eliminates jitter from timing mismatches between DisplayController and ScrollHelper

* fix(scroll): Restore scroll_delay throttling in frame-based mode

- Restore time-based throttling using scroll_delay
- Move pixels only when scroll_delay has passed
- Handle lag catch-up with reasonable caps to prevent huge jumps
- Preserve fractional timing for smooth operation
- Now scroll_delay actually controls the scroll speed as intended

* feat(text-display): Add FPS counter logging

- Update submodule reference
- Adds FPS tracking and logging every 5 seconds

* fix(text-display): Add display-width buffer so text scrolls completely off

- Update submodule reference
- Adds end buffer to ensure text exits viewport before looping

* fix: Prevent premature game switching in SportsLive

- Set last_game_switch when games load even if current_game already exists
- Set last_game_switch when same games update but it's still 0
- Add guard to prevent switching check when last_game_switch is 0
- Fixes issue where first game shows for only ~2 seconds before switching
- Also fixes random screen flickering when games change prematurely

* feat(plugins): Add branch selection support for plugin installation

- Add optional branch parameter to install_plugin() and install_from_url() in store_manager
- Update API endpoints to accept and pass branch parameter
- Update frontend JavaScript to support branch selection in install calls
- Maintain backward compatibility - branch parameter is optional everywhere
- Falls back to default branch logic if specified branch doesn't exist

* feat(plugins): Add UI for branch selection in plugin installation

- Add branch input field in 'Install Single Plugin' section
- Add global branch input for store installations
- Update JavaScript to read branch from input fields
- Branch input applies to all store installations when specified

* feat(plugins): Change branch selection to be per-plugin instead of global

- Remove global store branch input field
- Add individual branch input field to each plugin card in store
- Add branch input to custom registry plugin cards
- Each plugin can now have its own branch specified independently

* debug: Add logging to _should_exit_dynamic

* feat(display_controller): Add universal get_cycle_duration support for all plugins

UNIVERSAL FEATURE: Any plugin can now implement get_cycle_duration() to dynamically
calculate the total time needed to show all content for a mode.

New method:
- _plugin_cycle_duration(plugin, display_mode): Queries plugin for calculated duration

Integration:
- Display controller calls plugin.get_cycle_duration(display_mode)
- Uses returned duration as target (respecting max cap)
- Falls back to cap if not provided

Benefits:
- Football plugin: Show all games (3 games × 15s = 45s total)
- Basketball plugin: Could implement same logic
- Hockey/Baseball/any sport: Universal support
- Stock ticker: Could calculate based on number of stocks
- Weather: Could calculate based on forecast days

Example plugin implementation:

Result: Plugins control their own display duration based on actual content,
creating a smooth user experience where all content is shown before switching.

* debug: Add logging to cycle duration call

* debug: Change loop exit logs to INFO level

* fix: Change cycle duration logs to INFO level

* fix: Don't exit loop on False for dynamic duration plugins

For plugins with dynamic duration enabled, keep the display loop running
even when display() returns False. This allows games to continue rotating
within the calculated duration.

The loop will only exit when:
- Cycle is complete (plugin reports all content shown)
- Max duration is reached
- Mode is changed externally

* fix(schedule): Improve display scheduling functionality

- Add GET endpoint for schedule configuration retrieval
- Fix mode switching to clean up old config keys (days/start_time/end_time)
- Improve error handling with consistent error_response() usage
- Enhance display controller schedule checking with better edge case handling
- Add validation for time formats and ensure at least one day enabled in per-day mode
- Add debug logging for schedule state changes

Fixes issues where schedule mode switching left stale config causing incorrect behavior.

* fix(install): Add cmake and ninja-build to system dependencies

Resolves h3 package build failure during first-time installation.
The h3 package (dependency of timezonefinder) requires CMake and
Ninja to build from source. Adding these build tools ensures
successful installation of all Python dependencies.

* fix: Pass display_mode in ALL loop calls to maintain sticky manager

CRITICAL FIX: Display controller was only passing display_mode on first call,
causing plugins to fall back to internal mode cycling and bypass sticky
manager logic.

Now consistently passes display_mode=active_mode on every display() call in
both high-FPS and normal loops. This ensures plugins maintain mode context
and sticky manager state throughout the entire display duration.

* feat(install): Add OS check for Raspberry Pi OS Lite (Trixie)

- Verify OS is Raspberry Pi OS (raspbian/debian)
- Require Debian 13 (Trixie) specifically
- Check for Lite version (no desktop environment)
- Exit with clear error message if requirements not met
- Provide instructions for obtaining correct OS version

* fix(web-ui): Add missing notification handlers to quick action buttons

- Added hx-on:htmx:after-request handlers to all quick action buttons in overview.html
- Added hx-ext='json-enc' for proper JSON encoding
- Added missing notification handler for reboot button in index.html
- Users will now see toast notifications when actions complete or fail

* fix(display): Ensure consistent display mode handling in all plugin calls

- Updated display controller to consistently pass display_mode in all plugin display() calls.
- This change maintains the sticky manager state and ensures plugins retain their mode context throughout the display duration.
- Addresses issues with mode cycling and improves overall display reliability.

* fix(display): Enhance display mode persistence across plugin updates

- Updated display controller to ensure display_mode is consistently maintained during plugin updates.
- This change prevents unintended mode resets and improves the reliability of display transitions.
- Addresses issues with mode persistence, ensuring a smoother user experience across all plugins.

* feat: Add Olympics countdown plugin as submodule

- Add olympics-countdown plugin submodule
- Update .gitignore to allow olympics-countdown plugin
- Plugin automatically determines next Olympics and counts down to opening/closing ceremonies

* feat(web-ui): Add checkbox-group widget support for multi-select arrays

- Add checkbox-group widget rendering in plugins_manager.js
- Update form processing to handle checkbox groups with [] naming
- Support for friendly labels via x-options in config schemas
- Update odds-ticker submodule with checkbox-group implementation

* fix(plugins): Preserve enabled state when saving plugin config from main config endpoint

When saving plugin configuration through save_main_config endpoint, the enabled
field was not preserved if missing from the form data. This caused plugins to
be automatically disabled when users saved their configuration from the plugin
manager tab.

This fix adds the same enabled state preservation logic that exists in
save_plugin_config endpoint, ensuring consistent behavior across both endpoints.
The enabled state is preserved from current config, plugin instance, or defaults
to True to prevent unexpected disabling of plugins.

* fix(git): Resolve git status timeout and exclude plugins from base project updates

- Add --untracked-files=no flag to git status for faster execution
- Increase timeout from 5s to 30s for git status operations
- Add timeout exception handling for git status and stash operations
- Filter out plugins directory from git status checks (plugins are separate repos)
- Exclude plugins from stash operations using :!plugins pathspec
- Apply same fixes to plugin store manager update operations

* feat(plugins): Add granular scroll speed control to odds-ticker and leaderboard plugins

- Add display object to both plugins' config schemas with scroll_speed and scroll_delay
- Enable frame-based scrolling mode for precise FPS control (100 FPS for leaderboard)
- Add set_scroll_speed() and set_scroll_delay() methods to both plugins
- Maintain backward compatibility with scroll_pixels_per_second config
- Leaderboard plugin now explicitly sets target_fps to 100 for high-performance scrolling

* fix(scroll): Correct dynamic duration calculation for frame-based scrolling

- Fix calculate_dynamic_duration() to properly handle frame-based scrolling mode
- Convert scroll_speed from pixels/frame to pixels/second when in frame-based mode
- Prevents incorrect duration calculations (e.g., 2609s instead of 52s)
- Affects all plugins using ScrollHelper: odds-ticker, leaderboard, stocks, text-display
- Add debug logging to show scroll mode and effective speed

* Remove version logic from plugin system, use git commits instead

- Remove version parameter from install_plugin() method
- Rename fetch_latest_versions to fetch_commit_info throughout codebase
- Remove version fields from plugins.json registry (versions, latest_version, download_url_template)
- Remove version logging from plugin manager
- Update web UI to use fetch_commit_info parameter
- Update .gitignore to ignore all plugin folders (remove whitelist exceptions)
- Remove plugin directories from git index (plugins now installed via plugin store only)

Plugins now always install latest commit from default branch. Version fields
replaced with git commit SHA and commit dates. System uses git-based approach
for all plugin metadata.

* feat(plugins): Normalize all plugins as git submodules

- Convert all 18 plugins to git submodules for uniform management
- Add submodules for: baseball-scoreboard, christmas-countdown, football-scoreboard, hockey-scoreboard, ledmatrix-flights, ledmatrix-leaderboard, ledmatrix-music, ledmatrix-stocks, ledmatrix-weather, static-image
- Re-initialize mqtt-notifications as proper submodule
- Update .gitignore to allow all plugin submodules
- Add normalize_plugin_submodules.sh script for future plugin management

All plugins with GitHub repositories are now managed as git submodules,
ensuring consistent version control and easier updates.

* refactor(repository): Reorganize scripts and files into organized directory structure

- Move installation scripts to scripts/install/ (except first_time_install.sh)
- Move development scripts to scripts/dev/
- Move utility scripts to scripts/utils/
- Move systemd service files to systemd/
- Keep first_time_install.sh, start_display.sh, stop_display.sh in root
- Update all path references in scripts, documentation, and service files
- Add README.md files to new directories explaining their purpose
- Remove empty tools/ directory (contents moved to scripts/dev/)
- Add .gitkeep to data/ directory

* fix(scripts): Fix PROJECT_DIR path in start_web_conditionally.py after move to scripts/utils/

* fix(scripts): Fix PROJECT_DIR/PROJECT_ROOT path resolution in moved scripts

- Fix wifi_monitor_daemon.py to use project root instead of scripts/utils/
- Fix shell scripts in scripts/ to correctly resolve project root (go up one more level)
- Fix scripts in scripts/fix_perms/ to correctly resolve project root
- Update diagnose_web_interface.sh to reference moved start_web_conditionally.py path

All scripts now correctly determine project root after reorganization.

* fix(install): Update first_time_install.sh to detect and update service files with old paths

- Check for old paths in service files and reinstall if needed
- Always reinstall main service (install_service.sh is idempotent)
- This ensures existing installations get updated paths after reorganization

* fix(install): Update install_service.sh message to indicate it updates existing services

* fix(wifi): Enable WiFi scan to work when AP mode is active

- Temporarily disable AP mode during network scanning
- Automatically re-enable AP mode after scan completes
- Add proper error handling with try/finally to ensure AP mode restoration
- Add user notification when AP mode is temporarily disabled
- Improve error messages for common scanning failures
- Add timing delays for interface mode switching

* fix(wifi): Fix network parsing to handle frequency with 'MHz' suffix

- Strip 'MHz' suffix from frequency field before float conversion
- Add better error logging for parsing failures
- Fixes issue where all networks were silently skipped due to ValueError

* debug(wifi): Add console logging and Alpine.js reactivity fixes for network display

- Add console.log statements to debug network scanning
- Add x-effect to force Alpine.js reactivity updates
- Add unique keys to x-for template
- Add debug display showing network count
- Improve error handling and user feedback

* fix(wifi): Manually update select options instead of using Alpine.js x-for

- Replace Alpine.js x-for template with manual DOM manipulation
- Add updateSelectOptions() method to directly update select dropdown
- This fixes issue where networks weren't appearing in dropdown
- Alpine.js x-for inside select elements can be unreliable

* feat(web-ui): Add patternProperties support for dynamic key-value pairs

- Add UI support for patternProperties objects (custom_feeds, feed_logo_map)
- Implement key-value pair editor with add/remove functionality
- Add JavaScript functions for managing dynamic key-value pairs
- Update form submission to handle patternProperties JSON data
- Enable easy configuration of feed_logo_map in web UI

* chore: Update ledmatrix-news submodule to latest commit

* fix(plugins): Handle arrays of objects in config normalization

Fix configuration validation failure for static-image plugin by adding
recursive normalization support for arrays of objects. The normalize_config_values
function now properly handles arrays containing objects (like image_config.images)
by recursively normalizing each object in the array using the items schema properties.

This resolves the 'configuration validation failed' error when saving static
image plugin configuration with multiple images.

* fix(plugins): Handle union types in config normalization and form generation

Fix configuration validation for fields with union types like ['integer', 'null'].
The normalization function now properly handles:
- Union types in top-level fields (e.g., random_seed: ['integer', 'null'])
- Union types in array items
- Empty string to None conversion for nullable fields
- Form generation and submission for union types

This resolves validation errors when saving plugin configs with nullable
integer/number fields (e.g., rotation_settings.random_seed in static-image plugin).

Also improves UX by:
- Adding placeholder text for nullable fields explaining empty = use default
- Properly handling empty values in form submission for union types

* fix(plugins): Improve union type normalization with better edge case handling

Enhanced normalization for union types like ['integer', 'null']:
- Better handling of whitespace in string values
- More robust empty string to None conversion
- Fallback to None when conversion fails and null is allowed
- Added debug logging for troubleshooting normalization issues
- Improved handling of nested object fields with union types

This should resolve remaining validation errors for nullable integer/number
fields in nested objects (e.g., rotation_settings.random_seed).

* chore: Add ledmatrix-news plugin to .gitignore exceptions

* Fix web interface service script path in install_service.sh

- Updated ExecStart path from start_web_conditionally.py to scripts/utils/start_web_conditionally.py
- Updated diagnose_web_ui.sh to check for correct script path
- Fixes issue where web UI service fails to start due to incorrect script path

* Fix nested configuration section headers not expanding

Fixed toggleNestedSection function to properly calculate scrollHeight when
expanding nested configuration sections. The issue occurred when sections
started with display:none - the scrollHeight was being measured before the
browser had a chance to lay out the element, resulting in a value of 0.

Changes:
- Added setTimeout to delay scrollHeight measurement until after layout
- Added overflow handling during animations to prevent content jumping
- Added fallback for edge cases where scrollHeight might still be 0
- Set maxHeight to 'none' after expansion completes for natural growth
- Updated function in both base.html and plugins_manager.js

This fix applies to all plugins with nested configuration sections, including:
- Hockey/Football/Basketball/Baseball/Soccer scoreboards (customization, global sections)
- All plugins with transition, display, and other nested configuration objects

Fixes configuration header expansion issues across all plugins.

* Fix syntax error in first_time_install.sh step 8.5

Added missing 'fi' statement to close the if block in the WiFi monitor
service installation section. This resolves the 'unexpected end of file'
error that occurred at line 1385 during step 8.5.

* Fix WiFi UI: Display correct SSID and accurate signal strength

- Fix WiFi network selection dropdown not showing available networks
  - Replace manual DOM manipulation with Alpine.js x-for directive
  - Add fallback watcher to ensure select updates reactively

- Fix WiFi status display showing netplan connection name instead of SSID
  - Query actual SSID from device properties (802-11-wireless.ssid)
  - Add fallback methods to get SSID from active WiFi connection list

- Improve signal strength accuracy
  - Get signal directly from device properties (WIFI.SIGNAL)
  - Add multiple fallback methods for robust signal retrieval
  - Ensure signal percentage is accurate and up-to-date

* Improve WiFi connection UI and error handling

- Fix connect button disabled condition to check both selectedSSID and manualSSID
- Improve error handling to display actual server error messages from 400 responses
- Add step-by-step labels (Step 1, Step 2, Step 3) to clarify connection workflow
- Add visual feedback showing selected network in blue highlight box
- Improve password field labeling with helpful instructions
- Add auto-clear logic between dropdown and manual SSID entry
- Enhance backend validation with better error messages and logging
- Trim SSID whitespace before processing to prevent validation errors

* Add WiFi disconnect functionality for AP mode testing

- Add disconnect_from_network() method to WiFiManager
  - Disconnects from current WiFi network using nmcli
  - Automatically triggers AP mode check if auto_enable_ap_mode is enabled
  - Returns success/error status with descriptive messages

- Add /api/v3/wifi/disconnect API endpoint
  - POST endpoint to disconnect from current WiFi network
  - Includes proper error handling and logging

- Add disconnect button to WiFi status section
  - Only visible when connected to a network
  - Red styling to indicate disconnection action
  - Shows 'Disconnecting...' state during operation
  - Automatically refreshes status after disconnect

- Integrates with AP mode auto-enable functionality
  - When disconnected, automatically enables AP mode if configured
  - Perfect for testing captive portal and AP mode features

* Add explicit handling for broken pipe errors during plugin dependency installation

- Catch BrokenPipeError and OSError (errno 32) explicitly in all dependency installation methods
- Add clear error messages explaining network interruption or buffer overflow causes
- Improves error handling in store_manager, plugin_loader, and plugin_manager
- Helps diagnose 'Errno 32 Broken Pipe' errors during pip install operations

* Add WiFi permissions configuration script and integrate into first-time install

- Create configure_wifi_permissions.sh script
  - Configures passwordless sudo for nmcli commands
  - Configures PolicyKit rules for NetworkManager control
  - Fixes 'Not Authorized to control Networking' error
  - Allows web interface to connect/disconnect WiFi without password prompts

- Integrate WiFi permissions configuration into first_time_install.sh
  - Added as Step 10.1 after passwordless sudo configuration
  - Runs automatically during first-time installation
  - Ensures WiFi management works out of the box

- Resolves authorization errors when connecting/disconnecting WiFi networks
  - NetworkManager requires both sudo and PolicyKit permissions
  - Script configures both automatically for seamless WiFi management

* Add WiFi status LED message display integration

- Integrate WiFi status messages from wifi_manager into display_controller
- WiFi status messages interrupt normal rotation (but respect on-demand)
- Priority: on-demand > wifi-status > live-priority > normal rotation
- Safe implementation with comprehensive error handling
- Automatic cleanup of expired/corrupted status files
- Word-wrapping for long messages (max 2 lines)
- Centered text display with small font
- Non-intrusive: all errors are caught and logged, never crash controller

* Fix display loop issues: reduce log spam and handle missing plugins

- Change _should_exit_dynamic logging from INFO to DEBUG to reduce log spam
  in tight loops (every 8ms) that was causing high CPU usage
- Fix display loop not running when manager_to_display is None
- Add explicit check to set display_result=False when no plugin manager found
- Fix logic bug where manager_to_display was overwritten after circuit breaker skip
- Ensure proper mode rotation when plugins have no content or aren't found

* Add debug logging to diagnose display loop stuck issue

* Change debug logs to INFO level to diagnose display loop stuck

* Add schedule activation logging and ensure display is blanked when inactive

- Add clear INFO-level log message when schedule makes display inactive
- Track previous display state to detect schedule transitions
- Clear display when schedule makes it inactive to ensure blank screen
  (prevents showing initialization screen when schedule kicks in)
- Initialize _was_display_active state tracking in __init__

* Fix indentation errors in schedule state tracking

* Add rotation between hostname and IP address every 10 seconds

- Added _get_local_ip() method to detect device IP address
- Implemented automatic rotation between hostname and IP every 10 seconds
- Enhanced logging to include both hostname and IP in initialization
- Updated get_info() to expose device_ip and current_display_mode

* Add WiFi connection failsafe system

- Save original connection before attempting new connection
- Automatically restore original connection if new connection fails
- Enable AP mode as last resort if restoration fails
- Enhanced connection verification with multiple attempts
- Verify correct SSID (not just 'connected' status)
- Better error handling and exception recovery
- Prevents Pi from becoming unresponsive on connection failure
- Always ensures device remains accessible via original WiFi or AP mode

* feat(web): Improve web UI startup speed and fix cache permissions

- Defer plugin discovery until first API request (removed from startup)
- Add lazy loading to operation queue, state manager, and operation history
- Defer health monitor initialization until first request
- Fix cache directory permission issue:
  - Add systemd CacheDirectory feature for automatic cache dir creation
  - Add manual cache directory creation in install script as fallback
  - Improve cache manager logging (reduce alarming warnings)
- Fix syntax errors in wifi_manager.py (unclosed try blocks)

These changes significantly improve web UI startup time, especially with many
plugins installed, while maintaining full backward compatibility.

* feat(plugins): Improve GitHub token pop-up UX and combine warning/settings

- Fix visibility toggle to handle inline styles properly
- Remove redundant inline styles from HTML elements
- Combine warning banner and settings panel into unified component
- Add loading states to save/load token buttons
- Improve error handling with better user feedback
- Add token format validation (ghp_ or github_pat_ prefix)
- Auto-refresh GitHub auth status after saving token
- Hide warning banner when settings panel opens
- Clear input field after successful save for security

This creates a smoother UX flow where clicking 'Configure Token'
transitions from warning directly to configuration form.

* fix(wifi): Prevent WiFi radio disabling during AP mode disable

- Make NetworkManager restart conditional (only for hostapd mode)
- Add enhanced WiFi radio enable with retry and verification logic
- Add connectivity safety check before NetworkManager restart
- Ensure WiFi radio enabled after all AP mode disable operations
- Fix indentation bug in dnsmasq backup restoration logic
- Add pre-connection WiFi radio check for safety

Fixes issue where WiFi radio was being disabled when disabling AP mode,
especially when connected via Ethernet, making it impossible to enable
WiFi from the web UI.

* fix(plugin-templates): Fix unreachable fallback to expired cache in update() method

The exception handler in update() checked the cached variable, which would
always be None or falsy at that point. If fresh cached data existed, the
method returned early. If cached data was expired, it was filtered out by
max_age constraint. The fix retrieves cached data again in the exception
handler with a very large max_age (1 year) to effectively bypass expiration
check and allow fallback to expired data when fetch fails.

* fix(plugin-templates): Resolve plugin_id mismatch in test template setUp method

* feat(plugins): Standardize manifest version fields schema

- Consolidate version fields to use consistent naming:
  - compatible_versions: array of semver ranges (required)
  - min_ledmatrix_version: string (optional)
  - max_ledmatrix_version: string (optional)
  - versions[].ledmatrix_min_version: renamed from ledmatrix_min
- Add manifest schema validation (schema/manifest_schema.json)
- Update store_manager to validate version fields and schema
- Update template and all documentation examples to use standardized fields
- Add deprecation warnings for ledmatrix_version and ledmatrix_min fields

* fix(templates): Update plugin README template script path to correct location

* docs(plugin): Resolve conflicting version management guidance in .cursorrules

* chore(.gitignore): Consolidate plugin exclusion patterns

Remove unnecessary !plugins/*/.git pattern and consolidate duplicate
negations by keeping only trailing-slash directory exclusions.

* docs: Add language specifiers to code blocks in STATIC_IMAGE_MULTI_UPLOAD_PLAN.md

* fix(templates): Remove api_key from config.json example in plugin README template

Remove api_key field from config.json example to prevent credential leakage.
API keys should only be stored in config_secrets.json. Added clarifying note
about proper credential storage.

* docs(README): Add plugin installation and migration information

- Add plugin installation instructions via web interface and GitHub URL
- Add plugin migration guide for users upgrading from old managers
- Improve plugin documentation for new users

* docs(readme): Update donation links and add Discord acknowledgment

* docs: Add comprehensive API references and consolidate documentation

- Add API_REFERENCE.md with complete REST API documentation (50+ endpoints)
- Add PLUGIN_API_REFERENCE.md documenting Display Manager, Cache Manager, and Plugin Manager APIs
- Add ADVANCED_PLUGIN_DEVELOPMENT.md with advanced patterns and examples
- Add DEVELOPER_QUICK_REFERENCE.md for quick developer reference
- Consolidate plugin configuration docs into single PLUGIN_CONFIGURATION_GUIDE.md
- Archive completed implementation summaries to docs/archive/
- Enhance PLUGIN_DEVELOPMENT_GUIDE.md with API links and 3rd party submission guidelines
- Update docs/README.md with new API reference sections
- Update root README.md with documentation links

* fix(install): Fix IP detection and network diagnostics after fresh install

- Fix web-ui-info plugin IP detection to handle no internet, AP mode, and network state changes
- Replace socket-based detection with robust interface scanning using hostname -I and ip addr
- Add AP mode detection returning 192.168.4.1 when AP mode is active
- Add periodic IP refresh every 30 seconds to handle network state changes
- Improve network diagnostics in first_time_install.sh showing actual IPs, WiFi status, and AP mode
- Add WiFi connection check in WiFi monitor installation with warnings
- Enhance web service startup logging to show accessible IP addresses
- Update README with network troubleshooting section and fix port references (5001->5000)

Fixes issue where display showed incorrect IP (127.0.11:5000) and users couldn't access web UI after fresh install.

* chore: Add GitHub sponsor button configuration

* fix(wifi): Fix aggressive AP mode enabling and improve WiFi detection

Critical fixes:
- Change auto_enable_ap_mode default from True to False (manual enable only)
- Fixes issue where Pi would disconnect from network after code updates
- Matches documented behavior (was incorrectly defaulting to True in code)

Improvements:
- Add grace period: require 3 consecutive disconnected checks (90s) before enabling AP mode
- Prevents AP mode from enabling on transient network hiccups
- Improve WiFi status detection with retry logic and better nmcli parsing
- Enhanced logging for debugging WiFi connection issues
- Better handling of WiFi device detection (works with any wlan device)

This prevents the WiFi monitor from aggressively enabling AP mode and
disconnecting the Pi from the network when there are brief network issues
or during system initialization.

* fix(wifi): Revert auto_enable_ap_mode default to True with grace period protection

Change default back to True for auto_enable_ap_mode while keeping the grace
period protection that prevents interrupting valid WiFi connections.

- Default auto_enable_ap_mode back to True (useful for setup scenarios)
- Grace period (3 consecutive checks = 90s) prevents false positives
- Improved WiFi detection with retry logic ensures accurate status
- AP mode will auto-enable when truly disconnected, but won't interrupt
  valid connections due to transient detection issues

* fix(news): Update submodule reference for manifest fix

Update ledmatrix-news submodule to include the fixed manifest.json with
required entry_point and class_name fields.

* fix(news): Update submodule reference with validate_config addition

Update ledmatrix-news submodule to include validate_config method for
proper configuration validation.

* feat: Add of-the-day plugin as git submodule

- Add ledmatrix-of-the-day plugin as git submodule
- Rename submodule path from plugins/of-the-day to plugins/ledmatrix-of-the-day to match repository naming convention
- Update .gitignore to allow ledmatrix-of-the-day submodule
- Plugin includes fixes for display rendering and web UI configuration support

* fix(wifi): Make AP mode open network and fix WiFi page loading in AP mode

AP Mode Changes:
- Remove password requirement from AP mode (open network for easier setup)
- Update hostapd config to create open network (no WPA/WPA2)
- Update nmcli hotspot to create open network (no password parameter)

WiFi Page Loading Fixes:
- Download local copies of HTMX and Alpine.js libraries
- Auto-detect AP mode (192.168.4.x) and use local JS files instead of CDN
- Auto-open WiFi tab when accessing via AP mode IP
- Add fallback loading if HTMX fails to load
- Ensures WiFi setup page works in AP mode without internet access

This fixes the issue where the WiFi page wouldn't load on iPhone when
accessing via AP mode (192.168.4.1:5000) because CDN resources couldn't
be fetched without internet connectivity.

* feat(wifi): Add explicit network switching support with clean disconnection

WiFi Manager Improvements:
- Explicitly disconnect from current network before connecting to a new one
- Add skip_ap_check parameter to disconnect_from_network() to prevent AP mode
  from activating during network switches
- Check if already connected to target network to avoid unnecessary work
- Improved logging for network switching operations

Web UI Improvements:
- Detect and display network switching status in UI
- Show 'Switching from [old] to [new]...' message when switching networks
- Enhanced status reloading after connection (multiple checks at 2s, 5s, 10s)
- Better user feedback during network transitions

This ensures clean network switching without AP mode interruptions and
provides clear feedback to users when changing WiFi networks.

* fix(web-ui): Add fallback content loading when HTMX fails to load

Problem:
- After recent updates, web UI showed navigation and CPU status but main
  content tabs never loaded
- Content tabs depend on HTMX's 'revealed' trigger to load
- If HTMX failed to load or initialize, content would never appear

Solutions:
- Enhanced HTMX loading verification with timeout checks
- Added fallback direct fetch for overview tab if HTMX fails
- Added automatic tab content loading when tabs change
- Added loadTabContent() method to manually trigger content loading
- Added global 'htmx-load-failed' event for error handling
- Automatic retry after 5 seconds if HTMX isn't available
- Better error messages and console logging for debugging

This ensures the web UI loads content even if HTMX has issues,
providing graceful degradation and better user experience.

* feat(web-ui): Add support for plugin custom HTML widgets and static file serving

- Add x-widget: custom-html support in config schema generation
- Add loadCustomHtmlWidget() function to load HTML from plugin directories
- Add /api/v3/plugins/<plugin_id>/static/<file_path> endpoint for serving plugin static files
- Enhance execute_plugin_action() to pass params via stdin as JSON for scripts
- Add JSON output parsing for script action responses

These changes enable plugins to provide custom UI components while keeping
all functionality plugin-scoped. Used by of-the-day plugin for file management.

* fix(web-ui): Resolve Alpine.js initialization errors

- Prevent Alpine.js from auto-initializing before app() function is defined
- Add deferLoadingAlpine to ensure proper initialization order
- Make app() function globally available via window.app
- Fix 'app is not defined' and 'activeTab is not defined' errors
- Remove duplicate Alpine.start() calls that caused double initialization warnings

* fix(web-ui): Fix IndentationError in api_v3.py OAuth flow

- Fix indentation in if action_def.get('oauth_flow') block
- Properly indent try/except block and all nested code
- Resolves IndentationError that prevented web interface from starting

* fix(web-ui): Fix SyntaxError in api_v3.py else block

- Fix indentation of OAuth flow code inside else block
- Properly indent else block for simple script execution
- Resolves SyntaxError at line 3458 that prevented web interface from starting

* fix(web-ui): Restructure OAuth flow check to fix SyntaxError

- Move OAuth flow check before script execution in else block
- Remove unreachable code that was causing syntax error
- OAuth check now happens first, then falls back to script execution
- Resolves SyntaxError at line 3458

* fix(web-ui): Define app() function in head for Alpine.js initialization

- Define minimal app() function in head before Alpine.js loads
- Ensures app() is available when Alpine initializes
- Full implementation in body enhances/replaces the stub
- Fixes 'app is not defined' and 'activeTab is not defined' errors

* fix(web-ui): Ensure plugin tabs load when full app() implementation is available

- Update stub init() to detect and use full implementation when available
- Ensure full implementation properly replaces stub methods
- Call init() after merging to load plugins and set up watchers
- Fixes issue where installed plugins weren't showing in navigation bar

* fix(web-ui): Prevent 'Cannot redefine property' error for installedPlugins

- Check if window.installedPlugins property already exists before defining
- Make property configurable to allow redefinition if needed
- Add _initialized flag to prevent multiple init() calls
- Fixes TypeError when stub tries to enhance with full implementation

* fix(web-ui): Fix variable redeclaration errors in logs tab

- Replace let/const declarations with window properties to avoid redeclaration
- Use window._logsEventSource, window._allLogs, etc. to persist across HTMX reloads
- Clean up existing event source before reinitializing
- Remove and re-add event listeners to prevent duplicates
- Fixes 'Identifier has already been declared' error when accessing logs tab multiple times

* feat(web-ui): Add support for additionalProperties object rendering

- Add handler for objects with additionalProperties containing object schemas
- Render dynamic category controls with enable/disable toggles
- Display category metadata (display name, data file path)
- Used by of-the-day plugin for category management

* fix(wifi): Ensure AP mode hotspot is always open (no password)

Problem:
- LEDMatrix-Setup WiFi AP was still asking for password despite code changes
- Existing hotspot connections with passwords weren't being fully cleaned up
- NetworkManager might reuse old connection profiles with passwords

Solutions:
- More thorough cleanup: Delete all hotspot-related connections, not just known names
- Verification: Check if hotspot has password after creation
- Automatic fix: Remove password and restart connection if security is detected
- Better logging: Log when password is detected and removed

This ensures the AP mode hotspot is always open for easy setup access,
even if there were previously saved connections with passwords.

* fix(wifi): Improve network switching reliability and device state handling

Problem:
- Pi failing to switch WiFi networks via web UI
- Connection attempts happening before device is ready
- Disconnect not fully completing before new connection attempt
- Connection name lookup issues when SSID doesn't match connection name

Solutions:
- Improved disconnect logic: Disconnect specific connection first, then device
- Device state verification: Wait for device to be ready (disconnected/unavailable) before connecting
- Better connection lookup: Search by SSID, not just connection name
- Increased wait times: 2 seconds for disconnect to complete
- State checking before activating existing connections
- Enhanced error handling and logging throughout

This ensures network switching works reliably by properly managing device
state transitions and using correct connection identifiers.

* debug(web-ui): Add debug logging for custom HTML widget loading

- Add console logging to track widget generation
- Improve error messages with missing configuration details
- Help diagnose why file manager widget may not be appearing

* fix(web-ui): Fix [object Object] display in categories field

- Add type checking to ensure category values are strings before rendering
- Safely extract data_file and display_name properties
- Prevent object coercion issues in category display

* perf(web-ui): Optimize plugin loading in navigation bar

- Reduce stub init timeout from 100ms to 10ms for faster enhancement
- Change full implementation merge from 50ms setTimeout to requestAnimationFrame
- Add direct plugin loading in stub while waiting for full implementation
- Skip plugin reload in full implementation if already loaded by stub
- Significantly improves plugin tab loading speed in navigation bar

* feat(web-ui): Adapt file-upload widget for JSON files in of-the-day plugin

- Add specialized JSON upload/delete endpoints for of-the-day plugin
- Modify file-upload widget to support JSON files (file_type: json)
- Render JSON files with file-code icon instead of image preview
- Show entry count for JSON files
- Store files in plugins/ledmatrix-of-the-day/of_the_day/ directory
- Automatically update categories config when files are uploaded/deleted
- Populate uploaded_files array from categories on form load
- Remove custom HTML widget, use standard file-upload widget instead

* fix(web-ui): Add working updatePluginTabs to stub for immediate plugin tab rendering

- Stub's updatePluginTabs was empty, preventing tabs from showing
- Add basic implementation that creates plugin tabs in navigation bar
- Ensures plugin tabs appear immediately when plugins load, even before full implementation merges
- Fixes issue where plugin navigation bar wasn't working

* feat(api): Populate uploaded_files and categories from disk for of-the-day plugin

- Scan of_the_day directory for existing JSON files when loading config
- Populate uploaded_files array from files on disk
- Populate categories from files on disk if not in config
- Categories default to disabled, user can enable them
- Ensures existing JSON files (word_of_the_day.json, slovenian_word_of_the_day.json) appear in UI

* fix(api): Improve category merging logic for of-the-day plugin

- Preserve existing category enabled state when merging with files from disk
- Ensure all JSON files from disk appear in categories section
- Categories from files default to disabled, preserving user choices
- Properly merge existing config with scanned files

* fix(wifi): More aggressive password removal for AP mode hotspot

Problem:
- LEDMatrix-Setup network still asking for password despite previous fixes
- NetworkManager may add default security settings to hotspots
- Existing connections with passwords may not be fully cleaned up

Solutions:
- Always remove ALL security settings after creating hotspot (not just when detected)
- Remove multiple security settings: key-mgmt, psk, wep-key, auth-alg
- Verify security was removed and recreate connection if verification fails
- Improved cleanup: Delete connections by SSID match, not just by name
- Disconnect connections before deleting them
- Always restart connection after removing security to apply changes
- Better logging for debugging

This ensures the AP mode hotspot is always open, even if NetworkManager
tries to add default security settings.

* perf(web): Optimize web interface performance and fix JavaScript errors

- Add resource hints (preconnect, dns-prefetch) for CDN resources to reduce DNS lookup delays
- Fix duplicate response parsing bug in loadPluginConfig that was parsing JSON twice
- Replace direct fetch() calls with PluginAPI.getInstalledPlugins() to leverage caching and throttling
- Fix Alpine.js function availability issues with defensive checks and $nextTick
- Enhance request deduplication with debug logging and statistics
- Add response caching headers for static assets and API responses
- Add performance monitoring utilities with detailed metrics

Fixes console errors for loadPluginConfig and generateConfigForm not being defined.
Reduces duplicate API calls to /api/v3/plugins/installed endpoint.
Improves initial page load time with resource hints and optimized JavaScript loading.

* perf(web-ui): optimize CSS for Raspberry Pi performance

- Remove backdrop-filter blur from modal-backdrop
- Remove box-shadow transitions (use transform/opacity only)
- Remove button ::before pseudo-element animation
- Simplify skeleton loader (gradient to opacity pulse)
- Optimize transition utility (specific properties, not 'all')
- Improve color contrast for WCAG AA compliance
- Add CSS containment to cards, plugin-cards, modals
- Remove unused CSS classes (duration-300, divider, divider-light)
- Remove duplicate spacing utility classes

All animations now GPU-accelerated (transform/opacity only).
Optimized for low-powered Raspberry Pi devices.

* fix(web): Resolve ReferenceError for getInstalledPluginsSafe in v3 stub initialization

Move getInstalledPluginsSafe() function definition before the app() stub code that uses it. The function was previously defined at line 3756 but was being called at line 849 during Alpine.js initialization, causing a ReferenceError when loadInstalledPluginsDirectly() attempted to load plugins before the full implementation was ready.

* fix(web): Resolve TypeError for installedPlugins.map in plugin loading

Fix PluginAPI.getInstalledPlugins() to properly extract plugins array from API response structure. The API returns {status: 'success', data: {plugins: [...]}}, but the method was returning response.data (the object) instead of response.data.plugins (the array).

Changes:
- api_client.js: Extract plugins array from response.data.plugins
- plugins_manager.js: Add defensive array checks and handle array return value correctly
- base.html: Add defensive check in getInstalledPluginsSafe() to ensure plugins is always an array

This prevents 'installedPlugins.map is not a function' errors when loading plugins.

* style(web-ui): Enhance navigation bar styling for better readability

- Improve contrast: Change inactive tab text from gray-500 to gray-700
- Add gradient background and thicker border for active tabs
- Enhance hover states with background highlights
- Add smooth transitions using GPU-accelerated properties
- Update all navigation buttons (system tabs and plugin tabs)
- Add updatePluginTabStates() method for dynamic tab state management

All changes are CSS-only with zero performance overhead.

* fix(web-ui): Optimize plugin loading and reduce initialization errors

- Make generateConfigForm accessible to inline Alpine components via parent scope
- Consolidate plugin initialization to prevent duplicate API calls
- Fix script execution from HTMX-loaded content by extracting scripts before DOM insertion
- Add request deduplication to loadInstalledPlugins() to prevent concurrent requests
- Improve Alpine component initialization with proper guards and fallbacks

This eliminates 'generateConfigForm is not defined' errors and reduces plugin
API calls from 3-4 duplicate calls to 1 per page load, significantly improving
page load performance.

* fix(web-ui): Add guard check for generateConfigForm to prevent Alpine errors

Add typeof check in x-show to prevent Alpine from evaluating generateConfigForm
before the component methods are fully initialized. This eliminates the
'generateConfigForm is not defined' error that was occurring during component
initialization.

* fix(web-ui): Fix try-catch block structure in script execution code

Correct the nesting of try-catch block inside the if statement for script execution.
The catch block was incorrectly placed after the else clause, causing a syntax error.

* fix(web-ui): Escape quotes in querySelector to avoid HTML attribute conflicts

Change double quotes to single quotes in the CSS selector to prevent conflicts
with HTML attribute parsing when the x-data expression is embedded.

* style(web): Improve button text readability in Quick Actions section

* fix(web): Resolve Alpine.js expression errors in plugin configuration component

- Capture plugin from parent scope into component data to fix parsing errors
- Update all plugin references to use this.plugin in component methods
- Fix x-init to properly call loadPluginConfig method
- Resolves 'Uncaught ReferenceError' for isOnDemandLoading, onDemandLastUpdated, and other component properties

* fix(web): Fix remaining Alpine.js scope issues in plugin configuration

- Use this.generateConfigForm in typeof checks and method calls
- Fix form submission to use this.plugin.id
- Use $root. prefix for parent scope function calls (refreshPlugin, updatePlugin, etc.)
- Fix confirm dialog string interpolation
- Ensures all component methods and properties are properly scoped

* fix(web): Add this. prefix to all Alpine.js component property references

- Fix all template expressions to use this. prefix for component properties
- Update isOnDemandLoading, onDemandLastUpdated, onDemandRefreshing references
- Update onDemandStatusClass, onDemandStatusText, onDemandServiceClass, onDemandServiceText
- Update disableRunButton, canStopOnDemand, showEnableHint, loading references
- Ensures Alpine.js can properly resolve all component getters and properties

* fix(web): Resolve Alpine.js expression errors in plugin configuration

- Move complex x-data object to pluginConfigData() function for better parsing
- Fix all template expressions to use this.plugin instead of plugin
- Add this. prefix to all method calls in event handlers
- Fix duplicate x-on:click attribute on uninstall button
- Add proper loading state management in loadPluginConfig method

This resolves the 'Invalid or unexpected token' and 'Uncaught ReferenceError'
errors in the browser console.

* fix(web): Fix plugin undefined errors in Alpine.js plugin configuration

- Change x-data initialization to capture plugin from loop scope first
- Use Object.assign in x-init to merge pluginConfigData properties
- Add safety check in pluginConfigData function for undefined plugins
- Ensure plugin is available before accessing properties in expressions

This resolves the 'Cannot read properties of undefined' errors by ensuring
the plugin object is properly captured from the x-for loop scope before
any template expressions try to access it.

* style(web): Make Quick Actions button text styling consistent

- Update Start Display, Stop Display, and Reboot System buttons
- Change from text-sm font-medium to text-base font-semibold
- All Quick Actions buttons now have consistent bold, larger text
- Matches the styling of Update Code, Restart Display Service, and Restart Web Service buttons

* fix(wifi): Properly handle AP mode disable during WiFi connection

- Check return value of disable_ap_mode() before proceeding with connection
- Add verification loop to ensure AP mode is actually disabled
- Increase wait time to 5 seconds for NetworkManager restart stabilization
- Return clear error messages if AP mode cannot be disabled
- Prevents connection failures when switching networks from web UI or AP mode

This fixes the issue where WiFi network switching would fail silently when
AP mode disable failed, leaving the system in an inconsistent state.

* fix(web): Handle API response errors in plugin configuration loading

- Add null/undefined checks before accessing API response status
- Set fallback defaults when API responses don't have status 'success'
- Add error handling for batch API requests with fallback to individual requests
- Add .catch() handlers to individual fetch calls to prevent unhandled rejections
- Add console warnings to help debug API response failures
- Fix applies to both main loadPluginConfig and PluginConfigHelpers.loadPluginConfig

This fixes the issue where plugin configuration sections would get stuck
showing the loading animation when API responses failed or returned error status.

* fix(web): Fix Alpine.js reactivity for plugin config by using direct x-data

Changed from Object.assign pattern to direct x-data assignment to ensure
Alpine.js properly tracks reactive properties. The previous approach used
Object.assign to merge properties into the component after initialization,
which caused Alpine to not detect changes to config/schema properties.

The fix uses pluginConfigData(plugin) directly as x-data, ensuring all
properties including config, schema, loading, etc. are reactive from
component initialization.

* fix(web): Ensure plugin variable is captured in x-data scope

Use spread operator to merge pluginConfigData properties while explicitly
capturing the plugin variable from outer x-for scope. This fixes undefined
plugin errors when Alpine evaluates the component data.

* fix(web): Use $data for Alpine.js reactivity when merging plugin config

Use Object.assign with Alpine's $data reactive proxy instead of this to
ensure added properties are properly reactive. This fixes the issue where
plugin variable scoping from x-for wasn't accessible in x-data expressions.

* fix(web): Remove incorrect 'this.' prefix in Alpine.js template expressions

Alpine.js template expressions (x-show, x-html, x-text, x-on) use the
component data as the implicit context, so 'this.' prefix is incorrect.
In template expressions, 'this' refers to the DOM element, not the
component data.

Changes:
- Replace 'this.plugin.' with 'plugin.' in all template expressions (19 instances)
- Replace 'this.loading' with 'loading' in x-show directives
- Replace 'this.generateConfigForm' with 'generateConfigForm' in x-show/x-html
- Replace 'this.savePluginConfig' with 'savePluginConfig' in x-on:submit
- Replace 'this.config/schema/webUiActions' with direct property access
- Use '$data.loadPluginConfig' in x-init for explicit method call

Note: 'this.' is still correct inside JavaScript method definitions within
pluginConfigData() function since those run with proper object context.

* fix(web): Prevent infinite recursion in plugin config methods

Add 'parent !== this' check to loadPluginConfig, generateConfigForm, and
savePluginConfig methods in pluginConfigData to prevent infinite recursion
when the component tries to delegate to a parent that resolves to itself.

This fixes the 'Maximum call stack size exceeded' error that occurred when
the nested Alpine component's $root reference resolved to a component that
had the same delegating methods via Object.assign.

* fix(web): Resolve infinite recursion in plugin config by calling $root directly

The previous implementation had delegating methods (generateConfigForm,
savePluginConfig) in pluginConfigData that tried to call parent.method(),
but the parent detection via getParentApp() was causing circular calls
because multiple components had the same methods.

Changes:
- Template now calls $root.generateConfigForm() and $root.savePluginConfig()
  directly instead of going through nested component delegation
- Removed delegating generateConfigForm and savePluginConfig from pluginConfigData
- Removed getParentApp() helper that was enabling the circular calls
- Simplified loadPluginConfig to use PluginConfigHelpers directly

This fixes the 'Maximum call stack size exceeded' error when rendering
plugin configuration forms.

* fix(web): Use window.PluginConfigHelpers instead of $root for plugin config

The $root magic variable in Alpine.js doesn't correctly reference the
app() component's data scope from nested x-data contexts. This causes
generateConfigForm and savePluginConfig to be undefined.

Changed to use window.PluginConfigHelpers which has explicit logic to
find and use the app component's methods.

* fix(web): Use direct x-data initialization for plugin config reactivity

Changed from Object.assign($data, pluginConfigData(plugin)) to
x-data="pluginConfigData(plugin)" to ensure Alpine.js properly
tracks reactivity for all plugin config properties. This fixes
the issue where all plugin tabs were showing the same config.

* refactor(web): Implement server-side plugin config rendering with HTMX

Major architectural improvement to plugin configuration management:

- Add server-side Jinja2 template for plugin config forms
  (web_interface/templates/v3/partials/plugin_config.html)
- Add Flask route to serve plugin config partials on-demand
- Replace complex client-side form generation with HTMX lazy loading
- Add Alpine.js store for centralized plugin state management
- Mark old pluginConfigData and PluginConfigHelpers as deprecated

Benefits:
- Lazy loading: configs only load when tab is accessed
- Server-side rendering: reduces client-side complexity
- Better performance: especially on Raspberry Pi
- Cleaner code: Jinja2 macros replace JS string templates
- More maintainable: form logic in one place (server)

The old client-side code is preserved for backwards compatibility
but is no longer used by the main plugin configuration UI.

* fix(web): Trigger HTMX manually after Alpine renders plugin tabs

HTMX processes attributes at page load time, before Alpine.js
renders dynamic content. Changed from :hx-get attribute to
x-init with htmx.ajax() to properly trigger the request after
the element is rendered.

* fix(web): Remove duplicate 'enabled' toggle from plugin config form

The 'enabled' field was appearing twice in plugin configuration:
1. Header toggle (quick action, uses HTMX)
2. Configuration form (from schema, requires save)

Now only the header toggle is shown, avoiding user confusion.
The 'enabled' key is explicitly skipped when rendering schema properties.

* perf(web): Optimize plugin manager with request caching and init guards

Major performance improvements to plugins_manager.js:

1. Request Deduplication & Caching
   - Added pluginLoadCache with 3-second TTL
   - Subsequent calls return cached data instead of making API requests
   - In-flight request deduplication prevents parallel duplicate fetches
   - Added refreshInstalledPlugins() for explicit force-refresh

2. Initialization Guards
   - Added pluginsInitialized flag to prevent multiple initializePlugins() calls
   - Added _eventDelegationSetup guard on container to prevent duplicate listeners
   - Added _listenerSetup guards on search/category inputs

3. Debug Logging Control
   - Added PLUGIN_DEBUG flag (localStorage.setItem('pluginDebug', 'true'))
   - Most console.log calls now use pluginLog() which only logs when debug enabled
   - Reduces console noise from ~150 logs to ~10 in production

Expected improvements:
- API calls reduced from 6+ to 2 on page load
- Event listeners no longer duplicated
- Cleaner console output
- Faster perceived performance

* fix(web): Handle missing search elements in searchPluginStore

The searchPluginStore function was failing silently when called before
the plugin-search and plugin-category elements existed in the DOM.
This caused the plugin store to never load.

Now safely checks if elements exist before accessing their values.

* fix(web): Ensure plugin store loads via pluginManager.searchPluginStore

- Exposed searchPluginStore on window.pluginManager for easier access
- Updated base.html to fallback to pluginManager.searchPluginStore
- Added logging when loading plugin store

* fix(web): Expose searchPluginStore from inside the IIFE

The function was defined inside the IIFE but only exposed after the IIFE
ended, where the function was out of scope. Now exposed immediately after
definition inside the IIFE.

* fix(web): Add cache-busting version to plugins_manager.js URL

Static JS files were being aggressively cached, preventing updates
from being loaded by browsers.

* fix(web): Fix pluginLog reference error outside IIFE

pluginLog is defined inside the IIFE, so use _PLUGIN_DEBUG_EARLY and
console.log directly for code outside the IIFE.

* chore(web): Update plugins_manager.js cache version

* fix(web): Defer plugin store render when grid not ready

Instead of showing an error when plugin-store-grid doesn't exist,
store plugins in window.__pendingStorePlugins for later rendering
when the tab loads (consistent with how installed plugins work).

* chore: Bump JS cache version

* fix(web): Restore enabledBool variable in plugin render

Variable was removed during debug logging optimization but was still
being used in the template string for toggle switch rendering.

* fix(ui): Add header and improve categories section rendering

- Add proper header (h4) to categories section with label
- Add debug logging to diagnose categories field rendering
- Improve additionalProperties condition check readability

* fix(ui): Improve additionalProperties condition check

- Explicitly exclude objects with properties to avoid conflicts
- Ensure categories section is properly detected and rendered
- Categories should show as header with toggles, not text box

* fix(web-ui): Fix JSON parsing errors and default value loading for plugin configs

- Fix JSON parsing errors when saving file upload fields by properly unescaping HTML entities
- Merge config with schema defaults when loading plugin config so form shows default values
- Improve default value handling in form generation for nested objects and arrays
- Add better error handling for malformed JSON in file upload fields

* fix(plugins): Return plugins array from getInstalledPlugins() instead of data object

Fixed PluginAPI.getInstalledPlugins() to return response.data.plugins (array)
instead of response.data (object). This was preventing window.installedPlugins
from being set correctly, which caused plugin configuration tabs to not appear
and prevented users from saving plugin configurations via the web UI.

The fix ensures that:
- window.installedPlugins is properly populated with plugin array
- Plugin tabs are created automatically on page load
- Configuration forms and save buttons are rendered correctly
- Save functionality works as expected

* fix(api): Support form data submission for plugin config saves

The HTMX form submissions use application/x-www-form-urlencoded format
instead of JSON. This update allows the /api/v3/plugins/config POST
endpoint to accept both formats:

- JSON: plugin_id and config in request body (existing behavior)
- Form data: plugin_id from query string, config fields from form

Added _parse_form_value helper to properly convert form strings to
appropriate Python types (bool, int, float, JSON arrays/objects).

* debug: Add form data logging to diagnose config save issue

* fix(web): Re-discover plugins before loading config partial

The plugin config partial was returning 'not found' for plugins
because the plugin manifests weren't loaded. The installed plugins
API was working because it calls discover_plugins() first.

Changes:
- Add discover_plugins() call in _load_plugin_config_partial when
  plugin info is not found on first try
- Remove debug logging from form data handling

* fix(web): Comprehensive plugin config save improvements

SWEEPING FIX for plugin configuration saving issues:

1. Form data now MERGES with existing config instead of replacing
   - Partial form submissions (missing fields) no longer wipe out
     existing config values
   - Fixes plugins with complex schemas (football, clock, etc.)

2. Improved nested value handling with _set_nested_value helper
   - Correctly handles deeply nested structures like customization
   - Properly merges when intermediate objects already exist

3. Better JSON parsing for arrays
   - RGB color arrays like [255, 0, 0] now parse correctly
   - Parse JSON before trying number conversion

4. Bump cache version to force JS reload

* fix(web): Add early stubs for updatePlugin and uninstallPlugin

Ensures these functions are available immediately when the page loads,
even before the full IIFE executes. Provides immediate user feedback
and makes API calls directly.

This fixes the 'Update button does not work' issue by ensuring the
function is always defined and callable.

* fix(web): Support form data in toggle endpoint

The toggle endpoint now accepts both JSON and HTMX form submissions.
Also updated the plugin config template to send the enabled state
via hx-vals when the checkbox changes.

Fixes: 415 Unsupported Media Type error when toggling plugins

* fix(web): Prevent config duplication when toggling plugins

Changed handleToggleResponse to update UI in place instead of
refreshing the entire config partial, which was causing duplication.

Also improved refreshPluginConfig with proper container targeting
and concurrent refresh prevention (though it's no longer needed
for toggles since we update in place).

* fix(api): Schema-aware form value parsing for plugin configs

Major fix for plugin config saving issues:

1. Load schema BEFORE processing form data to enable type-aware parsing
2. New _parse_form_value_with_schema() function that:
   - Converts comma-separated strings to arrays when schema says 'array'
   - Parses JSON strings for arrays/objects
   - Handles empty strings for arrays (returns [] instead of None)
   - Uses schema to determine correct number types
3. Post-processing to ensure None arrays get converted to empty arrays
4. Proper handling of nested object fields

Fixes validation errors:
- 'category_order': Expected type array, got str
- 'categories': Expected type object, got str
- 'uploaded_files': Expected type array, got NoneType
- RGB color arrays: Expected type array, got str

* fix(web): Make plugin config handlers idempotent and remove scripts from HTMX partials

CRITICAL FIX for script redeclaration errors:

1. Removed all <script> tags from plugin_config.html partial
   - Scripts were being re-executed on every HTMX swap
   - Caused 'Identifier already declared' errors

2. Moved all handler functions to base.html with idempotent initialization
   - Added window.__pluginConfigHandlersInitialized guard
   - Functions only initialized once, even if script runs multiple times
   - All state stored on window object (e.g., window.pluginConfigRefreshInProgress)

3. Enhanced error logging:
   - Client-side: Logs form payload, response status, and parsed error details
   - Server-side: Logs raw form data and parsed config on validation failures

4. Functions moved to window scope:
   - toggleSection
   - handleConfigSave (with detailed error logging)
   - handleToggleResponse (updates UI in place, no refresh)
   - handlePluginUpdate
   - refreshPluginConfig (with duplicate prevention)
   - runPluginOnDemand
   - stopOnDemand
   - executePluginAction

This ensures HTMX-swapped fragments only contain HTML, and all
scripts run once in the base layout.

* fix(api): Filter config to only schema-defined fields before validation

When merging with existing_config, fields not in the plugin's schema
(like high_performance_transitions, transition, dynamic_duration)
were being preserved, causing validation failures when
additionalProperties is false.

Add _filter_config_by_schema() function to recursively filter config
to only include fields defined in the schema before validation.

This fixes validation errors like:
- 'Additional properties are not allowed (high_performance_transitions, transition were unexpected)'

* fix(web): Improve update plugin error handling and support form data

1. Enhanced updatePlugin JavaScript function:
   - Validates pluginId before sending request
   - Checks response.ok before parsing JSON
   - Better error logging with request/response details
   - Handles both successful and error responses properly

2. Update endpoint now supports both JSON and form data:
   - Similar to config endpoint, accepts plugin_id from query string or form
   - Better error messages and debug logging

3. Prevent duplicate function definitions:
   - Second updatePlugin definition checks if improved version exists
   - Both definitions now have consistent error handling

Fixes: 400 BAD REQUEST 'Request body must be valid JSON' error

* fix(web): Show correct 'update' message instead of 'save' for plugin updates

The handlePluginUpdate function now:
1. Checks actual HTTP status code (not just event.detail.successful)
2. Parses JSON response to get server's actual message
3. Replaces 'save' with 'update' if message incorrectly says 'save'

Fixes: Update button showing 'saved successfully' instead of
'updated successfully'

* fix(web): Execute plugin updates immediately instead of queuing

Plugin updates are now executed directly (synchronously) instead of
being queued for async processing. This provides immediate feedback
to users about whether the update succeeded or failed.

Updates are fast git pull operations, so they don't need async
processing. The operation queue is reserved for longer operations
like install/uninstall.

Fixes: Update button not actually updating plugins (operations were
queued but users didn't see results)

* fix(web): Ensure toggleSection function is always available for collapsible headers

Moved toggleSection outside the initialization guard block so it's
always defined, even if the plugin config handlers have already been
initialized. This ensures collapsible sections in plugin config forms
work correctly.

Added debug logging to help diagnose if sections/icons aren't found.

Fixes: Collapsible headers in plugin config schema not collapsing

* fix(web): Improve toggleSection to explicitly show/hide collapsible content

Changed from classList.toggle() to explicit add/remove of 'hidden' class
based on current state. This ensures the content visibility is properly
controlled when collapsing/expanding sections.

Added better error checking and state detection for more reliable
collapsible section behavior.

* fix(web): Load plugin tabs on page load instead of waiting for plugin manager tab click

The stub's loadInstalledPlugins was an empty function, so plugin tabs
weren't loading until the plugin manager tab was clicked. Now the stub
implementation:
1. Tries to use global window.loadInstalledPlugins if available
2. Falls back to window.pluginManager.loadInstalledPlugins
3. Finally falls back to direct loading via loadInstalledPluginsDirectly
4. Always updates tabs after loading plugins

This ensures plugin navigation tabs are available immediately on page load.

Fixes: Plugin tabs only loading after clicking plugin manager tab

* fix(web): Ensure plugin navigation tabs load on any page regardless of active tab

Multiple improvements to ensure plugin tabs are always visible:

1. Stub's loadInstalledPluginsDirectly now waits for DOM to be ready
   before updating tabs, using requestAnimationFrame for proper timing

2. Stub's init() now has a retry mechanism that periodically checks
   if plugins have been loaded by plugins_manager.js and updates tabs
   accordingly (checks for 2 seconds)

3. Full implementation's init() now properly handles async plugin loading
   and ensures tabs are updated after loading completes, checking
   window.installedPlugins first before attempting to load

4. Both stub and full implementation ensure tabs update using $nextTick
   to wait for Alpine.js rendering cycle

This ensures plugin navigation tabs are visible immediately when the
page loads, regardless of whether the user is on overview, plugin manager,
or any other tab.

Fixes: Plugin tabs only appearing after clicking plugin manager tab

* fix(web): Fix restart display button not working

The initPluginsPage function was returning early before event listeners
were set up, making all the event listener code unreachable. Moved the
return statement to after all event listeners are attached.

This fixes the restart display button and all other buttons in the
plugin manager (refresh plugins, update all, search, etc.) that depend
on event listeners being set up.

Fixes: Restart Display button not working in plugin manager

* fix(web-ui): Improve categories field rendering for of-the-day plugin

- Add more explicit condition checking for additionalProperties objects
- Add debug logging specifically for categories field
- Add fallback handler for objects that don't match special cases (render as JSON textarea)
- Ensure categories section displays correctly with toggle cards instead of plain text

* fix(install): Prevent following broken symlinks during file ownership setup

- Add -P flag to find commands to prevent following symlinks when traversing
- Add -h flag to chown to operate on symlinks themselves rather than targets
- Exclude scripts/dev/plugins directory which contains development symlinks
- Fixes error when chown tries to dereference broken symlinks with extra LEDMatrix in path

* fix(scroll): Ensure scroll completes fully before switching displays

- Add display_width to total scroll distance calculation
- Scroll now continues until content is completely off screen
- Update scroll completion check to use total_scroll_width + display_width
- Prevents scroll from being cut off mid-way when switching to next display

* fix(install): Remove unsupported -P flag from find commands

- Remove -P flag which is not supported on all find versions
- Keep -h flag on chown to operate on symlinks themselves
- Change to {} \; syntax for better error handling
- Add error suppression to continue on broken symlinks
- Exclude scripts/dev/plugins directory to prevent traversal into broken symlinks

* docs(wifi): Add trailing newline to WiFi AP failover setup guide

* fix(web): Suppress non-critical socket errors and fix WiFi permissions script

- Add error filtering in web interface to suppress harmless client disconnection errors
- Downgrade 'No route to host' and broken pipe errors from ERROR to DEBUG level
- Fix WiFi permissions script to use mktemp instead of manual temp file creation
- Add cleanup trap to ensure temp files are removed on script exit
- Resolves permission denied errors when creating temp files during installation

* fix(web): Ensure plugin navigation tabs load on any page by dispatching events

The issue was that when plugins_manager.js loaded and called
loadInstalledPlugins(), it would set window.installedPlugins but the
Alpine.js component wouldn't know to update its tabs unless the plugin
manager tab was clicked.

Changes:
1. loadInstalledPlugins() now always dispatches a 'pluginsUpdated' event
   when it sets window.installedPlugins, not just when plugin IDs change
2. renderInstalledPlugins() also dispatches the event and always updates
   window.installedPlugins for reactivity
3. Cached plugin data also dispatches the event when returned

The Alpine component already listens for the 'pluginsUpdated' event in
its init() method, so tabs will now update immediately when plugins are
loaded, regardless of which tab is active.

Fixes: Plugin navigation tabs only loading after clicking plugin manager tab

* fix(web): Improve input field contrast in plugin configuration forms

Changed input backgrounds from bg-gray-800 to bg-gray-900 (darker) to
ensure high contrast with white text. Added placeholder:text-gray-400
for better placeholder text visibility.

Updated in both server-side template (plugin_config.html) and client-side
form generation (plugins_manager.js):
- Number inputs
- Text inputs
- Array inputs (comma-separated)
- Select dropdowns
- Textareas (JSON objects)
- Fallback inputs without schema

This ensures all form inputs have high contrast white text on dark
background, making them clearly visible and readable.

Fixes: White text on white background in plugin config inputs

* fix(web): Change plugin config input text from white to black

Changed all input fields in plugin configuration forms to use black text
on white background instead of white text on dark background for better
readability and standard form appearance.

Updated:
- Input backgrounds: bg-gray-900 -> bg-white
- Text color: text-white -> text-black
- Placeholder color: text-gray-400 -> text-gray-500

Applied to both server-side template and client-side form generation
for all input types (number, text, select, textarea).

* fix(web): Ensure toggleSection function is available for plugin config collapsible sections

Moved toggleSection function definition to an early script block so it's
available immediately when HTMX loads plugin configuration content. The
function was previously defined later in the page which could cause it
to not be accessible when inline onclick handlers try to call it.

The function toggles the 'hidden' class on collapsible section content
divs and rotates the chevron icon between right (collapsed) and down
(expanded) states.

Fixes: Plugin configuration section headers not collapsing/expanding

* fix(web): Fix collapsible section toggle to properly hide/show content

Updated toggleSection function to explicitly set display style in addition
to toggling the hidden class. This ensures the content is properly hidden
even if CSS specificity or other styles might interfere with just the
hidden class.

The function now:
- Checks both the hidden class and computed display style
- Explicitly sets display: '' when showing and display: 'none' when hiding
- Rotates chevron icon between right (collapsed) and down (expanded)

This ensures collapsible sections in plugin configuration forms properly
hide and show their content when the header is clicked.

Fixes: Collapsible section headers rotate chevron but don't hide content

* fix(web): Fix collapsible section toggle to work on first click

Simplified the toggle logic to rely primarily on the 'hidden' class check
rather than mixing it with computed display styles. When hiding, we now
remove any inline display style to let Tailwind's 'hidden' class properly
control the display property.

This ensures sections respond correctly on the first click, whether they're
starting in a collapsed or expanded state.

Fixes: Sections requiring 2 clicks to collapse

* fix(web): Ensure collapsible sections start collapsed by default

Added explicit display: none style to nested content divs in plugin config
template to ensure they start collapsed. The hidden class should handle this,
but adding the inline style ensures sections are definitely collapsed on
initial page load.

Sections now:
- Start collapsed (hidden) with chevron pointing right
- Expand when clicked (chevron points down)
- Collapse when clicked again (chevron points right)

This ensures a consistent collapsed initial state across all plugin
configuration sections.

* fix(web): Fix collapsible section toggle to properly collapse on second click

Fixed the toggle logic to explicitly set display: block when showing and
display: none when hiding, rather than clearing the display style. This
ensures the section state is properly tracked and the toggle works correctly
on both expand and collapse clicks.

The function now:
- When hidden: removes hidden class, sets display: block, chevron down
- When visible: adds hidden class, sets display: none, chevron right

This fixes the issue where sections would expand but not collapse again.

Fixes: Sections not collapsing on second click

* feat(web): Ensure plugin navigation tabs load automatically on any page

Implemented comprehensive solution to ensure plugin navigation tabs load
automatically without requiring a visit to the plugin manager page:

1. Global event listener for 'pluginsUpdated' - works even if Alpine isn't
   ready yet, updates tabs directly when plugins_manager.js loads plugins

2. Enhanced stub's loadInstalledPluginsDirectly():
   - Sets window.installedPlugins after loading
   - Dispatches 'pluginsUpdated' event for global listener
   - Adds console logging for debugging

3. Event listener in stub's init() method:
   - Listens for 'pluginsUpdated' events
   - Updates component state and tabs when events fire

4. Fallback timer:
   - If plugins_manager.js hasn't loaded after 2 seconds, fetches
     plugins directly via API
   - Ensures tabs appear even if plugins_manager.js fails

5. Improved checkAndUpdateTabs():
   - Better logging
   - Fallback to direct fetch after timeout

6. Enhanced logging throughout plugin loading flow for debugging

This ensures plugin tabs are visible immediately on page load, regardless
of which tab is active or when plugins_manager.js loads.

Fixes: Plugin navigation tabs only loading after visiting plugin manager

* fix(web): Improve plugin tabs update logging and ensure immediate execution

Enhanced logging in updatePluginTabs() and _doUpdatePluginTabs() to help
debug why tabs aren't appearing. Changed debounce behavior to execute
immediately on first call to ensure tabs appear quickly.

Added detailed console logging with [FULL] prefix to track:
- When updatePluginTabs() is called
- When _doUpdatePluginTabs() executes
- DOM element availability
- Tab creation process
- Final tab count

This will help identify if tabs are being created but not visible, or if
the update function isn't being called at all.

Fixes: Plugin tabs loading but not visible in navigation bar

* fix(web): Prevent duplicate plugin tab updates and clearing

Added debouncing and duplicate prevention to stub's updatePluginTabs() to
prevent tabs from being cleared and re-added multiple times. Also checks
if tabs already match before clearing them.

Changes:
1. Debounce stub's updatePluginTabs() with 100ms delay
2. Check if existing tabs match current plugin list before clearing
3. Global event listener only triggers full implementation's updatePluginTabs
4. Stub's event listener only works in stub mode (before enhancement)

This prevents the issue where tabs were being cleared and re-added
multiple times in rapid succession, which could leave tabs empty.

Fixes: Plugin tabs being cleared and not re-added properly

* fix(web): Fix plugin tabs not rendering when plugins are loaded

Fixed _doUpdatePluginTabs() to properly use component's installedPlugins
instead of checking window.installedPlugins first. Also fixed the 'unchanged'
check to not skip when both lists are empty (first load scenario).

Changes:
1. Check component's installedPlugins first (most up-to-date)
2. Only skip update if plugins exist AND match (don't skip empty lists)
3. Retry if no plugins found (in case they're still loading)
4. Ensure window.installedPlugins is set when loading directly
5. Better logging to show which plugin source is being used

This ensures tabs are rendered when plugins are loaded, even on first page load.

Fixes: Plugin tabs not being drawn despite plugins being loaded

* fix(config): Fix array field parsing and validation for plugin config forms

- Added logic to detect and combine indexed array fields (text_color.0, text_color.1, etc.)
- Fixed array fields incorrectly stored as dicts with numeric keys
- Improved handling of comma-separated array values from form submissions
- Ensures array fields meet minItems requirements before validation
- Resolves 400 BAD REQUEST errors when saving plugin config with RGB color arrays

* fix(config): Improve array field handling and secrets error handling

- Use schema defaults when array fields don't meet minItems requirement
- Add debug logging for array field parsing
- Improve error handling for secrets file writes
- Fix arrays stored as dicts with numeric keys conversion
- Better handling of incomplete array values from form submissions

* fix(config): Convert array elements to correct types (numbers not strings)

- Fix array element type conversion when converting dicts to arrays
- Ensure RGB color arrays have integer elements, not strings
- Apply type conversion for both nested and top-level array fields
- Fixes validation errors: 'Expected type number, got str'

* fix(config): Fix array fields showing 'none' when value is null

- Handle None/null values in array field templates properly
- Use schema defaults when array values are None/null
- Fix applies to both Jinja2 template and JavaScript form generation
- Resolves issue where stock ticker plugin shows 'none' instead of default values

* fix(config): Add novalidate to plugin config form to prevent HTML5 validation blocking saves

- Prevents browser HTML5 validation from blocking form submission
- Allows custom validation logic to handle form data properly
- Fixes issue where save button appears unclickable due to invalid form controls
- Resolves problems with plugins like clock-simple that have nested/array fields

* feat(config): Add helpful form validation with detailed error messages

- Keep HTML5 validation enabled (removed novalidate) to prevent broken configs
- Add validatePluginConfigForm function that shows which fields fail and why
- Automatically expands collapsed sections containing invalid fields
- Focuses first invalid field and scrolls to it
- Shows user-friendly error messages with field names and specific issues
- Prevents form submission until all fields are valid

* fix(schema): Remove core properties from required array during validation

- Core properties (enabled, display_duration, live_priority) are system-managed
- SchemaManager now removes them from required array after injection
- Added default values for core properties (enabled=True, display_duration=15, live_priority=False)
- Updated generate_default_config() to ensure live_priority has default
- Resolves 186 validation issues, reducing to 3 non-blocking warnings (98.4% reduction)
- All 19 of 20 plugins now pass validation without errors

Documentation:
- Created docs/PLUGIN_CONFIG_CORE_PROPERTIES.md explaining core property handling
- Updated existing docs to reflect core property behavior
- Removed temporary audit files and scripts

* fix(ui): Improve button text contrast on white backgrounds

- Changed Screenshot button text from text-gray-700 to text-gray-900
- Added global CSS rule to ensure all buttons with white backgrounds use dark text (text-gray-900) for better readability
- Fixes contrast issues where light text on light backgrounds was illegible

* fix(ui): Add explicit text color to form-control inputs

- Added color: #111827 to .form-control class to ensure dark text on white backgrounds
- Fixes issue where input fields had white text on white background after button contrast fix
- Ensures all form inputs are readable with proper contrast

* docs: Update impact explanation and plugin config documentation

* docs: Improve documentation and fix template inconsistencies

- Add migration guide for script path reorganization (scripts moved to scripts/install/ and scripts/fix_perms/)
- Add breaking changes section to README with migration guidance
- Fix config template: set plugins_directory to 'plugins' to match actual plugin locations
- Fix test template: replace Jinja2 placeholders with plain text to match other templates
- Fix markdown linting: add language identifiers to code blocks (python, text, javascript)
- Update permission guide: document setgid bit (0o2775) for directory modes
- Fix example JSON: pin dependency versions and fix compatible_versions range
- Improve readability: reduce repetition in IMPACT_EXPLANATION.md

* feat(web): Make v3 interface production-ready for local deployment

- Phase 2: Real Service Integration
  - Replace sample data with real psutil system monitoring (CPU, memory, disk, temp, uptime)
  - Integrate display controller to read from /tmp/led_matrix_preview.png snapshot
  - Scan assets/fonts directory and extract font metadata with freetype

- Phase 1: Security & Input Validation
  - Add input validation module with URL, file upload, and config sanitization
  - Add optional CSRF protection (gracefully degrades if flask-wtf missing)
  - Add rate limiting (lenient for local use, prevents accidental abuse)
  - Add file upload validation to font upload endpoint

- Phase 3: Error Handling
  - Add global error handlers for 404, 500, and unhandled exceptions
  - All endpoints have comprehensive try/except blocks

- Phase 4: Monitoring & Observability
  - Add structured logging with JSON format support
  - Add request logging middleware (tracks method, path, status, duration, IP)
  - Add /api/v3/health endpoint with service status checks

- Phase 5: Performance & Caching
  - Add in-memory caching system (separate module to avoid circular imports)
  - Cache font catalog (5 minute TTL)
  - Cache system status (10 second TTL)
  - Invalidate cache on config changes

- All changes are non-blocking with graceful error handling
- Optional dependencies (flask-wtf, flask-limiter) degrade gracefully
- All imports protected with try/except blocks
- Verified compilation and import tests pass

* docs: Fix caching pattern logic flaw and merge conflict resolution plan

- Fix Basic Caching Pattern: Replace broken stale cache fallback with correct pattern
  - Re-fetch cache with large max_age (31536000) in except block instead of checking already-falsy cached variable
  - Fixes both instances in ADVANCED_PLUGIN_DEVELOPMENT.md
  - Matches correct pattern from manager.py.template

- Fix MERGE_CONFLICT_RESOLUTION_PLAN.md merge direction
  - Correct Step 1 to checkout main and merge plugins into it (not vice versa)
  - Update commit message to reflect 'Merge plugins into main' direction
  - Fixes workflow to match documented plugins → main merge

---------

Co-authored-by: Chuck <chuck@example.com>

web_interface/README.md

@@ -0,0 +1,118 @@
+# LED Matrix Web Interface V3
+
+Modern, production web interface for controlling the LED Matrix display.
+
+## Overview
+
+This directory contains the active V3 web interface with the following features:
+- Real-time display preview via Server-Sent Events (SSE)
+- Plugin management and configuration
+- System monitoring and logs
+- Modern, responsive UI
+- RESTful API
+
+## Directory Structure
+
+```
+web_interface/
+├── app.py                    # Main Flask application
+├── start.py                  # Startup script
+├── run.sh                    # Shell runner script
+├── requirements.txt          # Python dependencies
+├── blueprints/               # Flask blueprints
+│   ├── api_v3.py            # API endpoints
+│   └── pages_v3.py          # Page routes
+├── templates/                # HTML templates
+│   └── v3/
+│       ├── base.html
+│       ├── index.html
+│       └── partials/
+└── static/                   # CSS/JS assets
+    └── v3/
+        ├── app.css
+        └── app.js
+```
+
+## Running the Web Interface
+
+### Standalone (Development)
+
+From the project root:
+```bash
+python3 web_interface/start.py
+```
+
+Or using the shell script:
+```bash
+./web_interface/run.sh
+```
+
+### As a Service (Production)
+
+The web interface can run as a systemd service that starts automatically based on the `web_display_autostart` configuration setting:
+
+```bash
+sudo systemctl start ledmatrix-web
+sudo systemctl enable ledmatrix-web  # Start on boot
+```
+
+## Accessing the Interface
+
+Once running, access the web interface at:
+- Local: http://localhost:5000
+- Network: http://<raspberry-pi-ip>:5000
+
+## Configuration
+
+The web interface reads configuration from:
+- `config/config.json` - Main configuration
+- `config/secrets.json` - API keys and secrets
+
+## API Documentation
+
+The V3 API is available at `/api/v3/` with the following endpoints:
+
+### Configuration
+- `GET /api/v3/config/main` - Get main configuration
+- `POST /api/v3/config/main` - Save main configuration
+- `GET /api/v3/config/secrets` - Get secrets configuration
+- `POST /api/v3/config/secrets` - Save secrets configuration
+
+### Display Control
+- `POST /api/v3/display/start` - Start display service
+- `POST /api/v3/display/stop` - Stop display service
+- `POST /api/v3/display/restart` - Restart display service
+- `GET /api/v3/display/status` - Get display service status
+
+### Plugins
+- `GET /api/v3/plugins` - List installed plugins
+- `GET /api/v3/plugins/<id>` - Get plugin details
+- `POST /api/v3/plugins/<id>/config` - Update plugin configuration
+- `GET /api/v3/plugins/<id>/enable` - Enable plugin
+- `GET /api/v3/plugins/<id>/disable` - Disable plugin
+
+### Plugin Store
+- `GET /api/v3/store/plugins` - List available plugins
+- `POST /api/v3/store/install/<id>` - Install plugin
+- `POST /api/v3/store/uninstall/<id>` - Uninstall plugin
+- `POST /api/v3/store/update/<id>` - Update plugin
+
+### Real-time Streams (SSE)
+- `GET /api/v3/stream/stats` - System statistics stream
+- `GET /api/v3/stream/display` - Display preview stream
+- `GET /api/v3/stream/logs` - Service logs stream
+
+## Development
+
+When making changes to the web interface:
+
+1. Edit files in this directory
+2. Test changes by running `python3 web_interface/start.py`
+3. Restart the service if running: `sudo systemctl restart ledmatrix-web`
+
+## Notes
+
+- Templates and static files use the `v3/` prefix to allow for future versions
+- The interface uses Flask blueprints for modular organization
+- SSE streams provide real-time updates without polling
+

web_interface/__init__.py

@@ -0,0 +1,6 @@
+"""
+LED Matrix Web Interface V3
+Modern web interface for controlling the LED Matrix display
+"""
+__version__ = "3.0.0"
+

web_interface/app.py

@@ -0,0 +1,593 @@
+from flask import Flask, Blueprint, render_template, request, redirect, url_for, flash, jsonify, Response
+import json
+import os
+import sys
+import subprocess
+import time
+from pathlib import Path
+from datetime import datetime, timedelta
+
+# Add parent directory to path for imports
+sys.path.insert(0, str(Path(__file__).parent.parent))
+
+from src.config_manager import ConfigManager
+from src.plugin_system.plugin_manager import PluginManager
+from src.plugin_system.store_manager import PluginStoreManager
+from src.plugin_system.saved_repositories import SavedRepositoriesManager
+from src.plugin_system.schema_manager import SchemaManager
+from src.plugin_system.operation_queue import PluginOperationQueue
+from src.plugin_system.state_manager import PluginStateManager
+from src.plugin_system.operation_history import OperationHistory
+from src.plugin_system.health_monitor import PluginHealthMonitor
+from src.wifi_manager import WiFiManager
+
+# Create Flask app
+app = Flask(__name__)
+app.secret_key = os.urandom(24)
+config_manager = ConfigManager()
+
+# Initialize CSRF protection (optional for local-only, but recommended for defense-in-depth)
+try:
+    from flask_wtf.csrf import CSRFProtect
+    csrf = CSRFProtect(app)
+    # Exempt SSE streams from CSRF (read-only)
+    from functools import wraps
+    from flask import request
+    
+    def csrf_exempt(f):
+        """Decorator to exempt a route from CSRF protection."""
+        f.csrf_exempt = True
+        return f
+    
+    # Mark SSE streams as exempt
+    @app.before_request
+    def check_csrf_exempt():
+        """Check if route should be exempt from CSRF."""
+        if request.endpoint and 'stream' in request.endpoint:
+            # SSE streams are read-only, exempt from CSRF
+            pass
+except ImportError:
+    # flask-wtf not installed, CSRF protection disabled
+    csrf = None
+    pass
+
+# Initialize rate limiting (prevent accidental abuse, not security)
+try:
+    from flask_limiter import Limiter
+    from flask_limiter.util import get_remote_address
+    
+    limiter = Limiter(
+        app=app,
+        key_func=get_remote_address,
+        default_limits=["1000 per minute"],  # Generous limit for local use
+        storage_uri="memory://"  # In-memory storage for simplicity
+    )
+except ImportError:
+    # flask-limiter not installed, rate limiting disabled
+    limiter = None
+    pass
+
+# Import cache functions from separate module to avoid circular imports
+from web_interface.cache import get_cached, set_cached, invalidate_cache
+
+# Initialize plugin managers - read plugins directory from config
+config = config_manager.load_config()
+plugin_system_config = config.get('plugin_system', {})
+plugins_dir_name = plugin_system_config.get('plugins_directory', 'plugin-repos')
+
+# Resolve plugin directory - handle both absolute and relative paths
+if os.path.isabs(plugins_dir_name):
+    plugins_dir = Path(plugins_dir_name)
+else:
+    # If relative, resolve relative to the project root (LEDMatrix directory)
+    project_root = Path(__file__).parent.parent
+    plugins_dir = project_root / plugins_dir_name
+
+plugin_manager = PluginManager(
+    plugins_dir=str(plugins_dir),
+    config_manager=config_manager,
+    display_manager=None,  # Not needed for web interface
+    cache_manager=None     # Not needed for web interface
+)
+plugin_store_manager = PluginStoreManager(plugins_dir=str(plugins_dir))
+saved_repositories_manager = SavedRepositoriesManager()
+
+# Initialize schema manager
+schema_manager = SchemaManager(
+    plugins_dir=plugins_dir,
+    project_root=project_root,
+    logger=None
+)
+
+# Initialize operation queue for plugin operations
+# Use lazy_load=True to defer file loading until first use (improves startup time)
+operation_queue = PluginOperationQueue(
+    history_file=str(project_root / "data" / "plugin_operations.json"),
+    max_history=500,
+    lazy_load=True
+)
+
+# Initialize plugin state manager
+# Use lazy_load=True to defer file loading until first use (improves startup time)
+plugin_state_manager = PluginStateManager(
+    state_file=str(project_root / "data" / "plugin_state.json"),
+    auto_save=True,
+    lazy_load=True
+)
+
+# Initialize operation history
+# Use lazy_load=True to defer file loading until first use (improves startup time)
+operation_history = OperationHistory(
+    history_file=str(project_root / "data" / "operation_history.json"),
+    max_records=1000,
+    lazy_load=True
+)
+
+# Initialize health monitoring (if health tracker is available)
+# Deferred until first request to improve startup time
+health_monitor = None
+_health_monitor_initialized = False
+
+# Plugin discovery is deferred until first API request that needs it
+# This improves startup time - endpoints will call discover_plugins() when needed
+
+# Register blueprints
+from web_interface.blueprints.pages_v3 import pages_v3
+from web_interface.blueprints.api_v3 import api_v3
+
+# Initialize managers in blueprints
+pages_v3.config_manager = config_manager
+pages_v3.plugin_manager = plugin_manager
+pages_v3.plugin_store_manager = plugin_store_manager
+pages_v3.saved_repositories_manager = saved_repositories_manager
+
+api_v3.config_manager = config_manager
+api_v3.plugin_manager = plugin_manager
+api_v3.plugin_store_manager = plugin_store_manager
+api_v3.saved_repositories_manager = saved_repositories_manager
+api_v3.schema_manager = schema_manager
+api_v3.operation_queue = operation_queue
+api_v3.plugin_state_manager = plugin_state_manager
+api_v3.operation_history = operation_history
+api_v3.health_monitor = health_monitor
+# Initialize cache manager for API endpoints
+from src.cache_manager import CacheManager
+api_v3.cache_manager = CacheManager()
+
+app.register_blueprint(pages_v3, url_prefix='/v3')
+app.register_blueprint(api_v3, url_prefix='/api/v3')
+
+# Helper function to check if AP mode is active
+def is_ap_mode_active():
+    """
+    Check if access point mode is currently active.
+    
+    Returns:
+        bool: True if AP mode is active, False otherwise.
+              Returns False on error to avoid breaking normal operation.
+    """
+    try:
+        wifi_manager = WiFiManager()
+        return wifi_manager._is_ap_mode_active()
+    except Exception as e:
+        # Log error but don't break normal operation
+        # Default to False so normal web interface works even if check fails
+        print(f"Warning: Could not check AP mode status: {e}")
+        return False
+
+# Captive portal detection endpoints
+# These help devices detect that a captive portal is active
+@app.route('/hotspot-detect.html')
+def hotspot_detect():
+    """iOS/macOS captive portal detection endpoint"""
+    # Return simple HTML that redirects to setup page
+    return '<HTML><HEAD><TITLE>Success</TITLE></HEAD><BODY>Success</BODY></HTML>', 200
+
+@app.route('/generate_204')
+def generate_204():
+    """Android captive portal detection endpoint"""
+    # Return 204 No Content - Android checks for this
+    return '', 204
+
+@app.route('/connecttest.txt')
+def connecttest_txt():
+    """Windows captive portal detection endpoint"""
+    # Return simple text response
+    return 'Microsoft Connect Test', 200
+
+@app.route('/success.txt')
+def success_txt():
+    """Firefox captive portal detection endpoint"""
+    # Return simple text response
+    return 'success', 200
+
+# Initialize logging
+try:
+    from web_interface.logging_config import setup_web_interface_logging, log_api_request
+    # Use JSON logging in production, readable logs in development
+    use_json_logging = os.environ.get('LEDMATRIX_JSON_LOGGING', 'false').lower() == 'true'
+    setup_web_interface_logging(level='INFO', use_json=use_json_logging)
+except ImportError:
+    # Logging config not available, use default
+    log_api_request = None
+    pass
+
+# Request timing and logging middleware
+@app.before_request
+def before_request():
+    """Track request start time for logging."""
+    from flask import request
+    request.start_time = time.time()
+
+@app.after_request
+def after_request_logging(response):
+    """Log API requests after response."""
+    if log_api_request:
+        try:
+            from flask import request
+            duration_ms = (time.time() - getattr(request, 'start_time', time.time())) * 1000
+            ip_address = request.remote_addr if hasattr(request, 'remote_addr') else None
+            log_api_request(
+                method=request.method,
+                path=request.path,
+                status_code=response.status_code,
+                duration_ms=duration_ms,
+                ip_address=ip_address
+            )
+        except Exception:
+            pass  # Don't break response if logging fails
+    return response
+
+# Global error handlers
+@app.errorhandler(404)
+def not_found_error(error):
+    """Handle 404 errors."""
+    return jsonify({
+        'status': 'error',
+        'error_code': 'NOT_FOUND',
+        'message': 'Resource not found',
+        'path': request.path
+    }), 404
+
+@app.errorhandler(500)
+def internal_error(error):
+    """Handle 500 errors."""
+    import traceback
+    error_details = traceback.format_exc()
+    
+    # Log the error
+    import logging
+    logger = logging.getLogger('web_interface')
+    logger.error(f"Internal server error: {error}", exc_info=True)
+    
+    # Return user-friendly error (hide internal details in production)
+    return jsonify({
+        'status': 'error',
+        'error_code': 'INTERNAL_ERROR',
+        'message': 'An internal error occurred',
+        'details': error_details if app.debug else None
+    }), 500
+
+@app.errorhandler(Exception)
+def handle_exception(error):
+    """Handle all unhandled exceptions."""
+    import traceback
+    import logging
+    logger = logging.getLogger('web_interface')
+    logger.error(f"Unhandled exception: {error}", exc_info=True)
+    
+    return jsonify({
+        'status': 'error',
+        'error_code': 'UNKNOWN_ERROR',
+        'message': str(error) if app.debug else 'An error occurred',
+        'details': traceback.format_exc() if app.debug else None
+    }), 500
+
+# Captive portal redirect middleware
+@app.before_request
+def captive_portal_redirect():
+    """
+    Redirect all HTTP requests to WiFi setup page when AP mode is active.
+    This creates a captive portal experience where users are automatically
+    directed to the WiFi configuration page.
+    """
+    # Check if AP mode is active
+    if not is_ap_mode_active():
+        return None  # Continue normal request processing
+    
+    # Get the request path
+    path = request.path
+    
+    # List of paths that should NOT be redirected (allow normal operation)
+    # This ensures the full web interface works normally when in AP mode
+    allowed_paths = [
+        '/v3',  # Main interface and all sub-paths
+        '/api/v3/',  # All API endpoints (plugins, config, wifi, stream, etc.)
+        '/static/',  # Static files (CSS, JS, images)
+        '/hotspot-detect.html',  # iOS/macOS detection
+        '/generate_204',  # Android detection
+        '/connecttest.txt',  # Windows detection
+        '/success.txt',  # Firefox detection
+        '/favicon.ico',  # Favicon
+    ]
+    
+    # Check if this path should be allowed
+    for allowed_path in allowed_paths:
+        if path.startswith(allowed_path):
+            return None  # Allow this request to proceed normally
+    
+    # For all other paths, redirect to main interface
+    # This ensures users see the WiFi setup page when they try to access any website
+    # The main interface (/v3) is already in allowed_paths, so it won't redirect
+    # Static files (/static/) and API calls (/api/v3/) are also allowed
+    return redirect(url_for('pages_v3.index'), code=302)
+
+# Add security headers and caching to all responses
+@app.after_request
+def add_security_headers(response):
+    """Add security headers and caching to all responses"""
+    # Only set standard security headers - avoid Permissions-Policy to prevent browser warnings
+    # about unrecognized features
+    response.headers['X-Content-Type-Options'] = 'nosniff'
+    response.headers['X-Frame-Options'] = 'SAMEORIGIN'
+    response.headers['X-XSS-Protection'] = '1; mode=block'
+    
+    # Add caching headers for static assets
+    if request.path.startswith('/static/'):
+        # Cache static assets for 1 year (with versioning via query params)
+        response.headers['Cache-Control'] = 'public, max-age=31536000, immutable'
+        response.headers['Expires'] = (datetime.now() + timedelta(days=365)).strftime('%a, %d %b %Y %H:%M:%S GMT')
+    elif request.path.startswith('/api/v3/'):
+        # Short cache for API responses (5 seconds) to allow for quick updates
+        # but reduce server load for repeated requests
+        if request.method == 'GET' and 'stream' not in request.path:
+            response.headers['Cache-Control'] = 'private, max-age=5, must-revalidate'
+    else:
+        # No cache for HTML pages to ensure fresh content
+        response.headers['Cache-Control'] = 'no-cache, no-store, must-revalidate'
+        response.headers['Pragma'] = 'no-cache'
+        response.headers['Expires'] = '0'
+    
+    return response
+
+# SSE helper function
+def sse_response(generator_func):
+    """Helper to create SSE responses"""
+    def generate():
+        for data in generator_func():
+            yield f"data: {json.dumps(data)}\n\n"
+    return Response(generate(), mimetype='text/event-stream')
+
+# System status generator for SSE
+def system_status_generator():
+    """Generate system status updates"""
+    while True:
+        try:
+            # Try to import psutil for system stats
+            try:
+                import psutil
+                cpu_percent = round(psutil.cpu_percent(interval=1), 1)
+                memory = psutil.virtual_memory()
+                memory_used_percent = round(memory.percent, 1)
+                
+                # Try to get CPU temperature (Raspberry Pi specific)
+                cpu_temp = 0
+                try:
+                    with open('/sys/class/thermal/thermal_zone0/temp', 'r') as f:
+                        cpu_temp = round(float(f.read()) / 1000.0, 1)
+                except:
+                    pass
+                    
+            except ImportError:
+                cpu_percent = 0
+                memory_used_percent = 0
+                cpu_temp = 0
+            
+            # Check if display service is running
+            service_active = False
+            try:
+                result = subprocess.run(['systemctl', 'is-active', 'ledmatrix'], 
+                                      capture_output=True, text=True, timeout=2)
+                service_active = result.stdout.strip() == 'active'
+            except:
+                pass
+            
+            status = {
+                'timestamp': time.time(),
+                'uptime': 'Running',
+                'service_active': service_active,
+                'cpu_percent': cpu_percent,
+                'memory_used_percent': memory_used_percent,
+                'cpu_temp': cpu_temp,
+                'disk_used_percent': 0
+            }
+            yield status
+        except Exception as e:
+            yield {'error': str(e)}
+        time.sleep(10)  # Update every 10 seconds (reduced frequency for better performance)
+
+# Display preview generator for SSE
+def display_preview_generator():
+    """Generate display preview updates from snapshot file"""
+    import base64
+    from PIL import Image
+    import io
+    
+    snapshot_path = "/tmp/led_matrix_preview.png"
+    last_modified = None
+    
+    # Get display dimensions from config
+    try:
+        main_config = config_manager.load_config()
+        cols = main_config.get('display', {}).get('hardware', {}).get('cols', 64)
+        chain_length = main_config.get('display', {}).get('hardware', {}).get('chain_length', 2)
+        rows = main_config.get('display', {}).get('hardware', {}).get('rows', 32)
+        parallel = main_config.get('display', {}).get('hardware', {}).get('parallel', 1)
+        width = cols * chain_length
+        height = rows * parallel
+    except:
+        width = 128
+        height = 64
+    
+    while True:
+        try:
+            # Check if snapshot file exists and has been modified
+            if os.path.exists(snapshot_path):
+                current_modified = os.path.getmtime(snapshot_path)
+                
+                # Only read if file is new or has been updated
+                if last_modified is None or current_modified > last_modified:
+                    try:
+                        # Read and encode the image
+                        with Image.open(snapshot_path) as img:
+                            # Convert to PNG and encode as base64
+                            buffer = io.BytesIO()
+                            img.save(buffer, format='PNG')
+                            img_str = base64.b64encode(buffer.getvalue()).decode('utf-8')
+                            
+                            preview_data = {
+                                'timestamp': time.time(),
+                                'width': width,
+                                'height': height,
+                                'image': img_str
+                            }
+                            last_modified = current_modified
+                            yield preview_data
+                    except Exception as read_err:
+                        # File might be being written, skip this update
+                        pass
+            else:
+                # No snapshot available
+                yield {
+                    'timestamp': time.time(),
+                    'width': width,
+                    'height': height,
+                    'image': None
+                }
+                
+        except Exception as e:
+            yield {'error': str(e)}
+        
+        time.sleep(0.5)  # Check 2 times per second (reduced frequency for better performance)
+
+# Logs generator for SSE
+def logs_generator():
+    """Generate log updates from journalctl"""
+    while True:
+        try:
+            # Get recent logs from journalctl (simplified version)
+            # Note: User should be in systemd-journal group to read logs without sudo
+            try:
+                result = subprocess.run(
+                    ['journalctl', '-u', 'ledmatrix.service', '-n', '50', '--no-pager'],
+                    capture_output=True, text=True, timeout=5
+                )
+
+                if result.returncode == 0:
+                    logs_text = result.stdout.strip()
+                    if logs_text:
+                        logs_data = {
+                            'timestamp': time.time(),
+                            'logs': logs_text
+                        }
+                        yield logs_data
+                    else:
+                        # No logs available
+                        logs_data = {
+                            'timestamp': time.time(),
+                            'logs': 'No logs available from ledmatrix service'
+                        }
+                        yield logs_data
+                else:
+                    # journalctl failed
+                    error_data = {
+                        'timestamp': time.time(),
+                        'logs': f'journalctl failed with return code {result.returncode}: {result.stderr.strip()}'
+                    }
+                    yield error_data
+
+            except subprocess.TimeoutExpired:
+                # Timeout - just skip this update
+                pass
+            except Exception as e:
+                error_data = {
+                    'timestamp': time.time(),
+                    'logs': f'Error running journalctl: {str(e)}'
+                }
+                yield error_data
+
+        except Exception as e:
+            error_data = {
+                'timestamp': time.time(),
+                'logs': f'Unexpected error in logs generator: {str(e)}'
+            }
+            yield error_data
+
+        time.sleep(5)  # Update every 5 seconds (reduced frequency for better performance)
+
+# SSE endpoints
+@app.route('/api/v3/stream/stats')
+def stream_stats():
+    return sse_response(system_status_generator)
+
+@app.route('/api/v3/stream/display')
+def stream_display():
+    return sse_response(display_preview_generator)
+
+@app.route('/api/v3/stream/logs')
+def stream_logs():
+    return sse_response(logs_generator)
+
+# Exempt SSE streams from CSRF and add rate limiting
+if csrf:
+    csrf.exempt(stream_stats)
+    csrf.exempt(stream_display)
+    csrf.exempt(stream_logs)
+
+if limiter:
+    limiter.limit("20 per minute")(stream_stats)
+    limiter.limit("20 per minute")(stream_display)
+    limiter.limit("20 per minute")(stream_logs)
+
+# Main route - redirect to v3 interface as default
+@app.route('/')
+def index():
+    """Redirect to v3 interface"""
+    return redirect(url_for('pages_v3.index'))
+
+@app.route('/favicon.ico')
+def favicon():
+    """Return 204 No Content for favicon to avoid 404 errors"""
+    return '', 204
+
+def _initialize_health_monitor():
+    """Initialize health monitoring after server is ready to accept requests."""
+    global health_monitor, _health_monitor_initialized
+    if _health_monitor_initialized:
+        return
+    
+    if health_monitor is None and hasattr(plugin_manager, 'health_tracker') and plugin_manager.health_tracker:
+        try:
+            health_monitor = PluginHealthMonitor(
+                health_tracker=plugin_manager.health_tracker,
+                check_interval=60.0,  # Check every minute
+                degraded_threshold=0.5,
+                unhealthy_threshold=0.8,
+                max_response_time=5.0
+            )
+            health_monitor.start_monitoring()
+            print("✓ Plugin health monitoring started")
+        except Exception as e:
+            print(f"⚠ Could not start health monitoring: {e}")
+    
+    _health_monitor_initialized = True
+
+# Initialize health monitor on first request (using before_request for compatibility)
+@app.before_request
+def check_health_monitor():
+    """Ensure health monitor is initialized on first request."""
+    if not _health_monitor_initialized:
+        _initialize_health_monitor()
+
+if __name__ == '__main__':
+    app.run(host='0.0.0.0', port=5000, debug=True)

web_interface/blueprints/__init__.py

@@ -0,0 +1 @@
+# Blueprints package

web_interface/blueprints/pages_v3.py

@@ -0,0 +1,390 @@
+from flask import Blueprint, render_template, request, redirect, url_for, flash, jsonify
+import json
+from pathlib import Path
+
+# Will be initialized when blueprint is registered
+config_manager = None
+plugin_manager = None
+plugin_store_manager = None
+
+pages_v3 = Blueprint('pages_v3', __name__)
+
+@pages_v3.route('/')
+def index():
+    """Main v3 interface page"""
+    try:
+        if pages_v3.config_manager:
+            # Load configuration data
+            main_config = pages_v3.config_manager.load_config()
+            schedule_config = main_config.get('schedule', {})
+
+            # Get raw config files for JSON editor
+            main_config_data = pages_v3.config_manager.get_raw_file_content('main')
+            secrets_config_data = pages_v3.config_manager.get_raw_file_content('secrets')
+            main_config_json = json.dumps(main_config_data, indent=4)
+            secrets_config_json = json.dumps(secrets_config_data, indent=4)
+        else:
+            raise Exception("Config manager not initialized")
+
+    except Exception as e:
+        flash(f"Error loading configuration: {e}", "error")
+        schedule_config = {}
+        main_config_json = "{}"
+        secrets_config_json = "{}"
+        main_config_data = {}
+        secrets_config_data = {}
+        main_config_path = ""
+        secrets_config_path = ""
+
+    return render_template('v3/index.html',
+                           schedule_config=schedule_config,
+                           main_config_json=main_config_json,
+                           secrets_config_json=secrets_config_json,
+                           main_config_path=pages_v3.config_manager.get_config_path() if pages_v3.config_manager else "",
+                           secrets_config_path=pages_v3.config_manager.get_secrets_path() if pages_v3.config_manager else "",
+                           main_config=main_config_data,
+                           secrets_config=secrets_config_data)
+
+@pages_v3.route('/partials/<partial_name>')
+def load_partial(partial_name):
+    """Load HTMX partials dynamically"""
+    try:
+        # Map partial names to specific data loading
+        if partial_name == 'overview':
+            return _load_overview_partial()
+        elif partial_name == 'general':
+            return _load_general_partial()
+        elif partial_name == 'display':
+            return _load_display_partial()
+        elif partial_name == 'durations':
+            return _load_durations_partial()
+        elif partial_name == 'schedule':
+            return _load_schedule_partial()
+        elif partial_name == 'weather':
+            return _load_weather_partial()
+        elif partial_name == 'stocks':
+            return _load_stocks_partial()
+        elif partial_name == 'plugins':
+            return _load_plugins_partial()
+        elif partial_name == 'fonts':
+            return _load_fonts_partial()
+        elif partial_name == 'logs':
+            return _load_logs_partial()
+        elif partial_name == 'raw-json':
+            return _load_raw_json_partial()
+        elif partial_name == 'wifi':
+            return _load_wifi_partial()
+        elif partial_name == 'cache':
+            return _load_cache_partial()
+        elif partial_name == 'operation-history':
+            return _load_operation_history_partial()
+        else:
+            return f"Partial '{partial_name}' not found", 404
+
+    except Exception as e:
+        return f"Error loading partial '{partial_name}': {str(e)}", 500
+
+
+@pages_v3.route('/partials/plugin-config/<plugin_id>')
+def load_plugin_config_partial(plugin_id):
+    """Load plugin configuration partial via HTMX - server-side rendered form"""
+    try:
+        return _load_plugin_config_partial(plugin_id)
+    except Exception as e:
+        return f'<div class="text-red-500 p-4">Error loading plugin config: {str(e)}</div>', 500
+
+def _load_overview_partial():
+    """Load overview partial with system stats"""
+    try:
+        if pages_v3.config_manager:
+            main_config = pages_v3.config_manager.load_config()
+            # This would be populated with real system stats via SSE
+            return render_template('v3/partials/overview.html',
+                                 main_config=main_config)
+    except Exception as e:
+        return f"Error: {str(e)}", 500
+
+def _load_general_partial():
+    """Load general settings partial"""
+    try:
+        if pages_v3.config_manager:
+            main_config = pages_v3.config_manager.load_config()
+            return render_template('v3/partials/general.html',
+                                 main_config=main_config)
+    except Exception as e:
+        return f"Error: {str(e)}", 500
+
+def _load_display_partial():
+    """Load display settings partial"""
+    try:
+        if pages_v3.config_manager:
+            main_config = pages_v3.config_manager.load_config()
+            return render_template('v3/partials/display.html',
+                                 main_config=main_config)
+    except Exception as e:
+        return f"Error: {str(e)}", 500
+
+def _load_durations_partial():
+    """Load display durations partial"""
+    try:
+        if pages_v3.config_manager:
+            main_config = pages_v3.config_manager.load_config()
+            return render_template('v3/partials/durations.html',
+                                 main_config=main_config)
+    except Exception as e:
+        return f"Error: {str(e)}", 500
+
+def _load_schedule_partial():
+    """Load schedule settings partial"""
+    try:
+        if pages_v3.config_manager:
+            main_config = pages_v3.config_manager.load_config()
+            schedule_config = main_config.get('schedule', {})
+            return render_template('v3/partials/schedule.html',
+                                 schedule_config=schedule_config)
+    except Exception as e:
+        return f"Error: {str(e)}", 500
+
+
+def _load_weather_partial():
+    """Load weather configuration partial"""
+    try:
+        if pages_v3.config_manager:
+            main_config = pages_v3.config_manager.load_config()
+            return render_template('v3/partials/weather.html',
+                                 main_config=main_config)
+    except Exception as e:
+        return f"Error: {str(e)}", 500
+
+def _load_stocks_partial():
+    """Load stocks configuration partial"""
+    try:
+        if pages_v3.config_manager:
+            main_config = pages_v3.config_manager.load_config()
+            return render_template('v3/partials/stocks.html',
+                                 main_config=main_config)
+    except Exception as e:
+        return f"Error: {str(e)}", 500
+
+def _load_plugins_partial():
+    """Load plugins management partial"""
+    try:
+        import json
+        from pathlib import Path
+        
+        # Load plugin data from the plugin system
+        plugins_data = []
+
+        # Get installed plugins if managers are available
+        if pages_v3.plugin_manager and pages_v3.plugin_store_manager:
+            try:
+                # Get all installed plugin info
+                all_plugin_info = pages_v3.plugin_manager.get_all_plugin_info()
+
+                # Format for the web interface
+                for plugin_info in all_plugin_info:
+                    plugin_id = plugin_info.get('id')
+
+                    # Re-read manifest from disk to ensure we have the latest metadata
+                    manifest_path = Path(pages_v3.plugin_manager.plugins_dir) / plugin_id / "manifest.json"
+                    if manifest_path.exists():
+                        try:
+                            with open(manifest_path, 'r', encoding='utf-8') as f:
+                                fresh_manifest = json.load(f)
+                            # Update plugin_info with fresh manifest data
+                            plugin_info.update(fresh_manifest)
+                        except Exception as e:
+                            # If we can't read the fresh manifest, use the cached one
+                            print(f"Warning: Could not read fresh manifest for {plugin_id}: {e}")
+
+                    # Get enabled status from config (source of truth)
+                    # Read from config file first, fall back to plugin instance if config doesn't have the key
+                    enabled = None
+                    if pages_v3.config_manager:
+                        full_config = pages_v3.config_manager.load_config()
+                        plugin_config = full_config.get(plugin_id, {})
+                        # Check if 'enabled' key exists in config (even if False)
+                        if 'enabled' in plugin_config:
+                            enabled = bool(plugin_config['enabled'])
+                    
+                    # Fallback to plugin instance if config doesn't have enabled key
+                    if enabled is None:
+                        plugin_instance = pages_v3.plugin_manager.get_plugin(plugin_id)
+                        if plugin_instance:
+                            enabled = plugin_instance.enabled
+                        else:
+                            # Default to True if no config key and plugin not loaded (matches BasePlugin default)
+                            enabled = True
+
+                    # Get verified status from store registry
+                    store_info = pages_v3.plugin_store_manager.get_plugin_info(plugin_id)
+                    verified = store_info.get('verified', False) if store_info else False
+
+                    last_updated = plugin_info.get('last_updated')
+                    last_commit = plugin_info.get('last_commit') or plugin_info.get('last_commit_sha')
+                    branch = plugin_info.get('branch')
+
+                    if store_info:
+                        last_updated = last_updated or store_info.get('last_updated') or store_info.get('last_updated_iso')
+                        last_commit = last_commit or store_info.get('last_commit') or store_info.get('last_commit_sha')
+                        branch = branch or store_info.get('branch') or store_info.get('default_branch')
+
+                    plugins_data.append({
+                        'id': plugin_id,
+                        'name': plugin_info.get('name', plugin_id),
+                        'author': plugin_info.get('author', 'Unknown'),
+                        'category': plugin_info.get('category', 'General'),
+                        'description': plugin_info.get('description', 'No description available'),
+                        'tags': plugin_info.get('tags', []),
+                        'enabled': enabled,
+                        'verified': verified,
+                        'loaded': plugin_info.get('loaded', False),
+                        'last_updated': last_updated,
+                        'last_commit': last_commit,
+                        'branch': branch
+                    })
+            except Exception as e:
+                print(f"Error loading plugin data: {e}")
+
+        return render_template('v3/partials/plugins.html',
+                             plugins=plugins_data)
+    except Exception as e:
+        return f"Error: {str(e)}", 500
+
+def _load_fonts_partial():
+    """Load fonts management partial"""
+    try:
+        # This would load font data from the font system
+        fonts_data = {}  # Placeholder for font data
+        return render_template('v3/partials/fonts.html',
+                             fonts=fonts_data)
+    except Exception as e:
+        return f"Error: {str(e)}", 500
+
+def _load_logs_partial():
+    """Load logs viewer partial"""
+    try:
+        return render_template('v3/partials/logs.html')
+    except Exception as e:
+        return f"Error: {str(e)}", 500
+
+def _load_raw_json_partial():
+    """Load raw JSON editor partial"""
+    try:
+        if pages_v3.config_manager:
+            main_config_data = pages_v3.config_manager.get_raw_file_content('main')
+            secrets_config_data = pages_v3.config_manager.get_raw_file_content('secrets')
+            main_config_json = json.dumps(main_config_data, indent=4)
+            secrets_config_json = json.dumps(secrets_config_data, indent=4)
+
+            return render_template('v3/partials/raw_json.html',
+                                 main_config_json=main_config_json,
+                                 secrets_config_json=secrets_config_json,
+                                 main_config_path=pages_v3.config_manager.get_config_path(),
+                                 secrets_config_path=pages_v3.config_manager.get_secrets_path())
+    except Exception as e:
+        return f"Error: {str(e)}", 500
+
+def _load_wifi_partial():
+    """Load WiFi setup partial"""
+    try:
+        return render_template('v3/partials/wifi.html')
+    except Exception as e:
+        return f"Error: {str(e)}", 500
+
+def _load_cache_partial():
+    """Load cache management partial"""
+    try:
+        return render_template('v3/partials/cache.html')
+    except Exception as e:
+        return f"Error: {str(e)}", 500
+
+def _load_operation_history_partial():
+    """Load operation history partial"""
+    try:
+        return render_template('v3/partials/operation_history.html')
+    except Exception as e:
+        return f"Error: {str(e)}", 500
+
+
+def _load_plugin_config_partial(plugin_id):
+    """
+    Load plugin configuration partial - server-side rendered form.
+    This replaces the client-side generateConfigForm() JavaScript.
+    """
+    try:
+        if not pages_v3.plugin_manager:
+            return '<div class="text-red-500 p-4">Plugin manager not available</div>', 500
+        
+        # Try to get plugin info first
+        plugin_info = pages_v3.plugin_manager.get_plugin_info(plugin_id)
+        
+        # If not found, re-discover plugins (handles plugins added after startup)
+        if not plugin_info:
+            pages_v3.plugin_manager.discover_plugins()
+            plugin_info = pages_v3.plugin_manager.get_plugin_info(plugin_id)
+        
+        if not plugin_info:
+            return f'<div class="text-red-500 p-4">Plugin "{plugin_id}" not found</div>', 404
+        
+        # Get plugin instance (may be None if not loaded)
+        plugin_instance = pages_v3.plugin_manager.get_plugin(plugin_id)
+        
+        # Get plugin configuration from config file
+        config = {}
+        if pages_v3.config_manager:
+            full_config = pages_v3.config_manager.load_config()
+            config = full_config.get(plugin_id, {})
+        
+        # Get plugin schema
+        schema = {}
+        schema_path = Path(pages_v3.plugin_manager.plugins_dir) / plugin_id / "config_schema.json"
+        if schema_path.exists():
+            try:
+                with open(schema_path, 'r', encoding='utf-8') as f:
+                    schema = json.load(f)
+            except Exception as e:
+                print(f"Warning: Could not load schema for {plugin_id}: {e}")
+        
+        # Get web UI actions from plugin manifest
+        web_ui_actions = []
+        manifest_path = Path(pages_v3.plugin_manager.plugins_dir) / plugin_id / "manifest.json"
+        if manifest_path.exists():
+            try:
+                with open(manifest_path, 'r', encoding='utf-8') as f:
+                    manifest = json.load(f)
+                    web_ui_actions = manifest.get('web_ui_actions', [])
+            except Exception as e:
+                print(f"Warning: Could not load manifest for {plugin_id}: {e}")
+        
+        # Determine enabled status
+        enabled = config.get('enabled', True)
+        if plugin_instance:
+            enabled = plugin_instance.enabled
+        
+        # Build plugin data for template
+        plugin_data = {
+            'id': plugin_id,
+            'name': plugin_info.get('name', plugin_id),
+            'author': plugin_info.get('author', 'Unknown'),
+            'version': plugin_info.get('version', ''),
+            'description': plugin_info.get('description', ''),
+            'category': plugin_info.get('category', 'General'),
+            'tags': plugin_info.get('tags', []),
+            'enabled': enabled,
+            'last_commit': plugin_info.get('last_commit') or plugin_info.get('last_commit_sha', ''),
+            'branch': plugin_info.get('branch', ''),
+        }
+        
+        return render_template(
+            'v3/partials/plugin_config.html',
+            plugin=plugin_data,
+            config=config,
+            schema=schema,
+            web_ui_actions=web_ui_actions
+        )
+        
+    except Exception as e:
+        import traceback
+        traceback.print_exc()
+        return f'<div class="text-red-500 p-4">Error loading plugin config: {str(e)}</div>', 500

web_interface/cache.py

@@ -0,0 +1,42 @@
+"""
+Simple in-memory cache for expensive operations.
+Separated from app.py to avoid circular import issues.
+"""
+import time
+from typing import Any, Optional
+
+
+# Simple in-memory cache for expensive operations
+_cache = {}
+_cache_timestamps = {}
+
+
+def get_cached(key: str, ttl_seconds: int = 60) -> Optional[Any]:
+    """Get value from cache if not expired."""
+    if key in _cache:
+        if time.time() - _cache_timestamps[key] < ttl_seconds:
+            return _cache[key]
+        else:
+            # Expired, remove
+            del _cache[key]
+            del _cache_timestamps[key]
+    return None
+
+
+def set_cached(key: str, value: Any, ttl_seconds: int = 60) -> None:
+    """Set value in cache with TTL."""
+    _cache[key] = value
+    _cache_timestamps[key] = time.time()
+
+
+def invalidate_cache(pattern: Optional[str] = None) -> None:
+    """Invalidate cache entries matching pattern, or all if pattern is None."""
+    if pattern is None:
+        _cache.clear()
+        _cache_timestamps.clear()
+    else:
+        keys_to_remove = [k for k in _cache.keys() if pattern in k]
+        for key in keys_to_remove:
+            del _cache[key]
+            del _cache_timestamps[key]
+

web_interface/logging_config.py

@@ -0,0 +1,136 @@
+"""
+Structured logging configuration for the web interface.
+Provides JSON-formatted logs for production and readable logs for development.
+"""
+import logging
+import json
+import sys
+from datetime import datetime
+from typing import Any, Dict, Optional
+
+
+class JSONFormatter(logging.Formatter):
+    """Formatter that outputs logs as JSON for structured logging."""
+    
+    def format(self, record: logging.LogRecord) -> str:
+        """Format log record as JSON."""
+        log_data = {
+            'timestamp': datetime.utcnow().isoformat(),
+            'level': record.levelname,
+            'logger': record.name,
+            'message': record.getMessage(),
+            'module': record.module,
+            'function': record.funcName,
+            'line': record.lineno,
+        }
+        
+        # Add exception info if present
+        if record.exc_info:
+            log_data['exception'] = self.formatException(record.exc_info)
+        
+        # Add extra fields if present
+        if hasattr(record, 'request_id'):
+            log_data['request_id'] = record.request_id
+        if hasattr(record, 'user_id'):
+            log_data['user_id'] = record.user_id
+        if hasattr(record, 'ip_address'):
+            log_data['ip_address'] = record.ip_address
+        if hasattr(record, 'duration_ms'):
+            log_data['duration_ms'] = record.duration_ms
+        
+        return json.dumps(log_data)
+
+
+def setup_web_interface_logging(level: str = 'INFO', use_json: bool = False):
+    """
+    Set up logging for the web interface.
+    
+    Args:
+        level: Log level (DEBUG, INFO, WARNING, ERROR)
+        use_json: If True, use JSON formatting (for production)
+    """
+    # Get root logger
+    logger = logging.getLogger()
+    logger.setLevel(getattr(logging, level.upper()))
+    
+    # Remove existing handlers
+    logger.handlers.clear()
+    
+    # Create console handler
+    console_handler = logging.StreamHandler(sys.stdout)
+    console_handler.setLevel(getattr(logging, level.upper()))
+    
+    # Set formatter
+    if use_json:
+        formatter = JSONFormatter()
+    else:
+        formatter = logging.Formatter(
+            '%(asctime)s - %(name)s - %(levelname)s - %(message)s',
+            datefmt='%Y-%m-%d %H:%M:%S'
+        )
+    
+    console_handler.setFormatter(formatter)
+    logger.addHandler(console_handler)
+    
+    # Set levels for specific loggers
+    logging.getLogger('werkzeug').setLevel(logging.WARNING)  # Reduce Flask noise
+    logging.getLogger('urllib3').setLevel(logging.WARNING)  # Reduce HTTP noise
+
+
+def log_api_request(method: str, path: str, status_code: int, duration_ms: float,
+                   ip_address: Optional[str] = None, **kwargs):
+    """
+    Log an API request with structured data.
+    
+    Args:
+        method: HTTP method
+        path: Request path
+        status_code: HTTP status code
+        duration_ms: Request duration in milliseconds
+        ip_address: Client IP address
+        **kwargs: Additional context
+    """
+    logger = logging.getLogger('web_interface.api')
+    
+    extra = {
+        'method': method,
+        'path': path,
+        'status_code': status_code,
+        'duration_ms': round(duration_ms, 2),
+        'ip_address': ip_address,
+        **kwargs
+    }
+    
+    # Log at appropriate level based on status code
+    if status_code >= 500:
+        logger.error(f"{method} {path} - {status_code} ({duration_ms}ms)", extra=extra)
+    elif status_code >= 400:
+        logger.warning(f"{method} {path} - {status_code} ({duration_ms}ms)", extra=extra)
+    else:
+        logger.info(f"{method} {path} - {status_code} ({duration_ms}ms)", extra=extra)
+
+
+def log_config_change(change_type: str, target: str, success: bool, **kwargs):
+    """
+    Log a configuration change.
+    
+    Args:
+        change_type: Type of change (save, delete, update)
+        target: What was changed (e.g., 'main_config', 'plugin_config:football-scoreboard')
+        success: Whether the change was successful
+        **kwargs: Additional context
+    """
+    logger = logging.getLogger('web_interface.config')
+    
+    extra = {
+        'change_type': change_type,
+        'target': target,
+        'success': success,
+        **kwargs
+    }
+    
+    if success:
+        logger.info(f"Config {change_type}: {target}", extra=extra)
+    else:
+        logger.error(f"Config {change_type} failed: {target}", extra=extra)
+

web_interface/requirements.txt

@@ -0,0 +1,57 @@
+# LEDMatrix Web Interface Dependencies
+# Compatible with Python 3.10, 3.11, 3.12, and 3.13
+# Tested on Raspbian OS 12 (Bookworm) and 13 (Trixie)
+
+# Web framework
+flask>=3.0.0,<4.0.0
+werkzeug>=3.0.0,<4.0.0
+flask-wtf>=1.2.0  # CSRF protection (optional for local-only, but recommended)
+flask-limiter>=3.5.0  # Rate limiting (prevent accidental abuse)
+
+# WebSocket support for plugins
+# Note: Web interface uses Server-Sent Events (SSE) for real-time updates, not WebSockets
+# However, plugins may need websocket support to connect to external services
+# (e.g., music plugin connecting to YTM Companion server via Socket.IO)
+# These packages are required for plugin compatibility
+python-socketio>=5.11.0,<6.0.0
+python-engineio>=4.9.0,<5.0.0
+websockets>=12.0,<14.0
+websocket-client>=1.8.0,<2.0.0
+
+# Image processing
+Pillow>=10.4.0,<12.0.0
+
+# System monitoring
+psutil>=6.0.0,<7.0.0
+
+# Font rendering
+freetype-py>=2.5.0,<3.0.0
+
+# Numerical operations
+# NumPy 1.24+ required for Python 3.12+ compatibility (compatible with 2.x)
+numpy>=1.24.0
+
+# HTTP requests
+requests>=2.32.0,<3.0.0
+
+# Date/time utilities
+python-dateutil>=2.9.0,<3.0.0
+
+# Timezone handling (must match main requirements)
+pytz>=2024.2,<2025.0
+timezonefinder>=6.5.0,<7.0.0
+geopy>=2.4.1,<3.0.0
+
+# Google API integration (must match main requirements)
+google-auth-oauthlib>=1.2.0,<2.0.0
+google-auth-httplib2>=0.2.0,<1.0.0
+google-api-python-client>=2.147.0,<3.0.0
+
+# Spotify integration (must match main requirements)
+spotipy>=2.24.0,<3.0.0
+
+# Text processing (must match main requirements)
+unidecode>=1.3.8,<2.0.0
+
+# Calendar integration (must match main requirements)
+icalevents>=0.1.27,<1.0.0

web_interface/run.sh

@@ -0,0 +1,17 @@
+#!/bin/bash
+
+# LED Matrix Web Interface V3 Runner
+# This script runs the web interface using system Python
+
+set -e
+
+# Get the directory where this script is located
+SCRIPT_DIR="$(cd "$(dirname "${BASH_SOURCE[0]}")" && pwd)"
+PROJECT_ROOT="$(dirname "$SCRIPT_DIR")"
+cd "$PROJECT_ROOT"
+
+echo "Starting LED Matrix Web Interface V3..."
+
+# Run the web interface from project root
+python3 web_interface/start.py
+

web_interface/start.py

@@ -0,0 +1,136 @@
+#!/usr/bin/env python3
+"""
+LED Matrix Web Interface V3 Startup Script
+Modern web interface with real-time display preview and plugin management.
+"""
+
+import os
+import socket
+import subprocess
+import sys
+import logging
+from pathlib import Path
+
+def get_local_ips():
+    """Get list of local IP addresses the service will be accessible on."""
+    ips = []
+    
+    # Check if AP mode is active
+    try:
+        result = subprocess.run(
+            ["systemctl", "is-active", "hostapd"],
+            capture_output=True,
+            text=True,
+            timeout=2
+        )
+        if result.returncode == 0 and result.stdout.strip() == "active":
+            ips.append("192.168.4.1 (AP Mode)")
+    except Exception:
+        pass
+    
+    # Get IPs from hostname -I
+    try:
+        result = subprocess.run(
+            ["hostname", "-I"],
+            capture_output=True,
+            text=True,
+            timeout=2
+        )
+        if result.returncode == 0:
+            for ip in result.stdout.strip().split():
+                ip = ip.strip()
+                if ip and not ip.startswith("127.") and ip != "192.168.4.1":
+                    ips.append(ip)
+    except Exception:
+        pass
+    
+    # Fallback: try socket method
+    if not ips:
+        try:
+            s = socket.socket(socket.AF_INET, socket.SOCK_DGRAM)
+            try:
+                s.connect(('8.8.8.8', 80))
+                ip = s.getsockname()[0]
+                if ip and not ip.startswith("127."):
+                    ips.append(ip)
+            finally:
+                s.close()
+        except Exception:
+            pass
+    
+    return ips if ips else ["localhost"]
+
+def main():
+    """Main startup function."""
+    # Change to project root directory
+    project_root = Path(__file__).parent.parent
+    os.chdir(project_root)
+    
+    # Add to Python path
+    sys.path.insert(0, str(project_root))
+    
+    # Configure logging to suppress non-critical socket errors
+    # These occur when clients disconnect and are harmless
+    werkzeug_logger = logging.getLogger('werkzeug')
+    original_log_exception = werkzeug_logger.error
+    
+    def log_exception_filtered(message, *args, **kwargs):
+        """Filter out non-critical socket errors from werkzeug logs."""
+        if isinstance(message, str):
+            # Suppress "No route to host" and similar connection errors
+            if 'No route to host' in message or 'errno 113' in message:
+                # Log at debug level instead of error
+                werkzeug_logger.debug(message, *args, **kwargs)
+                return
+            # Suppress broken pipe errors (client disconnected)
+            if 'Broken pipe' in message or 'errno 32' in message:
+                werkzeug_logger.debug(message, *args, **kwargs)
+                return
+        # For exceptions, check if it's a socket error
+        if 'exc_info' in kwargs and kwargs['exc_info']:
+            exc_type, exc_value, exc_tb = kwargs['exc_info']
+            if isinstance(exc_value, OSError):
+                # Suppress common non-critical socket errors
+                if exc_value.errno in (113, 32, 104):  # No route to host, Broken pipe, Connection reset
+                    werkzeug_logger.debug(message, *args, **kwargs)
+                    return
+        # Log everything else normally
+        original_log_exception(message, *args, **kwargs)
+    
+    werkzeug_logger.error = log_exception_filtered
+    
+    # Import and run the Flask app
+    from web_interface.app import app
+    
+    print("Starting LED Matrix Web Interface V3...")
+    print("Web server binding to: 0.0.0.0:5000")
+    
+    # Get and display accessible IP addresses
+    ips = get_local_ips()
+    if ips:
+        print("Access the interface at:")
+        for ip in ips:
+            if "AP Mode" in ip:
+                print(f"  - http://192.168.4.1:5000 (AP Mode - connect to LEDMatrix-Setup WiFi)")
+            else:
+                print(f"  - http://{ip}:5000")
+    else:
+        print("  - http://localhost:5000 (local only)")
+        print("  - http://<your-pi-ip>:5000 (replace with your Pi's IP address)")
+    
+    # Run the web server with error handling for client disconnections
+    try:
+        app.run(host='0.0.0.0', port=5000, debug=False)
+    except (OSError, BrokenPipeError) as e:
+        # Suppress non-critical socket errors (client disconnections)
+        if isinstance(e, OSError) and e.errno in (113, 32, 104):  # No route to host, Broken pipe, Connection reset
+            werkzeug_logger.debug(f"Client disconnected: {e}", exc_info=True)
+            # Re-raise only if it's not a client disconnection error
+            if e.errno not in (113, 32, 104):
+                raise
+        else:
+            raise
+
+if __name__ == '__main__':
+    main()
+

web_interface/static/v3/app.css

@@ -0,0 +1,743 @@
+/* LED Matrix v3 Custom Styles */
+/* Modern, clean design with utility classes */
+
+/* CSS Custom Properties for Theme Colors */
+:root {
+    --color-primary: #2563eb;
+    --color-primary-hover: #1d4ed8;
+    --color-secondary: #059669;
+    --color-secondary-hover: #047857;
+    --color-accent: #7c3aed;
+    --color-accent-hover: #6d28d9;
+    --color-background: #f9fafb;
+    --color-surface: #ffffff;
+    --color-text-primary: #111827;
+    --color-text-secondary: #374151;
+    --color-text-tertiary: #4b5563;
+    --color-border: #e5e7eb;
+    --color-border-light: #f3f4f6;
+    --color-success: #059669;
+    --color-success-bg: #d1fae5;
+    --color-error: #dc2626;
+    --color-error-bg: #fee2e2;
+    --color-warning: #d97706;
+    --color-warning-bg: #fef3c7;
+    --color-info: #2563eb;
+    --color-info-bg: #dbeafe;
+    --color-purple-bg: #f3e8ff;
+    --color-purple-text: #6b21a8;
+    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
+    --shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
+    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
+}
+
+/* Base styles */
+* {
+    box-sizing: border-box;
+}
+
+html {
+    scroll-behavior: smooth;
+}
+
+body {
+    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
+    line-height: 1.6;
+    color: var(--color-text-primary);
+    background-color: var(--color-background);
+}
+
+/* Utility classes */
+.bg-gray-50 { background-color: #f9fafb; }
+.bg-white { background-color: #ffffff; }
+.bg-gray-900 { background-color: #111827; }
+.bg-green-500 { background-color: #10b981; }
+.bg-red-500 { background-color: #ef4444; }
+.bg-blue-500 { background-color: #3b82f6; }
+.bg-yellow-500 { background-color: #f59e0b; }
+.bg-green-600 { background-color: #059669; }
+.bg-red-600 { background-color: #dc2626; }
+.bg-blue-600 { background-color: #2563eb; }
+.bg-yellow-600 { background-color: #d97706; }
+.bg-gray-200 { background-color: #e5e7eb; }
+
+.text-gray-900 { color: #111827; }
+.text-gray-600 { color: #374151; }
+.text-gray-500 { color: #4b5563; }
+.text-gray-400 { color: #6b7280; }
+.text-white { color: #ffffff; }
+.text-green-600 { color: #059669; }
+.text-red-600 { color: #dc2626; }
+
+.border-gray-200 { border-color: #e5e7eb; }
+.border-gray-300 { border-color: #d1d5db; }
+.border-transparent { border-color: transparent; }
+
+.rounded-lg { border-radius: 0.5rem; }
+.rounded-md { border-radius: 0.375rem; }
+.rounded { border-radius: 0.25rem; }
+
+.shadow { box-shadow: var(--shadow); }
+.shadow-sm { box-shadow: var(--shadow-sm); }
+.shadow-md { box-shadow: var(--shadow-md); }
+.shadow-lg { box-shadow: var(--shadow-lg); }
+
+.p-6 { padding: 1.5rem; }
+.p-4 { padding: 1rem; }
+.p-2 { padding: 0.5rem; }
+.px-4 { padding-left: 1rem; padding-right: 1rem; }
+.py-2 { padding-top: 0.5rem; padding-bottom: 0.5rem; }
+.py-3 { padding-top: 0.75rem; padding-bottom: 0.75rem; }
+.pb-4 { padding-bottom: 1rem; }
+.mb-6 { margin-bottom: 1.5rem; }
+.mb-4 { margin-bottom: 1rem; }
+.mb-8 { margin-bottom: 2rem; }
+.mb-2 { margin-bottom: 0.5rem; }
+.mt-1 { margin-top: 0.25rem; }
+.mt-4 { margin-top: 1rem; }
+.mr-2 { margin-right: 0.5rem; }
+.ml-3 { margin-left: 0.75rem; }
+
+.w-full { width: 100%; }
+.w-0 { width: 0; }
+.w-2 { width: 0.5rem; }
+.w-4 { width: 1rem; }
+.h-2 { height: 0.5rem; }
+.h-4 { height: 1rem; }
+.h-10 { height: 2.5rem; }
+.h-16 { height: 4rem; }
+.h-24 { height: 6rem; }
+.h-32 { height: 8rem; }
+.h-96 { height: 24rem; }
+
+.flex { display: flex; }
+.inline-flex { display: inline-flex; }
+.flex-shrink-0 { flex-shrink: 0; }
+.flex-1 { flex: 1; }
+.items-center { align-items: center; }
+.justify-center { justify-content: center; }
+.justify-between { justify-content: space-between; }
+.space-x-1 > * + * { margin-left: 0.25rem; }
+.space-x-2 > * + * { margin-left: 0.5rem; }
+.space-x-4 > * + * { margin-left: 1rem; }
+.space-y-1 > * + * { margin-top: 0.25rem; }
+.space-y-1\.5 > * + * { margin-top: 0.375rem; }
+.space-y-2 > * + * { margin-top: 0.5rem; }
+.space-y-4 > * + * { margin-top: 1rem; }
+.space-y-6 > * + * { margin-top: 1.5rem; }
+.space-y-8 > * + * { margin-top: 2rem; }
+
+.grid { display: grid; }
+.grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
+.grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
+.grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
+.grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
+.gap-2 { gap: 0.5rem; }
+.gap-3 { gap: 0.75rem; }
+.gap-4 { gap: 1rem; }
+.gap-6 { gap: 1.5rem; }
+
+/* Enhanced Typography */
+.text-xs { font-size: 0.75rem; line-height: 1.4; }
+.text-sm { font-size: 0.875rem; line-height: 1.5; }
+.text-base { font-size: 1rem; line-height: 1.5; }
+.text-lg { font-size: 1.125rem; line-height: 1.75; }
+.text-xl { font-size: 1.25rem; line-height: 1.75; }
+.text-2xl { font-size: 1.5rem; line-height: 2; }
+.text-4xl { font-size: 2.25rem; line-height: 2.5; }
+.font-medium { font-weight: 500; }
+.font-semibold { font-weight: 600; }
+.font-bold { font-weight: 700; }
+
+/* Headings with improved hierarchy */
+h1, h2, h3, h4, h5, h6 {
+    font-weight: 600;
+    line-height: 1.4;
+    color: var(--color-text-primary);
+    /* Improved line-height from 1.3 to 1.4 for better readability */
+}
+
+h1 { font-size: 1.875rem; }
+h2 { font-size: 1.5rem; }
+h3 { font-size: 1.25rem; }
+h4 { font-size: 1.125rem; }
+
+.border-b { border-bottom-width: 1px; }
+.border-b-2 { border-bottom-width: 2px; }
+
+.relative { position: relative; }
+.fixed { position: fixed; }
+.absolute { position: absolute; }
+.z-50 { z-index: 50; }
+
+.top-4 { top: 1rem; }
+.right-4 { right: 1rem; }
+
+.max-w-7xl { max-width: 56rem; }
+.mx-auto { margin-left: auto; margin-right: auto; }
+.overflow-x-auto { overflow-x: auto; }
+.overflow-hidden { overflow: hidden; }
+
+.aspect-video { aspect-ratio: 16 / 9; }
+
+.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+
+.transition { transition-property: transform, opacity, color, border-color; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms; }
+/* Optimized: Replaced 'all' with specific properties to avoid animating expensive properties */
+
+/* Removed .duration-300 - not used anywhere */
+
+.hover\:bg-green-700:hover { background-color: #047857; }
+.hover\:bg-red-700:hover { background-color: #b91c1c; }
+.hover\:bg-gray-50:hover { background-color: #f9fafb; }
+.hover\:bg-yellow-700:hover { background-color: #b45309; }
+.hover\:text-gray-700:hover { color: #374151; }
+.hover\:border-gray-300:hover { border-color: #d1d5db; }
+
+.focus\:outline-none:focus { outline: 2px solid transparent; outline-offset: 2px; }
+.focus\:ring-2:focus {
+    --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
+    box-shadow: var(--tw-ring-offset-shadow), var(--tw-shadow, 0 0 #0000);
+}
+/* Optimized: Split complex selector onto multiple lines for readability */
+.focus\:ring-blue-500:focus { --tw-ring-color: #3b82f6; }
+
+.animate-pulse {
+    animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
+}
+
+@keyframes pulse {
+    0%, 100% { opacity: 1; }
+    50% { opacity: .5; }
+}
+
+/* Smooth transitions for all interactive elements */
+/* Optimized: Only transition properties that don't trigger expensive repaints */
+a, button, input, select, textarea {
+    transition: color 0.15s ease, border-color 0.15s ease, opacity 0.15s ease;
+    /* Removed background-color transition - can trigger repaints, use opacity or border-color instead */
+}
+
+/* Custom scrollbar for webkit browsers */
+::-webkit-scrollbar {
+    width: 8px;
+    height: 8px;
+}
+
+::-webkit-scrollbar-track {
+    background: #f1f5f9;
+}
+
+::-webkit-scrollbar-thumb {
+    background: #cbd5e1;
+    border-radius: 4px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+    background: #94a3b8;
+}
+
+/* Logs container specific scrollbar */
+#logs-container::-webkit-scrollbar {
+    width: 10px;
+}
+
+#logs-container::-webkit-scrollbar-track {
+    background: #374151;
+}
+
+#logs-container::-webkit-scrollbar-thumb {
+    background: #6b7280;
+    border-radius: 5px;
+}
+
+#logs-container::-webkit-scrollbar-thumb:hover {
+    background: #9ca3af;
+}
+
+/* Smooth scrolling for logs container */
+#logs-container {
+    scroll-behavior: smooth;
+    position: relative;
+    overflow-y: auto !important;
+}
+
+/* Ensure logs content doesn't cause overflow issues */
+.log-entry {
+    word-wrap: break-word;
+    overflow-wrap: break-word;
+    max-width: 100%;
+    box-sizing: border-box;
+}
+
+/* Ensure proper containment of logs */
+#logs-loading {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    z-index: 1;
+}
+
+#logs-empty {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    z-index: 2;
+}
+
+#logs-display {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    z-index: 3;
+}
+
+.logs-content {
+    height: 100%;
+    overflow-y: auto;
+    padding: 0;
+}
+
+/* Logs container responsive height - simplified for better scrolling */
+@media (max-width: 768px) {
+    #logs-container {
+        height: 400px !important;
+        min-height: 300px !important;
+    }
+}
+
+@media (max-width: 640px) {
+    #logs-container {
+        height: 350px !important;
+        min-height: 250px !important;
+    }
+}
+
+/* Responsive breakpoints */
+@media (min-width: 640px) {
+    .sm\:px-6 { padding-left: 1.5rem; padding-right: 1.5rem; }
+}
+
+@media (min-width: 768px) {
+    .md\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
+    .md\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
+    .md\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
+    .md\:flex { display: flex; }
+    .md\:hidden { display: none; }
+}
+
+@media (min-width: 1024px) {
+    .lg\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
+    .lg\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
+    .lg\:grid-cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
+    .lg\:grid-cols-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
+    .lg\:px-8 { padding-left: 2rem; padding-right: 2rem; }
+}
+
+@media (min-width: 1280px) {
+    .xl\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
+    .xl\:grid-cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
+    .xl\:grid-cols-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
+    .xl\:grid-cols-7 { grid-template-columns: repeat(7, minmax(0, 1fr)); }
+    .xl\:grid-cols-8 { grid-template-columns: repeat(8, minmax(0, 1fr)); }
+    .xl\:px-12 { padding-left: 3rem; padding-right: 3rem; }
+    .xl\:space-x-6 > * + * { margin-left: 1.5rem; }
+}
+
+@media (min-width: 1536px) {
+    .2xl\:grid-cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
+    .2xl\:grid-cols-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
+    .2xl\:grid-cols-7 { grid-template-columns: repeat(7, minmax(0, 1fr)); }
+    .2xl\:grid-cols-8 { grid-template-columns: repeat(8, minmax(0, 1fr)); }
+    .2xl\:grid-cols-9 { grid-template-columns: repeat(9, minmax(0, 1fr)); }
+    .2xl\:grid-cols-10 { grid-template-columns: repeat(10, minmax(0, 1fr)); }
+    .2xl\:px-16 { padding-left: 4rem; padding-right: 4rem; }
+    .2xl\:space-x-8 > * + * { margin-left: 2rem; }
+}
+
+/* HTMX loading states */
+.htmx-request .loading {
+    display: inline-block;
+}
+
+.htmx-request .btn-text {
+    opacity: 0.5;
+}
+
+/* Enhanced Button styles */
+.btn {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    padding: 0.625rem 1.25rem;
+    border-radius: 0.5rem;
+    font-size: 0.875rem;
+    font-weight: 600;
+    line-height: 1.5;
+    text-decoration: none;
+    transition: transform 0.15s ease, opacity 0.15s ease;
+    cursor: pointer;
+    border: none;
+    /* Removed ::before pseudo-element animation for better performance */
+}
+
+.btn:hover {
+    transform: translateY(-1px);
+    opacity: 0.9;
+}
+
+.btn:active {
+    transform: translateY(0);
+}
+
+.btn:disabled {
+    opacity: 0.6;
+    cursor: not-allowed;
+    transform: none !important;
+}
+
+.btn:disabled:hover {
+    transform: none;
+}
+
+.btn:focus {
+    outline: 2px solid transparent;
+    outline-offset: 2px;
+    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.3);
+}
+
+/* Global button text contrast fix: Ensure buttons with white backgrounds have dark text */
+button.bg-white {
+    color: #111827 !important; /* text-gray-900 equivalent - ensures good contrast on white background */
+}
+
+/* Form styles */
+.form-group {
+    margin-bottom: 1rem;
+}
+
+.form-group label {
+    display: block;
+    font-size: 0.875rem;
+    font-weight: 500;
+    color: var(--color-text-secondary);
+    margin-bottom: 0.25rem;
+}
+
+.form-control {
+    display: block;
+    width: 100%;
+    padding: 0.5rem 0.75rem;
+    border: 1px solid #d1d5db;
+    border-radius: 0.375rem;
+    background-color: #ffffff;
+    color: #111827; /* text-gray-900 - ensure dark text on white background */
+    font-size: 0.875rem;
+    line-height: 1.25rem;
+    transition: border-color 0.15s ease-in-out;
+    /* Removed box-shadow transition - using border-color only for better performance */
+}
+
+.form-control:focus {
+    border-color: var(--color-primary);
+    /* Using outline instead of box-shadow for focus state (better performance) */
+    outline: 2px solid rgba(37, 99, 235, 0.2);
+    outline-offset: 2px;
+}
+
+.form-control:disabled {
+    background-color: #f9fafb;
+    opacity: 0.6;
+    cursor: not-allowed;
+}
+
+/* Enhanced Card styles */
+.card {
+    background-color: var(--color-surface);
+    border-radius: 0.5rem;
+    box-shadow: var(--shadow);
+    overflow: hidden;
+    transition: transform 0.15s ease;
+    contain: layout style paint;
+    /* Removed box-shadow transition for better performance - using transform only (GPU accelerated) */
+    /* Added CSS containment for better performance isolation */
+}
+
+.card:hover {
+    transform: translateY(-2px);
+}
+
+/* Plugin Card Styles */
+.plugin-card {
+    background-color: var(--color-surface);
+    border: 1px solid var(--color-border);
+    border-radius: 0.75rem;
+    padding: 1.25rem;
+    transition: transform 0.15s ease, border-color 0.15s ease;
+    cursor: pointer;
+    position: relative;
+    contain: layout style paint;
+    /* Simplified transitions - using only transform and border-color (cheaper than box-shadow) */
+    /* Added CSS containment for better performance isolation */
+}
+
+.plugin-card::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    height: 3px;
+    background: linear-gradient(90deg, var(--color-primary), var(--color-secondary));
+    opacity: 0;
+    transition: opacity 0.15s ease;
+}
+
+.plugin-card:hover {
+    transform: translateY(-2px);
+    border-color: var(--color-primary);
+    /* Removed box-shadow transition for better performance */
+}
+
+.plugin-card:hover::before {
+    opacity: 1;
+}
+
+.plugin-card:focus {
+    outline: 2px solid var(--color-primary);
+    outline-offset: 2px;
+}
+
+.plugin-card:active {
+    transform: translateY(0);
+}
+
+/* Status indicators */
+.status-indicator {
+    display: inline-flex;
+    align-items: center;
+    padding: 0.25rem 0.75rem;
+    border-radius: 9999px;
+    font-size: 0.75rem;
+    font-weight: 500;
+}
+
+.status-indicator.success {
+    background-color: #dcfce7;
+    color: #166534;
+}
+
+.status-indicator.error {
+    background-color: #fef2f2;
+    color: #991b1b;
+}
+
+.status-indicator.warning {
+    background-color: #fffbeb;
+    color: #92400e;
+}
+
+.status-indicator.info {
+    background-color: var(--color-info-bg);
+    color: var(--color-info);
+}
+
+/* Badge Styles */
+.badge {
+    display: inline-flex;
+    align-items: center;
+    padding: 0.25rem 0.625rem;
+    border-radius: 0.375rem;
+    font-size: 0.75rem;
+    font-weight: 600;
+    line-height: 1.4;
+}
+
+.badge-success {
+    background-color: var(--color-success-bg);
+    color: var(--color-success);
+}
+
+.badge-error {
+    background-color: var(--color-error-bg);
+    color: var(--color-error);
+}
+
+.badge-warning {
+    background-color: var(--color-warning-bg);
+    color: var(--color-warning);
+}
+
+.badge-info {
+    background-color: var(--color-info-bg);
+    color: var(--color-info);
+}
+
+.badge-accent {
+    background-color: var(--color-purple-bg);
+    color: var(--color-purple-text);
+}
+
+/* Section Headers with Subtle Gradients */
+.section-header {
+    background: linear-gradient(135deg, rgba(255, 255, 255, 0.9) 0%, rgba(249, 250, 251, 0.9) 100%);
+    border-bottom: 1px solid var(--color-border);
+    padding: 1rem 0;
+    margin-bottom: 1.5rem;
+}
+
+/* Enhanced Empty States */
+.empty-state {
+    text-align: center;
+    padding: 3rem 1rem;
+    color: var(--color-text-tertiary);
+}
+
+.empty-state-icon {
+    font-size: 3rem;
+    color: var(--color-text-tertiary);
+    opacity: 0.5;
+    margin-bottom: 1rem;
+}
+
+/* Enhanced Loading Skeleton */
+.skeleton {
+    background-color: #f0f0f0;
+    border-radius: 0.375rem;
+    animation: skeletonPulse 1.5s ease-in-out infinite;
+    /* Simplified from gradient animation to opacity pulse for better performance */
+}
+
+@keyframes skeletonPulse {
+    0%, 100% { opacity: 1; }
+    50% { opacity: 0.6; }
+}
+
+/* Enhanced Modal Styling */
+.modal-backdrop {
+    background-color: rgba(0, 0, 0, 0.5);
+    /* Removed backdrop-filter: blur() for better performance on Raspberry Pi */
+    transition: opacity 0.2s ease;
+}
+
+.modal-content {
+    background: var(--color-surface);
+    border-radius: 0.75rem;
+    box-shadow: var(--shadow-lg);
+    animation: modalSlideIn 0.2s ease;
+    contain: layout style paint;
+    /* Added CSS containment for better performance isolation */
+}
+
+@keyframes modalSlideIn {
+    from {
+        opacity: 0;
+        transform: translateY(-10px);
+    }
+    to {
+        opacity: 1;
+        transform: translateY(0);
+    }
+}
+
+/* Removed .divider and .divider-light - not used anywhere */
+
+/* Enhanced Spacing Utilities - Only unique classes not in main utility section */
+.mt-2 { margin-top: 0.5rem; }
+.mt-3 { margin-top: 0.75rem; }
+.mt-6 { margin-top: 1.5rem; }
+.mb-3 { margin-bottom: 0.75rem; }
+.p-3 { padding: 0.75rem; }
+.p-5 { padding: 1.25rem; }
+.px-3 { padding-left: 0.75rem; padding-right: 0.75rem; }
+.px-5 { padding-left: 1.25rem; padding-right: 1.25rem; }
+.py-2\.5 { padding-top: 0.625rem; padding-bottom: 0.625rem; }
+.py-4 { padding-top: 1rem; padding-bottom: 1rem; }
+/* Removed duplicates: mt-4, mb-2, mb-4, mb-6, mb-8, p-4, p-6, px-4, py-2, py-3 (already defined above) */
+
+/* Additional Utility Classes */
+.min-w-0 { min-width: 0; }
+.leading-relaxed { line-height: 1.625; }
+
+/* Enhanced Navigation Tab Styles */
+.nav-tab {
+    position: relative;
+    display: inline-flex;
+    align-items: center;
+    padding: 0.5rem 0.25rem;
+    border-bottom-width: 2px;
+    border-bottom-style: solid;
+    border-bottom-color: transparent;
+    font-size: 0.875rem;
+    font-weight: 500;
+    line-height: 1.5;
+    color: #374151; /* text-gray-700 for better readability */
+    white-space: nowrap;
+    transition: color 0.15s ease, background-color 0.15s ease, border-color 0.15s ease, opacity 0.15s ease;
+    cursor: pointer;
+    background-color: transparent;
+    border-top: none;
+    border-left: none;
+    border-right: none;
+}
+
+.nav-tab i {
+    transition: color 0.15s ease;
+    margin-right: 0.5rem;
+}
+
+/* Inactive state - improved contrast */
+.nav-tab:not(.nav-tab-active) {
+    color: #374151; /* text-gray-700 */
+}
+
+.nav-tab:not(.nav-tab-active) i {
+    color: #374151; /* text-gray-700 */
+}
+
+/* Hover state - enhanced visibility */
+.nav-tab:not(.nav-tab-active):hover {
+    color: #111827; /* text-gray-900 */
+    background-color: #f3f4f6; /* bg-gray-100 */
+    border-bottom-color: #d1d5db; /* border-gray-300 */
+}
+
+.nav-tab:not(.nav-tab-active):hover i {
+    color: #111827; /* text-gray-900 */
+}
+
+/* Active state - prominent with gradient background */
+.nav-tab-active {
+    color: #1d4ed8; /* text-blue-700 */
+    font-weight: 600;
+    border-bottom-width: 3px;
+    border-bottom-color: #2563eb; /* border-blue-600 */
+    background: linear-gradient(135deg, rgba(37, 99, 235, 0.1) 0%, rgba(59, 130, 246, 0.05) 100%);
+    box-shadow: 0 2px 4px rgba(37, 99, 235, 0.1);
+}
+
+.nav-tab-active i {
+    color: #1d4ed8; /* text-blue-700 */
+}
+
+/* Responsive padding adjustments */
+@media (min-width: 1024px) {
+    .nav-tab {
+        padding-left: 0.5rem;
+        padding-right: 0.5rem;
+    }
+}
+
+@media (min-width: 1280px) {
+    .nav-tab {
+        padding-left: 0.75rem;
+        padding-right: 0.75rem;
+    }
+}

web_interface/static/v3/app.js

@@ -0,0 +1,270 @@
+// LED Matrix v3 JavaScript
+// Additional helpers for HTMX and Alpine.js integration
+
+// Global notification system
+window.showNotification = function(message, type = 'info') {
+    // Use Alpine.js notification if available
+    if (window.Alpine) {
+        // This would trigger the Alpine.js notification system
+        const event = new CustomEvent('show-notification', {
+            detail: { message, type }
+        });
+        document.dispatchEvent(event);
+    } else {
+        // Fallback notification
+        console.log(`${type}: ${message}`);
+    }
+};
+
+// HTMX response handlers
+document.body.addEventListener('htmx:beforeRequest', function(event) {
+    // Show loading states for buttons
+    const btn = event.target.closest('button, .btn');
+    if (btn) {
+        btn.classList.add('loading');
+        const textEl = btn.querySelector('.btn-text');
+        if (textEl) textEl.style.opacity = '0.5';
+    }
+});
+
+document.body.addEventListener('htmx:afterRequest', function(event) {
+    // Remove loading states
+    const btn = event.target.closest('button, .btn');
+    if (btn) {
+        btn.classList.remove('loading');
+        const textEl = btn.querySelector('.btn-text');
+        if (textEl) textEl.style.opacity = '1';
+    }
+
+    // Handle response notifications
+    const response = event.detail.xhr;
+    if (response && response.responseText) {
+        try {
+            const data = JSON.parse(response.responseText);
+            if (data.message) {
+                showNotification(data.message, data.status || 'info');
+            }
+        } catch (e) {
+            // Not JSON, ignore
+        }
+    }
+});
+
+// SSE reconnection helper
+window.reconnectSSE = function() {
+    if (window.statsSource) {
+        window.statsSource.close();
+        window.statsSource = new EventSource('/api/v3/stream/stats');
+        window.statsSource.onmessage = function(event) {
+            const data = JSON.parse(event.data);
+            updateSystemStats(data);
+        };
+    }
+
+    if (window.displaySource) {
+        window.displaySource.close();
+        window.displaySource = new EventSource('/api/v3/stream/display');
+        window.displaySource.onmessage = function(event) {
+            const data = JSON.parse(event.data);
+            // Handle display updates
+        };
+    }
+};
+
+// Utility functions
+window.hexToRgb = function(hex) {
+    const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
+    return result ? {
+        r: parseInt(result[1], 16),
+        g: parseInt(result[2], 16),
+        b: parseInt(result[3], 16)
+    } : null;
+};
+
+window.rgbToHex = function(r, g, b) {
+    return "#" + ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1);
+};
+
+// Form validation helpers
+window.validateForm = function(form) {
+    const inputs = form.querySelectorAll('input[required], select[required], textarea[required]');
+    let isValid = true;
+
+    inputs.forEach(input => {
+        if (!input.value.trim()) {
+            input.classList.add('border-red-500');
+            isValid = false;
+        } else {
+            input.classList.remove('border-red-500');
+        }
+    });
+
+    return isValid;
+};
+
+// Auto-resize textareas
+document.addEventListener('DOMContentLoaded', function() {
+    const textareas = document.querySelectorAll('textarea');
+    textareas.forEach(textarea => {
+        textarea.addEventListener('input', function() {
+            this.style.height = 'auto';
+            this.style.height = this.scrollHeight + 'px';
+        });
+    });
+});
+
+// Keyboard shortcuts
+document.addEventListener('keydown', function(e) {
+    // Ctrl/Cmd + R to refresh
+    if ((e.ctrlKey || e.metaKey) && e.key === 'r') {
+        e.preventDefault();
+        location.reload();
+    }
+
+    // Ctrl/Cmd + S to save current form
+    if ((e.ctrlKey || e.metaKey) && e.key === 's') {
+        e.preventDefault();
+        const form = document.querySelector('form');
+        if (form) {
+            form.dispatchEvent(new Event('submit'));
+        }
+    }
+});
+
+// Plugin management helpers
+window.installPlugin = function(pluginId) {
+    fetch('/api/v3/plugins/install', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ plugin_id: pluginId })
+    })
+    .then(response => response.json())
+    .then(data => {
+        showNotification(data.message, data.status);
+        if (data.status === 'success') {
+            // Refresh plugin list
+            htmx.ajax('GET', '/v3/partials/plugins', '#plugins-content');
+        }
+    })
+    .catch(error => {
+        showNotification('Error installing plugin: ' + error.message, 'error');
+    });
+};
+
+// Font management helpers
+window.uploadFont = function(fileInput) {
+    const file = fileInput.files[0];
+    if (!file) return;
+
+    const formData = new FormData();
+    formData.append('font_file', file);
+    formData.append('font_family', file.name.replace(/\.[^/.]+$/, '').toLowerCase().replace(/[^a-z0-9]/g, '_'));
+
+    fetch('/api/v3/fonts/upload', {
+        method: 'POST',
+        body: formData
+    })
+    .then(response => response.json())
+    .then(data => {
+        showNotification(data.message, data.status);
+        if (data.status === 'success') {
+            // Refresh fonts list
+            htmx.ajax('GET', '/v3/partials/fonts', '#fonts-content');
+        }
+    })
+    .catch(error => {
+        showNotification('Error uploading font: ' + error.message, 'error');
+    });
+};
+
+// Tab switching helper
+window.switchTab = function(tabName) {
+    // Update Alpine.js active tab if available
+    if (window.Alpine) {
+        // Dispatch event for Alpine.js
+        const event = new CustomEvent('switch-tab', {
+            detail: { tab: tabName }
+        });
+        document.dispatchEvent(event);
+    }
+};
+
+// Error handling for unhandled promise rejections
+window.addEventListener('unhandledrejection', function(event) {
+    console.error('Unhandled promise rejection:', event.reason);
+    showNotification('An unexpected error occurred', 'error');
+});
+
+// Performance monitoring
+window.performanceMonitor = {
+    startTime: performance.now(),
+
+    mark: function(name) {
+        if (window.performance.mark) {
+            performance.mark(name);
+        }
+    },
+
+    measure: function(name, start, end) {
+        if (window.performance.measure) {
+            performance.measure(name, start, end);
+        }
+    },
+
+    getMeasures: function() {
+        if (window.performance && window.performance.getEntriesByType) {
+            return window.performance.getEntriesByType('measure');
+        }
+        return [];
+    },
+    
+    getMetrics: function() {
+        if (!window.performance || !window.performance.getEntriesByType) {
+            return {};
+        }
+        
+        const navigation = window.performance.getEntriesByType('navigation')[0];
+        const paint = window.performance.getEntriesByType('paint');
+        const resources = window.performance.getEntriesByType('resource');
+        
+        return {
+            domContentLoaded: navigation ? navigation.domContentLoadedEventEnd - navigation.domContentLoadedEventStart : 0,
+            loadComplete: navigation ? navigation.loadEventEnd - navigation.fetchStart : 0,
+            firstPaint: paint.find(p => p.name === 'first-paint')?.startTime || 0,
+            firstContentfulPaint: paint.find(p => p.name === 'first-contentful-paint')?.startTime || 0,
+            resourceCount: resources.length,
+            totalResourceSize: resources.reduce((sum, r) => sum + (r.transferSize || 0), 0),
+            measures: this.measures
+        };
+    },
+    
+    logMetrics: function() {
+        const metrics = this.getMetrics();
+        console.group('Performance Metrics');
+        console.log('DOM Content Loaded:', metrics.domContentLoaded?.toFixed(2) || 'N/A', 'ms');
+        console.log('Load Complete:', metrics.loadComplete?.toFixed(2) || 'N/A', 'ms');
+        console.log('First Paint:', metrics.firstPaint?.toFixed(2) || 'N/A', 'ms');
+        console.log('First Contentful Paint:', metrics.firstContentfulPaint?.toFixed(2) || 'N/A', 'ms');
+        console.log('Resources:', metrics.resourceCount || 0, 'files,', (metrics.totalResourceSize / 1024).toFixed(2) || '0', 'KB');
+        if (Object.keys(metrics.measures || {}).length > 0) {
+            console.log('Custom Measures:', metrics.measures);
+        }
+        console.groupEnd();
+    }
+};
+
+// Initialize performance monitoring
+document.addEventListener('DOMContentLoaded', function() {
+    window.performanceMonitor.mark('app-start');
+    
+    // Log metrics after page load
+    window.addEventListener('load', function() {
+        setTimeout(() => {
+            window.performanceMonitor.mark('app-loaded');
+            window.performanceMonitor.measure('app-load-time', 'app-start', 'app-loaded');
+            if (window.location.search.includes('debug=perf')) {
+                window.performanceMonitor.logMetrics();
+            }
+        }, 100);
+    });
+});

web_interface/static/v3/js/config/diff_viewer.js

@@ -0,0 +1,286 @@
+/**
+ * Configuration diff viewer.
+ * 
+ * Shows what changed in configuration before saving.
+ */
+
+const ConfigDiffViewer = {
+    /**
+     * Original configuration state (before changes).
+     */
+    originalConfigs: new Map(),
+    
+    /**
+     * Store original configuration for a plugin.
+     * 
+     * @param {string} pluginId - Plugin identifier
+     * @param {Object} config - Original configuration
+     */
+    storeOriginal(pluginId, config) {
+        this.originalConfigs.set(pluginId, JSON.parse(JSON.stringify(config)));
+    },
+    
+    /**
+     * Get original configuration for a plugin.
+     * 
+     * @param {string} pluginId - Plugin identifier
+     * @returns {Object|null} Original configuration
+     */
+    getOriginal(pluginId) {
+        return this.originalConfigs.get(pluginId) || null;
+    },
+    
+    /**
+     * Clear stored original configuration.
+     * 
+     * @param {string} pluginId - Plugin identifier
+     */
+    clearOriginal(pluginId) {
+        this.originalConfigs.delete(pluginId);
+    },
+    
+    /**
+     * Compare two configuration objects and return differences.
+     * 
+     * @param {Object} oldConfig - Old configuration
+     * @param {Object} newConfig - New configuration
+     * @returns {Object} Differences object with added, removed, and changed keys
+     */
+    compare(oldConfig, newConfig) {
+        const differences = {
+            added: {},
+            removed: {},
+            changed: {},
+            unchanged: {}
+        };
+        
+        // Get all keys from both configs
+        const allKeys = new Set([
+            ...Object.keys(oldConfig || {}),
+            ...Object.keys(newConfig || {})
+        ]);
+        
+        for (const key of allKeys) {
+            const oldValue = oldConfig?.[key];
+            const newValue = newConfig?.[key];
+            
+            if (!(key in (oldConfig || {}))) {
+                // Key was added
+                differences.added[key] = newValue;
+            } else if (!(key in (newConfig || {}))) {
+                // Key was removed
+                differences.removed[key] = oldValue;
+            } else if (JSON.stringify(oldValue) !== JSON.stringify(newValue)) {
+                // Key was changed
+                differences.changed[key] = {
+                    old: oldValue,
+                    new: newValue
+                };
+            } else {
+                // Key unchanged
+                differences.unchanged[key] = oldValue;
+            }
+        }
+        
+        return differences;
+    },
+    
+    /**
+     * Check if there are any differences.
+     * 
+     * @param {Object} differences - Differences object from compare()
+     * @returns {boolean} True if there are changes
+     */
+    hasChanges(differences) {
+        return Object.keys(differences.added).length > 0 ||
+               Object.keys(differences.removed).length > 0 ||
+               Object.keys(differences.changed).length > 0;
+    },
+    
+    /**
+     * Format differences for display.
+     * 
+     * @param {Object} differences - Differences object
+     * @returns {string} HTML formatted diff
+     */
+    formatDiff(differences) {
+        const parts = [];
+        
+        // Added keys
+        if (Object.keys(differences.added).length > 0) {
+            parts.push(`
+                <div class="mb-4">
+                    <h4 class="text-sm font-semibold text-green-800 mb-2">
+                        <i class="fas fa-plus-circle mr-1"></i>Added
+                    </h4>
+                    <div class="bg-green-50 border border-green-200 rounded p-3">
+                        ${Object.entries(differences.added).map(([key, value]) => `
+                            <div class="mb-2">
+                                <code class="text-xs font-mono bg-green-100 px-1 py-0.5 rounded">${this.escapeHtml(key)}</code>
+                                <span class="text-sm text-gray-700 ml-2">=</span>
+                                <pre class="mt-1 text-xs bg-white p-2 rounded border border-green-200 overflow-auto">${this.escapeHtml(JSON.stringify(value, null, 2))}</pre>
+                            </div>
+                        `).join('')}
+                    </div>
+                </div>
+            `);
+        }
+        
+        // Removed keys
+        if (Object.keys(differences.removed).length > 0) {
+            parts.push(`
+                <div class="mb-4">
+                    <h4 class="text-sm font-semibold text-red-800 mb-2">
+                        <i class="fas fa-minus-circle mr-1"></i>Removed
+                    </h4>
+                    <div class="bg-red-50 border border-red-200 rounded p-3">
+                        ${Object.entries(differences.removed).map(([key, value]) => `
+                            <div class="mb-2">
+                                <code class="text-xs font-mono bg-red-100 px-1 py-0.5 rounded">${this.escapeHtml(key)}</code>
+                                <span class="text-sm text-gray-700 ml-2">=</span>
+                                <pre class="mt-1 text-xs bg-white p-2 rounded border border-red-200 overflow-auto line-through text-gray-500">${this.escapeHtml(JSON.stringify(value, null, 2))}</pre>
+                            </div>
+                        `).join('')}
+                    </div>
+                </div>
+            `);
+        }
+        
+        // Changed keys
+        if (Object.keys(differences.changed).length > 0) {
+            parts.push(`
+                <div class="mb-4">
+                    <h4 class="text-sm font-semibold text-yellow-800 mb-2">
+                        <i class="fas fa-edit mr-1"></i>Changed
+                    </h4>
+                    <div class="bg-yellow-50 border border-yellow-200 rounded p-3">
+                        ${Object.entries(differences.changed).map(([key, change]) => `
+                            <div class="mb-3">
+                                <code class="text-xs font-mono bg-yellow-100 px-1 py-0.5 rounded">${this.escapeHtml(key)}</code>
+                                <div class="mt-2 grid grid-cols-2 gap-2">
+                                    <div>
+                                        <div class="text-xs font-medium text-red-700 mb-1">Old Value:</div>
+                                        <pre class="text-xs bg-white p-2 rounded border border-red-200 overflow-auto">${this.escapeHtml(JSON.stringify(change.old, null, 2))}</pre>
+                                    </div>
+                                    <div>
+                                        <div class="text-xs font-medium text-green-700 mb-1">New Value:</div>
+                                        <pre class="text-xs bg-white p-2 rounded border border-green-200 overflow-auto">${this.escapeHtml(JSON.stringify(change.new, null, 2))}</pre>
+                                    </div>
+                                </div>
+                            </div>
+                        `).join('')}
+                    </div>
+                </div>
+            `);
+        }
+        
+        if (parts.length === 0) {
+            return '<div class="text-sm text-gray-600 text-center py-4">No changes detected</div>';
+        }
+        
+        return parts.join('');
+    },
+    
+    /**
+     * Show diff modal before saving.
+     * 
+     * @param {string} pluginId - Plugin identifier
+     * @param {Object} newConfig - New configuration
+     * @returns {Promise<boolean>} Promise resolving to true if user confirms, false if cancelled
+     */
+    async showDiffModal(pluginId, newConfig) {
+        return new Promise((resolve) => {
+            const original = this.getOriginal(pluginId);
+            if (!original) {
+                // No original to compare, proceed without diff
+                resolve(true);
+                return;
+            }
+            
+            const differences = this.compare(original, newConfig);
+            
+            if (!this.hasChanges(differences)) {
+                // No changes, proceed without showing modal
+                resolve(true);
+                return;
+            }
+            
+            // Create modal
+            const modalContainer = document.createElement('div');
+            modalContainer.id = 'config-diff-modal-container';
+            modalContainer.className = 'fixed inset-0 z-50 overflow-y-auto';
+            modalContainer.innerHTML = `
+                <div class="flex items-center justify-center min-h-screen px-4 pt-4 pb-20 text-center sm:block sm:p-0">
+                    <div class="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity" onclick="this.closest('#config-diff-modal-container').remove(); window.__configDiffResolve(false);"></div>
+                    
+                    <div class="inline-block align-bottom bg-white rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-4xl sm:w-full">
+                        <div class="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
+                            <div class="sm:flex sm:items-start">
+                                <div class="mx-auto flex-shrink-0 flex items-center justify-center h-12 w-12 rounded-full bg-blue-100 sm:mx-0 sm:h-10 sm:w-10">
+                                    <i class="fas fa-code-branch text-blue-600"></i>
+                                </div>
+                                <div class="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left flex-1">
+                                    <h3 class="text-lg leading-6 font-medium text-gray-900">Review Configuration Changes</h3>
+                                    <div class="mt-4 max-h-96 overflow-y-auto">
+                                        ${this.formatDiff(differences)}
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="bg-gray-50 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse">
+                            <button id="config-diff-confirm-btn" 
+                                    class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-600 text-base font-medium text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 sm:ml-3 sm:w-auto sm:text-sm">
+                                <i class="fas fa-check mr-2"></i>Save Changes
+                            </button>
+                            <button id="config-diff-cancel-btn" 
+                                    class="mt-3 w-full inline-flex justify-center rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-base font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 sm:mt-0 sm:ml-3 sm:w-auto sm:text-sm">
+                                Cancel
+                            </button>
+                        </div>
+                    </div>
+                </div>
+            `;
+            
+            document.body.appendChild(modalContainer);
+            
+            // Store resolve function globally (hack for onclick handlers)
+            window.__configDiffResolve = resolve;
+            
+            // Attach event listeners
+            const confirmBtn = modalContainer.querySelector('#config-diff-confirm-btn');
+            const cancelBtn = modalContainer.querySelector('#config-diff-cancel-btn');
+            
+            confirmBtn.addEventListener('click', () => {
+                modalContainer.remove();
+                delete window.__configDiffResolve;
+                resolve(true);
+            });
+            
+            cancelBtn.addEventListener('click', () => {
+                modalContainer.remove();
+                delete window.__configDiffResolve;
+                resolve(false);
+            });
+        });
+    },
+    
+    /**
+     * Escape HTML to prevent XSS.
+     */
+    escapeHtml(text) {
+        if (typeof text !== 'string') {
+            text = String(text);
+        }
+        const div = document.createElement('div');
+        div.textContent = text;
+        return div.innerHTML;
+    }
+};
+
+// Export
+if (typeof module !== 'undefined' && module.exports) {
+    module.exports = ConfigDiffViewer;
+} else {
+    window.ConfigDiffViewer = ConfigDiffViewer;
+}
+

web_interface/static/v3/js/htmx-json-enc.js

@@ -0,0 +1,12 @@
+htmx.defineExtension('json-enc', {
+    onEvent: function (name, evt) {
+        if (name === "htmx:configRequest") {
+            evt.detail.headers['Content-Type'] = "application/json";
+        }
+    },
+    
+    encodeParameters : function(xhr, parameters, elt) {
+        xhr.overrideMimeType('text/json');
+        return (JSON.stringify(parameters));
+    }
+});

web_interface/static/v3/js/htmx-sse.js

@@ -0,0 +1,355 @@
+/*
+Server Sent Events Extension
+============================
+This extension adds support for Server Sent Events to htmx.  See /www/extensions/sse.md for usage instructions.
+
+*/
+
+(function() {
+
+	/** @type {import("../htmx").HtmxInternalApi} */
+	var api;
+
+	htmx.defineExtension("sse", {
+
+		/**
+		 * Init saves the provided reference to the internal HTMX API.
+		 * 
+		 * @param {import("../htmx").HtmxInternalApi} api 
+		 * @returns void
+		 */
+		init: function(apiRef) {
+			// store a reference to the internal API.
+			api = apiRef;
+
+			// set a function in the public API for creating new EventSource objects
+			if (htmx.createEventSource == undefined) {
+				htmx.createEventSource = createEventSource;
+			}
+		},
+
+		/**
+		 * onEvent handles all events passed to this extension.
+		 * 
+		 * @param {string} name 
+		 * @param {Event} evt 
+		 * @returns void
+		 */
+		onEvent: function(name, evt) {
+
+			switch (name) {
+
+				case "htmx:beforeCleanupElement":
+					var internalData = api.getInternalData(evt.target)
+					// Try to remove remove an EventSource when elements are removed
+					if (internalData.sseEventSource) {
+						internalData.sseEventSource.close();
+					}
+
+					return;
+
+				// Try to create EventSources when elements are processed
+				case "htmx:afterProcessNode":
+					ensureEventSourceOnElement(evt.target);
+					registerSSE(evt.target);
+			}
+		}
+	});
+
+	///////////////////////////////////////////////
+	// HELPER FUNCTIONS
+	///////////////////////////////////////////////
+
+
+	/**
+	 * createEventSource is the default method for creating new EventSource objects.
+	 * it is hoisted into htmx.config.createEventSource to be overridden by the user, if needed.
+	 * 
+	 * @param {string} url 
+	 * @returns EventSource
+	 */
+	function createEventSource(url) {
+		return new EventSource(url, { withCredentials: true });
+	}
+
+	function splitOnWhitespace(trigger) {
+		return trigger.trim().split(/\s+/);
+	}
+
+	function getLegacySSEURL(elt) {
+		var legacySSEValue = api.getAttributeValue(elt, "hx-sse");
+		if (legacySSEValue) {
+			var values = splitOnWhitespace(legacySSEValue);
+			for (var i = 0; i < values.length; i++) {
+				var value = values[i].split(/:(.+)/);
+				if (value[0] === "connect") {
+					return value[1];
+				}
+			}
+		}
+	}
+
+	function getLegacySSESwaps(elt) {
+		var legacySSEValue = api.getAttributeValue(elt, "hx-sse");
+		var returnArr = [];
+		if (legacySSEValue != null) {
+			var values = splitOnWhitespace(legacySSEValue);
+			for (var i = 0; i < values.length; i++) {
+				var value = values[i].split(/:(.+)/);
+				if (value[0] === "swap") {
+					returnArr.push(value[1]);
+				}
+			}
+		}
+		return returnArr;
+	}
+
+	/**
+	 * registerSSE looks for attributes that can contain sse events, right 
+	 * now hx-trigger and sse-swap and adds listeners based on these attributes too
+	 * the closest event source
+	 *
+	 * @param {HTMLElement} elt
+	 */
+	function registerSSE(elt) {
+		// Find closest existing event source
+		var sourceElement = api.getClosestMatch(elt, hasEventSource);
+		if (sourceElement == null) {
+			// api.triggerErrorEvent(elt, "htmx:noSSESourceError")
+			return null; // no eventsource in parentage, orphaned element
+		}
+
+		// Set internalData and source
+		var internalData = api.getInternalData(sourceElement);
+		var source = internalData.sseEventSource;
+
+		// Add message handlers for every `sse-swap` attribute
+		queryAttributeOnThisOrChildren(elt, "sse-swap").forEach(function(child) {
+
+			var sseSwapAttr = api.getAttributeValue(child, "sse-swap");
+			if (sseSwapAttr) {
+				var sseEventNames = sseSwapAttr.split(",");
+			} else {
+				var sseEventNames = getLegacySSESwaps(child);
+			}
+
+			for (var i = 0; i < sseEventNames.length; i++) {
+				var sseEventName = sseEventNames[i].trim();
+				var listener = function(event) {
+
+					// If the source is missing then close SSE
+					if (maybeCloseSSESource(sourceElement)) {
+						return;
+					}
+
+					// If the body no longer contains the element, remove the listener
+					if (!api.bodyContains(child)) {
+						source.removeEventListener(sseEventName, listener);
+					}
+
+					// swap the response into the DOM and trigger a notification
+					swap(child, event.data);
+					api.triggerEvent(elt, "htmx:sseMessage", event);
+				};
+
+				// Register the new listener
+				api.getInternalData(child).sseEventListener = listener;
+				source.addEventListener(sseEventName, listener);
+			}
+		});
+
+		// Add message handlers for every `hx-trigger="sse:*"` attribute
+		queryAttributeOnThisOrChildren(elt, "hx-trigger").forEach(function(child) {
+
+			var sseEventName = api.getAttributeValue(child, "hx-trigger");
+			if (sseEventName == null) {
+				return;
+			}
+
+			// Only process hx-triggers for events with the "sse:" prefix
+			if (sseEventName.slice(0, 4) != "sse:") {
+				return;
+			}
+			
+			// remove the sse: prefix from here on out
+			sseEventName = sseEventName.substr(4);
+
+			var listener = function() {
+				if (maybeCloseSSESource(sourceElement)) {
+					return
+				}
+
+				if (!api.bodyContains(child)) {
+					source.removeEventListener(sseEventName, listener);
+				}
+			}
+		});
+	}
+
+	/**
+	 * ensureEventSourceOnElement creates a new EventSource connection on the provided element.
+	 * If a usable EventSource already exists, then it is returned.  If not, then a new EventSource
+	 * is created and stored in the element's internalData.
+	 * @param {HTMLElement} elt
+	 * @param {number} retryCount
+	 * @returns {EventSource | null}
+	 */
+	function ensureEventSourceOnElement(elt, retryCount) {
+
+		if (elt == null) {
+			return null;
+		}
+
+		// handle extension source creation attribute
+		queryAttributeOnThisOrChildren(elt, "sse-connect").forEach(function(child) {
+			var sseURL = api.getAttributeValue(child, "sse-connect");
+			if (sseURL == null) {
+				return;
+			}
+
+			ensureEventSource(child, sseURL, retryCount);
+		});
+
+		// handle legacy sse, remove for HTMX2
+		queryAttributeOnThisOrChildren(elt, "hx-sse").forEach(function(child) {
+			var sseURL = getLegacySSEURL(child);
+			if (sseURL == null) {
+				return;
+			}
+
+			ensureEventSource(child, sseURL, retryCount);
+		});
+
+	}
+
+	function ensureEventSource(elt, url, retryCount) {
+		var source = htmx.createEventSource(url);
+
+		source.onerror = function(err) {
+
+			// Log an error event
+			api.triggerErrorEvent(elt, "htmx:sseError", { error: err, source: source });
+
+			// If parent no longer exists in the document, then clean up this EventSource
+			if (maybeCloseSSESource(elt)) {
+				return;
+			}
+
+			// Otherwise, try to reconnect the EventSource
+			if (source.readyState === EventSource.CLOSED) {
+				retryCount = retryCount || 0;
+				var timeout = Math.random() * (2 ^ retryCount) * 500;
+				window.setTimeout(function() {
+					ensureEventSourceOnElement(elt, Math.min(7, retryCount + 1));
+				}, timeout);
+			}
+		};
+
+		source.onopen = function(evt) {
+			api.triggerEvent(elt, "htmx:sseOpen", { source: source });
+		}
+
+		api.getInternalData(elt).sseEventSource = source;
+	}
+
+	/**
+	 * maybeCloseSSESource confirms that the parent element still exists.
+	 * If not, then any associated SSE source is closed and the function returns true.
+	 * 
+	 * @param {HTMLElement} elt 
+	 * @returns boolean
+	 */
+	function maybeCloseSSESource(elt) {
+		if (!api.bodyContains(elt)) {
+			var source = api.getInternalData(elt).sseEventSource;
+			if (source != undefined) {
+				source.close();
+				// source = null
+				return true;
+			}
+		}
+		return false;
+	}
+
+	/**
+	 * queryAttributeOnThisOrChildren returns all nodes that contain the requested attributeName, INCLUDING THE PROVIDED ROOT ELEMENT.
+	 * 
+	 * @param {HTMLElement} elt 
+	 * @param {string} attributeName 
+	 */
+	function queryAttributeOnThisOrChildren(elt, attributeName) {
+
+		var result = [];
+
+		// If the parent element also contains the requested attribute, then add it to the results too.
+		if (api.hasAttribute(elt, attributeName)) {
+			result.push(elt);
+		}
+
+		// Search all child nodes that match the requested attribute
+		elt.querySelectorAll("[" + attributeName + "], [data-" + attributeName + "]").forEach(function(node) {
+			result.push(node);
+		});
+
+		return result;
+	}
+
+	/**
+	 * @param {HTMLElement} elt
+	 * @param {string} content 
+	 */
+	function swap(elt, content) {
+
+		api.withExtensions(elt, function(extension) {
+			content = extension.transformResponse(content, null, elt);
+		});
+
+		var swapSpec = api.getSwapSpecification(elt);
+		var target = api.getTarget(elt);
+		var settleInfo = api.makeSettleInfo(elt);
+
+		api.selectAndSwap(swapSpec.swapStyle, target, elt, content, settleInfo);
+
+		settleInfo.elts.forEach(function(elt) {
+			if (elt.classList) {
+				elt.classList.add(htmx.config.settlingClass);
+			}
+			api.triggerEvent(elt, 'htmx:beforeSettle');
+		});
+
+		// Handle settle tasks (with delay if requested)
+		if (swapSpec.settleDelay > 0) {
+			setTimeout(doSettle(settleInfo), swapSpec.settleDelay);
+		} else {
+			doSettle(settleInfo)();
+		}
+	}
+
+	/**
+	 * doSettle mirrors much of the functionality in htmx that 
+	 * settles elements after their content has been swapped.
+	 * TODO: this should be published by htmx, and not duplicated here
+	 * @param {import("../htmx").HtmxSettleInfo} settleInfo 
+	 * @returns () => void
+	 */
+	function doSettle(settleInfo) {
+
+		return function() {
+			settleInfo.tasks.forEach(function(task) {
+				task.call();
+			});
+
+			settleInfo.elts.forEach(function(elt) {
+				if (elt.classList) {
+					elt.classList.remove(htmx.config.settlingClass);
+				}
+				api.triggerEvent(elt, 'htmx:afterSettle');
+			});
+		}
+	}
+
+	function hasEventSource(node) {
+		return api.getInternalData(node).sseEventSource != null;
+	}
+
+})();

web_interface/static/v3/js/plugins/api_client.js

@@ -0,0 +1,357 @@
+/**
+ * API client for plugin operations.
+ * 
+ * Handles all communication with the /api/v3/plugins endpoints.
+ * Includes request throttling and caching for performance optimization.
+ */
+
+// Request throttling utility
+const RequestThrottler = {
+    pending: new Map(),
+    cache: new Map(),
+    cacheTTL: 5000, // 5 seconds cache for GET requests
+    debug: false, // Set to true to enable logging
+    
+    /**
+     * Throttle a request to prevent rapid-fire calls
+     */
+    async throttle(key, fn, delay = 300) {
+        // Check cache first
+        const cached = this.cache.get(key);
+        if (cached && (Date.now() - cached.timestamp) < this.cacheTTL) {
+            if (this.debug) {
+                console.log('[RequestThrottler] Cache hit for:', key);
+            }
+            return cached.data;
+        }
+        
+        // Check if request is already pending
+        if (this.pending.has(key)) {
+            if (this.debug) {
+                console.log('[RequestThrottler] Reusing pending request for:', key);
+            }
+            return this.pending.get(key);
+        }
+        
+        if (this.debug) {
+            console.log('[RequestThrottler] Creating new request for:', key);
+        }
+        
+        // Create throttled request with abort support
+        let abortController = null;
+        const promise = new Promise((resolve, reject) => {
+            const timeoutId = setTimeout(async () => {
+                try {
+                    const result = await fn();
+                    // Cache successful GET requests
+                    if (key.includes('GET')) {
+                        this.cache.set(key, {
+                            data: result,
+                            timestamp: Date.now()
+                        });
+                        if (this.debug) {
+                            console.log('[RequestThrottler] Cached response for:', key);
+                        }
+                    }
+                    resolve(result);
+                } catch (error) {
+                    // Don't cache errors
+                    if (this.debug) {
+                        console.error('[RequestThrottler] Request failed for:', key, error);
+                    }
+                    reject(error);
+                } finally {
+                    this.pending.delete(key);
+                }
+            }, delay);
+            
+            // Store abort controller if available
+            if (fn.abort && typeof fn.abort === 'function') {
+                abortController = fn.abort;
+            }
+        });
+        
+        // Add abort method if available
+        if (abortController) {
+            promise.abort = () => {
+                if (this.debug) {
+                    console.log('[RequestThrottler] Aborting request for:', key);
+                }
+                abortController.abort();
+                this.pending.delete(key);
+            };
+        }
+        
+        this.pending.set(key, promise);
+        return promise;
+    },
+    
+    /**
+     * Clear cache for a specific key or all cache
+     */
+    clearCache(key = null) {
+        if (key) {
+            this.cache.delete(key);
+        } else {
+            this.cache.clear();
+        }
+    },
+    
+    /**
+     * Enable or disable debug logging
+     */
+    setDebug(enabled) {
+        this.debug = enabled;
+    },
+    
+    /**
+     * Get statistics about pending requests and cache
+     */
+    getStats() {
+        return {
+            pendingCount: this.pending.size,
+            cacheSize: this.cache.size,
+            pendingKeys: Array.from(this.pending.keys()),
+            cacheKeys: Array.from(this.cache.keys())
+        };
+    }
+};
+
+const PluginAPI = {
+    /**
+     * Base URL for API endpoints.
+     */
+    baseURL: '/api/v3',
+    
+    /**
+     * Make an API request with throttling and caching.
+     * 
+     * @param {string} endpoint - API endpoint
+     * @param {string} method - HTTP method
+     * @param {Object} data - Request body data
+     * @param {boolean} useThrottle - Whether to throttle this request (default: true for GET)
+     * @returns {Promise<Object>} Response data
+     */
+    async request(endpoint, method = 'GET', data = null, useThrottle = null) {
+        // Default throttling: only for GET requests
+        if (useThrottle === null) {
+            useThrottle = method === 'GET';
+        }
+        
+        const requestKey = `${method}:${endpoint}:${data ? JSON.stringify(data) : ''}`;
+        
+        const makeRequest = async () => {
+            const url = `${this.baseURL}${endpoint}`;
+            const options = {
+                method,
+                headers: {
+                    'Content-Type': 'application/json'
+                }
+            };
+            
+            if (data && method !== 'GET') {
+                options.body = JSON.stringify(data);
+            }
+            
+            try {
+                const response = await fetch(url, options);
+                const responseData = await response.json();
+                
+                if (!response.ok) {
+                    // Handle structured errors
+                    if (responseData.error_code) {
+                        throw responseData;
+                    }
+                    throw new Error(responseData.message || `HTTP ${response.status}`);
+                }
+                
+                return responseData;
+            } catch (error) {
+                // Re-throw structured errors
+                if (error.error_code) {
+                    throw error;
+                }
+                // Wrap network errors
+                throw {
+                    error_code: 'NETWORK_ERROR',
+                    message: error.message || 'Network error',
+                    original_error: error
+                };
+            }
+        };
+        
+        // Use throttling for GET requests, immediate execution for POST/PUT/DELETE
+        if (useThrottle && method === 'GET') {
+            return await RequestThrottler.throttle(requestKey, makeRequest, 100);
+        } else {
+            return await makeRequest();
+        }
+    },
+    
+    /**
+     * Batch multiple requests together for better performance
+     * 
+     * @param {Array} requests - Array of {endpoint, method, data} objects
+     * @returns {Promise<Array>} Array of response data
+     */
+    async batch(requests) {
+        return Promise.all(requests.map(req => 
+            this.request(req.endpoint, req.method || 'GET', req.data || null, false)
+        ));
+    },
+    
+    /**
+     * Clear API cache
+     */
+    clearCache() {
+        RequestThrottler.clearCache();
+    },
+    
+    /**
+     * Get installed plugins.
+     * 
+     * @returns {Promise<Array>} List of installed plugins
+     */
+    async getInstalledPlugins() {
+        const response = await this.request('/plugins/installed');
+        // API returns {status: 'success', data: {plugins: [...]}}
+        // Extract the plugins array from response.data.plugins
+        if (response.data && Array.isArray(response.data.plugins)) {
+            return response.data.plugins;
+        }
+        return [];
+    },
+    
+    /**
+     * Toggle plugin enabled/disabled.
+     * 
+     * @param {string} pluginId - Plugin identifier
+     * @param {boolean} enabled - Whether plugin should be enabled
+     * @returns {Promise<Object>} Response data
+     */
+    async togglePlugin(pluginId, enabled) {
+        return await this.request('/plugins/toggle', 'POST', {
+            plugin_id: pluginId,
+            enabled: enabled
+        });
+    },
+    
+    /**
+     * Get plugin configuration.
+     * 
+     * @param {string} pluginId - Plugin identifier
+     * @returns {Promise<Object>} Plugin configuration
+     */
+    async getPluginConfig(pluginId) {
+        const response = await this.request(`/plugins/config?plugin_id=${pluginId}`);
+        return response.data || {};
+    },
+    
+    /**
+     * Save plugin configuration.
+     * 
+     * @param {string} pluginId - Plugin identifier
+     * @param {Object} config - Configuration data
+     * @returns {Promise<Object>} Response data
+     */
+    async savePluginConfig(pluginId, config) {
+        return await this.request('/plugins/config', 'POST', {
+            plugin_id: pluginId,
+            config: config
+        });
+    },
+    
+    /**
+     * Reset plugin configuration to defaults.
+     * 
+     * @param {string} pluginId - Plugin identifier
+     * @returns {Promise<Object>} Response data
+     */
+    async resetPluginConfig(pluginId) {
+        return await this.request(`/plugins/config/reset?plugin_id=${pluginId}`, 'POST');
+    },
+    
+    /**
+     * Get plugin schema.
+     * 
+     * @param {string} pluginId - Plugin identifier
+     * @returns {Promise<Object>} Plugin schema
+     */
+    async getPluginSchema(pluginId) {
+        const response = await this.request(`/plugins/schema?plugin_id=${pluginId}`);
+        return response.data?.schema || null;
+    },
+    
+    /**
+     * Install plugin from store.
+     * 
+     * @param {string} pluginId - Plugin identifier
+     * @param {string} branch - Optional branch name to install from
+     * @returns {Promise<Object>} Response data
+     */
+    async installPlugin(pluginId, branch = null) {
+        const data = {
+            plugin_id: pluginId
+        };
+        if (branch) {
+            data.branch = branch;
+        }
+        return await this.request('/plugins/install', 'POST', data);
+    },
+    
+    /**
+     * Update plugin.
+     * 
+     * @param {string} pluginId - Plugin identifier
+     * @returns {Promise<Object>} Response data
+     */
+    async updatePlugin(pluginId) {
+        return await this.request('/plugins/update', 'POST', {
+            plugin_id: pluginId
+        });
+    },
+    
+    /**
+     * Uninstall plugin.
+     * 
+     * @param {string} pluginId - Plugin identifier
+     * @returns {Promise<Object>} Response data
+     */
+    async uninstallPlugin(pluginId) {
+        return await this.request('/plugins/uninstall', 'POST', {
+            plugin_id: pluginId
+        });
+    },
+    
+    /**
+     * Get plugin store.
+     * 
+     * @returns {Promise<Array>} List of available plugins
+     */
+    async getPluginStore() {
+        const response = await this.request('/plugins/store');
+        return response.data || [];
+    },
+    
+    /**
+     * Get plugin health.
+     * 
+     * @param {string} pluginId - Optional plugin identifier (null for all)
+     * @returns {Promise<Object>} Health data
+     */
+    async getPluginHealth(pluginId = null) {
+        const endpoint = pluginId 
+            ? `/plugins/health/${pluginId}`
+            : '/plugins/health';
+        const response = await this.request(endpoint);
+        return response.data || {};
+    }
+};
+
+// Export
+if (typeof module !== 'undefined' && module.exports) {
+    module.exports = PluginAPI;
+} else {
+    window.PluginAPI = PluginAPI;
+}
+

web_interface/static/v3/js/plugins/config_manager.js

@@ -0,0 +1,133 @@
+/**
+ * Plugin configuration form management.
+ * 
+ * Handles configuration form generation, validation, and submission.
+ */
+
+const PluginConfigManager = {
+    /**
+     * Current plugin configuration state.
+     */
+    currentState: {
+        pluginId: null,
+        config: null,
+        schema: null,
+        jsonEditor: null
+    },
+    
+    /**
+     * Initialize configuration for a plugin.
+     * 
+     * @param {string} pluginId - Plugin identifier
+     * @returns {Promise<Object>} Configuration and schema
+     */
+    async initialize(pluginId) {
+        try {
+            const [config, schema] = await Promise.all([
+                window.PluginAPI.getPluginConfig(pluginId),
+                window.PluginAPI.getPluginSchema(pluginId)
+            ]);
+            
+            this.currentState = {
+                pluginId,
+                config,
+                schema,
+                jsonEditor: null
+            };
+            
+            return { config, schema };
+        } catch (error) {
+            if (window.errorHandler) {
+                window.errorHandler.displayError(error, `Failed to initialize config for ${pluginId}`);
+            }
+            throw error;
+        }
+    },
+    
+    /**
+     * Reset configuration to defaults.
+     * 
+     * @param {string} pluginId - Plugin identifier
+     * @returns {Promise<Object>} Default configuration
+     */
+    async resetToDefaults(pluginId) {
+        try {
+            const result = await window.PluginAPI.resetPluginConfig(pluginId);
+            
+            // Reload configuration
+            if (this.currentState.pluginId === pluginId) {
+                await this.initialize(pluginId);
+            }
+            
+            return result;
+        } catch (error) {
+            if (window.errorHandler) {
+                window.errorHandler.displayError(error, `Failed to reset config for ${pluginId}`);
+            }
+            throw error;
+        }
+    },
+    
+    /**
+     * Save configuration.
+     * 
+     * @param {string} pluginId - Plugin identifier
+     * @param {Object} config - Configuration data
+     * @returns {Promise<Object>} Save result
+     */
+    async save(pluginId, config) {
+        try {
+            const result = await window.PluginAPI.savePluginConfig(pluginId, config);
+            
+            // Update local state
+            if (this.currentState.pluginId === pluginId) {
+                this.currentState.config = config;
+            }
+            
+            return result;
+        } catch (error) {
+            if (window.errorHandler) {
+                window.errorHandler.displayError(error, `Failed to save config for ${pluginId}`);
+            }
+            throw error;
+        }
+    },
+    
+    /**
+     * Validate configuration against schema.
+     * 
+     * @param {Object} config - Configuration data
+     * @param {Object} schema - JSON schema
+     * @returns {Object} Validation result with errors
+     */
+    validate(config, schema) {
+        // Basic validation - full validation happens on server
+        const errors = [];
+        
+        if (!schema || !schema.properties) {
+            return { valid: true, errors: [] };
+        }
+        
+        // Check required fields
+        if (schema.required) {
+            for (const field of schema.required) {
+                if (!(field in config)) {
+                    errors.push(`Required field '${field}' is missing`);
+                }
+            }
+        }
+        
+        return {
+            valid: errors.length === 0,
+            errors: errors
+        };
+    }
+};
+
+// Export
+if (typeof module !== 'undefined' && module.exports) {
+    module.exports = PluginConfigManager;
+} else {
+    window.PluginConfigManager = PluginConfigManager;
+}
+

web_interface/static/v3/js/plugins/install_manager.js

@@ -0,0 +1,113 @@
+/**
+ * Plugin installation and update management.
+ * 
+ * Handles plugin installation, updates, and uninstallation operations.
+ */
+
+const PluginInstallManager = {
+    /**
+     * Install a plugin.
+     * 
+     * @param {string} pluginId - Plugin identifier
+     * @param {string} branch - Optional branch name to install from
+     * @returns {Promise<Object>} Installation result
+     */
+    async install(pluginId, branch = null) {
+        try {
+            const result = await window.PluginAPI.installPlugin(pluginId, branch);
+            
+            // Refresh installed plugins list
+            if (window.PluginStateManager) {
+                await window.PluginStateManager.loadInstalledPlugins();
+            }
+            
+            return result;
+        } catch (error) {
+            if (window.errorHandler) {
+                window.errorHandler.displayError(error, `Failed to install plugin ${pluginId}`);
+            }
+            throw error;
+        }
+    },
+    
+    /**
+     * Update a plugin.
+     * 
+     * @param {string} pluginId - Plugin identifier
+     * @returns {Promise<Object>} Update result
+     */
+    async update(pluginId) {
+        try {
+            const result = await window.PluginAPI.updatePlugin(pluginId);
+            
+            // Refresh installed plugins list
+            if (window.PluginStateManager) {
+                await window.PluginStateManager.loadInstalledPlugins();
+            }
+            
+            return result;
+        } catch (error) {
+            if (window.errorHandler) {
+                window.errorHandler.displayError(error, `Failed to update plugin ${pluginId}`);
+            }
+            throw error;
+        }
+    },
+    
+    /**
+     * Uninstall a plugin.
+     * 
+     * @param {string} pluginId - Plugin identifier
+     * @returns {Promise<Object>} Uninstall result
+     */
+    async uninstall(pluginId) {
+        try {
+            const result = await window.PluginAPI.uninstallPlugin(pluginId);
+            
+            // Refresh installed plugins list
+            if (window.PluginStateManager) {
+                await window.PluginStateManager.loadInstalledPlugins();
+            }
+            
+            return result;
+        } catch (error) {
+            if (window.errorHandler) {
+                window.errorHandler.displayError(error, `Failed to uninstall plugin ${pluginId}`);
+            }
+            throw error;
+        }
+    },
+    
+    /**
+     * Update all plugins.
+     * 
+     * @returns {Promise<Array>} Update results
+     */
+    async updateAll() {
+        if (!window.PluginStateManager || !window.PluginStateManager.installedPlugins) {
+            throw new Error('Installed plugins not loaded');
+        }
+        
+        const plugins = window.PluginStateManager.installedPlugins;
+        const results = [];
+        
+        for (const plugin of plugins) {
+            try {
+                const result = await this.update(plugin.id);
+                results.push({ pluginId: plugin.id, success: true, result });
+            } catch (error) {
+                results.push({ pluginId: plugin.id, success: false, error });
+            }
+        }
+        
+        return results;
+    }
+};
+
+// Export
+if (typeof module !== 'undefined' && module.exports) {
+    module.exports = PluginInstallManager;
+} else {
+    window.PluginInstallManager = PluginInstallManager;
+}
+

web_interface/static/v3/js/plugins/state_manager.js

@@ -0,0 +1,121 @@
+/**
+ * Frontend plugin state management.
+ * 
+ * Manages local state for installed plugins and provides state synchronization.
+ */
+
+const PluginStateManager = {
+    /**
+     * Installed plugins state.
+     */
+    installedPlugins: [],
+    
+    /**
+     * Current plugin configuration state.
+     */
+    currentConfig: null,
+    
+    /**
+     * Load installed plugins.
+     * 
+     * @returns {Promise<Array>} List of installed plugins
+     */
+    async loadInstalledPlugins() {
+        try {
+            const plugins = await window.PluginAPI.getInstalledPlugins();
+            this.installedPlugins = plugins;
+            window.installedPlugins = plugins; // For backward compatibility
+            return plugins;
+        } catch (error) {
+            if (window.errorHandler) {
+                window.errorHandler.displayError(error, 'Failed to load installed plugins');
+            }
+            throw error;
+        }
+    },
+    
+    /**
+     * Get plugin by ID.
+     * 
+     * @param {string} pluginId - Plugin identifier
+     * @returns {Object|null} Plugin object or null
+     */
+    getPlugin(pluginId) {
+        return this.installedPlugins.find(p => p.id === pluginId) || null;
+    },
+    
+    /**
+     * Update plugin state.
+     * 
+     * @param {string} pluginId - Plugin identifier
+     * @param {Object} updates - State updates
+     */
+    updatePlugin(pluginId, updates) {
+        const plugin = this.getPlugin(pluginId);
+        if (plugin) {
+            Object.assign(plugin, updates);
+        }
+    },
+    
+    /**
+     * Set plugin enabled state.
+     * 
+     * @param {string} pluginId - Plugin identifier
+     * @param {boolean} enabled - Whether plugin is enabled
+     */
+    setPluginEnabled(pluginId, enabled) {
+        this.updatePlugin(pluginId, { enabled });
+    },
+    
+    /**
+     * Get current plugin configuration.
+     * 
+     * @param {string} pluginId - Plugin identifier
+     * @returns {Promise<Object>} Plugin configuration
+     */
+    async getPluginConfig(pluginId) {
+        try {
+            const config = await window.PluginAPI.getPluginConfig(pluginId);
+            this.currentConfig = { pluginId, config };
+            return config;
+        } catch (error) {
+            if (window.errorHandler) {
+                window.errorHandler.displayError(error, `Failed to load config for ${pluginId}`);
+            }
+            throw error;
+        }
+    },
+    
+    /**
+     * Save plugin configuration.
+     * 
+     * @param {string} pluginId - Plugin identifier
+     * @param {Object} config - Configuration data
+     * @returns {Promise<Object>} Save result
+     */
+    async savePluginConfig(pluginId, config) {
+        try {
+            const result = await window.PluginAPI.savePluginConfig(pluginId, config);
+            
+            // Update local state
+            if (this.currentConfig && this.currentConfig.pluginId === pluginId) {
+                this.currentConfig.config = config;
+            }
+            
+            return result;
+        } catch (error) {
+            if (window.errorHandler) {
+                window.errorHandler.displayError(error, `Failed to save config for ${pluginId}`);
+            }
+            throw error;
+        }
+    }
+};
+
+// Export
+if (typeof module !== 'undefined' && module.exports) {
+    module.exports = PluginStateManager;
+} else {
+    window.PluginStateManager = PluginStateManager;
+}
+

web_interface/static/v3/js/plugins/store_manager.js

@@ -0,0 +1,101 @@
+/**
+ * Plugin store management.
+ * 
+ * Handles plugin store browsing, searching, and installation.
+ */
+
+const PluginStoreManager = {
+    /**
+     * Cache for plugin store data.
+     */
+    cache: null,
+    cacheTimestamp: null,
+    CACHE_DURATION: 5 * 60 * 1000, // 5 minutes
+    
+    /**
+     * Load plugin store.
+     * 
+     * @param {boolean} useCache - Whether to use cached data
+     * @returns {Promise<Array>} List of plugins
+     */
+    async loadStore(useCache = true) {
+        // Check cache
+        if (useCache && this.cache && this.cacheTimestamp) {
+            const age = Date.now() - this.cacheTimestamp;
+            if (age < this.CACHE_DURATION) {
+                return this.cache;
+            }
+        }
+        
+        try {
+            const plugins = await window.PluginAPI.getPluginStore();
+            this.cache = plugins;
+            this.cacheTimestamp = Date.now();
+            return plugins;
+        } catch (error) {
+            if (window.errorHandler) {
+                window.errorHandler.displayError(error, 'Failed to load plugin store');
+            }
+            throw error;
+        }
+    },
+    
+    /**
+     * Search plugin store.
+     * 
+     * @param {string} query - Search query
+     * @returns {Promise<Array>} Filtered list of plugins
+     */
+    async searchStore(query) {
+        const plugins = await this.loadStore();
+        
+        if (!query || query.trim() === '') {
+            return plugins;
+        }
+        
+        const lowerQuery = query.toLowerCase();
+        return plugins.filter(plugin => {
+            const name = (plugin.name || '').toLowerCase();
+            const description = (plugin.description || '').toLowerCase();
+            const author = (plugin.author || '').toLowerCase();
+            const category = (plugin.category || '').toLowerCase();
+            
+            return name.includes(lowerQuery) ||
+                   description.includes(lowerQuery) ||
+                   author.includes(lowerQuery) ||
+                   category.includes(lowerQuery);
+        });
+    },
+    
+    /**
+     * Install plugin from store.
+     * 
+     * @param {string} pluginId - Plugin identifier
+     * @param {string} branch - Optional branch name to install from
+     * @returns {Promise<Object>} Installation result
+     */
+    async installPlugin(pluginId, branch = null) {
+        try {
+            const result = await window.PluginAPI.installPlugin(pluginId, branch);
+            
+            // Clear cache
+            this.cache = null;
+            this.cacheTimestamp = null;
+            
+            return result;
+        } catch (error) {
+            if (window.errorHandler) {
+                window.errorHandler.displayError(error, `Failed to install plugin ${pluginId}`);
+            }
+            throw error;
+        }
+    }
+};
+
+// Export
+if (typeof module !== 'undefined' && module.exports) {
+    module.exports = PluginStoreManager;
+} else {
+    window.PluginStoreManager = PluginStoreManager;
+}
+

web_interface/static/v3/js/utils/error_handler.js

@@ -0,0 +1,333 @@
+/**
+ * Frontend error handling utilities.
+ * 
+ * Provides user-friendly error formatting and display with enhanced UI.
+ */
+
+/**
+ * Comprehensive error code to user-friendly message mapping.
+ */
+const ERROR_MESSAGES = {
+    // Configuration errors
+    'CONFIG_SAVE_FAILED': 'Failed to save configuration',
+    'CONFIG_LOAD_FAILED': 'Failed to load configuration',
+    'CONFIG_VALIDATION_FAILED': 'Configuration validation failed',
+    'CONFIG_ROLLBACK_FAILED': 'Failed to rollback configuration',
+    
+    // Plugin errors
+    'PLUGIN_NOT_FOUND': 'Plugin not found',
+    'PLUGIN_INSTALL_FAILED': 'Failed to install plugin',
+    'PLUGIN_UPDATE_FAILED': 'Failed to update plugin',
+    'PLUGIN_UNINSTALL_FAILED': 'Failed to uninstall plugin',
+    'PLUGIN_LOAD_FAILED': 'Failed to load plugin',
+    'PLUGIN_OPERATION_CONFLICT': 'Plugin operation conflict - another operation is in progress',
+    
+    // Validation errors
+    'VALIDATION_ERROR': 'Validation error',
+    'SCHEMA_VALIDATION_FAILED': 'Configuration schema validation failed',
+    'INVALID_INPUT': 'Invalid input provided',
+    
+    // Network errors
+    'NETWORK_ERROR': 'Network error occurred',
+    'API_ERROR': 'API request failed',
+    'TIMEOUT': 'Operation timed out',
+    
+    // Permission errors
+    'PERMISSION_DENIED': 'Permission denied',
+    'FILE_PERMISSION_ERROR': 'File permission error',
+    
+    // System errors
+    'SYSTEM_ERROR': 'System error occurred',
+    'SERVICE_UNAVAILABLE': 'Service unavailable',
+    
+    // Unknown errors
+    'UNKNOWN_ERROR': 'An unknown error occurred'
+};
+
+/**
+ * Error code to troubleshooting documentation links.
+ */
+const ERROR_DOCS = {
+    'CONFIG_SAVE_FAILED': 'https://github.com/your-repo/LEDMatrix/wiki/Troubleshooting#configuration-errors',
+    'CONFIG_VALIDATION_FAILED': 'https://github.com/your-repo/LEDMatrix/wiki/Troubleshooting#validation-errors',
+    'PLUGIN_INSTALL_FAILED': 'https://github.com/your-repo/LEDMatrix/wiki/Troubleshooting#plugin-installation',
+    'PLUGIN_OPERATION_CONFLICT': 'https://github.com/your-repo/LEDMatrix/wiki/Troubleshooting#plugin-operations',
+    'PERMISSION_DENIED': 'https://github.com/your-repo/LEDMatrix/wiki/Troubleshooting#permissions',
+    'FILE_PERMISSION_ERROR': 'https://github.com/your-repo/LEDMatrix/wiki/Troubleshooting#permissions'
+};
+
+/**
+ * Format error message for display to user.
+ * 
+ * @param {Object} error - Error object from API response
+ * @returns {string} Formatted error message
+ */
+function formatError(error) {
+    if (!error) {
+        return 'An unknown error occurred';
+    }
+    
+    // If error is a string, return it
+    if (typeof error === 'string') {
+        return error;
+    }
+    
+    // If error has a message, use it
+    if (error.message) {
+        return error.message;
+    }
+    
+    // If error has error_code, format it
+    if (error.error_code) {
+        const message = ERROR_MESSAGES[error.error_code] || error.message || 'An error occurred';
+        
+        // Add details if available
+        if (error.details) {
+            return `${message}: ${error.details}`;
+        }
+        
+        return message;
+    }
+    
+    return 'An error occurred';
+}
+
+/**
+ * Get suggested fixes for an error.
+ * 
+ * @param {Object} error - Error object from API response
+ * @returns {Array<string>} Array of suggested fixes
+ */
+function getSuggestedFixes(error) {
+    if (!error || !error.suggested_fixes) {
+        return [];
+    }
+    
+    return error.suggested_fixes;
+}
+
+/**
+ * Display error with suggestions in a rich UI.
+ * 
+ * @param {Object} error - Error object from API response
+ * @param {string} context - Optional context about what was being done
+ * @param {Object} options - Display options
+ * @param {boolean} options.showDetails - Whether to show detailed error modal
+ * @param {boolean} options.showCopyButton - Whether to show copy button
+ */
+function displayError(error, context = null, options = {}) {
+    const message = formatError(error);
+    const suggestions = getSuggestedFixes(error);
+    const errorCode = error?.error_code;
+    const docLink = errorCode ? ERROR_DOCS[errorCode] : null;
+    
+    // Build full message
+    let fullMessage = message;
+    if (context) {
+        fullMessage = `${context}: ${message}`;
+    }
+    
+    if (suggestions.length > 0) {
+        fullMessage += '\n\nSuggested fixes:\n' + suggestions.map(s => `• ${s}`).join('\n');
+    }
+    
+    // If showDetails is true, show a rich error modal
+    if (options.showDetails !== false && (suggestions.length > 0 || docLink || error.details)) {
+        showErrorModal(error, context, message, suggestions, docLink);
+    } else {
+        // Simple notification
+        if (typeof showNotification === 'function') {
+            showNotification(fullMessage, 'error');
+        } else {
+            console.error('Error:', fullMessage);
+            alert(fullMessage);
+        }
+    }
+}
+
+/**
+ * Show a rich error modal with details, suggestions, and copy button.
+ * 
+ * @param {Object} error - Error object
+ * @param {string} context - Context
+ * @param {string} message - Formatted message
+ * @param {Array<string>} suggestions - Suggested fixes
+ * @param {string} docLink - Documentation link
+ */
+function showErrorModal(error, context, message, suggestions, docLink) {
+    // Create modal container if it doesn't exist
+    let modalContainer = document.getElementById('error-modal-container');
+    if (!modalContainer) {
+        modalContainer = document.createElement('div');
+        modalContainer.id = 'error-modal-container';
+        modalContainer.className = 'fixed inset-0 z-50 overflow-y-auto';
+        modalContainer.style.display = 'none';
+        document.body.appendChild(modalContainer);
+    }
+    
+    // Build modal content
+    const contextText = context ? `<div class="text-sm text-gray-600 mb-2">${escapeHtml(context)}</div>` : '';
+    const suggestionsHtml = suggestions.length > 0 ? `
+        <div class="mt-4">
+            <h4 class="text-sm font-semibold text-gray-900 mb-2">Suggested fixes:</h4>
+            <ul class="list-disc list-inside space-y-1 text-sm text-gray-700">
+                ${suggestions.map(s => `<li>${escapeHtml(s)}</li>`).join('')}
+            </ul>
+        </div>
+    ` : '';
+    
+    const docLinkHtml = docLink ? `
+        <div class="mt-4">
+            <a href="${docLink}" target="_blank" class="text-blue-600 hover:text-blue-800 text-sm underline">
+                <i class="fas fa-book mr-1"></i>View troubleshooting guide
+            </a>
+        </div>
+    ` : '';
+    
+    const detailsHtml = error.details ? `
+        <div class="mt-4">
+            <details class="cursor-pointer">
+                <summary class="text-sm font-medium text-gray-700 hover:text-gray-900">Technical details</summary>
+                <pre class="mt-2 text-xs bg-gray-100 p-3 rounded overflow-auto max-h-48 text-gray-800">${escapeHtml(error.details)}</pre>
+            </details>
+        </div>
+    ` : '';
+    
+    const errorCodeHtml = error.error_code ? `
+        <div class="mt-2 text-xs text-gray-500">
+            Error code: <code class="bg-gray-100 px-1 py-0.5 rounded">${escapeHtml(error.error_code)}</code>
+        </div>
+    ` : '';
+    
+    modalContainer.innerHTML = `
+        <div class="flex items-center justify-center min-h-screen px-4 pt-4 pb-20 text-center sm:block sm:p-0">
+            <div class="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity" onclick="window.errorHandler.closeErrorModal()"></div>
+            
+            <div class="inline-block align-bottom bg-white rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full">
+                <div class="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
+                    <div class="sm:flex sm:items-start">
+                        <div class="mx-auto flex-shrink-0 flex items-center justify-center h-12 w-12 rounded-full bg-red-100 sm:mx-0 sm:h-10 sm:w-10">
+                            <i class="fas fa-exclamation-triangle text-red-600"></i>
+                        </div>
+                        <div class="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left flex-1">
+                            <h3 class="text-lg leading-6 font-medium text-gray-900">Error</h3>
+                            <div class="mt-2">
+                                ${contextText}
+                                <p class="text-sm text-gray-500">${escapeHtml(message)}</p>
+                                ${errorCodeHtml}
+                                ${suggestionsHtml}
+                                ${docLinkHtml}
+                                ${detailsHtml}
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <div class="bg-gray-50 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse">
+                    <button id="error-modal-copy-btn" 
+                            class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-600 text-base font-medium text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 sm:ml-3 sm:w-auto sm:text-sm">
+                        <i class="fas fa-copy mr-2"></i>Copy Error Details
+                    </button>
+                    <button onclick="window.errorHandler.closeErrorModal()" 
+                            class="mt-3 w-full inline-flex justify-center rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-base font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 sm:mt-0 sm:ml-3 sm:w-auto sm:text-sm">
+                        Close
+                    </button>
+                </div>
+            </div>
+        </div>
+    `;
+    
+    // Attach event listener to copy button
+    const copyBtn = modalContainer.querySelector('#error-modal-copy-btn');
+    if (copyBtn) {
+        copyBtn.addEventListener('click', () => {
+            copyErrorDetails(error);
+        });
+    }
+    
+    modalContainer.style.display = 'block';
+}
+
+/**
+ * Close the error modal.
+ */
+function closeErrorModal() {
+    const modalContainer = document.getElementById('error-modal-container');
+    if (modalContainer) {
+        modalContainer.style.display = 'none';
+    }
+}
+
+/**
+ * Escape HTML to prevent XSS.
+ */
+function escapeHtml(text) {
+    if (typeof text !== 'string') {
+        text = String(text);
+    }
+    const div = document.createElement('div');
+    div.textContent = text;
+    return div.innerHTML;
+}
+
+/**
+ * Copy error details to clipboard.
+ * 
+ * @param {Object} error - Error object from API response
+ */
+function copyErrorDetails(error) {
+    const errorText = JSON.stringify(error, null, 2);
+    
+    if (navigator.clipboard && navigator.clipboard.writeText) {
+        navigator.clipboard.writeText(errorText).then(() => {
+            if (typeof showNotification === 'function') {
+                showNotification('Error details copied to clipboard', 'success');
+            }
+        }).catch(err => {
+            console.error('Failed to copy error details:', err);
+        });
+    } else {
+        // Fallback for older browsers
+        const textArea = document.createElement('textarea');
+        textArea.value = errorText;
+        textArea.style.position = 'fixed';
+        textArea.style.opacity = '0';
+        document.body.appendChild(textArea);
+        textArea.select();
+        try {
+            document.execCommand('copy');
+            if (typeof showNotification === 'function') {
+                showNotification('Error details copied to clipboard', 'success');
+            }
+        } catch (err) {
+            console.error('Failed to copy error details:', err);
+        }
+        document.body.removeChild(textArea);
+    }
+}
+
+// Export functions
+if (typeof module !== 'undefined' && module.exports) {
+    module.exports = {
+        formatError,
+        getSuggestedFixes,
+        displayError,
+        copyErrorDetails,
+        showErrorModal,
+        closeErrorModal,
+        ERROR_MESSAGES,
+        ERROR_DOCS
+    };
+} else {
+    // Make available globally
+    window.errorHandler = {
+        formatError,
+        getSuggestedFixes,
+        displayError,
+        copyErrorDetails,
+        showErrorModal,
+        closeErrorModal,
+        ERROR_MESSAGES,
+        ERROR_DOCS
+    };
+}
+

web_interface/templates/v3/index.html

@@ -0,0 +1,161 @@
+{% extends "v3/base.html" %}
+
+{% block content %}
+<div class="bg-white rounded-lg shadow p-6">
+    <div class="border-b border-gray-200 pb-4 mb-6">
+        <h2 class="text-lg font-semibold text-gray-900">System Overview</h2>
+        <p class="mt-1 text-sm text-gray-600">Monitor system status and manage your LED matrix display.</p>
+    </div>
+
+    <!-- System Stats Cards -->
+    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
+        <div class="bg-gray-50 rounded-lg p-4">
+            <div class="flex items-center">
+                <div class="flex-shrink-0">
+                    <i class="fas fa-microchip text-blue-600 text-xl"></i>
+                </div>
+                <div class="ml-3 w-0 flex-1">
+                    <dl>
+                        <dt class="text-sm font-medium text-gray-500 truncate">CPU Usage</dt>
+                        <dd class="text-lg font-medium text-gray-900" id="cpu-usage">--%</dd>
+                    </dl>
+                </div>
+            </div>
+        </div>
+
+        <div class="bg-gray-50 rounded-lg p-4">
+            <div class="flex items-center">
+                <div class="flex-shrink-0">
+                    <i class="fas fa-memory text-green-600 text-xl"></i>
+                </div>
+                <div class="ml-3 w-0 flex-1">
+                    <dl>
+                        <dt class="text-sm font-medium text-gray-500 truncate">Memory Usage</dt>
+                        <dd class="text-lg font-medium text-gray-900" id="memory-usage">--%</dd>
+                    </dl>
+                </div>
+            </div>
+        </div>
+
+        <div class="bg-gray-50 rounded-lg p-4">
+            <div class="flex items-center">
+                <div class="flex-shrink-0">
+                    <i class="fas fa-thermometer-half text-red-600 text-xl"></i>
+                </div>
+                <div class="ml-3 w-0 flex-1">
+                    <dl>
+                        <dt class="text-sm font-medium text-gray-500 truncate">CPU Temperature</dt>
+                        <dd class="text-lg font-medium text-gray-900" id="cpu-temp">--°C</dd>
+                    </dl>
+                </div>
+            </div>
+        </div>
+
+        <div class="bg-gray-50 rounded-lg p-4">
+            <div class="flex items-center">
+                <div class="flex-shrink-0">
+                    <i class="fas fa-desktop text-purple-600 text-xl"></i>
+                </div>
+                <div class="ml-3 w-0 flex-1">
+                    <dl>
+                        <dt class="text-sm font-medium text-gray-500 truncate">Display Status</dt>
+                        <dd class="text-lg font-medium text-gray-900" id="display-status">Unknown</dd>
+                    </dl>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <!-- Quick Actions -->
+    <div class="border-b border-gray-200 pb-4 mb-6">
+        <h3 class="text-md font-medium text-gray-900 mb-4">Quick Actions</h3>
+        <div class="flex flex-wrap gap-3" hx-ext="json-enc">
+            <button hx-post="/api/v3/system/action"
+                    hx-vals='{"action": "start_display"}'
+                    hx-swap="none"
+                    hx-on:htmx:after-request="if (typeof showNotification !== 'undefined' && event.detail.xhr && event.detail.xhr.responseJSON) { showNotification(event.detail.xhr.responseJSON.message || 'Display started', event.detail.xhr.responseJSON.status || 'success'); }"
+                    class="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md text-white bg-green-600 hover:bg-green-700">
+                <i class="fas fa-play mr-2"></i>
+                Start Display
+            </button>
+
+            <button hx-post="/api/v3/system/action"
+                    hx-vals='{"action": "stop_display"}'
+                    hx-swap="none"
+                    hx-on:htmx:after-request="if (typeof showNotification !== 'undefined' && event.detail.xhr && event.detail.xhr.responseJSON) { showNotification(event.detail.xhr.responseJSON.message || 'Display stopped', event.detail.xhr.responseJSON.status || 'success'); }"
+                    class="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md text-white bg-red-600 hover:bg-red-700">
+                <i class="fas fa-stop mr-2"></i>
+                Stop Display
+            </button>
+
+            <button hx-post="/api/v3/system/action"
+                    hx-vals='{"action": "git_pull"}'
+                    hx-swap="none"
+                    hx-on:htmx:after-request="if (typeof showNotification !== 'undefined' && event.detail.xhr && event.detail.xhr.responseJSON) { showNotification(event.detail.xhr.responseJSON.message || 'Code update completed', event.detail.xhr.responseJSON.status || 'info'); }"
+                    class="inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50">
+                <i class="fas fa-download mr-2"></i>
+                Update Code
+            </button>
+
+            <button hx-post="/api/v3/system/action"
+                    hx-vals='{"action": "reboot_system"}'
+                    hx-confirm="Are you sure you want to reboot the system?"
+                    hx-swap="none"
+                    hx-on:htmx:after-request="if (typeof showNotification !== 'undefined' && event.detail.xhr && event.detail.xhr.responseJSON) { showNotification(event.detail.xhr.responseJSON.message || 'System rebooting...', event.detail.xhr.responseJSON.status || 'info'); }"
+                    class="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md text-white bg-yellow-600 hover:bg-yellow-700">
+                <i class="fas fa-power-off mr-2"></i>
+                Reboot System
+            </button>
+        </div>
+    </div>
+
+    <!-- Display Preview -->
+    <div>
+        <h3 class="text-md font-medium text-gray-900 mb-4">Display Preview</h3>
+        <div class="bg-gray-900 rounded-lg p-4 aspect-video flex items-center justify-center">
+            <div class="text-center text-gray-400">
+                <i class="fas fa-desktop text-4xl mb-2"></i>
+                <p>Display preview will appear here</p>
+                <p class="text-sm mt-1">Connect to see live updates</p>
+            </div>
+        </div>
+    </div>
+</div>
+
+<!-- Update stats via SSE -->
+<script>
+    // Listen for system stats updates
+    if (typeof statsSource !== 'undefined') {
+        statsSource.onmessage = function(event) {
+            const data = JSON.parse(event.data);
+
+            // Update CPU
+            const cpuEl = document.getElementById('cpu-usage');
+            if (cpuEl && data.cpu_percent !== undefined) {
+                cpuEl.textContent = data.cpu_percent + '%';
+            }
+
+            // Update Memory
+            const memEl = document.getElementById('memory-usage');
+            if (memEl && data.memory_used_percent !== undefined) {
+                memEl.textContent = data.memory_used_percent + '%';
+            }
+
+            // Update Temperature
+            const tempEl = document.getElementById('cpu-temp');
+            if (tempEl && data.cpu_temp !== undefined) {
+                tempEl.textContent = data.cpu_temp + '°C';
+            }
+
+            // Update Display Status
+            const displayEl = document.getElementById('display-status');
+            if (displayEl) {
+                displayEl.textContent = data.service_active ? 'Active' : 'Inactive';
+                displayEl.className = data.service_active ?
+                    'text-lg font-medium text-green-600' :
+                    'text-lg font-medium text-red-600';
+            }
+        };
+    }
+</script>
+{% endblock %}

web_interface/templates/v3/partials/cache.html

@@ -0,0 +1,231 @@
+<div class="bg-white rounded-lg shadow p-6">
+    <div class="border-b border-gray-200 pb-4 mb-6">
+        <h2 class="text-lg font-semibold text-gray-900">Cache Management</h2>
+        <p class="mt-1 text-sm text-gray-600">View and manage cached API responses. Cache files help reduce API calls and improve performance.</p>
+    </div>
+
+    <!-- Cache Info -->
+    <div id="cache-info" class="mb-6 p-4 bg-blue-50 rounded-lg border border-blue-200">
+        <div class="flex items-center justify-between">
+            <div>
+                <p class="text-sm font-medium text-blue-900">Cache Directory</p>
+                <p id="cache-dir" class="text-sm text-blue-700 font-mono mt-1">Loading...</p>
+            </div>
+            <button id="refresh-cache-btn" class="btn bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded text-sm">
+                <i class="fas fa-sync-alt mr-2"></i>Refresh
+            </button>
+        </div>
+    </div>
+
+    <!-- Cache Files Table -->
+    <div class="overflow-x-auto">
+        <table class="min-w-full divide-y divide-gray-200">
+            <thead class="bg-gray-50">
+                <tr>
+                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Cache Key</th>
+                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Age</th>
+                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Size</th>
+                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Modified</th>
+                    <th class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">Actions</th>
+                </tr>
+            </thead>
+            <tbody id="cache-files-tbody" class="bg-white divide-y divide-gray-200">
+                <tr>
+                    <td colspan="5" class="px-6 py-8 text-center text-gray-500">
+                        <i class="fas fa-spinner fa-spin text-2xl mb-2"></i>
+                        <p>Loading cache files...</p>
+                    </td>
+                </tr>
+            </tbody>
+        </table>
+    </div>
+
+    <!-- Empty State -->
+    <div id="cache-empty" class="hidden text-center py-12">
+        <i class="fas fa-database text-4xl text-gray-400 mb-4"></i>
+        <p class="text-gray-600">No cache files found</p>
+        <p class="text-sm text-gray-500 mt-2">Cache files will appear here as plugins fetch data from APIs</p>
+    </div>
+
+    <!-- Error State -->
+    <div id="cache-error" class="hidden text-center py-12">
+        <i class="fas fa-exclamation-triangle text-4xl text-red-400 mb-4"></i>
+        <p class="text-red-600" id="cache-error-message">Error loading cache files</p>
+    </div>
+</div>
+
+<script>
+// Initialize cache management when partial loads
+(function() {
+    loadCacheFiles();
+    
+    // Event listeners
+    document.getElementById('refresh-cache-btn').addEventListener('click', loadCacheFiles);
+})();
+
+function loadCacheFiles() {
+    const tbody = document.getElementById('cache-files-tbody');
+    const emptyState = document.getElementById('cache-empty');
+    const errorState = document.getElementById('cache-error');
+    const errorMessage = document.getElementById('cache-error-message');
+    
+    // Show loading state
+    tbody.innerHTML = `
+        <tr>
+            <td colspan="5" class="px-6 py-8 text-center text-gray-500">
+                <i class="fas fa-spinner fa-spin text-2xl mb-2"></i>
+                <p>Loading cache files...</p>
+            </td>
+        </tr>
+    `;
+    emptyState.classList.add('hidden');
+    errorState.classList.add('hidden');
+    
+    fetch('/api/v3/cache/list')
+        .then(response => response.json())
+        .then(data => {
+            if (data.status === 'success') {
+                displayCacheFiles(data.data);
+                updateCacheInfo(data.data.cache_dir);
+            } else {
+                showError(data.message || 'Failed to load cache files');
+            }
+        })
+        .catch(error => {
+            showError('Error loading cache files: ' + error.message);
+        });
+}
+
+function displayCacheFiles(data) {
+    const tbody = document.getElementById('cache-files-tbody');
+    const emptyState = document.getElementById('cache-empty');
+    const errorState = document.getElementById('cache-error');
+    
+    errorState.classList.add('hidden');
+    
+    if (!data.cache_files || data.cache_files.length === 0) {
+        tbody.innerHTML = '';
+        emptyState.classList.remove('hidden');
+        return;
+    }
+    
+    emptyState.classList.add('hidden');
+    tbody.innerHTML = '';
+    
+    data.cache_files.forEach(cacheFile => {
+        const row = document.createElement('tr');
+        row.className = 'hover:bg-gray-50';
+        
+        // Format modified time
+        const modifiedDate = new Date(cacheFile.modified_datetime);
+        const modifiedStr = modifiedDate.toLocaleString('en-US', {
+            month: 'short',
+            day: 'numeric',
+            hour: '2-digit',
+            minute: '2-digit',
+            second: '2-digit',
+            hour12: false
+        });
+        
+        // Age color coding
+        let ageClass = 'text-gray-600';
+        if (cacheFile.age_seconds < 300) { // Less than 5 minutes
+            ageClass = 'text-green-600 font-medium';
+        } else if (cacheFile.age_seconds < 3600) { // Less than 1 hour
+            ageClass = 'text-yellow-600';
+        } else { // Older than 1 hour
+            ageClass = 'text-red-600';
+        }
+        
+        row.innerHTML = `
+            <td class="px-6 py-4 whitespace-nowrap">
+                <div class="text-sm font-medium text-gray-900 font-mono">${escapeHtml(cacheFile.key)}</div>
+                <div class="text-xs text-gray-500">${escapeHtml(cacheFile.filename)}</div>
+            </td>
+            <td class="px-6 py-4 whitespace-nowrap">
+                <span class="text-sm ${ageClass}">${escapeHtml(cacheFile.age_display)}</span>
+            </td>
+            <td class="px-6 py-4 whitespace-nowrap">
+                <span class="text-sm text-gray-600">${escapeHtml(cacheFile.size_display)}</span>
+            </td>
+            <td class="px-6 py-4 whitespace-nowrap">
+                <span class="text-sm text-gray-600">${escapeHtml(modifiedStr)}</span>
+            </td>
+            <td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
+                <button onclick="deleteCacheFile('${escapeHtml(cacheFile.key)}')" 
+                        class="text-red-600 hover:text-red-900 px-3 py-1 rounded hover:bg-red-50 transition-colors"
+                        title="Delete cache file">
+                    <i class="fas fa-trash mr-1"></i>Delete
+                </button>
+            </td>
+        `;
+        
+        tbody.appendChild(row);
+    });
+}
+
+function updateCacheInfo(cacheDir) {
+    const cacheDirEl = document.getElementById('cache-dir');
+    if (cacheDir) {
+        cacheDirEl.textContent = cacheDir;
+    } else {
+        cacheDirEl.textContent = 'Not configured';
+        cacheDirEl.classList.add('text-gray-500');
+    }
+}
+
+function deleteCacheFile(key) {
+    if (!confirm(`Are you sure you want to delete the cache file for "${key}"?`)) {
+        return;
+    }
+    
+    fetch('/api/v3/cache/delete', {
+        method: 'POST',
+        headers: {
+            'Content-Type': 'application/json'
+        },
+        body: JSON.stringify({ key: key })
+    })
+    .then(response => response.json())
+    .then(data => {
+        if (data.status === 'success') {
+            if (typeof showNotification !== 'undefined') {
+                showNotification(data.message || 'Cache file deleted successfully', 'success');
+            }
+            // Reload cache files list
+            loadCacheFiles();
+        } else {
+            if (typeof showNotification !== 'undefined') {
+                showNotification(data.message || 'Failed to delete cache file', 'error');
+            }
+        }
+    })
+    .catch(error => {
+        if (typeof showNotification !== 'undefined') {
+            showNotification('Error deleting cache file: ' + error.message, 'error');
+        }
+    });
+}
+
+function showError(message) {
+    const tbody = document.getElementById('cache-files-tbody');
+    const errorState = document.getElementById('cache-error');
+    const errorMessage = document.getElementById('cache-error-message');
+    const emptyState = document.getElementById('cache-empty');
+    
+    tbody.innerHTML = '';
+    emptyState.classList.add('hidden');
+    errorState.classList.remove('hidden');
+    errorMessage.textContent = message;
+}
+
+// Utility function to escape HTML
+function escapeHtml(text) {
+    const div = document.createElement('div');
+    div.textContent = text;
+    return div.innerHTML;
+}
+
+// Make deleteCacheFile available globally for onclick handlers
+window.deleteCacheFile = deleteCacheFile;
+</script>

web_interface/templates/v3/partials/display.html

@@ -0,0 +1,279 @@
+<div class="bg-white rounded-lg shadow p-6">
+    <div class="border-b border-gray-200 pb-4 mb-6">
+        <h2 class="text-lg font-semibold text-gray-900">Display Settings</h2>
+        <p class="mt-1 text-sm text-gray-600">Configure LED matrix hardware settings and display options.</p>
+    </div>
+
+    <form hx-post="/api/v3/config/main"
+          hx-ext="json-enc"
+          hx-headers='{"Content-Type": "application/json"}'
+          hx-swap="none"
+          hx-on:htmx:after-request="showNotification(event.detail.xhr.responseJSON?.message || 'Display settings saved', event.detail.xhr.responseJSON?.status || 'success')"
+          class="space-y-6"
+          novalidate
+          onsubmit="fixInvalidNumberInputs(this); return true;">
+
+        <!-- Hardware Settings -->
+        <div class="bg-gray-50 rounded-lg p-4">
+            <h3 class="text-md font-medium text-gray-900 mb-4">Hardware Configuration</h3>
+
+            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 xl:grid-cols-4 2xl:grid-cols-4 gap-4 mb-4">
+                <div class="form-group">
+                    <label for="rows" class="block text-sm font-medium text-gray-700">Rows</label>
+                    <input type="number"
+                           id="rows"
+                           name="rows"
+                           value="{{ main_config.display.hardware.rows or 32 }}"
+                           min="1"
+                           max="64"
+                           class="form-control">
+                    <p class="mt-1 text-sm text-gray-600">Number of LED rows</p>
+                </div>
+
+                <div class="form-group">
+                    <label for="cols" class="block text-sm font-medium text-gray-700">Columns</label>
+                    <input type="number"
+                           id="cols"
+                           name="cols"
+                           value="{{ main_config.display.hardware.cols or 64 }}"
+                           min="1"
+                           max="128"
+                           class="form-control">
+                    <p class="mt-1 text-sm text-gray-600">Number of LED columns</p>
+                </div>
+
+                <div class="form-group">
+                    <label for="chain_length" class="block text-sm font-medium text-gray-700">Chain Length</label>
+                    <input type="number"
+                           id="chain_length"
+                           name="chain_length"
+                           value="{{ main_config.display.hardware.chain_length or 2 }}"
+                           min="1"
+                           max="8"
+                           class="form-control">
+                    <p class="mt-1 text-sm text-gray-600">Number of LED panels chained together</p>
+                </div>
+
+                <div class="form-group">
+                    <label for="parallel" class="block text-sm font-medium text-gray-700">Parallel</label>
+                    <input type="number"
+                           id="parallel"
+                           name="parallel"
+                           value="{{ main_config.display.hardware.parallel or 1 }}"
+                           min="1"
+                           max="4"
+                           class="form-control">
+                    <p class="mt-1 text-sm text-gray-600">Number of parallel chains</p>
+                </div>
+            </div>
+
+            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+                <div class="form-group">
+                    <label for="brightness" class="block text-sm font-medium text-gray-700">Brightness</label>
+                    <div class="flex items-center space-x-2">
+                        <input type="range"
+                               id="brightness"
+                               name="brightness"
+                               value="{{ main_config.display.hardware.brightness or 95 }}"
+                               min="1"
+                               max="100"
+                               class="flex-1">
+                        <span id="brightness-value" class="text-sm font-medium w-12">{{ main_config.display.hardware.brightness or 95 }}</span>
+                    </div>
+                    <p class="mt-1 text-sm text-gray-600">LED brightness: <span id="brightness-display">{{ main_config.display.hardware.brightness or 95 }}</span>%</p>
+                </div>
+
+                <div class="form-group">
+                    <label for="hardware_mapping" class="block text-sm font-medium text-gray-700">Hardware Mapping</label>
+                    <select id="hardware_mapping" name="hardware_mapping" class="form-control">
+                        <option value="adafruit-hat-pwm" {% if main_config.display.hardware.hardware_mapping == "adafruit-hat-pwm" %}selected{% endif %}>Adafruit HAT PWM</option>
+                        <option value="adafruit-hat" {% if main_config.display.hardware.hardware_mapping == "adafruit-hat" %}selected{% endif %}>Adafruit HAT</option>
+                        <option value="regular" {% if main_config.display.hardware.hardware_mapping == "regular" %}selected{% endif %}>Regular</option>
+                        <option value="regular-pi1" {% if main_config.display.hardware.hardware_mapping == "regular-pi1" %}selected{% endif %}>Regular Pi1</option>
+                    </select>
+                </div>
+            </div>
+
+            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+                <div class="form-group">
+                    <label for="gpio_slowdown" class="block text-sm font-medium text-gray-700">GPIO Slowdown</label>
+                    <input type="number"
+                           id="gpio_slowdown"
+                           name="gpio_slowdown"
+                           value="{{ main_config.display.runtime.gpio_slowdown or 3 }}"
+                           min="0"
+                           max="5"
+                           class="form-control">
+                    <p class="mt-1 text-sm text-gray-600">GPIO slowdown factor (0-5)</p>
+                </div>
+
+                <div class="form-group">
+                    <label for="scan_mode" class="block text-sm font-medium text-gray-700">Scan Mode</label>
+                    <input type="number"
+                           id="scan_mode"
+                           name="scan_mode"
+                           value="{{ main_config.display.hardware.scan_mode or 0 }}"
+                           min="0"
+                           max="1"
+                           class="form-control">
+                    <p class="mt-1 text-sm text-gray-600">Scan mode for LED matrix (0-1)</p>
+                </div>
+            </div>
+
+            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+                <div class="form-group">
+                    <label for="pwm_bits" class="block text-sm font-medium text-gray-700">PWM Bits</label>
+                    <input type="number"
+                           id="pwm_bits"
+                           name="pwm_bits"
+                           value="{{ main_config.display.hardware.pwm_bits or 9 }}"
+                           min="1"
+                           max="11"
+                           class="form-control">
+                    <p class="mt-1 text-sm text-gray-600">PWM bits for brightness control (1-11)</p>
+                </div>
+
+                <div class="form-group">
+                    <label for="pwm_dither_bits" class="block text-sm font-medium text-gray-700">PWM Dither Bits</label>
+                    <input type="number"
+                           id="pwm_dither_bits"
+                           name="pwm_dither_bits"
+                           value="{{ main_config.display.hardware.pwm_dither_bits or 1 }}"
+                           min="0"
+                           max="4"
+                           class="form-control">
+                    <p class="mt-1 text-sm text-gray-600">PWM dither bits (0-4)</p>
+                </div>
+            </div>
+
+            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+                <div class="form-group">
+                    <label for="pwm_lsb_nanoseconds" class="block text-sm font-medium text-gray-700">PWM LSB Nanoseconds</label>
+                    <input type="number"
+                           id="pwm_lsb_nanoseconds"
+                           name="pwm_lsb_nanoseconds"
+                           value="{{ main_config.display.hardware.pwm_lsb_nanoseconds or 130 }}"
+                           min="50"
+                           max="500"
+                           class="form-control">
+                    <p class="mt-1 text-sm text-gray-600">PWM LSB nanoseconds (50-500)</p>
+                </div>
+
+                <div class="form-group">
+                    <label for="limit_refresh_rate_hz" class="block text-sm font-medium text-gray-700">Limit Refresh Rate (Hz)</label>
+                    <input type="number"
+                           id="limit_refresh_rate_hz"
+                           name="limit_refresh_rate_hz"
+                           value="{{ main_config.display.hardware.limit_refresh_rate_hz or 120 }}"
+                           min="1"
+                           max="1000"
+                           class="form-control">
+                    <p class="mt-1 text-sm text-gray-600">Limit refresh rate in Hz (1-1000)</p>
+                </div>
+            </div>
+        </div>
+
+        <!-- Display Options -->
+        <div class="bg-gray-50 rounded-lg p-4">
+            <h3 class="text-md font-medium text-gray-900 mb-4">Display Options</h3>
+
+            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+                <div class="form-group">
+                    <label class="flex items-center">
+                        <input type="checkbox"
+                               name="disable_hardware_pulsing"
+                               {% if main_config.display.hardware.disable_hardware_pulsing %}checked{% endif %}
+                               class="form-control h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded">
+                        <span class="ml-2 text-sm font-medium text-gray-900">Disable Hardware Pulsing</span>
+                    </label>
+                </div>
+
+                <div class="form-group">
+                    <label class="flex items-center">
+                        <input type="checkbox"
+                               name="inverse_colors"
+                               {% if main_config.display.hardware.inverse_colors %}checked{% endif %}
+                               class="form-control h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded">
+                        <span class="ml-2 text-sm font-medium text-gray-900">Inverse Colors</span>
+                    </label>
+                </div>
+
+                <div class="form-group">
+                    <label class="flex items-center">
+                        <input type="checkbox"
+                               name="show_refresh_rate"
+                               {% if main_config.display.hardware.show_refresh_rate %}checked{% endif %}
+                               class="form-control h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded">
+                        <span class="ml-2 text-sm font-medium text-gray-900">Show Refresh Rate</span>
+                    </label>
+                </div>
+
+                <div class="form-group">
+                    <label class="flex items-center">
+                        <input type="checkbox"
+                               name="use_short_date_format"
+                               {% if main_config.display.use_short_date_format %}checked{% endif %}
+                               class="form-control h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded">
+                        <span class="ml-2 text-sm font-medium text-gray-900">Use Short Date Format</span>
+                    </label>
+                </div>
+            </div>
+
+            <!-- Dynamic Duration Settings -->
+            <div class="mt-6 pt-4 border-t border-gray-300">
+                <h4 class="text-sm font-medium text-gray-900 mb-3">Dynamic Duration</h4>
+                <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+                    <div class="form-group">
+                        <label for="max_dynamic_duration_seconds" class="block text-sm font-medium text-gray-700">Max Dynamic Duration (seconds)</label>
+                        <input type="number"
+                               id="max_dynamic_duration_seconds"
+                               name="max_dynamic_duration_seconds"
+                               value="{{ main_config.display.get('dynamic_duration', {}).get('max_duration_seconds', 180) }}"
+                               min="30"
+                               max="1800"
+                               class="form-control">
+                        <p class="mt-1 text-sm text-gray-600">Maximum time plugins can extend display duration (30-1800 seconds)</p>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+        <!-- Submit Button -->
+        <div class="flex justify-end">
+            <button type="submit"
+                    class="btn bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-md">
+                <i class="fas fa-save mr-2"></i>
+                Save Display Settings
+            </button>
+        </div>
+    </form>
+</div>
+
+<script>
+// Update brightness display
+document.getElementById('brightness').addEventListener('input', function() {
+    document.getElementById('brightness-value').textContent = this.value;
+    document.getElementById('brightness-display').textContent = this.value;
+});
+
+// Fix invalid number inputs function (if not already defined globally)
+if (typeof window.fixInvalidNumberInputs !== 'function') {
+    window.fixInvalidNumberInputs = function(form) {
+        if (!form) return;
+        const allInputs = form.querySelectorAll('input[type="number"]');
+        allInputs.forEach(input => {
+            const min = parseFloat(input.getAttribute('min'));
+            const max = parseFloat(input.getAttribute('max'));
+            const value = parseFloat(input.value);
+            
+            if (!isNaN(value)) {
+                if (!isNaN(min) && value < min) {
+                    input.value = min;
+                } else if (!isNaN(max) && value > max) {
+                    input.value = max;
+                }
+            }
+        });
+    };
+}
+</script>

web_interface/templates/v3/partials/durations.html

@@ -0,0 +1,43 @@
+<div class="bg-white rounded-lg shadow p-6">
+    <div class="border-b border-gray-200 pb-4 mb-6">
+        <h2 class="text-lg font-semibold text-gray-900">Display Durations</h2>
+        <p class="mt-1 text-sm text-gray-600">Configure how long each screen is shown before switching. Values in seconds.</p>
+    </div>
+
+    <form hx-post="/api/v3/config/main"
+          hx-ext="json-enc"
+          hx-headers='{"Content-Type": "application/json"}'
+          hx-swap="none"
+          hx-on:htmx:after-request="showNotification(event.detail.xhr.responseJSON?.message || 'Durations saved', event.detail.xhr.responseJSON?.status || 'success')"
+          class="space-y-6"
+          novalidate
+          onsubmit="fixInvalidNumberInputs(this); return true;">
+
+        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+            {% for key, value in main_config.display.display_durations.items() %}
+            <div class="form-group">
+                <label for="duration_{{ key }}" class="block text-sm font-medium text-gray-700">
+                    {{ key | replace('_', ' ') | title }}
+                </label>
+                <input type="number"
+                       id="duration_{{ key }}"
+                       name="{{ key }}"
+                       value="{{ value }}"
+                       min="5"
+                       max="600"
+                       class="form-control">
+                <p class="mt-1 text-sm text-gray-600">{{ value }} seconds</p>
+            </div>
+            {% endfor %}
+        </div>
+
+        <!-- Submit Button -->
+        <div class="flex justify-end">
+            <button type="submit"
+                    class="btn bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-md">
+                <i class="fas fa-save mr-2"></i>
+                Save Durations
+            </button>
+        </div>
+    </form>
+</div>

web_interface/templates/v3/partials/fonts.html

@@ -0,0 +1,772 @@
+<div class="bg-white rounded-lg shadow p-6">
+    <div class="border-b border-gray-200 pb-4 mb-6">
+        <h2 class="text-lg font-semibold text-gray-900">Font Management</h2>
+        <p class="mt-1 text-sm text-gray-600">Manage custom fonts, overrides, and system font configuration for your LED matrix display.</p>
+    </div>
+
+    <!-- Font System Overview -->
+    <div class="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-2 2xl:grid-cols-2 gap-6 mb-8">
+        <!-- Detected Fonts from Managers -->
+        <div class="bg-gray-50 rounded-lg p-4">
+            <h3 class="text-md font-medium text-gray-900 mb-3">Detected Manager Fonts</h3>
+            <div id="detected-fonts" class="bg-gray-800 text-gray-100 font-mono text-sm p-3 rounded h-40 overflow-y-auto">
+                <div class="text-gray-400">Loading...</div>
+            </div>
+            <p class="text-sm text-gray-600 mt-2">Fonts currently in use by managers (auto-detected)</p>
+        </div>
+
+        <!-- Available Fonts -->
+        <div class="bg-gray-50 rounded-lg p-4">
+            <h3 class="text-md font-medium text-gray-900 mb-3">Available Font Families</h3>
+            <div id="available-fonts" class="bg-gray-800 text-gray-100 font-mono text-sm p-3 rounded h-40 overflow-y-auto">
+                <div class="text-gray-400">Loading...</div>
+            </div>
+            <p class="text-sm text-gray-600 mt-2">All available font families in the system</p>
+        </div>
+    </div>
+
+    <!-- Font Upload -->
+    <div class="bg-gray-50 rounded-lg p-4 mb-8">
+        <h3 class="text-md font-medium text-gray-900 mb-4">Upload Custom Fonts</h3>
+        <p class="text-sm text-gray-600 mb-4">Upload your own TTF or BDF font files to use in your LED matrix display.</p>
+
+        <div class="font-upload-area" id="font-upload-area">
+            <div class="upload-dropzone" id="upload-dropzone">
+                <i class="fas fa-cloud-upload-alt text-3xl text-gray-400 mb-3"></i>
+                <p class="text-gray-600">Drag and drop font files here, or click to select</p>
+                <p class="text-sm text-gray-500">Supports .ttf and .bdf files</p>
+                <input type="file" id="font-file-input" accept=".ttf,.bdf" multiple style="display: none;">
+            </div>
+        </div>
+
+        <div class="upload-form" id="upload-form" style="display: none;">
+            <div class="mt-4 p-4 bg-white rounded border">
+                <h4 class="text-sm font-medium text-gray-900 mb-3">Selected Files</h4>
+                <div id="selected-files" class="space-y-2 mb-4">
+                    <!-- Files will be listed here -->
+                </div>
+
+                <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+                    <div>
+                        <label class="block text-sm font-medium text-gray-700 mb-1">Font Family Name</label>
+                        <input type="text" id="upload-font-family" class="form-control" placeholder="e.g., my_custom_font">
+                        <p class="text-sm text-gray-600 mt-1">Custom name for this font (letters, numbers, underscores only)</p>
+                    </div>
+                    <div class="flex items-end">
+                        <button type="button" id="upload-fonts-btn" class="btn bg-blue-600 hover:bg-blue-700 text-white px-4 py-2">
+                            <i class="fas fa-upload mr-2"></i>Upload Fonts
+                        </button>
+                        <button type="button" id="cancel-upload-btn" class="btn bg-gray-600 hover:bg-gray-700 text-white px-4 py-2 ml-2">
+                            <i class="fas fa-times mr-2"></i>Cancel
+                        </button>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+        <!-- Upload Progress -->
+        <div id="upload-progress" class="mt-4 hidden">
+            <div class="bg-white rounded p-4 border">
+                <div class="flex items-center justify-between mb-2">
+                    <span class="text-sm font-medium">Uploading...</span>
+                    <span id="upload-percent" class="text-sm">0%</span>
+                </div>
+                <div class="w-full bg-gray-200 rounded-full h-2">
+                    <div id="upload-progress-bar" class="bg-blue-600 h-2 rounded-full" style="width: 0%"></div>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <!-- Font Overrides -->
+    <div class="bg-gray-50 rounded-lg p-4 mb-8">
+        <h3 class="text-md font-medium text-gray-900 mb-4">Element Font Overrides</h3>
+        <p class="text-sm text-gray-600 mb-4">Override fonts for specific display elements. Changes take effect immediately.</p>
+
+        <!-- Add New Override -->
+        <div class="grid grid-cols-1 md:grid-cols-4 xl:grid-cols-4 2xl:grid-cols-4 gap-4 mb-4 p-4 bg-white rounded border">
+            <div>
+                <label class="block text-sm font-medium text-gray-700 mb-1">Element</label>
+                <select id="override-element" class="form-control text-sm">
+                    <option value="">Select an element...</option>
+                    <optgroup label="Sports">
+                        <option value="nfl.live.score">NFL Live Score</option>
+                        <option value="nfl.live.time">NFL Live Time</option>
+                        <option value="nfl.live.team">NFL Live Team</option>
+                        <option value="mlb.live.score">MLB Live Score</option>
+                        <option value="nhl.live.score">NHL Live Score</option>
+                        <option value="nba.live.score">NBA Live Score</option>
+                    </optgroup>
+                    <optgroup label="Clock">
+                        <option value="clock.time">Clock Time</option>
+                        <option value="clock.date">Clock Date</option>
+                    </optgroup>
+                    <optgroup label="Weather">
+                        <option value="weather.current">Weather Current</option>
+                        <option value="weather.forecast">Weather Forecast</option>
+                    </optgroup>
+                </select>
+            </div>
+
+            <div>
+                <label class="block text-sm font-medium text-gray-700 mb-1">Font Family</label>
+                <select id="override-family" class="form-control text-sm">
+                    <option value="">Use default</option>
+                    <option value="press_start">Press Start 2P</option>
+                    <option value="four_by_six">4x6 Font</option>
+                    <option value="cozette_bdf">Cozette BDF</option>
+                    <option value="matrix_light_6">Matrix Light 6</option>
+                </select>
+            </div>
+
+            <div>
+                <label class="block text-sm font-medium text-gray-700 mb-1">Font Size</label>
+                <select id="override-size" class="form-control text-sm">
+                    <option value="">Use default</option>
+                    <option value="xs">Extra Small (6px)</option>
+                    <option value="sm">Small (8px)</option>
+                    <option value="md">Medium (10px)</option>
+                    <option value="lg">Large (12px)</option>
+                    <option value="xl">Extra Large (14px)</option>
+                </select>
+            </div>
+
+            <div class="flex items-end">
+                <button id="add-override-btn" class="btn bg-blue-600 hover:bg-blue-700 text-white px-4 py-2">
+                    <i class="fas fa-plus mr-2"></i>Add Override
+                </button>
+            </div>
+        </div>
+
+        <!-- Current Overrides List -->
+        <div id="overrides-container">
+            <h4 class="text-sm font-medium text-gray-900 mb-3">Current Overrides</h4>
+            <div id="overrides-list" class="space-y-2">
+                <!-- Overrides will be populated here -->
+                <div class="text-gray-500 text-sm italic">No font overrides configured</div>
+            </div>
+        </div>
+    </div>
+
+    <!-- Font Preview -->
+    <div class="bg-gray-50 rounded-lg p-4">
+        <h3 class="text-md font-medium text-gray-900 mb-4">Font Preview</h3>
+        <div class="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-2 2xl:grid-cols-2 gap-6">
+            <div>
+                <canvas id="font-preview-canvas" width="400" height="100" class="border border-gray-300 bg-black rounded"></canvas>
+            </div>
+            <div class="space-y-3">
+                <div>
+                    <label class="block text-sm font-medium text-gray-700 mb-1">Preview Text</label>
+                    <input type="text" id="preview-text" value="Sample Text 123" class="form-control text-sm">
+                </div>
+                <div class="grid grid-cols-2 gap-3">
+                    <div>
+                        <label class="block text-sm font-medium text-gray-700 mb-1">Font Family</label>
+                        <select id="preview-family" class="form-control text-sm">
+                            <option value="press_start">Press Start 2P</option>
+                            <option value="four_by_six">4x6 Font</option>
+                            <option value="cozette_bdf">Cozette BDF</option>
+                            <option value="matrix_light_6">Matrix Light 6</option>
+                        </select>
+                    </div>
+                    <div>
+                        <label class="block text-sm font-medium text-gray-700 mb-1">Font Size</label>
+                        <select id="preview-size" class="form-control text-sm">
+                            <option value="xs">XS (6px)</option>
+                            <option value="sm">SM (8px)</option>
+                            <option value="md">MD (10px)</option>
+                            <option value="lg">LG (12px)</option>
+                            <option value="xl">XL (14px)</option>
+                        </select>
+                    </div>
+                </div>
+                <button id="update-preview-btn" class="btn bg-gray-600 hover:bg-gray-700 text-white px-4 py-2">
+                    <i class="fas fa-eye mr-2"></i>Update Preview
+                </button>
+            </div>
+        </div>
+    </div>
+</div>
+
+<script>
+// Global variables
+let fontCatalog = {};
+let fontTokens = {};
+let fontOverrides = {};
+let selectedFontFiles = [];
+
+// Initialize when DOM is ready or after HTMX load
+function initializeFontsTab() {
+    if (document.getElementById('detected-fonts') && document.getElementById('available-fonts')) {
+        // Ensure showNotification function is available
+        if (typeof window.showNotification !== 'function') {
+            window.showNotification = function(message, type = 'info') {
+                // Create notification element like in base template
+                const notifications = document.getElementById('notifications');
+                if (notifications) {
+                    const notification = document.createElement('div');
+
+                    const colors = {
+                        success: 'bg-green-500',
+                        error: 'bg-red-500',
+                        warning: 'bg-yellow-500',
+                        info: 'bg-blue-500'
+                    };
+
+                    notification.className = `px-4 py-3 rounded-md text-white text-sm ${colors[type] || colors.info}`;
+                    notification.textContent = message;
+
+                    notifications.appendChild(notification);
+
+                    setTimeout(() => {
+                        notification.remove();
+                    }, 5000);
+                } else {
+                    console.log(`${type}: ${message}`);
+                }
+            };
+        }
+
+        initializeFontManagement();
+
+        // Event listeners
+        document.getElementById('upload-dropzone').addEventListener('click', () => {
+            document.getElementById('font-file-input').click();
+        });
+
+        document.getElementById('font-file-input').addEventListener('change', handleFileSelection);
+        document.getElementById('upload-fonts-btn').addEventListener('click', uploadSelectedFonts);
+        document.getElementById('cancel-upload-btn').addEventListener('click', cancelFontUpload);
+        document.getElementById('add-override-btn').addEventListener('click', addFontOverride);
+        document.getElementById('update-preview-btn').addEventListener('click', updateFontPreview);
+
+        // Drag and drop for upload area
+        const dropzone = document.getElementById('upload-dropzone');
+        dropzone.addEventListener('dragover', (e) => {
+            e.preventDefault();
+            dropzone.classList.add('drag-over');
+        });
+
+        dropzone.addEventListener('dragleave', () => {
+            dropzone.classList.remove('drag-over');
+        });
+
+        dropzone.addEventListener('drop', (e) => {
+            e.preventDefault();
+            dropzone.classList.remove('drag-over');
+            handleFileSelection({ target: { files: e.dataTransfer.files } });
+        });
+
+        console.log('Fonts tab initialized successfully');
+    } else {
+        console.log('Fonts tab elements not found, retrying...');
+        setTimeout(initializeFontsTab, 100);
+    }
+}
+
+// Initialize when DOM is ready or after HTMX load
+document.addEventListener('DOMContentLoaded', initializeFontsTab);
+
+// Also initialize after HTMX content swap for dynamic loading
+document.body.addEventListener('htmx:afterSettle', function(event) {
+    if (event.target.id === 'fonts-content') {
+        console.log('HTMX loaded fonts content, initializing...', event.target.id);
+        initializeFontsTab();
+    }
+});
+
+// Also listen for when fonts tab becomes visible (Alpine.js)
+document.addEventListener('alpine:init', () => {
+    document.addEventListener('alpine:initialized', () => {
+        // Check if we're already on the fonts tab
+        setTimeout(() => {
+            if (window.app && window.app.activeTab === 'fonts') {
+                console.log('Already on fonts tab, initializing...');
+                initializeFontsTab();
+            }
+        }, 100);
+    });
+});
+
+async function initializeFontManagement() {
+    try {
+        await loadFontData();
+        populateFontSelects();
+        displayCurrentOverrides();
+        updateFontPreview();
+        initializeFontUpload();
+    } catch (error) {
+        console.error('Error initializing font management:', error);
+        showNotification('Error loading font configuration', 'error');
+    }
+}
+
+async function loadFontData() {
+    const detectedContainer = document.getElementById('detected-fonts');
+    const availableContainer = document.getElementById('available-fonts');
+
+    // Show loading states
+    if (detectedContainer) {
+        detectedContainer.innerHTML = '<div class="text-blue-400">Loading font data...</div>';
+    }
+    if (availableContainer) {
+        availableContainer.innerHTML = '<div class="text-blue-400">Loading font data...</div>';
+    }
+
+    try {
+        // Use absolute URLs to ensure they work when loaded via HTMX
+        const baseUrl = window.location.origin;
+        const [catalogRes, tokensRes, overridesRes] = await Promise.all([
+            fetch(`${baseUrl}/api/v3/fonts/catalog`),
+            fetch(`${baseUrl}/api/v3/fonts/tokens`),
+            fetch(`${baseUrl}/api/v3/fonts/overrides`)
+        ]);
+
+        // Check if all responses are successful
+        if (!catalogRes.ok || !tokensRes.ok || !overridesRes.ok) {
+            throw new Error(`HTTP ${catalogRes.status}/${tokensRes.status}/${overridesRes.status}`);
+        }
+
+        const catalogData = await catalogRes.json();
+        const tokensData = await tokensRes.json();
+        const overridesData = await overridesRes.json();
+
+        fontCatalog = catalogData.data?.catalog || {};
+        fontTokens = tokensData.data?.tokens || {};
+        fontOverrides = overridesData.data?.overrides || {};
+
+        // Update displays
+        updateDetectedFontsDisplay();
+        updateAvailableFontsDisplay();
+    } catch (error) {
+        console.error('Error loading font data:', error);
+
+        // Show error states
+        if (detectedContainer) {
+            detectedContainer.innerHTML = '<div class="text-red-400">Error loading font data</div>';
+        }
+        if (availableContainer) {
+            availableContainer.innerHTML = '<div class="text-red-400">Error loading font data</div>';
+        }
+
+        showNotification('Error loading font configuration', 'error');
+    }
+}
+
+function updateDetectedFontsDisplay() {
+    const container = document.getElementById('detected-fonts');
+    if (!container) return;
+
+    // In a real implementation, this would collect font usage from all active managers
+    // For now, we'll simulate this by analyzing the font overrides and catalog
+    const detectedFonts = {};
+
+    // Check font overrides for active elements
+    for (const [elementKey, override] of Object.entries(fontOverrides)) {
+        if (override.family) {
+            detectedFonts[elementKey] = {
+                family: override.family,
+                size_px: override.size_px || 8,
+                usage_count: 1, // Would be actual usage count in real implementation
+                source: 'override'
+            };
+        }
+    }
+
+    // Check font catalog for commonly used fonts
+    for (const [fontKey, fontPath] of Object.entries(fontCatalog)) {
+        // Add some commonly used system fonts if not already in overrides
+        if (!detectedFonts[fontKey]) {
+            detectedFonts[fontKey] = {
+                family: fontKey,
+                size_px: 8,
+                usage_count: 1,
+                source: 'system'
+            };
+        }
+    }
+
+    if (Object.keys(detectedFonts).length === 0) {
+        container.innerHTML = '<div class="text-gray-400">No fonts detected yet (managers will register fonts when they render)</div>';
+        return;
+    }
+
+    const lines = [];
+    for (const [elementKey, fontInfo] of Object.entries(detectedFonts)) {
+        const sourceStr = fontInfo.source === 'override' ? ' [OVERRIDE]' : ' [SYSTEM]';
+        lines.push(`${elementKey}: ${fontInfo.family}@${fontInfo.size_px}px (used ${fontInfo.usage_count}x)${sourceStr}`);
+    }
+    container.textContent = lines.join('\n');
+}
+
+function updateAvailableFontsDisplay() {
+    const container = document.getElementById('available-fonts');
+    if (!container) return;
+
+    if (Object.keys(fontCatalog).length === 0) {
+        container.innerHTML = '<div class="text-gray-400">No fonts available</div>';
+        return;
+    }
+
+    const lines = Object.entries(fontCatalog).map(([name, path]) => {
+        const fullPath = path.startsWith('/') ? path : `assets/fonts/${path}`;
+        return `${name}: ${fullPath}`;
+    });
+    container.textContent = lines.join('\n');
+}
+
+function populateFontSelects() {
+    // This would populate the select options with actual font data
+    // For now, using placeholder options
+}
+
+async function addFontOverride() {
+    const element = document.getElementById('override-element').value;
+    const family = document.getElementById('override-family').value;
+    const sizeToken = document.getElementById('override-size').value;
+
+    if (!element) {
+        showNotification('Please select an element', 'warning');
+        return;
+    }
+
+    if (!family && !sizeToken) {
+        showNotification('Please specify at least a font family or size', 'warning');
+        return;
+    }
+
+    try {
+        const overrideData = {};
+        if (family) overrideData.family = family;
+        if (sizeToken) {
+            const sizePx = fontTokens[sizeToken];
+            if (sizePx) overrideData.size_px = sizePx;
+        }
+
+        const response = await fetch(`${baseUrl}/api/v3/fonts/overrides`, {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({
+                [element]: overrideData
+            })
+        });
+
+        const data = await response.json();
+        if (data.status === 'success') {
+            showNotification('Font override added successfully', 'success');
+            await loadFontData();
+            displayCurrentOverrides();
+            // Clear form
+            document.getElementById('override-element').value = '';
+            document.getElementById('override-family').value = '';
+            document.getElementById('override-size').value = '';
+        } else {
+            showNotification('Error adding font override: ' + data.message, 'error');
+        }
+    } catch (error) {
+        console.error('Error adding font override:', error);
+        showNotification('Error adding font override: ' + error, 'error');
+    }
+}
+
+async function deleteFontOverride(elementKey) {
+    if (!confirm(`Are you sure you want to remove the font override for "${elementKey}"?`)) {
+        return;
+    }
+
+    try {
+        const response = await fetch(`${baseUrl}/api/v3/fonts/overrides/${elementKey}`, {
+            method: 'DELETE'
+        });
+
+        const data = await response.json();
+        if (data.status === 'success') {
+            showNotification('Font override removed successfully', 'success');
+            await loadFontData();
+            displayCurrentOverrides();
+        } else {
+            showNotification('Error removing font override: ' + data.message, 'error');
+        }
+    } catch (error) {
+        console.error('Error deleting font override:', error);
+        showNotification('Error removing font override: ' + error, 'error');
+    }
+}
+
+function displayCurrentOverrides() {
+    const container = document.getElementById('overrides-list');
+    if (!container) return;
+
+    if (Object.keys(fontOverrides).length === 0) {
+        container.innerHTML = '<div class="text-gray-500 text-sm italic">No font overrides configured</div>';
+        return;
+    }
+
+    container.innerHTML = Object.entries(fontOverrides).map(([elementKey, override]) => {
+        const elementName = getElementDisplayName(elementKey);
+        const settings = [];
+
+        if (override.family) {
+            const familyName = getFontDisplayName(override.family);
+            settings.push(`Family: ${familyName}`);
+        }
+
+        if (override.size_px) {
+            settings.push(`Size: ${override.size_px}px`);
+        }
+
+        return `
+            <div class="flex items-center justify-between p-3 bg-white rounded border">
+                <div>
+                    <div class="font-medium text-gray-900">${elementName}</div>
+                    <div class="text-sm text-gray-600">${settings.join(', ')}</div>
+                </div>
+                <button onclick="deleteFontOverride('${elementKey}')" class="btn bg-red-600 hover:bg-red-700 text-white px-3 py-1 text-sm">
+                    <i class="fas fa-trash mr-1"></i>Remove
+                </button>
+            </div>
+        `;
+    }).join('');
+}
+
+function getElementDisplayName(elementKey) {
+    const names = {
+        'nfl.live.score': 'NFL Live Score',
+        'nfl.live.time': 'NFL Live Time',
+        'nfl.live.team': 'NFL Live Team',
+        'mlb.live.score': 'MLB Live Score',
+        'nhl.live.score': 'NHL Live Score',
+        'nba.live.score': 'NBA Live Score',
+        'clock.time': 'Clock Time',
+        'clock.date': 'Clock Date',
+        'weather.current': 'Weather Current',
+        'weather.forecast': 'Weather Forecast'
+    };
+    return names[elementKey] || elementKey;
+}
+
+function getFontDisplayName(fontKey) {
+    const names = {
+        'press_start': 'Press Start 2P',
+        'four_by_six': '4x6 Font',
+        'cozette_bdf': 'Cozette BDF',
+        'matrix_light_6': 'Matrix Light 6'
+    };
+    return names[fontKey] || fontKey;
+}
+
+function updateFontPreview() {
+    const canvas = document.getElementById('font-preview-canvas');
+    const text = document.getElementById('preview-text').value || 'Sample Text';
+    const family = document.getElementById('preview-family').value;
+    const size = document.getElementById('preview-size').value;
+
+    if (!canvas) return;
+
+    const ctx = canvas.getContext('2d');
+    ctx.clearRect(0, 0, canvas.width, canvas.height);
+
+    // Set background
+    ctx.fillStyle = '#000000';
+    ctx.fillRect(0, 0, canvas.width, canvas.height);
+
+    // Set font properties
+    const fontSize = fontTokens[size] || 8;
+    ctx.fillStyle = '#ffffff';
+    ctx.font = `${fontSize}px monospace`;
+    ctx.textAlign = 'center';
+    ctx.textBaseline = 'middle';
+
+    // Draw text in center
+    ctx.fillText(text, canvas.width / 2, canvas.height / 2);
+}
+
+function initializeFontUpload() {
+    // Setup already done in event listeners
+}
+
+function handleFileSelection(event) {
+    const files = Array.from(event.target.files);
+    const validFiles = files.filter(file => {
+        const extension = file.name.toLowerCase().split('.').pop();
+        return extension === 'ttf' || extension === 'bdf';
+    });
+
+    if (validFiles.length === 0) {
+        showNotification('Please select valid .ttf or .bdf font files', 'warning');
+        return;
+    }
+
+    if (validFiles.length !== files.length) {
+        showNotification(`${files.length - validFiles.length} invalid files were ignored`, 'warning');
+    }
+
+    selectedFontFiles = validFiles;
+    showUploadForm();
+}
+
+function showUploadForm() {
+    if (selectedFontFiles.length === 0) return;
+
+    const uploadForm = document.getElementById('upload-form');
+    const selectedFilesContainer = document.getElementById('selected-files');
+    const fontFamilyInput = document.getElementById('upload-font-family');
+
+    // Show selected files
+    selectedFilesContainer.innerHTML = selectedFontFiles.map(file => `
+        <div class="flex items-center justify-between p-2 bg-gray-100 rounded">
+            <span class="text-sm">${file.name} (${(file.size / 1024).toFixed(1)} KB)</span>
+        </div>
+    `).join('');
+
+    // Auto-generate font family name from first file
+    if (selectedFontFiles.length === 1) {
+        const filename = selectedFontFiles[0].name;
+        const nameWithoutExt = filename.substring(0, filename.lastIndexOf('.'));
+        fontFamilyInput.value = nameWithoutExt.toLowerCase().replace(/[^a-z0-9]/g, '_');
+    }
+
+    uploadForm.style.display = 'block';
+    uploadForm.scrollIntoView({ behavior: 'smooth' });
+}
+
+function cancelFontUpload() {
+    selectedFontFiles = [];
+    document.getElementById('upload-form').style.display = 'none';
+    document.getElementById('font-file-input').value = '';
+}
+
+async function uploadSelectedFonts() {
+    if (selectedFontFiles.length === 0) {
+        showNotification('No files selected', 'warning');
+        return;
+    }
+
+    const fontFamilyInput = document.getElementById('upload-font-family');
+    const fontFamily = fontFamilyInput.value.trim();
+
+    if (!fontFamily) {
+        showNotification('Please enter a font family name', 'warning');
+        return;
+    }
+
+    // Validate font family name
+    if (!/^[a-z0-9_]+$/i.test(fontFamily)) {
+        showNotification('Font family name can only contain letters, numbers, and underscores', 'warning');
+        return;
+    }
+
+    try {
+        showNotification('Uploading fonts...', 'info');
+        showUploadProgress();
+
+        for (let i = 0; i < selectedFontFiles.length; i++) {
+            const file = selectedFontFiles[i];
+            const formData = new FormData();
+            formData.append('font_file', file);
+            formData.append('font_family', i === 0 ? fontFamily : `${fontFamily}_${i + 1}`);
+
+            const response = await fetch(`${baseUrl}/api/v3/fonts/upload`, {
+                method: 'POST',
+                body: formData
+            });
+
+            const data = await response.json();
+
+            if (data.status === 'success') {
+                showNotification(`Font "${data.font_family}" uploaded successfully`, 'success');
+            } else {
+                showNotification(`Error uploading "${file.name}": ${data.message}`, 'error');
+            }
+
+            // Update progress
+            const percent = ((i + 1) / selectedFontFiles.length) * 100;
+            updateUploadProgress(percent);
+        }
+
+        // Refresh font data and UI
+        await loadFontData();
+        populateFontSelects();
+        cancelFontUpload();
+        hideUploadProgress();
+
+    } catch (error) {
+        console.error('Error uploading fonts:', error);
+        showNotification('Error uploading fonts: ' + error, 'error');
+        hideUploadProgress();
+    }
+}
+
+function showUploadProgress() {
+    document.getElementById('upload-progress').classList.remove('hidden');
+}
+
+function hideUploadProgress() {
+    document.getElementById('upload-progress').classList.add('hidden');
+}
+
+function updateUploadProgress(percent) {
+    document.getElementById('upload-percent').textContent = Math.round(percent) + '%';
+    document.getElementById('upload-progress-bar').style.width = percent + '%';
+}
+</script>
+
+<style>
+.drag-over {
+    border-color: #3b82f6 !important;
+    background-color: #eff6ff !important;
+    transform: scale(1.02);
+}
+
+.font-upload-area {
+    margin: 15px 0;
+}
+
+.upload-dropzone {
+    border: 3px dashed #d1d5db;
+    border-radius: 10px;
+    padding: 40px;
+    text-align: center;
+    background: #fafafa;
+    transition: all 0.3s ease;
+    cursor: pointer;
+}
+
+.upload-dropzone:hover {
+    border-color: #3b82f6;
+    background: #f0f8ff;
+}
+
+.upload-dropzone i {
+    font-size: 3rem;
+    color: #3b82f6;
+    margin-bottom: 15px;
+    display: block;
+}
+
+.upload-dropzone p {
+    margin: 5px 0;
+    font-size: 1.1rem;
+    color: #374151;
+}
+
+.upload-hint {
+    font-size: 0.9rem !important;
+    color: #6b7280 !important;
+    font-style: italic;
+}
+
+.upload-form {
+    margin-top: 20px;
+    padding: 20px;
+    background: #f9f9f9;
+    border-radius: 8px;
+    border: 1px solid #d1d5db;
+}
+
+#font-preview-canvas {
+    max-width: 100%;
+    height: auto;
+}
+</style>

web_interface/templates/v3/partials/general.html

@@ -0,0 +1,133 @@
+<div class="bg-white rounded-lg shadow p-6">
+    <div class="border-b border-gray-200 pb-4 mb-6">
+        <h2 class="text-lg font-semibold text-gray-900">General Settings</h2>
+        <p class="mt-1 text-sm text-gray-600">Configure general system settings and location information.</p>
+    </div>
+
+    <form hx-post="/api/v3/config/main"
+          hx-ext="json-enc"
+          hx-headers='{"Content-Type": "application/json"}'
+          hx-swap="none"
+          hx-on:htmx:after-request="showNotification(event.detail.xhr.responseJSON?.message || 'Settings saved', event.detail.xhr.responseJSON?.status || 'success')"
+          class="space-y-6">
+
+        <!-- Web Display Autostart -->
+        <div class="form-group">
+            <label class="flex items-center">
+                <input type="checkbox"
+                       name="web_display_autostart"
+                       {% if main_config.web_display_autostart %}checked{% endif %}
+                       class="form-control h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded">
+                <span class="ml-2 text-sm font-medium text-gray-900">Web Display Autostart</span>
+            </label>
+            <p class="mt-1 text-sm text-gray-600">Start the web interface on boot for easier access.</p>
+        </div>
+
+        <!-- Timezone -->
+        <div class="form-group">
+            <label for="timezone" class="block text-sm font-medium text-gray-700">Timezone</label>
+            <input type="text"
+                   id="timezone"
+                   name="timezone"
+                   value="{{ main_config.timezone or 'America/Chicago' }}"
+                   placeholder="e.g., America/Chicago"
+                   class="form-control">
+            <p class="mt-1 text-sm text-gray-600">IANA timezone, affects time-based features and scheduling.</p>
+        </div>
+
+        <!-- Location Information -->
+        <div class="grid grid-cols-1 md:grid-cols-3 xl:grid-cols-3 2xl:grid-cols-3 gap-4">
+            <div class="form-group">
+                <label for="city" class="block text-sm font-medium text-gray-700">City</label>
+                <input type="text"
+                       id="city"
+                       name="city"
+                       value="{{ main_config.location.city or 'Dallas' }}"
+                       class="form-control">
+            </div>
+
+            <div class="form-group">
+                <label for="state" class="block text-sm font-medium text-gray-700">State</label>
+                <input type="text"
+                       id="state"
+                       name="state"
+                       value="{{ main_config.location.state or 'Texas' }}"
+                       class="form-control">
+            </div>
+
+            <div class="form-group">
+                <label for="country" class="block text-sm font-medium text-gray-700">Country</label>
+                <input type="text"
+                       id="country"
+                       name="country"
+                       value="{{ main_config.location.country or 'US' }}"
+                       class="form-control">
+            </div>
+        </div>
+
+        <!-- Plugin System Settings -->
+        <div class="border-t border-gray-200 pt-6 mt-6">
+            <h3 class="text-lg font-semibold text-gray-900 mb-4">Plugin System Settings</h3>
+            <p class="text-sm text-gray-600 mb-4">Configure the core plugin system behavior.</p>
+
+            <div class="space-y-4">
+                <!-- Auto Discover -->
+                <div class="form-group">
+                    <label class="flex items-center">
+                        <input type="checkbox"
+                               name="auto_discover"
+                               {% if main_config.get('plugin_system', {}).get('auto_discover', True) %}checked{% endif %}
+                               class="form-control h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded">
+                        <span class="ml-2 text-sm font-medium text-gray-900">Auto Discover Plugins</span>
+                    </label>
+                    <p class="mt-1 text-sm text-gray-600">Automatically discover plugins in the plugins directory on startup.</p>
+                </div>
+
+                <!-- Auto Load Enabled -->
+                <div class="form-group">
+                    <label class="flex items-center">
+                        <input type="checkbox"
+                               name="auto_load_enabled"
+                               {% if main_config.get('plugin_system', {}).get('auto_load_enabled', True) %}checked{% endif %}
+                               class="form-control h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded">
+                        <span class="ml-2 text-sm font-medium text-gray-900">Auto Load Enabled Plugins</span>
+                    </label>
+                    <p class="mt-1 text-sm text-gray-600">Automatically load plugins that are enabled in configuration.</p>
+                </div>
+
+                <!-- Development Mode -->
+                <div class="form-group">
+                    <label class="flex items-center">
+                        <input type="checkbox"
+                               name="development_mode"
+                               {% if main_config.get('plugin_system', {}).get('development_mode', False) %}checked{% endif %}
+                               class="form-control h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded">
+                        <span class="ml-2 text-sm font-medium text-gray-900">Development Mode</span>
+                    </label>
+                    <p class="mt-1 text-gray-600 text-sm">Enable verbose logging and development features for plugin debugging.</p>
+                </div>
+
+                <!-- Plugins Directory -->
+                <div class="form-group">
+                    <label for="plugins_directory" class="block text-sm font-medium text-gray-700">Plugins Directory</label>
+                    <input type="text"
+                           id="plugins_directory"
+                           name="plugins_directory"
+                           value="{{ main_config.get('plugin_system', {}).get('plugins_directory', 'plugin-repos') }}"
+                           placeholder="plugin-repos"
+                           class="form-control">
+                    <p class="mt-1 text-sm text-gray-600">Directory where plugins are stored (relative to project root).</p>
+                </div>
+            </div>
+        </div>
+
+        <!-- Submit Button -->
+        <div class="flex justify-end mt-6">
+            <button type="submit"
+                    class="btn bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-md">
+                <i class="fas fa-save mr-2"></i>
+                Save General Settings
+            </button>
+        </div>
+    </form>
+</div>

web_interface/templates/v3/partials/logs.html

@@ -0,0 +1,626 @@
+<div class="bg-white rounded-lg shadow p-6">
+    <div class="border-b border-gray-200 pb-4 mb-6">
+        <h2 class="text-lg font-semibold text-gray-900">System Logs</h2>
+        <p class="mt-1 text-sm text-gray-600">View real-time logs from the LED matrix service for troubleshooting.</p>
+    </div>
+
+    <!-- Controls -->
+    <div class="flex flex-wrap items-center justify-between gap-4 mb-6">
+        <div class="flex items-center space-x-4">
+            <!-- Log Mode Toggle -->
+            <div class="flex items-center space-x-2">
+                <label class="flex items-center">
+                    <input type="checkbox" id="log-realtime-toggle" class="form-control h-4 w-4" checked>
+                    <span class="ml-2 text-sm font-medium">Real-time</span>
+                </label>
+                <span class="text-sm text-gray-600">|</span>
+                <button id="refresh-logs-btn" class="btn bg-gray-600 hover:bg-gray-700 text-white px-3 py-1 rounded text-sm">
+                    <i class="fas fa-sync-alt mr-1"></i>Refresh
+                </button>
+            </div>
+
+            <!-- Log Level Filter -->
+            <select id="log-level-filter" class="form-control text-sm">
+                <option value="">All Levels</option>
+                <option value="ERROR">Errors Only</option>
+                <option value="WARNING">Warnings & Errors</option>
+                <option value="INFO">Info & Above</option>
+            </select>
+
+            <!-- Search -->
+            <div class="relative">
+                <input type="text" id="log-search" placeholder="Search logs..." class="form-control text-sm pl-8 pr-4 py-1 w-48">
+                <i class="fas fa-search absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 text-xs"></i>
+            </div>
+        </div>
+
+        <div class="flex items-center space-x-2">
+            <!-- Auto-scroll toggle -->
+            <label class="flex items-center">
+                <input type="checkbox" id="log-autoscroll" class="form-control h-4 w-4" checked>
+                <span class="ml-2 text-sm">Auto-scroll</span>
+            </label>
+
+            <!-- Clear logs -->
+            <button id="clear-logs-btn" class="btn bg-red-600 hover:bg-red-700 text-white px-3 py-1 rounded text-sm">
+                <i class="fas fa-trash mr-1"></i>Clear
+            </button>
+
+            <!-- Download logs -->
+            <button id="download-logs-btn" class="btn bg-green-600 hover:bg-green-700 text-white px-3 py-1 rounded text-sm">
+                <i class="fas fa-download mr-1"></i>Download
+            </button>
+        </div>
+    </div>
+
+    <!-- Log Display -->
+    <div class="relative">
+        <div id="logs-container" class="bg-gray-900 text-gray-100 font-mono text-sm rounded-lg p-3 border border-gray-700 shadow-inner relative" style="height: 500px; min-height: 400px; max-height: 70vh;">
+            <div id="logs-loading" class="absolute inset-0 flex items-center justify-center text-gray-400 bg-gray-900">
+                <div class="text-center">
+                    <i class="fas fa-spinner fa-spin text-2xl mb-2"></i>
+                    <p>Loading logs...</p>
+                </div>
+            </div>
+            <div id="logs-display" class="hidden absolute inset-0 overflow-y-auto bg-gray-900">
+                <div class="logs-content p-0">
+                    <!-- Logs will be inserted here -->
+                </div>
+            </div>
+            <div id="logs-empty" class="hidden absolute inset-0 flex items-center justify-center text-gray-400 bg-gray-900">
+                <div class="text-center">
+                    <i class="fas fa-file-alt text-4xl mb-2"></i>
+                    <p>No logs available</p>
+                    <p class="text-sm mt-2">Logs will appear here when the service runs</p>
+                </div>
+            </div>
+        </div>
+
+        <!-- Log stats -->
+        <div id="log-stats" class="absolute top-2 right-2 bg-black bg-opacity-70 text-white text-xs px-3 py-1.5 rounded-md backdrop-blur-sm hidden">
+            <i class="fas fa-list-ul mr-1"></i>
+            <span id="log-count">0</span> entries
+        </div>
+    </div>
+
+    <!-- Connection Status -->
+    <div id="log-connection-status" class="mt-4 text-sm text-gray-600 flex items-center space-x-2">
+        <div class="w-2 h-2 bg-green-500 rounded-full"></div>
+        <span>Connected to log stream</span>
+    </div>
+</div>
+
+<script>
+// Global variables - use window properties to avoid redeclaration errors with HTMX reloads
+// Initialize only if not already defined
+if (typeof window._logsEventSource === 'undefined') {
+    window._logsEventSource = null;
+}
+if (typeof window._allLogs === 'undefined') {
+    window._allLogs = [];
+}
+if (typeof window._filteredLogs === 'undefined') {
+    window._filteredLogs = [];
+}
+if (typeof window._logContainer === 'undefined') {
+    window._logContainer = null;
+}
+if (typeof window._logsContent === 'undefined') {
+    window._logsContent = null;
+}
+if (typeof window._isRealtime === 'undefined') {
+    window._isRealtime = true;
+}
+if (typeof window._MAX_LOGS === 'undefined') {
+    window._MAX_LOGS = 500; // Maximum number of logs to keep in memory
+}
+
+// Use window properties directly to avoid redeclaration issues
+// Clean up any existing event source before reinitializing
+if (window._logsEventSource) {
+    window._logsEventSource.close();
+    window._logsEventSource = null;
+}
+
+// Reset arrays on reload
+window._allLogs = [];
+window._filteredLogs = [];
+
+// Initialize immediately (this script runs when the partial is loaded)
+(function() {
+    window._logContainer = document.getElementById('logs-container');
+    window._logsContent = document.querySelector('#logs-display .logs-content');
+
+    // Logs container initialized successfully
+
+    initializeLogs();
+
+    // Event listeners - remove old ones first to prevent duplicates
+    const realtimeToggle = document.getElementById('log-realtime-toggle');
+    const refreshBtn = document.getElementById('refresh-logs-btn');
+    const levelFilter = document.getElementById('log-level-filter');
+    const searchInput = document.getElementById('log-search');
+    const autoscrollToggle = document.getElementById('log-autoscroll');
+    const clearBtn = document.getElementById('clear-logs-btn');
+    const downloadBtn = document.getElementById('download-logs-btn');
+    
+    // Clone and replace to remove old listeners
+    if (realtimeToggle) {
+        const newToggle = realtimeToggle.cloneNode(true);
+        realtimeToggle.parentNode.replaceChild(newToggle, realtimeToggle);
+        newToggle.addEventListener('change', toggleRealtime);
+    }
+    if (refreshBtn) {
+        const newBtn = refreshBtn.cloneNode(true);
+        refreshBtn.parentNode.replaceChild(newBtn, refreshBtn);
+        newBtn.addEventListener('click', refreshLogs);
+    }
+    if (levelFilter) {
+        const newFilter = levelFilter.cloneNode(true);
+        levelFilter.parentNode.replaceChild(newFilter, levelFilter);
+        newFilter.addEventListener('change', filterLogs);
+    }
+    if (searchInput) {
+        const newInput = searchInput.cloneNode(true);
+        searchInput.parentNode.replaceChild(newInput, searchInput);
+        newInput.addEventListener('input', filterLogs);
+    }
+    if (autoscrollToggle) {
+        const newToggle = autoscrollToggle.cloneNode(true);
+        autoscrollToggle.parentNode.replaceChild(newToggle, autoscrollToggle);
+        newToggle.addEventListener('change', toggleAutoscroll);
+    }
+    if (clearBtn) {
+        const newBtn = clearBtn.cloneNode(true);
+        clearBtn.parentNode.replaceChild(newBtn, clearBtn);
+        newBtn.addEventListener('click', clearLogs);
+    }
+    if (downloadBtn) {
+        const newBtn = downloadBtn.cloneNode(true);
+        downloadBtn.parentNode.replaceChild(newBtn, downloadBtn);
+        newBtn.addEventListener('click', downloadLogs);
+    }
+
+    // Handle window resize for responsive height
+    window.addEventListener('resize', function() {
+        if (window._logContainer) {
+            // Force a reflow to update sizing
+            window._logContainer.style.display = 'none';
+            window._logContainer.offsetHeight; // Trigger reflow
+            window._logContainer.style.display = '';
+
+            // Re-evaluate scroll position after resize
+            setTimeout(function() {
+                const distanceFromBottom = window._logContainer.scrollHeight - window._logContainer.scrollTop - window._logContainer.clientHeight;
+                window._isUserNearBottom = distanceFromBottom <= window._scrollThreshold;
+            }, 100);
+        }
+    });
+})();
+
+function initializeLogs() {
+    // Load initial logs
+    loadLogs();
+
+    // Setup SSE for real-time logs
+    setupRealtimeLogs();
+
+    // Setup auto-scroll
+    setupAutoscroll();
+}
+
+function loadLogs() {
+    showLoading();
+
+    fetch('/api/v3/logs')
+        .then(response => response.json())
+        .then(data => {
+            hideLoading();
+
+            if (data.status === 'success' && data.data && data.data.logs) {
+                processLogs(data.data.logs);
+                updateLogStats();
+            } else {
+                showEmptyState();
+            }
+        })
+        .catch(error => {
+            hideLoading();
+            showError('Failed to load logs: ' + error.message);
+        });
+}
+
+function setupRealtimeLogs() {
+    if (window._logsEventSource) {
+        window._logsEventSource.close();
+    }
+
+    window._logsEventSource = new EventSource('/api/v3/stream/logs');
+
+    window._logsEventSource.onopen = function() {
+        document.getElementById('log-connection-status').innerHTML = `
+            <div class="w-2 h-2 bg-green-500 rounded-full"></div>
+            <span>Connected to log stream</span>
+        `;
+    };
+
+    window._logsEventSource.onmessage = function(event) {
+        const data = JSON.parse(event.data);
+
+        if (data.logs && window._isRealtime) {
+            processLogs(data.logs, true);
+            updateLogStats();
+
+            // Use the new smart scroll function
+            scrollToBottomIfNeeded();
+        }
+    };
+
+    window._logsEventSource.onerror = function() {
+        document.getElementById('log-connection-status').innerHTML = `
+            <div class="w-2 h-2 bg-red-500 rounded-full"></div>
+            <span>Disconnected from log stream</span>
+        `;
+
+        // Attempt to reconnect after 5 seconds
+        setTimeout(setupRealtimeLogs, 5000);
+    };
+}
+
+function processLogs(logsText, append = false) {
+    if (!append) {
+        window._allLogs = [];
+        if (window._logsContent) {
+            window._logsContent.innerHTML = '';
+        }
+
+        // Container cleared for new logs
+    }
+
+    // Parse journalctl output
+    const lines = logsText.split('\n').filter(line => line.trim());
+
+    lines.forEach(line => {
+        // Skip empty lines
+        if (!line.trim()) return;
+
+        // Try to parse journalctl format: "MMM DD HH:MM:SS hostname service[pid]: message"
+        // Example: "Oct 13 14:23:45 raspberrypi ledmatrix[1234]: INFO: Starting display"
+        
+        let timestamp = '';
+        let level = 'INFO';
+        let message = line;
+        
+        // Extract timestamp (first part before hostname)
+        const timestampMatch = line.match(/^([A-Z][a-z]{2}\s+\d{1,2}\s+\d{2}:\d{2}:\d{2})/);
+        if (timestampMatch) {
+            timestamp = timestampMatch[1];
+            
+            // Find the message part (after service name and pid)
+            const messageMatch = line.match(/:\s*(.+)$/);
+            if (messageMatch) {
+                message = messageMatch[1];
+                
+                // Detect log level from message
+                if (message.match(/\b(ERROR|CRITICAL|FATAL)\b/i)) {
+                    level = 'ERROR';
+                } else if (message.match(/\b(WARNING|WARN)\b/i)) {
+                    level = 'WARNING';
+                } else if (message.match(/\bDEBUG\b/i)) {
+                    level = 'DEBUG';
+                } else if (message.match(/\bINFO\b/i)) {
+                    level = 'INFO';
+                }
+                
+                // Clean up level prefix from message if it exists
+                message = message.replace(/^(ERROR|WARNING|WARN|INFO|DEBUG):\s*/i, '');
+            }
+        } else {
+            // If no timestamp, use current time
+            timestamp = new Date().toLocaleString('en-US', {
+                month: 'short',
+                day: '2-digit',
+                hour: '2-digit',
+                minute: '2-digit',
+                second: '2-digit',
+                hour12: false
+            });
+        }
+
+        const logEntry = {
+            timestamp: timestamp,
+            level: level,
+            message: message,
+            raw: line,
+            id: Date.now() + Math.random()
+        };
+        
+        // Don't add duplicate entries when appending
+        if (!append || !window._allLogs.find(log => log.raw === line)) {
+            window._allLogs.push(logEntry);
+        }
+    });
+
+    // Trim logs if we exceed the maximum
+    if (window._allLogs.length > window._MAX_LOGS) {
+        window._allLogs = window._allLogs.slice(-window._MAX_LOGS);
+    }
+
+    filterLogs();
+}
+
+function renderLogs() {
+    if (window._filteredLogs.length === 0) {
+        showEmptyState();
+        return;
+    }
+
+    showLogs();
+
+    if (window._logsContent) {
+        window._logsContent.innerHTML = '';
+    }
+
+    window._filteredLogs.forEach(log => {
+        const logElement = document.createElement('div');
+        logElement.className = `log-entry py-1 px-2 hover:bg-gray-800 rounded transition-colors duration-150 ${getLogLevelClass(log.level)}`;
+        logElement.innerHTML = `
+            <div class="flex items-start gap-3 text-xs font-mono">
+                <span class="log-timestamp text-gray-500 flex-shrink-0 w-32">${escapeHtml(log.timestamp)}</span>
+                <span class="log-level flex-shrink-0 px-2 py-0.5 rounded text-xs font-semibold ${getLogLevelBadgeClass(log.level)}">${log.level}</span>
+                <span class="log-message flex-1 ${getLogLevelTextClass(log.level)} break-words">${escapeHtml(log.message)}</span>
+            </div>
+        `;
+        if (window._logsContent) {
+            window._logsContent.appendChild(logElement);
+        }
+    });
+}
+
+function getLogLevelClass(level) {
+    // Background color for the entire log entry row
+    const classes = {
+        'ERROR': 'bg-red-900 bg-opacity-10',
+        'WARNING': 'bg-yellow-900 bg-opacity-10',
+        'INFO': '',
+        'DEBUG': 'bg-gray-800 bg-opacity-30'
+    };
+    return classes[level] || '';
+}
+
+function getLogLevelBadgeClass(level) {
+    const classes = {
+        'ERROR': 'bg-red-600 text-white',
+        'WARNING': 'bg-yellow-600 text-white',
+        'INFO': 'bg-blue-600 text-white',
+        'DEBUG': 'bg-gray-600 text-white'
+    };
+    return classes[level] || 'bg-gray-600 text-white';
+}
+
+function getLogLevelTextClass(level) {
+    const classes = {
+        'ERROR': 'text-red-300',
+        'WARNING': 'text-yellow-300',
+        'INFO': 'text-gray-200',
+        'DEBUG': 'text-gray-400'
+    };
+    return classes[level] || 'text-gray-300';
+}
+
+function filterLogs() {
+    const levelFilterEl = document.getElementById('log-level-filter');
+    const searchEl = document.getElementById('log-search');
+    if (!levelFilterEl || !searchEl) return;
+    
+    const levelFilter = levelFilterEl.value;
+    const searchTerm = searchEl.value.toLowerCase();
+
+    window._filteredLogs = window._allLogs.filter(log => {
+        // Level filter
+        if (levelFilter) {
+            const levels = {
+                'ERROR': ['ERROR'],
+                'WARNING': ['ERROR', 'WARNING'],
+                'INFO': ['ERROR', 'WARNING', 'INFO']
+            };
+
+            if (!levels[levelFilter].includes(log.level)) {
+                return false;
+            }
+        }
+
+        // Search filter
+        if (searchTerm && !log.message.toLowerCase().includes(searchTerm)) {
+            return false;
+        }
+
+        return true;
+    });
+
+    renderLogs();
+    updateLogStats();
+}
+
+function toggleRealtime() {
+    const toggleEl = document.getElementById('log-realtime-toggle');
+    if (!toggleEl) return;
+    
+    window._isRealtime = toggleEl.checked;
+
+    if (window._isRealtime) {
+        setupRealtimeLogs();
+    } else if (window._logsEventSource) {
+        window._logsEventSource.close();
+        window._logsEventSource = null;
+    }
+}
+
+function refreshLogs() {
+    loadLogs();
+    if (typeof showNotification !== 'undefined') {
+        showNotification('Logs refreshed', 'success');
+    }
+}
+
+function clearLogs() {
+    window._allLogs = [];
+    window._filteredLogs = [];
+    if (window._logsContent) {
+        window._logsContent.innerHTML = '';
+    }
+    showEmptyState();
+    updateLogStats();
+    if (typeof showNotification !== 'undefined') {
+        showNotification('Logs cleared', 'info');
+    }
+}
+
+function downloadLogs() {
+    if (window._filteredLogs.length === 0) {
+        if (typeof showNotification !== 'undefined') {
+            showNotification('No logs to download', 'warning');
+        }
+        return;
+    }
+
+    const logText = window._filteredLogs.map(log => log.raw).join('\n');
+    const blob = new Blob([logText], { type: 'text/plain' });
+    const url = URL.createObjectURL(blob);
+
+    const a = document.createElement('a');
+    a.href = url;
+    a.download = `ledmatrix-logs-${new Date().toISOString().slice(0, 19)}.txt`;
+    document.body.appendChild(a);
+    a.click();
+    document.body.removeChild(a);
+    URL.revokeObjectURL(url);
+
+    if (typeof showNotification !== 'undefined') {
+        showNotification('Logs downloaded', 'success');
+    }
+}
+
+// Track if user is near bottom for smart auto-scroll
+if (typeof window._isUserNearBottom === 'undefined') {
+    window._isUserNearBottom = true;
+}
+if (typeof window._scrollThreshold === 'undefined') {
+    window._scrollThreshold = 100; // pixels from bottom to consider "near bottom"
+}
+
+function setupAutoscroll() {
+    if (!window._logsContent) return;
+    
+    const observer = new MutationObserver(function() {
+        // Use requestAnimationFrame for better timing
+        requestAnimationFrame(scrollToBottomIfNeeded);
+    });
+    observer.observe(window._logsContent, { childList: true });
+
+    // Also listen for manual scroll events to detect when user is not at bottom
+    if (window._logContainer) {
+        window._logContainer.addEventListener('scroll', function() {
+            const distanceFromBottom = window._logContainer.scrollHeight - window._logContainer.scrollTop - window._logContainer.clientHeight;
+            window._isUserNearBottom = distanceFromBottom <= window._scrollThreshold;
+        });
+    }
+}
+
+function scrollToBottomIfNeeded() {
+    const autoscrollEl = document.getElementById('log-autoscroll');
+    if (autoscrollEl && autoscrollEl.checked && window._logContainer && window._isUserNearBottom) {
+        // Use requestAnimationFrame for smooth scrolling
+        requestAnimationFrame(function() {
+            // Remember current scroll position
+            const previousScrollHeight = window._logContainer.scrollHeight;
+
+            // Scroll to bottom
+            window._logContainer.scrollTop = window._logContainer.scrollHeight;
+
+            // Ensure we're actually at the bottom after a brief delay
+            setTimeout(function() {
+                if (window._logContainer.scrollTop + window._logContainer.clientHeight >= window._logContainer.scrollHeight - 10) {
+                    window._isUserNearBottom = true;
+                }
+            }, 50);
+        });
+    }
+}
+
+function scrollToBottom() {
+    // Legacy function for backward compatibility
+    if (window._logContainer) {
+        window._logContainer.scrollTop = window._logContainer.scrollHeight;
+        window._isUserNearBottom = true;
+    }
+}
+
+function toggleAutoscroll() {
+    const autoscrollEl = document.getElementById('log-autoscroll');
+    if (!autoscrollEl || !autoscrollEl.checked) {
+        // Don't auto-scroll if unchecked or element doesn't exist
+        window._isUserNearBottom = false;
+        return;
+    }
+
+    // Scroll to bottom when re-enabled and user was near bottom
+    if (window._isUserNearBottom) {
+        scrollToBottom();
+    }
+}
+
+function updateLogStats() {
+    const stats = document.getElementById('log-stats');
+    const count = document.getElementById('log-count');
+
+    if (stats && count) {
+        count.textContent = window._filteredLogs.length;
+        stats.classList.remove('hidden');
+    }
+}
+
+function showLoading() {
+    document.getElementById('logs-loading').classList.remove('hidden');
+    document.getElementById('logs-display').classList.add('hidden');
+    document.getElementById('logs-empty').classList.add('hidden');
+}
+
+function showLogs() {
+    document.getElementById('logs-loading').classList.add('hidden');
+    document.getElementById('logs-display').classList.remove('hidden');
+    document.getElementById('logs-empty').classList.add('hidden');
+}
+
+function hideLoading() {
+    document.getElementById('logs-loading').classList.add('hidden');
+}
+
+function showEmptyState() {
+    document.getElementById('logs-loading').classList.add('hidden');
+    document.getElementById('logs-display').classList.add('hidden');
+    document.getElementById('logs-empty').classList.remove('hidden');
+    document.getElementById('log-stats').classList.add('hidden');
+}
+
+function showError(message) {
+    if (window._logsContent) {
+        window._logsContent.innerHTML = `<div class="text-red-400 p-4">${escapeHtml(message)}</div>`;
+        window._logsContent.classList.remove('hidden');
+    }
+}
+
+// Utility function to escape HTML
+function escapeHtml(text) {
+    const div = document.createElement('div');
+    div.textContent = text;
+    return div.innerHTML;
+}
+
+// Cleanup on page unload
+window.addEventListener('beforeunload', function() {
+    if (window._logsEventSource) {
+        window._logsEventSource.close();
+    }
+});
+</script>

web_interface/templates/v3/partials/operation_history.html

@@ -0,0 +1,375 @@
+<div class="bg-white rounded-lg shadow p-6">
+    <div class="border-b border-gray-200 pb-4 mb-6">
+        <h2 class="text-lg font-semibold text-gray-900">Operation History</h2>
+        <p class="mt-1 text-sm text-gray-600">View history of plugin operations and configuration changes for debugging and auditing.</p>
+    </div>
+
+    <!-- Controls -->
+    <div class="flex flex-wrap items-center justify-between gap-4 mb-6">
+        <div class="flex items-center space-x-4">
+            <!-- Filter by Plugin -->
+            <select id="history-plugin-filter" class="form-control text-sm">
+                <option value="">All Plugins</option>
+            </select>
+
+            <!-- Filter by Operation Type -->
+            <select id="history-type-filter" class="form-control text-sm">
+                <option value="">All Operations</option>
+                <option value="install">Install</option>
+                <option value="update">Update</option>
+                <option value="uninstall">Uninstall</option>
+                <option value="enable">Enable</option>
+                <option value="disable">Disable</option>
+                <option value="config_save">Config Save</option>
+            </select>
+
+            <!-- Filter by Status -->
+            <select id="history-status-filter" class="form-control text-sm">
+                <option value="">All Statuses</option>
+                <option value="completed">Completed</option>
+                <option value="success">Success</option>
+                <option value="failed">Failed</option>
+                <option value="error">Error</option>
+                <option value="in_progress">In Progress</option>
+            </select>
+
+            <!-- Search -->
+            <div class="relative">
+                <input type="text" id="history-search" placeholder="Search operations..." class="form-control text-sm pl-8 pr-4 py-1 w-48">
+                <i class="fas fa-search absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 text-xs"></i>
+            </div>
+        </div>
+
+        <div class="flex items-center space-x-2">
+            <!-- Refresh -->
+            <button id="refresh-history-btn" class="btn bg-blue-600 hover:bg-blue-700 text-white px-3 py-1 rounded text-sm">
+                <i class="fas fa-sync-alt mr-1"></i>Refresh
+            </button>
+
+            <!-- Clear History -->
+            <button id="clear-history-btn" class="btn bg-red-600 hover:bg-red-700 text-white px-3 py-1 rounded text-sm">
+                <i class="fas fa-trash mr-1"></i>Clear
+            </button>
+        </div>
+    </div>
+
+    <!-- History Table -->
+    <div class="overflow-x-auto">
+        <table class="min-w-full divide-y divide-gray-200">
+            <thead class="bg-gray-50">
+                <tr>
+                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Timestamp</th>
+                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Operation</th>
+                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Plugin</th>
+                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Status</th>
+                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">User</th>
+                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Details</th>
+                </tr>
+            </thead>
+            <tbody id="history-table-body" class="bg-white divide-y divide-gray-200">
+                <tr>
+                    <td colspan="6" class="px-6 py-4 text-center text-gray-500">
+                        <div class="animate-pulse">
+                            <div class="h-4 bg-gray-200 rounded w-1/4 mx-auto"></div>
+                        </div>
+                    </td>
+                </tr>
+            </tbody>
+        </table>
+    </div>
+
+    <!-- Pagination -->
+    <div class="mt-4 flex items-center justify-between">
+        <div class="text-sm text-gray-700">
+            Showing <span id="history-start">0</span> to <span id="history-end">0</span> of <span id="history-total">0</span> operations
+        </div>
+        <div class="flex space-x-2">
+            <button id="history-prev-btn" class="btn bg-gray-600 hover:bg-gray-700 text-white px-3 py-1 rounded text-sm disabled:opacity-50" disabled>
+                <i class="fas fa-chevron-left mr-1"></i>Previous
+            </button>
+            <button id="history-next-btn" class="btn bg-gray-600 hover:bg-gray-700 text-white px-3 py-1 rounded text-sm disabled:opacity-50" disabled>
+                Next<i class="fas fa-chevron-right ml-1"></i>
+            </button>
+        </div>
+    </div>
+</div>
+
+<script>
+(function() {
+    let currentPage = 1;
+    const pageSize = 50;
+    let allHistory = [];
+    let filteredHistory = [];
+
+    // Load operation history
+    async function loadHistory() {
+        try {
+            const response = await fetch('/api/v3/plugins/operation/history?limit=1000');
+            const data = await response.json();
+            
+            if (data.status === 'success') {
+                allHistory = data.data || [];
+                applyFilters();
+            } else {
+                console.error('Failed to load history:', data.message);
+                showError('Failed to load operation history');
+            }
+        } catch (error) {
+            console.error('Error loading history:', error);
+            showError('Error loading operation history');
+        }
+    }
+
+    // Apply filters
+    function applyFilters() {
+        const pluginFilter = document.getElementById('history-plugin-filter')?.value || '';
+        const typeFilter = document.getElementById('history-type-filter')?.value || '';
+        const statusFilter = document.getElementById('history-status-filter')?.value || '';
+        const searchTerm = (document.getElementById('history-search')?.value || '').toLowerCase();
+
+        filteredHistory = allHistory.filter(record => {
+            if (pluginFilter && record.plugin_id !== pluginFilter) return false;
+            if (typeFilter && record.operation_type !== typeFilter) return false;
+            if (statusFilter && record.status !== statusFilter) return false;
+            if (searchTerm) {
+                const searchable = [
+                    record.operation_type,
+                    record.plugin_id,
+                    record.status,
+                    record.user,
+                    record.error,
+                    JSON.stringify(record.details || {})
+                ].join(' ').toLowerCase();
+                if (!searchable.includes(searchTerm)) return false;
+            }
+            return true;
+        });
+
+        renderHistory();
+    }
+
+    // Render history table
+    function renderHistory() {
+        const tbody = document.getElementById('history-table-body');
+        if (!tbody) return;
+
+        const start = (currentPage - 1) * pageSize;
+        const end = Math.min(start + pageSize, filteredHistory.length);
+        const pageData = filteredHistory.slice(start, end);
+
+        if (pageData.length === 0) {
+            tbody.innerHTML = `
+                <tr>
+                    <td colspan="6" class="px-6 py-4 text-center text-gray-500">
+                        No operations found
+                    </td>
+                </tr>
+            `;
+            return;
+        }
+
+        tbody.innerHTML = pageData.map(record => {
+            const timestamp = new Date(record.timestamp || record.created_at || Date.now());
+            const timeStr = timestamp.toLocaleString();
+            const statusClass = getStatusClass(record.status);
+            const operationType = record.operation_type || 'unknown';
+            const pluginId = record.plugin_id || '-';
+            const user = record.user || '-';
+            const details = record.details ? JSON.stringify(record.details, null, 2) : '';
+            const error = record.error ? `<div class="text-red-600 text-xs mt-1">${escapeHtml(record.error)}</div>` : '';
+
+            return `
+                <tr class="hover:bg-gray-50">
+                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">${escapeHtml(timeStr)}</td>
+                    <td class="px-6 py-4 whitespace-nowrap text-sm">
+                        <span class="px-2 py-1 text-xs font-medium rounded ${getOperationTypeClass(operationType)}">
+                            ${escapeHtml(operationType)}
+                        </span>
+                    </td>
+                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">${escapeHtml(pluginId)}</td>
+                    <td class="px-6 py-4 whitespace-nowrap text-sm">
+                        <span class="px-2 py-1 text-xs font-medium rounded ${statusClass}">
+                            ${escapeHtml(record.status || 'unknown')}
+                        </span>
+                    </td>
+                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">${escapeHtml(user)}</td>
+                    <td class="px-6 py-4 text-sm text-gray-500">
+                        ${details ? `<details class="cursor-pointer"><summary class="text-blue-600 hover:text-blue-800">View Details</summary><pre class="mt-2 text-xs bg-gray-100 p-2 rounded overflow-auto max-h-32">${escapeHtml(details)}</pre></details>` : '-'}
+                        ${error}
+                    </td>
+                </tr>
+            `;
+        }).join('');
+
+        // Update pagination
+        document.getElementById('history-start').textContent = filteredHistory.length > 0 ? start + 1 : 0;
+        document.getElementById('history-end').textContent = end;
+        document.getElementById('history-total').textContent = filteredHistory.length;
+
+        // Update pagination buttons
+        const prevBtn = document.getElementById('history-prev-btn');
+        const nextBtn = document.getElementById('history-next-btn');
+        if (prevBtn) prevBtn.disabled = currentPage === 1;
+        if (nextBtn) nextBtn.disabled = end >= filteredHistory.length;
+    }
+
+    // Helper functions
+    function getStatusClass(status) {
+        const statusLower = (status || '').toLowerCase();
+        if (statusLower === 'success' || statusLower === 'completed') {
+            return 'bg-green-100 text-green-800';
+        } else if (statusLower === 'failed' || statusLower === 'error') {
+            return 'bg-red-100 text-red-800';
+        } else if (statusLower === 'in_progress' || statusLower === 'pending') {
+            return 'bg-yellow-100 text-yellow-800';
+        }
+        return 'bg-gray-100 text-gray-800';
+    }
+
+    function getOperationTypeClass(type) {
+        const typeLower = (type || '').toLowerCase();
+        if (typeLower === 'install') {
+            return 'bg-blue-100 text-blue-800';
+        } else if (typeLower === 'update') {
+            return 'bg-purple-100 text-purple-800';
+        } else if (typeLower === 'uninstall') {
+            return 'bg-red-100 text-red-800';
+        } else if (typeLower === 'enable' || typeLower === 'disable') {
+            return 'bg-yellow-100 text-yellow-800';
+        } else if (typeLower === 'config_save') {
+            return 'bg-green-100 text-green-800';
+        }
+        return 'bg-gray-100 text-gray-800';
+    }
+
+    function escapeHtml(text) {
+        const div = document.createElement('div');
+        div.textContent = text;
+        return div.innerHTML;
+    }
+
+    function showError(message) {
+        if (typeof showNotification === 'function') {
+            showNotification(message, 'error');
+        } else {
+            alert(message);
+        }
+    }
+
+    // Populate plugin filter
+    async function populatePluginFilter() {
+        try {
+            // Use PluginAPI if available, otherwise fall back to direct fetch
+            let data;
+            if (window.PluginAPI && window.PluginAPI.getInstalledPlugins) {
+                const plugins = await window.PluginAPI.getInstalledPlugins();
+                data = { status: 'success', data: { plugins: plugins } };
+            } else {
+                const response = await fetch('/api/v3/plugins/installed');
+                data = await response.json();
+            }
+            
+            if (data.status === 'success' && data.data) {
+                const select = document.getElementById('history-plugin-filter');
+                if (select) {
+                    const plugins = Object.keys(data.data);
+                    plugins.forEach(pluginId => {
+                        const option = document.createElement('option');
+                        option.value = pluginId;
+                        option.textContent = pluginId;
+                        select.appendChild(option);
+                    });
+                }
+            }
+        } catch (error) {
+            console.error('Error loading plugins for filter:', error);
+        }
+    }
+
+    // Event listeners
+    function setupEventListeners() {
+        const refreshBtn = document.getElementById('refresh-history-btn');
+        if (refreshBtn) {
+            refreshBtn.addEventListener('click', () => {
+                loadHistory();
+            });
+        }
+
+        const clearBtn = document.getElementById('clear-history-btn');
+        if (clearBtn) {
+            clearBtn.addEventListener('click', () => {
+                if (confirm('Are you sure you want to clear the operation history? This cannot be undone.')) {
+                    // TODO: Implement clear history API endpoint
+                    showError('Clear history not yet implemented');
+                }
+            });
+        }
+
+        const prevBtn = document.getElementById('history-prev-btn');
+        if (prevBtn) {
+            prevBtn.addEventListener('click', () => {
+                if (currentPage > 1) {
+                    currentPage--;
+                    renderHistory();
+                }
+            });
+        }
+
+        const nextBtn = document.getElementById('history-next-btn');
+        if (nextBtn) {
+            nextBtn.addEventListener('click', () => {
+                const start = (currentPage - 1) * pageSize;
+                const end = Math.min(start + pageSize, filteredHistory.length);
+                if (end < filteredHistory.length) {
+                    currentPage++;
+                    renderHistory();
+                }
+            });
+        }
+
+        // Filter change listeners
+        ['history-plugin-filter', 'history-type-filter', 'history-status-filter'].forEach(id => {
+            const element = document.getElementById(id);
+            if (element) {
+                element.addEventListener('change', () => {
+                    currentPage = 1;
+                    applyFilters();
+                });
+            }
+        });
+
+        const searchInput = document.getElementById('history-search');
+        if (searchInput) {
+            let searchTimeout;
+            searchInput.addEventListener('input', () => {
+                clearTimeout(searchTimeout);
+                searchTimeout = setTimeout(() => {
+                    currentPage = 1;
+                    applyFilters();
+                }, 300);
+            });
+        }
+    }
+
+    // Initialize
+    document.addEventListener('DOMContentLoaded', () => {
+        setupEventListeners();
+        populatePluginFilter();
+        loadHistory();
+    });
+
+    // Also initialize if script runs after DOM is ready
+    if (document.readyState === 'loading') {
+        document.addEventListener('DOMContentLoaded', () => {
+            setupEventListeners();
+            populatePluginFilter();
+            loadHistory();
+        });
+    } else {
+        setupEventListeners();
+        populatePluginFilter();
+        loadHistory();
+    }
+})();
+</script>
+

web_interface/templates/v3/partials/overview.html

@@ -0,0 +1,307 @@
+<div class="bg-white rounded-lg shadow p-6">
+    <div class="border-b border-gray-200 pb-4 mb-6">
+        <h2 class="text-lg font-semibold text-gray-900">System Overview</h2>
+        <p class="mt-1 text-sm text-gray-600">Monitor system status and manage your LED matrix display.</p>
+    </div>
+
+    <!-- System Stats Cards -->
+    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 xl:grid-cols-4 2xl:grid-cols-4 gap-6 mb-8">
+        <div class="bg-gray-50 rounded-lg p-4">
+            <div class="flex items-center">
+                <div class="flex-shrink-0">
+                    <i class="fas fa-microchip text-blue-600 text-xl"></i>
+                </div>
+                <div class="ml-3 w-0 flex-1">
+                    <dl>
+                        <dt class="text-sm font-medium text-gray-500 truncate">CPU Usage</dt>
+                        <dd class="text-lg font-medium text-gray-900" id="cpu-usage">--%</dd>
+                    </dl>
+                </div>
+            </div>
+        </div>
+
+        <div class="bg-gray-50 rounded-lg p-4">
+            <div class="flex items-center">
+                <div class="flex-shrink-0">
+                    <i class="fas fa-memory text-green-600 text-xl"></i>
+                </div>
+                <div class="ml-3 w-0 flex-1">
+                    <dl>
+                        <dt class="text-sm font-medium text-gray-500 truncate">Memory Usage</dt>
+                        <dd class="text-lg font-medium text-gray-900" id="memory-usage">--%</dd>
+                    </dl>
+                </div>
+            </div>
+        </div>
+
+        <div class="bg-gray-50 rounded-lg p-4">
+            <div class="flex items-center">
+                <div class="flex-shrink-0">
+                    <i class="fas fa-thermometer-half text-red-600 text-xl"></i>
+                </div>
+                <div class="ml-3 w-0 flex-1">
+                    <dl>
+                        <dt class="text-sm font-medium text-gray-500 truncate">CPU Temperature</dt>
+                        <dd class="text-lg font-medium text-gray-900" id="cpu-temp">--°C</dd>
+                    </dl>
+                </div>
+            </div>
+        </div>
+
+        <div class="bg-gray-50 rounded-lg p-4">
+            <div class="flex items-center">
+                <div class="flex-shrink-0">
+                    <i class="fas fa-desktop text-purple-600 text-xl"></i>
+                </div>
+                <div class="ml-3 w-0 flex-1">
+                    <dl>
+                        <dt class="text-sm font-medium text-gray-500 truncate">Display Status</dt>
+                        <dd class="text-lg font-medium text-gray-900" id="display-status">Unknown</dd>
+                    </dl>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <!-- Version Info -->
+    <div class="bg-blue-50 border border-blue-200 rounded-lg p-4 mb-6">
+        <div class="flex items-center justify-between">
+            <div class="flex items-center">
+                <i class="fas fa-code-branch text-blue-600 text-xl mr-3"></i>
+                <div>
+                    <dt class="text-sm font-medium text-gray-600">LEDMatrix Version</dt>
+                    <dd class="text-lg font-semibold text-gray-900" id="ledmatrix-version">Loading...</dd>
+                </div>
+            </div>
+            <button onclick="checkForUpdates()" 
+                    class="inline-flex items-center px-3 py-2 border border-blue-300 text-sm font-medium rounded-md text-blue-700 bg-white hover:bg-blue-50">
+                <i class="fas fa-sync-alt mr-2"></i>
+                Check Updates
+            </button>
+        </div>
+    </div>
+
+    <!-- Quick Actions -->
+    <div class="border-b border-gray-200 pb-4 mb-6">
+        <h3 class="text-md font-medium text-gray-900 mb-4">Quick Actions</h3>
+        <div class="flex flex-wrap gap-3" hx-ext="json-enc">
+            <button hx-post="/api/v3/system/action"
+                    hx-vals='{"action": "start_display"}'
+                    hx-swap="none"
+                    hx-on:htmx:after-request="if (typeof showNotification !== 'undefined' && event.detail.xhr && event.detail.xhr.responseJSON) { showNotification(event.detail.xhr.responseJSON.message || 'Display started', event.detail.xhr.responseJSON.status || 'success'); }"
+                    class="inline-flex items-center px-4 py-2 border border-transparent text-base font-semibold rounded-md text-white bg-green-600 hover:bg-green-700">
+                <i class="fas fa-play mr-2"></i>
+                Start Display
+            </button>
+
+            <button hx-post="/api/v3/system/action"
+                    hx-vals='{"action": "stop_display"}'
+                    hx-swap="none"
+                    hx-on:htmx:after-request="if (typeof showNotification !== 'undefined' && event.detail.xhr && event.detail.xhr.responseJSON) { showNotification(event.detail.xhr.responseJSON.message || 'Display stopped', event.detail.xhr.responseJSON.status || 'success'); }"
+                    class="inline-flex items-center px-4 py-2 border border-transparent text-base font-semibold rounded-md text-white bg-red-600 hover:bg-red-700">
+                <i class="fas fa-stop mr-2"></i>
+                Stop Display
+            </button>
+
+            <button hx-post="/api/v3/system/action"
+                    hx-vals='{"action": "git_pull"}'
+                    hx-confirm="This will stash any local changes and update the code. Continue?"
+                    hx-swap="none"
+                    hx-on:htmx:after-request="if (typeof showNotification !== 'undefined' && event.detail.xhr && event.detail.xhr.responseJSON) { showNotification(event.detail.xhr.responseJSON.message || 'Code update completed', event.detail.xhr.responseJSON.status || 'info'); }"
+                    class="inline-flex items-center px-4 py-2 border border-gray-300 text-base font-semibold rounded-md text-gray-900 bg-white hover:bg-gray-50">
+                <i class="fas fa-download mr-2"></i>
+                Update Code
+            </button>
+
+            <button hx-post="/api/v3/system/action"
+                    hx-vals='{"action": "reboot_system"}'
+                    hx-confirm="Are you sure you want to reboot the system?"
+                    hx-swap="none"
+                    hx-on:htmx:after-request="if (typeof showNotification !== 'undefined' && event.detail.xhr && event.detail.xhr.responseJSON) { showNotification(event.detail.xhr.responseJSON.message || 'System rebooting...', event.detail.xhr.responseJSON.status || 'info'); }"
+                    class="inline-flex items-center px-4 py-2 border border-transparent text-base font-semibold rounded-md text-white bg-yellow-600 hover:bg-yellow-700">
+                <i class="fas fa-power-off mr-2"></i>
+                Reboot System
+            </button>
+
+            <button hx-post="/api/v3/system/action"
+                    hx-vals='{"action": "restart_display_service"}'
+                    hx-swap="none"
+                    hx-on:htmx:after-request="if (typeof showNotification !== 'undefined' && event.detail.xhr && event.detail.xhr.responseJSON) { showNotification(event.detail.xhr.responseJSON.message || 'Display service restarted', event.detail.xhr.responseJSON.status || 'success'); }"
+                    class="inline-flex items-center px-4 py-2 border border-gray-300 text-base font-semibold rounded-md text-gray-900 bg-white hover:bg-gray-50">
+                <i class="fas fa-redo mr-2"></i>
+                Restart Display Service
+            </button>
+
+            <button hx-post="/api/v3/system/action"
+                    hx-vals='{"action": "restart_web_service"}'
+                    hx-swap="none"
+                    hx-on:htmx:after-request="if (typeof showNotification !== 'undefined' && event.detail.xhr && event.detail.xhr.responseJSON) { showNotification(event.detail.xhr.responseJSON.message || 'Web service restarted', event.detail.xhr.responseJSON.status || 'success'); }"
+                    class="inline-flex items-center px-4 py-2 border border-gray-300 text-base font-semibold rounded-md text-gray-900 bg-white hover:bg-gray-50">
+                <i class="fas fa-redo mr-2"></i>
+                Restart Web Service
+            </button>
+        </div>
+    </div>
+
+    <!-- Display Preview -->
+    <div>
+        <h3 class="text-md font-medium text-gray-900 mb-4">
+            <i class="fas fa-desktop"></i> Live Display Preview
+        </h3>
+        <div class="bg-gray-900 rounded-lg p-6 border border-gray-700" style="position: relative;">
+            <div id="previewStage" class="preview-stage" style="display:none; position:relative; display:inline-block;">
+                <div id="previewMeta" style="position:absolute; top:-28px; left:0; color:#ddd; font-size:12px; opacity:0.85;"></div>
+                <img id="displayImage" style="image-rendering: pixelated; display: block;" alt="LED Matrix Display">
+                <canvas id="ledCanvas" style="position:absolute; top:0; left:0; pointer-events:none; display:none; z-index: 10;"></canvas>
+                <canvas id="gridOverlay" style="position:absolute; top:0; left:0; pointer-events:none; z-index: 20;"></canvas>
+            </div>
+            <div id="displayPlaceholder" class="text-center text-gray-400 py-8">
+                <i class="fas fa-spinner fa-spin text-4xl mb-3"></i>
+                <p>Connecting to display...</p>
+            </div>
+        </div>
+        
+        <!-- Display Controls -->
+        <div class="mt-4 flex flex-wrap items-center gap-3">
+            <button onclick="takeScreenshot()" class="inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-900 bg-white hover:bg-gray-50">
+                <i class="fas fa-camera mr-2"></i> Screenshot
+            </button>
+            
+            <label class="inline-flex items-center gap-2 bg-gray-100 px-3 py-2 rounded-md text-sm">
+                <span>Scale:</span>
+                <input type="range" id="scaleRange" min="2" max="16" value="8" class="w-20">
+                <span id="scaleValue" class="font-medium">8x</span>
+            </label>
+            
+            <label class="inline-flex items-center gap-2 bg-gray-100 px-3 py-2 rounded-md text-sm cursor-pointer">
+                <input type="checkbox" id="toggleGrid" class="rounded">
+                <span>Show pixel grid</span>
+            </label>
+            
+            <label class="inline-flex items-center gap-2 bg-gray-100 px-3 py-2 rounded-md text-sm cursor-pointer">
+                <input type="checkbox" id="toggleLedDots" checked class="rounded">
+                <span>LED dot mode</span>
+            </label>
+            
+            <label class="inline-flex items-center gap-2 bg-gray-100 px-3 py-2 rounded-md text-sm">
+                <span>Dot fill:</span>
+                <input type="range" id="dotFillRange" min="40" max="95" value="75" class="w-16">
+                <span id="dotFillValue" class="font-medium">75%</span>
+            </label>
+        </div>
+    </div>
+</div>
+
+<!-- Stats are updated via the global updateSystemStats function in base.html -->
+
+<script>
+// Load LEDMatrix version
+(function() {
+    fetch('/api/v3/system/version')
+        .then(response => response.json())
+        .then(data => {
+            const versionEl = document.getElementById('ledmatrix-version');
+            if (versionEl && data.status === 'success') {
+                versionEl.textContent = data.data.version;
+            }
+        })
+        .catch(error => {
+            const versionEl = document.getElementById('ledmatrix-version');
+            if (versionEl) versionEl.textContent = 'Unknown';
+        });
+})();
+
+// Check for updates function
+window.checkForUpdates = function() {
+    const btn = event.target.closest('button');
+    if (btn) {
+        const originalContent = btn.innerHTML;
+        btn.disabled = true;
+        btn.innerHTML = '<i class="fas fa-spinner fa-spin mr-2"></i>Checking...';
+        
+        fetch('/api/v3/system/action', {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({ action: 'git_pull' })
+        })
+        .then(response => response.json())
+        .then(data => {
+            btn.innerHTML = originalContent;
+            btn.disabled = false;
+            
+            if (data.status === 'success') {
+                showNotification('Update successful: ' + (data.stdout || 'Code updated'), 'success');
+                // Reload version after a short delay
+                setTimeout(() => {
+                    fetch('/api/v3/system/version')
+                        .then(response => response.json())
+                        .then(data => {
+                            const versionEl = document.getElementById('ledmatrix-version');
+                            if (versionEl && data.status === 'success') {
+                                versionEl.textContent = data.data.version;
+                            }
+                        });
+                }, 1000);
+            } else {
+                showNotification('Update failed: ' + (data.stderr || data.message || 'Unknown error'), 'error');
+            }
+        })
+        .catch(error => {
+            btn.innerHTML = originalContent;
+            btn.disabled = false;
+            showNotification('Error checking for updates: ' + error.message, 'error');
+        });
+    }
+};
+
+// Setup display preview controls (runs when this partial loads)
+(function() {
+    const scaleRange = document.getElementById('scaleRange');
+    const scaleValue = document.getElementById('scaleValue');
+    const dotFillRange = document.getElementById('dotFillRange');
+    const dotFillValue = document.getElementById('dotFillValue');
+    const toggleGrid = document.getElementById('toggleGrid');
+    const toggleLedDots = document.getElementById('toggleLedDots');
+    
+    if (scaleRange && scaleValue) {
+        scaleRange.addEventListener('input', function() {
+            scaleValue.textContent = this.value + 'x';
+            // Re-render the preview with new scale
+            const img = document.getElementById('displayImage');
+            if (img && img.src) {
+                const data = {
+                    image: img.src.replace('data:image/png;base64,', ''),
+                    width: img.naturalWidth,
+                    height: img.naturalHeight
+                };
+                updateDisplayPreview(data);
+            }
+        });
+    }
+    
+    if (dotFillRange && dotFillValue) {
+        dotFillRange.addEventListener('input', function() {
+            dotFillValue.textContent = this.value + '%';
+            renderLedDots();
+        });
+    }
+    
+    if (toggleGrid) {
+        toggleGrid.addEventListener('change', function() {
+            const canvas = document.getElementById('gridOverlay');
+            const img = document.getElementById('displayImage');
+            if (canvas && img && img.src) {
+                const scale = parseInt(scaleRange?.value || '8');
+                drawGrid(canvas, img.naturalWidth, img.naturalHeight, scale);
+            }
+        });
+    }
+    
+    if (toggleLedDots) {
+        toggleLedDots.addEventListener('change', function() {
+            renderLedDots();
+        });
+    }
+})();
+</script>
+

web_interface/templates/v3/partials/plugin_config.html

@@ -0,0 +1,328 @@
+{# Plugin Configuration Partial - Server-side rendered form #}
+{# This template is loaded via HTMX when a plugin tab is clicked #}
+
+{# ===== MACROS FOR FORM FIELD GENERATION ===== #}
+
+{# Render a single form field based on schema type #}
+{% macro render_field(key, prop, value, prefix='', plugin_id='') %}
+    {% set full_key = (prefix ~ '.' ~ key) if prefix else key %}
+    {% set field_id = (plugin_id ~ '-' ~ full_key)|replace('.', '-')|replace('_', '-') %}
+    {% set label = prop.title if prop.title else key|replace('_', ' ')|title %}
+    {% set description = prop.description if prop.description else '' %}
+    {% set field_type = prop.type if prop.type is string else (prop.type[0] if prop.type is iterable else 'string') %}
+    
+    {# Handle nested objects recursively #}
+    {% if field_type == 'object' and prop.properties %}
+        {{ render_nested_section(key, prop, value, prefix, plugin_id) }}
+    {% else %}
+        <div class="form-group mb-4">
+            <label for="{{ field_id }}" class="block text-sm font-medium text-gray-700 mb-1">
+                {{ label }}
+            </label>
+            
+            {% if description %}
+            <p class="text-sm text-gray-500 mb-2">{{ description }}</p>
+            {% endif %}
+            
+            {# Boolean checkbox #}
+            {% if field_type == 'boolean' %}
+            <label class="flex items-center cursor-pointer">
+                <input type="checkbox" 
+                       id="{{ field_id }}"
+                       name="{{ full_key }}" 
+                       {% if value %}checked{% endif %}
+                       class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded">
+                <span class="ml-2 text-sm text-gray-600">Enabled</span>
+            </label>
+            
+            {# Enum dropdown #}
+            {% elif prop.enum %}
+            <select id="{{ field_id }}"
+                    name="{{ full_key }}" 
+                    class="form-select w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 bg-white text-black">
+                {% for option in prop.enum %}
+                <option value="{{ option }}" {% if value == option %}selected{% endif %}>
+                    {{ option|replace('_', ' ')|title }}
+                </option>
+                {% endfor %}
+            </select>
+            
+            {# Number input #}
+            {% elif field_type in ['number', 'integer'] %}
+            <input type="number" 
+                   id="{{ field_id }}"
+                   name="{{ full_key }}" 
+                   value="{{ value if value is not none else (prop.default if prop.default is defined else '') }}"
+                   {% if prop.minimum is defined %}min="{{ prop.minimum }}"{% endif %}
+                   {% if prop.maximum is defined %}max="{{ prop.maximum }}"{% endif %}
+                   {% if field_type == 'integer' %}step="1"{% else %}step="any"{% endif %}
+                   class="form-input w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 bg-white text-black placeholder:text-gray-500">
+            
+            {# Array of strings (comma-separated) #}
+            {% elif field_type == 'array' %}
+            {% set array_value = value if value is not none else (prop.default if prop.default is defined else []) %}
+            <input type="text" 
+                   id="{{ field_id }}"
+                   name="{{ full_key }}" 
+                   value="{{ array_value|join(', ') if array_value is iterable and array_value is not string else '' }}"
+                   placeholder="Enter values separated by commas"
+                   class="form-input w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 bg-white text-black placeholder:text-gray-500">
+            <p class="text-xs text-gray-400 mt-1">Separate multiple values with commas</p>
+            
+            {# Text input (default) #}
+            {% else %}
+            <input type="text" 
+                   id="{{ field_id }}"
+                   name="{{ full_key }}" 
+                   value="{{ value if value is not none else (prop.default if prop.default is defined else '') }}"
+                   class="form-input w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 bg-white text-black placeholder:text-gray-500">
+            {% endif %}
+        </div>
+    {% endif %}
+{% endmacro %}
+
+{# Render a nested/collapsible section for object types #}
+{% macro render_nested_section(key, prop, value, prefix='', plugin_id='') %}
+    {% set full_key = (prefix ~ '.' ~ key) if prefix else key %}
+    {% set section_id = (plugin_id ~ '-section-' ~ full_key)|replace('.', '-')|replace('_', '-') %}
+    {% set label = prop.title if prop.title else key|replace('_', ' ')|title %}
+    {% set description = prop.description if prop.description else '' %}
+    {% set nested_value = value if value else {} %}
+    
+    <div class="nested-section border border-gray-300 rounded-lg mb-4">
+        <button type="button" 
+                class="w-full bg-gray-100 hover:bg-gray-200 px-4 py-3 flex items-center justify-between text-left transition-colors rounded-t-lg"
+                onclick="toggleSection('{{ section_id }}')">
+            <div class="flex-1">
+                <h4 class="font-semibold text-gray-900">{{ label }}</h4>
+                {% if description %}
+                <p class="text-sm text-gray-600 mt-1">{{ description }}</p>
+                {% endif %}
+            </div>
+            <i id="{{ section_id }}-icon" class="fas fa-chevron-right text-gray-500 transition-transform"></i>
+        </button>
+        <div id="{{ section_id }}" class="nested-content bg-gray-50 px-4 py-4 space-y-3 hidden" style="display: none;">
+            {% set property_order = prop['x-propertyOrder'] if 'x-propertyOrder' in prop else prop.properties.keys()|list %}
+            {% for nested_key in property_order %}
+                {% if nested_key in prop.properties %}
+                    {% set nested_prop = prop.properties[nested_key] %}
+                    {% set nested_val = nested_value[nested_key] if nested_key in nested_value else none %}
+                    {{ render_field(nested_key, nested_prop, nested_val, full_key, plugin_id) }}
+                {% endif %}
+            {% endfor %}
+        </div>
+    </div>
+{% endmacro %}
+
+{# ===== MAIN TEMPLATE ===== #}
+
+<div class="plugin-config-container" 
+     data-plugin-id="{{ plugin.id }}"
+     x-data="{ saving: false, saveError: null, saveSuccess: false }">
+    
+    <div class="border-b border-gray-200 pb-4 mb-6">
+        <div class="flex items-center justify-between">
+            <div>
+                <h2 class="text-lg font-semibold text-gray-900">{{ plugin.name or plugin.id }}</h2>
+                <p class="mt-1 text-sm text-gray-600">{{ plugin.description or 'Plugin configuration' }}</p>
+            </div>
+            <div class="flex items-center space-x-4">
+                <label class="flex items-center cursor-pointer">
+                    <input type="checkbox"
+                           id="plugin-enabled-{{ plugin.id }}"
+                           name="enabled"
+                           value="true"
+                           {% if plugin.enabled %}checked{% endif %}
+                           hx-post="/api/v3/plugins/toggle?plugin_id={{ plugin.id }}"
+                           hx-trigger="change"
+                           hx-swap="none"
+                           hx-vals='js:{enabled: document.getElementById("plugin-enabled-{{ plugin.id }}").checked ? "true" : "false"}'
+                           hx-on::after-request="handleToggleResponse(event, '{{ plugin.id }}')"
+                           class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded">
+                    <span class="ml-2 text-sm {% if plugin.enabled %}text-green-600{% else %}text-gray-500{% endif %}">
+                        {% if plugin.enabled %}Enabled{% else %}Disabled{% endif %}
+                    </span>
+                </label>
+            </div>
+        </div>
+    </div>
+
+    <form id="plugin-config-form-{{ plugin.id }}"
+          hx-post="/api/v3/plugins/config?plugin_id={{ plugin.id }}"
+          hx-trigger="submit"
+          hx-swap="none"
+          hx-indicator="#save-indicator-{{ plugin.id }}"
+          hx-on::before-request="this.querySelector('[type=submit]').disabled = true"
+          hx-on::after-request="handleConfigSave(event, '{{ plugin.id }}')"
+          onsubmit="return validatePluginConfigForm(this, '{{ plugin.id }}');">
+        
+        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
+            {# Plugin Information Panel #}
+            <div class="bg-gray-50 rounded-lg p-4">
+                <h3 class="text-md font-medium text-gray-900 mb-3">Plugin Information</h3>
+                <dl class="space-y-2">
+                    <div>
+                        <dt class="text-sm font-medium text-gray-500">Name</dt>
+                        <dd class="text-sm text-gray-900">{{ plugin.name or plugin.id }}</dd>
+                    </div>
+                    <div>
+                        <dt class="text-sm font-medium text-gray-500">Author</dt>
+                        <dd class="text-sm text-gray-900">{{ plugin.author or 'Unknown' }}</dd>
+                    </div>
+                    {% if plugin.version %}
+                    <div>
+                        <dt class="text-sm font-medium text-gray-500">Version</dt>
+                        <dd class="text-sm text-gray-900">{{ plugin.version }}</dd>
+                    </div>
+                    {% endif %}
+                    {% if plugin.last_commit %}
+                    <div>
+                        <dt class="text-sm font-medium text-gray-500">Commit</dt>
+                        <dd class="text-sm text-gray-900 font-mono">
+                            {{ plugin.last_commit[:7] if plugin.last_commit|length > 7 else plugin.last_commit }}
+                            {% if plugin.branch %}
+                            <span class="text-gray-500">({{ plugin.branch }})</span>
+                            {% endif %}
+                        </dd>
+                    </div>
+                    {% endif %}
+                    {% if plugin.category %}
+                    <div>
+                        <dt class="text-sm font-medium text-gray-500">Category</dt>
+                        <dd class="text-sm text-gray-900">{{ plugin.category }}</dd>
+                    </div>
+                    {% endif %}
+                    {% if plugin.tags %}
+                    <div>
+                        <dt class="text-sm font-medium text-gray-500">Tags</dt>
+                        <dd class="flex flex-wrap gap-1 mt-1">
+                            {% for tag in plugin.tags %}
+                            <span class="bg-blue-100 text-blue-800 text-xs px-2 py-1 rounded">{{ tag }}</span>
+                            {% endfor %}
+                        </dd>
+                    </div>
+                    {% endif %}
+                </dl>
+                
+                {# On-Demand Controls #}
+                <div class="mt-4 pt-4 border-t border-gray-200 space-y-3">
+                    <div class="flex items-center gap-2">
+                        <i class="fas fa-bolt text-blue-500"></i>
+                        <span class="text-sm font-semibold text-gray-900">On-Demand Controls</span>
+                    </div>
+                    <div class="flex flex-wrap gap-2">
+                        <button type="button"
+                                onclick="runPluginOnDemand('{{ plugin.id }}')"
+                                {% if not plugin.enabled %}disabled{% endif %}
+                                class="px-3 py-2 text-sm bg-green-600 hover:bg-green-700 disabled:opacity-50 disabled:cursor-not-allowed text-white rounded-md flex items-center gap-2 transition-colors">
+                            <i class="fas fa-play-circle"></i>
+                            <span>Run On-Demand</span>
+                        </button>
+                        <button type="button"
+                                onclick="stopOnDemand()"
+                                class="px-3 py-2 text-sm bg-red-600 hover:bg-red-700 text-white rounded-md flex items-center gap-2 transition-colors">
+                            <i class="fas fa-stop"></i>
+                            <span>Stop On-Demand</span>
+                        </button>
+                    </div>
+                    {% if not plugin.enabled %}
+                    <p class="text-xs text-amber-600">Enable this plugin before launching on-demand.</p>
+                    {% endif %}
+                </div>
+            </div>
+            
+            {# Configuration Form Panel #}
+            <div class="bg-gray-50 rounded-lg p-4">
+                <h3 class="text-md font-medium text-gray-900 mb-3">Configuration</h3>
+                <div class="space-y-4 max-h-96 overflow-y-auto pr-2">
+                    {% if schema and schema.properties %}
+                        {# Use property order if defined, otherwise use natural order #}
+                        {# Skip 'enabled' field - it's handled by the header toggle #}
+                        {% set property_order = schema['x-propertyOrder'] if 'x-propertyOrder' in schema else schema.properties.keys()|list %}
+                        {% for key in property_order %}
+                            {% if key in schema.properties and key != 'enabled' %}
+                                {% set prop = schema.properties[key] %}
+                                {% set value = config[key] if key in config else none %}
+                                {{ render_field(key, prop, value, '', plugin.id) }}
+                            {% endif %}
+                        {% endfor %}
+                    {% else %}
+                        {# No schema - render simple form from config #}
+                        {% if config %}
+                            {% for key, value in config.items() %}
+                                {% if key not in ['enabled'] %}
+                                <div class="form-group mb-4">
+                                    <label class="block text-sm font-medium text-gray-700 mb-1">
+                                        {{ key|replace('_', ' ')|title }}
+                                    </label>
+                                    {% if value is sameas true or value is sameas false %}
+                                    <label class="flex items-center cursor-pointer">
+                                        <input type="checkbox" name="{{ key }}" {% if value %}checked{% endif %}
+                                               class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded">
+                                        <span class="ml-2 text-sm text-gray-600">Enabled</span>
+                                    </label>
+                                    {% elif value is number %}
+                                    <input type="number" name="{{ key }}" value="{{ value }}"
+                                           class="form-input w-full rounded-md border-gray-300 bg-gray-900 text-white placeholder:text-gray-400">
+                                    {% else %}
+                                    <input type="text" name="{{ key }}" value="{{ value }}"
+                                           class="form-input w-full rounded-md border-gray-300 bg-gray-900 text-white placeholder:text-gray-400">
+                                    {% endif %}
+                                </div>
+                                {% endif %}
+                            {% endfor %}
+                        {% else %}
+                            <p class="text-gray-500 text-sm">No configuration options available for this plugin.</p>
+                        {% endif %}
+                    {% endif %}
+                </div>
+            </div>
+        </div>
+        
+        {# Web UI Actions (if any) #}
+        {% if web_ui_actions %}
+        <div class="mt-6 pt-4 border-t border-gray-200">
+            <h3 class="text-md font-medium text-gray-900 mb-3">Plugin Actions</h3>
+            <div class="flex flex-wrap gap-2">
+                {% for action in web_ui_actions %}
+                <button type="button"
+                        onclick="executePluginAction('{{ plugin.id }}', '{{ action.id }}')"
+                        class="px-4 py-2 text-sm bg-indigo-600 hover:bg-indigo-700 text-white rounded-md flex items-center gap-2 transition-colors">
+                    {% if action.icon %}<i class="{{ action.icon }}"></i>{% endif %}
+                    {{ action.label or action.id }}
+                </button>
+                {% endfor %}
+            </div>
+        </div>
+        {% endif %}
+        
+        {# Action Buttons #}
+        <div class="flex justify-end space-x-3 mt-6 pt-6 border-t border-gray-200">
+            <button type="button"
+                    onclick="refreshPluginConfig('{{ plugin.id }}')"
+                    class="btn bg-gray-600 hover:bg-gray-700 text-white px-4 py-2 rounded-md">
+                <i class="fas fa-sync-alt mr-2"></i>Refresh
+            </button>
+            <button type="button"
+                    hx-post="/api/v3/plugins/update?plugin_id={{ plugin.id }}"
+                    hx-swap="none"
+                    hx-on::after-request="handlePluginUpdate(event, '{{ plugin.id }}')"
+                    class="btn bg-yellow-600 hover:bg-yellow-700 text-white px-4 py-2 rounded-md">
+                <i class="fas fa-download mr-2"></i>Update
+            </button>
+            <button type="button"
+                    onclick="if(confirm('Are you sure you want to uninstall {{ plugin.name or plugin.id }}?')) uninstallPlugin('{{ plugin.id }}')"
+                    class="btn bg-red-600 hover:bg-red-700 text-white px-4 py-2 rounded-md">
+                <i class="fas fa-trash mr-2"></i>Uninstall
+            </button>
+            <button type="submit" class="btn bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-md flex items-center">
+                <span id="save-indicator-{{ plugin.id }}" class="htmx-indicator mr-2">
+                    <i class="fas fa-spinner fa-spin"></i>
+                </span>
+                <i class="fas fa-save mr-2 save-icon"></i>
+                <span>Save Configuration</span>
+            </button>
+        </div>
+    </form>
+</div>
+

web_interface/templates/v3/partials/plugins.html

@@ -0,0 +1,558 @@
+<div class="bg-white rounded-lg shadow-md p-6" data-plugins-loaded="true">
+    <div class="section-header">
+        <h2 class="text-xl font-bold text-gray-900 mb-1">Plugin Management</h2>
+        <p class="text-sm text-gray-600">Manage installed plugins, configure settings, and browse the plugin store.</p>
+    </div>
+
+    <!-- Plugin Controls -->
+    <div class="flex flex-wrap items-center justify-between gap-4 mb-6">
+        <div class="flex items-center space-x-4">
+            <button id="refresh-plugins-btn" class="btn bg-gray-600 hover:bg-gray-700 text-white px-4 py-2 rounded-md">
+                <i class="fas fa-sync-alt mr-2"></i>Refresh Plugins
+            </button>
+            <button id="update-all-plugins-btn" class="btn bg-green-600 hover:bg-green-700 text-white px-4 py-2 rounded-md flex items-center">
+                <i class="fas fa-cloud-download-alt mr-2"></i>Check &amp; Update All
+            </button>
+            <button id="restart-display-btn" class="btn bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-md">
+                <i class="fas fa-redo mr-2"></i>Restart Display
+            </button>
+        </div>
+    </div>
+
+    <!-- Plugin Content Area -->
+    <div class="space-y-8">
+        <!-- Installed Plugins Section (Always visible at top) -->
+        <div id="installed-plugins-section" class="mb-8">
+            <div class="flex items-center justify-between mb-5 pb-3 border-b border-gray-200">
+                <div class="flex items-center gap-3">
+                    <h3 class="text-lg font-bold text-gray-900">Installed Plugins</h3>
+                    <span id="installed-count" class="text-sm text-gray-500 font-medium">0 installed</span>
+                </div>
+                <button id="toggle-installed-plugins" class="text-sm text-gray-600 hover:text-gray-900 hover:text-blue-600 transition-colors flex items-center font-medium">
+                    <i class="fas fa-chevron-down mr-1" id="installed-plugins-icon"></i>
+                    <span>Collapse</span>
+                </button>
+            </div>
+            <div id="installed-plugins-content" class="block">
+                <div id="installed-plugins-grid" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-5 gap-6">
+                    <!-- Plugins will be loaded here -->
+                </div>
+            </div>
+        </div>
+
+        <!-- Plugin Store Section (Always visible at bottom) -->
+        <div id="plugin-store-section" class="border-t border-gray-200 pt-8 mt-8">
+            <div class="flex items-center justify-between mb-5 pb-3 border-b border-gray-200">
+                <div class="flex items-center gap-3">
+                    <h3 class="text-lg font-bold text-gray-900">Plugin Store</h3>
+                    <span id="store-count" class="text-sm text-gray-500 font-medium">
+                        <i class="fas fa-spinner fa-spin mr-1"></i>Loading...
+                    </span>
+                </div>
+                <button id="toggle-plugin-store" class="text-sm text-gray-600 hover:text-gray-900 hover:text-blue-600 transition-colors flex items-center font-medium">
+                    <i class="fas fa-chevron-down mr-1" id="plugin-store-icon"></i>
+                    <span>Collapse</span>
+                </button>
+            </div>
+            
+            <div id="plugin-store-content" class="block">
+            
+            <!-- GitHub Token Configuration (Combined Warning + Settings) -->
+            <div id="github-token-container" class="mb-5">
+                <!-- Warning Banner (shown when no token configured) -->
+                <div id="github-auth-warning" class="hidden bg-yellow-50 border-l-4 border-yellow-400 p-4 rounded-r-lg">
+                    <div class="flex">
+                        <div class="flex-shrink-0">
+                            <i class="fas fa-exclamation-triangle text-yellow-400"></i>
+                        </div>
+                        <div class="ml-3 flex-1">
+                            <p class="text-sm text-yellow-700">
+                                <strong>Limited API Access:</strong> GitHub API requests are limited to <span id="rate-limit-count">60</span> per hour without authentication.
+                                Add a GitHub token to increase this to 5,000 requests/hour and get real-time plugin stats.
+                            </p>
+                            <p class="mt-2 text-sm text-yellow-700">
+                                <a href="https://github.com/settings/tokens/new?description=LEDMatrix%20Plugin%20Manager&scopes=" target="_blank" class="font-medium underline hover:text-yellow-800">
+                                    Create a GitHub Token →
+                                </a>
+                                <span class="mx-2">|</span>
+                                <a href="#" onclick="event.preventDefault(); toggleGithubTokenSettings()" class="font-medium underline hover:text-yellow-800">
+                                    Configure Token
+                                </a>
+                            </p>
+                        </div>
+                        <div class="flex-shrink-0">
+                            <button onclick="dismissGithubWarning()" class="text-yellow-700 hover:text-yellow-900">
+                                <i class="fas fa-times"></i>
+                            </button>
+                        </div>
+                    </div>
+                </div>
+
+                <!-- Settings Panel (expandable configuration form) -->
+                <div id="github-token-settings" class="hidden bg-blue-50 border border-blue-200 rounded-lg p-5 shadow-sm mt-3">
+                <div class="flex items-start justify-between mb-4">
+                    <div class="flex items-center space-x-2">
+                        <i class="fab fa-github text-blue-600 text-xl"></i>
+                        <h4 class="font-bold text-gray-900">GitHub API Configuration</h4>
+                    </div>
+                    <div class="flex items-center gap-2">
+                        <button id="toggle-github-token-collapse" class="text-gray-600 hover:text-gray-900 text-sm flex items-center font-medium transition-colors">
+                            <i class="fas fa-chevron-up mr-1" id="github-token-icon-collapse"></i>
+                            <span>Collapse</span>
+                        </button>
+                        <button onclick="toggleGithubTokenSettings()" class="text-gray-500 hover:text-gray-700 transition-colors">
+                            <i class="fas fa-times"></i>
+                        </button>
+                    </div>
+                </div>
+                
+                <div id="github-token-content" class="block">
+                
+                <p class="text-sm text-gray-600 mb-3">
+                    Configure your GitHub Personal Access Token to increase API rate limits and get real-time plugin statistics.
+                </p>
+
+                <div class="space-y-3">
+                    <div>
+                        <label for="github-token-input" class="block text-sm font-medium text-gray-700 mb-1">
+                            GitHub Personal Access Token
+                        </label>
+                        <div class="relative">
+                            <input type="password" id="github-token-input" 
+                                   class="w-full px-3 py-2 pr-20 border border-gray-300 rounded-md focus:ring-blue-500 focus:border-blue-500"
+                                   placeholder="ghp_xxxxxxxxxxxxxxxxxxxx">
+                            <button type="button" onclick="toggleGithubTokenVisibility()" 
+                                    class="absolute inset-y-0 right-0 pr-3 flex items-center text-gray-500 hover:text-gray-700">
+                                <i id="github-token-icon" class="fas fa-eye"></i>
+                            </button>
+                        </div>
+                        <p class="text-xs text-gray-500 mt-1">
+                            Token is stored in config_secrets.json. No scopes required for public repositories.
+                        </p>
+                    </div>
+
+                    <div class="flex items-center justify-between">
+                        <a href="https://github.com/settings/tokens/new?description=LEDMatrix%20Plugin%20Manager&scopes=" 
+                           target="_blank" 
+                           class="text-sm text-blue-600 hover:text-blue-800">
+                            <i class="fas fa-external-link-alt mr-1"></i>Create Token on GitHub
+                        </a>
+                        <div class="flex gap-2">
+                            <button onclick="loadGithubToken()" class="px-3 py-1.5 text-sm bg-gray-600 hover:bg-gray-700 text-white rounded-md">
+                                <i class="fas fa-sync mr-1"></i>Load Current
+                            </button>
+                            <button onclick="saveGithubToken()" class="px-4 py-1.5 text-sm bg-blue-600 hover:bg-blue-700 text-white rounded-md">
+                                <i class="fas fa-save mr-1"></i>Save Token
+                            </button>
+                        </div>
+                    </div>
+
+                    <div class="bg-white border border-blue-200 rounded p-3">
+                        <p class="text-xs text-gray-600">
+                            <strong>Rate Limits:</strong><br>
+                            Without token: 60 requests/hour<br>
+                            With token: 5,000 requests/hour
+                        </p>
+                    </div>
+                </div>
+                </div>
+                </div>
+            </div>
+            <div class="mb-6">
+                <div class="flex gap-3">
+                    <input type="text" id="plugin-search" placeholder="Search plugins by name, description, or tags..." class="form-control text-sm flex-[3] min-w-0 px-4 py-2.5 border border-gray-300 rounded-lg shadow-sm focus:shadow-md transition-shadow">
+                    <select id="plugin-category" class="form-control text-sm flex-1 px-3 py-2.5 border border-gray-300 rounded-lg shadow-sm focus:shadow-md transition-shadow">
+                        <option value="">All Categories</option>
+                        <option value="sports">Sports</option>
+                        <option value="content">Content</option>
+                        <option value="time">Time</option>
+                        <option value="weather">Weather</option>
+                        <option value="financial">Financial</option>
+                        <option value="media">Media</option>
+                        <option value="demo">Demo</option>
+                    </select>
+                    <button id="search-plugins-btn" class="btn bg-blue-600 hover:bg-blue-700 text-white px-5 py-2.5 rounded-lg whitespace-nowrap font-semibold shadow-sm">
+                        <i class="fas fa-search mr-2"></i>Search
+                    </button>
+                </div>
+            </div>
+            <div id="plugin-store-grid" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-5 gap-6">
+                <!-- Loading skeleton -->
+                <div class="store-loading col-span-full">
+                    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-5 gap-4">
+                        <div class="bg-gray-200 rounded-lg p-4 h-48 animate-pulse"></div>
+                        <div class="bg-gray-200 rounded-lg p-4 h-48 animate-pulse"></div>
+                        <div class="bg-gray-200 rounded-lg p-4 h-48 animate-pulse"></div>
+                        <div class="bg-gray-200 rounded-lg p-4 h-48 animate-pulse"></div>
+                        <div class="bg-gray-200 rounded-lg p-4 h-48 animate-pulse"></div>
+                </div>
+            </div>
+            </div>
+        </div>
+        
+        <!-- Install from GitHub URL Section (Separate section, always visible) -->
+        <div class="border-t border-gray-200 pt-8 mt-8">
+            <div class="flex items-center justify-between mb-5 pb-3 border-b border-gray-200">
+                <div>
+                    <h3 class="text-lg font-bold text-gray-900">Install from GitHub</h3>
+                    <p class="text-sm text-gray-600 mt-1">Install plugins directly from GitHub repositories</p>
+                </div>
+                <button id="toggle-github-install" class="text-sm text-blue-600 hover:text-blue-800 flex items-center font-medium transition-colors">
+                    <i class="fas fa-chevron-down mr-1" id="github-install-icon"></i>
+                    <span>Show</span>
+                </button>
+            </div>
+            
+            <div id="github-install-section" class="hidden space-y-4">
+                <!-- Saved Repositories Section -->
+                <div class="bg-blue-50 rounded-lg p-5 border border-blue-200 shadow-sm">
+                    <div class="flex items-center justify-between mb-4">
+                        <h4 class="text-base font-bold text-gray-900">
+                            <i class="fas fa-bookmark mr-2 text-blue-600"></i>Saved Repositories
+                        </h4>
+                        <span id="saved-repos-count" class="text-xs text-gray-600 font-medium">0 saved</span>
+                    </div>
+                    <p class="text-xs text-gray-600 mb-3">Saved repositories are automatically loaded and their plugins appear in the Plugin Store above.</p>
+                    <div id="saved-repositories-list" class="space-y-2 mb-3">
+                        <!-- Saved repositories will be loaded here -->
+                    </div>
+                    <button id="refresh-saved-repos" class="text-xs text-blue-600 hover:text-blue-800">
+                        <i class="fas fa-sync mr-1"></i>Refresh
+                    </button>
+                </div>
+                
+                <!-- Direct Plugin Installation -->
+                <div class="bg-gray-50 rounded-lg p-5 border border-gray-200 shadow-sm">
+                    <h4 class="text-base font-bold text-gray-900 mb-3">
+                        <i class="fas fa-code-branch mr-2 text-blue-600"></i>Install Single Plugin
+                    </h4>
+                    <p class="text-xs text-gray-600 mb-3">Install a plugin directly from its GitHub repository URL</p>
+                    <div class="space-y-2">
+                        <div class="flex gap-2">
+                            <input type="text" id="github-plugin-url" 
+                                   placeholder="https://github.com/user/ledmatrix-plugin-name" 
+                                   class="flex-1 px-3 py-2 text-sm border border-gray-300 rounded-md focus:ring-blue-500 focus:border-blue-500">
+                            <button id="install-plugin-from-url" class="px-4 py-2 bg-blue-600 hover:bg-blue-700 text-white text-sm rounded-md whitespace-nowrap">
+                                <i class="fas fa-download mr-2"></i>Install
+                            </button>
+                        </div>
+                        <div class="flex items-center gap-2">
+                            <label for="plugin-branch-input" class="text-xs text-gray-600 whitespace-nowrap">
+                                <i class="fas fa-code-branch mr-1"></i>Branch (optional):
+                            </label>
+                            <input type="text" id="plugin-branch-input" 
+                                   placeholder="main, test, etc. (default: main)" 
+                                   class="flex-1 px-3 py-2 text-sm border border-gray-300 rounded-md focus:ring-blue-500 focus:border-blue-500">
+                        </div>
+                    </div>
+                    <div id="github-plugin-status" class="mt-2 text-sm"></div>
+                </div>
+                
+                <!-- Registry-Style Monorepo Installation -->
+                <div class="bg-gray-50 rounded-lg p-5 border border-gray-200 shadow-sm">
+                    <h4 class="text-base font-bold text-gray-900 mb-3">
+                        <i class="fas fa-folder-open mr-2 text-green-600"></i>Browse Plugin Registry
+                    </h4>
+                    <p class="text-xs text-gray-600 mb-3">Load a registry-style monorepo (like the official ledmatrix-plugins repo) to browse and install plugins</p>
+                    <div class="flex gap-2 mb-2">
+                        <input type="text" id="github-registry-url" 
+                               placeholder="https://github.com/user/ledmatrix-plugins" 
+                               class="flex-1 px-3 py-2 text-sm border border-gray-300 rounded-md focus:ring-blue-500 focus:border-blue-500">
+                        <button id="load-registry-from-url" class="px-4 py-2 bg-green-600 hover:bg-green-700 text-white text-sm rounded-md whitespace-nowrap">
+                            <i class="fas fa-search mr-2"></i>Load Registry
+                        </button>
+                    </div>
+                    <div class="flex gap-2 mb-3">
+                        <button id="save-registry-url" class="px-3 py-2 bg-blue-600 hover:bg-blue-700 text-white text-sm rounded-md whitespace-nowrap">
+                            <i class="fas fa-bookmark mr-2"></i>Save Repository
+                        </button>
+                        <div id="registry-status" class="flex-1 text-sm"></div>
+                    </div>
+                    <div id="custom-registry-plugins" class="hidden">
+                        <div class="border-t border-gray-300 pt-3 mt-3">
+                            <p class="text-xs font-medium text-gray-700 mb-2">Available Plugins:</p>
+                            <div id="custom-registry-grid" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-3">
+                                <!-- Custom registry plugins will be loaded here -->
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+    </div>
+
+    <!-- Plugin Configuration Modal -->
+    <div id="plugin-config-modal" class="fixed inset-0 modal-backdrop flex items-center justify-center z-50" style="display: none;">
+        <div class="modal-content p-6 w-full max-w-4xl max-h-[90vh] overflow-y-auto">
+            <div class="flex justify-between items-center mb-4">
+                <h3 id="plugin-config-title" class="text-lg font-semibold">Plugin Configuration</h3>
+                <div class="flex items-center space-x-2">
+                    <!-- View Toggle -->
+                    <div class="flex items-center bg-gray-100 rounded-lg p-1">
+                        <button id="view-toggle-form" class="view-toggle-btn active px-3 py-1 rounded text-sm font-medium transition-colors" data-view="form">
+                            <i class="fas fa-list mr-1"></i>Form
+                        </button>
+                        <button id="view-toggle-json" class="view-toggle-btn px-3 py-1 rounded text-sm font-medium transition-colors" data-view="json">
+                            <i class="fas fa-code mr-1"></i>JSON
+                        </button>
+                    </div>
+                    <!-- Reset Button -->
+                    <button id="reset-to-defaults-btn" class="px-3 py-1 text-sm bg-yellow-500 hover:bg-yellow-600 text-white rounded transition-colors" title="Reset to defaults">
+                        <i class="fas fa-undo mr-1"></i>Reset
+                    </button>
+                    <button id="close-plugin-config" class="text-gray-400 hover:text-gray-600">
+                        <i class="fas fa-times"></i>
+                    </button>
+                </div>
+            </div>
+            <!-- Validation Errors Display -->
+            <div id="plugin-config-validation-errors" class="hidden mb-4 p-3 bg-red-50 border border-red-200 rounded-md">
+                <div class="flex items-start">
+                    <i class="fas fa-exclamation-circle text-red-600 mt-0.5 mr-2"></i>
+                    <div class="flex-1">
+                        <p class="text-sm font-medium text-red-800 mb-2">Configuration Validation Errors</p>
+                        <ul id="validation-errors-list" class="text-sm text-red-700 list-disc list-inside space-y-1"></ul>
+                    </div>
+                </div>
+            </div>
+            <!-- Form View -->
+            <div id="plugin-config-form-view" class="plugin-config-view">
+                <div id="plugin-config-content">
+                    <!-- Plugin config form will be loaded here -->
+                </div>
+            </div>
+            <!-- JSON Editor View -->
+            <div id="plugin-config-json-view" class="plugin-config-view hidden">
+                <div class="mb-2">
+                    <label class="block text-sm font-medium text-gray-700 mb-1">Configuration JSON</label>
+                    <textarea id="plugin-config-json-editor" class="w-full border border-gray-300 rounded-md font-mono text-sm" rows="20"></textarea>
+                </div>
+                <div class="flex justify-end space-x-2 pt-2 border-t border-gray-200">
+                    <button type="button" onclick="closePluginConfigModal()" class="btn bg-gray-600 hover:bg-gray-700 text-white px-4 py-2 rounded-md">
+                        Cancel
+                    </button>
+                    <button type="button" id="save-json-config-btn" class="btn bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-md">
+                        <i class="fas fa-save mr-2"></i>Save Configuration
+                    </button>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+
+<!-- On-Demand Modal -->
+<div id="on-demand-modal" class="fixed inset-0 modal-backdrop flex items-center justify-center z-50" style="display: none;">
+    <div class="modal-content p-6 w-full max-w-md bg-white rounded-lg shadow-lg">
+        <div class="flex justify-between items-center mb-4">
+            <h3 id="on-demand-modal-title" class="text-lg font-semibold">Run Plugin On-Demand</h3>
+            <button id="close-on-demand-modal" class="text-gray-400 hover:text-gray-600">
+                <i class="fas fa-times"></i>
+            </button>
+        </div>
+        <!-- Service Status Alert -->
+        <div id="on-demand-service-warning" class="hidden mb-4 p-3 bg-yellow-50 border border-yellow-200 rounded-md">
+            <div class="flex items-start">
+                <i class="fas fa-exclamation-triangle text-yellow-600 mt-0.5 mr-2"></i>
+                <div class="flex-1">
+                    <p class="text-sm font-medium text-yellow-800">Display service is not running</p>
+                    <p class="text-xs text-yellow-700 mt-1">
+                        The on-demand request will be queued but won't display until the service starts.
+                        Enable "Start display service" below to automatically start it.
+                    </p>
+                </div>
+            </div>
+        </div>
+        
+        <form id="on-demand-form" class="space-y-4">
+            <div>
+                <label for="on-demand-mode" class="block text-sm font-medium text-gray-700 mb-1">Display Mode</label>
+                <select id="on-demand-mode" name="mode"
+                        class="w-full px-3 py-2 border border-gray-300 rounded-md focus:ring-blue-500 focus:border-blue-500">
+                </select>
+                <p id="on-demand-mode-hint" class="text-xs text-gray-500 mt-1"></p>
+            </div>
+            <div>
+                <label for="on-demand-duration" class="block text-sm font-medium text-gray-700 mb-1">
+                    Duration (seconds, optional)
+                </label>
+                <input type="number" min="0" id="on-demand-duration" name="duration"
+                       class="w-full px-3 py-2 border border-gray-300 rounded-md focus:ring-blue-500 focus:border-blue-500"
+                       placeholder="Leave blank to use plugin default">
+                <p class="text-xs text-gray-500 mt-1">
+                    Use 0 or leave empty to keep the plugin running until stopped manually.
+                </p>
+            </div>
+            <div class="flex items-center">
+                <input id="on-demand-pinned" name="pinned" type="checkbox"
+                       class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded">
+                <label for="on-demand-pinned" class="ml-2 block text-sm text-gray-700">
+                    Pin plugin to prevent rotation until stopped
+                </label>
+            </div>
+            <div class="flex items-center">
+                <input id="on-demand-start-service" name="start_service" type="checkbox" checked
+                       class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded">
+                <label for="on-demand-start-service" class="ml-2 block text-sm text-gray-700">
+                    Start display service if it is not running
+                </label>
+            </div>
+            <div class="flex justify-end gap-3 pt-3">
+                <button type="button" id="cancel-on-demand"
+                        class="px-4 py-2 text-sm bg-gray-200 hover:bg-gray-300 text-gray-700 rounded-md">
+                    Cancel
+                </button>
+                <button type="submit"
+                        class="px-4 py-2 text-sm bg-green-600 hover:bg-green-700 text-white rounded-md font-semibold">
+                    Start On-Demand
+                </button>
+            </div>
+        </form>
+    </div>
+</div>
+
+<style>
+/* View toggle button styles */
+.view-toggle-btn {
+    transition: all 0.2s ease;
+}
+
+.view-toggle-btn.active {
+    background-color: #2563eb;
+    color: white;
+}
+
+.view-toggle-btn:not(.active) {
+    color: #374151;
+}
+
+.view-toggle-btn:not(.active):hover {
+    background-color: #e5e7eb;
+}
+
+/* CodeMirror editor styles */
+.CodeMirror {
+    border: 1px solid #d1d5db;
+    border-radius: 0.375rem;
+    font-size: 14px;
+    height: auto;
+    min-height: 400px;
+}
+
+.CodeMirror.cm-error {
+    border-color: #ef4444;
+}
+
+/* Plugin config view styles */
+.plugin-config-view {
+    transition: opacity 0.2s ease;
+}
+
+/* Nested config section styles */
+.nested-section {
+    position: relative;
+    margin-bottom: 1.5rem;
+    transition: all 0.2s ease;
+    z-index: 1;
+    clear: both;
+    /* Contain content but allow expansion */
+    overflow: visible;
+    /* Ensure proper stacking context */
+    isolation: isolate;
+}
+
+.nested-section button {
+    position: relative;
+    z-index: 2;
+}
+
+.nested-section button:hover {
+    background-color: #f3f4f6;
+}
+
+.nested-section .nested-content {
+    position: relative;
+    transition: max-height 0.3s ease, opacity 0.3s ease;
+    overflow: hidden;
+    z-index: 1;
+    /* Ensure content doesn't get clipped by parent */
+    min-height: 0;
+    /* Contain content properly */
+    contain: layout style;
+}
+
+/* When expanded, allow content to flow naturally */
+.nested-content.expanded {
+    overflow: visible;
+    /* Ensure expanded content is fully visible */
+    min-height: auto;
+}
+
+.nested-section i {
+    transition: transform 0.3s ease;
+}
+
+/* Smooth toggle animation */
+.nested-content.collapsed {
+    opacity: 0;
+    max-height: 0;
+    overflow: hidden;
+}
+
+.nested-content.expanded {
+    opacity: 1;
+    max-height: none !important; /* Remove height constraint to allow natural expansion */
+    padding-bottom: 1rem !important; /* Ensure proper padding at bottom to prevent cutoff */
+    overflow: visible; /* Allow content to flow naturally when expanded */
+    margin-bottom: 0.5rem; /* Add spacing at bottom when expanded */
+}
+
+/* Nested sections within nested sections - add indentation and spacing */
+.nested-content .nested-section {
+    margin-left: 1rem;
+    margin-bottom: 1.5rem; /* Increased spacing to prevent overlap */
+    margin-top: 0.5rem;
+}
+
+/* Deeply nested sections need even more spacing */
+.nested-content .nested-content .nested-section {
+    margin-bottom: 2rem;
+    margin-top: 0.5rem;
+}
+
+/* Form group spacing within nested sections */
+.nested-content .form-group {
+    margin-bottom: 0.75rem;
+}
+
+/* Ensure form-groups that come after nested sections have proper spacing */
+.nested-section + .form-group {
+    margin-top: 1.5rem !important;
+    position: relative;
+    z-index: 0;
+    clear: both;
+    /* Ensure form-group doesn't overlap */
+    display: block;
+    width: 100%;
+    /* Ensure it's in normal document flow */
+    float: none;
+}
+
+/* Ensure any content after nested sections is properly spaced */
+.nested-section ~ .form-group {
+    clear: both !important;
+    position: relative;
+    z-index: 0;
+    display: block;
+    /* Prevent overlap */
+    margin-top: 1.5rem !important;
+    width: 100%;
+    float: none;
+}
+
+/* Make nested section headers slightly smaller for hierarchy */
+.nested-content .nested-section h4 {
+    font-size: 0.95em;
+}
+</style>
+

web_interface/templates/v3/partials/raw_json.html

@@ -0,0 +1,297 @@
+<div class="space-y-6">
+    <!-- Config.json Editor -->
+    <div class="bg-white rounded-lg shadow p-6">
+        <div class="border-b border-gray-200 pb-4 mb-6">
+            <div class="flex items-center justify-between">
+                <div>
+                    <h2 class="text-lg font-semibold text-gray-900">config.json Editor</h2>
+                    <p class="mt-1 text-sm text-gray-600">{{ main_config_path }}</p>
+                </div>
+                <div class="flex gap-2">
+                    <button onclick="formatJson('main-config-editor', 'main-config-validation')" 
+                            class="inline-flex items-center px-3 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50">
+                        <i class="fas fa-align-left mr-2"></i>
+                        Format JSON
+                    </button>
+                    <button onclick="manualValidateJson('main-config-editor', 'main-config-validation')" 
+                            class="inline-flex items-center px-3 py-2 border border-transparent text-sm font-medium rounded-md text-white bg-yellow-600 hover:bg-yellow-700">
+                        <i class="fas fa-check-circle mr-2"></i>
+                        Validate JSON
+                    </button>
+                    <button onclick="saveMainConfig()" 
+                            class="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md text-white bg-blue-600 hover:bg-blue-700">
+                        <i class="fas fa-save mr-2"></i>
+                        Save
+                    </button>
+                </div>
+            </div>
+        </div>
+
+        <div class="relative">
+            <textarea id="main-config-editor" 
+                      class="w-full h-96 font-mono text-sm p-4 border border-gray-300 rounded-md focus:ring-blue-500 focus:border-blue-500"
+                      spellcheck="false">{{ main_config_json }}</textarea>
+            <div id="main-config-validation" class="mt-2 text-sm"></div>
+        </div>
+
+        <div class="mt-4 p-4 bg-yellow-50 border border-yellow-200 rounded-md">
+            <div class="flex">
+                <div class="flex-shrink-0">
+                    <i class="fas fa-exclamation-triangle text-yellow-600"></i>
+                </div>
+                <div class="ml-3">
+                    <h3 class="text-sm font-medium text-yellow-800">Warning</h3>
+                    <div class="mt-2 text-sm text-yellow-700">
+                        <p>Editing this file directly can break your configuration. Always validate JSON syntax before saving.</p>
+                        <p class="mt-1">After saving, you may need to restart the display service for changes to take effect.</p>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <!-- Config_secrets.json Editor -->
+    <div class="bg-white rounded-lg shadow p-6">
+        <div class="border-b border-gray-200 pb-4 mb-6">
+            <div class="flex items-center justify-between">
+                <div>
+                    <h2 class="text-lg font-semibold text-gray-900">config_secrets.json Editor</h2>
+                    <p class="mt-1 text-sm text-gray-600">{{ secrets_config_path }}</p>
+                </div>
+                <div class="flex gap-2">
+                    <button onclick="formatJson('secrets-config-editor', 'secrets-config-validation')" 
+                            class="inline-flex items-center px-3 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50">
+                        <i class="fas fa-align-left mr-2"></i>
+                        Format JSON
+                    </button>
+                    <button onclick="manualValidateJson('secrets-config-editor', 'secrets-config-validation')" 
+                            class="inline-flex items-center px-3 py-2 border border-transparent text-sm font-medium rounded-md text-white bg-yellow-600 hover:bg-yellow-700">
+                        <i class="fas fa-check-circle mr-2"></i>
+                        Validate JSON
+                    </button>
+                    <button onclick="saveSecretsConfig()" 
+                            class="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md text-white bg-blue-600 hover:bg-blue-700">
+                        <i class="fas fa-save mr-2"></i>
+                        Save
+                    </button>
+                </div>
+            </div>
+        </div>
+
+        <div class="relative">
+            <textarea id="secrets-config-editor" 
+                      class="w-full h-96 font-mono text-sm p-4 border border-gray-300 rounded-md focus:ring-blue-500 focus:border-blue-500"
+                      spellcheck="false">{{ secrets_config_json }}</textarea>
+            <div id="secrets-config-validation" class="mt-2 text-sm"></div>
+        </div>
+
+        <div class="mt-4 p-4 bg-red-50 border border-red-200 rounded-md">
+            <div class="flex">
+                <div class="flex-shrink-0">
+                    <i class="fas fa-shield-alt text-red-600"></i>
+                </div>
+                <div class="ml-3">
+                    <h3 class="text-sm font-medium text-red-800">Security Notice</h3>
+                    <div class="mt-2 text-sm text-red-700">
+                        <p>This file contains sensitive information like API keys and passwords.</p>
+                        <p class="mt-1">Never share this file or commit it to version control.</p>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+
+<script>
+// Format JSON with proper indentation
+function formatJson(editorId, validationDivId) {
+    const textarea = document.getElementById(editorId);
+    const jsonText = textarea.value;
+    
+    try {
+        const parsed = JSON.parse(jsonText);
+        const formatted = JSON.stringify(parsed, null, 4);
+        textarea.value = formatted;
+        
+        // Auto-validate after formatting
+        validateJSON(editorId, validationDivId);
+        showNotification('JSON formatted successfully!', 'success');
+    } catch (error) {
+        showNotification('Cannot format invalid JSON: ' + error.message, 'error');
+        validateJSON(editorId, validationDivId);
+    }
+}
+
+// Manual validation with detailed feedback
+function manualValidateJson(editorId, validationDivId) {
+    const textarea = document.getElementById(editorId);
+    const validation = document.getElementById(validationDivId);
+    const jsonText = textarea.value;
+    
+    if (!textarea || !validation) return;
+    
+    try {
+        const parsed = JSON.parse(jsonText);
+        validation.innerHTML = `
+            <div class="p-3 bg-green-50 border border-green-200 rounded-md">
+                <div class="flex items-start">
+                    <i class="fas fa-check-circle text-green-600 text-xl mr-3 mt-1"></i>
+                    <div>
+                        <div class="font-semibold text-green-800">✓ JSON is valid!</div>
+                        <div class="text-sm text-green-700 mt-1">
+                            ✓ Valid JSON syntax<br>
+                            ✓ Proper structure<br>
+                            ✓ No syntax errors detected
+                        </div>
+                    </div>
+                </div>
+            </div>
+        `;
+        showNotification('JSON validation successful!', 'success');
+    } catch (e) {
+        validation.innerHTML = `
+            <div class="p-3 bg-red-50 border border-red-200 rounded-md">
+                <div class="flex items-start">
+                    <i class="fas fa-times-circle text-red-600 text-xl mr-3 mt-1"></i>
+                    <div>
+                        <div class="font-semibold text-red-800">✗ Invalid JSON syntax</div>
+                        <div class="text-sm text-red-700 mt-1">
+                            <strong>Error:</strong> ${e.message}
+                        </div>
+                    </div>
+                </div>
+            </div>
+        `;
+        showNotification('JSON validation failed: ' + e.message, 'error');
+    }
+}
+
+// Auto-validate JSON as user types (simple version)
+function validateJSON(editor, validationDiv) {
+    const textarea = document.getElementById(editor);
+    const validation = document.getElementById(validationDiv);
+    
+    if (!textarea || !validation) return true;
+    
+    try {
+        JSON.parse(textarea.value);
+        validation.innerHTML = '<span class="text-green-600"><i class="fas fa-check-circle mr-1"></i>Valid JSON</span>';
+        return true;
+    } catch (e) {
+        validation.innerHTML = '<span class="text-red-600"><i class="fas fa-times-circle mr-1"></i>Invalid JSON: ' + e.message + '</span>';
+        return false;
+    }
+}
+
+// Auto-validate on input
+document.getElementById('main-config-editor')?.addEventListener('input', function() {
+    validateJSON('main-config-editor', 'main-config-validation');
+});
+
+document.getElementById('secrets-config-editor')?.addEventListener('input', function() {
+    validateJSON('secrets-config-editor', 'secrets-config-validation');
+});
+
+// Initial validation
+setTimeout(() => {
+    validateJSON('main-config-editor', 'main-config-validation');
+    validateJSON('secrets-config-editor', 'secrets-config-validation');
+}, 100);
+
+function saveMainConfig() {
+    const textarea = document.getElementById('main-config-editor');
+    
+    // Validate JSON first
+    if (!validateJSON('main-config-editor', 'main-config-validation')) {
+        showNotification('Invalid JSON! Please fix errors before saving.', 'error');
+        return;
+    }
+    
+    try {
+        const config = JSON.parse(textarea.value);
+        
+        // Save via API
+        fetch('/api/v3/config/raw/main', {
+            method: 'POST',
+            headers: {
+                'Content-Type': 'application/json'
+            },
+            body: JSON.stringify(config)
+        })
+        .then(response => response.json())
+        .then(data => {
+            if (data.status === 'success') {
+                showNotification('config.json saved successfully!', 'success');
+            } else {
+                showNotification('Error saving config.json: ' + data.message, 'error');
+            }
+        })
+        .catch(error => {
+            showNotification('Error saving config.json: ' + error.message, 'error');
+        });
+    } catch (e) {
+        showNotification('Invalid JSON: ' + e.message, 'error');
+    }
+}
+
+function saveSecretsConfig() {
+    const textarea = document.getElementById('secrets-config-editor');
+    
+    // Validate JSON first
+    if (!validateJSON('secrets-config-editor', 'secrets-config-validation')) {
+        showNotification('Invalid JSON! Please fix errors before saving.', 'error');
+        return;
+    }
+    
+    try {
+        const config = JSON.parse(textarea.value);
+        
+        // Save via API
+        fetch('/api/v3/config/raw/secrets', {
+            method: 'POST',
+            headers: {
+                'Content-Type': 'application/json'
+            },
+            body: JSON.stringify(config)
+        })
+        .then(response => response.json())
+        .then(data => {
+            if (data.status === 'success') {
+                showNotification('config_secrets.json saved successfully!', 'success');
+            } else {
+                showNotification('Error saving config_secrets.json: ' + data.message, 'error');
+            }
+        })
+        .catch(error => {
+            showNotification('Error saving config_secrets.json: ' + error.message, 'error');
+        });
+    } catch (e) {
+        showNotification('Invalid JSON: ' + e.message, 'error');
+    }
+}
+
+// Global notification function
+function showNotification(message, type = 'info') {
+    const notifications = document.getElementById('notifications');
+    if (!notifications) return;
+    
+    const notification = document.createElement('div');
+    
+    const colors = {
+        success: 'bg-green-500',
+        error: 'bg-red-500',
+        warning: 'bg-yellow-500',
+        info: 'bg-blue-500'
+    };
+    
+    notification.className = `px-4 py-3 rounded-md text-white text-sm shadow-lg ${colors[type] || colors.info}`;
+    notification.innerHTML = `<i class="fas fa-${type === 'success' ? 'check' : type === 'error' ? 'times' : 'info'}-circle mr-2"></i>${message}`;
+    
+    notifications.appendChild(notification);
+    
+    setTimeout(() => {
+        notification.remove();
+    }, 5000);
+}
+</script>
+

web_interface/templates/v3/partials/schedule.html

@@ -0,0 +1,200 @@
+<div class="bg-white rounded-lg shadow p-6">
+    <div class="border-b border-gray-200 pb-4 mb-6">
+        <h2 class="text-lg font-semibold text-gray-900">Schedule Settings</h2>
+        <p class="mt-1 text-sm text-gray-600">Configure when the LED matrix display should be active. You can set global hours or customize times for each day of the week.</p>
+    </div>
+
+    <form hx-post="/api/v3/config/schedule"
+          hx-ext="json-enc"
+          hx-headers='{"Content-Type": "application/json"}'
+          hx-swap="none"
+          hx-on:htmx:after-request="showNotification(event.detail.xhr.responseJSON?.message || 'Schedule settings saved', event.detail.xhr.responseJSON?.status || 'success')"
+          class="space-y-6">
+
+        <!-- Enable Schedule -->
+        <div class="bg-blue-50 rounded-lg p-4">
+            <label class="flex items-center">
+                <input type="checkbox"
+                       name="enabled"
+                       id="schedule_enabled"
+                       {{ 'checked' if schedule_config.enabled else '' }}
+                       class="form-control h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded">
+                <span class="ml-2 text-sm font-medium text-gray-900">Enable Schedule</span>
+            </label>
+            <p class="mt-1 text-sm text-gray-600">When enabled, the display will only operate during specified hours.</p>
+        </div>
+
+        <!-- Schedule Mode Selection -->
+        <div class="bg-gray-50 rounded-lg p-4">
+            <h3 class="text-md font-medium text-gray-900 mb-4">Schedule Mode</h3>
+            <div class="space-y-3">
+                <label class="flex items-center">
+                    <input type="radio"
+                           name="mode"
+                           value="global"
+                           id="mode_global"
+                           {% if not schedule_config.get('days') %}checked{% endif %}
+                           onclick="toggleScheduleMode('global')"
+                           class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300">
+                    <span class="ml-2 text-sm font-medium text-gray-900">Global Schedule</span>
+                </label>
+                <p class="ml-6 text-sm text-gray-600">Use the same start and end time for all days of the week</p>
+
+                <label class="flex items-center mt-4">
+                    <input type="radio"
+                           name="mode"
+                           value="per_day"
+                           id="mode_per_day"
+                           {% if schedule_config.get('days') %}checked{% endif %}
+                           onclick="toggleScheduleMode('per_day')"
+                           class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300">
+                    <span class="ml-2 text-sm font-medium text-gray-900">Per-Day Schedule</span>
+                </label>
+                <p class="ml-6 text-sm text-gray-600">Set different times for each day of the week</p>
+            </div>
+        </div>
+
+        <!-- Global Schedule -->
+        <div id="global_schedule" class="bg-gray-50 rounded-lg p-4" style="display: {% if not schedule_config.get('days') %}block{% else %}none{% endif %};">
+            <h3 class="text-md font-medium text-gray-900 mb-4">Global Times</h3>
+            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+                <div class="form-group">
+                    <label for="start_time" class="block text-sm font-medium text-gray-700">Start Time</label>
+                    <input type="time"
+                           id="start_time"
+                           name="start_time"
+                           value="{{ schedule_config.start_time or '07:00' }}"
+                           class="form-control">
+                    <p class="mt-1 text-sm text-gray-600">When to start displaying content (HH:MM)</p>
+                </div>
+
+                <div class="form-group">
+                    <label for="end_time" class="block text-sm font-medium text-gray-700">End Time</label>
+                    <input type="time"
+                           id="end_time"
+                           name="end_time"
+                           value="{{ schedule_config.end_time or '23:00' }}"
+                           class="form-control">
+                    <p class="mt-1 text-sm text-gray-600">When to stop displaying content (HH:MM)</p>
+                </div>
+            </div>
+        </div>
+
+        <!-- Per-Day Schedule -->
+        <div id="per_day_schedule" class="space-y-3" style="display: {% if schedule_config.get('days') %}block{% else %}none{% endif %};">
+            <h3 class="text-md font-medium text-gray-900 mb-4">Day-Specific Times</h3>
+            
+            <div class="bg-gray-50 rounded-lg p-4">
+                <div class="overflow-x-auto">
+                    <table class="min-w-full divide-y divide-gray-200">
+                        <thead>
+                            <tr class="bg-gray-100">
+                                <th class="px-3 py-2 text-left text-xs font-semibold text-gray-700 uppercase">Day</th>
+                                <th class="px-3 py-2 text-left text-xs font-semibold text-gray-700 uppercase">Enabled</th>
+                                <th class="px-3 py-2 text-left text-xs font-semibold text-gray-700 uppercase">Start</th>
+                                <th class="px-3 py-2 text-left text-xs font-semibold text-gray-700 uppercase">End</th>
+                            </tr>
+                        </thead>
+                        <tbody class="bg-white divide-y divide-gray-200">
+                            {% set days = ['monday', 'tuesday', 'wednesday', 'thursday', 'friday', 'saturday', 'sunday'] %}
+                            {% for day in days %}
+                            <tr class="hover:bg-gray-50">
+                                <td class="px-3 py-2 whitespace-nowrap">
+                                    <span class="text-sm font-medium text-gray-900 capitalize">{{ day }}</span>
+                                </td>
+                                <td class="px-3 py-2 whitespace-nowrap">
+                                    <input type="checkbox"
+                                           name="{{ day }}_enabled"
+                                           id="{{ day }}_enabled"
+                                           {{ 'checked' if schedule_config.get('days', {}).get(day, {}).get('enabled', True) else '' }}
+                                           class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded"
+                                           onchange="toggleDaySchedule('{{ day }}', this.checked)">
+                                </td>
+                                <td class="px-3 py-2 whitespace-nowrap">
+                                    <input type="time"
+                                           id="{{ day }}_start"
+                                           name="{{ day }}_start"
+                                           value="{{ schedule_config.get('days', {}).get(day, {}).get('start_time', '07:00') }}"
+                                           class="block w-full px-2 py-1 text-sm border border-gray-300 rounded-md focus:outline-none focus:ring-blue-500 focus:border-blue-500 {{ 'disabled bg-gray-100' if not schedule_config.get('days', {}).get(day, {}).get('enabled', True) else '' }}"
+                                           {{ 'disabled' if not schedule_config.get('days', {}).get(day, {}).get('enabled', True) else '' }}>
+                                </td>
+                                <td class="px-3 py-2 whitespace-nowrap">
+                                    <input type="time"
+                                           id="{{ day }}_end"
+                                           name="{{ day }}_end"
+                                           value="{{ schedule_config.get('days', {}).get(day, {}).get('end_time', '23:00') }}"
+                                           class="block w-full px-2 py-1 text-sm border border-gray-300 rounded-md focus:outline-none focus:ring-blue-500 focus:border-blue-500 {{ 'disabled bg-gray-100' if not schedule_config.get('days', {}).get(day, {}).get('enabled', True) else '' }}"
+                                           {{ 'disabled' if not schedule_config.get('days', {}).get(day, {}).get('enabled', True) else '' }}>
+                                </td>
+                            </tr>
+                            {% endfor %}
+                        </tbody>
+                    </table>
+                </div>
+            </div>
+        </div>
+
+        <!-- Submit Button -->
+        <div class="flex justify-end">
+            <button type="submit"
+                    class="btn bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-md">
+                <i class="fas fa-save mr-2"></i>
+                Save Schedule Settings
+            </button>
+        </div>
+    </form>
+</div>
+
+<script>
+function toggleScheduleMode(mode) {
+    const globalSchedule = document.getElementById('global_schedule');
+    const perDaySchedule = document.getElementById('per_day_schedule');
+    
+    if (mode === 'global') {
+        globalSchedule.style.display = 'block';
+        perDaySchedule.style.display = 'none';
+    } else {
+        globalSchedule.style.display = 'none';
+        perDaySchedule.style.display = 'block';
+    }
+}
+
+function toggleDaySchedule(day, enabled) {
+    const startInput = document.getElementById(day + '_start');
+    const endInput = document.getElementById(day + '_end');
+    
+    startInput.disabled = !enabled;
+    endInput.disabled = !enabled;
+    
+    if (!enabled) {
+        startInput.value = '';
+        endInput.value = '';
+    } else {
+        // Set default values if empty
+        if (!startInput.value) startInput.value = '07:00';
+        if (!endInput.value) endInput.value = '23:00';
+    }
+}
+
+// Helper function for notifications (if not already defined globally)
+function showNotification(message, type) {
+    const colors = {
+        success: 'bg-green-500',
+        error: 'bg-red-500',
+        warning: 'bg-yellow-500',
+        info: 'bg-blue-500'
+    };
+    
+    const notification = document.createElement('div');
+    notification.className = `fixed top-4 right-4 px-6 py-3 rounded-lg shadow-lg z-50 ${colors[type] || colors.info} text-white`;
+    notification.textContent = message;
+    document.body.appendChild(notification);
+    
+    setTimeout(() => {
+        notification.style.transition = 'opacity 0.5s';
+        notification.style.opacity = '0';
+        setTimeout(() => notification.remove(), 500);
+    }, 3000);
+}
+</script>
+

web_interface/templates/v3/partials/wifi.html

@@ -0,0 +1,508 @@
+<div class="bg-white rounded-lg shadow p-6" x-data="wifiSetup()" x-init="init(); loadStatus()">
+    <!-- Captive Portal Banner (shown when AP mode is active) -->
+    <div x-show="status.ap_mode_active" 
+         class="mb-4 p-4 bg-blue-50 border border-blue-200 rounded-lg"
+         x-cloak>
+        <div class="flex items-start">
+            <div class="flex-shrink-0">
+                <i class="fas fa-info-circle text-blue-600 text-lg"></i>
+            </div>
+            <div class="ml-3 flex-1">
+                <h3 class="text-sm font-medium text-blue-800">Captive Portal Active</h3>
+                <p class="mt-1 text-sm text-blue-700">
+                    You're connected to the LEDMatrix-Setup network. Configure your WiFi connection below to connect to your home network.
+                </p>
+            </div>
+        </div>
+    </div>
+
+    <div class="border-b border-gray-200 pb-4 mb-6">
+        <h2 class="text-lg font-semibold text-gray-900">
+            <i class="fas fa-wifi mr-2"></i>WiFi Setup
+        </h2>
+        <p class="mt-1 text-sm text-gray-600">Configure WiFi connection for your Raspberry Pi. Access point mode will automatically activate when no WiFi connection is detected.</p>
+    </div>
+
+    <!-- Current WiFi Status -->
+    <div class="mb-6 p-4 bg-gray-50 rounded-lg">
+        <h3 class="text-sm font-medium text-gray-900 mb-2">Current Status</h3>
+        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+            <div>
+                <span class="text-sm text-gray-600">Connection:</span>
+                <span x-text="status.connected ? 'Connected' : 'Not Connected'" 
+                      :class="status.connected ? 'text-green-600 font-medium' : 'text-red-600 font-medium'"
+                      class="ml-2"></span>
+            </div>
+            <div x-show="status.connected">
+                <span class="text-sm text-gray-600">Network:</span>
+                <span class="ml-2 font-medium" x-text="status.ssid || 'Unknown'"></span>
+            </div>
+            <div x-show="status.connected">
+                <span class="text-sm text-gray-600">IP Address:</span>
+                <span class="ml-2 font-medium" x-text="status.ip_address || 'Unknown'"></span>
+            </div>
+            <div x-show="status.connected">
+                <span class="text-sm text-gray-600">Signal:</span>
+                <span class="ml-2 font-medium" x-text="status.signal + '%'"></span>
+            </div>
+            <div>
+                <span class="text-sm text-gray-600">AP Mode:</span>
+                <span x-text="status.ap_mode_active ? 'Active' : 'Inactive'" 
+                      :class="status.ap_mode_active ? 'text-green-600 font-medium' : 'text-gray-600 font-medium'"
+                      class="ml-2"></span>
+            </div>
+        </div>
+        <div class="mt-3 flex gap-2">
+            <button @click="loadStatus()" 
+                    class="text-sm text-blue-600 hover:text-blue-800">
+                <i class="fas fa-sync-alt mr-1"></i>Refresh Status
+            </button>
+            <button x-show="status.connected" 
+                    @click="disconnectFromNetwork()"
+                    :disabled="disconnecting"
+                    class="text-sm text-red-600 hover:text-red-800 disabled:text-gray-400 disabled:cursor-not-allowed"
+                    x-cloak>
+                <i class="fas fa-unlink" :class="disconnecting ? 'fa-spin' : ''"></i>
+                <span class="ml-1" x-text="disconnecting ? 'Disconnecting...' : 'Disconnect'"></span>
+            </button>
+        </div>
+    </div>
+
+    <!-- WiFi Connection Form -->
+    <div class="mb-6">
+        <h3 class="text-sm font-medium text-gray-900 mb-4">Connect to WiFi Network</h3>
+        
+        <!-- Network Selection -->
+        <div class="form-group mb-4">
+            <label for="wifi-ssid" class="block text-sm font-medium text-gray-700 mb-2">
+                Step 1: Select Network
+            </label>
+            <div class="flex gap-2">
+                <select id="wifi-ssid" 
+                        x-model="selectedSSID"
+                        @change="manualSSID = ''"
+                        class="form-control flex-1">
+                    <option value="">-- Select a network --</option>
+                    <template x-for="(network, index) in networks" :key="index">
+                        <option :value="network.ssid" x-text="network.ssid + ' (' + network.signal + '% - ' + network.security + ')'"></option>
+                    </template>
+                </select>
+                <!-- Debug: Show network count -->
+                <div x-show="networks.length > 0" class="text-xs text-gray-500 self-center px-2" x-cloak>
+                    (<span x-text="networks.length"></span> networks)
+                </div>
+                <button @click="scanNetworks()" 
+                        :disabled="scanning"
+                        class="px-4 py-2 bg-blue-600 text-white rounded hover:bg-blue-700 disabled:bg-gray-400 disabled:cursor-not-allowed">
+                    <i class="fas fa-sync-alt" :class="scanning ? 'fa-spin' : ''"></i>
+                    <span class="ml-2">Scan</span>
+                </button>
+            </div>
+            <p class="mt-1 text-sm text-gray-600">Scan for available networks or manually enter SSID below.</p>
+            <!-- Show selected network -->
+            <div x-show="selectedSSID" class="mt-2 p-2 bg-blue-50 border border-blue-200 rounded text-sm" x-cloak>
+                <i class="fas fa-check-circle text-blue-600 mr-2"></i>
+                <span class="font-medium">Selected:</span> <span x-text="selectedSSID"></span>
+            </div>
+        </div>
+
+        <!-- Manual SSID Entry -->
+        <div class="form-group mb-4">
+            <label for="manual-ssid" class="block text-sm font-medium text-gray-700 mb-2">
+                Or Enter SSID Manually
+            </label>
+            <input type="text" 
+                   id="manual-ssid"
+                   x-model="manualSSID"
+                   @input="selectedSSID = ''; selectedSSID = $event.target.value"
+                   placeholder="Enter network name"
+                   class="form-control">
+        </div>
+
+        <!-- Password -->
+        <div class="form-group mb-4">
+            <label for="wifi-password" class="block text-sm font-medium text-gray-700 mb-2">
+                Step 2: Enter Password
+            </label>
+            <input type="password" 
+                   id="wifi-password"
+                   x-model="password"
+                   placeholder="Enter password (leave empty for open networks)"
+                   class="form-control">
+            <p class="mt-1 text-sm text-gray-600">
+                <i class="fas fa-info-circle mr-1"></i>
+                Enter the WiFi password. Leave empty if the network is open (no password required).
+            </p>
+        </div>
+
+        <!-- Connect Button -->
+        <div class="form-group">
+            <button @click="connectToNetwork()" 
+                    :disabled="connecting || (!selectedSSID && !manualSSID)"
+                    class="w-full md:w-auto px-6 py-2 bg-green-600 text-white rounded hover:bg-green-700 disabled:bg-gray-400 disabled:cursor-not-allowed">
+                <i class="fas fa-plug" :class="connecting ? 'fa-spin' : ''"></i>
+                <span class="ml-2" x-text="connecting ? 'Connecting...' : 'Step 3: Connect'"></span>
+            </button>
+        </div>
+    </div>
+
+    <!-- AP Mode Controls -->
+    <div class="border-t border-gray-200 pt-6">
+        <h3 class="text-sm font-medium text-gray-900 mb-4">Access Point Mode</h3>
+        <p class="text-sm text-gray-600 mb-4">
+            Access point mode allows you to connect to the Raspberry Pi even when it's not connected to WiFi.
+        </p>
+        
+        <!-- Auto-Enable Toggle -->
+        <div class="mb-4 p-4 bg-gray-50 rounded-lg border border-gray-200">
+            <div class="flex items-start justify-between gap-4">
+                <div class="flex-1">
+                    <label class="text-sm font-medium text-gray-900 block mb-1">Auto-Enable AP Mode</label>
+                    <p class="text-xs text-gray-600">
+                        When enabled, AP mode will automatically activate when both WiFi and Ethernet are disconnected.
+                        When disabled, AP mode must be manually enabled.
+                    </p>
+                </div>
+                <div class="flex-shrink-0">
+                    <button type="button"
+                            @click="toggleAutoEnable(!status.auto_enable_ap_mode)"
+                            :class="status.auto_enable_ap_mode 
+                                   ? 'bg-blue-600 hover:bg-blue-700' 
+                                   : 'bg-gray-300 hover:bg-gray-400'"
+                            class="relative inline-flex h-6 w-11 items-center rounded-full transition-colors focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2">
+                        <span :class="status.auto_enable_ap_mode ? 'translate-x-6' : 'translate-x-1'"
+                              class="inline-block h-4 w-4 transform rounded-full bg-white transition-transform"></span>
+                    </button>
+                </div>
+            </div>
+            <div class="mt-2 text-xs" :class="status.auto_enable_ap_mode ? 'text-green-600' : 'text-gray-500'">
+                <span x-text="status.auto_enable_ap_mode ? '✓ Auto-enable is ON' : '○ Auto-enable is OFF'"></span>
+            </div>
+        </div>
+        
+        <!-- Manual AP Mode Controls -->
+        <div class="flex gap-2">
+            <button @click="enableAPMode()" 
+                    :disabled="apOperating || status.ap_mode_active"
+                    class="px-4 py-2 bg-blue-600 text-white rounded hover:bg-blue-700 disabled:bg-gray-400 disabled:cursor-not-allowed">
+                <i class="fas fa-broadcast-tower" :class="apOperating ? 'fa-spin' : ''"></i>
+                <span class="ml-2">Enable AP Mode</span>
+            </button>
+            <button @click="disableAPMode()" 
+                    :disabled="apOperating || !status.ap_mode_active"
+                    class="px-4 py-2 bg-red-600 text-white rounded hover:bg-red-700 disabled:bg-gray-400 disabled:cursor-not-allowed">
+                <i class="fas fa-stop" :class="apOperating ? 'fa-spin' : ''"></i>
+                <span class="ml-2">Disable AP Mode</span>
+            </button>
+        </div>
+    </div>
+
+    <!-- Messages -->
+    <div x-show="message" 
+         x-text="message"
+         :class="messageType === 'error' ? 'bg-red-50 border-red-200 text-red-800' : 'bg-green-50 border-green-200 text-green-800'"
+         class="mt-4 p-3 rounded border"
+         x-cloak></div>
+</div>
+
+<script>
+// Ensure wifiSetup is available globally for Alpine.js
+function wifiSetup() {
+    return {
+        status: {
+            connected: false,
+            ssid: null,
+            ip_address: null,
+            signal: 0,
+            ap_mode_active: false,
+            auto_enable_ap_mode: true  // Default: true (safe due to grace period)
+        },
+        networks: [],
+        selectedSSID: '',
+        manualSSID: '',
+        password: '',
+        scanning: false,
+        connecting: false,
+        disconnecting: false,
+        apOperating: false,
+        message: '',
+        messageType: 'success',
+
+        init() {
+            // Watch networks array and update select when it changes
+            this.$watch('networks', () => {
+                this.$nextTick(() => {
+                    this.updateSelectOptions();
+                });
+            });
+        },
+
+        updateSelectOptions() {
+            // Fallback method to manually update select if x-for doesn't work
+            const select = document.getElementById('wifi-ssid');
+            if (!select) return;
+            
+            // Clear existing options except the first one
+            while (select.options.length > 1) {
+                select.remove(1);
+            }
+            
+            // Add network options
+            this.networks.forEach(network => {
+                const option = document.createElement('option');
+                option.value = network.ssid;
+                option.textContent = `${network.ssid} (${network.signal}% - ${network.security})`;
+                select.appendChild(option);
+            });
+        },
+
+        async loadStatus() {
+            try {
+                const response = await fetch('/api/v3/wifi/status');
+                const data = await response.json();
+                if (data.status === 'success') {
+                    this.status = data.data;
+                } else {
+                    this.showMessage(data.message, 'error');
+                }
+            } catch (error) {
+                this.showMessage('Failed to load WiFi status: ' + error.message, 'error');
+            }
+        },
+
+        async scanNetworks() {
+            this.scanning = true;
+            this.message = '';
+            try {
+                const response = await fetch('/api/v3/wifi/scan');
+                const data = await response.json();
+                console.log('WiFi scan response:', data); // Debug log
+                if (data.status === 'success') {
+                    // Ensure data.data is an array
+                    const networksArray = Array.isArray(data.data) ? data.data : [];
+                    console.log('WiFi scan found networks:', networksArray.length); // Debug log
+                    
+                    // Set the networks array - Alpine.js will automatically update the select dropdown via x-for
+                    this.networks = networksArray;
+                    
+                    if (networksArray.length > 0) {
+                        this.showMessage(`Found ${networksArray.length} networks`, 'success');
+                    } else {
+                        this.showMessage('No networks found. Make sure WiFi is enabled and try again.', 'warning');
+                    }
+                } else {
+                    this.showMessage(data.message || 'Failed to scan networks', 'error');
+                }
+            } catch (error) {
+                console.error('WiFi scan error:', error); // Debug log
+                this.showMessage('Failed to scan networks: ' + error.message, 'error');
+            } finally {
+                this.scanning = false;
+            }
+        },
+
+        async connectToNetwork() {
+            const ssid = this.selectedSSID || this.manualSSID;
+            if (!ssid || ssid.trim() === '') {
+                this.showMessage('Please select or enter a network SSID', 'error');
+                return;
+            }
+
+            // Check if we're switching networks
+            const isSwitching = this.status.connected && 
+                               this.status.ssid && 
+                               this.status.ssid !== ssid.trim();
+            
+            if (isSwitching) {
+                this.showMessage(`Switching from ${this.status.ssid} to ${ssid.trim()}...`, 'info');
+            }
+
+            this.connecting = true;
+            this.message = '';
+            try {
+                const response = await fetch('/api/v3/wifi/connect', {
+                    method: 'POST',
+                    headers: {
+                        'Content-Type': 'application/json'
+                    },
+                    body: JSON.stringify({
+                        ssid: ssid.trim(),
+                        password: this.password || ''
+                    })
+                });
+                
+                // Check if response is ok before parsing JSON
+                if (!response.ok) {
+                    // Try to parse error message from response
+                    let errorMessage = `Server error: ${response.status} ${response.statusText}`;
+                    try {
+                        const errorData = await response.json();
+                        if (errorData.message) {
+                            errorMessage = errorData.message;
+                        }
+                    } catch (e) {
+                        // If we can't parse JSON, use the status text
+                    }
+                    this.showMessage(errorMessage, 'error');
+                    return;
+                }
+                
+                const data = await response.json();
+                if (data.status === 'success') {
+                    const successMsg = isSwitching 
+                        ? `Successfully switched to ${ssid.trim()}` 
+                        : data.message;
+                    this.showMessage(successMsg, 'success');
+                    // Clear form
+                    this.password = '';
+                    this.selectedSSID = '';
+                    this.manualSSID = '';
+                    // Reload status multiple times to catch connection updates
+                    setTimeout(() => this.loadStatus(), 2000);
+                    setTimeout(() => this.loadStatus(), 5000);
+                    setTimeout(() => this.loadStatus(), 10000);
+                } else {
+                    this.showMessage(data.message || 'Failed to connect to network', 'error');
+                }
+            } catch (error) {
+                console.error('WiFi connect error:', error);
+                this.showMessage('Failed to connect: ' + error.message, 'error');
+            } finally {
+                this.connecting = false;
+            }
+        },
+
+        async disconnectFromNetwork() {
+            if (!this.status.connected) {
+                this.showMessage('Not connected to any network', 'warning');
+                return;
+            }
+
+            this.disconnecting = true;
+            this.message = '';
+            try {
+                const response = await fetch('/api/v3/wifi/disconnect', {
+                    method: 'POST'
+                });
+                
+                // Check if response is ok before parsing JSON
+                if (!response.ok) {
+                    let errorMessage = `Server error: ${response.status} ${response.statusText}`;
+                    try {
+                        const errorData = await response.json();
+                        if (errorData.message) {
+                            errorMessage = errorData.message;
+                        }
+                    } catch (e) {
+                        // If we can't parse JSON, use the status text
+                    }
+                    this.showMessage(errorMessage, 'error');
+                    return;
+                }
+                
+                const data = await response.json();
+                if (data.status === 'success') {
+                    this.showMessage(data.message, 'success');
+                    // Reload status after a delay to show updated state
+                    setTimeout(() => this.loadStatus(), 2000);
+                } else {
+                    this.showMessage(data.message || 'Failed to disconnect from network', 'error');
+                }
+            } catch (error) {
+                console.error('WiFi disconnect error:', error);
+                this.showMessage('Failed to disconnect: ' + error.message, 'error');
+            } finally {
+                this.disconnecting = false;
+            }
+        },
+
+        async enableAPMode() {
+            this.apOperating = true;
+            this.message = '';
+            try {
+                const response = await fetch('/api/v3/wifi/ap/enable', {
+                    method: 'POST'
+                });
+                const data = await response.json();
+                if (data.status === 'success') {
+                    this.showMessage(data.message, 'success');
+                    setTimeout(() => this.loadStatus(), 1000);
+                } else {
+                    this.showMessage(data.message, 'error');
+                }
+            } catch (error) {
+                this.showMessage('Failed to enable AP mode: ' + error.message, 'error');
+            } finally {
+                this.apOperating = false;
+            }
+        },
+
+        async disableAPMode() {
+            this.apOperating = true;
+            this.message = '';
+            try {
+                const response = await fetch('/api/v3/wifi/ap/disable', {
+                    method: 'POST'
+                });
+                const data = await response.json();
+                if (data.status === 'success') {
+                    this.showMessage(data.message, 'success');
+                    setTimeout(() => this.loadStatus(), 1000);
+                } else {
+                    this.showMessage(data.message, 'error');
+                }
+            } catch (error) {
+                this.showMessage('Failed to disable AP mode: ' + error.message, 'error');
+            } finally {
+                this.apOperating = false;
+            }
+        },
+
+        async toggleAutoEnable(enabled) {
+            try {
+                const response = await fetch('/api/v3/wifi/ap/auto-enable', {
+                    method: 'POST',
+                    headers: {
+                        'Content-Type': 'application/json'
+                    },
+                    body: JSON.stringify({
+                        auto_enable_ap_mode: enabled
+                    })
+                });
+                const data = await response.json();
+                if (data.status === 'success') {
+                    this.status.auto_enable_ap_mode = enabled;
+                    this.showMessage(
+                        enabled 
+                            ? 'Auto-enable AP mode is now enabled' 
+                            : 'Auto-enable AP mode is now disabled',
+                        'success'
+                    );
+                } else {
+                    this.showMessage(data.message, 'error');
+                    // Revert toggle on error
+                    this.status.auto_enable_ap_mode = !enabled;
+                }
+            } catch (error) {
+                this.showMessage('Failed to update auto-enable setting: ' + error.message, 'error');
+                // Revert toggle on error
+                this.status.auto_enable_ap_mode = !enabled;
+            }
+        },
+
+        showMessage(msg, type = 'success') {
+            this.message = msg;
+            this.messageType = type;
+            if (type === 'success') {
+                setTimeout(() => this.message = '', 5000);
+            }
+        }
+    }
+};
+
+// Also make it available as a global function for Alpine.js
+if (typeof window !== 'undefined') {
+    window.wifiSetup = wifiSetup;
+}
+</script>
+