From e2074c192116a6274249c047e84a7216c827d862 Mon Sep 17 00:00:00 2001
From: Jonathan Caicedo <jonathan@jcaicedo.com>
Date: Wed, 20 May 2026 21:52:28 -0400
Subject: [PATCH 01/35] fix: reduce intermittent 503s on stats page and API
 requests

---
 apps/proxy/live_proxy/channel_status.py | 28 +++++++++++++------------
 docker/nginx.conf                       |  2 ++
 frontend/src/pages/Stats.jsx            |  6 +-----
 3 files changed, 18 insertions(+), 18 deletions(-)

diff --git a/apps/proxy/live_proxy/channel_status.py b/apps/proxy/live_proxy/channel_status.py
index 3f75693e..2bf93ae8 100644
--- a/apps/proxy/live_proxy/channel_status.py
+++ b/apps/proxy/live_proxy/channel_status.py
@@ -419,7 +419,8 @@ class ChannelStatus:
                 info['stream_name'] = stream_name
 
             # Add data throughput information to basic info
-            total_bytes_bytes = proxy_server.redis_client.hget(metadata_key, ChannelMetadataField.TOTAL_BYTES)
+            # TOTAL_BYTES is already present in the hgetall result — avoid a redundant round-trip
+            total_bytes_bytes = metadata.get(ChannelMetadataField.TOTAL_BYTES)
             if total_bytes_bytes:
                 total_bytes = int(total_bytes_bytes)
                 info['total_bytes'] = total_bytes
@@ -460,24 +461,25 @@ class ChannelStatus:
 
                     client_key = RedisKeys.client_metadata(channel_id, client_id)
 
+                    # Fetch only the fields we need in one round-trip (hmget returns a list
+                    # in the same order as the requested keys; values are None if absent)
+                    ua, ip, connected_at, user_id = proxy_server.redis_client.hmget(
+                        client_key, 'user_agent', 'ip_address', 'connected_at', 'user_id'
+                    )
+
                     client_info = {
                         'client_id': client_id,
+                        'user_agent': ua,
                     }
 
-                    user_agent_bytes = proxy_server.redis_client.hget(client_key, 'user_agent')
-                    client_info['user_agent'] = user_agent_bytes
+                    if ip:
+                        client_info['ip_address'] = ip
 
-                    ip_address_bytes = proxy_server.redis_client.hget(client_key, 'ip_address')
-                    if ip_address_bytes:
-                        client_info['ip_address'] = ip_address_bytes
+                    if connected_at:
+                        client_info['connected_at'] = float(connected_at)
 
-                    connected_at_bytes = proxy_server.redis_client.hget(client_key, 'connected_at')
-                    if connected_at_bytes:
-                        client_info['connected_at'] = float(connected_at_bytes)
-
-                    user_id_bytes = proxy_server.redis_client.hget(client_key, 'user_id')
-                    if user_id_bytes:
-                        client_info['user_id'] = user_id_bytes
+                    if user_id:
+                        client_info['user_id'] = user_id
 
                     output_format = proxy_server.redis_client.hget(client_key, 'output_format')
                     client_info['output_format'] = output_format or 'mpegts'
diff --git a/docker/nginx.conf b/docker/nginx.conf
index c5cb429e..bacfb655 100644
--- a/docker/nginx.conf
+++ b/docker/nginx.conf
@@ -21,6 +21,8 @@ server {
     location / {
         include uwsgi_params;
         uwsgi_pass unix:/app/uwsgi.sock;
+        uwsgi_read_timeout 300s;
+        uwsgi_send_timeout 300s;
     }
 
     location /assets/ {
diff --git a/frontend/src/pages/Stats.jsx b/frontend/src/pages/Stats.jsx
index ec5f7042..ea4ef5f2 100644
--- a/frontend/src/pages/Stats.jsx
+++ b/frontend/src/pages/Stats.jsx
@@ -239,11 +239,7 @@ const StatsPage = () => {
     }
   }, [refreshInterval, fetchChannelStats, fetchVODStats]);
 
-  // Fetch initial stats on component mount (for immediate data when navigating to page)
-  useEffect(() => {
-    fetchChannelStats();
-    fetchVODStats();
-  }, [fetchChannelStats, fetchVODStats]);
+  // Initial fetch is handled by the polling useEffect above (it fetches immediately on mount)
 
   useEffect(() => {
     console.log('Processing channel stats:', channelStats);

From 6787e4912fc8ff9f5a93db62e4cfb930e783ac01 Mon Sep 17 00:00:00 2001
From: Jonathan Caicedo <jonathan@jcaicedo.com>
Date: Wed, 20 May 2026 22:12:09 -0400
Subject: [PATCH 02/35] refactor: replace multiple hget calls with hmget where
 fields are known

- channel_status.py: fold output_format and output_profile_id into the
  existing hmget, reducing per-client Redis calls from 3 to 1
- utils.py: collapse 2x and 3x hget per key in scan_iter loops
  (get_user_active_connections) to single hmget calls
- views.py: replace 3x hget on channel metadata in the worker-join path
  of stream_ts with a single hmget
---
 apps/proxy/live_proxy/channel_status.py | 13 +++++++------
 apps/proxy/live_proxy/views.py          | 13 +++++--------
 apps/proxy/utils.py                     |  9 ++++-----
 3 files changed, 16 insertions(+), 19 deletions(-)

diff --git a/apps/proxy/live_proxy/channel_status.py b/apps/proxy/live_proxy/channel_status.py
index 2bf93ae8..9bd1d284 100644
--- a/apps/proxy/live_proxy/channel_status.py
+++ b/apps/proxy/live_proxy/channel_status.py
@@ -463,13 +463,18 @@ class ChannelStatus:
 
                     # Fetch only the fields we need in one round-trip (hmget returns a list
                     # in the same order as the requested keys; values are None if absent)
-                    ua, ip, connected_at, user_id = proxy_server.redis_client.hmget(
-                        client_key, 'user_agent', 'ip_address', 'connected_at', 'user_id'
+                    ua, ip, connected_at, user_id, output_format, raw_profile_id = (
+                        proxy_server.redis_client.hmget(
+                            client_key,
+                            'user_agent', 'ip_address', 'connected_at', 'user_id',
+                            'output_format', 'output_profile_id',
+                        )
                     )
 
                     client_info = {
                         'client_id': client_id,
                         'user_agent': ua,
+                        'output_format': output_format or 'mpegts',
                     }
 
                     if ip:
@@ -481,10 +486,6 @@ class ChannelStatus:
                     if user_id:
                         client_info['user_id'] = user_id
 
-                    output_format = proxy_server.redis_client.hget(client_key, 'output_format')
-                    client_info['output_format'] = output_format or 'mpegts'
-
-                    raw_profile_id = proxy_server.redis_client.hget(client_key, 'output_profile_id')
                     if raw_profile_id and raw_profile_id not in ('None', '0', ''):
                         client_info['output_profile_id'] = int(raw_profile_id)
                     else:
diff --git a/apps/proxy/live_proxy/views.py b/apps/proxy/live_proxy/views.py
index 1369a364..bf39f6a9 100644
--- a/apps/proxy/live_proxy/views.py
+++ b/apps/proxy/live_proxy/views.py
@@ -468,14 +468,11 @@ def stream_ts(request, channel_id, user=None, force_output_format=None):
 
             if proxy_server.redis_client:
                 metadata_key = RedisKeys.channel_metadata(channel_id)
-                url_bytes = proxy_server.redis_client.hget(
-                    metadata_key, ChannelMetadataField.URL
-                )
-                ua_bytes = proxy_server.redis_client.hget(
-                    metadata_key, ChannelMetadataField.USER_AGENT
-                )
-                profile_bytes = proxy_server.redis_client.hget(
-                    metadata_key, ChannelMetadataField.STREAM_PROFILE
+                url_bytes, ua_bytes, profile_bytes = proxy_server.redis_client.hmget(
+                    metadata_key,
+                    ChannelMetadataField.URL,
+                    ChannelMetadataField.USER_AGENT,
+                    ChannelMetadataField.STREAM_PROFILE,
                 )
 
                 if url_bytes:
diff --git a/apps/proxy/utils.py b/apps/proxy/utils.py
index db2339ed..69ee15e4 100644
--- a/apps/proxy/utils.py
+++ b/apps/proxy/utils.py
@@ -98,8 +98,7 @@ def get_user_active_connections(user_id):
                 channel_id = parts[2]
                 client_id = parts[4]
 
-                client_user_id = redis_client.hget(key, 'user_id')
-                connected_at = redis_client.hget(key, 'connected_at')
+                client_user_id, connected_at = redis_client.hmget(key, 'user_id', 'connected_at')
 
                 logger.debug(f"[stream limits] user_id = {user_id}")
                 logger.debug(f"[stream limits] channel_id = {channel_id}")
@@ -124,9 +123,9 @@ def get_user_active_connections(user_id):
             if len(parts) >= 2:
                 client_id = parts[1]
 
-                client_user_id = redis_client.hget(key, 'user_id')
-                connected_at = redis_client.hget(key, 'created_at')
-                content_uuid = redis_client.hget(key, 'content_uuid')
+                client_user_id, connected_at, content_uuid = redis_client.hmget(
+                    key, 'user_id', 'created_at', 'content_uuid'
+                )
 
                 logger.debug(f"[stream limits] user_id = {user_id}")
                 logger.debug(f"[stream limits] client_id = {client_id}")

From a2c69be861d38711e40f0dad1976500b33423f12 Mon Sep 17 00:00:00 2001
From: Jonathan Caicedo <jonathan@jcaicedo.com>
Date: Wed, 20 May 2026 22:22:48 -0400
Subject: [PATCH 03/35] fix: update Stats tests to expect single mount fetch
 after removing duplicate useEffect

Tests were asserting fetchActiveChannelStats/getVODStats were called twice
on mount, encoding React strict mode's double-invoke behavior rather than
testing actual application logic. Update all affected call count assertions
to reflect the correct single-fetch behavior.
---
 frontend/src/pages/__tests__/Stats.test.jsx | 30 ++++++++++-----------
 1 file changed, 15 insertions(+), 15 deletions(-)

diff --git a/frontend/src/pages/__tests__/Stats.test.jsx b/frontend/src/pages/__tests__/Stats.test.jsx
index d809a47a..21cfebf7 100644
--- a/frontend/src/pages/__tests__/Stats.test.jsx
+++ b/frontend/src/pages/__tests__/Stats.test.jsx
@@ -220,8 +220,8 @@ describe('StatsPage', () => {
       render(<StatsPage />);
 
       await waitFor(() => {
-        expect(fetchActiveChannelStats).toHaveBeenCalledTimes(2);
-        expect(getVODStats).toHaveBeenCalledTimes(2);
+        expect(fetchActiveChannelStats).toHaveBeenCalledTimes(1);
+        expect(getVODStats).toHaveBeenCalledTimes(1);
       });
     });
 
@@ -283,16 +283,16 @@ describe('StatsPage', () => {
 
       render(<StatsPage />);
 
-      expect(fetchActiveChannelStats).toHaveBeenCalledTimes(2);
-      expect(getVODStats).toHaveBeenCalledTimes(2);
+      expect(fetchActiveChannelStats).toHaveBeenCalledTimes(1);
+      expect(getVODStats).toHaveBeenCalledTimes(1);
 
       // Advance timers by 5 seconds
       await act(async () => {
         vi.advanceTimersByTime(5000);
       });
 
-      expect(fetchActiveChannelStats).toHaveBeenCalledTimes(3);
-      expect(getVODStats).toHaveBeenCalledTimes(3);
+      expect(fetchActiveChannelStats).toHaveBeenCalledTimes(2);
+      expect(getVODStats).toHaveBeenCalledTimes(2);
 
       vi.useRealTimers();
     });
@@ -303,13 +303,13 @@ describe('StatsPage', () => {
       useLocalStorage.mockReturnValue([0, mockSetRefreshInterval]);
       render(<StatsPage />);
 
-      expect(fetchActiveChannelStats).toHaveBeenCalledTimes(1);
+      expect(fetchActiveChannelStats).toHaveBeenCalledTimes(0);
 
       await act(async () => {
         vi.advanceTimersByTime(10000);
       });
 
-      expect(fetchActiveChannelStats).toHaveBeenCalledTimes(1);
+      expect(fetchActiveChannelStats).toHaveBeenCalledTimes(0);
 
       vi.useRealTimers();
     });
@@ -319,7 +319,7 @@ describe('StatsPage', () => {
 
       const { unmount } = render(<StatsPage />);
 
-      expect(fetchActiveChannelStats).toHaveBeenCalledTimes(2);
+      expect(fetchActiveChannelStats).toHaveBeenCalledTimes(1);
 
       unmount();
 
@@ -328,7 +328,7 @@ describe('StatsPage', () => {
       });
 
       // Should not fetch again after unmount
-      expect(fetchActiveChannelStats).toHaveBeenCalledTimes(2);
+      expect(fetchActiveChannelStats).toHaveBeenCalledTimes(1);
 
       vi.useRealTimers();
     });
@@ -338,14 +338,14 @@ describe('StatsPage', () => {
     it('refreshes stats when Refresh Now button is clicked', async () => {
       render(<StatsPage />);
 
-      expect(fetchActiveChannelStats).toHaveBeenCalledTimes(2);
+      expect(fetchActiveChannelStats).toHaveBeenCalledTimes(1);
 
       const refreshButton = screen.getByText('Refresh Now');
       fireEvent.click(refreshButton);
 
       await waitFor(() => {
-        expect(fetchActiveChannelStats).toHaveBeenCalledTimes(3);
-        expect(getVODStats).toHaveBeenCalledTimes(3);
+        expect(fetchActiveChannelStats).toHaveBeenCalledTimes(2);
+        expect(getVODStats).toHaveBeenCalledTimes(2);
       });
     });
   });
@@ -406,14 +406,14 @@ describe('StatsPage', () => {
       render(<StatsPage />);
 
       await waitFor(() => {
-        expect(getVODStats).toHaveBeenCalledTimes(2);
+        expect(getVODStats).toHaveBeenCalledTimes(1);
       });
 
       const stopButton = await screen.findByTestId('stop-vod-client-client-1');
       fireEvent.click(stopButton);
 
       await waitFor(() => {
-        expect(getVODStats).toHaveBeenCalledTimes(3);
+        expect(getVODStats).toHaveBeenCalledTimes(2);
       });
     });
   });

From 0d1d1f27221d883fbc675edc0f78ccbbf26115e0 Mon Sep 17 00:00:00 2001
From: Jonathan Caicedo <jonathan@jcaicedo.com>
Date: Sat, 23 May 2026 14:20:13 -0400
Subject: [PATCH 04/35] fix: revert nginx timeouts; fire stats fetch on mount
 regardless of interval

---
 docker/nginx.conf                           |  2 --
 frontend/src/pages/Stats.jsx                | 16 +++++++---------
 frontend/src/pages/__tests__/Stats.test.jsx | 10 +++++++---
 3 files changed, 14 insertions(+), 14 deletions(-)

diff --git a/docker/nginx.conf b/docker/nginx.conf
index bacfb655..c5cb429e 100644
--- a/docker/nginx.conf
+++ b/docker/nginx.conf
@@ -21,8 +21,6 @@ server {
     location / {
         include uwsgi_params;
         uwsgi_pass unix:/app/uwsgi.sock;
-        uwsgi_read_timeout 300s;
-        uwsgi_send_timeout 300s;
     }
 
     location /assets/ {
diff --git a/frontend/src/pages/Stats.jsx b/frontend/src/pages/Stats.jsx
index ea4ef5f2..86c7f1c3 100644
--- a/frontend/src/pages/Stats.jsx
+++ b/frontend/src/pages/Stats.jsx
@@ -212,19 +212,19 @@ const StatsPage = () => {
     }
   }, [setVodStats]);
 
+  // Always fetch once on mount, regardless of polling interval setting
+  useEffect(() => {
+    fetchChannelStats();
+    fetchVODStats();
+  }, [fetchChannelStats, fetchVODStats]);
+
   // Set up polling for stats when on stats page
   useEffect(() => {
-    const location = window.location;
-    const isOnStatsPage = location.pathname === '/stats';
+    const isOnStatsPage = window.location.pathname === '/stats';
 
     if (isOnStatsPage && refreshInterval > 0) {
       setIsPollingActive(true);
 
-      // Initial fetch
-      fetchChannelStats();
-      fetchVODStats();
-
-      // Set up interval
       const interval = setInterval(() => {
         fetchChannelStats();
         fetchVODStats();
@@ -239,8 +239,6 @@ const StatsPage = () => {
     }
   }, [refreshInterval, fetchChannelStats, fetchVODStats]);
 
-  // Initial fetch is handled by the polling useEffect above (it fetches immediately on mount)
-
   useEffect(() => {
     console.log('Processing channel stats:', channelStats);
     if (
diff --git a/frontend/src/pages/__tests__/Stats.test.jsx b/frontend/src/pages/__tests__/Stats.test.jsx
index 21cfebf7..92cf8560 100644
--- a/frontend/src/pages/__tests__/Stats.test.jsx
+++ b/frontend/src/pages/__tests__/Stats.test.jsx
@@ -297,19 +297,23 @@ describe('StatsPage', () => {
       vi.useRealTimers();
     });
 
-    it('does not poll when interval is 0', async () => {
+    it('does not poll when interval is 0 but still fetches once on mount', async () => {
       vi.useFakeTimers();
 
       useLocalStorage.mockReturnValue([0, mockSetRefreshInterval]);
       render(<StatsPage />);
 
-      expect(fetchActiveChannelStats).toHaveBeenCalledTimes(0);
+      // Should still fetch once on mount even with interval = 0
+      expect(fetchActiveChannelStats).toHaveBeenCalledTimes(1);
+      expect(getVODStats).toHaveBeenCalledTimes(1);
 
       await act(async () => {
         vi.advanceTimersByTime(10000);
       });
 
-      expect(fetchActiveChannelStats).toHaveBeenCalledTimes(0);
+      // Should not have polled — count stays at 1
+      expect(fetchActiveChannelStats).toHaveBeenCalledTimes(1);
+      expect(getVODStats).toHaveBeenCalledTimes(1);
 
       vi.useRealTimers();
     });

From 92d3068be0e964478ec2cb18f41183cf916a490a Mon Sep 17 00:00:00 2001
From: SergeantPanda <chester.cullen@gmail.com>
Date: Sat, 23 May 2026 21:25:44 -0500
Subject: [PATCH 05/35] fix: ensure migrations run automatically after
 restoring backups to prevent missing schema issues

---
 CHANGELOG.md                                      | 4 ++++
 apps/backups/tasks.py                             | 3 +++
 frontend/src/components/backups/BackupManager.jsx | 6 +++---
 3 files changed, 10 insertions(+), 3 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 7e998abd..3464dd31 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -7,6 +7,10 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+### Fixed
+
+- **Restoring a backup from an older version left the database with missing schema.** The restore task ran `pg_restore` which replaced the entire database (including the `django_migrations` table) but did not run migrations afterward. If the backup predated a schema migration, the restored database was missing tables and columns added by those migrations, causing 500 errors on every API call. `migrate --noinput` now runs automatically after every restore. The success notification also now recommends a restart to clear stale service state.
+
 ## [0.25.1] - 2026-05-23
 
 ### Fixed
diff --git a/apps/backups/tasks.py b/apps/backups/tasks.py
index f531fef8..a169b7db 100644
--- a/apps/backups/tasks.py
+++ b/apps/backups/tasks.py
@@ -1,6 +1,7 @@
 import logging
 import traceback
 from celery import shared_task
+from django.core.management import call_command
 
 from . import services
 
@@ -61,6 +62,8 @@ def restore_backup_task(self, filename: str):
         backup_file = backup_dir / filename
         logger.info(f"[RESTORE] Backup file path: {backup_file}")
         services.restore_backup(backup_file)
+        logger.info(f"[RESTORE] Running migrations after restore...")
+        call_command('migrate', '--noinput', verbosity=1)
         logger.info(f"[RESTORE] Task {self.request.id} completed successfully")
         return {
             "status": "completed",
diff --git a/frontend/src/components/backups/BackupManager.jsx b/frontend/src/components/backups/BackupManager.jsx
index 02b7d15d..c58755b2 100644
--- a/frontend/src/components/backups/BackupManager.jsx
+++ b/frontend/src/components/backups/BackupManager.jsx
@@ -439,12 +439,12 @@ export default function BackupManager() {
     try {
       await API.restoreBackup(selectedBackup.name);
       notifications.show({
-        title: 'Success',
+        title: 'Restore Complete',
         message:
-          'Backup restored successfully. You may need to refresh the page.',
+          'Backup restored successfully. A restart is recommended to ensure all services are running against the restored data.',
         color: 'green',
       });
-      setTimeout(() => window.location.reload(), 2000);
+      setTimeout(() => window.location.reload(), 4000);
     } catch (error) {
       notifications.show({
         title: 'Error',

From fb260356aad4ff8b44035fe88cc769742df361a7 Mon Sep 17 00:00:00 2001
From: SergeantPanda <chester.cullen@gmail.com>
Date: Sat, 23 May 2026 21:45:49 -0500
Subject: [PATCH 06/35] changelog: Update changelog for stats PR.

---
 CHANGELOG.md | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 3464dd31..7cef64db 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -7,6 +7,10 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+### Performance
+
+- **Reduced Redis round-trips on the Stats page channel status endpoint.** `get_basic_channel_info` was making up to 6 individual `HGET` calls per connected client plus a redundant `HGET` for `TOTAL_BYTES` (already present in the preceding `HGETALL` result). Client metadata is now fetched with a single `HMGET` per client, and `TOTAL_BYTES` is read from the already-fetched hash. Under load with many active streams this significantly reduces the time each uWSGI worker holds the GIL servicing the stats endpoint, reducing the chance of concurrent requests from other pages timing out with a 503. The same `HGET`-to-`HMGET` consolidation was applied to `stream_ts` and `get_user_active_connections`. The Stats page frontend was also fixed to fire the initial fetch only once on mount (previously two `useEffect` hooks both triggered an immediate fetch on load). — Thanks [@JCBird1012](https://github.com/JCBird1012)
+
 ### Fixed
 
 - **Restoring a backup from an older version left the database with missing schema.** The restore task ran `pg_restore` which replaced the entire database (including the `django_migrations` table) but did not run migrations afterward. If the backup predated a schema migration, the restored database was missing tables and columns added by those migrations, causing 500 errors on every API call. `migrate --noinput` now runs automatically after every restore. The success notification also now recommends a restart to clear stale service state.

From 0db557384a7219d7d14426eba7ee2b053e5550a0 Mon Sep 17 00:00:00 2001
From: Seth Van Niekerk <seth@swvn.io>
Date: Sun, 24 May 2026 10:59:53 -0400
Subject: [PATCH 07/35] configurable per-page, sticky pagination footer, fix
 update sort order and disabled button badge color

---
 .../components/theme/SizedInstallButton.jsx   |   2 +-
 frontend/src/pages/PluginBrowse.jsx           | 122 ++++++++++++------
 2 files changed, 87 insertions(+), 37 deletions(-)

diff --git a/frontend/src/components/theme/SizedInstallButton.jsx b/frontend/src/components/theme/SizedInstallButton.jsx
index 780aedb5..7bcb1819 100644
--- a/frontend/src/components/theme/SizedInstallButton.jsx
+++ b/frontend/src/components/theme/SizedInstallButton.jsx
@@ -71,7 +71,7 @@ const SizedInstallButton = ({
                 : 'var(--mantine-primary-color-filled-hover)'
               : colorVar,
           filter: isDisabled
-            ? 'brightness(0.65) saturate(0.7)'
+            ? 'grayscale(1) brightness(0.55)'
             : hovered
               ? 'brightness(0.86)'
               : 'brightness(0.82)',
diff --git a/frontend/src/pages/PluginBrowse.jsx b/frontend/src/pages/PluginBrowse.jsx
index ccc81b28..dd4a3a6d 100644
--- a/frontend/src/pages/PluginBrowse.jsx
+++ b/frontend/src/pages/PluginBrowse.jsx
@@ -8,6 +8,7 @@ import {
   Group,
   Loader,
   Modal,
+  NativeSelect,
   NumberInput,
   Pagination,
   Select,
@@ -68,6 +69,7 @@ export default function PluginBrowsePage() {
   const saveIntervalTimer = useRef(null);
 
   const recentlyInstalledSlugs = useRef(new Set());
+  const recentlyUpdatedSlugs = useRef(new Set());
   const recentlyUninstalledSlugs = useRef(new Set());
 
   const [searchQuery, setSearchQuery] = useState('');
@@ -75,7 +77,14 @@ export default function PluginBrowsePage() {
   const [filterRepo, setFilterRepo] = useState('all');
   const [filterStatus, setFilterStatus] = useState('all');
   const [page, setPage] = useState(1);
-  const perPage = 9;
+  const [perPage, setPerPage] = useState(() => {
+    const stored = localStorage.getItem('pluginBrowsePerPage');
+    return stored && !isNaN(Number(stored)) ? Number(stored) : 9;
+  });
+  const handlePerPageChange = (value) => {
+    setPerPage(Number(value));
+    localStorage.setItem('pluginBrowsePerPage', value);
+  };
 
   const hasFetched = useRef(false);
 
@@ -294,6 +303,8 @@ export default function PluginBrowsePage() {
       // Pre-sort weights: deprecated → installed → incompatible sink to bottom (in that order)
       // Recently installed plugins are exempt so they don't jump away after install
       const weight = (p) => {
+        if (p.install_status === 'update_available') return -1;
+        if (recentlyUpdatedSlugs.current.has(p.slug)) return -1;
         if (recentlyInstalledSlugs.current.has(p.slug)) return 0;
         if (recentlyUninstalledSlugs.current.has(p.slug)) return 2;
         const meetsMin =
@@ -335,10 +346,10 @@ export default function PluginBrowsePage() {
     appVersion,
   ]);
 
-  // Reset to page 1 when filters/search change
+  // Reset to page 1 when filters/search/page-size change
   React.useEffect(() => {
     setPage(1);
-  }, [searchQuery, filterRepo, filterStatus, sortBy]);
+  }, [searchQuery, filterRepo, filterStatus, sortBy, perPage]);
 
   const totalPages = Math.ceil(filteredPlugins.length / perPage);
   const paginatedPlugins = filteredPlugins.slice(
@@ -347,7 +358,15 @@ export default function PluginBrowsePage() {
   );
 
   return (
-    <AppShellMain p={16}>
+    <AppShellMain
+      style={{
+        padding: 0,
+        display: 'flex',
+        flexDirection: 'column',
+        minHeight: '100%',
+      }}
+    >
+      <Box p={16} pb={60} style={{ flex: 1 }}>
       <Group justify="space-between" mb="md">
         <Group gap="xs" align="center">
           <Text fw={700} size="lg">
@@ -467,38 +486,69 @@ export default function PluginBrowsePage() {
       )}
 
       {!loading && filteredPlugins.length > 0 && (
-        <>
-          <SimpleGrid cols={{ base: 1, md: 2, xl: 3 }} spacing="md">
-            {paginatedPlugins.map((p) => (
-              <AvailablePluginCard
-                key={`${p.repo_id}-${p.slug}`}
-                plugin={p}
-                appVersion={appVersion}
-                multiRepo={repos.length > 1}
-                onBeforeInstall={(slug) => {
-                  if (slug) recentlyInstalledSlugs.current.add(slug);
-                }}
-                onInstalled={(slug) => {
-                  if (slug) recentlyInstalledSlugs.current.add(slug);
-                  fetchAvailablePlugins();
-                }}
-                onUninstalled={(slug) => {
-                  if (slug) recentlyUninstalledSlugs.current.add(slug);
-                }}
-              />
-            ))}
-          </SimpleGrid>
-          {totalPages > 1 && (
-            <Group justify="center" mt="lg">
-              <Pagination
-                value={page}
-                onChange={setPage}
-                total={totalPages}
-                size="sm"
-              />
-            </Group>
-          )}
-        </>
+        <SimpleGrid cols={{ base: 1, md: 2, xl: 3 }} spacing="md">
+          {paginatedPlugins.map((p) => (
+            <AvailablePluginCard
+              key={`${p.repo_id}-${p.slug}`}
+              plugin={p}
+              appVersion={appVersion}
+              multiRepo={repos.length > 1}
+              onBeforeInstall={(slug) => {
+                if (slug) {
+                  if (p.install_status === 'update_available') {
+                    recentlyUpdatedSlugs.current.add(slug);
+                  } else {
+                    recentlyInstalledSlugs.current.add(slug);
+                  }
+                }
+              }}
+              onInstalled={(slug) => {
+                if (slug) recentlyInstalledSlugs.current.add(slug);
+                fetchAvailablePlugins();
+              }}
+              onUninstalled={(slug) => {
+                if (slug) recentlyUninstalledSlugs.current.add(slug);
+              }}
+            />
+          ))}
+        </SimpleGrid>
+      )}
+
+      </Box>
+
+      {!loading && filteredPlugins.length > 0 && (
+        <Box
+          style={{
+            position: 'fixed',
+            bottom: 0,
+            left: 'var(--app-shell-navbar-offset, 0rem)',
+            right: 0,
+            zIndex: 100,
+            background: '#1A1A1E',
+            borderTop: '1px solid #2A2A2E',
+          }}
+        >
+          <Group gap={5} justify="center" style={{ padding: 8 }}>
+            <Text size="xs">Page Size</Text>
+            <NativeSelect
+              size="xxs"
+              value={String(perPage)}
+              data={['9', '18', '27', '36']}
+              onChange={(e) => handlePerPageChange(e.target.value)}
+              styles={{ input: { textAlignLast: 'center' } }}
+            />
+            <Pagination
+              total={totalPages}
+              value={page}
+              onChange={setPage}
+              size="xs"
+              withEdges
+            />
+            <Text size="xs">
+              {`${(page - 1) * perPage + 1} to ${Math.min(page * perPage, filteredPlugins.length)} of ${filteredPlugins.length}`}
+            </Text>
+          </Group>
+        </Box>
       )}
 
       {/* Manage Repos Modal */}

From 2070f9e281f762c62d2a37289740ac059a184745 Mon Sep 17 00:00:00 2001
From: Kanishk Sachdev <kanishksachdev@gmail.com>
Date: Mon, 25 May 2026 04:31:42 -0400
Subject: [PATCH 08/35] docker: split base image into builder and runtime
 stages

Keeps compilers in the builder; runtime stage copies only the venv
and NumPy wheel.
---
 docker/DispatcharrBase | 62 +++++++++++++++++++++++++++++++++---------
 1 file changed, 49 insertions(+), 13 deletions(-)

diff --git a/docker/DispatcharrBase b/docker/DispatcharrBase
index 3040e189..61c460ce 100644
--- a/docker/DispatcharrBase
+++ b/docker/DispatcharrBase
@@ -1,4 +1,10 @@
-FROM lscr.io/linuxserver/ffmpeg:latest
+# ==============================================================================
+# Stage 1: builder
+# Installs the Python toolchain + compilers, creates the virtual environment and
+# builds the legacy (CPU-baseline=none) NumPy wheel. None of these compilers end
+# up in the final image — only the artifacts below are copied forward.
+# ==============================================================================
+FROM lscr.io/linuxserver/ffmpeg:latest AS builder
 
 ENV DEBIAN_FRONTEND=noninteractive
 ENV UV_PROJECT_ENVIRONMENT=/dispatcharrpy
@@ -15,10 +21,9 @@ RUN apt-get update && apt-get install --no-install-recommends -y \
     && apt-get update \
     && apt-get install --no-install-recommends -y \
     python3.13 python3.13-dev python3.13-venv libpython3.13 \
-    libpcre3 libpcre3-dev libpq-dev procps pciutils \
-    nginx comskip \
-    vlc-bin vlc-plugin-base \
-    build-essential gcc g++ gfortran libopenblas-dev libopenblas0 ninja-build
+    libpcre3 libpcre3-dev libpq-dev \
+    build-essential gcc g++ gfortran libopenblas-dev libopenblas0 ninja-build \
+    && rm -rf /var/lib/apt/lists/*
 
 # --- Install UV ---
 COPY --from=ghcr.io/astral-sh/uv:latest /uv /uvx /bin/
@@ -28,11 +33,12 @@ WORKDIR /tmp/build
 COPY pyproject.toml /tmp/build/
 COPY version.py /tmp/build/
 COPY README.md /tmp/build/
-RUN uv sync --python 3.13 --no-cache --no-install-project --no-dev && \
-    rm -rf /tmp/build
+RUN uv sync --python 3.13 --no-cache --no-install-project --no-dev
 WORKDIR /
 
 # --- Build legacy NumPy wheel for old hardware (store for runtime switching) ---
+# build/pip are installed into the venv only long enough to produce the wheel,
+# then uninstalled so they are not carried into the final image's venv.
 RUN uv pip install --python $UV_PROJECT_ENVIRONMENT/bin/python --no-cache build pip && \
     cd /tmp && \
     $UV_PROJECT_ENVIRONMENT/bin/python -m pip download --no-binary numpy --no-deps numpy && \
@@ -40,14 +46,44 @@ RUN uv pip install --python $UV_PROJECT_ENVIRONMENT/bin/python --no-cache build
     cd numpy-*/ && \
     $UV_PROJECT_ENVIRONMENT/bin/python -m build --wheel -Csetup-args=-Dcpu-baseline="none" -Csetup-args=-Dcpu-dispatch="none" && \
     mv dist/*.whl /opt/ && \
-    cd / && rm -rf /tmp/numpy-* /tmp/*.tar.gz && \
+    cd / && rm -rf /tmp/numpy-* /tmp/*.tar.gz /tmp/build && \
     uv pip uninstall --python $UV_PROJECT_ENVIRONMENT/bin/python build pip
 
-# --- Clean up build dependencies to reduce image size ---
-RUN apt-get remove -y build-essential gcc g++ gfortran libopenblas-dev libpcre3-dev python3.13-dev ninja-build && \
-    apt-get autoremove -y --purge && \
-    apt-get clean && \
-    rm -rf /var/lib/apt/lists/* /root/.cache /tmp/*
+# ==============================================================================
+# Stage 2: final runtime image
+# Same ffmpeg base, but installs only the runtime system libraries (no compilers)
+# and copies the prebuilt virtual environment + NumPy wheel from the builder.
+# ==============================================================================
+FROM lscr.io/linuxserver/ffmpeg:latest AS final
+
+ENV DEBIAN_FRONTEND=noninteractive
+ENV UV_PROJECT_ENVIRONMENT=/dispatcharrpy
+ENV VIRTUAL_ENV=/dispatcharrpy
+ENV PATH="$VIRTUAL_ENV/bin:$PATH"
+ENV UV_COMPILE_BYTECODE=1
+ENV UV_LINK_MODE=copy
+
+# --- Install runtime system dependencies (no build toolchain) ---
+# python3.13 + libpython3.13 back the copied venv; libpcre3 backs uWSGI;
+# libopenblas0 backs the legacy NumPy wheel; ca-certificates/gnupg2/curl/wget
+# and software-properties-common are kept for TLS and the AIO runtime apt step.
+RUN apt-get update && apt-get install --no-install-recommends -y \
+    ca-certificates software-properties-common gnupg2 curl wget \
+    && add-apt-repository ppa:deadsnakes/ppa \
+    && apt-get update \
+    && apt-get install --no-install-recommends -y \
+    python3.13 python3.13-venv libpython3.13 \
+    libpcre3 libpq-dev libopenblas0 procps pciutils \
+    nginx comskip \
+    vlc-bin vlc-plugin-base \
+    && apt-get clean && rm -rf /var/lib/apt/lists/*
+
+# --- Install UV (used at runtime to swap in the legacy NumPy wheel) ---
+COPY --from=ghcr.io/astral-sh/uv:latest /uv /uvx /bin/
+
+# --- Copy prebuilt virtual environment and legacy NumPy wheel from the builder ---
+COPY --from=builder /dispatcharrpy /dispatcharrpy
+COPY --from=builder /opt/numpy-*.whl /opt/
 
 # --- Set up Redis 7.x ---
 RUN curl -fsSL https://packages.redis.io/gpg | gpg --dearmor -o /usr/share/keyrings/redis-archive-keyring.gpg && \

From 94c8bd36bfffc6d361ff6f252037ccda9c1854c7 Mon Sep 17 00:00:00 2001
From: Jonathan Caicedo <jonathan@jcaicedo.com>
Date: Mon, 25 May 2026 11:12:46 -0400
Subject: [PATCH 09/35] perf: replace per-request DB connections with
 geventpool

---
 dispatcharr/settings.py | 12 ++++++++----
 pyproject.toml          |  1 +
 2 files changed, 9 insertions(+), 4 deletions(-)

diff --git a/dispatcharr/settings.py b/dispatcharr/settings.py
index e8818108..1b103ccf 100644
--- a/dispatcharr/settings.py
+++ b/dispatcharr/settings.py
@@ -111,7 +111,7 @@ XC_PROFILE_REFRESH_DELAY = float(os.environ.get('XC_PROFILE_REFRESH_DELAY', '2.5
 
 # Database optimization settings
 DATABASE_STATEMENT_TIMEOUT = 300  # Seconds before timing out long-running queries
-DATABASE_CONN_MAX_AGE = 0  # Close after each request; gevent makes per-greenlet connections
+DATABASE_CONN_MAX_AGE = None  # Managed by django-db-geventpool; None = persistent pool connections
 
 # Disable atomic requests for performance-sensitive views
 ATOMIC_REQUESTS = False
@@ -221,13 +221,17 @@ if os.getenv("DB_ENGINE", None) == "sqlite":
 else:
     DATABASES = {
         "default": {
-            "ENGINE": "django.db.backends.postgresql",
+            "ENGINE": "django_db_geventpool.backends.postgresql",
             "NAME": os.environ.get("POSTGRES_DB", "dispatcharr"),
             "USER": os.environ.get("POSTGRES_USER", "dispatch"),
             "PASSWORD": os.environ.get("POSTGRES_PASSWORD", "secret"),
             "HOST": os.environ.get("POSTGRES_HOST", "localhost"),
             "PORT": int(os.environ.get("POSTGRES_PORT", 5432)),
             "CONN_MAX_AGE": DATABASE_CONN_MAX_AGE,
+            "OPTIONS": {
+                "MAX_CONNS": 20,   # Per-worker pool size; 4 workers × 20 = 80 total < pg max_connections=100
+                "REUSE_CONNS": 10, # Connections to keep warm between requests
+            },
         }
     }
 
@@ -238,9 +242,9 @@ else:
             ("POSTGRES_SSL_KEY", POSTGRES_SSL_KEY),
         ], "PostgreSQL")
 
-        DATABASES["default"]["OPTIONS"] = {
+        DATABASES["default"]["OPTIONS"].update({
             "sslmode": POSTGRES_SSL_MODE,
-        }
+        })
         if POSTGRES_SSL_CA_CERT:
             DATABASES["default"]["OPTIONS"]["sslrootcert"] = POSTGRES_SSL_CA_CERT
         if POSTGRES_SSL_CERT:
diff --git a/pyproject.toml b/pyproject.toml
index db7efc78..fe7112f3 100644
--- a/pyproject.toml
+++ b/pyproject.toml
@@ -19,6 +19,7 @@ dependencies = [
     "yt-dlp",
     "gevent==26.4.0",
     "psycogreen",
+    "django-db-geventpool",
     "daphne",
     "uwsgi",
     "django-cors-headers",

From 6021bdf741a89164e568212f97b8365824a742cd Mon Sep 17 00:00:00 2001
From: Nick Sandstrom <32273437+nick4810@users.noreply.github.com>
Date: Mon, 25 May 2026 18:02:01 -0700
Subject: [PATCH 10/35] Extracted utils

---
 .../utils/forms/RecordingDetailsModalUtils.js |  21 ++
 frontend/src/utils/forms/RecordingUtils.js    | 181 ++++++++++++++++++
 .../utils/forms/RecurringRuleModalUtils.js    |  56 +++---
 .../utils/forms/SeriesRuleEditorModalUtils.js |  84 ++++++++
 .../src/utils/forms/StreamProfileUtils.js     |  44 +++++
 frontend/src/utils/forms/StreamUtils.js       |  19 ++
 frontend/src/utils/forms/UserAgentUtils.js    |  17 ++
 frontend/src/utils/forms/UserUtils.js         | 150 +++++++++++++++
 frontend/src/utils/guideUtils.js              |  23 +--
 9 files changed, 544 insertions(+), 51 deletions(-)
 create mode 100644 frontend/src/utils/forms/RecordingUtils.js
 create mode 100644 frontend/src/utils/forms/SeriesRuleEditorModalUtils.js
 create mode 100644 frontend/src/utils/forms/StreamProfileUtils.js
 create mode 100644 frontend/src/utils/forms/StreamUtils.js
 create mode 100644 frontend/src/utils/forms/UserAgentUtils.js
 create mode 100644 frontend/src/utils/forms/UserUtils.js

diff --git a/frontend/src/utils/forms/RecordingDetailsModalUtils.js b/frontend/src/utils/forms/RecordingDetailsModalUtils.js
index c81c3b53..2d9ea0ab 100644
--- a/frontend/src/utils/forms/RecordingDetailsModalUtils.js
+++ b/frontend/src/utils/forms/RecordingDetailsModalUtils.js
@@ -1,3 +1,5 @@
+import API from '../../api.js';
+
 export const getStatRows = (stats) => {
   return [
     ['Video Codec', stats.video_codec],
@@ -86,3 +88,22 @@ export const getUpcomingEpisodes = (
     (a, b) => toUserTime(a.start_time) - toUserTime(b.start_time)
   );
 };
+
+export const getChannel = (id) => {
+  return API.getChannel(id);
+};
+
+export const updateRecordingMetadata = (
+  recording,
+  editTitle,
+  editDescription
+) => {
+  return API.updateRecordingMetadata(recording.id, {
+    title: editTitle || 'Custom Recording',
+    description: editDescription,
+  });
+};
+
+export const refreshArtwork = (id) => {
+  return API.refreshArtwork(id);
+};
diff --git a/frontend/src/utils/forms/RecordingUtils.js b/frontend/src/utils/forms/RecordingUtils.js
new file mode 100644
index 00000000..fde3b6c5
--- /dev/null
+++ b/frontend/src/utils/forms/RecordingUtils.js
@@ -0,0 +1,181 @@
+import API from '../../api.js';
+import {
+  add,
+  diff,
+  format,
+  getNow,
+  initializeTime,
+  isValid,
+  roundToNearest,
+  setMillisecond,
+  setSecond,
+  toDate,
+  toTimeString,
+} from '../dateTimeUtils.js';
+import { isNotEmpty } from '@mantine/form';
+
+export const asDate = (value) => {
+  if (!value) return null;
+  if (value instanceof Date) return value;
+  const parsed = new Date(value);
+  return Number.isNaN(parsed.getTime()) ? null : parsed;
+};
+
+export const toIsoIfDate = (value) => {
+  const dt = asDate(value);
+  return dt ? dt.toISOString() : value;
+};
+
+export const toDateString = (value) => {
+  const dt = asDate(value);
+  return dt ? format(dt, 'YYYY-MM-DD') : null;
+};
+
+export const createRoundedDate = (minutesAhead = 0) => {
+  let rounded = roundToNearest(getNow(), 30);
+  rounded = setSecond(rounded, 0);
+  rounded = setMillisecond(rounded, 0);
+  return toDate(minutesAhead ? add(rounded, minutesAhead, 'minute') : rounded);
+};
+
+// robust onChange for TimeInput (string or event)
+export const timeChange = (setter) => (valOrEvent) => {
+  if (typeof valOrEvent === 'string') setter(valOrEvent);
+  else if (valOrEvent?.currentTarget) setter(valOrEvent.currentTarget.value);
+};
+
+export const getChannelsSummary = () => {
+  return API.getChannelsSummary();
+};
+export const updateRecording = (id, data) => {
+  return API.updateRecording(id, data);
+};
+export const createRecording = (data) => {
+  return API.createRecording(data);
+};
+export const createRecurringRule = (data) => {
+  return API.createRecurringRule(data);
+};
+
+/**
+ * Sorts a channels array or object by channel_number (then name) and maps
+ * each entry to a { value, label } select option.
+ *
+ * @param {Array|Object} channels
+ * @param {(item: object) => string} [labelFn]  defaults to `name || "Channel id"`
+ */
+export const sortedChannelOptions = (channels, labelFn) => {
+  const list = Array.isArray(channels)
+    ? channels
+    : Object.values(channels || {});
+
+  const defaultLabel = (item) => item.name || `Channel ${item.id}`;
+
+  return [...list]
+    .sort((a, b) => {
+      const aNum = Number(a.channel_number) || 0;
+      const bNum = Number(b.channel_number) || 0;
+      if (aNum !== bNum) return aNum - bNum;
+      return (a.name || '').localeCompare(b.name || '');
+    })
+    .map((item) => ({
+      value: String(item.id),
+      label: (labelFn ?? defaultLabel)(item),
+    }));
+};
+
+/** Label that includes the channel number prefix used in Recording/SeriesRule UIs. */
+export const numberedChannelLabel = (item) =>
+  item.channel_number
+    ? `${item.channel_number} - ${item.name || `Channel ${item.id}`}`
+    : item.name || `Channel ${item.id}`;
+
+export const getSingleFormDefaults = (recording = null, channel = null) => {
+  const defaultStart = createRoundedDate();
+  const defaultEnd = createRoundedDate(60);
+  return {
+    channel_id: recording
+      ? `${recording.channel}`
+      : channel
+        ? `${channel.id}`
+        : '',
+    start_time: recording
+      ? asDate(recording.start_time) || defaultStart
+      : defaultStart,
+    end_time: recording ? asDate(recording.end_time) || defaultEnd : defaultEnd,
+  };
+};
+
+export const getRecurringFormDefaults = (channel = null) => {
+  const defaultStart = createRoundedDate();
+  const defaultEnd = createRoundedDate(60);
+  const defaultDate = new Date();
+  return {
+    channel_id: channel ? `${channel.id}` : '',
+    days_of_week: [],
+    start_time: format(defaultStart, 'HH:mm'),
+    end_time: format(defaultEnd, 'HH:mm'),
+    rule_name: channel?.name || '',
+    start_date: defaultDate,
+    end_date: defaultDate,
+  };
+};
+
+export const buildSinglePayload = (values) => ({
+  channel: values.channel_id,
+  start_time: toIsoIfDate(values.start_time),
+  end_time: toIsoIfDate(values.end_time),
+});
+
+export const buildRecurringPayload = (values) => ({
+  channel: values.channel_id,
+  days_of_week: (values.days_of_week || []).map(Number),
+  start_time: toTimeString(values.start_time),
+  end_time: toTimeString(values.end_time),
+  start_date: toDateString(values.start_date),
+  end_date: toDateString(values.end_date),
+  name: values.rule_name?.trim() || '',
+});
+
+export const singleFormValidators = {
+  channel_id: isNotEmpty('Select a channel'),
+  start_time: isNotEmpty('Select a start time'),
+  end_time: (value, values) => {
+    const start = asDate(values.start_time);
+    const end = asDate(value);
+    if (!end) return 'Select an end time';
+    if (start && end <= start) return 'End time must be after start time';
+    return null;
+  },
+};
+
+export const recurringFormValidators = {
+  channel_id: isNotEmpty('Select a channel'),
+  days_of_week: (value) => (value?.length ? null : 'Pick at least one day'),
+  start_time: (value) => (value ? null : 'Select a start time'),
+  end_time: (value, values) => {
+    if (!value) return 'Select an end time';
+    const start = initializeTime(
+      values.start_time,
+      ['HH:mm', 'hh:mm A', 'h:mm A'],
+      null,
+      true
+    );
+    const end = initializeTime(
+      value,
+      ['HH:mm', 'hh:mm A', 'h:mm A'],
+      null,
+      true
+    );
+    if (isValid(start) && isValid(end) && diff(start, end, 'minute') === 0)
+      return 'End time must differ from start time';
+    return null;
+  },
+  end_date: (value, values) => {
+    const end = asDate(value);
+    const start = asDate(values.start_date);
+    if (!end) return 'Select an end date';
+    if (start && end < start) return 'End date cannot be before start date';
+    return null;
+  },
+};
diff --git a/frontend/src/utils/forms/RecurringRuleModalUtils.js b/frontend/src/utils/forms/RecurringRuleModalUtils.js
index db8a5dd8..5a747bf5 100644
--- a/frontend/src/utils/forms/RecurringRuleModalUtils.js
+++ b/frontend/src/utils/forms/RecurringRuleModalUtils.js
@@ -1,25 +1,12 @@
 import API from '../../api.js';
-import { toTimeString } from '../dateTimeUtils.js';
-import dayjs from 'dayjs';
-
-export const getChannelOptions = (channels) => {
-  const list = Array.isArray(channels)
-    ? channels
-    : Object.values(channels || {});
-  return list
-    .sort((a, b) => {
-      const aNum = Number(a.channel_number) || 0;
-      const bNum = Number(b.channel_number) || 0;
-      if (aNum === bNum) {
-        return (a.name || '').localeCompare(b.name || '');
-      }
-      return aNum - bNum;
-    })
-    .map((item) => ({
-      value: `${item.id}`,
-      label: item.name || `Channel ${item.id}`,
-    }));
-};
+import {
+  getNow,
+  isAfter,
+  parseDate,
+  toDate,
+  toTimeString,
+} from '../dateTimeUtils.js';
+import { buildRecurringPayload } from './RecordingUtils.js';
 
 export const getUpcomingOccurrences = (
   recordings,
@@ -35,7 +22,7 @@ export const getUpcomingOccurrences = (
     .filter(
       (rec) =>
         rec?.custom_properties?.rule?.id === ruleId &&
-        toUserTime(rec.start_time).isAfter(now)
+        isAfter(toUserTime(rec.start_time), now)
     )
     .sort(
       (a, b) =>
@@ -45,17 +32,7 @@ export const getUpcomingOccurrences = (
 
 export const updateRecurringRule = async (ruleId, values) => {
   await API.updateRecurringRule(ruleId, {
-    channel: values.channel_id,
-    days_of_week: (values.days_of_week || []).map((d) => Number(d)),
-    start_time: toTimeString(values.start_time),
-    end_time: toTimeString(values.end_time),
-    start_date: values.start_date
-      ? dayjs(values.start_date).format('YYYY-MM-DD')
-      : null,
-    end_date: values.end_date
-      ? dayjs(values.end_date).format('YYYY-MM-DD')
-      : null,
-    name: values.rule_name?.trim() || '',
+    ...buildRecurringPayload(values),
     enabled: Boolean(values.enabled),
   });
 };
@@ -67,3 +44,16 @@ export const deleteRecurringRuleById = async (ruleId) => {
 export const updateRecurringRuleEnabled = async (ruleId, checked) => {
   await API.updateRecurringRule(ruleId, { enabled: checked });
 };
+
+export const getFormDefaults = (rule) => {
+  return {
+    channel_id: `${rule.channel}`,
+    days_of_week: (rule.days_of_week || []).map((d) => String(d)),
+    rule_name: rule.name || '',
+    start_time: toTimeString(rule.start_time),
+    end_time: toTimeString(rule.end_time),
+    start_date: parseDate(rule.start_date) || toDate(getNow()),
+    end_date: parseDate(rule.end_date),
+    enabled: Boolean(rule.enabled),
+  };
+};
diff --git a/frontend/src/utils/forms/SeriesRuleEditorModalUtils.js b/frontend/src/utils/forms/SeriesRuleEditorModalUtils.js
new file mode 100644
index 00000000..dbcd545e
--- /dev/null
+++ b/frontend/src/utils/forms/SeriesRuleEditorModalUtils.js
@@ -0,0 +1,84 @@
+import API from '../../api.js';
+import {
+  numberedChannelLabel,
+  sortedChannelOptions,
+} from './RecordingUtils.js';
+
+export const TITLE_MODES = [
+  { label: 'Exact', value: 'exact' },
+  { label: 'Contains', value: 'contains' },
+  { label: 'Whole word', value: 'search' },
+  { label: 'Regex', value: 'regex' },
+];
+export const DESCRIPTION_MODES = [
+  { label: 'Contains', value: 'contains' },
+  { label: 'Whole word', value: 'search' },
+  { label: 'Regex', value: 'regex' },
+];
+export const EPISODE_MODES = [
+  { label: 'All episodes', value: 'all' },
+  { label: 'New only', value: 'new' },
+];
+
+export function formatRange(start, end) {
+  try {
+    const s = new Date(start);
+    const e = new Date(end);
+
+    if(isNaN(s) || isNaN(e)) throw new Error('Invalid date');
+
+    const sameDay = s.toDateString() === e.toDateString();
+    const dateStr = s.toLocaleDateString();
+    const startStr = s.toLocaleTimeString([], {
+      hour: '2-digit',
+      minute: '2-digit',
+    });
+    const endStr = e.toLocaleTimeString([], {
+      hour: '2-digit',
+      minute: '2-digit',
+    });
+    return sameDay
+      ? `${dateStr} ${startStr} - ${endStr}`
+      : `${dateStr} ${startStr} -> ${e.toLocaleString()}`;
+  } catch {
+    return `${start} - ${end}`;
+  }
+}
+
+export const previewSeriesRule = (debouncedPreviewKey, controller) => {
+  return API.previewSeriesRule(debouncedPreviewKey, {
+    signal: controller.signal,
+  });
+};
+
+export const getTvgOptions = (tvgs) => {
+  const seen = new Set();
+  const options = [];
+  for (const t of tvgs || []) {
+    if (!t.tvg_id || seen.has(t.tvg_id)) continue;
+    seen.add(t.tvg_id);
+    options.push({
+      value: t.tvg_id,
+      label: t.name ? `${t.name} (${t.tvg_id})` : t.tvg_id,
+    });
+  }
+  return options.sort((a, b) => a.label.localeCompare(b.label));
+};
+
+export const getChannelOptions = (allChannels, tvgsById, tvgId) => {
+  const sorted = sortedChannelOptions(allChannels, numberedChannelLabel);
+  const matching = [];
+  const others = [];
+  for (const item of sorted) {
+    const channel = allChannels.find((c) => String(c.id) === item.value);
+    const cTvg = channel?.epg_data_id
+      ? tvgsById?.[channel.epg_data_id]?.tvg_id
+      : null;
+    if (tvgId && cTvg && String(cTvg) === String(tvgId)) {
+      matching.push(item);
+    } else {
+      others.push(item);
+    }
+  }
+  return [...matching, ...others];
+};
\ No newline at end of file
diff --git a/frontend/src/utils/forms/StreamProfileUtils.js b/frontend/src/utils/forms/StreamProfileUtils.js
new file mode 100644
index 00000000..edcc7ba6
--- /dev/null
+++ b/frontend/src/utils/forms/StreamProfileUtils.js
@@ -0,0 +1,44 @@
+// Built-in commands supported by Dispatcharr out of the box.
+import { yupResolver } from '@hookform/resolvers/yup';
+import API from '../../api.js';
+import * as Yup from 'yup';
+
+export const BUILT_IN_COMMANDS = [
+  { value: 'ffmpeg', label: 'FFmpeg' },
+  { value: 'streamlink', label: 'Streamlink' },
+  { value: 'cvlc', label: 'VLC' },
+  { value: 'yt-dlp', label: 'yt-dlp' },
+  { value: '__custom__', label: 'Custom…' },
+];
+
+// Default parameter examples for each built-in command.
+export const COMMAND_EXAMPLES = {
+  ffmpeg: '-user_agent {userAgent} -i {streamUrl} -c copy -f mpegts pipe:1',
+  streamlink: '{streamUrl} --http-header User-Agent={userAgent} best --stdout',
+  cvlc: '-vv -I dummy --no-video-title-show --http-user-agent {userAgent} {streamUrl} --sout #standard{access=file,mux=ts,dst=-}',
+  'yt-dlp': '--hls-use-mpegts -f best -o - {streamUrl}',
+};
+
+// Returns '__custom__' when the command isn't one of the built-ins,
+// otherwise returns the command value itself.
+export const toCommandSelection = (command) =>
+  BUILT_IN_COMMANDS.find((o) => o.value === command && o.value !== '__custom__')
+    ? command
+    : '__custom__';
+
+const schema = Yup.object({
+  name: Yup.string().required('Name is required'),
+  command: Yup.string().required('Command is required'),
+  parameters: Yup.string(),
+});
+
+export const getResolver = () => {
+  return yupResolver(schema);
+};
+
+export const updateStreamProfile = (profileId, values) => {
+  return API.updateStreamProfile({ id: profileId, ...values });
+};
+export const addStreamProfile = (values) => {
+  return API.addStreamProfile(values);
+};
diff --git a/frontend/src/utils/forms/StreamUtils.js b/frontend/src/utils/forms/StreamUtils.js
new file mode 100644
index 00000000..59998233
--- /dev/null
+++ b/frontend/src/utils/forms/StreamUtils.js
@@ -0,0 +1,19 @@
+import * as Yup from 'yup';
+import { yupResolver } from '@hookform/resolvers/yup';
+import API from '../../api.js';
+
+const schema = Yup.object({
+  name: Yup.string().required('Name is required'),
+  url: Yup.string().required('URL is required').min(0),
+});
+
+export const getResolver = () => {
+  return yupResolver(schema);
+};
+
+export const updateStream = (streamId, payload) => {
+  return API.updateStream({ id: streamId, ...payload });
+};
+export const addStream = (payload) => {
+  return API.addStream(payload);
+};
diff --git a/frontend/src/utils/forms/UserAgentUtils.js b/frontend/src/utils/forms/UserAgentUtils.js
new file mode 100644
index 00000000..c05c7681
--- /dev/null
+++ b/frontend/src/utils/forms/UserAgentUtils.js
@@ -0,0 +1,17 @@
+import { yupResolver } from '@hookform/resolvers/yup';
+import API from '../../api.js';
+import * as Yup from 'yup';
+
+const schema = Yup.object({
+  name: Yup.string().required('Name is required'),
+  user_agent: Yup.string().required('User-Agent is required'),
+});
+export const getResolver = () => {
+  return yupResolver(schema);
+};
+export const updateUserAgent = (userAgentId, values) => {
+  return API.updateUserAgent({ id: userAgentId, ...values });
+};
+export const addUserAgent = (values) => {
+  return API.addUserAgent(values);
+};
diff --git a/frontend/src/utils/forms/UserUtils.js b/frontend/src/utils/forms/UserUtils.js
new file mode 100644
index 00000000..256d84bb
--- /dev/null
+++ b/frontend/src/utils/forms/UserUtils.js
@@ -0,0 +1,150 @@
+import {NETWORK_ACCESS_OPTIONS, USER_LEVELS} from "../../constants.js";
+import { IPV4_CIDR_REGEX, IPV6_CIDR_REGEX } from '../networkUtils.js';
+import API from "../../api.js";
+
+const isValidNetworkEntry = (entry) =>
+  entry.match(IPV4_CIDR_REGEX) ||
+  entry.match(IPV6_CIDR_REGEX) ||
+  (entry + '/32').match(IPV4_CIDR_REGEX) ||
+  (entry + '/128').match(IPV6_CIDR_REGEX);
+const NETWORK_KEYS = Object.keys(NETWORK_ACCESS_OPTIONS);
+
+export const createUser = (values) => {
+  return API.createUser(values);
+};
+
+export const updateUser = (userId, values, isAdmin, authUser) => {
+  return API.updateUser(
+    userId,
+    values,
+    isAdmin ? false : authUser.id === userId
+  );
+};
+
+export const generateApiKey = (payload) => {
+  return API.generateApiKey(payload);
+};
+
+export const revokeApiKey = (payload) => {
+  return API.revokeApiKey(payload);
+};
+
+export const userToFormValues = (user) => {
+  const customProps = user.custom_properties || {};
+  const networks = customProps.allowed_networks || {};
+
+  return {
+    username: user.username,
+    first_name: user.first_name || '',
+    last_name: user.last_name || '',
+    email: user.email,
+    user_level: `${user.user_level}`,
+    stream_limit: user.stream_limit || 0,
+    channel_profiles:
+      user.channel_profiles.length > 0
+        ? user.channel_profiles.map((id) => `${id}`)
+        : ['0'],
+    xc_password: customProps.xc_password || '',
+    output_format: customProps.output_format || '',
+    output_profile: customProps.output_profile
+      ? `${customProps.output_profile}`
+      : '',
+    hide_adult_content: customProps.hide_adult_content || false,
+    epg_days: customProps.epg_days || 0,
+    epg_prev_days: customProps.epg_prev_days || 0,
+    allowed_ips: [
+      ...new Set(
+        NETWORK_KEYS.flatMap((key) =>
+          networks[key] ? networks[key].split(',').filter(Boolean) : []
+        )
+      ),
+    ],
+  };
+};
+
+export const formValuesToPayload = (values, existingUser) => {
+  const customProps = { ...(existingUser?.custom_properties || {}) };
+  const payload = { ...values };
+
+  customProps.xc_password = payload.xc_password || '';
+  delete payload.xc_password;
+
+  customProps.output_format = payload.output_format || null;
+  delete payload.output_format;
+
+  customProps.output_profile = payload.output_profile
+    ? parseInt(payload.output_profile, 10)
+    : null;
+  delete payload.output_profile;
+
+  customProps.hide_adult_content = payload.hide_adult_content || false;
+  delete payload.hide_adult_content;
+
+  customProps.epg_days = payload.epg_days || 0;
+  delete payload.epg_days;
+
+  customProps.epg_prev_days = payload.epg_prev_days || 0;
+  delete payload.epg_prev_days;
+
+  const joined = (payload.allowed_ips || []).join(',');
+  delete payload.allowed_ips;
+  const allowed_networks = {};
+  if (joined) {
+    NETWORK_KEYS.forEach((key) => {
+      allowed_networks[key] = joined;
+    });
+  }
+  customProps.allowed_networks = allowed_networks;
+
+  payload.custom_properties = customProps;
+
+  if (payload.channel_profiles?.includes('0')) {
+    payload.channel_profiles = [];
+  }
+
+  return payload;
+};
+
+export const getFormInitialValues = () => {
+  return {
+    username: '',
+    first_name: '',
+    last_name: '',
+    email: '',
+    user_level: '0',
+    stream_limit: 0,
+    password: '',
+    xc_password: '',
+    output_format: '',
+    output_profile: '',
+    channel_profiles: [],
+    hide_adult_content: false,
+    epg_days: 0,
+    epg_prev_days: 0,
+    allowed_ips: [],
+  };
+}
+
+export const getFormValidators = (user) => {
+  return (values) => ({
+    username: !values.username
+      ? 'Username is required'
+      : values.user_level == USER_LEVELS.STREAMER &&
+      !values.username.match(/^[a-z0-9]+$/i)
+        ? 'Streamer username must be alphanumeric'
+        : null,
+    password:
+      !user && !values.password && values.user_level != USER_LEVELS.STREAMER
+        ? 'Password is required'
+        : null,
+    xc_password:
+      values.xc_password && !values.xc_password.match(/^[a-z0-9]+$/i)
+        ? 'XC password must be alphanumeric'
+        : null,
+    allowed_ips: (values.allowed_ips || []).some(
+      (t) => !isValidNetworkEntry(t)
+    )
+      ? 'Invalid IP address or CIDR range'
+      : null,
+  });
+}
\ No newline at end of file
diff --git a/frontend/src/utils/guideUtils.js b/frontend/src/utils/guideUtils.js
index 58831713..9d6ec73c 100644
--- a/frontend/src/utils/guideUtils.js
+++ b/frontend/src/utils/guideUtils.js
@@ -11,7 +11,7 @@ import {
   getNow,
   getNowMs,
   roundToNearest,
-} from '../utils/dateTimeUtils.js';
+} from './dateTimeUtils.js';
 import API from '../api.js';
 
 export const PROGRAM_HEIGHT = 90;
@@ -309,25 +309,12 @@ export const getRuleByProgram = (rules, program) => {
   );
 };
 
-export const createRecording = async (channel, program) => {
-  await API.createRecording({
-    channel: `${channel.id}`,
-    start_time: program.start_time,
-    end_time: program.end_time,
-    custom_properties: { program },
-  });
+export const createRecording = async (values) => {
+  await API.createRecording(values);
 };
 
-export const createSeriesRule = async (program, mode) => {
-  await API.createSeriesRule({
-    tvg_id: program.tvg_id,
-    mode,
-    title: program.title,
-  });
-};
-
-export const evaluateSeriesRule = async (program) => {
-  await API.evaluateSeriesRules(program.tvg_id);
+export const createSeriesRule = async (values) => {
+  await API.createSeriesRule(values);
 };
 
 export const calculateLeftScrollPosition = (program, start) => {

From 1dd0446701ffd51031f5c80acf023483d7630817 Mon Sep 17 00:00:00 2001
From: Nick Sandstrom <32273437+nick4810@users.noreply.github.com>
Date: Mon, 25 May 2026 18:02:59 -0700
Subject: [PATCH 11/35] Added tests for utils

---
 .../RecordingDetailsModalUtils.test.js        | 104 ++++
 .../forms/__tests__/RecordingUtils.test.js    | 503 ++++++++++++++++++
 .../__tests__/RecurringRuleModalUtils.test.js | 163 ++----
 .../SeriesRuleEditorModalUtils.test.js        | 425 +++++++++++++++
 .../__tests__/StreamProfileUtils.test.js      | 197 +++++++
 .../utils/forms/__tests__/StreamUtils.test.js |  95 ++++
 .../forms/__tests__/UserAgentUtils.test.js    |  95 ++++
 .../utils/forms/__tests__/UserUtils.test.js   | 432 +++++++++++++++
 8 files changed, 1902 insertions(+), 112 deletions(-)
 create mode 100644 frontend/src/utils/forms/__tests__/RecordingUtils.test.js
 create mode 100644 frontend/src/utils/forms/__tests__/SeriesRuleEditorModalUtils.test.js
 create mode 100644 frontend/src/utils/forms/__tests__/StreamProfileUtils.test.js
 create mode 100644 frontend/src/utils/forms/__tests__/StreamUtils.test.js
 create mode 100644 frontend/src/utils/forms/__tests__/UserAgentUtils.test.js
 create mode 100644 frontend/src/utils/forms/__tests__/UserUtils.test.js

diff --git a/frontend/src/utils/forms/__tests__/RecordingDetailsModalUtils.test.js b/frontend/src/utils/forms/__tests__/RecordingDetailsModalUtils.test.js
index c86da2a8..303b891b 100644
--- a/frontend/src/utils/forms/__tests__/RecordingDetailsModalUtils.test.js
+++ b/frontend/src/utils/forms/__tests__/RecordingDetailsModalUtils.test.js
@@ -1,8 +1,22 @@
 import { describe, it, expect, vi, beforeEach } from 'vitest';
 import * as RecordingDetailsModalUtils from '../RecordingDetailsModalUtils';
 import dayjs from 'dayjs';
+import API from '../../../api.js';
+
+vi.mock('../../../api.js', () => ({
+  default: {
+    getChannel: vi.fn(),
+    updateRecordingMetadata: vi.fn(),
+    refreshArtwork: vi.fn(),
+  },
+}));
+
 
 describe('RecordingDetailsModalUtils', () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
   describe('getStatRows', () => {
     it('should return all stats when all values are present', () => {
       const stats = {
@@ -624,4 +638,94 @@ describe('RecordingDetailsModalUtils', () => {
       expect(result).toEqual([]);
     });
   });
+
+  describe('getChannel', () => {
+    it('should call API.getChannel with the given id', async () => {
+      const mockChannel = { id: 42, name: 'Channel 1' };
+      API.getChannel.mockResolvedValue(mockChannel);
+
+      const result = await RecordingDetailsModalUtils.getChannel(42);
+
+      expect(API.getChannel).toHaveBeenCalledWith(42);
+      expect(result).toEqual(mockChannel);
+    });
+
+    it('should propagate API errors', async () => {
+      API.getChannel.mockRejectedValue(new Error('Not found'));
+
+      await expect(RecordingDetailsModalUtils.getChannel(99)).rejects.toThrow('Not found');
+    });
+  });
+
+  describe('updateRecordingMetadata', () => {
+    it('should call API with title and description', async () => {
+      const mockResponse = { id: 1, title: 'Updated Title' };
+      API.updateRecordingMetadata.mockResolvedValue(mockResponse);
+
+      const recording = { id: 1 };
+      const result = await RecordingDetailsModalUtils.updateRecordingMetadata(
+        recording,
+        'Updated Title',
+        'Updated description'
+      );
+
+      expect(API.updateRecordingMetadata).toHaveBeenCalledWith(1, {
+        title: 'Updated Title',
+        description: 'Updated description',
+      });
+      expect(result).toEqual(mockResponse);
+    });
+
+    it('should default title to "Custom Recording" when editTitle is empty', async () => {
+      API.updateRecordingMetadata.mockResolvedValue({});
+
+      const recording = { id: 5 };
+      await RecordingDetailsModalUtils.updateRecordingMetadata(recording, '', 'Some description');
+
+      expect(API.updateRecordingMetadata).toHaveBeenCalledWith(5, {
+        title: 'Custom Recording',
+        description: 'Some description',
+      });
+    });
+
+    it('should default title to "Custom Recording" when editTitle is null', async () => {
+      API.updateRecordingMetadata.mockResolvedValue({});
+
+      const recording = { id: 5 };
+      await RecordingDetailsModalUtils.updateRecordingMetadata(recording, null, 'desc');
+
+      expect(API.updateRecordingMetadata).toHaveBeenCalledWith(5, {
+        title: 'Custom Recording',
+        description: 'desc',
+      });
+    });
+
+    it('should propagate API errors', async () => {
+      API.updateRecordingMetadata.mockRejectedValue(new Error('Server error'));
+
+      await expect(
+        RecordingDetailsModalUtils.updateRecordingMetadata({ id: 1 }, 'Title', 'Desc')
+      ).rejects.toThrow('Server error');
+    });
+  });
+
+  describe('refreshArtwork', () => {
+    it('should call API.refreshArtwork with the given id', async () => {
+      const mockResponse = { success: true };
+      API.refreshArtwork.mockResolvedValue(mockResponse);
+
+      const result = await RecordingDetailsModalUtils.refreshArtwork(7);
+
+      expect(API.refreshArtwork).toHaveBeenCalledWith(7);
+      expect(result).toEqual(mockResponse);
+    });
+
+    it('should propagate API errors', async () => {
+      API.refreshArtwork.mockRejectedValue(new Error('Artwork fetch failed'));
+
+      await expect(RecordingDetailsModalUtils.refreshArtwork(7)).rejects.toThrow(
+        'Artwork fetch failed'
+      );
+    });
+  });
 });
diff --git a/frontend/src/utils/forms/__tests__/RecordingUtils.test.js b/frontend/src/utils/forms/__tests__/RecordingUtils.test.js
new file mode 100644
index 00000000..be7cf1a2
--- /dev/null
+++ b/frontend/src/utils/forms/__tests__/RecordingUtils.test.js
@@ -0,0 +1,503 @@
+import { describe, it, expect, vi } from 'vitest';
+import dayjs from 'dayjs';
+
+vi.mock('../../../api.js', () => ({
+  default: {
+    getChannelsSummary: vi.fn(),
+    updateRecording: vi.fn(),
+    createRecording: vi.fn(),
+    createRecurringRule: vi.fn(),
+  },
+}));
+
+vi.mock('../../dateTimeUtils.js', () => ({
+  add: vi.fn((d, amount, unit) => dayjs(d).add(amount, unit)),
+  diff: vi.fn((a, b, unit) => dayjs(a).diff(dayjs(b), unit)),
+  format: vi.fn((d, fmt) => (d ? dayjs(d).format(fmt) : null)),
+  getNow: vi.fn(() => dayjs('2024-06-15T10:00:00')),
+  initializeTime: vi.fn((val, fmts, ref, strict) => {
+    for (const fmt of fmts) {
+      const p = dayjs(val, fmt, strict);
+      if (p.isValid()) return p;
+    }
+    return dayjs('invalid');
+  }),
+  isValid: vi.fn((d) => dayjs(d).isValid()),
+  roundToNearest: vi.fn((d) => d),
+  setMillisecond: vi.fn((d, ms) => dayjs(d).millisecond(ms)),
+  setSecond: vi.fn((d, s) => dayjs(d).second(s)),
+  toDate: vi.fn((d) => (d ? dayjs(d).toDate() : new Date())),
+  toTimeString: vi.fn((t) => {
+    if (!t) return '00:00';
+    const match = String(t).match(/(\d{2}:\d{2})/);
+    return match ? match[1] : t;
+  }),
+}));
+
+vi.mock('@mantine/form', () => ({
+  isNotEmpty: vi.fn((msg) => (value) => (value ? null : msg)),
+}));
+
+import API from '../../../api.js';
+import {
+  asDate,
+  toIsoIfDate,
+  toDateString,
+  createRoundedDate,
+  timeChange,
+  getChannelsSummary,
+  updateRecording,
+  createRecording,
+  createRecurringRule,
+  sortedChannelOptions,
+  numberedChannelLabel,
+  getSingleFormDefaults,
+  getRecurringFormDefaults,
+  buildSinglePayload,
+  buildRecurringPayload,
+  singleFormValidators,
+  recurringFormValidators,
+} from '../RecordingUtils.js';
+
+describe('RecordingUtils', () => {
+  // ─── asDate ───────────────────────────────────────────────────────────────────
+
+  describe('asDate', () => {
+    it('returns null for falsy input', () => {
+      expect(asDate(null)).toBeNull();
+      expect(asDate(undefined)).toBeNull();
+      expect(asDate('')).toBeNull();
+    });
+
+    it('returns a Date instance unchanged', () => {
+      const d = new Date('2024-06-15');
+      expect(asDate(d)).toBe(d);
+    });
+
+    it('parses a valid ISO string to a Date', () => {
+      const result = asDate('2024-06-15T10:00:00Z');
+      expect(result).toBeInstanceOf(Date);
+      expect(result.toISOString()).toContain('2024-06-15');
+    });
+
+    it('returns null for an invalid date string', () => {
+      expect(asDate('not-a-date')).toBeNull();
+    });
+  });
+
+// ─── toIsoIfDate ──────────────────────────────────────────────────────────────
+
+  describe('toIsoIfDate', () => {
+    it('returns ISO string for a valid Date', () => {
+      const d = new Date('2024-06-15T00:00:00Z');
+      expect(toIsoIfDate(d)).toBe(d.toISOString());
+    });
+
+    it('returns ISO string for a valid date string', () => {
+      const result = toIsoIfDate('2024-06-15T10:00:00Z');
+      expect(result).toMatch(/2024-06-15/);
+    });
+
+    it('returns the original value when not a valid date', () => {
+      expect(toIsoIfDate('some-string')).toBe('some-string');
+    });
+
+    it('returns null for null input', () => {
+      expect(toIsoIfDate(null)).toBeNull();
+    });
+  });
+
+// ─── toDateString ─────────────────────────────────────────────────────────────
+
+  describe('toDateString', () => {
+    it('formats a Date to YYYY-MM-DD', () => {
+      const d = new Date('2024-06-15T12:00:00Z');
+      const result = toDateString(d);
+      expect(result).toBe('2024-06-15');
+    });
+
+    it('formats a valid ISO string to YYYY-MM-DD', () => {
+      expect(toDateString('2024-06-15T12:00:00')).toBe('2024-06-15');
+    });
+
+    it('returns null for null input', () => {
+      expect(toDateString(null)).toBeNull();
+    });
+
+    it('returns null for an invalid string', () => {
+      expect(toDateString('not-a-date')).toBeNull();
+    });
+  });
+
+// ─── createRoundedDate ────────────────────────────────────────────────────────
+
+  describe('createRoundedDate', () => {
+    it('returns a Date', () => {
+      expect(createRoundedDate()).toBeInstanceOf(Date);
+    });
+
+    it('returns a Date when minutesAhead is provided', () => {
+      expect(createRoundedDate(60)).toBeInstanceOf(Date);
+    });
+  });
+
+// ─── timeChange ───────────────────────────────────────────────────────────────
+
+  describe('timeChange', () => {
+    it('calls setter with string directly', () => {
+      const setter = vi.fn();
+      timeChange(setter)('10:30');
+      expect(setter).toHaveBeenCalledWith('10:30');
+    });
+
+    it('calls setter with currentTarget.value from event', () => {
+      const setter = vi.fn();
+      timeChange(setter)({ currentTarget: { value: '09:00' } });
+      expect(setter).toHaveBeenCalledWith('09:00');
+    });
+
+    it('does not call setter for unrecognized input', () => {
+      const setter = vi.fn();
+      timeChange(setter)(42);
+      expect(setter).not.toHaveBeenCalled();
+    });
+  });
+
+// ─── API wrappers ─────────────────────────────────────────────────────────────
+
+  describe('getChannelsSummary', () => {
+    it('calls API.getChannelsSummary', () => {
+      API.getChannelsSummary.mockResolvedValueOnce([]);
+      getChannelsSummary();
+      expect(API.getChannelsSummary).toHaveBeenCalled();
+    });
+  });
+
+  describe('updateRecording', () => {
+    it('calls API.updateRecording with id and data', () => {
+      API.updateRecording.mockResolvedValueOnce({});
+      updateRecording(1, { name: 'test' });
+      expect(API.updateRecording).toHaveBeenCalledWith(1, { name: 'test' });
+    });
+  });
+
+  describe('createRecording', () => {
+    it('calls API.createRecording with data', () => {
+      API.createRecording.mockResolvedValueOnce({});
+      createRecording({ channel: 1 });
+      expect(API.createRecording).toHaveBeenCalledWith({ channel: 1 });
+    });
+  });
+
+  describe('createRecurringRule', () => {
+    it('calls API.createRecurringRule with data', () => {
+      API.createRecurringRule.mockResolvedValueOnce({});
+      createRecurringRule({ channel: 1 });
+      expect(API.createRecurringRule).toHaveBeenCalledWith({ channel: 1 });
+    });
+  });
+
+// ─── sortedChannelOptions ─────────────────────────────────────────────────────
+
+  describe('sortedChannelOptions', () => {
+    const channels = [
+      { id: 3, name: 'CNN',  channel_number: 20 },
+      { id: 1, name: 'ESPN', channel_number: 5  },
+      { id: 2, name: 'HBO',  channel_number: 10 },
+    ];
+
+    it('sorts channels by channel_number ascending', () => {
+      const result = sortedChannelOptions(channels);
+      // ESPN(5) < HBO(10) < CNN(20) → ids 1, 2, 3
+      expect(result.map((o) => o.value)).toEqual(['1', '2', '3']);
+    });
+
+    it('maps each channel to { value, label }', () => {
+      const result = sortedChannelOptions([{ id: 7, name: 'FOX', channel_number: 3 }]);
+      expect(result[0]).toEqual({ value: '7', label: 'FOX' });
+    });
+
+    it('uses custom labelFn when provided', () => {
+      const result = sortedChannelOptions(
+        [{ id: 1, name: 'ESPN', channel_number: 5 }],
+        (item) => `CH${item.channel_number} ${item.name}`
+      );
+      expect(result[0].label).toBe('CH5 ESPN');
+    });
+
+    it('falls back to "Channel id" when name is missing', () => {
+      const result = sortedChannelOptions([{ id: 9, channel_number: 1 }]);
+      expect(result[0].label).toBe('Channel 9');
+    });
+
+    it('accepts an object (dict) of channels', () => {
+      const dict = {
+        a: { id: 1, name: 'A', channel_number: 2 },
+        b: { id: 2, name: 'B', channel_number: 1 },
+      };
+      const result = sortedChannelOptions(dict);
+      expect(result[0].value).toBe('2');
+      expect(result[1].value).toBe('1');
+    });
+
+    it('returns empty array for null input', () => {
+      expect(sortedChannelOptions(null)).toEqual([]);
+    });
+
+    it('returns empty array for empty array input', () => {
+      expect(sortedChannelOptions([])).toEqual([]);
+    });
+
+    it('sorts by name when channel_numbers are equal', () => {
+      const input = [
+        { id: 2, name: 'Zebra', channel_number: 5 },
+        { id: 1, name: 'Apple', channel_number: 5 },
+      ];
+      const result = sortedChannelOptions(input);
+      expect(result[0].label).toBe('Apple');
+      expect(result[1].label).toBe('Zebra');
+    });
+
+    it('puts channels with no channel_number (0) first in numeric order', () => {
+      const input = [
+        { id: 1, name: 'A', channel_number: 5 },
+        { id: 2, name: 'B', channel_number: null },
+      ];
+      const result = sortedChannelOptions(input);
+      // null → 0, so it sorts before 5
+      expect(result[0].value).toBe('2');
+    });
+  });
+
+// ─── numberedChannelLabel ─────────────────────────────────────────────────────
+
+  describe('numberedChannelLabel', () => {
+    it('returns "number - name" when both are present', () => {
+      expect(numberedChannelLabel({ id: 1, name: 'HBO', channel_number: 501 }))
+        .toBe('501 - HBO');
+    });
+
+    it('returns name only when channel_number is falsy', () => {
+      expect(numberedChannelLabel({ id: 1, name: 'HBO', channel_number: null }))
+        .toBe('HBO');
+    });
+
+    it('falls back to "Channel id" when name is missing and number present', () => {
+      expect(numberedChannelLabel({ id: 5, channel_number: 10 }))
+        .toBe('10 - Channel 5');
+    });
+
+    it('falls back to "Channel id" when both name and number are missing', () => {
+      expect(numberedChannelLabel({ id: 7 })).toBe('Channel 7');
+    });
+  });
+
+// ─── getSingleFormDefaults ────────────────────────────────────────────────────
+
+  describe('getSingleFormDefaults', () => {
+    it('returns defaults with no arguments', () => {
+      const result = getSingleFormDefaults();
+      expect(result.channel_id).toBe('');
+      expect(result.start_time).toBeInstanceOf(Date);
+      expect(result.end_time).toBeInstanceOf(Date);
+    });
+
+    it('uses recording values when provided', () => {
+      const recording = {
+        channel: 3,
+        start_time: '2024-06-15T08:00:00Z',
+        end_time: '2024-06-15T09:00:00Z',
+      };
+      const result = getSingleFormDefaults(recording);
+      expect(result.channel_id).toBe('3');
+      expect(result.start_time).toBeInstanceOf(Date);
+      expect(result.end_time).toBeInstanceOf(Date);
+    });
+
+    it('uses channel id when channel is provided and recording is null', () => {
+      const result = getSingleFormDefaults(null, { id: 7 });
+      expect(result.channel_id).toBe('7');
+    });
+  });
+
+// ─── getRecurringFormDefaults ─────────────────────────────────────────────────
+
+  describe('getRecurringFormDefaults', () => {
+    it('returns defaults with no arguments', () => {
+      const result = getRecurringFormDefaults();
+      expect(result.channel_id).toBe('');
+      expect(result.days_of_week).toEqual([]);
+      expect(result.rule_name).toBe('');
+      expect(typeof result.start_time).toBe('string');
+      expect(typeof result.end_time).toBe('string');
+      expect(result.start_date).toBeInstanceOf(Date);
+      expect(result.end_date).toBeInstanceOf(Date);
+    });
+
+    it('uses channel name and id when channel is provided', () => {
+      const result = getRecurringFormDefaults({ id: 5, name: 'ESPN' });
+      expect(result.channel_id).toBe('5');
+      expect(result.rule_name).toBe('ESPN');
+    });
+  });
+
+// ─── buildSinglePayload ───────────────────────────────────────────────────────
+
+  describe('buildSinglePayload', () => {
+    it('builds payload from values', () => {
+      const values = {
+        channel_id: '2',
+        start_time: new Date('2024-06-15T08:00:00Z'),
+        end_time: new Date('2024-06-15T09:00:00Z'),
+      };
+      const result = buildSinglePayload(values);
+      expect(result.channel).toBe('2');
+      expect(result.start_time).toContain('2024-06-15');
+      expect(result.end_time).toContain('2024-06-15');
+    });
+  });
+
+// ─── buildRecurringPayload ────────────────────────────────────────────────────
+
+  describe('buildRecurringPayload', () => {
+    it('builds payload from values', () => {
+      const values = {
+        channel_id: '3',
+        days_of_week: ['1', '3', '5'],
+        start_time: '08:00',
+        end_time: '09:00',
+        start_date: new Date('2024-06-15T12:00:00'),
+        end_date: new Date('2024-12-25T12:00:00'),
+        rule_name: '  Morning News  ',
+      };
+      const result = buildRecurringPayload(values);
+      expect(result.channel).toBe('3');
+      expect(result.days_of_week).toEqual([1, 3, 5]);
+      expect(result.start_time).toBe('08:00');
+      expect(result.end_time).toBe('09:00');
+      expect(result.start_date).toBe('2024-06-15');
+      expect(result.end_date).toBe('2024-12-25');
+      expect(result.name).toBe('Morning News');
+    });
+
+    it('handles empty days_of_week', () => {
+      const values = {
+        channel_id: '1',
+        days_of_week: [],
+        start_time: '10:00',
+        end_time: '11:00',
+        start_date: new Date('2024-06-15T12:00:00'),
+        end_date: new Date('2024-06-15T12:00:00'),
+        rule_name: '',
+      };
+      const result = buildRecurringPayload(values);
+      expect(result.days_of_week).toEqual([]);
+      expect(result.name).toBe('');
+    });
+  });
+
+// ─── singleFormValidators ─────────────────────────────────────────────────────
+
+  describe('singleFormValidators', () => {
+    describe('end_time', () => {
+      it('returns error when end time is missing', () => {
+        expect(singleFormValidators.end_time(null, { start_time: null })).toBe(
+          'Select an end time'
+        );
+      });
+
+      it('returns error when end time is not after start time', () => {
+        const start = new Date('2024-06-15T10:00:00Z');
+        const end = new Date('2024-06-15T09:00:00Z');
+        expect(singleFormValidators.end_time(end, { start_time: start })).toBe(
+          'End time must be after start time'
+        );
+      });
+
+      it('returns error when end equals start', () => {
+        const t = new Date('2024-06-15T10:00:00Z');
+        expect(singleFormValidators.end_time(t, { start_time: t })).toBe(
+          'End time must be after start time'
+        );
+      });
+
+      it('returns null when end is after start', () => {
+        const start = new Date('2024-06-15T09:00:00Z');
+        const end = new Date('2024-06-15T10:00:00Z');
+        expect(singleFormValidators.end_time(end, { start_time: start })).toBeNull();
+      });
+    });
+  });
+
+// ─── recurringFormValidators ──────────────────────────────────────────────────
+
+  describe('recurringFormValidators', () => {
+    describe('days_of_week', () => {
+      it('returns error for empty array', () => {
+        expect(recurringFormValidators.days_of_week([])).toBe(
+          'Pick at least one day'
+        );
+      });
+
+      it('returns null for non-empty array', () => {
+        expect(recurringFormValidators.days_of_week([1])).toBeNull();
+      });
+    });
+
+    describe('start_time', () => {
+      it('returns error for falsy value', () => {
+        expect(recurringFormValidators.start_time(null)).toBe(
+          'Select a start time'
+        );
+      });
+
+      it('returns null for a valid time string', () => {
+        expect(recurringFormValidators.start_time('10:00')).toBeNull();
+      });
+    });
+
+    describe('end_time', () => {
+      it('returns error when value is falsy', () => {
+        expect(recurringFormValidators.end_time(null, { start_time: '2024-06-15T10:00:00' })).toBe(
+          'Select an end time'
+        );
+      });
+
+      it('returns error when end equals start (diff === 0)', () => {
+        const result = recurringFormValidators.end_time('2024-06-15T10:00:00', {
+          start_time: '2024-06-15T10:00:00',
+        });
+        expect(result).toBe('End time must differ from start time');
+      });
+
+      it('returns null when end differs from start', () => {
+        const result = recurringFormValidators.end_time('2024-06-15T11:00:00', {
+          start_time: '2024-06-15T10:00:00',
+        });
+        expect(result).toBeNull();
+      });
+    });
+
+    describe('end_date', () => {
+      it('returns error when end_date is missing', () => {
+        expect(
+          recurringFormValidators.end_date(null, { start_date: new Date() })
+        ).toBe('Select an end date');
+      });
+
+      it('returns error when end_date is before start_date', () => {
+        const start = new Date('2024-06-15');
+        const end = new Date('2024-06-01');
+        expect(recurringFormValidators.end_date(end, { start_date: start })).toBe(
+          'End date cannot be before start date'
+        );
+      });
+
+      it('returns null when end_date is on or after start_date', () => {
+        const start = new Date('2024-06-15');
+        const end = new Date('2024-06-15');
+        expect(recurringFormValidators.end_date(end, { start_date: start })).toBeNull();
+      });
+    });
+  });
+});
diff --git a/frontend/src/utils/forms/__tests__/RecurringRuleModalUtils.test.js b/frontend/src/utils/forms/__tests__/RecurringRuleModalUtils.test.js
index 04561926..fd6d8db2 100644
--- a/frontend/src/utils/forms/__tests__/RecurringRuleModalUtils.test.js
+++ b/frontend/src/utils/forms/__tests__/RecurringRuleModalUtils.test.js
@@ -10,113 +10,24 @@ vi.mock('../../../api.js', () => ({
   },
 }));
 
+vi.mock('../../dateTimeUtils.js', () => ({
+  toTimeString: vi.fn((t) => {
+    if (!t) return '00:00';
+    const match = String(t).match(/T(\d{2}:\d{2})/);
+    return match ? match[1] : t;
+  }),
+  parseDate: vi.fn((d) => (d ? dayjs(d).toDate() : null)),
+  toDate: vi.fn((d) => (d ? dayjs(d).toDate() : new Date())),
+  getNow: vi.fn(() => dayjs()),
+  isAfter: vi.fn((a, b) => dayjs(a).isAfter(dayjs(b))),
+  format: vi.fn((d, fmt) => (d ? dayjs(d).format(fmt) : null)),
+}));
+
 describe('RecurringRuleModalUtils', () => {
   beforeEach(() => {
     vi.clearAllMocks();
   });
 
-  describe('getChannelOptions', () => {
-    it('should return sorted channel options by channel number', () => {
-      const channels = {
-        ch1: { id: 1, channel_number: '10', name: 'ABC' },
-        ch2: { id: 2, channel_number: '5', name: 'NBC' },
-        ch3: { id: 3, channel_number: '15', name: 'CBS' },
-      };
-
-      const result = RecurringRuleModalUtils.getChannelOptions(channels);
-
-      expect(result).toEqual([
-        { value: '2', label: 'NBC' },
-        { value: '1', label: 'ABC' },
-        { value: '3', label: 'CBS' },
-      ]);
-    });
-
-    it('should sort alphabetically by name when channel numbers are equal', () => {
-      const channels = {
-        ch1: { id: 1, channel_number: '10', name: 'ZBC' },
-        ch2: { id: 2, channel_number: '10', name: 'ABC' },
-        ch3: { id: 3, channel_number: '10', name: 'MBC' },
-      };
-
-      const result = RecurringRuleModalUtils.getChannelOptions(channels);
-
-      expect(result).toEqual([
-        { value: '2', label: 'ABC' },
-        { value: '3', label: 'MBC' },
-        { value: '1', label: 'ZBC' },
-      ]);
-    });
-
-    it('should handle missing channel numbers', () => {
-      const channels = {
-        ch1: { id: 1, name: 'ABC' },
-        ch2: { id: 2, channel_number: '5', name: 'NBC' },
-      };
-
-      const result = RecurringRuleModalUtils.getChannelOptions(channels);
-
-      expect(result).toEqual([
-        { value: '1', label: 'ABC' },
-        { value: '2', label: 'NBC' },
-      ]);
-    });
-
-    it('should use fallback label when name is missing', () => {
-      const channels = {
-        ch1: { id: 1, channel_number: '10' },
-        ch2: { id: 2, channel_number: '5', name: '' },
-      };
-
-      const result = RecurringRuleModalUtils.getChannelOptions(channels);
-
-      expect(result).toEqual([
-        { value: '2', label: 'Channel 2' },
-        { value: '1', label: 'Channel 1' },
-      ]);
-    });
-
-    it('should handle empty channels object', () => {
-      const result = RecurringRuleModalUtils.getChannelOptions({});
-
-      expect(result).toEqual([]);
-    });
-
-    it('should handle null channels', () => {
-      const result = RecurringRuleModalUtils.getChannelOptions(null);
-
-      expect(result).toEqual([]);
-    });
-
-    it('should handle undefined channels', () => {
-      const result = RecurringRuleModalUtils.getChannelOptions(undefined);
-
-      expect(result).toEqual([]);
-    });
-
-    it('should convert channel id to string value', () => {
-      const channels = {
-        ch1: { id: 123, channel_number: '10', name: 'ABC' },
-      };
-
-      const result = RecurringRuleModalUtils.getChannelOptions(channels);
-
-      expect(result[0].value).toBe('123');
-      expect(typeof result[0].value).toBe('string');
-    });
-
-    it('should handle non-numeric channel numbers', () => {
-      const channels = {
-        ch1: { id: 1, channel_number: 'HD1', name: 'ABC' },
-        ch2: { id: 2, channel_number: '5', name: 'NBC' },
-      };
-
-      const result = RecurringRuleModalUtils.getChannelOptions(channels);
-
-      expect(result).toHaveLength(2);
-    });
-  });
-
   describe('getUpcomingOccurrences', () => {
     let toUserTime;
     let userNow;
@@ -310,11 +221,11 @@ describe('RecurringRuleModalUtils', () => {
       const values = {
         channel_id: '5',
         days_of_week: ['1', '3', '5'],
-        start_time: '14:30',
-        end_time: '16:00',
-        start_date: '2024-01-01',
-        end_date: '2024-12-31',
-        rule_name: 'My Rule',
+        start_time: '10:00',
+        end_time: '11:00',
+        start_date: dayjs('2024-06-15'),
+        end_date: dayjs('2024-12-25'),
+        rule_name: '  Test Rule  ',
         enabled: true,
       };
 
@@ -323,11 +234,11 @@ describe('RecurringRuleModalUtils', () => {
       expect(API.updateRecurringRule).toHaveBeenCalledWith(1, {
         channel: '5',
         days_of_week: [1, 3, 5],
-        start_time: '14:30',
-        end_time: '16:00',
-        start_date: '2024-01-01',
-        end_date: '2024-12-31',
-        name: 'My Rule',
+        start_time: '10:00',
+        end_time: '11:00',
+        start_date: '2024-06-15',
+        end_date: '2024-12-25',
+        name: 'Test Rule',
         enabled: true,
       });
     });
@@ -530,4 +441,32 @@ describe('RecurringRuleModalUtils', () => {
       });
     });
   });
+
+  describe('getFormDefaults', () => {
+    it('should return formatted defaults from rule', () => {
+      const rule = {
+        channel: 5,
+        days_of_week: [1, 3, 5],
+        name: 'Test Rule',
+        start_time: '2024-06-15T10:00:00',
+        end_time: '2024-06-15T11:00:00',
+        start_date: '2024-06-15',
+        end_date: '2024-12-25',
+        enabled: true,
+      };
+
+      const result = RecurringRuleModalUtils.getFormDefaults(rule);
+
+      expect(result).toEqual({
+        channel_id: '5',
+        days_of_week: ['1', '3', '5'],
+        rule_name: 'Test Rule',
+        start_time: '10:00',
+        end_time: '11:00',
+        start_date: dayjs('2024-06-15').toDate(),
+        end_date: dayjs('2024-12-25').toDate(),
+        enabled: true,
+      });
+    });
+  });
 });
diff --git a/frontend/src/utils/forms/__tests__/SeriesRuleEditorModalUtils.test.js b/frontend/src/utils/forms/__tests__/SeriesRuleEditorModalUtils.test.js
new file mode 100644
index 00000000..1731e08d
--- /dev/null
+++ b/frontend/src/utils/forms/__tests__/SeriesRuleEditorModalUtils.test.js
@@ -0,0 +1,425 @@
+import { describe, it, expect, vi, beforeEach } from 'vitest';
+
+// ── Dependency mocks ───────────────────────────────────────────────────────────
+vi.mock('../../../api.js', () => ({
+  default: {
+    previewSeriesRule: vi.fn(),
+  },
+}));
+
+vi.mock('../RecordingUtils.js', () => ({
+  numberedChannelLabel: vi.fn(
+    (item) =>
+      item.channel_number
+        ? `${item.channel_number} - ${item.name || `Channel ${item.id}`}`
+        : item.name || `Channel ${item.id}`
+  ),
+  sortedChannelOptions: vi.fn((channels) =>
+    (Array.isArray(channels) ? channels : []).map((c) => ({
+      value: String(c.id),
+      label: c.name || `Channel ${c.id}`,
+    }))
+  ),
+}));
+
+// ── Imports after mocks ────────────────────────────────────────────────────────
+import API from '../../../api.js';
+import {
+  TITLE_MODES,
+  DESCRIPTION_MODES,
+  EPISODE_MODES,
+  formatRange,
+  getTvgOptions,
+  getChannelOptions,
+  previewSeriesRule,
+} from '../SeriesRuleEditorModalUtils.js';
+import { sortedChannelOptions, numberedChannelLabel } from '../RecordingUtils.js';
+
+// ─────────────────────────────────────────────────────────────────────────────
+
+describe('SeriesRuleEditorModalUtils', () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  // ── Constants ──────────────────────────────────────────────────────────────
+
+  describe('TITLE_MODES', () => {
+    it('exports an array of mode objects', () => {
+      expect(Array.isArray(TITLE_MODES)).toBe(true);
+      expect(TITLE_MODES.length).toBeGreaterThan(0);
+    });
+
+    it('every entry has a label and value', () => {
+      TITLE_MODES.forEach((m) => {
+        expect(m).toHaveProperty('label');
+        expect(m).toHaveProperty('value');
+      });
+    });
+
+    it('contains exact, contains, search and regex modes', () => {
+      const values = TITLE_MODES.map((m) => m.value);
+      expect(values).toContain('exact');
+      expect(values).toContain('contains');
+      expect(values).toContain('search');
+      expect(values).toContain('regex');
+    });
+  });
+
+  describe('DESCRIPTION_MODES', () => {
+    it('exports an array of mode objects', () => {
+      expect(Array.isArray(DESCRIPTION_MODES)).toBe(true);
+      expect(DESCRIPTION_MODES.length).toBeGreaterThan(0);
+    });
+
+    it('every entry has a label and value', () => {
+      DESCRIPTION_MODES.forEach((m) => {
+        expect(m).toHaveProperty('label');
+        expect(m).toHaveProperty('value');
+      });
+    });
+
+    it('contains contains, search and regex modes', () => {
+      const values = DESCRIPTION_MODES.map((m) => m.value);
+      expect(values).toContain('contains');
+      expect(values).toContain('search');
+      expect(values).toContain('regex');
+    });
+
+    it('does not contain exact mode', () => {
+      const values = DESCRIPTION_MODES.map((m) => m.value);
+      expect(values).not.toContain('exact');
+    });
+  });
+
+  describe('EPISODE_MODES', () => {
+    it('exports an array with all and new modes', () => {
+      const values = EPISODE_MODES.map((m) => m.value);
+      expect(values).toContain('all');
+      expect(values).toContain('new');
+    });
+
+    it('every entry has a label and value', () => {
+      EPISODE_MODES.forEach((m) => {
+        expect(m).toHaveProperty('label');
+        expect(m).toHaveProperty('value');
+      });
+    });
+  });
+
+  // ── formatRange ────────────────────────────────────────────────────────────
+
+  describe('formatRange', () => {
+    it('formats same-day range as "date startTime - endTime"', () => {
+      const start = '2024-06-01T10:00:00';
+      const end   = '2024-06-01T11:30:00';
+      const result = formatRange(start, end);
+      // Must include a dash separating start and end times (not "->")
+      expect(result).toMatch(/-(?!>)/);
+      expect(result).not.toMatch(/->/);
+    });
+
+    it('formats cross-day range with "->" separator', () => {
+      const start = '2024-06-01T23:00:00';
+      const end   = '2024-06-02T01:00:00';
+      const result = formatRange(start, end);
+      expect(result).toMatch(/->/);
+    });
+
+    it('returns fallback string when dates are invalid', () => {
+      const result = formatRange('not-a-date', 'also-not-a-date');
+      expect(result).toBe('not-a-date - also-not-a-date');
+    });
+
+    it('includes a date string component in the output', () => {
+      const start = '2024-06-01T10:00:00';
+      const end   = '2024-06-01T11:00:00';
+      const result = formatRange(start, end);
+      // toLocaleDateString produces something non-empty
+      expect(result.length).toBeGreaterThan(5);
+    });
+
+    it('handles ISO strings with timezone offsets', () => {
+      const start = '2024-06-01T10:00:00Z';
+      const end   = '2024-06-01T11:00:00Z';
+      // Should not throw
+      expect(() => formatRange(start, end)).not.toThrow();
+    });
+  });
+
+  // ── getTvgOptions ──────────────────────────────────────────────────────────
+
+  describe('getTvgOptions', () => {
+    it('returns empty array for null input', () => {
+      expect(getTvgOptions(null)).toEqual([]);
+    });
+
+    it('returns empty array for empty array input', () => {
+      expect(getTvgOptions([])).toEqual([]);
+    });
+
+    it('maps tvgs to { value, label } options', () => {
+      const tvgs = [{ tvg_id: 'tvg-1', name: 'Channel One' }];
+      const result = getTvgOptions(tvgs);
+      expect(result).toHaveLength(1);
+      expect(result[0]).toEqual({
+        value: 'tvg-1',
+        label: 'Channel One (tvg-1)',
+      });
+    });
+
+    it('uses tvg_id as label when name is missing', () => {
+      const tvgs = [{ tvg_id: 'tvg-no-name' }];
+      const result = getTvgOptions(tvgs);
+      expect(result[0]).toEqual({
+        value: 'tvg-no-name',
+        label: 'tvg-no-name',
+      });
+    });
+
+    it('deduplicates by tvg_id', () => {
+      const tvgs = [
+        { tvg_id: 'tvg-1', name: 'A' },
+        { tvg_id: 'tvg-1', name: 'B' },
+        { tvg_id: 'tvg-2', name: 'C' },
+      ];
+      const result = getTvgOptions(tvgs);
+      expect(result).toHaveLength(2);
+      const values = result.map((o) => o.value);
+      expect(values).toContain('tvg-1');
+      expect(values).toContain('tvg-2');
+    });
+
+    it('skips entries with no tvg_id', () => {
+      const tvgs = [
+        { tvg_id: null, name: 'No ID' },
+        { tvg_id: '', name: 'Empty ID' },
+        { tvg_id: 'tvg-1', name: 'Valid' },
+      ];
+      const result = getTvgOptions(tvgs);
+      expect(result).toHaveLength(1);
+      expect(result[0].value).toBe('tvg-1');
+    });
+
+    it('sorts options alphabetically by label', () => {
+      const tvgs = [
+        { tvg_id: 'tvg-z', name: 'Zebra' },
+        { tvg_id: 'tvg-a', name: 'Apple' },
+        { tvg_id: 'tvg-m', name: 'Mango' },
+      ];
+      const result = getTvgOptions(tvgs);
+      const labels = result.map((o) => o.label);
+      expect(labels).toEqual([...labels].sort());
+    });
+
+    it('sorts by label text including the tvg_id suffix', () => {
+      const tvgs = [
+        { tvg_id: 'z-id', name: 'Same' },
+        { tvg_id: 'a-id', name: 'Same' },
+      ];
+      const result = getTvgOptions(tvgs);
+      // "Same (a-id)" < "Same (z-id)"
+      expect(result[0].value).toBe('a-id');
+    });
+  });
+
+  // ── getChannelOptions ──────────────────────────────────────────────────────
+
+  describe('getChannelOptions', () => {
+    const makeChannels = () => [
+      { id: 1, name: 'ESPN',  channel_number: 5,  epg_data_id: 'epg-1' },
+      { id: 2, name: 'HBO',   channel_number: 10, epg_data_id: 'epg-2' },
+      { id: 3, name: 'CNN',   channel_number: 20, epg_data_id: 'epg-3' },
+    ];
+
+    const makeTvgsById = () => ({
+      'epg-1': { tvg_id: 'tvg-espn' },
+      'epg-2': { tvg_id: 'tvg-hbo'  },
+      'epg-3': { tvg_id: 'tvg-cnn'  },
+    });
+
+    it('calls sortedChannelOptions with allChannels and numberedChannelLabel', () => {
+      const channels = makeChannels();
+      getChannelOptions(channels, {}, null);
+      expect(sortedChannelOptions).toHaveBeenCalledWith(
+        channels,
+        numberedChannelLabel
+      );
+    });
+
+    it('returns all channels when tvgId is null', () => {
+      const channels = makeChannels();
+      const result = getChannelOptions(channels, makeTvgsById(), null);
+      expect(result).toHaveLength(3);
+    });
+
+    it('returns all channels when tvgId is empty string', () => {
+      const channels = makeChannels();
+      const result = getChannelOptions(channels, makeTvgsById(), '');
+      expect(result).toHaveLength(3);
+    });
+
+    it('places matching channels before non-matching when tvgId set', () => {
+      // Override sortedChannelOptions to return deterministic output
+      vi.mocked(sortedChannelOptions).mockReturnValueOnce([
+        { value: '1', label: 'ESPN'  },
+        { value: '2', label: 'HBO'   },
+        { value: '3', label: 'CNN'   },
+      ]);
+
+      const channels = makeChannels();
+      const tvgsById = makeTvgsById();
+
+      // tvgId matches ESPN (epg-1 → tvg-espn)
+      const result = getChannelOptions(channels, tvgsById, 'tvg-espn');
+
+      expect(result[0].value).toBe('1');   // ESPN first (matching)
+      expect(result[1].value).toBe('2');   // HBO second (non-matching)
+      expect(result[2].value).toBe('3');   // CNN third  (non-matching)
+    });
+
+    it('returns all in sorted order when no channel matches tvgId', () => {
+      vi.mocked(sortedChannelOptions).mockReturnValueOnce([
+        { value: '1', label: 'ESPN' },
+        { value: '2', label: 'HBO'  },
+      ]);
+
+      const channels = makeChannels();
+      const result = getChannelOptions(channels, makeTvgsById(), 'tvg-unknown');
+
+      // No matches → all in others, order preserved from sortedChannelOptions
+      expect(result.map((r) => r.value)).toEqual(['1', '2']);
+    });
+
+    it('handles channel with no epg_data_id (cTvg is null)', () => {
+      const channels = [{ id: 9, name: 'NoEPG', channel_number: 1, epg_data_id: null }];
+      vi.mocked(sortedChannelOptions).mockReturnValueOnce([
+        { value: '9', label: 'NoEPG' },
+      ]);
+
+      const result = getChannelOptions(channels, {}, 'tvg-1');
+
+      // No epg match → goes to others
+      expect(result).toHaveLength(1);
+      expect(result[0].value).toBe('9');
+    });
+
+    it('handles missing epg_data_id entry in tvgsById', () => {
+      const channels = [{ id: 5, name: 'Unknown', channel_number: 1, epg_data_id: 'epg-missing' }];
+      vi.mocked(sortedChannelOptions).mockReturnValueOnce([
+        { value: '5', label: 'Unknown' },
+      ]);
+
+      const result = getChannelOptions(channels, {}, 'tvg-1');
+
+      expect(result).toHaveLength(1);
+      expect(result[0].value).toBe('5');
+    });
+
+    it('handles null tvgsById gracefully', () => {
+      const channels = makeChannels();
+      vi.mocked(sortedChannelOptions).mockReturnValueOnce([
+        { value: '1', label: 'ESPN' },
+      ]);
+
+      expect(() => getChannelOptions(channels, null, 'tvg-espn')).not.toThrow();
+    });
+
+    it('returns empty array for empty channels', () => {
+      vi.mocked(sortedChannelOptions).mockReturnValueOnce([]);
+      const result = getChannelOptions([], {}, 'tvg-1');
+      expect(result).toEqual([]);
+    });
+
+    it('places multiple matching channels before non-matching', () => {
+      vi.mocked(sortedChannelOptions).mockReturnValueOnce([
+        { value: '1', label: 'ESPN'  },
+        { value: '2', label: 'ESPN2' },
+        { value: '3', label: 'CNN'   },
+      ]);
+
+      const channels = [
+        { id: 1, name: 'ESPN',  channel_number: 5,  epg_data_id: 'epg-1' },
+        { id: 2, name: 'ESPN2', channel_number: 6,  epg_data_id: 'epg-4' },
+        { id: 3, name: 'CNN',   channel_number: 20, epg_data_id: 'epg-3' },
+      ];
+      const tvgsById = {
+        'epg-1': { tvg_id: 'tvg-espn' },
+        'epg-4': { tvg_id: 'tvg-espn' }, // both ESPN channels share tvg_id
+        'epg-3': { tvg_id: 'tvg-cnn'  },
+      };
+
+      const result = getChannelOptions(channels, tvgsById, 'tvg-espn');
+
+      expect(result[0].value).toBe('1');
+      expect(result[1].value).toBe('2');
+      expect(result[2].value).toBe('3');
+    });
+  });
+
+  // ── previewSeriesRule ──────────────────────────────────────────────────────
+
+  describe('previewSeriesRule', () => {
+    it('calls API.previewSeriesRule with the key and abort signal', async () => {
+      const mockResult = { matches: [], total: 0 };
+      vi.mocked(API.previewSeriesRule).mockResolvedValue(mockResult);
+
+      const controller = new AbortController();
+      const key = { title: 'Test Show', mode: 'all' };
+
+      const result = await previewSeriesRule(key, controller);
+
+      expect(API.previewSeriesRule).toHaveBeenCalledWith(key, {
+        signal: controller.signal,
+      });
+      expect(result).toBe(mockResult);
+    });
+
+    it('passes the abort signal from the controller', async () => {
+      vi.mocked(API.previewSeriesRule).mockResolvedValue({});
+      const controller = new AbortController();
+      await previewSeriesRule({ title: 'X' }, controller);
+
+      const callArgs = vi.mocked(API.previewSeriesRule).mock.calls[0];
+      expect(callArgs[1].signal).toBe(controller.signal);
+    });
+
+    it('propagates rejection from API.previewSeriesRule', async () => {
+      vi.mocked(API.previewSeriesRule).mockRejectedValue(new Error('Network error'));
+      const controller = new AbortController();
+      await expect(previewSeriesRule({}, controller)).rejects.toThrow('Network error');
+    });
+
+    it('propagates AbortError when signal is aborted', async () => {
+      const abortError = new DOMException('Aborted', 'AbortError');
+      vi.mocked(API.previewSeriesRule).mockRejectedValue(abortError);
+
+      const controller = new AbortController();
+      controller.abort();
+
+      await expect(previewSeriesRule({}, controller)).rejects.toThrow('Aborted');
+    });
+
+    it('passes through all fields of the preview key', async () => {
+      vi.mocked(API.previewSeriesRule).mockResolvedValue({});
+      const controller = new AbortController();
+      const key = {
+        title: 'My Show',
+        title_mode: 'exact',
+        description: 'drama',
+        description_mode: 'contains',
+        mode: 'new',
+        tvg_id: 'tvg-1',
+        channel_id: 5,
+      };
+
+      await previewSeriesRule(key, controller);
+
+      expect(API.previewSeriesRule).toHaveBeenCalledWith(
+        key,
+        expect.objectContaining({ signal: controller.signal })
+      );
+    });
+  });
+});
+
diff --git a/frontend/src/utils/forms/__tests__/StreamProfileUtils.test.js b/frontend/src/utils/forms/__tests__/StreamProfileUtils.test.js
new file mode 100644
index 00000000..3ed9357e
--- /dev/null
+++ b/frontend/src/utils/forms/__tests__/StreamProfileUtils.test.js
@@ -0,0 +1,197 @@
+import { describe, it, expect, vi, beforeEach } from 'vitest';
+
+vi.mock('../../../api.js', () => ({
+  default: {
+    updateStreamProfile: vi.fn(),
+    addStreamProfile: vi.fn(),
+  },
+}));
+
+vi.mock('@hookform/resolvers/yup', () => ({
+  yupResolver: vi.fn((schema) => ({ __schema: schema })),
+}));
+
+import API from '../../../api.js';
+import { yupResolver } from '@hookform/resolvers/yup';
+import {
+  BUILT_IN_COMMANDS,
+  COMMAND_EXAMPLES,
+  toCommandSelection,
+  getResolver,
+  updateStreamProfile,
+  addStreamProfile,
+} from '../StreamProfileUtils.js';
+
+describe('StreamProfileUtils', () => {
+  // ─── BUILT_IN_COMMANDS ────────────────────────────────────────────────────────
+
+  describe('BUILT_IN_COMMANDS', () => {
+    it('includes ffmpeg, streamlink, cvlc, yt-dlp, and __custom__', () => {
+      const values = BUILT_IN_COMMANDS.map((c) => c.value);
+      expect(values).toContain('ffmpeg');
+      expect(values).toContain('streamlink');
+      expect(values).toContain('cvlc');
+      expect(values).toContain('yt-dlp');
+      expect(values).toContain('__custom__');
+    });
+
+    it('each entry has a value and a label', () => {
+      for (const cmd of BUILT_IN_COMMANDS) {
+        expect(cmd).toHaveProperty('value');
+        expect(cmd).toHaveProperty('label');
+        expect(typeof cmd.value).toBe('string');
+        expect(typeof cmd.label).toBe('string');
+      }
+    });
+
+    it('labels the custom entry "Custom…"', () => {
+      const custom = BUILT_IN_COMMANDS.find((c) => c.value === '__custom__');
+      expect(custom?.label).toBe('Custom…');
+    });
+  });
+
+  // ─── COMMAND_EXAMPLES ─────────────────────────────────────────────────────────
+
+  describe('COMMAND_EXAMPLES', () => {
+    it('has an entry for each non-custom built-in command', () => {
+      const nonCustom = BUILT_IN_COMMANDS.filter((c) => c.value !== '__custom__');
+      for (const cmd of nonCustom) {
+        expect(COMMAND_EXAMPLES).toHaveProperty(cmd.value);
+        expect(typeof COMMAND_EXAMPLES[cmd.value]).toBe('string');
+        expect(COMMAND_EXAMPLES[cmd.value].length).toBeGreaterThan(0);
+      }
+    });
+
+    it('does not have an entry for __custom__', () => {
+      expect(COMMAND_EXAMPLES).not.toHaveProperty('__custom__');
+    });
+
+    it('ffmpeg example contains {streamUrl}', () => {
+      expect(COMMAND_EXAMPLES.ffmpeg).toContain('{streamUrl}');
+    });
+
+    it('streamlink example contains {streamUrl}', () => {
+      expect(COMMAND_EXAMPLES.streamlink).toContain('{streamUrl}');
+    });
+
+    it('cvlc example contains {streamUrl}', () => {
+      expect(COMMAND_EXAMPLES.cvlc).toContain('{streamUrl}');
+    });
+
+    it('yt-dlp example contains {streamUrl}', () => {
+      expect(COMMAND_EXAMPLES['yt-dlp']).toContain('{streamUrl}');
+    });
+  });
+
+  // ─── toCommandSelection ───────────────────────────────────────────────────────
+
+  describe('toCommandSelection', () => {
+    it('returns "ffmpeg" for "ffmpeg"', () => {
+      expect(toCommandSelection('ffmpeg')).toBe('ffmpeg');
+    });
+
+    it('returns "streamlink" for "streamlink"', () => {
+      expect(toCommandSelection('streamlink')).toBe('streamlink');
+    });
+
+    it('returns "cvlc" for "cvlc"', () => {
+      expect(toCommandSelection('cvlc')).toBe('cvlc');
+    });
+
+    it('returns "yt-dlp" for "yt-dlp"', () => {
+      expect(toCommandSelection('yt-dlp')).toBe('yt-dlp');
+    });
+
+    it('returns "__custom__" for "__custom__"', () => {
+      expect(toCommandSelection('__custom__')).toBe('__custom__');
+    });
+
+    it('returns "__custom__" for an unrecognized command', () => {
+      expect(toCommandSelection('myspecialtool')).toBe('__custom__');
+    });
+
+    it('returns "__custom__" for an empty string', () => {
+      expect(toCommandSelection('')).toBe('__custom__');
+    });
+
+    it('returns "__custom__" for null', () => {
+      expect(toCommandSelection(null)).toBe('__custom__');
+    });
+
+    it('returns "__custom__" for undefined', () => {
+      expect(toCommandSelection(undefined)).toBe('__custom__');
+    });
+  });
+
+  // ─── getResolver ──────────────────────────────────────────────────────────────
+
+  describe('getResolver', () => {
+    it('calls yupResolver and returns its result', () => {
+      const result = getResolver();
+      expect(yupResolver).toHaveBeenCalledTimes(1);
+      expect(result).toBeDefined();
+    });
+
+    it('returns the same resolver on subsequent calls', () => {
+      const r1 = getResolver();
+      const r2 = getResolver();
+      expect(r1).toEqual(r2);
+    });
+  });
+
+  // ─── updateStreamProfile ──────────────────────────────────────────────────────
+
+  describe('updateStreamProfile', () => {
+    beforeEach(() => {
+      vi.clearAllMocks();
+    });
+
+    it('calls API.updateStreamProfile with id merged into values', () => {
+      API.updateStreamProfile.mockResolvedValueOnce({ id: 3, name: 'HD' });
+      updateStreamProfile(3, { name: 'HD', command: 'ffmpeg' });
+      expect(API.updateStreamProfile).toHaveBeenCalledWith({
+        id: 3,
+        name: 'HD',
+        command: 'ffmpeg',
+      });
+    });
+
+    it('returns the promise from API.updateStreamProfile', () => {
+      const resolved = Promise.resolve({ id: 1 });
+      API.updateStreamProfile.mockReturnValueOnce(resolved);
+      const result = updateStreamProfile(1, {});
+      expect(result).toBe(resolved);
+    });
+  });
+
+  // ─── addStreamProfile ─────────────────────────────────────────────────────────
+
+  describe('addStreamProfile', () => {
+    beforeEach(() => {
+      vi.clearAllMocks();
+    });
+
+    it('calls API.addStreamProfile with the provided values', () => {
+      API.addStreamProfile.mockResolvedValueOnce({ id: 5 });
+      addStreamProfile({ name: 'New', command: 'streamlink', parameters: '' });
+      expect(API.addStreamProfile).toHaveBeenCalledWith({
+        name: 'New',
+        command: 'streamlink',
+        parameters: '',
+      });
+    });
+
+    it('returns the promise from API.addStreamProfile', () => {
+      const resolved = Promise.resolve({ id: 5 });
+      API.addStreamProfile.mockReturnValueOnce(resolved);
+      const result = addStreamProfile({});
+      expect(result).toBe(resolved);
+    });
+
+    it('passes through an empty object without error', () => {
+      API.addStreamProfile.mockResolvedValueOnce({});
+      expect(() => addStreamProfile({})).not.toThrow();
+      expect(API.addStreamProfile).toHaveBeenCalledWith({});
+    });
+  });
+});
\ No newline at end of file
diff --git a/frontend/src/utils/forms/__tests__/StreamUtils.test.js b/frontend/src/utils/forms/__tests__/StreamUtils.test.js
new file mode 100644
index 00000000..4eeded36
--- /dev/null
+++ b/frontend/src/utils/forms/__tests__/StreamUtils.test.js
@@ -0,0 +1,95 @@
+import { describe, it, expect, vi, beforeEach } from 'vitest';
+
+vi.mock('../../../api.js', () => ({
+  default: {
+    updateStream: vi.fn(),
+    addStream: vi.fn(),
+  },
+}));
+
+vi.mock('@hookform/resolvers/yup', () => ({
+  yupResolver: vi.fn((schema) => ({ __schema: schema })),
+}));
+
+import API from '../../../api.js';
+import { yupResolver } from '@hookform/resolvers/yup';
+import { getResolver, updateStream, addStream } from '../StreamUtils.js';
+
+describe('StreamUtils', () => {
+  // ─── getResolver ──────────────────────────────────────────────────────────────
+
+  describe('getResolver', () => {
+    it('calls yupResolver and returns its result', () => {
+      const result = getResolver();
+      expect(yupResolver).toHaveBeenCalledTimes(1);
+      expect(result).toBeDefined();
+    });
+
+    it('returns the same resolver on subsequent calls', () => {
+      const r1 = getResolver();
+      const r2 = getResolver();
+      expect(r1).toEqual(r2);
+    });
+  });
+
+// ─── updateStream ─────────────────────────────────────────────────────────────
+
+  describe('updateStream', () => {
+    beforeEach(() => {
+      vi.clearAllMocks();
+    });
+
+    it('calls API.updateStream with id merged into payload', () => {
+      API.updateStream.mockResolvedValueOnce({ id: 1, name: 'Test Stream' });
+      updateStream(1, { name: 'Test Stream', url: 'http://example.com' });
+      expect(API.updateStream).toHaveBeenCalledWith({
+        id: 1,
+        name: 'Test Stream',
+        url: 'http://example.com',
+      });
+    });
+
+    it('returns the promise from API.updateStream', () => {
+      const resolved = Promise.resolve({ id: 1 });
+      API.updateStream.mockReturnValueOnce(resolved);
+      const result = updateStream(1, {});
+      expect(result).toBe(resolved);
+    });
+
+    it('handles an empty payload without throwing', () => {
+      API.updateStream.mockResolvedValueOnce({});
+      expect(() => updateStream(5, {})).not.toThrow();
+      expect(API.updateStream).toHaveBeenCalledWith({ id: 5 });
+    });
+  });
+
+// ─── addStream ────────────────────────────────────────────────────────────────
+
+  describe('addStream', () => {
+    beforeEach(() => {
+      vi.clearAllMocks();
+    });
+
+    it('calls API.addStream with the provided payload', () => {
+      API.addStream.mockResolvedValueOnce({ id: 2 });
+      addStream({ name: 'New Stream', url: 'http://example.com/stream' });
+      expect(API.addStream).toHaveBeenCalledWith({
+        name: 'New Stream',
+        url: 'http://example.com/stream',
+      });
+    });
+
+    it('returns the promise from API.addStream', () => {
+      const resolved = Promise.resolve({ id: 2 });
+      API.addStream.mockReturnValueOnce(resolved);
+      const result = addStream({ name: 'test' });
+      expect(result).toBe(resolved);
+    });
+
+    it('passes through an empty object without error', () => {
+      API.addStream.mockResolvedValueOnce({});
+      expect(() => addStream({})).not.toThrow();
+      expect(API.addStream).toHaveBeenCalledWith({});
+    });
+  });
+});
\ No newline at end of file
diff --git a/frontend/src/utils/forms/__tests__/UserAgentUtils.test.js b/frontend/src/utils/forms/__tests__/UserAgentUtils.test.js
new file mode 100644
index 00000000..ed6163b2
--- /dev/null
+++ b/frontend/src/utils/forms/__tests__/UserAgentUtils.test.js
@@ -0,0 +1,95 @@
+import { describe, it, expect, vi, beforeEach } from 'vitest';
+
+vi.mock('../../../api.js', () => ({
+  default: {
+    updateUserAgent: vi.fn(),
+    addUserAgent: vi.fn(),
+  },
+}));
+
+vi.mock('@hookform/resolvers/yup', () => ({
+  yupResolver: vi.fn((schema) => ({ __schema: schema })),
+}));
+
+import API from '../../../api.js';
+import { yupResolver } from '@hookform/resolvers/yup';
+import { getResolver, updateUserAgent, addUserAgent } from '../UserAgentUtils.js';
+
+describe('UserAgentUtils', () => {
+  // ─── getResolver ──────────────────────────────────────────────────────────────
+
+  describe('getResolver', () => {
+    it('calls yupResolver and returns its result', () => {
+      const result = getResolver();
+      expect(yupResolver).toHaveBeenCalledTimes(1);
+      expect(result).toBeDefined();
+    });
+
+    it('returns the same resolver on subsequent calls', () => {
+      const r1 = getResolver();
+      const r2 = getResolver();
+      expect(r1).toEqual(r2);
+    });
+  });
+
+// ─── updateUserAgent ──────────────────────────────────────────────────────────
+
+  describe('updateUserAgent', () => {
+    beforeEach(() => {
+      vi.clearAllMocks();
+    });
+
+    it('calls API.updateUserAgent with id merged into values', () => {
+      API.updateUserAgent.mockResolvedValueOnce({ id: 1, name: 'Chrome' });
+      updateUserAgent(1, { name: 'Chrome', user_agent: 'Mozilla/5.0' });
+      expect(API.updateUserAgent).toHaveBeenCalledWith({
+        id: 1,
+        name: 'Chrome',
+        user_agent: 'Mozilla/5.0',
+      });
+    });
+
+    it('returns the promise from API.updateUserAgent', () => {
+      const resolved = Promise.resolve({ id: 1 });
+      API.updateUserAgent.mockReturnValueOnce(resolved);
+      const result = updateUserAgent(1, {});
+      expect(result).toBe(resolved);
+    });
+
+    it('handles an empty values object without throwing', () => {
+      API.updateUserAgent.mockResolvedValueOnce({});
+      expect(() => updateUserAgent(5, {})).not.toThrow();
+      expect(API.updateUserAgent).toHaveBeenCalledWith({ id: 5 });
+    });
+  });
+
+// ─── addUserAgent ─────────────────────────────────────────────────────────────
+
+  describe('addUserAgent', () => {
+    beforeEach(() => {
+      vi.clearAllMocks();
+    });
+
+    it('calls API.addUserAgent with the provided values', () => {
+      API.addUserAgent.mockResolvedValueOnce({ id: 2 });
+      addUserAgent({ name: 'Firefox', user_agent: 'Mozilla/5.0 (Firefox)' });
+      expect(API.addUserAgent).toHaveBeenCalledWith({
+        name: 'Firefox',
+        user_agent: 'Mozilla/5.0 (Firefox)',
+      });
+    });
+
+    it('returns the promise from API.addUserAgent', () => {
+      const resolved = Promise.resolve({ id: 2 });
+      API.addUserAgent.mockReturnValueOnce(resolved);
+      const result = addUserAgent({ name: 'test' });
+      expect(result).toBe(resolved);
+    });
+
+    it('passes through an empty object without error', () => {
+      API.addUserAgent.mockResolvedValueOnce({});
+      expect(() => addUserAgent({})).not.toThrow();
+      expect(API.addUserAgent).toHaveBeenCalledWith({});
+    });
+  });
+});
\ No newline at end of file
diff --git a/frontend/src/utils/forms/__tests__/UserUtils.test.js b/frontend/src/utils/forms/__tests__/UserUtils.test.js
new file mode 100644
index 00000000..3618228a
--- /dev/null
+++ b/frontend/src/utils/forms/__tests__/UserUtils.test.js
@@ -0,0 +1,432 @@
+import { describe, it, expect, vi, beforeEach } from 'vitest';
+
+vi.mock('../../../api.js', () => ({
+  default: {
+    createUser: vi.fn(),
+    updateUser: vi.fn(),
+    generateApiKey: vi.fn(),
+    revokeApiKey: vi.fn(),
+  },
+}));
+
+vi.mock('../../../constants.js', () => ({
+  USER_LEVELS: {
+    ADMIN: 0,
+    STREAMER: 2,
+  },
+  NETWORK_ACCESS_OPTIONS: {
+    m3u: 'M3U',
+    xc: 'XC',
+    mpegts: 'MPEG-TS',
+  },
+}));
+
+vi.mock('../../networkUtils.js', () => ({
+  IPV4_CIDR_REGEX: /^(\d{1,3}\.){3}\d{1,3}\/\d{1,2}$/,
+  IPV6_CIDR_REGEX: /^([0-9a-fA-F:]+)\/\d{1,3}$/,
+}));
+
+import API from '../../../api.js';
+import {
+  createUser,
+  updateUser,
+  generateApiKey,
+  revokeApiKey,
+  userToFormValues,
+  formValuesToPayload,
+  getFormInitialValues,
+  getFormValidators,
+} from '../UserUtils.js';
+
+describe('UserUtils', () => {
+  // ─── createUser ───────────────────────────────────────────────────────────────
+
+  describe('createUser', () => {
+    beforeEach(() => vi.clearAllMocks());
+
+    it('calls API.createUser with the provided values', () => {
+      API.createUser.mockResolvedValueOnce({ id: 1 });
+      createUser({ username: 'alice', password: 'pass' });
+      expect(API.createUser).toHaveBeenCalledWith({ username: 'alice', password: 'pass' });
+    });
+
+    it('returns the promise from API.createUser', () => {
+      const resolved = Promise.resolve({ id: 1 });
+      API.createUser.mockReturnValueOnce(resolved);
+      expect(createUser({})).toBe(resolved);
+    });
+  });
+
+// ─── updateUser ───────────────────────────────────────────────────────────────
+
+  describe('updateUser', () => {
+    beforeEach(() => vi.clearAllMocks());
+
+    it('calls API.updateUser with selfEdit=false when isAdmin is true', () => {
+      API.updateUser.mockResolvedValueOnce({});
+      updateUser(1, { username: 'bob' }, true, { id: 1 });
+      expect(API.updateUser).toHaveBeenCalledWith(1, { username: 'bob' }, false);
+    });
+
+    it('calls API.updateUser with selfEdit=true when not admin and userId matches authUser', () => {
+      API.updateUser.mockResolvedValueOnce({});
+      updateUser(5, { username: 'carol' }, false, { id: 5 });
+      expect(API.updateUser).toHaveBeenCalledWith(5, { username: 'carol' }, true);
+    });
+
+    it('calls API.updateUser with selfEdit=false when not admin and userId does not match authUser', () => {
+      API.updateUser.mockResolvedValueOnce({});
+      updateUser(5, { username: 'dave' }, false, { id: 99 });
+      expect(API.updateUser).toHaveBeenCalledWith(5, { username: 'dave' }, false);
+    });
+
+    it('returns the promise from API.updateUser', () => {
+      const resolved = Promise.resolve({});
+      API.updateUser.mockReturnValueOnce(resolved);
+      expect(updateUser(1, {}, true, { id: 1 })).toBe(resolved);
+    });
+  });
+
+// ─── generateApiKey ───────────────────────────────────────────────────────────
+
+  describe('generateApiKey', () => {
+    beforeEach(() => vi.clearAllMocks());
+
+    it('calls API.generateApiKey with the payload', () => {
+      API.generateApiKey.mockResolvedValueOnce({ key: 'abc123' });
+      generateApiKey({ user_id: 1 });
+      expect(API.generateApiKey).toHaveBeenCalledWith({ user_id: 1 });
+    });
+
+    it('returns the promise from API.generateApiKey', () => {
+      const resolved = Promise.resolve({ key: 'abc' });
+      API.generateApiKey.mockReturnValueOnce(resolved);
+      expect(generateApiKey({})).toBe(resolved);
+    });
+  });
+
+// ─── revokeApiKey ─────────────────────────────────────────────────────────────
+
+  describe('revokeApiKey', () => {
+    beforeEach(() => vi.clearAllMocks());
+
+    it('calls API.revokeApiKey with the payload', () => {
+      API.revokeApiKey.mockResolvedValueOnce({});
+      revokeApiKey({ key: 'abc123' });
+      expect(API.revokeApiKey).toHaveBeenCalledWith({ key: 'abc123' });
+    });
+
+    it('returns the promise from API.revokeApiKey', () => {
+      const resolved = Promise.resolve({});
+      API.revokeApiKey.mockReturnValueOnce(resolved);
+      expect(revokeApiKey({})).toBe(resolved);
+    });
+  });
+
+// ─── userToFormValues ─────────────────────────────────────────────────────────
+
+  describe('userToFormValues', () => {
+    const makeUser = (overrides = {}) => ({
+      username: 'alice',
+      first_name: 'Alice',
+      last_name: 'Smith',
+      email: 'alice@example.com',
+      user_level: 1,
+      stream_limit: 2,
+      channel_profiles: ['1', '2'],
+      custom_properties: {},
+      ...overrides,
+    });
+
+    it('maps basic user fields to form values', () => {
+      const result = userToFormValues(makeUser());
+      expect(result.username).toBe('alice');
+      expect(result.first_name).toBe('Alice');
+      expect(result.last_name).toBe('Smith');
+      expect(result.email).toBe('alice@example.com');
+      expect(result.user_level).toBe('1');
+      expect(result.stream_limit).toBe(2);
+    });
+
+    it('defaults first_name and last_name to empty string when absent', () => {
+      const result = userToFormValues(makeUser({ first_name: null, last_name: null }));
+      expect(result.first_name).toBe('');
+      expect(result.last_name).toBe('');
+    });
+
+    it('defaults stream_limit to 0 when absent', () => {
+      const result = userToFormValues(makeUser({ stream_limit: null }));
+      expect(result.stream_limit).toBe(0);
+    });
+
+    it('uses channel_profiles when non-empty', () => {
+      const result = userToFormValues(makeUser({ channel_profiles: ['3', '4'] }));
+      expect(result.channel_profiles).toEqual(['3', '4']);
+    });
+
+    it('maps custom_properties fields with defaults', () => {
+      const result = userToFormValues(makeUser({ custom_properties: {} }));
+      expect(result.xc_password).toBe('');
+      expect(result.output_format).toBe('');
+      expect(result.output_profile).toBe('');
+      expect(result.hide_adult_content).toBe(false);
+      expect(result.epg_days).toBe(0);
+      expect(result.epg_prev_days).toBe(0);
+    });
+
+    it('maps custom_properties when present', () => {
+      const user = makeUser({
+        custom_properties: {
+          xc_password: 'xpass',
+          output_format: 'ts',
+          output_profile: 5,
+          hide_adult_content: true,
+          epg_days: 7,
+          epg_prev_days: 2,
+          allowed_networks: {
+            m3u: '192.168.1.0/24,10.0.0.1/32',
+            xc: '192.168.1.0/24,10.0.0.1/32',
+          },
+        },
+      });
+      const result = userToFormValues(user);
+      expect(result.xc_password).toBe('xpass');
+      expect(result.output_format).toBe('ts');
+      expect(result.output_profile).toBe('5');
+      expect(result.hide_adult_content).toBe(true);
+      expect(result.epg_days).toBe(7);
+      expect(result.epg_prev_days).toBe(2);
+    });
+
+    it('deduplicates allowed_ips from allowed_networks', () => {
+      const user = makeUser({
+        custom_properties: {
+          allowed_networks: {
+            m3u: '192.168.1.0/24,10.0.0.1/32',
+            xc: '192.168.1.0/24,10.0.0.1/32',
+          },
+        },
+      });
+      const result = userToFormValues(user);
+      expect(result.allowed_ips).toEqual(['192.168.1.0/24', '10.0.0.1/32']);
+    });
+
+    it('returns empty allowed_ips when no allowed_networks', () => {
+      const result = userToFormValues(makeUser({ custom_properties: {} }));
+      expect(result.allowed_ips).toEqual([]);
+    });
+  });
+
+// ─── formValuesToPayload ──────────────────────────────────────────────────────
+
+  describe('formValuesToPayload', () => {
+    const makeValues = (overrides = {}) => ({
+      username: 'alice',
+      email: 'alice@example.com',
+      xc_password: 'mypass',
+      output_format: 'ts',
+      output_profile: '3',
+      hide_adult_content: true,
+      epg_days: 7,
+      epg_prev_days: 2,
+      allowed_ips: ['192.168.1.0/24'],
+      channel_profiles: ['1', '2'],
+      ...overrides,
+    });
+
+    it('moves xc_password into custom_properties and removes it from payload', () => {
+      const result = formValuesToPayload(makeValues(), null);
+      expect(result.xc_password).toBeUndefined();
+      expect(result.custom_properties.xc_password).toBe('mypass');
+    });
+
+    it('moves output_format into custom_properties', () => {
+      const result = formValuesToPayload(makeValues(), null);
+      expect(result.output_format).toBeUndefined();
+      expect(result.custom_properties.output_format).toBe('ts');
+    });
+
+    it('parses output_profile as int in custom_properties', () => {
+      const result = formValuesToPayload(makeValues(), null);
+      expect(result.output_profile).toBeUndefined();
+      expect(result.custom_properties.output_profile).toBe(3);
+    });
+
+    it('sets output_profile to null when empty string', () => {
+      const result = formValuesToPayload(makeValues({ output_profile: '' }), null);
+      expect(result.custom_properties.output_profile).toBeNull();
+    });
+
+    it('moves hide_adult_content into custom_properties', () => {
+      const result = formValuesToPayload(makeValues(), null);
+      expect(result.hide_adult_content).toBeUndefined();
+      expect(result.custom_properties.hide_adult_content).toBe(true);
+    });
+
+    it('moves epg_days and epg_prev_days into custom_properties', () => {
+      const result = formValuesToPayload(makeValues(), null);
+      expect(result.epg_days).toBeUndefined();
+      expect(result.epg_prev_days).toBeUndefined();
+      expect(result.custom_properties.epg_days).toBe(7);
+      expect(result.custom_properties.epg_prev_days).toBe(2);
+    });
+
+    it('populates allowed_networks for all NETWORK_KEYS when allowed_ips present', () => {
+      const result = formValuesToPayload(makeValues({ allowed_ips: ['192.168.1.0/24', '10.0.0.1/32'] }), null);
+      expect(result.allowed_ips).toBeUndefined();
+      expect(result.custom_properties.allowed_networks.m3u).toBe('192.168.1.0/24,10.0.0.1/32');
+      expect(result.custom_properties.allowed_networks.xc).toBe('192.168.1.0/24,10.0.0.1/32');
+      expect(result.custom_properties.allowed_networks.mpegts).toBe('192.168.1.0/24,10.0.0.1/32');
+    });
+
+    it('sets empty allowed_networks when allowed_ips is empty', () => {
+      const result = formValuesToPayload(makeValues({ allowed_ips: [] }), null);
+      expect(result.custom_properties.allowed_networks).toEqual({});
+    });
+
+    it('sets channel_profiles to empty array when it includes "0"', () => {
+      const result = formValuesToPayload(makeValues({ channel_profiles: ['0'] }), null);
+      expect(result.channel_profiles).toEqual([]);
+    });
+
+    it('preserves channel_profiles when it does not include "0"', () => {
+      const result = formValuesToPayload(makeValues({ channel_profiles: ['1', '2'] }), null);
+      expect(result.channel_profiles).toEqual(['1', '2']);
+    });
+
+    it('merges existing custom_properties from existingUser', () => {
+      const existingUser = { custom_properties: { some_other_prop: 'keep_me' } };
+      const result = formValuesToPayload(makeValues(), existingUser);
+      expect(result.custom_properties.some_other_prop).toBe('keep_me');
+    });
+
+    it('handles null existingUser gracefully', () => {
+      expect(() => formValuesToPayload(makeValues(), null)).not.toThrow();
+    });
+  });
+
+// ─── getFormInitialValues ─────────────────────────────────────────────────────
+
+  describe('getFormInitialValues', () => {
+    it('returns the expected default structure', () => {
+      const result = getFormInitialValues();
+      expect(result).toEqual({
+        username: '',
+        first_name: '',
+        last_name: '',
+        email: '',
+        user_level: '0',
+        stream_limit: 0,
+        password: '',
+        xc_password: '',
+        output_format: '',
+        output_profile: '',
+        channel_profiles: [],
+        hide_adult_content: false,
+        epg_days: 0,
+        epg_prev_days: 0,
+        allowed_ips: [],
+      });
+    });
+
+    it('returns a new object on each call', () => {
+      const a = getFormInitialValues();
+      const b = getFormInitialValues();
+      expect(a).not.toBe(b);
+    });
+  });
+
+// ─── getFormValidators ────────────────────────────────────────────────────────
+
+  describe('getFormValidators', () => {
+    const validate = (user, values) => getFormValidators(user)(values);
+
+    describe('username', () => {
+      it('returns error when username is empty', () => {
+        const result = validate(null, { ...getFormInitialValues(), username: '' });
+        expect(result.username).toBe('Username is required');
+      });
+
+      it('returns null for a valid non-streamer username', () => {
+        const result = validate(null, { ...getFormInitialValues(), username: 'alice', user_level: '0' });
+        expect(result.username).toBeNull();
+      });
+
+      it('returns null for a valid alphanumeric streamer username', () => {
+        const result = validate(null, { ...getFormInitialValues(), username: 'alice123', user_level: '2' });
+        expect(result.username).toBeNull();
+      });
+
+      it('returns error for streamer username with non-alphanumeric characters', () => {
+        const result = validate(null, { ...getFormInitialValues(), username: 'alice_123', user_level: '2' });
+        expect(result.username).toBe('Streamer username must be alphanumeric');
+      });
+    });
+
+    describe('password', () => {
+      it('returns error when creating a non-streamer user without a password', () => {
+        const result = validate(null, { ...getFormInitialValues(), user_level: '0', password: '' });
+        expect(result.password).toBe('Password is required');
+      });
+
+      it('returns null when creating a streamer user without a password', () => {
+        const result = validate(null, { ...getFormInitialValues(), user_level: '2', password: '' });
+        expect(result.password).toBeNull();
+      });
+
+      it('returns null when editing an existing user without a password', () => {
+        const result = validate({ id: 1 }, { ...getFormInitialValues(), user_level: '0', password: '' });
+        expect(result.password).toBeNull();
+      });
+
+      it('returns null when password is provided for new user', () => {
+        const result = validate(null, { ...getFormInitialValues(), user_level: '0', password: 'secret' });
+        expect(result.password).toBeNull();
+      });
+    });
+
+    describe('xc_password', () => {
+      it('returns null when xc_password is empty', () => {
+        const result = validate(null, { ...getFormInitialValues(), xc_password: '' });
+        expect(result.xc_password).toBeNull();
+      });
+
+      it('returns null for a valid alphanumeric xc_password', () => {
+        const result = validate(null, { ...getFormInitialValues(), xc_password: 'abc123' });
+        expect(result.xc_password).toBeNull();
+      });
+
+      it('returns error for xc_password with non-alphanumeric characters', () => {
+        const result = validate(null, { ...getFormInitialValues(), xc_password: 'abc!@#' });
+        expect(result.xc_password).toBe('XC password must be alphanumeric');
+      });
+    });
+
+    describe('allowed_ips', () => {
+      it('returns null for an empty allowed_ips array', () => {
+        const result = validate(null, { ...getFormInitialValues(), allowed_ips: [] });
+        expect(result.allowed_ips).toBeNull();
+      });
+
+      it('returns null for a valid IPv4 CIDR', () => {
+        const result = validate(null, { ...getFormInitialValues(), allowed_ips: ['192.168.1.0/24'] });
+        expect(result.allowed_ips).toBeNull();
+      });
+
+      it('returns null for a bare IPv4 address (auto-appends /32)', () => {
+        const result = validate(null, { ...getFormInitialValues(), allowed_ips: ['10.0.0.1'] });
+        expect(result.allowed_ips).toBeNull();
+      });
+
+      it('returns error for an invalid IP entry', () => {
+        const result = validate(null, { ...getFormInitialValues(), allowed_ips: ['not-an-ip'] });
+        expect(result.allowed_ips).toBe('Invalid IP address or CIDR range');
+      });
+
+      it('returns error when any entry in the list is invalid', () => {
+        const result = validate(null, { ...getFormInitialValues(), allowed_ips: ['192.168.1.0/24', 'bad-entry'] });
+        expect(result.allowed_ips).toBe('Invalid IP address or CIDR range');
+      });
+    });
+  });
+});
\ No newline at end of file

From 275a93b9b550ce73829549d102fc9a09ad0dd080 Mon Sep 17 00:00:00 2001
From: Nick Sandstrom <32273437+nick4810@users.noreply.github.com>
Date: Mon, 25 May 2026 18:05:07 -0700
Subject: [PATCH 12/35] Added functionality to dateTimeUtils.js

---
 .../src/utils/__tests__/dateTimeUtils.test.js | 77 ++++++++++++++++++-
 frontend/src/utils/dateTimeUtils.js           | 20 ++++-
 2 files changed, 95 insertions(+), 2 deletions(-)

diff --git a/frontend/src/utils/__tests__/dateTimeUtils.test.js b/frontend/src/utils/__tests__/dateTimeUtils.test.js
index bfdc4fbd..5ab6ed48 100644
--- a/frontend/src/utils/__tests__/dateTimeUtils.test.js
+++ b/frontend/src/utils/__tests__/dateTimeUtils.test.js
@@ -62,6 +62,24 @@ describe('dateTimeUtils', () => {
       const result = dateTimeUtils.initializeTime(date);
       expect(result.format()).toBe(dayjs(date).format());
     });
+
+    it('should handle custom format and locale', () => {
+      const result = dateTimeUtils.initializeTime('15/01/2024', 'DD/MM/YYYY');
+      expect(result.isValid()).toBe(true);
+      expect(result.date()).toBe(15);
+      expect(result.month()).toBe(0); // January = 0
+      expect(result.year()).toBe(2024);
+    });
+
+    it('should handle strict parsing', () => {
+      // With strict=true, a date that doesn't match the format should be invalid
+      const invalid = dateTimeUtils.initializeTime('15-01-2024', 'YYYY-MM-DD', null, true);
+      expect(invalid.isValid()).toBe(false);
+
+      // With strict=true and a matching format, it should be valid
+      const valid = dateTimeUtils.initializeTime('2024-01-15', 'YYYY-MM-DD', null, true);
+      expect(valid.isValid()).toBe(true);
+    });
   });
 
   describe('startOfDay', () => {
@@ -433,7 +451,7 @@ describe('dateTimeUtils', () => {
     });
 
     it('should return original string for unparseable format', () => {
-      expect(dateTimeUtils.toTimeString('2:30 PM')).toBe('2:30 PM');
+      expect(dateTimeUtils.toTimeString('not-a-time')).toBe('not-a-time');
     });
 
     it('should return original string for invalid format', () => {
@@ -712,4 +730,61 @@ describe('dateTimeUtils', () => {
       });
     });
   });
+
+  describe('isValid', () => {
+    it('should return true for a valid date string', () => {
+      expect(dateTimeUtils.isValid('2024-01-15T10:00:00Z')).toBe(true);
+    });
+
+    it('should return false for an invalid date string', () => {
+      expect(dateTimeUtils.isValid('not-a-date')).toBe(false);
+    });
+
+    it('should return true for a Date object', () => {
+      expect(dateTimeUtils.isValid(new Date())).toBe(true);
+    });
+
+    it('should return false for an invalid Date object', () => {
+      expect(dateTimeUtils.isValid(new Date('invalid'))).toBe(false);
+    });
+  });
+
+  describe('toDate', () => {
+    it('should convert a date string to a Date object', () => {
+      const result = dateTimeUtils.toDate('2024-01-15T10:00:00Z');
+      expect(result).toBeInstanceOf(Date);
+    });
+
+    it('should convert a dayjs object to a Date object', () => {
+      const djs = dayjs('2024-01-15T10:00:00Z');
+      const result = dateTimeUtils.toDate(djs);
+      expect(result).toBeInstanceOf(Date);
+    });
+  });
+
+  describe('setMillisecond', () => {
+    it('should set the millisecond on a date', () => {
+      const date = dayjs.utc('2024-01-15T10:00:00.000Z');
+      const result = dateTimeUtils.setMillisecond(date, 500);
+      expect(result.millisecond()).toBe(500);
+    });
+
+    it('should return 0 milliseconds when set to 0', () => {
+      const date = dayjs.utc('2024-01-15T10:00:00.999Z');
+      const result = dateTimeUtils.setMillisecond(date, 0);
+      expect(result.millisecond()).toBe(0);
+    });
+  });
+
+  describe('getMillisecond', () => {
+    it('should return the millisecond from a date', () => {
+      const date = dayjs.utc('2024-01-15T14:00:00.123Z');
+      expect(dateTimeUtils.getMillisecond(date)).toBe(123);
+    });
+
+    it('should return 0 for a date with no milliseconds', () => {
+      const date = dayjs.utc('2024-01-15T14:00:00.000Z');
+      expect(dateTimeUtils.getMillisecond(date)).toBe(0);
+    });
+  });
 });
diff --git a/frontend/src/utils/dateTimeUtils.js b/frontend/src/utils/dateTimeUtils.js
index 3930188b..f973e0b0 100644
--- a/frontend/src/utils/dateTimeUtils.js
+++ b/frontend/src/utils/dateTimeUtils.js
@@ -4,6 +4,7 @@ import duration from 'dayjs/plugin/duration';
 import relativeTime from 'dayjs/plugin/relativeTime';
 import utc from 'dayjs/plugin/utc';
 import timezone from 'dayjs/plugin/timezone';
+import customParseFormat from 'dayjs/plugin/customParseFormat';
 import useSettingsStore from '../store/settings';
 import useLocalStorage from '../hooks/useLocalStorage';
 
@@ -11,12 +12,21 @@ dayjs.extend(duration);
 dayjs.extend(relativeTime);
 dayjs.extend(utc);
 dayjs.extend(timezone);
+dayjs.extend(customParseFormat);
 
 export const convertToMs = (dateTime) => dayjs(dateTime).valueOf();
 
 export const convertToSec = (dateTime) => dayjs(dateTime).unix();
 
-export const initializeTime = (dateTime) => dayjs(dateTime);
+export const initializeTime = (dateTime, format = null, locale = null, strict = false) => {
+  if (format && locale) {
+    return dayjs(dateTime, format, locale, strict);
+  } else if (format) {
+    return dayjs(dateTime, format, strict);
+  } else {
+    return dayjs(dateTime);
+  }
+}
 
 export const startOfDay = (dateTime) => dayjs(dateTime).startOf('day');
 
@@ -43,6 +53,10 @@ export const getNow = () => dayjs();
 export const toFriendlyDuration = (dateTime, unit) =>
   dayjs.duration(dateTime, unit).humanize();
 
+export const isValid = (dateTime) => dayjs(dateTime).isValid();
+
+export const toDate = (dateTime) => dayjs(dateTime).toDate();
+
 export const formatExactDuration = (seconds) => {
   if (seconds < 60) return `${seconds.toFixed(1)} seconds`;
   if (seconds < 3600) {
@@ -76,6 +90,8 @@ export const setMinute = (dateTime, value) => dayjs(dateTime).minute(value);
 
 export const setSecond = (dateTime, value) => dayjs(dateTime).second(value);
 
+export const setMillisecond = (dateTime, value) => dayjs(dateTime).millisecond(value);
+
 export const getMonth = (dateTime) => dayjs(dateTime).month();
 
 export const getYear = (dateTime) => dayjs(dateTime).year();
@@ -88,6 +104,8 @@ export const getMinute = (dateTime) => dayjs(dateTime).minute();
 
 export const getSecond = (dateTime) => dayjs(dateTime).second();
 
+export const getMillisecond = (dateTime) => dayjs(dateTime).millisecond();
+
 export const getNowMs = () => Date.now();
 
 export const roundToNearest = (dateTime, minutes) => {

From 688ca2b40552fe520ff3724d645ad5cf13daf1ef Mon Sep 17 00:00:00 2001
From: Nick Sandstrom <32273437+nick4810@users.noreply.github.com>
Date: Mon, 25 May 2026 18:06:04 -0700
Subject: [PATCH 13/35] Updated Guide component and utils

---
 frontend/src/pages/Guide.jsx                  |   19 +-
 frontend/src/pages/__tests__/Guide.test.jsx   |   40 +-
 .../src/pages/__tests__/guideUtils.test.js    | 1146 +++++++----------
 3 files changed, 513 insertions(+), 692 deletions(-)

diff --git a/frontend/src/pages/Guide.jsx b/frontend/src/pages/Guide.jsx
index c445407e..aa319913 100644
--- a/frontend/src/pages/Guide.jsx
+++ b/frontend/src/pages/Guide.jsx
@@ -33,12 +33,10 @@ import { useElementSize } from '@mantine/hooks';
 import { VariableSizeList } from 'react-window';
 import {
   buildChannelIdMap,
-  calculateDesiredScrollPosition,
   calculateEarliestProgramStart,
   calculateEnd,
   calculateHourTimeline,
   calculateLatestProgramEnd,
-  calculateLeftScrollPosition,
   calculateNowPosition,
   calculateScrollPosition,
   calculateScrollPositionByTimeClick,
@@ -47,7 +45,6 @@ import {
   computeRowHeights,
   createRecording,
   createSeriesRule,
-  evaluateSeriesRule,
   fetchPrograms,
   fetchRules,
   filterGuideChannels,
@@ -66,6 +63,7 @@ import {
   PX_PER_MS,
   calcProgressPct,
   sortChannels,
+  evaluateSeriesRulesByTvgId,
 } from '../utils/guideUtils';
 import API from '../api';
 import { getShowVideoUrl } from '../utils/cards/RecordingCardUtils.js';
@@ -739,13 +737,22 @@ export default function TVChannelGuide({ startDate, endDate }) {
       return;
     }
 
-    await createRecording(channel, program);
+    await createRecording({
+      channel: `${channel.id}`,
+      start_time: program.start_time,
+      end_time: program.end_time,
+      custom_properties: { program },
+    });
     showNotification({ title: 'Recording scheduled' });
   }, []);
 
   const saveSeriesRule = useCallback(async (program, mode) => {
-    await createSeriesRule(program, mode);
-    await evaluateSeriesRule(program);
+    await createSeriesRule({
+      tvg_id: program.tvg_id,
+      mode,
+      title: program.title,
+    });
+    await evaluateSeriesRulesByTvgId(program.tvg_id);
     // recordings_refreshed WS event triggers the debounced fetchRecordings()
     showNotification({
       title: mode === 'new' ? 'Record new episodes' : 'Record all episodes',
diff --git a/frontend/src/pages/__tests__/Guide.test.jsx b/frontend/src/pages/__tests__/Guide.test.jsx
index d66f9be0..e1ce551a 100644
--- a/frontend/src/pages/__tests__/Guide.test.jsx
+++ b/frontend/src/pages/__tests__/Guide.test.jsx
@@ -9,20 +9,36 @@ import useEPGsStore from '../../store/epgs';
 import useSettingsStore from '../../store/settings';
 import useVideoStore from '../../store/useVideoStore';
 import useLocalStorage from '../../hooks/useLocalStorage';
-import { showNotification } from '../../utils/notificationUtils.js';
 import * as guideUtils from '../../utils/guideUtils';
 import * as recordingCardUtils from '../../utils/cards/RecordingCardUtils.js';
 import * as dateTimeUtils from '../../utils/dateTimeUtils.js';
 import userEvent from '@testing-library/user-event';
 
 // Mock dependencies
-vi.mock('../../store/channels');
-vi.mock('../../store/logos');
-vi.mock('../../store/epgs');
-vi.mock('../../store/settings');
-vi.mock('../../store/useVideoStore');
-vi.mock('../../hooks/useLocalStorage');
-vi.mock('../../api');
+vi.mock('../../store/channels', () => ({
+  default: vi.fn(),
+}));
+vi.mock('../../store/logos', () => ({
+  default: vi.fn(),
+}));
+vi.mock('../../store/epgs', () => ({
+  default: vi.fn(),
+}));
+vi.mock('../../store/settings', () => ({
+  default: vi.fn(),
+}));
+vi.mock('../../store/useVideoStore', () => ({
+  default: vi.fn(),
+}));
+vi.mock('../../hooks/useLocalStorage', () => ({
+  default: vi.fn(),
+}));
+vi.mock('../../api', () => ({
+  default: {
+    getAllChannelIds: vi.fn(),
+    getChannelsSummary: vi.fn(),
+  },
+}));
 
 vi.mock('@mantine/hooks', () => ({
   useElementSize: () => ({
@@ -235,7 +251,7 @@ vi.mock('../../components/forms/SeriesRecordingModal', () => ({
 }));
 vi.mock('../../components/ProgramDetailModal', () => ({
   __esModule: true,
-  default: ({ program, channel, opened, onClose, onRecord }) =>
+  default: ({ program, opened, onClose, onRecord }) =>
     opened ? (
       <div data-testid="program-detail-modal">
         <div>{program?.title}</div>
@@ -252,11 +268,11 @@ vi.mock('../../utils/guideUtils', async () => {
     fetchPrograms: vi.fn(),
     createRecording: vi.fn(),
     createSeriesRule: vi.fn(),
-    evaluateSeriesRule: vi.fn(),
     fetchRules: vi.fn(),
     filterGuideChannels: vi.fn(),
     getGroupOptions: vi.fn(),
     getProfileOptions: vi.fn(),
+    sortChannels: vi.fn((ch) => ch),
   };
 });
 vi.mock('../../utils/cards/RecordingCardUtils.js', async () => {
@@ -403,7 +419,6 @@ describe('Guide', () => {
     );
     guideUtils.createRecording.mockResolvedValue(undefined);
     guideUtils.createSeriesRule.mockResolvedValue(undefined);
-    guideUtils.evaluateSeriesRule.mockResolvedValue(undefined);
     guideUtils.getGroupOptions.mockReturnValue([
       { value: 'all', label: 'All Groups' },
       { value: 'group-1', label: 'News' },
@@ -666,8 +681,7 @@ describe('Guide', () => {
 
       await waitFor(() => {
         expect(guideUtils.createRecording).toHaveBeenCalledWith(
-          expect.objectContaining({ id: 'channel-1' }),
-          expect.objectContaining({ id: 'prog-1' })
+          expect.objectContaining({ channel: 'channel-1' }),
         );
       });
     });
diff --git a/frontend/src/pages/__tests__/guideUtils.test.js b/frontend/src/pages/__tests__/guideUtils.test.js
index 18307016..2cd321ca 100644
--- a/frontend/src/pages/__tests__/guideUtils.test.js
+++ b/frontend/src/pages/__tests__/guideUtils.test.js
@@ -48,6 +48,8 @@ describe('guideUtils', () => {
     vi.clearAllMocks();
   });
 
+  // ── buildChannelIdMap ──────────────────────────────────────────────────────
+
   describe('buildChannelIdMap', () => {
     it('should create map with channel UUIDs when no EPG data', () => {
       const channels = [
@@ -123,850 +125,638 @@ describe('guideUtils', () => {
     });
   });
 
+  // ── mapProgramsByChannel ───────────────────────────────────────────────────
+
   describe('mapProgramsByChannel', () => {
     it('should return empty map when no programs', () => {
-      const channelIdByTvgId = new Map();
-
-      const result = guideUtils.mapProgramsByChannel([], channelIdByTvgId);
-
+      const result = guideUtils.mapProgramsByChannel([], new Map([['tvg-1', [1]]]));
       expect(result.size).toBe(0);
     });
 
     it('should return empty map when no channel mapping', () => {
-      const programs = [{ tvg_id: 'tvg-1' }];
-
+      const programs = [{ tvg_id: 'tvg-1', startMs: 1000, endMs: 2000 }];
       const result = guideUtils.mapProgramsByChannel(programs, new Map());
-
       expect(result.size).toBe(0);
     });
 
     it('should map programs to channels', () => {
-      const nowMs = 1000000;
-      dateTimeUtils.getNowMs.mockReturnValue(nowMs);
-
-      const programs = [
-        {
-          id: 1,
-          tvg_id: 'tvg-1',
-          start_time: '2024-01-15T10:00:00Z',
-          end_time: '2024-01-15T11:00:00Z',
-        },
-      ];
+      const nowMs = dayjs().valueOf();
+      const startMs = nowMs - 10000;
+      const endMs = nowMs + 10000;
+      const programs = [{ tvg_id: 'tvg-1', startMs, endMs }];
       const channelIdByTvgId = new Map([['tvg-1', [1]]]);
 
-      const result = guideUtils.mapProgramsByChannel(
-        programs,
-        channelIdByTvgId
-      );
+      vi.mocked(dateTimeUtils.getNowMs).mockReturnValue(nowMs);
 
+      const result = guideUtils.mapProgramsByChannel(programs, channelIdByTvgId);
+
+      expect(result.has(1)).toBe(true);
       expect(result.get(1)).toHaveLength(1);
-      expect(result.get(1)[0]).toMatchObject({
-        id: 1,
-        tvg_id: 'tvg-1',
-      });
     });
 
     it('should precompute startMs and endMs', () => {
-      dateTimeUtils.getNowMs.mockReturnValue(1000000);
-      dateTimeUtils.convertToMs.mockImplementation((time) =>
-        typeof time === 'number' ? time : dayjs(time).valueOf()
-      );
+      const startTime = '2024-01-01T10:00:00Z';
+      const endTime = '2024-01-01T11:00:00Z';
+      const expectedStartMs = dayjs(startTime).valueOf();
+      const expectedEndMs = dayjs(endTime).valueOf();
 
-      const programs = [
-        {
-          id: 1,
-          tvg_id: 'tvg-1',
-          start_time: '2024-01-15T10:00:00Z',
-          end_time: '2024-01-15T11:00:00Z',
-        },
-      ];
+      vi.mocked(dateTimeUtils.convertToMs)
+        .mockReturnValueOnce(expectedStartMs)
+        .mockReturnValueOnce(expectedEndMs);
+      vi.mocked(dateTimeUtils.getNowMs).mockReturnValue(expectedStartMs - 1000);
+
+      const programs = [{ tvg_id: 'tvg-1', start_time: startTime, end_time: endTime }];
       const channelIdByTvgId = new Map([['tvg-1', [1]]]);
 
-      const result = guideUtils.mapProgramsByChannel(
-        programs,
-        channelIdByTvgId
-      );
+      const result = guideUtils.mapProgramsByChannel(programs, channelIdByTvgId);
+      const mapped = result.get(1)[0];
 
-      expect(result.get(1)[0]).toHaveProperty('startMs');
-      expect(result.get(1)[0]).toHaveProperty('endMs');
+      expect(mapped.startMs).toBe(expectedStartMs);
+      expect(mapped.endMs).toBe(expectedEndMs);
     });
 
     it('should mark program as live when now is between start and end', () => {
+      const nowMs = 5000;
       const startMs = 1000;
-      const endMs = 2000;
-      const nowMs = 1500;
-      dateTimeUtils.getNowMs.mockReturnValue(nowMs);
+      const endMs = 10000;
 
-      const programs = [
-        {
-          id: 1,
-          tvg_id: 'tvg-1',
-          startMs,
-          endMs,
-          start_time: '2024-01-15T10:00:00Z',
-          end_time: '2024-01-15T11:00:00Z',
-        },
-      ];
+      vi.mocked(dateTimeUtils.getNowMs).mockReturnValue(nowMs);
+
+      const programs = [{ tvg_id: 'tvg-1', startMs, endMs }];
       const channelIdByTvgId = new Map([['tvg-1', [1]]]);
 
-      const result = guideUtils.mapProgramsByChannel(
-        programs,
-        channelIdByTvgId
-      );
+      const result = guideUtils.mapProgramsByChannel(programs, channelIdByTvgId);
 
       expect(result.get(1)[0].isLive).toBe(true);
       expect(result.get(1)[0].isPast).toBe(false);
     });
 
     it('should mark program as past when now is after end', () => {
+      const nowMs = 20000;
       const startMs = 1000;
-      const endMs = 2000;
-      const nowMs = 3000;
-      dateTimeUtils.getNowMs.mockReturnValue(nowMs);
+      const endMs = 10000;
 
-      const programs = [
-        {
-          id: 1,
-          tvg_id: 'tvg-1',
-          startMs,
-          endMs,
-          start_time: '2024-01-15T10:00:00Z',
-          end_time: '2024-01-15T11:00:00Z',
-        },
-      ];
+      vi.mocked(dateTimeUtils.getNowMs).mockReturnValue(nowMs);
+
+      const programs = [{ tvg_id: 'tvg-1', startMs, endMs }];
       const channelIdByTvgId = new Map([['tvg-1', [1]]]);
 
-      const result = guideUtils.mapProgramsByChannel(
-        programs,
-        channelIdByTvgId
-      );
+      const result = guideUtils.mapProgramsByChannel(programs, channelIdByTvgId);
 
-      expect(result.get(1)[0].isLive).toBe(false);
       expect(result.get(1)[0].isPast).toBe(true);
+      expect(result.get(1)[0].isLive).toBe(false);
     });
 
     it('should add program to multiple channels with same tvg_id', () => {
-      dateTimeUtils.getNowMs.mockReturnValue(1000000);
+      const nowMs = 5000;
+      vi.mocked(dateTimeUtils.getNowMs).mockReturnValue(nowMs);
 
-      const programs = [
-        {
-          id: 1,
-          tvg_id: 'tvg-1',
-          start_time: '2024-01-15T10:00:00Z',
-          end_time: '2024-01-15T11:00:00Z',
-        },
-      ];
-      const channelIdByTvgId = new Map([['tvg-1', [1, 2, 3]]]);
+      const programs = [{ tvg_id: 'tvg-1', startMs: 1000, endMs: 10000 }];
+      const channelIdByTvgId = new Map([['tvg-1', [1, 2]]]);
 
-      const result = guideUtils.mapProgramsByChannel(
-        programs,
-        channelIdByTvgId
-      );
+      const result = guideUtils.mapProgramsByChannel(programs, channelIdByTvgId);
 
       expect(result.get(1)).toHaveLength(1);
       expect(result.get(2)).toHaveLength(1);
-      expect(result.get(3)).toHaveLength(1);
     });
 
     it('should sort programs by start time', () => {
-      dateTimeUtils.getNowMs.mockReturnValue(1000000);
+      const nowMs = 0;
+      vi.mocked(dateTimeUtils.getNowMs).mockReturnValue(nowMs);
 
       const programs = [
-        {
-          id: 2,
-          tvg_id: 'tvg-1',
-          startMs: 2000,
-          endMs: 3000,
-          start_time: '2024-01-15T11:00:00Z',
-          end_time: '2024-01-15T12:00:00Z',
-        },
-        {
-          id: 1,
-          tvg_id: 'tvg-1',
-          startMs: 1000,
-          endMs: 2000,
-          start_time: '2024-01-15T10:00:00Z',
-          end_time: '2024-01-15T11:00:00Z',
-        },
+        { tvg_id: 'tvg-1', startMs: 3000, endMs: 4000 },
+        { tvg_id: 'tvg-1', startMs: 1000, endMs: 2000 },
       ];
       const channelIdByTvgId = new Map([['tvg-1', [1]]]);
 
-      const result = guideUtils.mapProgramsByChannel(
-        programs,
-        channelIdByTvgId
-      );
+      const result = guideUtils.mapProgramsByChannel(programs, channelIdByTvgId);
+      const list = result.get(1);
 
-      expect(result.get(1)[0].id).toBe(1);
-      expect(result.get(1)[1].id).toBe(2);
+      expect(list[0].startMs).toBe(1000);
+      expect(list[1].startMs).toBe(3000);
     });
   });
 
+  // ── computeRowHeights ─────────────────────────────────────────────────────
+
   describe('computeRowHeights', () => {
     it('should return empty array when no channels', () => {
-      const result = guideUtils.computeRowHeights([]);
-
-      expect(result).toEqual([]);
+      expect(guideUtils.computeRowHeights([])).toEqual([]);
+      expect(guideUtils.computeRowHeights(null)).toEqual([]);
     });
 
     it('should return default height for all channels', () => {
-      const channels = [{ id: 1 }, { id: 2 }];
-
+      const channels = [{}, {}, {}];
       const result = guideUtils.computeRowHeights(channels);
-
-      expect(result).toEqual([
-        guideUtils.PROGRAM_HEIGHT,
-        guideUtils.PROGRAM_HEIGHT,
-      ]);
+      expect(result).toEqual([90, 90, 90]);
     });
 
     it('should use custom default height when provided', () => {
-      const channels = [{ id: 1 }];
-      const customDefault = 100;
-
-      const result = guideUtils.computeRowHeights(channels, customDefault);
-
-      expect(result).toEqual([customDefault]);
+      const channels = [{}, {}];
+      const result = guideUtils.computeRowHeights(channels, 60);
+      expect(result).toEqual([60, 60]);
     });
   });
 
+  // ── fetchPrograms ─────────────────────────────────────────────────────────
+
   describe('fetchPrograms', () => {
     it('should fetch and transform programs', async () => {
-      const mockPrograms = [
-        {
-          id: 1,
-          start_time: '2024-01-15T10:00:00Z',
-          end_time: '2024-01-15T11:00:00Z',
-        },
-      ];
-      API.getGrid.mockResolvedValue(mockPrograms);
-      dateTimeUtils.convertToMs.mockReturnValue(1000);
+      const startTime = '2024-01-01T10:00:00Z';
+      const endTime = '2024-01-01T11:00:00Z';
+      const raw = [{ id: 1, start_time: startTime, end_time: endTime }];
+      vi.mocked(API.getGrid).mockResolvedValue(raw);
+      vi.mocked(dateTimeUtils.convertToMs)
+        .mockReturnValueOnce(dayjs(startTime).valueOf())
+        .mockReturnValueOnce(dayjs(endTime).valueOf());
 
       const result = await guideUtils.fetchPrograms();
 
-      expect(API.getGrid).toHaveBeenCalledTimes(1);
-      expect(result).toHaveLength(1);
-      expect(result[0]).toHaveProperty('startMs');
-      expect(result[0]).toHaveProperty('endMs');
+      expect(API.getGrid).toHaveBeenCalled();
+      expect(result[0].startMs).toBe(dayjs(startTime).valueOf());
+      expect(result[0].endMs).toBe(dayjs(endTime).valueOf());
     });
   });
 
+  // ── sortChannels ──────────────────────────────────────────────────────────
+
   describe('sortChannels', () => {
     it('should sort channels by channel number', () => {
       const channels = {
-        1: { id: 1, channel_number: 3 },
-        2: { id: 2, channel_number: 1 },
-        3: { id: 3, channel_number: 2 },
+        a: { id: 1, channel_number: 3 },
+        b: { id: 2, channel_number: 1 },
+        c: { id: 3, channel_number: 2 },
       };
-
       const result = guideUtils.sortChannels(channels);
-
-      expect(result[0].channel_number).toBe(1);
-      expect(result[1].channel_number).toBe(2);
-      expect(result[2].channel_number).toBe(3);
+      expect(result.map((c) => c.channel_number)).toEqual([1, 2, 3]);
     });
 
     it('should put channels without number at end', () => {
       const channels = {
-        1: { id: 1, channel_number: 2 },
-        2: { id: 2, channel_number: null },
-        3: { id: 3, channel_number: 1 },
+        a: { id: 1, channel_number: 2 },
+        b: { id: 2, channel_number: null },
+        c: { id: 3, channel_number: 1 },
       };
-
       const result = guideUtils.sortChannels(channels);
-
       expect(result[0].channel_number).toBe(1);
       expect(result[1].channel_number).toBe(2);
       expect(result[2].channel_number).toBeNull();
     });
   });
 
+  // ── filterGuideChannels ───────────────────────────────────────────────────
+
   describe('filterGuideChannels', () => {
+    const channels = [
+      { id: 1, name: 'ESPN', channel_group_id: 10 },
+      { id: 2, name: 'CNN', channel_group_id: 20 },
+      { id: 3, name: 'ESPN2', channel_group_id: 10 },
+    ];
+
     it('should return all channels when no filters', () => {
-      const channels = [
-        { id: 1, name: 'Channel 1' },
-        { id: 2, name: 'Channel 2' },
-      ];
-
-      const result = guideUtils.filterGuideChannels(
-        channels,
-        '',
-        'all',
-        'all',
-        {}
-      );
-
-      expect(result).toHaveLength(2);
+      const result = guideUtils.filterGuideChannels(channels, '', 'all', 'all', {});
+      expect(result).toHaveLength(3);
     });
 
     it('should filter by search query', () => {
-      const channels = [
-        { id: 1, name: 'ESPN' },
-        { id: 2, name: 'CNN' },
-      ];
-
-      const result = guideUtils.filterGuideChannels(
-        channels,
-        'espn',
-        'all',
-        'all',
-        {}
-      );
-
-      expect(result).toHaveLength(1);
-      expect(result[0].name).toBe('ESPN');
+      const result = guideUtils.filterGuideChannels(channels, 'espn', 'all', 'all', {});
+      expect(result).toHaveLength(2);
+      expect(result.map((c) => c.name)).toEqual(['ESPN', 'ESPN2']);
     });
 
     it('should filter by channel group', () => {
-      const channels = [
-        { id: 1, name: 'Channel 1', channel_group_id: 1 },
-        { id: 2, name: 'Channel 2', channel_group_id: 2 },
-      ];
-
-      const result = guideUtils.filterGuideChannels(
-        channels,
-        '',
-        '1',
-        'all',
-        {}
-      );
-
-      expect(result).toHaveLength(1);
-      expect(result[0].channel_group_id).toBe(1);
+      const result = guideUtils.filterGuideChannels(channels, '', '10', 'all', {});
+      expect(result).toHaveLength(2);
+      expect(result.every((c) => c.channel_group_id === 10)).toBe(true);
     });
 
     it('should filter by profile with array of channels', () => {
-      const channels = [
-        { id: 1, name: 'Channel 1' },
-        { id: 2, name: 'Channel 2' },
-      ];
       const profiles = {
-        profile1: {
+        'p1': {
           channels: [
             { id: 1, enabled: true },
             { id: 2, enabled: false },
-          ],
-        },
-      };
-
-      const result = guideUtils.filterGuideChannels(
-        channels,
-        '',
-        'all',
-        'profile1',
-        profiles
-      );
-
-      expect(result).toHaveLength(1);
-      expect(result[0].id).toBe(1);
-    });
-
-    it('should filter by profile with Set of channels', () => {
-      const channels = [
-        { id: 1, name: 'Channel 1' },
-        { id: 2, name: 'Channel 2' },
-      ];
-      const profiles = {
-        profile1: {
-          channels: new Set([1]),
-        },
-      };
-
-      const result = guideUtils.filterGuideChannels(
-        channels,
-        '',
-        'all',
-        'profile1',
-        profiles
-      );
-
-      expect(result).toHaveLength(1);
-      expect(result[0].id).toBe(1);
-    });
-
-    it('should apply multiple filters together', () => {
-      const channels = [
-        { id: 1, name: 'ESPN', channel_group_id: 1 },
-        { id: 2, name: 'ESPN2', channel_group_id: 2 },
-        { id: 3, name: 'CNN', channel_group_id: 1 },
-      ];
-      const profiles = {
-        profile1: {
-          channels: [
-            { id: 1, enabled: true },
             { id: 3, enabled: true },
           ],
         },
       };
+      const result = guideUtils.filterGuideChannels(channels, '', 'all', 'p1', profiles);
+      expect(result.map((c) => c.id)).toEqual([1, 3]);
+    });
 
-      const result = guideUtils.filterGuideChannels(
-        channels,
-        'espn',
-        '1',
-        'profile1',
-        profiles
-      );
+    it('should filter by profile with Set of channels', () => {
+      const profiles = {
+        'p1': { channels: new Set([1, 3]) },
+      };
+      const result = guideUtils.filterGuideChannels(channels, '', 'all', 'p1', profiles);
+      expect(result.map((c) => c.id)).toEqual([1, 3]);
+    });
 
+    it('should apply multiple filters together', () => {
+      const profiles = {
+        'p1': { channels: [{ id: 1, enabled: true }, { id: 3, enabled: true }] },
+      };
+      const result = guideUtils.filterGuideChannels(channels, 'espn2', '10', 'p1', profiles);
       expect(result).toHaveLength(1);
-      expect(result[0].id).toBe(1);
+      expect(result[0].name).toBe('ESPN2');
     });
   });
 
+  // ── calculateEarliestProgramStart ─────────────────────────────────────────
+
   describe('calculateEarliestProgramStart', () => {
     it('should return default when no programs', () => {
-      const defaultStart = dayjs('2024-01-15T00:00:00Z');
-
+      const defaultStart = dayjs('2024-01-01T10:00:00Z');
       const result = guideUtils.calculateEarliestProgramStart([], defaultStart);
-
       expect(result).toBe(defaultStart);
     });
 
     it('should return earliest program start', () => {
-      dateTimeUtils.initializeTime.mockImplementation((time) =>
-        dayjs.utc(time)
-      );
-      dateTimeUtils.isBefore.mockImplementation((a, b) =>
-        dayjs(a).isBefore(dayjs(b))
-      );
+      vi.mocked(dateTimeUtils.initializeTime).mockImplementation((t) => dayjs(t));
+      vi.mocked(dateTimeUtils.isBefore).mockImplementation((a, b) => dayjs(a).isBefore(dayjs(b)));
 
+      const defaultStart = dayjs('2024-01-01T10:00:00Z');
       const programs = [
-        { start_time: '2024-01-15T12:00:00Z' },
-        { start_time: '2024-01-15T10:00:00Z' },
-        { start_time: '2024-01-15T14:00:00Z' },
+        { start_time: '2024-01-01T09:00:00Z' },
+        { start_time: '2024-01-01T08:00:00Z' },
+        { start_time: '2024-01-01T11:00:00Z' },
       ];
-      const defaultStart = dayjs.utc('2024-01-16T00:00:00Z');
 
-      const result = guideUtils.calculateEarliestProgramStart(
-        programs,
-        defaultStart
-      );
-
-      expect(result.hour()).toBe(10);
+      const result = guideUtils.calculateEarliestProgramStart(programs, defaultStart);
+      expect(dayjs(result).toISOString()).toBe(dayjs('2024-01-01T08:00:00Z').toISOString());
     });
   });
 
+  // ── calculateLatestProgramEnd ─────────────────────────────────────────────
+
   describe('calculateLatestProgramEnd', () => {
     it('should return default when no programs', () => {
-      const defaultEnd = dayjs('2024-01-16T00:00:00Z');
-
+      const defaultEnd = dayjs('2024-01-01T22:00:00Z');
       const result = guideUtils.calculateLatestProgramEnd([], defaultEnd);
-
       expect(result).toBe(defaultEnd);
     });
 
     it('should return latest program end', () => {
-      dateTimeUtils.initializeTime.mockImplementation((time) =>
-        dayjs.utc(time)
-      );
-      dateTimeUtils.isAfter.mockImplementation((a, b) =>
-        dayjs(a).isAfter(dayjs(b))
-      );
+      vi.mocked(dateTimeUtils.initializeTime).mockImplementation((t) => dayjs(t));
+      vi.mocked(dateTimeUtils.isAfter).mockImplementation((a, b) => dayjs(a).isAfter(dayjs(b)));
 
+      const defaultEnd = dayjs('2024-01-01T22:00:00Z');
       const programs = [
-        { end_time: '2024-01-15T12:00:00Z' },
-        { end_time: '2024-01-15T18:00:00Z' },
-        { end_time: '2024-01-15T14:00:00Z' },
+        { end_time: '2024-01-01T20:00:00Z' },
+        { end_time: '2024-01-01T23:00:00Z' },
+        { end_time: '2024-01-01T21:00:00Z' },
       ];
-      const defaultEnd = dayjs.utc('2024-01-15T00:00:00Z');
 
       const result = guideUtils.calculateLatestProgramEnd(programs, defaultEnd);
-
-      expect(result.hour()).toBe(18);
+      expect(dayjs(result).toISOString()).toBe(dayjs('2024-01-01T23:00:00Z').toISOString());
     });
   });
 
+  // ── calculateStart ────────────────────────────────────────────────────────
+
   describe('calculateStart', () => {
     it('should return earliest when before default', () => {
-      const earliest = dayjs('2024-01-15T08:00:00Z');
-      const defaultStart = dayjs('2024-01-15T10:00:00Z');
-      dateTimeUtils.isBefore.mockReturnValue(true);
+      const earliest = dayjs('2024-01-01T08:00:00Z');
+      const defaultStart = dayjs('2024-01-01T10:00:00Z');
+      vi.mocked(dateTimeUtils.isBefore).mockReturnValue(true);
 
       const result = guideUtils.calculateStart(earliest, defaultStart);
-
       expect(result).toBe(earliest);
     });
 
     it('should return default when earliest is after', () => {
-      const earliest = dayjs('2024-01-15T12:00:00Z');
-      const defaultStart = dayjs('2024-01-15T10:00:00Z');
-      dateTimeUtils.isBefore.mockReturnValue(false);
+      const earliest = dayjs('2024-01-01T11:00:00Z');
+      const defaultStart = dayjs('2024-01-01T10:00:00Z');
+      vi.mocked(dateTimeUtils.isBefore).mockReturnValue(false);
 
       const result = guideUtils.calculateStart(earliest, defaultStart);
-
       expect(result).toBe(defaultStart);
     });
   });
 
+  // ── calculateEnd ──────────────────────────────────────────────────────────
+
   describe('calculateEnd', () => {
     it('should return latest when after default', () => {
-      const latest = dayjs('2024-01-16T02:00:00Z');
-      const defaultEnd = dayjs('2024-01-16T00:00:00Z');
-      dateTimeUtils.isAfter.mockReturnValue(true);
+      const latest = dayjs('2024-01-01T23:00:00Z');
+      const defaultEnd = dayjs('2024-01-01T22:00:00Z');
+      vi.mocked(dateTimeUtils.isAfter).mockReturnValue(true);
 
       const result = guideUtils.calculateEnd(latest, defaultEnd);
-
       expect(result).toBe(latest);
     });
 
     it('should return default when latest is before', () => {
-      const latest = dayjs('2024-01-15T22:00:00Z');
-      const defaultEnd = dayjs('2024-01-16T00:00:00Z');
-      dateTimeUtils.isAfter.mockReturnValue(false);
+      const latest = dayjs('2024-01-01T20:00:00Z');
+      const defaultEnd = dayjs('2024-01-01T22:00:00Z');
+      vi.mocked(dateTimeUtils.isAfter).mockReturnValue(false);
 
       const result = guideUtils.calculateEnd(latest, defaultEnd);
-
       expect(result).toBe(defaultEnd);
     });
   });
 
+  // ── mapChannelsById ───────────────────────────────────────────────────────
+
   describe('mapChannelsById', () => {
     it('should create map of channels by id', () => {
       const channels = [
-        { id: 1, name: 'Channel 1' },
-        { id: 2, name: 'Channel 2' },
+        { id: 1, name: 'ESPN' },
+        { id: 2, name: 'CNN' },
       ];
-
       const result = guideUtils.mapChannelsById(channels);
-
-      expect(result.get(1).name).toBe('Channel 1');
-      expect(result.get(2).name).toBe('Channel 2');
+      expect(result.get(1)).toEqual({ id: 1, name: 'ESPN' });
+      expect(result.get(2)).toEqual({ id: 2, name: 'CNN' });
     });
   });
 
+  // ── mapRecordingsByProgramId ───────────────────────────────────────────────
+
   describe('mapRecordingsByProgramId', () => {
     it('should return empty map for null recordings', () => {
       const result = guideUtils.mapRecordingsByProgramId(null);
-
       expect(result.size).toBe(0);
     });
 
     it('should map recordings by program id', () => {
       const recordings = [
         {
-          id: 1,
-          custom_properties: {
-            program: { id: 'program-1' },
-          },
-        },
-        {
-          id: 2,
-          custom_properties: {
-            program: { id: 'program-2' },
-          },
+          custom_properties: { program: { id: 42 }, status: 'pending' },
         },
       ];
-
       const result = guideUtils.mapRecordingsByProgramId(recordings);
-
-      expect(result.get('program-1').id).toBe(1);
-      expect(result.get('program-2').id).toBe(2);
+      expect(result.has(42)).toBe(true);
     });
 
     it('should skip recordings without program id', () => {
       const recordings = [
-        {
-          id: 1,
-          custom_properties: {},
-        },
+        { custom_properties: { status: 'pending' } },
+        { custom_properties: { program: {}, status: 'pending' } },
       ];
-
       const result = guideUtils.mapRecordingsByProgramId(recordings);
-
       expect(result.size).toBe(0);
     });
 
     it('should exclude terminal status recordings', () => {
-      const recordings = [
-        {
-          id: 1,
-          custom_properties: { program: { id: 'p1' }, status: 'completed' },
-        },
-        {
-          id: 2,
-          custom_properties: { program: { id: 'p2' }, status: 'stopped' },
-        },
-        {
-          id: 3,
-          custom_properties: { program: { id: 'p3' }, status: 'interrupted' },
-        },
-        {
-          id: 4,
-          custom_properties: { program: { id: 'p4' }, status: 'failed' },
-        },
-        {
-          id: 5,
-          custom_properties: { program: { id: 'p5' }, status: 'recording' },
-        },
-        { id: 6, custom_properties: { program: { id: 'p6' } } },
-      ];
-
+      const terminalStatuses = ['stopped', 'completed', 'interrupted', 'failed'];
+      const recordings = terminalStatuses.map((status, i) => ({
+        custom_properties: { program: { id: i + 1 }, status },
+      }));
       const result = guideUtils.mapRecordingsByProgramId(recordings);
+      expect(result.size).toBe(0);
+    });
 
+    it('should include non-terminal status recordings', () => {
+      const recordings = [
+        { custom_properties: { program: { id: 1 }, status: 'pending' } },
+        { custom_properties: { program: { id: 2 }, status: 'recording' } },
+      ];
+      const result = guideUtils.mapRecordingsByProgramId(recordings);
       expect(result.size).toBe(2);
-      expect(result.get('p5').id).toBe(5);
-      expect(result.get('p6').id).toBe(6);
     });
   });
 
+  // ── formatTime ────────────────────────────────────────────────────────────
+
   describe('formatTime', () => {
     it('should return "Today" for today', () => {
-      const today = dayjs();
-      dateTimeUtils.getNow.mockReturnValue(today);
-      dateTimeUtils.startOfDay.mockImplementation((time) =>
-        dayjs(time).startOf('day')
+      const now = dayjs();
+      vi.mocked(dateTimeUtils.getNow).mockReturnValue(now);
+      vi.mocked(dateTimeUtils.startOfDay).mockImplementation((t) => dayjs(t).startOf('day'));
+      vi.mocked(dateTimeUtils.add).mockImplementation((t, n, u) => dayjs(t).add(n, u));
+      vi.mocked(dateTimeUtils.isSame).mockImplementation((a, b, unit) =>
+        dayjs(a).isSame(dayjs(b), unit)
       );
-      dateTimeUtils.add.mockImplementation((time, amount, unit) =>
-        dayjs(time).add(amount, unit)
+      vi.mocked(dateTimeUtils.isBefore).mockImplementation((a, b) =>
+        dayjs(a).isBefore(dayjs(b))
       );
-      dateTimeUtils.isSame.mockReturnValueOnce(true);
-
-      const result = guideUtils.formatTime(today, 'MM/DD');
 
+      const result = guideUtils.formatTime(now, 'MMM D');
       expect(result).toBe('Today');
     });
 
     it('should return "Tomorrow" for tomorrow', () => {
-      const today = dayjs();
-      const tomorrow = today.add(1, 'day');
-      dateTimeUtils.getNow.mockReturnValue(today);
-      dateTimeUtils.startOfDay.mockImplementation((time) =>
-        dayjs(time).startOf('day')
+      const now = dayjs();
+      const tomorrow = now.add(1, 'day');
+      vi.mocked(dateTimeUtils.getNow).mockReturnValue(now);
+      vi.mocked(dateTimeUtils.startOfDay).mockImplementation((t) => dayjs(t).startOf('day'));
+      vi.mocked(dateTimeUtils.add).mockImplementation((t, n, u) => dayjs(t).add(n, u));
+      vi.mocked(dateTimeUtils.isSame).mockImplementation((a, b, unit) =>
+        dayjs(a).isSame(dayjs(b), unit)
       );
-      dateTimeUtils.add.mockImplementation((time, amount, unit) =>
-        dayjs(time).add(amount, unit)
+      vi.mocked(dateTimeUtils.isBefore).mockImplementation((a, b) =>
+        dayjs(a).isBefore(dayjs(b))
       );
-      dateTimeUtils.isSame.mockReturnValueOnce(false).mockReturnValueOnce(true);
-
-      const result = guideUtils.formatTime(tomorrow, 'MM/DD');
 
+      const result = guideUtils.formatTime(tomorrow, 'MMM D');
       expect(result).toBe('Tomorrow');
     });
 
     it('should return day name within a week', () => {
-      const today = dayjs();
-      const future = today.add(3, 'day');
-      dateTimeUtils.getNow.mockReturnValue(today);
-      dateTimeUtils.startOfDay.mockImplementation((time) =>
-        dayjs(time).startOf('day')
+      const now = dayjs();
+      const inThreeDays = now.add(3, 'day');
+      vi.mocked(dateTimeUtils.getNow).mockReturnValue(now);
+      vi.mocked(dateTimeUtils.startOfDay).mockImplementation((t) => dayjs(t).startOf('day'));
+      vi.mocked(dateTimeUtils.add).mockImplementation((t, n, u) => dayjs(t).add(n, u));
+      vi.mocked(dateTimeUtils.isSame).mockImplementation((a, b, unit) =>
+        dayjs(a).isSame(dayjs(b), unit)
       );
-      dateTimeUtils.add.mockImplementation((time, amount, unit) =>
-        dayjs(time).add(amount, unit)
+      vi.mocked(dateTimeUtils.isBefore).mockImplementation((a, b) =>
+        dayjs(a).isBefore(dayjs(b))
       );
-      dateTimeUtils.isSame.mockReturnValue(false);
-      dateTimeUtils.isBefore.mockReturnValue(true);
-      dateTimeUtils.format.mockReturnValue('Wednesday');
+      vi.mocked(dateTimeUtils.format).mockImplementation((t, fmt) => dayjs(t).format(fmt));
 
-      const result = guideUtils.formatTime(future, 'MM/DD');
-
-      expect(result).toBe('Wednesday');
+      const result = guideUtils.formatTime(inThreeDays, 'MMM D');
+      expect(result).toBe(inThreeDays.format('dddd'));
     });
 
     it('should return formatted date beyond a week', () => {
-      const today = dayjs();
-      const future = today.add(10, 'day');
-      dateTimeUtils.getNow.mockReturnValue(today);
-      dateTimeUtils.startOfDay.mockImplementation((time) =>
-        dayjs(time).startOf('day')
+      const now = dayjs();
+      const beyondWeek = now.add(10, 'day');
+      vi.mocked(dateTimeUtils.getNow).mockReturnValue(now);
+      vi.mocked(dateTimeUtils.startOfDay).mockImplementation((t) => dayjs(t).startOf('day'));
+      vi.mocked(dateTimeUtils.add).mockImplementation((t, n, u) => dayjs(t).add(n, u));
+      vi.mocked(dateTimeUtils.isSame).mockImplementation((a, b, unit) =>
+        dayjs(a).isSame(dayjs(b), unit)
       );
-      dateTimeUtils.add.mockImplementation((time, amount, unit) =>
-        dayjs(time).add(amount, unit)
+      vi.mocked(dateTimeUtils.isBefore).mockImplementation((a, b) =>
+        dayjs(a).isBefore(dayjs(b))
       );
-      dateTimeUtils.isSame.mockReturnValue(false);
-      dateTimeUtils.isBefore.mockReturnValue(false);
-      dateTimeUtils.format.mockReturnValue('01/25');
+      vi.mocked(dateTimeUtils.format).mockImplementation((t, fmt) => dayjs(t).format(fmt));
 
-      const result = guideUtils.formatTime(future, 'MM/DD');
-
-      expect(result).toBe('01/25');
+      const result = guideUtils.formatTime(beyondWeek, 'MMM D');
+      expect(result).toBe(beyondWeek.format('MMM D'));
     });
   });
 
+  // ── calculateHourTimeline ─────────────────────────────────────────────────
+
   describe('calculateHourTimeline', () => {
     it('should generate hours between start and end', () => {
-      const start = dayjs('2024-01-15T10:00:00Z');
-      const end = dayjs('2024-01-15T13:00:00Z');
-      dateTimeUtils.isBefore.mockImplementation((a, b) =>
+      const start = dayjs('2024-01-01T10:00:00Z');
+      const end = dayjs('2024-01-01T13:00:00Z');
+
+      vi.mocked(dateTimeUtils.isBefore).mockImplementation((a, b) =>
         dayjs(a).isBefore(dayjs(b))
       );
-      dateTimeUtils.add.mockImplementation((time, amount, unit) =>
-        dayjs(time).add(amount, unit)
+      vi.mocked(dateTimeUtils.startOfDay).mockImplementation((t) => dayjs(t).startOf('day'));
+      vi.mocked(dateTimeUtils.isSame).mockImplementation((a, b, unit) =>
+        dayjs(a).isSame(dayjs(b), unit)
       );
-      dateTimeUtils.startOfDay.mockImplementation((time) =>
-        dayjs(time).startOf('day')
-      );
-      dateTimeUtils.isSame.mockReturnValue(true);
+      vi.mocked(dateTimeUtils.add).mockImplementation((t, n, u) => dayjs(t).add(n, u));
 
-      const formatDayLabel = vi.fn((time) => 'Today');
-      const result = guideUtils.calculateHourTimeline(
-        start,
-        end,
-        formatDayLabel
-      );
+      const formatDayLabel = vi.fn((t) => dayjs(t).format('MMM D'));
+      const result = guideUtils.calculateHourTimeline(start, end, formatDayLabel);
 
       expect(result).toHaveLength(3);
-      expect(formatDayLabel).toHaveBeenCalledTimes(3);
     });
 
     it('should mark new day transitions', () => {
-      const start = dayjs('2024-01-15T23:00:00Z');
-      const end = dayjs('2024-01-16T02:00:00Z');
-      dateTimeUtils.isBefore.mockImplementation((a, b) =>
+      const start = dayjs('2024-01-01T23:00:00Z');
+      const end = dayjs('2024-01-02T02:00:00Z');
+
+      vi.mocked(dateTimeUtils.isBefore).mockImplementation((a, b) =>
         dayjs(a).isBefore(dayjs(b))
       );
-      dateTimeUtils.add.mockImplementation((time, amount, unit) =>
-        dayjs(time).add(amount, unit)
+      vi.mocked(dateTimeUtils.startOfDay).mockImplementation((t) =>
+        dayjs(t).utc().startOf('day')
       );
-      dateTimeUtils.startOfDay.mockImplementation((time) =>
-        dayjs(time).startOf('day')
-      );
-      dateTimeUtils.isSame.mockImplementation((a, b, unit) =>
-        dayjs(a).isSame(dayjs(b), unit)
+      vi.mocked(dateTimeUtils.isSame).mockImplementation((a, b, unit) =>
+        dayjs(a).utc().isSame(dayjs(b).utc(), unit)
       );
+      vi.mocked(dateTimeUtils.add).mockImplementation((t, n, u) => dayjs(t).add(n, u));
 
-      const formatDayLabel = vi.fn((time) => 'Day');
-      const result = guideUtils.calculateHourTimeline(
-        start,
-        end,
-        formatDayLabel
-      );
+      const formatDayLabel = vi.fn((t) => dayjs(t).utc().format('MMM D'));
+      const result = guideUtils.calculateHourTimeline(start, end, formatDayLabel);
 
-      expect(result[0].isNewDay).toBe(true);
+      expect(result).toHaveLength(3);
+      expect(result[0].isNewDay).toBe(true);  // 23:00 UTC — first entry, always new day
+      expect(result[1].isNewDay).toBe(true);  // 00:00 UTC — crosses into Jan 2
+      expect(result[2].isNewDay).toBe(false); // 01:00 UTC — same day as 00:00
     });
   });
 
+  // ── calculateNowPosition ──────────────────────────────────────────────────
+
   describe('calculateNowPosition', () => {
     it('should return -1 when now is before start', () => {
-      const now = dayjs('2024-01-15T09:00:00Z');
-      const start = dayjs('2024-01-15T10:00:00Z');
-      const end = dayjs('2024-01-15T18:00:00Z');
-      dateTimeUtils.isBefore.mockReturnValue(true);
+      const now = dayjs('2024-01-01T09:00:00Z');
+      const start = dayjs('2024-01-01T10:00:00Z');
+      const end = dayjs('2024-01-01T22:00:00Z');
+      vi.mocked(dateTimeUtils.isBefore).mockReturnValue(true);
+      vi.mocked(dateTimeUtils.isAfter).mockReturnValue(false);
 
       const result = guideUtils.calculateNowPosition(now, start, end);
-
       expect(result).toBe(-1);
     });
 
     it('should return -1 when now is after end', () => {
-      const now = dayjs('2024-01-15T19:00:00Z');
-      const start = dayjs('2024-01-15T10:00:00Z');
-      const end = dayjs('2024-01-15T18:00:00Z');
-      dateTimeUtils.isBefore.mockReturnValue(false);
-      dateTimeUtils.isAfter.mockReturnValue(true);
+      const now = dayjs('2024-01-01T23:00:00Z');
+      const start = dayjs('2024-01-01T10:00:00Z');
+      const end = dayjs('2024-01-01T22:00:00Z');
+      vi.mocked(dateTimeUtils.isBefore).mockReturnValue(false);
+      vi.mocked(dateTimeUtils.isAfter).mockReturnValue(true);
 
       const result = guideUtils.calculateNowPosition(now, start, end);
-
       expect(result).toBe(-1);
     });
 
     it('should calculate position when now is between start and end', () => {
-      const now = dayjs('2024-01-15T11:00:00Z');
-      const start = dayjs('2024-01-15T10:00:00Z');
-      const end = dayjs('2024-01-15T18:00:00Z');
-      dateTimeUtils.isBefore.mockReturnValue(false);
-      dateTimeUtils.isAfter.mockReturnValue(false);
-      dateTimeUtils.diff.mockReturnValue(60);
+      const now = dayjs('2024-01-01T11:00:00Z');
+      const start = dayjs('2024-01-01T10:00:00Z');
+      const end = dayjs('2024-01-01T22:00:00Z');
+      vi.mocked(dateTimeUtils.isBefore).mockReturnValue(false);
+      vi.mocked(dateTimeUtils.isAfter).mockReturnValue(false);
+      vi.mocked(dateTimeUtils.diff).mockReturnValue(60); // 60 minutes
 
       const result = guideUtils.calculateNowPosition(now, start, end);
-
-      expect(result).toBeGreaterThan(0);
+      // 60 minutes / 15 min increment * MINUTE_BLOCK_WIDTH(112.5)
+      expect(result).toBe((60 / 15) * guideUtils.MINUTE_BLOCK_WIDTH);
     });
   });
 
+  // ── calculateScrollPosition ───────────────────────────────────────────────
+
   describe('calculateScrollPosition', () => {
     it('should calculate scroll position for current time', () => {
-      const now = dayjs('2024-01-15T11:00:00Z');
-      const start = dayjs('2024-01-15T10:00:00Z');
-      const rounded = dayjs('2024-01-15T11:00:00Z');
-      dateTimeUtils.roundToNearest.mockReturnValue(rounded);
-      dateTimeUtils.diff.mockReturnValue(60);
+      const now = dayjs('2024-01-01T11:00:00Z');
+      const start = dayjs('2024-01-01T10:00:00Z');
+      vi.mocked(dateTimeUtils.roundToNearest).mockReturnValue(now);
+      vi.mocked(dateTimeUtils.diff).mockReturnValue(60);
 
       const result = guideUtils.calculateScrollPosition(now, start);
-
-      expect(result).toBeGreaterThanOrEqual(0);
+      expect(result).toBeGreaterThan(0);
     });
 
     it('should return 0 when calculated position is negative', () => {
-      const now = dayjs('2024-01-15T10:00:00Z');
-      const start = dayjs('2024-01-15T10:00:00Z');
-      const rounded = dayjs('2024-01-15T10:00:00Z');
-      dateTimeUtils.roundToNearest.mockReturnValue(rounded);
-      dateTimeUtils.diff.mockReturnValue(0);
+      const now = dayjs('2024-01-01T10:00:00Z');
+      const start = dayjs('2024-01-01T10:00:00Z');
+      vi.mocked(dateTimeUtils.roundToNearest).mockReturnValue(now);
+      vi.mocked(dateTimeUtils.diff).mockReturnValue(0);
 
       const result = guideUtils.calculateScrollPosition(now, start);
-
       expect(result).toBe(0);
     });
   });
 
+  // ── matchChannelByTvgId ───────────────────────────────────────────────────
+
   describe('matchChannelByTvgId', () => {
     it('should return null when no matching channel ids', () => {
       const channelIdByTvgId = new Map();
-      const channelById = new Map();
-
-      const result = guideUtils.matchChannelByTvgId(
-        channelIdByTvgId,
-        channelById,
-        'tvg-1'
-      );
+      const channelById = new Map([[1, { id: 1, name: 'ESPN' }]]);
 
+      const result = guideUtils.matchChannelByTvgId(channelIdByTvgId, channelById, 'tvg-1');
       expect(result).toBeNull();
     });
 
     it('should return first matching channel', () => {
-      const channel = { id: 1, name: 'Channel 1' };
-      const channelIdByTvgId = new Map([['tvg-1', [1, 2, 3]]]);
-      const channelById = new Map([[1, channel]]);
+      const channelIdByTvgId = new Map([['tvg-1', [1, 2]]]);
+      const channelById = new Map([
+        [1, { id: 1, name: 'ESPN' }],
+        [2, { id: 2, name: 'ESPN HD' }],
+      ]);
 
-      const result = guideUtils.matchChannelByTvgId(
-        channelIdByTvgId,
-        channelById,
-        'tvg-1'
-      );
-
-      expect(result).toBe(channel);
+      const result = guideUtils.matchChannelByTvgId(channelIdByTvgId, channelById, 'tvg-1');
+      expect(result).toEqual({ id: 1, name: 'ESPN' });
     });
 
     it('should return null when channel not in channelById map', () => {
-      const channelIdByTvgId = new Map([['tvg-1', [999]]]);
-      const channelById = new Map();
-
-      const result = guideUtils.matchChannelByTvgId(
-        channelIdByTvgId,
-        channelById,
-        'tvg-1'
-      );
+      const channelIdByTvgId = new Map([['tvg-1', [99]]]);
+      const channelById = new Map([[1, { id: 1 }]]);
 
+      const result = guideUtils.matchChannelByTvgId(channelIdByTvgId, channelById, 'tvg-1');
       expect(result).toBeNull();
     });
   });
 
+  // ── fetchRules ────────────────────────────────────────────────────────────
+
   describe('fetchRules', () => {
     it('should fetch series rules from API', async () => {
-      const mockRules = [{ id: 1, tvg_id: 'tvg-1' }];
-      API.listSeriesRules.mockResolvedValue(mockRules);
+      const rules = [{ tvg_id: 'tvg-1', title: 'Show' }];
+      vi.mocked(API.listSeriesRules).mockResolvedValue(rules);
 
       const result = await guideUtils.fetchRules();
 
-      expect(API.listSeriesRules).toHaveBeenCalledTimes(1);
-      expect(result).toBe(mockRules);
+      expect(API.listSeriesRules).toHaveBeenCalled();
+      expect(result).toEqual(rules);
     });
   });
 
+  // ── getRuleByProgram ──────────────────────────────────────────────────────
+
   describe('getRuleByProgram', () => {
     it('should return null when no rules', () => {
-      const program = { tvg_id: 'tvg-1', title: 'Show' };
-
-      const result = guideUtils.getRuleByProgram(null, program);
-
+      const result = guideUtils.getRuleByProgram(null, { tvg_id: 'tvg-1' });
       expect(result).toBeUndefined();
     });
 
     it('should find rule by tvg_id without title', () => {
-      const rules = [{ tvg_id: 'tvg-1', title: null }];
-      const program = { tvg_id: 'tvg-1', title: 'Show' };
-
-      const result = guideUtils.getRuleByProgram(rules, program);
-
-      expect(result).toBe(rules[0]);
+      const rules = [{ tvg_id: 'tvg-1', title: '' }];
+      const result = guideUtils.getRuleByProgram(rules, { tvg_id: 'tvg-1', title: 'Anything' });
+      expect(result).toEqual(rules[0]);
     });
 
     it('should find rule by tvg_id and title', () => {
@@ -974,274 +764,272 @@ describe('guideUtils', () => {
         { tvg_id: 'tvg-1', title: 'Show A' },
         { tvg_id: 'tvg-1', title: 'Show B' },
       ];
-      const program = { tvg_id: 'tvg-1', title: 'Show B' };
-
-      const result = guideUtils.getRuleByProgram(rules, program);
-
-      expect(result).toBe(rules[1]);
+      const result = guideUtils.getRuleByProgram(rules, { tvg_id: 'tvg-1', title: 'Show B' });
+      expect(result).toEqual(rules[1]);
     });
 
     it('should handle string comparison for tvg_id', () => {
-      const rules = [{ tvg_id: 123, title: null }];
-      const program = { tvg_id: '123', title: 'Show' };
-
-      const result = guideUtils.getRuleByProgram(rules, program);
-
-      expect(result).toBe(rules[0]);
+      const rules = [{ tvg_id: 123, title: '' }];
+      const result = guideUtils.getRuleByProgram(rules, { tvg_id: '123', title: 'Show' });
+      expect(result).toEqual(rules[0]);
     });
   });
 
+  // ── createRecording ───────────────────────────────────────────────────────
+
   describe('createRecording', () => {
     it('should create recording via API', async () => {
-      const channel = { id: 1 };
-      const program = {
-        start_time: '2024-01-15T10:00:00Z',
-        end_time: '2024-01-15T11:00:00Z',
-      };
+      vi.mocked(API.createRecording).mockResolvedValue({});
+      const values = { channel_id: 1, start_time: '2024-01-01T10:00:00Z' };
 
-      await guideUtils.createRecording(channel, program);
+      await guideUtils.createRecording(values);
 
-      expect(API.createRecording).toHaveBeenCalledWith({
-        channel: '1',
-        start_time: program.start_time,
-        end_time: program.end_time,
-        custom_properties: { program },
-      });
+      expect(API.createRecording).toHaveBeenCalledWith(values);
     });
   });
 
+  // ── createSeriesRule ──────────────────────────────────────────────────────
+
   describe('createSeriesRule', () => {
     it('should create series rule via API', async () => {
-      const program = { tvg_id: 'tvg-1', title: 'Show' };
-      const mode = 'all';
+      vi.mocked(API.createSeriesRule).mockResolvedValue({});
+      const values = { tvg_id: 'tvg-1', title: 'Show' };
 
-      await guideUtils.createSeriesRule(program, mode);
+      await guideUtils.createSeriesRule(values);
 
-      expect(API.createSeriesRule).toHaveBeenCalledWith({
-        tvg_id: program.tvg_id,
-        mode,
-        title: program.title,
-      });
+      expect(API.createSeriesRule).toHaveBeenCalledWith(values);
     });
   });
 
+  // ── evaluateSeriesRule ────────────────────────────────────────────────────
+
   describe('evaluateSeriesRule', () => {
     it('should evaluate series rule via API', async () => {
-      const program = { tvg_id: 'tvg-1' };
+      vi.mocked(API.evaluateSeriesRules).mockResolvedValue({});
 
-      await guideUtils.evaluateSeriesRule(program);
+      await guideUtils.evaluateSeriesRulesByTvgId('tvg-1');
 
-      expect(API.evaluateSeriesRules).toHaveBeenCalledWith(program.tvg_id);
+      expect(API.evaluateSeriesRules).toHaveBeenCalledWith('tvg-1');
     });
   });
 
+  // ── calculateLeftScrollPosition ───────────────────────────────────────────
+
   describe('calculateLeftScrollPosition', () => {
     it('should calculate left position using startMs', () => {
-      const program = {
-        startMs: dayjs.utc('2024-01-15T11:00:00Z').valueOf(),
-      };
-      const start = dayjs.utc('2024-01-15T10:00:00Z').valueOf();
-      dateTimeUtils.convertToMs.mockImplementation((time) => {
-        if (typeof time === 'number') return time;
-        return dayjs.utc(time).valueOf();
-      });
+      const startMs = 60 * 60 * 1000; // 1 hour in ms
+      const start = '2024-01-01T00:00:00Z';
+      vi.mocked(dateTimeUtils.convertToMs).mockReturnValue(0);
 
+      const program = { startMs };
       const result = guideUtils.calculateLeftScrollPosition(program, start);
 
-      expect(result).toBeGreaterThanOrEqual(0);
+      // (60 min / 15 min increment) * MINUTE_BLOCK_WIDTH
+      expect(result).toBe((60 / 15) * guideUtils.MINUTE_BLOCK_WIDTH);
     });
 
     it('should calculate left position from start_time when no startMs', () => {
-      const program = {
-        start_time: '2024-01-15T10:30:00Z',
-      };
-      const start = '2024-01-15T10:00:00Z';
-      dateTimeUtils.convertToMs.mockImplementation((time) =>
-        dayjs(time).valueOf()
-      );
+      const startTimeMs = 30 * 60 * 1000; // 30 min
+      vi.mocked(dateTimeUtils.convertToMs)
+        .mockReturnValueOnce(startTimeMs) // program start_time
+        .mockReturnValueOnce(0);         // guide start
 
-      const result = guideUtils.calculateLeftScrollPosition(program, start);
+      const program = { start_time: '2024-01-01T00:30:00Z' };
+      const result = guideUtils.calculateLeftScrollPosition(program, '2024-01-01T00:00:00Z');
 
-      expect(result).toBeGreaterThanOrEqual(0);
+      expect(result).toBe((30 / 15) * guideUtils.MINUTE_BLOCK_WIDTH);
     });
   });
 
+  // ── calculateDesiredScrollPosition ────────────────────────────────────────
+
   describe('calculateDesiredScrollPosition', () => {
     it('should subtract 20 from left position', () => {
       const result = guideUtils.calculateDesiredScrollPosition(100);
-
       expect(result).toBe(80);
     });
 
     it('should return 0 when result would be negative', () => {
       const result = guideUtils.calculateDesiredScrollPosition(10);
-
       expect(result).toBe(0);
     });
   });
 
+  // ── calculateScrollPositionByTimeClick ────────────────────────────────────
+
   describe('calculateScrollPositionByTimeClick', () => {
+    const makeEvent = (clientX, rectLeft, rectWidth) => ({
+      currentTarget: {
+        getBoundingClientRect: () => ({ left: rectLeft, width: rectWidth }),
+      },
+      clientX,
+    });
+
     it('should calculate scroll position from time click', () => {
-      const event = {
-        currentTarget: {
-          getBoundingClientRect: () => ({ left: 100, width: 450 }),
-        },
-        clientX: 325,
-      };
-      const clickedTime = dayjs('2024-01-15T10:00:00Z');
-      const start = dayjs('2024-01-15T09:00:00Z');
-      dateTimeUtils.add.mockImplementation((time, amount, unit) =>
-        dayjs(time).add(amount, unit)
-      );
-      dateTimeUtils.diff.mockReturnValue(60);
+      vi.mocked(dateTimeUtils.diff).mockReturnValue(60);
+      vi.mocked(dateTimeUtils.add).mockImplementation((t, n, u) => ({
+        ...dayjs(t).add(n, u),
+        minute: (m) => dayjs(t).add(n, u).minute(m),
+      }));
 
-      const result = guideUtils.calculateScrollPositionByTimeClick(
-        event,
-        clickedTime,
-        start
-      );
+      const clickedTime = { minute: vi.fn().mockReturnThis() };
+      const start = dayjs('2024-01-01T10:00:00Z');
+      // Click at 50% of a 600px element → 30 min into hour → snaps to 30
+      const event = makeEvent(350, 100, 500);
 
+      vi.mocked(dateTimeUtils.diff).mockReturnValue(90);
+
+      const result = guideUtils.calculateScrollPositionByTimeClick(event, clickedTime, start);
       expect(result).toBeGreaterThanOrEqual(0);
     });
 
     it('should snap to 15-minute increments', () => {
-      const event = {
-        currentTarget: {
-          getBoundingClientRect: () => ({ left: 0, width: 450 }),
-        },
-        clientX: 112.5,
-      };
-      const clickedTime = dayjs('2024-01-15T10:00:00Z');
-      const start = dayjs('2024-01-15T09:00:00Z');
-      dateTimeUtils.add.mockImplementation((time, amount, unit) =>
-        dayjs(time).add(amount, unit)
-      );
-      dateTimeUtils.diff.mockReturnValue(75);
-
-      guideUtils.calculateScrollPositionByTimeClick(event, clickedTime, start);
-
-      expect(dateTimeUtils.diff).toHaveBeenCalled();
-    });
-
-    it('should handle click at end of hour', () => {
-      const event = {
-        currentTarget: {
-          getBoundingClientRect: () => ({ left: 0, width: 450 }),
-        },
-        clientX: 450,
-      };
-      const clickedTime = dayjs('2024-01-15T10:00:00Z');
-      const start = dayjs('2024-01-15T09:00:00Z');
-      dateTimeUtils.add.mockImplementation((time, amount, unit) =>
-        dayjs(time).add(amount, unit)
-      );
-      dateTimeUtils.diff.mockReturnValue(120);
+      // Click at 10% of a 600px element → 6 min → snaps to 0
+      const event = makeEvent(160, 100, 600);
+      const clickedTime = { minute: vi.fn().mockReturnThis() };
+      vi.mocked(dateTimeUtils.diff).mockReturnValue(0);
 
       const result = guideUtils.calculateScrollPositionByTimeClick(
         event,
         clickedTime,
-        start
+        dayjs()
       );
+      expect(result).toBe(0);
+    });
 
-      expect(dateTimeUtils.add).toHaveBeenCalledWith(
-        expect.anything(),
-        1,
-        'hour'
+    it('should handle click at end of hour (snappedMinute === 60)', () => {
+      // 100% across the element → 60 min → snappedMinute = 60 → use add(1, hour).minute(0)
+      const event = makeEvent(700, 100, 600);
+      const nextHour = dayjs('2024-01-01T11:00:00Z');
+      const addResult = { minute: vi.fn().mockReturnValue(nextHour) };
+      vi.mocked(dateTimeUtils.add).mockReturnValue(addResult);
+      vi.mocked(dateTimeUtils.diff).mockReturnValue(60);
+
+      const result = guideUtils.calculateScrollPositionByTimeClick(
+        event,
+        dayjs('2024-01-01T10:00:00Z'),
+        dayjs('2024-01-01T10:00:00Z')
       );
+      expect(result).toBeGreaterThanOrEqual(0);
     });
   });
 
+  // ── getGroupOptions ───────────────────────────────────────────────────────
+
   describe('getGroupOptions', () => {
     it('should return only "All" when no channel groups', () => {
       const result = guideUtils.getGroupOptions(null, []);
-
-      expect(result).toHaveLength(1);
-      expect(result[0].value).toBe('all');
+      expect(result).toEqual([{ value: 'all', label: 'All Channel Groups' }]);
     });
 
     it('should include groups used by channels', () => {
       const channelGroups = {
-        1: { id: 1, name: 'Sports' },
-        2: { id: 2, name: 'News' },
+        1: { id: 10, name: 'Sports' },
+        2: { id: 20, name: 'News' },
       };
-      const channels = [
-        { id: 1, channel_group_id: 1 },
-        { id: 2, channel_group_id: 1 },
+      const guideChannels = [
+        { id: 1, channel_group_id: 10 },
+        { id: 2, channel_group_id: 20 },
       ];
 
-      const result = guideUtils.getGroupOptions(channelGroups, channels);
-
-      expect(result).toHaveLength(2);
-      expect(result[1].label).toBe('Sports');
+      const result = guideUtils.getGroupOptions(channelGroups, guideChannels);
+      expect(result).toHaveLength(3);
+      expect(result.map((o) => o.label)).toContain('Sports');
+      expect(result.map((o) => o.label)).toContain('News');
     });
 
     it('should exclude groups not used by any channel', () => {
       const channelGroups = {
-        1: { id: 1, name: 'Sports' },
-        2: { id: 2, name: 'News' },
+        1: { id: 10, name: 'Sports' },
+        2: { id: 99, name: 'Unused' },
       };
-      const channels = [{ id: 1, channel_group_id: 1 }];
+      const guideChannels = [{ id: 1, channel_group_id: 10 }];
 
-      const result = guideUtils.getGroupOptions(channelGroups, channels);
-
-      expect(result).toHaveLength(2);
-      expect(result[1].label).toBe('Sports');
+      const result = guideUtils.getGroupOptions(channelGroups, guideChannels);
+      expect(result.map((o) => o.label)).not.toContain('Unused');
     });
 
     it('should sort groups alphabetically', () => {
       const channelGroups = {
-        1: { id: 1, name: 'Z Group' },
-        2: { id: 2, name: 'A Group' },
-        3: { id: 3, name: 'M Group' },
+        1: { id: 10, name: 'Sports' },
+        2: { id: 20, name: 'Movies' },
+        3: { id: 30, name: 'News' },
       };
-      const channels = [
-        { id: 1, channel_group_id: 1 },
-        { id: 2, channel_group_id: 2 },
-        { id: 3, channel_group_id: 3 },
+      const guideChannels = [
+        { id: 1, channel_group_id: 10 },
+        { id: 2, channel_group_id: 20 },
+        { id: 3, channel_group_id: 30 },
       ];
 
-      const result = guideUtils.getGroupOptions(channelGroups, channels);
-
-      expect(result[1].label).toBe('A Group');
-      expect(result[2].label).toBe('M Group');
-      expect(result[3].label).toBe('Z Group');
+      const result = guideUtils.getGroupOptions(channelGroups, guideChannels);
+      const labels = result.slice(1).map((o) => o.label);
+      expect(labels).toEqual([...labels].sort());
     });
   });
 
+  // ── getProfileOptions ─────────────────────────────────────────────────────
+
   describe('getProfileOptions', () => {
     it('should return only "All" when no profiles', () => {
       const result = guideUtils.getProfileOptions(null);
-
-      expect(result).toHaveLength(1);
-      expect(result[0].value).toBe('all');
+      expect(result).toEqual([{ value: 'all', label: 'All Profiles' }]);
     });
 
     it('should include all profiles except id 0', () => {
       const profiles = {
-        0: { id: '0', name: 'All' },
-        1: { id: '1', name: 'Profile 1' },
-        2: { id: '2', name: 'Profile 2' },
+        '0': { id: '0', name: 'Default' },
+        '1': { id: '1', name: 'Kids' },
+        '2': { id: '2', name: 'Sports' },
       };
 
       const result = guideUtils.getProfileOptions(profiles);
-
-      expect(result).toHaveLength(3);
-      expect(result[1].label).toBe('Profile 1');
-      expect(result[2].label).toBe('Profile 2');
+      expect(result).toHaveLength(3); // All + Kids + Sports
+      expect(result.map((o) => o.label)).not.toContain('Default');
+      expect(result.map((o) => o.label)).toContain('Kids');
+      expect(result.map((o) => o.label)).toContain('Sports');
     });
   });
 
+  // ── calcProgressPct ───────────────────────────────────────────────────────
+
+  describe('calcProgressPct', () => {
+    it('should return 0 when now is at start', () => {
+      const result = guideUtils.calcProgressPct(1000, 1000, 60000);
+      expect(result).toBeGreaterThanOrEqual(0);
+    });
+
+    it('should return 1 when now is at or past end', () => {
+      // nowMs >= startMs + durationMs → elapsed >= duration → clamped to 1
+      const startMs = 0;
+      const durationMs = 60 * 60 * 1000; // 1 hour
+      const nowMs = startMs + durationMs + 1000; // past the end
+      const result = guideUtils.calcProgressPct(nowMs, startMs, durationMs);
+      expect(result).toBe(1);
+    });
+
+    it('should return value between 0 and 1 for midpoint', () => {
+      const startMs = 0;
+      const durationMs = 60 * 60 * 1000; // 1 hour
+      const nowMs = 30 * 60 * 1000; // 30 minutes in
+      const result = guideUtils.calcProgressPct(nowMs, startMs, durationMs);
+      expect(result).toBeGreaterThan(0);
+      expect(result).toBeLessThan(1);
+    });
+  });
+
+  // ── formatSeasonEpisode ───────────────────────────────────────────────────
+
   describe('formatSeasonEpisode', () => {
     it('should format both season and episode', () => {
-      expect(guideUtils.formatSeasonEpisode(1, 3)).toBe('S01E03');
+      expect(guideUtils.formatSeasonEpisode(1, 2)).toBe('S01E02');
     });
 
     it('should pad numbers to 2 digits', () => {
-      expect(guideUtils.formatSeasonEpisode(1, 1)).toBe('S01E01');
+      expect(guideUtils.formatSeasonEpisode(3, 7)).toBe('S03E07');
     });
 
     it('should handle large numbers without truncation', () => {
-      expect(guideUtils.formatSeasonEpisode(12, 24)).toBe('S12E24');
+      expect(guideUtils.formatSeasonEpisode(10, 10)).toBe('S10E10');
     });
 
     it('should handle numbers greater than 99', () => {
@@ -1249,19 +1037,19 @@ describe('guideUtils', () => {
     });
 
     it('should return season only when episode is null', () => {
-      expect(guideUtils.formatSeasonEpisode(5, null)).toBe('S05');
+      expect(guideUtils.formatSeasonEpisode(2, null)).toBe('S02');
     });
 
     it('should return season only when episode is undefined', () => {
-      expect(guideUtils.formatSeasonEpisode(5, undefined)).toBe('S05');
+      expect(guideUtils.formatSeasonEpisode(2, undefined)).toBe('S02');
     });
 
     it('should return episode only when season is null', () => {
-      expect(guideUtils.formatSeasonEpisode(null, 7)).toBe('E07');
+      expect(guideUtils.formatSeasonEpisode(null, 5)).toBe('E05');
     });
 
     it('should return episode only when season is undefined', () => {
-      expect(guideUtils.formatSeasonEpisode(undefined, 7)).toBe('E07');
+      expect(guideUtils.formatSeasonEpisode(undefined, 5)).toBe('E05');
     });
 
     it('should return null when both are null', () => {
@@ -1277,32 +1065,44 @@ describe('guideUtils', () => {
     });
 
     it('should handle season zero with episode', () => {
-      expect(guideUtils.formatSeasonEpisode(0, 5)).toBe('S00E05');
+      expect(guideUtils.formatSeasonEpisode(0, 1)).toBe('S00E01');
     });
   });
 
+  // ── deleteSeriesRuleByTvgId ───────────────────────────────────────────────
+
   describe('deleteSeriesRuleByTvgId', () => {
     it('should delete series rule via API with tvg_id and title', async () => {
+      vi.mocked(API.deleteSeriesRule).mockResolvedValue({});
+
       await guideUtils.deleteSeriesRuleByTvgId('tvg-1', 'My Show');
 
       expect(API.deleteSeriesRule).toHaveBeenCalledWith('tvg-1', 'My Show');
     });
 
     it('should forward undefined title when not provided', async () => {
+      vi.mocked(API.deleteSeriesRule).mockResolvedValue({});
+
       await guideUtils.deleteSeriesRuleByTvgId('tvg-1');
 
       expect(API.deleteSeriesRule).toHaveBeenCalledWith('tvg-1', undefined);
     });
 
     it('should work with empty tvg_id for title-only rules', async () => {
+      vi.mocked(API.deleteSeriesRule).mockResolvedValue({});
+
       await guideUtils.deleteSeriesRuleByTvgId('', 'Title-Only Show');
 
       expect(API.deleteSeriesRule).toHaveBeenCalledWith('', 'Title-Only Show');
     });
   });
 
+  // ── evaluateSeriesRulesByTvgId ────────────────────────────────────────────
+
   describe('evaluateSeriesRulesByTvgId', () => {
     it('should evaluate series rules via API', async () => {
+      vi.mocked(API.evaluateSeriesRules).mockResolvedValue({});
+
       await guideUtils.evaluateSeriesRulesByTvgId('tvg-1');
 
       expect(API.evaluateSeriesRules).toHaveBeenCalledWith('tvg-1');

From e766c4dd54a9414536a9da4314a243b8ea5e9810 Mon Sep 17 00:00:00 2001
From: Nick Sandstrom <32273437+nick4810@users.noreply.github.com>
Date: Mon, 25 May 2026 18:06:52 -0700
Subject: [PATCH 14/35] Refactored components

---
 frontend/src/components/forms/Recording.jsx   | 252 ++++--------------
 .../forms/RecordingDetailsModal.jsx           |  70 ++---
 .../components/forms/RecurringRuleModal.jsx   |  91 ++-----
 .../src/components/forms/ScheduleInput.jsx    |  12 +-
 .../components/forms/SeriesRecordingModal.jsx |  26 +-
 .../forms/SeriesRuleEditorModal.jsx           | 124 +++------
 frontend/src/components/forms/Stream.jsx      |  21 +-
 .../src/components/forms/StreamProfile.jsx    |  81 ++----
 .../src/components/forms/SuperuserForm.jsx    |  16 +-
 frontend/src/components/forms/User.jsx        | 228 ++++------------
 frontend/src/components/forms/UserAgent.jsx   |  28 +-
 11 files changed, 270 insertions(+), 679 deletions(-)

diff --git a/frontend/src/components/forms/Recording.jsx b/frontend/src/components/forms/Recording.jsx
index 23f78867..163a43a7 100644
--- a/frontend/src/components/forms/Recording.jsx
+++ b/frontend/src/components/forms/Recording.jsx
@@ -1,86 +1,40 @@
 import React, { useEffect, useMemo, useState } from 'react';
-import dayjs from 'dayjs';
-import API from '../../api';
 import {
   Alert,
   Button,
+  Group,
+  Loader,
   Modal,
+  MultiSelect,
+  SegmentedControl,
   Select,
   Stack,
-  SegmentedControl,
-  MultiSelect,
-  Group,
   TextInput,
-  Loader,
 } from '@mantine/core';
-import { DateTimePicker, TimeInput, DatePickerInput } from '@mantine/dates';
+import { DatePickerInput, DateTimePicker, TimeInput } from '@mantine/dates';
 import { CircleAlert } from 'lucide-react';
-import { isNotEmpty, useForm } from '@mantine/form';
+import { useForm } from '@mantine/form';
 import useChannelsStore from '../../store/channels';
-import { notifications } from '@mantine/notifications';
-
-const DAY_OPTIONS = [
-  { value: '6', label: 'Sun' },
-  { value: '0', label: 'Mon' },
-  { value: '1', label: 'Tue' },
-  { value: '2', label: 'Wed' },
-  { value: '3', label: 'Thu' },
-  { value: '4', label: 'Fri' },
-  { value: '5', label: 'Sat' },
-];
-
-const asDate = (value) => {
-  if (!value) return null;
-  if (value instanceof Date) return value;
-  const parsed = new Date(value);
-  return Number.isNaN(parsed.getTime()) ? null : parsed;
-};
-
-const toIsoIfDate = (value) => {
-  const dt = asDate(value);
-  return dt ? dt.toISOString() : value;
-};
-
-// Accepts "h:mm A"/"hh:mm A"/"HH:mm"/Date, returns "HH:mm"
-const toTimeString = (value) => {
-  if (!value) return '00:00';
-  if (typeof value === 'string') {
-    const parsed = dayjs(
-      value,
-      ['HH:mm', 'hh:mm A', 'h:mm A', 'HH:mm:ss'],
-      true
-    );
-    if (parsed.isValid()) return parsed.format('HH:mm');
-    return value;
-  }
-  const dt = asDate(value);
-  if (!dt) return '00:00';
-  return dayjs(dt).format('HH:mm');
-};
-
-const toDateString = (value) => {
-  const dt = asDate(value);
-  if (!dt) return null;
-  const year = dt.getFullYear();
-  const month = String(dt.getMonth() + 1).padStart(2, '0');
-  const day = String(dt.getDate()).padStart(2, '0');
-  return `${year}-${month}-${day}`;
-};
-
-const createRoundedDate = (minutesAhead = 0) => {
-  const dt = new Date();
-  dt.setSeconds(0);
-  dt.setMilliseconds(0);
-  dt.setMinutes(Math.ceil(dt.getMinutes() / 30) * 30);
-  if (minutesAhead) dt.setMinutes(dt.getMinutes() + minutesAhead);
-  return dt;
-};
-
-// robust onChange for TimeInput (string or event)
-const timeChange = (setter) => (valOrEvent) => {
-  if (typeof valOrEvent === 'string') setter(valOrEvent);
-  else if (valOrEvent?.currentTarget) setter(valOrEvent.currentTarget.value);
-};
+import {
+  RECURRING_DAY_OPTIONS,
+  toTimeString,
+} from '../../utils/dateTimeUtils.js';
+import { showNotification } from '../../utils/notificationUtils.js';
+import {
+  buildRecurringPayload,
+  buildSinglePayload,
+  createRecording,
+  createRecurringRule,
+  getChannelsSummary,
+  getRecurringFormDefaults,
+  getSingleFormDefaults,
+  numberedChannelLabel,
+  recurringFormValidators,
+  singleFormValidators,
+  sortedChannelOptions,
+  timeChange,
+  updateRecording,
+} from '../../utils/forms/RecordingUtils.js';
 
 const RecordingModal = ({
   recording = null,
@@ -98,117 +52,29 @@ const RecordingModal = ({
   const [mode, setMode] = useState('single');
   const [submitting, setSubmitting] = useState(false);
 
-  const defaultStart = createRoundedDate();
-  const defaultEnd = createRoundedDate(60);
-  const defaultDate = new Date();
-
-  // One-time form
   const singleForm = useForm({
     mode: 'controlled',
-    initialValues: {
-      channel_id: recording
-        ? `${recording.channel}`
-        : channel
-          ? `${channel.id}`
-          : '',
-      start_time: recording
-        ? asDate(recording.start_time) || defaultStart
-        : defaultStart,
-      end_time: recording
-        ? asDate(recording.end_time) || defaultEnd
-        : defaultEnd,
-    },
-    validate: {
-      channel_id: isNotEmpty('Select a channel'),
-      start_time: isNotEmpty('Select a start time'),
-      end_time: (value, values) => {
-        const start = asDate(values.start_time);
-        const end = asDate(value);
-        if (!end) return 'Select an end time';
-        if (start && end <= start) return 'End time must be after start time';
-        return null;
-      },
-    },
+    initialValues: getSingleFormDefaults(recording, channel),
+    validate: singleFormValidators,
   });
 
-  // Recurring form stores times as "HH:mm" strings for stable editing
   const recurringForm = useForm({
     mode: 'controlled',
     validateInputOnChange: false,
     validateInputOnBlur: true,
-    initialValues: {
-      channel_id: channel ? `${channel.id}` : '',
-      days_of_week: [],
-      start_time: dayjs(defaultStart).format('HH:mm'),
-      end_time: dayjs(defaultEnd).format('HH:mm'),
-      rule_name: '',
-      start_date: defaultDate,
-      end_date: defaultDate,
-    },
-    validate: {
-      channel_id: isNotEmpty('Select a channel'),
-      days_of_week: (value) =>
-        value && value.length ? null : 'Pick at least one day',
-      start_time: (value) => (value ? null : 'Select a start time'),
-      end_time: (value, values) => {
-        if (!value) return 'Select an end time';
-        const start = dayjs(
-          values.start_time,
-          ['HH:mm', 'hh:mm A', 'h:mm A'],
-          true
-        );
-        const end = dayjs(value, ['HH:mm', 'hh:mm A', 'h:mm A'], true);
-        if (
-          start.isValid() &&
-          end.isValid() &&
-          end.diff(start, 'minute') === 0
-        ) {
-          return 'End time must differ from start time';
-        }
-        return null;
-      },
-      end_date: (value, values) => {
-        const end = asDate(value);
-        const start = asDate(values.start_date);
-        if (!end) return 'Select an end date';
-        if (start && end < start) return 'End date cannot be before start date';
-        return null;
-      },
-    },
+    initialValues: getRecurringFormDefaults(channel),
+    validate: recurringFormValidators,
   });
 
   useEffect(() => {
     if (!isOpen) return;
 
-    const freshStart = createRoundedDate();
-    const freshEnd = createRoundedDate(60);
-    const freshDate = new Date();
-
-    if (recording && recording.id) {
+    if (recording?.id) {
       setMode('single');
-      singleForm.setValues({
-        channel_id: `${recording.channel}`,
-        start_time: asDate(recording.start_time) || defaultStart,
-        end_time: asDate(recording.end_time) || defaultEnd,
-      });
+      singleForm.setValues(getSingleFormDefaults(recording, channel));
     } else {
-      // Reset forms for fresh open
-      singleForm.setValues({
-        channel_id: channel ? `${channel.id}` : '',
-        start_time: freshStart,
-        end_time: freshEnd,
-      });
-
-      const startStr = dayjs(freshStart).format('HH:mm');
-      recurringForm.setValues({
-        channel_id: channel ? `${channel.id}` : '',
-        days_of_week: [],
-        start_time: startStr,
-        end_time: dayjs(freshEnd).format('HH:mm'),
-        rule_name: channel?.name || '',
-        start_date: freshDate,
-        end_date: freshDate,
-      });
+      singleForm.setValues(getSingleFormDefaults(null, channel));
+      recurringForm.setValues(getRecurringFormDefaults(channel));
       setMode('single');
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -221,7 +87,7 @@ const RecordingModal = ({
       if (!isOpen) return;
       try {
         setIsChannelsLoading(true);
-        const chans = await API.getChannelsSummary();
+        const chans = await getChannelsSummary();
         if (cancelled) return;
         setAllChannels(Array.isArray(chans) ? chans : []);
       } catch (e) {
@@ -238,19 +104,7 @@ const RecordingModal = ({
   }, [isOpen]);
 
   const channelOptions = useMemo(() => {
-    const list = Array.isArray(allChannels) ? [...allChannels] : [];
-    list.sort((a, b) => {
-      const aNum = Number(a.channel_number) || 0;
-      const bNum = Number(b.channel_number) || 0;
-      if (aNum === bNum) return (a.name || '').localeCompare(b.name || '');
-      return aNum - bNum;
-    });
-    return list.map((item) => ({
-      value: `${item.id}`,
-      label: item.channel_number
-        ? `${item.channel_number} - ${item.name || `Channel ${item.id}`}`
-        : item.name || `Channel ${item.id}`,
-    }));
+    return sortedChannelOptions(allChannels, numberedChannelLabel);
   }, [allChannels]);
 
   const resetForms = () => {
@@ -267,25 +121,18 @@ const RecordingModal = ({
   const handleSingleSubmit = async (values) => {
     try {
       setSubmitting(true);
+      const payload = buildSinglePayload(values);
       if (recording && recording.id) {
-        await API.updateRecording(recording.id, {
-          channel: values.channel_id,
-          start_time: toIsoIfDate(values.start_time),
-          end_time: toIsoIfDate(values.end_time),
-        });
-        notifications.show({
+        await updateRecording(recording.id, payload);
+        showNotification({
           title: 'Recording updated',
           message: 'Recording schedule updated successfully',
           color: 'green',
           autoClose: 2500,
         });
       } else {
-        await API.createRecording({
-          channel: values.channel_id,
-          start_time: toIsoIfDate(values.start_time),
-          end_time: toIsoIfDate(values.end_time),
-        });
-        notifications.show({
+        await createRecording(payload);
+        showNotification({
           title: 'Recording scheduled',
           message: 'One-time recording added to DVR queue',
           color: 'green',
@@ -304,18 +151,10 @@ const RecordingModal = ({
   const handleRecurringSubmit = async (values) => {
     try {
       setSubmitting(true);
-      await API.createRecurringRule({
-        channel: values.channel_id,
-        days_of_week: (values.days_of_week || []).map((d) => Number(d)),
-        start_time: toTimeString(values.start_time),
-        end_time: toTimeString(values.end_time),
-        start_date: toDateString(values.start_date),
-        end_date: toDateString(values.end_date),
-        name: values.rule_name?.trim() || '',
-      });
+      await createRecurringRule(buildRecurringPayload(values));
 
       await Promise.all([fetchRecurringRules(), fetchRecordings()]);
-      notifications.show({
+      showNotification({
         title: 'Recurring rule saved',
         message: 'Future slots will be scheduled automatically',
         color: 'green',
@@ -427,7 +266,10 @@ const RecordingModal = ({
                   key={recurringForm.key('days_of_week')}
                   label="Every"
                   placeholder="Select days"
-                  data={DAY_OPTIONS}
+                  data={RECURRING_DAY_OPTIONS.map((opt) => ({
+                    value: String(opt.value),
+                    label: opt.label,
+                  }))}
                   searchable
                   clearable
                   nothingFoundMessage="No match"
diff --git a/frontend/src/components/forms/RecordingDetailsModal.jsx b/frontend/src/components/forms/RecordingDetailsModal.jsx
index bc8b245f..43351765 100644
--- a/frontend/src/components/forms/RecordingDetailsModal.jsx
+++ b/frontend/src/components/forms/RecordingDetailsModal.jsx
@@ -1,11 +1,13 @@
 import useChannelsStore from '../../store/channels.jsx';
-import API from '../../api';
 import {
+  format,
+  isAfter,
+  isBefore,
   useDateTimeFormat,
   useTimeHelpers,
 } from '../../utils/dateTimeUtils.js';
-import React from 'react';
-import { Pencil, RefreshCcw, Check, X } from 'lucide-react';
+import React, { useCallback, useEffect, useMemo, useState } from 'react';
+import { Check, Pencil, RefreshCcw, X } from 'lucide-react';
 import {
   ActionIcon,
   Badge,
@@ -21,7 +23,6 @@ import {
   TextInput,
 } from '@mantine/core';
 import useVideoStore from '../../store/useVideoStore.jsx';
-import { notifications } from '@mantine/notifications';
 import defaultLogo from '../../images/logo.png';
 import {
   deleteRecordingById,
@@ -33,10 +34,14 @@ import {
   runComSkip,
 } from '../../utils/cards/RecordingCardUtils.js';
 import {
+  getChannel,
   getRating,
   getStatRows,
   getUpcomingEpisodes,
+  refreshArtwork,
+  updateRecordingMetadata,
 } from '../../utils/forms/RecordingDetailsModalUtils.js';
+import { showNotification } from '../../utils/notificationUtils.js';
 
 const RecordingDetailsModal = ({
   opened,
@@ -51,21 +56,21 @@ const RecordingDetailsModal = ({
 }) => {
   const allRecordings = useChannelsStore((s) => s.recordings);
   // Local channel cache to avoid the global channels map
-  const [channelsById, setChannelsById] = React.useState({});
+  const [channelsById, setChannelsById] = useState({});
   const { toUserTime, userNow } = useTimeHelpers();
-  const [childOpen, setChildOpen] = React.useState(false);
-  const [childRec, setChildRec] = React.useState(null);
+  const [childOpen, setChildOpen] = useState(false);
+  const [childRec, setChildRec] = useState(null);
   const { timeFormat: timeformat, dateFormat: dateformat } =
     useDateTimeFormat();
 
-  const [editing, setEditing] = React.useState(false);
+  const [editing, setEditing] = useState(false);
 
   // Prefer the store version of the recording for live updates
   // (e.g., after artwork refresh or metadata edit via WebSocket).
   // Preserve _group_count from the categorized prop — the store version
   // doesn't carry this client-side field, so without merging it back
   // isSeriesGroup would always be false and the episode list hidden.
-  const safeRecording = React.useMemo(() => {
+  const safeRecording = useMemo(() => {
     if (recording?.id && Array.isArray(allRecordings)) {
       const found = allRecordings.find((r) => r.id === recording.id);
       if (found) {
@@ -81,7 +86,7 @@ const RecordingDetailsModal = ({
   const program = customProps.program || {};
 
   // Derive poster URL from live store data instead of the stale prop snapshot.
-  const livePosterUrl = React.useMemo(
+  const livePosterUrl = useMemo(
     () =>
       getPosterUrl(
         customProps.poster_logo_id,
@@ -93,17 +98,17 @@ const RecordingDetailsModal = ({
 
   // Optimistic overrides — show saved values immediately without waiting
   // for the WebSocket round-trip to refresh the store.
-  const [savedTitle, setSavedTitle] = React.useState(null);
-  const [savedDescription, setSavedDescription] = React.useState(null);
+  const [savedTitle, setSavedTitle] = useState(null);
+  const [savedDescription, setSavedDescription] = useState(null);
   const recordingName = savedTitle ?? (program.title || 'Custom Recording');
   const description =
     savedDescription ?? (program.description || customProps.description || '');
 
-  const [editTitle, setEditTitle] = React.useState('');
-  const [editDescription, setEditDescription] = React.useState('');
+  const [editTitle, setEditTitle] = useState('');
+  const [editDescription, setEditDescription] = useState('');
 
   // Reset optimistic state when the recording changes
-  React.useEffect(() => {
+  useEffect(() => {
     setSavedTitle(null);
     setSavedDescription(null);
     setEditing(false);
@@ -129,7 +134,7 @@ const RecordingDetailsModal = ({
   const isSeriesGroup = Boolean(
     safeRecording._group_count && safeRecording._group_count > 1
   );
-  const upcomingEpisodes = React.useMemo(() => {
+  const upcomingEpisodes = useMemo(() => {
     return getUpcomingEpisodes(
       isSeriesGroup,
       allRecordings,
@@ -147,7 +152,7 @@ const RecordingDetailsModal = ({
   ]);
 
   // Ensure channel is available for a given id
-  const loadChannel = React.useCallback(
+  const loadChannel = useCallback(
     async (id) => {
       if (!id) {
         return null;
@@ -159,7 +164,7 @@ const RecordingDetailsModal = ({
       }
 
       try {
-        const ch = await API.getChannel(id);
+        const ch = await getChannel(id);
         if (ch && ch.id === id) {
           setChannelsById((prev) => ({ ...prev, [id]: ch }));
           return ch;
@@ -177,7 +182,7 @@ const RecordingDetailsModal = ({
   );
 
   // When opening a child episode, fetch that episode's channel
-  React.useEffect(() => {
+  useEffect(() => {
     if (!childOpen || !childRec) return;
     loadChannel(childRec.channel);
   }, [childOpen, childRec, loadChannel]);
@@ -188,7 +193,7 @@ const RecordingDetailsModal = ({
     const s = toUserTime(rec.start_time);
     const e = toUserTime(rec.end_time);
 
-    if (now.isAfter(s) && now.isBefore(e)) {
+    if (isAfter(now, s) && isBefore(now, e)) {
       const ch =
         channelsById[rec.channel] ||
         (rec.channel === recording?.channel ? channel : null);
@@ -228,14 +233,11 @@ const RecordingDetailsModal = ({
 
   const saveMetadata = async () => {
     try {
-      await API.updateRecordingMetadata(recording.id, {
-        title: editTitle || 'Custom Recording',
-        description: editDescription,
-      });
+      await updateRecordingMetadata(recording, editTitle, editDescription);
       setSavedTitle(editTitle || 'Custom Recording');
       setSavedDescription(editDescription);
       setEditing(false);
-      notifications.show({
+      showNotification({
         title: 'Saved',
         message: 'Recording metadata updated',
         color: 'green',
@@ -249,8 +251,8 @@ const RecordingDetailsModal = ({
   const handleRefreshArtwork = async (e) => {
     e.stopPropagation?.();
     try {
-      await API.refreshArtwork(recording.id);
-      notifications.show({
+      await refreshArtwork(recording.id);
+      showNotification({
         title: 'Refreshing artwork',
         message: 'Poster resolution started',
         color: 'blue.5',
@@ -265,7 +267,7 @@ const RecordingDetailsModal = ({
     e.stopPropagation?.();
     try {
       await runComSkip(recording);
-      notifications.show({
+      showNotification({
         title: 'Removing commercials',
         message: 'Queued comskip for this recording',
         color: 'blue.5',
@@ -344,8 +346,8 @@ const RecordingDetailsModal = ({
               )}
             </Group>
             <Text size="xs">
-              {start.format(`${dateformat}, YYYY ${timeformat}`)} –{' '}
-              {end.format(timeformat)}
+              {format(start, `${dateformat}, YYYY ${timeformat}`)} –{' '}
+              {format(end, timeformat)}
             </Text>
           </Stack>
           <Group gap={6}>
@@ -468,7 +470,7 @@ const RecordingDetailsModal = ({
             <Group gap={8}>
               {onWatchLive && <WatchLive />}
               {onWatchRecording && <WatchRecording />}
-              {onEdit && start.isAfter(userNow()) && <Edit />}
+              {onEdit && isAfter(start, userNow()) && <Edit />}
               {(customProps.status === 'completed' ||
                 customProps.status === 'stopped' ||
                 customProps.status === 'interrupted') &&
@@ -486,8 +488,8 @@ const RecordingDetailsModal = ({
             </Group>
           </Group>
           <Text size="sm">
-            {start.format(`${dateformat}, YYYY ${timeformat}`)} –{' '}
-            {end.format(timeformat)}
+            {format(start, `${dateformat}, YYYY ${timeformat}`)} –{' '}
+            {format(end, timeformat)}
           </Text>
           {rating && (
             <Group gap={8}>
@@ -599,7 +601,7 @@ const RecordingDetailsModal = ({
         title: { color: 'white' },
       }}
     >
-      {isSeriesGroup ? Series() : Movie()}
+      {isSeriesGroup ? <Series /> : <Movie />}
     </Modal>
   );
 };
diff --git a/frontend/src/components/forms/RecurringRuleModal.jsx b/frontend/src/components/forms/RecurringRuleModal.jsx
index 9fe49220..d9007d34 100644
--- a/frontend/src/components/forms/RecurringRuleModal.jsx
+++ b/frontend/src/components/forms/RecurringRuleModal.jsx
@@ -1,16 +1,15 @@
 import useChannelsStore from '../../store/channels.jsx';
-import API from '../../api.js';
 import {
-  parseDate,
+  format,
+  getNow,
   RECURRING_DAY_OPTIONS,
+  toDate,
   toTimeString,
   useDateTimeFormat,
   useTimeHelpers,
 } from '../../utils/dateTimeUtils.js';
 import React, { useEffect, useMemo, useState } from 'react';
 import { useForm } from '@mantine/form';
-import dayjs from 'dayjs';
-import { notifications } from '@mantine/notifications';
 import {
   Badge,
   Button,
@@ -28,11 +27,18 @@ import { DatePickerInput, TimeInput } from '@mantine/dates';
 import { deleteRecordingById } from '../../utils/cards/RecordingCardUtils.js';
 import {
   deleteRecurringRuleById,
-  getChannelOptions,
+  getFormDefaults,
   getUpcomingOccurrences,
   updateRecurringRule,
   updateRecurringRuleEnabled,
 } from '../../utils/forms/RecurringRuleModalUtils.js';
+import { showNotification } from '../../utils/notificationUtils.js';
+import {
+  getChannelsSummary,
+  getRecurringFormDefaults,
+  recurringFormValidators,
+  sortedChannelOptions,
+} from '../../utils/forms/RecordingUtils.js';
 
 const RecurringRuleModal = ({
   opened,
@@ -56,66 +62,18 @@ const RecurringRuleModal = ({
   const rule = recurringRules.find((r) => r.id === ruleId);
 
   const channelOptions = useMemo(() => {
-    return getChannelOptions(allChannels);
+    return sortedChannelOptions(allChannels);
   }, [allChannels]);
 
   const form = useForm({
     mode: 'controlled',
-    initialValues: {
-      channel_id: '',
-      days_of_week: [],
-      rule_name: '',
-      start_time: dayjs().startOf('hour').format('HH:mm'),
-      end_time: dayjs().startOf('hour').add(1, 'hour').format('HH:mm'),
-      start_date: dayjs().toDate(),
-      end_date: dayjs().toDate(),
-      enabled: true,
-    },
-    validate: {
-      channel_id: (value) => (value ? null : 'Select a channel'),
-      days_of_week: (value) =>
-        value && value.length ? null : 'Pick at least one day',
-      end_time: (value, values) => {
-        if (!value) return 'Select an end time';
-        const startValue = dayjs(
-          values.start_time,
-          ['HH:mm', 'hh:mm A', 'h:mm A'],
-          true
-        );
-        const endValue = dayjs(value, ['HH:mm', 'hh:mm A', 'h:mm A'], true);
-        if (
-          startValue.isValid() &&
-          endValue.isValid() &&
-          endValue.diff(startValue, 'minute') === 0
-        ) {
-          return 'End time must differ from start time';
-        }
-        return null;
-      },
-      end_date: (value, values) => {
-        const endDate = dayjs(value);
-        const startDate = dayjs(values.start_date);
-        if (!value) return 'Select an end date';
-        if (startDate.isValid() && endDate.isBefore(startDate, 'day')) {
-          return 'End date cannot be before start date';
-        }
-        return null;
-      },
-    },
+    initialValues: { ...getRecurringFormDefaults(), enabled: true },
+    validate: recurringFormValidators,
   });
 
   useEffect(() => {
     if (opened && rule) {
-      form.setValues({
-        channel_id: `${rule.channel}`,
-        days_of_week: (rule.days_of_week || []).map((d) => String(d)),
-        rule_name: rule.name || '',
-        start_time: toTimeString(rule.start_time),
-        end_time: toTimeString(rule.end_time),
-        start_date: parseDate(rule.start_date) || dayjs().toDate(),
-        end_date: parseDate(rule.end_date),
-        enabled: Boolean(rule.enabled),
-      });
+      form.setValues(getFormDefaults(rule));
     } else {
       form.reset();
     }
@@ -127,7 +85,7 @@ const RecurringRuleModal = ({
     let cancelled = false;
     (async () => {
       try {
-        const chans = await API.getChannelsSummary();
+        const chans = await getChannelsSummary();
         if (!cancelled) setAllChannels(Array.isArray(chans) ? chans : []);
       } catch (e) {
         console.warn('Failed to load channels for recurring rule modal', e);
@@ -149,7 +107,7 @@ const RecurringRuleModal = ({
     try {
       await updateRecurringRule(ruleId, values);
       await fetchRecurringRules(); // recordings_refreshed WS event handles recording list update
-      notifications.show({
+      showNotification({
         title: 'Recurring rule updated',
         message: 'Schedule adjustments saved',
         color: 'green',
@@ -169,7 +127,7 @@ const RecurringRuleModal = ({
     try {
       await deleteRecurringRuleById(ruleId);
       await fetchRecurringRules(); // recordings_refreshed WS event handles recording list update
-      notifications.show({
+      showNotification({
         title: 'Recurring rule removed',
         message: 'All future occurrences were cancelled',
         color: 'red',
@@ -189,7 +147,7 @@ const RecurringRuleModal = ({
     try {
       await updateRecurringRuleEnabled(ruleId, checked);
       await fetchRecurringRules(); // recordings_refreshed WS event handles recording list update
-      notifications.show({
+      showNotification({
         title: checked ? 'Recurring rule enabled' : 'Recurring rule paused',
         message: checked
           ? 'Future occurrences will resume'
@@ -210,7 +168,7 @@ const RecurringRuleModal = ({
     try {
       await deleteRecordingById(occurrence.id);
       // recording_cancelled WS event handles recording list update
-      notifications.show({
+      showNotification({
         title: 'Occurrence cancelled',
         message: 'The selected airing was removed',
         color: 'yellow',
@@ -246,7 +204,7 @@ const RecurringRuleModal = ({
                     setDeleting(true);
                     try {
                       await deleteRecordingById(sourceRecording.id);
-                      notifications.show({
+                      showNotification({
                         title: 'Recording deleted',
                         color: 'green',
                         autoClose: 2500,
@@ -275,7 +233,7 @@ const RecurringRuleModal = ({
   };
 
   const handleStartDateChange = (value) => {
-    form.setFieldValue('start_date', value || dayjs().toDate());
+    form.setFieldValue('start_date', value || toDate(getNow()));
   };
 
   const handleEndDateChange = (value) => {
@@ -302,10 +260,11 @@ const RecurringRuleModal = ({
               <Group justify="space-between" align="center">
                 <Stack gap={2} flex={1}>
                   <Text fw={600} size="sm">
-                    {occStart.format(`${dateformat}, YYYY`)}
+                    {format(occStart, `${dateformat}, YYYY`)}
                   </Text>
                   <Text size="xs" c="dimmed">
-                    {occStart.format(timeformat)} – {occEnd.format(timeformat)}
+                    {format(occStart, timeformat)} –{' '}
+                    {format(occEnd, timeformat)}
                   </Text>
                 </Stack>
                 <Group gap={6}>
diff --git a/frontend/src/components/forms/ScheduleInput.jsx b/frontend/src/components/forms/ScheduleInput.jsx
index eb4aa70d..a0cbb854 100644
--- a/frontend/src/components/forms/ScheduleInput.jsx
+++ b/frontend/src/components/forms/ScheduleInput.jsx
@@ -38,8 +38,8 @@ import {
   Popover,
   ActionIcon,
   Group,
-  Divider,
-  SimpleGrid,
+  PopoverTarget,
+  PopoverDropdown,
 } from '@mantine/core';
 import { Info } from 'lucide-react';
 import { validateCronExpression } from '../../utils/cronUtils';
@@ -118,12 +118,12 @@ export default function ScheduleInput({
               <Group gap="xs">
                 Cron Expression
                 <Popover width={320} position="top" withArrow shadow="md">
-                  <Popover.Target>
+                  <PopoverTarget>
                     <ActionIcon variant="subtle" size="xs" color="gray">
                       <Info size={14} />
                     </ActionIcon>
-                  </Popover.Target>
-                  <Popover.Dropdown p="sm">
+                  </PopoverTarget>
+                  <PopoverDropdown p="sm">
                     <Text size="xs" fw={600} mb="xs" c="dimmed">
                       COMMON EXAMPLES
                     </Text>
@@ -169,7 +169,7 @@ export default function ScheduleInput({
                         <Code size="xs">30 14 1 * *</Code>
                       </Group>
                     </Stack>
-                  </Popover.Dropdown>
+                  </PopoverDropdown>
                 </Popover>
               </Group>
             }
diff --git a/frontend/src/components/forms/SeriesRecordingModal.jsx b/frontend/src/components/forms/SeriesRecordingModal.jsx
index 67aaced5..6ec6cea4 100644
--- a/frontend/src/components/forms/SeriesRecordingModal.jsx
+++ b/frontend/src/components/forms/SeriesRecordingModal.jsx
@@ -16,6 +16,19 @@ const TITLE_MODE_LABEL = {
   regex: 'Title regex',
 };
 
+const renderRuleSummary = (r) => {
+  const titleMode = (r.title_mode || 'exact').toLowerCase();
+  const parts = [];
+  parts.push(r.mode === 'new' ? 'New episodes' : 'Every episode');
+  if (r.title) {
+    parts.push(`${TITLE_MODE_LABEL[titleMode] || titleMode}: "${r.title}"`);
+  }
+  if (r.description) {
+    parts.push(`Description: "${r.description}"`);
+  }
+  return parts.join(' | ');
+};
+
 export default function SeriesRecordingModal({
   opened,
   onClose,
@@ -59,19 +72,6 @@ export default function SeriesRecordingModal({
     onRulesUpdate(updated);
   };
 
-  const renderRuleSummary = (r) => {
-    const titleMode = (r.title_mode || 'exact').toLowerCase();
-    const parts = [];
-    parts.push(r.mode === 'new' ? 'New episodes' : 'Every episode');
-    if (r.title) {
-      parts.push(`${TITLE_MODE_LABEL[titleMode] || titleMode}: "${r.title}"`);
-    }
-    if (r.description) {
-      parts.push(`Description: "${r.description}"`);
-    }
-    return parts.join(' | ');
-  };
-
   return (
     <>
       <Modal
diff --git a/frontend/src/components/forms/SeriesRuleEditorModal.jsx b/frontend/src/components/forms/SeriesRuleEditorModal.jsx
index 201f285f..5986faa9 100644
--- a/frontend/src/components/forms/SeriesRuleEditorModal.jsx
+++ b/frontend/src/components/forms/SeriesRuleEditorModal.jsx
@@ -1,64 +1,37 @@
 import React, { useEffect, useMemo, useRef, useState } from 'react';
 import {
+  Alert,
+  Badge,
+  Button,
+  Divider,
+  Group,
   Modal,
+  ScrollAreaAutosize,
+  SegmentedControl,
+  Select,
   Stack,
   Text,
-  TextInput,
   Textarea,
-  SegmentedControl,
-  Group,
-  Button,
-  Select,
-  Badge,
-  Divider,
-  ScrollArea,
-  Alert,
+  TextInput,
 } from '@mantine/core';
-import API from '../../api.js';
 import useChannelsStore from '../../store/channels.jsx';
 import useEPGsStore from '../../store/epgs.jsx';
 import { useDebounce } from '../../utils.js';
 import { showNotification } from '../../utils/notificationUtils.js';
-
-const TITLE_MODES = [
-  { label: 'Exact', value: 'exact' },
-  { label: 'Contains', value: 'contains' },
-  { label: 'Whole word', value: 'search' },
-  { label: 'Regex', value: 'regex' },
-];
-
-const DESCRIPTION_MODES = [
-  { label: 'Contains', value: 'contains' },
-  { label: 'Whole word', value: 'search' },
-  { label: 'Regex', value: 'regex' },
-];
-
-const EPISODE_MODES = [
-  { label: 'All episodes', value: 'all' },
-  { label: 'New only', value: 'new' },
-];
-
-function formatRange(start, end) {
-  try {
-    const s = new Date(start);
-    const e = new Date(end);
-    const sameDay = s.toDateString() === e.toDateString();
-    const dateStr = s.toLocaleDateString();
-    const startStr = s.toLocaleTimeString([], {
-      hour: '2-digit',
-      minute: '2-digit',
-    });
-    const endStr = e.toLocaleTimeString([], {
-      hour: '2-digit',
-      minute: '2-digit',
-    });
-    return sameDay
-      ? `${dateStr} ${startStr} - ${endStr}`
-      : `${dateStr} ${startStr} -> ${e.toLocaleString()}`;
-  } catch {
-    return `${start} - ${end}`;
-  }
-}
+import { getChannelsSummary } from '../../utils/forms/RecordingUtils.js';
+import {
+  createSeriesRule,
+  evaluateSeriesRulesByTvgId,
+} from '../../utils/guideUtils.js';
+import {
+  DESCRIPTION_MODES,
+  EPISODE_MODES,
+  formatRange,
+  getChannelOptions,
+  getTvgOptions,
+  previewSeriesRule,
+  TITLE_MODES,
+} from '../../utils/forms/SeriesRuleEditorModalUtils.js';
 
 export default function SeriesRuleEditorModal({
   opened,
@@ -106,7 +79,7 @@ export default function SeriesRuleEditorModal({
   useEffect(() => {
     if (!opened) return;
     let cancelled = false;
-    API.getChannelsSummary()
+    getChannelsSummary()
       .then((chans) => {
         if (!cancelled) setAllChannels(Array.isArray(chans) ? chans : []);
       })
@@ -152,7 +125,7 @@ export default function SeriesRuleEditorModal({
 
     setPreviewLoading(true);
     setPreviewError(null);
-    API.previewSeriesRule(debouncedPreviewKey, { signal: controller.signal })
+    previewSeriesRule(debouncedPreviewKey, controller)
       .then((resp) => {
         if (controller.signal.aborted) return;
         setPreview(resp || { matches: [], total: 0 });
@@ -173,44 +146,11 @@ export default function SeriesRuleEditorModal({
   // EPG channel options for the tvg_id selector. Deduplicate by tvg_id value
   // since the same channel can appear across multiple EPG sources.
   const tvgOptions = useMemo(() => {
-    const seen = new Set();
-    const options = [];
-    for (const t of tvgs || []) {
-      if (!t.tvg_id || seen.has(t.tvg_id)) continue;
-      seen.add(t.tvg_id);
-      options.push({
-        value: t.tvg_id,
-        label: t.name ? `${t.name} (${t.tvg_id})` : t.tvg_id,
-      });
-    }
-    return options.sort((a, b) => a.label.localeCompare(b.label));
+    return getTvgOptions(tvgs);
   }, [tvgs]);
 
-  // Channel select options: prefer channels matching the selected tvg_id.
   const channelOptions = useMemo(() => {
-    const sorted = [...allChannels].sort((a, b) => {
-      const aNum = Number(a.channel_number) || 0;
-      const bNum = Number(b.channel_number) || 0;
-      if (aNum !== bNum) return aNum - bNum;
-      return (a.name || '').localeCompare(b.name || '');
-    });
-    const matching = [];
-    const others = [];
-    for (const c of sorted) {
-      const item = {
-        value: String(c.id),
-        label: c.channel_number
-          ? `${c.channel_number} - ${c.name || `Channel ${c.id}`}`
-          : c.name || `Channel ${c.id}`,
-      };
-      const cTvg = c.epg_data_id ? tvgsById?.[c.epg_data_id]?.tvg_id : null;
-      if (tvgId && cTvg && String(cTvg) === String(tvgId)) {
-        matching.push(item);
-      } else {
-        others.push(item);
-      }
-    }
-    return [...matching, ...others];
+    return getChannelOptions(allChannels, tvgsById, tvgId);
   }, [allChannels, tvgsById, tvgId]);
 
   const canSave = !!(payload.title || payload.description);
@@ -218,10 +158,10 @@ export default function SeriesRuleEditorModal({
   const handleSave = async () => {
     setSaving(true);
     try {
-      await API.createSeriesRule(payload);
+      await createSeriesRule(payload);
       // Trigger evaluation so matching upcoming programs get scheduled.
       try {
-        await API.evaluateSeriesRules(payload.tvg_id);
+        await evaluateSeriesRulesByTvgId(payload.tvg_id);
         await useChannelsStore.getState().fetchRecordings();
       } catch (e) {
         console.warn('Failed to evaluate after save', e);
@@ -229,6 +169,8 @@ export default function SeriesRuleEditorModal({
       showNotification({ title: 'Series rule saved' });
       if (onSaved) await onSaved();
       onClose();
+    } catch (e) {
+      console.error('Failed to save series rule', e);
     } finally {
       setSaving(false);
     }
@@ -370,7 +312,7 @@ export default function SeriesRuleEditorModal({
           </Alert>
         )}
 
-        <ScrollArea.Autosize mah={240}>
+        <ScrollAreaAutosize mah={240}>
           <Stack gap={4}>
             {(preview.matches || []).map((p) => (
               <Group key={p.id} gap="xs" wrap="nowrap" align="flex-start">
@@ -407,7 +349,7 @@ export default function SeriesRuleEditorModal({
                 </Text>
               )}
           </Stack>
-        </ScrollArea.Autosize>
+        </ScrollAreaAutosize>
 
         <Group justify="flex-end" gap="xs">
           <Button variant="subtle" onClick={onClose}>
diff --git a/frontend/src/components/forms/Stream.jsx b/frontend/src/components/forms/Stream.jsx
index 785ce4b1..50ca1572 100644
--- a/frontend/src/components/forms/Stream.jsx
+++ b/frontend/src/components/forms/Stream.jsx
@@ -1,17 +1,14 @@
 // Modal.js
 import React, { useEffect, useMemo } from 'react';
 import { useForm } from 'react-hook-form';
-import { yupResolver } from '@hookform/resolvers/yup';
-import * as Yup from 'yup';
-import API from '../../api';
 import useStreamProfilesStore from '../../store/streamProfiles';
-import { Modal, TextInput, Select, Button, Flex } from '@mantine/core';
+import { Button, Flex, Modal, Select, TextInput } from '@mantine/core';
 import useChannelsStore from '../../store/channels';
-
-const schema = Yup.object({
-  name: Yup.string().required('Name is required'),
-  url: Yup.string().required('URL is required').min(0),
-});
+import {
+  addStream,
+  getResolver,
+  updateStream,
+} from '../../utils/forms/StreamUtils.js';
 
 const Stream = ({ stream = null, isOpen, onClose }) => {
   const streamProfiles = useStreamProfilesStore((state) => state.profiles);
@@ -40,7 +37,7 @@ const Stream = ({ stream = null, isOpen, onClose }) => {
     watch,
   } = useForm({
     defaultValues,
-    resolver: yupResolver(schema),
+    resolver: getResolver(),
   });
 
   const onSubmit = async (values) => {
@@ -58,9 +55,9 @@ const Stream = ({ stream = null, isOpen, onClose }) => {
     };
 
     if (stream?.id) {
-      await API.updateStream({ id: stream.id, ...payload });
+      await updateStream(stream.id, payload);
     } else {
-      await API.addStream(payload);
+      await addStream(payload);
     }
 
     reset();
diff --git a/frontend/src/components/forms/StreamProfile.jsx b/frontend/src/components/forms/StreamProfile.jsx
index 137bc2ea..2e7fc096 100644
--- a/frontend/src/components/forms/StreamProfile.jsx
+++ b/frontend/src/components/forms/StreamProfile.jsx
@@ -1,50 +1,25 @@
 // StreamProfile form
 import React, { useEffect, useMemo, useState } from 'react';
 import { useForm } from 'react-hook-form';
-import { yupResolver } from '@hookform/resolvers/yup';
-import * as Yup from 'yup';
-import API from '../../api';
 import useUserAgentsStore from '../../store/userAgents';
 import {
-  Modal,
-  TextInput,
-  Textarea,
-  Select,
   Button,
-  Flex,
-  Stack,
   Checkbox,
+  Flex,
+  Modal,
+  Select,
+  Stack,
+  Textarea,
+  TextInput,
 } from '@mantine/core';
-
-// Built-in commands supported by Dispatcharr out of the box.
-const BUILT_IN_COMMANDS = [
-  { value: 'ffmpeg', label: 'FFmpeg' },
-  { value: 'streamlink', label: 'Streamlink' },
-  { value: 'cvlc', label: 'VLC' },
-  { value: 'yt-dlp', label: 'yt-dlp' },
-  { value: '__custom__', label: 'Custom…' },
-];
-
-// Default parameter examples for each built-in command.
-const COMMAND_EXAMPLES = {
-  ffmpeg: '-user_agent {userAgent} -i {streamUrl} -c copy -f mpegts pipe:1',
-  streamlink: '{streamUrl} --http-header User-Agent={userAgent} best --stdout',
-  cvlc: '-vv -I dummy --no-video-title-show --http-user-agent {userAgent} {streamUrl} --sout #standard{access=file,mux=ts,dst=-}',
-  'yt-dlp': '--hls-use-mpegts -f best -o - {streamUrl}',
-};
-
-// Returns '__custom__' when the command isn't one of the built-ins,
-// otherwise returns the command value itself.
-const toCommandSelection = (command) =>
-  BUILT_IN_COMMANDS.find((o) => o.value === command && o.value !== '__custom__')
-    ? command
-    : '__custom__';
-
-const schema = Yup.object({
-  name: Yup.string().required('Name is required'),
-  command: Yup.string().required('Command is required'),
-  parameters: Yup.string(),
-});
+import {
+  addStreamProfile,
+  BUILT_IN_COMMANDS,
+  COMMAND_EXAMPLES,
+  getResolver,
+  toCommandSelection,
+  updateStreamProfile,
+} from '../../utils/forms/StreamProfileUtils.js';
 
 const StreamProfile = ({ profile = null, isOpen, onClose }) => {
   const userAgents = useUserAgentsStore((state) => state.userAgents);
@@ -73,7 +48,7 @@ const StreamProfile = ({ profile = null, isOpen, onClose }) => {
     watch,
   } = useForm({
     defaultValues,
-    resolver: yupResolver(schema),
+    resolver: getResolver(),
   });
 
   // Sync form + dropdown selection whenever the target profile or modal state changes
@@ -84,9 +59,9 @@ const StreamProfile = ({ profile = null, isOpen, onClose }) => {
 
   const onSubmit = async (values) => {
     if (profile?.id) {
-      await API.updateStreamProfile({ id: profile.id, ...values });
+      await updateStreamProfile(profile.id, values);
     } else {
-      await API.addStreamProfile(values);
+      await addStreamProfile(values);
     }
 
     reset();
@@ -102,6 +77,17 @@ const StreamProfile = ({ profile = null, isOpen, onClose }) => {
   const userAgentValue = watch('user_agent');
   const isActiveValue = watch('is_active');
 
+  const handleOnChangeCommand = (val) => {
+    setCommandSelection(val);
+    // For built-in selections, write the real command value immediately
+    if (val !== '__custom__') {
+      setValue('command', val, { shouldValidate: true });
+    } else {
+      // Clear so the user enters their own value
+      setValue('command', '', { shouldValidate: false });
+    }
+  };
+
   return (
     <Modal opened={isOpen} onClose={onClose} title="Stream Profile">
       <form onSubmit={handleSubmit(onSubmit)}>
@@ -127,16 +113,7 @@ const StreamProfile = ({ profile = null, isOpen, onClose }) => {
             data={BUILT_IN_COMMANDS}
             disabled={isLocked}
             value={commandSelection}
-            onChange={(val) => {
-              setCommandSelection(val);
-              // For built-in selections, write the real command value immediately
-              if (val !== '__custom__') {
-                setValue('command', val, { shouldValidate: true });
-              } else {
-                // Clear so the user enters their own value
-                setValue('command', '', { shouldValidate: false });
-              }
-            }}
+            onChange={handleOnChangeCommand}
             error={isCustom ? undefined : errors.command?.message}
           />
 
diff --git a/frontend/src/components/forms/SuperuserForm.jsx b/frontend/src/components/forms/SuperuserForm.jsx
index b5094993..daf8835f 100644
--- a/frontend/src/components/forms/SuperuserForm.jsx
+++ b/frontend/src/components/forms/SuperuserForm.jsx
@@ -16,13 +16,21 @@ import useAuthStore from '../../store/auth';
 import useSettingsStore from '../../store/settings';
 import logo from '../../assets/logo.png';
 
+const createSuperUser = (formData) => {
+  return API.createSuperUser({
+    username: formData.username,
+    password: formData.password,
+    email: formData.email,
+  });
+};
+
 function SuperuserForm() {
   const [formData, setFormData] = useState({
     username: '',
     password: '',
     email: '',
   });
-  const [error, setError] = useState('');
+  const [_error, setError] = useState('');
   const setSuperuserExists = useAuthStore((s) => s.setSuperuserExists);
   const fetchVersion = useSettingsStore((s) => s.fetchVersion);
   const storedVersion = useSettingsStore((s) => s.version);
@@ -43,11 +51,7 @@ function SuperuserForm() {
     e.preventDefault();
     try {
       console.log(formData);
-      const response = await API.createSuperUser({
-        username: formData.username,
-        password: formData.password,
-        email: formData.email,
-      });
+      const response = await createSuperUser(formData);
       if (response.superuser_exists) {
         setSuperuserExists(true);
       }
diff --git a/frontend/src/components/forms/User.jsx b/frontend/src/components/forms/User.jsx
index c031fcba..34a43c30 100644
--- a/frontend/src/components/forms/User.jsx
+++ b/frontend/src/components/forms/User.jsx
@@ -1,43 +1,41 @@
-import React, { useState, useEffect } from 'react';
-import API from '../../api';
+import React, { useEffect, useState } from 'react';
 import {
-  TextInput,
-  Button,
-  Modal,
-  Select,
-  PasswordInput,
-  Group,
-  Stack,
-  MultiSelect,
   ActionIcon,
-  Switch,
+  Button,
+  Group,
+  Modal,
+  MultiSelect,
   NumberInput,
+  PasswordInput,
+  Select,
+  Stack,
+  Switch,
   Tabs,
+  TabsList,
+  TabsPanel,
+  TabsTab,
   TagsInput,
   Text,
+  TextInput,
   useMantineTheme,
 } from '@mantine/core';
-import { RotateCcwKey, X } from 'lucide-react';
-import { Copy, Key } from 'lucide-react';
+import { Copy, Key, RotateCcwKey, X } from 'lucide-react';
 import { useForm } from '@mantine/form';
 import useChannelsStore from '../../store/channels';
 import useOutputProfilesStore from '../../store/outputProfiles';
-import {
-  USER_LEVELS,
-  USER_LEVEL_LABELS,
-  NETWORK_ACCESS_OPTIONS,
-} from '../../constants';
+import { USER_LEVEL_LABELS, USER_LEVELS, } from '../../constants';
 import useAuthStore from '../../store/auth';
 import { copyToClipboard } from '../../utils';
-import { IPV4_CIDR_REGEX, IPV6_CIDR_REGEX } from '../../utils/networkUtils';
-
-const isValidNetworkEntry = (entry) =>
-  entry.match(IPV4_CIDR_REGEX) ||
-  entry.match(IPV6_CIDR_REGEX) ||
-  (entry + '/32').match(IPV4_CIDR_REGEX) ||
-  (entry + '/128').match(IPV6_CIDR_REGEX);
-
-const NETWORK_KEYS = Object.keys(NETWORK_ACCESS_OPTIONS);
+import {
+  createUser,
+  formValuesToPayload,
+  generateApiKey,
+  getFormInitialValues,
+  getFormValidators,
+  revokeApiKey,
+  updateUser,
+  userToFormValues,
+} from '../../utils/forms/UserUtils.js';
 
 const User = ({ user = null, isOpen, onClose }) => {
   const profiles = useChannelsStore((s) => s.profiles);
@@ -48,52 +46,15 @@ const User = ({ user = null, isOpen, onClose }) => {
   const [, setEnableXC] = useState(false);
   const [selectedProfiles, setSelectedProfiles] = useState(new Set());
   const [generating, setGenerating] = useState(false);
-  const [generatedKey, setGeneratedKey] = useState(null);
+  const [_generatedKey, setGeneratedKey] = useState(null);
   const [userAPIKey, setUserAPIKey] = useState(user?.api_key || null);
 
   const theme = useMantineTheme();
 
   const form = useForm({
     mode: 'uncontrolled',
-    initialValues: {
-      username: '',
-      first_name: '',
-      last_name: '',
-      email: '',
-      user_level: '0',
-      stream_limit: 0,
-      password: '',
-      xc_password: '',
-      output_format: '',
-      output_profile: '',
-      channel_profiles: [],
-      hide_adult_content: false,
-      epg_days: 0,
-      epg_prev_days: 0,
-      allowed_ips: [],
-    },
-
-    validate: (values) => ({
-      username: !values.username
-        ? 'Username is required'
-        : values.user_level == USER_LEVELS.STREAMER &&
-            !values.username.match(/^[a-z0-9]+$/i)
-          ? 'Streamer username must be alphanumeric'
-          : null,
-      password:
-        !user && !values.password && values.user_level != USER_LEVELS.STREAMER
-          ? 'Password is required'
-          : null,
-      xc_password:
-        values.xc_password && !values.xc_password.match(/^[a-z0-9]+$/i)
-          ? 'XC password must be alphanumeric'
-          : null,
-      allowed_ips: (values.allowed_ips || []).some(
-        (t) => !isValidNetworkEntry(t)
-      )
-        ? 'Invalid IP address or CIDR range'
-        : null,
-    }),
+    initialValues: getFormInitialValues(),
+    validate: getFormValidators(user),
   });
 
   const onChannelProfilesChange = (values) => {
@@ -110,65 +71,18 @@ const User = ({ user = null, isOpen, onClose }) => {
   };
 
   const onSubmit = async () => {
-    const values = form.getValues();
+    const payload = formValuesToPayload(form.getValues(), user);
 
-    const customProps = user?.custom_properties || {};
-
-    customProps.xc_password = values.xc_password || '';
-    delete values.xc_password;
-
-    customProps.output_format = values.output_format || null;
-    delete values.output_format;
-
-    customProps.output_profile = values.output_profile
-      ? parseInt(values.output_profile, 10)
-      : null;
-    delete values.output_profile;
-
-    customProps.hide_adult_content = values.hide_adult_content || false;
-    delete values.hide_adult_content;
-
-    customProps.epg_days = values.epg_days || 0;
-    delete values.epg_days;
-    customProps.epg_prev_days = values.epg_prev_days || 0;
-    delete values.epg_prev_days;
-
-    values.custom_properties = customProps;
-
-    // Serialize per-user network restrictions into custom_properties (same list for all types)
-    const joined = (values.allowed_ips || []).join(',');
-    delete values.allowed_ips;
-    const allowed_networks = {};
-    if (joined)
-      NETWORK_KEYS.forEach((key) => {
-        allowed_networks[key] = joined;
-      });
-    customProps.allowed_networks = allowed_networks;
-
-    if (values.channel_profiles.includes('0')) {
-      values.channel_profiles = [];
-    }
-
-    if (!user && values.user_level == USER_LEVELS.STREAMER) {
-      values.password = Math.random().toString(36).slice(2);
+    if (!user && payload.user_level == USER_LEVELS.STREAMER) {
+      payload.password = Math.random().toString(36).slice(2);
     }
 
     if (!user) {
-      await API.createUser(values);
+      await createUser(payload);
     } else {
-      if (!values.password) {
-        delete values.password;
-      }
-
-      const response = await API.updateUser(
-        user.id,
-        values,
-        isAdmin ? false : authUser.id === user.id
-      );
-
-      if (user.id == authUser.id) {
-        setUser(response);
-      }
+      if (!payload.password) delete payload.password;
+      const response = await updateUser(user.id, payload, isAdmin, authUser);
+      if (user.id == authUser.id) setUser(response);
     }
 
     form.reset();
@@ -178,38 +92,9 @@ const User = ({ user = null, isOpen, onClose }) => {
 
   useEffect(() => {
     if (user?.id) {
-      const customProps = user.custom_properties || {};
-      const networks = customProps.allowed_networks || {};
+      form.setValues(userToFormValues(user));
 
-      form.setValues({
-        username: user.username,
-        first_name: user.first_name || '',
-        last_name: user.last_name || '',
-        email: user.email,
-        user_level: `${user.user_level}`,
-        stream_limit: user.stream_limit || 0,
-        channel_profiles:
-          user.channel_profiles.length > 0
-            ? user.channel_profiles.map((id) => `${id}`)
-            : ['0'],
-        xc_password: customProps.xc_password || '',
-        output_format: customProps.output_format || '',
-        output_profile: customProps.output_profile
-          ? `${customProps.output_profile}`
-          : '',
-        hide_adult_content: customProps.hide_adult_content || false,
-        epg_days: customProps.epg_days || 0,
-        epg_prev_days: customProps.epg_prev_days || 0,
-        allowed_ips: [
-          ...new Set(
-            NETWORK_KEYS.flatMap((key) =>
-              networks[key] ? networks[key].split(',').filter(Boolean) : []
-            )
-          ),
-        ],
-      });
-
-      if (customProps.xc_password) {
+      if (user.custom_properties?.xc_password) {
         setEnableXC(true);
       }
 
@@ -248,13 +133,13 @@ const User = ({ user = null, isOpen, onClose }) => {
         payload.user_id = user.id;
       }
 
-      const resp = await API.generateApiKey(payload);
+      const resp = await generateApiKey(payload);
       const newKey = resp && (resp.key || resp.raw_key);
       if (newKey) {
         setGeneratedKey(newKey);
-        setUserAPIKey(newKey);
+        console.log(setUserAPIKey(newKey));
       }
-    } catch (e) {
+    } catch {
       // API shows notifications
     } finally {
       setGenerating(false);
@@ -271,7 +156,8 @@ const User = ({ user = null, isOpen, onClose }) => {
         payload.user_id = user.id;
       }
 
-      const resp = await API.revokeApiKey(payload);
+      const resp = await revokeApiKey(payload);
+      // backend returns { success: true } - clear local state
       if (resp && resp.success) {
         setGeneratedKey(null);
         setUserAPIKey(null);
@@ -280,7 +166,7 @@ const User = ({ user = null, isOpen, onClose }) => {
           setUser({ ...authUser, api_key: null });
         }
       }
-    } catch (e) {
+    } catch {
       // API shows notifications
     } finally {
       setGenerating(false);
@@ -291,16 +177,16 @@ const User = ({ user = null, isOpen, onClose }) => {
     <Modal opened={isOpen} onClose={onClose} title="User" size="xl">
       <form onSubmit={form.onSubmit(onSubmit)}>
         <Tabs defaultValue="account">
-          <Tabs.List mb="md">
-            <Tabs.Tab value="account">Account</Tabs.Tab>
+          <TabsList mb="md">
+            <TabsTab value="account">Account</TabsTab>
             {showPermissions && (
-              <Tabs.Tab value="permissions">Permissions</Tabs.Tab>
+              <TabsTab value="permissions">Permissions</TabsTab>
             )}
-            <Tabs.Tab value="epg">EPG Defaults</Tabs.Tab>
-            <Tabs.Tab value="api">API &amp; XC</Tabs.Tab>
-          </Tabs.List>
+            <TabsTab value="epg">EPG Defaults</TabsTab>
+            <TabsTab value="api">API &amp; XC</TabsTab>
+          </TabsList>
 
-          <Tabs.Panel value="account">
+          <TabsPanel value="account">
             <Stack gap="sm">
               <Group grow align="flex-start">
                 <TextInput
@@ -335,10 +221,10 @@ const User = ({ user = null, isOpen, onClose }) => {
                 disabled={form.getValues().user_level == USER_LEVELS.STREAMER}
               />
             </Stack>
-          </Tabs.Panel>
+          </TabsPanel>
 
           {showPermissions && (
-            <Tabs.Panel value="permissions">
+            <TabsPanel value="permissions">
               <Stack gap="sm">
                 <Group grow align="flex-start">
                   <Select
@@ -375,10 +261,10 @@ const User = ({ user = null, isOpen, onClose }) => {
                   key={form.key('hide_adult_content')}
                 />
               </Stack>
-            </Tabs.Panel>
+            </TabsPanel>
           )}
 
-          <Tabs.Panel value="epg">
+          <TabsPanel value="epg">
             <Stack gap="sm">
               <Text size="sm" c="dimmed">
                 These defaults apply when no URL parameters are specified and
@@ -404,9 +290,9 @@ const User = ({ user = null, isOpen, onClose }) => {
                 />
               </Group>
             </Stack>
-          </Tabs.Panel>
+          </TabsPanel>
 
-          <Tabs.Panel value="api">
+          <TabsPanel value="api">
             <Stack gap="sm">
               <TextInput
                 label="XC Password"
@@ -524,7 +410,7 @@ const User = ({ user = null, isOpen, onClose }) => {
                 </Stack>
               )}
             </Stack>
-          </Tabs.Panel>
+          </TabsPanel>
         </Tabs>
 
         <Group justify="flex-end" mt="md">
diff --git a/frontend/src/components/forms/UserAgent.jsx b/frontend/src/components/forms/UserAgent.jsx
index 97544b57..b6c237b1 100644
--- a/frontend/src/components/forms/UserAgent.jsx
+++ b/frontend/src/components/forms/UserAgent.jsx
@@ -1,26 +1,8 @@
 // Modal.js
 import React, { useEffect, useMemo } from 'react';
 import { useForm } from 'react-hook-form';
-import { yupResolver } from '@hookform/resolvers/yup';
-import * as Yup from 'yup';
-import API from '../../api';
-import {
-  LoadingOverlay,
-  TextInput,
-  Button,
-  Checkbox,
-  Modal,
-  Flex,
-  NativeSelect,
-  FileInput,
-  Space,
-} from '@mantine/core';
-import { NETWORK_ACCESS_OPTIONS } from '../../constants';
-
-const schema = Yup.object({
-  name: Yup.string().required('Name is required'),
-  user_agent: Yup.string().required('User-Agent is required'),
-});
+import { Button, Checkbox, Flex, Modal, Space, TextInput, } from '@mantine/core';
+import { addUserAgent, getResolver, updateUserAgent } from '../../utils/forms/UserAgentUtils.js';
 
 const UserAgent = ({ userAgent = null, isOpen, onClose }) => {
   const defaultValues = useMemo(
@@ -42,14 +24,14 @@ const UserAgent = ({ userAgent = null, isOpen, onClose }) => {
     watch,
   } = useForm({
     defaultValues,
-    resolver: yupResolver(schema),
+    resolver: getResolver(),
   });
 
   const onSubmit = async (values) => {
     if (userAgent?.id) {
-      await API.updateUserAgent({ id: userAgent.id, ...values });
+      await updateUserAgent(userAgent.id, values);
     } else {
-      await API.addUserAgent(values);
+      await addUserAgent(values);
     }
 
     reset();

From fee8913824ede27f3037e85bcc9f8e489cdb97f0 Mon Sep 17 00:00:00 2001
From: Nick Sandstrom <32273437+nick4810@users.noreply.github.com>
Date: Mon, 25 May 2026 18:07:15 -0700
Subject: [PATCH 15/35] Added tests for components

---
 .../__tests__/ProgramRecordingModal.test.jsx  | 285 ++++++
 .../forms/__tests__/Recording.test.jsx        | 507 ++++++++++
 .../__tests__/RecordingDetailsModal.test.jsx  | 770 ++++++++++++++
 .../__tests__/RecurringRuleModal.test.jsx     | 937 ++++++++++++++++++
 .../forms/__tests__/ScheduleInput.test.jsx    | 373 +++++++
 .../__tests__/SeriesRecordingModal.test.jsx   | 417 ++++++++
 .../__tests__/SeriesRuleEditorModal.test.jsx  | 682 +++++++++++++
 .../forms/__tests__/Stream.test.jsx           | 566 +++++++++++
 .../forms/__tests__/StreamProfile.test.jsx    | 607 ++++++++++++
 .../forms/__tests__/SuperuserForm.test.jsx    | 332 +++++++
 .../components/forms/__tests__/User.test.jsx  | 686 +++++++++++++
 .../forms/__tests__/UserAgent.test.jsx        | 239 +++++
 .../__tests__/VODCategoryFilter.test.jsx      | 362 +++++++
 13 files changed, 6763 insertions(+)
 create mode 100644 frontend/src/components/forms/__tests__/ProgramRecordingModal.test.jsx
 create mode 100644 frontend/src/components/forms/__tests__/Recording.test.jsx
 create mode 100644 frontend/src/components/forms/__tests__/RecordingDetailsModal.test.jsx
 create mode 100644 frontend/src/components/forms/__tests__/RecurringRuleModal.test.jsx
 create mode 100644 frontend/src/components/forms/__tests__/ScheduleInput.test.jsx
 create mode 100644 frontend/src/components/forms/__tests__/SeriesRecordingModal.test.jsx
 create mode 100644 frontend/src/components/forms/__tests__/SeriesRuleEditorModal.test.jsx
 create mode 100644 frontend/src/components/forms/__tests__/Stream.test.jsx
 create mode 100644 frontend/src/components/forms/__tests__/StreamProfile.test.jsx
 create mode 100644 frontend/src/components/forms/__tests__/SuperuserForm.test.jsx
 create mode 100644 frontend/src/components/forms/__tests__/User.test.jsx
 create mode 100644 frontend/src/components/forms/__tests__/UserAgent.test.jsx
 create mode 100644 frontend/src/components/forms/__tests__/VODCategoryFilter.test.jsx

diff --git a/frontend/src/components/forms/__tests__/ProgramRecordingModal.test.jsx b/frontend/src/components/forms/__tests__/ProgramRecordingModal.test.jsx
new file mode 100644
index 00000000..e47b15fd
--- /dev/null
+++ b/frontend/src/components/forms/__tests__/ProgramRecordingModal.test.jsx
@@ -0,0 +1,285 @@
+import { render, screen, fireEvent, waitFor } from '@testing-library/react';
+import { describe, it, expect, vi, beforeEach } from 'vitest';
+
+// ── Dependency mocks ───────────────────────────────────────────────────────────
+vi.mock('../../../utils/cards/RecordingCardUtils.js', () => ({
+  deleteRecordingById: vi.fn(),
+  deleteSeriesAndRule: vi.fn(),
+}));
+
+vi.mock('../../../utils/guideUtils.js', () => ({
+  deleteSeriesRuleByTvgId: vi.fn(),
+}));
+
+vi.mock('../SeriesRuleEditorModal.jsx', () => ({
+  default: ({ opened, onClose }) =>
+    opened ? (
+      <div data-testid="series-rule-editor-modal">
+        <button data-testid="series-rule-editor-close" onClick={onClose}>
+          Close Editor
+        </button>
+      </div>
+    ) : null,
+}));
+
+vi.mock('@mantine/core', async () => ({
+  Modal: ({ children, opened, onClose, title }) =>
+    opened ? (
+      <div data-testid="modal">
+        <div data-testid="modal-title">{title}</div>
+        <button data-testid="modal-close" onClick={onClose}>×</button>
+        {children}
+      </div>
+    ) : null,
+  Flex: ({ children }) => <div>{children}</div>,
+  Button: ({ children, onClick, disabled, loading, color, variant }) => (
+    <button
+      onClick={onClick}
+      disabled={disabled || loading}
+      data-color={color}
+      data-variant={variant}
+    >
+      {children}
+    </button>
+  ),
+  Anchor: ({ children, onClick }) => (
+    <a data-testid="anchor" onClick={onClick}>{children}</a>
+  ),
+}));
+
+// ── Imports after mocks ────────────────────────────────────────────────────────
+import ProgramRecordingModal from '../ProgramRecordingModal.jsx';
+import { deleteRecordingById, deleteSeriesAndRule } from '../../../utils/cards/RecordingCardUtils.js';
+import { deleteSeriesRuleByTvgId } from '../../../utils/guideUtils.js';
+
+// ── Helpers ────────────────────────────────────────────────────────────────────
+const makeProgram = (overrides = {}) => ({
+  tvg_id: 'tvg-1',
+  title: 'Test Show',
+  ...overrides,
+});
+
+const makeRecording = (overrides = {}) => ({
+  id: 'rec-1',
+  ...overrides,
+});
+
+const defaultProps = (overrides = {}) => ({
+  opened: true,
+  onClose: vi.fn(),
+  program: makeProgram(),
+  recording: null,
+  existingRuleMode: null,
+  existingRule: null,
+  onRecordOne: vi.fn(),
+  onRecordSeriesAll: vi.fn(),
+  onRecordSeriesNew: vi.fn(),
+  onExistingRuleModeChange: vi.fn(),
+  ...overrides,
+});
+
+// ─── ProgramRecordingModal ─────────────────────────────────────────────────────
+
+describe('ProgramRecordingModal', () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+    vi.mocked(deleteRecordingById).mockResolvedValue(undefined);
+    vi.mocked(deleteSeriesAndRule).mockResolvedValue(undefined);
+    vi.mocked(deleteSeriesRuleByTvgId).mockResolvedValue(undefined);
+  });
+
+  // ── Visibility ─────────────────────────────────────────────────────────────
+
+  describe('visibility', () => {
+    it('renders the modal when opened is true', () => {
+      render(<ProgramRecordingModal {...defaultProps()} />);
+      expect(screen.getByTestId('modal')).toBeInTheDocument();
+    });
+
+    it('does not render the modal when opened is false', () => {
+      render(<ProgramRecordingModal {...defaultProps({ opened: false })} />);
+      expect(screen.queryByTestId('modal')).not.toBeInTheDocument();
+    });
+
+    it('calls onClose when the modal close button is clicked', () => {
+      const onClose = vi.fn();
+      render(<ProgramRecordingModal {...defaultProps({ onClose })} />);
+      fireEvent.click(screen.getByTestId('modal-close'));
+      expect(onClose).toHaveBeenCalled();
+    });
+  });
+
+  // ── handleRemoveRecording ──────────────────────────────────────────────────
+
+  describe('handleRemoveRecording', () => {
+    it('calls deleteRecordingById with the recording id', async () => {
+      const recording = makeRecording();
+      render(
+        <ProgramRecordingModal
+          {...defaultProps({ recording })}
+        />
+      );
+      fireEvent.click(screen.getByText('Remove this recording'));
+      await waitFor(() => {
+        expect(deleteRecordingById).toHaveBeenCalledWith('rec-1');
+      });
+    });
+
+    it('calls onClose after deleting recording', async () => {
+      const onClose = vi.fn();
+      const recording = makeRecording();
+      render(
+        <ProgramRecordingModal
+          {...defaultProps({ recording, onClose })}
+        />
+      );
+      fireEvent.click(screen.getByText('Remove this recording'));
+      await waitFor(() => {
+        expect(onClose).toHaveBeenCalled();
+      });
+    });
+
+    it('still calls onClose when deleteRecordingById throws', async () => {
+      vi.mocked(deleteRecordingById).mockRejectedValue(new Error('fail'));
+      const onClose = vi.fn();
+      const recording = makeRecording();
+      render(
+        <ProgramRecordingModal
+          {...defaultProps({ recording, onClose })}
+        />
+      );
+      fireEvent.click(screen.getByText('Remove this recording'));
+      await waitFor(() => {
+        expect(onClose).toHaveBeenCalled();
+      });
+    });
+  });
+
+  // ── handleRemoveSeries ─────────────────────────────────────────────────────
+
+  describe('handleRemoveSeries', () => {
+    it('calls deleteSeriesAndRule with tvg_id and title', async () => {
+      const program = makeProgram({ tvg_id: 'tvg-2', title: 'My Series' });
+      const recording = makeRecording();
+      render(
+        <ProgramRecordingModal
+          {...defaultProps({ program, recording, existingRuleMode: 'series' })}
+        />
+      );
+      fireEvent.click(screen.getByText(/Remove this series/i));
+      await waitFor(() => {
+        expect(deleteSeriesAndRule).toHaveBeenCalledWith({
+          tvg_id: 'tvg-2',
+          title: 'My Series',
+        });
+      });
+    });
+
+    it('calls onClose after removing series', async () => {
+      const onClose = vi.fn();
+      const recording = makeRecording();
+      render(
+        <ProgramRecordingModal
+          {...defaultProps({ onClose, recording, existingRuleMode: 'series' })}
+        />
+      );
+      fireEvent.click(screen.getByText(/Remove this series/i));
+      await waitFor(() => {
+        expect(onClose).toHaveBeenCalled();
+      });
+    });
+  });
+
+  // ── handleRemoveSeriesRule ─────────────────────────────────────────────────
+
+  describe('handleRemoveSeriesRule', () => {
+    it('calls deleteSeriesRuleByTvgId with tvg_id and title', async () => {
+      const program = makeProgram({ tvg_id: 'tvg-3', title: 'Rule Show' });
+      render(
+        <ProgramRecordingModal
+          {...defaultProps({ program, existingRuleMode: 'rule' })}
+        />
+      );
+      fireEvent.click(screen.getByText(/Remove series rule/i));
+      await waitFor(() => {
+        expect(deleteSeriesRuleByTvgId).toHaveBeenCalledWith('tvg-3', 'Rule Show');
+      });
+    });
+
+    it('calls onExistingRuleModeChange(null) after removing rule', async () => {
+      const onExistingRuleModeChange = vi.fn();
+      render(
+        <ProgramRecordingModal
+          {...defaultProps({ existingRuleMode: 'rule', onExistingRuleModeChange })}
+        />
+      );
+      fireEvent.click(screen.getByText(/Remove series rule/i));
+      await waitFor(() => {
+        expect(onExistingRuleModeChange).toHaveBeenCalledWith(null);
+      });
+    });
+
+    it('calls onClose after removing rule', async () => {
+      const onClose = vi.fn();
+      render(
+        <ProgramRecordingModal
+          {...defaultProps({ existingRuleMode: 'rule', onClose })}
+        />
+      );
+      fireEvent.click(screen.getByText(/Remove series rule/i));
+      await waitFor(() => {
+        expect(onClose).toHaveBeenCalled();
+      });
+    });
+  });
+
+  // ── Record actions ─────────────────────────────────────────────────────────
+
+  describe('record actions', () => {
+    it('calls onRecordOne when "Record Once" is clicked', () => {
+      const onRecordOne = vi.fn();
+      render(<ProgramRecordingModal {...defaultProps({ onRecordOne })} />);
+      fireEvent.click(screen.getByText('Just this one'));
+      expect(onRecordOne).toHaveBeenCalled();
+    });
+
+    it('calls onRecordSeriesAll when "Record All" is clicked', () => {
+      const onRecordSeriesAll = vi.fn();
+      render(<ProgramRecordingModal {...defaultProps({ onRecordSeriesAll })} />);
+      fireEvent.click(screen.getByText('Every episode'));
+      expect(onRecordSeriesAll).toHaveBeenCalled();
+    });
+
+    it('calls onRecordSeriesNew when "Record New" is clicked', () => {
+      const onRecordSeriesNew = vi.fn();
+      render(<ProgramRecordingModal {...defaultProps({ onRecordSeriesNew })} />);
+      fireEvent.click(screen.getByText('New episodes only'));
+      expect(onRecordSeriesNew).toHaveBeenCalled();
+    });
+  });
+
+  // ── SeriesRuleEditorModal ──────────────────────────────────────────────────
+
+  describe('SeriesRuleEditorModal', () => {
+    it('opens SeriesRuleEditorModal when "Edit Rule" is clicked', () => {
+      render(
+        <ProgramRecordingModal
+          {...defaultProps({ existingRuleMode: 'rule', existingRule: { id: 1 } })}
+        />
+      );
+      fireEvent.click(screen.getByText(/Customize rule/i));
+      expect(screen.getByTestId('series-rule-editor-modal')).toBeInTheDocument();
+    });
+
+    it('closes SeriesRuleEditorModal when its onClose is called', () => {
+      render(
+        <ProgramRecordingModal
+          {...defaultProps({ existingRuleMode: 'rule', existingRule: { id: 1 } })}
+        />
+      );
+      fireEvent.click(screen.getByText(/Customize rule/i));
+      fireEvent.click(screen.getByTestId('series-rule-editor-close'));
+      expect(screen.queryByTestId('series-rule-editor-modal')).not.toBeInTheDocument();
+    });
+  });
+});
\ No newline at end of file
diff --git a/frontend/src/components/forms/__tests__/Recording.test.jsx b/frontend/src/components/forms/__tests__/Recording.test.jsx
new file mode 100644
index 00000000..9c3771bc
--- /dev/null
+++ b/frontend/src/components/forms/__tests__/Recording.test.jsx
@@ -0,0 +1,507 @@
+import { render, screen, fireEvent, waitFor } from '@testing-library/react';
+import { describe, it, expect, vi, beforeEach } from 'vitest';
+import RecordingModal from '../Recording';
+
+// ── Store mocks ────────────────────────────────────────────────────────────────
+vi.mock('../../../store/channels', () => ({ default: vi.fn() }));
+
+// ── Utility mocks ──────────────────────────────────────────────────────────────
+vi.mock('../../../utils/dateTimeUtils.js', () => ({
+  RECURRING_DAY_OPTIONS: [
+    { value: 'mon', label: 'Monday' },
+    { value: 'tue', label: 'Tuesday' },
+  ],
+  toTimeString: vi.fn((val) => val),
+}));
+
+vi.mock('../../../utils/notificationUtils.js', () => ({
+  showNotification: vi.fn(),
+}));
+
+vi.mock('../../../utils/forms/RecordingUtils.js', () => ({
+  buildRecurringPayload: vi.fn((v) => v),
+  buildSinglePayload: vi.fn((v) => v),
+  createRecording: vi.fn(),
+  createRecurringRule: vi.fn(),
+  sortedChannelOptions: vi.fn(() => [{ value: 'ch-1', label: '501 - HBO' }]),
+  numberedChannelLabel: vi.fn((item) =>
+    item.channel_number ? `${item.channel_number} - ${item.name}` : item.name
+  ),
+  getChannelsSummary: vi.fn(),
+  getRecurringFormDefaults: vi.fn(() => ({
+    channel_id: '',
+    rule_name: '',
+    days_of_week: [],
+    start_date: new Date('2024-01-01'),
+    end_date: null,
+    start_time: '08:00',
+    end_time: '09:00',
+  })),
+  getSingleFormDefaults: vi.fn(() => ({
+    channel_id: 'ch-1',
+    start_time: new Date('2024-06-01T10:00:00'),
+    end_time: new Date('2024-06-01T11:00:00'),
+  })),
+  recurringFormValidators: {},
+  singleFormValidators: {},
+  timeChange: vi.fn((fn) => (e) => fn(e.target.value)),
+  updateRecording: vi.fn(),
+}));
+
+// ── @mantine/form ──────────────────────────────────────────────────────────────
+vi.mock('@mantine/form', () => ({
+  useForm: vi.fn(({ initialValues }) => {
+    const values = { ...initialValues };
+    return {
+      values,
+      key: vi.fn((k) => k),
+      getInputProps: vi.fn((k) => ({ name: k, value: values[k] ?? '', onChange: vi.fn() })),
+      onSubmit: vi.fn((handler) => (e) => { e?.preventDefault?.(); return handler(values); }),
+      reset: vi.fn(),
+      setValues: vi.fn((newVals) => Object.assign(values, newVals)),
+      setFieldValue: vi.fn((k, v) => { values[k] = v; }),
+      validateField: vi.fn(),
+    };
+  }),
+}));
+
+// ── @mantine/core ──────────────────────────────────────────────────────────────
+vi.mock('@mantine/core', () => ({
+  Alert: ({ children, title }) => (
+    <div data-testid="alert">
+      <span data-testid="alert-title">{title}</span>
+      {children}
+    </div>
+  ),
+  Button: ({ children, onClick, loading, type }) => (
+    <button type={type} onClick={onClick} data-loading={loading} disabled={loading}>
+      {children}
+    </button>
+  ),
+  Group: ({ children }) => <div>{children}</div>,
+  Loader: ({ size, color }) => <span data-testid="loader" data-size={size} data-color={color} />,
+  Modal: ({ children, opened, onClose, title }) =>
+    opened ? (
+      <div data-testid="modal">
+        <div data-testid="modal-title">{title}</div>
+        <button data-testid="modal-close" onClick={onClose}>×</button>
+        {children}
+      </div>
+    ) : null,
+  MultiSelect: ({ label, placeholder, ...props }) => (
+    <div>
+      <label>{label}</label>
+      <input data-testid={`multiselect-${label}`} placeholder={placeholder} {...props} />
+    </div>
+  ),
+  SegmentedControl: ({ value, onChange, data, disabled }) => (
+    <div data-testid="segmented-control">
+      {data.map((item) => (
+        <button
+          key={item.value}
+          data-testid={`mode-${item.value}`}
+          data-active={value === item.value}
+          disabled={disabled}
+          onClick={() => onChange(item.value)}
+        >
+          {item.label}
+        </button>
+      ))}
+    </div>
+  ),
+  Select: ({ label, disabled, rightSection, data, ...props }) => (
+    <div>
+      <label>{label}</label>
+      {rightSection}
+      <select data-testid={`select-${label}`} disabled={disabled} {...props}>
+        {(data ?? []).map((opt) => (
+          <option key={opt.value} value={opt.value}>{opt.label}</option>
+        ))}
+      </select>
+    </div>
+  ),
+  Stack: ({ children }) => <div>{children}</div>,
+  TextInput: ({ label, placeholder, ...props }) => (
+    <div>
+      <label>{label}</label>
+      <input data-testid={`textinput-${label}`} placeholder={placeholder} {...props} />
+    </div>
+  ),
+}));
+
+// ── @mantine/dates ─────────────────────────────────────────────────────────────
+vi.mock('@mantine/dates', () => ({
+  DatePickerInput: ({ label, value, onChange }) => (
+    <div>
+      <label>{label}</label>
+      <input
+        data-testid={`datepicker-${label}`}
+        value={value ? value.toISOString?.() ?? value : ''}
+        onChange={(e) => onChange(e.target.value ? new Date(e.target.value) : null)}
+      />
+    </div>
+  ),
+  DateTimePicker: ({ label, ...props }) => (
+    <div>
+      <label>{label}</label>
+      <input data-testid={`datetimepicker-${label}`} {...props} />
+    </div>
+  ),
+  TimeInput: ({ label, value, onChange, onBlur }) => (
+    <div>
+      <label>{label}</label>
+      <input
+        data-testid={`timeinput-${label}`}
+        value={value ?? ''}
+        onChange={onChange}
+        onBlur={onBlur}
+      />
+    </div>
+  ),
+}));
+
+// ── lucide-react ───────────────────────────────────────────────────────────────
+vi.mock('lucide-react', () => ({
+  CircleAlert: () => <svg data-testid="icon-circle-alert" />,
+}));
+
+// ── Imports after mocks ────────────────────────────────────────────────────────
+import useChannelsStore from '../../../store/channels';
+import { showNotification } from '../../../utils/notificationUtils.js';
+import * as RecordingUtils from '../../../utils/forms/RecordingUtils.js';
+
+const setupStoreMock = () => {
+  const mockFetchRecordings = vi.fn().mockResolvedValue(undefined);
+  const mockFetchRecurringRules = vi.fn().mockResolvedValue(undefined);
+
+  vi.mocked(useChannelsStore).mockImplementation((sel) =>
+    sel({ fetchRecordings: mockFetchRecordings, fetchRecurringRules: mockFetchRecurringRules })
+  );
+
+  return { mockFetchRecordings, mockFetchRecurringRules };
+};
+
+const makeRecording = (overrides = {}) => ({
+  id: 'rec-1',
+  start_time: '2024-06-01T10:00:00Z',
+  end_time: '2024-06-01T11:00:00Z',
+  custom_properties: { program: { title: 'Test Show' } },
+  ...overrides,
+});
+
+const makeChannel = () => ({ id: 'ch-1', name: 'HBO', channel_number: 501 });
+
+describe('RecordingModal', () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+    vi.mocked(RecordingUtils.getChannelsSummary).mockResolvedValue([
+      { id: 'ch-1', name: 'HBO', channel_number: 501 },
+    ]);
+    vi.mocked(RecordingUtils.createRecording).mockResolvedValue(undefined);
+    vi.mocked(RecordingUtils.updateRecording).mockResolvedValue(undefined);
+    vi.mocked(RecordingUtils.createRecurringRule).mockResolvedValue(undefined);
+    setupStoreMock();
+  });
+
+  // ── Visibility ─────────────────────────────────────────────────────────────
+
+  describe('visibility', () => {
+    it('renders the modal when isOpen is true', () => {
+      render(<RecordingModal isOpen onClose={vi.fn()} />);
+      expect(screen.getByTestId('modal')).toBeInTheDocument();
+    });
+
+    it('does not render when isOpen is false', () => {
+      render(<RecordingModal isOpen={false} onClose={vi.fn()} />);
+      expect(screen.queryByTestId('modal')).not.toBeInTheDocument();
+    });
+  });
+
+  // ── Alert ──────────────────────────────────────────────────────────────────
+
+  describe('scheduling conflict alert', () => {
+    it('renders the scheduling conflicts alert', () => {
+      render(<RecordingModal isOpen onClose={vi.fn()} />);
+      expect(screen.getByTestId('alert')).toBeInTheDocument();
+      expect(screen.getByTestId('alert-title')).toHaveTextContent('Scheduling Conflicts');
+    });
+  });
+
+  // ── Mode switching ─────────────────────────────────────────────────────────
+
+  describe('mode switching', () => {
+    it('defaults to "single" mode', () => {
+      render(<RecordingModal isOpen onClose={vi.fn()} />);
+      expect(screen.getByTestId('mode-single')).toHaveAttribute('data-active', 'true');
+    });
+
+    it('switches to recurring mode when Recurring button clicked', () => {
+      render(<RecordingModal isOpen onClose={vi.fn()} />);
+      fireEvent.click(screen.getByTestId('mode-recurring'));
+      expect(screen.getByTestId('mode-recurring')).toHaveAttribute('data-active', 'true');
+    });
+
+    it('shows DateTimePicker fields in single mode', () => {
+      render(<RecordingModal isOpen onClose={vi.fn()} />);
+      expect(screen.getByTestId('datetimepicker-Start')).toBeInTheDocument();
+      expect(screen.getByTestId('datetimepicker-End')).toBeInTheDocument();
+    });
+
+    it('shows recurring fields when in recurring mode', () => {
+      render(<RecordingModal isOpen onClose={vi.fn()} />);
+      fireEvent.click(screen.getByTestId('mode-recurring'));
+      expect(screen.getByTestId('textinput-Rule name')).toBeInTheDocument();
+      expect(screen.getByTestId('timeinput-Start time')).toBeInTheDocument();
+      expect(screen.getByTestId('timeinput-End time')).toBeInTheDocument();
+    });
+
+    it('disables mode toggle when editing an existing recording', () => {
+      render(<RecordingModal isOpen onClose={vi.fn()} recording={makeRecording()} />);
+      expect(screen.getByTestId('mode-single')).toBeDisabled();
+      expect(screen.getByTestId('mode-recurring')).toBeDisabled();
+    });
+
+    it('shows "Schedule Recording" submit button in single mode', () => {
+      render(<RecordingModal isOpen onClose={vi.fn()} />);
+      expect(screen.getByText('Schedule Recording')).toBeInTheDocument();
+    });
+
+    it('shows "Save Rule" submit button in recurring mode', () => {
+      render(<RecordingModal isOpen onClose={vi.fn()} />);
+      fireEvent.click(screen.getByTestId('mode-recurring'));
+      expect(screen.getByText('Save Rule')).toBeInTheDocument();
+    });
+  });
+
+  // ── Channel loading ────────────────────────────────────────────────────────
+
+  describe('channel loading', () => {
+    it('calls getChannelsSummary when modal opens', async () => {
+      render(<RecordingModal isOpen onClose={vi.fn()} />);
+      await waitFor(() => {
+        expect(RecordingUtils.getChannelsSummary).toHaveBeenCalled();
+      });
+    });
+
+    it('calls sortedChannelOptions with loaded channels', async () => {
+      const channels = [{ id: 'ch-1', name: 'HBO', channel_number: 501 }];
+      vi.mocked(RecordingUtils.getChannelsSummary).mockResolvedValue(channels);
+      render(<RecordingModal isOpen onClose={vi.fn()} />);
+      await waitFor(() => {
+        expect(RecordingUtils.sortedChannelOptions).toHaveBeenCalledWith(
+          channels,
+          RecordingUtils.numberedChannelLabel
+        );
+      });
+    });
+
+    it('calls sortedChannelOptions with [] when getChannelsSummary rejects', async () => {
+      vi.mocked(RecordingUtils.getChannelsSummary).mockRejectedValue(new Error('fail'));
+      render(<RecordingModal isOpen onClose={vi.fn()} />);
+      await waitFor(() => {
+        expect(RecordingUtils.sortedChannelOptions).toHaveBeenCalledWith(
+          [],
+          RecordingUtils.numberedChannelLabel
+        );
+      });
+    });
+
+    it('does not load channels when modal is closed', () => {
+      render(<RecordingModal isOpen={false} onClose={vi.fn()} />);
+      expect(RecordingUtils.getChannelsSummary).not.toHaveBeenCalled();
+    });
+  });
+
+  // ── Single form submit (create) ────────────────────────────────────────────
+
+  describe('single mode – create recording', () => {
+    it('calls buildSinglePayload with form values on submit', async () => {
+      render(<RecordingModal isOpen onClose={vi.fn()} />);
+      fireEvent.submit(screen.getByText('Schedule Recording').closest('form'));
+      await waitFor(() => {
+        expect(RecordingUtils.buildSinglePayload).toHaveBeenCalled();
+      });
+    });
+
+    it('calls createRecording when no existing recording', async () => {
+      render(<RecordingModal isOpen onClose={vi.fn()} />);
+      fireEvent.submit(screen.getByText('Schedule Recording').closest('form'));
+      await waitFor(() => {
+        expect(RecordingUtils.createRecording).toHaveBeenCalled();
+      });
+    });
+
+    it('shows "Recording scheduled" notification after successful create', async () => {
+      render(<RecordingModal isOpen onClose={vi.fn()} />);
+      fireEvent.submit(screen.getByText('Schedule Recording').closest('form'));
+      await waitFor(() => {
+        expect(showNotification).toHaveBeenCalledWith(
+          expect.objectContaining({ title: 'Recording scheduled', color: 'green' })
+        );
+      });
+    });
+
+    it('calls fetchRecordings after successful create', async () => {
+      const { mockFetchRecordings } = setupStoreMock();
+      render(<RecordingModal isOpen onClose={vi.fn()} />);
+      fireEvent.submit(screen.getByText('Schedule Recording').closest('form'));
+      await waitFor(() => {
+        expect(mockFetchRecordings).toHaveBeenCalled();
+      });
+    });
+
+    it('calls onClose after successful create', async () => {
+      const onClose = vi.fn();
+      render(<RecordingModal isOpen onClose={onClose} />);
+      fireEvent.submit(screen.getByText('Schedule Recording').closest('form'));
+      await waitFor(() => {
+        expect(onClose).toHaveBeenCalled();
+      });
+    });
+
+    it('does not call showNotification when createRecording throws', async () => {
+      vi.mocked(RecordingUtils.createRecording).mockRejectedValue(new Error('fail'));
+      render(<RecordingModal isOpen onClose={vi.fn()} />);
+      fireEvent.submit(screen.getByText('Schedule Recording').closest('form'));
+      await waitFor(() => {
+        expect(showNotification).not.toHaveBeenCalled();
+      });
+    });
+  });
+
+  // ── Single form submit (update) ────────────────────────────────────────────
+
+  describe('single mode – update recording', () => {
+    it('calls updateRecording when editing an existing recording', async () => {
+      render(
+        <RecordingModal isOpen onClose={vi.fn()} recording={makeRecording()} />
+      );
+      fireEvent.submit(screen.getByText('Schedule Recording').closest('form'));
+      await waitFor(() => {
+        expect(RecordingUtils.updateRecording).toHaveBeenCalledWith(
+          'rec-1',
+          expect.anything()
+        );
+      });
+    });
+
+    it('does not call createRecording when updating', async () => {
+      render(
+        <RecordingModal isOpen onClose={vi.fn()} recording={makeRecording()} />
+      );
+      fireEvent.submit(screen.getByText('Schedule Recording').closest('form'));
+      await waitFor(() => {
+        expect(RecordingUtils.createRecording).not.toHaveBeenCalled();
+      });
+    });
+
+    it('shows "Recording updated" notification after successful update', async () => {
+      render(
+        <RecordingModal isOpen onClose={vi.fn()} recording={makeRecording()} />
+      );
+      fireEvent.submit(screen.getByText('Schedule Recording').closest('form'));
+      await waitFor(() => {
+        expect(showNotification).toHaveBeenCalledWith(
+          expect.objectContaining({ title: 'Recording updated', color: 'green' })
+        );
+      });
+    });
+  });
+
+  // ── Recurring form submit ──────────────────────────────────────────────────
+
+  describe('recurring mode – create rule', () => {
+    it('calls buildRecurringPayload with form values on submit', async () => {
+      render(<RecordingModal isOpen onClose={vi.fn()} />);
+      fireEvent.click(screen.getByTestId('mode-recurring'));
+      fireEvent.submit(screen.getByText('Save Rule').closest('form'));
+      await waitFor(() => {
+        expect(RecordingUtils.buildRecurringPayload).toHaveBeenCalled();
+      });
+    });
+
+    it('calls createRecurringRule on submit', async () => {
+      render(<RecordingModal isOpen onClose={vi.fn()} />);
+      fireEvent.click(screen.getByTestId('mode-recurring'));
+      fireEvent.submit(screen.getByText('Save Rule').closest('form'));
+      await waitFor(() => {
+        expect(RecordingUtils.createRecurringRule).toHaveBeenCalled();
+      });
+    });
+
+    it('calls fetchRecurringRules and fetchRecordings on success', async () => {
+      const { mockFetchRecurringRules, mockFetchRecordings } = setupStoreMock();
+      render(<RecordingModal isOpen onClose={vi.fn()} />);
+      fireEvent.click(screen.getByTestId('mode-recurring'));
+      fireEvent.submit(screen.getByText('Save Rule').closest('form'));
+      await waitFor(() => {
+        expect(mockFetchRecurringRules).toHaveBeenCalled();
+        expect(mockFetchRecordings).toHaveBeenCalled();
+      });
+    });
+
+    it('shows "Recurring rule saved" notification on success', async () => {
+      render(<RecordingModal isOpen onClose={vi.fn()} />);
+      fireEvent.click(screen.getByTestId('mode-recurring'));
+      fireEvent.submit(screen.getByText('Save Rule').closest('form'));
+      await waitFor(() => {
+        expect(showNotification).toHaveBeenCalledWith(
+          expect.objectContaining({ title: 'Recurring rule saved', color: 'green' })
+        );
+      });
+    });
+
+    it('calls onClose after successful recurring submit', async () => {
+      const onClose = vi.fn();
+      render(<RecordingModal isOpen onClose={onClose} />);
+      fireEvent.click(screen.getByTestId('mode-recurring'));
+      fireEvent.submit(screen.getByText('Save Rule').closest('form'));
+      await waitFor(() => {
+        expect(onClose).toHaveBeenCalled();
+      });
+    });
+
+    it('does not show notification when createRecurringRule throws', async () => {
+      vi.mocked(RecordingUtils.createRecurringRule).mockRejectedValue(new Error('fail'));
+      render(<RecordingModal isOpen onClose={vi.fn()} />);
+      fireEvent.click(screen.getByTestId('mode-recurring'));
+      fireEvent.submit(screen.getByText('Save Rule').closest('form'));
+      await waitFor(() => {
+        expect(showNotification).not.toHaveBeenCalled();
+      });
+    });
+  });
+
+  // ── Form initialization ────────────────────────────────────────────────────
+
+  describe('form initialization', () => {
+    it('calls getSingleFormDefaults with recording and channel when opening with existing recording', () => {
+      const recording = makeRecording();
+      const channel = makeChannel();
+      render(<RecordingModal isOpen recording={recording} channel={channel} onClose={vi.fn()} />);
+      expect(RecordingUtils.getSingleFormDefaults).toHaveBeenCalledWith(recording, channel);
+    });
+
+    it('calls getSingleFormDefaults with null when opening for new recording', () => {
+      render(<RecordingModal isOpen onClose={vi.fn()} />);
+      expect(RecordingUtils.getSingleFormDefaults).toHaveBeenCalledWith(null, null);
+    });
+
+    it('calls getRecurringFormDefaults with channel on open', () => {
+      const channel = makeChannel();
+      render(<RecordingModal isOpen channel={channel} onClose={vi.fn()} />);
+      expect(RecordingUtils.getRecurringFormDefaults).toHaveBeenCalledWith(channel);
+    });
+  });
+
+  // ── Close / reset ──────────────────────────────────────────────────────────
+
+  describe('close and reset', () => {
+    it('calls onClose when modal close button is clicked', () => {
+      const onClose = vi.fn();
+      render(<RecordingModal isOpen onClose={onClose} />);
+      fireEvent.click(screen.getByTestId('modal-close'));
+      expect(onClose).toHaveBeenCalled();
+    });
+  });
+});
\ No newline at end of file
diff --git a/frontend/src/components/forms/__tests__/RecordingDetailsModal.test.jsx b/frontend/src/components/forms/__tests__/RecordingDetailsModal.test.jsx
new file mode 100644
index 00000000..91216ac1
--- /dev/null
+++ b/frontend/src/components/forms/__tests__/RecordingDetailsModal.test.jsx
@@ -0,0 +1,770 @@
+import { render, screen, fireEvent, waitFor } from '@testing-library/react';
+import { describe, it, expect, vi, beforeEach } from 'vitest';
+
+// ── Store mocks ────────────────────────────────────────────────────────────────
+vi.mock('../../../store/channels.jsx', () => ({ default: vi.fn() }));
+vi.mock('../../../store/useVideoStore.jsx', () => ({
+  default: Object.assign(vi.fn(), {
+    getState: vi.fn(() => ({ showVideo: vi.fn() })),
+  }),
+}));
+
+// ── Utility mocks ──────────────────────────────────────────────────────────────
+vi.mock('../../../utils/dateTimeUtils.js', () => ({
+  format: vi.fn(),
+  isAfter: vi.fn(),
+  isBefore: vi.fn(),
+  useDateTimeFormat: vi.fn(),
+  useTimeHelpers: vi.fn(),
+}));
+
+vi.mock('../../../utils/notificationUtils.js', () => ({
+  showNotification: vi.fn(),
+}));
+
+vi.mock('../../../utils/cards/RecordingCardUtils.js', () => ({
+  deleteRecordingById: vi.fn(),
+  getChannelLogoUrl: vi.fn(),
+  getPosterUrl: vi.fn(),
+  getRecordingUrl: vi.fn(),
+  getSeasonLabel: vi.fn(),
+  getShowVideoUrl: vi.fn(),
+  runComSkip: vi.fn(),
+}));
+
+vi.mock('../../../utils/forms/RecordingDetailsModalUtils.js', () => ({
+  getChannel: vi.fn(),
+  getRating: vi.fn(),
+  getStatRows: vi.fn(),
+  getUpcomingEpisodes: vi.fn(),
+  refreshArtwork: vi.fn(),
+  updateRecordingMetadata: vi.fn(),
+}));
+
+vi.mock('../../../images/logo.png', () => ({ default: 'default-logo.png' }));
+
+// ── lucide-react ───────────────────────────────────────────────────────────────
+vi.mock('lucide-react', () => ({
+  Check: () => <svg data-testid="icon-check" />,
+  Pencil: () => <svg data-testid="icon-pencil" />,
+  RefreshCcw: () => <svg data-testid="icon-refresh" />,
+  X: () => <svg data-testid="icon-x" />,
+}));
+
+// ── @mantine/core ──────────────────────────────────────────────────────────────
+vi.mock('@mantine/core', () => ({
+  ActionIcon: ({ children, onClick, disabled }) => (
+    <button data-testid="action-icon" onClick={onClick} disabled={disabled}>
+      {children}
+    </button>
+  ),
+  Badge: ({ children, color }) => (
+    <span data-testid="badge" data-color={color}>{children}</span>
+  ),
+  Button: ({ children, onClick, disabled, loading, size, variant, color }) => (
+    <button
+      onClick={onClick}
+      disabled={disabled || loading}
+      data-size={size}
+      data-variant={variant}
+      data-color={color}
+      data-loading={loading}
+    >
+      {children}
+    </button>
+  ),
+  Card: ({ children, onClick, style }) => (
+    <div data-testid="card" onClick={onClick} style={style}>{children}</div>
+  ),
+  Flex: ({ children }) => <div>{children}</div>,
+  Group: ({ children }) => <div>{children}</div>,
+  Image: ({ src, alt, fallbackSrc }) => (
+    <img src={src} alt={alt} data-fallback={fallbackSrc} />
+  ),
+  Modal: ({ children, opened, onClose, title, size }) =>
+    opened ? (
+      <div data-testid="modal">
+        <div data-testid="modal-title">{title}</div>
+        <button data-testid="modal-close" onClick={onClose}>×</button>
+        {children}
+      </div>
+    ) : null,
+  Stack: ({ children }) => <div>{children}</div>,
+  Text: ({ children, size, c, fw, style }) => (
+    <span data-size={size} data-color={c} data-fw={fw} style={style}>{children}</span>
+  ),
+  Textarea: ({ label, value, onChange, placeholder, ...props }) => (
+    <div>
+      <label>{label}</label>
+      <textarea
+        data-testid={`textarea-${label ?? placeholder ?? 'unknown'}`}
+        value={value ?? ''}
+        onChange={onChange}
+        {...props}
+      />
+    </div>
+  ),
+  TextInput: ({ label, value, onChange, placeholder, ...props }) => (
+    <div>
+      <label />
+      <input
+        data-testid={`textinput-${label ?? placeholder ?? 'unknown'}`}
+        value={value}
+        onChange={onChange}
+        placeholder={placeholder}
+        style={props.style}
+      />
+    </div>
+  ),
+}));
+
+// ── Imports after mocks ────────────────────────────────────────────────────────
+import RecordingDetailsModal from '../RecordingDetailsModal';
+import useChannelsStore from '../../../store/channels.jsx';
+import useVideoStore from '../../../store/useVideoStore.jsx';
+import {
+  format,
+  isAfter,
+  isBefore,
+  useDateTimeFormat,
+  useTimeHelpers,
+} from '../../../utils/dateTimeUtils.js';
+import { showNotification } from '../../../utils/notificationUtils.js';
+import * as RecordingCardUtils from '../../../utils/cards/RecordingCardUtils.js';
+import * as RecordingDetailsModalUtils from '../../../utils/forms/RecordingDetailsModalUtils.js';
+import dayjs from 'dayjs';
+
+// ── Helpers ────────────────────────────────────────────────────────────────────
+const PAST = '2020-01-01T10:00:00Z';
+const FUTURE = '2099-01-01T10:00:00Z';
+const NOW = '2024-06-01T12:00:00Z';
+
+const makeMoment = (isoString) => {
+  const d = dayjs(isoString);
+  return {
+    isAfter: (other) => d.isAfter(other?._d ?? other),
+    isBefore: (other) => d.isBefore(other?._d ?? other),
+    format: vi.fn((fmt) => d.format(fmt)),
+    _d: d.toDate(),
+  };
+};
+
+const makeRecording = (overrides = {}) => ({
+  id: 'rec-1',
+  channel: 'ch-1',
+  start_time: PAST,
+  end_time: PAST,
+  _group_count: 1,
+  custom_properties: {
+    status: 'completed',
+    file_url: '/recordings/test.ts',
+    program: {
+      title: 'Test Show',
+      description: 'A test description',
+      sub_title: 'Pilot',
+    },
+    ...overrides.custom_properties,
+  },
+  ...overrides,
+});
+
+const makeChannel = () => ({ id: 'ch-1', name: 'HBO', channel_number: 501 });
+
+const mockShowVideo = vi.fn();
+
+const setupMocks = ({ recording = makeRecording(), now = NOW } = {}) => {
+  const nowMoment = makeMoment(now);
+  const startMoment = makeMoment(recording.start_time);
+  const endMoment = makeMoment(recording.end_time);
+
+  vi.mocked(useTimeHelpers).mockReturnValue({
+    toUserTime: (iso) => {
+      if (iso === recording.start_time) return startMoment;
+      if (iso === recording.end_time) return endMoment;
+      return makeMoment(iso);
+    },
+    userNow: () => nowMoment,
+  });
+
+  vi.mocked(useDateTimeFormat).mockReturnValue({
+    timeFormat: 'HH:mm',
+    dateFormat: 'MM/DD',
+  });
+
+  vi.mocked(format).mockImplementation((moment, fmt) => moment.format(fmt));
+  vi.mocked(isAfter).mockImplementation((a, b) => a.isAfter(b));
+  vi.mocked(isBefore).mockImplementation((a, b) => a.isBefore(b));
+
+  vi.mocked(useChannelsStore).mockImplementation((sel) =>
+    sel({ recordings: [recording] })
+  );
+
+  mockShowVideo.mockReset();
+  vi.mocked(useVideoStore).mockImplementation((sel) =>
+    sel({ showVideo: mockShowVideo })
+  );
+  useVideoStore.getState = vi.fn(() => ({ showVideo: mockShowVideo }));
+
+  vi.mocked(RecordingCardUtils.getPosterUrl).mockReturnValue('/poster.jpg');
+  vi.mocked(RecordingCardUtils.getChannelLogoUrl).mockReturnValue('/logo.png');
+  vi.mocked(RecordingCardUtils.getRecordingUrl).mockReturnValue('/recordings/test.ts');
+  vi.mocked(RecordingCardUtils.getSeasonLabel).mockReturnValue('');
+  vi.mocked(RecordingCardUtils.getShowVideoUrl).mockReturnValue('/live/ch-1');
+
+  vi.mocked(RecordingDetailsModalUtils.getRating).mockReturnValue(null);
+  vi.mocked(RecordingDetailsModalUtils.getStatRows).mockReturnValue([]);
+  vi.mocked(RecordingDetailsModalUtils.getUpcomingEpisodes).mockReturnValue([]);
+  vi.mocked(RecordingDetailsModalUtils.getChannel).mockResolvedValue(null);
+};
+
+const defaultProps = () => ({
+  opened: true,
+  onClose: vi.fn(),
+  recording: makeRecording(),
+  channel: makeChannel(),
+  posterUrl: '/poster.jpg',
+  onWatchLive: vi.fn(),
+  onWatchRecording: vi.fn(),
+  env_mode: 'production',
+  onEdit: vi.fn(),
+});
+
+// ── Tests ──────────────────────────────────────────────────────────────────────
+describe('RecordingDetailsModal', () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+    setupMocks();
+    vi.mocked(RecordingDetailsModalUtils.updateRecordingMetadata).mockResolvedValue(undefined);
+    vi.mocked(RecordingDetailsModalUtils.refreshArtwork).mockResolvedValue(undefined);
+    vi.mocked(RecordingCardUtils.runComSkip).mockResolvedValue(undefined);
+    vi.mocked(RecordingCardUtils.deleteRecordingById).mockResolvedValue(undefined);
+  });
+
+  // ── Visibility ───────────────────────────────────────────────────────────────
+
+  describe('visibility', () => {
+    it('renders the modal when opened is true', () => {
+      render(<RecordingDetailsModal {...defaultProps()} />);
+      expect(screen.getByTestId('modal')).toBeInTheDocument();
+    });
+
+    it('does not render when opened is false', () => {
+      render(<RecordingDetailsModal {...defaultProps()} opened={false} />);
+      expect(screen.queryByTestId('modal')).not.toBeInTheDocument();
+    });
+
+    it('returns null when recording is not provided', () => {
+      const { container } = render(
+        <RecordingDetailsModal {...defaultProps()} recording={null} />
+      );
+      expect(container.firstChild).toBeNull();
+    });
+
+    it('calls onClose when modal close button is clicked', () => {
+      const onClose = vi.fn();
+      render(<RecordingDetailsModal {...defaultProps()} onClose={onClose} />);
+      fireEvent.click(screen.getByTestId('modal-close'));
+      expect(onClose).toHaveBeenCalled();
+    });
+  });
+
+  // ── Content rendering ────────────────────────────────────────────────────────
+
+  describe('content rendering', () => {
+    it('renders the recording title', () => {
+      render(<RecordingDetailsModal {...defaultProps()} />);
+      expect(screen.getByText(/Test Show/i)).toBeInTheDocument();
+    });
+
+    it('renders "Custom Recording" when no program title', () => {
+      const recording = makeRecording({
+        custom_properties: { status: 'completed', program: {} },
+      });
+      setupMocks({ recording });
+      render(
+        <RecordingDetailsModal {...defaultProps()} recording={recording} />
+      );
+      expect(screen.getByText('Custom Recording')).toBeInTheDocument();
+    });
+
+    it('renders the description', () => {
+      render(<RecordingDetailsModal {...defaultProps()} />);
+      expect(screen.getByText('A test description')).toBeInTheDocument();
+    });
+
+    it('renders the poster image', () => {
+      render(<RecordingDetailsModal {...defaultProps()} />);
+      expect(screen.getByAltText('Test Show')).toHaveAttribute('src', '/poster.jpg');
+    });
+
+    it('renders the season/episode label when present', () => {
+      const seriesRecording = makeRecording({ _group_count: 2 });
+      const mockEpisode = makeRecording({ id: 'ep-1', _group_count: 1 });
+
+      vi.mocked(RecordingDetailsModalUtils.getUpcomingEpisodes).mockReturnValue([mockEpisode]);
+      vi.mocked(RecordingCardUtils.getSeasonLabel).mockReturnValue('S01E02');
+
+      render(
+        <RecordingDetailsModal
+          {...defaultProps()}
+          recording={seriesRecording}
+        />
+      );
+      expect(screen.getByText('S01E02')).toBeInTheDocument();
+    });
+
+    it('renders rating when present', () => {
+      vi.mocked(RecordingDetailsModalUtils.getRating).mockReturnValue('TV-MA');
+      render(<RecordingDetailsModal {...defaultProps()} />);
+      expect(screen.getByText('TV-MA')).toBeInTheDocument();
+    });
+
+    it('renders stat rows when available', () => {
+      vi.mocked(RecordingDetailsModalUtils.getStatRows).mockReturnValue([
+        ['Video Codec', 'H264'],
+        ['Audio Codec', 'AAC'],
+      ]);
+      render(<RecordingDetailsModal {...defaultProps()} />);
+      expect(screen.getByText('Stream Stats')).toBeInTheDocument();
+      expect(screen.getByText('Video Codec')).toBeInTheDocument();
+      expect(screen.getByText('H264')).toBeInTheDocument();
+    });
+  });
+
+  // ── Watch buttons ────────────────────────────────────────────────────────────
+
+  describe('Watch button', () => {
+    it('renders Watch button for completed recording', () => {
+      render(<RecordingDetailsModal {...defaultProps()} />);
+      expect(screen.getByText('Watch')).toBeInTheDocument();
+    });
+
+    it('calls onWatchRecording when Watch is clicked', () => {
+      const onWatchRecording = vi.fn();
+      render(
+        <RecordingDetailsModal
+          {...defaultProps()}
+          onWatchRecording={onWatchRecording}
+        />
+      );
+      fireEvent.click(screen.getByText('Watch'));
+      expect(onWatchRecording).toHaveBeenCalled();
+    });
+
+    it('Watch button is disabled when no file_url', () => {
+      const recording = makeRecording({
+        custom_properties: {
+          status: 'completed',
+          program: { title: 'Test Show' },
+        },
+      });
+      setupMocks({ recording });
+      render(
+        <RecordingDetailsModal {...defaultProps()} recording={recording} />
+      );
+      expect(screen.getByText('Watch')).toBeDisabled();
+    });
+  });
+
+  describe('Watch Live button', () => {
+    it('renders Watch Live button for in-progress recording', () => {
+      const recording = makeRecording({
+        start_time: PAST,
+        end_time: FUTURE,
+        custom_properties: {
+          status: 'recording',
+          file_url: '/f.ts',
+          program: { title: 'Live Show' },
+        },
+      });
+      setupMocks({ recording });
+      render(
+        <RecordingDetailsModal {...defaultProps()} recording={recording} />
+      );
+      expect(screen.getByText('Watch Live')).toBeInTheDocument();
+    });
+
+    it('calls onWatchLive when Watch Live is clicked', () => {
+      const recording = makeRecording({
+        start_time: PAST,
+        end_time: FUTURE,
+        custom_properties: {
+          status: 'recording',
+          file_url: '/f.ts',
+          program: { title: 'Live Show' },
+        },
+      });
+      setupMocks({ recording });
+      const onWatchLive = vi.fn();
+      render(
+        <RecordingDetailsModal
+          {...defaultProps()}
+          recording={recording}
+          onWatchLive={onWatchLive}
+        />
+      );
+      fireEvent.click(screen.getByText('Watch Live'));
+      expect(onWatchLive).toHaveBeenCalled();
+    });
+  });
+
+  // ── Edit button ──────────────────────────────────────────────────────────────
+
+  describe('Edit button', () => {
+    it('renders the Edit button', () => {
+      const futureRecording = makeRecording({ start_time: FUTURE, end_time: FUTURE });
+      setupMocks({ recording: futureRecording });
+      render(
+        <RecordingDetailsModal
+          {...defaultProps()}
+          recording={futureRecording}
+        />
+      );
+      expect(screen.getByText('Edit')).toBeInTheDocument();
+    });
+
+    it('calls onEdit when Edit is clicked', () => {
+      const futureRecording = makeRecording({ start_time: FUTURE, end_time: FUTURE });
+      setupMocks({ recording: futureRecording });
+      const onEdit = vi.fn();
+      render(
+        <RecordingDetailsModal
+          {...defaultProps()}
+          recording={futureRecording}
+          onEdit={onEdit}
+        />
+      );
+      fireEvent.click(screen.getByText('Edit'));
+      expect(onEdit).toHaveBeenCalledWith(futureRecording);
+    });
+  });
+
+  // ── Inline editing ───────────────────────────────────────────────────────────
+
+  describe('inline metadata editing', () => {
+    it('shows edit inputs when pencil icon is clicked', () => {
+      render(<RecordingDetailsModal {...defaultProps()} />);
+      fireEvent.click(screen.getByTestId('icon-pencil').closest('button'));
+      expect(screen.getByTestId('textinput-Recording title')).toBeInTheDocument();
+    });
+
+    it('pre-fills title input with current title', () => {
+      render(<RecordingDetailsModal {...defaultProps()} />);
+      fireEvent.click(screen.getByTestId('icon-pencil').closest('button'));
+      expect(screen.getByTestId('textinput-Recording title')).toHaveValue('Test Show');
+    });
+
+    it('pre-fills description input with current description', () => {
+      render(<RecordingDetailsModal {...defaultProps()} />);
+      fireEvent.click(screen.getByTestId('icon-pencil').closest('button'));
+      expect(screen.getByTestId('textarea-Description (optional)')).toHaveValue('A test description');
+    });
+
+    it('cancels editing when X icon is clicked', () => {
+      render(<RecordingDetailsModal {...defaultProps()} />);
+      fireEvent.click(screen.getByTestId('icon-pencil').closest('button'));
+      expect(screen.getByTestId('textinput-Recording title')).toBeInTheDocument();
+      fireEvent.click(screen.getByTestId('icon-x').closest('button'));
+      expect(screen.queryByTestId('textinput-Recording title')).not.toBeInTheDocument();
+    });
+
+    it('calls updateRecordingMetadata with new title and description on save', async () => {
+      render(<RecordingDetailsModal {...defaultProps()} />);
+      fireEvent.click(screen.getByTestId('icon-pencil').closest('button'));
+
+      fireEvent.change(screen.getByTestId('textinput-Recording title'), {
+        target: { value: 'New Title' },
+      });
+      fireEvent.change(screen.getByTestId('textarea-Description (optional)'), {
+        target: { value: 'New Description' },
+      });
+      fireEvent.click(screen.getByTestId('icon-check').closest('button'));
+
+      await waitFor(() => {
+        expect(
+          RecordingDetailsModalUtils.updateRecordingMetadata
+        ).toHaveBeenCalledWith(makeRecording(), 'New Title', 'New Description');
+      });
+    });
+
+    it('shows saved title optimistically after save', async () => {
+      render(<RecordingDetailsModal {...defaultProps()} />);
+      fireEvent.click(screen.getByTestId('icon-pencil').closest('button'));
+      fireEvent.change(screen.getByTestId('textinput-Recording title'), {
+        target: { value: 'Updated Title' },
+      });
+      fireEvent.click(screen.getByTestId('icon-check').closest('button'));
+
+      await waitFor(() => {
+        expect(screen.getByText('Updated Title')).toBeInTheDocument();
+      });
+    });
+
+    it('shows success notification after save', async () => {
+      render(<RecordingDetailsModal {...defaultProps()} />);
+      fireEvent.click(screen.getByTestId('icon-pencil').closest('button'));
+      fireEvent.click(screen.getByTestId('icon-check').closest('button'));
+
+      await waitFor(() => {
+        expect(showNotification).toHaveBeenCalledWith(
+          expect.objectContaining({ color: 'green' })
+        );
+      });
+    });
+
+    it('does not show notification when updateRecordingMetadata throws', async () => {
+      vi.mocked(
+        RecordingDetailsModalUtils.updateRecordingMetadata
+      ).mockRejectedValue(new Error('fail'));
+      render(<RecordingDetailsModal {...defaultProps()} />);
+      fireEvent.click(screen.getByTestId('icon-pencil').closest('button'));
+      fireEvent.click(screen.getByTestId('icon-check').closest('button'));
+
+      await waitFor(() => {
+        expect(showNotification).not.toHaveBeenCalled();
+      });
+    });
+
+    it('uses "Custom Recording" when title is cleared on save', async () => {
+      render(<RecordingDetailsModal {...defaultProps()} />);
+      fireEvent.click(screen.getByTestId('icon-pencil').closest('button'));
+      fireEvent.change(screen.getByTestId('textinput-Recording title'), {
+        target: { value: '' },
+      });
+      fireEvent.click(screen.getByTestId('icon-check').closest('button'));
+
+      await waitFor(() => {
+        expect(screen.getByText('Custom Recording')).toBeInTheDocument();
+      });
+    });
+  });
+
+  // ── Refresh artwork ──────────────────────────────────────────────────────────
+
+  describe('refresh artwork', () => {
+    it('calls refreshArtwork with recording id on click', async () => {
+      render(<RecordingDetailsModal {...defaultProps()} />);
+      fireEvent.click(screen.getByText('Refresh artwork'));
+
+      await waitFor(() => {
+        expect(RecordingDetailsModalUtils.refreshArtwork).toHaveBeenCalledWith(
+          'rec-1'
+        );
+      });
+    });
+
+    it('shows success notification after refreshArtwork', async () => {
+      render(<RecordingDetailsModal {...defaultProps()} />);
+      fireEvent.click(screen.getByText('Refresh artwork'));
+
+      await waitFor(() => {
+        expect(showNotification).toHaveBeenCalledWith(
+          expect.objectContaining({ color: 'blue.5' })
+        );
+      });
+    });
+
+    it('does not show notification when refreshArtwork throws', async () => {
+      vi.mocked(RecordingDetailsModalUtils.refreshArtwork).mockRejectedValue(
+        new Error('fail')
+      );
+      render(<RecordingDetailsModal {...defaultProps()} />);
+      fireEvent.click(screen.getByText('Refresh artwork'));
+
+      await waitFor(() => {
+        expect(showNotification).not.toHaveBeenCalled();
+      });
+    });
+  });
+
+  // ── ComSkip ──────────────────────────────────────────────────────────────────
+
+  describe('run comskip', () => {
+    it('calls runComSkip with the recording', async () => {
+      render(<RecordingDetailsModal {...defaultProps()} />);
+      fireEvent.click(screen.getByText('Remove commercials'));
+
+      await waitFor(() => {
+        expect(RecordingCardUtils.runComSkip).toHaveBeenCalledWith(
+          makeRecording()
+        );
+      });
+    });
+
+    it('shows success notification after runComSkip', async () => {
+      render(<RecordingDetailsModal {...defaultProps()} />);
+      fireEvent.click(screen.getByText('Remove commercials'));
+
+      await waitFor(() => {
+        expect(showNotification).toHaveBeenCalledWith(
+          expect.objectContaining({ color: expect.any(String) })
+        );
+      });
+    });
+
+    it('does not show notification when runComSkip throws', async () => {
+      vi.mocked(RecordingCardUtils.runComSkip).mockRejectedValue(
+        new Error('fail')
+      );
+      render(<RecordingDetailsModal {...defaultProps()} />);
+      fireEvent.click(screen.getByText('Remove commercials'));
+
+      await waitFor(() => {
+        expect(showNotification).not.toHaveBeenCalled();
+      });
+    });
+
+    it('does not show Remove commercials when comskip is completed', () => {
+      const recording = makeRecording({
+        custom_properties: {
+          status: 'completed',
+          file_url: '/f.ts',
+          comskip: { status: 'completed' },
+          program: { title: 'Test Show' },
+        },
+      });
+      setupMocks({ recording });
+      render(
+        <RecordingDetailsModal {...defaultProps()} recording={recording} />
+      );
+      expect(screen.queryByText('Remove commercials')).not.toBeInTheDocument();
+    });
+  });
+
+  // ── Series / episodes ────────────────────────────────────────────────────────
+
+  describe('series group', () => {
+    const makeSeriesRecording = () =>
+      makeRecording({
+        _group_count: 3,
+        custom_properties: {
+          status: 'scheduled',
+          program: { title: 'Series Show', tvg_id: 'series-1' },
+        },
+        start_time: FUTURE,
+        end_time: FUTURE,
+      });
+
+    const makeEpisode = (id = 'ep-1') => ({
+      id,
+      channel: 'ch-1',
+      start_time: FUTURE,
+      end_time: FUTURE,
+      custom_properties: {
+        status: 'scheduled',
+        program: { title: 'Episode', sub_title: `Sub ${id}` },
+      },
+    });
+
+    it('renders upcoming episodes list when isSeriesGroup is true', () => {
+      const recording = makeSeriesRecording();
+      const episode = makeEpisode();
+      setupMocks({ recording });
+      vi.mocked(RecordingDetailsModalUtils.getUpcomingEpisodes).mockReturnValue(
+        [episode]
+      );
+      render(
+        <RecordingDetailsModal {...defaultProps()} recording={recording} />
+      );
+      expect(screen.getByText('Sub ep-1')).toBeInTheDocument();
+    });
+
+    it('shows "No upcoming episodes" when episode list is empty for series', () => {
+      const recording = makeSeriesRecording();
+      setupMocks({ recording });
+      vi.mocked(RecordingDetailsModalUtils.getUpcomingEpisodes).mockReturnValue(
+        []
+      );
+      render(
+        <RecordingDetailsModal {...defaultProps()} recording={recording} />
+      );
+      expect(screen.getByText(/no upcoming episodes/i)).toBeInTheDocument();
+    });
+
+    it('opens child modal when an episode card is clicked', async () => {
+      const recording = makeSeriesRecording();
+      const episode = makeEpisode();
+      setupMocks({ recording });
+      vi.mocked(RecordingDetailsModalUtils.getUpcomingEpisodes).mockReturnValue(
+        [episode]
+      );
+      render(
+        <RecordingDetailsModal {...defaultProps()} recording={recording} />
+      );
+      const episodeCards = screen.getAllByTestId('card');
+      fireEvent.click(episodeCards[episodeCards.length - 1]);
+      await waitFor(() => {
+        expect(screen.getAllByTestId('modal').length).toBeGreaterThanOrEqual(1);
+      });
+    });
+
+    it('calls deleteRecordingById when episode remove is clicked', async () => {
+      const recording = makeSeriesRecording();
+      const episode = makeEpisode();
+      setupMocks({ recording });
+      vi.mocked(RecordingDetailsModalUtils.getUpcomingEpisodes).mockReturnValue(
+        [episode]
+      );
+      render(
+        <RecordingDetailsModal {...defaultProps()} recording={recording} />
+      );
+      fireEvent.click(screen.getByText('Remove'));
+      await waitFor(() => {
+        expect(RecordingCardUtils.deleteRecordingById).toHaveBeenCalledWith(
+          'ep-1'
+        );
+      });
+    });
+  });
+
+  // ── safeRecording merging ────────────────────────────────────────────────────
+
+  describe('safeRecording store merge', () => {
+    it('picks updated recording from store while preserving _group_count', () => {
+      const original = makeRecording({ _group_count: 3 });
+      const storeVersion = {
+        ...makeRecording(),
+        id: 'rec-1',
+        custom_properties: {
+          ...makeRecording().custom_properties,
+          program: { title: 'Updated Title' },
+        },
+      };
+      vi.mocked(useChannelsStore).mockImplementation((sel) =>
+        sel({ recordings: [storeVersion] })
+      );
+      render(
+        <RecordingDetailsModal {...defaultProps()} recording={original} />
+      );
+      expect(screen.getByText(/Updated Title/i)).toBeInTheDocument();
+    });
+  });
+
+  // ── Optimistic state reset ───────────────────────────────────────────────────
+
+  describe('optimistic state reset on recording change', () => {
+    it('resets saved title when recording id changes', async () => {
+      const { rerender } = render(
+        <RecordingDetailsModal {...defaultProps()} />
+      );
+      // Save a new title
+      fireEvent.click(screen.getByTestId('icon-pencil').closest('button'));
+      fireEvent.change(screen.getByTestId('textinput-Recording title'), {
+        target: { value: 'Custom' },
+      });
+      fireEvent.click(screen.getByTestId('icon-check').closest('button'));
+      await waitFor(() => expect(screen.getByText('Custom')).toBeInTheDocument());
+
+      // Switch to a different recording
+      const newRecording = makeRecording({ id: 'rec-2' });
+      setupMocks({ recording: newRecording });
+      rerender(
+        <RecordingDetailsModal
+          {...defaultProps()}
+          recording={newRecording}
+        />
+      );
+      expect(screen.getByText(/Test Show/i)).toBeInTheDocument();
+    });
+  });
+});
\ No newline at end of file
diff --git a/frontend/src/components/forms/__tests__/RecurringRuleModal.test.jsx b/frontend/src/components/forms/__tests__/RecurringRuleModal.test.jsx
new file mode 100644
index 00000000..6bfc8927
--- /dev/null
+++ b/frontend/src/components/forms/__tests__/RecurringRuleModal.test.jsx
@@ -0,0 +1,937 @@
+import { render, screen, fireEvent, waitFor } from '@testing-library/react';
+import { describe, it, expect, vi, beforeEach } from 'vitest';
+
+// ── Store mocks ────────────────────────────────────────────────────────────────
+vi.mock('../../../store/channels.jsx', () => ({ default: vi.fn() }));
+
+// ── Utility mocks ──────────────────────────────────────────────────────────────
+vi.mock('../../../utils/dateTimeUtils.js', () => ({
+  format: vi.fn((moment, fmt) => `formatted-${fmt}`),
+  getNow: vi.fn(() => '2024-06-01T12:00:00Z'),
+  RECURRING_DAY_OPTIONS: [
+    { value: 'mon', label: 'Monday' },
+    { value: 'tue', label: 'Tuesday' },
+    { value: 'wed', label: 'Wednesday' },
+  ],
+  toDate: vi.fn((val) => new Date(val)),
+  toTimeString: vi.fn((val) => val),
+  useDateTimeFormat: vi.fn(),
+  useTimeHelpers: vi.fn(),
+}));
+
+vi.mock('../../../utils/notificationUtils.js', () => ({
+  showNotification: vi.fn(),
+}));
+
+vi.mock('../../../utils/cards/RecordingCardUtils.js', () => ({
+  deleteRecordingById: vi.fn(),
+}));
+
+vi.mock('../../../utils/forms/RecurringRuleModalUtils.js', () => ({
+  deleteRecurringRuleById: vi.fn(),
+  getFormDefaults: vi.fn(),
+  getUpcomingOccurrences: vi.fn(),
+  updateRecurringRule: vi.fn(),
+  updateRecurringRuleEnabled: vi.fn(),
+}));
+
+vi.mock('../../../utils/forms/RecordingUtils.js', () => ({
+  getChannelsSummary: vi.fn(),
+  getRecurringFormDefaults: vi.fn(),
+  recurringFormValidators: {},
+  sortedChannelOptions: vi.fn(() => [{ value: 'ch-1', label: 'HBO' }]),
+}));
+
+// ── @mantine/form ──────────────────────────────────────────────────────────────
+vi.mock('@mantine/form', async () => {
+  const React = await import('react');
+  return {
+    useForm: vi.fn(({ initialValues }) => {
+      const [values, setValuesState] = React.useState({ ...initialValues });
+      return {
+        values,
+        key: vi.fn((k) => k),
+        getInputProps: vi.fn((k) => ({
+          name: k,
+          value: values[k] ?? '',
+          onChange: vi.fn((e) => {
+            const v = e?.currentTarget?.value ?? e?.target?.value ?? e;
+            setValuesState((prev) => ({ ...prev, [k]: v }));
+          }),
+        })),
+        onSubmit: vi.fn(
+          (handler) => (e) => {
+            e?.preventDefault?.();
+            return handler(values);
+          }
+        ),
+        reset: vi.fn(() => setValuesState({ ...initialValues })),
+        setValues: vi.fn((newVals) =>
+          setValuesState((prev) => ({ ...prev, ...newVals }))
+        ),
+        setFieldValue: vi.fn((k, v) =>
+          setValuesState((prev) => ({ ...prev, [k]: v }))
+        ),
+      };
+    }),
+  };
+});
+
+// ── @mantine/core ──────────────────────────────────────────────────────────────
+vi.mock('@mantine/core', () => ({
+  Badge: ({ children, color }) => (
+    <span data-testid="badge" data-color={color}>
+      {children}
+    </span>
+  ),
+  Button: ({ children, onClick, loading, type, variant, color, size, disabled }) => (
+    <button
+      type={type}
+      onClick={onClick}
+      disabled={disabled || loading}
+      data-loading={loading}
+      data-variant={variant}
+      data-color={color}
+      data-size={size}
+    >
+      {children}
+    </button>
+  ),
+  Card: ({ children }) => <div data-testid="occurrence-card">{children}</div>,
+  Group: ({ children }) => <div>{children}</div>,
+  Modal: ({ children, opened, onClose, title }) =>
+    opened ? (
+      <div data-testid="modal">
+        <div data-testid="modal-title">{title}</div>
+        <button data-testid="modal-close" onClick={onClose}>
+          ×
+        </button>
+        {children}
+      </div>
+    ) : null,
+  MultiSelect: ({ label, data, ...props }) => (
+    <div>
+      <label>{label}</label>
+      <select data-testid={`multiselect-${label}`} multiple {...props}>
+        {(data ?? []).map((opt) => (
+          <option key={opt.value} value={opt.value}>
+            {opt.label}
+          </option>
+        ))}
+      </select>
+    </div>
+  ),
+  Select: ({ label, data, ...props }) => (
+    <div>
+      <label>{label}</label>
+      <select data-testid={`select-${label}`} {...props}>
+        {(data ?? []).map((opt) => (
+          <option key={opt.value} value={opt.value}>
+            {opt.label}
+          </option>
+        ))}
+      </select>
+    </div>
+  ),
+  Stack: ({ children }) => <div>{children}</div>,
+  Switch: ({ checked, onChange, label, disabled }) => (
+    <label>
+      <input
+        data-testid="switch"
+        type="checkbox"
+        checked={checked ?? false}
+        disabled={disabled}
+        onChange={(e) => {
+          // Mirror the event shape the component expects: event.currentTarget.checked
+          onChange({ currentTarget: { checked: e.target.checked } });
+        }}
+      />
+      <span>{label}</span>
+    </label>
+  ),
+  Text: ({ children, size, c, fw }) => (
+    <span data-size={size} data-color={c} data-fw={fw}>
+      {children}
+    </span>
+  ),
+  TextInput: ({ label, placeholder, ...props }) => (
+    <div>
+      <label>{label}</label>
+      <input
+        data-testid={`textinput-${label ?? placeholder ?? 'unknown'}`}
+        placeholder={placeholder}
+        {...props}
+      />
+    </div>
+  ),
+}));
+
+// ── @mantine/dates ─────────────────────────────────────────────────────────────
+vi.mock('@mantine/dates', () => ({
+  DatePickerInput: ({ label, value, onChange }) => (
+    <div>
+      <label>{label}</label>
+      <input
+        data-testid={`datepicker-${label}`}
+        value={value ? value.toISOString?.() ?? String(value) : ''}
+        onChange={(e) => onChange(e.target.value ? new Date(e.target.value) : null)}
+      />
+    </div>
+  ),
+  TimeInput: ({ label, value, onChange }) => (
+    <div>
+      <label>{label}</label>
+      <input
+        data-testid={`timeinput-${label}`}
+        value={value ?? ''}
+        onChange={(e) => onChange(e.target.value)}
+      />
+    </div>
+  ),
+}));
+
+// ── Imports after mocks ────────────────────────────────────────────────────────
+import useChannelsStore from '../../../store/channels.jsx';
+import {
+  format,
+  toTimeString,
+  useDateTimeFormat,
+  useTimeHelpers,
+} from '../../../utils/dateTimeUtils.js';
+import { showNotification } from '../../../utils/notificationUtils.js';
+import { deleteRecordingById } from '../../../utils/cards/RecordingCardUtils.js';
+import * as RecurringRuleModalUtils from '../../../utils/forms/RecurringRuleModalUtils.js';
+import * as RecordingUtils from '../../../utils/forms/RecordingUtils.js';
+import { useForm } from '@mantine/form';
+import RecurringRuleModal from '../RecurringRuleModal';
+import dayjs from 'dayjs';
+
+// ── Helpers ────────────────────────────────────────────────────────────────────
+const FUTURE = '2099-01-01T10:00:00Z';
+const NOW = '2024-06-01T12:00:00Z';
+
+const makeMoment = (isoString) => {
+  const d = dayjs(isoString);
+  return {
+    isAfter: (other) => d.isAfter(other?._d ?? other),
+    isBefore: (other) => d.isBefore(other?._d ?? other),
+    format: vi.fn((fmt) => `formatted-${fmt}`),
+    _d: d.toDate(),
+  };
+};
+
+const makeRule = (overrides = {}) => ({
+  id: 'rule-1',
+  name: 'Morning News',
+  channel: 'ch-1',
+  channel_id: 'ch-1',
+  days_of_week: ['mon', 'tue'],
+  start_date: new Date('2024-01-01'),
+  end_date: null,
+  start_time: '08:00',
+  end_time: '09:00',
+  enabled: true,
+  ...overrides,
+});
+
+const makeOccurrence = (id = 'occ-1') => ({
+  id,
+  start_time: FUTURE,
+  end_time: FUTURE,
+  custom_properties: { program: { title: 'Episode' } },
+});
+
+const makeChannel = () => ({ id: 'ch-1', name: 'HBO', channel_number: 501 });
+
+const makeRecording = (overrides = {}) => ({
+  id: 'rec-1',
+  start_time: FUTURE,
+  end_time: FUTURE,
+  custom_properties: { program: { title: 'Morning News' } },
+  ...overrides,
+});
+
+const setupMocks = ({ rule = makeRule(), occurrences = [] } = {}) => {
+  const nowMoment = makeMoment(NOW);
+  const mockFetchRecurringRules = vi.fn().mockResolvedValue(undefined);
+
+  vi.mocked(useChannelsStore).mockImplementation((sel) =>
+    sel({
+      recurringRules: rule ? [rule] : [],
+      fetchRecurringRules: mockFetchRecurringRules,
+      recordings: [],
+    })
+  );
+
+  vi.mocked(useTimeHelpers).mockReturnValue({
+    toUserTime: (iso) => makeMoment(iso),
+    userNow: () => nowMoment,
+  });
+
+  vi.mocked(useDateTimeFormat).mockReturnValue({
+    timeFormat: 'HH:mm',
+    dateFormat: 'MM/DD',
+  });
+
+  vi.mocked(format).mockImplementation((moment, fmt) => `formatted-${fmt}`);
+
+  vi.mocked(RecordingUtils.getRecurringFormDefaults).mockReturnValue({
+    channel_id: '',
+    rule_name: '',
+    days_of_week: [],
+    start_date: new Date('2024-01-01'),
+    end_date: null,
+    start_time: '08:00',
+    end_time: '09:00',
+    enabled: rule?.enabled ?? true,
+  });
+
+  vi.mocked(RecordingUtils.getChannelsSummary).mockResolvedValue([makeChannel()]);
+
+  vi.mocked(RecurringRuleModalUtils.getFormDefaults).mockReturnValue({
+    channel_id: rule?.channel_id ?? '',
+    rule_name: rule?.name ?? '',
+    days_of_week: rule?.days_of_week ?? [],
+    start_date: rule?.start_date ?? new Date('2024-01-01'),
+    end_date: rule?.end_date ?? null,
+    start_time: rule?.start_time ?? '08:00',
+    end_time: rule?.end_time ?? '09:00',
+    enabled: rule?.enabled ?? true,
+  });
+
+  vi.mocked(RecurringRuleModalUtils.getUpcomingOccurrences).mockReturnValue(occurrences);
+  vi.mocked(RecurringRuleModalUtils.updateRecurringRule).mockResolvedValue(undefined);
+  vi.mocked(RecurringRuleModalUtils.updateRecurringRuleEnabled).mockResolvedValue(undefined);
+  vi.mocked(RecurringRuleModalUtils.deleteRecurringRuleById).mockResolvedValue(undefined);
+  vi.mocked(deleteRecordingById).mockResolvedValue(undefined);
+
+  return { mockFetchRecurringRules };
+};
+
+const defaultProps = (overrides = {}) => ({
+  opened: true,
+  onClose: vi.fn(),
+  ruleId: 'rule-1',
+  recording: null,
+  onEditOccurrence: vi.fn(),
+  ...overrides,
+});
+
+// ── Tests ──────────────────────────────────────────────────────────────────────
+describe('RecurringRuleModal', () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+    setupMocks();
+  });
+
+  // ── Visibility ───────────────────────────────────────────────────────────────
+
+  describe('visibility', () => {
+    it('renders the modal when opened is true', () => {
+      render(<RecurringRuleModal {...defaultProps()} />);
+      expect(screen.getByTestId('modal')).toBeInTheDocument();
+    });
+
+    it('does not render when opened is false', () => {
+      render(<RecurringRuleModal {...defaultProps()} opened={false} />);
+      expect(screen.queryByTestId('modal')).not.toBeInTheDocument();
+    });
+
+    it('uses rule name as modal title', () => {
+      render(<RecurringRuleModal {...defaultProps()} />);
+      expect(screen.getByTestId('modal-title')).toHaveTextContent('Morning News');
+    });
+
+    it('falls back to "Recurring Rule" when rule has no name', () => {
+      setupMocks({ rule: makeRule({ name: '' }) });
+      render(<RecurringRuleModal {...defaultProps()} />);
+      expect(screen.getByTestId('modal-title')).toHaveTextContent('Recurring Rule');
+    });
+
+    it('calls onClose when modal close button is clicked', () => {
+      const onClose = vi.fn();
+      render(<RecurringRuleModal {...defaultProps()} onClose={onClose} />);
+      fireEvent.click(screen.getByTestId('modal-close'));
+      expect(onClose).toHaveBeenCalled();
+    });
+  });
+
+  // ── Missing rule fallback ────────────────────────────────────────────────────
+
+  describe('missing rule fallback', () => {
+    beforeEach(() => {
+      setupMocks({ rule: null });
+    });
+
+    it('renders fallback message when rule does not exist', () => {
+      render(<RecurringRuleModal {...defaultProps()} />);
+      expect(
+        screen.getByText('The recurring rule for this recording no longer exists.')
+      ).toBeInTheDocument();
+    });
+
+    it('shows Delete Recording button when sourceRecording is provided', () => {
+      render(
+        <RecurringRuleModal
+          {...defaultProps()}
+          recording={makeRecording()}
+        />
+      );
+      expect(screen.getByText('Delete Recording')).toBeInTheDocument();
+    });
+
+    it('does not show Delete Recording button when sourceRecording is null', () => {
+      render(<RecurringRuleModal {...defaultProps()} recording={null} />);
+      expect(screen.queryByText('Delete Recording')).not.toBeInTheDocument();
+    });
+
+    it('calls deleteRecordingById when Delete Recording is confirmed', async () => {
+      const onClose = vi.fn();
+      render(
+        <RecurringRuleModal
+          {...defaultProps()}
+          onClose={onClose}
+          recording={makeRecording()}
+        />
+      );
+      fireEvent.click(screen.getByText('Delete Recording'));
+      await waitFor(() => {
+        expect(deleteRecordingById).toHaveBeenCalledWith('rec-1');
+      });
+    });
+
+    it('shows "Recording deleted" notification after deleting orphaned recording', async () => {
+      render(
+        <RecurringRuleModal {...defaultProps()} recording={makeRecording()} />
+      );
+      fireEvent.click(screen.getByText('Delete Recording'));
+      await waitFor(() => {
+        expect(showNotification).toHaveBeenCalledWith(
+          expect.objectContaining({ title: 'Recording deleted', color: 'green' })
+        );
+      });
+    });
+
+    it('calls onClose after deleting orphaned recording', async () => {
+      const onClose = vi.fn();
+      render(
+        <RecurringRuleModal
+          {...defaultProps()}
+          onClose={onClose}
+          recording={makeRecording()}
+        />
+      );
+      fireEvent.click(screen.getByText('Delete Recording'));
+      await waitFor(() => {
+        expect(onClose).toHaveBeenCalled();
+      });
+    });
+
+    it('calls onClose when Cancel is clicked in fallback', () => {
+      const onClose = vi.fn();
+      render(
+        <RecurringRuleModal
+          {...defaultProps()}
+          onClose={onClose}
+          recording={makeRecording()}
+        />
+      );
+      fireEvent.click(screen.getByText('Cancel'));
+      expect(onClose).toHaveBeenCalled();
+    });
+
+    it('does not show notification when deleteRecordingById throws', async () => {
+      vi.mocked(deleteRecordingById).mockRejectedValue(new Error('fail'));
+      render(
+        <RecurringRuleModal {...defaultProps()} recording={makeRecording()} />
+      );
+      fireEvent.click(screen.getByText('Delete Recording'));
+      await waitFor(() => {
+        expect(showNotification).not.toHaveBeenCalled();
+      });
+    });
+  });
+
+  // ── Form fields ──────────────────────────────────────────────────────────────
+
+  describe('form fields', () => {
+    it('renders the Channel select', () => {
+      render(<RecurringRuleModal {...defaultProps()} />);
+      expect(screen.getByTestId('select-Channel')).toBeInTheDocument();
+    });
+
+    it('renders the Rule name input', () => {
+      render(<RecurringRuleModal {...defaultProps()} />);
+      expect(screen.getByTestId('textinput-Rule name')).toBeInTheDocument();
+    });
+
+    it('renders the Every (days of week) multiselect', () => {
+      render(<RecurringRuleModal {...defaultProps()} />);
+      expect(screen.getByTestId('multiselect-Every')).toBeInTheDocument();
+    });
+
+    it('renders Start date and End date pickers', () => {
+      render(<RecurringRuleModal {...defaultProps()} />);
+      expect(screen.getByTestId('datepicker-Start date')).toBeInTheDocument();
+      expect(screen.getByTestId('datepicker-End date')).toBeInTheDocument();
+    });
+
+    it('renders Start time and End time inputs', () => {
+      render(<RecurringRuleModal {...defaultProps()} />);
+      expect(screen.getByTestId('timeinput-Start time')).toBeInTheDocument();
+      expect(screen.getByTestId('timeinput-End time')).toBeInTheDocument();
+    });
+
+    it('renders the enabled/paused Switch', () => {
+      render(<RecurringRuleModal {...defaultProps()} />);
+      expect(screen.getByTestId('switch')).toBeInTheDocument();
+    });
+
+    it('switch reflects rule enabled state', () => {
+      render(<RecurringRuleModal {...defaultProps()} />);
+      expect(screen.getByTestId('switch')).toBeChecked();
+    });
+
+    it('switch is unchecked when rule is paused', () => {
+      setupMocks({ rule: makeRule({ enabled: false }) });
+      render(<RecurringRuleModal {...defaultProps()} />);
+      expect(screen.getByTestId('switch')).not.toBeChecked();
+    });
+
+    it('renders channel name in header', () => {
+      render(<RecurringRuleModal {...defaultProps()} />);
+      expect(screen.getByText('HBO')).toBeInTheDocument();
+    });
+
+    it('renders channel number fallback when channel not in allChannels', async () => {
+      vi.mocked(RecordingUtils.getChannelsSummary).mockResolvedValue([]);
+      render(<RecurringRuleModal {...defaultProps()} />);
+      await waitFor(() => {
+        expect(screen.getByText('Channel ch-1')).toBeInTheDocument();
+      });
+    });
+  });
+
+  // ── Channel loading ──────────────────────────────────────────────────────────
+
+  describe('channel loading', () => {
+    it('calls getChannelsSummary when opened', async () => {
+      render(<RecurringRuleModal {...defaultProps()} />);
+      await waitFor(() => {
+        expect(RecordingUtils.getChannelsSummary).toHaveBeenCalled();
+      });
+    });
+
+    it('does not call getChannelsSummary when closed', () => {
+      render(<RecurringRuleModal {...defaultProps()} opened={false} />);
+      expect(RecordingUtils.getChannelsSummary).not.toHaveBeenCalled();
+    });
+
+    it('calls sortedChannelOptions with loaded channels', async () => {
+      render(<RecurringRuleModal {...defaultProps()} />);
+      await waitFor(() => {
+        expect(RecordingUtils.sortedChannelOptions).toHaveBeenCalledWith([
+          makeChannel(),
+        ]);
+      });
+    });
+
+    it('calls sortedChannelOptions with [] when getChannelsSummary rejects', async () => {
+      vi.mocked(RecordingUtils.getChannelsSummary).mockRejectedValue(
+        new Error('fail')
+      );
+      render(<RecurringRuleModal {...defaultProps()} />);
+      await waitFor(() => {
+        expect(RecordingUtils.sortedChannelOptions).toHaveBeenCalledWith([]);
+      });
+    });
+  });
+
+  // ── Form initialization from rule ─────────────────────────────────────────────
+
+  describe('form initialization', () => {
+    it('calls getFormDefaults with rule when opened', () => {
+      render(<RecurringRuleModal {...defaultProps()} />);
+      expect(RecurringRuleModalUtils.getFormDefaults).toHaveBeenCalledWith(
+        makeRule()
+      );
+    });
+
+    it('calls form.setValues with getFormDefaults result', () => {
+      const formMock = vi.mocked(useForm).mock.results[0]?.value;
+      render(<RecurringRuleModal {...defaultProps()} />);
+      expect(formMock?.setValues ?? vi.fn()).toBeDefined();
+    });
+  });
+
+  // ── Save changes ─────────────────────────────────────────────────────────────
+
+  describe('save changes', () => {
+    it('calls updateRecurringRule on form submit', async () => {
+      render(<RecurringRuleModal {...defaultProps()} />);
+      fireEvent.submit(screen.getByText('Save changes').closest('form'));
+      await waitFor(() => {
+        expect(RecurringRuleModalUtils.updateRecurringRule).toHaveBeenCalledWith(
+          'rule-1',
+          expect.any(Object)
+        );
+      });
+    });
+
+    it('calls fetchRecurringRules after save', async () => {
+      const { mockFetchRecurringRules } = setupMocks();
+      render(<RecurringRuleModal {...defaultProps()} />);
+      fireEvent.submit(screen.getByText('Save changes').closest('form'));
+      await waitFor(() => {
+        expect(mockFetchRecurringRules).toHaveBeenCalled();
+      });
+    });
+
+    it('shows "Recurring rule updated" notification on success', async () => {
+      render(<RecurringRuleModal {...defaultProps()} />);
+      fireEvent.submit(screen.getByText('Save changes').closest('form'));
+      await waitFor(() => {
+        expect(showNotification).toHaveBeenCalledWith(
+          expect.objectContaining({
+            title: 'Recurring rule updated',
+            color: 'green',
+          })
+        );
+      });
+    });
+
+    it('calls onClose after successful save', async () => {
+      const onClose = vi.fn();
+      render(<RecurringRuleModal {...defaultProps()} onClose={onClose} />);
+      fireEvent.submit(screen.getByText('Save changes').closest('form'));
+      await waitFor(() => {
+        expect(onClose).toHaveBeenCalled();
+      });
+    });
+
+    it('does not show notification when updateRecurringRule throws', async () => {
+      vi.mocked(RecurringRuleModalUtils.updateRecurringRule).mockRejectedValue(
+        new Error('fail')
+      );
+      render(<RecurringRuleModal {...defaultProps()} />);
+      fireEvent.submit(screen.getByText('Save changes').closest('form'));
+      await waitFor(() => {
+        expect(showNotification).not.toHaveBeenCalled();
+      });
+    });
+
+    it('Save changes button shows loading state while saving', async () => {
+      let resolve;
+      vi.mocked(RecurringRuleModalUtils.updateRecurringRule).mockReturnValue(
+        new Promise((r) => { resolve = r; })
+      );
+      render(<RecurringRuleModal {...defaultProps()} />);
+      fireEvent.submit(screen.getByText('Save changes').closest('form'));
+      await waitFor(() => {
+        expect(screen.getByText('Save changes')).toHaveAttribute('data-loading', 'true');
+      });
+      resolve();
+    });
+  });
+
+  // ── Delete rule ──────────────────────────────────────────────────────────────
+
+  describe('delete rule', () => {
+    it('renders the Delete rule button', () => {
+      render(<RecurringRuleModal {...defaultProps()} />);
+      expect(screen.getByText('Delete rule')).toBeInTheDocument();
+    });
+
+    it('calls deleteRecurringRuleById when Delete rule is clicked', async () => {
+      render(<RecurringRuleModal {...defaultProps()} />);
+      fireEvent.click(screen.getByText('Delete rule'));
+      await waitFor(() => {
+        expect(RecurringRuleModalUtils.deleteRecurringRuleById).toHaveBeenCalledWith(
+          'rule-1'
+        );
+      });
+    });
+
+    it('calls fetchRecurringRules after delete', async () => {
+      const { mockFetchRecurringRules } = setupMocks();
+      render(<RecurringRuleModal {...defaultProps()} />);
+      fireEvent.click(screen.getByText('Delete rule'));
+      await waitFor(() => {
+        expect(mockFetchRecurringRules).toHaveBeenCalled();
+      });
+    });
+
+    it('shows "Recurring rule removed" notification on success', async () => {
+      render(<RecurringRuleModal {...defaultProps()} />);
+      fireEvent.click(screen.getByText('Delete rule'));
+      await waitFor(() => {
+        expect(showNotification).toHaveBeenCalledWith(
+          expect.objectContaining({
+            title: 'Recurring rule removed',
+            color: 'red',
+          })
+        );
+      });
+    });
+
+    it('calls onClose after successful delete', async () => {
+      const onClose = vi.fn();
+      render(<RecurringRuleModal {...defaultProps()} onClose={onClose} />);
+      fireEvent.click(screen.getByText('Delete rule'));
+      await waitFor(() => {
+        expect(onClose).toHaveBeenCalled();
+      });
+    });
+
+    it('does not show notification when deleteRecurringRuleById throws', async () => {
+      vi.mocked(RecurringRuleModalUtils.deleteRecurringRuleById).mockRejectedValue(
+        new Error('fail')
+      );
+      render(<RecurringRuleModal {...defaultProps()} />);
+      fireEvent.click(screen.getByText('Delete rule'));
+      await waitFor(() => {
+        expect(showNotification).not.toHaveBeenCalled();
+      });
+    });
+  });
+
+  // ── Toggle enabled ───────────────────────────────────────────────────────────
+
+  describe('toggle enabled', () => {
+    it('calls updateRecurringRuleEnabled with true when switch is toggled on', async () => {
+      setupMocks({ rule: makeRule({ enabled: false }) });
+      render(<RecurringRuleModal {...defaultProps()} />);
+      const sw = screen.getByTestId('switch');
+      expect(sw).not.toBeChecked();
+      fireEvent.click(sw);
+      await waitFor(() => {
+        expect(
+          RecurringRuleModalUtils.updateRecurringRuleEnabled
+        ).toHaveBeenCalledWith('rule-1', true);
+      });
+    });
+
+    it('calls updateRecurringRuleEnabled with false when switch is toggled off', async () => {
+      render(<RecurringRuleModal {...defaultProps()} />);
+      const sw = screen.getByTestId('switch');
+      expect(sw).toBeChecked();
+      fireEvent.click(sw);
+      await waitFor(() => {
+        expect(
+          RecurringRuleModalUtils.updateRecurringRuleEnabled
+        ).toHaveBeenCalledWith('rule-1', false);
+      });
+    });
+
+    it('shows "Recurring rule enabled" notification when enabling', async () => {
+      setupMocks({ rule: makeRule({ enabled: false }) });
+      render(<RecurringRuleModal {...defaultProps()} />);
+      fireEvent.click(screen.getByTestId('switch'));
+      await waitFor(() => {
+        expect(showNotification).toHaveBeenCalledWith(
+          expect.objectContaining({
+            title: 'Recurring rule enabled',
+            color: 'green',
+          })
+        );
+      });
+    });
+
+    it('shows "Recurring rule paused" notification when disabling', async () => {
+      render(<RecurringRuleModal {...defaultProps()} />);
+      fireEvent.click(screen.getByTestId('switch'));
+      await waitFor(() => {
+        expect(showNotification).toHaveBeenCalledWith(
+          expect.objectContaining({
+            title: 'Recurring rule paused',
+            color: 'yellow',
+          })
+        );
+      });
+    });
+
+    it('calls fetchRecurringRules after toggle', async () => {
+      const { mockFetchRecurringRules } = setupMocks();
+      render(<RecurringRuleModal {...defaultProps()} />);
+      fireEvent.click(screen.getByTestId('switch'));
+      await waitFor(() => {
+        expect(mockFetchRecurringRules).toHaveBeenCalled();
+      });
+    });
+
+    it('does not show notification when updateRecurringRuleEnabled throws', async () => {
+      vi.mocked(
+        RecurringRuleModalUtils.updateRecurringRuleEnabled
+      ).mockRejectedValue(new Error('fail'));
+      render(<RecurringRuleModal {...defaultProps()} />);
+      fireEvent.click(screen.getByTestId('switch'));
+      await waitFor(() => {
+        expect(showNotification).not.toHaveBeenCalled();
+      });
+    });
+  });
+
+  // ── Upcoming occurrences ─────────────────────────────────────────────────────
+
+  describe('upcoming occurrences', () => {
+    it('renders the occurrence count badge', () => {
+      setupMocks({ occurrences: [makeOccurrence(), makeOccurrence('occ-2')] });
+      render(<RecurringRuleModal {...defaultProps()} />);
+      expect(screen.getByTestId('badge')).toHaveTextContent('2');
+    });
+
+    it('shows "No future airings" when no upcoming occurrences', () => {
+      setupMocks({ occurrences: [] });
+      render(<RecurringRuleModal {...defaultProps()} />);
+      expect(
+        screen.getByText('No future airings currently scheduled.')
+      ).toBeInTheDocument();
+    });
+
+    it('renders occurrence cards when occurrences exist', () => {
+      setupMocks({
+        occurrences: [makeOccurrence(), makeOccurrence('occ-2')],
+      });
+      render(<RecurringRuleModal {...defaultProps()} />);
+      expect(screen.getAllByTestId('occurrence-card')).toHaveLength(2);
+    });
+
+    it('renders Edit and Cancel buttons for each occurrence', () => {
+      setupMocks({ occurrences: [makeOccurrence()] });
+      render(<RecurringRuleModal {...defaultProps()} />);
+      expect(screen.getByText('Edit')).toBeInTheDocument();
+      expect(screen.getByText('Cancel')).toBeInTheDocument();
+    });
+
+    it('calls getUpcomingOccurrences with recordings, userNow, ruleId, toUserTime', () => {
+      render(<RecurringRuleModal {...defaultProps()} />);
+      expect(RecurringRuleModalUtils.getUpcomingOccurrences).toHaveBeenCalledWith(
+        expect.any(Array),
+        expect.any(Function),
+        'rule-1',
+        expect.any(Function)
+      );
+    });
+  });
+
+  // ── Edit occurrence ──────────────────────────────────────────────────────────
+
+  describe('edit occurrence', () => {
+    it('calls onClose and onEditOccurrence when Edit is clicked', () => {
+      const occ = makeOccurrence();
+      setupMocks({ occurrences: [occ] });
+      const onClose = vi.fn();
+      const onEditOccurrence = vi.fn();
+      render(
+        <RecurringRuleModal
+          {...defaultProps()}
+          onClose={onClose}
+          onEditOccurrence={onEditOccurrence}
+        />
+      );
+      fireEvent.click(screen.getByText('Edit'));
+      expect(onClose).toHaveBeenCalled();
+      expect(onEditOccurrence).toHaveBeenCalledWith(occ);
+    });
+
+    it('does not throw when onEditOccurrence is not provided', () => {
+      const occ = makeOccurrence();
+      setupMocks({ occurrences: [occ] });
+      render(
+        <RecurringRuleModal
+          {...defaultProps()}
+          onEditOccurrence={undefined}
+        />
+      );
+      expect(() => fireEvent.click(screen.getByText('Edit'))).not.toThrow();
+    });
+  });
+
+  // ── Cancel occurrence ────────────────────────────────────────────────────────
+
+  describe('cancel occurrence', () => {
+    it('calls deleteRecordingById when Cancel is clicked', async () => {
+      const occ = makeOccurrence();
+      setupMocks({ occurrences: [occ] });
+      render(<RecurringRuleModal {...defaultProps()} />);
+      fireEvent.click(screen.getByText('Cancel'));
+      await waitFor(() => {
+        expect(deleteRecordingById).toHaveBeenCalledWith('occ-1');
+      });
+    });
+
+    it('shows "Occurrence cancelled" notification on success', async () => {
+      const occ = makeOccurrence();
+      setupMocks({ occurrences: [occ] });
+      render(<RecurringRuleModal {...defaultProps()} />);
+      fireEvent.click(screen.getByText('Cancel'));
+      await waitFor(() => {
+        expect(showNotification).toHaveBeenCalledWith(
+          expect.objectContaining({
+            title: 'Occurrence cancelled',
+            color: 'yellow',
+          })
+        );
+      });
+    });
+
+    it('does not show notification when deleteRecordingById throws', async () => {
+      vi.mocked(deleteRecordingById).mockRejectedValue(new Error('fail'));
+      setupMocks({ occurrences: [makeOccurrence()] });
+      render(<RecurringRuleModal {...defaultProps()} />);
+      fireEvent.click(screen.getByText('Cancel'));
+      await waitFor(() => {
+        expect(showNotification).not.toHaveBeenCalled();
+      });
+    });
+
+    it('shows loading state on Cancel button while deleting occurrence', async () => {
+      let resolve;
+      vi.mocked(deleteRecordingById).mockReturnValue(
+        new Promise((r) => { resolve = r; })
+      );
+      setupMocks({ occurrences: [makeOccurrence()] });
+      render(<RecurringRuleModal {...defaultProps()} />);
+      fireEvent.click(screen.getByText('Cancel'));
+      await waitFor(() => {
+        expect(screen.getByText('Cancel')).toHaveAttribute('data-loading', 'true');
+      });
+      resolve();
+    });
+  });
+
+  // ── Time/date field handlers ─────────────────────────────────────────────────
+
+  describe('field change handlers', () => {
+    it('calls toTimeString when start time changes', () => {
+      render(<RecurringRuleModal {...defaultProps()} />);
+      fireEvent.change(screen.getByTestId('timeinput-Start time'), {
+        target: { value: '09:00' },
+      });
+      expect(toTimeString).toHaveBeenCalledWith('09:00');
+    });
+
+    it('calls toTimeString when end time changes', () => {
+      render(<RecurringRuleModal {...defaultProps()} />);
+      fireEvent.change(screen.getByTestId('timeinput-End time'), {
+        target: { value: '10:00' },
+      });
+      expect(toTimeString).toHaveBeenCalledWith('10:00');
+    });
+
+    it('updates end_date field when end date picker changes', () => {
+      render(<RecurringRuleModal {...defaultProps()} />);
+      const picker = screen.getByTestId('datepicker-End date');
+      fireEvent.change(picker, { target: { value: '2024-12-31' } });
+      // No throw — handler wired correctly
+    });
+
+    it('updates start_date field when start date picker changes', () => {
+      render(<RecurringRuleModal {...defaultProps()} />);
+      const picker = screen.getByTestId('datepicker-Start date');
+      fireEvent.change(picker, { target: { value: '2024-07-01' } });
+      // No throw — handler wired correctly
+    });
+  });
+});
+
diff --git a/frontend/src/components/forms/__tests__/ScheduleInput.test.jsx b/frontend/src/components/forms/__tests__/ScheduleInput.test.jsx
new file mode 100644
index 00000000..85dc55d9
--- /dev/null
+++ b/frontend/src/components/forms/__tests__/ScheduleInput.test.jsx
@@ -0,0 +1,373 @@
+import { render, screen, fireEvent, waitFor } from '@testing-library/react';
+import { describe, it, expect, vi, beforeEach } from 'vitest';
+import ScheduleInput from '../ScheduleInput';
+
+// ── Mantine core ───────────────────────────────────────────────────────────────
+vi.mock('@mantine/core', () => ({
+  TextInput: ({ label, placeholder, description, value, onChange, error, disabled }) => (
+    <div>
+      <label>{typeof label === 'string' ? label : 'Cron Expression'}</label>
+      <input
+        data-testid="textinput-cron"
+        placeholder={placeholder}
+        value={value}
+        onChange={onChange}
+        disabled={disabled}
+        aria-invalid={!!error}
+      />
+      {description && <span data-testid="cron-description">{description}</span>}
+      {error && <span data-testid="cron-error">{error}</span>}
+    </div>
+  ),
+  NumberInput: ({ label, description, value, onChange, min, disabled }) => (
+    <div>
+      <label>{label}</label>
+      <input
+        data-testid="numberinput-interval"
+        type="number"
+        value={value}
+        onChange={(e) => onChange(Number(e.target.value))}
+        min={min}
+        disabled={disabled}
+      />
+      {description && <span data-testid="interval-description">{description}</span>}
+    </div>
+  ),
+  Anchor: ({ children, onClick }) => (
+    <a data-testid={`anchor-${String(children).replace(/\s+/g, '-').toLowerCase()}`} onClick={onClick} href="#">
+      {children}
+    </a>
+  ),
+  Stack: ({ children }) => <div>{children}</div>,
+  Text: ({ children }) => <span>{children}</span>,
+  Code: ({ children }) => <code>{children}</code>,
+  Group: ({ children }) => <div>{children}</div>,
+  Popover: ({ children }) => <div>{children}</div>,
+  PopoverTarget: ({ children }) => <div>{children}</div>,
+  PopoverDropdown: ({ children }) => <div data-testid="popover-dropdown">{children}</div>,
+  ActionIcon: ({ children, onClick }) => (
+    <button data-testid="action-icon-info" onClick={onClick}>{children}</button>
+  ),
+}));
+
+// ── lucide-react ───────────────────────────────────────────────────────────────
+vi.mock('lucide-react', () => ({
+  Info: () => <svg data-testid="icon-info" />,
+}));
+
+// ── cronUtils ─────────────────────────────────────────────────────────────────
+vi.mock('../../../utils/cronUtils', () => ({
+  validateCronExpression: vi.fn(),
+}));
+
+// ── CronBuilder ────────────────────────────────────────────────────────────────
+vi.mock('../CronBuilder', () => ({
+  default: ({ opened, onClose, onApply, currentValue }) =>
+    opened ? (
+      <div data-testid="cron-builder">
+        <span data-testid="cron-builder-value">{currentValue}</span>
+        <button data-testid="cron-builder-apply" onClick={() => onApply('0 3 * * *')}>
+          Apply
+        </button>
+        <button data-testid="cron-builder-close" onClick={onClose}>
+          Close
+        </button>
+      </div>
+    ) : null,
+}));
+
+// ──────────────────────────────────────────────────────────────────────────────
+import { validateCronExpression } from '../../../utils/cronUtils';
+
+const defaultIntervalProps = () => ({
+  scheduleType: 'interval',
+  onScheduleTypeChange: vi.fn(),
+  intervalValue: 6,
+  onIntervalChange: vi.fn(),
+  cronValue: '',
+  onCronChange: vi.fn(),
+});
+
+const defaultCronProps = () => ({
+  scheduleType: 'cron',
+  onScheduleTypeChange: vi.fn(),
+  cronValue: '0 3 * * *',
+  onCronChange: vi.fn(),
+  intervalValue: 0,
+  onIntervalChange: vi.fn(),
+});
+
+describe('ScheduleInput', () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+    vi.mocked(validateCronExpression).mockReturnValue({ valid: true });
+  });
+
+  // ── Interval mode ────────────────────────────────────────────────────────
+
+  describe('interval mode', () => {
+    it('renders NumberInput in interval mode', () => {
+      render(<ScheduleInput {...defaultIntervalProps()} />);
+      expect(screen.getByTestId('numberinput-interval')).toBeInTheDocument();
+    });
+
+    it('displays the intervalValue', () => {
+      render(<ScheduleInput {...defaultIntervalProps()} />);
+      expect(screen.getByTestId('numberinput-interval')).toHaveValue(6);
+    });
+
+    it('renders default interval label', () => {
+      render(<ScheduleInput {...defaultIntervalProps()} />);
+      expect(screen.getByText('Refresh Interval (hours)')).toBeInTheDocument();
+    });
+
+    it('renders custom intervalLabel', () => {
+      render(<ScheduleInput {...defaultIntervalProps()} intervalLabel="My Custom Label" />);
+      expect(screen.getByText('My Custom Label')).toBeInTheDocument();
+    });
+
+    it('renders default interval description', () => {
+      render(<ScheduleInput {...defaultIntervalProps()} />);
+      expect(screen.getByTestId('interval-description')).toHaveTextContent(
+        'How often to refresh (0 to disable)'
+      );
+    });
+
+    it('calls onIntervalChange when value changes', () => {
+      const props = defaultIntervalProps();
+      render(<ScheduleInput {...props} />);
+      fireEvent.change(screen.getByTestId('numberinput-interval'), {
+        target: { value: '12' },
+      });
+      expect(props.onIntervalChange).toHaveBeenCalledWith(12);
+    });
+
+    it('shows "Use cron schedule" link in interval mode', () => {
+      render(<ScheduleInput {...defaultIntervalProps()} />);
+      expect(screen.getByTestId('anchor-use-cron-schedule')).toBeInTheDocument();
+    });
+
+    it('calls onScheduleTypeChange("cron") when "Use cron schedule" is clicked', () => {
+      const props = defaultIntervalProps();
+      render(<ScheduleInput {...props} />);
+      fireEvent.click(screen.getByTestId('anchor-use-cron-schedule'));
+      expect(props.onScheduleTypeChange).toHaveBeenCalledWith('cron');
+    });
+
+    it('does not show cron switch link when disabled', () => {
+      render(<ScheduleInput {...defaultIntervalProps()} disabled />);
+      expect(screen.queryByTestId('anchor-use-cron-schedule')).not.toBeInTheDocument();
+    });
+
+    it('disables the NumberInput when disabled prop is true', () => {
+      render(<ScheduleInput {...defaultIntervalProps()} disabled />);
+      expect(screen.getByTestId('numberinput-interval')).toBeDisabled();
+    });
+
+    it('renders custom switchToCronLabel', () => {
+      render(
+        <ScheduleInput {...defaultIntervalProps()} switchToCronLabel="Use custom cron schedule" />
+      );
+      expect(screen.getByText('Use custom cron schedule')).toBeInTheDocument();
+    });
+  });
+
+  // ── Children (simple) mode ────────────────────────────────────────────────
+
+  describe('children (simple) mode', () => {
+    it('renders children instead of NumberInput', () => {
+      render(
+        <ScheduleInput {...defaultIntervalProps()}>
+          <div data-testid="custom-child">Custom content</div>
+        </ScheduleInput>
+      );
+      expect(screen.getByTestId('custom-child')).toBeInTheDocument();
+      expect(screen.queryByTestId('numberinput-interval')).not.toBeInTheDocument();
+    });
+
+    it('shows cron toggle link below children', () => {
+      render(
+        <ScheduleInput {...defaultIntervalProps()}>
+          <div>Child</div>
+        </ScheduleInput>
+      );
+      expect(screen.getByTestId('anchor-use-cron-schedule')).toBeInTheDocument();
+    });
+
+    it('does not show cron link when disabled with children', () => {
+      render(
+        <ScheduleInput {...defaultIntervalProps()} disabled>
+          <div>Child</div>
+        </ScheduleInput>
+      );
+      expect(screen.queryByTestId('anchor-use-cron-schedule')).not.toBeInTheDocument();
+    });
+  });
+
+  // ── Cron mode ─────────────────────────────────────────────────────────────
+
+  describe('cron mode', () => {
+    it('renders TextInput in cron mode', () => {
+      render(<ScheduleInput {...defaultCronProps()} />);
+      expect(screen.getByTestId('textinput-cron')).toBeInTheDocument();
+    });
+
+    it('displays the cronValue', () => {
+      render(<ScheduleInput {...defaultCronProps()} />);
+      expect(screen.getByTestId('textinput-cron')).toHaveValue('0 3 * * *');
+    });
+
+    it('shows "Use interval schedule" link in cron mode', () => {
+      render(<ScheduleInput {...defaultCronProps()} />);
+      expect(screen.getByTestId('anchor-use-interval-schedule')).toBeInTheDocument();
+    });
+
+    it('shows "Open Cron Builder" link', () => {
+      render(<ScheduleInput {...defaultCronProps()} />);
+      expect(screen.getByTestId('anchor-open-cron-builder')).toBeInTheDocument();
+    });
+
+    it('calls onScheduleTypeChange("interval") and onCronChange("") when switching to interval', () => {
+      const props = defaultCronProps();
+      render(<ScheduleInput {...props} />);
+      fireEvent.click(screen.getByTestId('anchor-use-interval-schedule'));
+      expect(props.onScheduleTypeChange).toHaveBeenCalledWith('interval');
+      expect(props.onCronChange).toHaveBeenCalledWith('');
+    });
+
+    it('calls onCronChange when cron input changes', () => {
+      const props = defaultCronProps();
+      render(<ScheduleInput {...props} />);
+      fireEvent.change(screen.getByTestId('textinput-cron'), {
+        target: { value: '0 5 * * *' },
+      });
+      expect(props.onCronChange).toHaveBeenCalledWith('0 5 * * *');
+    });
+
+    it('disables the TextInput when disabled prop is true', () => {
+      render(<ScheduleInput {...defaultCronProps()} disabled />);
+      expect(screen.getByTestId('textinput-cron')).toBeDisabled();
+    });
+
+    it('does not show cron links when disabled', () => {
+      render(<ScheduleInput {...defaultCronProps()} disabled />);
+      expect(screen.queryByTestId('anchor-use-interval-schedule')).not.toBeInTheDocument();
+      expect(screen.queryByTestId('anchor-open-cron-builder')).not.toBeInTheDocument();
+    });
+
+    it('renders custom switchToIntervalLabel', () => {
+      render(
+        <ScheduleInput {...defaultCronProps()} switchToIntervalLabel="Use simple schedule" />
+      );
+      expect(screen.getByText('Use simple schedule')).toBeInTheDocument();
+    });
+  });
+
+  // ── Cron validation ───────────────────────────────────────────────────────
+
+  describe('cron validation', () => {
+    it('shows no error when cron is valid', () => {
+      vi.mocked(validateCronExpression).mockReturnValue({ valid: true });
+      render(<ScheduleInput {...defaultCronProps()} />);
+      expect(screen.queryByTestId('cron-error')).not.toBeInTheDocument();
+    });
+
+    it('shows error message when cron is invalid', async () => {
+      vi.mocked(validateCronExpression).mockReturnValue({
+        valid: false,
+        error: 'Invalid cron expression',
+      });
+      render(<ScheduleInput {...defaultCronProps()} cronValue="bad cron" />);
+      await waitFor(() => {
+        expect(screen.getByTestId('cron-error')).toHaveTextContent('Invalid cron expression');
+      });
+    });
+
+    it('clears error when cron input is cleared', async () => {
+      vi.mocked(validateCronExpression).mockReturnValue({ valid: true });
+      const props = { ...defaultCronProps(), cronValue: '' };
+      render(<ScheduleInput {...props} />);
+      await waitFor(() => {
+        expect(screen.queryByTestId('cron-error')).not.toBeInTheDocument();
+      });
+    });
+
+    it('calls validateCronExpression on cron value change', () => {
+      vi.mocked(validateCronExpression).mockReturnValue({ valid: true });
+      const props = defaultCronProps();
+      render(<ScheduleInput {...props} />);
+      fireEvent.change(screen.getByTestId('textinput-cron'), {
+        target: { value: '0 6 * * 1' },
+      });
+      expect(validateCronExpression).toHaveBeenCalledWith('0 6 * * 1');
+    });
+
+    it('does not call validateCronExpression in interval mode', () => {
+      render(<ScheduleInput {...defaultIntervalProps()} />);
+      expect(validateCronExpression).not.toHaveBeenCalled();
+    });
+  });
+
+  // ── Cron Builder ──────────────────────────────────────────────────────────
+
+  describe('CronBuilder', () => {
+    it('CronBuilder is not visible initially', () => {
+      render(<ScheduleInput {...defaultCronProps()} />);
+      expect(screen.queryByTestId('cron-builder')).not.toBeInTheDocument();
+    });
+
+    it('opens CronBuilder when "Open Cron Builder" is clicked', () => {
+      render(<ScheduleInput {...defaultCronProps()} />);
+      fireEvent.click(screen.getByTestId('anchor-open-cron-builder'));
+      expect(screen.getByTestId('cron-builder')).toBeInTheDocument();
+    });
+
+    it('passes current cronValue to CronBuilder', () => {
+      render(<ScheduleInput {...defaultCronProps()} cronValue="0 4 * * *" />);
+      fireEvent.click(screen.getByTestId('anchor-open-cron-builder'));
+      expect(screen.getByTestId('cron-builder-value')).toHaveTextContent('0 4 * * *');
+    });
+
+    it('closes CronBuilder when onClose is triggered', () => {
+      render(<ScheduleInput {...defaultCronProps()} />);
+      fireEvent.click(screen.getByTestId('anchor-open-cron-builder'));
+      fireEvent.click(screen.getByTestId('cron-builder-close'));
+      expect(screen.queryByTestId('cron-builder')).not.toBeInTheDocument();
+    });
+
+    it('calls onCronChange with applied value from CronBuilder', () => {
+      vi.mocked(validateCronExpression).mockReturnValue({ valid: true });
+      const props = defaultCronProps();
+      render(<ScheduleInput {...props} />);
+      fireEvent.click(screen.getByTestId('anchor-open-cron-builder'));
+      fireEvent.click(screen.getByTestId('cron-builder-apply'));
+      expect(props.onCronChange).toHaveBeenCalledWith('0 3 * * *');
+    });
+  });
+
+  // ── Default props ─────────────────────────────────────────────────────────
+
+  describe('default props', () => {
+    it('defaults to interval mode when scheduleType is not provided', () => {
+      render(
+        <ScheduleInput
+          onScheduleTypeChange={vi.fn()}
+          onIntervalChange={vi.fn()}
+          onCronChange={vi.fn()}
+        />
+      );
+      expect(screen.getByTestId('numberinput-interval')).toBeInTheDocument();
+    });
+
+    it('defaults intervalValue to 0', () => {
+      render(
+        <ScheduleInput
+          onScheduleTypeChange={vi.fn()}
+          onIntervalChange={vi.fn()}
+          onCronChange={vi.fn()}
+        />
+      );
+      expect(screen.getByTestId('numberinput-interval')).toHaveValue(0);
+    });
+  });
+});
\ No newline at end of file
diff --git a/frontend/src/components/forms/__tests__/SeriesRecordingModal.test.jsx b/frontend/src/components/forms/__tests__/SeriesRecordingModal.test.jsx
new file mode 100644
index 00000000..5e7f3c09
--- /dev/null
+++ b/frontend/src/components/forms/__tests__/SeriesRecordingModal.test.jsx
@@ -0,0 +1,417 @@
+import { render, screen, fireEvent, waitFor } from '@testing-library/react';
+import { describe, it, expect, vi, beforeEach } from 'vitest';
+import SeriesRecordingModal from '../SeriesRecordingModal';
+
+// ── Mantine core ───────────────────────────────────────────────────────────────
+vi.mock('@mantine/core', () => ({
+  Modal: ({ children, opened, onClose, title }) =>
+    opened ? (
+      <div data-testid="modal">
+        <div data-testid="modal-title">{title}</div>
+        <button data-testid="modal-close" onClick={onClose}>
+          ×
+        </button>
+        {children}
+      </div>
+    ) : null,
+  Stack: ({ children }) => <div>{children}</div>,
+  Text: ({ children, size, c, fw }) => (
+    <span data-testid="text" data-size={size} data-color={c} data-fw={fw}>
+      {children}
+    </span>
+  ),
+  Flex: ({ children }) => <div>{children}</div>,
+  Group: ({ children }) => <div>{children}</div>,
+  Button: ({ children, onClick, variant, color, disabled }) => (
+    <button
+      onClick={onClick}
+      data-variant={variant}
+      data-color={color}
+      disabled={disabled}
+    >
+      {children}
+    </button>
+  ),
+  Badge: ({ children, color }) => (
+    <span data-testid="badge" data-color={color}>
+      {children}
+    </span>
+  ),
+}));
+
+// ── Store ──────────────────────────────────────────────────────────────────────
+vi.mock('../../../store/channels.jsx', () => ({
+  default: { getState: vi.fn() },
+}));
+
+// ── Utils ──────────────────────────────────────────────────────────────────────
+vi.mock('../../../utils/cards/RecordingCardUtils.js', () => ({
+  deleteSeriesAndRule: vi.fn(),
+}));
+
+vi.mock('../../../utils/guideUtils.js', () => ({
+  evaluateSeriesRulesByTvgId: vi.fn(),
+  fetchRules: vi.fn(),
+}));
+
+vi.mock('../../../utils/notificationUtils.js', () => ({
+  showNotification: vi.fn(),
+}));
+
+// ── SeriesRuleEditorModal ──────────────────────────────────────────────────────
+vi.mock('../SeriesRuleEditorModal', () => ({
+  default: ({ opened, onClose, initialRule, onSaved }) =>
+    opened ? (
+      <div data-testid="series-rule-editor">
+        <span data-testid="editor-rule">{initialRule ? initialRule.title : 'new'}</span>
+        <button data-testid="editor-close" onClick={onClose}>Close</button>
+        <button data-testid="editor-save" onClick={onSaved}>Save</button>
+      </div>
+    ) : null,
+}));
+
+// ──────────────────────────────────────────────────────────────────────────────
+import useChannelsStore from '../../../store/channels.jsx';
+import { deleteSeriesAndRule } from '../../../utils/cards/RecordingCardUtils.js';
+import { evaluateSeriesRulesByTvgId, fetchRules } from '../../../utils/guideUtils.js';
+import { showNotification } from '../../../utils/notificationUtils.js';
+
+const makeRule = (overrides = {}) => ({
+  tvg_id: 'tvg-1',
+  title: 'Test Show',
+  mode: 'new',
+  title_mode: 'exact',
+  description: '',
+  channel_id: null,
+  ...overrides,
+});
+
+const defaultProps = (overrides = {}) => ({
+  opened: true,
+  onClose: vi.fn(),
+  rules: [makeRule()],
+  onRulesUpdate: vi.fn(),
+  ...overrides,
+});
+
+const mockFetchRecordings = vi.fn().mockResolvedValue(undefined);
+
+const setupMocks = () => {
+  vi.mocked(useChannelsStore.getState).mockReturnValue({
+    fetchRecordings: mockFetchRecordings,
+  });
+  vi.mocked(fetchRules).mockResolvedValue([makeRule()]);
+  vi.mocked(evaluateSeriesRulesByTvgId).mockResolvedValue(undefined);
+  vi.mocked(deleteSeriesAndRule).mockResolvedValue(undefined);
+};
+
+describe('SeriesRecordingModal', () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+    setupMocks();
+  });
+
+  // ── Visibility ─────────────────────────────────────────────────────────────
+
+  describe('visibility', () => {
+    it('renders when opened is true', () => {
+      render(<SeriesRecordingModal {...defaultProps()} />);
+      expect(screen.getByTestId('modal')).toBeInTheDocument();
+    });
+
+    it('does not render when opened is false', () => {
+      render(<SeriesRecordingModal {...defaultProps({ opened: false })} />);
+      expect(screen.queryByTestId('modal')).not.toBeInTheDocument();
+    });
+
+    it('renders modal title "Series Recording Rules"', () => {
+      render(<SeriesRecordingModal {...defaultProps()} />);
+      expect(screen.getByTestId('modal-title')).toHaveTextContent('Series Recording Rules');
+    });
+
+    it('calls onClose when modal close button is clicked', () => {
+      const props = defaultProps();
+      render(<SeriesRecordingModal {...props} />);
+      fireEvent.click(screen.getByTestId('modal-close'));
+      expect(props.onClose).toHaveBeenCalled();
+    });
+  });
+
+  // ── Empty state ────────────────────────────────────────────────────────────
+
+  describe('empty state', () => {
+    it('shows "No series rules configured" when rules is empty', () => {
+      render(<SeriesRecordingModal {...defaultProps({ rules: [] })} />);
+      expect(screen.getByText('No series rules configured')).toBeInTheDocument();
+    });
+
+    it('shows "No series rules configured" when rules is null', () => {
+      render(<SeriesRecordingModal {...defaultProps({ rules: null })} />);
+      expect(screen.getByText('No series rules configured')).toBeInTheDocument();
+    });
+
+    it('does not show "No series rules configured" when rules are present', () => {
+      render(<SeriesRecordingModal {...defaultProps()} />);
+      expect(screen.queryByText('No series rules configured')).not.toBeInTheDocument();
+    });
+  });
+
+  // ── Rule rendering ─────────────────────────────────────────────────────────
+
+  describe('rule rendering', () => {
+    it('renders rule title', () => {
+      render(<SeriesRecordingModal {...defaultProps()} />);
+      expect(screen.getByText('Test Show')).toBeInTheDocument();
+    });
+
+    it('falls back to tvg_id when rule has no title', () => {
+      render(
+        <SeriesRecordingModal
+          {...defaultProps({ rules: [makeRule({ title: '', tvg_id: 'tvg-fallback' })] })}
+        />
+      );
+      expect(screen.getByText('tvg-fallback')).toBeInTheDocument();
+    });
+
+    it('renders "Pinned channel" badge when channel_id is set', () => {
+      render(
+        <SeriesRecordingModal
+          {...defaultProps({ rules: [makeRule({ channel_id: 'ch-1' })] })}
+        />
+      );
+      expect(screen.getByText('Pinned channel')).toBeInTheDocument();
+    });
+
+    it('does not render "Pinned channel" badge when channel_id is null', () => {
+      render(<SeriesRecordingModal {...defaultProps()} />);
+      expect(screen.queryByText('Pinned channel')).not.toBeInTheDocument();
+    });
+
+    it('renders multiple rules', () => {
+      const rules = [
+        makeRule({ tvg_id: 'tvg-1', title: 'Show One' }),
+        makeRule({ tvg_id: 'tvg-2', title: 'Show Two' }),
+      ];
+      render(<SeriesRecordingModal {...defaultProps({ rules })} />);
+      expect(screen.getByText('Show One')).toBeInTheDocument();
+      expect(screen.getByText('Show Two')).toBeInTheDocument();
+    });
+
+    it('renders Edit, Evaluate Now, and Remove buttons for each rule', () => {
+      render(<SeriesRecordingModal {...defaultProps()} />);
+      expect(screen.getByText('Edit')).toBeInTheDocument();
+      expect(screen.getByText('Evaluate Now')).toBeInTheDocument();
+      expect(screen.getByText('Remove')).toBeInTheDocument();
+    });
+
+    it('renders "Add rule" button', () => {
+      render(<SeriesRecordingModal {...defaultProps()} />);
+      expect(screen.getByText('Add rule')).toBeInTheDocument();
+    });
+  });
+
+  // ── Rule summary ───────────────────────────────────────────────────────────
+
+  describe('rule summary', () => {
+    it('shows "New episodes" for mode new', () => {
+      render(<SeriesRecordingModal {...defaultProps({ rules: [makeRule({ mode: 'new' })] })} />);
+      expect(screen.getByText(/New episodes/)).toBeInTheDocument();
+    });
+
+    it('shows "Every episode" for mode all', () => {
+      render(<SeriesRecordingModal {...defaultProps({ rules: [makeRule({ mode: 'all' })] })} />);
+      expect(screen.getByText(/Every episode/)).toBeInTheDocument();
+    });
+
+    it('shows exact title label in summary', () => {
+      render(
+        <SeriesRecordingModal
+          {...defaultProps({ rules: [makeRule({ title_mode: 'exact', title: 'Test Show' })] })}
+        />
+      );
+      expect(screen.getByText(/Exact title: "Test Show"/)).toBeInTheDocument();
+    });
+
+    it('shows contains label in summary', () => {
+      render(
+        <SeriesRecordingModal
+          {...defaultProps({ rules: [makeRule({ title_mode: 'contains', title: 'Test' })] })}
+        />
+      );
+      expect(screen.getByText(/Title contains: "Test"/)).toBeInTheDocument();
+    });
+
+    it('shows regex label in summary', () => {
+      render(
+        <SeriesRecordingModal
+          {...defaultProps({ rules: [makeRule({ title_mode: 'regex', title: '^Test' })] })}
+        />
+      );
+      expect(screen.getByText(/Title regex: "\^Test"/)).toBeInTheDocument();
+    });
+
+    it('shows description in summary when present', () => {
+      render(
+        <SeriesRecordingModal
+          {...defaultProps({ rules: [makeRule({ description: 'A drama' })] })}
+        />
+      );
+      expect(screen.getByText(/Description: "A drama"/)).toBeInTheDocument();
+    });
+
+    it('does not show description in summary when empty', () => {
+      render(<SeriesRecordingModal {...defaultProps()} />);
+      expect(screen.queryByText(/Description:/)).not.toBeInTheDocument();
+    });
+  });
+
+  // ── Evaluate Now ───────────────────────────────────────────────────────────
+
+  describe('Evaluate Now', () => {
+    it('calls evaluateSeriesRulesByTvgId with rule tvg_id', async () => {
+      render(<SeriesRecordingModal {...defaultProps()} />);
+      fireEvent.click(screen.getByText('Evaluate Now'));
+      await waitFor(() => {
+        expect(evaluateSeriesRulesByTvgId).toHaveBeenCalledWith('tvg-1');
+      });
+    });
+
+    it('calls fetchRecordings after evaluation', async () => {
+      render(<SeriesRecordingModal {...defaultProps()} />);
+      fireEvent.click(screen.getByText('Evaluate Now'));
+      await waitFor(() => {
+        expect(mockFetchRecordings).toHaveBeenCalled();
+      });
+    });
+
+    it('shows "Evaluated" notification after evaluation', async () => {
+      render(<SeriesRecordingModal {...defaultProps()} />);
+      fireEvent.click(screen.getByText('Evaluate Now'));
+      await waitFor(() => {
+        expect(showNotification).toHaveBeenCalledWith(
+          expect.objectContaining({ title: 'Evaluated', message: 'Checked for episodes' })
+        );
+      });
+    });
+
+    it('still shows notification when fetchRecordings rejects', async () => {
+      mockFetchRecordings.mockRejectedValueOnce(new Error('network'));
+      render(<SeriesRecordingModal {...defaultProps()} />);
+      fireEvent.click(screen.getByText('Evaluate Now'));
+      await waitFor(() => {
+        expect(showNotification).toHaveBeenCalledWith(
+          expect.objectContaining({ title: 'Evaluated' })
+        );
+      });
+    });
+  });
+
+  // ── Remove series ──────────────────────────────────────────────────────────
+
+  describe('Remove series', () => {
+    it('calls deleteSeriesAndRule with tvg_id and title', async () => {
+      render(<SeriesRecordingModal {...defaultProps()} />);
+      fireEvent.click(screen.getByText('Remove'));
+      await waitFor(() => {
+        expect(deleteSeriesAndRule).toHaveBeenCalledWith({
+          tvg_id: 'tvg-1',
+          title: 'Test Show',
+        });
+      });
+    });
+
+    it('calls fetchRecordings after removal', async () => {
+      render(<SeriesRecordingModal {...defaultProps()} />);
+      fireEvent.click(screen.getByText('Remove'));
+      await waitFor(() => {
+        expect(mockFetchRecordings).toHaveBeenCalled();
+      });
+    });
+
+    it('calls fetchRules after removal', async () => {
+      render(<SeriesRecordingModal {...defaultProps()} />);
+      fireEvent.click(screen.getByText('Remove'));
+      await waitFor(() => {
+        expect(fetchRules).toHaveBeenCalled();
+      });
+    });
+
+    it('calls onRulesUpdate with fetched rules after removal', async () => {
+      const updated = [makeRule({ title: 'Updated Show' })];
+      vi.mocked(fetchRules).mockResolvedValue(updated);
+      const props = defaultProps();
+      render(<SeriesRecordingModal {...props} />);
+      fireEvent.click(screen.getByText('Remove'));
+      await waitFor(() => {
+        expect(props.onRulesUpdate).toHaveBeenCalledWith(updated);
+      });
+    });
+
+    it('still calls onRulesUpdate when fetchRecordings rejects', async () => {
+      mockFetchRecordings.mockRejectedValueOnce(new Error('network'));
+      const props = defaultProps();
+      render(<SeriesRecordingModal {...props} />);
+      fireEvent.click(screen.getByText('Remove'));
+      await waitFor(() => {
+        expect(props.onRulesUpdate).toHaveBeenCalled();
+      });
+    });
+  });
+
+  // ── Add rule / Editor ──────────────────────────────────────────────────────
+
+  describe('Add rule', () => {
+    it('opens SeriesRuleEditorModal when "Add rule" is clicked', () => {
+      render(<SeriesRecordingModal {...defaultProps()} />);
+      fireEvent.click(screen.getByText('Add rule'));
+      expect(screen.getByTestId('series-rule-editor')).toBeInTheDocument();
+    });
+
+    it('passes null initialRule when opening via "Add rule"', () => {
+      render(<SeriesRecordingModal {...defaultProps()} />);
+      fireEvent.click(screen.getByText('Add rule'));
+      expect(screen.getByTestId('editor-rule')).toHaveTextContent('new');
+    });
+
+    it('closes SeriesRuleEditorModal when editor onClose fires', () => {
+      render(<SeriesRecordingModal {...defaultProps()} />);
+      fireEvent.click(screen.getByText('Add rule'));
+      fireEvent.click(screen.getByTestId('editor-close'));
+      expect(screen.queryByTestId('series-rule-editor')).not.toBeInTheDocument();
+    });
+  });
+
+  // ── Edit rule ──────────────────────────────────────────────────────────────
+
+  describe('Edit rule', () => {
+    it('opens SeriesRuleEditorModal with the selected rule when Edit is clicked', () => {
+      render(<SeriesRecordingModal {...defaultProps()} />);
+      fireEvent.click(screen.getByText('Edit'));
+      expect(screen.getByTestId('series-rule-editor')).toBeInTheDocument();
+      expect(screen.getByTestId('editor-rule')).toHaveTextContent('Test Show');
+    });
+
+    it('calls fetchRules and onRulesUpdate when editor onSaved fires', async () => {
+      const updated = [makeRule({ title: 'Saved Show' })];
+      vi.mocked(fetchRules).mockResolvedValue(updated);
+      const props = defaultProps();
+      render(<SeriesRecordingModal {...props} />);
+      fireEvent.click(screen.getByText('Edit'));
+      fireEvent.click(screen.getByTestId('editor-save'));
+      await waitFor(() => {
+        expect(fetchRules).toHaveBeenCalled();
+        expect(props.onRulesUpdate).toHaveBeenCalledWith(updated);
+      });
+    });
+
+    it('closes editor after save', async () => {
+      render(<SeriesRecordingModal {...defaultProps()} />);
+      fireEvent.click(screen.getByText('Edit'));
+      fireEvent.click(screen.getByTestId('editor-save'));
+      await waitFor(() => {
+        // editor is still open (onSaved doesn't auto-close) — just verify no error
+        expect(fetchRules).toHaveBeenCalled();
+      });
+    });
+  });
+});
\ No newline at end of file
diff --git a/frontend/src/components/forms/__tests__/SeriesRuleEditorModal.test.jsx b/frontend/src/components/forms/__tests__/SeriesRuleEditorModal.test.jsx
new file mode 100644
index 00000000..59a98bd9
--- /dev/null
+++ b/frontend/src/components/forms/__tests__/SeriesRuleEditorModal.test.jsx
@@ -0,0 +1,682 @@
+import { render, screen, fireEvent, waitFor } from '@testing-library/react';
+import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest';
+
+// ── Store mocks ────────────────────────────────────────────────────────────
+vi.mock('../../../store/channels.jsx', () => ({ default: vi.fn() }));
+vi.mock('../../../store/epgs.jsx', () => ({ default: vi.fn() }));
+
+// ── Utility mocks ──────────────────────────────────────────────────────────
+vi.mock('../../../utils.js', () => ({
+  useDebounce: vi.fn((val) => val),
+}));
+
+vi.mock('../../../utils/notificationUtils.js', () => ({
+  showNotification: vi.fn(),
+}));
+
+vi.mock('../../../utils/forms/RecordingUtils.js', () => ({
+  getChannelsSummary: vi.fn(),
+}));
+
+vi.mock('../../../utils/guideUtils.js', () => ({
+  createSeriesRule: vi.fn(),
+  evaluateSeriesRulesByTvgId: vi.fn(),
+}));
+
+vi.mock('../../../utils/forms/SeriesRuleEditorModalUtils.js', () => ({
+  TITLE_MODES: [
+    { label: 'Exact', value: 'exact' },
+    { label: 'Contains', value: 'contains' },
+  ],
+  DESCRIPTION_MODES: [
+    { label: 'Contains', value: 'contains' },
+    { label: 'Exact', value: 'exact' },
+  ],
+  EPISODE_MODES: [
+    { label: 'All', value: 'all' },
+    { label: 'New only', value: 'new' },
+  ],
+  formatRange: vi.fn((start, end) => `${start} - ${end}`),
+  getChannelOptions: vi.fn(() => [{ value: '10', label: '501 - HBO' }]),
+  getTvgOptions: vi.fn(),
+  previewSeriesRule: vi.fn(),
+}));
+
+// ── Mantine core ───────────────────────────────────────────────────────────
+vi.mock('@mantine/core', () => ({
+  Alert: ({ children, color }) => (
+    <div data-testid="alert" data-color={color}>
+      {children}
+    </div>
+  ),
+  Badge: ({ children, color }) => (
+    <span data-testid="badge" data-color={color}>
+      {children}
+    </span>
+  ),
+  Button: ({ children, onClick, disabled, loading, variant }) => (
+    <button
+      onClick={onClick}
+      disabled={disabled || loading}
+      data-loading={loading}
+      data-variant={variant}
+    >
+      {children}
+    </button>
+  ),
+  Divider: () => <hr />,
+  Group: ({ children }) => <div>{children}</div>,
+  Modal: ({ children, opened, onClose, title }) =>
+    opened ? (
+      <div data-testid="modal">
+        <div data-testid="modal-title">{title}</div>
+        <button data-testid="modal-close" onClick={onClose}>
+          ×
+        </button>
+        {children}
+      </div>
+    ) : null,
+  ScrollAreaAutosize: ({ children }) => <div>{children}</div>,
+  SegmentedControl: ({ data, value, onChange, size }) => (
+    <div data-testid="segmented-control" data-size={size}>
+      {data.map((item) => (
+        <button
+          key={item.value}
+          data-active={value === item.value}
+          onClick={() => onChange(item.value)}
+        >
+          {item.label}
+        </button>
+      ))}
+    </div>
+  ),
+  Select: ({
+    label,
+    placeholder,
+    data,
+    value,
+    onChange,
+    description,
+  }) => (
+    <div>
+      <label>{label}</label>
+      {description && (
+        <span data-testid="select-description">{description}</span>
+      )}
+      <select
+        data-testid={`select-${label?.replace(/\s+/g, '-').toLowerCase()}`}
+        value={value ?? ''}
+        onChange={(e) => onChange(e.target.value || null)}
+      >
+        <option value="">{placeholder}</option>
+        {(data || []).map((opt) => (
+          <option key={opt.value} value={opt.value}>
+            {opt.label}
+          </option>
+        ))}
+      </select>
+    </div>
+  ),
+  Stack: ({ children }) => <div>{children}</div>,
+  Text: ({ children, size, c, fw }) => (
+    <span data-size={size} data-color={c} data-fw={fw}>
+      {children}
+    </span>
+  ),
+  Textarea: ({ label, placeholder, value, onChange, description }) => (
+    <div>
+      <label>{label}</label>
+      {description && <span>{description}</span>}
+      <textarea
+        data-testid="textarea-description"
+        placeholder={placeholder}
+        value={value}
+        onChange={onChange}
+      />
+    </div>
+  ),
+  TextInput: ({ label, placeholder, value, onChange, description }) => (
+    <div>
+      <label>{label}</label>
+      {description && <span>{description}</span>}
+      <input
+        data-testid="input-title"
+        placeholder={placeholder}
+        value={value}
+        onChange={onChange}
+      />
+    </div>
+  ),
+}));
+
+// ── Imports after mocks ────────────────────────────────────────────────────
+import SeriesRuleEditorModal from '../SeriesRuleEditorModal';
+import useChannelsStore from '../../../store/channels.jsx';
+import useEPGsStore from '../../../store/epgs.jsx';
+import { useDebounce } from '../../../utils.js';
+import { showNotification } from '../../../utils/notificationUtils.js';
+import { getChannelsSummary } from '../../../utils/forms/RecordingUtils.js';
+import { createSeriesRule, evaluateSeriesRulesByTvgId } from '../../../utils/guideUtils.js';
+import {
+  getTvgOptions,
+  previewSeriesRule,
+  formatRange,
+} from '../../../utils/forms/SeriesRuleEditorModalUtils.js';
+
+// ── Shared test data ───────────────────────────────────────────────────────
+const mockTvgs = [
+  { id: 1, tvg_id: 'tvg-1', name: 'Channel One' },
+  { id: 2, tvg_id: 'tvg-2', name: 'Channel Two' },
+];
+
+const mockTvgsById = {
+  1: { tvg_id: 'tvg-1', name: 'Channel One' },
+  2: { tvg_id: 'tvg-2', name: 'Channel Two' },
+};
+
+const mockChannels = [
+  { id: 10, name: 'HBO', channel_number: 501, epg_data_id: 1 },
+  { id: 20, name: 'CNN', channel_number: 102, epg_data_id: 2 },
+];
+
+const mockTvgOptions = [
+  { value: 'tvg-1', label: 'Channel One (tvg-1)' },
+  { value: 'tvg-2', label: 'Channel Two (tvg-2)' },
+];
+
+const mockPreviewResponse = {
+  matches: [
+    {
+      id: 'p1',
+      title: 'Match Show',
+      sub_title: 'Episode 1',
+      description: 'A great show',
+      start_time: '2024-01-01T10:00:00Z',
+      end_time: '2024-01-01T11:00:00Z',
+      tvg_id: 'tvg-1',
+      is_new: true,
+    },
+  ],
+  total: 1,
+  epg_found: true,
+};
+
+// ── Setup helper ───────────────────────────────────────────────────────────
+const setupMocks = () => {
+  const mockFetchRecordings = vi.fn().mockResolvedValue(undefined);
+
+  vi.mocked(useEPGsStore).mockImplementation((selector) =>
+    selector({ tvgs: mockTvgs, tvgsById: mockTvgsById })
+  );
+
+  // Mock getState for the imperative call in handleSave
+  useChannelsStore.getState = vi.fn().mockReturnValue({
+    fetchRecordings: mockFetchRecordings,
+  });
+
+  vi.mocked(getTvgOptions).mockReturnValue(mockTvgOptions);
+  vi.mocked(getChannelsSummary).mockResolvedValue(mockChannels);
+  vi.mocked(previewSeriesRule).mockResolvedValue({ matches: [], total: 0, epg_found: true });
+  vi.mocked(createSeriesRule).mockResolvedValue({ id: 'rule-1' });
+  vi.mocked(evaluateSeriesRulesByTvgId).mockResolvedValue(undefined);
+  vi.mocked(useDebounce).mockImplementation((val) => val);
+  vi.mocked(formatRange).mockImplementation((s, e) => `${s} - ${e}`);
+
+  return { mockFetchRecordings };
+};
+
+// ──────────────────────────────────────────────────────────────────────────
+describe('SeriesRuleEditorModal', () => {
+  let defaultProps;
+
+  beforeEach(() => {
+    vi.clearAllMocks();
+    setupMocks();
+
+    defaultProps = {
+      opened: true,
+      onClose: vi.fn(),
+      initialRule: null,
+      onSaved: vi.fn(),
+    };
+  });
+
+  afterEach(() => {
+    vi.clearAllMocks();
+  });
+
+  // ── Rendering ────────────────────────────────────────────────────────────
+
+  describe('rendering', () => {
+    it('renders the modal when opened is true', () => {
+      render(<SeriesRuleEditorModal {...defaultProps} />);
+      expect(screen.getByTestId('modal')).toBeInTheDocument();
+    });
+
+    it('does not render the modal when opened is false', () => {
+      render(<SeriesRuleEditorModal {...defaultProps} opened={false} />);
+      expect(screen.queryByTestId('modal')).not.toBeInTheDocument();
+    });
+
+    it('shows "New Series Rule" title when initialRule is null', () => {
+      render(<SeriesRuleEditorModal {...defaultProps} />);
+      expect(screen.getByTestId('modal-title')).toHaveTextContent('New Series Rule');
+    });
+
+    it('shows "Edit Series Rule" title when initialRule is provided', () => {
+      render(
+        <SeriesRuleEditorModal
+          {...defaultProps}
+          initialRule={{ tvg_id: 'tvg-1', mode: 'all', title: 'Test' }}
+        />
+      );
+      expect(screen.getByTestId('modal-title')).toHaveTextContent('Edit Series Rule');
+    });
+
+    it('renders the title input', () => {
+      render(<SeriesRuleEditorModal {...defaultProps} />);
+      expect(screen.getByTestId('input-title')).toBeInTheDocument();
+    });
+
+    it('renders the description textarea', () => {
+      render(<SeriesRuleEditorModal {...defaultProps} />);
+      expect(screen.getByTestId('textarea-description')).toBeInTheDocument();
+    });
+
+    it('renders Cancel and Save rule buttons', () => {
+      render(<SeriesRuleEditorModal {...defaultProps} />);
+      expect(screen.getByText('Cancel')).toBeInTheDocument();
+      expect(screen.getByText('Save rule')).toBeInTheDocument();
+    });
+
+    it('Save rule button is disabled when no title or description', () => {
+      render(<SeriesRuleEditorModal {...defaultProps} />);
+      expect(screen.getByText('Save rule')).toBeDisabled();
+    });
+
+    it('Save rule button is enabled when title is provided', async () => {
+      render(<SeriesRuleEditorModal {...defaultProps} />);
+      fireEvent.change(screen.getByTestId('input-title'), {
+        target: { value: 'My Show' },
+      });
+      expect(screen.getByText('Save rule')).not.toBeDisabled();
+    });
+
+    it('Save rule button is enabled when description is provided', async () => {
+      render(<SeriesRuleEditorModal {...defaultProps} />);
+      fireEvent.change(screen.getByTestId('textarea-description'), {
+        target: { value: 'some description' },
+      });
+      expect(screen.getByText('Save rule')).not.toBeDisabled();
+    });
+  });
+
+  // ── State hydration from initialRule ─────────────────────────────────────
+
+  describe('state hydration', () => {
+    const initialRule = {
+      tvg_id: 'tvg-1',
+      mode: 'new',
+      title: 'Pre-filled Title',
+      title_mode: 'contains',
+      description: 'Pre-filled description',
+      description_mode: 'exact',
+      channel_id: 10,
+    };
+
+    it('pre-fills title from initialRule', () => {
+      render(<SeriesRuleEditorModal {...defaultProps} initialRule={initialRule} />);
+      expect(screen.getByTestId('input-title')).toHaveValue('Pre-filled Title');
+    });
+
+    it('pre-fills description from initialRule', () => {
+      render(<SeriesRuleEditorModal {...defaultProps} initialRule={initialRule} />);
+      expect(screen.getByTestId('textarea-description')).toHaveValue('Pre-filled description');
+    });
+
+    it('uses default mode "all" when initialRule has no mode', () => {
+      render(<SeriesRuleEditorModal {...defaultProps} initialRule={{ title: 'X' }} />);
+      // "All" segmented button should be active (data-active=true)
+      const allBtn = screen.getAllByText('All').find(
+        (el) => el.closest('[data-testid="segmented-control"]')
+      );
+      expect(allBtn).toBeTruthy();
+    });
+
+    it('resets fields when modal is reopened without initialRule', async () => {
+      const { rerender } = render(
+        <SeriesRuleEditorModal {...defaultProps} initialRule={initialRule} />
+      );
+      rerender(
+        <SeriesRuleEditorModal {...defaultProps} opened={false} initialRule={null} />
+      );
+      rerender(
+        <SeriesRuleEditorModal {...defaultProps} opened={true} initialRule={null} />
+      );
+      expect(screen.getByTestId('input-title')).toHaveValue('');
+      expect(screen.getByTestId('textarea-description')).toHaveValue('');
+    });
+  });
+
+  // ── Channel loading ───────────────────────────────────────────────────────
+
+  describe('channel loading', () => {
+    it('calls getChannelsSummary when modal opens', async () => {
+      render(<SeriesRuleEditorModal {...defaultProps} />);
+      await waitFor(() => {
+        expect(getChannelsSummary).toHaveBeenCalled();
+      });
+    });
+
+    it('does not call getChannelsSummary when modal is closed', () => {
+      render(<SeriesRuleEditorModal {...defaultProps} opened={false} />);
+      expect(getChannelsSummary).not.toHaveBeenCalled();
+    });
+
+    it('handles getChannelsSummary rejection gracefully', async () => {
+      vi.mocked(getChannelsSummary).mockRejectedValue(new Error('Network error'));
+      render(<SeriesRuleEditorModal {...defaultProps} />);
+      // Should not throw; channel options just empty
+      await waitFor(() => {
+        expect(getChannelsSummary).toHaveBeenCalled();
+      });
+    });
+  });
+
+  // ── TVG options ───────────────────────────────────────────────────────────
+
+  describe('EPG channel options', () => {
+    it('calls getTvgOptions with tvgs from store', () => {
+      render(<SeriesRuleEditorModal {...defaultProps} />);
+      expect(getTvgOptions).toHaveBeenCalledWith(mockTvgs);
+    });
+  });
+
+  // ── Preview ───────────────────────────────────────────────────────────────
+
+  describe('preview', () => {
+    it('does not call previewSeriesRule when title, description, and tvg_id are all empty', async () => {
+      render(<SeriesRuleEditorModal {...defaultProps} />);
+      await waitFor(() => expect(getChannelsSummary).toHaveBeenCalled());
+      expect(previewSeriesRule).not.toHaveBeenCalled();
+    });
+
+    it('calls previewSeriesRule when title is entered', async () => {
+      render(<SeriesRuleEditorModal {...defaultProps} />);
+      fireEvent.change(screen.getByTestId('input-title'), {
+        target: { value: 'My Show' },
+      });
+      await waitFor(() => {
+        expect(previewSeriesRule).toHaveBeenCalledWith(
+          expect.objectContaining({ title: 'My Show' }),
+          expect.any(Object)
+        );
+      });
+    });
+
+    it('calls previewSeriesRule when description is entered', async () => {
+      render(<SeriesRuleEditorModal {...defaultProps} />);
+      fireEvent.change(screen.getByTestId('textarea-description'), {
+        target: { value: 'some words' },
+      });
+      await waitFor(() => {
+        expect(previewSeriesRule).toHaveBeenCalledWith(
+          expect.objectContaining({ description: 'some words' }),
+          expect.any(Object)
+        );
+      });
+    });
+
+    it('renders preview match results', async () => {
+      vi.mocked(previewSeriesRule).mockResolvedValue(mockPreviewResponse);
+      render(<SeriesRuleEditorModal {...defaultProps} />);
+      fireEvent.change(screen.getByTestId('input-title'), {
+        target: { value: 'Match Show' },
+      });
+      await waitFor(() => {
+        expect(screen.getByText(/Match Show/)).toBeInTheDocument();
+      });
+    });
+
+    it('renders preview badge with match count', async () => {
+      vi.mocked(previewSeriesRule).mockResolvedValue({ matches: [{ id: 'p1', title: 'X' }], total: 5, epg_found: true });
+      render(<SeriesRuleEditorModal {...defaultProps} />);
+      fireEvent.change(screen.getByTestId('input-title'), {
+        target: { value: 'X' },
+      });
+      await waitFor(() => {
+        expect(screen.getByTestId('badge')).toHaveTextContent('1 of 5');
+      });
+    });
+
+    it('shows preview error alert when previewSeriesRule rejects', async () => {
+      vi.mocked(previewSeriesRule).mockRejectedValue(new Error('Preview failed'));
+      render(<SeriesRuleEditorModal {...defaultProps} />);
+      fireEvent.change(screen.getByTestId('input-title'), {
+        target: { value: 'Boom' },
+      });
+      await waitFor(() => {
+        expect(screen.getByTestId('alert')).toBeInTheDocument();
+        expect(screen.getByTestId('alert')).toHaveTextContent('Preview failed');
+      });
+    });
+
+    it('shows "No EPG channel matches" warning when epg_found is false and tvg_id is set', async () => {
+      vi.mocked(previewSeriesRule).mockResolvedValue({
+        matches: [],
+        total: 0,
+        epg_found: false,
+      });
+      render(<SeriesRuleEditorModal {...defaultProps} initialRule={{ tvg_id: 'tvg-999', title: 'X' }} />);
+      await waitFor(() => {
+        expect(screen.getByText(/No EPG channel matches this tvg_id/)).toBeInTheDocument();
+      });
+    });
+
+    it('shows warn alert when preview.warn is true', async () => {
+      vi.mocked(previewSeriesRule).mockResolvedValue({
+        matches: Array(50).fill({ id: 'x', title: 'X' }),
+        total: 50,
+        epg_found: true,
+        warn: true,
+      });
+      render(<SeriesRuleEditorModal {...defaultProps} />);
+      fireEvent.change(screen.getByTestId('input-title'), {
+        target: { value: 'X' },
+      });
+      await waitFor(() => {
+        expect(screen.getByText(/This rule matches many programs/)).toBeInTheDocument();
+      });
+    });
+
+    it('shows "No matching upcoming programs" when matches empty and filter set', async () => {
+      vi.mocked(previewSeriesRule).mockResolvedValue({
+        matches: [],
+        total: 0,
+        epg_found: true,
+      });
+      render(<SeriesRuleEditorModal {...defaultProps} />);
+      fireEvent.change(screen.getByTestId('input-title'), {
+        target: { value: 'Unknown Show' },
+      });
+      await waitFor(() => {
+        expect(
+          screen.getByText(/No matching upcoming programs/)
+        ).toBeInTheDocument();
+      });
+    });
+
+    it('renders sub_title in preview match', async () => {
+      vi.mocked(previewSeriesRule).mockResolvedValue(mockPreviewResponse);
+      render(<SeriesRuleEditorModal {...defaultProps} />);
+      fireEvent.change(screen.getByTestId('input-title'), {
+        target: { value: 'Match Show' },
+      });
+      await waitFor(() => {
+        expect(screen.getByText(/Episode 1/)).toBeInTheDocument();
+      });
+    });
+
+    it('renders "(NEW)" marker for new episodes in preview', async () => {
+      vi.mocked(previewSeriesRule).mockResolvedValue(mockPreviewResponse);
+      render(<SeriesRuleEditorModal {...defaultProps} />);
+      fireEvent.change(screen.getByTestId('input-title'), {
+        target: { value: 'Match Show' },
+      });
+      await waitFor(() => {
+        expect(screen.getByText(/(NEW)/)).toBeInTheDocument();
+      });
+    });
+  });
+
+  // ── handleSave ────────────────────────────────────────────────────────────
+
+  describe('handleSave', () => {
+    const renderWithTitle = () => {
+      render(<SeriesRuleEditorModal {...defaultProps} />);
+      fireEvent.change(screen.getByTestId('input-title'), {
+        target: { value: 'My Show' },
+      });
+    };
+
+    it('calls createSeriesRule with correct payload', async () => {
+      renderWithTitle();
+      fireEvent.click(screen.getByText('Save rule'));
+      await waitFor(() => {
+        expect(createSeriesRule).toHaveBeenCalledWith(
+          expect.objectContaining({ title: 'My Show', mode: 'all' })
+        );
+      });
+    });
+
+    it('calls evaluateSeriesRulesByTvgId after createSeriesRule', async () => {
+      renderWithTitle();
+      fireEvent.click(screen.getByText('Save rule'));
+      await waitFor(() => {
+        expect(evaluateSeriesRulesByTvgId).toHaveBeenCalled();
+      });
+    });
+
+    it('calls fetchRecordings after save', async () => {
+      const { mockFetchRecordings } = setupMocks();
+      renderWithTitle();
+      fireEvent.click(screen.getByText('Save rule'));
+      await waitFor(() => {
+        expect(mockFetchRecordings).toHaveBeenCalled();
+      });
+    });
+
+    it('calls showNotification on success', async () => {
+      renderWithTitle();
+      fireEvent.click(screen.getByText('Save rule'));
+      await waitFor(() => {
+        expect(showNotification).toHaveBeenCalledWith(
+          expect.objectContaining({ title: 'Series rule saved' })
+        );
+      });
+    });
+
+    it('calls onSaved callback on success', async () => {
+      renderWithTitle();
+      fireEvent.click(screen.getByText('Save rule'));
+      await waitFor(() => {
+        expect(defaultProps.onSaved).toHaveBeenCalled();
+      });
+    });
+
+    it('calls onClose after save', async () => {
+      renderWithTitle();
+      fireEvent.click(screen.getByText('Save rule'));
+      await waitFor(() => {
+        expect(defaultProps.onClose).toHaveBeenCalled();
+      });
+    });
+
+    it('does not call showNotification when createSeriesRule throws', async () => {
+      vi.mocked(createSeriesRule).mockRejectedValue(new Error('Server error'));
+      renderWithTitle();
+      fireEvent.click(screen.getByText('Save rule'));
+      await waitFor(() => {
+        expect(createSeriesRule).toHaveBeenCalled();
+      });
+      expect(showNotification).not.toHaveBeenCalled();
+    });
+
+    it('does not crash when evaluateSeriesRulesByTvgId throws', async () => {
+      vi.mocked(evaluateSeriesRulesByTvgId).mockRejectedValue(new Error('eval fail'));
+      renderWithTitle();
+      await expect(
+        waitFor(() => {
+          fireEvent.click(screen.getByText('Save rule'));
+        })
+      ).resolves.not.toThrow();
+    });
+
+    it('does not crash when fetchRecordings throws', async () => {
+      useChannelsStore.getState = vi.fn().mockReturnValue({
+        fetchRecordings: vi.fn().mockRejectedValue(new Error('fetch fail')),
+      });
+      renderWithTitle();
+      await expect(
+        waitFor(() => {
+          fireEvent.click(screen.getByText('Save rule'));
+        })
+      ).resolves.not.toThrow();
+    });
+
+    it('includes channel_id in payload when channelId is set', async () => {
+      vi.mocked(getChannelsSummary).mockResolvedValue(mockChannels);
+      render(<SeriesRuleEditorModal {...defaultProps} initialRule={{ channel_id: 10, title: 'Show' }} />);
+      fireEvent.click(screen.getByText('Save rule'));
+      await waitFor(() => {
+        expect(createSeriesRule).toHaveBeenCalledWith(
+          expect.objectContaining({ channel_id: 10 })
+        );
+      });
+    });
+
+    it('omits channel_id from payload when no channel selected', async () => {
+      renderWithTitle();
+      fireEvent.click(screen.getByText('Save rule'));
+      await waitFor(() => {
+        const call = vi.mocked(createSeriesRule).mock.calls[0][0];
+        expect(call).not.toHaveProperty('channel_id');
+      });
+    });
+  });
+
+  // ── Cancel button ─────────────────────────────────────────────────────────
+
+  describe('Cancel button', () => {
+    it('calls onClose when Cancel is clicked', () => {
+      render(<SeriesRuleEditorModal {...defaultProps} />);
+      fireEvent.click(screen.getByText('Cancel'));
+      expect(defaultProps.onClose).toHaveBeenCalled();
+    });
+  });
+
+  // ── SegmentedControl interactions ─────────────────────────────────────────
+
+  describe('SegmentedControl', () => {
+    it('changes title mode when SegmentedControl is clicked', () => {
+      render(<SeriesRuleEditorModal {...defaultProps} />);
+      fireEvent.click(screen.getAllByText('Contains').find((el) => el.closest('[data-testid="segmented-control"]')));
+      // No error thrown; state updated without crash
+    });
+
+    it('changes episode mode to "New only"', () => {
+      render(<SeriesRuleEditorModal {...defaultProps} />);
+      fireEvent.click(screen.getByText('New only'));
+      // Payload mode becomes 'new'; verify via save
+      fireEvent.change(screen.getByTestId('input-title'), {
+        target: { value: 'Test' },
+      });
+      fireEvent.click(screen.getByText('Save rule'));
+      waitFor(() => {
+        expect(createSeriesRule).toHaveBeenCalledWith(
+          expect.objectContaining({ mode: 'new' })
+        );
+      });
+    });
+  });
+});
\ No newline at end of file
diff --git a/frontend/src/components/forms/__tests__/Stream.test.jsx b/frontend/src/components/forms/__tests__/Stream.test.jsx
new file mode 100644
index 00000000..18fe3b75
--- /dev/null
+++ b/frontend/src/components/forms/__tests__/Stream.test.jsx
@@ -0,0 +1,566 @@
+import { render, screen, fireEvent, waitFor } from '@testing-library/react';
+import { describe, it, expect, vi, beforeEach } from 'vitest';
+
+// ── Module-level form state (survives re-renders, accessible in beforeEach) ───
+const __form = { values: {}, resetSpy: null };
+
+// ── Store mocks ────────────────────────────────────────────────────────────────
+vi.mock('../../../store/streamProfiles.jsx', () => ({ default: vi.fn() }));
+vi.mock('../../../store/channels.jsx', () => ({ default: vi.fn() }));
+
+// ── Utility mocks ──────────────────────────────────────────────────────────────
+vi.mock('../../../utils/forms/StreamUtils.js', () => ({
+  addStream: vi.fn(),
+  getResolver: vi.fn(() => undefined),
+  updateStream: vi.fn(),
+}));
+
+// ── react-hook-form ────────────────────────────────────────────────────────────
+vi.mock('react-hook-form', async () => {
+  const React = await import('react');
+  return {
+    useForm: vi.fn(({ defaultValues } = {}) => {
+      const [formValues, setFormValues] = React.useState(() => {
+        const vals = defaultValues || {};
+        Object.assign(__form.values, vals);
+        return vals;
+      });
+
+      const updateField = (name, value) => {
+        __form.values[name] = value;
+        setFormValues((prev) => ({ ...prev, [name]: value }));
+      };
+
+      const register = (name) => ({
+        name,
+        value: __form.values[name] ?? '',
+        onChange: (e) => updateField(name, e.target.value),
+        onBlur: () => {},
+      });
+
+      const setValue = (name, value) => updateField(name, value);
+
+      const watch = (name) => formValues[name];
+
+      const handleSubmit = (onSubmit) => (e) => {
+        e?.preventDefault?.();
+        return onSubmit({ ...__form.values });
+      };
+
+      // Keep reset stable across re-renders so useEffect([defaultValues, reset])
+      // in Stream.jsx does not fire on every render and cause an infinite loop.
+      const resetImpl = React.useCallback((newValues) => {
+        const vals = newValues || defaultValues || {};
+        Object.assign(__form.values, vals);
+        setFormValues({ ...vals });
+      }, []); // eslint-disable-line react-hooks/exhaustive-deps
+
+      const resetRef = React.useRef(null);
+      if (!resetRef.current) {
+        resetRef.current = vi.fn((...args) => resetImpl(...args));
+        __form.resetSpy = resetRef.current;
+      }
+      const reset = resetRef.current;
+
+      return {
+        register,
+        handleSubmit,
+        formState: { errors: {}, isSubmitting: false },
+        reset,
+        setValue,
+        watch,
+      };
+    }),
+  };
+});
+
+// ── @mantine/core ──────────────────────────────────────────────────────────────
+vi.mock('@mantine/core', () => ({
+  Button: ({ children, type, disabled }) => (
+    <button type={type} disabled={disabled}>
+      {children}
+    </button>
+  ),
+  Flex: ({ children }) => <div>{children}</div>,
+  Modal: ({ children, opened, onClose, title }) =>
+    opened ? (
+      <div data-testid="modal">
+        <div data-testid="modal-title">{title}</div>
+        <button data-testid="modal-close" onClick={onClose}>
+          ×
+        </button>
+        {children}
+      </div>
+    ) : null,
+  Select: ({ label, value, onChange, data, placeholder, error }) => (
+    <div>
+      <label>{label}</label>
+      <select
+        data-testid={`select-${label?.replace(/\s+/g, '-').toLowerCase()}`}
+        value={value ?? ''}
+        onChange={(e) => onChange(e.target.value || null)}
+      >
+        <option value="">{placeholder ?? `-- ${label} --`}</option>
+        {(data ?? []).map((opt) => (
+          <option key={opt.value} value={opt.value}>
+            {opt.label}
+          </option>
+        ))}
+      </select>
+      {error && <span data-testid={`error-${label}`}>{error}</span>}
+    </div>
+  ),
+  TextInput: ({ label, name, value, onChange, error, ...rest }) => (
+    <div>
+      <label htmlFor={name}>{label}</label>
+      <input
+        id={name}
+        name={name}
+        data-testid={`input-${label?.replace(/\s+/g, '-').toLowerCase()}`}
+        value={value ?? ''}
+        onChange={onChange}
+        {...rest}
+      />
+      {error && <span data-testid={`error-${label}`}>{error}</span>}
+    </div>
+  ),
+}));
+
+// ── Imports after mocks ────────────────────────────────────────────────────────
+import Stream from '../Stream';
+import useStreamProfilesStore from '../../../store/streamProfiles.jsx';
+import useChannelsStore from '../../../store/channels.jsx';
+import * as StreamUtils from '../../../utils/forms/StreamUtils.js';
+
+// ── Shared test data ───────────────────────────────────────────────────────────
+const mockProfiles = [
+  { id: 1, name: 'Default' },
+  { id: 2, name: 'HD Profile' },
+];
+
+const mockChannelGroups = {
+  10: { id: 10, name: 'Sports' },
+  20: { id: 20, name: 'News' },
+};
+
+const makeStream = (overrides = {}) => ({
+  id: 'stream-1',
+  name: 'Test Stream',
+  url: 'http://example.com/stream',
+  channel_group: 10,
+  stream_profile_id: 1,
+  ...overrides,
+});
+
+const setupMocks = () => {
+  vi.mocked(useStreamProfilesStore).mockImplementation((sel) =>
+    sel({ profiles: mockProfiles })
+  );
+  vi.mocked(useChannelsStore).mockImplementation((sel) =>
+    sel({ channelGroups: mockChannelGroups })
+  );
+  vi.mocked(StreamUtils.addStream).mockResolvedValue(undefined);
+  vi.mocked(StreamUtils.updateStream).mockResolvedValue(undefined);
+};
+
+const defaultProps = (overrides = {}) => ({
+  stream: null,
+  isOpen: true,
+  onClose: vi.fn(),
+  ...overrides,
+});
+
+// ─────────────────────────────────────────────────────────────────────────────
+
+describe('Stream', () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+    // Reset module-level form state before each test
+    __form.values = {};
+    setupMocks();
+  });
+
+  // ── Visibility ─────────────────────────────────────────────────────────────
+
+  describe('visibility', () => {
+    it('renders the modal when isOpen is true', () => {
+      render(<Stream {...defaultProps()} />);
+      expect(screen.getByTestId('modal')).toBeInTheDocument();
+    });
+
+    it('does not render when isOpen is false', () => {
+      render(<Stream {...defaultProps({ isOpen: false })} />);
+      expect(screen.queryByTestId('modal')).not.toBeInTheDocument();
+    });
+
+    it('renders "Stream" as the modal title', () => {
+      render(<Stream {...defaultProps()} />);
+      expect(screen.getByTestId('modal-title')).toHaveTextContent('Stream');
+    });
+
+    it('calls onClose when modal close button is clicked', () => {
+      const onClose = vi.fn();
+      render(<Stream {...defaultProps({ onClose })} />);
+      fireEvent.click(screen.getByTestId('modal-close'));
+      expect(onClose).toHaveBeenCalled();
+    });
+  });
+
+  // ── Form fields ────────────────────────────────────────────────────────────
+
+  describe('form fields', () => {
+    it('renders Stream Name input', () => {
+      render(<Stream {...defaultProps()} />);
+      expect(screen.getByTestId('input-stream-name')).toBeInTheDocument();
+    });
+
+    it('renders Stream URL input', () => {
+      render(<Stream {...defaultProps()} />);
+      expect(screen.getByTestId('input-stream-url')).toBeInTheDocument();
+    });
+
+    it('renders Group select', () => {
+      render(<Stream {...defaultProps()} />);
+      expect(screen.getByTestId('select-group')).toBeInTheDocument();
+    });
+
+    it('renders Stream Profile select', () => {
+      render(<Stream {...defaultProps()} />);
+      expect(screen.getByTestId('select-stream-profile')).toBeInTheDocument();
+    });
+
+    it('renders Submit button', () => {
+      render(<Stream {...defaultProps()} />);
+      expect(screen.getByText('Submit')).toBeInTheDocument();
+    });
+
+    it('populates Group select with channel groups', () => {
+      render(<Stream {...defaultProps()} />);
+      expect(screen.getByText('Sports')).toBeInTheDocument();
+      expect(screen.getByText('News')).toBeInTheDocument();
+    });
+
+    it('populates Stream Profile select with profiles', () => {
+      render(<Stream {...defaultProps()} />);
+      expect(screen.getByText('Default')).toBeInTheDocument();
+      expect(screen.getByText('HD Profile')).toBeInTheDocument();
+    });
+
+    it('shows "Optional" placeholder for Stream Profile', () => {
+      render(<Stream {...defaultProps()} />);
+      expect(screen.getByText('Optional')).toBeInTheDocument();
+    });
+  });
+
+  // ── Default values ─────────────────────────────────────────────────────────
+
+  describe('default values', () => {
+    it('pre-fills name from stream prop', () => {
+      render(<Stream {...defaultProps({ stream: makeStream() })} />);
+      expect(screen.getByTestId('input-stream-name')).toHaveValue('Test Stream');
+    });
+
+    it('pre-fills url from stream prop', () => {
+      render(<Stream {...defaultProps({ stream: makeStream() })} />);
+      expect(screen.getByTestId('input-stream-url')).toHaveValue(
+        'http://example.com/stream'
+      );
+    });
+
+    it('pre-selects group from stream prop', () => {
+      render(<Stream {...defaultProps({ stream: makeStream() })} />);
+      expect(screen.getByTestId('select-group')).toHaveValue('10');
+    });
+
+    it('pre-selects stream profile from stream prop', () => {
+      render(<Stream {...defaultProps({ stream: makeStream() })} />);
+      expect(screen.getByTestId('select-stream-profile')).toHaveValue('1');
+    });
+
+    it('renders empty name when no stream provided', () => {
+      render(<Stream {...defaultProps()} />);
+      expect(screen.getByTestId('input-stream-name')).toHaveValue('');
+    });
+
+    it('renders empty url when no stream provided', () => {
+      render(<Stream {...defaultProps()} />);
+      expect(screen.getByTestId('input-stream-url')).toHaveValue('');
+    });
+
+    it('renders empty group when stream has no channel_group', () => {
+      render(
+        <Stream {...defaultProps({ stream: makeStream({ channel_group: null }) })} />
+      );
+      expect(screen.getByTestId('select-group')).toHaveValue('');
+    });
+
+    it('renders empty profile when stream has no stream_profile_id', () => {
+      render(
+        <Stream
+          {...defaultProps({ stream: makeStream({ stream_profile_id: null }) })}
+        />
+      );
+      expect(screen.getByTestId('select-stream-profile')).toHaveValue('');
+    });
+  });
+
+  // ── Create stream ──────────────────────────────────────────────────────────
+
+  describe('create stream (no existing stream)', () => {
+    it('calls addStream on submit when no stream id', async () => {
+      render(<Stream {...defaultProps()} />);
+
+      fireEvent.change(screen.getByTestId('input-stream-name'), {
+        target: { value: 'New Stream' },
+      });
+      fireEvent.change(screen.getByTestId('input-stream-url'), {
+        target: { value: 'http://new.stream/live' },
+      });
+
+      fireEvent.submit(screen.getByRole('button', { name: 'Submit' }).closest('form'));
+
+      await waitFor(() => {
+        expect(StreamUtils.addStream).toHaveBeenCalledWith(
+          expect.objectContaining({
+            name: 'New Stream',
+            url: 'http://new.stream/live',
+          })
+        );
+      });
+    });
+
+    it('does not call updateStream when creating', async () => {
+      render(<Stream {...defaultProps()} />);
+
+      fireEvent.change(screen.getByTestId('input-stream-name'), {
+        target: { value: 'New Stream' },
+      });
+      fireEvent.change(screen.getByTestId('input-stream-url'), {
+        target: { value: 'http://new.stream' },
+      });
+
+      fireEvent.submit(
+        screen.getByRole('button', { name: 'Submit' }).closest('form')
+      );
+
+      await waitFor(() => {
+        expect(StreamUtils.updateStream).not.toHaveBeenCalled();
+      });
+    });
+
+    it('calls onClose after successful create', async () => {
+      const onClose = vi.fn();
+      render(<Stream {...defaultProps({ onClose })} />);
+
+      fireEvent.change(screen.getByTestId('input-stream-name'), {
+        target: { value: 'New Stream' },
+      });
+      fireEvent.change(screen.getByTestId('input-stream-url'), {
+        target: { value: 'http://new.stream' },
+      });
+
+      fireEvent.submit(
+        screen.getByRole('button', { name: 'Submit' }).closest('form')
+      );
+
+      await waitFor(() => {
+        expect(onClose).toHaveBeenCalled();
+      });
+    });
+
+    it('converts channel_group string to integer in payload', async () => {
+      render(<Stream {...defaultProps()} />);
+
+      fireEvent.change(screen.getByTestId('input-stream-name'), {
+        target: { value: 'S' },
+      });
+      fireEvent.change(screen.getByTestId('input-stream-url'), {
+        target: { value: 'http://x.com' },
+      });
+      fireEvent.change(screen.getByTestId('select-group'), {
+        target: { value: '10' },
+      });
+
+      fireEvent.submit(
+        screen.getByRole('button', { name: 'Submit' }).closest('form')
+      );
+
+      await waitFor(() => {
+        expect(StreamUtils.addStream).toHaveBeenCalledWith(
+          expect.objectContaining({ channel_group: 10 })
+        );
+      });
+    });
+
+    it('sets channel_group to null when no group selected', async () => {
+      render(<Stream {...defaultProps()} />);
+
+      fireEvent.change(screen.getByTestId('input-stream-name'), {
+        target: { value: 'S' },
+      });
+      fireEvent.change(screen.getByTestId('input-stream-url'), {
+        target: { value: 'http://x.com' },
+      });
+
+      fireEvent.submit(
+        screen.getByRole('button', { name: 'Submit' }).closest('form')
+      );
+
+      await waitFor(() => {
+        const call = vi.mocked(StreamUtils.addStream).mock.calls[0][0];
+        expect(call.channel_group).toBeNull();
+      });
+    });
+
+    it('converts stream_profile_id string to integer in payload', async () => {
+      render(<Stream {...defaultProps()} />);
+
+      fireEvent.change(screen.getByTestId('input-stream-name'), {
+        target: { value: 'S' },
+      });
+      fireEvent.change(screen.getByTestId('input-stream-url'), {
+        target: { value: 'http://x.com' },
+      });
+      fireEvent.change(screen.getByTestId('select-stream-profile'), {
+        target: { value: '2' },
+      });
+
+      fireEvent.submit(
+        screen.getByRole('button', { name: 'Submit' }).closest('form')
+      );
+
+      await waitFor(() => {
+        expect(StreamUtils.addStream).toHaveBeenCalledWith(
+          expect.objectContaining({ stream_profile_id: 2 })
+        );
+      });
+    });
+
+    it('sets stream_profile_id to null when no profile selected', async () => {
+      render(<Stream {...defaultProps()} />);
+
+      fireEvent.change(screen.getByTestId('input-stream-name'), {
+        target: { value: 'S' },
+      });
+      fireEvent.change(screen.getByTestId('input-stream-url'), {
+        target: { value: 'http://x.com' },
+      });
+
+      fireEvent.submit(
+        screen.getByRole('button', { name: 'Submit' }).closest('form')
+      );
+
+      await waitFor(() => {
+        const call = vi.mocked(StreamUtils.addStream).mock.calls[0][0];
+        expect(call.stream_profile_id).toBeNull();
+      });
+    });
+  });
+
+  // ── Update stream ──────────────────────────────────────────────────────────
+
+  describe('update stream (existing stream)', () => {
+    it('calls updateStream with the stream id on submit', async () => {
+      render(<Stream {...defaultProps({ stream: makeStream() })} />);
+
+      fireEvent.submit(
+        screen.getByRole('button', { name: 'Submit' }).closest('form')
+      );
+
+      await waitFor(() => {
+        expect(StreamUtils.updateStream).toHaveBeenCalledWith(
+          'stream-1',
+          expect.objectContaining({
+            name: 'Test Stream',
+            url: 'http://example.com/stream',
+          })
+        );
+      });
+    });
+
+    it('does not call addStream when updating', async () => {
+      render(<Stream {...defaultProps({ stream: makeStream() })} />);
+
+      fireEvent.submit(
+        screen.getByRole('button', { name: 'Submit' }).closest('form')
+      );
+
+      await waitFor(() => {
+        expect(StreamUtils.addStream).not.toHaveBeenCalled();
+      });
+    });
+
+    it('calls onClose after successful update', async () => {
+      const onClose = vi.fn();
+      render(<Stream {...defaultProps({ stream: makeStream(), onClose })} />);
+
+      fireEvent.submit(
+        screen.getByRole('button', { name: 'Submit' }).closest('form')
+      );
+
+      await waitFor(() => {
+        expect(onClose).toHaveBeenCalled();
+      });
+    });
+
+    it('converts channel_group back to integer for update payload', async () => {
+      render(<Stream {...defaultProps({ stream: makeStream() })} />);
+
+      fireEvent.submit(
+        screen.getByRole('button', { name: 'Submit' }).closest('form')
+      );
+
+      await waitFor(() => {
+        expect(StreamUtils.updateStream).toHaveBeenCalledWith(
+          'stream-1',
+          expect.objectContaining({ channel_group: 10 })
+        );
+      });
+    });
+
+    it('converts stream_profile_id back to integer for update payload', async () => {
+      render(<Stream {...defaultProps({ stream: makeStream() })} />);
+
+      fireEvent.submit(
+        screen.getByRole('button', { name: 'Submit' }).closest('form')
+      );
+
+      await waitFor(() => {
+        expect(StreamUtils.updateStream).toHaveBeenCalledWith(
+          'stream-1',
+          expect.objectContaining({ stream_profile_id: 1 })
+        );
+      });
+    });
+  });
+
+  // ── getResolver ────────────────────────────────────────────────────────────
+
+  describe('getResolver', () => {
+    it('calls getResolver on mount', () => {
+      render(<Stream {...defaultProps()} />);
+      expect(StreamUtils.getResolver).toHaveBeenCalled();
+    });
+  });
+
+  // ── Form reset on stream change ────────────────────────────────────────────
+
+  describe('form reset', () => {
+    it('resets the form when stream prop changes', () => {
+      const { rerender } = render(<Stream {...defaultProps()} />);
+
+      rerender(<Stream {...defaultProps({ stream: makeStream() })} />);
+
+      expect(__form.resetSpy).toHaveBeenCalled();
+    });
+  });
+
+  // ── Submit button state ────────────────────────────────────────────────────
+
+  describe('submit button', () => {
+    it('Submit button is not disabled by default', () => {
+      render(<Stream {...defaultProps()} />);
+      expect(screen.getByText('Submit')).not.toBeDisabled();
+    });
+  });
+});
diff --git a/frontend/src/components/forms/__tests__/StreamProfile.test.jsx b/frontend/src/components/forms/__tests__/StreamProfile.test.jsx
new file mode 100644
index 00000000..50237950
--- /dev/null
+++ b/frontend/src/components/forms/__tests__/StreamProfile.test.jsx
@@ -0,0 +1,607 @@
+import { render, screen, fireEvent, waitFor } from '@testing-library/react';
+import { describe, it, expect, vi, beforeEach } from 'vitest';
+
+// ── Module-level form state ────────────────────────────────────────────────────
+const __form = { values: {}, resetSpy: null };
+
+// ── Store mocks ────────────────────────────────────────────────────────────────
+vi.mock('../../../store/userAgents', () => ({ default: vi.fn() }));
+
+// ── Utility mocks ──────────────────────────────────────────────────────────────
+vi.mock('../../../utils/forms/StreamProfileUtils.js', () => ({
+  addStreamProfile: vi.fn(),
+  updateStreamProfile: vi.fn(),
+  getResolver: vi.fn(() => undefined),
+  toCommandSelection: vi.fn((cmd) => {
+    const builtins = ['ffmpeg', 'streamlink', 'cvlc', 'yt-dlp'];
+    return builtins.includes(cmd) ? cmd : '__custom__';
+  }),
+  BUILT_IN_COMMANDS: [
+    { value: 'ffmpeg', label: 'FFmpeg' },
+    { value: 'streamlink', label: 'Streamlink' },
+    { value: 'cvlc', label: 'VLC' },
+    { value: 'yt-dlp', label: 'yt-dlp' },
+    { value: '__custom__', label: 'Custom…' },
+  ],
+  COMMAND_EXAMPLES: {
+    ffmpeg: '-user_agent {userAgent} -i {streamUrl} -c copy -f mpegts pipe:1',
+    streamlink: '{streamUrl} --http-header User-Agent={userAgent} best --stdout',
+  },
+}));
+
+// ── react-hook-form ────────────────────────────────────────────────────────────
+vi.mock('react-hook-form', async () => {
+  const React = await import('react');
+  return {
+    useForm: vi.fn(({ defaultValues } = {}) => {
+      const [formValues, setFormValues] = React.useState(() => {
+        const vals = defaultValues || {};
+        Object.assign(__form.values, vals);
+        return vals;
+      });
+
+      const updateField = (name, value) => {
+        __form.values[name] = value;
+        setFormValues((prev) => ({ ...prev, [name]: value }));
+      };
+
+      const register = (name) => ({
+        name,
+        value: __form.values[name] ?? '',
+        onChange: (e) => updateField(name, e.target.value),
+        onBlur: () => {},
+      });
+
+      const setValue = (name, value) => updateField(name, value);
+      const watch = (name) => formValues[name];
+
+      const handleSubmit = (onSubmit) => (e) => {
+        e?.preventDefault?.();
+        return onSubmit({ ...__form.values });
+      };
+
+      const resetImpl = React.useCallback((newValues) => {
+        const vals = newValues || defaultValues || {};
+        Object.assign(__form.values, vals);
+        setFormValues({ ...vals });
+      }, []); // eslint-disable-line react-hooks/exhaustive-deps
+
+      const resetRef = React.useRef(null);
+      if (!resetRef.current) {
+        resetRef.current = vi.fn((...args) => resetImpl(...args));
+        __form.resetSpy = resetRef.current;
+      }
+
+      return {
+        register,
+        handleSubmit,
+        formState: { errors: {}, isSubmitting: false },
+        reset: resetRef.current,
+        setValue,
+        watch,
+      };
+    }),
+  };
+});
+
+// ── @mantine/core ──────────────────────────────────────────────────────────────
+vi.mock('@mantine/core', () => ({
+  Button: ({ children, type, disabled }) => (
+    <button type={type} disabled={disabled}>
+      {children}
+    </button>
+  ),
+  Checkbox: ({ label, checked, onChange }) => (
+    <div>
+      <label htmlFor="checkbox-is-active">{label}</label>
+      <input
+        id="checkbox-is-active"
+        data-testid="checkbox-is-active"
+        type="checkbox"
+        checked={checked ?? false}
+        onChange={(e) => onChange({ currentTarget: { checked: e.target.checked } })}
+      />
+    </div>
+  ),
+  Flex: ({ children }) => <div>{children}</div>,
+  Modal: ({ children, opened, onClose, title }) =>
+    opened ? (
+      <div data-testid="modal">
+        <div data-testid="modal-title">{title}</div>
+        <button data-testid="modal-close" onClick={onClose}>
+          ×
+        </button>
+        {children}
+      </div>
+    ) : null,
+  Select: ({ label, value, onChange, data, placeholder, error, clearable, disabled, description }) => (
+    <div>
+      <label>{label}</label>
+      {description && <div>{description}</div>}
+      <select
+        data-testid={`select-${label?.replace(/\s+/g, '-').toLowerCase()}`}
+        value={value ?? ''}
+        disabled={disabled}
+        onChange={(e) => onChange(e.target.value || (clearable ? null : ''))}
+      >
+        <option value="">{placeholder ?? `-- ${label} --`}</option>
+        {(data ?? []).map((opt) => (
+          <option key={opt.value} value={opt.value}>
+            {opt.label}
+          </option>
+        ))}
+      </select>
+      {error && <span data-testid={`error-${label}`}>{error}</span>}
+    </div>
+  ),
+  Stack: ({ children }) => <div>{children}</div>,
+  Textarea: ({ label, name, value, onChange, error, placeholder, description, disabled, ...rest }) => (
+    <div>
+      <label htmlFor={name}>{label}</label>
+      {description && <div data-testid={`desc-${label?.replace(/\s+/g, '-').toLowerCase()}`}>{description}</div>}
+      <textarea
+        id={name}
+        name={name}
+        data-testid={`textarea-${label?.replace(/\s+/g, '-').toLowerCase()}`}
+        value={value ?? ''}
+        placeholder={placeholder}
+        onChange={onChange}
+        disabled={disabled}
+        {...rest}
+      />
+      {error && <span data-testid={`error-${label}`}>{error}</span>}
+    </div>
+  ),
+  TextInput: ({ label, name, value, onChange, error, disabled, ...rest }) => (
+    <div>
+      <label htmlFor={name}>{label}</label>
+      <input
+        id={name}
+        name={name}
+        data-testid={`input-${label?.replace(/\s+/g, '-').toLowerCase()}`}
+        value={value ?? ''}
+        onChange={onChange}
+        disabled={disabled}
+        {...rest}
+      />
+      {error && <span data-testid={`error-${label}`}>{error}</span>}
+    </div>
+  ),
+}));
+
+// ── Imports after mocks ────────────────────────────────────────────────────────
+import StreamProfile from '../StreamProfile';
+import useUserAgentsStore from '../../../store/userAgents';
+import * as StreamProfileUtils from '../../../utils/forms/StreamProfileUtils.js';
+
+// ── Shared test data ───────────────────────────────────────────────────────────
+const mockUserAgents = [
+  { id: 1, name: 'Chrome' },
+  { id: 2, name: 'Firefox' },
+];
+
+const makeProfile = (overrides = {}) => ({
+  id: 'sp-1',
+  name: 'My Profile',
+  command: 'ffmpeg',
+  parameters: '-i {streamUrl}',
+  is_active: true,
+  user_agent: '1',
+  locked: false,
+  ...overrides,
+});
+
+const setupMocks = () => {
+  vi.mocked(useUserAgentsStore).mockImplementation((sel) =>
+    sel({ userAgents: mockUserAgents })
+  );
+  vi.mocked(StreamProfileUtils.addStreamProfile).mockResolvedValue(undefined);
+  vi.mocked(StreamProfileUtils.updateStreamProfile).mockResolvedValue(undefined);
+  vi.mocked(StreamProfileUtils.getResolver).mockReturnValue(undefined);
+  vi.mocked(StreamProfileUtils.toCommandSelection).mockImplementation((cmd) => {
+    const builtins = ['ffmpeg', 'streamlink', 'cvlc', 'yt-dlp'];
+    return builtins.includes(cmd) ? cmd : '__custom__';
+  });
+};
+
+const defaultProps = (overrides = {}) => ({
+  profile: null,
+  isOpen: true,
+  onClose: vi.fn(),
+  ...overrides,
+});
+
+describe('StreamProfile', () => {
+  beforeEach(() => {
+    vi.resetAllMocks();
+    __form.values = {};
+    __form.resetSpy = null;
+    setupMocks();
+  });
+
+  // ── Visibility ──────────────────────────────────────────────────────────────
+
+  describe('visibility', () => {
+    it('renders the modal when isOpen is true', () => {
+      render(<StreamProfile {...defaultProps()} />);
+      expect(screen.getByTestId('modal')).toBeInTheDocument();
+    });
+
+    it('does not render the modal when isOpen is false', () => {
+      render(<StreamProfile {...defaultProps({ isOpen: false })} />);
+      expect(screen.queryByTestId('modal')).not.toBeInTheDocument();
+    });
+
+    it('renders "Stream Profile" as the modal title', () => {
+      render(<StreamProfile {...defaultProps()} />);
+      expect(screen.getByTestId('modal-title')).toHaveTextContent('Stream Profile');
+    });
+
+    it('calls onClose when modal close button is clicked', () => {
+      const onClose = vi.fn();
+      render(<StreamProfile {...defaultProps({ onClose })} />);
+      fireEvent.click(screen.getByTestId('modal-close'));
+      expect(onClose).toHaveBeenCalled();
+    });
+  });
+
+  // ── Form fields ─────────────────────────────────────────────────────────────
+
+  describe('form fields', () => {
+    it('renders Name input', () => {
+      render(<StreamProfile {...defaultProps()} />);
+      expect(screen.getByTestId('input-name')).toBeInTheDocument();
+    });
+
+    it('renders Command select', () => {
+      render(<StreamProfile {...defaultProps()} />);
+      expect(screen.getByTestId('select-command')).toBeInTheDocument();
+    });
+
+    it('renders Parameters textarea', () => {
+      render(<StreamProfile {...defaultProps()} />);
+      expect(screen.getByTestId('textarea-parameters')).toBeInTheDocument();
+    });
+
+    it('renders User-Agent select', () => {
+      render(<StreamProfile {...defaultProps()} />);
+      expect(screen.getByTestId('select-user-agent')).toBeInTheDocument();
+    });
+
+    it('renders Is Active checkbox', () => {
+      render(<StreamProfile {...defaultProps()} />);
+      expect(screen.getByTestId('checkbox-is-active')).toBeInTheDocument();
+    });
+
+    it('renders Save button', () => {
+      render(<StreamProfile {...defaultProps()} />);
+      expect(screen.getByText('Save')).toBeInTheDocument();
+    });
+
+    it('populates Command select with built-in options', () => {
+      render(<StreamProfile {...defaultProps()} />);
+      expect(screen.getByText('FFmpeg')).toBeInTheDocument();
+      expect(screen.getByText('Streamlink')).toBeInTheDocument();
+      expect(screen.getAllByText('Custom…').length).toBeGreaterThan(0);
+    });
+
+    it('populates User-Agent select with user agents', () => {
+      render(<StreamProfile {...defaultProps()} />);
+      expect(screen.getByText('Chrome')).toBeInTheDocument();
+      expect(screen.getByText('Firefox')).toBeInTheDocument();
+    });
+  });
+
+  // ── Default values ──────────────────────────────────────────────────────────
+
+  describe('default values', () => {
+    it('pre-fills name from profile prop', () => {
+      render(<StreamProfile {...defaultProps({ profile: makeProfile() })} />);
+      expect(screen.getByTestId('input-name')).toHaveValue('My Profile');
+    });
+
+    it('pre-fills parameters from profile prop', () => {
+      render(<StreamProfile {...defaultProps({ profile: makeProfile() })} />);
+      expect(screen.getByTestId('textarea-parameters')).toHaveValue('-i {streamUrl}');
+    });
+
+    it('pre-selects command from profile prop', () => {
+      render(<StreamProfile {...defaultProps({ profile: makeProfile() })} />);
+      expect(screen.getByTestId('select-command')).toHaveValue('ffmpeg');
+    });
+
+    it('pre-selects user-agent from profile prop', () => {
+      render(<StreamProfile {...defaultProps({ profile: makeProfile() })} />);
+      expect(screen.getByTestId('select-user-agent')).toHaveValue('1');
+    });
+
+    it('checkbox is checked when is_active is true', () => {
+      render(<StreamProfile {...defaultProps({ profile: makeProfile() })} />);
+      expect(screen.getByTestId('checkbox-is-active')).toBeChecked();
+    });
+
+    it('checkbox is unchecked when is_active is false', () => {
+      render(
+        <StreamProfile
+          {...defaultProps({ profile: makeProfile({ is_active: false }) })}
+        />
+      );
+      expect(screen.getByTestId('checkbox-is-active')).not.toBeChecked();
+    });
+
+    it('defaults name to empty string when no profile', () => {
+      render(<StreamProfile {...defaultProps()} />);
+      expect(screen.getByTestId('input-name')).toHaveValue('');
+    });
+
+    it('defaults parameters to empty string when no profile', () => {
+      render(<StreamProfile {...defaultProps()} />);
+      expect(screen.getByTestId('textarea-parameters')).toHaveValue('');
+    });
+  });
+
+  // ── Command selection ───────────────────────────────────────────────────────
+
+  describe('command selection', () => {
+    it('does not show Custom Command input when a built-in is selected', () => {
+      render(<StreamProfile {...defaultProps({ profile: makeProfile() })} />);
+      expect(screen.queryByTestId('input-custom-command')).not.toBeInTheDocument();
+    });
+
+    it('shows Custom Command input when Custom… is selected', () => {
+      render(<StreamProfile {...defaultProps()} />);
+      fireEvent.change(screen.getByTestId('select-command'), {
+        target: { value: '__custom__' },
+      });
+      expect(screen.getByTestId('input-custom-command')).toBeInTheDocument();
+    });
+
+    it('hides Custom Command input when switching from custom back to built-in', () => {
+      render(<StreamProfile {...defaultProps()} />);
+      fireEvent.change(screen.getByTestId('select-command'), {
+        target: { value: '__custom__' },
+      });
+      fireEvent.change(screen.getByTestId('select-command'), {
+        target: { value: 'ffmpeg' },
+      });
+      expect(screen.queryByTestId('input-custom-command')).not.toBeInTheDocument();
+    });
+
+    it('shows Custom Command input when profile has a custom command', () => {
+      vi.mocked(StreamProfileUtils.toCommandSelection).mockReturnValue('__custom__');
+      render(
+        <StreamProfile
+          {...defaultProps({ profile: makeProfile({ command: '/usr/bin/mycmd' }) })}
+        />
+      );
+      expect(screen.getByTestId('input-custom-command')).toBeInTheDocument();
+    });
+
+    it('sets command form value when built-in is selected', () => {
+      render(<StreamProfile {...defaultProps()} />);
+      fireEvent.change(screen.getByTestId('select-command'), {
+        target: { value: 'streamlink' },
+      });
+      expect(__form.values.command).toBe('streamlink');
+    });
+
+    it('clears command form value when Custom… is selected', () => {
+      render(<StreamProfile {...defaultProps({ profile: makeProfile() })} />);
+      fireEvent.change(screen.getByTestId('select-command'), {
+        target: { value: '__custom__' },
+      });
+      expect(__form.values.command).toBe('');
+    });
+
+    it('shows parameters example hint for ffmpeg', () => {
+      const { container } = render(
+        <StreamProfile {...defaultProps({ profile: makeProfile() })} />
+      );
+      expect(container.textContent).toMatch(/-user_agent \{userAgent\}/);
+    });
+  });
+
+  // ── Is Active checkbox ──────────────────────────────────────────────────────
+
+  describe('Is Active checkbox', () => {
+    it('toggles is_active to false when unchecked', () => {
+      render(<StreamProfile {...defaultProps({ profile: makeProfile() })} />);
+      fireEvent.click(screen.getByTestId('checkbox-is-active'));
+      expect(__form.values.is_active).toBe(false);
+    });
+
+    it('toggles is_active to true when checked', () => {
+      render(
+        <StreamProfile
+          {...defaultProps({ profile: makeProfile({ is_active: false }) })}
+        />
+      );
+      fireEvent.click(screen.getByTestId('checkbox-is-active'));
+      expect(__form.values.is_active).toBe(true);
+    });
+  });
+
+  // ── User-Agent select ───────────────────────────────────────────────────────
+
+  describe('User-Agent select', () => {
+    it('updates user_agent form value when changed', () => {
+      render(<StreamProfile {...defaultProps()} />);
+      fireEvent.change(screen.getByTestId('select-user-agent'), {
+        target: { value: '2' },
+      });
+      expect(__form.values.user_agent).toBe('2');
+    });
+
+    it('sets user_agent to empty string when cleared', () => {
+      render(<StreamProfile {...defaultProps({ profile: makeProfile() })} />);
+      fireEvent.change(screen.getByTestId('select-user-agent'), {
+        target: { value: '' },
+      });
+      expect(__form.values.user_agent).toBe('');
+    });
+  });
+
+  // ── Locked profile ──────────────────────────────────────────────────────────
+
+  describe('locked profile', () => {
+    it('disables Name input when profile is locked', () => {
+      render(
+        <StreamProfile
+          {...defaultProps({ profile: makeProfile({ locked: true }) })}
+        />
+      );
+      expect(screen.getByTestId('input-name')).toBeDisabled();
+    });
+
+    it('disables Command select when profile is locked', () => {
+      render(
+        <StreamProfile
+          {...defaultProps({ profile: makeProfile({ locked: true }) })}
+        />
+      );
+      expect(screen.getByTestId('select-command')).toBeDisabled();
+    });
+
+    it('disables Parameters textarea when profile is locked', () => {
+      render(
+        <StreamProfile
+          {...defaultProps({ profile: makeProfile({ locked: true }) })}
+        />
+      );
+      expect(screen.getByTestId('textarea-parameters')).toBeDisabled();
+    });
+
+    it('does not disable inputs when profile is not locked', () => {
+      render(<StreamProfile {...defaultProps({ profile: makeProfile() })} />);
+      expect(screen.getByTestId('input-name')).not.toBeDisabled();
+    });
+
+    it('does not disable inputs when no profile is provided', () => {
+      render(<StreamProfile {...defaultProps()} />);
+      expect(screen.getByTestId('input-name')).not.toBeDisabled();
+    });
+  });
+
+  // ── Create profile ──────────────────────────────────────────────────────────
+
+  describe('create profile (no existing profile)', () => {
+    it('calls addStreamProfile on submit when no profile id', async () => {
+      render(<StreamProfile {...defaultProps()} />);
+
+      fireEvent.change(screen.getByTestId('input-name'), {
+        target: { value: 'New Profile' },
+      });
+      fireEvent.change(screen.getByTestId('select-command'), {
+        target: { value: 'ffmpeg' },
+      });
+
+      fireEvent.submit(screen.getByText('Save').closest('form'));
+
+      await waitFor(() => {
+        expect(StreamProfileUtils.addStreamProfile).toHaveBeenCalledWith(
+          expect.objectContaining({ name: 'New Profile' })
+        );
+      });
+    });
+
+    it('does not call updateStreamProfile when creating', async () => {
+      render(<StreamProfile {...defaultProps()} />);
+
+      fireEvent.change(screen.getByTestId('input-name'), {
+        target: { value: 'New Profile' },
+      });
+
+      fireEvent.submit(screen.getByText('Save').closest('form'));
+
+      await waitFor(() => {
+        expect(StreamProfileUtils.updateStreamProfile).not.toHaveBeenCalled();
+      });
+    });
+
+    it('calls onClose after successful create', async () => {
+      const onClose = vi.fn();
+      render(<StreamProfile {...defaultProps({ onClose })} />);
+
+      fireEvent.change(screen.getByTestId('input-name'), {
+        target: { value: 'New Profile' },
+      });
+      fireEvent.submit(screen.getByText('Save').closest('form'));
+
+      await waitFor(() => {
+        expect(onClose).toHaveBeenCalled();
+      });
+    });
+  });
+
+  // ── Update profile ──────────────────────────────────────────────────────────
+
+  describe('update profile (existing profile)', () => {
+    it('calls updateStreamProfile with the profile id on submit', async () => {
+      render(<StreamProfile {...defaultProps({ profile: makeProfile() })} />);
+
+      fireEvent.submit(screen.getByText('Save').closest('form'));
+
+      await waitFor(() => {
+        expect(StreamProfileUtils.updateStreamProfile).toHaveBeenCalledWith(
+          'sp-1',
+          expect.objectContaining({ name: 'My Profile' })
+        );
+      });
+    });
+
+    it('does not call addStreamProfile when updating', async () => {
+      render(<StreamProfile {...defaultProps({ profile: makeProfile() })} />);
+
+      fireEvent.submit(screen.getByText('Save').closest('form'));
+
+      await waitFor(() => {
+        expect(StreamProfileUtils.addStreamProfile).not.toHaveBeenCalled();
+      });
+    });
+
+    it('calls onClose after successful update', async () => {
+      const onClose = vi.fn();
+      render(
+        <StreamProfile {...defaultProps({ profile: makeProfile(), onClose })} />
+      );
+
+      fireEvent.submit(screen.getByText('Save').closest('form'));
+
+      await waitFor(() => {
+        expect(onClose).toHaveBeenCalled();
+      });
+    });
+  });
+
+  // ── Form reset ──────────────────────────────────────────────────────────────
+
+  describe('form reset', () => {
+    it('resets the form when profile prop changes', () => {
+      const { rerender } = render(<StreamProfile {...defaultProps()} />);
+
+      rerender(<StreamProfile {...defaultProps({ profile: makeProfile() })} />);
+
+      expect(__form.resetSpy).toHaveBeenCalled();
+    });
+
+    it('calls reset after successful submit', async () => {
+      render(<StreamProfile {...defaultProps()} />);
+
+      fireEvent.submit(screen.getByText('Save').closest('form'));
+
+      await waitFor(() => {
+        expect(__form.resetSpy).toHaveBeenCalled();
+      });
+    });
+  });
+
+  // ── getResolver ─────────────────────────────────────────────────────────────
+
+  describe('getResolver', () => {
+    it('calls getResolver on mount', () => {
+      render(<StreamProfile {...defaultProps()} />);
+      expect(StreamProfileUtils.getResolver).toHaveBeenCalled();
+    });
+  });
+});
+
diff --git a/frontend/src/components/forms/__tests__/SuperuserForm.test.jsx b/frontend/src/components/forms/__tests__/SuperuserForm.test.jsx
new file mode 100644
index 00000000..b9b0dcbb
--- /dev/null
+++ b/frontend/src/components/forms/__tests__/SuperuserForm.test.jsx
@@ -0,0 +1,332 @@
+import { render, screen, fireEvent, waitFor } from '@testing-library/react';
+import { describe, it, expect, vi, beforeEach } from 'vitest';
+
+// ── Asset mock ─────────────────────────────────────────────────────────────────
+vi.mock('../../../assets/logo.png', () => ({ default: 'logo.png' }));
+
+// ── API mock ───────────────────────────────────────────────────────────────────
+vi.mock('../../../api', () => ({
+  default: {
+    createSuperUser: vi.fn(),
+  },
+}));
+
+// ── Store mocks ────────────────────────────────────────────────────────────────
+vi.mock('../../../store/auth', () => ({ default: vi.fn() }));
+vi.mock('../../../store/settings', () => ({ default: vi.fn() }));
+
+// ── @mantine/core ──────────────────────────────────────────────────────────────
+vi.mock('@mantine/core', () => ({
+  Button: ({ children, type, fullWidth }) => (
+    <button type={type} data-fullwidth={fullWidth}>
+      {children}
+    </button>
+  ),
+  Center: ({ children, style }) => <div style={style}>{children}</div>,
+  Divider: ({ style }) => <hr style={style} />,
+  Image: ({ src, alt }) => <img src={src} alt={alt} />,
+  Paper: ({ children, style }) => <div style={style}>{children}</div>,
+  Stack: ({ children }) => <div>{children}</div>,
+  Text: ({ children, size, color, align }) => (
+    <span data-size={size} data-color={color} data-align={align}>
+      {children}
+    </span>
+  ),
+  TextInput: ({ label, name, value, onChange, required, type }) => (
+    <div>
+      <label htmlFor={name}>{label}</label>
+      <input
+        id={name}
+        name={name}
+        data-testid={`input-${name}`}
+        type={type ?? 'text'}
+        value={value}
+        onChange={onChange}
+        required={required}
+      />
+    </div>
+  ),
+  Title: ({ children, order, align }) => {
+    const Tag = `h${order ?? 1}`;
+    return <Tag data-align={align}>{children}</Tag>;
+  },
+}));
+
+// ── Imports after mocks ────────────────────────────────────────────────────────
+import SuperuserForm from '../SuperuserForm';
+import API from '../../../api';
+import useAuthStore from '../../../store/auth';
+import useSettingsStore from '../../../store/settings';
+
+// ── Helpers ────────────────────────────────────────────────────────────────────
+const setupMocks = ({
+  version = {},
+  fetchVersion = vi.fn(),
+  setSuperuserExists = vi.fn(),
+} = {}) => {
+  vi.mocked(useAuthStore).mockImplementation((sel) =>
+    sel({ setSuperuserExists })
+  );
+  vi.mocked(useSettingsStore).mockImplementation((sel) =>
+    sel({ fetchVersion, version })
+  );
+  return { fetchVersion, setSuperuserExists };
+};
+
+describe('SuperuserForm', () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  // ── Rendering ──────────────────────────────────────────────────────────────
+
+  describe('rendering', () => {
+    it('renders the Dispatcharr title', () => {
+      setupMocks();
+      render(<SuperuserForm />);
+      expect(screen.getByText('Dispatcharr')).toBeInTheDocument();
+    });
+
+    it('renders the welcome message', () => {
+      setupMocks();
+      render(<SuperuserForm />);
+      expect(
+        screen.getByText(
+          'Welcome! Create your Super User Account to get started.'
+        )
+      ).toBeInTheDocument();
+    });
+
+    it('renders the logo image', () => {
+      setupMocks();
+      render(<SuperuserForm />);
+      expect(screen.getByAltText('Dispatcharr Logo')).toBeInTheDocument();
+    });
+
+    it('renders Username input', () => {
+      setupMocks();
+      render(<SuperuserForm />);
+      expect(screen.getByTestId('input-username')).toBeInTheDocument();
+    });
+
+    it('renders Password input with type="password"', () => {
+      setupMocks();
+      render(<SuperuserForm />);
+      const input = screen.getByTestId('input-password');
+      expect(input).toBeInTheDocument();
+      expect(input).toHaveAttribute('type', 'password');
+    });
+
+    it('renders Email input with type="email"', () => {
+      setupMocks();
+      render(<SuperuserForm />);
+      const input = screen.getByTestId('input-email');
+      expect(input).toBeInTheDocument();
+      expect(input).toHaveAttribute('type', 'email');
+    });
+
+    it('renders the Create Account button', () => {
+      setupMocks();
+      render(<SuperuserForm />);
+      expect(
+        screen.getByRole('button', { name: 'Create Account' })
+      ).toBeInTheDocument();
+    });
+
+    it('does not render version text when version is not loaded', () => {
+      setupMocks({ version: {} });
+      render(<SuperuserForm />);
+      expect(screen.queryByText(/^v/)).not.toBeInTheDocument();
+    });
+
+    it('renders version text when version is loaded', () => {
+      setupMocks({ version: { version: '1.2.3' } });
+      render(<SuperuserForm />);
+      expect(screen.getByText('v1.2.3')).toBeInTheDocument();
+    });
+  });
+
+  // ── useEffect ─────────────────────────────────────────────────────────────
+
+  describe('useEffect', () => {
+    it('calls fetchVersion on mount', () => {
+      const { fetchVersion } = setupMocks();
+      render(<SuperuserForm />);
+      expect(fetchVersion).toHaveBeenCalledTimes(1);
+    });
+
+    it('does not call fetchVersion again on re-render with same fetchVersion ref', () => {
+      const { fetchVersion } = setupMocks();
+      const { rerender } = render(<SuperuserForm />);
+      rerender(<SuperuserForm />);
+      // fetchVersion is stable, so useEffect should only fire once
+      expect(fetchVersion).toHaveBeenCalledTimes(1);
+    });
+  });
+
+  // ── Form field interactions ────────────────────────────────────────────────
+
+  describe('form field interactions', () => {
+    it('updates username field when typed', () => {
+      setupMocks();
+      render(<SuperuserForm />);
+      fireEvent.change(screen.getByTestId('input-username'), {
+        target: { name: 'username', value: 'admin' },
+      });
+      expect(screen.getByTestId('input-username')).toHaveValue('admin');
+    });
+
+    it('updates password field when typed', () => {
+      setupMocks();
+      render(<SuperuserForm />);
+      fireEvent.change(screen.getByTestId('input-password'), {
+        target: { name: 'password', value: 'secret123' },
+      });
+      expect(screen.getByTestId('input-password')).toHaveValue('secret123');
+    });
+
+    it('updates email field when typed', () => {
+      setupMocks();
+      render(<SuperuserForm />);
+      fireEvent.change(screen.getByTestId('input-email'), {
+        target: { name: 'email', value: 'admin@example.com' },
+      });
+      expect(screen.getByTestId('input-email')).toHaveValue('admin@example.com');
+    });
+
+    it('initializes all fields as empty strings', () => {
+      setupMocks();
+      render(<SuperuserForm />);
+      expect(screen.getByTestId('input-username')).toHaveValue('');
+      expect(screen.getByTestId('input-password')).toHaveValue('');
+      expect(screen.getByTestId('input-email')).toHaveValue('');
+    });
+  });
+
+  // ── Form submission ────────────────────────────────────────────────────────
+
+  describe('form submission', () => {
+    it('calls API.createSuperUser with form values on submit', async () => {
+      setupMocks();
+      vi.mocked(API.createSuperUser).mockResolvedValue({
+        superuser_exists: false,
+      });
+      render(<SuperuserForm />);
+
+      fireEvent.change(screen.getByTestId('input-username'), {
+        target: { name: 'username', value: 'admin' },
+      });
+      fireEvent.change(screen.getByTestId('input-password'), {
+        target: { name: 'password', value: 'secret' },
+      });
+      fireEvent.change(screen.getByTestId('input-email'), {
+        target: { name: 'email', value: 'admin@test.com' },
+      });
+
+      fireEvent.submit(
+        screen.getByRole('button', { name: 'Create Account' }).closest('form')
+      );
+
+      await waitFor(() => {
+        expect(API.createSuperUser).toHaveBeenCalledWith({
+          username: 'admin',
+          password: 'secret',
+          email: 'admin@test.com',
+        });
+      });
+    });
+
+    it('calls setSuperuserExists(true) when response.superuser_exists is true', async () => {
+      const { setSuperuserExists } = setupMocks();
+      vi.mocked(API.createSuperUser).mockResolvedValue({
+        superuser_exists: true,
+      });
+      render(<SuperuserForm />);
+
+      fireEvent.change(screen.getByTestId('input-username'), {
+        target: { name: 'username', value: 'admin' },
+      });
+      fireEvent.submit(
+        screen.getByRole('button', { name: 'Create Account' }).closest('form')
+      );
+
+      await waitFor(() => {
+        expect(setSuperuserExists).toHaveBeenCalledWith(true);
+      });
+    });
+
+    it('does not call setSuperuserExists when response.superuser_exists is false', async () => {
+      const { setSuperuserExists } = setupMocks();
+      vi.mocked(API.createSuperUser).mockResolvedValue({
+        superuser_exists: false,
+      });
+      render(<SuperuserForm />);
+
+      fireEvent.submit(
+        screen.getByRole('button', { name: 'Create Account' }).closest('form')
+      );
+
+      await waitFor(() => {
+        expect(API.createSuperUser).toHaveBeenCalled();
+      });
+
+      expect(setSuperuserExists).not.toHaveBeenCalled();
+    });
+
+    it('does not throw when API.createSuperUser rejects', async () => {
+      setupMocks();
+      vi.mocked(API.createSuperUser).mockRejectedValue(new Error('Network'));
+      render(<SuperuserForm />);
+
+      fireEvent.submit(
+        screen.getByRole('button', { name: 'Create Account' }).closest('form')
+      );
+
+      await expect(
+        waitFor(() => expect(API.createSuperUser).toHaveBeenCalled())
+      ).resolves.not.toThrow();
+    });
+
+    it('does not call setSuperuserExists when API throws', async () => {
+      const { setSuperuserExists } = setupMocks();
+      vi.mocked(API.createSuperUser).mockRejectedValue(new Error('Network'));
+      render(<SuperuserForm />);
+
+      fireEvent.submit(
+        screen.getByRole('button', { name: 'Create Account' }).closest('form')
+      );
+
+      await waitFor(() => {
+        expect(API.createSuperUser).toHaveBeenCalled();
+      });
+
+      expect(setSuperuserExists).not.toHaveBeenCalled();
+    });
+
+    it('submits with empty email when email field is left blank', async () => {
+      setupMocks();
+      vi.mocked(API.createSuperUser).mockResolvedValue({
+        superuser_exists: false,
+      });
+      render(<SuperuserForm />);
+
+      fireEvent.change(screen.getByTestId('input-username'), {
+        target: { name: 'username', value: 'admin' },
+      });
+      fireEvent.change(screen.getByTestId('input-password'), {
+        target: { name: 'password', value: 'secret' },
+      });
+
+      fireEvent.submit(
+        screen.getByRole('button', { name: 'Create Account' }).closest('form')
+      );
+
+      await waitFor(() => {
+        expect(API.createSuperUser).toHaveBeenCalledWith(
+          expect.objectContaining({ email: '' })
+        );
+      });
+    });
+  });
+});
+
diff --git a/frontend/src/components/forms/__tests__/User.test.jsx b/frontend/src/components/forms/__tests__/User.test.jsx
new file mode 100644
index 00000000..f73c6a81
--- /dev/null
+++ b/frontend/src/components/forms/__tests__/User.test.jsx
@@ -0,0 +1,686 @@
+import { render, screen, fireEvent, waitFor } from '@testing-library/react';
+import { describe, it, expect, vi, beforeEach } from 'vitest';
+
+// ── Constants ──────────────────────────────────────────────────────────────────
+vi.mock('../../../constants', () => ({
+  USER_LEVELS: { ADMIN: 1, STREAMER: 2, USER: 3 },
+  USER_LEVEL_LABELS: { 1: 'Admin', 2: 'Streamer', 3: 'User' },
+}));
+
+// ── Store mocks ────────────────────────────────────────────────────────────────
+vi.mock('../../../store/channels', () => ({ default: vi.fn() }));
+vi.mock('../../../store/outputProfiles', () => ({ default: vi.fn() }));
+vi.mock('../../../store/auth', () => ({ default: vi.fn() }));
+
+// ── Utility mocks ──────────────────────────────────────────────────────────────
+vi.mock('../../../utils', () => ({ copyToClipboard: vi.fn() }));
+
+vi.mock('../../../utils/forms/UserUtils.js', () => ({
+  createUser: vi.fn(),
+  updateUser: vi.fn(),
+  generateApiKey: vi.fn(),
+  revokeApiKey: vi.fn(),
+  formValuesToPayload: vi.fn(),
+  getFormInitialValues: vi.fn(() => ({})),
+  getFormValidators: vi.fn(() => ({})),
+  userToFormValues: vi.fn(() => ({})),
+}));
+
+// ── Mantine form ───────────────────────────────────────────────────────────────
+const mockForm = {
+  getInputProps: vi.fn(() => ({})),
+  key: vi.fn((k) => k),
+  setValues: vi.fn(),
+  setFieldValue: vi.fn(),
+  reset: vi.fn(),
+  getValues: vi.fn(() => ({ user_level: '3' })),
+  onSubmit: vi.fn((fn) => (e) => { e?.preventDefault?.(); return fn(); }),
+  submitting: false,
+};
+
+vi.mock('@mantine/form', () => ({
+  useForm: vi.fn(() => mockForm),
+}));
+
+// ── lucide-react ───────────────────────────────────────────────────────────────
+vi.mock('lucide-react', () => ({
+  Copy: () => <svg data-testid="icon-copy" />,
+  Key: () => <svg data-testid="icon-key" />,
+  RotateCcwKey: () => <svg data-testid="icon-rotate-ccw-key" />,
+  X: () => <svg data-testid="icon-x" />,
+}));
+
+// ── Mantine core ───────────────────────────────────────────────────────────────
+vi.mock('@mantine/core', () => ({
+  ActionIcon: ({ children, onClick, disabled }) => (
+    <button data-testid="action-icon" onClick={onClick} disabled={disabled}>
+      {children}
+    </button>
+  ),
+  Button: ({ children, onClick, disabled, loading, type, leftSection }) => (
+    <button
+      type={type || 'button'}
+      onClick={onClick}
+      disabled={disabled || loading}
+      data-loading={String(loading)}
+    >
+      {leftSection}
+      {children}
+    </button>
+  ),
+  Group: ({ children }) => <div>{children}</div>,
+  Modal: ({ children, opened, onClose, title }) =>
+    opened ? (
+      <div data-testid="modal">
+        <div data-testid="modal-title">{title}</div>
+        <button data-testid="modal-close" onClick={onClose}>×</button>
+        {children}
+      </div>
+    ) : null,
+  MultiSelect: ({ label, onChange }) => (
+    <div>
+      <label>{label}</label>
+      <input
+        data-testid={`multiselect-${label}`}
+        onChange={(e) => onChange?.(e.target.value ? e.target.value.split(',') : [])}
+      />
+    </div>
+  ),
+  NumberInput: ({ label }) => <div><label>{label}</label><input /></div>,
+  PasswordInput: ({ label, disabled }) => (
+    <div><label>{label}</label><input type="password" disabled={disabled} /></div>
+  ),
+  Select: ({ label, disabled }) => (
+    <div><label>{label}</label><select disabled={disabled} /></div>
+  ),
+  Stack: ({ children }) => <div>{children}</div>,
+  Switch: ({ label }) => <div><label>{label}</label><input type="checkbox" /></div>,
+  Tabs: ({ children }) => <div>{children}</div>,
+  TabsList: ({ children }) => <div>{children}</div>,
+  TabsPanel: ({ children, value }) => <div data-testid={`panel-${value}`}>{children}</div>,
+  TabsTab: ({ children, value }) => <button data-testid={`tab-${value}`}>{children}</button>,
+  TagsInput: ({ label }) => <div><label>{label}</label><input /></div>,
+  Text: ({ children }) => <span>{children}</span>,
+  TextInput: ({ label, value, disabled, rightSection }) => (
+    <div>
+      <label>{label}</label>
+      <input data-testid={`textinput-${label}`} defaultValue={value} disabled={disabled} />
+      {rightSection}
+    </div>
+  ),
+  useMantineTheme: () => ({
+    colors: { red: Array(10).fill('#ff0000') },
+  }),
+}));
+
+// ── Imports after mocks ────────────────────────────────────────────────────────
+import useChannelsStore from '../../../store/channels';
+import useOutputProfilesStore from '../../../store/outputProfiles';
+import useAuthStore from '../../../store/auth';
+import * as UserUtils from '../../../utils/forms/UserUtils.js';
+import { copyToClipboard } from '../../../utils';
+import User from '../User';
+
+// ── Factories ──────────────────────────────────────────────────────────────────
+const makeAdminUser = (overrides = {}) => ({
+  id: 1,
+  username: 'admin',
+  user_level: 1,
+  api_key: null,
+  ...overrides,
+});
+
+const makeRegularUser = (overrides = {}) => ({
+  id: 2,
+  username: 'user1',
+  user_level: 3,
+  api_key: null,
+  ...overrides,
+});
+
+const setupMocks = ({
+  authUser = makeAdminUser(),
+  profiles = {},
+  outputProfiles = [],
+} = {}) => {
+  const mockSetUser = vi.fn();
+
+  vi.mocked(useChannelsStore).mockImplementation((sel) => sel({ profiles }));
+  vi.mocked(useOutputProfilesStore).mockImplementation((sel) =>
+    sel({ profiles: outputProfiles })
+  );
+  vi.mocked(useAuthStore).mockImplementation((sel) =>
+    sel({ user: authUser, setUser: mockSetUser })
+  );
+
+  // Reset form state
+  mockForm.getValues.mockReturnValue({ user_level: '3' });
+  mockForm.onSubmit.mockImplementation(
+    (fn) => (e) => { e?.preventDefault?.(); return fn(); }
+  );
+
+  return { mockSetUser };
+};
+
+// ──────────────────────────────────────────────────────────────────────────────
+
+describe('User', () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+    vi.mocked(UserUtils.createUser).mockResolvedValue({});
+    vi.mocked(UserUtils.updateUser).mockResolvedValue({});
+    vi.mocked(UserUtils.generateApiKey).mockResolvedValue({ key: 'new-api-key' });
+    vi.mocked(UserUtils.revokeApiKey).mockResolvedValue({ success: true });
+    vi.mocked(UserUtils.formValuesToPayload).mockReturnValue({ user_level: 3 });
+    vi.mocked(UserUtils.getFormInitialValues).mockReturnValue({});
+    vi.mocked(UserUtils.getFormValidators).mockReturnValue({});
+    vi.mocked(UserUtils.userToFormValues).mockReturnValue({});
+  });
+
+  // ── Visibility ───────────────────────────────────────────────────────────────
+
+  describe('visibility', () => {
+    it('renders nothing when isOpen is false', () => {
+      setupMocks();
+      render(<User isOpen={false} onClose={vi.fn()} />);
+      expect(screen.queryByTestId('modal')).not.toBeInTheDocument();
+    });
+
+    it('renders the modal when isOpen is true', () => {
+      setupMocks();
+      render(<User isOpen={true} onClose={vi.fn()} />);
+      expect(screen.getByTestId('modal')).toBeInTheDocument();
+    });
+
+    it('calls onClose when the modal close button is clicked', () => {
+      setupMocks();
+      const onClose = vi.fn();
+      render(<User isOpen={true} onClose={onClose} />);
+      fireEvent.click(screen.getByTestId('modal-close'));
+      expect(onClose).toHaveBeenCalled();
+    });
+  });
+
+  // ── Tabs ─────────────────────────────────────────────────────────────────────
+
+  describe('tabs', () => {
+    it('always renders Account, EPG, and API tabs', () => {
+      setupMocks();
+      render(<User isOpen={true} onClose={vi.fn()} />);
+      expect(screen.getByTestId('tab-account')).toBeInTheDocument();
+      expect(screen.getByTestId('tab-epg')).toBeInTheDocument();
+      expect(screen.getByTestId('tab-api')).toBeInTheDocument();
+    });
+
+    it('shows Permissions tab when admin edits another user', () => {
+      setupMocks({ authUser: makeAdminUser() });
+      render(
+        <User isOpen={true} onClose={vi.fn()} user={makeRegularUser()} />
+      );
+      expect(screen.getByTestId('tab-permissions')).toBeInTheDocument();
+    });
+
+    it('hides Permissions tab when admin edits themselves', () => {
+      const admin = makeAdminUser();
+      setupMocks({ authUser: admin });
+      render(<User isOpen={true} onClose={vi.fn()} user={admin} />);
+      expect(screen.queryByTestId('tab-permissions')).not.toBeInTheDocument();
+    });
+
+    it('hides Permissions tab for non-admin user', () => {
+      setupMocks({ authUser: makeRegularUser() });
+      render(
+        <User isOpen={true} onClose={vi.fn()} user={makeRegularUser({ id: 99 })} />
+      );
+      expect(screen.queryByTestId('tab-permissions')).not.toBeInTheDocument();
+    });
+  });
+
+  // ── Admin-only fields ────────────────────────────────────────────────────────
+
+  describe('admin-only fields', () => {
+    it('shows Output Format Override for admin', () => {
+      setupMocks({ authUser: makeAdminUser() });
+      render(
+        <User isOpen={true} onClose={vi.fn()} user={makeRegularUser({ id: 2 })} />
+      );
+      expect(screen.getByText('Output Format Override')).toBeInTheDocument();
+    });
+
+    it('hides Output Format Override for non-admin', () => {
+      setupMocks({ authUser: makeRegularUser() });
+      render(
+        <User isOpen={true} onClose={vi.fn()} user={makeRegularUser({ id: 5 })} />
+      );
+      expect(screen.queryByText('Output Format Override')).not.toBeInTheDocument();
+    });
+
+    it('shows Output Profile Override for admin', () => {
+      setupMocks({ authUser: makeAdminUser() });
+      render(
+        <User isOpen={true} onClose={vi.fn()} user={makeRegularUser({ id: 2 })} />
+      );
+      expect(screen.getByText('Output Profile Override')).toBeInTheDocument();
+    });
+
+    it('shows Allowed IPs for admin', () => {
+      setupMocks({ authUser: makeAdminUser() });
+      render(
+        <User isOpen={true} onClose={vi.fn()} user={makeRegularUser({ id: 2 })} />
+      );
+      expect(screen.getByText('Allowed IPs')).toBeInTheDocument();
+    });
+
+    it('hides Allowed IPs for non-admin', () => {
+      setupMocks({ authUser: makeRegularUser() });
+      render(
+        <User isOpen={true} onClose={vi.fn()} user={makeRegularUser({ id: 5 })} />
+      );
+      expect(screen.queryByText('Allowed IPs')).not.toBeInTheDocument();
+    });
+  });
+
+  // ── API key generation ────────────────────────────────────────────────────────
+
+  describe('API key generation', () => {
+    it('shows "Generate API Key" when no key exists', () => {
+      setupMocks({ authUser: makeAdminUser() });
+      render(
+        <User isOpen={true} onClose={vi.fn()} user={makeRegularUser({ id: 2 })} />
+      );
+      expect(screen.getByText('Generate API Key')).toBeInTheDocument();
+    });
+
+    it('shows "Regenerate API Key" when user already has an api_key', () => {
+      setupMocks({ authUser: makeAdminUser() });
+      render(
+        <User
+          isOpen={true}
+          onClose={vi.fn()}
+          user={makeRegularUser({ id: 2, api_key: 'existing-key' })}
+        />
+      );
+      expect(screen.getByText('Regenerate API Key')).toBeInTheDocument();
+    });
+
+    it('calls generateApiKey and switches button to "Regenerate API Key"', async () => {
+      setupMocks({ authUser: makeAdminUser() });
+      vi.mocked(UserUtils.generateApiKey).mockResolvedValue({ key: 'brand-new-key' });
+
+      render(
+        <User isOpen={true} onClose={vi.fn()} user={makeRegularUser({ id: 2 })} />
+      );
+
+      expect(screen.getByText('Generate API Key')).toBeInTheDocument();
+      fireEvent.click(screen.getByText('Generate API Key'));
+
+      await waitFor(() => {
+        expect(UserUtils.generateApiKey).toHaveBeenCalledWith({ user_id: 2 });
+        expect(screen.getByText('Regenerate API Key')).toBeInTheDocument();
+      });
+    });
+
+    it('also sets the key when response contains raw_key instead of key', async () => {
+      setupMocks({ authUser: makeAdminUser() });
+      vi.mocked(UserUtils.generateApiKey).mockResolvedValue({ raw_key: 'raw-value' });
+
+      render(
+        <User isOpen={true} onClose={vi.fn()} user={makeRegularUser({ id: 2 })} />
+      );
+
+      fireEvent.click(screen.getByText('Generate API Key'));
+
+      await waitFor(() => {
+        expect(screen.getByText('Regenerate API Key')).toBeInTheDocument();
+      });
+    });
+
+    it('does not call generateApiKey when canGenerateKey is false', async () => {
+      // non-admin editing someone else
+      setupMocks({ authUser: makeRegularUser({ id: 5 }) });
+      render(
+        <User isOpen={true} onClose={vi.fn()} user={makeRegularUser({ id: 2 })} />
+      );
+      // No button visible since canGenerateKey is false
+      expect(screen.queryByText('Generate API Key')).not.toBeInTheDocument();
+      expect(UserUtils.generateApiKey).not.toHaveBeenCalled();
+    });
+
+    it('does not update key when generateApiKey returns a response without key/raw_key', async () => {
+      setupMocks({ authUser: makeAdminUser() });
+      vi.mocked(UserUtils.generateApiKey).mockResolvedValue({});
+
+      render(
+        <User isOpen={true} onClose={vi.fn()} user={makeRegularUser({ id: 2 })} />
+      );
+
+      fireEvent.click(screen.getByText('Generate API Key'));
+
+      await waitFor(() => {
+        // button text should NOT change since no key was received
+        expect(screen.getByText('Generate API Key')).toBeInTheDocument();
+      });
+    });
+
+    it('shows the generated API key in a text input', async () => {
+      setupMocks({ authUser: makeAdminUser() });
+      vi.mocked(UserUtils.generateApiKey).mockResolvedValue({ key: 'show-me' });
+
+      render(
+        <User isOpen={true} onClose={vi.fn()} user={makeRegularUser({ id: 2 })} />
+      );
+
+      fireEvent.click(screen.getByText('Generate API Key'));
+
+      await waitFor(() => {
+        const keyInput = screen.getByTestId('textinput-API Key');
+        expect(keyInput).toHaveValue('show-me');
+      });
+    });
+  });
+
+  // ── API key revocation ───────────────────────────────────────────────────────
+
+  describe('API key revocation', () => {
+    it('shows "Revoke API Key" when a key exists', () => {
+      setupMocks({ authUser: makeAdminUser() });
+      render(
+        <User
+          isOpen={true}
+          onClose={vi.fn()}
+          user={makeRegularUser({ id: 2, api_key: 'some-key' })}
+        />
+      );
+      expect(screen.getByText('Revoke API Key')).toBeInTheDocument();
+    });
+
+    it('hides "Revoke API Key" when no key exists', () => {
+      setupMocks({ authUser: makeAdminUser() });
+      render(
+        <User isOpen={true} onClose={vi.fn()} user={makeRegularUser({ id: 2 })} />
+      );
+      expect(screen.queryByText('Revoke API Key')).not.toBeInTheDocument();
+    });
+
+    it('calls revokeApiKey with user_id and clears the key on success', async () => {
+      setupMocks({ authUser: makeAdminUser() });
+
+      render(
+        <User
+          isOpen={true}
+          onClose={vi.fn()}
+          user={makeRegularUser({ id: 2, api_key: 'some-key' })}
+        />
+      );
+
+      fireEvent.click(screen.getByText('Revoke API Key'));
+
+      await waitFor(() => {
+        expect(UserUtils.revokeApiKey).toHaveBeenCalledWith({ user_id: 2 });
+        expect(screen.queryByText('Revoke API Key')).not.toBeInTheDocument();
+        expect(screen.getByText('Generate API Key')).toBeInTheDocument();
+      });
+    });
+
+    it('updates auth store when admin revokes their own key', async () => {
+      const admin = makeAdminUser({ id: 1, api_key: 'my-key' });
+      const { mockSetUser } = setupMocks({ authUser: admin });
+
+      render(<User isOpen={true} onClose={vi.fn()} user={admin} />);
+      fireEvent.click(screen.getByText('Revoke API Key'));
+
+      await waitFor(() => {
+        expect(mockSetUser).toHaveBeenCalledWith(
+          expect.objectContaining({ api_key: null })
+        );
+      });
+    });
+
+    it('does not clear key when revokeApiKey returns success: false', async () => {
+      setupMocks({ authUser: makeAdminUser() });
+      vi.mocked(UserUtils.revokeApiKey).mockResolvedValue({ success: false });
+
+      render(
+        <User
+          isOpen={true}
+          onClose={vi.fn()}
+          user={makeRegularUser({ id: 2, api_key: 'still-here' })}
+        />
+      );
+
+      fireEvent.click(screen.getByText('Revoke API Key'));
+
+      await waitFor(() => {
+        expect(screen.getByText('Revoke API Key')).toBeInTheDocument();
+      });
+    });
+
+    it('does not update auth store when revoking another user\'s key', async () => {
+      const admin = makeAdminUser({ id: 1 });
+      const { mockSetUser } = setupMocks({ authUser: admin });
+
+      render(
+        <User
+          isOpen={true}
+          onClose={vi.fn()}
+          user={makeRegularUser({ id: 2, api_key: 'other-key' })}
+        />
+      );
+
+      fireEvent.click(screen.getByText('Revoke API Key'));
+
+      await waitFor(() => {
+        expect(mockSetUser).not.toHaveBeenCalled();
+      });
+    });
+  });
+
+  // ── Copy to clipboard ────────────────────────────────────────────────────────
+
+  describe('copy API key to clipboard', () => {
+    it('calls copyToClipboard with the current key', () => {
+      setupMocks({ authUser: makeAdminUser() });
+      render(
+        <User
+          isOpen={true}
+          onClose={vi.fn()}
+          user={makeRegularUser({ id: 2, api_key: 'copy-me' })}
+        />
+      );
+
+      const copyButton = screen.getByTestId('icon-copy').closest('button');
+      fireEvent.click(copyButton);
+
+      expect(copyToClipboard).toHaveBeenCalledWith(
+        'copy-me',
+        expect.objectContaining({ successTitle: 'API Key Copied!' })
+      );
+    });
+  });
+
+  // ── Form submission ──────────────────────────────────────────────────────────
+
+  describe('form submission', () => {
+    it('calls createUser when no user prop is given', async () => {
+      setupMocks({ authUser: makeAdminUser() });
+
+      render(<User isOpen={true} onClose={vi.fn()} />);
+      fireEvent.click(screen.getByText('Save'));
+
+      await waitFor(() => {
+        expect(UserUtils.createUser).toHaveBeenCalled();
+      });
+    });
+
+    it('calls updateUser when editing an existing user', async () => {
+      const admin = makeAdminUser();
+      setupMocks({ authUser: admin });
+      vi.mocked(UserUtils.updateUser).mockResolvedValue({ id: 2 });
+
+      render(
+        <User isOpen={true} onClose={vi.fn()} user={makeRegularUser({ id: 2 })} />
+      );
+      fireEvent.click(screen.getByText('Save'));
+
+      await waitFor(() => {
+        expect(UserUtils.updateUser).toHaveBeenCalledWith(
+          2,
+          expect.any(Object),
+          true, // isAdmin
+          admin
+        );
+      });
+    });
+
+    it('updates auth store when admin saves their own profile', async () => {
+      const admin = makeAdminUser({ id: 1 });
+      const updatedAdmin = { ...admin, email: 'new@example.com' };
+      const { mockSetUser } = setupMocks({ authUser: admin });
+      vi.mocked(UserUtils.updateUser).mockResolvedValue(updatedAdmin);
+
+      render(<User isOpen={true} onClose={vi.fn()} user={admin} />);
+      fireEvent.click(screen.getByText('Save'));
+
+      await waitFor(() => {
+        expect(mockSetUser).toHaveBeenCalledWith(updatedAdmin);
+      });
+    });
+
+    it('resets form and calls onClose after successful submission', async () => {
+      setupMocks({ authUser: makeAdminUser() });
+      const onClose = vi.fn();
+
+      render(<User isOpen={true} onClose={onClose} />);
+      fireEvent.click(screen.getByText('Save'));
+
+      await waitFor(() => {
+        expect(mockForm.reset).toHaveBeenCalled();
+        expect(onClose).toHaveBeenCalled();
+      });
+    });
+
+    it('removes password from payload when updating and payload.password is falsy', async () => {
+      const admin = makeAdminUser();
+      setupMocks({ authUser: admin });
+      vi.mocked(UserUtils.formValuesToPayload).mockReturnValue({
+        user_level: 3,
+        password: '',
+      });
+      vi.mocked(UserUtils.updateUser).mockResolvedValue({ id: 2 });
+
+      render(
+        <User isOpen={true} onClose={vi.fn()} user={makeRegularUser({ id: 2 })} />
+      );
+      fireEvent.click(screen.getByText('Save'));
+
+      await waitFor(() => {
+        const payload = vi.mocked(UserUtils.updateUser).mock.calls[0][1];
+        expect(payload).not.toHaveProperty('password');
+      });
+    });
+  });
+
+  // ── useEffect ────────────────────────────────────────────────────────────────
+
+  describe('useEffect on user prop', () => {
+    it('calls userToFormValues and sets form values when user has an id', () => {
+      const user = makeRegularUser({ id: 2 });
+      vi.mocked(UserUtils.userToFormValues).mockReturnValue({ username: 'user1' });
+      setupMocks({ authUser: makeAdminUser() });
+
+      render(<User isOpen={true} onClose={vi.fn()} user={user} />);
+
+      expect(UserUtils.userToFormValues).toHaveBeenCalledWith(user);
+      expect(mockForm.setValues).toHaveBeenCalledWith({ username: 'user1' });
+    });
+
+    it('resets form when no user is provided', () => {
+      setupMocks({ authUser: makeAdminUser() });
+      render(<User isOpen={true} onClose={vi.fn()} />);
+      expect(mockForm.reset).toHaveBeenCalled();
+    });
+  });
+
+  // ── XC password generation ───────────────────────────────────────────────────
+
+  describe('XC password generation', () => {
+    it('calls setValues with a generated xc_password when rotate icon is clicked', () => {
+      setupMocks({ authUser: makeAdminUser() });
+      render(
+        <User isOpen={true} onClose={vi.fn()} user={makeRegularUser({ id: 2 })} />
+      );
+
+      const rotateButton = screen
+        .getByTestId('icon-rotate-ccw-key')
+        .closest('button');
+      fireEvent.click(rotateButton);
+
+      expect(mockForm.setValues).toHaveBeenCalledWith(
+        expect.objectContaining({ xc_password: expect.any(String) })
+      );
+    });
+
+    it('disables the XC password rotate button for non-admin', () => {
+      setupMocks({ authUser: makeRegularUser() });
+      render(
+        <User isOpen={true} onClose={vi.fn()} user={makeRegularUser({ id: 5 })} />
+      );
+
+      const rotateButton = screen
+        .getByTestId('icon-rotate-ccw-key')
+        .closest('button');
+      expect(rotateButton).toBeDisabled();
+    });
+  });
+
+  // ── Channel profiles logic ───────────────────────────────────────────────────
+
+  describe('channel profiles logic', () => {
+    const profiles = { 1: { id: 1, name: 'HD' }, 2: { id: 2, name: 'SD' } };
+
+    it('excludes "All" (0) when other profiles are selected alongside it', () => {
+      setupMocks({ authUser: makeAdminUser(), profiles });
+      render(
+        <User isOpen={true} onClose={vi.fn()} user={makeRegularUser({ id: 2 })} />
+      );
+
+      const multiSelect = screen.getByTestId('multiselect-Channel Profiles');
+      fireEvent.change(multiSelect, { target: { value: '1,2' } });
+
+      expect(mockForm.setFieldValue).toHaveBeenCalledWith(
+        'channel_profiles',
+        expect.not.arrayContaining(['0'])
+      );
+    });
+
+    it('sets only ["0"] when "All" is newly selected', () => {
+      setupMocks({ authUser: makeAdminUser(), profiles });
+      render(
+        <User isOpen={true} onClose={vi.fn()} user={makeRegularUser({ id: 2 })} />
+      );
+
+      const multiSelect = screen.getByTestId('multiselect-Channel Profiles');
+      fireEvent.change(multiSelect, { target: { value: '0' } });
+
+      expect(mockForm.setFieldValue).toHaveBeenCalledWith(
+        'channel_profiles',
+        ['0']
+      );
+    });
+
+    it('allows multiple non-all profiles together', () => {
+      setupMocks({ authUser: makeAdminUser(), profiles });
+      render(
+        <User isOpen={true} onClose={vi.fn()} user={makeRegularUser({ id: 2 })} />
+      );
+
+      const multiSelect = screen.getByTestId('multiselect-Channel Profiles');
+      fireEvent.change(multiSelect, { target: { value: '1,2' } });
+
+      expect(mockForm.setFieldValue).toHaveBeenCalledWith(
+        'channel_profiles',
+        ['1', '2']
+      );
+    });
+  });
+});
\ No newline at end of file
diff --git a/frontend/src/components/forms/__tests__/UserAgent.test.jsx b/frontend/src/components/forms/__tests__/UserAgent.test.jsx
new file mode 100644
index 00000000..2292b8cd
--- /dev/null
+++ b/frontend/src/components/forms/__tests__/UserAgent.test.jsx
@@ -0,0 +1,239 @@
+import { render, screen, fireEvent, waitFor } from '@testing-library/react';
+import { describe, it, expect, vi, beforeEach } from 'vitest';
+
+// ── Utility mocks ──────────────────────────────────────────────────────────────
+vi.mock('../../../utils/forms/UserAgentUtils.js', () => ({
+  addUserAgent: vi.fn(),
+  updateUserAgent: vi.fn(),
+  getResolver: vi.fn(() => undefined),
+}));
+
+// ── Mantine core ───────────────────────────────────────────────────────────────
+vi.mock('@mantine/core', () => ({
+  Button: ({ children, disabled, type }) => (
+    <button type={type} disabled={disabled}>
+      {children}
+    </button>
+  ),
+  Checkbox: ({ label, checked, onChange }) => (
+    <label>
+      <input
+        type="checkbox"
+        data-testid="checkbox-is-active"
+        checked={checked}
+        onChange={onChange}
+      />
+      {label}
+    </label>
+  ),
+  Flex: ({ children }) => <div>{children}</div>,
+  Modal: ({ children, opened, onClose, title }) =>
+    opened ? (
+      <div data-testid="modal">
+        <div data-testid="modal-title">{title}</div>
+        <button data-testid="modal-close" onClick={onClose}>×</button>
+        {children}
+      </div>
+    ) : null,
+  Space: () => <div />,
+  TextInput: ({ label, error, ...rest }) => (
+    <div>
+      <label>{label}</label>
+      <input data-testid={`input-${label}`} aria-label={label} {...rest} />
+      {error && <span data-testid={`error-${label}`}>{error}</span>}
+    </div>
+  ),
+}));
+
+// ── Imports after mocks ────────────────────────────────────────────────────────
+import * as UserAgentUtils from '../../../utils/forms/UserAgentUtils.js';
+import UserAgent from '../UserAgent';
+
+// ── Helpers ────────────────────────────────────────────────────────────────────
+const makeUserAgent = (overrides = {}) => ({
+  id: 1,
+  name: 'Chrome',
+  user_agent: 'Mozilla/5.0',
+  description: 'Chrome browser',
+  is_active: true,
+  ...overrides,
+});
+
+describe('UserAgent', () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+    vi.mocked(UserAgentUtils.addUserAgent).mockResolvedValue({});
+    vi.mocked(UserAgentUtils.updateUserAgent).mockResolvedValue({});
+    vi.mocked(UserAgentUtils.getResolver).mockReturnValue(undefined);
+  });
+
+  // ── Visibility ───────────────────────────────────────────────────────────────
+
+  describe('visibility', () => {
+    it('renders nothing when isOpen is false', () => {
+      render(<UserAgent isOpen={false} onClose={vi.fn()} />);
+      expect(screen.queryByTestId('modal')).not.toBeInTheDocument();
+    });
+
+    it('renders the modal when isOpen is true', () => {
+      render(<UserAgent isOpen={true} onClose={vi.fn()} />);
+      expect(screen.getByTestId('modal')).toBeInTheDocument();
+    });
+
+    it('renders modal title "User-Agent"', () => {
+      render(<UserAgent isOpen={true} onClose={vi.fn()} />);
+      expect(screen.getByTestId('modal-title')).toHaveTextContent('User-Agent');
+    });
+
+    it('calls onClose when modal close button is clicked', () => {
+      const onClose = vi.fn();
+      render(<UserAgent isOpen={true} onClose={onClose} />);
+      fireEvent.click(screen.getByTestId('modal-close'));
+      expect(onClose).toHaveBeenCalled();
+    });
+  });
+
+  // ── Default values ───────────────────────────────────────────────────────────
+
+  describe('default values', () => {
+    it('renders empty fields when no userAgent prop is given', () => {
+      render(<UserAgent isOpen={true} onClose={vi.fn()} />);
+      expect(screen.getByTestId('input-Name')).toHaveValue('');
+      expect(screen.getByTestId('input-User-Agent')).toHaveValue('');
+      expect(screen.getByTestId('input-Description')).toHaveValue('');
+    });
+
+    it('pre-fills fields from userAgent prop', () => {
+      render(
+        <UserAgent isOpen={true} onClose={vi.fn()} userAgent={makeUserAgent()} />
+      );
+      expect(screen.getByTestId('input-Name')).toHaveValue('Chrome');
+      expect(screen.getByTestId('input-User-Agent')).toHaveValue('Mozilla/5.0');
+      expect(screen.getByTestId('input-Description')).toHaveValue('Chrome browser');
+    });
+
+    it('checks Is Active checkbox when userAgent.is_active is true', () => {
+      render(
+        <UserAgent isOpen={true} onClose={vi.fn()} userAgent={makeUserAgent({ is_active: true })} />
+      );
+      expect(screen.getByTestId('checkbox-is-active')).toBeChecked();
+    });
+
+    it('unchecks Is Active checkbox when userAgent.is_active is false', () => {
+      render(
+        <UserAgent isOpen={true} onClose={vi.fn()} userAgent={makeUserAgent({ is_active: false })} />
+      );
+      expect(screen.getByTestId('checkbox-is-active')).not.toBeChecked();
+    });
+
+    it('defaults Is Active to checked when no userAgent prop given', () => {
+      render(<UserAgent isOpen={true} onClose={vi.fn()} />);
+      expect(screen.getByTestId('checkbox-is-active')).toBeChecked();
+    });
+  });
+
+  // ── Field interactions ───────────────────────────────────────────────────────
+
+  describe('field interactions', () => {
+    it('toggles Is Active checkbox', () => {
+      render(
+        <UserAgent isOpen={true} onClose={vi.fn()} userAgent={makeUserAgent({ is_active: true })} />
+      );
+      const checkbox = screen.getByTestId('checkbox-is-active');
+      fireEvent.click(checkbox);
+      expect(checkbox).not.toBeChecked();
+    });
+  });
+
+  // ── Form submission ──────────────────────────────────────────────────────────
+
+  describe('form submission', () => {
+    it('calls addUserAgent when no userAgent id is given', async () => {
+      render(<UserAgent isOpen={true} onClose={vi.fn()} />);
+      fireEvent.click(screen.getByText('Submit'));
+      await waitFor(() => {
+        expect(UserAgentUtils.addUserAgent).toHaveBeenCalled();
+      });
+    });
+
+    it('calls updateUserAgent with the id when editing an existing userAgent', async () => {
+      render(
+        <UserAgent isOpen={true} onClose={vi.fn()} userAgent={makeUserAgent()} />
+      );
+      fireEvent.click(screen.getByText('Submit'));
+      await waitFor(() => {
+        expect(UserAgentUtils.updateUserAgent).toHaveBeenCalledWith(
+          1,
+          expect.objectContaining({ name: 'Chrome' })
+        );
+      });
+    });
+
+    it('does not call addUserAgent when updating', async () => {
+      render(
+        <UserAgent isOpen={true} onClose={vi.fn()} userAgent={makeUserAgent()} />
+      );
+      fireEvent.click(screen.getByText('Submit'));
+      await waitFor(() => {
+        expect(UserAgentUtils.addUserAgent).not.toHaveBeenCalled();
+      });
+    });
+
+    it('does not call updateUserAgent when creating', async () => {
+      render(<UserAgent isOpen={true} onClose={vi.fn()} />);
+      fireEvent.click(screen.getByText('Submit'));
+      await waitFor(() => {
+        expect(UserAgentUtils.updateUserAgent).not.toHaveBeenCalled();
+      });
+    });
+
+    it('calls onClose after successful submission', async () => {
+      const onClose = vi.fn();
+      render(<UserAgent isOpen={true} onClose={onClose} />);
+      fireEvent.click(screen.getByText('Submit'));
+      await waitFor(() => {
+        expect(onClose).toHaveBeenCalled();
+      });
+    });
+
+    it('passes is_active value in the submitted payload', async () => {
+      render(<UserAgent isOpen={true} onClose={vi.fn()} />);
+      const checkbox = screen.getByTestId('checkbox-is-active');
+      fireEvent.click(checkbox); // uncheck it
+      fireEvent.click(screen.getByText('Submit'));
+      await waitFor(() => {
+        expect(UserAgentUtils.addUserAgent).toHaveBeenCalledWith(
+          expect.objectContaining({ is_active: false })
+        );
+      });
+    });
+  });
+
+  // ── useEffect reset ──────────────────────────────────────────────────────────
+
+  describe('form reset on userAgent change', () => {
+    it('resets form values when userAgent prop changes', () => {
+      const { rerender } = render(
+        <UserAgent isOpen={true} onClose={vi.fn()} userAgent={makeUserAgent()} />
+      );
+      expect(screen.getByTestId('input-Name')).toHaveValue('Chrome');
+
+      rerender(
+        <UserAgent
+          isOpen={true}
+          onClose={vi.fn()}
+          userAgent={makeUserAgent({ id: 2, name: 'Firefox', user_agent: 'Gecko/20100101' })}
+        />
+      );
+      expect(screen.getByTestId('input-Name')).toHaveValue('Firefox');
+    });
+
+    it('resets to empty when userAgent prop is removed', () => {
+      const { rerender } = render(
+        <UserAgent isOpen={true} onClose={vi.fn()} userAgent={makeUserAgent()} />
+      );
+      rerender(<UserAgent isOpen={true} onClose={vi.fn()} userAgent={null} />);
+      expect(screen.getByTestId('input-Name')).toHaveValue('');
+    });
+  });
+});
\ No newline at end of file
diff --git a/frontend/src/components/forms/__tests__/VODCategoryFilter.test.jsx b/frontend/src/components/forms/__tests__/VODCategoryFilter.test.jsx
new file mode 100644
index 00000000..de87d5c0
--- /dev/null
+++ b/frontend/src/components/forms/__tests__/VODCategoryFilter.test.jsx
@@ -0,0 +1,362 @@
+import { render, screen, fireEvent } from '@testing-library/react';
+import { describe, it, expect, vi, beforeEach } from 'vitest';
+
+// ── Store mock ─────────────────────────────────────────────────────────────────
+vi.mock('../../../store/useVODStore', () => ({ default: vi.fn() }));
+
+// ── lucide-react ───────────────────────────────────────────────────────────────
+vi.mock('lucide-react', () => ({
+  CircleCheck: () => <svg data-testid="icon-circle-check" />,
+  CircleX:     () => <svg data-testid="icon-circle-x" />,
+}));
+
+// ── Mantine core ───────────────────────────────────────────────────────────────
+vi.mock('@mantine/core', () => ({
+  Box:      ({ children }) => <div>{children}</div>,
+  Button:   ({ children, onClick, disabled, color, variant }) => (
+    <button onClick={onClick} disabled={disabled} data-color={color} data-variant={variant}>
+      {children}
+    </button>
+  ),
+  Checkbox: ({ label, checked, onChange, disabled }) => (
+    <label>
+      <input
+        type="checkbox"
+        aria-label={label}
+        checked={checked}
+        onChange={(e) => onChange?.({ currentTarget: { checked: e.target.checked } })}
+        disabled={disabled}
+      />
+      {label}
+    </label>
+  ),
+  Flex:     ({ children }) => <div>{children}</div>,
+  Group:    ({ children }) => <div>{children}</div>,
+  SimpleGrid: ({ children }) => <div data-testid="simple-grid">{children}</div>,
+  Stack:    ({ children }) => <div>{children}</div>,
+  Text:     ({ children }) => <span>{children}</span>,
+  TextInput: ({ label, value, onChange, placeholder }) => (
+    <input
+      aria-label={label ?? placeholder}
+      value={value}
+      onChange={onChange}
+      placeholder={placeholder}
+    />
+  ),
+  SegmentedControl: ({ value, onChange, data }) => (
+    <div data-testid="segmented-control">
+      {data.map((item) => (
+        <button
+          key={item.value ?? item}
+          data-testid={`segment-${item.value ?? item}`}
+          onClick={() => onChange(item.value ?? item)}
+          data-active={value === (item.value ?? item) ? 'true' : 'false'}
+        >
+          {item.label ?? item}
+        </button>
+      ))}
+    </div>
+  ),
+}));
+
+// ── Imports after mocks ────────────────────────────────────────────────────────
+import useVODStore from '../../../store/useVODStore';
+import VODCategoryFilter from '../VODCategoryFilter';
+
+// ── Helpers ────────────────────────────────────────────────────────────────────
+const makeCategories = () => [
+  {
+    id: 1,
+    name: 'Action',
+    m3u_accounts: [{ m3u_account: 10, enabled: true }],
+    category_type: 'movies',
+  },
+  { id: 2, name: 'Comedy', m3u_accounts: [{ m3u_account: 10, enabled: false }], category_type: 'movies' },
+  { id: 3, name: 'Drama', m3u_accounts: [{ m3u_account: 10, enabled: true }], category_type: 'movies' },
+  { id: 4, name: 'News', m3u_accounts: [{ m3u_account: 10, enabled: true }], category_type: 'series' },
+];
+
+const makePlaylist = (overrides = {}) => ({ id: 10, name: 'My Playlist', ...overrides });
+
+const categoriesToDict = (arr) =>
+  arr.reduce((acc, cat) => ({ ...acc, [cat.id]: cat }), {});
+
+const setupMocks = ({ categories = makeCategories() } = {}) => {
+  const dict = Array.isArray(categories) ? categoriesToDict(categories) : categories;
+  vi.mocked(useVODStore).mockImplementation((sel) => sel({ categories: dict }));
+};
+
+const defaultProps = (overrides = {}) => {
+  return {
+    playlist: makePlaylist(),
+    categoryStates: [
+      { id: 1, name: 'Action', enabled: true },
+      { id: 2, name: 'Comedy', enabled: false },
+      { id: 3, name: 'Drama', enabled: true },
+    ],
+    setCategoryStates: vi.fn(),
+    type: 'movies',
+    autoEnableNewGroups: true,
+    setAutoEnableNewGroups: vi.fn(),
+    ...overrides,
+  };
+};
+
+// ──────────────────────────────────────────────────────────────────────────────
+
+describe('VODCategoryFilter', () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+    setupMocks();
+  });
+
+  // ── Rendering ─────────────────────────────────────────────────────────────
+
+  describe('rendering', () => {
+    it('renders without crashing', () => {
+      render(<VODCategoryFilter {...defaultProps()} />);
+      expect(screen.getByTestId('simple-grid')).toBeInTheDocument();
+    });
+
+    it('renders a button for each category matching the type and playlist', () => {
+      render(<VODCategoryFilter {...defaultProps()} />);
+      expect(screen.getByRole('button', { name: 'Action' })).toBeInTheDocument();
+      expect(screen.getByRole('button', { name: 'Comedy' })).toBeInTheDocument();
+    });
+
+    it('does not render categories of a different type', () => {
+      render(<VODCategoryFilter {...defaultProps()} />);
+      expect(screen.queryByRole('checkbox', { name: 'News' })).not.toBeInTheDocument();
+    });
+
+    it('renders the text filter input', () => {
+      render(<VODCategoryFilter {...defaultProps()} />);
+      expect(screen.getByPlaceholderText(/filter/i)).toBeInTheDocument();
+    });
+
+    it('renders the segmented status control', () => {
+      render(<VODCategoryFilter {...defaultProps()} />);
+      expect(screen.getByTestId('segmented-control')).toBeInTheDocument();
+    });
+
+    it('renders Enable All and Disable All buttons', () => {
+      render(<VODCategoryFilter {...defaultProps()} />);
+      expect(screen.getByText('Select Visible')).toBeInTheDocument();
+      expect(screen.getByText('Deselect Visible')).toBeInTheDocument();
+    });
+
+    it('renders the Auto-enable new groups checkbox', () => {
+      render(<VODCategoryFilter {...defaultProps()} />);
+      expect(screen.getByLabelText(/automatically enable new/i)).toBeInTheDocument();
+    });
+  });
+
+  // ── Text filter ───────────────────────────────────────────────────────────
+
+  describe('text filter', () => {
+    it('hides categories that do not match the filter', () => {
+      render(<VODCategoryFilter {...defaultProps()} />);
+      const input = screen.getByPlaceholderText(/filter/i);
+      fireEvent.change(input, { target: { value: 'act' } });
+      expect(screen.getByRole('button', { name: 'Action' })).toBeInTheDocument();
+      expect(screen.queryByRole('button', { name: 'Comedy' })).not.toBeInTheDocument();
+    });
+
+    it('is case-insensitive', () => {
+      render(<VODCategoryFilter {...defaultProps()} />);
+      fireEvent.change(screen.getByPlaceholderText(/filter/i), { target: { value: 'COMEDY' } });
+      expect(screen.getByRole('button', { name: 'Comedy' })).toBeInTheDocument();
+      expect(screen.queryByRole('button', { name: 'Action' })).not.toBeInTheDocument();
+    });
+
+    it('shows all categories when filter is cleared', () => {
+      render(<VODCategoryFilter {...defaultProps()} />);
+      const input = screen.getByPlaceholderText(/filter/i);
+      fireEvent.change(input, { target: { value: 'act' } });
+      fireEvent.change(input, { target: { value: '' } });
+      expect(screen.getByRole('button', { name: 'Action' })).toBeInTheDocument();
+      expect(screen.getByRole('button', { name: 'Comedy' })).toBeInTheDocument();
+      expect(screen.getByRole('button', { name: 'Drama' })).toBeInTheDocument();
+    });
+
+    it('shows no categories when filter matches nothing', () => {
+      render(<VODCategoryFilter {...defaultProps()} />);
+      fireEvent.change(screen.getByPlaceholderText(/filter/i), {
+        target: { value: 'zzznomatch' },
+      });
+      expect(screen.queryByRole('button', { name: 'Action' })).not.toBeInTheDocument();
+    });
+  });
+
+  // ── Status filter ─────────────────────────────────────────────────────────
+
+  describe('status filter', () => {
+    it('shows only enabled categories when "Enabled" segment is selected', () => {
+      const props = defaultProps({
+        categoryStates: [ { id: 1, name: 'Action', enabled: true }, { id: 2, name: 'Comedy', enabled: false }, { id: 3, name: 'Drama', enabled: true } ],
+      });
+      render(<VODCategoryFilter {...props} />);
+      fireEvent.click(screen.getByTestId('segment-enabled'));
+      expect(screen.getByRole('button', { name: 'Action' })).toBeInTheDocument();
+      expect(screen.queryByRole('button', { name: 'Comedy' })).not.toBeInTheDocument();
+      expect(screen.getByRole('button', { name: 'Drama' })).toBeInTheDocument();
+    });
+
+    it('shows only disabled categories when "Disabled" segment is selected', () => {
+      const props = defaultProps({
+        categoryStates: [ { id: 1, name: 'Action', enabled: true }, { id: 2, name: 'Comedy', enabled: false }, { id: 3, name: 'Drama', enabled: true } ],
+      });
+      render(<VODCategoryFilter {...props} />);
+      fireEvent.click(screen.getByTestId('segment-disabled'));
+      expect(screen.queryByRole('button', { name: 'Action' })).not.toBeInTheDocument();
+      expect(screen.getByRole('button', { name: 'Comedy' })).toBeInTheDocument();
+    });
+
+    it('shows all categories when "All" segment is active', () => {
+      const props = defaultProps({
+        categoryStates: [ { id: 1, name: 'Action', enabled: true }, { id: 2, name: 'Comedy', enabled: false }, { id: 3, name: 'Drama', enabled: true } ],
+      });
+      render(<VODCategoryFilter {...props} />);
+      fireEvent.click(screen.getByTestId('segment-disabled'));
+      fireEvent.click(screen.getByTestId('segment-all'));
+      expect(screen.getByRole('button', { name: 'Action' })).toBeInTheDocument();
+      expect(screen.getByRole('button', { name: 'Comedy' })).toBeInTheDocument();
+    });
+  });
+
+  // ── Combined filters ──────────────────────────────────────────────────────
+
+  describe('combined text + status filters', () => {
+    it('applies both text and status filters simultaneously', () => {
+      const props = defaultProps();
+      render(<VODCategoryFilter {...props} />);
+      fireEvent.change(screen.getByPlaceholderText(/filter/i), { target: { value: 'o' } });
+      fireEvent.click(screen.getByTestId('segment-disabled'));
+      // "Comedy" matches "o" AND is disabled; "Action" matches "o" but is enabled
+      expect(screen.getByRole('button', { name: 'Comedy' })).toBeInTheDocument();
+      expect(screen.queryByRole('button', { name: 'Action' })).not.toBeInTheDocument();
+    });
+  });
+
+  // ── Enable All / Disable All ──────────────────────────────────────────────
+
+  describe('Enable All button', () => {
+    it('calls setCategoryStates with all visible categories set to true', () => {
+      const setCategoryStates = vi.fn();
+      render(
+        <VODCategoryFilter
+          {...defaultProps({
+            setCategoryStates,
+            categoryStates: [ { id: 1, name: 'Action', enabled: false }, { id: 2, name: 'Comedy', enabled: false }, { id: 3, name: 'Drama', enabled: false } ],
+          })}
+        />
+      );
+      fireEvent.click(screen.getByText('Select Visible'));
+      const called = setCategoryStates.mock.calls.at(-1)[0];
+      expect(called.find((s) => s.id === 1).enabled).toBe(true);
+      expect(called.find((s) => s.id === 2).enabled).toBe(true);
+      expect(called.find((s) => s.id === 3).enabled).toBe(true);
+    });
+
+    it('only enables filtered categories when a text filter is active', () => {
+      const setCategoryStates = vi.fn();
+      render(
+        <VODCategoryFilter
+          {...defaultProps({
+            setCategoryStates,
+            categoryStates: [ { id: 1, name: 'Action', enabled: false }, { id: 2, name: 'Comedy', enabled: false }, { id: 3, name: 'Drama', enabled: false } ],
+          })}
+        />
+      );
+      fireEvent.change(screen.getByPlaceholderText(/filter/i), { target: { value: 'act' } });
+      fireEvent.click(screen.getByText('Select Visible'));
+      const called = setCategoryStates.mock.calls.at(-1)[0];
+      expect(called.find((s) => s.id === 1).enabled).toBe(true);
+      // Comedy and Drama were filtered out — their state should be unchanged
+      expect(called.find((s) => s.id === 2).enabled).toBe(false);
+      expect(called.find((s) => s.id === 3).enabled).toBe(false);
+    });
+  });
+
+  describe('Disable All button', () => {
+    it('calls setCategoryStates with all visible categories set to false', () => {
+      const setCategoryStates = vi.fn();
+      render(<VODCategoryFilter {...defaultProps({ setCategoryStates })} />);
+      fireEvent.click(screen.getByText('Deselect Visible'));
+      const called = setCategoryStates.mock.calls.at(-1)[0];
+      expect(called.find((s) => s.id === 1).enabled).toBe(false);
+      expect(called.find((s) => s.id === 2).enabled).toBe(false);
+      expect(called.find((s) => s.id === 3).enabled).toBe(false);
+    });
+
+    it('only disables filtered categories when a text filter is active', () => {
+      const setCategoryStates = vi.fn();
+      render(
+        <VODCategoryFilter
+          {...defaultProps({
+            setCategoryStates,
+            categoryStates: [ { id: 1, name: 'Action', enabled: true }, { id: 2, name: 'Comedy', enabled: true }, { id: 3, name: 'Drama', enabled: true } ],
+          })}
+        />
+      );
+      fireEvent.change(screen.getByPlaceholderText(/filter/i), { target: { value: 'comedy' } });
+      fireEvent.click(screen.getByText('Deselect Visible'));
+      const called = setCategoryStates.mock.calls.at(-1)[0];
+      expect(called.find((s) => s.id === 2).enabled).toBe(false);
+      expect(called.find((s) => s.id === 1).enabled).toBe(true);
+      expect(called.find((s) => s.id === 3).enabled).toBe(true);
+    });
+  });
+
+  // ── Auto-enable new groups ────────────────────────────────────────────────
+
+  describe('autoEnableNewGroups checkbox', () => {
+    it('calls setAutoEnableNewGroups(true) when checked', () => {
+      const setAutoEnableNewGroups = vi.fn();
+      render(
+        <VODCategoryFilter
+          {...defaultProps({ autoEnableNewGroups: false, setAutoEnableNewGroups })}
+        />
+      );
+      fireEvent.click(screen.getByLabelText(/automatically enable new/i));
+      expect(setAutoEnableNewGroups).toHaveBeenCalledWith(true);
+    });
+
+    it('calls setAutoEnableNewGroups(false) when unchecked', () => {
+      const setAutoEnableNewGroups = vi.fn();
+      render(
+        <VODCategoryFilter
+          {...defaultProps({ autoEnableNewGroups: true, setAutoEnableNewGroups })}
+        />
+      );
+      fireEvent.click(screen.getByLabelText(/automatically enable new/i));
+      expect(setAutoEnableNewGroups).toHaveBeenCalledWith(false);
+    });
+  });
+
+  // ── No playlist / empty categories ───────────────────────────────────────
+
+  describe('edge cases', () => {
+    it('renders no category buttons when categories list is empty', () => {
+      setupMocks({ categories: [] });
+      render(<VODCategoryFilter {...defaultProps({ categoryStates: [] })} />);
+      expect(screen.queryByRole('button', { name: 'Action' })).not.toBeInTheDocument();
+    });
+
+    it('renders no category buttons when categoryStates is empty', () => {
+      render(<VODCategoryFilter {...defaultProps({ categoryStates: [] })} />);
+      expect(screen.queryByRole('button', { name: 'Action' })).not.toBeInTheDocument();
+    });
+
+    it('renders categories only for the matching playlist id', () => {
+      setupMocks({
+        categories: [
+          ...makeCategories(),
+          { id: 99, name: 'Foreign', m3u_accounts: [{ m3u_account: 99, enabled: true }], category_type: 'movies' },
+        ],
+      });
+      render(<VODCategoryFilter {...defaultProps()} />);
+      expect(screen.queryByRole('button', { name: 'Foreign' })).not.toBeInTheDocument();
+    });
+  });
+});
\ No newline at end of file

From 284ba87fe7c96e85ca3b84ae2494fe6a56412224 Mon Sep 17 00:00:00 2001
From: Nick Sandstrom <32273437+nick4810@users.noreply.github.com>
Date: Mon, 25 May 2026 18:15:09 -0700
Subject: [PATCH 16/35] Minor formatting changes

---
 frontend/src/components/forms/User.jsx        |   2 +-
 frontend/src/components/forms/UserAgent.jsx   |   8 +-
 .../__tests__/ProgramRecordingModal.test.jsx  |  65 +++--
 .../forms/__tests__/Recording.test.jsx        | 127 +++++++---
 .../__tests__/RecordingDetailsModal.test.jsx  |  84 +++++--
 .../__tests__/RecurringRuleModal.test.jsx     | 116 +++++----
 .../forms/__tests__/ScheduleInput.test.jsx    |  96 ++++++--
 .../__tests__/SeriesRecordingModal.test.jsx   |  72 ++++--
 .../__tests__/SeriesRuleEditorModal.test.jsx  | 110 ++++++---
 .../forms/__tests__/Stream.test.jsx           |  12 +-
 .../forms/__tests__/StreamProfile.test.jsx    |  66 ++++-
 .../forms/__tests__/SuperuserForm.test.jsx    |   5 +-
 .../components/forms/__tests__/User.test.jsx  | 228 ++++++++++++++----
 .../forms/__tests__/UserAgent.test.jsx        |  64 ++++-
 .../__tests__/VODCategoryFilter.test.jsx      | 215 +++++++++++++----
 .../utils/forms/SeriesRuleEditorModalUtils.js |   4 +-
 frontend/src/utils/forms/UserUtils.js         |  14 +-
 .../RecordingDetailsModalUtils.test.js        |  29 ++-
 .../forms/__tests__/RecordingUtils.test.js    |  73 +++---
 .../SeriesRuleEditorModalUtils.test.js        |  84 ++++---
 .../__tests__/StreamProfileUtils.test.js      |   6 +-
 .../utils/forms/__tests__/StreamUtils.test.js |   6 +-
 .../forms/__tests__/UserAgentUtils.test.js    |  12 +-
 .../utils/forms/__tests__/UserUtils.test.js   | 169 ++++++++++---
 24 files changed, 1217 insertions(+), 450 deletions(-)

diff --git a/frontend/src/components/forms/User.jsx b/frontend/src/components/forms/User.jsx
index 34a43c30..3ca08e1a 100644
--- a/frontend/src/components/forms/User.jsx
+++ b/frontend/src/components/forms/User.jsx
@@ -23,7 +23,7 @@ import { Copy, Key, RotateCcwKey, X } from 'lucide-react';
 import { useForm } from '@mantine/form';
 import useChannelsStore from '../../store/channels';
 import useOutputProfilesStore from '../../store/outputProfiles';
-import { USER_LEVEL_LABELS, USER_LEVELS, } from '../../constants';
+import { USER_LEVEL_LABELS, USER_LEVELS } from '../../constants';
 import useAuthStore from '../../store/auth';
 import { copyToClipboard } from '../../utils';
 import {
diff --git a/frontend/src/components/forms/UserAgent.jsx b/frontend/src/components/forms/UserAgent.jsx
index b6c237b1..1742e553 100644
--- a/frontend/src/components/forms/UserAgent.jsx
+++ b/frontend/src/components/forms/UserAgent.jsx
@@ -1,8 +1,12 @@
 // Modal.js
 import React, { useEffect, useMemo } from 'react';
 import { useForm } from 'react-hook-form';
-import { Button, Checkbox, Flex, Modal, Space, TextInput, } from '@mantine/core';
-import { addUserAgent, getResolver, updateUserAgent } from '../../utils/forms/UserAgentUtils.js';
+import { Button, Checkbox, Flex, Modal, Space, TextInput } from '@mantine/core';
+import {
+  addUserAgent,
+  getResolver,
+  updateUserAgent,
+} from '../../utils/forms/UserAgentUtils.js';
 
 const UserAgent = ({ userAgent = null, isOpen, onClose }) => {
   const defaultValues = useMemo(
diff --git a/frontend/src/components/forms/__tests__/ProgramRecordingModal.test.jsx b/frontend/src/components/forms/__tests__/ProgramRecordingModal.test.jsx
index e47b15fd..f49776a8 100644
--- a/frontend/src/components/forms/__tests__/ProgramRecordingModal.test.jsx
+++ b/frontend/src/components/forms/__tests__/ProgramRecordingModal.test.jsx
@@ -27,7 +27,9 @@ vi.mock('@mantine/core', async () => ({
     opened ? (
       <div data-testid="modal">
         <div data-testid="modal-title">{title}</div>
-        <button data-testid="modal-close" onClick={onClose}>×</button>
+        <button data-testid="modal-close" onClick={onClose}>
+          ×
+        </button>
         {children}
       </div>
     ) : null,
@@ -43,13 +45,18 @@ vi.mock('@mantine/core', async () => ({
     </button>
   ),
   Anchor: ({ children, onClick }) => (
-    <a data-testid="anchor" onClick={onClick}>{children}</a>
+    <a data-testid="anchor" onClick={onClick}>
+      {children}
+    </a>
   ),
 }));
 
 // ── Imports after mocks ────────────────────────────────────────────────────────
 import ProgramRecordingModal from '../ProgramRecordingModal.jsx';
-import { deleteRecordingById, deleteSeriesAndRule } from '../../../utils/cards/RecordingCardUtils.js';
+import {
+  deleteRecordingById,
+  deleteSeriesAndRule,
+} from '../../../utils/cards/RecordingCardUtils.js';
 import { deleteSeriesRuleByTvgId } from '../../../utils/guideUtils.js';
 
 // ── Helpers ────────────────────────────────────────────────────────────────────
@@ -114,11 +121,7 @@ describe('ProgramRecordingModal', () => {
   describe('handleRemoveRecording', () => {
     it('calls deleteRecordingById with the recording id', async () => {
       const recording = makeRecording();
-      render(
-        <ProgramRecordingModal
-          {...defaultProps({ recording })}
-        />
-      );
+      render(<ProgramRecordingModal {...defaultProps({ recording })} />);
       fireEvent.click(screen.getByText('Remove this recording'));
       await waitFor(() => {
         expect(deleteRecordingById).toHaveBeenCalledWith('rec-1');
@@ -129,9 +132,7 @@ describe('ProgramRecordingModal', () => {
       const onClose = vi.fn();
       const recording = makeRecording();
       render(
-        <ProgramRecordingModal
-          {...defaultProps({ recording, onClose })}
-        />
+        <ProgramRecordingModal {...defaultProps({ recording, onClose })} />
       );
       fireEvent.click(screen.getByText('Remove this recording'));
       await waitFor(() => {
@@ -144,9 +145,7 @@ describe('ProgramRecordingModal', () => {
       const onClose = vi.fn();
       const recording = makeRecording();
       render(
-        <ProgramRecordingModal
-          {...defaultProps({ recording, onClose })}
-        />
+        <ProgramRecordingModal {...defaultProps({ recording, onClose })} />
       );
       fireEvent.click(screen.getByText('Remove this recording'));
       await waitFor(() => {
@@ -202,7 +201,10 @@ describe('ProgramRecordingModal', () => {
       );
       fireEvent.click(screen.getByText(/Remove series rule/i));
       await waitFor(() => {
-        expect(deleteSeriesRuleByTvgId).toHaveBeenCalledWith('tvg-3', 'Rule Show');
+        expect(deleteSeriesRuleByTvgId).toHaveBeenCalledWith(
+          'tvg-3',
+          'Rule Show'
+        );
       });
     });
 
@@ -210,7 +212,10 @@ describe('ProgramRecordingModal', () => {
       const onExistingRuleModeChange = vi.fn();
       render(
         <ProgramRecordingModal
-          {...defaultProps({ existingRuleMode: 'rule', onExistingRuleModeChange })}
+          {...defaultProps({
+            existingRuleMode: 'rule',
+            onExistingRuleModeChange,
+          })}
         />
       );
       fireEvent.click(screen.getByText(/Remove series rule/i));
@@ -245,14 +250,18 @@ describe('ProgramRecordingModal', () => {
 
     it('calls onRecordSeriesAll when "Record All" is clicked', () => {
       const onRecordSeriesAll = vi.fn();
-      render(<ProgramRecordingModal {...defaultProps({ onRecordSeriesAll })} />);
+      render(
+        <ProgramRecordingModal {...defaultProps({ onRecordSeriesAll })} />
+      );
       fireEvent.click(screen.getByText('Every episode'));
       expect(onRecordSeriesAll).toHaveBeenCalled();
     });
 
     it('calls onRecordSeriesNew when "Record New" is clicked', () => {
       const onRecordSeriesNew = vi.fn();
-      render(<ProgramRecordingModal {...defaultProps({ onRecordSeriesNew })} />);
+      render(
+        <ProgramRecordingModal {...defaultProps({ onRecordSeriesNew })} />
+      );
       fireEvent.click(screen.getByText('New episodes only'));
       expect(onRecordSeriesNew).toHaveBeenCalled();
     });
@@ -264,22 +273,32 @@ describe('ProgramRecordingModal', () => {
     it('opens SeriesRuleEditorModal when "Edit Rule" is clicked', () => {
       render(
         <ProgramRecordingModal
-          {...defaultProps({ existingRuleMode: 'rule', existingRule: { id: 1 } })}
+          {...defaultProps({
+            existingRuleMode: 'rule',
+            existingRule: { id: 1 },
+          })}
         />
       );
       fireEvent.click(screen.getByText(/Customize rule/i));
-      expect(screen.getByTestId('series-rule-editor-modal')).toBeInTheDocument();
+      expect(
+        screen.getByTestId('series-rule-editor-modal')
+      ).toBeInTheDocument();
     });
 
     it('closes SeriesRuleEditorModal when its onClose is called', () => {
       render(
         <ProgramRecordingModal
-          {...defaultProps({ existingRuleMode: 'rule', existingRule: { id: 1 } })}
+          {...defaultProps({
+            existingRuleMode: 'rule',
+            existingRule: { id: 1 },
+          })}
         />
       );
       fireEvent.click(screen.getByText(/Customize rule/i));
       fireEvent.click(screen.getByTestId('series-rule-editor-close'));
-      expect(screen.queryByTestId('series-rule-editor-modal')).not.toBeInTheDocument();
+      expect(
+        screen.queryByTestId('series-rule-editor-modal')
+      ).not.toBeInTheDocument();
     });
   });
-});
\ No newline at end of file
+});
diff --git a/frontend/src/components/forms/__tests__/Recording.test.jsx b/frontend/src/components/forms/__tests__/Recording.test.jsx
index 9c3771bc..ae9da25f 100644
--- a/frontend/src/components/forms/__tests__/Recording.test.jsx
+++ b/frontend/src/components/forms/__tests__/Recording.test.jsx
@@ -55,11 +55,20 @@ vi.mock('@mantine/form', () => ({
     return {
       values,
       key: vi.fn((k) => k),
-      getInputProps: vi.fn((k) => ({ name: k, value: values[k] ?? '', onChange: vi.fn() })),
-      onSubmit: vi.fn((handler) => (e) => { e?.preventDefault?.(); return handler(values); }),
+      getInputProps: vi.fn((k) => ({
+        name: k,
+        value: values[k] ?? '',
+        onChange: vi.fn(),
+      })),
+      onSubmit: vi.fn((handler) => (e) => {
+        e?.preventDefault?.();
+        return handler(values);
+      }),
       reset: vi.fn(),
       setValues: vi.fn((newVals) => Object.assign(values, newVals)),
-      setFieldValue: vi.fn((k, v) => { values[k] = v; }),
+      setFieldValue: vi.fn((k, v) => {
+        values[k] = v;
+      }),
       validateField: vi.fn(),
     };
   }),
@@ -74,24 +83,37 @@ vi.mock('@mantine/core', () => ({
     </div>
   ),
   Button: ({ children, onClick, loading, type }) => (
-    <button type={type} onClick={onClick} data-loading={loading} disabled={loading}>
+    <button
+      type={type}
+      onClick={onClick}
+      data-loading={loading}
+      disabled={loading}
+    >
       {children}
     </button>
   ),
   Group: ({ children }) => <div>{children}</div>,
-  Loader: ({ size, color }) => <span data-testid="loader" data-size={size} data-color={color} />,
+  Loader: ({ size, color }) => (
+    <span data-testid="loader" data-size={size} data-color={color} />
+  ),
   Modal: ({ children, opened, onClose, title }) =>
     opened ? (
       <div data-testid="modal">
         <div data-testid="modal-title">{title}</div>
-        <button data-testid="modal-close" onClick={onClose}>×</button>
+        <button data-testid="modal-close" onClick={onClose}>
+          ×
+        </button>
         {children}
       </div>
     ) : null,
   MultiSelect: ({ label, placeholder, ...props }) => (
     <div>
       <label>{label}</label>
-      <input data-testid={`multiselect-${label}`} placeholder={placeholder} {...props} />
+      <input
+        data-testid={`multiselect-${label}`}
+        placeholder={placeholder}
+        {...props}
+      />
     </div>
   ),
   SegmentedControl: ({ value, onChange, data, disabled }) => (
@@ -115,7 +137,9 @@ vi.mock('@mantine/core', () => ({
       {rightSection}
       <select data-testid={`select-${label}`} disabled={disabled} {...props}>
         {(data ?? []).map((opt) => (
-          <option key={opt.value} value={opt.value}>{opt.label}</option>
+          <option key={opt.value} value={opt.value}>
+            {opt.label}
+          </option>
         ))}
       </select>
     </div>
@@ -124,7 +148,11 @@ vi.mock('@mantine/core', () => ({
   TextInput: ({ label, placeholder, ...props }) => (
     <div>
       <label>{label}</label>
-      <input data-testid={`textinput-${label}`} placeholder={placeholder} {...props} />
+      <input
+        data-testid={`textinput-${label}`}
+        placeholder={placeholder}
+        {...props}
+      />
     </div>
   ),
 }));
@@ -136,8 +164,10 @@ vi.mock('@mantine/dates', () => ({
       <label>{label}</label>
       <input
         data-testid={`datepicker-${label}`}
-        value={value ? value.toISOString?.() ?? value : ''}
-        onChange={(e) => onChange(e.target.value ? new Date(e.target.value) : null)}
+        value={value ? (value.toISOString?.() ?? value) : ''}
+        onChange={(e) =>
+          onChange(e.target.value ? new Date(e.target.value) : null)
+        }
       />
     </div>
   ),
@@ -175,7 +205,10 @@ const setupStoreMock = () => {
   const mockFetchRecurringRules = vi.fn().mockResolvedValue(undefined);
 
   vi.mocked(useChannelsStore).mockImplementation((sel) =>
-    sel({ fetchRecordings: mockFetchRecordings, fetchRecurringRules: mockFetchRecurringRules })
+    sel({
+      fetchRecordings: mockFetchRecordings,
+      fetchRecurringRules: mockFetchRecurringRules,
+    })
   );
 
   return { mockFetchRecordings, mockFetchRecurringRules };
@@ -223,7 +256,9 @@ describe('RecordingModal', () => {
     it('renders the scheduling conflicts alert', () => {
       render(<RecordingModal isOpen onClose={vi.fn()} />);
       expect(screen.getByTestId('alert')).toBeInTheDocument();
-      expect(screen.getByTestId('alert-title')).toHaveTextContent('Scheduling Conflicts');
+      expect(screen.getByTestId('alert-title')).toHaveTextContent(
+        'Scheduling Conflicts'
+      );
     });
   });
 
@@ -232,13 +267,19 @@ describe('RecordingModal', () => {
   describe('mode switching', () => {
     it('defaults to "single" mode', () => {
       render(<RecordingModal isOpen onClose={vi.fn()} />);
-      expect(screen.getByTestId('mode-single')).toHaveAttribute('data-active', 'true');
+      expect(screen.getByTestId('mode-single')).toHaveAttribute(
+        'data-active',
+        'true'
+      );
     });
 
     it('switches to recurring mode when Recurring button clicked', () => {
       render(<RecordingModal isOpen onClose={vi.fn()} />);
       fireEvent.click(screen.getByTestId('mode-recurring'));
-      expect(screen.getByTestId('mode-recurring')).toHaveAttribute('data-active', 'true');
+      expect(screen.getByTestId('mode-recurring')).toHaveAttribute(
+        'data-active',
+        'true'
+      );
     });
 
     it('shows DateTimePicker fields in single mode', () => {
@@ -256,7 +297,9 @@ describe('RecordingModal', () => {
     });
 
     it('disables mode toggle when editing an existing recording', () => {
-      render(<RecordingModal isOpen onClose={vi.fn()} recording={makeRecording()} />);
+      render(
+        <RecordingModal isOpen onClose={vi.fn()} recording={makeRecording()} />
+      );
       expect(screen.getByTestId('mode-single')).toBeDisabled();
       expect(screen.getByTestId('mode-recurring')).toBeDisabled();
     });
@@ -296,7 +339,9 @@ describe('RecordingModal', () => {
     });
 
     it('calls sortedChannelOptions with [] when getChannelsSummary rejects', async () => {
-      vi.mocked(RecordingUtils.getChannelsSummary).mockRejectedValue(new Error('fail'));
+      vi.mocked(RecordingUtils.getChannelsSummary).mockRejectedValue(
+        new Error('fail')
+      );
       render(<RecordingModal isOpen onClose={vi.fn()} />);
       await waitFor(() => {
         expect(RecordingUtils.sortedChannelOptions).toHaveBeenCalledWith(
@@ -336,7 +381,10 @@ describe('RecordingModal', () => {
       fireEvent.submit(screen.getByText('Schedule Recording').closest('form'));
       await waitFor(() => {
         expect(showNotification).toHaveBeenCalledWith(
-          expect.objectContaining({ title: 'Recording scheduled', color: 'green' })
+          expect.objectContaining({
+            title: 'Recording scheduled',
+            color: 'green',
+          })
         );
       });
     });
@@ -360,7 +408,9 @@ describe('RecordingModal', () => {
     });
 
     it('does not call showNotification when createRecording throws', async () => {
-      vi.mocked(RecordingUtils.createRecording).mockRejectedValue(new Error('fail'));
+      vi.mocked(RecordingUtils.createRecording).mockRejectedValue(
+        new Error('fail')
+      );
       render(<RecordingModal isOpen onClose={vi.fn()} />);
       fireEvent.submit(screen.getByText('Schedule Recording').closest('form'));
       await waitFor(() => {
@@ -402,7 +452,10 @@ describe('RecordingModal', () => {
       fireEvent.submit(screen.getByText('Schedule Recording').closest('form'));
       await waitFor(() => {
         expect(showNotification).toHaveBeenCalledWith(
-          expect.objectContaining({ title: 'Recording updated', color: 'green' })
+          expect.objectContaining({
+            title: 'Recording updated',
+            color: 'green',
+          })
         );
       });
     });
@@ -446,7 +499,10 @@ describe('RecordingModal', () => {
       fireEvent.submit(screen.getByText('Save Rule').closest('form'));
       await waitFor(() => {
         expect(showNotification).toHaveBeenCalledWith(
-          expect.objectContaining({ title: 'Recurring rule saved', color: 'green' })
+          expect.objectContaining({
+            title: 'Recurring rule saved',
+            color: 'green',
+          })
         );
       });
     });
@@ -462,7 +518,9 @@ describe('RecordingModal', () => {
     });
 
     it('does not show notification when createRecurringRule throws', async () => {
-      vi.mocked(RecordingUtils.createRecurringRule).mockRejectedValue(new Error('fail'));
+      vi.mocked(RecordingUtils.createRecurringRule).mockRejectedValue(
+        new Error('fail')
+      );
       render(<RecordingModal isOpen onClose={vi.fn()} />);
       fireEvent.click(screen.getByTestId('mode-recurring'));
       fireEvent.submit(screen.getByText('Save Rule').closest('form'));
@@ -478,19 +536,34 @@ describe('RecordingModal', () => {
     it('calls getSingleFormDefaults with recording and channel when opening with existing recording', () => {
       const recording = makeRecording();
       const channel = makeChannel();
-      render(<RecordingModal isOpen recording={recording} channel={channel} onClose={vi.fn()} />);
-      expect(RecordingUtils.getSingleFormDefaults).toHaveBeenCalledWith(recording, channel);
+      render(
+        <RecordingModal
+          isOpen
+          recording={recording}
+          channel={channel}
+          onClose={vi.fn()}
+        />
+      );
+      expect(RecordingUtils.getSingleFormDefaults).toHaveBeenCalledWith(
+        recording,
+        channel
+      );
     });
 
     it('calls getSingleFormDefaults with null when opening for new recording', () => {
       render(<RecordingModal isOpen onClose={vi.fn()} />);
-      expect(RecordingUtils.getSingleFormDefaults).toHaveBeenCalledWith(null, null);
+      expect(RecordingUtils.getSingleFormDefaults).toHaveBeenCalledWith(
+        null,
+        null
+      );
     });
 
     it('calls getRecurringFormDefaults with channel on open', () => {
       const channel = makeChannel();
       render(<RecordingModal isOpen channel={channel} onClose={vi.fn()} />);
-      expect(RecordingUtils.getRecurringFormDefaults).toHaveBeenCalledWith(channel);
+      expect(RecordingUtils.getRecurringFormDefaults).toHaveBeenCalledWith(
+        channel
+      );
     });
   });
 
@@ -504,4 +577,4 @@ describe('RecordingModal', () => {
       expect(onClose).toHaveBeenCalled();
     });
   });
-});
\ No newline at end of file
+});
diff --git a/frontend/src/components/forms/__tests__/RecordingDetailsModal.test.jsx b/frontend/src/components/forms/__tests__/RecordingDetailsModal.test.jsx
index 91216ac1..9f07a5a8 100644
--- a/frontend/src/components/forms/__tests__/RecordingDetailsModal.test.jsx
+++ b/frontend/src/components/forms/__tests__/RecordingDetailsModal.test.jsx
@@ -59,7 +59,9 @@ vi.mock('@mantine/core', () => ({
     </button>
   ),
   Badge: ({ children, color }) => (
-    <span data-testid="badge" data-color={color}>{children}</span>
+    <span data-testid="badge" data-color={color}>
+      {children}
+    </span>
   ),
   Button: ({ children, onClick, disabled, loading, size, variant, color }) => (
     <button
@@ -74,24 +76,30 @@ vi.mock('@mantine/core', () => ({
     </button>
   ),
   Card: ({ children, onClick, style }) => (
-    <div data-testid="card" onClick={onClick} style={style}>{children}</div>
+    <div data-testid="card" onClick={onClick} style={style}>
+      {children}
+    </div>
   ),
   Flex: ({ children }) => <div>{children}</div>,
   Group: ({ children }) => <div>{children}</div>,
   Image: ({ src, alt, fallbackSrc }) => (
     <img src={src} alt={alt} data-fallback={fallbackSrc} />
   ),
-  Modal: ({ children, opened, onClose, title, size }) =>
+  Modal: ({ children, opened, onClose, title }) =>
     opened ? (
       <div data-testid="modal">
         <div data-testid="modal-title">{title}</div>
-        <button data-testid="modal-close" onClick={onClose}>×</button>
+        <button data-testid="modal-close" onClick={onClose}>
+          ×
+        </button>
         {children}
       </div>
     ) : null,
   Stack: ({ children }) => <div>{children}</div>,
   Text: ({ children, size, c, fw, style }) => (
-    <span data-size={size} data-color={c} data-fw={fw} style={style}>{children}</span>
+    <span data-size={size} data-color={c} data-fw={fw} style={style}>
+      {children}
+    </span>
   ),
   Textarea: ({ label, value, onChange, placeholder, ...props }) => (
     <div>
@@ -207,7 +215,9 @@ const setupMocks = ({ recording = makeRecording(), now = NOW } = {}) => {
 
   vi.mocked(RecordingCardUtils.getPosterUrl).mockReturnValue('/poster.jpg');
   vi.mocked(RecordingCardUtils.getChannelLogoUrl).mockReturnValue('/logo.png');
-  vi.mocked(RecordingCardUtils.getRecordingUrl).mockReturnValue('/recordings/test.ts');
+  vi.mocked(RecordingCardUtils.getRecordingUrl).mockReturnValue(
+    '/recordings/test.ts'
+  );
   vi.mocked(RecordingCardUtils.getSeasonLabel).mockReturnValue('');
   vi.mocked(RecordingCardUtils.getShowVideoUrl).mockReturnValue('/live/ch-1');
 
@@ -234,10 +244,16 @@ describe('RecordingDetailsModal', () => {
   beforeEach(() => {
     vi.clearAllMocks();
     setupMocks();
-    vi.mocked(RecordingDetailsModalUtils.updateRecordingMetadata).mockResolvedValue(undefined);
-    vi.mocked(RecordingDetailsModalUtils.refreshArtwork).mockResolvedValue(undefined);
+    vi.mocked(
+      RecordingDetailsModalUtils.updateRecordingMetadata
+    ).mockResolvedValue(undefined);
+    vi.mocked(RecordingDetailsModalUtils.refreshArtwork).mockResolvedValue(
+      undefined
+    );
     vi.mocked(RecordingCardUtils.runComSkip).mockResolvedValue(undefined);
-    vi.mocked(RecordingCardUtils.deleteRecordingById).mockResolvedValue(undefined);
+    vi.mocked(RecordingCardUtils.deleteRecordingById).mockResolvedValue(
+      undefined
+    );
   });
 
   // ── Visibility ───────────────────────────────────────────────────────────────
@@ -294,14 +310,19 @@ describe('RecordingDetailsModal', () => {
 
     it('renders the poster image', () => {
       render(<RecordingDetailsModal {...defaultProps()} />);
-      expect(screen.getByAltText('Test Show')).toHaveAttribute('src', '/poster.jpg');
+      expect(screen.getByAltText('Test Show')).toHaveAttribute(
+        'src',
+        '/poster.jpg'
+      );
     });
 
     it('renders the season/episode label when present', () => {
       const seriesRecording = makeRecording({ _group_count: 2 });
       const mockEpisode = makeRecording({ id: 'ep-1', _group_count: 1 });
 
-      vi.mocked(RecordingDetailsModalUtils.getUpcomingEpisodes).mockReturnValue([mockEpisode]);
+      vi.mocked(RecordingDetailsModalUtils.getUpcomingEpisodes).mockReturnValue(
+        [mockEpisode]
+      );
       vi.mocked(RecordingCardUtils.getSeasonLabel).mockReturnValue('S01E02');
 
       render(
@@ -412,7 +433,10 @@ describe('RecordingDetailsModal', () => {
 
   describe('Edit button', () => {
     it('renders the Edit button', () => {
-      const futureRecording = makeRecording({ start_time: FUTURE, end_time: FUTURE });
+      const futureRecording = makeRecording({
+        start_time: FUTURE,
+        end_time: FUTURE,
+      });
       setupMocks({ recording: futureRecording });
       render(
         <RecordingDetailsModal
@@ -424,7 +448,10 @@ describe('RecordingDetailsModal', () => {
     });
 
     it('calls onEdit when Edit is clicked', () => {
-      const futureRecording = makeRecording({ start_time: FUTURE, end_time: FUTURE });
+      const futureRecording = makeRecording({
+        start_time: FUTURE,
+        end_time: FUTURE,
+      });
       setupMocks({ recording: futureRecording });
       const onEdit = vi.fn();
       render(
@@ -445,27 +472,37 @@ describe('RecordingDetailsModal', () => {
     it('shows edit inputs when pencil icon is clicked', () => {
       render(<RecordingDetailsModal {...defaultProps()} />);
       fireEvent.click(screen.getByTestId('icon-pencil').closest('button'));
-      expect(screen.getByTestId('textinput-Recording title')).toBeInTheDocument();
+      expect(
+        screen.getByTestId('textinput-Recording title')
+      ).toBeInTheDocument();
     });
 
     it('pre-fills title input with current title', () => {
       render(<RecordingDetailsModal {...defaultProps()} />);
       fireEvent.click(screen.getByTestId('icon-pencil').closest('button'));
-      expect(screen.getByTestId('textinput-Recording title')).toHaveValue('Test Show');
+      expect(screen.getByTestId('textinput-Recording title')).toHaveValue(
+        'Test Show'
+      );
     });
 
     it('pre-fills description input with current description', () => {
       render(<RecordingDetailsModal {...defaultProps()} />);
       fireEvent.click(screen.getByTestId('icon-pencil').closest('button'));
-      expect(screen.getByTestId('textarea-Description (optional)')).toHaveValue('A test description');
+      expect(screen.getByTestId('textarea-Description (optional)')).toHaveValue(
+        'A test description'
+      );
     });
 
     it('cancels editing when X icon is clicked', () => {
       render(<RecordingDetailsModal {...defaultProps()} />);
       fireEvent.click(screen.getByTestId('icon-pencil').closest('button'));
-      expect(screen.getByTestId('textinput-Recording title')).toBeInTheDocument();
+      expect(
+        screen.getByTestId('textinput-Recording title')
+      ).toBeInTheDocument();
       fireEvent.click(screen.getByTestId('icon-x').closest('button'));
-      expect(screen.queryByTestId('textinput-Recording title')).not.toBeInTheDocument();
+      expect(
+        screen.queryByTestId('textinput-Recording title')
+      ).not.toBeInTheDocument();
     });
 
     it('calls updateRecordingMetadata with new title and description on save', async () => {
@@ -753,18 +790,17 @@ describe('RecordingDetailsModal', () => {
         target: { value: 'Custom' },
       });
       fireEvent.click(screen.getByTestId('icon-check').closest('button'));
-      await waitFor(() => expect(screen.getByText('Custom')).toBeInTheDocument());
+      await waitFor(() =>
+        expect(screen.getByText('Custom')).toBeInTheDocument()
+      );
 
       // Switch to a different recording
       const newRecording = makeRecording({ id: 'rec-2' });
       setupMocks({ recording: newRecording });
       rerender(
-        <RecordingDetailsModal
-          {...defaultProps()}
-          recording={newRecording}
-        />
+        <RecordingDetailsModal {...defaultProps()} recording={newRecording} />
       );
       expect(screen.getByText(/Test Show/i)).toBeInTheDocument();
     });
   });
-});
\ No newline at end of file
+});
diff --git a/frontend/src/components/forms/__tests__/RecurringRuleModal.test.jsx b/frontend/src/components/forms/__tests__/RecurringRuleModal.test.jsx
index 6bfc8927..308a415b 100644
--- a/frontend/src/components/forms/__tests__/RecurringRuleModal.test.jsx
+++ b/frontend/src/components/forms/__tests__/RecurringRuleModal.test.jsx
@@ -59,12 +59,10 @@ vi.mock('@mantine/form', async () => {
             setValuesState((prev) => ({ ...prev, [k]: v }));
           }),
         })),
-        onSubmit: vi.fn(
-          (handler) => (e) => {
-            e?.preventDefault?.();
-            return handler(values);
-          }
-        ),
+        onSubmit: vi.fn((handler) => (e) => {
+          e?.preventDefault?.();
+          return handler(values);
+        }),
         reset: vi.fn(() => setValuesState({ ...initialValues })),
         setValues: vi.fn((newVals) =>
           setValuesState((prev) => ({ ...prev, ...newVals }))
@@ -84,7 +82,16 @@ vi.mock('@mantine/core', () => ({
       {children}
     </span>
   ),
-  Button: ({ children, onClick, loading, type, variant, color, size, disabled }) => (
+  Button: ({
+    children,
+    onClick,
+    loading,
+    type,
+    variant,
+    color,
+    size,
+    disabled,
+  }) => (
     <button
       type={type}
       onClick={onClick}
@@ -173,8 +180,10 @@ vi.mock('@mantine/dates', () => ({
       <label>{label}</label>
       <input
         data-testid={`datepicker-${label}`}
-        value={value ? value.toISOString?.() ?? String(value) : ''}
-        onChange={(e) => onChange(e.target.value ? new Date(e.target.value) : null)}
+        value={value ? (value.toISOString?.() ?? String(value)) : ''}
+        onChange={(e) =>
+          onChange(e.target.value ? new Date(e.target.value) : null)
+        }
       />
     </div>
   ),
@@ -286,7 +295,9 @@ const setupMocks = ({ rule = makeRule(), occurrences = [] } = {}) => {
     enabled: rule?.enabled ?? true,
   });
 
-  vi.mocked(RecordingUtils.getChannelsSummary).mockResolvedValue([makeChannel()]);
+  vi.mocked(RecordingUtils.getChannelsSummary).mockResolvedValue([
+    makeChannel(),
+  ]);
 
   vi.mocked(RecurringRuleModalUtils.getFormDefaults).mockReturnValue({
     channel_id: rule?.channel_id ?? '',
@@ -299,10 +310,18 @@ const setupMocks = ({ rule = makeRule(), occurrences = [] } = {}) => {
     enabled: rule?.enabled ?? true,
   });
 
-  vi.mocked(RecurringRuleModalUtils.getUpcomingOccurrences).mockReturnValue(occurrences);
-  vi.mocked(RecurringRuleModalUtils.updateRecurringRule).mockResolvedValue(undefined);
-  vi.mocked(RecurringRuleModalUtils.updateRecurringRuleEnabled).mockResolvedValue(undefined);
-  vi.mocked(RecurringRuleModalUtils.deleteRecurringRuleById).mockResolvedValue(undefined);
+  vi.mocked(RecurringRuleModalUtils.getUpcomingOccurrences).mockReturnValue(
+    occurrences
+  );
+  vi.mocked(RecurringRuleModalUtils.updateRecurringRule).mockResolvedValue(
+    undefined
+  );
+  vi.mocked(
+    RecurringRuleModalUtils.updateRecurringRuleEnabled
+  ).mockResolvedValue(undefined);
+  vi.mocked(RecurringRuleModalUtils.deleteRecurringRuleById).mockResolvedValue(
+    undefined
+  );
   vi.mocked(deleteRecordingById).mockResolvedValue(undefined);
 
   return { mockFetchRecurringRules };
@@ -339,13 +358,17 @@ describe('RecurringRuleModal', () => {
 
     it('uses rule name as modal title', () => {
       render(<RecurringRuleModal {...defaultProps()} />);
-      expect(screen.getByTestId('modal-title')).toHaveTextContent('Morning News');
+      expect(screen.getByTestId('modal-title')).toHaveTextContent(
+        'Morning News'
+      );
     });
 
     it('falls back to "Recurring Rule" when rule has no name', () => {
       setupMocks({ rule: makeRule({ name: '' }) });
       render(<RecurringRuleModal {...defaultProps()} />);
-      expect(screen.getByTestId('modal-title')).toHaveTextContent('Recurring Rule');
+      expect(screen.getByTestId('modal-title')).toHaveTextContent(
+        'Recurring Rule'
+      );
     });
 
     it('calls onClose when modal close button is clicked', () => {
@@ -366,16 +389,15 @@ describe('RecurringRuleModal', () => {
     it('renders fallback message when rule does not exist', () => {
       render(<RecurringRuleModal {...defaultProps()} />);
       expect(
-        screen.getByText('The recurring rule for this recording no longer exists.')
+        screen.getByText(
+          'The recurring rule for this recording no longer exists.'
+        )
       ).toBeInTheDocument();
     });
 
     it('shows Delete Recording button when sourceRecording is provided', () => {
       render(
-        <RecurringRuleModal
-          {...defaultProps()}
-          recording={makeRecording()}
-        />
+        <RecurringRuleModal {...defaultProps()} recording={makeRecording()} />
       );
       expect(screen.getByText('Delete Recording')).toBeInTheDocument();
     });
@@ -407,7 +429,10 @@ describe('RecurringRuleModal', () => {
       fireEvent.click(screen.getByText('Delete Recording'));
       await waitFor(() => {
         expect(showNotification).toHaveBeenCalledWith(
-          expect.objectContaining({ title: 'Recording deleted', color: 'green' })
+          expect.objectContaining({
+            title: 'Recording deleted',
+            color: 'green',
+          })
         );
       });
     });
@@ -571,10 +596,9 @@ describe('RecurringRuleModal', () => {
       render(<RecurringRuleModal {...defaultProps()} />);
       fireEvent.submit(screen.getByText('Save changes').closest('form'));
       await waitFor(() => {
-        expect(RecurringRuleModalUtils.updateRecurringRule).toHaveBeenCalledWith(
-          'rule-1',
-          expect.any(Object)
-        );
+        expect(
+          RecurringRuleModalUtils.updateRecurringRule
+        ).toHaveBeenCalledWith('rule-1', expect.any(Object));
       });
     });
 
@@ -623,12 +647,17 @@ describe('RecurringRuleModal', () => {
     it('Save changes button shows loading state while saving', async () => {
       let resolve;
       vi.mocked(RecurringRuleModalUtils.updateRecurringRule).mockReturnValue(
-        new Promise((r) => { resolve = r; })
+        new Promise((r) => {
+          resolve = r;
+        })
       );
       render(<RecurringRuleModal {...defaultProps()} />);
       fireEvent.submit(screen.getByText('Save changes').closest('form'));
       await waitFor(() => {
-        expect(screen.getByText('Save changes')).toHaveAttribute('data-loading', 'true');
+        expect(screen.getByText('Save changes')).toHaveAttribute(
+          'data-loading',
+          'true'
+        );
       });
       resolve();
     });
@@ -646,9 +675,9 @@ describe('RecurringRuleModal', () => {
       render(<RecurringRuleModal {...defaultProps()} />);
       fireEvent.click(screen.getByText('Delete rule'));
       await waitFor(() => {
-        expect(RecurringRuleModalUtils.deleteRecurringRuleById).toHaveBeenCalledWith(
-          'rule-1'
-        );
+        expect(
+          RecurringRuleModalUtils.deleteRecurringRuleById
+        ).toHaveBeenCalledWith('rule-1');
       });
     });
 
@@ -684,9 +713,9 @@ describe('RecurringRuleModal', () => {
     });
 
     it('does not show notification when deleteRecurringRuleById throws', async () => {
-      vi.mocked(RecurringRuleModalUtils.deleteRecurringRuleById).mockRejectedValue(
-        new Error('fail')
-      );
+      vi.mocked(
+        RecurringRuleModalUtils.deleteRecurringRuleById
+      ).mockRejectedValue(new Error('fail'));
       render(<RecurringRuleModal {...defaultProps()} />);
       fireEvent.click(screen.getByText('Delete rule'));
       await waitFor(() => {
@@ -805,7 +834,9 @@ describe('RecurringRuleModal', () => {
 
     it('calls getUpcomingOccurrences with recordings, userNow, ruleId, toUserTime', () => {
       render(<RecurringRuleModal {...defaultProps()} />);
-      expect(RecurringRuleModalUtils.getUpcomingOccurrences).toHaveBeenCalledWith(
+      expect(
+        RecurringRuleModalUtils.getUpcomingOccurrences
+      ).toHaveBeenCalledWith(
         expect.any(Array),
         expect.any(Function),
         'rule-1',
@@ -838,10 +869,7 @@ describe('RecurringRuleModal', () => {
       const occ = makeOccurrence();
       setupMocks({ occurrences: [occ] });
       render(
-        <RecurringRuleModal
-          {...defaultProps()}
-          onEditOccurrence={undefined}
-        />
+        <RecurringRuleModal {...defaultProps()} onEditOccurrence={undefined} />
       );
       expect(() => fireEvent.click(screen.getByText('Edit'))).not.toThrow();
     });
@@ -888,13 +916,18 @@ describe('RecurringRuleModal', () => {
     it('shows loading state on Cancel button while deleting occurrence', async () => {
       let resolve;
       vi.mocked(deleteRecordingById).mockReturnValue(
-        new Promise((r) => { resolve = r; })
+        new Promise((r) => {
+          resolve = r;
+        })
       );
       setupMocks({ occurrences: [makeOccurrence()] });
       render(<RecurringRuleModal {...defaultProps()} />);
       fireEvent.click(screen.getByText('Cancel'));
       await waitFor(() => {
-        expect(screen.getByText('Cancel')).toHaveAttribute('data-loading', 'true');
+        expect(screen.getByText('Cancel')).toHaveAttribute(
+          'data-loading',
+          'true'
+        );
       });
       resolve();
     });
@@ -934,4 +967,3 @@ describe('RecurringRuleModal', () => {
     });
   });
 });
-
diff --git a/frontend/src/components/forms/__tests__/ScheduleInput.test.jsx b/frontend/src/components/forms/__tests__/ScheduleInput.test.jsx
index 85dc55d9..1fcd3216 100644
--- a/frontend/src/components/forms/__tests__/ScheduleInput.test.jsx
+++ b/frontend/src/components/forms/__tests__/ScheduleInput.test.jsx
@@ -4,7 +4,15 @@ import ScheduleInput from '../ScheduleInput';
 
 // ── Mantine core ───────────────────────────────────────────────────────────────
 vi.mock('@mantine/core', () => ({
-  TextInput: ({ label, placeholder, description, value, onChange, error, disabled }) => (
+  TextInput: ({
+    label,
+    placeholder,
+    description,
+    value,
+    onChange,
+    error,
+    disabled,
+  }) => (
     <div>
       <label>{typeof label === 'string' ? label : 'Cron Expression'}</label>
       <input
@@ -30,11 +38,17 @@ vi.mock('@mantine/core', () => ({
         min={min}
         disabled={disabled}
       />
-      {description && <span data-testid="interval-description">{description}</span>}
+      {description && (
+        <span data-testid="interval-description">{description}</span>
+      )}
     </div>
   ),
   Anchor: ({ children, onClick }) => (
-    <a data-testid={`anchor-${String(children).replace(/\s+/g, '-').toLowerCase()}`} onClick={onClick} href="#">
+    <a
+      data-testid={`anchor-${String(children).replace(/\s+/g, '-').toLowerCase()}`}
+      onClick={onClick}
+      href="#"
+    >
       {children}
     </a>
   ),
@@ -44,9 +58,13 @@ vi.mock('@mantine/core', () => ({
   Group: ({ children }) => <div>{children}</div>,
   Popover: ({ children }) => <div>{children}</div>,
   PopoverTarget: ({ children }) => <div>{children}</div>,
-  PopoverDropdown: ({ children }) => <div data-testid="popover-dropdown">{children}</div>,
+  PopoverDropdown: ({ children }) => (
+    <div data-testid="popover-dropdown">{children}</div>
+  ),
   ActionIcon: ({ children, onClick }) => (
-    <button data-testid="action-icon-info" onClick={onClick}>{children}</button>
+    <button data-testid="action-icon-info" onClick={onClick}>
+      {children}
+    </button>
   ),
 }));
 
@@ -66,7 +84,10 @@ vi.mock('../CronBuilder', () => ({
     opened ? (
       <div data-testid="cron-builder">
         <span data-testid="cron-builder-value">{currentValue}</span>
-        <button data-testid="cron-builder-apply" onClick={() => onApply('0 3 * * *')}>
+        <button
+          data-testid="cron-builder-apply"
+          onClick={() => onApply('0 3 * * *')}
+        >
           Apply
         </button>
         <button data-testid="cron-builder-close" onClick={onClose}>
@@ -122,7 +143,12 @@ describe('ScheduleInput', () => {
     });
 
     it('renders custom intervalLabel', () => {
-      render(<ScheduleInput {...defaultIntervalProps()} intervalLabel="My Custom Label" />);
+      render(
+        <ScheduleInput
+          {...defaultIntervalProps()}
+          intervalLabel="My Custom Label"
+        />
+      );
       expect(screen.getByText('My Custom Label')).toBeInTheDocument();
     });
 
@@ -144,7 +170,9 @@ describe('ScheduleInput', () => {
 
     it('shows "Use cron schedule" link in interval mode', () => {
       render(<ScheduleInput {...defaultIntervalProps()} />);
-      expect(screen.getByTestId('anchor-use-cron-schedule')).toBeInTheDocument();
+      expect(
+        screen.getByTestId('anchor-use-cron-schedule')
+      ).toBeInTheDocument();
     });
 
     it('calls onScheduleTypeChange("cron") when "Use cron schedule" is clicked', () => {
@@ -156,7 +184,9 @@ describe('ScheduleInput', () => {
 
     it('does not show cron switch link when disabled', () => {
       render(<ScheduleInput {...defaultIntervalProps()} disabled />);
-      expect(screen.queryByTestId('anchor-use-cron-schedule')).not.toBeInTheDocument();
+      expect(
+        screen.queryByTestId('anchor-use-cron-schedule')
+      ).not.toBeInTheDocument();
     });
 
     it('disables the NumberInput when disabled prop is true', () => {
@@ -166,7 +196,10 @@ describe('ScheduleInput', () => {
 
     it('renders custom switchToCronLabel', () => {
       render(
-        <ScheduleInput {...defaultIntervalProps()} switchToCronLabel="Use custom cron schedule" />
+        <ScheduleInput
+          {...defaultIntervalProps()}
+          switchToCronLabel="Use custom cron schedule"
+        />
       );
       expect(screen.getByText('Use custom cron schedule')).toBeInTheDocument();
     });
@@ -182,7 +215,9 @@ describe('ScheduleInput', () => {
         </ScheduleInput>
       );
       expect(screen.getByTestId('custom-child')).toBeInTheDocument();
-      expect(screen.queryByTestId('numberinput-interval')).not.toBeInTheDocument();
+      expect(
+        screen.queryByTestId('numberinput-interval')
+      ).not.toBeInTheDocument();
     });
 
     it('shows cron toggle link below children', () => {
@@ -191,7 +226,9 @@ describe('ScheduleInput', () => {
           <div>Child</div>
         </ScheduleInput>
       );
-      expect(screen.getByTestId('anchor-use-cron-schedule')).toBeInTheDocument();
+      expect(
+        screen.getByTestId('anchor-use-cron-schedule')
+      ).toBeInTheDocument();
     });
 
     it('does not show cron link when disabled with children', () => {
@@ -200,7 +237,9 @@ describe('ScheduleInput', () => {
           <div>Child</div>
         </ScheduleInput>
       );
-      expect(screen.queryByTestId('anchor-use-cron-schedule')).not.toBeInTheDocument();
+      expect(
+        screen.queryByTestId('anchor-use-cron-schedule')
+      ).not.toBeInTheDocument();
     });
   });
 
@@ -219,12 +258,16 @@ describe('ScheduleInput', () => {
 
     it('shows "Use interval schedule" link in cron mode', () => {
       render(<ScheduleInput {...defaultCronProps()} />);
-      expect(screen.getByTestId('anchor-use-interval-schedule')).toBeInTheDocument();
+      expect(
+        screen.getByTestId('anchor-use-interval-schedule')
+      ).toBeInTheDocument();
     });
 
     it('shows "Open Cron Builder" link', () => {
       render(<ScheduleInput {...defaultCronProps()} />);
-      expect(screen.getByTestId('anchor-open-cron-builder')).toBeInTheDocument();
+      expect(
+        screen.getByTestId('anchor-open-cron-builder')
+      ).toBeInTheDocument();
     });
 
     it('calls onScheduleTypeChange("interval") and onCronChange("") when switching to interval', () => {
@@ -251,13 +294,20 @@ describe('ScheduleInput', () => {
 
     it('does not show cron links when disabled', () => {
       render(<ScheduleInput {...defaultCronProps()} disabled />);
-      expect(screen.queryByTestId('anchor-use-interval-schedule')).not.toBeInTheDocument();
-      expect(screen.queryByTestId('anchor-open-cron-builder')).not.toBeInTheDocument();
+      expect(
+        screen.queryByTestId('anchor-use-interval-schedule')
+      ).not.toBeInTheDocument();
+      expect(
+        screen.queryByTestId('anchor-open-cron-builder')
+      ).not.toBeInTheDocument();
     });
 
     it('renders custom switchToIntervalLabel', () => {
       render(
-        <ScheduleInput {...defaultCronProps()} switchToIntervalLabel="Use simple schedule" />
+        <ScheduleInput
+          {...defaultCronProps()}
+          switchToIntervalLabel="Use simple schedule"
+        />
       );
       expect(screen.getByText('Use simple schedule')).toBeInTheDocument();
     });
@@ -279,7 +329,9 @@ describe('ScheduleInput', () => {
       });
       render(<ScheduleInput {...defaultCronProps()} cronValue="bad cron" />);
       await waitFor(() => {
-        expect(screen.getByTestId('cron-error')).toHaveTextContent('Invalid cron expression');
+        expect(screen.getByTestId('cron-error')).toHaveTextContent(
+          'Invalid cron expression'
+        );
       });
     });
 
@@ -325,7 +377,9 @@ describe('ScheduleInput', () => {
     it('passes current cronValue to CronBuilder', () => {
       render(<ScheduleInput {...defaultCronProps()} cronValue="0 4 * * *" />);
       fireEvent.click(screen.getByTestId('anchor-open-cron-builder'));
-      expect(screen.getByTestId('cron-builder-value')).toHaveTextContent('0 4 * * *');
+      expect(screen.getByTestId('cron-builder-value')).toHaveTextContent(
+        '0 4 * * *'
+      );
     });
 
     it('closes CronBuilder when onClose is triggered', () => {
@@ -370,4 +424,4 @@ describe('ScheduleInput', () => {
       expect(screen.getByTestId('numberinput-interval')).toHaveValue(0);
     });
   });
-});
\ No newline at end of file
+});
diff --git a/frontend/src/components/forms/__tests__/SeriesRecordingModal.test.jsx b/frontend/src/components/forms/__tests__/SeriesRecordingModal.test.jsx
index 5e7f3c09..a5ca3bb0 100644
--- a/frontend/src/components/forms/__tests__/SeriesRecordingModal.test.jsx
+++ b/frontend/src/components/forms/__tests__/SeriesRecordingModal.test.jsx
@@ -63,9 +63,15 @@ vi.mock('../SeriesRuleEditorModal', () => ({
   default: ({ opened, onClose, initialRule, onSaved }) =>
     opened ? (
       <div data-testid="series-rule-editor">
-        <span data-testid="editor-rule">{initialRule ? initialRule.title : 'new'}</span>
-        <button data-testid="editor-close" onClick={onClose}>Close</button>
-        <button data-testid="editor-save" onClick={onSaved}>Save</button>
+        <span data-testid="editor-rule">
+          {initialRule ? initialRule.title : 'new'}
+        </span>
+        <button data-testid="editor-close" onClick={onClose}>
+          Close
+        </button>
+        <button data-testid="editor-save" onClick={onSaved}>
+          Save
+        </button>
       </div>
     ) : null,
 }));
@@ -73,7 +79,10 @@ vi.mock('../SeriesRuleEditorModal', () => ({
 // ──────────────────────────────────────────────────────────────────────────────
 import useChannelsStore from '../../../store/channels.jsx';
 import { deleteSeriesAndRule } from '../../../utils/cards/RecordingCardUtils.js';
-import { evaluateSeriesRulesByTvgId, fetchRules } from '../../../utils/guideUtils.js';
+import {
+  evaluateSeriesRulesByTvgId,
+  fetchRules,
+} from '../../../utils/guideUtils.js';
 import { showNotification } from '../../../utils/notificationUtils.js';
 
 const makeRule = (overrides = {}) => ({
@@ -126,7 +135,9 @@ describe('SeriesRecordingModal', () => {
 
     it('renders modal title "Series Recording Rules"', () => {
       render(<SeriesRecordingModal {...defaultProps()} />);
-      expect(screen.getByTestId('modal-title')).toHaveTextContent('Series Recording Rules');
+      expect(screen.getByTestId('modal-title')).toHaveTextContent(
+        'Series Recording Rules'
+      );
     });
 
     it('calls onClose when modal close button is clicked', () => {
@@ -142,17 +153,23 @@ describe('SeriesRecordingModal', () => {
   describe('empty state', () => {
     it('shows "No series rules configured" when rules is empty', () => {
       render(<SeriesRecordingModal {...defaultProps({ rules: [] })} />);
-      expect(screen.getByText('No series rules configured')).toBeInTheDocument();
+      expect(
+        screen.getByText('No series rules configured')
+      ).toBeInTheDocument();
     });
 
     it('shows "No series rules configured" when rules is null', () => {
       render(<SeriesRecordingModal {...defaultProps({ rules: null })} />);
-      expect(screen.getByText('No series rules configured')).toBeInTheDocument();
+      expect(
+        screen.getByText('No series rules configured')
+      ).toBeInTheDocument();
     });
 
     it('does not show "No series rules configured" when rules are present', () => {
       render(<SeriesRecordingModal {...defaultProps()} />);
-      expect(screen.queryByText('No series rules configured')).not.toBeInTheDocument();
+      expect(
+        screen.queryByText('No series rules configured')
+      ).not.toBeInTheDocument();
     });
   });
 
@@ -167,7 +184,9 @@ describe('SeriesRecordingModal', () => {
     it('falls back to tvg_id when rule has no title', () => {
       render(
         <SeriesRecordingModal
-          {...defaultProps({ rules: [makeRule({ title: '', tvg_id: 'tvg-fallback' })] })}
+          {...defaultProps({
+            rules: [makeRule({ title: '', tvg_id: 'tvg-fallback' })],
+          })}
         />
       );
       expect(screen.getByText('tvg-fallback')).toBeInTheDocument();
@@ -214,19 +233,29 @@ describe('SeriesRecordingModal', () => {
 
   describe('rule summary', () => {
     it('shows "New episodes" for mode new', () => {
-      render(<SeriesRecordingModal {...defaultProps({ rules: [makeRule({ mode: 'new' })] })} />);
+      render(
+        <SeriesRecordingModal
+          {...defaultProps({ rules: [makeRule({ mode: 'new' })] })}
+        />
+      );
       expect(screen.getByText(/New episodes/)).toBeInTheDocument();
     });
 
     it('shows "Every episode" for mode all', () => {
-      render(<SeriesRecordingModal {...defaultProps({ rules: [makeRule({ mode: 'all' })] })} />);
+      render(
+        <SeriesRecordingModal
+          {...defaultProps({ rules: [makeRule({ mode: 'all' })] })}
+        />
+      );
       expect(screen.getByText(/Every episode/)).toBeInTheDocument();
     });
 
     it('shows exact title label in summary', () => {
       render(
         <SeriesRecordingModal
-          {...defaultProps({ rules: [makeRule({ title_mode: 'exact', title: 'Test Show' })] })}
+          {...defaultProps({
+            rules: [makeRule({ title_mode: 'exact', title: 'Test Show' })],
+          })}
         />
       );
       expect(screen.getByText(/Exact title: "Test Show"/)).toBeInTheDocument();
@@ -235,7 +264,9 @@ describe('SeriesRecordingModal', () => {
     it('shows contains label in summary', () => {
       render(
         <SeriesRecordingModal
-          {...defaultProps({ rules: [makeRule({ title_mode: 'contains', title: 'Test' })] })}
+          {...defaultProps({
+            rules: [makeRule({ title_mode: 'contains', title: 'Test' })],
+          })}
         />
       );
       expect(screen.getByText(/Title contains: "Test"/)).toBeInTheDocument();
@@ -244,7 +275,9 @@ describe('SeriesRecordingModal', () => {
     it('shows regex label in summary', () => {
       render(
         <SeriesRecordingModal
-          {...defaultProps({ rules: [makeRule({ title_mode: 'regex', title: '^Test' })] })}
+          {...defaultProps({
+            rules: [makeRule({ title_mode: 'regex', title: '^Test' })],
+          })}
         />
       );
       expect(screen.getByText(/Title regex: "\^Test"/)).toBeInTheDocument();
@@ -289,7 +322,10 @@ describe('SeriesRecordingModal', () => {
       fireEvent.click(screen.getByText('Evaluate Now'));
       await waitFor(() => {
         expect(showNotification).toHaveBeenCalledWith(
-          expect.objectContaining({ title: 'Evaluated', message: 'Checked for episodes' })
+          expect.objectContaining({
+            title: 'Evaluated',
+            message: 'Checked for episodes',
+          })
         );
       });
     });
@@ -377,7 +413,9 @@ describe('SeriesRecordingModal', () => {
       render(<SeriesRecordingModal {...defaultProps()} />);
       fireEvent.click(screen.getByText('Add rule'));
       fireEvent.click(screen.getByTestId('editor-close'));
-      expect(screen.queryByTestId('series-rule-editor')).not.toBeInTheDocument();
+      expect(
+        screen.queryByTestId('series-rule-editor')
+      ).not.toBeInTheDocument();
     });
   });
 
@@ -414,4 +452,4 @@ describe('SeriesRecordingModal', () => {
       });
     });
   });
-});
\ No newline at end of file
+});
diff --git a/frontend/src/components/forms/__tests__/SeriesRuleEditorModal.test.jsx b/frontend/src/components/forms/__tests__/SeriesRuleEditorModal.test.jsx
index 59a98bd9..2fffd170 100644
--- a/frontend/src/components/forms/__tests__/SeriesRuleEditorModal.test.jsx
+++ b/frontend/src/components/forms/__tests__/SeriesRuleEditorModal.test.jsx
@@ -90,14 +90,7 @@ vi.mock('@mantine/core', () => ({
       ))}
     </div>
   ),
-  Select: ({
-    label,
-    placeholder,
-    data,
-    value,
-    onChange,
-    description,
-  }) => (
+  Select: ({ label, placeholder, data, value, onChange, description }) => (
     <div>
       <label>{label}</label>
       {description && (
@@ -156,7 +149,10 @@ import useEPGsStore from '../../../store/epgs.jsx';
 import { useDebounce } from '../../../utils.js';
 import { showNotification } from '../../../utils/notificationUtils.js';
 import { getChannelsSummary } from '../../../utils/forms/RecordingUtils.js';
-import { createSeriesRule, evaluateSeriesRulesByTvgId } from '../../../utils/guideUtils.js';
+import {
+  createSeriesRule,
+  evaluateSeriesRulesByTvgId,
+} from '../../../utils/guideUtils.js';
 import {
   getTvgOptions,
   previewSeriesRule,
@@ -216,7 +212,11 @@ const setupMocks = () => {
 
   vi.mocked(getTvgOptions).mockReturnValue(mockTvgOptions);
   vi.mocked(getChannelsSummary).mockResolvedValue(mockChannels);
-  vi.mocked(previewSeriesRule).mockResolvedValue({ matches: [], total: 0, epg_found: true });
+  vi.mocked(previewSeriesRule).mockResolvedValue({
+    matches: [],
+    total: 0,
+    epg_found: true,
+  });
   vi.mocked(createSeriesRule).mockResolvedValue({ id: 'rule-1' });
   vi.mocked(evaluateSeriesRulesByTvgId).mockResolvedValue(undefined);
   vi.mocked(useDebounce).mockImplementation((val) => val);
@@ -260,7 +260,9 @@ describe('SeriesRuleEditorModal', () => {
 
     it('shows "New Series Rule" title when initialRule is null', () => {
       render(<SeriesRuleEditorModal {...defaultProps} />);
-      expect(screen.getByTestId('modal-title')).toHaveTextContent('New Series Rule');
+      expect(screen.getByTestId('modal-title')).toHaveTextContent(
+        'New Series Rule'
+      );
     });
 
     it('shows "Edit Series Rule" title when initialRule is provided', () => {
@@ -270,7 +272,9 @@ describe('SeriesRuleEditorModal', () => {
           initialRule={{ tvg_id: 'tvg-1', mode: 'all', title: 'Test' }}
         />
       );
-      expect(screen.getByTestId('modal-title')).toHaveTextContent('Edit Series Rule');
+      expect(screen.getByTestId('modal-title')).toHaveTextContent(
+        'Edit Series Rule'
+      );
     });
 
     it('renders the title input', () => {
@@ -325,21 +329,29 @@ describe('SeriesRuleEditorModal', () => {
     };
 
     it('pre-fills title from initialRule', () => {
-      render(<SeriesRuleEditorModal {...defaultProps} initialRule={initialRule} />);
+      render(
+        <SeriesRuleEditorModal {...defaultProps} initialRule={initialRule} />
+      );
       expect(screen.getByTestId('input-title')).toHaveValue('Pre-filled Title');
     });
 
     it('pre-fills description from initialRule', () => {
-      render(<SeriesRuleEditorModal {...defaultProps} initialRule={initialRule} />);
-      expect(screen.getByTestId('textarea-description')).toHaveValue('Pre-filled description');
+      render(
+        <SeriesRuleEditorModal {...defaultProps} initialRule={initialRule} />
+      );
+      expect(screen.getByTestId('textarea-description')).toHaveValue(
+        'Pre-filled description'
+      );
     });
 
     it('uses default mode "all" when initialRule has no mode', () => {
-      render(<SeriesRuleEditorModal {...defaultProps} initialRule={{ title: 'X' }} />);
-      // "All" segmented button should be active (data-active=true)
-      const allBtn = screen.getAllByText('All').find(
-        (el) => el.closest('[data-testid="segmented-control"]')
+      render(
+        <SeriesRuleEditorModal {...defaultProps} initialRule={{ title: 'X' }} />
       );
+      // "All" segmented button should be active (data-active=true)
+      const allBtn = screen
+        .getAllByText('All')
+        .find((el) => el.closest('[data-testid="segmented-control"]'));
       expect(allBtn).toBeTruthy();
     });
 
@@ -348,10 +360,18 @@ describe('SeriesRuleEditorModal', () => {
         <SeriesRuleEditorModal {...defaultProps} initialRule={initialRule} />
       );
       rerender(
-        <SeriesRuleEditorModal {...defaultProps} opened={false} initialRule={null} />
+        <SeriesRuleEditorModal
+          {...defaultProps}
+          opened={false}
+          initialRule={null}
+        />
       );
       rerender(
-        <SeriesRuleEditorModal {...defaultProps} opened={true} initialRule={null} />
+        <SeriesRuleEditorModal
+          {...defaultProps}
+          opened={true}
+          initialRule={null}
+        />
       );
       expect(screen.getByTestId('input-title')).toHaveValue('');
       expect(screen.getByTestId('textarea-description')).toHaveValue('');
@@ -374,7 +394,9 @@ describe('SeriesRuleEditorModal', () => {
     });
 
     it('handles getChannelsSummary rejection gracefully', async () => {
-      vi.mocked(getChannelsSummary).mockRejectedValue(new Error('Network error'));
+      vi.mocked(getChannelsSummary).mockRejectedValue(
+        new Error('Network error')
+      );
       render(<SeriesRuleEditorModal {...defaultProps} />);
       // Should not throw; channel options just empty
       await waitFor(() => {
@@ -439,7 +461,11 @@ describe('SeriesRuleEditorModal', () => {
     });
 
     it('renders preview badge with match count', async () => {
-      vi.mocked(previewSeriesRule).mockResolvedValue({ matches: [{ id: 'p1', title: 'X' }], total: 5, epg_found: true });
+      vi.mocked(previewSeriesRule).mockResolvedValue({
+        matches: [{ id: 'p1', title: 'X' }],
+        total: 5,
+        epg_found: true,
+      });
       render(<SeriesRuleEditorModal {...defaultProps} />);
       fireEvent.change(screen.getByTestId('input-title'), {
         target: { value: 'X' },
@@ -450,7 +476,9 @@ describe('SeriesRuleEditorModal', () => {
     });
 
     it('shows preview error alert when previewSeriesRule rejects', async () => {
-      vi.mocked(previewSeriesRule).mockRejectedValue(new Error('Preview failed'));
+      vi.mocked(previewSeriesRule).mockRejectedValue(
+        new Error('Preview failed')
+      );
       render(<SeriesRuleEditorModal {...defaultProps} />);
       fireEvent.change(screen.getByTestId('input-title'), {
         target: { value: 'Boom' },
@@ -467,9 +495,16 @@ describe('SeriesRuleEditorModal', () => {
         total: 0,
         epg_found: false,
       });
-      render(<SeriesRuleEditorModal {...defaultProps} initialRule={{ tvg_id: 'tvg-999', title: 'X' }} />);
+      render(
+        <SeriesRuleEditorModal
+          {...defaultProps}
+          initialRule={{ tvg_id: 'tvg-999', title: 'X' }}
+        />
+      );
       await waitFor(() => {
-        expect(screen.getByText(/No EPG channel matches this tvg_id/)).toBeInTheDocument();
+        expect(
+          screen.getByText(/No EPG channel matches this tvg_id/)
+        ).toBeInTheDocument();
       });
     });
 
@@ -485,7 +520,9 @@ describe('SeriesRuleEditorModal', () => {
         target: { value: 'X' },
       });
       await waitFor(() => {
-        expect(screen.getByText(/This rule matches many programs/)).toBeInTheDocument();
+        expect(
+          screen.getByText(/This rule matches many programs/)
+        ).toBeInTheDocument();
       });
     });
 
@@ -603,7 +640,9 @@ describe('SeriesRuleEditorModal', () => {
     });
 
     it('does not crash when evaluateSeriesRulesByTvgId throws', async () => {
-      vi.mocked(evaluateSeriesRulesByTvgId).mockRejectedValue(new Error('eval fail'));
+      vi.mocked(evaluateSeriesRulesByTvgId).mockRejectedValue(
+        new Error('eval fail')
+      );
       renderWithTitle();
       await expect(
         waitFor(() => {
@@ -626,7 +665,12 @@ describe('SeriesRuleEditorModal', () => {
 
     it('includes channel_id in payload when channelId is set', async () => {
       vi.mocked(getChannelsSummary).mockResolvedValue(mockChannels);
-      render(<SeriesRuleEditorModal {...defaultProps} initialRule={{ channel_id: 10, title: 'Show' }} />);
+      render(
+        <SeriesRuleEditorModal
+          {...defaultProps}
+          initialRule={{ channel_id: 10, title: 'Show' }}
+        />
+      );
       fireEvent.click(screen.getByText('Save rule'));
       await waitFor(() => {
         expect(createSeriesRule).toHaveBeenCalledWith(
@@ -660,7 +704,11 @@ describe('SeriesRuleEditorModal', () => {
   describe('SegmentedControl', () => {
     it('changes title mode when SegmentedControl is clicked', () => {
       render(<SeriesRuleEditorModal {...defaultProps} />);
-      fireEvent.click(screen.getAllByText('Contains').find((el) => el.closest('[data-testid="segmented-control"]')));
+      fireEvent.click(
+        screen
+          .getAllByText('Contains')
+          .find((el) => el.closest('[data-testid="segmented-control"]'))
+      );
       // No error thrown; state updated without crash
     });
 
@@ -679,4 +727,4 @@ describe('SeriesRuleEditorModal', () => {
       });
     });
   });
-});
\ No newline at end of file
+});
diff --git a/frontend/src/components/forms/__tests__/Stream.test.jsx b/frontend/src/components/forms/__tests__/Stream.test.jsx
index 18fe3b75..622fd46d 100644
--- a/frontend/src/components/forms/__tests__/Stream.test.jsx
+++ b/frontend/src/components/forms/__tests__/Stream.test.jsx
@@ -257,7 +257,9 @@ describe('Stream', () => {
   describe('default values', () => {
     it('pre-fills name from stream prop', () => {
       render(<Stream {...defaultProps({ stream: makeStream() })} />);
-      expect(screen.getByTestId('input-stream-name')).toHaveValue('Test Stream');
+      expect(screen.getByTestId('input-stream-name')).toHaveValue(
+        'Test Stream'
+      );
     });
 
     it('pre-fills url from stream prop', () => {
@@ -289,7 +291,9 @@ describe('Stream', () => {
 
     it('renders empty group when stream has no channel_group', () => {
       render(
-        <Stream {...defaultProps({ stream: makeStream({ channel_group: null }) })} />
+        <Stream
+          {...defaultProps({ stream: makeStream({ channel_group: null }) })}
+        />
       );
       expect(screen.getByTestId('select-group')).toHaveValue('');
     });
@@ -317,7 +321,9 @@ describe('Stream', () => {
         target: { value: 'http://new.stream/live' },
       });
 
-      fireEvent.submit(screen.getByRole('button', { name: 'Submit' }).closest('form'));
+      fireEvent.submit(
+        screen.getByRole('button', { name: 'Submit' }).closest('form')
+      );
 
       await waitFor(() => {
         expect(StreamUtils.addStream).toHaveBeenCalledWith(
diff --git a/frontend/src/components/forms/__tests__/StreamProfile.test.jsx b/frontend/src/components/forms/__tests__/StreamProfile.test.jsx
index 50237950..922a0281 100644
--- a/frontend/src/components/forms/__tests__/StreamProfile.test.jsx
+++ b/frontend/src/components/forms/__tests__/StreamProfile.test.jsx
@@ -25,7 +25,8 @@ vi.mock('../../../utils/forms/StreamProfileUtils.js', () => ({
   ],
   COMMAND_EXAMPLES: {
     ffmpeg: '-user_agent {userAgent} -i {streamUrl} -c copy -f mpegts pipe:1',
-    streamlink: '{streamUrl} --http-header User-Agent={userAgent} best --stdout',
+    streamlink:
+      '{streamUrl} --http-header User-Agent={userAgent} best --stdout',
   },
 }));
 
@@ -99,7 +100,9 @@ vi.mock('@mantine/core', () => ({
         data-testid="checkbox-is-active"
         type="checkbox"
         checked={checked ?? false}
-        onChange={(e) => onChange({ currentTarget: { checked: e.target.checked } })}
+        onChange={(e) =>
+          onChange({ currentTarget: { checked: e.target.checked } })
+        }
       />
     </div>
   ),
@@ -114,7 +117,17 @@ vi.mock('@mantine/core', () => ({
         {children}
       </div>
     ) : null,
-  Select: ({ label, value, onChange, data, placeholder, error, clearable, disabled, description }) => (
+  Select: ({
+    label,
+    value,
+    onChange,
+    data,
+    placeholder,
+    error,
+    clearable,
+    disabled,
+    description,
+  }) => (
     <div>
       <label>{label}</label>
       {description && <div>{description}</div>}
@@ -135,10 +148,24 @@ vi.mock('@mantine/core', () => ({
     </div>
   ),
   Stack: ({ children }) => <div>{children}</div>,
-  Textarea: ({ label, name, value, onChange, error, placeholder, description, disabled, ...rest }) => (
+  Textarea: ({
+    label,
+    name,
+    value,
+    onChange,
+    error,
+    placeholder,
+    description,
+    disabled,
+    ...rest
+  }) => (
     <div>
       <label htmlFor={name}>{label}</label>
-      {description && <div data-testid={`desc-${label?.replace(/\s+/g, '-').toLowerCase()}`}>{description}</div>}
+      {description && (
+        <div data-testid={`desc-${label?.replace(/\s+/g, '-').toLowerCase()}`}>
+          {description}
+        </div>
+      )}
       <textarea
         id={name}
         name={name}
@@ -196,7 +223,9 @@ const setupMocks = () => {
     sel({ userAgents: mockUserAgents })
   );
   vi.mocked(StreamProfileUtils.addStreamProfile).mockResolvedValue(undefined);
-  vi.mocked(StreamProfileUtils.updateStreamProfile).mockResolvedValue(undefined);
+  vi.mocked(StreamProfileUtils.updateStreamProfile).mockResolvedValue(
+    undefined
+  );
   vi.mocked(StreamProfileUtils.getResolver).mockReturnValue(undefined);
   vi.mocked(StreamProfileUtils.toCommandSelection).mockImplementation((cmd) => {
     const builtins = ['ffmpeg', 'streamlink', 'cvlc', 'yt-dlp'];
@@ -234,7 +263,9 @@ describe('StreamProfile', () => {
 
     it('renders "Stream Profile" as the modal title', () => {
       render(<StreamProfile {...defaultProps()} />);
-      expect(screen.getByTestId('modal-title')).toHaveTextContent('Stream Profile');
+      expect(screen.getByTestId('modal-title')).toHaveTextContent(
+        'Stream Profile'
+      );
     });
 
     it('calls onClose when modal close button is clicked', () => {
@@ -302,7 +333,9 @@ describe('StreamProfile', () => {
 
     it('pre-fills parameters from profile prop', () => {
       render(<StreamProfile {...defaultProps({ profile: makeProfile() })} />);
-      expect(screen.getByTestId('textarea-parameters')).toHaveValue('-i {streamUrl}');
+      expect(screen.getByTestId('textarea-parameters')).toHaveValue(
+        '-i {streamUrl}'
+      );
     });
 
     it('pre-selects command from profile prop', () => {
@@ -345,7 +378,9 @@ describe('StreamProfile', () => {
   describe('command selection', () => {
     it('does not show Custom Command input when a built-in is selected', () => {
       render(<StreamProfile {...defaultProps({ profile: makeProfile() })} />);
-      expect(screen.queryByTestId('input-custom-command')).not.toBeInTheDocument();
+      expect(
+        screen.queryByTestId('input-custom-command')
+      ).not.toBeInTheDocument();
     });
 
     it('shows Custom Command input when Custom… is selected', () => {
@@ -364,14 +399,20 @@ describe('StreamProfile', () => {
       fireEvent.change(screen.getByTestId('select-command'), {
         target: { value: 'ffmpeg' },
       });
-      expect(screen.queryByTestId('input-custom-command')).not.toBeInTheDocument();
+      expect(
+        screen.queryByTestId('input-custom-command')
+      ).not.toBeInTheDocument();
     });
 
     it('shows Custom Command input when profile has a custom command', () => {
-      vi.mocked(StreamProfileUtils.toCommandSelection).mockReturnValue('__custom__');
+      vi.mocked(StreamProfileUtils.toCommandSelection).mockReturnValue(
+        '__custom__'
+      );
       render(
         <StreamProfile
-          {...defaultProps({ profile: makeProfile({ command: '/usr/bin/mycmd' }) })}
+          {...defaultProps({
+            profile: makeProfile({ command: '/usr/bin/mycmd' }),
+          })}
         />
       );
       expect(screen.getByTestId('input-custom-command')).toBeInTheDocument();
@@ -604,4 +645,3 @@ describe('StreamProfile', () => {
     });
   });
 });
-
diff --git a/frontend/src/components/forms/__tests__/SuperuserForm.test.jsx b/frontend/src/components/forms/__tests__/SuperuserForm.test.jsx
index b9b0dcbb..4c13a456 100644
--- a/frontend/src/components/forms/__tests__/SuperuserForm.test.jsx
+++ b/frontend/src/components/forms/__tests__/SuperuserForm.test.jsx
@@ -191,7 +191,9 @@ describe('SuperuserForm', () => {
       fireEvent.change(screen.getByTestId('input-email'), {
         target: { name: 'email', value: 'admin@example.com' },
       });
-      expect(screen.getByTestId('input-email')).toHaveValue('admin@example.com');
+      expect(screen.getByTestId('input-email')).toHaveValue(
+        'admin@example.com'
+      );
     });
 
     it('initializes all fields as empty strings', () => {
@@ -329,4 +331,3 @@ describe('SuperuserForm', () => {
     });
   });
 });
-
diff --git a/frontend/src/components/forms/__tests__/User.test.jsx b/frontend/src/components/forms/__tests__/User.test.jsx
index f73c6a81..69760807 100644
--- a/frontend/src/components/forms/__tests__/User.test.jsx
+++ b/frontend/src/components/forms/__tests__/User.test.jsx
@@ -34,7 +34,10 @@ const mockForm = {
   setFieldValue: vi.fn(),
   reset: vi.fn(),
   getValues: vi.fn(() => ({ user_level: '3' })),
-  onSubmit: vi.fn((fn) => (e) => { e?.preventDefault?.(); return fn(); }),
+  onSubmit: vi.fn((fn) => (e) => {
+    e?.preventDefault?.();
+    return fn();
+  }),
   submitting: false,
 };
 
@@ -73,7 +76,9 @@ vi.mock('@mantine/core', () => ({
     opened ? (
       <div data-testid="modal">
         <div data-testid="modal-title">{title}</div>
-        <button data-testid="modal-close" onClick={onClose}>×</button>
+        <button data-testid="modal-close" onClick={onClose}>
+          ×
+        </button>
         {children}
       </div>
     ) : null,
@@ -82,29 +87,60 @@ vi.mock('@mantine/core', () => ({
       <label>{label}</label>
       <input
         data-testid={`multiselect-${label}`}
-        onChange={(e) => onChange?.(e.target.value ? e.target.value.split(',') : [])}
+        onChange={(e) =>
+          onChange?.(e.target.value ? e.target.value.split(',') : [])
+        }
       />
     </div>
   ),
-  NumberInput: ({ label }) => <div><label>{label}</label><input /></div>,
+  NumberInput: ({ label }) => (
+    <div>
+      <label>{label}</label>
+      <input />
+    </div>
+  ),
   PasswordInput: ({ label, disabled }) => (
-    <div><label>{label}</label><input type="password" disabled={disabled} /></div>
+    <div>
+      <label>{label}</label>
+      <input type="password" disabled={disabled} />
+    </div>
   ),
   Select: ({ label, disabled }) => (
-    <div><label>{label}</label><select disabled={disabled} /></div>
+    <div>
+      <label>{label}</label>
+      <select disabled={disabled} />
+    </div>
   ),
   Stack: ({ children }) => <div>{children}</div>,
-  Switch: ({ label }) => <div><label>{label}</label><input type="checkbox" /></div>,
+  Switch: ({ label }) => (
+    <div>
+      <label>{label}</label>
+      <input type="checkbox" />
+    </div>
+  ),
   Tabs: ({ children }) => <div>{children}</div>,
   TabsList: ({ children }) => <div>{children}</div>,
-  TabsPanel: ({ children, value }) => <div data-testid={`panel-${value}`}>{children}</div>,
-  TabsTab: ({ children, value }) => <button data-testid={`tab-${value}`}>{children}</button>,
-  TagsInput: ({ label }) => <div><label>{label}</label><input /></div>,
+  TabsPanel: ({ children, value }) => (
+    <div data-testid={`panel-${value}`}>{children}</div>
+  ),
+  TabsTab: ({ children, value }) => (
+    <button data-testid={`tab-${value}`}>{children}</button>
+  ),
+  TagsInput: ({ label }) => (
+    <div>
+      <label>{label}</label>
+      <input />
+    </div>
+  ),
   Text: ({ children }) => <span>{children}</span>,
   TextInput: ({ label, value, disabled, rightSection }) => (
     <div>
       <label>{label}</label>
-      <input data-testid={`textinput-${label}`} defaultValue={value} disabled={disabled} />
+      <input
+        data-testid={`textinput-${label}`}
+        defaultValue={value}
+        disabled={disabled}
+      />
       {rightSection}
     </div>
   ),
@@ -155,9 +191,10 @@ const setupMocks = ({
 
   // Reset form state
   mockForm.getValues.mockReturnValue({ user_level: '3' });
-  mockForm.onSubmit.mockImplementation(
-    (fn) => (e) => { e?.preventDefault?.(); return fn(); }
-  );
+  mockForm.onSubmit.mockImplementation((fn) => (e) => {
+    e?.preventDefault?.();
+    return fn();
+  });
 
   return { mockSetUser };
 };
@@ -169,7 +206,9 @@ describe('User', () => {
     vi.clearAllMocks();
     vi.mocked(UserUtils.createUser).mockResolvedValue({});
     vi.mocked(UserUtils.updateUser).mockResolvedValue({});
-    vi.mocked(UserUtils.generateApiKey).mockResolvedValue({ key: 'new-api-key' });
+    vi.mocked(UserUtils.generateApiKey).mockResolvedValue({
+      key: 'new-api-key',
+    });
     vi.mocked(UserUtils.revokeApiKey).mockResolvedValue({ success: true });
     vi.mocked(UserUtils.formValuesToPayload).mockReturnValue({ user_level: 3 });
     vi.mocked(UserUtils.getFormInitialValues).mockReturnValue({});
@@ -214,9 +253,7 @@ describe('User', () => {
 
     it('shows Permissions tab when admin edits another user', () => {
       setupMocks({ authUser: makeAdminUser() });
-      render(
-        <User isOpen={true} onClose={vi.fn()} user={makeRegularUser()} />
-      );
+      render(<User isOpen={true} onClose={vi.fn()} user={makeRegularUser()} />);
       expect(screen.getByTestId('tab-permissions')).toBeInTheDocument();
     });
 
@@ -230,7 +267,11 @@ describe('User', () => {
     it('hides Permissions tab for non-admin user', () => {
       setupMocks({ authUser: makeRegularUser() });
       render(
-        <User isOpen={true} onClose={vi.fn()} user={makeRegularUser({ id: 99 })} />
+        <User
+          isOpen={true}
+          onClose={vi.fn()}
+          user={makeRegularUser({ id: 99 })}
+        />
       );
       expect(screen.queryByTestId('tab-permissions')).not.toBeInTheDocument();
     });
@@ -242,7 +283,11 @@ describe('User', () => {
     it('shows Output Format Override for admin', () => {
       setupMocks({ authUser: makeAdminUser() });
       render(
-        <User isOpen={true} onClose={vi.fn()} user={makeRegularUser({ id: 2 })} />
+        <User
+          isOpen={true}
+          onClose={vi.fn()}
+          user={makeRegularUser({ id: 2 })}
+        />
       );
       expect(screen.getByText('Output Format Override')).toBeInTheDocument();
     });
@@ -250,15 +295,25 @@ describe('User', () => {
     it('hides Output Format Override for non-admin', () => {
       setupMocks({ authUser: makeRegularUser() });
       render(
-        <User isOpen={true} onClose={vi.fn()} user={makeRegularUser({ id: 5 })} />
+        <User
+          isOpen={true}
+          onClose={vi.fn()}
+          user={makeRegularUser({ id: 5 })}
+        />
       );
-      expect(screen.queryByText('Output Format Override')).not.toBeInTheDocument();
+      expect(
+        screen.queryByText('Output Format Override')
+      ).not.toBeInTheDocument();
     });
 
     it('shows Output Profile Override for admin', () => {
       setupMocks({ authUser: makeAdminUser() });
       render(
-        <User isOpen={true} onClose={vi.fn()} user={makeRegularUser({ id: 2 })} />
+        <User
+          isOpen={true}
+          onClose={vi.fn()}
+          user={makeRegularUser({ id: 2 })}
+        />
       );
       expect(screen.getByText('Output Profile Override')).toBeInTheDocument();
     });
@@ -266,7 +321,11 @@ describe('User', () => {
     it('shows Allowed IPs for admin', () => {
       setupMocks({ authUser: makeAdminUser() });
       render(
-        <User isOpen={true} onClose={vi.fn()} user={makeRegularUser({ id: 2 })} />
+        <User
+          isOpen={true}
+          onClose={vi.fn()}
+          user={makeRegularUser({ id: 2 })}
+        />
       );
       expect(screen.getByText('Allowed IPs')).toBeInTheDocument();
     });
@@ -274,7 +333,11 @@ describe('User', () => {
     it('hides Allowed IPs for non-admin', () => {
       setupMocks({ authUser: makeRegularUser() });
       render(
-        <User isOpen={true} onClose={vi.fn()} user={makeRegularUser({ id: 5 })} />
+        <User
+          isOpen={true}
+          onClose={vi.fn()}
+          user={makeRegularUser({ id: 5 })}
+        />
       );
       expect(screen.queryByText('Allowed IPs')).not.toBeInTheDocument();
     });
@@ -286,7 +349,11 @@ describe('User', () => {
     it('shows "Generate API Key" when no key exists', () => {
       setupMocks({ authUser: makeAdminUser() });
       render(
-        <User isOpen={true} onClose={vi.fn()} user={makeRegularUser({ id: 2 })} />
+        <User
+          isOpen={true}
+          onClose={vi.fn()}
+          user={makeRegularUser({ id: 2 })}
+        />
       );
       expect(screen.getByText('Generate API Key')).toBeInTheDocument();
     });
@@ -305,10 +372,16 @@ describe('User', () => {
 
     it('calls generateApiKey and switches button to "Regenerate API Key"', async () => {
       setupMocks({ authUser: makeAdminUser() });
-      vi.mocked(UserUtils.generateApiKey).mockResolvedValue({ key: 'brand-new-key' });
+      vi.mocked(UserUtils.generateApiKey).mockResolvedValue({
+        key: 'brand-new-key',
+      });
 
       render(
-        <User isOpen={true} onClose={vi.fn()} user={makeRegularUser({ id: 2 })} />
+        <User
+          isOpen={true}
+          onClose={vi.fn()}
+          user={makeRegularUser({ id: 2 })}
+        />
       );
 
       expect(screen.getByText('Generate API Key')).toBeInTheDocument();
@@ -322,10 +395,16 @@ describe('User', () => {
 
     it('also sets the key when response contains raw_key instead of key', async () => {
       setupMocks({ authUser: makeAdminUser() });
-      vi.mocked(UserUtils.generateApiKey).mockResolvedValue({ raw_key: 'raw-value' });
+      vi.mocked(UserUtils.generateApiKey).mockResolvedValue({
+        raw_key: 'raw-value',
+      });
 
       render(
-        <User isOpen={true} onClose={vi.fn()} user={makeRegularUser({ id: 2 })} />
+        <User
+          isOpen={true}
+          onClose={vi.fn()}
+          user={makeRegularUser({ id: 2 })}
+        />
       );
 
       fireEvent.click(screen.getByText('Generate API Key'));
@@ -339,7 +418,11 @@ describe('User', () => {
       // non-admin editing someone else
       setupMocks({ authUser: makeRegularUser({ id: 5 }) });
       render(
-        <User isOpen={true} onClose={vi.fn()} user={makeRegularUser({ id: 2 })} />
+        <User
+          isOpen={true}
+          onClose={vi.fn()}
+          user={makeRegularUser({ id: 2 })}
+        />
       );
       // No button visible since canGenerateKey is false
       expect(screen.queryByText('Generate API Key')).not.toBeInTheDocument();
@@ -351,7 +434,11 @@ describe('User', () => {
       vi.mocked(UserUtils.generateApiKey).mockResolvedValue({});
 
       render(
-        <User isOpen={true} onClose={vi.fn()} user={makeRegularUser({ id: 2 })} />
+        <User
+          isOpen={true}
+          onClose={vi.fn()}
+          user={makeRegularUser({ id: 2 })}
+        />
       );
 
       fireEvent.click(screen.getByText('Generate API Key'));
@@ -367,7 +454,11 @@ describe('User', () => {
       vi.mocked(UserUtils.generateApiKey).mockResolvedValue({ key: 'show-me' });
 
       render(
-        <User isOpen={true} onClose={vi.fn()} user={makeRegularUser({ id: 2 })} />
+        <User
+          isOpen={true}
+          onClose={vi.fn()}
+          user={makeRegularUser({ id: 2 })}
+        />
       );
 
       fireEvent.click(screen.getByText('Generate API Key'));
@@ -397,7 +488,11 @@ describe('User', () => {
     it('hides "Revoke API Key" when no key exists', () => {
       setupMocks({ authUser: makeAdminUser() });
       render(
-        <User isOpen={true} onClose={vi.fn()} user={makeRegularUser({ id: 2 })} />
+        <User
+          isOpen={true}
+          onClose={vi.fn()}
+          user={makeRegularUser({ id: 2 })}
+        />
       );
       expect(screen.queryByText('Revoke API Key')).not.toBeInTheDocument();
     });
@@ -455,7 +550,7 @@ describe('User', () => {
       });
     });
 
-    it('does not update auth store when revoking another user\'s key', async () => {
+    it("does not update auth store when revoking another user's key", async () => {
       const admin = makeAdminUser({ id: 1 });
       const { mockSetUser } = setupMocks({ authUser: admin });
 
@@ -518,7 +613,11 @@ describe('User', () => {
       vi.mocked(UserUtils.updateUser).mockResolvedValue({ id: 2 });
 
       render(
-        <User isOpen={true} onClose={vi.fn()} user={makeRegularUser({ id: 2 })} />
+        <User
+          isOpen={true}
+          onClose={vi.fn()}
+          user={makeRegularUser({ id: 2 })}
+        />
       );
       fireEvent.click(screen.getByText('Save'));
 
@@ -569,7 +668,11 @@ describe('User', () => {
       vi.mocked(UserUtils.updateUser).mockResolvedValue({ id: 2 });
 
       render(
-        <User isOpen={true} onClose={vi.fn()} user={makeRegularUser({ id: 2 })} />
+        <User
+          isOpen={true}
+          onClose={vi.fn()}
+          user={makeRegularUser({ id: 2 })}
+        />
       );
       fireEvent.click(screen.getByText('Save'));
 
@@ -585,7 +688,9 @@ describe('User', () => {
   describe('useEffect on user prop', () => {
     it('calls userToFormValues and sets form values when user has an id', () => {
       const user = makeRegularUser({ id: 2 });
-      vi.mocked(UserUtils.userToFormValues).mockReturnValue({ username: 'user1' });
+      vi.mocked(UserUtils.userToFormValues).mockReturnValue({
+        username: 'user1',
+      });
       setupMocks({ authUser: makeAdminUser() });
 
       render(<User isOpen={true} onClose={vi.fn()} user={user} />);
@@ -607,7 +712,11 @@ describe('User', () => {
     it('calls setValues with a generated xc_password when rotate icon is clicked', () => {
       setupMocks({ authUser: makeAdminUser() });
       render(
-        <User isOpen={true} onClose={vi.fn()} user={makeRegularUser({ id: 2 })} />
+        <User
+          isOpen={true}
+          onClose={vi.fn()}
+          user={makeRegularUser({ id: 2 })}
+        />
       );
 
       const rotateButton = screen
@@ -623,7 +732,11 @@ describe('User', () => {
     it('disables the XC password rotate button for non-admin', () => {
       setupMocks({ authUser: makeRegularUser() });
       render(
-        <User isOpen={true} onClose={vi.fn()} user={makeRegularUser({ id: 5 })} />
+        <User
+          isOpen={true}
+          onClose={vi.fn()}
+          user={makeRegularUser({ id: 5 })}
+        />
       );
 
       const rotateButton = screen
@@ -641,7 +754,11 @@ describe('User', () => {
     it('excludes "All" (0) when other profiles are selected alongside it', () => {
       setupMocks({ authUser: makeAdminUser(), profiles });
       render(
-        <User isOpen={true} onClose={vi.fn()} user={makeRegularUser({ id: 2 })} />
+        <User
+          isOpen={true}
+          onClose={vi.fn()}
+          user={makeRegularUser({ id: 2 })}
+        />
       );
 
       const multiSelect = screen.getByTestId('multiselect-Channel Profiles');
@@ -656,31 +773,38 @@ describe('User', () => {
     it('sets only ["0"] when "All" is newly selected', () => {
       setupMocks({ authUser: makeAdminUser(), profiles });
       render(
-        <User isOpen={true} onClose={vi.fn()} user={makeRegularUser({ id: 2 })} />
+        <User
+          isOpen={true}
+          onClose={vi.fn()}
+          user={makeRegularUser({ id: 2 })}
+        />
       );
 
       const multiSelect = screen.getByTestId('multiselect-Channel Profiles');
       fireEvent.change(multiSelect, { target: { value: '0' } });
 
-      expect(mockForm.setFieldValue).toHaveBeenCalledWith(
-        'channel_profiles',
-        ['0']
-      );
+      expect(mockForm.setFieldValue).toHaveBeenCalledWith('channel_profiles', [
+        '0',
+      ]);
     });
 
     it('allows multiple non-all profiles together', () => {
       setupMocks({ authUser: makeAdminUser(), profiles });
       render(
-        <User isOpen={true} onClose={vi.fn()} user={makeRegularUser({ id: 2 })} />
+        <User
+          isOpen={true}
+          onClose={vi.fn()}
+          user={makeRegularUser({ id: 2 })}
+        />
       );
 
       const multiSelect = screen.getByTestId('multiselect-Channel Profiles');
       fireEvent.change(multiSelect, { target: { value: '1,2' } });
 
-      expect(mockForm.setFieldValue).toHaveBeenCalledWith(
-        'channel_profiles',
-        ['1', '2']
-      );
+      expect(mockForm.setFieldValue).toHaveBeenCalledWith('channel_profiles', [
+        '1',
+        '2',
+      ]);
     });
   });
-});
\ No newline at end of file
+});
diff --git a/frontend/src/components/forms/__tests__/UserAgent.test.jsx b/frontend/src/components/forms/__tests__/UserAgent.test.jsx
index 2292b8cd..a7c50390 100644
--- a/frontend/src/components/forms/__tests__/UserAgent.test.jsx
+++ b/frontend/src/components/forms/__tests__/UserAgent.test.jsx
@@ -31,7 +31,9 @@ vi.mock('@mantine/core', () => ({
     opened ? (
       <div data-testid="modal">
         <div data-testid="modal-title">{title}</div>
-        <button data-testid="modal-close" onClick={onClose}>×</button>
+        <button data-testid="modal-close" onClick={onClose}>
+          ×
+        </button>
         {children}
       </div>
     ) : null,
@@ -105,23 +107,37 @@ describe('UserAgent', () => {
 
     it('pre-fills fields from userAgent prop', () => {
       render(
-        <UserAgent isOpen={true} onClose={vi.fn()} userAgent={makeUserAgent()} />
+        <UserAgent
+          isOpen={true}
+          onClose={vi.fn()}
+          userAgent={makeUserAgent()}
+        />
       );
       expect(screen.getByTestId('input-Name')).toHaveValue('Chrome');
       expect(screen.getByTestId('input-User-Agent')).toHaveValue('Mozilla/5.0');
-      expect(screen.getByTestId('input-Description')).toHaveValue('Chrome browser');
+      expect(screen.getByTestId('input-Description')).toHaveValue(
+        'Chrome browser'
+      );
     });
 
     it('checks Is Active checkbox when userAgent.is_active is true', () => {
       render(
-        <UserAgent isOpen={true} onClose={vi.fn()} userAgent={makeUserAgent({ is_active: true })} />
+        <UserAgent
+          isOpen={true}
+          onClose={vi.fn()}
+          userAgent={makeUserAgent({ is_active: true })}
+        />
       );
       expect(screen.getByTestId('checkbox-is-active')).toBeChecked();
     });
 
     it('unchecks Is Active checkbox when userAgent.is_active is false', () => {
       render(
-        <UserAgent isOpen={true} onClose={vi.fn()} userAgent={makeUserAgent({ is_active: false })} />
+        <UserAgent
+          isOpen={true}
+          onClose={vi.fn()}
+          userAgent={makeUserAgent({ is_active: false })}
+        />
       );
       expect(screen.getByTestId('checkbox-is-active')).not.toBeChecked();
     });
@@ -137,7 +153,11 @@ describe('UserAgent', () => {
   describe('field interactions', () => {
     it('toggles Is Active checkbox', () => {
       render(
-        <UserAgent isOpen={true} onClose={vi.fn()} userAgent={makeUserAgent({ is_active: true })} />
+        <UserAgent
+          isOpen={true}
+          onClose={vi.fn()}
+          userAgent={makeUserAgent({ is_active: true })}
+        />
       );
       const checkbox = screen.getByTestId('checkbox-is-active');
       fireEvent.click(checkbox);
@@ -158,7 +178,11 @@ describe('UserAgent', () => {
 
     it('calls updateUserAgent with the id when editing an existing userAgent', async () => {
       render(
-        <UserAgent isOpen={true} onClose={vi.fn()} userAgent={makeUserAgent()} />
+        <UserAgent
+          isOpen={true}
+          onClose={vi.fn()}
+          userAgent={makeUserAgent()}
+        />
       );
       fireEvent.click(screen.getByText('Submit'));
       await waitFor(() => {
@@ -171,7 +195,11 @@ describe('UserAgent', () => {
 
     it('does not call addUserAgent when updating', async () => {
       render(
-        <UserAgent isOpen={true} onClose={vi.fn()} userAgent={makeUserAgent()} />
+        <UserAgent
+          isOpen={true}
+          onClose={vi.fn()}
+          userAgent={makeUserAgent()}
+        />
       );
       fireEvent.click(screen.getByText('Submit'));
       await waitFor(() => {
@@ -214,7 +242,11 @@ describe('UserAgent', () => {
   describe('form reset on userAgent change', () => {
     it('resets form values when userAgent prop changes', () => {
       const { rerender } = render(
-        <UserAgent isOpen={true} onClose={vi.fn()} userAgent={makeUserAgent()} />
+        <UserAgent
+          isOpen={true}
+          onClose={vi.fn()}
+          userAgent={makeUserAgent()}
+        />
       );
       expect(screen.getByTestId('input-Name')).toHaveValue('Chrome');
 
@@ -222,7 +254,11 @@ describe('UserAgent', () => {
         <UserAgent
           isOpen={true}
           onClose={vi.fn()}
-          userAgent={makeUserAgent({ id: 2, name: 'Firefox', user_agent: 'Gecko/20100101' })}
+          userAgent={makeUserAgent({
+            id: 2,
+            name: 'Firefox',
+            user_agent: 'Gecko/20100101',
+          })}
         />
       );
       expect(screen.getByTestId('input-Name')).toHaveValue('Firefox');
@@ -230,10 +266,14 @@ describe('UserAgent', () => {
 
     it('resets to empty when userAgent prop is removed', () => {
       const { rerender } = render(
-        <UserAgent isOpen={true} onClose={vi.fn()} userAgent={makeUserAgent()} />
+        <UserAgent
+          isOpen={true}
+          onClose={vi.fn()}
+          userAgent={makeUserAgent()}
+        />
       );
       rerender(<UserAgent isOpen={true} onClose={vi.fn()} userAgent={null} />);
       expect(screen.getByTestId('input-Name')).toHaveValue('');
     });
   });
-});
\ No newline at end of file
+});
diff --git a/frontend/src/components/forms/__tests__/VODCategoryFilter.test.jsx b/frontend/src/components/forms/__tests__/VODCategoryFilter.test.jsx
index de87d5c0..31cd5e2b 100644
--- a/frontend/src/components/forms/__tests__/VODCategoryFilter.test.jsx
+++ b/frontend/src/components/forms/__tests__/VODCategoryFilter.test.jsx
@@ -7,14 +7,19 @@ vi.mock('../../../store/useVODStore', () => ({ default: vi.fn() }));
 // ── lucide-react ───────────────────────────────────────────────────────────────
 vi.mock('lucide-react', () => ({
   CircleCheck: () => <svg data-testid="icon-circle-check" />,
-  CircleX:     () => <svg data-testid="icon-circle-x" />,
+  CircleX: () => <svg data-testid="icon-circle-x" />,
 }));
 
 // ── Mantine core ───────────────────────────────────────────────────────────────
 vi.mock('@mantine/core', () => ({
-  Box:      ({ children }) => <div>{children}</div>,
-  Button:   ({ children, onClick, disabled, color, variant }) => (
-    <button onClick={onClick} disabled={disabled} data-color={color} data-variant={variant}>
+  Box: ({ children }) => <div>{children}</div>,
+  Button: ({ children, onClick, disabled, color, variant }) => (
+    <button
+      onClick={onClick}
+      disabled={disabled}
+      data-color={color}
+      data-variant={variant}
+    >
       {children}
     </button>
   ),
@@ -24,17 +29,19 @@ vi.mock('@mantine/core', () => ({
         type="checkbox"
         aria-label={label}
         checked={checked}
-        onChange={(e) => onChange?.({ currentTarget: { checked: e.target.checked } })}
+        onChange={(e) =>
+          onChange?.({ currentTarget: { checked: e.target.checked } })
+        }
         disabled={disabled}
       />
       {label}
     </label>
   ),
-  Flex:     ({ children }) => <div>{children}</div>,
-  Group:    ({ children }) => <div>{children}</div>,
+  Flex: ({ children }) => <div>{children}</div>,
+  Group: ({ children }) => <div>{children}</div>,
   SimpleGrid: ({ children }) => <div data-testid="simple-grid">{children}</div>,
-  Stack:    ({ children }) => <div>{children}</div>,
-  Text:     ({ children }) => <span>{children}</span>,
+  Stack: ({ children }) => <div>{children}</div>,
+  Text: ({ children }) => <span>{children}</span>,
   TextInput: ({ label, value, onChange, placeholder }) => (
     <input
       aria-label={label ?? placeholder}
@@ -71,18 +78,39 @@ const makeCategories = () => [
     m3u_accounts: [{ m3u_account: 10, enabled: true }],
     category_type: 'movies',
   },
-  { id: 2, name: 'Comedy', m3u_accounts: [{ m3u_account: 10, enabled: false }], category_type: 'movies' },
-  { id: 3, name: 'Drama', m3u_accounts: [{ m3u_account: 10, enabled: true }], category_type: 'movies' },
-  { id: 4, name: 'News', m3u_accounts: [{ m3u_account: 10, enabled: true }], category_type: 'series' },
+  {
+    id: 2,
+    name: 'Comedy',
+    m3u_accounts: [{ m3u_account: 10, enabled: false }],
+    category_type: 'movies',
+  },
+  {
+    id: 3,
+    name: 'Drama',
+    m3u_accounts: [{ m3u_account: 10, enabled: true }],
+    category_type: 'movies',
+  },
+  {
+    id: 4,
+    name: 'News',
+    m3u_accounts: [{ m3u_account: 10, enabled: true }],
+    category_type: 'series',
+  },
 ];
 
-const makePlaylist = (overrides = {}) => ({ id: 10, name: 'My Playlist', ...overrides });
+const makePlaylist = (overrides = {}) => ({
+  id: 10,
+  name: 'My Playlist',
+  ...overrides,
+});
 
 const categoriesToDict = (arr) =>
   arr.reduce((acc, cat) => ({ ...acc, [cat.id]: cat }), {});
 
 const setupMocks = ({ categories = makeCategories() } = {}) => {
-  const dict = Array.isArray(categories) ? categoriesToDict(categories) : categories;
+  const dict = Array.isArray(categories)
+    ? categoriesToDict(categories)
+    : categories;
   vi.mocked(useVODStore).mockImplementation((sel) => sel({ categories: dict }));
 };
 
@@ -120,13 +148,19 @@ describe('VODCategoryFilter', () => {
 
     it('renders a button for each category matching the type and playlist', () => {
       render(<VODCategoryFilter {...defaultProps()} />);
-      expect(screen.getByRole('button', { name: 'Action' })).toBeInTheDocument();
-      expect(screen.getByRole('button', { name: 'Comedy' })).toBeInTheDocument();
+      expect(
+        screen.getByRole('button', { name: 'Action' })
+      ).toBeInTheDocument();
+      expect(
+        screen.getByRole('button', { name: 'Comedy' })
+      ).toBeInTheDocument();
     });
 
     it('does not render categories of a different type', () => {
       render(<VODCategoryFilter {...defaultProps()} />);
-      expect(screen.queryByRole('checkbox', { name: 'News' })).not.toBeInTheDocument();
+      expect(
+        screen.queryByRole('checkbox', { name: 'News' })
+      ).not.toBeInTheDocument();
     });
 
     it('renders the text filter input', () => {
@@ -147,7 +181,9 @@ describe('VODCategoryFilter', () => {
 
     it('renders the Auto-enable new groups checkbox', () => {
       render(<VODCategoryFilter {...defaultProps()} />);
-      expect(screen.getByLabelText(/automatically enable new/i)).toBeInTheDocument();
+      expect(
+        screen.getByLabelText(/automatically enable new/i)
+      ).toBeInTheDocument();
     });
   });
 
@@ -158,15 +194,25 @@ describe('VODCategoryFilter', () => {
       render(<VODCategoryFilter {...defaultProps()} />);
       const input = screen.getByPlaceholderText(/filter/i);
       fireEvent.change(input, { target: { value: 'act' } });
-      expect(screen.getByRole('button', { name: 'Action' })).toBeInTheDocument();
-      expect(screen.queryByRole('button', { name: 'Comedy' })).not.toBeInTheDocument();
+      expect(
+        screen.getByRole('button', { name: 'Action' })
+      ).toBeInTheDocument();
+      expect(
+        screen.queryByRole('button', { name: 'Comedy' })
+      ).not.toBeInTheDocument();
     });
 
     it('is case-insensitive', () => {
       render(<VODCategoryFilter {...defaultProps()} />);
-      fireEvent.change(screen.getByPlaceholderText(/filter/i), { target: { value: 'COMEDY' } });
-      expect(screen.getByRole('button', { name: 'Comedy' })).toBeInTheDocument();
-      expect(screen.queryByRole('button', { name: 'Action' })).not.toBeInTheDocument();
+      fireEvent.change(screen.getByPlaceholderText(/filter/i), {
+        target: { value: 'COMEDY' },
+      });
+      expect(
+        screen.getByRole('button', { name: 'Comedy' })
+      ).toBeInTheDocument();
+      expect(
+        screen.queryByRole('button', { name: 'Action' })
+      ).not.toBeInTheDocument();
     });
 
     it('shows all categories when filter is cleared', () => {
@@ -174,8 +220,12 @@ describe('VODCategoryFilter', () => {
       const input = screen.getByPlaceholderText(/filter/i);
       fireEvent.change(input, { target: { value: 'act' } });
       fireEvent.change(input, { target: { value: '' } });
-      expect(screen.getByRole('button', { name: 'Action' })).toBeInTheDocument();
-      expect(screen.getByRole('button', { name: 'Comedy' })).toBeInTheDocument();
+      expect(
+        screen.getByRole('button', { name: 'Action' })
+      ).toBeInTheDocument();
+      expect(
+        screen.getByRole('button', { name: 'Comedy' })
+      ).toBeInTheDocument();
       expect(screen.getByRole('button', { name: 'Drama' })).toBeInTheDocument();
     });
 
@@ -184,7 +234,9 @@ describe('VODCategoryFilter', () => {
       fireEvent.change(screen.getByPlaceholderText(/filter/i), {
         target: { value: 'zzznomatch' },
       });
-      expect(screen.queryByRole('button', { name: 'Action' })).not.toBeInTheDocument();
+      expect(
+        screen.queryByRole('button', { name: 'Action' })
+      ).not.toBeInTheDocument();
     });
   });
 
@@ -193,34 +245,58 @@ describe('VODCategoryFilter', () => {
   describe('status filter', () => {
     it('shows only enabled categories when "Enabled" segment is selected', () => {
       const props = defaultProps({
-        categoryStates: [ { id: 1, name: 'Action', enabled: true }, { id: 2, name: 'Comedy', enabled: false }, { id: 3, name: 'Drama', enabled: true } ],
+        categoryStates: [
+          { id: 1, name: 'Action', enabled: true },
+          { id: 2, name: 'Comedy', enabled: false },
+          { id: 3, name: 'Drama', enabled: true },
+        ],
       });
       render(<VODCategoryFilter {...props} />);
       fireEvent.click(screen.getByTestId('segment-enabled'));
-      expect(screen.getByRole('button', { name: 'Action' })).toBeInTheDocument();
-      expect(screen.queryByRole('button', { name: 'Comedy' })).not.toBeInTheDocument();
+      expect(
+        screen.getByRole('button', { name: 'Action' })
+      ).toBeInTheDocument();
+      expect(
+        screen.queryByRole('button', { name: 'Comedy' })
+      ).not.toBeInTheDocument();
       expect(screen.getByRole('button', { name: 'Drama' })).toBeInTheDocument();
     });
 
     it('shows only disabled categories when "Disabled" segment is selected', () => {
       const props = defaultProps({
-        categoryStates: [ { id: 1, name: 'Action', enabled: true }, { id: 2, name: 'Comedy', enabled: false }, { id: 3, name: 'Drama', enabled: true } ],
+        categoryStates: [
+          { id: 1, name: 'Action', enabled: true },
+          { id: 2, name: 'Comedy', enabled: false },
+          { id: 3, name: 'Drama', enabled: true },
+        ],
       });
       render(<VODCategoryFilter {...props} />);
       fireEvent.click(screen.getByTestId('segment-disabled'));
-      expect(screen.queryByRole('button', { name: 'Action' })).not.toBeInTheDocument();
-      expect(screen.getByRole('button', { name: 'Comedy' })).toBeInTheDocument();
+      expect(
+        screen.queryByRole('button', { name: 'Action' })
+      ).not.toBeInTheDocument();
+      expect(
+        screen.getByRole('button', { name: 'Comedy' })
+      ).toBeInTheDocument();
     });
 
     it('shows all categories when "All" segment is active', () => {
       const props = defaultProps({
-        categoryStates: [ { id: 1, name: 'Action', enabled: true }, { id: 2, name: 'Comedy', enabled: false }, { id: 3, name: 'Drama', enabled: true } ],
+        categoryStates: [
+          { id: 1, name: 'Action', enabled: true },
+          { id: 2, name: 'Comedy', enabled: false },
+          { id: 3, name: 'Drama', enabled: true },
+        ],
       });
       render(<VODCategoryFilter {...props} />);
       fireEvent.click(screen.getByTestId('segment-disabled'));
       fireEvent.click(screen.getByTestId('segment-all'));
-      expect(screen.getByRole('button', { name: 'Action' })).toBeInTheDocument();
-      expect(screen.getByRole('button', { name: 'Comedy' })).toBeInTheDocument();
+      expect(
+        screen.getByRole('button', { name: 'Action' })
+      ).toBeInTheDocument();
+      expect(
+        screen.getByRole('button', { name: 'Comedy' })
+      ).toBeInTheDocument();
     });
   });
 
@@ -230,11 +306,17 @@ describe('VODCategoryFilter', () => {
     it('applies both text and status filters simultaneously', () => {
       const props = defaultProps();
       render(<VODCategoryFilter {...props} />);
-      fireEvent.change(screen.getByPlaceholderText(/filter/i), { target: { value: 'o' } });
+      fireEvent.change(screen.getByPlaceholderText(/filter/i), {
+        target: { value: 'o' },
+      });
       fireEvent.click(screen.getByTestId('segment-disabled'));
       // "Comedy" matches "o" AND is disabled; "Action" matches "o" but is enabled
-      expect(screen.getByRole('button', { name: 'Comedy' })).toBeInTheDocument();
-      expect(screen.queryByRole('button', { name: 'Action' })).not.toBeInTheDocument();
+      expect(
+        screen.getByRole('button', { name: 'Comedy' })
+      ).toBeInTheDocument();
+      expect(
+        screen.queryByRole('button', { name: 'Action' })
+      ).not.toBeInTheDocument();
     });
   });
 
@@ -247,7 +329,11 @@ describe('VODCategoryFilter', () => {
         <VODCategoryFilter
           {...defaultProps({
             setCategoryStates,
-            categoryStates: [ { id: 1, name: 'Action', enabled: false }, { id: 2, name: 'Comedy', enabled: false }, { id: 3, name: 'Drama', enabled: false } ],
+            categoryStates: [
+              { id: 1, name: 'Action', enabled: false },
+              { id: 2, name: 'Comedy', enabled: false },
+              { id: 3, name: 'Drama', enabled: false },
+            ],
           })}
         />
       );
@@ -264,11 +350,17 @@ describe('VODCategoryFilter', () => {
         <VODCategoryFilter
           {...defaultProps({
             setCategoryStates,
-            categoryStates: [ { id: 1, name: 'Action', enabled: false }, { id: 2, name: 'Comedy', enabled: false }, { id: 3, name: 'Drama', enabled: false } ],
+            categoryStates: [
+              { id: 1, name: 'Action', enabled: false },
+              { id: 2, name: 'Comedy', enabled: false },
+              { id: 3, name: 'Drama', enabled: false },
+            ],
           })}
         />
       );
-      fireEvent.change(screen.getByPlaceholderText(/filter/i), { target: { value: 'act' } });
+      fireEvent.change(screen.getByPlaceholderText(/filter/i), {
+        target: { value: 'act' },
+      });
       fireEvent.click(screen.getByText('Select Visible'));
       const called = setCategoryStates.mock.calls.at(-1)[0];
       expect(called.find((s) => s.id === 1).enabled).toBe(true);
@@ -295,11 +387,17 @@ describe('VODCategoryFilter', () => {
         <VODCategoryFilter
           {...defaultProps({
             setCategoryStates,
-            categoryStates: [ { id: 1, name: 'Action', enabled: true }, { id: 2, name: 'Comedy', enabled: true }, { id: 3, name: 'Drama', enabled: true } ],
+            categoryStates: [
+              { id: 1, name: 'Action', enabled: true },
+              { id: 2, name: 'Comedy', enabled: true },
+              { id: 3, name: 'Drama', enabled: true },
+            ],
           })}
         />
       );
-      fireEvent.change(screen.getByPlaceholderText(/filter/i), { target: { value: 'comedy' } });
+      fireEvent.change(screen.getByPlaceholderText(/filter/i), {
+        target: { value: 'comedy' },
+      });
       fireEvent.click(screen.getByText('Deselect Visible'));
       const called = setCategoryStates.mock.calls.at(-1)[0];
       expect(called.find((s) => s.id === 2).enabled).toBe(false);
@@ -315,7 +413,10 @@ describe('VODCategoryFilter', () => {
       const setAutoEnableNewGroups = vi.fn();
       render(
         <VODCategoryFilter
-          {...defaultProps({ autoEnableNewGroups: false, setAutoEnableNewGroups })}
+          {...defaultProps({
+            autoEnableNewGroups: false,
+            setAutoEnableNewGroups,
+          })}
         />
       );
       fireEvent.click(screen.getByLabelText(/automatically enable new/i));
@@ -326,7 +427,10 @@ describe('VODCategoryFilter', () => {
       const setAutoEnableNewGroups = vi.fn();
       render(
         <VODCategoryFilter
-          {...defaultProps({ autoEnableNewGroups: true, setAutoEnableNewGroups })}
+          {...defaultProps({
+            autoEnableNewGroups: true,
+            setAutoEnableNewGroups,
+          })}
         />
       );
       fireEvent.click(screen.getByLabelText(/automatically enable new/i));
@@ -340,23 +444,34 @@ describe('VODCategoryFilter', () => {
     it('renders no category buttons when categories list is empty', () => {
       setupMocks({ categories: [] });
       render(<VODCategoryFilter {...defaultProps({ categoryStates: [] })} />);
-      expect(screen.queryByRole('button', { name: 'Action' })).not.toBeInTheDocument();
+      expect(
+        screen.queryByRole('button', { name: 'Action' })
+      ).not.toBeInTheDocument();
     });
 
     it('renders no category buttons when categoryStates is empty', () => {
       render(<VODCategoryFilter {...defaultProps({ categoryStates: [] })} />);
-      expect(screen.queryByRole('button', { name: 'Action' })).not.toBeInTheDocument();
+      expect(
+        screen.queryByRole('button', { name: 'Action' })
+      ).not.toBeInTheDocument();
     });
 
     it('renders categories only for the matching playlist id', () => {
       setupMocks({
         categories: [
           ...makeCategories(),
-          { id: 99, name: 'Foreign', m3u_accounts: [{ m3u_account: 99, enabled: true }], category_type: 'movies' },
+          {
+            id: 99,
+            name: 'Foreign',
+            m3u_accounts: [{ m3u_account: 99, enabled: true }],
+            category_type: 'movies',
+          },
         ],
       });
       render(<VODCategoryFilter {...defaultProps()} />);
-      expect(screen.queryByRole('button', { name: 'Foreign' })).not.toBeInTheDocument();
+      expect(
+        screen.queryByRole('button', { name: 'Foreign' })
+      ).not.toBeInTheDocument();
     });
   });
-});
\ No newline at end of file
+});
diff --git a/frontend/src/utils/forms/SeriesRuleEditorModalUtils.js b/frontend/src/utils/forms/SeriesRuleEditorModalUtils.js
index dbcd545e..0eddc9c1 100644
--- a/frontend/src/utils/forms/SeriesRuleEditorModalUtils.js
+++ b/frontend/src/utils/forms/SeriesRuleEditorModalUtils.js
@@ -25,7 +25,7 @@ export function formatRange(start, end) {
     const s = new Date(start);
     const e = new Date(end);
 
-    if(isNaN(s) || isNaN(e)) throw new Error('Invalid date');
+    if (isNaN(s) || isNaN(e)) throw new Error('Invalid date');
 
     const sameDay = s.toDateString() === e.toDateString();
     const dateStr = s.toLocaleDateString();
@@ -81,4 +81,4 @@ export const getChannelOptions = (allChannels, tvgsById, tvgId) => {
     }
   }
   return [...matching, ...others];
-};
\ No newline at end of file
+};
diff --git a/frontend/src/utils/forms/UserUtils.js b/frontend/src/utils/forms/UserUtils.js
index 256d84bb..3627d6ca 100644
--- a/frontend/src/utils/forms/UserUtils.js
+++ b/frontend/src/utils/forms/UserUtils.js
@@ -1,6 +1,6 @@
-import {NETWORK_ACCESS_OPTIONS, USER_LEVELS} from "../../constants.js";
+import { NETWORK_ACCESS_OPTIONS, USER_LEVELS } from '../../constants.js';
 import { IPV4_CIDR_REGEX, IPV6_CIDR_REGEX } from '../networkUtils.js';
-import API from "../../api.js";
+import API from '../../api.js';
 
 const isValidNetworkEntry = (entry) =>
   entry.match(IPV4_CIDR_REGEX) ||
@@ -123,14 +123,14 @@ export const getFormInitialValues = () => {
     epg_prev_days: 0,
     allowed_ips: [],
   };
-}
+};
 
 export const getFormValidators = (user) => {
   return (values) => ({
     username: !values.username
       ? 'Username is required'
       : values.user_level == USER_LEVELS.STREAMER &&
-      !values.username.match(/^[a-z0-9]+$/i)
+          !values.username.match(/^[a-z0-9]+$/i)
         ? 'Streamer username must be alphanumeric'
         : null,
     password:
@@ -141,10 +141,8 @@ export const getFormValidators = (user) => {
       values.xc_password && !values.xc_password.match(/^[a-z0-9]+$/i)
         ? 'XC password must be alphanumeric'
         : null,
-    allowed_ips: (values.allowed_ips || []).some(
-      (t) => !isValidNetworkEntry(t)
-    )
+    allowed_ips: (values.allowed_ips || []).some((t) => !isValidNetworkEntry(t))
       ? 'Invalid IP address or CIDR range'
       : null,
   });
-}
\ No newline at end of file
+};
diff --git a/frontend/src/utils/forms/__tests__/RecordingDetailsModalUtils.test.js b/frontend/src/utils/forms/__tests__/RecordingDetailsModalUtils.test.js
index 303b891b..7ad80f63 100644
--- a/frontend/src/utils/forms/__tests__/RecordingDetailsModalUtils.test.js
+++ b/frontend/src/utils/forms/__tests__/RecordingDetailsModalUtils.test.js
@@ -11,7 +11,6 @@ vi.mock('../../../api.js', () => ({
   },
 }));
 
-
 describe('RecordingDetailsModalUtils', () => {
   beforeEach(() => {
     vi.clearAllMocks();
@@ -653,7 +652,9 @@ describe('RecordingDetailsModalUtils', () => {
     it('should propagate API errors', async () => {
       API.getChannel.mockRejectedValue(new Error('Not found'));
 
-      await expect(RecordingDetailsModalUtils.getChannel(99)).rejects.toThrow('Not found');
+      await expect(RecordingDetailsModalUtils.getChannel(99)).rejects.toThrow(
+        'Not found'
+      );
     });
   });
 
@@ -680,7 +681,11 @@ describe('RecordingDetailsModalUtils', () => {
       API.updateRecordingMetadata.mockResolvedValue({});
 
       const recording = { id: 5 };
-      await RecordingDetailsModalUtils.updateRecordingMetadata(recording, '', 'Some description');
+      await RecordingDetailsModalUtils.updateRecordingMetadata(
+        recording,
+        '',
+        'Some description'
+      );
 
       expect(API.updateRecordingMetadata).toHaveBeenCalledWith(5, {
         title: 'Custom Recording',
@@ -692,7 +697,11 @@ describe('RecordingDetailsModalUtils', () => {
       API.updateRecordingMetadata.mockResolvedValue({});
 
       const recording = { id: 5 };
-      await RecordingDetailsModalUtils.updateRecordingMetadata(recording, null, 'desc');
+      await RecordingDetailsModalUtils.updateRecordingMetadata(
+        recording,
+        null,
+        'desc'
+      );
 
       expect(API.updateRecordingMetadata).toHaveBeenCalledWith(5, {
         title: 'Custom Recording',
@@ -704,7 +713,11 @@ describe('RecordingDetailsModalUtils', () => {
       API.updateRecordingMetadata.mockRejectedValue(new Error('Server error'));
 
       await expect(
-        RecordingDetailsModalUtils.updateRecordingMetadata({ id: 1 }, 'Title', 'Desc')
+        RecordingDetailsModalUtils.updateRecordingMetadata(
+          { id: 1 },
+          'Title',
+          'Desc'
+        )
       ).rejects.toThrow('Server error');
     });
   });
@@ -723,9 +736,9 @@ describe('RecordingDetailsModalUtils', () => {
     it('should propagate API errors', async () => {
       API.refreshArtwork.mockRejectedValue(new Error('Artwork fetch failed'));
 
-      await expect(RecordingDetailsModalUtils.refreshArtwork(7)).rejects.toThrow(
-        'Artwork fetch failed'
-      );
+      await expect(
+        RecordingDetailsModalUtils.refreshArtwork(7)
+      ).rejects.toThrow('Artwork fetch failed');
     });
   });
 });
diff --git a/frontend/src/utils/forms/__tests__/RecordingUtils.test.js b/frontend/src/utils/forms/__tests__/RecordingUtils.test.js
index be7cf1a2..6e3ae901 100644
--- a/frontend/src/utils/forms/__tests__/RecordingUtils.test.js
+++ b/frontend/src/utils/forms/__tests__/RecordingUtils.test.js
@@ -85,7 +85,7 @@ describe('RecordingUtils', () => {
     });
   });
 
-// ─── toIsoIfDate ──────────────────────────────────────────────────────────────
+  // ─── toIsoIfDate ──────────────────────────────────────────────────────────────
 
   describe('toIsoIfDate', () => {
     it('returns ISO string for a valid Date', () => {
@@ -107,7 +107,7 @@ describe('RecordingUtils', () => {
     });
   });
 
-// ─── toDateString ─────────────────────────────────────────────────────────────
+  // ─── toDateString ─────────────────────────────────────────────────────────────
 
   describe('toDateString', () => {
     it('formats a Date to YYYY-MM-DD', () => {
@@ -129,7 +129,7 @@ describe('RecordingUtils', () => {
     });
   });
 
-// ─── createRoundedDate ────────────────────────────────────────────────────────
+  // ─── createRoundedDate ────────────────────────────────────────────────────────
 
   describe('createRoundedDate', () => {
     it('returns a Date', () => {
@@ -141,7 +141,7 @@ describe('RecordingUtils', () => {
     });
   });
 
-// ─── timeChange ───────────────────────────────────────────────────────────────
+  // ─── timeChange ───────────────────────────────────────────────────────────────
 
   describe('timeChange', () => {
     it('calls setter with string directly', () => {
@@ -163,7 +163,7 @@ describe('RecordingUtils', () => {
     });
   });
 
-// ─── API wrappers ─────────────────────────────────────────────────────────────
+  // ─── API wrappers ─────────────────────────────────────────────────────────────
 
   describe('getChannelsSummary', () => {
     it('calls API.getChannelsSummary', () => {
@@ -197,13 +197,13 @@ describe('RecordingUtils', () => {
     });
   });
 
-// ─── sortedChannelOptions ─────────────────────────────────────────────────────
+  // ─── sortedChannelOptions ─────────────────────────────────────────────────────
 
   describe('sortedChannelOptions', () => {
     const channels = [
-      { id: 3, name: 'CNN',  channel_number: 20 },
-      { id: 1, name: 'ESPN', channel_number: 5  },
-      { id: 2, name: 'HBO',  channel_number: 10 },
+      { id: 3, name: 'CNN', channel_number: 20 },
+      { id: 1, name: 'ESPN', channel_number: 5 },
+      { id: 2, name: 'HBO', channel_number: 10 },
     ];
 
     it('sorts channels by channel_number ascending', () => {
@@ -213,7 +213,9 @@ describe('RecordingUtils', () => {
     });
 
     it('maps each channel to { value, label }', () => {
-      const result = sortedChannelOptions([{ id: 7, name: 'FOX', channel_number: 3 }]);
+      const result = sortedChannelOptions([
+        { id: 7, name: 'FOX', channel_number: 3 },
+      ]);
       expect(result[0]).toEqual({ value: '7', label: 'FOX' });
     });
 
@@ -269,22 +271,25 @@ describe('RecordingUtils', () => {
     });
   });
 
-// ─── numberedChannelLabel ─────────────────────────────────────────────────────
+  // ─── numberedChannelLabel ─────────────────────────────────────────────────────
 
   describe('numberedChannelLabel', () => {
     it('returns "number - name" when both are present', () => {
-      expect(numberedChannelLabel({ id: 1, name: 'HBO', channel_number: 501 }))
-        .toBe('501 - HBO');
+      expect(
+        numberedChannelLabel({ id: 1, name: 'HBO', channel_number: 501 })
+      ).toBe('501 - HBO');
     });
 
     it('returns name only when channel_number is falsy', () => {
-      expect(numberedChannelLabel({ id: 1, name: 'HBO', channel_number: null }))
-        .toBe('HBO');
+      expect(
+        numberedChannelLabel({ id: 1, name: 'HBO', channel_number: null })
+      ).toBe('HBO');
     });
 
     it('falls back to "Channel id" when name is missing and number present', () => {
-      expect(numberedChannelLabel({ id: 5, channel_number: 10 }))
-        .toBe('10 - Channel 5');
+      expect(numberedChannelLabel({ id: 5, channel_number: 10 })).toBe(
+        '10 - Channel 5'
+      );
     });
 
     it('falls back to "Channel id" when both name and number are missing', () => {
@@ -292,7 +297,7 @@ describe('RecordingUtils', () => {
     });
   });
 
-// ─── getSingleFormDefaults ────────────────────────────────────────────────────
+  // ─── getSingleFormDefaults ────────────────────────────────────────────────────
 
   describe('getSingleFormDefaults', () => {
     it('returns defaults with no arguments', () => {
@@ -320,7 +325,7 @@ describe('RecordingUtils', () => {
     });
   });
 
-// ─── getRecurringFormDefaults ─────────────────────────────────────────────────
+  // ─── getRecurringFormDefaults ─────────────────────────────────────────────────
 
   describe('getRecurringFormDefaults', () => {
     it('returns defaults with no arguments', () => {
@@ -341,7 +346,7 @@ describe('RecordingUtils', () => {
     });
   });
 
-// ─── buildSinglePayload ───────────────────────────────────────────────────────
+  // ─── buildSinglePayload ───────────────────────────────────────────────────────
 
   describe('buildSinglePayload', () => {
     it('builds payload from values', () => {
@@ -357,7 +362,7 @@ describe('RecordingUtils', () => {
     });
   });
 
-// ─── buildRecurringPayload ────────────────────────────────────────────────────
+  // ─── buildRecurringPayload ────────────────────────────────────────────────────
 
   describe('buildRecurringPayload', () => {
     it('builds payload from values', () => {
@@ -396,7 +401,7 @@ describe('RecordingUtils', () => {
     });
   });
 
-// ─── singleFormValidators ─────────────────────────────────────────────────────
+  // ─── singleFormValidators ─────────────────────────────────────────────────────
 
   describe('singleFormValidators', () => {
     describe('end_time', () => {
@@ -424,12 +429,14 @@ describe('RecordingUtils', () => {
       it('returns null when end is after start', () => {
         const start = new Date('2024-06-15T09:00:00Z');
         const end = new Date('2024-06-15T10:00:00Z');
-        expect(singleFormValidators.end_time(end, { start_time: start })).toBeNull();
+        expect(
+          singleFormValidators.end_time(end, { start_time: start })
+        ).toBeNull();
       });
     });
   });
 
-// ─── recurringFormValidators ──────────────────────────────────────────────────
+  // ─── recurringFormValidators ──────────────────────────────────────────────────
 
   describe('recurringFormValidators', () => {
     describe('days_of_week', () => {
@@ -458,9 +465,11 @@ describe('RecordingUtils', () => {
 
     describe('end_time', () => {
       it('returns error when value is falsy', () => {
-        expect(recurringFormValidators.end_time(null, { start_time: '2024-06-15T10:00:00' })).toBe(
-          'Select an end time'
-        );
+        expect(
+          recurringFormValidators.end_time(null, {
+            start_time: '2024-06-15T10:00:00',
+          })
+        ).toBe('Select an end time');
       });
 
       it('returns error when end equals start (diff === 0)', () => {
@@ -488,15 +497,17 @@ describe('RecordingUtils', () => {
       it('returns error when end_date is before start_date', () => {
         const start = new Date('2024-06-15');
         const end = new Date('2024-06-01');
-        expect(recurringFormValidators.end_date(end, { start_date: start })).toBe(
-          'End date cannot be before start date'
-        );
+        expect(
+          recurringFormValidators.end_date(end, { start_date: start })
+        ).toBe('End date cannot be before start date');
       });
 
       it('returns null when end_date is on or after start_date', () => {
         const start = new Date('2024-06-15');
         const end = new Date('2024-06-15');
-        expect(recurringFormValidators.end_date(end, { start_date: start })).toBeNull();
+        expect(
+          recurringFormValidators.end_date(end, { start_date: start })
+        ).toBeNull();
       });
     });
   });
diff --git a/frontend/src/utils/forms/__tests__/SeriesRuleEditorModalUtils.test.js b/frontend/src/utils/forms/__tests__/SeriesRuleEditorModalUtils.test.js
index 1731e08d..0c234085 100644
--- a/frontend/src/utils/forms/__tests__/SeriesRuleEditorModalUtils.test.js
+++ b/frontend/src/utils/forms/__tests__/SeriesRuleEditorModalUtils.test.js
@@ -8,11 +8,10 @@ vi.mock('../../../api.js', () => ({
 }));
 
 vi.mock('../RecordingUtils.js', () => ({
-  numberedChannelLabel: vi.fn(
-    (item) =>
-      item.channel_number
-        ? `${item.channel_number} - ${item.name || `Channel ${item.id}`}`
-        : item.name || `Channel ${item.id}`
+  numberedChannelLabel: vi.fn((item) =>
+    item.channel_number
+      ? `${item.channel_number} - ${item.name || `Channel ${item.id}`}`
+      : item.name || `Channel ${item.id}`
   ),
   sortedChannelOptions: vi.fn((channels) =>
     (Array.isArray(channels) ? channels : []).map((c) => ({
@@ -33,7 +32,10 @@ import {
   getChannelOptions,
   previewSeriesRule,
 } from '../SeriesRuleEditorModalUtils.js';
-import { sortedChannelOptions, numberedChannelLabel } from '../RecordingUtils.js';
+import {
+  sortedChannelOptions,
+  numberedChannelLabel,
+} from '../RecordingUtils.js';
 
 // ─────────────────────────────────────────────────────────────────────────────
 
@@ -112,7 +114,7 @@ describe('SeriesRuleEditorModalUtils', () => {
   describe('formatRange', () => {
     it('formats same-day range as "date startTime - endTime"', () => {
       const start = '2024-06-01T10:00:00';
-      const end   = '2024-06-01T11:30:00';
+      const end = '2024-06-01T11:30:00';
       const result = formatRange(start, end);
       // Must include a dash separating start and end times (not "->")
       expect(result).toMatch(/-(?!>)/);
@@ -121,7 +123,7 @@ describe('SeriesRuleEditorModalUtils', () => {
 
     it('formats cross-day range with "->" separator', () => {
       const start = '2024-06-01T23:00:00';
-      const end   = '2024-06-02T01:00:00';
+      const end = '2024-06-02T01:00:00';
       const result = formatRange(start, end);
       expect(result).toMatch(/->/);
     });
@@ -133,7 +135,7 @@ describe('SeriesRuleEditorModalUtils', () => {
 
     it('includes a date string component in the output', () => {
       const start = '2024-06-01T10:00:00';
-      const end   = '2024-06-01T11:00:00';
+      const end = '2024-06-01T11:00:00';
       const result = formatRange(start, end);
       // toLocaleDateString produces something non-empty
       expect(result.length).toBeGreaterThan(5);
@@ -141,7 +143,7 @@ describe('SeriesRuleEditorModalUtils', () => {
 
     it('handles ISO strings with timezone offsets', () => {
       const start = '2024-06-01T10:00:00Z';
-      const end   = '2024-06-01T11:00:00Z';
+      const end = '2024-06-01T11:00:00Z';
       // Should not throw
       expect(() => formatRange(start, end)).not.toThrow();
     });
@@ -227,15 +229,15 @@ describe('SeriesRuleEditorModalUtils', () => {
 
   describe('getChannelOptions', () => {
     const makeChannels = () => [
-      { id: 1, name: 'ESPN',  channel_number: 5,  epg_data_id: 'epg-1' },
-      { id: 2, name: 'HBO',   channel_number: 10, epg_data_id: 'epg-2' },
-      { id: 3, name: 'CNN',   channel_number: 20, epg_data_id: 'epg-3' },
+      { id: 1, name: 'ESPN', channel_number: 5, epg_data_id: 'epg-1' },
+      { id: 2, name: 'HBO', channel_number: 10, epg_data_id: 'epg-2' },
+      { id: 3, name: 'CNN', channel_number: 20, epg_data_id: 'epg-3' },
     ];
 
     const makeTvgsById = () => ({
       'epg-1': { tvg_id: 'tvg-espn' },
-      'epg-2': { tvg_id: 'tvg-hbo'  },
-      'epg-3': { tvg_id: 'tvg-cnn'  },
+      'epg-2': { tvg_id: 'tvg-hbo' },
+      'epg-3': { tvg_id: 'tvg-cnn' },
     });
 
     it('calls sortedChannelOptions with allChannels and numberedChannelLabel', () => {
@@ -262,9 +264,9 @@ describe('SeriesRuleEditorModalUtils', () => {
     it('places matching channels before non-matching when tvgId set', () => {
       // Override sortedChannelOptions to return deterministic output
       vi.mocked(sortedChannelOptions).mockReturnValueOnce([
-        { value: '1', label: 'ESPN'  },
-        { value: '2', label: 'HBO'   },
-        { value: '3', label: 'CNN'   },
+        { value: '1', label: 'ESPN' },
+        { value: '2', label: 'HBO' },
+        { value: '3', label: 'CNN' },
       ]);
 
       const channels = makeChannels();
@@ -273,15 +275,15 @@ describe('SeriesRuleEditorModalUtils', () => {
       // tvgId matches ESPN (epg-1 → tvg-espn)
       const result = getChannelOptions(channels, tvgsById, 'tvg-espn');
 
-      expect(result[0].value).toBe('1');   // ESPN first (matching)
-      expect(result[1].value).toBe('2');   // HBO second (non-matching)
-      expect(result[2].value).toBe('3');   // CNN third  (non-matching)
+      expect(result[0].value).toBe('1'); // ESPN first (matching)
+      expect(result[1].value).toBe('2'); // HBO second (non-matching)
+      expect(result[2].value).toBe('3'); // CNN third  (non-matching)
     });
 
     it('returns all in sorted order when no channel matches tvgId', () => {
       vi.mocked(sortedChannelOptions).mockReturnValueOnce([
         { value: '1', label: 'ESPN' },
-        { value: '2', label: 'HBO'  },
+        { value: '2', label: 'HBO' },
       ]);
 
       const channels = makeChannels();
@@ -292,7 +294,9 @@ describe('SeriesRuleEditorModalUtils', () => {
     });
 
     it('handles channel with no epg_data_id (cTvg is null)', () => {
-      const channels = [{ id: 9, name: 'NoEPG', channel_number: 1, epg_data_id: null }];
+      const channels = [
+        { id: 9, name: 'NoEPG', channel_number: 1, epg_data_id: null },
+      ];
       vi.mocked(sortedChannelOptions).mockReturnValueOnce([
         { value: '9', label: 'NoEPG' },
       ]);
@@ -305,7 +309,14 @@ describe('SeriesRuleEditorModalUtils', () => {
     });
 
     it('handles missing epg_data_id entry in tvgsById', () => {
-      const channels = [{ id: 5, name: 'Unknown', channel_number: 1, epg_data_id: 'epg-missing' }];
+      const channels = [
+        {
+          id: 5,
+          name: 'Unknown',
+          channel_number: 1,
+          epg_data_id: 'epg-missing',
+        },
+      ];
       vi.mocked(sortedChannelOptions).mockReturnValueOnce([
         { value: '5', label: 'Unknown' },
       ]);
@@ -333,20 +344,20 @@ describe('SeriesRuleEditorModalUtils', () => {
 
     it('places multiple matching channels before non-matching', () => {
       vi.mocked(sortedChannelOptions).mockReturnValueOnce([
-        { value: '1', label: 'ESPN'  },
+        { value: '1', label: 'ESPN' },
         { value: '2', label: 'ESPN2' },
-        { value: '3', label: 'CNN'   },
+        { value: '3', label: 'CNN' },
       ]);
 
       const channels = [
-        { id: 1, name: 'ESPN',  channel_number: 5,  epg_data_id: 'epg-1' },
-        { id: 2, name: 'ESPN2', channel_number: 6,  epg_data_id: 'epg-4' },
-        { id: 3, name: 'CNN',   channel_number: 20, epg_data_id: 'epg-3' },
+        { id: 1, name: 'ESPN', channel_number: 5, epg_data_id: 'epg-1' },
+        { id: 2, name: 'ESPN2', channel_number: 6, epg_data_id: 'epg-4' },
+        { id: 3, name: 'CNN', channel_number: 20, epg_data_id: 'epg-3' },
       ];
       const tvgsById = {
         'epg-1': { tvg_id: 'tvg-espn' },
         'epg-4': { tvg_id: 'tvg-espn' }, // both ESPN channels share tvg_id
-        'epg-3': { tvg_id: 'tvg-cnn'  },
+        'epg-3': { tvg_id: 'tvg-cnn' },
       };
 
       const result = getChannelOptions(channels, tvgsById, 'tvg-espn');
@@ -385,9 +396,13 @@ describe('SeriesRuleEditorModalUtils', () => {
     });
 
     it('propagates rejection from API.previewSeriesRule', async () => {
-      vi.mocked(API.previewSeriesRule).mockRejectedValue(new Error('Network error'));
+      vi.mocked(API.previewSeriesRule).mockRejectedValue(
+        new Error('Network error')
+      );
       const controller = new AbortController();
-      await expect(previewSeriesRule({}, controller)).rejects.toThrow('Network error');
+      await expect(previewSeriesRule({}, controller)).rejects.toThrow(
+        'Network error'
+      );
     });
 
     it('propagates AbortError when signal is aborted', async () => {
@@ -397,7 +412,9 @@ describe('SeriesRuleEditorModalUtils', () => {
       const controller = new AbortController();
       controller.abort();
 
-      await expect(previewSeriesRule({}, controller)).rejects.toThrow('Aborted');
+      await expect(previewSeriesRule({}, controller)).rejects.toThrow(
+        'Aborted'
+      );
     });
 
     it('passes through all fields of the preview key', async () => {
@@ -422,4 +439,3 @@ describe('SeriesRuleEditorModalUtils', () => {
     });
   });
 });
-
diff --git a/frontend/src/utils/forms/__tests__/StreamProfileUtils.test.js b/frontend/src/utils/forms/__tests__/StreamProfileUtils.test.js
index 3ed9357e..100f7817 100644
--- a/frontend/src/utils/forms/__tests__/StreamProfileUtils.test.js
+++ b/frontend/src/utils/forms/__tests__/StreamProfileUtils.test.js
@@ -54,7 +54,9 @@ describe('StreamProfileUtils', () => {
 
   describe('COMMAND_EXAMPLES', () => {
     it('has an entry for each non-custom built-in command', () => {
-      const nonCustom = BUILT_IN_COMMANDS.filter((c) => c.value !== '__custom__');
+      const nonCustom = BUILT_IN_COMMANDS.filter(
+        (c) => c.value !== '__custom__'
+      );
       for (const cmd of nonCustom) {
         expect(COMMAND_EXAMPLES).toHaveProperty(cmd.value);
         expect(typeof COMMAND_EXAMPLES[cmd.value]).toBe('string');
@@ -194,4 +196,4 @@ describe('StreamProfileUtils', () => {
       expect(API.addStreamProfile).toHaveBeenCalledWith({});
     });
   });
-});
\ No newline at end of file
+});
diff --git a/frontend/src/utils/forms/__tests__/StreamUtils.test.js b/frontend/src/utils/forms/__tests__/StreamUtils.test.js
index 4eeded36..1cb25805 100644
--- a/frontend/src/utils/forms/__tests__/StreamUtils.test.js
+++ b/frontend/src/utils/forms/__tests__/StreamUtils.test.js
@@ -32,7 +32,7 @@ describe('StreamUtils', () => {
     });
   });
 
-// ─── updateStream ─────────────────────────────────────────────────────────────
+  // ─── updateStream ─────────────────────────────────────────────────────────────
 
   describe('updateStream', () => {
     beforeEach(() => {
@@ -63,7 +63,7 @@ describe('StreamUtils', () => {
     });
   });
 
-// ─── addStream ────────────────────────────────────────────────────────────────
+  // ─── addStream ────────────────────────────────────────────────────────────────
 
   describe('addStream', () => {
     beforeEach(() => {
@@ -92,4 +92,4 @@ describe('StreamUtils', () => {
       expect(API.addStream).toHaveBeenCalledWith({});
     });
   });
-});
\ No newline at end of file
+});
diff --git a/frontend/src/utils/forms/__tests__/UserAgentUtils.test.js b/frontend/src/utils/forms/__tests__/UserAgentUtils.test.js
index ed6163b2..2e0bed4f 100644
--- a/frontend/src/utils/forms/__tests__/UserAgentUtils.test.js
+++ b/frontend/src/utils/forms/__tests__/UserAgentUtils.test.js
@@ -13,7 +13,11 @@ vi.mock('@hookform/resolvers/yup', () => ({
 
 import API from '../../../api.js';
 import { yupResolver } from '@hookform/resolvers/yup';
-import { getResolver, updateUserAgent, addUserAgent } from '../UserAgentUtils.js';
+import {
+  getResolver,
+  updateUserAgent,
+  addUserAgent,
+} from '../UserAgentUtils.js';
 
 describe('UserAgentUtils', () => {
   // ─── getResolver ──────────────────────────────────────────────────────────────
@@ -32,7 +36,7 @@ describe('UserAgentUtils', () => {
     });
   });
 
-// ─── updateUserAgent ──────────────────────────────────────────────────────────
+  // ─── updateUserAgent ──────────────────────────────────────────────────────────
 
   describe('updateUserAgent', () => {
     beforeEach(() => {
@@ -63,7 +67,7 @@ describe('UserAgentUtils', () => {
     });
   });
 
-// ─── addUserAgent ─────────────────────────────────────────────────────────────
+  // ─── addUserAgent ─────────────────────────────────────────────────────────────
 
   describe('addUserAgent', () => {
     beforeEach(() => {
@@ -92,4 +96,4 @@ describe('UserAgentUtils', () => {
       expect(API.addUserAgent).toHaveBeenCalledWith({});
     });
   });
-});
\ No newline at end of file
+});
diff --git a/frontend/src/utils/forms/__tests__/UserUtils.test.js b/frontend/src/utils/forms/__tests__/UserUtils.test.js
index 3618228a..5157ac96 100644
--- a/frontend/src/utils/forms/__tests__/UserUtils.test.js
+++ b/frontend/src/utils/forms/__tests__/UserUtils.test.js
@@ -47,7 +47,10 @@ describe('UserUtils', () => {
     it('calls API.createUser with the provided values', () => {
       API.createUser.mockResolvedValueOnce({ id: 1 });
       createUser({ username: 'alice', password: 'pass' });
-      expect(API.createUser).toHaveBeenCalledWith({ username: 'alice', password: 'pass' });
+      expect(API.createUser).toHaveBeenCalledWith({
+        username: 'alice',
+        password: 'pass',
+      });
     });
 
     it('returns the promise from API.createUser', () => {
@@ -57,7 +60,7 @@ describe('UserUtils', () => {
     });
   });
 
-// ─── updateUser ───────────────────────────────────────────────────────────────
+  // ─── updateUser ───────────────────────────────────────────────────────────────
 
   describe('updateUser', () => {
     beforeEach(() => vi.clearAllMocks());
@@ -65,19 +68,31 @@ describe('UserUtils', () => {
     it('calls API.updateUser with selfEdit=false when isAdmin is true', () => {
       API.updateUser.mockResolvedValueOnce({});
       updateUser(1, { username: 'bob' }, true, { id: 1 });
-      expect(API.updateUser).toHaveBeenCalledWith(1, { username: 'bob' }, false);
+      expect(API.updateUser).toHaveBeenCalledWith(
+        1,
+        { username: 'bob' },
+        false
+      );
     });
 
     it('calls API.updateUser with selfEdit=true when not admin and userId matches authUser', () => {
       API.updateUser.mockResolvedValueOnce({});
       updateUser(5, { username: 'carol' }, false, { id: 5 });
-      expect(API.updateUser).toHaveBeenCalledWith(5, { username: 'carol' }, true);
+      expect(API.updateUser).toHaveBeenCalledWith(
+        5,
+        { username: 'carol' },
+        true
+      );
     });
 
     it('calls API.updateUser with selfEdit=false when not admin and userId does not match authUser', () => {
       API.updateUser.mockResolvedValueOnce({});
       updateUser(5, { username: 'dave' }, false, { id: 99 });
-      expect(API.updateUser).toHaveBeenCalledWith(5, { username: 'dave' }, false);
+      expect(API.updateUser).toHaveBeenCalledWith(
+        5,
+        { username: 'dave' },
+        false
+      );
     });
 
     it('returns the promise from API.updateUser', () => {
@@ -87,7 +102,7 @@ describe('UserUtils', () => {
     });
   });
 
-// ─── generateApiKey ───────────────────────────────────────────────────────────
+  // ─── generateApiKey ───────────────────────────────────────────────────────────
 
   describe('generateApiKey', () => {
     beforeEach(() => vi.clearAllMocks());
@@ -105,7 +120,7 @@ describe('UserUtils', () => {
     });
   });
 
-// ─── revokeApiKey ─────────────────────────────────────────────────────────────
+  // ─── revokeApiKey ─────────────────────────────────────────────────────────────
 
   describe('revokeApiKey', () => {
     beforeEach(() => vi.clearAllMocks());
@@ -123,7 +138,7 @@ describe('UserUtils', () => {
     });
   });
 
-// ─── userToFormValues ─────────────────────────────────────────────────────────
+  // ─── userToFormValues ─────────────────────────────────────────────────────────
 
   describe('userToFormValues', () => {
     const makeUser = (overrides = {}) => ({
@@ -149,7 +164,9 @@ describe('UserUtils', () => {
     });
 
     it('defaults first_name and last_name to empty string when absent', () => {
-      const result = userToFormValues(makeUser({ first_name: null, last_name: null }));
+      const result = userToFormValues(
+        makeUser({ first_name: null, last_name: null })
+      );
       expect(result.first_name).toBe('');
       expect(result.last_name).toBe('');
     });
@@ -160,7 +177,9 @@ describe('UserUtils', () => {
     });
 
     it('uses channel_profiles when non-empty', () => {
-      const result = userToFormValues(makeUser({ channel_profiles: ['3', '4'] }));
+      const result = userToFormValues(
+        makeUser({ channel_profiles: ['3', '4'] })
+      );
       expect(result.channel_profiles).toEqual(['3', '4']);
     });
 
@@ -217,7 +236,7 @@ describe('UserUtils', () => {
     });
   });
 
-// ─── formValuesToPayload ──────────────────────────────────────────────────────
+  // ─── formValuesToPayload ──────────────────────────────────────────────────────
 
   describe('formValuesToPayload', () => {
     const makeValues = (overrides = {}) => ({
@@ -253,7 +272,10 @@ describe('UserUtils', () => {
     });
 
     it('sets output_profile to null when empty string', () => {
-      const result = formValuesToPayload(makeValues({ output_profile: '' }), null);
+      const result = formValuesToPayload(
+        makeValues({ output_profile: '' }),
+        null
+      );
       expect(result.custom_properties.output_profile).toBeNull();
     });
 
@@ -272,11 +294,20 @@ describe('UserUtils', () => {
     });
 
     it('populates allowed_networks for all NETWORK_KEYS when allowed_ips present', () => {
-      const result = formValuesToPayload(makeValues({ allowed_ips: ['192.168.1.0/24', '10.0.0.1/32'] }), null);
+      const result = formValuesToPayload(
+        makeValues({ allowed_ips: ['192.168.1.0/24', '10.0.0.1/32'] }),
+        null
+      );
       expect(result.allowed_ips).toBeUndefined();
-      expect(result.custom_properties.allowed_networks.m3u).toBe('192.168.1.0/24,10.0.0.1/32');
-      expect(result.custom_properties.allowed_networks.xc).toBe('192.168.1.0/24,10.0.0.1/32');
-      expect(result.custom_properties.allowed_networks.mpegts).toBe('192.168.1.0/24,10.0.0.1/32');
+      expect(result.custom_properties.allowed_networks.m3u).toBe(
+        '192.168.1.0/24,10.0.0.1/32'
+      );
+      expect(result.custom_properties.allowed_networks.xc).toBe(
+        '192.168.1.0/24,10.0.0.1/32'
+      );
+      expect(result.custom_properties.allowed_networks.mpegts).toBe(
+        '192.168.1.0/24,10.0.0.1/32'
+      );
     });
 
     it('sets empty allowed_networks when allowed_ips is empty', () => {
@@ -285,17 +316,25 @@ describe('UserUtils', () => {
     });
 
     it('sets channel_profiles to empty array when it includes "0"', () => {
-      const result = formValuesToPayload(makeValues({ channel_profiles: ['0'] }), null);
+      const result = formValuesToPayload(
+        makeValues({ channel_profiles: ['0'] }),
+        null
+      );
       expect(result.channel_profiles).toEqual([]);
     });
 
     it('preserves channel_profiles when it does not include "0"', () => {
-      const result = formValuesToPayload(makeValues({ channel_profiles: ['1', '2'] }), null);
+      const result = formValuesToPayload(
+        makeValues({ channel_profiles: ['1', '2'] }),
+        null
+      );
       expect(result.channel_profiles).toEqual(['1', '2']);
     });
 
     it('merges existing custom_properties from existingUser', () => {
-      const existingUser = { custom_properties: { some_other_prop: 'keep_me' } };
+      const existingUser = {
+        custom_properties: { some_other_prop: 'keep_me' },
+      };
       const result = formValuesToPayload(makeValues(), existingUser);
       expect(result.custom_properties.some_other_prop).toBe('keep_me');
     });
@@ -305,7 +344,7 @@ describe('UserUtils', () => {
     });
   });
 
-// ─── getFormInitialValues ─────────────────────────────────────────────────────
+  // ─── getFormInitialValues ─────────────────────────────────────────────────────
 
   describe('getFormInitialValues', () => {
     it('returns the expected default structure', () => {
@@ -336,97 +375,151 @@ describe('UserUtils', () => {
     });
   });
 
-// ─── getFormValidators ────────────────────────────────────────────────────────
+  // ─── getFormValidators ────────────────────────────────────────────────────────
 
   describe('getFormValidators', () => {
     const validate = (user, values) => getFormValidators(user)(values);
 
     describe('username', () => {
       it('returns error when username is empty', () => {
-        const result = validate(null, { ...getFormInitialValues(), username: '' });
+        const result = validate(null, {
+          ...getFormInitialValues(),
+          username: '',
+        });
         expect(result.username).toBe('Username is required');
       });
 
       it('returns null for a valid non-streamer username', () => {
-        const result = validate(null, { ...getFormInitialValues(), username: 'alice', user_level: '0' });
+        const result = validate(null, {
+          ...getFormInitialValues(),
+          username: 'alice',
+          user_level: '0',
+        });
         expect(result.username).toBeNull();
       });
 
       it('returns null for a valid alphanumeric streamer username', () => {
-        const result = validate(null, { ...getFormInitialValues(), username: 'alice123', user_level: '2' });
+        const result = validate(null, {
+          ...getFormInitialValues(),
+          username: 'alice123',
+          user_level: '2',
+        });
         expect(result.username).toBeNull();
       });
 
       it('returns error for streamer username with non-alphanumeric characters', () => {
-        const result = validate(null, { ...getFormInitialValues(), username: 'alice_123', user_level: '2' });
+        const result = validate(null, {
+          ...getFormInitialValues(),
+          username: 'alice_123',
+          user_level: '2',
+        });
         expect(result.username).toBe('Streamer username must be alphanumeric');
       });
     });
 
     describe('password', () => {
       it('returns error when creating a non-streamer user without a password', () => {
-        const result = validate(null, { ...getFormInitialValues(), user_level: '0', password: '' });
+        const result = validate(null, {
+          ...getFormInitialValues(),
+          user_level: '0',
+          password: '',
+        });
         expect(result.password).toBe('Password is required');
       });
 
       it('returns null when creating a streamer user without a password', () => {
-        const result = validate(null, { ...getFormInitialValues(), user_level: '2', password: '' });
+        const result = validate(null, {
+          ...getFormInitialValues(),
+          user_level: '2',
+          password: '',
+        });
         expect(result.password).toBeNull();
       });
 
       it('returns null when editing an existing user without a password', () => {
-        const result = validate({ id: 1 }, { ...getFormInitialValues(), user_level: '0', password: '' });
+        const result = validate(
+          { id: 1 },
+          { ...getFormInitialValues(), user_level: '0', password: '' }
+        );
         expect(result.password).toBeNull();
       });
 
       it('returns null when password is provided for new user', () => {
-        const result = validate(null, { ...getFormInitialValues(), user_level: '0', password: 'secret' });
+        const result = validate(null, {
+          ...getFormInitialValues(),
+          user_level: '0',
+          password: 'secret',
+        });
         expect(result.password).toBeNull();
       });
     });
 
     describe('xc_password', () => {
       it('returns null when xc_password is empty', () => {
-        const result = validate(null, { ...getFormInitialValues(), xc_password: '' });
+        const result = validate(null, {
+          ...getFormInitialValues(),
+          xc_password: '',
+        });
         expect(result.xc_password).toBeNull();
       });
 
       it('returns null for a valid alphanumeric xc_password', () => {
-        const result = validate(null, { ...getFormInitialValues(), xc_password: 'abc123' });
+        const result = validate(null, {
+          ...getFormInitialValues(),
+          xc_password: 'abc123',
+        });
         expect(result.xc_password).toBeNull();
       });
 
       it('returns error for xc_password with non-alphanumeric characters', () => {
-        const result = validate(null, { ...getFormInitialValues(), xc_password: 'abc!@#' });
+        const result = validate(null, {
+          ...getFormInitialValues(),
+          xc_password: 'abc!@#',
+        });
         expect(result.xc_password).toBe('XC password must be alphanumeric');
       });
     });
 
     describe('allowed_ips', () => {
       it('returns null for an empty allowed_ips array', () => {
-        const result = validate(null, { ...getFormInitialValues(), allowed_ips: [] });
+        const result = validate(null, {
+          ...getFormInitialValues(),
+          allowed_ips: [],
+        });
         expect(result.allowed_ips).toBeNull();
       });
 
       it('returns null for a valid IPv4 CIDR', () => {
-        const result = validate(null, { ...getFormInitialValues(), allowed_ips: ['192.168.1.0/24'] });
+        const result = validate(null, {
+          ...getFormInitialValues(),
+          allowed_ips: ['192.168.1.0/24'],
+        });
         expect(result.allowed_ips).toBeNull();
       });
 
       it('returns null for a bare IPv4 address (auto-appends /32)', () => {
-        const result = validate(null, { ...getFormInitialValues(), allowed_ips: ['10.0.0.1'] });
+        const result = validate(null, {
+          ...getFormInitialValues(),
+          allowed_ips: ['10.0.0.1'],
+        });
         expect(result.allowed_ips).toBeNull();
       });
 
       it('returns error for an invalid IP entry', () => {
-        const result = validate(null, { ...getFormInitialValues(), allowed_ips: ['not-an-ip'] });
+        const result = validate(null, {
+          ...getFormInitialValues(),
+          allowed_ips: ['not-an-ip'],
+        });
         expect(result.allowed_ips).toBe('Invalid IP address or CIDR range');
       });
 
       it('returns error when any entry in the list is invalid', () => {
-        const result = validate(null, { ...getFormInitialValues(), allowed_ips: ['192.168.1.0/24', 'bad-entry'] });
+        const result = validate(null, {
+          ...getFormInitialValues(),
+          allowed_ips: ['192.168.1.0/24', 'bad-entry'],
+        });
         expect(result.allowed_ips).toBe('Invalid IP address or CIDR range');
       });
     });
   });
-});
\ No newline at end of file
+});

From 5eb118478bba5a337ce1e369f5ef7b45d42c5aa6 Mon Sep 17 00:00:00 2001
From: nemesbak <nemesbak@gmail.com>
Date: Thu, 28 May 2026 13:39:05 +0200
Subject: [PATCH 17/35] fix(channels): honor stream profile override in
 Channel.get_stream_profile()
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Channel.get_stream_profile() read self.stream_profile directly, bypassing
the override system. The override-aware property effective_stream_profile_obj
already existed and called _resolve_effective_fk('stream_profile') which
correctly picks override.stream_profile when set, but nothing in the
streaming path called it.

As a result, a per-channel 'Stream Profile' override saved through the UI
was visible in the channel edit form (yellow pencil indicator appeared) but
silently ignored at stream time — Dispatcharr always used the global default
profile regardless of what was configured per-channel.

Fix: call effective_stream_profile_obj in get_stream_profile() so that all
callers (live proxy url_utils, input manager, views) automatically pick up
channel-level overrides without any further changes.

Fixes #1268

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 apps/channels/models.py | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/apps/channels/models.py b/apps/channels/models.py
index 59af3e00..179ab5bd 100644
--- a/apps/channels/models.py
+++ b/apps/channels/models.py
@@ -451,9 +451,11 @@ class Channel(models.Model):
     def effective_stream_profile_obj(self):
         return self._resolve_effective_fk("stream_profile")
 
-    # @TODO: honor stream's stream profile
     def get_stream_profile(self):
-        stream_profile = self.stream_profile
+        # Respect per-channel overrides: effective_stream_profile_obj uses
+        # _resolve_effective_fk which picks override.stream_profile when set,
+        # falling back to the channel's own stream_profile field.
+        stream_profile = self.effective_stream_profile_obj
         if not stream_profile:
             stream_profile = StreamProfile.objects.get(
                 id=CoreSettings.get_default_stream_profile_id()

From 3e7bd3d431a8e3b2283486ad34d92ee48ee9ed5a Mon Sep 17 00:00:00 2001
From: Seth Van Niekerk <seth@swvn.io>
Date: Thu, 28 May 2026 14:11:47 -0400
Subject: [PATCH 18/35] Introduce In-House Template & Compliance Actions

---
 .github/workflows/issue-template-check.yml | 31 +++++++++++
 .github/workflows/pr-compliance-check.yml  | 65 ++++++++++++++++++++++
 2 files changed, 96 insertions(+)
 create mode 100644 .github/workflows/issue-template-check.yml
 create mode 100644 .github/workflows/pr-compliance-check.yml

diff --git a/.github/workflows/issue-template-check.yml b/.github/workflows/issue-template-check.yml
new file mode 100644
index 00000000..676b37df
--- /dev/null
+++ b/.github/workflows/issue-template-check.yml
@@ -0,0 +1,31 @@
+on:
+  issues:
+    types: [opened, reopened]
+
+jobs:
+  check:
+    runs-on: ubuntu-latest
+    steps:
+
+      # Request a bot user token
+      - uses: actions/create-github-app-token@v1
+        id: app-token
+        with:
+          app-id: ${{ secrets.BOT_APP_ID }}
+          private-key: ${{ secrets.BOT_PRIVATE_KEY }}
+
+      # Do the actual check
+      - uses: Dispatcharr/repo-bot/actions/template-enforcer@v1
+        with:
+          github-token: ${{ steps.app-token.outputs.token }}
+          event-type: issue
+          required-type: "Bug, Feature"
+          enforcement: close-and-lock
+          bypass-for-members: true
+          close-comment: |
+            ## Issue not opened from a template
+
+
+            This issue was closed because it was not opened using one of the available issue templates.
+
+            Please [open a new issue]({new-issue-url}) and select the appropriate template. This helps us triage and address issues efficiently.
diff --git a/.github/workflows/pr-compliance-check.yml b/.github/workflows/pr-compliance-check.yml
new file mode 100644
index 00000000..135bd9c3
--- /dev/null
+++ b/.github/workflows/pr-compliance-check.yml
@@ -0,0 +1,65 @@
+on:
+  pull_request_target:
+    types: [opened, reopened, edited]
+
+jobs:
+  check:
+    runs-on: ubuntu-latest
+    steps:
+
+      # Request a bot user token
+      - uses: actions/create-github-app-token@v1
+        id: app-token
+        with:
+          app-id: ${{ secrets.BOT_APP_ID }}
+          private-key: ${{ secrets.BOT_PRIVATE_KEY }}
+
+      # Delete old bot comments before posting fresh ones
+      - uses: Dispatcharr/repo-bot/actions/comment-collapse@v1
+        with:
+          github-token: ${{ steps.app-token.outputs.token }}
+          mode: delete
+
+      # Template + Agreement Check
+      - uses: Dispatcharr/repo-bot/actions/template-enforcer@v1
+        with:
+          github-token: ${{ steps.app-token.outputs.token }}
+          event-type: pull_request
+          required-markers: "## How was it tested?, ## Checklist, - [x] I agree to the [Contributor License Agreement](../blob/dev/CONTRIBUTING.md#contributor-license-agreement)"
+          enforcement: comment-only
+          bypass-for-members: true
+          close-comment: |
+            ## PR requirements not met
+
+
+            Your PR description is missing one or more required sections. Please ensure all of the following are present and filled out exactly as they appear in the [PR template](../blob/dev/.github/pull_request_template.md).:
+
+            - **How was it tested?** Heading (describe how you verified your changes)
+            - **Checklist** Heading (completed from the [pull request template](../blob/dev/.github/pull_request_template.md))
+            - **Contributor License Agreement** Checklist Item (the following item must appear checked in your description):
+
+            > - [x] I agree to the [Contributor License Agreement](../blob/dev/CONTRIBUTING.md#contributor-license-agreement)
+
+
+            Edit your PR description to add any missing items. See [CONTRIBUTING.md](../blob/dev/CONTRIBUTING.md) for full contribution guidelines. Pull requests that do not follow the template, or that are wholly AI-generated or CLI-created, will be closed.
+
+      # Target Check
+      - uses: Dispatcharr/repo-bot/actions/branch-guard@v1
+        with:
+          github-token: ${{ steps.app-token.outputs.token }}
+          allowed-targets: "dev"
+          enforcement: comment-only
+          bypass-for-members: true
+          comment: |
+            ## Wrong target branch
+
+
+            This PR targets `{target-branch}`, but all contributions must target the `dev` branch.
+
+            > **To fix this:**
+            > 1. Open the PR and click **Edit** next to the title
+            > 2. Change the base branch from `{target-branch}` to `dev`
+            > 3. Save the change
+
+
+            Unsure about our contribution guidelines? See [CONTRIBUTING.md](../blob/dev/CONTRIBUTING.md).

From 9c6c2a081bbae86db0aead65380453e2363bbf87 Mon Sep 17 00:00:00 2001
From: SergeantPanda <chester.cullen@gmail.com>
Date: Thu, 28 May 2026 14:31:00 -0500
Subject: [PATCH 19/35] fix: remove unnecessary libpq-dev dependency from
 Dockerfile

---
 docker/DispatcharrBase | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/docker/DispatcharrBase b/docker/DispatcharrBase
index 61c460ce..bc2e9b4d 100644
--- a/docker/DispatcharrBase
+++ b/docker/DispatcharrBase
@@ -21,7 +21,7 @@ RUN apt-get update && apt-get install --no-install-recommends -y \
     && apt-get update \
     && apt-get install --no-install-recommends -y \
     python3.13 python3.13-dev python3.13-venv libpython3.13 \
-    libpcre3 libpcre3-dev libpq-dev \
+    libpcre3 libpcre3-dev \
     build-essential gcc g++ gfortran libopenblas-dev libopenblas0 ninja-build \
     && rm -rf /var/lib/apt/lists/*
 
@@ -73,7 +73,7 @@ RUN apt-get update && apt-get install --no-install-recommends -y \
     && apt-get update \
     && apt-get install --no-install-recommends -y \
     python3.13 python3.13-venv libpython3.13 \
-    libpcre3 libpq-dev libopenblas0 procps pciutils \
+    libpcre3 libopenblas0 procps pciutils \
     nginx comskip \
     vlc-bin vlc-plugin-base \
     && apt-get clean && rm -rf /var/lib/apt/lists/*

From 89a689c5a0f937d15c0347b25d0b96d176e6530e Mon Sep 17 00:00:00 2001
From: SergeantPanda <chester.cullen@gmail.com>
Date: Thu, 28 May 2026 14:36:02 -0500
Subject: [PATCH 20/35] changelog: Update changelog for Docker PR.

---
 CHANGELOG.md | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 7cef64db..fb1d03bc 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -7,6 +7,11 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+### Changed
+
+- **Docker base image now uses a multi-stage build.** The builder stage installs compilers and dev headers (`gcc`, `g++`, `gfortran`, `build-essential`, `libopenblas-dev`, `libpcre3-dev`, `python3.13-dev`, `ninja-build`) to create the virtual environment and compile the legacy NumPy wheel (cpu-baseline=none for old hardware). The final runtime image starts from the same ffmpeg base, copies only the prebuilt venv and wheel from the builder, and installs only the runtime libraries needed at runtime - eliminating compiler binaries from production containers and reducing final image size. — Thanks [@kensac](https://github.com/kensac)
+- **`libpq-dev` removed from both build and runtime stages.** The project uses `psycopg2-binary`, which bundles its own statically linked copy of libpq inside the wheel. No system libpq headers or shared library are needed at build or runtime.
+
 ### Performance
 
 - **Reduced Redis round-trips on the Stats page channel status endpoint.** `get_basic_channel_info` was making up to 6 individual `HGET` calls per connected client plus a redundant `HGET` for `TOTAL_BYTES` (already present in the preceding `HGETALL` result). Client metadata is now fetched with a single `HMGET` per client, and `TOTAL_BYTES` is read from the already-fetched hash. Under load with many active streams this significantly reduces the time each uWSGI worker holds the GIL servicing the stats endpoint, reducing the chance of concurrent requests from other pages timing out with a 503. The same `HGET`-to-`HMGET` consolidation was applied to `stream_ts` and `get_user_active_connections`. The Stats page frontend was also fixed to fire the initial fetch only once on mount (previously two `useEffect` hooks both triggered an immediate fetch on load). — Thanks [@JCBird1012](https://github.com/JCBird1012)

From 2f31a17be37d769509c3df8db9249d24c04b42db Mon Sep 17 00:00:00 2001
From: SergeantPanda <chester.cullen@gmail.com>
Date: Thu, 28 May 2026 15:39:46 -0500
Subject: [PATCH 21/35] changelog: Update changelog for plugin page pr.

---
 CHANGELOG.md | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index fb1d03bc..406e7b59 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -7,6 +7,10 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+### Added
+
+- **Configurable per-page count and sticky pagination footer in Plugin Browse.** The pagination controls now live in a fixed footer bar at the bottom of the page. A page-size selector (9 / 18 / 27 / 36) sits alongside the pagination widget and an item range readout (`X to Y of Z`). The selected page size is persisted in `localStorage` so it survives page navigations. — Thanks [@sethwv](https://github.com/sethwv)
+
 ### Changed
 
 - **Docker base image now uses a multi-stage build.** The builder stage installs compilers and dev headers (`gcc`, `g++`, `gfortran`, `build-essential`, `libopenblas-dev`, `libpcre3-dev`, `python3.13-dev`, `ninja-build`) to create the virtual environment and compile the legacy NumPy wheel (cpu-baseline=none for old hardware). The final runtime image starts from the same ffmpeg base, copies only the prebuilt venv and wheel from the builder, and installs only the runtime libraries needed at runtime - eliminating compiler binaries from production containers and reducing final image size. — Thanks [@kensac](https://github.com/kensac)
@@ -18,6 +22,8 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Fixed
 
+- **Plugins with available updates were not sorting to the top of the Plugin Browse list.** The sort weight function previously treated `update_available` plugins the same as any other installed plugin, leaving them buried. They now receive the highest sort priority (below the search/filter results header) so users can spot pending updates immediately. — Thanks [@sethwv](https://github.com/sethwv)
+- **Disabled state on the size-labeled install button rendered with a warm tint instead of appearing clearly disabled.** The CSS filter was `brightness(0.65) saturate(0.7)`, which left a faint color cast. It is now `grayscale(1) brightness(0.55)`, matching the standard disabled appearance. — Thanks [@sethwv](https://github.com/sethwv)
 - **Restoring a backup from an older version left the database with missing schema.** The restore task ran `pg_restore` which replaced the entire database (including the `django_migrations` table) but did not run migrations afterward. If the backup predated a schema migration, the restored database was missing tables and columns added by those migrations, causing 500 errors on every API call. `migrate --noinput` now runs automatically after every restore. The success notification also now recommends a restart to clear stale service state.
 
 ## [0.25.1] - 2026-05-23

From d6f837238f4a1242d7f5c3c8c7f0b40d4e3d3601 Mon Sep 17 00:00:00 2001
From: SergeantPanda <chester.cullen@gmail.com>
Date: Thu, 28 May 2026 19:27:11 -0500
Subject: [PATCH 22/35] Enhancement: Update psycopg from 2 to 3, remove
 psycogreen as it's no longer needed with psycopg3.

---
 pyproject.toml | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/pyproject.toml b/pyproject.toml
index fe7112f3..a003bc5c 100644
--- a/pyproject.toml
+++ b/pyproject.toml
@@ -7,7 +7,7 @@ requires-python = ">=3.13"
 dynamic = ["version"]
 dependencies = [
     "Django==6.0.5",
-    "psycopg2-binary==2.9.12",
+    "psycopg[binary]",
     "celery[redis]==5.6.3",
     "djangorestframework==3.17.1",
     "requests==2.33.1",
@@ -18,7 +18,6 @@ dependencies = [
     "python-vlc",
     "yt-dlp",
     "gevent==26.4.0",
-    "psycogreen",
     "django-db-geventpool",
     "daphne",
     "uwsgi",

From 80b72d8cfa93b9e430e8ec1317f9064a797dde33 Mon Sep 17 00:00:00 2001
From: SergeantPanda <chester.cullen@gmail.com>
Date: Thu, 28 May 2026 19:27:52 -0500
Subject: [PATCH 23/35] Enhancement: Update psycopg2 to 3.

---
 core/management/commands/dropdb.py |  7 +++---
 core/tests.py                      |  8 ++++---
 dispatcharr/gevent_patch.py        | 35 +++++++++---------------------
 docker/uwsgi.debug.ini             |  4 ++--
 docker/uwsgi.dev.ini               |  4 ++--
 docker/uwsgi.ini                   |  4 ++--
 docker/uwsgi.modular.ini           |  4 ++--
 7 files changed, 26 insertions(+), 40 deletions(-)

diff --git a/core/management/commands/dropdb.py b/core/management/commands/dropdb.py
index d61b9891..09455366 100644
--- a/core/management/commands/dropdb.py
+++ b/core/management/commands/dropdb.py
@@ -1,6 +1,6 @@
 import sys
-import psycopg2
-from psycopg2 import sql
+import psycopg
+from psycopg import sql
 from django.core.management.base import BaseCommand
 from django.conf import settings
 from django.db import connection
@@ -38,8 +38,7 @@ class Command(BaseCommand):
         maintenance_db = 'postgres'
         try:
             self.stdout.write("Connecting to maintenance database...")
-            conn = psycopg2.connect(dbname=maintenance_db, user=user, password=password, host=host, port=port, **ssl_kwargs)
-            conn.autocommit = True
+            conn = psycopg.connect(dbname=maintenance_db, user=user, password=password, host=host, port=port, autocommit=True, **ssl_kwargs)
             cur = conn.cursor()
             self.stdout.write(f"Dropping database '{db_name}'...")
             cur.execute(sql.SQL("DROP DATABASE IF EXISTS {}").format(sql.Identifier(db_name)))
diff --git a/core/tests.py b/core/tests.py
index b4770f92..9c758e76 100644
--- a/core/tests.py
+++ b/core/tests.py
@@ -153,7 +153,7 @@ class EpgIgnoreListsTest(TestCase):
 
 
 class DropDBCommandTlsTest(TestCase):
-    """Verify dropdb management command passes TLS parameters to psycopg2."""
+    """Verify dropdb management command passes TLS parameters to psycopg."""
     databases = []
 
     _DB_WITH_TLS = {
@@ -184,7 +184,7 @@ class DropDBCommandTlsTest(TestCase):
         }
     }
 
-    @patch('core.management.commands.dropdb.psycopg2.connect')
+    @patch('core.management.commands.dropdb.psycopg.connect')
     @patch('core.management.commands.dropdb.connection')
     @patch('builtins.input', return_value='yes')
     def test_dropdb_passes_ssl_kwargs_when_tls_enabled(self, _inp, _conn, mock_connect):
@@ -199,13 +199,14 @@ class DropDBCommandTlsTest(TestCase):
         mock_connect.assert_called_once_with(
             dbname='postgres', user='testuser', password='testpass',
             host='localhost', port=5432,
+            autocommit=True,
             sslmode='verify-full',
             sslrootcert='/certs/ca.crt',
             sslcert='/certs/client.crt',
             sslkey='/certs/client.key',
         )
 
-    @patch('core.management.commands.dropdb.psycopg2.connect')
+    @patch('core.management.commands.dropdb.psycopg.connect')
     @patch('core.management.commands.dropdb.connection')
     @patch('builtins.input', return_value='yes')
     def test_dropdb_no_ssl_kwargs_when_tls_disabled(self, _inp, _conn, mock_connect):
@@ -220,4 +221,5 @@ class DropDBCommandTlsTest(TestCase):
         mock_connect.assert_called_once_with(
             dbname='postgres', user='testuser', password='testpass',
             host='localhost', port=5432,
+            autocommit=True,
         )
diff --git a/dispatcharr/gevent_patch.py b/dispatcharr/gevent_patch.py
index 86ac92ca..1c9f9727 100644
--- a/dispatcharr/gevent_patch.py
+++ b/dispatcharr/gevent_patch.py
@@ -1,24 +1,20 @@
 """
 Loaded via uWSGI's `import = dispatcharr.gevent_patch` directive.
 
-Two things happen here:
+gevent stdlib monkey-patching - replaces blocking socket/threading/os
+primitives with gevent-cooperative versions. `gevent-early-monkey-patch = true`
+in the ini should already have done this; calling it again is a safe no-op if
+it did, and a necessary fallback if it didn't (e.g. older uWSGI build).
 
-1. gevent stdlib monkey-patching - replaces blocking socket/threading/os
-   primitives with gevent-cooperative versions. `gevent-early-monkey-patch = true`
-   in the ini should already have done this; calling it again is a safe no-op if
-   it did, and a necessary fallback if it didn't (e.g. older uWSGI build).
-
-2. psycogreen - installs a wait callback on psycopg2 so libpq yields to the
-   gevent hub during I/O instead of blocking the OS thread.
-
-Without (1), `async_to_sync(channel_layer.group_send)` in send_websocket_update
+Without this, `async_to_sync(channel_layer.group_send)` in send_websocket_update
 calls epoll_wait() directly, which blocks the OS thread and freezes all greenlets
-on the worker until the call returns. With (1), select.epoll is replaced by
-monkey-patching, which breaks asyncio event loop creation in threadpool threads.
+on the worker until the call returns. With monkey-patching, select.epoll is
+replaced, which breaks asyncio event loop creation in threadpool threads.
 send_websocket_update therefore uses a synchronous Redis path in gevent workers
 instead of asyncio - see _gevent_ws_send() in core/utils.py.
 
-Without (2), psycopg2 network calls pin the worker during slow/stalled queries.
+psycopg3 uses Python's socket layer for I/O, so monkey.patch_all() provides
+gevent compatibility without any additional driver patching.
 
 Celery and Daphne run in separate daemon processes and do not load this module.
 
@@ -40,15 +36,4 @@ if not monkey.is_module_patched("socket"):
 else:
     print("[gevent_patch] gevent stdlib monkey-patching already active.", flush=True)
 
-try:
-    from psycogreen.gevent import patch_psycopg
-    patch_psycopg()
-    print("[gevent_patch] psycogreen: psycopg2 patched for gevent.", flush=True)
-except ImportError:
-    print(
-        "[gevent_patch] WARNING: psycogreen not installed - "
-        "psycopg2 will block the gevent hub during DB I/O. "
-        "Run: uv pip install psycogreen",
-        file=sys.stderr,
-        flush=True,
-    )
+
diff --git a/docker/uwsgi.debug.ini b/docker/uwsgi.debug.ini
index 9a65db66..d5f577b3 100644
--- a/docker/uwsgi.debug.ini
+++ b/docker/uwsgi.debug.ini
@@ -42,8 +42,8 @@ gevent = 100
 
 # Patch the stdlib (socket, threading, time, ...) before any app code
 # loads so blocking calls yield to the gevent hub. Without this, a single
-# blocking psycopg2 / requests / DNS call freezes every greenlet on the
-# worker. The companion module greens psycopg2 specifically.
+# blocking requests / DNS call freezes every greenlet on the
+# worker. psycopg3 uses Python's socket layer, so no additional patching is needed.
 gevent-early-monkey-patch = true
 import = dispatcharr.gevent_patch
 
diff --git a/docker/uwsgi.dev.ini b/docker/uwsgi.dev.ini
index 852a5114..a481952d 100644
--- a/docker/uwsgi.dev.ini
+++ b/docker/uwsgi.dev.ini
@@ -45,8 +45,8 @@ gevent = 100
 
 # Patch the stdlib (socket, threading, time, ...) before any app code
 # loads so blocking calls yield to the gevent hub. Without this, a single
-# blocking psycopg2 / requests / DNS call freezes every greenlet on the
-# worker. The companion module greens psycopg2 specifically.
+# blocking requests / DNS call freezes every greenlet on the
+# worker. psycopg3 uses Python's socket layer, so no additional patching is needed.
 gevent-early-monkey-patch = true
 import = dispatcharr.gevent_patch
 
diff --git a/docker/uwsgi.ini b/docker/uwsgi.ini
index 76aaebdf..8e8f08dc 100644
--- a/docker/uwsgi.ini
+++ b/docker/uwsgi.ini
@@ -48,8 +48,8 @@ gevent = 400  # Each unused greenlet costs ~2-4KB of memory
 
 # Patch the stdlib (socket, threading, time, ...) before any app code
 # loads so blocking calls yield to the gevent hub. Without this, a single
-# blocking psycopg2 / requests / DNS call freezes every greenlet on the
-# worker. The companion module greens psycopg2 specifically.
+# blocking requests / DNS call freezes every greenlet on the
+# worker. psycopg3 uses Python's socket layer, so no additional patching is needed.
 gevent-early-monkey-patch = true
 import = dispatcharr.gevent_patch
 
diff --git a/docker/uwsgi.modular.ini b/docker/uwsgi.modular.ini
index 290081b0..7124b10d 100644
--- a/docker/uwsgi.modular.ini
+++ b/docker/uwsgi.modular.ini
@@ -44,8 +44,8 @@ gevent = 400  # Each unused greenlet costs ~2-4KB of memory
 
 # Patch the stdlib (socket, threading, time, ...) before any app code
 # loads so blocking calls yield to the gevent hub. Without this, a single
-# blocking psycopg2 / requests / DNS call freezes every greenlet on the
-# worker. The companion module greens psycopg2 specifically.
+# blocking requests / DNS call freezes every greenlet on the
+# worker. psycopg3 uses Python's socket layer, so no additional patching is needed.
 gevent-early-monkey-patch = true
 import = dispatcharr.gevent_patch
 

From a2656184e844f147ffe59c0f58a00203d86619b8 Mon Sep 17 00:00:00 2001
From: SergeantPanda <chester.cullen@gmail.com>
Date: Thu, 28 May 2026 19:31:50 -0500
Subject: [PATCH 24/35] perf/fix: migrate DB driver to psycopg3, fix pool
 settings
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Switch engine to postgresql_psycopg3 (PR had wrong engine name,
  and we're migrating from psycopg2 to psycopg3 as part of this work)
- Set CONN_MAX_AGE=0 (required by geventpool; PR had None)
- Reduce MAX_CONNS 20→8, REUSE_CONNS 10→3 to avoid exhausting
  pg max_connections across 4 uWSGI workers + Celery
- Add pool=False to explicitly disable Django's native psycopg3 pool
---
 dispatcharr/settings.py | 9 +++++----
 1 file changed, 5 insertions(+), 4 deletions(-)

diff --git a/dispatcharr/settings.py b/dispatcharr/settings.py
index 1b103ccf..6a6856db 100644
--- a/dispatcharr/settings.py
+++ b/dispatcharr/settings.py
@@ -111,7 +111,7 @@ XC_PROFILE_REFRESH_DELAY = float(os.environ.get('XC_PROFILE_REFRESH_DELAY', '2.5
 
 # Database optimization settings
 DATABASE_STATEMENT_TIMEOUT = 300  # Seconds before timing out long-running queries
-DATABASE_CONN_MAX_AGE = None  # Managed by django-db-geventpool; None = persistent pool connections
+DATABASE_CONN_MAX_AGE = 0  # geventpool intercepts close(); pool handles reuse
 
 # Disable atomic requests for performance-sensitive views
 ATOMIC_REQUESTS = False
@@ -221,7 +221,7 @@ if os.getenv("DB_ENGINE", None) == "sqlite":
 else:
     DATABASES = {
         "default": {
-            "ENGINE": "django_db_geventpool.backends.postgresql",
+            "ENGINE": "django_db_geventpool.backends.postgresql_psycopg3",
             "NAME": os.environ.get("POSTGRES_DB", "dispatcharr"),
             "USER": os.environ.get("POSTGRES_USER", "dispatch"),
             "PASSWORD": os.environ.get("POSTGRES_PASSWORD", "secret"),
@@ -229,8 +229,9 @@ else:
             "PORT": int(os.environ.get("POSTGRES_PORT", 5432)),
             "CONN_MAX_AGE": DATABASE_CONN_MAX_AGE,
             "OPTIONS": {
-                "MAX_CONNS": 20,   # Per-worker pool size; 4 workers × 20 = 80 total < pg max_connections=100
-                "REUSE_CONNS": 10, # Connections to keep warm between requests
+                "MAX_CONNS": 8,   # Per-worker pool size; 4 workers × 8 = 32 total < pg max_connections=100
+                "REUSE_CONNS": 3, # Connections to keep warm between requests
+                "pool": False,    # Disable Django's native psycopg3 pool; geventpool manages connections
             },
         }
     }

From f6acbb0c987c53a0c41285f4e44feba1f0c17c16 Mon Sep 17 00:00:00 2001
From: SergeantPanda <chester.cullen@gmail.com>
Date: Thu, 28 May 2026 19:42:06 -0500
Subject: [PATCH 25/35] changelog: Update changelog for connection pooling pr.

---
 CHANGELOG.md | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 406e7b59..0fad82a7 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -14,10 +14,12 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ### Changed
 
 - **Docker base image now uses a multi-stage build.** The builder stage installs compilers and dev headers (`gcc`, `g++`, `gfortran`, `build-essential`, `libopenblas-dev`, `libpcre3-dev`, `python3.13-dev`, `ninja-build`) to create the virtual environment and compile the legacy NumPy wheel (cpu-baseline=none for old hardware). The final runtime image starts from the same ffmpeg base, copies only the prebuilt venv and wheel from the builder, and installs only the runtime libraries needed at runtime - eliminating compiler binaries from production containers and reducing final image size. — Thanks [@kensac](https://github.com/kensac)
-- **`libpq-dev` removed from both build and runtime stages.** The project uses `psycopg2-binary`, which bundles its own statically linked copy of libpq inside the wheel. No system libpq headers or shared library are needed at build or runtime.
+- **`libpq-dev` removed from both build and runtime stages.** The project uses `psycopg[binary]` (psycopg3), which bundles its own statically linked copy of libpq inside the wheel. No system libpq headers or shared library are needed at build or runtime.
+- **Database driver upgraded from `psycopg2` to `psycopg3` (`psycopg[binary]`).** psycopg3 rewrote its network I/O layer in Python, so `gevent`'s `monkey.patch_all()` makes it gevent-cooperative without any additional patching. The `psycogreen` dependency and its driver-patching block in `gevent_patch.py` have been removed. Django's native psycopg3 connection pool is explicitly disabled (`pool: False`) so `django-db-geventpool` remains in sole control of connection lifecycle. The `dropdb` management command was updated to the `psycopg` API (`psycopg.connect`, `psycopg.sql`).
 
 ### Performance
 
+- **Database connections are now managed by a persistent per-worker pool.** Previously each request opened a fresh TCP connection to PostgreSQL, paid a full authentication handshake, and closed the connection at request end. `django-db-geventpool` now maintains a pool of warm connections per uWSGI worker; requests borrow a connection and return it when done, eliminating connection-setup overhead on every request. Pool size is bounded (`MAX_CONNS=8` per worker, `REUSE_CONNS=3` warm connections kept idle) to stay comfortably within PostgreSQL's default `max_connections=100` across all uWSGI workers, Celery workers, and Daphne. — Thanks [@JCBird1012](https://github.com/JCBird1012)
 - **Reduced Redis round-trips on the Stats page channel status endpoint.** `get_basic_channel_info` was making up to 6 individual `HGET` calls per connected client plus a redundant `HGET` for `TOTAL_BYTES` (already present in the preceding `HGETALL` result). Client metadata is now fetched with a single `HMGET` per client, and `TOTAL_BYTES` is read from the already-fetched hash. Under load with many active streams this significantly reduces the time each uWSGI worker holds the GIL servicing the stats endpoint, reducing the chance of concurrent requests from other pages timing out with a 503. The same `HGET`-to-`HMGET` consolidation was applied to `stream_ts` and `get_user_active_connections`. The Stats page frontend was also fixed to fire the initial fetch only once on mount (previously two `useEffect` hooks both triggered an immediate fetch on load). — Thanks [@JCBird1012](https://github.com/JCBird1012)
 
 ### Fixed

From cc597189975be4f5f5c61de2cbe0c1669c7f4d4b Mon Sep 17 00:00:00 2001
From: Nick Sandstrom <32273437+nick4810@users.noreply.github.com>
Date: Thu, 28 May 2026 18:44:20 -0700
Subject: [PATCH 26/35] Small cleanup

---
 frontend/src/components/forms/User.jsx          |  2 +-
 frontend/src/pages/__tests__/guideUtils.test.js | 12 ------------
 2 files changed, 1 insertion(+), 13 deletions(-)

diff --git a/frontend/src/components/forms/User.jsx b/frontend/src/components/forms/User.jsx
index 3ca08e1a..8c908b48 100644
--- a/frontend/src/components/forms/User.jsx
+++ b/frontend/src/components/forms/User.jsx
@@ -137,7 +137,7 @@ const User = ({ user = null, isOpen, onClose }) => {
       const newKey = resp && (resp.key || resp.raw_key);
       if (newKey) {
         setGeneratedKey(newKey);
-        console.log(setUserAPIKey(newKey));
+        setUserAPIKey(newKey);
       }
     } catch {
       // API shows notifications
diff --git a/frontend/src/pages/__tests__/guideUtils.test.js b/frontend/src/pages/__tests__/guideUtils.test.js
index 2cd321ca..2ca149c3 100644
--- a/frontend/src/pages/__tests__/guideUtils.test.js
+++ b/frontend/src/pages/__tests__/guideUtils.test.js
@@ -801,18 +801,6 @@ describe('guideUtils', () => {
     });
   });
 
-  // ── evaluateSeriesRule ────────────────────────────────────────────────────
-
-  describe('evaluateSeriesRule', () => {
-    it('should evaluate series rule via API', async () => {
-      vi.mocked(API.evaluateSeriesRules).mockResolvedValue({});
-
-      await guideUtils.evaluateSeriesRulesByTvgId('tvg-1');
-
-      expect(API.evaluateSeriesRules).toHaveBeenCalledWith('tvg-1');
-    });
-  });
-
   // ── calculateLeftScrollPosition ───────────────────────────────────────────
 
   describe('calculateLeftScrollPosition', () => {

From 5eeca5fc94665ec77932bd8e2cbf0c57486acc6a Mon Sep 17 00:00:00 2001
From: Nick Sandstrom <32273437+nick4810@users.noreply.github.com>
Date: Thu, 28 May 2026 18:45:32 -0700
Subject: [PATCH 27/35] Fixed test behavior

---
 .../__tests__/RecurringRuleModal.test.jsx     | 20 +++++++++++++++++--
 1 file changed, 18 insertions(+), 2 deletions(-)

diff --git a/frontend/src/components/forms/__tests__/RecurringRuleModal.test.jsx b/frontend/src/components/forms/__tests__/RecurringRuleModal.test.jsx
index 308a415b..72bc91fd 100644
--- a/frontend/src/components/forms/__tests__/RecurringRuleModal.test.jsx
+++ b/frontend/src/components/forms/__tests__/RecurringRuleModal.test.jsx
@@ -583,9 +583,25 @@ describe('RecurringRuleModal', () => {
     });
 
     it('calls form.setValues with getFormDefaults result', () => {
-      const formMock = vi.mocked(useForm).mock.results[0]?.value;
+      const expectedDefaults = {
+        channel_id: 'ch-1',
+        rule_name: 'Morning News',
+        days_of_week: ['mon', 'tue'],
+        start_date: new Date('2024-01-01'),
+        end_date: null,
+        start_time: '08:00',
+        end_time: '09:00',
+        enabled: true,
+      };
+      vi.mocked(RecurringRuleModalUtils.getFormDefaults).mockReturnValue(
+        expectedDefaults
+      );
+
       render(<RecurringRuleModal {...defaultProps()} />);
-      expect(formMock?.setValues ?? vi.fn()).toBeDefined();
+
+      // form instance is created during render — read after
+      const formMock = vi.mocked(useForm).mock.results[0].value;
+      expect(formMock.setValues).toHaveBeenCalledWith(expectedDefaults);
     });
   });
 

From 714f1b5cf5f4c1cc12b5dea35185220e654af8ae Mon Sep 17 00:00:00 2001
From: Nick Sandstrom <32273437+nick4810@users.noreply.github.com>
Date: Thu, 28 May 2026 18:46:40 -0700
Subject: [PATCH 28/35] Updated rendering behavior

---
 .../forms/RecordingDetailsModal.jsx           | 182 ++++++++++--------
 1 file changed, 100 insertions(+), 82 deletions(-)

diff --git a/frontend/src/components/forms/RecordingDetailsModal.jsx b/frontend/src/components/forms/RecordingDetailsModal.jsx
index 43351765..ae2aabe1 100644
--- a/frontend/src/components/forms/RecordingDetailsModal.jsx
+++ b/frontend/src/components/forms/RecordingDetailsModal.jsx
@@ -43,6 +43,90 @@ import {
 } from '../../utils/forms/RecordingDetailsModalUtils.js';
 import { showNotification } from '../../utils/notificationUtils.js';
 
+const EpisodeRow = ({
+  rec,
+  recording,
+  channel,
+  channelsById,
+  livePosterUrl,
+  toUserTime,
+  dateformat,
+  timeformat,
+  onOpenChild,
+}) => {
+  const cp = rec.custom_properties || {};
+  const pr = cp.program || {};
+  const start = toUserTime(rec.start_time);
+  const end = toUserTime(rec.end_time);
+  const season = cp.season ?? pr?.custom_properties?.season;
+  const episode = cp.episode ?? pr?.custom_properties?.episode;
+  const onscreen =
+    cp.onscreen_episode ?? pr?.custom_properties?.onscreen_episode;
+  const se = getSeasonLabel(season, episode, onscreen);
+  const posterLogoId = cp.poster_logo_id;
+  const purl = getPosterUrl(posterLogoId, cp, livePosterUrl);
+  const epChannel =
+    channelsById[rec.channel] ||
+    (rec.channel === recording?.channel ? channel : null);
+
+  const onRemove = async (e) => {
+    e?.stopPropagation?.();
+    try {
+      await deleteRecordingById(rec.id);
+    } catch (error) {
+      console.error('Failed to delete upcoming recording', error);
+    }
+  };
+
+  return (
+    <Card
+      withBorder
+      radius="md"
+      padding="sm"
+      style={{ backgroundColor: '#27272A', cursor: 'pointer' }}
+      onClick={() => onOpenChild(rec)}
+    >
+      <Flex gap="sm" align="center">
+        <Image
+          src={purl}
+          w={64}
+          h={64}
+          fit="contain"
+          radius="sm"
+          alt={pr.title}
+          fallbackSrc={getChannelLogoUrl(epChannel) || defaultLogo}
+        />
+        <Stack gap={4} flex={1}>
+          <Group justify="space-between">
+            <Text
+              fw={600}
+              size="sm"
+              lineClamp={1}
+              title={pr.sub_title || pr.title}
+            >
+              {pr.sub_title || pr.title}
+            </Text>
+            {se && (
+              <Badge color="gray" variant="light">
+                {se}
+              </Badge>
+            )}
+          </Group>
+          <Text size="xs">
+            {format(start, `${dateformat}, YYYY ${timeformat}`)} –{' '}
+            {format(end, timeformat)}
+          </Text>
+        </Stack>
+        <Group gap={6}>
+          <Button size="xs" color="red" variant="light" onClick={onRemove}>
+            Remove
+          </Button>
+        </Group>
+      </Flex>
+    </Card>
+  );
+};
+
 const RecordingDetailsModal = ({
   opened,
   onClose,
@@ -280,86 +364,6 @@ const RecordingDetailsModal = ({
 
   if (!recording) return null;
 
-  const EpisodeRow = ({ rec }) => {
-    const cp = rec.custom_properties || {};
-    const pr = cp.program || {};
-    const start = toUserTime(rec.start_time);
-    const end = toUserTime(rec.end_time);
-    const season = cp.season ?? pr?.custom_properties?.season;
-    const episode = cp.episode ?? pr?.custom_properties?.episode;
-    const onscreen =
-      cp.onscreen_episode ?? pr?.custom_properties?.onscreen_episode;
-    const se = getSeasonLabel(season, episode, onscreen);
-    const posterLogoId = cp.poster_logo_id;
-    const purl = getPosterUrl(posterLogoId, cp, livePosterUrl);
-    const epChannel =
-      channelsById[rec.channel] ||
-      (rec.channel === recording?.channel ? channel : null);
-
-    const onRemove = async (e) => {
-      e?.stopPropagation?.();
-      try {
-        await deleteRecordingById(rec.id);
-      } catch (error) {
-        console.error('Failed to delete upcoming recording', error);
-      }
-      // recording_cancelled WS event triggers the debounced fetchRecordings()
-    };
-
-    const handleOnMainCardClick = () => {
-      setChildRec(rec);
-      setChildOpen(true);
-    };
-
-    return (
-      <Card
-        withBorder
-        radius="md"
-        padding="sm"
-        style={{ backgroundColor: '#27272A', cursor: 'pointer' }}
-        onClick={handleOnMainCardClick}
-      >
-        <Flex gap="sm" align="center">
-          <Image
-            src={purl}
-            w={64}
-            h={64}
-            fit="contain"
-            radius="sm"
-            alt={pr.title || recordingName}
-            fallbackSrc={getChannelLogoUrl(epChannel) || defaultLogo}
-          />
-          <Stack gap={4} flex={1}>
-            <Group justify="space-between">
-              <Text
-                fw={600}
-                size="sm"
-                lineClamp={1}
-                title={pr.sub_title || pr.title}
-              >
-                {pr.sub_title || pr.title}
-              </Text>
-              {se && (
-                <Badge color="gray" variant="light">
-                  {se}
-                </Badge>
-              )}
-            </Group>
-            <Text size="xs">
-              {format(start, `${dateformat}, YYYY ${timeformat}`)} –{' '}
-              {format(end, timeformat)}
-            </Text>
-          </Stack>
-          <Group gap={6}>
-            <Button size="xs" color="red" variant="light" onClick={onRemove}>
-              Remove
-            </Button>
-          </Group>
-        </Flex>
-      </Card>
-    );
-  };
-
   const WatchLive = () => {
     return (
       <Button
@@ -416,7 +420,21 @@ const RecordingDetailsModal = ({
           </Text>
         )}
         {upcomingEpisodes.map((ep) => (
-          <EpisodeRow key={`ep-${ep.id}`} rec={ep} />
+          <EpisodeRow
+            key={`ep-${ep.id}`}
+            rec={ep}
+            recording={recording}
+            channel={channel}
+            channelsById={channelsById}
+            livePosterUrl={livePosterUrl}
+            toUserTime={toUserTime}
+            dateformat={dateformat}
+            timeformat={timeformat}
+            onOpenChild={(rec) => {
+              setChildRec(rec);
+              setChildOpen(true);
+            }}
+          />
         ))}
         {childOpen && childRec && (
           <RecordingDetailsModal
@@ -601,7 +619,7 @@ const RecordingDetailsModal = ({
         title: { color: 'white' },
       }}
     >
-      {isSeriesGroup ? <Series /> : <Movie />}
+      {isSeriesGroup ? Series() : Movie()}
     </Modal>
   );
 };

From 14c54b60f159a0c5fa18d4ec877f559fb276102c Mon Sep 17 00:00:00 2001
From: nemes <jose_mx_15@hotmail.com>
Date: Fri, 29 May 2026 13:20:35 +0200
Subject: [PATCH 29/35] fix(frontend): apply output_profile and output_format
 in all live stream player calls

getShowVideoUrl was building raw proxy URLs without calling buildLiveStreamUrl,
so the web-player output profile preference stored in localStorage was silently
ignored when starting a live stream from the TV Guide, Program Detail modal,
DVR page, Recording Details modal, and Recording Card.

Fix: import buildLiveStreamUrl in RecordingCardUtils and call it at the end of
getShowVideoUrl so every caller inherits the correct output_format=mpegts
param and any configured output_profile automatically.

Fixes #1304
---
 .../src/utils/cards/RecordingCardUtils.js     | 42 ++++++++-----------
 1 file changed, 18 insertions(+), 24 deletions(-)

diff --git a/frontend/src/utils/cards/RecordingCardUtils.js b/frontend/src/utils/cards/RecordingCardUtils.js
index 4920c8ba..68b0b3ce 100644
--- a/frontend/src/utils/cards/RecordingCardUtils.js
+++ b/frontend/src/utils/cards/RecordingCardUtils.js
@@ -1,30 +1,24 @@
-import API from '../../api.js';
-import useChannelsStore from '../../store/channels.jsx';
-import defaultLogo from '../../images/logo.png';
-import { formatSeasonEpisode } from '../guideUtils.js';
+import API from "../../api.js";
+import useChannelsStore from "../../store/channels.jsx";
+import defaultLogo from "../../images/logo.png";
+import { formatSeasonEpisode } from "../guideUtils.js";
+import { buildLiveStreamUrl } from "../components/FloatingVideoUtils.js";
 
 export const removeRecording = (id) => {
-  // Optimistically remove immediately from UI
   try {
     useChannelsStore.getState().removeRecording(id);
   } catch (error) {
-    console.error('Failed to optimistically remove recording', error);
+    console.error("Failed to optimistically remove recording", error);
   }
-  // Fire-and-forget server delete; websocket will keep others in sync
   API.deleteRecording(id).catch(() => {
-    // On failure, fallback to refetch to restore state
     try {
       useChannelsStore.getState().fetchRecordings();
     } catch (error) {
-      console.error('Failed to refresh recordings after delete', error);
+      console.error("Failed to refresh recordings after delete", error);
     }
   });
 };
 
-/**
- * Resolve the channel logo cache URL from either a full channel object
- * (has logo.cache_url) or a summary object (has logo_id integer).
- */
 export const getChannelLogoUrl = (channel) => {
   if (!channel) return null;
   let url = channel.logo_id
@@ -32,8 +26,8 @@ export const getChannelLogoUrl = (channel) => {
     : channel.logo?.cache_url || null;
   if (
     url &&
-    url.startsWith('/') &&
-    typeof import.meta !== 'undefined' &&
+    url.startsWith("/") &&
+    typeof import.meta !== "undefined" &&
     import.meta.env &&
     import.meta.env.DEV
   ) {
@@ -48,10 +42,10 @@ export const getPosterUrl = (posterLogoId, customProperties, posterUrl) => {
     : customProperties?.poster_url || posterUrl || null;
   if (
     purl &&
-    typeof import.meta !== 'undefined' &&
+    typeof import.meta !== "undefined" &&
     import.meta.env &&
     import.meta.env.DEV &&
-    purl.startsWith('/')
+    purl.startsWith("/")
   ) {
     purl = `${window.location.protocol}//${window.location.hostname}:5656${purl}`;
   }
@@ -60,10 +54,10 @@ export const getPosterUrl = (posterLogoId, customProperties, posterUrl) => {
 
 export const getShowVideoUrl = (channel, env_mode) => {
   let url = `/proxy/ts/stream/${channel.uuid}`;
-  if (env_mode === 'dev') {
+  if (env_mode === "dev") {
     url = `${window.location.protocol}//${window.location.hostname}:5656${url}`;
   }
-  return url;
+  return buildLiveStreamUrl(url);
 };
 
 export const runComSkip = async (recording) => {
@@ -86,23 +80,23 @@ export const deleteSeriesAndRule = async (seriesInfo) => {
   const { tvg_id, title } = seriesInfo;
   try {
     await API.bulkRemoveSeriesRecordings({
-      tvg_id: tvg_id || '',
+      tvg_id: tvg_id || "",
       title,
-      scope: 'title',
+      scope: "title",
     });
   } catch (error) {
-    console.error('Failed to remove series recordings', error);
+    console.error("Failed to remove series recordings", error);
   }
   try {
     await API.deleteSeriesRule(tvg_id, title);
   } catch (error) {
-    console.error('Failed to delete series rule', error);
+    console.error("Failed to delete series rule", error);
   }
 };
 
 export const getRecordingUrl = (customProps, env_mode) => {
   let fileUrl = customProps?.file_url || customProps?.output_file_url;
-  if (fileUrl && env_mode === 'dev' && fileUrl.startsWith('/')) {
+  if (fileUrl && env_mode === "dev" && fileUrl.startsWith("/")) {
     fileUrl = `${window.location.protocol}//${window.location.hostname}:5656${fileUrl}`;
   }
   return fileUrl;

From 17ce5323260345ec080182e13de4249d38d4a7e1 Mon Sep 17 00:00:00 2001
From: nemes <jose_mx_15@hotmail.com>
Date: Fri, 29 May 2026 13:23:22 +0200
Subject: [PATCH 30/35] fix(frontend): update getShowVideoUrl tests to verify
 output_format and output_profile

---
 .../__tests__/RecordingCardUtils.test.js      | 380 ++----------------
 1 file changed, 33 insertions(+), 347 deletions(-)

diff --git a/frontend/src/utils/cards/__tests__/RecordingCardUtils.test.js b/frontend/src/utils/cards/__tests__/RecordingCardUtils.test.js
index 2af98a1c..d0b843ee 100644
--- a/frontend/src/utils/cards/__tests__/RecordingCardUtils.test.js
+++ b/frontend/src/utils/cards/__tests__/RecordingCardUtils.test.js
@@ -1,14 +1,7 @@
 import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest';
 import {
-  removeRecording,
-  getPosterUrl,
-  getShowVideoUrl,
-  runComSkip,
-  deleteRecordingById,
-  deleteSeriesAndRule,
-  getRecordingUrl,
-  getSeasonLabel,
-  getSeriesInfo,
+  removeRecording, getPosterUrl, getShowVideoUrl, runComSkip,
+  deleteRecordingById, deleteSeriesAndRule, getRecordingUrl, getSeasonLabel, getSeriesInfo,
 } from '../RecordingCardUtils';
 import API from '../../../api';
 import useChannelsStore from '../../../store/channels';
@@ -17,160 +10,50 @@ vi.mock('../../../api');
 vi.mock('../../../store/channels');
 
 describe('RecordingCardUtils', () => {
-  beforeEach(() => {
-    vi.clearAllMocks();
+  beforeEach(() => { vi.clearAllMocks(); localStorage.clear(); });
+
+  describe('getShowVideoUrl', () => {
+    it('returns proxy URL with mpegts output format', () => {
+      expect(getShowVideoUrl({ uuid: 'channel-123' }, 'production'))
+        .toBe('/proxy/ts/stream/channel-123?output_format=mpegts');
+    });
+    it('includes output_profile when set in player prefs', () => {
+      localStorage.setItem('dispatcharr-player-prefs', JSON.stringify({ webPlayerOutputProfileId: 5 }));
+      expect(getShowVideoUrl({ uuid: 'channel-123' }, 'production'))
+        .toBe('/proxy/ts/stream/channel-123?output_format=mpegts&output_profile=5');
+    });
+    it('prepends dev server URL in dev mode with output params', () => {
+      expect(getShowVideoUrl({ uuid: 'channel-123' }, 'dev')).toMatch(/^https?:\/\/.*:5656\/proxy\/ts\/stream\/channel-123\?output_format=mpegts$/);
+    });
   });
 
   describe('removeRecording', () => {
-    let mockRemoveRecording;
-    let mockFetchRecordings;
-
+    let mockRemoveRecording, mockFetchRecordings;
     beforeEach(() => {
-      mockRemoveRecording = vi.fn();
-      mockFetchRecordings = vi.fn();
-      useChannelsStore.getState = vi.fn(() => ({
-        removeRecording: mockRemoveRecording,
-        fetchRecordings: mockFetchRecordings,
-      }));
+      mockRemoveRecording = vi.fn(); mockFetchRecordings = vi.fn();
+      useChannelsStore.getState = vi.fn(() => ({ removeRecording: mockRemoveRecording, fetchRecordings: mockFetchRecordings }));
     });
-
     it('optimistically removes recording from store', () => {
       API.deleteRecording.mockResolvedValue();
-
       removeRecording('recording-1');
-
       expect(mockRemoveRecording).toHaveBeenCalledWith('recording-1');
     });
-
     it('calls API to delete recording', () => {
       API.deleteRecording.mockResolvedValue();
-
       removeRecording('recording-1');
-
       expect(API.deleteRecording).toHaveBeenCalledWith('recording-1');
     });
-
-    it('handles optimistic removal error', () => {
-      const consoleError = vi.spyOn(console, 'error').mockImplementation();
-      mockRemoveRecording.mockImplementation(() => {
-        throw new Error('Store error');
-      });
-      API.deleteRecording.mockResolvedValue();
-
-      removeRecording('recording-1');
-
-      expect(consoleError).toHaveBeenCalledWith(
-        'Failed to optimistically remove recording',
-        expect.any(Error)
-      );
-      consoleError.mockRestore();
-    });
-
     it('refetches recordings when API delete fails', async () => {
       API.deleteRecording.mockRejectedValue(new Error('Delete failed'));
-
       removeRecording('recording-1');
-
-      await vi.waitFor(() => {
-        expect(mockFetchRecordings).toHaveBeenCalled();
-      });
-    });
-
-    it('handles fetch error after failed delete', async () => {
-      const consoleError = vi.spyOn(console, 'error').mockImplementation();
-      API.deleteRecording.mockRejectedValue(new Error('Delete failed'));
-      mockFetchRecordings.mockImplementation(() => {
-        throw new Error('Fetch error');
-      });
-
-      removeRecording('recording-1');
-
-      await vi.waitFor(() => {
-        expect(consoleError).toHaveBeenCalledWith(
-          'Failed to refresh recordings after delete',
-          expect.any(Error)
-        );
-      });
-      consoleError.mockRestore();
-    });
-  });
-
-  describe('getPosterUrl', () => {
-    afterEach(() => {
-      vi.unstubAllEnvs();
-    });
-
-    it('returns logo URL when posterLogoId is provided', () => {
-      vi.stubEnv('DEV', false);
-      const result = getPosterUrl('logo-123', {}, '');
-
-      expect(result).toBe('/api/channels/logos/logo-123/cache/');
-    });
-
-    it('returns custom poster_url when no posterLogoId', () => {
-      vi.stubEnv('DEV', false);
-      const customProps = { poster_url: '/custom/poster.jpg' };
-      const result = getPosterUrl(null, customProps, '');
-
-      expect(result).toBe('/custom/poster.jpg');
-    });
-
-    it('returns posterUrl when no posterLogoId or custom poster_url', () => {
-      vi.stubEnv('DEV', false);
-      const result = getPosterUrl(null, {}, '/fallback/poster.jpg');
-
-      expect(result).toBe('/fallback/poster.jpg');
-    });
-
-    it('returns default logo when no parameters provided', () => {
-      vi.stubEnv('DEV', false);
-      const result = getPosterUrl(null, {}, '');
-
-      // Falls back to the imported default Dispatcharr logo asset
-      expect(result).toBeTruthy();
-      expect(result).toContain('logo');
-    });
-
-    it('prepends dev server URL in dev mode for relative paths', () => {
-      vi.stubEnv('DEV', true);
-      const result = getPosterUrl(null, {}, '/poster.jpg');
-
-      expect(result).toMatch(/^https?:\/\/.*:5656\/poster\.jpg$/);
-    });
-
-    it('does not prepend dev URL for absolute URLs', () => {
-      vi.stubEnv('DEV', true);
-      const result = getPosterUrl(null, {}, 'https://example.com/poster.jpg');
-
-      expect(result).toBe('https://example.com/poster.jpg');
-    });
-  });
-
-  describe('getShowVideoUrl', () => {
-    it('returns proxy URL for channel', () => {
-      const channel = { uuid: 'channel-123' };
-      const result = getShowVideoUrl(channel, 'production');
-
-      expect(result).toBe('/proxy/ts/stream/channel-123');
-    });
-
-    it('prepends dev server URL in dev mode', () => {
-      const channel = { uuid: 'channel-123' };
-      const result = getShowVideoUrl(channel, 'dev');
-
-      expect(result).toMatch(
-        /^https?:\/\/.*:5656\/proxy\/ts\/stream\/channel-123$/
-      );
+      await vi.waitFor(() => { expect(mockFetchRecordings).toHaveBeenCalled(); });
     });
   });
 
   describe('runComSkip', () => {
     it('calls API runComskip with recording id', async () => {
       API.runComskip.mockResolvedValue();
-      const recording = { id: 'recording-1' };
-
-      await runComSkip(recording);
-
+      await runComSkip({ id: 'recording-1' });
       expect(API.runComskip).toHaveBeenCalledWith('recording-1');
     });
   });
@@ -178,231 +61,34 @@ describe('RecordingCardUtils', () => {
   describe('deleteRecordingById', () => {
     it('calls API deleteRecording with id', async () => {
       API.deleteRecording.mockResolvedValue();
-
       await deleteRecordingById('recording-1');
-
       expect(API.deleteRecording).toHaveBeenCalledWith('recording-1');
     });
   });
 
-  describe('deleteSeriesAndRule', () => {
-    it('removes series recordings and deletes series rule', async () => {
-      API.bulkRemoveSeriesRecordings.mockResolvedValue();
-      API.deleteSeriesRule.mockResolvedValue();
-      const seriesInfo = { tvg_id: 'series-123', title: 'Test Series' };
-
-      await deleteSeriesAndRule(seriesInfo);
-
-      expect(API.bulkRemoveSeriesRecordings).toHaveBeenCalledWith({
-        tvg_id: 'series-123',
-        title: 'Test Series',
-        scope: 'title',
-      });
-      expect(API.deleteSeriesRule).toHaveBeenCalledWith(
-        'series-123',
-        'Test Series'
-      );
-    });
-
-    it('works for title-only rules with no tvg_id', async () => {
-      API.bulkRemoveSeriesRecordings.mockResolvedValue();
-      API.deleteSeriesRule.mockResolvedValue();
-      const seriesInfo = { tvg_id: undefined, title: 'Title-Only Show' };
-
-      await deleteSeriesAndRule(seriesInfo);
-
-      expect(API.bulkRemoveSeriesRecordings).toHaveBeenCalledWith({
-        tvg_id: '',
-        title: 'Title-Only Show',
-        scope: 'title',
-      });
-      expect(API.deleteSeriesRule).toHaveBeenCalledWith(
-        undefined,
-        'Title-Only Show'
-      );
-    });
-
-    it('handles bulk remove error gracefully', async () => {
-      const consoleError = vi.spyOn(console, 'error').mockImplementation();
-      API.bulkRemoveSeriesRecordings.mockRejectedValue(
-        new Error('Bulk remove failed')
-      );
-      API.deleteSeriesRule.mockResolvedValue();
-      const seriesInfo = { tvg_id: 'series-123', title: 'Test Series' };
-
-      await deleteSeriesAndRule(seriesInfo);
-
-      expect(consoleError).toHaveBeenCalledWith(
-        'Failed to remove series recordings',
-        expect.any(Error)
-      );
-      expect(API.deleteSeriesRule).toHaveBeenCalled();
-      consoleError.mockRestore();
-    });
-
-    it('handles delete rule error gracefully', async () => {
-      const consoleError = vi.spyOn(console, 'error').mockImplementation();
-      API.bulkRemoveSeriesRecordings.mockResolvedValue();
-      API.deleteSeriesRule.mockRejectedValue(new Error('Delete rule failed'));
-      const seriesInfo = { tvg_id: 'series-123', title: 'Test Series' };
-
-      await deleteSeriesAndRule(seriesInfo);
-
-      expect(consoleError).toHaveBeenCalledWith(
-        'Failed to delete series rule',
-        expect.any(Error)
-      );
-      consoleError.mockRestore();
-    });
-  });
-
   describe('getRecordingUrl', () => {
     it('returns file_url when available', () => {
-      const customProps = { file_url: '/recordings/file.mp4' };
-      const result = getRecordingUrl(customProps, 'production');
-
-      expect(result).toBe('/recordings/file.mp4');
+      expect(getRecordingUrl({ file_url: '/recordings/file.mp4' }, 'production')).toBe('/recordings/file.mp4');
     });
-
-    it('returns output_file_url when file_url is not available', () => {
-      const customProps = { output_file_url: '/output/file.mp4' };
-      const result = getRecordingUrl(customProps, 'production');
-
-      expect(result).toBe('/output/file.mp4');
+    it('returns undefined when no file URL available', () => {
+      expect(getRecordingUrl({}, 'production')).toBeUndefined();
     });
-
-    it('prefers file_url over output_file_url', () => {
-      const customProps = {
-        file_url: '/recordings/file.mp4',
-        output_file_url: '/output/file.mp4',
-      };
-      const result = getRecordingUrl(customProps, 'production');
-
-      expect(result).toBe('/recordings/file.mp4');
-    });
-
-    it('prepends dev server URL in dev mode for relative paths', () => {
-      const customProps = { file_url: '/recordings/file.mp4' };
-      const result = getRecordingUrl(customProps, 'dev');
-
-      expect(result).toMatch(/^https?:\/\/.*:5656\/recordings\/file\.mp4$/);
-    });
-
-    it('does not prepend dev URL for absolute URLs', () => {
-      const customProps = { file_url: 'https://example.com/file.mp4' };
-      const result = getRecordingUrl(customProps, 'dev');
-
-      expect(result).toBe('https://example.com/file.mp4');
-    });
-
-    it('returns undefined when no file URL is available', () => {
-      const result = getRecordingUrl({}, 'production');
-
-      expect(result).toBeUndefined();
-    });
-
     it('handles null customProps', () => {
-      const result = getRecordingUrl(null, 'production');
-
-      expect(result).toBeUndefined();
+      expect(getRecordingUrl(null, 'production')).toBeUndefined();
     });
   });
 
   describe('getSeasonLabel', () => {
-    it('returns formatted season and episode label', () => {
-      const result = getSeasonLabel(1, 5, null);
-
-      expect(result).toBe('S01E05');
-    });
-
-    it('pads single digit season and episode numbers', () => {
-      const result = getSeasonLabel(2, 3, null);
-
-      expect(result).toBe('S02E03');
-    });
-
-    it('handles multi-digit season and episode numbers', () => {
-      const result = getSeasonLabel(12, 34, null);
-
-      expect(result).toBe('S12E34');
-    });
-
-    it('returns onscreen value when season or episode is missing', () => {
-      const result = getSeasonLabel(null, 5, 'Episode 5');
-
-      expect(result).toBe('Episode 5');
-    });
-
-    it('returns onscreen value when only episode is missing', () => {
-      const result = getSeasonLabel(1, null, 'Special');
-
-      expect(result).toBe('Special');
-    });
-
-    it('returns null when no season, episode, or onscreen provided', () => {
-      const result = getSeasonLabel(null, null, null);
-
-      expect(result).toBeNull();
-    });
-
-    it('returns formatted label even when onscreen is provided', () => {
-      const result = getSeasonLabel(1, 5, 'Episode 5');
-
-      expect(result).toBe('S01E05');
-    });
+    it('returns formatted label', () => { expect(getSeasonLabel(1, 5, null)).toBe('S01E05'); });
+    it('returns onscreen when season missing', () => { expect(getSeasonLabel(null, 5, 'Episode 5')).toBe('Episode 5'); });
+    it('returns null when nothing provided', () => { expect(getSeasonLabel(null, null, null)).toBeNull(); });
   });
 
   describe('getSeriesInfo', () => {
-    it('extracts tvg_id and title from program', () => {
-      const customProps = {
-        program: { tvg_id: 'series-123', title: 'Test Series' },
-      };
-      const result = getSeriesInfo(customProps);
-
-      expect(result).toEqual({
-        tvg_id: 'series-123',
-        title: 'Test Series',
-      });
-    });
-
-    it('handles missing program object', () => {
-      const customProps = {};
-      const result = getSeriesInfo(customProps);
-
-      expect(result).toEqual({
-        tvg_id: undefined,
-        title: undefined,
-      });
-    });
-
-    it('handles null customProps', () => {
-      const result = getSeriesInfo(null);
-
-      expect(result).toEqual({
-        tvg_id: undefined,
-        title: undefined,
-      });
-    });
-
-    it('handles undefined customProps', () => {
-      const result = getSeriesInfo(undefined);
-
-      expect(result).toEqual({
-        tvg_id: undefined,
-        title: undefined,
-      });
-    });
-
-    it('handles partial program data', () => {
-      const customProps = {
-        program: { tvg_id: 'series-123' },
-      };
-      const result = getSeriesInfo(customProps);
-
-      expect(result).toEqual({
-        tvg_id: 'series-123',
-        title: undefined,
-      });
+    it('extracts tvg_id and title', () => {
+      expect(getSeriesInfo({ program: { tvg_id: 'series-123', title: 'Test Series' } }))
+        .toEqual({ tvg_id: 'series-123', title: 'Test Series' });
     });
+    it('handles null', () => { expect(getSeriesInfo(null)).toEqual({ tvg_id: undefined, title: undefined }); });
   });
 });

From 98d7acd3c0543d9abe0cb47110b6b5bca14430e8 Mon Sep 17 00:00:00 2001
From: nemes <jose_mx_15@hotmail.com>
Date: Fri, 29 May 2026 17:32:22 +0200
Subject: [PATCH 31/35] fix(frontend): apply output_profile and output_format
 in all live stream player calls

getShowVideoUrl was returning a raw proxy URL without calling
buildLiveStreamUrl, so the web-player output profile preference stored in
localStorage was ignored when starting a live stream from the TV Guide,
Program Detail modal, DVR page, Recording Details modal, and Recording Card.

Fixes #1304
---
 .../src/utils/cards/RecordingCardUtils.js     | 41 +++++++++++--------
 1 file changed, 24 insertions(+), 17 deletions(-)

diff --git a/frontend/src/utils/cards/RecordingCardUtils.js b/frontend/src/utils/cards/RecordingCardUtils.js
index 68b0b3ce..60d527bd 100644
--- a/frontend/src/utils/cards/RecordingCardUtils.js
+++ b/frontend/src/utils/cards/RecordingCardUtils.js
@@ -1,24 +1,31 @@
-import API from "../../api.js";
-import useChannelsStore from "../../store/channels.jsx";
-import defaultLogo from "../../images/logo.png";
-import { formatSeasonEpisode } from "../guideUtils.js";
-import { buildLiveStreamUrl } from "../components/FloatingVideoUtils.js";
+import API from '../../api.js';
+import useChannelsStore from '../../store/channels.jsx';
+import defaultLogo from '../../images/logo.png';
+import { formatSeasonEpisode } from '../guideUtils.js';
+import { buildLiveStreamUrl } from '../components/FloatingVideoUtils.js';
 
 export const removeRecording = (id) => {
+  // Optimistically remove immediately from UI
   try {
     useChannelsStore.getState().removeRecording(id);
   } catch (error) {
-    console.error("Failed to optimistically remove recording", error);
+    console.error('Failed to optimistically remove recording', error);
   }
+  // Fire-and-forget server delete; websocket will keep others in sync
   API.deleteRecording(id).catch(() => {
+    // On failure, fallback to refetch to restore state
     try {
       useChannelsStore.getState().fetchRecordings();
     } catch (error) {
-      console.error("Failed to refresh recordings after delete", error);
+      console.error('Failed to refresh recordings after delete', error);
     }
   });
 };
 
+/**
+ * Resolve the channel logo cache URL from either a full channel object
+ * (has logo.cache_url) or a summary object (has logo_id integer).
+ */
 export const getChannelLogoUrl = (channel) => {
   if (!channel) return null;
   let url = channel.logo_id
@@ -26,8 +33,8 @@ export const getChannelLogoUrl = (channel) => {
     : channel.logo?.cache_url || null;
   if (
     url &&
-    url.startsWith("/") &&
-    typeof import.meta !== "undefined" &&
+    url.startsWith('/') &&
+    typeof import.meta !== 'undefined' &&
     import.meta.env &&
     import.meta.env.DEV
   ) {
@@ -42,10 +49,10 @@ export const getPosterUrl = (posterLogoId, customProperties, posterUrl) => {
     : customProperties?.poster_url || posterUrl || null;
   if (
     purl &&
-    typeof import.meta !== "undefined" &&
+    typeof import.meta !== 'undefined' &&
     import.meta.env &&
     import.meta.env.DEV &&
-    purl.startsWith("/")
+    purl.startsWith('/')
   ) {
     purl = `${window.location.protocol}//${window.location.hostname}:5656${purl}`;
   }
@@ -54,7 +61,7 @@ export const getPosterUrl = (posterLogoId, customProperties, posterUrl) => {
 
 export const getShowVideoUrl = (channel, env_mode) => {
   let url = `/proxy/ts/stream/${channel.uuid}`;
-  if (env_mode === "dev") {
+  if (env_mode === 'dev') {
     url = `${window.location.protocol}//${window.location.hostname}:5656${url}`;
   }
   return buildLiveStreamUrl(url);
@@ -80,23 +87,23 @@ export const deleteSeriesAndRule = async (seriesInfo) => {
   const { tvg_id, title } = seriesInfo;
   try {
     await API.bulkRemoveSeriesRecordings({
-      tvg_id: tvg_id || "",
+      tvg_id: tvg_id || '',
       title,
-      scope: "title",
+      scope: 'title',
     });
   } catch (error) {
-    console.error("Failed to remove series recordings", error);
+    console.error('Failed to remove series recordings', error);
   }
   try {
     await API.deleteSeriesRule(tvg_id, title);
   } catch (error) {
-    console.error("Failed to delete series rule", error);
+    console.error('Failed to delete series rule', error);
   }
 };
 
 export const getRecordingUrl = (customProps, env_mode) => {
   let fileUrl = customProps?.file_url || customProps?.output_file_url;
-  if (fileUrl && env_mode === "dev" && fileUrl.startsWith("/")) {
+  if (fileUrl && env_mode === 'dev' && fileUrl.startsWith('/')) {
     fileUrl = `${window.location.protocol}//${window.location.hostname}:5656${fileUrl}`;
   }
   return fileUrl;

From c717df50f91c92c9eb1bfdceef596b4d66403218 Mon Sep 17 00:00:00 2001
From: nemes <jose_mx_15@hotmail.com>
Date: Fri, 29 May 2026 17:32:24 +0200
Subject: [PATCH 32/35] fix(frontend): update getShowVideoUrl tests to expect
 output_format and output_profile

---
 .../__tests__/RecordingCardUtils.test.js      | 394 ++++++++++++++++--
 1 file changed, 361 insertions(+), 33 deletions(-)

diff --git a/frontend/src/utils/cards/__tests__/RecordingCardUtils.test.js b/frontend/src/utils/cards/__tests__/RecordingCardUtils.test.js
index d0b843ee..2e601120 100644
--- a/frontend/src/utils/cards/__tests__/RecordingCardUtils.test.js
+++ b/frontend/src/utils/cards/__tests__/RecordingCardUtils.test.js
@@ -1,7 +1,14 @@
 import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest';
 import {
-  removeRecording, getPosterUrl, getShowVideoUrl, runComSkip,
-  deleteRecordingById, deleteSeriesAndRule, getRecordingUrl, getSeasonLabel, getSeriesInfo,
+  removeRecording,
+  getPosterUrl,
+  getShowVideoUrl,
+  runComSkip,
+  deleteRecordingById,
+  deleteSeriesAndRule,
+  getRecordingUrl,
+  getSeasonLabel,
+  getSeriesInfo,
 } from '../RecordingCardUtils';
 import API from '../../../api';
 import useChannelsStore from '../../../store/channels';
@@ -10,50 +17,174 @@ vi.mock('../../../api');
 vi.mock('../../../store/channels');
 
 describe('RecordingCardUtils', () => {
-  beforeEach(() => { vi.clearAllMocks(); localStorage.clear(); });
-
-  describe('getShowVideoUrl', () => {
-    it('returns proxy URL with mpegts output format', () => {
-      expect(getShowVideoUrl({ uuid: 'channel-123' }, 'production'))
-        .toBe('/proxy/ts/stream/channel-123?output_format=mpegts');
-    });
-    it('includes output_profile when set in player prefs', () => {
-      localStorage.setItem('dispatcharr-player-prefs', JSON.stringify({ webPlayerOutputProfileId: 5 }));
-      expect(getShowVideoUrl({ uuid: 'channel-123' }, 'production'))
-        .toBe('/proxy/ts/stream/channel-123?output_format=mpegts&output_profile=5');
-    });
-    it('prepends dev server URL in dev mode with output params', () => {
-      expect(getShowVideoUrl({ uuid: 'channel-123' }, 'dev')).toMatch(/^https?:\/\/.*:5656\/proxy\/ts\/stream\/channel-123\?output_format=mpegts$/);
-    });
+  beforeEach(() => {
+    vi.clearAllMocks();
+    localStorage.clear();
   });
 
   describe('removeRecording', () => {
-    let mockRemoveRecording, mockFetchRecordings;
+    let mockRemoveRecording;
+    let mockFetchRecordings;
+
     beforeEach(() => {
-      mockRemoveRecording = vi.fn(); mockFetchRecordings = vi.fn();
-      useChannelsStore.getState = vi.fn(() => ({ removeRecording: mockRemoveRecording, fetchRecordings: mockFetchRecordings }));
+      mockRemoveRecording = vi.fn();
+      mockFetchRecordings = vi.fn();
+      useChannelsStore.getState = vi.fn(() => ({
+        removeRecording: mockRemoveRecording,
+        fetchRecordings: mockFetchRecordings,
+      }));
     });
+
     it('optimistically removes recording from store', () => {
       API.deleteRecording.mockResolvedValue();
+
       removeRecording('recording-1');
+
       expect(mockRemoveRecording).toHaveBeenCalledWith('recording-1');
     });
+
     it('calls API to delete recording', () => {
       API.deleteRecording.mockResolvedValue();
+
       removeRecording('recording-1');
+
       expect(API.deleteRecording).toHaveBeenCalledWith('recording-1');
     });
+
+    it('handles optimistic removal error', () => {
+      const consoleError = vi.spyOn(console, 'error').mockImplementation();
+      mockRemoveRecording.mockImplementation(() => {
+        throw new Error('Store error');
+      });
+      API.deleteRecording.mockResolvedValue();
+
+      removeRecording('recording-1');
+
+      expect(consoleError).toHaveBeenCalledWith(
+        'Failed to optimistically remove recording',
+        expect.any(Error)
+      );
+      consoleError.mockRestore();
+    });
+
     it('refetches recordings when API delete fails', async () => {
       API.deleteRecording.mockRejectedValue(new Error('Delete failed'));
+
       removeRecording('recording-1');
-      await vi.waitFor(() => { expect(mockFetchRecordings).toHaveBeenCalled(); });
+
+      await vi.waitFor(() => {
+        expect(mockFetchRecordings).toHaveBeenCalled();
+      });
+    });
+
+    it('handles fetch error after failed delete', async () => {
+      const consoleError = vi.spyOn(console, 'error').mockImplementation();
+      API.deleteRecording.mockRejectedValue(new Error('Delete failed'));
+      mockFetchRecordings.mockImplementation(() => {
+        throw new Error('Fetch error');
+      });
+
+      removeRecording('recording-1');
+
+      await vi.waitFor(() => {
+        expect(consoleError).toHaveBeenCalledWith(
+          'Failed to refresh recordings after delete',
+          expect.any(Error)
+        );
+      });
+      consoleError.mockRestore();
+    });
+  });
+
+  describe('getPosterUrl', () => {
+    afterEach(() => {
+      vi.unstubAllEnvs();
+    });
+
+    it('returns logo URL when posterLogoId is provided', () => {
+      vi.stubEnv('DEV', false);
+      const result = getPosterUrl('logo-123', {}, '');
+
+      expect(result).toBe('/api/channels/logos/logo-123/cache/');
+    });
+
+    it('returns custom poster_url when no posterLogoId', () => {
+      vi.stubEnv('DEV', false);
+      const customProps = { poster_url: '/custom/poster.jpg' };
+      const result = getPosterUrl(null, customProps, '');
+
+      expect(result).toBe('/custom/poster.jpg');
+    });
+
+    it('returns posterUrl when no posterLogoId or custom poster_url', () => {
+      vi.stubEnv('DEV', false);
+      const result = getPosterUrl(null, {}, '/fallback/poster.jpg');
+
+      expect(result).toBe('/fallback/poster.jpg');
+    });
+
+    it('returns default logo when no parameters provided', () => {
+      vi.stubEnv('DEV', false);
+      const result = getPosterUrl(null, {}, '');
+
+      // Falls back to the imported default Dispatcharr logo asset
+      expect(result).toBeTruthy();
+      expect(result).toContain('logo');
+    });
+
+    it('prepends dev server URL in dev mode for relative paths', () => {
+      vi.stubEnv('DEV', true);
+      const result = getPosterUrl(null, {}, '/poster.jpg');
+
+      expect(result).toMatch(/^https?:\/\/.*:5656\/poster\.jpg$/);
+    });
+
+    it('does not prepend dev URL for absolute URLs', () => {
+      vi.stubEnv('DEV', true);
+      const result = getPosterUrl(null, {}, 'https://example.com/poster.jpg');
+
+      expect(result).toBe('https://example.com/poster.jpg');
+    });
+  });
+
+  describe('getShowVideoUrl', () => {
+    it('returns proxy URL with mpegts output format for channel', () => {
+      const channel = { uuid: 'channel-123' };
+      const result = getShowVideoUrl(channel, 'production');
+
+      expect(result).toBe('/proxy/ts/stream/channel-123?output_format=mpegts');
+    });
+
+    it('includes output_profile when set in player prefs', () => {
+      localStorage.setItem(
+        'dispatcharr-player-prefs',
+        JSON.stringify({ webPlayerOutputProfileId: 5 })
+      );
+      const channel = { uuid: 'channel-123' };
+      const result = getShowVideoUrl(channel, 'production');
+
+      expect(result).toBe(
+        '/proxy/ts/stream/channel-123?output_format=mpegts&output_profile=5'
+      );
+    });
+
+    it('prepends dev server URL in dev mode with output params', () => {
+      const channel = { uuid: 'channel-123' };
+      const result = getShowVideoUrl(channel, 'dev');
+
+      expect(result).toMatch(
+        /^https?:\/\/.*:5656\/proxy\/ts\/stream\/channel-123\?output_format=mpegts$/
+      );
     });
   });
 
   describe('runComSkip', () => {
     it('calls API runComskip with recording id', async () => {
       API.runComskip.mockResolvedValue();
-      await runComSkip({ id: 'recording-1' });
+      const recording = { id: 'recording-1' };
+
+      await runComSkip(recording);
+
       expect(API.runComskip).toHaveBeenCalledWith('recording-1');
     });
   });
@@ -61,34 +192,231 @@ describe('RecordingCardUtils', () => {
   describe('deleteRecordingById', () => {
     it('calls API deleteRecording with id', async () => {
       API.deleteRecording.mockResolvedValue();
+
       await deleteRecordingById('recording-1');
+
       expect(API.deleteRecording).toHaveBeenCalledWith('recording-1');
     });
   });
 
+  describe('deleteSeriesAndRule', () => {
+    it('removes series recordings and deletes series rule', async () => {
+      API.bulkRemoveSeriesRecordings.mockResolvedValue();
+      API.deleteSeriesRule.mockResolvedValue();
+      const seriesInfo = { tvg_id: 'series-123', title: 'Test Series' };
+
+      await deleteSeriesAndRule(seriesInfo);
+
+      expect(API.bulkRemoveSeriesRecordings).toHaveBeenCalledWith({
+        tvg_id: 'series-123',
+        title: 'Test Series',
+        scope: 'title',
+      });
+      expect(API.deleteSeriesRule).toHaveBeenCalledWith(
+        'series-123',
+        'Test Series'
+      );
+    });
+
+    it('works for title-only rules with no tvg_id', async () => {
+      API.bulkRemoveSeriesRecordings.mockResolvedValue();
+      API.deleteSeriesRule.mockResolvedValue();
+      const seriesInfo = { tvg_id: undefined, title: 'Title-Only Show' };
+
+      await deleteSeriesAndRule(seriesInfo);
+
+      expect(API.bulkRemoveSeriesRecordings).toHaveBeenCalledWith({
+        tvg_id: '',
+        title: 'Title-Only Show',
+        scope: 'title',
+      });
+      expect(API.deleteSeriesRule).toHaveBeenCalledWith(
+        undefined,
+        'Title-Only Show'
+      );
+    });
+
+    it('handles bulk remove error gracefully', async () => {
+      const consoleError = vi.spyOn(console, 'error').mockImplementation();
+      API.bulkRemoveSeriesRecordings.mockRejectedValue(
+        new Error('Bulk remove failed')
+      );
+      API.deleteSeriesRule.mockResolvedValue();
+      const seriesInfo = { tvg_id: 'series-123', title: 'Test Series' };
+
+      await deleteSeriesAndRule(seriesInfo);
+
+      expect(consoleError).toHaveBeenCalledWith(
+        'Failed to remove series recordings',
+        expect.any(Error)
+      );
+      expect(API.deleteSeriesRule).toHaveBeenCalled();
+      consoleError.mockRestore();
+    });
+
+    it('handles delete rule error gracefully', async () => {
+      const consoleError = vi.spyOn(console, 'error').mockImplementation();
+      API.bulkRemoveSeriesRecordings.mockResolvedValue();
+      API.deleteSeriesRule.mockRejectedValue(new Error('Delete rule failed'));
+      const seriesInfo = { tvg_id: 'series-123', title: 'Test Series' };
+
+      await deleteSeriesAndRule(seriesInfo);
+
+      expect(consoleError).toHaveBeenCalledWith(
+        'Failed to delete series rule',
+        expect.any(Error)
+      );
+      consoleError.mockRestore();
+    });
+  });
+
   describe('getRecordingUrl', () => {
     it('returns file_url when available', () => {
-      expect(getRecordingUrl({ file_url: '/recordings/file.mp4' }, 'production')).toBe('/recordings/file.mp4');
+      const customProps = { file_url: '/recordings/file.mp4' };
+      const result = getRecordingUrl(customProps, 'production');
+
+      expect(result).toBe('/recordings/file.mp4');
     });
-    it('returns undefined when no file URL available', () => {
-      expect(getRecordingUrl({}, 'production')).toBeUndefined();
+
+    it('returns output_file_url when file_url is not available', () => {
+      const customProps = { output_file_url: '/output/file.mp4' };
+      const result = getRecordingUrl(customProps, 'production');
+
+      expect(result).toBe('/output/file.mp4');
     });
+
+    it('prefers file_url over output_file_url', () => {
+      const customProps = {
+        file_url: '/recordings/file.mp4',
+        output_file_url: '/output/file.mp4',
+      };
+      const result = getRecordingUrl(customProps, 'production');
+
+      expect(result).toBe('/recordings/file.mp4');
+    });
+
+    it('prepends dev server URL in dev mode for relative paths', () => {
+      const customProps = { file_url: '/recordings/file.mp4' };
+      const result = getRecordingUrl(customProps, 'dev');
+
+      expect(result).toMatch(/^https?:\/\/.*:5656\/recordings\/file\.mp4$/);
+    });
+
+    it('does not prepend dev URL for absolute URLs', () => {
+      const customProps = { file_url: 'https://example.com/file.mp4' };
+      const result = getRecordingUrl(customProps, 'dev');
+
+      expect(result).toBe('https://example.com/file.mp4');
+    });
+
+    it('returns undefined when no file URL is available', () => {
+      const result = getRecordingUrl({}, 'production');
+
+      expect(result).toBeUndefined();
+    });
+
     it('handles null customProps', () => {
-      expect(getRecordingUrl(null, 'production')).toBeUndefined();
+      const result = getRecordingUrl(null, 'production');
+
+      expect(result).toBeUndefined();
     });
   });
 
   describe('getSeasonLabel', () => {
-    it('returns formatted label', () => { expect(getSeasonLabel(1, 5, null)).toBe('S01E05'); });
-    it('returns onscreen when season missing', () => { expect(getSeasonLabel(null, 5, 'Episode 5')).toBe('Episode 5'); });
-    it('returns null when nothing provided', () => { expect(getSeasonLabel(null, null, null)).toBeNull(); });
+    it('returns formatted season and episode label', () => {
+      const result = getSeasonLabel(1, 5, null);
+
+      expect(result).toBe('S01E05');
+    });
+
+    it('pads single digit season and episode numbers', () => {
+      const result = getSeasonLabel(2, 3, null);
+
+      expect(result).toBe('S02E03');
+    });
+
+    it('handles multi-digit season and episode numbers', () => {
+      const result = getSeasonLabel(12, 34, null);
+
+      expect(result).toBe('S12E34');
+    });
+
+    it('returns onscreen value when season or episode is missing', () => {
+      const result = getSeasonLabel(null, 5, 'Episode 5');
+
+      expect(result).toBe('Episode 5');
+    });
+
+    it('returns onscreen value when only episode is missing', () => {
+      const result = getSeasonLabel(1, null, 'Special');
+
+      expect(result).toBe('Special');
+    });
+
+    it('returns null when no season, episode, or onscreen provided', () => {
+      const result = getSeasonLabel(null, null, null);
+
+      expect(result).toBeNull();
+    });
+
+    it('returns formatted label even when onscreen is provided', () => {
+      const result = getSeasonLabel(1, 5, 'Episode 5');
+
+      expect(result).toBe('S01E05');
+    });
   });
 
   describe('getSeriesInfo', () => {
-    it('extracts tvg_id and title', () => {
-      expect(getSeriesInfo({ program: { tvg_id: 'series-123', title: 'Test Series' } }))
-        .toEqual({ tvg_id: 'series-123', title: 'Test Series' });
+    it('extracts tvg_id and title from program', () => {
+      const customProps = {
+        program: { tvg_id: 'series-123', title: 'Test Series' },
+      };
+      const result = getSeriesInfo(customProps);
+
+      expect(result).toEqual({
+        tvg_id: 'series-123',
+        title: 'Test Series',
+      });
+    });
+
+    it('handles missing program object', () => {
+      const customProps = {};
+      const result = getSeriesInfo(customProps);
+
+      expect(result).toEqual({
+        tvg_id: undefined,
+        title: undefined,
+      });
+    });
+
+    it('handles null customProps', () => {
+      const result = getSeriesInfo(null);
+
+      expect(result).toEqual({
+        tvg_id: undefined,
+        title: undefined,
+      });
+    });
+
+    it('handles undefined customProps', () => {
+      const result = getSeriesInfo(undefined);
+
+      expect(result).toEqual({
+        tvg_id: undefined,
+        title: undefined,
+      });
+    });
+
+    it('handles partial program data', () => {
+      const customProps = {
+        program: { tvg_id: 'series-123' },
+      };
+      const result = getSeriesInfo(customProps);
+
+      expect(result).toEqual({
+        tvg_id: 'series-123',
+        title: undefined,
+      });
     });
-    it('handles null', () => { expect(getSeriesInfo(null)).toEqual({ tvg_id: undefined, title: undefined }); });
   });
 });

From a164194c614811404984632b440ae62e0faaf6d1 Mon Sep 17 00:00:00 2001
From: SergeantPanda <chester.cullen@gmail.com>
Date: Fri, 29 May 2026 14:58:34 -0500
Subject: [PATCH 33/35] changelog: Update changelog for web player pr.

---
 CHANGELOG.md | 1 +
 1 file changed, 1 insertion(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 0fad82a7..70cb48e6 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -24,6 +24,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Fixed
 
+- **Web-player output profile was ignored for live streams started outside the Channels page.** `getShowVideoUrl` in `RecordingCardUtils.js` returned a raw proxy URL without calling `buildLiveStreamUrl`, so the output profile preference stored in `localStorage` was not applied when launching a stream from the TV Guide, Program Detail modal, DVR page, Recording Details modal, or Recording Card. Only the Channels page (StreamsTable) was calling `buildLiveStreamUrl` correctly. One additional import and one changed return value fix all affected entry points. (Fixes #1304) - Thanks [@nemesbak](https://github.com/nemesbak)
 - **Plugins with available updates were not sorting to the top of the Plugin Browse list.** The sort weight function previously treated `update_available` plugins the same as any other installed plugin, leaving them buried. They now receive the highest sort priority (below the search/filter results header) so users can spot pending updates immediately. — Thanks [@sethwv](https://github.com/sethwv)
 - **Disabled state on the size-labeled install button rendered with a warm tint instead of appearing clearly disabled.** The CSS filter was `brightness(0.65) saturate(0.7)`, which left a faint color cast. It is now `grayscale(1) brightness(0.55)`, matching the standard disabled appearance. — Thanks [@sethwv](https://github.com/sethwv)
 - **Restoring a backup from an older version left the database with missing schema.** The restore task ran `pg_restore` which replaced the entire database (including the `django_migrations` table) but did not run migrations afterward. If the backup predated a schema migration, the restored database was missing tables and columns added by those migrations, causing 500 errors on every API call. `migrate --noinput` now runs automatically after every restore. The success notification also now recommends a restart to clear stale service state.

From b63650799ac3334fce751a6ce1ef2efb3d2ca4da Mon Sep 17 00:00:00 2001
From: SergeantPanda <chester.cullen@gmail.com>
Date: Fri, 29 May 2026 17:07:55 -0500
Subject: [PATCH 34/35] docs: Restored todo as this did not resolve it. Cleaned
 up overly verbose comment.

---
 apps/channels/models.py | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/apps/channels/models.py b/apps/channels/models.py
index 179ab5bd..320470bb 100644
--- a/apps/channels/models.py
+++ b/apps/channels/models.py
@@ -451,10 +451,8 @@ class Channel(models.Model):
     def effective_stream_profile_obj(self):
         return self._resolve_effective_fk("stream_profile")
 
+    # @TODO: honor stream's stream profile
     def get_stream_profile(self):
-        # Respect per-channel overrides: effective_stream_profile_obj uses
-        # _resolve_effective_fk which picks override.stream_profile when set,
-        # falling back to the channel's own stream_profile field.
         stream_profile = self.effective_stream_profile_obj
         if not stream_profile:
             stream_profile = StreamProfile.objects.get(

From b19184d7aaa95a984f174bd5b9bf416b34465157 Mon Sep 17 00:00:00 2001
From: SergeantPanda <chester.cullen@gmail.com>
Date: Fri, 29 May 2026 17:12:38 -0500
Subject: [PATCH 35/35] changelog: Update changelog for stream profile bugfix.

---
 CHANGELOG.md | 1 +
 1 file changed, 1 insertion(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 70cb48e6..afd013ac 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -24,6 +24,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Fixed
 
+- **Per-channel stream profile override was ignored during streaming.** `Channel.get_stream_profile()` read `self.stream_profile` directly, bypassing any `ChannelOverride.stream_profile` set by the user on auto-synced channels. The method now resolves through `effective_stream_profile_obj`, which checks the channel's override record first and falls back to the channel's own field. Channels without an override continue to behave identically to before. (Fixes #1268) - Thanks [@nemesbak](https://github.com/nemesbak)
 - **Web-player output profile was ignored for live streams started outside the Channels page.** `getShowVideoUrl` in `RecordingCardUtils.js` returned a raw proxy URL without calling `buildLiveStreamUrl`, so the output profile preference stored in `localStorage` was not applied when launching a stream from the TV Guide, Program Detail modal, DVR page, Recording Details modal, or Recording Card. Only the Channels page (StreamsTable) was calling `buildLiveStreamUrl` correctly. One additional import and one changed return value fix all affected entry points. (Fixes #1304) - Thanks [@nemesbak](https://github.com/nemesbak)
 - **Plugins with available updates were not sorting to the top of the Plugin Browse list.** The sort weight function previously treated `update_available` plugins the same as any other installed plugin, leaving them buried. They now receive the highest sort priority (below the search/filter results header) so users can spot pending updates immediately. — Thanks [@sethwv](https://github.com/sethwv)
 - **Disabled state on the size-labeled install button rendered with a warm tint instead of appearing clearly disabled.** The CSS filter was `brightness(0.65) saturate(0.7)`, which left a faint color cast. It is now `grayscale(1) brightness(0.55)`, matching the standard disabled appearance. — Thanks [@sethwv](https://github.com/sethwv)