From c1adaebd5b2e6baf655354d818eaf9fc2e8e7da5 Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Tue, 18 Aug 2026 22:31:26 +0000
Subject: [PATCH] Let the gallery fill itself while people are looking at it

Uploading reloaded the whole page, and other visitors only ever saw what
was in the box when they opened it. The gallery now asks every ten seconds
for the prints that landed since the ones it drew and slots them into
place, keeping the visitor's spot in the grid. Polling rather than a
socket per viewer: a box is a handful of people for an afternoon, and a
backgrounded tab asks for nothing at all.

The tile markup moved into a partial so the live feed and the first render
draw a print the same way. The upload stamp moved to the moment the file
lands, so a slow render can't leave a photo behind the cursor.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01V8LQ8sgeibd9RjKZoxQ3jo
---
 src/Shoebox.Web/Data/AppDbContext.cs          |   3 +
 ...818231015_MediaUploadedAtIndex.Designer.cs | 175 +++++++++++
 .../20260818231015_MediaUploadedAtIndex.cs    |  27 ++
 .../Migrations/AppDbContextModelSnapshot.cs   |   2 +
 src/Shoebox.Web/Pages/Pool/Gallery.cshtml     |  96 ++----
 src/Shoebox.Web/Pages/Pool/Gallery.cshtml.cs  |  97 ++++--
 src/Shoebox.Web/Pages/Pool/_Tiles.cshtml      |  49 +++
 src/Shoebox.Web/Services/MediaService.cs      |   5 +-
 src/Shoebox.Web/wwwroot/css/site.css          |   6 +-
 src/Shoebox.Web/wwwroot/js/gallery.js         | 297 ++++++++++++++++--
 tests/Shoebox.Tests.Web/CoreFlowTests.cs      |  52 +++
 11 files changed, 682 insertions(+), 127 deletions(-)
 create mode 100644 src/Shoebox.Web/Migrations/20260818231015_MediaUploadedAtIndex.Designer.cs
 create mode 100644 src/Shoebox.Web/Migrations/20260818231015_MediaUploadedAtIndex.cs
 create mode 100644 src/Shoebox.Web/Pages/Pool/_Tiles.cshtml

diff --git a/src/Shoebox.Web/Data/AppDbContext.cs b/src/Shoebox.Web/Data/AppDbContext.cs
index f18d313..01bba49 100644
--- a/src/Shoebox.Web/Data/AppDbContext.cs
+++ b/src/Shoebox.Web/Data/AppDbContext.cs
@@ -25,6 +25,9 @@ protected override void OnModelCreating(ModelBuilder modelBuilder)
         modelBuilder.Entity<Media>(media =>
         {
             media.HasIndex(m => new { m.PoolId, m.ContentHash });
+            // The gallery's live feed asks each box for what landed after a moment in time,
+            // over and over; without this every ask reads and sorts the whole box.
+            media.HasIndex(m => new { m.PoolId, m.UploadedAt });
             media.Property(m => m.OriginalFileName).HasMaxLength(260);
             media.Property(m => m.UploaderName).HasMaxLength(80);
         });
diff --git a/src/Shoebox.Web/Migrations/20260818231015_MediaUploadedAtIndex.Designer.cs b/src/Shoebox.Web/Migrations/20260818231015_MediaUploadedAtIndex.Designer.cs
new file mode 100644
index 0000000..d683c1a
--- /dev/null
+++ b/src/Shoebox.Web/Migrations/20260818231015_MediaUploadedAtIndex.Designer.cs
@@ -0,0 +1,175 @@
+// <auto-generated />
+using System;
+using Microsoft.EntityFrameworkCore;
+using Microsoft.EntityFrameworkCore.Infrastructure;
+using Microsoft.EntityFrameworkCore.Migrations;
+using Microsoft.EntityFrameworkCore.Storage.ValueConversion;
+using Shoebox.Web.Data;
+
+#nullable disable
+
+namespace Shoebox.Web.Migrations
+{
+    [DbContext(typeof(AppDbContext))]
+    [Migration("20260818231015_MediaUploadedAtIndex")]
+    partial class MediaUploadedAtIndex
+    {
+        /// <inheritdoc />
+        protected override void BuildTargetModel(ModelBuilder modelBuilder)
+        {
+#pragma warning disable 612, 618
+            modelBuilder.HasAnnotation("ProductVersion", "10.0.10");
+
+            modelBuilder.Entity("Shoebox.Web.Data.Media", b =>
+                {
+                    b.Property<Guid>("Id")
+                        .ValueGeneratedOnAdd()
+                        .HasColumnType("TEXT");
+
+                    b.Property<string>("ContentHash")
+                        .IsRequired()
+                        .HasColumnType("TEXT");
+
+                    b.Property<string>("ContentType")
+                        .IsRequired()
+                        .HasColumnType("TEXT");
+
+                    b.Property<string>("Extension")
+                        .IsRequired()
+                        .HasColumnType("TEXT");
+
+                    b.Property<bool>("HasAnimation")
+                        .HasColumnType("INTEGER");
+
+                    b.Property<bool>("HasThumbnail")
+                        .HasColumnType("INTEGER");
+
+                    b.Property<int>("Height")
+                        .HasColumnType("INTEGER");
+
+                    b.Property<int>("Kind")
+                        .HasColumnType("INTEGER");
+
+                    b.Property<string>("OriginalFileName")
+                        .IsRequired()
+                        .HasMaxLength(260)
+                        .HasColumnType("TEXT");
+
+                    b.Property<Guid>("PoolId")
+                        .HasColumnType("TEXT");
+
+                    b.Property<long>("SizeBytes")
+                        .HasColumnType("INTEGER");
+
+                    b.Property<DateTime?>("TakenAt")
+                        .HasColumnType("TEXT");
+
+                    b.Property<DateTime>("UploadedAt")
+                        .HasColumnType("TEXT");
+
+                    b.Property<string>("UploaderName")
+                        .IsRequired()
+                        .HasMaxLength(80)
+                        .HasColumnType("TEXT");
+
+                    b.Property<Guid>("UploaderUid")
+                        .HasColumnType("TEXT");
+
+                    b.Property<int>("Width")
+                        .HasColumnType("INTEGER");
+
+                    b.HasKey("Id");
+
+                    b.HasIndex("PoolId", "ContentHash");
+
+                    b.HasIndex("PoolId", "UploadedAt");
+
+                    b.ToTable("Media");
+                });
+
+            modelBuilder.Entity("Shoebox.Web.Data.MediaLike", b =>
+                {
+                    b.Property<Guid>("MediaId")
+                        .HasColumnType("TEXT");
+
+                    b.Property<Guid>("UploaderUid")
+                        .HasColumnType("TEXT");
+
+                    b.Property<DateTime>("CreatedAt")
+                        .HasColumnType("TEXT");
+
+                    b.HasKey("MediaId", "UploaderUid");
+
+                    b.ToTable("Likes");
+                });
+
+            modelBuilder.Entity("Shoebox.Web.Data.Pool", b =>
+                {
+                    b.Property<Guid>("Id")
+                        .ValueGeneratedOnAdd()
+                        .HasColumnType("TEXT");
+
+                    b.Property<Guid>("AdminKey")
+                        .HasColumnType("TEXT");
+
+                    b.Property<string>("Code")
+                        .IsRequired()
+                        .HasMaxLength(16)
+                        .HasColumnType("TEXT");
+
+                    b.Property<DateTime>("CreatedAt")
+                        .HasColumnType("TEXT");
+
+                    b.Property<string>("Description")
+                        .HasMaxLength(2000)
+                        .HasColumnType("TEXT");
+
+                    b.Property<DateTime?>("ExpiresAt")
+                        .HasColumnType("TEXT");
+
+                    b.Property<string>("Name")
+                        .IsRequired()
+                        .HasMaxLength(120)
+                        .HasColumnType("TEXT");
+
+                    b.Property<string>("PasswordHash")
+                        .HasColumnType("TEXT");
+
+                    b.HasKey("Id");
+
+                    b.HasIndex("Code")
+                        .IsUnique();
+
+                    b.ToTable("Pools");
+                });
+
+            modelBuilder.Entity("Shoebox.Web.Data.Media", b =>
+                {
+                    b.HasOne("Shoebox.Web.Data.Pool", "Pool")
+                        .WithMany("Media")
+                        .HasForeignKey("PoolId")
+                        .OnDelete(DeleteBehavior.Cascade)
+                        .IsRequired();
+
+                    b.Navigation("Pool");
+                });
+
+            modelBuilder.Entity("Shoebox.Web.Data.MediaLike", b =>
+                {
+                    b.HasOne("Shoebox.Web.Data.Media", "Media")
+                        .WithMany()
+                        .HasForeignKey("MediaId")
+                        .OnDelete(DeleteBehavior.Cascade)
+                        .IsRequired();
+
+                    b.Navigation("Media");
+                });
+
+            modelBuilder.Entity("Shoebox.Web.Data.Pool", b =>
+                {
+                    b.Navigation("Media");
+                });
+#pragma warning restore 612, 618
+        }
+    }
+}
diff --git a/src/Shoebox.Web/Migrations/20260818231015_MediaUploadedAtIndex.cs b/src/Shoebox.Web/Migrations/20260818231015_MediaUploadedAtIndex.cs
new file mode 100644
index 0000000..4c998db
--- /dev/null
+++ b/src/Shoebox.Web/Migrations/20260818231015_MediaUploadedAtIndex.cs
@@ -0,0 +1,27 @@
+using Microsoft.EntityFrameworkCore.Migrations;
+
+#nullable disable
+
+namespace Shoebox.Web.Migrations
+{
+    /// <inheritdoc />
+    public partial class MediaUploadedAtIndex : Migration
+    {
+        /// <inheritdoc />
+        protected override void Up(MigrationBuilder migrationBuilder)
+        {
+            migrationBuilder.CreateIndex(
+                name: "IX_Media_PoolId_UploadedAt",
+                table: "Media",
+                columns: new[] { "PoolId", "UploadedAt" });
+        }
+
+        /// <inheritdoc />
+        protected override void Down(MigrationBuilder migrationBuilder)
+        {
+            migrationBuilder.DropIndex(
+                name: "IX_Media_PoolId_UploadedAt",
+                table: "Media");
+        }
+    }
+}
diff --git a/src/Shoebox.Web/Migrations/AppDbContextModelSnapshot.cs b/src/Shoebox.Web/Migrations/AppDbContextModelSnapshot.cs
index 6fe8a42..63ef367 100644
--- a/src/Shoebox.Web/Migrations/AppDbContextModelSnapshot.cs
+++ b/src/Shoebox.Web/Migrations/AppDbContextModelSnapshot.cs
@@ -79,6 +79,8 @@ protected override void BuildModel(ModelBuilder modelBuilder)
 
                     b.HasIndex("PoolId", "ContentHash");
 
+                    b.HasIndex("PoolId", "UploadedAt");
+
                     b.ToTable("Media");
                 });
 
diff --git a/src/Shoebox.Web/Pages/Pool/Gallery.cshtml b/src/Shoebox.Web/Pages/Pool/Gallery.cshtml
index e79ccb9..e7d314d 100644
--- a/src/Shoebox.Web/Pages/Pool/Gallery.cshtml
+++ b/src/Shoebox.Web/Pages/Pool/Gallery.cshtml
@@ -22,11 +22,8 @@
     }
     <p class="pool-meta">
         Box code: <strong class="code">@Model.Pool.Code</strong>
-        · @Model.Items.Count photo@(Model.Items.Count == 1 ? "" : "s")
-        @if (Model.Uploaders.Count > 0)
-        {
-            <text>· from @Model.Uploaders.Count @(Model.Uploaders.Count == 1 ? "person" : "people")</text>
-        }
+        · <span id="photo-count">@Model.Items.Count photo@(Model.Items.Count == 1 ? "" : "s")</span>
+        <span id="people-count" hidden="@(Model.Uploaders.Count == 0)">· from @Model.Uploaders.Count @(Model.Uploaders.Count == 1 ? "person" : "people")</span>
     </p>
     @if (Model.Pool.ExpiresAt.HasValue)
     {
@@ -77,83 +74,28 @@
         </select>
     </label>
     <div class="download-buttons">
-        @if (Model.Items.Count > 0)
-        {
-            <a class="btn btn-ghost" href="/api/p/@Model.Pool.Code/zip?mode=all">Download all photos</a>
-            @* Phone-only: revealed by gallery.js on touch devices whose browser can
-               hand image files to the OS share sheet (mobile Safari / Chrome). *@
-            <button type="button" class="btn btn-ghost" id="save-gallery-btn" hidden>Save to gallery</button>
-        }
-        else
-        {
-            <span class="btn btn-ghost" aria-disabled="true">Download all photos</span>
-        }
-        @if (Model.HasOthers)
-        {
-            <a class="btn btn-ghost" href="/api/p/@Model.Pool.Code/zip?mode=others"
-               title="Downloads every photo added by other people — everything except your own uploads">Download everyone else's</a>
-        }
-        else
-        {
-            <span class="btn btn-ghost" aria-disabled="true"
-                  title="Nothing to download yet — no one else has added photos">Download everyone else's</span>
-        }
+        <a class="btn btn-ghost" id="download-all" href="/api/p/@Model.Pool.Code/zip?mode=all"
+           hidden="@(Model.Items.Count == 0)">Download all photos</a>
+        <span class="btn btn-ghost" id="download-all-empty" aria-disabled="true"
+              hidden="@(Model.Items.Count > 0)">Download all photos</span>
+        @* Phone-only: revealed by gallery.js on touch devices whose browser can
+           hand image files to the OS share sheet (mobile Safari / Chrome). *@
+        <button type="button" class="btn btn-ghost" id="save-gallery-btn" hidden>Save to gallery</button>
+        <a class="btn btn-ghost" id="download-others" href="/api/p/@Model.Pool.Code/zip?mode=others"
+           title="Downloads every photo added by other people — everything except your own uploads"
+           hidden="@(!Model.HasOthers)">Download everyone else's</a>
+        <span class="btn btn-ghost" id="download-others-empty" aria-disabled="true"
+              title="Nothing to download yet — no one else has added photos"
+              hidden="@(Model.HasOthers)">Download everyone else's</span>
     </div>
 </section>
 
-@if (Model.Items.Count == 0)
-{
-    <div class="empty-state">
-        <p><span class="big">Nothing here yet.</span> You were there. Prove it.</p>
-    </div>
-}
+<div class="empty-state" id="empty-state" hidden="@(Model.Items.Count > 0)">
+    <p><span class="big">Nothing here yet.</span> You were there. Prove it.</p>
+</div>
 
 <div class="gallery" id="gallery">
-    @for (var i = 0; i < Model.Items.Count; i++)
-    {
-        var item = Model.Items[i];
-        <figure class="tile @(item.Mine ? "mine" : "") @(item.IsVideo ? "video" : "") @(item.IsAnimated ? "animated" : "")" style="--i: @Math.Min(i, 12)"
-                data-id="@item.Id" data-uploader="@item.UploaderName"
-                data-original="/api/media/@item.Id/original" data-filename="@item.FileName">
-            @if (item.HasThumbnail)
-            {
-                <img src="/api/media/@item.Id/thumb" loading="lazy" alt="@item.FileName" />
-            }
-            else
-            {
-                <div class="no-thumb" title="Preview not available for this file"><span>@item.FileName</span></div>
-            }
-            @if (item.IsVideo)
-            {
-                @* Videos aren't played here: the tile shows a still frame, the file downloads. *@
-                <span class="media-badge">▶ Video</span>
-            }
-            else if (item.IsAnimated)
-            {
-                @* The grid holds still; hovering a tile or opening it plays the animation. *@
-                <span class="media-badge">@(item.FileName.EndsWith(".gif", StringComparison.OrdinalIgnoreCase) ? "GIF" : "Animated")</span>
-            }
-            <figcaption>
-                <span class="uploader">@item.UploaderName</span>
-                <span class="tile-actions">
-                    <button type="button" class="like-btn @(item.LikedByMe ? "liked" : "")"
-                            aria-pressed="@(item.LikedByMe ? "true" : "false")"
-                            title="@(item.LikedByMe ? "Unlike" : "Like") this photo">
-                        <span class="heart" aria-hidden="true">@(item.LikedByMe ? "❤" : "♡")</span>
-                        <span class="like-count">@item.LikeCount</span>
-                    </button>
-                    @if (item.Mine)
-                    {
-                        <span class="badge-you">you</span>
-                    }
-                    @if (item.Mine || Model.IsAdmin)
-                    {
-                        <button type="button" class="delete-btn" title="Delete photo">&times;</button>
-                    }
-                </span>
-            </figcaption>
-        </figure>
-    }
+    <partial name="_Tiles" model="new TileList(Model.Items, Model.IsAdmin)" />
 </div>
 
 <div class="lightbox" id="lightbox" hidden>
diff --git a/src/Shoebox.Web/Pages/Pool/Gallery.cshtml.cs b/src/Shoebox.Web/Pages/Pool/Gallery.cshtml.cs
index bc24ac7..eb807c4 100644
--- a/src/Shoebox.Web/Pages/Pool/Gallery.cshtml.cs
+++ b/src/Shoebox.Web/Pages/Pool/Gallery.cshtml.cs
@@ -8,7 +8,9 @@ namespace Shoebox.Web.Pages.Pool;
 
 public record MediaTile(
     Guid Id, string UploaderName, string FileName, bool Mine, bool HasThumbnail,
-    int LikeCount, bool LikedByMe, bool IsVideo, bool IsAnimated);
+    int LikeCount, bool LikedByMe, bool IsVideo, bool IsAnimated,
+    long SortAt, long UploadedAt);
+public record TileList(IReadOnlyList<MediaTile> Items, bool IsAdmin);
 public record UploaderSummary(string Name, int Count);
 
 public class GalleryModel(
@@ -18,6 +20,16 @@ public class GalleryModel(
     UploaderIdentity identity,
     ShareLinkService links) : PageModel
 {
+    /// <summary>
+    /// How far back of the browser's cursor the live feed looks. Two uploads landing together
+    /// can commit a hair out of order, so it re-offers a moment's worth of prints and the page
+    /// drops the ids it already has.
+    /// </summary>
+    private static readonly TimeSpan CursorOverlap = TimeSpan.FromSeconds(30);
+
+    private const int LiveBatchLimit = 200;
+    private const long MaxCursorMilliseconds = 253_402_300_799_000; // the end of year 9999
+
     public Data.Pool Pool { get; set; } = null!;
     public List<MediaTile> Items { get; set; } = [];
     public List<UploaderSummary> Uploaders { get; set; } = [];
@@ -45,30 +57,13 @@ public async Task<IActionResult> OnGetAsync(string code)
             return RedirectToPage("/Pool/Unlock", new { code = pool.Code });
         }
 
-        var uid = identity.GetOrCreateUid(HttpContext);
         var items = await db.Media
             .Where(m => m.PoolId == pool.Id)
             .OrderBy(m => m.TakenAt ?? m.UploadedAt)
             .ToListAsync();
 
-        var itemIds = items.Select(m => m.Id).ToList();
-        var likeCounts = await db.Likes
-            .Where(l => itemIds.Contains(l.MediaId))
-            .GroupBy(l => l.MediaId)
-            .Select(g => new { MediaId = g.Key, Count = g.Count() })
-            .ToDictionaryAsync(x => x.MediaId, x => x.Count);
-        var myLikes = (await db.Likes
-            .Where(l => l.UploaderUid == uid && itemIds.Contains(l.MediaId))
-            .Select(l => l.MediaId)
-            .ToListAsync()).ToHashSet();
-
         Pool = pool;
-        Items = items
-            .Select(m => new MediaTile(
-                m.Id, m.UploaderName, m.OriginalFileName, m.UploaderUid == uid, m.HasThumbnail,
-                likeCounts.GetValueOrDefault(m.Id), myLikes.Contains(m.Id),
-                m.Kind == MediaKind.Video, m.HasAnimation))
-            .ToList();
+        Items = await ToTilesAsync(items);
         HasOthers = Items.Any(m => !m.Mine);
         Uploaders = items
             .GroupBy(m => m.UploaderName)
@@ -87,6 +82,70 @@ public async Task<IActionResult> OnGetAsync(string code)
         return Page();
     }
 
+    /// <summary>
+    /// The prints that landed after the browser's cursor, drawn as tiles for the page to hang.
+    /// A print is only committed once its thumbnail and proxy are written, so anything offered
+    /// here can already be looked at.
+    /// </summary>
+    public async Task<IActionResult> OnGetSinceAsync(string code, long since = 0)
+    {
+        var pool = await pools.FindByCodeAsync(code);
+        if (pool is null)
+        {
+            return NotFound();
+        }
+
+        if (!access.CanView(HttpContext, pool))
+        {
+            // The box locked itself (or the cookie expired) while the page sat open.
+            return Unauthorized();
+        }
+
+        // Cursors are Unix milliseconds: exact in a browser's numbers, where ticks would not be.
+        var floor = DateTime.UnixEpoch.AddMilliseconds(
+            Math.Clamp(since, 0, MaxCursorMilliseconds) - CursorOverlap.TotalMilliseconds);
+        var items = await db.Media
+            .Where(m => m.PoolId == pool.Id && m.UploadedAt > floor)
+            .OrderBy(m => m.UploadedAt)
+            .ThenBy(m => m.Id)
+            .Take(LiveBatchLimit)
+            .ToListAsync();
+
+        Response.Headers.CacheControl = "no-store";
+        return Partial("_Tiles", new TileList(await ToTilesAsync(items), access.IsAdmin(HttpContext, pool.Id)));
+    }
+
+    private async Task<List<MediaTile>> ToTilesAsync(List<Media> items)
+    {
+        var uid = identity.GetOrCreateUid(HttpContext);
+        if (items.Count == 0)
+        {
+            return [];
+        }
+
+        var itemIds = items.Select(m => m.Id).ToList();
+        var likeCounts = await db.Likes
+            .Where(l => itemIds.Contains(l.MediaId))
+            .GroupBy(l => l.MediaId)
+            .Select(g => new { MediaId = g.Key, Count = g.Count() })
+            .ToDictionaryAsync(x => x.MediaId, x => x.Count);
+        var myLikes = (await db.Likes
+            .Where(l => l.UploaderUid == uid && itemIds.Contains(l.MediaId))
+            .Select(l => l.MediaId)
+            .ToListAsync()).ToHashSet();
+
+        return items
+            .Select(m => new MediaTile(
+                m.Id, m.UploaderName, m.OriginalFileName, m.UploaderUid == uid, m.HasThumbnail,
+                likeCounts.GetValueOrDefault(m.Id), myLikes.Contains(m.Id),
+                m.Kind == MediaKind.Video, m.HasAnimation,
+                UnixMilliseconds(m.SortDate), UnixMilliseconds(m.UploadedAt)))
+            .ToList();
+    }
+
+    private static long UnixMilliseconds(DateTime value) =>
+        (long)(value - DateTime.UnixEpoch).TotalMilliseconds;
+
     private static string BuildExpiryLabel(DateTime expiresAt)
     {
         var diff = expiresAt - DateTime.UtcNow;
diff --git a/src/Shoebox.Web/Pages/Pool/_Tiles.cshtml b/src/Shoebox.Web/Pages/Pool/_Tiles.cshtml
new file mode 100644
index 0000000..cf9ac31
--- /dev/null
+++ b/src/Shoebox.Web/Pages/Pool/_Tiles.cshtml
@@ -0,0 +1,49 @@
+@model Shoebox.Web.Pages.Pool.TileList
+@* Both the first render and the live feed draw prints through here, so an appended
+   tile is the tile a reload would have produced. *@
+@for (var i = 0; i < Model.Items.Count; i++)
+{
+    var item = Model.Items[i];
+    <figure class="tile @(item.Mine ? "mine" : "") @(item.IsVideo ? "video" : "") @(item.IsAnimated ? "animated" : "")" style="--i: @Math.Min(i, 12)"
+            data-id="@item.Id" data-uploader="@item.UploaderName"
+            data-original="/api/media/@item.Id/original" data-filename="@item.FileName"
+            data-sort="@item.SortAt" data-uploaded="@item.UploadedAt">
+        @if (item.HasThumbnail)
+        {
+            <img src="/api/media/@item.Id/thumb" loading="lazy" alt="@item.FileName" />
+        }
+        else
+        {
+            <div class="no-thumb" title="Preview not available for this file"><span>@item.FileName</span></div>
+        }
+        @if (item.IsVideo)
+        {
+            @* Videos aren't played here: the tile shows a still frame, the file downloads. *@
+            <span class="media-badge">▶ Video</span>
+        }
+        else if (item.IsAnimated)
+        {
+            @* The grid holds still; hovering a tile or opening it plays the animation. *@
+            <span class="media-badge">@(item.FileName.EndsWith(".gif", StringComparison.OrdinalIgnoreCase) ? "GIF" : "Animated")</span>
+        }
+        <figcaption>
+            <span class="uploader">@item.UploaderName</span>
+            <span class="tile-actions">
+                <button type="button" class="like-btn @(item.LikedByMe ? "liked" : "")"
+                        aria-pressed="@(item.LikedByMe ? "true" : "false")"
+                        title="@(item.LikedByMe ? "Unlike" : "Like") this photo">
+                    <span class="heart" aria-hidden="true">@(item.LikedByMe ? "❤" : "♡")</span>
+                    <span class="like-count">@item.LikeCount</span>
+                </button>
+                @if (item.Mine)
+                {
+                    <span class="badge-you">you</span>
+                }
+                @if (item.Mine || Model.IsAdmin)
+                {
+                    <button type="button" class="delete-btn" title="Delete photo">&times;</button>
+                }
+            </span>
+        </figcaption>
+    </figure>
+}
diff --git a/src/Shoebox.Web/Services/MediaService.cs b/src/Shoebox.Web/Services/MediaService.cs
index efe0e1c..ef581a5 100644
--- a/src/Shoebox.Web/Services/MediaService.cs
+++ b/src/Shoebox.Web/Services/MediaService.cs
@@ -89,7 +89,6 @@ public async Task<UploadResult> SaveAsync(Pool pool, IFormFile file, string uplo
             ContentHash = hash,
             UploaderName = uploaderName.Trim(),
             UploaderUid = uploaderUid,
-            UploadedAt = DateTime.UtcNow,
         };
 
         var originalPath = paths.OriginalFile(pool.Id, media.Id, media.Extension);
@@ -125,6 +124,10 @@ public async Task<UploadResult> SaveAsync(Pool pool, IFormFile file, string uplo
             media.HasAnimation = info.IsAnimated;
         }
 
+        // Stamped here rather than when the upload started: rendering a big photo takes a
+        // while, and the gallery's live feed follows this to decide what is new, so it has to
+        // say when the file actually landed in the box, not when it began arriving.
+        media.UploadedAt = DateTime.UtcNow;
         db.Media.Add(media);
         await db.SaveChangesAsync(ct);
         return UploadResult.Added(fileName, media.Id);
diff --git a/src/Shoebox.Web/wwwroot/css/site.css b/src/Shoebox.Web/wwwroot/css/site.css
index 3eee90e..a0e12cb 100644
--- a/src/Shoebox.Web/wwwroot/css/site.css
+++ b/src/Shoebox.Web/wwwroot/css/site.css
@@ -61,6 +61,10 @@
 
 * { box-sizing: border-box; }
 
+/* `hidden` has to beat the display rules below (buttons are inline-flex, the lightbox a
+   flex overlay), which would otherwise leave a hidden element on screen. */
+[hidden] { display: none !important; }
+
 ::selection { background: #f9e28d; color: #191817; }
 
 html {
@@ -729,8 +733,6 @@ input[type="checkbox"] { accent-color: var(--ink); }
   justify-content: center;
 }
 
-.lightbox[hidden] { display: none; }
-
 .lightbox img {
   max-width: 92vw;
   max-height: 82vh;
diff --git a/src/Shoebox.Web/wwwroot/js/gallery.js b/src/Shoebox.Web/wwwroot/js/gallery.js
index 3e2a5a4..24fa4f7 100644
--- a/src/Shoebox.Web/wwwroot/js/gallery.js
+++ b/src/Shoebox.Web/wwwroot/js/gallery.js
@@ -9,6 +9,9 @@
   const dropzone = document.getElementById("dropzone");
   const progressList = document.getElementById("upload-progress");
   const filterSelect = document.getElementById("uploader-filter");
+  const emptyState = document.getElementById("empty-state");
+  const photoCount = document.getElementById("photo-count");
+  const peopleCount = document.getElementById("people-count");
 
   // ---------- Upload ----------
 
@@ -56,7 +59,6 @@
   }
 
   async function uploadFiles(files) {
-    let anyAdded = false;
     for (const file of files) {
       const item = document.createElement("li");
       item.innerHTML = `<span>${escapeHtml(file.name)}</span><span class="status">0%</span>`;
@@ -69,10 +71,14 @@
         if (r && r.status === "added") {
           status.textContent = "uploaded";
           status.className = "status ok";
-          anyAdded = true;
+          item.classList.add("settled");
+          // The photo is rendered and in the box by the time this returns, so ask the
+          // live feed for it now: it drops into the gallery while the rest upload.
+          refreshSoon(400);
         } else if (r && r.status === "duplicate") {
           status.textContent = "already in box";
           status.className = "status";
+          item.classList.add("settled");
         } else {
           status.textContent = (r && r.reason) || "failed";
           status.className = "status fail";
@@ -82,9 +88,10 @@
         status.className = "status fail";
       }
     }
-    if (anyAdded) {
-      location.reload();
-    }
+
+    // Nothing reloads this list away any more. What landed is in the gallery to look at;
+    // only what went wrong is worth keeping on screen.
+    setTimeout(() => progressList.querySelectorAll("li.settled").forEach((li) => li.remove()), 4000);
   }
 
   function uploadOne(file, onProgress) {
@@ -119,12 +126,14 @@
 
   // ---------- Filter ----------
 
-  filterSelect?.addEventListener("change", () => {
+  filterSelect?.addEventListener("change", applyFilter);
+
+  function applyFilter() {
     const who = filterSelect.value;
     for (const tile of gallery.querySelectorAll(".tile")) {
       tile.style.display = !who || tile.dataset.uploader === who ? "" : "none";
     }
-  });
+  }
 
   // ---------- Save to gallery (mobile share sheet) ----------
 
@@ -150,8 +159,10 @@
     return !!(window.matchMedia && window.matchMedia("(pointer: coarse)").matches);
   }
 
-  if (saveGalleryBtn && isTouchDevice() && canShareFiles()) {
-    saveGalleryBtn.hidden = false;
+  // Whether to offer it at all; whether to show it right now also depends on the box
+  // holding something, which the live feed can change under the visitor's feet.
+  const canSaveToGallery = !!saveGalleryBtn && isTouchDevice() && canShareFiles();
+  if (canSaveToGallery) {
     saveGalleryBtn.addEventListener("click", saveToGallery);
   }
 
@@ -208,15 +219,20 @@
   // The grid holds still so a box full of GIFs doesn't flicker at everyone. On a device
   // with a real pointer, hovering a tile swaps its still for the animated display proxy;
   // on touch there's no hover, and tapping opens the lightbox, which always plays.
-  if (!window.matchMedia || window.matchMedia("(hover: hover)").matches) {
-    for (const tile of gallery.querySelectorAll(".tile.animated")) {
-      const img = tile.querySelector("img");
-      if (!img) continue;
-      const still = img.src;
-      const moving = tile.dataset.original.replace(/\/original$/, "/display");
-      tile.addEventListener("mouseenter", () => (img.src = moving));
-      tile.addEventListener("mouseleave", () => (img.src = still));
-    }
+  const hoverPlays = !window.matchMedia || window.matchMedia("(hover: hover)").matches;
+
+  function bindAnimation(tile) {
+    if (!hoverPlays || !tile.classList.contains("animated")) return;
+    const img = tile.querySelector("img");
+    if (!img) return;
+    const still = img.src;
+    const moving = tile.dataset.original.replace(/\/original$/, "/display");
+    tile.addEventListener("mouseenter", () => (img.src = moving));
+    tile.addEventListener("mouseleave", () => (img.src = still));
+  }
+
+  for (const tile of gallery.querySelectorAll(".tile.animated")) {
+    bindAnimation(tile);
   }
 
   // ---------- Like ----------
@@ -267,6 +283,7 @@
     const res = await fetch(`/api/media/${tile.dataset.id}`, { method: "DELETE" });
     if (res.ok) {
       tile.remove();
+      refreshChrome();
     } else {
       alert("Could not delete this photo.");
     }
@@ -278,17 +295,25 @@
   const lbImg = document.getElementById("lightbox-img");
   const lbCaption = document.getElementById("lightbox-caption");
   const lbDownload = document.getElementById("lightbox-download");
-  let currentIndex = -1;
+  // The open photo is held as the tile itself, not its index: photos arriving live can
+  // slot in ahead of it, and an index would quietly start pointing at someone else's.
+  let currentTile = null;
 
   function visibleTiles() {
     return [...gallery.querySelectorAll(".tile")].filter((t) => t.style.display !== "none");
   }
 
-  function showAt(index) {
+  function step(delta) {
     const tiles = visibleTiles();
     if (!tiles.length) return;
-    currentIndex = (index + tiles.length) % tiles.length;
-    const tile = tiles[currentIndex];
+    const at = currentTile ? tiles.indexOf(currentTile) : -1;
+    // The open photo just left the gallery (deleted, or filtered out): start over.
+    showTile(at === -1 ? tiles[0] : tiles[(at + delta + tiles.length) % tiles.length]);
+  }
+
+  function showTile(tile) {
+    if (!tile) return;
+    currentTile = tile;
     // The lightbox shows the web-safe "display" proxy: full-screen sharp but far smaller
     // than a 50MB phone original, and viewable in every browser (including HEIC). The
     // Download button always fetches the true original.
@@ -308,26 +333,27 @@
   function closeLightbox() {
     lightbox.hidden = true;
     lbImg.src = "";
+    currentTile = null;
     document.body.style.overflow = "";
   }
 
   gallery.addEventListener("click", (e) => {
     const tile = e.target.closest(".tile");
     if (!tile || e.target.closest(".delete-btn") || e.target.closest(".like-btn")) return;
-    showAt(visibleTiles().indexOf(tile));
+    showTile(tile);
   });
 
   lightbox.querySelector(".lb-close").addEventListener("click", closeLightbox);
-  lightbox.querySelector(".lb-prev").addEventListener("click", () => showAt(currentIndex - 1));
-  lightbox.querySelector(".lb-next").addEventListener("click", () => showAt(currentIndex + 1));
+  lightbox.querySelector(".lb-prev").addEventListener("click", () => step(-1));
+  lightbox.querySelector(".lb-next").addEventListener("click", () => step(1));
   lightbox.addEventListener("click", (e) => {
     if (e.target === lightbox) closeLightbox();
   });
   document.addEventListener("keydown", (e) => {
     if (lightbox.hidden) return;
     if (e.key === "Escape") closeLightbox();
-    if (e.key === "ArrowLeft") showAt(currentIndex - 1);
-    if (e.key === "ArrowRight") showAt(currentIndex + 1);
+    if (e.key === "ArrowLeft") step(-1);
+    if (e.key === "ArrowRight") step(1);
   });
 
   // Touch: swipe left/right to move between photos, quick tap to close.
@@ -344,7 +370,7 @@
     const dx = e.changedTouches[0].clientX - touchX;
     const dy = e.changedTouches[0].clientY - touchY;
     if (Math.abs(dx) > 45 && Math.abs(dx) > Math.abs(dy) * 1.4) {
-      showAt(currentIndex + (dx < 0 ? 1 : -1));
+      step(dx < 0 ? 1 : -1);
     } else if (!touchMoved && e.target === lbImg) {
       closeLightbox();
     }
@@ -366,6 +392,221 @@
     }
   });
 
+  // ---------- Live refresh ----------
+  //
+  // A box fills while people are looking at it, so the page asks every ten seconds for the
+  // prints that landed since the ones it drew and slots them in, rather than reloading and
+  // losing the visitor's place. Polling, not a held-open socket per viewer: a box is a
+  // handful of people for an afternoon. A backgrounded tab asks for nothing.
+
+  const POLL_MS = 10000;
+  const QUIET_POLL_MS = 30000;
+  const QUIET_AFTER_MS = 300000;
+  const POLL_MAX_MS = 120000;
+
+  let lastArrival = Date.now();
+  let cursor = Math.max(0, ...[...gallery.children].map((tile) => Number(tile.dataset.uploaded) || 0));
+  let pollTimer = null;
+  let polling = false;
+  let askAgain = false;
+  let failures = 0;
+  let liveStopped = false;
+
+  function refreshSoon(delay) {
+    if (liveStopped) return;
+    clearTimeout(pollTimer);
+    pollTimer = setTimeout(refresh, delay);
+  }
+
+  function scheduleNext() {
+    if (failures) {
+      refreshSoon(Math.min(POLL_MS * 2 ** failures, POLL_MAX_MS));
+      return;
+    }
+
+    // A box nobody has added to for a while is asked after less often. Anything arriving,
+    // or the visitor turning back to the tab, puts it on the fast cadence again.
+    const quiet = Date.now() - lastArrival > QUIET_AFTER_MS;
+    // A little jitter, so a table full of phones doesn't ask all at the same instant.
+    refreshSoon((quiet ? QUIET_POLL_MS : POLL_MS) + Math.random() * 2000);
+  }
+
+  async function refresh() {
+    if (liveStopped || document.hidden) return;
+    if (polling) {
+      // An upload finished while a poll was already on its way out, so it can't know about it.
+      askAgain = true;
+      return;
+    }
+
+    polling = true;
+    try {
+      const res = await fetch(`/p/${poolCode}?handler=since&since=${cursor}`);
+      if (res.status === 401 || res.status === 404) {
+        // The box locked itself again, or is gone: nothing left worth asking for.
+        liveStopped = true;
+        return;
+      }
+      if (!res.ok) throw new Error("live refresh failed");
+      addTiles(await res.text());
+      failures = 0;
+    } catch {
+      failures = Math.min(failures + 1, 4);
+    } finally {
+      polling = false;
+      if (askAgain) {
+        askAgain = false;
+        refreshSoon(400);
+      } else {
+        scheduleNext();
+      }
+    }
+  }
+
+  function addTiles(html) {
+    const parsed = document.createElement("template");
+    parsed.innerHTML = html;
+    const incoming = [...parsed.content.querySelectorAll(".tile")];
+    if (!incoming.length) return;
+
+    // The feed re-offers the last moment's prints so none can slip between two polls;
+    // whatever is already hanging here is dropped.
+    for (const tile of incoming) {
+      cursor = Math.max(cursor, Number(tile.dataset.uploaded) || 0);
+    }
+    const known = new Set([...gallery.children].map((tile) => tile.dataset.id));
+    const fresh = incoming.filter((tile) => !known.has(tile.dataset.id));
+    if (!fresh.length) return;
+    lastArrival = Date.now();
+
+    const who = filterSelect ? filterSelect.value : "";
+    keepingPlace(() => {
+      for (const tile of fresh) {
+        if (who && tile.dataset.uploader !== who) {
+          tile.style.display = "none";
+        }
+        insertInOrder(tile);
+        bindAnimation(tile);
+      }
+      refreshChrome();
+    });
+  }
+
+  // Prints hang by when they were taken, so one from earlier in the day goes back into its
+  // place in the afternoon rather than landing at the end.
+  function insertInOrder(tile) {
+    for (const existing of gallery.children) {
+      if (compareTiles(tile, existing) < 0) {
+        gallery.insertBefore(tile, existing);
+        return;
+      }
+    }
+    gallery.appendChild(tile);
+  }
+
+  function compareTiles(a, b) {
+    return (
+      (Number(a.dataset.sort) || 0) - (Number(b.dataset.sort) || 0) ||
+      (Number(a.dataset.uploaded) || 0) - (Number(b.dataset.uploaded) || 0) ||
+      (a.dataset.id < b.dataset.id ? -1 : a.dataset.id > b.dataset.id ? 1 : 0)
+    );
+  }
+
+  // Photos arriving must not shove the page around under whoever is reading it: measure a
+  // print they can see, let the new ones in, then take back however far it moved.
+  function keepingPlace(insert) {
+    const measure = anchorMeasure();
+    const before = measure();
+    insert();
+    const shift = measure() - before;
+    if (shift && window.scrollY > 0) {
+      window.scrollBy(0, shift);
+    }
+  }
+
+  function anchorMeasure() {
+    for (const tile of gallery.children) {
+      if (tile.getBoundingClientRect().bottom > 0) {
+        return () => tile.getBoundingClientRect().top;
+      }
+    }
+    return () => gallery.getBoundingClientRect().bottom;
+  }
+
+  // Everything around the grid that counts prints, on arrivals and deletes alike.
+  function refreshChrome() {
+    const tiles = [...gallery.querySelectorAll(".tile")];
+    const total = tiles.length;
+    const mine = tiles.filter((tile) => tile.classList.contains("mine")).length;
+
+    const counts = new Map();
+    for (const tile of tiles) {
+      counts.set(tile.dataset.uploader, (counts.get(tile.dataset.uploader) || 0) + 1);
+    }
+
+    emptyState.hidden = total > 0;
+    photoCount.textContent = `${total} photo${total === 1 ? "" : "s"}`;
+    peopleCount.hidden = counts.size === 0;
+    peopleCount.textContent = `· from ${counts.size} ${counts.size === 1 ? "person" : "people"}`;
+
+    show("download-all", total > 0);
+    show("download-all-empty", total === 0);
+    show("download-others", total > mine);
+    show("download-others-empty", total <= mine);
+    if (saveGalleryBtn) saveGalleryBtn.hidden = !canSaveToGallery || total === 0;
+
+    refreshFilter(total, counts);
+  }
+
+  function show(id, shown) {
+    document.getElementById(id).hidden = !shown;
+  }
+
+  function refreshFilter(total, counts) {
+    if (!filterSelect) return;
+    const names = [...counts.keys()].sort((a, b) => a.localeCompare(b));
+    const signature = [total, ...names.map((name) => `${name}=${counts.get(name)}`)].join("\u0000");
+    // Rebuilding this under an open dropdown would be exactly the interruption the live
+    // refresh exists to avoid, so it is only touched when it really changed.
+    if (filterSelect.dataset.signature === signature) return;
+    filterSelect.dataset.signature = signature;
+
+    const chosen = filterSelect.value;
+    filterSelect.replaceChildren(makeOption("", `Everyone (${total})`));
+    for (const name of names) {
+      filterSelect.appendChild(makeOption(name, `${name} (${counts.get(name)})`));
+    }
+
+    filterSelect.value = chosen;
+    if (filterSelect.selectedIndex < 0) {
+      // The person being filtered on has no photos left: fall back to showing everyone.
+      filterSelect.selectedIndex = 0;
+      applyFilter();
+    }
+  }
+
+  function makeOption(value, label) {
+    const option = document.createElement("option");
+    option.value = value;
+    option.textContent = label;
+    return option;
+  }
+
+  document.addEventListener("visibilitychange", () => {
+    if (document.hidden) {
+      clearTimeout(pollTimer);
+    } else {
+      lastArrival = Date.now();
+      refreshSoon(300);
+    }
+  });
+
+  // Back on the network after a dropout, rather than sitting out the backoff.
+  window.addEventListener("online", () => refreshSoon(300));
+
+  refreshChrome();
+  scheduleNext();
+
   function escapeHtml(s) {
     const div = document.createElement("div");
     div.textContent = s;
diff --git a/tests/Shoebox.Tests.Web/CoreFlowTests.cs b/tests/Shoebox.Tests.Web/CoreFlowTests.cs
index 73d6dcd..e06ae55 100644
--- a/tests/Shoebox.Tests.Web/CoreFlowTests.cs
+++ b/tests/Shoebox.Tests.Web/CoreFlowTests.cs
@@ -287,6 +287,58 @@ public async Task Corrupt_image_is_rejected_and_not_left_on_disk()
             path => Path.GetFileName(path).StartsWith("upload_", StringComparison.Ordinal));
     }
 
+    [Fact]
+    public async Task Live_feed_hands_over_the_prints_the_page_has_not_drawn()
+    {
+        using var factory = new ShoeboxWebApplicationFactory();
+        using var owner = CreateClient(factory);
+        var code = await CreateBoxAsync(owner);
+
+        var first = await UploadAsync(owner, code, "Alice", "one.png", MakePng(MagickColors.Red));
+        var page = await owner.GetStringAsync($"/p/{code}");
+        var cursor = Regex.Match(page, "data-uploaded=\"(\\d+)\"");
+        Assert.True(cursor.Success, $"No tile to pick the live-refresh cursor up from: {first.MediaId}");
+
+        var second = await UploadAsync(owner, code, "Bob", "two.png", MakePng(MagickColors.Blue));
+        var fresh = await owner.GetStringAsync($"/p/{code}?handler=since&since={cursor.Groups[1].Value}");
+        Assert.Contains($"data-id=\"{second.MediaId}\"", fresh);
+
+        // Nothing has landed since a cursor from the future, so nothing is offered.
+        var later = DateTimeOffset.UtcNow.AddMinutes(5).ToUnixTimeMilliseconds();
+        Assert.DoesNotContain("class=\"tile", await owner.GetStringAsync($"/p/{code}?handler=since&since={later}"));
+    }
+
+    [Fact]
+    public async Task Live_feed_is_shut_to_anyone_who_has_not_unlocked_the_box()
+    {
+        using var factory = new ShoeboxWebApplicationFactory();
+        using var owner = CreateClient(factory);
+        var code = await CreateBoxAsync(owner, password: "festival-secret");
+        await UploadAsync(owner, code, "Alice", "one.png", MakePng(MagickColors.Red));
+
+        // A guest holding a signed cookie of their own — for their box, not this one.
+        using var guest = CreateClient(factory);
+        await CreateBoxAsync(guest, password: "their-own-secret");
+        Assert.Equal(
+            HttpStatusCode.Unauthorized,
+            (await guest.GetAsync($"/p/{code}?handler=since&since=0")).StatusCode);
+        Assert.Equal(
+            HttpStatusCode.NotFound,
+            (await guest.GetAsync("/p/nosuchbox?handler=since&since=0")).StatusCode);
+
+        await PostRazorFormAsync(
+            guest,
+            $"/p/{code}/unlock",
+            new Dictionary<string, string> { ["password"] = "festival-secret" });
+        Assert.Contains("class=\"tile", await guest.GetStringAsync($"/p/{code}?handler=since&since=0"));
+    }
+
+    private static byte[] MakePng(MagickColor color)
+    {
+        using var image = new MagickImage(color, 40, 40);
+        return image.ToByteArray(MagickFormat.Png);
+    }
+
     private static HttpClient CreateClient(ShoeboxWebApplicationFactory factory) =>
         factory.CreateClient(new WebApplicationFactoryClientOptions
         {