Merge pull request 'feat(api): channel on-air / now-playing state endpoint (#97)' (#112) from issue-97-channel-state-api into docs/59-ui-redesign-brief

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>

.gitea/workflows/docker-build.yml

@@ -50,6 +50,37 @@ jobs:
       - name: Restore
         run: dotnet restore
 
+      - name: Setup Node
+        uses: actions/setup-node@v4
+        with:
+          node-version: '22.x'
+          cache: npm
+          cache-dependency-path: web/package-lock.json
+
+      - name: Install SPA dependencies
+        working-directory: web
+        run: npm ci
+
+      - name: Check generated SPA API client
+        working-directory: web
+        run: npm run check:api
+
+      - name: Lint SPA
+        working-directory: web
+        run: npm run lint
+
+      - name: Typecheck SPA
+        working-directory: web
+        run: npm run typecheck
+
+      - name: Test SPA
+        working-directory: web
+        run: npm test -- --run
+
+      - name: Build SPA
+        working-directory: web
+        run: npm run build
+
       - name: Strip Scanner project ref (matches Docker build)
         run: sed -i '/Scanner/d' ErsatzTV/ErsatzTV.csproj
 

.gitignore

@@ -3,6 +3,7 @@
 project.lock.json
 .DS_Store
 *.pyc
+.worktrees/
 
 # Claude Code
 .mcp/
@@ -51,3 +52,6 @@ scripts/download-test-content.sh
 docker-compose.override.yml
 
 ErsatzTV/wwwroot/v2/
+ErsatzTV/wwwroot/app/
+web/dist/
+web/node_modules/

AGENTS.md

@@ -1,15 +0,0 @@
-# Codex Instructions
-
-## Verification Commands
-
-Run .NET restore, build, and test commands outside the sandbox by default in this repo. Sandboxed .NET commands can stall on NuGet/package/compiler cache access, while the same commands complete normally with approved unsandboxed execution.
-
-Preferred verification commands:
-
-```bash
-TZ=UTC dotnet restore ErsatzTV.sln -v minimal
-TZ=UTC dotnet build ErsatzTV.sln --no-restore -v minimal
-TZ=UTC dotnet test ErsatzTV.sln --no-build -v minimal
-```
-
-Use scoped escalated execution for these commands rather than first trying a sandboxed run.

ErsatzTV.Application/Channels/Commands/BulkDeleteChannels.cs

@@ -0,0 +1,5 @@
+using ErsatzTV.Core;
+
+namespace ErsatzTV.Application.Channels;
+
+public record BulkDeleteChannels(IReadOnlyList<int> ChannelIds) : IRequest<Either<BaseError, Unit>>;

ErsatzTV.Application/Channels/Commands/BulkDeleteChannelsHandler.cs

@@ -0,0 +1,62 @@
+using System.IO.Abstractions;
+using System.Threading.Channels;
+using ErsatzTV.Core;
+using ErsatzTV.Core.Errors;
+using ErsatzTV.Core.Interfaces.Search;
+using ErsatzTV.Infrastructure.Data;
+using Microsoft.EntityFrameworkCore;
+using Channel = ErsatzTV.Core.Domain.Channel;
+
+namespace ErsatzTV.Application.Channels;
+
+public class BulkDeleteChannelsHandler(
+    IDbContextFactory<TvContext> dbContextFactory,
+    ChannelWriter<IBackgroundServiceRequest> workerChannel,
+    IFileSystem fileSystem,
+    ISearchTargets searchTargets)
+    : IRequestHandler<BulkDeleteChannels, Either<BaseError, Unit>>
+{
+    public async Task<Either<BaseError, Unit>> Handle(
+        BulkDeleteChannels request,
+        CancellationToken cancellationToken)
+    {
+        if (request.ChannelIds.Count == 0)
+        {
+            return Left<BaseError, Unit>(BaseError.New("At least one channel id is required"));
+        }
+
+        await using TvContext dbContext = await dbContextFactory.CreateDbContextAsync(cancellationToken);
+        await using var transaction = await dbContext.Database.BeginTransactionAsync(cancellationToken);
+
+        List<int> channelIds = request.ChannelIds.Distinct().ToList();
+        List<Channel> channels = await dbContext.Channels
+            .Where(c => channelIds.Contains(c.Id))
+            .ToListAsync(cancellationToken);
+
+        if (channels.Count != channelIds.Count)
+        {
+            var found = channels.Select(c => c.Id).ToHashSet();
+            int missingId = channelIds.First(id => !found.Contains(id));
+            return Left<BaseError, Unit>(new NotFoundError($"Channel {missingId} does not exist."));
+        }
+
+        dbContext.Channels.RemoveRange(channels);
+        await dbContext.SaveChangesAsync(cancellationToken);
+        await transaction.CommitAsync(cancellationToken);
+
+        searchTargets.SearchTargetsChanged();
+
+        foreach (Channel channel in channels)
+        {
+            string cacheFile = Path.Combine(FileSystemLayout.ChannelGuideCacheFolder, $"{channel.Number}.xml");
+            if (fileSystem.File.Exists(cacheFile))
+            {
+                fileSystem.File.Delete(cacheFile);
+            }
+        }
+
+        await workerChannel.WriteAsync(new RefreshChannelList(), cancellationToken);
+
+        return Right<BaseError, Unit>(Unit.Default);
+    }
+}

ErsatzTV.Application/Channels/Commands/BulkMoveChannelsToGroup.cs

@@ -0,0 +1,6 @@
+using ErsatzTV.Core;
+
+namespace ErsatzTV.Application.Channels;
+
+public record BulkMoveChannelsToGroup(IReadOnlyList<int> ChannelIds, string Group)
+    : IRequest<Either<BaseError, Unit>>;

ErsatzTV.Application/Channels/Commands/BulkMoveChannelsToGroupHandler.cs

@@ -0,0 +1,61 @@
+using System.Threading.Channels;
+using ErsatzTV.Core;
+using ErsatzTV.Core.Errors;
+using ErsatzTV.Core.Interfaces.Search;
+using ErsatzTV.Infrastructure.Data;
+using Microsoft.EntityFrameworkCore;
+using static ErsatzTV.Application.Channels.ChannelValidations;
+using Channel = ErsatzTV.Core.Domain.Channel;
+
+namespace ErsatzTV.Application.Channels;
+
+public class BulkMoveChannelsToGroupHandler(
+    IDbContextFactory<TvContext> dbContextFactory,
+    ChannelWriter<IBackgroundServiceRequest> workerChannel,
+    ISearchTargets searchTargets)
+    : IRequestHandler<BulkMoveChannelsToGroup, Either<BaseError, Unit>>
+{
+    public async Task<Either<BaseError, Unit>> Handle(
+        BulkMoveChannelsToGroup request,
+        CancellationToken cancellationToken)
+    {
+        if (request.ChannelIds.Count == 0)
+        {
+            return Left<BaseError, Unit>(BaseError.New("At least one channel id is required"));
+        }
+
+        Validation<BaseError, string> groupValidation = ValidateGroup(request.Group);
+        if (groupValidation.IsFail)
+        {
+            return Left<BaseError, Unit>(groupValidation.FailToSeq().Head());
+        }
+
+        await using TvContext dbContext = await dbContextFactory.CreateDbContextAsync(cancellationToken);
+        await using var transaction = await dbContext.Database.BeginTransactionAsync(cancellationToken);
+
+        List<int> channelIds = request.ChannelIds.Distinct().ToList();
+        List<Channel> channels = await dbContext.Channels
+            .Where(c => channelIds.Contains(c.Id))
+            .ToListAsync(cancellationToken);
+
+        if (channels.Count != channelIds.Count)
+        {
+            var found = channels.Select(c => c.Id).ToHashSet();
+            int missingId = channelIds.First(id => !found.Contains(id));
+            return Left<BaseError, Unit>(new NotFoundError($"Channel {missingId} does not exist."));
+        }
+
+        foreach (Channel channel in channels)
+        {
+            channel.Group = request.Group;
+        }
+
+        await dbContext.SaveChangesAsync(cancellationToken);
+        await transaction.CommitAsync(cancellationToken);
+
+        searchTargets.SearchTargetsChanged();
+        await workerChannel.WriteAsync(new RefreshChannelList(), cancellationToken);
+
+        return Right<BaseError, Unit>(Unit.Default);
+    }
+}

ErsatzTV.Application/Channels/Commands/UpdateChannelNumbersHandler.cs

@@ -1,6 +1,8 @@
 using System.Globalization;
+using System.Text.RegularExpressions;
 using System.Threading.Channels;
 using ErsatzTV.Core;
+using ErsatzTV.Core.Errors;
 using ErsatzTV.Infrastructure.Data;
 using Microsoft.EntityFrameworkCore;
 using Channel = ErsatzTV.Core.Domain.Channel;
@@ -14,18 +16,41 @@ public class UpdateChannelNumbersHandler(
 {
     public async Task<Option<BaseError>> Handle(UpdateChannelNumbers request, CancellationToken cancellationToken)
     {
+        Option<BaseError> validationError = ValidateRequest(request);
+        if (validationError.IsSome)
+        {
+            return validationError;
+        }
+
         await using TvContext dbContext = await dbContextFactory.CreateDbContextAsync(cancellationToken);
         await using var transaction = await dbContext.Database.BeginTransactionAsync(cancellationToken);
 
         try
         {
             var numberUpdates = request.Channels.ToDictionary(c => c.Id, c => c.Number);
-            var channelIds = numberUpdates.Keys;
+            List<int> channelIds = numberUpdates.Keys.ToList();
 
             List<Channel> channelsToUpdate = await dbContext.Channels
                 .Where(c => channelIds.Contains(c.Id))
                 .ToListAsync(cancellationToken);
 
+            if (channelsToUpdate.Count != channelIds.Count)
+            {
+                var found = channelsToUpdate.Select(c => c.Id).ToHashSet();
+                int missingId = channelIds.First(id => !found.Contains(id));
+                return new NotFoundError($"Channel {missingId} does not exist.");
+            }
+
+            List<string> requestedNumbers = numberUpdates.Values.ToList();
+            bool numberConflict = await dbContext.Channels
+                .AnyAsync(
+                    c => requestedNumbers.Contains(c.Number) && !channelIds.Contains(c.Id),
+                    cancellationToken);
+            if (numberConflict)
+            {
+                return BaseError.New("Channel number must be unique");
+            }
+
             // give every channel a non-conflicting number
             foreach (var channel in channelsToUpdate)
             {
@@ -69,4 +94,32 @@ public class UpdateChannelNumbersHandler(
             return BaseError.New("Failed to update channel numbers: " + ex.Message);
         }
     }
+
+    private static Option<BaseError> ValidateRequest(UpdateChannelNumbers request)
+    {
+        if (request.Channels.Count == 0)
+        {
+            return BaseError.New("At least one channel is required");
+        }
+
+        if (request.Channels.Select(c => c.Id).Distinct().Count() != request.Channels.Count)
+        {
+            return BaseError.New("Channel ids must be unique");
+        }
+
+        if (request.Channels.Select(c => c.Number).Distinct(StringComparer.Ordinal).Count() != request.Channels.Count)
+        {
+            return BaseError.New("Channel number must be unique");
+        }
+
+        foreach (ChannelSortViewModel channel in request.Channels)
+        {
+            if (!Regex.IsMatch(channel.Number, Channel.NumberValidator))
+            {
+                return BaseError.New("Invalid channel number; two decimals are allowed for subchannels");
+            }
+        }
+
+        return Option<BaseError>.None;
+    }
 }

ErsatzTV.Application/Channels/Mapper.cs

@@ -42,10 +42,15 @@ internal static class Mapper
         new(
             channel.Id,
             channel.Number,
+            channel.SortNumber,
             channel.Name,
+            channel.Group,
+            channel.Categories,
             channel.FFmpegProfile.Name,
             channel.PreferredAudioLanguageCode,
-            GetStreamingMode(channel));
+            GetStreamingMode(channel),
+            channel.IsEnabled,
+            channel.ShowInEpg);
 
     internal static ResolutionViewModel ProjectToViewModel(Resolution resolution) =>
         new(resolution.Height, resolution.Width);

ErsatzTV.Application/Channels/Queries/GetChannelStatesForApi.cs

@@ -0,0 +1,5 @@
+using ErsatzTV.Core.Api.Channels;
+
+namespace ErsatzTV.Application.Channels;
+
+public record GetChannelStatesForApi(DateTime Now) : IRequest<List<ChannelStateResponseModel>>;

ErsatzTV.Application/Channels/Queries/GetChannelStatesForApiHandler.cs

@@ -0,0 +1,151 @@
+using ErsatzTV.Core.Api.Channels;
+using ErsatzTV.Core.Domain;
+using ErsatzTV.Core.Domain.Filler;
+using ErsatzTV.Core.Interfaces.FFmpeg;
+using ErsatzTV.Infrastructure.Data;
+using Microsoft.EntityFrameworkCore;
+using PlayoutMapper = ErsatzTV.Application.Playouts.Mapper;
+
+namespace ErsatzTV.Application.Channels;
+
+public class GetChannelStatesForApiHandler(
+    IDbContextFactory<TvContext> dbContextFactory,
+    IFFmpegSegmenterService ffmpegSegmenterService)
+    : IRequestHandler<GetChannelStatesForApi, List<ChannelStateResponseModel>>
+{
+    // a guide entry (program + surrounding filler) never spans anywhere near a day; the time
+    // bound also protects against GuideGroup values recycling (mod 10000) elsewhere in a playout
+    private static readonly TimeSpan GuideEntryBound = TimeSpan.FromDays(1);
+
+    public async Task<List<ChannelStateResponseModel>> Handle(
+        GetChannelStatesForApi request,
+        CancellationToken cancellationToken)
+    {
+        await using TvContext dbContext = await dbContextFactory.CreateDbContextAsync(cancellationToken);
+
+        List<Channel> channels = await dbContext.Channels
+            .AsNoTracking()
+            .OrderBy(c => c.SortNumber)
+            .ThenBy(c => c.Number)
+            .ToListAsync(cancellationToken);
+
+        if (channels.Count == 0)
+        {
+            return [];
+        }
+
+        Dictionary<int, (int SourceChannelId, TimeSpan Offset, DateTime LookupTime)> channelLookup = channels
+            .ToDictionary(
+                c => c.Id,
+                c =>
+                {
+                    TimeSpan offset = c.PlayoutOffset ?? TimeSpan.Zero;
+                    return (c.MirrorSourceChannelId ?? c.Id, offset, request.Now - offset);
+                });
+
+        // one covering-item query per distinct lookup time (i.e. per distinct playout offset,
+        // typically just one) with a cheap projection; metadata is hydrated in a second query
+        // for only the covering items' guide groups
+        var coveringBySourceAndTime = new Dictionary<(int SourceChannelId, DateTime LookupTime), CoveringItem>();
+        foreach (IGrouping<DateTime, (int SourceChannelId, TimeSpan Offset, DateTime LookupTime)> timeGroup in
+                 channelLookup.Values.GroupBy(v => v.LookupTime))
+        {
+            DateTime lookupTime = timeGroup.Key;
+            int[] sourceChannelIds = timeGroup.Map(v => v.SourceChannelId).Distinct().ToArray();
+
+            List<CoveringItem> covering = await dbContext.PlayoutItems
+                .AsNoTracking()
+                .Where(pi => sourceChannelIds.Contains(pi.Playout.ChannelId))
+                .Where(pi => pi.Start <= lookupTime && pi.Finish > lookupTime)
+                .Select(pi => new CoveringItem(pi.Id, pi.PlayoutId, pi.Playout.ChannelId, pi.GuideGroup, pi.Start))
+                .ToListAsync(cancellationToken);
+
+            foreach (CoveringItem item in covering.OrderBy(ci => ci.Start))
+            {
+                coveringBySourceAndTime.TryAdd((item.ChannelId, lookupTime), item);
+            }
+        }
+
+        Dictionary<(int PlayoutId, int GuideGroup), List<PlayoutItem>> itemsByGuideEntry = [];
+        if (coveringBySourceAndTime.Count > 0)
+        {
+            int[] playoutIds = coveringBySourceAndTime.Values.Map(ci => ci.PlayoutId).Distinct().ToArray();
+            int[] guideGroups = coveringBySourceAndTime.Values.Map(ci => ci.GuideGroup).Distinct().ToArray();
+            DateTime windowStart = channelLookup.Values.Min(v => v.LookupTime) - GuideEntryBound;
+            DateTime windowFinish = channelLookup.Values.Max(v => v.LookupTime) + GuideEntryBound;
+
+            List<PlayoutItem> guideEntryItems = await dbContext.PlayoutItems
+                .AsNoTracking()
+                .Include(pi => pi.MediaItem)
+                .ThenInclude(mi => (mi as Episode).EpisodeMetadata)
+                .Include(pi => pi.MediaItem)
+                .ThenInclude(mi => (mi as Episode).Season)
+                .ThenInclude(s => s.Show)
+                .ThenInclude(s => s.ShowMetadata)
+                .Include(pi => pi.MediaItem)
+                .ThenInclude(mi => (mi as Movie).MovieMetadata)
+                .Include(pi => pi.MediaItem)
+                .ThenInclude(mi => (mi as MusicVideo).MusicVideoMetadata)
+                .Include(pi => pi.MediaItem)
+                .ThenInclude(mi => (mi as MusicVideo).Artist)
+                .ThenInclude(a => a.ArtistMetadata)
+                .Include(pi => pi.MediaItem)
+                .ThenInclude(mi => (mi as OtherVideo).OtherVideoMetadata)
+                .Include(pi => pi.MediaItem)
+                .ThenInclude(mi => (mi as Song).SongMetadata)
+                .Include(pi => pi.MediaItem)
+                .ThenInclude(mi => (mi as Image).ImageMetadata)
+                .Include(pi => pi.MediaItem)
+                .ThenInclude(mi => (mi as RemoteStream).RemoteStreamMetadata)
+                .Where(pi => playoutIds.Contains(pi.PlayoutId) && guideGroups.Contains(pi.GuideGroup))
+                .Where(pi => pi.Start <= windowFinish && pi.Finish > windowStart)
+                .ToListAsync(cancellationToken);
+
+            itemsByGuideEntry = guideEntryItems
+                .GroupBy(pi => (pi.PlayoutId, pi.GuideGroup))
+                .ToDictionary(g => g.Key, g => g.OrderBy(pi => pi.Start).ToList());
+        }
+
+        return channels
+            .Map(channel =>
+            {
+                (int sourceChannelId, TimeSpan offset, DateTime lookupTime) = channelLookup[channel.Id];
+                ChannelNowPlayingResponseModel nowPlaying = null;
+
+                if (coveringBySourceAndTime.TryGetValue((sourceChannelId, lookupTime), out CoveringItem covering) &&
+                    itemsByGuideEntry.TryGetValue(
+                        (covering.PlayoutId, covering.GuideGroup),
+                        out List<PlayoutItem> guideEntry))
+                {
+                    // like the XMLTV guide, surface the program rather than its filler: use the
+                    // covering item itself when it is a program part, otherwise the guide entry's
+                    // first program item; an entry with no program item (e.g. offline fallback
+                    // filler) stays null
+                    PlayoutItem coveringItem = guideEntry.Find(pi => pi.Id == covering.Id);
+                    PlayoutItem displayItem = coveringItem?.FillerKind == FillerKind.None
+                        ? coveringItem
+                        : guideEntry.Find(pi => pi.FillerKind == FillerKind.None);
+
+                    if (displayItem is not null)
+                    {
+                        DateTime start = guideEntry[0].Start;
+                        DateTime finish = displayItem.GuideFinish ?? guideEntry.Max(pi => pi.Finish);
+
+                        nowPlaying = new ChannelNowPlayingResponseModel(
+                            PlayoutMapper.GetDisplayTitle(displayItem.MediaItem, Optional(displayItem.ChapterTitle)),
+                            new DateTimeOffset(start + offset, TimeSpan.Zero),
+                            new DateTimeOffset(finish + offset, TimeSpan.Zero));
+                    }
+                }
+
+                return new ChannelStateResponseModel(
+                    channel.Id,
+                    channel.Number,
+                    ffmpegSegmenterService.IsActive(channel.Number),
+                    nowPlaying);
+            })
+            .ToList();
+    }
+
+    private sealed record CoveringItem(int Id, int PlayoutId, int ChannelId, int GuideGroup, DateTime Start);
+}

ErsatzTV.Application/Filler/Mapper.cs

@@ -1,13 +1,9 @@
-using ErsatzTV.Core.Api.Filler;
-using ErsatzTV.Core.Domain.Filler;
+using ErsatzTV.Core.Domain.Filler;
 
 namespace ErsatzTV.Application.Filler;
 
 internal static class Mapper
 {
-    internal static FillerPresetResponseModel ProjectToResponseModel(FillerPreset fillerPreset) =>
-        new(fillerPreset.Id, fillerPreset.Name);
-
     internal static FillerPresetViewModel ProjectToViewModel(FillerPreset fillerPreset) =>
         new(
             fillerPreset.Id,

ErsatzTV.Application/Filler/Queries/GetAllFillerPresetsForApi.cs

@@ -1,5 +0,0 @@
-using ErsatzTV.Core.Api.Filler;
-
-namespace ErsatzTV.Application.Filler;
-
-public record GetAllFillerPresetsForApi : IRequest<List<FillerPresetResponseModel>>;

ErsatzTV.Application/Filler/Queries/GetAllFillerPresetsForApiHandler.cs

@@ -1,22 +0,0 @@
-using ErsatzTV.Core.Api.Filler;
-using ErsatzTV.Core.Domain.Filler;
-using ErsatzTV.Infrastructure.Data;
-using Microsoft.EntityFrameworkCore;
-using static ErsatzTV.Application.Filler.Mapper;
-
-namespace ErsatzTV.Application.Filler;
-
-public class GetAllFillerPresetsForApiHandler(IDbContextFactory<TvContext> dbContextFactory)
-    : IRequestHandler<GetAllFillerPresetsForApi, List<FillerPresetResponseModel>>
-{
-    public async Task<List<FillerPresetResponseModel>> Handle(
-        GetAllFillerPresetsForApi request,
-        CancellationToken cancellationToken)
-    {
-        await using TvContext dbContext = await dbContextFactory.CreateDbContextAsync(cancellationToken);
-        List<FillerPreset> fillerPresets = await dbContext.FillerPresets
-            .AsNoTracking()
-            .ToListAsync(cancellationToken);
-        return fillerPresets.Map(ProjectToResponseModel).ToList();
-    }
-}

ErsatzTV.Application/Graphics/Queries/GetAllGraphicsElementsForApi.cs

@@ -1,5 +0,0 @@
-using ErsatzTV.Core.Api.Graphics;
-
-namespace ErsatzTV.Application.Graphics;
-
-public record GetAllGraphicsElementsForApi : IRequest<List<GraphicsElementResponseModel>>;

ErsatzTV.Application/Graphics/Queries/GetAllGraphicsElementsForApiHandler.cs

@@ -1,27 +0,0 @@
-using ErsatzTV.Core.Api.Graphics;
-using ErsatzTV.Core.Domain;
-using ErsatzTV.Infrastructure.Data;
-using Microsoft.EntityFrameworkCore;
-using static ErsatzTV.Application.Graphics.Mapper;
-
-namespace ErsatzTV.Application.Graphics;
-
-public class GetAllGraphicsElementsForApiHandler(IDbContextFactory<TvContext> dbContextFactory)
-    : IRequestHandler<GetAllGraphicsElementsForApi, List<GraphicsElementResponseModel>>
-{
-    public async Task<List<GraphicsElementResponseModel>> Handle(
-        GetAllGraphicsElementsForApi request,
-        CancellationToken cancellationToken)
-    {
-        await using TvContext dbContext = await dbContextFactory.CreateDbContextAsync(cancellationToken);
-        List<GraphicsElement> graphicsElements = await dbContext.GraphicsElements
-            .AsNoTracking()
-            .ToListAsync(cancellationToken);
-        return graphicsElements
-            .Map(ProjectToViewModel)
-            .OrderBy(e => e.Name == e.FileName)
-            .ThenBy(e => e.Name)
-            .Select(vm => new GraphicsElementResponseModel(vm.Id, vm.Name))
-            .ToList();
-    }
-}

ErsatzTV.Application/Watermarks/Mapper.cs

@@ -1,14 +1,10 @@
 using ErsatzTV.Application.Artworks;
-using ErsatzTV.Core.Api.Watermarks;
 using ErsatzTV.Core.Domain;
 
 namespace ErsatzTV.Application.Watermarks;
 
 internal static class Mapper
 {
-    internal static WatermarkResponseModel ProjectToResponseModel(ChannelWatermark watermark) =>
-        new(watermark.Id, watermark.Name);
-
     public static WatermarkViewModel ProjectToViewModel(ChannelWatermark watermark) =>
         new(
             watermark.Id,

ErsatzTV.Application/Watermarks/Queries/GetAllWatermarksForApi.cs

@@ -1,5 +0,0 @@
-using ErsatzTV.Core.Api.Watermarks;
-
-namespace ErsatzTV.Application.Watermarks;
-
-public record GetAllWatermarksForApi : IRequest<List<WatermarkResponseModel>>;

ErsatzTV.Application/Watermarks/Queries/GetAllWatermarksForApiHandler.cs

@@ -1,22 +0,0 @@
-using ErsatzTV.Core.Api.Watermarks;
-using ErsatzTV.Core.Domain;
-using ErsatzTV.Infrastructure.Data;
-using Microsoft.EntityFrameworkCore;
-using static ErsatzTV.Application.Watermarks.Mapper;
-
-namespace ErsatzTV.Application.Watermarks;
-
-public class GetAllWatermarksForApiHandler(IDbContextFactory<TvContext> dbContextFactory)
-    : IRequestHandler<GetAllWatermarksForApi, List<WatermarkResponseModel>>
-{
-    public async Task<List<WatermarkResponseModel>> Handle(
-        GetAllWatermarksForApi request,
-        CancellationToken cancellationToken)
-    {
-        await using TvContext dbContext = await dbContextFactory.CreateDbContextAsync(cancellationToken);
-        List<ChannelWatermark> watermarks = await dbContext.ChannelWatermarks
-            .AsNoTracking()
-            .ToListAsync(cancellationToken);
-        return watermarks.Map(ProjectToResponseModel).ToList();
-    }
-}

ErsatzTV.Core/Api/Channels/ChannelNowPlayingResponseModel.cs

@@ -0,0 +1,8 @@
+namespace ErsatzTV.Core.Api.Channels;
+
+#nullable enable
+
+public record ChannelNowPlayingResponseModel(
+    string Title,
+    DateTimeOffset StartUtc,
+    DateTimeOffset FinishUtc);

ErsatzTV.Core/Api/Channels/ChannelResponseModel.cs

@@ -5,8 +5,13 @@ namespace ErsatzTV.Core.Api.Channels;
 public record ChannelResponseModel(
     int Id,
     string Number,
+    double SortNumber,
     string Name,
+    string Group,
+    string Categories,
     [property: JsonProperty("ffmpegProfile")]
     string FFmpegProfile,
     string Language,
-    string StreamingMode);
+    string StreamingMode,
+    bool IsEnabled,
+    bool ShowInEpg);

ErsatzTV.Core/Api/Channels/ChannelStateResponseModel.cs

@@ -0,0 +1,9 @@
+namespace ErsatzTV.Core.Api.Channels;
+
+#nullable enable
+
+public record ChannelStateResponseModel(
+    int ChannelId,
+    string ChannelNumber,
+    bool OnAir,
+    ChannelNowPlayingResponseModel? NowPlaying);

ErsatzTV.Core/Api/Filler/FillerPresetResponseModel.cs

@@ -1,3 +0,0 @@
-namespace ErsatzTV.Core.Api.Filler;
-
-public record FillerPresetResponseModel(int Id, string Name);

ErsatzTV.Core/Api/Graphics/GraphicsElementResponseModel.cs

@@ -1,3 +0,0 @@
-namespace ErsatzTV.Core.Api.Graphics;
-
-public record GraphicsElementResponseModel(int Id, string Name);

ErsatzTV.Core/Api/Watermarks/WatermarkResponseModel.cs

@@ -1,3 +0,0 @@
-namespace ErsatzTV.Core.Api.Watermarks;
-
-public record WatermarkResponseModel(int Id, string Name);

ErsatzTV.Tests/Application/Channels/BulkDeleteChannelsHandlerTests.cs

@@ -0,0 +1,57 @@
+using ErsatzTV.Application.Channels;
+using ErsatzTV.Core;
+using ErsatzTV.Core.Errors;
+using ErsatzTV.Infrastructure.Data;
+using ErsatzTV.Tests.Support;
+using LanguageExt;
+using Microsoft.EntityFrameworkCore;
+using NSubstitute;
+using NUnit.Framework;
+using Shouldly;
+using Testably.Abstractions.Testing;
+
+namespace ErsatzTV.Tests.Application.Channels;
+
+[TestFixture]
+public class BulkDeleteChannelsHandlerTests : ChannelHandlerTestBase
+{
+    private readonly MockFileSystem _fileSystem = new();
+
+    private BulkDeleteChannelsHandler MakeHandler() => new(Db.Factory, Worker, _fileSystem, SearchTargets);
+
+    [Test]
+    public async Task Should_Delete_All_Channels()
+    {
+        await SeedChannel(1, "5");
+        await SeedChannel(2, "6");
+
+        Either<BaseError, Unit> result =
+            await MakeHandler().Handle(new BulkDeleteChannels([1, 2]), CancellationToken.None);
+
+        result.IsRight.ShouldBeTrue();
+
+        await using TvContext context = Db.CreateContext();
+        int count = await context.Channels.CountAsync();
+        count.ShouldBe(0);
+        SearchTargets.Received(1).SearchTargetsChanged();
+    }
+
+    [Test]
+    public async Task Should_Return_NotFound_And_Not_Delete_When_Any_Channel_Is_Missing()
+    {
+        await SeedChannel(1, "5");
+
+        Either<BaseError, Unit> result =
+            await MakeHandler().Handle(new BulkDeleteChannels([1, 99]), CancellationToken.None);
+
+        BaseError error = LeftOf(result);
+        error.ShouldBeOfType<NotFoundError>();
+
+        await using TvContext context = Db.CreateContext();
+        bool exists = await context.Channels.AnyAsync(c => c.Id == 1);
+        exists.ShouldBeTrue();
+    }
+
+    private static BaseError LeftOf<TR>(Either<BaseError, TR> either) =>
+        either.Match(Left: e => e, Right: _ => throw new AssertionException("Expected a Left result"));
+}

ErsatzTV.Tests/Application/Channels/BulkMoveChannelsToGroupHandlerTests.cs

@@ -0,0 +1,74 @@
+using ErsatzTV.Application.Channels;
+using ErsatzTV.Core;
+using ErsatzTV.Core.Errors;
+using ErsatzTV.Infrastructure.Data;
+using ErsatzTV.Tests.Support;
+using LanguageExt;
+using Microsoft.EntityFrameworkCore;
+using NSubstitute;
+using NUnit.Framework;
+using Shouldly;
+
+namespace ErsatzTV.Tests.Application.Channels;
+
+[TestFixture]
+public class BulkMoveChannelsToGroupHandlerTests : ChannelHandlerTestBase
+{
+    private BulkMoveChannelsToGroupHandler MakeHandler() => new(Db.Factory, Worker, SearchTargets);
+
+    [Test]
+    public async Task Should_Move_All_Channels_To_Group()
+    {
+        await SeedChannel(1, "5");
+        await SeedChannel(2, "6");
+
+        Either<BaseError, Unit> result =
+            await MakeHandler().Handle(new BulkMoveChannelsToGroup([1, 2], "Movies"), CancellationToken.None);
+
+        result.IsRight.ShouldBeTrue();
+
+        await using TvContext context = Db.CreateContext();
+        List<string> groups = await context.Channels
+            .OrderBy(c => c.Id)
+            .Select(c => c.Group)
+            .ToListAsync();
+        groups.ShouldBe(["Movies", "Movies"]);
+        SearchTargets.Received(1).SearchTargetsChanged();
+    }
+
+    [Test]
+    public async Task Should_Return_NotFound_And_Not_Move_When_Any_Channel_Is_Missing()
+    {
+        await SeedChannel(1, "5", group: "Original");
+
+        Either<BaseError, Unit> result =
+            await MakeHandler().Handle(new BulkMoveChannelsToGroup([1, 99], "Movies"), CancellationToken.None);
+
+        BaseError error = LeftOf(result);
+        error.ShouldBeOfType<NotFoundError>();
+
+        await using TvContext context = Db.CreateContext();
+        string group = await context.Channels.Where(c => c.Id == 1).Select(c => c.Group).SingleAsync();
+        group.ShouldBe("Original");
+    }
+
+    [Test]
+    public async Task Should_Reject_Empty_Group()
+    {
+        await SeedChannel(1, "5", group: "Original");
+
+        Either<BaseError, Unit> result =
+            await MakeHandler().Handle(new BulkMoveChannelsToGroup([1], ""), CancellationToken.None);
+
+        BaseError error = LeftOf(result);
+        error.ShouldNotBeOfType<NotFoundError>();
+        error.Value.ShouldContain("group");
+
+        await using TvContext context = Db.CreateContext();
+        string group = await context.Channels.Where(c => c.Id == 1).Select(c => c.Group).SingleAsync();
+        group.ShouldBe("Original");
+    }
+
+    private static BaseError LeftOf<TR>(Either<BaseError, TR> either) =>
+        either.Match(Left: e => e, Right: _ => throw new AssertionException("Expected a Left result"));
+}

ErsatzTV.Tests/Application/Channels/GetAllChannelsForApiHandlerTests.cs

@@ -0,0 +1,53 @@
+using ErsatzTV.Application.Channels;
+using ErsatzTV.Core;
+using ErsatzTV.Core.Api.Channels;
+using ErsatzTV.Core.Domain;
+using ErsatzTV.Core.Interfaces.Repositories;
+using NSubstitute;
+using NUnit.Framework;
+using Shouldly;
+
+namespace ErsatzTV.Tests.Application.Channels;
+
+[TestFixture]
+public class GetAllChannelsForApiHandlerTests
+{
+    [Test]
+    public async Task Should_Project_Management_Table_Fields()
+    {
+        IChannelRepository repository = Substitute.For<IChannelRepository>();
+        repository.GetAll(Arg.Any<CancellationToken>())
+            .Returns([
+                new Channel(Guid.NewGuid())
+                {
+                    Id = 7,
+                    Number = "7.1",
+                    SortNumber = 7.1,
+                    Name = "Retro Cartoons",
+                    Group = "Kids",
+                    Categories = "animation",
+                    FFmpegProfile = new FFmpegProfile { Name = "HLS 720p" },
+                    PreferredAudioLanguageCode = "eng",
+                    StreamingMode = StreamingMode.HttpLiveStreamingSegmenter,
+                    IsEnabled = false,
+                    ShowInEpg = false
+                }
+            ]);
+        var handler = new GetAllChannelsForApiHandler(repository);
+
+        List<ChannelResponseModel> result = await handler.Handle(new GetAllChannelsForApi(), CancellationToken.None);
+
+        ChannelResponseModel channel = result.ShouldHaveSingleItem();
+        channel.Id.ShouldBe(7);
+        channel.Number.ShouldBe("7.1");
+        channel.SortNumber.ShouldBe(7.1);
+        channel.Name.ShouldBe("Retro Cartoons");
+        channel.Group.ShouldBe("Kids");
+        channel.Categories.ShouldBe("animation");
+        channel.FFmpegProfile.ShouldBe("HLS 720p");
+        channel.Language.ShouldBe("eng");
+        channel.StreamingMode.ShouldBe("HLS Segmenter");
+        channel.IsEnabled.ShouldBeFalse();
+        channel.ShowInEpg.ShouldBeFalse();
+    }
+}

ErsatzTV.Tests/Application/Channels/GetChannelStatesForApiHandlerTests.cs

@@ -0,0 +1,329 @@
+using ErsatzTV.Application.Channels;
+using ErsatzTV.Core.Api.Channels;
+using ErsatzTV.Core.Domain;
+using ErsatzTV.Core.Domain.Filler;
+using ErsatzTV.Core.Interfaces.FFmpeg;
+using ErsatzTV.Infrastructure.Data;
+using ErsatzTV.Tests.Support;
+using NSubstitute;
+using NUnit.Framework;
+using Shouldly;
+
+namespace ErsatzTV.Tests.Application.Channels;
+
+[TestFixture]
+public class GetChannelStatesForApiHandlerTests
+{
+    private static readonly DateTime Now = new(2026, 7, 2, 12, 0, 0, DateTimeKind.Utc);
+
+    private InMemoryTvContext _db = null!;
+    private IFFmpegSegmenterService _segmenter = null!;
+
+    [SetUp]
+    public async Task SetUp()
+    {
+        _db = await InMemoryTvContext.CreateAsync();
+        _segmenter = Substitute.For<IFFmpegSegmenterService>();
+    }
+
+    [TearDown]
+    public async Task TearDown() => await _db.DisposeAsync();
+
+    [Test]
+    public async Task Handle_Should_Return_OnAir_And_Current_NowPlaying()
+    {
+        DateTime start = Now.AddMinutes(-10);
+        DateTime finish = Now.AddMinutes(20);
+        await SeedChannelWithMovie(start, finish);
+        _segmenter.IsActive("7.1").Returns(true);
+        var handler = new GetChannelStatesForApiHandler(_db.Factory, _segmenter);
+
+        List<ChannelStateResponseModel> result =
+            await handler.Handle(new GetChannelStatesForApi(Now), CancellationToken.None);
+
+        ChannelStateResponseModel state = result.ShouldHaveSingleItem();
+        state.ChannelId.ShouldBe(7);
+        state.ChannelNumber.ShouldBe("7.1");
+        state.OnAir.ShouldBeTrue();
+        state.NowPlaying.ShouldNotBeNull();
+        state.NowPlaying.Title.ShouldBe("Retro Cartoons");
+        state.NowPlaying.StartUtc.ShouldBe(new DateTimeOffset(start, TimeSpan.Zero));
+        state.NowPlaying.FinishUtc.ShouldBe(new DateTimeOffset(finish, TimeSpan.Zero));
+    }
+
+    [Test]
+    public async Task Handle_Should_Match_Item_When_Now_Equals_Start()
+    {
+        await SeedChannelWithMovie(Now, Now.AddMinutes(30));
+        var handler = new GetChannelStatesForApiHandler(_db.Factory, _segmenter);
+
+        List<ChannelStateResponseModel> result =
+            await handler.Handle(new GetChannelStatesForApi(Now), CancellationToken.None);
+
+        result.ShouldHaveSingleItem().NowPlaying.ShouldNotBeNull();
+    }
+
+    [Test]
+    public async Task Handle_Should_Not_Match_Item_When_Now_Equals_Finish()
+    {
+        await SeedChannelWithMovie(Now.AddMinutes(-30), Now);
+        var handler = new GetChannelStatesForApiHandler(_db.Factory, _segmenter);
+
+        List<ChannelStateResponseModel> result =
+            await handler.Handle(new GetChannelStatesForApi(Now), CancellationToken.None);
+
+        result.ShouldHaveSingleItem().NowPlaying.ShouldBeNull();
+    }
+
+    [Test]
+    public async Task Handle_Should_Return_Null_NowPlaying_When_No_Current_Item()
+    {
+        await using TvContext context = _db.CreateContext();
+        context.Channels.Add(MakeChannel(8, "8"));
+        await context.SaveChangesAsync();
+        var handler = new GetChannelStatesForApiHandler(_db.Factory, _segmenter);
+
+        List<ChannelStateResponseModel> result =
+            await handler.Handle(new GetChannelStatesForApi(Now), CancellationToken.None);
+
+        ChannelStateResponseModel state = result.ShouldHaveSingleItem();
+        state.OnAir.ShouldBeFalse();
+        state.NowPlaying.ShouldBeNull();
+    }
+
+    [Test]
+    public async Task Handle_Should_Surface_Program_Not_Filler_During_MidRoll_Break()
+    {
+        // program part 1 / mid-roll filler / program part 2, all in one guide group
+        await using TvContext context = _db.CreateContext();
+        Channel channel = MakeChannel(12, "12");
+        var movie = new Movie
+        {
+            Id = 120,
+            MovieMetadata = [new MovieMetadata { Title = "Feature Presentation" }]
+        };
+        var filler = new OtherVideo
+        {
+            Id = 121,
+            OtherVideoMetadata = [new OtherVideoMetadata { Title = "Some Bumper" }]
+        };
+        var playout = new Playout { Id = 122, Channel = channel, ChannelId = channel.Id, Items = [] };
+        PlayoutItem MakeItem(int id, MediaItem mediaItem, DateTime start, DateTime finish, FillerKind fillerKind) =>
+            new()
+            {
+                Id = id,
+                MediaItem = mediaItem,
+                MediaItemId = mediaItem.Id,
+                Playout = playout,
+                PlayoutId = playout.Id,
+                Start = start,
+                Finish = finish,
+                FillerKind = fillerKind,
+                GuideGroup = 1,
+                ChapterTitle = string.Empty
+            };
+
+        context.Channels.Add(channel);
+        context.Movies.Add(movie);
+        context.OtherVideos.Add(filler);
+        context.Playouts.Add(playout);
+        context.PlayoutItems.AddRange(
+            MakeItem(123, movie, Now.AddMinutes(-20), Now.AddMinutes(-2), FillerKind.None),
+            MakeItem(124, filler, Now.AddMinutes(-2), Now.AddMinutes(2), FillerKind.MidRoll),
+            MakeItem(125, movie, Now.AddMinutes(2), Now.AddMinutes(40), FillerKind.None));
+        await context.SaveChangesAsync();
+
+        var handler = new GetChannelStatesForApiHandler(_db.Factory, _segmenter);
+
+        List<ChannelStateResponseModel> result =
+            await handler.Handle(new GetChannelStatesForApi(Now), CancellationToken.None);
+
+        ChannelStateResponseModel state = result.ShouldHaveSingleItem();
+        state.NowPlaying.ShouldNotBeNull();
+        state.NowPlaying.Title.ShouldBe("Feature Presentation");
+        state.NowPlaying.StartUtc.ShouldBe(new DateTimeOffset(Now.AddMinutes(-20), TimeSpan.Zero));
+        state.NowPlaying.FinishUtc.ShouldBe(new DateTimeOffset(Now.AddMinutes(40), TimeSpan.Zero));
+    }
+
+    [Test]
+    public async Task Handle_Should_Return_Null_NowPlaying_For_Guide_Entry_With_Only_Filler()
+    {
+        await using TvContext context = _db.CreateContext();
+        Channel channel = MakeChannel(13, "13");
+        var filler = new OtherVideo
+        {
+            Id = 130,
+            OtherVideoMetadata = [new OtherVideoMetadata { Title = "Offline Loop" }]
+        };
+        var playout = new Playout { Id = 131, Channel = channel, ChannelId = channel.Id, Items = [] };
+        var item = new PlayoutItem
+        {
+            Id = 132,
+            MediaItem = filler,
+            MediaItemId = filler.Id,
+            Playout = playout,
+            PlayoutId = playout.Id,
+            Start = Now.AddMinutes(-5),
+            Finish = Now.AddMinutes(5),
+            FillerKind = FillerKind.Fallback,
+            GuideGroup = 1,
+            ChapterTitle = string.Empty
+        };
+
+        context.Channels.Add(channel);
+        context.OtherVideos.Add(filler);
+        context.Playouts.Add(playout);
+        context.PlayoutItems.Add(item);
+        await context.SaveChangesAsync();
+
+        var handler = new GetChannelStatesForApiHandler(_db.Factory, _segmenter);
+
+        List<ChannelStateResponseModel> result =
+            await handler.Handle(new GetChannelStatesForApi(Now), CancellationToken.None);
+
+        result.ShouldHaveSingleItem().NowPlaying.ShouldBeNull();
+    }
+
+    [Test]
+    public async Task Handle_Should_Map_Remote_Stream_NowPlaying_Title()
+    {
+        DateTime start = Now.AddMinutes(-10);
+        DateTime finish = Now.AddMinutes(20);
+
+        await using TvContext context = _db.CreateContext();
+        Channel channel = MakeChannel(9, "9");
+        var remoteStream = new RemoteStream
+        {
+            Id = 90,
+            RemoteStreamMetadata = [new RemoteStreamMetadata { Title = "Live Source" }]
+        };
+        var playout = new Playout { Id = 91, Channel = channel, ChannelId = channel.Id, Items = [] };
+        var item = new PlayoutItem
+        {
+            Id = 92,
+            MediaItem = remoteStream,
+            MediaItemId = remoteStream.Id,
+            Playout = playout,
+            PlayoutId = playout.Id,
+            Start = start,
+            Finish = finish,
+            ChapterTitle = string.Empty
+        };
+
+        context.Channels.Add(channel);
+        context.RemoteStreams.Add(remoteStream);
+        context.Playouts.Add(playout);
+        context.PlayoutItems.Add(item);
+        await context.SaveChangesAsync();
+
+        var handler = new GetChannelStatesForApiHandler(_db.Factory, _segmenter);
+
+        ChannelStateResponseModel state =
+            (await handler.Handle(new GetChannelStatesForApi(Now), CancellationToken.None))
+            .ShouldHaveSingleItem();
+
+        state.NowPlaying.ShouldNotBeNull();
+        state.NowPlaying.Title.ShouldBe("Live Source");
+    }
+
+    [Test]
+    public async Task Handle_Should_Resolve_Mirror_Channel_NowPlaying_From_Source_With_Offset()
+    {
+        TimeSpan offset = TimeSpan.FromHours(1);
+        DateTime sourceStart = Now.AddMinutes(-70);
+        DateTime sourceFinish = Now.AddMinutes(-40);
+
+        await using TvContext context = _db.CreateContext();
+        Channel source = MakeChannel(10, "10");
+        Channel mirror = MakeChannel(11, "11");
+        mirror.PlayoutSource = ChannelPlayoutSource.Mirror;
+        mirror.MirrorSourceChannelId = source.Id;
+        mirror.PlayoutOffset = offset;
+
+        var movie = new Movie
+        {
+            Id = 110,
+            MovieMetadata = [new MovieMetadata { Title = "Offset Feature" }]
+        };
+        var playout = new Playout { Id = 111, Channel = source, ChannelId = source.Id, Items = [] };
+        var item = new PlayoutItem
+        {
+            Id = 112,
+            MediaItem = movie,
+            MediaItemId = movie.Id,
+            Playout = playout,
+            PlayoutId = playout.Id,
+            Start = sourceStart,
+            Finish = sourceFinish,
+            ChapterTitle = string.Empty
+        };
+
+        context.Channels.AddRange(source, mirror);
+        context.Movies.Add(movie);
+        context.Playouts.Add(playout);
+        context.PlayoutItems.Add(item);
+        await context.SaveChangesAsync();
+
+        var handler = new GetChannelStatesForApiHandler(_db.Factory, _segmenter);
+
+        List<ChannelStateResponseModel> result =
+            await handler.Handle(new GetChannelStatesForApi(Now), CancellationToken.None);
+
+        ChannelStateResponseModel mirrorState = result.Single(s => s.ChannelId == mirror.Id);
+        mirrorState.NowPlaying.ShouldNotBeNull();
+        mirrorState.NowPlaying.Title.ShouldBe("Offset Feature");
+        mirrorState.NowPlaying.StartUtc.ShouldBe(new DateTimeOffset(sourceStart + offset, TimeSpan.Zero));
+        mirrorState.NowPlaying.FinishUtc.ShouldBe(new DateTimeOffset(sourceFinish + offset, TimeSpan.Zero));
+
+        // the source's own item is 40+ minutes in the past with no offset, so its own row is off-air
+        ChannelStateResponseModel sourceState = result.Single(s => s.ChannelId == source.Id);
+        sourceState.NowPlaying.ShouldBeNull();
+    }
+
+    private async Task SeedChannelWithMovie(DateTime start, DateTime finish)
+    {
+        await using TvContext context = _db.CreateContext();
+        Channel channel = MakeChannel(7, "7.1");
+        var movie = new Movie
+        {
+            Id = 10,
+            MovieMetadata = [new MovieMetadata { Title = "Retro Cartoons" }]
+        };
+        var playout = new Playout
+        {
+            Id = 20,
+            Channel = channel,
+            ChannelId = channel.Id,
+            Items = []
+        };
+        var item = new PlayoutItem
+        {
+            Id = 30,
+            MediaItem = movie,
+            MediaItemId = movie.Id,
+            Playout = playout,
+            PlayoutId = playout.Id,
+            Start = start,
+            Finish = finish,
+            ChapterTitle = string.Empty
+        };
+
+        context.Channels.Add(channel);
+        context.Movies.Add(movie);
+        context.Playouts.Add(playout);
+        context.PlayoutItems.Add(item);
+        await context.SaveChangesAsync();
+    }
+
+    private static Channel MakeChannel(int id, string number) =>
+        new(Guid.NewGuid())
+        {
+            Id = id,
+            Number = number,
+            SortNumber = id,
+            Name = $"Channel {number}",
+            Group = "Test",
+            Categories = string.Empty,
+            PreferredAudioLanguageCode = string.Empty
+        };
+}

ErsatzTV.Tests/Application/Channels/UpdateChannelNumbersHandlerTests.cs

@@ -0,0 +1,111 @@
+using ErsatzTV.Application.Channels;
+using ErsatzTV.Core;
+using ErsatzTV.Core.Errors;
+using ErsatzTV.Infrastructure.Data;
+using ErsatzTV.Tests.Support;
+using LanguageExt;
+using Microsoft.EntityFrameworkCore;
+using NUnit.Framework;
+using Shouldly;
+
+namespace ErsatzTV.Tests.Application.Channels;
+
+[TestFixture]
+public class UpdateChannelNumbersHandlerTests : ChannelHandlerTestBase
+{
+    private UpdateChannelNumbersHandler MakeHandler() => new(Db.Factory, Worker);
+
+    [Test]
+    public async Task Should_Renumber_All_Channels()
+    {
+        await SeedChannel(1, "5");
+        await SeedChannel(2, "6");
+
+        Option<BaseError> result = await MakeHandler().Handle(
+            new UpdateChannelNumbers(
+            [
+                new ChannelSortViewModel { Id = 1, Number = "10" },
+                new ChannelSortViewModel { Id = 2, Number = "11.1" }
+            ]),
+            CancellationToken.None);
+
+        result.IsNone.ShouldBeTrue();
+
+        await using TvContext context = Db.CreateContext();
+        var channels = await context.Channels
+            .OrderBy(c => c.Id)
+            .Select(c => new { c.Number, c.SortNumber })
+            .ToListAsync();
+        channels[0].Number.ShouldBe("10");
+        channels[0].SortNumber.ShouldBe(10);
+        channels[1].Number.ShouldBe("11.1");
+        channels[1].SortNumber.ShouldBe(11.1);
+    }
+
+    [Test]
+    public async Task Should_Return_NotFound_And_Not_Renumber_When_Any_Channel_Is_Missing()
+    {
+        await SeedChannel(1, "5");
+
+        Option<BaseError> result = await MakeHandler().Handle(
+            new UpdateChannelNumbers(
+            [
+                new ChannelSortViewModel { Id = 1, Number = "10" },
+                new ChannelSortViewModel { Id = 99, Number = "11" }
+            ]),
+            CancellationToken.None);
+
+        BaseError error = ErrorOf(result);
+        error.ShouldBeOfType<NotFoundError>();
+
+        await using TvContext context = Db.CreateContext();
+        string number = await context.Channels.Where(c => c.Id == 1).Select(c => c.Number).SingleAsync();
+        number.ShouldBe("5");
+    }
+
+    [Test]
+    public async Task Should_Reject_Duplicate_Numbers_And_Not_Renumber()
+    {
+        await SeedChannel(1, "5");
+        await SeedChannel(2, "6");
+
+        Option<BaseError> result = await MakeHandler().Handle(
+            new UpdateChannelNumbers(
+            [
+                new ChannelSortViewModel { Id = 1, Number = "10" },
+                new ChannelSortViewModel { Id = 2, Number = "10" }
+            ]),
+            CancellationToken.None);
+
+        BaseError error = ErrorOf(result);
+        error.ShouldNotBeOfType<NotFoundError>();
+        error.Value.ShouldContain("unique");
+
+        await using TvContext context = Db.CreateContext();
+        List<string> numbers = await context.Channels.OrderBy(c => c.Id).Select(c => c.Number).ToListAsync();
+        numbers.ShouldBe(["5", "6"]);
+    }
+
+    [Test]
+    public async Task Should_Reject_Invalid_Number_And_Not_Renumber()
+    {
+        await SeedChannel(1, "5");
+
+        Option<BaseError> result = await MakeHandler().Handle(
+            new UpdateChannelNumbers([new ChannelSortViewModel { Id = 1, Number = "10.123" }]),
+            CancellationToken.None);
+
+        BaseError error = ErrorOf(result);
+        error.ShouldNotBeOfType<NotFoundError>();
+        error.Value.ShouldContain("Invalid channel number");
+
+        await using TvContext context = Db.CreateContext();
+        string number = await context.Channels.Where(c => c.Id == 1).Select(c => c.Number).SingleAsync();
+        number.ShouldBe("5");
+    }
+
+    private static BaseError ErrorOf(Option<BaseError> result) =>
+        result.Match(
+            Some: error => error,
+            None: () => throw new AssertionException("Expected an error"));
+}

ErsatzTV.Tests/Application/Filler/FillerPresetHandlerTests.cs

@@ -1,63 +0,0 @@
-using ErsatzTV.Application.Filler;
-using ErsatzTV.Core.Api.Filler;
-using ErsatzTV.Core.Domain;
-using ErsatzTV.Core.Domain.Filler;
-using ErsatzTV.Infrastructure.Data;
-using ErsatzTV.Tests.Support;
-using NUnit.Framework;
-using Shouldly;
-
-namespace ErsatzTV.Tests.Application.Filler;
-
-[TestFixture]
-public class FillerPresetHandlerTests
-{
-    private InMemoryTvContext _db = null!;
-
-    [SetUp]
-    public async Task SetUp() => _db = await InMemoryTvContext.CreateAsync();
-
-    [TearDown]
-    public async Task TearDown() => await _db.DisposeAsync();
-
-    [Test]
-    public async Task GetAllFillerPresetsForApi_Should_Return_All_Presets()
-    {
-        await SeedPreset(1, "Intro");
-        await SeedPreset(2, "Outro");
-
-        var handler = new GetAllFillerPresetsForApiHandler(_db.Factory);
-
-        List<FillerPresetResponseModel> result =
-            await handler.Handle(new GetAllFillerPresetsForApi(), CancellationToken.None);
-
-        result.Count.ShouldBe(2);
-        result.ShouldContain(new FillerPresetResponseModel(1, "Intro"));
-        result.ShouldContain(new FillerPresetResponseModel(2, "Outro"));
-    }
-
-    [Test]
-    public async Task GetAllFillerPresetsForApi_Should_Return_Empty_List_When_None_Exist()
-    {
-        var handler = new GetAllFillerPresetsForApiHandler(_db.Factory);
-
-        List<FillerPresetResponseModel> result =
-            await handler.Handle(new GetAllFillerPresetsForApi(), CancellationToken.None);
-
-        result.ShouldBeEmpty();
-    }
-
-    private async Task SeedPreset(int id, string name)
-    {
-        await using TvContext context = _db.CreateContext();
-        context.FillerPresets.Add(new FillerPreset
-        {
-            Id = id,
-            Name = name,
-            FillerKind = FillerKind.PreRoll,
-            FillerMode = FillerMode.Duration,
-            CollectionType = CollectionType.Collection
-        });
-        await context.SaveChangesAsync();
-    }
-}

ErsatzTV.Tests/Application/Graphics/GraphicsElementHandlerTests.cs

@@ -1,77 +0,0 @@
-using ErsatzTV.Application.Graphics;
-using ErsatzTV.Core.Api.Graphics;
-using ErsatzTV.Core.Domain;
-using ErsatzTV.Infrastructure.Data;
-using ErsatzTV.Tests.Support;
-using NUnit.Framework;
-using Shouldly;
-
-namespace ErsatzTV.Tests.Application.Graphics;
-
-[TestFixture]
-public class GraphicsElementHandlerTests
-{
-    private InMemoryTvContext _db = null!;
-
-    [SetUp]
-    public async Task SetUp() => _db = await InMemoryTvContext.CreateAsync();
-
-    [TearDown]
-    public async Task TearDown() => await _db.DisposeAsync();
-
-    [Test]
-    public async Task GetAllGraphicsElementsForApi_Should_Return_All_Elements()
-    {
-        await SeedElement(1, "watermark.png", GraphicsElementKind.Image, "Custom Watermark");
-        await SeedElement(2, "clock.png", GraphicsElementKind.Image, string.Empty);
-
-        var handler = new GetAllGraphicsElementsForApiHandler(_db.Factory);
-
-        List<GraphicsElementResponseModel> result =
-            await handler.Handle(new GetAllGraphicsElementsForApi(), CancellationToken.None);
-
-        result.Count.ShouldBe(2);
-        result.Select(e => e.Id).ShouldBe([1, 2]);
-    }
-
-    [Test]
-    public async Task GetAllGraphicsElementsForApi_Should_Order_Named_Elements_Before_Unnamed()
-    {
-        // unnamed element's projected Name equals its FileName -> should sort after named elements
-        await SeedElement(1, "aaa.png", GraphicsElementKind.Image, string.Empty);
-        await SeedElement(2, "zzz.png", GraphicsElementKind.Image, "A Custom Name");
-
-        var handler = new GetAllGraphicsElementsForApiHandler(_db.Factory);
-
-        List<GraphicsElementResponseModel> result =
-            await handler.Handle(new GetAllGraphicsElementsForApi(), CancellationToken.None);
-
-        result.Count.ShouldBe(2);
-        result[0].Id.ShouldBe(2);
-        result[1].Id.ShouldBe(1);
-    }
-
-    [Test]
-    public async Task GetAllGraphicsElementsForApi_Should_Return_Empty_List_When_None_Exist()
-    {
-        var handler = new GetAllGraphicsElementsForApiHandler(_db.Factory);
-
-        List<GraphicsElementResponseModel> result =
-            await handler.Handle(new GetAllGraphicsElementsForApi(), CancellationToken.None);
-
-        result.ShouldBeEmpty();
-    }
-
-    private async Task SeedElement(int id, string path, GraphicsElementKind kind, string name)
-    {
-        await using TvContext context = _db.CreateContext();
-        context.GraphicsElements.Add(new GraphicsElement
-        {
-            Id = id,
-            Path = path,
-            Name = name,
-            Kind = kind
-        });
-        await context.SaveChangesAsync();
-    }
-}

ErsatzTV.Tests/Application/Watermarks/WatermarkHandlerTests.cs

@@ -1,71 +0,0 @@
-using ErsatzTV.Application.Watermarks;
-using ErsatzTV.Core.Api.Watermarks;
-using ErsatzTV.Core.Domain;
-using ErsatzTV.FFmpeg.State;
-using ErsatzTV.Infrastructure.Data;
-using ErsatzTV.Tests.Support;
-using NUnit.Framework;
-using Shouldly;
-
-namespace ErsatzTV.Tests.Application.Watermarks;
-
-[TestFixture]
-public class WatermarkHandlerTests
-{
-    private InMemoryTvContext _db = null!;
-
-    [SetUp]
-    public async Task SetUp() => _db = await InMemoryTvContext.CreateAsync();
-
-    [TearDown]
-    public async Task TearDown() => await _db.DisposeAsync();
-
-    [Test]
-    public async Task GetAllWatermarksForApi_Should_Return_All_Watermarks()
-    {
-        await SeedWatermark(1, "Bug");
-        await SeedWatermark(2, "Logo");
-
-        var handler = new GetAllWatermarksForApiHandler(_db.Factory);
-
-        List<WatermarkResponseModel> result =
-            await handler.Handle(new GetAllWatermarksForApi(), CancellationToken.None);
-
-        result.Count.ShouldBe(2);
-        result.ShouldContain(new WatermarkResponseModel(1, "Bug"));
-        result.ShouldContain(new WatermarkResponseModel(2, "Logo"));
-    }
-
-    [Test]
-    public async Task GetAllWatermarksForApi_Should_Return_Empty_List_When_None_Exist()
-    {
-        var handler = new GetAllWatermarksForApiHandler(_db.Factory);
-
-        List<WatermarkResponseModel> result =
-            await handler.Handle(new GetAllWatermarksForApi(), CancellationToken.None);
-
-        result.ShouldBeEmpty();
-    }
-
-    private async Task SeedWatermark(int id, string name)
-    {
-        await using TvContext context = _db.CreateContext();
-        context.ChannelWatermarks.Add(new ChannelWatermark
-        {
-            Id = id,
-            Name = name,
-            Mode = ChannelWatermarkMode.Permanent,
-            ImageSource = ChannelWatermarkImageSource.Custom,
-            Image = "watermark.png",
-            Location = WatermarkLocation.BottomRight,
-            Size = WatermarkSize.Scaled,
-            WidthPercent = 10,
-            HorizontalMarginPercent = 2,
-            VerticalMarginPercent = 2,
-            FrequencyMinutes = 15,
-            DurationSeconds = 30,
-            Opacity = 100
-        });
-        await context.SaveChangesAsync();
-    }
-}

ErsatzTV.Tests/Controllers/ApiErrorResponseMetadataTests.cs

@@ -17,6 +17,12 @@ public class ApiErrorResponseMetadataTests
     [TestCase(typeof(ChannelController), nameof(ChannelController.Update), StatusCodes.Status422UnprocessableEntity)]
     [TestCase(typeof(ChannelController), nameof(ChannelController.Delete), StatusCodes.Status404NotFound)]
     [TestCase(typeof(ChannelController), nameof(ChannelController.Delete), StatusCodes.Status422UnprocessableEntity)]
+    [TestCase(typeof(ChannelController), nameof(ChannelController.BulkRenumber), StatusCodes.Status404NotFound)]
+    [TestCase(typeof(ChannelController), nameof(ChannelController.BulkRenumber), StatusCodes.Status422UnprocessableEntity)]
+    [TestCase(typeof(ChannelController), nameof(ChannelController.BulkMoveToGroup), StatusCodes.Status404NotFound)]
+    [TestCase(typeof(ChannelController), nameof(ChannelController.BulkMoveToGroup), StatusCodes.Status422UnprocessableEntity)]
+    [TestCase(typeof(ChannelController), nameof(ChannelController.BulkDelete), StatusCodes.Status404NotFound)]
+    [TestCase(typeof(ChannelController), nameof(ChannelController.BulkDelete), StatusCodes.Status422UnprocessableEntity)]
     [TestCase(typeof(ChannelController), nameof(ChannelController.ResetPlayout), StatusCodes.Status404NotFound)]
     [TestCase(typeof(CollectionController), nameof(CollectionController.GetById), StatusCodes.Status404NotFound)]
     [TestCase(typeof(CollectionController), nameof(CollectionController.Create), StatusCodes.Status404NotFound)]

ErsatzTV.Tests/Controllers/ChannelControllerTests.cs

@@ -6,6 +6,7 @@ using ErsatzTV.Application.Playouts;
 using ErsatzTV.Controllers.Api;
 using ErsatzTV.Controllers.Api.Requests;
 using ErsatzTV.Core;
+using ErsatzTV.Core.Api.Channels;
 using ErsatzTV.Core.Domain;
 using ErsatzTV.Core.Errors;
 using LanguageExt;
@@ -34,6 +35,25 @@ public class ChannelControllerTests
         _controller = new ChannelController(writer, _mediator);
     }
 
+    [Test]
+    public async Task GetState_Should_Return_200_With_Channel_State()
+    {
+        var state = new ChannelStateResponseModel(
+            7,
+            "7.1",
+            true,
+            new ChannelNowPlayingResponseModel(
+                "Retro Cartoons",
+                new DateTimeOffset(2026, 7, 2, 17, 0, 0, TimeSpan.Zero),
+                new DateTimeOffset(2026, 7, 2, 17, 30, 0, TimeSpan.Zero)));
+        _mediator.Send(Arg.Any<GetChannelStatesForApi>(), Arg.Any<CancellationToken>())
+            .Returns([state]);
+
+        List<ChannelStateResponseModel> result = await _controller.GetState(CancellationToken.None);
+
+        result.ShouldBe(new List<ChannelStateResponseModel> { state });
+    }
+
     [Test]
     public async Task Create_Should_Return_201_With_Location_And_Body()
     {
@@ -125,6 +145,95 @@ public class ChannelControllerTests
         result.ShouldBeOfType<NotFoundObjectResult>();
     }
 
+    [Test]
+    public async Task BulkRenumber_Should_Return_204_And_Map_Request()
+    {
+        _mediator.Send(Arg.Any<UpdateChannelNumbers>(), Arg.Any<CancellationToken>())
+            .Returns(Option<BaseError>.None);
+
+        IActionResult result = await _controller.BulkRenumber(
+            new BulkRenumberChannelsRequest([new BulkRenumberChannelRequest(1, "10")]),
+            CancellationToken.None);
+
+        result.ShouldBeOfType<NoContentResult>();
+        await _mediator.Received(1).Send(
+            Arg.Is<UpdateChannelNumbers>(
+                c => c.Channels.Count == 1 && c.Channels[0].Id == 1 && c.Channels[0].Number == "10"),
+            Arg.Any<CancellationToken>());
+    }
+
+    [Test]
+    public async Task BulkRenumber_Should_Return_422_On_Validation_Error()
+    {
+        _mediator.Send(Arg.Any<UpdateChannelNumbers>(), Arg.Any<CancellationToken>())
+            .Returns(Option<BaseError>.Some(BaseError.New("bad")));
+
+        IActionResult result = await _controller.BulkRenumber(
+            new BulkRenumberChannelsRequest([new BulkRenumberChannelRequest(1, "bad")]),
+            CancellationToken.None);
+
+        result.ShouldBeOfType<UnprocessableEntityObjectResult>();
+    }
+
+    [Test]
+    public async Task BulkMoveToGroup_Should_Return_204_And_Map_Request()
+    {
+        _mediator.Send(Arg.Any<BulkMoveChannelsToGroup>(), Arg.Any<CancellationToken>())
+            .Returns(Right<BaseError, Unit>(Unit.Default));
+
+        IActionResult result = await _controller.BulkMoveToGroup(
+            new BulkMoveChannelsToGroupRequest([1, 2], "Movies"),
+            CancellationToken.None);
+
+        result.ShouldBeOfType<NoContentResult>();
+        await _mediator.Received(1).Send(
+            Arg.Is<BulkMoveChannelsToGroup>(
+                c => c.ChannelIds.SequenceEqual(new[] { 1, 2 }) && c.Group == "Movies"),
+            Arg.Any<CancellationToken>());
+    }
+
+    [Test]
+    public async Task BulkMoveToGroup_Should_Return_404_For_NotFoundError()
+    {
+        _mediator.Send(Arg.Any<BulkMoveChannelsToGroup>(), Arg.Any<CancellationToken>())
+            .Returns(Left<BaseError, Unit>(new NotFoundError("missing")));
+
+        IActionResult result = await _controller.BulkMoveToGroup(
+            new BulkMoveChannelsToGroupRequest([99], "Movies"),
+            CancellationToken.None);
+
+        result.ShouldBeOfType<NotFoundObjectResult>();
+    }
+
+    [Test]
+    public async Task BulkDelete_Should_Return_204_And_Map_Request()
+    {
+        _mediator.Send(Arg.Any<BulkDeleteChannels>(), Arg.Any<CancellationToken>())
+            .Returns(Right<BaseError, Unit>(Unit.Default));
+
+        IActionResult result = await _controller.BulkDelete(
+            new BulkDeleteChannelsRequest([1, 2]),
+            CancellationToken.None);
+
+        result.ShouldBeOfType<NoContentResult>();
+        await _mediator.Received(1).Send(
+            Arg.Is<BulkDeleteChannels>(c => c.ChannelIds.SequenceEqual(new[] { 1, 2 })),
+            Arg.Any<CancellationToken>());
+    }
+
+    [Test]
+    public async Task BulkDelete_Should_Return_404_For_NotFoundError()
+    {
+        _mediator.Send(Arg.Any<BulkDeleteChannels>(), Arg.Any<CancellationToken>())
+            .Returns(Left<BaseError, Unit>(new NotFoundError("missing")));
+
+        IActionResult result = await _controller.BulkDelete(
+            new BulkDeleteChannelsRequest([99]),
+            CancellationToken.None);
+
+        result.ShouldBeOfType<NotFoundObjectResult>();
+    }
+
     [Test]
     public async Task GetById_Should_Return_200_For_Some()
     {

ErsatzTV.Tests/Controllers/FillerPresetControllerTests.cs

@@ -1,63 +0,0 @@
-using System.Reflection;
-using ErsatzTV.Application.Filler;
-using ErsatzTV.Controllers.Api;
-using ErsatzTV.Core.Api.Filler;
-using MediatR;
-using Microsoft.AspNetCore.Mvc.Routing;
-using NSubstitute;
-using NUnit.Framework;
-using Shouldly;
-
-namespace ErsatzTV.Tests.Controllers;
-
-[TestFixture]
-public class FillerPresetControllerTests
-{
-    private FillerPresetController _controller = null!;
-    private IMediator _mediator = null!;
-
-    [SetUp]
-    public void SetUp()
-    {
-        _mediator = Substitute.For<IMediator>();
-        _controller = new FillerPresetController(_mediator);
-    }
-
-    [Test]
-    public void Controller_Should_Expose_Idiomatic_Rest_Route()
-    {
-        MethodInfo action = typeof(FillerPresetController).GetMethod(nameof(FillerPresetController.GetAll))
-            ?? throw new AssertionException("Missing action GetAll");
-
-        HttpMethodAttribute attribute = action.GetCustomAttributes<HttpMethodAttribute>(inherit: true).Single();
-        attribute.HttpMethods.ShouldContain("GET");
-        attribute.Template.ShouldBe("/api/filler-presets");
-    }
-
-    [Test]
-    public async Task GetAll_Should_Return_FillerPresets()
-    {
-        List<FillerPresetResponseModel> models =
-        [
-            new FillerPresetResponseModel(1, "Intro"),
-            new FillerPresetResponseModel(2, "Outro")
-        ];
-        _mediator.Send(Arg.Any<GetAllFillerPresetsForApi>(), Arg.Any<CancellationToken>())
-            .Returns(models);
-
-        List<FillerPresetResponseModel> result = await _controller.GetAll(CancellationToken.None);
-
-        result.ShouldBe(models);
-    }
-
-    [Test]
-    public async Task GetAll_Should_Return_Empty_List_When_None_Exist()
-    {
-        _mediator.Send(Arg.Any<GetAllFillerPresetsForApi>(), Arg.Any<CancellationToken>())
-            .Returns([]);
-
-        List<FillerPresetResponseModel> result = await _controller.GetAll(CancellationToken.None);
-
-        result.ShouldBeEmpty();
-    }
-}

ErsatzTV.Tests/Controllers/GraphicsElementControllerTests.cs

@@ -1,63 +0,0 @@
-using System.Reflection;
-using ErsatzTV.Application.Graphics;
-using ErsatzTV.Controllers.Api;
-using ErsatzTV.Core.Api.Graphics;
-using MediatR;
-using Microsoft.AspNetCore.Mvc.Routing;
-using NSubstitute;
-using NUnit.Framework;
-using Shouldly;
-
-namespace ErsatzTV.Tests.Controllers;
-
-[TestFixture]
-public class GraphicsElementControllerTests
-{
-    private GraphicsElementController _controller = null!;
-    private IMediator _mediator = null!;
-
-    [SetUp]
-    public void SetUp()
-    {
-        _mediator = Substitute.For<IMediator>();
-        _controller = new GraphicsElementController(_mediator);
-    }
-
-    [Test]
-    public void Controller_Should_Expose_Idiomatic_Rest_Route()
-    {
-        MethodInfo action = typeof(GraphicsElementController).GetMethod(nameof(GraphicsElementController.GetAll))
-            ?? throw new AssertionException("Missing action GetAll");
-
-        HttpMethodAttribute attribute = action.GetCustomAttributes<HttpMethodAttribute>(inherit: true).Single();
-        attribute.HttpMethods.ShouldContain("GET");
-        attribute.Template.ShouldBe("/api/graphics-elements");
-    }
-
-    [Test]
-    public async Task GetAll_Should_Return_GraphicsElements()
-    {
-        List<GraphicsElementResponseModel> models =
-        [
-            new GraphicsElementResponseModel(1, "Lower Third (lower-third.png)"),
-            new GraphicsElementResponseModel(2, "bug.png")
-        ];
-        _mediator.Send(Arg.Any<GetAllGraphicsElementsForApi>(), Arg.Any<CancellationToken>())
-            .Returns(models);
-
-        List<GraphicsElementResponseModel> result = await _controller.GetAll(CancellationToken.None);
-
-        result.ShouldBe(models);
-    }
-
-    [Test]
-    public async Task GetAll_Should_Return_Empty_List_When_None_Exist()
-    {
-        _mediator.Send(Arg.Any<GetAllGraphicsElementsForApi>(), Arg.Any<CancellationToken>())
-            .Returns([]);
-
-        List<GraphicsElementResponseModel> result = await _controller.GetAll(CancellationToken.None);
-
-        result.ShouldBeEmpty();
-    }
-}

ErsatzTV.Tests/Controllers/OpenApiErrorResponseContractTests.cs

@@ -23,6 +23,82 @@ public class OpenApiErrorResponseContractTests
             .ShouldContain("One");
     }
 
+    [Test]
+    public void Static_OpenApi_Should_Document_Channel_List_Management_Fields()
+    {
+        using JsonDocument document = JsonDocument.Parse(File.ReadAllText(FindOpenApiDocument()));
+
+        JsonElement schema = document.RootElement
+            .GetProperty("components")
+            .GetProperty("schemas")
+            .GetProperty("ChannelResponseModel")
+            .GetProperty("properties");
+
+        schema.TryGetProperty("group", out _).ShouldBeTrue();
+        schema.TryGetProperty("isEnabled", out _).ShouldBeTrue();
+        schema.TryGetProperty("showInEpg", out _).ShouldBeTrue();
+        schema.TryGetProperty("sortNumber", out _).ShouldBeTrue();
+        schema.TryGetProperty("categories", out _).ShouldBeTrue();
+    }
+
+    [Test]
+    public void Static_OpenApi_Should_Document_Channel_State_Response()
+    {
+        using JsonDocument document = JsonDocument.Parse(File.ReadAllText(FindOpenApiDocument()));
+
+        JsonElement getState = document.RootElement
+            .GetProperty("paths")
+            .GetProperty("/api/channels/state")
+            .GetProperty("get");
+
+        JsonElement schema = getState
+            .GetProperty("responses")
+            .GetProperty("200")
+            .GetProperty("content")
+            .GetProperty("application/json")
+            .GetProperty("schema");
+
+        schema.GetProperty("type").GetString().ShouldBe("array");
+        schema.GetProperty("items").GetProperty("$ref").GetString()
+            .ShouldBe("#/components/schemas/ChannelStateResponseModel");
+
+        JsonElement stateProperties = document.RootElement
+            .GetProperty("components")
+            .GetProperty("schemas")
+            .GetProperty("ChannelStateResponseModel")
+            .GetProperty("properties");
+
+        stateProperties.TryGetProperty("channelId", out _).ShouldBeTrue();
+        stateProperties.TryGetProperty("channelNumber", out _).ShouldBeTrue();
+        stateProperties.TryGetProperty("onAir", out _).ShouldBeTrue();
+        stateProperties.TryGetProperty("nowPlaying", out JsonElement nowPlaying).ShouldBeTrue();
+
+        JsonElement nowPlayingOneOf = nowPlaying.GetProperty("oneOf");
+        nowPlayingOneOf.EnumerateArray().Count().ShouldBe(2);
+        nowPlayingOneOf.EnumerateArray()
+            .Any(s => s.TryGetProperty("type", out JsonElement type) && type.GetString() == "null")
+            .ShouldBeTrue();
+        nowPlayingOneOf.EnumerateArray()
+            .Any(s => s.TryGetProperty("$ref", out JsonElement schemaRef) &&
+                schemaRef.GetString() == "#/components/schemas/ChannelNowPlayingResponseModel")
+            .ShouldBeTrue();
+
+        JsonElement nowPlayingProperties = document.RootElement
+            .GetProperty("components")
+            .GetProperty("schemas")
+            .GetProperty("ChannelNowPlayingResponseModel")
+            .GetProperty("properties");
+
+        nowPlayingProperties.TryGetProperty("title", out _).ShouldBeTrue();
+        nowPlayingProperties.TryGetProperty("startUtc", out JsonElement startUtc).ShouldBeTrue();
+        nowPlayingProperties.TryGetProperty("finishUtc", out JsonElement finishUtc).ShouldBeTrue();
+
+        startUtc.GetProperty("type").GetString().ShouldBe("string");
+        startUtc.GetProperty("format").GetString().ShouldBe("date-time");
+        finishUtc.GetProperty("type").GetString().ShouldBe("string");
+        finishUtc.GetProperty("format").GetString().ShouldBe("date-time");
+    }
+
     [TestCase("/api/channels/{id}", "get", "404")]
     [TestCase("/api/channels", "post", "404")]
     [TestCase("/api/channels", "post", "422")]
@@ -30,6 +106,12 @@ public class OpenApiErrorResponseContractTests
     [TestCase("/api/channels/{id}", "put", "422")]
     [TestCase("/api/channels/{id}", "delete", "404")]
     [TestCase("/api/channels/{id}", "delete", "422")]
+    [TestCase("/api/channels/bulk/renumber", "post", "404")]
+    [TestCase("/api/channels/bulk/renumber", "post", "422")]
+    [TestCase("/api/channels/bulk/group", "post", "404")]
+    [TestCase("/api/channels/bulk/group", "post", "422")]
+    [TestCase("/api/channels/bulk/delete", "post", "404")]
+    [TestCase("/api/channels/bulk/delete", "post", "422")]
     [TestCase("/api/channels/{channelNumber}/playout/reset", "post", "404")]
     [TestCase("/api/collections/{id}", "get", "404")]
     [TestCase("/api/collections", "post", "404")]

ErsatzTV.Tests/Controllers/WatermarkControllerTests.cs

@@ -1,63 +0,0 @@
-using System.Reflection;
-using ErsatzTV.Application.Watermarks;
-using ErsatzTV.Controllers.Api;
-using ErsatzTV.Core.Api.Watermarks;
-using MediatR;
-using Microsoft.AspNetCore.Mvc.Routing;
-using NSubstitute;
-using NUnit.Framework;
-using Shouldly;
-
-namespace ErsatzTV.Tests.Controllers;
-
-[TestFixture]
-public class WatermarkControllerTests
-{
-    private WatermarkController _controller = null!;
-    private IMediator _mediator = null!;
-
-    [SetUp]
-    public void SetUp()
-    {
-        _mediator = Substitute.For<IMediator>();
-        _controller = new WatermarkController(_mediator);
-    }
-
-    [Test]
-    public void Controller_Should_Expose_Idiomatic_Rest_Route()
-    {
-        MethodInfo action = typeof(WatermarkController).GetMethod(nameof(WatermarkController.GetAll))
-            ?? throw new AssertionException("Missing action GetAll");
-
-        HttpMethodAttribute attribute = action.GetCustomAttributes<HttpMethodAttribute>(inherit: true).Single();
-        attribute.HttpMethods.ShouldContain("GET");
-        attribute.Template.ShouldBe("/api/watermarks");
-    }
-
-    [Test]
-    public async Task GetAll_Should_Return_Watermarks()
-    {
-        List<WatermarkResponseModel> models =
-        [
-            new WatermarkResponseModel(1, "Corner Logo"),
-            new WatermarkResponseModel(2, "Ticker")
-        ];
-        _mediator.Send(Arg.Any<GetAllWatermarksForApi>(), Arg.Any<CancellationToken>())
-            .Returns(models);
-
-        List<WatermarkResponseModel> result = await _controller.GetAll(CancellationToken.None);
-
-        result.ShouldBe(models);
-    }
-
-    [Test]
-    public async Task GetAll_Should_Return_Empty_List_When_None_Exist()
-    {
-        _mediator.Send(Arg.Any<GetAllWatermarksForApi>(), Arg.Any<CancellationToken>())
-            .Returns([]);
-
-        List<WatermarkResponseModel> result = await _controller.GetAll(CancellationToken.None);
-
-        result.ShouldBeEmpty();
-    }
-}

ErsatzTV.Tests/StartupSpaHostingTests.cs

@@ -0,0 +1,45 @@
+using NUnit.Framework;
+using Shouldly;
+
+namespace ErsatzTV.Tests;
+
+[TestFixture]
+public class StartupSpaHostingTests
+{
+    private static readonly string StartupSource = File.ReadAllText(FindStartupPath());
+
+    [Test]
+    public void Startup_Should_Mount_ChicoryTv_Spa_At_App_Path()
+    {
+        StartupSource.ShouldContain("ctx.Request.Path.StartsWithSegments(\"/app\")");
+        StartupSource.ShouldContain("MapWhen(");
+        StartupSource.ShouldContain("SpaStaticFileRoot");
+        StartupSource.ShouldContain("RequestPath = \"/app\"");
+        StartupSource.ShouldContain("appIndexFile");
+    }
+
+    [Test]
+    public void Startup_Should_Not_Send_App_Routes_To_Blazor_Fallback()
+    {
+        StartupSource.ShouldContain("!IsSpaPath(ctx.Request.Path)");
+        StartupSource.ShouldContain("bool IsSpaPath(PathString path)");
+    }
+
+    private static string FindStartupPath()
+    {
+        DirectoryInfo? directory = new(TestContext.CurrentContext.TestDirectory);
+
+        while (directory is not null)
+        {
+            string candidate = Path.Combine(directory.FullName, "ErsatzTV", "Startup.cs");
+            if (File.Exists(candidate))
+            {
+                return candidate;
+            }
+
+            directory = directory.Parent;
+        }
+
+        throw new FileNotFoundException("Could not find ErsatzTV/Startup.cs");
+    }
+}

ErsatzTV.Tests/Support/ChannelHandlerTestBase.cs

@@ -35,7 +35,12 @@ public abstract class ChannelHandlerTestBase
         await context.SaveChangesAsync();
     }
 
-    protected async Task SeedChannel(int id, string number, string name = "Test", int ffmpegProfileId = 1)
+    protected async Task SeedChannel(
+        int id,
+        string number,
+        string name = "Test",
+        int ffmpegProfileId = 1,
+        string group = "ErsatzTV")
     {
         await using TvContext context = Db.CreateContext();
         context.Channels.Add(
@@ -44,7 +49,7 @@ public abstract class ChannelHandlerTestBase
                 Id = id,
                 Number = number,
                 Name = name,
-                Group = "ErsatzTV",
+                Group = group,
                 Categories = string.Empty,
                 FFmpegProfileId = ffmpegProfileId,
                 StreamSelector = string.Empty,

ErsatzTV/Controllers/Api/ChannelController.cs

@@ -21,6 +21,13 @@ public class ChannelController(ChannelWriter<IBackgroundServiceRequest> workerCh
     [EndpointGroupName("general")]
     public async Task<List<ChannelResponseModel>> GetAll() => await mediator.Send(new GetAllChannelsForApi());
 
+    [HttpGet("/api/channels/state")]
+    [Tags("Channels")]
+    [EndpointSummary("Get channel runtime state")]
+    [EndpointGroupName("general")]
+    public async Task<List<ChannelStateResponseModel>> GetState(CancellationToken cancellationToken) =>
+        await mediator.Send(new GetChannelStatesForApi(DateTime.UtcNow), cancellationToken);
+
     [HttpGet("/api/channels/{id:int}", Name = "GetChannelById")]
     [Tags("Channels")]
     [EndpointSummary("Get a channel by id")]
@@ -87,6 +94,53 @@ public class ChannelController(ChannelWriter<IBackgroundServiceRequest> workerCh
         return result.ToDeletedResult();
     }
 
+    [HttpPost("/api/channels/bulk/renumber")]
+    [Tags("Channels")]
+    [EndpointSummary("Renumber channels")]
+    [EndpointGroupName("general")]
+    [ProducesResponseType(StatusCodes.Status204NoContent)]
+    [ProducesResponseType(typeof(ProblemDetails), StatusCodes.Status404NotFound)]
+    [ProducesResponseType(typeof(ProblemDetails), StatusCodes.Status422UnprocessableEntity)]
+    public async Task<IActionResult> BulkRenumber(
+        [Required] [FromBody] BulkRenumberChannelsRequest request,
+        CancellationToken cancellationToken)
+    {
+        Option<BaseError> result = await mediator.Send(request.ToCommand(), cancellationToken);
+        return result.Match<IActionResult>(
+            Some: error => error.ToErrorResult(),
+            None: () => new NoContentResult());
+    }
+
+    [HttpPost("/api/channels/bulk/group")]
+    [Tags("Channels")]
+    [EndpointSummary("Move channels to a group")]
+    [EndpointGroupName("general")]
+    [ProducesResponseType(StatusCodes.Status204NoContent)]
+    [ProducesResponseType(typeof(ProblemDetails), StatusCodes.Status404NotFound)]
+    [ProducesResponseType(typeof(ProblemDetails), StatusCodes.Status422UnprocessableEntity)]
+    public async Task<IActionResult> BulkMoveToGroup(
+        [Required] [FromBody] BulkMoveChannelsToGroupRequest request,
+        CancellationToken cancellationToken)
+    {
+        Either<BaseError, Unit> result = await mediator.Send(request.ToCommand(), cancellationToken);
+        return result.ToDeletedResult();
+    }
+
+    [HttpPost("/api/channels/bulk/delete")]
+    [Tags("Channels")]
+    [EndpointSummary("Delete channels")]
+    [EndpointGroupName("general")]
+    [ProducesResponseType(StatusCodes.Status204NoContent)]
+    [ProducesResponseType(typeof(ProblemDetails), StatusCodes.Status404NotFound)]
+    [ProducesResponseType(typeof(ProblemDetails), StatusCodes.Status422UnprocessableEntity)]
+    public async Task<IActionResult> BulkDelete(
+        [Required] [FromBody] BulkDeleteChannelsRequest request,
+        CancellationToken cancellationToken)
+    {
+        Either<BaseError, Unit> result = await mediator.Send(request.ToCommand(), cancellationToken);
+        return result.ToDeletedResult();
+    }
+
     [HttpPost("/api/channels/{channelNumber}/playout/reset")]
     [Tags("Channels")]
     [EndpointSummary("Reset channel playout")]

ErsatzTV/Controllers/Api/FillerPresetController.cs

@@ -1,19 +0,0 @@
-using ErsatzTV.Application.Filler;
-using ErsatzTV.Core.Api.Filler;
-using MediatR;
-using Microsoft.AspNetCore.Http;
-using Microsoft.AspNetCore.Mvc;
-
-namespace ErsatzTV.Controllers.Api;
-
-[ApiController]
-public class FillerPresetController(IMediator mediator) : ControllerBase
-{
-    [HttpGet("/api/filler-presets", Name = "GetFillerPresets")]
-    [Tags("Filler Presets")]
-    [EndpointSummary("Get all filler presets")]
-    [EndpointGroupName("general")]
-    [ProducesResponseType(typeof(List<FillerPresetResponseModel>), StatusCodes.Status200OK)]
-    public async Task<List<FillerPresetResponseModel>> GetAll(CancellationToken cancellationToken) =>
-        await mediator.Send(new GetAllFillerPresetsForApi(), cancellationToken);
-}

ErsatzTV/Controllers/Api/GraphicsElementController.cs

@@ -1,19 +0,0 @@
-using ErsatzTV.Application.Graphics;
-using ErsatzTV.Core.Api.Graphics;
-using MediatR;
-using Microsoft.AspNetCore.Http;
-using Microsoft.AspNetCore.Mvc;
-
-namespace ErsatzTV.Controllers.Api;
-
-[ApiController]
-public class GraphicsElementController(IMediator mediator) : ControllerBase
-{
-    [HttpGet("/api/graphics-elements", Name = "GetGraphicsElements")]
-    [Tags("Graphics Elements")]
-    [EndpointSummary("Get all graphics elements")]
-    [EndpointGroupName("general")]
-    [ProducesResponseType(typeof(List<GraphicsElementResponseModel>), StatusCodes.Status200OK)]
-    public async Task<List<GraphicsElementResponseModel>> GetAll(CancellationToken cancellationToken) =>
-        await mediator.Send(new GetAllGraphicsElementsForApi(), cancellationToken);
-}

ErsatzTV/Controllers/Api/Requests/BulkChannelRequests.cs

@@ -0,0 +1,21 @@
+using ErsatzTV.Application.Channels;
+
+namespace ErsatzTV.Controllers.Api.Requests;
+
+public record BulkRenumberChannelRequest(int Id, string Number);
+
+public record BulkRenumberChannelsRequest(List<BulkRenumberChannelRequest> Channels)
+{
+    public UpdateChannelNumbers ToCommand() =>
+        new(Channels.Select(c => new ChannelSortViewModel { Id = c.Id, Number = c.Number }).ToList());
+}
+
+public record BulkMoveChannelsToGroupRequest(List<int> ChannelIds, string Group)
+{
+    public BulkMoveChannelsToGroup ToCommand() => new(ChannelIds, Group);
+}
+
+public record BulkDeleteChannelsRequest(List<int> ChannelIds)
+{
+    public BulkDeleteChannels ToCommand() => new(ChannelIds);
+}

ErsatzTV/Controllers/Api/WatermarkController.cs

@@ -1,19 +0,0 @@
-using ErsatzTV.Application.Watermarks;
-using ErsatzTV.Core.Api.Watermarks;
-using MediatR;
-using Microsoft.AspNetCore.Http;
-using Microsoft.AspNetCore.Mvc;
-
-namespace ErsatzTV.Controllers.Api;
-
-[ApiController]
-public class WatermarkController(IMediator mediator) : ControllerBase
-{
-    [HttpGet("/api/watermarks", Name = "GetWatermarks")]
-    [Tags("Watermarks")]
-    [EndpointSummary("Get all watermarks")]
-    [EndpointGroupName("general")]
-    [ProducesResponseType(typeof(List<WatermarkResponseModel>), StatusCodes.Status200OK)]
-    public async Task<List<WatermarkResponseModel>> GetAll(CancellationToken cancellationToken) =>
-        await mediator.Send(new GetAllWatermarksForApi(), cancellationToken);
-}

ErsatzTV/Startup.cs

@@ -681,7 +681,42 @@ public class Startup
         });
 
         app.MapWhen(
-            ctx => !IsIptvPath(ctx.Request.Path),
+            ctx => ctx.Request.Path.StartsWithSegments("/app"),
+            spa =>
+            {
+                string spaStaticFileRoot = SpaStaticFileRoot();
+                IFileProvider spaFileProvider = Directory.Exists(spaStaticFileRoot)
+                    ? new PhysicalFileProvider(spaStaticFileRoot)
+                    : new NullFileProvider();
+
+                spa.UseStaticFiles(
+                    new StaticFileOptions
+                    {
+                        FileProvider = spaFileProvider,
+                        RequestPath = "/app"
+                    });
+
+                spa.Run(
+                    async context =>
+                    {
+                        Microsoft.Extensions.FileProviders.IFileInfo appIndexFile =
+                            spaFileProvider.GetFileInfo("index.html");
+                        if (!appIndexFile.Exists)
+                        {
+                            context.Response.StatusCode = StatusCodes.Status404NotFound;
+                            return;
+                        }
+
+                        context.Response.ContentType = "text/html; charset=utf-8";
+                        context.Response.ContentLength = appIndexFile.Length;
+
+                        await using Stream stream = appIndexFile.CreateReadStream();
+                        await stream.CopyToAsync(context.Response.Body);
+                    });
+            });
+
+        app.MapWhen(
+            ctx => !IsIptvPath(ctx.Request.Path) && !IsSpaPath(ctx.Request.Path),
             blazor =>
             {
                 blazor.UseRouting();
@@ -736,6 +771,16 @@ public class Startup
                    path.StartsWithSegments("/lineup.json") ||
                    path.StartsWithSegments("/lineup_status.json");
         }
+
+        bool IsSpaPath(PathString path) => path.StartsWithSegments("/app");
+
+        string SpaStaticFileRoot()
+        {
+            string webRootPath = CurrentEnvironment.WebRootPath ??
+                                 Path.Combine(CurrentEnvironment.ContentRootPath, "wwwroot");
+
+            return Path.Combine(webRootPath, "app");
+        }
     }
 
     private static void CustomServices(IServiceCollection services)

ErsatzTV/wwwroot/openapi/v1.json

@@ -136,6 +136,45 @@
         }
       }
     },
+    "/api/channels/state": {
+      "get": {
+        "tags": [
+          "Channels"
+        ],
+        "summary": "Get channel runtime state",
+        "responses": {
+          "200": {
+            "description": "OK",
+            "content": {
+              "text/plain": {
+                "schema": {
+                  "type": "array",
+                  "items": {
+                    "$ref": "#/components/schemas/ChannelStateResponseModel"
+                  }
+                }
+              },
+              "application/json": {
+                "schema": {
+                  "type": "array",
+                  "items": {
+                    "$ref": "#/components/schemas/ChannelStateResponseModel"
+                  }
+                }
+              },
+              "text/json": {
+                "schema": {
+                  "type": "array",
+                  "items": {
+                    "$ref": "#/components/schemas/ChannelStateResponseModel"
+                  }
+                }
+              }
+            }
+          }
+        }
+      }
+    },
     "/api/channels/{id}": {
       "get": {
         "tags": [
@@ -364,6 +403,240 @@
         }
       }
     },
+    "/api/channels/bulk/renumber": {
+      "post": {
+        "tags": [
+          "Channels"
+        ],
+        "summary": "Renumber channels",
+        "requestBody": {
+          "content": {
+            "application/json-patch+json": {
+              "schema": {
+                "$ref": "#/components/schemas/BulkRenumberChannelsRequest"
+              }
+            },
+            "application/json": {
+              "schema": {
+                "$ref": "#/components/schemas/BulkRenumberChannelsRequest"
+              }
+            },
+            "text/json": {
+              "schema": {
+                "$ref": "#/components/schemas/BulkRenumberChannelsRequest"
+              }
+            },
+            "application/*+json": {
+              "schema": {
+                "$ref": "#/components/schemas/BulkRenumberChannelsRequest"
+              }
+            }
+          },
+          "required": true
+        },
+        "responses": {
+          "204": {
+            "description": "No Content"
+          },
+          "404": {
+            "description": "Not Found",
+            "content": {
+              "text/plain": {
+                "schema": {
+                  "$ref": "#/components/schemas/ProblemDetails"
+                }
+              },
+              "application/json": {
+                "schema": {
+                  "$ref": "#/components/schemas/ProblemDetails"
+                }
+              },
+              "text/json": {
+                "schema": {
+                  "$ref": "#/components/schemas/ProblemDetails"
+                }
+              }
+            }
+          },
+          "422": {
+            "description": "Unprocessable Entity",
+            "content": {
+              "text/plain": {
+                "schema": {
+                  "$ref": "#/components/schemas/ProblemDetails"
+                }
+              },
+              "application/json": {
+                "schema": {
+                  "$ref": "#/components/schemas/ProblemDetails"
+                }
+              },
+              "text/json": {
+                "schema": {
+                  "$ref": "#/components/schemas/ProblemDetails"
+                }
+              }
+            }
+          }
+        }
+      }
+    },
+    "/api/channels/bulk/group": {
+      "post": {
+        "tags": [
+          "Channels"
+        ],
+        "summary": "Move channels to a group",
+        "requestBody": {
+          "content": {
+            "application/json-patch+json": {
+              "schema": {
+                "$ref": "#/components/schemas/BulkMoveChannelsToGroupRequest"
+              }
+            },
+            "application/json": {
+              "schema": {
+                "$ref": "#/components/schemas/BulkMoveChannelsToGroupRequest"
+              }
+            },
+            "text/json": {
+              "schema": {
+                "$ref": "#/components/schemas/BulkMoveChannelsToGroupRequest"
+              }
+            },
+            "application/*+json": {
+              "schema": {
+                "$ref": "#/components/schemas/BulkMoveChannelsToGroupRequest"
+              }
+            }
+          },
+          "required": true
+        },
+        "responses": {
+          "204": {
+            "description": "No Content"
+          },
+          "404": {
+            "description": "Not Found",
+            "content": {
+              "text/plain": {
+                "schema": {
+                  "$ref": "#/components/schemas/ProblemDetails"
+                }
+              },
+              "application/json": {
+                "schema": {
+                  "$ref": "#/components/schemas/ProblemDetails"
+                }
+              },
+              "text/json": {
+                "schema": {
+                  "$ref": "#/components/schemas/ProblemDetails"
+                }
+              }
+            }
+          },
+          "422": {
+            "description": "Unprocessable Entity",
+            "content": {
+              "text/plain": {
+                "schema": {
+                  "$ref": "#/components/schemas/ProblemDetails"
+                }
+              },
+              "application/json": {
+                "schema": {
+                  "$ref": "#/components/schemas/ProblemDetails"
+                }
+              },
+              "text/json": {
+                "schema": {
+                  "$ref": "#/components/schemas/ProblemDetails"
+                }
+              }
+            }
+          }
+        }
+      }
+    },
+    "/api/channels/bulk/delete": {
+      "post": {
+        "tags": [
+          "Channels"
+        ],
+        "summary": "Delete channels",
+        "requestBody": {
+          "content": {
+            "application/json-patch+json": {
+              "schema": {
+                "$ref": "#/components/schemas/BulkDeleteChannelsRequest"
+              }
+            },
+            "application/json": {
+              "schema": {
+                "$ref": "#/components/schemas/BulkDeleteChannelsRequest"
+              }
+            },
+            "text/json": {
+              "schema": {
+                "$ref": "#/components/schemas/BulkDeleteChannelsRequest"
+              }
+            },
+            "application/*+json": {
+              "schema": {
+                "$ref": "#/components/schemas/BulkDeleteChannelsRequest"
+              }
+            }
+          },
+          "required": true
+        },
+        "responses": {
+          "204": {
+            "description": "No Content"
+          },
+          "404": {
+            "description": "Not Found",
+            "content": {
+              "text/plain": {
+                "schema": {
+                  "$ref": "#/components/schemas/ProblemDetails"
+                }
+              },
+              "application/json": {
+                "schema": {
+                  "$ref": "#/components/schemas/ProblemDetails"
+                }
+              },
+              "text/json": {
+                "schema": {
+                  "$ref": "#/components/schemas/ProblemDetails"
+                }
+              }
+            }
+          },
+          "422": {
+            "description": "Unprocessable Entity",
+            "content": {
+              "text/plain": {
+                "schema": {
+                  "$ref": "#/components/schemas/ProblemDetails"
+                }
+              },
+              "application/json": {
+                "schema": {
+                  "$ref": "#/components/schemas/ProblemDetails"
+                }
+              },
+              "text/json": {
+                "schema": {
+                  "$ref": "#/components/schemas/ProblemDetails"
+                }
+              }
+            }
+          }
+        }
+      }
+    },
     "/api/channels/{channelNumber}/playout/reset": {
       "post": {
         "tags": [
@@ -1353,86 +1626,6 @@
         }
       }
     },
-    "/api/filler-presets": {
-      "get": {
-        "tags": [
-          "Filler Presets"
-        ],
-        "summary": "Get all filler presets",
-        "operationId": "GetFillerPresets",
-        "responses": {
-          "200": {
-            "description": "OK",
-            "content": {
-              "text/plain": {
-                "schema": {
-                  "type": "array",
-                  "items": {
-                    "$ref": "#/components/schemas/FillerPresetResponseModel"
-                  }
-                }
-              },
-              "application/json": {
-                "schema": {
-                  "type": "array",
-                  "items": {
-                    "$ref": "#/components/schemas/FillerPresetResponseModel"
-                  }
-                }
-              },
-              "text/json": {
-                "schema": {
-                  "type": "array",
-                  "items": {
-                    "$ref": "#/components/schemas/FillerPresetResponseModel"
-                  }
-                }
-              }
-            }
-          }
-        }
-      }
-    },
-    "/api/graphics-elements": {
-      "get": {
-        "tags": [
-          "Graphics Elements"
-        ],
-        "summary": "Get all graphics elements",
-        "operationId": "GetGraphicsElements",
-        "responses": {
-          "200": {
-            "description": "OK",
-            "content": {
-              "text/plain": {
-                "schema": {
-                  "type": "array",
-                  "items": {
-                    "$ref": "#/components/schemas/GraphicsElementResponseModel"
-                  }
-                }
-              },
-              "application/json": {
-                "schema": {
-                  "type": "array",
-                  "items": {
-                    "$ref": "#/components/schemas/GraphicsElementResponseModel"
-                  }
-                }
-              },
-              "text/json": {
-                "schema": {
-                  "type": "array",
-                  "items": {
-                    "$ref": "#/components/schemas/GraphicsElementResponseModel"
-                  }
-                }
-              }
-            }
-          }
-        }
-      }
-    },
     "/api/libraries/{id}/scan": {
       "post": {
         "tags": [
@@ -2986,46 +3179,6 @@
           }
         }
       }
-    },
-    "/api/watermarks": {
-      "get": {
-        "tags": [
-          "Watermarks"
-        ],
-        "summary": "Get all watermarks",
-        "operationId": "GetWatermarks",
-        "responses": {
-          "200": {
-            "description": "OK",
-            "content": {
-              "text/plain": {
-                "schema": {
-                  "type": "array",
-                  "items": {
-                    "$ref": "#/components/schemas/WatermarkResponseModel"
-                  }
-                }
-              },
-              "application/json": {
-                "schema": {
-                  "type": "array",
-                  "items": {
-                    "$ref": "#/components/schemas/WatermarkResponseModel"
-                  }
-                }
-              },
-              "text/json": {
-                "schema": {
-                  "type": "array",
-                  "items": {
-                    "$ref": "#/components/schemas/WatermarkResponseModel"
-                  }
-                }
-              }
-            }
-          }
-        }
-      }
     }
   },
   "components": {
@@ -3180,6 +3333,85 @@
           }
         }
       },
+      "BulkDeleteChannelsRequest": {
+        "required": [
+          "channelIds"
+        ],
+        "type": "object",
+        "properties": {
+          "channelIds": {
+            "type": [
+              "null",
+              "array"
+            ],
+            "items": {
+              "type": "integer",
+              "format": "int32"
+            }
+          }
+        }
+      },
+      "BulkMoveChannelsToGroupRequest": {
+        "required": [
+          "channelIds",
+          "group"
+        ],
+        "type": "object",
+        "properties": {
+          "channelIds": {
+            "type": [
+              "null",
+              "array"
+            ],
+            "items": {
+              "type": "integer",
+              "format": "int32"
+            }
+          },
+          "group": {
+            "type": [
+              "null",
+              "string"
+            ]
+          }
+        }
+      },
+      "BulkRenumberChannelRequest": {
+        "required": [
+          "id",
+          "number"
+        ],
+        "type": "object",
+        "properties": {
+          "id": {
+            "type": "integer",
+            "format": "int32"
+          },
+          "number": {
+            "type": [
+              "null",
+              "string"
+            ]
+          }
+        }
+      },
+      "BulkRenumberChannelsRequest": {
+        "required": [
+          "channels"
+        ],
+        "type": "object",
+        "properties": {
+          "channels": {
+            "type": [
+              "null",
+              "array"
+            ],
+            "items": {
+              "$ref": "#/components/schemas/BulkRenumberChannelRequest"
+            }
+          }
+        }
+      },
       "ChannelIdleBehavior": {
         "enum": [
           "StopOnDisconnect",
@@ -3194,6 +3426,27 @@
         ],
         "type": "string"
       },
+      "ChannelNowPlayingResponseModel": {
+        "required": [
+          "title",
+          "startUtc",
+          "finishUtc"
+        ],
+        "type": "object",
+        "properties": {
+          "title": {
+            "type": "string"
+          },
+          "startUtc": {
+            "type": "string",
+            "format": "date-time"
+          },
+          "finishUtc": {
+            "type": "string",
+            "format": "date-time"
+          }
+        }
+      },
       "ChannelPlayoutMode": {
         "enum": [
           "Continuous",
@@ -3212,10 +3465,15 @@
         "required": [
           "id",
           "number",
+          "sortNumber",
           "name",
+          "group",
+          "categories",
           "fFmpegProfile",
           "language",
-          "streamingMode"
+          "streamingMode",
+          "isEnabled",
+          "showInEpg"
         ],
         "type": "object",
         "properties": {
@@ -3229,12 +3487,28 @@
               "string"
             ]
           },
+          "sortNumber": {
+            "type": "number",
+            "format": "double"
+          },
           "name": {
             "type": [
               "null",
               "string"
             ]
           },
+          "group": {
+            "type": [
+              "null",
+              "string"
+            ]
+          },
+          "categories": {
+            "type": [
+              "null",
+              "string"
+            ]
+          },
           "fFmpegProfile": {
             "type": [
               "null",
@@ -3252,6 +3526,12 @@
               "null",
               "string"
             ]
+          },
+          "isEnabled": {
+            "type": "boolean"
+          },
+          "showInEpg": {
+            "type": "boolean"
           }
         }
       },
@@ -3262,6 +3542,37 @@
         ],
         "type": "string"
       },
+      "ChannelStateResponseModel": {
+        "required": [
+          "channelId",
+          "channelNumber",
+          "onAir",
+          "nowPlaying"
+        ],
+        "type": "object",
+        "properties": {
+          "channelId": {
+            "type": "integer",
+            "format": "int32"
+          },
+          "channelNumber": {
+            "type": "string"
+          },
+          "onAir": {
+            "type": "boolean"
+          },
+          "nowPlaying": {
+            "oneOf": [
+              {
+                "type": "null"
+              },
+              {
+                "$ref": "#/components/schemas/ChannelNowPlayingResponseModel"
+              }
+            ]
+          }
+        }
+      },
       "ChannelStreamSelectorMode": {
         "enum": [
           "Default",
@@ -4137,25 +4448,6 @@
         ],
         "type": "string"
       },
-      "FillerPresetResponseModel": {
-        "required": [
-          "id",
-          "name"
-        ],
-        "type": "object",
-        "properties": {
-          "id": {
-            "type": "integer",
-            "format": "int32"
-          },
-          "name": {
-            "type": [
-              "null",
-              "string"
-            ]
-          }
-        }
-      },
       "FillerPresetViewModel": {
         "required": [
           "id",
@@ -4284,25 +4576,6 @@
         ],
         "type": "string"
       },
-      "GraphicsElementResponseModel": {
-        "required": [
-          "id",
-          "name"
-        ],
-        "type": "object",
-        "properties": {
-          "id": {
-            "type": "integer",
-            "format": "int32"
-          },
-          "name": {
-            "type": [
-              "null",
-              "string"
-            ]
-          }
-        }
-      },
       "GraphicsElementViewModel": {
         "required": [
           "id",
@@ -5818,25 +6091,6 @@
       "WatermarkLocation": {
         "type": "integer"
       },
-      "WatermarkResponseModel": {
-        "required": [
-          "id",
-          "name"
-        ],
-        "type": "object",
-        "properties": {
-          "id": {
-            "type": "integer",
-            "format": "int32"
-          },
-          "name": {
-            "type": [
-              "null",
-              "string"
-            ]
-          }
-        }
-      },
       "WatermarkSize": {
         "type": "integer"
       },
@@ -5940,12 +6194,6 @@
     {
       "name": "FFmpeg Profiles"
     },
-    {
-      "name": "Filler Presets"
-    },
-    {
-      "name": "Graphics Elements"
-    },
     {
       "name": "Libraries"
     },
@@ -5969,9 +6217,6 @@
     },
     {
       "name": "Version"
-    },
-    {
-      "name": "Watermarks"
     }
   ]
 }

design-system/Canvas.dc.html

@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<script src="./support.js"></script>
+</head>
+<body>
+<x-dc>
+
+</x-dc>
+</body>
+</html>

design-system/SKILL.md

@@ -0,0 +1,17 @@
+---
+name: chicorytv-design
+description: Use this skill to generate well-branded interfaces and assets for ChicoryTV, either for production or throwaway prototypes/mocks/etc. Contains essential design guidelines, colors, type, fonts, assets, and UI kit components for prototyping.
+user-invocable: true
+---
+
+Read the README.md file within this skill, and explore the other available files.
+If creating visual artifacts (slides, mocks, throwaway prototypes, etc), copy assets out and create static HTML files for the user to view. If working on production code, you can copy assets and read the rules here to become an expert in designing with this brand.
+If the user invokes this skill without any other guidance, ask them what they want to build or design, ask some questions, and act as an expert designer who outputs HTML artifacts _or_ production code, depending on the need.
+
+Quick map:
+- `readme.md` — brand context, content & visual foundations, iconography, file index.
+- `styles.css` — the single entry point; link it and use the CSS custom properties.
+- `tokens/` — color, type, spacing, radius/elevation/motion tokens + font loading.
+- `components/` — React primitives (forms, data-display, feedback, navigation).
+- `templates/chicorytv-admin/` — full admin shell to start from / copy screens out of (incl. the library-to-lineup Channel Builder).
+- `assets/` — chicory-flower mark, wordmark, app icon.

design-system/_adherence.oxlintrc.json

@@ -0,0 +1,470 @@
+{
+  "plugins": [
+    "react",
+    "import"
+  ],
+  "rules": {
+    "react/forbid-elements": [
+      "warn",
+      {
+        "forbid": []
+      }
+    ],
+    "no-restricted-imports": [
+      "warn",
+      {
+        "patterns": [
+          {
+            "group": [
+              "components/data-display/**",
+              "components/feedback/**",
+              "components/forms/**",
+              "components/navigation/**",
+              "design_handoff_channel_builder/**"
+            ],
+            "message": "Import design-system components from 'index.js', not component internals."
+          }
+        ]
+      }
+    ],
+    "no-restricted-syntax": [
+      "warn",
+      {
+        "selector": "Literal[value=/#[0-9a-fA-F]{3,8}\\b/]",
+        "message": "Raw hex color — use a design-system color token via var()."
+      },
+      {
+        "selector": "Literal[value=/\\b\\d+px\\b/]",
+        "message": "Raw px value — use a design-system spacing token via var()."
+      },
+      {
+        "selector": "Literal[value=/font-family\\s*:\\s*(?!['\\\"]?(?:Geist|Geist Mono))/i]",
+        "message": "Font not provided by the design system. Available: Geist, Geist Mono."
+      },
+      {
+        "selector": "JSXOpeningElement[name.name='Badge'] > JSXAttribute > JSXIdentifier[name!=/^(?:children|tone|solid|dot|style|key|ref|className|style|children)$/]",
+        "message": "<Badge> doesn't accept that prop. Declared props: children, tone, solid, dot, style."
+      },
+      {
+        "selector": "JSXOpeningElement[name.name='Badge'] > JSXAttribute[name.name='tone'] > Literal[value!=/^(?:neutral|accent|ok|warn|error)$/]",
+        "message": "<Badge> tone must be one of 'neutral' | 'accent' | 'ok' | 'warn' | 'error'."
+      },
+      {
+        "selector": "JSXOpeningElement[name.name='Button'] > JSXAttribute > JSXIdentifier[name!=/^(?:children|variant|size|startIcon|endIcon|disabled|loading|fullWidth|type|onClick|style|key|ref|className|style|children)$/]",
+        "message": "<Button> doesn't accept that prop. Declared props: children, variant, size, startIcon, endIcon, disabled, loading, fullWidth, type, onClick, style."
+      },
+      {
+        "selector": "JSXOpeningElement[name.name='Button'] > JSXAttribute[name.name='variant'] > Literal[value!=/^(?:primary|secondary|ghost|danger)$/]",
+        "message": "<Button> variant must be one of 'primary' | 'secondary' | 'ghost' | 'danger'."
+      },
+      {
+        "selector": "JSXOpeningElement[name.name='Button'] > JSXAttribute[name.name='size'] > Literal[value!=/^(?:sm|md)$/]",
+        "message": "<Button> size must be one of 'sm' | 'md'."
+      },
+      {
+        "selector": "JSXOpeningElement[name.name='Button'] > JSXAttribute[name.name='type'] > Literal[value!=/^(?:button|submit|reset)$/]",
+        "message": "<Button> type must be one of 'button' | 'submit' | 'reset'."
+      },
+      {
+        "selector": "JSXOpeningElement[name.name='Card'] > JSXAttribute > JSXIdentifier[name!=/^(?:title|subtitle|actions|children|padded|inset|style|key|ref|className|style|children)$/]",
+        "message": "<Card> doesn't accept that prop. Declared props: title, subtitle, actions, children, padded, inset, style."
+      },
+      {
+        "selector": "JSXOpeningElement[name.name='ChannelLogo'] > JSXAttribute > JSXIdentifier[name!=/^(?:name|src|size|radius|style|key|ref|className|style|children)$/]",
+        "message": "<ChannelLogo> doesn't accept that prop. Declared props: name, src, size, radius, style."
+      },
+      {
+        "selector": "JSXOpeningElement[name.name='Checkbox'] > JSXAttribute > JSXIdentifier[name!=/^(?:checked|onChange|label|indeterminate|disabled|style|key|ref|className|style|children)$/]",
+        "message": "<Checkbox> doesn't accept that prop. Declared props: checked, onChange, label, indeterminate, disabled, style."
+      },
+      {
+        "selector": "JSXOpeningElement[name.name='IconButton'] > JSXAttribute > JSXIdentifier[name!=/^(?:children|size|variant|active|disabled|title|onClick|style|key|ref|className|style|children)$/]",
+        "message": "<IconButton> doesn't accept that prop. Declared props: children, size, variant, active, disabled, title, onClick, style."
+      },
+      {
+        "selector": "JSXOpeningElement[name.name='IconButton'] > JSXAttribute[name.name='size'] > Literal[value!=/^(?:sm|md)$/]",
+        "message": "<IconButton> size must be one of 'sm' | 'md'."
+      },
+      {
+        "selector": "JSXOpeningElement[name.name='IconButton'] > JSXAttribute[name.name='variant'] > Literal[value!=/^(?:ghost|solid)$/]",
+        "message": "<IconButton> variant must be one of 'ghost' | 'solid'."
+      },
+      {
+        "selector": "JSXOpeningElement[name.name='Input'] > JSXAttribute > JSXIdentifier[name!=/^(?:label|value|onChange|placeholder|leadingIcon|trailing|error|disabled|size|type|fullWidth|style|key|ref|className|style|children)$/]",
+        "message": "<Input> doesn't accept that prop. Declared props: label, value, onChange, placeholder, leadingIcon, trailing, error, disabled, size, type, fullWidth, style."
+      },
+      {
+        "selector": "JSXOpeningElement[name.name='Input'] > JSXAttribute[name.name='size'] > Literal[value!=/^(?:sm|md)$/]",
+        "message": "<Input> size must be one of 'sm' | 'md'."
+      },
+      {
+        "selector": "JSXOpeningElement[name.name='NavItem'] > JSXAttribute > JSXIdentifier[name!=/^(?:icon|label|active|badge|badgeTone|href|onClick|style|key|ref|className|style|children)$/]",
+        "message": "<NavItem> doesn't accept that prop. Declared props: icon, label, active, badge, badgeTone, href, onClick, style."
+      },
+      {
+        "selector": "JSXOpeningElement[name.name='NavItem'] > JSXAttribute[name.name='badgeTone'] > Literal[value!=/^(?:warn|error|accent)$/]",
+        "message": "<NavItem> badgeTone must be one of 'warn' | 'error' | 'accent'."
+      },
+      {
+        "selector": "JSXOpeningElement[name.name='ProgressBar'] > JSXAttribute > JSXIdentifier[name!=/^(?:value|tone|height|showLabel|style|key|ref|className|style|children)$/]",
+        "message": "<ProgressBar> doesn't accept that prop. Declared props: value, tone, height, showLabel, style."
+      },
+      {
+        "selector": "JSXOpeningElement[name.name='ProgressBar'] > JSXAttribute[name.name='tone'] > Literal[value!=/^(?:accent|ok|warn|error)$/]",
+        "message": "<ProgressBar> tone must be one of 'accent' | 'ok' | 'warn' | 'error'."
+      },
+      {
+        "selector": "JSXOpeningElement[name.name='SelectOption'] > JSXAttribute > JSXIdentifier[name!=/^(?:value|label|key|ref|className|style|children)$/]",
+        "message": "<SelectOption> doesn't accept that prop. Declared props: value, label."
+      },
+      {
+        "selector": "JSXOpeningElement[name.name='Spinner'] > JSXAttribute > JSXIdentifier[name!=/^(?:size|tone|stroke|style|key|ref|className|style|children)$/]",
+        "message": "<Spinner> doesn't accept that prop. Declared props: size, tone, stroke, style."
+      },
+      {
+        "selector": "JSXOpeningElement[name.name='Spinner'] > JSXAttribute[name.name='tone'] > Literal[value!=/^(?:accent|muted|ok)$/]",
+        "message": "<Spinner> tone must be one of 'accent' | 'muted' | 'ok'."
+      },
+      {
+        "selector": "JSXOpeningElement[name.name='Stat'] > JSXAttribute > JSXIdentifier[name!=/^(?:label|value|unit|delta|deltaTone|icon|style|key|ref|className|style|children)$/]",
+        "message": "<Stat> doesn't accept that prop. Declared props: label, value, unit, delta, deltaTone, icon, style."
+      },
+      {
+        "selector": "JSXOpeningElement[name.name='Stat'] > JSXAttribute[name.name='deltaTone'] > Literal[value!=/^(?:up|down|neutral)$/]",
+        "message": "<Stat> deltaTone must be one of 'up' | 'down' | 'neutral'."
+      },
+      {
+        "selector": "JSXOpeningElement[name.name='StatusDot'] > JSXAttribute > JSXIdentifier[name!=/^(?:status|pulse|size|label|style|key|ref|className|style|children)$/]",
+        "message": "<StatusDot> doesn't accept that prop. Declared props: status, pulse, size, label, style."
+      },
+      {
+        "selector": "JSXOpeningElement[name.name='StatusDot'] > JSXAttribute[name.name='status'] > Literal[value!=/^(?:live|ok|warn|error|idle)$/]",
+        "message": "<StatusDot> status must be one of 'live' | 'ok' | 'warn' | 'error' | 'idle'."
+      },
+      {
+        "selector": "JSXOpeningElement[name.name='Switch'] > JSXAttribute > JSXIdentifier[name!=/^(?:checked|onChange|label|disabled|size|style|key|ref|className|style|children)$/]",
+        "message": "<Switch> doesn't accept that prop. Declared props: checked, onChange, label, disabled, size, style."
+      },
+      {
+        "selector": "JSXOpeningElement[name.name='Switch'] > JSXAttribute[name.name='size'] > Literal[value!=/^(?:sm|md)$/]",
+        "message": "<Switch> size must be one of 'sm' | 'md'."
+      },
+      {
+        "selector": "JSXOpeningElement[name.name='TabItem'] > JSXAttribute > JSXIdentifier[name!=/^(?:value|label|icon|count|key|ref|className|style|children)$/]",
+        "message": "<TabItem> doesn't accept that prop. Declared props: value, label, icon, count."
+      },
+      {
+        "selector": "JSXOpeningElement[name.name='Tag'] > JSXAttribute > JSXIdentifier[name!=/^(?:children|onRemove|icon|tone|style|key|ref|className|style|children)$/]",
+        "message": "<Tag> doesn't accept that prop. Declared props: children, onRemove, icon, tone, style."
+      },
+      {
+        "selector": "JSXOpeningElement[name.name='Tag'] > JSXAttribute[name.name='tone'] > Literal[value!=/^(?:neutral|accent)$/]",
+        "message": "<Tag> tone must be one of 'neutral' | 'accent'."
+      },
+      {
+        "selector": "JSXOpeningElement[name.name='Toast'] > JSXAttribute > JSXIdentifier[name!=/^(?:tone|title|message|onClose|style|key|ref|className|style|children)$/]",
+        "message": "<Toast> doesn't accept that prop. Declared props: tone, title, message, onClose, style."
+      },
+      {
+        "selector": "JSXOpeningElement[name.name='Toast'] > JSXAttribute[name.name='tone'] > Literal[value!=/^(?:info|ok|warn|error)$/]",
+        "message": "<Toast> tone must be one of 'info' | 'ok' | 'warn' | 'error'."
+      },
+      {
+        "selector": "JSXOpeningElement[name.name='Tooltip'] > JSXAttribute > JSXIdentifier[name!=/^(?:label|placement|children|style|key|ref|className|style|children)$/]",
+        "message": "<Tooltip> doesn't accept that prop. Declared props: label, placement, children, style."
+      },
+      {
+        "selector": "JSXOpeningElement[name.name='Tooltip'] > JSXAttribute[name.name='placement'] > Literal[value!=/^(?:top|bottom|left|right)$/]",
+        "message": "<Tooltip> placement must be one of 'top' | 'bottom' | 'left' | 'right'."
+      }
+    ]
+  },
+  "overrides": [
+    {
+      "files": [
+        "**/index.js"
+      ],
+      "rules": {
+        "no-restricted-imports": "off"
+      }
+    }
+  ],
+  "x-omelette": {
+    "components": {
+      "Badge": {
+        "replaces": []
+      },
+      "Button": {
+        "replaces": []
+      },
+      "Card": {
+        "replaces": []
+      },
+      "ChannelLogo": {
+        "replaces": []
+      },
+      "Checkbox": {
+        "replaces": []
+      },
+      "IconButton": {
+        "replaces": []
+      },
+      "Input": {
+        "replaces": []
+      },
+      "NavItem": {
+        "replaces": []
+      },
+      "ProgressBar": {
+        "replaces": []
+      },
+      "SelectOption": {
+        "replaces": []
+      },
+      "Spinner": {
+        "replaces": []
+      },
+      "Stat": {
+        "replaces": []
+      },
+      "StatusDot": {
+        "replaces": []
+      },
+      "Switch": {
+        "replaces": []
+      },
+      "TabItem": {
+        "replaces": []
+      },
+      "Tag": {
+        "replaces": []
+      },
+      "Toast": {
+        "replaces": []
+      },
+      "Tooltip": {
+        "replaces": []
+      }
+    },
+    "tokens": [
+      "--action-primary",
+      "--action-primary-hover",
+      "--action-primary-press",
+      "--border-control",
+      "--border-hairline",
+      "--control-h",
+      "--control-h-sm",
+      "--ctv-accent",
+      "--ctv-accent-hover",
+      "--ctv-accent-press",
+      "--ctv-accent-ring",
+      "--ctv-accent-soft",
+      "--ctv-bg",
+      "--ctv-bg-sunken",
+      "--ctv-border",
+      "--ctv-border-strong",
+      "--ctv-error",
+      "--ctv-error-soft",
+      "--ctv-live",
+      "--ctv-live-soft",
+      "--ctv-ok",
+      "--ctv-ok-soft",
+      "--ctv-secondary",
+      "--ctv-secondary-soft",
+      "--ctv-surface",
+      "--ctv-surface-2",
+      "--ctv-surface-3",
+      "--ctv-text",
+      "--ctv-text-faint",
+      "--ctv-text-muted",
+      "--ctv-warn",
+      "--ctv-warn-soft",
+      "--dur-base",
+      "--dur-fast",
+      "--dur-slow",
+      "--ease-out",
+      "--ease-standard",
+      "--focus-ring",
+      "--font-mono",
+      "--font-sans",
+      "--gap-inline",
+      "--leading-normal",
+      "--leading-snug",
+      "--leading-tight",
+      "--numeric-feature",
+      "--pad-card",
+      "--pad-cell-x",
+      "--pad-cell-y",
+      "--pad-control-x",
+      "--pad-control-y",
+      "--pad-page",
+      "--radius-lg",
+      "--radius-md",
+      "--radius-pill",
+      "--radius-sm",
+      "--radius-xs",
+      "--ring-focus",
+      "--row-h",
+      "--shadow-lg",
+      "--shadow-md",
+      "--shadow-none",
+      "--shadow-pop",
+      "--shadow-sm",
+      "--sidebar-w",
+      "--space-0",
+      "--space-1",
+      "--space-10",
+      "--space-11",
+      "--space-12",
+      "--space-2",
+      "--space-3",
+      "--space-4",
+      "--space-5",
+      "--space-6",
+      "--space-7",
+      "--space-8",
+      "--space-9",
+      "--status-error",
+      "--status-live",
+      "--status-ok",
+      "--status-warn",
+      "--surface-app",
+      "--surface-card",
+      "--surface-raised",
+      "--surface-selected",
+      "--text-2xl",
+      "--text-2xs",
+      "--text-3xl",
+      "--text-disabled",
+      "--text-lg",
+      "--text-md",
+      "--text-on-accent",
+      "--text-primary",
+      "--text-secondary",
+      "--text-sm",
+      "--text-xl",
+      "--text-xs",
+      "--topbar-h",
+      "--tracking-caps",
+      "--tracking-normal",
+      "--tracking-tight",
+      "--tracking-wide",
+      "--weight-bold",
+      "--weight-medium",
+      "--weight-normal",
+      "--weight-semibold"
+    ],
+    "tokenKinds": {
+      "--ctv-bg": "color",
+      "--ctv-bg-sunken": "color",
+      "--ctv-surface": "color",
+      "--ctv-surface-2": "color",
+      "--ctv-surface-3": "color",
+      "--ctv-border": "color",
+      "--ctv-border-strong": "color",
+      "--ctv-text": "font",
+      "--ctv-text-muted": "font",
+      "--ctv-text-faint": "font",
+      "--ctv-accent": "color",
+      "--ctv-accent-hover": "color",
+      "--ctv-accent-press": "color",
+      "--ctv-accent-soft": "color",
+      "--ctv-accent-ring": "color",
+      "--ctv-secondary": "color",
+      "--ctv-secondary-soft": "color",
+      "--ctv-ok": "color",
+      "--ctv-ok-soft": "color",
+      "--ctv-warn": "color",
+      "--ctv-warn-soft": "color",
+      "--ctv-error": "color",
+      "--ctv-error-soft": "color",
+      "--ctv-live": "color",
+      "--ctv-live-soft": "color",
+      "--surface-app": "color",
+      "--surface-card": "color",
+      "--surface-raised": "color",
+      "--surface-selected": "color",
+      "--border-hairline": "color",
+      "--border-control": "color",
+      "--text-primary": "font",
+      "--text-secondary": "font",
+      "--text-disabled": "font",
+      "--text-on-accent": "font",
+      "--action-primary": "color",
+      "--action-primary-hover": "color",
+      "--action-primary-press": "color",
+      "--focus-ring": "color",
+      "--status-ok": "color",
+      "--status-warn": "color",
+      "--status-error": "color",
+      "--status-live": "color",
+      "--font-sans": "font",
+      "--font-mono": "font",
+      "--text-2xs": "font",
+      "--text-xs": "font",
+      "--text-sm": "font",
+      "--text-md": "font",
+      "--text-lg": "font",
+      "--text-xl": "font",
+      "--text-2xl": "font",
+      "--text-3xl": "font",
+      "--weight-normal": "font",
+      "--weight-medium": "font",
+      "--weight-semibold": "font",
+      "--weight-bold": "font",
+      "--leading-tight": "font",
+      "--leading-snug": "font",
+      "--leading-normal": "font",
+      "--tracking-tight": "font",
+      "--tracking-normal": "font",
+      "--tracking-wide": "font",
+      "--tracking-caps": "font",
+      "--numeric-feature": "other",
+      "--space-0": "spacing",
+      "--space-1": "spacing",
+      "--space-2": "spacing",
+      "--space-3": "spacing",
+      "--space-4": "spacing",
+      "--space-5": "spacing",
+      "--space-6": "spacing",
+      "--space-7": "spacing",
+      "--space-8": "spacing",
+      "--space-9": "spacing",
+      "--space-10": "spacing",
+      "--space-11": "spacing",
+      "--space-12": "spacing",
+      "--gap-inline": "spacing",
+      "--pad-control-x": "spacing",
+      "--pad-control-y": "spacing",
+      "--pad-card": "spacing",
+      "--pad-cell-x": "spacing",
+      "--pad-cell-y": "spacing",
+      "--pad-page": "spacing",
+      "--sidebar-w": "spacing",
+      "--topbar-h": "spacing",
+      "--row-h": "spacing",
+      "--control-h": "spacing",
+      "--control-h-sm": "spacing",
+      "--radius-xs": "radius",
+      "--radius-sm": "radius",
+      "--radius-md": "radius",
+      "--radius-lg": "radius",
+      "--radius-pill": "radius",
+      "--shadow-none": "shadow",
+      "--shadow-sm": "shadow",
+      "--shadow-md": "shadow",
+      "--shadow-lg": "shadow",
+      "--shadow-pop": "shadow",
+      "--ring-focus": "color",
+      "--ease-standard": "other",
+      "--ease-out": "other",
+      "--dur-fast": "other",
+      "--dur-base": "other",
+      "--dur-slow": "other"
+    },
+    "fontFamilies": [
+      "Geist",
+      "Geist Mono"
+    ]
+  }
+}

design-system/assets/chicory-mark.svg

@@ -0,0 +1,8 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" width="64" height="64" fill="none">
+  <g transform="translate(32 32)">
+    <rect x="-3.1" y="-30" width="6.2" height="20" rx="3.1" fill="#5B7CFA" transform="rotate(0)"></rect><rect x="-3.1" y="-30" width="6.2" height="20" rx="3.1" fill="#8AA1FC" transform="rotate(22.5)"></rect><rect x="-3.1" y="-30" width="6.2" height="20" rx="3.1" fill="#5B7CFA" transform="rotate(45)"></rect><rect x="-3.1" y="-30" width="6.2" height="20" rx="3.1" fill="#8AA1FC" transform="rotate(67.5)"></rect><rect x="-3.1" y="-30" width="6.2" height="20" rx="3.1" fill="#5B7CFA" transform="rotate(90)"></rect><rect x="-3.1" y="-30" width="6.2" height="20" rx="3.1" fill="#8AA1FC" transform="rotate(112.5)"></rect><rect x="-3.1" y="-30" width="6.2" height="20" rx="3.1" fill="#5B7CFA" transform="rotate(135)"></rect><rect x="-3.1" y="-30" width="6.2" height="20" rx="3.1" fill="#8AA1FC" transform="rotate(157.5)"></rect><rect x="-3.1" y="-30" width="6.2" height="20" rx="3.1" fill="#5B7CFA" transform="rotate(180)"></rect><rect x="-3.1" y="-30" width="6.2" height="20" rx="3.1" fill="#8AA1FC" transform="rotate(202.5)"></rect><rect x="-3.1" y="-30" width="6.2" height="20" rx="3.1" fill="#5B7CFA" transform="rotate(225)"></rect><rect x="-3.1" y="-30" width="6.2" height="20" rx="3.1" fill="#8AA1FC" transform="rotate(247.5)"></rect><rect x="-3.1" y="-30" width="6.2" height="20" rx="3.1" fill="#5B7CFA" transform="rotate(270)"></rect><rect x="-3.1" y="-30" width="6.2" height="20" rx="3.1" fill="#8AA1FC" transform="rotate(292.5)"></rect><rect x="-3.1" y="-30" width="6.2" height="20" rx="3.1" fill="#5B7CFA" transform="rotate(315)"></rect><rect x="-3.1" y="-30" width="6.2" height="20" rx="3.1" fill="#8AA1FC" transform="rotate(337.5)"></rect>
+    <circle r="8.5" fill="#0F1115"></circle>
+    <circle r="5" fill="#5B7CFA"></circle>
+    <circle r="2" fill="#0F1115"></circle>
+  </g>
+</svg>

design-system/assets/chicorytv-icon.svg

@@ -0,0 +1,9 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" width="64" height="64" fill="none">
+  <rect width="64" height="64" rx="14" fill="#171A21"></rect>
+  <g transform="translate(32 32) scale(0.82)">
+    <rect x="-3.1" y="-30" width="6.2" height="20" rx="3.1" fill="#5B7CFA" transform="rotate(0)"></rect><rect x="-3.1" y="-30" width="6.2" height="20" rx="3.1" fill="#8AA1FC" transform="rotate(22.5)"></rect><rect x="-3.1" y="-30" width="6.2" height="20" rx="3.1" fill="#5B7CFA" transform="rotate(45)"></rect><rect x="-3.1" y="-30" width="6.2" height="20" rx="3.1" fill="#8AA1FC" transform="rotate(67.5)"></rect><rect x="-3.1" y="-30" width="6.2" height="20" rx="3.1" fill="#5B7CFA" transform="rotate(90)"></rect><rect x="-3.1" y="-30" width="6.2" height="20" rx="3.1" fill="#8AA1FC" transform="rotate(112.5)"></rect><rect x="-3.1" y="-30" width="6.2" height="20" rx="3.1" fill="#5B7CFA" transform="rotate(135)"></rect><rect x="-3.1" y="-30" width="6.2" height="20" rx="3.1" fill="#8AA1FC" transform="rotate(157.5)"></rect><rect x="-3.1" y="-30" width="6.2" height="20" rx="3.1" fill="#5B7CFA" transform="rotate(180)"></rect><rect x="-3.1" y="-30" width="6.2" height="20" rx="3.1" fill="#8AA1FC" transform="rotate(202.5)"></rect><rect x="-3.1" y="-30" width="6.2" height="20" rx="3.1" fill="#5B7CFA" transform="rotate(225)"></rect><rect x="-3.1" y="-30" width="6.2" height="20" rx="3.1" fill="#8AA1FC" transform="rotate(247.5)"></rect><rect x="-3.1" y="-30" width="6.2" height="20" rx="3.1" fill="#5B7CFA" transform="rotate(270)"></rect><rect x="-3.1" y="-30" width="6.2" height="20" rx="3.1" fill="#8AA1FC" transform="rotate(292.5)"></rect><rect x="-3.1" y="-30" width="6.2" height="20" rx="3.1" fill="#5B7CFA" transform="rotate(315)"></rect><rect x="-3.1" y="-30" width="6.2" height="20" rx="3.1" fill="#8AA1FC" transform="rotate(337.5)"></rect>
+    <circle r="8.5" fill="#171A21"></circle>
+    <circle r="5" fill="#5B7CFA"></circle>
+    <circle r="2" fill="#171A21"></circle>
+  </g>
+</svg>

design-system/assets/chicorytv-wordmark.svg

@@ -0,0 +1,9 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 250 48" width="250" height="48" fill="none">
+  <g transform="translate(24 24) scale(0.62)">
+    <rect x="-3.1" y="-30" width="6.2" height="20" rx="3.1" fill="#5B7CFA" transform="rotate(0)"></rect><rect x="-3.1" y="-30" width="6.2" height="20" rx="3.1" fill="#8AA1FC" transform="rotate(22.5)"></rect><rect x="-3.1" y="-30" width="6.2" height="20" rx="3.1" fill="#5B7CFA" transform="rotate(45)"></rect><rect x="-3.1" y="-30" width="6.2" height="20" rx="3.1" fill="#8AA1FC" transform="rotate(67.5)"></rect><rect x="-3.1" y="-30" width="6.2" height="20" rx="3.1" fill="#5B7CFA" transform="rotate(90)"></rect><rect x="-3.1" y="-30" width="6.2" height="20" rx="3.1" fill="#8AA1FC" transform="rotate(112.5)"></rect><rect x="-3.1" y="-30" width="6.2" height="20" rx="3.1" fill="#5B7CFA" transform="rotate(135)"></rect><rect x="-3.1" y="-30" width="6.2" height="20" rx="3.1" fill="#8AA1FC" transform="rotate(157.5)"></rect><rect x="-3.1" y="-30" width="6.2" height="20" rx="3.1" fill="#5B7CFA" transform="rotate(180)"></rect><rect x="-3.1" y="-30" width="6.2" height="20" rx="3.1" fill="#8AA1FC" transform="rotate(202.5)"></rect><rect x="-3.1" y="-30" width="6.2" height="20" rx="3.1" fill="#5B7CFA" transform="rotate(225)"></rect><rect x="-3.1" y="-30" width="6.2" height="20" rx="3.1" fill="#8AA1FC" transform="rotate(247.5)"></rect><rect x="-3.1" y="-30" width="6.2" height="20" rx="3.1" fill="#5B7CFA" transform="rotate(270)"></rect><rect x="-3.1" y="-30" width="6.2" height="20" rx="3.1" fill="#8AA1FC" transform="rotate(292.5)"></rect><rect x="-3.1" y="-30" width="6.2" height="20" rx="3.1" fill="#5B7CFA" transform="rotate(315)"></rect><rect x="-3.1" y="-30" width="6.2" height="20" rx="3.1" fill="#8AA1FC" transform="rotate(337.5)"></rect>
+    <circle r="8.5" fill="#0F1115"></circle>
+    <circle r="5" fill="#5B7CFA"></circle>
+    <circle r="2" fill="#0F1115"></circle>
+  </g>
+  <text x="52" y="32" font-family="Geist, system-ui, sans-serif" font-size="24" font-weight="600" letter-spacing="-0.5" fill="#E6E9EF">Chicory<tspan fill="#5B7CFA">TV</tspan></text>
+</svg>

design-system/components/data-display/Badge.d.ts

@@ -0,0 +1,17 @@
+import * as React from "react";
+
+export interface BadgeProps {
+  children?: React.ReactNode;
+  /** Semantic color. `accent` doubles as the live/on-air tone. */
+  tone?: "neutral" | "accent" | "ok" | "warn" | "error";
+  /** Filled instead of tinted-soft. */
+  solid?: boolean;
+  /** Leading status dot. */
+  dot?: boolean;
+  style?: React.CSSProperties;
+}
+
+/**
+ * Compact status/label badge — streaming mode, HLS/MPEG-TS, health status.
+ */
+export function Badge(props: BadgeProps): JSX.Element;

design-system/components/data-display/Badge.jsx

@@ -0,0 +1,39 @@
+import React from "react";
+
+const tones = {
+  neutral: { fg: "var(--text-secondary)", bg: "var(--ctv-surface-3)", bd: "var(--border-hairline)" },
+  accent:  { fg: "var(--ctv-accent)", bg: "var(--ctv-accent-soft)", bd: "rgba(91,124,250,0.35)" },
+  ok:      { fg: "var(--status-ok)", bg: "var(--ctv-ok-soft)", bd: "rgba(63,185,132,0.35)" },
+  warn:    { fg: "var(--status-warn)", bg: "var(--ctv-warn-soft)", bd: "rgba(224,168,61,0.35)" },
+  error:   { fg: "var(--status-error)", bg: "var(--ctv-error-soft)", bd: "rgba(229,72,77,0.35)" },
+};
+
+/**
+ * Small status/label badge. Soft (tinted) or solid.
+ */
+export function Badge({ children, tone = "neutral", solid = false, dot = false, style = {} }) {
+  const t = tones[tone] || tones.neutral;
+  const solidBg = { neutral: "var(--ctv-surface-3)", accent: "var(--ctv-accent)", ok: "var(--status-ok)", warn: "var(--status-warn)", error: "var(--status-error)" };
+  return (
+    <span
+      style={{
+        display: "inline-flex",
+        alignItems: "center",
+        gap: "5px",
+        height: "20px",
+        padding: dot ? "0 8px 0 6px" : "0 8px",
+        borderRadius: "var(--radius-xs)",
+        font: `var(--weight-medium) var(--text-2xs)/1 var(--font-sans)`,
+        letterSpacing: "0.02em",
+        color: solid ? (tone === "warn" ? "#1A1206" : "#fff") : t.fg,
+        background: solid ? solidBg[tone] : t.bg,
+        border: solid ? "1px solid transparent" : `1px solid ${t.bd}`,
+        whiteSpace: "nowrap",
+        ...style,
+      }}
+    >
+      {dot && <span style={{ width: 6, height: 6, borderRadius: "50%", background: solid ? "rgba(255,255,255,0.9)" : t.fg }} />}
+      {children}
+    </span>
+  );
+}

design-system/components/data-display/Badge.prompt.md

@@ -0,0 +1,11 @@
+**Badge** — small status/label pill. Soft (tinted) by default; `solid` for stronger emphasis. Tones map to the status system; `accent` is also the live/on-air tone.
+
+```jsx
+<Badge tone="accent" dot>Live</Badge>
+<Badge tone="ok">Healthy</Badge>
+<Badge tone="warn">Not normalizing</Badge>
+<Badge tone="neutral">HLS Segmenter</Badge>
+<Badge tone="error" solid>Error</Badge>
+```
+
+Props: `tone` (neutral·accent·ok·warn·error), `solid`, `dot`.

design-system/components/data-display/Card.d.ts

@@ -0,0 +1,23 @@
+import * as React from "react";
+
+/**
+ * @startingPoint section="Layout" subtitle="Card surface with header + actions" viewport="700x260"
+ */
+export interface CardProps {
+  title?: React.ReactNode;
+  subtitle?: React.ReactNode;
+  /** Right-aligned header actions (buttons, menu). */
+  actions?: React.ReactNode;
+  children?: React.ReactNode;
+  /** Body padding — turn off for flush tables/lists. */
+  padded?: boolean;
+  /** Sunken well background instead of card surface. */
+  inset?: boolean;
+  style?: React.CSSProperties;
+}
+
+/**
+ * Panel surface with optional header row; the base container for dashboard
+ * widgets, forms and detail panes.
+ */
+export function Card(props: CardProps): JSX.Element;

design-system/components/data-display/Card.jsx

@@ -0,0 +1,38 @@
+import React from "react";
+
+/**
+ * Surface container. Optional header (title + actions) and body padding.
+ */
+export function Card({ title, subtitle, actions = null, children, padded = true, inset = false, style = {} }) {
+  return (
+    <div
+      style={{
+        background: inset ? "var(--ctv-bg-sunken)" : "var(--surface-card)",
+        border: "1px solid var(--border-hairline)",
+        borderRadius: "var(--radius-md)",
+        overflow: "hidden",
+        ...style,
+      }}
+    >
+      {(title || actions) && (
+        <div
+          style={{
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "space-between",
+            gap: "12px",
+            padding: "13px 16px",
+            borderBottom: "1px solid var(--border-hairline)",
+          }}
+        >
+          <div style={{ minWidth: 0 }}>
+            {title && <div style={{ font: "var(--weight-semibold) var(--text-md)/1.2 var(--font-sans)", color: "var(--text-primary)" }}>{title}</div>}
+            {subtitle && <div style={{ marginTop: 3, font: "var(--text-xs)/1.3 var(--font-sans)", color: "var(--text-secondary)" }}>{subtitle}</div>}
+          </div>
+          {actions && <div style={{ display: "flex", alignItems: "center", gap: "8px", flex: "0 0 auto" }}>{actions}</div>}
+        </div>
+      )}
+      <div style={{ padding: padded ? "16px" : 0 }}>{children}</div>
+    </div>
+  );
+}

design-system/components/data-display/Card.prompt.md

@@ -0,0 +1,10 @@
+**Card** — the panel surface behind dashboard widgets, forms and detail panes. Header row is optional; set `padded={false}` when the body is a flush table or list.
+
+```jsx
+<Card title="Recent activity" actions={<Button size="sm" variant="ghost">View all</Button>}>
+  …
+</Card>
+<Card padded={false}><ChannelTable/></Card>
+```
+
+Props: `title`, `subtitle`, `actions`, `padded`, `inset`.

design-system/components/data-display/ChannelLogo.d.ts

@@ -0,0 +1,17 @@
+import * as React from "react";
+
+export interface ChannelLogoProps {
+  /** Channel name — seeds the generated initials + color when no image. */
+  name?: string;
+  /** Logo image URL; falls back to a generated chip when absent. */
+  src?: string | null;
+  size?: number;
+  radius?: string;
+  style?: React.CSSProperties;
+}
+
+/**
+ * Square channel logo; shows the uploaded image or a deterministic
+ * initials chip keyed to the channel name (like ErsatzTV's generated logos).
+ */
+export function ChannelLogo(props: ChannelLogoProps): JSX.Element;

design-system/components/data-display/ChannelLogo.jsx

@@ -0,0 +1,51 @@
+import React from "react";
+
+const palette = [
+  ["#5B7CFA", "#2E3A66"], ["#3FB984", "#1E4536"], ["#E0A83D", "#4A3818"],
+  ["#E5484D", "#4A1F21"], ["#B06CF0", "#38235A"], ["#48B0C8", "#193E47"],
+];
+
+function hashIndex(str) {
+  let h = 0;
+  for (let i = 0; i < str.length; i++) h = (h * 31 + str.charCodeAt(i)) >>> 0;
+  return h % palette.length;
+}
+
+/**
+ * Channel logo tile. Renders an image when given, else a generated
+ * initials chip keyed to the channel name — mirrors ErsatzTV's logo/gen.
+ */
+export function ChannelLogo({ name = "", src = null, size = 40, radius = "var(--radius-sm)", style = {} }) {
+  const [fg, bg] = palette[hashIndex(name)];
+  const initials = name
+    .split(/[\s\-|:]+/)
+    .filter(Boolean)
+    .slice(0, 2)
+    .map((w) => w[0])
+    .join("")
+    .toUpperCase() || "?";
+
+  return (
+    <span
+      style={{
+        display: "inline-flex",
+        alignItems: "center",
+        justifyContent: "center",
+        width: size,
+        height: size,
+        flex: "0 0 auto",
+        overflow: "hidden",
+        borderRadius: radius,
+        background: src ? "var(--ctv-bg-sunken)" : bg,
+        border: "1px solid var(--border-hairline)",
+        ...style,
+      }}
+    >
+      {src ? (
+        <img src={src} alt={name} style={{ maxWidth: "100%", maxHeight: "100%", objectFit: "contain" }} />
+      ) : (
+        <span style={{ font: `var(--weight-semibold) ${Math.round(size * 0.34)}px/1 var(--font-mono)`, color: fg, letterSpacing: "0.02em" }}>{initials}</span>
+      )}
+    </span>
+  );
+}

design-system/components/data-display/ChannelLogo.prompt.md

@@ -0,0 +1,8 @@
+**ChannelLogo** — square channel avatar. Given `src`, shows the logo; otherwise generates a stable initials chip + color from `name` (mirrors ErsatzTV's `iptv/logos/gen`).
+
+```jsx
+<ChannelLogo name="Retro Cartoons" size={40} />
+<ChannelLogo name="News 24" src="/logos/news24.png" />
+```
+
+Props: `name`, `src`, `size`, `radius`.

design-system/components/data-display/ProgressBar.d.ts

@@ -0,0 +1,16 @@
+import * as React from "react";
+
+export interface ProgressBarProps {
+  /** 0–100. Pass null/undefined for an indeterminate sweep. */
+  value?: number | null;
+  tone?: "accent" | "ok" | "warn" | "error";
+  height?: number;
+  /** Append a mono percentage on the right. */
+  showLabel?: boolean;
+  style?: React.CSSProperties;
+}
+
+/**
+ * Slim progress bar for library scans, playout builds and transcodes.
+ */
+export function ProgressBar(props: ProgressBarProps): JSX.Element;

design-system/components/data-display/ProgressBar.jsx

@@ -0,0 +1,32 @@
+import React from "react";
+
+const toneColor = {
+  accent: "var(--action-primary)",
+  ok: "var(--status-ok)",
+  warn: "var(--status-warn)",
+  error: "var(--status-error)",
+};
+
+/**
+ * Thin determinate/indeterminate progress bar — library scans, transcodes.
+ */
+export function ProgressBar({ value = null, tone = "accent", height = 6, showLabel = false, style = {} }) {
+  const c = toneColor[tone] || toneColor.accent;
+  const indeterminate = value == null;
+  const pct = Math.max(0, Math.min(100, value ?? 0));
+  return (
+    <div style={{ display: "flex", alignItems: "center", gap: "10px", ...style }}>
+      <div style={{ position: "relative", flex: 1, height, borderRadius: "var(--radius-pill)", background: "var(--ctv-surface-3)", overflow: "hidden" }}>
+        <style>{`@keyframes ctv-indet{0%{left:-40%}100%{left:100%}}`}</style>
+        {indeterminate ? (
+          <span style={{ position: "absolute", top: 0, bottom: 0, width: "40%", borderRadius: "inherit", background: c, animation: "ctv-indet 1.1s var(--ease-standard) infinite" }} />
+        ) : (
+          <span style={{ position: "absolute", top: 0, left: 0, bottom: 0, width: `${pct}%`, borderRadius: "inherit", background: c, transition: "width var(--dur-slow) var(--ease-out)" }} />
+        )}
+      </div>
+      {showLabel && !indeterminate && (
+        <span style={{ font: "var(--weight-medium) var(--text-xs)/1 var(--font-mono)", color: "var(--text-secondary)", minWidth: 34, textAlign: "right", fontVariantNumeric: "tabular-nums" }}>{Math.round(pct)}%</span>
+      )}
+    </div>
+  );
+}

design-system/components/data-display/ProgressBar.prompt.md

@@ -0,0 +1,8 @@
+**ProgressBar** — slim bar for library scans, playout builds and transcodes. Omit `value` for an indeterminate sweep (queued/starting work).
+
+```jsx
+<ProgressBar value={62} showLabel />
+<ProgressBar value={null} tone="accent" /> {/* scanning… */}
+```
+
+Props: `value` (0–100 or null), `tone` (accent·ok·warn·error), `height`, `showLabel`.

design-system/components/data-display/Stat.d.ts

@@ -0,0 +1,18 @@
+import * as React from "react";
+
+export interface StatProps {
+  label: string;
+  /** The metric value — rendered in tabular mono. */
+  value: React.ReactNode;
+  unit?: string;
+  /** Small change indicator, e.g. "+3" or "2 warnings". */
+  delta?: React.ReactNode;
+  deltaTone?: "up" | "down" | "neutral";
+  icon?: React.ReactNode;
+  style?: React.CSSProperties;
+}
+
+/**
+ * Dashboard KPI — mono tabular value with label, optional delta and icon.
+ */
+export function Stat(props: StatProps): JSX.Element;

design-system/components/data-display/Stat.jsx

@@ -0,0 +1,23 @@
+import React from "react";
+
+/**
+ * Dashboard metric. Big mono value, label, optional delta + icon.
+ */
+export function Stat({ label, value, unit, delta = null, deltaTone = "neutral", icon = null, style = {} }) {
+  const dc = { up: "var(--status-ok)", down: "var(--status-error)", neutral: "var(--text-secondary)" };
+  return (
+    <div style={{ display: "flex", flexDirection: "column", gap: "8px", ...style }}>
+      <div style={{ display: "flex", alignItems: "center", gap: "7px" }}>
+        {icon && <span style={{ display: "inline-flex", color: "var(--text-disabled)" }}>{icon}</span>}
+        <span style={{ font: "var(--weight-medium) var(--text-xs)/1 var(--font-sans)", letterSpacing: "0.03em", color: "var(--text-secondary)" }}>{label}</span>
+      </div>
+      <div style={{ display: "flex", alignItems: "baseline", gap: "6px" }}>
+        <span style={{ font: "var(--weight-semibold) var(--text-2xl)/1 var(--font-mono)", color: "var(--text-primary)", letterSpacing: "-0.01em", fontVariantNumeric: "tabular-nums" }}>{value}</span>
+        {unit && <span style={{ font: "var(--text-sm)/1 var(--font-sans)", color: "var(--text-disabled)" }}>{unit}</span>}
+        {delta != null && (
+          <span style={{ marginLeft: 2, font: "var(--weight-medium) var(--text-xs)/1 var(--font-mono)", color: dc[deltaTone] }}>{delta}</span>
+        )}
+      </div>
+    </div>
+  );
+}

design-system/components/data-display/Stat.prompt.md

@@ -0,0 +1,9 @@
+**Stat** — a dashboard KPI. Value is set in tabular mono so columns of numbers align. Use for channel counts, active streams, uptime.
+
+```jsx
+<Stat label="Active streams" value="7" icon={<Ico n="Radio"/>} delta="+2" deltaTone="up" />
+<Stat label="Channels" value="128" />
+<Stat label="Uptime" value="14d 06h" />
+```
+
+Props: `label`, `value`, `unit`, `delta`, `deltaTone` (up·down·neutral), `icon`.

design-system/components/data-display/StatusDot.d.ts

@@ -0,0 +1,16 @@
+import * as React from "react";
+
+export interface StatusDotProps {
+  /** `live` auto-pulses in accent; others are static. */
+  status?: "live" | "ok" | "warn" | "error" | "idle";
+  /** Force the pulsing ring on any status. */
+  pulse?: boolean;
+  size?: number;
+  label?: string;
+  style?: React.CSSProperties;
+}
+
+/**
+ * Small colored status dot; pulses for live/on-air channels.
+ */
+export function StatusDot(props: StatusDotProps): JSX.Element;

design-system/components/data-display/StatusDot.jsx

@@ -0,0 +1,37 @@
+import React from "react";
+
+const colors = {
+  live: "var(--status-live)",
+  ok: "var(--status-ok)",
+  warn: "var(--status-warn)",
+  error: "var(--status-error)",
+  idle: "var(--text-disabled)",
+};
+
+/**
+ * Status dot with optional pulsing ring — on-air / live indicators.
+ */
+export function StatusDot({ status = "idle", pulse = false, size = 8, label, style = {} }) {
+  const c = colors[status] || colors.idle;
+  const doPulse = pulse || status === "live";
+  return (
+    <span style={{ display: "inline-flex", alignItems: "center", gap: "7px", ...style }}>
+      <span style={{ position: "relative", width: size, height: size, flex: "0 0 auto" }}>
+        {doPulse && (
+          <span
+            style={{
+              position: "absolute",
+              inset: 0,
+              borderRadius: "50%",
+              background: c,
+              animation: "ctv-ping 1.6s cubic-bezier(0,0,0.2,1) infinite",
+            }}
+          />
+        )}
+        <span style={{ position: "absolute", inset: 0, borderRadius: "50%", background: c, boxShadow: doPulse ? `0 0 6px ${c}` : "none" }} />
+        <style>{`@keyframes ctv-ping{0%{transform:scale(1);opacity:.55}70%,100%{transform:scale(2.4);opacity:0}}`}</style>
+      </span>
+      {label && <span style={{ font: "var(--text-xs)/1 var(--font-sans)", color: "var(--text-secondary)" }}>{label}</span>}
+    </span>
+  );
+}

design-system/components/data-display/StatusDot.prompt.md

@@ -0,0 +1,9 @@
+**StatusDot** — tiny colored dot for channel/transcode state. `live` pulses in accent (on-air), the rest are static status colors.
+
+```jsx
+<StatusDot status="live" label="On air" />
+<StatusDot status="ok" label="Idle" />
+<StatusDot status="error" label="Failed" />
+```
+
+Props: `status` (live·ok·warn·error·idle), `pulse`, `size`, `label`.

design-system/components/data-display/Tag.d.ts

@@ -0,0 +1,16 @@
+import * as React from "react";
+
+export interface TagProps {
+  children?: React.ReactNode;
+  /** Show a remove (×) button and handle its click. */
+  onRemove?: () => void;
+  /** Optional leading icon. */
+  icon?: React.ReactNode;
+  tone?: "neutral" | "accent";
+  style?: React.CSSProperties;
+}
+
+/**
+ * Chip for filters, smart-collection criteria and media tags; optionally removable.
+ */
+export function Tag(props: TagProps): JSX.Element;

design-system/components/data-display/Tag.jsx

@@ -0,0 +1,54 @@
+import React from "react";
+
+/**
+ * Removable chip/tag — smart-collection filters, tags on media.
+ */
+export function Tag({ children, onRemove, icon = null, tone = "neutral", style = {} }) {
+  const [hover, setHover] = React.useState(false);
+  const tint = tone === "accent";
+  return (
+    <span
+      style={{
+        display: "inline-flex",
+        alignItems: "center",
+        gap: "6px",
+        height: "22px",
+        padding: onRemove ? "0 5px 0 8px" : "0 9px",
+        borderRadius: "var(--radius-xs)",
+        font: "var(--weight-medium) var(--text-xs)/1 var(--font-sans)",
+        color: tint ? "var(--ctv-accent)" : "var(--text-primary)",
+        background: tint ? "var(--ctv-accent-soft)" : "var(--ctv-surface-3)",
+        border: `1px solid ${tint ? "rgba(91,124,250,0.35)" : "var(--border-hairline)"}`,
+        whiteSpace: "nowrap",
+        ...style,
+      }}
+    >
+      {icon && <span style={{ display: "inline-flex", color: "var(--text-disabled)" }}>{icon}</span>}
+      {children}
+      {onRemove && (
+        <button
+          type="button"
+          onClick={onRemove}
+          onMouseEnter={() => setHover(true)}
+          onMouseLeave={() => setHover(false)}
+          aria-label="Remove"
+          style={{
+            display: "inline-flex",
+            alignItems: "center",
+            justifyContent: "center",
+            width: 15,
+            height: 15,
+            padding: 0,
+            border: "none",
+            borderRadius: "3px",
+            cursor: "pointer",
+            color: hover ? "var(--text-primary)" : "var(--text-disabled)",
+            background: hover ? "rgba(255,255,255,0.08)" : "transparent",
+          }}
+        >
+          <svg width="10" height="10" viewBox="0 0 24 24" fill="none"><path d="M6 6l12 12M18 6L6 18" stroke="currentColor" strokeWidth="2.4" strokeLinecap="round" /></svg>
+        </button>
+      )}
+    </span>
+  );
+}

design-system/components/data-display/Tag.prompt.md

@@ -0,0 +1,8 @@
+**Tag** — chip for filters, smart-collection criteria, and media tags. Pass `onRemove` to show a × button.
+
+```jsx
+<Tag>genre: comedy</Tag>
+<Tag tone="accent" onRemove={() => drop(i)}>released ≥ 1990</Tag>
+```
+
+Props: `onRemove`, `icon`, `tone` (neutral·accent).

design-system/components/data-display/data-display.card.html

@@ -0,0 +1,71 @@
+<!-- @dsCard group="Components" viewport="700x330" name="Data display" subtitle="Badge, StatusDot, Tag, ChannelLogo, Stat, ProgressBar, Card" -->
+<!doctype html>
+<html lang="en">
+<head>
+<meta charset="utf-8">
+<link rel="preconnect" href="https://fonts.googleapis.com">
+<link href="https://fonts.googleapis.com/css2?family=Geist:wght@300..700&family=Geist+Mono:wght@400..600&display=swap" rel="stylesheet">
+<link rel="stylesheet" href="../../styles.css">
+<script src="https://unpkg.com/react@18.3.1/umd/react.development.js" integrity="sha384-hD6/rw4ppMLGNu3tX5cjIb+uRZ7UkRJ6BPkLpg4hAu/6onKUg4lLsHAs9EBPT82L" crossorigin="anonymous"></script>
+<script src="https://unpkg.com/react-dom@18.3.1/umd/react-dom.development.js" integrity="sha384-u6aeetuaXnQ38mYT8rp6sbXaQe3NL9t+IBXmnYxwkUI2Hw4bsp2Wvmx4yRQF1uAm" crossorigin="anonymous"></script>
+<script src="https://unpkg.com/@babel/standalone@7.29.0/babel.min.js" integrity="sha384-m08KidiNqLdpJqLq95G/LEi8Qvjl/xUYll3QILypMoQ65QorJ9Lvtp2RXYGBFj1y" crossorigin="anonymous"></script>
+<script src="https://unpkg.com/lucide@0.544.0/dist/umd/lucide.min.js"></script>
+<script src="../../_ds_bundle.js"></script>
+<style>
+  body { margin: 0; background: var(--surface-app); color: var(--text-primary); font-family: var(--font-sans); }
+  #root { padding: 22px 24px; }
+  .row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 18px; }
+</style>
+</head>
+<body>
+<div id="root"></div>
+<script type="text/babel">
+const NS = window.ChicoryTVDesignSystem_eb3b61;
+const { Badge, StatusDot, Tag, ChannelLogo, Stat, ProgressBar, Card } = NS;
+const Ico = ({ n, s = 15 }) => { const r = React.useRef(null); React.useEffect(() => { if (r.current) { r.current.innerHTML=""; const el = window.lucide.createElement(window.lucide.icons[n]); el.setAttribute("width", s); el.setAttribute("height", s); r.current.appendChild(el);} }); return <span ref={r} style={{ display: "inline-flex" }} />; };
+
+function Demo() {
+  return (
+    <div>
+      <div className="row">
+        <Badge tone="accent" dot>Live</Badge>
+        <Badge tone="ok">Healthy</Badge>
+        <Badge tone="warn">Not normalizing</Badge>
+        <Badge tone="error" solid>Error</Badge>
+        <Badge tone="neutral">HLS Segmenter</Badge>
+        <span style={{ width: 8 }} />
+        <StatusDot status="live" label="On air" />
+        <StatusDot status="ok" label="Idle" />
+        <StatusDot status="error" label="Failed" />
+      </div>
+      <div className="row">
+        <Tag icon={<Ico n="Tag" s={12} />}>genre: comedy</Tag>
+        <Tag tone="accent" onRemove={() => {}}>released ≥ 1990</Tag>
+        <Tag onRemove={() => {}}>rating: PG</Tag>
+        <span style={{ width: 8 }} />
+        <ChannelLogo name="Retro Cartoons" size={38} />
+        <ChannelLogo name="News 24" size={38} />
+        <ChannelLogo name="Late Night" size={38} />
+      </div>
+      <div style={{ display: "grid", gridTemplateColumns: "1.1fr 1fr", gap: 16, alignItems: "start" }}>
+        <Card padded={true} style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 20 }}>
+          <Stat label="Active streams" value="7" icon={<Ico n="Radio" />} delta="+2" deltaTone="up" />
+          <Stat label="Channels" value="128" icon={<Ico n="Tv" />} />
+          <Stat label="Scheduled" value="1,204" icon={<Ico n="CalendarClock" />} />
+          <Stat label="Uptime" value="14d 06h" icon={<Ico n="Activity" />} />
+        </Card>
+        <Card title="Library scan" subtitle="Movies · local">
+          <div style={{ display: "flex", flexDirection: "column", gap: 14 }}>
+            <ProgressBar value={62} showLabel />
+            <ProgressBar value={null} tone="accent" />
+            <ProgressBar value={100} tone="ok" showLabel />
+          </div>
+        </Card>
+      </div>
+    </div>
+  );
+}
+ReactDOM.createRoot(document.getElementById("root")).render(<Demo />);
+</script>
+</body>
+</html>

design-system/components/feedback/Spinner.d.ts

@@ -0,0 +1,13 @@
+import * as React from "react";
+
+export interface SpinnerProps {
+  size?: number;
+  tone?: "accent" | "muted" | "ok";
+  stroke?: number;
+  style?: React.CSSProperties;
+}
+
+/**
+ * Indeterminate ring spinner — inline busy state for locked playouts/rows.
+ */
+export function Spinner(props: SpinnerProps): JSX.Element;

design-system/components/feedback/Spinner.jsx

@@ -0,0 +1,17 @@
+import React from "react";
+
+/**
+ * Indeterminate ring spinner.
+ */
+export function Spinner({ size = 18, tone = "accent", stroke = 2.4, style = {} }) {
+  const c = { accent: "var(--action-primary)", muted: "var(--text-disabled)", ok: "var(--status-ok)" }[tone] || "var(--action-primary)";
+  return (
+    <span style={{ display: "inline-flex", ...style }}>
+      <style>{`@keyframes ctv-spin{to{transform:rotate(360deg)}}`}</style>
+      <svg width={size} height={size} viewBox="0 0 24 24" fill="none" style={{ animation: "ctv-spin 0.7s linear infinite" }}>
+        <circle cx="12" cy="12" r="9" stroke={c} strokeOpacity="0.2" strokeWidth={stroke} />
+        <path d="M21 12a9 9 0 0 0-9-9" stroke={c} strokeWidth={stroke} strokeLinecap="round" />
+      </svg>
+    </span>
+  );
+}

design-system/components/feedback/Spinner.prompt.md

@@ -0,0 +1,7 @@
+**Spinner** — inline busy indicator for locked playouts, in-flight row actions, and loading panes.
+
+```jsx
+<Spinner size={16} tone="accent" />
+```
+
+Props: `size`, `tone` (accent·muted·ok), `stroke`.

design-system/components/feedback/Toast.d.ts

@@ -0,0 +1,16 @@
+import * as React from "react";
+
+export interface ToastProps {
+  tone?: "info" | "ok" | "warn" | "error";
+  title?: React.ReactNode;
+  message?: React.ReactNode;
+  /** Show a dismiss button. */
+  onClose?: () => void;
+  style?: React.CSSProperties;
+}
+
+/**
+ * Toast / inline alert with a tone-colored accent edge — save confirmations,
+ * scan results, playout-build failures.
+ */
+export function Toast(props: ToastProps): JSX.Element;

design-system/components/feedback/Toast.jsx

@@ -0,0 +1,46 @@
+import React from "react";
+
+const map = {
+  ok:    { c: "var(--status-ok)", bg: "var(--ctv-ok-soft)", icon: "M5 12.5l4.5 4.5L19 7" },
+  warn:  { c: "var(--status-warn)", bg: "var(--ctv-warn-soft)", icon: "M12 8v5M12 17h.01" },
+  error: { c: "var(--status-error)", bg: "var(--ctv-error-soft)", icon: "M12 8v5M12 17h.01" },
+  info:  { c: "var(--ctv-accent)", bg: "var(--ctv-accent-soft)", icon: "M12 11v5M12 8h.01" },
+};
+
+/**
+ * Toast / inline alert. Icon, message, optional close.
+ */
+export function Toast({ tone = "info", title, message, onClose, style = {} }) {
+  const t = map[tone] || map.info;
+  return (
+    <div
+      role="status"
+      style={{
+        display: "flex",
+        alignItems: "flex-start",
+        gap: "11px",
+        width: "min(380px, 100%)",
+        padding: "12px 13px",
+        background: "var(--surface-raised)",
+        border: "1px solid var(--border-hairline)",
+        borderLeft: `2px solid ${t.c}`,
+        borderRadius: "var(--radius-md)",
+        boxShadow: "var(--shadow-md)",
+        ...style,
+      }}
+    >
+      <span style={{ display: "inline-flex", alignItems: "center", justifyContent: "center", width: 22, height: 22, borderRadius: "var(--radius-xs)", background: t.bg, flex: "0 0 auto", marginTop: 1 }}>
+        <svg width="14" height="14" viewBox="0 0 24 24" fill="none"><circle cx="12" cy="12" r="9" stroke={t.c} strokeWidth="0" fill="none" /><path d={t.icon} stroke={t.c} strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round" /></svg>
+      </span>
+      <div style={{ flex: 1, minWidth: 0 }}>
+        {title && <div style={{ font: "var(--weight-semibold) var(--text-sm)/1.3 var(--font-sans)", color: "var(--text-primary)" }}>{title}</div>}
+        {message && <div style={{ marginTop: title ? 2 : 0, font: "var(--text-xs)/1.45 var(--font-sans)", color: "var(--text-secondary)" }}>{message}</div>}
+      </div>
+      {onClose && (
+        <button type="button" onClick={onClose} aria-label="Dismiss" style={{ display: "inline-flex", padding: 3, border: "none", background: "transparent", color: "var(--text-disabled)", cursor: "pointer", flex: "0 0 auto" }}>
+          <svg width="14" height="14" viewBox="0 0 24 24" fill="none"><path d="M6 6l12 12M18 6L6 18" stroke="currentColor" strokeWidth="2" strokeLinecap="round" /></svg>
+        </button>
+      )}
+    </div>
+  );
+}

design-system/components/feedback/Toast.prompt.md

@@ -0,0 +1,8 @@
+**Toast** — transient notification or inline alert with a tone-colored left edge. Use for save confirmations, scan results, and playout-build failures.
+
+```jsx
+<Toast tone="ok" title="Channel saved" message="Retro Cartoons is now on air." onClose={dismiss} />
+<Toast tone="error" title="Playout build failed" message="No items match the schedule." />
+```
+
+Props: `tone` (info·ok·warn·error), `title`, `message`, `onClose`.

design-system/components/feedback/Tooltip.d.ts

@@ -0,0 +1,13 @@
+import * as React from "react";
+
+export interface TooltipProps {
+  label: React.ReactNode;
+  placement?: "top" | "bottom" | "left" | "right";
+  children: React.ReactNode;
+  style?: React.CSSProperties;
+}
+
+/**
+ * Hover tooltip wrapping any trigger — icon-button labels, truncated text.
+ */
+export function Tooltip(props: TooltipProps): JSX.Element;

design-system/components/feedback/Tooltip.jsx

@@ -0,0 +1,45 @@
+import React from "react";
+
+/**
+ * Hover tooltip. Wraps a trigger; shows a small dark label.
+ */
+export function Tooltip({ label, placement = "top", children, style = {} }) {
+  const [show, setShow] = React.useState(false);
+  const pos = {
+    top: { bottom: "calc(100% + 7px)", left: "50%", transform: "translateX(-50%)" },
+    bottom: { top: "calc(100% + 7px)", left: "50%", transform: "translateX(-50%)" },
+    left: { right: "calc(100% + 7px)", top: "50%", transform: "translateY(-50%)" },
+    right: { left: "calc(100% + 7px)", top: "50%", transform: "translateY(-50%)" },
+  }[placement];
+
+  return (
+    <span
+      onMouseEnter={() => setShow(true)}
+      onMouseLeave={() => setShow(false)}
+      style={{ position: "relative", display: "inline-flex", ...style }}
+    >
+      {children}
+      {show && label && (
+        <span
+          role="tooltip"
+          style={{
+            position: "absolute",
+            zIndex: 50,
+            ...pos,
+            padding: "5px 9px",
+            borderRadius: "var(--radius-sm)",
+            background: "var(--ctv-surface-3)",
+            border: "1px solid var(--border-control)",
+            boxShadow: "var(--shadow-pop)",
+            color: "var(--text-primary)",
+            font: "var(--weight-medium) var(--text-xs)/1.2 var(--font-sans)",
+            whiteSpace: "nowrap",
+            pointerEvents: "none",
+          }}
+        >
+          {label}
+        </span>
+      )}
+    </span>
+  );
+}

design-system/components/feedback/Tooltip.prompt.md

@@ -0,0 +1,7 @@
+**Tooltip** — hover label for icon buttons and truncated text. Wrap the trigger element.
+
+```jsx
+<Tooltip label="Reset playout"><IconButton title="Reset"><Ico n="RefreshCw"/></IconButton></Tooltip>
+```
+
+Props: `label`, `placement` (top·bottom·left·right).

design-system/components/feedback/feedback.card.html

@@ -0,0 +1,50 @@
+<!-- @dsCard group="Components" viewport="700x260" name="Feedback" subtitle="Toast, Tooltip, Spinner" -->
+<!doctype html>
+<html lang="en">
+<head>
+<meta charset="utf-8">
+<link rel="preconnect" href="https://fonts.googleapis.com">
+<link href="https://fonts.googleapis.com/css2?family=Geist:wght@300..700&family=Geist+Mono:wght@400..600&display=swap" rel="stylesheet">
+<link rel="stylesheet" href="../../styles.css">
+<script src="https://unpkg.com/react@18.3.1/umd/react.development.js" integrity="sha384-hD6/rw4ppMLGNu3tX5cjIb+uRZ7UkRJ6BPkLpg4hAu/6onKUg4lLsHAs9EBPT82L" crossorigin="anonymous"></script>
+<script src="https://unpkg.com/react-dom@18.3.1/umd/react-dom.development.js" integrity="sha384-u6aeetuaXnQ38mYT8rp6sbXaQe3NL9t+IBXmnYxwkUI2Hw4bsp2Wvmx4yRQF1uAm" crossorigin="anonymous"></script>
+<script src="https://unpkg.com/@babel/standalone@7.29.0/babel.min.js" integrity="sha384-m08KidiNqLdpJqLq95G/LEi8Qvjl/xUYll3QILypMoQ65QorJ9Lvtp2RXYGBFj1y" crossorigin="anonymous"></script>
+<script src="https://unpkg.com/lucide@0.544.0/dist/umd/lucide.min.js"></script>
+<script src="../../_ds_bundle.js"></script>
+<style>
+  body { margin: 0; background: var(--surface-app); color: var(--text-primary); font-family: var(--font-sans); }
+  #root { padding: 22px 24px; display: flex; gap: 22px; align-items: flex-start; flex-wrap: wrap; }
+  .lbl { font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--text-disabled); margin-bottom: 12px; }
+</style>
+</head>
+<body>
+<div id="root"></div>
+<script type="text/babel">
+const NS = window.ChicoryTVDesignSystem_eb3b61;
+const { Toast, Tooltip, Spinner, IconButton } = NS;
+const Ico = ({ n, s = 16 }) => { const r = React.useRef(null); React.useEffect(() => { if (r.current){ r.current.innerHTML=""; const el = window.lucide.createElement(window.lucide.icons[n]); el.setAttribute("width", s); el.setAttribute("height", s); r.current.appendChild(el);} }); return <span ref={r} style={{ display: "inline-flex" }} />; };
+
+function Demo() {
+  return (
+    <React.Fragment>
+      <div style={{ display: "flex", flexDirection: "column", gap: 12, width: 380 }}>
+        <Toast tone="ok" title="Channel saved" message="Retro Cartoons is now on air." onClose={() => {}} />
+        <Toast tone="warn" title="FFmpeg profile is not normalizing" message="Playback may stutter in some browsers." onClose={() => {}} />
+        <Toast tone="error" title="Playout build failed" message="No items match the schedule window." onClose={() => {}} />
+      </div>
+      <div>
+        <div className="lbl">Tooltip · Spinner</div>
+        <div style={{ display: "flex", alignItems: "center", gap: 16 }}>
+          <Tooltip label="Reset playout"><IconButton title="Reset"><Ico n="RefreshCw" /></IconButton></Tooltip>
+          <Tooltip label="Troubleshoot" placement="bottom"><IconButton title="Info"><Ico n="Info" /></IconButton></Tooltip>
+          <Spinner size={18} tone="accent" />
+          <Spinner size={18} tone="muted" />
+        </div>
+      </div>
+    </React.Fragment>
+  );
+}
+ReactDOM.createRoot(document.getElementById("root")).render(<Demo />);
+</script>
+</body>
+</html>

design-system/components/forms/Button.d.ts

@@ -0,0 +1,27 @@
+import * as React from "react";
+
+/**
+ * @startingPoint section="Forms" subtitle="Buttons in every variant & size" viewport="700x330"
+ */
+export interface ButtonProps {
+  children?: React.ReactNode;
+  /** Visual role. `primary` is the single accent action; use one per view. */
+  variant?: "primary" | "secondary" | "ghost" | "danger";
+  size?: "sm" | "md";
+  /** Icon element rendered before the label (16px stroke icon). */
+  startIcon?: React.ReactNode;
+  endIcon?: React.ReactNode;
+  disabled?: boolean;
+  /** Shows an inline spinner and disables the button. */
+  loading?: boolean;
+  fullWidth?: boolean;
+  type?: "button" | "submit" | "reset";
+  onClick?: (e: React.MouseEvent<HTMLButtonElement>) => void;
+  style?: React.CSSProperties;
+}
+
+/**
+ * Primary action button for ChicoryTV. One `primary` per view; everything else
+ * is `secondary`/`ghost`. `danger` for destructive confirmations.
+ */
+export function Button(props: ButtonProps): JSX.Element;

design-system/components/forms/Button.jsx

@@ -0,0 +1,107 @@
+import React from "react";
+
+const sizeMap = {
+  sm: { height: "var(--control-h-sm)", padding: "0 12px", font: "var(--text-xs)" },
+  md: { height: "var(--control-h)", padding: "0 14px", font: "var(--text-sm)" },
+};
+
+const variantStyle = {
+  primary: {
+    background: "var(--action-primary)",
+    color: "var(--text-on-accent)",
+    border: "1px solid transparent",
+  },
+  secondary: {
+    background: "var(--ctv-surface-2)",
+    color: "var(--text-primary)",
+    border: "1px solid var(--border-control)",
+  },
+  ghost: {
+    background: "transparent",
+    color: "var(--text-secondary)",
+    border: "1px solid transparent",
+  },
+  danger: {
+    background: "var(--ctv-error-soft)",
+    color: "var(--status-error)",
+    border: "1px solid rgba(229,72,77,0.35)",
+  },
+};
+
+const hoverBg = {
+  primary: "var(--action-primary-hover)",
+  secondary: "var(--ctv-surface-3)",
+  ghost: "var(--ctv-surface-2)",
+  danger: "rgba(229,72,77,0.22)",
+};
+
+/**
+ * ChicoryTV primary action button.
+ */
+export function Button({
+  children,
+  variant = "primary",
+  size = "md",
+  startIcon = null,
+  endIcon = null,
+  disabled = false,
+  loading = false,
+  fullWidth = false,
+  onClick,
+  type = "button",
+  style = {},
+  ...rest
+}) {
+  const [hover, setHover] = React.useState(false);
+  const [active, setActive] = React.useState(false);
+  const s = sizeMap[size] || sizeMap.md;
+  const v = variantStyle[variant] || variantStyle.primary;
+  const isDisabled = disabled || loading;
+
+  return (
+    <button
+      type={type}
+      disabled={isDisabled}
+      onClick={onClick}
+      onMouseEnter={() => setHover(true)}
+      onMouseLeave={() => { setHover(false); setActive(false); }}
+      onMouseDown={() => setActive(true)}
+      onMouseUp={() => setActive(false)}
+      style={{
+        display: "inline-flex",
+        alignItems: "center",
+        justifyContent: "center",
+        gap: "7px",
+        height: s.height,
+        padding: s.padding,
+        width: fullWidth ? "100%" : "auto",
+        font: `var(--weight-medium) ${s.font}/1 var(--font-sans)`,
+        letterSpacing: "0.01em",
+        borderRadius: "var(--radius-sm)",
+        cursor: isDisabled ? "not-allowed" : "pointer",
+        opacity: isDisabled ? 0.45 : 1,
+        whiteSpace: "nowrap",
+        transition: "background var(--dur-fast) var(--ease-standard), transform var(--dur-fast) var(--ease-standard)",
+        transform: active && !isDisabled ? "translateY(0.5px)" : "none",
+        ...v,
+        background: !isDisabled && hover ? hoverBg[variant] : v.background,
+        ...style,
+      }}
+      {...rest}
+    >
+      {loading ? <Spinner16 /> : startIcon}
+      {children}
+      {!loading && endIcon}
+    </button>
+  );
+}
+
+function Spinner16() {
+  return (
+    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" style={{ animation: "ctv-spin 0.7s linear infinite" }}>
+      <style>{`@keyframes ctv-spin{to{transform:rotate(360deg)}}`}</style>
+      <circle cx="12" cy="12" r="9" stroke="currentColor" strokeOpacity="0.25" strokeWidth="3" />
+      <path d="M21 12a9 9 0 0 0-9-9" stroke="currentColor" strokeWidth="3" strokeLinecap="round" />
+    </svg>
+  );
+}

design-system/components/forms/Button.prompt.md

@@ -0,0 +1,11 @@
+**Button** — the primary action control. Use exactly one `primary` button per view (add channel, save); everything else is `secondary` or `ghost`. `danger` is reserved for destructive confirmations.
+
+```jsx
+<Button variant="primary" startIcon={<PlusIcon/>}>Add Channel</Button>
+<Button variant="secondary">Edit Numbers</Button>
+<Button variant="ghost" size="sm">Cancel</Button>
+<Button variant="danger">Delete</Button>
+<Button variant="primary" loading>Saving…</Button>
+```
+
+Props: `variant` (primary·secondary·ghost·danger), `size` (sm·md), `startIcon`/`endIcon`, `loading`, `disabled`, `fullWidth`.

design-system/components/forms/Checkbox.d.ts

@@ -0,0 +1,16 @@
+import * as React from "react";
+
+export interface CheckboxProps {
+  checked?: boolean;
+  onChange?: (next: boolean) => void;
+  label?: string;
+  /** Mixed state for "select all" headers. */
+  indeterminate?: boolean;
+  disabled?: boolean;
+  style?: React.CSSProperties;
+}
+
+/**
+ * Checkbox for multi-select rows and option lists; supports indeterminate.
+ */
+export function Checkbox(props: CheckboxProps): JSX.Element;

design-system/components/forms/Checkbox.jsx

@@ -0,0 +1,37 @@
+import React from "react";
+
+/**
+ * Checkbox with label. Controlled via checked/onChange.
+ */
+export function Checkbox({ checked = false, onChange, disabled = false, label, indeterminate = false, style = {} }) {
+  const toggle = () => { if (!disabled && onChange) onChange(!checked); };
+  const on = checked || indeterminate;
+  return (
+    <label style={{ display: "inline-flex", alignItems: "center", gap: "8px", cursor: disabled ? "not-allowed" : "pointer", opacity: disabled ? 0.5 : 1, ...style }}>
+      <span
+        role="checkbox"
+        aria-checked={indeterminate ? "mixed" : checked}
+        onClick={toggle}
+        style={{
+          display: "inline-flex",
+          alignItems: "center",
+          justifyContent: "center",
+          width: 17,
+          height: 17,
+          flex: "0 0 auto",
+          borderRadius: "var(--radius-xs)",
+          background: on ? "var(--action-primary)" : "var(--ctv-bg-sunken)",
+          border: `1px solid ${on ? "transparent" : "var(--border-control)"}`,
+          transition: "background var(--dur-fast), border-color var(--dur-fast)",
+        }}
+      >
+        {indeterminate ? (
+          <svg width="11" height="11" viewBox="0 0 24 24"><path d="M6 12h12" stroke="#fff" strokeWidth="3" strokeLinecap="round" /></svg>
+        ) : checked ? (
+          <svg width="12" height="12" viewBox="0 0 24 24" fill="none"><path d="M5 12.5l4.5 4.5L19 7" stroke="#fff" strokeWidth="3" strokeLinecap="round" strokeLinejoin="round" /></svg>
+        ) : null}
+      </span>
+      {label && <span style={{ font: "var(--text-sm)/1 var(--font-sans)", color: "var(--text-primary)" }}>{label}</span>}
+    </label>
+  );
+}

design-system/components/forms/Checkbox.prompt.md

@@ -0,0 +1,8 @@
+**Checkbox** — multi-select in tables (collection items, bulk actions) and option lists. Use `indeterminate` on a header "select all".
+
+```jsx
+<Checkbox checked={sel} onChange={setSel} label="Include in EPG" />
+<Checkbox indeterminate onChange={selectAll} />
+```
+
+Props: `checked`, `onChange(next)`, `label`, `indeterminate`, `disabled`.

design-system/components/forms/IconButton.d.ts

@@ -0,0 +1,20 @@
+import * as React from "react";
+
+export interface IconButtonProps {
+  /** A 16–18px stroke icon element. */
+  children?: React.ReactNode;
+  size?: "sm" | "md";
+  variant?: "ghost" | "solid";
+  /** Persistent pressed/selected state (e.g. active view toggle). */
+  active?: boolean;
+  disabled?: boolean;
+  /** Tooltip + aria-label — always provide one. */
+  title?: string;
+  onClick?: (e: React.MouseEvent<HTMLButtonElement>) => void;
+  style?: React.CSSProperties;
+}
+
+/**
+ * Square icon-only button for dense row actions and toolbars.
+ */
+export function IconButton(props: IconButtonProps): JSX.Element;

design-system/components/forms/IconButton.jsx

@@ -0,0 +1,59 @@
+import React from "react";
+
+/**
+ * Compact square icon button — table row actions, toolbars.
+ */
+export function IconButton({
+  children,
+  size = "md",
+  variant = "ghost",
+  disabled = false,
+  active = false,
+  title,
+  onClick,
+  style = {},
+  ...rest
+}) {
+  const [hover, setHover] = React.useState(false);
+  const dim = size === "sm" ? 28 : 32;
+
+  const base =
+    variant === "solid"
+      ? { background: "var(--action-primary)", color: "var(--text-on-accent)" }
+      : { background: active ? "var(--ctv-surface-3)" : "transparent", color: active ? "var(--text-primary)" : "var(--text-secondary)" };
+
+  const hoverBg =
+    variant === "solid" ? "var(--action-primary-hover)" : "var(--ctv-surface-2)";
+
+  return (
+    <button
+      type="button"
+      title={title}
+      aria-label={title}
+      disabled={disabled}
+      onClick={onClick}
+      onMouseEnter={() => setHover(true)}
+      onMouseLeave={() => setHover(false)}
+      style={{
+        display: "inline-flex",
+        alignItems: "center",
+        justifyContent: "center",
+        width: dim,
+        height: dim,
+        flex: "0 0 auto",
+        borderRadius: "var(--radius-sm)",
+        border: "1px solid transparent",
+        cursor: disabled ? "not-allowed" : "pointer",
+        opacity: disabled ? 0.4 : 1,
+        color: base.color,
+        background: !disabled && hover ? hoverBg : base.background,
+        transition: "background var(--dur-fast) var(--ease-standard), color var(--dur-fast) var(--ease-standard)",
+        ...(!disabled && hover && variant !== "solid" ? { color: "var(--text-primary)" } : {}),
+        ...style,
+      }}
+      {...rest}
+    >
+      {children}
+    </button>
+  );
+}

design-system/components/forms/IconButton.prompt.md

@@ -0,0 +1,9 @@
+**IconButton** — icon-only square button for table row actions (edit, preview, delete) and toolbars. Always pass `title` for the tooltip/aria-label.
+
+```jsx
+<IconButton title="Edit channel"><EditIcon/></IconButton>
+<IconButton title="Preview" variant="solid"><PlayIcon/></IconButton>
+<IconButton title="Delete" disabled><TrashIcon/></IconButton>
+```
+
+Props: `size` (sm·md), `variant` (ghost·solid), `active`, `disabled`, `title`.

design-system/components/forms/Input.d.ts

@@ -0,0 +1,24 @@
+import * as React from "react";
+
+export interface InputProps {
+  label?: string;
+  value?: string;
+  onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;
+  placeholder?: string;
+  /** 16px stroke icon shown inside, left of the field (e.g. search). */
+  leadingIcon?: React.ReactNode;
+  /** Element pinned to the right inside the field (clear button, unit). */
+  trailing?: React.ReactNode;
+  /** Error message — turns the border red and shows text below. */
+  error?: string | null;
+  disabled?: boolean;
+  size?: "sm" | "md";
+  type?: string;
+  fullWidth?: boolean;
+  style?: React.CSSProperties;
+}
+
+/**
+ * Text field on a sunken well with focus ring and optional icon/error.
+ */
+export function Input(props: InputProps): JSX.Element;

design-system/components/forms/Input.jsx

@@ -0,0 +1,90 @@
+import React from "react";
+
+/**
+ * Text input with optional label, leading icon and error state.
+ */
+export function Input({
+  label,
+  value,
+  onChange,
+  placeholder,
+  leadingIcon = null,
+  trailing = null,
+  error = null,
+  disabled = false,
+  size = "md",
+  type = "text",
+  fullWidth = true,
+  style = {},
+  ...rest
+}) {
+  const [focus, setFocus] = React.useState(false);
+  const height = size === "sm" ? "var(--control-h-sm)" : "var(--control-h)";
+  const borderColor = error
+    ? "var(--status-error)"
+    : focus
+    ? "var(--action-primary)"
+    : "var(--border-control)";
+
+  return (
+    <label style={{ display: "block", width: fullWidth ? "100%" : "auto" }}>
+      {label && (
+        <span
+          style={{
+            display: "block",
+            marginBottom: "6px",
+            font: "var(--weight-medium) var(--text-xs)/1 var(--font-sans)",
+            color: "var(--text-secondary)",
+          }}
+        >
+          {label}
+        </span>
+      )}
+      <span
+        style={{
+          display: "flex",
+          alignItems: "center",
+          gap: "8px",
+          height,
+          padding: "0 10px",
+          background: "var(--ctv-bg-sunken)",
+          border: `1px solid ${borderColor}`,
+          borderRadius: "var(--radius-sm)",
+          boxShadow: focus && !error ? "0 0 0 3px var(--focus-ring)" : "none",
+          transition: "border-color var(--dur-fast) var(--ease-standard), box-shadow var(--dur-fast) var(--ease-standard)",
+          opacity: disabled ? 0.5 : 1,
+          ...style,
+        }}
+      >
+        {leadingIcon && (
+          <span style={{ display: "flex", color: "var(--text-disabled)", flex: "0 0 auto" }}>{leadingIcon}</span>
+        )}
+        <input
+          type={type}
+          value={value}
+          onChange={onChange}
+          placeholder={placeholder}
+          disabled={disabled}
+          onFocus={() => setFocus(true)}
+          onBlur={() => setFocus(false)}
+          style={{
+            flex: 1,
+            minWidth: 0,
+            background: "transparent",
+            border: "none",
+            outline: "none",
+            color: "var(--text-primary)",
+            font: "var(--weight-normal) var(--text-sm)/1 var(--font-sans)",
+          }}
+          {...rest}
+        />
+        {trailing && <span style={{ display: "flex", flex: "0 0 auto" }}>{trailing}</span>}
+      </span>
+      {error && (
+        <span style={{ display: "block", marginTop: "5px", font: "var(--text-xs)/1.3 var(--font-sans)", color: "var(--status-error)" }}>
+          {error}
+        </span>
+      )}
+    </label>
+  );
+}

design-system/components/forms/Input.prompt.md

@@ -0,0 +1,9 @@
+**Input** — text field on a sunken well. Supports label, leading icon (search), trailing element, and error state.
+
+```jsx
+<Input label="Channel name" value={v} onChange={e=>set(e.target.value)} />
+<Input leadingIcon={<SearchIcon/>} placeholder="Search channels…" />
+<Input label="Number" error="Already in use" value="5.1" />
+```
+
+Props: `label`, `leadingIcon`, `trailing`, `error`, `size` (sm·md), `disabled`, `type`.