diff --git a/config/config.template.json b/config/config.template.json
index 07a72b60..b3f63589 100644
--- a/config/config.template.json
+++ b/config/config.template.json
@@ -121,6 +121,7 @@
             "axis": "horizontal"
         },
         "display_durations": {},
+        "plugin_rotation_order": [],
         "use_short_date_format": true,
         "vegas_scroll": {
             "enabled": false,
diff --git a/docs/widget-guide.md b/docs/widget-guide.md
index dadda4cf..7a1ed850 100644
--- a/docs/widget-guide.md
+++ b/docs/widget-guide.md
@@ -206,6 +206,40 @@ To use an existing widget in your plugin's `config_schema.json`, simply add the
 
 The widget will be automatically rendered when the plugin configuration form is loaded.
 
+## Marking Fields as Advanced (`x-advanced`)
+
+Add `"x-advanced": true` to any top-level, non-object property to move it out
+of the main form and into a single collapsed **Advanced Settings** section at
+the bottom of the plugin's configuration page:
+
+```json
+{
+  "properties": {
+    "city": {
+      "type": "string",
+      "title": "City"
+    },
+    "request_timeout": {
+      "type": "integer",
+      "default": 10,
+      "description": "HTTP timeout in seconds",
+      "x-advanced": true
+    }
+  }
+}
+```
+
+Guidelines:
+
+- Use it for fine-tuning knobs most users never touch (timeouts, retry
+  behavior, cache TTLs, styling overrides). Anything a first-time user must
+  set to get the plugin working should stay basic.
+- Nothing is hidden permanently — the section expands on click, and the
+  settings search finds and auto-expands advanced fields like any others.
+- The flag is ignored on `object`-type properties (they already render as
+  their own collapsible sections) and is safely ignored by older cores, so
+  adding it never breaks compatibility.
+
 ## Creating Custom Widgets
 
 ### Step 1: Create Widget File
diff --git a/src/display_controller.py b/src/display_controller.py
index ace55b58..5a341902 100644
--- a/src/display_controller.py
+++ b/src/display_controller.py
@@ -381,6 +381,10 @@ class DisplayController:
                 logger.debug("%d plugin(s) disabled in config", disabled_count)
 
             logger.info("Plugin system initialized in %.3f seconds", time.time() - plugin_time)
+            # Parallel loading appends modes in load-completion order, which
+            # varies between restarts; apply the user's configured rotation
+            # order (no-op when not configured).
+            self._apply_plugin_rotation_order()
             logger.info("Total available modes: %d", len(self.available_modes))
             logger.info("Available modes: %s", self.available_modes)
             
@@ -2843,11 +2847,52 @@ class DisplayController:
             except Exception as e:
                 logger.error("Plugin reconcile: error enabling %s: %s", plugin_id, e, exc_info=True)
 
+        # Newly enabled plugins were appended at the end; put them in the
+        # configured rotation slot before resyncing the index.
+        self._apply_plugin_rotation_order()
         self._resync_mode_index_after_change(previous_mode)
-        logger.info("Plugin reconcile complete: +%s -%s (%d modes)",
+        logger.info("[DisplayController] Plugin reconcile complete: +%s -%s (%d modes)",
                     sorted(to_add), sorted(to_remove), len(self.available_modes))
         return True
 
+    def _apply_plugin_rotation_order(self) -> None:
+        """Reorder available_modes to follow display.plugin_rotation_order.
+
+        The configured value is a list of plugin ids; their modes rotate in
+        that order (each plugin's own modes keep their declared order), with
+        any enabled-but-unlisted plugins appended afterwards in their current
+        relative order. An empty/missing list leaves available_modes exactly
+        as built (today's behavior). Mirrors vegas_mode/config.py's
+        get_ordered_plugins() semantics for the primary rotation.
+        """
+        configured = (self.config.get("display", {}) or {}).get("plugin_rotation_order", []) or []
+        # Defensive: hand-edited or migrated configs may hold a non-list or
+        # non-string entries; keep the existing rotation rather than applying
+        # a garbage order.
+        if not isinstance(configured, list):
+            logger.warning("[DisplayController] Ignoring invalid plugin_rotation_order (not a list): %r",
+                           type(configured).__name__)
+            return
+        configured = [p for p in configured if isinstance(p, str)]
+        if not configured or not self.available_modes:
+            return
+
+        ordered_ids = [p for p in configured if p in self.plugin_display_modes]
+        new_modes: List[str] = []
+        for plugin_id in ordered_ids:
+            for mode in self.plugin_display_modes[plugin_id]:
+                if mode in self.available_modes and mode not in new_modes:
+                    new_modes.append(mode)
+        # Unlisted plugins' modes (and any mode not attributable to a plugin)
+        # follow in their existing relative order.
+        for mode in self.available_modes:
+            if mode not in new_modes:
+                new_modes.append(mode)
+        if new_modes != self.available_modes:
+            self.available_modes = new_modes
+            logger.info("[DisplayController] Applied plugin rotation order %s -> modes: %s",
+                        configured, self.available_modes)
+
     def _resync_mode_index_after_change(self, previous_mode: Optional[str]) -> None:
         """Clamp rotation state after available_modes changed. Stays on the
         previous mode if it survived, otherwise restarts cleanly within range."""
diff --git a/test/test_web_smoke.py b/test/test_web_smoke.py
new file mode 100644
index 00000000..d0fd30de
--- /dev/null
+++ b/test/test_web_smoke.py
@@ -0,0 +1,184 @@
+"""
+Web-UI smoke tests: every page, partial, and critical static asset must render.
+
+These boot the pages blueprint with the same dual registration app.py uses
+(un-prefixed primary + /v3 legacy alias) and assert each surface returns 200
+with its load-bearing markers present. They exist to catch, in CI, the class
+of regression that only shows up when a real request renders a real template:
+a broken partial, a missing tab wiring, a renamed element id that JS depends
+on, or a static asset that stopped being served.
+"""
+
+import sys
+from pathlib import Path
+from unittest.mock import MagicMock
+
+import pytest
+from flask import Flask
+
+PROJECT_ROOT = Path(__file__).parent.parent
+sys.path.insert(0, str(PROJECT_ROOT))
+
+
+SMOKE_CONFIG = {
+    "web_display_autostart": True,
+    "timezone": "America/Chicago",
+    "location": {"city": "Dallas", "state": "Texas", "country": "US"},
+    "plugin_system": {
+        "auto_discover": True,
+        "auto_load_enabled": True,
+        "development_mode": False,
+        "plugins_directory": "plugin-repos",
+    },
+    "schedule": {},
+    "dim_schedule": {"dim_brightness": 30},
+    "sync": {"role": "standalone", "port": 5765, "follower_position": "left"},
+    "clock": {"enabled": True},
+    "ledmatrix-weather": {"enabled": True},
+    "display": {
+        "hardware": {
+            "rows": 32, "cols": 64, "chain_length": 2, "parallel": 1,
+            "brightness": 95, "hardware_mapping": "adafruit-hat-pwm",
+            "led_rgb_sequence": "RGB", "multiplexing": 0, "panel_type": "",
+            "row_address_type": 0, "scan_mode": 0, "pwm_bits": 9,
+            "pwm_dither_bits": 1, "pwm_lsb_nanoseconds": 130,
+            "limit_refresh_rate_hz": 120, "disable_hardware_pulsing": False,
+            "inverse_colors": False, "show_refresh_rate": False,
+        },
+        "runtime": {"gpio_slowdown": 3, "rp1_rio": 0},
+        "double_sided": {"enabled": False, "copies": 2, "axis": "horizontal"},
+        "use_short_date_format": False,
+        "dynamic_duration": {"max_duration_seconds": 180},
+        "vegas_scroll": {
+            "enabled": False, "scroll_speed": 50, "separator_width": 32,
+            "target_fps": 125, "buffer_ahead": 2,
+            "plugin_order": [], "excluded_plugins": [],
+        },
+        "display_durations": {"stale_saved_mode": 45},
+        "plugin_rotation_order": ["ledmatrix-weather", "clock"],
+    },
+}
+
+PLUGIN_MODES = {
+    "clock": ["clock"],
+    "ledmatrix-weather": ["weather_current", "weather_daily"],
+}
+
+
+@pytest.fixture
+def client():
+    base = PROJECT_ROOT / "web_interface"
+    app = Flask(
+        __name__,
+        template_folder=str(base / "templates"),
+        static_folder=str(base / "static"),
+    )
+    app.config["TESTING"] = True
+
+    from web_interface.blueprints import pages_v3 as pv
+
+    # pages_v3 is a module-level Blueprint singleton shared by the whole test
+    # process (test_web_settings_ui.py mutates the same attributes) - save
+    # the originals and restore them on teardown so this fixture can't leak
+    # its mocks into tests that run afterward.
+    original_config_manager = getattr(pv.pages_v3, "config_manager", None)
+    original_plugin_manager = getattr(pv.pages_v3, "plugin_manager", None)
+
+    mock_cm = MagicMock()
+    mock_cm.load_config.return_value = SMOKE_CONFIG
+    mock_cm.get_raw_file_content.return_value = SMOKE_CONFIG
+    mock_cm.get_config_path.return_value = "config/config.json"
+    mock_cm.get_secrets_path.return_value = "config/config_secrets.json"
+    pv.pages_v3.config_manager = mock_cm
+
+    mock_pm = MagicMock()
+    mock_pm.plugins = {}
+    mock_pm.get_all_plugin_info.return_value = [
+        {"id": "clock", "name": "Clock"},
+        {"id": "ledmatrix-weather", "name": "Weather"},
+    ]
+    mock_pm.get_plugin_display_modes.side_effect = (
+        lambda pid: PLUGIN_MODES.get(pid, [])
+    )
+    pv.pages_v3.plugin_manager = mock_pm
+
+    # Same dual registration as web_interface/app.py: un-prefixed primary,
+    # /v3 kept as a working legacy alias.
+    app.register_blueprint(pv.pages_v3, url_prefix="")
+    app.register_blueprint(pv.pages_v3, url_prefix="/v3", name="pages_v3_legacy")
+    try:
+        yield app.test_client()
+    finally:
+        pv.pages_v3.config_manager = original_config_manager
+        pv.pages_v3.plugin_manager = original_plugin_manager
+
+
+# (path, [markers that must appear in the body])
+PAGES = [
+    ("/", ["site-nav", "mobileNavOpen", 'rel="manifest"',
+           "restart-pending-banner", "activeTab = 'durations'"]),
+    ("/partials/overview", ["getting-started-card", "displayImage"]),
+    ("/partials/general", ["timezone"]),
+    ("/partials/display", ["display-section-advanced-hardware",
+                           "display-resolution-value", "vegas_scroll_label"]),
+    ("/partials/durations", ["rotation_plugin_order", "duration__clock",
+                             "duration__weather_current",
+                             "duration__stale_saved_mode"]),
+    ("/partials/schedule", ["schedule"]),
+]
+
+
+@pytest.mark.parametrize("path,markers", PAGES, ids=[p for p, _ in PAGES])
+def test_page_renders_with_markers(client, path, markers):
+    resp = client.get(path)
+    assert resp.status_code == 200, f"{path} -> {resp.status_code}"
+    body = resp.get_data(as_text=True)
+    for marker in markers:
+        assert marker in body, f"{path}: missing marker {marker!r}"
+
+
+@pytest.mark.parametrize("path", [p for p, _ in PAGES if p != "/"])
+def test_legacy_v3_alias_serves_the_same_partials(client, path):
+    assert client.get("/v3" + path).status_code == 200
+
+
+STATIC_ASSETS = [
+    "/static/v3/app.css",
+    "/static/v3/app.js",
+    "/static/v3/manifest.json",
+    "/static/v3/icons/icon-192.png",
+    "/static/v3/js/app-shell.js",
+    "/static/v3/js/app-early.js",
+    "/static/v3/js/htmx-config.js",
+    "/static/v3/js/widgets/plugin-order-list.js",
+    "/static/v3/js/widgets/notification.js",
+    "/static/v3/vendor/fontawesome/css/all.min.css",
+    "/static/v3/vendor/codemirror/codemirror.min.js",
+]
+
+
+@pytest.mark.parametrize("asset", STATIC_ASSETS)
+def test_static_asset_served(client, asset):
+    resp = client.get(asset)
+    assert resp.status_code == 200, f"{asset} -> {resp.status_code}"
+    assert len(resp.data) > 0
+
+
+def test_durations_page_groups_by_plugin(client):
+    """One duration input per display mode of each enabled plugin, plus the
+    leftover group for saved keys no enabled plugin owns."""
+    body = client.get("/partials/durations").get_data(as_text=True)
+    assert body.count("duration__") >= 2 * len(
+        [m for modes in PLUGIN_MODES.values() for m in modes]
+    )  # each mode: id= and name=
+    assert "Other saved entries" in body
+
+
+def test_display_advanced_section_contains_tuning_fields(client):
+    body = client.get("/partials/display").get_data(as_text=True)
+    adv = body.find('id="display-section-advanced-hardware"')
+    adv_close = body.find("/#display-section-advanced-hardware")
+    assert 0 < adv < adv_close
+    for field in ["multiplexing", "pwm_bits", "inverse_colors"]:
+        pos = body.find(f'name="{field}"')
+        assert adv < pos < adv_close, f"{field} not inside the advanced section"
diff --git a/test/test_web_static_audit.py b/test/test_web_static_audit.py
new file mode 100644
index 00000000..4d9bae1f
--- /dev/null
+++ b/test/test_web_static_audit.py
@@ -0,0 +1,85 @@
+"""
+Static-analysis audits for the web UI, as tests so CI enforces them.
+
+1. Breakpoint utility audit: app.css hand-maintains a Tailwind-style utility
+   subset, so a template can reference a responsive class (e.g. sm:block)
+   that no CSS rule defines — it silently no-ops. This once left the header
+   search box and system stats invisible at every screen width. The audit
+   diffs classes used in templates against classes defined in app.css.
+
+2. Asset reference audit: every url_for('static', filename=...) in the
+   templates must point to a file that exists, so a renamed/moved asset
+   can't ship as a broken <script>/<link>/<img>.
+
+3. debugLog globals audit: any static JS file calling debugLog() (a global
+   defined in base.html) must declare it in a /* global */ header so linting
+   stays clean and the dependency is explicit.
+"""
+
+import re
+from pathlib import Path
+
+PROJECT_ROOT = Path(__file__).parent.parent
+WEB = PROJECT_ROOT / "web_interface"
+TEMPLATES = WEB / "templates"
+STATIC = WEB / "static"
+APP_CSS = STATIC / "v3" / "app.css"
+
+BP_PREFIXES = ("sm", "md", "lg", "xl", "2xl")
+
+
+def _template_files():
+    return sorted(TEMPLATES.rglob("*.html"))
+
+
+def test_every_used_breakpoint_class_is_defined():
+    used = set()
+    class_attr = re.compile(r'class="([^"]*)"')
+    bp_class = re.compile(r"\b(%s):[A-Za-z0-9_.-]+" % "|".join(BP_PREFIXES))
+    for path in _template_files():
+        for attr in class_attr.findall(path.read_text()):
+            for m in bp_class.finditer(attr):
+                used.add(m.group(0))
+
+    css = APP_CSS.read_text()
+    defined = {
+        m.group(0).lstrip(".").replace("\\:", ":")
+        for m in re.finditer(
+            r"\.(%s)\\:[A-Za-z0-9_-]+" % "|".join(BP_PREFIXES), css
+        )
+    }
+
+    missing = sorted(used - defined)
+    assert not missing, (
+        "Responsive utility classes referenced in templates but never defined "
+        f"in app.css (they silently no-op): {missing}"
+    )
+
+
+def test_every_static_url_for_points_to_a_real_file():
+    ref = re.compile(
+        r"url_for\(\s*['\"]static['\"]\s*,\s*filename\s*=\s*['\"]([^'\"]+)['\"]"
+    )
+    missing = []
+    for path in _template_files():
+        for filename in ref.findall(path.read_text()):
+            if not (STATIC / filename).is_file():
+                missing.append(f"{path.relative_to(PROJECT_ROOT)}: {filename}")
+    assert not missing, f"Templates reference missing static assets: {missing}"
+
+
+def test_js_files_calling_debuglog_declare_the_global():
+    undeclared = []
+    for path in sorted((STATIC / "v3").rglob("*.js")):
+        if "vendor" in path.parts:
+            continue
+        text = path.read_text()
+        # Calls debugLog( but neither defines it nor declares the global
+        calls = re.search(r"(?<![.\w])debugLog\(", text)
+        defines = "window.debugLog" in text
+        declares = re.search(r"/\*\s*global[^*]*\bdebugLog\b", text)
+        if calls and not defines and not declares:
+            undeclared.append(str(path.relative_to(PROJECT_ROOT)))
+    assert not undeclared, (
+        f"JS files call debugLog() without a /* global debugLog */ header: {undeclared}"
+    )
diff --git a/web_interface/app.py b/web_interface/app.py
index 5e857cd5..74ebcfe0 100644
--- a/web_interface/app.py
+++ b/web_interface/app.py
@@ -59,6 +59,20 @@ except ImportError:
     # flask-limiter not installed, rate limiting disabled
     limiter = None
 
+# Enable gzip/brotli response compression (Flask-Compress skips streaming
+# responses, so the SSE endpoints are unaffected). Optional, like limiter:
+# missing package just means uncompressed responses.
+try:
+    from flask_compress import Compress
+
+    Compress(app)
+except ImportError:
+    logging.getLogger(__name__).warning(
+        "flask-compress not installed - responses will be served uncompressed. "
+        "Install it with the Tools tab's 'Install Base Requirements' button or "
+        "'pip install flask-compress'."
+    )
+
 # Import cache functions from separate module to avoid circular imports
 
 # Initialize plugin managers - read plugins directory from config
@@ -176,7 +190,12 @@ except Exception as _hm_err:  # pragma: no cover - defensive startup guard
         "Could not enable plugin health/metrics for web UI: %s", _hm_err
     )
 
-app.register_blueprint(pages_v3, url_prefix='/v3')
+# Pages are served un-prefixed (the interface lives at /); the /v3 mount is a
+# legacy alias kept so existing bookmarks and the hardcoded /v3/partials/...
+# fetches in templates/JS keep working unchanged. url_for('pages_v3.*')
+# resolves against the primary (un-prefixed) registration.
+app.register_blueprint(pages_v3, url_prefix='')
+app.register_blueprint(pages_v3, url_prefix='/v3', name='pages_v3_legacy')
 app.register_blueprint(api_v3, url_prefix='/api/v3')
 
 # Route to serve plugin asset files (registered on main app, not blueprint, for /assets/... path)
@@ -407,7 +426,11 @@ def captive_portal_redirect():
     
     # List of paths that should NOT be redirected (allow normal operation)
     allowed_paths = [
-        '/v3',  # Main interface and all sub-paths (includes /v3/setup)
+        '/v3',  # Legacy-prefixed interface and all sub-paths
+        '/setup',  # Captive setup page itself (un-prefixed mount)
+        '/partials/',  # HTMX partials (un-prefixed mount)
+        '/settings/',  # Settings search index (un-prefixed mount)
+        '/plugin-ui/',  # Plugin-provided web UI assets (un-prefixed mount)
         '/api/v3/',  # All API endpoints
         '/static/',  # Static files (CSS, JS, images)
         '/hotspot-detect.html',  # iOS/macOS detection
@@ -606,8 +629,6 @@ def system_status_generator():
 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"  # nosec B108 - fixed path matches display_manager; only read here
     # Viewer marker: this generator only runs while the broadcaster has
@@ -649,24 +670,26 @@ def display_preview_generator():
                 # 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:  # nosec B110 - SSE preview file may be mid-write; transient error, skip this update
-                        # File might be being written, skip this update
-                        pass
+                        # The snapshot is already a PNG, written atomically by
+                        # the display service (tmp + os.replace in
+                        # display_manager), so pass the raw bytes straight
+                        # through instead of PIL-decoding and re-encoding —
+                        # identical payload, much less CPU on the Pi.
+                        with open(snapshot_path, 'rb') as f:
+                            img_str = base64.b64encode(f.read()).decode('utf-8')
+
+                        preview_data = {
+                            'timestamp': time.time(),
+                            'width': width,
+                            'height': height,
+                            'image': img_str
+                        }
+                        last_modified = current_modified
+                        yield preview_data
+                    except OSError:
+                        # Transient filesystem race (file rotated/replaced
+                        # between mtime check and read); skip this update.
+                        app.logger.debug("Preview snapshot read failed; skipping frame", exc_info=True)
             else:
                 # No snapshot available
                 yield {
@@ -799,11 +822,8 @@ if limiter:
     limiter.limit("200 per minute")(stream_display)
     limiter.limit("200 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'))
+# The pages blueprint's index now serves '/' directly (see the un-prefixed
+# blueprint registration above), so no redirect route is needed here.
 
 @app.route('/favicon.ico')
 def favicon():
diff --git a/web_interface/blueprints/api_v3.py b/web_interface/blueprints/api_v3.py
index 60025c2b..9777ed4a 100644
--- a/web_interface/blueprints/api_v3.py
+++ b/web_interface/blueprints/api_v3.py
@@ -961,8 +961,31 @@ def save_main_config():
                     return jsonify({"status": "error", "message": "sync_follower_position must be left or right"}), 400
                 current_config["sync"]["follower_position"] = pos_val
 
-        # Handle display durations
-        duration_fields = [k for k in data.keys() if k.endswith('_duration') or k in ['default_duration', 'transition_duration']]
+        # Handle primary rotation order: must be a JSON array of plugin-id
+        # strings. Reject anything else with a 400 rather than silently
+        # coercing, so a buggy client can't clear or corrupt the saved order.
+        if 'plugin_rotation_order' in data:
+            raw_order = data.pop('plugin_rotation_order')
+            try:
+                parsed = json.loads(raw_order) if isinstance(raw_order, str) else raw_order
+            except (json.JSONDecodeError, TypeError, ValueError):
+                return jsonify({'status': 'error',
+                                'message': 'plugin_rotation_order must be valid JSON'}), 400
+            if not isinstance(parsed, list) or not all(isinstance(p, str) for p in parsed):
+                return jsonify({'status': 'error',
+                                'message': 'plugin_rotation_order must be a list of plugin-id strings'}), 400
+            if 'display' not in current_config:
+                current_config['display'] = {}
+            current_config['display']['plugin_rotation_order'] = parsed
+
+        # Handle display durations. Popped from `data` (not just read) so
+        # they can never also fall through to the generic "remaining keys"
+        # merge near the end of this function, which would otherwise write
+        # them AGAIN as bogus top-level config keys (e.g. "clock_duration": 30
+        # sitting at config root alongside the correct
+        # display.display_durations.clock_duration).
+        duration_fields = [k for k in list(data.keys())
+                           if k.endswith('_duration') or k in ('default_duration', 'transition_duration')]
         if duration_fields:
             if 'display' not in current_config:
                 current_config['display'] = {}
@@ -970,8 +993,36 @@ def save_main_config():
                 current_config['display']['display_durations'] = {}
 
             for field in duration_fields:
-                if field in data:
-                    current_config['display']['display_durations'][field] = int(data[field])
+                raw_value = data.pop(field)
+                try:
+                    int_value = int(raw_value)
+                except (ValueError, TypeError):
+                    return jsonify({'status': 'error',
+                                    'message': f"Invalid duration for {field}: must be an integer"}), 400
+                current_config['display']['display_durations'][field] = int_value
+
+        # Per-mode durations from the Rotation & Durations page, posted as
+        # duration__<mode_key> (mode keys are arbitrary plugin mode names, so
+        # they can't use the suffix convention above). Same pop-and-validate
+        # treatment, for the same reason.
+        mode_duration_fields = [k for k in list(data.keys()) if k.startswith('duration__')]
+        if mode_duration_fields:
+            if 'display' not in current_config:
+                current_config['display'] = {}
+            if 'display_durations' not in current_config['display']:
+                current_config['display']['display_durations'] = {}
+
+            for field in mode_duration_fields:
+                raw_value = data.pop(field)
+                mode_key = field[len('duration__'):]
+                if not mode_key:
+                    continue
+                try:
+                    int_value = int(raw_value)
+                except (ValueError, TypeError):
+                    return jsonify({'status': 'error',
+                                    'message': f"Invalid duration for mode '{mode_key}': must be an integer"}), 400
+                current_config['display']['display_durations'][mode_key] = int_value
 
         # Handle plugin configurations dynamically
         # Any key that matches a plugin ID should be saved as plugin config
@@ -1639,6 +1690,16 @@ def execute_system_action():
                 except subprocess.TimeoutExpired:
                     logger.warning("git stash timed out, proceeding with pull")
 
+            # Record HEAD before the pull so dependency changes can be detected
+            old_head = None
+            try:
+                _pre = subprocess.run(['git', 'rev-parse', 'HEAD'],
+                                      capture_output=True, text=True, timeout=10, cwd=project_dir)
+                if _pre.returncode == 0:
+                    old_head = _pre.stdout.strip()
+            except subprocess.TimeoutExpired:
+                logger.warning("git rev-parse timed out before pull")
+
             # Perform the git pull
             result = subprocess.run(
                 ['git', 'pull', '--rebase'],
@@ -1655,6 +1716,54 @@ def execute_system_action():
                     pull_message = f"Code updated successfully. Local changes were automatically stashed.{stash_info}"
                 if result.stdout and "Already up to date" not in result.stdout:
                     pull_message = f"Code updated successfully.{stash_info}"
+
+                # Keep Python dependencies in sync automatically: if the pull
+                # changed a requirements file, install it now — users updating
+                # from the web UI (most of them) never SSH in to pip install.
+                # Installs go through the same root-visible path as the
+                # Tools-tab buttons (_pip_install_requirements).
+                dep_notes = []
+                try:
+                    _post = subprocess.run(['git', 'rev-parse', 'HEAD'],
+                                           capture_output=True, text=True, timeout=10, cwd=project_dir)
+                    new_head = _post.stdout.strip() if _post.returncode == 0 else None
+                    if old_head and new_head and old_head != new_head:
+                        diff = subprocess.run(
+                            ['git', 'diff', '--name-only', f'{old_head}..{new_head}'],
+                            capture_output=True, text=True, timeout=15, cwd=project_dir)
+                        changed = set(diff.stdout.split()) if diff.returncode == 0 else set()
+                        for rel in ('requirements.txt', 'web_interface/requirements.txt'):
+                            req_path = PROJECT_ROOT / rel
+                            if rel not in changed or not req_path.exists():
+                                continue
+                            # Each file's install is isolated: a timeout or
+                            # OSError (e.g. the sudo wrapper/interpreter
+                            # missing) on one file must not abort the other.
+                            try:
+                                r = _pip_install_requirements(req_path, timeout=180)
+                                if r.returncode == 0:
+                                    dep_notes.append(f"Dependencies from {rel} updated.")
+                                else:
+                                    dep_notes.append(
+                                        f"Dependency install from {rel} failed — "
+                                        "run Install Base Requirements from the Tools tab.")
+                                    logger.warning("post-update pip install failed for %s: %s",
+                                                   rel, _truncate_output(r.stdout, r.stderr))
+                            except subprocess.TimeoutExpired:
+                                dep_notes.append(
+                                    f"Dependency install from {rel} timed out — "
+                                    "run Install Base Requirements from the Tools tab.")
+                                logger.warning("post-update pip install timed out for %s", rel)
+                            except OSError as install_err:
+                                dep_notes.append(
+                                    f"Dependency install from {rel} failed — "
+                                    "run Install Base Requirements from the Tools tab.")
+                                logger.warning("post-update pip install errored for %s: %s",
+                                               rel, install_err)
+                except subprocess.TimeoutExpired:
+                    logger.warning("post-update dependency sync timed out")
+                if dep_notes:
+                    pull_message += " " + " ".join(dep_notes)
                 # A `git pull` restores built-in plugins (committed under
                 # plugin-repos/) even if the user uninstalled them. Re-remove
                 # any the user previously uninstalled so the update doesn't
@@ -1685,14 +1794,36 @@ def execute_system_action():
             result = subprocess.run(['sudo', 'systemctl', 'restart', 'ledmatrix-web.service'],
                                  capture_output=True, text=True, timeout=10)
         elif action == 'install_base_requirements':
-            req_file = PROJECT_ROOT / 'requirements.txt'
-            if not req_file.exists():
+            # Base + web interface requirements: flask-compress and friends
+            # live in web_interface/requirements.txt, not the root file.
+            req_files = [f for f in (PROJECT_ROOT / 'requirements.txt',
+                                     PROJECT_ROOT / 'web_interface' / 'requirements.txt')
+                         if f.exists()]
+            if not req_files:
                 return jsonify({'status': 'error', 'message': 'No requirements.txt found at project root'})
-            result = _pip_install_requirements(req_file, timeout=120)
+            outputs = []
+            all_ok = True
+            for req_file in req_files:
+                label = req_file.relative_to(PROJECT_ROOT)
+                # Isolate each file's install: a timeout or OSError on one
+                # (e.g. requirements.txt) must not abort the rest of the
+                # loop (e.g. web_interface/requirements.txt never attempted).
+                try:
+                    result = _pip_install_requirements(req_file, timeout=120)
+                    all_ok = all_ok and result.returncode == 0
+                    outputs.append(f"== {label} ==\n" + _truncate_output(result.stdout, result.stderr))
+                except subprocess.TimeoutExpired:
+                    all_ok = False
+                    outputs.append(f"== {label} ==\nTimed out after 120s")
+                    logger.warning("install_base_requirements timed out for %s", label)
+                except OSError as install_err:
+                    all_ok = False
+                    outputs.append(f"== {label} ==\nFailed: {install_err}")
+                    logger.warning("install_base_requirements errored for %s: %s", label, install_err)
             return jsonify({
-                'status': 'success' if result.returncode == 0 else 'error',
-                'message': 'Base requirements installed successfully' if result.returncode == 0 else 'pip install failed',
-                'output': _truncate_output(result.stdout, result.stderr)
+                'status': 'success' if all_ok else 'error',
+                'message': 'Base requirements installed successfully' if all_ok else 'pip install failed',
+                'output': "\n".join(outputs)
             })
         elif action == 'install_plugin_requirements':
             active_pm = getattr(api_v3, 'plugin_manager', None)
diff --git a/web_interface/blueprints/pages_v3.py b/web_interface/blueprints/pages_v3.py
index 8c3c1bbc..f25752ce 100644
--- a/web_interface/blueprints/pages_v3.py
+++ b/web_interface/blueprints/pages_v3.py
@@ -397,12 +397,51 @@ def _load_display_partial():
         return "Error loading partial", 500
 
 def _load_durations_partial():
-    """Load display durations partial"""
+    """Load rotation & durations partial.
+
+    Builds one duration entry per display mode of every enabled plugin
+    (falling back to the display controller's 30s default), overlaid with any
+    values saved in display.display_durations. Historically the template only
+    looped over saved keys, and nothing ever populated them, so the page
+    rendered empty.
+    """
     try:
         if pages_v3.config_manager:
             main_config = pages_v3.config_manager.load_config()
+            duration_groups = []
+            covered_keys = set()
+            if pages_v3.plugin_manager:
+                try:
+                    pages_v3.plugin_manager.discover_plugins()
+                    saved = (main_config.get('display', {}) or {}).get('display_durations', {}) or {}
+                    infos = sorted(pages_v3.plugin_manager.get_all_plugin_info(),
+                                   key=lambda i: (i.get('name') or i.get('id') or '').lower())
+                    for info in infos:
+                        pid = info.get('id')
+                        if not pid or not (main_config.get(pid, {}) or {}).get('enabled', False):
+                            continue
+                        modes = pages_v3.plugin_manager.get_plugin_display_modes(pid) or [pid]
+                        covered_keys.update(modes)
+                        duration_groups.append({
+                            'plugin_id': pid,
+                            'plugin_name': info.get('name') or pid,
+                            'modes': [{'key': m, 'value': saved.get(m, 30)} for m in modes],
+                        })
+                    # Saved keys not owned by any enabled plugin (disabled or
+                    # uninstalled plugins) stay visible rather than vanishing.
+                    leftovers = [{'key': k, 'value': v} for k, v in saved.items()
+                                 if k not in covered_keys]
+                    if leftovers:
+                        duration_groups.append({
+                            'plugin_id': '',
+                            'plugin_name': 'Other saved entries',
+                            'modes': leftovers,
+                        })
+                except Exception:
+                    logger.warning("durations: could not enumerate plugin modes", exc_info=True)
             return render_template('v3/partials/durations.html',
-                                 main_config=main_config)
+                                 main_config=main_config,
+                                 duration_groups=duration_groups)
     except Exception as e:
         logger.error("Error loading partial", exc_info=True)
         return "Error loading partial", 500
diff --git a/web_interface/requirements.txt b/web_interface/requirements.txt
index dd4a4548..6b1a98e0 100644
--- a/web_interface/requirements.txt
+++ b/web_interface/requirements.txt
@@ -7,6 +7,7 @@ flask>=3.1.3,<4.0.0
 werkzeug>=3.1.6,<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)
+flask-compress>=1.14  # gzip/brotli response compression (big win for the large JS/HTML over WiFi)
 
 # WebSocket support for plugins
 # Note: Web interface uses Server-Sent Events (SSE) for real-time updates, not WebSockets
diff --git a/web_interface/static/v3/app.css b/web_interface/static/v3/app.css
index a1342955..27416ede 100644
--- a/web_interface/static/v3/app.css
+++ b/web_interface/static/v3/app.css
@@ -413,6 +413,9 @@ a, button, input, select, textarea {
 /* Responsive breakpoints */
 @media (min-width: 640px) {
     .sm\:px-6 { padding-left: 1.5rem; padding-right: 1.5rem; }
+    .sm\:block { display: block; }
+    .sm\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
+    .sm\:text-sm { font-size: 0.875rem; line-height: 1.25rem; }
 }
 
 @media (min-width: 768px) {
@@ -421,6 +424,8 @@ a, button, input, select, textarea {
     .md\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
     .md\:flex { display: flex; }
     .md\:hidden { display: none; }
+    .md\:block { display: block; }
+    .md\:w-auto { width: auto; }
 }
 
 @media (min-width: 1024px) {
@@ -431,9 +436,14 @@ a, button, input, select, textarea {
     .lg\:px-8 { padding-left: 2rem; padding-right: 2rem; }
     .lg\:gap-x-3 { column-gap: 0.75rem; }
     .lg\:gap-x-6 { column-gap: 1.5rem; }
+    .lg\:block { display: block; }
+    .lg\:flex { display: flex; }
+    .lg\:w-64 { width: 16rem; }
 }
 
 @media (min-width: 1280px) {
+    .xl\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
+    .xl\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
     .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)); }
@@ -446,6 +456,9 @@ a, button, input, select, textarea {
 }
 
 @media (min-width: 1536px) {
+    .2xl\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
+    .2xl\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
+    .2xl\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
     .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)); }
@@ -456,6 +469,129 @@ a, button, input, select, textarea {
     .2xl\:space-x-8 > * + * { margin-left: 2rem; }
 }
 
+/* ===== Mobile navigation drawer =====
+   Below md the #site-nav wrapper becomes an off-canvas drawer; at md and up
+   none of these rules apply and the nav renders exactly as before. */
+@media (max-width: 767.98px) {
+    .site-nav {
+        position: fixed;
+        top: 0;
+        left: 0;
+        bottom: 0;
+        z-index: 60;
+        width: min(85vw, 320px);
+        background-color: var(--color-surface);
+        border-right: 1px solid var(--color-border);
+        transform: translateX(-100%);
+        transition: transform 0.25s ease;
+        overflow-y: auto;
+        padding: 1rem;
+        -webkit-overflow-scrolling: touch;
+    }
+    .site-nav.open {
+        transform: translateX(0);
+        box-shadow: 0 0 24px rgba(0, 0, 0, 0.25);
+    }
+    /* Tabs become full-width rows with >=44px touch targets */
+    .site-nav .nav-tab {
+        display: flex;
+        width: 100%;
+        align-items: center;
+        gap: 0.5rem;
+        text-align: left;
+        padding: 0.75rem 1rem;
+        min-height: 44px;
+    }
+    .site-nav nav.-mb-px {
+        display: block;
+    }
+    .nav-backdrop {
+        position: fixed;
+        inset: 0;
+        z-index: 55;
+        background-color: rgba(0, 0, 0, 0.4);
+    }
+    /* Header widgets relocated into the drawer (see placeHeaderWidgets in
+       app.js). The originals carry `hidden`/breakpoint classes tuned for the
+       header, so re-enable them explicitly in the drawer context. */
+    #drawer-widgets #settings-search-wrap {
+        display: block !important;
+        margin-bottom: 1rem;
+    }
+    #drawer-widgets #settings-search-wrap input {
+        width: 100%;
+    }
+    #drawer-widgets #settings-search-results {
+        position: static;
+        width: 100%;
+        max-height: 50vh;
+        margin-top: 0.25rem;
+    }
+    #drawer-widgets #system-stats {
+        display: flex !important;
+        justify-content: space-between;
+        margin-bottom: 1rem;
+    }
+    /* Larger touch targets inside horizontally scrolling tables */
+    .overflow-x-auto table button {
+        min-width: 44px;
+        min-height: 44px;
+    }
+    .overflow-x-auto table input:not([type="checkbox"]),
+    .overflow-x-auto table select {
+        min-height: 40px;
+    }
+    .overflow-x-auto table input[type="checkbox"] {
+        width: 1.25rem;
+        height: 1.25rem;
+    }
+}
+
+@media (min-width: 768px) {
+    /* Hard guards: even if mobileNavOpen was left true when the viewport
+       crossed the breakpoint, the drawer/backdrop must render as plain
+       in-flow nav on desktop. */
+    .site-nav {
+        position: static;
+        transform: none;
+        width: auto;
+        padding: 0;
+        border-right: none;
+        box-shadow: none;
+        background-color: transparent;
+        overflow-y: visible;
+    }
+    .nav-backdrop {
+        display: none !important;
+    }
+    #drawer-widgets {
+        display: none;
+    }
+}
+
+/* Mobile modal sizing: every .modal-content dialog fits the viewport with
+   internal scrolling instead of overflowing it. */
+@media (max-width: 640px) {
+    .modal-content {
+        width: 95vw !important;
+        max-width: 95vw !important;
+        max-height: 90vh;
+        overflow-y: auto;
+    }
+}
+
+/* Edge-fade hint that a container scrolls horizontally (pure CSS,
+   Lea Verou scrolling-shadows technique — backgrounds sit behind content). */
+.overflow-x-auto {
+    background:
+        linear-gradient(90deg, var(--color-surface) 30%, rgba(255, 255, 255, 0)) left / 24px 100%,
+        linear-gradient(270deg, var(--color-surface) 30%, rgba(255, 255, 255, 0)) right / 24px 100%,
+        radial-gradient(farthest-side at 0 50%, rgba(0, 0, 0, 0.18), rgba(0, 0, 0, 0)) left / 12px 100%,
+        radial-gradient(farthest-side at 100% 50%, rgba(0, 0, 0, 0.18), rgba(0, 0, 0, 0)) right / 12px 100%;
+    background-repeat: no-repeat;
+    background-attachment: local, local, scroll, scroll;
+}
+
 /* HTMX loading states */
 .htmx-request .loading {
     display: inline-block;
@@ -1220,3 +1356,44 @@ button.bg-white {
 [data-theme="dark"] .power-warning-banner-dismiss {
     color: #fca5a5;
 }
+
+/* ===== Floating live preview (all tabs except Overview) ===== */
+.floating-preview {
+    position: fixed;
+    right: 1rem;
+    bottom: 1rem;
+    z-index: 70;
+    background-color: #111827;
+    border: 1px solid #374151;
+    border-radius: 0.5rem;
+    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
+    overflow: hidden;
+    /* Desktop: draggable resize handle (bottom-left visually, since the
+       panel is anchored to the right). Touch devices use the size button. */
+    resize: both;
+    min-width: 160px;
+    max-width: 90vw;
+}
+.floating-preview img {
+    background-color: #000;
+}
+.floating-preview-toggle {
+    position: fixed;
+    right: 1rem;
+    bottom: 1rem;
+    z-index: 70;
+    width: 44px;
+    height: 44px;
+    border-radius: 9999px;
+    background-color: var(--color-primary);
+    color: #ffffff;
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35);
+    align-items: center;
+    justify-content: center;
+}
+@media (max-width: 640px) {
+    /* Whatever size is chosen, never wider than the phone viewport */
+    .floating-preview {
+        max-width: calc(100vw - 2rem);
+    }
+}
diff --git a/web_interface/static/v3/app.js b/web_interface/static/v3/app.js
index 01ed814a..82b2a9e5 100644
--- a/web_interface/static/v3/app.js
+++ b/web_interface/static/v3/app.js
@@ -1,4 +1,4 @@
-/* global showNotification, updateSystemStats, updateDisplayPreview, htmx */
+/* global showNotification, updateSystemStats, updateDisplayPreview, htmx, debugLog */
 // LED Matrix v3 JavaScript
 // Additional helpers for HTMX and Alpine.js integration
 
@@ -12,8 +12,8 @@ window.showNotification = function(message, type = 'info') {
         });
         document.dispatchEvent(event);
     } else {
-        // Fallback notification
-        console.log(`${type}: ${message}`);
+        // Fallback notification — user-facing last resort, so never gated
+        console.info(`${type}: ${message}`);
     }
 };
 
@@ -49,6 +49,111 @@ document.body.addEventListener('htmx:afterRequest', function(event) {
             // Not JSON, ignore
         }
     }
+
+    // Main-config saves (display hardware, rotation/durations, general) only
+    // take effect after a display-service restart — surface the reminder
+    // banner. Plugin config saves apply live and are deliberately excluded.
+    try {
+        const cfg = event.detail.requestConfig;
+        if (cfg && cfg.verb === 'post' &&
+            (cfg.path || '').includes('/api/v3/config/main') &&
+            response && response.status >= 200 && response.status < 300) {
+            window.showRestartPending();
+        }
+    } catch { /* banner is best-effort */ }
+});
+
+// ===== Unsaved-changes guard =====
+// Plugin config panels are Alpine x-if templates: navigating away DESTROYS
+// the panel and revisiting re-fetches it, silently discarding any edits.
+// (System tabs use x-show + data-loaded and persist, so they're exempt.)
+// Track dirty forms and confirm before a lossy navigation.
+(function() {
+    function markDirty(e) {
+        const form = e.target && e.target.closest ? e.target.closest('form') : null;
+        if (form) form.setAttribute('data-dirty', '');
+    }
+    document.body.addEventListener('input', markDirty);
+    document.body.addEventListener('change', markDirty);
+
+    // A successful submit makes the form clean again
+    document.body.addEventListener('htmx:afterRequest', function(event) {
+        const xhr = event.detail.xhr;
+        const form = event.detail.elt && event.detail.elt.closest ? event.detail.elt.closest('form') : null;
+        if (form && xhr && xhr.status >= 200 && xhr.status < 300) {
+            form.removeAttribute('data-dirty');
+        }
+    });
+
+    // Capture phase so this runs before Alpine's bubbling @click switches tabs
+    document.addEventListener('click', function(e) {
+        const tabBtn = e.target && e.target.closest ? e.target.closest('.nav-tab') : null;
+        if (!tabBtn) return;
+        const lossy = Array.prototype.filter.call(
+            document.querySelectorAll('.plugin-config-tab form[data-dirty]'),
+            function(f) { return f.offsetParent !== null; }
+        );
+        if (lossy.length === 0) return;
+        if (!window.confirm('You have unsaved plugin settings — leaving this page will discard them. Leave anyway?')) {
+            e.stopPropagation();
+            e.preventDefault();
+        }
+    }, true);
+
+    // Full page unload loses every panel's edits
+    window.addEventListener('beforeunload', function(e) {
+        const dirty = Array.prototype.some.call(
+            document.querySelectorAll('form[data-dirty]'),
+            function(f) { return f.offsetParent !== null; }
+        );
+        if (dirty) {
+            e.preventDefault();
+            e.returnValue = '';
+        }
+    });
+})();
+
+// ===== Restart-pending banner =====
+// Shown after restart-requiring saves; persists across tab switches (and
+// reloads, via sessionStorage) until the display restarts or it's dismissed.
+window.showRestartPending = function() {
+    try { sessionStorage.setItem('ledmatrix-restart-pending', '1'); } catch { /* private browsing */ }
+    const banner = document.getElementById('restart-pending-banner');
+    if (banner) banner.style.display = 'block';
+};
+
+window.dismissRestartPending = function() {
+    try { sessionStorage.removeItem('ledmatrix-restart-pending'); } catch { /* no-op */ }
+    const banner = document.getElementById('restart-pending-banner');
+    if (banner) banner.style.display = 'none';
+};
+
+window.restartPendingNow = function() {
+    const btn = document.getElementById('restart-pending-btn');
+    if (btn) btn.disabled = true;
+    fetch('/api/v3/system/action', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ action: 'restart_display_service' })
+    })
+    .then(r => r.json())
+    .then(data => {
+        showNotification(data.message || 'Display restarting…', data.status || 'success');
+        window.dismissRestartPending();
+    })
+    .catch(err => {
+        showNotification('Error restarting display: ' + err.message, 'error');
+    })
+    .finally(() => { if (btn) btn.disabled = false; });
+};
+
+document.addEventListener('DOMContentLoaded', function() {
+    try {
+        if (sessionStorage.getItem('ledmatrix-restart-pending') === '1') {
+            const banner = document.getElementById('restart-pending-banner');
+            if (banner) banner.style.display = 'block';
+        }
+    } catch { /* no-op */ }
 });
 
 // SSE reconnection helper — closes and reopens both SSE streams,
@@ -246,13 +351,13 @@ window.performanceMonitor = {
     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');
+        debugLog('DOM Content Loaded:', metrics.domContentLoaded?.toFixed(2) || 'N/A', 'ms');
+        debugLog('Load Complete:', metrics.loadComplete?.toFixed(2) || 'N/A', 'ms');
+        debugLog('First Paint:', metrics.firstPaint?.toFixed(2) || 'N/A', 'ms');
+        debugLog('First Contentful Paint:', metrics.firstContentfulPaint?.toFixed(2) || 'N/A', 'ms');
+        debugLog('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);
+            debugLog('Custom Measures:', metrics.measures);
         }
         console.groupEnd();
     }
@@ -273,3 +378,170 @@ document.addEventListener('DOMContentLoaded', function() {
         }, 100);
     });
 });
+
+// ===== Floating live preview =====
+// A mini preview of the display, available on every tab except Overview
+// (which has the full-size one). Open/closed state persists per browser;
+// frames arrive via the existing SSE stream (updateDisplayPreview in
+// app-shell.js feeds #floating-preview-img).
+window.toggleFloatingPreview = function(open) {
+    try { localStorage.setItem('ledmatrix-floating-preview', open ? '1' : '0'); } catch { /* no-op */ }
+    window.updateFloatingPreviewVisibility();
+};
+
+// Preset widths the size button cycles through (px). Desktop users can also
+// drag the panel's native resize handle (CSS resize: both).
+const FLOATING_PREVIEW_SIZES = [192, 256, 384, 512];
+
+window.applyFloatingPreviewSize = function() {
+    const panel = document.getElementById('floating-preview');
+    if (!panel) return;
+    let size = 256;
+    try { size = parseInt(localStorage.getItem('ledmatrix-floating-preview-size'), 10) || 256; } catch { /* no-op */ }
+    panel.style.width = size + 'px';
+    // Clear any manual drag-resize height so the image's aspect ratio rules
+    panel.style.height = '';
+};
+
+window.cycleFloatingPreviewSize = function() {
+    let size = 256;
+    try { size = parseInt(localStorage.getItem('ledmatrix-floating-preview-size'), 10) || 256; } catch { /* no-op */ }
+    const idx = FLOATING_PREVIEW_SIZES.indexOf(size);
+    const next = FLOATING_PREVIEW_SIZES[(idx + 1) % FLOATING_PREVIEW_SIZES.length];
+    try { localStorage.setItem('ledmatrix-floating-preview-size', String(next)); } catch { /* no-op */ }
+    window.applyFloatingPreviewSize();
+};
+
+window.updateFloatingPreviewVisibility = function(tab) {
+    const panel = document.getElementById('floating-preview');
+    const toggle = document.getElementById('floating-preview-toggle');
+    if (!panel || !toggle) return;
+    let active = tab;
+    if (!active) {
+        const el = document.querySelector('[x-data="app()"]') || document.querySelector('[x-data]');
+        const data = el && el._x_dataStack && el._x_dataStack[0];
+        active = data && data.activeTab;
+    }
+    const onOverview = active === 'overview';
+    let open = false;
+    try { open = localStorage.getItem('ledmatrix-floating-preview') === '1'; } catch { /* no-op */ }
+    const showPanel = !onOverview && open;
+    panel.style.display = showPanel ? 'block' : 'none';
+    toggle.style.display = (!onOverview && !open) ? 'flex' : 'none';
+    if (showPanel) {
+        window.applyFloatingPreviewSize();
+        // Show the last cached frame immediately — SSE only pushes on
+        // display changes, so a freshly opened panel would otherwise stay
+        // empty until the next change.
+        const img = document.getElementById('floating-preview-img');
+        if (img && !img.src && window._lastPreviewFrame) {
+            img.src = 'data:image/png;base64,' + window._lastPreviewFrame;
+        }
+    }
+};
+
+document.addEventListener('DOMContentLoaded', function() {
+    window.updateFloatingPreviewVisibility();
+});
+
+// Run a plugin on the real display for 60s via the existing on-demand API
+// and open the floating preview so the effect is visible while configuring.
+window.previewPluginNow = function(pluginId) {
+    fetch('/api/v3/display/on-demand/start', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ plugin_id: pluginId, duration: 60 })
+    })
+    .then(r => r.json())
+    .then(data => {
+        showNotification(data.message || ('Previewing ' + pluginId + ' for 60 seconds'),
+                         data.status || 'success');
+        if (data.status === 'success') window.toggleFloatingPreview(true);
+    })
+    .catch(err => {
+        showNotification('Preview failed: ' + err.message, 'error');
+    });
+};
+
+// ===== Nav accessibility =====
+// aria-current tracks the active tab. Buttons are matched by their Alpine
+// @click expression ("activeTab = '<tab>'"), which works for both the static
+// system tabs and the dynamically injected plugin tabs.
+window.updateNavAriaCurrent = function(tab) {
+    document.querySelectorAll('.nav-tab').forEach(function(btn) {
+        const expr = btn.getAttribute('@click') || btn.getAttribute('x-on:click') || '';
+        const isCurrent = expr.indexOf("activeTab = '" + tab + "'") !== -1;
+        if (isCurrent) {
+            btn.setAttribute('aria-current', 'page');
+        } else {
+            btn.removeAttribute('aria-current');
+        }
+    });
+};
+
+// Escape closes the mobile nav drawer and returns focus to the hamburger;
+// opening the drawer moves focus to its first tab.
+(function() {
+    function appData() {
+        const el = document.querySelector('[x-data="app()"]') || document.querySelector('[x-data]');
+        return el && el._x_dataStack && el._x_dataStack[0];
+    }
+    document.addEventListener('keydown', function(e) {
+        if (e.key !== 'Escape') return;
+        const data = appData();
+        if (data && data.mobileNavOpen) {
+            data.mobileNavOpen = false;
+            const burger = document.querySelector('[aria-controls="site-nav"]');
+            if (burger) burger.focus();
+        }
+    });
+    document.addEventListener('click', function(e) {
+        const burger = e.target && e.target.closest
+            ? e.target.closest('[aria-controls="site-nav"]') : null;
+        if (!burger) return;
+        // The click handler toggles mobileNavOpen; focus the first tab once
+        // the drawer has slid in (matches the CSS transition timing).
+        setTimeout(function() {
+            const data = appData();
+            if (data && data.mobileNavOpen) {
+                const first = document.querySelector('#site-nav .nav-tab');
+                if (first) first.focus();
+            }
+        }, 120);
+    });
+})();
+
+// ===== Mobile nav: header-widget relocation =====
+// Below the md breakpoint the settings-search box and system-stats block are
+// MOVED (same DOM nodes, listeners intact) from the header into the nav
+// drawer's #drawer-widgets slot; at md and up they move back. Single-instance
+// constraint: settings-search.js and the SSE stats updater both look these
+// elements up by id, so they must never be duplicated.
+window.placeHeaderWidgets = function() {
+    const drawer = document.getElementById('drawer-widgets');
+    const header = document.getElementById('header-widgets');
+    const search = document.getElementById('settings-search-wrap');
+    const stats = document.getElementById('system-stats');
+    if (!drawer || !header) return;
+
+    const desktop = window.matchMedia('(min-width: 768px)').matches;
+    if (desktop) {
+        // Restore original header order: search before the theme toggle,
+        // stats as the last item.
+        const themeToggle = document.getElementById('theme-toggle');
+        if (search && search.parentElement !== header) {
+            header.insertBefore(search, themeToggle || null);
+        }
+        if (stats && stats.parentElement !== header) {
+            header.appendChild(stats);
+        }
+    } else {
+        if (search && search.parentElement !== drawer) drawer.appendChild(search);
+        if (stats && stats.parentElement !== drawer) drawer.appendChild(stats);
+    }
+};
+
+document.addEventListener('DOMContentLoaded', function() {
+    window.placeHeaderWidgets();
+    window.matchMedia('(min-width: 768px)').addEventListener('change', window.placeHeaderWidgets);
+});
diff --git a/web_interface/static/v3/icons/apple-touch-icon.png b/web_interface/static/v3/icons/apple-touch-icon.png
new file mode 100644
index 00000000..1099cf8a
Binary files /dev/null and b/web_interface/static/v3/icons/apple-touch-icon.png differ
diff --git a/web_interface/static/v3/icons/icon-192.png b/web_interface/static/v3/icons/icon-192.png
new file mode 100644
index 00000000..144a7e79
Binary files /dev/null and b/web_interface/static/v3/icons/icon-192.png differ
diff --git a/web_interface/static/v3/icons/icon-512.png b/web_interface/static/v3/icons/icon-512.png
new file mode 100644
index 00000000..3bed5672
Binary files /dev/null and b/web_interface/static/v3/icons/icon-512.png differ
diff --git a/web_interface/static/v3/js/app-early.js b/web_interface/static/v3/js/app-early.js
new file mode 100644
index 00000000..2f95db38
--- /dev/null
+++ b/web_interface/static/v3/js/app-early.js
@@ -0,0 +1,356 @@
+/* global debugLog */
+// Early helpers and the app() stub (must run before Alpine init)
+// Extracted from templates/v3/base.html so browsers cache it as a static asset.
+        // Helper function to get installed plugins with fallback
+        // Must be defined before app() function that uses it
+        async function getInstalledPluginsSafe() {
+            if (window.PluginAPI && window.PluginAPI.getInstalledPlugins) {
+                try {
+                    const plugins = await window.PluginAPI.getInstalledPlugins();
+                    // Ensure plugins is always an array
+                    const pluginsArray = Array.isArray(plugins) ? plugins : [];
+                    return { status: 'success', data: { plugins: pluginsArray } };
+                } catch (error) {
+                    console.error('Error using PluginAPI.getInstalledPlugins, falling back to direct fetch:', error);
+                    // Fall through to direct fetch
+                }
+            }
+            // Fallback to direct fetch if PluginAPI not loaded
+            const response = await fetch('/api/v3/plugins/installed');
+            return await response.json();
+        }
+
+        // Global event listener for pluginsUpdated - works even if Alpine isn't ready yet
+        // This ensures tabs update when plugins_manager.js loads plugins
+        document.addEventListener('pluginsUpdated', function(event) {
+            debugLog('[GLOBAL] Received pluginsUpdated event:', event.detail?.plugins?.length || 0, 'plugins');
+            const plugins = event.detail?.plugins || [];
+            
+            // Update window.installedPlugins
+            window.installedPlugins = plugins;
+            
+            // Try to update Alpine component if it exists (only if using full implementation)
+            if (window.Alpine) {
+                const appElement = document.querySelector('[x-data="app()"]');
+                if (appElement && appElement._x_dataStack && appElement._x_dataStack[0]) {
+                    const appComponent = appElement._x_dataStack[0];
+                    appComponent.installedPlugins = plugins;
+                    // Only call updatePluginTabs if it's the full implementation (has _doUpdatePluginTabs)
+                    if (typeof appComponent.updatePluginTabs === 'function' && 
+                        appComponent.updatePluginTabs.toString().includes('_doUpdatePluginTabs')) {
+                        debugLog('[GLOBAL] Updating plugin tabs via Alpine component (full implementation)');
+                        appComponent.updatePluginTabs();
+                        return; // Full implementation handles it, don't do direct update
+                    }
+                }
+            }
+            
+            // Only do direct DOM update if full implementation isn't available yet
+            const pluginTabsRow = document.getElementById('plugin-tabs-row');
+            const pluginTabsNav = pluginTabsRow?.querySelector('nav');
+            if (pluginTabsRow && pluginTabsNav && plugins.length > 0) {
+                // Clear existing plugin tabs (except Plugin Manager)
+                const existingTabs = pluginTabsNav.querySelectorAll('.plugin-tab');
+                existingTabs.forEach(tab => { tab.remove(); });
+                
+                // Add tabs for each installed plugin
+                plugins.forEach(plugin => {
+                    const tabButton = document.createElement('button');
+                    tabButton.type = 'button';
+                    tabButton.setAttribute('data-plugin-id', plugin.id);
+                    tabButton.className = `plugin-tab nav-tab`;
+                    tabButton.onclick = function() {
+                        // Try to set activeTab via Alpine if available
+                        if (window.Alpine) {
+                            const appElement = document.querySelector('[x-data="app()"]');
+                            if (appElement && appElement._x_dataStack && appElement._x_dataStack[0]) {
+                                appElement._x_dataStack[0].activeTab = plugin.id;
+                                // Only call updatePluginTabStates if it exists
+                                if (typeof appElement._x_dataStack[0].updatePluginTabStates === 'function') {
+                                    appElement._x_dataStack[0].updatePluginTabStates();
+                                }
+                            }
+                        }
+                    };
+                    // Built with DOM APIs (no innerHTML): the icon class and
+                    // name come from plugin manifests, which are only
+                    // semi-trusted input.
+                    const tabIcon = document.createElement('i');
+                    tabIcon.className = plugin.icon || 'fas fa-puzzle-piece';
+                    tabButton.textContent = '';
+                    tabButton.appendChild(tabIcon);
+                    tabButton.appendChild(document.createTextNode(plugin.name || plugin.id));
+                    pluginTabsNav.appendChild(tabButton);
+                });
+                debugLog('[GLOBAL] Updated plugin tabs directly:', plugins.length, 'tabs added');
+            }
+        });
+
+        // Guard flag to prevent duplicate stub-to-full enhancement
+        window._appEnhanced = false;
+
+        // Define app() function early so Alpine can find it when it initializes
+        // This is a complete implementation that will work immediately
+        (function() {
+            const isAPMode = window.location.hostname === '192.168.4.1' || 
+                           window.location.hostname.startsWith('192.168.4.');
+            
+            // Create the app function - will be enhanced by full implementation later
+            window.app = function() {
+                return {
+                    activeTab: isAPMode ? 'wifi' : 'overview',
+                    mobileNavOpen: false,
+                    installedPlugins: [],
+                    
+                    init() {
+                        // Try to enhance immediately with full implementation
+                        const tryEnhance = () => {
+                            if (window._appEnhanced) return true;
+                            if (typeof window.app === 'function') {
+                                const fullApp = window.app();
+                                // Check if this is the full implementation (has updatePluginTabs with proper implementation)
+                                if (fullApp && typeof fullApp.updatePluginTabs === 'function' && fullApp.updatePluginTabs.toString().includes('_doUpdatePluginTabs')) {
+                                    window._appEnhanced = true;
+                                    // Preserve runtime state that should not be reset
+                                    const preservedPlugins = this.installedPlugins;
+                                    const preservedTab = this.activeTab;
+                                    const defaultTab = isAPMode ? 'wifi' : 'overview';
+                                    const wasInitialized = this._initialized;
+                                    Object.assign(this, fullApp);
+                                    // Restore runtime state if non-default
+                                    if (preservedPlugins && preservedPlugins.length > 0) {
+                                        this.installedPlugins = preservedPlugins;
+                                    }
+                                    if (preservedTab && preservedTab !== defaultTab) {
+                                        this.activeTab = preservedTab;
+                                    }
+                                    if (wasInitialized) {
+                                        this._initialized = wasInitialized;
+                                    }
+                                    // Only call init if not already initialized
+                                    if (typeof this.init === 'function' && !this._initialized) {
+                                        this.init();
+                                    }
+                                    return true;
+                                }
+                            }
+                            return false;
+                        };
+                        
+                        // Set up event listener for pluginsUpdated in stub (only if not already enhanced)
+                        // The full implementation will have its own listener, so we only need this for the stub
+                        if (!this._pluginsUpdatedListenerSet) {
+                            const handlePluginsUpdated = (event) => {
+                                debugLog('[STUB] Received pluginsUpdated event:', event.detail?.plugins?.length || 0, 'plugins');
+                                const plugins = event.detail?.plugins || [];
+                                // Only update if we're still in stub mode (not enhanced yet)
+                                if (typeof this.updatePluginTabs === 'function' && !this.updatePluginTabs.toString().includes('_doUpdatePluginTabs')) {
+                                    this.installedPlugins = plugins;
+                                    if (this.$nextTick && typeof this.$nextTick === 'function') {
+                                        this.$nextTick(() => {
+                                            this.updatePluginTabs();
+                                        });
+                                    } else {
+                                        setTimeout(() => {
+                                            this.updatePluginTabs();
+                                        }, 100);
+                                    }
+                                }
+                            };
+                            document.addEventListener('pluginsUpdated', handlePluginsUpdated);
+                            this._pluginsUpdatedListenerSet = true;
+                            debugLog('[STUB] init: Set up pluginsUpdated event listener');
+                        }
+                        
+                        // Try immediately - if full implementation is already loaded, use it right away
+                        if (!tryEnhance()) {
+                            // Full implementation not ready yet, load plugins directly while waiting
+                            this.loadInstalledPluginsDirectly();
+                            // Try again very soon to enhance with full implementation
+                            setTimeout(tryEnhance, 10);
+                            
+                            // Also set up a periodic check to update tabs if plugins get loaded by plugins_manager.js
+                            let retryCount = 0;
+                            const maxRetries = 20; // Check for 2 seconds (20 * 100ms)
+                            const checkAndUpdateTabs = () => {
+                                if (retryCount >= maxRetries) {
+                                    // Fallback: if plugins_manager.js hasn't loaded after 2 seconds, fetch directly
+                                    if (!window.installedPlugins || window.installedPlugins.length === 0) {
+                                        debugLog('[STUB] checkAndUpdateTabs: Fallback - fetching plugins directly after timeout');
+                                        this.loadInstalledPluginsDirectly();
+                                    }
+                                    return;
+                                }
+                                
+                                // Check if plugins are available (either from window or component)
+                                const plugins = window.installedPlugins || this.installedPlugins || [];
+                                if (plugins.length > 0) {
+                                    debugLog('[STUB] checkAndUpdateTabs: Found', plugins.length, 'plugins, updating tabs');
+                                    this.installedPlugins = plugins;
+                                    if (typeof this.updatePluginTabs === 'function') {
+                                        this.updatePluginTabs();
+                                    }
+                                } else {
+                                    retryCount++;
+                                    setTimeout(checkAndUpdateTabs, 100);
+                                }
+                            };
+                            // Start checking after a short delay
+                            setTimeout(checkAndUpdateTabs, 200);
+                        } else {
+                            // Full implementation loaded, but still set up fallback timer
+                            setTimeout(() => {
+                                if (!window.installedPlugins || window.installedPlugins.length === 0) {
+                                    debugLog('[STUB] init: Fallback timer - fetching plugins directly');
+                                    this.loadInstalledPluginsDirectly();
+                                }
+                            }, 2000);
+                        }
+                    },
+                    
+                    // Direct plugin loading for stub (before full implementation loads)
+                    async loadInstalledPluginsDirectly() {
+                        try {
+                            debugLog('[STUB] loadInstalledPluginsDirectly: Starting...');
+                            // Ensure DOM is ready
+                            const ensureDOMReady = () => {
+                                return new Promise((resolve) => {
+                                    if (document.readyState === 'complete' || document.readyState === 'interactive') {
+                                        // Use requestAnimationFrame to ensure DOM is painted
+                                        requestAnimationFrame(() => {
+                                            setTimeout(resolve, 50); // Small delay to ensure rendering
+                                        });
+                                    } else {
+                                        document.addEventListener('DOMContentLoaded', () => {
+                                            requestAnimationFrame(() => {
+                                                setTimeout(resolve, 50);
+                                            });
+                                        });
+                                    }
+                                });
+                            };
+                            
+                            await ensureDOMReady();
+                            
+                            const data = await getInstalledPluginsSafe();
+                            if (data.status === 'success') {
+                                const plugins = data.data.plugins || [];
+                                debugLog('[STUB] loadInstalledPluginsDirectly: Loaded', plugins.length, 'plugins');
+                                
+                                // Update both component and window
+                                this.installedPlugins = plugins;
+                                window.installedPlugins = plugins;
+                                
+                                // Dispatch event so global listener can update tabs
+                                document.dispatchEvent(new CustomEvent('pluginsUpdated', {
+                                    detail: { plugins: plugins }
+                                }));
+                                debugLog('[STUB] loadInstalledPluginsDirectly: Dispatched pluginsUpdated event');
+                                
+                                // Update tabs if we have the method - use $nextTick if available
+                                if (typeof this.updatePluginTabs === 'function') {
+                                    if (this.$nextTick && typeof this.$nextTick === 'function') {
+                                        this.$nextTick(() => {
+                                            this.updatePluginTabs();
+                                        });
+                                    } else {
+                                        // Fallback: wait a bit for DOM
+                                        setTimeout(() => {
+                                            this.updatePluginTabs();
+                                        }, 100);
+                                    }
+                                }
+                            } else {
+                                console.warn('[STUB] loadInstalledPluginsDirectly: Failed to load plugins:', data.message);
+                            }
+                        } catch (error) {
+                            console.error('[STUB] loadInstalledPluginsDirectly: Error loading plugins:', error);
+                        }
+                    },
+                    
+                    // Stub methods that will be replaced by full implementation
+                    loadTabContent: function(tab) {},
+                    loadInstalledPlugins: async function() {
+                        // Try to use global function if available, otherwise use direct loading
+                        if (typeof window.loadInstalledPlugins === 'function') {
+                            await window.loadInstalledPlugins();
+                            // Update tabs after loading (window.installedPlugins should be set by the global function)
+                            if (window.installedPlugins && Array.isArray(window.installedPlugins)) {
+                                this.installedPlugins = window.installedPlugins;
+                                this.updatePluginTabs();
+                            }
+                        } else if (typeof window.pluginManager?.loadInstalledPlugins === 'function') {
+                            await window.pluginManager.loadInstalledPlugins();
+                            // Update tabs after loading
+                            if (window.installedPlugins && Array.isArray(window.installedPlugins)) {
+                                this.installedPlugins = window.installedPlugins;
+                                this.updatePluginTabs();
+                            }
+                        } else {
+                            // Fallback to direct loading (which already calls updatePluginTabs)
+                            await this.loadInstalledPluginsDirectly();
+                        }
+                    },
+                    updatePluginTabs: function() {
+                        // Basic implementation for stub - will be replaced by full implementation
+                        // Debounce to prevent multiple rapid calls
+                        if (this._updatePluginTabsTimeout) {
+                            clearTimeout(this._updatePluginTabsTimeout);
+                        }
+                        
+                        this._updatePluginTabsTimeout = setTimeout(() => {
+                            debugLog('[STUB] updatePluginTabs: Executing with', this.installedPlugins?.length || 0, 'plugins');
+                            const pluginTabsRow = document.getElementById('plugin-tabs-row');
+                            const pluginTabsNav = pluginTabsRow?.querySelector('nav');
+                            if (!pluginTabsRow || !pluginTabsNav) {
+                                console.warn('[STUB] updatePluginTabs: Plugin tabs container not found');
+                                return;
+                            }
+                            if (!this.installedPlugins || this.installedPlugins.length === 0) {
+                                debugLog('[STUB] updatePluginTabs: No plugins to display');
+                                return;
+                            }
+                            
+                            // Check if tabs are already correct by comparing plugin IDs
+                            const existingTabs = pluginTabsNav.querySelectorAll('.plugin-tab');
+                            const existingIds = Array.from(existingTabs).map(tab => tab.getAttribute('data-plugin-id')).sort().join(',');
+                            const currentIds = this.installedPlugins.map(p => p.id).sort().join(',');
+                            
+                            if (existingIds === currentIds && existingTabs.length === this.installedPlugins.length) {
+                                debugLog('[STUB] updatePluginTabs: Tabs already match, skipping update');
+                                return;
+                            }
+                            
+                            // Clear existing plugin tabs (except Plugin Manager)
+                            existingTabs.forEach(tab => { tab.remove(); });
+                            debugLog('[STUB] updatePluginTabs: Cleared', existingTabs.length, 'existing tabs');
+                            
+                            // Add tabs for each installed plugin
+                            this.installedPlugins.forEach(plugin => {
+                                const tabButton = document.createElement('button');
+                                tabButton.type = 'button';
+                                tabButton.setAttribute('data-plugin-id', plugin.id);
+                                tabButton.className = `plugin-tab nav-tab ${this.activeTab === plugin.id ? 'nav-tab-active' : ''}`;
+                                tabButton.onclick = () => {
+                                    this.activeTab = plugin.id;
+                                    if (typeof this.updatePluginTabStates === 'function') {
+                                        this.updatePluginTabStates();
+                                    }
+                                };
+                                // DOM APIs instead of innerHTML: manifest
+                                // icon/name are semi-trusted input.
+                                const tabIcon = document.createElement('i');
+                                tabIcon.className = plugin.icon || 'fas fa-puzzle-piece';
+                                tabButton.textContent = '';
+                                tabButton.appendChild(tabIcon);
+                                tabButton.appendChild(document.createTextNode(plugin.name || plugin.id));
+                                pluginTabsNav.appendChild(tabButton);
+                            });
+                            debugLog('[STUB] updatePluginTabs: Added', this.installedPlugins.length, 'plugin tabs');
+                        }, 100);
+                    },
+                    showNotification: function(message, type) {},
+                    escapeHtml: function(text) { return String(text || '').replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;'); }
+                };
+            };
+        })();
diff --git a/web_interface/static/v3/js/app-shell.js b/web_interface/static/v3/js/app-shell.js
new file mode 100644
index 00000000..70aff559
--- /dev/null
+++ b/web_interface/static/v3/js/app-shell.js
@@ -0,0 +1,3047 @@
+/* global debugLog */
+// SSE wiring + full Alpine app() implementation and tab logic
+// Extracted from templates/v3/base.html so browsers cache it as a static asset.
+        // Assign to window so reconnectSSE() in app.js can reach them.
+        window.statsSource = new EventSource('/api/v3/stream/stats');
+        window.displaySource = new EventSource('/api/v3/stream/display');
+
+        window.statsSource.onmessage = function(event) {
+            const data = JSON.parse(event.data);
+            updateSystemStats(data);
+        };
+
+        window.displaySource.onmessage = function(event) {
+            const data = JSON.parse(event.data);
+            updateDisplayPreview(data);
+        };
+
+        function _setConnectionStatus(connected, reconnecting) {
+            const el = document.getElementById('connection-status');
+            if (!el) return;
+            if (connected) {
+                el.innerHTML = `
+                    <div class="w-2 h-2 bg-green-500 rounded-full"></div>
+                    <span class="text-gray-600">Connected</span>
+                `;
+            } else if (reconnecting) {
+                el.innerHTML = `
+                    <div class="w-2 h-2 bg-yellow-500 rounded-full animate-pulse"></div>
+                    <span class="text-gray-600">Reconnecting…</span>
+                `;
+            } else {
+                el.innerHTML = `
+                    <div class="w-2 h-2 bg-red-500 rounded-full"></div>
+                    <span class="text-gray-600" title="Connection lost — try refreshing the page">Disconnected</span>
+                `;
+            }
+        }
+
+        var _statsErrorCount = 0;
+
+        // Named on window so reconnectSSE() in app.js can reattach them after
+        // replacing the EventSource instances.
+        window._statsOpenHandler = function() {
+            _statsErrorCount = 0;
+            _setConnectionStatus(true, false);
+        };
+        window._statsErrorHandler = function() {
+            _statsErrorCount++;
+            // EventSource readyState 0 = CONNECTING (auto-retrying), 2 = CLOSED
+            var reconnecting = window.statsSource.readyState === EventSource.CONNECTING;
+            _setConnectionStatus(false, reconnecting && _statsErrorCount <= 3);
+        };
+        window._displayErrorHandler = function() {
+            // Display stream errors don't change the status badge but log to console
+            // so failures aren't completely silent.
+            console.warn('LEDMatrix: display preview stream error (readyState=' + window.displaySource.readyState + ')');
+        };
+
+        window.statsSource.addEventListener('open', window._statsOpenHandler);
+        window.statsSource.addEventListener('error', window._statsErrorHandler);
+        window.displaySource.addEventListener('error', window._displayErrorHandler);
+
+        // Reset any time the currently-active warning clears, so a future
+        // (new) occurrence shows the banner again even if this one was dismissed.
+        window._powerWarningDismissed = false;
+
+        window.dismissPowerWarningBanner = function() {
+            const banner = document.getElementById('power-warning-banner');
+            if (banner) banner.style.display = 'none';
+            window._powerWarningDismissed = true;
+        };
+
+        // Labels for whichever flags from _get_power_status() are set (pass
+        // suffix='_occurred' for the "happened earlier" variant), used to
+        // build accurate banner/tooltip text instead of hardcoding
+        // "under-voltage" for what may actually be throttling/freq-capping/
+        // thermal limiting.
+        function _activePowerConditionLabels(power, suffix) {
+            suffix = suffix || '_now';
+            const labels = [];
+            if (power['under_voltage' + suffix]) labels.push('under-voltage');
+            if (power['throttled' + suffix]) labels.push('throttling');
+            if (power['freq_capped' + suffix]) labels.push('CPU frequency capped');
+            if (power['soft_temp_limit' + suffix]) labels.push('soft thermal limit');
+            return labels;
+        }
+
+        function updatePowerStatus(power) {
+            const statEl = document.getElementById('power-stat');
+            const banner = document.getElementById('power-warning-banner');
+            const bannerText = document.getElementById('power-warning-banner-text');
+
+            if (!power) {
+                if (statEl) statEl.classList.add('hidden');
+                if (banner) {
+                    banner.style.display = 'none';
+                    // Let a future occurrence show the banner again rather
+                    // than leaving stale text/visibility from before this
+                    // (likely transient) missing-data tick.
+                    window._powerWarningDismissed = false;
+                }
+                return;
+            }
+
+            const activeNow = power.under_voltage_now || power.throttled_now ||
+                power.freq_capped_now || power.soft_temp_limit_now;
+            const occurredEarlier = power.under_voltage_occurred || power.throttled_occurred ||
+                power.freq_capped_occurred || power.soft_temp_limit_occurred;
+
+            if (statEl) {
+                statEl.classList.remove('text-red-600', 'text-yellow-600');
+                if (activeNow) {
+                    statEl.classList.remove('hidden');
+                    statEl.classList.add('flex', 'text-red-600');
+                    statEl.title = _activePowerConditionLabels(power).join('/') +
+                        ' detected right now — check your power supply and cooling';
+                } else if (occurredEarlier) {
+                    statEl.classList.remove('hidden');
+                    statEl.classList.add('flex', 'text-yellow-600');
+                    const occurredLabels = _activePowerConditionLabels(power, '_occurred');
+                    statEl.title = (occurredLabels.length ? occurredLabels.join('/') : 'An issue') +
+                        ' was detected earlier (currently OK)';
+                } else {
+                    statEl.classList.add('hidden');
+                }
+            }
+
+            if (banner) {
+                if (activeNow) {
+                    if (bannerText) {
+                        const labels = _activePowerConditionLabels(power);
+                        bannerText.textContent = (labels.length ? labels.join('/') : 'A power/thermal issue') +
+                            ' detected right now — the display may flicker or degrade. Check your power supply and cooling.';
+                    }
+                    if (!window._powerWarningDismissed) {
+                        banner.style.display = '';
+                    }
+                } else {
+                    banner.style.display = 'none';
+                    // Let a future occurrence show the banner again.
+                    window._powerWarningDismissed = false;
+                }
+            }
+        }
+
+        function updateSystemStats(data) {
+            // Update CPU in header
+            const cpuEl = document.getElementById('cpu-stat');
+            if (cpuEl && data.cpu_percent !== undefined) {
+                const spans = cpuEl.querySelectorAll('span');
+                if (spans.length > 0) spans[spans.length - 1].textContent = data.cpu_percent + '%';
+            }
+
+            // Update Memory in header
+            const memEl = document.getElementById('memory-stat');
+            if (memEl && data.memory_used_percent !== undefined) {
+                const spans = memEl.querySelectorAll('span');
+                if (spans.length > 0) spans[spans.length - 1].textContent = data.memory_used_percent + '%';
+            }
+
+            // Update Temperature in header
+            const tempEl = document.getElementById('temp-stat');
+            if (tempEl && data.cpu_temp !== undefined) {
+                const spans = tempEl.querySelectorAll('span');
+                if (spans.length > 0) spans[spans.length - 1].textContent = data.cpu_temp + '°C';
+            }
+
+            // Update Power (under-voltage / throttling) status in header + banner
+            updatePowerStatus(data.power);
+
+            // Update Overview tab stats (if visible)
+            const cpuUsageEl = document.getElementById('cpu-usage');
+            if (cpuUsageEl && data.cpu_percent !== undefined) {
+                cpuUsageEl.textContent = data.cpu_percent + '%';
+            }
+
+            const memUsageEl = document.getElementById('memory-usage');
+            if (memUsageEl && data.memory_used_percent !== undefined) {
+                memUsageEl.textContent = data.memory_used_percent + '%';
+            }
+
+            const cpuTempEl = document.getElementById('cpu-temp');
+            if (cpuTempEl && data.cpu_temp !== undefined) {
+                cpuTempEl.textContent = data.cpu_temp + '°C';
+            }
+
+            const displayStatusEl = document.getElementById('display-status');
+            if (displayStatusEl) {
+                displayStatusEl.textContent = data.service_active ? 'Active' : 'Inactive';
+                displayStatusEl.className = data.service_active ?
+                    'text-lg font-medium text-green-600' :
+                    'text-lg font-medium text-red-600';
+            }
+        }
+
+        window.__onDemandStore = window.__onDemandStore || {
+            loading: true,
+            state: {},
+            service: {},
+            error: null,
+            lastUpdated: null
+        };
+
+        document.addEventListener('alpine:init', () => {
+            // On-Demand state store
+            if (window.Alpine && !window.Alpine.store('onDemand')) {
+                window.Alpine.store('onDemand', {
+                    loading: window.__onDemandStore.loading,
+                    state: window.__onDemandStore.state,
+                    service: window.__onDemandStore.service,
+                    error: window.__onDemandStore.error,
+                    lastUpdated: window.__onDemandStore.lastUpdated
+                });
+            }
+            if (window.Alpine) {
+                window.__onDemandStore = window.Alpine.store('onDemand');
+            }
+            
+            // Plugin state store - centralized state management for plugins
+            // Used primarily by HTMX-loaded plugin config partials
+            if (window.Alpine && !window.Alpine.store('plugins')) {
+                window.Alpine.store('plugins', {
+                    // Track which plugin configs have been loaded
+                    loadedConfigs: {},
+                    
+                    // Mark a plugin config as loaded
+                    markLoaded(pluginId) {
+                        this.loadedConfigs[pluginId] = true;
+                    },
+                    
+                    // Check if a plugin config is loaded
+                    isLoaded(pluginId) {
+                        return !!this.loadedConfigs[pluginId];
+                    },
+                    
+                    // Refresh a plugin config tab via HTMX
+                    refreshConfig(pluginId) {
+                        const container = document.querySelector(`#plugin-config-${pluginId}`);
+                        if (container && window.htmx) {
+                            htmx.ajax('GET', `/v3/partials/plugin-config/${pluginId}`, {
+                                target: container,
+                                swap: 'innerHTML'
+                            });
+                        }
+                    }
+                });
+            }
+        });
+
+
+        // Alpine.js app function - full implementation
+        function app() {
+            // If Alpine is already initialized, get the current component and enhance it
+            let baseComponent = {};
+            if (window.Alpine) {
+                const appElement = document.querySelector('[x-data]');
+                if (appElement && appElement._x_dataStack && appElement._x_dataStack[0]) {
+                    baseComponent = appElement._x_dataStack[0];
+                }
+            }
+            
+            const fullImplementation = {
+                activeTab: (function() {
+                    // Auto-open WiFi tab when in AP mode (192.168.4.x)
+                    const isAPMode = window.location.hostname === '192.168.4.1' || 
+                                   window.location.hostname.startsWith('192.168.4.');
+                    return isAPMode ? 'wifi' : 'overview';
+                })(),
+                mobileNavOpen: false,
+                installedPlugins: [],
+
+                init() {
+                    // Prevent multiple initializations
+                    if (this._initialized) {
+                        return;
+                    }
+                    this._initialized = true;
+                    
+                    // Load plugins on page load so tabs are available on any page, regardless of active tab
+                    // First check if plugins are already in window.installedPlugins (from plugins_manager.js)
+                    if (typeof window.installedPlugins !== 'undefined' && Array.isArray(window.installedPlugins) && window.installedPlugins.length > 0) {
+                        this.installedPlugins = window.installedPlugins;
+                        debugLog('Initialized installedPlugins from global:', this.installedPlugins.length);
+                        // Ensure tabs are updated immediately
+                        this.$nextTick(() => {
+                            this.updatePluginTabs();
+                        });
+                    } else if (!this.installedPlugins || this.installedPlugins.length === 0) {
+                        // Load plugins asynchronously, but ensure tabs update when done
+                        this.loadInstalledPlugins().then(() => {
+                            // Ensure tabs are updated after loading
+                            this.$nextTick(() => {
+                                this.updatePluginTabs();
+                            });
+                        }).catch(err => {
+                            console.error('Error loading plugins in init:', err);
+                            // Still try to update tabs in case some plugins are available
+                            this.$nextTick(() => {
+                                this.updatePluginTabs();
+                            });
+                        });
+                    } else {
+                        // Plugins already loaded, just update tabs
+                        this.$nextTick(() => {
+                            this.updatePluginTabs();
+                        });
+                    }
+                    
+                    // Ensure content loads for the active tab
+                    this.$watch('activeTab', (newTab, oldTab) => {
+                        // Update plugin tab states when activeTab changes
+                        if (typeof this.updatePluginTabStates === 'function') {
+                            this.updatePluginTabStates();
+                        }
+                        // Screen readers announce the current tab (covers every
+                        // path that changes tabs: clicks, search deep links,
+                        // the getting-started checklist)
+                        if (typeof window.updateNavAriaCurrent === 'function') {
+                            window.updateNavAriaCurrent(newTab);
+                        }
+                        // Floating preview hides on Overview (full preview
+                        // there), reappears per its saved state elsewhere
+                        if (typeof window.updateFloatingPreviewVisibility === 'function') {
+                            window.updateFloatingPreviewVisibility(newTab);
+                        }
+                        // Trigger content load when tab changes
+                        this.$nextTick(() => {
+                            this.loadTabContent(newTab);
+                        });
+                    });
+
+                    // Load initial tab content
+                    this.$nextTick(() => {
+                        this.loadTabContent(this.activeTab);
+                        if (typeof window.updateNavAriaCurrent === 'function') {
+                            window.updateNavAriaCurrent(this.activeTab);
+                        }
+                    });
+
+                    // Listen for plugin updates from pluginManager
+                    document.addEventListener('pluginsUpdated', (event) => {
+                        debugLog('Received pluginsUpdated event:', event.detail.plugins.length, 'plugins');
+                        this.installedPlugins = event.detail.plugins;
+                        this.updatePluginTabs();
+                    });
+
+                    // Also listen for direct window.installedPlugins changes
+                    // Store the actual value in a private property to avoid infinite loops
+                    let _installedPluginsValue = this.installedPlugins || [];
+                    
+                    // Only define the property if it doesn't already exist or if it's configurable
+                    const existingDescriptor = Object.getOwnPropertyDescriptor(window, 'installedPlugins');
+                    if (!existingDescriptor || existingDescriptor.configurable) {
+                        // Delete existing property if it exists and is configurable
+                        if (existingDescriptor) {
+                            delete window.installedPlugins;
+                        }
+                        
+                        Object.defineProperty(window, 'installedPlugins', {
+                            set: (value) => {
+                                const newPlugins = value || [];
+                                const oldIds = (_installedPluginsValue || []).map(p => p.id).sort().join(',');
+                                const newIds = newPlugins.map(p => p.id).sort().join(',');
+
+                                // Always take the new list — same-ID updates
+                                // still carry changed metadata/enabled state.
+                                _installedPluginsValue = newPlugins;
+                                this.installedPlugins = newPlugins;
+                                // Only rebuild the tab row when the ID set
+                                // actually changed.
+                                if (oldIds !== newIds) {
+                                    debugLog('window.installedPlugins changed:', newPlugins.length, 'plugins');
+                                    this.updatePluginTabs();
+                                }
+                            },
+                            get: () => _installedPluginsValue,
+                            configurable: true  // Allow redefinition if needed
+                        });
+                    } else {
+                        // Property already exists and is not configurable, just update the value
+                        if (typeof window.installedPlugins !== 'undefined') {
+                            _installedPluginsValue = window.installedPlugins;
+                        }
+                    }
+
+                },
+
+                loadTabContent(tab) {
+                    const contentEl = document.getElementById(tab + '-content');
+                    // data-loaded: already fetched. data-loading: a fetch is queued or in
+                    // flight. Both guard against re-entry so a panel loads exactly once, even
+                    // if the tab is reopened before an in-progress (or polling) load settles.
+                    if (!contentEl || contentEl.hasAttribute('data-loaded') || contentEl.hasAttribute('data-loading')) return;
+                    const url = contentEl.getAttribute('hx-get');
+                    if (!url) return;
+
+                    contentEl.setAttribute('data-loading', 'true');
+
+                    // htmx.ajax issues the request and swaps the response into the panel
+                    // directly, so it works even before htmx has wired up the element's
+                    // hx-trigger listeners. data-loaded is stamped on success so the panel
+                    // loads once; the activeTab check drops loads for a tab the user navigated
+                    // away from while htmx was still loading (avoids fetching hidden panels).
+                    const swap = contentEl.getAttribute('hx-swap') || 'innerHTML';
+                    const load = () => {
+                        if (this.activeTab !== tab || contentEl.hasAttribute('data-loaded')) {
+                            contentEl.removeAttribute('data-loading');
+                            return;
+                        }
+                        return htmx.ajax('GET', url, { target: contentEl, swap: swap })
+                            .then(() => contentEl.setAttribute('data-loaded', 'true'))
+                            .catch(() => {}) // leave unstamped on failure so it can retry
+                            .finally(() => contentEl.removeAttribute('data-loading'));
+                    };
+
+                    if (typeof htmx !== 'undefined') {
+                        load();
+                        return;
+                    }
+
+                    // htmx is loaded from a CDN and may not be ready yet. Poll until it is,
+                    // then load; if it never arrives, fall back to a direct fetch.
+                    let tries = 0;
+                    const timer = setInterval(() => {
+                        if (typeof htmx !== 'undefined') {
+                            clearInterval(timer);
+                            load();
+                        } else if (++tries > 100) { // ~10s
+                            clearInterval(timer);
+                            contentEl.removeAttribute('data-loading');
+                            if (tab === 'overview' && typeof loadOverviewDirect === 'function') loadOverviewDirect();
+                            else if (tab === 'wifi' && typeof loadWifiDirect === 'function') loadWifiDirect();
+                            else if (tab === 'plugins' && typeof loadPluginsDirect === 'function') loadPluginsDirect();
+                            else if (tab === 'tools') {
+                                fetch('/v3/partials/tools')
+                                    .then(r => {
+                                        if (!r.ok) throw new Error(r.status + ' ' + r.statusText);
+                                        return r.text();
+                                    })
+                                    .then(html => {
+                                        contentEl.innerHTML = html;
+                                        contentEl.setAttribute('data-loaded', 'true');
+                                        if (window.Alpine) window.Alpine.initTree(contentEl);
+                                    })
+                                    .catch(err => {
+                                        console.error('Failed to load tools content:', err);
+                                        contentEl.innerHTML = '<div class="bg-red-50 border border-red-200 rounded-lg p-4"><p class="text-red-800">Failed to load Tools. Please refresh the page.</p></div>';
+                                    });
+                            }
+                        }
+                    }, 100);
+                },
+
+                async loadInstalledPlugins() {
+                    // If pluginManager exists (plugins.html is loaded), delegate to it
+                    if (window.pluginManager) {
+                        debugLog('[FULL] Delegating plugin loading to pluginManager...');
+                        await window.pluginManager.loadInstalledPlugins();
+                        // pluginManager should set window.installedPlugins, so update our component
+                        if (window.installedPlugins && Array.isArray(window.installedPlugins)) {
+                            this.installedPlugins = window.installedPlugins;
+                            debugLog('[FULL] Updated component plugins from window.installedPlugins:', this.installedPlugins.length);
+                        }
+                        this.updatePluginTabs();
+                        return;
+                    }
+
+                    // Otherwise, load plugins directly (fallback for when plugins.html isn't loaded)
+                    try {
+                        debugLog('[FULL] Loading installed plugins directly...');
+                        const data = await getInstalledPluginsSafe();
+
+                        if (data.status === 'success') {
+                            this.installedPlugins = data.data.plugins || [];
+                            // Also update window.installedPlugins for consistency
+                            window.installedPlugins = this.installedPlugins;
+                            debugLog(`[FULL] Loaded ${this.installedPlugins.length} plugins:`, this.installedPlugins.map(p => p.id));
+                            
+                            // Debug: Log enabled status for each plugin
+                            this.installedPlugins.forEach(plugin => {
+                                debugLog(`[DEBUG Alpine] Plugin ${plugin.id}: enabled=${plugin.enabled} (type: ${typeof plugin.enabled})`);
+                            });
+                            
+                            this.updatePluginTabs();
+                        } else {
+                            console.error('[FULL] Failed to load plugins:', data.message);
+                        }
+                    } catch (error) {
+                        console.error('[FULL] Error loading installed plugins:', error);
+                    }
+                },
+
+                updatePluginTabs(retryCount = 0) {
+                    debugLog('[FULL] updatePluginTabs called (retryCount:', retryCount, ')');
+                    const maxRetries = 5;
+
+                    // Debounce: Clear any pending update
+                    if (this._updatePluginTabsTimeout) {
+                        clearTimeout(this._updatePluginTabsTimeout);
+                    }
+                    
+                    // For first call or retries, execute immediately to ensure tabs appear quickly
+                    if (retryCount === 0) {
+                        // First call - execute immediately, then debounce subsequent calls
+                        this._doUpdatePluginTabs(retryCount);
+                    } else {
+                        // Retry - execute immediately
+                        this._doUpdatePluginTabs(retryCount);
+                    }
+                },
+                
+                _doUpdatePluginTabs(retryCount = 0) {
+                    const maxRetries = 5;
+
+                    // Use component's installedPlugins first (most up-to-date), then global, then empty array
+                    const pluginsToShow = (this.installedPlugins && this.installedPlugins.length > 0) 
+                        ? this.installedPlugins 
+                        : (window.installedPlugins || []);
+                    
+                    debugLog('[FULL] _doUpdatePluginTabs called with:', pluginsToShow.length, 'plugins (attempt', retryCount + 1, ')');
+                    debugLog('[FULL] Plugin sources:', {
+                        componentPlugins: this.installedPlugins?.length || 0,
+                        windowPlugins: window.installedPlugins?.length || 0,
+                        using: pluginsToShow.length > 0 ? (this.installedPlugins?.length > 0 ? 'component' : 'window') : 'none'
+                    });
+                    
+                    // Check if plugin list actually changed by comparing IDs
+                    const currentPluginIds = pluginsToShow.map(p => p.id).sort().join(',');
+                    const lastRenderedIds = (this._lastRenderedPluginIds || '');
+                    
+                    // Only skip if we have plugins and they match (don't skip if both are empty)
+                    if (currentPluginIds === lastRenderedIds && retryCount === 0 && currentPluginIds.length > 0) {
+                        // Plugin list hasn't changed, skip update
+                        debugLog('[FULL] Plugin list unchanged, skipping update');
+                        return;
+                    }
+                    
+                    // If we have no plugins and haven't rendered anything yet, still try to render (might be first load)
+                    if (pluginsToShow.length === 0 && retryCount === 0) {
+                        debugLog('[FULL] No plugins to show, but will retry in case they load...');
+                        if (retryCount < maxRetries) {
+                            setTimeout(() => {
+                                this._doUpdatePluginTabs(retryCount + 1);
+                            }, 500);
+                        }
+                        return;
+                    }
+                    
+                    // Store the current plugin IDs for next comparison
+                    this._lastRenderedPluginIds = currentPluginIds;
+
+                    const pluginTabsRow = document.getElementById('plugin-tabs-row');
+                    const pluginTabsNav = pluginTabsRow?.querySelector('nav');
+
+                    debugLog('[FULL] Plugin tabs elements:', {
+                        pluginTabsRow: !!pluginTabsRow,
+                        pluginTabsNav: !!pluginTabsNav,
+                        bodyExists: !!document.body,
+                        installedPlugins: pluginsToShow.length,
+                        pluginIds: pluginsToShow.map(p => p.id)
+                    });
+
+                    if (!pluginTabsRow || !pluginTabsNav) {
+                        if (retryCount < maxRetries) {
+                            console.warn('[FULL] Plugin tabs container not found, retrying in 500ms... (attempt', retryCount + 1, 'of', maxRetries, ')');
+                            setTimeout(() => {
+                                this._doUpdatePluginTabs(retryCount + 1);
+                            }, 500);
+                        } else {
+                            console.error('[FULL] Plugin tabs container not found after maximum retries. Elements:', {
+                                pluginTabsRow: document.getElementById('plugin-tabs-row'),
+                                pluginTabsNav: document.getElementById('plugin-tabs-row')?.querySelector('nav'),
+                                allNavs: document.querySelectorAll('nav').length
+                            });
+                        }
+                        return;
+                    }
+
+                    debugLog(`[FULL] Updating plugin tabs for ${pluginsToShow.length} plugins`);
+
+                    // Always show the plugin tabs row (Plugin Manager should always be available)
+                    debugLog('[FULL] Ensuring plugin tabs row is visible');
+                    pluginTabsRow.style.display = 'block';
+
+                    // Clear existing plugin tabs (except the Plugin Manager tab)
+                    const existingTabs = pluginTabsNav.querySelectorAll('.plugin-tab');
+                    debugLog(`[FULL] Removing ${existingTabs.length} existing plugin tabs`);
+                    existingTabs.forEach(tab => tab.remove());
+
+                    // Add tabs for each installed plugin
+                    debugLog('[FULL] Adding tabs for plugins:', pluginsToShow.map(p => p.id));
+                    pluginsToShow.forEach(plugin => {
+                        const tabButton = document.createElement('button');
+                        tabButton.type = 'button';
+                        tabButton.setAttribute('data-plugin-id', plugin.id);
+                        tabButton.className = `plugin-tab nav-tab ${this.activeTab === plugin.id ? 'nav-tab-active' : ''}`;
+                        tabButton.onclick = () => {
+                            this.activeTab = plugin.id;
+                            if (typeof this.updatePluginTabStates === 'function') {
+                                this.updatePluginTabStates();
+                            }
+                        };
+                        // Build the <i class="..."> + label as DOM nodes so a
+                        // hostile plugin.icon (e.g. containing a quote) can't
+                        // break out of the attribute. escapeHtml only escapes
+                        // <, >, &, not ", so attribute-context interpolation
+                        // would be unsafe.
+                        const iconEl = document.createElement('i');
+                        iconEl.className = plugin.icon || 'fas fa-puzzle-piece';
+                        const labelNode = document.createTextNode(plugin.name || plugin.id);
+                        tabButton.replaceChildren(iconEl, labelNode);
+
+                        // Insert before the closing </nav> tag
+                        pluginTabsNav.appendChild(tabButton);
+                        debugLog('[FULL] Added tab for plugin:', plugin.id);
+                    });
+
+                    debugLog('[FULL] Plugin tabs update completed. Total tabs:', pluginTabsNav.querySelectorAll('.plugin-tab').length);
+                },
+
+                updatePluginTabStates() {
+                    // Update active state of all plugin tabs when activeTab changes
+                    const pluginTabsNav = document.getElementById('plugin-tabs-row')?.querySelector('nav');
+                    if (!pluginTabsNav) return;
+                    
+                    const pluginTabs = pluginTabsNav.querySelectorAll('.plugin-tab');
+                    pluginTabs.forEach(tab => {
+                        const pluginId = tab.getAttribute('data-plugin-id');
+                        if (pluginId && this.activeTab === pluginId) {
+                            tab.classList.add('nav-tab-active');
+                        } else {
+                            tab.classList.remove('nav-tab-active');
+                        }
+                    });
+                },
+
+                showNotification(message, type = 'info') {
+                    // Use global notification widget
+                    if (typeof window.showNotification === 'function') {
+                        window.showNotification(message, type);
+                    } else {
+                        debugLog(`[${type.toUpperCase()}]`, message);
+                    }
+                },
+
+                escapeHtml(text) {
+                    const div = document.createElement('div');
+                    div.textContent = text;
+                    return div.innerHTML;
+                },
+
+                async refreshPlugins() {
+                    await this.loadInstalledPlugins();
+                    await this.searchPluginStore();
+                    this.showNotification('Plugin list refreshed', 'success');
+                },
+
+
+
+                async loadPluginConfig(pluginId) {
+                    debugLog('Loading config for plugin:', pluginId);
+                    this.loading = true;
+
+                    try {
+                        // Load config, schema, and installed plugins (for web_ui_actions) in parallel
+                        // Use batched API if available for better performance
+                        let configData, schemaData, pluginsData;
+                        
+                        if (window.PluginAPI && window.PluginAPI.batch) {
+                            // PluginAPI.batch returns already-parsed JSON objects
+                            try {
+                                const results = await window.PluginAPI.batch([
+                                    {endpoint: `/plugins/config?plugin_id=${pluginId}`, method: 'GET'},
+                                    {endpoint: `/plugins/schema?plugin_id=${pluginId}`, method: 'GET'},
+                                    {endpoint: '/plugins/installed', method: 'GET'}
+                                ]);
+                                [configData, schemaData, pluginsData] = results;
+                            } catch (batchError) {
+                                console.error('Batch API request failed, falling back to individual requests:', batchError);
+                                // Fall back to individual requests
+                                const [configResponse, schemaResponse, pluginsResponse] = await Promise.all([
+                                    fetch(`/api/v3/plugins/config?plugin_id=${pluginId}`).then(r => r.json()).catch(e => ({ status: 'error', message: e.message })),
+                                    fetch(`/api/v3/plugins/schema?plugin_id=${pluginId}`).then(r => r.json()).catch(e => ({ status: 'error', message: e.message })),
+                                    fetch(`/api/v3/plugins/installed`).then(r => r.json()).catch(e => ({ status: 'error', message: e.message }))
+                                ]);
+                                configData = configResponse;
+                                schemaData = schemaResponse;
+                                pluginsData = pluginsResponse;
+                            }
+                        } else {
+                            // Direct fetch returns Response objects that need parsing
+                            const [configResponse, schemaResponse, pluginsResponse] = await Promise.all([
+                                fetch(`/api/v3/plugins/config?plugin_id=${pluginId}`).then(r => r.json()).catch(e => ({ status: 'error', message: e.message })),
+                                fetch(`/api/v3/plugins/schema?plugin_id=${pluginId}`).then(r => r.json()).catch(e => ({ status: 'error', message: e.message })),
+                                fetch(`/api/v3/plugins/installed`).then(r => r.json()).catch(e => ({ status: 'error', message: e.message }))
+                            ]);
+                            configData = configResponse;
+                            schemaData = schemaResponse;
+                            pluginsData = pluginsResponse;
+                        }
+
+                        if (configData && configData.status === 'success') {
+                            this.config = configData.data;
+                        } else {
+                            console.warn('Config API returned non-success status:', configData);
+                            // Set defaults if config failed to load
+                            this.config = { enabled: true, display_duration: 30 };
+                        }
+
+                        if (schemaData && schemaData.status === 'success') {
+                            this.schema = schemaData.data.schema || {};
+                        } else {
+                            console.warn('Schema API returned non-success status:', schemaData);
+                            // Set empty schema as fallback
+                            this.schema = {};
+                        }
+
+                        // Extract web_ui_actions from installed plugins and update plugin data
+                        if (pluginsData && pluginsData.status === 'success' && pluginsData.data && pluginsData.data.plugins) {
+                            // Update window.installedPlugins with fresh data (includes commit info)
+                            // The setter will check if data actually changed before updating tabs
+                            window.installedPlugins = pluginsData.data.plugins;
+                            // Update Alpine.js app data
+                            this.installedPlugins = pluginsData.data.plugins;
+                            
+                            const pluginInfo = pluginsData.data.plugins.find(p => p.id === pluginId);
+                            this.webUiActions = pluginInfo ? (pluginInfo.web_ui_actions || []) : [];
+                            debugLog('[DEBUG] Loaded web_ui_actions for', pluginId, ':', this.webUiActions.length, 'actions');
+                            debugLog('[DEBUG] Updated plugin data with commit info:', pluginInfo ? {
+                                last_commit: pluginInfo.last_commit,
+                                branch: pluginInfo.branch,
+                                last_updated: pluginInfo.last_updated
+                            } : 'plugin not found');
+                        } else {
+                            console.warn('Plugins API returned non-success status:', pluginsData);
+                            this.webUiActions = [];
+                        }
+
+                        debugLog('Loaded config, schema, and actions for', pluginId);
+                    } catch (error) {
+                        console.error('Error loading plugin config:', error);
+                        this.config = { enabled: true, display_duration: 30 };
+                        this.schema = {};
+                        this.webUiActions = [];
+                    } finally {
+                        this.loading = false;
+                    }
+                },
+
+                generateConfigForm(pluginId, config, schema, webUiActions = []) {
+                    // Safety check - if schema/config not ready, return empty
+                    if (!pluginId || !config) {
+                        return '<div class="text-gray-500">Loading configuration...</div>';
+                    }
+                    
+                    // Only log once per plugin to avoid spam (Alpine.js may call this multiple times during rendering)
+                    if (!this._configFormLogged || this._configFormLogged !== pluginId) {
+                        debugLog('[DEBUG] generateConfigForm called for', pluginId, 'with', webUiActions?.length || 0, 'actions');
+                        // Debug: Check if image_config.images has x-widget in schema
+                        if (schema && schema.properties && schema.properties.image_config) {
+                            const imgConfig = schema.properties.image_config;
+                            if (imgConfig.properties && imgConfig.properties.images) {
+                                const imagesProp = imgConfig.properties.images;
+                                debugLog('[DEBUG] Schema check - image_config.images:', {
+                                    type: imagesProp.type,
+                                    'x-widget': imagesProp['x-widget'],
+                                    'has x-widget': 'x-widget' in imagesProp,
+                                    keys: Object.keys(imagesProp)
+                                });
+                            }
+                        }
+                        this._configFormLogged = pluginId;
+                    }
+                    if (!schema || !schema.properties) {
+                        return this.generateSimpleConfigForm(config, webUiActions, pluginId);
+                    }
+
+                    // Helper function to get schema property by full key path
+                    const getSchemaProperty = (schemaObj, keyPath) => {
+                        if (!schemaObj || !schemaObj.properties) return null;
+                        const keys = keyPath.split('.');
+                        let current = schemaObj.properties;
+                        for (let i = 0; i < keys.length; i++) {
+                            const k = keys[i];
+                            if (!current || !current[k]) {
+                                return null;
+                            }
+                            
+                            const prop = current[k];
+                            // If this is the last key, return the property
+                            if (i === keys.length - 1) {
+                                return prop;
+                            }
+                            
+                            // If this property has nested properties, navigate deeper
+                            if (prop && typeof prop === 'object' && prop.properties) {
+                                current = prop.properties;
+                            } else {
+                                // Can't navigate deeper
+                                return null;
+                            }
+                        }
+                        return null;
+                    };
+                    
+                    const generateFieldHtml = (key, prop, value, prefix = '') => {
+                        const fullKey = prefix ? `${prefix}.${key}` : key;
+                        const label = prop.title || key.replace(/_/g, ' ').replace(/\b\w/g, l => l.toUpperCase());
+                        const description = prop.description || '';
+                        let html = '';
+                        
+                        // Debug: Log property structure for arrays to help diagnose file-upload widget issues
+                        if (prop.type === 'array') {
+                            // Also check schema directly as fallback
+                            const schemaProp = getSchemaProperty(schema, fullKey);
+                            const xWidgetFromSchema = schemaProp ? (schemaProp['x-widget'] || schemaProp['x_widget']) : null;
+                            
+                            debugLog('[DEBUG generateFieldHtml] Array property:', fullKey, {
+                                'prop.x-widget': prop['x-widget'],
+                                'prop.x_widget': prop['x_widget'],
+                                'schema.x-widget': xWidgetFromSchema,
+                                'hasOwnProperty(x-widget)': prop.hasOwnProperty('x-widget'),
+                                'x-widget in prop': 'x-widget' in prop,
+                                'all prop keys': Object.keys(prop),
+                                'schemaProp keys': schemaProp ? Object.keys(schemaProp) : 'null'
+                            });
+                        }
+
+                        // Handle nested objects
+                        if (prop.type === 'object' && prop.properties) {
+                            const sectionId = `section-${fullKey.replace(/\./g, '-')}`;
+                            const nestedConfig = value || {};
+                            const sectionLabel = prop.title || key.replace(/_/g, ' ').replace(/\b\w/g, l => l.toUpperCase());
+                            // Calculate nesting depth for better spacing
+                            const nestingDepth = (fullKey.match(/\./g) || []).length;
+                            const marginClass = nestingDepth > 1 ? 'mb-6' : 'mb-4';
+                            
+                            html += `
+                                <div class="nested-section border border-gray-300 rounded-lg ${marginClass}">
+                                    <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"
+                                            onclick="toggleNestedSection('${sectionId}', event); return false;">
+                                        <div class="flex-1">
+                                            <h4 class="font-semibold text-gray-900">${sectionLabel}</h4>
+                                            ${description ? `<p class="text-sm text-gray-600 mt-1">${description}</p>` : ''}
+                                        </div>
+                                        <i id="${sectionId}-icon" class="fas fa-chevron-right text-gray-500 transition-transform"></i>
+                                    </button>
+                                    <div id="${sectionId}" class="nested-content collapsed bg-gray-50 px-4 py-4 space-y-3" style="max-height: 0; display: none;">
+                            `;
+                            
+                            // Recursively generate fields for nested properties
+                            // Get ordered properties if x-propertyOrder is defined
+                            let nestedPropertyEntries = Object.entries(prop.properties);
+                            if (prop['x-propertyOrder'] && Array.isArray(prop['x-propertyOrder'])) {
+                                const order = prop['x-propertyOrder'];
+                                const orderedEntries = [];
+                                const unorderedEntries = [];
+                                
+                                // Separate ordered and unordered properties
+                                nestedPropertyEntries.forEach(([nestedKey, nestedProp]) => {
+                                    const index = order.indexOf(nestedKey);
+                                    if (index !== -1) {
+                                        orderedEntries[index] = [nestedKey, nestedProp];
+                                    } else {
+                                        unorderedEntries.push([nestedKey, nestedProp]);
+                                    }
+                                });
+                                
+                                // Combine ordered entries (filter out undefined from sparse array) with unordered entries
+                                nestedPropertyEntries = orderedEntries.filter(entry => entry !== undefined).concat(unorderedEntries);
+                            }
+                            
+                            nestedPropertyEntries.forEach(([nestedKey, nestedProp]) => {
+                                // Use config value if it exists and is not null (including false), otherwise use schema default
+                                // Check if key exists in config and value is not null/undefined
+                                const hasValue = nestedKey in nestedConfig && nestedConfig[nestedKey] !== null && nestedConfig[nestedKey] !== undefined;
+                                // For nested objects, if the value is an empty object, still use it (don't fall back to default)
+                                const isNestedObject = nestedProp.type === 'object' && nestedProp.properties;
+                                const nestedValue = hasValue ? nestedConfig[nestedKey] : 
+                                    (nestedProp.default !== undefined ? nestedProp.default : 
+                                     (isNestedObject ? {} : (nestedProp.type === 'array' ? [] : (nestedProp.type === 'boolean' ? false : ''))));
+                                
+                                // Debug logging for file-upload widgets
+                                if (nestedProp.type === 'array' && (nestedProp['x-widget'] === 'file-upload' || nestedProp['x_widget'] === 'file-upload')) {
+                                    debugLog('[DEBUG] Found file-upload widget in nested property:', nestedKey, 'fullKey:', fullKey + '.' + nestedKey, 'prop:', nestedProp);
+                                }
+                                
+                                html += generateFieldHtml(nestedKey, nestedProp, nestedValue, fullKey);
+                            });
+                            
+                            html += `
+                                    </div>
+                                </div>
+                            `;
+                            
+                            // Add extra spacing after nested sections to prevent overlap with next section
+                            if (nestingDepth > 0) {
+                                html += `<div class="mb-2"></div>`;
+                            }
+                            
+                            return html;
+                        }
+
+                        // Regular (non-nested) field
+                        html += `<div class="form-group">`;
+                        html += `<label class="block text-sm font-medium text-gray-700 mb-1">${label}</label>`;
+
+                        if (description) {
+                            html += `<p class="text-sm text-gray-600 mb-2">${description}</p>`;
+                        }
+
+                        // Generate appropriate input based on type
+                        if (prop.type === 'boolean') {
+                            html += `<label class="flex items-center">`;
+                            html += `<input type="checkbox" name="${fullKey}" ${value ? 'checked' : ''} class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded">`;
+                            html += `<span class="ml-2 text-sm">Enabled</span>`;
+                            html += `</label>`;
+                        } else if (prop.type === 'number' || prop.type === 'integer' || 
+                                   (Array.isArray(prop.type) && (prop.type.includes('number') || prop.type.includes('integer')))) {
+                            // Handle union types like ["integer", "null"]
+                            const isUnionType = Array.isArray(prop.type);
+                            const allowsNull = isUnionType && prop.type.includes('null');
+                            const isInteger = prop.type === 'integer' || (isUnionType && prop.type.includes('integer'));
+                            const isNumber = prop.type === 'number' || (isUnionType && prop.type.includes('number'));
+                            const min = prop.minimum !== undefined ? `min="${prop.minimum}"` : '';
+                            const max = prop.maximum !== undefined ? `max="${prop.maximum}"` : '';
+                            const step = isInteger ? 'step="1"' : 'step="any"';
+                            
+                            // For union types with null, don't show default if value is null (leave empty)
+                            // This allows users to explicitly set null by leaving it empty
+                            let fieldValue = '';
+                            if (value !== undefined && value !== null) {
+                                fieldValue = value;
+                            } else if (!allowsNull && prop.default !== undefined) {
+                                // Only use default if null is not allowed
+                                fieldValue = prop.default;
+                            }
+                            
+                            // Ensure value respects min/max constraints
+                            if (fieldValue !== '' && fieldValue !== undefined && fieldValue !== null) {
+                                const numValue = typeof fieldValue === 'string' ? parseFloat(fieldValue) : fieldValue;
+                                if (!isNaN(numValue)) {
+                                    // Clamp value to min/max if constraints exist
+                                    if (prop.minimum !== undefined && numValue < prop.minimum) {
+                                        fieldValue = prop.minimum;
+                                    } else if (prop.maximum !== undefined && numValue > prop.maximum) {
+                                        fieldValue = prop.maximum;
+                                    } else {
+                                        fieldValue = numValue;
+                                    }
+                                }
+                            }
+                            
+                            // Add placeholder/help text for null-able fields
+                            const placeholder = allowsNull ? 'Leave empty to use current time (random)' : '';
+                            const helpText = allowsNull && description && description.includes('null') ? 
+                                `<p class="text-xs text-gray-500 mt-1">${description}</p>` : '';
+                            
+                            html += `<input type="number" name="${fullKey}" value="${fieldValue}" ${min} ${max} ${step} placeholder="${placeholder}" class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm">`;
+                            if (helpText) {
+                                html += helpText;
+                            }
+                        } else if (prop.type === 'array') {
+                            // AGGRESSIVE file upload widget detection
+                            // For 'images' field in static-image plugin, always check schema directly
+                            let isFileUpload = false;
+                            let uploadConfig = {};
+                            
+                            // Direct check: if this is the 'images' field and schema has it with x-widget
+                            if (fullKey === 'images' && schema && schema.properties && schema.properties.images) {
+                                const imagesSchema = schema.properties.images;
+                                if (imagesSchema['x-widget'] === 'file-upload' || imagesSchema['x_widget'] === 'file-upload') {
+                                    isFileUpload = true;
+                                    uploadConfig = imagesSchema['x-upload-config'] || imagesSchema['x_upload_config'] || {};
+                                    debugLog('[DEBUG] ✅ Direct detection: images field has file-upload widget', uploadConfig);
+                                }
+                            }
+                            
+                            // Fallback: check prop object (should have x-widget if schema loaded correctly)
+                            if (!isFileUpload) {
+                                const xWidgetFromProp = prop['x-widget'] || prop['x_widget'] || prop.xWidget;
+                                if (xWidgetFromProp === 'file-upload') {
+                                    isFileUpload = true;
+                                    uploadConfig = prop['x-upload-config'] || prop['x_upload_config'] || {};
+                                    debugLog('[DEBUG] ✅ Detection via prop object');
+                                }
+                            }
+                            
+                            // Fallback: schema property lookup
+                            if (!isFileUpload) {
+                                let schemaProp = getSchemaProperty(schema, fullKey);
+                                if (!schemaProp && fullKey === 'images' && schema && schema.properties && schema.properties.images) {
+                                    schemaProp = schema.properties.images;
+                                }
+                                const xWidgetFromSchema = schemaProp ? (schemaProp['x-widget'] || schemaProp['x_widget']) : null;
+                                if (xWidgetFromSchema === 'file-upload') {
+                                    isFileUpload = true;
+                                    uploadConfig = schemaProp['x-upload-config'] || schemaProp['x_upload_config'] || {};
+                                    debugLog('[DEBUG] ✅ Detection via schema lookup');
+                                }
+                            }
+                            
+                            // Debug logging for ALL array fields to diagnose
+                            debugLog('[DEBUG] Array field check:', fullKey, {
+                                'isFileUpload': isFileUpload,
+                                'prop keys': Object.keys(prop),
+                                'prop.x-widget': prop['x-widget'],
+                                'schema.properties.images exists': !!(schema && schema.properties && schema.properties.images),
+                                'schema.properties.images.x-widget': (schema && schema.properties && schema.properties.images) ? schema.properties.images['x-widget'] : null,
+                                'uploadConfig': uploadConfig
+                            });
+                            
+                            if (isFileUpload) {
+                                debugLog('[DEBUG] ✅ Rendering file-upload widget for', fullKey, 'with config:', uploadConfig);
+                                // Use the file upload widget from plugins.html
+                                // We'll need to call a function that exists in the global scope
+                                const maxFiles = uploadConfig.max_files || 10;
+                                const allowedTypes = uploadConfig.allowed_types || ['image/png', 'image/jpeg', 'image/bmp', 'image/gif'];
+                                const maxSizeMB = uploadConfig.max_size_mb || 5;
+                                
+                                const currentImages = Array.isArray(value) ? value : [];
+                                const fieldId = fullKey.replace(/\./g, '_');
+                                const safePluginId = (uploadConfig.plugin_id || pluginId || 'static-image').toString().replace(/[^a-zA-Z0-9_-]/g, '_');
+                                
+                                html += `
+                                    <div id="${fieldId}_upload_widget" class="mt-1">
+                                        <!-- File Upload Drop Zone -->
+                                        <div id="${fieldId}_drop_zone" 
+                                             class="border-2 border-dashed border-gray-300 rounded-lg p-6 text-center hover:border-blue-400 transition-colors cursor-pointer"
+                                             ondrop="window.handleFileDrop(event, this.dataset.fieldId)" 
+                                             ondragover="event.preventDefault()" 
+                                             data-field-id="${fieldId}"
+                                             onclick="document.getElementById(this.dataset.fieldId + '_file_input').click()">
+                                            <input type="file" 
+                                                   id="${fieldId}_file_input" 
+                                                   multiple 
+                                                   accept="${allowedTypes.join(',')}"
+                                                   style="display: none;"
+                                                   data-field-id="${fieldId}"
+                                                   onchange="window.handleFileSelect(event, this.dataset.fieldId)">
+                                            <i class="fas fa-cloud-upload-alt text-3xl text-gray-400 mb-2"></i>
+                                            <p class="text-sm text-gray-600">Drag and drop images here or click to browse</p>
+                                            <p class="text-xs text-gray-500 mt-1">Max ${maxFiles} files, ${maxSizeMB}MB each (PNG, JPG, GIF, BMP)</p>
+                                        </div>
+                                        
+                                        <!-- Uploaded Images List -->
+                                        <div id="${fieldId}_image_list" class="mt-4 space-y-2">
+                                            ${currentImages.map((img, idx) => {
+                                                const imgSchedule = img.schedule || {};
+                                                const hasSchedule = imgSchedule.enabled && imgSchedule.mode && imgSchedule.mode !== 'always';
+                                                let scheduleSummary = 'Always shown';
+                                                if (hasSchedule && window.getScheduleSummary) {
+                                                    try {
+                                                        scheduleSummary = window.getScheduleSummary(imgSchedule) || 'Scheduled';
+                                                    } catch (e) {
+                                                        scheduleSummary = 'Scheduled';
+                                                    }
+                                                } else if (hasSchedule) {
+                                                    scheduleSummary = 'Scheduled';
+                                                }
+                                                // Escape the summary for HTML
+                                                scheduleSummary = String(scheduleSummary).replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;');
+                                                
+                                                return `
+                                                <div id="img_${(img.id || idx).toString().replace(/[^a-zA-Z0-9_-]/g, '_')}" class="bg-gray-50 p-3 rounded-lg border border-gray-200">
+                                                    <div class="flex items-center justify-between mb-2">
+                                                        <div class="flex items-center space-x-3 flex-1">
+                                                            <img src="/${(img.path || '').replace(/&/g, '&amp;').replace(/"/g, '&quot;')}" 
+                                                                 alt="${(img.filename || '').replace(/"/g, '&quot;')}" 
+                                                                 class="w-16 h-16 object-cover rounded"
+                                                                 onerror="this.style.display='none'; this.nextElementSibling.style.display='block';">
+                                                            <div style="display:none;" class="w-16 h-16 bg-gray-200 rounded flex items-center justify-center">
+                                                                <i class="fas fa-image text-gray-400"></i>
+                                                            </div>
+                                                            <div class="flex-1 min-w-0">
+                                                                <p class="text-sm font-medium text-gray-900 truncate">${String(img.original_filename || img.filename || 'Image').replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;')}</p>
+                                                                <p class="text-xs text-gray-500">${img.size ? (Math.round(img.size / 1024) + ' KB') : ''} • ${(img.uploaded_at || '').replace(/&/g, '&amp;')}</p>
+                                                                <p class="text-xs text-blue-600 mt-1">
+                                                                    <i class="fas fa-clock mr-1"></i>${scheduleSummary}
+                                                                </p>
+                                                            </div>
+                                                        </div>
+                                                        <div class="flex items-center space-x-2 ml-4">
+                                                            <button type="button" 
+                                                                    data-field-id="${fieldId}"
+                                                                    data-image-id="${img.id || ''}"
+                                                                    data-image-idx="${idx}"
+                                                                    onclick="window.openImageSchedule(this.dataset.fieldId, this.dataset.imageId || null, parseInt(this.dataset.imageIdx))"
+                                                                    class="text-blue-600 hover:text-blue-800 p-2" 
+                                                                    title="Schedule this image">
+                                                                <i class="fas fa-calendar-alt"></i>
+                                                            </button>
+                                                            <button type="button" 
+                                                                    data-field-id="${fieldId}"
+                                                                    data-image-id="${img.id || ''}"
+                                                                    data-plugin-id="${safePluginId}"
+                                                                    onclick="window.deleteUploadedImage(this.dataset.fieldId, this.dataset.imageId, this.dataset.pluginId)"
+                                                                    class="text-red-600 hover:text-red-800 p-2"
+                                                                    title="Delete image">
+                                                                <i class="fas fa-trash"></i>
+                                                            </button>
+                                                        </div>
+                                                    </div>
+                                                    <!-- Schedule widget will be inserted here when opened -->
+                                                    <div id="schedule_${(img.id || idx).toString().replace(/[^a-zA-Z0-9_-]/g, '_')}" class="hidden mt-3 pt-3 border-t border-gray-300"></div>
+                                                </div>
+                                                `;
+                                            }).join('')}
+                                        </div>
+                                        
+                                        <!-- Hidden input to store image data -->
+                                        <input type="hidden" id="${fieldId}_images_data" name="${fullKey}" value="${JSON.stringify(currentImages).replace(/&/g, '&amp;').replace(/"/g, '&quot;').replace(/'/g, '&#39;')}">
+                                    </div>
+                                `;
+                            } else {
+                                // Regular array input
+                                const arrayValue = Array.isArray(value) ? value.join(', ') : '';
+                                html += `<input type="text" name="${fullKey}" value="${arrayValue}" placeholder="Enter values separated by commas" class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm">`;
+                                html += `<p class="text-sm text-gray-600 mt-1">Enter values separated by commas</p>`;
+                            }
+                        } else if (prop.enum) {
+                            html += `<select name="${fullKey}" class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm">`;
+                            prop.enum.forEach(option => {
+                                const selected = value === option ? 'selected' : '';
+                                html += `<option value="${option}" ${selected}>${option}</option>`;
+                            });
+                            html += `</select>`;
+                        } else if (prop.type === 'string' && prop['x-widget'] === 'file-upload') {
+                            // File upload widget for string fields (e.g., credentials.json)
+                            const uploadConfig = prop['x-upload-config'] || {};
+                            const uploadEndpoint = uploadConfig.upload_endpoint || '/api/v3/plugins/assets/upload';
+                            const maxSizeMB = uploadConfig.max_size_mb || 1;
+                            const allowedExtensions = uploadConfig.allowed_extensions || ['.json'];
+                            const targetFilename = uploadConfig.target_filename || 'file.json';
+                            const fieldId = fullKey.replace(/\./g, '_');
+                            const hasFile = value && value !== '';
+                            
+                            html += `
+                                <div id="${fieldId}_upload_widget" class="mt-1">
+                                    <div id="${fieldId}_file_upload" 
+                                         class="border-2 border-dashed border-gray-300 rounded-lg p-4 text-center hover:border-blue-400 transition-colors cursor-pointer"
+                                         onclick="document.getElementById('${fieldId}_file_input').click()">
+                                        <input type="file" 
+                                               id="${fieldId}_file_input" 
+                                               accept="${allowedExtensions.join(',')}"
+                                               style="display: none;"
+                                               data-field-id="${fieldId}"
+                                               data-upload-endpoint="${uploadEndpoint}"
+                                               data-target-filename="${targetFilename}"
+                                               onchange="window.handleCredentialsUpload(event, this.dataset.fieldId, this.dataset.uploadEndpoint, this.dataset.targetFilename)">
+                                        <i class="fas fa-file-upload text-2xl text-gray-400 mb-2"></i>
+                                        <p class="text-sm text-gray-600" id="${fieldId}_status">
+                                            ${hasFile ? `Current file: ${value}` : 'Click to upload ' + targetFilename}
+                                        </p>
+                                        <p class="text-xs text-gray-500 mt-1">Max ${maxSizeMB}MB (${allowedExtensions.join(', ')})</p>
+                                    </div>
+                                    <input type="hidden" name="${fullKey}" value="${value || ''}" id="${fieldId}_hidden">
+                                </div>
+                            `;
+                        } else {
+                            // Default to text input
+                            const maxLength = prop.maxLength || '';
+                            const maxLengthAttr = maxLength ? `maxlength="${maxLength}"` : '';
+                            html += `<input type="text" name="${fullKey}" value="${value !== undefined ? value : ''}" ${maxLengthAttr} class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm">`;
+                        }
+
+                        html += `</div>`;
+                        return html;
+                    };
+
+                    let formHtml = '';
+                    // Get ordered properties if x-propertyOrder is defined
+                    let propertyEntries = Object.entries(schema.properties);
+                    if (schema['x-propertyOrder'] && Array.isArray(schema['x-propertyOrder'])) {
+                        const order = schema['x-propertyOrder'];
+                        const orderedEntries = [];
+                        const unorderedEntries = [];
+                        
+                        // Separate ordered and unordered properties
+                        propertyEntries.forEach(([key, prop]) => {
+                            const index = order.indexOf(key);
+                            if (index !== -1) {
+                                orderedEntries[index] = [key, prop];
+                            } else {
+                                unorderedEntries.push([key, prop]);
+                            }
+                        });
+                        
+                        // Combine ordered entries (filter out undefined from sparse array) with unordered entries
+                        propertyEntries = orderedEntries.filter(entry => entry !== undefined).concat(unorderedEntries);
+                    }
+                    
+                    propertyEntries.forEach(([key, prop]) => {
+                        // Skip the 'enabled' property - it's managed separately via the header toggle
+                        if (key === 'enabled') return;
+                        // Use config value if key exists and is not null/undefined, otherwise use schema default
+                        // Check if key exists in config and value is not null/undefined
+                        const hasValue = key in config && config[key] !== null && config[key] !== undefined;
+                        // For nested objects, if the value is an empty object, still use it (don't fall back to default)
+                        const isNestedObject = prop.type === 'object' && prop.properties;
+                        const value = hasValue ? config[key] : 
+                            (prop.default !== undefined ? prop.default : 
+                             (isNestedObject ? {} : (prop.type === 'array' ? [] : (prop.type === 'boolean' ? false : ''))));
+                        formHtml += generateFieldHtml(key, prop, value);
+                    });
+
+                    // Add web UI actions section if plugin defines any
+                    if (webUiActions && webUiActions.length > 0) {
+                        debugLog('[DEBUG] Rendering', webUiActions.length, 'actions in tab form');
+                        
+                        // Map color names to explicit Tailwind classes
+                        const colorMap = {
+                            'blue': { bg: 'bg-blue-50', border: 'border-blue-200', text: 'text-blue-900', textLight: 'text-blue-700', btn: 'bg-blue-600 hover:bg-blue-700' },
+                            'green': { bg: 'bg-green-50', border: 'border-green-200', text: 'text-green-900', textLight: 'text-green-700', btn: 'bg-green-600 hover:bg-green-700' },
+                            'red': { bg: 'bg-red-50', border: 'border-red-200', text: 'text-red-900', textLight: 'text-red-700', btn: 'bg-red-600 hover:bg-red-700' },
+                            'yellow': { bg: 'bg-yellow-50', border: 'border-yellow-200', text: 'text-yellow-900', textLight: 'text-yellow-700', btn: 'bg-yellow-600 hover:bg-yellow-700' },
+                            'purple': { bg: 'bg-purple-50', border: 'border-purple-200', text: 'text-purple-900', textLight: 'text-purple-700', btn: 'bg-purple-600 hover:bg-purple-700' }
+                        };
+                        
+                        formHtml += `
+                            <div class="border-t border-gray-200 pt-4 mt-4">
+                                <h3 class="text-lg font-semibold text-gray-900 mb-3">Actions</h3>
+                                <p class="text-sm text-gray-600 mb-4">${webUiActions[0].section_description || 'Perform actions for this plugin'}</p>
+                                
+                                <div class="space-y-3">
+                        `;
+                        
+                        webUiActions.forEach((action, index) => {
+                            const actionId = `action-${action.id}-${index}`;
+                            const statusId = `action-status-${action.id}-${index}`;
+                            const bgColor = action.color || 'blue';
+                            const colors = colorMap[bgColor] || colorMap['blue'];
+                            // Ensure pluginId is valid for template interpolation
+                            const safePluginId = pluginId || '';
+                            
+                            formHtml += `
+                                    <div class="${colors.bg} border ${colors.border} rounded-lg p-4">
+                                        <div class="flex items-center justify-between">
+                                            <div class="flex-1">
+                                                <h4 class="font-medium ${colors.text} mb-1">
+                                                    ${action.icon ? `<i class="${action.icon} mr-2"></i>` : ''}${action.title || action.id}
+                                                </h4>
+                                                <p class="text-sm ${colors.textLight}">${action.description || ''}</p>
+                                            </div>
+                                            <button type="button" 
+                                                    id="${actionId}"
+                                                    onclick="executePluginAction('${action.id}', ${index}, '${safePluginId}')" 
+                                                    data-plugin-id="${safePluginId}"
+                                                    data-action-id="${action.id}"
+                                                    class="btn ${colors.btn} text-white px-4 py-2 rounded-md whitespace-nowrap">
+                                                ${action.icon ? `<i class="${action.icon} mr-2"></i>` : ''}${action.button_text || action.title || 'Execute'}
+                                            </button>
+                                        </div>
+                                        <div id="${statusId}" class="mt-3 hidden"></div>
+                                    </div>
+                            `;
+                        });
+                        
+                        formHtml += `
+                                </div>
+                            </div>
+                        `;
+                    }
+
+                    return formHtml;
+                },
+
+                generateSimpleConfigForm(config, webUiActions = [], pluginId = '') {
+                    let actionsHtml = '';
+                    if (webUiActions && webUiActions.length > 0) {
+                        const colorMap = {
+                            'blue': { bg: 'bg-blue-50', border: 'border-blue-200', text: 'text-blue-900', textLight: 'text-blue-700', btn: 'bg-blue-600 hover:bg-blue-700' },
+                            'green': { bg: 'bg-green-50', border: 'border-green-200', text: 'text-green-900', textLight: 'text-green-700', btn: 'bg-green-600 hover:bg-green-700' },
+                            'red': { bg: 'bg-red-50', border: 'border-red-200', text: 'text-red-900', textLight: 'text-red-700', btn: 'bg-red-600 hover:bg-red-700' },
+                            'yellow': { bg: 'bg-yellow-50', border: 'border-yellow-200', text: 'text-yellow-900', textLight: 'text-yellow-700', btn: 'bg-yellow-600 hover:bg-yellow-700' },
+                            'purple': { bg: 'bg-purple-50', border: 'border-purple-200', text: 'text-purple-900', textLight: 'text-purple-700', btn: 'bg-purple-600 hover:bg-purple-700' }
+                        };
+                        
+                        actionsHtml = `
+                            <div class="border-t border-gray-200 pt-4 mt-4">
+                                <h3 class="text-lg font-semibold text-gray-900 mb-3">Actions</h3>
+                                <div class="space-y-3">
+                        `;
+                        webUiActions.forEach((action, index) => {
+                            const actionId = `action-${action.id}-${index}`;
+                            const statusId = `action-status-${action.id}-${index}`;
+                            const bgColor = action.color || 'blue';
+                            const colors = colorMap[bgColor] || colorMap['blue'];
+                            // Ensure pluginId is valid for template interpolation
+                            const safePluginId = pluginId || '';
+                            actionsHtml += `
+                                    <div class="${colors.bg} border ${colors.border} rounded-lg p-4">
+                                        <div class="flex items-center justify-between">
+                                            <div class="flex-1">
+                                                <h4 class="font-medium ${colors.text} mb-1">
+                                                    ${action.icon ? `<i class="${action.icon} mr-2"></i>` : ''}${action.title || action.id}
+                                                </h4>
+                                                <p class="text-sm ${colors.textLight}">${action.description || ''}</p>
+                                            </div>
+                                            <button type="button" 
+                                                    id="${actionId}"
+                                                    onclick="executePluginAction('${action.id}', ${index}, '${safePluginId}')" 
+                                                    data-plugin-id="${safePluginId}"
+                                                    data-action-id="${action.id}"
+                                                    class="btn ${colors.btn} text-white px-4 py-2 rounded-md">
+                                                ${action.icon ? `<i class="${action.icon} mr-2"></i>` : ''}${action.button_text || action.title || 'Execute'}
+                                            </button>
+                                        </div>
+                                        <div id="${statusId}" class="mt-3 hidden"></div>
+                                    </div>
+                            `;
+                        });
+                        actionsHtml += `
+                                </div>
+                            </div>
+                        `;
+                    }
+                    
+                    return `
+                        <div class="form-group">
+                            <label class="block text-sm font-medium text-gray-700 mb-1">Display Duration (seconds)</label>
+                            <input type="number" name="display_duration" value="${Math.max(5, Math.min(300, config.display_duration || 30))}" min="5" max="300" class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm">
+                            <p class="text-sm text-gray-600 mt-1">How long to show this plugin's content</p>
+                        </div>
+                        ${actionsHtml}
+                    `;
+                },
+
+                // Helper function to get schema property type for a field path
+                getSchemaPropertyType(schema, path) {
+                    if (!schema || !schema.properties) return null;
+                    
+                    const parts = path.split('.');
+                    let current = schema.properties;
+                    
+                    for (let i = 0; i < parts.length; i++) {
+                        const part = parts[i];
+                        if (current && current[part]) {
+                            if (i === parts.length - 1) {
+                                return current[part];
+                            } else if (current[part].properties) {
+                                current = current[part].properties;
+                            } else {
+                                return null;
+                            }
+                        } else {
+                            return null;
+                        }
+                    }
+                    return null;
+                },
+
+                // Helper function to escape CSS selector special characters
+                escapeCssSelector(str) {
+                    if (typeof str !== 'string') {
+                        str = String(str);
+                    }
+                    // Use CSS.escape() when available (handles unicode, leading digits, and edge cases)
+                    if (typeof CSS !== 'undefined' && CSS.escape) {
+                        return CSS.escape(str);
+                    }
+                    // Fallback to regex-based escaping for older browsers
+                    // First, handle leading digits and whitespace (must be done before regex)
+                    let escaped = str;
+                    let hasLeadingHexEscape = false;
+                    if (escaped.length > 0) {
+                        const firstChar = escaped[0];
+                        const firstCode = firstChar.charCodeAt(0);
+                        
+                        // Escape leading digit (0-9: U+0030-U+0039)
+                        if (firstCode >= 0x30 && firstCode <= 0x39) {
+                            const hex = firstCode.toString(16).toUpperCase().padStart(4, '0');
+                            escaped = '\\' + hex + ' ' + escaped.slice(1);
+                            hasLeadingHexEscape = true;
+                        }
+                        // Escape leading whitespace (space: U+0020, tab: U+0009, etc.)
+                        else if (/\s/.test(firstChar)) {
+                            const hex = firstCode.toString(16).toUpperCase().padStart(4, '0');
+                            escaped = '\\' + hex + ' ' + escaped.slice(1);
+                            hasLeadingHexEscape = true;
+                        }
+                    }
+                    
+                    // Escape special characters
+                    escaped = escaped.replace(/[!"#$%&'()*+,.\/:;<=>?@[\\\]^`{|}~]/g, '\\$&');
+                    
+                    // Escape internal spaces (replace spaces with \ ), but preserve space in hex escape
+                    if (hasLeadingHexEscape) {
+                        // Skip the first 6 characters (e.g., "\0030 ") when replacing spaces
+                        escaped = escaped.slice(0, 6) + escaped.slice(6).replace(/ /g, '\\ ');
+                    } else {
+                        escaped = escaped.replace(/ /g, '\\ ');
+                    }
+                    
+                    return escaped;
+                },
+
+                async savePluginConfig(pluginId, event) {
+                    try {
+                        // Get the form element for this plugin
+                        const form = event ? event.target : null;
+                        if (!form) {
+                            throw new Error('Form element not found');
+                        }
+                        const formData = new FormData(form);
+                        const schema = this.schema || {};
+                        
+                        // First, collect all checkbox states (including unchecked ones)
+                        // Unchecked checkboxes don't appear in FormData, so we need to iterate form elements
+                        const flatConfig = {};
+                        
+                        // Process all form elements to capture all field states
+                        for (let i = 0; i < form.elements.length; i++) {
+                            const element = form.elements[i];
+                            const name = element.name;
+                            
+                            // Skip elements without names or submit buttons
+                            if (!name || element.type === 'submit' || element.type === 'button') {
+                                continue;
+                            }
+                            
+                            // Handle checkboxes explicitly (both checked and unchecked)
+                            if (element.type === 'checkbox') {
+                                // Check if this is a checkbox group (name ends with [])
+                                if (name.endsWith('[]')) {
+                                    const baseName = name.slice(0, -2); // Remove '[]' suffix
+                                    if (!flatConfig[baseName]) {
+                                        flatConfig[baseName] = [];
+                                    }
+                                    if (element.checked) {
+                                        flatConfig[baseName].push(element.value);
+                                    }
+                                } else {
+                                    // Regular checkbox (boolean)
+                                    flatConfig[name] = element.checked;
+                                }
+                            }
+                            // Handle radio buttons
+                            else if (element.type === 'radio') {
+                                if (element.checked) {
+                                    flatConfig[name] = element.value;
+                                }
+                            }
+                            // Handle select elements (including multi-select)
+                            else if (element.tagName === 'SELECT') {
+                                if (element.multiple) {
+                                    // Multi-select: get all selected options
+                                    const selectedValues = Array.from(element.selectedOptions).map(opt => opt.value);
+                                    flatConfig[name] = selectedValues;
+                                } else {
+                                    // Single select: handled by FormData, but ensure it's captured
+                                    if (!(name in flatConfig)) {
+                                        flatConfig[name] = element.value;
+                                    }
+                                }
+                            }
+                            // Handle textarea
+                            else if (element.tagName === 'TEXTAREA') {
+                                // Textarea: handled by FormData, but ensure it's captured
+                                if (!(name in flatConfig)) {
+                                    flatConfig[name] = element.value;
+                                }
+                            }
+                        }
+                        
+                        // Now process FormData for other field types
+                        for (const [key, value] of formData.entries()) {
+                            // Skip checkboxes - we already handled them above
+                            // Use querySelector to reliably find element by name (handles dot notation)
+                            const escapedKey = this.escapeCssSelector(key);
+                            const element = form.querySelector(`[name="${escapedKey}"]`);
+                            if (element && element.type === 'checkbox') {
+                                // Also skip checkbox groups (name ends with [])
+                                if (key.endsWith('[]')) {
+                                    continue; // Already processed
+                                }
+                                continue; // Already processed
+                            }
+                            // Skip multi-select - we already handled them above
+                            if (element && element.tagName === 'SELECT' && element.multiple) {
+                                continue; // Already processed
+                            }
+                            
+                            // Get schema property type if available
+                            const propSchema = this.getSchemaPropertyType(schema, key);
+                            const propType = propSchema ? propSchema.type : null;
+                            
+                            // Handle based on schema type or field name patterns
+                            if (propType === 'array') {
+                                // Check if this is a file upload widget (JSON array in hidden input)
+                                if (propSchema && propSchema['x-widget'] === 'file-upload') {
+                                    try {
+                                        // Unescape HTML entities that were escaped when setting the value
+                                        let unescapedValue = value;
+                                        if (typeof value === 'string') {
+                                            // Reverse the HTML escaping: &quot; -> ", &#39; -> ', &amp; -> &
+                                            unescapedValue = value
+                                                .replace(/&quot;/g, '"')
+                                                .replace(/&#39;/g, "'")
+                                                .replace(/&lt;/g, '<')
+                                                .replace(/&gt;/g, '>')
+                                                .replace(/&amp;/g, '&');
+                                        }
+                                        
+                                        // Try to parse as JSON
+                                        const jsonValue = JSON.parse(unescapedValue);
+                                        if (Array.isArray(jsonValue)) {
+                                            flatConfig[key] = jsonValue;
+                                            debugLog(`File upload array field ${key}: parsed JSON array with ${jsonValue.length} items`);
+                                        } else {
+                                            // Fallback to empty array
+                                            flatConfig[key] = [];
+                                        }
+                                    } catch (e) {
+                                        console.warn(`Failed to parse JSON for file upload field ${key}:`, e, 'Value:', value);
+                                        // Not valid JSON, use empty array or try comma-separated
+                                        if (value && value.trim()) {
+                                            // Try to unescape and parse again
+                                            try {
+                                                const unescaped = value
+                                                    .replace(/&quot;/g, '"')
+                                                    .replace(/&#39;/g, "'")
+                                                    .replace(/&amp;/g, '&');
+                                                const jsonValue = JSON.parse(unescaped);
+                                                if (Array.isArray(jsonValue)) {
+                                                    flatConfig[key] = jsonValue;
+                                                } else {
+                                                    flatConfig[key] = [];
+                                                }
+                                            } catch (e2) {
+                                                // If still fails, try comma-separated or empty array
+                                                const arrayValue = value.split(',').map(v => v.trim()).filter(v => v);
+                                                flatConfig[key] = arrayValue.length > 0 ? arrayValue : [];
+                                            }
+                                        } else {
+                                            flatConfig[key] = [];
+                                        }
+                                    }
+                                } else {
+                                    // Regular array: convert comma-separated string to array
+                                    const arrayValue = value ? value.split(',').map(v => v.trim()).filter(v => v) : [];
+                                    flatConfig[key] = arrayValue;
+                                }
+                            } else if (propType === 'integer' || (Array.isArray(propType) && propType.includes('integer'))) {
+                                // Handle union types - if null is allowed and value is empty, keep as empty string (backend will convert to null)
+                                if (Array.isArray(propType) && propType.includes('null') && (!value || value.trim() === '')) {
+                                    flatConfig[key] = ''; // Send empty string, backend will normalize to null
+                                } else {
+                                    const numValue = parseInt(value, 10);
+                                    flatConfig[key] = isNaN(numValue) ? (propSchema && propSchema.default !== undefined ? propSchema.default : 0) : numValue;
+                                }
+                            } else if (propType === 'number' || (Array.isArray(propType) && propType.includes('number'))) {
+                                // Handle union types - if null is allowed and value is empty, keep as empty string (backend will convert to null)
+                                if (Array.isArray(propType) && propType.includes('null') && (!value || value.trim() === '')) {
+                                    flatConfig[key] = ''; // Send empty string, backend will normalize to null
+                                } else {
+                                    const numValue = parseFloat(value);
+                                    flatConfig[key] = isNaN(numValue) ? (propSchema && propSchema.default !== undefined ? propSchema.default : 0) : numValue;
+                                }
+                            } else if (propType === 'boolean') {
+                                // Boolean from FormData (shouldn't happen for checkboxes, but handle it)
+                                flatConfig[key] = value === 'on' || value === 'true' || value === true;
+                            } else {
+                                // String or other types
+                                // Check if it's a number field by name pattern (fallback if no schema)
+                                if (!propType && (key.includes('duration') || key.includes('interval') || 
+                                    key.includes('timeout') || key.includes('teams') || key.includes('fps') ||
+                                    key.includes('bits') || key.includes('nanoseconds') || key.includes('hz'))) {
+                                    const numValue = parseFloat(value);
+                                    if (!isNaN(numValue)) {
+                                        flatConfig[key] = Number.isInteger(numValue) ? parseInt(value, 10) : numValue;
+                                    } else {
+                                        flatConfig[key] = value;
+                                    }
+                                } else {
+                                    flatConfig[key] = value;
+                                }
+                            }
+                        }
+                        
+                        // Handle unchecked checkboxes using schema (if available)
+                        if (schema && schema.properties) {
+                            const collectBooleanFields = (props, prefix = '') => {
+                                const boolFields = [];
+                                for (const [key, prop] of Object.entries(props)) {
+                                    const fullKey = prefix ? `${prefix}.${key}` : key;
+                                    if (prop.type === 'boolean') {
+                                        boolFields.push(fullKey);
+                                    } else if (prop.type === 'object' && prop.properties) {
+                                        boolFields.push(...collectBooleanFields(prop.properties, fullKey));
+                                    }
+                                }
+                                return boolFields;
+                            };
+                            
+                            const allBoolFields = collectBooleanFields(schema.properties);
+                            allBoolFields.forEach(key => {
+                                // Only set to false if the field is completely missing from flatConfig
+                                // Don't override existing false values - they're explicitly set by the user
+                                if (!(key in flatConfig)) {
+                                    flatConfig[key] = false;
+                                }
+                            });
+                        }
+                        
+                        // Convert dot notation to nested object
+                        const dotToNested = (obj) => {
+                            const result = {};
+                            for (const key in obj) {
+                                const parts = key.split('.');
+                                let current = result;
+                                for (let i = 0; i < parts.length - 1; i++) {
+                                    if (!current[parts[i]]) {
+                                        current[parts[i]] = {};
+                                    }
+                                    current = current[parts[i]];
+                                }
+                                current[parts[parts.length - 1]] = obj[key];
+                            }
+                            return result;
+                        };
+                        
+                        const config = dotToNested(flatConfig);
+                        
+                        // Save to backend
+                        const response = await fetch('/api/v3/plugins/config', {
+                            method: 'POST',
+                            headers: { 'Content-Type': 'application/json' },
+                            body: JSON.stringify({
+                                plugin_id: pluginId,
+                                config: config
+                            })
+                        });
+                        
+                        let data;
+                        try {
+                            data = await response.json();
+                        } catch (e) {
+                            console.error('Failed to parse JSON response:', e);
+                            console.error('Response status:', response.status, response.statusText);
+                            console.error('Response text:', await response.text());
+                            throw new Error(`Failed to parse server response: ${response.status} ${response.statusText}`);
+                        }
+                        
+                        debugLog('Response status:', response.status, 'Response OK:', response.ok);
+                        debugLog('Response data:', JSON.stringify(data, null, 2));
+                        
+                        if (!response.ok || data.status !== 'success') {
+                            let errorMessage = data.message || 'Failed to save configuration';
+                            if (data.validation_errors && Array.isArray(data.validation_errors)) {
+                                console.error('Validation errors:', data.validation_errors);
+                                errorMessage += '\n\nValidation errors:\n' + data.validation_errors.join('\n');
+                            }
+                            if (data.config_keys && data.schema_keys) {
+                                console.error('Config keys sent:', data.config_keys);
+                                console.error('Schema keys expected:', data.schema_keys);
+                                const extraKeys = data.config_keys.filter(k => !data.schema_keys.includes(k));
+                                const missingKeys = data.schema_keys.filter(k => !data.config_keys.includes(k));
+                                if (extraKeys.length > 0) {
+                                    errorMessage += '\n\nExtra keys (not in schema): ' + extraKeys.join(', ');
+                                }
+                                if (missingKeys.length > 0) {
+                                    errorMessage += '\n\nMissing keys (in schema): ' + missingKeys.join(', ');
+                                }
+                            }
+                            this.showNotification(errorMessage, 'error');
+                            console.error('Config save failed - Full error response:', JSON.stringify(data, null, 2));
+                        } else {
+                            this.showNotification('Configuration saved successfully', 'success');
+                            // Reload plugin config to reflect changes
+                            await this.loadPluginConfig(pluginId);
+                        }
+                    } catch (error) {
+                        console.error('Error saving plugin config:', error);
+                        this.showNotification('Error saving configuration: ' + error.message, 'error');
+                    }
+                },
+
+                formatCommitInfo(commit, branch) {
+                    // Handle null, undefined, or empty string
+                    const commitStr = (commit && String(commit).trim()) || '';
+                    const branchStr = (branch && String(branch).trim()) || '';
+                    
+                    if (!commitStr && !branchStr) return 'Unknown';
+                    
+                    const shortCommit = commitStr.length >= 7 ? commitStr.substring(0, 7) : commitStr;
+
+                    if (branchStr && shortCommit) {
+                        return `${branchStr} · ${shortCommit}`;
+                    }
+                    if (branchStr) {
+                        return branchStr;
+                    }
+                    if (shortCommit) {
+                        return shortCommit;
+                    }
+                    return 'Unknown';
+                },
+
+                formatDateInfo(dateString) {
+                    // Handle null, undefined, or empty string
+                    if (!dateString || !String(dateString).trim()) return 'Unknown';
+                    
+                    try {
+                        const date = new Date(dateString);
+                        // Check if date is valid
+                        if (isNaN(date.getTime())) {
+                            return 'Unknown';
+                        }
+                        
+                        const now = new Date();
+                        const diffTime = Math.abs(now - date);
+                        const diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24));
+                        
+                        if (diffDays < 1) {
+                            return 'Today';
+                        } else if (diffDays < 2) {
+                            return 'Yesterday';
+                        } else if (diffDays < 7) {
+                            return `${diffDays} days ago`;
+                        } else if (diffDays < 30) {
+                            const weeks = Math.floor(diffDays / 7);
+                            return `${weeks} ${weeks === 1 ? 'week' : 'weeks'} ago`;
+                        } else {
+                            // Return formatted date for older items
+                            return date.toLocaleDateString('en-US', { year: 'numeric', month: 'short', day: 'numeric' });
+                        }
+                    } catch (e) {
+                        console.error('Error formatting date:', e, dateString);
+                        return 'Unknown';
+                    }
+                }
+            };
+            
+            // Update window.app to return full implementation
+            window.app = function() {
+                return fullImplementation;
+            };
+            
+            // If Alpine is already initialized, update the existing component immediately
+            if (window.Alpine) {
+                // Use requestAnimationFrame for immediate execution without blocking
+                requestAnimationFrame(() => {
+                    if (window._appEnhanced) return;
+                    window._appEnhanced = true;
+                    const isAPMode = window.location.hostname === '192.168.4.1' ||
+                                   window.location.hostname.startsWith('192.168.4.');
+                    const defaultTab = isAPMode ? 'wifi' : 'overview';
+                    const appElement = document.querySelector('[x-data]');
+                    if (appElement && appElement._x_dataStack && appElement._x_dataStack[0]) {
+                        const existingComponent = appElement._x_dataStack[0];
+                        // Preserve runtime state that should not be reset
+                        const preservedPlugins = existingComponent.installedPlugins;
+                        const preservedTab = existingComponent.activeTab;
+                        // Replace all properties and methods from full implementation
+                        Object.keys(fullImplementation).forEach(key => {
+                            existingComponent[key] = fullImplementation[key];
+                        });
+                        // Restore runtime state if non-default
+                        if (preservedPlugins && preservedPlugins.length > 0) {
+                            existingComponent.installedPlugins = preservedPlugins;
+                        }
+                        if (preservedTab && preservedTab !== defaultTab) {
+                            existingComponent.activeTab = preservedTab;
+                        }
+                        // Call init to load plugins and set up watchers (only if not already initialized)
+                        if (typeof existingComponent.init === 'function' && !existingComponent._initialized) {
+                            existingComponent.init();
+                        }
+                    }
+                });
+            }
+            
+            return fullImplementation;
+        }
+        
+        // Make app() available globally
+        window.app = app;
+
+
+        // ===== Nested Section Toggle =====
+        window.toggleNestedSection = function(sectionId, event) {
+            // Prevent event bubbling if event is provided
+            if (event) {
+                event.stopPropagation();
+                event.preventDefault();
+            }
+            
+            const content = document.getElementById(sectionId);
+            const icon = document.getElementById(sectionId + '-icon');
+            
+            if (!content || !icon) {
+                console.warn('[toggleNestedSection] Content or icon not found for:', sectionId);
+                return;
+            }
+            
+            // Check if content is currently collapsed (has 'collapsed' class or display:none)
+            const isCollapsed = content.classList.contains('collapsed') || 
+                                content.style.display === 'none' ||
+                                (content.style.display === '' && !content.classList.contains('expanded'));
+            
+            if (isCollapsed) {
+                // Expand the section
+                content.classList.remove('collapsed');
+                content.classList.add('expanded');
+                content.style.display = 'block';
+                content.style.overflow = 'hidden'; // Prevent content jumping during animation
+                
+                // CRITICAL FIX: Use setTimeout to ensure browser has time to layout the element
+                // When element goes from display:none to display:block, scrollHeight might be 0
+                // We need to wait for the browser to calculate the layout
+                setTimeout(() => {
+                    // Force reflow to ensure transition works
+                    void content.offsetHeight;
+                    
+                    // Now measure the actual content height after layout
+                    const scrollHeight = content.scrollHeight;
+                    if (scrollHeight > 0) {
+                        content.style.maxHeight = scrollHeight + 'px';
+                    } else {
+                        // Fallback: if scrollHeight is still 0, try measuring again after a brief delay
+                        setTimeout(() => {
+                            const retryHeight = content.scrollHeight;
+                            content.style.maxHeight = retryHeight > 0 ? retryHeight + 'px' : '500px';
+                        }, 10);
+                    }
+                }, 10);
+                
+                icon.classList.remove('fa-chevron-right');
+                icon.classList.add('fa-chevron-down');
+                
+                // After animation completes, remove max-height constraint to allow natural expansion
+                setTimeout(() => {
+                    if (content.classList.contains('expanded') && !content.classList.contains('collapsed')) {
+                        content.style.maxHeight = 'none';
+                        content.style.overflow = '';
+                    }
+                }, 320); // Slightly longer than transition duration
+            } else {
+                // Collapse the section
+                content.classList.add('collapsed');
+                content.classList.remove('expanded');
+                content.style.overflow = 'hidden'; // Prevent content jumping during animation
+                
+                // Set max-height to current scroll height first (required for smooth animation)
+                const currentHeight = content.scrollHeight;
+                content.style.maxHeight = currentHeight + 'px';
+                
+                // Force reflow to apply the height
+                void content.offsetHeight;
+                
+                // Then animate to 0
+                setTimeout(() => {
+                    content.style.maxHeight = '0';
+                }, 10);
+                
+                // Hide after transition completes
+                setTimeout(() => {
+                    if (content.classList.contains('collapsed')) {
+                        content.style.display = 'none';
+                        content.style.overflow = '';
+                    }
+                }, 320); // Match the CSS transition duration + small buffer
+                
+                icon.classList.remove('fa-chevron-down');
+                icon.classList.add('fa-chevron-right');
+            }
+        };
+
+        // ===== Display Preview Functions (from v2) =====
+        
+        function updateDisplayPreview(data) {
+            const preview = document.getElementById('displayPreview');
+            const stage = document.getElementById('previewStage');
+            const img = document.getElementById('displayImage');
+            const canvas = document.getElementById('gridOverlay');
+            const ledCanvas = document.getElementById('ledCanvas');
+            const placeholder = document.getElementById('displayPlaceholder');
+
+            // Always cache the latest frame so the floating preview can show
+            // something the moment it's opened — SSE only sends frames when
+            // the display CHANGES, so a late subscriber would otherwise stare
+            // at an empty panel until the next change.
+            if (data.image) {
+                window._lastPreviewFrame = data.image;
+            }
+            // Feed the floating mini preview (lives in base.html, present on
+            // every tab) before the overview-only guard below.
+            const floatImg = document.getElementById('floating-preview-img');
+            const floatPanel = document.getElementById('floating-preview');
+            if (floatImg && floatPanel && floatPanel.style.display !== 'none' && data.image) {
+                floatImg.src = `data:image/png;base64,${data.image}`;
+            }
+
+            if (!stage || !img || !placeholder) return; // Not on overview page
+
+            if (data.image) {
+                // Show stage
+                placeholder.style.display = 'none';
+                stage.style.display = 'inline-block';
+
+                // Current scale from slider
+                const scale = parseInt(document.getElementById('scaleRange')?.value || '8');
+
+                // Update image and meta label. Size everything from the PNG's
+                // OWN dimensions (naturalWidth/Height) once it has loaded —
+                // not from the server-reported config dimensions. If the
+                // config disagrees with what the display service actually
+                // renders (stale config, service not yet restarted), sizing
+                // from config stretches the image at a fractional ratio and
+                // the preview looks blurry until the scale slider forces a
+                // re-render. The slider path always used natural dimensions;
+                // now both paths do.
+                img.style.imageRendering = 'pixelated';
+                img.onload = () => {
+                    const nw = img.naturalWidth || data.width || 128;
+                    const nh = img.naturalHeight || data.height || 64;
+                    const width = nw * scale;
+                    const height = nh * scale;
+                    img.style.width = width + 'px';
+                    img.style.height = height + 'px';
+                    ledCanvas.width = width;
+                    ledCanvas.height = height;
+                    canvas.width = width;
+                    canvas.height = height;
+                    const meta = document.getElementById('previewMeta');
+                    if (meta) {
+                        meta.textContent = `${nw} x ${nh} @ ${scale}x`;
+                    }
+                    drawGrid(canvas, nw, nh, scale);
+                    renderLedDots();
+                };
+                img.src = `data:image/png;base64,${data.image}`;
+            } else {
+                stage.style.display = 'none';
+                placeholder.style.display = 'block';
+                placeholder.innerHTML = `<div class="text-center text-gray-400 py-8">
+                    <i class="fas fa-exclamation-triangle text-4xl mb-3"></i>
+                    <p>No display data available</p>
+                </div>`;
+            }
+        }
+
+        function renderLedDots() {
+            const ledCanvas = document.getElementById('ledCanvas');
+            const img = document.getElementById('displayImage');
+            const toggle = document.getElementById('toggleLedDots');
+
+            if (!ledCanvas || !img || !toggle) {
+                return;
+            }
+
+            const show = toggle.checked;
+
+            if (!show) {
+                // LED mode OFF: Show image, hide canvas
+                img.style.visibility = 'visible';
+                ledCanvas.style.display = 'none';
+                const ctx = ledCanvas.getContext('2d');
+                ctx.clearRect(0, 0, ledCanvas.width, ledCanvas.height);
+                return;
+            }
+
+            // LED mode ON: Hide image (but keep layout space), show only dots on canvas
+            img.style.visibility = 'hidden';
+            ledCanvas.style.display = 'block';
+
+            const scale = parseInt(document.getElementById('scaleRange')?.value || '8');
+            const fillPct = parseInt(document.getElementById('dotFillRange')?.value || '75');
+            const dotRadius = Math.max(1, Math.floor((scale * fillPct) / 200)); // radius in px
+
+            const ctx = ledCanvas.getContext('2d', { willReadFrequently: true });
+            ctx.clearRect(0, 0, ledCanvas.width, ledCanvas.height);
+
+            // Create an offscreen canvas to sample pixel colors
+            const off = document.createElement('canvas');
+            const logicalWidth = Math.floor(ledCanvas.width / scale);
+            const logicalHeight = Math.floor(ledCanvas.height / scale);
+            off.width = logicalWidth;
+            off.height = logicalHeight;
+            const offCtx = off.getContext('2d', { willReadFrequently: true });
+
+            // Draw the current image scaled down to logical LEDs to sample colors
+            try {
+                offCtx.drawImage(img, 0, 0, logicalWidth, logicalHeight);
+            } catch (e) {
+                console.error('Failed to draw image to offscreen canvas:', e);
+                return;
+            }
+
+            // Fill canvas with black background (LED matrix bezel)
+            ctx.fillStyle = 'rgb(0, 0, 0)';
+            ctx.fillRect(0, 0, ledCanvas.width, ledCanvas.height);
+
+            // Read the whole frame once instead of one getImageData call per
+            // pixel (a 192x48 panel would otherwise issue ~9,200 calls per
+            // frame — noticeably heavy on phones).
+            let frame;
+            try {
+                frame = offCtx.getImageData(0, 0, logicalWidth, logicalHeight).data;
+            } catch (e) {
+                console.error('Failed to read offscreen canvas pixels:', e);
+                return;
+            }
+
+            // Draw circular dots for each LED pixel
+            let drawn = 0;
+            for (let y = 0; y < logicalHeight; y++) {
+                for (let x = 0; x < logicalWidth; x++) {
+                    const i = (y * logicalWidth + x) * 4;
+                    const r = frame[i], g = frame[i + 1], b = frame[i + 2], a = frame[i + 3];
+
+                    // Skip fully transparent or black pixels to reduce overdraw
+                    if (a === 0 || (r|g|b) === 0) continue;
+
+                    ctx.fillStyle = `rgb(${r},${g},${b})`;
+                    const cx = Math.floor(x * scale + scale / 2);
+                    const cy = Math.floor(y * scale + scale / 2);
+                    ctx.beginPath();
+                    ctx.arc(cx, cy, dotRadius, 0, Math.PI * 2);
+                    ctx.fill();
+                    drawn++;
+                }
+            }
+
+            // If nothing was drawn (e.g., image not ready), hide overlay to show base image
+            if (drawn === 0) {
+                ledCanvas.style.display = 'none';
+            }
+        }
+
+        function drawGrid(canvas, pixelWidth, pixelHeight, scale) {
+            const toggle = document.getElementById('toggleGrid');
+            if (!toggle || !toggle.checked) {
+                const ctx = canvas.getContext('2d');
+                ctx.clearRect(0, 0, canvas.width, canvas.height);
+                return;
+            }
+            
+            const ctx = canvas.getContext('2d');
+            ctx.clearRect(0, 0, canvas.width, canvas.height);
+            ctx.strokeStyle = 'rgba(255, 255, 255, 0.2)';
+            ctx.lineWidth = 1;
+            
+            for (let x = 0; x <= pixelWidth; x++) {
+                ctx.beginPath();
+                ctx.moveTo(x * scale, 0);
+                ctx.lineTo(x * scale, pixelHeight * scale);
+                ctx.stroke();
+            }
+            
+            for (let y = 0; y <= pixelHeight; y++) {
+                ctx.beginPath();
+                ctx.moveTo(0, y * scale);
+                ctx.lineTo(pixelWidth * scale, y * scale);
+                ctx.stroke();
+            }
+        }
+
+        function takeScreenshot() {
+            const img = document.getElementById('displayImage');
+            if (img && img.src) {
+                const link = document.createElement('a');
+                link.download = `led_matrix_${new Date().getTime()}.png`;
+                link.href = img.src;
+                link.click();
+            }
+        }
+
+        // ===== Plugin Management Functions =====
+
+        // Make togglePluginFromTab global so Alpine.js can access it  
+        window.togglePluginFromTab = async function(pluginId, enabled) {
+            try {
+                const response = await fetch('/api/v3/plugins/toggle', {
+                    method: 'POST',
+                    headers: { 'Content-Type': 'application/json' },
+                    body: JSON.stringify({ plugin_id: pluginId, enabled })
+                });
+                const data = await response.json();
+
+                showNotification(data.message, data.status);
+
+                if (data.status === 'success') {
+                    // Update the plugin in window.installedPlugins
+                    if (window.installedPlugins) {
+                        const plugin = window.installedPlugins.find(p => p.id === pluginId);
+                        if (plugin) {
+                            plugin.enabled = enabled;
+                        }
+                    }
+                    
+                    // Refresh the plugin list to ensure both management page and config page stay in sync
+                    if (typeof loadInstalledPlugins === 'function') {
+                        loadInstalledPlugins();
+                    }
+                } else {
+                    // Revert the toggle if API call failed
+                    if (window.installedPlugins) {
+                        const plugin = window.installedPlugins.find(p => p.id === pluginId);
+                        if (plugin) {
+                            plugin.enabled = !enabled;
+                        }
+                    }
+                }
+
+            } catch (error) {
+                showNotification('Error toggling plugin: ' + error.message, 'error');
+                // Revert on error
+                if (window.installedPlugins) {
+                    const plugin = window.installedPlugins.find(p => p.id === pluginId);
+                    if (plugin) {
+                        plugin.enabled = !enabled;
+                    }
+                }
+            }
+        }
+
+        // Helper function to get schema property type for a field path
+        function getSchemaPropertyType(schema, path) {
+            if (!schema || !schema.properties) return null;
+            
+            const parts = path.split('.');
+            let current = schema.properties;
+            
+            for (let i = 0; i < parts.length; i++) {
+                const part = parts[i];
+                if (current && current[part]) {
+                    if (i === parts.length - 1) {
+                        return current[part];
+                    } else if (current[part].properties) {
+                        current = current[part].properties;
+                    } else {
+                        return null;
+                    }
+                } else {
+                    return null;
+                }
+            }
+            return null;
+        }
+
+        // Helper function to escape CSS selector special characters
+        function escapeCssSelector(str) {
+            if (typeof str !== 'string') {
+                str = String(str);
+            }
+            // Use CSS.escape() when available (handles unicode, leading digits, and edge cases)
+            if (typeof CSS !== 'undefined' && CSS.escape) {
+                return CSS.escape(str);
+            }
+            // Fallback to regex-based escaping for older browsers
+            // First, handle leading digits and whitespace (must be done before regex)
+            let escaped = str;
+            let hasLeadingHexEscape = false;
+            if (escaped.length > 0) {
+                const firstChar = escaped[0];
+                const firstCode = firstChar.charCodeAt(0);
+                
+                // Escape leading digit (0-9: U+0030-U+0039)
+                if (firstCode >= 0x30 && firstCode <= 0x39) {
+                    const hex = firstCode.toString(16).toUpperCase().padStart(4, '0');
+                    escaped = '\\' + hex + ' ' + escaped.slice(1);
+                    hasLeadingHexEscape = true;
+                }
+                // Escape leading whitespace (space: U+0020, tab: U+0009, etc.)
+                else if (/\s/.test(firstChar)) {
+                    const hex = firstCode.toString(16).toUpperCase().padStart(4, '0');
+                    escaped = '\\' + hex + ' ' + escaped.slice(1);
+                    hasLeadingHexEscape = true;
+                }
+            }
+            
+            // Escape special characters
+            escaped = escaped.replace(/[!"#$%&'()*+,.\/:;<=>?@[\\\]^`{|}~]/g, '\\$&');
+            
+            // Escape internal spaces (replace spaces with \ ), but preserve space in hex escape
+            if (hasLeadingHexEscape) {
+                // Skip the first 6 characters (e.g., "\0030 ") when replacing spaces
+                escaped = escaped.slice(0, 6) + escaped.slice(6).replace(/ /g, '\\ ');
+            } else {
+                escaped = escaped.replace(/ /g, '\\ ');
+            }
+            
+            return escaped;
+        }
+
+        async function savePluginConfig(pluginId) {
+            try {
+                debugLog('Saving config for plugin:', pluginId);
+                
+                // Load schema for type detection
+                let schema = {};
+                try {
+                    const schemaResponse = await fetch(`/api/v3/plugins/schema?plugin_id=${pluginId}`);
+                    const schemaData = await schemaResponse.json();
+                    if (schemaData.status === 'success' && schemaData.data.schema) {
+                        schema = schemaData.data.schema;
+                    }
+                } catch (e) {
+                    console.warn('Could not load schema for type detection:', e);
+                }
+                
+                // Find the form in the active plugin tab
+                // Alpine.js hides/shows elements with display:none, so we look for the currently visible one
+                const allForms = document.querySelectorAll('form[x-on\\:submit\\.prevent]');
+                debugLog('Found forms:', allForms.length);
+                
+                let form = null;
+                for (const f of allForms) {
+                    const parent = f.closest('[x-show]');
+                    if (parent && parent.style.display !== 'none' && parent.offsetParent !== null) {
+                        form = f;
+                        debugLog('Found visible form');
+                        break;
+                    }
+                }
+                
+                if (!form) {
+                    throw new Error('Form not found for plugin ' + pluginId);
+                }
+
+                const formData = new FormData(form);
+                const flatConfig = {};
+
+                // First, collect all checkbox states (including unchecked ones)
+                // Unchecked checkboxes don't appear in FormData, so we need to iterate form elements
+                for (let i = 0; i < form.elements.length; i++) {
+                    const element = form.elements[i];
+                    const name = element.name;
+                    
+                    // Skip elements without names or submit buttons
+                    if (!name || element.type === 'submit' || element.type === 'button') {
+                        continue;
+                    }
+                    
+                    // Handle checkboxes explicitly (both checked and unchecked)
+                    if (element.type === 'checkbox') {
+                        flatConfig[name] = element.checked;
+                    }
+                    // Handle radio buttons
+                    else if (element.type === 'radio') {
+                        if (element.checked) {
+                            flatConfig[name] = element.value;
+                        }
+                    }
+                    // Handle select elements (including multi-select)
+                    else if (element.tagName === 'SELECT') {
+                        if (element.multiple) {
+                            // Multi-select: get all selected options
+                            const selectedValues = Array.from(element.selectedOptions).map(opt => opt.value);
+                            flatConfig[name] = selectedValues;
+                        } else {
+                            // Single select: handled by FormData, but ensure it's captured
+                            if (!(name in flatConfig)) {
+                                flatConfig[name] = element.value;
+                            }
+                        }
+                    }
+                    // Handle textarea
+                    else if (element.tagName === 'TEXTAREA') {
+                        // Textarea: handled by FormData, but ensure it's captured
+                        if (!(name in flatConfig)) {
+                            flatConfig[name] = element.value;
+                        }
+                    }
+                }
+
+                // Now process FormData for other field types
+                for (const [key, value] of formData.entries()) {
+                    // Skip checkboxes - we already handled them above
+                    // Use querySelector to reliably find element by name (handles dot notation)
+                    const escapedKey = escapeCssSelector(key);
+                    const element = form.querySelector(`[name="${escapedKey}"]`);
+                    if (element && element.type === 'checkbox') {
+                        continue; // Already processed
+                    }
+                    // Skip multi-select - we already handled them above
+                    if (element && element.tagName === 'SELECT' && element.multiple) {
+                        continue; // Already processed
+                    }
+                    
+                    // Get schema property type if available
+                    const propSchema = getSchemaPropertyType(schema, key);
+                    const propType = propSchema ? propSchema.type : null;
+                    
+                    // Handle based on schema type or field name patterns
+                    if (propType === 'array') {
+                        // Check if this is a file upload widget (JSON array in hidden input)
+                        if (propSchema && propSchema['x-widget'] === 'file-upload') {
+                            try {
+                                // Unescape HTML entities that were escaped when setting the value
+                                let unescapedValue = value;
+                                if (typeof value === 'string') {
+                                    // Reverse the HTML escaping: &quot; -> ", &#39; -> ', &amp; -> &
+                                    unescapedValue = value
+                                        .replace(/&quot;/g, '"')
+                                        .replace(/&#39;/g, "'")
+                                        .replace(/&lt;/g, '<')
+                                        .replace(/&gt;/g, '>')
+                                        .replace(/&amp;/g, '&');
+                                }
+                                
+                                try {
+                                    const jsonValue = JSON.parse(unescapedValue);
+                                    if (Array.isArray(jsonValue)) {
+                                        flatConfig[key] = jsonValue;
+                                        debugLog(`File upload array field ${key}: parsed JSON array with ${jsonValue.length} items`);
+                                    } else {
+                                        // Fallback to empty array
+                                        flatConfig[key] = [];
+                                    }
+                                } catch (e) {
+                                    console.warn(`Failed to parse JSON for file upload field ${key}:`, e, 'Value:', value);
+                                    // Fallback to empty array
+                                    flatConfig[key] = [];
+                                }
+                            } catch (e) {
+                                // Not valid JSON, use empty array or try comma-separated
+                                if (value && value.trim()) {
+                                    const arrayValue = value.split(',').map(v => v.trim()).filter(v => v);
+                                    flatConfig[key] = arrayValue;
+                                } else {
+                                    flatConfig[key] = [];
+                                }
+                            }
+                        } else {
+                            // Regular array: convert comma-separated string to array
+                            const arrayValue = value ? value.split(',').map(v => v.trim()).filter(v => v) : [];
+                            flatConfig[key] = arrayValue;
+                        }
+                    } else if (propType === 'integer') {
+                        const numValue = parseInt(value, 10);
+                        flatConfig[key] = isNaN(numValue) ? (propSchema && propSchema.default !== undefined ? propSchema.default : 0) : numValue;
+                    } else if (propType === 'number') {
+                        const numValue = parseFloat(value);
+                        flatConfig[key] = isNaN(numValue) ? (propSchema && propSchema.default !== undefined ? propSchema.default : 0) : numValue;
+                    } else if (propType === 'boolean') {
+                        // Boolean from FormData (shouldn't happen for checkboxes, but handle it)
+                        flatConfig[key] = value === 'on' || value === 'true' || value === true;
+                    } else {
+                        // String or other types
+                        // Check if it's a number field by name pattern (fallback if no schema)
+                        if (!propType && (key.includes('duration') || key.includes('interval') || 
+                            key.includes('timeout') || key.includes('teams') || key.includes('fps') ||
+                            key.includes('bits') || key.includes('nanoseconds') || key.includes('hz'))) {
+                            const numValue = parseFloat(value);
+                            if (!isNaN(numValue)) {
+                                flatConfig[key] = Number.isInteger(numValue) ? parseInt(value, 10) : numValue;
+                            } else {
+                                flatConfig[key] = value;
+                            }
+                        } else {
+                            flatConfig[key] = value;
+                        }
+                    }
+                }
+
+                // Handle unchecked checkboxes using schema (if available)
+                if (schema && schema.properties) {
+                    const collectBooleanFields = (props, prefix = '') => {
+                        const boolFields = [];
+                        for (const [key, prop] of Object.entries(props)) {
+                            const fullKey = prefix ? `${prefix}.${key}` : key;
+                            if (prop.type === 'boolean') {
+                                boolFields.push(fullKey);
+                            } else if (prop.type === 'object' && prop.properties) {
+                                boolFields.push(...collectBooleanFields(prop.properties, fullKey));
+                            }
+                        }
+                        return boolFields;
+                    };
+                    
+                    const allBoolFields = collectBooleanFields(schema.properties);
+                    allBoolFields.forEach(key => {
+                        if (!(key in flatConfig)) {
+                            flatConfig[key] = false;
+                        }
+                    });
+                }
+
+                // Convert dot notation to nested object
+                const dotToNested = (obj) => {
+                    const result = {};
+                    for (const key in obj) {
+                        const parts = key.split('.');
+                        let current = result;
+                        for (let i = 0; i < parts.length - 1; i++) {
+                            if (!current[parts[i]]) {
+                                current[parts[i]] = {};
+                            }
+                            current = current[parts[i]];
+                        }
+                        current[parts[parts.length - 1]] = obj[key];
+                    }
+                    return result;
+                };
+
+                const config = dotToNested(flatConfig);
+
+                debugLog('Saving config for', pluginId, ':', config);
+                debugLog('Flat config before nesting:', flatConfig);
+
+                // Save to backend
+                const response = await fetch('/api/v3/plugins/config', {
+                    method: 'POST',
+                    headers: { 'Content-Type': 'application/json' },
+                    body: JSON.stringify({ plugin_id: pluginId, config })
+                });
+
+                let data;
+                try {
+                    data = await response.json();
+                } catch (e) {
+                    throw new Error(`Failed to parse server response: ${response.status} ${response.statusText}`);
+                }
+
+                if (!response.ok || data.status !== 'success') {
+                    let errorMessage = data.message || 'Failed to save configuration';
+                    if (data.validation_errors && Array.isArray(data.validation_errors)) {
+                        errorMessage += '\n\nValidation errors:\n' + data.validation_errors.join('\n');
+                    }
+                    throw new Error(errorMessage);
+                } else {
+                    showNotification(`Configuration saved for ${pluginId}`, 'success');
+                }
+
+            } catch (error) {
+                console.error('Error saving plugin configuration:', error);
+                showNotification('Error saving plugin configuration: ' + error.message, 'error');
+            }
+        }
+        
+        // Notification helper function
+        // Fix invalid number inputs before form submission
+        // This prevents "invalid form control is not focusable" errors
+        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;
+                    }
+                }
+            });
+        };
+        
+        // showNotification is provided by notification.js widget
+        // This fallback is only used if the widget hasn't loaded yet
+        if (typeof window.showNotification !== 'function') {
+            window.showNotification = function(message, type = 'info') {
+                debugLog(`[${type.toUpperCase()}]`, message);
+                const notification = document.createElement('div');
+                notification.className = `fixed top-4 right-4 px-6 py-3 rounded-lg shadow-lg z-50 ${
+                    type === 'success' ? 'bg-green-500' : type === 'error' ? 'bg-red-500' : 'bg-blue-500'
+                } text-white`;
+                notification.textContent = message;
+                document.body.appendChild(notification);
+                setTimeout(() => { notification.style.opacity = '0'; setTimeout(() => notification.remove(), 500); }, 3000);
+            };
+        }
+
+        // Section toggle function - already defined earlier, but ensure it's not overwritten
+        // (duplicate definition removed - function is defined in early script block above)
+
+        // Plugin config handler functions (idempotent initialization)
+        if (!window.__pluginConfigHandlersInitialized) {
+            window.__pluginConfigHandlersInitialized = true;
+            
+            // Initialize state on window object
+            window.pluginConfigRefreshInProgress = window.pluginConfigRefreshInProgress || new Set();
+            
+            // Validate plugin config form and show helpful error messages
+            window.validatePluginConfigForm = function(form, pluginId) {
+                // Check HTML5 validation
+                if (!form.checkValidity()) {
+                    // Find all invalid fields
+                    const invalidFields = Array.from(form.querySelectorAll(':invalid'));
+                    const errors = [];
+                    let firstInvalidField = null;
+                    
+                    invalidFields.forEach((field, index) => {
+                        // Build error message
+                        let fieldName = field.name || field.id || 'field';
+                        // Make field name more readable (remove plugin ID prefix, convert dots/underscores)
+                        fieldName = fieldName.replace(new RegExp('^' + pluginId + '-'), '')
+                                            .replace(/\./g, ' → ')
+                                            .replace(/_/g, ' ')
+                                            .replace(/\b\w/g, l => l.toUpperCase()); // Capitalize words
+                        
+                        let errorMsg = field.validationMessage || 'Invalid value';
+                        
+                        // Get more specific error message based on validation state
+                        if (field.validity.valueMissing) {
+                            errorMsg = 'This field is required';
+                        } else if (field.validity.rangeUnderflow) {
+                            errorMsg = `Value must be at least ${field.min || 'the minimum'}`;
+                        } else if (field.validity.rangeOverflow) {
+                            errorMsg = `Value must be at most ${field.max || 'the maximum'}`;
+                        } else if (field.validity.stepMismatch) {
+                            errorMsg = `Value must be a multiple of ${field.step || 1}`;
+                        } else if (field.validity.typeMismatch) {
+                            errorMsg = 'Invalid format (e.g., text in number field)';
+                        } else if (field.validity.patternMismatch) {
+                            errorMsg = 'Value does not match required pattern';
+                        } else if (field.validity.tooShort) {
+                            errorMsg = `Value must be at least ${field.minLength} characters`;
+                        } else if (field.validity.tooLong) {
+                            errorMsg = `Value must be at most ${field.maxLength} characters`;
+                        } else if (field.validity.badInput) {
+                            errorMsg = 'Invalid input type';
+                        }
+                        
+                        errors.push(`${fieldName}: ${errorMsg}`);
+                        
+                        // Track first invalid field for focusing
+                        if (index === 0) {
+                            firstInvalidField = field;
+                        }
+                        
+                        // If field is in a collapsed section, expand it
+                        const nestedContent = field.closest('.nested-content');
+                        if (nestedContent && nestedContent.classList.contains('hidden')) {
+                            // Find the toggle button for this section
+                            const sectionId = nestedContent.id;
+                            if (sectionId) {
+                                // Try multiple selectors to find the toggle button
+                                const toggleBtn = document.querySelector(`button[aria-controls="${sectionId}"], button[onclick*="${sectionId}"], [data-toggle-section="${sectionId}"]`) ||
+                                                 nestedContent.previousElementSibling?.querySelector('button');
+                                if (toggleBtn && toggleBtn.onclick) {
+                                    toggleBtn.click(); // Expand the section
+                                }
+                            }
+                        }
+                    });
+                    
+                    // Focus and scroll to first invalid field after a brief delay
+                    // (allows collapsed sections to expand first)
+                    setTimeout(() => {
+                        if (firstInvalidField) {
+                            firstInvalidField.scrollIntoView({ behavior: 'smooth', block: 'center' });
+                            firstInvalidField.focus();
+                        }
+                    }, 200);
+                    
+                    // Show error notification with details
+                    if (errors.length > 0) {
+                        // Format error message nicely
+                        const errorList = errors.slice(0, 5).join('\n'); // Show first 5 errors
+                        const moreErrors = errors.length > 5 ? `\n... and ${errors.length - 5} more error(s)` : '';
+                        const errorMessage = `Validation failed:\n${errorList}${moreErrors}`;
+                        
+                        if (typeof showNotification === 'function') {
+                            showNotification(errorMessage, 'error');
+                        } else {
+                            alert(errorMessage); // Fallback if showNotification not available
+                        }
+                        
+                        // Also log to console for debugging
+                        console.error('Form validation errors:', errors);
+                    }
+                    
+                    // Report validation failure to browser (shows native validation tooltips)
+                    form.reportValidity();
+                    
+                    return false; // Prevent form submission
+                }
+                
+                return true; // Validation passed
+            };
+            
+            // Handle config save response with detailed error logging
+            window.handleConfigSave = function(event, pluginId) {
+                const btn = event.target.querySelector('[type=submit]');
+                if (btn) btn.disabled = false;
+                
+                const xhr = event.detail.xhr;
+                const status = xhr?.status || 0;
+                
+                // Check if request was successful (2xx status codes)
+                if (status >= 200 && status < 300) {
+                    // Try to get message from response JSON
+                    let message = 'Configuration saved successfully!';
+                    try {
+                        if (xhr?.responseJSON?.message) {
+                            message = xhr.responseJSON.message;
+                        } else if (xhr?.responseText) {
+                            const responseData = JSON.parse(xhr.responseText);
+                            message = responseData.message || message;
+                        }
+                    } catch (e) {
+                        // Use default message if parsing fails
+                    }
+                    showNotification(message, 'success');
+                } else {
+                    // Request failed - log detailed error information
+                    console.error('Config save failed:', {
+                        status: status,
+                        statusText: xhr?.statusText,
+                        responseText: xhr?.responseText
+                    });
+                    
+                    // Try to parse error response
+                    let errorMessage = 'Failed to save configuration';
+                    try {
+                        if (xhr?.responseJSON) {
+                            const errorData = xhr.responseJSON;
+                            errorMessage = errorData.message || errorData.details || errorMessage;
+                            if (errorData.validation_errors) {
+                                errorMessage += ': ' + errorData.validation_errors.join(', ');
+                            }
+                        } else if (xhr?.responseText) {
+                            const errorData = JSON.parse(xhr.responseText);
+                            errorMessage = errorData.message || errorData.details || errorMessage;
+                            if (errorData.validation_errors) {
+                                errorMessage += ': ' + errorData.validation_errors.join(', ');
+                            }
+                        }
+                    } catch (e) {
+                        // If parsing fails, use status text
+                        errorMessage = xhr?.statusText || errorMessage;
+                    }
+                    
+                    showNotification(errorMessage, 'error');
+                }
+            };
+            
+            // Handle toggle response
+            window.handleToggleResponse = function(event, pluginId) {
+                const xhr = event.detail.xhr;
+                const status = xhr?.status || 0;
+                
+                if (status >= 200 && status < 300) {
+                    // Update UI in place instead of refreshing to avoid duplication
+                    const checkbox = document.getElementById(`plugin-enabled-${pluginId}`);
+                    const label = checkbox?.nextElementSibling;
+                    
+                    if (checkbox && label) {
+                        const isEnabled = checkbox.checked;
+                        label.textContent = isEnabled ? 'Enabled' : 'Disabled';
+                        label.className = `ml-2 text-sm ${isEnabled ? 'text-green-600' : 'text-gray-500'}`;
+                    }
+                    
+                    // Try to get message from response
+                    let message = 'Plugin status updated';
+                    try {
+                        if (xhr?.responseJSON?.message) {
+                            message = xhr.responseJSON.message;
+                        } else if (xhr?.responseText) {
+                            const responseData = JSON.parse(xhr.responseText);
+                            message = responseData.message || message;
+                        }
+                    } catch (e) {
+                        // Use default message
+                    }
+                    showNotification(message, 'success');
+                } else {
+                    // Revert checkbox state on error
+                    const checkbox = document.getElementById(`plugin-enabled-${pluginId}`);
+                    if (checkbox) {
+                        checkbox.checked = !checkbox.checked;
+                    }
+                    
+                    // Try to get error message from response
+                    let errorMessage = 'Failed to update plugin status';
+                    try {
+                        if (xhr?.responseJSON?.message) {
+                            errorMessage = xhr.responseJSON.message;
+                        } else if (xhr?.responseText) {
+                            const errorData = JSON.parse(xhr.responseText);
+                            errorMessage = errorData.message || errorData.details || errorMessage;
+                        }
+                    } catch (e) {
+                        // Use default message
+                    }
+                    showNotification(errorMessage, 'error');
+                }
+            };
+            
+            // Handle plugin update response
+            window.handlePluginUpdate = function(event, pluginId) {
+                const xhr = event.detail.xhr;
+                const status = xhr?.status || 0;
+                
+                // Check if request was successful (2xx status)
+                if (status >= 200 && status < 300) {
+                    // Try to parse the response to get the actual message from server
+                    let message = 'Plugin updated successfully';
+                    
+                    if (xhr && xhr.responseText) {
+                        try {
+                            const data = JSON.parse(xhr.responseText);
+                            // Use the server's message, ensuring it says "update" not "save"
+                            message = data.message || message;
+                            // Ensure message is about updating, not saving
+                            if (message.toLowerCase().includes('save') && !message.toLowerCase().includes('update')) {
+                                message = message.replace(/save/i, 'update');
+                            }
+                        } catch (e) {
+                            // If parsing fails, use default message
+                            console.warn('Could not parse update response:', e);
+                        }
+                    }
+                    
+                    showNotification(message, 'success');
+                } else {
+                    console.error('Plugin update failed:', {
+                        status: status,
+                        statusText: xhr?.statusText,
+                        responseText: xhr?.responseText
+                    });
+                    
+                    // Try to parse error response for better error message
+                    let errorMessage = 'Failed to update plugin';
+                    if (xhr?.responseText) {
+                        try {
+                            const errorData = JSON.parse(xhr.responseText);
+                            errorMessage = errorData.message || errorMessage;
+                        } catch (e) {
+                            // If parsing fails, use default
+                        }
+                    }
+                    
+                    showNotification(errorMessage, 'error');
+                }
+            };
+            
+            // Refresh plugin config (with duplicate prevention)
+            window.refreshPluginConfig = function(pluginId) {
+                // Prevent concurrent refreshes
+                if (window.pluginConfigRefreshInProgress.has(pluginId)) {
+                    return;
+                }
+                
+                const container = document.getElementById(`plugin-config-${pluginId}`);
+                if (container && window.htmx) {
+                    window.pluginConfigRefreshInProgress.add(pluginId);
+                    
+                    // Clear container first, then reload
+                    container.innerHTML = '';
+                    window.htmx.ajax('GET', `/v3/partials/plugin-config/${pluginId}`, {
+                        target: container,
+                        swap: 'innerHTML'
+                    });
+                    
+                    // Clear flag after delay
+                    setTimeout(() => {
+                        window.pluginConfigRefreshInProgress.delete(pluginId);
+                    }, 1000);
+                }
+            };
+            
+            // Plugin action handlers
+            window.runPluginOnDemand = function(pluginId) {
+                if (typeof window.openOnDemandModal === 'function') {
+                    window.openOnDemandModal(pluginId);
+                } else {
+                    showNotification('On-demand modal not available', 'error');
+                }
+            };
+            
+            window.stopOnDemand = function() {
+                if (typeof window.requestOnDemandStop === 'function') {
+                    window.requestOnDemandStop({});
+                } else {
+                    showNotification('Stop function not available', 'error');
+                }
+            };
+            
+            window.executePluginAction = function(actionId, actionIndex, pluginId) {
+                fetch(`/api/v3/plugins/action?plugin_id=${pluginId}&action_id=${actionId}`, {
+                    method: 'POST'
+                })
+                .then(r => r.json())
+                .then(data => {
+                    if (data.status === 'success') {
+                        showNotification(data.message || 'Action executed', 'success');
+                    } else {
+                        showNotification(data.message || 'Action failed', 'error');
+                    }
+                })
+                .catch(err => {
+                    showNotification('Failed to execute action', 'error');
+                });
+            };
+        }
+
+        function getAppComponent() {
+            if (window.Alpine) {
+                const appElement = document.querySelector('[x-data="app()"]');
+                if (appElement && appElement._x_dataStack && appElement._x_dataStack[0]) {
+                    return appElement._x_dataStack[0];
+                }
+            }
+            return null;
+        }
+
+        async function updatePlugin(pluginId) {
+            try {
+                showNotification(`Updating ${pluginId}...`, 'info');
+
+                const response = await fetch('/api/v3/plugins/update', {
+                    method: 'POST',
+                    headers: { 'Content-Type': 'application/json' },
+                    body: JSON.stringify({ plugin_id: pluginId })
+                });
+                const data = await response.json();
+
+                showNotification(data.message, data.status);
+
+                if (data.status === 'success') {
+                    // Refresh the plugin list
+                    const appComponent = getAppComponent();
+                    if (appComponent && typeof appComponent.loadInstalledPlugins === 'function') {
+                        await appComponent.loadInstalledPlugins();
+                    }
+                }
+            } catch (error) {
+                showNotification('Error updating plugin: ' + error.message, 'error');
+            }
+        }
+
+        async function updateAllPlugins() {
+            try {
+                const plugins = Array.isArray(window.installedPlugins) ? window.installedPlugins : [];
+
+                if (!plugins.length) {
+                    showNotification('No installed plugins to update.', 'warning');
+                    return;
+                }
+
+                showNotification(`Checking ${plugins.length} plugin${plugins.length === 1 ? '' : 's'} for updates...`, 'info');
+
+                let successCount = 0;
+                let failureCount = 0;
+
+                for (const plugin of plugins) {
+                    const pluginId = plugin.id;
+                    const pluginName = plugin.name || pluginId;
+
+                    try {
+                        const response = await fetch('/api/v3/plugins/update', {
+                            method: 'POST',
+                            headers: { 'Content-Type': 'application/json' },
+                            body: JSON.stringify({ plugin_id: pluginId })
+                        });
+
+                        const data = await response.json();
+                        const status = data.status || 'info';
+                        const message = data.message || `Checked ${pluginName}`;
+
+                        showNotification(message, status);
+
+                        if (status === 'success') {
+                            successCount += 1;
+                        } else {
+                            failureCount += 1;
+                        }
+                    } catch (error) {
+                        failureCount += 1;
+                        showNotification(`Error updating ${pluginName}: ${error.message}`, 'error');
+                    }
+                }
+
+                const appComponent = getAppComponent();
+                if (appComponent && typeof appComponent.loadInstalledPlugins === 'function') {
+                    await appComponent.loadInstalledPlugins();
+                }
+
+                if (failureCount === 0) {
+                    showNotification(`Finished checking ${successCount} plugin${successCount === 1 ? '' : 's'} for updates.`, 'success');
+                } else {
+                    showNotification(`Updated ${successCount} plugin${successCount === 1 ? '' : 's'} with ${failureCount} failure${failureCount === 1 ? '' : 's'}. Check logs for details.`, 'error');
+                }
+            } catch (error) {
+                console.error('Bulk plugin update failed:', error);
+                showNotification('Failed to update all plugins: ' + error.message, 'error');
+            }
+        }
+
+        window.updateAllPlugins = updateAllPlugins;
+
+
+        async function uninstallPlugin(pluginId) {
+            try {
+                // Get plugin info from window.installedPlugins
+                const plugin = window.installedPlugins ? window.installedPlugins.find(p => p.id === pluginId) : null;
+                const pluginName = plugin ? (plugin.name || pluginId) : pluginId;
+
+                if (!confirm(`Are you sure you want to uninstall ${pluginName}?`)) {
+                    return;
+                }
+
+                showNotification(`Uninstalling ${pluginName}...`, 'info');
+
+                const response = await fetch('/api/v3/plugins/uninstall', {
+                    method: 'POST',
+                    headers: { 'Content-Type': 'application/json' },
+                    body: JSON.stringify({ plugin_id: pluginId })
+                });
+                const data = await response.json();
+
+                // Check if operation was queued
+                if (data.status === 'success' && data.data && data.data.operation_id) {
+                    // Operation was queued, poll for completion
+                    const operationId = data.data.operation_id;
+                    showNotification(`Uninstall queued for ${pluginName}...`, 'info');
+                    await pollUninstallOperation(operationId, pluginId, pluginName);
+                } else if (data.status === 'success') {
+                    // Direct uninstall completed immediately
+                    showNotification(data.message || `Plugin ${pluginName} uninstalled successfully`, 'success');
+                    // Refresh the plugin list
+                    await app.loadInstalledPlugins();
+                } else {
+                    // Error response
+                    showNotification(data.message || 'Failed to uninstall plugin', data.status || 'error');
+                }
+            } catch (error) {
+                showNotification('Error uninstalling plugin: ' + error.message, 'error');
+            }
+        }
+
+        async function pollUninstallOperation(operationId, pluginId, pluginName, maxAttempts = 60, attempt = 0) {
+            if (attempt >= maxAttempts) {
+                showNotification(`Uninstall operation timed out for ${pluginName}`, 'error');
+                // Refresh plugin list to see actual state
+                await app.loadInstalledPlugins();
+                return;
+            }
+
+            try {
+                const response = await fetch(`/api/v3/plugins/operation/${operationId}`);
+                const data = await response.json();
+                
+                if (data.status === 'success' && data.data) {
+                    const operation = data.data;
+                    const status = operation.status;
+                    
+                    if (status === 'completed') {
+                        // Operation completed successfully
+                        showNotification(`Plugin ${pluginName} uninstalled successfully`, 'success');
+                        await app.loadInstalledPlugins();
+                    } else if (status === 'failed') {
+                        // Operation failed
+                        const errorMsg = operation.error || operation.message || `Failed to uninstall ${pluginName}`;
+                        showNotification(errorMsg, 'error');
+                        // Refresh plugin list to see actual state
+                        await app.loadInstalledPlugins();
+                    } else if (status === 'pending' || status === 'in_progress') {
+                        // Still in progress, poll again
+                        await new Promise(resolve => setTimeout(resolve, 1000)); // Wait 1 second
+                        await pollUninstallOperation(operationId, pluginId, pluginName, maxAttempts, attempt + 1);
+                    } else {
+                        // Unknown status, poll again
+                        await new Promise(resolve => setTimeout(resolve, 1000));
+                        await pollUninstallOperation(operationId, pluginId, pluginName, maxAttempts, attempt + 1);
+                    }
+                } else {
+                    // Error getting operation status, try again
+                    await new Promise(resolve => setTimeout(resolve, 1000));
+                    await pollUninstallOperation(operationId, pluginId, pluginName, maxAttempts, attempt + 1);
+                }
+            } catch (error) {
+                console.error('Error polling operation status:', error);
+                // On error, refresh plugin list to see actual state
+                await app.loadInstalledPlugins();
+            }
+        }
+
+        // Assign to window for global access
+        window.uninstallPlugin = uninstallPlugin;
+
+        async function refreshPlugin(pluginId) {
+            try {
+                // Switch to the plugin manager tab briefly to refresh
+                const originalTab = app.activeTab;
+                app.activeTab = 'plugins';
+
+                // Wait a moment then switch back
+                setTimeout(() => {
+                    app.activeTab = originalTab;
+                    app.showNotification(`Refreshed ${pluginId}`, 'success');
+                }, 100);
+
+            } catch (error) {
+                app.showNotification('Error refreshing plugin: ' + error.message, 'error');
+            }
+        }
+
+        // Format commit information for display
+        function formatCommitInfo(commit, branch) {
+            if (!commit && !branch) return 'Unknown';
+            const shortCommit = commit ? String(commit).substring(0, 7) : '';
+            const branchText = branch ? String(branch) : '';
+
+            if (branchText && shortCommit) {
+                return `${branchText} · ${shortCommit}`;
+            }
+            if (branchText) {
+                return branchText;
+            }
+            if (shortCommit) {
+                return shortCommit;
+            }
+            return 'Latest';
+        }
+
+        // Format date for display
+        function formatDateInfo(dateString) {
+            if (!dateString) return 'Unknown';
+            
+            try {
+                const date = new Date(dateString);
+                const now = new Date();
+                const diffTime = Math.abs(now - date);
+                const diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24));
+                
+                if (diffDays < 1) {
+                    return 'Today';
+                } else if (diffDays < 2) {
+                    return 'Yesterday';
+                } else if (diffDays < 7) {
+                    return `${diffDays} days ago`;
+                } else if (diffDays < 30) {
+                    const weeks = Math.floor(diffDays / 7);
+                    return `${weeks} ${weeks === 1 ? 'week' : 'weeks'} ago`;
+                } else {
+                    // Return formatted date for older items
+                    return date.toLocaleDateString('en-US', { year: 'numeric', month: 'short', day: 'numeric' });
+                }
+            } catch (e) {
+                return dateString;
+            }
+        }
+
+        // Make functions available to Alpine.js
+        window.formatCommitInfo = formatCommitInfo;
+        window.formatDateInfo = formatDateInfo;
+
diff --git a/web_interface/static/v3/js/htmx-config.js b/web_interface/static/v3/js/htmx-config.js
new file mode 100644
index 00000000..8b9d6109
--- /dev/null
+++ b/web_interface/static/v3/js/htmx-config.js
@@ -0,0 +1,256 @@
+/* global debugLog */
+// HTMX swap/script-execution configuration and section toggle helpers
+// Extracted from templates/v3/base.html so browsers cache it as a static asset.
+        // Configure HTMX to evaluate scripts in swapped content and fix insertBefore errors
+        (function() {
+            function setupScriptExecution() {
+                if (document.body) {
+                    // Fix HTMX insertBefore errors by validating targets before swap
+                    document.body.addEventListener('htmx:beforeSwap', function(event) {
+                        try {
+                            const target = event.detail.target;
+                            if (!target) {
+                                console.warn('[HTMX] Target is null, skipping swap');
+                                event.detail.shouldSwap = false;
+                                return false;
+                            }
+                            
+                            // Check if target is a valid DOM element
+                            if (!(target instanceof Element)) {
+                                console.warn('[HTMX] Target is not a valid Element, skipping swap');
+                                event.detail.shouldSwap = false;
+                                return false;
+                            }
+                            
+                            // Check if target has a parent node (required for insertBefore)
+                            if (!target.parentNode) {
+                                console.warn('[HTMX] Target has no parent node, skipping swap');
+                                event.detail.shouldSwap = false;
+                                return false;
+                            }
+                            
+                            // Ensure target is in the DOM
+                            if (!document.body.contains(target) && !document.head.contains(target)) {
+                                console.warn('[HTMX] Target is not in DOM, skipping swap');
+                                event.detail.shouldSwap = false;
+                                return false;
+                            }
+                            
+                            // Additional check: ensure parent is also in DOM
+                            if (target.parentNode && !document.body.contains(target.parentNode) && !document.head.contains(target.parentNode)) {
+                                console.warn('[HTMX] Target parent is not in DOM, skipping swap');
+                                event.detail.shouldSwap = false;
+                                return false;
+                            }
+                            
+                            // All checks passed, allow swap
+                            return true;
+                        } catch (e) {
+                            // If validation fails, cancel swap
+                            console.warn('[HTMX] Error validating target:', e);
+                            event.detail.shouldSwap = false;
+                            return false;
+                        }
+                    });
+                    
+                    // Suppress HTMX insertBefore errors and other noisy errors - they're harmless but noisy
+                    const originalError = console.error;
+                    const originalWarn = console.warn;
+                    
+                    console.error = function(...args) {
+                        const errorStr = args.join(' ');
+                        const errorStack = args.find(arg => arg && typeof arg === 'string' && arg.includes('htmx')) || '';
+                        
+                        // Suppress HTMX insertBefore errors (comprehensive check)
+                        // These occur when HTMX tries to swap content but the target element is null
+                        // Usually happens due to timing/race conditions and is harmless
+                        if (errorStr.includes("insertBefore") || 
+                            errorStr.includes("Cannot read properties of null") ||
+                            errorStr.includes("reading 'insertBefore'")) {
+                            // Check if it's from HTMX by looking at stack trace or error string
+                            // Also check the call stack if available
+                            const isHtmxError = errorStr.includes('htmx') ||
+                                               errorStack.includes('htmx') ||
+                                               args.some(arg => {
+                                                   if (typeof arg === 'string') {
+                                                       return arg.includes('htmx');
+                                                   }
+                                                   // Check error objects for stack traces
+                                                   if (arg && typeof arg === 'object' && arg.stack) {
+                                                       return arg.stack.includes('htmx');
+                                                   }
+                                                   return false;
+                                               });
+                            
+                            if (isHtmxError) {
+                                return; // Suppress - this is a harmless HTMX timing/race condition issue
+                            }
+                        }
+                        
+                        // Suppress script execution errors from malformed HTML
+                        if (errorStr.includes("Failed to execute 'appendChild' on 'Node'") ||
+                            errorStr.includes("Failed to execute 'insertBefore' on 'Node'")) {
+                            if (errorStr.includes('Unexpected token')) {
+                                return; // Suppress malformed HTML errors
+                            }
+                        }
+                        originalError.apply(console, args);
+                    };
+                    
+                    console.warn = function(...args) {
+                        const warnStr = args.join(' ');
+                        // Suppress Permissions-Policy warnings (harmless browser warnings)
+                        if (warnStr.includes('Permissions-Policy header') ||
+                            warnStr.includes('Unrecognized feature') ||
+                            warnStr.includes('Origin trial controlled feature') ||
+                            warnStr.includes('browsing-topics') ||
+                            warnStr.includes('run-ad-auction') ||
+                            warnStr.includes('join-ad-interest-group') ||
+                            warnStr.includes('private-state-token') ||
+                            warnStr.includes('private-aggregation') ||
+                            warnStr.includes('attribution-reporting')) {
+                            return; // Suppress - these are harmless browser feature warnings
+                        }
+                        originalWarn.apply(console, args);
+                    };
+                    
+                    // Handle HTMX errors gracefully with detailed logging
+                    document.body.addEventListener('htmx:responseError', function(event) {
+                        const detail = event.detail;
+                        const xhr = detail.xhr;
+                        const target = detail.target;
+                        
+                        // Enhanced error logging
+                        console.error('HTMX response error:', {
+                            status: xhr?.status,
+                            statusText: xhr?.statusText,
+                            url: xhr?.responseURL,
+                            target: target?.id || target?.tagName,
+                            responseText: xhr?.responseText
+                        });
+                        
+                        // For form submissions, log field names only — values
+                        // may contain API keys, passwords, or other secrets
+                        // that must never reach the console.
+                        if (target && target.tagName === 'FORM') {
+                            const formData = new FormData(target);
+                            const fieldNames = [];
+                            for (const [key] of formData.entries()) {
+                                fieldNames.push(key);
+                            }
+                            console.error('Form fields (values redacted):', fieldNames);
+                            
+                            // Try to parse error response for validation details
+                            if (xhr?.responseText) {
+                                try {
+                                    const errorData = JSON.parse(xhr.responseText);
+                                    console.error('Error details:', {
+                                        message: errorData.message,
+                                        details: errorData.details,
+                                        validation_errors: errorData.validation_errors,
+                                        context: errorData.context
+                                    });
+                                } catch {
+                                    console.error('Error response (non-JSON):', xhr.responseText.substring(0, 500));
+                                }
+                            }
+                        }
+                    });
+                    
+                    document.body.addEventListener('htmx:swapError', function(event) {
+                        // Log but don't break the app
+                        console.warn('HTMX swap error:', event.detail);
+                    });
+
+                    // Execute <script> tags in swapped content ourselves, on
+                    // htmx:afterSwap (synchronous, right after the swap) rather
+                    // than relying on htmx's own script handling, which runs
+                    // during its later "settle" phase (~20ms after swap, per
+                    // htmx's defaultSettleDelay). Alpine's MutationObserver
+                    // processes newly-inserted x-data elements synchronously
+                    // as soon as the swap lands, which is BEFORE htmx's settle
+                    // phase - so any partial whose x-data component function
+                    // (e.g. wifiSetup()) is defined by an inline <script> in
+                    // that same partial would have that script still un-run
+                    // when Alpine evaluates x-data, permanently failing with
+                    // "wifiSetup is not defined" (Alpine does not retry).
+                    // Disable htmx's own native script re-execution so the
+                    // same script doesn't also run a second time via settle.
+                    if (typeof htmx !== 'undefined' && htmx.config) {
+                        htmx.config.allowScriptTags = false;
+                    }
+                    document.body.addEventListener('htmx:afterSwap', function(event) {
+                        const target = event.detail && event.detail.target;
+                        if (!target || !(target instanceof Element)) return;
+                        target.querySelectorAll('script').forEach(function(oldScript) {
+                            const newScript = document.createElement('script');
+                            for (const attr of oldScript.attributes) {
+                                newScript.setAttribute(attr.name, attr.value);
+                            }
+                            newScript.textContent = oldScript.textContent;
+                            oldScript.replaceWith(newScript);
+                        });
+                    });
+
+                    // Mark tab containers as loaded once their content settles, so switching
+                    // away and back doesn't re-fetch. Scoped to the "loadtab" trigger (tab
+                    // containers only) so modals and plugin config panels can still reload.
+                    document.body.addEventListener('htmx:afterSettle', function(event) {
+                        if (event.detail && event.detail.target) {
+                            const target = event.detail.target;
+                            const trigger = target.getAttribute('hx-trigger') || '';
+                            if (trigger.includes('loadtab')) {
+                                target.setAttribute('data-loaded', 'true');
+                            }
+                        }
+                    });
+                } else {
+                    if (document.readyState === 'loading') {
+                        document.addEventListener('DOMContentLoaded', setupScriptExecution);
+                    } else {
+                        setTimeout(setupScriptExecution, 100);
+                    }
+                }
+            }
+            setupScriptExecution();
+            
+            // Section toggle function - define early so it's available for HTMX-loaded content
+            window.toggleSection = function(sectionId) {
+                const section = document.getElementById(sectionId);
+                const icon = document.getElementById(sectionId + '-icon');
+                if (!section) {
+                    console.warn('toggleSection: Could not find section for', sectionId);
+                    return;
+                }
+                if (!icon) {
+                    console.warn('toggleSection: Could not find icon for', sectionId);
+                    return;
+                }
+                
+                // Check if currently hidden by checking both class and computed display
+                const hasHiddenClass = section.classList.contains('hidden');
+                const computedDisplay = window.getComputedStyle(section).display;
+                const isHidden = hasHiddenClass || computedDisplay === 'none';
+                
+                if (isHidden) {
+                    // Show the section - remove hidden class and explicitly set display to block
+                    section.classList.remove('hidden');
+                    section.style.display = 'block';
+                    icon.classList.remove('fa-chevron-right');
+                    icon.classList.add('fa-chevron-down');
+                } else {
+                    // Hide the section - add hidden class and set display to none
+                    section.classList.add('hidden');
+                    section.style.display = 'none';
+                    icon.classList.remove('fa-chevron-down');
+                    icon.classList.add('fa-chevron-right');
+                }
+
+                // Keep assistive tech in sync: any toggle button that declares
+                // aria-controls for this section mirrors the expanded state.
+                const controlBtn = document.querySelector(`[aria-controls="${sectionId}"]`);
+                if (controlBtn) {
+                    controlBtn.setAttribute('aria-expanded', String(isHidden));
+                }
+            };
+        })();
diff --git a/web_interface/static/v3/js/settings-search.js b/web_interface/static/v3/js/settings-search.js
index 5c794a00..7619c2a0 100644
--- a/web_interface/static/v3/js/settings-search.js
+++ b/web_interface/static/v3/js/settings-search.js
@@ -173,7 +173,14 @@
 
     function setActiveTab(tab) {
         var data = getAppData();
-        if (data) { data.activeTab = tab; return true; }
+        if (data) {
+            data.activeTab = tab;
+            // Navigating from a search result should also dismiss the mobile
+            // nav drawer (harmless no-op on desktop, where the drawer CSS
+            // doesn't apply).
+            if ('mobileNavOpen' in data) data.mobileNavOpen = false;
+            return true;
+        }
         return false;
     }
 
diff --git a/web_interface/static/v3/js/widgets/custom-feeds.js b/web_interface/static/v3/js/widgets/custom-feeds.js
index 7f52d335..c14c92ea 100644
--- a/web_interface/static/v3/js/widgets/custom-feeds.js
+++ b/web_interface/static/v3/js/widgets/custom-feeds.js
@@ -209,6 +209,7 @@
                 const removeButton = document.createElement('button');
                 removeButton.type = 'button';
                 removeButton.className = 'text-red-600 hover:text-red-800 px-2 py-1';
+                removeButton.setAttribute('aria-label', 'Remove feed');
                 removeButton.addEventListener('click', function() {
                     window.removeCustomFeedRow(this);
                 });
@@ -333,6 +334,7 @@
         const removeButton = document.createElement('button');
         removeButton.type = 'button';
         removeButton.className = 'text-red-600 hover:text-red-800 px-2 py-1';
+        removeButton.setAttribute('aria-label', 'Remove feed');
         removeButton.addEventListener('click', function() {
             window.removeCustomFeedRow(this);
         });
@@ -410,6 +412,9 @@
         // carries the result in a top-level "uploaded_files" key, not nested
         // under "data". file-upload-single.js's working upload flow uses this
         // same contract.
+        // Backend contract (api_v3.upload_plugin_asset): field must be named
+        // "files" (request.files.getlist('files')), and the response carries
+        // results in a top-level "uploaded_files" key, not nested under "data".
         formData.append('files', file);
         formData.append('plugin_id', pluginId);
 
@@ -501,8 +506,6 @@
                     // Append container to logoCell
                     logoCell.appendChild(container);
                 }
-                // Allow re-uploading the same file
-                event.target.value = '';
             } else {
                 const notifyFn = window.showNotification || alert;
                 notifyFn('Upload failed: ' + (data.message || 'Unknown error'), 'error');
@@ -512,6 +515,12 @@
             console.error('Upload error:', error);
             const notifyFn = window.showNotification || alert;
             notifyFn('Upload failed: ' + error.message, 'error');
+        })
+        .finally(() => {
+            // Reset regardless of outcome, so the same file can be re-selected
+            // to retry after a failure (browsers won't fire "change" again
+            // for an input that still holds that exact file).
+            event.target.value = '';
         });
     };
 
diff --git a/web_interface/static/v3/js/widgets/notification.js b/web_interface/static/v3/js/widgets/notification.js
index 5fa43f0d..14805bb6 100644
--- a/web_interface/static/v3/js/widgets/notification.js
+++ b/web_interface/static/v3/js/widgets/notification.js
@@ -58,6 +58,10 @@
 
     // Track active notifications
     let activeNotifications = [];
+    // onAction callbacks for notifications with an inline action button,
+    // keyed by notification id (cleaned up on dismiss). A Map rather than a
+    // plain object so ids can never collide with prototype properties.
+    const actionCallbacks = new Map();
     let notificationCounter = 0;
 
     /**
@@ -113,6 +117,7 @@
 
         // Remove from tracking array
         activeNotifications = activeNotifications.filter(id => id !== notificationId);
+        actionCallbacks.delete(notificationId);
     }
 
     /**
@@ -158,6 +163,20 @@
 
         html += `<span class="flex-1 text-sm">${escapeHtml(message)}</span>`;
 
+        // Optional inline action button (e.g. "Restart Now" on a restart nudge).
+        // The callback is stored by id and invoked via triggerAction, which
+        // also dismisses the notification.
+        if (options.actionLabel && typeof options.onAction === 'function') {
+            actionCallbacks.set(notificationId, options.onAction);
+            html += `
+                <button type="button"
+                        onclick="window.LEDMatrixWidgets.get('notification').triggerAction('${notificationId}')"
+                        class="flex-shrink-0 ml-2 px-3 py-1 text-xs font-semibold rounded-md bg-white bg-opacity-20 hover:bg-opacity-30 transition-colors duration-150">
+                    ${escapeHtml(options.actionLabel)}
+                </button>
+            `;
+        }
+
         if (dismissible) {
             html += `
                 <button type="button"
@@ -227,6 +246,17 @@
             removeNotification(notificationId);
         },
 
+        /**
+         * Invoke a notification's onAction callback (see options.actionLabel /
+         * options.onAction on show) and dismiss it.
+         * @param {string} notificationId - Notification ID whose action to run
+         */
+        triggerAction: function(notificationId) {
+            const cb = actionCallbacks.get(notificationId);
+            removeNotification(notificationId);
+            if (typeof cb === 'function') cb();
+        },
+
         /**
          * Clear all notifications
          */
@@ -262,9 +292,11 @@
         }
     });
 
-    // Global shorthand function (backwards compatible with existing code)
+    // Global shorthand function (backwards compatible with existing code).
+    // Accepts either the legacy type string or a full options object
+    // ({ type, duration, actionLabel, onAction, ... }).
     window.showNotification = function(message, type = 'info') {
-        return showNotification(message, { type: type });
+        return showNotification(message, typeof type === 'string' ? { type: type } : (type || {}));
     };
 
     // Initialize container on load
diff --git a/web_interface/static/v3/js/widgets/plugin-order-list.js b/web_interface/static/v3/js/widgets/plugin-order-list.js
new file mode 100644
index 00000000..f4610b90
--- /dev/null
+++ b/web_interface/static/v3/js/widgets/plugin-order-list.js
@@ -0,0 +1,225 @@
+/**
+ * Plugin Order List — shared drag-and-drop reorder list of enabled plugins.
+ *
+ * Factored out of the Vegas Scroll section of display.html so both Vegas mode
+ * and the primary rotation (Durations tab) use one implementation. Renders
+ * one draggable row per enabled plugin into a container and keeps a hidden
+ * input's value in sync as a JSON array of plugin ids in display order.
+ *
+ * Usage:
+ *   PluginOrderList.init({
+ *       containerId: 'vegas_plugin_order',        // rows render here
+ *       orderInputId: 'vegas_plugin_order_value', // hidden input, JSON array of ids
+ *       excludedInputId: 'vegas_excluded_plugins_value', // optional: adds an
+ *           // include-checkbox per row; unchecked ids collect here (JSON array)
+ *       showVegasModeBadge: true                  // optional: Scroll/Fixed/Static badge
+ *   });
+ *
+ * The container re-renders from /api/v3/plugins/installed each init; the
+ * hidden input(s) must already hold the saved order/exclusions (JSON).
+ */
+(function() {
+    'use strict';
+
+    const MODE_LABELS = new Map([
+        ['scroll', { label: 'Scroll', icon: 'fa-scroll', color: 'text-blue-600' }],
+        ['fixed',  { label: 'Fixed',  icon: 'fa-square', color: 'text-green-600' }],
+        ['static', { label: 'Static', icon: 'fa-pause',  color: 'text-orange-600' }]
+    ]);
+
+    function init(options) {
+        const container = document.getElementById(options.containerId);
+        const orderInput = document.getElementById(options.orderInputId);
+        const excludedInput = options.excludedInputId ? document.getElementById(options.excludedInputId) : null;
+        if (!container || !orderInput) return;
+
+        function syncInputs() {
+            const order = [];
+            const excluded = [];
+            container.querySelectorAll('.plugin-order-item').forEach(item => {
+                const pluginId = item.dataset.pluginId;
+                order.push(pluginId);
+                const checkbox = item.querySelector('.plugin-order-include');
+                if (checkbox && !checkbox.checked) excluded.push(pluginId);
+            });
+            orderInput.value = JSON.stringify(order);
+            if (excludedInput) excludedInput.value = JSON.stringify(excluded);
+        }
+
+        function setupDragAndDrop() {
+            let draggedItem = null;
+            container.querySelectorAll('.plugin-order-item').forEach(item => {
+                item.addEventListener('dragstart', function(e) {
+                    draggedItem = this;
+                    this.style.opacity = '0.5';
+                    e.dataTransfer.effectAllowed = 'move';
+                });
+                item.addEventListener('dragend', function() {
+                    this.style.opacity = '1';
+                    draggedItem = null;
+                    syncInputs();
+                });
+                item.addEventListener('dragover', function(e) {
+                    e.preventDefault();
+                    e.dataTransfer.dropEffect = 'move';
+                    const rect = this.getBoundingClientRect();
+                    const midY = rect.top + rect.height / 2;
+                    if (e.clientY < midY) {
+                        this.style.borderTop = '2px solid #3b82f6';
+                        this.style.borderBottom = '';
+                    } else {
+                        this.style.borderBottom = '2px solid #3b82f6';
+                        this.style.borderTop = '';
+                    }
+                });
+                item.addEventListener('dragleave', function() {
+                    this.style.borderTop = '';
+                    this.style.borderBottom = '';
+                });
+                item.addEventListener('drop', function(e) {
+                    e.preventDefault();
+                    this.style.borderTop = '';
+                    this.style.borderBottom = '';
+                    if (draggedItem && draggedItem !== this) {
+                        const rect = this.getBoundingClientRect();
+                        const midY = rect.top + rect.height / 2;
+                        if (e.clientY < midY) {
+                            container.insertBefore(draggedItem, this);
+                        } else {
+                            container.insertBefore(draggedItem, this.nextSibling);
+                        }
+                    }
+                });
+            });
+        }
+
+        fetch('/api/v3/plugins/installed')
+            .then(response => response.json())
+            .then(data => {
+                const allPlugins = (data.data && data.data.plugins) || data.plugins || [];
+                const plugins = allPlugins.filter(p => p.enabled);
+                if (plugins.length === 0) {
+                    const empty = document.createElement('p');
+                    empty.className = 'text-sm text-gray-500 italic';
+                    empty.textContent = 'No enabled plugins';
+                    container.textContent = '';
+                    container.appendChild(empty);
+                    return;
+                }
+
+                let currentOrder = [];
+                let excluded = [];
+                try {
+                    currentOrder = JSON.parse(orderInput.value || '[]');
+                    if (excludedInput) excluded = JSON.parse(excludedInput.value || '[]');
+                } catch (e) {
+                    console.error('Error parsing saved plugin order:', e);
+                }
+                // JSON.parse can succeed and still return null/objects
+                // (e.g. a saved value of "null"); normalize to arrays.
+                if (!Array.isArray(currentOrder)) currentOrder = [];
+                if (!Array.isArray(excluded)) excluded = [];
+
+                // Saved order first, then any newly enabled plugins.
+                const orderedPlugins = [];
+                currentOrder.forEach(id => {
+                    const plugin = plugins.find(p => p.id === id);
+                    if (plugin) orderedPlugins.push(plugin);
+                });
+                plugins.forEach(plugin => {
+                    if (!orderedPlugins.find(p => p.id === plugin.id)) orderedPlugins.push(plugin);
+                });
+
+                // Rows are built with DOM APIs rather than innerHTML — plugin
+                // ids/names come from installed manifests (semi-trusted).
+                container.textContent = '';
+                orderedPlugins.forEach(plugin => {
+                    const row = document.createElement('div');
+                    row.className = 'flex items-center p-2 bg-gray-50 rounded border border-gray-200 cursor-move plugin-order-item';
+                    row.dataset.pluginId = plugin.id;
+                    row.draggable = true;
+
+                    const grip = document.createElement('i');
+                    grip.className = 'fas fa-grip-vertical text-gray-400 mr-3';
+                    row.appendChild(grip);
+
+                    if (excludedInput) {
+                        const isExcluded = excluded.includes(plugin.id);
+                        const label = document.createElement('label');
+                        label.className = 'flex items-center flex-1';
+                        const checkbox = document.createElement('input');
+                        checkbox.type = 'checkbox';
+                        checkbox.className = 'plugin-order-include h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded mr-2';
+                        checkbox.checked = !isExcluded;
+                        const name = document.createElement('span');
+                        name.className = 'text-sm font-medium text-gray-700';
+                        name.textContent = plugin.name || plugin.id;
+                        label.appendChild(checkbox);
+                        label.appendChild(name);
+                        row.appendChild(label);
+                    } else {
+                        const name = document.createElement('span');
+                        name.className = 'text-sm font-medium text-gray-700 flex-1';
+                        name.textContent = plugin.name || plugin.id;
+                        row.appendChild(name);
+                    }
+
+                    if (options.showVegasModeBadge) {
+                        const vegasMode = plugin.vegas_mode || plugin.vegas_content_type || 'fixed';
+                        const modeInfo = MODE_LABELS.get(vegasMode) || MODE_LABELS.get('fixed');
+                        const badge = document.createElement('span');
+                        badge.className = `text-xs ${modeInfo.color} ml-2`;
+                        badge.title = `Vegas display mode: ${modeInfo.label}`;
+                        const badgeIcon = document.createElement('i');
+                        badgeIcon.className = `fas ${modeInfo.icon} mr-1`;
+                        badge.appendChild(badgeIcon);
+                        badge.appendChild(document.createTextNode(modeInfo.label));
+                        row.appendChild(badge);
+                    }
+
+                    // Up/down buttons: touch- and keyboard-accessible
+                    // reordering alongside native drag-and-drop (HTML5 drag
+                    // events don't fire on most mobile browsers).
+                    const pluginLabel = plugin.name || plugin.id;
+                    [['up', 'fa-chevron-up', `Move ${pluginLabel} up`],
+                     ['down', 'fa-chevron-down', `Move ${pluginLabel} down`]].forEach(([dir, iconCls, ariaLabel]) => {
+                        const moveBtn = document.createElement('button');
+                        moveBtn.type = 'button';
+                        moveBtn.className = 'plugin-order-move text-gray-400 hover:text-gray-700 px-2 py-1';
+                        moveBtn.setAttribute('aria-label', ariaLabel);
+                        const moveIcon = document.createElement('i');
+                        moveIcon.className = `fas ${iconCls} text-xs`;
+                        moveBtn.appendChild(moveIcon);
+                        moveBtn.addEventListener('click', function() {
+                            if (dir === 'up' && row.previousElementSibling) {
+                                container.insertBefore(row, row.previousElementSibling);
+                            } else if (dir === 'down' && row.nextElementSibling) {
+                                container.insertBefore(row.nextElementSibling, row);
+                            }
+                            syncInputs();
+                            moveBtn.focus();
+                        });
+                        row.appendChild(moveBtn);
+                    });
+
+                    container.appendChild(row);
+                });
+
+                setupDragAndDrop();
+                container.querySelectorAll('.plugin-order-include').forEach(checkbox => {
+                    checkbox.addEventListener('change', syncInputs);
+                });
+                syncInputs();
+            })
+            .catch(error => {
+                console.error('Error fetching plugins:', error);
+                const err = document.createElement('p');
+                err.className = 'text-sm text-red-500';
+                err.textContent = 'Error loading plugins';
+                container.textContent = '';
+                container.appendChild(err);
+            });
+    }
+
+    window.PluginOrderList = { init: init };
+})();
diff --git a/web_interface/static/v3/manifest.json b/web_interface/static/v3/manifest.json
new file mode 100644
index 00000000..1922cf76
--- /dev/null
+++ b/web_interface/static/v3/manifest.json
@@ -0,0 +1,24 @@
+{
+    "name": "LED Matrix Control",
+    "short_name": "LEDMatrix",
+    "description": "Control panel for the LEDMatrix display",
+    "start_url": "/",
+    "scope": "/",
+    "display": "standalone",
+    "background_color": "#111827",
+    "theme_color": "#111827",
+    "icons": [
+        {
+            "src": "/static/v3/icons/icon-192.png",
+            "sizes": "192x192",
+            "type": "image/png",
+            "purpose": "any maskable"
+        },
+        {
+            "src": "/static/v3/icons/icon-512.png",
+            "sizes": "512x512",
+            "type": "image/png",
+            "purpose": "any maskable"
+        }
+    ]
+}
diff --git a/web_interface/static/v3/plugins_manager.js b/web_interface/static/v3/plugins_manager.js
index 5c883601..cb158d95 100644
--- a/web_interface/static/v3/plugins_manager.js
+++ b/web_interface/static/v3/plugins_manager.js
@@ -1,3 +1,4 @@
+/* global debugLog */
 // ─── LocalStorage Safety Wrappers ────────────────────────────────────────────
 // Handles environments where localStorage is unavailable or restricted (private browsing, etc.)
 const safeLocalStorage = {
@@ -38,7 +39,7 @@ const safeLocalStorage = {
 // Define critical functions immediately so they're available before any HTML is rendered
 // Debug logging controlled by safeLocalStorage.setItem('pluginDebug', 'true')
 const _PLUGIN_DEBUG_EARLY = safeLocalStorage.getItem('pluginDebug') === 'true';
-if (_PLUGIN_DEBUG_EARLY) console.log('[PLUGINS SCRIPT] Defining configurePlugin and togglePlugin at top level...');
+if (_PLUGIN_DEBUG_EARLY) debugLog('[PLUGINS SCRIPT] Defining configurePlugin and togglePlugin at top level...');
 
 // Expose on-demand functions early as stubs (will be replaced when IIFE runs)
 window.openOnDemandModal = function(pluginId) {
@@ -85,7 +86,7 @@ window.requestOnDemandStop = function({ stopService = false } = {}) {
 
 // Define updatePlugin early as a stub to ensure it's always available
 window.updatePlugin = window.updatePlugin || function(pluginId) {
-    if (_PLUGIN_DEBUG_EARLY) console.log('[PLUGINS STUB] updatePlugin called for', pluginId);
+    if (_PLUGIN_DEBUG_EARLY) debugLog('[PLUGINS STUB] updatePlugin called for', pluginId);
 
     // Validate pluginId
     if (!pluginId || typeof pluginId !== 'string') {
@@ -105,7 +106,7 @@ window.updatePlugin = window.updatePlugin || function(pluginId) {
     const requestBody = { plugin_id: pluginId };
     const requestBodyJson = JSON.stringify(requestBody);
 
-    console.log('[UPDATE] Sending request:', { url: '/api/v3/plugins/update', body: requestBodyJson });
+    debugLog('[UPDATE] Sending request:', { url: '/api/v3/plugins/update', body: requestBodyJson });
 
     // Make the API call directly
     return fetch('/api/v3/plugins/update', {
@@ -161,7 +162,7 @@ window.updatePlugin = window.updatePlugin || function(pluginId) {
 
 // Define uninstallPlugin early as a stub
 window.uninstallPlugin = window.uninstallPlugin || function(pluginId) {
-    if (_PLUGIN_DEBUG_EARLY) console.log('[PLUGINS STUB] uninstallPlugin called for', pluginId);
+    if (_PLUGIN_DEBUG_EARLY) debugLog('[PLUGINS STUB] uninstallPlugin called for', pluginId);
 
     if (!confirm(`Are you sure you want to uninstall ${pluginId}?`)) {
         return Promise.resolve({ cancelled: true });
@@ -200,7 +201,7 @@ window.uninstallPlugin = window.uninstallPlugin || function(pluginId) {
 
 // Define configurePlugin early to ensure it's always available
 window.configurePlugin = window.configurePlugin || async function(pluginId) {
-    if (_PLUGIN_DEBUG_EARLY) console.log('[PLUGINS STUB] configurePlugin called for', pluginId);
+    if (_PLUGIN_DEBUG_EARLY) debugLog('[PLUGINS STUB] configurePlugin called for', pluginId);
 
     // Switch to the plugin's configuration tab instead of opening a modal
     // This matches the behavior of clicking the plugin tab at the top
@@ -218,7 +219,7 @@ window.configurePlugin = window.configurePlugin || async function(pluginId) {
     if (appComponent) {
         // Set the active tab to the plugin ID
         appComponent.activeTab = pluginId;
-        if (_PLUGIN_DEBUG_EARLY) console.log('[PLUGINS STUB] Switched to plugin tab:', pluginId);
+        if (_PLUGIN_DEBUG_EARLY) debugLog('[PLUGINS STUB] Switched to plugin tab:', pluginId);
 
         // Scroll to top of page to ensure the tab is visible
         window.scrollTo({ top: 0, behavior: 'smooth' });
@@ -237,7 +238,7 @@ if (!window._pluginToggleRequests) {
 
 // Define togglePlugin early to ensure it's always available
 window.togglePlugin = window.togglePlugin || function(pluginId, enabled) {
-    if (_PLUGIN_DEBUG_EARLY) console.log('[PLUGINS STUB] togglePlugin called for', pluginId, 'enabled:', enabled);
+    if (_PLUGIN_DEBUG_EARLY) debugLog('[PLUGINS STUB] togglePlugin called for', pluginId, 'enabled:', enabled);
 
     const plugin = (window.installedPlugins || []).find(p => p.id === pluginId);
     const pluginName = plugin ? (plugin.name || pluginId) : pluginId;
@@ -316,7 +317,7 @@ window.togglePlugin = window.togglePlugin || function(pluginId, enabled) {
         showNotification(`${action.charAt(0).toUpperCase() + action.slice(1)} ${pluginName}...`, 'info');
     }
 
-    fetch('/api/v3/plugins/toggle', {
+    return fetch('/api/v3/plugins/toggle', {
         method: 'POST',
         headers: { 'Content-Type': 'application/json' },
         body: JSON.stringify({ plugin_id: pluginId, enabled: enabled })
@@ -325,7 +326,7 @@ window.togglePlugin = window.togglePlugin || function(pluginId, enabled) {
     .then(data => {
         // Verify this response is for the latest request (prevent race conditions)
         if (window._pluginToggleRequests[pluginId] !== requestToken) {
-            console.log(`[togglePlugin] Ignoring out-of-order response for ${pluginId}`);
+            debugLog(`[togglePlugin] Ignoring out-of-order response for ${pluginId}`);
             return;
         }
 
@@ -360,11 +361,14 @@ window.togglePlugin = window.togglePlugin || function(pluginId, enabled) {
         if (wrapperDiv) {
             wrapperDiv.classList.remove('opacity-50', 'pointer-events-none');
         }
+        // Resolve the outcome so callers (e.g. the install flow) can chain
+        // on whether enabling actually succeeded.
+        return data;
     })
     .catch(error => {
         // Verify this error is for the latest request (prevent race conditions)
         if (window._pluginToggleRequests[pluginId] !== requestToken) {
-            console.log(`[togglePlugin] Ignoring out-of-order error for ${pluginId}`);
+            debugLog(`[togglePlugin] Ignoring out-of-order error for ${pluginId}`);
             return;
         }
 
@@ -391,22 +395,6 @@ window.togglePlugin = window.togglePlugin || function(pluginId, enabled) {
     });
 };
 
-// Cleanup orphaned modals from previous executions to prevent duplicates when moving to body
-try {
-    const existingModals = document.querySelectorAll('#plugin-config-modal');
-    if (existingModals.length > 0) {
-        existingModals.forEach(el => {
-            // Only remove modals that were moved to body (orphaned from previous loads)
-            // The new modal in the current content should be inside a container, not direct body child
-            if (el.parentElement === document.body) {
-                console.log('[PLUGINS SCRIPT] Cleaning up orphaned plugin modal');
-                el.remove();
-            }
-        });
-    }
-} catch (e) {
-    console.warn('[PLUGINS SCRIPT] Error cleaning up modals:', e);
-}
 
 // Track pending render data for when DOM isn't ready yet
 window.__pendingInstalledPlugins = window.__pendingInstalledPlugins || null;
@@ -507,7 +495,7 @@ window.__pluginDomReady = window.__pluginDomReady || false;
                 event.preventDefault();
                 event.stopPropagation();
 
-                console.log('[DEBUG toggle fallback] Plugin:', pluginId, 'Current enabled (from data):', currentEnabled, 'New state:', isChecked);
+                debugLog('[DEBUG toggle fallback] Plugin:', pluginId, 'Current enabled (from data):', currentEnabled, 'New state:', isChecked);
 
                 window.togglePlugin(pluginId, isChecked);
             } else if (action === 'configure' && window.configurePlugin) {
@@ -517,12 +505,12 @@ window.__pluginDomReady = window.__pluginDomReady || false;
             } else if (action === 'update' && window.updatePlugin) {
                 event.preventDefault();
                 event.stopPropagation();
-                console.log('[DEBUG update fallback] Updating plugin:', pluginId);
+                debugLog('[DEBUG update fallback] Updating plugin:', pluginId);
                 window.updatePlugin(pluginId);
             } else if (action === 'uninstall' && window.uninstallPlugin) {
                 event.preventDefault();
                 event.stopPropagation();
-                console.log('[DEBUG uninstall fallback] Uninstalling plugin:', pluginId);
+                debugLog('[DEBUG uninstall fallback] Uninstalling plugin:', pluginId);
                 if (confirm(`Are you sure you want to uninstall ${pluginId}?`)) {
                     window.uninstallPlugin(pluginId);
                 }
@@ -533,7 +521,7 @@ window.__pluginDomReady = window.__pluginDomReady || false;
     // Set up delegation on document (capture phase for better reliability)
     document.addEventListener('click', handleGlobalPluginAction, true);
     document.addEventListener('change', handleGlobalPluginAction, true);
-    console.log('[PLUGINS SCRIPT] Global event delegation set up');
+    debugLog('[PLUGINS SCRIPT] Global event delegation set up');
 })();
 
 // Note: configurePlugin and togglePlugin are now defined at the top of the file (after uninstallPlugin)
@@ -541,30 +529,30 @@ window.__pluginDomReady = window.__pluginDomReady || false;
 
 // Verify functions are defined (debug only)
 if (_PLUGIN_DEBUG_EARLY) {
-    console.log('[PLUGINS SCRIPT] Functions defined:', {
+    debugLog('[PLUGINS SCRIPT] Functions defined:', {
         configurePlugin: typeof window.configurePlugin,
         togglePlugin: typeof window.togglePlugin
     });
     if (typeof window.configurePlugin === 'function') {
-        console.log('[PLUGINS SCRIPT] ✓ configurePlugin ready');
+        debugLog('[PLUGINS SCRIPT] ✓ configurePlugin ready');
     }
     if (typeof window.togglePlugin === 'function') {
-        console.log('[PLUGINS SCRIPT] ✓ togglePlugin ready');
+        debugLog('[PLUGINS SCRIPT] ✓ togglePlugin ready');
     }
 }
 
 // GitHub Token Collapse Handler - Define early so it's available before IIFE
-console.log('[DEFINE] Defining attachGithubTokenCollapseHandler function...');
+debugLog('[DEFINE] Defining attachGithubTokenCollapseHandler function...');
 window.attachGithubTokenCollapseHandler = function() {
-    console.log('[attachGithubTokenCollapseHandler] Starting...');
+    debugLog('[attachGithubTokenCollapseHandler] Starting...');
     const toggleTokenCollapseBtn = document.getElementById('toggle-github-token-collapse');
-    console.log('[attachGithubTokenCollapseHandler] Button found:', !!toggleTokenCollapseBtn);
+    debugLog('[attachGithubTokenCollapseHandler] Button found:', !!toggleTokenCollapseBtn);
     if (!toggleTokenCollapseBtn) {
         console.warn('[attachGithubTokenCollapseHandler] GitHub token collapse button not found');
         return;
     }
 
-    console.log('[attachGithubTokenCollapseHandler] Checking toggleGithubTokenContent...', {
+    debugLog('[attachGithubTokenCollapseHandler] Checking toggleGithubTokenContent...', {
         exists: typeof window.toggleGithubTokenContent
     });
     if (!window.toggleGithubTokenContent) {
@@ -584,17 +572,17 @@ window.attachGithubTokenCollapseHandler = function() {
 
     // Attach listener to the new button
     newBtn.addEventListener('click', function(e) {
-        console.log('[attachGithubTokenCollapseHandler] Button clicked, calling toggleGithubTokenContent');
+        debugLog('[attachGithubTokenCollapseHandler] Button clicked, calling toggleGithubTokenContent');
         window.toggleGithubTokenContent(e);
     });
 
-    console.log('[attachGithubTokenCollapseHandler] Handler attached to button:', newBtn.id);
+    debugLog('[attachGithubTokenCollapseHandler] Handler attached to button:', newBtn.id);
 };
 
 // Toggle GitHub Token Settings section
-console.log('[DEFINE] Defining toggleGithubTokenContent function...');
+debugLog('[DEFINE] Defining toggleGithubTokenContent function...');
 window.toggleGithubTokenContent = function(e) {
-    console.log('[toggleGithubTokenContent] called', e);
+    debugLog('[toggleGithubTokenContent] called', e);
 
     if (e) {
         e.stopPropagation();
@@ -605,7 +593,7 @@ window.toggleGithubTokenContent = function(e) {
     const tokenIconCollapse = document.getElementById('github-token-icon-collapse');
     const toggleTokenCollapseBtn = document.getElementById('toggle-github-token-collapse');
 
-    console.log('[toggleGithubTokenContent] Elements found:', {
+    debugLog('[toggleGithubTokenContent] Elements found:', {
         tokenContent: !!tokenContent,
         tokenIconCollapse: !!tokenIconCollapse,
         toggleTokenCollapseBtn: !!toggleTokenCollapseBtn
@@ -619,7 +607,7 @@ window.toggleGithubTokenContent = function(e) {
     const hasHiddenClass = tokenContent.classList.contains('hidden');
     const computedDisplay = window.getComputedStyle(tokenContent).display;
 
-    console.log('[toggleGithubTokenContent] Current state:', {
+    debugLog('[toggleGithubTokenContent] Current state:', {
         hasHiddenClass,
         computedDisplay,
         buttonText: toggleTokenCollapseBtn.querySelector('span')?.textContent
@@ -636,7 +624,7 @@ window.toggleGithubTokenContent = function(e) {
         }
         const span = toggleTokenCollapseBtn.querySelector('span');
         if (span) span.textContent = 'Collapse';
-        console.log('[toggleGithubTokenContent] Content shown - removed hidden, added block');
+        debugLog('[toggleGithubTokenContent] Content shown - removed hidden, added block');
     } else {
         // Hide content - add hidden class, remove block class, ensure display is none
         tokenContent.classList.add('hidden');
@@ -648,15 +636,15 @@ window.toggleGithubTokenContent = function(e) {
         }
         const span = toggleTokenCollapseBtn.querySelector('span');
         if (span) span.textContent = 'Expand';
-        console.log('[toggleGithubTokenContent] Content hidden - added hidden, removed block, set display:none');
+        debugLog('[toggleGithubTokenContent] Content hidden - added hidden, removed block, set display:none');
     }
 };
 
 // Simple standalone handler for GitHub plugin installation
 // Defined early and globally to ensure it's always available
-console.log('[DEFINE] Defining handleGitHubPluginInstall function...');
+debugLog('[DEFINE] Defining handleGitHubPluginInstall function...');
 window.handleGitHubPluginInstall = function() {
-    console.log('[handleGitHubPluginInstall] Function called!');
+    debugLog('[handleGitHubPluginInstall] Function called!');
 
     const urlInput = document.getElementById('github-plugin-url');
     const statusDiv = document.getElementById('github-plugin-status');
@@ -670,7 +658,7 @@ window.handleGitHubPluginInstall = function() {
     }
 
     const repoUrl = urlInput.value.trim();
-    console.log('[handleGitHubPluginInstall] Repo URL:', repoUrl);
+    debugLog('[handleGitHubPluginInstall] Repo URL:', repoUrl);
 
     if (!repoUrl) {
         if (statusDiv) {
@@ -679,7 +667,7 @@ window.handleGitHubPluginInstall = function() {
         return;
     }
 
-    if (!repoUrl.includes('github.com')) {
+    if (!isGithubUrl(repoUrl)) {
         if (statusDiv) {
             statusDiv.innerHTML = '<span class="text-red-600"><i class="fas fa-exclamation-circle mr-1"></i>Please enter a valid GitHub URL</span>';
         }
@@ -701,7 +689,7 @@ window.handleGitHubPluginInstall = function() {
         requestBody.branch = branch;
     }
 
-    console.log('[handleGitHubPluginInstall] Sending request:', requestBody);
+    debugLog('[handleGitHubPluginInstall] Sending request:', requestBody);
 
     fetch('/api/v3/plugins/install-from-url', {
         method: 'POST',
@@ -711,11 +699,11 @@ window.handleGitHubPluginInstall = function() {
         body: JSON.stringify(requestBody)
     })
     .then(response => {
-        console.log('[handleGitHubPluginInstall] Response status:', response.status);
+        debugLog('[handleGitHubPluginInstall] Response status:', response.status);
         return response.json();
     })
     .then(data => {
-        console.log('[handleGitHubPluginInstall] Response data:', data);
+        debugLog('[handleGitHubPluginInstall] Response data:', data);
         if (data.status === 'success') {
             if (statusDiv) {
                 statusDiv.innerHTML = `<span class="text-green-600"><i class="fas fa-check-circle mr-1"></i>Successfully installed: ${data.plugin_id}</span>`;
@@ -760,30 +748,30 @@ window.handleGitHubPluginInstall = function() {
         }
     });
 };
-console.log('[DEFINE] handleGitHubPluginInstall defined and ready');
+debugLog('[DEFINE] handleGitHubPluginInstall defined and ready');
 
 // GitHub Authentication Status - Define early so it's available in IIFE
 // Shows warning banner only when token is missing or invalid
 // The token itself is never exposed to the frontend for security
 // Returns a Promise so it can be awaited
-console.log('[DEFINE] Defining checkGitHubAuthStatus function...');
+debugLog('[DEFINE] Defining checkGitHubAuthStatus function...');
 window.checkGitHubAuthStatus = function checkGitHubAuthStatus() {
-    console.log('[checkGitHubAuthStatus] Starting...');
+    debugLog('[checkGitHubAuthStatus] Starting...');
     return fetch('/api/v3/plugins/store/github-status')
         .then(response => {
-            console.log('checkGitHubAuthStatus: Response status:', response.status);
+            debugLog('checkGitHubAuthStatus: Response status:', response.status);
             return response.json();
         })
         .then(data => {
-            console.log('checkGitHubAuthStatus: Data received:', data);
+            debugLog('checkGitHubAuthStatus: Data received:', data);
             if (data.status === 'success') {
                 const authData = data.data;
                 const tokenStatus = authData.token_status || (authData.authenticated ? 'valid' : 'none');
-                console.log('checkGitHubAuthStatus: Token status:', tokenStatus);
+                debugLog('checkGitHubAuthStatus: Token status:', tokenStatus);
                 const warning = document.getElementById('github-auth-warning');
                 const settings = document.getElementById('github-token-settings');
                 const rateLimit = document.getElementById('rate-limit-count');
-                console.log('checkGitHubAuthStatus: Elements found:', {
+                debugLog('checkGitHubAuthStatus: Elements found:', {
                     warning: !!warning,
                     settings: !!settings,
                     rateLimit: !!rateLimit
@@ -824,7 +812,7 @@ window.checkGitHubAuthStatus = function checkGitHubAuthStatus() {
                             // Show warning using both classList and style.display
                             warning.classList.remove('hidden');
                             warning.style.display = '';
-                            console.log(`GitHub token status: ${tokenStatus} - showing API limit warning`);
+                            debugLog(`GitHub token status: ${tokenStatus} - showing API limit warning`);
                         }
                     }
 
@@ -837,7 +825,7 @@ window.checkGitHubAuthStatus = function checkGitHubAuthStatus() {
                         // Hide warning using both classList and style.display
                         warning.classList.add('hidden');
                         warning.style.display = 'none';
-                        console.log('GitHub token is valid - hiding API limit warning');
+                        debugLog('GitHub token is valid - hiding API limit warning');
                     }
 
                     // Make settings panel visible but collapsed (accessible for token management)
@@ -888,7 +876,7 @@ window.checkGitHubAuthStatus = function checkGitHubAuthStatus() {
 (function() {
     'use strict';
 
-    if (_PLUGIN_DEBUG_EARLY) console.log('Plugin manager script starting...');
+    if (_PLUGIN_DEBUG_EARLY) debugLog('Plugin manager script starting...');
 
     // Local variables for this instance
 let installedPlugins = [];
@@ -1023,14 +1011,14 @@ window.pluginManager.initializing = false; // Track if initialization is in prog
 window.initPluginsPage = function() {
     // Prevent duplicate initialization
     if (window.pluginManager.initialized || window.pluginManager.initializing) {
-        console.log('Plugin page already initialized or initializing, skipping...');
+        debugLog('Plugin page already initialized or initializing, skipping...');
         return;
     }
 
     // Check if required elements exist
     const installedGrid = document.getElementById('installed-plugins-grid');
     if (!installedGrid) {
-        console.log('Plugin elements not ready yet');
+        debugLog('Plugin elements not ready yet');
         return false;
     }
 
@@ -1040,18 +1028,18 @@ window.initPluginsPage = function() {
     // Check GitHub auth status immediately (don't wait for full initialization)
     // This can run in parallel with other initialization
     if (window.checkGitHubAuthStatus) {
-        console.log('[INIT] Checking GitHub auth status immediately...');
+        debugLog('[INIT] Checking GitHub auth status immediately...');
         window.checkGitHubAuthStatus();
     }
 
     // If we fetched data before the DOM existed, render it now
     if (window.__pendingInstalledPlugins) {
-        console.log('[RENDER] Applying pending installed plugins data');
+        debugLog('[RENDER] Applying pending installed plugins data');
         renderInstalledPlugins(window.__pendingInstalledPlugins);
         window.__pendingInstalledPlugins = null;
     }
     if (window.__pendingStorePlugins) {
-        console.log('[RENDER] Applying pending plugin store data');
+        debugLog('[RENDER] Applying pending plugin store data');
         pluginStoreCache = window.__pendingStorePlugins;
         cacheTimestamp = Date.now();
         window.__pendingStorePlugins = null;
@@ -1064,7 +1052,6 @@ window.initPluginsPage = function() {
     const refreshBtn = document.getElementById('refresh-plugins-btn');
     const updateAllBtn = document.getElementById('update-all-plugins-btn');
     const restartBtn = document.getElementById('restart-display-btn');
-    const closeBtn = document.getElementById('close-plugin-config');
     const closeOnDemandModalBtn = document.getElementById('close-on-demand-modal');
     const cancelOnDemandBtn = document.getElementById('cancel-on-demand');
     const onDemandForm = document.getElementById('on-demand-form');
@@ -1089,20 +1076,6 @@ window.initPluginsPage = function() {
     if (storePpEl) storePpEl.value = storeFilterState.perPage;
     setupStoreFilterListeners();
 
-    if (closeBtn) {
-        closeBtn.replaceWith(closeBtn.cloneNode(true));
-        document.getElementById('close-plugin-config').addEventListener('click', closePluginConfigModal);
-
-        // View toggle buttons
-        document.getElementById('view-toggle-form')?.addEventListener('click', () => switchPluginConfigView('form'));
-        document.getElementById('view-toggle-json')?.addEventListener('click', () => switchPluginConfigView('json'));
-
-        // Reset to defaults button
-        document.getElementById('reset-to-defaults-btn')?.addEventListener('click', resetPluginConfigToDefaults);
-
-        // JSON editor save button
-        document.getElementById('save-json-config-btn')?.addEventListener('click', saveConfigFromJsonEditor);
-    }
     if (closeOnDemandModalBtn) {
         closeOnDemandModalBtn.replaceWith(closeOnDemandModalBtn.cloneNode(true));
         document.getElementById('close-on-demand-modal').addEventListener('click', closeOnDemandModal);
@@ -1168,7 +1141,7 @@ function initializePluginPageWhenReady() {
         // Check if plugins content was swapped in (only match direct plugins content targets)
         if (target.id === 'plugins-content' ||
             target.querySelector('#installed-plugins-grid')) {
-            console.log('HTMX swap detected for plugins, initializing...');
+            debugLog('HTMX swap detected for plugins, initializing...');
             // Reset all initialization flags so the fresh empty DOM gets populated
             window.pluginManager.initialized = false;
             window.pluginManager.initializing = false;
@@ -1183,12 +1156,12 @@ function initializePluginPageWhenReady() {
 let pluginsInitialized = false;
 
 function initializePlugins() {
-    console.log('[initializePlugins] FUNCTION CALLED, pluginsInitialized:', pluginsInitialized);
+    debugLog('[initializePlugins] FUNCTION CALLED, pluginsInitialized:', pluginsInitialized);
     // Guard against multiple initializations
     if (pluginsInitialized) {
-        console.log('[initializePlugins] Already initialized, skipping (but still setting up handlers)');
+        debugLog('[initializePlugins] Already initialized, skipping (but still setting up handlers)');
         // Still set up handlers even if already initialized (in case page was HTMX swapped)
-        console.log('[initializePlugins] Force setting up GitHub handlers anyway...');
+        debugLog('[initializePlugins] Force setting up GitHub handlers anyway...');
         if (typeof setupGitHubInstallHandlers === 'function') {
             setupGitHubInstallHandlers();
         } else {
@@ -1198,16 +1171,16 @@ function initializePlugins() {
     }
     pluginsInitialized = true;
 
-    console.log('[initializePlugins] Starting initialization...');
+    debugLog('[initializePlugins] Starting initialization...');
     pluginLog('[INIT] Initializing plugins...');
 
     // Check GitHub authentication status
-    console.log('[INIT] Checking for checkGitHubAuthStatus function...', {
+    debugLog('[INIT] Checking for checkGitHubAuthStatus function...', {
         exists: typeof window.checkGitHubAuthStatus,
         type: typeof window.checkGitHubAuthStatus
     });
     if (window.checkGitHubAuthStatus) {
-        console.log('[INIT] Calling checkGitHubAuthStatus...');
+        debugLog('[INIT] Calling checkGitHubAuthStatus...');
         try {
             window.checkGitHubAuthStatus();
         } catch (error) {
@@ -1253,11 +1226,11 @@ function initializePlugins() {
     }
 
     // Setup GitHub installation handlers
-    console.log('[initializePlugins] About to call setupGitHubInstallHandlers...');
+    debugLog('[initializePlugins] About to call setupGitHubInstallHandlers...');
     if (typeof setupGitHubInstallHandlers === 'function') {
-        console.log('[initializePlugins] setupGitHubInstallHandlers is a function, calling it...');
+        debugLog('[initializePlugins] setupGitHubInstallHandlers is a function, calling it...');
         setupGitHubInstallHandlers();
-        console.log('[initializePlugins] setupGitHubInstallHandlers called');
+        debugLog('[initializePlugins] setupGitHubInstallHandlers called');
     } else {
         console.error('[initializePlugins] ERROR: setupGitHubInstallHandlers is not a function! Type:', typeof setupGitHubInstallHandlers);
     }
@@ -1291,7 +1264,7 @@ const pluginLoadCache = {
 // Debug flag - set via safeLocalStorage.setItem('pluginDebug', 'true')
 const PLUGIN_DEBUG = typeof localStorage !== 'undefined' && safeLocalStorage.getItem('pluginDebug') === 'true';
 function pluginLog(...args) {
-    if (PLUGIN_DEBUG) console.log(...args);
+    if (PLUGIN_DEBUG) debugLog(...args);
 }
 
 function loadInstalledPlugins(forceRefresh = false) {
@@ -1351,7 +1324,7 @@ function loadInstalledPlugins(forceRefresh = false) {
                 // Debug logging only when enabled
                 if (PLUGIN_DEBUG) {
                     installedPlugins.forEach(plugin => {
-                        console.log(`[DEBUG] Plugin ${plugin.id}: enabled=${plugin.enabled}`);
+                        debugLog(`[DEBUG] Plugin ${plugin.id}: enabled=${plugin.enabled}`);
                     });
                 }
 
@@ -1464,7 +1437,7 @@ function renderInstalledPlugins(plugins) {
 
         // Debug: Log enabled status during rendering (only when debug enabled)
         if (PLUGIN_DEBUG) {
-            console.log(`[DEBUG RENDER] Plugin ${plugin.id}: enabled=${enabledBool}`);
+            debugLog(`[DEBUG RENDER] Plugin ${plugin.id}: enabled=${enabledBool}`);
         }
 
         // Escape plugin ID for use in HTML attributes and JavaScript
@@ -1591,7 +1564,7 @@ function handlePluginAction(event) {
     event.preventDefault();
     event.stopPropagation();
 
-    console.log('[EVENT DELEGATION] Plugin action:', action, 'Plugin ID:', pluginId);
+    debugLog('[EVENT DELEGATION] Plugin action:', action, 'Plugin ID:', pluginId);
 
     // Helper function to wait for a function to be available
     const waitForFunction = (funcName, maxAttempts = 10, delay = 50) => {
@@ -1644,7 +1617,7 @@ function handlePluginAction(event) {
             // Toggle the state - we want the opposite of current state
             const isChecked = !currentEnabled;
 
-            console.log('[DEBUG toggle] Plugin:', pluginId, 'Current enabled (from data):', currentEnabled, 'New state:', isChecked, 'Event type:', event.type);
+            debugLog('[DEBUG toggle] Plugin:', pluginId, 'Current enabled (from data):', currentEnabled, 'New state:', isChecked, 'Event type:', event.type);
 
             waitForFunction('togglePlugin', 10, 50)
                 .then(toggleFunc => {
@@ -1883,9 +1856,9 @@ function initializeOnDemandModal() {
 
 // Store the real implementation and replace the stub
 window.__openOnDemandModalImpl = function(pluginId) {
-    console.log('[__openOnDemandModalImpl] Called with pluginId:', pluginId);
+    debugLog('[__openOnDemandModalImpl] Called with pluginId:', pluginId);
     const plugin = findInstalledPlugin(pluginId);
-    console.log('[__openOnDemandModalImpl] Found plugin:', plugin ? plugin.id : 'NOT FOUND');
+    debugLog('[__openOnDemandModalImpl] Found plugin:', plugin ? plugin.id : 'NOT FOUND');
     if (!plugin) {
         console.warn('[__openOnDemandModalImpl] Plugin not found, installedPlugins:', window.installedPlugins?.length || 0);
         if (typeof showNotification === 'function') {
@@ -1897,14 +1870,14 @@ window.__openOnDemandModalImpl = function(pluginId) {
     // Note: On-demand can work with disabled plugins - the backend will temporarily enable them
     // We still log it for debugging but don't block the modal
     if (!plugin.enabled) {
-        console.log('[__openOnDemandModalImpl] Plugin is disabled, but on-demand will temporarily enable it');
+        debugLog('[__openOnDemandModalImpl] Plugin is disabled, but on-demand will temporarily enable it');
     }
 
     currentOnDemandPluginId = pluginId;
-    console.log('[__openOnDemandModalImpl] Setting currentOnDemandPluginId to:', pluginId);
+    debugLog('[__openOnDemandModalImpl] Setting currentOnDemandPluginId to:', pluginId);
 
     // Ensure modal is initialized
-    console.log('[__openOnDemandModalImpl] Initializing modal...');
+    debugLog('[__openOnDemandModalImpl] Initializing modal...');
     initializeOnDemandModal();
 
     const modal = document.getElementById('on-demand-modal');
@@ -1915,7 +1888,7 @@ window.__openOnDemandModalImpl = function(pluginId) {
     const startServiceCheckbox = document.getElementById('on-demand-start-service');
     const modalTitle = document.getElementById('on-demand-modal-title');
 
-    console.log('[__openOnDemandModalImpl] Modal elements check:', {
+    debugLog('[__openOnDemandModalImpl] Modal elements check:', {
         modal: !!modal,
         modeSelect: !!modeSelect,
         modeHint: !!modeHint,
@@ -1938,7 +1911,7 @@ window.__openOnDemandModalImpl = function(pluginId) {
         return;
     }
 
-    console.log('[__openOnDemandModalImpl] All elements found, opening modal...');
+    debugLog('[__openOnDemandModalImpl] All elements found, opening modal...');
 
     modalTitle.textContent = `Run ${resolvePluginDisplayName(pluginId)} On-Demand`;
     modeSelect.innerHTML = '';
@@ -1985,7 +1958,7 @@ window.__openOnDemandModalImpl = function(pluginId) {
             console.error('Error checking service status:', error);
         });
 
-    console.log('[__openOnDemandModalImpl] Setting modal display to flex');
+    debugLog('[__openOnDemandModalImpl] Setting modal display to flex');
     // Force modal to be visible and properly positioned
     // Remove all inline styles that might interfere
     modal.removeAttribute('style');
@@ -2005,8 +1978,8 @@ window.__openOnDemandModalImpl = function(pluginId) {
 
     // Force a reflow to ensure styles are applied
     modal.offsetHeight;
-    console.log('[__openOnDemandModalImpl] Modal display set, should be visible now. Modal element:', modal);
-    console.log('[__openOnDemandModalImpl] Modal computed styles:', {
+    debugLog('[__openOnDemandModalImpl] Modal display set, should be visible now. Modal element:', modal);
+    debugLog('[__openOnDemandModalImpl] Modal computed styles:', {
         display: window.getComputedStyle(modal).display,
         visibility: window.getComputedStyle(modal).visibility,
         opacity: window.getComputedStyle(modal).opacity,
@@ -2015,7 +1988,7 @@ window.__openOnDemandModalImpl = function(pluginId) {
     });
     // Also check if modal is actually in the viewport
     const rect = modal.getBoundingClientRect();
-    console.log('[__openOnDemandModalImpl] Modal bounding rect:', {
+    debugLog('[__openOnDemandModalImpl] Modal bounding rect:', {
         top: rect.top,
         left: rect.left,
         width: rect.width,
@@ -2037,7 +2010,7 @@ function closeOnDemandModal() {
 
 function submitOnDemandRequest(event) {
     event.preventDefault();
-    console.log('[submitOnDemandRequest] Form submitted, currentOnDemandPluginId:', currentOnDemandPluginId);
+    debugLog('[submitOnDemandRequest] Form submitted, currentOnDemandPluginId:', currentOnDemandPluginId);
 
     if (!currentOnDemandPluginId) {
         console.error('[submitOnDemandRequest] No plugin ID set');
@@ -2053,7 +2026,7 @@ function submitOnDemandRequest(event) {
         return;
     }
 
-    console.log('[submitOnDemandRequest] Form found, processing...');
+    debugLog('[submitOnDemandRequest] Form found, processing...');
 
     const formData = new FormData(form);
     const mode = formData.get('mode');
@@ -2075,7 +2048,7 @@ function submitOnDemandRequest(event) {
         }
     }
 
-    console.log('[submitOnDemandRequest] Payload:', payload);
+    debugLog('[submitOnDemandRequest] Payload:', payload);
     markOnDemandLoading();
 
     fetch('/api/v3/display/on-demand/start', {
@@ -2086,11 +2059,11 @@ function submitOnDemandRequest(event) {
         body: JSON.stringify(payload)
     })
         .then(response => {
-            console.log('[submitOnDemandRequest] Response status:', response.status);
+            debugLog('[submitOnDemandRequest] Response status:', response.status);
             return response.json();
         })
         .then(result => {
-            console.log('[submitOnDemandRequest] Response data:', result);
+            debugLog('[submitOnDemandRequest] Response data:', result);
             if (result.status === 'success') {
                 if (typeof showNotification === 'function') {
                     const pluginName = resolvePluginDisplayName(currentOnDemandPluginId);
@@ -2165,136 +2138,6 @@ function closeOnDemandModalOnBackdrop(event) {
 
 // configurePlugin is already defined at the top of the script - no need to redefine
 
-window.showPluginConfigModal = function(pluginId, config) {
-    const modal = document.getElementById('plugin-config-modal');
-    const title = document.getElementById('plugin-config-title');
-    const content = document.getElementById('plugin-config-content');
-
-    if (!modal) {
-        console.error('[DEBUG] Plugin config modal element not found');
-        if (typeof showError === 'function') {
-            showError('Plugin configuration modal not found. Please refresh the page.');
-        } else if (typeof showNotification === 'function') {
-            showNotification('Plugin configuration modal not found. Please refresh the page.', 'error');
-        }
-        return;
-    }
-
-    console.log('[DEBUG] ===== Opening plugin config modal =====');
-    console.log('[DEBUG] Plugin ID:', pluginId);
-    console.log('[DEBUG] Config:', config);
-
-    // Check if modal elements exist (already checked above, but double-check for safety)
-    if (!title) {
-        console.error('[DEBUG] Plugin config title element not found');
-        if (typeof showError === 'function') {
-            showError('Plugin configuration title element not found.');
-        } else if (typeof showNotification === 'function') {
-            showNotification('Plugin configuration title element not found.', 'error');
-        }
-        return;
-    }
-
-    if (!content) {
-        console.error('[DEBUG] Plugin config content element not found');
-        if (typeof showError === 'function') {
-            showError('Plugin configuration content element not found.');
-        } else if (typeof showNotification === 'function') {
-            showNotification('Plugin configuration content element not found.', 'error');
-        }
-        return;
-    }
-
-    // Initialize state
-    currentPluginConfigState.pluginId = pluginId;
-    currentPluginConfigState.config = config || {};
-    currentPluginConfigState.jsonEditor = null;
-
-    // Reset view to form
-    switchPluginConfigView('form');
-
-    // Hide validation errors
-    displayValidationErrors([]);
-
-    title.textContent = `Configure ${pluginId}`;
-
-    // Show loading state while form is generated
-    content.innerHTML = '<div class="flex items-center justify-center py-8"><i class="fas fa-spinner fa-spin text-2xl text-blue-600"></i></div>';
-
-    // Move modal to body to avoid z-index/overflow issues
-    if (modal.parentElement !== document.body) {
-        document.body.appendChild(modal);
-    }
-
-    // Remove any inline display:none that might be in the HTML FIRST
-    // This is critical because the HTML template has style="display: none;" inline
-    // We need to remove it before setting new styles
-    let currentStyle = modal.getAttribute('style') || '';
-    if (currentStyle.includes('display: none') || currentStyle.includes('display:none')) {
-        currentStyle = currentStyle.replace(/display:\s*none[;]?/gi, '').trim();
-        // Clean up any double semicolons or trailing semicolons
-        currentStyle = currentStyle.replace(/;;+/g, ';').replace(/^;|;$/g, '');
-        if (currentStyle) {
-            modal.setAttribute('style', currentStyle);
-        } else {
-            modal.removeAttribute('style');
-        }
-    }
-
-    // Show modal immediately - use important to override any other styles
-    // Also ensure visibility, opacity, and z-index are set correctly
-    modal.style.setProperty('display', 'flex', 'important');
-    modal.style.setProperty('visibility', 'visible', 'important');
-    modal.style.setProperty('opacity', '1', 'important');
-    modal.style.setProperty('z-index', '9999', 'important');
-    modal.style.setProperty('position', 'fixed', 'important');
-
-    // Ensure modal content is also visible
-    const modalContent = modal.querySelector('.modal-content');
-    if (modalContent) {
-        modalContent.style.setProperty('display', 'block', 'important');
-        modalContent.style.setProperty('visibility', 'visible', 'important');
-        modalContent.style.setProperty('opacity', '1', 'important');
-    }
-
-    console.log('[DEBUG] Modal display set to flex');
-    console.log('[DEBUG] Modal computed style:', window.getComputedStyle(modal).display);
-    console.log('[DEBUG] Modal z-index:', window.getComputedStyle(modal).zIndex);
-    console.log('[DEBUG] Modal visibility:', window.getComputedStyle(modal).visibility);
-    console.log('[DEBUG] Modal opacity:', window.getComputedStyle(modal).opacity);
-    console.log('[DEBUG] Modal in DOM:', document.body.contains(modal));
-    console.log('[DEBUG] Modal parent:', modal.parentElement?.tagName);
-    console.log('[DEBUG] Modal rect:', modal.getBoundingClientRect());
-
-    // Load schema for validation
-    fetch(`/api/v3/plugins/schema?plugin_id=${pluginId}`)
-        .then(r => r.json())
-        .then(schemaData => {
-            if (schemaData.status === 'success' && schemaData.data?.schema) {
-                currentPluginConfigState.schema = schemaData.data.schema;
-            }
-        })
-        .catch(err => console.warn('Could not load schema:', err));
-
-    // Generate form asynchronously
-    generatePluginConfigForm(pluginId, config)
-        .then(formHtml => {
-            console.log('[DEBUG] Form generated, setting content. HTML length:', formHtml.length);
-            content.innerHTML = formHtml;
-
-            // Attach form submit handler after form is inserted
-            const form = document.getElementById('plugin-config-form');
-            if (form) {
-                form.addEventListener('submit', handlePluginConfigSubmit);
-                console.log('Form submit handler attached');
-            }
-
-        })
-        .catch(error => {
-            console.error('Error generating config form:', error);
-            content.innerHTML = '<p class="text-red-600">Error loading configuration form</p>';
-        });
-}
 
 // Helper function to get the full property object from schema
 // Uses greedy longest-match to handle schema keys containing dots (e.g., "eng.1")
@@ -2333,449 +2176,6 @@ function getSchemaProperty(schema, path) {
     return null;
 }
 
-// Helper function to find property type in nested schema using dot notation
-function getSchemaPropertyType(schema, path) {
-    const prop = getSchemaProperty(schema, path);
-    return prop; // Return the full property object (was returning just type, but callers expect object)
-}
-
-// Helper function to escape CSS selector special characters
-function escapeCssSelector(str) {
-    if (typeof str !== 'string') {
-        str = String(str);
-    }
-    // Use CSS.escape() when available (handles unicode, leading digits, and edge cases)
-    if (typeof CSS !== 'undefined' && CSS.escape) {
-        return CSS.escape(str);
-    }
-    // Fallback to regex-based escaping for older browsers
-    return str.replace(/[!"#$%&'()*+,.\/:;<=>?@[\\\]^`{|}~]/g, '\\$&');
-}
-
-// Helper function to convert dot notation to nested object
-// Uses schema-aware greedy matching to preserve dotted keys (e.g., "eng.1")
-function dotToNested(obj, schema) {
-    const result = {};
-
-    for (const key in obj) {
-        const parts = key.split('.');
-        let current = result;
-        let currentSchema = (schema && schema.properties) ? schema.properties : null;
-        let i = 0;
-
-        while (i < parts.length - 1) {
-            let matched = false;
-            if (currentSchema) {
-                // First, check if the full remaining tail is a leaf property
-                // (e.g., "eng.1" as a complete dotted key with no sub-properties)
-                const tailCandidate = parts.slice(i).join('.');
-                if (tailCandidate in currentSchema) {
-                    current[tailCandidate] = obj[key];
-                    matched = true;
-                    i = parts.length; // consumed all parts
-                    break;
-                }
-                // Try progressively longer candidates (longest first) to greedily
-                // match dotted property names like "eng.1"
-                for (let j = parts.length - 1; j > i; j--) {
-                    const candidate = parts.slice(i, j).join('.');
-                    if (candidate in currentSchema) {
-                        if (!current[candidate]) {
-                            current[candidate] = {};
-                        }
-                        current = current[candidate];
-                        const schemaProp = currentSchema[candidate];
-                        currentSchema = (schemaProp && schemaProp.properties) ? schemaProp.properties : null;
-                        i = j;
-                        matched = true;
-                        break;
-                    }
-                }
-            }
-            if (!matched) {
-                // No schema match or no schema — use single segment
-                const part = parts[i];
-                if (!current[part]) {
-                    current[part] = {};
-                }
-                current = current[part];
-                if (currentSchema) {
-                    const schemaProp = currentSchema[part];
-                    currentSchema = (schemaProp && schemaProp.properties) ? schemaProp.properties : null;
-                } else {
-                    currentSchema = null;
-                }
-                i++;
-            }
-        }
-
-        // Set the final key (remaining parts joined — may itself be dotted)
-        // Skip if tail-matching already consumed all parts and wrote the value
-        if (i < parts.length) {
-            const finalKey = parts.slice(i).join('.');
-            current[finalKey] = obj[key];
-        }
-    }
-
-    return result;
-}
-
-// Helper function to collect all boolean fields from schema (including nested)
-function collectBooleanFields(schema, prefix = '') {
-    const boolFields = [];
-
-    if (!schema || !schema.properties) return boolFields;
-
-    Object.entries(schema.properties).forEach(([key, prop]) => {
-        const fullKey = prefix ? `${prefix}.${key}` : key;
-
-        if (prop.type === 'boolean') {
-            boolFields.push(fullKey);
-        } else if (prop.type === 'object' && prop.properties) {
-            boolFields.push(...collectBooleanFields(prop, fullKey));
-        }
-    });
-
-    return boolFields;
-}
-
-/**
- * Normalize FormData from a plugin config form into a nested config object.
- * Handles _data JSON inputs, bracket-notation checkboxes, array-of-objects,
- * file-upload widgets, proper checkbox DOM detection, unchecked boolean
- * handling, and schema-aware dotted-key nesting.
- *
- * @param {HTMLFormElement} form - The form element (needed for checkbox DOM detection)
- * @param {Object|null} schema - The plugin's JSON Schema
- * @returns {Object} Nested config object ready for saving
- */
-function normalizeFormDataForConfig(form, schema) {
-    const formData = new FormData(form);
-    const flatConfig = {};
-
-    for (const [key, value] of formData.entries()) {
-        // Check if this is a patternProperties or array-of-objects hidden input (contains JSON data)
-        // Only match keys ending with '_data' to avoid false positives like 'meta_data_field'
-        if (key.endsWith('_data')) {
-            try {
-                const baseKey = key.replace(/_data$/, '');
-                const jsonValue = JSON.parse(value);
-                // Handle both objects (patternProperties) and arrays (array-of-objects)
-                // Only treat as JSON-backed when it's a non-null object (null is typeof 'object' in JavaScript)
-                if (jsonValue !== null && typeof jsonValue === 'object') {
-                    flatConfig[baseKey] = jsonValue;
-                    continue; // Skip normal processing for JSON data fields
-                }
-            } catch (e) {
-                // Not valid JSON, continue with normal processing
-            }
-        }
-
-        // Skip checkbox-group inputs with bracket notation (they're handled by the hidden _data input)
-        // Pattern: fieldName[] - these are individual checkboxes, actual data is in fieldName_data
-        if (key.endsWith('[]')) {
-            continue;
-        }
-
-        // Skip key_value pair inputs (they're handled by the hidden _data input)
-        if (key.includes('[key_') || key.includes('[value_')) {
-            continue;
-        }
-
-        // Skip array-of-objects per-item inputs (they're handled by the hidden _data input)
-        // Pattern: feeds_item_0_name, feeds_item_1_url, etc.
-        if (key.includes('_item_') && /_item_\d+_/.test(key)) {
-            continue;
-        }
-
-        // Try to get schema property - handle both dot notation and underscore notation
-        let propSchema = getSchemaPropertyType(schema, key);
-        let actualKey = key;
-        let actualValue = value;
-
-        // If not found with dots, try converting underscores to dots (for nested fields)
-        if (!propSchema && key.includes('_')) {
-            const dotKey = key.replace(/_/g, '.');
-            propSchema = getSchemaPropertyType(schema, dotKey);
-            if (propSchema) {
-                // Use the dot notation key for consistency
-                actualKey = dotKey;
-                actualValue = value;
-            }
-        }
-
-        if (propSchema) {
-            const propType = propSchema.type;
-
-            if (propType === 'array') {
-                // Check if this is a file upload widget (JSON array)
-                if (propSchema['x-widget'] === 'file-upload') {
-                    // Try to parse as JSON first (for file uploads)
-                    try {
-                        // Handle HTML entity encoding (from hidden input)
-                        let decodedValue = actualValue;
-                        if (typeof actualValue === 'string') {
-                            // Decode HTML entities if present
-                            const tempDiv = document.createElement('div');
-                            tempDiv.innerHTML = actualValue;
-                            decodedValue = tempDiv.textContent || tempDiv.innerText || actualValue;
-                        }
-
-                        const jsonValue = JSON.parse(decodedValue);
-                        if (Array.isArray(jsonValue)) {
-                            flatConfig[actualKey] = jsonValue;
-                        } else {
-                            // Fallback to comma-separated
-                            const arrayValue = decodedValue ? decodedValue.split(',').map(v => v.trim()).filter(v => v) : [];
-                            flatConfig[actualKey] = arrayValue;
-                        }
-                    } catch (e) {
-                        // Not JSON, use comma-separated
-                        const arrayValue = actualValue ? actualValue.split(',').map(v => v.trim()).filter(v => v) : [];
-                        flatConfig[actualKey] = arrayValue;
-                    }
-                } else {
-                    // Regular array: convert comma-separated string to array
-                    const arrayValue = actualValue ? actualValue.split(',').map(v => v.trim()).filter(v => v) : [];
-                    flatConfig[actualKey] = arrayValue;
-                }
-            } else if (propType === 'integer') {
-                flatConfig[actualKey] = parseInt(actualValue, 10);
-            } else if (propType === 'number') {
-                flatConfig[actualKey] = parseFloat(actualValue);
-            } else if (propType === 'boolean') {
-                // Use querySelector to reliably find checkbox by name attribute
-                // Escape special CSS selector characters in the name
-                const escapedKey = escapeCssSelector(key);
-                const formElement = form.querySelector(`input[type="checkbox"][name="${escapedKey}"]`);
-
-                if (formElement) {
-                    // Element found - use its checked state
-                    flatConfig[actualKey] = formElement.checked;
-                } else {
-                    // Element not found - normalize string booleans and check FormData value
-                    // Checkboxes send "on" when checked, nothing when unchecked
-                    if (typeof actualValue === 'string') {
-                        const lowerValue = actualValue.toLowerCase().trim();
-                        if (lowerValue === 'true' || lowerValue === '1' || lowerValue === 'on') {
-                            flatConfig[actualKey] = true;
-                        } else if (lowerValue === 'false' || lowerValue === '0' || lowerValue === 'off' || lowerValue === '') {
-                            flatConfig[actualKey] = false;
-                        } else {
-                            flatConfig[actualKey] = true;
-                        }
-                    } else if (actualValue === undefined || actualValue === null) {
-                        flatConfig[actualKey] = false;
-                    } else {
-                        flatConfig[actualKey] = Boolean(actualValue);
-                    }
-                }
-            } else {
-                flatConfig[actualKey] = actualValue;
-            }
-        } else {
-            // No schema, try to infer type
-            // Check if value looks like a JSON string (starts with [ or {)
-            if (typeof actualValue === 'string' && (actualValue.trim().startsWith('[') || actualValue.trim().startsWith('{'))) {
-                try {
-                    // Handle HTML entity encoding
-                    let decodedValue = actualValue;
-                    const tempDiv = document.createElement('div');
-                    tempDiv.innerHTML = actualValue;
-                    decodedValue = tempDiv.textContent || tempDiv.innerText || actualValue;
-
-                    const parsed = JSON.parse(decodedValue);
-                    flatConfig[actualKey] = parsed;
-                } catch (e) {
-                    // Not valid JSON, save as string
-                    flatConfig[actualKey] = actualValue;
-                }
-            } else {
-                // No schema - try to detect checkbox by finding the element
-                const escapedKey = escapeCssSelector(key);
-                const formElement = form.querySelector(`input[type="checkbox"][name="${escapedKey}"]`);
-
-                if (formElement && formElement.type === 'checkbox') {
-                    flatConfig[actualKey] = formElement.checked;
-                } else {
-                    if (typeof actualValue === 'string') {
-                        const lowerValue = actualValue.toLowerCase().trim();
-                        if (lowerValue === 'true' || lowerValue === '1' || lowerValue === 'on') {
-                            flatConfig[actualKey] = true;
-                        } else if (lowerValue === 'false' || lowerValue === '0' || lowerValue === 'off' || lowerValue === '') {
-                            flatConfig[actualKey] = false;
-                        } else {
-                            flatConfig[actualKey] = actualValue;
-                        }
-                    } else {
-                        flatConfig[actualKey] = actualValue;
-                    }
-                }
-            }
-        }
-    }
-
-    // Handle unchecked checkboxes (not in FormData) - including nested ones
-    if (schema && schema.properties) {
-        const allBoolFields = collectBooleanFields(schema);
-        allBoolFields.forEach(key => {
-            if (!(key in flatConfig)) {
-                flatConfig[key] = false;
-            }
-        });
-    }
-
-    // Convert dot notation to nested object
-    return dotToNested(flatConfig, schema);
-}
-
-function handlePluginConfigSubmit(e) {
-    e.preventDefault();
-    console.log('Form submitted');
-
-    if (!currentPluginConfig) {
-        showNotification('Plugin configuration not loaded', 'error');
-        return;
-    }
-
-    const pluginId = currentPluginConfig.pluginId;
-    const schema = currentPluginConfig.schema;
-    const form = e.target;
-
-    // Fix invalid hidden fields before submission
-    // This prevents "invalid form control is not focusable" errors
-    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;
-            }
-        }
-    });
-
-    const config = normalizeFormDataForConfig(form, schema);
-
-    console.log('Nested config to save:', config);
-
-    // Save the configuration
-    fetch('/api/v3/plugins/config', {
-        method: 'POST',
-        headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify({
-            plugin_id: pluginId,
-            config: config
-        })
-    })
-    .then(response => response.json())
-    .then(data => {
-        if (data.status === 'success') {
-            // Hide validation errors on success
-            displayValidationErrors([]);
-            showNotification('Configuration saved successfully', 'success');
-            closePluginConfigModal();
-            loadInstalledPlugins(); // Refresh to show updated config
-        } else {
-            // Display validation errors if present
-            if (data.validation_errors && Array.isArray(data.validation_errors)) {
-                displayValidationErrors(data.validation_errors);
-            }
-            showNotification('Error saving configuration: ' + data.message, 'error');
-        }
-    })
-    .catch(error => {
-        console.error('Error saving plugin config:', error);
-        showNotification('Error saving configuration: ' + error.message, 'error');
-    });
-}
-
-function generatePluginConfigForm(pluginId, config) {
-    console.log('[DEBUG] ===== Generating plugin config form =====');
-    console.log('[DEBUG] Plugin ID:', pluginId);
-    // Load plugin schema and actions for dynamic form generation
-    const installedPluginsPromise = (window.PluginAPI && window.PluginAPI.getInstalledPlugins) ?
-        window.PluginAPI.getInstalledPlugins().then(plugins => ({ status: 'success', data: { plugins: plugins } })) :
-        fetch(`/api/v3/plugins/installed`).then(r => r.json());
-
-    return Promise.all([
-        fetch(`/api/v3/plugins/schema?plugin_id=${pluginId}`).then(r => r.json()),
-        installedPluginsPromise
-    ])
-        .then(([schemaData, pluginsData]) => {
-            console.log('[DEBUG] Schema data received:', schemaData.status);
-
-            // Get plugin info including web_ui_actions
-            let pluginInfo = null;
-            if (pluginsData.status === 'success' && pluginsData.data && pluginsData.data.plugins) {
-                pluginInfo = pluginsData.data.plugins.find(p => p.id === pluginId);
-                console.log('[DEBUG] Plugin info found:', pluginInfo ? 'yes' : 'no');
-                if (pluginInfo) {
-                    console.log('[DEBUG] Plugin info keys:', Object.keys(pluginInfo));
-                    console.log('[DEBUG] web_ui_actions in pluginInfo:', 'web_ui_actions' in pluginInfo);
-                    console.log('[DEBUG] web_ui_actions value:', pluginInfo.web_ui_actions);
-                }
-            } else {
-                console.log('[DEBUG] pluginsData status:', pluginsData.status);
-            }
-            const webUiActions = pluginInfo ? (pluginInfo.web_ui_actions || []) : [];
-            console.log('[DEBUG] Final webUiActions:', webUiActions, 'length:', webUiActions.length);
-
-            if (schemaData.status === 'success' && schemaData.data.schema) {
-                console.log('[DEBUG] Schema has properties:', Object.keys(schemaData.data.schema.properties || {}));
-                // Store plugin ID, schema, and actions for form submission
-                currentPluginConfig = {
-                    pluginId: pluginId,
-                    schema: schemaData.data.schema,
-                    webUiActions: webUiActions
-                };
-                // Also assign to window for global access in template interpolations
-                window.currentPluginConfig = currentPluginConfig;
-                // Also update state
-                currentPluginConfigState.schema = schemaData.data.schema;
-                console.log('[DEBUG] Calling generateFormFromSchema...');
-                return generateFormFromSchema(schemaData.data.schema, config, webUiActions);
-            } else {
-                // Fallback to simple form if no schema
-                currentPluginConfig = { pluginId: pluginId, schema: null, webUiActions: webUiActions };
-                // Also assign to window for global access in template interpolations
-                window.currentPluginConfig = currentPluginConfig;
-                return generateSimpleConfigForm(config, webUiActions);
-            }
-        })
-        .catch(error => {
-            console.error('Error loading schema:', error);
-            currentPluginConfig = { pluginId: pluginId, schema: null, webUiActions: [] };
-            // Also assign to window for global access in template interpolations
-            window.currentPluginConfig = currentPluginConfig;
-            return generateSimpleConfigForm(config, []);
-        });
-}
-
-// Helper to flatten nested config for form display (converts {nfl: {enabled: true}} to {'nfl.enabled': true})
-function flattenConfig(obj, prefix = '') {
-    let result = {};
-
-    for (const key in obj) {
-        const value = obj[key];
-        const fullKey = prefix ? `${prefix}.${key}` : key;
-
-        if (value !== null && typeof value === 'object' && !Array.isArray(value)) {
-            // Recursively flatten nested objects
-            Object.assign(result, flattenConfig(value, fullKey));
-        } else {
-            result[fullKey] = value;
-        }
-    }
-
-    return result;
-}
-
-// Generate field HTML for a single property (used recursively)
 // Helper function to render a single item in an array of objects
 function renderArrayObjectItem(fieldId, fullKey, itemProperties, itemValue, index, itemsSchema) {
     const item = itemValue || {};
@@ -2896,821 +2296,6 @@ function renderArrayObjectItem(fieldId, fullKey, itemProperties, itemValue, inde
     return html;
 }
 
-function generateFieldHtml(key, prop, value, prefix = '') {
-    const fullKey = prefix ? `${prefix}.${key}` : key;
-    const label = prop.title || key.replace(/_/g, ' ').replace(/\b\w/g, l => l.toUpperCase());
-    const description = prop.description || '';
-    let html = '';
-
-    // Debug logging for categories field
-    if (key === 'categories') {
-        console.log(`[DEBUG] Processing categories field:`, {
-            type: prop.type,
-            hasAdditionalProperties: !!(prop.additionalProperties),
-            additionalPropertiesType: prop.additionalProperties?.type,
-            hasProperties: !!(prop.properties),
-            allKeys: Object.keys(prop)
-        });
-    }
-
-    // Handle patternProperties objects (dynamic key-value pairs like custom_feeds, feed_logo_map)
-    if (prop.type === 'object' && prop.patternProperties && !prop.properties) {
-        const fieldId = fullKey.replace(/\./g, '_');
-        const currentValue = value || {};
-        const patternProp = Object.values(prop.patternProperties)[0]; // Get the pattern property schema
-        const valueType = patternProp.type || 'string';
-        const maxProperties = prop.maxProperties || 50;
-        const entries = Object.entries(currentValue);
-
-        html += `
-            <div class="key-value-pairs-container">
-                <div class="mb-2">
-                    <p class="text-sm text-gray-600 mb-2">${description || 'Add key-value pairs'}</p>
-                    <div id="${fieldId}_pairs" class="space-y-2">
-        `;
-
-        // Render existing pairs
-        entries.forEach(([pairKey, pairValue], index) => {
-            html += `
-                <div class="flex items-center gap-2 key-value-pair" data-index="${index}">
-                    <input type="text"
-                           name="${fullKey}[key_${index}]"
-                           value="${pairKey}"
-                           placeholder="Key"
-                           class="flex-1 px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm"
-                           data-key-index="${index}"
-                           onchange="updateKeyValuePairData('${fieldId}', '${fullKey}')">
-                    <input type="${valueType === 'string' ? 'text' : valueType === 'number' || valueType === 'integer' ? 'number' : 'text'}"
-                           name="${fullKey}[value_${index}]"
-                           value="${pairValue}"
-                           placeholder="Value"
-                           class="flex-1 px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm"
-                           data-value-index="${index}"
-                           onchange="updateKeyValuePairData('${fieldId}', '${fullKey}')">
-                    <button type="button"
-                            onclick="removeKeyValuePair('${fieldId}', ${index})"
-                            class="px-3 py-2 text-red-600 hover:text-red-800 hover:bg-red-50 rounded-md transition-colors"
-                            title="Remove">
-                        <i class="fas fa-trash"></i>
-                    </button>
-                </div>
-            `;
-        });
-
-        html += `
-                    </div>
-                    <button type="button"
-                            onclick="addKeyValuePair('${fieldId}', '${fullKey}', ${maxProperties})"
-                            class="mt-2 px-4 py-2 text-sm bg-blue-600 hover:bg-blue-700 text-white rounded-md transition-colors"
-                            ${entries.length >= maxProperties ? 'disabled style="opacity: 0.5; cursor: not-allowed;"' : ''}>
-                        <i class="fas fa-plus mr-1"></i> Add Entry
-                    </button>
-                    <input type="hidden" id="${fieldId}_data" name="${fullKey}_data" value='${JSON.stringify(currentValue).replace(/'/g, "&#39;")}'>
-                </div>
-            </div>
-        `;
-
-        return html;
-    }
-
-    // Handle objects with additionalProperties (dynamic keys with object values, like categories)
-    // Must have additionalProperties, no top-level properties, and additionalProperties must be an object type
-    const hasAdditionalProperties = prop.type === 'object' &&
-                                    (prop.properties === undefined || prop.properties === null) && // Explicitly exclude objects with properties (those use nested handler)
-                                    prop.additionalProperties &&
-                                    typeof prop.additionalProperties === 'object' &&
-                                    prop.additionalProperties !== null &&
-                                    prop.additionalProperties.type === 'object' &&
-                                    !prop.patternProperties; // Also exclude patternProperties objects
-
-    // Debug logging for categories field specifically
-    if (key === 'categories') {
-        console.log(`[DEBUG] Categories field check:`, {
-            type: prop.type,
-            hasProperties: !!prop.properties,
-            hasAdditionalProperties: !!prop.additionalProperties,
-            additionalPropertiesType: prop.additionalProperties?.type,
-            additionalPropertiesIsObject: typeof prop.additionalProperties === 'object',
-            matchesCondition: hasAdditionalProperties,
-            allPropKeys: Object.keys(prop)
-        });
-    }
-
-    if (hasAdditionalProperties) {
-        const fieldId = fullKey.replace(/\./g, '_');
-        const currentValue = value || {};
-        const categorySchema = prop.additionalProperties;
-        const entries = Object.entries(currentValue);
-
-        console.log(`[DEBUG] Rendering additionalProperties object for ${fullKey}:`, {
-            entries: entries.length,
-            keys: Object.keys(currentValue)
-        });
-
-        html += `
-            <div class="categories-container mb-4">
-                <div class="mb-4">
-                    <h4 class="text-lg font-semibold text-gray-900 mb-2">${label}</h4>
-                    ${description ? `<p class="text-sm text-gray-600 mb-3">${description}</p>` : ''}
-                    <div id="${fieldId}_categories" class="space-y-3">
-        `;
-
-        // Render each category
-        entries.forEach(([categoryKey, categoryValue]) => {
-            const categoryId = `${fieldId}_${categoryKey}`;
-            // Ensure categoryValue is an object
-            const catValue = typeof categoryValue === 'object' && categoryValue !== null ? categoryValue : {};
-            const enabled = catValue.enabled !== undefined ? catValue.enabled : (categorySchema.properties?.enabled?.default !== undefined ? categorySchema.properties.enabled.default : true);
-            // Safely extract string values, ensuring they're strings
-            const dataFile = (typeof catValue.data_file === 'string' ? catValue.data_file : '') || '';
-            const displayName = (typeof catValue.display_name === 'string' ? catValue.display_name : '') || categoryKey.replace(/_/g, ' ').replace(/\b\w/g, l => l.toUpperCase());
-
-            html += `
-                <div class="category-item border border-gray-300 rounded-lg p-4 bg-white">
-                    <div class="flex items-center justify-between mb-3">
-                        <div class="flex items-center gap-3">
-                            <label class="flex items-center cursor-pointer">
-                                <input type="checkbox"
-                                       name="${fullKey}.${categoryKey}.enabled"
-                                       ${enabled ? 'checked' : ''}
-                                       class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded category-enabled-toggle"
-                                       data-category-key="${categoryKey}">
-                                <span class="ml-2 font-medium text-gray-900">${escapeHtml(displayName)}</span>
-                            </label>
-                        </div>
-                        <span class="text-xs text-gray-500 font-mono">${escapeHtml(categoryKey)}</span>
-                    </div>
-                    <div class="space-y-2 text-sm">
-                        <div>
-                            <label class="block text-xs font-medium text-gray-700 mb-1">Data File</label>
-                            <input type="text"
-                                   name="${fullKey}.${categoryKey}.data_file"
-                                   value="${escapeHtml(dataFile)}"
-                                   readonly
-                                   class="w-full px-2 py-1 border border-gray-200 rounded bg-gray-50 text-gray-600 text-xs font-mono">
-                        </div>
-                        <div>
-                            <label class="block text-xs font-medium text-gray-700 mb-1">Display Name</label>
-                            <input type="text"
-                                   name="${fullKey}.${categoryKey}.display_name"
-                                   value="${escapeHtml(displayName)}"
-                                   class="w-full px-2 py-1 border border-gray-300 rounded text-xs">
-                        </div>
-                    </div>
-                </div>
-            `;
-        });
-
-        if (entries.length === 0) {
-            html += `
-                <div class="text-center py-4 text-sm text-gray-500">
-                    <i class="fas fa-info-circle mr-2"></i>
-                    No categories configured. Use the File Manager below to add JSON files.
-                </div>
-            `;
-        }
-
-        html += `
-                    </div>
-                </div>
-            </div>
-        `;
-
-        return html;
-    }
-
-    // Handle nested objects with known properties
-    if (prop.type === 'object' && prop.properties) {
-        const sectionId = `section-${fullKey.replace(/\./g, '-')}`;
-        const nestedConfig = value || {};
-        const sectionLabel = prop.title || key.replace(/_/g, ' ').replace(/\b\w/g, l => l.toUpperCase());
-        // Calculate nesting depth for better spacing
-        const nestingDepth = (fullKey.match(/\./g) || []).length;
-        const marginClass = nestingDepth > 1 ? 'mb-6' : 'mb-4';
-
-        html += `
-            <div class="nested-section border border-gray-300 rounded-lg ${marginClass}">
-                <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="toggleNestedSection('${sectionId}', event); return false;"
-                        data-section-id="${sectionId}">
-                    <div class="flex-1">
-                        <h4 class="font-semibold text-gray-900">${sectionLabel}</h4>
-                        ${description ? `<p class="text-sm text-gray-600 mt-1">${description}</p>` : ''}
-                    </div>
-                    <i id="${sectionId}-icon" class="fas fa-chevron-right text-gray-500 transition-transform"></i>
-                </button>
-                <div id="${sectionId}" class="nested-content collapsed bg-gray-50 px-4 py-4 space-y-3 rounded-b-lg" style="max-height: 0; display: none;">
-        `;
-
-        // Recursively generate fields for nested properties
-        // Get ordered properties if x-propertyOrder is defined
-        let nestedPropertyEntries = Object.entries(prop.properties);
-        if (prop['x-propertyOrder'] && Array.isArray(prop['x-propertyOrder'])) {
-            const order = prop['x-propertyOrder'];
-            const orderedEntries = [];
-            const unorderedEntries = [];
-
-            // Separate ordered and unordered properties
-            nestedPropertyEntries.forEach(([nestedKey, nestedProp]) => {
-                const index = order.indexOf(nestedKey);
-                if (index !== -1) {
-                    orderedEntries[index] = [nestedKey, nestedProp];
-                } else {
-                    unorderedEntries.push([nestedKey, nestedProp]);
-                }
-            });
-
-            // Combine ordered entries (filter out undefined from sparse array) with unordered entries
-            nestedPropertyEntries = orderedEntries.filter(entry => entry !== undefined).concat(unorderedEntries);
-        }
-
-        nestedPropertyEntries.forEach(([nestedKey, nestedProp]) => {
-            const nestedValue = nestedConfig[nestedKey] !== undefined ? nestedConfig[nestedKey] : nestedProp.default;
-            console.log(`[DEBUG] Processing nested field ${fullKey}.${nestedKey}:`, {
-                type: nestedProp.type,
-                hasXWidget: nestedProp.hasOwnProperty('x-widget'),
-                xWidget: nestedProp['x-widget'],
-                allKeys: Object.keys(nestedProp)
-            });
-            html += generateFieldHtml(nestedKey, nestedProp, nestedValue, fullKey);
-        });
-
-        html += `
-                </div>
-            </div>
-        `;
-
-        // Add extra spacing after nested sections to prevent overlap with next section
-        html += `<div class="mb-4" style="clear: both;"></div>`;
-
-        return html;
-    }
-
-    // Regular (non-nested) field
-    html += `
-        <div class="form-group">
-            <label for="${fullKey}" class="block text-sm font-medium text-gray-700 mb-1">
-                ${label}
-            </label>
-    `;
-
-    if (description) {
-        html += `<p class="text-sm text-gray-600 mb-2">${description}</p>`;
-    }
-
-    // Generate appropriate input based on type
-    if (prop.type === 'boolean') {
-        html += `
-            <label class="flex items-center">
-                <input type="checkbox" id="${fullKey}" name="${fullKey}" ${value ? 'checked' : ''} class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded">
-                <span class="ml-2 text-sm">Enabled</span>
-            </label>
-        `;
-    } else if (prop.type === 'number' || prop.type === 'integer') {
-        const min = prop.minimum !== undefined ? `min="${prop.minimum}"` : '';
-        const max = prop.maximum !== undefined ? `max="${prop.maximum}"` : '';
-        const step = prop.type === 'integer' ? 'step="1"' : 'step="any"';
-
-        // Ensure value respects min/max constraints
-        let fieldValue = value !== undefined ? value : (prop.default !== undefined ? prop.default : '');
-        if (fieldValue !== '' && fieldValue !== undefined && fieldValue !== null) {
-            const numValue = typeof fieldValue === 'string' ? parseFloat(fieldValue) : fieldValue;
-            if (!isNaN(numValue)) {
-                // Clamp value to min/max if constraints exist
-                if (prop.minimum !== undefined && numValue < prop.minimum) {
-                    fieldValue = prop.minimum;
-                } else if (prop.maximum !== undefined && numValue > prop.maximum) {
-                    fieldValue = prop.maximum;
-                } else {
-                    fieldValue = numValue;
-                }
-            }
-        }
-
-        // If still empty and we have a default, use it
-        if (fieldValue === '' && prop.default !== undefined) {
-            fieldValue = prop.default;
-        }
-
-        html += `
-            <input type="number" id="${fullKey}" name="${fullKey}" value="${fieldValue}" ${min} ${max} ${step} class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm bg-white text-black placeholder:text-gray-500">
-        `;
-    } else if (prop.type === 'array') {
-        // Check if this is an array of objects FIRST (before other checks)
-        if (prop.items && prop.items.type === 'object' && prop.items.properties) {
-            // Array of objects widget (like custom_feeds with name, url, enabled, logo)
-            console.log(`[DEBUG] ✅ Detected array-of-objects widget for ${fullKey}`);
-            const fieldId = fullKey.replace(/\./g, '_');
-            const itemsSchema = prop.items;
-            const itemProperties = itemsSchema.properties || {};
-            const maxItems = prop.maxItems || 50;
-            const currentItems = Array.isArray(value) ? value : [];
-
-            html += `
-                <div class="array-of-objects-container mt-1">
-                    <div id="${fieldId}_items" class="space-y-4">
-            `;
-
-            // Render existing items
-            currentItems.forEach((item, index) => {
-                html += renderArrayObjectItem(fieldId, fullKey, itemProperties, item, index, itemsSchema);
-            });
-
-            html += `
-                    </div>
-                    <button type="button"
-                            onclick="addArrayObjectItem('${fieldId}', '${fullKey}', ${maxItems})"
-                            class="mt-3 px-4 py-2 text-sm bg-blue-600 hover:bg-blue-700 text-white rounded-md transition-colors"
-                            ${currentItems.length >= maxItems ? 'disabled style="opacity: 0.5; cursor: not-allowed;"' : ''}>
-                        <i class="fas fa-plus mr-1"></i> Add Feed
-                    </button>
-                    <input type="hidden" id="${fieldId}_data" name="${fullKey}_data" value="${escapeAttribute(JSON.stringify(currentItems))}">
-                </div>
-            `;
-        } else {
-            // Array - check for file upload widget first (to avoid breaking static-image plugin),
-            // then checkbox-group, then custom-feeds
-            const hasXWidget = prop.hasOwnProperty('x-widget');
-            const xWidgetValue = prop['x-widget'];
-            const xWidgetValue2 = prop['x-widget'] || prop['x_widget'] || prop.xWidget;
-
-            console.log(`[DEBUG] Array field ${fullKey}:`, {
-                type: prop.type,
-                hasItems: !!prop.items,
-                itemsType: prop.items?.type,
-                itemsHasProperties: !!prop.items?.properties,
-                hasXWidget: hasXWidget,
-                'x-widget': xWidgetValue,
-                'x-widget (alt)': xWidgetValue2,
-                'x-upload-config': prop['x-upload-config'],
-                propKeys: Object.keys(prop),
-                value: value
-            });
-
-            // Check for file-upload widget FIRST (to avoid breaking static-image plugin)
-            if (xWidgetValue === 'file-upload' || xWidgetValue2 === 'file-upload') {
-                console.log(`[DEBUG] ✅ Detected file-upload widget for ${fullKey} - rendering upload zone`);
-                const uploadConfig = prop['x-upload-config'] || {};
-                const pluginId = uploadConfig.plugin_id || currentPluginConfig?.pluginId || 'static-image';
-                const maxFiles = uploadConfig.max_files || 10;
-                const fileType = uploadConfig.file_type || 'image'; // 'image' or 'json'
-                const allowedTypes = uploadConfig.allowed_types || (fileType === 'json' ? ['application/json'] : ['image/png', 'image/jpeg', 'image/bmp', 'image/gif']);
-                const maxSizeMB = uploadConfig.max_size_mb || 5;
-                const customUploadEndpoint = uploadConfig.endpoint; // Custom endpoint if specified
-                const customDeleteEndpoint = uploadConfig.delete_endpoint; // Custom delete endpoint if specified
-
-                const currentFiles = Array.isArray(value) ? value : [];
-                const fieldId = fullKey.replace(/\./g, '_');
-
-                html += `
-                <div id="${fieldId}_upload_widget" class="mt-1">
-                    <!-- File Upload Drop Zone -->
-                    <div id="${fieldId}_drop_zone"
-                         class="border-2 border-dashed border-gray-300 rounded-lg p-6 text-center hover:border-blue-400 transition-colors cursor-pointer"
-                         ondrop="handleFileDrop(event, '${fieldId}')"
-                         ondragover="event.preventDefault()"
-                         onclick="document.getElementById('${fieldId}_file_input').click()">
-                        <input type="file"
-                               id="${fieldId}_file_input"
-                               multiple
-                               accept="${allowedTypes.join(',')}"
-                               style="display: none;"
-                               onchange="handleFileSelect(event, '${fieldId}')">
-                        <i class="fas fa-cloud-upload-alt text-3xl text-gray-400 mb-2"></i>
-                        <p class="text-sm text-gray-600">Drag and drop ${fileType === 'json' ? 'JSON files' : 'images'} here or click to browse</p>
-                        <p class="text-xs text-gray-500 mt-1">Max ${maxFiles} files, ${maxSizeMB}MB each ${fileType === 'json' ? '(JSON)' : '(PNG, JPG, GIF, BMP)'}</p>
-                    </div>
-
-                    <!-- Uploaded Files List -->
-                    <div id="${fieldId}_image_list" class="mt-4 space-y-2">
-                        ${currentFiles.map((file, idx) => {
-                            const fileId = file.id || file.category_name || idx;
-                            const fileName = file.original_filename || file.filename || (fileType === 'json' ? 'JSON File' : 'Image');
-                            const entryCount = file.entry_count ? `${file.entry_count} entries` : '';
-
-                            return `
-                            <div id="file_${fileId}" class="bg-gray-50 p-3 rounded-lg border border-gray-200">
-                                <div class="flex items-center justify-between mb-2">
-                                    <div class="flex items-center space-x-3 flex-1">
-                                        ${fileType === 'json' ? `
-                                        <div class="w-16 h-16 bg-blue-100 rounded flex items-center justify-center">
-                                            <i class="fas fa-file-code text-2xl text-blue-600"></i>
-                                        </div>
-                                        ` : `
-                                        <img src="/${file.path || ''}"
-                                             alt="${fileName}"
-                                             class="w-16 h-16 object-cover rounded"
-                                             onerror="this.style.display='none'; this.nextElementSibling.style.display='block';">
-                                        <div style="display:none;" class="w-16 h-16 bg-gray-200 rounded flex items-center justify-center">
-                                            <i class="fas fa-image text-gray-400"></i>
-                                        </div>
-                                        `}
-                                        <div class="flex-1 min-w-0">
-                                            <p class="text-sm font-medium text-gray-900 truncate">${escapeHtml(fileName)}</p>
-                                            <p class="text-xs text-gray-500">${formatFileSize(file.size || 0)} • ${formatDate(file.uploaded_at)}</p>
-                                            ${entryCount ? `<p class="text-xs text-blue-600 mt-1"><i class="fas fa-database mr-1"></i>${entryCount}</p>` : ''}
-                                            ${fileType === 'image' && file.schedule ? `
-                                            <p class="text-xs text-blue-600 mt-1">
-                                                <i class="fas fa-clock mr-1"></i>${file.schedule.enabled && file.schedule.mode !== 'always' ? (window.getScheduleSummary ? window.getScheduleSummary(file.schedule) : 'Scheduled') : 'Always shown'}
-                                            </p>
-                                            ` : ''}
-                                        </div>
-                                    </div>
-                                    <div class="flex items-center space-x-2 ml-4">
-                                        ${fileType === 'image' ? `
-                                        <button type="button"
-                                                onclick="openImageSchedule('${fieldId}', '${fileId}', ${idx})"
-                                                class="text-blue-600 hover:text-blue-800 p-2"
-                                                title="Schedule this image">
-                                            <i class="fas fa-calendar-alt"></i>
-                                        </button>
-                                        ` : ''}
-                                        <button type="button"
-                                                onclick="deleteUploadedFile('${fieldId}', '${fileId}', '${pluginId}', '${fileType}', ${customDeleteEndpoint ? `'${customDeleteEndpoint}'` : 'null'})"
-                                                class="text-red-600 hover:text-red-800 p-2"
-                                                title="Delete ${fileType === 'json' ? 'file' : 'image'}">
-                                            <i class="fas fa-trash"></i>
-                                        </button>
-                                    </div>
-                                </div>
-                                ${fileType === 'image' ? `<!-- Schedule widget will be inserted here when opened -->
-                                <div id="schedule_${fileId}" class="hidden mt-3 pt-3 border-t border-gray-300"></div>
-                                ` : ''}
-                            </div>
-                            `;
-                        }).join('')}
-                    </div>
-
-                    <!-- Hidden input to store file data -->
-                    <input type="hidden" id="${fieldId}_images_data" name="${fullKey}" value="${JSON.stringify(currentFiles).replace(/&/g, '&amp;').replace(/"/g, '&quot;').replace(/'/g, '&#39;')}"
-                           data-upload-endpoint="${customUploadEndpoint || '/api/v3/plugins/assets/upload'}"
-                           data-file-type="${fileType}">
-                </div>
-            `;
-            } else if (xWidgetValue === 'checkbox-group' || xWidgetValue2 === 'checkbox-group') {
-            // Checkbox group widget for multi-select arrays with enum items
-            // Use _data hidden input pattern to serialize selected values correctly
-            console.log(`[DEBUG] ✅ Detected checkbox-group widget for ${fullKey} - rendering checkboxes`);
-            const arrayValue = Array.isArray(value) ? value : (prop.default || []);
-            const enumItems = prop.items && prop.items.enum ? prop.items.enum : [];
-            const xOptions = prop['x-options'] || {};
-            const labels = xOptions.labels || {};
-            const fieldId = fullKey.replace(/\./g, '_');
-
-            html += `<div class="mt-1 space-y-2">`;
-            enumItems.forEach((option) => {
-                const isChecked = arrayValue.includes(option);
-                const label = labels[option] || option.replace(/_/g, ' ').replace(/\b\w/g, l => l.toUpperCase());
-                const checkboxId = `${fieldId}_${escapeHtml(option)}`;
-                html += `
-                    <label class="flex items-center">
-                        <input type="checkbox"
-                               id="${checkboxId}"
-                               name="${fullKey}[]"
-                               data-checkbox-group="${fieldId}"
-                               data-option-value="${escapeHtml(option)}"
-                               value="${escapeHtml(option)}"
-                               ${isChecked ? 'checked' : ''}
-                               onchange="updateCheckboxGroupData('${fieldId}')"
-                               class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded">
-                        <span class="ml-2 text-sm text-gray-700">${escapeHtml(label)}</span>
-                    </label>
-                `;
-            });
-            html += `</div>`;
-            // Hidden input to store selected values as JSON array (like array-of-objects pattern)
-            html += `<input type="hidden" id="${fieldId}_data" name="${fullKey}_data" value='${JSON.stringify(arrayValue).replace(/'/g, "&#39;")}'>`;
-            // Sentinel hidden input with bracket notation to allow clearing array to [] when all unchecked
-            // This ensures the field is always submitted, even when all checkboxes are unchecked
-            html += `<input type="hidden" name="${fullKey}[]" value="">`;
-            } else if (xWidgetValue === 'custom-feeds' || xWidgetValue2 === 'custom-feeds') {
-            // Custom feeds widget - check schema validation first
-            const itemsSchema = prop.items || {};
-            const itemProperties = itemsSchema.properties || {};
-            if (!itemProperties.name || !itemProperties.url) {
-                // Schema doesn't match expected structure - fallback to regular array input
-                console.log(`[DEBUG] ⚠️ Custom feeds widget requires 'name' and 'url' properties for ${fullKey}, using regular array input`);
-                let arrayValue = '';
-                if (value === null || value === undefined) {
-                    arrayValue = Array.isArray(prop.default) ? prop.default.join(', ') : '';
-                } else if (Array.isArray(value)) {
-                    arrayValue = value.join(', ');
-                } else {
-                    arrayValue = '';
-                }
-                html += `
-                    <input type="text" id="${fullKey}" name="${fullKey}" value="${arrayValue}" placeholder="Enter values separated by commas" class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm bg-white text-black placeholder:text-gray-500">
-                    <p class="text-sm text-gray-600 mt-1">Enter values separated by commas</p>
-                `;
-            } else {
-                // Custom feeds table interface - widget-specific implementation
-                // Note: This is handled by the template, but we include it here for consistency
-                // The template renders the custom feeds table, so JS-rendered forms should match
-                console.log(`[DEBUG] ✅ Detected custom-feeds widget for ${fullKey} - note: custom feeds table is typically rendered server-side`);
-                let arrayValue = '';
-                if (value === null || value === undefined) {
-                    arrayValue = Array.isArray(prop.default) ? prop.default.join(', ') : '';
-                } else if (Array.isArray(value)) {
-                    arrayValue = value.join(', ');
-                } else {
-                    arrayValue = '';
-                }
-                html += `
-                    <input type="text" id="${fullKey}" name="${fullKey}" value="${arrayValue}" placeholder="Enter values separated by commas" class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm bg-white text-black placeholder:text-gray-500">
-                    <p class="text-sm text-gray-600 mt-1">Enter values separated by commas (custom feeds table rendered server-side)</p>
-                `;
-            }
-            } else {
-            // Regular array input (comma-separated)
-            console.log(`[DEBUG] ❌ No special widget detected for ${fullKey}, using regular array input`);
-            // Handle null/undefined values - use default if available
-            let arrayValue = '';
-            if (value === null || value === undefined) {
-                arrayValue = Array.isArray(prop.default) ? prop.default.join(', ') : '';
-            } else if (Array.isArray(value)) {
-                arrayValue = value.join(', ');
-            } else {
-                arrayValue = '';
-            }
-            html += `
-                <input type="text" id="${fullKey}" name="${fullKey}" value="${arrayValue}" placeholder="Enter values separated by commas" class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm bg-white text-black placeholder:text-gray-500">
-                <p class="text-sm text-gray-600 mt-1">Enter values separated by commas</p>
-            `;
-            }
-        }
-    } else if (prop.enum) {
-        html += `<select id="${fullKey}" name="${fullKey}" class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm bg-white text-black">`;
-        prop.enum.forEach(option => {
-            const selected = value === option ? 'selected' : '';
-            html += `<option value="${option}" ${selected}>${option}</option>`;
-        });
-        html += `</select>`;
-    } else if (prop['x-widget'] === 'json-file-manager') {
-        // Reusable JSON file manager widget (no CDN, keyboard shortcuts, configurable actions)
-        const widgetConfig = prop['x-widget-config'] || {};
-        const pluginId = currentPluginConfig?.pluginId || window.currentPluginConfig?.pluginId || '';
-        const safeFieldId = (fullKey || 'file_manager').replace(/[^a-zA-Z0-9_-]/g, '_');
-
-        html += `<div id="${safeFieldId}_jfm_mount"></div>`;
-
-        setTimeout(() => {
-            const mount = document.getElementById(`${safeFieldId}_jfm_mount`);
-            if (!mount) return;
-            // Destroy the previous instance for this mount only — leave other instances intact
-            window.__jfmInstances = window.__jfmInstances || {};
-            const prev = window.__jfmInstances[safeFieldId];
-            if (prev?._destroy) prev._destroy();
-            if (typeof JsonFileManager !== 'undefined') {
-                window.__jfmInstances[safeFieldId] = new JsonFileManager(mount, widgetConfig, pluginId);
-            } else {
-                window.__jfmInstances[safeFieldId] = null;
-                mount.innerHTML = '<p style="color:#dc2626;font-size:.875rem;">json-file-manager widget not loaded. Check base.html includes json-file-manager.js.</p>';
-            }
-        }, 150);
-    } else if (prop['x-widget'] === 'custom-html') {
-        // Custom HTML widget - load HTML from plugin directory
-        const htmlFile = prop['x-html-file'];
-        const pluginId = currentPluginConfig?.pluginId || window.currentPluginConfig?.pluginId || '';
-        const fieldId = fullKey.replace(/\./g, '_');
-
-        console.log(`[Custom HTML Widget] Generating widget for ${fullKey}:`, {
-            htmlFile,
-            pluginId,
-            fieldId,
-            hasPluginId: !!pluginId
-        });
-
-        if (htmlFile && pluginId) {
-            html += `
-                <div id="${fieldId}_custom_html"
-                     data-plugin-id="${pluginId}"
-                     data-html-file="${htmlFile}"
-                     class="custom-html-widget">
-                    <div class="animate-pulse text-center py-4">
-                        <i class="fas fa-spinner fa-spin text-gray-400"></i>
-                        <p class="text-sm text-gray-500 mt-2">Loading file manager...</p>
-                    </div>
-                </div>
-            `;
-
-            // Load HTML asynchronously
-            setTimeout(() => {
-                loadCustomHtmlWidget(fieldId, pluginId, htmlFile);
-            }, 100);
-        } else {
-            console.error(`[Custom HTML Widget] Missing configuration for ${fullKey}:`, {
-                htmlFile,
-                pluginId,
-                currentPluginConfig: currentPluginConfig?.pluginId,
-                windowPluginConfig: window.currentPluginConfig?.pluginId
-            });
-            html += `
-                <div class="text-sm text-red-600 p-4 border border-red-200 rounded">
-                    <i class="fas fa-exclamation-triangle mr-1"></i>
-                    Custom HTML widget configuration error: missing html-file or plugin-id
-                    <br><small>htmlFile: ${htmlFile || 'missing'}, pluginId: ${pluginId || 'missing'}</small>
-                </div>
-            `;
-        }
-    } else if (prop.type === 'object') {
-        // Fallback for objects that don't match any special case - render as JSON textarea
-        console.warn(`[DEBUG] Object field ${fullKey} doesn't match any special handler, rendering as JSON textarea`);
-        const jsonValue = typeof value === 'object' && value !== null ? JSON.stringify(value, null, 2) : (value || '{}');
-        html += `
-            <textarea id="${fullKey}" name="${fullKey}" rows="8" class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm font-mono text-xs bg-white text-black" style="font-family: 'Courier New', monospace;">${escapeHtml(jsonValue)}</textarea>
-            <p class="text-sm text-gray-600 mt-1">Edit as JSON object</p>
-        `;
-    } else {
-        // Check if this is a secret field
-        const isSecret = prop['x-secret'] === true;
-        const inputType = isSecret ? 'password' : 'text';
-        const maxLength = prop.maxLength || '';
-        const maxLengthAttr = maxLength ? `maxlength="${maxLength}"` : '';
-        const secretClass = isSecret ? 'pr-10' : '';
-
-        html += `
-            <div class="relative">
-                <input type="${inputType}" id="${fullKey}" name="${fullKey}" value="${value !== undefined ? value : ''}" ${maxLengthAttr} class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm bg-white text-black placeholder:text-gray-500 ${secretClass}">
-        `;
-
-        if (isSecret) {
-            html += `
-                <button type="button" onclick="togglePasswordVisibility('${fullKey}')" class="absolute inset-y-0 right-0 pr-3 flex items-center text-gray-500 hover:text-gray-700">
-                    <i id="${fullKey}-icon" class="fas fa-eye"></i>
-                </button>
-            `;
-        }
-
-        html += `</div>`;
-    }
-
-    html += `</div>`;
-
-    return html;
-}
-
-// Load custom HTML widget from plugin directory
-async function loadCustomHtmlWidget(fieldId, pluginId, htmlFile) {
-    try {
-        const container = document.getElementById(`${fieldId}_custom_html`);
-        if (!container) {
-            console.warn(`[Custom HTML Widget] Container not found: ${fieldId}_custom_html`);
-            return;
-        }
-
-        // Fetch HTML from plugin static files endpoint
-        const response = await fetch(`/api/v3/plugins/${pluginId}/static/${htmlFile}`);
-
-        if (!response.ok) {
-            throw new Error(`Failed to load custom HTML: ${response.statusText}`);
-        }
-
-        const html = await response.text();
-
-        // Inject HTML into container
-        container.innerHTML = html;
-
-        // Execute any script tags in the loaded HTML
-        const scripts = container.querySelectorAll('script');
-        scripts.forEach(oldScript => {
-            const newScript = document.createElement('script');
-            Array.from(oldScript.attributes).forEach(attr => {
-                newScript.setAttribute(attr.name, attr.value);
-            });
-            newScript.appendChild(document.createTextNode(oldScript.innerHTML));
-            oldScript.parentNode.replaceChild(newScript, oldScript);
-        });
-
-        console.log(`[Custom HTML Widget] Loaded ${htmlFile} for plugin ${pluginId}`);
-    } catch (error) {
-        console.error(`[Custom HTML Widget] Error loading ${htmlFile} for plugin ${pluginId}:`, error);
-        const container = document.getElementById(`${fieldId}_custom_html`);
-        if (container) {
-            container.innerHTML = `
-                <div class="text-sm text-red-600 p-4 border border-red-200 rounded">
-                    <i class="fas fa-exclamation-triangle mr-1"></i>
-                    Failed to load custom HTML: ${error.message}
-                </div>
-            `;
-        }
-    }
-}
-
-function generateFormFromSchema(schema, config, webUiActions = []) {
-    console.log('[DEBUG] ===== generateFormFromSchema called =====');
-    console.log('[DEBUG] Schema properties:', Object.keys(schema.properties || {}));
-    console.log('[DEBUG] Web UI Actions:', webUiActions.length);
-    let formHtml = '<form id="plugin-config-form" class="space-y-4" novalidate>';
-
-    if (schema.properties) {
-        // Get ordered properties if x-propertyOrder is defined
-        let propertyEntries = Object.entries(schema.properties);
-        if (schema['x-propertyOrder'] && Array.isArray(schema['x-propertyOrder'])) {
-            const order = schema['x-propertyOrder'];
-            const orderedEntries = [];
-            const unorderedEntries = [];
-
-            // Separate ordered and unordered properties
-            propertyEntries.forEach(([key, prop]) => {
-                const index = order.indexOf(key);
-                if (index !== -1) {
-                    orderedEntries[index] = [key, prop];
-                } else {
-                    unorderedEntries.push([key, prop]);
-                }
-            });
-
-            // Combine ordered entries (filter out undefined from sparse array) with unordered entries
-            propertyEntries = orderedEntries.filter(entry => entry !== undefined).concat(unorderedEntries);
-        }
-
-        propertyEntries.forEach(([key, prop]) => {
-            // Skip the 'enabled' property - it's managed separately via the header toggle
-            if (key === 'enabled') return;
-
-            let value = config[key] !== undefined ? config[key] : prop.default;
-
-            // Special handling: use uploaded_files from config if available (populated by backend from disk)
-            // No need to populate from categories here since backend does it
-
-            formHtml += generateFieldHtml(key, prop, value);
-        });
-    }
-
-    // Add web UI actions section if plugin defines any
-    console.log('[DEBUG] webUiActions:', webUiActions, 'length:', webUiActions ? webUiActions.length : 0);
-    if (webUiActions && webUiActions.length > 0) {
-        console.log('[DEBUG] Rendering', webUiActions.length, 'actions');
-        formHtml += `
-            <div class="border-t border-gray-200 pt-4 mt-4">
-                <h3 class="text-lg font-semibold text-gray-900 mb-3">Actions</h3>
-                <p class="text-sm text-gray-600 mb-4">${webUiActions[0].section_description || 'Perform actions for this plugin'}</p>
-
-                <div class="space-y-3">
-        `;
-
-        webUiActions.forEach((action, index) => {
-            const actionId = `action-${action.id}-${index}`;
-            const statusId = `action-status-${action.id}-${index}`;
-            const bgColor = action.color || 'blue';
-
-            // Map color names to explicit Tailwind classes to ensure they're included
-            const colorMap = {
-                'blue': { bg: 'bg-blue-50', border: 'border-blue-200', text: 'text-blue-900', textLight: 'text-blue-700', btn: 'bg-blue-600 hover:bg-blue-700' },
-                'green': { bg: 'bg-green-50', border: 'border-green-200', text: 'text-green-900', textLight: 'text-green-700', btn: 'bg-green-600 hover:bg-green-700' },
-                'red': { bg: 'bg-red-50', border: 'border-red-200', text: 'text-red-900', textLight: 'text-red-700', btn: 'bg-red-600 hover:bg-red-700' },
-                'yellow': { bg: 'bg-yellow-50', border: 'border-yellow-200', text: 'text-yellow-900', textLight: 'text-yellow-700', btn: 'bg-yellow-600 hover:bg-yellow-700' },
-                'purple': { bg: 'bg-purple-50', border: 'border-purple-200', text: 'text-purple-900', textLight: 'text-purple-700', btn: 'bg-purple-600 hover:bg-purple-700' }
-            };
-
-            const colors = colorMap[bgColor] || colorMap['blue'];
-
-            formHtml += `
-                    <div class="${colors.bg} border ${colors.border} rounded-lg p-4">
-                        <div class="flex items-center justify-between">
-                            <div class="flex-1">
-                                <h4 class="font-medium ${colors.text} mb-1">
-                                    ${action.icon ? `<i class="${action.icon} mr-2"></i>` : ''}${action.title || action.id}
-                                </h4>
-                                <p class="text-sm ${colors.textLight}">${action.description || ''}</p>
-                            </div>
-                            <button type="button"
-                                    id="${actionId}"
-                                    onclick="executePluginAction('${action.id}', ${index}, '${window.currentPluginConfig?.pluginId || ''}')"
-                                    data-plugin-id="${window.currentPluginConfig?.pluginId || ''}"
-                                    data-action-id="${action.id}"
-                                    class="btn ${colors.btn} text-white px-4 py-2 rounded-md whitespace-nowrap">
-                                ${action.icon ? `<i class="${action.icon} mr-2"></i>` : ''}${action.button_text || action.title || 'Execute'}
-                            </button>
-                        </div>
-                        <div id="${statusId}" class="mt-3 hidden"></div>
-                    </div>
-            `;
-        });
-
-        formHtml += `
-                </div>
-            </div>
-        `;
-    } else {
-        console.log('[DEBUG] No webUiActions to render');
-    }
-
-    formHtml += `
-        <div class="flex justify-end space-x-2 pt-4 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="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 Configuration
-            </button>
-        </div>
-    </form>
-    `;
-
-    return Promise.resolve(formHtml);
-}
 
 // Functions to handle patternProperties key-value pairs
 window.addKeyValuePair = function(fieldId, fullKey, maxProperties) {
@@ -4339,365 +2924,10 @@ window.toggleNestedSection = function(sectionId, event) {
     }
 }
 
-function generateSimpleConfigForm(config, webUiActions = []) {
-    console.log('[DEBUG] generateSimpleConfigForm - webUiActions:', webUiActions, 'length:', webUiActions ? webUiActions.length : 0);
-    let actionsHtml = '';
-    if (webUiActions && webUiActions.length > 0) {
-        console.log('[DEBUG] Rendering', webUiActions.length, 'actions in simple form');
-        actionsHtml = `
-            <div class="border-t border-gray-200 pt-4 mt-4">
-                <h3 class="text-lg font-semibold text-gray-900 mb-3">Actions</h3>
-                <div class="space-y-3">
-        `;
-
-        // Map color names to explicit Tailwind classes
-        const colorMap = {
-            'blue': { bg: 'bg-blue-50', border: 'border-blue-200', text: 'text-blue-900', textLight: 'text-blue-700', btn: 'bg-blue-600 hover:bg-blue-700' },
-            'green': { bg: 'bg-green-50', border: 'border-green-200', text: 'text-green-900', textLight: 'text-green-700', btn: 'bg-green-600 hover:bg-green-700' },
-            'red': { bg: 'bg-red-50', border: 'border-red-200', text: 'text-red-900', textLight: 'text-red-700', btn: 'bg-red-600 hover:bg-red-700' },
-            'yellow': { bg: 'bg-yellow-50', border: 'border-yellow-200', text: 'text-yellow-900', textLight: 'text-yellow-700', btn: 'bg-yellow-600 hover:bg-yellow-700' },
-            'purple': { bg: 'bg-purple-50', border: 'border-purple-200', text: 'text-purple-900', textLight: 'text-purple-700', btn: 'bg-purple-600 hover:bg-purple-700' }
-        };
-
-        webUiActions.forEach((action, index) => {
-            const actionId = `action-${action.id}-${index}`;
-            const statusId = `action-status-${action.id}-${index}`;
-            const bgColor = action.color || 'blue';
-            const colors = colorMap[bgColor] || colorMap['blue'];
-
-            actionsHtml += `
-                    <div class="${colors.bg} border ${colors.border} rounded-lg p-4">
-                        <div class="flex items-center justify-between">
-                            <div class="flex-1">
-                                <h4 class="font-medium ${colors.text} mb-1">
-                                    ${action.icon ? `<i class="${action.icon} mr-2"></i>` : ''}${action.title || action.id}
-                                </h4>
-                                <p class="text-sm ${colors.textLight}">${action.description || ''}</p>
-                            </div>
-                            <button type="button"
-                                    id="${actionId}"
-                                    onclick="executePluginAction('${action.id}', ${index}, '${window.currentPluginConfig?.pluginId || ''}')"
-                                    data-plugin-id="${window.currentPluginConfig?.pluginId || ''}"
-                                    data-action-id="${action.id}"
-                                    class="btn ${colors.btn} text-white px-4 py-2 rounded-md">
-                                ${action.icon ? `<i class="${action.icon} mr-2"></i>` : ''}${action.button_text || action.title || 'Execute'}
-                            </button>
-                        </div>
-                        <div id="${statusId}" class="mt-3 hidden"></div>
-                    </div>
-            `;
-        });
-        actionsHtml += `
-                </div>
-            </div>
-        `;
-    }
-
-    return `
-        <form id="plugin-config-form" class="space-y-4" novalidate>
-            <div class="form-group">
-                <label class="block text-sm font-medium text-gray-700 mb-1">Configuration</label>
-                <textarea name="config" class="form-control h-32" placeholder="Plugin configuration JSON">${JSON.stringify(config, null, 2)}</textarea>
-            </div>
-            ${actionsHtml}
-            <div class="flex justify-end space-x-2">
-                <button type="button" onclick="closePluginConfigModal()" class="btn bg-gray-600 hover:bg-gray-700 text-white px-4 py-2">
-                    Cancel
-                </button>
-                <button type="submit" class="btn bg-blue-600 hover:bg-blue-700 text-white px-4 py-2">
-                    Save Configuration
-                </button>
-            </div>
-        </form>
-    `;
-}
-
-// Plugin config modal state
-let currentPluginConfigState = {
-    pluginId: null,
-    config: {},
-    schema: null,
-    jsonEditor: null,
-    formData: {}
-};
-
-// Initialize JSON editor
-async function initJsonEditor() {
-    const textarea = document.getElementById('plugin-config-json-editor');
-    if (!textarea) return null;
-
-    // Lazy load CodeMirror if needed
-    if (typeof CodeMirror === 'undefined') {
-        if (typeof window.loadCodeMirror === 'function') {
-            try {
-                await window.loadCodeMirror();
-            } catch (error) {
-                console.error('Failed to load CodeMirror:', error);
-                showNotification('JSON editor not available. Please refresh the page.', 'error');
-                return null;
-            }
-        } else {
-            console.error('CodeMirror not loaded and loadCodeMirror not available. Please refresh the page.');
-            showNotification('JSON editor not available. Please refresh the page.', 'error');
-            return null;
-        }
-    }
-
-    if (currentPluginConfigState.jsonEditor) {
-        currentPluginConfigState.jsonEditor.toTextArea();
-        currentPluginConfigState.jsonEditor = null;
-    }
-
-    const editor = CodeMirror.fromTextArea(textarea, {
-        mode: 'application/json',
-        theme: 'monokai',
-        lineNumbers: true,
-        lineWrapping: true,
-        indentUnit: 2,
-        tabSize: 2,
-        autoCloseBrackets: true,
-        matchBrackets: true,
-        foldGutter: true,
-        gutters: ['CodeMirror-linenumbers', 'CodeMirror-foldgutter']
-    });
-
-    // Validate JSON on change
-    editor.on('change', function() {
-        const value = editor.getValue();
-        try {
-            JSON.parse(value);
-            editor.setOption('class', '');
-        } catch (e) {
-            editor.setOption('class', 'cm-error');
-        }
-    });
-
-    return editor;
-}
-
-// Switch between form and JSON views
-function switchPluginConfigView(view) {
-    const formView = document.getElementById('plugin-config-form-view');
-    const jsonView = document.getElementById('plugin-config-json-view');
-    const formBtn = document.getElementById('view-toggle-form');
-    const jsonBtn = document.getElementById('view-toggle-json');
-
-    if (view === 'json') {
-        formView.classList.add('hidden');
-        jsonView.classList.remove('hidden');
-        formBtn.classList.remove('active', 'bg-blue-600', 'text-white');
-        formBtn.classList.add('text-gray-700', 'hover:bg-gray-200');
-        jsonBtn.classList.add('active', 'bg-blue-600', 'text-white');
-        jsonBtn.classList.remove('text-gray-700', 'hover:bg-gray-200');
-
-        // Sync form data to JSON editor
-        syncFormToJson();
-
-        // Initialize editor if not already done
-        if (!currentPluginConfigState.jsonEditor) {
-            // Small delay to ensure textarea is visible, then load CodeMirror and initialize
-            setTimeout(async () => {
-                currentPluginConfigState.jsonEditor = await initJsonEditor();
-                if (currentPluginConfigState.jsonEditor) {
-                    const jsonText = JSON.stringify(currentPluginConfigState.config, null, 2);
-                    currentPluginConfigState.jsonEditor.setValue(jsonText);
-                    currentPluginConfigState.jsonEditor.refresh();
-                }
-            }, 50);
-        } else {
-            // Update editor content if already initialized
-            const jsonText = JSON.stringify(currentPluginConfigState.config, null, 2);
-            currentPluginConfigState.jsonEditor.setValue(jsonText);
-            currentPluginConfigState.jsonEditor.refresh();
-        }
-    } else {
-        jsonView.classList.add('hidden');
-        formView.classList.remove('hidden');
-        jsonBtn.classList.remove('active', 'bg-blue-600', 'text-white');
-        jsonBtn.classList.add('text-gray-700', 'hover:bg-gray-200');
-        formBtn.classList.add('active', 'bg-blue-600', 'text-white');
-        formBtn.classList.remove('text-gray-700', 'hover:bg-gray-200');
-
-        // Sync JSON to form if JSON was edited
-        syncJsonToForm();
-    }
-}
-
-// Sync form data to JSON config
-function syncFormToJson() {
-    const form = document.getElementById('plugin-config-form');
-    if (!form) return;
-
-    const schema = currentPluginConfigState.schema;
-    const config = normalizeFormDataForConfig(form, schema);
-
-    // Deep merge with existing config to preserve nested structures
-    function deepMerge(target, source) {
-        for (const key in source) {
-            if (key === '__proto__' || key === 'constructor' || key === 'prototype') continue;
-            if (!Object.prototype.hasOwnProperty.call(source, key)) continue;
-            if (source[key] && typeof source[key] === 'object' && !Array.isArray(source[key])) {
-                if (!target[key] || typeof target[key] !== 'object' || Array.isArray(target[key])) {
-                    target[key] = {};
-                }
-                deepMerge(target[key], source[key]);
-            } else {
-                target[key] = source[key];
-            }
-        }
-        return target;
-    }
-
-    // Deep merge new form data into existing config
-    currentPluginConfigState.config = deepMerge(
-        JSON.parse(JSON.stringify(currentPluginConfigState.config)), // Deep clone
-        config
-    );
-}
-
-// Sync JSON editor content to form
-function syncJsonToForm() {
-    if (!currentPluginConfigState.jsonEditor) return;
-
-    try {
-        const jsonText = currentPluginConfigState.jsonEditor.getValue();
-        const config = JSON.parse(jsonText);
-        currentPluginConfigState.config = config;
-
-        // Update form fields (this is complex, so we'll reload the form)
-        // For now, just update the config state - form will be regenerated on next open
-        console.log('JSON synced to config state');
-    } catch (e) {
-        console.error('Invalid JSON in editor:', e);
-        showNotification('Invalid JSON in editor. Please fix errors before switching views.', 'error');
-    }
-}
-
-// Reset plugin config to defaults
-async function resetPluginConfigToDefaults() {
-    if (!currentPluginConfigState.pluginId) {
-        showNotification('No plugin selected', 'error');
-        return;
-    }
-
-    if (!confirm('Are you sure you want to reset this plugin configuration to defaults? This will replace all current settings.')) {
-        return;
-    }
-
-    try {
-        const response = await fetch('/api/v3/plugins/config/reset', {
-            method: 'POST',
-            headers: { 'Content-Type': 'application/json' },
-            body: JSON.stringify({
-                plugin_id: currentPluginConfigState.pluginId,
-                preserve_secrets: true
-            })
-        });
-
-        const data = await response.json();
-
-        if (data.status === 'success') {
-            showNotification(data.message, 'success');
-
-            // Reload the config form with defaults
-            const newConfig = data.data?.config || {};
-            currentPluginConfigState.config = newConfig;
-
-            // Regenerate form
-            const content = document.getElementById('plugin-config-content');
-            if (content) {
-                content.innerHTML = '<div class="flex items-center justify-center py-8"><i class="fas fa-spinner fa-spin text-2xl text-blue-600"></i></div>';
-                generatePluginConfigForm(currentPluginConfigState.pluginId, newConfig)
-                    .then(formHtml => {
-                        content.innerHTML = formHtml;
-                        const form = document.getElementById('plugin-config-form');
-                        if (form) {
-                            form.addEventListener('submit', handlePluginConfigSubmit);
-                        }
-                    });
-            }
-
-            // Update JSON editor if it's visible
-            if (currentPluginConfigState.jsonEditor) {
-                const jsonText = JSON.stringify(newConfig, null, 2);
-                currentPluginConfigState.jsonEditor.setValue(jsonText);
-            }
-        } else {
-            showNotification(data.message || 'Failed to reset configuration', 'error');
-        }
-    } catch (error) {
-        console.error('Error resetting config:', error);
-        showNotification('Error resetting configuration: ' + error.message, 'error');
-    }
-}
-
-// Display validation errors
-function displayValidationErrors(errors) {
-    const errorContainer = document.getElementById('plugin-config-validation-errors');
-    const errorList = document.getElementById('validation-errors-list');
-
-    if (!errorContainer || !errorList) return;
-
-    if (errors && errors.length > 0) {
-        errorContainer.classList.remove('hidden');
-        errorList.innerHTML = errors.map(error => `<li>${escapeHtml(error)}</li>`).join('');
-    } else {
-        errorContainer.classList.add('hidden');
-        errorList.innerHTML = '';
-    }
-}
-
-// Save configuration from JSON editor
-async function saveConfigFromJsonEditor() {
-    if (!currentPluginConfigState.jsonEditor || !currentPluginConfigState.pluginId) {
-        return;
-    }
-
-    try {
-        const jsonText = currentPluginConfigState.jsonEditor.getValue();
-        const config = JSON.parse(jsonText);
-
-        // Update state
-        currentPluginConfigState.config = config;
-
-        // Save the configuration (will handle validation errors)
-        savePluginConfiguration(currentPluginConfigState.pluginId, config);
-    } catch (e) {
-        console.error('Error saving JSON config:', e);
-        if (e instanceof SyntaxError) {
-            showNotification('Invalid JSON. Please fix syntax errors before saving.', 'error');
-            displayValidationErrors([`JSON Syntax Error: ${e.message}`]);
-        } else {
-            showNotification('Error saving configuration: ' + e.message, 'error');
-        }
-    }
-}
-
-window.closePluginConfigModal = function() {
-        const modal = document.getElementById('plugin-config-modal');
-    modal.style.display = 'none';
-
-    // Clean up JSON editor
-    if (currentPluginConfigState.jsonEditor) {
-        currentPluginConfigState.jsonEditor.toTextArea();
-        currentPluginConfigState.jsonEditor = null;
-    }
-
-    // Reset state
-    currentPluginConfig = null;
-    currentPluginConfigState.pluginId = null;
-    currentPluginConfigState.config = {};
-    currentPluginConfigState.schema = null;
-
-    // Hide validation errors
-    displayValidationErrors([]);
-
-    console.log('Modal closed');
-}
 
 // Generic Plugin Action Handler
 window.executePluginAction = function(actionId, actionIndex, pluginIdParam = null) {
-    console.log('[DEBUG] executePluginAction called - actionId:', actionId, 'actionIndex:', actionIndex, 'pluginIdParam:', pluginIdParam);
+    debugLog('[DEBUG] executePluginAction called - actionId:', actionId, 'actionIndex:', actionIndex, 'pluginIdParam:', pluginIdParam);
 
     // Construct button ID first (we have actionId and actionIndex)
     const actionIdFull = `action-${actionId}-${actionIndex}`;
@@ -4712,7 +2942,7 @@ window.executePluginAction = function(actionId, actionIndex, pluginIdParam = nul
     if (!pluginId && btn) {
         pluginId = btn.getAttribute('data-plugin-id');
         if (pluginId) {
-            console.log('[DEBUG] Got pluginId from button data attribute:', pluginId);
+            debugLog('[DEBUG] Got pluginId from button data attribute:', pluginId);
         }
     }
 
@@ -4722,7 +2952,7 @@ window.executePluginAction = function(actionId, actionIndex, pluginIdParam = nul
         if (parentWithPluginId) {
             pluginId = parentWithPluginId.getAttribute('data-plugin-id');
             if (pluginId) {
-                console.log('[DEBUG] Got pluginId from parent element:', pluginId);
+                debugLog('[DEBUG] Got pluginId from parent element:', pluginId);
             }
         }
     }
@@ -4741,7 +2971,7 @@ window.executePluginAction = function(actionId, actionIndex, pluginIdParam = nul
                 }
             }
             if (pluginId) {
-                console.log('[DEBUG] Got pluginId from container:', pluginId);
+                debugLog('[DEBUG] Got pluginId from container:', pluginId);
             }
         }
     }
@@ -4750,7 +2980,7 @@ window.executePluginAction = function(actionId, actionIndex, pluginIdParam = nul
     if (!pluginId) {
         pluginId = currentPluginConfig?.pluginId;
         if (pluginId) {
-            console.log('[DEBUG] Got pluginId from currentPluginConfig:', pluginId);
+            debugLog('[DEBUG] Got pluginId from currentPluginConfig:', pluginId);
         }
     }
 
@@ -4762,7 +2992,7 @@ window.executePluginAction = function(actionId, actionIndex, pluginIdParam = nul
                 const appData = appElement._x_dataStack[0];
                 if (appData.activeTab && appData.activeTab !== 'overview' && appData.activeTab !== 'plugins' && appData.activeTab !== 'wifi') {
                     pluginId = appData.activeTab;
-                    console.log('[DEBUG] Got pluginId from Alpine activeTab:', pluginId);
+                    debugLog('[DEBUG] Got pluginId from Alpine activeTab:', pluginId);
                 }
             }
         } catch (e) {
@@ -4783,7 +3013,7 @@ window.executePluginAction = function(actionId, actionIndex, pluginIdParam = nul
                         if (pluginData && pluginData.plugin) {
                             pluginId = pluginData.plugin.id;
                             if (pluginId) {
-                                console.log('[DEBUG] Got pluginId from Alpine plugin data (scoped to button context):', pluginId);
+                                debugLog('[DEBUG] Got pluginId from Alpine plugin data (scoped to button context):', pluginId);
                             }
                         }
                     } catch (e) {
@@ -4802,7 +3032,7 @@ window.executePluginAction = function(actionId, actionIndex, pluginIdParam = nul
                             if (containerData && containerData.plugin) {
                                 pluginId = containerData.plugin.id;
                                 if (pluginId) {
-                                    console.log('[DEBUG] Got pluginId from Alpine plugin data (scoped to container):', pluginId);
+                                    debugLog('[DEBUG] Got pluginId from Alpine plugin data (scoped to container):', pluginId);
                                 }
                             }
                         } catch (e) {
@@ -4827,7 +3057,7 @@ window.executePluginAction = function(actionId, actionIndex, pluginIdParam = nul
         return;
     }
 
-    console.log('[DEBUG] executePluginAction - Final pluginId:', pluginId, 'actionId:', actionId, 'actionIndex:', actionIndex);
+    debugLog('[DEBUG] executePluginAction - Final pluginId:', pluginId, 'actionId:', actionId, 'actionIndex:', actionIndex);
 
     if (!btn || !statusDiv) {
         console.error(`Action elements not found: ${actionIdFull}`);
@@ -4849,15 +3079,15 @@ window.executePluginAction = function(actionId, actionIndex, pluginIdParam = nul
 
     if (!action) {
         console.error(`Action not found: ${actionId} for plugin ${pluginId}`);
-        console.log('[DEBUG] currentPluginConfig:', currentPluginConfig);
-        console.log('[DEBUG] installedPlugins:', window.installedPlugins);
+        debugLog('[DEBUG] currentPluginConfig:', currentPluginConfig);
+        debugLog('[DEBUG] installedPlugins:', window.installedPlugins);
         if (typeof showNotification === 'function') {
             showNotification(`Action ${actionId} not found. Please refresh the page.`, 'error');
         }
         return;
     }
 
-    console.log('[DEBUG] Found action:', action);
+    debugLog('[DEBUG] Found action:', action);
 
     // Check if we're in step 2 (completing OAuth flow)
     if (btn.dataset.step === '2') {
@@ -5011,7 +3241,7 @@ if (!window.updatePlugin || window.updatePlugin.toString().includes('[UPDATE]'))
         const requestBody = { plugin_id: pluginId };
         const requestBodyJson = JSON.stringify(requestBody);
 
-        console.log('[UPDATE] Sending request:', { url: '/api/v3/plugins/update', body: requestBodyJson });
+        debugLog('[UPDATE] Sending request:', { url: '/api/v3/plugins/update', body: requestBodyJson });
 
         return fetch('/api/v3/plugins/update', {
             method: 'POST',
@@ -5082,7 +3312,7 @@ window.uninstallPlugin = function(pluginId) {
     })
     .then(response => response.json())
     .then(data => {
-        console.log('Uninstall response:', data);
+        debugLog('Uninstall response:', data);
 
         // Check if operation was queued
         if (data.status === 'success' && data.data && data.data.operation_id) {
@@ -5104,16 +3334,28 @@ window.uninstallPlugin = function(pluginId) {
     });
 }
 
-function pollOperationStatus(operationId, pluginId, pluginName, maxAttempts = 60, attempt = 0) {
+function pollOperationStatus(operationId, pluginId, pluginName, options = {}) {
+    const maxAttempts = options.maxAttempts || 60;
+    const attempt = options.attempt || 0;
+    const onComplete = options.onComplete || (() => handleUninstallSuccess(pluginId));
+    const onFailed = options.onFailed || ((errorMsg) => {
+        showNotification(errorMsg || `Operation failed for ${pluginName}`, 'error');
+        setTimeout(() => loadInstalledPlugins(), 1000);
+    });
+    const onTimeout = options.onTimeout || (() => {
+        showNotification(`Operation timed out for ${pluginName}`, 'error');
+        setTimeout(() => loadInstalledPlugins(), 1000);
+    });
+
     if (attempt >= maxAttempts) {
-        showNotification(`Uninstall operation timed out for ${pluginName}`, 'error');
-        // Refresh plugin list to see actual state
-        setTimeout(() => {
-            loadInstalledPlugins();
-        }, 1000);
+        onTimeout();
         return;
     }
 
+    const pollAgain = () => setTimeout(() => {
+        pollOperationStatus(operationId, pluginId, pluginName, { ...options, attempt: attempt + 1 });
+    }, 1000);
+
     fetch(`/api/v3/plugins/operation/${operationId}`)
         .then(response => response.json())
         .then(data => {
@@ -5122,32 +3364,16 @@ function pollOperationStatus(operationId, pluginId, pluginName, maxAttempts = 60
                 const status = operation.status;
 
                 if (status === 'completed') {
-                    // Operation completed successfully
-                    handleUninstallSuccess(pluginId);
+                    onComplete();
                 } else if (status === 'failed') {
-                    // Operation failed
-                    const errorMsg = operation.error || operation.message || `Failed to uninstall ${pluginName}`;
-                    showNotification(errorMsg, 'error');
-                    // Refresh plugin list to see actual state
-                    setTimeout(() => {
-                        loadInstalledPlugins();
-                    }, 1000);
-                } else if (status === 'pending' || status === 'in_progress') {
-                    // Still in progress, poll again
-                    setTimeout(() => {
-                        pollOperationStatus(operationId, pluginId, pluginName, maxAttempts, attempt + 1);
-                    }, 1000); // Poll every second
+                    onFailed(operation.error || operation.message);
                 } else {
-                    // Unknown status, poll again
-                    setTimeout(() => {
-                        pollOperationStatus(operationId, pluginId, pluginName, maxAttempts, attempt + 1);
-                    }, 1000);
+                    // 'pending', 'in_progress', or unknown - poll again
+                    pollAgain();
                 }
             } else {
                 // Error getting operation status, try again
-                setTimeout(() => {
-                    pollOperationStatus(operationId, pluginId, pluginName, maxAttempts, attempt + 1);
-                }, 1000);
+                pollAgain();
             }
         })
         .catch(error => {
@@ -5178,7 +3404,7 @@ function handleUninstallSuccess(pluginId) {
 }
 
 function refreshPlugins() {
-    console.log('[refreshPlugins] Button clicked, refreshing plugins...');
+    debugLog('[refreshPlugins] Button clicked, refreshing plugins...');
     // Clear cache to force fresh data
     pluginStoreCache = null;
     cacheTimestamp = null;
@@ -5193,7 +3419,7 @@ function refreshPlugins() {
 }
 
 function restartDisplay() {
-    console.log('[restartDisplay] Button clicked, restarting display service...');
+    debugLog('[restartDisplay] Button clicked, restarting display service...');
     showNotification('Restarting display service...', 'info');
 
     fetch('/api/v3/system/action', {
@@ -5218,7 +3444,7 @@ function searchPluginStore(fetchCommitInfo = true) {
 
     // If cache is valid and we don't need fresh commit info, just re-filter
     if (isCacheValid && !fetchCommitInfo) {
-        console.log('Using cached plugin store data');
+        debugLog('Using cached plugin store data');
         const storeGrid = document.getElementById('plugin-store-grid');
         if (storeGrid) {
             applyStoreFiltersAndSort();
@@ -5238,7 +3464,7 @@ function searchPluginStore(fetchCommitInfo = true) {
         url += '?fetch_commit_info=false';
     }
 
-    console.log('Store URL:', url);
+    debugLog('Store URL:', url);
 
     fetch(url)
         .then(response => response.json())
@@ -5247,7 +3473,7 @@ function searchPluginStore(fetchCommitInfo = true) {
 
             if (data.status === 'success') {
                 const plugins = data.data.plugins || [];
-                console.log('Store plugins count:', plugins.length);
+                debugLog('Store plugins count:', plugins.length);
 
                 pluginStoreCache = plugins;
                 cacheTimestamp = Date.now();
@@ -5653,6 +3879,33 @@ window.installPlugin = function(pluginId, branch = null) {
         requestBody.branch = branch;
     }
 
+    function enableAfterInstall() {
+        // Enable immediately so install -> enable is one step; only nudge
+        // for a restart once enablement actually succeeded (persistent
+        // toast; duration 0 = stays until dismissed).
+        Promise.resolve(window.togglePlugin(pluginId, true)).then(toggleResult => {
+            if (toggleResult && toggleResult.status === 'success') {
+                showNotification(
+                    `${pluginId} installed and enabled — restart the display to show it`,
+                    {
+                        type: 'success',
+                        duration: 0,
+                        actionLabel: 'Restart Now',
+                        onAction: () => restartDisplay()
+                    }
+                );
+            } else {
+                showNotification(
+                    `${pluginId} installed, but enabling it failed — use its toggle in the plugin list`,
+                    'warning'
+                );
+            }
+        });
+        // Refresh installed plugins list, then re-render store to update badges
+        loadInstalledPlugins();
+        setTimeout(() => applyStoreFiltersAndSort(true), 500);
+    }
+
     fetch('/api/v3/plugins/install', {
         method: 'POST',
         headers: { 'Content-Type': 'application/json' },
@@ -5661,10 +3914,23 @@ window.installPlugin = function(pluginId, branch = null) {
     .then(response => response.json())
     .then(data => {
         showNotification(data.message, data.status);
-        if (data.status === 'success') {
-            // Refresh installed plugins list, then re-render store to update badges
-            loadInstalledPlugins();
-            setTimeout(() => applyStoreFiltersAndSort(true), 500);
+        if (data.status !== 'success') return;
+
+        if (data.data && data.data.operation_id) {
+            // Install runs async via the operation queue - this response only
+            // means "queued", not "installed". Enabling immediately here would
+            // 404 with "Plugin not found" against the toggle endpoint, since
+            // the plugin manager hasn't discovered the new plugin yet (seen
+            // live: "installation queued" followed immediately by a failed
+            // enable). Wait for the operation to actually finish first.
+            pollOperationStatus(data.data.operation_id, pluginId, pluginId, {
+                onComplete: enableAfterInstall,
+                onFailed: (errorMsg) => showNotification(errorMsg || `Failed to install ${pluginId}`, 'error'),
+                onTimeout: () => showNotification(`Install operation timed out for ${pluginId}`, 'error')
+            });
+        } else {
+            // No operation queue configured - install already completed synchronously.
+            enableAfterInstall();
         }
     })
     .catch(error => {
@@ -5715,7 +3981,7 @@ window.installFromCustomRegistry = function(pluginId, registryUrl, pluginPath, b
 }
 
 function setupCollapsibleSections() {
-    console.log('[setupCollapsibleSections] Setting up collapsible sections...');
+    debugLog('[setupCollapsibleSections] Setting up collapsible sections...');
 
     // Installed Plugins and Plugin Store sections no longer have collapse buttons
     // They are always visible
@@ -5725,7 +3991,7 @@ function setupCollapsibleSections() {
         window.attachGithubTokenCollapseHandler();
     }
 
-    console.log('[setupCollapsibleSections] Collapsible sections setup complete');
+    debugLog('[setupCollapsibleSections] Collapsible sections setup complete');
 }
 
 function loadSavedRepositories() {
@@ -5771,9 +4037,9 @@ function renderSavedRepositories(repositories) {
                 <div class="flex-1 min-w-0">
                     <div class="flex items-center gap-2">
                         <i class="fas ${repoType === 'registry' ? 'fa-folder-open' : 'fa-code-branch'} text-gray-400 text-xs"></i>
-                        <span class="text-sm font-medium text-gray-900 truncate" title="${repoUrl}">${escapeHtml(repoName)}</span>
+                        <span class="text-sm font-medium text-gray-900 truncate" title="${escapeAttribute(repoUrl)}">${escapeHtml(repoName)}</span>
                     </div>
-                    <p class="text-xs text-gray-500 truncate" title="${repoUrl}">${escapeHtml(repoUrl)}</p>
+                    <p class="text-xs text-gray-500 truncate" title="${escapeAttribute(repoUrl)}">${escapeHtml(repoUrl)}</p>
                 </div>
                 <button onclick='if(window.removeSavedRepository){window.removeSavedRepository(${escapeJs(repoUrl)})}else{console.error("removeSavedRepository not available")}' class="ml-2 text-red-600 hover:text-red-800 text-xs px-2 py-1" title="Remove repository">
                     <i class="fas fa-trash"></i>
@@ -5813,12 +4079,12 @@ window.removeSavedRepository = function(repoUrl) {
 
 // Separate function to attach install button handler (can be called multiple times)
 function attachInstallButtonHandler() {
-    console.log('[attachInstallButtonHandler] ===== FUNCTION CALLED =====');
+    debugLog('[attachInstallButtonHandler] ===== FUNCTION CALLED =====');
     const installBtn = document.getElementById('install-plugin-from-url');
     const pluginUrlInput = document.getElementById('github-plugin-url');
     const pluginStatusDiv = document.getElementById('github-plugin-status');
 
-    console.log('[attachInstallButtonHandler] Looking for install button elements:', {
+    debugLog('[attachInstallButtonHandler] Looking for install button elements:', {
         installBtn: !!installBtn,
         pluginUrlInput: !!pluginUrlInput,
         pluginStatusDiv: !!pluginStatusDiv
@@ -5827,7 +4093,7 @@ function attachInstallButtonHandler() {
     if (installBtn && pluginUrlInput) {
         // Check if handler already attached (prevent duplicates)
         if (installBtn.hasAttribute('data-handler-attached')) {
-            console.log('[attachInstallButtonHandler] Handler already attached, skipping');
+            debugLog('[attachInstallButtonHandler] Handler already attached, skipping');
             return;
         }
 
@@ -5841,12 +4107,12 @@ function attachInstallButtonHandler() {
             newBtn.setAttribute('data-handler-attached', 'true');
             parent.replaceChild(newBtn, installBtn);
 
-            console.log('[attachInstallButtonHandler] Install button cloned and replaced, type:', newBtn.type);
+            debugLog('[attachInstallButtonHandler] Install button cloned and replaced, type:', newBtn.type);
 
             newBtn.addEventListener('click', function(e) {
                 e.preventDefault();
                 e.stopPropagation();
-                console.log('[attachInstallButtonHandler] Install button clicked!');
+                debugLog('[attachInstallButtonHandler] Install button clicked!');
 
                 const repoUrl = pluginUrlInput.value.trim();
                 if (!repoUrl) {
@@ -5856,7 +4122,7 @@ function attachInstallButtonHandler() {
                     return;
                 }
 
-                if (!repoUrl.includes('github.com')) {
+                if (!isGithubUrl(repoUrl)) {
                     if (pluginStatusDiv) {
                         pluginStatusDiv.innerHTML = '<span class="text-red-600"><i class="fas fa-exclamation-circle mr-1"></i>Please enter a valid GitHub URL</span>';
                     }
@@ -5875,7 +4141,7 @@ function attachInstallButtonHandler() {
                     requestBody.branch = branch;
                 }
 
-                console.log('[attachInstallButtonHandler] Sending install request:', requestBody);
+                debugLog('[attachInstallButtonHandler] Sending install request:', requestBody);
 
                 fetch('/api/v3/plugins/install-from-url', {
                     method: 'POST',
@@ -5885,11 +4151,11 @@ function attachInstallButtonHandler() {
                     body: JSON.stringify(requestBody)
                 })
                 .then(response => {
-                    console.log('[attachInstallButtonHandler] Response status:', response.status);
+                    debugLog('[attachInstallButtonHandler] Response status:', response.status);
                     return response.json();
                 })
                 .then(data => {
-                    console.log('[attachInstallButtonHandler] Response data:', data);
+                    debugLog('[attachInstallButtonHandler] Response data:', data);
                     if (data.status === 'success') {
                         if (pluginStatusDiv) {
                             pluginStatusDiv.innerHTML = `<span class="text-green-600"><i class="fas fa-check-circle mr-1"></i>Successfully installed: ${data.plugin_id}</span>`;
@@ -5922,12 +4188,12 @@ function attachInstallButtonHandler() {
             pluginUrlInput.addEventListener('keypress', function(e) {
                 if (e.key === 'Enter') {
                     e.preventDefault();
-                    console.log('[attachInstallButtonHandler] Enter key pressed, triggering install');
+                    debugLog('[attachInstallButtonHandler] Enter key pressed, triggering install');
                     newBtn.click();
                 }
             });
 
-            console.log('[attachInstallButtonHandler] Install button handler attached successfully');
+            debugLog('[attachInstallButtonHandler] Install button handler attached successfully');
         } else {
             console.error('[attachInstallButtonHandler] Install button parent not found!');
         }
@@ -5940,14 +4206,14 @@ function attachInstallButtonHandler() {
 }
 
 function setupGitHubInstallHandlers() {
-    console.log('[setupGitHubInstallHandlers] ===== FUNCTION CALLED ===== Setting up GitHub install handlers...');
+    debugLog('[setupGitHubInstallHandlers] ===== FUNCTION CALLED ===== Setting up GitHub install handlers...');
 
     // Toggle GitHub install section visibility
     const toggleBtn = document.getElementById('toggle-github-install');
     const installSection = document.getElementById('github-install-section');
     const icon = document.getElementById('github-install-icon');
 
-    console.log('[setupGitHubInstallHandlers] Elements found:', {
+    debugLog('[setupGitHubInstallHandlers] Elements found:', {
         button: !!toggleBtn,
         section: !!installSection,
         icon: !!icon
@@ -5963,7 +4229,7 @@ function setupGitHubInstallHandlers() {
             newBtn.addEventListener('click', function(e) {
                 e.stopPropagation();
                 e.preventDefault();
-                console.log('[setupGitHubInstallHandlers] GitHub install toggle clicked');
+                debugLog('[setupGitHubInstallHandlers] GitHub install toggle clicked');
 
                 const section = document.getElementById('github-install-section');
                 const iconEl = document.getElementById('github-install-icon');
@@ -5986,9 +4252,9 @@ function setupGitHubInstallHandlers() {
                     if (span) span.textContent = 'Hide';
 
                     // Re-attach install button handler when section is shown (in case elements weren't ready before)
-                    console.log('[setupGitHubInstallHandlers] Section shown, will re-attach install button handler in 100ms');
+                    debugLog('[setupGitHubInstallHandlers] Section shown, will re-attach install button handler in 100ms');
                     setTimeout(() => {
-                        console.log('[setupGitHubInstallHandlers] Re-attaching install button handler now');
+                        debugLog('[setupGitHubInstallHandlers] Re-attaching install button handler now');
                         attachInstallButtonHandler();
                     }, 100);
                 } else {
@@ -6003,16 +4269,16 @@ function setupGitHubInstallHandlers() {
                     if (span) span.textContent = 'Show';
                 }
             });
-            console.log('[setupGitHubInstallHandlers] Handler attached');
+            debugLog('[setupGitHubInstallHandlers] Handler attached');
         }
     } else {
         console.warn('[setupGitHubInstallHandlers] Required elements not found');
     }
 
     // Install single plugin from URL - use separate function so we can re-call it
-    console.log('[setupGitHubInstallHandlers] About to call attachInstallButtonHandler...');
+    debugLog('[setupGitHubInstallHandlers] About to call attachInstallButtonHandler...');
     attachInstallButtonHandler();
-    console.log('[setupGitHubInstallHandlers] Called attachInstallButtonHandler');
+    debugLog('[setupGitHubInstallHandlers] Called attachInstallButtonHandler');
 
     // Load registry from URL
     const loadRegistryBtn = document.getElementById('load-registry-from-url');
@@ -6029,7 +4295,7 @@ function setupGitHubInstallHandlers() {
                 return;
             }
 
-            if (!repoUrl.includes('github.com')) {
+            if (!isGithubUrl(repoUrl)) {
                 registryStatusDiv.innerHTML = '<span class="text-red-600"><i class="fas fa-exclamation-circle mr-1"></i>Please enter a valid GitHub URL</span>';
                 return;
             }
@@ -6085,7 +4351,7 @@ function setupGitHubInstallHandlers() {
                 return;
             }
 
-            if (!repoUrl.includes('github.com')) {
+            if (!isGithubUrl(repoUrl)) {
                 showError('Please enter a valid GitHub URL');
                 return;
             }
@@ -6197,7 +4463,7 @@ function showSuccess(message) {
     if (typeof showNotification === 'function') {
         showNotification(message, 'success');
     } else {
-        console.log('Success: ' + message);
+        debugLog('Success: ' + message);
         // Show a temporary success message
         const statusDiv = document.getElementById('github-plugin-status') || document.getElementById('registry-status');
         if (statusDiv) {
@@ -6228,59 +4494,18 @@ function showError(message) {
     `;
 }
 
-// Plugin configuration form submission is handled by handlePluginConfigSubmit
-// which is attached directly to the form. The document-level listener has been removed
-// to avoid duplicate submissions and to ensure proper handling of _data fields.
 
-function savePluginConfiguration(pluginId, config) {
-    // Update the plugin configuration in the backend
-    fetch('/api/v3/plugins/config', {
-            method: 'POST',
-            headers: { 'Content-Type': 'application/json' },
-            body: JSON.stringify({ plugin_id: pluginId, config })
-    })
-    .then(response => {
-        if (!response.ok) {
-            // Try to parse error response
-            return response.json().then(data => {
-                // Return error data with status
-                return { error: true, status: response.status, ...data };
-            }).catch(() => {
-                // If JSON parsing fails, return generic error
-                return {
-                    error: true,
-                    status: response.status,
-                    message: `Server error: ${response.status} ${response.statusText}`
-                };
-            });
-        }
-        return response.json();
-    })
-    .then(data => {
-        if (data.error || data.status !== 'success') {
-            // Display validation errors if present
-            if (data.validation_errors && Array.isArray(data.validation_errors)) {
-                displayValidationErrors(data.validation_errors);
-            }
-            let errorMessage = data.message || 'Error saving configuration';
-            if (data.validation_errors && Array.isArray(data.validation_errors) && data.validation_errors.length > 0) {
-                errorMessage += '\n\nValidation errors:\n' + data.validation_errors.join('\n');
-            }
-            showNotification(errorMessage, 'error');
-            console.error('Config save failed:', data);
-        } else {
-            // Hide validation errors on success
-            displayValidationErrors([]);
-            showNotification(data.message || 'Configuration saved successfully', data.status);
-            closePluginConfigModal();
-            // Refresh the installed plugins to update the UI
-            loadInstalledPlugins();
-        }
-    })
-    .catch(error => {
-        console.error('Error saving plugin config:', error);
-        showNotification('Error saving plugin configuration: ' + error.message, 'error');
-    });
+// Validate that a URL's actual host is github.com (not just a substring
+// match, which 'evil.com/github.com' or 'github.com.evil.com' would pass).
+// This is only a UX nicety pointing users at a valid URL - the server does
+// its own proper hostname validation before actually acting on the URL.
+function isGithubUrl(url) {
+    try {
+        const hostname = new URL(url).hostname.toLowerCase();
+        return hostname === 'github.com' || hostname === 'www.github.com';
+    } catch {
+        return false;
+    }
 }
 
 // Utility function to escape HTML
@@ -6636,70 +4861,6 @@ window.dismissGithubWarning = function() {
     }
 }
 
-window.showGithubTokenInstructions = function() {
-    const instructions = `
-        <div class="space-y-4">
-            <h4 class="font-semibold text-lg">How to Add a GitHub Token</h4>
-
-            <div class="space-y-3">
-                <div class="bg-gray-50 p-3 rounded">
-                    <h5 class="font-medium mb-2">Step 1: Create a GitHub Token</h5>
-                    <ol class="list-decimal list-inside space-y-1 text-sm">
-                        <li>Click the "Create a GitHub Token" link above (or <a href="https://github.com/settings/tokens/new?description=LEDMatrix%20Plugin%20Manager&scopes=" target="_blank" class="text-blue-600 underline">click here</a>)</li>
-                        <li>Give it a name like "LEDMatrix Plugin Manager"</li>
-                        <li>No special scopes/permissions are needed for public repositories</li>
-                        <li>Click "Generate token" at the bottom</li>
-                        <li>Copy the generated token (it starts with "ghp_")</li>
-                    </ol>
-                </div>
-
-                <div class="bg-gray-50 p-3 rounded">
-                    <h5 class="font-medium mb-2">Step 2: Add Token to LEDMatrix</h5>
-                    <ol class="list-decimal list-inside space-y-1 text-sm">
-                        <li>SSH into your Raspberry Pi</li>
-                        <li>Edit the secrets file: <code class="bg-gray-200 px-1 rounded">nano ~/LEDMatrix/config/config_secrets.json</code></li>
-                        <li>Find the "github" section and add your token:
-                            <pre class="bg-gray-800 text-white p-2 rounded mt-2 text-xs overflow-x-auto">"github": {
-  "api_token": "ghp_your_token_here"
-}</pre>
-                        </li>
-                        <li>Save the file (Ctrl+O, Enter, Ctrl+X)</li>
-                        <li>Restart the web service: <code class="bg-gray-200 px-1 rounded">sudo systemctl restart ledmatrix-web</code></li>
-                    </ol>
-                </div>
-
-                <div class="bg-blue-50 p-3 rounded border border-blue-200">
-                    <p class="text-sm text-blue-800">
-                        <i class="fas fa-info-circle mr-2"></i>
-                        <strong>Note:</strong> Your token is stored locally and never shared. It's only used to authenticate API requests to GitHub.
-                    </p>
-                </div>
-            </div>
-
-            <div class="flex justify-end">
-                <button onclick="closeInstructionsModal()" class="btn bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-md">
-                    Got it!
-                </button>
-            </div>
-        </div>
-    `;
-
-    // Use the existing plugin config modal for instructions
-    const modal = document.getElementById('plugin-config-modal');
-    const title = document.getElementById('plugin-config-title');
-    const content = document.getElementById('plugin-config-content');
-
-    title.textContent = 'GitHub Token Setup';
-    content.innerHTML = instructions;
-    modal.style.display = 'flex';
-    console.log('GitHub instructions modal opened');
-}
-
-window.closeInstructionsModal = function() {
-    const modal = document.getElementById('plugin-config-modal');
-    modal.style.display = 'none';
-    console.log('Instructions modal closed');
-}
 
 // ==================== File Upload Functions ====================
 // Note: handleFileDrop, handleFileSelect, and handleFiles are defined in
@@ -7426,7 +5587,7 @@ if (typeof window !== 'undefined') {
 
     // Debug logging (only if pluginDebug is enabled)
     if (_PLUGIN_DEBUG_EARLY) {
-        console.log('[ARRAY-OBJECTS] Functions defined on window:', {
+        debugLog('[ARRAY-OBJECTS] Functions defined on window:', {
             addArrayObjectItem: typeof window.addArrayObjectItem,
             removeArrayObjectItem: typeof window.removeArrayObjectItem,
             updateArrayObjectData: typeof window.updateArrayObjectData,
@@ -7440,7 +5601,7 @@ if (typeof window !== 'undefined') {
 window.currentPluginConfig = null;
 
 // Force initialization immediately when script loads (for HTMX swapped content)
-console.log('Plugins script loaded, checking for elements...');
+debugLog('Plugins script loaded, checking for elements...');
 
 // Ensure all functions are globally available (in case IIFE didn't expose them properly)
 // These should already be set inside the IIFE, but this ensures they're available
@@ -7461,7 +5622,7 @@ if (typeof renderInstalledPlugins !== 'undefined') {
 
 // Verify critical functions are available
 if (_PLUGIN_DEBUG_EARLY) {
-    console.log('Plugin functions available:', {
+    debugLog('Plugin functions available:', {
         configurePlugin: typeof window.configurePlugin,
         togglePlugin: typeof window.togglePlugin,
         initializePlugins: typeof window.initializePlugins,
@@ -7472,7 +5633,7 @@ if (_PLUGIN_DEBUG_EARLY) {
 
 // Check GitHub auth status immediately if elements exist (don't wait for full initialization)
 if (window.checkGitHubAuthStatus && document.getElementById('github-auth-warning')) {
-    console.log('[EARLY] Checking GitHub auth status immediately on script load...');
+    debugLog('[EARLY] Checking GitHub auth status immediately on script load...');
     window.checkGitHubAuthStatus();
 }
 
@@ -7491,7 +5652,7 @@ if (typeof initializeOnDemandModal === 'function') {
 setTimeout(function() {
     const installedGrid = document.getElementById('installed-plugins-grid');
     if (installedGrid) {
-        console.log('Found installed-plugins-grid, forcing initialization...');
+        debugLog('Found installed-plugins-grid, forcing initialization...');
         window.pluginManager.initialized = false;
         if (typeof initializePluginPageWhenReady === 'function') {
             initializePluginPageWhenReady();
@@ -7499,7 +5660,7 @@ setTimeout(function() {
             window.initPluginsPage();
         }
     } else {
-        console.log('installed-plugins-grid not found yet, will retry via event listeners');
+        debugLog('installed-plugins-grid not found yet, will retry via event listeners');
     }
 
     // Also try to attach install button handler after a delay (fallback).
@@ -7698,7 +5859,7 @@ document.addEventListener('htmx:afterSettle', function() {
                 if (countEl) countEl.textContent = `${data.count} apps`;
 
                 if (data.rate_limit) {
-                    console.log(`[Starlark] GitHub rate limit: ${data.rate_limit.remaining}/${data.rate_limit.limit} remaining` + (data.cached ? ' (cached)' : ''));
+                    debugLog(`[Starlark] GitHub rate limit: ${data.rate_limit.remaining}/${data.rate_limit.limit} remaining` + (data.cached ? ' (cached)' : ''));
                 }
 
                 applyStarlarkFiltersAndSort();
diff --git a/web_interface/static/v3/vendor/codemirror/addon/edit/closebrackets.min.js b/web_interface/static/v3/vendor/codemirror/addon/edit/closebrackets.min.js
new file mode 100644
index 00000000..cbcb2ce5
--- /dev/null
+++ b/web_interface/static/v3/vendor/codemirror/addon/edit/closebrackets.min.js
@@ -0,0 +1 @@
+!function(e){"object"==typeof exports&&"object"==typeof module?e(require("../../lib/codemirror")):"function"==typeof define&&define.amd?define(["../../lib/codemirror"],e):e(CodeMirror)}(function(P){var t={pairs:"()[]{}''\"\"",closeBefore:")]}'\":;>",triples:"",explode:"[]{}"},S=P.Pos;function k(e,n){return"pairs"==n&&"string"==typeof e?e:("object"==typeof e&&null!=e[n]?e:t)[n]}P.defineOption("autoCloseBrackets",!1,function(e,n,t){t&&t!=P.Init&&(e.removeKeyMap(i),e.state.closeBrackets=null),n&&(r(k(n,"pairs")),e.state.closeBrackets=n,e.addKeyMap(i))});var i={Backspace:function(e){var n=y(e);if(!n||e.getOption("disableInput"))return P.Pass;for(var t=k(n,"pairs"),r=e.listSelections(),i=0;i<r.length;i++){if(!r[i].empty())return P.Pass;var a=s(e,r[i].head);if(!a||t.indexOf(a)%2!=0)return P.Pass}for(i=r.length-1;0<=i;i--){var o=r[i].head;e.replaceRange("",S(o.line,o.ch-1),S(o.line,o.ch+1),"+delete")}},Enter:function(r){var e=y(r),n=e&&k(e,"explode");if(!n||r.getOption("disableInput"))return P.Pass;for(var i=r.listSelections(),t=0;t<i.length;t++){if(!i[t].empty())return P.Pass;var a=s(r,i[t].head);if(!a||n.indexOf(a)%2!=0)return P.Pass}r.operation(function(){var e=r.lineSeparator()||"\n";r.replaceSelection(e+e,null),O(r,-1),i=r.listSelections();for(var n=0;n<i.length;n++){var t=i[n].head.line;r.indentLine(t,null,!0),r.indentLine(t+1,null,!0)}})}};function r(e){for(var n=0;n<e.length;n++){var t=e.charAt(n),r="'"+t+"'";i[r]||(i[r]=function(n){return function(e){return function(i,e){var n=y(i);if(!n||i.getOption("disableInput"))return P.Pass;var t=k(n,"pairs"),r=t.indexOf(e);if(-1==r)return P.Pass;for(var a,o=k(n,"closeBefore"),s=k(n,"triples"),l=t.charAt(r+1)==e,c=i.listSelections(),f=r%2==0,h=0;h<c.length;h++){var u,d=c[h],p=d.head,g=i.getRange(p,S(p.line,p.ch+1));if(f&&!d.empty())u="surround";else if(!l&&f||g!=e)if(l&&1<p.ch&&0<=s.indexOf(e)&&i.getRange(S(p.line,p.ch-2),p)==e+e){if(2<p.ch&&/\bstring/.test(i.getTokenTypeAt(S(p.line,p.ch-2))))return P.Pass;u="addFour"}else if(l){d=0==p.ch?" ":i.getRange(S(p.line,p.ch-1),p);if(P.isWordChar(g)||d==e||P.isWordChar(d))return P.Pass;u="both"}else{if(!f||!(0===g.length||/\s/.test(g)||-1<o.indexOf(g)))return P.Pass;u="both"}else u=l&&function(e,n){var t=e.getTokenAt(S(n.line,n.ch+1));return/\bstring/.test(t.type)&&t.start==n.ch&&(0==n.ch||!/\bstring/.test(e.getTokenTypeAt(n)))}(i,p)?"both":0<=s.indexOf(e)&&i.getRange(p,S(p.line,p.ch+3))==e+e+e?"skipThree":"skip";if(a){if(a!=u)return P.Pass}else a=u}var v=r%2?t.charAt(r-1):e,b=r%2?e:t.charAt(r+1);i.operation(function(){if("skip"==a)O(i,1);else if("skipThree"==a)O(i,3);else if("surround"==a){for(var e=i.getSelections(),n=0;n<e.length;n++)e[n]=v+e[n]+b;i.replaceSelections(e,"around");for(e=i.listSelections().slice(),n=0;n<e.length;n++)e[n]=(t=e[n],r=void 0,r=0<P.cmpPos(t.anchor,t.head),{anchor:new S(t.anchor.line,t.anchor.ch+(r?-1:1)),head:new S(t.head.line,t.head.ch+(r?1:-1))});i.setSelections(e)}else"both"==a?(i.replaceSelection(v+b,null),i.triggerElectric(v+b),O(i,-1)):"addFour"==a&&(i.replaceSelection(v+v+v+v,"before"),O(i,1));var t,r})}(e,n)}}(t))}}function y(e){var n=e.state.closeBrackets;return n&&!n.override&&e.getModeAt(e.getCursor()).closeBrackets||n}function O(e,n){for(var t=[],r=e.listSelections(),i=0,a=0;a<r.length;a++){var o=r[a];o.head==e.getCursor()&&(i=a);o=o.head.ch||0<n?{line:o.head.line,ch:o.head.ch+n}:{line:o.head.line-1};t.push({anchor:o,head:o})}e.setSelections(t,i)}function s(e,n){n=e.getRange(S(n.line,n.ch-1),S(n.line,n.ch+1));return 2==n.length?n:null}r(t.pairs+"`")});
\ No newline at end of file
diff --git a/web_interface/static/v3/vendor/codemirror/addon/edit/matchbrackets.min.js b/web_interface/static/v3/vendor/codemirror/addon/edit/matchbrackets.min.js
new file mode 100644
index 00000000..5cbbc7d6
--- /dev/null
+++ b/web_interface/static/v3/vendor/codemirror/addon/edit/matchbrackets.min.js
@@ -0,0 +1 @@
+!function(t){"object"==typeof exports&&"object"==typeof module?t(require("../../lib/codemirror")):"function"==typeof define&&define.amd?define(["../../lib/codemirror"],t):t(CodeMirror)}(function(r){var u=/MSIE \d/.test(navigator.userAgent)&&(null==document.documentMode||document.documentMode<8),k=r.Pos,p={"(":")>",")":"(<","[":"]>","]":"[<","{":"}>","}":"{<","<":">>",">":"<<"};function y(t){return t&&t.bracketRegex||/[(){}[\]]/}function f(t,e,n){var r=t.getLineHandle(e.line),i=e.ch-1,c=n&&n.afterCursor;null==c&&(c=/(^| )cm-fat-cursor($| )/.test(t.getWrapperElement().className));var a=y(n),c=!c&&0<=i&&a.test(r.text.charAt(i))&&p[r.text.charAt(i)]||a.test(r.text.charAt(i+1))&&p[r.text.charAt(++i)];if(!c)return null;a=">"==c.charAt(1)?1:-1;if(n&&n.strict&&0<a!=(i==e.ch))return null;r=t.getTokenTypeAt(k(e.line,i+1)),n=o(t,k(e.line,i+(0<a?1:0)),a,r,n);return null==n?null:{from:k(e.line,i),to:n&&n.pos,match:n&&n.ch==c.charAt(0),forward:0<a}}function o(t,e,n,r,i){for(var c=i&&i.maxScanLineLength||1e4,a=i&&i.maxScanLines||1e3,o=[],h=y(i),l=0<n?Math.min(e.line+a,t.lastLine()+1):Math.max(t.firstLine()-1,e.line-a),s=e.line;s!=l;s+=n){var u=t.getLine(s);if(u){var f=0<n?0:u.length-1,m=0<n?u.length:-1;if(!(u.length>c))for(s==e.line&&(f=e.ch-(n<0?1:0));f!=m;f+=n){var g=u.charAt(f);if(h.test(g)&&(void 0===r||(t.getTokenTypeAt(k(s,f+1))||"")==(r||""))){var d=p[g];if(d&&">"==d.charAt(1)==0<n)o.push(g);else{if(!o.length)return{pos:k(s,f),ch:g};o.pop()}}}}}return s-n!=(0<n?t.lastLine():t.firstLine())&&null}function e(t,e,n){for(var r=t.state.matchBrackets.maxHighlightLineLength||1e3,i=n&&n.highlightNonMatching,c=[],a=t.listSelections(),o=0;o<a.length;o++){var h,l=a[o].empty()&&f(t,a[o].head,n);l&&(l.match||!1!==i)&&t.getLine(l.from.line).length<=r&&(h=l.match?"CodeMirror-matchingbracket":"CodeMirror-nonmatchingbracket",c.push(t.markText(l.from,k(l.from.line,l.from.ch+1),{className:h})),l.to&&t.getLine(l.to.line).length<=r&&c.push(t.markText(l.to,k(l.to.line,l.to.ch+1),{className:h})))}if(c.length){u&&t.state.focused&&t.focus();function s(){t.operation(function(){for(var t=0;t<c.length;t++)c[t].clear()})}if(!e)return s;setTimeout(s,800)}}function i(t){t.operation(function(){t.state.matchBrackets.currentlyHighlighted&&(t.state.matchBrackets.currentlyHighlighted(),t.state.matchBrackets.currentlyHighlighted=null),t.state.matchBrackets.currentlyHighlighted=e(t,!1,t.state.matchBrackets)})}function c(t){t.state.matchBrackets&&t.state.matchBrackets.currentlyHighlighted&&(t.state.matchBrackets.currentlyHighlighted(),t.state.matchBrackets.currentlyHighlighted=null)}r.defineOption("matchBrackets",!1,function(t,e,n){n&&n!=r.Init&&(t.off("cursorActivity",i),t.off("focus",i),t.off("blur",c),c(t)),e&&(t.state.matchBrackets="object"==typeof e?e:{},t.on("cursorActivity",i),t.on("focus",i),t.on("blur",c))}),r.defineExtension("matchBrackets",function(){e(this,!0)}),r.defineExtension("findMatchingBracket",function(t,e,n){return f(this,t,e=n||"boolean"==typeof e?n?(n.strict=e,n):e?{strict:!0}:null:e)}),r.defineExtension("scanForBracket",function(t,e,n,r){return o(this,t,e,n,r)})});
\ No newline at end of file
diff --git a/web_interface/static/v3/vendor/codemirror/codemirror.min.css b/web_interface/static/v3/vendor/codemirror/codemirror.min.css
new file mode 100644
index 00000000..2ef25eaa
--- /dev/null
+++ b/web_interface/static/v3/vendor/codemirror/codemirror.min.css
@@ -0,0 +1 @@
+.CodeMirror{font-family:monospace;height:300px;color:#000;direction:ltr}.CodeMirror-lines{padding:4px 0}.CodeMirror pre.CodeMirror-line,.CodeMirror pre.CodeMirror-line-like{padding:0 4px}.CodeMirror-gutter-filler,.CodeMirror-scrollbar-filler{background-color:#fff}.CodeMirror-gutters{border-right:1px solid #ddd;background-color:#f7f7f7;white-space:nowrap}.CodeMirror-linenumber{padding:0 3px 0 5px;min-width:20px;text-align:right;color:#999;white-space:nowrap}.CodeMirror-guttermarker{color:#000}.CodeMirror-guttermarker-subtle{color:#999}.CodeMirror-cursor{border-left:1px solid #000;border-right:none;width:0}.CodeMirror div.CodeMirror-secondarycursor{border-left:1px solid silver}.cm-fat-cursor .CodeMirror-cursor{width:auto;border:0!important;background:#7e7}.cm-fat-cursor div.CodeMirror-cursors{z-index:1}.cm-fat-cursor .CodeMirror-line::selection,.cm-fat-cursor .CodeMirror-line>span::selection,.cm-fat-cursor .CodeMirror-line>span>span::selection{background:0 0}.cm-fat-cursor .CodeMirror-line::-moz-selection,.cm-fat-cursor .CodeMirror-line>span::-moz-selection,.cm-fat-cursor .CodeMirror-line>span>span::-moz-selection{background:0 0}.cm-fat-cursor{caret-color:transparent}@-moz-keyframes blink{50%{background-color:transparent}}@-webkit-keyframes blink{50%{background-color:transparent}}@keyframes blink{50%{background-color:transparent}}.cm-tab{display:inline-block;text-decoration:inherit}.CodeMirror-rulers{position:absolute;left:0;right:0;top:-50px;bottom:0;overflow:hidden}.CodeMirror-ruler{border-left:1px solid #ccc;top:0;bottom:0;position:absolute}.cm-s-default .cm-header{color:#00f}.cm-s-default .cm-quote{color:#090}.cm-negative{color:#d44}.cm-positive{color:#292}.cm-header,.cm-strong{font-weight:700}.cm-em{font-style:italic}.cm-link{text-decoration:underline}.cm-strikethrough{text-decoration:line-through}.cm-s-default .cm-keyword{color:#708}.cm-s-default .cm-atom{color:#219}.cm-s-default .cm-number{color:#164}.cm-s-default .cm-def{color:#00f}.cm-s-default .cm-variable-2{color:#05a}.cm-s-default .cm-type,.cm-s-default .cm-variable-3{color:#085}.cm-s-default .cm-comment{color:#a50}.cm-s-default .cm-string{color:#a11}.cm-s-default .cm-string-2{color:#f50}.cm-s-default .cm-meta{color:#555}.cm-s-default .cm-qualifier{color:#555}.cm-s-default .cm-builtin{color:#30a}.cm-s-default .cm-bracket{color:#997}.cm-s-default .cm-tag{color:#170}.cm-s-default .cm-attribute{color:#00c}.cm-s-default .cm-hr{color:#999}.cm-s-default .cm-link{color:#00c}.cm-s-default .cm-error{color:red}.cm-invalidchar{color:red}.CodeMirror-composing{border-bottom:2px solid}div.CodeMirror span.CodeMirror-matchingbracket{color:#0b0}div.CodeMirror span.CodeMirror-nonmatchingbracket{color:#a22}.CodeMirror-matchingtag{background:rgba(255,150,0,.3)}.CodeMirror-activeline-background{background:#e8f2ff}.CodeMirror{position:relative;overflow:hidden;background:#fff}.CodeMirror-scroll{overflow:scroll!important;margin-bottom:-50px;margin-right:-50px;padding-bottom:50px;height:100%;outline:0;position:relative;z-index:0}.CodeMirror-sizer{position:relative;border-right:50px solid transparent}.CodeMirror-gutter-filler,.CodeMirror-hscrollbar,.CodeMirror-scrollbar-filler,.CodeMirror-vscrollbar{position:absolute;z-index:6;display:none;outline:0}.CodeMirror-vscrollbar{right:0;top:0;overflow-x:hidden;overflow-y:scroll}.CodeMirror-hscrollbar{bottom:0;left:0;overflow-y:hidden;overflow-x:scroll}.CodeMirror-scrollbar-filler{right:0;bottom:0}.CodeMirror-gutter-filler{left:0;bottom:0}.CodeMirror-gutters{position:absolute;left:0;top:0;min-height:100%;z-index:3}.CodeMirror-gutter{white-space:normal;height:100%;display:inline-block;vertical-align:top;margin-bottom:-50px}.CodeMirror-gutter-wrapper{position:absolute;z-index:4;background:0 0!important;border:none!important}.CodeMirror-gutter-background{position:absolute;top:0;bottom:0;z-index:4}.CodeMirror-gutter-elt{position:absolute;cursor:default;z-index:4}.CodeMirror-gutter-wrapper ::selection{background-color:transparent}.CodeMirror-gutter-wrapper ::-moz-selection{background-color:transparent}.CodeMirror-lines{cursor:text;min-height:1px}.CodeMirror pre.CodeMirror-line,.CodeMirror pre.CodeMirror-line-like{-moz-border-radius:0;-webkit-border-radius:0;border-radius:0;border-width:0;background:0 0;font-family:inherit;font-size:inherit;margin:0;white-space:pre;word-wrap:normal;line-height:inherit;color:inherit;z-index:2;position:relative;overflow:visible;-webkit-tap-highlight-color:transparent;-webkit-font-variant-ligatures:contextual;font-variant-ligatures:contextual}.CodeMirror-wrap pre.CodeMirror-line,.CodeMirror-wrap pre.CodeMirror-line-like{word-wrap:break-word;white-space:pre-wrap;word-break:normal}.CodeMirror-linebackground{position:absolute;left:0;right:0;top:0;bottom:0;z-index:0}.CodeMirror-linewidget{position:relative;z-index:2;padding:.1px}.CodeMirror-rtl pre{direction:rtl}.CodeMirror-code{outline:0}.CodeMirror-gutter,.CodeMirror-gutters,.CodeMirror-linenumber,.CodeMirror-scroll,.CodeMirror-sizer{-moz-box-sizing:content-box;box-sizing:content-box}.CodeMirror-measure{position:absolute;width:100%;height:0;overflow:hidden;visibility:hidden}.CodeMirror-cursor{position:absolute;pointer-events:none}.CodeMirror-measure pre{position:static}div.CodeMirror-cursors{visibility:hidden;position:relative;z-index:3}div.CodeMirror-dragcursors{visibility:visible}.CodeMirror-focused div.CodeMirror-cursors{visibility:visible}.CodeMirror-selected{background:#d9d9d9}.CodeMirror-focused .CodeMirror-selected{background:#d7d4f0}.CodeMirror-crosshair{cursor:crosshair}.CodeMirror-line::selection,.CodeMirror-line>span::selection,.CodeMirror-line>span>span::selection{background:#d7d4f0}.CodeMirror-line::-moz-selection,.CodeMirror-line>span::-moz-selection,.CodeMirror-line>span>span::-moz-selection{background:#d7d4f0}.cm-searching{background-color:#ffa;background-color:rgba(255,255,0,.4)}.cm-force-border{padding-right:.1px}@media print{.CodeMirror div.CodeMirror-cursors{visibility:hidden}}.cm-tab-wrap-hack:after{content:''}span.CodeMirror-selectedtext{background:0 0}
\ No newline at end of file
diff --git a/web_interface/static/v3/vendor/codemirror/codemirror.min.js b/web_interface/static/v3/vendor/codemirror/codemirror.min.js
new file mode 100644
index 00000000..3bbc5ab7
--- /dev/null
+++ b/web_interface/static/v3/vendor/codemirror/codemirror.min.js
@@ -0,0 +1 @@
+!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t():"function"==typeof define&&define.amd?define(t):(e=e||self).CodeMirror=t()}(this,function(){"use strict";var e=navigator.userAgent,t=navigator.platform,d=/gecko\/\d/i.test(e),n=/MSIE \d/.test(e),r=/Trident\/(?:[7-9]|\d{2,})\..*rv:(\d+)/.exec(e),i=/Edge\/(\d+)/.exec(e),w=n||r||i,v=w&&(n?document.documentMode||6:+(i||r)[1]),f=!i&&/WebKit\//.test(e),r=f&&/Qt\/\d+\.\d+/.test(e),o=!i&&/Chrome\//.test(e),p=/Opera\//.test(e),c=/Apple Computer/.test(navigator.vendor),l=/Mac OS X 1\d\D([8-9]|\d\d)\D/.test(e),u=/PhantomJS/.test(e),s=c&&(/Mobile\/\w+/.test(e)||2<navigator.maxTouchPoints),a=/Android/.test(e),h=s||a||/webOS|BlackBerry|Opera Mini|Opera Mobi|IEMobile/i.test(e),g=s||/Mac/.test(t),m=/\bCrOS\b/.test(e),y=/win/i.test(t),e=p&&e.match(/Version\/(\d*\.\d*)/);(e=e&&Number(e[1]))&&15<=e&&(f=!(p=!1));var b=g&&(r||p&&(null==e||e<12.11)),x=d||w&&9<=v;function C(e){return new RegExp("(^|\\s)"+e+"(?:$|\\s)\\s*")}var S=function(e,t){var n=e.className,r=C(t).exec(n);r&&(t=n.slice(r.index+r[0].length),e.className=n.slice(0,r.index)+(t?r[1]+t:""))};function L(e){for(var t=e.childNodes.length;0<t;--t)e.removeChild(e.firstChild);return e}function k(e,t){return L(e).appendChild(t)}function M(e,t,n,r){var i=document.createElement(e);if(n&&(i.className=n),r&&(i.style.cssText=r),"string"==typeof t)i.appendChild(document.createTextNode(t));else if(t)for(var o=0;o<t.length;++o)i.appendChild(t[o]);return i}function T(e,t,n,r){r=M(e,t,n,r);return r.setAttribute("role","presentation"),r}function N(e,t){if(3==t.nodeType&&(t=t.parentNode),e.contains)return e.contains(t);do{if((t=11==t.nodeType?t.host:t)==e)return!0}while(t=t.parentNode)}function O(){var t;try{t=document.activeElement}catch(e){t=document.body||null}for(;t&&t.shadowRoot&&t.shadowRoot.activeElement;)t=t.shadowRoot.activeElement;return t}function A(e,t){var n=e.className;C(t).test(n)||(e.className+=(n?" ":"")+t)}function D(e,t){for(var n=e.split(" "),r=0;r<n.length;r++)n[r]&&!C(n[r]).test(t)&&(t+=" "+n[r]);return t}var W=document.createRange?function(e,t,n,r){var i=document.createRange();return i.setEnd(r||e,n),i.setStart(e,t),i}:function(e,t,n){var r=document.body.createTextRange();try{r.moveToElementText(e.parentNode)}catch(e){return r}return r.collapse(!0),r.moveEnd("character",n),r.moveStart("character",t),r},H=function(e){e.select()};function F(e){var t=Array.prototype.slice.call(arguments,1);return function(){return e.apply(null,t)}}function P(e,t,n){for(var r in t=t||{},e)!e.hasOwnProperty(r)||!1===n&&t.hasOwnProperty(r)||(t[r]=e[r]);return t}function E(e,t,n,r,i){null==t&&-1==(t=e.search(/[^\s\u00a0]/))&&(t=e.length);for(var o=r||0,l=i||0;;){var s=e.indexOf("\t",o);if(s<0||t<=s)return l+(t-o);l+=s-o,l+=n-l%n,o=s+1}}s?H=function(e){e.selectionStart=0,e.selectionEnd=e.value.length}:w&&(H=function(e){try{e.select()}catch(e){}});function I(){this.id=null,this.f=null,this.time=0,this.handler=F(this.onTimeout,this)}function R(e,t){for(var n=0;n<e.length;++n)if(e[n]==t)return n;return-1}I.prototype.onTimeout=function(e){e.id=0,e.time<=+new Date?e.f():setTimeout(e.handler,e.time-+new Date)};var z=50,B={toString:function(){return"CodeMirror.Pass"}},G={scroll:!(I.prototype.set=function(e,t){this.f=t;t=+new Date+e;(!this.id||t<this.time)&&(clearTimeout(this.id),this.id=setTimeout(this.handler,e),this.time=t)})},U={origin:"*mouse"},V={origin:"+move"};function K(e,t,n){for(var r=0,i=0;;){var o=e.indexOf("\t",r),l=(o=-1==o?e.length:o)-r;if(o==e.length||t<=i+l)return r+Math.min(l,t-i);if(i+=o-r,r=o+1,t<=(i+=n-i%n))return r}}var j=[""];function X(e){for(;j.length<=e;)j.push(Y(j)+" ");return j[e]}function Y(e){return e[e.length-1]}function $(e,t){for(var n=[],r=0;r<e.length;r++)n[r]=t(e[r],r);return n}function _(){}function q(e,t){e=Object.create?Object.create(e):(_.prototype=e,new _);return t&&P(t,e),e}var Z=/[\u00df\u0587\u0590-\u05f4\u0600-\u06ff\u3040-\u309f\u30a0-\u30ff\u3400-\u4db5\u4e00-\u9fcc\uac00-\ud7af]/;function Q(e){return/\w/.test(e)||"€"<e&&(e.toUpperCase()!=e.toLowerCase()||Z.test(e))}function J(e,t){return t?!!(-1<t.source.indexOf("\\w")&&Q(e))||t.test(e):Q(e)}function ee(e){for(var t in e)if(e.hasOwnProperty(t)&&e[t])return;return 1}var te=/[\u0300-\u036f\u0483-\u0489\u0591-\u05bd\u05bf\u05c1\u05c2\u05c4\u05c5\u05c7\u0610-\u061a\u064b-\u065e\u0670\u06d6-\u06dc\u06de-\u06e4\u06e7\u06e8\u06ea-\u06ed\u0711\u0730-\u074a\u07a6-\u07b0\u07eb-\u07f3\u0816-\u0819\u081b-\u0823\u0825-\u0827\u0829-\u082d\u0900-\u0902\u093c\u0941-\u0948\u094d\u0951-\u0955\u0962\u0963\u0981\u09bc\u09be\u09c1-\u09c4\u09cd\u09d7\u09e2\u09e3\u0a01\u0a02\u0a3c\u0a41\u0a42\u0a47\u0a48\u0a4b-\u0a4d\u0a51\u0a70\u0a71\u0a75\u0a81\u0a82\u0abc\u0ac1-\u0ac5\u0ac7\u0ac8\u0acd\u0ae2\u0ae3\u0b01\u0b3c\u0b3e\u0b3f\u0b41-\u0b44\u0b4d\u0b56\u0b57\u0b62\u0b63\u0b82\u0bbe\u0bc0\u0bcd\u0bd7\u0c3e-\u0c40\u0c46-\u0c48\u0c4a-\u0c4d\u0c55\u0c56\u0c62\u0c63\u0cbc\u0cbf\u0cc2\u0cc6\u0ccc\u0ccd\u0cd5\u0cd6\u0ce2\u0ce3\u0d3e\u0d41-\u0d44\u0d4d\u0d57\u0d62\u0d63\u0dca\u0dcf\u0dd2-\u0dd4\u0dd6\u0ddf\u0e31\u0e34-\u0e3a\u0e47-\u0e4e\u0eb1\u0eb4-\u0eb9\u0ebb\u0ebc\u0ec8-\u0ecd\u0f18\u0f19\u0f35\u0f37\u0f39\u0f71-\u0f7e\u0f80-\u0f84\u0f86\u0f87\u0f90-\u0f97\u0f99-\u0fbc\u0fc6\u102d-\u1030\u1032-\u1037\u1039\u103a\u103d\u103e\u1058\u1059\u105e-\u1060\u1071-\u1074\u1082\u1085\u1086\u108d\u109d\u135f\u1712-\u1714\u1732-\u1734\u1752\u1753\u1772\u1773\u17b7-\u17bd\u17c6\u17c9-\u17d3\u17dd\u180b-\u180d\u18a9\u1920-\u1922\u1927\u1928\u1932\u1939-\u193b\u1a17\u1a18\u1a56\u1a58-\u1a5e\u1a60\u1a62\u1a65-\u1a6c\u1a73-\u1a7c\u1a7f\u1b00-\u1b03\u1b34\u1b36-\u1b3a\u1b3c\u1b42\u1b6b-\u1b73\u1b80\u1b81\u1ba2-\u1ba5\u1ba8\u1ba9\u1c2c-\u1c33\u1c36\u1c37\u1cd0-\u1cd2\u1cd4-\u1ce0\u1ce2-\u1ce8\u1ced\u1dc0-\u1de6\u1dfd-\u1dff\u200c\u200d\u20d0-\u20f0\u2cef-\u2cf1\u2de0-\u2dff\u302a-\u302f\u3099\u309a\ua66f-\ua672\ua67c\ua67d\ua6f0\ua6f1\ua802\ua806\ua80b\ua825\ua826\ua8c4\ua8e0-\ua8f1\ua926-\ua92d\ua947-\ua951\ua980-\ua982\ua9b3\ua9b6-\ua9b9\ua9bc\uaa29-\uaa2e\uaa31\uaa32\uaa35\uaa36\uaa43\uaa4c\uaab0\uaab2-\uaab4\uaab7\uaab8\uaabe\uaabf\uaac1\uabe5\uabe8\uabed\udc00-\udfff\ufb1e\ufe00-\ufe0f\ufe20-\ufe26\uff9e\uff9f]/;function ne(e){return 768<=e.charCodeAt(0)&&te.test(e)}function re(e,t,n){for(;(n<0?0<t:t<e.length)&&ne(e.charAt(t));)t+=n;return t}function ie(e,t,n){for(var r=n<t?-1:1;;){if(t==n)return t;var i=(t+n)/2,i=r<0?Math.ceil(i):Math.floor(i);if(i==t)return e(i)?t:n;e(i)?n=i:t=i+r}}var oe=null;function le(e,t,n){var r;oe=null;for(var i=0;i<e.length;++i){var o=e[i];if(o.from<t&&o.to>t)return i;o.to==t&&(o.from!=o.to&&"before"==n?r=i:oe=i),o.from==t&&(o.from!=o.to&&"before"!=n?r=i:oe=i)}return null!=r?r:oe}var se,ae,ue,ce,he,de=(se=/[\u0590-\u05f4\u0600-\u06ff\u0700-\u08ac]/,ae=/[stwN]/,ue=/[LRr]/,ce=/[Lb1n]/,he=/[1n]/,function(e,t){var n="ltr"==t?"L":"R";if(0==e.length||"ltr"==t&&!se.test(e))return!1;for(var r,i=e.length,o=[],l=0;l<i;++l)o.push((r=e.charCodeAt(l))<=247?"bbbbbbbbbtstwsbbbbbbbbbbbbbbssstwNN%%%NNNNNN,N,N1111111111NNNNNNNLLLLLLLLLLLLLLLLLLLLLLLLLLNNNNNNLLLLLLLLLLLLLLLLLLLLLLLLLLNNNNbbbbbbsbbbbbbbbbbbbbbbbbbbbbbbbbb,N%%%%NNNNLNNNNN%%11NLNNN1LNNNNNLLLLLLLLLLLLLLLLLLLLLLLNLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLN".charAt(r):1424<=r&&r<=1524?"R":1536<=r&&r<=1785?"nnnnnnNNr%%r,rNNmmmmmmmmmmmrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrmmmmmmmmmmmmmmmmmmmmmnnnnnnnnnn%nnrrrmrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrmmmmmmmnNmmmmmmrrmmNmmmmrr1111111111".charAt(r-1536):1774<=r&&r<=2220?"r":8192<=r&&r<=8203?"w":8204==r?"b":"L");for(var s=0,a=n;s<i;++s){var u=o[s];"m"==u?o[s]=a:a=u}for(var c=0,h=n;c<i;++c){var d=o[c];"1"==d&&"r"==h?o[c]="n":ue.test(d)&&"r"==(h=d)&&(o[c]="R")}for(var f=1,p=o[0];f<i-1;++f){var g=o[f];"+"==g&&"1"==p&&"1"==o[f+1]?o[f]="1":","!=g||p!=o[f+1]||"1"!=p&&"n"!=p||(o[f]=p),p=g}for(var m=0;m<i;++m){var v=o[m];if(","==v)o[m]="N";else if("%"==v){for(var y=void 0,y=m+1;y<i&&"%"==o[y];++y);for(var b=m&&"!"==o[m-1]||y<i&&"1"==o[y]?"1":"N",w=m;w<y;++w)o[w]=b;m=y-1}}for(var x=0,C=n;x<i;++x){var S=o[x];"L"==C&&"1"==S?o[x]="L":ue.test(S)&&(C=S)}for(var L=0;L<i;++L)if(ae.test(o[L])){for(var k=void 0,k=L+1;k<i&&ae.test(o[k]);++k);for(var T="L"==(L?o[L-1]:n),M=T==("L"==(k<i?o[k]:n))?T?"L":"R":n,N=L;N<k;++N)o[N]=M;L=k-1}for(var O,A=[],D=0;D<i;)if(ce.test(o[D])){var W=D;for(++D;D<i&&ce.test(o[D]);++D);A.push(new fe(0,W,D))}else{var H=D,F=A.length,P="rtl"==t?1:0;for(++D;D<i&&"L"!=o[D];++D);for(var E=H;E<D;)if(he.test(o[E])){H<E&&(A.splice(F,0,new fe(1,H,E)),F+=P);var I=E;for(++E;E<D&&he.test(o[E]);++E);A.splice(F,0,new fe(2,I,E)),F+=P,H=E}else++E;H<D&&A.splice(F,0,new fe(1,H,D))}return"ltr"==t&&(1==A[0].level&&(O=e.match(/^\s+/))&&(A[0].from=O[0].length,A.unshift(new fe(0,0,O[0].length))),1==Y(A).level&&(O=e.match(/\s+$/))&&(Y(A).to-=O[0].length,A.push(new fe(0,i-O[0].length,i)))),"rtl"==t?A.reverse():A});function fe(e,t,n){this.level=e,this.from=t,this.to=n}function pe(e,t){var n=e.order;return n=null==n?e.order=de(e.text,t):n}var ge=[],me=function(e,t,n){e.addEventListener?e.addEventListener(t,n,!1):e.attachEvent?e.attachEvent("on"+t,n):(e=e._handlers||(e._handlers={}))[t]=(e[t]||ge).concat(n)};function ve(e,t){return e._handlers&&e._handlers[t]||ge}function ye(e,t,n){var r;e.removeEventListener?e.removeEventListener(t,n,!1):e.detachEvent?e.detachEvent("on"+t,n):!(e=(r=e._handlers)&&r[t])||-1<(n=R(e,n))&&(r[t]=e.slice(0,n).concat(e.slice(n+1)))}function be(e,t){var n=ve(e,t);if(n.length)for(var r=Array.prototype.slice.call(arguments,2),i=0;i<n.length;++i)n[i].apply(null,r)}function we(e,t,n){return"string"==typeof t&&(t={type:t,preventDefault:function(){this.defaultPrevented=!0}}),be(e,n||t.type,e,t),Te(t)||t.codemirrorIgnore}function xe(e){var t=e._handlers&&e._handlers.cursorActivity;if(t)for(var n=e.curOp.cursorActivityHandlers||(e.curOp.cursorActivityHandlers=[]),r=0;r<t.length;++r)-1==R(n,t[r])&&n.push(t[r])}function Ce(e,t){return 0<ve(e,t).length}function Se(e){e.prototype.on=function(e,t){me(this,e,t)},e.prototype.off=function(e,t){ye(this,e,t)}}function Le(e){e.preventDefault?e.preventDefault():e.returnValue=!1}function ke(e){e.stopPropagation?e.stopPropagation():e.cancelBubble=!0}function Te(e){return null!=e.defaultPrevented?e.defaultPrevented:0==e.returnValue}function Me(e){Le(e),ke(e)}function Ne(e){return e.target||e.srcElement}function Oe(e){var t=e.which;return null==t&&(1&e.button?t=1:2&e.button?t=3:4&e.button&&(t=2)),t=g&&e.ctrlKey&&1==t?3:t}var Ae,De,We=function(){if(w&&v<9)return!1;var e=M("div");return"draggable"in e||"dragDrop"in e}();var He=3!="\n\nb".split(/\n/).length?function(e){for(var t=0,n=[],r=e.length;t<=r;){var i=e.indexOf("\n",t);-1==i&&(i=e.length);var o=e.slice(t,"\r"==e.charAt(i-1)?i-1:i),l=o.indexOf("\r");-1!=l?(n.push(o.slice(0,l)),t+=l+1):(n.push(o),t=i+1)}return n}:function(e){return e.split(/\r\n?|\n/)},Fe=window.getSelection?function(e){try{return e.selectionStart!=e.selectionEnd}catch(e){return!1}}:function(e){var t;try{t=e.ownerDocument.selection.createRange()}catch(e){}return!(!t||t.parentElement()!=e)&&0!=t.compareEndPoints("StartToEnd",t)},Pe="oncopy"in(r=M("div"))||(r.setAttribute("oncopy","return;"),"function"==typeof r.oncopy),Ee=null;var Ie={},Re={};function ze(e){if("string"==typeof e&&Re.hasOwnProperty(e))e=Re[e];else if(e&&"string"==typeof e.name&&Re.hasOwnProperty(e.name)){var t=Re[e.name];(e=q(t="string"==typeof t?{name:t}:t,e)).name=t.name}else{if("string"==typeof e&&/^[\w\-]+\/[\w\-]+\+xml$/.test(e))return ze("application/xml");if("string"==typeof e&&/^[\w\-]+\/[\w\-]+\+json$/.test(e))return ze("application/json")}return"string"==typeof e?{name:e}:e||{name:"null"}}function Be(e,t){t=ze(t);var n=Ie[t.name];if(!n)return Be(e,"text/plain");var r=n(e,t);if(Ge.hasOwnProperty(t.name)){var i,o=Ge[t.name];for(i in o)o.hasOwnProperty(i)&&(r.hasOwnProperty(i)&&(r["_"+i]=r[i]),r[i]=o[i])}if(r.name=t.name,t.helperType&&(r.helperType=t.helperType),t.modeProps)for(var l in t.modeProps)r[l]=t.modeProps[l];return r}var Ge={};function Ue(e,t){P(t,Ge.hasOwnProperty(e)?Ge[e]:Ge[e]={})}function Ve(e,t){if(!0===t)return t;if(e.copyState)return e.copyState(t);var n,r={};for(n in t){var i=t[n];i instanceof Array&&(i=i.concat([])),r[n]=i}return r}function Ke(e,t){for(var n;e.innerMode&&(n=e.innerMode(t))&&n.mode!=e;)t=n.state,e=n.mode;return n||{mode:e,state:t}}function je(e,t,n){return!e.startState||e.startState(t,n)}var Xe=function(e,t,n){this.pos=this.start=0,this.string=e,this.tabSize=t||8,this.lastColumnPos=this.lastColumnValue=0,this.lineStart=0,this.lineOracle=n};function Ye(e,t){if((t-=e.first)<0||t>=e.size)throw new Error("There is no line "+(t+e.first)+" in the document.");for(var n=e;!n.lines;)for(var r=0;;++r){var i=n.children[r],o=i.chunkSize();if(t<o){n=i;break}t-=o}return n.lines[t]}function $e(e,t,n){var r=[],i=t.line;return e.iter(t.line,n.line+1,function(e){e=e.text;i==n.line&&(e=e.slice(0,n.ch)),i==t.line&&(e=e.slice(t.ch)),r.push(e),++i}),r}function _e(e,t,n){var r=[];return e.iter(t,n,function(e){r.push(e.text)}),r}function qe(e,t){var n=t-e.height;if(n)for(var r=e;r;r=r.parent)r.height+=n}function Ze(e){if(null==e.parent)return null;for(var t=e.parent,n=R(t.lines,e),r=t.parent;r;r=(t=r).parent)for(var i=0;r.children[i]!=t;++i)n+=r.children[i].chunkSize();return n+t.first}function Qe(e,t){var n=e.first;e:do{for(var r=0;r<e.children.length;++r){var i=e.children[r],o=i.height;if(t<o){e=i;continue e}t-=o,n+=i.chunkSize()}return n}while(!e.lines);for(var l=0;l<e.lines.length;++l){var s=e.lines[l].height;if(t<s)break;t-=s}return n+l}function Je(e,t){return t>=e.first&&t<e.first+e.size}function et(e,t){return String(e.lineNumberFormatter(t+e.firstLineNumber))}function tt(e,t,n){if(void 0===n&&(n=null),!(this instanceof tt))return new tt(e,t,n);this.line=e,this.ch=t,this.sticky=n}function nt(e,t){return e.line-t.line||e.ch-t.ch}function rt(e,t){return e.sticky==t.sticky&&0==nt(e,t)}function it(e){return tt(e.line,e.ch)}function ot(e,t){return nt(e,t)<0?t:e}function lt(e,t){return nt(e,t)<0?e:t}function st(e,t){return Math.max(e.first,Math.min(t,e.first+e.size-1))}function at(e,t){if(t.line<e.first)return tt(e.first,0);var n=e.first+e.size-1;return t.line>n?tt(n,Ye(e,n).text.length):(e=Ye(e,(n=t).line).text.length,null==(t=n.ch)||e<t?tt(n.line,e):t<0?tt(n.line,0):n)}function ut(e,t){for(var n=[],r=0;r<t.length;r++)n[r]=at(e,t[r]);return n}Xe.prototype.eol=function(){return this.pos>=this.string.length},Xe.prototype.sol=function(){return this.pos==this.lineStart},Xe.prototype.peek=function(){return this.string.charAt(this.pos)||void 0},Xe.prototype.next=function(){if(this.pos<this.string.length)return this.string.charAt(this.pos++)},Xe.prototype.eat=function(e){var t=this.string.charAt(this.pos),e="string"==typeof e?t==e:t&&(e.test?e.test(t):e(t));if(e)return++this.pos,t},Xe.prototype.eatWhile=function(e){for(var t=this.pos;this.eat(e););return this.pos>t},Xe.prototype.eatSpace=function(){for(var e=this.pos;/[\s\u00a0]/.test(this.string.charAt(this.pos));)++this.pos;return this.pos>e},Xe.prototype.skipToEnd=function(){this.pos=this.string.length},Xe.prototype.skipTo=function(e){e=this.string.indexOf(e,this.pos);if(-1<e)return this.pos=e,!0},Xe.prototype.backUp=function(e){this.pos-=e},Xe.prototype.column=function(){return this.lastColumnPos<this.start&&(this.lastColumnValue=E(this.string,this.start,this.tabSize,this.lastColumnPos,this.lastColumnValue),this.lastColumnPos=this.start),this.lastColumnValue-(this.lineStart?E(this.string,this.lineStart,this.tabSize):0)},Xe.prototype.indentation=function(){return E(this.string,null,this.tabSize)-(this.lineStart?E(this.string,this.lineStart,this.tabSize):0)},Xe.prototype.match=function(e,t,n){if("string"!=typeof e){var r=this.string.slice(this.pos).match(e);return r&&0<r.index?null:(r&&!1!==t&&(this.pos+=r[0].length),r)}r=function(e){return n?e.toLowerCase():e};if(r(this.string.substr(this.pos,e.length))==r(e))return!1!==t&&(this.pos+=e.length),!0},Xe.prototype.current=function(){return this.string.slice(this.start,this.pos)},Xe.prototype.hideFirstChars=function(e,t){this.lineStart+=e;try{return t()}finally{this.lineStart-=e}},Xe.prototype.lookAhead=function(e){var t=this.lineOracle;return t&&t.lookAhead(e)},Xe.prototype.baseToken=function(){var e=this.lineOracle;return e&&e.baseToken(this.pos)};function ct(e,t){this.state=e,this.lookAhead=t}var ht=function(e,t,n,r){this.state=t,this.doc=e,this.line=n,this.maxLookAhead=r||0,this.baseTokens=null,this.baseTokenPos=1};function dt(t,n,r,e){var a=[t.state.modeGen],i={};xt(t,n.text,t.doc.mode,r,function(e,t){return a.push(e,t)},i,e);for(var u=r.state,o=0;o<t.state.overlays.length;++o)!function(e){r.baseTokens=a;var o=t.state.overlays[e],l=1,s=0;r.state=!0,xt(t,n.text,o.mode,r,function(e,t){for(var n=l;s<e;){var r=a[l];e<r&&a.splice(l,1,e,a[l+1],r),l+=2,s=Math.min(e,r)}if(t)if(o.opaque)a.splice(n,l-n,e,"overlay "+t),l=n+2;else for(;n<l;n+=2){var i=a[n+1];a[n+1]=(i?i+" ":"")+"overlay "+t}},i),r.state=u,r.baseTokens=null,r.baseTokenPos=1}(o);return{styles:a,classes:i.bgClass||i.textClass?i:null}}function ft(e,t,n){var r,i,o;return t.styles&&t.styles[0]==e.state.modeGen||(r=pt(e,Ze(t)),i=t.text.length>e.options.maxHighlightLength&&Ve(e.doc.mode,r.state),o=dt(e,t,r),i&&(r.state=i),t.stateAfter=r.save(!i),t.styles=o.styles,o.classes?t.styleClasses=o.classes:t.styleClasses&&(t.styleClasses=null),n===e.doc.highlightFrontier&&(e.doc.modeFrontier=Math.max(e.doc.modeFrontier,++e.doc.highlightFrontier))),t.styles}function pt(n,r,e){var t=n.doc,i=n.display;if(!t.mode.startState)return new ht(t,!0,r);var o=function(e,t,n){for(var r,i,o=e.doc,l=n?-1:t-(e.doc.mode.innerMode?1e3:100),s=t;l<s;--s){if(s<=o.first)return o.first;var a=Ye(o,s-1),u=a.stateAfter;if(u&&(!n||s+(u instanceof ct?u.lookAhead:0)<=o.modeFrontier))return s;a=E(a.text,null,e.options.tabSize);(null==i||a<r)&&(i=s-1,r=a)}return i}(n,r,e),l=o>t.first&&Ye(t,o-1).stateAfter,s=l?ht.fromSaved(t,l,o):new ht(t,je(t.mode),o);return t.iter(o,r,function(e){gt(n,e.text,s);var t=s.line;e.stateAfter=t==r-1||t%5==0||t>=i.viewFrom&&t<i.viewTo?s.save():null,s.nextLine()}),e&&(t.modeFrontier=s.line),s}function gt(e,t,n,r){var i=e.doc.mode,o=new Xe(t,e.options.tabSize,n);for(o.start=o.pos=r||0,""==t&&mt(i,n.state);!o.eol();)vt(i,o,n.state),o.start=o.pos}function mt(e,t){if(e.blankLine)return e.blankLine(t);if(e.innerMode){t=Ke(e,t);return t.mode.blankLine?t.mode.blankLine(t.state):void 0}}function vt(e,t,n,r){for(var i=0;i<10;i++){r&&(r[0]=Ke(e,n).mode);var o=e.token(t,n);if(t.pos>t.start)return o}throw new Error("Mode "+e.name+" failed to advance stream.")}ht.prototype.lookAhead=function(e){var t=this.doc.getLine(this.line+e);return null!=t&&e>this.maxLookAhead&&(this.maxLookAhead=e),t},ht.prototype.baseToken=function(e){if(!this.baseTokens)return null;for(;this.baseTokens[this.baseTokenPos]<=e;)this.baseTokenPos+=2;var t=this.baseTokens[this.baseTokenPos+1];return{type:t&&t.replace(/( |^)overlay .*/,""),size:this.baseTokens[this.baseTokenPos]-e}},ht.prototype.nextLine=function(){this.line++,0<this.maxLookAhead&&this.maxLookAhead--},ht.fromSaved=function(e,t,n){return t instanceof ct?new ht(e,Ve(e.mode,t.state),n,t.lookAhead):new ht(e,Ve(e.mode,t),n)},ht.prototype.save=function(e){e=!1!==e?Ve(this.doc.mode,this.state):this.state;return 0<this.maxLookAhead?new ct(e,this.maxLookAhead):e};var yt=function(e,t,n){this.start=e.start,this.end=e.pos,this.string=e.current(),this.type=t||null,this.state=n};function bt(e,t,n,r){var i,o,l=e.doc,s=l.mode,a=Ye(l,(t=at(l,t)).line),u=pt(e,t.line,n),c=new Xe(a.text,e.options.tabSize,u);for(r&&(o=[]);(r||c.pos<t.ch)&&!c.eol();)c.start=c.pos,i=vt(s,c,u.state),r&&o.push(new yt(c,i,Ve(l.mode,u.state)));return r?o:new yt(c,i,u.state)}function wt(e,t){if(e)for(;;){var n=e.match(/(?:^|\s+)line-(background-)?(\S+)/);if(!n)break;e=e.slice(0,n.index)+e.slice(n.index+n[0].length);var r=n[1]?"bgClass":"textClass";null==t[r]?t[r]=n[2]:new RegExp("(?:^|\\s)"+n[2]+"(?:$|\\s)").test(t[r])||(t[r]+=" "+n[2])}return e}function xt(e,t,n,r,i,o,l){var s=n.flattenSpans;null==s&&(s=e.options.flattenSpans);var a=0,u=null,c=new Xe(t,e.options.tabSize,r),h=e.options.addModeClass&&[null];for(""==t&&wt(mt(n,r.state),o);!c.eol();){var d,f=c.pos>e.options.maxHighlightLength?(s=!1,l&&gt(e,t,r,c.pos),c.pos=t.length,null):wt(vt(n,c,r.state,h),o);if(!h||(d=h[0].name)&&(f="m-"+(f?d+" "+f:d)),!s||u!=f){for(;a<c.start;)i(a=Math.min(c.start,a+5e3),u);u=f}c.start=c.pos}for(;a<c.pos;){var p=Math.min(c.pos,a+5e3);i(p,u),a=p}}var Ct=!1,St=!1;function Lt(e,t,n){this.marker=e,this.from=t,this.to=n}function kt(e,t){if(e)for(var n=0;n<e.length;++n){var r=e[n];if(r.marker==t)return r}}function Tt(e,t){if(t.full)return null;var n=Je(e,t.from.line)&&Ye(e,t.from.line).markedSpans,r=Je(e,t.to.line)&&Ye(e,t.to.line).markedSpans;if(!n&&!r)return null;var i=t.from.ch,o=t.to.ch,e=0==nt(t.from,t.to),l=function(e,t,n){var r;if(e)for(var i=0;i<e.length;++i){var o,l=e[i],s=l.marker;!(null==l.from||(s.inclusiveLeft?l.from<=t:l.from<t))&&(l.from!=t||"bookmark"!=s.type||n&&l.marker.insertLeft)||(o=null==l.to||(s.inclusiveRight?l.to>=t:l.to>t),(r=r||[]).push(new Lt(s,l.from,o?null:l.to)))}return r}(n,i,e),s=function(e,t,n){var r;if(e)for(var i=0;i<e.length;++i){var o,l=e[i],s=l.marker;!(null==l.to||(s.inclusiveRight?l.to>=t:l.to>t))&&(l.from!=t||"bookmark"!=s.type||n&&!l.marker.insertLeft)||(o=null==l.from||(s.inclusiveLeft?l.from<=t:l.from<t),(r=r||[]).push(new Lt(s,o?null:l.from-t,null==l.to?null:l.to-t)))}return r}(r,o,e),a=1==t.text.length,u=Y(t.text).length+(a?i:0);if(l)for(var c=0;c<l.length;++c){var h,d=l[c];null==d.to&&((h=kt(s,d.marker))?a&&(d.to=null==h.to?null:h.to+u):d.to=i)}if(s)for(var f=0;f<s.length;++f){var p=s[f];null!=p.to&&(p.to+=u),null==p.from?kt(l,p.marker)||(p.from=u,a&&(l=l||[]).push(p)):(p.from+=u,a&&(l=l||[]).push(p))}l=l&&Mt(l),s&&s!=l&&(s=Mt(s));var g=[l];if(!a){var m,v=t.text.length-2;if(0<v&&l)for(var y=0;y<l.length;++y)null==l[y].to&&(m=m||[]).push(new Lt(l[y].marker,null,null));for(var b=0;b<v;++b)g.push(m);g.push(s)}return g}function Mt(e){for(var t=0;t<e.length;++t){var n=e[t];null!=n.from&&n.from==n.to&&!1!==n.marker.clearWhenEmpty&&e.splice(t--,1)}return e.length?e:null}function Nt(e){var t=e.markedSpans;if(t){for(var n=0;n<t.length;++n)t[n].marker.detachLine(e);e.markedSpans=null}}function Ot(e,t){if(t){for(var n=0;n<t.length;++n)t[n].marker.attachLine(e);e.markedSpans=t}}function At(e){return e.inclusiveLeft?-1:0}function Dt(e){return e.inclusiveRight?1:0}function Wt(e,t){var n=e.lines.length-t.lines.length;if(0!=n)return n;var r=e.find(),i=t.find(),n=nt(r.from,i.from)||At(e)-At(t);if(n)return-n;i=nt(r.to,i.to)||Dt(e)-Dt(t);return i||t.id-e.id}function Ht(e,t){var n,r=St&&e.markedSpans;if(r)for(var i,o=0;o<r.length;++o)(i=r[o]).marker.collapsed&&null==(t?i.from:i.to)&&(!n||Wt(n,i.marker)<0)&&(n=i.marker);return n}function Ft(e){return Ht(e,!0)}function Pt(e){return Ht(e,!1)}function Et(e,t,n,r,i){var t=Ye(e,t),o=St&&t.markedSpans;if(o)for(var l=0;l<o.length;++l){var s=o[l];if(s.marker.collapsed){var a=s.marker.find(0),u=nt(a.from,n)||At(s.marker)-At(i),c=nt(a.to,r)||Dt(s.marker)-Dt(i);if(!(0<=u&&c<=0||u<=0&&0<=c)&&(u<=0&&(s.marker.inclusiveRight&&i.inclusiveLeft?0<=nt(a.to,n):0<nt(a.to,n))||0<=u&&(s.marker.inclusiveRight&&i.inclusiveLeft?nt(a.from,r)<=0:nt(a.from,r)<0)))return 1}}}function It(e){for(var t;t=Ft(e);)e=t.find(-1,!0).line;return e}function Rt(e,t){var n=Ye(e,t),e=It(n);return n==e?t:Ze(e)}function zt(e,t){if(t>e.lastLine())return t;var n,r=Ye(e,t);if(!Bt(e,r))return t;for(;n=Pt(r);)r=n.find(1,!0).line;return Ze(r)+1}function Bt(e,t){var n=St&&t.markedSpans;if(n)for(var r,i=0;i<n.length;++i)if((r=n[i]).marker.collapsed){if(null==r.from)return!0;if(!r.marker.widgetNode&&0==r.from&&r.marker.inclusiveLeft&&function e(t,n,r){if(null==r.to){var i=r.marker.find(1,!0);return e(t,i.line,kt(i.line.markedSpans,r.marker))}if(r.marker.inclusiveRight&&r.to==n.text.length)return!0;for(var o=void 0,l=0;l<n.markedSpans.length;++l)if((o=n.markedSpans[l]).marker.collapsed&&!o.marker.widgetNode&&o.from==r.to&&(null==o.to||o.to!=r.from)&&(o.marker.inclusiveLeft||r.marker.inclusiveRight)&&e(t,n,o))return!0}(e,t,r))return!0}}function Gt(e){for(var t=0,n=(e=It(e)).parent,r=0;r<n.lines.length;++r){var i=n.lines[r];if(i==e)break;t+=i.height}for(var o=n.parent;o;o=(n=o).parent)for(var l=0;l<o.children.length;++l){var s=o.children[l];if(s==n)break;t+=s.height}return t}function Ut(e){if(0==e.height)return 0;for(var t,n=e.text.length,r=e;t=Ft(r);){var i=t.find(0,!0),r=i.from.line;n+=i.from.ch-i.to.ch}for(r=e;t=Pt(r);){var o=t.find(0,!0);n-=r.text.length-o.from.ch,n+=(r=o.to.line).text.length-o.to.ch}return n}function Vt(e){var n=e.display,e=e.doc;n.maxLine=Ye(e,e.first),n.maxLineLength=Ut(n.maxLine),n.maxLineChanged=!0,e.iter(function(e){var t=Ut(e);t>n.maxLineLength&&(n.maxLineLength=t,n.maxLine=e)})}var Kt=function(e,t,n){this.text=e,Ot(this,t),this.height=n?n(this):1};Kt.prototype.lineNo=function(){return Ze(this)},Se(Kt);var jt={},Xt={};function Yt(e,t){if(!e||/^\s*$/.test(e))return null;t=t.addModeClass?Xt:jt;return t[e]||(t[e]=e.replace(/\S+/g,"cm-$&"))}function $t(e,t){var n=T("span",null,null,f?"padding-right: .1px":null),r={pre:T("pre",[n],"CodeMirror-line"),content:n,col:0,pos:0,cm:e,trailingSpace:!1,splitSpaces:e.getOption("lineWrapping")};t.measure={};for(var i=0;i<=(t.rest?t.rest.length:0);i++){var o=i?t.rest[i-1]:t.line,l=void 0;r.pos=0,r.addToken=qt,function(e){if(null!=De)return De;var t=k(e,document.createTextNode("AخA")),n=W(t,0,1).getBoundingClientRect(),t=W(t,1,2).getBoundingClientRect();return L(e),n&&n.left!=n.right&&(De=t.right-n.right<3)}(e.display.measure)&&(l=pe(o,e.doc.direction))&&(r.addToken=function(h,d){return function(e,t,n,r,i,o,l){n=n?n+" cm-force-border":"cm-force-border";for(var s=e.pos,a=s+t.length;;){for(var u=void 0,c=0;c<d.length&&!((u=d[c]).to>s&&u.from<=s);c++);if(u.to>=a)return h(e,t,n,r,i,o,l);h(e,t.slice(0,u.to-s),n,r,null,o,l),r=null,t=t.slice(u.to-s),s=u.to}}}(r.addToken,l)),r.map=[],function(e,t,n){var r=e.markedSpans,i=e.text,o=0;if(r)for(var l,s,a,u,c,h,d,f=i.length,p=0,g=1,m="",v=0;;){if(v==p){a=u=c=s="",h=d=null,v=1/0;for(var y=[],b=void 0,w=0;w<r.length;++w){var x=r[w],C=x.marker;if("bookmark"==C.type&&x.from==p&&C.widgetNode)y.push(C);else if(x.from<=p&&(null==x.to||x.to>p||C.collapsed&&x.to==p&&x.from==p)){if(null!=x.to&&x.to!=p&&v>x.to&&(v=x.to,u=""),C.className&&(a+=" "+C.className),C.css&&(s=(s?s+";":"")+C.css),C.startStyle&&x.from==p&&(c+=" "+C.startStyle),C.endStyle&&x.to==v&&(b=b||[]).push(C.endStyle,x.to),C.title&&((d=d||{}).title=C.title),C.attributes)for(var S in C.attributes)(d=d||{})[S]=C.attributes[S];C.collapsed&&(!h||Wt(h.marker,C)<0)&&(h=x)}else x.from>p&&v>x.from&&(v=x.from)}if(b)for(var L=0;L<b.length;L+=2)b[L+1]==v&&(u+=" "+b[L]);if(!h||h.from==p)for(var k=0;k<y.length;++k)Zt(t,0,y[k]);if(h&&(h.from||0)==p){if(Zt(t,(null==h.to?f+1:h.to)-p,h.marker,null==h.from),null==h.to)return;h.to==p&&(h=!1)}}if(f<=p)break;for(var T=Math.min(f,v);;){if(m){var M,N=p+m.length;if(h||(M=T<N?m.slice(0,T-p):m,t.addToken(t,M,l?l+a:a,c,p+M.length==v?u:"",s,d)),T<=N){m=m.slice(T-p),p=T;break}p=N,c=""}m=i.slice(o,o=n[g++]),l=Yt(n[g++],t.cm.options)}}else for(var O=1;O<n.length;O+=2)t.addToken(t,i.slice(o,o=n[O]),Yt(n[O+1],t.cm.options))}(o,r,ft(e,o,t!=e.display.externalMeasured&&Ze(o))),o.styleClasses&&(o.styleClasses.bgClass&&(r.bgClass=D(o.styleClasses.bgClass,r.bgClass||"")),o.styleClasses.textClass&&(r.textClass=D(o.styleClasses.textClass,r.textClass||""))),0==r.map.length&&r.map.push(0,0,r.content.appendChild(function(e){null==Ae&&(t=M("span","​"),k(e,M("span",[t,document.createTextNode("x")])),0!=e.firstChild.offsetHeight&&(Ae=t.offsetWidth<=1&&2<t.offsetHeight&&!(w&&v<8)));var t=Ae?M("span","​"):M("span"," ",null,"display: inline-block; width: 1px; margin-right: -1px");return t.setAttribute("cm-text",""),t}(e.display.measure))),0==i?(t.measure.map=r.map,t.measure.cache={}):((t.measure.maps||(t.measure.maps=[])).push(r.map),(t.measure.caches||(t.measure.caches=[])).push({}))}return f&&(n=r.content.lastChild,(/\bcm-tab\b/.test(n.className)||n.querySelector&&n.querySelector(".cm-tab"))&&(r.content.className="cm-tab-wrap-hack")),be(e,"renderLine",e,t.line,r.pre),r.pre.className&&(r.textClass=D(r.pre.className,r.textClass||"")),r}function _t(e){var t=M("span","•","cm-invalidchar");return t.title="\\u"+e.charCodeAt(0).toString(16),t.setAttribute("aria-label",t.title),t}function qt(e,t,n,r,i,o,l){if(t){var s=e.splitSpaces?function(e,t){if(1<e.length&&!/  /.test(e))return e;for(var n=t,r="",i=0;i<e.length;i++){var o=e.charAt(i);" "!=o||!n||i!=e.length-1&&32!=e.charCodeAt(i+1)||(o=" "),r+=o,n=" "==o}return r}(t,e.trailingSpace):t,a=e.cm.state.specialChars,u=!1;if(a.test(t))for(var c=document.createDocumentFragment(),h=0;;){a.lastIndex=h;var d=a.exec(t),f=d?d.index-h:t.length-h;if(f&&(p=document.createTextNode(s.slice(h,h+f)),w&&v<9?c.appendChild(M("span",[p])):c.appendChild(p),e.map.push(e.pos,e.pos+f,p),e.col+=f,e.pos+=f),!d)break;h+=1+f;var p=void 0;"\t"==d[0]?(f=(f=e.cm.options.tabSize)-e.col%f,(p=c.appendChild(M("span",X(f),"cm-tab"))).setAttribute("role","presentation"),p.setAttribute("cm-text","\t"),e.col+=f):("\r"==d[0]||"\n"==d[0]?(p=c.appendChild(M("span","\r"==d[0]?"␍":"␤","cm-invalidchar"))).setAttribute("cm-text",d[0]):((p=e.cm.options.specialCharPlaceholder(d[0])).setAttribute("cm-text",d[0]),w&&v<9?c.appendChild(M("span",[p])):c.appendChild(p)),e.col+=1),e.map.push(e.pos,e.pos+1,p),e.pos++}else e.col+=t.length,c=document.createTextNode(s),e.map.push(e.pos,e.pos+t.length,c),w&&v<9&&(u=!0),e.pos+=t.length;if(e.trailingSpace=32==s.charCodeAt(t.length-1),n||r||i||u||o||l){n=n||"";r&&(n+=r),i&&(n+=i);var g=M("span",[c],n,o);if(l)for(var m in l)l.hasOwnProperty(m)&&"style"!=m&&"class"!=m&&g.setAttribute(m,l[m]);return e.content.appendChild(g)}e.content.appendChild(c)}}function Zt(e,t,n,r){var i=!r&&n.widgetNode;i&&e.map.push(e.pos,e.pos+t,i),!r&&e.cm.display.input.needsContentAttribute&&(i=i||e.content.appendChild(document.createElement("span"))).setAttribute("cm-marker",n.id),i&&(e.cm.display.input.setUneditable(i),e.content.appendChild(i)),e.pos+=t,e.trailingSpace=!1}function Qt(e,t,n){this.line=t,this.rest=function(e){for(var t,n;t=Pt(e);)e=t.find(1,!0).line,(n=n||[]).push(e);return n}(t),this.size=this.rest?Ze(Y(this.rest))-n+1:1,this.node=this.text=null,this.hidden=Bt(e,t)}function Jt(e,t,n){for(var r=[],i=t;i<n;i=l){var o=new Qt(e.doc,Ye(e.doc,i),i),l=i+o.size;r.push(o)}return r}var en=null;function tn(e,t){e=e.ownsGroup;if(e)try{!function(e){var t=e.delayedCallbacks,n=0;do{for(;n<t.length;n++)t[n].call(null);for(var r=0;r<e.ops.length;r++){var i=e.ops[r];if(i.cursorActivityHandlers)for(;i.cursorActivityCalled<i.cursorActivityHandlers.length;)i.cursorActivityHandlers[i.cursorActivityCalled++].call(null,i.cm)}}while(n<t.length)}(e)}finally{en=null,t(e)}}var nn=null;function rn(e,t){var n=ve(e,t);if(n.length){var r,i=Array.prototype.slice.call(arguments,2);en?r=en.delayedCallbacks:nn?r=nn:(r=nn=[],setTimeout(on,0));for(var o=0;o<n.length;++o)!function(e){r.push(function(){return n[e].apply(null,i)})}(o)}}function on(){var e=nn;nn=null;for(var t=0;t<e.length;++t)e[t]()}function ln(e,t,n,r){for(var i=0;i<t.changes.length;i++){var o=t.changes[i];"text"==o?function(e,t){var n=t.text.className,r=an(e,t);t.text==t.node&&(t.node=r.pre);t.text.parentNode.replaceChild(r.pre,t.text),t.text=r.pre,r.bgClass!=t.bgClass||r.textClass!=t.textClass?(t.bgClass=r.bgClass,t.textClass=r.textClass,un(e,t)):n&&(t.text.className=n)}(e,t):"gutter"==o?cn(e,t,n,r):"class"==o?un(e,t):"widget"==o&&function(e,t,n){t.alignable&&(t.alignable=null);for(var r=C("CodeMirror-linewidget"),i=t.node.firstChild,o=void 0;i;i=o)o=i.nextSibling,r.test(i.className)&&t.node.removeChild(i);hn(e,t,n)}(e,t,r)}t.changes=null}function sn(e){return e.node==e.text&&(e.node=M("div",null,null,"position: relative"),e.text.parentNode&&e.text.parentNode.replaceChild(e.node,e.text),e.node.appendChild(e.text),w&&v<8&&(e.node.style.zIndex=2)),e.node}function an(e,t){var n=e.display.externalMeasured;return n&&n.line==t.line?(e.display.externalMeasured=null,t.measure=n.measure,n.built):$t(e,t)}function un(e,t){var n,r;n=e,(r=(i=t).bgClass?i.bgClass+" "+(i.line.bgClass||""):i.line.bgClass)&&(r+=" CodeMirror-linebackground"),i.background?r?i.background.className=r:(i.background.parentNode.removeChild(i.background),i.background=null):r&&(e=sn(i),i.background=e.insertBefore(M("div",null,r),e.firstChild),n.display.input.setUneditable(i.background)),t.line.wrapClass?sn(t).className=t.line.wrapClass:t.node!=t.text&&(t.node.className="");var i=t.textClass?t.textClass+" "+(t.line.textClass||""):t.line.textClass;t.text.className=i||""}function cn(e,t,n,r){t.gutter&&(t.node.removeChild(t.gutter),t.gutter=null),t.gutterBackground&&(t.node.removeChild(t.gutterBackground),t.gutterBackground=null),t.line.gutterClass&&(o=sn(t),t.gutterBackground=M("div",null,"CodeMirror-gutter-background "+t.line.gutterClass,"left: "+(e.options.fixedGutter?r.fixedPos:-r.gutterTotalWidth)+"px; width: "+r.gutterTotalWidth+"px"),e.display.input.setUneditable(t.gutterBackground),o.insertBefore(t.gutterBackground,t.text));var i=t.line.gutterMarkers;if(e.options.lineNumbers||i){var o=sn(t),l=t.gutter=M("div",null,"CodeMirror-gutter-wrapper","left: "+(e.options.fixedGutter?r.fixedPos:-r.gutterTotalWidth)+"px");if(l.setAttribute("aria-hidden","true"),e.display.input.setUneditable(l),o.insertBefore(l,t.text),t.line.gutterClass&&(l.className+=" "+t.line.gutterClass),!e.options.lineNumbers||i&&i["CodeMirror-linenumbers"]||(t.lineNumber=l.appendChild(M("div",et(e.options,n),"CodeMirror-linenumber CodeMirror-gutter-elt","left: "+r.gutterLeft["CodeMirror-linenumbers"]+"px; width: "+e.display.lineNumInnerWidth+"px"))),i)for(var s=0;s<e.display.gutterSpecs.length;++s){var a=e.display.gutterSpecs[s].className,u=i.hasOwnProperty(a)&&i[a];u&&l.appendChild(M("div",[u],"CodeMirror-gutter-elt","left: "+r.gutterLeft[a]+"px; width: "+r.gutterWidth[a]+"px"))}}}function hn(e,t,n){if(dn(e,t.line,t,n,!0),t.rest)for(var r=0;r<t.rest.length;r++)dn(e,t.rest[r],t,n,!1)}function dn(e,t,n,r,i){if(t.widgets)for(var o=sn(n),l=0,s=t.widgets;l<s.length;++l){var a=s[l],u=M("div",[a.node],"CodeMirror-linewidget"+(a.className?" "+a.className:""));a.handleMouseEvents||u.setAttribute("cm-ignore-events","true"),function(e,t,n,r){e.noHScroll&&((n.alignable||(n.alignable=[])).push(t),n=r.wrapperWidth,t.style.left=r.fixedPos+"px",e.coverGutter||(n-=r.gutterTotalWidth,t.style.paddingLeft=r.gutterTotalWidth+"px"),t.style.width=n+"px");e.coverGutter&&(t.style.zIndex=5,t.style.position="relative",e.noHScroll||(t.style.marginLeft=-r.gutterTotalWidth+"px"))}(a,u,n,r),e.display.input.setUneditable(u),i&&a.above?o.insertBefore(u,n.gutter||n.text):o.appendChild(u),rn(a,"redraw")}}function fn(e){if(null!=e.height)return e.height;var t,n=e.doc.cm;return n?(N(document.body,e.node)||(t="position: relative;",e.coverGutter&&(t+="margin-left: -"+n.display.gutters.offsetWidth+"px;"),e.noHScroll&&(t+="width: "+n.display.wrapper.clientWidth+"px;"),k(n.display.measure,M("div",[e.node],null,t))),e.height=e.node.parentNode.offsetHeight):0}function pn(e,t){for(var n=Ne(t);n!=e.wrapper;n=n.parentNode)if(!n||1==n.nodeType&&"true"==n.getAttribute("cm-ignore-events")||n.parentNode==e.sizer&&n!=e.mover)return 1}function gn(e){return e.lineSpace.offsetTop}function mn(e){return e.mover.offsetHeight-e.lineSpace.offsetHeight}function vn(e){if(e.cachedPaddingH)return e.cachedPaddingH;var t=k(e.measure,M("pre","x","CodeMirror-line-like")),t=window.getComputedStyle?window.getComputedStyle(t):t.currentStyle,t={left:parseInt(t.paddingLeft),right:parseInt(t.paddingRight)};return isNaN(t.left)||isNaN(t.right)||(e.cachedPaddingH=t),t}function yn(e){return z-e.display.nativeBarWidth}function bn(e){return e.display.scroller.clientWidth-yn(e)-e.display.barWidth}function wn(e){return e.display.scroller.clientHeight-yn(e)-e.display.barHeight}function xn(e,t,n){if(e.line==t)return{map:e.measure.map,cache:e.measure.cache};if(e.rest){for(var r=0;r<e.rest.length;r++)if(e.rest[r]==t)return{map:e.measure.maps[r],cache:e.measure.caches[r]};for(var i=0;i<e.rest.length;i++)if(Ze(e.rest[i])>n)return{map:e.measure.maps[i],cache:e.measure.caches[i],before:!0}}}function Cn(e,t,n,r){return kn(e,Ln(e,t),n,r)}function Sn(e,t){if(t>=e.display.viewFrom&&t<e.display.viewTo)return e.display.view[er(e,t)];e=e.display.externalMeasured;return e&&t>=e.lineN&&t<e.lineN+e.size?e:void 0}function Ln(e,t){var n,r,i=Ze(t),o=Sn(e,i);o&&!o.text?o=null:o&&o.changes&&(ln(e,o,i,_n(e)),e.curOp.forceUpdate=!0),o||(n=e,e=Ze(r=It(r=t)),(r=n.display.externalMeasured=new Qt(n.doc,r,e)).lineN=e,e=r.built=$t(n,r),r.text=e.pre,k(n.display.lineMeasure,e.pre),o=r);i=xn(o,t,i);return{line:t,view:o,rect:null,map:i.map,cache:i.cache,before:i.before,hasHeights:!1}}function kn(e,t,n,r,i){var o,l=(n=t.before?-1:n)+(r||"");return t.cache.hasOwnProperty(l)?o=t.cache[l]:(t.rect||(t.rect=t.view.text.getBoundingClientRect()),t.hasHeights||(function(e,t,n){var r=e.options.lineWrapping,e=r&&bn(e);if(!t.measure.heights||r&&t.measure.width!=e){var i=t.measure.heights=[];if(r){t.measure.width=e;for(var o=t.text.firstChild.getClientRects(),l=0;l<o.length-1;l++){var s=o[l],a=o[l+1];2<Math.abs(s.bottom-a.bottom)&&i.push((s.bottom+a.top)/2-n.top)}}i.push(n.bottom-n.top)}}(e,t.view,t.rect),t.hasHeights=!0),(o=function(e,t,n,r){var i,o=Nn(t.map,n,r),l=o.node,s=o.start,a=o.end,u=o.collapse;if(3==l.nodeType){for(var c=0;c<4;c++){for(;s&&ne(t.line.text.charAt(o.coverStart+s));)--s;for(;o.coverStart+a<o.coverEnd&&ne(t.line.text.charAt(o.coverStart+a));)++a;if((i=w&&v<9&&0==s&&a==o.coverEnd-o.coverStart?l.parentNode.getBoundingClientRect():function(e,t){var n=Mn;if("left"==t)for(var r=0;r<e.length&&(n=e[r]).left==n.right;r++);else for(var i=e.length-1;0<=i&&(n=e[i]).left==n.right;i--);return n}(W(l,s,a).getClientRects(),r)).left||i.right||0==s)break;a=s,s-=1,u="right"}w&&v<11&&(i=function(e,t){if(!window.screen||null==screen.logicalXDPI||screen.logicalXDPI==screen.deviceXDPI||!function(e){if(null!=Ee)return Ee;var e=(t=k(e,M("span","x"))).getBoundingClientRect(),t=W(t,0,1).getBoundingClientRect();return Ee=1<Math.abs(e.left-t.left)}(e))return t;var n=screen.logicalXDPI/screen.deviceXDPI,e=screen.logicalYDPI/screen.deviceYDPI;return{left:t.left*n,right:t.right*n,top:t.top*e,bottom:t.bottom*e}}(e.display.measure,i))}else 0<s&&(u=r="right"),i=e.options.lineWrapping&&1<(g=l.getClientRects()).length?g["right"==r?g.length-1:0]:l.getBoundingClientRect();!(w&&v<9)||s||i&&(i.left||i.right)||(m=l.parentNode.getClientRects()[0],i=m?{left:m.left,right:m.left+$n(e.display),top:m.top,bottom:m.bottom}:Mn);for(var h=i.top-t.rect.top,n=i.bottom-t.rect.top,d=(h+n)/2,f=t.view.measure.heights,p=0;p<f.length-1&&!(d<f[p]);p++);var g=p?f[p-1]:0,m=f[p],m={left:("right"==u?i.right:i.left)-t.rect.left,right:("left"==u?i.left:i.right)-t.rect.left,top:g,bottom:m};i.left||i.right||(m.bogus=!0);e.options.singleCursorHeightPerLine||(m.rtop=h,m.rbottom=n);return m}(e,t,n,r)).bogus||(t.cache[l]=o)),{left:o.left,right:o.right,top:i?o.rtop:o.top,bottom:i?o.rbottom:o.bottom}}var Tn,Mn={left:0,right:0,top:0,bottom:0};function Nn(e,t,n){for(var r,i,o,l,s,a,u=0;u<e.length;u+=3)if(s=e[u],a=e[u+1],t<s?(i=0,o=1,l="left"):t<a?o=(i=t-s)+1:(u==e.length-3||t==a&&e[u+3]>t)&&(i=(o=a-s)-1,a<=t&&(l="right")),null!=i){if(r=e[u+2],s==a&&n==(r.insertLeft?"left":"right")&&(l=n),"left"==n&&0==i)for(;u&&e[u-2]==e[u-3]&&e[u-1].insertLeft;)r=e[2+(u-=3)],l="left";if("right"==n&&i==a-s)for(;u<e.length-3&&e[u+3]==e[u+4]&&!e[u+5].insertLeft;)r=e[(u+=3)+2],l="right";break}return{node:r,start:i,end:o,collapse:l,coverStart:s,coverEnd:a}}function On(e){if(e.measure&&(e.measure.cache={},e.measure.heights=null,e.rest))for(var t=0;t<e.rest.length;t++)e.measure.caches[t]={}}function An(e){e.display.externalMeasure=null,L(e.display.lineMeasure);for(var t=0;t<e.display.view.length;t++)On(e.display.view[t])}function Dn(e){An(e),e.display.cachedCharWidth=e.display.cachedTextHeight=e.display.cachedPaddingH=null,e.options.lineWrapping||(e.display.maxLineChanged=!0),e.display.lineNumChars=null}function Wn(){return o&&a?-(document.body.getBoundingClientRect().left-parseInt(getComputedStyle(document.body).marginLeft)):window.pageXOffset||(document.documentElement||document.body).scrollLeft}function Hn(){return o&&a?-(document.body.getBoundingClientRect().top-parseInt(getComputedStyle(document.body).marginTop)):window.pageYOffset||(document.documentElement||document.body).scrollTop}function Fn(e){var t=It(e).widgets,n=0;if(t)for(var r=0;r<t.length;++r)t[r].above&&(n+=fn(t[r]));return n}function Pn(e,t,n,r,i){if(i||(i=Fn(t),n.top+=i,n.bottom+=i),"line"==r)return n;r=r||"local";t=Gt(t);return"local"==r?t+=gn(e.display):t-=e.display.viewOffset,"page"!=r&&"window"!=r||(t+=(e=e.display.lineSpace.getBoundingClientRect()).top+("window"==r?0:Hn()),r=e.left+("window"==r?0:Wn()),n.left+=r,n.right+=r),n.top+=t,n.bottom+=t,n}function En(e,t,n){if("div"==n)return t;var r=t.left,t=t.top;"page"==n?(r-=Wn(),t-=Hn()):"local"!=n&&n||(r+=(n=e.display.sizer.getBoundingClientRect()).left,t+=n.top);e=e.display.lineSpace.getBoundingClientRect();return{left:r-e.left,top:t-e.top}}function In(e,t,n,r,i){return Pn(e,r=r||Ye(e.doc,t.line),Cn(e,r,t.ch,i),n)}function Rn(n,e,r,i,o,l){function s(e,t){e=kn(n,o,e,t?"right":"left",l);return t?e.left=e.right:e.right=e.left,Pn(n,i,e,r)}i=i||Ye(n.doc,e.line),o=o||Ln(n,i);var a=pe(i,n.doc.direction),t=e.ch,u=e.sticky;if(t>=i.text.length?(t=i.text.length,u="before"):t<=0&&(t=0,u="after"),!a)return s("before"==u?t-1:t,"before"==u);function c(e,t,n){return s(n?e-1:e,1==a[t].level!=n)}var h=le(a,t,u),e=oe,h=c(t,h,"before"==u);return null!=e&&(h.other=c(t,e,"before"!=u)),h}function zn(e,t){var n=0;t=at(e.doc,t),e.options.lineWrapping||(n=$n(e.display)*t.ch);t=Ye(e.doc,t.line),e=Gt(t)+gn(e.display);return{left:n,right:n,top:e,bottom:e+t.height}}function Bn(e,t,n,r,i){n=tt(e,t,n);return n.xRel=i,r&&(n.outside=r),n}function Gn(e,t,n){var r=e.doc;if((n+=e.display.viewOffset)<0)return Bn(r.first,0,null,-1,-1);var i=Qe(r,n),o=r.first+r.size-1;if(o<i)return Bn(r.first+r.size-1,Ye(r,o).text.length,null,1,1);t<0&&(t=0);for(var l=Ye(r,i);;){var s=function(n,e,t,r,i){i-=Gt(e);var o=Ln(n,e),l=Fn(e),s=0,a=e.text.length,u=!0,c=pe(e,n.doc.direction);c&&(f=(n.options.lineWrapping?Xn:jn)(n,e,t,o,c,r,i),u=1!=f.level,s=u?f.from:f.to-1,a=u?f.to:f.from-1);var h=null,d=null,c=ie(function(e){var t=kn(n,o,e);return t.top+=l,t.bottom+=l,Kn(t,r,i,!1)&&(t.top<=i&&t.left<=r&&(h=e,d=t),1)},s,a),f=!1;{var p,g;d?(p=r-d.left<d.right-r,c=h+((g=p==u)?0:1),g=g?"after":"before",p=p?d.left:d.right):(u||c!=a&&c!=s||c++,g=0==c||c!=e.text.length&&kn(n,o,c-(u?1:0)).bottom+l<=i==u?"after":"before",u=Rn(n,tt(t,c,g),"line",e,o),p=u.left,f=i<u.top?-1:i>=u.bottom?1:0)}return c=re(e.text,c,1),Bn(t,c,g,f,r-p)}(e,l,i,t,n),a=function(e,t){var n,r=St&&e.markedSpans;if(r)for(var i=0;i<r.length;++i){var o=r[i];o.marker.collapsed&&(null==o.from||o.from<t)&&(null==o.to||o.to>t)&&(!n||Wt(n,o.marker)<0)&&(n=o.marker)}return n}(l,s.ch+(0<s.xRel||0<s.outside?1:0));if(!a)return s;a=a.find(1);if(a.line==i)return a;l=Ye(r,i=a.line)}}function Un(t,e,n,r){r-=Fn(e);var i=e.text.length,e=ie(function(e){return kn(t,n,e-1).bottom<=r},i,0);return{begin:e,end:i=ie(function(e){return kn(t,n,e).top>r},e,i)}}function Vn(e,t,n,r){return Un(e,t,n=n||Ln(e,t),Pn(e,t,kn(e,n,r),"line").top)}function Kn(e,t,n,r){return!(e.bottom<=n)&&(e.top>n||(r?e.left:e.right)>t)}function jn(n,r,i,o,l,s,a){var e,t=ie(function(e){var t=l[e],e=1!=t.level;return Kn(Rn(n,tt(i,e?t.to:t.from,e?"before":"after"),"line",r,o),s,a,!0)},0,l.length-1),u=l[t];return 0<t&&(e=1!=u.level,Kn(e=Rn(n,tt(i,e?u.from:u.to,e?"after":"before"),"line",r,o),s,a,!0)&&e.top>a&&(u=l[t-1])),u}function Xn(e,t,n,r,i,o,l){var l=Un(e,t,r,l),s=l.begin,a=l.end;/\s/.test(t.text.charAt(a-1))&&a--;for(var u=null,c=null,h=0;h<i.length;h++){var d,f=i[h];f.from>=a||f.to<=s||(d=(d=kn(e,r,1!=f.level?Math.min(a,f.to)-1:Math.max(s,f.from)).right)<o?o-d+1e9:d-o,(!u||d<c)&&(u=f,c=d))}return u=(u=(u=u||i[i.length-1]).from<s?{from:s,to:u.to,level:u.level}:u).to>a?{from:u.from,to:a,level:u.level}:u}function Yn(e){if(null!=e.cachedTextHeight)return e.cachedTextHeight;if(null==Tn){Tn=M("pre",null,"CodeMirror-line-like");for(var t=0;t<49;++t)Tn.appendChild(document.createTextNode("x")),Tn.appendChild(M("br"));Tn.appendChild(document.createTextNode("x"))}k(e.measure,Tn);var n=Tn.offsetHeight/50;return 3<n&&(e.cachedTextHeight=n),L(e.measure),n||1}function $n(e){if(null!=e.cachedCharWidth)return e.cachedCharWidth;var t=M("span","xxxxxxxxxx"),n=M("pre",[t],"CodeMirror-line-like");k(e.measure,n);t=t.getBoundingClientRect(),t=(t.right-t.left)/10;return 2<t&&(e.cachedCharWidth=t),t||10}function _n(e){for(var t=e.display,n={},r={},i=t.gutters.clientLeft,o=t.gutters.firstChild,l=0;o;o=o.nextSibling,++l){var s=e.display.gutterSpecs[l].className;n[s]=o.offsetLeft+o.clientLeft+i,r[s]=o.clientWidth}return{fixedPos:qn(t),gutterTotalWidth:t.gutters.offsetWidth,gutterLeft:n,gutterWidth:r,wrapperWidth:t.wrapper.clientWidth}}function qn(e){return e.scroller.getBoundingClientRect().left-e.sizer.getBoundingClientRect().left}function Zn(r){var i=Yn(r.display),o=r.options.lineWrapping,l=o&&Math.max(5,r.display.scroller.clientWidth/$n(r.display)-3);return function(e){if(Bt(r.doc,e))return 0;var t=0;if(e.widgets)for(var n=0;n<e.widgets.length;n++)e.widgets[n].height&&(t+=e.widgets[n].height);return o?t+(Math.ceil(e.text.length/l)||1)*i:t+i}}function Qn(e){var t=e.doc,n=Zn(e);t.iter(function(e){var t=n(e);t!=e.height&&qe(e,t)})}function Jn(e,t,n,r){var i=e.display;if(!n&&"true"==Ne(t).getAttribute("cm-not-content"))return null;var o,i=i.lineSpace.getBoundingClientRect();try{o=t.clientX-i.left,s=t.clientY-i.top}catch(e){return null}var l,s=Gn(e,o,s);return r&&0<s.xRel&&(l=Ye(e.doc,s.line).text).length==s.ch&&(l=E(l,l.length,e.options.tabSize)-l.length,s=tt(s.line,Math.max(0,Math.round((o-vn(e.display).left)/$n(e.display))-l))),s}function er(e,t){if(t>=e.display.viewTo)return null;if((t-=e.display.viewFrom)<0)return null;for(var n=e.display.view,r=0;r<n.length;r++)if((t-=n[r].size)<0)return r}function tr(e,t,n,r){null==t&&(t=e.doc.first),null==n&&(n=e.doc.first+e.doc.size);var i,o,l=e.display;(r=r||0)&&n<l.viewTo&&(null==l.updateLineNumbers||l.updateLineNumbers>t)&&(l.updateLineNumbers=t),e.curOp.viewChanged=!0,t>=l.viewTo?St&&Rt(e.doc,t)<l.viewTo&&rr(e):n<=l.viewFrom?St&&zt(e.doc,n+r)>l.viewFrom?rr(e):(l.viewFrom+=r,l.viewTo+=r):t<=l.viewFrom&&n>=l.viewTo?rr(e):t<=l.viewFrom?(i=ir(e,n,n+r,1))?(l.view=l.view.slice(i.index),l.viewFrom=i.lineN,l.viewTo+=r):rr(e):n>=l.viewTo?(o=ir(e,t,t,-1))?(l.view=l.view.slice(0,o.index),l.viewTo=o.lineN):rr(e):(i=ir(e,t,t,-1),o=ir(e,n,n+r,1),i&&o?(l.view=l.view.slice(0,i.index).concat(Jt(e,i.lineN,o.lineN)).concat(l.view.slice(o.index)),l.viewTo+=r):rr(e));e=l.externalMeasured;e&&(n<e.lineN?e.lineN+=r:t<e.lineN+e.size&&(l.externalMeasured=null))}function nr(e,t,n){e.curOp.viewChanged=!0;var r=e.display,i=e.display.externalMeasured;i&&t>=i.lineN&&t<i.lineN+i.size&&(r.externalMeasured=null),t<r.viewFrom||t>=r.viewTo||(null==(t=r.view[er(e,t)]).node||-1==R(t=t.changes||(t.changes=[]),n)&&t.push(n))}function rr(e){e.display.viewFrom=e.display.viewTo=e.doc.first,e.display.view=[],e.display.viewOffset=0}function ir(e,t,n,r){var i,o=er(e,t),l=e.display.view;if(!St||n==e.doc.first+e.doc.size)return{index:o,lineN:n};for(var s=e.display.viewFrom,a=0;a<o;a++)s+=l[a].size;if(s!=t){if(0<r){if(o==l.length-1)return null;i=s+l[o].size-t,o++}else i=s-t;t+=i,n+=i}for(;Rt(e.doc,n)!=n;){if(o==(r<0?0:l.length-1))return null;n+=r*l[o-(r<0?1:0)].size,o+=r}return{index:o,lineN:n}}function or(e){for(var t=e.display.view,n=0,r=0;r<t.length;r++){var i=t[r];i.hidden||i.node&&!i.changes||++n}return n}function lr(e){e.display.input.showSelection(e.display.input.prepareSelection())}function sr(e,t){void 0===t&&(t=!0);var n=e.doc,r={},i=r.cursors=document.createDocumentFragment(),o=r.selection=document.createDocumentFragment(),l=e.options.$customCursor;l&&(t=!0);for(var s,a,u,c=0;c<n.sel.ranges.length;c++)!t&&c==n.sel.primIndex||((s=n.sel.ranges[c]).from().line>=e.display.viewTo||s.to().line<e.display.viewFrom||(a=s.empty(),l?(u=l(e,s))&&ar(e,u,i):(a||e.options.showCursorWhenSelecting)&&ar(e,s.head,i),a||function(i,e,t){var n=i.display,o=i.doc,l=document.createDocumentFragment(),r=vn(i.display),S=r.left,L=Math.max(n.sizerWidth,bn(i)-n.sizer.offsetLeft)-r.right,k="ltr"==o.direction;function T(e,t,n,r){t<0&&(t=0),t=Math.round(t),r=Math.round(r),l.appendChild(M("div",null,"CodeMirror-selected","position: absolute; left: "+e+"px;\n                             top: "+t+"px; width: "+(null==n?L-e:n)+"px;\n                             height: "+(r-t)+"px"))}function s(n,g,m){var v,y,r=Ye(o,n),b=r.text.length;function w(e,t){return In(i,tt(n,e),"div",r,t)}function x(e,t,n){e=Vn(i,r,null,e),t="ltr"==t==("after"==n)?"left":"right";return w("after"==n?e.begin:e.end-(/\s/.test(r.text.charAt(e.end-1))?2:1),t)[t]}var C=pe(r,o.direction);return function(e,t,n,r){if(!e)return r(t,n,"ltr",0);for(var i=!1,o=0;o<e.length;++o){var l=e[o];(l.from<n&&l.to>t||t==n&&l.to==t)&&(r(Math.max(l.from,t),Math.min(l.to,n),1==l.level?"rtl":"ltr",o),i=!0)}i||r(t,n,"ltr")}(C,g||0,null==m?b:m,function(e,t,n,r){var i,o,l,s,a="ltr"==n,u=w(e,a?"left":"right"),c=w(t-1,a?"right":"left"),h=null==g&&0==e,d=null==m&&t==b,f=0==r,p=!C||r==C.length-1;c.top-u.top<=3?(i=(k?h:d)&&f?S:(a?u:c).left,r=(k?d:h)&&p?L:(a?c:u).right,T(i,u.top,r-i,u.bottom)):(n=a?(o=k&&h&&f?S:u.left,l=k?L:x(e,n,"before"),s=k?S:x(t,n,"after"),k&&d&&p?L:c.right):(o=k?x(e,n,"before"):S,l=!k&&h&&f?L:u.right,s=!k&&d&&p?S:c.left,k?x(t,n,"after"):L),T(o,u.top,l-o,u.bottom),u.bottom<c.top&&T(S,u.bottom,null,c.top),T(s,c.top,n-s,c.bottom)),(!v||ur(u,v)<0)&&(v=u),ur(c,v)<0&&(v=c),(!y||ur(u,y)<0)&&(y=u),ur(c,y)<0&&(y=c)}),{start:v,end:y}}var a=e.from(),n=e.to();a.line==n.line?s(a.line,a.ch,n.ch):(r=Ye(o,a.line),e=Ye(o,n.line),e=It(r)==It(e),r=s(a.line,a.ch,e?r.text.length+1:null).end,n=s(n.line,e?0:null,n.ch).start,e&&(r.top<n.top-2?(T(r.right,r.top,null,r.bottom),T(S,n.top,n.left,n.bottom)):T(r.right,r.top,n.left-r.right,r.bottom)),r.bottom<n.top&&T(S,r.bottom,null,n.top));t.appendChild(l)}(e,s,o)));return r}function ar(e,t,n){var r=Rn(e,t,"div",null,null,!e.options.singleCursorHeightPerLine),i=n.appendChild(M("div"," ","CodeMirror-cursor"));i.style.left=r.left+"px",i.style.top=r.top+"px",i.style.height=Math.max(0,r.bottom-r.top)*e.options.cursorHeight+"px",/\bcm-fat-cursor\b/.test(e.getWrapperElement().className)&&(t=(t=In(e,t,"div",null,null)).right-t.left,i.style.width=(0<t?t:e.defaultCharWidth())+"px"),r.other&&((n=n.appendChild(M("div"," ","CodeMirror-cursor CodeMirror-secondarycursor"))).style.display="",n.style.left=r.other.left+"px",n.style.top=r.other.top+"px",n.style.height=.85*(r.other.bottom-r.other.top)+"px")}function ur(e,t){return e.top-t.top||e.left-t.left}function cr(e){var t,n;e.state.focused&&(t=e.display,clearInterval(t.blinker),n=!0,t.cursorDiv.style.visibility="",0<e.options.cursorBlinkRate?t.blinker=setInterval(function(){e.hasFocus()||pr(e),t.cursorDiv.style.visibility=(n=!n)?"":"hidden"},e.options.cursorBlinkRate):e.options.cursorBlinkRate<0&&(t.cursorDiv.style.visibility="hidden"))}function hr(e){e.hasFocus()||(e.display.input.focus(),e.state.focused||fr(e))}function dr(e){e.state.delayingBlurEvent=!0,setTimeout(function(){e.state.delayingBlurEvent&&(e.state.delayingBlurEvent=!1,e.state.focused&&pr(e))},100)}function fr(e,t){e.state.delayingBlurEvent&&!e.state.draggingText&&(e.state.delayingBlurEvent=!1),"nocursor"!=e.options.readOnly&&(e.state.focused||(be(e,"focus",e,t),e.state.focused=!0,A(e.display.wrapper,"CodeMirror-focused"),e.curOp||e.display.selForContextMenu==e.doc.sel||(e.display.input.reset(),f&&setTimeout(function(){return e.display.input.reset(!0)},20)),e.display.input.receivedFocus()),cr(e))}function pr(e,t){e.state.delayingBlurEvent||(e.state.focused&&(be(e,"blur",e,t),e.state.focused=!1,S(e.display.wrapper,"CodeMirror-focused")),clearInterval(e.display.blinker),setTimeout(function(){e.state.focused||(e.display.shift=!1)},150))}function gr(e){for(var t=e.display,n=t.lineDiv.offsetTop,r=Math.max(0,t.scroller.getBoundingClientRect().top),i=t.lineDiv.getBoundingClientRect().top,o=0,l=0;l<t.view.length;l++){var s,a=t.view[l],u=e.options.lineWrapping,c=void 0,h=0;if(!a.hidden){i+=a.line.height,w&&v<8?(c=(s=a.node.offsetTop+a.node.offsetHeight)-n,n=s):(c=(d=a.node.getBoundingClientRect()).bottom-d.top,!u&&a.text.firstChild&&(h=a.text.firstChild.getBoundingClientRect().right-d.left-1));var d=a.line.height-c;if((.005<d||d<-.005)&&(i<r&&(o-=d),qe(a.line,c),mr(a.line),a.rest))for(var f=0;f<a.rest.length;f++)mr(a.rest[f]);h>e.display.sizerWidth&&((h=Math.ceil(h/$n(e.display)))>e.display.maxLineLength&&(e.display.maxLineLength=h,e.display.maxLine=a.line,e.display.maxLineChanged=!0))}}2<Math.abs(o)&&(t.scroller.scrollTop+=o)}function mr(e){if(e.widgets)for(var t=0;t<e.widgets.length;++t){var n=e.widgets[t],r=n.node.parentNode;r&&(n.height=r.offsetHeight)}}function vr(e,t,n){var r=n&&null!=n.top?Math.max(0,n.top):e.scroller.scrollTop,r=Math.floor(r-gn(e)),i=n&&null!=n.bottom?n.bottom:r+e.wrapper.clientHeight,o=Qe(t,r),r=Qe(t,i);return n&&n.ensure&&(i=n.ensure.from.line,n=n.ensure.to.line,i<o?r=Qe(t,Gt(Ye(t,o=i))+e.wrapper.clientHeight):Math.min(n,t.lastLine())>=r&&(o=Qe(t,Gt(Ye(t,n))-e.wrapper.clientHeight),r=n)),{from:o,to:Math.max(r,o+1)}}function yr(e,t){var n=e.display,r=Yn(e.display);t.top<0&&(t.top=0);var i=(e.curOp&&null!=e.curOp.scrollTop?e.curOp:n.scroller).scrollTop,o=wn(e),l={};t.bottom-t.top>o&&(t.bottom=t.top+o);var s=e.doc.height+mn(n),a=t.top<r,r=t.bottom>s-r;t.top<i?l.scrollTop=a?0:t.top:t.bottom>i+o&&((u=Math.min(t.top,(r?s:t.bottom)-o))!=i&&(l.scrollTop=u));var i=e.options.fixedGutter?0:n.gutters.offsetWidth,u=e.curOp&&null!=e.curOp.scrollLeft?e.curOp.scrollLeft:n.scroller.scrollLeft-i,e=bn(e)-n.gutters.offsetWidth,n=t.right-t.left>e;return n&&(t.right=t.left+e),t.left<10?l.scrollLeft=0:t.left<u?l.scrollLeft=Math.max(0,t.left+i-(n?0:10)):t.right>e+u-3&&(l.scrollLeft=t.right+(n?0:10)-e),l}function br(e,t){null!=t&&(Cr(e),e.curOp.scrollTop=(null==e.curOp.scrollTop?e.doc:e.curOp).scrollTop+t)}function wr(e){Cr(e);var t=e.getCursor();e.curOp.scrollToPos={from:t,to:t,margin:e.options.cursorScrollMargin}}function xr(e,t,n){null==t&&null==n||Cr(e),null!=t&&(e.curOp.scrollLeft=t),null!=n&&(e.curOp.scrollTop=n)}function Cr(e){var t=e.curOp.scrollToPos;t&&(e.curOp.scrollToPos=null,Sr(e,zn(e,t.from),zn(e,t.to),t.margin))}function Sr(e,t,n,r){r=yr(e,{left:Math.min(t.left,n.left),top:Math.min(t.top,n.top)-r,right:Math.max(t.right,n.right),bottom:Math.max(t.bottom,n.bottom)+r});xr(e,r.scrollLeft,r.scrollTop)}function Lr(e,t){Math.abs(e.doc.scrollTop-t)<2||(d||Kr(e,{top:t}),kr(e,t,!0),d&&Kr(e),zr(e,100))}function kr(e,t,n){t=Math.max(0,Math.min(e.display.scroller.scrollHeight-e.display.scroller.clientHeight,t)),e.display.scroller.scrollTop==t&&!n||(e.doc.scrollTop=t,e.display.scrollbars.setScrollTop(t),e.display.scroller.scrollTop!=t&&(e.display.scroller.scrollTop=t))}function Tr(e,t,n,r){t=Math.max(0,Math.min(t,e.display.scroller.scrollWidth-e.display.scroller.clientWidth)),(n?t==e.doc.scrollLeft:Math.abs(e.doc.scrollLeft-t)<2)&&!r||(e.doc.scrollLeft=t,Yr(e),e.display.scroller.scrollLeft!=t&&(e.display.scroller.scrollLeft=t),e.display.scrollbars.setScrollLeft(t))}function Mr(e){var t=e.display,n=t.gutters.offsetWidth,r=Math.round(e.doc.height+mn(e.display));return{clientHeight:t.scroller.clientHeight,viewHeight:t.wrapper.clientHeight,scrollWidth:t.scroller.scrollWidth,clientWidth:t.scroller.clientWidth,viewWidth:t.wrapper.clientWidth,barLeft:e.options.fixedGutter?n:0,docHeight:r,scrollHeight:r+yn(e)+t.barHeight,nativeBarWidth:t.nativeBarWidth,gutterWidth:n}}e=function(e,t,n){this.cm=n;var r=this.vert=M("div",[M("div",null,null,"min-width: 1px")],"CodeMirror-vscrollbar"),i=this.horiz=M("div",[M("div",null,null,"height: 100%; min-height: 1px")],"CodeMirror-hscrollbar");r.tabIndex=i.tabIndex=-1,e(r),e(i),me(r,"scroll",function(){r.clientHeight&&t(r.scrollTop,"vertical")}),me(i,"scroll",function(){i.clientWidth&&t(i.scrollLeft,"horizontal")}),this.checkedZeroWidth=!1,w&&v<8&&(this.horiz.style.minHeight=this.vert.style.minWidth="18px")};e.prototype.update=function(e){var t,n=e.scrollWidth>e.clientWidth+1,r=e.scrollHeight>e.clientHeight+1,i=e.nativeBarWidth;return r?(this.vert.style.display="block",this.vert.style.bottom=n?i+"px":"0",t=e.viewHeight-(n?i:0),this.vert.firstChild.style.height=Math.max(0,e.scrollHeight-e.clientHeight+t)+"px"):(this.vert.scrollTop=0,this.vert.style.display="",this.vert.firstChild.style.height="0"),n?(this.horiz.style.display="block",this.horiz.style.right=r?i+"px":"0",this.horiz.style.left=e.barLeft+"px",t=e.viewWidth-e.barLeft-(r?i:0),this.horiz.firstChild.style.width=Math.max(0,e.scrollWidth-e.clientWidth+t)+"px"):(this.horiz.style.display="",this.horiz.firstChild.style.width="0"),!this.checkedZeroWidth&&0<e.clientHeight&&(0==i&&this.zeroWidthHack(),this.checkedZeroWidth=!0),{right:r?i:0,bottom:n?i:0}},e.prototype.setScrollLeft=function(e){this.horiz.scrollLeft!=e&&(this.horiz.scrollLeft=e),this.disableHoriz&&this.enableZeroWidthBar(this.horiz,this.disableHoriz,"horiz")},e.prototype.setScrollTop=function(e){this.vert.scrollTop!=e&&(this.vert.scrollTop=e),this.disableVert&&this.enableZeroWidthBar(this.vert,this.disableVert,"vert")},e.prototype.zeroWidthHack=function(){this.horiz.style.height=this.vert.style.width=g&&!l?"12px":"18px",this.horiz.style.pointerEvents=this.vert.style.pointerEvents="none",this.disableHoriz=new I,this.disableVert=new I},e.prototype.enableZeroWidthBar=function(n,r,i){n.style.pointerEvents="auto",r.set(1e3,function e(){var t=n.getBoundingClientRect();("vert"==i?document.elementFromPoint(t.right-1,(t.top+t.bottom)/2):document.elementFromPoint((t.right+t.left)/2,t.bottom-1))!=n?n.style.pointerEvents="none":r.set(1e3,e)})},e.prototype.clear=function(){var e=this.horiz.parentNode;e.removeChild(this.horiz),e.removeChild(this.vert)};r=function(){};function Nr(e,t){t=t||Mr(e);var n=e.display.barWidth,r=e.display.barHeight;Or(e,t);for(var i=0;i<4&&n!=e.display.barWidth||r!=e.display.barHeight;i++)n!=e.display.barWidth&&e.options.lineWrapping&&gr(e),Or(e,Mr(e)),n=e.display.barWidth,r=e.display.barHeight}function Or(e,t){var n=e.display,r=n.scrollbars.update(t);n.sizer.style.paddingRight=(n.barWidth=r.right)+"px",n.sizer.style.paddingBottom=(n.barHeight=r.bottom)+"px",n.heightForcer.style.borderBottom=r.bottom+"px solid transparent",r.right&&r.bottom?(n.scrollbarFiller.style.display="block",n.scrollbarFiller.style.height=r.bottom+"px",n.scrollbarFiller.style.width=r.right+"px"):n.scrollbarFiller.style.display="",r.bottom&&e.options.coverGutterNextToScrollbar&&e.options.fixedGutter?(n.gutterFiller.style.display="block",n.gutterFiller.style.height=r.bottom+"px",n.gutterFiller.style.width=t.gutterWidth+"px"):n.gutterFiller.style.display=""}r.prototype.update=function(){return{bottom:0,right:0}},r.prototype.setScrollLeft=function(){},r.prototype.setScrollTop=function(){},r.prototype.clear=function(){};var Ar={native:e,null:r};function Dr(n){n.display.scrollbars&&(n.display.scrollbars.clear(),n.display.scrollbars.addClass&&S(n.display.wrapper,n.display.scrollbars.addClass)),n.display.scrollbars=new Ar[n.options.scrollbarStyle](function(e){n.display.wrapper.insertBefore(e,n.display.scrollbarFiller),me(e,"mousedown",function(){n.state.focused&&setTimeout(function(){return n.display.input.focus()},0)}),e.setAttribute("cm-not-content","true")},function(e,t){("horizontal"==t?Tr:Lr)(n,e)},n),n.display.scrollbars.addClass&&A(n.display.wrapper,n.display.scrollbars.addClass)}var Wr=0;function Hr(e){e.curOp={cm:e,viewChanged:!1,startHeight:e.doc.height,forceUpdate:!1,updateInput:0,typing:!1,changeObjs:null,cursorActivityHandlers:null,cursorActivityCalled:0,selectionChanged:!1,updateMaxLine:!1,scrollLeft:null,scrollTop:null,scrollToPos:null,focus:!1,id:++Wr,markArrays:null},e=e.curOp,en?en.ops.push(e):e.ownsGroup=en={ops:[e],delayedCallbacks:[]}}function Fr(e){e=e.curOp;e&&tn(e,function(e){for(var t=0;t<e.ops.length;t++)e.ops[t].cm.curOp=null;!function(e){for(var t=e.ops,n=0;n<t.length;n++)!function(e){var t=e.cm,n=t.display;(function(e){var t=e.display;!t.scrollbarsClipped&&t.scroller.offsetWidth&&(t.nativeBarWidth=t.scroller.offsetWidth-t.scroller.clientWidth,t.heightForcer.style.height=yn(e)+"px",t.sizer.style.marginBottom=-t.nativeBarWidth+"px",t.sizer.style.borderRightWidth=yn(e)+"px",t.scrollbarsClipped=!0)})(t),e.updateMaxLine&&Vt(t);e.mustUpdate=e.viewChanged||e.forceUpdate||null!=e.scrollTop||e.scrollToPos&&(e.scrollToPos.from.line<n.viewFrom||e.scrollToPos.to.line>=n.viewTo)||n.maxLineChanged&&t.options.lineWrapping,e.update=e.mustUpdate&&new Gr(t,e.mustUpdate&&{top:e.scrollTop,ensure:e.scrollToPos},e.forceUpdate)}(t[n]);for(var r=0;r<t.length;r++)!function(e){e.updatedDisplay=e.mustUpdate&&Ur(e.cm,e.update)}(t[r]);for(var i=0;i<t.length;i++)!function(e){var t=e.cm,n=t.display;e.updatedDisplay&&gr(t);e.barMeasure=Mr(t),n.maxLineChanged&&!t.options.lineWrapping&&(e.adjustWidthTo=Cn(t,n.maxLine,n.maxLine.text.length).left+3,t.display.sizerWidth=e.adjustWidthTo,e.barMeasure.scrollWidth=Math.max(n.scroller.clientWidth,n.sizer.offsetLeft+e.adjustWidthTo+yn(t)+t.display.barWidth),e.maxScrollLeft=Math.max(0,n.sizer.offsetLeft+e.adjustWidthTo-bn(t)));(e.updatedDisplay||e.selectionChanged)&&(e.preparedSelection=n.input.prepareSelection())}(t[i]);for(var o=0;o<t.length;o++)!function(e){var t=e.cm;null!=e.adjustWidthTo&&(t.display.sizer.style.minWidth=e.adjustWidthTo+"px",e.maxScrollLeft<t.doc.scrollLeft&&Tr(t,Math.min(t.display.scroller.scrollLeft,e.maxScrollLeft),!0),t.display.maxLineChanged=!1);var n=e.focus&&e.focus==O();e.preparedSelection&&t.display.input.showSelection(e.preparedSelection,n);!e.updatedDisplay&&e.startHeight==t.doc.height||Nr(t,e.barMeasure);e.updatedDisplay&&Xr(t,e.barMeasure);e.selectionChanged&&cr(t);t.state.focused&&e.updateInput&&t.display.input.reset(e.typing);n&&hr(e.cm)}(t[o]);for(var l=0;l<t.length;l++)!function(e){var t=e.cm,n=t.display,r=t.doc;e.updatedDisplay&&Vr(t,e.update);null==n.wheelStartX||null==e.scrollTop&&null==e.scrollLeft&&!e.scrollToPos||(n.wheelStartX=n.wheelStartY=null);null!=e.scrollTop&&kr(t,e.scrollTop,e.forceScroll);null!=e.scrollLeft&&Tr(t,e.scrollLeft,!0,!0);{var i;e.scrollToPos&&(i=function(e,t,n,r){null==r&&(r=0),e.options.lineWrapping||t!=n||(n="before"==t.sticky?tt(t.line,t.ch+1,"before"):t,t=t.ch?tt(t.line,"before"==t.sticky?t.ch-1:t.ch,"after"):t);for(var i=0;i<5;i++){var o,l=!1,s=Rn(e,t),a=n&&n!=t?Rn(e,n):s,u=yr(e,o={left:Math.min(s.left,a.left),top:Math.min(s.top,a.top)-r,right:Math.max(s.left,a.left),bottom:Math.max(s.bottom,a.bottom)+r}),s=e.doc.scrollTop,a=e.doc.scrollLeft;if(null!=u.scrollTop&&(Lr(e,u.scrollTop),1<Math.abs(e.doc.scrollTop-s)&&(l=!0)),null!=u.scrollLeft&&(Tr(e,u.scrollLeft),1<Math.abs(e.doc.scrollLeft-a)&&(l=!0)),!l)break}return o}(t,at(r,e.scrollToPos.from),at(r,e.scrollToPos.to),e.scrollToPos.margin),function(e,t){var n,r,i;we(e,"scrollCursorIntoView")||(r=(n=e.display).sizer.getBoundingClientRect(),i=null,t.top+r.top<0?i=!0:t.bottom+r.top>(window.innerHeight||document.documentElement.clientHeight)&&(i=!1),null==i||u||(t=M("div","​",null,"position: absolute;\n                         top: "+(t.top-n.viewOffset-gn(e.display))+"px;\n                         height: "+(t.bottom-t.top+yn(e)+n.barHeight)+"px;\n                         left: "+t.left+"px; width: "+Math.max(2,t.right-t.left)+"px;"),e.display.lineSpace.appendChild(t),t.scrollIntoView(i),e.display.lineSpace.removeChild(t)))}(t,i))}var o=e.maybeHiddenMarkers,l=e.maybeUnhiddenMarkers;if(o)for(var s=0;s<o.length;++s)o[s].lines.length||be(o[s],"hide");if(l)for(var a=0;a<l.length;++a)l[a].lines.length&&be(l[a],"unhide");n.wrapper.offsetHeight&&(r.scrollTop=t.display.scroller.scrollTop);e.changeObjs&&be(t,"changes",t,e.changeObjs);e.update&&e.update.finish()}(t[l])}(e)})}function Pr(e,t){if(e.curOp)return t();Hr(e);try{return t()}finally{Fr(e)}}function Er(e,t){return function(){if(e.curOp)return t.apply(e,arguments);Hr(e);try{return t.apply(e,arguments)}finally{Fr(e)}}}function Ir(e){return function(){if(this.curOp)return e.apply(this,arguments);Hr(this);try{return e.apply(this,arguments)}finally{Fr(this)}}}function Rr(t){return function(){var e=this.cm;if(!e||e.curOp)return t.apply(this,arguments);Hr(e);try{return t.apply(this,arguments)}finally{Fr(e)}}}function zr(e,t){e.doc.highlightFrontier<e.display.viewTo&&e.state.highlight.set(t,F(Br,e))}function Br(l){var s,a,u,c=l.doc;c.highlightFrontier>=l.display.viewTo||(s=+new Date+l.options.workTime,a=pt(l,c.highlightFrontier),u=[],c.iter(a.line,Math.min(c.first+c.size,l.display.viewTo+500),function(e){if(a.line>=l.display.viewFrom){var t=e.styles,n=e.text.length>l.options.maxHighlightLength?Ve(c.mode,a.state):null,r=dt(l,e,a,!0);n&&(a.state=n),e.styles=r.styles;n=e.styleClasses,r=r.classes;r?e.styleClasses=r:n&&(e.styleClasses=null);for(var i=!t||t.length!=e.styles.length||n!=r&&(!n||!r||n.bgClass!=r.bgClass||n.textClass!=r.textClass),o=0;!i&&o<t.length;++o)i=t[o]!=e.styles[o];i&&u.push(a.line),e.stateAfter=a.save(),a.nextLine()}else e.text.length<=l.options.maxHighlightLength&&gt(l,e.text,a),e.stateAfter=a.line%5==0?a.save():null,a.nextLine();if(+new Date>s)return zr(l,l.options.workDelay),!0}),c.highlightFrontier=a.line,c.modeFrontier=Math.max(c.modeFrontier,a.line),u.length&&Pr(l,function(){for(var e=0;e<u.length;e++)nr(l,u[e],"text")}))}var Gr=function(e,t,n){var r=e.display;this.viewport=t,this.visible=vr(r,e.doc,t),this.editorIsHidden=!r.wrapper.offsetWidth,this.wrapperHeight=r.wrapper.clientHeight,this.wrapperWidth=r.wrapper.clientWidth,this.oldDisplayWidth=bn(e),this.force=n,this.dims=_n(e),this.events=[]};function Ur(e,t){var n=e.display,r=e.doc;if(t.editorIsHidden)return rr(e),!1;if(!t.force&&t.visible.from>=n.viewFrom&&t.visible.to<=n.viewTo&&(null==n.updateLineNumbers||n.updateLineNumbers>=n.viewTo)&&n.renderedView==n.view&&0==or(e))return!1;$r(e)&&(rr(e),t.dims=_n(e));var i=r.first+r.size,o=Math.max(t.visible.from-e.options.viewportMargin,r.first),l=Math.min(i,t.visible.to+e.options.viewportMargin);n.viewFrom<o&&o-n.viewFrom<20&&(o=Math.max(r.first,n.viewFrom)),n.viewTo>l&&n.viewTo-l<20&&(l=Math.min(i,n.viewTo)),St&&(o=Rt(e.doc,o),l=zt(e.doc,l));var s=o!=n.viewFrom||l!=n.viewTo||n.lastWrapHeight!=t.wrapperHeight||n.lastWrapWidth!=t.wrapperWidth;r=o,i=l,0==(l=(o=e).display).view.length||r>=l.viewTo||i<=l.viewFrom?(l.view=Jt(o,r,i),l.viewFrom=r):(l.viewFrom>r?l.view=Jt(o,r,l.viewFrom).concat(l.view):l.viewFrom<r&&(l.view=l.view.slice(er(o,r))),l.viewFrom=r,l.viewTo<i?l.view=l.view.concat(Jt(o,l.viewTo,i)):l.viewTo>i&&(l.view=l.view.slice(0,er(o,i)))),l.viewTo=i,n.viewOffset=Gt(Ye(e.doc,n.viewFrom)),e.display.mover.style.top=n.viewOffset+"px";o=or(e);if(!s&&0==o&&!t.force&&n.renderedView==n.view&&(null==n.updateLineNumbers||n.updateLineNumbers>=n.viewTo))return!1;l=function(e){if(e.hasFocus())return null;var t=O();if(!t||!N(e.display.lineDiv,t))return null;var n={activeElt:t};return!window.getSelection||(t=window.getSelection()).anchorNode&&t.extend&&N(e.display.lineDiv,t.anchorNode)&&(n.anchorNode=t.anchorNode,n.anchorOffset=t.anchorOffset,n.focusNode=t.focusNode,n.focusOffset=t.focusOffset),n}(e);return 4<o&&(n.lineDiv.style.display="none"),function(n,e,t){var r=n.display,i=n.options.lineNumbers,o=r.lineDiv,l=o.firstChild;function s(e){var t=e.nextSibling;return f&&g&&n.display.currentWheelTarget==e?e.style.display="none":e.parentNode.removeChild(e),t}for(var a=r.view,u=r.viewFrom,c=0;c<a.length;c++){var h=a[c];if(!h.hidden)if(h.node&&h.node.parentNode==o){for(;l!=h.node;)l=s(l);var d=i&&null!=e&&e<=u&&h.lineNumber;h.changes&&(-1<R(h.changes,"gutter")&&(d=!1),ln(n,h,u,t)),d&&(L(h.lineNumber),h.lineNumber.appendChild(document.createTextNode(et(n.options,u)))),l=h.node.nextSibling}else{d=function(e,t,n,r){var i=an(e,t);return t.text=t.node=i.pre,i.bgClass&&(t.bgClass=i.bgClass),i.textClass&&(t.textClass=i.textClass),un(e,t),cn(e,t,n,r),hn(e,t,r),t.node}(n,h,u,t);o.insertBefore(d,l)}u+=h.size}for(;l;)l=s(l)}(e,n.updateLineNumbers,t.dims),4<o&&(n.lineDiv.style.display=""),n.renderedView=n.view,(i=l)&&i.activeElt&&i.activeElt!=O()&&(i.activeElt.focus(),!/^(INPUT|TEXTAREA)$/.test(i.activeElt.nodeName)&&i.anchorNode&&N(document.body,i.anchorNode)&&N(document.body,i.focusNode)&&(o=window.getSelection(),(l=document.createRange()).setEnd(i.anchorNode,i.anchorOffset),l.collapse(!1),o.removeAllRanges(),o.addRange(l),o.extend(i.focusNode,i.focusOffset))),L(n.cursorDiv),L(n.selectionDiv),n.gutters.style.height=n.sizer.style.minHeight=0,s&&(n.lastWrapHeight=t.wrapperHeight,n.lastWrapWidth=t.wrapperWidth,zr(e,400)),!(n.updateLineNumbers=null)}function Vr(e,t){for(var n=t.viewport,r=!0;;r=!1){if(r&&e.options.lineWrapping&&t.oldDisplayWidth!=bn(e))r&&(t.visible=vr(e.display,e.doc,n));else if(n&&null!=n.top&&(n={top:Math.min(e.doc.height+mn(e.display)-wn(e),n.top)}),t.visible=vr(e.display,e.doc,n),t.visible.from>=e.display.viewFrom&&t.visible.to<=e.display.viewTo)break;if(!Ur(e,t))break;gr(e);var i=Mr(e);lr(e),Nr(e,i),Xr(e,i),t.force=!1}t.signal(e,"update",e),e.display.viewFrom==e.display.reportedViewFrom&&e.display.viewTo==e.display.reportedViewTo||(t.signal(e,"viewportChange",e,e.display.viewFrom,e.display.viewTo),e.display.reportedViewFrom=e.display.viewFrom,e.display.reportedViewTo=e.display.viewTo)}function Kr(e,t){var n=new Gr(e,t);Ur(e,n)&&(gr(e),Vr(e,n),t=Mr(e),lr(e),Nr(e,t),Xr(e,t),n.finish())}function jr(e){var t=e.gutters.offsetWidth;e.sizer.style.marginLeft=t+"px",rn(e,"gutterChanged",e)}function Xr(e,t){e.display.sizer.style.minHeight=t.docHeight+"px",e.display.heightForcer.style.top=t.docHeight+"px",e.display.gutters.style.height=t.docHeight+e.display.barHeight+yn(e)+"px"}function Yr(e){var t=e.display,n=t.view;if(t.alignWidgets||t.gutters.firstChild&&e.options.fixedGutter){for(var r=qn(t)-t.scroller.scrollLeft+e.doc.scrollLeft,i=t.gutters.offsetWidth,o=r+"px",l=0;l<n.length;l++)if(!n[l].hidden){e.options.fixedGutter&&(n[l].gutter&&(n[l].gutter.style.left=o),n[l].gutterBackground&&(n[l].gutterBackground.style.left=o));var s=n[l].alignable;if(s)for(var a=0;a<s.length;a++)s[a].style.left=o}e.options.fixedGutter&&(t.gutters.style.left=r+i+"px")}}function $r(e){if(e.options.lineNumbers){var t=e.doc,n=et(e.options,t.first+t.size-1),r=e.display;if(n.length!=r.lineNumChars){var i=r.measure.appendChild(M("div",[M("div",n)],"CodeMirror-linenumber CodeMirror-gutter-elt")),t=i.firstChild.offsetWidth,i=i.offsetWidth-t;return r.lineGutter.style.width="",r.lineNumInnerWidth=Math.max(t,r.lineGutter.offsetWidth-i)+1,r.lineNumWidth=r.lineNumInnerWidth+i,r.lineNumChars=r.lineNumInnerWidth?n.length:-1,r.lineGutter.style.width=r.lineNumWidth+"px",jr(e.display),1}}}function _r(e,t){for(var n=[],r=!1,i=0;i<e.length;i++){var o=e[i],l=null;if("string"!=typeof o&&(l=o.style,o=o.className),"CodeMirror-linenumbers"==o){if(!t)continue;r=!0}n.push({className:o,style:l})}return t&&!r&&n.push({className:"CodeMirror-linenumbers",style:null}),n}function qr(e){var t=e.gutters,n=e.gutterSpecs;L(t),e.lineGutter=null;for(var r=0;r<n.length;++r){var i=n[r],o=i.className,l=i.style,i=t.appendChild(M("div",null,"CodeMirror-gutter "+o));l&&(i.style.cssText=l),"CodeMirror-linenumbers"==o&&((e.lineGutter=i).style.width=(e.lineNumWidth||1)+"px")}t.style.display=n.length?"":"none",jr(e)}function Zr(e){qr(e.display),tr(e),Yr(e)}function Qr(e,t,n,r){var i=this;this.input=n,i.scrollbarFiller=M("div",null,"CodeMirror-scrollbar-filler"),i.scrollbarFiller.setAttribute("cm-not-content","true"),i.gutterFiller=M("div",null,"CodeMirror-gutter-filler"),i.gutterFiller.setAttribute("cm-not-content","true"),i.lineDiv=T("div",null,"CodeMirror-code"),i.selectionDiv=M("div",null,null,"position: relative; z-index: 1"),i.cursorDiv=M("div",null,"CodeMirror-cursors"),i.measure=M("div",null,"CodeMirror-measure"),i.lineMeasure=M("div",null,"CodeMirror-measure"),i.lineSpace=T("div",[i.measure,i.lineMeasure,i.selectionDiv,i.cursorDiv,i.lineDiv],null,"position: relative; outline: none");var o=T("div",[i.lineSpace],"CodeMirror-lines");i.mover=M("div",[o],null,"position: relative"),i.sizer=M("div",[i.mover],"CodeMirror-sizer"),i.sizerWidth=null,i.heightForcer=M("div",null,null,"position: absolute; height: "+z+"px; width: 1px;"),i.gutters=M("div",null,"CodeMirror-gutters"),i.lineGutter=null,i.scroller=M("div",[i.sizer,i.heightForcer,i.gutters],"CodeMirror-scroll"),i.scroller.setAttribute("tabIndex","-1"),i.wrapper=M("div",[i.scrollbarFiller,i.gutterFiller,i.scroller],"CodeMirror"),i.wrapper.setAttribute("translate","no"),w&&v<8&&(i.gutters.style.zIndex=-1,i.scroller.style.paddingRight=0),f||d&&h||(i.scroller.draggable=!0),e&&(e.appendChild?e.appendChild(i.wrapper):e(i.wrapper)),i.viewFrom=i.viewTo=t.first,i.reportedViewFrom=i.reportedViewTo=t.first,i.view=[],i.renderedView=null,i.externalMeasured=null,i.viewOffset=0,i.lastWrapHeight=i.lastWrapWidth=0,i.updateLineNumbers=null,i.nativeBarWidth=i.barHeight=i.barWidth=0,i.scrollbarsClipped=!1,i.lineNumWidth=i.lineNumInnerWidth=i.lineNumChars=null,i.alignWidgets=!1,i.cachedCharWidth=i.cachedTextHeight=i.cachedPaddingH=null,i.maxLine=null,i.maxLineLength=0,i.maxLineChanged=!1,i.wheelDX=i.wheelDY=i.wheelStartX=i.wheelStartY=null,i.shift=!1,i.selForContextMenu=null,i.activeTouch=null,i.gutterSpecs=_r(r.gutters,r.lineNumbers),qr(i),n.init(i)}Gr.prototype.signal=function(e,t){Ce(e,t)&&this.events.push(arguments)},Gr.prototype.finish=function(){for(var e=0;e<this.events.length;e++)be.apply(null,this.events[e])};var Jr=0,ei=null;function ti(e){var t=e.wheelDeltaX,n=e.wheelDeltaY;return null==t&&e.detail&&e.axis==e.HORIZONTAL_AXIS&&(t=e.detail),null==n&&e.detail&&e.axis==e.VERTICAL_AXIS?n=e.detail:null==n&&(n=e.wheelDelta),{x:t,y:n}}function ni(e){e=ti(e);return e.x*=ei,e.y*=ei,e}function ri(e,t){var n=ti(t),r=n.x,i=n.y,o=ei;0===t.deltaMode&&(r=t.deltaX,i=t.deltaY,o=1);var l=e.display,s=l.scroller,a=s.scrollWidth>s.clientWidth,n=s.scrollHeight>s.clientHeight;if(r&&a||i&&n){if(i&&g&&f)e:for(var u=t.target,c=l.view;u!=s;u=u.parentNode)for(var h=0;h<c.length;h++)if(c[h].node==u){e.display.currentWheelTarget=u;break e}if(r&&!d&&!p&&null!=o)return i&&n&&Lr(e,Math.max(0,s.scrollTop+i*o)),Tr(e,Math.max(0,s.scrollLeft+r*o)),i&&!n||Le(t),void(l.wheelStartX=null);i&&null!=o&&(n=(a=e.doc.scrollTop)+l.wrapper.clientHeight,(o=i*o)<0?a=Math.max(0,a+o-50):n=Math.min(e.doc.height,n+o+50),Kr(e,{top:a,bottom:n})),Jr<20&&0!==t.deltaMode&&(null==l.wheelStartX?(l.wheelStartX=s.scrollLeft,l.wheelStartY=s.scrollTop,l.wheelDX=r,l.wheelDY=i,setTimeout(function(){var e,t;null!=l.wheelStartX&&(t=s.scrollLeft-l.wheelStartX,t=(e=s.scrollTop-l.wheelStartY)&&l.wheelDY&&e/l.wheelDY||t&&l.wheelDX&&t/l.wheelDX,l.wheelStartX=l.wheelStartY=null,t&&(ei=(ei*Jr+t)/(Jr+1),++Jr))},200)):(l.wheelDX+=r,l.wheelDY+=i))}}w?ei=-.53:d?ei=15:o?ei=-.7:c&&(ei=-1/3);var ii=function(e,t){this.ranges=e,this.primIndex=t};ii.prototype.primary=function(){return this.ranges[this.primIndex]},ii.prototype.equals=function(e){if(e==this)return!0;if(e.primIndex!=this.primIndex||e.ranges.length!=this.ranges.length)return!1;for(var t=0;t<this.ranges.length;t++){var n=this.ranges[t],r=e.ranges[t];if(!rt(n.anchor,r.anchor)||!rt(n.head,r.head))return!1}return!0},ii.prototype.deepCopy=function(){for(var e=[],t=0;t<this.ranges.length;t++)e[t]=new oi(it(this.ranges[t].anchor),it(this.ranges[t].head));return new ii(e,this.primIndex)},ii.prototype.somethingSelected=function(){for(var e=0;e<this.ranges.length;e++)if(!this.ranges[e].empty())return!0;return!1},ii.prototype.contains=function(e,t){t=t||e;for(var n=0;n<this.ranges.length;n++){var r=this.ranges[n];if(0<=nt(t,r.from())&&nt(e,r.to())<=0)return n}return-1};var oi=function(e,t){this.anchor=e,this.head=t};function li(e,t,n){var r=e&&e.options.selectionsMayTouch,e=t[n];t.sort(function(e,t){return nt(e.from(),t.from())}),n=R(t,e);for(var i=1;i<t.length;i++){var o,l=t[i],s=t[i-1],a=nt(s.to(),l.from());(r&&!l.empty()?0<a:0<=a)&&(o=lt(s.from(),l.from()),a=ot(s.to(),l.to()),s=s.empty()?l.from()==l.head:s.from()==s.head,i<=n&&--n,t.splice(--i,2,new oi(s?a:o,s?o:a)))}return new ii(t,n)}function si(e,t){return new ii([new oi(e,t||e)],0)}function ai(e){return e.text?tt(e.from.line+e.text.length-1,Y(e.text).length+(1==e.text.length?e.from.ch:0)):e.to}function ui(e,t){if(nt(e,t.from)<0)return e;if(nt(e,t.to)<=0)return ai(t);var n=e.line+t.text.length-(t.to.line-t.from.line)-1,r=e.ch;return e.line==t.to.line&&(r+=ai(t).ch-t.to.ch),tt(n,r)}function ci(e,t){for(var n=[],r=0;r<e.sel.ranges.length;r++){var i=e.sel.ranges[r];n.push(new oi(ui(i.anchor,t),ui(i.head,t)))}return li(e.cm,n,e.sel.primIndex)}function hi(e,t,n){return e.line==t.line?tt(n.line,e.ch-t.ch+n.ch):tt(n.line+(e.line-t.line),e.ch)}function di(e){e.doc.mode=Be(e.options,e.doc.modeOption),fi(e)}function fi(e){e.doc.iter(function(e){e.stateAfter&&(e.stateAfter=null),e.styles&&(e.styles=null)}),e.doc.modeFrontier=e.doc.highlightFrontier=e.doc.first,zr(e,100),e.state.modeGen++,e.curOp&&tr(e)}function pi(e,t){return 0==t.from.ch&&0==t.to.ch&&""==Y(t.text)&&(!e.cm||e.cm.options.wholeLineUpdateBefore)}function gi(e,o,t,l){function i(e){return t?t[e]:null}function n(e,t,n){var r,i;r=n,i=l,(n=e).text=t,n.stateAfter&&(n.stateAfter=null),n.styles&&(n.styles=null),null!=n.order&&(n.order=null),Nt(n),Ot(n,r),(i=i?i(n):1)!=n.height&&qe(n,i),rn(e,"change",e,o)}function r(e,t){for(var n=[],r=e;r<t;++r)n.push(new Kt(c[r],i(r),l));return n}var s,a=o.from,u=o.to,c=o.text,h=Ye(e,a.line),d=Ye(e,u.line),f=Y(c),p=i(c.length-1),g=u.line-a.line;o.full?(e.insert(0,r(0,c.length)),e.remove(c.length,e.size-c.length)):pi(e,o)?(s=r(0,c.length-1),n(d,d.text,p),g&&e.remove(a.line,g),s.length&&e.insert(a.line,s)):h==d?1==c.length?n(h,h.text.slice(0,a.ch)+f+h.text.slice(u.ch),p):((s=r(1,c.length-1)).push(new Kt(f+h.text.slice(u.ch),p,l)),n(h,h.text.slice(0,a.ch)+c[0],i(0)),e.insert(a.line+1,s)):1==c.length?(n(h,h.text.slice(0,a.ch)+c[0]+d.text.slice(u.ch),i(0)),e.remove(a.line+1,g)):(n(h,h.text.slice(0,a.ch)+c[0],i(0)),n(d,f+d.text.slice(u.ch),p),p=r(1,c.length-1),1<g&&e.remove(a.line+1,g-1),e.insert(a.line+1,p)),rn(e,"change",e,o)}function mi(e,s,a){!function e(t,n,r){if(t.linked)for(var i=0;i<t.linked.length;++i){var o,l=t.linked[i];l.doc!=n&&(o=r&&l.sharedHist,a&&!o||(s(l.doc,o),e(l.doc,t,o)))}}(e,null,!0)}function vi(e,t){if(t.cm)throw new Error("This document is already in use.");Qn((e.doc=t).cm=e),di(e),yi(e),e.options.direction=t.direction,e.options.lineWrapping||Vt(e),e.options.mode=t.modeOption,tr(e)}function yi(e){("rtl"==e.doc.direction?A:S)(e.display.lineDiv,"CodeMirror-rtl")}function bi(e){this.done=[],this.undone=[],this.undoDepth=e?e.undoDepth:1/0,this.lastModTime=this.lastSelTime=0,this.lastOp=this.lastSelOp=null,this.lastOrigin=this.lastSelOrigin=null,this.generation=this.maxGeneration=e?e.maxGeneration:1}function wi(e,t){var n={from:it(t.from),to:ai(t),text:$e(e,t.from,t.to)};return ki(e,n,t.from.line,t.to.line+1),mi(e,function(e){return ki(e,n,t.from.line,t.to.line+1),0},!0),n}function xi(e){for(;e.length;){if(!Y(e).ranges)break;e.pop()}}function Ci(e,t,n,r){var i=e.history;i.undone.length=0;var o,l,s=+new Date;if((i.lastOp==r||i.lastOrigin==t.origin&&t.origin&&("+"==t.origin.charAt(0)&&i.lastModTime>s-(e.cm?e.cm.options.historyEventDelay:500)||"*"==t.origin.charAt(0)))&&(o=(a=i).lastOp==r?(xi(a.done),Y(a.done)):a.done.length&&!Y(a.done).ranges?Y(a.done):1<a.done.length&&!a.done[a.done.length-2].ranges?(a.done.pop(),Y(a.done)):void 0))l=Y(o.changes),0==nt(t.from,t.to)&&0==nt(t.from,l.to)?l.to=ai(t):o.changes.push(wi(e,t));else{var a=Y(i.done);for(a&&a.ranges||Li(e.sel,i.done),o={changes:[wi(e,t)],generation:i.generation},i.done.push(o);i.done.length>i.undoDepth;)i.done.shift(),i.done[0].ranges||i.done.shift()}i.done.push(n),i.generation=++i.maxGeneration,i.lastModTime=i.lastSelTime=s,i.lastOp=i.lastSelOp=r,i.lastOrigin=i.lastSelOrigin=t.origin,l||be(e,"historyAdded")}function Si(e,t,n,r){var i,o,l,s=e.history,a=r&&r.origin;n==s.lastSelOp||a&&s.lastSelOrigin==a&&(s.lastModTime==s.lastSelTime&&s.lastOrigin==a||(i=e,o=a,l=Y(s.done),e=t,"*"==(o=o.charAt(0))||"+"==o&&l.ranges.length==e.ranges.length&&l.somethingSelected()==e.somethingSelected()&&new Date-i.history.lastSelTime<=(i.cm?i.cm.options.historyEventDelay:500)))?s.done[s.done.length-1]=t:Li(t,s.done),s.lastSelTime=+new Date,s.lastSelOrigin=a,s.lastSelOp=n,r&&!1!==r.clearRedo&&xi(s.undone)}function Li(e,t){var n=Y(t);n&&n.ranges&&n.equals(e)||t.push(e)}function ki(t,n,e,r){var i=n["spans_"+t.id],o=0;t.iter(Math.max(t.first,e),Math.min(t.first+t.size,r),function(e){e.markedSpans&&((i=i||(n["spans_"+t.id]={}))[o]=e.markedSpans),++o})}function Ti(e,t){var n=t["spans_"+e.id];if(!n)return null;for(var r=[],i=0;i<t.text.length;++i)r.push(function(e){if(!e)return null;for(var t,n=0;n<e.length;++n)e[n].marker.explicitlyCleared?t=t||e.slice(0,n):t&&t.push(e[n]);return t?t.length?t:null:e}(n[i]));return r}function Mi(e,t){var n=Ti(e,t),r=Tt(e,t);if(!n)return r;if(!r)return n;for(var i=0;i<n.length;++i){var o=n[i],l=r[i];if(o&&l)e:for(var s=0;s<l.length;++s){for(var a=l[s],u=0;u<o.length;++u)if(o[u].marker==a.marker)continue e;o.push(a)}else l&&(n[i]=l)}return n}function Ni(e,t,n){for(var r=[],i=0;i<e.length;++i){var o=e[i];if(o.ranges)r.push(n?ii.prototype.deepCopy.call(o):o);else{var l=o.changes,s=[];r.push({changes:s});for(var a=0;a<l.length;++a){var u,c=l[a];if(s.push({from:c.from,to:c.to,text:c.text}),t)for(var h in c)(u=h.match(/^spans_(\d+)$/))&&-1<R(t,Number(u[1]))&&(Y(s)[h]=c[h],delete c[h])}}}return r}function Oi(e,t,n,r){if(r){r=e.anchor;return n&&((e=nt(t,r)<0)!=nt(n,r)<0?(r=t,t=n):e!=nt(t,n)<0&&(t=n)),new oi(r,t)}return new oi(n||t,t)}function Ai(e,t,n,r,i){null==i&&(i=e.cm&&(e.cm.display.shift||e.extend)),Pi(e,new ii([Oi(e.sel.primary(),t,n,i)],0),r)}function Di(e,t,n){for(var r=[],i=e.cm&&(e.cm.display.shift||e.extend),o=0;o<e.sel.ranges.length;o++)r[o]=Oi(e.sel.ranges[o],t[o],null,i);Pi(e,li(e.cm,r,e.sel.primIndex),n)}function Wi(e,t,n,r){var i=e.sel.ranges.slice(0);i[t]=n,Pi(e,li(e.cm,i,e.sel.primIndex),r)}function Hi(e,t,n,r){Pi(e,si(t,n),r)}function Fi(e,t,n){var r=e.history.done,i=Y(r);i&&i.ranges?Ei(e,r[r.length-1]=t,n):Pi(e,t,n)}function Pi(e,t,n){Ei(e,t,n),Si(e,e.sel,e.cm?e.cm.curOp.id:NaN,n)}function Ei(e,t,n){var r,i;(Ce(e,"beforeSelectionChange")||e.cm&&Ce(e.cm,"beforeSelectionChange"))&&(r=e,i=n,i={ranges:(o=t).ranges,update:function(e){this.ranges=[];for(var t=0;t<e.length;t++)this.ranges[t]=new oi(at(r,e[t].anchor),at(r,e[t].head))},origin:i&&i.origin},be(r,"beforeSelectionChange",r,i),r.cm&&be(r.cm,"beforeSelectionChange",r.cm,i),t=i.ranges!=o.ranges?li(r.cm,i.ranges,i.ranges.length-1):o);var o=n&&n.bias||(nt(t.primary().head,e.sel.primary().head)<0?-1:1);Ii(e,zi(e,t,o,!0)),n&&!1===n.scroll||!e.cm||"nocursor"==e.cm.getOption("readOnly")||wr(e.cm)}function Ii(e,t){t.equals(e.sel)||(e.sel=t,e.cm&&(e.cm.curOp.updateInput=1,e.cm.curOp.selectionChanged=!0,xe(e.cm)),rn(e,"cursorActivity",e))}function Ri(e){Ii(e,zi(e,e.sel,null,!1))}function zi(e,t,n,r){for(var i,o=0;o<t.ranges.length;o++){var l=t.ranges[o],s=t.ranges.length==e.sel.ranges.length&&e.sel.ranges[o],a=Gi(e,l.anchor,s&&s.anchor,n,r),s=Gi(e,l.head,s&&s.head,n,r);!i&&a==l.anchor&&s==l.head||((i=i||t.ranges.slice(0,o))[o]=new oi(a,s))}return i?li(e.cm,i,t.primIndex):t}function Bi(e,t,n,r,i){var o=Ye(e,t.line);if(o.markedSpans)for(var l=0;l<o.markedSpans.length;++l){var s=o.markedSpans[l],a=s.marker,u="selectLeft"in a?!a.selectLeft:a.inclusiveLeft,c="selectRight"in a?!a.selectRight:a.inclusiveRight;if((null==s.from||(u?s.from<=t.ch:s.from<t.ch))&&(null==s.to||(c?s.to>=t.ch:s.to>t.ch))){if(i&&(be(a,"beforeCursorEnter"),a.explicitlyCleared)){if(o.markedSpans){--l;continue}break}if(a.atomic){if(n){var h=a.find(r<0?1:-1),s=void 0;if((h=(r<0?c:u)?Ui(e,h,-r,h&&h.line==t.line?o:null):h)&&h.line==t.line&&(s=nt(h,n))&&(r<0?s<0:0<s))return Bi(e,h,t,r,i)}a=a.find(r<0?-1:1);return(a=(r<0?u:c)?Ui(e,a,r,a.line==t.line?o:null):a)?Bi(e,a,t,r,i):null}}}return t}function Gi(e,t,n,r,i){r=r||1,r=Bi(e,t,n,r,i)||!i&&Bi(e,t,n,r,!0)||Bi(e,t,n,-r,i)||!i&&Bi(e,t,n,-r,!0);return r||(e.cantEdit=!0,tt(e.first,0))}function Ui(e,t,n,r){return n<0&&0==t.ch?t.line>e.first?at(e,tt(t.line-1)):null:0<n&&t.ch==(r||Ye(e,t.line)).text.length?t.line<e.first+e.size-1?tt(t.line+1,0):null:new tt(t.line,t.ch+n)}function Vi(e){e.setSelection(tt(e.firstLine(),0),tt(e.lastLine()),G)}function Ki(i,e,t){var o={canceled:!1,from:e.from,to:e.to,text:e.text,origin:e.origin,cancel:function(){return o.canceled=!0}};return t&&(o.update=function(e,t,n,r){e&&(o.from=at(i,e)),t&&(o.to=at(i,t)),n&&(o.text=n),void 0!==r&&(o.origin=r)}),be(i,"beforeChange",i,o),i.cm&&be(i.cm,"beforeChange",i.cm,o),o.canceled?(i.cm&&(i.cm.curOp.updateInput=2),null):{from:o.from,to:o.to,text:o.text,origin:o.origin}}function ji(e,t,n){if(e.cm){if(!e.cm.curOp)return Er(e.cm,ji)(e,t,n);if(e.cm.state.suppressEdits)return}if(!(Ce(e,"beforeChange")||e.cm&&Ce(e.cm,"beforeChange"))||(t=Ki(e,t,!0))){var r=Ct&&!n&&function(e,t,n){var r=null;if(e.iter(t.line,n.line+1,function(e){if(e.markedSpans)for(var t=0;t<e.markedSpans.length;++t){var n=e.markedSpans[t].marker;!n.readOnly||r&&-1!=R(r,n)||(r=r||[]).push(n)}}),!r)return null;for(var i=[{from:t,to:n}],o=0;o<r.length;++o)for(var l=r[o],s=l.find(0),a=0;a<i.length;++a){var u,c,h,d=i[a];nt(d.to,s.from)<0||0<nt(d.from,s.to)||(u=[a,1],c=nt(d.from,s.from),h=nt(d.to,s.to),(c<0||!l.inclusiveLeft&&!c)&&u.push({from:d.from,to:s.from}),(0<h||!l.inclusiveRight&&!h)&&u.push({from:s.to,to:d.to}),i.splice.apply(i,u),a+=u.length-3)}return i}(e,t.from,t.to);if(r)for(var i=r.length-1;0<=i;--i)Xi(e,{from:r[i].from,to:r[i].to,text:i?[""]:t.text,origin:t.origin});else Xi(e,t)}}function Xi(e,n){var t,r;1==n.text.length&&""==n.text[0]&&0==nt(n.from,n.to)||(t=ci(e,n),Ci(e,n,t,e.cm?e.cm.curOp.id:NaN),_i(e,n,t,Tt(e,n)),r=[],mi(e,function(e,t){t||-1!=R(r,e.history)||(Ji(e.history,n),r.push(e.history)),_i(e,n,null,Tt(e,n))}))}function Yi(i,o,e){var t=i.cm&&i.cm.state.suppressEdits;if(!t||e){for(var l,n=i.history,r=i.sel,s="undo"==o?n.done:n.undone,a="undo"==o?n.undone:n.done,u=0;u<s.length&&(l=s[u],e?!l.ranges||l.equals(i.sel):l.ranges);u++);if(u!=s.length){for(n.lastOrigin=n.lastSelOrigin=null;;){if(!(l=s.pop()).ranges){if(t)return void s.push(l);break}if(Li(l,a),e&&!l.equals(i.sel))return void Pi(i,l,{clearRedo:!1});r=l}var c=[];Li(r,a),a.push({changes:c,generation:n.generation}),n.generation=l.generation||++n.maxGeneration;for(var h=Ce(i,"beforeChange")||i.cm&&Ce(i.cm,"beforeChange"),d=l.changes.length-1;0<=d;--d){var f=function(e){var n=l.changes[e];if(n.origin=o,h&&!Ki(i,n,!1))return s.length=0,{};c.push(wi(i,n));var t=e?ci(i,n):Y(s);_i(i,n,t,Mi(i,n)),!e&&i.cm&&i.cm.scrollIntoView({from:n.from,to:ai(n)});var r=[];mi(i,function(e,t){t||-1!=R(r,e.history)||(Ji(e.history,n),r.push(e.history)),_i(e,n,null,Mi(e,n))})}(d);if(f)return f.v}}}}function $i(e,t){if(0!=t&&(e.first+=t,e.sel=new ii($(e.sel.ranges,function(e){return new oi(tt(e.anchor.line+t,e.anchor.ch),tt(e.head.line+t,e.head.ch))}),e.sel.primIndex),e.cm)){tr(e.cm,e.first,e.first-t,t);for(var n=e.cm.display,r=n.viewFrom;r<n.viewTo;r++)nr(e.cm,r,"gutter")}}function _i(e,t,n,r){if(e.cm&&!e.cm.curOp)return Er(e.cm,_i)(e,t,n,r);var i;t.to.line<e.first?$i(e,t.text.length-1-(t.to.line-t.from.line)):t.from.line>e.lastLine()||(t.from.line<e.first&&($i(e,i=t.text.length-1-(e.first-t.from.line)),t={from:tt(e.first,0),to:tt(t.to.line+i,t.to.ch),text:[Y(t.text)],origin:t.origin}),i=e.lastLine(),(t=t.to.line>i?{from:t.from,to:tt(i,Ye(e,i).text.length),text:[t.text[0]],origin:t.origin}:t).removed=$e(e,t.from,t.to),n=n||ci(e,t),e.cm?function(e,t,n){var r=e.doc,i=e.display,o=t.from,l=t.to,s=!1,a=o.line;e.options.lineWrapping||(a=Ze(It(Ye(r,o.line))),r.iter(a,l.line+1,function(e){if(e==i.maxLine)return s=!0}));-1<r.sel.contains(t.from,t.to)&&xe(e);gi(r,t,n,Zn(e)),e.options.lineWrapping||(r.iter(a,o.line+t.text.length,function(e){var t=Ut(e);t>i.maxLineLength&&(i.maxLine=e,i.maxLineLength=t,i.maxLineChanged=!0,s=!1)}),s&&(e.curOp.updateMaxLine=!0));(function(e,t){if(e.modeFrontier=Math.min(e.modeFrontier,t),!(e.highlightFrontier<t-10)){for(var n=e.first,r=t-1;n<r;r--){var i=Ye(e,r).stateAfter;if(i&&(!(i instanceof ct)||r+i.lookAhead<t)){n=r+1;break}}e.highlightFrontier=Math.min(e.highlightFrontier,n)}})(r,o.line),zr(e,400);a=t.text.length-(l.line-o.line)-1;t.full?tr(e):o.line!=l.line||1!=t.text.length||pi(e.doc,t)?tr(e,o.line,l.line+1,a):nr(e,o.line,"text");r=Ce(e,"changes"),a=Ce(e,"change");(a||r)&&(t={from:o,to:l,text:t.text,removed:t.removed,origin:t.origin},a&&rn(e,"change",e,t),r&&(e.curOp.changeObjs||(e.curOp.changeObjs=[])).push(t));e.display.selForContextMenu=null}(e.cm,t,r):gi(e,t,r),Ei(e,n,G),e.cantEdit&&Gi(e,tt(e.firstLine(),0))&&(e.cantEdit=!1))}function qi(e,t,n,r,i){var o;nt(r=r||n,n)<0&&(n=(o=[r,n])[0],r=o[1]),"string"==typeof t&&(t=e.splitLines(t)),ji(e,{from:n,to:r,text:t,origin:i})}function Zi(e,t,n,r){n<e.line?e.line+=r:t<e.line&&(e.line=t,e.ch=0)}function Qi(e,t,n,r){for(var i=0;i<e.length;++i){var o=e[i],l=!0;if(o.ranges){o.copied||((o=e[i]=o.deepCopy()).copied=!0);for(var s=0;s<o.ranges.length;s++)Zi(o.ranges[s].anchor,t,n,r),Zi(o.ranges[s].head,t,n,r)}else{for(var a=0;a<o.changes.length;++a){var u=o.changes[a];if(n<u.from.line)u.from=tt(u.from.line+r,u.from.ch),u.to=tt(u.to.line+r,u.to.ch);else if(t<=u.to.line){l=!1;break}}l||(e.splice(0,i+1),i=0)}}}function Ji(e,t){var n=t.from.line,r=t.to.line,t=t.text.length-(r-n)-1;Qi(e.done,n,r,t),Qi(e.undone,n,r,t)}function eo(e,t,n,r){var i=t,o=t;return"number"==typeof t?o=Ye(e,st(e,t)):i=Ze(t),null==i?null:(r(o,i)&&e.cm&&nr(e.cm,i,n),o)}function to(e){this.lines=e,this.parent=null;for(var t=0,n=0;n<e.length;++n)e[n].parent=this,t+=e[n].height;this.height=t}function no(e){this.children=e;for(var t=0,n=0,r=0;r<e.length;++r){var i=e[r];t+=i.chunkSize(),n+=i.height,i.parent=this}this.size=t,this.height=n,this.parent=null}oi.prototype.from=function(){return lt(this.anchor,this.head)},oi.prototype.to=function(){return ot(this.anchor,this.head)},oi.prototype.empty=function(){return this.head.line==this.anchor.line&&this.head.ch==this.anchor.ch},to.prototype={chunkSize:function(){return this.lines.length},removeInner:function(e,t){for(var n,r=e,i=e+t;r<i;++r){var o=this.lines[r];this.height-=o.height,(n=o).parent=null,Nt(n),rn(o,"delete")}this.lines.splice(e,t)},collapse:function(e){e.push.apply(e,this.lines)},insertInner:function(e,t,n){this.height+=n,this.lines=this.lines.slice(0,e).concat(t).concat(this.lines.slice(e));for(var r=0;r<t.length;++r)t[r].parent=this},iterN:function(e,t,n){for(var r=e+t;e<r;++e)if(n(this.lines[e]))return!0}},no.prototype={chunkSize:function(){return this.size},removeInner:function(e,t){this.size-=t;for(var n,r=0;r<this.children.length;++r){var i=this.children[r],o=i.chunkSize();if(e<o){var l=Math.min(t,o-e),s=i.height;if(i.removeInner(e,l),this.height-=s-i.height,o==l&&(this.children.splice(r--,1),i.parent=null),0==(t-=l))break;e=0}else e-=o}this.size-t<25&&(1<this.children.length||!(this.children[0]instanceof to))&&(this.collapse(n=[]),this.children=[new to(n)],this.children[0].parent=this)},collapse:function(e){for(var t=0;t<this.children.length;++t)this.children[t].collapse(e)},insertInner:function(e,t,n){this.size+=t.length,this.height+=n;for(var r=0;r<this.children.length;++r){var i=this.children[r],o=i.chunkSize();if(e<=o){if(i.insertInner(e,t,n),i.lines&&50<i.lines.length){for(var l=i.lines.length%25+25,s=l;s<i.lines.length;){var a=new to(i.lines.slice(s,s+=25));i.height-=a.height,this.children.splice(++r,0,a),a.parent=this}i.lines=i.lines.slice(0,l),this.maybeSpill()}break}e-=o}},maybeSpill:function(){if(!(this.children.length<=10)){var e=this;do{var t,n=new no(e.children.splice(e.children.length-5,5))}while(e.parent?(e.size-=n.size,e.height-=n.height,t=R(e.parent.children,e),e.parent.children.splice(t+1,0,n)):(((t=new no(e.children)).parent=e).children=[t,n],e=t),n.parent=e.parent,10<e.children.length);e.parent.maybeSpill()}},iterN:function(e,t,n){for(var r=0;r<this.children.length;++r){var i=this.children[r],o=i.chunkSize();if(e<o){var l=Math.min(t,o-e);if(i.iterN(e,l,n))return!0;if(0==(t-=l))break;e=0}else e-=o}}};function ro(e,t,n){if(n)for(var r in n)n.hasOwnProperty(r)&&(this[r]=n[r]);this.doc=e,this.node=t}function io(e,t,n){Gt(t)<(e.curOp&&e.curOp.scrollTop||e.doc.scrollTop)&&br(e,n)}ro.prototype.clear=function(){var e=this.doc.cm,t=this.line.widgets,n=this.line,r=Ze(n);if(null!=r&&t){for(var i=0;i<t.length;++i)t[i]==this&&t.splice(i--,1);t.length||(n.widgets=null);var o=fn(this);qe(n,Math.max(0,n.height-o)),e&&(Pr(e,function(){io(e,n,-o),nr(e,r,"widget")}),rn(e,"lineWidgetCleared",e,this,r))}},ro.prototype.changed=function(){var e=this,t=this.height,n=this.doc.cm,r=this.line;this.height=null;var i=fn(this)-t;i&&(Bt(this.doc,r)||qe(r,r.height+i),n&&Pr(n,function(){n.curOp.forceUpdate=!0,io(n,r,i),rn(n,"lineWidgetChanged",n,e,Ze(r))}))},Se(ro);function oo(e,t){this.lines=[],this.type=t,this.doc=e,this.id=++lo}var lo=0;function so(r,i,o,e,t){if(e&&e.shared)return function(e,n,r,i,o){(i=P(i)).shared=!1;var l=[so(e,n,r,i,o)],s=l[0],a=i.widgetNode;return mi(e,function(e){a&&(i.widgetNode=a.cloneNode(!0)),l.push(so(e,at(e,n),at(e,r),i,o));for(var t=0;t<e.linked.length;++t)if(e.linked[t].isParent)return;s=Y(l)}),new ao(l,s)}(r,i,o,e,t);if(r.cm&&!r.cm.curOp)return Er(r.cm,so)(r,i,o,e,t);var l=new oo(r,t),t=nt(i,o);if(e&&P(e,l,!1),0<t||0==t&&!1!==l.clearWhenEmpty)return l;if(l.replacedWith&&(l.collapsed=!0,l.widgetNode=T("span",[l.replacedWith],"CodeMirror-widget"),e.handleMouseEvents||l.widgetNode.setAttribute("cm-ignore-events","true"),e.insertLeft&&(l.widgetNode.insertLeft=!0)),l.collapsed){if(Et(r,i.line,i,o,l)||i.line!=o.line&&Et(r,o.line,i,o,l))throw new Error("Inserting collapsed marker partially overlapping an existing one");St=!0}l.addToHistory&&Ci(r,{from:i,to:o,origin:"markText"},r.sel,NaN);var s,a=i.line,u=r.cm;if(r.iter(a,o.line+1,function(e){var t,n;u&&l.collapsed&&!u.options.lineWrapping&&It(e)==u.display.maxLine&&(s=!0),l.collapsed&&a!=i.line&&qe(e,0),t=e,n=new Lt(l,a==i.line?i.ch:null,a==o.line?o.ch:null),(e=(e=r.cm&&r.cm.curOp)&&window.WeakSet&&(e.markedSpans||(e.markedSpans=new WeakSet)))&&e.has(t.markedSpans)?t.markedSpans.push(n):(t.markedSpans=t.markedSpans?t.markedSpans.concat([n]):[n],e&&e.add(t.markedSpans)),n.marker.attachLine(t),++a}),l.collapsed&&r.iter(i.line,o.line+1,function(e){Bt(r,e)&&qe(e,0)}),l.clearOnEnter&&me(l,"beforeCursorEnter",function(){return l.clear()}),l.readOnly&&(Ct=!0,(r.history.done.length||r.history.undone.length)&&r.clearHistory()),l.collapsed&&(l.id=++lo,l.atomic=!0),u){if(s&&(u.curOp.updateMaxLine=!0),l.collapsed)tr(u,i.line,o.line+1);else if(l.className||l.startStyle||l.endStyle||l.css||l.attributes||l.title)for(var n=i.line;n<=o.line;n++)nr(u,n,"text");l.atomic&&Ri(u.doc),rn(u,"markerAdded",u,l)}return l}oo.prototype.clear=function(){if(!this.explicitlyCleared){var e,t=this.doc.cm,n=t&&!t.curOp;n&&Hr(t),!Ce(this,"clear")||(e=this.find())&&rn(this,"clear",e.from,e.to);for(var r=null,i=null,o=0;o<this.lines.length;++o){var l=this.lines[o],s=kt(l.markedSpans,this);t&&!this.collapsed?nr(t,Ze(l),"text"):t&&(null!=s.to&&(i=Ze(l)),null!=s.from&&(r=Ze(l))),l.markedSpans=function(e,t){for(var n,r=0;r<e.length;++r)e[r]!=t&&(n=n||[]).push(e[r]);return n}(l.markedSpans,s),null==s.from&&this.collapsed&&!Bt(this.doc,l)&&t&&qe(l,Yn(t.display))}if(t&&this.collapsed&&!t.options.lineWrapping)for(var a=0;a<this.lines.length;++a){var u=It(this.lines[a]),c=Ut(u);c>t.display.maxLineLength&&(t.display.maxLine=u,t.display.maxLineLength=c,t.display.maxLineChanged=!0)}null!=r&&t&&this.collapsed&&tr(t,r,i+1),this.lines.length=0,this.explicitlyCleared=!0,this.atomic&&this.doc.cantEdit&&(this.doc.cantEdit=!1,t&&Ri(t.doc)),t&&rn(t,"markerCleared",t,this,r,i),n&&Fr(t),this.parent&&this.parent.clear()}},oo.prototype.find=function(e,t){var n,r;null==e&&"bookmark"==this.type&&(e=1);for(var i=0;i<this.lines.length;++i){var o=this.lines[i],l=kt(o.markedSpans,this);if(null!=l.from&&(n=tt(t?o:Ze(o),l.from),-1==e))return n;if(null!=l.to&&(r=tt(t?o:Ze(o),l.to),1==e))return r}return n&&{from:n,to:r}},oo.prototype.changed=function(){var n=this,r=this.find(-1,!0),i=this,o=this.doc.cm;r&&o&&Pr(o,function(){var e=r.line,t=Ze(r.line),t=Sn(o,t);t&&(On(t),o.curOp.selectionChanged=o.curOp.forceUpdate=!0),o.curOp.updateMaxLine=!0,Bt(i.doc,e)||null==i.height||(t=i.height,i.height=null,(t=fn(i)-t)&&qe(e,e.height+t)),rn(o,"markerChanged",o,n)})},oo.prototype.attachLine=function(e){var t;!this.lines.length&&this.doc.cm&&((t=this.doc.cm.curOp).maybeHiddenMarkers&&-1!=R(t.maybeHiddenMarkers,this)||(t.maybeUnhiddenMarkers||(t.maybeUnhiddenMarkers=[])).push(this)),this.lines.push(e)},oo.prototype.detachLine=function(e){this.lines.splice(R(this.lines,e),1),!this.lines.length&&this.doc.cm&&((e=this.doc.cm.curOp).maybeHiddenMarkers||(e.maybeHiddenMarkers=[])).push(this)},Se(oo);var ao=function(e,t){this.markers=e,this.primary=t;for(var n=0;n<e.length;++n)e[n].parent=this};function uo(e){return e.findMarks(tt(e.first,0),e.clipPos(tt(e.lastLine())),function(e){return e.parent})}function co(o){for(var e=0;e<o.length;e++)!function(e){var t=o[e],n=[t.primary.doc];mi(t.primary.doc,function(e){return n.push(e)});for(var r=0;r<t.markers.length;r++){var i=t.markers[r];-1==R(n,i.doc)&&(i.parent=null,t.markers.splice(r--,1))}}(e)}ao.prototype.clear=function(){if(!this.explicitlyCleared){this.explicitlyCleared=!0;for(var e=0;e<this.markers.length;++e)this.markers[e].clear();rn(this,"clear")}},ao.prototype.find=function(e,t){return this.primary.find(e,t)},Se(ao);function ho(e,t,n,r,i){if(!(this instanceof ho))return new ho(e,t,n,r,i);null==n&&(n=0),no.call(this,[new to([new Kt("",null)])]),this.first=n,this.scrollTop=this.scrollLeft=0,this.cantEdit=!1,this.cleanGeneration=1,n=tt(this.modeFrontier=this.highlightFrontier=n,0),this.sel=si(n),this.history=new bi(null),this.id=++fo,this.modeOption=t,this.lineSep=r,this.direction="rtl"==i?"rtl":"ltr",this.extend=!1,"string"==typeof e&&(e=this.splitLines(e)),gi(this,{from:n,to:n,text:e}),Pi(this,si(n),G)}var fo=0;(ho.prototype=q(no.prototype,{constructor:ho,iter:function(e,t,n){n?this.iterN(e-this.first,t-e,n):this.iterN(this.first,this.first+this.size,e)},insert:function(e,t){for(var n=0,r=0;r<t.length;++r)n+=t[r].height;this.insertInner(e-this.first,t,n)},remove:function(e,t){this.removeInner(e-this.first,t)},getValue:function(e){var t=_e(this,this.first,this.first+this.size);return!1===e?t:t.join(e||this.lineSeparator())},setValue:Rr(function(e){var t=tt(this.first,0),n=this.first+this.size-1;ji(this,{from:t,to:tt(n,Ye(this,n).text.length),text:this.splitLines(e),origin:"setValue",full:!0},!0),this.cm&&xr(this.cm,0,0),Pi(this,si(t),G)}),replaceRange:function(e,t,n,r){qi(this,e,t=at(this,t),n=n?at(this,n):t,r)},getRange:function(e,t,n){t=$e(this,at(this,e),at(this,t));return!1===n?t:""===n?t.join(""):t.join(n||this.lineSeparator())},getLine:function(e){e=this.getLineHandle(e);return e&&e.text},getLineHandle:function(e){if(Je(this,e))return Ye(this,e)},getLineNumber:Ze,getLineHandleVisualStart:function(e){return It(e="number"==typeof e?Ye(this,e):e)},lineCount:function(){return this.size},firstLine:function(){return this.first},lastLine:function(){return this.first+this.size-1},clipPos:function(e){return at(this,e)},getCursor:function(e){var t=this.sel.primary(),t=null==e||"head"==e?t.head:"anchor"==e?t.anchor:"end"==e||"to"==e||!1===e?t.to():t.from();return t},listSelections:function(){return this.sel.ranges},somethingSelected:function(){return this.sel.somethingSelected()},setCursor:Rr(function(e,t,n){Hi(this,at(this,"number"==typeof e?tt(e,t||0):e),null,n)}),setSelection:Rr(function(e,t,n){Hi(this,at(this,e),at(this,t||e),n)}),extendSelection:Rr(function(e,t,n){Ai(this,at(this,e),t&&at(this,t),n)}),extendSelections:Rr(function(e,t){Di(this,ut(this,e),t)}),extendSelectionsBy:Rr(function(e,t){Di(this,ut(this,$(this.sel.ranges,e)),t)}),setSelections:Rr(function(e,t,n){if(e.length){for(var r=[],i=0;i<e.length;i++)r[i]=new oi(at(this,e[i].anchor),at(this,e[i].head||e[i].anchor));null==t&&(t=Math.min(e.length-1,this.sel.primIndex)),Pi(this,li(this.cm,r,t),n)}}),addSelection:Rr(function(e,t,n){var r=this.sel.ranges.slice(0);r.push(new oi(at(this,e),at(this,t||e))),Pi(this,li(this.cm,r,r.length-1),n)}),getSelection:function(e){for(var t=this.sel.ranges,n=0;n<t.length;n++)var r=$e(this,t[n].from(),t[n].to()),i=i?i.concat(r):r;return!1===e?i:i.join(e||this.lineSeparator())},getSelections:function(e){for(var t=[],n=this.sel.ranges,r=0;r<n.length;r++){var i=$e(this,n[r].from(),n[r].to());!1!==e&&(i=i.join(e||this.lineSeparator())),t[r]=i}return t},replaceSelection:function(e,t,n){for(var r=[],i=0;i<this.sel.ranges.length;i++)r[i]=e;this.replaceSelections(r,t,n||"+input")},replaceSelections:Rr(function(e,t,n){for(var r=[],i=this.sel,o=0;o<i.ranges.length;o++){var l=i.ranges[o];r[o]={from:l.from(),to:l.to(),text:this.splitLines(e[o]),origin:n}}for(var t=t&&"end"!=t&&function(e,t,n){for(var r=[],i=u=tt(e.first,0),o=0;o<t.length;o++){var l=t[o],s=hi(l.from,u,i),a=hi(ai(l),u,i),u=l.to,i=a;"around"==n?(l=nt((l=e.sel.ranges[o]).head,l.anchor)<0,r[o]=new oi(l?a:s,l?s:a)):r[o]=new oi(s,s)}return new ii(r,e.sel.primIndex)}(this,r,t),s=r.length-1;0<=s;s--)ji(this,r[s]);t?Fi(this,t):this.cm&&wr(this.cm)}),undo:Rr(function(){Yi(this,"undo")}),redo:Rr(function(){Yi(this,"redo")}),undoSelection:Rr(function(){Yi(this,"undo",!0)}),redoSelection:Rr(function(){Yi(this,"redo",!0)}),setExtending:function(e){this.extend=e},getExtending:function(){return this.extend},historySize:function(){for(var e=this.history,t=0,n=0,r=0;r<e.done.length;r++)e.done[r].ranges||++t;for(var i=0;i<e.undone.length;i++)e.undone[i].ranges||++n;return{undo:t,redo:n}},clearHistory:function(){var t=this;this.history=new bi(this.history),mi(this,function(e){return e.history=t.history},!0)},markClean:function(){this.cleanGeneration=this.changeGeneration(!0)},changeGeneration:function(e){return e&&(this.history.lastOp=this.history.lastSelOp=this.history.lastOrigin=null),this.history.generation},isClean:function(e){return this.history.generation==(e||this.cleanGeneration)},getHistory:function(){return{done:Ni(this.history.done),undone:Ni(this.history.undone)}},setHistory:function(e){var t=this.history=new bi(this.history);t.done=Ni(e.done.slice(0),null,!0),t.undone=Ni(e.undone.slice(0),null,!0)},setGutterMarker:Rr(function(e,n,r){return eo(this,e,"gutter",function(e){var t=e.gutterMarkers||(e.gutterMarkers={});return!(t[n]=r)&&ee(t)&&(e.gutterMarkers=null),1})}),clearGutter:Rr(function(t){var n=this;this.iter(function(e){e.gutterMarkers&&e.gutterMarkers[t]&&eo(n,e,"gutter",function(){return e.gutterMarkers[t]=null,ee(e.gutterMarkers)&&(e.gutterMarkers=null),1})})}),lineInfo:function(e){var t;if("number"==typeof e){if(!Je(this,e))return null;if(!(e=Ye(this,t=e)))return null}else if(null==(t=Ze(e)))return null;return{line:t,handle:e,text:e.text,gutterMarkers:e.gutterMarkers,textClass:e.textClass,bgClass:e.bgClass,wrapClass:e.wrapClass,widgets:e.widgets}},addLineClass:Rr(function(e,n,r){return eo(this,e,"gutter"==n?"gutter":"class",function(e){var t="text"==n?"textClass":"background"==n?"bgClass":"gutter"==n?"gutterClass":"wrapClass";if(e[t]){if(C(r).test(e[t]))return;e[t]+=" "+r}else e[t]=r;return 1})}),removeLineClass:Rr(function(e,o,l){return eo(this,e,"gutter"==o?"gutter":"class",function(e){var t="text"==o?"textClass":"background"==o?"bgClass":"gutter"==o?"gutterClass":"wrapClass",n=e[t];if(n){if(null==l)e[t]=null;else{var r=n.match(C(l));if(!r)return;var i=r.index+r[0].length;e[t]=n.slice(0,r.index)+(r.index&&i!=n.length?" ":"")+n.slice(i)||null}return 1}})}),addLineWidget:Rr(function(e,t,n){return e=e,i=new ro(r=this,t,n),(o=r.cm)&&i.noHScroll&&(o.display.alignWidgets=!0),eo(r,e,"widget",function(e){var t=e.widgets||(e.widgets=[]);return null==i.insertAt?t.push(i):t.splice(Math.min(t.length,Math.max(0,i.insertAt)),0,i),i.line=e,o&&!Bt(r,e)&&(t=Gt(e)<r.scrollTop,qe(e,e.height+fn(i)),t&&br(o,i.height),o.curOp.forceUpdate=!0),1}),o&&rn(o,"lineWidgetAdded",o,i,"number"==typeof e?e:Ze(e)),i;var r,i,o}),removeLineWidget:function(e){e.clear()},markText:function(e,t,n){return so(this,at(this,e),at(this,t),n,n&&n.type||"range")},setBookmark:function(e,t){t={replacedWith:t&&(null==t.nodeType?t.widget:t),insertLeft:t&&t.insertLeft,clearWhenEmpty:!1,shared:t&&t.shared,handleMouseEvents:t&&t.handleMouseEvents};return so(this,e=at(this,e),e,t,"bookmark")},findMarksAt:function(e){var t=[],n=Ye(this,(e=at(this,e)).line).markedSpans;if(n)for(var r=0;r<n.length;++r){var i=n[r];(null==i.from||i.from<=e.ch)&&(null==i.to||i.to>=e.ch)&&t.push(i.marker.parent||i.marker)}return t},findMarks:function(i,o,l){i=at(this,i),o=at(this,o);var s=[],a=i.line;return this.iter(i.line,o.line+1,function(e){var t=e.markedSpans;if(t)for(var n=0;n<t.length;n++){var r=t[n];null!=r.to&&a==i.line&&i.ch>=r.to||null==r.from&&a!=i.line||null!=r.from&&a==o.line&&r.from>=o.ch||l&&!l(r.marker)||s.push(r.marker.parent||r.marker)}++a}),s},getAllMarks:function(){var r=[];return this.iter(function(e){var t=e.markedSpans;if(t)for(var n=0;n<t.length;++n)null!=t[n].from&&r.push(t[n].marker)}),r},posFromIndex:function(t){var n,r=this.first,i=this.lineSeparator().length;return this.iter(function(e){e=e.text.length+i;if(t<e)return n=t,!0;t-=e,++r}),at(this,tt(r,n))},indexFromPos:function(e){var t=(e=at(this,e)).ch;if(e.line<this.first||e.ch<0)return 0;var n=this.lineSeparator().length;return this.iter(this.first,e.line,function(e){t+=e.text.length+n}),t},copy:function(e){var t=new ho(_e(this,this.first,this.first+this.size),this.modeOption,this.first,this.lineSep,this.direction);return t.scrollTop=this.scrollTop,t.scrollLeft=this.scrollLeft,t.sel=this.sel,t.extend=!1,e&&(t.history.undoDepth=this.history.undoDepth,t.setHistory(this.getHistory())),t},linkedDoc:function(e){var t=this.first,n=this.first+this.size;null!=(e=e||{}).from&&e.from>t&&(t=e.from),null!=e.to&&e.to<n&&(n=e.to);t=new ho(_e(this,t,n),e.mode||this.modeOption,t,this.lineSep,this.direction);return e.sharedHist&&(t.history=this.history),(this.linked||(this.linked=[])).push({doc:t,sharedHist:e.sharedHist}),t.linked=[{doc:this,isParent:!0,sharedHist:e.sharedHist}],function(e,t){for(var n=0;n<t.length;n++){var r=t[n],i=r.find(),o=e.clipPos(i.from),i=e.clipPos(i.to);nt(o,i)&&(i=so(e,o,i,r.primary,r.primary.type),r.markers.push(i),i.parent=r)}}(t,uo(this)),t},unlinkDoc:function(e){if(e instanceof cl&&(e=e.doc),this.linked)for(var t=0;t<this.linked.length;++t)if(this.linked[t].doc==e){this.linked.splice(t,1),e.unlinkDoc(this),co(uo(this));break}var n;e.history==this.history&&(n=[e.id],mi(e,function(e){return n.push(e.id)},!0),e.history=new bi(null),e.history.done=Ni(this.history.done,n),e.history.undone=Ni(this.history.undone,n))},iterLinkedDocs:function(e){mi(this,e)},getMode:function(){return this.mode},getEditor:function(){return this.cm},splitLines:function(e){return this.lineSep?e.split(this.lineSep):He(e)},lineSeparator:function(){return this.lineSep||"\n"},setDirection:Rr(function(e){var t;(e="rtl"!=e?"ltr":e)!=this.direction&&(this.direction=e,this.iter(function(e){return e.order=null}),this.cm&&Pr(t=this.cm,function(){yi(t),tr(t)}))})})).eachLine=ho.prototype.iter;var po=0;function go(e){var r=this;if(mo(r),!we(r,e)&&!pn(r.display,e)){Le(e),w&&(po=+new Date);var t=Jn(r,e,!0),n=e.dataTransfer.files;if(t&&!r.isReadOnly())if(n&&n.length&&window.FileReader&&window.File)for(var i=n.length,o=Array(i),l=0,s=function(){++l==i&&Er(r,function(){var e={from:t=at(r.doc,t),to:t,text:r.doc.splitLines(o.filter(function(e){return null!=e}).join(r.doc.lineSeparator())),origin:"paste"};ji(r.doc,e),Fi(r.doc,si(at(r.doc,t),at(r.doc,ai(e))))})()},a=0;a<n.length;a++)!function(e,t){var n;r.options.allowDropFileTypes&&-1==R(r.options.allowDropFileTypes,e.type)?s():((n=new FileReader).onerror=function(){return s()},n.onload=function(){var e=n.result;/[\x00-\x08\x0e-\x1f]{2}/.test(e)||(o[t]=e),s()},n.readAsText(e))}(n[a],a);else{if(r.state.draggingText&&-1<r.doc.sel.contains(t))return r.state.draggingText(e),void setTimeout(function(){return r.display.input.focus()},20);try{var u,c=e.dataTransfer.getData("Text");if(c){if(r.state.draggingText&&!r.state.draggingText.copy&&(u=r.listSelections()),Ei(r.doc,si(t,t)),u)for(var h=0;h<u.length;++h)qi(r.doc,"",u[h].anchor,u[h].head,"drag");r.replaceSelection(c,"around","paste"),r.display.input.focus()}}catch(e){}}}}function mo(e){e.display.dragCursor&&(e.display.lineSpace.removeChild(e.display.dragCursor),e.display.dragCursor=null)}function vo(t){if(document.getElementsByClassName){for(var e=document.getElementsByClassName("CodeMirror"),n=[],r=0;r<e.length;r++){var i=e[r].CodeMirror;i&&n.push(i)}n.length&&n[0].operation(function(){for(var e=0;e<n.length;e++)t(n[e])})}}var yo=!1;function bo(){var e;yo||(me(window,"resize",function(){null==e&&(e=setTimeout(function(){e=null,vo(wo)},100))}),me(window,"blur",function(){return vo(pr)}),yo=!0)}function wo(e){var t=e.display;t.cachedCharWidth=t.cachedTextHeight=t.cachedPaddingH=null,t.scrollbarsClipped=!1,e.setSize()}for(var xo={3:"Pause",8:"Backspace",9:"Tab",13:"Enter",16:"Shift",17:"Ctrl",18:"Alt",19:"Pause",20:"CapsLock",27:"Esc",32:"Space",33:"PageUp",34:"PageDown",35:"End",36:"Home",37:"Left",38:"Up",39:"Right",40:"Down",44:"PrintScrn",45:"Insert",46:"Delete",59:";",61:"=",91:"Mod",92:"Mod",93:"Mod",106:"*",107:"=",109:"-",110:".",111:"/",145:"ScrollLock",173:"-",186:";",187:"=",188:",",189:"-",190:".",191:"/",192:"`",219:"[",220:"\\",221:"]",222:"'",224:"Mod",63232:"Up",63233:"Down",63234:"Left",63235:"Right",63272:"Delete",63273:"Home",63275:"End",63276:"PageUp",63277:"PageDown",63302:"Insert"},Co=0;Co<10;Co++)xo[Co+48]=xo[Co+96]=String(Co);for(var So=65;So<=90;So++)xo[So]=String.fromCharCode(So);for(var Lo=1;Lo<=12;Lo++)xo[Lo+111]=xo[Lo+63235]="F"+Lo;var ko={};function To(e){var t,n,r,i,o=e.split(/-(?!$)/);e=o[o.length-1];for(var l=0;l<o.length-1;l++){var s=o[l];if(/^(cmd|meta|m)$/i.test(s))i=!0;else if(/^a(lt)?$/i.test(s))t=!0;else if(/^(c|ctrl|control)$/i.test(s))n=!0;else{if(!/^s(hift)?$/i.test(s))throw new Error("Unrecognized modifier name: "+s);r=!0}}return t&&(e="Alt-"+e),n&&(e="Ctrl-"+e),i&&(e="Cmd-"+e),e=r?"Shift-"+e:e}function Mo(e){var t,n,r={};for(t in e)if(e.hasOwnProperty(t)){var i=e[t];if(!/^(name|fallthrough|(de|at)tach)$/.test(t))if("..."!=i){for(var o=$(t.split(" "),To),l=0;l<o.length;l++){var s=void 0,a=void 0,s=l==o.length-1?(a=o.join(" "),i):(a=o.slice(0,l+1).join(" "),"..."),u=r[a];if(u){if(u!=s)throw new Error("Inconsistent bindings for "+a)}else r[a]=s}delete e[t]}else delete e[t]}for(n in r)e[n]=r[n];return e}function No(e,t,n,r){var i=(t=Wo(t)).call?t.call(e,r):t[e];if(!1===i)return"nothing";if("..."===i)return"multi";if(null!=i&&n(i))return"handled";if(t.fallthrough){if("[object Array]"!=Object.prototype.toString.call(t.fallthrough))return No(e,t.fallthrough,n,r);for(var o=0;o<t.fallthrough.length;o++){var l=No(e,t.fallthrough[o],n,r);if(l)return l}}}function Oo(e){e="string"==typeof e?e:xo[e.keyCode];return"Ctrl"==e||"Alt"==e||"Shift"==e||"Mod"==e}function Ao(e,t,n){var r=e;return t.altKey&&"Alt"!=r&&(e="Alt-"+e),(b?t.metaKey:t.ctrlKey)&&"Ctrl"!=r&&(e="Ctrl-"+e),(b?t.ctrlKey:t.metaKey)&&"Mod"!=r&&(e="Cmd-"+e),e=!n&&t.shiftKey&&"Shift"!=r?"Shift-"+e:e}function Do(e,t){if(p&&34==e.keyCode&&e.char)return!1;var n=xo[e.keyCode];return null!=n&&!e.altGraphKey&&Ao(n=3==e.keyCode&&e.code?e.code:n,e,t)}function Wo(e){return"string"==typeof e?ko[e]:e}function Ho(t,e){for(var n=t.doc.sel.ranges,r=[],i=0;i<n.length;i++){for(var o=e(n[i]);r.length&&nt(o.from,Y(r).to)<=0;){var l=r.pop();if(nt(l.from,o.from)<0){o.from=l.from;break}}r.push(o)}Pr(t,function(){for(var e=r.length-1;0<=e;e--)qi(t.doc,"",r[e].from,r[e].to,"+delete");wr(t)})}function Fo(e,t,n){n=re(e.text,t+n,n);return n<0||n>e.text.length?null:n}function Po(e,t,n){e=Fo(e,t.ch,n);return null==e?null:new tt(t.line,e,n<0?"after":"before")}function Eo(e,t,n,r,i){if(e){"rtl"==t.doc.direction&&(i=-i);var o=pe(n,t.doc.direction);if(o){var l,s,a,e=i<0?Y(o):o[0],o=i<0==(1==e.level)?"after":"before";return 0<e.level||"rtl"==t.doc.direction?(l=Ln(t,n),s=i<0?n.text.length-1:0,a=kn(t,l,s).top,s=ie(function(e){return kn(t,l,e).top==a},i<0==(1==e.level)?e.from:e.to-1,s),"before"==o&&(s=Fo(n,s,1))):s=i<0?e.to:e.from,new tt(r,s,o)}}return new tt(r,i<0?n.text.length:0,i<0?"before":"after")}function Io(t,n,s,e){var a=pe(n,t.doc.direction);if(!a)return Po(n,s,e);s.ch>=n.text.length?(s.ch=n.text.length,s.sticky="before"):s.ch<=0&&(s.ch=0,s.sticky="after");var r=le(a,s.ch,s.sticky),i=a[r];if("ltr"==t.doc.direction&&i.level%2==0&&(0<e?i.to>s.ch:i.from<s.ch))return Po(n,s,e);function u(e,t){return Fo(n,e instanceof tt?e.ch:e,t)}function o(e){return t.options.lineWrapping?(l=l||Ln(t,n),Vn(t,n,l,e)):{begin:0,end:n.text.length}}var l,c=o("before"==s.sticky?u(s,-1):s.ch);if("rtl"==t.doc.direction||1==i.level){var h=1==i.level==e<0,d=u(s,h?1:-1);if(null!=d&&(h?d<=i.to&&d<=c.end:d>=i.from&&d>=c.begin))return new tt(s.line,d,h?"before":"after")}h=function(e,t,n){for(var r=function(e,t){return t?new tt(s.line,u(e,1),"before"):new tt(s.line,e,"after")};0<=e&&e<a.length;e+=t){var i=a[e],o=0<t==(1!=i.level),l=o?n.begin:u(n.end,-1);if(i.from<=l&&l<i.to)return r(l,o);if(l=o?i.from:u(i.to,-1),n.begin<=l&&l<n.end)return r(l,o)}},r=h(r+e,e,c);if(r)return r;c=0<e?c.end:u(c.begin,-1);return null==c||0<e&&c==n.text.length||!(r=h(0<e?0:a.length-1,e,o(c)))?null:r}ko.basic={Left:"goCharLeft",Right:"goCharRight",Up:"goLineUp",Down:"goLineDown",End:"goLineEnd",Home:"goLineStartSmart",PageUp:"goPageUp",PageDown:"goPageDown",Delete:"delCharAfter",Backspace:"delCharBefore","Shift-Backspace":"delCharBefore",Tab:"defaultTab","Shift-Tab":"indentAuto",Enter:"newlineAndIndent",Insert:"toggleOverwrite",Esc:"singleSelection"},ko.pcDefault={"Ctrl-A":"selectAll","Ctrl-D":"deleteLine","Ctrl-Z":"undo","Shift-Ctrl-Z":"redo","Ctrl-Y":"redo","Ctrl-Home":"goDocStart","Ctrl-End":"goDocEnd","Ctrl-Up":"goLineUp","Ctrl-Down":"goLineDown","Ctrl-Left":"goGroupLeft","Ctrl-Right":"goGroupRight","Alt-Left":"goLineStart","Alt-Right":"goLineEnd","Ctrl-Backspace":"delGroupBefore","Ctrl-Delete":"delGroupAfter","Ctrl-S":"save","Ctrl-F":"find","Ctrl-G":"findNext","Shift-Ctrl-G":"findPrev","Shift-Ctrl-F":"replace","Shift-Ctrl-R":"replaceAll","Ctrl-[":"indentLess","Ctrl-]":"indentMore","Ctrl-U":"undoSelection","Shift-Ctrl-U":"redoSelection","Alt-U":"redoSelection",fallthrough:"basic"},ko.emacsy={"Ctrl-F":"goCharRight","Ctrl-B":"goCharLeft","Ctrl-P":"goLineUp","Ctrl-N":"goLineDown","Ctrl-A":"goLineStart","Ctrl-E":"goLineEnd","Ctrl-V":"goPageDown","Shift-Ctrl-V":"goPageUp","Ctrl-D":"delCharAfter","Ctrl-H":"delCharBefore","Alt-Backspace":"delWordBefore","Ctrl-K":"killLine","Ctrl-T":"transposeChars","Ctrl-O":"openLine"},ko.macDefault={"Cmd-A":"selectAll","Cmd-D":"deleteLine","Cmd-Z":"undo","Shift-Cmd-Z":"redo","Cmd-Y":"redo","Cmd-Home":"goDocStart","Cmd-Up":"goDocStart","Cmd-End":"goDocEnd","Cmd-Down":"goDocEnd","Alt-Left":"goGroupLeft","Alt-Right":"goGroupRight","Cmd-Left":"goLineLeft","Cmd-Right":"goLineRight","Alt-Backspace":"delGroupBefore","Ctrl-Alt-Backspace":"delGroupAfter","Alt-Delete":"delGroupAfter","Cmd-S":"save","Cmd-F":"find","Cmd-G":"findNext","Shift-Cmd-G":"findPrev","Cmd-Alt-F":"replace","Shift-Cmd-Alt-F":"replaceAll","Cmd-[":"indentLess","Cmd-]":"indentMore","Cmd-Backspace":"delWrappedLineLeft","Cmd-Delete":"delWrappedLineRight","Cmd-U":"undoSelection","Shift-Cmd-U":"redoSelection","Ctrl-Up":"goDocStart","Ctrl-Down":"goDocEnd",fallthrough:["basic","emacsy"]},ko.default=g?ko.macDefault:ko.pcDefault;var Ro={selectAll:Vi,singleSelection:function(e){return e.setSelection(e.getCursor("anchor"),e.getCursor("head"),G)},killLine:function(n){return Ho(n,function(e){if(e.empty()){var t=Ye(n.doc,e.head.line).text.length;return e.head.ch==t&&e.head.line<n.lastLine()?{from:e.head,to:tt(e.head.line+1,0)}:{from:e.head,to:tt(e.head.line,t)}}return{from:e.from(),to:e.to()}})},deleteLine:function(t){return Ho(t,function(e){return{from:tt(e.from().line,0),to:at(t.doc,tt(e.to().line+1,0))}})},delLineLeft:function(e){return Ho(e,function(e){return{from:tt(e.from().line,0),to:e.from()}})},delWrappedLineLeft:function(n){return Ho(n,function(e){var t=n.charCoords(e.head,"div").top+5;return{from:n.coordsChar({left:0,top:t},"div"),to:e.from()}})},delWrappedLineRight:function(n){return Ho(n,function(e){var t=n.charCoords(e.head,"div").top+5,t=n.coordsChar({left:n.display.lineDiv.offsetWidth+100,top:t},"div");return{from:e.from(),to:t}})},undo:function(e){return e.undo()},redo:function(e){return e.redo()},undoSelection:function(e){return e.undoSelection()},redoSelection:function(e){return e.redoSelection()},goDocStart:function(e){return e.extendSelection(tt(e.firstLine(),0))},goDocEnd:function(e){return e.extendSelection(tt(e.lastLine()))},goLineStart:function(t){return t.extendSelectionsBy(function(e){return zo(t,e.head.line)},{origin:"+move",bias:1})},goLineStartSmart:function(t){return t.extendSelectionsBy(function(e){return Bo(t,e.head)},{origin:"+move",bias:1})},goLineEnd:function(t){return t.extendSelectionsBy(function(e){return function(e,t){var n=Ye(e.doc,t),r=function(e){for(var t;t=Pt(e);)e=t.find(1,!0).line;return e}(n);r!=n&&(t=Ze(r));return Eo(!0,e,n,t,-1)}(t,e.head.line)},{origin:"+move",bias:-1})},goLineRight:function(t){return t.extendSelectionsBy(function(e){e=t.cursorCoords(e.head,"div").top+5;return t.coordsChar({left:t.display.lineDiv.offsetWidth+100,top:e},"div")},V)},goLineLeft:function(t){return t.extendSelectionsBy(function(e){e=t.cursorCoords(e.head,"div").top+5;return t.coordsChar({left:0,top:e},"div")},V)},goLineLeftSmart:function(n){return n.extendSelectionsBy(function(e){var t=n.cursorCoords(e.head,"div").top+5,t=n.coordsChar({left:0,top:t},"div");return t.ch<n.getLine(t.line).search(/\S/)?Bo(n,e.head):t},V)},goLineUp:function(e){return e.moveV(-1,"line")},goLineDown:function(e){return e.moveV(1,"line")},goPageUp:function(e){return e.moveV(-1,"page")},goPageDown:function(e){return e.moveV(1,"page")},goCharLeft:function(e){return e.moveH(-1,"char")},goCharRight:function(e){return e.moveH(1,"char")},goColumnLeft:function(e){return e.moveH(-1,"column")},goColumnRight:function(e){return e.moveH(1,"column")},goWordLeft:function(e){return e.moveH(-1,"word")},goGroupRight:function(e){return e.moveH(1,"group")},goGroupLeft:function(e){return e.moveH(-1,"group")},goWordRight:function(e){return e.moveH(1,"word")},delCharBefore:function(e){return e.deleteH(-1,"codepoint")},delCharAfter:function(e){return e.deleteH(1,"char")},delWordBefore:function(e){return e.deleteH(-1,"word")},delWordAfter:function(e){return e.deleteH(1,"word")},delGroupBefore:function(e){return e.deleteH(-1,"group")},delGroupAfter:function(e){return e.deleteH(1,"group")},indentAuto:function(e){return e.indentSelection("smart")},indentMore:function(e){return e.indentSelection("add")},indentLess:function(e){return e.indentSelection("subtract")},insertTab:function(e){return e.replaceSelection("\t")},insertSoftTab:function(e){for(var t=[],n=e.listSelections(),r=e.options.tabSize,i=0;i<n.length;i++){var o=n[i].from(),o=E(e.getLine(o.line),o.ch,r);t.push(X(r-o%r))}e.replaceSelections(t)},defaultTab:function(e){e.somethingSelected()?e.indentSelection("add"):e.execCommand("insertTab")},transposeChars:function(l){return Pr(l,function(){for(var e,t,n,r=l.listSelections(),i=[],o=0;o<r.length;o++)r[o].empty()&&(e=r[o].head,(t=Ye(l.doc,e.line).text)&&(0<(e=e.ch==t.length?new tt(e.line,e.ch-1):e).ch?(e=new tt(e.line,e.ch+1),l.replaceRange(t.charAt(e.ch-1)+t.charAt(e.ch-2),tt(e.line,e.ch-2),e,"+transpose")):e.line>l.doc.first&&((n=Ye(l.doc,e.line-1).text)&&(e=new tt(e.line,1),l.replaceRange(t.charAt(0)+l.doc.lineSeparator()+n.charAt(n.length-1),tt(e.line-1,n.length-1),e,"+transpose")))),i.push(new oi(e,e)));l.setSelections(i)})},newlineAndIndent:function(r){return Pr(r,function(){for(var e=(t=r.listSelections()).length-1;0<=e;e--)r.replaceRange(r.doc.lineSeparator(),t[e].anchor,t[e].head,"+input");for(var t=r.listSelections(),n=0;n<t.length;n++)r.indentLine(t[n].from().line,null,!0);wr(r)})},openLine:function(e){return e.replaceSelection("\n","start")},toggleOverwrite:function(e){return e.toggleOverwrite()}};function zo(e,t){var n=Ye(e.doc,t),r=It(n);return Eo(!0,e,r,t=r!=n?Ze(r):t,1)}function Bo(e,t){var n=zo(e,t.line),r=Ye(e.doc,n.line),e=pe(r,e.doc.direction);if(e&&0!=e[0].level)return n;r=Math.max(n.ch,r.text.search(/\S/)),t=t.line==n.line&&t.ch<=r&&t.ch;return tt(n.line,t?0:r,n.sticky)}function Go(e,t,n){if("string"==typeof t&&!(t=Ro[t]))return!1;e.display.input.ensurePolled();var r=e.display.shift,i=!1;try{e.isReadOnly()&&(e.state.suppressEdits=!0),n&&(e.display.shift=!1),i=t(e)!=B}finally{e.display.shift=r,e.state.suppressEdits=!1}return i}var Uo=new I;function Vo(e,t,n,r){var i=e.state.keySeq;if(i){if(Oo(t))return"handled";if(/\'$/.test(t)?e.state.keySeq=null:Uo.set(50,function(){e.state.keySeq==i&&(e.state.keySeq=null,e.display.input.reset())}),Ko(e,i+" "+t,n,r))return!0}return Ko(e,t,n,r)}function Ko(e,t,n,r){r=function(e,t,n){for(var r=0;r<e.state.keyMaps.length;r++){var i=No(t,e.state.keyMaps[r],n,e);if(i)return i}return e.options.extraKeys&&No(t,e.options.extraKeys,n,e)||No(t,e.options.keyMap,n,e)}(e,t,r);return"multi"==r&&(e.state.keySeq=t),"handled"==r&&rn(e,"keyHandled",e,t,n),"handled"!=r&&"multi"!=r||(Le(n),cr(e)),!!r}function jo(t,e){var n=Do(e,!0);return!!n&&(e.shiftKey&&!t.state.keySeq?Vo(t,"Shift-"+n,e,function(e){return Go(t,e,!0)})||Vo(t,n,e,function(e){if("string"==typeof e?/^go[A-Z]/.test(e):e.motion)return Go(t,e)}):Vo(t,n,e,function(e){return Go(t,e)}))}var Xo=null;function Yo(e){var t,n,r,i=this;function o(e){18!=e.keyCode&&e.altKey||(S(r,"CodeMirror-crosshair"),ye(document,"keyup",o),ye(document,"mouseover",o))}e.target&&e.target!=i.display.input.getField()||(i.curOp.focus=O(),we(i,e)||(w&&v<11&&27==e.keyCode&&(e.returnValue=!1),t=e.keyCode,i.display.shift=16==t||e.shiftKey,n=jo(i,e),p&&(Xo=n?t:null,!n&&88==t&&!Pe&&(g?e.metaKey:e.ctrlKey)&&i.replaceSelection("",null,"cut")),d&&!g&&!n&&46==t&&e.shiftKey&&!e.ctrlKey&&document.execCommand&&document.execCommand("cut"),18!=t||/\bCodeMirror-crosshair\b/.test(i.display.lineDiv.className)||(A(r=i.display.lineDiv,"CodeMirror-crosshair"),me(document,"keyup",o),me(document,"mouseover",o))))}function $o(e){16==e.keyCode&&(this.doc.sel.shift=!1),we(this,e)}function _o(e){var t=this;if(!(e.target&&e.target!=t.display.input.getField()||pn(t.display,e)||we(t,e)||e.ctrlKey&&!e.altKey||g&&e.metaKey)){var n,r=e.keyCode,i=e.charCode;if(p&&r==Xo)return Xo=null,void Le(e);p&&(!e.which||e.which<10)&&jo(t,e)||"\b"!=(i=String.fromCharCode(null==i?r:i))&&(Vo(n=t,"'"+i+"'",e,function(e){return Go(n,e,!0)})||t.display.input.onKeyPress(e))}}function qo(e,t,n){this.time=e,this.pos=t,this.button=n}var Zo,Qo;function Jo(e){var t,n,r,i,o,l=this,s=l.display;we(l,e)||s.activeTouch&&s.input.supportsTouch()||(s.input.ensurePolled(),s.shift=e.shiftKey,pn(s,e)?f||(s.scroller.draggable=!1,setTimeout(function(){return s.scroller.draggable=!0},100)):nl(l,e)||(t=Jn(l,e),n=Oe(e),i=t?(r=t,i=n,o=+new Date,Qo&&Qo.compare(o,r,i)?(Zo=Qo=null,"triple"):Zo&&Zo.compare(o,r,i)?(Qo=new qo(o,r,i),Zo=null,"double"):(Zo=new qo(o,r,i),Qo=null,"single")):"single",window.focus(),1==n&&l.state.selectingText&&l.state.selectingText(e),t&&function(n,e,r,t,i){var o="Click";"double"==t?o="Double"+o:"triple"==t&&(o="Triple"+o);return Vo(n,Ao(o=(1==e?"Left":2==e?"Middle":"Right")+o,i),i,function(e){if(!(e="string"==typeof e?Ro[e]:e))return!1;var t=!1;try{n.isReadOnly()&&(n.state.suppressEdits=!0),t=e(n,r)!=B}finally{n.state.suppressEdits=!1}return t})}(l,n,t,i,e)||(1==n?t?function(e,t,n,r){w?setTimeout(F(hr,e),0):e.curOp.focus=O();var i,o=function(e,t,n){var r=e.getOption("configureMouse"),i=r?r(e,t,n):{};null==i.unit&&(r=m?n.shiftKey&&n.metaKey:n.altKey,i.unit=r?"rectangle":"single"==t?"char":"double"==t?"word":"line");null!=i.extend&&!e.doc.extend||(i.extend=e.doc.extend||n.shiftKey);null==i.addNew&&(i.addNew=g?n.metaKey:n.ctrlKey);null==i.moveOnDrag&&(i.moveOnDrag=!(g?n.altKey:n.ctrlKey));return i}(e,n,r),l=e.doc.sel;(e.options.dragDrop&&We&&!e.isReadOnly()&&"single"==n&&-1<(i=l.contains(t))&&(nt((i=l.ranges[i]).from(),t)<0||0<t.xRel)&&(0<nt(i.to(),t)||t.xRel<0)?function(t,n,r,i){var o=t.display,l=!1,s=Er(t,function(e){f&&(o.scroller.draggable=!1),t.state.draggingText=!1,t.state.delayingBlurEvent&&(t.hasFocus()?t.state.delayingBlurEvent=!1:dr(t)),ye(o.wrapper.ownerDocument,"mouseup",s),ye(o.wrapper.ownerDocument,"mousemove",a),ye(o.scroller,"dragstart",u),ye(o.scroller,"drop",s),l||(Le(e),i.addNew||Ai(t.doc,r,null,null,i.extend),f&&!c||w&&9==v?setTimeout(function(){o.wrapper.ownerDocument.body.focus({preventScroll:!0}),o.input.focus()},20):o.input.focus())}),a=function(e){l=l||10<=Math.abs(n.clientX-e.clientX)+Math.abs(n.clientY-e.clientY)},u=function(){return l=!0};f&&(o.scroller.draggable=!0);(t.state.draggingText=s).copy=!i.moveOnDrag,me(o.wrapper.ownerDocument,"mouseup",s),me(o.wrapper.ownerDocument,"mousemove",a),me(o.scroller,"dragstart",u),me(o.scroller,"drop",s),t.state.delayingBlurEvent=!0,setTimeout(function(){return o.input.focus()},20),o.scroller.dragDrop&&o.scroller.dragDrop()}:function(d,e,f,p){w&&dr(d);var l=d.display,g=d.doc;Le(e);var m,v,y=g.sel,t=y.ranges;p.addNew&&!p.extend?(v=g.sel.contains(f),m=-1<v?t[v]:new oi(f,f)):(m=g.sel.primary(),v=g.sel.primIndex);"rectangle"==p.unit?(p.addNew||(m=new oi(f,f)),f=Jn(d,e,!0,!0),v=-1):(e=el(d,f,p.unit),m=p.extend?Oi(m,e.anchor,e.head,p.extend):e);p.addNew?-1==v?(v=t.length,Pi(g,li(d,t.concat([m]),v),{scroll:!1,origin:"*mouse"})):1<t.length&&t[v].empty()&&"char"==p.unit&&!p.extend?(Pi(g,li(d,t.slice(0,v).concat(t.slice(v+1)),0),{scroll:!1,origin:"*mouse"}),y=g.sel):Wi(g,v,m,U):(Pi(g,new ii([m],v=0),U),y=g.sel);var b=f;function s(e){if(0!=nt(b,e))if(b=e,"rectangle"==p.unit){for(var t=[],n=d.options.tabSize,r=E(Ye(g,f.line).text,f.ch,n),i=E(Ye(g,e.line).text,e.ch,n),o=Math.min(r,i),l=Math.max(r,i),s=Math.min(f.line,e.line),a=Math.min(d.lastLine(),Math.max(f.line,e.line));s<=a;s++){var u=Ye(g,s).text,c=K(u,o,n);o==l?t.push(new oi(tt(s,c),tt(s,c))):u.length>c&&t.push(new oi(tt(s,c),tt(s,K(u,l,n))))}t.length||t.push(new oi(f,f)),Pi(g,li(d,y.ranges.slice(0,v).concat(t),v),{origin:"*mouse",scroll:!1}),d.scrollIntoView(e)}else{var h,r=m,i=el(d,e,p.unit),e=r.anchor,e=0<nt(i.anchor,e)?(h=i.head,lt(r.from(),i.anchor)):(h=i.anchor,ot(r.to(),i.head)),i=y.ranges.slice(0);i[v]=function(e,t){var n=t.anchor,r=t.head,i=Ye(e.doc,n.line);if(0==nt(n,r)&&n.sticky==r.sticky)return t;var o=pe(i);if(!o)return t;var l=le(o,n.ch,n.sticky),s=o[l];if(s.from!=n.ch&&s.to!=n.ch)return t;i=l+(s.from==n.ch==(1!=s.level)?0:1);if(0==i||i==o.length)return t;a=r.line!=n.line?0<(r.line-n.line)*("ltr"==e.doc.direction?1:-1):(e=le(o,r.ch,r.sticky),a=e-l||(r.ch-n.ch)*(1==s.level?-1:1),e==i-1||e==i?a<0:0<a);var i=o[i+(a?-1:0)],a=a==(1==i.level),i=a?i.from:i.to,a=a?"after":"before";return n.ch==i&&n.sticky==a?t:new oi(new tt(n.line,i,a),r)}(d,new oi(at(g,e),h)),Pi(g,li(d,i,v),U)}}var a=l.wrapper.getBoundingClientRect(),u=0;function n(e){d.state.selectingText=!1,u=1/0,e&&(Le(e),l.input.focus()),ye(l.wrapper.ownerDocument,"mousemove",r),ye(l.wrapper.ownerDocument,"mouseup",i),g.history.lastSelOrigin=null}var r=Er(d,function(e){(0!==e.buttons&&Oe(e)?function e(t){var n,r,i=++u,o=Jn(d,t,!0,"rectangle"==p.unit);o&&(0!=nt(o,b)?(d.curOp.focus=O(),s(o),n=vr(l,g),(o.line>=n.to||o.line<n.from)&&setTimeout(Er(d,function(){u==i&&e(t)}),150)):(r=t.clientY<a.top?-20:t.clientY>a.bottom?20:0)&&setTimeout(Er(d,function(){u==i&&(l.scroller.scrollTop+=r,e(t))}),50))}:n)(e)}),i=Er(d,n);d.state.selectingText=i,me(l.wrapper.ownerDocument,"mousemove",r),me(l.wrapper.ownerDocument,"mouseup",i)})(e,r,t,o)}(l,t,i,e):Ne(e)==s.scroller&&Le(e):2==n?(t&&Ai(l.doc,t),setTimeout(function(){return s.input.focus()},20)):3==n&&(x?l.display.input.onContextMenu(e):dr(l)))))}function el(e,t,n){if("char"==n)return new oi(t,t);if("word"==n)return e.findWordAt(t);if("line"==n)return new oi(tt(t.line,0),at(e.doc,tt(t.line+1,0)));t=n(e,t);return new oi(t.from,t.to)}function tl(e,t,n,r){var i,o;if(t.touches)i=t.touches[0].clientX,o=t.touches[0].clientY;else try{i=t.clientX,o=t.clientY}catch(e){return!1}if(i>=Math.floor(e.display.gutters.getBoundingClientRect().right))return!1;r&&Le(t);var l=e.display,r=l.lineDiv.getBoundingClientRect();if(o>r.bottom||!Ce(e,n))return Te(t);o-=r.top-l.viewOffset;for(var s=0;s<e.display.gutterSpecs.length;++s){var a=l.gutters.childNodes[s];if(a&&a.getBoundingClientRect().right>=i)return be(e,n,e,Qe(e.doc,o),e.display.gutterSpecs[s].className,t),Te(t)}}function nl(e,t){return tl(e,t,"gutterClick",!0)}function rl(e,t){var n,r;pn(e.display,t)||(r=t,Ce(n=e,"gutterContextMenu")&&tl(n,r,"gutterContextMenu",!1))||we(e,t,"contextmenu")||x||e.display.input.onContextMenu(t)}function il(e){e.display.wrapper.className=e.display.wrapper.className.replace(/\s*cm-s-\S+/g,"")+e.options.theme.replace(/(^|\s)\s*/g," cm-s-"),Dn(e)}qo.prototype.compare=function(e,t,n){return this.time+400>e&&0==nt(t,this.pos)&&n==this.button};var ol={toString:function(){return"CodeMirror.Init"}},ll={},sl={};function al(e,t,n){!t!=!(n&&n!=ol)&&(n=e.display.dragFunctions,(t=t?me:ye)(e.display.scroller,"dragstart",n.start),t(e.display.scroller,"dragenter",n.enter),t(e.display.scroller,"dragover",n.over),t(e.display.scroller,"dragleave",n.leave),t(e.display.scroller,"drop",n.drop))}function ul(e){e.options.lineWrapping?(A(e.display.wrapper,"CodeMirror-wrap"),e.display.sizer.style.minWidth="",e.display.sizerWidth=null):(S(e.display.wrapper,"CodeMirror-wrap"),Vt(e)),Qn(e),tr(e),Dn(e),setTimeout(function(){return Nr(e)},100)}function cl(e,t){var n=this;if(!(this instanceof cl))return new cl(e,t);this.options=t=t?P(t):{},P(ll,t,!1);var r=t.value;"string"==typeof r?r=new ho(r,t.mode,null,t.lineSeparator,t.direction):t.mode&&(r.modeOption=t.mode),this.doc=r;var i,o=new cl.inputStyles[t.inputStyle](this),o=this.display=new Qr(e,r,o,t);for(i in il(o.wrapper.CodeMirror=this),t.lineWrapping&&(this.display.wrapper.className+=" CodeMirror-wrap"),Dr(this),this.state={keyMaps:[],overlays:[],modeGen:0,overwrite:!1,delayingBlurEvent:!1,focused:!1,suppressEdits:!1,pasteIncoming:-1,cutIncoming:-1,selectingText:!1,draggingText:!1,highlight:new I,keySeq:null,specialChars:null},t.autofocus&&!h&&o.input.focus(),w&&v<11&&setTimeout(function(){return n.display.input.reset(!0)},20),function(r){var i=r.display;me(i.scroller,"mousedown",Er(r,Jo)),me(i.scroller,"dblclick",w&&v<11?Er(r,function(e){var t;we(r,e)||(!(t=Jn(r,e))||nl(r,e)||pn(r.display,e)||(Le(e),t=r.findWordAt(t),Ai(r.doc,t.anchor,t.head)))}):function(e){return we(r,e)||Le(e)});me(i.scroller,"contextmenu",function(e){return rl(r,e)}),me(i.input.getField(),"contextmenu",function(e){i.scroller.contains(e.target)||rl(r,e)});var n,o={end:0};function l(){i.activeTouch&&(n=setTimeout(function(){return i.activeTouch=null},1e3),(o=i.activeTouch).end=+new Date)}function s(e,t){if(null==t.left)return 1;var n=t.left-e.left,e=t.top-e.top;return 400<n*n+e*e}me(i.scroller,"touchstart",function(e){var t;we(r,e)||function(e){if(1==e.touches.length){e=e.touches[0];return e.radiusX<=1&&e.radiusY<=1}}(e)||nl(r,e)||(i.input.ensurePolled(),clearTimeout(n),t=+new Date,i.activeTouch={start:t,moved:!1,prev:t-o.end<=300?o:null},1==e.touches.length&&(i.activeTouch.left=e.touches[0].pageX,i.activeTouch.top=e.touches[0].pageY))}),me(i.scroller,"touchmove",function(){i.activeTouch&&(i.activeTouch.moved=!0)}),me(i.scroller,"touchend",function(e){var t,n=i.activeTouch;n&&!pn(i,e)&&null!=n.left&&!n.moved&&new Date-n.start<300&&(t=r.coordsChar(i.activeTouch,"page"),t=!n.prev||s(n,n.prev)?new oi(t,t):!n.prev.prev||s(n,n.prev.prev)?r.findWordAt(t):new oi(tt(t.line,0),at(r.doc,tt(t.line+1,0))),r.setSelection(t.anchor,t.head),r.focus(),Le(e)),l()}),me(i.scroller,"touchcancel",l),me(i.scroller,"scroll",function(){i.scroller.clientHeight&&(Lr(r,i.scroller.scrollTop),Tr(r,i.scroller.scrollLeft,!0),be(r,"scroll",r))}),me(i.scroller,"mousewheel",function(e){return ri(r,e)}),me(i.scroller,"DOMMouseScroll",function(e){return ri(r,e)}),me(i.wrapper,"scroll",function(){return i.wrapper.scrollTop=i.wrapper.scrollLeft=0}),i.dragFunctions={enter:function(e){we(r,e)||Me(e)},over:function(e){var t,n;we(r,e)||((n=Jn(t=r,n=e))&&(ar(t,n,n=document.createDocumentFragment()),t.display.dragCursor||(t.display.dragCursor=M("div",null,"CodeMirror-cursors CodeMirror-dragcursors"),t.display.lineSpace.insertBefore(t.display.dragCursor,t.display.cursorDiv)),k(t.display.dragCursor,n)),Me(e))},start:function(e){var t,n;t=r,n=e,w&&(!t.state.draggingText||+new Date-po<100)?Me(n):we(t,n)||pn(t.display,n)||(n.dataTransfer.setData("Text",t.getSelection()),n.dataTransfer.effectAllowed="copyMove",n.dataTransfer.setDragImage&&!c&&((e=M("img",null,null,"position: fixed; left: 0; top: 0;")).src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==",p&&(e.width=e.height=1,t.display.wrapper.appendChild(e),e._top=e.offsetTop),n.dataTransfer.setDragImage(e,0,0),p&&e.parentNode.removeChild(e)))},drop:Er(r,go),leave:function(e){we(r,e)||mo(r)}};var e=i.input.getField();me(e,"keyup",function(e){return $o.call(r,e)}),me(e,"keydown",Er(r,Yo)),me(e,"keypress",Er(r,_o)),me(e,"focus",function(e){return fr(r,e)}),me(e,"blur",function(e){return pr(r,e)})}(this),bo(),Hr(this),this.curOp.forceUpdate=!0,vi(this,r),t.autofocus&&!h||this.hasFocus()?setTimeout(function(){n.hasFocus()&&!n.state.focused&&fr(n)},20):pr(this),sl)sl.hasOwnProperty(i)&&sl[i](this,t[i],ol);$r(this),t.finishInit&&t.finishInit(this);for(var l=0;l<hl.length;++l)hl[l](this);Fr(this),f&&t.lineWrapping&&"optimizelegibility"==getComputedStyle(o.lineDiv).textRendering&&(o.lineDiv.style.textRendering="auto")}cl.defaults=ll,cl.optionHandlers=sl;var hl=[];function dl(e,t,n,r){var i,o=e.doc;"smart"==(n=null==n?"add":n)&&(o.mode.indent?i=pt(e,t).state:n="prev");var l=e.options.tabSize,s=Ye(o,t),a=E(s.text,null,l);s.stateAfter&&(s.stateAfter=null);var u=s.text.match(/^\s*/)[0];if(r||/\S/.test(s.text)){if("smart"==n&&((c=o.mode.indent(i,s.text.slice(u.length),s.text))==B||150<c)){if(!r)return;n="prev"}}else c=0,n="not";"prev"==n?c=t>o.first?E(Ye(o,t-1).text,null,l):0:"add"==n?c=a+e.options.indentUnit:"subtract"==n?c=a-e.options.indentUnit:"number"==typeof n&&(c=a+n);var c=Math.max(0,c),h="",d=0;if(e.options.indentWithTabs)for(var f=Math.floor(c/l);f;--f)d+=l,h+="\t";if(d<c&&(h+=X(c-d)),h!=u)return qi(o,h,tt(t,0),tt(t,u.length),"+input"),!(s.stateAfter=null);for(var p=0;p<o.sel.ranges.length;p++){var g=o.sel.ranges[p];if(g.head.line==t&&g.head.ch<u.length){g=tt(t,u.length);Wi(o,p,new oi(g,g));break}}}cl.defineInitHook=function(e){return hl.push(e)};var fl=null;function pl(e){fl=e}function gl(e,t,n,r,i){var o=e.doc;e.display.shift=!1,r=r||o.sel;var l=+new Date-200,s="paste"==i||e.state.pasteIncoming>l,a=He(t),u=null;if(s&&1<r.ranges.length)if(fl&&fl.text.join("\n")==t){if(r.ranges.length%fl.text.length==0)for(var u=[],c=0;c<fl.text.length;c++)u.push(o.splitLines(fl.text[c]))}else a.length==r.ranges.length&&e.options.pasteLinesPerSelection&&(u=$(a,function(e){return[e]}));for(var h=e.curOp.updateInput,d=r.ranges.length-1;0<=d;d--){var f=r.ranges[d],p=f.from(),g=f.to();f.empty()&&(n&&0<n?p=tt(p.line,p.ch-n):e.state.overwrite&&!s?g=tt(g.line,Math.min(Ye(o,g.line).text.length,g.ch+Y(a).length)):s&&fl&&fl.lineWise&&fl.text.join("\n")==a.join("\n")&&(p=g=tt(p.line,0)));g={from:p,to:g,text:u?u[d%u.length]:a,origin:i||(s?"paste":e.state.cutIncoming>l?"cut":"+input")};ji(e.doc,g),rn(e,"inputRead",e,g)}t&&!s&&vl(e,t),wr(e),e.curOp.updateInput<2&&(e.curOp.updateInput=h),e.curOp.typing=!0,e.state.pasteIncoming=e.state.cutIncoming=-1}function ml(e,t){var n=e.clipboardData&&e.clipboardData.getData("Text");return n&&(e.preventDefault(),t.isReadOnly()||t.options.disableInput||Pr(t,function(){return gl(t,n,0,null,"paste")}),1)}function vl(e,t){if(e.options.electricChars&&e.options.smartIndent)for(var n=e.doc.sel,r=n.ranges.length-1;0<=r;r--){var i=n.ranges[r];if(!(100<i.head.ch||r&&n.ranges[r-1].head.line==i.head.line)){var o=e.getModeAt(i.head),l=!1;if(o.electricChars){for(var s=0;s<o.electricChars.length;s++)if(-1<t.indexOf(o.electricChars.charAt(s))){l=dl(e,i.head.line,"smart");break}}else o.electricInput&&o.electricInput.test(Ye(e.doc,i.head.line).text.slice(0,i.head.ch))&&(l=dl(e,i.head.line,"smart"));l&&rn(e,"electricInput",e,i.head.line)}}}function yl(e){for(var t=[],n=[],r=0;r<e.doc.sel.ranges.length;r++){var i=e.doc.sel.ranges[r].head.line,i={anchor:tt(i,0),head:tt(i+1,0)};n.push(i),t.push(e.getRange(i.anchor,i.head))}return{text:t,ranges:n}}function bl(e,t,n,r){e.setAttribute("autocorrect",n?"":"off"),e.setAttribute("autocapitalize",r?"":"off"),e.setAttribute("spellcheck",!!t)}function wl(){var e=M("textarea",null,null,"position: absolute; bottom: -1em; padding: 0; width: 1px; height: 1em; min-height: 1em; outline: none"),t=M("div",[e],null,"overflow: hidden; position: relative; width: 3px; height: 0px;");return f?e.style.width="1000px":e.setAttribute("wrap","off"),s&&(e.style.border="1px solid black"),bl(e),t}function xl(i,o,l,s,a){var e=o,t=l,u=Ye(i,o.line),c=a&&"rtl"==i.direction?-l:l;function n(e){var t,n,r;if(null==(n="codepoint"==s?(t=u.text.charCodeAt(o.ch+(0<l?0:-1)),isNaN(t)?null:(n=0<l?55296<=t&&t<56320:56320<=t&&t<57343,new tt(o.line,Math.max(0,Math.min(u.text.length,o.ch+l*(n?2:1))),-l))):a?Io(i.cm,u,o,l):Po(u,o,l))){if(e||(r=o.line+c)<i.first||r>=i.first+i.size||(o=new tt(r,o.ch,o.sticky),!(u=Ye(i,r))))return;o=Eo(a,i.cm,u,o.line,c)}else o=n;return 1}if("char"==s||"codepoint"==s)n();else if("column"==s)n(!0);else if("word"==s||"group"==s)for(var r=null,h="group"==s,d=i.cm&&i.cm.getHelper(o,"wordChars"),f=!0;!(l<0)||n(!f);f=!1){var p=u.text.charAt(o.ch)||"\n",p=J(p,d)?"w":h&&"\n"==p?"n":!h||/\s/.test(p)?null:"p";if(!h||f||p||(p="s"),r&&r!=p){l<0&&(l=1,n(),o.sticky="after");break}if(p&&(r=p),0<l&&!n(!f))break}t=Gi(i,o,e,t,!0);return rt(e,t)&&(t.hitSide=!0),t}function Cl(e,t,n,r){var i,o,l,s=e.doc,a=t.left;for("page"==r?(i=Math.min(e.display.wrapper.clientHeight,window.innerHeight||document.documentElement.clientHeight),i=Math.max(i-.5*Yn(e.display),3),o=(0<n?t.bottom:t.top)+n*i):"line"==r&&(o=0<n?t.bottom+3:t.top-3);(l=Gn(e,a,o)).outside;){if(n<0?o<=0:o>=s.height){l.hitSide=!0;break}o+=5*n}return l}e=function(e){this.cm=e,this.lastAnchorNode=this.lastAnchorOffset=this.lastFocusNode=this.lastFocusOffset=null,this.polling=new I,this.composing=null,this.gracePeriod=!1,this.readDOMTimeout=null};function Sl(e,t){var n=Sn(e,t.line);if(!n||n.hidden)return null;var r=Ye(e.doc,t.line),n=xn(n,r,t.line),r=pe(r,e.doc.direction),e="left";r&&(e=le(r,t.ch)%2?"right":"left");e=Nn(n.map,t.ch,e);return e.offset="right"==e.collapse?e.end:e.start,e}function Ll(e,t){return t&&(e.bad=!0),e}function kl(e,t,n){var r;if(t==e.display.lineDiv){if(!(r=e.display.lineDiv.childNodes[n]))return Ll(e.clipPos(tt(e.display.viewTo-1)),!0);t=null,n=0}else for(r=t;;r=r.parentNode){if(!r||r==e.display.lineDiv)return null;if(r.parentNode&&r.parentNode==e.display.lineDiv)break}for(var i=0;i<e.display.view.length;i++){var o=e.display.view[i];if(o.node==r)return function(u,e,t){var n=u.text.firstChild,r=!1;if(!e||!N(n,e))return Ll(tt(Ze(u.line),0),!0);if(e==n&&(r=!0,e=n.childNodes[t],t=0,!e)){var i=u.rest?Y(u.rest):u.line;return Ll(tt(Ze(i),i.text.length),r)}var i=3==e.nodeType?e:null,o=e;i||1!=e.childNodes.length||3!=e.firstChild.nodeType||(i=e.firstChild,t=t&&i.nodeValue.length);for(;o.parentNode!=n;)o=o.parentNode;var c=u.measure,h=c.maps;function l(e,t,n){for(var r=-1;r<(h?h.length:0);r++)for(var i=r<0?c.map:h[r],o=0;o<i.length;o+=3){var l=i[o+2];if(l==e||l==t){var s=Ze(r<0?u.line:u.rest[r]),a=i[o]+n;return tt(s,a=n<0||l!=e?i[o+(n?1:0)]:a)}}}var s=l(i,o,t);if(s)return Ll(s,r);for(var a=o.nextSibling,d=i?i.nodeValue.length-t:0;a;a=a.nextSibling){if(s=l(a,a.firstChild,0))return Ll(tt(s.line,s.ch-d),r);d+=a.textContent.length}for(var f=o.previousSibling,p=t;f;f=f.previousSibling){if(s=l(f,f.firstChild,-1))return Ll(tt(s.line,s.ch+p),r);p+=f.textContent.length}}(o,t,n)}}e.prototype.init=function(e){var t=this,o=this,l=o.cm,s=o.div=e.lineDiv;function a(e){for(var t=e.target;t;t=t.parentNode){if(t==s)return 1;if(/\bCodeMirror-(?:line)?widget\b/.test(t.className))break}}function n(e){if(a(e)&&!we(l,e)){if(l.somethingSelected())pl({lineWise:!1,text:l.getSelections()}),"cut"==e.type&&l.replaceSelection("",null,"cut");else{if(!l.options.lineWiseCopyCut)return;var t=yl(l);pl({lineWise:!0,text:t.text}),"cut"==e.type&&l.operation(function(){l.setSelections(t.ranges,0,G),l.replaceSelection("",null,"cut")})}if(e.clipboardData){e.clipboardData.clearData();var n=fl.text.join("\n");if(e.clipboardData.setData("Text",n),e.clipboardData.getData("Text")==n)return void e.preventDefault()}var r=wl(),e=r.firstChild;l.display.lineSpace.insertBefore(r,l.display.lineSpace.firstChild),e.value=fl.text.join("\n");var i=O();H(e),setTimeout(function(){l.display.lineSpace.removeChild(r),i.focus(),i==s&&o.showPrimarySelection()},50)}}s.contentEditable=!0,bl(s,l.options.spellcheck,l.options.autocorrect,l.options.autocapitalize),me(s,"paste",function(e){!a(e)||we(l,e)||ml(e,l)||v<=11&&setTimeout(Er(l,function(){return t.updateFromDOM()}),20)}),me(s,"compositionstart",function(e){t.composing={data:e.data,done:!1}}),me(s,"compositionupdate",function(e){t.composing||(t.composing={data:e.data,done:!1})}),me(s,"compositionend",function(e){t.composing&&(e.data!=t.composing.data&&t.readFromDOMSoon(),t.composing.done=!0)}),me(s,"touchstart",function(){return o.forceCompositionEnd()}),me(s,"input",function(){t.composing||t.readFromDOMSoon()}),me(s,"copy",n),me(s,"cut",n)},e.prototype.screenReaderLabelChanged=function(e){e?this.div.setAttribute("aria-label",e):this.div.removeAttribute("aria-label")},e.prototype.prepareSelection=function(){var e=sr(this.cm,!1);return e.focus=O()==this.div,e},e.prototype.showSelection=function(e,t){e&&this.cm.display.view.length&&((e.focus||t)&&this.showPrimarySelection(),this.showMultipleSelections(e))},e.prototype.getSelection=function(){return this.cm.display.wrapper.ownerDocument.getSelection()},e.prototype.showPrimarySelection=function(){var e=this.getSelection(),t=this.cm,n=t.doc.sel.primary(),r=n.from(),i=n.to();if(t.display.viewTo==t.display.viewFrom||r.line>=t.display.viewTo||i.line<t.display.viewFrom)e.removeAllRanges();else{var o=kl(t,e.anchorNode,e.anchorOffset),n=kl(t,e.focusNode,e.focusOffset);if(!o||o.bad||!n||n.bad||0!=nt(lt(o,n),r)||0!=nt(ot(o,n),i)){n=t.display.view,r=r.line>=t.display.viewFrom&&Sl(t,r)||{node:n[0].measure.map[2],offset:0},i=i.line<t.display.viewTo&&Sl(t,i);if(i||(i={node:(s=(s=n[n.length-1].measure).maps?s.maps[s.maps.length-1]:s.map)[s.length-1],offset:s[s.length-2]-s[s.length-3]}),r&&i){var l,s=e.rangeCount&&e.getRangeAt(0);try{l=W(r.node,r.offset,i.offset,i.node)}catch(e){}l&&(!d&&t.state.focused?(e.collapse(r.node,r.offset),l.collapsed||(e.removeAllRanges(),e.addRange(l))):(e.removeAllRanges(),e.addRange(l)),s&&null==e.anchorNode?e.addRange(s):d&&this.startGracePeriod()),this.rememberSelection()}else e.removeAllRanges()}}},e.prototype.startGracePeriod=function(){var e=this;clearTimeout(this.gracePeriod),this.gracePeriod=setTimeout(function(){e.gracePeriod=!1,e.selectionChanged()&&e.cm.operation(function(){return e.cm.curOp.selectionChanged=!0})},20)},e.prototype.showMultipleSelections=function(e){k(this.cm.display.cursorDiv,e.cursors),k(this.cm.display.selectionDiv,e.selection)},e.prototype.rememberSelection=function(){var e=this.getSelection();this.lastAnchorNode=e.anchorNode,this.lastAnchorOffset=e.anchorOffset,this.lastFocusNode=e.focusNode,this.lastFocusOffset=e.focusOffset},e.prototype.selectionInEditor=function(){var e=this.getSelection();if(!e.rangeCount)return!1;e=e.getRangeAt(0).commonAncestorContainer;return N(this.div,e)},e.prototype.focus=function(){"nocursor"!=this.cm.options.readOnly&&(this.selectionInEditor()&&O()==this.div||this.showSelection(this.prepareSelection(),!0),this.div.focus())},e.prototype.blur=function(){this.div.blur()},e.prototype.getField=function(){return this.div},e.prototype.supportsTouch=function(){return!0},e.prototype.receivedFocus=function(){var e=this,t=this;this.selectionInEditor()?setTimeout(function(){return e.pollSelection()},20):Pr(this.cm,function(){return t.cm.curOp.selectionChanged=!0}),this.polling.set(this.cm.options.pollInterval,function e(){t.cm.state.focused&&(t.pollSelection(),t.polling.set(t.cm.options.pollInterval,e))})},e.prototype.selectionChanged=function(){var e=this.getSelection();return e.anchorNode!=this.lastAnchorNode||e.anchorOffset!=this.lastAnchorOffset||e.focusNode!=this.lastFocusNode||e.focusOffset!=this.lastFocusOffset},e.prototype.pollSelection=function(){if(null==this.readDOMTimeout&&!this.gracePeriod&&this.selectionChanged()){var e,t,n=this.getSelection(),r=this.cm;if(a&&o&&this.cm.display.gutterSpecs.length&&function(e){for(var t=e;t;t=t.parentNode)if(/CodeMirror-gutter-wrapper/.test(t.className))return!0;return!1}(n.anchorNode))return this.cm.triggerOnKeyDown({type:"keydown",keyCode:8,preventDefault:Math.abs}),this.blur(),void this.focus();this.composing||(this.rememberSelection(),e=kl(r,n.anchorNode,n.anchorOffset),t=kl(r,n.focusNode,n.focusOffset),e&&t&&Pr(r,function(){Pi(r.doc,si(e,t),G),(e.bad||t.bad)&&(r.curOp.selectionChanged=!0)}))}},e.prototype.pollContent=function(){null!=this.readDOMTimeout&&(clearTimeout(this.readDOMTimeout),this.readDOMTimeout=null);var e,t=this.cm,n=t.display,r=t.doc.sel.primary(),i=r.from(),r=r.to();if(0==i.ch&&i.line>t.firstLine()&&(i=tt(i.line-1,Ye(t.doc,i.line-1).length)),r.ch==Ye(t.doc,r.line).text.length&&r.line<t.lastLine()&&(r=tt(r.line+1,0)),i.line<n.viewFrom||r.line>n.viewTo-1)return!1;var o,l=i.line==n.viewFrom||0==(l=er(t,i.line))?(e=Ze(n.view[0].line),n.view[0].node):(e=Ze(n.view[l].line),n.view[l-1].node.nextSibling),r=er(t,r.line),r=r==n.view.length-1?(o=n.viewTo-1,n.lineDiv.lastChild):(o=Ze(n.view[r+1].line)-1,n.view[r+1].node.previousSibling);if(!l)return!1;for(var s=t.doc.splitLines(function(l,e,t,s,a){var n="",u=!1,c=l.doc.lineSeparator(),h=!1;function d(){u&&(n+=c,h&&(n+=c),u=h=!1)}function f(e){e&&(d(),n+=e)}for(;!function e(t){if(1==t.nodeType){var n=t.getAttribute("cm-text");if(n)f(n);else if(n=t.getAttribute("cm-marker"))(n=l.findMarks(tt(s,0),tt(a+1,0),(o=+n,function(e){return e.id==o}))).length&&(r=n[0].find(0))&&f($e(l.doc,r.from,r.to).join(c));else if("false"!=t.getAttribute("contenteditable")){var r=/^(pre|div|p|li|table|br)$/i.test(t.nodeName);if(/^br$/i.test(t.nodeName)||0!=t.textContent.length){r&&d();for(var i=0;i<t.childNodes.length;i++)e(t.childNodes[i]);/^(pre|p)$/i.test(t.nodeName)&&(h=!0),r&&(u=!0)}}}else 3==t.nodeType&&f(t.nodeValue.replace(/\u200b/g,"").replace(/\u00a0/g," "));var o}(e),e!=t;)e=e.nextSibling,h=!1;return n}(t,l,r,e,o)),a=$e(t.doc,tt(e,0),tt(o,Ye(t.doc,o).text.length));1<s.length&&1<a.length;)if(Y(s)==Y(a))s.pop(),a.pop(),o--;else{if(s[0]!=a[0])break;s.shift(),a.shift(),e++}for(var u=0,c=0,h=s[0],d=a[0],f=Math.min(h.length,d.length);u<f&&h.charCodeAt(u)==d.charCodeAt(u);)++u;for(var p=Y(s),g=Y(a),m=Math.min(p.length-(1==s.length?u:0),g.length-(1==a.length?u:0));c<m&&p.charCodeAt(p.length-c-1)==g.charCodeAt(g.length-c-1);)++c;if(1==s.length&&1==a.length&&e==i.line)for(;u&&u>i.ch&&p.charCodeAt(p.length-c-1)==g.charCodeAt(g.length-c-1);)u--,c++;s[s.length-1]=p.slice(0,p.length-c).replace(/^\u200b+/,""),s[0]=s[0].slice(u).replace(/\u200b+$/,"");l=tt(e,u),r=tt(o,a.length?Y(a).length-c:0);return 1<s.length||s[0]||nt(l,r)?(qi(t.doc,s,l,r,"+input"),!0):void 0},e.prototype.ensurePolled=function(){this.forceCompositionEnd()},e.prototype.reset=function(){this.forceCompositionEnd()},e.prototype.forceCompositionEnd=function(){this.composing&&(clearTimeout(this.readDOMTimeout),this.composing=null,this.updateFromDOM(),this.div.blur(),this.div.focus())},e.prototype.readFromDOMSoon=function(){var e=this;null==this.readDOMTimeout&&(this.readDOMTimeout=setTimeout(function(){if(e.readDOMTimeout=null,e.composing){if(!e.composing.done)return;e.composing=null}e.updateFromDOM()},80))},e.prototype.updateFromDOM=function(){var e=this;!this.cm.isReadOnly()&&this.pollContent()||Pr(this.cm,function(){return tr(e.cm)})},e.prototype.setUneditable=function(e){e.contentEditable="false"},e.prototype.onKeyPress=function(e){0==e.charCode||this.composing||(e.preventDefault(),this.cm.isReadOnly()||Er(this.cm,gl)(this.cm,String.fromCharCode(null==e.charCode?e.keyCode:e.charCode),0))},e.prototype.readOnlyChanged=function(e){this.div.contentEditable=String("nocursor"!=e)},e.prototype.onContextMenu=function(){},e.prototype.resetPosition=function(){},e.prototype.needsContentAttribute=!0;var Tl,Ml,Nl,Ol,Al,r=function(e){this.cm=e,this.prevInput="",this.pollingFast=!1,this.polling=new I,this.hasSelection=!1,this.composing=null};function Dl(e,t,r,n){Tl.defaults[e]=t,r&&(Ml[e]=n?function(e,t,n){n!=ol&&r(e,t,n)}:r)}r.prototype.init=function(n){var e=this,r=this,i=this.cm;this.createField(n);var o=this.textarea;function t(e){if(!we(i,e)){if(i.somethingSelected())pl({lineWise:!1,text:i.getSelections()});else{if(!i.options.lineWiseCopyCut)return;var t=yl(i);pl({lineWise:!0,text:t.text}),"cut"==e.type?i.setSelections(t.ranges,null,G):(r.prevInput="",o.value=t.text.join("\n"),H(o))}"cut"==e.type&&(i.state.cutIncoming=+new Date)}}n.wrapper.insertBefore(this.wrapper,n.wrapper.firstChild),s&&(o.style.width="0px"),me(o,"input",function(){w&&9<=v&&e.hasSelection&&(e.hasSelection=null),r.poll()}),me(o,"paste",function(e){we(i,e)||ml(e,i)||(i.state.pasteIncoming=+new Date,r.fastPoll())}),me(o,"cut",t),me(o,"copy",t),me(n.scroller,"paste",function(e){if(!pn(n,e)&&!we(i,e)){if(!o.dispatchEvent)return i.state.pasteIncoming=+new Date,void r.focus();var t=new Event("paste");t.clipboardData=e.clipboardData,o.dispatchEvent(t)}}),me(n.lineSpace,"selectstart",function(e){pn(n,e)||Le(e)}),me(o,"compositionstart",function(){var e=i.getCursor("from");r.composing&&r.composing.range.clear(),r.composing={start:e,range:i.markText(e,i.getCursor("to"),{className:"CodeMirror-composing"})}}),me(o,"compositionend",function(){r.composing&&(r.poll(),r.composing.range.clear(),r.composing=null)})},r.prototype.createField=function(e){this.wrapper=wl(),this.textarea=this.wrapper.firstChild},r.prototype.screenReaderLabelChanged=function(e){e?this.textarea.setAttribute("aria-label",e):this.textarea.removeAttribute("aria-label")},r.prototype.prepareSelection=function(){var e,t=this.cm,n=t.display,r=t.doc,i=sr(t);return t.options.moveInputWithCursor&&(e=Rn(t,r.sel.primary().head,"div"),t=n.wrapper.getBoundingClientRect(),r=n.lineDiv.getBoundingClientRect(),i.teTop=Math.max(0,Math.min(n.wrapper.clientHeight-10,e.top+r.top-t.top)),i.teLeft=Math.max(0,Math.min(n.wrapper.clientWidth-10,e.left+r.left-t.left))),i},r.prototype.showSelection=function(e){var t=this.cm.display;k(t.cursorDiv,e.cursors),k(t.selectionDiv,e.selection),null!=e.teTop&&(this.wrapper.style.top=e.teTop+"px",this.wrapper.style.left=e.teLeft+"px")},r.prototype.reset=function(e){var t,n;this.contextMenuPending||this.composing||((t=this.cm).somethingSelected()?(this.prevInput="",n=t.getSelection(),this.textarea.value=n,t.state.focused&&H(this.textarea),w&&9<=v&&(this.hasSelection=n)):e||(this.prevInput=this.textarea.value="",w&&9<=v&&(this.hasSelection=null)))},r.prototype.getField=function(){return this.textarea},r.prototype.supportsTouch=function(){return!1},r.prototype.focus=function(){if("nocursor"!=this.cm.options.readOnly&&(!h||O()!=this.textarea))try{this.textarea.focus()}catch(e){}},r.prototype.blur=function(){this.textarea.blur()},r.prototype.resetPosition=function(){this.wrapper.style.top=this.wrapper.style.left=0},r.prototype.receivedFocus=function(){this.slowPoll()},r.prototype.slowPoll=function(){var e=this;this.pollingFast||this.polling.set(this.cm.options.pollInterval,function(){e.poll(),e.cm.state.focused&&e.slowPoll()})},r.prototype.fastPoll=function(){var t=!1,n=this;n.pollingFast=!0,n.polling.set(20,function e(){n.poll()||t?(n.pollingFast=!1,n.slowPoll()):(t=!0,n.polling.set(60,e))})},r.prototype.poll=function(){var e=this,t=this.cm,n=this.textarea,r=this.prevInput;if(this.contextMenuPending||!t.state.focused||Fe(n)&&!r&&!this.composing||t.isReadOnly()||t.options.disableInput||t.state.keySeq)return!1;var i=n.value;if(i==r&&!t.somethingSelected())return!1;if(w&&9<=v&&this.hasSelection===i||g&&/[\uf700-\uf7ff]/.test(i))return t.display.input.reset(),!1;if(t.doc.sel==t.display.selForContextMenu){var o=i.charCodeAt(0);if(8203!=o||r||(r="​"),8666==o)return this.reset(),this.cm.execCommand("undo")}for(var l=0,s=Math.min(r.length,i.length);l<s&&r.charCodeAt(l)==i.charCodeAt(l);)++l;return Pr(t,function(){gl(t,i.slice(l),r.length-l,null,e.composing?"*compose":null),1e3<i.length||-1<i.indexOf("\n")?n.value=e.prevInput="":e.prevInput=i,e.composing&&(e.composing.range.clear(),e.composing.range=t.markText(e.composing.start,t.getCursor("to"),{className:"CodeMirror-composing"}))}),!0},r.prototype.ensurePolled=function(){this.pollingFast&&this.poll()&&(this.pollingFast=!1)},r.prototype.onKeyPress=function(){w&&9<=v&&(this.hasSelection=null),this.fastPoll()},r.prototype.onContextMenu=function(e){var n=this,r=n.cm,i=r.display,o=n.textarea;n.contextMenuPending&&n.contextMenuPending();var l,s,t,a,u=Jn(r,e),c=i.scroller.scrollTop;function h(){var e,t;null!=o.selectionStart&&(t="​"+((e=r.somethingSelected())?o.value:""),o.value="⇚",o.value=t,n.prevInput=e?"":"​",o.selectionStart=1,o.selectionEnd=t.length,i.selForContextMenu=r.doc.sel)}function d(){var e,t;n.contextMenuPending==d&&(n.contextMenuPending=!1,n.wrapper.style.cssText=s,o.style.cssText=l,w&&v<9&&i.scrollbars.setScrollTop(i.scroller.scrollTop=c),null!=o.selectionStart&&((!w||v<9)&&h(),e=0,t=function(){i.selForContextMenu==r.doc.sel&&0==o.selectionStart&&0<o.selectionEnd&&"​"==n.prevInput?Er(r,Vi)(r):e++<10?i.detectingSelectAll=setTimeout(t,500):(i.selForContextMenu=null,i.input.reset())},i.detectingSelectAll=setTimeout(t,200)))}u&&!p&&(r.options.resetSelectionOnContextMenu&&-1==r.doc.sel.contains(u)&&Er(r,Pi)(r.doc,si(u),G),l=o.style.cssText,s=n.wrapper.style.cssText,u=n.wrapper.offsetParent.getBoundingClientRect(),n.wrapper.style.cssText="position: static",o.style.cssText="position: absolute; width: 30px; height: 30px;\n      top: "+(e.clientY-u.top-5)+"px; left: "+(e.clientX-u.left-5)+"px;\n      z-index: 1000; background: "+(w?"rgba(255, 255, 255, .05)":"transparent")+";\n      outline: none; border-width: 0; outline: none; overflow: hidden; opacity: .05; filter: alpha(opacity=5);",f&&(t=window.scrollY),i.input.focus(),f&&window.scrollTo(null,t),i.input.reset(),r.somethingSelected()||(o.value=n.prevInput=" "),n.contextMenuPending=d,i.selForContextMenu=r.doc.sel,clearTimeout(i.detectingSelectAll),w&&9<=v&&h(),x?(Me(e),a=function(){ye(window,"mouseup",a),setTimeout(d,20)},me(window,"mouseup",a)):setTimeout(d,50))},r.prototype.readOnlyChanged=function(e){e||this.reset(),this.textarea.disabled="nocursor"==e,this.textarea.readOnly=!!e},r.prototype.setUneditable=function(){},r.prototype.needsContentAttribute=!1,Ml=(Tl=cl).optionHandlers,Tl.defineOption=Dl,Tl.Init=ol,Dl("value","",function(e,t){return e.setValue(t)},!0),Dl("mode",null,function(e,t){e.doc.modeOption=t,di(e)},!0),Dl("indentUnit",2,di,!0),Dl("indentWithTabs",!1),Dl("smartIndent",!0),Dl("tabSize",4,function(e){fi(e),Dn(e),tr(e)},!0),Dl("lineSeparator",null,function(e,r){if(e.doc.lineSep=r){var i=[],o=e.doc.first;e.doc.iter(function(e){for(var t=0;;){var n=e.text.indexOf(r,t);if(-1==n)break;t=n+r.length,i.push(tt(o,n))}o++});for(var t=i.length-1;0<=t;t--)qi(e.doc,r,i[t],tt(i[t].line,i[t].ch+r.length))}}),Dl("specialChars",/[\u0000-\u001f\u007f-\u009f\u00ad\u061c\u200b\u200e\u200f\u2028\u2029\ufeff\ufff9-\ufffc]/g,function(e,t,n){e.state.specialChars=new RegExp(t.source+(t.test("\t")?"":"|\t"),"g"),n!=ol&&e.refresh()}),Dl("specialCharPlaceholder",_t,function(e){return e.refresh()},!0),Dl("electricChars",!0),Dl("inputStyle",h?"contenteditable":"textarea",function(){throw new Error("inputStyle can not (yet) be changed in a running editor")},!0),Dl("spellcheck",!1,function(e,t){return e.getInputField().spellcheck=t},!0),Dl("autocorrect",!1,function(e,t){return e.getInputField().autocorrect=t},!0),Dl("autocapitalize",!1,function(e,t){return e.getInputField().autocapitalize=t},!0),Dl("rtlMoveVisually",!y),Dl("wholeLineUpdateBefore",!0),Dl("theme","default",function(e){il(e),Zr(e)},!0),Dl("keyMap","default",function(e,t,n){t=Wo(t),n=n!=ol&&Wo(n);n&&n.detach&&n.detach(e,t),t.attach&&t.attach(e,n||null)}),Dl("extraKeys",null),Dl("configureMouse",null),Dl("lineWrapping",!1,ul,!0),Dl("gutters",[],function(e,t){e.display.gutterSpecs=_r(t,e.options.lineNumbers),Zr(e)},!0),Dl("fixedGutter",!0,function(e,t){e.display.gutters.style.left=t?qn(e.display)+"px":"0",e.refresh()},!0),Dl("coverGutterNextToScrollbar",!1,function(e){return Nr(e)},!0),Dl("scrollbarStyle","native",function(e){Dr(e),Nr(e),e.display.scrollbars.setScrollTop(e.doc.scrollTop),e.display.scrollbars.setScrollLeft(e.doc.scrollLeft)},!0),Dl("lineNumbers",!1,function(e,t){e.display.gutterSpecs=_r(e.options.gutters,t),Zr(e)},!0),Dl("firstLineNumber",1,Zr,!0),Dl("lineNumberFormatter",function(e){return e},Zr,!0),Dl("showCursorWhenSelecting",!1,lr,!0),Dl("resetSelectionOnContextMenu",!0),Dl("lineWiseCopyCut",!0),Dl("pasteLinesPerSelection",!0),Dl("selectionsMayTouch",!1),Dl("readOnly",!1,function(e,t){"nocursor"==t&&(pr(e),e.display.input.blur()),e.display.input.readOnlyChanged(t)}),Dl("screenReaderLabel",null,function(e,t){e.display.input.screenReaderLabelChanged(t=""===t?null:t)}),Dl("disableInput",!1,function(e,t){t||e.display.input.reset()},!0),Dl("dragDrop",!0,al),Dl("allowDropFileTypes",null),Dl("cursorBlinkRate",530),Dl("cursorScrollMargin",0),Dl("cursorHeight",1,lr,!0),Dl("singleCursorHeightPerLine",!0,lr,!0),Dl("workTime",100),Dl("workDelay",100),Dl("flattenSpans",!0,fi,!0),Dl("addModeClass",!1,fi,!0),Dl("pollInterval",100),Dl("undoDepth",200,function(e,t){return e.doc.history.undoDepth=t}),Dl("historyEventDelay",1250),Dl("viewportMargin",10,function(e){return e.refresh()},!0),Dl("maxHighlightLength",1e4,fi,!0),Dl("moveInputWithCursor",!0,function(e,t){t||e.display.input.resetPosition()}),Dl("tabindex",null,function(e,t){return e.display.input.getField().tabIndex=t||""}),Dl("autofocus",null),Dl("direction","ltr",function(e,t){return e.doc.setDirection(t)},!0),Dl("phrases",null),Ol=(Nl=cl).optionHandlers,Al=Nl.helpers={},Nl.prototype={constructor:Nl,focus:function(){window.focus(),this.display.input.focus()},setOption:function(e,t){var n=this.options,r=n[e];n[e]==t&&"mode"!=e||(n[e]=t,Ol.hasOwnProperty(e)&&Er(this,Ol[e])(this,t,r),be(this,"optionChange",this,e))},getOption:function(e){return this.options[e]},getDoc:function(){return this.doc},addKeyMap:function(e,t){this.state.keyMaps[t?"push":"unshift"](Wo(e))},removeKeyMap:function(e){for(var t=this.state.keyMaps,n=0;n<t.length;++n)if(t[n]==e||t[n].name==e)return t.splice(n,1),!0},addOverlay:Ir(function(e,t){var n=e.token?e:Nl.getMode(this.options,e);if(n.startState)throw new Error("Overlays may not be stateful.");!function(e,t,n){for(var r=0,i=n(t);r<e.length&&n(e[r])<=i;)r++;e.splice(r,0,t)}(this.state.overlays,{mode:n,modeSpec:e,opaque:t&&t.opaque,priority:t&&t.priority||0},function(e){return e.priority}),this.state.modeGen++,tr(this)}),removeOverlay:Ir(function(e){for(var t=this.state.overlays,n=0;n<t.length;++n){var r=t[n].modeSpec;if(r==e||"string"==typeof e&&r.name==e)return t.splice(n,1),this.state.modeGen++,void tr(this)}}),indentLine:Ir(function(e,t,n){"string"!=typeof t&&"number"!=typeof t&&(t=null==t?this.options.smartIndent?"smart":"prev":t?"add":"subtract"),Je(this.doc,e)&&dl(this,e,t,n)}),indentSelection:Ir(function(e){for(var t=this.doc.sel.ranges,n=-1,r=0;r<t.length;r++){var i=t[r];if(i.empty())i.head.line>n&&(dl(this,i.head.line,e,!0),n=i.head.line,r==this.doc.sel.primIndex&&wr(this));else{for(var o=i.from(),l=i.to(),i=Math.max(n,o.line),n=Math.min(this.lastLine(),l.line-(l.ch?0:1))+1,s=i;s<n;++s)dl(this,s,e);i=this.doc.sel.ranges;0==o.ch&&t.length==i.length&&0<i[r].from().ch&&Wi(this.doc,r,new oi(o,i[r].to()),G)}}}),getTokenAt:function(e,t){return bt(this,e,t)},getLineTokens:function(e,t){return bt(this,tt(e),t,!0)},getTokenTypeAt:function(e){e=at(this.doc,e);var t,n=ft(this,Ye(this.doc,e.line)),r=0,i=(n.length-1)/2,o=e.ch;if(0==o)t=n[2];else for(;;){var l=r+i>>1;if((l?n[2*l-1]:0)>=o)i=l;else{if(!(n[2*l+1]<o)){t=n[2*l+2];break}r=1+l}}e=t?t.indexOf("overlay "):-1;return e<0?t:0==e?null:t.slice(0,e-1)},getModeAt:function(e){var t=this.doc.mode;return t.innerMode?Nl.innerMode(t,this.getTokenAt(e).state).mode:t},getHelper:function(e,t){return this.getHelpers(e,t)[0]},getHelpers:function(e,t){var n=[];if(!Al.hasOwnProperty(t))return n;var r=Al[t],i=this.getModeAt(e);if("string"==typeof i[t])r[i[t]]&&n.push(r[i[t]]);else if(i[t])for(var o=0;o<i[t].length;o++){var l=r[i[t][o]];l&&n.push(l)}else i.helperType&&r[i.helperType]?n.push(r[i.helperType]):r[i.name]&&n.push(r[i.name]);for(var s=0;s<r._global.length;s++){var a=r._global[s];a.pred(i,this)&&-1==R(n,a.val)&&n.push(a.val)}return n},getStateAfter:function(e,t){var n=this.doc;return pt(this,(e=st(n,null==e?n.first+n.size-1:e))+1,t).state},cursorCoords:function(e,t){var n=this.doc.sel.primary(),n=null==e?n.head:"object"==typeof e?at(this.doc,e):e?n.from():n.to();return Rn(this,n,t||"page")},charCoords:function(e,t){return In(this,at(this.doc,e),t||"page")},coordsChar:function(e,t){return Gn(this,(e=En(this,e,t||"page")).left,e.top)},lineAtHeight:function(e,t){return e=En(this,{top:e,left:0},t||"page").top,Qe(this.doc,e+this.display.viewOffset)},heightAtLine:function(e,t,n){var r,i=!1,e="number"==typeof e?(r=this.doc.first+this.doc.size-1,e<this.doc.first?e=this.doc.first:r<e&&(e=r,i=!0),Ye(this.doc,e)):e;return Pn(this,e,{top:0,left:0},t||"page",n||i).top+(i?this.doc.height-Gt(e):0)},defaultTextHeight:function(){return Yn(this.display)},defaultCharWidth:function(){return $n(this.display)},getViewport:function(){return{from:this.display.viewFrom,to:this.display.viewTo}},addWidget:function(e,t,n,r,i){var o,l,s=this.display,a=(e=Rn(this,at(this.doc,e))).bottom,u=e.left;t.style.position="absolute",t.setAttribute("cm-ignore-events","true"),this.display.input.setUneditable(t),s.sizer.appendChild(t),"over"==r?a=e.top:"above"!=r&&"near"!=r||(o=Math.max(s.wrapper.clientHeight,this.doc.height),l=Math.max(s.sizer.clientWidth,s.lineSpace.clientWidth),("above"==r||e.bottom+t.offsetHeight>o)&&e.top>t.offsetHeight?a=e.top-t.offsetHeight:e.bottom+t.offsetHeight<=o&&(a=e.bottom),u+t.offsetWidth>l&&(u=l-t.offsetWidth)),t.style.top=a+"px",t.style.left=t.style.right="","right"==i?(u=s.sizer.clientWidth-t.offsetWidth,t.style.right="0px"):("left"==i?u=0:"middle"==i&&(u=(s.sizer.clientWidth-t.offsetWidth)/2),t.style.left=u+"px"),n&&(n=this,t={left:u,top:a,right:u+t.offsetWidth,bottom:a+t.offsetHeight},null!=(t=yr(n,t)).scrollTop&&Lr(n,t.scrollTop),null!=t.scrollLeft&&Tr(n,t.scrollLeft))},triggerOnKeyDown:Ir(Yo),triggerOnKeyPress:Ir(_o),triggerOnKeyUp:$o,triggerOnMouseDown:Ir(Jo),execCommand:function(e){if(Ro.hasOwnProperty(e))return Ro[e].call(null,this)},triggerElectric:Ir(function(e){vl(this,e)}),findPosH:function(e,t,n,r){var i=1;t<0&&(i=-1,t=-t);for(var o=at(this.doc,e),l=0;l<t&&!(o=xl(this.doc,o,i,n,r)).hitSide;++l);return o},moveH:Ir(function(t,n){var r=this;this.extendSelectionsBy(function(e){return r.display.shift||r.doc.extend||e.empty()?xl(r.doc,e.head,t,n,r.options.rtlMoveVisually):t<0?e.from():e.to()},V)}),deleteH:Ir(function(n,r){var e=this.doc.sel,i=this.doc;e.somethingSelected()?i.replaceSelection("",null,"+delete"):Ho(this,function(e){var t=xl(i,e.head,n,r,!1);return n<0?{from:t,to:e.head}:{from:e.head,to:t}})}),findPosV:function(e,t,n,r){var i=1,o=r;t<0&&(i=-1,t=-t);for(var l=at(this.doc,e),s=0;s<t;++s){var a=Rn(this,l,"div");if(null==o?o=a.left:a.left=o,(l=Cl(this,a,i,n)).hitSide)break}return l},moveV:Ir(function(r,i){var o=this,l=this.doc,s=[],a=!this.display.shift&&!l.extend&&l.sel.somethingSelected();if(l.extendSelectionsBy(function(e){if(a)return r<0?e.from():e.to();var t=Rn(o,e.head,"div");null!=e.goalColumn&&(t.left=e.goalColumn),s.push(t.left);var n=Cl(o,t,r,i);return"page"==i&&e==l.sel.primary()&&br(o,In(o,n,"div").top-t.top),n},V),s.length)for(var e=0;e<l.sel.ranges.length;e++)l.sel.ranges[e].goalColumn=s[e]}),findWordAt:function(e){var t=Ye(this.doc,e.line).text,n=e.ch,r=e.ch;if(t){var i=this.getHelper(e,"wordChars");"before"!=e.sticky&&r!=t.length||!n?++r:--n;for(var o=t.charAt(n),l=J(o,i)?function(e){return J(e,i)}:/\s/.test(o)?function(e){return/\s/.test(e)}:function(e){return!/\s/.test(e)&&!J(e)};0<n&&l(t.charAt(n-1));)--n;for(;r<t.length&&l(t.charAt(r));)++r}return new oi(tt(e.line,n),tt(e.line,r))},toggleOverwrite:function(e){null!=e&&e==this.state.overwrite||(((this.state.overwrite=!this.state.overwrite)?A:S)(this.display.cursorDiv,"CodeMirror-overwrite"),be(this,"overwriteToggle",this,this.state.overwrite))},hasFocus:function(){return this.display.input.getField()==O()},isReadOnly:function(){return!(!this.options.readOnly&&!this.doc.cantEdit)},scrollTo:Ir(function(e,t){xr(this,e,t)}),getScrollInfo:function(){var e=this.display.scroller;return{left:e.scrollLeft,top:e.scrollTop,height:e.scrollHeight-yn(this)-this.display.barHeight,width:e.scrollWidth-yn(this)-this.display.barWidth,clientHeight:wn(this),clientWidth:bn(this)}},scrollIntoView:Ir(function(e,t){var n;null==e?(e={from:this.doc.sel.primary().head,to:null},null==t&&(t=this.options.cursorScrollMargin)):"number"==typeof e?e={from:tt(e,0),to:null}:null==e.from&&(e={from:e,to:null}),e.to||(e.to=e.from),e.margin=t||0,null!=e.from.line?(n=e,Cr(t=this),t.curOp.scrollToPos=n):Sr(this,e.from,e.to,e.margin)}),setSize:Ir(function(e,t){function n(e){return"number"==typeof e||/^\d+$/.test(String(e))?e+"px":e}var r=this;null!=e&&(this.display.wrapper.style.width=n(e)),null!=t&&(this.display.wrapper.style.height=n(t)),this.options.lineWrapping&&An(this);var i=this.display.viewFrom;this.doc.iter(i,this.display.viewTo,function(e){if(e.widgets)for(var t=0;t<e.widgets.length;t++)if(e.widgets[t].noHScroll){nr(r,i,"widget");break}++i}),this.curOp.forceUpdate=!0,be(this,"refresh",this)}),operation:function(e){return Pr(this,e)},startOperation:function(){return Hr(this)},endOperation:function(){return Fr(this)},refresh:Ir(function(){var e=this.display.cachedTextHeight;tr(this),this.curOp.forceUpdate=!0,Dn(this),xr(this,this.doc.scrollLeft,this.doc.scrollTop),jr(this.display),(null==e||.5<Math.abs(e-Yn(this.display))||this.options.lineWrapping)&&Qn(this),be(this,"refresh",this)}),swapDoc:Ir(function(e){var t=this.doc;return t.cm=null,this.state.selectingText&&this.state.selectingText(),vi(this,e),Dn(this),this.display.input.reset(),xr(this,e.scrollLeft,e.scrollTop),this.curOp.forceScroll=!0,rn(this,"swapDoc",this,t),t}),phrase:function(e){var t=this.options.phrases;return t&&Object.prototype.hasOwnProperty.call(t,e)?t[e]:e},getInputField:function(){return this.display.input.getField()},getWrapperElement:function(){return this.display.wrapper},getScrollerElement:function(){return this.display.scroller},getGutterElement:function(){return this.display.gutters}},Se(Nl),Nl.registerHelper=function(e,t,n){Al.hasOwnProperty(e)||(Al[e]=Nl[e]={_global:[]}),Al[e][t]=n},Nl.registerGlobalHelper=function(e,t,n,r){Nl.registerHelper(e,t,r),Al[e]._global.push({pred:n,val:r})};var Wl,Hl,Fl="iter insert remove copy getEditor constructor".split(" ");for(Wl in ho.prototype)ho.prototype.hasOwnProperty(Wl)&&R(Fl,Wl)<0&&(cl.prototype[Wl]=function(e){return function(){return e.apply(this.doc,arguments)}}(ho.prototype[Wl]));return Se(ho),cl.inputStyles={textarea:r,contenteditable:e},cl.defineMode=function(e){cl.defaults.mode||"null"==e||(cl.defaults.mode=e),function(e,t){2<arguments.length&&(t.dependencies=Array.prototype.slice.call(arguments,2)),Ie[e]=t}.apply(this,arguments)},cl.defineMIME=function(e,t){Re[e]=t},cl.defineMode("null",function(){return{token:function(e){return e.skipToEnd()}}}),cl.defineMIME("text/plain","null"),cl.defineExtension=function(e,t){cl.prototype[e]=t},cl.defineDocExtension=function(e,t){ho.prototype[e]=t},cl.fromTextArea=function(t,n){var e;function r(){t.value=s.getValue()}if((n=n?P(n):{}).value=t.value,!n.tabindex&&t.tabIndex&&(n.tabindex=t.tabIndex),!n.placeholder&&t.placeholder&&(n.placeholder=t.placeholder),null==n.autofocus&&(e=O(),n.autofocus=e==t||null!=t.getAttribute("autofocus")&&e==document.body),t.form&&(me(t.form,"submit",r),!n.leaveSubmitMethodAlone)){var i=t.form,o=i.submit;try{var l=i.submit=function(){r(),i.submit=o,i.submit(),i.submit=l}}catch(e){}}n.finishInit=function(e){e.save=r,e.getTextArea=function(){return t},e.toTextArea=function(){e.toTextArea=isNaN,r(),t.parentNode.removeChild(e.getWrapperElement()),t.style.display="",t.form&&(ye(t.form,"submit",r),n.leaveSubmitMethodAlone||"function"!=typeof t.form.submit||(t.form.submit=o))}},t.style.display="none";var s=cl(function(e){return t.parentNode.insertBefore(e,t.nextSibling)},n);return s},(Hl=cl).off=ye,Hl.on=me,Hl.wheelEventPixels=ni,Hl.Doc=ho,Hl.splitLines=He,Hl.countColumn=E,Hl.findColumn=K,Hl.isWordChar=Q,Hl.Pass=B,Hl.signal=be,Hl.Line=Kt,Hl.changeEnd=ai,Hl.scrollbarModel=Ar,Hl.Pos=tt,Hl.cmpPos=nt,Hl.modes=Ie,Hl.mimeModes=Re,Hl.resolveMode=ze,Hl.getMode=Be,Hl.modeExtensions=Ge,Hl.extendMode=Ue,Hl.copyState=Ve,Hl.startState=je,Hl.innerMode=Ke,Hl.commands=Ro,Hl.keyMap=ko,Hl.keyName=Do,Hl.isModifierKey=Oo,Hl.lookupKey=No,Hl.normalizeKeyMap=Mo,Hl.StringStream=Xe,Hl.SharedTextMarker=ao,Hl.TextMarker=oo,Hl.LineWidget=ro,Hl.e_preventDefault=Le,Hl.e_stopPropagation=ke,Hl.e_stop=Me,Hl.addClass=A,Hl.contains=N,Hl.rmClass=S,Hl.keyNames=xo,cl.version="5.65.2",cl});
\ No newline at end of file
diff --git a/web_interface/static/v3/vendor/codemirror/mode/javascript/javascript.min.js b/web_interface/static/v3/vendor/codemirror/mode/javascript/javascript.min.js
new file mode 100644
index 00000000..531b8267
--- /dev/null
+++ b/web_interface/static/v3/vendor/codemirror/mode/javascript/javascript.min.js
@@ -0,0 +1 @@
+!function(e){"object"==typeof exports&&"object"==typeof module?e(require("../../lib/codemirror")):"function"==typeof define&&define.amd?define(["../../lib/codemirror"],e):e(CodeMirror)}(function(rt){"use strict";rt.defineMode("javascript",function(e,l){var t,r,n,a,f=e.indentUnit,d=l.statementIndent,i=l.jsonld,o=l.json||i,c=!1!==l.trackScope,u=l.typescript,p=l.wordCharacters||/[\w$\xa1-\uffff]/,s=(t=m("keyword a"),r=m("keyword b"),n=m("keyword c"),a=m("keyword d"),e=m("operator"),{if:m("if"),while:t,with:t,else:r,do:r,try:r,finally:r,return:a,break:a,continue:a,new:m("new"),delete:n,void:n,throw:n,debugger:m("debugger"),var:m("var"),const:m("var"),let:m("var"),function:m("function"),catch:m("catch"),for:m("for"),switch:m("switch"),case:m("case"),default:m("default"),in:e,typeof:e,instanceof:e,true:e={type:"atom",style:"atom"},false:e,null:e,undefined:e,NaN:e,Infinity:e,this:m("this"),class:m("class"),super:m("atom"),yield:n,export:m("export"),import:m("import"),extends:n,await:n});function m(e){return{type:e,style:"keyword"}}var k,v,y=/[+\-*&%=<>!?|~^@]/,w=/^@(context|id|value|language|type|container|list|set|reverse|index|base|vocab|graph)"/;function b(e,t,r){return k=e,v=r,t}function x(e,t){var a,r=e.next();if('"'==r||"'"==r)return t.tokenize=(a=r,function(e,t){var r,n=!1;if(i&&"@"==e.peek()&&e.match(w))return t.tokenize=x,b("jsonld-keyword","meta");for(;null!=(r=e.next())&&(r!=a||n);)n=!n&&"\\"==r;return n||(t.tokenize=x),b("string","string")}),t.tokenize(e,t);if("."==r&&e.match(/^\d[\d_]*(?:[eE][+\-]?[\d_]+)?/))return b("number","number");if("."==r&&e.match(".."))return b("spread","meta");if(/[\[\]{}\(\),;\:\.]/.test(r))return b(r);if("="==r&&e.eat(">"))return b("=>","operator");if("0"==r&&e.match(/^(?:x[\dA-Fa-f_]+|o[0-7_]+|b[01_]+)n?/))return b("number","number");if(/\d/.test(r))return e.match(/^[\d_]*(?:n|(?:\.[\d_]*)?(?:[eE][+\-]?[\d_]+)?)?/),b("number","number");if("/"==r)return e.eat("*")?(t.tokenize=h)(e,t):e.eat("/")?(e.skipToEnd(),b("comment","comment")):tt(e,t,1)?(function(e){for(var t,r=!1,n=!1;null!=(t=e.next());){if(!r){if("/"==t&&!n)return;"["==t?n=!0:n&&"]"==t&&(n=!1)}r=!r&&"\\"==t}}(e),e.match(/^\b(([gimyus])(?![gimyus]*\2))+\b/),b("regexp","string-2")):(e.eat("="),b("operator","operator",e.current()));if("`"==r)return(t.tokenize=g)(e,t);if("#"==r&&"!"==e.peek())return e.skipToEnd(),b("meta","meta");if("#"==r&&e.eatWhile(p))return b("variable","property");if("<"==r&&e.match("!--")||"-"==r&&e.match("->")&&!/\S/.test(e.string.slice(0,e.start)))return e.skipToEnd(),b("comment","comment");if(y.test(r))return">"==r&&t.lexical&&">"==t.lexical.type||(e.eat("=")?"!"!=r&&"="!=r||e.eat("="):/[<>*+\-|&?]/.test(r)&&(e.eat(r),">"==r&&e.eat(r))),"?"==r&&e.eat(".")?b("."):b("operator","operator",e.current());if(p.test(r)){e.eatWhile(p);r=e.current();if("."!=t.lastType){if(s.propertyIsEnumerable(r)){t=s[r];return b(t.type,t.style,r)}if("async"==r&&e.match(/^(\s|\/\*([^*]|\*(?!\/))*?\*\/)*[\[\(\w]/,!1))return b("async","keyword",r)}return b("variable","variable",r)}}function h(e,t){for(var r,n=!1;r=e.next();){if("/"==r&&n){t.tokenize=x;break}n="*"==r}return b("comment","comment")}function g(e,t){for(var r,n=!1;null!=(r=e.next());){if(!n&&("`"==r||"$"==r&&e.eat("{"))){t.tokenize=x;break}n=!n&&"\\"==r}return b("quasi","string-2",e.current())}function j(e,t){t.fatArrowAt&&(t.fatArrowAt=null);var r,n=e.string.indexOf("=>",e.start);if(!(n<0)){!u||(r=/:\s*(?:\w+(?:<[^>]*>|\[\])?|\{[^}]*\})\s*$/.exec(e.string.slice(e.start,n)))&&(n=r.index);for(var a=0,i=!1,o=n-1;0<=o;--o){var c=e.string.charAt(o),s="([{}])".indexOf(c);if(0<=s&&s<3){if(!a){++o;break}if(0==--a){"("==c&&(i=!0);break}}else if(3<=s&&s<6)++a;else if(p.test(c))i=!0;else if(/["'\/`]/.test(c))for(;;--o){if(0==o)return;if(e.string.charAt(o-1)==c&&"\\"!=e.string.charAt(o-2)){o--;break}}else if(i&&!a){++o;break}}i&&!a&&(t.fatArrowAt=o)}}var M={atom:!0,number:!0,variable:!0,string:!0,regexp:!0,this:!0,import:!0,"jsonld-keyword":!0};function A(e,t,r,n,a,i){this.indented=e,this.column=t,this.type=r,this.prev=a,this.info=i,null!=n&&(this.align=n)}function V(e,t,r,n,a){var i=e.cc;for(E.state=e,E.stream=a,E.marked=null,E.cc=i,E.style=t,e.lexical.hasOwnProperty("align")||(e.lexical.align=!0);;)if((i.length?i.pop():o?D:F)(r,n)){for(;i.length&&i[i.length-1].lex;)i.pop()();return E.marked?E.marked:"variable"==r&&function(e,t){if(c){for(var r=e.localVars;r;r=r.next)if(r.name==t)return 1;for(var n=e.context;n;n=n.prev)for(r=n.vars;r;r=r.next)if(r.name==t)return 1}}(e,n)?"variable-2":t}}var E={state:null,column:null,marked:null,cc:null};function z(){for(var e=arguments.length-1;0<=e;e--)E.cc.push(arguments[e])}function I(){return z.apply(null,arguments),!0}function T(e,t){for(var r=t;r;r=r.next)if(r.name==e)return 1}function $(e){var t=E.state;if(E.marked="def",c){if(t.context)if("var"==t.lexical.info&&t.context&&t.context.block){var r=function e(t,r){{if(r){if(r.block){var n=e(t,r.prev);return n?n==r.prev?r:new C(n,r.vars,!0):null}return T(t,r.vars)?r:new C(r.prev,new S(t,r.vars),!1)}return null}}(e,t.context);if(null!=r)return void(t.context=r)}else if(!T(e,t.localVars))return void(t.localVars=new S(e,t.localVars));l.globalVars&&!T(e,t.globalVars)&&(t.globalVars=new S(e,t.globalVars))}}function q(e){return"public"==e||"private"==e||"protected"==e||"abstract"==e||"readonly"==e}function C(e,t,r){this.prev=e,this.vars=t,this.block=r}function S(e,t){this.name=e,this.next=t}var _=new S("this",new S("arguments",null));function O(){E.state.context=new C(E.state.context,E.state.localVars,!1),E.state.localVars=_}function P(){E.state.context=new C(E.state.context,E.state.localVars,!0),E.state.localVars=null}function N(){E.state.localVars=E.state.context.vars,E.state.context=E.state.context.prev}function U(n,a){function e(){var e=E.state,t=e.indented;if("stat"==e.lexical.type)t=e.lexical.indented;else for(var r=e.lexical;r&&")"==r.type&&r.align;r=r.prev)t=r.indented;e.lexical=new A(t,E.stream.column(),n,null,e.lexical,a)}return e.lex=!0,e}function W(){var e=E.state;e.lexical.prev&&(")"==e.lexical.type&&(e.indented=e.lexical.indented),e.lexical=e.lexical.prev)}function B(r){return function e(t){return t==r?I():";"==r||"}"==t||")"==t||"]"==t?z():I(e)}}function F(e,t){return"var"==e?I(U("vardef",t),Ve,B(";"),W):"keyword a"==e?I(U("form"),J,F,W):"keyword b"==e?I(U("form"),F,W):"keyword d"==e?E.stream.match(/^\s*$/,!1)?I():I(U("stat"),L,B(";"),W):"debugger"==e?I(B(";")):"{"==e?I(U("}"),P,le,W,N):";"==e?I():"if"==e?("else"==E.state.lexical.info&&E.state.cc[E.state.cc.length-1]==W&&E.state.cc.pop()(),I(U("form"),J,F,W,qe)):"function"==e?I(Oe):"for"==e?I(U("form"),P,Ce,F,N,W):"class"==e||u&&"interface"==t?(E.marked="keyword",I(U("form","class"==e?e:t),Be,W)):"variable"==e?u&&"declare"==t?(E.marked="keyword",I(F)):u&&("module"==t||"enum"==t||"type"==t)&&E.stream.match(/^\s*\w/,!1)?(E.marked="keyword","enum"==t?I(Ze):"type"==t?I(Ne,B("operator"),ke,B(";")):I(U("form"),Ee,B("{"),U("}"),le,W,W)):u&&"namespace"==t?(E.marked="keyword",I(U("form"),D,F,W)):u&&"abstract"==t?(E.marked="keyword",I(F)):I(U("stat"),ne):"switch"==e?I(U("form"),J,B("{"),U("}","switch"),P,le,W,W,N):"case"==e?I(D,B(":")):"default"==e?I(B(":")):"catch"==e?I(U("form"),O,H,F,W,N):"export"==e?I(U("stat"),Ge,W):"import"==e?I(U("stat"),Ke,W):"async"==e?I(F):"@"==t?I(D,F):z(U("stat"),D,B(";"),W)}function H(e){if("("==e)return I(Ue,B(")"))}function D(e,t){return K(e,t,!1)}function G(e,t){return K(e,t,!0)}function J(e){return"("!=e?z():I(U(")"),L,B(")"),W)}function K(e,t,r){if(E.state.fatArrowAt==E.stream.start){var n=r?ee:Z;if("("==e)return I(O,U(")"),se(Ue,")"),W,B("=>"),n,N);if("variable"==e)return z(O,Ee,B("=>"),n,N)}var a,n=r?R:Q;return M.hasOwnProperty(e)?I(n):"function"==e?I(Oe,n):"class"==e||u&&"interface"==t?(E.marked="keyword",I(U("form"),We,W)):"keyword c"==e||"async"==e?I(r?G:D):"("==e?I(U(")"),L,B(")"),W,n):"operator"==e||"spread"==e?I(r?G:D):"["==e?I(U("]"),Ye,W,n):"{"==e?ue(ie,"}",null,n):"quasi"==e?z(X,n):"new"==e?I((a=r,function(e){return"."==e?I(a?re:te):"variable"==e&&u?I(je,a?R:Q):z(a?G:D)})):I()}function L(e){return e.match(/[;\}\)\],]/)?z():z(D)}function Q(e,t){return","==e?I(L):R(e,t,!1)}function R(e,t,r){var n=0==r?Q:R,a=0==r?D:G;return"=>"==e?I(O,r?ee:Z,N):"operator"==e?/\+\+|--/.test(t)||u&&"!"==t?I(n):u&&"<"==t&&E.stream.match(/^([^<>]|<[^<>]*>)*>\s*\(/,!1)?I(U(">"),se(ke,">"),W,n):"?"==t?I(D,B(":"),a):I(a):"quasi"==e?z(X,n):";"!=e?"("==e?ue(G,")","call",n):"."==e?I(ae,n):"["==e?I(U("]"),L,B("]"),W,n):u&&"as"==t?(E.marked="keyword",I(ke,n)):"regexp"==e?(E.state.lastType=E.marked="operator",E.stream.backUp(E.stream.pos-E.stream.start-1),I(a)):void 0:void 0}function X(e,t){return"quasi"!=e?z():"${"!=t.slice(t.length-2)?I(X):I(L,Y)}function Y(e){if("}"==e)return E.marked="string-2",E.state.tokenize=g,I(X)}function Z(e){return j(E.stream,E.state),z("{"==e?F:D)}function ee(e){return j(E.stream,E.state),z("{"==e?F:G)}function te(e,t){if("target"==t)return E.marked="keyword",I(Q)}function re(e,t){if("target"==t)return E.marked="keyword",I(R)}function ne(e){return":"==e?I(W,F):z(Q,B(";"),W)}function ae(e){if("variable"==e)return E.marked="property",I()}function ie(e,t){return"async"==e?(E.marked="property",I(ie)):"variable"!=e&&"keyword"!=E.style?"number"==e||"string"==e?(E.marked=i?"property":E.style+" property",I(ce)):"jsonld-keyword"==e?I(ce):u&&q(t)?(E.marked="keyword",I(ie)):"["==e?I(D,fe,B("]"),ce):"spread"==e?I(G,ce):"*"==t?(E.marked="keyword",I(ie)):":"==e?z(ce):void 0:(E.marked="property","get"==t||"set"==t?I(oe):(u&&E.state.fatArrowAt==E.stream.start&&(r=E.stream.match(/^\s*:\s*/,!1))&&(E.state.fatArrowAt=E.stream.pos+r[0].length),I(ce)));var r}function oe(e){return"variable"!=e?z(ce):(E.marked="property",I(Oe))}function ce(e){return":"==e?I(G):"("==e?z(Oe):void 0}function se(n,a,i){function o(e,t){if(i?-1<i.indexOf(e):","==e){var r=E.state.lexical;return"call"==r.info&&(r.pos=(r.pos||0)+1),I(function(e,t){return e==a||t==a?z():z(n)},o)}return e==a||t==a?I():i&&-1<i.indexOf(";")?z(n):I(B(a))}return function(e,t){return e==a||t==a?I():z(n,o)}}function ue(e,t,r){for(var n=3;n<arguments.length;n++)E.cc.push(arguments[n]);return I(U(t,r),se(e,t),W)}function le(e){return"}"==e?I():z(F,le)}function fe(e,t){if(u)return":"==e?I(ke):"?"==t?I(fe):void 0}function de(e,t){if(u&&(":"==e||"in"==t))return I(ke)}function pe(e){if(u&&":"==e)return E.stream.match(/^\s*\w+\s+is\b/,!1)?I(D,me,ke):I(ke)}function me(e,t){if("is"==t)return E.marked="keyword",I()}function ke(e,t){return"keyof"==t||"typeof"==t||"infer"==t||"readonly"==t?(E.marked="keyword",I("typeof"==t?G:ke)):"variable"==e||"void"==t?(E.marked="type",I(ge)):"|"==t||"&"==t?I(ke):"string"==e||"number"==e||"atom"==e?I(ge):"["==e?I(U("]"),se(ke,"]",","),W,ge):"{"==e?I(U("}"),ye,W,ge):"("==e?I(se(he,")"),ve,ge):"<"==e?I(se(ke,">"),ke):"quasi"==e?z(be,ge):void 0}function ve(e){if("=>"==e)return I(ke)}function ye(e){return e.match(/[\}\)\]]/)?I():","==e||";"==e?I(ye):z(we,ye)}function we(e,t){return"variable"==e||"keyword"==E.style?(E.marked="property",I(we)):"?"==t||"number"==e||"string"==e?I(we):":"==e?I(ke):"["==e?I(B("variable"),de,B("]"),we):"("==e?z(Pe,we):e.match(/[;\}\)\],]/)?void 0:I()}function be(e,t){return"quasi"!=e?z():"${"!=t.slice(t.length-2)?I(be):I(ke,xe)}function xe(e){if("}"==e)return E.marked="string-2",E.state.tokenize=g,I(be)}function he(e,t){return"variable"==e&&E.stream.match(/^\s*[?:]/,!1)||"?"==t?I(he):":"==e?I(ke):"spread"==e?I(he):z(ke)}function ge(e,t){return"<"==t?I(U(">"),se(ke,">"),W,ge):"|"==t||"."==e||"&"==t?I(ke):"["==e?I(ke,B("]"),ge):"extends"==t||"implements"==t?(E.marked="keyword",I(ke)):"?"==t?I(ke,B(":"),ke):void 0}function je(e,t){if("<"==t)return I(U(">"),se(ke,">"),W,ge)}function Me(){return z(ke,Ae)}function Ae(e,t){if("="==t)return I(ke)}function Ve(e,t){return"enum"==t?(E.marked="keyword",I(Ze)):z(Ee,fe,Te,$e)}function Ee(e,t){return u&&q(t)?(E.marked="keyword",I(Ee)):"variable"==e?($(t),I()):"spread"==e?I(Ee):"["==e?ue(Ie,"]"):"{"==e?ue(ze,"}"):void 0}function ze(e,t){return"variable"!=e||E.stream.match(/^\s*:/,!1)?("variable"==e&&(E.marked="property"),"spread"==e?I(Ee):"}"==e?z():"["==e?I(D,B("]"),B(":"),ze):I(B(":"),Ee,Te)):($(t),I(Te))}function Ie(){return z(Ee,Te)}function Te(e,t){if("="==t)return I(G)}function $e(e){if(","==e)return I(Ve)}function qe(e,t){if("keyword b"==e&&"else"==t)return I(U("form","else"),F,W)}function Ce(e,t){return"await"==t?I(Ce):"("==e?I(U(")"),Se,W):void 0}function Se(e){return"var"==e?I(Ve,_e):("variable"==e?I:z)(_e)}function _e(e,t){return")"==e?I():";"==e?I(_e):"in"==t||"of"==t?(E.marked="keyword",I(D,_e)):z(D,_e)}function Oe(e,t){return"*"==t?(E.marked="keyword",I(Oe)):"variable"==e?($(t),I(Oe)):"("==e?I(O,U(")"),se(Ue,")"),W,pe,F,N):u&&"<"==t?I(U(">"),se(Me,">"),W,Oe):void 0}function Pe(e,t){return"*"==t?(E.marked="keyword",I(Pe)):"variable"==e?($(t),I(Pe)):"("==e?I(O,U(")"),se(Ue,")"),W,pe,N):u&&"<"==t?I(U(">"),se(Me,">"),W,Pe):void 0}function Ne(e,t){return"keyword"==e||"variable"==e?(E.marked="type",I(Ne)):"<"==t?I(U(">"),se(Me,">"),W):void 0}function Ue(e,t){return"@"==t&&I(D,Ue),"spread"==e?I(Ue):u&&q(t)?(E.marked="keyword",I(Ue)):u&&"this"==e?I(fe,Te):z(Ee,fe,Te)}function We(e,t){return("variable"==e?Be:Fe)(e,t)}function Be(e,t){if("variable"==e)return $(t),I(Fe)}function Fe(e,t){return"<"==t?I(U(">"),se(Me,">"),W,Fe):"extends"==t||"implements"==t||u&&","==e?("implements"==t&&(E.marked="keyword"),I(u?ke:D,Fe)):"{"==e?I(U("}"),He,W):void 0}function He(e,t){return"async"==e||"variable"==e&&("static"==t||"get"==t||"set"==t||u&&q(t))&&E.stream.match(/^\s+[\w$\xa1-\uffff]/,!1)?(E.marked="keyword",I(He)):"variable"==e||"keyword"==E.style?(E.marked="property",I(De,He)):"number"==e||"string"==e?I(De,He):"["==e?I(D,fe,B("]"),De,He):"*"==t?(E.marked="keyword",I(He)):u&&"("==e?z(Pe,He):";"==e||","==e?I(He):"}"==e?I():"@"==t?I(D,He):void 0}function De(e,t){if("!"==t)return I(De);if("?"==t)return I(De);if(":"==e)return I(ke,Te);if("="==t)return I(G);t=E.state.lexical.prev;return z(t&&"interface"==t.info?Pe:Oe)}function Ge(e,t){return"*"==t?(E.marked="keyword",I(Xe,B(";"))):"default"==t?(E.marked="keyword",I(D,B(";"))):"{"==e?I(se(Je,"}"),Xe,B(";")):z(F)}function Je(e,t){return"as"==t?(E.marked="keyword",I(B("variable"))):"variable"==e?z(G,Je):void 0}function Ke(e){return"string"==e?I():"("==e?z(D):"."==e?z(Q):z(Le,Qe,Xe)}function Le(e,t){return"{"==e?ue(Le,"}"):("variable"==e&&$(t),"*"==t&&(E.marked="keyword"),I(Re))}function Qe(e){if(","==e)return I(Le,Qe)}function Re(e,t){if("as"==t)return E.marked="keyword",I(Le)}function Xe(e,t){if("from"==t)return E.marked="keyword",I(D)}function Ye(e){return"]"==e?I():z(se(G,"]"))}function Ze(){return z(U("form"),Ee,B("{"),U("}"),se(et,"}"),W,W)}function et(){return z(Ee,Te)}function tt(e,t,r){return t.tokenize==x&&/^(?:operator|sof|keyword [bcd]|case|new|export|default|spread|[\[{}\(,;:]|=>)$/.test(t.lastType)||"quasi"==t.lastType&&/\{\s*$/.test(e.string.slice(0,e.pos-(r||0)))}return O.lex=P.lex=!0,W.lex=N.lex=!0,{startState:function(e){e={tokenize:x,lastType:"sof",cc:[],lexical:new A((e||0)-f,0,"block",!1),localVars:l.localVars,context:l.localVars&&new C(null,null,!1),indented:e||0};return l.globalVars&&"object"==typeof l.globalVars&&(e.globalVars=l.globalVars),e},token:function(e,t){if(e.sol()&&(t.lexical.hasOwnProperty("align")||(t.lexical.align=!1),t.indented=e.indentation(),j(e,t)),t.tokenize!=h&&e.eatSpace())return null;var r=t.tokenize(e,t);return"comment"==k?r:(t.lastType="operator"!=k||"++"!=v&&"--"!=v?k:"incdec",V(t,r,k,v,e))},indent:function(e,t){if(e.tokenize==h||e.tokenize==g)return rt.Pass;if(e.tokenize!=x)return 0;var r,n=t&&t.charAt(0),a=e.lexical;if(!/^\s*else\b/.test(t))for(var i=e.cc.length-1;0<=i;--i){var o=e.cc[i];if(o==W)a=a.prev;else if(o!=qe&&o!=N)break}for(;("stat"==a.type||"form"==a.type)&&("}"==n||(r=e.cc[e.cc.length-1])&&(r==Q||r==R)&&!/^[,\.=+\-*:?[\(]/.test(t));)a=a.prev;var c,s=(a=d&&")"==a.type&&"stat"==a.prev.type?a.prev:a).type,u=n==s;return"vardef"==s?a.indented+("operator"==e.lastType||","==e.lastType?a.info.length+1:0):"form"==s&&"{"==n?a.indented:"form"==s?a.indented+f:"stat"==s?a.indented+(c=t,"operator"==(s=e).lastType||","==s.lastType||y.test(c.charAt(0))||/[,.]/.test(c.charAt(0))?d||f:0):"switch"!=a.info||u||0==l.doubleIndentSwitch?a.align?a.column+(u?0:1):a.indented+(u?0:f):a.indented+(/^(?:case|default)\b/.test(t)?f:2*f)},electricInput:/^\s*(?:case .*?:|default:|\{|\})$/,blockCommentStart:o?null:"/*",blockCommentEnd:o?null:"*/",blockCommentContinue:o?null:" * ",lineComment:o?null:"//",fold:"brace",closeBrackets:"()[]{}''\"\"``",helperType:o?"json":"javascript",jsonldMode:i,jsonMode:o,expressionAllowed:tt,skipExpression:function(e){V(e,"atom","atom","true",new rt.StringStream("",2,null))}}}),rt.registerHelper("wordChars","javascript",/[\w$]/),rt.defineMIME("text/javascript","javascript"),rt.defineMIME("text/ecmascript","javascript"),rt.defineMIME("application/javascript","javascript"),rt.defineMIME("application/x-javascript","javascript"),rt.defineMIME("application/ecmascript","javascript"),rt.defineMIME("application/json",{name:"javascript",json:!0}),rt.defineMIME("application/x-json",{name:"javascript",json:!0}),rt.defineMIME("application/manifest+json",{name:"javascript",json:!0}),rt.defineMIME("application/ld+json",{name:"javascript",jsonld:!0}),rt.defineMIME("text/typescript",{name:"javascript",typescript:!0}),rt.defineMIME("application/typescript",{name:"javascript",typescript:!0})});
\ No newline at end of file
diff --git a/web_interface/static/v3/vendor/codemirror/theme/monokai.min.css b/web_interface/static/v3/vendor/codemirror/theme/monokai.min.css
new file mode 100644
index 00000000..4f2293a3
--- /dev/null
+++ b/web_interface/static/v3/vendor/codemirror/theme/monokai.min.css
@@ -0,0 +1 @@
+.cm-s-monokai.CodeMirror{background:#272822;color:#f8f8f2}.cm-s-monokai div.CodeMirror-selected{background:#49483e}.cm-s-monokai .CodeMirror-line::selection,.cm-s-monokai .CodeMirror-line>span::selection,.cm-s-monokai .CodeMirror-line>span>span::selection{background:rgba(73,72,62,.99)}.cm-s-monokai .CodeMirror-line::-moz-selection,.cm-s-monokai .CodeMirror-line>span::-moz-selection,.cm-s-monokai .CodeMirror-line>span>span::-moz-selection{background:rgba(73,72,62,.99)}.cm-s-monokai .CodeMirror-gutters{background:#272822;border-right:0}.cm-s-monokai .CodeMirror-guttermarker{color:#fff}.cm-s-monokai .CodeMirror-guttermarker-subtle{color:#d0d0d0}.cm-s-monokai .CodeMirror-linenumber{color:#d0d0d0}.cm-s-monokai .CodeMirror-cursor{border-left:1px solid #f8f8f0}.cm-s-monokai span.cm-comment{color:#75715e}.cm-s-monokai span.cm-atom{color:#ae81ff}.cm-s-monokai span.cm-number{color:#ae81ff}.cm-s-monokai span.cm-comment.cm-attribute{color:#97b757}.cm-s-monokai span.cm-comment.cm-def{color:#bc9262}.cm-s-monokai span.cm-comment.cm-tag{color:#bc6283}.cm-s-monokai span.cm-comment.cm-type{color:#5998a6}.cm-s-monokai span.cm-attribute,.cm-s-monokai span.cm-property{color:#a6e22e}.cm-s-monokai span.cm-keyword{color:#f92672}.cm-s-monokai span.cm-builtin{color:#66d9ef}.cm-s-monokai span.cm-string{color:#e6db74}.cm-s-monokai span.cm-variable{color:#f8f8f2}.cm-s-monokai span.cm-variable-2{color:#9effff}.cm-s-monokai span.cm-type,.cm-s-monokai span.cm-variable-3{color:#66d9ef}.cm-s-monokai span.cm-def{color:#fd971f}.cm-s-monokai span.cm-bracket{color:#f8f8f2}.cm-s-monokai span.cm-tag{color:#f92672}.cm-s-monokai span.cm-header{color:#ae81ff}.cm-s-monokai span.cm-link{color:#ae81ff}.cm-s-monokai span.cm-error{background:#f92672;color:#f8f8f0}.cm-s-monokai .CodeMirror-activeline-background{background:#373831}.cm-s-monokai .CodeMirror-matchingbracket{text-decoration:underline;color:#fff!important}
\ No newline at end of file
diff --git a/web_interface/static/v3/vendor/fontawesome/css/all.min.css b/web_interface/static/v3/vendor/fontawesome/css/all.min.css
new file mode 100644
index 00000000..0a2cf522
--- /dev/null
+++ b/web_interface/static/v3/vendor/fontawesome/css/all.min.css
@@ -0,0 +1,6 @@
+/*!
+ * Font Awesome Free 6.0.0 by @fontawesome - https://fontawesome.com
+ * License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License)
+ * Copyright 2022 Fonticons, Inc.
+ */
+.fa{font-family:var(--fa-style-family,"Font Awesome 6 Free");font-weight:var(--fa-style,900)}.fa,.fa-brands,.fa-duotone,.fa-light,.fa-regular,.fa-solid,.fa-thin,.fab,.fad,.fal,.far,.fas,.fat{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;display:var(--fa-display,inline-block);font-style:normal;font-variant:normal;line-height:1;text-rendering:auto}.fa-1x{font-size:1em}.fa-2x{font-size:2em}.fa-3x{font-size:3em}.fa-4x{font-size:4em}.fa-5x{font-size:5em}.fa-6x{font-size:6em}.fa-7x{font-size:7em}.fa-8x{font-size:8em}.fa-9x{font-size:9em}.fa-10x{font-size:10em}.fa-2xs{font-size:.625em;line-height:.1em;vertical-align:.225em}.fa-xs{font-size:.75em;line-height:.08333em;vertical-align:.125em}.fa-sm{font-size:.875em;line-height:.07143em;vertical-align:.05357em}.fa-lg{font-size:1.25em;line-height:.05em;vertical-align:-.075em}.fa-xl{font-size:1.5em;line-height:.04167em;vertical-align:-.125em}.fa-2xl{font-size:2em;line-height:.03125em;vertical-align:-.1875em}.fa-fw{text-align:center;width:1.25em}.fa-ul{list-style-type:none;margin-left:var(--fa-li-margin,2.5em);padding-left:0}.fa-ul>li{position:relative}.fa-li{left:calc(var(--fa-li-width, 2em)*-1);position:absolute;text-align:center;width:var(--fa-li-width,2em);line-height:inherit}.fa-border{border-radius:var(--fa-border-radius,.1em);border:var(--fa-border-width,.08em) var(--fa-border-style,solid) var(--fa-border-color,#eee);padding:var(--fa-border-padding,.2em .25em .15em)}.fa-pull-left{float:left;margin-right:var(--fa-pull-margin,.3em)}.fa-pull-right{float:right;margin-left:var(--fa-pull-margin,.3em)}.fa-beat{-webkit-animation-name:fa-beat;animation-name:fa-beat;-webkit-animation-delay:var(--fa-animation-delay,0);animation-delay:var(--fa-animation-delay,0);-webkit-animation-direction:var(--fa-animation-direction,normal);animation-direction:var(--fa-animation-direction,normal);-webkit-animation-duration:var(--fa-animation-duration,1s);animation-duration:var(--fa-animation-duration,1s);-webkit-animation-iteration-count:var(--fa-animation-iteration-count,infinite);animation-iteration-count:var(--fa-animation-iteration-count,infinite);-webkit-animation-timing-function:var(--fa-animation-timing,ease-in-out);animation-timing-function:var(--fa-animation-timing,ease-in-out)}.fa-bounce{-webkit-animation-name:fa-bounce;animation-name:fa-bounce;-webkit-animation-delay:var(--fa-animation-delay,0);animation-delay:var(--fa-animation-delay,0);-webkit-animation-direction:var(--fa-animation-direction,normal);animation-direction:var(--fa-animation-direction,normal);-webkit-animation-duration:var(--fa-animation-duration,1s);animation-duration:var(--fa-animation-duration,1s);-webkit-animation-iteration-count:var(--fa-animation-iteration-count,infinite);animation-iteration-count:var(--fa-animation-iteration-count,infinite);-webkit-animation-timing-function:var(--fa-animation-timing,cubic-bezier(.28,.84,.42,1));animation-timing-function:var(--fa-animation-timing,cubic-bezier(.28,.84,.42,1))}.fa-fade{-webkit-animation-name:fa-fade;animation-name:fa-fade;-webkit-animation-iteration-count:var(--fa-animation-iteration-count,infinite);animation-iteration-count:var(--fa-animation-iteration-count,infinite);-webkit-animation-timing-function:var(--fa-animation-timing,cubic-bezier(.4,0,.6,1));animation-timing-function:var(--fa-animation-timing,cubic-bezier(.4,0,.6,1))}.fa-beat-fade,.fa-fade{-webkit-animation-delay:var(--fa-animation-delay,0);animation-delay:var(--fa-animation-delay,0);-webkit-animation-direction:var(--fa-animation-direction,normal);animation-direction:var(--fa-animation-direction,normal);-webkit-animation-duration:var(--fa-animation-duration,1s);animation-duration:var(--fa-animation-duration,1s)}.fa-beat-fade{-webkit-animation-name:fa-beat-fade;animation-name:fa-beat-fade;-webkit-animation-iteration-count:var(--fa-animation-iteration-count,infinite);animation-iteration-count:var(--fa-animation-iteration-count,infinite);-webkit-animation-timing-function:var(--fa-animation-timing,cubic-bezier(.4,0,.6,1));animation-timing-function:var(--fa-animation-timing,cubic-bezier(.4,0,.6,1))}.fa-flip{-webkit-animation-name:fa-flip;animation-name:fa-flip;-webkit-animation-delay:var(--fa-animation-delay,0);animation-delay:var(--fa-animation-delay,0);-webkit-animation-direction:var(--fa-animation-direction,normal);animation-direction:var(--fa-animation-direction,normal);-webkit-animation-duration:var(--fa-animation-duration,1s);animation-duration:var(--fa-animation-duration,1s);-webkit-animation-iteration-count:var(--fa-animation-iteration-count,infinite);animation-iteration-count:var(--fa-animation-iteration-count,infinite);-webkit-animation-timing-function:var(--fa-animation-timing,ease-in-out);animation-timing-function:var(--fa-animation-timing,ease-in-out)}.fa-shake{-webkit-animation-name:fa-shake;animation-name:fa-shake;-webkit-animation-duration:var(--fa-animation-duration,1s);animation-duration:var(--fa-animation-duration,1s);-webkit-animation-iteration-count:var(--fa-animation-iteration-count,infinite);animation-iteration-count:var(--fa-animation-iteration-count,infinite);-webkit-animation-timing-function:var(--fa-animation-timing,linear);animation-timing-function:var(--fa-animation-timing,linear)}.fa-shake,.fa-spin{-webkit-animation-delay:var(--fa-animation-delay,0);animation-delay:var(--fa-animation-delay,0);-webkit-animation-direction:var(--fa-animation-direction,normal);animation-direction:var(--fa-animation-direction,normal)}.fa-spin{-webkit-animation-name:fa-spin;animation-name:fa-spin;-webkit-animation-duration:var(--fa-animation-duration,2s);animation-duration:var(--fa-animation-duration,2s);-webkit-animation-iteration-count:var(--fa-animation-iteration-count,infinite);animation-iteration-count:var(--fa-animation-iteration-count,infinite);-webkit-animation-timing-function:var(--fa-animation-timing,linear);animation-timing-function:var(--fa-animation-timing,linear)}.fa-spin-reverse{--fa-animation-direction:reverse}.fa-pulse,.fa-spin-pulse{-webkit-animation-name:fa-spin;animation-name:fa-spin;-webkit-animation-direction:var(--fa-animation-direction,normal);animation-direction:var(--fa-animation-direction,normal);-webkit-animation-duration:var(--fa-animation-duration,1s);animation-duration:var(--fa-animation-duration,1s);-webkit-animation-iteration-count:var(--fa-animation-iteration-count,infinite);animation-iteration-count:var(--fa-animation-iteration-count,infinite);-webkit-animation-timing-function:var(--fa-animation-timing,steps(8));animation-timing-function:var(--fa-animation-timing,steps(8))}@media (prefers-reduced-motion:reduce){.fa-beat,.fa-beat-fade,.fa-bounce,.fa-fade,.fa-flip,.fa-pulse,.fa-shake,.fa-spin,.fa-spin-pulse{-webkit-animation-delay:-1ms;animation-delay:-1ms;-webkit-animation-duration:1ms;animation-duration:1ms;-webkit-animation-iteration-count:1;animation-iteration-count:1;transition-delay:0s;transition-duration:0s}}@-webkit-keyframes fa-beat{0%,90%{-webkit-transform:scale(1);transform:scale(1)}45%{-webkit-transform:scale(var(--fa-beat-scale,1.25));transform:scale(var(--fa-beat-scale,1.25))}}@keyframes fa-beat{0%,90%{-webkit-transform:scale(1);transform:scale(1)}45%{-webkit-transform:scale(var(--fa-beat-scale,1.25));transform:scale(var(--fa-beat-scale,1.25))}}@-webkit-keyframes fa-bounce{0%{-webkit-transform:scale(1) translateY(0);transform:scale(1) translateY(0)}10%{-webkit-transform:scale(var(--fa-bounce-start-scale-x,1.1),var(--fa-bounce-start-scale-y,.9)) translateY(0);transform:scale(var(--fa-bounce-start-scale-x,1.1),var(--fa-bounce-start-scale-y,.9)) translateY(0)}30%{-webkit-transform:scale(var(--fa-bounce-jump-scale-x,.9),var(--fa-bounce-jump-scale-y,1.1)) translateY(var(--fa-bounce-height,-.5em));transform:scale(var(--fa-bounce-jump-scale-x,.9),var(--fa-bounce-jump-scale-y,1.1)) translateY(var(--fa-bounce-height,-.5em))}50%{-webkit-transform:scale(var(--fa-bounce-land-scale-x,1.05),var(--fa-bounce-land-scale-y,.95)) translateY(0);transform:scale(var(--fa-bounce-land-scale-x,1.05),var(--fa-bounce-land-scale-y,.95)) translateY(0)}57%{-webkit-transform:scale(1) translateY(var(--fa-bounce-rebound,-.125em));transform:scale(1) translateY(var(--fa-bounce-rebound,-.125em))}64%{-webkit-transform:scale(1) translateY(0);transform:scale(1) translateY(0)}to{-webkit-transform:scale(1) translateY(0);transform:scale(1) translateY(0)}}@keyframes fa-bounce{0%{-webkit-transform:scale(1) translateY(0);transform:scale(1) translateY(0)}10%{-webkit-transform:scale(var(--fa-bounce-start-scale-x,1.1),var(--fa-bounce-start-scale-y,.9)) translateY(0);transform:scale(var(--fa-bounce-start-scale-x,1.1),var(--fa-bounce-start-scale-y,.9)) translateY(0)}30%{-webkit-transform:scale(var(--fa-bounce-jump-scale-x,.9),var(--fa-bounce-jump-scale-y,1.1)) translateY(var(--fa-bounce-height,-.5em));transform:scale(var(--fa-bounce-jump-scale-x,.9),var(--fa-bounce-jump-scale-y,1.1)) translateY(var(--fa-bounce-height,-.5em))}50%{-webkit-transform:scale(var(--fa-bounce-land-scale-x,1.05),var(--fa-bounce-land-scale-y,.95)) translateY(0);transform:scale(var(--fa-bounce-land-scale-x,1.05),var(--fa-bounce-land-scale-y,.95)) translateY(0)}57%{-webkit-transform:scale(1) translateY(var(--fa-bounce-rebound,-.125em));transform:scale(1) translateY(var(--fa-bounce-rebound,-.125em))}64%{-webkit-transform:scale(1) translateY(0);transform:scale(1) translateY(0)}to{-webkit-transform:scale(1) translateY(0);transform:scale(1) translateY(0)}}@-webkit-keyframes fa-fade{50%{opacity:var(--fa-fade-opacity,.4)}}@keyframes fa-fade{50%{opacity:var(--fa-fade-opacity,.4)}}@-webkit-keyframes fa-beat-fade{0%,to{opacity:var(--fa-beat-fade-opacity,.4);-webkit-transform:scale(1);transform:scale(1)}50%{opacity:1;-webkit-transform:scale(var(--fa-beat-fade-scale,1.125));transform:scale(var(--fa-beat-fade-scale,1.125))}}@keyframes fa-beat-fade{0%,to{opacity:var(--fa-beat-fade-opacity,.4);-webkit-transform:scale(1);transform:scale(1)}50%{opacity:1;-webkit-transform:scale(var(--fa-beat-fade-scale,1.125));transform:scale(var(--fa-beat-fade-scale,1.125))}}@-webkit-keyframes fa-flip{50%{-webkit-transform:rotate3d(var(--fa-flip-x,0),var(--fa-flip-y,1),var(--fa-flip-z,0),var(--fa-flip-angle,-180deg));transform:rotate3d(var(--fa-flip-x,0),var(--fa-flip-y,1),var(--fa-flip-z,0),var(--fa-flip-angle,-180deg))}}@keyframes fa-flip{50%{-webkit-transform:rotate3d(var(--fa-flip-x,0),var(--fa-flip-y,1),var(--fa-flip-z,0),var(--fa-flip-angle,-180deg));transform:rotate3d(var(--fa-flip-x,0),var(--fa-flip-y,1),var(--fa-flip-z,0),var(--fa-flip-angle,-180deg))}}@-webkit-keyframes fa-shake{0%{-webkit-transform:rotate(-15deg);transform:rotate(-15deg)}4%{-webkit-transform:rotate(15deg);transform:rotate(15deg)}8%,24%{-webkit-transform:rotate(-18deg);transform:rotate(-18deg)}12%,28%{-webkit-transform:rotate(18deg);transform:rotate(18deg)}16%{-webkit-transform:rotate(-22deg);transform:rotate(-22deg)}20%{-webkit-transform:rotate(22deg);transform:rotate(22deg)}32%{-webkit-transform:rotate(-12deg);transform:rotate(-12deg)}36%{-webkit-transform:rotate(12deg);transform:rotate(12deg)}40%,to{-webkit-transform:rotate(0deg);transform:rotate(0deg)}}@keyframes fa-shake{0%{-webkit-transform:rotate(-15deg);transform:rotate(-15deg)}4%{-webkit-transform:rotate(15deg);transform:rotate(15deg)}8%,24%{-webkit-transform:rotate(-18deg);transform:rotate(-18deg)}12%,28%{-webkit-transform:rotate(18deg);transform:rotate(18deg)}16%{-webkit-transform:rotate(-22deg);transform:rotate(-22deg)}20%{-webkit-transform:rotate(22deg);transform:rotate(22deg)}32%{-webkit-transform:rotate(-12deg);transform:rotate(-12deg)}36%{-webkit-transform:rotate(12deg);transform:rotate(12deg)}40%,to{-webkit-transform:rotate(0deg);transform:rotate(0deg)}}@-webkit-keyframes fa-spin{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}to{-webkit-transform:rotate(1turn);transform:rotate(1turn)}}@keyframes fa-spin{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}to{-webkit-transform:rotate(1turn);transform:rotate(1turn)}}.fa-rotate-90{-webkit-transform:rotate(90deg);transform:rotate(90deg)}.fa-rotate-180{-webkit-transform:rotate(180deg);transform:rotate(180deg)}.fa-rotate-270{-webkit-transform:rotate(270deg);transform:rotate(270deg)}.fa-flip-horizontal{-webkit-transform:scaleX(-1);transform:scaleX(-1)}.fa-flip-vertical{-webkit-transform:scaleY(-1);transform:scaleY(-1)}.fa-flip-both,.fa-flip-horizontal.fa-flip-vertical{-webkit-transform:scale(-1);transform:scale(-1)}.fa-rotate-by{-webkit-transform:rotate(var(--fa-rotate-angle,none));transform:rotate(var(--fa-rotate-angle,none))}.fa-stack{display:inline-block;height:2em;line-height:2em;position:relative;vertical-align:middle;width:2.5em}.fa-stack-1x,.fa-stack-2x{left:0;position:absolute;text-align:center;width:100%;z-index:var(--fa-stack-z-index,auto)}.fa-stack-1x{line-height:inherit}.fa-stack-2x{font-size:2em}.fa-inverse{color:var(--fa-inverse,#fff)}.fa-0:before{content:"\30"}.fa-1:before{content:"\31"}.fa-2:before{content:"\32"}.fa-3:before{content:"\33"}.fa-4:before{content:"\34"}.fa-5:before{content:"\35"}.fa-6:before{content:"\36"}.fa-7:before{content:"\37"}.fa-8:before{content:"\38"}.fa-9:before{content:"\39"}.fa-a:before{content:"\41"}.fa-address-book:before,.fa-contact-book:before{content:"\f2b9"}.fa-address-card:before,.fa-contact-card:before,.fa-vcard:before{content:"\f2bb"}.fa-align-center:before{content:"\f037"}.fa-align-justify:before{content:"\f039"}.fa-align-left:before{content:"\f036"}.fa-align-right:before{content:"\f038"}.fa-anchor:before{content:"\f13d"}.fa-angle-down:before{content:"\f107"}.fa-angle-left:before{content:"\f104"}.fa-angle-right:before{content:"\f105"}.fa-angle-up:before{content:"\f106"}.fa-angle-double-down:before,.fa-angles-down:before{content:"\f103"}.fa-angle-double-left:before,.fa-angles-left:before{content:"\f100"}.fa-angle-double-right:before,.fa-angles-right:before{content:"\f101"}.fa-angle-double-up:before,.fa-angles-up:before{content:"\f102"}.fa-ankh:before{content:"\f644"}.fa-apple-alt:before,.fa-apple-whole:before{content:"\f5d1"}.fa-archway:before{content:"\f557"}.fa-arrow-down:before{content:"\f063"}.fa-arrow-down-1-9:before,.fa-sort-numeric-asc:before,.fa-sort-numeric-down:before{content:"\f162"}.fa-arrow-down-9-1:before,.fa-sort-numeric-desc:before,.fa-sort-numeric-down-alt:before{content:"\f886"}.fa-arrow-down-a-z:before,.fa-sort-alpha-asc:before,.fa-sort-alpha-down:before{content:"\f15d"}.fa-arrow-down-long:before,.fa-long-arrow-down:before{content:"\f175"}.fa-arrow-down-short-wide:before,.fa-sort-amount-desc:before,.fa-sort-amount-down-alt:before{content:"\f884"}.fa-arrow-down-wide-short:before,.fa-sort-amount-asc:before,.fa-sort-amount-down:before{content:"\f160"}.fa-arrow-down-z-a:before,.fa-sort-alpha-desc:before,.fa-sort-alpha-down-alt:before{content:"\f881"}.fa-arrow-left:before{content:"\f060"}.fa-arrow-left-long:before,.fa-long-arrow-left:before{content:"\f177"}.fa-arrow-pointer:before,.fa-mouse-pointer:before{content:"\f245"}.fa-arrow-right:before{content:"\f061"}.fa-arrow-right-arrow-left:before,.fa-exchange:before{content:"\f0ec"}.fa-arrow-right-from-bracket:before,.fa-sign-out:before{content:"\f08b"}.fa-arrow-right-long:before,.fa-long-arrow-right:before{content:"\f178"}.fa-arrow-right-to-bracket:before,.fa-sign-in:before{content:"\f090"}.fa-arrow-left-rotate:before,.fa-arrow-rotate-back:before,.fa-arrow-rotate-backward:before,.fa-arrow-rotate-left:before,.fa-undo:before{content:"\f0e2"}.fa-arrow-right-rotate:before,.fa-arrow-rotate-forward:before,.fa-arrow-rotate-right:before,.fa-redo:before{content:"\f01e"}.fa-arrow-trend-down:before{content:"\e097"}.fa-arrow-trend-up:before{content:"\e098"}.fa-arrow-turn-down:before,.fa-level-down:before{content:"\f149"}.fa-arrow-turn-up:before,.fa-level-up:before{content:"\f148"}.fa-arrow-up:before{content:"\f062"}.fa-arrow-up-1-9:before,.fa-sort-numeric-up:before{content:"\f163"}.fa-arrow-up-9-1:before,.fa-sort-numeric-up-alt:before{content:"\f887"}.fa-arrow-up-a-z:before,.fa-sort-alpha-up:before{content:"\f15e"}.fa-arrow-up-from-bracket:before{content:"\e09a"}.fa-arrow-up-long:before,.fa-long-arrow-up:before{content:"\f176"}.fa-arrow-up-right-from-square:before,.fa-external-link:before{content:"\f08e"}.fa-arrow-up-short-wide:before,.fa-sort-amount-up-alt:before{content:"\f885"}.fa-arrow-up-wide-short:before,.fa-sort-amount-up:before{content:"\f161"}.fa-arrow-up-z-a:before,.fa-sort-alpha-up-alt:before{content:"\f882"}.fa-arrows-h:before,.fa-arrows-left-right:before{content:"\f07e"}.fa-arrows-rotate:before,.fa-refresh:before,.fa-sync:before{content:"\f021"}.fa-arrows-up-down:before,.fa-arrows-v:before{content:"\f07d"}.fa-arrows-up-down-left-right:before,.fa-arrows:before{content:"\f047"}.fa-asterisk:before{content:"\2a"}.fa-at:before{content:"\40"}.fa-atom:before{content:"\f5d2"}.fa-audio-description:before{content:"\f29e"}.fa-austral-sign:before{content:"\e0a9"}.fa-award:before{content:"\f559"}.fa-b:before{content:"\42"}.fa-baby:before{content:"\f77c"}.fa-baby-carriage:before,.fa-carriage-baby:before{content:"\f77d"}.fa-backward:before{content:"\f04a"}.fa-backward-fast:before,.fa-fast-backward:before{content:"\f049"}.fa-backward-step:before,.fa-step-backward:before{content:"\f048"}.fa-bacon:before{content:"\f7e5"}.fa-bacteria:before{content:"\e059"}.fa-bacterium:before{content:"\e05a"}.fa-bag-shopping:before,.fa-shopping-bag:before{content:"\f290"}.fa-bahai:before{content:"\f666"}.fa-baht-sign:before{content:"\e0ac"}.fa-ban:before,.fa-cancel:before{content:"\f05e"}.fa-ban-smoking:before,.fa-smoking-ban:before{content:"\f54d"}.fa-band-aid:before,.fa-bandage:before{content:"\f462"}.fa-barcode:before{content:"\f02a"}.fa-bars:before,.fa-navicon:before{content:"\f0c9"}.fa-bars-progress:before,.fa-tasks-alt:before{content:"\f828"}.fa-bars-staggered:before,.fa-reorder:before,.fa-stream:before{content:"\f550"}.fa-baseball-ball:before,.fa-baseball:before{content:"\f433"}.fa-baseball-bat-ball:before{content:"\f432"}.fa-basket-shopping:before,.fa-shopping-basket:before{content:"\f291"}.fa-basketball-ball:before,.fa-basketball:before{content:"\f434"}.fa-bath:before,.fa-bathtub:before{content:"\f2cd"}.fa-battery-0:before,.fa-battery-empty:before{content:"\f244"}.fa-battery-5:before,.fa-battery-full:before,.fa-battery:before{content:"\f240"}.fa-battery-3:before,.fa-battery-half:before{content:"\f242"}.fa-battery-2:before,.fa-battery-quarter:before{content:"\f243"}.fa-battery-4:before,.fa-battery-three-quarters:before{content:"\f241"}.fa-bed:before{content:"\f236"}.fa-bed-pulse:before,.fa-procedures:before{content:"\f487"}.fa-beer-mug-empty:before,.fa-beer:before{content:"\f0fc"}.fa-bell:before{content:"\f0f3"}.fa-bell-concierge:before,.fa-concierge-bell:before{content:"\f562"}.fa-bell-slash:before{content:"\f1f6"}.fa-bezier-curve:before{content:"\f55b"}.fa-bicycle:before{content:"\f206"}.fa-binoculars:before{content:"\f1e5"}.fa-biohazard:before{content:"\f780"}.fa-bitcoin-sign:before{content:"\e0b4"}.fa-blender:before{content:"\f517"}.fa-blender-phone:before{content:"\f6b6"}.fa-blog:before{content:"\f781"}.fa-bold:before{content:"\f032"}.fa-bolt:before,.fa-zap:before{content:"\f0e7"}.fa-bolt-lightning:before{content:"\e0b7"}.fa-bomb:before{content:"\f1e2"}.fa-bone:before{content:"\f5d7"}.fa-bong:before{content:"\f55c"}.fa-book:before{content:"\f02d"}.fa-atlas:before,.fa-book-atlas:before{content:"\f558"}.fa-bible:before,.fa-book-bible:before{content:"\f647"}.fa-book-journal-whills:before,.fa-journal-whills:before{content:"\f66a"}.fa-book-medical:before{content:"\f7e6"}.fa-book-open:before{content:"\f518"}.fa-book-open-reader:before,.fa-book-reader:before{content:"\f5da"}.fa-book-quran:before,.fa-quran:before{content:"\f687"}.fa-book-dead:before,.fa-book-skull:before{content:"\f6b7"}.fa-bookmark:before{content:"\f02e"}.fa-border-all:before{content:"\f84c"}.fa-border-none:before{content:"\f850"}.fa-border-style:before,.fa-border-top-left:before{content:"\f853"}.fa-bowling-ball:before{content:"\f436"}.fa-box:before{content:"\f466"}.fa-archive:before,.fa-box-archive:before{content:"\f187"}.fa-box-open:before{content:"\f49e"}.fa-box-tissue:before{content:"\e05b"}.fa-boxes-alt:before,.fa-boxes-stacked:before,.fa-boxes:before{content:"\f468"}.fa-braille:before{content:"\f2a1"}.fa-brain:before{content:"\f5dc"}.fa-brazilian-real-sign:before{content:"\e46c"}.fa-bread-slice:before{content:"\f7ec"}.fa-briefcase:before{content:"\f0b1"}.fa-briefcase-medical:before{content:"\f469"}.fa-broom:before{content:"\f51a"}.fa-broom-ball:before,.fa-quidditch-broom-ball:before,.fa-quidditch:before{content:"\f458"}.fa-brush:before{content:"\f55d"}.fa-bug:before{content:"\f188"}.fa-bug-slash:before{content:"\e490"}.fa-building:before{content:"\f1ad"}.fa-bank:before,.fa-building-columns:before,.fa-institution:before,.fa-museum:before,.fa-university:before{content:"\f19c"}.fa-bullhorn:before{content:"\f0a1"}.fa-bullseye:before{content:"\f140"}.fa-burger:before,.fa-hamburger:before{content:"\f805"}.fa-bus:before{content:"\f207"}.fa-bus-alt:before,.fa-bus-simple:before{content:"\f55e"}.fa-briefcase-clock:before,.fa-business-time:before{content:"\f64a"}.fa-c:before{content:"\43"}.fa-birthday-cake:before,.fa-cake-candles:before,.fa-cake:before{content:"\f1fd"}.fa-calculator:before{content:"\f1ec"}.fa-calendar:before{content:"\f133"}.fa-calendar-check:before{content:"\f274"}.fa-calendar-day:before{content:"\f783"}.fa-calendar-alt:before,.fa-calendar-days:before{content:"\f073"}.fa-calendar-minus:before{content:"\f272"}.fa-calendar-plus:before{content:"\f271"}.fa-calendar-week:before{content:"\f784"}.fa-calendar-times:before,.fa-calendar-xmark:before{content:"\f273"}.fa-camera-alt:before,.fa-camera:before{content:"\f030"}.fa-camera-retro:before{content:"\f083"}.fa-camera-rotate:before{content:"\e0d8"}.fa-campground:before{content:"\f6bb"}.fa-candy-cane:before{content:"\f786"}.fa-cannabis:before{content:"\f55f"}.fa-capsules:before{content:"\f46b"}.fa-automobile:before,.fa-car:before{content:"\f1b9"}.fa-battery-car:before,.fa-car-battery:before{content:"\f5df"}.fa-car-crash:before{content:"\f5e1"}.fa-car-alt:before,.fa-car-rear:before{content:"\f5de"}.fa-car-side:before{content:"\f5e4"}.fa-caravan:before{content:"\f8ff"}.fa-caret-down:before{content:"\f0d7"}.fa-caret-left:before{content:"\f0d9"}.fa-caret-right:before{content:"\f0da"}.fa-caret-up:before{content:"\f0d8"}.fa-carrot:before{content:"\f787"}.fa-cart-arrow-down:before{content:"\f218"}.fa-cart-flatbed:before,.fa-dolly-flatbed:before{content:"\f474"}.fa-cart-flatbed-suitcase:before,.fa-luggage-cart:before{content:"\f59d"}.fa-cart-plus:before{content:"\f217"}.fa-cart-shopping:before,.fa-shopping-cart:before{content:"\f07a"}.fa-cash-register:before{content:"\f788"}.fa-cat:before{content:"\f6be"}.fa-cedi-sign:before{content:"\e0df"}.fa-cent-sign:before{content:"\e3f5"}.fa-certificate:before{content:"\f0a3"}.fa-chair:before{content:"\f6c0"}.fa-blackboard:before,.fa-chalkboard:before{content:"\f51b"}.fa-chalkboard-teacher:before,.fa-chalkboard-user:before{content:"\f51c"}.fa-champagne-glasses:before,.fa-glass-cheers:before{content:"\f79f"}.fa-charging-station:before{content:"\f5e7"}.fa-area-chart:before,.fa-chart-area:before{content:"\f1fe"}.fa-bar-chart:before,.fa-chart-bar:before{content:"\f080"}.fa-chart-column:before{content:"\e0e3"}.fa-chart-gantt:before{content:"\e0e4"}.fa-chart-line:before,.fa-line-chart:before{content:"\f201"}.fa-chart-pie:before,.fa-pie-chart:before{content:"\f200"}.fa-check:before{content:"\f00c"}.fa-check-double:before{content:"\f560"}.fa-check-to-slot:before,.fa-vote-yea:before{content:"\f772"}.fa-cheese:before{content:"\f7ef"}.fa-chess:before{content:"\f439"}.fa-chess-bishop:before{content:"\f43a"}.fa-chess-board:before{content:"\f43c"}.fa-chess-king:before{content:"\f43f"}.fa-chess-knight:before{content:"\f441"}.fa-chess-pawn:before{content:"\f443"}.fa-chess-queen:before{content:"\f445"}.fa-chess-rook:before{content:"\f447"}.fa-chevron-down:before{content:"\f078"}.fa-chevron-left:before{content:"\f053"}.fa-chevron-right:before{content:"\f054"}.fa-chevron-up:before{content:"\f077"}.fa-child:before{content:"\f1ae"}.fa-church:before{content:"\f51d"}.fa-circle:before{content:"\f111"}.fa-arrow-circle-down:before,.fa-circle-arrow-down:before{content:"\f0ab"}.fa-arrow-circle-left:before,.fa-circle-arrow-left:before{content:"\f0a8"}.fa-arrow-circle-right:before,.fa-circle-arrow-right:before{content:"\f0a9"}.fa-arrow-circle-up:before,.fa-circle-arrow-up:before{content:"\f0aa"}.fa-check-circle:before,.fa-circle-check:before{content:"\f058"}.fa-chevron-circle-down:before,.fa-circle-chevron-down:before{content:"\f13a"}.fa-chevron-circle-left:before,.fa-circle-chevron-left:before{content:"\f137"}.fa-chevron-circle-right:before,.fa-circle-chevron-right:before{content:"\f138"}.fa-chevron-circle-up:before,.fa-circle-chevron-up:before{content:"\f139"}.fa-circle-dollar-to-slot:before,.fa-donate:before{content:"\f4b9"}.fa-circle-dot:before,.fa-dot-circle:before{content:"\f192"}.fa-arrow-alt-circle-down:before,.fa-circle-down:before{content:"\f358"}.fa-circle-exclamation:before,.fa-exclamation-circle:before{content:"\f06a"}.fa-circle-h:before,.fa-hospital-symbol:before{content:"\f47e"}.fa-adjust:before,.fa-circle-half-stroke:before{content:"\f042"}.fa-circle-info:before,.fa-info-circle:before{content:"\f05a"}.fa-arrow-alt-circle-left:before,.fa-circle-left:before{content:"\f359"}.fa-circle-minus:before,.fa-minus-circle:before{content:"\f056"}.fa-circle-notch:before{content:"\f1ce"}.fa-circle-pause:before,.fa-pause-circle:before{content:"\f28b"}.fa-circle-play:before,.fa-play-circle:before{content:"\f144"}.fa-circle-plus:before,.fa-plus-circle:before{content:"\f055"}.fa-circle-question:before,.fa-question-circle:before{content:"\f059"}.fa-circle-radiation:before,.fa-radiation-alt:before{content:"\f7ba"}.fa-arrow-alt-circle-right:before,.fa-circle-right:before{content:"\f35a"}.fa-circle-stop:before,.fa-stop-circle:before{content:"\f28d"}.fa-arrow-alt-circle-up:before,.fa-circle-up:before{content:"\f35b"}.fa-circle-user:before,.fa-user-circle:before{content:"\f2bd"}.fa-circle-xmark:before,.fa-times-circle:before,.fa-xmark-circle:before{content:"\f057"}.fa-city:before{content:"\f64f"}.fa-clapperboard:before{content:"\e131"}.fa-clipboard:before{content:"\f328"}.fa-clipboard-check:before{content:"\f46c"}.fa-clipboard-list:before{content:"\f46d"}.fa-clock-four:before,.fa-clock:before{content:"\f017"}.fa-clock-rotate-left:before,.fa-history:before{content:"\f1da"}.fa-clone:before{content:"\f24d"}.fa-closed-captioning:before{content:"\f20a"}.fa-cloud:before{content:"\f0c2"}.fa-cloud-arrow-down:before,.fa-cloud-download-alt:before,.fa-cloud-download:before{content:"\f0ed"}.fa-cloud-arrow-up:before,.fa-cloud-upload-alt:before,.fa-cloud-upload:before{content:"\f0ee"}.fa-cloud-meatball:before{content:"\f73b"}.fa-cloud-moon:before{content:"\f6c3"}.fa-cloud-moon-rain:before{content:"\f73c"}.fa-cloud-rain:before{content:"\f73d"}.fa-cloud-showers-heavy:before{content:"\f740"}.fa-cloud-sun:before{content:"\f6c4"}.fa-cloud-sun-rain:before{content:"\f743"}.fa-clover:before{content:"\e139"}.fa-code:before{content:"\f121"}.fa-code-branch:before{content:"\f126"}.fa-code-commit:before{content:"\f386"}.fa-code-compare:before{content:"\e13a"}.fa-code-fork:before{content:"\e13b"}.fa-code-merge:before{content:"\f387"}.fa-code-pull-request:before{content:"\e13c"}.fa-coins:before{content:"\f51e"}.fa-colon-sign:before{content:"\e140"}.fa-comment:before{content:"\f075"}.fa-comment-dollar:before{content:"\f651"}.fa-comment-dots:before,.fa-commenting:before{content:"\f4ad"}.fa-comment-medical:before{content:"\f7f5"}.fa-comment-slash:before{content:"\f4b3"}.fa-comment-sms:before,.fa-sms:before{content:"\f7cd"}.fa-comments:before{content:"\f086"}.fa-comments-dollar:before{content:"\f653"}.fa-compact-disc:before{content:"\f51f"}.fa-compass:before{content:"\f14e"}.fa-compass-drafting:before,.fa-drafting-compass:before{content:"\f568"}.fa-compress:before{content:"\f066"}.fa-computer-mouse:before,.fa-mouse:before{content:"\f8cc"}.fa-cookie:before{content:"\f563"}.fa-cookie-bite:before{content:"\f564"}.fa-copy:before{content:"\f0c5"}.fa-copyright:before{content:"\f1f9"}.fa-couch:before{content:"\f4b8"}.fa-credit-card-alt:before,.fa-credit-card:before{content:"\f09d"}.fa-crop:before{content:"\f125"}.fa-crop-alt:before,.fa-crop-simple:before{content:"\f565"}.fa-cross:before{content:"\f654"}.fa-crosshairs:before{content:"\f05b"}.fa-crow:before{content:"\f520"}.fa-crown:before{content:"\f521"}.fa-crutch:before{content:"\f7f7"}.fa-cruzeiro-sign:before{content:"\e152"}.fa-cube:before{content:"\f1b2"}.fa-cubes:before{content:"\f1b3"}.fa-d:before{content:"\44"}.fa-database:before{content:"\f1c0"}.fa-backspace:before,.fa-delete-left:before{content:"\f55a"}.fa-democrat:before{content:"\f747"}.fa-desktop-alt:before,.fa-desktop:before{content:"\f390"}.fa-dharmachakra:before{content:"\f655"}.fa-diagram-next:before{content:"\e476"}.fa-diagram-predecessor:before{content:"\e477"}.fa-diagram-project:before,.fa-project-diagram:before{content:"\f542"}.fa-diagram-successor:before{content:"\e47a"}.fa-diamond:before{content:"\f219"}.fa-diamond-turn-right:before,.fa-directions:before{content:"\f5eb"}.fa-dice:before{content:"\f522"}.fa-dice-d20:before{content:"\f6cf"}.fa-dice-d6:before{content:"\f6d1"}.fa-dice-five:before{content:"\f523"}.fa-dice-four:before{content:"\f524"}.fa-dice-one:before{content:"\f525"}.fa-dice-six:before{content:"\f526"}.fa-dice-three:before{content:"\f527"}.fa-dice-two:before{content:"\f528"}.fa-disease:before{content:"\f7fa"}.fa-divide:before{content:"\f529"}.fa-dna:before{content:"\f471"}.fa-dog:before{content:"\f6d3"}.fa-dollar-sign:before,.fa-dollar:before,.fa-usd:before{content:"\24"}.fa-dolly-box:before,.fa-dolly:before{content:"\f472"}.fa-dong-sign:before{content:"\e169"}.fa-door-closed:before{content:"\f52a"}.fa-door-open:before{content:"\f52b"}.fa-dove:before{content:"\f4ba"}.fa-compress-alt:before,.fa-down-left-and-up-right-to-center:before{content:"\f422"}.fa-down-long:before,.fa-long-arrow-alt-down:before{content:"\f309"}.fa-download:before{content:"\f019"}.fa-dragon:before{content:"\f6d5"}.fa-draw-polygon:before{content:"\f5ee"}.fa-droplet:before,.fa-tint:before{content:"\f043"}.fa-droplet-slash:before,.fa-tint-slash:before{content:"\f5c7"}.fa-drum:before{content:"\f569"}.fa-drum-steelpan:before{content:"\f56a"}.fa-drumstick-bite:before{content:"\f6d7"}.fa-dumbbell:before{content:"\f44b"}.fa-dumpster:before{content:"\f793"}.fa-dumpster-fire:before{content:"\f794"}.fa-dungeon:before{content:"\f6d9"}.fa-e:before{content:"\45"}.fa-deaf:before,.fa-deafness:before,.fa-ear-deaf:before,.fa-hard-of-hearing:before{content:"\f2a4"}.fa-assistive-listening-systems:before,.fa-ear-listen:before{content:"\f2a2"}.fa-earth-africa:before,.fa-globe-africa:before{content:"\f57c"}.fa-earth-america:before,.fa-earth-americas:before,.fa-earth:before,.fa-globe-americas:before{content:"\f57d"}.fa-earth-asia:before,.fa-globe-asia:before{content:"\f57e"}.fa-earth-europe:before,.fa-globe-europe:before{content:"\f7a2"}.fa-earth-oceania:before,.fa-globe-oceania:before{content:"\e47b"}.fa-egg:before{content:"\f7fb"}.fa-eject:before{content:"\f052"}.fa-elevator:before{content:"\e16d"}.fa-ellipsis-h:before,.fa-ellipsis:before{content:"\f141"}.fa-ellipsis-v:before,.fa-ellipsis-vertical:before{content:"\f142"}.fa-envelope:before{content:"\f0e0"}.fa-envelope-open:before{content:"\f2b6"}.fa-envelope-open-text:before{content:"\f658"}.fa-envelopes-bulk:before,.fa-mail-bulk:before{content:"\f674"}.fa-equals:before{content:"\3d"}.fa-eraser:before{content:"\f12d"}.fa-ethernet:before{content:"\f796"}.fa-eur:before,.fa-euro-sign:before,.fa-euro:before{content:"\f153"}.fa-exclamation:before{content:"\21"}.fa-expand:before{content:"\f065"}.fa-eye:before{content:"\f06e"}.fa-eye-dropper-empty:before,.fa-eye-dropper:before,.fa-eyedropper:before{content:"\f1fb"}.fa-eye-low-vision:before,.fa-low-vision:before{content:"\f2a8"}.fa-eye-slash:before{content:"\f070"}.fa-f:before{content:"\46"}.fa-angry:before,.fa-face-angry:before{content:"\f556"}.fa-dizzy:before,.fa-face-dizzy:before{content:"\f567"}.fa-face-flushed:before,.fa-flushed:before{content:"\f579"}.fa-face-frown:before,.fa-frown:before{content:"\f119"}.fa-face-frown-open:before,.fa-frown-open:before{content:"\f57a"}.fa-face-grimace:before,.fa-grimace:before{content:"\f57f"}.fa-face-grin:before,.fa-grin:before{content:"\f580"}.fa-face-grin-beam:before,.fa-grin-beam:before{content:"\f582"}.fa-face-grin-beam-sweat:before,.fa-grin-beam-sweat:before{content:"\f583"}.fa-face-grin-hearts:before,.fa-grin-hearts:before{content:"\f584"}.fa-face-grin-squint:before,.fa-grin-squint:before{content:"\f585"}.fa-face-grin-squint-tears:before,.fa-grin-squint-tears:before{content:"\f586"}.fa-face-grin-stars:before,.fa-grin-stars:before{content:"\f587"}.fa-face-grin-tears:before,.fa-grin-tears:before{content:"\f588"}.fa-face-grin-tongue:before,.fa-grin-tongue:before{content:"\f589"}.fa-face-grin-tongue-squint:before,.fa-grin-tongue-squint:before{content:"\f58a"}.fa-face-grin-tongue-wink:before,.fa-grin-tongue-wink:before{content:"\f58b"}.fa-face-grin-wide:before,.fa-grin-alt:before{content:"\f581"}.fa-face-grin-wink:before,.fa-grin-wink:before{content:"\f58c"}.fa-face-kiss:before,.fa-kiss:before{content:"\f596"}.fa-face-kiss-beam:before,.fa-kiss-beam:before{content:"\f597"}.fa-face-kiss-wink-heart:before,.fa-kiss-wink-heart:before{content:"\f598"}.fa-face-laugh:before,.fa-laugh:before{content:"\f599"}.fa-face-laugh-beam:before,.fa-laugh-beam:before{content:"\f59a"}.fa-face-laugh-squint:before,.fa-laugh-squint:before{content:"\f59b"}.fa-face-laugh-wink:before,.fa-laugh-wink:before{content:"\f59c"}.fa-face-meh:before,.fa-meh:before{content:"\f11a"}.fa-face-meh-blank:before,.fa-meh-blank:before{content:"\f5a4"}.fa-face-rolling-eyes:before,.fa-meh-rolling-eyes:before{content:"\f5a5"}.fa-face-sad-cry:before,.fa-sad-cry:before{content:"\f5b3"}.fa-face-sad-tear:before,.fa-sad-tear:before{content:"\f5b4"}.fa-face-smile:before,.fa-smile:before{content:"\f118"}.fa-face-smile-beam:before,.fa-smile-beam:before{content:"\f5b8"}.fa-face-smile-wink:before,.fa-smile-wink:before{content:"\f4da"}.fa-face-surprise:before,.fa-surprise:before{content:"\f5c2"}.fa-face-tired:before,.fa-tired:before{content:"\f5c8"}.fa-fan:before{content:"\f863"}.fa-faucet:before{content:"\e005"}.fa-fax:before{content:"\f1ac"}.fa-feather:before{content:"\f52d"}.fa-feather-alt:before,.fa-feather-pointed:before{content:"\f56b"}.fa-file:before{content:"\f15b"}.fa-file-arrow-down:before,.fa-file-download:before{content:"\f56d"}.fa-file-arrow-up:before,.fa-file-upload:before{content:"\f574"}.fa-file-audio:before{content:"\f1c7"}.fa-file-code:before{content:"\f1c9"}.fa-file-contract:before{content:"\f56c"}.fa-file-csv:before{content:"\f6dd"}.fa-file-excel:before{content:"\f1c3"}.fa-arrow-right-from-file:before,.fa-file-export:before{content:"\f56e"}.fa-file-image:before{content:"\f1c5"}.fa-arrow-right-to-file:before,.fa-file-import:before{content:"\f56f"}.fa-file-invoice:before{content:"\f570"}.fa-file-invoice-dollar:before{content:"\f571"}.fa-file-alt:before,.fa-file-lines:before,.fa-file-text:before{content:"\f15c"}.fa-file-medical:before{content:"\f477"}.fa-file-pdf:before{content:"\f1c1"}.fa-file-powerpoint:before{content:"\f1c4"}.fa-file-prescription:before{content:"\f572"}.fa-file-signature:before{content:"\f573"}.fa-file-video:before{content:"\f1c8"}.fa-file-medical-alt:before,.fa-file-waveform:before{content:"\f478"}.fa-file-word:before{content:"\f1c2"}.fa-file-archive:before,.fa-file-zipper:before{content:"\f1c6"}.fa-fill:before{content:"\f575"}.fa-fill-drip:before{content:"\f576"}.fa-film:before{content:"\f008"}.fa-filter:before{content:"\f0b0"}.fa-filter-circle-dollar:before,.fa-funnel-dollar:before{content:"\f662"}.fa-filter-circle-xmark:before{content:"\e17b"}.fa-fingerprint:before{content:"\f577"}.fa-fire:before{content:"\f06d"}.fa-fire-extinguisher:before{content:"\f134"}.fa-fire-alt:before,.fa-fire-flame-curved:before{content:"\f7e4"}.fa-burn:before,.fa-fire-flame-simple:before{content:"\f46a"}.fa-fish:before{content:"\f578"}.fa-flag:before{content:"\f024"}.fa-flag-checkered:before{content:"\f11e"}.fa-flag-usa:before{content:"\f74d"}.fa-flask:before{content:"\f0c3"}.fa-floppy-disk:before,.fa-save:before{content:"\f0c7"}.fa-florin-sign:before{content:"\e184"}.fa-folder:before{content:"\f07b"}.fa-folder-minus:before{content:"\f65d"}.fa-folder-open:before{content:"\f07c"}.fa-folder-plus:before{content:"\f65e"}.fa-folder-tree:before{content:"\f802"}.fa-font:before{content:"\f031"}.fa-football-ball:before,.fa-football:before{content:"\f44e"}.fa-forward:before{content:"\f04e"}.fa-fast-forward:before,.fa-forward-fast:before{content:"\f050"}.fa-forward-step:before,.fa-step-forward:before{content:"\f051"}.fa-franc-sign:before{content:"\e18f"}.fa-frog:before{content:"\f52e"}.fa-futbol-ball:before,.fa-futbol:before,.fa-soccer-ball:before{content:"\f1e3"}.fa-g:before{content:"\47"}.fa-gamepad:before{content:"\f11b"}.fa-gas-pump:before{content:"\f52f"}.fa-dashboard:before,.fa-gauge-med:before,.fa-gauge:before,.fa-tachometer-alt-average:before{content:"\f624"}.fa-gauge-high:before,.fa-tachometer-alt-fast:before,.fa-tachometer-alt:before{content:"\f625"}.fa-gauge-simple-med:before,.fa-gauge-simple:before,.fa-tachometer-average:before{content:"\f629"}.fa-gauge-simple-high:before,.fa-tachometer-fast:before,.fa-tachometer:before{content:"\f62a"}.fa-gavel:before,.fa-legal:before{content:"\f0e3"}.fa-cog:before,.fa-gear:before{content:"\f013"}.fa-cogs:before,.fa-gears:before{content:"\f085"}.fa-gem:before{content:"\f3a5"}.fa-genderless:before{content:"\f22d"}.fa-ghost:before{content:"\f6e2"}.fa-gift:before{content:"\f06b"}.fa-gifts:before{content:"\f79c"}.fa-glasses:before{content:"\f530"}.fa-globe:before{content:"\f0ac"}.fa-golf-ball-tee:before,.fa-golf-ball:before{content:"\f450"}.fa-gopuram:before{content:"\f664"}.fa-graduation-cap:before,.fa-mortar-board:before{content:"\f19d"}.fa-greater-than:before{content:"\3e"}.fa-greater-than-equal:before{content:"\f532"}.fa-grip-horizontal:before,.fa-grip:before{content:"\f58d"}.fa-grip-lines:before{content:"\f7a4"}.fa-grip-lines-vertical:before{content:"\f7a5"}.fa-grip-vertical:before{content:"\f58e"}.fa-guarani-sign:before{content:"\e19a"}.fa-guitar:before{content:"\f7a6"}.fa-gun:before{content:"\e19b"}.fa-h:before{content:"\48"}.fa-hammer:before{content:"\f6e3"}.fa-hamsa:before{content:"\f665"}.fa-hand-paper:before,.fa-hand:before{content:"\f256"}.fa-hand-back-fist:before,.fa-hand-rock:before{content:"\f255"}.fa-allergies:before,.fa-hand-dots:before{content:"\f461"}.fa-fist-raised:before,.fa-hand-fist:before{content:"\f6de"}.fa-hand-holding:before{content:"\f4bd"}.fa-hand-holding-dollar:before,.fa-hand-holding-usd:before{content:"\f4c0"}.fa-hand-holding-droplet:before,.fa-hand-holding-water:before{content:"\f4c1"}.fa-hand-holding-heart:before{content:"\f4be"}.fa-hand-holding-medical:before{content:"\e05c"}.fa-hand-lizard:before{content:"\f258"}.fa-hand-middle-finger:before{content:"\f806"}.fa-hand-peace:before{content:"\f25b"}.fa-hand-point-down:before{content:"\f0a7"}.fa-hand-point-left:before{content:"\f0a5"}.fa-hand-point-right:before{content:"\f0a4"}.fa-hand-point-up:before{content:"\f0a6"}.fa-hand-pointer:before{content:"\f25a"}.fa-hand-scissors:before{content:"\f257"}.fa-hand-sparkles:before{content:"\e05d"}.fa-hand-spock:before{content:"\f259"}.fa-hands:before,.fa-sign-language:before,.fa-signing:before{content:"\f2a7"}.fa-american-sign-language-interpreting:before,.fa-asl-interpreting:before,.fa-hands-american-sign-language-interpreting:before,.fa-hands-asl-interpreting:before{content:"\f2a3"}.fa-hands-bubbles:before,.fa-hands-wash:before{content:"\e05e"}.fa-hands-clapping:before{content:"\e1a8"}.fa-hands-holding:before{content:"\f4c2"}.fa-hands-praying:before,.fa-praying-hands:before{content:"\f684"}.fa-handshake:before{content:"\f2b5"}.fa-hands-helping:before,.fa-handshake-angle:before{content:"\f4c4"}.fa-handshake-alt-slash:before,.fa-handshake-simple-slash:before{content:"\e05f"}.fa-handshake-slash:before{content:"\e060"}.fa-hanukiah:before{content:"\f6e6"}.fa-hard-drive:before,.fa-hdd:before{content:"\f0a0"}.fa-hashtag:before{content:"\23"}.fa-hat-cowboy:before{content:"\f8c0"}.fa-hat-cowboy-side:before{content:"\f8c1"}.fa-hat-wizard:before{content:"\f6e8"}.fa-head-side-cough:before{content:"\e061"}.fa-head-side-cough-slash:before{content:"\e062"}.fa-head-side-mask:before{content:"\e063"}.fa-head-side-virus:before{content:"\e064"}.fa-header:before,.fa-heading:before{content:"\f1dc"}.fa-headphones:before{content:"\f025"}.fa-headphones-alt:before,.fa-headphones-simple:before{content:"\f58f"}.fa-headset:before{content:"\f590"}.fa-heart:before{content:"\f004"}.fa-heart-broken:before,.fa-heart-crack:before{content:"\f7a9"}.fa-heart-pulse:before,.fa-heartbeat:before{content:"\f21e"}.fa-helicopter:before{content:"\f533"}.fa-hard-hat:before,.fa-hat-hard:before,.fa-helmet-safety:before{content:"\f807"}.fa-highlighter:before{content:"\f591"}.fa-hippo:before{content:"\f6ed"}.fa-hockey-puck:before{content:"\f453"}.fa-holly-berry:before{content:"\f7aa"}.fa-horse:before{content:"\f6f0"}.fa-horse-head:before{content:"\f7ab"}.fa-hospital-alt:before,.fa-hospital-wide:before,.fa-hospital:before{content:"\f0f8"}.fa-hospital-user:before{content:"\f80d"}.fa-hot-tub-person:before,.fa-hot-tub:before{content:"\f593"}.fa-hotdog:before{content:"\f80f"}.fa-hotel:before{content:"\f594"}.fa-hourglass-2:before,.fa-hourglass-half:before,.fa-hourglass:before{content:"\f254"}.fa-hourglass-empty:before{content:"\f252"}.fa-hourglass-3:before,.fa-hourglass-end:before{content:"\f253"}.fa-hourglass-1:before,.fa-hourglass-start:before{content:"\f251"}.fa-home-alt:before,.fa-home-lg-alt:before,.fa-home:before,.fa-house:before{content:"\f015"}.fa-home-lg:before,.fa-house-chimney:before{content:"\e3af"}.fa-house-chimney-crack:before,.fa-house-damage:before{content:"\f6f1"}.fa-clinic-medical:before,.fa-house-chimney-medical:before{content:"\f7f2"}.fa-house-chimney-user:before{content:"\e065"}.fa-house-chimney-window:before{content:"\e00d"}.fa-house-crack:before{content:"\e3b1"}.fa-house-laptop:before,.fa-laptop-house:before{content:"\e066"}.fa-house-medical:before{content:"\e3b2"}.fa-home-user:before,.fa-house-user:before{content:"\e1b0"}.fa-hryvnia-sign:before,.fa-hryvnia:before{content:"\f6f2"}.fa-i:before{content:"\49"}.fa-i-cursor:before{content:"\f246"}.fa-ice-cream:before{content:"\f810"}.fa-icicles:before{content:"\f7ad"}.fa-heart-music-camera-bolt:before,.fa-icons:before{content:"\f86d"}.fa-id-badge:before{content:"\f2c1"}.fa-drivers-license:before,.fa-id-card:before{content:"\f2c2"}.fa-id-card-alt:before,.fa-id-card-clip:before{content:"\f47f"}.fa-igloo:before{content:"\f7ae"}.fa-image:before{content:"\f03e"}.fa-image-portrait:before,.fa-portrait:before{content:"\f3e0"}.fa-images:before{content:"\f302"}.fa-inbox:before{content:"\f01c"}.fa-indent:before{content:"\f03c"}.fa-indian-rupee-sign:before,.fa-indian-rupee:before,.fa-inr:before{content:"\e1bc"}.fa-industry:before{content:"\f275"}.fa-infinity:before{content:"\f534"}.fa-info:before{content:"\f129"}.fa-italic:before{content:"\f033"}.fa-j:before{content:"\4a"}.fa-jedi:before{content:"\f669"}.fa-fighter-jet:before,.fa-jet-fighter:before{content:"\f0fb"}.fa-joint:before{content:"\f595"}.fa-k:before{content:"\4b"}.fa-kaaba:before{content:"\f66b"}.fa-key:before{content:"\f084"}.fa-keyboard:before{content:"\f11c"}.fa-khanda:before{content:"\f66d"}.fa-kip-sign:before{content:"\e1c4"}.fa-first-aid:before,.fa-kit-medical:before{content:"\f479"}.fa-kiwi-bird:before{content:"\f535"}.fa-l:before{content:"\4c"}.fa-landmark:before{content:"\f66f"}.fa-language:before{content:"\f1ab"}.fa-laptop:before{content:"\f109"}.fa-laptop-code:before{content:"\f5fc"}.fa-laptop-medical:before{content:"\f812"}.fa-lari-sign:before{content:"\e1c8"}.fa-layer-group:before{content:"\f5fd"}.fa-leaf:before{content:"\f06c"}.fa-left-long:before,.fa-long-arrow-alt-left:before{content:"\f30a"}.fa-arrows-alt-h:before,.fa-left-right:before{content:"\f337"}.fa-lemon:before{content:"\f094"}.fa-less-than:before{content:"\3c"}.fa-less-than-equal:before{content:"\f537"}.fa-life-ring:before{content:"\f1cd"}.fa-lightbulb:before{content:"\f0eb"}.fa-chain:before,.fa-link:before{content:"\f0c1"}.fa-chain-broken:before,.fa-chain-slash:before,.fa-link-slash:before,.fa-unlink:before{content:"\f127"}.fa-lira-sign:before{content:"\f195"}.fa-list-squares:before,.fa-list:before{content:"\f03a"}.fa-list-check:before,.fa-tasks:before{content:"\f0ae"}.fa-list-1-2:before,.fa-list-numeric:before,.fa-list-ol:before{content:"\f0cb"}.fa-list-dots:before,.fa-list-ul:before{content:"\f0ca"}.fa-litecoin-sign:before{content:"\e1d3"}.fa-location-arrow:before{content:"\f124"}.fa-location-crosshairs:before,.fa-location:before{content:"\f601"}.fa-location-dot:before,.fa-map-marker-alt:before{content:"\f3c5"}.fa-location-pin:before,.fa-map-marker:before{content:"\f041"}.fa-lock:before{content:"\f023"}.fa-lock-open:before{content:"\f3c1"}.fa-lungs:before{content:"\f604"}.fa-lungs-virus:before{content:"\e067"}.fa-m:before{content:"\4d"}.fa-magnet:before{content:"\f076"}.fa-magnifying-glass:before,.fa-search:before{content:"\f002"}.fa-magnifying-glass-dollar:before,.fa-search-dollar:before{content:"\f688"}.fa-magnifying-glass-location:before,.fa-search-location:before{content:"\f689"}.fa-magnifying-glass-minus:before,.fa-search-minus:before{content:"\f010"}.fa-magnifying-glass-plus:before,.fa-search-plus:before{content:"\f00e"}.fa-manat-sign:before{content:"\e1d5"}.fa-map:before{content:"\f279"}.fa-map-location:before,.fa-map-marked:before{content:"\f59f"}.fa-map-location-dot:before,.fa-map-marked-alt:before{content:"\f5a0"}.fa-map-pin:before{content:"\f276"}.fa-marker:before{content:"\f5a1"}.fa-mars:before{content:"\f222"}.fa-mars-and-venus:before{content:"\f224"}.fa-mars-double:before{content:"\f227"}.fa-mars-stroke:before{content:"\f229"}.fa-mars-stroke-h:before,.fa-mars-stroke-right:before{content:"\f22b"}.fa-mars-stroke-up:before,.fa-mars-stroke-v:before{content:"\f22a"}.fa-glass-martini-alt:before,.fa-martini-glass:before{content:"\f57b"}.fa-cocktail:before,.fa-martini-glass-citrus:before{content:"\f561"}.fa-glass-martini:before,.fa-martini-glass-empty:before{content:"\f000"}.fa-mask:before{content:"\f6fa"}.fa-mask-face:before{content:"\e1d7"}.fa-masks-theater:before,.fa-theater-masks:before{content:"\f630"}.fa-expand-arrows-alt:before,.fa-maximize:before{content:"\f31e"}.fa-medal:before{content:"\f5a2"}.fa-memory:before{content:"\f538"}.fa-menorah:before{content:"\f676"}.fa-mercury:before{content:"\f223"}.fa-comment-alt:before,.fa-message:before{content:"\f27a"}.fa-meteor:before{content:"\f753"}.fa-microchip:before{content:"\f2db"}.fa-microphone:before{content:"\f130"}.fa-microphone-alt:before,.fa-microphone-lines:before{content:"\f3c9"}.fa-microphone-alt-slash:before,.fa-microphone-lines-slash:before{content:"\f539"}.fa-microphone-slash:before{content:"\f131"}.fa-microscope:before{content:"\f610"}.fa-mill-sign:before{content:"\e1ed"}.fa-compress-arrows-alt:before,.fa-minimize:before{content:"\f78c"}.fa-minus:before,.fa-subtract:before{content:"\f068"}.fa-mitten:before{content:"\f7b5"}.fa-mobile-android:before,.fa-mobile-phone:before,.fa-mobile:before{content:"\f3ce"}.fa-mobile-button:before{content:"\f10b"}.fa-mobile-alt:before,.fa-mobile-screen-button:before{content:"\f3cd"}.fa-money-bill:before{content:"\f0d6"}.fa-money-bill-1:before,.fa-money-bill-alt:before{content:"\f3d1"}.fa-money-bill-1-wave:before,.fa-money-bill-wave-alt:before{content:"\f53b"}.fa-money-bill-wave:before{content:"\f53a"}.fa-money-check:before{content:"\f53c"}.fa-money-check-alt:before,.fa-money-check-dollar:before{content:"\f53d"}.fa-monument:before{content:"\f5a6"}.fa-moon:before{content:"\f186"}.fa-mortar-pestle:before{content:"\f5a7"}.fa-mosque:before{content:"\f678"}.fa-motorcycle:before{content:"\f21c"}.fa-mountain:before{content:"\f6fc"}.fa-mug-hot:before{content:"\f7b6"}.fa-coffee:before,.fa-mug-saucer:before{content:"\f0f4"}.fa-music:before{content:"\f001"}.fa-n:before{content:"\4e"}.fa-naira-sign:before{content:"\e1f6"}.fa-network-wired:before{content:"\f6ff"}.fa-neuter:before{content:"\f22c"}.fa-newspaper:before{content:"\f1ea"}.fa-not-equal:before{content:"\f53e"}.fa-note-sticky:before,.fa-sticky-note:before{content:"\f249"}.fa-notes-medical:before{content:"\f481"}.fa-o:before{content:"\4f"}.fa-object-group:before{content:"\f247"}.fa-object-ungroup:before{content:"\f248"}.fa-oil-can:before{content:"\f613"}.fa-om:before{content:"\f679"}.fa-otter:before{content:"\f700"}.fa-dedent:before,.fa-outdent:before{content:"\f03b"}.fa-p:before{content:"\50"}.fa-pager:before{content:"\f815"}.fa-paint-roller:before{content:"\f5aa"}.fa-paint-brush:before,.fa-paintbrush:before{content:"\f1fc"}.fa-palette:before{content:"\f53f"}.fa-pallet:before{content:"\f482"}.fa-panorama:before{content:"\e209"}.fa-paper-plane:before{content:"\f1d8"}.fa-paperclip:before{content:"\f0c6"}.fa-parachute-box:before{content:"\f4cd"}.fa-paragraph:before{content:"\f1dd"}.fa-passport:before{content:"\f5ab"}.fa-file-clipboard:before,.fa-paste:before{content:"\f0ea"}.fa-pause:before{content:"\f04c"}.fa-paw:before{content:"\f1b0"}.fa-peace:before{content:"\f67c"}.fa-pen:before{content:"\f304"}.fa-pen-alt:before,.fa-pen-clip:before{content:"\f305"}.fa-pen-fancy:before{content:"\f5ac"}.fa-pen-nib:before{content:"\f5ad"}.fa-pen-ruler:before,.fa-pencil-ruler:before{content:"\f5ae"}.fa-edit:before,.fa-pen-to-square:before{content:"\f044"}.fa-pencil-alt:before,.fa-pencil:before{content:"\f303"}.fa-people-arrows-left-right:before,.fa-people-arrows:before{content:"\e068"}.fa-people-carry-box:before,.fa-people-carry:before{content:"\f4ce"}.fa-pepper-hot:before{content:"\f816"}.fa-percent:before,.fa-percentage:before{content:"\25"}.fa-male:before,.fa-person:before{content:"\f183"}.fa-biking:before,.fa-person-biking:before{content:"\f84a"}.fa-person-booth:before{content:"\f756"}.fa-diagnoses:before,.fa-person-dots-from-line:before{content:"\f470"}.fa-female:before,.fa-person-dress:before{content:"\f182"}.fa-hiking:before,.fa-person-hiking:before{content:"\f6ec"}.fa-person-praying:before,.fa-pray:before{content:"\f683"}.fa-person-running:before,.fa-running:before{content:"\f70c"}.fa-person-skating:before,.fa-skating:before{content:"\f7c5"}.fa-person-skiing:before,.fa-skiing:before{content:"\f7c9"}.fa-person-skiing-nordic:before,.fa-skiing-nordic:before{content:"\f7ca"}.fa-person-snowboarding:before,.fa-snowboarding:before{content:"\f7ce"}.fa-person-swimming:before,.fa-swimmer:before{content:"\f5c4"}.fa-person-walking:before,.fa-walking:before{content:"\f554"}.fa-blind:before,.fa-person-walking-with-cane:before{content:"\f29d"}.fa-peseta-sign:before{content:"\e221"}.fa-peso-sign:before{content:"\e222"}.fa-phone:before{content:"\f095"}.fa-phone-alt:before,.fa-phone-flip:before{content:"\f879"}.fa-phone-slash:before{content:"\f3dd"}.fa-phone-volume:before,.fa-volume-control-phone:before{content:"\f2a0"}.fa-photo-film:before,.fa-photo-video:before{content:"\f87c"}.fa-piggy-bank:before{content:"\f4d3"}.fa-pills:before{content:"\f484"}.fa-pizza-slice:before{content:"\f818"}.fa-place-of-worship:before{content:"\f67f"}.fa-plane:before{content:"\f072"}.fa-plane-arrival:before{content:"\f5af"}.fa-plane-departure:before{content:"\f5b0"}.fa-plane-slash:before{content:"\e069"}.fa-play:before{content:"\f04b"}.fa-plug:before{content:"\f1e6"}.fa-add:before,.fa-plus:before{content:"\2b"}.fa-plus-minus:before{content:"\e43c"}.fa-podcast:before{content:"\f2ce"}.fa-poo:before{content:"\f2fe"}.fa-poo-bolt:before,.fa-poo-storm:before{content:"\f75a"}.fa-poop:before{content:"\f619"}.fa-power-off:before{content:"\f011"}.fa-prescription:before{content:"\f5b1"}.fa-prescription-bottle:before{content:"\f485"}.fa-prescription-bottle-alt:before,.fa-prescription-bottle-medical:before{content:"\f486"}.fa-print:before{content:"\f02f"}.fa-pump-medical:before{content:"\e06a"}.fa-pump-soap:before{content:"\e06b"}.fa-puzzle-piece:before{content:"\f12e"}.fa-q:before{content:"\51"}.fa-qrcode:before{content:"\f029"}.fa-question:before{content:"\3f"}.fa-quote-left-alt:before,.fa-quote-left:before{content:"\f10d"}.fa-quote-right-alt:before,.fa-quote-right:before{content:"\f10e"}.fa-r:before{content:"\52"}.fa-radiation:before{content:"\f7b9"}.fa-rainbow:before{content:"\f75b"}.fa-receipt:before{content:"\f543"}.fa-record-vinyl:before{content:"\f8d9"}.fa-ad:before,.fa-rectangle-ad:before{content:"\f641"}.fa-list-alt:before,.fa-rectangle-list:before{content:"\f022"}.fa-rectangle-times:before,.fa-rectangle-xmark:before,.fa-times-rectangle:before,.fa-window-close:before{content:"\f410"}.fa-recycle:before{content:"\f1b8"}.fa-registered:before{content:"\f25d"}.fa-repeat:before{content:"\f363"}.fa-mail-reply:before,.fa-reply:before{content:"\f3e5"}.fa-mail-reply-all:before,.fa-reply-all:before{content:"\f122"}.fa-republican:before{content:"\f75e"}.fa-restroom:before{content:"\f7bd"}.fa-retweet:before{content:"\f079"}.fa-ribbon:before{content:"\f4d6"}.fa-right-from-bracket:before,.fa-sign-out-alt:before{content:"\f2f5"}.fa-exchange-alt:before,.fa-right-left:before{content:"\f362"}.fa-long-arrow-alt-right:before,.fa-right-long:before{content:"\f30b"}.fa-right-to-bracket:before,.fa-sign-in-alt:before{content:"\f2f6"}.fa-ring:before{content:"\f70b"}.fa-road:before{content:"\f018"}.fa-robot:before{content:"\f544"}.fa-rocket:before{content:"\f135"}.fa-rotate:before,.fa-sync-alt:before{content:"\f2f1"}.fa-rotate-back:before,.fa-rotate-backward:before,.fa-rotate-left:before,.fa-undo-alt:before{content:"\f2ea"}.fa-redo-alt:before,.fa-rotate-forward:before,.fa-rotate-right:before{content:"\f2f9"}.fa-route:before{content:"\f4d7"}.fa-feed:before,.fa-rss:before{content:"\f09e"}.fa-rouble:before,.fa-rub:before,.fa-ruble-sign:before,.fa-ruble:before{content:"\f158"}.fa-ruler:before{content:"\f545"}.fa-ruler-combined:before{content:"\f546"}.fa-ruler-horizontal:before{content:"\f547"}.fa-ruler-vertical:before{content:"\f548"}.fa-rupee-sign:before,.fa-rupee:before{content:"\f156"}.fa-rupiah-sign:before{content:"\e23d"}.fa-s:before{content:"\53"}.fa-sailboat:before{content:"\e445"}.fa-satellite:before{content:"\f7bf"}.fa-satellite-dish:before{content:"\f7c0"}.fa-balance-scale:before,.fa-scale-balanced:before{content:"\f24e"}.fa-balance-scale-left:before,.fa-scale-unbalanced:before{content:"\f515"}.fa-balance-scale-right:before,.fa-scale-unbalanced-flip:before{content:"\f516"}.fa-school:before{content:"\f549"}.fa-cut:before,.fa-scissors:before{content:"\f0c4"}.fa-screwdriver:before{content:"\f54a"}.fa-screwdriver-wrench:before,.fa-tools:before{content:"\f7d9"}.fa-scroll:before{content:"\f70e"}.fa-scroll-torah:before,.fa-torah:before{content:"\f6a0"}.fa-sd-card:before{content:"\f7c2"}.fa-section:before{content:"\e447"}.fa-seedling:before,.fa-sprout:before{content:"\f4d8"}.fa-server:before{content:"\f233"}.fa-shapes:before,.fa-triangle-circle-square:before{content:"\f61f"}.fa-arrow-turn-right:before,.fa-mail-forward:before,.fa-share:before{content:"\f064"}.fa-share-from-square:before,.fa-share-square:before{content:"\f14d"}.fa-share-alt:before,.fa-share-nodes:before{content:"\f1e0"}.fa-ils:before,.fa-shekel-sign:before,.fa-shekel:before,.fa-sheqel-sign:before,.fa-sheqel:before{content:"\f20b"}.fa-shield:before{content:"\f132"}.fa-shield-alt:before,.fa-shield-blank:before{content:"\f3ed"}.fa-shield-virus:before{content:"\e06c"}.fa-ship:before{content:"\f21a"}.fa-shirt:before,.fa-t-shirt:before,.fa-tshirt:before{content:"\f553"}.fa-shoe-prints:before{content:"\f54b"}.fa-shop:before,.fa-store-alt:before{content:"\f54f"}.fa-shop-slash:before,.fa-store-alt-slash:before{content:"\e070"}.fa-shower:before{content:"\f2cc"}.fa-shrimp:before{content:"\e448"}.fa-random:before,.fa-shuffle:before{content:"\f074"}.fa-shuttle-space:before,.fa-space-shuttle:before{content:"\f197"}.fa-sign-hanging:before,.fa-sign:before{content:"\f4d9"}.fa-signal-5:before,.fa-signal-perfect:before,.fa-signal:before{content:"\f012"}.fa-signature:before{content:"\f5b7"}.fa-map-signs:before,.fa-signs-post:before{content:"\f277"}.fa-sim-card:before{content:"\f7c4"}.fa-sink:before{content:"\e06d"}.fa-sitemap:before{content:"\f0e8"}.fa-skull:before{content:"\f54c"}.fa-skull-crossbones:before{content:"\f714"}.fa-slash:before{content:"\f715"}.fa-sleigh:before{content:"\f7cc"}.fa-sliders-h:before,.fa-sliders:before{content:"\f1de"}.fa-smog:before{content:"\f75f"}.fa-smoking:before{content:"\f48d"}.fa-snowflake:before{content:"\f2dc"}.fa-snowman:before{content:"\f7d0"}.fa-snowplow:before{content:"\f7d2"}.fa-soap:before{content:"\e06e"}.fa-socks:before{content:"\f696"}.fa-solar-panel:before{content:"\f5ba"}.fa-sort:before,.fa-unsorted:before{content:"\f0dc"}.fa-sort-desc:before,.fa-sort-down:before{content:"\f0dd"}.fa-sort-asc:before,.fa-sort-up:before{content:"\f0de"}.fa-spa:before{content:"\f5bb"}.fa-pastafarianism:before,.fa-spaghetti-monster-flying:before{content:"\f67b"}.fa-spell-check:before{content:"\f891"}.fa-spider:before{content:"\f717"}.fa-spinner:before{content:"\f110"}.fa-splotch:before{content:"\f5bc"}.fa-spoon:before,.fa-utensil-spoon:before{content:"\f2e5"}.fa-spray-can:before{content:"\f5bd"}.fa-air-freshener:before,.fa-spray-can-sparkles:before{content:"\f5d0"}.fa-square:before{content:"\f0c8"}.fa-external-link-square:before,.fa-square-arrow-up-right:before{content:"\f14c"}.fa-caret-square-down:before,.fa-square-caret-down:before{content:"\f150"}.fa-caret-square-left:before,.fa-square-caret-left:before{content:"\f191"}.fa-caret-square-right:before,.fa-square-caret-right:before{content:"\f152"}.fa-caret-square-up:before,.fa-square-caret-up:before{content:"\f151"}.fa-check-square:before,.fa-square-check:before{content:"\f14a"}.fa-envelope-square:before,.fa-square-envelope:before{content:"\f199"}.fa-square-full:before{content:"\f45c"}.fa-h-square:before,.fa-square-h:before{content:"\f0fd"}.fa-minus-square:before,.fa-square-minus:before{content:"\f146"}.fa-parking:before,.fa-square-parking:before{content:"\f540"}.fa-pen-square:before,.fa-pencil-square:before,.fa-square-pen:before{content:"\f14b"}.fa-phone-square:before,.fa-square-phone:before{content:"\f098"}.fa-phone-square-alt:before,.fa-square-phone-flip:before{content:"\f87b"}.fa-plus-square:before,.fa-square-plus:before{content:"\f0fe"}.fa-poll-h:before,.fa-square-poll-horizontal:before{content:"\f682"}.fa-poll:before,.fa-square-poll-vertical:before{content:"\f681"}.fa-square-root-alt:before,.fa-square-root-variable:before{content:"\f698"}.fa-rss-square:before,.fa-square-rss:before{content:"\f143"}.fa-share-alt-square:before,.fa-square-share-nodes:before{content:"\f1e1"}.fa-external-link-square-alt:before,.fa-square-up-right:before{content:"\f360"}.fa-square-xmark:before,.fa-times-square:before,.fa-xmark-square:before{content:"\f2d3"}.fa-stairs:before{content:"\e289"}.fa-stamp:before{content:"\f5bf"}.fa-star:before{content:"\f005"}.fa-star-and-crescent:before{content:"\f699"}.fa-star-half:before{content:"\f089"}.fa-star-half-alt:before,.fa-star-half-stroke:before{content:"\f5c0"}.fa-star-of-david:before{content:"\f69a"}.fa-star-of-life:before{content:"\f621"}.fa-gbp:before,.fa-pound-sign:before,.fa-sterling-sign:before{content:"\f154"}.fa-stethoscope:before{content:"\f0f1"}.fa-stop:before{content:"\f04d"}.fa-stopwatch:before{content:"\f2f2"}.fa-stopwatch-20:before{content:"\e06f"}.fa-store:before{content:"\f54e"}.fa-store-slash:before{content:"\e071"}.fa-street-view:before{content:"\f21d"}.fa-strikethrough:before{content:"\f0cc"}.fa-stroopwafel:before{content:"\f551"}.fa-subscript:before{content:"\f12c"}.fa-suitcase:before{content:"\f0f2"}.fa-medkit:before,.fa-suitcase-medical:before{content:"\f0fa"}.fa-suitcase-rolling:before{content:"\f5c1"}.fa-sun:before{content:"\f185"}.fa-superscript:before{content:"\f12b"}.fa-swatchbook:before{content:"\f5c3"}.fa-synagogue:before{content:"\f69b"}.fa-syringe:before{content:"\f48e"}.fa-t:before{content:"\54"}.fa-table:before{content:"\f0ce"}.fa-table-cells:before,.fa-th:before{content:"\f00a"}.fa-table-cells-large:before,.fa-th-large:before{content:"\f009"}.fa-columns:before,.fa-table-columns:before{content:"\f0db"}.fa-table-list:before,.fa-th-list:before{content:"\f00b"}.fa-ping-pong-paddle-ball:before,.fa-table-tennis-paddle-ball:before,.fa-table-tennis:before{content:"\f45d"}.fa-tablet-android:before,.fa-tablet:before{content:"\f3fb"}.fa-tablet-button:before{content:"\f10a"}.fa-tablet-alt:before,.fa-tablet-screen-button:before{content:"\f3fa"}.fa-tablets:before{content:"\f490"}.fa-digital-tachograph:before,.fa-tachograph-digital:before{content:"\f566"}.fa-tag:before{content:"\f02b"}.fa-tags:before{content:"\f02c"}.fa-tape:before{content:"\f4db"}.fa-cab:before,.fa-taxi:before{content:"\f1ba"}.fa-teeth:before{content:"\f62e"}.fa-teeth-open:before{content:"\f62f"}.fa-temperature-0:before,.fa-temperature-empty:before,.fa-thermometer-0:before,.fa-thermometer-empty:before{content:"\f2cb"}.fa-temperature-4:before,.fa-temperature-full:before,.fa-thermometer-4:before,.fa-thermometer-full:before{content:"\f2c7"}.fa-temperature-2:before,.fa-temperature-half:before,.fa-thermometer-2:before,.fa-thermometer-half:before{content:"\f2c9"}.fa-temperature-high:before{content:"\f769"}.fa-temperature-low:before{content:"\f76b"}.fa-temperature-1:before,.fa-temperature-quarter:before,.fa-thermometer-1:before,.fa-thermometer-quarter:before{content:"\f2ca"}.fa-temperature-3:before,.fa-temperature-three-quarters:before,.fa-thermometer-3:before,.fa-thermometer-three-quarters:before{content:"\f2c8"}.fa-tenge-sign:before,.fa-tenge:before{content:"\f7d7"}.fa-terminal:before{content:"\f120"}.fa-text-height:before{content:"\f034"}.fa-remove-format:before,.fa-text-slash:before{content:"\f87d"}.fa-text-width:before{content:"\f035"}.fa-thermometer:before{content:"\f491"}.fa-thumbs-down:before{content:"\f165"}.fa-thumbs-up:before{content:"\f164"}.fa-thumb-tack:before,.fa-thumbtack:before{content:"\f08d"}.fa-ticket:before{content:"\f145"}.fa-ticket-alt:before,.fa-ticket-simple:before{content:"\f3ff"}.fa-timeline:before{content:"\e29c"}.fa-toggle-off:before{content:"\f204"}.fa-toggle-on:before{content:"\f205"}.fa-toilet:before{content:"\f7d8"}.fa-toilet-paper:before{content:"\f71e"}.fa-toilet-paper-slash:before{content:"\e072"}.fa-toolbox:before{content:"\f552"}.fa-tooth:before{content:"\f5c9"}.fa-torii-gate:before{content:"\f6a1"}.fa-broadcast-tower:before,.fa-tower-broadcast:before{content:"\f519"}.fa-tractor:before{content:"\f722"}.fa-trademark:before{content:"\f25c"}.fa-traffic-light:before{content:"\f637"}.fa-trailer:before{content:"\e041"}.fa-train:before{content:"\f238"}.fa-subway:before,.fa-train-subway:before{content:"\f239"}.fa-train-tram:before,.fa-tram:before{content:"\f7da"}.fa-transgender-alt:before,.fa-transgender:before{content:"\f225"}.fa-trash:before{content:"\f1f8"}.fa-trash-arrow-up:before,.fa-trash-restore:before{content:"\f829"}.fa-trash-alt:before,.fa-trash-can:before{content:"\f2ed"}.fa-trash-can-arrow-up:before,.fa-trash-restore-alt:before{content:"\f82a"}.fa-tree:before{content:"\f1bb"}.fa-exclamation-triangle:before,.fa-triangle-exclamation:before,.fa-warning:before{content:"\f071"}.fa-trophy:before{content:"\f091"}.fa-truck:before{content:"\f0d1"}.fa-shipping-fast:before,.fa-truck-fast:before{content:"\f48b"}.fa-ambulance:before,.fa-truck-medical:before{content:"\f0f9"}.fa-truck-monster:before{content:"\f63b"}.fa-truck-moving:before{content:"\f4df"}.fa-truck-pickup:before{content:"\f63c"}.fa-truck-loading:before,.fa-truck-ramp-box:before{content:"\f4de"}.fa-teletype:before,.fa-tty:before{content:"\f1e4"}.fa-try:before,.fa-turkish-lira-sign:before,.fa-turkish-lira:before{content:"\e2bb"}.fa-level-down-alt:before,.fa-turn-down:before{content:"\f3be"}.fa-level-up-alt:before,.fa-turn-up:before{content:"\f3bf"}.fa-television:before,.fa-tv-alt:before,.fa-tv:before{content:"\f26c"}.fa-u:before{content:"\55"}.fa-umbrella:before{content:"\f0e9"}.fa-umbrella-beach:before{content:"\f5ca"}.fa-underline:before{content:"\f0cd"}.fa-universal-access:before{content:"\f29a"}.fa-unlock:before{content:"\f09c"}.fa-unlock-alt:before,.fa-unlock-keyhole:before{content:"\f13e"}.fa-arrows-alt-v:before,.fa-up-down:before{content:"\f338"}.fa-arrows-alt:before,.fa-up-down-left-right:before{content:"\f0b2"}.fa-long-arrow-alt-up:before,.fa-up-long:before{content:"\f30c"}.fa-expand-alt:before,.fa-up-right-and-down-left-from-center:before{content:"\f424"}.fa-external-link-alt:before,.fa-up-right-from-square:before{content:"\f35d"}.fa-upload:before{content:"\f093"}.fa-user:before{content:"\f007"}.fa-user-astronaut:before{content:"\f4fb"}.fa-user-check:before{content:"\f4fc"}.fa-user-clock:before{content:"\f4fd"}.fa-user-doctor:before,.fa-user-md:before{content:"\f0f0"}.fa-user-cog:before,.fa-user-gear:before{content:"\f4fe"}.fa-user-graduate:before{content:"\f501"}.fa-user-friends:before,.fa-user-group:before{content:"\f500"}.fa-user-injured:before{content:"\f728"}.fa-user-alt:before,.fa-user-large:before{content:"\f406"}.fa-user-alt-slash:before,.fa-user-large-slash:before{content:"\f4fa"}.fa-user-lock:before{content:"\f502"}.fa-user-minus:before{content:"\f503"}.fa-user-ninja:before{content:"\f504"}.fa-user-nurse:before{content:"\f82f"}.fa-user-edit:before,.fa-user-pen:before{content:"\f4ff"}.fa-user-plus:before{content:"\f234"}.fa-user-secret:before{content:"\f21b"}.fa-user-shield:before{content:"\f505"}.fa-user-slash:before{content:"\f506"}.fa-user-tag:before{content:"\f507"}.fa-user-tie:before{content:"\f508"}.fa-user-times:before,.fa-user-xmark:before{content:"\f235"}.fa-users:before{content:"\f0c0"}.fa-users-cog:before,.fa-users-gear:before{content:"\f509"}.fa-users-slash:before{content:"\e073"}.fa-cutlery:before,.fa-utensils:before{content:"\f2e7"}.fa-v:before{content:"\56"}.fa-shuttle-van:before,.fa-van-shuttle:before{content:"\f5b6"}.fa-vault:before{content:"\e2c5"}.fa-vector-square:before{content:"\f5cb"}.fa-venus:before{content:"\f221"}.fa-venus-double:before{content:"\f226"}.fa-venus-mars:before{content:"\f228"}.fa-vest:before{content:"\e085"}.fa-vest-patches:before{content:"\e086"}.fa-vial:before{content:"\f492"}.fa-vials:before{content:"\f493"}.fa-video-camera:before,.fa-video:before{content:"\f03d"}.fa-video-slash:before{content:"\f4e2"}.fa-vihara:before{content:"\f6a7"}.fa-virus:before{content:"\e074"}.fa-virus-covid:before{content:"\e4a8"}.fa-virus-covid-slash:before{content:"\e4a9"}.fa-virus-slash:before{content:"\e075"}.fa-viruses:before{content:"\e076"}.fa-voicemail:before{content:"\f897"}.fa-volleyball-ball:before,.fa-volleyball:before{content:"\f45f"}.fa-volume-high:before,.fa-volume-up:before{content:"\f028"}.fa-volume-down:before,.fa-volume-low:before{content:"\f027"}.fa-volume-off:before{content:"\f026"}.fa-volume-mute:before,.fa-volume-times:before,.fa-volume-xmark:before{content:"\f6a9"}.fa-vr-cardboard:before{content:"\f729"}.fa-w:before{content:"\57"}.fa-wallet:before{content:"\f555"}.fa-magic:before,.fa-wand-magic:before{content:"\f0d0"}.fa-magic-wand-sparkles:before,.fa-wand-magic-sparkles:before{content:"\e2ca"}.fa-wand-sparkles:before{content:"\f72b"}.fa-warehouse:before{content:"\f494"}.fa-water:before{content:"\f773"}.fa-ladder-water:before,.fa-swimming-pool:before,.fa-water-ladder:before{content:"\f5c5"}.fa-wave-square:before{content:"\f83e"}.fa-weight-hanging:before{content:"\f5cd"}.fa-weight-scale:before,.fa-weight:before{content:"\f496"}.fa-wheelchair:before{content:"\f193"}.fa-glass-whiskey:before,.fa-whiskey-glass:before{content:"\f7a0"}.fa-wifi-3:before,.fa-wifi-strong:before,.fa-wifi:before{content:"\f1eb"}.fa-wind:before{content:"\f72e"}.fa-window-maximize:before{content:"\f2d0"}.fa-window-minimize:before{content:"\f2d1"}.fa-window-restore:before{content:"\f2d2"}.fa-wine-bottle:before{content:"\f72f"}.fa-wine-glass:before{content:"\f4e3"}.fa-wine-glass-alt:before,.fa-wine-glass-empty:before{content:"\f5ce"}.fa-krw:before,.fa-won-sign:before,.fa-won:before{content:"\f159"}.fa-wrench:before{content:"\f0ad"}.fa-x:before{content:"\58"}.fa-x-ray:before{content:"\f497"}.fa-close:before,.fa-multiply:before,.fa-remove:before,.fa-times:before,.fa-xmark:before{content:"\f00d"}.fa-y:before{content:"\59"}.fa-cny:before,.fa-jpy:before,.fa-rmb:before,.fa-yen-sign:before,.fa-yen:before{content:"\f157"}.fa-yin-yang:before{content:"\f6ad"}.fa-z:before{content:"\5a"}.fa-sr-only,.fa-sr-only-focusable:not(:focus),.sr-only,.sr-only-focusable:not(:focus){position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}:host,:root{--fa-font-brands:normal 400 1em/1 "Font Awesome 6 Brands"}@font-face{font-family:"Font Awesome 6 Brands";font-style:normal;font-weight:400;font-display:block;src:url(../webfonts/fa-brands-400.woff2) format("woff2"),url(../webfonts/fa-brands-400.ttf) format("truetype")}.fa-brands,.fab{font-family:"Font Awesome 6 Brands";font-weight:400}.fa-42-group:before,.fa-innosoft:before{content:"\e080"}.fa-500px:before{content:"\f26e"}.fa-accessible-icon:before{content:"\f368"}.fa-accusoft:before{content:"\f369"}.fa-adn:before{content:"\f170"}.fa-adversal:before{content:"\f36a"}.fa-affiliatetheme:before{content:"\f36b"}.fa-airbnb:before{content:"\f834"}.fa-algolia:before{content:"\f36c"}.fa-alipay:before{content:"\f642"}.fa-amazon:before{content:"\f270"}.fa-amazon-pay:before{content:"\f42c"}.fa-amilia:before{content:"\f36d"}.fa-android:before{content:"\f17b"}.fa-angellist:before{content:"\f209"}.fa-angrycreative:before{content:"\f36e"}.fa-angular:before{content:"\f420"}.fa-app-store:before{content:"\f36f"}.fa-app-store-ios:before{content:"\f370"}.fa-apper:before{content:"\f371"}.fa-apple:before{content:"\f179"}.fa-apple-pay:before{content:"\f415"}.fa-artstation:before{content:"\f77a"}.fa-asymmetrik:before{content:"\f372"}.fa-atlassian:before{content:"\f77b"}.fa-audible:before{content:"\f373"}.fa-autoprefixer:before{content:"\f41c"}.fa-avianex:before{content:"\f374"}.fa-aviato:before{content:"\f421"}.fa-aws:before{content:"\f375"}.fa-bandcamp:before{content:"\f2d5"}.fa-battle-net:before{content:"\f835"}.fa-behance:before{content:"\f1b4"}.fa-behance-square:before{content:"\f1b5"}.fa-bilibili:before{content:"\e3d9"}.fa-bimobject:before{content:"\f378"}.fa-bitbucket:before{content:"\f171"}.fa-bitcoin:before{content:"\f379"}.fa-bity:before{content:"\f37a"}.fa-black-tie:before{content:"\f27e"}.fa-blackberry:before{content:"\f37b"}.fa-blogger:before{content:"\f37c"}.fa-blogger-b:before{content:"\f37d"}.fa-bluetooth:before{content:"\f293"}.fa-bluetooth-b:before{content:"\f294"}.fa-bootstrap:before{content:"\f836"}.fa-bots:before{content:"\e340"}.fa-btc:before{content:"\f15a"}.fa-buffer:before{content:"\f837"}.fa-buromobelexperte:before{content:"\f37f"}.fa-buy-n-large:before{content:"\f8a6"}.fa-buysellads:before{content:"\f20d"}.fa-canadian-maple-leaf:before{content:"\f785"}.fa-cc-amazon-pay:before{content:"\f42d"}.fa-cc-amex:before{content:"\f1f3"}.fa-cc-apple-pay:before{content:"\f416"}.fa-cc-diners-club:before{content:"\f24c"}.fa-cc-discover:before{content:"\f1f2"}.fa-cc-jcb:before{content:"\f24b"}.fa-cc-mastercard:before{content:"\f1f1"}.fa-cc-paypal:before{content:"\f1f4"}.fa-cc-stripe:before{content:"\f1f5"}.fa-cc-visa:before{content:"\f1f0"}.fa-centercode:before{content:"\f380"}.fa-centos:before{content:"\f789"}.fa-chrome:before{content:"\f268"}.fa-chromecast:before{content:"\f838"}.fa-cloudflare:before{content:"\e07d"}.fa-cloudscale:before{content:"\f383"}.fa-cloudsmith:before{content:"\f384"}.fa-cloudversify:before{content:"\f385"}.fa-cmplid:before{content:"\e360"}.fa-codepen:before{content:"\f1cb"}.fa-codiepie:before{content:"\f284"}.fa-confluence:before{content:"\f78d"}.fa-connectdevelop:before{content:"\f20e"}.fa-contao:before{content:"\f26d"}.fa-cotton-bureau:before{content:"\f89e"}.fa-cpanel:before{content:"\f388"}.fa-creative-commons:before{content:"\f25e"}.fa-creative-commons-by:before{content:"\f4e7"}.fa-creative-commons-nc:before{content:"\f4e8"}.fa-creative-commons-nc-eu:before{content:"\f4e9"}.fa-creative-commons-nc-jp:before{content:"\f4ea"}.fa-creative-commons-nd:before{content:"\f4eb"}.fa-creative-commons-pd:before{content:"\f4ec"}.fa-creative-commons-pd-alt:before{content:"\f4ed"}.fa-creative-commons-remix:before{content:"\f4ee"}.fa-creative-commons-sa:before{content:"\f4ef"}.fa-creative-commons-sampling:before{content:"\f4f0"}.fa-creative-commons-sampling-plus:before{content:"\f4f1"}.fa-creative-commons-share:before{content:"\f4f2"}.fa-creative-commons-zero:before{content:"\f4f3"}.fa-critical-role:before{content:"\f6c9"}.fa-css3:before{content:"\f13c"}.fa-css3-alt:before{content:"\f38b"}.fa-cuttlefish:before{content:"\f38c"}.fa-d-and-d:before{content:"\f38d"}.fa-d-and-d-beyond:before{content:"\f6ca"}.fa-dailymotion:before{content:"\e052"}.fa-dashcube:before{content:"\f210"}.fa-deezer:before{content:"\e077"}.fa-delicious:before{content:"\f1a5"}.fa-deploydog:before{content:"\f38e"}.fa-deskpro:before{content:"\f38f"}.fa-dev:before{content:"\f6cc"}.fa-deviantart:before{content:"\f1bd"}.fa-dhl:before{content:"\f790"}.fa-diaspora:before{content:"\f791"}.fa-digg:before{content:"\f1a6"}.fa-digital-ocean:before{content:"\f391"}.fa-discord:before{content:"\f392"}.fa-discourse:before{content:"\f393"}.fa-dochub:before{content:"\f394"}.fa-docker:before{content:"\f395"}.fa-draft2digital:before{content:"\f396"}.fa-dribbble:before{content:"\f17d"}.fa-dribbble-square:before{content:"\f397"}.fa-dropbox:before{content:"\f16b"}.fa-drupal:before{content:"\f1a9"}.fa-dyalog:before{content:"\f399"}.fa-earlybirds:before{content:"\f39a"}.fa-ebay:before{content:"\f4f4"}.fa-edge:before{content:"\f282"}.fa-edge-legacy:before{content:"\e078"}.fa-elementor:before{content:"\f430"}.fa-ello:before{content:"\f5f1"}.fa-ember:before{content:"\f423"}.fa-empire:before{content:"\f1d1"}.fa-envira:before{content:"\f299"}.fa-erlang:before{content:"\f39d"}.fa-ethereum:before{content:"\f42e"}.fa-etsy:before{content:"\f2d7"}.fa-evernote:before{content:"\f839"}.fa-expeditedssl:before{content:"\f23e"}.fa-facebook:before{content:"\f09a"}.fa-facebook-f:before{content:"\f39e"}.fa-facebook-messenger:before{content:"\f39f"}.fa-facebook-square:before{content:"\f082"}.fa-fantasy-flight-games:before{content:"\f6dc"}.fa-fedex:before{content:"\f797"}.fa-fedora:before{content:"\f798"}.fa-figma:before{content:"\f799"}.fa-firefox:before{content:"\f269"}.fa-firefox-browser:before{content:"\e007"}.fa-first-order:before{content:"\f2b0"}.fa-first-order-alt:before{content:"\f50a"}.fa-firstdraft:before{content:"\f3a1"}.fa-flickr:before{content:"\f16e"}.fa-flipboard:before{content:"\f44d"}.fa-fly:before{content:"\f417"}.fa-font-awesome-flag:before,.fa-font-awesome-logo-full:before,.fa-font-awesome:before{content:"\f2b4"}.fa-fonticons:before{content:"\f280"}.fa-fonticons-fi:before{content:"\f3a2"}.fa-fort-awesome:before{content:"\f286"}.fa-fort-awesome-alt:before{content:"\f3a3"}.fa-forumbee:before{content:"\f211"}.fa-foursquare:before{content:"\f180"}.fa-free-code-camp:before{content:"\f2c5"}.fa-freebsd:before{content:"\f3a4"}.fa-fulcrum:before{content:"\f50b"}.fa-galactic-republic:before{content:"\f50c"}.fa-galactic-senate:before{content:"\f50d"}.fa-get-pocket:before{content:"\f265"}.fa-gg:before{content:"\f260"}.fa-gg-circle:before{content:"\f261"}.fa-git:before{content:"\f1d3"}.fa-git-alt:before{content:"\f841"}.fa-git-square:before{content:"\f1d2"}.fa-github:before{content:"\f09b"}.fa-github-alt:before{content:"\f113"}.fa-github-square:before{content:"\f092"}.fa-gitkraken:before{content:"\f3a6"}.fa-gitlab:before{content:"\f296"}.fa-gitter:before{content:"\f426"}.fa-glide:before{content:"\f2a5"}.fa-glide-g:before{content:"\f2a6"}.fa-gofore:before{content:"\f3a7"}.fa-golang:before{content:"\e40f"}.fa-goodreads:before{content:"\f3a8"}.fa-goodreads-g:before{content:"\f3a9"}.fa-google:before{content:"\f1a0"}.fa-google-drive:before{content:"\f3aa"}.fa-google-pay:before{content:"\e079"}.fa-google-play:before{content:"\f3ab"}.fa-google-plus:before{content:"\f2b3"}.fa-google-plus-g:before{content:"\f0d5"}.fa-google-plus-square:before{content:"\f0d4"}.fa-google-wallet:before{content:"\f1ee"}.fa-gratipay:before{content:"\f184"}.fa-grav:before{content:"\f2d6"}.fa-gripfire:before{content:"\f3ac"}.fa-grunt:before{content:"\f3ad"}.fa-guilded:before{content:"\e07e"}.fa-gulp:before{content:"\f3ae"}.fa-hacker-news:before{content:"\f1d4"}.fa-hacker-news-square:before{content:"\f3af"}.fa-hackerrank:before{content:"\f5f7"}.fa-hashnode:before{content:"\e499"}.fa-hips:before{content:"\f452"}.fa-hire-a-helper:before{content:"\f3b0"}.fa-hive:before{content:"\e07f"}.fa-hooli:before{content:"\f427"}.fa-hornbill:before{content:"\f592"}.fa-hotjar:before{content:"\f3b1"}.fa-houzz:before{content:"\f27c"}.fa-html5:before{content:"\f13b"}.fa-hubspot:before{content:"\f3b2"}.fa-ideal:before{content:"\e013"}.fa-imdb:before{content:"\f2d8"}.fa-instagram:before{content:"\f16d"}.fa-instagram-square:before{content:"\e055"}.fa-instalod:before{content:"\e081"}.fa-intercom:before{content:"\f7af"}.fa-internet-explorer:before{content:"\f26b"}.fa-invision:before{content:"\f7b0"}.fa-ioxhost:before{content:"\f208"}.fa-itch-io:before{content:"\f83a"}.fa-itunes:before{content:"\f3b4"}.fa-itunes-note:before{content:"\f3b5"}.fa-java:before{content:"\f4e4"}.fa-jedi-order:before{content:"\f50e"}.fa-jenkins:before{content:"\f3b6"}.fa-jira:before{content:"\f7b1"}.fa-joget:before{content:"\f3b7"}.fa-joomla:before{content:"\f1aa"}.fa-js:before{content:"\f3b8"}.fa-js-square:before{content:"\f3b9"}.fa-jsfiddle:before{content:"\f1cc"}.fa-kaggle:before{content:"\f5fa"}.fa-keybase:before{content:"\f4f5"}.fa-keycdn:before{content:"\f3ba"}.fa-kickstarter:before{content:"\f3bb"}.fa-kickstarter-k:before{content:"\f3bc"}.fa-korvue:before{content:"\f42f"}.fa-laravel:before{content:"\f3bd"}.fa-lastfm:before{content:"\f202"}.fa-lastfm-square:before{content:"\f203"}.fa-leanpub:before{content:"\f212"}.fa-less:before{content:"\f41d"}.fa-line:before{content:"\f3c0"}.fa-linkedin:before{content:"\f08c"}.fa-linkedin-in:before{content:"\f0e1"}.fa-linode:before{content:"\f2b8"}.fa-linux:before{content:"\f17c"}.fa-lyft:before{content:"\f3c3"}.fa-magento:before{content:"\f3c4"}.fa-mailchimp:before{content:"\f59e"}.fa-mandalorian:before{content:"\f50f"}.fa-markdown:before{content:"\f60f"}.fa-mastodon:before{content:"\f4f6"}.fa-maxcdn:before{content:"\f136"}.fa-mdb:before{content:"\f8ca"}.fa-medapps:before{content:"\f3c6"}.fa-medium-m:before,.fa-medium:before{content:"\f23a"}.fa-medrt:before{content:"\f3c8"}.fa-meetup:before{content:"\f2e0"}.fa-megaport:before{content:"\f5a3"}.fa-mendeley:before{content:"\f7b3"}.fa-microblog:before{content:"\e01a"}.fa-microsoft:before{content:"\f3ca"}.fa-mix:before{content:"\f3cb"}.fa-mixcloud:before{content:"\f289"}.fa-mixer:before{content:"\e056"}.fa-mizuni:before{content:"\f3cc"}.fa-modx:before{content:"\f285"}.fa-monero:before{content:"\f3d0"}.fa-napster:before{content:"\f3d2"}.fa-neos:before{content:"\f612"}.fa-nimblr:before{content:"\f5a8"}.fa-node:before{content:"\f419"}.fa-node-js:before{content:"\f3d3"}.fa-npm:before{content:"\f3d4"}.fa-ns8:before{content:"\f3d5"}.fa-nutritionix:before{content:"\f3d6"}.fa-octopus-deploy:before{content:"\e082"}.fa-odnoklassniki:before{content:"\f263"}.fa-odnoklassniki-square:before{content:"\f264"}.fa-old-republic:before{content:"\f510"}.fa-opencart:before{content:"\f23d"}.fa-openid:before{content:"\f19b"}.fa-opera:before{content:"\f26a"}.fa-optin-monster:before{content:"\f23c"}.fa-orcid:before{content:"\f8d2"}.fa-osi:before{content:"\f41a"}.fa-padlet:before{content:"\e4a0"}.fa-page4:before{content:"\f3d7"}.fa-pagelines:before{content:"\f18c"}.fa-palfed:before{content:"\f3d8"}.fa-patreon:before{content:"\f3d9"}.fa-paypal:before{content:"\f1ed"}.fa-perbyte:before{content:"\e083"}.fa-periscope:before{content:"\f3da"}.fa-phabricator:before{content:"\f3db"}.fa-phoenix-framework:before{content:"\f3dc"}.fa-phoenix-squadron:before{content:"\f511"}.fa-php:before{content:"\f457"}.fa-pied-piper:before{content:"\f2ae"}.fa-pied-piper-alt:before{content:"\f1a8"}.fa-pied-piper-hat:before{content:"\f4e5"}.fa-pied-piper-pp:before{content:"\f1a7"}.fa-pied-piper-square:before{content:"\e01e"}.fa-pinterest:before{content:"\f0d2"}.fa-pinterest-p:before{content:"\f231"}.fa-pinterest-square:before{content:"\f0d3"}.fa-pix:before{content:"\e43a"}.fa-playstation:before{content:"\f3df"}.fa-product-hunt:before{content:"\f288"}.fa-pushed:before{content:"\f3e1"}.fa-python:before{content:"\f3e2"}.fa-qq:before{content:"\f1d6"}.fa-quinscape:before{content:"\f459"}.fa-quora:before{content:"\f2c4"}.fa-r-project:before{content:"\f4f7"}.fa-raspberry-pi:before{content:"\f7bb"}.fa-ravelry:before{content:"\f2d9"}.fa-react:before{content:"\f41b"}.fa-reacteurope:before{content:"\f75d"}.fa-readme:before{content:"\f4d5"}.fa-rebel:before{content:"\f1d0"}.fa-red-river:before{content:"\f3e3"}.fa-reddit:before{content:"\f1a1"}.fa-reddit-alien:before{content:"\f281"}.fa-reddit-square:before{content:"\f1a2"}.fa-redhat:before{content:"\f7bc"}.fa-renren:before{content:"\f18b"}.fa-replyd:before{content:"\f3e6"}.fa-researchgate:before{content:"\f4f8"}.fa-resolving:before{content:"\f3e7"}.fa-rev:before{content:"\f5b2"}.fa-rocketchat:before{content:"\f3e8"}.fa-rockrms:before{content:"\f3e9"}.fa-rust:before{content:"\e07a"}.fa-safari:before{content:"\f267"}.fa-salesforce:before{content:"\f83b"}.fa-sass:before{content:"\f41e"}.fa-schlix:before{content:"\f3ea"}.fa-scribd:before{content:"\f28a"}.fa-searchengin:before{content:"\f3eb"}.fa-sellcast:before{content:"\f2da"}.fa-sellsy:before{content:"\f213"}.fa-servicestack:before{content:"\f3ec"}.fa-shirtsinbulk:before{content:"\f214"}.fa-shopify:before{content:"\e057"}.fa-shopware:before{content:"\f5b5"}.fa-simplybuilt:before{content:"\f215"}.fa-sistrix:before{content:"\f3ee"}.fa-sith:before{content:"\f512"}.fa-sitrox:before{content:"\e44a"}.fa-sketch:before{content:"\f7c6"}.fa-skyatlas:before{content:"\f216"}.fa-skype:before{content:"\f17e"}.fa-slack-hash:before,.fa-slack:before{content:"\f198"}.fa-slideshare:before{content:"\f1e7"}.fa-snapchat-ghost:before,.fa-snapchat:before{content:"\f2ab"}.fa-snapchat-square:before{content:"\f2ad"}.fa-soundcloud:before{content:"\f1be"}.fa-sourcetree:before{content:"\f7d3"}.fa-speakap:before{content:"\f3f3"}.fa-speaker-deck:before{content:"\f83c"}.fa-spotify:before{content:"\f1bc"}.fa-square-font-awesome:before{content:"\f425"}.fa-font-awesome-alt:before,.fa-square-font-awesome-stroke:before{content:"\f35c"}.fa-squarespace:before{content:"\f5be"}.fa-stack-exchange:before{content:"\f18d"}.fa-stack-overflow:before{content:"\f16c"}.fa-stackpath:before{content:"\f842"}.fa-staylinked:before{content:"\f3f5"}.fa-steam:before{content:"\f1b6"}.fa-steam-square:before{content:"\f1b7"}.fa-steam-symbol:before{content:"\f3f6"}.fa-sticker-mule:before{content:"\f3f7"}.fa-strava:before{content:"\f428"}.fa-stripe:before{content:"\f429"}.fa-stripe-s:before{content:"\f42a"}.fa-studiovinari:before{content:"\f3f8"}.fa-stumbleupon:before{content:"\f1a4"}.fa-stumbleupon-circle:before{content:"\f1a3"}.fa-superpowers:before{content:"\f2dd"}.fa-supple:before{content:"\f3f9"}.fa-suse:before{content:"\f7d6"}.fa-swift:before{content:"\f8e1"}.fa-symfony:before{content:"\f83d"}.fa-teamspeak:before{content:"\f4f9"}.fa-telegram-plane:before,.fa-telegram:before{content:"\f2c6"}.fa-tencent-weibo:before{content:"\f1d5"}.fa-the-red-yeti:before{content:"\f69d"}.fa-themeco:before{content:"\f5c6"}.fa-themeisle:before{content:"\f2b2"}.fa-think-peaks:before{content:"\f731"}.fa-tiktok:before{content:"\e07b"}.fa-trade-federation:before{content:"\f513"}.fa-trello:before{content:"\f181"}.fa-tumblr:before{content:"\f173"}.fa-tumblr-square:before{content:"\f174"}.fa-twitch:before{content:"\f1e8"}.fa-twitter:before{content:"\f099"}.fa-twitter-square:before{content:"\f081"}.fa-typo3:before{content:"\f42b"}.fa-uber:before{content:"\f402"}.fa-ubuntu:before{content:"\f7df"}.fa-uikit:before{content:"\f403"}.fa-umbraco:before{content:"\f8e8"}.fa-uncharted:before{content:"\e084"}.fa-uniregistry:before{content:"\f404"}.fa-unity:before{content:"\e049"}.fa-unsplash:before{content:"\e07c"}.fa-untappd:before{content:"\f405"}.fa-ups:before{content:"\f7e0"}.fa-usb:before{content:"\f287"}.fa-usps:before{content:"\f7e1"}.fa-ussunnah:before{content:"\f407"}.fa-vaadin:before{content:"\f408"}.fa-viacoin:before{content:"\f237"}.fa-viadeo:before{content:"\f2a9"}.fa-viadeo-square:before{content:"\f2aa"}.fa-viber:before{content:"\f409"}.fa-vimeo:before{content:"\f40a"}.fa-vimeo-square:before{content:"\f194"}.fa-vimeo-v:before{content:"\f27d"}.fa-vine:before{content:"\f1ca"}.fa-vk:before{content:"\f189"}.fa-vnv:before{content:"\f40b"}.fa-vuejs:before{content:"\f41f"}.fa-watchman-monitoring:before{content:"\e087"}.fa-waze:before{content:"\f83f"}.fa-weebly:before{content:"\f5cc"}.fa-weibo:before{content:"\f18a"}.fa-weixin:before{content:"\f1d7"}.fa-whatsapp:before{content:"\f232"}.fa-whatsapp-square:before{content:"\f40c"}.fa-whmcs:before{content:"\f40d"}.fa-wikipedia-w:before{content:"\f266"}.fa-windows:before{content:"\f17a"}.fa-wirsindhandwerk:before,.fa-wsh:before{content:"\e2d0"}.fa-wix:before{content:"\f5cf"}.fa-wizards-of-the-coast:before{content:"\f730"}.fa-wodu:before{content:"\e088"}.fa-wolf-pack-battalion:before{content:"\f514"}.fa-wordpress:before{content:"\f19a"}.fa-wordpress-simple:before{content:"\f411"}.fa-wpbeginner:before{content:"\f297"}.fa-wpexplorer:before{content:"\f2de"}.fa-wpforms:before{content:"\f298"}.fa-wpressr:before{content:"\f3e4"}.fa-xbox:before{content:"\f412"}.fa-xing:before{content:"\f168"}.fa-xing-square:before{content:"\f169"}.fa-y-combinator:before{content:"\f23b"}.fa-yahoo:before{content:"\f19e"}.fa-yammer:before{content:"\f840"}.fa-yandex:before{content:"\f413"}.fa-yandex-international:before{content:"\f414"}.fa-yarn:before{content:"\f7e3"}.fa-yelp:before{content:"\f1e9"}.fa-yoast:before{content:"\f2b1"}.fa-youtube:before{content:"\f167"}.fa-youtube-square:before{content:"\f431"}.fa-zhihu:before{content:"\f63f"}:host,:root{--fa-font-regular:normal 400 1em/1 "Font Awesome 6 Free"}@font-face{font-family:"Font Awesome 6 Free";font-style:normal;font-weight:400;font-display:block;src:url(../webfonts/fa-regular-400.woff2) format("woff2"),url(../webfonts/fa-regular-400.ttf) format("truetype")}.fa-regular,.far{font-family:"Font Awesome 6 Free";font-weight:400}:host,:root{--fa-font-solid:normal 900 1em/1 "Font Awesome 6 Free"}@font-face{font-family:"Font Awesome 6 Free";font-style:normal;font-weight:900;font-display:block;src:url(../webfonts/fa-solid-900.woff2) format("woff2"),url(../webfonts/fa-solid-900.ttf) format("truetype")}.fa-solid,.fas{font-family:"Font Awesome 6 Free";font-weight:900}@font-face{font-family:"Font Awesome 5 Brands";font-display:block;font-weight:400;src:url(../webfonts/fa-brands-400.woff2) format("woff2"),url(../webfonts/fa-brands-400.ttf) format("truetype")}@font-face{font-family:"Font Awesome 5 Free";font-display:block;font-weight:900;src:url(../webfonts/fa-solid-900.woff2) format("woff2"),url(../webfonts/fa-solid-900.ttf) format("truetype")}@font-face{font-family:"Font Awesome 5 Free";font-display:block;font-weight:400;src:url(../webfonts/fa-regular-400.woff2) format("woff2"),url(../webfonts/fa-regular-400.ttf) format("truetype")}@font-face{font-family:"FontAwesome";font-display:block;src:url(../webfonts/fa-solid-900.woff2) format("woff2"),url(../webfonts/fa-solid-900.ttf) format("truetype")}@font-face{font-family:"FontAwesome";font-display:block;src:url(../webfonts/fa-brands-400.woff2) format("woff2"),url(../webfonts/fa-brands-400.ttf) format("truetype")}@font-face{font-family:"FontAwesome";font-display:block;src:url(../webfonts/fa-regular-400.woff2) format("woff2"),url(../webfonts/fa-regular-400.ttf) format("truetype");unicode-range:u+f003,u+f006,u+f014,u+f016-f017,u+f01a-f01b,u+f01d,u+f022,u+f03e,u+f044,u+f046,u+f05c-f05d,u+f06e,u+f070,u+f087-f088,u+f08a,u+f094,u+f096-f097,u+f09d,u+f0a0,u+f0a2,u+f0a4-f0a7,u+f0c5,u+f0c7,u+f0e5-f0e6,u+f0eb,u+f0f6-f0f8,u+f10c,u+f114-f115,u+f118-f11a,u+f11c-f11d,u+f133,u+f147,u+f14e,u+f150-f152,u+f185-f186,u+f18e,u+f190-f192,u+f196,u+f1c1-f1c9,u+f1d9,u+f1db,u+f1e3,u+f1ea,u+f1f7,u+f1f9,u+f20a,u+f247-f248,u+f24a,u+f24d,u+f255-f25b,u+f25d,u+f271-f274,u+f278,u+f27b,u+f28c,u+f28e,u+f29c,u+f2b5,u+f2b7,u+f2ba,u+f2bc,u+f2be,u+f2c0-f2c1,u+f2c3,u+f2d0,u+f2d2,u+f2d4,u+f2dc}@font-face{font-family:"FontAwesome";font-display:block;src:url(../webfonts/fa-v4compatibility.woff2) format("woff2"),url(../webfonts/fa-v4compatibility.ttf) format("truetype");unicode-range:u+f041,u+f047,u+f065-f066,u+f07d-f07e,u+f080,u+f08b,u+f08e,u+f090,u+f09a,u+f0ac,u+f0ae,u+f0b2,u+f0d0,u+f0d6,u+f0e4,u+f0ec,u+f10a-f10b,u+f123,u+f13e,u+f148-f149,u+f14c,u+f156,u+f15e,u+f160-f161,u+f163,u+f175-f178,u+f195,u+f1f8,u+f219,u+f250,u+f252,u+f27a}
\ No newline at end of file
diff --git a/web_interface/static/v3/vendor/fontawesome/webfonts/fa-brands-400.ttf b/web_interface/static/v3/vendor/fontawesome/webfonts/fa-brands-400.ttf
new file mode 100644
index 00000000..227f022d
Binary files /dev/null and b/web_interface/static/v3/vendor/fontawesome/webfonts/fa-brands-400.ttf differ
diff --git a/web_interface/static/v3/vendor/fontawesome/webfonts/fa-brands-400.woff2 b/web_interface/static/v3/vendor/fontawesome/webfonts/fa-brands-400.woff2
new file mode 100644
index 00000000..73c5c129
Binary files /dev/null and b/web_interface/static/v3/vendor/fontawesome/webfonts/fa-brands-400.woff2 differ
diff --git a/web_interface/static/v3/vendor/fontawesome/webfonts/fa-regular-400.ttf b/web_interface/static/v3/vendor/fontawesome/webfonts/fa-regular-400.ttf
new file mode 100644
index 00000000..c8ed46d4
Binary files /dev/null and b/web_interface/static/v3/vendor/fontawesome/webfonts/fa-regular-400.ttf differ
diff --git a/web_interface/static/v3/vendor/fontawesome/webfonts/fa-regular-400.woff2 b/web_interface/static/v3/vendor/fontawesome/webfonts/fa-regular-400.woff2
new file mode 100644
index 00000000..c9291c7b
Binary files /dev/null and b/web_interface/static/v3/vendor/fontawesome/webfonts/fa-regular-400.woff2 differ
diff --git a/web_interface/static/v3/vendor/fontawesome/webfonts/fa-solid-900.ttf b/web_interface/static/v3/vendor/fontawesome/webfonts/fa-solid-900.ttf
new file mode 100644
index 00000000..99b35ad5
Binary files /dev/null and b/web_interface/static/v3/vendor/fontawesome/webfonts/fa-solid-900.ttf differ
diff --git a/web_interface/static/v3/vendor/fontawesome/webfonts/fa-solid-900.woff2 b/web_interface/static/v3/vendor/fontawesome/webfonts/fa-solid-900.woff2
new file mode 100644
index 00000000..c7bd59c2
Binary files /dev/null and b/web_interface/static/v3/vendor/fontawesome/webfonts/fa-solid-900.woff2 differ
diff --git a/web_interface/static/v3/vendor/fontawesome/webfonts/fa-v4compatibility.ttf b/web_interface/static/v3/vendor/fontawesome/webfonts/fa-v4compatibility.ttf
new file mode 100644
index 00000000..be0afc27
Binary files /dev/null and b/web_interface/static/v3/vendor/fontawesome/webfonts/fa-v4compatibility.ttf differ
diff --git a/web_interface/static/v3/vendor/fontawesome/webfonts/fa-v4compatibility.woff2 b/web_interface/static/v3/vendor/fontawesome/webfonts/fa-v4compatibility.woff2
new file mode 100644
index 00000000..37a9b8c7
Binary files /dev/null and b/web_interface/static/v3/vendor/fontawesome/webfonts/fa-v4compatibility.woff2 differ
diff --git a/web_interface/templates/v3/base.html b/web_interface/templates/v3/base.html
index 8ec96d18..2223106c 100644
--- a/web_interface/templates/v3/base.html
+++ b/web_interface/templates/v3/base.html
@@ -3,7 +3,25 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>LED Matrix Control Panel - v3</title>
+    <title>LED Matrix Control Panel</title>
+
+    <!-- Installable web app (Add to Home Screen) -->
+    <link rel="manifest" href="{{ url_for('static', filename='v3/manifest.json') }}">
+    <meta name="theme-color" content="#111827">
+    <link rel="apple-touch-icon" href="{{ url_for('static', filename='v3/icons/apple-touch-icon.png') }}">
+    <link rel="icon" type="image/png" sizes="192x192" href="{{ url_for('static', filename='v3/icons/icon-192.png') }}">
+
+    <!-- Debug logging gate: verbose console output is suppressed unless
+         localStorage.pluginDebug === 'true' (the same switch the plugin
+         scripts already use). console.error/warn are never gated. -->
+    <script>
+    window.LEDMATRIX_DEBUG = (function() {
+        try { return localStorage.getItem('pluginDebug') === 'true'; } catch (e) { return false; }
+    })();
+    window.debugLog = function() {
+        if (window.LEDMATRIX_DEBUG) console.log.apply(console, arguments);
+    };
+    </script>
 
     <!-- Theme initialization (must run before CSS to prevent flash) -->
     <script>
@@ -85,26 +103,20 @@
     })();
     </script>
 
-    <!-- Resource hints for CDN resources -->
-    <link rel="preconnect" href="https://unpkg.com" crossorigin>
-    <link rel="preconnect" href="https://cdnjs.cloudflare.com" crossorigin>
-    <link rel="dns-prefetch" href="https://unpkg.com">
-    <link rel="dns-prefetch" href="https://cdnjs.cloudflare.com">
-
-    <!-- HTMX for dynamic content loading -->
-    <!-- Use local files when in AP mode (192.168.4.x) to avoid CDN dependency -->
+    <!-- HTMX for dynamic content loading.
+         Local (vendored) files are the primary source for every network —
+         LAN-speed loads, fully offline-capable; the pinned CDN copies remain
+         only as a last-ditch rescue if a local file somehow fails. -->
     <script>
         (function() {
-            // Detect AP mode by IP address
-            const isAPMode = window.location.hostname === '192.168.4.1' || 
-                           window.location.hostname.startsWith('192.168.4.');
-            
-            // In AP mode, use local files; otherwise use CDN
-            const htmxSrc = isAPMode ? '/static/v3/js/htmx.min.js' : 'https://unpkg.com/htmx.org@1.9.10';
-            const sseSrc = isAPMode ? '/static/v3/js/htmx-sse.js' : 'https://unpkg.com/htmx.org/dist/ext/sse.js';
-            const jsonEncSrc = isAPMode ? '/static/v3/js/htmx-json-enc.js' : 'https://unpkg.com/htmx.org/dist/ext/json-enc.js';
-            
-            // Load HTMX with fallback
+            const htmxSrc = '/static/v3/js/htmx.min.js';
+            const sseSrc = '/static/v3/js/htmx-sse.js';
+            const jsonEncSrc = '/static/v3/js/htmx-json-enc.js';
+            const htmxCdn = 'https://unpkg.com/htmx.org@1.9.10';
+            const sseCdn = 'https://unpkg.com/htmx.org@1.9.10/dist/ext/sse.js';
+            const jsonEncCdn = 'https://unpkg.com/htmx.org@1.9.10/dist/ext/json-enc.js';
+
+            // Load a script with an optional one-shot fallback source
             function loadScript(src, fallback, onLoad) {
                 const script = document.createElement('script');
                 script.src = src;
@@ -122,292 +134,42 @@
                 };
                 document.head.appendChild(script);
             }
-            
-            // Load HTMX core
-            loadScript(htmxSrc, isAPMode ? 'https://unpkg.com/htmx.org@1.9.10' : '/static/v3/js/htmx.min.js', function() {
+
+            function htmxReady() {
+                debugLog('HTMX loaded successfully');
+                window.dispatchEvent(new Event('htmx:ready'));
+                // Load extensions after core loads
+                loadScript(sseSrc, sseCdn);
+                loadScript(jsonEncSrc, jsonEncCdn);
+            }
+
+            // Load HTMX core (local first, CDN rescue), then the extensions
+            loadScript(htmxSrc, htmxCdn, function() {
                 // Wait a moment for HTMX to initialize, then verify
                 setTimeout(function() {
-                    // Verify HTMX loaded
-                    if (typeof htmx === 'undefined') {
-                        console.error('HTMX failed to load, trying fallback...');
-                        const fallbackSrc = isAPMode ? 'https://unpkg.com/htmx.org@1.9.10' : '/static/v3/js/htmx.min.js';
-                        if (fallbackSrc !== htmxSrc) {
-                            loadScript(fallbackSrc, null, function() {
-                                setTimeout(function() {
-                                    if (typeof htmx !== 'undefined') {
-                                        console.log('HTMX loaded from fallback');
-                                        window.dispatchEvent(new Event('htmx:ready'));
-                                        // Load extensions after core loads
-                                        loadScript(sseSrc, isAPMode ? 'https://unpkg.com/htmx.org/dist/ext/sse.js' : '/static/v3/js/htmx-sse.js');
-                                        loadScript(jsonEncSrc, isAPMode ? 'https://unpkg.com/htmx.org/dist/ext/json-enc.js' : '/static/v3/js/htmx-json-enc.js');
-                                    } else {
-                                        console.error('HTMX failed to load from both primary and fallback sources');
-                                        // Trigger fallback content loading
-                                        window.dispatchEvent(new Event('htmx-load-failed'));
-                                    }
-                                }, 100);
-                            });
-                        } else {
-                            console.error('HTMX failed to load and no fallback available');
-                            window.dispatchEvent(new Event('htmx-load-failed'));
-                        }
-                    } else {
-                        console.log('HTMX loaded successfully');
-                        window.dispatchEvent(new Event('htmx:ready'));
-                        // Load extensions after core loads
-                        loadScript(sseSrc, isAPMode ? 'https://unpkg.com/htmx.org/dist/ext/sse.js' : '/static/v3/js/htmx-sse.js');
-                        loadScript(jsonEncSrc, isAPMode ? 'https://unpkg.com/htmx.org/dist/ext/json-enc.js' : '/static/v3/js/htmx-json-enc.js');
+                    if (typeof htmx !== 'undefined') {
+                        htmxReady();
+                        return;
                     }
+                    // Loaded but not initialized (e.g. corrupt cached copy):
+                    // one CDN rescue attempt, mirroring the Alpine fallback.
+                    console.error('HTMX not initialized after load, trying CDN rescue...');
+                    loadScript(htmxCdn, null, function() {
+                        setTimeout(function() {
+                            if (typeof htmx !== 'undefined') {
+                                htmxReady();
+                            } else {
+                                console.error('HTMX failed to load from both local and CDN sources');
+                                // Trigger fallback content loading
+                                window.dispatchEvent(new Event('htmx-load-failed'));
+                            }
+                        }, 100);
+                    });
                 }, 100);
             });
         })();
     </script>
-    <script>
-        // Configure HTMX to evaluate scripts in swapped content and fix insertBefore errors
-        (function() {
-            function setupScriptExecution() {
-                if (document.body) {
-                    // Fix HTMX insertBefore errors by validating targets before swap
-                    document.body.addEventListener('htmx:beforeSwap', function(event) {
-                        try {
-                            const target = event.detail.target;
-                            if (!target) {
-                                console.warn('[HTMX] Target is null, skipping swap');
-                                event.detail.shouldSwap = false;
-                                return false;
-                            }
-                            
-                            // Check if target is a valid DOM element
-                            if (!(target instanceof Element)) {
-                                console.warn('[HTMX] Target is not a valid Element, skipping swap');
-                                event.detail.shouldSwap = false;
-                                return false;
-                            }
-                            
-                            // Check if target has a parent node (required for insertBefore)
-                            if (!target.parentNode) {
-                                console.warn('[HTMX] Target has no parent node, skipping swap');
-                                event.detail.shouldSwap = false;
-                                return false;
-                            }
-                            
-                            // Ensure target is in the DOM
-                            if (!document.body.contains(target) && !document.head.contains(target)) {
-                                console.warn('[HTMX] Target is not in DOM, skipping swap');
-                                event.detail.shouldSwap = false;
-                                return false;
-                            }
-                            
-                            // Additional check: ensure parent is also in DOM
-                            if (target.parentNode && !document.body.contains(target.parentNode) && !document.head.contains(target.parentNode)) {
-                                console.warn('[HTMX] Target parent is not in DOM, skipping swap');
-                                event.detail.shouldSwap = false;
-                                return false;
-                            }
-                            
-                            // All checks passed, allow swap
-                            return true;
-                        } catch (e) {
-                            // If validation fails, cancel swap
-                            console.warn('[HTMX] Error validating target:', e);
-                            event.detail.shouldSwap = false;
-                            return false;
-                        }
-                    });
-                    
-                    // Suppress HTMX insertBefore errors and other noisy errors - they're harmless but noisy
-                    const originalError = console.error;
-                    const originalWarn = console.warn;
-                    
-                    console.error = function(...args) {
-                        const errorStr = args.join(' ');
-                        const errorStack = args.find(arg => arg && typeof arg === 'string' && arg.includes('htmx')) || '';
-                        
-                        // Suppress HTMX insertBefore errors (comprehensive check)
-                        // These occur when HTMX tries to swap content but the target element is null
-                        // Usually happens due to timing/race conditions and is harmless
-                        if (errorStr.includes("insertBefore") || 
-                            errorStr.includes("Cannot read properties of null") ||
-                            errorStr.includes("reading 'insertBefore'")) {
-                            // Check if it's from HTMX by looking at stack trace or error string
-                            // Also check the call stack if available
-                            const isHtmxError = errorStr.includes('htmx.org') || 
-                                               errorStr.includes('htmx') || 
-                                               errorStack.includes('htmx') ||
-                                               args.some(arg => {
-                                                   if (typeof arg === 'string') {
-                                                       return arg.includes('htmx.org') || arg.includes('htmx');
-                                                   }
-                                                   // Check error objects for stack traces
-                                                   if (arg && typeof arg === 'object' && arg.stack) {
-                                                       return arg.stack.includes('htmx');
-                                                   }
-                                                   return false;
-                                               });
-                            
-                            if (isHtmxError) {
-                                return; // Suppress - this is a harmless HTMX timing/race condition issue
-                            }
-                        }
-                        
-                        // Suppress script execution errors from malformed HTML
-                        if (errorStr.includes("Failed to execute 'appendChild' on 'Node'") ||
-                            errorStr.includes("Failed to execute 'insertBefore' on 'Node'")) {
-                            if (errorStr.includes('Unexpected token')) {
-                                return; // Suppress malformed HTML errors
-                            }
-                        }
-                        originalError.apply(console, args);
-                    };
-                    
-                    console.warn = function(...args) {
-                        const warnStr = args.join(' ');
-                        // Suppress Permissions-Policy warnings (harmless browser warnings)
-                        if (warnStr.includes('Permissions-Policy header') ||
-                            warnStr.includes('Unrecognized feature') ||
-                            warnStr.includes('Origin trial controlled feature') ||
-                            warnStr.includes('browsing-topics') ||
-                            warnStr.includes('run-ad-auction') ||
-                            warnStr.includes('join-ad-interest-group') ||
-                            warnStr.includes('private-state-token') ||
-                            warnStr.includes('private-aggregation') ||
-                            warnStr.includes('attribution-reporting')) {
-                            return; // Suppress - these are harmless browser feature warnings
-                        }
-                        originalWarn.apply(console, args);
-                    };
-                    
-                    // Handle HTMX errors gracefully with detailed logging
-                    document.body.addEventListener('htmx:responseError', function(event) {
-                        const detail = event.detail;
-                        const xhr = detail.xhr;
-                        const target = detail.target;
-                        
-                        // Enhanced error logging
-                        console.error('HTMX response error:', {
-                            status: xhr?.status,
-                            statusText: xhr?.statusText,
-                            url: xhr?.responseURL,
-                            target: target?.id || target?.tagName,
-                            responseText: xhr?.responseText
-                        });
-                        
-                        // For form submissions, log the form data
-                        if (target && target.tagName === 'FORM') {
-                            const formData = new FormData(target);
-                            const formPayload = {};
-                            for (const [key, value] of formData.entries()) {
-                                formPayload[key] = value;
-                            }
-                            console.error('Form payload:', formPayload);
-                            
-                            // Try to parse error response for validation details
-                            if (xhr?.responseText) {
-                                try {
-                                    const errorData = JSON.parse(xhr.responseText);
-                                    console.error('Error details:', {
-                                        message: errorData.message,
-                                        details: errorData.details,
-                                        validation_errors: errorData.validation_errors,
-                                        context: errorData.context
-                                    });
-                                } catch (e) {
-                                    console.error('Error response (non-JSON):', xhr.responseText.substring(0, 500));
-                                }
-                            }
-                        }
-                    });
-                    
-                    document.body.addEventListener('htmx:swapError', function(event) {
-                        // Log but don't break the app
-                        console.warn('HTMX swap error:', event.detail);
-                    });
-                    
-                    document.body.addEventListener('htmx:afterSwap', function(event) {
-                        if (event.detail && event.detail.target) {
-                            try {
-                                const scripts = event.detail.target.querySelectorAll('script');
-                                scripts.forEach(function(oldScript) {
-                                    try {
-                                        if (oldScript.innerHTML.trim() || oldScript.src) {
-                                            const newScript = document.createElement('script');
-                                            if (oldScript.src) newScript.src = oldScript.src;
-                                            if (oldScript.type) newScript.type = oldScript.type;
-                                            if (oldScript.innerHTML) newScript.textContent = oldScript.innerHTML;
-                                            if (oldScript.parentNode) {
-                                                oldScript.parentNode.insertBefore(newScript, oldScript);
-                                                oldScript.parentNode.removeChild(oldScript);
-                                            } else {
-                                                // If no parent, append to head or body
-                                                (document.head || document.body).appendChild(newScript);
-                                            }
-                                        }
-                                    } catch (e) {
-                                        // Silently ignore script execution errors
-                                    }
-                                });
-                            } catch (e) {
-                                // Silently ignore errors in script processing
-                            }
-                        }
-                    });
-
-                    // Mark tab containers as loaded once their content settles, so switching
-                    // away and back doesn't re-fetch. Scoped to the "loadtab" trigger (tab
-                    // containers only) so modals and plugin config panels can still reload.
-                    document.body.addEventListener('htmx:afterSettle', function(event) {
-                        if (event.detail && event.detail.target) {
-                            var target = event.detail.target;
-                            var trigger = target.getAttribute('hx-trigger') || '';
-                            if (trigger.includes('loadtab')) {
-                                target.setAttribute('data-loaded', 'true');
-                            }
-                        }
-                    });
-                } else {
-                    if (document.readyState === 'loading') {
-                        document.addEventListener('DOMContentLoaded', setupScriptExecution);
-                    } else {
-                        setTimeout(setupScriptExecution, 100);
-                    }
-                }
-            }
-            setupScriptExecution();
-            
-            // Section toggle function - define early so it's available for HTMX-loaded content
-            window.toggleSection = function(sectionId) {
-                const section = document.getElementById(sectionId);
-                const icon = document.getElementById(sectionId + '-icon');
-                if (!section) {
-                    console.warn('toggleSection: Could not find section for', sectionId);
-                    return;
-                }
-                if (!icon) {
-                    console.warn('toggleSection: Could not find icon for', sectionId);
-                    return;
-                }
-                
-                // Check if currently hidden by checking both class and computed display
-                const hasHiddenClass = section.classList.contains('hidden');
-                const computedDisplay = window.getComputedStyle(section).display;
-                const isHidden = hasHiddenClass || computedDisplay === 'none';
-                
-                if (isHidden) {
-                    // Show the section - remove hidden class and explicitly set display to block
-                    section.classList.remove('hidden');
-                    section.style.display = 'block';
-                    icon.classList.remove('fa-chevron-right');
-                    icon.classList.add('fa-chevron-down');
-                } else {
-                    // Hide the section - add hidden class and set display to none
-                    section.classList.add('hidden');
-                    section.style.display = 'none';
-                    icon.classList.remove('fa-chevron-down');
-                    icon.classList.add('fa-chevron-right');
-                }
-            };
-        })();
-    </script>
+    <script src="{{ url_for('static', filename='v3/js/htmx-config.js') }}"></script>
 
     <!-- Fallback for loading plugins if HTMX fails -->
     <script>
@@ -415,7 +177,7 @@
             const content = document.getElementById('plugins-content');
             if (content && !content.hasAttribute('data-loaded')) {
                 content.setAttribute('data-loaded', 'true');
-                console.log('Loading plugins directly via fetch (HTMX fallback)...');
+                debugLog('Loading plugins directly via fetch (HTMX fallback)...');
                 const controller = new AbortController();
                 const timeout = setTimeout(() => controller.abort(), 10000);
                 fetch('/v3/partials/plugins', { signal: controller.signal })
@@ -459,351 +221,7 @@
         window.addEventListener('htmx:ready', function() { clearTimeout(_pluginsFallbackTimer); }, { once: true });
     </script>
     <!-- Alpine.js app function - defined early so it's available when Alpine initializes -->
-    <script>
-        // Helper function to get installed plugins with fallback
-        // Must be defined before app() function that uses it
-        async function getInstalledPluginsSafe() {
-            if (window.PluginAPI && window.PluginAPI.getInstalledPlugins) {
-                try {
-                    const plugins = await window.PluginAPI.getInstalledPlugins();
-                    // Ensure plugins is always an array
-                    const pluginsArray = Array.isArray(plugins) ? plugins : [];
-                    return { status: 'success', data: { plugins: pluginsArray } };
-                } catch (error) {
-                    console.error('Error using PluginAPI.getInstalledPlugins, falling back to direct fetch:', error);
-                    // Fall through to direct fetch
-                }
-            }
-            // Fallback to direct fetch if PluginAPI not loaded
-            const response = await fetch('/api/v3/plugins/installed');
-            return await response.json();
-        }
-
-        // Global event listener for pluginsUpdated - works even if Alpine isn't ready yet
-        // This ensures tabs update when plugins_manager.js loads plugins
-        document.addEventListener('pluginsUpdated', function(event) {
-            console.log('[GLOBAL] Received pluginsUpdated event:', event.detail?.plugins?.length || 0, 'plugins');
-            const plugins = event.detail?.plugins || [];
-            
-            // Update window.installedPlugins
-            window.installedPlugins = plugins;
-            
-            // Try to update Alpine component if it exists (only if using full implementation)
-            if (window.Alpine) {
-                const appElement = document.querySelector('[x-data="app()"]');
-                if (appElement && appElement._x_dataStack && appElement._x_dataStack[0]) {
-                    const appComponent = appElement._x_dataStack[0];
-                    appComponent.installedPlugins = plugins;
-                    // Only call updatePluginTabs if it's the full implementation (has _doUpdatePluginTabs)
-                    if (typeof appComponent.updatePluginTabs === 'function' && 
-                        appComponent.updatePluginTabs.toString().includes('_doUpdatePluginTabs')) {
-                        console.log('[GLOBAL] Updating plugin tabs via Alpine component (full implementation)');
-                        appComponent.updatePluginTabs();
-                        return; // Full implementation handles it, don't do direct update
-                    }
-                }
-            }
-            
-            // Only do direct DOM update if full implementation isn't available yet
-            const pluginTabsRow = document.getElementById('plugin-tabs-row');
-            const pluginTabsNav = pluginTabsRow?.querySelector('nav');
-            if (pluginTabsRow && pluginTabsNav && plugins.length > 0) {
-                // Clear existing plugin tabs (except Plugin Manager)
-                const existingTabs = pluginTabsNav.querySelectorAll('.plugin-tab');
-                existingTabs.forEach(tab => tab.remove());
-                
-                // Add tabs for each installed plugin
-                plugins.forEach(plugin => {
-                    const tabButton = document.createElement('button');
-                    tabButton.type = 'button';
-                    tabButton.setAttribute('data-plugin-id', plugin.id);
-                    tabButton.className = `plugin-tab nav-tab`;
-                    tabButton.onclick = function() {
-                        // Try to set activeTab via Alpine if available
-                        if (window.Alpine) {
-                            const appElement = document.querySelector('[x-data="app()"]');
-                            if (appElement && appElement._x_dataStack && appElement._x_dataStack[0]) {
-                                appElement._x_dataStack[0].activeTab = plugin.id;
-                                // Only call updatePluginTabStates if it exists
-                                if (typeof appElement._x_dataStack[0].updatePluginTabStates === 'function') {
-                                    appElement._x_dataStack[0].updatePluginTabStates();
-                                }
-                            }
-                        }
-                    };
-                    const iconClass = (plugin.icon || 'fas fa-puzzle-piece').replace(/"/g, '&quot;');
-                    tabButton.innerHTML = `<i class="${iconClass}"></i>${(plugin.name || plugin.id).replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;')}`;
-                    pluginTabsNav.appendChild(tabButton);
-                });
-                console.log('[GLOBAL] Updated plugin tabs directly:', plugins.length, 'tabs added');
-            }
-        });
-
-        // Guard flag to prevent duplicate stub-to-full enhancement
-        window._appEnhanced = false;
-
-        // Define app() function early so Alpine can find it when it initializes
-        // This is a complete implementation that will work immediately
-        (function() {
-            const isAPMode = window.location.hostname === '192.168.4.1' || 
-                           window.location.hostname.startsWith('192.168.4.');
-            
-            // Create the app function - will be enhanced by full implementation later
-            window.app = function() {
-                return {
-                    activeTab: isAPMode ? 'wifi' : 'overview',
-                    installedPlugins: [],
-                    
-                    init() {
-                        // Try to enhance immediately with full implementation
-                        const tryEnhance = () => {
-                            if (window._appEnhanced) return true;
-                            if (typeof window.app === 'function') {
-                                const fullApp = window.app();
-                                // Check if this is the full implementation (has updatePluginTabs with proper implementation)
-                                if (fullApp && typeof fullApp.updatePluginTabs === 'function' && fullApp.updatePluginTabs.toString().includes('_doUpdatePluginTabs')) {
-                                    window._appEnhanced = true;
-                                    // Preserve runtime state that should not be reset
-                                    const preservedPlugins = this.installedPlugins;
-                                    const preservedTab = this.activeTab;
-                                    const defaultTab = isAPMode ? 'wifi' : 'overview';
-                                    const wasInitialized = this._initialized;
-                                    Object.assign(this, fullApp);
-                                    // Restore runtime state if non-default
-                                    if (preservedPlugins && preservedPlugins.length > 0) {
-                                        this.installedPlugins = preservedPlugins;
-                                    }
-                                    if (preservedTab && preservedTab !== defaultTab) {
-                                        this.activeTab = preservedTab;
-                                    }
-                                    if (wasInitialized) {
-                                        this._initialized = wasInitialized;
-                                    }
-                                    // Only call init if not already initialized
-                                    if (typeof this.init === 'function' && !this._initialized) {
-                                        this.init();
-                                    }
-                                    return true;
-                                }
-                            }
-                            return false;
-                        };
-                        
-                        // Set up event listener for pluginsUpdated in stub (only if not already enhanced)
-                        // The full implementation will have its own listener, so we only need this for the stub
-                        if (!this._pluginsUpdatedListenerSet) {
-                            const handlePluginsUpdated = (event) => {
-                                console.log('[STUB] Received pluginsUpdated event:', event.detail?.plugins?.length || 0, 'plugins');
-                                const plugins = event.detail?.plugins || [];
-                                // Only update if we're still in stub mode (not enhanced yet)
-                                if (typeof this.updatePluginTabs === 'function' && !this.updatePluginTabs.toString().includes('_doUpdatePluginTabs')) {
-                                    this.installedPlugins = plugins;
-                                    if (this.$nextTick && typeof this.$nextTick === 'function') {
-                                        this.$nextTick(() => {
-                                            this.updatePluginTabs();
-                                        });
-                                    } else {
-                                        setTimeout(() => {
-                                            this.updatePluginTabs();
-                                        }, 100);
-                                    }
-                                }
-                            };
-                            document.addEventListener('pluginsUpdated', handlePluginsUpdated);
-                            this._pluginsUpdatedListenerSet = true;
-                            console.log('[STUB] init: Set up pluginsUpdated event listener');
-                        }
-                        
-                        // Try immediately - if full implementation is already loaded, use it right away
-                        if (!tryEnhance()) {
-                            // Full implementation not ready yet, load plugins directly while waiting
-                            this.loadInstalledPluginsDirectly();
-                            // Try again very soon to enhance with full implementation
-                            setTimeout(tryEnhance, 10);
-                            
-                            // Also set up a periodic check to update tabs if plugins get loaded by plugins_manager.js
-                            let retryCount = 0;
-                            const maxRetries = 20; // Check for 2 seconds (20 * 100ms)
-                            const checkAndUpdateTabs = () => {
-                                if (retryCount >= maxRetries) {
-                                    // Fallback: if plugins_manager.js hasn't loaded after 2 seconds, fetch directly
-                                    if (!window.installedPlugins || window.installedPlugins.length === 0) {
-                                        console.log('[STUB] checkAndUpdateTabs: Fallback - fetching plugins directly after timeout');
-                                        this.loadInstalledPluginsDirectly();
-                                    }
-                                    return;
-                                }
-                                
-                                // Check if plugins are available (either from window or component)
-                                const plugins = window.installedPlugins || this.installedPlugins || [];
-                                if (plugins.length > 0) {
-                                    console.log('[STUB] checkAndUpdateTabs: Found', plugins.length, 'plugins, updating tabs');
-                                    this.installedPlugins = plugins;
-                                    if (typeof this.updatePluginTabs === 'function') {
-                                        this.updatePluginTabs();
-                                    }
-                                } else {
-                                    retryCount++;
-                                    setTimeout(checkAndUpdateTabs, 100);
-                                }
-                            };
-                            // Start checking after a short delay
-                            setTimeout(checkAndUpdateTabs, 200);
-                        } else {
-                            // Full implementation loaded, but still set up fallback timer
-                            setTimeout(() => {
-                                if (!window.installedPlugins || window.installedPlugins.length === 0) {
-                                    console.log('[STUB] init: Fallback timer - fetching plugins directly');
-                                    this.loadInstalledPluginsDirectly();
-                                }
-                            }, 2000);
-                        }
-                    },
-                    
-                    // Direct plugin loading for stub (before full implementation loads)
-                    async loadInstalledPluginsDirectly() {
-                        try {
-                            console.log('[STUB] loadInstalledPluginsDirectly: Starting...');
-                            // Ensure DOM is ready
-                            const ensureDOMReady = () => {
-                                return new Promise((resolve) => {
-                                    if (document.readyState === 'complete' || document.readyState === 'interactive') {
-                                        // Use requestAnimationFrame to ensure DOM is painted
-                                        requestAnimationFrame(() => {
-                                            setTimeout(resolve, 50); // Small delay to ensure rendering
-                                        });
-                                    } else {
-                                        document.addEventListener('DOMContentLoaded', () => {
-                                            requestAnimationFrame(() => {
-                                                setTimeout(resolve, 50);
-                                            });
-                                        });
-                                    }
-                                });
-                            };
-                            
-                            await ensureDOMReady();
-                            
-                            const data = await getInstalledPluginsSafe();
-                            if (data.status === 'success') {
-                                const plugins = data.data.plugins || [];
-                                console.log('[STUB] loadInstalledPluginsDirectly: Loaded', plugins.length, 'plugins');
-                                
-                                // Update both component and window
-                                this.installedPlugins = plugins;
-                                window.installedPlugins = plugins;
-                                
-                                // Dispatch event so global listener can update tabs
-                                document.dispatchEvent(new CustomEvent('pluginsUpdated', {
-                                    detail: { plugins: plugins }
-                                }));
-                                console.log('[STUB] loadInstalledPluginsDirectly: Dispatched pluginsUpdated event');
-                                
-                                // Update tabs if we have the method - use $nextTick if available
-                                if (typeof this.updatePluginTabs === 'function') {
-                                    if (this.$nextTick && typeof this.$nextTick === 'function') {
-                                        this.$nextTick(() => {
-                                            this.updatePluginTabs();
-                                        });
-                                    } else {
-                                        // Fallback: wait a bit for DOM
-                                        setTimeout(() => {
-                                            this.updatePluginTabs();
-                                        }, 100);
-                                    }
-                                }
-                            } else {
-                                console.warn('[STUB] loadInstalledPluginsDirectly: Failed to load plugins:', data.message);
-                            }
-                        } catch (error) {
-                            console.error('[STUB] loadInstalledPluginsDirectly: Error loading plugins:', error);
-                        }
-                    },
-                    
-                    // Stub methods that will be replaced by full implementation
-                    loadTabContent: function(tab) {},
-                    loadInstalledPlugins: async function() {
-                        // Try to use global function if available, otherwise use direct loading
-                        if (typeof window.loadInstalledPlugins === 'function') {
-                            await window.loadInstalledPlugins();
-                            // Update tabs after loading (window.installedPlugins should be set by the global function)
-                            if (window.installedPlugins && Array.isArray(window.installedPlugins)) {
-                                this.installedPlugins = window.installedPlugins;
-                                this.updatePluginTabs();
-                            }
-                        } else if (typeof window.pluginManager?.loadInstalledPlugins === 'function') {
-                            await window.pluginManager.loadInstalledPlugins();
-                            // Update tabs after loading
-                            if (window.installedPlugins && Array.isArray(window.installedPlugins)) {
-                                this.installedPlugins = window.installedPlugins;
-                                this.updatePluginTabs();
-                            }
-                        } else {
-                            // Fallback to direct loading (which already calls updatePluginTabs)
-                            await this.loadInstalledPluginsDirectly();
-                        }
-                    },
-                    updatePluginTabs: function() {
-                        // Basic implementation for stub - will be replaced by full implementation
-                        // Debounce to prevent multiple rapid calls
-                        if (this._updatePluginTabsTimeout) {
-                            clearTimeout(this._updatePluginTabsTimeout);
-                        }
-                        
-                        this._updatePluginTabsTimeout = setTimeout(() => {
-                            console.log('[STUB] updatePluginTabs: Executing with', this.installedPlugins?.length || 0, 'plugins');
-                            const pluginTabsRow = document.getElementById('plugin-tabs-row');
-                            const pluginTabsNav = pluginTabsRow?.querySelector('nav');
-                            if (!pluginTabsRow || !pluginTabsNav) {
-                                console.warn('[STUB] updatePluginTabs: Plugin tabs container not found');
-                                return;
-                            }
-                            if (!this.installedPlugins || this.installedPlugins.length === 0) {
-                                console.log('[STUB] updatePluginTabs: No plugins to display');
-                                return;
-                            }
-                            
-                            // Check if tabs are already correct by comparing plugin IDs
-                            const existingTabs = pluginTabsNav.querySelectorAll('.plugin-tab');
-                            const existingIds = Array.from(existingTabs).map(tab => tab.getAttribute('data-plugin-id')).sort().join(',');
-                            const currentIds = this.installedPlugins.map(p => p.id).sort().join(',');
-                            
-                            if (existingIds === currentIds && existingTabs.length === this.installedPlugins.length) {
-                                console.log('[STUB] updatePluginTabs: Tabs already match, skipping update');
-                                return;
-                            }
-                            
-                            // Clear existing plugin tabs (except Plugin Manager)
-                            existingTabs.forEach(tab => tab.remove());
-                            console.log('[STUB] updatePluginTabs: Cleared', existingTabs.length, 'existing tabs');
-                            
-                            // Add tabs for each installed plugin
-                            this.installedPlugins.forEach(plugin => {
-                                const tabButton = document.createElement('button');
-                                tabButton.type = 'button';
-                                tabButton.setAttribute('data-plugin-id', plugin.id);
-                                tabButton.className = `plugin-tab nav-tab ${this.activeTab === plugin.id ? 'nav-tab-active' : ''}`;
-                                tabButton.onclick = () => {
-                                    this.activeTab = plugin.id;
-                                    if (typeof this.updatePluginTabStates === 'function') {
-                                        this.updatePluginTabStates();
-                                    }
-                                };
-                                const div = document.createElement('div');
-                                div.textContent = plugin.name || plugin.id;
-                                const iconClass = (plugin.icon || 'fas fa-puzzle-piece').replace(/"/g, '&quot;');
-                                tabButton.innerHTML = `<i class="${iconClass}"></i>${div.innerHTML}`;
-                                pluginTabsNav.appendChild(tabButton);
-                            });
-                            console.log('[STUB] updatePluginTabs: Added', this.installedPlugins.length, 'plugin tabs');
-                        }, 100);
-                    },
-                    showNotification: function(message, type) {},
-                    escapeHtml: function(text) { return String(text || '').replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;'); }
-                };
-            };
-        })();
-    </script>
+    <script src="{{ url_for('static', filename='v3/js/app-early.js') }}"></script>
 
     <!-- Alpine.js for reactive components.
          Load the local copy first (always works, no CDN round-trip, no AP-mode
@@ -827,10 +245,10 @@
     </script>
 
     <!-- CodeMirror for JSON editing - lazy loaded when needed -->
-    <link rel="preload" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.2/codemirror.min.css" as="style" onload="this.onload=null;this.rel='stylesheet'">
-    <noscript><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.2/codemirror.min.css"></noscript>
-    <link rel="preload" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.2/theme/monokai.min.css" as="style" onload="this.onload=null;this.rel='stylesheet'">
-    <noscript><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.2/theme/monokai.min.css"></noscript>
+    <link rel="preload" href="{{ url_for('static', filename='v3/vendor/codemirror/codemirror.min.css') }}" as="style" onload="this.onload=null;this.rel='stylesheet'">
+    <noscript><link rel="stylesheet" href="{{ url_for('static', filename='v3/vendor/codemirror/codemirror.min.css') }}"></noscript>
+    <link rel="preload" href="{{ url_for('static', filename='v3/vendor/codemirror/theme/monokai.min.css') }}" as="style" onload="this.onload=null;this.rel='stylesheet'">
+    <noscript><link rel="stylesheet" href="{{ url_for('static', filename='v3/vendor/codemirror/theme/monokai.min.css') }}"></noscript>
     <!-- CodeMirror scripts loaded on demand when JSON editor is opened -->
     <script>
         // Lazy load CodeMirror when needed
@@ -838,12 +256,15 @@
             if (window.CodeMirror) return Promise.resolve();
             
             return new Promise((resolve, reject) => {
+                // Vendored CodeMirror 5.65.2 (note: the previously listed CDN
+                // mode/json/json.min.js never existed — it 404'd on every
+                // editor open; JSON highlighting comes from the javascript
+                // mode, so it's simply dropped here)
                 const scripts = [
-                    'https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.2/codemirror.min.js',
-                    'https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.2/mode/javascript/javascript.min.js',
-                    'https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.2/mode/json/json.min.js',
-                    'https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.2/addon/edit/closebrackets.min.js',
-                    'https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.2/addon/edit/matchbrackets.min.js'
+                    '/static/v3/vendor/codemirror/codemirror.min.js',
+                    '/static/v3/vendor/codemirror/mode/javascript/javascript.min.js',
+                    '/static/v3/vendor/codemirror/addon/edit/closebrackets.min.js',
+                    '/static/v3/vendor/codemirror/addon/edit/matchbrackets.min.js'
                 ];
                 
                 let loaded = 0;
@@ -862,8 +283,9 @@
         };
     </script>
 
-    <!-- Font Awesome icons -->
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
+    <!-- Font Awesome icons (vendored 6.0.0 — css/all.min.css references
+         ../webfonts/ relatively, so both live under v3/vendor/fontawesome/) -->
+    <link rel="stylesheet" href="{{ url_for('static', filename='v3/vendor/fontawesome/css/all.min.css') }}">
 
     <!-- Custom v3 styles -->
     <link rel="stylesheet" href="{{ url_for('static', filename='v3/app.css') }}">
@@ -874,14 +296,25 @@
         <div class="mx-auto px-4 sm:px-6 lg:px-8 xl:px-12 2xl:px-16" style="max-width: 100%;">
             <div class="flex justify-between items-center h-16">
                 <div class="flex items-center">
+                    <!-- Mobile nav toggle (hamburger) — hidden at md and up -->
+                    <button type="button"
+                            class="theme-toggle-btn p-2 rounded-md mr-2 md:hidden"
+                            @click="mobileNavOpen = !mobileNavOpen"
+                            :aria-expanded="mobileNavOpen ? 'true' : 'false'"
+                            aria-controls="site-nav"
+                            :aria-label="mobileNavOpen ? 'Close navigation menu' : 'Open navigation menu'"
+                            aria-label="Open navigation menu"
+                            title="Menu">
+                        <i class="fas fa-bars" aria-hidden="true"></i>
+                    </button>
                     <h1 class="text-xl font-bold text-gray-900">
                         <i class="fas fa-tv text-blue-600 mr-2"></i>
-                        LED Matrix Control - v3
+                        LED Matrix Control
                     </h1>
                 </div>
 
                 <!-- Connection status and theme toggle -->
-                <div class="flex items-center space-x-4">
+                <div id="header-widgets" class="flex items-center space-x-4">
                     <!-- Global settings search -->
                     <div class="relative hidden sm:block" id="settings-search-wrap">
                         <input id="settings-search"
@@ -919,7 +352,7 @@
                     </div>
 
                     <!-- System stats (populated via SSE) -->
-                    <div class="hidden lg:flex items-center space-x-4 text-sm text-gray-600 xl:space-x-6 2xl:space-x-8">
+                    <div id="system-stats" class="hidden lg:flex items-center space-x-4 text-sm text-gray-600 xl:space-x-6 2xl:space-x-8">
                         <span id="cpu-stat" class="flex items-center space-x-1">
                             <i class="fas fa-microchip"></i>
                             <span>--%</span>
@@ -970,6 +403,36 @@
         </div>
     </div>
 
+    <!-- Restart-pending banner: shown after a main-config save (display
+         hardware, rotation order, durations, general settings) — those only
+         take effect after the display service restarts. Plugin config saves
+         apply live and don't trigger this. Wired in app.js. -->
+    <div id="restart-pending-banner" style="display:none"
+         class="update-banner border-b transition-all duration-300 ease-in-out">
+        <div class="mx-auto px-4 sm:px-6 lg:px-8 xl:px-12 2xl:px-16 py-2" style="max-width:100%">
+            <div class="flex items-center justify-between">
+                <div class="flex items-center space-x-3">
+                    <i class="fas fa-rotate text-lg"></i>
+                    <span class="text-sm font-medium" aria-live="polite">
+                        Configuration saved &mdash; restart the display to apply the changes
+                    </span>
+                </div>
+                <div class="flex items-center space-x-3">
+                    <button onclick="window.restartPendingNow()" id="restart-pending-btn"
+                            class="inline-flex items-center px-3 py-1 text-xs font-semibold rounded-md
+                                   update-banner-action transition-colors duration-150">
+                        <i class="fas fa-power-off mr-1"></i> Restart Now
+                    </button>
+                    <button type="button" onclick="window.dismissRestartPending()"
+                            class="update-banner-dismiss rounded p-1 transition-colors duration-150"
+                            title="Dismiss" aria-label="Dismiss restart reminder">
+                        <i class="fas fa-times text-sm"></i>
+                    </button>
+                </div>
+            </div>
+        </div>
+    </div>
+
     <!-- Under-voltage / throttling warning banner -->
     <div id="power-warning-banner" style="display:none"
          class="power-warning-banner border-b transition-all duration-300 ease-in-out">
@@ -993,6 +456,19 @@
 
     <!-- Main content -->
     <main class="mx-auto px-4 sm:px-6 lg:px-8 xl:px-12 2xl:px-16 py-8" style="max-width: 100%;">
+        <!-- Backdrop shown behind the mobile nav drawer (no-op at md and up) -->
+        <div class="nav-backdrop" x-show="mobileNavOpen" x-transition.opacity
+             @click="mobileNavOpen = false" aria-hidden="true" style="display: none;"></div>
+
+        <!-- Navigation: static tab rows at md and up; off-canvas drawer below md.
+             The drawer reuses the exact same tab buttons/handlers — CSS repositions
+             this container, nothing is duplicated. Clicking any tab closes the drawer. -->
+        <div id="site-nav" class="site-nav" :class="mobileNavOpen ? 'open' : ''"
+             @click="if ($event.target.closest('.nav-tab')) mobileNavOpen = false">
+            <!-- Below md, the header's settings-search and system-stats widgets are
+                 moved (not copied) into this slot by placeHeaderWidgets() in app.js -->
+            <div id="drawer-widgets"></div>
+
         <!-- Navigation tabs -->
         <nav class="mb-8">
             <!-- First row - System tabs -->
@@ -1023,6 +499,11 @@
                             class="nav-tab">
                         <i class="fas fa-desktop"></i>Display
                     </button>
+                    <button @click="activeTab = 'durations'"
+                            :class="activeTab === 'durations' ? 'nav-tab-active' : ''"
+                            class="nav-tab">
+                        <i class="fas fa-rotate"></i>Rotation
+                    </button>
                     <button @click="activeTab = 'config-editor'"
                             :class="activeTab === 'config-editor' ? 'nav-tab-active' : ''"
                             class="nav-tab">
@@ -1073,6 +554,36 @@
                 </nav>
             </div>
         </nav>
+        </div> <!-- /#site-nav -->
+
+        <!-- Floating mini display preview: available on every tab except
+             Overview (which has the full preview). Fed from the same SSE
+             stream by updateDisplayPreview in app-shell.js; open/closed state
+             persists in localStorage. -->
+        <div id="floating-preview" class="floating-preview" style="display:none">
+            <div class="flex items-center justify-between px-2 py-1">
+                <span class="text-xs text-gray-300"><i class="fas fa-tv mr-1"></i>Live Preview</span>
+                <span class="flex items-center">
+                    <button type="button" onclick="window.cycleFloatingPreviewSize()"
+                            class="text-gray-400 hover:text-white ml-2" aria-label="Cycle preview size"
+                            title="Cycle preview size (drag the corner to resize on desktop)">
+                        <i class="fas fa-up-right-and-down-left-from-center text-xs"></i>
+                    </button>
+                    <button type="button" onclick="window.toggleFloatingPreview(false)"
+                            class="text-gray-400 hover:text-white ml-2" aria-label="Close live preview">
+                        <i class="fas fa-times text-xs"></i>
+                    </button>
+                </span>
+            </div>
+            <img id="floating-preview-img" alt="Live display preview"
+                 style="image-rendering: pixelated; display: block; width: 100%; height: auto;">
+        </div>
+        <button id="floating-preview-toggle" type="button" onclick="window.toggleFloatingPreview(true)"
+                class="floating-preview-toggle" style="display:none"
+                title="Show live display preview" aria-label="Show live display preview">
+            <i class="fas fa-tv"></i>
+        </button>
+
 
         <!-- Tab content -->
         <div id="tab-content" class="space-y-6">
@@ -1244,6 +755,18 @@
                 </div>
             </div>
 
+            <!-- Rotation & Durations tab -->
+            <div x-show="activeTab === 'durations'" x-transition>
+                <div id="durations-content" hx-get="/v3/partials/durations" hx-trigger="loadtab" hx-swap="innerHTML">
+                    <div class="animate-pulse">
+                        <div class="bg-white rounded-lg shadow p-6">
+                            <div class="h-4 bg-gray-200 rounded w-1/4 mb-4"></div>
+                            <div class="h-32 bg-gray-200 rounded"></div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
             <!-- Backup & Restore tab -->
             <div x-show="activeTab === 'backup-restore'" x-transition>
                 <div id="backup-restore-content" hx-get="/v3/partials/backup-restore" hx-trigger="loadtab" hx-swap="innerHTML">
@@ -1429,3340 +952,7 @@
     <div id="notifications" class="fixed top-4 right-4 z-50 space-y-2"></div>
 
     <!-- SSE connection for real-time updates -->
-    <script>
-        // Assign to window so reconnectSSE() in app.js can reach them.
-        window.statsSource = new EventSource('/api/v3/stream/stats');
-        window.displaySource = new EventSource('/api/v3/stream/display');
-
-        window.statsSource.onmessage = function(event) {
-            const data = JSON.parse(event.data);
-            updateSystemStats(data);
-        };
-
-        window.displaySource.onmessage = function(event) {
-            const data = JSON.parse(event.data);
-            updateDisplayPreview(data);
-        };
-
-        function _setConnectionStatus(connected, reconnecting) {
-            const el = document.getElementById('connection-status');
-            if (!el) return;
-            if (connected) {
-                el.innerHTML = `
-                    <div class="w-2 h-2 bg-green-500 rounded-full"></div>
-                    <span class="text-gray-600">Connected</span>
-                `;
-            } else if (reconnecting) {
-                el.innerHTML = `
-                    <div class="w-2 h-2 bg-yellow-500 rounded-full animate-pulse"></div>
-                    <span class="text-gray-600">Reconnecting…</span>
-                `;
-            } else {
-                el.innerHTML = `
-                    <div class="w-2 h-2 bg-red-500 rounded-full"></div>
-                    <span class="text-gray-600" title="Connection lost — try refreshing the page">Disconnected</span>
-                `;
-            }
-        }
-
-        var _statsErrorCount = 0;
-
-        // Named on window so reconnectSSE() in app.js can reattach them after
-        // replacing the EventSource instances.
-        window._statsOpenHandler = function() {
-            _statsErrorCount = 0;
-            _setConnectionStatus(true, false);
-        };
-        window._statsErrorHandler = function() {
-            _statsErrorCount++;
-            // EventSource readyState 0 = CONNECTING (auto-retrying), 2 = CLOSED
-            var reconnecting = window.statsSource.readyState === EventSource.CONNECTING;
-            _setConnectionStatus(false, reconnecting && _statsErrorCount <= 3);
-        };
-        window._displayErrorHandler = function() {
-            // Display stream errors don't change the status badge but log to console
-            // so failures aren't completely silent.
-            console.warn('LEDMatrix: display preview stream error (readyState=' + window.displaySource.readyState + ')');
-        };
-
-        window.statsSource.addEventListener('open', window._statsOpenHandler);
-        window.statsSource.addEventListener('error', window._statsErrorHandler);
-        window.displaySource.addEventListener('error', window._displayErrorHandler);
-
-        // Reset any time the currently-active warning clears, so a future
-        // (new) occurrence shows the banner again even if this one was dismissed.
-        window._powerWarningDismissed = false;
-
-        window.dismissPowerWarningBanner = function() {
-            const banner = document.getElementById('power-warning-banner');
-            if (banner) banner.style.display = 'none';
-            window._powerWarningDismissed = true;
-        };
-
-        // Labels for whichever flags from _get_power_status() are set (pass
-        // suffix='_occurred' for the "happened earlier" variant), used to
-        // build accurate banner/tooltip text instead of hardcoding
-        // "under-voltage" for what may actually be throttling/freq-capping/
-        // thermal limiting.
-        function _activePowerConditionLabels(power, suffix) {
-            suffix = suffix || '_now';
-            const labels = [];
-            if (power['under_voltage' + suffix]) labels.push('under-voltage');
-            if (power['throttled' + suffix]) labels.push('throttling');
-            if (power['freq_capped' + suffix]) labels.push('CPU frequency capped');
-            if (power['soft_temp_limit' + suffix]) labels.push('soft thermal limit');
-            return labels;
-        }
-
-        function updatePowerStatus(power) {
-            const statEl = document.getElementById('power-stat');
-            const banner = document.getElementById('power-warning-banner');
-            const bannerText = document.getElementById('power-warning-banner-text');
-
-            if (!power) {
-                if (statEl) statEl.classList.add('hidden');
-                if (banner) {
-                    banner.style.display = 'none';
-                    // Let a future occurrence show the banner again rather
-                    // than leaving stale text/visibility from before this
-                    // (likely transient) missing-data tick.
-                    window._powerWarningDismissed = false;
-                }
-                return;
-            }
-
-            const activeNow = power.under_voltage_now || power.throttled_now ||
-                power.freq_capped_now || power.soft_temp_limit_now;
-            const occurredEarlier = power.under_voltage_occurred || power.throttled_occurred ||
-                power.freq_capped_occurred || power.soft_temp_limit_occurred;
-
-            if (statEl) {
-                statEl.classList.remove('text-red-600', 'text-yellow-600');
-                if (activeNow) {
-                    statEl.classList.remove('hidden');
-                    statEl.classList.add('flex', 'text-red-600');
-                    statEl.title = _activePowerConditionLabels(power).join('/') +
-                        ' detected right now — check your power supply and cooling';
-                } else if (occurredEarlier) {
-                    statEl.classList.remove('hidden');
-                    statEl.classList.add('flex', 'text-yellow-600');
-                    const occurredLabels = _activePowerConditionLabels(power, '_occurred');
-                    statEl.title = (occurredLabels.length ? occurredLabels.join('/') : 'An issue') +
-                        ' was detected earlier (currently OK)';
-                } else {
-                    statEl.classList.add('hidden');
-                }
-            }
-
-            if (banner) {
-                if (activeNow) {
-                    if (bannerText) {
-                        const labels = _activePowerConditionLabels(power);
-                        bannerText.textContent = (labels.length ? labels.join('/') : 'A power/thermal issue') +
-                            ' detected right now — the display may flicker or degrade. Check your power supply and cooling.';
-                    }
-                    if (!window._powerWarningDismissed) {
-                        banner.style.display = '';
-                    }
-                } else {
-                    banner.style.display = 'none';
-                    // Let a future occurrence show the banner again.
-                    window._powerWarningDismissed = false;
-                }
-            }
-        }
-
-        function updateSystemStats(data) {
-            // Update CPU in header
-            const cpuEl = document.getElementById('cpu-stat');
-            if (cpuEl && data.cpu_percent !== undefined) {
-                const spans = cpuEl.querySelectorAll('span');
-                if (spans.length > 0) spans[spans.length - 1].textContent = data.cpu_percent + '%';
-            }
-
-            // Update Memory in header
-            const memEl = document.getElementById('memory-stat');
-            if (memEl && data.memory_used_percent !== undefined) {
-                const spans = memEl.querySelectorAll('span');
-                if (spans.length > 0) spans[spans.length - 1].textContent = data.memory_used_percent + '%';
-            }
-
-            // Update Temperature in header
-            const tempEl = document.getElementById('temp-stat');
-            if (tempEl && data.cpu_temp !== undefined) {
-                const spans = tempEl.querySelectorAll('span');
-                if (spans.length > 0) spans[spans.length - 1].textContent = data.cpu_temp + '°C';
-            }
-
-            // Update Power (under-voltage / throttling) status in header + banner
-            updatePowerStatus(data.power);
-
-            // Update Overview tab stats (if visible)
-            const cpuUsageEl = document.getElementById('cpu-usage');
-            if (cpuUsageEl && data.cpu_percent !== undefined) {
-                cpuUsageEl.textContent = data.cpu_percent + '%';
-            }
-
-            const memUsageEl = document.getElementById('memory-usage');
-            if (memUsageEl && data.memory_used_percent !== undefined) {
-                memUsageEl.textContent = data.memory_used_percent + '%';
-            }
-
-            const cpuTempEl = document.getElementById('cpu-temp');
-            if (cpuTempEl && data.cpu_temp !== undefined) {
-                cpuTempEl.textContent = data.cpu_temp + '°C';
-            }
-
-            const displayStatusEl = document.getElementById('display-status');
-            if (displayStatusEl) {
-                displayStatusEl.textContent = data.service_active ? 'Active' : 'Inactive';
-                displayStatusEl.className = data.service_active ?
-                    'text-lg font-medium text-green-600' :
-                    'text-lg font-medium text-red-600';
-            }
-        }
-
-        window.__onDemandStore = window.__onDemandStore || {
-            loading: true,
-            state: {},
-            service: {},
-            error: null,
-            lastUpdated: null
-        };
-
-        document.addEventListener('alpine:init', () => {
-            // On-Demand state store
-            if (window.Alpine && !window.Alpine.store('onDemand')) {
-                window.Alpine.store('onDemand', {
-                    loading: window.__onDemandStore.loading,
-                    state: window.__onDemandStore.state,
-                    service: window.__onDemandStore.service,
-                    error: window.__onDemandStore.error,
-                    lastUpdated: window.__onDemandStore.lastUpdated
-                });
-            }
-            if (window.Alpine) {
-                window.__onDemandStore = window.Alpine.store('onDemand');
-            }
-            
-            // Plugin state store - centralized state management for plugins
-            // Used primarily by HTMX-loaded plugin config partials
-            if (window.Alpine && !window.Alpine.store('plugins')) {
-                window.Alpine.store('plugins', {
-                    // Track which plugin configs have been loaded
-                    loadedConfigs: {},
-                    
-                    // Mark a plugin config as loaded
-                    markLoaded(pluginId) {
-                        this.loadedConfigs[pluginId] = true;
-                    },
-                    
-                    // Check if a plugin config is loaded
-                    isLoaded(pluginId) {
-                        return !!this.loadedConfigs[pluginId];
-                    },
-                    
-                    // Refresh a plugin config tab via HTMX
-                    refreshConfig(pluginId) {
-                        const container = document.querySelector(`#plugin-config-${pluginId}`);
-                        if (container && window.htmx) {
-                            htmx.ajax('GET', `/v3/partials/plugin-config/${pluginId}`, {
-                                target: container,
-                                swap: 'innerHTML'
-                            });
-                        }
-                    }
-                });
-            }
-        });
-
-        // ===== DEPRECATED: pluginConfigData =====
-        // This function is no longer used - plugin configuration forms are now
-        // rendered server-side and loaded via HTMX. Kept for backwards compatibility.
-        // See: /v3/partials/plugin-config/<plugin_id> for the new implementation.
-        function pluginConfigData(plugin) {
-            if (!plugin) {
-                console.error('pluginConfigData called with undefined plugin');
-                return {
-                    plugin: { id: 'unknown', name: 'Unknown Plugin', enabled: false },
-                    loading: false,
-                    config: {},
-                    schema: {},
-                    webUiActions: [],
-                    onDemandRefreshing: false,
-                    onDemandStopping: false
-                };
-            }
-            return {
-                plugin: plugin,
-                loading: true,
-                config: {},
-                schema: {},
-                webUiActions: [],
-                onDemandRefreshing: false,
-                onDemandStopping: false,
-                get onDemandStore() {
-                    if (window.Alpine && typeof Alpine.store === 'function' && Alpine.store('onDemand')) {
-                        return Alpine.store('onDemand');
-                    }
-                    return window.__onDemandStore || { loading: true, state: {}, service: {}, error: null, lastUpdated: null };
-                },
-                get isOnDemandLoading() {
-                    const store = this.onDemandStore || {};
-                    return !!store.loading;
-                },
-                get onDemandState() {
-                    const store = this.onDemandStore || {};
-                    return store.state || {};
-                },
-                get onDemandService() {
-                    const store = this.onDemandStore || {};
-                    return store.service || {};
-                },
-                get onDemandError() {
-                    const store = this.onDemandStore || {};
-                    return store.error || null;
-                },
-                get onDemandActive() {
-                    const state = this.onDemandState;
-                    return !!(state.active && state.plugin_id === plugin.id);
-                },
-                resolvePluginName() {
-                    return plugin.name || plugin.id;
-                },
-                resolvePluginDisplayName(id) {
-                    if (!id) {
-                        return 'Another plugin';
-                    }
-                    const list = window.installedPlugins || [];
-                    const match = Array.isArray(list) ? list.find(p => p.id === id) : null;
-                    return match ? (match.name || match.id) : id;
-                },
-                formatDuration(value) {
-                    if (value === undefined || value === null) {
-                        return '';
-                    }
-                    const total = Number(value);
-                    if (Number.isNaN(total)) {
-                        return '';
-                    }
-                    const seconds = Math.max(0, Math.round(total));
-                    const minutes = Math.floor(seconds / 60);
-                    const remainingSeconds = seconds % 60;
-                    if (minutes > 0) {
-                        return `${minutes}m${remainingSeconds > 0 ? ` ${remainingSeconds}s` : ''}`;
-                    }
-                    return `${remainingSeconds}s`;
-                },
-                get onDemandStatusText() {
-                    if (this.isOnDemandLoading) {
-                        return 'Loading on-demand status...';
-                    }
-                    if (this.onDemandError) {
-                        return `On-demand error: ${this.onDemandError}`;
-                    }
-                    const state = this.onDemandState;
-                    if (state.active) {
-                        const activeName = this.resolvePluginDisplayName(state.plugin_id);
-                        if (state.plugin_id !== plugin.id) {
-                            return `${activeName} is running on-demand.`;
-                        }
-                        const modeLabel = state.mode ? ` (${state.mode})` : '';
-                        const remaining = this.formatDuration(state.remaining);
-                        const duration = this.formatDuration(state.duration);
-                        let message = `${this.resolvePluginName()}${modeLabel} is running on-demand`;
-                        if (remaining) {
-                            message += ` — ${remaining} remaining`;
-                        } else if (duration) {
-                            message += ` — duration ${duration}`;
-                        } else {
-                            message += ' — until stopped';
-                        }
-                        return message;
-                    }
-                    const lastEvent = state.last_event ? state.last_event.replace(/-/g, ' ') : null;
-                    if (lastEvent && lastEvent !== 'cleared') {
-                        return `No on-demand session active (last event: ${lastEvent})`;
-                    }
-                    return 'No on-demand session active.';
-                },
-                get onDemandStatusClass() {
-                    if (this.isOnDemandLoading) return 'text-blue-600';
-                    if (this.onDemandError) return 'text-red-600';
-                    if (this.onDemandActive) return 'text-green-600';
-                    return 'text-blue-600';
-                },
-                get onDemandServiceText() {
-                    if (this.isOnDemandLoading) {
-                        return 'Checking display service status...';
-                    }
-                    if (this.onDemandError) {
-                        return 'Display service status unavailable.';
-                    }
-                    if (this.onDemandService.active) {
-                        return 'Display service is running.';
-                    }
-                    const serviceError = this.onDemandService.stderr || this.onDemandService.error;
-                    return serviceError ? `Display service inactive (${serviceError})` : 'Display service is not running.';
-                },
-                get onDemandServiceClass() {
-                    if (this.isOnDemandLoading) return 'text-blue-500';
-                    if (this.onDemandError) return 'text-red-500';
-                    return this.onDemandService.active ? 'text-blue-500' : 'text-red-500';
-                },
-                get onDemandLastUpdated() {
-                    const store = this.onDemandStore || {};
-                    if (!store.lastUpdated) {
-                        return '';
-                    }
-                    const deltaSeconds = Math.round((Date.now() - store.lastUpdated) / 1000);
-                    if (deltaSeconds < 5) return 'Just now';
-                    if (deltaSeconds < 60) return `${deltaSeconds}s ago`;
-                    const minutes = Math.round(deltaSeconds / 60);
-                    if (minutes < 60) return `${minutes}m ago`;
-                    const hours = Math.round(minutes / 60);
-                    return `${hours}h ago`;
-                },
-                get canStopOnDemand() {
-                    if (this.isOnDemandLoading) return false;
-                    if (this.onDemandError) return true;
-                    return this.onDemandActive;
-                },
-                get disableRunButton() {
-                    return !plugin.enabled;
-                },
-                get showEnableHint() {
-                    return !plugin.enabled;
-                },
-                notify(message, type = 'info') {
-                    if (typeof showNotification === 'function') {
-                        showNotification(message, type);
-                    }
-                },
-                refreshOnDemandStatus() {
-                    if (typeof window.loadOnDemandStatus !== 'function') {
-                        this.notify('On-demand status controls unavailable. Refresh the Plugin Manager tab.', 'error');
-                        return;
-                    }
-                    this.onDemandRefreshing = true;
-                    Promise.resolve(window.loadOnDemandStatus(true))
-                        .finally(() => {
-                            this.onDemandRefreshing = false;
-                        });
-                },
-                runOnDemand() {
-                    // Note: On-demand can work with disabled plugins - the backend will temporarily enable them
-                    if (typeof window.openOnDemandModal === 'function') {
-                        window.openOnDemandModal(plugin.id);
-                    } else {
-                        this.notify('On-demand modal unavailable. Refresh the Plugin Manager tab.', 'error');
-                    }
-                },
-                stopOnDemandWithEvent(stopService = false) {
-                    if (typeof window.requestOnDemandStop !== 'function') {
-                        this.notify('Unable to stop on-demand mode. Refresh the Plugin Manager tab.', 'error');
-                        return;
-                    }
-                    this.onDemandStopping = true;
-                    Promise.resolve(window.requestOnDemandStop({ stopService }))
-                        .finally(() => {
-                            this.onDemandStopping = false;
-                        });
-                },
-                async loadPluginConfig(pluginId) {
-                    // Use PluginConfigHelpers to load config directly into this component
-                    if (window.PluginConfigHelpers) {
-                        await window.PluginConfigHelpers.loadPluginConfig(pluginId, this);
-                        this.loading = false;
-                        return;
-                    }
-                    console.error('loadPluginConfig not available');
-                    this.loading = false;
-                }
-                // Note: generateConfigForm and savePluginConfig are now called via window.PluginConfigHelpers 
-                // to avoid delegation recursion and ensure proper access to app component.
-                // See template usage:
-                // x-html="window.PluginConfigHelpers.generateConfigForm(...)" and 
-                // x-on:submit.prevent="window.PluginConfigHelpers.savePluginConfig(...)"
-            };
-        }
-
-        // Alpine.js app function - full implementation
-        function app() {
-            // If Alpine is already initialized, get the current component and enhance it
-            let baseComponent = {};
-            if (window.Alpine) {
-                const appElement = document.querySelector('[x-data]');
-                if (appElement && appElement._x_dataStack && appElement._x_dataStack[0]) {
-                    baseComponent = appElement._x_dataStack[0];
-                }
-            }
-            
-            const fullImplementation = {
-                activeTab: (function() {
-                    // Auto-open WiFi tab when in AP mode (192.168.4.x)
-                    const isAPMode = window.location.hostname === '192.168.4.1' || 
-                                   window.location.hostname.startsWith('192.168.4.');
-                    return isAPMode ? 'wifi' : 'overview';
-                })(),
-                installedPlugins: [],
-
-                init() {
-                    // Prevent multiple initializations
-                    if (this._initialized) {
-                        return;
-                    }
-                    this._initialized = true;
-                    
-                    // Load plugins on page load so tabs are available on any page, regardless of active tab
-                    // First check if plugins are already in window.installedPlugins (from plugins_manager.js)
-                    if (typeof window.installedPlugins !== 'undefined' && Array.isArray(window.installedPlugins) && window.installedPlugins.length > 0) {
-                        this.installedPlugins = window.installedPlugins;
-                        console.log('Initialized installedPlugins from global:', this.installedPlugins.length);
-                        // Ensure tabs are updated immediately
-                        this.$nextTick(() => {
-                            this.updatePluginTabs();
-                        });
-                    } else if (!this.installedPlugins || this.installedPlugins.length === 0) {
-                        // Load plugins asynchronously, but ensure tabs update when done
-                        this.loadInstalledPlugins().then(() => {
-                            // Ensure tabs are updated after loading
-                            this.$nextTick(() => {
-                                this.updatePluginTabs();
-                            });
-                        }).catch(err => {
-                            console.error('Error loading plugins in init:', err);
-                            // Still try to update tabs in case some plugins are available
-                            this.$nextTick(() => {
-                                this.updatePluginTabs();
-                            });
-                        });
-                    } else {
-                        // Plugins already loaded, just update tabs
-                        this.$nextTick(() => {
-                            this.updatePluginTabs();
-                        });
-                    }
-                    
-                    // Ensure content loads for the active tab
-                    this.$watch('activeTab', (newTab, oldTab) => {
-                        // Update plugin tab states when activeTab changes
-                        if (typeof this.updatePluginTabStates === 'function') {
-                            this.updatePluginTabStates();
-                        }
-                        // Trigger content load when tab changes
-                        this.$nextTick(() => {
-                            this.loadTabContent(newTab);
-                        });
-                    });
-                    
-                    // Load initial tab content
-                    this.$nextTick(() => {
-                        this.loadTabContent(this.activeTab);
-                    });
-
-                    // Listen for plugin updates from pluginManager
-                    document.addEventListener('pluginsUpdated', (event) => {
-                        console.log('Received pluginsUpdated event:', event.detail.plugins.length, 'plugins');
-                        this.installedPlugins = event.detail.plugins;
-                        this.updatePluginTabs();
-                    });
-
-                    // Also listen for direct window.installedPlugins changes
-                    // Store the actual value in a private property to avoid infinite loops
-                    let _installedPluginsValue = this.installedPlugins || [];
-                    
-                    // Only define the property if it doesn't already exist or if it's configurable
-                    const existingDescriptor = Object.getOwnPropertyDescriptor(window, 'installedPlugins');
-                    if (!existingDescriptor || existingDescriptor.configurable) {
-                        // Delete existing property if it exists and is configurable
-                        if (existingDescriptor) {
-                            delete window.installedPlugins;
-                        }
-                        
-                        Object.defineProperty(window, 'installedPlugins', {
-                            set: (value) => {
-                                const newPlugins = value || [];
-                                const oldIds = (_installedPluginsValue || []).map(p => p.id).sort().join(',');
-                                const newIds = newPlugins.map(p => p.id).sort().join(',');
-                                
-                                // Only update if plugin list actually changed
-                                if (oldIds !== newIds) {
-                                    console.log('window.installedPlugins changed:', newPlugins.length, 'plugins');
-                                    _installedPluginsValue = newPlugins;
-                                    this.installedPlugins = newPlugins;
-                                    this.updatePluginTabs();
-                                }
-                            },
-                            get: () => _installedPluginsValue,
-                            configurable: true  // Allow redefinition if needed
-                        });
-                    } else {
-                        // Property already exists and is not configurable, just update the value
-                        if (typeof window.installedPlugins !== 'undefined') {
-                            _installedPluginsValue = window.installedPlugins;
-                        }
-                    }
-
-                },
-
-                loadTabContent(tab) {
-                    const contentEl = document.getElementById(tab + '-content');
-                    // data-loaded: already fetched. data-loading: a fetch is queued or in
-                    // flight. Both guard against re-entry so a panel loads exactly once, even
-                    // if the tab is reopened before an in-progress (or polling) load settles.
-                    if (!contentEl || contentEl.hasAttribute('data-loaded') || contentEl.hasAttribute('data-loading')) return;
-                    const url = contentEl.getAttribute('hx-get');
-                    if (!url) return;
-
-                    contentEl.setAttribute('data-loading', 'true');
-
-                    // htmx.ajax issues the request and swaps the response into the panel
-                    // directly, so it works even before htmx has wired up the element's
-                    // hx-trigger listeners. data-loaded is stamped on success so the panel
-                    // loads once; the activeTab check drops loads for a tab the user navigated
-                    // away from while htmx was still loading (avoids fetching hidden panels).
-                    const swap = contentEl.getAttribute('hx-swap') || 'innerHTML';
-                    const load = () => {
-                        if (this.activeTab !== tab || contentEl.hasAttribute('data-loaded')) {
-                            contentEl.removeAttribute('data-loading');
-                            return;
-                        }
-                        return htmx.ajax('GET', url, { target: contentEl, swap: swap })
-                            .then(() => contentEl.setAttribute('data-loaded', 'true'))
-                            .catch(() => {}) // leave unstamped on failure so it can retry
-                            .finally(() => contentEl.removeAttribute('data-loading'));
-                    };
-
-                    if (typeof htmx !== 'undefined') {
-                        load();
-                        return;
-                    }
-
-                    // htmx is loaded from a CDN and may not be ready yet. Poll until it is,
-                    // then load; if it never arrives, fall back to a direct fetch.
-                    let tries = 0;
-                    const timer = setInterval(() => {
-                        if (typeof htmx !== 'undefined') {
-                            clearInterval(timer);
-                            load();
-                        } else if (++tries > 100) { // ~10s
-                            clearInterval(timer);
-                            contentEl.removeAttribute('data-loading');
-                            if (tab === 'overview' && typeof loadOverviewDirect === 'function') loadOverviewDirect();
-                            else if (tab === 'wifi' && typeof loadWifiDirect === 'function') loadWifiDirect();
-                            else if (tab === 'plugins' && typeof loadPluginsDirect === 'function') loadPluginsDirect();
-                            else if (tab === 'tools') {
-                                fetch('/v3/partials/tools')
-                                    .then(r => {
-                                        if (!r.ok) throw new Error(r.status + ' ' + r.statusText);
-                                        return r.text();
-                                    })
-                                    .then(html => {
-                                        contentEl.innerHTML = html;
-                                        contentEl.setAttribute('data-loaded', 'true');
-                                        if (window.Alpine) window.Alpine.initTree(contentEl);
-                                    })
-                                    .catch(err => {
-                                        console.error('Failed to load tools content:', err);
-                                        contentEl.innerHTML = '<div class="bg-red-50 border border-red-200 rounded-lg p-4"><p class="text-red-800">Failed to load Tools. Please refresh the page.</p></div>';
-                                    });
-                            }
-                        }
-                    }, 100);
-                },
-
-                async loadInstalledPlugins() {
-                    // If pluginManager exists (plugins.html is loaded), delegate to it
-                    if (window.pluginManager) {
-                        console.log('[FULL] Delegating plugin loading to pluginManager...');
-                        await window.pluginManager.loadInstalledPlugins();
-                        // pluginManager should set window.installedPlugins, so update our component
-                        if (window.installedPlugins && Array.isArray(window.installedPlugins)) {
-                            this.installedPlugins = window.installedPlugins;
-                            console.log('[FULL] Updated component plugins from window.installedPlugins:', this.installedPlugins.length);
-                        }
-                        this.updatePluginTabs();
-                        return;
-                    }
-
-                    // Otherwise, load plugins directly (fallback for when plugins.html isn't loaded)
-                    try {
-                        console.log('[FULL] Loading installed plugins directly...');
-                        const data = await getInstalledPluginsSafe();
-
-                        if (data.status === 'success') {
-                            this.installedPlugins = data.data.plugins || [];
-                            // Also update window.installedPlugins for consistency
-                            window.installedPlugins = this.installedPlugins;
-                            console.log(`[FULL] Loaded ${this.installedPlugins.length} plugins:`, this.installedPlugins.map(p => p.id));
-                            
-                            // Debug: Log enabled status for each plugin
-                            this.installedPlugins.forEach(plugin => {
-                                console.log(`[DEBUG Alpine] Plugin ${plugin.id}: enabled=${plugin.enabled} (type: ${typeof plugin.enabled})`);
-                            });
-                            
-                            this.updatePluginTabs();
-                        } else {
-                            console.error('[FULL] Failed to load plugins:', data.message);
-                        }
-                    } catch (error) {
-                        console.error('[FULL] Error loading installed plugins:', error);
-                    }
-                },
-
-                updatePluginTabs(retryCount = 0) {
-                    console.log('[FULL] updatePluginTabs called (retryCount:', retryCount, ')');
-                    const maxRetries = 5;
-
-                    // Debounce: Clear any pending update
-                    if (this._updatePluginTabsTimeout) {
-                        clearTimeout(this._updatePluginTabsTimeout);
-                    }
-                    
-                    // For first call or retries, execute immediately to ensure tabs appear quickly
-                    if (retryCount === 0) {
-                        // First call - execute immediately, then debounce subsequent calls
-                        this._doUpdatePluginTabs(retryCount);
-                    } else {
-                        // Retry - execute immediately
-                        this._doUpdatePluginTabs(retryCount);
-                    }
-                },
-                
-                _doUpdatePluginTabs(retryCount = 0) {
-                    const maxRetries = 5;
-
-                    // Use component's installedPlugins first (most up-to-date), then global, then empty array
-                    const pluginsToShow = (this.installedPlugins && this.installedPlugins.length > 0) 
-                        ? this.installedPlugins 
-                        : (window.installedPlugins || []);
-                    
-                    console.log('[FULL] _doUpdatePluginTabs called with:', pluginsToShow.length, 'plugins (attempt', retryCount + 1, ')');
-                    console.log('[FULL] Plugin sources:', {
-                        componentPlugins: this.installedPlugins?.length || 0,
-                        windowPlugins: window.installedPlugins?.length || 0,
-                        using: pluginsToShow.length > 0 ? (this.installedPlugins?.length > 0 ? 'component' : 'window') : 'none'
-                    });
-                    
-                    // Check if plugin list actually changed by comparing IDs
-                    const currentPluginIds = pluginsToShow.map(p => p.id).sort().join(',');
-                    const lastRenderedIds = (this._lastRenderedPluginIds || '');
-                    
-                    // Only skip if we have plugins and they match (don't skip if both are empty)
-                    if (currentPluginIds === lastRenderedIds && retryCount === 0 && currentPluginIds.length > 0) {
-                        // Plugin list hasn't changed, skip update
-                        console.log('[FULL] Plugin list unchanged, skipping update');
-                        return;
-                    }
-                    
-                    // If we have no plugins and haven't rendered anything yet, still try to render (might be first load)
-                    if (pluginsToShow.length === 0 && retryCount === 0) {
-                        console.log('[FULL] No plugins to show, but will retry in case they load...');
-                        if (retryCount < maxRetries) {
-                            setTimeout(() => {
-                                this._doUpdatePluginTabs(retryCount + 1);
-                            }, 500);
-                        }
-                        return;
-                    }
-                    
-                    // Store the current plugin IDs for next comparison
-                    this._lastRenderedPluginIds = currentPluginIds;
-
-                    const pluginTabsRow = document.getElementById('plugin-tabs-row');
-                    const pluginTabsNav = pluginTabsRow?.querySelector('nav');
-
-                    console.log('[FULL] Plugin tabs elements:', {
-                        pluginTabsRow: !!pluginTabsRow,
-                        pluginTabsNav: !!pluginTabsNav,
-                        bodyExists: !!document.body,
-                        installedPlugins: pluginsToShow.length,
-                        pluginIds: pluginsToShow.map(p => p.id)
-                    });
-
-                    if (!pluginTabsRow || !pluginTabsNav) {
-                        if (retryCount < maxRetries) {
-                            console.warn('[FULL] Plugin tabs container not found, retrying in 500ms... (attempt', retryCount + 1, 'of', maxRetries, ')');
-                            setTimeout(() => {
-                                this._doUpdatePluginTabs(retryCount + 1);
-                            }, 500);
-                        } else {
-                            console.error('[FULL] Plugin tabs container not found after maximum retries. Elements:', {
-                                pluginTabsRow: document.getElementById('plugin-tabs-row'),
-                                pluginTabsNav: document.getElementById('plugin-tabs-row')?.querySelector('nav'),
-                                allNavs: document.querySelectorAll('nav').length
-                            });
-                        }
-                        return;
-                    }
-
-                    console.log(`[FULL] Updating plugin tabs for ${pluginsToShow.length} plugins`);
-
-                    // Always show the plugin tabs row (Plugin Manager should always be available)
-                    console.log('[FULL] Ensuring plugin tabs row is visible');
-                    pluginTabsRow.style.display = 'block';
-
-                    // Clear existing plugin tabs (except the Plugin Manager tab)
-                    const existingTabs = pluginTabsNav.querySelectorAll('.plugin-tab');
-                    console.log(`[FULL] Removing ${existingTabs.length} existing plugin tabs`);
-                    existingTabs.forEach(tab => tab.remove());
-
-                    // Add tabs for each installed plugin
-                    console.log('[FULL] Adding tabs for plugins:', pluginsToShow.map(p => p.id));
-                    pluginsToShow.forEach(plugin => {
-                        const tabButton = document.createElement('button');
-                        tabButton.type = 'button';
-                        tabButton.setAttribute('data-plugin-id', plugin.id);
-                        tabButton.className = `plugin-tab nav-tab ${this.activeTab === plugin.id ? 'nav-tab-active' : ''}`;
-                        tabButton.onclick = () => {
-                            this.activeTab = plugin.id;
-                            if (typeof this.updatePluginTabStates === 'function') {
-                                this.updatePluginTabStates();
-                            }
-                        };
-                        // Build the <i class="..."> + label as DOM nodes so a
-                        // hostile plugin.icon (e.g. containing a quote) can't
-                        // break out of the attribute. escapeHtml only escapes
-                        // <, >, &, not ", so attribute-context interpolation
-                        // would be unsafe.
-                        const iconEl = document.createElement('i');
-                        iconEl.className = plugin.icon || 'fas fa-puzzle-piece';
-                        const labelNode = document.createTextNode(plugin.name || plugin.id);
-                        tabButton.replaceChildren(iconEl, labelNode);
-
-                        // Insert before the closing </nav> tag
-                        pluginTabsNav.appendChild(tabButton);
-                        console.log('[FULL] Added tab for plugin:', plugin.id);
-                    });
-
-                    console.log('[FULL] Plugin tabs update completed. Total tabs:', pluginTabsNav.querySelectorAll('.plugin-tab').length);
-                },
-
-                updatePluginTabStates() {
-                    // Update active state of all plugin tabs when activeTab changes
-                    const pluginTabsNav = document.getElementById('plugin-tabs-row')?.querySelector('nav');
-                    if (!pluginTabsNav) return;
-                    
-                    const pluginTabs = pluginTabsNav.querySelectorAll('.plugin-tab');
-                    pluginTabs.forEach(tab => {
-                        const pluginId = tab.getAttribute('data-plugin-id');
-                        if (pluginId && this.activeTab === pluginId) {
-                            tab.classList.add('nav-tab-active');
-                        } else {
-                            tab.classList.remove('nav-tab-active');
-                        }
-                    });
-                },
-
-                showNotification(message, type = 'info') {
-                    // Use global notification widget
-                    if (typeof window.showNotification === 'function') {
-                        window.showNotification(message, type);
-                    } else {
-                        console.log(`[${type.toUpperCase()}]`, message);
-                    }
-                },
-
-                escapeHtml(text) {
-                    const div = document.createElement('div');
-                    div.textContent = text;
-                    return div.innerHTML;
-                },
-
-                async refreshPlugins() {
-                    await this.loadInstalledPlugins();
-                    await this.searchPluginStore();
-                    this.showNotification('Plugin list refreshed', 'success');
-                },
-
-
-
-                async loadPluginConfig(pluginId) {
-                    console.log('Loading config for plugin:', pluginId);
-                    this.loading = true;
-
-                    try {
-                        // Load config, schema, and installed plugins (for web_ui_actions) in parallel
-                        // Use batched API if available for better performance
-                        let configData, schemaData, pluginsData;
-                        
-                        if (window.PluginAPI && window.PluginAPI.batch) {
-                            // PluginAPI.batch returns already-parsed JSON objects
-                            try {
-                                const results = await window.PluginAPI.batch([
-                                    {endpoint: `/plugins/config?plugin_id=${pluginId}`, method: 'GET'},
-                                    {endpoint: `/plugins/schema?plugin_id=${pluginId}`, method: 'GET'},
-                                    {endpoint: '/plugins/installed', method: 'GET'}
-                                ]);
-                                [configData, schemaData, pluginsData] = results;
-                            } catch (batchError) {
-                                console.error('Batch API request failed, falling back to individual requests:', batchError);
-                                // Fall back to individual requests
-                                const [configResponse, schemaResponse, pluginsResponse] = await Promise.all([
-                                    fetch(`/api/v3/plugins/config?plugin_id=${pluginId}`).then(r => r.json()).catch(e => ({ status: 'error', message: e.message })),
-                                    fetch(`/api/v3/plugins/schema?plugin_id=${pluginId}`).then(r => r.json()).catch(e => ({ status: 'error', message: e.message })),
-                                    fetch(`/api/v3/plugins/installed`).then(r => r.json()).catch(e => ({ status: 'error', message: e.message }))
-                                ]);
-                                configData = configResponse;
-                                schemaData = schemaResponse;
-                                pluginsData = pluginsResponse;
-                            }
-                        } else {
-                            // Direct fetch returns Response objects that need parsing
-                            const [configResponse, schemaResponse, pluginsResponse] = await Promise.all([
-                                fetch(`/api/v3/plugins/config?plugin_id=${pluginId}`).then(r => r.json()).catch(e => ({ status: 'error', message: e.message })),
-                                fetch(`/api/v3/plugins/schema?plugin_id=${pluginId}`).then(r => r.json()).catch(e => ({ status: 'error', message: e.message })),
-                                fetch(`/api/v3/plugins/installed`).then(r => r.json()).catch(e => ({ status: 'error', message: e.message }))
-                            ]);
-                            configData = configResponse;
-                            schemaData = schemaResponse;
-                            pluginsData = pluginsResponse;
-                        }
-
-                        if (configData && configData.status === 'success') {
-                            this.config = configData.data;
-                        } else {
-                            console.warn('Config API returned non-success status:', configData);
-                            // Set defaults if config failed to load
-                            this.config = { enabled: true, display_duration: 30 };
-                        }
-
-                        if (schemaData && schemaData.status === 'success') {
-                            this.schema = schemaData.data.schema || {};
-                        } else {
-                            console.warn('Schema API returned non-success status:', schemaData);
-                            // Set empty schema as fallback
-                            this.schema = {};
-                        }
-
-                        // Extract web_ui_actions from installed plugins and update plugin data
-                        if (pluginsData && pluginsData.status === 'success' && pluginsData.data && pluginsData.data.plugins) {
-                            // Update window.installedPlugins with fresh data (includes commit info)
-                            // The setter will check if data actually changed before updating tabs
-                            window.installedPlugins = pluginsData.data.plugins;
-                            // Update Alpine.js app data
-                            this.installedPlugins = pluginsData.data.plugins;
-                            
-                            const pluginInfo = pluginsData.data.plugins.find(p => p.id === pluginId);
-                            this.webUiActions = pluginInfo ? (pluginInfo.web_ui_actions || []) : [];
-                            console.log('[DEBUG] Loaded web_ui_actions for', pluginId, ':', this.webUiActions.length, 'actions');
-                            console.log('[DEBUG] Updated plugin data with commit info:', pluginInfo ? {
-                                last_commit: pluginInfo.last_commit,
-                                branch: pluginInfo.branch,
-                                last_updated: pluginInfo.last_updated
-                            } : 'plugin not found');
-                        } else {
-                            console.warn('Plugins API returned non-success status:', pluginsData);
-                            this.webUiActions = [];
-                        }
-
-                        console.log('Loaded config, schema, and actions for', pluginId);
-                    } catch (error) {
-                        console.error('Error loading plugin config:', error);
-                        this.config = { enabled: true, display_duration: 30 };
-                        this.schema = {};
-                        this.webUiActions = [];
-                    } finally {
-                        this.loading = false;
-                    }
-                },
-
-                generateConfigForm(pluginId, config, schema, webUiActions = []) {
-                    // Safety check - if schema/config not ready, return empty
-                    if (!pluginId || !config) {
-                        return '<div class="text-gray-500">Loading configuration...</div>';
-                    }
-                    
-                    // Only log once per plugin to avoid spam (Alpine.js may call this multiple times during rendering)
-                    if (!this._configFormLogged || this._configFormLogged !== pluginId) {
-                        console.log('[DEBUG] generateConfigForm called for', pluginId, 'with', webUiActions?.length || 0, 'actions');
-                        // Debug: Check if image_config.images has x-widget in schema
-                        if (schema && schema.properties && schema.properties.image_config) {
-                            const imgConfig = schema.properties.image_config;
-                            if (imgConfig.properties && imgConfig.properties.images) {
-                                const imagesProp = imgConfig.properties.images;
-                                console.log('[DEBUG] Schema check - image_config.images:', {
-                                    type: imagesProp.type,
-                                    'x-widget': imagesProp['x-widget'],
-                                    'has x-widget': 'x-widget' in imagesProp,
-                                    keys: Object.keys(imagesProp)
-                                });
-                            }
-                        }
-                        this._configFormLogged = pluginId;
-                    }
-                    if (!schema || !schema.properties) {
-                        return this.generateSimpleConfigForm(config, webUiActions, pluginId);
-                    }
-
-                    // Helper function to get schema property by full key path
-                    const getSchemaProperty = (schemaObj, keyPath) => {
-                        if (!schemaObj || !schemaObj.properties) return null;
-                        const keys = keyPath.split('.');
-                        let current = schemaObj.properties;
-                        for (let i = 0; i < keys.length; i++) {
-                            const k = keys[i];
-                            if (!current || !current[k]) {
-                                return null;
-                            }
-                            
-                            const prop = current[k];
-                            // If this is the last key, return the property
-                            if (i === keys.length - 1) {
-                                return prop;
-                            }
-                            
-                            // If this property has nested properties, navigate deeper
-                            if (prop && typeof prop === 'object' && prop.properties) {
-                                current = prop.properties;
-                            } else {
-                                // Can't navigate deeper
-                                return null;
-                            }
-                        }
-                        return null;
-                    };
-                    
-                    const generateFieldHtml = (key, prop, value, prefix = '') => {
-                        const fullKey = prefix ? `${prefix}.${key}` : key;
-                        const label = prop.title || key.replace(/_/g, ' ').replace(/\b\w/g, l => l.toUpperCase());
-                        const description = prop.description || '';
-                        let html = '';
-                        
-                        // Debug: Log property structure for arrays to help diagnose file-upload widget issues
-                        if (prop.type === 'array') {
-                            // Also check schema directly as fallback
-                            const schemaProp = getSchemaProperty(schema, fullKey);
-                            const xWidgetFromSchema = schemaProp ? (schemaProp['x-widget'] || schemaProp['x_widget']) : null;
-                            
-                            console.log('[DEBUG generateFieldHtml] Array property:', fullKey, {
-                                'prop.x-widget': prop['x-widget'],
-                                'prop.x_widget': prop['x_widget'],
-                                'schema.x-widget': xWidgetFromSchema,
-                                'hasOwnProperty(x-widget)': prop.hasOwnProperty('x-widget'),
-                                'x-widget in prop': 'x-widget' in prop,
-                                'all prop keys': Object.keys(prop),
-                                'schemaProp keys': schemaProp ? Object.keys(schemaProp) : 'null'
-                            });
-                        }
-
-                        // Handle nested objects
-                        if (prop.type === 'object' && prop.properties) {
-                            const sectionId = `section-${fullKey.replace(/\./g, '-')}`;
-                            const nestedConfig = value || {};
-                            const sectionLabel = prop.title || key.replace(/_/g, ' ').replace(/\b\w/g, l => l.toUpperCase());
-                            // Calculate nesting depth for better spacing
-                            const nestingDepth = (fullKey.match(/\./g) || []).length;
-                            const marginClass = nestingDepth > 1 ? 'mb-6' : 'mb-4';
-                            
-                            html += `
-                                <div class="nested-section border border-gray-300 rounded-lg ${marginClass}">
-                                    <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"
-                                            onclick="toggleNestedSection('${sectionId}', event); return false;">
-                                        <div class="flex-1">
-                                            <h4 class="font-semibold text-gray-900">${sectionLabel}</h4>
-                                            ${description ? `<p class="text-sm text-gray-600 mt-1">${description}</p>` : ''}
-                                        </div>
-                                        <i id="${sectionId}-icon" class="fas fa-chevron-right text-gray-500 transition-transform"></i>
-                                    </button>
-                                    <div id="${sectionId}" class="nested-content collapsed bg-gray-50 px-4 py-4 space-y-3" style="max-height: 0; display: none;">
-                            `;
-                            
-                            // Recursively generate fields for nested properties
-                            // Get ordered properties if x-propertyOrder is defined
-                            let nestedPropertyEntries = Object.entries(prop.properties);
-                            if (prop['x-propertyOrder'] && Array.isArray(prop['x-propertyOrder'])) {
-                                const order = prop['x-propertyOrder'];
-                                const orderedEntries = [];
-                                const unorderedEntries = [];
-                                
-                                // Separate ordered and unordered properties
-                                nestedPropertyEntries.forEach(([nestedKey, nestedProp]) => {
-                                    const index = order.indexOf(nestedKey);
-                                    if (index !== -1) {
-                                        orderedEntries[index] = [nestedKey, nestedProp];
-                                    } else {
-                                        unorderedEntries.push([nestedKey, nestedProp]);
-                                    }
-                                });
-                                
-                                // Combine ordered entries (filter out undefined from sparse array) with unordered entries
-                                nestedPropertyEntries = orderedEntries.filter(entry => entry !== undefined).concat(unorderedEntries);
-                            }
-                            
-                            nestedPropertyEntries.forEach(([nestedKey, nestedProp]) => {
-                                // Use config value if it exists and is not null (including false), otherwise use schema default
-                                // Check if key exists in config and value is not null/undefined
-                                const hasValue = nestedKey in nestedConfig && nestedConfig[nestedKey] !== null && nestedConfig[nestedKey] !== undefined;
-                                // For nested objects, if the value is an empty object, still use it (don't fall back to default)
-                                const isNestedObject = nestedProp.type === 'object' && nestedProp.properties;
-                                const nestedValue = hasValue ? nestedConfig[nestedKey] : 
-                                    (nestedProp.default !== undefined ? nestedProp.default : 
-                                     (isNestedObject ? {} : (nestedProp.type === 'array' ? [] : (nestedProp.type === 'boolean' ? false : ''))));
-                                
-                                // Debug logging for file-upload widgets
-                                if (nestedProp.type === 'array' && (nestedProp['x-widget'] === 'file-upload' || nestedProp['x_widget'] === 'file-upload')) {
-                                    console.log('[DEBUG] Found file-upload widget in nested property:', nestedKey, 'fullKey:', fullKey + '.' + nestedKey, 'prop:', nestedProp);
-                                }
-                                
-                                html += generateFieldHtml(nestedKey, nestedProp, nestedValue, fullKey);
-                            });
-                            
-                            html += `
-                                    </div>
-                                </div>
-                            `;
-                            
-                            // Add extra spacing after nested sections to prevent overlap with next section
-                            if (nestingDepth > 0) {
-                                html += `<div class="mb-2"></div>`;
-                            }
-                            
-                            return html;
-                        }
-
-                        // Regular (non-nested) field
-                        html += `<div class="form-group">`;
-                        html += `<label class="block text-sm font-medium text-gray-700 mb-1">${label}</label>`;
-
-                        if (description) {
-                            html += `<p class="text-sm text-gray-600 mb-2">${description}</p>`;
-                        }
-
-                        // Generate appropriate input based on type
-                        if (prop.type === 'boolean') {
-                            html += `<label class="flex items-center">`;
-                            html += `<input type="checkbox" name="${fullKey}" ${value ? 'checked' : ''} class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded">`;
-                            html += `<span class="ml-2 text-sm">Enabled</span>`;
-                            html += `</label>`;
-                        } else if (prop.type === 'number' || prop.type === 'integer' || 
-                                   (Array.isArray(prop.type) && (prop.type.includes('number') || prop.type.includes('integer')))) {
-                            // Handle union types like ["integer", "null"]
-                            const isUnionType = Array.isArray(prop.type);
-                            const allowsNull = isUnionType && prop.type.includes('null');
-                            const isInteger = prop.type === 'integer' || (isUnionType && prop.type.includes('integer'));
-                            const isNumber = prop.type === 'number' || (isUnionType && prop.type.includes('number'));
-                            const min = prop.minimum !== undefined ? `min="${prop.minimum}"` : '';
-                            const max = prop.maximum !== undefined ? `max="${prop.maximum}"` : '';
-                            const step = isInteger ? 'step="1"' : 'step="any"';
-                            
-                            // For union types with null, don't show default if value is null (leave empty)
-                            // This allows users to explicitly set null by leaving it empty
-                            let fieldValue = '';
-                            if (value !== undefined && value !== null) {
-                                fieldValue = value;
-                            } else if (!allowsNull && prop.default !== undefined) {
-                                // Only use default if null is not allowed
-                                fieldValue = prop.default;
-                            }
-                            
-                            // Ensure value respects min/max constraints
-                            if (fieldValue !== '' && fieldValue !== undefined && fieldValue !== null) {
-                                const numValue = typeof fieldValue === 'string' ? parseFloat(fieldValue) : fieldValue;
-                                if (!isNaN(numValue)) {
-                                    // Clamp value to min/max if constraints exist
-                                    if (prop.minimum !== undefined && numValue < prop.minimum) {
-                                        fieldValue = prop.minimum;
-                                    } else if (prop.maximum !== undefined && numValue > prop.maximum) {
-                                        fieldValue = prop.maximum;
-                                    } else {
-                                        fieldValue = numValue;
-                                    }
-                                }
-                            }
-                            
-                            // Add placeholder/help text for null-able fields
-                            const placeholder = allowsNull ? 'Leave empty to use current time (random)' : '';
-                            const helpText = allowsNull && description && description.includes('null') ? 
-                                `<p class="text-xs text-gray-500 mt-1">${description}</p>` : '';
-                            
-                            html += `<input type="number" name="${fullKey}" value="${fieldValue}" ${min} ${max} ${step} placeholder="${placeholder}" class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm">`;
-                            if (helpText) {
-                                html += helpText;
-                            }
-                        } else if (prop.type === 'array') {
-                            // AGGRESSIVE file upload widget detection
-                            // For 'images' field in static-image plugin, always check schema directly
-                            let isFileUpload = false;
-                            let uploadConfig = {};
-                            
-                            // Direct check: if this is the 'images' field and schema has it with x-widget
-                            if (fullKey === 'images' && schema && schema.properties && schema.properties.images) {
-                                const imagesSchema = schema.properties.images;
-                                if (imagesSchema['x-widget'] === 'file-upload' || imagesSchema['x_widget'] === 'file-upload') {
-                                    isFileUpload = true;
-                                    uploadConfig = imagesSchema['x-upload-config'] || imagesSchema['x_upload_config'] || {};
-                                    console.log('[DEBUG] ✅ Direct detection: images field has file-upload widget', uploadConfig);
-                                }
-                            }
-                            
-                            // Fallback: check prop object (should have x-widget if schema loaded correctly)
-                            if (!isFileUpload) {
-                                const xWidgetFromProp = prop['x-widget'] || prop['x_widget'] || prop.xWidget;
-                                if (xWidgetFromProp === 'file-upload') {
-                                    isFileUpload = true;
-                                    uploadConfig = prop['x-upload-config'] || prop['x_upload_config'] || {};
-                                    console.log('[DEBUG] ✅ Detection via prop object');
-                                }
-                            }
-                            
-                            // Fallback: schema property lookup
-                            if (!isFileUpload) {
-                                let schemaProp = getSchemaProperty(schema, fullKey);
-                                if (!schemaProp && fullKey === 'images' && schema && schema.properties && schema.properties.images) {
-                                    schemaProp = schema.properties.images;
-                                }
-                                const xWidgetFromSchema = schemaProp ? (schemaProp['x-widget'] || schemaProp['x_widget']) : null;
-                                if (xWidgetFromSchema === 'file-upload') {
-                                    isFileUpload = true;
-                                    uploadConfig = schemaProp['x-upload-config'] || schemaProp['x_upload_config'] || {};
-                                    console.log('[DEBUG] ✅ Detection via schema lookup');
-                                }
-                            }
-                            
-                            // Debug logging for ALL array fields to diagnose
-                            console.log('[DEBUG] Array field check:', fullKey, {
-                                'isFileUpload': isFileUpload,
-                                'prop keys': Object.keys(prop),
-                                'prop.x-widget': prop['x-widget'],
-                                'schema.properties.images exists': !!(schema && schema.properties && schema.properties.images),
-                                'schema.properties.images.x-widget': (schema && schema.properties && schema.properties.images) ? schema.properties.images['x-widget'] : null,
-                                'uploadConfig': uploadConfig
-                            });
-                            
-                            if (isFileUpload) {
-                                console.log('[DEBUG] ✅ Rendering file-upload widget for', fullKey, 'with config:', uploadConfig);
-                                // Use the file upload widget from plugins.html
-                                // We'll need to call a function that exists in the global scope
-                                const maxFiles = uploadConfig.max_files || 10;
-                                const allowedTypes = uploadConfig.allowed_types || ['image/png', 'image/jpeg', 'image/bmp', 'image/gif'];
-                                const maxSizeMB = uploadConfig.max_size_mb || 5;
-                                
-                                const currentImages = Array.isArray(value) ? value : [];
-                                const fieldId = fullKey.replace(/\./g, '_');
-                                const safePluginId = (uploadConfig.plugin_id || pluginId || 'static-image').toString().replace(/[^a-zA-Z0-9_-]/g, '_');
-                                
-                                html += `
-                                    <div id="${fieldId}_upload_widget" class="mt-1">
-                                        <!-- File Upload Drop Zone -->
-                                        <div id="${fieldId}_drop_zone" 
-                                             class="border-2 border-dashed border-gray-300 rounded-lg p-6 text-center hover:border-blue-400 transition-colors cursor-pointer"
-                                             ondrop="window.handleFileDrop(event, this.dataset.fieldId)" 
-                                             ondragover="event.preventDefault()" 
-                                             data-field-id="${fieldId}"
-                                             onclick="document.getElementById(this.dataset.fieldId + '_file_input').click()">
-                                            <input type="file" 
-                                                   id="${fieldId}_file_input" 
-                                                   multiple 
-                                                   accept="${allowedTypes.join(',')}"
-                                                   style="display: none;"
-                                                   data-field-id="${fieldId}"
-                                                   onchange="window.handleFileSelect(event, this.dataset.fieldId)">
-                                            <i class="fas fa-cloud-upload-alt text-3xl text-gray-400 mb-2"></i>
-                                            <p class="text-sm text-gray-600">Drag and drop images here or click to browse</p>
-                                            <p class="text-xs text-gray-500 mt-1">Max ${maxFiles} files, ${maxSizeMB}MB each (PNG, JPG, GIF, BMP)</p>
-                                        </div>
-                                        
-                                        <!-- Uploaded Images List -->
-                                        <div id="${fieldId}_image_list" class="mt-4 space-y-2">
-                                            ${currentImages.map((img, idx) => {
-                                                const imgSchedule = img.schedule || {};
-                                                const hasSchedule = imgSchedule.enabled && imgSchedule.mode && imgSchedule.mode !== 'always';
-                                                let scheduleSummary = 'Always shown';
-                                                if (hasSchedule && window.getScheduleSummary) {
-                                                    try {
-                                                        scheduleSummary = window.getScheduleSummary(imgSchedule) || 'Scheduled';
-                                                    } catch (e) {
-                                                        scheduleSummary = 'Scheduled';
-                                                    }
-                                                } else if (hasSchedule) {
-                                                    scheduleSummary = 'Scheduled';
-                                                }
-                                                // Escape the summary for HTML
-                                                scheduleSummary = String(scheduleSummary).replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;');
-                                                
-                                                return `
-                                                <div id="img_${(img.id || idx).toString().replace(/[^a-zA-Z0-9_-]/g, '_')}" class="bg-gray-50 p-3 rounded-lg border border-gray-200">
-                                                    <div class="flex items-center justify-between mb-2">
-                                                        <div class="flex items-center space-x-3 flex-1">
-                                                            <img src="/${(img.path || '').replace(/&/g, '&amp;').replace(/"/g, '&quot;')}" 
-                                                                 alt="${(img.filename || '').replace(/"/g, '&quot;')}" 
-                                                                 class="w-16 h-16 object-cover rounded"
-                                                                 onerror="this.style.display='none'; this.nextElementSibling.style.display='block';">
-                                                            <div style="display:none;" class="w-16 h-16 bg-gray-200 rounded flex items-center justify-center">
-                                                                <i class="fas fa-image text-gray-400"></i>
-                                                            </div>
-                                                            <div class="flex-1 min-w-0">
-                                                                <p class="text-sm font-medium text-gray-900 truncate">${String(img.original_filename || img.filename || 'Image').replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;')}</p>
-                                                                <p class="text-xs text-gray-500">${img.size ? (Math.round(img.size / 1024) + ' KB') : ''} • ${(img.uploaded_at || '').replace(/&/g, '&amp;')}</p>
-                                                                <p class="text-xs text-blue-600 mt-1">
-                                                                    <i class="fas fa-clock mr-1"></i>${scheduleSummary}
-                                                                </p>
-                                                            </div>
-                                                        </div>
-                                                        <div class="flex items-center space-x-2 ml-4">
-                                                            <button type="button" 
-                                                                    data-field-id="${fieldId}"
-                                                                    data-image-id="${img.id || ''}"
-                                                                    data-image-idx="${idx}"
-                                                                    onclick="window.openImageSchedule(this.dataset.fieldId, this.dataset.imageId || null, parseInt(this.dataset.imageIdx))"
-                                                                    class="text-blue-600 hover:text-blue-800 p-2" 
-                                                                    title="Schedule this image">
-                                                                <i class="fas fa-calendar-alt"></i>
-                                                            </button>
-                                                            <button type="button" 
-                                                                    data-field-id="${fieldId}"
-                                                                    data-image-id="${img.id || ''}"
-                                                                    data-plugin-id="${safePluginId}"
-                                                                    onclick="window.deleteUploadedImage(this.dataset.fieldId, this.dataset.imageId, this.dataset.pluginId)"
-                                                                    class="text-red-600 hover:text-red-800 p-2"
-                                                                    title="Delete image">
-                                                                <i class="fas fa-trash"></i>
-                                                            </button>
-                                                        </div>
-                                                    </div>
-                                                    <!-- Schedule widget will be inserted here when opened -->
-                                                    <div id="schedule_${(img.id || idx).toString().replace(/[^a-zA-Z0-9_-]/g, '_')}" class="hidden mt-3 pt-3 border-t border-gray-300"></div>
-                                                </div>
-                                                `;
-                                            }).join('')}
-                                        </div>
-                                        
-                                        <!-- Hidden input to store image data -->
-                                        <input type="hidden" id="${fieldId}_images_data" name="${fullKey}" value="${JSON.stringify(currentImages).replace(/&/g, '&amp;').replace(/"/g, '&quot;').replace(/'/g, '&#39;')}">
-                                    </div>
-                                `;
-                            } else {
-                                // Regular array input
-                                const arrayValue = Array.isArray(value) ? value.join(', ') : '';
-                                html += `<input type="text" name="${fullKey}" value="${arrayValue}" placeholder="Enter values separated by commas" class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm">`;
-                                html += `<p class="text-sm text-gray-600 mt-1">Enter values separated by commas</p>`;
-                            }
-                        } else if (prop.enum) {
-                            html += `<select name="${fullKey}" class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm">`;
-                            prop.enum.forEach(option => {
-                                const selected = value === option ? 'selected' : '';
-                                html += `<option value="${option}" ${selected}>${option}</option>`;
-                            });
-                            html += `</select>`;
-                        } else if (prop.type === 'string' && prop['x-widget'] === 'file-upload') {
-                            // File upload widget for string fields (e.g., credentials.json)
-                            const uploadConfig = prop['x-upload-config'] || {};
-                            const uploadEndpoint = uploadConfig.upload_endpoint || '/api/v3/plugins/assets/upload';
-                            const maxSizeMB = uploadConfig.max_size_mb || 1;
-                            const allowedExtensions = uploadConfig.allowed_extensions || ['.json'];
-                            const targetFilename = uploadConfig.target_filename || 'file.json';
-                            const fieldId = fullKey.replace(/\./g, '_');
-                            const hasFile = value && value !== '';
-                            
-                            html += `
-                                <div id="${fieldId}_upload_widget" class="mt-1">
-                                    <div id="${fieldId}_file_upload" 
-                                         class="border-2 border-dashed border-gray-300 rounded-lg p-4 text-center hover:border-blue-400 transition-colors cursor-pointer"
-                                         onclick="document.getElementById('${fieldId}_file_input').click()">
-                                        <input type="file" 
-                                               id="${fieldId}_file_input" 
-                                               accept="${allowedExtensions.join(',')}"
-                                               style="display: none;"
-                                               data-field-id="${fieldId}"
-                                               data-upload-endpoint="${uploadEndpoint}"
-                                               data-target-filename="${targetFilename}"
-                                               onchange="window.handleCredentialsUpload(event, this.dataset.fieldId, this.dataset.uploadEndpoint, this.dataset.targetFilename)">
-                                        <i class="fas fa-file-upload text-2xl text-gray-400 mb-2"></i>
-                                        <p class="text-sm text-gray-600" id="${fieldId}_status">
-                                            ${hasFile ? `Current file: ${value}` : 'Click to upload ' + targetFilename}
-                                        </p>
-                                        <p class="text-xs text-gray-500 mt-1">Max ${maxSizeMB}MB (${allowedExtensions.join(', ')})</p>
-                                    </div>
-                                    <input type="hidden" name="${fullKey}" value="${value || ''}" id="${fieldId}_hidden">
-                                </div>
-                            `;
-                        } else {
-                            // Default to text input
-                            const maxLength = prop.maxLength || '';
-                            const maxLengthAttr = maxLength ? `maxlength="${maxLength}"` : '';
-                            html += `<input type="text" name="${fullKey}" value="${value !== undefined ? value : ''}" ${maxLengthAttr} class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm">`;
-                        }
-
-                        html += `</div>`;
-                        return html;
-                    };
-
-                    let formHtml = '';
-                    // Get ordered properties if x-propertyOrder is defined
-                    let propertyEntries = Object.entries(schema.properties);
-                    if (schema['x-propertyOrder'] && Array.isArray(schema['x-propertyOrder'])) {
-                        const order = schema['x-propertyOrder'];
-                        const orderedEntries = [];
-                        const unorderedEntries = [];
-                        
-                        // Separate ordered and unordered properties
-                        propertyEntries.forEach(([key, prop]) => {
-                            const index = order.indexOf(key);
-                            if (index !== -1) {
-                                orderedEntries[index] = [key, prop];
-                            } else {
-                                unorderedEntries.push([key, prop]);
-                            }
-                        });
-                        
-                        // Combine ordered entries (filter out undefined from sparse array) with unordered entries
-                        propertyEntries = orderedEntries.filter(entry => entry !== undefined).concat(unorderedEntries);
-                    }
-                    
-                    propertyEntries.forEach(([key, prop]) => {
-                        // Skip the 'enabled' property - it's managed separately via the header toggle
-                        if (key === 'enabled') return;
-                        // Use config value if key exists and is not null/undefined, otherwise use schema default
-                        // Check if key exists in config and value is not null/undefined
-                        const hasValue = key in config && config[key] !== null && config[key] !== undefined;
-                        // For nested objects, if the value is an empty object, still use it (don't fall back to default)
-                        const isNestedObject = prop.type === 'object' && prop.properties;
-                        const value = hasValue ? config[key] : 
-                            (prop.default !== undefined ? prop.default : 
-                             (isNestedObject ? {} : (prop.type === 'array' ? [] : (prop.type === 'boolean' ? false : ''))));
-                        formHtml += generateFieldHtml(key, prop, value);
-                    });
-
-                    // Add web UI actions section if plugin defines any
-                    if (webUiActions && webUiActions.length > 0) {
-                        console.log('[DEBUG] Rendering', webUiActions.length, 'actions in tab form');
-                        
-                        // Map color names to explicit Tailwind classes
-                        const colorMap = {
-                            'blue': { bg: 'bg-blue-50', border: 'border-blue-200', text: 'text-blue-900', textLight: 'text-blue-700', btn: 'bg-blue-600 hover:bg-blue-700' },
-                            'green': { bg: 'bg-green-50', border: 'border-green-200', text: 'text-green-900', textLight: 'text-green-700', btn: 'bg-green-600 hover:bg-green-700' },
-                            'red': { bg: 'bg-red-50', border: 'border-red-200', text: 'text-red-900', textLight: 'text-red-700', btn: 'bg-red-600 hover:bg-red-700' },
-                            'yellow': { bg: 'bg-yellow-50', border: 'border-yellow-200', text: 'text-yellow-900', textLight: 'text-yellow-700', btn: 'bg-yellow-600 hover:bg-yellow-700' },
-                            'purple': { bg: 'bg-purple-50', border: 'border-purple-200', text: 'text-purple-900', textLight: 'text-purple-700', btn: 'bg-purple-600 hover:bg-purple-700' }
-                        };
-                        
-                        formHtml += `
-                            <div class="border-t border-gray-200 pt-4 mt-4">
-                                <h3 class="text-lg font-semibold text-gray-900 mb-3">Actions</h3>
-                                <p class="text-sm text-gray-600 mb-4">${webUiActions[0].section_description || 'Perform actions for this plugin'}</p>
-                                
-                                <div class="space-y-3">
-                        `;
-                        
-                        webUiActions.forEach((action, index) => {
-                            const actionId = `action-${action.id}-${index}`;
-                            const statusId = `action-status-${action.id}-${index}`;
-                            const bgColor = action.color || 'blue';
-                            const colors = colorMap[bgColor] || colorMap['blue'];
-                            // Ensure pluginId is valid for template interpolation
-                            const safePluginId = pluginId || '';
-                            
-                            formHtml += `
-                                    <div class="${colors.bg} border ${colors.border} rounded-lg p-4">
-                                        <div class="flex items-center justify-between">
-                                            <div class="flex-1">
-                                                <h4 class="font-medium ${colors.text} mb-1">
-                                                    ${action.icon ? `<i class="${action.icon} mr-2"></i>` : ''}${action.title || action.id}
-                                                </h4>
-                                                <p class="text-sm ${colors.textLight}">${action.description || ''}</p>
-                                            </div>
-                                            <button type="button" 
-                                                    id="${actionId}"
-                                                    onclick="executePluginAction('${action.id}', ${index}, '${safePluginId}')" 
-                                                    data-plugin-id="${safePluginId}"
-                                                    data-action-id="${action.id}"
-                                                    class="btn ${colors.btn} text-white px-4 py-2 rounded-md whitespace-nowrap">
-                                                ${action.icon ? `<i class="${action.icon} mr-2"></i>` : ''}${action.button_text || action.title || 'Execute'}
-                                            </button>
-                                        </div>
-                                        <div id="${statusId}" class="mt-3 hidden"></div>
-                                    </div>
-                            `;
-                        });
-                        
-                        formHtml += `
-                                </div>
-                            </div>
-                        `;
-                    }
-
-                    return formHtml;
-                },
-
-                generateSimpleConfigForm(config, webUiActions = [], pluginId = '') {
-                    let actionsHtml = '';
-                    if (webUiActions && webUiActions.length > 0) {
-                        const colorMap = {
-                            'blue': { bg: 'bg-blue-50', border: 'border-blue-200', text: 'text-blue-900', textLight: 'text-blue-700', btn: 'bg-blue-600 hover:bg-blue-700' },
-                            'green': { bg: 'bg-green-50', border: 'border-green-200', text: 'text-green-900', textLight: 'text-green-700', btn: 'bg-green-600 hover:bg-green-700' },
-                            'red': { bg: 'bg-red-50', border: 'border-red-200', text: 'text-red-900', textLight: 'text-red-700', btn: 'bg-red-600 hover:bg-red-700' },
-                            'yellow': { bg: 'bg-yellow-50', border: 'border-yellow-200', text: 'text-yellow-900', textLight: 'text-yellow-700', btn: 'bg-yellow-600 hover:bg-yellow-700' },
-                            'purple': { bg: 'bg-purple-50', border: 'border-purple-200', text: 'text-purple-900', textLight: 'text-purple-700', btn: 'bg-purple-600 hover:bg-purple-700' }
-                        };
-                        
-                        actionsHtml = `
-                            <div class="border-t border-gray-200 pt-4 mt-4">
-                                <h3 class="text-lg font-semibold text-gray-900 mb-3">Actions</h3>
-                                <div class="space-y-3">
-                        `;
-                        webUiActions.forEach((action, index) => {
-                            const actionId = `action-${action.id}-${index}`;
-                            const statusId = `action-status-${action.id}-${index}`;
-                            const bgColor = action.color || 'blue';
-                            const colors = colorMap[bgColor] || colorMap['blue'];
-                            // Ensure pluginId is valid for template interpolation
-                            const safePluginId = pluginId || '';
-                            actionsHtml += `
-                                    <div class="${colors.bg} border ${colors.border} rounded-lg p-4">
-                                        <div class="flex items-center justify-between">
-                                            <div class="flex-1">
-                                                <h4 class="font-medium ${colors.text} mb-1">
-                                                    ${action.icon ? `<i class="${action.icon} mr-2"></i>` : ''}${action.title || action.id}
-                                                </h4>
-                                                <p class="text-sm ${colors.textLight}">${action.description || ''}</p>
-                                            </div>
-                                            <button type="button" 
-                                                    id="${actionId}"
-                                                    onclick="executePluginAction('${action.id}', ${index}, '${safePluginId}')" 
-                                                    data-plugin-id="${safePluginId}"
-                                                    data-action-id="${action.id}"
-                                                    class="btn ${colors.btn} text-white px-4 py-2 rounded-md">
-                                                ${action.icon ? `<i class="${action.icon} mr-2"></i>` : ''}${action.button_text || action.title || 'Execute'}
-                                            </button>
-                                        </div>
-                                        <div id="${statusId}" class="mt-3 hidden"></div>
-                                    </div>
-                            `;
-                        });
-                        actionsHtml += `
-                                </div>
-                            </div>
-                        `;
-                    }
-                    
-                    return `
-                        <div class="form-group">
-                            <label class="block text-sm font-medium text-gray-700 mb-1">Display Duration (seconds)</label>
-                            <input type="number" name="display_duration" value="${Math.max(5, Math.min(300, config.display_duration || 30))}" min="5" max="300" class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm">
-                            <p class="text-sm text-gray-600 mt-1">How long to show this plugin's content</p>
-                        </div>
-                        ${actionsHtml}
-                    `;
-                },
-
-                // Helper function to get schema property type for a field path
-                getSchemaPropertyType(schema, path) {
-                    if (!schema || !schema.properties) return null;
-                    
-                    const parts = path.split('.');
-                    let current = schema.properties;
-                    
-                    for (let i = 0; i < parts.length; i++) {
-                        const part = parts[i];
-                        if (current && current[part]) {
-                            if (i === parts.length - 1) {
-                                return current[part];
-                            } else if (current[part].properties) {
-                                current = current[part].properties;
-                            } else {
-                                return null;
-                            }
-                        } else {
-                            return null;
-                        }
-                    }
-                    return null;
-                },
-
-                // Helper function to escape CSS selector special characters
-                escapeCssSelector(str) {
-                    if (typeof str !== 'string') {
-                        str = String(str);
-                    }
-                    // Use CSS.escape() when available (handles unicode, leading digits, and edge cases)
-                    if (typeof CSS !== 'undefined' && CSS.escape) {
-                        return CSS.escape(str);
-                    }
-                    // Fallback to regex-based escaping for older browsers
-                    // First, handle leading digits and whitespace (must be done before regex)
-                    let escaped = str;
-                    let hasLeadingHexEscape = false;
-                    if (escaped.length > 0) {
-                        const firstChar = escaped[0];
-                        const firstCode = firstChar.charCodeAt(0);
-                        
-                        // Escape leading digit (0-9: U+0030-U+0039)
-                        if (firstCode >= 0x30 && firstCode <= 0x39) {
-                            const hex = firstCode.toString(16).toUpperCase().padStart(4, '0');
-                            escaped = '\\' + hex + ' ' + escaped.slice(1);
-                            hasLeadingHexEscape = true;
-                        }
-                        // Escape leading whitespace (space: U+0020, tab: U+0009, etc.)
-                        else if (/\s/.test(firstChar)) {
-                            const hex = firstCode.toString(16).toUpperCase().padStart(4, '0');
-                            escaped = '\\' + hex + ' ' + escaped.slice(1);
-                            hasLeadingHexEscape = true;
-                        }
-                    }
-                    
-                    // Escape special characters
-                    escaped = escaped.replace(/[!"#$%&'()*+,.\/:;<=>?@[\\\]^`{|}~]/g, '\\$&');
-                    
-                    // Escape internal spaces (replace spaces with \ ), but preserve space in hex escape
-                    if (hasLeadingHexEscape) {
-                        // Skip the first 6 characters (e.g., "\0030 ") when replacing spaces
-                        escaped = escaped.slice(0, 6) + escaped.slice(6).replace(/ /g, '\\ ');
-                    } else {
-                        escaped = escaped.replace(/ /g, '\\ ');
-                    }
-                    
-                    return escaped;
-                },
-
-                async savePluginConfig(pluginId, event) {
-                    try {
-                        // Get the form element for this plugin
-                        const form = event ? event.target : null;
-                        if (!form) {
-                            throw new Error('Form element not found');
-                        }
-                        const formData = new FormData(form);
-                        const schema = this.schema || {};
-                        
-                        // First, collect all checkbox states (including unchecked ones)
-                        // Unchecked checkboxes don't appear in FormData, so we need to iterate form elements
-                        const flatConfig = {};
-                        
-                        // Process all form elements to capture all field states
-                        for (let i = 0; i < form.elements.length; i++) {
-                            const element = form.elements[i];
-                            const name = element.name;
-                            
-                            // Skip elements without names or submit buttons
-                            if (!name || element.type === 'submit' || element.type === 'button') {
-                                continue;
-                            }
-                            
-                            // Handle checkboxes explicitly (both checked and unchecked)
-                            if (element.type === 'checkbox') {
-                                // Check if this is a checkbox group (name ends with [])
-                                if (name.endsWith('[]')) {
-                                    const baseName = name.slice(0, -2); // Remove '[]' suffix
-                                    if (!flatConfig[baseName]) {
-                                        flatConfig[baseName] = [];
-                                    }
-                                    if (element.checked) {
-                                        flatConfig[baseName].push(element.value);
-                                    }
-                                } else {
-                                    // Regular checkbox (boolean)
-                                    flatConfig[name] = element.checked;
-                                }
-                            }
-                            // Handle radio buttons
-                            else if (element.type === 'radio') {
-                                if (element.checked) {
-                                    flatConfig[name] = element.value;
-                                }
-                            }
-                            // Handle select elements (including multi-select)
-                            else if (element.tagName === 'SELECT') {
-                                if (element.multiple) {
-                                    // Multi-select: get all selected options
-                                    const selectedValues = Array.from(element.selectedOptions).map(opt => opt.value);
-                                    flatConfig[name] = selectedValues;
-                                } else {
-                                    // Single select: handled by FormData, but ensure it's captured
-                                    if (!(name in flatConfig)) {
-                                        flatConfig[name] = element.value;
-                                    }
-                                }
-                            }
-                            // Handle textarea
-                            else if (element.tagName === 'TEXTAREA') {
-                                // Textarea: handled by FormData, but ensure it's captured
-                                if (!(name in flatConfig)) {
-                                    flatConfig[name] = element.value;
-                                }
-                            }
-                        }
-                        
-                        // Now process FormData for other field types
-                        for (const [key, value] of formData.entries()) {
-                            // Skip checkboxes - we already handled them above
-                            // Use querySelector to reliably find element by name (handles dot notation)
-                            const escapedKey = this.escapeCssSelector(key);
-                            const element = form.querySelector(`[name="${escapedKey}"]`);
-                            if (element && element.type === 'checkbox') {
-                                // Also skip checkbox groups (name ends with [])
-                                if (key.endsWith('[]')) {
-                                    continue; // Already processed
-                                }
-                                continue; // Already processed
-                            }
-                            // Skip multi-select - we already handled them above
-                            if (element && element.tagName === 'SELECT' && element.multiple) {
-                                continue; // Already processed
-                            }
-                            
-                            // Get schema property type if available
-                            const propSchema = this.getSchemaPropertyType(schema, key);
-                            const propType = propSchema ? propSchema.type : null;
-                            
-                            // Handle based on schema type or field name patterns
-                            if (propType === 'array') {
-                                // Check if this is a file upload widget (JSON array in hidden input)
-                                if (propSchema && propSchema['x-widget'] === 'file-upload') {
-                                    try {
-                                        // Unescape HTML entities that were escaped when setting the value
-                                        let unescapedValue = value;
-                                        if (typeof value === 'string') {
-                                            // Reverse the HTML escaping: &quot; -> ", &#39; -> ', &amp; -> &
-                                            unescapedValue = value
-                                                .replace(/&quot;/g, '"')
-                                                .replace(/&#39;/g, "'")
-                                                .replace(/&amp;/g, '&')
-                                                .replace(/&lt;/g, '<')
-                                                .replace(/&gt;/g, '>');
-                                        }
-                                        
-                                        // Try to parse as JSON
-                                        const jsonValue = JSON.parse(unescapedValue);
-                                        if (Array.isArray(jsonValue)) {
-                                            flatConfig[key] = jsonValue;
-                                            console.log(`File upload array field ${key}: parsed JSON array with ${jsonValue.length} items`);
-                                        } else {
-                                            // Fallback to empty array
-                                            flatConfig[key] = [];
-                                        }
-                                    } catch (e) {
-                                        console.warn(`Failed to parse JSON for file upload field ${key}:`, e, 'Value:', value);
-                                        // Not valid JSON, use empty array or try comma-separated
-                                        if (value && value.trim()) {
-                                            // Try to unescape and parse again
-                                            try {
-                                                const unescaped = value
-                                                    .replace(/&quot;/g, '"')
-                                                    .replace(/&#39;/g, "'")
-                                                    .replace(/&amp;/g, '&');
-                                                const jsonValue = JSON.parse(unescaped);
-                                                if (Array.isArray(jsonValue)) {
-                                                    flatConfig[key] = jsonValue;
-                                                } else {
-                                                    flatConfig[key] = [];
-                                                }
-                                            } catch (e2) {
-                                                // If still fails, try comma-separated or empty array
-                                                const arrayValue = value.split(',').map(v => v.trim()).filter(v => v);
-                                                flatConfig[key] = arrayValue.length > 0 ? arrayValue : [];
-                                            }
-                                        } else {
-                                            flatConfig[key] = [];
-                                        }
-                                    }
-                                } else {
-                                    // Regular array: convert comma-separated string to array
-                                    const arrayValue = value ? value.split(',').map(v => v.trim()).filter(v => v) : [];
-                                    flatConfig[key] = arrayValue;
-                                }
-                            } else if (propType === 'integer' || (Array.isArray(propType) && propType.includes('integer'))) {
-                                // Handle union types - if null is allowed and value is empty, keep as empty string (backend will convert to null)
-                                if (Array.isArray(propType) && propType.includes('null') && (!value || value.trim() === '')) {
-                                    flatConfig[key] = ''; // Send empty string, backend will normalize to null
-                                } else {
-                                    const numValue = parseInt(value, 10);
-                                    flatConfig[key] = isNaN(numValue) ? (propSchema && propSchema.default !== undefined ? propSchema.default : 0) : numValue;
-                                }
-                            } else if (propType === 'number' || (Array.isArray(propType) && propType.includes('number'))) {
-                                // Handle union types - if null is allowed and value is empty, keep as empty string (backend will convert to null)
-                                if (Array.isArray(propType) && propType.includes('null') && (!value || value.trim() === '')) {
-                                    flatConfig[key] = ''; // Send empty string, backend will normalize to null
-                                } else {
-                                    const numValue = parseFloat(value);
-                                    flatConfig[key] = isNaN(numValue) ? (propSchema && propSchema.default !== undefined ? propSchema.default : 0) : numValue;
-                                }
-                            } else if (propType === 'boolean') {
-                                // Boolean from FormData (shouldn't happen for checkboxes, but handle it)
-                                flatConfig[key] = value === 'on' || value === 'true' || value === true;
-                            } else {
-                                // String or other types
-                                // Check if it's a number field by name pattern (fallback if no schema)
-                                if (!propType && (key.includes('duration') || key.includes('interval') || 
-                                    key.includes('timeout') || key.includes('teams') || key.includes('fps') ||
-                                    key.includes('bits') || key.includes('nanoseconds') || key.includes('hz'))) {
-                                    const numValue = parseFloat(value);
-                                    if (!isNaN(numValue)) {
-                                        flatConfig[key] = Number.isInteger(numValue) ? parseInt(value, 10) : numValue;
-                                    } else {
-                                        flatConfig[key] = value;
-                                    }
-                                } else {
-                                    flatConfig[key] = value;
-                                }
-                            }
-                        }
-                        
-                        // Handle unchecked checkboxes using schema (if available)
-                        if (schema && schema.properties) {
-                            const collectBooleanFields = (props, prefix = '') => {
-                                const boolFields = [];
-                                for (const [key, prop] of Object.entries(props)) {
-                                    const fullKey = prefix ? `${prefix}.${key}` : key;
-                                    if (prop.type === 'boolean') {
-                                        boolFields.push(fullKey);
-                                    } else if (prop.type === 'object' && prop.properties) {
-                                        boolFields.push(...collectBooleanFields(prop.properties, fullKey));
-                                    }
-                                }
-                                return boolFields;
-                            };
-                            
-                            const allBoolFields = collectBooleanFields(schema.properties);
-                            allBoolFields.forEach(key => {
-                                // Only set to false if the field is completely missing from flatConfig
-                                // Don't override existing false values - they're explicitly set by the user
-                                if (!(key in flatConfig)) {
-                                    flatConfig[key] = false;
-                                }
-                            });
-                        }
-                        
-                        // Convert dot notation to nested object
-                        const dotToNested = (obj) => {
-                            const result = {};
-                            for (const key in obj) {
-                                const parts = key.split('.');
-                                let current = result;
-                                for (let i = 0; i < parts.length - 1; i++) {
-                                    if (!current[parts[i]]) {
-                                        current[parts[i]] = {};
-                                    }
-                                    current = current[parts[i]];
-                                }
-                                current[parts[parts.length - 1]] = obj[key];
-                            }
-                            return result;
-                        };
-                        
-                        const config = dotToNested(flatConfig);
-                        
-                        // Save to backend
-                        const response = await fetch('/api/v3/plugins/config', {
-                            method: 'POST',
-                            headers: { 'Content-Type': 'application/json' },
-                            body: JSON.stringify({
-                                plugin_id: pluginId,
-                                config: config
-                            })
-                        });
-                        
-                        let data;
-                        try {
-                            data = await response.json();
-                        } catch (e) {
-                            console.error('Failed to parse JSON response:', e);
-                            console.error('Response status:', response.status, response.statusText);
-                            console.error('Response text:', await response.text());
-                            throw new Error(`Failed to parse server response: ${response.status} ${response.statusText}`);
-                        }
-                        
-                        console.log('Response status:', response.status, 'Response OK:', response.ok);
-                        console.log('Response data:', JSON.stringify(data, null, 2));
-                        
-                        if (!response.ok || data.status !== 'success') {
-                            let errorMessage = data.message || 'Failed to save configuration';
-                            if (data.validation_errors && Array.isArray(data.validation_errors)) {
-                                console.error('Validation errors:', data.validation_errors);
-                                errorMessage += '\n\nValidation errors:\n' + data.validation_errors.join('\n');
-                            }
-                            if (data.config_keys && data.schema_keys) {
-                                console.error('Config keys sent:', data.config_keys);
-                                console.error('Schema keys expected:', data.schema_keys);
-                                const extraKeys = data.config_keys.filter(k => !data.schema_keys.includes(k));
-                                const missingKeys = data.schema_keys.filter(k => !data.config_keys.includes(k));
-                                if (extraKeys.length > 0) {
-                                    errorMessage += '\n\nExtra keys (not in schema): ' + extraKeys.join(', ');
-                                }
-                                if (missingKeys.length > 0) {
-                                    errorMessage += '\n\nMissing keys (in schema): ' + missingKeys.join(', ');
-                                }
-                            }
-                            this.showNotification(errorMessage, 'error');
-                            console.error('Config save failed - Full error response:', JSON.stringify(data, null, 2));
-                        } else {
-                            this.showNotification('Configuration saved successfully', 'success');
-                            // Reload plugin config to reflect changes
-                            await this.loadPluginConfig(pluginId);
-                        }
-                    } catch (error) {
-                        console.error('Error saving plugin config:', error);
-                        this.showNotification('Error saving configuration: ' + error.message, 'error');
-                    }
-                },
-
-                formatCommitInfo(commit, branch) {
-                    // Handle null, undefined, or empty string
-                    const commitStr = (commit && String(commit).trim()) || '';
-                    const branchStr = (branch && String(branch).trim()) || '';
-                    
-                    if (!commitStr && !branchStr) return 'Unknown';
-                    
-                    const shortCommit = commitStr.length >= 7 ? commitStr.substring(0, 7) : commitStr;
-
-                    if (branchStr && shortCommit) {
-                        return `${branchStr} · ${shortCommit}`;
-                    }
-                    if (branchStr) {
-                        return branchStr;
-                    }
-                    if (shortCommit) {
-                        return shortCommit;
-                    }
-                    return 'Unknown';
-                },
-
-                formatDateInfo(dateString) {
-                    // Handle null, undefined, or empty string
-                    if (!dateString || !String(dateString).trim()) return 'Unknown';
-                    
-                    try {
-                        const date = new Date(dateString);
-                        // Check if date is valid
-                        if (isNaN(date.getTime())) {
-                            return 'Unknown';
-                        }
-                        
-                        const now = new Date();
-                        const diffTime = Math.abs(now - date);
-                        const diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24));
-                        
-                        if (diffDays < 1) {
-                            return 'Today';
-                        } else if (diffDays < 2) {
-                            return 'Yesterday';
-                        } else if (diffDays < 7) {
-                            return `${diffDays} days ago`;
-                        } else if (diffDays < 30) {
-                            const weeks = Math.floor(diffDays / 7);
-                            return `${weeks} ${weeks === 1 ? 'week' : 'weeks'} ago`;
-                        } else {
-                            // Return formatted date for older items
-                            return date.toLocaleDateString('en-US', { year: 'numeric', month: 'short', day: 'numeric' });
-                        }
-                    } catch (e) {
-                        console.error('Error formatting date:', e, dateString);
-                        return 'Unknown';
-                    }
-                }
-            };
-            
-            // Update window.app to return full implementation
-            window.app = function() {
-                return fullImplementation;
-            };
-            
-            // If Alpine is already initialized, update the existing component immediately
-            if (window.Alpine) {
-                // Use requestAnimationFrame for immediate execution without blocking
-                requestAnimationFrame(() => {
-                    if (window._appEnhanced) return;
-                    window._appEnhanced = true;
-                    const isAPMode = window.location.hostname === '192.168.4.1' ||
-                                   window.location.hostname.startsWith('192.168.4.');
-                    const defaultTab = isAPMode ? 'wifi' : 'overview';
-                    const appElement = document.querySelector('[x-data]');
-                    if (appElement && appElement._x_dataStack && appElement._x_dataStack[0]) {
-                        const existingComponent = appElement._x_dataStack[0];
-                        // Preserve runtime state that should not be reset
-                        const preservedPlugins = existingComponent.installedPlugins;
-                        const preservedTab = existingComponent.activeTab;
-                        // Replace all properties and methods from full implementation
-                        Object.keys(fullImplementation).forEach(key => {
-                            existingComponent[key] = fullImplementation[key];
-                        });
-                        // Restore runtime state if non-default
-                        if (preservedPlugins && preservedPlugins.length > 0) {
-                            existingComponent.installedPlugins = preservedPlugins;
-                        }
-                        if (preservedTab && preservedTab !== defaultTab) {
-                            existingComponent.activeTab = preservedTab;
-                        }
-                        // Call init to load plugins and set up watchers (only if not already initialized)
-                        if (typeof existingComponent.init === 'function' && !existingComponent._initialized) {
-                            existingComponent.init();
-                        }
-                    }
-                });
-            }
-            
-            return fullImplementation;
-        }
-        
-        // Make app() available globally
-        window.app = app;
-
-        // ===== DEPRECATED: Plugin Configuration Functions (Global Access) =====
-        // These functions are no longer the primary method for loading plugin configs.
-        // Plugin configuration forms are now rendered server-side via HTMX.
-        // See: /v3/partials/plugin-config/<plugin_id> for the new implementation.
-        // Kept for backwards compatibility with any remaining client-side code.
-        window.PluginConfigHelpers = {
-            loadPluginConfig: async function(pluginId, componentContext) {
-                // This function can be called from inline components
-                // It loads config, schema, and updates the component context
-                if (!componentContext) {
-                    console.error('loadPluginConfig requires component context');
-                    return;
-                }
-                
-                console.log('Loading config for plugin:', pluginId);
-                componentContext.loading = true;
-
-                try {
-                    // Load config, schema, and installed plugins (for web_ui_actions) in parallel
-                    let configData, schemaData, pluginsData;
-                    
-                    if (window.PluginAPI && window.PluginAPI.batch) {
-                        try {
-                            const results = await window.PluginAPI.batch([
-                                {endpoint: `/plugins/config?plugin_id=${pluginId}`, method: 'GET'},
-                                {endpoint: `/plugins/schema?plugin_id=${pluginId}`, method: 'GET'},
-                                {endpoint: '/plugins/installed', method: 'GET'}
-                            ]);
-                            [configData, schemaData, pluginsData] = results;
-                        } catch (batchError) {
-                            console.error('Batch API request failed, falling back to individual requests:', batchError);
-                            // Fall back to individual requests
-                            const [configResponse, schemaResponse, pluginsResponse] = await Promise.all([
-                                fetch(`/api/v3/plugins/config?plugin_id=${pluginId}`).then(r => r.json()).catch(e => ({ status: 'error', message: e.message })),
-                                fetch(`/api/v3/plugins/schema?plugin_id=${pluginId}`).then(r => r.json()).catch(e => ({ status: 'error', message: e.message })),
-                                fetch(`/api/v3/plugins/installed`).then(r => r.json()).catch(e => ({ status: 'error', message: e.message }))
-                            ]);
-                            configData = configResponse;
-                            schemaData = schemaResponse;
-                            pluginsData = pluginsResponse;
-                        }
-                    } else {
-                        const [configResponse, schemaResponse, pluginsResponse] = await Promise.all([
-                            fetch(`/api/v3/plugins/config?plugin_id=${pluginId}`).then(r => r.json()).catch(e => ({ status: 'error', message: e.message })),
-                            fetch(`/api/v3/plugins/schema?plugin_id=${pluginId}`).then(r => r.json()).catch(e => ({ status: 'error', message: e.message })),
-                            fetch(`/api/v3/plugins/installed`).then(r => r.json()).catch(e => ({ status: 'error', message: e.message }))
-                        ]);
-                        configData = configResponse;
-                        schemaData = schemaResponse;
-                        pluginsData = pluginsResponse;
-                    }
-
-                    if (configData && configData.status === 'success') {
-                        componentContext.config = configData.data;
-                    } else {
-                        console.warn('Config API returned non-success status:', configData);
-                        // Set defaults if config failed to load
-                        componentContext.config = { enabled: true, display_duration: 30 };
-                    }
-
-                    if (schemaData && schemaData.status === 'success') {
-                        componentContext.schema = schemaData.data.schema || {};
-                    } else {
-                        console.warn('Schema API returned non-success status:', schemaData);
-                        // Set empty schema as fallback
-                        componentContext.schema = {};
-                    }
-
-                    if (pluginsData && pluginsData.status === 'success' && pluginsData.data && pluginsData.data.plugins) {
-                        const pluginInfo = pluginsData.data.plugins.find(p => p.id === pluginId);
-                        componentContext.webUiActions = pluginInfo ? (pluginInfo.web_ui_actions || []) : [];
-                    } else {
-                        console.warn('Plugins API returned non-success status:', pluginsData);
-                        componentContext.webUiActions = [];
-                    }
-
-                    console.log('Loaded config, schema, and actions for', pluginId);
-                } catch (error) {
-                    console.error('Error loading plugin config:', error);
-                    componentContext.config = { enabled: true, display_duration: 30 };
-                    componentContext.schema = {};
-                    componentContext.webUiActions = [];
-                } finally {
-                    componentContext.loading = false;
-                }
-            },
-
-            generateConfigForm: function(pluginId, config, schema, webUiActions, componentContext) {
-                // Try to get the app component
-                let appComponent = null;
-                if (window.Alpine) {
-                    const appElement = document.querySelector('[x-data="app()"]');
-                    if (appElement && appElement._x_dataStack && appElement._x_dataStack[0]) {
-                        appComponent = appElement._x_dataStack[0];
-                    }
-                }
-
-                // If we have access to the app component, use its method
-                if (appComponent && typeof appComponent.generateConfigForm === 'function') {
-                    return appComponent.generateConfigForm(pluginId, config, schema, webUiActions);
-                }
-
-                // Fallback: return loading message if function not available
-                if (!pluginId || !config) {
-                    return '<div class="text-gray-500">Loading configuration...</div>';
-                }
-                return '<div class="text-gray-500">Configuration form not available yet...</div>';
-            },
-
-            savePluginConfig: async function(pluginId, event, componentContext) {
-                // Try to get the app component
-                let appComponent = null;
-                if (window.Alpine) {
-                    const appElement = document.querySelector('[x-data="app()"]');
-                    if (appElement && appElement._x_dataStack && appElement._x_dataStack[0]) {
-                        appComponent = appElement._x_dataStack[0];
-                    }
-                }
-
-                // If we have access to the app component, use its method
-                if (appComponent && typeof appComponent.savePluginConfig === 'function') {
-                    return appComponent.savePluginConfig(pluginId, event);
-                }
-
-                console.error('savePluginConfig not available');
-                throw new Error('Save configuration method not available');
-            }
-        };
-
-        // ===== Nested Section Toggle =====
-        window.toggleNestedSection = function(sectionId, event) {
-            // Prevent event bubbling if event is provided
-            if (event) {
-                event.stopPropagation();
-                event.preventDefault();
-            }
-            
-            const content = document.getElementById(sectionId);
-            const icon = document.getElementById(sectionId + '-icon');
-            
-            if (!content || !icon) {
-                console.warn('[toggleNestedSection] Content or icon not found for:', sectionId);
-                return;
-            }
-            
-            // Check if content is currently collapsed (has 'collapsed' class or display:none)
-            const isCollapsed = content.classList.contains('collapsed') || 
-                                content.style.display === 'none' ||
-                                (content.style.display === '' && !content.classList.contains('expanded'));
-            
-            if (isCollapsed) {
-                // Expand the section
-                content.classList.remove('collapsed');
-                content.classList.add('expanded');
-                content.style.display = 'block';
-                content.style.overflow = 'hidden'; // Prevent content jumping during animation
-                
-                // CRITICAL FIX: Use setTimeout to ensure browser has time to layout the element
-                // When element goes from display:none to display:block, scrollHeight might be 0
-                // We need to wait for the browser to calculate the layout
-                setTimeout(() => {
-                    // Force reflow to ensure transition works
-                    void content.offsetHeight;
-                    
-                    // Now measure the actual content height after layout
-                    const scrollHeight = content.scrollHeight;
-                    if (scrollHeight > 0) {
-                        content.style.maxHeight = scrollHeight + 'px';
-                    } else {
-                        // Fallback: if scrollHeight is still 0, try measuring again after a brief delay
-                        setTimeout(() => {
-                            const retryHeight = content.scrollHeight;
-                            content.style.maxHeight = retryHeight > 0 ? retryHeight + 'px' : '500px';
-                        }, 10);
-                    }
-                }, 10);
-                
-                icon.classList.remove('fa-chevron-right');
-                icon.classList.add('fa-chevron-down');
-                
-                // After animation completes, remove max-height constraint to allow natural expansion
-                setTimeout(() => {
-                    if (content.classList.contains('expanded') && !content.classList.contains('collapsed')) {
-                        content.style.maxHeight = 'none';
-                        content.style.overflow = '';
-                    }
-                }, 320); // Slightly longer than transition duration
-            } else {
-                // Collapse the section
-                content.classList.add('collapsed');
-                content.classList.remove('expanded');
-                content.style.overflow = 'hidden'; // Prevent content jumping during animation
-                
-                // Set max-height to current scroll height first (required for smooth animation)
-                const currentHeight = content.scrollHeight;
-                content.style.maxHeight = currentHeight + 'px';
-                
-                // Force reflow to apply the height
-                void content.offsetHeight;
-                
-                // Then animate to 0
-                setTimeout(() => {
-                    content.style.maxHeight = '0';
-                }, 10);
-                
-                // Hide after transition completes
-                setTimeout(() => {
-                    if (content.classList.contains('collapsed')) {
-                        content.style.display = 'none';
-                        content.style.overflow = '';
-                    }
-                }, 320); // Match the CSS transition duration + small buffer
-                
-                icon.classList.remove('fa-chevron-down');
-                icon.classList.add('fa-chevron-right');
-            }
-        };
-
-        // ===== Display Preview Functions (from v2) =====
-        
-        function updateDisplayPreview(data) {
-            const preview = document.getElementById('displayPreview');
-            const stage = document.getElementById('previewStage');
-            const img = document.getElementById('displayImage');
-            const canvas = document.getElementById('gridOverlay');
-            const ledCanvas = document.getElementById('ledCanvas');
-            const placeholder = document.getElementById('displayPlaceholder');
-            
-            if (!stage || !img || !placeholder) return; // Not on overview page
-
-            if (data.image) {
-                // Show stage
-                placeholder.style.display = 'none';
-                stage.style.display = 'inline-block';
-
-                // Current scale from slider
-                const scale = parseInt(document.getElementById('scaleRange')?.value || '8');
-
-                // Update image and meta label
-                img.style.imageRendering = 'pixelated';
-                img.onload = () => {
-                    renderLedDots();
-                };
-                img.src = `data:image/png;base64,${data.image}`;
-                
-                const meta = document.getElementById('previewMeta');
-                if (meta) {
-                    meta.textContent = `${data.width || 128} x ${data.height || 64} @ ${scale}x`;
-                }
-
-                // Size the canvases to match
-                const width = (data.width || 128) * scale;
-                const height = (data.height || 64) * scale;
-                img.style.width = width + 'px';
-                img.style.height = height + 'px';
-                ledCanvas.width = width;
-                ledCanvas.height = height;
-                canvas.width = width;
-                canvas.height = height;
-                drawGrid(canvas, data.width || 128, data.height || 64, scale);
-                renderLedDots();
-            } else {
-                stage.style.display = 'none';
-                placeholder.style.display = 'block';
-                placeholder.innerHTML = `<div class="text-center text-gray-400 py-8">
-                    <i class="fas fa-exclamation-triangle text-4xl mb-3"></i>
-                    <p>No display data available</p>
-                </div>`;
-            }
-        }
-
-        function renderLedDots() {
-            const ledCanvas = document.getElementById('ledCanvas');
-            const img = document.getElementById('displayImage');
-            const toggle = document.getElementById('toggleLedDots');
-
-            if (!ledCanvas || !img || !toggle) {
-                return;
-            }
-
-            const show = toggle.checked;
-
-            if (!show) {
-                // LED mode OFF: Show image, hide canvas
-                img.style.visibility = 'visible';
-                ledCanvas.style.display = 'none';
-                const ctx = ledCanvas.getContext('2d');
-                ctx.clearRect(0, 0, ledCanvas.width, ledCanvas.height);
-                return;
-            }
-
-            // LED mode ON: Hide image (but keep layout space), show only dots on canvas
-            img.style.visibility = 'hidden';
-            ledCanvas.style.display = 'block';
-
-            const scale = parseInt(document.getElementById('scaleRange')?.value || '8');
-            const fillPct = parseInt(document.getElementById('dotFillRange')?.value || '75');
-            const dotRadius = Math.max(1, Math.floor((scale * fillPct) / 200)); // radius in px
-
-            const ctx = ledCanvas.getContext('2d', { willReadFrequently: true });
-            ctx.clearRect(0, 0, ledCanvas.width, ledCanvas.height);
-
-            // Create an offscreen canvas to sample pixel colors
-            const off = document.createElement('canvas');
-            const logicalWidth = Math.floor(ledCanvas.width / scale);
-            const logicalHeight = Math.floor(ledCanvas.height / scale);
-            off.width = logicalWidth;
-            off.height = logicalHeight;
-            const offCtx = off.getContext('2d', { willReadFrequently: true });
-
-            // Draw the current image scaled down to logical LEDs to sample colors
-            try {
-                offCtx.drawImage(img, 0, 0, logicalWidth, logicalHeight);
-            } catch (e) {
-                console.error('Failed to draw image to offscreen canvas:', e);
-                return;
-            }
-
-            // Fill canvas with black background (LED matrix bezel)
-            ctx.fillStyle = 'rgb(0, 0, 0)';
-            ctx.fillRect(0, 0, ledCanvas.width, ledCanvas.height);
-
-            // Draw circular dots for each LED pixel
-            let drawn = 0;
-            for (let y = 0; y < logicalHeight; y++) {
-                for (let x = 0; x < logicalWidth; x++) {
-                    const pixel = offCtx.getImageData(x, y, 1, 1).data;
-                    const r = pixel[0], g = pixel[1], b = pixel[2], a = pixel[3];
-
-                    // Skip fully transparent or black pixels to reduce overdraw
-                    if (a === 0 || (r|g|b) === 0) continue;
-
-                    ctx.fillStyle = `rgb(${r},${g},${b})`;
-                    const cx = Math.floor(x * scale + scale / 2);
-                    const cy = Math.floor(y * scale + scale / 2);
-                    ctx.beginPath();
-                    ctx.arc(cx, cy, dotRadius, 0, Math.PI * 2);
-                    ctx.fill();
-                    drawn++;
-                }
-            }
-
-            // If nothing was drawn (e.g., image not ready), hide overlay to show base image
-            if (drawn === 0) {
-                ledCanvas.style.display = 'none';
-            }
-        }
-
-        function drawGrid(canvas, pixelWidth, pixelHeight, scale) {
-            const toggle = document.getElementById('toggleGrid');
-            if (!toggle || !toggle.checked) {
-                const ctx = canvas.getContext('2d');
-                ctx.clearRect(0, 0, canvas.width, canvas.height);
-                return;
-            }
-            
-            const ctx = canvas.getContext('2d');
-            ctx.clearRect(0, 0, canvas.width, canvas.height);
-            ctx.strokeStyle = 'rgba(255, 255, 255, 0.2)';
-            ctx.lineWidth = 1;
-            
-            for (let x = 0; x <= pixelWidth; x++) {
-                ctx.beginPath();
-                ctx.moveTo(x * scale, 0);
-                ctx.lineTo(x * scale, pixelHeight * scale);
-                ctx.stroke();
-            }
-            
-            for (let y = 0; y <= pixelHeight; y++) {
-                ctx.beginPath();
-                ctx.moveTo(0, y * scale);
-                ctx.lineTo(pixelWidth * scale, y * scale);
-                ctx.stroke();
-            }
-        }
-
-        function takeScreenshot() {
-            const img = document.getElementById('displayImage');
-            if (img && img.src) {
-                const link = document.createElement('a');
-                link.download = `led_matrix_${new Date().getTime()}.png`;
-                link.href = img.src;
-                link.click();
-            }
-        }
-
-        // ===== Plugin Management Functions =====
-
-        // Make togglePluginFromTab global so Alpine.js can access it  
-        window.togglePluginFromTab = async function(pluginId, enabled) {
-            try {
-                const response = await fetch('/api/v3/plugins/toggle', {
-                    method: 'POST',
-                    headers: { 'Content-Type': 'application/json' },
-                    body: JSON.stringify({ plugin_id: pluginId, enabled })
-                });
-                const data = await response.json();
-
-                showNotification(data.message, data.status);
-
-                if (data.status === 'success') {
-                    // Update the plugin in window.installedPlugins
-                    if (window.installedPlugins) {
-                        const plugin = window.installedPlugins.find(p => p.id === pluginId);
-                        if (plugin) {
-                            plugin.enabled = enabled;
-                        }
-                    }
-                    
-                    // Refresh the plugin list to ensure both management page and config page stay in sync
-                    if (typeof loadInstalledPlugins === 'function') {
-                        loadInstalledPlugins();
-                    }
-                } else {
-                    // Revert the toggle if API call failed
-                    if (window.installedPlugins) {
-                        const plugin = window.installedPlugins.find(p => p.id === pluginId);
-                        if (plugin) {
-                            plugin.enabled = !enabled;
-                        }
-                    }
-                }
-
-            } catch (error) {
-                showNotification('Error toggling plugin: ' + error.message, 'error');
-                // Revert on error
-                if (window.installedPlugins) {
-                    const plugin = window.installedPlugins.find(p => p.id === pluginId);
-                    if (plugin) {
-                        plugin.enabled = !enabled;
-                    }
-                }
-            }
-        }
-
-        // Helper function to get schema property type for a field path
-        function getSchemaPropertyType(schema, path) {
-            if (!schema || !schema.properties) return null;
-            
-            const parts = path.split('.');
-            let current = schema.properties;
-            
-            for (let i = 0; i < parts.length; i++) {
-                const part = parts[i];
-                if (current && current[part]) {
-                    if (i === parts.length - 1) {
-                        return current[part];
-                    } else if (current[part].properties) {
-                        current = current[part].properties;
-                    } else {
-                        return null;
-                    }
-                } else {
-                    return null;
-                }
-            }
-            return null;
-        }
-
-        // Helper function to escape CSS selector special characters
-        function escapeCssSelector(str) {
-            if (typeof str !== 'string') {
-                str = String(str);
-            }
-            // Use CSS.escape() when available (handles unicode, leading digits, and edge cases)
-            if (typeof CSS !== 'undefined' && CSS.escape) {
-                return CSS.escape(str);
-            }
-            // Fallback to regex-based escaping for older browsers
-            // First, handle leading digits and whitespace (must be done before regex)
-            let escaped = str;
-            let hasLeadingHexEscape = false;
-            if (escaped.length > 0) {
-                const firstChar = escaped[0];
-                const firstCode = firstChar.charCodeAt(0);
-                
-                // Escape leading digit (0-9: U+0030-U+0039)
-                if (firstCode >= 0x30 && firstCode <= 0x39) {
-                    const hex = firstCode.toString(16).toUpperCase().padStart(4, '0');
-                    escaped = '\\' + hex + ' ' + escaped.slice(1);
-                    hasLeadingHexEscape = true;
-                }
-                // Escape leading whitespace (space: U+0020, tab: U+0009, etc.)
-                else if (/\s/.test(firstChar)) {
-                    const hex = firstCode.toString(16).toUpperCase().padStart(4, '0');
-                    escaped = '\\' + hex + ' ' + escaped.slice(1);
-                    hasLeadingHexEscape = true;
-                }
-            }
-            
-            // Escape special characters
-            escaped = escaped.replace(/[!"#$%&'()*+,.\/:;<=>?@[\\\]^`{|}~]/g, '\\$&');
-            
-            // Escape internal spaces (replace spaces with \ ), but preserve space in hex escape
-            if (hasLeadingHexEscape) {
-                // Skip the first 6 characters (e.g., "\0030 ") when replacing spaces
-                escaped = escaped.slice(0, 6) + escaped.slice(6).replace(/ /g, '\\ ');
-            } else {
-                escaped = escaped.replace(/ /g, '\\ ');
-            }
-            
-            return escaped;
-        }
-
-        async function savePluginConfig(pluginId) {
-            try {
-                console.log('Saving config for plugin:', pluginId);
-                
-                // Load schema for type detection
-                let schema = {};
-                try {
-                    const schemaResponse = await fetch(`/api/v3/plugins/schema?plugin_id=${pluginId}`);
-                    const schemaData = await schemaResponse.json();
-                    if (schemaData.status === 'success' && schemaData.data.schema) {
-                        schema = schemaData.data.schema;
-                    }
-                } catch (e) {
-                    console.warn('Could not load schema for type detection:', e);
-                }
-                
-                // Find the form in the active plugin tab
-                // Alpine.js hides/shows elements with display:none, so we look for the currently visible one
-                const allForms = document.querySelectorAll('form[x-on\\:submit\\.prevent]');
-                console.log('Found forms:', allForms.length);
-                
-                let form = null;
-                for (const f of allForms) {
-                    const parent = f.closest('[x-show]');
-                    if (parent && parent.style.display !== 'none' && parent.offsetParent !== null) {
-                        form = f;
-                        console.log('Found visible form');
-                        break;
-                    }
-                }
-                
-                if (!form) {
-                    throw new Error('Form not found for plugin ' + pluginId);
-                }
-
-                const formData = new FormData(form);
-                const flatConfig = {};
-
-                // First, collect all checkbox states (including unchecked ones)
-                // Unchecked checkboxes don't appear in FormData, so we need to iterate form elements
-                for (let i = 0; i < form.elements.length; i++) {
-                    const element = form.elements[i];
-                    const name = element.name;
-                    
-                    // Skip elements without names or submit buttons
-                    if (!name || element.type === 'submit' || element.type === 'button') {
-                        continue;
-                    }
-                    
-                    // Handle checkboxes explicitly (both checked and unchecked)
-                    if (element.type === 'checkbox') {
-                        flatConfig[name] = element.checked;
-                    }
-                    // Handle radio buttons
-                    else if (element.type === 'radio') {
-                        if (element.checked) {
-                            flatConfig[name] = element.value;
-                        }
-                    }
-                    // Handle select elements (including multi-select)
-                    else if (element.tagName === 'SELECT') {
-                        if (element.multiple) {
-                            // Multi-select: get all selected options
-                            const selectedValues = Array.from(element.selectedOptions).map(opt => opt.value);
-                            flatConfig[name] = selectedValues;
-                        } else {
-                            // Single select: handled by FormData, but ensure it's captured
-                            if (!(name in flatConfig)) {
-                                flatConfig[name] = element.value;
-                            }
-                        }
-                    }
-                    // Handle textarea
-                    else if (element.tagName === 'TEXTAREA') {
-                        // Textarea: handled by FormData, but ensure it's captured
-                        if (!(name in flatConfig)) {
-                            flatConfig[name] = element.value;
-                        }
-                    }
-                }
-
-                // Now process FormData for other field types
-                for (const [key, value] of formData.entries()) {
-                    // Skip checkboxes - we already handled them above
-                    // Use querySelector to reliably find element by name (handles dot notation)
-                    const escapedKey = escapeCssSelector(key);
-                    const element = form.querySelector(`[name="${escapedKey}"]`);
-                    if (element && element.type === 'checkbox') {
-                        continue; // Already processed
-                    }
-                    // Skip multi-select - we already handled them above
-                    if (element && element.tagName === 'SELECT' && element.multiple) {
-                        continue; // Already processed
-                    }
-                    
-                    // Get schema property type if available
-                    const propSchema = getSchemaPropertyType(schema, key);
-                    const propType = propSchema ? propSchema.type : null;
-                    
-                    // Handle based on schema type or field name patterns
-                    if (propType === 'array') {
-                        // Check if this is a file upload widget (JSON array in hidden input)
-                        if (propSchema && propSchema['x-widget'] === 'file-upload') {
-                            try {
-                                // Unescape HTML entities that were escaped when setting the value
-                                let unescapedValue = value;
-                                if (typeof value === 'string') {
-                                    // Reverse the HTML escaping: &quot; -> ", &#39; -> ', &amp; -> &
-                                    unescapedValue = value
-                                        .replace(/&quot;/g, '"')
-                                        .replace(/&#39;/g, "'")
-                                        .replace(/&amp;/g, '&')
-                                        .replace(/&lt;/g, '<')
-                                        .replace(/&gt;/g, '>');
-                                }
-                                
-                                try {
-                                    const jsonValue = JSON.parse(unescapedValue);
-                                    if (Array.isArray(jsonValue)) {
-                                        flatConfig[key] = jsonValue;
-                                        console.log(`File upload array field ${key}: parsed JSON array with ${jsonValue.length} items`);
-                                    } else {
-                                        // Fallback to empty array
-                                        flatConfig[key] = [];
-                                    }
-                                } catch (e) {
-                                    console.warn(`Failed to parse JSON for file upload field ${key}:`, e, 'Value:', value);
-                                    // Fallback to empty array
-                                    flatConfig[key] = [];
-                                }
-                            } catch (e) {
-                                // Not valid JSON, use empty array or try comma-separated
-                                if (value && value.trim()) {
-                                    const arrayValue = value.split(',').map(v => v.trim()).filter(v => v);
-                                    flatConfig[key] = arrayValue;
-                                } else {
-                                    flatConfig[key] = [];
-                                }
-                            }
-                        } else {
-                            // Regular array: convert comma-separated string to array
-                            const arrayValue = value ? value.split(',').map(v => v.trim()).filter(v => v) : [];
-                            flatConfig[key] = arrayValue;
-                        }
-                    } else if (propType === 'integer') {
-                        const numValue = parseInt(value, 10);
-                        flatConfig[key] = isNaN(numValue) ? (propSchema && propSchema.default !== undefined ? propSchema.default : 0) : numValue;
-                    } else if (propType === 'number') {
-                        const numValue = parseFloat(value);
-                        flatConfig[key] = isNaN(numValue) ? (propSchema && propSchema.default !== undefined ? propSchema.default : 0) : numValue;
-                    } else if (propType === 'boolean') {
-                        // Boolean from FormData (shouldn't happen for checkboxes, but handle it)
-                        flatConfig[key] = value === 'on' || value === 'true' || value === true;
-                    } else {
-                        // String or other types
-                        // Check if it's a number field by name pattern (fallback if no schema)
-                        if (!propType && (key.includes('duration') || key.includes('interval') || 
-                            key.includes('timeout') || key.includes('teams') || key.includes('fps') ||
-                            key.includes('bits') || key.includes('nanoseconds') || key.includes('hz'))) {
-                            const numValue = parseFloat(value);
-                            if (!isNaN(numValue)) {
-                                flatConfig[key] = Number.isInteger(numValue) ? parseInt(value, 10) : numValue;
-                            } else {
-                                flatConfig[key] = value;
-                            }
-                        } else {
-                            flatConfig[key] = value;
-                        }
-                    }
-                }
-
-                // Handle unchecked checkboxes using schema (if available)
-                if (schema && schema.properties) {
-                    const collectBooleanFields = (props, prefix = '') => {
-                        const boolFields = [];
-                        for (const [key, prop] of Object.entries(props)) {
-                            const fullKey = prefix ? `${prefix}.${key}` : key;
-                            if (prop.type === 'boolean') {
-                                boolFields.push(fullKey);
-                            } else if (prop.type === 'object' && prop.properties) {
-                                boolFields.push(...collectBooleanFields(prop.properties, fullKey));
-                            }
-                        }
-                        return boolFields;
-                    };
-                    
-                    const allBoolFields = collectBooleanFields(schema.properties);
-                    allBoolFields.forEach(key => {
-                        if (!(key in flatConfig)) {
-                            flatConfig[key] = false;
-                        }
-                    });
-                }
-
-                // Convert dot notation to nested object
-                const dotToNested = (obj) => {
-                    const result = {};
-                    for (const key in obj) {
-                        const parts = key.split('.');
-                        let current = result;
-                        for (let i = 0; i < parts.length - 1; i++) {
-                            if (!current[parts[i]]) {
-                                current[parts[i]] = {};
-                            }
-                            current = current[parts[i]];
-                        }
-                        current[parts[parts.length - 1]] = obj[key];
-                    }
-                    return result;
-                };
-
-                const config = dotToNested(flatConfig);
-
-                console.log('Saving config for', pluginId, ':', config);
-                console.log('Flat config before nesting:', flatConfig);
-
-                // Save to backend
-                const response = await fetch('/api/v3/plugins/config', {
-                    method: 'POST',
-                    headers: { 'Content-Type': 'application/json' },
-                    body: JSON.stringify({ plugin_id: pluginId, config })
-                });
-
-                let data;
-                try {
-                    data = await response.json();
-                } catch (e) {
-                    throw new Error(`Failed to parse server response: ${response.status} ${response.statusText}`);
-                }
-
-                if (!response.ok || data.status !== 'success') {
-                    let errorMessage = data.message || 'Failed to save configuration';
-                    if (data.validation_errors && Array.isArray(data.validation_errors)) {
-                        errorMessage += '\n\nValidation errors:\n' + data.validation_errors.join('\n');
-                    }
-                    throw new Error(errorMessage);
-                } else {
-                    showNotification(`Configuration saved for ${pluginId}`, 'success');
-                }
-
-            } catch (error) {
-                console.error('Error saving plugin configuration:', error);
-                showNotification('Error saving plugin configuration: ' + error.message, 'error');
-            }
-        }
-        
-        // Notification helper function
-        // Fix invalid number inputs before form submission
-        // This prevents "invalid form control is not focusable" errors
-        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;
-                    }
-                }
-            });
-        };
-        
-        // showNotification is provided by notification.js widget
-        // This fallback is only used if the widget hasn't loaded yet
-        if (typeof window.showNotification !== 'function') {
-            window.showNotification = function(message, type = 'info') {
-                console.log(`[${type.toUpperCase()}]`, message);
-                const notification = document.createElement('div');
-                notification.className = `fixed top-4 right-4 px-6 py-3 rounded-lg shadow-lg z-50 ${
-                    type === 'success' ? 'bg-green-500' : type === 'error' ? 'bg-red-500' : 'bg-blue-500'
-                } text-white`;
-                notification.textContent = message;
-                document.body.appendChild(notification);
-                setTimeout(() => { notification.style.opacity = '0'; setTimeout(() => notification.remove(), 500); }, 3000);
-            };
-        }
-
-        // Section toggle function - already defined earlier, but ensure it's not overwritten
-        // (duplicate definition removed - function is defined in early script block above)
-
-        // Plugin config handler functions (idempotent initialization)
-        if (!window.__pluginConfigHandlersInitialized) {
-            window.__pluginConfigHandlersInitialized = true;
-            
-            // Initialize state on window object
-            window.pluginConfigRefreshInProgress = window.pluginConfigRefreshInProgress || new Set();
-            
-            // Validate plugin config form and show helpful error messages
-            window.validatePluginConfigForm = function(form, pluginId) {
-                // Check HTML5 validation
-                if (!form.checkValidity()) {
-                    // Find all invalid fields
-                    const invalidFields = Array.from(form.querySelectorAll(':invalid'));
-                    const errors = [];
-                    let firstInvalidField = null;
-                    
-                    invalidFields.forEach((field, index) => {
-                        // Build error message
-                        let fieldName = field.name || field.id || 'field';
-                        // Make field name more readable (remove plugin ID prefix, convert dots/underscores)
-                        fieldName = fieldName.replace(new RegExp('^' + pluginId + '-'), '')
-                                            .replace(/\./g, ' → ')
-                                            .replace(/_/g, ' ')
-                                            .replace(/\b\w/g, l => l.toUpperCase()); // Capitalize words
-                        
-                        let errorMsg = field.validationMessage || 'Invalid value';
-                        
-                        // Get more specific error message based on validation state
-                        if (field.validity.valueMissing) {
-                            errorMsg = 'This field is required';
-                        } else if (field.validity.rangeUnderflow) {
-                            errorMsg = `Value must be at least ${field.min || 'the minimum'}`;
-                        } else if (field.validity.rangeOverflow) {
-                            errorMsg = `Value must be at most ${field.max || 'the maximum'}`;
-                        } else if (field.validity.stepMismatch) {
-                            errorMsg = `Value must be a multiple of ${field.step || 1}`;
-                        } else if (field.validity.typeMismatch) {
-                            errorMsg = 'Invalid format (e.g., text in number field)';
-                        } else if (field.validity.patternMismatch) {
-                            errorMsg = 'Value does not match required pattern';
-                        } else if (field.validity.tooShort) {
-                            errorMsg = `Value must be at least ${field.minLength} characters`;
-                        } else if (field.validity.tooLong) {
-                            errorMsg = `Value must be at most ${field.maxLength} characters`;
-                        } else if (field.validity.badInput) {
-                            errorMsg = 'Invalid input type';
-                        }
-                        
-                        errors.push(`${fieldName}: ${errorMsg}`);
-                        
-                        // Track first invalid field for focusing
-                        if (index === 0) {
-                            firstInvalidField = field;
-                        }
-                        
-                        // If field is in a collapsed section, expand it
-                        const nestedContent = field.closest('.nested-content');
-                        if (nestedContent && nestedContent.classList.contains('hidden')) {
-                            // Find the toggle button for this section
-                            const sectionId = nestedContent.id;
-                            if (sectionId) {
-                                // Try multiple selectors to find the toggle button
-                                const toggleBtn = document.querySelector(`button[aria-controls="${sectionId}"], button[onclick*="${sectionId}"], [data-toggle-section="${sectionId}"]`) ||
-                                                 nestedContent.previousElementSibling?.querySelector('button');
-                                if (toggleBtn && toggleBtn.onclick) {
-                                    toggleBtn.click(); // Expand the section
-                                }
-                            }
-                        }
-                    });
-                    
-                    // Focus and scroll to first invalid field after a brief delay
-                    // (allows collapsed sections to expand first)
-                    setTimeout(() => {
-                        if (firstInvalidField) {
-                            firstInvalidField.scrollIntoView({ behavior: 'smooth', block: 'center' });
-                            firstInvalidField.focus();
-                        }
-                    }, 200);
-                    
-                    // Show error notification with details
-                    if (errors.length > 0) {
-                        // Format error message nicely
-                        const errorList = errors.slice(0, 5).join('\n'); // Show first 5 errors
-                        const moreErrors = errors.length > 5 ? `\n... and ${errors.length - 5} more error(s)` : '';
-                        const errorMessage = `Validation failed:\n${errorList}${moreErrors}`;
-                        
-                        if (typeof showNotification === 'function') {
-                            showNotification(errorMessage, 'error');
-                        } else {
-                            alert(errorMessage); // Fallback if showNotification not available
-                        }
-                        
-                        // Also log to console for debugging
-                        console.error('Form validation errors:', errors);
-                    }
-                    
-                    // Report validation failure to browser (shows native validation tooltips)
-                    form.reportValidity();
-                    
-                    return false; // Prevent form submission
-                }
-                
-                return true; // Validation passed
-            };
-            
-            // Handle config save response with detailed error logging
-            window.handleConfigSave = function(event, pluginId) {
-                const btn = event.target.querySelector('[type=submit]');
-                if (btn) btn.disabled = false;
-                
-                const xhr = event.detail.xhr;
-                const status = xhr?.status || 0;
-                
-                // Check if request was successful (2xx status codes)
-                if (status >= 200 && status < 300) {
-                    // Try to get message from response JSON
-                    let message = 'Configuration saved successfully!';
-                    try {
-                        if (xhr?.responseJSON?.message) {
-                            message = xhr.responseJSON.message;
-                        } else if (xhr?.responseText) {
-                            const responseData = JSON.parse(xhr.responseText);
-                            message = responseData.message || message;
-                        }
-                    } catch (e) {
-                        // Use default message if parsing fails
-                    }
-                    showNotification(message, 'success');
-                } else {
-                    // Request failed - log detailed error information
-                    console.error('Config save failed:', {
-                        status: status,
-                        statusText: xhr?.statusText,
-                        responseText: xhr?.responseText
-                    });
-                    
-                    // Try to parse error response
-                    let errorMessage = 'Failed to save configuration';
-                    try {
-                        if (xhr?.responseJSON) {
-                            const errorData = xhr.responseJSON;
-                            errorMessage = errorData.message || errorData.details || errorMessage;
-                            if (errorData.validation_errors) {
-                                errorMessage += ': ' + errorData.validation_errors.join(', ');
-                            }
-                        } else if (xhr?.responseText) {
-                            const errorData = JSON.parse(xhr.responseText);
-                            errorMessage = errorData.message || errorData.details || errorMessage;
-                            if (errorData.validation_errors) {
-                                errorMessage += ': ' + errorData.validation_errors.join(', ');
-                            }
-                        }
-                    } catch (e) {
-                        // If parsing fails, use status text
-                        errorMessage = xhr?.statusText || errorMessage;
-                    }
-                    
-                    showNotification(errorMessage, 'error');
-                }
-            };
-            
-            // Handle toggle response
-            window.handleToggleResponse = function(event, pluginId) {
-                const xhr = event.detail.xhr;
-                const status = xhr?.status || 0;
-                
-                if (status >= 200 && status < 300) {
-                    // Update UI in place instead of refreshing to avoid duplication
-                    const checkbox = document.getElementById(`plugin-enabled-${pluginId}`);
-                    const label = checkbox?.nextElementSibling;
-                    
-                    if (checkbox && label) {
-                        const isEnabled = checkbox.checked;
-                        label.textContent = isEnabled ? 'Enabled' : 'Disabled';
-                        label.className = `ml-2 text-sm ${isEnabled ? 'text-green-600' : 'text-gray-500'}`;
-                    }
-                    
-                    // Try to get message from response
-                    let message = 'Plugin status updated';
-                    try {
-                        if (xhr?.responseJSON?.message) {
-                            message = xhr.responseJSON.message;
-                        } else if (xhr?.responseText) {
-                            const responseData = JSON.parse(xhr.responseText);
-                            message = responseData.message || message;
-                        }
-                    } catch (e) {
-                        // Use default message
-                    }
-                    showNotification(message, 'success');
-                } else {
-                    // Revert checkbox state on error
-                    const checkbox = document.getElementById(`plugin-enabled-${pluginId}`);
-                    if (checkbox) {
-                        checkbox.checked = !checkbox.checked;
-                    }
-                    
-                    // Try to get error message from response
-                    let errorMessage = 'Failed to update plugin status';
-                    try {
-                        if (xhr?.responseJSON?.message) {
-                            errorMessage = xhr.responseJSON.message;
-                        } else if (xhr?.responseText) {
-                            const errorData = JSON.parse(xhr.responseText);
-                            errorMessage = errorData.message || errorData.details || errorMessage;
-                        }
-                    } catch (e) {
-                        // Use default message
-                    }
-                    showNotification(errorMessage, 'error');
-                }
-            };
-            
-            // Handle plugin update response
-            window.handlePluginUpdate = function(event, pluginId) {
-                const xhr = event.detail.xhr;
-                const status = xhr?.status || 0;
-                
-                // Check if request was successful (2xx status)
-                if (status >= 200 && status < 300) {
-                    // Try to parse the response to get the actual message from server
-                    let message = 'Plugin updated successfully';
-                    
-                    if (xhr && xhr.responseText) {
-                        try {
-                            const data = JSON.parse(xhr.responseText);
-                            // Use the server's message, ensuring it says "update" not "save"
-                            message = data.message || message;
-                            // Ensure message is about updating, not saving
-                            if (message.toLowerCase().includes('save') && !message.toLowerCase().includes('update')) {
-                                message = message.replace(/save/i, 'update');
-                            }
-                        } catch (e) {
-                            // If parsing fails, use default message
-                            console.warn('Could not parse update response:', e);
-                        }
-                    }
-                    
-                    showNotification(message, 'success');
-                } else {
-                    console.error('Plugin update failed:', {
-                        status: status,
-                        statusText: xhr?.statusText,
-                        responseText: xhr?.responseText
-                    });
-                    
-                    // Try to parse error response for better error message
-                    let errorMessage = 'Failed to update plugin';
-                    if (xhr?.responseText) {
-                        try {
-                            const errorData = JSON.parse(xhr.responseText);
-                            errorMessage = errorData.message || errorMessage;
-                        } catch (e) {
-                            // If parsing fails, use default
-                        }
-                    }
-                    
-                    showNotification(errorMessage, 'error');
-                }
-            };
-            
-            // Refresh plugin config (with duplicate prevention)
-            window.refreshPluginConfig = function(pluginId) {
-                // Prevent concurrent refreshes
-                if (window.pluginConfigRefreshInProgress.has(pluginId)) {
-                    return;
-                }
-                
-                const container = document.getElementById(`plugin-config-${pluginId}`);
-                if (container && window.htmx) {
-                    window.pluginConfigRefreshInProgress.add(pluginId);
-                    
-                    // Clear container first, then reload
-                    container.innerHTML = '';
-                    window.htmx.ajax('GET', `/v3/partials/plugin-config/${pluginId}`, {
-                        target: container,
-                        swap: 'innerHTML'
-                    });
-                    
-                    // Clear flag after delay
-                    setTimeout(() => {
-                        window.pluginConfigRefreshInProgress.delete(pluginId);
-                    }, 1000);
-                }
-            };
-            
-            // Plugin action handlers
-            window.runPluginOnDemand = function(pluginId) {
-                if (typeof window.openOnDemandModal === 'function') {
-                    window.openOnDemandModal(pluginId);
-                } else {
-                    showNotification('On-demand modal not available', 'error');
-                }
-            };
-            
-            window.stopOnDemand = function() {
-                if (typeof window.requestOnDemandStop === 'function') {
-                    window.requestOnDemandStop({});
-                } else {
-                    showNotification('Stop function not available', 'error');
-                }
-            };
-            
-            window.executePluginAction = function(pluginId, actionId) {
-                fetch(`/api/v3/plugins/action?plugin_id=${pluginId}&action_id=${actionId}`, {
-                    method: 'POST'
-                })
-                .then(r => r.json())
-                .then(data => {
-                    if (data.status === 'success') {
-                        showNotification(data.message || 'Action executed', 'success');
-                    } else {
-                        showNotification(data.message || 'Action failed', 'error');
-                    }
-                })
-                .catch(err => {
-                    showNotification('Failed to execute action', 'error');
-                });
-            };
-        }
-
-        function getAppComponent() {
-            if (window.Alpine) {
-                const appElement = document.querySelector('[x-data="app()"]');
-                if (appElement && appElement._x_dataStack && appElement._x_dataStack[0]) {
-                    return appElement._x_dataStack[0];
-                }
-            }
-            return null;
-        }
-
-        async function updatePlugin(pluginId) {
-            try {
-                showNotification(`Updating ${pluginId}...`, 'info');
-
-                const response = await fetch('/api/v3/plugins/update', {
-                    method: 'POST',
-                    headers: { 'Content-Type': 'application/json' },
-                    body: JSON.stringify({ plugin_id: pluginId })
-                });
-                const data = await response.json();
-
-                showNotification(data.message, data.status);
-
-                if (data.status === 'success') {
-                    // Refresh the plugin list
-                    const appComponent = getAppComponent();
-                    if (appComponent && typeof appComponent.loadInstalledPlugins === 'function') {
-                        await appComponent.loadInstalledPlugins();
-                    }
-                }
-            } catch (error) {
-                showNotification('Error updating plugin: ' + error.message, 'error');
-            }
-        }
-
-        async function updateAllPlugins() {
-            try {
-                const plugins = Array.isArray(window.installedPlugins) ? window.installedPlugins : [];
-
-                if (!plugins.length) {
-                    showNotification('No installed plugins to update.', 'warning');
-                    return;
-                }
-
-                showNotification(`Checking ${plugins.length} plugin${plugins.length === 1 ? '' : 's'} for updates...`, 'info');
-
-                let successCount = 0;
-                let failureCount = 0;
-
-                for (const plugin of plugins) {
-                    const pluginId = plugin.id;
-                    const pluginName = plugin.name || pluginId;
-
-                    try {
-                        const response = await fetch('/api/v3/plugins/update', {
-                            method: 'POST',
-                            headers: { 'Content-Type': 'application/json' },
-                            body: JSON.stringify({ plugin_id: pluginId })
-                        });
-
-                        const data = await response.json();
-                        const status = data.status || 'info';
-                        const message = data.message || `Checked ${pluginName}`;
-
-                        showNotification(message, status);
-
-                        if (status === 'success') {
-                            successCount += 1;
-                        } else {
-                            failureCount += 1;
-                        }
-                    } catch (error) {
-                        failureCount += 1;
-                        showNotification(`Error updating ${pluginName}: ${error.message}`, 'error');
-                    }
-                }
-
-                const appComponent = getAppComponent();
-                if (appComponent && typeof appComponent.loadInstalledPlugins === 'function') {
-                    await appComponent.loadInstalledPlugins();
-                }
-
-                if (failureCount === 0) {
-                    showNotification(`Finished checking ${successCount} plugin${successCount === 1 ? '' : 's'} for updates.`, 'success');
-                } else {
-                    showNotification(`Updated ${successCount} plugin${successCount === 1 ? '' : 's'} with ${failureCount} failure${failureCount === 1 ? '' : 's'}. Check logs for details.`, 'error');
-                }
-            } catch (error) {
-                console.error('Bulk plugin update failed:', error);
-                showNotification('Failed to update all plugins: ' + error.message, 'error');
-            }
-        }
-
-        window.updateAllPlugins = updateAllPlugins;
-
-
-        async function uninstallPlugin(pluginId) {
-            try {
-                // Get plugin info from window.installedPlugins
-                const plugin = window.installedPlugins ? window.installedPlugins.find(p => p.id === pluginId) : null;
-                const pluginName = plugin ? (plugin.name || pluginId) : pluginId;
-
-                if (!confirm(`Are you sure you want to uninstall ${pluginName}?`)) {
-                    return;
-                }
-
-                showNotification(`Uninstalling ${pluginName}...`, 'info');
-
-                const response = await fetch('/api/v3/plugins/uninstall', {
-                    method: 'POST',
-                    headers: { 'Content-Type': 'application/json' },
-                    body: JSON.stringify({ plugin_id: pluginId })
-                });
-                const data = await response.json();
-
-                // Check if operation was queued
-                if (data.status === 'success' && data.data && data.data.operation_id) {
-                    // Operation was queued, poll for completion
-                    const operationId = data.data.operation_id;
-                    showNotification(`Uninstall queued for ${pluginName}...`, 'info');
-                    await pollUninstallOperation(operationId, pluginId, pluginName);
-                } else if (data.status === 'success') {
-                    // Direct uninstall completed immediately
-                    showNotification(data.message || `Plugin ${pluginName} uninstalled successfully`, 'success');
-                    // Refresh the plugin list
-                    await app.loadInstalledPlugins();
-                } else {
-                    // Error response
-                    showNotification(data.message || 'Failed to uninstall plugin', data.status || 'error');
-                }
-            } catch (error) {
-                showNotification('Error uninstalling plugin: ' + error.message, 'error');
-            }
-        }
-
-        async function pollUninstallOperation(operationId, pluginId, pluginName, maxAttempts = 60, attempt = 0) {
-            if (attempt >= maxAttempts) {
-                showNotification(`Uninstall operation timed out for ${pluginName}`, 'error');
-                // Refresh plugin list to see actual state
-                await app.loadInstalledPlugins();
-                return;
-            }
-
-            try {
-                const response = await fetch(`/api/v3/plugins/operation/${operationId}`);
-                const data = await response.json();
-                
-                if (data.status === 'success' && data.data) {
-                    const operation = data.data;
-                    const status = operation.status;
-                    
-                    if (status === 'completed') {
-                        // Operation completed successfully
-                        showNotification(`Plugin ${pluginName} uninstalled successfully`, 'success');
-                        await app.loadInstalledPlugins();
-                    } else if (status === 'failed') {
-                        // Operation failed
-                        const errorMsg = operation.error || operation.message || `Failed to uninstall ${pluginName}`;
-                        showNotification(errorMsg, 'error');
-                        // Refresh plugin list to see actual state
-                        await app.loadInstalledPlugins();
-                    } else if (status === 'pending' || status === 'in_progress') {
-                        // Still in progress, poll again
-                        await new Promise(resolve => setTimeout(resolve, 1000)); // Wait 1 second
-                        await pollUninstallOperation(operationId, pluginId, pluginName, maxAttempts, attempt + 1);
-                    } else {
-                        // Unknown status, poll again
-                        await new Promise(resolve => setTimeout(resolve, 1000));
-                        await pollUninstallOperation(operationId, pluginId, pluginName, maxAttempts, attempt + 1);
-                    }
-                } else {
-                    // Error getting operation status, try again
-                    await new Promise(resolve => setTimeout(resolve, 1000));
-                    await pollUninstallOperation(operationId, pluginId, pluginName, maxAttempts, attempt + 1);
-                }
-            } catch (error) {
-                console.error('Error polling operation status:', error);
-                // On error, refresh plugin list to see actual state
-                await app.loadInstalledPlugins();
-            }
-        }
-
-        // Assign to window for global access
-        window.uninstallPlugin = uninstallPlugin;
-
-        async function refreshPlugin(pluginId) {
-            try {
-                // Switch to the plugin manager tab briefly to refresh
-                const originalTab = app.activeTab;
-                app.activeTab = 'plugins';
-
-                // Wait a moment then switch back
-                setTimeout(() => {
-                    app.activeTab = originalTab;
-                    app.showNotification(`Refreshed ${pluginId}`, 'success');
-                }, 100);
-
-            } catch (error) {
-                app.showNotification('Error refreshing plugin: ' + error.message, 'error');
-            }
-        }
-
-        // Format commit information for display
-        function formatCommitInfo(commit, branch) {
-            if (!commit && !branch) return 'Unknown';
-            const shortCommit = commit ? String(commit).substring(0, 7) : '';
-            const branchText = branch ? String(branch) : '';
-
-            if (branchText && shortCommit) {
-                return `${branchText} · ${shortCommit}`;
-            }
-            if (branchText) {
-                return branchText;
-            }
-            if (shortCommit) {
-                return shortCommit;
-            }
-            return 'Latest';
-        }
-
-        // Format date for display
-        function formatDateInfo(dateString) {
-            if (!dateString) return 'Unknown';
-            
-            try {
-                const date = new Date(dateString);
-                const now = new Date();
-                const diffTime = Math.abs(now - date);
-                const diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24));
-                
-                if (diffDays < 1) {
-                    return 'Today';
-                } else if (diffDays < 2) {
-                    return 'Yesterday';
-                } else if (diffDays < 7) {
-                    return `${diffDays} days ago`;
-                } else if (diffDays < 30) {
-                    const weeks = Math.floor(diffDays / 7);
-                    return `${weeks} ${weeks === 1 ? 'week' : 'weeks'} ago`;
-                } else {
-                    // Return formatted date for older items
-                    return date.toLocaleDateString('en-US', { year: 'numeric', month: 'short', day: 'numeric' });
-                }
-            } catch (e) {
-                return dateString;
-            }
-        }
-
-        // Make functions available to Alpine.js
-        window.formatCommitInfo = formatCommitInfo;
-        window.formatDateInfo = formatDateInfo;
-
-    </script>
+    <script src="{{ url_for('static', filename='v3/js/app-shell.js') }}"></script>
 
     <!-- Custom v3 JavaScript -->
     <script src="{{ url_for('static', filename='v3/app.js') }}" defer></script>
@@ -4791,6 +981,7 @@
     <script src="{{ url_for('static', filename='v3/js/widgets/registry.js') }}" defer></script>
     <script src="{{ url_for('static', filename='v3/js/widgets/base-widget.js') }}" defer></script>
     <script src="{{ url_for('static', filename='v3/js/widgets/notification.js') }}" defer></script>
+    <script src="{{ url_for('static', filename='v3/js/widgets/plugin-order-list.js') }}" defer></script>
     <script src="{{ url_for('static', filename='v3/js/widgets/file-upload.js') }}?v=20260307" defer></script>
     <script src="{{ url_for('static', filename='v3/js/widgets/checkbox-group.js') }}" defer></script>
     <script src="{{ url_for('static', filename='v3/js/widgets/custom-feeds.js') }}" defer></script>
@@ -4822,269 +1013,9 @@
     <!-- Legacy plugins_manager.js (for backward compatibility during migration) -->
     <script src="{{ url_for('static', filename='v3/plugins_manager.js') }}?v=20260307" defer></script>
     
-    <!-- Custom feeds table helper functions -->
-    <script>
-        function addCustomFeedRow(fieldId, fullKey, maxItems, pluginId) {
-            const tbody = document.getElementById(fieldId + '_tbody');
-            if (!tbody) return;
-            
-            const currentRows = tbody.querySelectorAll('.custom-feed-row');
-            if (currentRows.length >= maxItems) {
-                alert(`Maximum ${maxItems} feeds allowed`);
-                return;
-            }
-            
-            const newIndex = currentRows.length;
-            const newRow = document.createElement('tr');
-            newRow.className = 'custom-feed-row';
-            newRow.setAttribute('data-index', newIndex);
-            
-            // Create name cell
-            const nameCell = document.createElement('td');
-            nameCell.className = 'px-4 py-3 whitespace-nowrap';
-            const nameInput = document.createElement('input');
-            nameInput.type = 'text';
-            nameInput.name = `${fullKey}.${newIndex}.name`;
-            nameInput.value = '';
-            nameInput.className = 'block w-full px-2 py-1 border border-gray-300 rounded text-sm';
-            nameInput.placeholder = 'Feed Name';
-            nameInput.required = true;
-            nameCell.appendChild(nameInput);
-            
-            // Create URL cell
-            const urlCell = document.createElement('td');
-            urlCell.className = 'px-4 py-3 whitespace-nowrap';
-            const urlInput = document.createElement('input');
-            urlInput.type = 'url';
-            urlInput.name = `${fullKey}.${newIndex}.url`;
-            urlInput.value = '';
-            urlInput.className = 'block w-full px-2 py-1 border border-gray-300 rounded text-sm';
-            urlInput.placeholder = 'https://example.com/feed';
-            urlInput.required = true;
-            urlCell.appendChild(urlInput);
-            
-            // Create logo cell
-            const logoCell = document.createElement('td');
-            logoCell.className = 'px-4 py-3 whitespace-nowrap';
-            const logoContainer = document.createElement('div');
-            logoContainer.className = 'flex items-center space-x-2';
-            
-            const fileInput = document.createElement('input');
-            fileInput.type = 'file';
-            fileInput.id = `${fieldId}_logo_${newIndex}`;
-            fileInput.accept = 'image/png,image/jpeg,image/bmp,image/gif';
-            fileInput.style.display = 'none';
-            fileInput.dataset.index = String(newIndex);
-            // Use addEventListener with dataset index to allow reindexing
-            fileInput.addEventListener('change', function(e) {
-                const idx = parseInt(e.target.dataset.index || '0', 10);
-                handleCustomFeedLogoUpload(e, fieldId, idx, pluginId, fullKey);
-            });
-            
-            const uploadButton = document.createElement('button');
-            uploadButton.type = 'button';
-            uploadButton.className = 'px-2 py-1 text-xs bg-gray-200 hover:bg-gray-300 rounded';
-            // Use fileInput directly instead of getElementById for reindexing compatibility
-            uploadButton.addEventListener('click', function() {
-                fileInput.click();
-            });
-            const uploadIcon = document.createElement('i');
-            uploadIcon.className = 'fas fa-upload mr-1';
-            uploadButton.appendChild(uploadIcon);
-            uploadButton.appendChild(document.createTextNode(' Upload'));
-            
-            const noLogoSpan = document.createElement('span');
-            noLogoSpan.className = 'text-xs text-gray-400';
-            noLogoSpan.textContent = 'No logo';
-            
-            logoContainer.appendChild(fileInput);
-            logoContainer.appendChild(uploadButton);
-            logoContainer.appendChild(noLogoSpan);
-            logoCell.appendChild(logoContainer);
-            
-            // Create enabled cell
-            const enabledCell = document.createElement('td');
-            enabledCell.className = 'px-4 py-3 whitespace-nowrap text-center';
-            const enabledInput = document.createElement('input');
-            enabledInput.type = 'checkbox';
-            enabledInput.name = `${fullKey}.${newIndex}.enabled`;
-            enabledInput.checked = true;
-            enabledInput.value = 'true';
-            enabledInput.className = 'h-4 w-4 text-blue-600';
-            enabledCell.appendChild(enabledInput);
-            
-            // Create remove cell
-            const removeCell = document.createElement('td');
-            removeCell.className = 'px-4 py-3 whitespace-nowrap text-center';
-            const removeButton = document.createElement('button');
-            removeButton.type = 'button';
-            removeButton.className = 'text-red-600 hover:text-red-800 px-2 py-1';
-            // Use addEventListener instead of string-based onclick to prevent injection
-            removeButton.addEventListener('click', function() {
-                removeCustomFeedRow(this);
-            });
-            const removeIcon = document.createElement('i');
-            removeIcon.className = 'fas fa-trash';
-            removeButton.appendChild(removeIcon);
-            removeCell.appendChild(removeButton);
-            
-            // Append all cells to row
-            newRow.appendChild(nameCell);
-            newRow.appendChild(urlCell);
-            newRow.appendChild(logoCell);
-            newRow.appendChild(enabledCell);
-            newRow.appendChild(removeCell);
-            tbody.appendChild(newRow);
-        }
-        
-        function removeCustomFeedRow(button) {
-            const row = button.closest('tr');
-            if (!row) return;
-            
-            if (confirm('Remove this feed?')) {
-                const tbody = row.parentElement;
-                if (!tbody) return;
-                
-                row.remove();
-                
-                // Re-index remaining rows
-                const rows = tbody.querySelectorAll('.custom-feed-row');
-                rows.forEach((r, index) => {
-                    const oldIndex = r.getAttribute('data-index');
-                    r.setAttribute('data-index', index);
-                    // Update all input names with new index
-                    r.querySelectorAll('input, button').forEach(input => {
-                        const name = input.getAttribute('name');
-                        if (name) {
-                            // Replace pattern like "feeds.custom_feeds.0.name" with "feeds.custom_feeds.1.name"
-                            input.setAttribute('name', name.replace(/\.\d+\./, `.${index}.`));
-                        }
-                        const id = input.id;
-                        if (id) {
-                            // Keep IDs aligned after reindex (supports both _logo_<n> and _logo_preview_<n>)
-                            input.id = id
-                                .replace(/_logo_preview_\d+$/, `_logo_preview_${index}`)
-                                .replace(/_logo_\d+$/, `_logo_${index}`);
-                        }
-                        // Keep dataset index aligned so event handlers remain correct after reindex
-                        if (input.dataset && 'index' in input.dataset) {
-                            input.dataset.index = String(index);
-                        }
-                    });
-                });
-            }
-        }
-        
-        function handleCustomFeedLogoUpload(event, fieldId, index, pluginId, fullKey) {
-            const file = event.target.files[0];
-            if (!file) return;
-            
-            const formData = new FormData();
-            formData.append('file', file);
-            formData.append('plugin_id', pluginId);
-            
-            fetch('/api/v3/plugins/assets/upload', {
-                method: 'POST',
-                body: formData
-            })
-            .then(response => {
-                // Check HTTP status before parsing JSON
-                if (!response.ok) {
-                    return response.text().then(text => {
-                        throw new Error(`Upload failed: ${response.status} ${response.statusText}${text ? ': ' + text : ''}`);
-                    });
-                }
-                return response.json();
-            })
-            .then(data => {
-                if (data.status === 'success' && data.data && data.data.files && data.data.files.length > 0) {
-                    const uploadedFile = data.data.files[0];
-                    const row = document.querySelector(`#${fieldId}_tbody tr[data-index="${index}"]`);
-                    if (row) {
-                        const logoCell = row.querySelector('td:nth-child(3)');
-                        const existingPathInput = logoCell.querySelector('input[name*=".logo.path"]');
-                        const existingIdInput = logoCell.querySelector('input[name*=".logo.id"]');
-                        const pathName = existingPathInput ? existingPathInput.name : `${fullKey}.${index}.logo.path`;
-                        const idName = existingIdInput ? existingIdInput.name : `${fullKey}.${index}.logo.id`;
-                        
-                        // Normalize path: remove leading slashes, then add single leading slash
-                        const normalizedPath = String(uploadedFile.path || '').replace(/^\/+/, '');
-                        const imageSrc = '/' + normalizedPath;
-                        
-                        // Clear logoCell and build DOM safely to prevent XSS
-                        logoCell.textContent = ''; // Clear existing content
-                        
-                        // Create container div
-                        const container = document.createElement('div');
-                        container.className = 'flex items-center space-x-2';
-                        
-                        // Create file input
-                        const fileInput = document.createElement('input');
-                        fileInput.type = 'file';
-                        fileInput.id = `${fieldId}_logo_${index}`;
-                        fileInput.accept = 'image/png,image/jpeg,image/bmp,image/gif';
-                        fileInput.style.display = 'none';
-                        fileInput.dataset.index = String(index);
-                        // Use addEventListener with dataset index to allow reindexing
-                        fileInput.addEventListener('change', function(e) {
-                            const idx = parseInt(e.target.dataset.index || '0', 10);
-                            handleCustomFeedLogoUpload(e, fieldId, idx, pluginId, fullKey);
-                        });
-                        
-                        // Create upload button
-                        const uploadButton = document.createElement('button');
-                        uploadButton.type = 'button';
-                        uploadButton.className = 'px-2 py-1 text-xs bg-gray-200 hover:bg-gray-300 rounded';
-                        // Use fileInput directly instead of getElementById for reindexing compatibility
-                        uploadButton.addEventListener('click', function() {
-                            fileInput.click();
-                        });
-                        const uploadIcon = document.createElement('i');
-                        uploadIcon.className = 'fas fa-upload mr-1';
-                        uploadButton.appendChild(uploadIcon);
-                        uploadButton.appendChild(document.createTextNode(' Upload'));
-                        
-                        // Create img element - use normalized path, set src via property to prevent XSS
-                        const img = document.createElement('img');
-                        img.src = imageSrc; // Use property assignment with normalized path
-                        img.alt = 'Logo';
-                        img.className = 'w-8 h-8 object-cover rounded border';
-                        img.id = `${fieldId}_logo_preview_${index}`;
-                        
-                        // Create hidden input for path - set value via property to prevent XSS
-                        const pathInput = document.createElement('input');
-                        pathInput.type = 'hidden';
-                        pathInput.name = pathName;
-                        pathInput.value = imageSrc;
-                        
-                        // Create hidden input for id - set value via property to prevent XSS
-                        const idInput = document.createElement('input');
-                        idInput.type = 'hidden';
-                        idInput.name = idName;
-                        idInput.value = String(uploadedFile.id); // Ensure it's a string
-                        
-                        // Append all elements to container
-                        container.appendChild(fileInput);
-                        container.appendChild(uploadButton);
-                        container.appendChild(img);
-                        container.appendChild(pathInput);
-                        container.appendChild(idInput);
-                        
-                        // Append container to logoCell
-                        logoCell.appendChild(container);
-                    }
-                    // Allow re-uploading the same file (change event won't fire otherwise)
-                    event.target.value = '';
-                } else {
-                    alert('Upload failed: ' + (data.message || 'Unknown error'));
-                }
-            })
-            .catch(error => {
-                console.error('Upload error:', error);
-                alert('Upload failed: ' + error.message);
-            });
-        }
-    </script>
+    <!-- Custom feeds table helpers live in js/widgets/custom-feeds.js (the
+         deferred widget's window assignments always shadowed the inline
+         copies that used to sit here, so the duplicates were removed) -->
     
     <!-- On-Demand Modal (moved here from plugins.html so it's always available) -->
     <div id="on-demand-modal" class="fixed inset-0 modal-backdrop flex items-center justify-center z-50" style="display: none;">
diff --git a/web_interface/templates/v3/captive_setup.html b/web_interface/templates/v3/captive_setup.html
index 5490d845..bce4cd5e 100644
--- a/web_interface/templates/v3/captive_setup.html
+++ b/web_interface/templates/v3/captive_setup.html
@@ -87,7 +87,7 @@ select:focus,input:focus{outline:none;border-color:#3b82f6;box-shadow:0 0 0 3px
 </div>
 
 <div class="footer">
-  <a href="/v3">Open Full Interface</a>
+  <a href="/">Open Full Interface</a>
 </div>
 
 <script>
diff --git a/web_interface/templates/v3/partials/display.html b/web_interface/templates/v3/partials/display.html
index d9ffd15e..b577010f 100644
--- a/web_interface/templates/v3/partials/display.html
+++ b/web_interface/templates/v3/partials/display.html
@@ -22,7 +22,7 @@
             On Raspberry Pi 5: ensure the library was rebuilt from the latest submodule
             (<code class="bg-yellow-100 px-1 rounded">first_time_install.sh</code>)
             and try adjusting <strong>GPIO Slowdown</strong> (start at 3, reduce if the display looks dim or choppy).
-            Check the <a href="/v3/logs" class="underline font-medium">Logs tab</a> for the full error.
+            Check the <a href="#" @click.prevent="activeTab = 'logs'" class="underline font-medium">Logs tab</a> for the full error.
         </p>
     </div>
 
@@ -47,7 +47,7 @@
                            name="rows"
                            value="{{ main_config.display.hardware.rows or 32 }}"
                            min="1"
-                           max="64"
+                           max="128"
                            class="form-control">
                 </div>
 
@@ -85,7 +85,14 @@
                 </div>
             </div>
 
-            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+            <!-- Live total-resolution readout: width = cols x chain_length, height = rows x parallel -->
+            <p id="display-resolution-readout" class="text-sm text-gray-600 mb-4" aria-live="polite">
+                <i class="fas fa-expand-arrows-alt mr-1 text-gray-400"></i>
+                Your display: <strong id="display-resolution-value">&mdash;</strong>
+                <span class="text-gray-400">(columns &times; chain length wide, rows &times; parallel tall)</span>
+            </p>
+
+            <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
                 <div class="form-group" id="setting-display-brightness" data-setting-key="display.hardware.brightness">
                     <label for="brightness" class="block text-sm font-medium text-gray-700">Brightness{{ ui.help_tip('Overall LED brightness (1–100%).\nLower is dimmer, higher is brighter. Recommended: 70–90 indoors, 90–100 in bright rooms.', 'Brightness') }}</label>
                     <div class="flex items-center space-x-2">
@@ -109,9 +116,7 @@
                         <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-3 gap-4">
                 <div class="form-group" id="setting-display-led_rgb_sequence" data-setting-key="display.hardware.led_rgb_sequence">
                     <label for="led_rgb_sequence" class="block text-sm font-medium text-gray-700">LED RGB Sequence{{ ui.help_tip('Order the panel expects color channels in.\nChange this only if reds/greens/blues look swapped. Default: RGB.', 'LED RGB Sequence') }}</label>
                     <select id="led_rgb_sequence" name="led_rgb_sequence" class="form-control">
@@ -123,7 +128,29 @@
                         <option value="BGR" {% if main_config.display.hardware.get('led_rgb_sequence', 'RGB') == "BGR" %}selected{% endif %}>BGR</option>
                     </select>
                 </div>
+            </div>
 
+            <!-- Advanced hardware settings: niche-panel and deep tuning fields.
+                 Collapsed by default; reuses the same nested-section shell as
+                 plugin config forms, so toggleSection() and the settings
+                 search's auto-expand both work unchanged. -->
+            <div class="nested-section border border-gray-300 rounded-lg mt-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"
+                        aria-controls="display-section-advanced-hardware"
+                        aria-expanded="false"
+                        onclick="toggleSection('display-section-advanced-hardware')">
+                    <div class="flex-1">
+                        <h4 class="font-semibold text-gray-900">
+                            <i class="fas fa-sliders-h mr-1 text-gray-500"></i>Advanced Hardware &amp; Display Options (15)
+                        </h4>
+                        <p class="text-sm text-gray-600 mt-1">Multiplexing, panel variants, PWM tuning, and display options &mdash; the defaults work for standard HUB75 panels.</p>
+                    </div>
+                    <i id="display-section-advanced-hardware-icon" class="fas fa-chevron-right text-gray-500 transition-transform"></i>
+                </button>
+                <div id="display-section-advanced-hardware" class="nested-content bg-gray-50 px-4 py-4 space-y-4 hidden" style="display: none;">
+
+            <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
                 <div class="form-group" id="setting-display-multiplexing" data-setting-key="display.hardware.multiplexing">
                     <label for="multiplexing" class="block text-sm font-medium text-gray-700">Multiplexing{{ ui.help_tip('Pixel-mapping scheme used by outdoor/specialty panels.\nLeave at 0 (Direct) for most indoor panels. Only change if the image is scrambled — try values until it looks right.', 'Multiplexing') }}</label>
                     <select id="multiplexing" name="multiplexing" class="form-control">
@@ -255,47 +282,6 @@
                            class="form-control">
                 </div>
             </div>
-        </div>
-
-        <!-- Double-Sided Display -->
-        <div class="bg-gray-50 rounded-lg p-4">
-            <h3 class="text-md font-medium text-gray-900 mb-1">Double-Sided Display</h3>
-            <p class="text-sm text-gray-600 mb-4">Show the same content on every panel in the chain &mdash; e.g. two 64&times;32 panels mirrored, or four panels as two identical screens. Rendered once and duplicated, so it adds no extra CPU. Takes effect after a display restart.</p>
-
-            <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
-                <div class="form-group" id="setting-display-double_sided_enabled" data-setting-key="display.double_sided.enabled">
-                    <label class="flex items-center gap-2">
-                        <input type="checkbox"
-                               id="double_sided_enabled"
-                               name="double_sided_enabled"
-                               value="true"
-                               {% if main_config.display.get('double_sided', {}).get('enabled') %}checked{% endif %}
-                               class="form-control h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded">
-                        <span class="text-sm font-medium text-gray-700">Enabled</span>
-                        {{ ui.help_tip('Show the same content mirrored across every panel in the chain.\nRendered once and duplicated, so it adds no extra CPU. Takes effect after a display restart.', 'Double-Sided Enabled') }}
-                    </label>
-                </div>
-
-                <div class="form-group" id="setting-display-double_sided_copies" data-setting-key="display.double_sided.copies">
-                    <label for="double_sided_copies" class="block text-sm font-medium text-gray-700">Copies{{ ui.help_tip('How many identical screens to split the panel area into (2–8).\nMust divide the panel evenly — e.g. 2 for a two-sided cube.', 'Copies') }}</label>
-                    <input type="number"
-                           id="double_sided_copies"
-                           name="double_sided_copies"
-                           value="{{ main_config.display.get('double_sided', {}).get('copies', 2) }}"
-                           min="2"
-                           max="8"
-                           class="form-control">
-                </div>
-
-                <div class="form-group" id="setting-display-double_sided_axis" data-setting-key="display.double_sided.axis">
-                    <label for="double_sided_axis" class="block text-sm font-medium text-gray-700">Split Axis{{ ui.help_tip('Direction the display is divided into copies.\nHorizontal splits along the chained panels (side by side); Vertical splits along parallel chains (stacked).', 'Split Axis') }}</label>
-                    <select id="double_sided_axis" name="double_sided_axis" class="form-control">
-                        <option value="horizontal" {% if main_config.display.get('double_sided', {}).get('axis', 'horizontal') == 'horizontal' %}selected{% endif %}>Horizontal &mdash; chained panels (side by side)</option>
-                        <option value="vertical" {% if main_config.display.get('double_sided', {}).get('axis', 'horizontal') == 'vertical' %}selected{% endif %}>Vertical &mdash; parallel chains (stacked)</option>
-                    </select>
-                </div>
-            </div>
-        </div>
 
         <!-- Display Options -->
         <div class="bg-gray-50 rounded-lg p-4">
@@ -368,6 +354,36 @@
                 </div>
             </div>
         </div>
+                </div> <!-- /#display-section-advanced-hardware (nested-content) -->
+            </div> <!-- /advanced hardware nested-section -->
+
+            <script>
+                // Live "Your display: W x H" readout - width = cols x chain_length,
+                // height = rows x parallel (same math as the chain-length tooltip).
+                (function () {
+                    const ids = ['rows', 'cols', 'chain_length', 'parallel'];
+                    const out = document.getElementById('display-resolution-value');
+                    if (!out) return;
+                    function recompute() {
+                        const v = {};
+                        for (const id of ids) {
+                            const el = document.getElementById(id);
+                            v[id] = el ? parseInt(el.value, 10) : NaN;
+                        }
+                        if (Object.values(v).some(n => !Number.isFinite(n) || n <= 0)) {
+                            out.textContent = '—';
+                            return;
+                        }
+                        out.textContent = (v.cols * v.chain_length) + ' × ' + (v.rows * v.parallel) + ' pixels';
+                    }
+                    for (const id of ids) {
+                        const el = document.getElementById(id);
+                        if (el) el.addEventListener('input', recompute);
+                    }
+                    recompute();
+                })();
+            </script>
+        </div>
 
         <!-- Vegas Scroll Mode Settings -->
         <div class="bg-gray-50 rounded-lg p-4 mt-6">
@@ -454,6 +470,48 @@
             </div>
         </div>
 
+        <!-- Double-Sided Display -->
+        <div class="bg-gray-50 rounded-lg p-4">
+            <h3 class="text-md font-medium text-gray-900 mb-1">Double-Sided Display</h3>
+            <p class="text-sm text-gray-600 mb-4">Show the same content on every panel in the chain &mdash; e.g. two 64&times;32 panels mirrored, or four panels as two identical screens. Rendered once and duplicated, so it adds no extra CPU. Takes effect after a display restart.</p>
+
+            <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
+                <div class="form-group" id="setting-display-double_sided_enabled" data-setting-key="display.double_sided.enabled">
+                    <label class="flex items-center gap-2">
+                        <input type="checkbox"
+                               id="double_sided_enabled"
+                               name="double_sided_enabled"
+                               value="true"
+                               {% if main_config.display.get('double_sided', {}).get('enabled') %}checked{% endif %}
+                               class="form-control h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded">
+                        <span class="text-sm font-medium text-gray-700">Enabled</span>
+                        {{ ui.help_tip('Show the same content mirrored across every panel in the chain.\nRendered once and duplicated, so it adds no extra CPU. Takes effect after a display restart.', 'Double-Sided Enabled') }}
+                    </label>
+                </div>
+
+                <div class="form-group" id="setting-display-double_sided_copies" data-setting-key="display.double_sided.copies">
+                    <label for="double_sided_copies" class="block text-sm font-medium text-gray-700">Copies{{ ui.help_tip('How many identical screens to split the panel area into (2–8).\nMust divide the panel evenly — e.g. 2 for a two-sided cube.', 'Copies') }}</label>
+                    <input type="number"
+                           id="double_sided_copies"
+                           name="double_sided_copies"
+                           value="{{ main_config.display.get('double_sided', {}).get('copies', 2) }}"
+                           min="2"
+                           max="8"
+                           class="form-control">
+                </div>
+
+                <div class="form-group" id="setting-display-double_sided_axis" data-setting-key="display.double_sided.axis">
+                    <label for="double_sided_axis" class="block text-sm font-medium text-gray-700">Split Axis{{ ui.help_tip('Direction the display is divided into copies.\nHorizontal splits along the chained panels (side by side); Vertical splits along parallel chains (stacked).', 'Split Axis') }}</label>
+                    <select id="double_sided_axis" name="double_sided_axis" class="form-control">
+                        <option value="horizontal" {% if main_config.display.get('double_sided', {}).get('axis', 'horizontal') == 'horizontal' %}selected{% endif %}>Horizontal &mdash; chained panels (side by side)</option>
+                        <option value="vertical" {% if main_config.display.get('double_sided', {}).get('axis', 'horizontal') == 'vertical' %}selected{% endif %}>Vertical &mdash; parallel chains (stacked)</option>
+                    </select>
+                </div>
+            </div>
+        </div>
+
+
+
         <!-- Multi-Display Sync Settings -->
         <div class="bg-gray-50 rounded-lg p-4 mt-6">
             <div class="flex items-center justify-between mb-4">
@@ -583,183 +641,32 @@ if (typeof window.fixInvalidNumberInputs !== 'function') {
         });
     }
 
-    // Initialize plugin order list
-    function initPluginOrderList() {
+    // Initialize plugin order list via the shared drag-and-drop module
+    // (static/v3/js/widgets/plugin-order-list.js) — the same component the
+    // Durations tab uses for the primary rotation order.
+    function initPluginOrderList(attempt) {
         const container = document.getElementById('vegas_plugin_order');
         if (!container) return;
-
-        // Fetch available plugins
-        fetch('/api/v3/plugins/installed')
-            .then(response => response.json())
-            .then(data => {
-                // Handle both {data: {plugins: []}} and {plugins: []} response formats
-                const allPlugins = data.data?.plugins || data.plugins || [];
-                if (!allPlugins || allPlugins.length === 0) {
-                    container.innerHTML = '<p class="text-sm text-gray-500 italic">No plugins available</p>';
-                    return;
-                }
-
-                // Get current order and exclusions
-                const orderInput = document.getElementById('vegas_plugin_order_value');
-                const excludedInput = document.getElementById('vegas_excluded_plugins_value');
-                let currentOrder = [];
-                let excluded = [];
-
-                try {
-                    currentOrder = JSON.parse(orderInput.value || '[]');
-                    excluded = JSON.parse(excludedInput.value || '[]');
-                } catch (e) {
-                    console.error('Error parsing vegas config:', e);
-                }
-
-                // Build ordered plugin list (only enabled plugins)
-                const plugins = allPlugins.filter(p => p.enabled);
-                const orderedPlugins = [];
-
-                // First add plugins in current order
-                currentOrder.forEach(id => {
-                    const plugin = plugins.find(p => p.id === id);
-                    if (plugin) orderedPlugins.push(plugin);
-                });
-
-                // Then add remaining plugins
-                plugins.forEach(plugin => {
-                    if (!orderedPlugins.find(p => p.id === plugin.id)) {
-                        orderedPlugins.push(plugin);
-                    }
-                });
-
-                // Build HTML with display mode indicators
-                let html = '';
-                orderedPlugins.forEach((plugin, index) => {
-                    const isExcluded = excluded.includes(plugin.id);
-                    // Determine display mode (from plugin config or default)
-                    const vegasMode = plugin.vegas_mode || plugin.vegas_content_type || 'fixed';
-                    const modeLabels = {
-                        'scroll': { label: 'Scroll', icon: 'fa-scroll', color: 'text-blue-600' },
-                        'fixed': { label: 'Fixed', icon: 'fa-square', color: 'text-green-600' },
-                        'static': { label: 'Static', icon: 'fa-pause', color: 'text-orange-600' }
-                    };
-                    const modeInfo = modeLabels[vegasMode] || modeLabels['fixed'];
-                    // Escape plugin metadata to prevent XSS
-                    const safePluginId = escapeAttr(plugin.id);
-                    const safePluginName = escapeHtml(plugin.name || plugin.id);
-                    html += `
-                        <div class="flex items-center p-2 bg-gray-50 rounded border border-gray-200 cursor-move vegas-plugin-item"
-                             data-plugin-id="${safePluginId}" draggable="true">
-                            <i class="fas fa-grip-vertical text-gray-400 mr-3"></i>
-                            <label class="flex items-center flex-1">
-                                <input type="checkbox"
-                                       class="vegas-plugin-include h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded mr-2"
-                                       ${!isExcluded ? 'checked' : ''}>
-                                <span class="text-sm font-medium text-gray-700">${safePluginName}</span>
-                            </label>
-                            <span class="text-xs ${modeInfo.color} ml-2" title="Vegas display mode: ${modeInfo.label}">
-                                <i class="fas ${modeInfo.icon} mr-1"></i>${modeInfo.label}
-                            </span>
-                        </div>
-                    `;
-                });
-
-                container.innerHTML = html || '<p class="text-sm text-gray-500 italic">No enabled plugins</p>';
-
-                // Setup drag and drop
-                setupDragAndDrop(container);
-
-                // Setup checkbox handlers
-                container.querySelectorAll('.vegas-plugin-include').forEach(checkbox => {
-                    checkbox.addEventListener('change', updatePluginConfig);
-                });
-
-                // Initialize hidden inputs with current state
-                updatePluginConfig();
-            })
-            .catch(error => {
-                console.error('Error fetching plugins:', error);
-                container.innerHTML = '<p class="text-sm text-red-500">Error loading plugins</p>';
-            });
-    }
-
-    function setupDragAndDrop(container) {
-        let draggedItem = null;
-
-        container.querySelectorAll('.vegas-plugin-item').forEach(item => {
-            item.addEventListener('dragstart', function(e) {
-                draggedItem = this;
-                this.style.opacity = '0.5';
-                e.dataTransfer.effectAllowed = 'move';
-            });
-
-            item.addEventListener('dragend', function() {
-                this.style.opacity = '1';
-                draggedItem = null;
-                updatePluginConfig();
-            });
-
-            item.addEventListener('dragover', function(e) {
-                e.preventDefault();
-                e.dataTransfer.dropEffect = 'move';
-
-                const rect = this.getBoundingClientRect();
-                const midY = rect.top + rect.height / 2;
-
-                if (e.clientY < midY) {
-                    this.style.borderTop = '2px solid #3b82f6';
-                    this.style.borderBottom = '';
-                } else {
-                    this.style.borderBottom = '2px solid #3b82f6';
-                    this.style.borderTop = '';
-                }
-            });
-
-            item.addEventListener('dragleave', function() {
-                this.style.borderTop = '';
-                this.style.borderBottom = '';
-            });
-
-            item.addEventListener('drop', function(e) {
-                e.preventDefault();
-                this.style.borderTop = '';
-                this.style.borderBottom = '';
-
-                if (draggedItem && draggedItem !== this) {
-                    const rect = this.getBoundingClientRect();
-                    const midY = rect.top + rect.height / 2;
-
-                    if (e.clientY < midY) {
-                        container.insertBefore(draggedItem, this);
-                    } else {
-                        container.insertBefore(draggedItem, this.nextSibling);
-                    }
-                }
-            });
-        });
-    }
-
-    function updatePluginConfig() {
-        const container = document.getElementById('vegas_plugin_order');
-        const orderInput = document.getElementById('vegas_plugin_order_value');
-        const excludedInput = document.getElementById('vegas_excluded_plugins_value');
-
-        if (!container || !orderInput || !excludedInput) return;
-
-        const order = [];
-        const excluded = [];
-
-        container.querySelectorAll('.vegas-plugin-item').forEach(item => {
-            const pluginId = item.dataset.pluginId;
-            const checkbox = item.querySelector('.vegas-plugin-include');
-
-            order.push(pluginId);
-            if (checkbox && !checkbox.checked) {
-                excluded.push(pluginId);
+        if (!window.PluginOrderList) {
+            // Widget script is deferred; retry briefly, then surface a real
+            // error instead of waiting forever.
+            if ((attempt || 0) < 50) {
+                setTimeout(function() { initPluginOrderList((attempt || 0) + 1); }, 100);
+            } else {
+                container.textContent = 'Could not load the reorder widget — reload the page to try again.';
+                container.className = 'text-sm text-red-500';
             }
+            return;
+        }
+        window.PluginOrderList.init({
+            containerId: 'vegas_plugin_order',
+            orderInputId: 'vegas_plugin_order_value',
+            excludedInputId: 'vegas_excluded_plugins_value',
+            showVegasModeBadge: true
         });
-
-        orderInput.value = JSON.stringify(order);
-        excludedInput.value = JSON.stringify(excluded);
     }
 
+
     // Initialize on DOM ready
     if (document.readyState === 'loading') {
         document.addEventListener('DOMContentLoaded', initPluginOrderList);
diff --git a/web_interface/templates/v3/partials/durations.html b/web_interface/templates/v3/partials/durations.html
index 0a1f05aa..e05f8aa1 100644
--- a/web_interface/templates/v3/partials/durations.html
+++ b/web_interface/templates/v3/partials/durations.html
@@ -1,8 +1,8 @@
 {% import 'v3/partials/_macros.html' as ui %}
 <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>
+        <h2 class="text-lg font-semibold text-gray-900">Rotation &amp; Durations</h2>
+        <p class="mt-1 text-sm text-gray-600">Set the order plugins rotate on the display and how long each screen is shown. Durations are in seconds.</p>
     </div>
 
     {{ ui.settings_filter() }}
@@ -16,22 +16,53 @@
           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" id="setting-durations-{{ key }}" data-setting-key="display.display_durations.{{ key }}">
-                <label for="duration_{{ key }}" class="block text-sm font-medium text-gray-700">
-                    {{ key | replace('_', ' ') | title }}{{ ui.help_tip('How long the ' ~ (key | replace('_', ' ')) ~ ' screen stays on before rotating to the next one, in seconds.\nRange: 5–600. Currently ' ~ value ~ 's.', key | replace('_', ' ') | title) }}
-                </label>
-                <input type="number"
-                       id="duration_{{ key }}"
-                       name="{{ key }}"
-                       value="{{ value }}"
-                       min="5"
-                       max="600"
-                       class="form-control">
+        <!-- Primary rotation order: drag to reorder which plugin shows first,
+             second, ... in the normal display rotation. Saved as
+             display.plugin_rotation_order and applied by the display
+             controller on startup and live plugin enable/disable. -->
+        <div class="bg-gray-50 rounded-lg p-4">
+            <h3 class="text-md font-medium text-gray-900 mb-1">Rotation Order</h3>
+            <p class="text-sm text-gray-600 mb-3">Drag plugins to set the order they rotate on the display. Each plugin's screens keep their own order within its turn. Takes effect after saving and restarting the display.</p>
+            <div id="rotation_plugin_order" class="space-y-2 bg-white rounded-lg p-3 border border-gray-200">
+                <p class="text-sm text-gray-500 italic">Loading plugins…</p>
+            </div>
+            <input type="hidden" id="rotation_plugin_order_value" name="plugin_rotation_order"
+                   value='{{ main_config.display.get("plugin_rotation_order", [])|tojson }}'>
+        </div>
+
+        {% if duration_groups %}
+        <div class="bg-gray-50 rounded-lg p-4 space-y-5">
+            <div>
+                <h3 class="text-md font-medium text-gray-900 mb-1">Screen Durations</h3>
+                <p class="text-sm text-gray-600">How long each screen stays on before rotating to the next one, in seconds (5&ndash;600, default 30).</p>
+            </div>
+            {% for group in duration_groups %}
+            <div>
+                <h4 class="text-sm font-semibold text-gray-800 mb-2">{{ group.plugin_name }}</h4>
+                <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+                    {% for mode in group.modes %}
+                    <div class="form-group" id="setting-durations-{{ mode.key }}" data-setting-key="display.display_durations.{{ mode.key }}">
+                        <label for="duration__{{ mode.key }}" class="block text-sm font-medium text-gray-700">
+                            {{ mode.key | replace('_', ' ') | title }}{{ ui.help_tip('How long the ' ~ (mode.key | replace('_', ' ')) ~ ' screen stays on before rotating to the next one, in seconds.\nRange: 5–600. Currently ' ~ mode.value ~ 's.', mode.key | replace('_', ' ') | title) }}
+                        </label>
+                        <input type="number"
+                               id="duration__{{ mode.key }}"
+                               name="duration__{{ mode.key }}"
+                               value="{{ mode.value }}"
+                               min="5"
+                               max="600"
+                               class="form-control">
+                    </div>
+                    {% endfor %}
+                </div>
             </div>
             {% endfor %}
         </div>
+        {% else %}
+        <div class="bg-gray-50 rounded-lg p-4">
+            <p class="text-sm text-gray-500 italic">No enabled plugins found &mdash; enable a plugin in the Plugin Manager to set its screen durations here.</p>
+        </div>
+        {% endif %}
 
         <!-- Submit Button -->
         <div class="flex justify-end">
@@ -43,3 +74,34 @@
         </div>
     </form>
 </div>
+
+<script>
+(function () {
+    // Shared drag-and-drop plugin list (static/v3/js/widgets/plugin-order-list.js,
+    // same module the Vegas Scroll section uses).
+    function initRotationOrderList(attempt) {
+        const container = document.getElementById('rotation_plugin_order');
+        if (!container) return;
+        if (!window.PluginOrderList) {
+            // Widget script is deferred; retry briefly, then surface a real
+            // error instead of showing "Loading…" forever.
+            if ((attempt || 0) < 50) {
+                setTimeout(function() { initRotationOrderList((attempt || 0) + 1); }, 100);
+            } else {
+                container.textContent = 'Could not load the reorder widget — reload the page to try again.';
+                container.className = 'text-sm text-red-500';
+            }
+            return;
+        }
+        window.PluginOrderList.init({
+            containerId: 'rotation_plugin_order',
+            orderInputId: 'rotation_plugin_order_value'
+        });
+    }
+    if (document.readyState === 'loading') {
+        document.addEventListener('DOMContentLoaded', initRotationOrderList);
+    } else {
+        initRotationOrderList();
+    }
+}());
+</script>
diff --git a/web_interface/templates/v3/partials/overview.html b/web_interface/templates/v3/partials/overview.html
index cc74120a..47713d8d 100644
--- a/web_interface/templates/v3/partials/overview.html
+++ b/web_interface/templates/v3/partials/overview.html
@@ -61,6 +61,149 @@
 }());
 </script>
 
+<!-- Getting Started checklist: non-gating, dismissible (localStorage), items
+     auto-check from existing config/endpoints — no new persisted state.
+     Known heuristic limits (acceptable, disclosed): values left at legitimate
+     defaults (e.g. a user actually in Tampa) read as "not done". -->
+{% set _hw = main_config.display.hardware if main_config and main_config.display else {} %}
+{% set _hw_done = (_hw.rows or 0) > 0 and (_hw.cols or 0) > 0 and (_hw.chain_length or 0) > 0 %}
+{% set _loc = main_config.location if main_config and main_config.location else {} %}
+{% set _loc_done = (main_config.timezone and main_config.timezone != 'America/New_York')
+                   or (_loc.city and _loc.city != 'Tampa') %}
+<div id="getting-started-card" class="bg-blue-50 border border-blue-200 rounded-lg p-4 mb-4" style="display:none" role="region" aria-label="Getting started checklist">
+    <div class="flex items-start justify-between">
+        <div class="flex-1">
+            <p class="text-sm font-semibold text-blue-900"><i class="fas fa-rocket mr-1"></i>Getting Started</p>
+            <p class="text-xs text-blue-700 mt-0.5 mb-2">A few steps to get your display up and running. Click a step to jump there, or click its checkbox to mark it done yourself. The card hides once everything is checked.</p>
+            <ul class="space-y-1 text-sm" id="getting-started-items">
+                <li><button type="button" class="gs-item text-left w-full" data-done="{{ '1' if _hw_done else '0' }}" data-tab="display">
+                    <i class="far fa-square mr-2"></i>Set your panel size (Display tab)</button></li>
+                <li><button type="button" class="gs-item text-left w-full" data-done="{{ '1' if _loc_done else '0' }}" data-tab="general">
+                    <i class="far fa-square mr-2"></i>Set your timezone and location (General tab)</button></li>
+                <li><button type="button" class="gs-item text-left w-full" data-done="0" data-check="installed" data-tab="plugins">
+                    <i class="far fa-square mr-2"></i>Install a plugin from the Plugin Store</button></li>
+                <li><button type="button" class="gs-item text-left w-full" data-done="0" data-check="enabled" data-tab="plugins">
+                    <i class="far fa-square mr-2"></i>Enable a plugin</button></li>
+                <li><button type="button" class="gs-item text-left w-full" data-done="0" data-check="configured" data-tab="plugins">
+                    <i class="far fa-square mr-2"></i>Configure it (each plugin gets its own tab)</button></li>
+            </ul>
+        </div>
+        <button type="button" onclick="window.dismissGettingStarted()" class="ml-4 flex-shrink-0 text-blue-400 hover:text-blue-600" aria-label="Dismiss getting started checklist">
+            <i class="fas fa-times"></i>
+        </button>
+    </div>
+</div>
+<script>
+(function () {
+    var KEY = 'ledmatrix-getting-started-dismissed';
+    var MANUAL_KEY = 'ledmatrix-getting-started-manual';
+    var card = document.getElementById('getting-started-card');
+    if (!card) return;
+    try { if (localStorage.getItem(KEY) === '1') return; } catch (e) {}
+    card.style.display = 'block';
+
+    // Manual per-item overrides: the auto-detection is heuristic (a value
+    // saved AT its default — e.g. a user genuinely in the default timezone —
+    // reads as "not done"), so clicking an item's checkbox marks it done by
+    // hand, persisted per browser.
+    var manual = {};
+    try { manual = JSON.parse(localStorage.getItem(MANUAL_KEY) || '{}') || {}; } catch (e) {}
+    function saveManual() {
+        try { localStorage.setItem(MANUAL_KEY, JSON.stringify(manual)); } catch (e) {}
+    }
+
+    function setDone(btn, done) {
+        btn.dataset.done = done ? '1' : '0';
+        var icon = btn.querySelector('i');
+        if (icon) { icon.className = done ? 'fas fa-check-square mr-2 text-green-600' : 'far fa-square mr-2'; }
+        btn.classList.toggle('text-gray-500', done);
+        btn.classList.toggle('line-through', done);
+    }
+
+    // Once every step is done (auto-detected or manually checked), the card
+    // has served its purpose — hide it without requiring an explicit dismiss.
+    function maybeAutoHide() {
+        var items = card.querySelectorAll('.gs-item');
+        for (var i = 0; i < items.length; i++) {
+            if (items[i].dataset.done !== '1') return;
+        }
+        card.style.display = 'none';
+    }
+
+    function markDone(btn) {
+        if (!btn) return;
+        setDone(btn, true);
+        maybeAutoHide();
+    }
+
+    // Apply server-derived + manual states, wire deep links (same app-data
+    // access pattern as settings-search.js). Clicking the checkbox icon
+    // toggles manual done; clicking the text deep-links to the tab.
+    Array.prototype.forEach.call(card.querySelectorAll('.gs-item'), function (btn, idx) {
+        if (manual[idx] === 1) btn.dataset.done = '1';
+        if (btn.dataset.done === '1') setDone(btn, true);
+        btn.addEventListener('click', function (ev) {
+            var icon = btn.querySelector('i');
+            if (icon && ev.target === icon) {
+                var nowDone = btn.dataset.done !== '1';
+                setDone(btn, nowDone);
+                manual[idx] = nowDone ? 1 : 0;
+                saveManual();
+                if (nowDone) maybeAutoHide();
+                return;
+            }
+            var appEl = document.querySelector('[x-data="app()"]') || document.querySelector('[x-data]');
+            // Same two-tier resolution as settings-search.js's getAppData():
+            // _x_dataStack on current Alpine, __x.$data as an older-API fallback.
+            var data = appEl && ((appEl._x_dataStack && appEl._x_dataStack[0]) ||
+                                  (appEl.__x && appEl.__x.$data));
+            if (data) {
+                data.activeTab = btn.dataset.tab;
+                if ('mobileNavOpen' in data) data.mobileNavOpen = false;
+            }
+        });
+    });
+    maybeAutoHide();
+
+    // Plugin-derived states from the existing installed-plugins endpoint.
+    fetch('/api/v3/plugins/installed')
+        .then(function (r) { return r.json(); })
+        .then(function (resp) {
+            var plugins = (resp.data && resp.data.plugins) || [];
+            if (plugins.length > 0) markDone(card.querySelector('[data-check="installed"]'));
+            var enabled = plugins.filter(function (p) { return p.enabled; });
+            if (enabled.length > 0) {
+                markDone(card.querySelector('[data-check="enabled"]'));
+                // "Configured" heuristic: the first enabled plugin has at least
+                // one saved value that differs from its schema defaults.
+                var pid = enabled[0].id;
+                Promise.all([
+                    fetch('/api/v3/plugins/config?plugin_id=' + encodeURIComponent(pid)).then(function (r) { return r.json(); }),
+                    fetch('/api/v3/plugins/schema?plugin_id=' + encodeURIComponent(pid)).then(function (r) { return r.json(); })
+                ]).then(function (res) {
+                    // GET /plugins/config returns the config dict directly in .data
+                    var cfg = res[0].data || {};
+                    var props = (res[1].data && res[1].data.schema && res[1].data.schema.properties) || {};
+                    for (var k in cfg) {
+                        if (k === 'enabled' || !(k in props)) continue;
+                        if (props[k] && 'default' in props[k] &&
+                            JSON.stringify(cfg[k]) !== JSON.stringify(props[k]['default'])) {
+                            markDone(card.querySelector('[data-check="configured"]'));
+                            return;
+                        }
+                    }
+                }).catch(function () {});
+            }
+        })
+        .catch(function () {});
+
+    window.dismissGettingStarted = function () {
+        card.style.display = 'none';
+        try { localStorage.setItem(KEY, '1'); } catch (e) {}
+    };
+}());
+</script>
+
 <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>
@@ -221,7 +364,10 @@
         <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;">
+        <!-- overflow-x-auto: on narrow screens a wide preview scrolls at its
+             true pixel-perfect size instead of being squeezed (fractional
+             downscaling of pixel art reads as blur) -->
+        <div class="bg-gray-900 rounded-lg p-6 border border-gray-700 overflow-x-auto" 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">
diff --git a/web_interface/templates/v3/partials/plugin_config.html b/web_interface/templates/v3/partials/plugin_config.html
index e427918f..a959ba96 100644
--- a/web_interface/templates/v3/partials/plugin_config.html
+++ b/web_interface/templates/v3/partials/plugin_config.html
@@ -893,6 +893,12 @@
                 <p class="mt-1 text-sm text-gray-600">{{ plugin.description or 'Plugin configuration' }}</p>
             </div>
             <div class="flex items-center space-x-4">
+                <button type="button"
+                        onclick="window.previewPluginNow('{{ plugin.id }}')"
+                        class="btn bg-blue-600 hover:bg-blue-700 text-white px-3 py-1.5 text-sm rounded-md"
+                        title="Run this plugin on the display for 60 seconds and open the live preview">
+                    <i class="fas fa-play mr-1"></i>Preview on display
+                </button>
                 <label class="flex items-center cursor-pointer">
                     <input type="checkbox"
                            id="plugin-enabled-{{ plugin.id }}"
@@ -1005,13 +1011,53 @@
                         {# 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 %}
+                        {# Flat (non-object) properties flagged "x-advanced": true are
+                           grouped into one collapsed "Advanced Settings" section after
+                           the basic fields. Object-type properties already render as
+                           their own collapsible sections, so the flag is ignored for
+                           them. Schemas without the flag render exactly as before. #}
+                        {% set tiers = namespace(basic=[], advanced=[]) %}
                         {% 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) }}
+                                {% set is_object = prop.type is defined and 'object' in prop.type %}
+                                {% if prop.get('x-advanced') and not is_object %}
+                                    {% set tiers.advanced = tiers.advanced + [key] %}
+                                {% else %}
+                                    {% set tiers.basic = tiers.basic + [key] %}
+                                {% endif %}
                             {% endif %}
                         {% endfor %}
+                        {% for key in tiers.basic %}
+                            {% set prop = schema.properties[key] %}
+                            {% set value = config[key] if key in config else none %}
+                            {{ render_field(key, prop, value, '', plugin.id) }}
+                        {% endfor %}
+                        {% if tiers.advanced %}
+                            {% set adv_section_id = (plugin.id ~ '-section-advanced-settings')|replace('.', '-')|replace('_', '-') %}
+                            <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"
+                                        aria-controls="{{ adv_section_id }}"
+                                        aria-expanded="false"
+                                        onclick="toggleSection('{{ adv_section_id }}')">
+                                    <div class="flex-1">
+                                        <h4 class="font-semibold text-gray-900">
+                                            <i class="fas fa-sliders-h mr-1 text-gray-500"></i>Advanced Settings ({{ tiers.advanced|length }})
+                                        </h4>
+                                        <p class="text-sm text-gray-600 mt-1">Optional fine-tuning — the defaults work for most setups.</p>
+                                    </div>
+                                    <i id="{{ adv_section_id }}-icon" class="fas fa-chevron-right text-gray-500 transition-transform"></i>
+                                </button>
+                                <div id="{{ adv_section_id }}" class="nested-content bg-gray-50 px-4 py-4 space-y-3 hidden" style="display: none;">
+                                    {% for key in tiers.advanced %}
+                                        {% set prop = schema.properties[key] %}
+                                        {% set value = config[key] if key in config else none %}
+                                        {{ render_field(key, prop, value, '', plugin.id) }}
+                                    {% endfor %}
+                                </div>
+                            </div>
+                        {% endif %}
                     {% else %}
                         {# No schema - render simple form from config #}
                         {% if config %}
diff --git a/web_interface/templates/v3/partials/plugins.html b/web_interface/templates/v3/partials/plugins.html
index cf6aa726..ba7f0c88 100644
--- a/web_interface/templates/v3/partials/plugins.html
+++ b/web_interface/templates/v3/partials/plugins.html
@@ -466,65 +466,6 @@
     </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 moved to base.html so it's always available -->
 
 <style>