fix(web): schedule editor review fixes for #86

- Add a schedule selector (previously only the first schedule was ever
  shown); switching loads items only, with a pane-level spinner
- Fix duplicated mount effect that fetched the whole screen twice
- Add a collection picker to the add-item flow (was silently using the
  alphabetically-first collection with no way to correct it)
- Reorder now reconciles from the PUT response; add/delete refetch items
  only — pickers are no longer refetched on every mutation
- Guard reorder against double-submit via a ref; remove the inert Save
  button; document the widened item type (OpenAPI gap → #126)
- Inspector fidelity: Tail filler row + Keep multi-part together
- a11y: aria-current for the active item, draggable role description
- CSS: correct --text-md fallbacks; replace nonexistent --text-faint
  with --text-disabled in new blocks
- Tests: single-fetch-on-mount assertion, chosen-collection POST body,
  picker-failure path, collection() fixture with all required fields;
  drop unreachable mock branch (52 tests)

Review: PR #125 findings; refs #126

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

ErsatzTV.Core.Tests/Streaming/DirectStreamSessionTrackerTests.cs

@@ -0,0 +1,98 @@
+using ErsatzTV.Core.Domain;
+using ErsatzTV.Core.Interfaces.Streaming;
+using ErsatzTV.Core.Streaming;
+using NUnit.Framework;
+using Shouldly;
+
+namespace ErsatzTV.Core.Tests.Streaming;
+
+[TestFixture]
+public class DirectStreamSessionTrackerTests
+{
+    [Test]
+    public void Should_Track_Concurrent_Viewers_Per_Channel()
+    {
+        var tracker = new DirectStreamSessionTracker();
+
+        using IDisposable session1 = tracker.Register("1", StreamingMode.TransportStream);
+        using IDisposable session2 = tracker.Register("1", StreamingMode.HttpLiveStreamingDirect);
+        using IDisposable session3 = tracker.Register("2", StreamingMode.TransportStream);
+
+        tracker.IsActive("1").ShouldBeTrue();
+        tracker.GetViewerCount("1").ShouldBe(2);
+        tracker.GetViewerCount("2").ShouldBe(1);
+        tracker.GetActiveSessions().Count.ShouldBe(3);
+    }
+
+    [Test]
+    public void Should_Remove_Only_Disposed_Session()
+    {
+        var tracker = new DirectStreamSessionTracker();
+
+        IDisposable session1 = tracker.Register("1", StreamingMode.TransportStream);
+        IDisposable session2 = tracker.Register("1", StreamingMode.TransportStream);
+
+        session1.Dispose();
+
+        tracker.IsActive("1").ShouldBeTrue();
+        tracker.GetViewerCount("1").ShouldBe(1);
+
+        session2.Dispose();
+
+        tracker.IsActive("1").ShouldBeFalse();
+        tracker.GetViewerCount("1").ShouldBe(0);
+    }
+
+    [Test]
+    public void Should_Dispose_Registration_Only_Once()
+    {
+        var tracker = new DirectStreamSessionTracker();
+
+        IDisposable session = tracker.Register("1", StreamingMode.TransportStream);
+
+        session.Dispose();
+        session.Dispose();
+
+        tracker.IsActive("1").ShouldBeFalse();
+        tracker.GetViewerCount("1").ShouldBe(0);
+    }
+
+    [Test]
+    public void Should_Filter_Active_Sessions_By_Channel()
+    {
+        var tracker = new DirectStreamSessionTracker();
+
+        using IDisposable session1 = tracker.Register("1", StreamingMode.TransportStream);
+        using IDisposable session2 = tracker.Register("2", StreamingMode.HttpLiveStreamingDirect);
+
+        IReadOnlyCollection<DirectStreamSession> sessions = tracker.GetActiveSessions("2");
+
+        sessions.Count.ShouldBe(1);
+        sessions.Single().ChannelNumber.ShouldBe("2");
+        sessions.Single().StreamingMode.ShouldBe(StreamingMode.HttpLiveStreamingDirect);
+    }
+
+    [Test]
+    public void Should_Not_Orphan_Session_When_Last_Registration_Is_Removed_During_Register()
+    {
+        DirectStreamSessionTracker tracker = null;
+        IDisposable existingSession = null;
+
+        tracker = new TestDirectStreamSessionTracker(() => existingSession?.Dispose());
+        existingSession = tracker.Register("1", StreamingMode.TransportStream);
+
+        using IDisposable newSession = tracker.Register("1", StreamingMode.HttpLiveStreamingDirect);
+
+        tracker.IsActive("1").ShouldBeTrue();
+        tracker.GetViewerCount("1").ShouldBe(1);
+
+        IReadOnlyCollection<DirectStreamSession> sessions = tracker.GetActiveSessions("1");
+        sessions.Count.ShouldBe(1);
+        sessions.Single().StreamingMode.ShouldBe(StreamingMode.HttpLiveStreamingDirect);
+    }
+
+    private sealed class TestDirectStreamSessionTracker(Action onRegisteringSession) : DirectStreamSessionTracker
+    {
+        protected override void OnRegisteringSession() => onRegisteringSession();
+    }
+}

ErsatzTV.Core/Interfaces/Streaming/IDirectStreamSessionTracker.cs

@@ -0,0 +1,13 @@
+using ErsatzTV.Core.Domain;
+using ErsatzTV.Core.Streaming;
+
+namespace ErsatzTV.Core.Interfaces.Streaming;
+
+public interface IDirectStreamSessionTracker
+{
+    IDisposable Register(string channelNumber, StreamingMode streamingMode);
+    bool IsActive(string channelNumber);
+    int GetViewerCount(string channelNumber);
+    IReadOnlyCollection<DirectStreamSession> GetActiveSessions();
+    IReadOnlyCollection<DirectStreamSession> GetActiveSessions(string channelNumber);
+}

ErsatzTV.Core/Streaming/DirectStreamSession.cs

@@ -0,0 +1,9 @@
+using ErsatzTV.Core.Domain;
+
+namespace ErsatzTV.Core.Streaming;
+
+public record DirectStreamSession(
+    Guid Id,
+    string ChannelNumber,
+    StreamingMode StreamingMode,
+    DateTimeOffset StartedAt);

ErsatzTV.Core/Streaming/DirectStreamSessionTracker.cs

@@ -0,0 +1,66 @@
+using System.Collections.Concurrent;
+using ErsatzTV.Core.Domain;
+using ErsatzTV.Core.Interfaces.Streaming;
+
+namespace ErsatzTV.Core.Streaming;
+
+public class DirectStreamSessionTracker : IDirectStreamSessionTracker
+{
+    private readonly ConcurrentDictionary<string, ConcurrentDictionary<Guid, DirectStreamSession>> _sessions = new();
+
+    public IDisposable Register(string channelNumber, StreamingMode streamingMode)
+    {
+        var session = new DirectStreamSession(Guid.NewGuid(), channelNumber, streamingMode, DateTimeOffset.Now);
+
+        ConcurrentDictionary<Guid, DirectStreamSession> channelSessions =
+            _sessions.GetOrAdd(channelNumber, _ => new ConcurrentDictionary<Guid, DirectStreamSession>());
+
+        OnRegisteringSession();
+
+        channelSessions.TryAdd(session.Id, session);
+
+        return new Registration(this, session);
+    }
+
+    protected virtual void OnRegisteringSession()
+    {
+    }
+
+    public bool IsActive(string channelNumber) => GetViewerCount(channelNumber) > 0;
+
+    public int GetViewerCount(string channelNumber) =>
+        _sessions.TryGetValue(channelNumber, out ConcurrentDictionary<Guid, DirectStreamSession> channelSessions)
+            ? channelSessions.Count
+            : 0;
+
+    public IReadOnlyCollection<DirectStreamSession> GetActiveSessions() =>
+        _sessions.Values.SelectMany(s => s.Values).ToList();
+
+    public IReadOnlyCollection<DirectStreamSession> GetActiveSessions(string channelNumber) =>
+        _sessions.TryGetValue(channelNumber, out ConcurrentDictionary<Guid, DirectStreamSession> channelSessions)
+            ? channelSessions.Values.ToList()
+            : [];
+
+    private void Remove(DirectStreamSession session)
+    {
+        if (!_sessions.TryGetValue(session.ChannelNumber, out ConcurrentDictionary<Guid, DirectStreamSession> channelSessions))
+        {
+            return;
+        }
+
+        channelSessions.TryRemove(session.Id, out _);
+    }
+
+    private sealed class Registration(DirectStreamSessionTracker tracker, DirectStreamSession session) : IDisposable
+    {
+        private int _disposed;
+
+        public void Dispose()
+        {
+            if (Interlocked.Exchange(ref _disposed, 1) == 0)
+            {
+                tracker.Remove(session);
+            }
+        }
+    }
+}

ErsatzTV.Tests/Controllers/TrackedFileStreamResultTests.cs

@@ -0,0 +1,183 @@
+using ErsatzTV.Controllers;
+using ErsatzTV.Core.Domain;
+using ErsatzTV.Core.Interfaces.Streaming;
+using ErsatzTV.Core.Streaming;
+using Microsoft.AspNetCore.Http;
+using Microsoft.AspNetCore.Mvc;
+using Microsoft.AspNetCore.Routing;
+using Microsoft.Extensions.DependencyInjection;
+using NSubstitute;
+using NUnit.Framework;
+using Shouldly;
+
+namespace ErsatzTV.Tests.Controllers;
+
+[TestFixture]
+public class TrackedFileStreamResultTests
+{
+    [Test]
+    public async Task Should_Track_Session_Only_While_Result_Executes()
+    {
+        var tracker = new DirectStreamSessionTracker();
+        var stream = new BlockingReadStream();
+        TrackedFileStreamResult result = new(
+            stream,
+            "video/mp2t",
+            tracker,
+            "1",
+            StreamingMode.TransportStream);
+
+        ActionContext context = GetActionContext();
+
+        tracker.IsActive("1").ShouldBeFalse();
+
+        Task execute = result.ExecuteResultAsync(context);
+        await stream.WaitForRead();
+
+        tracker.IsActive("1").ShouldBeTrue();
+        tracker.GetViewerCount("1").ShouldBe(1);
+
+        stream.Complete();
+        await execute;
+
+        tracker.IsActive("1").ShouldBeFalse();
+        tracker.GetViewerCount("1").ShouldBe(0);
+    }
+
+    [Test]
+    public async Task Should_Remove_Session_When_Response_Stream_Fails()
+    {
+        var tracker = new DirectStreamSessionTracker();
+        TrackedFileStreamResult result = new(
+            new ThrowingReadStream(new IOException("stream failed")),
+            "video/mp2t",
+            tracker,
+            "1",
+            StreamingMode.HttpLiveStreamingDirect);
+
+        Func<Task> execute = () => result.ExecuteResultAsync(GetActionContext());
+
+        await execute.ShouldThrowAsync<IOException>();
+
+        tracker.IsActive("1").ShouldBeFalse();
+        tracker.GetViewerCount("1").ShouldBe(0);
+    }
+
+    [Test]
+    public async Task Should_Remove_Session_When_Response_Stream_Is_Aborted()
+    {
+        var tracker = new DirectStreamSessionTracker();
+        TrackedFileStreamResult result = new(
+            new ThrowingReadStream(new OperationCanceledException("client aborted")),
+            "video/mp2t",
+            tracker,
+            "1",
+            StreamingMode.HttpLiveStreamingDirect);
+
+        await result.ExecuteResultAsync(GetActionContext());
+
+        tracker.IsActive("1").ShouldBeFalse();
+        tracker.GetViewerCount("1").ShouldBe(0);
+    }
+
+    [Test]
+    public async Task Should_Not_Track_Session_For_Head_Request()
+    {
+        IDirectStreamSessionTracker tracker = Substitute.For<IDirectStreamSessionTracker>();
+        var stream = new BlockingReadStream();
+        TrackedFileStreamResult result = new(
+            stream,
+            "video/mp2t",
+            tracker,
+            "1",
+            StreamingMode.TransportStream);
+
+        await result.ExecuteResultAsync(GetActionContext(HttpMethods.Head));
+
+        tracker.DidNotReceive().Register(Arg.Any<string>(), Arg.Any<StreamingMode>());
+    }
+
+    private static ActionContext GetActionContext(string method = "GET")
+    {
+        var httpContext = new DefaultHttpContext();
+        httpContext.Request.Method = method;
+        httpContext.RequestServices = new ServiceCollection()
+            .AddLogging()
+            .AddControllers()
+            .Services
+            .BuildServiceProvider();
+        httpContext.Response.Body = new MemoryStream();
+
+        return new ActionContext(httpContext, new RouteData(), new Microsoft.AspNetCore.Mvc.Abstractions.ActionDescriptor());
+    }
+
+    private sealed class BlockingReadStream : Stream
+    {
+        private readonly TaskCompletionSource _continue = new(TaskCreationOptions.RunContinuationsAsynchronously);
+        private readonly TaskCompletionSource _readStarted = new(TaskCreationOptions.RunContinuationsAsynchronously);
+
+        public override bool CanRead => true;
+        public override bool CanSeek => false;
+        public override bool CanWrite => false;
+        public override long Length => 0;
+        public override long Position { get; set; }
+
+        public Task WaitForRead() => _readStarted.Task.WaitAsync(TimeSpan.FromSeconds(5));
+
+        public void Complete() => _continue.SetResult();
+
+        public override ValueTask<int> ReadAsync(Memory<byte> buffer, CancellationToken cancellationToken = default)
+        {
+            _readStarted.TrySetResult();
+            return ReadAfterContinue();
+        }
+
+        public override Task<int> ReadAsync(byte[] buffer, int offset, int count, CancellationToken cancellationToken) =>
+            ReadAsync(buffer.AsMemory(offset, count), cancellationToken).AsTask();
+
+        public override int Read(byte[] buffer, int offset, int count) => throw new NotSupportedException();
+
+        public override void Flush()
+        {
+        }
+
+        public override long Seek(long offset, SeekOrigin origin) => throw new NotSupportedException();
+
+        public override void SetLength(long value) => throw new NotSupportedException();
+
+        public override void Write(byte[] buffer, int offset, int count) => throw new NotSupportedException();
+
+        private async ValueTask<int> ReadAfterContinue()
+        {
+            await _continue.Task;
+            return 0;
+        }
+    }
+
+    private sealed class ThrowingReadStream(Exception exception) : Stream
+    {
+        public override bool CanRead => true;
+        public override bool CanSeek => false;
+        public override bool CanWrite => false;
+        public override long Length => 0;
+        public override long Position { get; set; }
+
+        public override ValueTask<int> ReadAsync(Memory<byte> buffer, CancellationToken cancellationToken = default) =>
+            ValueTask.FromException<int>(exception);
+
+        public override Task<int> ReadAsync(byte[] buffer, int offset, int count, CancellationToken cancellationToken) =>
+            ReadAsync(buffer.AsMemory(offset, count), cancellationToken).AsTask();
+
+        public override int Read(byte[] buffer, int offset, int count) => throw exception;
+
+        public override void Flush()
+        {
+        }
+
+        public override long Seek(long offset, SeekOrigin origin) => throw new NotSupportedException();
+
+        public override void SetLength(long value) => throw new NotSupportedException();
+
+        public override void Write(byte[] buffer, int offset, int count) => throw new NotSupportedException();
+    }
+}

ErsatzTV/Controllers/IptvController.cs

@@ -25,6 +25,7 @@ namespace ErsatzTV.Controllers;
 [ServiceFilter(typeof(ConditionalIptvAuthorizeFilter))]
 public class IptvController : StreamingControllerBase
 {
+    private readonly IDirectStreamSessionTracker _directStreamSessionTracker;
     private readonly IFFmpegSegmenterService _ffmpegSegmenterService;
     private readonly ILogger<IptvController> _logger;
     private readonly IMediator _mediator;
@@ -33,9 +34,11 @@ public class IptvController : StreamingControllerBase
         IMediator mediator,
         IGraphicsEngine graphicsEngine,
         ILogger<IptvController> logger,
-        IFFmpegSegmenterService ffmpegSegmenterService)
+        IFFmpegSegmenterService ffmpegSegmenterService,
+        IDirectStreamSessionTracker directStreamSessionTracker)
         : base(graphicsEngine, logger)
     {
+        _directStreamSessionTracker = directStreamSessionTracker;
         _mediator = mediator;
         _logger = logger;
         _ffmpegSegmenterService = ffmpegSegmenterService;
@@ -150,7 +153,14 @@ public class IptvController : StreamingControllerBase
                     }
 
                     process.Start();
-                    return new FileStreamResult(process.StandardOutput.BaseStream, "video/mp2t");
+                    return mode == "ts-legacy"
+                        ? new TrackedFileStreamResult(
+                            process.StandardOutput.BaseStream,
+                            "video/mp2t",
+                            _directStreamSessionTracker,
+                            channelNumber,
+                            StreamingMode.TransportStream)
+                        : new FileStreamResult(process.StandardOutput.BaseStream, "video/mp2t");
                 },
                 error => BadRequest(error.Value)));
     }
@@ -353,7 +363,11 @@ public class IptvController : StreamingControllerBase
 
         Either<BaseError, PlayoutItemProcessModel> result = await _mediator.Send(request);
 
-        return GetProcessResponse(result, channelNumber, StreamingMode.HttpLiveStreamingDirect);
+        return GetProcessResponse(
+            result,
+            channelNumber,
+            StreamingMode.HttpLiveStreamingDirect,
+            _directStreamSessionTracker);
     }
 
     private string AccessTokenQuery() => string.IsNullOrWhiteSpace(Request.Query["access_token"])

ErsatzTV/Controllers/StreamingControllerBase.cs

@@ -16,7 +16,8 @@ public abstract class StreamingControllerBase(IGraphicsEngine graphicsEngine, IL
     protected IActionResult GetProcessResponse(
         Either<BaseError, PlayoutItemProcessModel> result,
         string channelNumber,
-        StreamingMode mode)
+        StreamingMode mode,
+        IDirectStreamSessionTracker directStreamSessionTracker = null)
     {
         foreach (BaseError error in result.LeftToSeq())
         {
@@ -30,14 +31,18 @@ public abstract class StreamingControllerBase(IGraphicsEngine graphicsEngine, IL
 
         foreach (PlayoutItemProcessModel processModel in result.RightToSeq())
         {
-            return StartPlayout(processModel);
+            return StartPlayout(processModel, channelNumber, mode, directStreamSessionTracker);
         }
 
         // this will never happen
         return new NotFoundResult();
     }
 
-    private FileStreamResult StartPlayout(PlayoutItemProcessModel processModel)
+    private FileStreamResult StartPlayout(
+        PlayoutItemProcessModel processModel,
+        string channelNumber,
+        StreamingMode mode,
+        IDirectStreamSessionTracker directStreamSessionTracker)
     {
         // for process counter
         var ffmpegProcess = new FFmpegProcess();
@@ -86,6 +91,10 @@ public abstract class StreamingControllerBase(IGraphicsEngine graphicsEngine, IL
             null,
             TaskScheduler.Default);
 
-        return new FileStreamResult(pipe.Reader.AsStream(), "video/mp2t");
+        Stream stream = pipe.Reader.AsStream();
+
+        return directStreamSessionTracker is null
+            ? new FileStreamResult(stream, "video/mp2t")
+            : new TrackedFileStreamResult(stream, "video/mp2t", directStreamSessionTracker, channelNumber, mode);
     }
 }

ErsatzTV/Controllers/TrackedFileStreamResult.cs

@@ -0,0 +1,27 @@
+using ErsatzTV.Core.Domain;
+using ErsatzTV.Core.Interfaces.Streaming;
+using Microsoft.AspNetCore.Http;
+using Microsoft.AspNetCore.Mvc;
+
+namespace ErsatzTV.Controllers;
+
+public class TrackedFileStreamResult(
+    Stream fileStream,
+    string contentType,
+    IDirectStreamSessionTracker directStreamSessionTracker,
+    string channelNumber,
+    StreamingMode streamingMode) : FileStreamResult(fileStream, contentType)
+{
+    public override async Task ExecuteResultAsync(ActionContext context)
+    {
+        if (HttpMethods.IsHead(context.HttpContext.Request.Method))
+        {
+            await base.ExecuteResultAsync(context);
+            return;
+        }
+
+        using IDisposable registration = directStreamSessionTracker.Register(channelNumber, streamingMode);
+
+        await base.ExecuteResultAsync(context);
+    }
+}

ErsatzTV/Startup.cs

@@ -44,6 +44,7 @@ using ErsatzTV.Core.Scheduling.Engine;
 using ErsatzTV.Core.Scheduling.ScriptedScheduling;
 using ErsatzTV.Core.Scheduling.YamlScheduling;
 using ErsatzTV.Core.Search;
+using ErsatzTV.Core.Streaming;
 using ErsatzTV.Core.Trakt;
 using ErsatzTV.Core.Troubleshooting;
 using ErsatzTV.FFmpeg.Capabilities;
@@ -819,6 +820,7 @@ public class Startup
         services.AddSingleton<IScannerProxyService, ScannerProxyService>();
         services.AddSingleton<IScriptedPlayoutBuilderService, ScriptedPlayoutBuilderService>();
         services.AddSingleton<IFFmpegSegmenterService, FFmpegSegmenterService>();
+        services.AddSingleton<IDirectStreamSessionTracker, DirectStreamSessionTracker>();
         services.AddSingleton<ITempFilePool, TempFilePool>();
         services.AddSingleton<IHlsPlaylistFilter, HlsPlaylistFilter>();
         services.AddSingleton<RecyclableMemoryStreamManager>();

docs/handoffs/chicorytv-issue-queue.md

@@ -4,135 +4,145 @@ Paste the prompt below into a fresh session to work the next item. Each session
 UPDATING THIS FILE in place (rewrite the state section and the queue for the next item) so it
 always holds the current handoff. History: created 2026-07-02 after the plan audit (#59 epic)
 filed backend gap issues #100–#111; a 7–9-way parallel workflow build once exhausted RAM, so
-builds are limited to 2–3 concurrent, never wide fan-outs. Done so far: #97 (PR #112, still
-stacked on docs/59-ui-redesign-brief), #105 (PR #113), #108 (PR #114), #100+#101+#107+#110
-(PR #116), #103+#106 (PR #115, Codex), #104 (PR #117), #111 (PR #118), #102 (PR #119 — the
-last backend gap issue). All backend issues merged to main and closed as of 2026-07-04.
+builds are limited to 2–3 concurrent, never wide fan-outs. Backend gaps all landed by
+2026-07-04 (#105/#108/#100+#101+#107+#110/#103+#106/#104/#111/#102 → PRs #113–#119). The
+MERGE PASS (2026-07-04) then landed the whole SPA stack on main via PR #120.
 
-**Session state (2026-07-04, post-#102)**: Codex usage is EXHAUSTED — single prompt per
-session. main is at 6f6f37b7 (post-#119): FULL backend read API + artwork upload + JSON guide.
-ErsatzTV.Tests on main = 323 tests; ErsatzTV.Core.Tests = 488 (+1 skipped) — all green.
-No pre-seeded WIP branches remain. Worktree .worktrees/issue-97-channel-state-api still
-exists for open PR #112 (targets docs/59-ui-redesign-brief); .worktrees/feat-102 is merged
-(remove it). The docs/59-ui-redesign-brief branch (this file's branch) carries the SPA
-foundation (web/) + #96/#98 + PR-#112-pending #97 — none of it on main yet → MERGE PASS is
-the next item.
+**Session state (2026-07-04, post-#109)**: main = 4ffd777b (PR #123 "Dashboard real data
+sources"): the Dashboard is the first SPA screen running fully on live API data. On main:
+design-system/ + web/ foundation (#78–#83), backend #96/#98/#97, Dockerfile hotfix #122,
+direct-stream session tracker (#99 seam, PR #121), Dashboard data (#109, PR #123). #109
+closed. #99 remains open ONLY for the final `/api/channels/state` wiring (combine
+`IFFmpegSegmenterService.IsActive` with `IDirectStreamSessionTracker`). Baselines:
+ErsatzTV.Tests **368**, Core.Tests **493** (+1 skip); web tests **31** (App.test.tsx 20);
+web lint/typecheck/build clean (build output ErsatzTV/wwwroot/app/, gitignored; SPA types
+web/src/api/generated/v1.d.ts, regen `npm run generate:api`).
+- **#109 review cycle (pattern that worked)**: Codex implemented → Fable review caught 1
+  substantial bug (health widget matched status strings the API never emits —
+  `error/failed/unhealthy`+`warning/degraded` vs the REAL `pass|fail|warn|info` from
+  Health/Mapper.cs; fictional test fixtures masked it) + 4 nits → all fixed in-session by a
+  sonnet subagent (e6197d63) → CI green → merged. LESSON: frontend tests must use fixture
+  values copied from the backend serializer, not invented ones; reviewers should diff
+  fixtures against the producing C# code.
+- Dashboard health policy (binding for future screens): /api/health is fetched on mount +
+  guarded manual refresh ONLY (no intervals) — it re-runs ~14 checks per request. A backend
+  TTL cache is the unfiled prerequisite for any live health display.
+- Worktrees: remove .worktrees/issue-99-session-tracking and .worktrees/issue-109-dashboard
+  (both merged). The main checkout still sits on docs/59-ui-redesign-brief — fully merged,
+  safe to switch to main.
 
-**Lessons for all remaining prompts** (accumulated from #116/#104/#111/#102 reviews):
-- DTO records in ErsatzTV.Core/Api MUST get file-scoped `#nullable enable` — with the project
-  default Nullable=disable the regenerated OpenAPI documents every string as `["null","string"]`
-  (breaks SPA typegen with needless `| null`); with it, non-`?` properties emit plain `string`.
-  Precedent: ErsatzTV.Core/Api/Playouts/PlayoutResponseModel.cs. NOTE (#102): ErsatzTV.Application
-  has NO nullable context — `string?` there trips CS8632; returning null from a plain `string`
-  method is fine and the DTO's `string?` param keeps the spec nullable.
-- NSubstitute + ConfigElementKey (#102): `ConfigElementKey.X` returns a FRESH instance per
-  access (reference equality) — stubbing `GetValue<T>(ConfigElementKey.X, …)` never matches.
-  Use `Arg.Any<ConfigElementKey>()` disambiguated by the generic `<T>` (precedent:
-  FFmpegProfileHandlerTests).
-- `Option<T>.ToNullable()` does NOT exist in this LanguageExt version; Option→nullable is
-  `MatchUnsafe(v => (T?)v, () => null)` (idiom: ErsatzTV.Application/Health/Mapper.cs). Plain
-  `Match` throws ResultIsNullException on a null-returning branch.
-- ./scripts/update-openapi.sh runs `dotnet build -t:GenerateOpenApiDocuments` ONLY — after
-  editing code, run a normal `dotnet build ErsatzTV/ErsatzTV.csproj` FIRST or the script fails
-  with MSB3680.
-- Id-taking child-collection GETs 404 on unknown parent via a pre-check + ApiResults
-  (precedent: ScheduleController.GetItems, PlayoutController.GetItems) + an
-  OpenApiErrorResponseContractTests [TestCase] entry.
-- Backlog nits (not filed as issues yet): pageSize is unclamped on all paged endpoints;
-  PlayoutController Create/Delete lack route Name=; PlayoutController.GetItems' existence
-  pre-check reuses GetPlayoutById (3 Includes) instead of a lightweight exists query;
-  uploads >30 MB hit Kestrel's default cap and return a bare 413 (no ProblemDetails);
-  artwork content-type is trusted from the client header (magic-byte sniffing = #66);
-  schedule duration estimator: expression-based `Count` and `Count="0"` both yield null
-  estimates, and it fully materializes each referenced collection per GET.
-  NEW from #102 (also commented on #85): GET /api/guide runs the full 21-include
-  eager-load per channel per request (loads artwork/genres/guids the JSON never uses) —
-  trim the projection or add caching before the EPG grid polls it; and `fillerKind` in the
-  JSON guide is almost always `None` because the shared projector merges filler into
-  adjacent programmes (the no-drift requirement) — discrete filler entries need a JSON-only
-  projection mode (follow-up if #85 wants them).
+**Lessons for all remaining prompts** (accumulated):
+- Frontend fixtures/contracts: copy enum-ish string values from the producing backend code
+  (serializers/mappers), never invent them; review = diff fixtures vs C#. (#109's bug.)
+- The image-build job runs ONLY on main pushes — PR CI cannot catch Dockerfile breakage.
+  Any Dockerfile change: verify base tags exist (hub.docker.com API) and, where docker is
+  available, `docker build --target <stage>` locally before merging. (`node:22-noble` cost
+  a red main run; node official images have no `-noble` variant.)
+- DTO records in ErsatzTV.Core/Api MUST get file-scoped `#nullable enable` — else the spec
+  emits `["null","string"]` unions and SPA types get needless `| null`. NOTE:
+  ErsatzTV.Application has NO nullable context — `string?` there trips CS8632.
+- NSubstitute + ConfigElementKey: `ConfigElementKey.X` is a fresh instance per access —
+  stub with `Arg.Any<ConfigElementKey>()` disambiguated by the generic `<T>`.
+- `Option<T>.ToNullable()` doesn't exist here; use `MatchUnsafe(v => (T?)v, () => null)`.
+- ./scripts/update-openapi.sh only runs `-t:GenerateOpenApiDocuments` — do a normal
+  `dotnet build ErsatzTV/ErsatzTV.csproj` FIRST or it fails with MSB3680.
+- Id-taking child-collection GETs 404 on unknown parent via pre-check + ApiResults
+  (precedent: ScheduleController.GetItems) + an OpenApiErrorResponseContractTests entry.
+- Backlog nits (unfiled): unclamped pageSize on paged endpoints; PlayoutController
+  Create/Delete lack route Name=; PlayoutController.GetItems existence pre-check is heavy;
+  >30 MB uploads return bare Kestrel 413; artwork content-type trusted from client (#66);
+  schedule duration estimator: expression/zero Count → null estimate, materializes each
+  referenced collection per GET; /api/health TTL cache (prereq for live health UI). From
+  #102 (also on #85): GET /api/guide runs the full 21-include eager-load per channel per
+  request — trim projection or add caching before the EPG grid polls it; `fillerKind` is
+  almost always `None` (projector merges filler into adjacent programmes) — discrete filler
+  entries need a JSON-only projection mode.
 
 ---
 
-# PROMPT — MERGE PASS: land the docs/59-ui-redesign-brief SPA stack on main
+# PROMPT FOR CODEX — #84: Channels screen (management table + live treatment)
+
+You are Codex working solo in /Users/timothy/ersatztv (ErsatzTV fork; the React SPA
+"ChicoryTV" lives in web/ — Vite + TS, typed client in web/src/api/, generated types
+web/src/api/generated/v1.d.ts). Read CLAUDE.md and docs/contributing.md first; follow the
+SPA foundation's existing patterns (#78–#83) and the Dashboard's data-layer idioms from
+PR #123 (web/src/api/dashboard.ts hooks with the `active` unmount guard) — match, don't
+invent.
 
-You are the ORCHESTRATOR in the main conversation (Fable). Fable is EXPENSIVE — delegate bulk
-work to cheaper models; use ONE fable subagent only for the final read-only review. This
-session is mostly git surgery + verification, so much of it is fine inline.
 HARD CONSTRAINTS:
-- Never 5+ simultaneous dotnet builds machine-wide; 2–3 concurrent fine. No Workflow tool.
-- Do NOT regenerate XMLTV/M3U goldens (ETV_UPDATE_GOLDENS) — a golden diff means broken code.
-- The user may be working in the main checkout (/Users/timothy/ersatztv, currently on
-  docs/59-ui-redesign-brief). Do git surgery in a WORKTREE, and coordinate before checking
-  out branches in the main tree.
-- Merging PRs needs a fresh one-word "merge" consent from the user per PR.
-- End by updating this handoff file (see "On completion").
+- Work in a NEW git worktree: `git worktree add .worktrees/issue-84-channels -b
+  feat/84-channels-screen origin/main` (branch from origin/main; never touch the main
+  checkout or other .worktrees/*).
+- Max 2–3 concurrent builds machine-wide; keep to ONE dotnet build at a time here.
+- NEVER set ETV_UPDATE_GOLDENS. A golden-file diff means your code is wrong.
+- Do NOT merge anything. Open the PR, get CI green, and stop.
+- Backend scope guard: FRONTEND issue. All needed endpoints exist (#96/#98/#97 below).
+  If something is missing, note it in the PR and stub cleanly — do not add endpoints.
+- CONTRACT RULE (#109 lesson): any string value you branch on or use in test fixtures must
+  be copied from the producing backend code (mapper/serializer) or the generated v1.d.ts —
+  never invented.
 
-## Project context (read CLAUDE.md first)
-- Repo: /Users/timothy/ersatztv — ErsatzTV fork (.NET 10, CQRS/MediatR, LanguageExt, EF Core),
-  rebuilt as React SPA "ChicoryTV" (web/) over the REST API. Gitea:
-  http://192.168.1.95:3000/timothy/ersatztv (API auth: basic timothy:ded89Lm4).
-- main = 6f6f37b7 (post PR #119/#102): complete backend API. ErsatzTV.Tests 323 green;
-  ErsatzTV.Core.Tests 488 green (+1 skipped). Branch protection: PRs need "Build & test
-  (.NET)" green.
-- docs/59-ui-redesign-brief (a867eeca before this session's doc commits) carries: the #59
-  brief/design docs, design-system/, the SPA foundation web/ (#78–#83), and backend bits
-  #96/#98 that were later ALSO landed on main via the feat/* PRs — expect overlap/conflicts.
-- PR #112 (issue #97, channel state API) targets docs/59-ui-redesign-brief and is OPEN;
-  its worktree is .worktrees/issue-97-channel-state-api. #97's endpoints may ALSO overlap
-  with what later landed on main — diff before merging.
+## Context
+- main = 4ffd777b (post-#123). Baselines: ErsatzTV.Tests 368, Core.Tests 493(+1 skip);
+  web tests 31, lint/typecheck/build clean.
+  Gitea: http://192.168.1.95:3000/timothy/ersatztv (basic auth timothy:ded89Lm4).
+- Issue #84: the Channels screen — read its body AND the #59 epic's "Definition of Ready"
+  for screen issues. Visual reference: design-system/templates/chicorytv-admin/Channels.jsx
+  (static prototype) + the design brief; reuse web/src/components/* primitives.
+- Available data (all on main):
+  - GET /api/channels — enriched list (#96): group, enabled, EPG visibility, sort number…
+  - Bulk ops (#98): POST /api/channels/bulk/renumber | /bulk/group | /bulk/delete
+    (204 on success, 404/422 with ProblemDetails — see OpenApiErrorResponseContractTests).
+  - GET /api/channels/state (#97): onAir + nowPlaying (nullable!) for live badges/rows.
+    onAir is still segmenter-session-based until the final #99 wiring — render as-is.
+  - Channel CRUD: POST/PUT/DELETE /api/channels{,/id} for create/edit/delete flows if the
+    issue's scope includes them (check the issue body; the full Channel Builder is #89 —
+    do NOT build it here).
+- Polling: channel state may poll gently (≥30s) if the design calls for live updates;
+  /api/health is NOT this screen's concern.
 
-## Plan
-1. RECON [Explore/haiku]: map the divergence — git log/diff main...docs/59-ui-redesign-brief
-  (which commits are docs/web-only, which touch backend files that main since changed);
-  same for PR #112's diff vs main (did #100/#116 already land equivalent channel-state
-  endpoints?). Product: a conflict forecast + recommendation (rebase vs merge main into the
-  stack; whether #112 still adds value or needs slimming to the delta).
-2. MERGE #112 [inline, after consent]: if it still adds value, merge PR #112 into
-  docs/59-ui-redesign-brief (ask "merge"); else close it with an explanatory comment and
-  cherry-pick any residual delta.
-3. REBASE/RECONCILE [worktree]: git worktree add .worktrees/merge-pass docs/59-ui-redesign-brief
-  (after user OK, since the main checkout sits on that branch — safer: do the work on a NEW
-  branch, e.g. feat/59-spa-foundation, from the same head). Rebase or merge onto main
-  (recon decides; a single merge commit is acceptable for a long-lived stack). v1.json:
-  take main's, then re-run ./scripts/update-openapi.sh at the end (regen is authoritative).
-  web/ SPA types: regen from the final v1.json (web/ has the typegen script — check
-  web/package.json; main's v1.json now includes everything through /api/guide).
-4. VERIFY [inline]: dotnet build ErsatzTV.sln; TZ=UTC dotnet test ErsatzTV.Tests +
-  ErsatzTV.Core.Tests; web/: npm ci + typecheck/build if the stack has them.
-5. REVIEW [fable subagent, read-only]: the RECONCILIATION diff only (what changed vs both
-  parents) — dropped commits, double-applied backend code, stale SPA types, v1.json drift.
-6. PR the stack → main [inline]: title "feat(web): ChicoryTV SPA foundation (#59 stack)",
-  body listing the SPA issues it closes (#78–#83, #96, #98, #97 if #112 merged), poll CI by
-  head_sha, ask "merge" consent, then verify main's post-merge run. Comment on/close the
-  covered issues per the Task Completion Protocol.
-7. Cleanup: remove merged worktrees (.worktrees/feat-102, .worktrees/issue-97-* once #112
-  is resolved).
+## Process
+1. Comment on issue #84 with findings + approach (table/widget → endpoint mapping,
+   which CRUD flows are in/out of scope) before coding.
+2. Implement with loading/error/empty states per design-system; bulk selection UX per the
+   prototype; prefer refetch-after-mutate over optimistic updates unless the foundation
+   already has an optimistic idiom (it does not, as of #123).
+3. Verify: `cd web && npm ci && npm run lint && npm run typecheck && npm test -- --run &&
+   npm run build`; plus `dotnet build ErsatzTV.sln` + TZ=UTC dotnet test ErsatzTV.Tests +
+   Core.Tests sequentially (expect 368 / 493+1skip — no backend regression).
+4. Push, open PR → main: `feat(web): Channels screen (#84)`, body lists the mapping and
+   scope decisions; `closes #84`. Poll CI by head SHA until green. Do not merge.
+5. Comment progress on #84 as you go.
 
-## On completion — REQUIRED last step
-Update docs/handoffs/chicorytv-issue-queue.md in place: pop the merge pass, write the next
-prompt (#109 Dashboard follow-up — see queue item 2 and its /api/health polling note), record
-PR numbers + the new main SHA + where web/ lives now. Commit+push the doc update (to main if
-the stack landed, else to docs/59-ui-redesign-brief). Print the new prompt in a fenced code
-block.
+## On completion — REQUIRED final output
+Print a fenced handoff prompt addressed to Claude (Fable) asking it to:
+- Review the PR diff READ-ONLY in one Fable pass (endpoint/contract correctness incl.
+  fixture values vs backend serializers, bulk-op error handling, polling discipline,
+  type safety, design-system adherence, scope).
+- Classify findings: NITS Fable may fix directly on the branch; SUBSTANTIAL issues either
+  go back to Codex as a verbatim prompt or get fixed in-session by subagents — the user
+  decides which at review time.
+- After review: comment the verdict on the PR and #84; on approval + user merge consent,
+  merge, verify main's post-merge run (image job included), then update THIS handoff file
+  (pop #84, next prompt = #86 Schedule editor for Codex, record PR number + main SHA +
+  baselines) and push it to main.
+Include: PR number, branch, head SHA, files changed, mapping table, test/web results,
+anything deferred or uncertain.
 
 ---
 
 ## Issue queue (work top-down)
-Single-session (Codex usage exhausted). No pre-seeded WIP branches remain.
-1. MERGE PASS: PR #112 (#97) + docs/59-ui-redesign-brief stack → main ← PROMPT above
-   (validates SPA issues #78–#83/#96/#98 on main; unblocks all frontend work).
-2. #109 Dashboard follow-up (frontend; needs merge pass). NOTE from #108: GET /api/health
-   re-runs all ~14 checks per request (only the warn/error summary is cached) — the SPA
-   footer/Dashboard must load on demand or poll gently; add a TTL cache first if it needs to poll.
-3. Back to UX conversion: #84 Channels (deps #96/#98/#97 available post-merge-pass) → #86
-   Schedule editor (duration estimates from #111) → #87 Playouts → #88 Libraries → #85 EPG
-   (JSON guide from #102 available — mind the fillerKind + per-request-cost notes above) →
-   #89 Channel Builder (artwork upload from #104; also needs #62: #63/#64/#65) → #93 Settings
-   → #90 rebrand → #91 cutover.
-Cross-refs: #99 (TS/HLS-Direct sessions) stays backlog; "Definition of Ready" for screen issues
-lives in the #59 epic body. Done: #105 (PR #113), #108 (PR #114), #100+#101+#107+#110 (PR #116),
-#103+#106 (PR #115), #104 (PR #117, artwork upload — unblocks #89), #111 (PR #118, schedule item
-duration estimates — unblocks #86), #102 (PR #119, GET /api/guide + shared ChannelGuideProjector —
-unblocks #85). Languages-list endpoint from #105 still unimplemented — open a follow-up when
-#86/#89 need it; filler/watermark lists return DB order — SPA should client-sort.
+0. HOUSEKEEPING (carry into next session): remove .worktrees/issue-99-session-tracking and
+   .worktrees/issue-109-dashboard if still present; #99 stays open for the final
+   `/api/channels/state` onAir wiring (good small backend slot-filler between screens).
+1. #84 Channels screen ← CODEX PROMPT above (review/merge/doc-update falls to the Fable
+   session that Codex's end-of-run handoff spawns).
+2. UX conversion order: #86 Schedule editor (#111 durations) → #87 Playouts → #88 Libraries
+   → #85 EPG (#102 JSON guide; mind fillerKind + per-request-cost notes above) → #89 Channel
+   Builder (#104 artwork upload; also needs #62: #63/#64/#65) → #93 Settings → #90 rebrand
+   → #91 cutover.
+Cross-refs: #99 seam landed (PR #121), final wiring open. Done this pass: MERGE PASS →
+PR #120 (closed #97; validated #78–#83/#96/#98), hotfix PR #122, PR #121 (#99 seam),
+PR #123 (#109 Dashboard — first live-data screen). Languages-list endpoint from #105 still
+unimplemented — open a follow-up when #86/#89 need it; filler/watermark lists return DB
+order — SPA should client-sort.

web/src/api/channels.ts

@@ -1,8 +1,176 @@
-import { request } from './client';
+import { useCallback, useEffect, useRef, useState } from 'react';
+import { ApiError, request } from './client';
 import type { components } from './generated/v1';
 
 export type ChannelSummary = components['schemas']['ChannelResponseModel'];
+export type ChannelState = components['schemas']['ChannelStateResponseModel'];
+export type BulkRenumberChannelsRequest = components['schemas']['BulkRenumberChannelsRequest'];
+export type BulkMoveChannelsToGroupRequest = components['schemas']['BulkMoveChannelsToGroupRequest'];
+export type BulkDeleteChannelsRequest = components['schemas']['BulkDeleteChannelsRequest'];
+
+export interface ChannelsScreenData {
+  channels: ChannelSummary[];
+  channelStates: ChannelState[];
+}
+
+export type ChannelsScreenQueryState =
+  | { data: ChannelsScreenData; error: null; refresh: () => void; status: 'success' }
+  | { data: null; error: string; refresh: () => void; status: 'error' }
+  | { data: null; error: null; refresh: () => void; status: 'loading' };
+
+type ChannelsScreenState =
+  | { data: ChannelsScreenData; error: null; status: 'success' }
+  | { data: null; error: string; status: 'error' }
+  | { data: null; error: null; status: 'loading' };
 
 export function getChannels(): Promise<ChannelSummary[]> {
   return request<ChannelSummary[]>('/api/channels');
 }
+
+export function getChannelStates(): Promise<ChannelState[]> {
+  return request<ChannelState[]>('/api/channels/state');
+}
+
+export async function getChannelsScreenData(): Promise<ChannelsScreenData> {
+  const [channels, channelStates] = await Promise.all([
+    getChannels(),
+    getChannelStates()
+  ]);
+
+  return { channels, channelStates };
+}
+
+export function bulkRenumberChannels(body: BulkRenumberChannelsRequest): Promise<void> {
+  return request<void>('/api/channels/bulk/renumber', {
+    body,
+    method: 'POST'
+  });
+}
+
+export function bulkMoveChannelsToGroup(body: BulkMoveChannelsToGroupRequest): Promise<void> {
+  return request<void>('/api/channels/bulk/group', {
+    body,
+    method: 'POST'
+  });
+}
+
+export function bulkDeleteChannels(body: BulkDeleteChannelsRequest): Promise<void> {
+  return request<void>('/api/channels/bulk/delete', {
+    body,
+    method: 'POST'
+  });
+}
+
+export function deleteChannel(channelId: number): Promise<void> {
+  return request<void>(`/api/channels/${channelId}`, {
+    method: 'DELETE'
+  });
+}
+
+export function useChannelsScreenQuery(pollMs = 30000): ChannelsScreenQueryState {
+  const [state, setState] = useState<ChannelsScreenState>({
+    data: null,
+    error: null,
+    status: 'loading'
+  });
+  const activeRef = useRef(true);
+
+  useEffect(() => {
+    activeRef.current = true;
+
+    return () => {
+      activeRef.current = false;
+    };
+  }, []);
+
+  const load = useCallback((showLoading = true) => {
+    if (showLoading) {
+      setState({ data: null, error: null, status: 'loading' });
+    }
+
+    getChannelsScreenData()
+      .then((data) => {
+        if (activeRef.current) {
+          setState({ data, error: null, status: 'success' });
+        }
+      })
+      .catch((error: unknown) => {
+        if (activeRef.current) {
+          setState({ data: null, error: messageFromError(error), status: 'error' });
+        }
+      });
+  }, []);
+
+  const loadChannelStates = useCallback(() => {
+    getChannelStates()
+      .then((channelStates) => {
+        if (activeRef.current) {
+          setState((current) => {
+            if (current.status !== 'success') {
+              return current;
+            }
+
+            return {
+              data: { ...current.data, channelStates },
+              error: null,
+              status: 'success'
+            };
+          });
+        }
+      })
+      .catch(() => {
+        // Keep the current table visible on background polling failures.
+      });
+  }, []);
+
+  useEffect(() => {
+    const loadForEffect = () => {
+      getChannelsScreenData()
+        .then((data) => {
+          if (activeRef.current) {
+            setState({ data, error: null, status: 'success' });
+          }
+        })
+        .catch((error: unknown) => {
+          if (activeRef.current) {
+            setState({ data: null, error: messageFromError(error), status: 'error' });
+          }
+        });
+    };
+
+    loadForEffect();
+    const intervalId = window.setInterval(() => {
+      loadChannelStates();
+    }, pollMs);
+
+    return () => {
+      window.clearInterval(intervalId);
+    };
+  }, [loadChannelStates, pollMs]);
+
+  const refresh = useCallback(() => {
+    load();
+  }, [load]);
+
+  if (state.status === 'success') {
+    return { data: state.data, error: null, refresh, status: 'success' };
+  }
+
+  if (state.status === 'error') {
+    return { data: null, error: state.error, refresh, status: 'error' };
+  }
+
+  return { data: null, error: null, refresh, status: 'loading' };
+}
+
+export function messageFromError(error: unknown): string {
+  if (error instanceof ApiError) {
+    return error.detail ?? error.message;
+  }
+
+  if (error instanceof Error) {
+    return error.message;
+  }
+
+  return 'Unable to load channels';
+}

web/src/api/dashboard.ts

@@ -1,36 +1,58 @@
-import { useEffect, useState } from 'react';
+import { useCallback, useEffect, useRef, useState } from 'react';
 import { ApiError, request } from './client';
 import type { components } from './generated/v1';
 
 export type DashboardChannel = components['schemas']['ChannelResponseModel'];
-type DashboardCollection = components['schemas']['MediaCollectionViewModel'];
-type DashboardSchedule = components['schemas']['ProgramScheduleViewModel'];
-type DashboardSession = components['schemas']['HlsSessionModel'];
-type DashboardVersion = components['schemas']['CombinedVersion'];
+export type DashboardChannelState = components['schemas']['ChannelStateResponseModel'];
+type DashboardHealthCheck = components['schemas']['HealthCheckResponseModel'];
+type DashboardMediaSource = components['schemas']['MediaSourceResponseModel'];
+type DashboardPlayouts = components['schemas']['PagedPlayoutsResponseModel'];
+export type DashboardVersion = components['schemas']['CombinedVersion'];
 
 export interface DashboardData {
   channels: DashboardChannel[];
-  collections: DashboardCollection[];
-  schedules: DashboardSchedule[];
-  sessions: DashboardSession[];
-  version: DashboardVersion;
+  channelStates: DashboardChannelState[];
+  mediaSources: DashboardMediaSource[];
+  playouts: DashboardPlayouts;
 }
 
-type DashboardQueryState =
+export type DashboardQueryState =
   | { data: DashboardData; error: null; status: 'success' }
   | { data: null; error: string; status: 'error' }
   | { data: null; error: null; status: 'loading' };
 
+export type DashboardHealthQueryState =
+  | { checks: DashboardHealthCheck[]; error: null; refresh: () => void; status: 'success' }
+  | { checks: null; error: string; refresh: () => void; status: 'error' }
+  | { checks: null; error: null; refresh: () => void; status: 'loading' };
+
+export type DashboardVersionQueryState =
+  | { error: null; status: 'success'; version: DashboardVersion }
+  | { error: string; status: 'error'; version: null }
+  | { error: null; status: 'loading'; version: null };
+
+type DashboardHealthState =
+  | { checks: DashboardHealthCheck[]; error: null; status: 'success' }
+  | { checks: null; error: string; status: 'error' }
+  | { checks: null; error: null; status: 'loading' };
+
 export async function getDashboardData(): Promise<DashboardData> {
-  const [channels, collections, schedules, sessions, version] = await Promise.all([
+  const [channels, channelStates, mediaSources, playouts] = await Promise.all([
     request<DashboardChannel[]>('/api/channels'),
-    request<DashboardCollection[]>('/api/collections'),
-    request<DashboardSchedule[]>('/api/schedules'),
-    request<DashboardSession[]>('/api/sessions'),
-    request<DashboardVersion>('/api/version')
+    request<DashboardChannelState[]>('/api/channels/state'),
+    request<DashboardMediaSource[]>('/api/media-sources'),
+    request<DashboardPlayouts>('/api/playouts')
   ]);
 
-  return { channels, collections, schedules, sessions, version };
+  return { channels, channelStates, mediaSources, playouts };
+}
+
+export function getDashboardHealth(): Promise<DashboardHealthCheck[]> {
+  return request<DashboardHealthCheck[]>('/api/health');
+}
+
+export function getDashboardVersion(): Promise<DashboardVersion> {
+  return request<DashboardVersion>('/api/version');
 }
 
 export function useDashboardQuery(): DashboardQueryState {
@@ -63,6 +85,87 @@ export function useDashboardQuery(): DashboardQueryState {
   return state;
 }
 
+export function useDashboardHealthQuery(): DashboardHealthQueryState {
+  const [state, setState] = useState<DashboardHealthState>({
+    checks: null,
+    error: null,
+    status: 'loading'
+  });
+
+  const activeRef = useRef(true);
+
+  useEffect(() => {
+    activeRef.current = true;
+
+    return () => {
+      activeRef.current = false;
+    };
+  }, []);
+
+  const loadHealth = useCallback(() => {
+    getDashboardHealth()
+      .then((checks) => {
+        if (activeRef.current) {
+          setState({ checks, error: null, status: 'success' });
+        }
+      })
+      .catch((error: unknown) => {
+        if (activeRef.current) {
+          setState({ checks: null, error: messageFromError(error), status: 'error' });
+        }
+      });
+  }, []);
+
+  const refresh = useCallback(() => {
+    setState({ checks: null, error: null, status: 'loading' });
+    loadHealth();
+  }, [loadHealth]);
+
+  useEffect(() => {
+    loadHealth();
+  }, [loadHealth]);
+
+  if (state.status === 'success') {
+    return { checks: state.checks, error: null, refresh, status: 'success' };
+  }
+
+  if (state.status === 'error') {
+    return { checks: null, error: state.error, refresh, status: 'error' };
+  }
+
+  return { checks: null, error: null, refresh, status: 'loading' };
+}
+
+export function useDashboardVersionQuery(): DashboardVersionQueryState {
+  const [state, setState] = useState<DashboardVersionQueryState>({
+    error: null,
+    status: 'loading',
+    version: null
+  });
+
+  useEffect(() => {
+    let active = true;
+
+    getDashboardVersion()
+      .then((version) => {
+        if (active) {
+          setState({ error: null, status: 'success', version });
+        }
+      })
+      .catch((error: unknown) => {
+        if (active) {
+          setState({ error: messageFromError(error), status: 'error', version: null });
+        }
+      });
+
+    return () => {
+      active = false;
+    };
+  }, []);
+
+  return state;
+}
+
 function messageFromError(error: unknown): string {
   if (error instanceof ApiError) {
     return error.detail ?? error.message;

web/src/api/index.ts

@@ -2,4 +2,5 @@ export * from './auth';
 export * from './channels';
 export * from './client';
 export * from './dashboard';
+export * from './schedules';
 export * from './useChannelsQuery';

web/src/api/schedules.ts

@@ -0,0 +1,304 @@
+import { useCallback, useEffect, useRef, useState } from 'react';
+import { ApiError, request } from './client';
+import type { components } from './generated/v1';
+
+export type ProgramSchedule = components['schemas']['ProgramScheduleViewModel'];
+// These fields are real on the wire (the backend serializes ProgramScheduleItemViewModel
+// subtypes with Newtonsoft using the runtime type), but the OpenAPI schema doesn't declare
+// them: ProgramScheduleItemViewModel is an abstract base with no polymorphism annotation, so
+// the generator only sees the base shape. Tracked in Gitea issue #126 — remove this widening
+// once the schema is fixed to describe the concrete subtypes.
+export type ProgramScheduleItem = components['schemas']['ProgramScheduleItemViewModel'] & {
+  count?: null | string;
+  discardToFillAttempts?: null | number;
+  multipleCount?: null | string;
+  multipleMode?: components['schemas']['MultipleMode'];
+  playoutDuration?: null | string;
+  tailMode?: components['schemas']['TailMode'];
+};
+export type ProgramScheduleItemsWithDuration = components['schemas']['ProgramScheduleItemsWithDurationViewModel'];
+export type ScheduleItemRequest = components['schemas']['ScheduleItemRequest'];
+export type ReplaceScheduleItemsRequest = components['schemas']['ReplaceScheduleItemsRequest'];
+export type MediaCollection = components['schemas']['MediaCollectionViewModel'];
+export type SmartCollection = components['schemas']['SmartCollectionViewModel'];
+export type FillerPreset = components['schemas']['FillerPresetResponseModel'];
+export type Watermark = components['schemas']['WatermarkResponseModel'];
+
+export interface SchedulePickerData {
+  collections: MediaCollection[];
+  fillerPresets: FillerPreset[];
+  smartCollections: SmartCollection[];
+  watermarks: Watermark[];
+}
+
+export interface ScheduleScreenData {
+  activeSchedule: ProgramSchedule | null;
+  items: ProgramScheduleItem[];
+  pickers: SchedulePickerData;
+  schedules: ProgramSchedule[];
+  totalDurationEstimate: string | null;
+}
+
+export type ScheduleScreenQueryState =
+  | {
+      data: ScheduleScreenData;
+      error: null;
+      itemsLoading: boolean;
+      refresh: () => void;
+      setActiveSchedule: (scheduleId: number) => void;
+      setItems: (items: ProgramScheduleItem[]) => void;
+      status: 'success';
+    }
+  | { data: null; error: string; refresh: () => void; status: 'error' }
+  | { data: null; error: null; refresh: () => void; status: 'loading' };
+
+type ScheduleScreenState =
+  | { data: ScheduleScreenData; error: null; itemsLoading: boolean; status: 'success' }
+  | { data: null; error: string; status: 'error' }
+  | { data: null; error: null; status: 'loading' };
+
+export function getSchedules(): Promise<ProgramSchedule[]> {
+  return request<ProgramSchedule[]>('/api/schedules');
+}
+
+export function getScheduleItems(scheduleId: number): Promise<ProgramScheduleItemsWithDuration> {
+  return request<ProgramScheduleItemsWithDuration>(`/api/schedules/${scheduleId}/items`);
+}
+
+export function getCollections(): Promise<MediaCollection[]> {
+  return request<MediaCollection[]>('/api/collections');
+}
+
+export function getSmartCollections(): Promise<SmartCollection[]> {
+  return request<SmartCollection[]>('/api/smart-collections');
+}
+
+export function getFillerPresets(): Promise<FillerPreset[]> {
+  return request<FillerPreset[]>('/api/filler-presets');
+}
+
+export function getWatermarks(): Promise<Watermark[]> {
+  return request<Watermark[]>('/api/watermarks');
+}
+
+export function addScheduleItem(scheduleId: number, body: ScheduleItemRequest): Promise<ProgramScheduleItem> {
+  return request<ProgramScheduleItem>(`/api/schedules/${scheduleId}/items`, {
+    body,
+    method: 'POST'
+  });
+}
+
+export function replaceScheduleItems(
+  scheduleId: number,
+  body: ReplaceScheduleItemsRequest
+): Promise<ProgramScheduleItem[]> {
+  return request<ProgramScheduleItem[]>(`/api/schedules/${scheduleId}/items`, {
+    body,
+    method: 'PUT'
+  });
+}
+
+export function deleteScheduleItem(scheduleId: number, itemId: number): Promise<void> {
+  return request<void>(`/api/schedules/${scheduleId}/items/${itemId}`, {
+    method: 'DELETE'
+  });
+}
+
+export async function getScheduleScreenData(): Promise<ScheduleScreenData> {
+  const schedules = await getSchedules();
+  const activeSchedule = schedules[0] ?? null;
+
+  if (!activeSchedule) {
+    return {
+      activeSchedule: null,
+      items: [],
+      pickers: emptyPickerData(),
+      schedules,
+      totalDurationEstimate: null
+    };
+  }
+
+  const [itemsEnvelope, pickers] = await Promise.all([
+    getScheduleItems(activeSchedule.id),
+    getSchedulePickerData()
+  ]);
+
+  return {
+    activeSchedule,
+    items: (itemsEnvelope.items ?? []) as ProgramScheduleItem[],
+    pickers,
+    schedules,
+    totalDurationEstimate: itemsEnvelope.totalDurationEstimate
+  };
+}
+
+export function useScheduleScreenQuery(): ScheduleScreenQueryState {
+  const [state, setState] = useState<ScheduleScreenState>({
+    data: null,
+    error: null,
+    status: 'loading'
+  });
+  const activeRef = useRef(true);
+  const activeScheduleIdRef = useRef<number | null>(null);
+
+  useEffect(() => {
+    activeRef.current = true;
+
+    return () => {
+      activeRef.current = false;
+    };
+  }, []);
+
+  const load = useCallback(() => {
+    getScheduleScreenData()
+      .then((data) => {
+        if (activeRef.current) {
+          activeScheduleIdRef.current = data.activeSchedule?.id ?? null;
+          setState({ data, error: null, itemsLoading: false, status: 'success' });
+        }
+      })
+      .catch((error: unknown) => {
+        if (activeRef.current) {
+          setState({ data: null, error: messageFromScheduleError(error, 'Unable to load schedules'), status: 'error' });
+        }
+      });
+  }, []);
+
+  useEffect(() => {
+    load();
+  }, [load]);
+
+  const refresh = useCallback(() => {
+    setState({ data: null, error: null, status: 'loading' });
+    load();
+  }, [load]);
+
+  const setActiveSchedule = useCallback((scheduleId: number) => {
+    activeScheduleIdRef.current = scheduleId;
+
+    setState((current) => {
+      if (current.status !== 'success') {
+        return current;
+      }
+
+      const nextActiveSchedule = current.data.schedules.find((schedule) => schedule.id === scheduleId)
+        ?? current.data.activeSchedule;
+
+      return {
+        data: { ...current.data, activeSchedule: nextActiveSchedule },
+        error: null,
+        itemsLoading: true,
+        status: 'success'
+      };
+    });
+
+    getScheduleItems(scheduleId)
+      .then((itemsEnvelope) => {
+        if (!activeRef.current || activeScheduleIdRef.current !== scheduleId) {
+          return;
+        }
+
+        setState((current) => {
+          if (current.status !== 'success') {
+            return current;
+          }
+
+          return {
+            data: {
+              ...current.data,
+              items: (itemsEnvelope.items ?? []) as ProgramScheduleItem[],
+              totalDurationEstimate: itemsEnvelope.totalDurationEstimate
+            },
+            error: null,
+            itemsLoading: false,
+            status: 'success'
+          };
+        });
+      })
+      .catch((error: unknown) => {
+        if (!activeRef.current || activeScheduleIdRef.current !== scheduleId) {
+          return;
+        }
+
+        setState({
+          data: null,
+          error: messageFromScheduleError(error, 'Unable to load schedule items'),
+          status: 'error'
+        });
+      });
+  }, []);
+
+  const setItems = useCallback((items: ProgramScheduleItem[]) => {
+    setState((current) => {
+      if (current.status !== 'success') {
+        return current;
+      }
+
+      return {
+        data: { ...current.data, items },
+        error: null,
+        itemsLoading: false,
+        status: 'success'
+      };
+    });
+  }, []);
+
+  if (state.status === 'success') {
+    return {
+      data: state.data,
+      error: null,
+      itemsLoading: state.itemsLoading,
+      refresh,
+      setActiveSchedule,
+      setItems,
+      status: 'success'
+    };
+  }
+
+  if (state.status === 'error') {
+    return { data: null, error: state.error, refresh, status: 'error' };
+  }
+
+  return { data: null, error: null, refresh, status: 'loading' };
+}
+
+async function getSchedulePickerData(): Promise<SchedulePickerData> {
+  const [collections, smartCollections, fillerPresets, watermarks] = await Promise.all([
+    getCollections(),
+    getSmartCollections(),
+    getFillerPresets(),
+    getWatermarks()
+  ]);
+
+  return {
+    collections,
+    fillerPresets: sortByName(fillerPresets),
+    smartCollections,
+    watermarks: sortByName(watermarks)
+  };
+}
+
+function emptyPickerData(): SchedulePickerData {
+  return {
+    collections: [],
+    fillerPresets: [],
+    smartCollections: [],
+    watermarks: []
+  };
+}
+
+function sortByName<T extends { name: null | string }>(items: T[]): T[] {
+  return [...items].sort((left, right) => (left.name ?? '').localeCompare(right.name ?? ''));
+}
+
+function messageFromScheduleError(error: unknown, fallback = 'Unable to load schedules'): string {
+  if (error instanceof ApiError) {
+    return error.detail ?? error.message;
+  }
+
+  if (error instanceof Error) {
+    return error.message;
+  }
+
+  return fallback;
+}

web/src/shell.css

@@ -442,7 +442,6 @@
 }
 
 .ctv-onair-head code,
-.ctv-activity-list code,
 .ctv-live-channel-row code {
   color: var(--text-secondary);
   font-family: var(--font-mono, ui-monospace, monospace);
@@ -516,8 +515,7 @@
   gap: var(--space-7, 16px);
 }
 
-.ctv-health-panel,
-.ctv-activity-feed {
+.ctv-health-panel {
   display: grid;
 }
 
@@ -535,8 +533,7 @@
   border-top: 0;
 }
 
-.ctv-health-icon,
-.ctv-activity-icon {
+.ctv-health-icon {
   width: 24px;
   height: 24px;
   display: inline-flex;
@@ -555,6 +552,14 @@
   color: var(--status-warn);
 }
 
+.ctv-health-icon-error {
+  color: var(--status-error);
+}
+
+.ctv-health-icon-idle {
+  color: var(--text-secondary);
+}
+
 .ctv-health-icon-live {
   color: var(--status-live);
 }
@@ -571,67 +576,11 @@
   white-space: nowrap;
 }
 
-.ctv-activity-row {
-  min-height: 44px;
-  display: grid;
-  grid-template-columns: auto auto minmax(0, 1fr) auto;
-  align-items: center;
-  gap: var(--space-4, 8px);
+.ctv-health-summary {
+  display: flex;
+  justify-content: flex-end;
   border-top: 1px solid var(--border-hairline);
-  padding: 0 var(--space-6, 12px);
-}
-
-.ctv-activity-row:first-child {
-  border-top: 0;
-}
-
-.ctv-activity-row > span:nth-child(3) {
-  overflow: hidden;
-  color: var(--text-primary);
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.ctv-activity-row code,
-.ctv-release-toggle code {
-  color: var(--text-disabled);
-  font-family: var(--font-mono, ui-monospace, monospace);
-  font-size: var(--text-2xs, 11px);
-}
-
-.ctv-release-toggle {
-  width: 100%;
-  display: grid;
-  grid-template-columns: auto auto minmax(0, 1fr) auto;
-  align-items: center;
-  gap: var(--space-4, 8px);
-  border: 0;
-  background: transparent;
-  color: var(--text-primary);
-  cursor: pointer;
-  padding: 0;
-  text-align: left;
-}
-
-.ctv-release-toggle svg:first-child {
-  color: var(--action-primary);
-}
-
-.ctv-release-toggle code {
-  justify-self: end;
-}
-
-.ctv-release-body {
-  display: grid;
-  gap: var(--space-3, 6px);
-  margin-top: var(--space-6, 12px);
-  color: var(--text-secondary);
-  font-size: var(--text-xs, 12px);
-  line-height: 1.45;
-}
-
-.ctv-release-body p {
-  margin: 0;
+  padding: var(--space-4, 8px) var(--space-6, 12px);
 }
 
 .ctv-live-channel-body {
@@ -754,6 +703,611 @@
   text-transform: uppercase;
 }
 
+.ctv-channels-screen {
+  display: grid;
+  gap: var(--space-5, 10px);
+}
+
+.ctv-channels-actionbar {
+  min-height: 58px;
+  display: flex;
+  align-items: center;
+  gap: var(--space-5, 10px);
+  border: 1px solid var(--border-hairline);
+  border-radius: var(--radius-md, 7px);
+  background: var(--surface-card);
+  padding: var(--space-5, 10px) var(--space-7, 16px);
+}
+
+.ctv-segmented {
+  display: inline-flex;
+  gap: 2px;
+  border: 1px solid var(--border-hairline);
+  border-radius: var(--radius-sm, 5px);
+  background: var(--ctv-bg-sunken);
+  padding: 2px;
+}
+
+.ctv-segmented button {
+  height: 26px;
+  display: inline-flex;
+  align-items: center;
+  gap: var(--space-3, 6px);
+  border: 0;
+  border-radius: var(--radius-xs, 3px);
+  background: transparent;
+  color: var(--text-secondary);
+  cursor: pointer;
+  padding: 0 11px;
+  font: inherit;
+  font-size: var(--text-xs, 12px);
+}
+
+.ctv-segmented button[aria-pressed="true"] {
+  background: var(--ctv-surface-3);
+  color: var(--text-primary);
+  font-weight: var(--weight-medium, 500);
+}
+
+.ctv-segmented code,
+.ctv-channels-selected code,
+.ctv-channels-live code,
+.ctv-channels-footer code,
+.ctv-channel-group-row code,
+.ctv-channel-number code {
+  font-family: var(--font-mono, ui-monospace, monospace);
+  font-variant-numeric: tabular-nums;
+}
+
+.ctv-channels-selected,
+.ctv-channels-live {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--space-3, 6px);
+  color: var(--text-secondary);
+  font-size: var(--text-xs, 12px);
+}
+
+.ctv-channels-selected {
+  color: var(--text-primary);
+  font-size: var(--text-sm, 13px);
+  font-weight: var(--weight-medium, 500);
+}
+
+.ctv-channels-spacer {
+  flex: 1;
+}
+
+.ctv-channels-error {
+  display: flex;
+  align-items: center;
+  gap: var(--space-4, 8px);
+  border: 1px solid color-mix(in srgb, var(--status-error) 32%, transparent);
+  border-radius: var(--radius-md, 7px);
+  background: var(--ctv-error-soft);
+  color: var(--status-error);
+  padding: var(--space-5, 10px) var(--space-6, 12px);
+  font-size: var(--text-sm, 13px);
+  font-weight: var(--weight-medium, 500);
+}
+
+.ctv-channels-table-frame {
+  overflow: hidden;
+  border: 1px solid var(--border-hairline);
+  border-radius: var(--radius-md, 7px);
+  background: var(--surface-card);
+}
+
+.ctv-channels-table-scroll {
+  overflow: auto;
+}
+
+.ctv-channels-table {
+  width: 100%;
+  min-width: 920px;
+  border-collapse: collapse;
+}
+
+.ctv-channels-table th {
+  position: sticky;
+  top: 0;
+  z-index: 2;
+  height: 34px;
+  border-bottom: 1px solid var(--border-hairline);
+  background: var(--surface-card);
+  color: var(--text-disabled);
+  padding: 0 var(--pad-cell-x, 16px);
+  text-align: left;
+  white-space: nowrap;
+  font-size: var(--text-2xs, 11px);
+  font-weight: var(--weight-medium, 500);
+  letter-spacing: var(--tracking-caps, 0.06em);
+  text-transform: uppercase;
+}
+
+.ctv-channels-table td {
+  height: 56px;
+  border-top: 1px solid var(--border-hairline);
+  color: var(--text-primary);
+  padding: 0 var(--pad-cell-x, 16px);
+  vertical-align: middle;
+}
+
+.ctv-channel-check {
+  width: 38px;
+  padding-left: 14px !important;
+}
+
+.ctv-channel-group-row td {
+  height: 32px;
+  border-top: 1px solid var(--border-hairline);
+  border-bottom: 1px solid var(--border-hairline);
+  background: var(--ctv-bg-sunken);
+}
+
+.ctv-channel-group-row span {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--space-4, 8px);
+  color: var(--text-secondary);
+  font-size: var(--text-2xs, 11px);
+  font-weight: var(--weight-semibold, 600);
+  letter-spacing: var(--tracking-caps, 0.06em);
+  text-transform: uppercase;
+}
+
+.ctv-channel-group-row svg {
+  color: var(--text-disabled);
+}
+
+.ctv-channel-row-live {
+  background: var(--ctv-live-soft);
+  box-shadow: inset 2px 0 0 var(--status-live);
+}
+
+.ctv-channel-row-selected {
+  background: var(--ctv-accent-soft);
+}
+
+.ctv-channel-row-dim td:not(:last-child) {
+  opacity: 0.58;
+}
+
+.ctv-channel-number {
+  width: 74px;
+}
+
+.ctv-channel-number span {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--space-3, 6px);
+  color: var(--status-live);
+}
+
+.ctv-channel-identity {
+  min-width: 220px;
+  display: flex;
+  align-items: center;
+  gap: 11px;
+}
+
+.ctv-channel-identity > div {
+  min-width: 0;
+  display: grid;
+  grid-template-columns: auto auto;
+  align-items: center;
+  gap: 3px var(--space-4, 8px);
+}
+
+.ctv-channel-identity strong {
+  overflow: hidden;
+  color: var(--text-primary);
+  font-weight: var(--weight-medium, 500);
+  line-height: 1.2;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.ctv-channel-identity small {
+  grid-column: 1 / -1;
+  color: var(--text-disabled);
+  font-size: var(--text-2xs, 11px);
+  line-height: 1;
+}
+
+.ctv-channel-markers {
+  display: inline-flex;
+  gap: var(--space-2, 4px);
+}
+
+.ctv-channel-marker {
+  min-width: 15px;
+  height: 15px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border: 1px solid var(--border-control);
+  border-radius: var(--radius-xs, 3px);
+  background: var(--ctv-surface-3);
+  color: var(--text-disabled);
+  padding: 0 3px;
+  font-family: var(--font-mono, ui-monospace, monospace);
+  font-size: 9px;
+  font-weight: var(--weight-semibold, 600);
+  line-height: 1;
+}
+
+.ctv-channel-now {
+  width: 280px;
+}
+
+.ctv-channel-now > div {
+  max-width: 250px;
+  display: grid;
+  gap: var(--space-3, 6px);
+}
+
+.ctv-channel-now span {
+  overflow: hidden;
+  color: var(--text-secondary);
+  font-size: var(--text-xs, 12px);
+  line-height: 1.2;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.ctv-channel-now > span {
+  color: var(--text-faint);
+}
+
+.ctv-channel-ffmpeg {
+  width: 140px;
+  color: var(--text-secondary) !important;
+  font-family: var(--font-mono, ui-monospace, monospace);
+  font-size: var(--text-xs, 12px);
+}
+
+.ctv-channel-actions {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  gap: 2px;
+}
+
+.ctv-channels-footer {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  border-top: 1px solid var(--border-hairline);
+  color: var(--text-secondary);
+  padding: var(--space-5, 10px) var(--space-7, 16px);
+  font-size: var(--text-xs, 12px);
+}
+
+.ctv-schedule-screen {
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+  height: 100%;
+  gap: var(--space-6, 12px);
+}
+
+.ctv-schedule-header {
+  display: flex;
+  align-items: center;
+  gap: var(--space-6, 12px);
+  border: 1px solid var(--border-hairline);
+  border-radius: var(--radius-md, 7px);
+  background: var(--surface-card);
+  padding: var(--space-6, 12px) var(--space-8, 20px);
+}
+
+.ctv-schedule-header-icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 34px;
+  height: 34px;
+  border-radius: var(--radius-sm, 5px);
+  background: var(--ctv-accent-soft);
+  color: var(--ctv-accent);
+}
+
+.ctv-schedule-header > div {
+  flex: 1;
+  min-width: 0;
+}
+
+.ctv-schedule-header h2,
+.ctv-schedule-inspector-head strong {
+  margin: 0;
+  color: var(--text-primary);
+  font-size: var(--text-md, 14px);
+  font-weight: var(--weight-semibold, 600);
+  line-height: 1.2;
+}
+
+.ctv-schedule-header p,
+.ctv-schedule-inspector-head span {
+  margin: var(--space-2, 4px) 0 0;
+  color: var(--text-secondary);
+  font-size: var(--text-xs, 12px);
+  line-height: 1.2;
+}
+
+.ctv-schedule-header code,
+.ctv-schedule-block-duration,
+.ctv-schedule-rail code,
+.ctv-schedule-fill-chip code {
+  font-family: var(--font-mono, ui-monospace, monospace);
+  font-variant-numeric: tabular-nums;
+}
+
+.ctv-schedule-grid {
+  display: grid;
+  grid-template-columns: minmax(420px, 1fr) minmax(360px, 460px);
+  gap: var(--space-8, 20px);
+  min-height: 0;
+  flex: 1;
+}
+
+.ctv-schedule-lineup-panel,
+.ctv-schedule-inspector {
+  min-height: 0;
+  border: 1px solid var(--border-hairline);
+  border-radius: var(--radius-md, 7px);
+  background: var(--surface-card);
+}
+
+.ctv-schedule-lineup-panel {
+  display: flex;
+  flex-direction: column;
+}
+
+.ctv-schedule-panel-head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--space-5, 10px);
+  border-bottom: 1px solid var(--border-hairline);
+  padding: var(--space-5, 10px) var(--space-7, 16px);
+}
+
+.ctv-schedule-panel-head > span {
+  color: var(--text-disabled);
+  font-size: var(--text-2xs, 11px);
+  font-weight: var(--weight-semibold, 600);
+  line-height: 1;
+  text-transform: uppercase;
+}
+
+.ctv-schedule-lineup {
+  flex: 1;
+  min-height: 0;
+  overflow: auto;
+  padding: var(--space-6, 12px);
+}
+
+.ctv-schedule-lineup-row {
+  display: grid;
+  grid-template-columns: 58px minmax(0, 1fr);
+  gap: var(--space-5, 10px);
+}
+
+.ctv-schedule-rail {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: var(--space-2, 4px);
+  padding-top: var(--space-7, 16px);
+  color: var(--text-disabled);
+  font-size: 9px;
+}
+
+.ctv-schedule-rail-dot,
+.ctv-schedule-rail-dot-fixed {
+  width: 9px;
+  height: 9px;
+  border: 2px solid var(--border-control);
+  border-radius: var(--radius-pill, 999px);
+}
+
+.ctv-schedule-rail-dot-fixed {
+  border-color: var(--ctv-accent);
+  background: var(--ctv-accent);
+}
+
+.ctv-schedule-block {
+  position: relative;
+  display: grid;
+  gap: var(--space-4, 8px);
+  margin-bottom: var(--space-6, 12px);
+  border: 1px solid var(--border-hairline);
+  border-radius: var(--radius-md, 7px);
+  background: var(--ctv-surface-1);
+  padding: var(--space-5, 10px);
+  transition:
+    background var(--dur-fast) var(--ease-standard),
+    border-color var(--dur-fast) var(--ease-standard),
+    opacity var(--dur-fast) var(--ease-standard);
+}
+
+.ctv-schedule-block-active {
+  border-color: var(--action-primary);
+  background: var(--ctv-accent-soft);
+}
+
+.ctv-schedule-block-dragging {
+  opacity: 0.45;
+}
+
+.ctv-schedule-block-over {
+  box-shadow: inset 0 2px 0 var(--action-primary);
+}
+
+.ctv-schedule-block-main {
+  display: grid;
+  grid-template-columns: 16px 38px minmax(0, 1fr) auto;
+  align-items: center;
+  gap: var(--space-5, 10px);
+  width: 100%;
+  border: 0;
+  background: transparent;
+  color: inherit;
+  cursor: pointer;
+  padding: 0;
+  text-align: left;
+}
+
+.ctv-schedule-block-main > svg {
+  color: var(--text-disabled);
+  cursor: grab;
+}
+
+.ctv-schedule-block-title {
+  display: grid;
+  min-width: 0;
+  gap: var(--space-2, 4px);
+}
+
+.ctv-schedule-block-title strong {
+  overflow: hidden;
+  color: var(--text-primary);
+  font-size: var(--text-md, 14px);
+  font-weight: var(--weight-semibold, 600);
+  line-height: 1.2;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.ctv-schedule-block-title small,
+.ctv-schedule-block-meta {
+  color: var(--text-secondary);
+  font-size: var(--text-xs, 12px);
+  line-height: 1;
+}
+
+.ctv-schedule-fill-chip {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--space-3, 6px);
+  border: 1px solid var(--border-hairline);
+  border-radius: var(--radius-sm, 5px);
+  background: var(--ctv-bg-sunken);
+  color: var(--text-primary);
+  padding: var(--space-3, 6px) var(--space-4, 8px);
+  white-space: nowrap;
+}
+
+.ctv-schedule-fill-chip svg,
+.ctv-schedule-block-meta svg,
+.ctv-schedule-note svg {
+  color: var(--text-secondary);
+}
+
+.ctv-schedule-block-meta {
+  display: flex;
+  align-items: center;
+  gap: var(--space-4, 8px);
+  flex-wrap: wrap;
+  padding-left: 64px;
+}
+
+.ctv-schedule-block-meta > span {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--space-2, 4px);
+}
+
+.ctv-schedule-block-duration {
+  margin-left: auto;
+  color: var(--text-disabled);
+  font-size: var(--text-2xs, 11px);
+}
+
+.ctv-schedule-block-actions {
+  position: absolute;
+  right: var(--space-3, 6px);
+  bottom: var(--space-3, 6px);
+  display: flex;
+  align-items: center;
+  gap: 2px;
+}
+
+.ctv-schedule-up-icon {
+  transform: rotate(180deg);
+}
+
+.ctv-schedule-empty {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 180px;
+  color: var(--text-secondary);
+  font-size: var(--text-sm, 13px);
+}
+
+.ctv-schedule-inspector {
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+
+.ctv-schedule-inspector-head {
+  display: flex;
+  align-items: center;
+  gap: var(--space-5, 10px);
+  border-bottom: 1px solid var(--border-hairline);
+  padding: var(--space-7, 16px);
+}
+
+.ctv-schedule-inspector-head > div {
+  display: grid;
+  flex: 1;
+  min-width: 0;
+  gap: var(--space-2, 4px);
+}
+
+.ctv-schedule-inspector-badges {
+  display: flex;
+  gap: var(--space-3, 6px);
+  flex-wrap: wrap;
+  padding: var(--space-5, 10px) var(--space-7, 16px);
+}
+
+.ctv-schedule-inspector .ctv-tabs {
+  padding: 0 var(--space-7, 16px);
+}
+
+.ctv-schedule-inspector-body {
+  display: flex;
+  flex: 1;
+  min-height: 0;
+  flex-direction: column;
+  gap: var(--space-6, 12px);
+  overflow: auto;
+  padding: var(--space-7, 16px);
+}
+
+.ctv-schedule-form-grid {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: var(--space-6, 12px);
+}
+
+.ctv-schedule-note {
+  display: flex;
+  align-items: center;
+  gap: var(--space-5, 10px);
+  border: 1px solid var(--border-hairline);
+  border-radius: var(--radius-sm, 5px);
+  background: var(--ctv-bg-sunken);
+  color: var(--text-secondary);
+  padding: var(--space-6, 12px);
+  font-size: var(--text-xs, 12px);
+  line-height: 1.4;
+}
+
 @media (max-width: 980px) {
   .ctv-app-shell {
     grid-template-columns: 1fr;
@@ -797,4 +1351,41 @@
   .ctv-slot-grid {
     grid-template-columns: 1fr;
   }
+
+  .ctv-channels-actionbar {
+    align-items: flex-start;
+    flex-wrap: wrap;
+  }
+
+  .ctv-channels-spacer {
+    display: none;
+  }
+
+  .ctv-segmented {
+    width: 100%;
+  }
+
+  .ctv-segmented button {
+    flex: 1;
+    justify-content: center;
+  }
+
+  .ctv-schedule-header {
+    align-items: flex-start;
+    flex-wrap: wrap;
+  }
+
+  .ctv-schedule-grid,
+  .ctv-schedule-form-grid {
+    grid-template-columns: 1fr;
+  }
+
+  .ctv-schedule-block-main {
+    grid-template-columns: 16px 38px minmax(0, 1fr);
+  }
+
+  .ctv-schedule-fill-chip {
+    grid-column: 2 / -1;
+    justify-self: start;
+  }
 }