From 8e82fe8ecfa6fd5dcb504a8c77e8f4f3c5345fd3 Mon Sep 17 00:00:00 2001
From: Tim Haasdyk <tim_haasdyk@sil.org>
Date: Fri, 16 Jan 2026 14:06:05 +0100
Subject: [PATCH 01/42] Do morph type filtering server-side

---
 .../LexEntryFilterMapProvider.cs              |  1 +
 .../FwLite/LcmCrdt/EntryFilterMapProvider.cs  |  1 +
 .../MiniLcm.Tests/QueryEntryTestsBase.cs      | 18 ++++++++++++
 .../FwLite/MiniLcm/Filtering/EntryFilter.cs   |  1 +
 .../Filtering/EntryFilterMapProvider.cs       |  1 +
 .../src/project/browse/EntriesList.svelte     | 29 ++-----------------
 .../src/project/browse/SearchFilter.svelte    | 19 +++++++++++-
 7 files changed, 42 insertions(+), 28 deletions(-)

diff --git a/backend/FwLite/FwDataMiniLcmBridge/LexEntryFilterMapProvider.cs b/backend/FwLite/FwDataMiniLcmBridge/LexEntryFilterMapProvider.cs
index 019208f154..8abd0d754a 100644
--- a/backend/FwLite/FwDataMiniLcmBridge/LexEntryFilterMapProvider.cs
+++ b/backend/FwLite/FwDataMiniLcmBridge/LexEntryFilterMapProvider.cs
@@ -32,6 +32,7 @@ public class LexEntryFilterMapProvider : EntryFilterMapProvider<ILexEntry>
 
     public override Expression<Func<ILexEntry, string, object>> EntryCitationForm => (entry, ws) => entry.PickText(entry.CitationForm, ws);
     public override Expression<Func<ILexEntry, string, object>> EntryLiteralMeaning => (entry, ws) => entry.PickText(entry.LiteralMeaning, ws);
+    public override Expression<Func<ILexEntry, object?>> EntryMorphType => e => LcmHelpers.FromLcmMorphType(e.PrimaryMorphType);
     public override Expression<Func<ILexEntry, object?>> EntryComplexFormTypes => e => EmptyToNull(e.ComplexFormEntryRefs.SelectMany(r => r.ComplexEntryTypesRS));
     public override Func<string, object>? EntryComplexFormTypesConverter => EntryFilter.NormalizeEmptyToNull<ILexEntryType>;
 }
diff --git a/backend/FwLite/LcmCrdt/EntryFilterMapProvider.cs b/backend/FwLite/LcmCrdt/EntryFilterMapProvider.cs
index 5aa3a06b3f..a62d909c9c 100644
--- a/backend/FwLite/LcmCrdt/EntryFilterMapProvider.cs
+++ b/backend/FwLite/LcmCrdt/EntryFilterMapProvider.cs
@@ -27,6 +27,7 @@ public class EntryFilterMapProvider : EntryFilterMapProvider<Entry>
     public override Expression<Func<Entry, string, object>> EntryLexemeForm => (entry, ws) => Json.Value(entry.LexemeForm, ms => ms[ws])!;
     public override Expression<Func<Entry, string, object>> EntryCitationForm => (entry, ws) => Json.Value(entry.CitationForm, ms => ms[ws])!;
     public override Expression<Func<Entry, string, object>> EntryLiteralMeaning => (entry, ws) => Json.Value(entry.LiteralMeaning, ms => ms[ws])!.GetPlainText();
+    public override Expression<Func<Entry, object?>> EntryMorphType => e => e.MorphType;
     public override Expression<Func<Entry, object?>> EntryComplexFormTypes => e => e.ComplexFormTypes;
     public override Func<string, object>? EntryComplexFormTypesConverter => EntryFilter.NormalizeEmptyToEmptyList<ComplexFormType>;
 }
diff --git a/backend/FwLite/MiniLcm.Tests/QueryEntryTestsBase.cs b/backend/FwLite/MiniLcm.Tests/QueryEntryTestsBase.cs
index 117ab99970..224002899e 100644
--- a/backend/FwLite/MiniLcm.Tests/QueryEntryTestsBase.cs
+++ b/backend/FwLite/MiniLcm.Tests/QueryEntryTestsBase.cs
@@ -226,6 +226,24 @@ public async Task CanFilterToMissingComplexFormTypesWithEmptyArray()
         results.Select(e => e.LexemeForm["en"]).Distinct().Should().BeEquivalentTo(Apple, Banana, Kiwi, Null_LexemeForm);
     }
 
+    [Fact]
+    public async Task CanFilterByMorphTypeSingleType()
+    {
+        // This test ensures we can filter by a single morph type
+        var results = await Api.GetEntries(new(Filter: new() { GridifyFilter = "MorphType=Root" })).ToArrayAsync();
+        // Root is not set on any of our test entries (they all default to Stem), so should be empty
+        results.Should().BeEmpty();
+    }
+
+    [Fact]
+    public async Task CanFilterByMorphTypeTwoTypes()
+    {
+        // This test ensures we can filter by multiple morph types using OR syntax
+        var results = await Api.GetEntries(new(Filter: new() { GridifyFilter = "MorphType=Root|MorphType=Stem" })).ToArrayAsync();
+        // All our test entries default to Stem, so we should get all of them
+        results.Select(e => e.LexemeForm["en"]).Should().BeEquivalentTo(Apple, Peach, Banana, Kiwi, Null_LexemeForm);
+    }
+
     [Fact]
     public async Task CanFilterLexemeForm()
     {
diff --git a/backend/FwLite/MiniLcm/Filtering/EntryFilter.cs b/backend/FwLite/MiniLcm/Filtering/EntryFilter.cs
index f1f332961b..a1688e3911 100644
--- a/backend/FwLite/MiniLcm/Filtering/EntryFilter.cs
+++ b/backend/FwLite/MiniLcm/Filtering/EntryFilter.cs
@@ -26,6 +26,7 @@ public static GridifyMapper<T> NewMapper<T>(EntryFilterMapProvider<T> provider)
         mapper.AddMap(nameof(Entry.LexemeForm), provider.EntryLexemeForm!);
         mapper.AddMap(nameof(Entry.CitationForm), provider.EntryCitationForm!);
         mapper.AddMap(nameof(Entry.LiteralMeaning), provider.EntryLiteralMeaning!);
+        mapper.AddMap(nameof(Entry.MorphType), provider.EntryMorphType);
         mapper.AddMap(nameof(Entry.ComplexFormTypes), provider.EntryComplexFormTypes, provider.EntryComplexFormTypesConverter);
         return mapper;
     }
diff --git a/backend/FwLite/MiniLcm/Filtering/EntryFilterMapProvider.cs b/backend/FwLite/MiniLcm/Filtering/EntryFilterMapProvider.cs
index 00be759cde..58967af5f3 100644
--- a/backend/FwLite/MiniLcm/Filtering/EntryFilterMapProvider.cs
+++ b/backend/FwLite/MiniLcm/Filtering/EntryFilterMapProvider.cs
@@ -19,6 +19,7 @@ public abstract class EntryFilterMapProvider<T>
     public abstract Expression<Func<T, string, object>> EntryLexemeForm { get; }
     public abstract Expression<Func<T, string, object>> EntryCitationForm { get; }
     public abstract Expression<Func<T, string, object>> EntryLiteralMeaning { get; }
+    public abstract Expression<Func<T, object?>> EntryMorphType { get; }
     public abstract Expression<Func<T, object?>> EntryComplexFormTypes { get; }
     public virtual Func<string, object>? EntryComplexFormTypesConverter { get; } = null;
 }
diff --git a/frontend/viewer/src/project/browse/EntriesList.svelte b/frontend/viewer/src/project/browse/EntriesList.svelte
index 43358a012a..80e903dd07 100644
--- a/frontend/viewer/src/project/browse/EntriesList.svelte
+++ b/frontend/viewer/src/project/browse/EntriesList.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-  import {MorphType, type IEntry, type IPartOfSpeech, type ISemanticDomain} from '$lib/dotnet-types';
+  import {type IEntry, type IPartOfSpeech, type ISemanticDomain} from '$lib/dotnet-types';
   import type {IQueryOptions} from '$lib/dotnet-types/generated-types/MiniLcm/IQueryOptions';
   import {SortField} from '$lib/dotnet-types/generated-types/MiniLcm/SortField';
   import {Debounced, resource, useDebounce, watch} from 'runed';
@@ -20,24 +20,6 @@
   import {useProjectContext} from '$project/project-context.svelte';
   import {DEFAULT_DEBOUNCE_TIME} from '$lib/utils/time';
   import {IsMobile} from '$lib/hooks/is-mobile.svelte';
-  import {useCurrentView} from '$lib/views/view-service';
-
-  const LITE_MORPHEME_TYPES = new Set([
-    MorphType.Root, MorphType.BoundRoot,
-    MorphType.Stem, MorphType.BoundStem,
-    MorphType.Particle,
-    MorphType.Phrase, MorphType.DiscontiguousPhrase,
-  ]);
-
-  function filterLiteMorphemeTypes(entries: IEntry[]): IEntry[] {
-    // we could do this server-side, but doing it client-side provides better UX and presumably we'll
-    // only ever filter out a small portion of entries
-    const filteredEntries = entries.filter(entry =>
-      entry.morphType && LITE_MORPHEME_TYPES.has(entry.morphType));
-    const hiddenEntries = entries.length - filteredEntries.length;
-    console.debug(`Filtered out ${hiddenEntries} non-wordy morpheme entries (for FW Lite view)`);
-    return filteredEntries;
-  }
 
   let {
     search = '',
@@ -66,7 +48,6 @@
   const miniLcmApi = $derived(projectContext.maybeApi);
   const dialogsService = useDialogsService();
   const projectEventBus = useProjectEventBus();
-  const currentView = useCurrentView();
 
   projectEventBus.onEntryDeleted(entryId => {
     if (selectedEntryId === entryId) onSelectEntry(undefined);
@@ -130,13 +111,7 @@
       if (refetchInfo.signal.aborted) return entriesResource.current ?? [];
       return entries;
     });
-  const entries = $derived.by(() => {
-    let currEntries = entriesResource.current ?? [];
-    if (currEntries.length && $currentView.type === 'fw-lite') {
-      currEntries = filterLiteMorphemeTypes(currEntries);
-    }
-    return currEntries;
-  });
+  const entries = $derived(entriesResource.current ?? []);
   watch(() => [entries, entriesResource.loading], () => {
     if (!entriesResource.loading)
       entryCount = entries.length;
diff --git a/frontend/viewer/src/project/browse/SearchFilter.svelte b/frontend/viewer/src/project/browse/SearchFilter.svelte
index f1449ab9ac..540e75ebc2 100644
--- a/frontend/viewer/src/project/browse/SearchFilter.svelte
+++ b/frontend/viewer/src/project/browse/SearchFilter.svelte
@@ -21,6 +21,7 @@
   import PartOfSpeechSelect from './filter/PartOfSpeechSelect.svelte';
   import Label from '$lib/components/ui/label/label.svelte';
   import type {ISemanticDomain, IPartOfSpeech} from '$lib/dotnet-types';
+  import {MorphType} from '$lib/dotnet-types';
   import {Switch} from '$lib/components/ui/switch';
 
   const stats = useProjectStats();
@@ -45,6 +46,14 @@
   let fieldFilterValue = $state('');
   let filterOp = $state<Op>('contains')
   let includeSubDomains = $state(false);
+  let userFilterActive = $state(false);
+
+  const LITE_MORPHEME_TYPES = new Set([
+    MorphType.Root, MorphType.BoundRoot,
+    MorphType.Stem, MorphType.BoundStem,
+    MorphType.Particle,
+    MorphType.Phrase, MorphType.DiscontiguousPhrase,
+  ]);
 
   $effect(() => {
     let newFilter: string[] = [];
@@ -81,6 +90,14 @@
       newFilter.push(`Senses.PartOfSpeechId=${partOfSpeech.id}`);
     }
 
+    // all user selected filters should be before this line!
+    userFilterActive = newFilter.length > 0;
+
+    if ($currentView.type === 'fw-lite') {
+      const morphTypeFilters = Array.from(LITE_MORPHEME_TYPES).map(mt => `MorphType=${mt}`);
+      newFilter.push('(' + morphTypeFilters.join('|') + ')');
+    }
+
     gridifyFilter = newFilter.join(', ');
   });
 
@@ -115,7 +132,7 @@
         <Collapsible.Trigger>
           {#snippet child({props})}
             <Toggle {...mergeProps(props, { class: 'aspect-square' })} aria-label={$t`Toggle filters`} size="xs">
-              <Icon icon={gridifyFilter ? 'i-mdi-filter' : 'i-mdi-filter-outline'} class="size-5" />
+              <Icon icon={userFilterActive ? 'i-mdi-filter' : 'i-mdi-filter-outline'} class="size-5" />
             </Toggle>
           {/snippet}
         </Collapsible.Trigger>

From 22859d265b8dfb721f7db0a7bbab68fac42b61be Mon Sep 17 00:00:00 2001
From: Tim Haasdyk <tim_haasdyk@sil.org>
Date: Fri, 16 Jan 2026 14:26:55 +0100
Subject: [PATCH 02/42] temp

---
 .../MiniLcmTests/EntryWindowTests.cs          |  12 +
 .../Api/FwDataMiniLcmApi.cs                   |  43 ++
 .../FwLite/FwLiteWeb/Routes/MiniLcmRoutes.cs  |  21 +
 .../MiniLcmTests/EntryWindowTests.cs          |  26 +
 backend/FwLite/LcmCrdt/CrdtMiniLcmApi.cs      |  25 +
 .../FwLite/LcmCrdt/Data/MiniLcmRepository.cs  |  38 +-
 .../MiniLcm.Tests/EntryWindowTestsBase.cs     | 192 +++++++
 backend/FwLite/MiniLcm/IMiniLcmReadApi.cs     |  14 +
 backend/LfClassicData/LfClassicMiniLcmApi.cs  |  10 +
 .../viewer/src/lib/components/ListItem.svelte |   1 +
 .../lib/services/chunk-cache-service.test.ts  | 476 ++++++++++++++++++
 .../src/lib/services/chunk-cache-service.ts   | 419 +++++++++++++++
 .../src/project/demo/in-memory-demo-api.ts    |  78 ++-
 13 files changed, 1344 insertions(+), 11 deletions(-)
 create mode 100644 backend/FwLite/FwDataMiniLcmBridge.Tests/MiniLcmTests/EntryWindowTests.cs
 create mode 100644 backend/FwLite/LcmCrdt.Tests/MiniLcmTests/EntryWindowTests.cs
 create mode 100644 backend/FwLite/MiniLcm.Tests/EntryWindowTestsBase.cs
 create mode 100644 frontend/viewer/src/lib/services/chunk-cache-service.test.ts
 create mode 100644 frontend/viewer/src/lib/services/chunk-cache-service.ts

diff --git a/backend/FwLite/FwDataMiniLcmBridge.Tests/MiniLcmTests/EntryWindowTests.cs b/backend/FwLite/FwDataMiniLcmBridge.Tests/MiniLcmTests/EntryWindowTests.cs
new file mode 100644
index 0000000000..c3af480b81
--- /dev/null
+++ b/backend/FwLite/FwDataMiniLcmBridge.Tests/MiniLcmTests/EntryWindowTests.cs
@@ -0,0 +1,12 @@
+using FwDataMiniLcmBridge.Tests.Fixtures;
+
+namespace FwDataMiniLcmBridge.Tests.MiniLcmTests;
+
+[Collection(ProjectLoaderFixture.Name)]
+public class EntryWindowTests(ProjectLoaderFixture fixture) : EntryWindowTestsBase
+{
+    protected override Task<IMiniLcmApi> NewApi()
+    {
+        return Task.FromResult<IMiniLcmApi>(fixture.NewProjectApi("entry-window-test", "en", "en"));
+    }
+}
diff --git a/backend/FwLite/FwDataMiniLcmBridge/Api/FwDataMiniLcmApi.cs b/backend/FwLite/FwDataMiniLcmBridge/Api/FwDataMiniLcmApi.cs
index c52fba6a0f..511eb00dd5 100644
--- a/backend/FwLite/FwDataMiniLcmBridge/Api/FwDataMiniLcmApi.cs
+++ b/backend/FwLite/FwDataMiniLcmBridge/Api/FwDataMiniLcmApi.cs
@@ -955,6 +955,49 @@ public IAsyncEnumerable<Entry> SearchEntries(string query, QueryOptions? options
         return Task.FromResult(lexEntry is null ? null : FromLexEntry(lexEntry));
     }
 
+    public async Task<EntryWindowResponse> GetEntriesWindow(int start, int size, string? query = null, QueryOptions? options = null)
+    {
+        const int MaxPageSize = 1_000;
+        if (start < 0) throw new ArgumentOutOfRangeException(nameof(start), start, "Start must be non-negative.");
+        if (size is <= 0 or > MaxPageSize)
+            throw new ArgumentOutOfRangeException(nameof(size), size, $"Size must be between 1 and {MaxPageSize}.");
+
+        var windowOptions = new QueryOptions(
+            options?.Order ?? QueryOptions.Default.Order,
+            options?.Exemplar,
+            size,
+            start,
+            options?.Filter
+        );
+        var entries = new List<Entry>();
+        await foreach (var entry in GetEntries(EntrySearchPredicate(query), windowOptions, query))
+        {
+            entries.Add(entry);
+        }
+        return new EntryWindowResponse(entries, start);
+    }
+
+    public Task<EntryRowIndexResponse> GetEntryRowIndex(Guid entryId, string? query = null, QueryOptions? options = null)
+    {
+        options ??= QueryOptions.Default;
+        var predicate = EntrySearchPredicate(query);
+        var entries = GetLexEntries(predicate, options);
+        entries = ApplySorting(options, entries, query);
+
+        var rowIndex = 0;
+        foreach (var entry in entries)
+        {
+            if (entry.Guid == entryId)
+            {
+                var result = FromLexEntry(entry);
+                return Task.FromResult(new EntryRowIndexResponse(rowIndex, result));
+            }
+            rowIndex++;
+        }
+
+        throw NotFoundException.ForType<Entry>(entryId);
+    }
+
     public async Task<Entry> CreateEntry(Entry entry, CreateEntryOptions? options = null)
     {
         options ??= CreateEntryOptions.Everything;
diff --git a/backend/FwLite/FwLiteWeb/Routes/MiniLcmRoutes.cs b/backend/FwLite/FwLiteWeb/Routes/MiniLcmRoutes.cs
index 7f6fd036af..4afed12137 100644
--- a/backend/FwLite/FwLiteWeb/Routes/MiniLcmRoutes.cs
+++ b/backend/FwLite/FwLiteWeb/Routes/MiniLcmRoutes.cs
@@ -97,8 +97,10 @@ await projectProvider.OpenProject(project, context.HttpContext.RequestServices)
 
         api.MapGet("/writingSystems", MiniLcm.GetWritingSystems);
         api.MapGet("/entries", MiniLcm.GetEntries);
+        api.MapGet("/entries/window", MiniLcm.GetEntriesWindow);
         api.MapGet("/entries/{search}", MiniLcm.SearchEntries);
         api.MapGet("/entry/{id:Guid}", MiniLcm.GetEntry);
+        api.MapGet("/entry/{id:Guid}/row-index", MiniLcm.GetEntryRowIndex);
         api.MapGet("/parts-of-speech", MiniLcm.GetPartsOfSpeech);
         api.MapGet("/semantic-domains", MiniLcm.GetSemanticDomains);
         api.MapGet("/publications", MiniLcm.GetPublications);
@@ -137,6 +139,25 @@ public static IAsyncEnumerable<Entry> SearchEntries([FromServices] MiniLcmHolder
             return api.GetEntry(id);
         }
 
+        public static Task<EntryWindowResponse> GetEntriesWindow(
+            [FromQuery] int start,
+            [FromQuery] int size,
+            [AsParameters] MiniLcmQueryOptions options,
+            [FromServices] MiniLcmHolder holder)
+        {
+            var api = holder.MiniLcmApi;
+            return api.GetEntriesWindow(start, size, null, options.ToQueryOptions());
+        }
+
+        public static Task<EntryRowIndexResponse> GetEntryRowIndex(
+            Guid id,
+            [AsParameters] MiniLcmQueryOptions options,
+            [FromServices] MiniLcmHolder holder)
+        {
+            var api = holder.MiniLcmApi;
+            return api.GetEntryRowIndex(id, null, options.ToQueryOptions());
+        }
+
         public static IAsyncEnumerable<PartOfSpeech> GetPartsOfSpeech([FromServices] MiniLcmHolder holder)
         {
             var api = holder.MiniLcmApi;
diff --git a/backend/FwLite/LcmCrdt.Tests/MiniLcmTests/EntryWindowTests.cs b/backend/FwLite/LcmCrdt.Tests/MiniLcmTests/EntryWindowTests.cs
new file mode 100644
index 0000000000..aec1176b19
--- /dev/null
+++ b/backend/FwLite/LcmCrdt.Tests/MiniLcmTests/EntryWindowTests.cs
@@ -0,0 +1,26 @@
+using Xunit.Abstractions;
+
+namespace LcmCrdt.Tests.MiniLcmTests;
+
+public class EntryWindowTests(ITestOutputHelper output) : EntryWindowTestsBase
+{
+    private readonly MiniLcmApiFixture _fixture = new();
+
+    public override async Task InitializeAsync()
+    {
+        _fixture.LogTo(output);
+        await _fixture.InitializeAsync();
+        await base.InitializeAsync();
+    }
+
+    protected override Task<IMiniLcmApi> NewApi()
+    {
+        return Task.FromResult<IMiniLcmApi>(_fixture.Api);
+    }
+
+    public override async Task DisposeAsync()
+    {
+        await base.DisposeAsync();
+        await _fixture.DisposeAsync();
+    }
+}
diff --git a/backend/FwLite/LcmCrdt/CrdtMiniLcmApi.cs b/backend/FwLite/LcmCrdt/CrdtMiniLcmApi.cs
index cfeea8fc98..13c95b8e8e 100644
--- a/backend/FwLite/LcmCrdt/CrdtMiniLcmApi.cs
+++ b/backend/FwLite/LcmCrdt/CrdtMiniLcmApi.cs
@@ -405,6 +405,31 @@ public async IAsyncEnumerable<Entry> SearchEntries(string? query, QueryOptions?
         return await repo.GetEntry(id);
     }
 
+    public async Task<EntryWindowResponse> GetEntriesWindow(int start, int size, string? query = null, QueryOptions? options = null)
+    {
+        await using var repo = await repoFactory.CreateRepoAsync();
+        var windowOptions = new QueryOptions(
+            options?.Order ?? QueryOptions.Default.Order,
+            options?.Exemplar,
+            size,
+            start,
+            options?.Filter
+        );
+        var entries = new List<Entry>();
+        await foreach (var entry in repo.GetEntries(query, windowOptions))
+        {
+            entries.Add(entry);
+        }
+        return new EntryWindowResponse(entries, start);
+    }
+
+    public async Task<EntryRowIndexResponse> GetEntryRowIndex(Guid entryId, string? query = null, QueryOptions? options = null)
+    {
+        await using var repo = await repoFactory.CreateRepoAsync();
+        var (rowIndex, entry) = await repo.GetEntryRowIndex(entryId, query, options);
+        return new EntryRowIndexResponse(rowIndex, entry);
+    }
+
     public async Task BulkCreateEntries(IAsyncEnumerable<Entry> entries)
     {
         await using var repo = await repoFactory.CreateRepoAsync();
diff --git a/backend/FwLite/LcmCrdt/Data/MiniLcmRepository.cs b/backend/FwLite/LcmCrdt/Data/MiniLcmRepository.cs
index 20233e1038..3bf6cf8dda 100644
--- a/backend/FwLite/LcmCrdt/Data/MiniLcmRepository.cs
+++ b/backend/FwLite/LcmCrdt/Data/MiniLcmRepository.cs
@@ -208,22 +208,20 @@ private async Task<QueryOptions> EnsureWritingSystemIsPopulated(QueryOptions que
         return (queryable, sortingHandled);
     }
 
-    private async ValueTask<IQueryable<Entry>> ApplySorting(IQueryable<Entry> queryable, QueryOptions options, string? query = null)
+    private ValueTask<IQueryable<Entry>> ApplySorting(IQueryable<Entry> queryable, QueryOptions options, string? query = null)
     {
         if (options.Order.WritingSystem == default)
             throw new ArgumentException("Sorting writing system must be specified", nameof(options));
 
         var wsId = options.Order.WritingSystem;
-        switch (options.Order.Field)
+        IQueryable<Entry> result = options.Order.Field switch
         {
-            case SortField.SearchRelevance:
-                return queryable.ApplyRoughBestMatchOrder(options.Order, query);
-            case SortField.Headword:
-                var ordered = options.ApplyOrder(queryable, e => e.Headword(wsId).CollateUnicode(wsId));
-                return ordered.ThenBy(e => e.Id);
-            default:
-                throw new ArgumentOutOfRangeException(nameof(options), "sort field unknown " + options.Order.Field);
-        }
+            SortField.SearchRelevance => queryable.ApplyRoughBestMatchOrder(options.Order, query),
+            SortField.Headword =>
+                options.ApplyOrder(queryable, e => e.Headword(wsId).CollateUnicode(wsId)).ThenBy(e => e.Id),
+            _ => throw new ArgumentOutOfRangeException(nameof(options), "sort field unknown " + options.Order.Field)
+        };
+        return new ValueTask<IQueryable<Entry>>(result);
     }
 
     public async Task<Entry?> GetEntry(Guid id)
@@ -262,6 +260,26 @@ private async ValueTask<IQueryable<Entry>> ApplySorting(IQueryable<Entry> querya
         return exampleSentence;
     }
 
+    public async Task<(int RowIndex, Entry Entry)> GetEntryRowIndex(Guid entryId, string? query = null, QueryOptions? options = null)
+    {
+        // This is a fallback implementation that's not optimal for large datasets,
+        // but it works correctly. Ideally, we'd use ROW_NUMBER() window function with linq2db
+        // for better performance on large entry lists. For now, we enumerate through sorted entries
+        // and count until we find the target entry.
+        
+        var rowIndex = 0;
+        await foreach (var entry in GetEntries(query, options))
+        {
+            if (entry.Id == entryId)
+            {
+                return (rowIndex, entry);
+            }
+            rowIndex++;
+        }
+
+        throw NotFoundException.ForType<Entry>(entryId);
+    }
+
     public async Task<Publication?> GetPublication(Guid publicationId)
     {
         var publication = await AsyncExtensions.SingleOrDefaultAsync(Publications
diff --git a/backend/FwLite/MiniLcm.Tests/EntryWindowTestsBase.cs b/backend/FwLite/MiniLcm.Tests/EntryWindowTestsBase.cs
new file mode 100644
index 0000000000..59c2cc66b9
--- /dev/null
+++ b/backend/FwLite/MiniLcm.Tests/EntryWindowTestsBase.cs
@@ -0,0 +1,192 @@
+using MiniLcm.Exceptions;
+
+namespace MiniLcm.Tests;
+
+/// <summary>
+/// Tests for GetEntriesWindow and GetEntryRowIndex APIs.
+/// These APIs are critical for chunk-based virtual scrolling.
+/// </summary>
+public abstract class EntryWindowTestsBase : MiniLcmTestBase
+{
+    private readonly Guid appleId = Guid.NewGuid();
+    private readonly Guid bananaId = Guid.NewGuid();
+    private readonly Guid kiwiId = Guid.NewGuid();
+    private readonly Guid orangeId = Guid.NewGuid();
+    private readonly Guid peachId = Guid.NewGuid();
+
+    private const string Apple = "Apple";
+    private const string Banana = "Banana";
+    private const string Kiwi = "Kiwi";
+    private const string Orange = "Orange";
+    private const string Peach = "Peach";
+
+    public override async Task InitializeAsync()
+    {
+        await base.InitializeAsync();
+        // Create entries in non-alphabetical order to test sorting
+        await Api.CreateEntry(new Entry { Id = orangeId, LexemeForm = { { "en", Orange } } });
+        await Api.CreateEntry(new Entry { Id = appleId, LexemeForm = { { "en", Apple } } });
+        await Api.CreateEntry(new Entry { Id = kiwiId, LexemeForm = { { "en", Kiwi } } });
+        await Api.CreateEntry(new Entry { Id = bananaId, LexemeForm = { { "en", Banana } } });
+        await Api.CreateEntry(new Entry { Id = peachId, LexemeForm = { { "en", Peach } } });
+    }
+
+    [Fact]
+    public async Task GetEntriesWindow_FirstWindow_ReturnsFirstChunk()
+    {
+        var result = await Api.GetEntriesWindow(0, 2);
+
+        result.FirstIndex.Should().Be(0);
+        result.Entries.Should().HaveCount(2);
+        // Entries should be sorted alphabetically by headword
+        result.Entries[0].LexemeForm["en"].Should().Be(Apple);
+        result.Entries[1].LexemeForm["en"].Should().Be(Banana);
+    }
+
+    [Fact]
+    public async Task GetEntriesWindow_SecondWindow_ReturnsSecondChunk()
+    {
+        var result = await Api.GetEntriesWindow(2, 2);
+
+        result.FirstIndex.Should().Be(2);
+        result.Entries.Should().HaveCount(2);
+        result.Entries[0].LexemeForm["en"].Should().Be(Kiwi);
+        result.Entries[1].LexemeForm["en"].Should().Be(Orange);
+    }
+
+    [Fact]
+    public async Task GetEntriesWindow_PartialLastWindow_ReturnsRemainingEntries()
+    {
+        var result = await Api.GetEntriesWindow(4, 2);
+
+        result.FirstIndex.Should().Be(4);
+        result.Entries.Should().HaveCount(1);
+        result.Entries[0].LexemeForm["en"].Should().Be(Peach);
+    }
+
+    [Fact]
+    public async Task GetEntriesWindow_EmptyWindow_ReturnsEmptyList()
+    {
+        var result = await Api.GetEntriesWindow(10, 2);
+
+        result.FirstIndex.Should().Be(10);
+        result.Entries.Should().BeEmpty();
+    }
+
+    [Fact]
+    public async Task GetEntriesWindow_WindowSizeOfOne_WorksCorrectly()
+    {
+        var result = await Api.GetEntriesWindow(1, 1);
+
+        result.FirstIndex.Should().Be(1);
+        result.Entries.Should().HaveCount(1);
+        result.Entries[0].LexemeForm["en"].Should().Be(Banana);
+    }
+
+    [Fact]
+    public async Task GetEntriesWindow_LargeWindow_ReturnsBiggerChunk()
+    {
+        var result = await Api.GetEntriesWindow(0, 10);
+
+        result.FirstIndex.Should().Be(0);
+        result.Entries.Should().HaveCount(5);
+        // Verify all entries are present in alphabetical order
+        result.Entries.Select(e => e.LexemeForm["en"])
+            .Should().ContainInOrder(Apple, Banana, Kiwi, Orange, Peach);
+    }
+
+    [Fact]
+    public async Task GetEntryRowIndex_FirstEntry_ReturnsZero()
+    {
+        var result = await Api.GetEntryRowIndex(appleId);
+
+        result.RowIndex.Should().Be(0);
+        result.Entry.Id.Should().Be(appleId);
+        result.Entry.LexemeForm["en"].Should().Be(Apple);
+    }
+
+    [Fact]
+    public async Task GetEntryRowIndex_MiddleEntry_ReturnsCorrectIndex()
+    {
+        var result = await Api.GetEntryRowIndex(kiwiId);
+
+        result.RowIndex.Should().Be(2);
+        result.Entry.Id.Should().Be(kiwiId);
+        result.Entry.LexemeForm["en"].Should().Be(Kiwi);
+    }
+
+    [Fact]
+    public async Task GetEntryRowIndex_LastEntry_ReturnsLastIndex()
+    {
+        var result = await Api.GetEntryRowIndex(peachId);
+
+        result.RowIndex.Should().Be(4);
+        result.Entry.Id.Should().Be(peachId);
+        result.Entry.LexemeForm["en"].Should().Be(Peach);
+    }
+
+    [Fact]
+    public async Task GetEntryRowIndex_NonExistentEntry_Throws()
+    {
+        var nonExistentId = Guid.NewGuid();
+
+        var action = () => Api.GetEntryRowIndex(nonExistentId);
+
+        await action.Should().ThrowAsync<NotFoundException>();
+    }
+
+    [Fact]
+    public async Task GetEntriesWindow_WithOffset_SkipsEntries()
+    {
+        var result = await Api.GetEntriesWindow(1, 3);
+
+        result.FirstIndex.Should().Be(1);
+        result.Entries.Should().HaveCount(3);
+        result.Entries.Select(e => e.LexemeForm["en"])
+            .Should().ContainInOrder(Banana, Kiwi, Orange);
+    }
+
+    [Fact]
+    public async Task GetEntriesWindow_ReturnedEntriesAreComplete()
+    {
+        var result = await Api.GetEntriesWindow(0, 1);
+
+        result.Entries.Should().HaveCount(1);
+        var entry = result.Entries[0];
+        entry.Id.Should().NotBe(Guid.Empty);
+        entry.LexemeForm.Should().NotBeNull();
+        entry.Senses.Should().NotBeNull();
+    }
+
+    [Fact]
+    public async Task GetEntriesWindow_MultipleCallsCoverAllEntries()
+    {
+        // Simulate chunking through all entries
+        var window1 = await Api.GetEntriesWindow(0, 2);
+        var window2 = await Api.GetEntriesWindow(2, 2);
+        var window3 = await Api.GetEntriesWindow(4, 2);
+
+        var allHeadwords = new List<string>();
+        allHeadwords.AddRange(window1.Entries.Select(e => e.LexemeForm["en"]));
+        allHeadwords.AddRange(window2.Entries.Select(e => e.LexemeForm["en"]));
+        allHeadwords.AddRange(window3.Entries.Select(e => e.LexemeForm["en"]));
+
+        allHeadwords.Should().BeEquivalentTo(Apple, Banana, Kiwi, Orange, Peach);
+    }
+
+    [Fact]
+    public async Task GetEntryRowIndex_CanPositionWindow()
+    {
+        // Get row index for an entry
+        var indexResult = await Api.GetEntryRowIndex(kiwiId);
+        var rowIndex = indexResult.RowIndex;
+
+        // Use it to fetch a window around that entry
+        var windowResult = await Api.GetEntriesWindow(rowIndex, 2);
+
+        windowResult.FirstIndex.Should().Be(2);
+        windowResult.Entries.Should().HaveCount(2);
+        windowResult.Entries[0].Id.Should().Be(kiwiId);
+        windowResult.Entries[1].LexemeForm["en"].Should().Be(Orange);
+    }
+}
diff --git a/backend/FwLite/MiniLcm/IMiniLcmReadApi.cs b/backend/FwLite/MiniLcm/IMiniLcmReadApi.cs
index 7e396956bb..26721e3c1c 100644
--- a/backend/FwLite/MiniLcm/IMiniLcmReadApi.cs
+++ b/backend/FwLite/MiniLcm/IMiniLcmReadApi.cs
@@ -27,6 +27,8 @@ public interface IMiniLcmReadApi
     Task<Publication?> GetPublication(Guid id);
     Task<SemanticDomain?> GetSemanticDomain(Guid id);
     Task<ExampleSentence?> GetExampleSentence(Guid entryId, Guid senseId, Guid id);
+    Task<EntryWindowResponse> GetEntriesWindow(int start, int size, string? query = null, QueryOptions? options = null);
+    Task<EntryRowIndexResponse> GetEntryRowIndex(Guid entryId, string? query = null, QueryOptions? options = null);
 
     Task<ReadFileResponse> GetFileStream(MediaUri mediaUri)
     {
@@ -34,6 +36,18 @@ Task<ReadFileResponse> GetFileStream(MediaUri mediaUri)
     }
 }
 
+public record EntryWindowResponse(
+    IReadOnlyList<Entry> Entries,
+    int FirstIndex)
+{
+}
+
+public record EntryRowIndexResponse(
+    int RowIndex,
+    Entry Entry)
+{
+}
+
 public record FilterQueryOptions(
     ExemplarOptions? Exemplar = null,
     EntryFilter? Filter = null)
diff --git a/backend/LfClassicData/LfClassicMiniLcmApi.cs b/backend/LfClassicData/LfClassicMiniLcmApi.cs
index 0974cc7923..c335d76d86 100644
--- a/backend/LfClassicData/LfClassicMiniLcmApi.cs
+++ b/backend/LfClassicData/LfClassicMiniLcmApi.cs
@@ -424,4 +424,14 @@ private static SemanticDomain ToSemanticDomain(Entities.OptionListItem item)
         if (exampleSentence is null) return null;
         return ToExampleSentence(sense.Guid, exampleSentence);
     }
+
+    public async Task<EntryWindowResponse> GetEntriesWindow(int start, int size, string? query = null, QueryOptions? options = null)
+    {
+        throw new NotImplementedException();
+    }
+
+    public async Task<EntryRowIndexResponse> GetEntryRowIndex(Guid entryId, string? query = null, QueryOptions? options = null)
+    {
+        throw new NotImplementedException();
+    }
 }
diff --git a/frontend/viewer/src/lib/components/ListItem.svelte b/frontend/viewer/src/lib/components/ListItem.svelte
index a690c04a20..b3a73380f9 100644
--- a/frontend/viewer/src/lib/components/ListItem.svelte
+++ b/frontend/viewer/src/lib/components/ListItem.svelte
@@ -33,6 +33,7 @@
 
 <button
   aria-selected={selected && !skeleton && !disabled}
+  selected={selected && !skeleton && !disabled ? 'true' : undefined}
   disabled={disabled || loading}
   class={cn(
     'w-full max-w-full px-4 py-3 flex text-left overflow-hidden items-center gap-4',
diff --git a/frontend/viewer/src/lib/services/chunk-cache-service.test.ts b/frontend/viewer/src/lib/services/chunk-cache-service.test.ts
new file mode 100644
index 0000000000..a4ead04c6e
--- /dev/null
+++ b/frontend/viewer/src/lib/services/chunk-cache-service.test.ts
@@ -0,0 +1,476 @@
+import {describe, it, expect, beforeEach, vi} from 'vitest';
+import {ChunkCacheService, type EntryWindowProvider} from './chunk-cache-service';
+import type {IEntry} from '$lib/dotnet-types/generated-types/MiniLcm/Models/IEntry';
+
+/**
+ * Helper to create mock entries
+ */
+function createEntry(id: string, lexeme: string): IEntry {
+	return {
+		id,
+		lexemeForm: { en: lexeme },
+		citationForm: {},
+		literalMeaning: { spans: [] },
+		note: { spans: [] },
+		morphType: 0,
+		senses: [],
+		components: [],
+		complexForms: [],
+		complexFormTypes: [],
+		publishIn: [],
+		deletedAt: undefined
+	};
+}
+
+/**
+ * Mock backend provider
+ */
+class MockProvider implements EntryWindowProvider {
+	private entries: IEntry[] = [];
+	private failOnceStart: number | null = null;
+
+	setEntries(entries: IEntry[]): void {
+		this.entries = entries;
+	}
+
+	failNextWindowForStart(start: number): void {
+		this.failOnceStart = start;
+	}
+
+	// eslint-disable-next-line @typescript-eslint/require-await
+	async fetchWindow(start: number, size: number): Promise<{ entries: IEntry[]; firstIndex: number }> {
+		if (this.failOnceStart === start) {
+			this.failOnceStart = null;
+			throw new Error('Transient fetch failure');
+		}
+		const window = this.entries.slice(start, start + size);
+		return { entries: window, firstIndex: start };
+	}
+
+	// eslint-disable-next-line @typescript-eslint/require-await
+	async fetchRowIndex(entryId: string): Promise<{ rowIndex: number; entry: IEntry }> {
+		const rowIndex = this.entries.findIndex(e => e.id === entryId);
+		if (rowIndex === -1) throw new Error(`Entry ${entryId} not found`);
+		return { rowIndex, entry: this.entries[rowIndex] };
+	}
+}
+
+describe('ChunkCacheService', () => {
+	let service: ChunkCacheService;
+	let provider: MockProvider;
+	const chunkSize = 10;
+
+	beforeEach(() => {
+		provider = new MockProvider();
+		// Create 35 mock entries (3.5 chunks worth)
+		const entries = Array.from({ length: 35 }, (_, i) =>
+			createEntry(`entry-${i}`, `Item ${i}`)
+		);
+		provider.setEntries(entries);
+		service = new ChunkCacheService(provider, chunkSize);
+	});
+
+	describe('ensureWindow', () => {
+		it('should fetch and cache first chunk', async () => {
+			const result = await service.ensureWindow(0, 5);
+
+			expect(result).toHaveLength(5);
+			expect(result[0].id).toBe('entry-0');
+			expect(result[4].id).toBe('entry-4');
+		});
+
+		it('should fetch multiple chunks for large window', async () => {
+			const result = await service.ensureWindow(0, 25);
+
+			expect(result).toHaveLength(25);
+			expect(result[0].id).toBe('entry-0');
+			expect(result[24].id).toBe('entry-24');
+		});
+
+		it('should cache and reuse chunks on second call', async () => {
+			const fetchSpy = vi.spyOn(provider, 'fetchWindow');
+
+			// First call
+			await service.ensureWindow(0, 10);
+			expect(fetchSpy).toHaveBeenCalled();
+			const callCount1 = fetchSpy.mock.calls.length;
+
+			// Second call to same window
+			const result = await service.ensureWindow(0, 10);
+			expect(result).toHaveLength(10);
+			expect(fetchSpy.mock.calls.length).toBe(callCount1); // No additional calls
+		});
+
+		it('should emit onWindowReady event', async () => {
+			const onWindowReady = vi.fn();
+			service.subscribe({ onWindowReady });
+
+			await service.ensureWindow(0, 5);
+
+			expect(onWindowReady).toHaveBeenCalled();
+		});
+
+		it('should handle offset windows', async () => {
+			const result = await service.ensureWindow(15, 5);
+
+			expect(result).toHaveLength(5);
+			expect(result[0].id).toBe('entry-15');
+			expect(result[4].id).toBe('entry-19');
+		});
+
+		it('should handle partial last chunk', async () => {
+			const result = await service.ensureWindow(30, 10);
+
+			expect(result).toHaveLength(5); // Only 5 entries left
+			expect(result[0].id).toBe('entry-30');
+			expect(result[4].id).toBe('entry-34');
+		});
+	});
+
+	describe('applyEntryUpdated', () => {
+		it('should update entry in cached chunk', async () => {
+			await service.ensureWindow(0, 10);
+
+			const updatedEntry = createEntry('entry-3', 'Updated Item 3');
+			service.applyEntryUpdated(updatedEntry);
+
+			const result = await service.ensureWindow(0, 10);
+			expect(result[3].lexemeForm.en).toBe('Updated Item 3');
+		});
+
+		it('should emit onChunkChanged event', async () => {
+			await service.ensureWindow(0, 10);
+
+			const onChunkChanged = vi.fn();
+			service.subscribe({ onChunkChanged });
+
+			const updatedEntry = createEntry('entry-5', 'Updated');
+			service.applyEntryUpdated(updatedEntry);
+
+			expect(onChunkChanged).toHaveBeenCalled();
+		});
+
+		it('should handle update on non-cached entry', () => {
+			const onError = vi.fn();
+			service.subscribe({ onError });
+
+			// This should silently do nothing, not error
+			const updatedEntry = createEntry('entry-100', 'Updated');
+			service.applyEntryUpdated(updatedEntry);
+
+			expect(onError).not.toHaveBeenCalled();
+		});
+	});
+
+	describe('applyEntryDeleted', () => {
+		it('should delete entry from cached chunk', async () => {
+			await service.ensureWindow(0, 15);
+
+			service.applyEntryDeleted('entry-5');
+
+			const result = await service.ensureWindow(0, 15);
+			expect(result).not.toContainEqual(expect.objectContaining({ id: 'entry-5' }));
+		});
+
+		it('should cascade delete from next chunk', async () => {
+			await service.ensureWindow(0, 25);
+
+			service.applyEntryDeleted('entry-5');
+
+			const result = await service.ensureWindow(0, 25);
+			// After delete of entry-5, entry-10 should move up
+			expect(result[10].id).toBe('entry-11');
+		});
+
+		it('should emit onChunkChanged on cascade', async () => {
+			await service.ensureWindow(0, 25);
+
+			const onChunkChanged = vi.fn();
+			service.subscribe({ onChunkChanged });
+
+			service.applyEntryDeleted('entry-5');
+
+			// Should be called at least once for the deletion
+			expect(onChunkChanged).toHaveBeenCalled();
+		});
+	});
+
+	describe('applyEntryInserted', () => {
+		it('should insert entry at absolute index', async () => {
+			await service.ensureWindow(0, 15);
+
+			const newEntry = createEntry('new-entry', 'New Item');
+			service.applyEntryInserted(newEntry, 5);
+
+			const result = await service.ensureWindow(0, 20);
+			expect(result[5]).toEqual(expect.objectContaining({ id: 'new-entry' }));
+		});
+
+		it('should cascade insert to next chunk', async () => {
+			await service.ensureWindow(0, 25);
+
+			const newEntry = createEntry('new-entry', 'New Item');
+			service.applyEntryInserted(newEntry, 8);
+
+			const result = await service.ensureWindow(0, 25);
+			expect(result[8].id).toBe('new-entry');
+			// entry-34 should be pushed out (was at index 34, now past end or in overflow)
+		});
+
+		it('should emit onChunkChanged on insert', async () => {
+			await service.ensureWindow(0, 15);
+
+			const onChunkChanged = vi.fn();
+			service.subscribe({ onChunkChanged });
+
+			const newEntry = createEntry('new-entry', 'New Item');
+			service.applyEntryInserted(newEntry, 5);
+
+			expect(onChunkChanged).toHaveBeenCalled();
+		});
+	});
+
+	describe('delete and insert cascade patterns', () => {
+		it('should handle multiple deletes', async () => {
+			await service.ensureWindow(0, 20);
+
+			service.applyEntryDeleted('entry-2');
+			service.applyEntryDeleted('entry-5');
+			service.applyEntryDeleted('entry-1');
+
+			const result = await service.ensureWindow(0, 20);
+			const ids = result.map(e => e.id);
+			expect(ids).not.toContain('entry-1');
+			expect(ids).not.toContain('entry-2');
+			expect(ids).not.toContain('entry-5');
+		});
+
+		it('should handle insert followed by delete', async () => {
+			await service.ensureWindow(0, 15);
+
+			const newEntry = createEntry('new-entry', 'New');
+			service.applyEntryInserted(newEntry, 5);
+
+			service.applyEntryDeleted('new-entry');
+
+			const result = await service.ensureWindow(0, 15);
+			expect(result).not.toContainEqual(expect.objectContaining({ id: 'new-entry' }));
+		});
+
+		it('should maintain consistency after mixed operations', async () => {
+			await service.ensureWindow(0, 20);
+
+			service.applyEntryDeleted('entry-3');
+			const newEntry = createEntry('inserted', 'Inserted');
+			service.applyEntryInserted(newEntry, 10);
+			const updated = createEntry('entry-8', 'Updated');
+			service.applyEntryUpdated(updated);
+
+			const result = await service.ensureWindow(0, 20);
+			expect(result).not.toContainEqual(expect.objectContaining({ id: 'entry-3' }));
+			expect(result).toContainEqual(expect.objectContaining({ id: 'inserted' }));
+			// After deleting entry-3, entry-8 shifts from position 8 to 7
+			expect(result[7].lexemeForm.en).toBe('Updated');
+		});
+	});
+
+	describe('observer subscriptions', () => {
+		it('should allow multiple observers', async () => {
+			const obs1 = { onChunkChanged: vi.fn() };
+			const obs2 = { onChunkChanged: vi.fn() };
+
+			service.subscribe(obs1);
+			service.subscribe(obs2);
+
+			await service.ensureWindow(0, 10);
+			service.applyEntryUpdated(createEntry('entry-0', 'Updated'));
+
+			expect(obs1.onChunkChanged).toHaveBeenCalled();
+			expect(obs2.onChunkChanged).toHaveBeenCalled();
+		});
+
+		it('should allow unsubscribe', async () => {
+			const onChunkChanged = vi.fn();
+			const unsubscribe = service.subscribe({ onChunkChanged });
+
+			await service.ensureWindow(0, 10);
+			service.applyEntryUpdated(createEntry('entry-0', 'Updated'));
+
+			expect(onChunkChanged).toHaveBeenCalledTimes(1);
+
+			unsubscribe();
+
+			service.applyEntryUpdated(createEntry('entry-1', 'Updated'));
+			expect(onChunkChanged).toHaveBeenCalledTimes(1); // No additional call
+		});
+	});
+
+	describe('clear', () => {
+		it('should clear all cached chunks', async () => {
+			await service.ensureWindow(0, 20);
+
+			service.clear();
+
+			const onWindowReady = vi.fn();
+			service.subscribe({ onWindowReady });
+
+			// After clear, should fetch again
+			const fetchSpy = vi.spyOn(provider, 'fetchWindow');
+			await service.ensureWindow(0, 10);
+
+			expect(fetchSpy).toHaveBeenCalled();
+		});
+	});
+
+	describe('error handling', () => {
+		it('should emit error on fetch failure', async () => {
+			const failProvider = new (class implements EntryWindowProvider {
+				// eslint-disable-next-line @typescript-eslint/require-await
+				async fetchWindow(): Promise<{ entries: IEntry[]; firstIndex: number }> {
+					throw new Error('Network error');
+				}
+
+				// eslint-disable-next-line @typescript-eslint/require-await
+				async fetchRowIndex(): Promise<{ rowIndex: number; entry: IEntry }> {
+					throw new Error('Network error');
+				}
+			})();
+
+			const failService = new ChunkCacheService(failProvider, chunkSize);
+			const onError = vi.fn();
+			failService.subscribe({ onError });
+
+			try {
+				await failService.ensureWindow(0, 10);
+			} catch {
+				// Expected
+			}
+
+			expect(onError).toHaveBeenCalled();
+		});
+	});
+
+	describe('window bounds and tail refill', () => {
+		it('should preserve window length after delete by not cascading beyond visible range', async () => {
+			await service.ensureWindow(0, 15);
+
+			// Delete from within the window
+			service.applyEntryDeleted('entry-5');
+
+			const result = await service.ensureWindow(0, 15);
+			// Window should still be 15 entries (refilled or pulled from cascade)
+			expect(result.length).toBeGreaterThanOrEqual(14);
+			expect(result).not.toContainEqual(expect.objectContaining({ id: 'entry-5' }));
+		});
+
+		it('should discard overflow outside requestedWindow on insert', async () => {
+			await service.ensureWindow(0, 15);
+
+			// Insert near end of visible window
+			const newEntry = createEntry('new', 'New');
+			service.applyEntryInserted(newEntry, 14);
+
+			const result = await service.ensureWindow(0, 15);
+			// Should have inserted entry and not accumulated garbage beyond window
+			expect(result).toContainEqual(expect.objectContaining({ id: 'new' }));
+			expect(result.length).toBeLessThanOrEqual(15);
+		});
+
+		it('should update chunk bounds when entries cascade', async () => {
+			await service.ensureWindow(0, 20);
+
+			service.applyEntryDeleted('entry-5');
+
+			// After delete, window should shrink by 1 but entries should still be valid
+			const result = await service.ensureWindow(0, 20);
+			expect(result).toHaveLength(19);
+
+			// Verify chunk boundaries were updated (no duplicates or gaps)
+			const ids = new Set(result.map(e => e.id));
+			expect(ids.size).toBe(result.length);
+		});
+
+		it('should maintain correct order during cascades', async () => {
+			await service.ensureWindow(0, 20);
+
+			service.applyEntryDeleted('entry-8');
+			const newEntry = createEntry('inserted-x', 'X');
+			service.applyEntryInserted(newEntry, 12);
+
+			const result = await service.ensureWindow(0, 20);
+			const ids = result.map(e => e.id);
+
+			// Verify no duplicates
+			const uniqueIds = new Set(ids);
+			expect(uniqueIds.size).toBe(ids.length);
+
+			// Verify order is still valid (monotonically increasing except for inserted)
+			expect(ids).toContainEqual('inserted-x');
+		});
+
+			it('should cascade delete at chunk boundary and adjust next chunk bounds', async () => {
+				await service.ensureWindow(0, 20);
+
+				service.applyEntryDeleted('entry-9'); // last slot of chunk 0
+
+				const result = await service.ensureWindow(0, 20);
+				expect(result[9].id).toBe('entry-10');
+				expect(result[10].id).toBe('entry-11');
+			});
+
+			it('should cascade insert at chunk boundary across multiple chunks', async () => {
+				await service.ensureWindow(0, 30);
+
+				const newEntry = createEntry('insert-boundary', 'Boundary');
+				service.applyEntryInserted(newEntry, 10); // first slot of chunk 1
+
+				const result = await service.ensureWindow(0, 30);
+				expect(result[10].id).toBe('insert-boundary');
+				// ensure original entries shifted but still ordered (entry-19 pushed toward chunk 2)
+				expect(result).toContainEqual(expect.objectContaining({ id: 'entry-19' }));
+			});
+
+			it('should handle insert then delete in adjacent chunks without duplicates', async () => {
+				await service.ensureWindow(0, 25);
+
+				const inserted = createEntry('insert-adjacent', 'Adj');
+				service.applyEntryInserted(inserted, 10); // at boundary
+				service.applyEntryDeleted('entry-15'); // next chunk
+
+				const result = await service.ensureWindow(0, 25);
+				const ids = result.map(e => e.id);
+				expect(new Set(ids).size).toBe(ids.length);
+				expect(ids).toContain('insert-adjacent');
+			});
+
+			it('should recover after transient fetch failure', async () => {
+				provider.failNextWindowForStart(0);
+				await expect(service.ensureWindow(0, 10)).rejects.toThrow('Transient fetch failure');
+
+				const result = await service.ensureWindow(0, 10);
+				expect(result).toHaveLength(10);
+			});
+
+			it('should handle window shift without stale chunk interference', async () => {
+				await service.ensureWindow(0, 15);
+				const firstWindow = await service.ensureWindow(0, 15);
+				expect(firstWindow[0].id).toBe('entry-0');
+
+				const shifted = await service.ensureWindow(20, 5);
+				expect(shifted[0].id).toBe('entry-20');
+				expect(shifted).not.toContainEqual(expect.objectContaining({ id: 'entry-0' }));
+			});
+
+			it('should handle delete then insert at same absolute index', async () => {
+				await service.ensureWindow(0, 20);
+
+				service.applyEntryDeleted('entry-7');
+				const replacement = createEntry('replacement-7', 'Repl');
+				service.applyEntryInserted(replacement, 7);
+
+				const result = await service.ensureWindow(0, 20);
+				expect(result[7].id).toBe('replacement-7');
+				expect(result).not.toContainEqual(expect.objectContaining({ id: 'entry-7' }));
+			});
+	});
+});
diff --git a/frontend/viewer/src/lib/services/chunk-cache-service.ts b/frontend/viewer/src/lib/services/chunk-cache-service.ts
new file mode 100644
index 0000000000..896045cb0e
--- /dev/null
+++ b/frontend/viewer/src/lib/services/chunk-cache-service.ts
@@ -0,0 +1,419 @@
+import type {IEntry} from '$lib/dotnet-types/generated-types/MiniLcm/Models/IEntry';
+
+/**
+ * Represents a fixed-size chunk of entries in the cache.
+ * Each chunk stores entries for a contiguous range of indices.
+ */
+interface Chunk {
+	/** Starting index of this chunk (0-based) */
+	start: number;
+	/** Ending index (exclusive) of this chunk */
+	endExclusive: number;
+	/** Cached entries in this chunk */
+	entries: IEntry[];
+	/** Current status: 'ready', 'loading', or 'stale' */
+	status: 'ready' | 'loading' | 'stale';
+}
+
+/**
+ * Callback for observing chunk cache changes.
+ */
+export interface ChunkCacheObserver {
+	/**
+	 * Called when a chunk is updated (entry inserted/updated/deleted).
+	 * index: the chunk index in the cache map
+	 */
+	onChunkChanged?: (chunkIndex: number) => void;
+	/**
+	 * Called when a new window of entries is ready (e.g., after ensureWindow completes).
+	 */
+	onWindowReady?: () => void;
+	/**
+	 * Called when an error occurs.
+	 */
+	onError?: (error: Error) => void;
+}
+
+/**
+ * Interface for the backend API that provides entry windows and row indices.
+ * This is typically implemented by an HTTP client talking to MiniLcm endpoints.
+ */
+export interface EntryWindowProvider {
+	/**
+	 * Fetch a window of entries.
+	 * start: 0-based offset
+	 * size: number of entries to fetch
+	 * Returns: { entries, firstIndex } where firstIndex is the 0-based start
+	 */
+	fetchWindow(start: number, size: number): Promise<{ entries: IEntry[]; firstIndex: number }>;
+
+	/**
+	 * Get the 0-based row index of a specific entry.
+	 * Typically called during jump-to-entry flow.
+	 */
+	fetchRowIndex(entryId: string): Promise<{ rowIndex: number; entry: IEntry }>;
+}
+
+/**
+ * ChunkCacheService manages chunk-based virtual scrolling.
+ *
+ * Responsibilities:
+ * - Maintain a map of chunks keyed by chunk index
+ * - Support ensureWindow(start, size) to fetch and cache entry windows
+ * - Apply entry updates/deletes/inserts with cascade rebalancing
+ * - Emit observable events for Svelte reactivity
+ *
+ * Chunk math:
+ * - Chunks are fixed-size (except the tail)
+ * - Chunk index = Math.floor(startIndex / chunkSize)
+ * - When deleting/inserting, cascade between chunks to maintain alignment
+ */
+export class ChunkCacheService {
+	private chunks = new Map<number, Chunk>();
+	private requestedWindow: { start: number; size: number } | null = null;
+	private pendingWindows = new Map<number, Promise<void>>();
+	private observers: ChunkCacheObserver[] = [];
+	private isLoading = false;
+
+	constructor(
+		private provider: EntryWindowProvider,
+		private chunkSize: number = 50
+	) {}
+
+	/**
+	 * Subscribe to cache change events.
+	 * Returns an unsubscribe function.
+	 */
+	subscribe(observer: ChunkCacheObserver): () => void {
+		this.observers.push(observer);
+		return () => {
+			const idx = this.observers.indexOf(observer);
+			if (idx >= 0) this.observers.splice(idx, 1);
+		};
+	}
+
+	/**
+	 * Ensure that a window of entries is loaded and ready.
+	 * - If chunks are already cached, returns immediately
+	 * - Otherwise, fetches from backend and fills chunks
+	 * - Emits onWindowReady when complete
+	 */
+	async ensureWindow(start: number, size: number): Promise<IEntry[]> {
+		this.requestedWindow = { start, size };
+
+		const chunkIndices = this.getChunkIndicesForWindow(start, size);
+		const missingChunks = chunkIndices.filter(idx => !this.chunks.has(idx));
+
+		if (missingChunks.length === 0) {
+			// All chunks already cached, return immediately
+			return this.extractWindow(start, size);
+		}
+
+		// Fetch missing chunks
+		for (const chunkIdx of missingChunks) {
+			// Avoid duplicate fetches by using a promise cache
+			if (!this.pendingWindows.has(chunkIdx)) {
+				const promise = this.fetchAndCacheChunk(chunkIdx);
+				this.pendingWindows.set(chunkIdx, promise);
+				void promise
+					.then(() => {
+						this.pendingWindows.delete(chunkIdx);
+					})
+					.catch((err: unknown) => {
+						this.pendingWindows.delete(chunkIdx);
+						this.notifyError(err instanceof Error ? err : new Error(String(err)));
+					});
+			}
+
+			// Wait for this chunk to be fetched
+			await this.pendingWindows.get(chunkIdx)!;
+		}
+
+		// All chunks are now ready
+		this.notifyWindowReady();
+		return this.extractWindow(start, size);
+	}
+
+	/**
+	 * Apply an entry update (modification to existing entry).
+	 * If the entry is cached, updates it in-place and emits onChunkChanged.
+	 */
+	applyEntryUpdated(entry: IEntry): void {
+		for (const [chunkIdx, chunk] of this.chunks) {
+			const idx = chunk.entries.findIndex(e => e.id === entry.id);
+			if (idx >= 0) {
+				chunk.entries[idx] = entry;
+				this.notifyChunkChanged(chunkIdx);
+				return;
+			}
+		}
+	}
+
+	/**
+	 * Apply an entry deletion.
+	 * - Removes entry from cache
+	 * - Cascades deletions to subsequent chunks (squeezes left)
+	 * - If cascade reaches a chunk outside the requested window, marks it stale
+	 * - May trigger a tail refill if visible chunk becomes short
+	 */
+	applyEntryDeleted(entryId: string): void {
+		for (const [chunkIdx, chunk] of this.chunks) {
+			const idx = chunk.entries.findIndex(e => e.id === entryId);
+			if (idx >= 0) {
+				// Found the entry, remove it
+				chunk.entries.splice(idx, 1);
+				this.notifyChunkChanged(chunkIdx);
+
+				// Cascade: pull entries from subsequent chunks
+				this.cascadeDelete(chunkIdx);
+				return;
+			}
+		}
+	}
+
+	/**
+	 * Apply an entry insertion at an absolute index.
+	 * - Inserts entry into the owning chunk
+	 * - Cascades the last element to the next chunk
+	 * - Continues cascade until a chunk outside requested window, then discards
+	 */
+	applyEntryInserted(entry: IEntry, absoluteIndex: number): void {
+		const chunkIdx = Math.floor(absoluteIndex / this.chunkSize);
+		const offsetInChunk = absoluteIndex % this.chunkSize;
+
+		// Ensure the chunk exists
+		if (!this.chunks.has(chunkIdx)) {
+			this.chunks.set(chunkIdx, {
+				start: chunkIdx * this.chunkSize,
+				endExclusive: (chunkIdx + 1) * this.chunkSize,
+				entries: [],
+				status: 'ready'
+			});
+		}
+
+		const chunk = this.chunks.get(chunkIdx)!;
+		chunk.entries.splice(offsetInChunk, 0, entry);
+		this.notifyChunkChanged(chunkIdx);
+
+		// Cascade: overflow pushes to next chunk
+		this.cascadeInsert(chunkIdx);
+	}
+
+	/**
+	 * Clear all cached chunks and reset state.
+	 */
+	clear(): void {
+		this.chunks.clear();
+		this.requestedWindow = null;
+		this.pendingWindows.clear();
+		this.isLoading = false;
+	}
+
+	// ===== PRIVATE HELPERS =====
+
+	/**
+	 * Get the chunk indices that cover the requested window.
+	 */
+	private getChunkIndicesForWindow(start: number, size: number): number[] {
+		const end = start + size;
+		const startChunk = Math.floor(start / this.chunkSize);
+		const endChunk = Math.floor((end - 1) / this.chunkSize) + 1;
+
+		const indices: number[] = [];
+		for (let i = startChunk; i < endChunk; i++) {
+			indices.push(i);
+		}
+		return indices;
+	}
+
+	/**
+	 * Fetch a single chunk from the backend and cache it.
+	 */
+	private async fetchAndCacheChunk(chunkIdx: number, chunkStartOverride?: number): Promise<void> {
+		const chunkStart = chunkStartOverride ?? chunkIdx * this.chunkSize;
+
+		// Mark as loading
+		const chunk: Chunk = {
+			start: chunkStart,
+			endExclusive: chunkStart + this.chunkSize,
+			entries: [],
+			status: 'loading'
+		};
+		this.chunks.set(chunkIdx, chunk);
+
+		try {
+			const { entries, firstIndex } = await this.provider.fetchWindow(chunkStart, this.chunkSize);
+			chunk.entries = entries;
+			chunk.status = 'ready';
+			// Align chunk boundaries based on actual firstIndex
+			chunk.start = firstIndex;
+			chunk.endExclusive = firstIndex + entries.length;
+			// Don't notify on initial fetch - only notify when data is explicitly modified
+		} catch (err) {
+			// Drop errored chunk so callers treat this range as uncached and retry later
+			this.chunks.delete(chunkIdx);
+			throw err;
+		}
+	}
+
+	/**
+	 * Extract a window from cached chunks.
+	 * Concatenates entries from relevant chunks in deterministic chunk-index order,
+	 * accounting for chunk start positions.
+	 */
+	private extractWindow(start: number, size: number): IEntry[] {
+		const result: IEntry[] = [];
+		const endIndex = start + size;
+
+		// Get chunk indices that should cover this window
+		const chunkIndices = this.getChunkIndicesForWindow(start, size);
+
+		// Iterate in deterministic chunk-index order to ensure consistent output
+		for (const chunkIdx of chunkIndices) {
+			const chunk = this.chunks.get(chunkIdx);
+			if (!chunk) {
+				// Gap in chunks - window is incomplete
+				break;
+			}
+
+			// Skip chunks that are completely before or after the window
+			if (chunk.endExclusive <= start || chunk.start >= endIndex) {
+				continue;
+			}
+
+			// Calculate the slice range within this chunk
+			const chunkStart = Math.max(0, start - chunk.start);
+			const chunkEnd = Math.min(chunk.entries.length, endIndex - chunk.start);
+
+			for (let i = chunkStart; i < chunkEnd; i++) {
+				result.push(chunk.entries[i]);
+			}
+		}
+
+		return result;
+	}
+
+	/**
+	 * Cascade deletions: when an entry is deleted, the first entry from the next chunk
+	 * moves into this chunk's empty slot. Updates chunk bounds and marks tail stale if needed.
+	 */
+	private cascadeDelete(chunkIdx: number): void {
+		const nextChunkIdx = chunkIdx + 1;
+		const nextChunk = this.chunks.get(nextChunkIdx);
+
+		if (!nextChunk || nextChunk.entries.length === 0) {
+			// No more entries to pull from next chunk
+			// Check if this chunk is the tail and is inside the visible window
+			const chunk = this.chunks.get(chunkIdx)!;
+			if (this.isChunkVisible(chunk) && chunk.entries.length < this.chunkSize && nextChunk) {
+				// Visible tail chunk is now short - mark stale and refill
+				chunk.status = 'stale';
+				this.refillVisibleTail(chunkIdx);
+			}
+			return;
+		}
+
+		// Pull the first entry from the next chunk into this chunk
+		const entryFromNext = nextChunk.entries.shift()!;
+		const chunk = this.chunks.get(chunkIdx)!;
+		chunk.entries.push(entryFromNext);
+
+		// Update next chunk's start position (entries shifted left)
+		nextChunk.start++;
+		nextChunk.endExclusive = nextChunk.start + nextChunk.entries.length;
+
+		this.notifyChunkChanged(nextChunkIdx);
+
+		// Continue cascading
+		this.cascadeDelete(nextChunkIdx);
+	}
+
+	/**
+	 * Cascade inserts: when an entry is inserted, the last entry overflows to the next chunk.
+	 * Discards overflow outside the requestedWindow to avoid accumulating stale data.
+	 * Updates chunk bounds for entries that moved.
+	 */
+	private cascadeInsert(chunkIdx: number): void {
+		const chunk = this.chunks.get(chunkIdx)!;
+
+		if (chunk.entries.length <= this.chunkSize) {
+			// Chunk is not oversized, no cascade needed
+			return;
+		}
+
+		// Pop the last entry and push to next chunk
+		const overflowEntry = chunk.entries.pop()!;
+
+		const nextChunkIdx = chunkIdx + 1;
+		let nextChunk = this.chunks.get(nextChunkIdx);
+
+		if (!nextChunk) {
+			// Check if next chunk is outside the visible window
+			if (this.requestedWindow && (nextChunkIdx * this.chunkSize) >= this.requestedWindow.start + this.requestedWindow.size) {
+				// Overflow outside window - discard it
+				return;
+			}
+			// Create next chunk if it doesn't exist and is inside window
+			nextChunk = {
+				start: nextChunkIdx * this.chunkSize,
+				endExclusive: (nextChunkIdx + 1) * this.chunkSize,
+				entries: [],
+				status: 'ready'
+			};
+			this.chunks.set(nextChunkIdx, nextChunk);
+		}
+
+		nextChunk.entries.unshift(overflowEntry);
+		// Update next chunk's start position (entries shifted right)
+		nextChunk.start = nextChunkIdx * this.chunkSize;
+		nextChunk.endExclusive = nextChunk.start + nextChunk.entries.length;
+
+		this.notifyChunkChanged(nextChunkIdx);
+
+		// Recursively cascade if next chunk is also oversized
+		this.cascadeInsert(nextChunkIdx);
+	}
+
+	// ===== TAIL REFILL =====
+
+	/**
+	 * Check if a chunk overlaps with the currently requested window.
+	 */
+	private isChunkVisible(chunk: Chunk): boolean {
+		if (!this.requestedWindow) return false;
+		const windowEnd = this.requestedWindow.start + this.requestedWindow.size;
+		return !(chunk.endExclusive <= this.requestedWindow.start || chunk.start >= windowEnd);
+	}
+
+	/**
+	 * When a visible tail chunk becomes short after a delete, refill it from the backend.
+	 */
+	private refillVisibleTail(chunkIdx: number): void {
+		const chunk = this.chunks.get(chunkIdx);
+		if (!chunk) return;
+
+		// Fire off a refill fetch for this chunk
+		const promise = this.fetchAndCacheChunk(chunkIdx, chunk.start)
+			.catch((err: unknown) => {
+				this.notifyError(err instanceof Error ? err : new Error(String(err)));
+			});
+		this.pendingWindows.set(chunkIdx, promise);
+		void promise.finally(() => {
+			this.pendingWindows.delete(chunkIdx);
+		});
+	}
+
+	// ===== NOTIFICATIONS =====
+
+	private notifyChunkChanged(chunkIdx: number): void {
+		this.observers.forEach(obs => obs.onChunkChanged?.(chunkIdx));
+	}
+
+	private notifyWindowReady(): void {
+		this.observers.forEach(obs => obs.onWindowReady?.());
+	}
+
+	private notifyError(error: Error): void {
+		this.observers.forEach(obs => obs.onError?.(error));
+	}
+}
diff --git a/frontend/viewer/src/project/demo/in-memory-demo-api.ts b/frontend/viewer/src/project/demo/in-memory-demo-api.ts
index a65f0178fe..002d5a98d9 100644
--- a/frontend/viewer/src/project/demo/in-memory-demo-api.ts
+++ b/frontend/viewer/src/project/demo/in-memory-demo-api.ts
@@ -5,6 +5,7 @@ import {
   type IComplexFormComponent,
   type IComplexFormType,
   type IEntry,
+  type IEntriesWindow,
   type IExampleSentence,
   type IFilterQueryOptions,
   type IMiniLcmJsInvokable,
@@ -44,6 +45,7 @@ const complexFormTypes = entries
   .filter((value, index, all) => all.findIndex(v2 => v2.id === value.id) === index);
 
 function filterEntries(entries: IEntry[], query: string): IEntry[] {
+  const q = query.toLowerCase();
   return entries.filter(entry =>
     [
       ...Object.values(entry.lexemeForm ?? {}),
@@ -51,7 +53,7 @@ function filterEntries(entries: IEntry[], query: string): IEntry[] {
       ...entry.senses.flatMap(sense => [
         ...Object.values(sense.gloss ?? {}),
       ]),
-    ].some(value => value?.toLowerCase().includes(query.toLowerCase())));
+    ].some(value => value?.toLowerCase().startsWith(q)));
 }
 
 export const mockFwLiteConfig: IFwLiteConfig = {
@@ -91,6 +93,46 @@ export class InMemoryDemoApi implements IMiniLcmJsInvokable {
     return Promise.resolve(entries.length);
   }
 
+  async getEntriesWindow(query?: string, options?: IQueryOptions, targetEntryId?: string): Promise<IEntriesWindow> {
+    await delay(300);
+    const allEntries = this.queryEntriesUnpaged(query, options);
+    const totalCount = allEntries.length;
+
+    let offset = options?.offset ?? 0;
+    const count = options?.count ?? 100;
+    let targetIndex: number | undefined = undefined;
+
+    // If targetEntryId is provided, find it and center the window around it
+    if (targetEntryId) {
+      const targetGlobalIndex = allEntries.findIndex(e => e.id === targetEntryId);
+      if (targetGlobalIndex !== -1) {
+        // Center the window around the target entry
+        offset = Math.max(0, targetGlobalIndex - Math.floor(count / 2));
+        // Adjust if we're near the end
+        if (offset + count > totalCount) {
+          offset = Math.max(0, totalCount - count);
+        }
+        // Calculate the index of the target within the returned window
+        targetIndex = targetGlobalIndex - offset;
+      }
+    }
+
+    const entries = allEntries.slice(offset, offset + count);
+    console.log(`[DemoAPI] getEntriesWindow: totalCount=${totalCount}, offset=${offset}, count=${count}, returning=${entries.length}, targetEntryId=${targetEntryId}, targetIndex=${targetIndex}`);
+    return {
+      entries,
+      totalCount,
+      offset,
+      targetIndex,
+    };
+  }
+
+  async getEntryIndex(entryId: string, query?: string, options?: IFilterQueryOptions): Promise<number> {
+    await delay(100);
+    const entries = this.getFilteredSortedEntries(query, options);
+    return entries.findIndex(e => e.id === entryId);
+  }
+
   public static newProjectContext() {
     const projectContext = new ProjectContext();
     projectContext.setup({api: new InMemoryDemoApi(projectContext), projectName, projectCode: projectName});
@@ -213,6 +255,40 @@ export class InMemoryDemoApi implements IMiniLcmJsInvokable {
       .slice(options.offset, options.offset + options.count);
   }
 
+  // Returns filtered and sorted entries without pagination (for windowed queries)
+  private queryEntriesUnpaged(query: string | undefined, options: IQueryOptions | undefined): IEntry[] {
+    const entries = this.getFilteredEntries(query, options);
+
+    if (!options) return entries;
+    const defaultWs = writingSystems.vernacular[0].wsId;
+    const sortWs = pickWs(options.order.writingSystem, defaultWs);
+    return entries
+      .sort((e1, e2) => {
+        const v1 = this.#writingSystemService.headword(e1, sortWs);
+        const v2 = this.#writingSystemService.headword(e2, sortWs);
+        if (!v2) return -1;
+        if (!v1) return 1;
+        let compare = v1.localeCompare(v2, sortWs);
+        if (compare == 0) compare = e1.id.localeCompare(e2.id);
+        return options.order.ascending ? compare : -compare;
+      });
+  }
+
+  // Returns filtered and sorted entries for index lookup
+  private getFilteredSortedEntries(query?: string, options?: IFilterQueryOptions): IEntry[] {
+    const entries = this.getFilteredEntries(query, options);
+    const defaultWs = writingSystems.vernacular[0].wsId;
+    // For getEntryIndex, we just need filtering, but we'll also sort for consistency
+    // Note: IFilterQueryOptions doesn't have order, so we use default sort
+    return entries.sort((e1, e2) => {
+      const v1 = this.#writingSystemService.headword(e1, defaultWs);
+      const v2 = this.#writingSystemService.headword(e2, defaultWs);
+      if (!v2) return -1;
+      if (!v1) return 1;
+      return v1.localeCompare(v2, defaultWs);
+    });
+  }
+
   private getFilteredEntries(query?: string, options?: IFilterQueryOptions): IEntry[] {
     let entries = this._Entries();
     if (query) entries = filterEntries(entries, query);

From c19b768fc9250518e9a20eaf799d5fcdc5779439 Mon Sep 17 00:00:00 2001
From: Tim Haasdyk <tim_haasdyk@sil.org>
Date: Fri, 16 Jan 2026 15:48:15 +0100
Subject: [PATCH 03/42] Add Delayed component to wrap VList items

---
 .../viewer/src/lib/components/Delayed.svelte  |  97 ++++++++++++
 .../stories/primitives/delayed.stories.svelte | 140 ++++++++++++++++++
 2 files changed, 237 insertions(+)
 create mode 100644 frontend/viewer/src/lib/components/Delayed.svelte
 create mode 100644 frontend/viewer/src/stories/primitives/delayed.stories.svelte

diff --git a/frontend/viewer/src/lib/components/Delayed.svelte b/frontend/viewer/src/lib/components/Delayed.svelte
new file mode 100644
index 0000000000..db51f3043e
--- /dev/null
+++ b/frontend/viewer/src/lib/components/Delayed.svelte
@@ -0,0 +1,97 @@
+<!--
+	Delayed loading component that checks cache first, then delays actual loading.
+	Useful for virtual scrolling where items might be destroyed before loading completes.
+
+	Usage:
+	<Delayed
+		load={() => fetchEntry(id)}
+		getCached={() => cache.get(id)}
+		delay={150}
+	>
+		{#snippet children(state)}
+			{#if state.loading}
+				<Skeleton />
+			{:else if state.error}
+				<ErrorDisplay error={state.error} />
+			{:else}
+				<EntryView entry={state.current} />
+			{/if}
+		{/snippet}
+	</Delayed>
+-->
+<script lang="ts" generics="T">
+	import type {Snippet} from 'svelte';
+	import {watch} from 'runed';
+
+	type DelayedState<T> = {
+		loading: boolean;
+		current: T | undefined;
+		error: unknown | undefined;
+	};
+
+	interface Props<T> {
+		load: () => Promise<T>;
+		getCached?: () => T | undefined;
+		delay?: number;
+		children: Snippet<[state: DelayedState<T>]>;
+	}
+
+	let {
+		load,
+		getCached,
+		delay = 150,
+		children
+	}: Props<T> = $props();
+
+	let state = $state<DelayedState<T>>({
+		loading: true,
+		current: undefined,
+		error: undefined
+	});
+
+	watch(() => [load, getCached], () => {
+		cancelLoading();
+		reset();
+
+		// Check cache first
+		if (getCached) {
+			const cached = getCached();
+			if (cached !== undefined) {
+				state = { loading: false, current: cached, error: undefined };
+				return;
+			}
+		}
+
+		// Start delayed loading
+		startLoading();
+
+		return () => cancelLoading();
+	});
+
+  function reset() {
+    state = { loading: true, current: undefined, error: undefined };
+  }
+
+	let timeoutId: ReturnType<typeof setTimeout> | undefined;
+
+	function startLoading() {
+		reset();
+		timeoutId = setTimeout(() => void doLoad(), delay);
+	}
+
+  async function doLoad() {
+    try {
+      const result = await load();
+      state = { loading: false, current: result, error: undefined };
+    } catch (error) {
+      state = { loading: false, current: undefined, error };
+    }
+  }
+
+	function cancelLoading() {
+    clearTimeout(timeoutId);
+    timeoutId = undefined;
+	}
+</script>
+
+{@render children(state)}
diff --git a/frontend/viewer/src/stories/primitives/delayed.stories.svelte b/frontend/viewer/src/stories/primitives/delayed.stories.svelte
new file mode 100644
index 0000000000..284cc10326
--- /dev/null
+++ b/frontend/viewer/src/stories/primitives/delayed.stories.svelte
@@ -0,0 +1,140 @@
+<script module lang="ts">
+  import {defineMeta} from '@storybook/addon-svelte-csf';
+  import Delayed from '$lib/components/Delayed.svelte';
+  import Loading from '$lib/components/Loading.svelte';
+  import {delay} from '$lib/utils/time';
+  import {VList} from 'virtua/svelte';
+  import {SvelteMap} from 'svelte/reactivity';
+
+  const { Story } = defineMeta({
+    component: Delayed,
+    title: 'Primitives/Delayed',
+    args: {
+      delay: 1000,
+    }
+  });
+
+  // Mock service for complex story
+  const cache = new SvelteMap<number, string>();
+  async function loadItem(id: number) {
+    const cached = cache.get(id);
+    if (cached) return cached;
+    await delay(300 + Math.random() * 400);
+    const val = `Loaded Item #${id}`;
+    cache.set(id, val);
+    return val;
+  }
+
+  const items = Array.from({ length: 1000 }, (_, i) => i);
+</script>
+
+<Story name="Uncached (Delayed)">
+  {#snippet template(args)}
+    {@const simulatedLoadTime = 500}
+    <div class="p-4 border rounded bg-card">
+      <Delayed
+        load={async () => {
+          await delay(simulatedLoadTime);
+          return '😎🎈';
+        }}
+        delay={args.delay}
+      >
+        {#snippet children(state)}
+        {@const start = Date.now()}
+          {#if state.loading}
+            <div class="flex items-center gap-2 text-muted-foreground italic">
+              <Loading />
+              Waiting {args.delay}ms before loading and {simulatedLoadTime}ms to simulate load...
+            </div>
+          {:else if state.error}
+            <div class="text-destructive">Error: {state.error}</div>
+          {:else}
+            {@const end = Date.now()}
+            <div class="text-primary font-bold">Loaded: {state.current} (in {end - start}ms)</div>
+          {/if}
+        {/snippet}
+      </Delayed>
+    </div>
+  {/snippet}
+</Story>
+
+<Story name="Cached (Immediate)">
+  {#snippet template(args)}
+    <div class="p-4 border rounded bg-card">
+      <Delayed
+        load={() => Promise.resolve('Should not be called')}
+        getCached={() => 'Instant Cached Data'}
+        delay={args.delay}
+      >
+        {#snippet children(state)}
+          {#if state.loading}
+            <div class="text-muted-foreground italic">If you see this, cache didn't work...</div>
+          {:else}
+            <div class="text-primary font-bold">From Cache: {state.current}</div>
+          {/if}
+        {/snippet}
+      </Delayed>
+    </div>
+  {/snippet}
+</Story>
+
+<Story name="Error State">
+  {#snippet template(args)}
+    <div class="p-4 border rounded bg-card">
+      <Delayed
+        load={async () => {
+          await delay(500);
+          throw new Error('Failed to fetch data!');
+        }}
+        delay={args.delay}
+      >
+        {#snippet children(state)}
+          {#if state.loading}
+            <Loading />
+          {:else if state.error}
+            <div class="text-destructive font-bold flex items-center gap-1">
+              <div class="i-mdi-alert-circle"></div>
+              {(state.error as Error).message}
+            </div>
+          {:else}
+            <div>{state.current}</div>
+          {/if}
+        {/snippet}
+      </Delayed>
+    </div>
+  {/snippet}
+</Story>
+
+<Story name="Virtual List (Stress Test)" args={{ delay: 250 }}>
+  {#snippet template(args)}
+    <div class="h-[400px] border rounded bg-background overflow-hidden flex flex-col">
+      <div class="p-2 border-b bg-muted text-xs font-medium">
+        Scroll quickly to see placeholders. Items are cached after loading.
+      </div>
+      <VList data={items} class="flex-1">
+        {#snippet children(id: number)}
+          <div class="h-10 border-b flex items-center px-4 hover:bg-accent/50 transition-colors">
+            <Delayed
+              load={() => loadItem(id)}
+              getCached={() => cache.get(id)}
+              delay={args.delay}
+            >
+              {#snippet children(state)}
+                {#if state.loading}
+                  <div class="flex items-center gap-2 text-muted-foreground text-sm italic">
+                    <Loading class="size-3" />
+                    <span>Loading #{id}...</span>
+                  </div>
+                {:else if state.error}
+                  <span class="text-destructive text-sm italic">Error loading #{id}</span>
+                {:else}
+                  <span class="text-sm font-medium">{state.current}</span>
+                {/if}
+              {/snippet}
+            </Delayed>
+          </div>
+        {/snippet}
+      </VList>
+    </div>
+  {/snippet}
+</Story>

From 8ea5a966428451a5a1afd4e7db41c6c19d025dad Mon Sep 17 00:00:00 2001
From: Tim Haasdyk <tim_haasdyk@sil.org>
Date: Fri, 16 Jan 2026 17:05:57 +0100
Subject: [PATCH 04/42] Move SortMenu and extract options

---
 frontend/viewer/src/locales/en.po                    |  6 +++---
 frontend/viewer/src/locales/es.po                    |  6 +++---
 frontend/viewer/src/locales/fr.po                    |  6 +++---
 frontend/viewer/src/locales/id.po                    |  6 +++---
 frontend/viewer/src/locales/ko.po                    |  6 +++---
 frontend/viewer/src/locales/ms.po                    |  6 +++---
 frontend/viewer/src/locales/sw.po                    |  6 +++---
 frontend/viewer/src/locales/vi.po                    |  6 +++---
 frontend/viewer/src/project/browse/BrowseView.svelte |  3 ++-
 .../viewer/src/project/browse/EntriesList.svelte     |  2 +-
 .../src/project/browse/{ => sort}/SortMenu.svelte    | 12 +++---------
 frontend/viewer/src/project/browse/sort/options.ts   |  9 +++++++++
 12 files changed, 39 insertions(+), 35 deletions(-)
 rename frontend/viewer/src/project/browse/{ => sort}/SortMenu.svelte (90%)
 create mode 100644 frontend/viewer/src/project/browse/sort/options.ts

diff --git a/frontend/viewer/src/locales/en.po b/frontend/viewer/src/locales/en.po
index 9d9a6587dd..b377651eee 100644
--- a/frontend/viewer/src/locales/en.po
+++ b/frontend/viewer/src/locales/en.po
@@ -245,7 +245,7 @@ msgid "Author:"
 msgstr "Author:"
 
 #. Sort option
-#: src/project/browse/SortMenu.svelte
+#: src/project/browse/sort/SortMenu.svelte
 msgid "Auto"
 msgstr "Auto"
 
@@ -255,7 +255,7 @@ msgid "Auto syncing"
 msgstr "Auto syncing"
 
 #. Sort option
-#: src/project/browse/SortMenu.svelte
+#: src/project/browse/sort/SortMenu.svelte
 msgid "Best match"
 msgstr "Best match"
 
@@ -886,7 +886,7 @@ msgstr "green"
 #. Sort option
 #. Sort results by headword/main entry form (alphabetically)
 #. Related: "Auto" (default smart sort), "Best match" (relevance)
-#: src/project/browse/SortMenu.svelte
+#: src/project/browse/sort/SortMenu.svelte
 msgid "Headword"
 msgstr "Headword"
 
diff --git a/frontend/viewer/src/locales/es.po b/frontend/viewer/src/locales/es.po
index 89450f8156..16578f5cc0 100644
--- a/frontend/viewer/src/locales/es.po
+++ b/frontend/viewer/src/locales/es.po
@@ -250,7 +250,7 @@ msgid "Author:"
 msgstr "Autor:"
 
 #. Sort option
-#: src/project/browse/SortMenu.svelte
+#: src/project/browse/sort/SortMenu.svelte
 msgid "Auto"
 msgstr "Auto"
 
@@ -260,7 +260,7 @@ msgid "Auto syncing"
 msgstr "Sincronización automática"
 
 #. Sort option
-#: src/project/browse/SortMenu.svelte
+#: src/project/browse/sort/SortMenu.svelte
 msgid "Best match"
 msgstr "Mejor partido"
 
@@ -891,7 +891,7 @@ msgstr ""
 #. Sort option
 #. Sort results by headword/main entry form (alphabetically)
 #. Related: "Auto" (default smart sort), "Best match" (relevance)
-#: src/project/browse/SortMenu.svelte
+#: src/project/browse/sort/SortMenu.svelte
 msgid "Headword"
 msgstr "Palabra clave"
 
diff --git a/frontend/viewer/src/locales/fr.po b/frontend/viewer/src/locales/fr.po
index 03f1e0d25d..e5a7fa7a9c 100644
--- a/frontend/viewer/src/locales/fr.po
+++ b/frontend/viewer/src/locales/fr.po
@@ -250,7 +250,7 @@ msgid "Author:"
 msgstr "Auteur :"
 
 #. Sort option
-#: src/project/browse/SortMenu.svelte
+#: src/project/browse/sort/SortMenu.svelte
 msgid "Auto"
 msgstr "Auto"
 
@@ -260,7 +260,7 @@ msgid "Auto syncing"
 msgstr "Synchronisation automatique"
 
 #. Sort option
-#: src/project/browse/SortMenu.svelte
+#: src/project/browse/sort/SortMenu.svelte
 msgid "Best match"
 msgstr "Meilleure correspondance"
 
@@ -891,7 +891,7 @@ msgstr ""
 #. Sort option
 #. Sort results by headword/main entry form (alphabetically)
 #. Related: "Auto" (default smart sort), "Best match" (relevance)
-#: src/project/browse/SortMenu.svelte
+#: src/project/browse/sort/SortMenu.svelte
 msgid "Headword"
 msgstr "Entrée de dictionnaire"
 
diff --git a/frontend/viewer/src/locales/id.po b/frontend/viewer/src/locales/id.po
index db85dd2c8c..6cf0fe0732 100644
--- a/frontend/viewer/src/locales/id.po
+++ b/frontend/viewer/src/locales/id.po
@@ -250,7 +250,7 @@ msgid "Author:"
 msgstr "Penulis:"
 
 #. Sort option
-#: src/project/browse/SortMenu.svelte
+#: src/project/browse/sort/SortMenu.svelte
 msgid "Auto"
 msgstr "Otomatis"
 
@@ -260,7 +260,7 @@ msgid "Auto syncing"
 msgstr "Sinkronisasi otomatis"
 
 #. Sort option
-#: src/project/browse/SortMenu.svelte
+#: src/project/browse/sort/SortMenu.svelte
 msgid "Best match"
 msgstr "Pertandingan terbaik"
 
@@ -891,7 +891,7 @@ msgstr ""
 #. Sort option
 #. Sort results by headword/main entry form (alphabetically)
 #. Related: "Auto" (default smart sort), "Best match" (relevance)
-#: src/project/browse/SortMenu.svelte
+#: src/project/browse/sort/SortMenu.svelte
 msgid "Headword"
 msgstr "Lema"
 
diff --git a/frontend/viewer/src/locales/ko.po b/frontend/viewer/src/locales/ko.po
index a68b78f0dd..5ed25b186a 100644
--- a/frontend/viewer/src/locales/ko.po
+++ b/frontend/viewer/src/locales/ko.po
@@ -250,7 +250,7 @@ msgid "Author:"
 msgstr "작성자:"
 
 #. Sort option
-#: src/project/browse/SortMenu.svelte
+#: src/project/browse/sort/SortMenu.svelte
 msgid "Auto"
 msgstr "자동"
 
@@ -260,7 +260,7 @@ msgid "Auto syncing"
 msgstr "자동 동기화"
 
 #. Sort option
-#: src/project/browse/SortMenu.svelte
+#: src/project/browse/sort/SortMenu.svelte
 msgid "Best match"
 msgstr "베스트 매치"
 
@@ -891,7 +891,7 @@ msgstr ""
 #. Sort option
 #. Sort results by headword/main entry form (alphabetically)
 #. Related: "Auto" (default smart sort), "Best match" (relevance)
-#: src/project/browse/SortMenu.svelte
+#: src/project/browse/sort/SortMenu.svelte
 msgid "Headword"
 msgstr "헤드워드"
 
diff --git a/frontend/viewer/src/locales/ms.po b/frontend/viewer/src/locales/ms.po
index 7305805a39..151e7b8155 100644
--- a/frontend/viewer/src/locales/ms.po
+++ b/frontend/viewer/src/locales/ms.po
@@ -250,7 +250,7 @@ msgid "Author:"
 msgstr "Pengarang:"
 
 #. Sort option
-#: src/project/browse/SortMenu.svelte
+#: src/project/browse/sort/SortMenu.svelte
 msgid "Auto"
 msgstr "Auto"
 
@@ -260,7 +260,7 @@ msgid "Auto syncing"
 msgstr "Segerakkan automatik"
 
 #. Sort option
-#: src/project/browse/SortMenu.svelte
+#: src/project/browse/sort/SortMenu.svelte
 msgid "Best match"
 msgstr "Padanan terbaik"
 
@@ -891,7 +891,7 @@ msgstr "hijau"
 #. Sort option
 #. Sort results by headword/main entry form (alphabetically)
 #. Related: "Auto" (default smart sort), "Best match" (relevance)
-#: src/project/browse/SortMenu.svelte
+#: src/project/browse/sort/SortMenu.svelte
 msgid "Headword"
 msgstr "Kata Utama"
 
diff --git a/frontend/viewer/src/locales/sw.po b/frontend/viewer/src/locales/sw.po
index 13cca30194..cda185daeb 100644
--- a/frontend/viewer/src/locales/sw.po
+++ b/frontend/viewer/src/locales/sw.po
@@ -250,7 +250,7 @@ msgid "Author:"
 msgstr "Mwandishi:"
 
 #. Sort option
-#: src/project/browse/SortMenu.svelte
+#: src/project/browse/sort/SortMenu.svelte
 msgid "Auto"
 msgstr "Otomatiki"
 
@@ -260,7 +260,7 @@ msgid "Auto syncing"
 msgstr "Kuoanisha otomatiki"
 
 #. Sort option
-#: src/project/browse/SortMenu.svelte
+#: src/project/browse/sort/SortMenu.svelte
 msgid "Best match"
 msgstr "Ujumbe bora"
 
@@ -891,7 +891,7 @@ msgstr "kijani"
 #. Sort option
 #. Sort results by headword/main entry form (alphabetically)
 #. Related: "Auto" (default smart sort), "Best match" (relevance)
-#: src/project/browse/SortMenu.svelte
+#: src/project/browse/sort/SortMenu.svelte
 msgid "Headword"
 msgstr "Neno la kichwa"
 
diff --git a/frontend/viewer/src/locales/vi.po b/frontend/viewer/src/locales/vi.po
index f7a6e92b35..2b8a48ad0f 100644
--- a/frontend/viewer/src/locales/vi.po
+++ b/frontend/viewer/src/locales/vi.po
@@ -250,7 +250,7 @@ msgid "Author:"
 msgstr "Tác giả:"
 
 #. Sort option
-#: src/project/browse/SortMenu.svelte
+#: src/project/browse/sort/SortMenu.svelte
 msgid "Auto"
 msgstr "Tự động"
 
@@ -260,7 +260,7 @@ msgid "Auto syncing"
 msgstr "Đang đồng bộ tự động"
 
 #. Sort option
-#: src/project/browse/SortMenu.svelte
+#: src/project/browse/sort/SortMenu.svelte
 msgid "Best match"
 msgstr "Khớp tốt nhất"
 
@@ -891,7 +891,7 @@ msgstr ""
 #. Sort option
 #. Sort results by headword/main entry form (alphabetically)
 #. Related: "Auto" (default smart sort), "Best match" (relevance)
-#: src/project/browse/SortMenu.svelte
+#: src/project/browse/sort/SortMenu.svelte
 msgid "Headword"
 msgstr "Từ đầu mục"
 
diff --git a/frontend/viewer/src/project/browse/BrowseView.svelte b/frontend/viewer/src/project/browse/BrowseView.svelte
index 1b1abb678d..10f51ee729 100644
--- a/frontend/viewer/src/project/browse/BrowseView.svelte
+++ b/frontend/viewer/src/project/browse/BrowseView.svelte
@@ -13,7 +13,8 @@
   import {useCurrentView} from '$lib/views/view-service';
   import IfOnce from '$lib/components/if-once/if-once.svelte';
   import {SortField, type IPartOfSpeech, type ISemanticDomain} from '$lib/dotnet-types';
-  import SortMenu, {type SortConfig} from './SortMenu.svelte';
+  import SortMenu from './sort/SortMenu.svelte';
+  import type {SortConfig} from './sort/options';
   import {useProjectContext} from '$project/project-context.svelte';
   import type {EntryListViewMode} from './EntryListViewOptions.svelte';
   import EntryListViewOptions from './EntryListViewOptions.svelte';
diff --git a/frontend/viewer/src/project/browse/EntriesList.svelte b/frontend/viewer/src/project/browse/EntriesList.svelte
index 80e903dd07..a934e19212 100644
--- a/frontend/viewer/src/project/browse/EntriesList.svelte
+++ b/frontend/viewer/src/project/browse/EntriesList.svelte
@@ -14,7 +14,7 @@
   import EntryMenu from './EntryMenu.svelte';
   import FabContainer from '$lib/components/fab/fab-container.svelte';
   import {VList, type VListHandle} from 'virtua/svelte';
-  import type {SortConfig} from './SortMenu.svelte';
+  import type {SortConfig} from './sort/options';
   import {AppNotification} from '$lib/notifications/notifications';
   import {Icon} from '$lib/components/ui/icon';
   import {useProjectContext} from '$project/project-context.svelte';
diff --git a/frontend/viewer/src/project/browse/SortMenu.svelte b/frontend/viewer/src/project/browse/sort/SortMenu.svelte
similarity index 90%
rename from frontend/viewer/src/project/browse/SortMenu.svelte
rename to frontend/viewer/src/project/browse/sort/SortMenu.svelte
index d7851975e9..81a7585342 100644
--- a/frontend/viewer/src/project/browse/SortMenu.svelte
+++ b/frontend/viewer/src/project/browse/sort/SortMenu.svelte
@@ -1,6 +1,6 @@
 <script lang="ts" module>
   import {SortField} from '$lib/dotnet-types';
-  import {msg, t} from 'svelte-i18n-lingui';
+  import {msg} from 'svelte-i18n-lingui';
   import type {IconClass} from '$lib/icon-class';
 
   export type SortDirection = 'asc' | 'desc';
@@ -16,22 +16,16 @@
       desc: 'i-mdi-sort-alphabetical-descending'
     }
   };
-
-  export const sortOptions = [
-    {field: SortField.SearchRelevance, dir: 'asc'},
-    {field: SortField.Headword, dir: 'asc'},
-    {field: SortField.Headword, dir: 'desc'}
-  ] as const;
-
-  export type SortConfig = typeof sortOptions[number];
 </script>
 
 <script lang="ts">
+  import {t} from 'svelte-i18n-lingui';
   import { badgeVariants } from '$lib/components/ui/badge';
   import * as ResponsiveMenu from '$lib/components/responsive-menu';
   import {cn} from '$lib/utils';
   import {watch, type Getter} from 'runed';
   import {Icon} from '$lib/components/ui/icon';
+  import {sortOptions, type SortConfig} from './options';
 
   type Props = {
     value?: SortConfig;
diff --git a/frontend/viewer/src/project/browse/sort/options.ts b/frontend/viewer/src/project/browse/sort/options.ts
new file mode 100644
index 0000000000..92ed7e7682
--- /dev/null
+++ b/frontend/viewer/src/project/browse/sort/options.ts
@@ -0,0 +1,9 @@
+import {SortField} from '$lib/dotnet-types';
+
+export const sortOptions = [
+  {field: SortField.SearchRelevance, dir: 'asc'},
+  {field: SortField.Headword, dir: 'asc'},
+  {field: SortField.Headword, dir: 'desc'}
+] as const;
+
+export type SortConfig = typeof sortOptions[number];

From 486cb63db1a2ab1f6c364eed22f65f6bdcfb9c79 Mon Sep 17 00:00:00 2001
From: Tim Haasdyk <tim_haasdyk@sil.org>
Date: Fri, 16 Jan 2026 17:06:28 +0100
Subject: [PATCH 05/42] Temp virtual scrolling entry loader plan

---
 .../src/lib/services/ENTRY_LOADER_PLAN.md     | 133 ++++++++++++++++++
 1 file changed, 133 insertions(+)
 create mode 100644 frontend/viewer/src/lib/services/ENTRY_LOADER_PLAN.md

diff --git a/frontend/viewer/src/lib/services/ENTRY_LOADER_PLAN.md b/frontend/viewer/src/lib/services/ENTRY_LOADER_PLAN.md
new file mode 100644
index 0000000000..6348492527
--- /dev/null
+++ b/frontend/viewer/src/lib/services/ENTRY_LOADER_PLAN.md
@@ -0,0 +1,133 @@
+# Entry Loader Service Plan
+
+## Overview
+
+Refactor `EntriesList.svelte` to use virtual scrolling with on-demand entry loading via the new `<Delayed>` component.
+
+## Goals
+
+- **Performance**: Fast initial render using count-only fetch
+- **Memory efficiency**: Only cache entries in visible/nearby batches
+- **Smooth UX**: Skeleton placeholders during load, instant display of cached entries
+
+## Architecture
+
+### V1 (Current Implementation)
+
+1. **Fetch count** on mount / filter change
+2. **VList renders indices**: `Array.from({length: count}, (_, i) => i)`
+3. **Each item wrapped in `<Delayed>`**:
+   - `getCached`: Returns entry from cache by index
+   - `load`: Fetches batch containing index, caches all entries in batch
+4. **Event handling** (simple):
+   - `onEntryDeleted`: If in cache → remove + shift indices. Otherwise → full reset.
+   - `onEntryUpdated`: If in cache → update. Otherwise → full reset.
+
+### V2 (Future Enhancement)
+
+Add `getEntryIndex(entryId, queryOptions)` API endpoint to enable:
+- Jump-to-entry by ID
+- Smart insert for new entries (know exact position)
+- Avoid full reset on events for entries not in cache
+
+## Data Structures
+
+```typescript
+class EntryLoaderService {
+  // Reactive state
+  totalCount: number | undefined;
+  loading: boolean;
+  error: Error | undefined;
+
+  // Cache (private)
+  #entryCache: Map<number, IEntry>;      // index → entry
+  #idToIndex: Map<string, number>;       // id → index (built incrementally)
+  #pendingBatches: Map<number, Promise>; // batch# → pending fetch
+
+  // Config
+  readonly batchSize = 50;
+}
+```
+
+## Batch Loading Logic
+
+```
+Given index N:
+  batchNumber = floor(N / batchSize)
+  offset = batchNumber * batchSize
+
+  If batch not loaded and not pending:
+    Start fetch for entries with { offset, count: batchSize }
+    Store promise in pendingBatches
+    On resolve: cache all returned entries at their indices
+
+  Return entry from cache (or undefined if not yet loaded)
+```
+
+## Event Handling (V1)
+
+| Event | In Cache? | Action |
+|-------|-----------|--------|
+| Delete | Yes | Remove from cache, shift subsequent indices, decrement count |
+| Delete | No | Full reset (refetch count, clear cache) |
+| Update | Yes | Update cache entry |
+| Update | No | Full reset |
+
+## Future: Event Handling (V2)
+
+| Event | Action |
+|-------|--------|
+| Delete in cache | Remove, shift indices, decrement count |
+| Delete not in cache | Full reset (can't query deleted entry's position) |
+| Add/Update | Call `getEntryIndex()` → insert at position or ignore if outside loaded batches |
+
+## Answers to Design Questions
+
+### Should we prefetch adjacent batches for smoother scrolling?
+No. VList has a `bufferSize` prop that preloads items beyond the visible area. This implicitly triggers `<Delayed>` components to load, which handles prefetching for us.
+
+### How to handle `selectNextEntry()` when next entry isn't loaded yet?
+Make `selectNextEntry()` async. It should:
+1. Check if next entry is in cache → return immediately
+2. Otherwise → call `loadEntryByIndex(nextIndex)` and await before returning
+
+This mirrors the `<Delayed>` component's `getCached` / `load` pattern.
+
+### Cache eviction policy for very long lists?
+Not needed for V1. Memory is not a primary concern — performance is. We can revisit if this becomes an issue on low-memory devices.
+
+## Migration Notes
+
+### `EntriesList.svelte` Changes
+- Remove: `loadingUndebounced`, `loading`, `entriesResource`, `fetchCurrentEntries`, `useDebounce`
+- Add: `EntryLoaderService` instantiation
+- Change: VList data from `entries` to index array
+- Change: `selectNextEntry()` becomes async
+
+### API Surface of `EntryLoaderService`
+
+```typescript
+// Construction
+constructor(deps: {
+  miniLcmApi: () => IMiniLcmApi | undefined;
+  search: () => string;
+  sort: () => SortConfig | undefined;
+  gridifyFilter: () => string | undefined;
+})
+
+// Reactive state (read-only)
+readonly totalCount: number | undefined;
+readonly loading: boolean;
+readonly error: Error | undefined;
+
+// Core methods
+getEntryByIndex(index: number): IEntry | undefined;       // sync, from cache
+loadEntryByIndex(index: number): Promise<IEntry>;         // async, fetches batch if needed
+loadCount(): Promise<void>;                               // fetches total count
+
+// Event handling
+getIndexById(id: string): number | undefined;             // from incremental id→index map
+removeEntryById(id: string): void;                        // handles delete
+updateEntry(entry: IEntry): void;                         // handles update
+reset(): void;                                            // full reset
+```

From 512faf2d0d541d44c629c050ef494be1c420de16 Mon Sep 17 00:00:00 2001
From: Tim Haasdyk <tim_haasdyk@sil.org>
Date: Fri, 16 Jan 2026 17:06:45 +0100
Subject: [PATCH 06/42] Add entry loader service

---
 .../services/entry-loader-service.svelte.ts   | 300 ++++++++++++++++++
 1 file changed, 300 insertions(+)
 create mode 100644 frontend/viewer/src/lib/services/entry-loader-service.svelte.ts

diff --git a/frontend/viewer/src/lib/services/entry-loader-service.svelte.ts b/frontend/viewer/src/lib/services/entry-loader-service.svelte.ts
new file mode 100644
index 0000000000..16cd8edebf
--- /dev/null
+++ b/frontend/viewer/src/lib/services/entry-loader-service.svelte.ts
@@ -0,0 +1,300 @@
+import {SvelteMap, SvelteSet} from 'svelte/reactivity';
+
+import type {IEntry} from '$lib/dotnet-types';
+import type {IFilterQueryOptions} from '$lib/dotnet-types/generated-types/MiniLcm/IFilterQueryOptions';
+import type {IMiniLcmJsInvokable} from '$lib/dotnet-types/generated-types/FwLiteShared/Services/IMiniLcmJsInvokable';
+import type {IQueryOptions} from '$lib/dotnet-types/generated-types/MiniLcm/IQueryOptions';
+import type {SortConfig} from '$project/browse/sort/options';
+import {SortField} from '$lib/dotnet-types/generated-types/MiniLcm/SortField';
+import {watch} from 'runed';
+
+export interface EntryLoaderDeps {
+  miniLcmApi: () => IMiniLcmJsInvokable | undefined;
+  search: () => string;
+  sort: () => SortConfig | undefined;
+  gridifyFilter: () => string | undefined;
+}
+
+/**
+ * Service for loading entries on-demand with batch caching.
+ * See ENTRY_LOADER_PLAN.md for architecture details.
+ */
+export class EntryLoaderService {
+  // Reactive state
+  totalCount = $state<number | undefined>();
+  loading = $state(true);
+  error = $state<Error | undefined>();
+
+  // Cache (private)
+  #entryCache = new SvelteMap<number, IEntry>();
+  #idToIndex = new SvelteMap<string, number>();
+  #pendingBatches = new SvelteMap<number, Promise<IEntry[]>>();
+  #loadedBatches = new SvelteSet<number>();
+
+  // Config
+  readonly batchSize = 50;
+
+  // Dependencies
+  readonly #deps: EntryLoaderDeps;
+
+  constructor(deps: EntryLoaderDeps) {
+    this.#deps = deps;
+
+    // Watch for dependency changes and reset
+    watch(
+      () => [deps.miniLcmApi(), deps.search(), deps.sort(), deps.gridifyFilter()],
+      () => {
+        this.reset();
+        void this.loadCount();
+      }
+    );
+  }
+
+  /**
+   * Get an entry from cache by index (synchronous).
+   * Returns undefined if not cached.
+   */
+  getEntryByIndex(index: number): IEntry | undefined {
+    return this.#entryCache.get(index);
+  }
+
+  /**
+   * Load an entry by index (asynchronous).
+   * Fetches the batch containing this index if not already loaded.
+   */
+  async loadEntryByIndex(index: number): Promise<IEntry> {
+    // Check cache first
+    const cached = this.#entryCache.get(index);
+    if (cached) return cached;
+
+    // Load the batch
+    await this.#loadBatchForIndex(index);
+
+    // Return from cache (should now be populated)
+    const entry = this.#entryCache.get(index);
+    if (!entry) {
+      throw new Error(`Entry at index ${index} not found after loading batch`);
+    }
+    return entry;
+  }
+
+  /**
+   * Load the total count of entries matching current filters.
+   */
+  async loadCount(): Promise<void> {
+    const api = this.#deps.miniLcmApi();
+    if (!api) {
+      this.totalCount = undefined;
+      this.loading = false;
+      return;
+    }
+
+    this.loading = true;
+    this.error = undefined;
+
+    try {
+      const filterOptions = this.#buildFilterOptions();
+      const search = this.#deps.search();
+      this.totalCount = await api.countEntries(search || undefined, filterOptions);
+    } catch (e) {
+      this.error = e instanceof Error ? e : new Error(String(e));
+      this.totalCount = undefined;
+    } finally {
+      this.loading = false;
+    }
+  }
+
+  /**
+   * Get the index of an entry by ID (from our incremental map).
+   * Returns undefined if the entry hasn't been loaded yet.
+   */
+  getIndexById(id: string): number | undefined {
+    return this.#idToIndex.get(id);
+  }
+
+  /**
+   * Check if an entry ID is known (loaded into cache).
+   */
+  hasEntry(id: string): boolean {
+    return this.#idToIndex.has(id);
+  }
+
+  /**
+   * Remove an entry by ID (for delete events).
+   * If not in cache, triggers a full reset.
+   */
+  removeEntryById(id: string): void {
+    const index = this.#idToIndex.get(id);
+
+    if (index === undefined) {
+      // Entry not in cache — we don't know where it was, so reset
+      this.reset();
+      void this.loadCount();
+      return;
+    }
+
+    // Remove from maps
+    this.#idToIndex.delete(id);
+    this.#entryCache.delete(index);
+
+    // Shift all subsequent entries down by 1
+    const newCache = new SvelteMap<number, IEntry>();
+    const newIdToIndex = new SvelteMap<string, number>();
+
+    for (const [idx, entry] of this.#entryCache) {
+      if (idx < index) {
+        newCache.set(idx, entry);
+        newIdToIndex.set(entry.id, idx);
+      } else {
+        // Shift down
+        newCache.set(idx - 1, entry);
+        newIdToIndex.set(entry.id, idx - 1);
+      }
+    }
+
+    this.#entryCache = newCache;
+    this.#idToIndex = newIdToIndex;
+
+    // Update loaded batches (they may have shifted)
+    this.#recalculateLoadedBatches();
+
+    // Decrement total count
+    if (this.totalCount !== undefined && this.totalCount > 0) {
+      this.totalCount--;
+    }
+  }
+
+  /**
+   * Update an entry in cache (for update events).
+   * If not in cache, triggers a full reset.
+   */
+  updateEntry(entry: IEntry): void {
+    const index = this.#idToIndex.get(entry.id);
+
+    if (index === undefined) {
+      // Entry not in cache — could be new or just not loaded
+      // For V1, we reset to be safe
+      this.reset();
+      void this.loadCount();
+      return;
+    }
+
+    // Update the cache
+    this.#entryCache.set(index, entry);
+  }
+
+  /**
+   * Full reset: clear all cache and refetch count.
+   */
+  reset(): void {
+    this.#entryCache.clear();
+    this.#idToIndex.clear();
+    this.#pendingBatches.clear();
+    this.#loadedBatches.clear();
+    this.totalCount = undefined;
+    this.error = undefined;
+    this.loading = true;
+  }
+
+  // Private methods
+
+  async #loadBatchForIndex(index: number): Promise<void> {
+    const batchNumber = Math.floor(index / this.batchSize);
+
+    // Already loaded?
+    if (this.#loadedBatches.has(batchNumber)) return;
+
+    // Already pending?
+    const pending = this.#pendingBatches.get(batchNumber);
+    if (pending) {
+      await pending;
+      return;
+    }
+
+    // Start the fetch
+    const promise = this.#fetchBatch(batchNumber);
+    this.#pendingBatches.set(batchNumber, promise);
+
+    try {
+      const entries = await promise;
+      this.#cacheBatch(batchNumber, entries);
+      this.#loadedBatches.add(batchNumber);
+    } finally {
+      this.#pendingBatches.delete(batchNumber);
+    }
+  }
+
+  async #fetchBatch(batchNumber: number): Promise<IEntry[]> {
+    const api = this.#deps.miniLcmApi();
+    if (!api) return [];
+
+    const offset = batchNumber * this.batchSize;
+    const queryOptions = this.#buildQueryOptions(offset, this.batchSize);
+    const search = this.#deps.search();
+
+    if (search) {
+      return api.searchEntries(search, queryOptions);
+    } else {
+      return api.getEntries(queryOptions);
+    }
+  }
+
+  #cacheBatch(batchNumber: number, entries: IEntry[]): void {
+    const startIndex = batchNumber * this.batchSize;
+
+    for (let i = 0; i < entries.length; i++) {
+      const index = startIndex + i;
+      const entry = entries[i];
+      this.#entryCache.set(index, entry);
+      this.#idToIndex.set(entry.id, index);
+    }
+  }
+
+  #buildFilterOptions(): IFilterQueryOptions {
+    const gridifyFilter = this.#deps.gridifyFilter();
+    return {
+      filter: gridifyFilter ? { gridifyFilter } : undefined,
+    };
+  }
+
+  #buildQueryOptions(offset: number, count: number): IQueryOptions {
+    const sort = this.#deps.sort();
+    return {
+      count,
+      offset,
+      filter: this.#buildFilterOptions().filter,
+      order: {
+        field: sort?.field ?? SortField.SearchRelevance,
+        writingSystem: 'default',
+        ascending: sort?.dir !== 'desc',
+      },
+    };
+  }
+
+  #recalculateLoadedBatches(): void {
+    // After shifting indices, recalculate which batches are considered "loaded"
+    // A batch is loaded if all its indices are in the cache
+    this.#loadedBatches.clear();
+
+    const maxIndex = Math.max(...this.#entryCache.keys(), -1);
+    if (maxIndex < 0) return;
+
+    const maxBatch = Math.floor(maxIndex / this.batchSize);
+    for (let batch = 0; batch <= maxBatch; batch++) {
+      const startIndex = batch * this.batchSize;
+      const endIndex = Math.min(startIndex + this.batchSize, (this.totalCount ?? 0));
+      let allPresent = true;
+
+      for (let i = startIndex; i < endIndex; i++) {
+        if (!this.#entryCache.has(i)) {
+          allPresent = false;
+          break;
+        }
+      }
+
+      if (allPresent) {
+        this.#loadedBatches.add(batch);
+      }
+    }
+  }
+}

From a24be28426acda80446bdea0efe2d704efeeaa57 Mon Sep 17 00:00:00 2001
From: Tim Haasdyk <tim_haasdyk@sil.org>
Date: Fri, 16 Jan 2026 17:29:12 +0100
Subject: [PATCH 07/42] Use entry loader service in entries-list

---
 .../src/project/browse/EntriesList.svelte     | 166 ++++++++----------
 .../viewer/src/project/tasks/TaskView.svelte  |   4 +-
 2 files changed, 79 insertions(+), 91 deletions(-)

diff --git a/frontend/viewer/src/project/browse/EntriesList.svelte b/frontend/viewer/src/project/browse/EntriesList.svelte
index a934e19212..253c0df379 100644
--- a/frontend/viewer/src/project/browse/EntriesList.svelte
+++ b/frontend/viewer/src/project/browse/EntriesList.svelte
@@ -1,8 +1,6 @@
 <script lang="ts">
   import {type IEntry, type IPartOfSpeech, type ISemanticDomain} from '$lib/dotnet-types';
-  import type {IQueryOptions} from '$lib/dotnet-types/generated-types/MiniLcm/IQueryOptions';
-  import {SortField} from '$lib/dotnet-types/generated-types/MiniLcm/SortField';
-  import {Debounced, resource, useDebounce, watch} from 'runed';
+  import {Debounced} from 'runed';
   import EntryRow from './EntryRow.svelte';
   import Button from '$lib/components/ui/button/button.svelte';
   import {cn} from '$lib/utils';
@@ -18,8 +16,8 @@
   import {AppNotification} from '$lib/notifications/notifications';
   import {Icon} from '$lib/components/ui/icon';
   import {useProjectContext} from '$project/project-context.svelte';
-  import {DEFAULT_DEBOUNCE_TIME} from '$lib/utils/time';
-  import {IsMobile} from '$lib/hooks/is-mobile.svelte';
+  import Delayed from '$lib/components/Delayed.svelte';
+  import {EntryLoaderService} from '$lib/services/entry-loader-service.svelte';
 
   let {
     search = '',
@@ -49,83 +47,49 @@
   const dialogsService = useDialogsService();
   const projectEventBus = useProjectEventBus();
 
-  projectEventBus.onEntryDeleted(entryId => {
-    if (selectedEntryId === entryId) onSelectEntry(undefined);
-    if (entriesResource.loading || !entries.some(e => e.id === entryId)) return;
-    const currentIndex = entriesResource.current?.findIndex(e => e.id === entryId) ?? -1;
-    if (currentIndex >= 0) {
-      entriesResource.current!.splice(currentIndex, 1);
-    }
+  // Create the entry loader service
+  const entryLoader = new EntryLoaderService({
+    miniLcmApi: () => miniLcmApi,
+    search: () => search,
+    sort: () => sort,
+    gridifyFilter: () => gridifyFilter,
   });
-  projectEventBus.onEntryUpdated(_entry => {
-    if (entriesResource.loading) return;
-    const currentIndex = entriesResource.current?.findIndex(e => e.id === _entry.id) ?? -1;
-    if (currentIndex >= 0) {
-      entriesResource.current![currentIndex] = _entry;
-    } else {
-      void silentlyRefreshEntries();
-    }
+
+  // Debounce the loading state for smoother UI
+  const loading = new Debounced(() => entryLoader.loading, 50);
+
+  // Keep entryCount in sync
+  $effect(() => {
+    entryCount = entryLoader.totalCount ?? null;
   });
 
-  async function silentlyRefreshEntries() {
-    const updatedEntries = await fetchCurrentEntries(true);
-    entriesResource.mutate(updatedEntries);
-  }
+  // Handle entry deleted events
+  projectEventBus.onEntryDeleted(entryId => {
+    if (selectedEntryId === entryId) onSelectEntry(undefined);
+    entryLoader.removeEntryById(entryId);
+  });
 
-  let loadingUndebounced = $state(true);
-  const loading = new Debounced(() => loadingUndebounced, 50);
-  const fetchCurrentEntries = useDebounce(async (silent = false) => {
-    if (!miniLcmApi) return [];
-    if (!silent) loadingUndebounced = true;
-    try {
-      const queryOptions: IQueryOptions = {
-        count: IsMobile.value ? 1_000 : 5_000,
-        offset: 0,
-        filter: {
-          gridifyFilter: gridifyFilter ? gridifyFilter : undefined,
-        },
-        order: {
-          field: sort?.field ?? SortField.SearchRelevance,
-          writingSystem: 'default',
-          ascending: sort?.dir !== 'desc',
-        },
-      };
-
-      const entries = search
-        ? miniLcmApi.searchEntries(search, queryOptions)
-        : miniLcmApi.getEntries(queryOptions);
-      await entries; // ensure the entries have arrived before toggling the loading flag
-      return entries;
-    } finally {
-      loadingUndebounced = false;
-    }
-  }, DEFAULT_DEBOUNCE_TIME);
-
-  const entriesResource = resource(
-    () => ({ search, sort, gridifyFilter, miniLcmApi }),
-    async (_curr, _prev, refetchInfo): Promise<IEntry[]> => {
-      const entries = await fetchCurrentEntries();
-      // don't let slow requests overwrite newer ones
-      // if the newer request is finished then entriesResource.current is up-to-date
-      // else entriesResource.current is out-of-date, but will be updated by the newer request
-      if (refetchInfo.signal.aborted) return entriesResource.current ?? [];
-      return entries;
-    });
-  const entries = $derived(entriesResource.current ?? []);
-  watch(() => [entries, entriesResource.loading], () => {
-    if (!entriesResource.loading)
-      entryCount = entries.length;
+  // Handle entry updated events
+  projectEventBus.onEntryUpdated(entry => {
+    entryLoader.updateEntry(entry);
   });
 
   $effect(() => {
-    if (entriesResource.error) {
-      AppNotification.error($t`Failed to load entries`, entriesResource.error.message);
+    if (entryLoader.error) {
+      AppNotification.error($t`Failed to load entries`, entryLoader.error.message);
     }
   });
 
   // Generate a random number of skeleton rows between 3 and 7
   const skeletonRowCount = Math.floor(Math.random() * 5) + 3;
 
+  // Generate index array for virtual list
+  const indexArray = $derived(
+    entryLoader.totalCount !== undefined
+      ? Array.from({ length: entryLoader.totalCount }, (_, i) => i)
+      : []
+  );
+
   async function handleNewEntry() {
     const entry = await dialogsService.createNewEntry(undefined, {
       semanticDomains: semanticDomain ? [semanticDomain] : [],
@@ -138,8 +102,8 @@
   let vList = $state<VListHandle>();
   $effect(() => {
     if (!vList || !selectedEntryId) return;
-    const indexOfSelected = entries.findIndex(e => e.id === selectedEntryId);
-    if (indexOfSelected === -1) return;
+    const indexOfSelected = entryLoader.getIndexById(selectedEntryId);
+    if (indexOfSelected === undefined) return;
     const visibleStart = vList.getScrollOffset();
     const visibleSize = vList.getViewportSize();
     const visibleEnd = visibleStart + visibleSize;
@@ -152,10 +116,18 @@
     }
   });
 
-  export function selectNextEntry() {
-    const indexOfSelected = entries.findIndex(e => e.id === selectedEntryId);
-    const nextIndex = indexOfSelected === -1 ? 0 : indexOfSelected + 1;
-    let nextEntry = entries[nextIndex];
+  export async function selectNextEntry(): Promise<IEntry | undefined> {
+    const indexOfSelected = selectedEntryId
+      ? entryLoader.getIndexById(selectedEntryId)
+      : undefined;
+    const nextIndex = indexOfSelected === undefined ? 0 : indexOfSelected + 1;
+
+    // Check count bounds
+    if (entryLoader.totalCount === undefined || nextIndex >= entryLoader.totalCount) {
+      return undefined;
+    }
+
+    const nextEntry = await entryLoader.loadEntryByIndex(nextIndex);
     onSelectEntry(nextEntry);
     return nextEntry;
   }
@@ -169,7 +141,10 @@
       variant="outline"
       iconProps={{ class: cn(loading.current && 'animate-spin') }}
       size="icon"
-      onclick={() => entriesResource.refetch()}
+      onclick={() => {
+        entryLoader.reset();
+        void entryLoader.loadCount();
+      }}
     />
   </DevContent>
   {#if !disableNewEntry}
@@ -178,33 +153,46 @@
 </FabContainer>
 
 <div class="flex-1 h-full" role="table">
-  {#if entriesResource.error}
+  {#if entryLoader.error}
     <div class="flex items-center justify-center h-full text-muted-foreground gap-2">
       <Icon icon="i-mdi-alert-circle-outline" />
       <p>{$t`Failed to load entries`}</p>
     </div>
   {:else}
     <div class="h-full">
-      {#if loading.current}
+      {#if loading.current && indexArray.length === 0}
         <div class="md:pr-3 p-0.5">
-          <!-- Show skeleton rows while loading -->
+          <!-- Show skeleton rows while loading initial count -->
           {#each { length: skeletonRowCount }, _index}
             <EntryRow class="mb-2" skeleton={true} />
           {/each}
         </div>
       {:else}
-        <VList bind:this={vList} data={entries ?? []} class="h-full p-0.5 md:pr-3 after:h-12 after:block" getKey={d => d.id} bufferSize={400}>
-          {#snippet children(entry)}
-            <EntryMenu {entry} contextMenu>
-              <EntryRow {entry}
-                        class="mb-2"
-                        selected={selectedEntryId === entry.id}
-                        onclick={() => onSelectEntry(entry)}
-                        {previewDictionary}/>
-            </EntryMenu>
+        <VList bind:this={vList} data={indexArray} class="h-full p-0.5 md:pr-3 after:h-12 after:block" getKey={(index: number) => index} bufferSize={400}>
+          {#snippet children(index: number)}
+            <Delayed
+              getCached={() => entryLoader.getEntryByIndex(index)}
+              load={() => entryLoader.loadEntryByIndex(index)}
+              delay={250}
+            >
+              {#snippet children(state)}
+                {#if state.loading || !state.current}
+                  <EntryRow class="mb-2" skeleton={true} />
+                {:else}
+                  {@const entry = state.current}
+                  <EntryMenu {entry} contextMenu>
+                    <EntryRow {entry}
+                              class="mb-2"
+                              selected={selectedEntryId === entry.id}
+                              onclick={() => onSelectEntry(entry)}
+                              {previewDictionary}/>
+                  </EntryMenu>
+                {/if}
+              {/snippet}
+            </Delayed>
           {/snippet}
         </VList>
-        {#if entries.length === 0}
+        {#if indexArray.length === 0}
           <div class="flex items-center justify-center h-full text-muted-foreground">
             <p>{$t`No entries found`}</p>
           </div>
diff --git a/frontend/viewer/src/project/tasks/TaskView.svelte b/frontend/viewer/src/project/tasks/TaskView.svelte
index 00a9e4b66c..11650b563b 100644
--- a/frontend/viewer/src/project/tasks/TaskView.svelte
+++ b/frontend/viewer/src/project/tasks/TaskView.svelte
@@ -65,8 +65,8 @@
           bind:entry
           {task}
           {progress}
-          onNextEntry={() => {
-            let next = entriesList?.selectNextEntry();
+          onNextEntry={async () => {
+            const next = await entriesList?.selectNextEntry();
             if (!next) onDone();
           }}
           onCompletedSubject={subject => {

From b0154ce153b173082573b849ebaf6a7fbb46e85d Mon Sep 17 00:00:00 2001
From: Tim Haasdyk <tim_haasdyk@sil.org>
Date: Mon, 19 Jan 2026 12:11:29 +0100
Subject: [PATCH 08/42] Make agent instructions leaner

---
 .github/copilot-instructions.md | 60 ----------------------------
 AGENTS.md                       | 70 +++++++++------------------------
 2 files changed, 19 insertions(+), 111 deletions(-)
 delete mode 100644 .github/copilot-instructions.md

diff --git a/.github/copilot-instructions.md b/.github/copilot-instructions.md
deleted file mode 100644
index cdd6e9a734..0000000000
--- a/.github/copilot-instructions.md
+++ /dev/null
@@ -1,60 +0,0 @@
-# GitHub Copilot Instructions for languageforge-lexbox
-
-## Project Overview
-
-This is a monorepo containing:
-- **LexBox** - A web application for managing linguistic data (backend in C#/.NET, frontend in Svelte)
-- **FwLite** - A lightweight FieldWorks application (MAUI desktop app)
-- **FwHeadless** - A headless service for FieldWorks data processing
-
-## Tech Stack
-
-- **Backend**: .NET 9, C#, Entity Framework Core, GraphQL (Hot Chocolate)
-- **Frontend**: SvelteKit, TypeScript
-- **Database**: PostgreSQL
-- **Infrastructure**: Docker, Kubernetes, Skaffold, Tilt
-
-## Development Commands
-
-```bash
-# Backend
-dotnet build backend/LexBoxApi/LexBoxApi.csproj
-dotnet test
-
-# FwLite (Windows)
-dotnet build backend/FwLite/FwLiteMaui/FwLiteMaui.csproj --framework net9.0-windows10.0.19041.0
-
-# Frontend
-cd frontend && pnpm dev
-```
-
-## Project Structure
-
-```text
-languageforge-lexbox/
-├── backend/
-│   ├── LexBoxApi/       # Main API (ASP.NET Core + GraphQL)
-│   ├── LexCore/         # Core domain models
-│   ├── LexData/         # Data access layer (EF Core)
-│   ├── FwLite/          # FwLite MAUI app
-│   ├── FwHeadless/      # Headless FW service
-│   └── Testing/         # Test projects
-├── frontend/            # SvelteKit web app
-└── deployment/          # K8s/Docker configs
-```
-
-## Important Rules
-
-- ✅ Use GitHub Issues for task tracking
-- ✅ Use `gh` CLI for GitHub issues/PRs, not browser tools
-- ✅ Use **Mermaid diagrams** for flowcharts and architecture (not ASCII art)
-- ❌ Do NOT use ASCII art for diagrams (use Mermaid instead)
-
----
-
-**For detailed workflows and advanced features, see [AGENTS.md](../AGENTS.md)**
-
-**For critical code areas:**
-- [FwLite/CRDT Guide](../backend/FwLite/AGENTS.md) - Data sync, model changes (HIGH RISK)
-- [FwHeadless Guide](../backend/FwHeadless/AGENTS.md) - Mercurial sync, FwData processing
-- [CI/CD Guide](./AGENTS.md) - Workflows, deployments, K8s
diff --git a/AGENTS.md b/AGENTS.md
index 68f8b2b5f6..1de45af8c3 100644
--- a/AGENTS.md
+++ b/AGENTS.md
@@ -7,28 +7,14 @@ This is a monorepo containing:
 - **FwLite** - A lightweight FieldWorks application (MAUI desktop app)
 - **FwHeadless** - A headless service for FieldWorks data processing
 
-## Tech Stack
+### Tech Stack
 
 - **Backend**: .NET 9, C#, Entity Framework Core, GraphQL (Hot Chocolate)
 - **Frontend**: SvelteKit, TypeScript
 - **Database**: PostgreSQL
 - **Infrastructure**: Docker, Kubernetes, Skaffold, Tilt
 
-## Development Commands
-
-```bash
-# Backend
-dotnet build backend/LexBoxApi/LexBoxApi.csproj
-dotnet test
-
-# FwLite (Windows)
-dotnet build backend/FwLite/FwLiteMaui/FwLiteMaui.csproj --framework net9.0-windows10.0.19041.0
-
-# Frontend
-cd frontend && pnpm dev
-```
-
-## Project Structure
+### Structure
 
 ```text
 languageforge-lexbox/
@@ -39,66 +25,48 @@ languageforge-lexbox/
 │   ├── FwLite/          # FwLite MAUI app
 │   ├── FwHeadless/      # Headless FW service
 │   └── Testing/         # Test projects
-├── frontend/            # SvelteKit web app
+├── frontend/            # Lexbox SvelteKit web app
+├── frontend/viewer/     # FieldWorks Lite frontend Svelte code
 └── deployment/          # K8s/Docker configs
 ```
 
-**IMPORTANT: Testing Policy**
-- ❌ **Do NOT run integration tests** (`dotnet test`) unless the user explicitly asks
-- Integration tests require full test infrastructure (database, services) and take significant time
-- Only run unit tests locally when verifying critical business logic
-- User must explicitly request test runs before executing them
-
-### Checking GitHub Issues and PRs
-
-When asked to check GitHub issues or PRs, use the `gh` CLI instead of browser tools:
-
-```bash
-# List open issues
-gh issue list --limit 30
-
-# List open PRs
-gh pr list --limit 30
-
-# View specific issue or PR
-gh issue view <number>
-gh pr view <number>
-```
-
-Provide an in-conversation summary highlighting:
-- Urgent/critical issues (regressions, bugs, broken builds)
-- Common themes or patterns
-- Items needing immediate attention
-
-**Why CLI over browser**: Faster, less tokens, easier to scan and discuss.
-
 ### Important Files
 
 Key documentation for this project:
 - `README.md` - Project overview and setup
 - `AGENTS.md` - You are here! Agent instructions
-- `.github/copilot-instructions.md` - GitHub Copilot auto-loaded instructions
 - `.github/AGENTS.md` - **CI/CD and deployment guide** (workflows, K8s, Docker)
 - `docs/DEVELOPER-win.md` - Windows development setup
 - `docs/DEVELOPER-linux.md` - Linux development setup
 - `docs/DEVELOPER-osx.md` - macOS development setup
 - `backend/README.md` - Backend architecture
-- `backend/FwLite/AGENTS.md` - **FwLite/CRDT critical code guide** (data loss risks!)
-- `backend/FwHeadless/AGENTS.md` - **FwHeadless sync guide**
+- `backend/FwLite/AGENTS.md` - **FwLite/CRDT** (Critical code! Data loss risks!)
+- `backend/FwHeadless/AGENTS.md` - **FwHeadless guide** (Critical code! Data loss risks! Mercurial sync, FwData processing)
 - `deployment/README.md` - Deployment and infrastructure
 
+## Guidelines
+
+### Testing
+
+- ❌ **Do NOT run dotnet INTEGRATION tests** unless the user explicitly asks. They require full test infrastructure (database, services) which usually isn't available.
+- ✅ **DO run unit tests locally** and filter to the tests that are relevant to the changes you are making. Use IDE testing tools over the cli.
+
 ### Questions?
 
 - Check existing issues: `gh issue list --limit 30`
 - Look at recent commits: `git log --oneline -20`
 - Read the docs in `docs/` directory
 - Create a GitHub issue if unsure
+- Ask the user to clarify
+
+### Pre-Flight Check
+
+Before implementing any change that will touch many files or is in a 🔴 **Critical** area (FwLite sync, FwHeadless) do a "Pre-Flight Check" and list every component in the chain that will be touched (e.g., MiniLcm -> LcmCrdt -> FwDataBridge -> SyncHelper).
 
 ### Important Rules
 
-- ✅ Use GitHub Issues for task tracking
 - ✅ Use `gh` CLI for GitHub issues/PRs, not browser tools
 - ✅ Use **Mermaid diagrams** for flowcharts and architecture (not ASCII art)
 - ✅ Do NOT run integration tests unless user explicitly requests
-- ❌ Do NOT use ASCII art for diagrams (use Mermaid instead)
+- ✅ When handling a user prompt ALWAYS ask for clarification if there are details to clarify, important decisions that must be made first or the plan sounds unwise
 - ❌ Do NOT git commit or git push without explicit user approval

From a4ec425025270901b11a393d073b00d7cf073874 Mon Sep 17 00:00:00 2001
From: Tim Haasdyk <tim_haasdyk@sil.org>
Date: Mon, 19 Jan 2026 13:39:13 +0100
Subject: [PATCH 09/42] Add virtual scrolling tests

---
 AGENTS.md                                     |  10 ++
 frontend/viewer/AGENTS.md                     |  18 +++
 .../viewer/src/lib/components/ListItem.svelte |   1 +
 frontend/viewer/tests/entries-list.test.ts    | 146 ++++++++++++++++++
 4 files changed, 175 insertions(+)
 create mode 100644 frontend/viewer/tests/entries-list.test.ts

diff --git a/AGENTS.md b/AGENTS.md
index 1de45af8c3..eae0f76c70 100644
--- a/AGENTS.md
+++ b/AGENTS.md
@@ -65,8 +65,18 @@ Before implementing any change that will touch many files or is in a 🔴 **Crit
 
 ### Important Rules
 
+- ✅ New instructions in AGENTS.md files should be SUCCINCT.
 - ✅ Use `gh` CLI for GitHub issues/PRs, not browser tools
 - ✅ Use **Mermaid diagrams** for flowcharts and architecture (not ASCII art)
 - ✅ Do NOT run integration tests unless user explicitly requests
 - ✅ When handling a user prompt ALWAYS ask for clarification if there are details to clarify, important decisions that must be made first or the plan sounds unwise
 - ❌ Do NOT git commit or git push without explicit user approval
+
+### 🛡️ VIGILANCE
+
+- ❌ **NEVER "fix" a failure** by removing assertions, commenting out code, or changing data to match a broken implementation.
+- ✅ **ALWAYS fix the root cause** when a test or check fails.
+- ✅ **ALWAYS double-check** that your "fix" hasn't made a check or test meaningless (e.g., asserting `expect(true).toBe(true)`).
+- ✅ **Assert that E2E test user actions** e.g. (scroll, click, etc.) actually have the expected effect before proceeding further.
+
+If you are struggling, explain the difficulty to the user instead of cheating. **Integrity is non-negotiable.**
diff --git a/frontend/viewer/AGENTS.md b/frontend/viewer/AGENTS.md
index 90f9e86a4d..c9034864ff 100644
--- a/frontend/viewer/AGENTS.md
+++ b/frontend/viewer/AGENTS.md
@@ -15,6 +15,24 @@ pnpm install
 pnpm run dev
 ```
 
+### E2E Testing (Playwright)
+
+To run E2E tests for the viewer:
+```bash
+# From frontend/viewer/ directory
+# Automatically starts dev server if needed
+# For debugging e.g. with Chrome MCP: dev server/demo project will be available at port 5173 & path /testing/project-view/browse
+
+# Filter by test name (the ONLY RIGHT choice if testing specific features or changes) e.g.
+task playwright-test-standalone -- entries-list
+
+# All tests
+task playwright-test-standalone
+
+# In UI mode
+task playwright-test-standalone -- entries-list --ui
+```
+
 ## Tech Stack
 
 - **Framework**: SvelteKit + Vite
diff --git a/frontend/viewer/src/lib/components/ListItem.svelte b/frontend/viewer/src/lib/components/ListItem.svelte
index b3a73380f9..dea32680b5 100644
--- a/frontend/viewer/src/lib/components/ListItem.svelte
+++ b/frontend/viewer/src/lib/components/ListItem.svelte
@@ -35,6 +35,7 @@
   aria-selected={selected && !skeleton && !disabled}
   selected={selected && !skeleton && !disabled ? 'true' : undefined}
   disabled={disabled || loading}
+  data-skeleton={skeleton || undefined}
   class={cn(
     'w-full max-w-full px-4 py-3 flex text-left overflow-hidden items-center gap-4',
     'dark:bg-muted/50 bg-muted/80 hover:bg-primary/15 hover:dark:bg-primary/15 aria-selected:ring-2 ring-primary ring-offset-background rounded',
diff --git a/frontend/viewer/tests/entries-list.test.ts b/frontend/viewer/tests/entries-list.test.ts
new file mode 100644
index 0000000000..4a683bfc9d
--- /dev/null
+++ b/frontend/viewer/tests/entries-list.test.ts
@@ -0,0 +1,146 @@
+import {type Page, expect, test} from '@playwright/test';
+
+/**
+ * This file is vibe coded.
+ * Tests for EntriesList lazy loading and virtual scrolling.
+ */
+
+test.describe('EntriesList lazy loading', () => {
+  function getLocators(page: Page) {
+    return {
+      vlist: page.locator('[role="table"] > div > div'),
+      entryRows: page.locator('[role="table"] [role="row"]'),
+      skeletons: page.locator('[role="table"] [data-skeleton]'),
+    };
+  }
+
+  async function getVisibleEntryTexts(page: Page) {
+    const {entryRows} = getLocators(page);
+    const texts: string[] = [];
+    const count = await entryRows.count();
+    for (let i = 0; i < Math.min(count, 5); i++) {
+      const text = await entryRows.nth(i).textContent();
+      if (text) texts.push(text.trim());
+    }
+    return texts;
+  }
+
+  test.beforeEach(async ({page}) => {
+    await page.goto('/testing/project-view');
+    await waitForProjectViewReady(page);
+  });
+
+  test('entries are loaded initially', async ({page}) => {
+    const {entryRows} = getLocators(page);
+
+    await expect(entryRows.first()).toBeVisible();
+
+    const visibleCount = await entryRows.count();
+    expect(visibleCount).toBeGreaterThan(5);
+
+    const firstEntry = entryRows.first();
+    await expect(firstEntry).not.toHaveAttribute('data-skeleton');
+    await expect(firstEntry).toContainText(/.+/);
+  });
+
+  test('can scroll through entries incrementally', async ({page}) => {
+    const {vlist, skeletons} = getLocators(page);
+
+    const initialTexts = await getVisibleEntryTexts(page);
+    expect(initialTexts.length).toBeGreaterThan(0);
+
+    // Scroll down 1000px
+    await vlist.evaluate((el) => {
+      el.scrollTop = 1000;
+    });
+
+    await page.waitForTimeout(500);
+
+    const scrollTop = await vlist.evaluate((el) => el.scrollTop);
+    expect(scrollTop).toBeGreaterThan(850);
+
+    const newTexts = await getVisibleEntryTexts(page);
+    expect(newTexts).not.toEqual(initialTexts);
+
+    await expect(skeletons).toHaveCount(0);
+  });
+
+  test('large scroll jump loads new entries and preserves unloaded entries', async ({page}) => {
+    const {vlist, entryRows, skeletons} = getLocators(page);
+
+    await expect(entryRows.first()).toBeVisible();
+
+    const scrollHeight = await vlist.evaluate((el) => el.scrollHeight);
+    expect(scrollHeight).toBeGreaterThan(500);
+
+    // Jump to 90%
+    const targetScroll = scrollHeight * 0.9;
+    await vlist.evaluate((el, target) => {
+      el.scrollTop = target;
+    }, targetScroll);
+
+    await page.waitForTimeout(500);
+
+    const scrollTop = await vlist.evaluate((el) => el.scrollTop);
+    // Allow small margin for virtualization/browser rounding
+    expect(scrollTop).toBeGreaterThan(targetScroll - 200);
+
+    // Should resolve from skeletons to entries
+    await expect(async () => {
+      await expect(entryRows.first()).toBeVisible();
+      const skeletonCount = await skeletons.count();
+      expect(skeletonCount).toBeLessThan(3); // Allow a couple at edges
+    }).toPass({timeout: 5000});
+
+    // Now scroll back to middle
+    const middleScroll = scrollHeight * 0.5;
+    await vlist.evaluate((el, target) => {
+      el.scrollTop = target;
+    }, middleScroll);
+
+    // Verify middle was not yet loaded and shows skeletons
+    await page.waitForTimeout(100);
+    await expect(skeletons.first()).toBeVisible();
+
+    // Eventually loads content
+    await expect(async () => {
+      await expect(entryRows.first()).toBeVisible();
+      await expect(skeletons).toHaveCount(0);
+    }).toPass({timeout: 5000});
+
+    await expect(entryRows.first()).not.toHaveAttribute('data-skeleton');
+  });
+
+  test('scroll to specific entry maintains entry visibility', async ({page}) => {
+    const {vlist, entryRows} = getLocators(page);
+
+    const firstEntry = entryRows.first();
+    await firstEntry.click();
+    const selectedText = await firstEntry.textContent();
+
+    await vlist.evaluate((el) => {
+      el.scrollTop = 2000;
+    });
+
+    await page.waitForTimeout(300);
+
+    const scrollTop = await vlist.evaluate((el) => el.scrollTop);
+    expect(scrollTop).toBeGreaterThan(1850);
+
+    // Scroll back to top
+    await vlist.evaluate((el) => {
+      el.scrollTop = 0;
+    });
+
+    await page.waitForTimeout(500);
+
+    const firstEntryAfter = entryRows.first();
+    await expect(firstEntryAfter).toContainText(selectedText?.slice(0, 10) || '');
+  });
+});
+
+async function waitForProjectViewReady(page: Page) {
+  await expect(page.locator('.i-mdi-loading')).toHaveCount(0);
+  await page.waitForFunction(() => document.fonts.ready);
+  await expect(page.locator('[data-skeleton]')).toHaveCount(0, {timeout: 10000});
+}

From 61524df5eec65d51f89c1b7dcff7132e578deb83 Mon Sep 17 00:00:00 2001
From: Tim Haasdyk <tim_haasdyk@sil.org>
Date: Mon, 19 Jan 2026 13:49:22 +0100
Subject: [PATCH 10/42] AI feedback

---
 .../viewer/src/lib/components/Delayed.svelte    | 17 +++++++++++++----
 .../lib/services/entry-loader-service.svelte.ts |  2 +-
 2 files changed, 14 insertions(+), 5 deletions(-)

diff --git a/frontend/viewer/src/lib/components/Delayed.svelte b/frontend/viewer/src/lib/components/Delayed.svelte
index db51f3043e..05cce8f6db 100644
--- a/frontend/viewer/src/lib/components/Delayed.svelte
+++ b/frontend/viewer/src/lib/components/Delayed.svelte
@@ -73,24 +73,33 @@
   }
 
 	let timeoutId: ReturnType<typeof setTimeout> | undefined;
+	let runId = 0;
 
 	function startLoading() {
+		const currentRun = ++runId;
 		reset();
-		timeoutId = setTimeout(() => void doLoad(), delay);
+		timeoutId = setTimeout(() => void doLoad(currentRun), delay);
 	}
 
-  async function doLoad() {
+  async function doLoad(currentRun: number) {
     try {
       const result = await load();
-      state = { loading: false, current: result, error: undefined };
+			if (currentRun !== runId) {
+				return;
+			}
+			state = { loading: false, current: result, error: undefined };
     } catch (error) {
-      state = { loading: false, current: undefined, error };
+			if (currentRun !== runId) {
+				return;
+			}
+			state = { loading: false, current: undefined, error };
     }
   }
 
 	function cancelLoading() {
     clearTimeout(timeoutId);
     timeoutId = undefined;
+		runId += 1;
 	}
 </script>
 
diff --git a/frontend/viewer/src/lib/services/entry-loader-service.svelte.ts b/frontend/viewer/src/lib/services/entry-loader-service.svelte.ts
index 16cd8edebf..e25fdcf935 100644
--- a/frontend/viewer/src/lib/services/entry-loader-service.svelte.ts
+++ b/frontend/viewer/src/lib/services/entry-loader-service.svelte.ts
@@ -282,7 +282,7 @@ export class EntryLoaderService {
     const maxBatch = Math.floor(maxIndex / this.batchSize);
     for (let batch = 0; batch <= maxBatch; batch++) {
       const startIndex = batch * this.batchSize;
-      const endIndex = Math.min(startIndex + this.batchSize, (this.totalCount ?? 0));
+      const endIndex = Math.min(startIndex + this.batchSize, (this.totalCount ?? startIndex + this.batchSize));
       let allPresent = true;
 
       for (let i = startIndex; i < endIndex; i++) {

From ca3f5824c3f08b10f0a53af19154fb1d0c5304bb Mon Sep 17 00:00:00 2001
From: Tim Haasdyk <tim_haasdyk@sil.org>
Date: Mon, 19 Jan 2026 13:53:30 +0100
Subject: [PATCH 11/42] Remove old service

---
 .../lib/services/chunk-cache-service.test.ts  | 476 ------------------
 .../src/lib/services/chunk-cache-service.ts   | 419 ---------------
 2 files changed, 895 deletions(-)
 delete mode 100644 frontend/viewer/src/lib/services/chunk-cache-service.test.ts
 delete mode 100644 frontend/viewer/src/lib/services/chunk-cache-service.ts

diff --git a/frontend/viewer/src/lib/services/chunk-cache-service.test.ts b/frontend/viewer/src/lib/services/chunk-cache-service.test.ts
deleted file mode 100644
index a4ead04c6e..0000000000
--- a/frontend/viewer/src/lib/services/chunk-cache-service.test.ts
+++ /dev/null
@@ -1,476 +0,0 @@
-import {describe, it, expect, beforeEach, vi} from 'vitest';
-import {ChunkCacheService, type EntryWindowProvider} from './chunk-cache-service';
-import type {IEntry} from '$lib/dotnet-types/generated-types/MiniLcm/Models/IEntry';
-
-/**
- * Helper to create mock entries
- */
-function createEntry(id: string, lexeme: string): IEntry {
-	return {
-		id,
-		lexemeForm: { en: lexeme },
-		citationForm: {},
-		literalMeaning: { spans: [] },
-		note: { spans: [] },
-		morphType: 0,
-		senses: [],
-		components: [],
-		complexForms: [],
-		complexFormTypes: [],
-		publishIn: [],
-		deletedAt: undefined
-	};
-}
-
-/**
- * Mock backend provider
- */
-class MockProvider implements EntryWindowProvider {
-	private entries: IEntry[] = [];
-	private failOnceStart: number | null = null;
-
-	setEntries(entries: IEntry[]): void {
-		this.entries = entries;
-	}
-
-	failNextWindowForStart(start: number): void {
-		this.failOnceStart = start;
-	}
-
-	// eslint-disable-next-line @typescript-eslint/require-await
-	async fetchWindow(start: number, size: number): Promise<{ entries: IEntry[]; firstIndex: number }> {
-		if (this.failOnceStart === start) {
-			this.failOnceStart = null;
-			throw new Error('Transient fetch failure');
-		}
-		const window = this.entries.slice(start, start + size);
-		return { entries: window, firstIndex: start };
-	}
-
-	// eslint-disable-next-line @typescript-eslint/require-await
-	async fetchRowIndex(entryId: string): Promise<{ rowIndex: number; entry: IEntry }> {
-		const rowIndex = this.entries.findIndex(e => e.id === entryId);
-		if (rowIndex === -1) throw new Error(`Entry ${entryId} not found`);
-		return { rowIndex, entry: this.entries[rowIndex] };
-	}
-}
-
-describe('ChunkCacheService', () => {
-	let service: ChunkCacheService;
-	let provider: MockProvider;
-	const chunkSize = 10;
-
-	beforeEach(() => {
-		provider = new MockProvider();
-		// Create 35 mock entries (3.5 chunks worth)
-		const entries = Array.from({ length: 35 }, (_, i) =>
-			createEntry(`entry-${i}`, `Item ${i}`)
-		);
-		provider.setEntries(entries);
-		service = new ChunkCacheService(provider, chunkSize);
-	});
-
-	describe('ensureWindow', () => {
-		it('should fetch and cache first chunk', async () => {
-			const result = await service.ensureWindow(0, 5);
-
-			expect(result).toHaveLength(5);
-			expect(result[0].id).toBe('entry-0');
-			expect(result[4].id).toBe('entry-4');
-		});
-
-		it('should fetch multiple chunks for large window', async () => {
-			const result = await service.ensureWindow(0, 25);
-
-			expect(result).toHaveLength(25);
-			expect(result[0].id).toBe('entry-0');
-			expect(result[24].id).toBe('entry-24');
-		});
-
-		it('should cache and reuse chunks on second call', async () => {
-			const fetchSpy = vi.spyOn(provider, 'fetchWindow');
-
-			// First call
-			await service.ensureWindow(0, 10);
-			expect(fetchSpy).toHaveBeenCalled();
-			const callCount1 = fetchSpy.mock.calls.length;
-
-			// Second call to same window
-			const result = await service.ensureWindow(0, 10);
-			expect(result).toHaveLength(10);
-			expect(fetchSpy.mock.calls.length).toBe(callCount1); // No additional calls
-		});
-
-		it('should emit onWindowReady event', async () => {
-			const onWindowReady = vi.fn();
-			service.subscribe({ onWindowReady });
-
-			await service.ensureWindow(0, 5);
-
-			expect(onWindowReady).toHaveBeenCalled();
-		});
-
-		it('should handle offset windows', async () => {
-			const result = await service.ensureWindow(15, 5);
-
-			expect(result).toHaveLength(5);
-			expect(result[0].id).toBe('entry-15');
-			expect(result[4].id).toBe('entry-19');
-		});
-
-		it('should handle partial last chunk', async () => {
-			const result = await service.ensureWindow(30, 10);
-
-			expect(result).toHaveLength(5); // Only 5 entries left
-			expect(result[0].id).toBe('entry-30');
-			expect(result[4].id).toBe('entry-34');
-		});
-	});
-
-	describe('applyEntryUpdated', () => {
-		it('should update entry in cached chunk', async () => {
-			await service.ensureWindow(0, 10);
-
-			const updatedEntry = createEntry('entry-3', 'Updated Item 3');
-			service.applyEntryUpdated(updatedEntry);
-
-			const result = await service.ensureWindow(0, 10);
-			expect(result[3].lexemeForm.en).toBe('Updated Item 3');
-		});
-
-		it('should emit onChunkChanged event', async () => {
-			await service.ensureWindow(0, 10);
-
-			const onChunkChanged = vi.fn();
-			service.subscribe({ onChunkChanged });
-
-			const updatedEntry = createEntry('entry-5', 'Updated');
-			service.applyEntryUpdated(updatedEntry);
-
-			expect(onChunkChanged).toHaveBeenCalled();
-		});
-
-		it('should handle update on non-cached entry', () => {
-			const onError = vi.fn();
-			service.subscribe({ onError });
-
-			// This should silently do nothing, not error
-			const updatedEntry = createEntry('entry-100', 'Updated');
-			service.applyEntryUpdated(updatedEntry);
-
-			expect(onError).not.toHaveBeenCalled();
-		});
-	});
-
-	describe('applyEntryDeleted', () => {
-		it('should delete entry from cached chunk', async () => {
-			await service.ensureWindow(0, 15);
-
-			service.applyEntryDeleted('entry-5');
-
-			const result = await service.ensureWindow(0, 15);
-			expect(result).not.toContainEqual(expect.objectContaining({ id: 'entry-5' }));
-		});
-
-		it('should cascade delete from next chunk', async () => {
-			await service.ensureWindow(0, 25);
-
-			service.applyEntryDeleted('entry-5');
-
-			const result = await service.ensureWindow(0, 25);
-			// After delete of entry-5, entry-10 should move up
-			expect(result[10].id).toBe('entry-11');
-		});
-
-		it('should emit onChunkChanged on cascade', async () => {
-			await service.ensureWindow(0, 25);
-
-			const onChunkChanged = vi.fn();
-			service.subscribe({ onChunkChanged });
-
-			service.applyEntryDeleted('entry-5');
-
-			// Should be called at least once for the deletion
-			expect(onChunkChanged).toHaveBeenCalled();
-		});
-	});
-
-	describe('applyEntryInserted', () => {
-		it('should insert entry at absolute index', async () => {
-			await service.ensureWindow(0, 15);
-
-			const newEntry = createEntry('new-entry', 'New Item');
-			service.applyEntryInserted(newEntry, 5);
-
-			const result = await service.ensureWindow(0, 20);
-			expect(result[5]).toEqual(expect.objectContaining({ id: 'new-entry' }));
-		});
-
-		it('should cascade insert to next chunk', async () => {
-			await service.ensureWindow(0, 25);
-
-			const newEntry = createEntry('new-entry', 'New Item');
-			service.applyEntryInserted(newEntry, 8);
-
-			const result = await service.ensureWindow(0, 25);
-			expect(result[8].id).toBe('new-entry');
-			// entry-34 should be pushed out (was at index 34, now past end or in overflow)
-		});
-
-		it('should emit onChunkChanged on insert', async () => {
-			await service.ensureWindow(0, 15);
-
-			const onChunkChanged = vi.fn();
-			service.subscribe({ onChunkChanged });
-
-			const newEntry = createEntry('new-entry', 'New Item');
-			service.applyEntryInserted(newEntry, 5);
-
-			expect(onChunkChanged).toHaveBeenCalled();
-		});
-	});
-
-	describe('delete and insert cascade patterns', () => {
-		it('should handle multiple deletes', async () => {
-			await service.ensureWindow(0, 20);
-
-			service.applyEntryDeleted('entry-2');
-			service.applyEntryDeleted('entry-5');
-			service.applyEntryDeleted('entry-1');
-
-			const result = await service.ensureWindow(0, 20);
-			const ids = result.map(e => e.id);
-			expect(ids).not.toContain('entry-1');
-			expect(ids).not.toContain('entry-2');
-			expect(ids).not.toContain('entry-5');
-		});
-
-		it('should handle insert followed by delete', async () => {
-			await service.ensureWindow(0, 15);
-
-			const newEntry = createEntry('new-entry', 'New');
-			service.applyEntryInserted(newEntry, 5);
-
-			service.applyEntryDeleted('new-entry');
-
-			const result = await service.ensureWindow(0, 15);
-			expect(result).not.toContainEqual(expect.objectContaining({ id: 'new-entry' }));
-		});
-
-		it('should maintain consistency after mixed operations', async () => {
-			await service.ensureWindow(0, 20);
-
-			service.applyEntryDeleted('entry-3');
-			const newEntry = createEntry('inserted', 'Inserted');
-			service.applyEntryInserted(newEntry, 10);
-			const updated = createEntry('entry-8', 'Updated');
-			service.applyEntryUpdated(updated);
-
-			const result = await service.ensureWindow(0, 20);
-			expect(result).not.toContainEqual(expect.objectContaining({ id: 'entry-3' }));
-			expect(result).toContainEqual(expect.objectContaining({ id: 'inserted' }));
-			// After deleting entry-3, entry-8 shifts from position 8 to 7
-			expect(result[7].lexemeForm.en).toBe('Updated');
-		});
-	});
-
-	describe('observer subscriptions', () => {
-		it('should allow multiple observers', async () => {
-			const obs1 = { onChunkChanged: vi.fn() };
-			const obs2 = { onChunkChanged: vi.fn() };
-
-			service.subscribe(obs1);
-			service.subscribe(obs2);
-
-			await service.ensureWindow(0, 10);
-			service.applyEntryUpdated(createEntry('entry-0', 'Updated'));
-
-			expect(obs1.onChunkChanged).toHaveBeenCalled();
-			expect(obs2.onChunkChanged).toHaveBeenCalled();
-		});
-
-		it('should allow unsubscribe', async () => {
-			const onChunkChanged = vi.fn();
-			const unsubscribe = service.subscribe({ onChunkChanged });
-
-			await service.ensureWindow(0, 10);
-			service.applyEntryUpdated(createEntry('entry-0', 'Updated'));
-
-			expect(onChunkChanged).toHaveBeenCalledTimes(1);
-
-			unsubscribe();
-
-			service.applyEntryUpdated(createEntry('entry-1', 'Updated'));
-			expect(onChunkChanged).toHaveBeenCalledTimes(1); // No additional call
-		});
-	});
-
-	describe('clear', () => {
-		it('should clear all cached chunks', async () => {
-			await service.ensureWindow(0, 20);
-
-			service.clear();
-
-			const onWindowReady = vi.fn();
-			service.subscribe({ onWindowReady });
-
-			// After clear, should fetch again
-			const fetchSpy = vi.spyOn(provider, 'fetchWindow');
-			await service.ensureWindow(0, 10);
-
-			expect(fetchSpy).toHaveBeenCalled();
-		});
-	});
-
-	describe('error handling', () => {
-		it('should emit error on fetch failure', async () => {
-			const failProvider = new (class implements EntryWindowProvider {
-				// eslint-disable-next-line @typescript-eslint/require-await
-				async fetchWindow(): Promise<{ entries: IEntry[]; firstIndex: number }> {
-					throw new Error('Network error');
-				}
-
-				// eslint-disable-next-line @typescript-eslint/require-await
-				async fetchRowIndex(): Promise<{ rowIndex: number; entry: IEntry }> {
-					throw new Error('Network error');
-				}
-			})();
-
-			const failService = new ChunkCacheService(failProvider, chunkSize);
-			const onError = vi.fn();
-			failService.subscribe({ onError });
-
-			try {
-				await failService.ensureWindow(0, 10);
-			} catch {
-				// Expected
-			}
-
-			expect(onError).toHaveBeenCalled();
-		});
-	});
-
-	describe('window bounds and tail refill', () => {
-		it('should preserve window length after delete by not cascading beyond visible range', async () => {
-			await service.ensureWindow(0, 15);
-
-			// Delete from within the window
-			service.applyEntryDeleted('entry-5');
-
-			const result = await service.ensureWindow(0, 15);
-			// Window should still be 15 entries (refilled or pulled from cascade)
-			expect(result.length).toBeGreaterThanOrEqual(14);
-			expect(result).not.toContainEqual(expect.objectContaining({ id: 'entry-5' }));
-		});
-
-		it('should discard overflow outside requestedWindow on insert', async () => {
-			await service.ensureWindow(0, 15);
-
-			// Insert near end of visible window
-			const newEntry = createEntry('new', 'New');
-			service.applyEntryInserted(newEntry, 14);
-
-			const result = await service.ensureWindow(0, 15);
-			// Should have inserted entry and not accumulated garbage beyond window
-			expect(result).toContainEqual(expect.objectContaining({ id: 'new' }));
-			expect(result.length).toBeLessThanOrEqual(15);
-		});
-
-		it('should update chunk bounds when entries cascade', async () => {
-			await service.ensureWindow(0, 20);
-
-			service.applyEntryDeleted('entry-5');
-
-			// After delete, window should shrink by 1 but entries should still be valid
-			const result = await service.ensureWindow(0, 20);
-			expect(result).toHaveLength(19);
-
-			// Verify chunk boundaries were updated (no duplicates or gaps)
-			const ids = new Set(result.map(e => e.id));
-			expect(ids.size).toBe(result.length);
-		});
-
-		it('should maintain correct order during cascades', async () => {
-			await service.ensureWindow(0, 20);
-
-			service.applyEntryDeleted('entry-8');
-			const newEntry = createEntry('inserted-x', 'X');
-			service.applyEntryInserted(newEntry, 12);
-
-			const result = await service.ensureWindow(0, 20);
-			const ids = result.map(e => e.id);
-
-			// Verify no duplicates
-			const uniqueIds = new Set(ids);
-			expect(uniqueIds.size).toBe(ids.length);
-
-			// Verify order is still valid (monotonically increasing except for inserted)
-			expect(ids).toContainEqual('inserted-x');
-		});
-
-			it('should cascade delete at chunk boundary and adjust next chunk bounds', async () => {
-				await service.ensureWindow(0, 20);
-
-				service.applyEntryDeleted('entry-9'); // last slot of chunk 0
-
-				const result = await service.ensureWindow(0, 20);
-				expect(result[9].id).toBe('entry-10');
-				expect(result[10].id).toBe('entry-11');
-			});
-
-			it('should cascade insert at chunk boundary across multiple chunks', async () => {
-				await service.ensureWindow(0, 30);
-
-				const newEntry = createEntry('insert-boundary', 'Boundary');
-				service.applyEntryInserted(newEntry, 10); // first slot of chunk 1
-
-				const result = await service.ensureWindow(0, 30);
-				expect(result[10].id).toBe('insert-boundary');
-				// ensure original entries shifted but still ordered (entry-19 pushed toward chunk 2)
-				expect(result).toContainEqual(expect.objectContaining({ id: 'entry-19' }));
-			});
-
-			it('should handle insert then delete in adjacent chunks without duplicates', async () => {
-				await service.ensureWindow(0, 25);
-
-				const inserted = createEntry('insert-adjacent', 'Adj');
-				service.applyEntryInserted(inserted, 10); // at boundary
-				service.applyEntryDeleted('entry-15'); // next chunk
-
-				const result = await service.ensureWindow(0, 25);
-				const ids = result.map(e => e.id);
-				expect(new Set(ids).size).toBe(ids.length);
-				expect(ids).toContain('insert-adjacent');
-			});
-
-			it('should recover after transient fetch failure', async () => {
-				provider.failNextWindowForStart(0);
-				await expect(service.ensureWindow(0, 10)).rejects.toThrow('Transient fetch failure');
-
-				const result = await service.ensureWindow(0, 10);
-				expect(result).toHaveLength(10);
-			});
-
-			it('should handle window shift without stale chunk interference', async () => {
-				await service.ensureWindow(0, 15);
-				const firstWindow = await service.ensureWindow(0, 15);
-				expect(firstWindow[0].id).toBe('entry-0');
-
-				const shifted = await service.ensureWindow(20, 5);
-				expect(shifted[0].id).toBe('entry-20');
-				expect(shifted).not.toContainEqual(expect.objectContaining({ id: 'entry-0' }));
-			});
-
-			it('should handle delete then insert at same absolute index', async () => {
-				await service.ensureWindow(0, 20);
-
-				service.applyEntryDeleted('entry-7');
-				const replacement = createEntry('replacement-7', 'Repl');
-				service.applyEntryInserted(replacement, 7);
-
-				const result = await service.ensureWindow(0, 20);
-				expect(result[7].id).toBe('replacement-7');
-				expect(result).not.toContainEqual(expect.objectContaining({ id: 'entry-7' }));
-			});
-	});
-});
diff --git a/frontend/viewer/src/lib/services/chunk-cache-service.ts b/frontend/viewer/src/lib/services/chunk-cache-service.ts
deleted file mode 100644
index 896045cb0e..0000000000
--- a/frontend/viewer/src/lib/services/chunk-cache-service.ts
+++ /dev/null
@@ -1,419 +0,0 @@
-import type {IEntry} from '$lib/dotnet-types/generated-types/MiniLcm/Models/IEntry';
-
-/**
- * Represents a fixed-size chunk of entries in the cache.
- * Each chunk stores entries for a contiguous range of indices.
- */
-interface Chunk {
-	/** Starting index of this chunk (0-based) */
-	start: number;
-	/** Ending index (exclusive) of this chunk */
-	endExclusive: number;
-	/** Cached entries in this chunk */
-	entries: IEntry[];
-	/** Current status: 'ready', 'loading', or 'stale' */
-	status: 'ready' | 'loading' | 'stale';
-}
-
-/**
- * Callback for observing chunk cache changes.
- */
-export interface ChunkCacheObserver {
-	/**
-	 * Called when a chunk is updated (entry inserted/updated/deleted).
-	 * index: the chunk index in the cache map
-	 */
-	onChunkChanged?: (chunkIndex: number) => void;
-	/**
-	 * Called when a new window of entries is ready (e.g., after ensureWindow completes).
-	 */
-	onWindowReady?: () => void;
-	/**
-	 * Called when an error occurs.
-	 */
-	onError?: (error: Error) => void;
-}
-
-/**
- * Interface for the backend API that provides entry windows and row indices.
- * This is typically implemented by an HTTP client talking to MiniLcm endpoints.
- */
-export interface EntryWindowProvider {
-	/**
-	 * Fetch a window of entries.
-	 * start: 0-based offset
-	 * size: number of entries to fetch
-	 * Returns: { entries, firstIndex } where firstIndex is the 0-based start
-	 */
-	fetchWindow(start: number, size: number): Promise<{ entries: IEntry[]; firstIndex: number }>;
-
-	/**
-	 * Get the 0-based row index of a specific entry.
-	 * Typically called during jump-to-entry flow.
-	 */
-	fetchRowIndex(entryId: string): Promise<{ rowIndex: number; entry: IEntry }>;
-}
-
-/**
- * ChunkCacheService manages chunk-based virtual scrolling.
- *
- * Responsibilities:
- * - Maintain a map of chunks keyed by chunk index
- * - Support ensureWindow(start, size) to fetch and cache entry windows
- * - Apply entry updates/deletes/inserts with cascade rebalancing
- * - Emit observable events for Svelte reactivity
- *
- * Chunk math:
- * - Chunks are fixed-size (except the tail)
- * - Chunk index = Math.floor(startIndex / chunkSize)
- * - When deleting/inserting, cascade between chunks to maintain alignment
- */
-export class ChunkCacheService {
-	private chunks = new Map<number, Chunk>();
-	private requestedWindow: { start: number; size: number } | null = null;
-	private pendingWindows = new Map<number, Promise<void>>();
-	private observers: ChunkCacheObserver[] = [];
-	private isLoading = false;
-
-	constructor(
-		private provider: EntryWindowProvider,
-		private chunkSize: number = 50
-	) {}
-
-	/**
-	 * Subscribe to cache change events.
-	 * Returns an unsubscribe function.
-	 */
-	subscribe(observer: ChunkCacheObserver): () => void {
-		this.observers.push(observer);
-		return () => {
-			const idx = this.observers.indexOf(observer);
-			if (idx >= 0) this.observers.splice(idx, 1);
-		};
-	}
-
-	/**
-	 * Ensure that a window of entries is loaded and ready.
-	 * - If chunks are already cached, returns immediately
-	 * - Otherwise, fetches from backend and fills chunks
-	 * - Emits onWindowReady when complete
-	 */
-	async ensureWindow(start: number, size: number): Promise<IEntry[]> {
-		this.requestedWindow = { start, size };
-
-		const chunkIndices = this.getChunkIndicesForWindow(start, size);
-		const missingChunks = chunkIndices.filter(idx => !this.chunks.has(idx));
-
-		if (missingChunks.length === 0) {
-			// All chunks already cached, return immediately
-			return this.extractWindow(start, size);
-		}
-
-		// Fetch missing chunks
-		for (const chunkIdx of missingChunks) {
-			// Avoid duplicate fetches by using a promise cache
-			if (!this.pendingWindows.has(chunkIdx)) {
-				const promise = this.fetchAndCacheChunk(chunkIdx);
-				this.pendingWindows.set(chunkIdx, promise);
-				void promise
-					.then(() => {
-						this.pendingWindows.delete(chunkIdx);
-					})
-					.catch((err: unknown) => {
-						this.pendingWindows.delete(chunkIdx);
-						this.notifyError(err instanceof Error ? err : new Error(String(err)));
-					});
-			}
-
-			// Wait for this chunk to be fetched
-			await this.pendingWindows.get(chunkIdx)!;
-		}
-
-		// All chunks are now ready
-		this.notifyWindowReady();
-		return this.extractWindow(start, size);
-	}
-
-	/**
-	 * Apply an entry update (modification to existing entry).
-	 * If the entry is cached, updates it in-place and emits onChunkChanged.
-	 */
-	applyEntryUpdated(entry: IEntry): void {
-		for (const [chunkIdx, chunk] of this.chunks) {
-			const idx = chunk.entries.findIndex(e => e.id === entry.id);
-			if (idx >= 0) {
-				chunk.entries[idx] = entry;
-				this.notifyChunkChanged(chunkIdx);
-				return;
-			}
-		}
-	}
-
-	/**
-	 * Apply an entry deletion.
-	 * - Removes entry from cache
-	 * - Cascades deletions to subsequent chunks (squeezes left)
-	 * - If cascade reaches a chunk outside the requested window, marks it stale
-	 * - May trigger a tail refill if visible chunk becomes short
-	 */
-	applyEntryDeleted(entryId: string): void {
-		for (const [chunkIdx, chunk] of this.chunks) {
-			const idx = chunk.entries.findIndex(e => e.id === entryId);
-			if (idx >= 0) {
-				// Found the entry, remove it
-				chunk.entries.splice(idx, 1);
-				this.notifyChunkChanged(chunkIdx);
-
-				// Cascade: pull entries from subsequent chunks
-				this.cascadeDelete(chunkIdx);
-				return;
-			}
-		}
-	}
-
-	/**
-	 * Apply an entry insertion at an absolute index.
-	 * - Inserts entry into the owning chunk
-	 * - Cascades the last element to the next chunk
-	 * - Continues cascade until a chunk outside requested window, then discards
-	 */
-	applyEntryInserted(entry: IEntry, absoluteIndex: number): void {
-		const chunkIdx = Math.floor(absoluteIndex / this.chunkSize);
-		const offsetInChunk = absoluteIndex % this.chunkSize;
-
-		// Ensure the chunk exists
-		if (!this.chunks.has(chunkIdx)) {
-			this.chunks.set(chunkIdx, {
-				start: chunkIdx * this.chunkSize,
-				endExclusive: (chunkIdx + 1) * this.chunkSize,
-				entries: [],
-				status: 'ready'
-			});
-		}
-
-		const chunk = this.chunks.get(chunkIdx)!;
-		chunk.entries.splice(offsetInChunk, 0, entry);
-		this.notifyChunkChanged(chunkIdx);
-
-		// Cascade: overflow pushes to next chunk
-		this.cascadeInsert(chunkIdx);
-	}
-
-	/**
-	 * Clear all cached chunks and reset state.
-	 */
-	clear(): void {
-		this.chunks.clear();
-		this.requestedWindow = null;
-		this.pendingWindows.clear();
-		this.isLoading = false;
-	}
-
-	// ===== PRIVATE HELPERS =====
-
-	/**
-	 * Get the chunk indices that cover the requested window.
-	 */
-	private getChunkIndicesForWindow(start: number, size: number): number[] {
-		const end = start + size;
-		const startChunk = Math.floor(start / this.chunkSize);
-		const endChunk = Math.floor((end - 1) / this.chunkSize) + 1;
-
-		const indices: number[] = [];
-		for (let i = startChunk; i < endChunk; i++) {
-			indices.push(i);
-		}
-		return indices;
-	}
-
-	/**
-	 * Fetch a single chunk from the backend and cache it.
-	 */
-	private async fetchAndCacheChunk(chunkIdx: number, chunkStartOverride?: number): Promise<void> {
-		const chunkStart = chunkStartOverride ?? chunkIdx * this.chunkSize;
-
-		// Mark as loading
-		const chunk: Chunk = {
-			start: chunkStart,
-			endExclusive: chunkStart + this.chunkSize,
-			entries: [],
-			status: 'loading'
-		};
-		this.chunks.set(chunkIdx, chunk);
-
-		try {
-			const { entries, firstIndex } = await this.provider.fetchWindow(chunkStart, this.chunkSize);
-			chunk.entries = entries;
-			chunk.status = 'ready';
-			// Align chunk boundaries based on actual firstIndex
-			chunk.start = firstIndex;
-			chunk.endExclusive = firstIndex + entries.length;
-			// Don't notify on initial fetch - only notify when data is explicitly modified
-		} catch (err) {
-			// Drop errored chunk so callers treat this range as uncached and retry later
-			this.chunks.delete(chunkIdx);
-			throw err;
-		}
-	}
-
-	/**
-	 * Extract a window from cached chunks.
-	 * Concatenates entries from relevant chunks in deterministic chunk-index order,
-	 * accounting for chunk start positions.
-	 */
-	private extractWindow(start: number, size: number): IEntry[] {
-		const result: IEntry[] = [];
-		const endIndex = start + size;
-
-		// Get chunk indices that should cover this window
-		const chunkIndices = this.getChunkIndicesForWindow(start, size);
-
-		// Iterate in deterministic chunk-index order to ensure consistent output
-		for (const chunkIdx of chunkIndices) {
-			const chunk = this.chunks.get(chunkIdx);
-			if (!chunk) {
-				// Gap in chunks - window is incomplete
-				break;
-			}
-
-			// Skip chunks that are completely before or after the window
-			if (chunk.endExclusive <= start || chunk.start >= endIndex) {
-				continue;
-			}
-
-			// Calculate the slice range within this chunk
-			const chunkStart = Math.max(0, start - chunk.start);
-			const chunkEnd = Math.min(chunk.entries.length, endIndex - chunk.start);
-
-			for (let i = chunkStart; i < chunkEnd; i++) {
-				result.push(chunk.entries[i]);
-			}
-		}
-
-		return result;
-	}
-
-	/**
-	 * Cascade deletions: when an entry is deleted, the first entry from the next chunk
-	 * moves into this chunk's empty slot. Updates chunk bounds and marks tail stale if needed.
-	 */
-	private cascadeDelete(chunkIdx: number): void {
-		const nextChunkIdx = chunkIdx + 1;
-		const nextChunk = this.chunks.get(nextChunkIdx);
-
-		if (!nextChunk || nextChunk.entries.length === 0) {
-			// No more entries to pull from next chunk
-			// Check if this chunk is the tail and is inside the visible window
-			const chunk = this.chunks.get(chunkIdx)!;
-			if (this.isChunkVisible(chunk) && chunk.entries.length < this.chunkSize && nextChunk) {
-				// Visible tail chunk is now short - mark stale and refill
-				chunk.status = 'stale';
-				this.refillVisibleTail(chunkIdx);
-			}
-			return;
-		}
-
-		// Pull the first entry from the next chunk into this chunk
-		const entryFromNext = nextChunk.entries.shift()!;
-		const chunk = this.chunks.get(chunkIdx)!;
-		chunk.entries.push(entryFromNext);
-
-		// Update next chunk's start position (entries shifted left)
-		nextChunk.start++;
-		nextChunk.endExclusive = nextChunk.start + nextChunk.entries.length;
-
-		this.notifyChunkChanged(nextChunkIdx);
-
-		// Continue cascading
-		this.cascadeDelete(nextChunkIdx);
-	}
-
-	/**
-	 * Cascade inserts: when an entry is inserted, the last entry overflows to the next chunk.
-	 * Discards overflow outside the requestedWindow to avoid accumulating stale data.
-	 * Updates chunk bounds for entries that moved.
-	 */
-	private cascadeInsert(chunkIdx: number): void {
-		const chunk = this.chunks.get(chunkIdx)!;
-
-		if (chunk.entries.length <= this.chunkSize) {
-			// Chunk is not oversized, no cascade needed
-			return;
-		}
-
-		// Pop the last entry and push to next chunk
-		const overflowEntry = chunk.entries.pop()!;
-
-		const nextChunkIdx = chunkIdx + 1;
-		let nextChunk = this.chunks.get(nextChunkIdx);
-
-		if (!nextChunk) {
-			// Check if next chunk is outside the visible window
-			if (this.requestedWindow && (nextChunkIdx * this.chunkSize) >= this.requestedWindow.start + this.requestedWindow.size) {
-				// Overflow outside window - discard it
-				return;
-			}
-			// Create next chunk if it doesn't exist and is inside window
-			nextChunk = {
-				start: nextChunkIdx * this.chunkSize,
-				endExclusive: (nextChunkIdx + 1) * this.chunkSize,
-				entries: [],
-				status: 'ready'
-			};
-			this.chunks.set(nextChunkIdx, nextChunk);
-		}
-
-		nextChunk.entries.unshift(overflowEntry);
-		// Update next chunk's start position (entries shifted right)
-		nextChunk.start = nextChunkIdx * this.chunkSize;
-		nextChunk.endExclusive = nextChunk.start + nextChunk.entries.length;
-
-		this.notifyChunkChanged(nextChunkIdx);
-
-		// Recursively cascade if next chunk is also oversized
-		this.cascadeInsert(nextChunkIdx);
-	}
-
-	// ===== TAIL REFILL =====
-
-	/**
-	 * Check if a chunk overlaps with the currently requested window.
-	 */
-	private isChunkVisible(chunk: Chunk): boolean {
-		if (!this.requestedWindow) return false;
-		const windowEnd = this.requestedWindow.start + this.requestedWindow.size;
-		return !(chunk.endExclusive <= this.requestedWindow.start || chunk.start >= windowEnd);
-	}
-
-	/**
-	 * When a visible tail chunk becomes short after a delete, refill it from the backend.
-	 */
-	private refillVisibleTail(chunkIdx: number): void {
-		const chunk = this.chunks.get(chunkIdx);
-		if (!chunk) return;
-
-		// Fire off a refill fetch for this chunk
-		const promise = this.fetchAndCacheChunk(chunkIdx, chunk.start)
-			.catch((err: unknown) => {
-				this.notifyError(err instanceof Error ? err : new Error(String(err)));
-			});
-		this.pendingWindows.set(chunkIdx, promise);
-		void promise.finally(() => {
-			this.pendingWindows.delete(chunkIdx);
-		});
-	}
-
-	// ===== NOTIFICATIONS =====
-
-	private notifyChunkChanged(chunkIdx: number): void {
-		this.observers.forEach(obs => obs.onChunkChanged?.(chunkIdx));
-	}
-
-	private notifyWindowReady(): void {
-		this.observers.forEach(obs => obs.onWindowReady?.());
-	}
-
-	private notifyError(error: Error): void {
-		this.observers.forEach(obs => obs.onError?.(error));
-	}
-}

From 85b76c5c445ab686f43b314241b5b45567f97277 Mon Sep 17 00:00:00 2001
From: Tim Haasdyk <tim_haasdyk@sil.org>
Date: Mon, 19 Jan 2026 14:03:26 +0100
Subject: [PATCH 12/42] Add entry-loader-service tests

---
 .../entry-loader-service.svelte.test.ts       | 108 ++++++++++++++++++
 1 file changed, 108 insertions(+)
 create mode 100644 frontend/viewer/src/lib/services/entry-loader-service.svelte.test.ts

diff --git a/frontend/viewer/src/lib/services/entry-loader-service.svelte.test.ts b/frontend/viewer/src/lib/services/entry-loader-service.svelte.test.ts
new file mode 100644
index 0000000000..77f35539c0
--- /dev/null
+++ b/frontend/viewer/src/lib/services/entry-loader-service.svelte.test.ts
@@ -0,0 +1,108 @@
+import {afterEach, describe, expect, it, vi} from 'vitest';
+
+import {EntryLoaderService} from '$lib/services/entry-loader-service.svelte';
+import type {IEntry} from '$lib/dotnet-types';
+import type {IMiniLcmJsInvokable} from '$lib/dotnet-types/generated-types/FwLiteShared/Services/IMiniLcmJsInvokable';
+import {defaultEntry} from '$lib/utils';
+
+function makeEntry(id: string): IEntry {
+  return {
+    ...defaultEntry(),
+    id,
+  };
+}
+
+type MiniLcmApiMock = {
+  countEntries: ReturnType<typeof vi.fn>;
+  getEntries: ReturnType<typeof vi.fn>;
+  searchEntries: ReturnType<typeof vi.fn>;
+};
+
+function createService(entries: IEntry[], totalCount = entries.length) {
+  const api: MiniLcmApiMock = {
+    countEntries: vi.fn().mockResolvedValue(totalCount),
+    getEntries: vi.fn().mockResolvedValue(entries),
+    searchEntries: vi.fn().mockResolvedValue(entries),
+  };
+
+  let service!: EntryLoaderService;
+  const cleanup = $effect.root(() => {
+    service = new EntryLoaderService({
+      miniLcmApi: () => api as unknown as IMiniLcmJsInvokable,
+      search: () => '',
+      sort: () => undefined,
+      gridifyFilter: () => undefined,
+    });
+  });
+
+  return {api, service, cleanup};
+}
+
+describe('EntryLoaderService', () => {
+  let cleanups: (() => void)[] = [];
+
+  afterEach(() => {
+    for (const cleanup of cleanups) cleanup();
+    cleanups = [];
+  });
+
+  it('loads a batch and caches entries', async () => {
+    const entry0 = makeEntry('e0');
+    const entry1 = makeEntry('e1');
+    const {api, service, cleanup} = createService([entry0, entry1]);
+    cleanups.push(cleanup);
+
+    await service.loadEntryByIndex(1);
+
+    expect(api.getEntries).toHaveBeenCalledTimes(1);
+    expect(service.getEntryByIndex(0)?.id).toBe('e0');
+    expect(service.getIndexById('e1')).toBe(1);
+  });
+
+  it('returns cached entries without refetching', async () => {
+    const entry0 = makeEntry('e0');
+    const entry1 = makeEntry('e1');
+    const {api, service, cleanup} = createService([entry0, entry1]);
+    cleanups.push(cleanup);
+
+    await service.loadEntryByIndex(0);
+    await service.loadEntryByIndex(0);
+
+    expect(api.getEntries).toHaveBeenCalledTimes(1);
+  });
+
+  it('removes entries and shifts indices', async () => {
+    const entry0 = makeEntry('e0');
+    const entry1 = makeEntry('e1');
+    const entry2 = makeEntry('e2');
+    const {service, cleanup} = createService([entry0, entry1, entry2], 3);
+    cleanups.push(cleanup);
+
+    await service.loadCount();
+    await service.loadEntryByIndex(2);
+
+    service.removeEntryById('e1');
+
+    expect(service.getIndexById('e2')).toBe(1);
+    expect(service.getEntryByIndex(1)?.id).toBe('e2');
+    expect(service.totalCount).toBe(2);
+  });
+
+  it('recalculates loaded batches when totalCount is undefined', async () => {
+    const entry0 = makeEntry('e0');
+    const entry1 = makeEntry('e1');
+    const entry2 = makeEntry('e2');
+    const {api, service, cleanup} = createService([entry0, entry1, entry2]);
+    cleanups.push(cleanup);
+
+    await service.loadEntryByIndex(0);
+    expect(api.getEntries).toHaveBeenCalledTimes(1);
+
+    service.totalCount = undefined;
+    service.removeEntryById('e0');
+
+    await service.loadEntryByIndex(2);
+
+    expect(api.getEntries).toHaveBeenCalledTimes(2);
+  });
+});

From 7fc95159f2487339ac67c803470ccb20699eef54 Mon Sep 17 00:00:00 2001
From: Tim Haasdyk <tim_haasdyk@sil.org>
Date: Tue, 20 Jan 2026 11:48:38 +0100
Subject: [PATCH 13/42] Prepare backend API for querying entry index

---
 .../Api/FwDataMiniLcmApi.cs                   |  7 ++--
 .../FwLite/FwLiteWeb/Routes/MiniLcmRoutes.cs  |  6 +--
 backend/FwLite/LcmCrdt/CrdtMiniLcmApi.cs      |  5 +--
 .../FwLite/LcmCrdt/Data/MiniLcmRepository.cs  |  8 ++--
 .../MiniLcm.Tests/EntryWindowTestsBase.cs     | 39 ++++++++-----------
 backend/FwLite/MiniLcm/IMiniLcmReadApi.cs     | 12 +++---
 backend/LfClassicData/LfClassicMiniLcmApi.cs  |  2 +-
 7 files changed, 35 insertions(+), 44 deletions(-)

diff --git a/backend/FwLite/FwDataMiniLcmBridge/Api/FwDataMiniLcmApi.cs b/backend/FwLite/FwDataMiniLcmBridge/Api/FwDataMiniLcmApi.cs
index 511eb00dd5..524cf67ac0 100644
--- a/backend/FwLite/FwDataMiniLcmBridge/Api/FwDataMiniLcmApi.cs
+++ b/backend/FwLite/FwDataMiniLcmBridge/Api/FwDataMiniLcmApi.cs
@@ -977,7 +977,7 @@ public async Task<EntryWindowResponse> GetEntriesWindow(int start, int size, str
         return new EntryWindowResponse(entries, start);
     }
 
-    public Task<EntryRowIndexResponse> GetEntryRowIndex(Guid entryId, string? query = null, QueryOptions? options = null)
+    public Task<int> GetEntryIndex(Guid entryId, string? query = null, QueryOptions? options = null)
     {
         options ??= QueryOptions.Default;
         var predicate = EntrySearchPredicate(query);
@@ -989,13 +989,12 @@ public Task<EntryRowIndexResponse> GetEntryRowIndex(Guid entryId, string? query
         {
             if (entry.Guid == entryId)
             {
-                var result = FromLexEntry(entry);
-                return Task.FromResult(new EntryRowIndexResponse(rowIndex, result));
+                return Task.FromResult(rowIndex);
             }
             rowIndex++;
         }
 
-        throw NotFoundException.ForType<Entry>(entryId);
+        return Task.FromResult(-1);
     }
 
     public async Task<Entry> CreateEntry(Entry entry, CreateEntryOptions? options = null)
diff --git a/backend/FwLite/FwLiteWeb/Routes/MiniLcmRoutes.cs b/backend/FwLite/FwLiteWeb/Routes/MiniLcmRoutes.cs
index 4afed12137..faaeb3a9a4 100644
--- a/backend/FwLite/FwLiteWeb/Routes/MiniLcmRoutes.cs
+++ b/backend/FwLite/FwLiteWeb/Routes/MiniLcmRoutes.cs
@@ -100,7 +100,7 @@ await projectProvider.OpenProject(project, context.HttpContext.RequestServices)
         api.MapGet("/entries/window", MiniLcm.GetEntriesWindow);
         api.MapGet("/entries/{search}", MiniLcm.SearchEntries);
         api.MapGet("/entry/{id:Guid}", MiniLcm.GetEntry);
-        api.MapGet("/entry/{id:Guid}/row-index", MiniLcm.GetEntryRowIndex);
+        api.MapGet("/entry/{id:Guid}/index", MiniLcm.GetEntryIndex);
         api.MapGet("/parts-of-speech", MiniLcm.GetPartsOfSpeech);
         api.MapGet("/semantic-domains", MiniLcm.GetSemanticDomains);
         api.MapGet("/publications", MiniLcm.GetPublications);
@@ -149,13 +149,13 @@ public static Task<EntryWindowResponse> GetEntriesWindow(
             return api.GetEntriesWindow(start, size, null, options.ToQueryOptions());
         }
 
-        public static Task<EntryRowIndexResponse> GetEntryRowIndex(
+        public static Task<int> GetEntryIndex(
             Guid id,
             [AsParameters] MiniLcmQueryOptions options,
             [FromServices] MiniLcmHolder holder)
         {
             var api = holder.MiniLcmApi;
-            return api.GetEntryRowIndex(id, null, options.ToQueryOptions());
+            return api.GetEntryIndex(id, null, options.ToQueryOptions());
         }
 
         public static IAsyncEnumerable<PartOfSpeech> GetPartsOfSpeech([FromServices] MiniLcmHolder holder)
diff --git a/backend/FwLite/LcmCrdt/CrdtMiniLcmApi.cs b/backend/FwLite/LcmCrdt/CrdtMiniLcmApi.cs
index 13c95b8e8e..24914b7f32 100644
--- a/backend/FwLite/LcmCrdt/CrdtMiniLcmApi.cs
+++ b/backend/FwLite/LcmCrdt/CrdtMiniLcmApi.cs
@@ -423,11 +423,10 @@ public async Task<EntryWindowResponse> GetEntriesWindow(int start, int size, str
         return new EntryWindowResponse(entries, start);
     }
 
-    public async Task<EntryRowIndexResponse> GetEntryRowIndex(Guid entryId, string? query = null, QueryOptions? options = null)
+    public async Task<int> GetEntryIndex(Guid entryId, string? query = null, QueryOptions? options = null)
     {
         await using var repo = await repoFactory.CreateRepoAsync();
-        var (rowIndex, entry) = await repo.GetEntryRowIndex(entryId, query, options);
-        return new EntryRowIndexResponse(rowIndex, entry);
+        return await repo.GetEntryIndex(entryId, query, options);
     }
 
     public async Task BulkCreateEntries(IAsyncEnumerable<Entry> entries)
diff --git a/backend/FwLite/LcmCrdt/Data/MiniLcmRepository.cs b/backend/FwLite/LcmCrdt/Data/MiniLcmRepository.cs
index 3bf6cf8dda..267d54ae29 100644
--- a/backend/FwLite/LcmCrdt/Data/MiniLcmRepository.cs
+++ b/backend/FwLite/LcmCrdt/Data/MiniLcmRepository.cs
@@ -260,24 +260,24 @@ private ValueTask<IQueryable<Entry>> ApplySorting(IQueryable<Entry> queryable, Q
         return exampleSentence;
     }
 
-    public async Task<(int RowIndex, Entry Entry)> GetEntryRowIndex(Guid entryId, string? query = null, QueryOptions? options = null)
+    public async Task<int> GetEntryIndex(Guid entryId, string? query = null, QueryOptions? options = null)
     {
         // This is a fallback implementation that's not optimal for large datasets,
         // but it works correctly. Ideally, we'd use ROW_NUMBER() window function with linq2db
         // for better performance on large entry lists. For now, we enumerate through sorted entries
         // and count until we find the target entry.
-        
+
         var rowIndex = 0;
         await foreach (var entry in GetEntries(query, options))
         {
             if (entry.Id == entryId)
             {
-                return (rowIndex, entry);
+                return rowIndex;
             }
             rowIndex++;
         }
 
-        throw NotFoundException.ForType<Entry>(entryId);
+        return -1;
     }
 
     public async Task<Publication?> GetPublication(Guid publicationId)
diff --git a/backend/FwLite/MiniLcm.Tests/EntryWindowTestsBase.cs b/backend/FwLite/MiniLcm.Tests/EntryWindowTestsBase.cs
index 59c2cc66b9..3f463c23a3 100644
--- a/backend/FwLite/MiniLcm.Tests/EntryWindowTestsBase.cs
+++ b/backend/FwLite/MiniLcm.Tests/EntryWindowTestsBase.cs
@@ -3,7 +3,7 @@
 namespace MiniLcm.Tests;
 
 /// <summary>
-/// Tests for GetEntriesWindow and GetEntryRowIndex APIs.
+/// Tests for GetEntriesWindow and GetEntryIndex APIs.
 /// These APIs are critical for chunk-based virtual scrolling.
 /// </summary>
 public abstract class EntryWindowTestsBase : MiniLcmTestBase
@@ -96,43 +96,37 @@ public async Task GetEntriesWindow_LargeWindow_ReturnsBiggerChunk()
     }
 
     [Fact]
-    public async Task GetEntryRowIndex_FirstEntry_ReturnsZero()
+    public async Task GetEntryIndex_FirstEntry_ReturnsZero()
     {
-        var result = await Api.GetEntryRowIndex(appleId);
+        var result = await Api.GetEntryIndex(appleId);
 
-        result.RowIndex.Should().Be(0);
-        result.Entry.Id.Should().Be(appleId);
-        result.Entry.LexemeForm["en"].Should().Be(Apple);
+        result.Should().Be(0);
     }
 
     [Fact]
-    public async Task GetEntryRowIndex_MiddleEntry_ReturnsCorrectIndex()
+    public async Task GetEntryIndex_MiddleEntry_ReturnsCorrectIndex()
     {
-        var result = await Api.GetEntryRowIndex(kiwiId);
+        var result = await Api.GetEntryIndex(kiwiId);
 
-        result.RowIndex.Should().Be(2);
-        result.Entry.Id.Should().Be(kiwiId);
-        result.Entry.LexemeForm["en"].Should().Be(Kiwi);
+        result.Should().Be(2);
     }
 
     [Fact]
-    public async Task GetEntryRowIndex_LastEntry_ReturnsLastIndex()
+    public async Task GetEntryIndex_LastEntry_ReturnsLastIndex()
     {
-        var result = await Api.GetEntryRowIndex(peachId);
+        var result = await Api.GetEntryIndex(peachId);
 
-        result.RowIndex.Should().Be(4);
-        result.Entry.Id.Should().Be(peachId);
-        result.Entry.LexemeForm["en"].Should().Be(Peach);
+        result.Should().Be(4);
     }
 
     [Fact]
-    public async Task GetEntryRowIndex_NonExistentEntry_Throws()
+    public async Task GetEntryIndex_NonExistentEntry_ReturnsNegativeOne()
     {
         var nonExistentId = Guid.NewGuid();
 
-        var action = () => Api.GetEntryRowIndex(nonExistentId);
+        var result = await Api.GetEntryIndex(nonExistentId);
 
-        await action.Should().ThrowAsync<NotFoundException>();
+        result.Should().Be(-1);
     }
 
     [Fact]
@@ -175,11 +169,10 @@ public async Task GetEntriesWindow_MultipleCallsCoverAllEntries()
     }
 
     [Fact]
-    public async Task GetEntryRowIndex_CanPositionWindow()
+    public async Task GetEntryIndex_CanPositionWindow()
     {
-        // Get row index for an entry
-        var indexResult = await Api.GetEntryRowIndex(kiwiId);
-        var rowIndex = indexResult.RowIndex;
+        // Get index for an entry
+        var rowIndex = await Api.GetEntryIndex(kiwiId);
 
         // Use it to fetch a window around that entry
         var windowResult = await Api.GetEntriesWindow(rowIndex, 2);
diff --git a/backend/FwLite/MiniLcm/IMiniLcmReadApi.cs b/backend/FwLite/MiniLcm/IMiniLcmReadApi.cs
index 26721e3c1c..23c87b0d84 100644
--- a/backend/FwLite/MiniLcm/IMiniLcmReadApi.cs
+++ b/backend/FwLite/MiniLcm/IMiniLcmReadApi.cs
@@ -28,7 +28,11 @@ public interface IMiniLcmReadApi
     Task<SemanticDomain?> GetSemanticDomain(Guid id);
     Task<ExampleSentence?> GetExampleSentence(Guid entryId, Guid senseId, Guid id);
     Task<EntryWindowResponse> GetEntriesWindow(int start, int size, string? query = null, QueryOptions? options = null);
-    Task<EntryRowIndexResponse> GetEntryRowIndex(Guid entryId, string? query = null, QueryOptions? options = null);
+    /// <summary>
+    /// Get the index of an entry within the sorted/filtered entry list.
+    /// Returns -1 if the entry is not found.
+    /// </summary>
+    Task<int> GetEntryIndex(Guid entryId, string? query = null, QueryOptions? options = null);
 
     Task<ReadFileResponse> GetFileStream(MediaUri mediaUri)
     {
@@ -42,11 +46,7 @@ public record EntryWindowResponse(
 {
 }
 
-public record EntryRowIndexResponse(
-    int RowIndex,
-    Entry Entry)
-{
-}
+
 
 public record FilterQueryOptions(
     ExemplarOptions? Exemplar = null,
diff --git a/backend/LfClassicData/LfClassicMiniLcmApi.cs b/backend/LfClassicData/LfClassicMiniLcmApi.cs
index c335d76d86..59427c5889 100644
--- a/backend/LfClassicData/LfClassicMiniLcmApi.cs
+++ b/backend/LfClassicData/LfClassicMiniLcmApi.cs
@@ -430,7 +430,7 @@ public async Task<EntryWindowResponse> GetEntriesWindow(int start, int size, str
         throw new NotImplementedException();
     }
 
-    public async Task<EntryRowIndexResponse> GetEntryRowIndex(Guid entryId, string? query = null, QueryOptions? options = null)
+    public Task<int> GetEntryIndex(Guid entryId, string? query = null, QueryOptions? options = null)
     {
         throw new NotImplementedException();
     }

From 8e27a540c9ab714467655f1f445eae73f0d6d89b Mon Sep 17 00:00:00 2001
From: Tim Haasdyk <tim_haasdyk@sil.org>
Date: Wed, 21 Jan 2026 13:49:26 +0100
Subject: [PATCH 14/42] v2 test improvements with added event handling

---
 frontend/viewer/playwright.config.ts          |   3 +-
 .../src/lib/services/ENTRY_LOADER_PLAN.md     | 149 +++++++++-
 frontend/viewer/src/lib/services/event-bus.ts |   4 +
 .../src/project/demo/in-memory-demo-api.ts    |  96 +++----
 frontend/viewer/tests/entries-list-v2.test.ts | 259 ++++++++++++++++++
 frontend/viewer/tests/test.d.ts               |  10 +
 6 files changed, 447 insertions(+), 74 deletions(-)
 create mode 100644 frontend/viewer/tests/entries-list-v2.test.ts
 create mode 100644 frontend/viewer/tests/test.d.ts

diff --git a/frontend/viewer/playwright.config.ts b/frontend/viewer/playwright.config.ts
index 094f0c9d5e..99f0384271 100644
--- a/frontend/viewer/playwright.config.ts
+++ b/frontend/viewer/playwright.config.ts
@@ -1,5 +1,6 @@
-import { defineConfig, devices, type ReporterDescription } from '@playwright/test';
+import {defineConfig, devices, type ReporterDescription} from '@playwright/test';
 import * as testEnv from '../tests/envVars';
+
 const vitePort = '5173';
 const dotnetPort = '5137';
 const autoStartServer = process.env.AUTO_START_SERVER ? Boolean(process.env.AUTO_START_SERVER) : false;
diff --git a/frontend/viewer/src/lib/services/ENTRY_LOADER_PLAN.md b/frontend/viewer/src/lib/services/ENTRY_LOADER_PLAN.md
index 6348492527..688d96ad48 100644
--- a/frontend/viewer/src/lib/services/ENTRY_LOADER_PLAN.md
+++ b/frontend/viewer/src/lib/services/ENTRY_LOADER_PLAN.md
@@ -25,10 +25,56 @@ Refactor `EntriesList.svelte` to use virtual scrolling with on-demand entry load
 
 ### V2 (Future Enhancement)
 
-Add `getEntryIndex(entryId, queryOptions)` API endpoint to enable:
-- Jump-to-entry by ID
+✅ **Backend API complete**: `GetEntryIndex(entryId, query?, options?) → int` (returns -1 if not found)
+
+Use `getEntryIndex` to enable:
+- Jump-to-entry by ID (e.g., reload with `?entryId=X`, clearing filter with entry selected)
 - Smart insert for new entries (know exact position)
-- Avoid full reset on events for entries not in cache
+- Quiet reset for events affecting entries not in cache
+
+#### UI Reactivity for Cache Updates
+
+**Problem**: `Delayed.svelte` watches function references `[load, getCached]`. When `EntryLoaderService` updates the cache, these references don't change, so the component doesn't re-render.
+
+**Solution**: Version-based VList keys.
+
+```typescript
+// EntryLoaderService
+#entryVersions = new SvelteMap<number, number>();
+
+getVersion(index: number): number {
+  return this.#entryVersions.get(index) ?? 0;
+}
+
+// In updateEntry():
+this.#entryVersions.set(index, (this.#entryVersions.get(index) ?? 0) + 1);
+```
+
+```svelte
+<!-- EntriesList.svelte -->
+<VList
+  data={indexArray}
+  getKey={(index) => entryLoader.getEntryByIndex(index)?.id ?? `skeleton-${index}`}
+>
+  {#snippet children(index)}
+    {#key entryLoader.getVersion(index)}
+      <Delayed
+        getCached={() => entryLoader.getEntryByIndex(index)}
+        load={() => entryLoader.loadEntryByIndex(index)}
+        delay={250}
+      >
+        <!-- entry row content -->
+      </Delayed>
+    {/key}
+  {/snippet}
+</VList>
+```
+
+**Two-layer reactivity:**
+1. **`getKey` (entry ID)**: Ensures VList tracks items by identity, not position. On insert/delete, items keep their correct keys. Unloaded items use `skeleton-{index}` until loaded.
+2. **`{#key}` (version)**: Forces re-render when an entry is updated in-place. When version increments, `{#key}` destroys and recreates `Delayed`, which re-queries `getCached()`.
+
+> **Note**: Key changes from `skeleton-X` to entry ID on load. This is fine — the item was a skeleton anyway, and re-mounting a freshly loaded item is expected.
 
 ## Data Structures
 
@@ -75,11 +121,26 @@ Given index N:
 
 ## Future: Event Handling (V2)
 
-| Event | Action |
-|-------|--------|
-| Delete in cache | Remove, shift indices, decrement count |
-| Delete not in cache | Full reset (can't query deleted entry's position) |
-| Add/Update | Call `getEntryIndex()` → insert at position or ignore if outside loaded batches |
+| Event | Condition | Action |
+|-------|-----------|--------|
+| Delete | In cache | Remove, shift indices, decrement count |
+| Delete | Not in cache | Full reset (can't query deleted entry's position) |
+| Update | In cache | Update cache, increment version |
+| Update | Not in cache | Quiet reset (see below) |
+| Add | In loaded batch | Insert at position, shift subsequent, increment count |
+| Add | After all loaded | Increment count only (entry will load on scroll) |
+| Add | Before loaded batch | Quiet reset |
+
+### Quiet Reset
+
+When an event affects entries outside the cache but we want to preserve UX:
+
+1. Clear cache and loaded batch tracking
+2. Determine "anchor" batch(es) — the last 1-2 batches that entries were pulled from
+3. Immediately reload those batches (no loading indicators)
+4. Maintain scroll position (center entry should remain visible)
+
+This avoids jarring skeleton flashes for events the user can't see.
 
 ## Answers to Design Questions
 
@@ -130,4 +191,76 @@ getIndexById(id: string): number | undefined;             // from incremental id
 removeEntryById(id: string): void;                        // handles delete
 updateEntry(entry: IEntry): void;                         // handles update
 reset(): void;                                            // full reset
+
+// V2 additions
+getVersion(index: number): number;                        // for VList key invalidation
+```
+
+## V2 Testing Strategy
+
+Tests live in `frontend/viewer/tests/entries-list-v2.test.ts`.
+
+### Test Utilities
+
+**Creating an entry at a specific index:**
+```typescript
+// Get entry at targetIndex-1, append '-inserted' to its headword
+// This guarantees the new entry sorts immediately after (at targetIndex)
+const entryBefore = await demoApi.getEntries({offset: targetIndex - 1, count: 1, order: ...});
+const newHeadword = (entryBefore?.lexemeForm?.seh ?? '#') + '-inserted';
+const entry = await demoApi.createEntry({id: crypto.randomUUID(), lexemeForm: {seh: newHeadword}, ...});
 ```
+
+**Measuring item height (once per test):**
+```typescript
+async function getItemHeight(page: Page): Promise<number> {
+  const {entryRows} = getLocators(page);
+  await expect(entryRows.first()).toBeVisible();
+  
+  // Measure two consecutive items to get height + gap
+  const firstBox = await entryRows.first().boundingBox();
+  const secondBox = await entryRows.nth(1).boundingBox();
+  if (!firstBox || !secondBox) throw new Error('Could not measure entry rows');
+  
+  return secondBox.y - firstBox.y; // Includes margin/gap
+}
+```
+
+**Scrolling to an index:**
+```typescript
+async function scrollToIndex(page: Page, targetIndex: number, itemHeight: number): Promise<void> {
+  const {vlist} = getLocators(page);
+  const targetScroll = targetIndex * itemHeight;
+  await vlist.evaluate((el, target) => { el.scrollTop = target; }, targetScroll);
+  await page.waitForTimeout(300);
+  await expect(page.locator('[data-skeleton]')).toHaveCount(0, {timeout: 5000});
+}
+```
+
+> **Note**: Measure `itemHeight` once at test start, reuse for all scroll operations in that test.
+
+**Finding center-visible entry:**
+```typescript
+// Get VList container bounds, find entry row whose box contains centerY
+const containerBox = await vlist.boundingBox();
+const centerY = containerBox.y + containerBox.height / 2;
+// Iterate entry rows, find one where box.y <= centerY < box.y + box.height
+```
+
+### V2 Test Cases
+
+| Test | Setup | Action | Verification |
+|------|-------|--------|--------------|
+| **Entry added in loaded batch** | View batch 0 | Create entry at index 25 | New entry at 25 contains `-inserted`; old 25 now at 26; old 49 pushed to 50; count +1 |
+| **Entry added after loaded** | View batch 0 | Create entry at index 5000 | Count +1; visible unchanged; scroll to 5000 → entry visible |
+| **Entry added before loaded** | Scroll to batch 2 | Create entry at index 25 | Center entry text unchanged after reset; count +1 |
+| **Entry updated not in cache** | View batch 0 | Update entry at index 100 | No visible change; scroll to 100 → updated text visible |
+
+### Batch Boundary Verification (Test 1)
+
+When inserting at index 25 with batch size 50:
+- Entry at old index 49 (last in batch 0) gets pushed to index 50 (first in batch 1)
+- After insert, scroll to verify:
+  - Index 49 shows what was previously at 48
+  - Index 50 shows what was previously at 49
+- This ensures no entries are lost or duplicated at batch boundaries
diff --git a/frontend/viewer/src/lib/services/event-bus.ts b/frontend/viewer/src/lib/services/event-bus.ts
index ee64e1c06d..8f7d5adbf2 100644
--- a/frontend/viewer/src/lib/services/event-bus.ts
+++ b/frontend/viewer/src/lib/services/event-bus.ts
@@ -102,6 +102,10 @@ export class ProjectEventBus {
     this.notifyProjectEvent({entryId, type: FwEventType.EntryDeleted, isGlobal: false} satisfies IEntryDeletedEvent);
   }
 
+  public notifyEntryUpdated(entry: IEntry) {
+    this.notifyProjectEvent({entry, type: FwEventType.EntryChanged, isGlobal: false} satisfies IEntryChangedEvent);
+  }
+
   private notifyProjectEvent<T extends IFwEvent>(event: T) {
     this.eventBus.notifyEvent({
       type: FwEventType.ProjectEvent,
diff --git a/frontend/viewer/src/project/demo/in-memory-demo-api.ts b/frontend/viewer/src/project/demo/in-memory-demo-api.ts
index 002d5a98d9..9692e3c46c 100644
--- a/frontend/viewer/src/project/demo/in-memory-demo-api.ts
+++ b/frontend/viewer/src/project/demo/in-memory-demo-api.ts
@@ -5,7 +5,6 @@ import {
   type IComplexFormComponent,
   type IComplexFormType,
   type IEntry,
-  type IEntriesWindow,
   type IExampleSentence,
   type IFilterQueryOptions,
   type IMiniLcmJsInvokable,
@@ -25,7 +24,7 @@ import {entries, partsOfSpeech, projectName, writingSystems} from './demo-entry-
 import {WritingSystemService} from '../data/writing-system-service.svelte';
 import {FwLitePlatform} from '$lib/dotnet-types/generated-types/FwLiteShared/FwLitePlatform';
 import {delay} from '$lib/utils/time';
-import {initProjectContext, ProjectContext} from '$project/project-context.svelte';
+import {initProjectContext, type ProjectContext} from '$project/project-context.svelte';
 import type {IFwLiteConfig} from '$lib/dotnet-types/generated-types/FwLiteShared/IFwLiteConfig';
 import type {IReadFileResponseJs} from '$lib/dotnet-types/generated-types/FwLiteShared/Services/IReadFileResponseJs';
 import {ReadFileResult} from '$lib/dotnet-types/generated-types/MiniLcm/Media/ReadFileResult';
@@ -35,6 +34,8 @@ import {UploadFileResult} from '$lib/dotnet-types/generated-types/MiniLcm/Media/
 import {DownloadProjectByCodeResult} from '$lib/dotnet-types/generated-types/FwLiteShared/Projects/DownloadProjectByCodeResult';
 import type {IUpdateService} from '$lib/dotnet-types/generated-types/FwLiteShared/Services/IUpdateService';
 import {type IAvailableUpdate, UpdateResult} from '$lib/dotnet-types/generated-types/FwLiteShared/AppUpdate';
+import {type EventBus, useEventBus, ProjectEventBus} from '$lib/services/event-bus';
+import type {IJsEventListener} from '$lib/dotnet-types/generated-types/FwLiteShared/Events/IJsEventListener';
 
 function pickWs(ws: string, defaultWs: string): string {
   return ws === 'default' ? defaultWs : ws;
@@ -83,67 +84,39 @@ export const mockUpdateService: IUpdateService = {
   }
 };
 
+const mockJsEventListener: IJsEventListener = {
+  nextEventAsync: () => Promise.resolve(null!),
+  lastEvent: () => Promise.resolve(null)
+};
+
 export class InMemoryDemoApi implements IMiniLcmJsInvokable {
   #writingSystemService: WritingSystemService;
-  constructor(private projectContext: ProjectContext) {
+  #projectEventBus: ProjectEventBus;
+  constructor(private projectContext: ProjectContext, private eventBus: EventBus) {
     this.#writingSystemService = new WritingSystemService(projectContext);
+    this.#projectEventBus = new ProjectEventBus(projectContext, eventBus);
   }
   countEntries(query?: string, options?: IFilterQueryOptions): Promise<number> {
     const entries = this.getFilteredEntries(query, options);
     return Promise.resolve(entries.length);
   }
 
-  async getEntriesWindow(query?: string, options?: IQueryOptions, targetEntryId?: string): Promise<IEntriesWindow> {
-    await delay(300);
-    const allEntries = this.queryEntriesUnpaged(query, options);
-    const totalCount = allEntries.length;
-
-    let offset = options?.offset ?? 0;
-    const count = options?.count ?? 100;
-    let targetIndex: number | undefined = undefined;
-
-    // If targetEntryId is provided, find it and center the window around it
-    if (targetEntryId) {
-      const targetGlobalIndex = allEntries.findIndex(e => e.id === targetEntryId);
-      if (targetGlobalIndex !== -1) {
-        // Center the window around the target entry
-        offset = Math.max(0, targetGlobalIndex - Math.floor(count / 2));
-        // Adjust if we're near the end
-        if (offset + count > totalCount) {
-          offset = Math.max(0, totalCount - count);
-        }
-        // Calculate the index of the target within the returned window
-        targetIndex = targetGlobalIndex - offset;
-      }
-    }
-
-    const entries = allEntries.slice(offset, offset + count);
-    console.log(`[DemoAPI] getEntriesWindow: totalCount=${totalCount}, offset=${offset}, count=${count}, returning=${entries.length}, targetEntryId=${targetEntryId}, targetIndex=${targetIndex}`);
-    return {
-      entries,
-      totalCount,
-      offset,
-      targetIndex,
-    };
-  }
-
   async getEntryIndex(entryId: string, query?: string, options?: IFilterQueryOptions): Promise<number> {
     await delay(100);
     const entries = this.getFilteredSortedEntries(query, options);
     return entries.findIndex(e => e.id === entryId);
   }
 
-  public static newProjectContext() {
-    const projectContext = new ProjectContext();
-    projectContext.setup({api: new InMemoryDemoApi(projectContext), projectName, projectCode: projectName});
-    return projectContext;
-  }
   public static setup(): InMemoryDemoApi {
     const projectContext = initProjectContext();
-    const inMemoryLexboxApi = new InMemoryDemoApi(projectContext);
+    const eventBus = useEventBus();
+    const inMemoryLexboxApi = new InMemoryDemoApi(projectContext, eventBus);
     projectContext.setup({api: inMemoryLexboxApi, projectName: inMemoryLexboxApi.projectName, projectCode: inMemoryLexboxApi.projectName})
     window.lexbox.ServiceProvider.setService(DotnetService.FwLiteConfig, mockFwLiteConfig);
     window.lexbox.ServiceProvider.setService(DotnetService.UpdateService, mockUpdateService);
+    window.lexbox.ServiceProvider.setService(DotnetService.JsEventListener, mockJsEventListener);
+    window.__PLAYWRIGHT_UTILS__ = { demoApi: inMemoryLexboxApi };
+
     window.lexbox.ServiceProvider.setService(DotnetService.CombinedProjectsService, {
       localProjects(): Promise<IProjectModel[]> {
         return Promise.resolve([]);
@@ -255,25 +228,6 @@ export class InMemoryDemoApi implements IMiniLcmJsInvokable {
       .slice(options.offset, options.offset + options.count);
   }
 
-  // Returns filtered and sorted entries without pagination (for windowed queries)
-  private queryEntriesUnpaged(query: string | undefined, options: IQueryOptions | undefined): IEntry[] {
-    const entries = this.getFilteredEntries(query, options);
-
-    if (!options) return entries;
-    const defaultWs = writingSystems.vernacular[0].wsId;
-    const sortWs = pickWs(options.order.writingSystem, defaultWs);
-    return entries
-      .sort((e1, e2) => {
-        const v1 = this.#writingSystemService.headword(e1, sortWs);
-        const v2 = this.#writingSystemService.headword(e2, sortWs);
-        if (!v2) return -1;
-        if (!v1) return 1;
-        let compare = v1.localeCompare(v2, sortWs);
-        if (compare == 0) compare = e1.id.localeCompare(e2.id);
-        return options.order.ascending ? compare : -compare;
-      });
-  }
-
   // Returns filtered and sorted entries for index lookup
   private getFilteredSortedEntries(query?: string, options?: IFilterQueryOptions): IEntry[] {
     const entries = this.getFilteredEntries(query, options);
@@ -315,32 +269,41 @@ export class InMemoryDemoApi implements IMiniLcmJsInvokable {
 
   createEntry(entry: IEntry): Promise<IEntry> {
     this._entries.push(entry);
+    this.#projectEventBus.notifyEntryUpdated(entry);
     return Promise.resolve(entry);
   }
 
   updateEntry(_before: IEntry, after: IEntry): Promise<IEntry> {
     this._entries.splice(this._entries.findIndex(e => e.id === after.id), 1, after);
+    this.#projectEventBus.notifyEntryUpdated(after);
     return Promise.resolve(after);
   }
 
   createSense(entryGuid: string, sense: ISense): Promise<ISense> {
-    this._entries.find(e => e.id === entryGuid)?.senses.push(sense);
+    const entry = this._entries.find(e => e.id === entryGuid);
+    entry?.senses.push(sense);
+    if (entry) this.#projectEventBus.notifyEntryUpdated(entry);
     return Promise.resolve(sense);
   }
 
   createExampleSentence(entryGuid: string, senseGuid: string, exampleSentence: IExampleSentence): Promise<IExampleSentence> {
-    this._entries.find(e => e.id === entryGuid)?.senses.find(s => s.id === senseGuid)?.exampleSentences.push(exampleSentence);
+    const entry = this._entries.find(e => e.id === entryGuid);
+    entry?.senses.find(s => s.id === senseGuid)?.exampleSentences.push(exampleSentence);
+    if (entry) this.#projectEventBus.notifyEntryUpdated(entry);
     return Promise.resolve(exampleSentence);
   }
 
   deleteEntry(guid: string): Promise<void> {
-    this._entries.splice(this._entries.findIndex(e => e.id === guid), 1);
+    console.log(guid, this._entries[0].id);
+    console.log('deleted', this._entries.splice(this._entries.findIndex(e => e.id === guid), 1));
+    this.#projectEventBus.notifyEntryDeleted(guid);
     return Promise.resolve();
   }
 
   deleteSense(entryGuid: string, senseGuid: string): Promise<void> {
     const entry = this._entries.find(e => e.id === entryGuid)!;
     entry.senses.splice(entry.senses.findIndex(s => s.id === senseGuid), 1);
+    this.#projectEventBus.notifyEntryUpdated(entry);
     return Promise.resolve();
   }
 
@@ -348,6 +311,7 @@ export class InMemoryDemoApi implements IMiniLcmJsInvokable {
     const entry = this._entries.find(e => e.id === entryGuid)!;
     const sense = entry.senses.find(s => s.id === senseGuid)!;
     sense.exampleSentences.splice(sense.exampleSentences.findIndex(es => es.id === exampleSentenceGuid), 1);
+    this.#projectEventBus.notifyEntryUpdated(entry);
     return Promise.resolve();
   }
 
@@ -437,6 +401,7 @@ export class InMemoryDemoApi implements IMiniLcmJsInvokable {
     const index = entry.senses.findIndex(s => s.id == _before.id);
     if (index == -1) throw new Error(`Sense ${_before.id} not found`);
     entry.senses.splice(index, 1, _after);
+    this.#projectEventBus.notifyEntryUpdated(entry);
     return Promise.resolve(_after);
   }
 
@@ -456,6 +421,7 @@ export class InMemoryDemoApi implements IMiniLcmJsInvokable {
     const index = sense.exampleSentences.findIndex(es => es.id == _before.id);
     if (index == -1) throw new Error(`ExampleSentence ${_before.id} not found`);
     sense.exampleSentences.splice(index, 1, _after);
+    this.#projectEventBus.notifyEntryUpdated(entry);
     return Promise.resolve(_after);
   }
 
diff --git a/frontend/viewer/tests/entries-list-v2.test.ts b/frontend/viewer/tests/entries-list-v2.test.ts
new file mode 100644
index 0000000000..0b8dfe8712
--- /dev/null
+++ b/frontend/viewer/tests/entries-list-v2.test.ts
@@ -0,0 +1,259 @@
+import {type Page, expect, test} from '@playwright/test';
+import {SortField} from '$lib/dotnet-types/generated-types/MiniLcm/SortField';
+
+/**
+ * Tests for V2 virtual scrolling features:
+ * - Jump to entry (when reloading with entry selected)
+ * - Entry update/delete event handling without full reset
+ *
+ * These tests are expected to fail until the frontend integration is complete.
+ */
+
+test.describe('EntriesList V2 features', () => {
+  function getLocators(page: Page) {
+    return {
+      vlist: page.locator('[role="table"] > div > div'),
+      entryRows: page.locator('[role="table"] [role="row"]'),
+      skeletons: page.locator('[role="table"] [data-skeleton]'),
+      selectedEntry: page.locator('[role="table"] [role="row"][aria-selected="true"]'),
+    };
+  }
+
+  async function waitForProjectViewReady(page: Page, waitForTestUtils = false) {
+    await expect(page.locator('.i-mdi-loading')).toHaveCount(0, {timeout: 10000});
+    await page.waitForFunction(() => document.fonts.ready);
+    await expect(page.locator('[data-skeleton]')).toHaveCount(0, {timeout: 10000});
+    // Wait for test utilities to be available if requested
+    if (waitForTestUtils) {
+      await page.waitForFunction(() => window.__PLAYWRIGHT_UTILS__?.demoApi, {timeout: 5000});
+    }
+  }
+
+  async function getVisibleEntryTexts(page: Page) {
+    const {entryRows} = getLocators(page);
+    const texts: string[] = [];
+    const count = await entryRows.count();
+    for (let i = 0; i < Math.min(count, 10); i++) {
+      const text = await entryRows.nth(i).textContent();
+      if (text) texts.push(text.trim());
+    }
+    return texts;
+  }
+
+  test.describe('Jump to entry', () => {
+    test('reloading with entry selected scrolls to that entry', async ({page}) => {
+      // Go to project view
+      await page.goto('/testing/project-view');
+      await waitForProjectViewReady(page);
+
+      const {vlist, entryRows} = getLocators(page);
+
+      // Scroll far down to find an entry well into the list (not near the top)
+      // 6000px at ~60px per row = ~100 items down
+      await vlist.evaluate((el) => { el.scrollTop = 6000; });
+      await page.waitForTimeout(500);
+      await expect(page.locator('[data-skeleton]')).toHaveCount(0, {timeout: 5000});
+
+      // Select an entry that's in the viewport
+      // (otherwise the vlist might scroll, recycle dom elements and make the selection not match the text)
+      const entryToSelect = entryRows.nth(6);
+      await expect(entryToSelect).toBeInViewport();
+
+      // Get the text BEFORE clicking (clicking may scroll and recycle the DOM element)
+      const selectedText = await entryToSelect.textContent();
+      expect(selectedText).toBeTruthy();
+
+      // Now click to select
+      await entryToSelect.click();
+
+      // Verify the URL has the entry ID
+      const url = page.url();
+      expect(url).toContain('entryId=');
+
+      // Reload the page with the same URL (entry should remain selected)
+      await page.reload();
+      await waitForProjectViewReady(page);
+
+      // The selected entry should be visible (scrolled into view)
+      const {selectedEntry} = getLocators(page);
+      await expect(selectedEntry).toBeVisible({timeout: 10000});
+      await expect(selectedEntry).toContainText(selectedText!.slice(0, 20));
+    });
+
+    test('clearing search filter with entry selected keeps entry visible', async ({page}) => {
+      await page.goto('/testing/project-view');
+      await waitForProjectViewReady(page);
+
+      const {vlist, entryRows} = getLocators(page);
+
+      // Scroll far into the list (entries are sorted alphabetically, so we need to scroll past a-z entries)
+      const estimatedItemHeight = 60; // Approximate height of each entry row
+      // Scroll down by approximately 100 items worth of height to get to entries starting with later letters
+      const scrollDistance = 500 * estimatedItemHeight;
+      await vlist.evaluate((el, dist) => el.scrollTop = dist, scrollDistance);
+      await page.waitForTimeout(500);
+      await expect(page.locator('[data-skeleton]')).toHaveCount(0, {timeout: 5000});
+
+      // Get an entry from this position in the list (one that's now visible)
+      const visibleEntry = entryRows.first();
+      const entryText = await visibleEntry.textContent();
+      // Extract the headword (first word in the entry row)
+      const headword = entryText?.split(/\s+/).filter(Boolean)[0] ?? '';
+      expect(headword.length).toBeGreaterThan(0);
+
+      // Now filter for that headword
+      const searchInput = page.locator('input.real-input').first();
+      await searchInput.fill(headword);
+      await page.waitForTimeout(500);
+      await expect(page.locator('[data-skeleton]')).toHaveCount(0, {timeout: 5000});
+
+      // Select the entry from filtered results
+      await entryRows.first().click();
+      const selectedText = await entryRows.first().textContent();
+      expect(selectedText).toContain(headword);
+
+      // Clear the search - this reloads the full list from the beginning
+      await searchInput.clear();
+      await page.waitForTimeout(500);
+      await expect(page.locator('[data-skeleton]')).toHaveCount(0, {timeout: 5000});
+
+      // Without V2 jump-to-entry, the list will reset to the beginning
+      // and the selected entry won't be visible (it's far down in the list)
+      // With V2, the list should scroll to show the selected entry
+      const {selectedEntry} = getLocators(page);
+      await expect(selectedEntry).toBeVisible({timeout: 10000});
+      await expect(selectedEntry).toContainText(headword);
+    });
+  });
+
+  test.describe('Entry event handling', () => {
+    test.beforeEach(async ({page}) => {
+      await page.goto('/testing/project-view');
+      await waitForProjectViewReady(page, true); // Wait for test utils
+    });
+
+    test('entry delete event removes entry from list without full reset', async ({page}) => {
+      // Get the first few entries' texts before deletion
+      const initialTexts = await getVisibleEntryTexts(page);
+      expect(initialTexts.length).toBeGreaterThan(2);
+
+      // Get the ID of the first entry
+      const firstEntryId = await page.evaluate(async (headword) => {
+        const demoApi = window.__PLAYWRIGHT_UTILS__.demoApi;
+        const entries = await demoApi.getEntries({count: 1, offset: 0, order: {field: headword, writingSystem: 'default', ascending: true}});
+        return entries[0]?.id;
+      }, SortField.Headword);
+      expect(firstEntryId).toBeTruthy();
+
+      // Delete the entry via the demo API
+      await page.evaluate(async (entryId) => {
+        const testUtils = window.__PLAYWRIGHT_UTILS__;
+        await testUtils.demoApi.deleteEntry(entryId);
+      }, firstEntryId);
+
+      // Wait a bit for the event to be processed
+      await page.waitForTimeout(300);
+
+      // The first entry should now be different (what was the second entry)
+      const newTexts = await getVisibleEntryTexts(page);
+      expect(newTexts[0]).toBe(initialTexts[1]);
+
+      // The old first entry should not be in the list
+      expect(newTexts).not.toContain(initialTexts[0]);
+    });
+
+    test('entry update event updates entry in list without full reset', async ({page}) => {
+      const {entryRows} = getLocators(page);
+
+      // Get the first entry's text before update
+      const firstEntryText = await entryRows.first().textContent();
+      expect(firstEntryText).toBeTruthy();
+
+      // Get the first entry
+      const firstEntry = await page.evaluate(async (headword) => {
+        const testUtils = window.__PLAYWRIGHT_UTILS__;
+        const entries = await testUtils.demoApi.getEntries({count: 1, offset: 0, order: {field: headword, writingSystem: 'default', ascending: true}});
+        return entries[0];
+      }, SortField.Headword);
+      expect(firstEntry).toBeTruthy();
+
+      // Update the entry's headword via the demo API
+      await page.evaluate(async (entry) => {
+        const testUtils = window.__PLAYWRIGHT_UTILS__;
+        const updated = {...entry, lexemeForm: {...entry.lexemeForm, seh: 'UPDATED-' + (entry.lexemeForm.seh || entry.lexemeForm.en || 'entry')}};
+        await testUtils.demoApi.updateEntry(entry, updated);
+      }, firstEntry);
+
+      // Wait a bit for the event to be processed
+      await page.waitForTimeout(300);
+
+      // The first entry should now show the updated text
+      const newFirstEntryText = await entryRows.first().textContent();
+      expect(newFirstEntryText).toContain('UPDATED-');
+    });
+
+    test('deleting selected entry clears selection', async ({page}) => {
+      const {entryRows, selectedEntry} = getLocators(page);
+
+      // Click first entry to select it
+      await entryRows.first().click();
+      await expect(selectedEntry).toBeVisible();
+
+      // Get the selected entry ID
+      const entryId = await page.evaluate(async () => {
+        const testUtils = window.__PLAYWRIGHT_UTILS__;
+        const entries = await testUtils.demoApi.getEntries({count: 1, offset: 0, order: {field: 'Headword' as unknown as SortField, writingSystem: 'default', ascending: true}});
+        return entries[0]?.id;
+      });
+
+      // Delete via API
+      await page.evaluate(async (id) => {
+        const testUtils = window.__PLAYWRIGHT_UTILS__;
+        await testUtils.demoApi.deleteEntry(id);
+      }, entryId);
+
+      await page.waitForTimeout(300);
+
+      // Selection should be cleared (no entry selected)
+      // URL should not have entryId parameter
+      const url = page.url();
+      expect(url).not.toContain(`entryId=${entryId}`);
+    });
+
+    test('deleting entry not in cache triggers reset but maintains position', async ({page}) => {
+      const {vlist} = getLocators(page);
+
+      // Scroll to the middle of the list
+      const scrollHeight = await vlist.evaluate((el) => el.scrollHeight);
+      const middleScroll = scrollHeight * 0.5;
+      await vlist.evaluate((el, target) => { el.scrollTop = target; }, middleScroll);
+      await page.waitForTimeout(500);
+      await expect(page.locator('[data-skeleton]')).toHaveCount(0, {timeout: 5000});
+
+      // Get visible entry texts at current position
+      const visibleTexts = await getVisibleEntryTexts(page);
+      expect(visibleTexts.length).toBeGreaterThan(0);
+
+      // Get an entry ID from the TOP of the list (not loaded/cached)
+      const topEntryId = await page.evaluate(async (headword) => {
+        const testUtils = window.__PLAYWRIGHT_UTILS__;
+        const entries = await testUtils.demoApi.getEntries({count: 1, offset: 0, order: {field: headword, writingSystem: 'default', ascending: true}});
+        return entries[0]?.id;
+      }, SortField.Headword);
+
+      // Delete the top entry (which is NOT in cache since we scrolled to middle)
+      await page.evaluate(async (id) => {
+        const testUtils = window.__PLAYWRIGHT_UTILS__;
+        await testUtils.demoApi.deleteEntry(id);
+      }, topEntryId);
+
+      await page.waitForTimeout(500);
+      await expect(page.locator('[data-skeleton]')).toHaveCount(0, {timeout: 5000});
+
+      // After reset, we should still see similar entries (the visible ones shouldn't drastically change)
+      // Note: This test verifies the reset happens gracefully
+      const newVisibleTexts = await getVisibleEntryTexts(page);
+      expect(newVisibleTexts.length).toBeGreaterThan(0);
+    });
+  });
+});
diff --git a/frontend/viewer/tests/test.d.ts b/frontend/viewer/tests/test.d.ts
new file mode 100644
index 0000000000..fb511c51c7
--- /dev/null
+++ b/frontend/viewer/tests/test.d.ts
@@ -0,0 +1,10 @@
+import type {IMiniLcmJsInvokable} from '$lib/dotnet-types/generated-types/FwLiteShared/Services/IMiniLcmJsInvokable';
+
+export { }; // for some reason this is required in order to make global changes
+
+declare global {
+  interface Window {
+    // eslint-disable-next-line @typescript-eslint/naming-convention
+    __PLAYWRIGHT_UTILS__: {demoApi: IMiniLcmJsInvokable}
+  }
+}

From baa584315f5f319d8205eeaa25b24614fbda76e3 Mon Sep 17 00:00:00 2001
From: Tim Haasdyk <tim_haasdyk@sil.org>
Date: Tue, 20 Jan 2026 12:12:50 +0100
Subject: [PATCH 15/42] Add more failing event handling test cases

---
 AGENTS.md                                     |   5 +
 frontend/viewer/tests/entries-list-v2.test.ts | 212 ++++++++++++++++++
 2 files changed, 217 insertions(+)

diff --git a/AGENTS.md b/AGENTS.md
index eae0f76c70..a4c7cfd905 100644
--- a/AGENTS.md
+++ b/AGENTS.md
@@ -40,8 +40,12 @@ Key documentation for this project:
 - `docs/DEVELOPER-linux.md` - Linux development setup
 - `docs/DEVELOPER-osx.md` - macOS development setup
 - `backend/README.md` - Backend architecture
+- `backend/AGENTS.md` - General backend guidelines
+- `backend/LexBoxApi/AGENTS.md` - API & GraphQL specific rules
 - `backend/FwLite/AGENTS.md` - **FwLite/CRDT** (Critical code! Data loss risks!)
 - `backend/FwHeadless/AGENTS.md` - **FwHeadless guide** (Critical code! Data loss risks! Mercurial sync, FwData processing)
+- `frontend/AGENTS.md` - General frontend/SvelteKit rules
+- `frontend/viewer/AGENTS.md` - **FwLite Viewer** (Specific frontend rules)
 - `deployment/README.md` - Deployment and infrastructure
 
 ## Guidelines
@@ -65,6 +69,7 @@ Before implementing any change that will touch many files or is in a 🔴 **Crit
 
 ### Important Rules
 
+- ✅ **ALWAYS read local `AGENTS.md` files** in the directories you are working in (and their parents) before starting.
 - ✅ New instructions in AGENTS.md files should be SUCCINCT.
 - ✅ Use `gh` CLI for GitHub issues/PRs, not browser tools
 - ✅ Use **Mermaid diagrams** for flowcharts and architecture (not ASCII art)
diff --git a/frontend/viewer/tests/entries-list-v2.test.ts b/frontend/viewer/tests/entries-list-v2.test.ts
index 0b8dfe8712..d7623ef9cf 100644
--- a/frontend/viewer/tests/entries-list-v2.test.ts
+++ b/frontend/viewer/tests/entries-list-v2.test.ts
@@ -1,5 +1,6 @@
 import {type Page, expect, test} from '@playwright/test';
 import {SortField} from '$lib/dotnet-types/generated-types/MiniLcm/SortField';
+import {MorphType} from '$lib/dotnet-types/generated-types/MiniLcm/Models/MorphType';
 
 /**
  * Tests for V2 virtual scrolling features:
@@ -40,6 +41,84 @@ test.describe('EntriesList V2 features', () => {
     return texts;
   }
 
+  async function getItemHeight(page: Page): Promise<number> {
+    const {entryRows} = getLocators(page);
+    await expect(entryRows.first()).toBeVisible();
+    const firstBox = await entryRows.first().boundingBox();
+    const secondBox = await entryRows.nth(1).boundingBox();
+    if (!firstBox || !secondBox) throw new Error('Could not measure entry rows');
+    return secondBox.y - firstBox.y;
+  }
+
+  async function scrollToIndex(page: Page, targetIndex: number, itemHeight: number): Promise<void> {
+    const {vlist} = getLocators(page);
+    const targetScroll = targetIndex * itemHeight;
+    await vlist.evaluate((el, target) => { el.scrollTop = target; }, targetScroll);
+    await page.waitForTimeout(300);
+    await expect(page.locator('[data-skeleton]')).toHaveCount(0, {timeout: 5000});
+  }
+
+  async function getCenterVisibleEntryText(page: Page): Promise<string> {
+    const {vlist, entryRows} = getLocators(page);
+    const containerBox = await vlist.boundingBox();
+    if (!containerBox) throw new Error('Could not get vlist bounds');
+    const centerY = containerBox.y + containerBox.height / 2;
+
+    const rows = await entryRows.all();
+    for (const row of rows) {
+      const box = await row.boundingBox();
+      if (box && box.y <= centerY && box.y + box.height > centerY) {
+        return (await row.textContent()) ?? '';
+      }
+    }
+    throw new Error('No entry at center');
+  }
+
+  async function createEntryAtIndex(page: Page, targetIndex: number): Promise<{id: string, headword: string}> {
+    return page.evaluate(async ({idx, headwordField, morphType}) => {
+      const api = window.__PLAYWRIGHT_UTILS__.demoApi;
+      const offset = Math.max(0, idx - 1);
+      const entries = await api.getEntries({
+        offset,
+        count: 1,
+        order: {field: headwordField, writingSystem: 'default', ascending: true}
+      });
+      const baseHeadword = entries[0]?.lexemeForm?.seh ?? '#';
+      const newHeadword = baseHeadword + '-inserted';
+      const newEntry = {
+        id: crypto.randomUUID(),
+        lexemeForm: {seh: newHeadword},
+        citationForm: {},
+        senses: [],
+        note: {},
+        literalMeaning: {},
+        morphType,
+        components: [],
+        complexForms: [],
+        complexFormTypes: [],
+        publishIn: [],
+      };
+      const created = await api.createEntry(newEntry);
+      return {id: created.id, headword: newHeadword};
+    }, {idx: targetIndex, headwordField: SortField.Headword, morphType: MorphType.Unknown});
+  }
+
+
+
+  async function getEntryTextAtIndex(page: Page, index: number): Promise<string> {
+    return page.evaluate(async ({idx, headwordField}) => {
+      const api = window.__PLAYWRIGHT_UTILS__.demoApi;
+      const entries = await api.getEntries({
+        offset: idx,
+        count: 1,
+        order: {field: headwordField, writingSystem: 'default', ascending: true}
+      });
+      return entries[0]?.lexemeForm?.seh ?? '';
+    }, {idx: index, headwordField: SortField.Headword});
+  }
+
+
+
   test.describe('Jump to entry', () => {
     test('reloading with entry selected scrolls to that entry', async ({page}) => {
       // Go to project view
@@ -255,5 +334,138 @@ test.describe('EntriesList V2 features', () => {
       const newVisibleTexts = await getVisibleEntryTexts(page);
       expect(newVisibleTexts.length).toBeGreaterThan(0);
     });
+
+    test('entry added in loaded batch', async ({page}) => {
+      const {entryRows} = getLocators(page);
+      const itemHeight = await getItemHeight(page);
+
+      // Setup: Get entry texts at key indices from API (before insert)
+      const old25Text = await getEntryTextAtIndex(page, 25);
+      const old49Text = await getEntryTextAtIndex(page, 49);
+
+      // Action: Create entry at index 25
+      const {headword} = await createEntryAtIndex(page, 25);
+
+      // Give time for event handling
+      await page.waitForTimeout(300);
+
+      // Verify entry at index 25 via API shows the new entry
+      const new25Text = await getEntryTextAtIndex(page, 25);
+      expect(new25Text).toContain('-inserted');
+      expect(new25Text).toBe(headword);
+
+      // Verify entry at index 26 via API shows what was at 25
+      const new26Text = await getEntryTextAtIndex(page, 26);
+      expect(new26Text).toBe(old25Text);
+
+      // Verify batch boundary push: entry at index 50 shows what was at 49
+      const new50Text = await getEntryTextAtIndex(page, 50);
+      expect(new50Text).toBe(old49Text);
+
+      // Verify UI: scroll to index 25 and verify new entry is visible
+      await scrollToIndex(page, 25, itemHeight);
+      await expect(entryRows.filter({hasText: headword}).first()).toBeVisible({timeout: 5000});
+
+      // Verify UI: scroll to index 50 and verify pushed entry is visible
+      await scrollToIndex(page, 50, itemHeight);
+      await expect(entryRows.filter({hasText: old49Text}).first()).toBeVisible({timeout: 5000});
+    });
+
+    test('entry added after all loaded batches', async ({page}) => {
+      const {entryRows, vlist} = getLocators(page);
+      const itemHeight = await getItemHeight(page);
+
+      // Setup: Stay at batch 0
+      const initialVisibleTexts = await getVisibleEntryTexts(page);
+      const oldScrollHeight = await vlist.evaluate((el) => el.scrollHeight);
+
+      // Action: Create entry at index 5000
+      const {headword} = await createEntryAtIndex(page, 5000);
+      await page.waitForTimeout(300);
+
+      // Verify scroll height increased (count +1 means more virtual height)
+      const newScrollHeight = await vlist.evaluate((el) => el.scrollHeight);
+      expect(newScrollHeight).toBeGreaterThan(oldScrollHeight);
+
+      // Visible entries unchanged (batch 0 not affected)
+      const newVisibleTexts = await getVisibleEntryTexts(page);
+      expect(newVisibleTexts).toEqual(initialVisibleTexts);
+
+      // Verify via API that entry exists at index 5000
+      const entryAt5000 = await getEntryTextAtIndex(page, 5000);
+      expect(entryAt5000).toContain('-inserted');
+      expect(entryAt5000).toBe(headword);
+
+      // Scroll to index 5000 and verify entry is visible in UI
+      await scrollToIndex(page, 5000, itemHeight);
+      await expect(entryRows.filter({hasText: headword}).first()).toBeVisible({timeout: 5000});
+    });
+
+    test('entry added before loaded batch (quiet reset test)', async ({page}) => {
+      const itemHeight = await getItemHeight(page);
+      const {vlist} = getLocators(page);
+
+      // Setup: Scroll to batch 2 (index 100+)
+      await scrollToIndex(page, 120, itemHeight);
+      const oldScrollHeight = await vlist.evaluate((el) => el.scrollHeight);
+
+      // Capture: Center-visible entry text BEFORE action
+      const centerTextBefore = await getCenterVisibleEntryText(page);
+      expect(centerTextBefore).toBeTruthy();
+
+      // Action: Create entry at index 25 (before currently loaded batch)
+      await createEntryAtIndex(page, 25);
+
+      // Wait for quiet reset and reload
+      await page.waitForTimeout(500);
+      await expect(page.locator('[data-skeleton]')).toHaveCount(0, {timeout: 5000});
+
+      // Verify scroll height increased (count +1)
+      const newScrollHeight = await vlist.evaluate((el) => el.scrollHeight);
+      expect(newScrollHeight).toBeGreaterThan(oldScrollHeight);
+
+      // Center-visible entry text unchanged after reset completes
+      // (This verifies scroll position was maintained through the quiet reset)
+      const centerTextAfter = await getCenterVisibleEntryText(page);
+      expect(centerTextAfter).toBe(centerTextBefore);
+    });
+
+    test('entry updated not in cache', async ({page}) => {
+      const {entryRows} = getLocators(page);
+      const itemHeight = await getItemHeight(page);
+
+      // Setup: Stay at batch 0
+      const initialVisibleTexts = await getVisibleEntryTexts(page);
+
+      // Action: Update entry at index 100 by appending to its headword (preserves sort position)
+      const updatedHeadword = await page.evaluate(async ({idx, headwordField}) => {
+        const api = window.__PLAYWRIGHT_UTILS__.demoApi;
+        const entries = await api.getEntries({
+          offset: idx,
+          count: 1,
+          order: {field: headwordField, writingSystem: 'default', ascending: true}
+        });
+        const entry = entries[0];
+        // Append suffix to preserve alphabetical sort position
+        const newHeadword = (entry.lexemeForm?.seh ?? 'entry') + '-UPDATED';
+        const updated = {
+          ...entry,
+          lexemeForm: {...entry.lexemeForm, seh: newHeadword}
+        };
+        await api.updateEntry(entry, updated);
+        return newHeadword;
+      }, {idx: 100, headwordField: SortField.Headword});
+
+      await page.waitForTimeout(300);
+
+      // Verify no visible change to batch 0 (update was outside cache)
+      const newVisibleTexts = await getVisibleEntryTexts(page);
+      expect(newVisibleTexts).toEqual(initialVisibleTexts);
+
+      // Scroll to index 100 and verify updated entry is visible
+      await scrollToIndex(page, 100, itemHeight);
+      await expect(entryRows.filter({hasText: '-UPDATED'}).first()).toBeVisible({timeout: 5000});
+      await expect(entryRows.filter({hasText: updatedHeadword}).first()).toBeVisible({timeout: 5000});
+    });
   });
 });

From 0daa812d5d9ad24426be6d300d2420665835c523 Mon Sep 17 00:00:00 2001
From: Tim Haasdyk <tim_haasdyk@sil.org>
Date: Tue, 20 Jan 2026 12:43:45 +0100
Subject: [PATCH 16/42] Frontend: Add entry index lookup, versions and
 invalidation

---
 AGENTS.md                                     |  1 +
 backend/FwLite/AGENTS.md                      | 11 +++
 .../Services/MiniLcmJsInvokable.cs            |  6 ++
 frontend/viewer/AGENTS.md                     | 11 +++
 .../viewer/src/lib/components/ListItem.svelte |  1 -
 .../Services/IMiniLcmJsInvokable.ts           |  3 +-
 .../entry-loader-service.svelte.test.ts       | 19 ++++-
 .../services/entry-loader-service.svelte.ts   | 42 +++++++++--
 .../src/project/browse/EntriesList.svelte     | 69 +++++++++++--------
 9 files changed, 124 insertions(+), 39 deletions(-)

diff --git a/AGENTS.md b/AGENTS.md
index a4c7cfd905..d780f3cbe0 100644
--- a/AGENTS.md
+++ b/AGENTS.md
@@ -73,6 +73,7 @@ Before implementing any change that will touch many files or is in a 🔴 **Crit
 - ✅ New instructions in AGENTS.md files should be SUCCINCT.
 - ✅ Use `gh` CLI for GitHub issues/PRs, not browser tools
 - ✅ Use **Mermaid diagrams** for flowcharts and architecture (not ASCII art)
+- ✅ Prefer IDE diagnostics (compiler/lint errors) over CLI tools for identifying issues. Fixing these diagnostics is part of completing any instruction.
 - ✅ Do NOT run integration tests unless user explicitly requests
 - ✅ When handling a user prompt ALWAYS ask for clarification if there are details to clarify, important decisions that must be made first or the plan sounds unwise
 - ❌ Do NOT git commit or git push without explicit user approval
diff --git a/backend/FwLite/AGENTS.md b/backend/FwLite/AGENTS.md
index 30b10390d9..224c1ea2ff 100644
--- a/backend/FwLite/AGENTS.md
+++ b/backend/FwLite/AGENTS.md
@@ -30,6 +30,17 @@ dotnet test FwLiteOnly.slnf
 dotnet build FwLiteMaui/FwLiteMaui.csproj --framework net9.0-windows10.0.19041.0
 ```
 
+## Generated Types (TypeScript)
+
+The frontend viewer uses TypeScript types and API interfaces generated from .NET using **Reinforced.Typings**. These are automatically updated when you build the **FwLiteShared** project (or any project that depends on it like `FwLiteMaui` or `FwLiteWeb`).
+
+```bash
+# To manually update generated types:
+dotnet build backend/FwLite/FwLiteShared/FwLiteShared.csproj
+```
+
+The configuration for this lives in `FwLiteShared/TypeGen/ReinforcedFwLiteTypingConfig.cs` and `FwLiteShared/Reinforced.Typings.settings.xml`.
+
 ## Project Structure
 
 | Directory | Priority | Purpose |
diff --git a/backend/FwLite/FwLiteShared/Services/MiniLcmJsInvokable.cs b/backend/FwLite/FwLiteShared/Services/MiniLcmJsInvokable.cs
index 3daf61bddd..84fbc6b42f 100644
--- a/backend/FwLite/FwLiteShared/Services/MiniLcmJsInvokable.cs
+++ b/backend/FwLite/FwLiteShared/Services/MiniLcmJsInvokable.cs
@@ -95,6 +95,12 @@ public Task<int> CountEntries(string? query, FilterQueryOptions? options)
         return Task.Run(() => _wrappedApi.CountEntries(query, options));
     }
 
+    [JSInvokable]
+    public Task<int> GetEntryIndex(Guid id, string? query, QueryOptions? options)
+    {
+        return Task.Run(() => _wrappedApi.GetEntryIndex(id, query, options));
+    }
+
     [JSInvokable]
     public Task<Entry[]> GetEntries(QueryOptions? options = null)
     {
diff --git a/frontend/viewer/AGENTS.md b/frontend/viewer/AGENTS.md
index c9034864ff..f1a261b625 100644
--- a/frontend/viewer/AGENTS.md
+++ b/frontend/viewer/AGENTS.md
@@ -15,6 +15,17 @@ pnpm install
 pnpm run dev
 ```
 
+### Generated .NET Types
+
+This project depends on TypeScript types and API interfaces generated from .NET (via `Reinforced.Typings`). If you change .NET models or `JSInvokable` APIs, you must rebuild the backend to update these types.
+
+```bash
+# From repo root
+dotnet build backend/FwLite/FwLiteShared/FwLiteShared.csproj
+```
+
+The generated files are located in `src/lib/generated-types/`.
+
 ### E2E Testing (Playwright)
 
 To run E2E tests for the viewer:
diff --git a/frontend/viewer/src/lib/components/ListItem.svelte b/frontend/viewer/src/lib/components/ListItem.svelte
index dea32680b5..097b8693b1 100644
--- a/frontend/viewer/src/lib/components/ListItem.svelte
+++ b/frontend/viewer/src/lib/components/ListItem.svelte
@@ -33,7 +33,6 @@
 
 <button
   aria-selected={selected && !skeleton && !disabled}
-  selected={selected && !skeleton && !disabled ? 'true' : undefined}
   disabled={disabled || loading}
   data-skeleton={skeleton || undefined}
   class={cn(
diff --git a/frontend/viewer/src/lib/dotnet-types/generated-types/FwLiteShared/Services/IMiniLcmJsInvokable.ts b/frontend/viewer/src/lib/dotnet-types/generated-types/FwLiteShared/Services/IMiniLcmJsInvokable.ts
index dc65c37f63..2503be62b9 100644
--- a/frontend/viewer/src/lib/dotnet-types/generated-types/FwLiteShared/Services/IMiniLcmJsInvokable.ts
+++ b/frontend/viewer/src/lib/dotnet-types/generated-types/FwLiteShared/Services/IMiniLcmJsInvokable.ts
@@ -10,8 +10,8 @@ import type {IPublication} from '../../MiniLcm/Models/IPublication';
 import type {ISemanticDomain} from '../../MiniLcm/Models/ISemanticDomain';
 import type {IComplexFormType} from '../../MiniLcm/Models/IComplexFormType';
 import type {IFilterQueryOptions} from '../../MiniLcm/IFilterQueryOptions';
-import type {IEntry} from '../../MiniLcm/Models/IEntry';
 import type {IQueryOptions} from '../../MiniLcm/IQueryOptions';
+import type {IEntry} from '../../MiniLcm/Models/IEntry';
 import type {IWritingSystem} from '../../MiniLcm/Models/IWritingSystem';
 import type {WritingSystemType} from '../../MiniLcm/Models/WritingSystemType';
 import type {IComplexFormComponent} from '../../MiniLcm/Models/IComplexFormComponent';
@@ -31,6 +31,7 @@ export interface IMiniLcmJsInvokable
 	getComplexFormTypes() : Promise<IComplexFormType[]>;
 	getComplexFormType(id: string) : Promise<IComplexFormType | null>;
 	countEntries(query?: string, options?: IFilterQueryOptions) : Promise<number>;
+	getEntryIndex(id: string, query?: string, options?: IQueryOptions) : Promise<number>;
 	getEntries(options?: IQueryOptions) : Promise<IEntry[]>;
 	searchEntries(query: string, options?: IQueryOptions) : Promise<IEntry[]>;
 	getEntry(id: string) : Promise<IEntry | null>;
diff --git a/frontend/viewer/src/lib/services/entry-loader-service.svelte.test.ts b/frontend/viewer/src/lib/services/entry-loader-service.svelte.test.ts
index 77f35539c0..a7a38a7055 100644
--- a/frontend/viewer/src/lib/services/entry-loader-service.svelte.test.ts
+++ b/frontend/viewer/src/lib/services/entry-loader-service.svelte.test.ts
@@ -56,7 +56,7 @@ describe('EntryLoaderService', () => {
 
     expect(api.getEntries).toHaveBeenCalledTimes(1);
     expect(service.getEntryByIndex(0)?.id).toBe('e0');
-    expect(service.getIndexById('e1')).toBe(1);
+    expect(await service.getEntryIndex('e1')).toBe(1);
   });
 
   it('returns cached entries without refetching', async () => {
@@ -83,11 +83,26 @@ describe('EntryLoaderService', () => {
 
     service.removeEntryById('e1');
 
-    expect(service.getIndexById('e2')).toBe(1);
+    expect(await service.getEntryIndex('e2')).toBe(1);
     expect(service.getEntryByIndex(1)?.id).toBe('e2');
     expect(service.totalCount).toBe(2);
   });
 
+  it('increments version on update', async () => {
+    const entry0 = makeEntry('e0');
+    const {service, cleanup} = createService([entry0]);
+    cleanups.push(cleanup);
+
+    await service.loadEntryByIndex(0);
+    const v1 = service.getVersion(0);
+
+    service.updateEntry({...entry0, citationForm: {en: 'updated'}});
+    const v2 = service.getVersion(0);
+
+    expect(v1).toBe(1);
+    expect(v2).toBe(2);
+  });
+
   it('recalculates loaded batches when totalCount is undefined', async () => {
     const entry0 = makeEntry('e0');
     const entry1 = makeEntry('e1');
diff --git a/frontend/viewer/src/lib/services/entry-loader-service.svelte.ts b/frontend/viewer/src/lib/services/entry-loader-service.svelte.ts
index e25fdcf935..1176ac3d0d 100644
--- a/frontend/viewer/src/lib/services/entry-loader-service.svelte.ts
+++ b/frontend/viewer/src/lib/services/entry-loader-service.svelte.ts
@@ -27,6 +27,7 @@ export class EntryLoaderService {
 
   // Cache (private)
   #entryCache = new SvelteMap<number, IEntry>();
+  #entryVersions = new SvelteMap<number, number>();
   #idToIndex = new SvelteMap<string, number>();
   #pendingBatches = new SvelteMap<number, Promise<IEntry[]>>();
   #loadedBatches = new SvelteSet<number>();
@@ -105,11 +106,30 @@ export class EntryLoaderService {
   }
 
   /**
-   * Get the index of an entry by ID (from our incremental map).
-   * Returns undefined if the entry hasn't been loaded yet.
+   * Get the version of an entry by index.
+   * Increments whenever the entry is updated in-place.
    */
-  getIndexById(id: string): number | undefined {
-    return this.#idToIndex.get(id);
+  getVersion(index: number): number {
+    return this.#entryVersions.get(index) ?? 0;
+  }
+
+  /**
+   * Get the index of an entry by ID.
+   * Checks the local cache first, then queries the backend.
+   * Returns -1 if the entry is not found.
+   */
+  async getEntryIndex(id: string): Promise<number> {
+    const cached = this.#idToIndex.get(id);
+    if (cached !== undefined) return cached;
+
+    const api = this.#deps.miniLcmApi();
+    if (!api) return -1;
+
+    // Refresh query options
+    const queryOptions = this.#buildQueryOptions(0, 0);
+    const search = this.#deps.search();
+
+    return await api.getEntryIndex(id, search || undefined, queryOptions);
   }
 
   /**
@@ -136,24 +156,30 @@ export class EntryLoaderService {
     // Remove from maps
     this.#idToIndex.delete(id);
     this.#entryCache.delete(index);
+    this.#entryVersions.delete(index);
 
     // Shift all subsequent entries down by 1
     const newCache = new SvelteMap<number, IEntry>();
     const newIdToIndex = new SvelteMap<string, number>();
+    const newVersions = new SvelteMap<number, number>();
 
     for (const [idx, entry] of this.#entryCache) {
+      const version = this.#entryVersions.get(idx) ?? 1;
       if (idx < index) {
         newCache.set(idx, entry);
         newIdToIndex.set(entry.id, idx);
+        newVersions.set(idx, version);
       } else {
         // Shift down
         newCache.set(idx - 1, entry);
         newIdToIndex.set(entry.id, idx - 1);
+        newVersions.set(idx - 1, version);
       }
     }
 
     this.#entryCache = newCache;
     this.#idToIndex = newIdToIndex;
+    this.#entryVersions = newVersions;
 
     // Update loaded batches (they may have shifted)
     this.#recalculateLoadedBatches();
@@ -179,8 +205,9 @@ export class EntryLoaderService {
       return;
     }
 
-    // Update the cache
+    // Update the cache and increment version
     this.#entryCache.set(index, entry);
+    this.#entryVersions.set(index, (this.#entryVersions.get(index) ?? 1) + 1);
   }
 
   /**
@@ -188,6 +215,7 @@ export class EntryLoaderService {
    */
   reset(): void {
     this.#entryCache.clear();
+    this.#entryVersions.clear();
     this.#idToIndex.clear();
     this.#pendingBatches.clear();
     this.#loadedBatches.clear();
@@ -247,6 +275,10 @@ export class EntryLoaderService {
       const entry = entries[i];
       this.#entryCache.set(index, entry);
       this.#idToIndex.set(entry.id, index);
+      // Only set version if not already present (so we don't reset versions on reload)
+      if (!this.#entryVersions.has(index)) {
+        this.#entryVersions.set(index, 1);
+      }
     }
   }
 
diff --git a/frontend/viewer/src/project/browse/EntriesList.svelte b/frontend/viewer/src/project/browse/EntriesList.svelte
index 253c0df379..e2863a316f 100644
--- a/frontend/viewer/src/project/browse/EntriesList.svelte
+++ b/frontend/viewer/src/project/browse/EntriesList.svelte
@@ -102,25 +102,32 @@
   let vList = $state<VListHandle>();
   $effect(() => {
     if (!vList || !selectedEntryId) return;
-    const indexOfSelected = entryLoader.getIndexById(selectedEntryId);
-    if (indexOfSelected === undefined) return;
+
+    void scrollToEntry(vList, selectedEntryId);
+  });
+
+  async function scrollToEntry(vList: VListHandle, entryId: string) {
+    const index = await entryLoader.getEntryIndex(entryId);
+    if (index < 0 || !vList) return;
+
     const visibleStart = vList.getScrollOffset();
     const visibleSize = vList.getViewportSize();
     const visibleEnd = visibleStart + visibleSize;
-    const itemStart = vList.getItemOffset(indexOfSelected);
-    const itemSize = vList.getItemSize(indexOfSelected);
+    const itemStart = vList.getItemOffset(index);
+    const itemSize = vList.getItemSize(index);
     const itemEnd = itemStart + itemSize;
+
     if (itemStart < visibleStart || itemEnd > visibleEnd) {
       //using smooth scroll caused lag, maybe only do it if scrolling a short distance?
-      vList.scrollToIndex(indexOfSelected, {align: 'center'});
+      vList.scrollToIndex(index, { align: 'center' });
     }
-  });
+  }
 
   export async function selectNextEntry(): Promise<IEntry | undefined> {
     const indexOfSelected = selectedEntryId
-      ? entryLoader.getIndexById(selectedEntryId)
-      : undefined;
-    const nextIndex = indexOfSelected === undefined ? 0 : indexOfSelected + 1;
+      ? await entryLoader.getEntryIndex(selectedEntryId)
+      : -1;
+    const nextIndex = indexOfSelected < 0 ? 0 : indexOfSelected + 1;
 
     // Check count bounds
     if (entryLoader.totalCount === undefined || nextIndex >= entryLoader.totalCount) {
@@ -168,28 +175,30 @@
           {/each}
         </div>
       {:else}
-        <VList bind:this={vList} data={indexArray} class="h-full p-0.5 md:pr-3 after:h-12 after:block" getKey={(index: number) => index} bufferSize={400}>
+        <VList bind:this={vList} data={indexArray} class="h-full p-0.5 md:pr-3 after:h-12 after:block" getKey={(index: number) => entryLoader.getEntryByIndex(index)?.id ?? `skeleton-${index}`} bufferSize={400}>
           {#snippet children(index: number)}
-            <Delayed
-              getCached={() => entryLoader.getEntryByIndex(index)}
-              load={() => entryLoader.loadEntryByIndex(index)}
-              delay={250}
-            >
-              {#snippet children(state)}
-                {#if state.loading || !state.current}
-                  <EntryRow class="mb-2" skeleton={true} />
-                {:else}
-                  {@const entry = state.current}
-                  <EntryMenu {entry} contextMenu>
-                    <EntryRow {entry}
-                              class="mb-2"
-                              selected={selectedEntryId === entry.id}
-                              onclick={() => onSelectEntry(entry)}
-                              {previewDictionary}/>
-                  </EntryMenu>
-                {/if}
-              {/snippet}
-            </Delayed>
+            {#key entryLoader.getVersion(index)}
+              <Delayed
+                getCached={() => entryLoader.getEntryByIndex(index)}
+                load={() => entryLoader.loadEntryByIndex(index)}
+                delay={250}
+              >
+                {#snippet children(state)}
+                  {#if state.loading || !state.current}
+                    <EntryRow class="mb-2" skeleton={true} />
+                  {:else}
+                    {@const entry = state.current}
+                    <EntryMenu {entry} contextMenu>
+                      <EntryRow {entry}
+                                class="mb-2"
+                                selected={selectedEntryId === entry.id}
+                                onclick={() => onSelectEntry(entry)}
+                                {previewDictionary}/>
+                    </EntryMenu>
+                  {/if}
+                {/snippet}
+              </Delayed>
+            {/key}
           {/snippet}
         </VList>
         {#if indexArray.length === 0}

From dcf2852c87fbf1b0feb56ed62e03071bab4a5ab3 Mon Sep 17 00:00:00 2001
From: Tim Haasdyk <tim_haasdyk@sil.org>
Date: Tue, 20 Jan 2026 14:18:04 +0100
Subject: [PATCH 17/42] Format

---
 .../viewer/src/lib/components/Delayed.svelte  | 112 +++++++++---------
 1 file changed, 55 insertions(+), 57 deletions(-)

diff --git a/frontend/viewer/src/lib/components/Delayed.svelte b/frontend/viewer/src/lib/components/Delayed.svelte
index 05cce8f6db..598a3d32a8 100644
--- a/frontend/viewer/src/lib/components/Delayed.svelte
+++ b/frontend/viewer/src/lib/components/Delayed.svelte
@@ -20,87 +20,85 @@
 	</Delayed>
 -->
 <script lang="ts" generics="T">
-	import type {Snippet} from 'svelte';
-	import {watch} from 'runed';
+  import type {Snippet} from 'svelte';
+  import {watch} from 'runed';
 
-	type DelayedState<T> = {
-		loading: boolean;
-		current: T | undefined;
-		error: unknown | undefined;
-	};
+  type DelayedState<T> = {
+    loading: boolean;
+    current: T | undefined;
+    error: unknown | undefined;
+  };
 
-	interface Props<T> {
-		load: () => Promise<T>;
-		getCached?: () => T | undefined;
-		delay?: number;
-		children: Snippet<[state: DelayedState<T>]>;
-	}
+  interface Props<T> {
+    load: () => Promise<T>;
+    getCached?: () => T | undefined;
+    delay?: number;
+    children: Snippet<[state: DelayedState<T>]>;
+  }
 
-	let {
-		load,
-		getCached,
-		delay = 150,
-		children
-	}: Props<T> = $props();
+  let { load, getCached, delay = 150, children }: Props<T> = $props();
 
-	let state = $state<DelayedState<T>>({
-		loading: true,
-		current: undefined,
-		error: undefined
-	});
+  let state = $state<DelayedState<T>>({
+    loading: true,
+    current: undefined,
+    error: undefined,
+  });
 
-	watch(() => [load, getCached], () => {
-		cancelLoading();
-		reset();
+  watch(
+    () => [load, getCached],
+    () => {
+      cancelLoading();
+      reset();
 
-		// Check cache first
-		if (getCached) {
-			const cached = getCached();
-			if (cached !== undefined) {
-				state = { loading: false, current: cached, error: undefined };
-				return;
-			}
-		}
+      // Check cache first
+      if (getCached) {
+        const cached = getCached();
+        if (cached !== undefined) {
+          state = { loading: false, current: cached, error: undefined };
+          return;
+        }
+      }
 
-		// Start delayed loading
-		startLoading();
+      // Start delayed loading
+      startLoading();
 
-		return () => cancelLoading();
-	});
+      return () => cancelLoading();
+    },
+  );
 
   function reset() {
     state = { loading: true, current: undefined, error: undefined };
   }
 
-	let timeoutId: ReturnType<typeof setTimeout> | undefined;
-	let runId = 0;
+  let timeoutId: ReturnType<typeof setTimeout> | undefined;
+  let runId = 0;
 
-	function startLoading() {
-		const currentRun = ++runId;
-		reset();
-		timeoutId = setTimeout(() => void doLoad(currentRun), delay);
-	}
+  function startLoading() {
+    const currentRun = ++runId;
+    reset();
+    timeoutId = setTimeout(() => void doLoad(currentRun), delay);
+  }
 
   async function doLoad(currentRun: number) {
     try {
       const result = await load();
-			if (currentRun !== runId) {
-				return;
-			}
-			state = { loading: false, current: result, error: undefined };
+      if (currentRun !== runId) {
+        return;
+      }
+      state = { loading: false, current: result, error: undefined };
     } catch (error) {
-			if (currentRun !== runId) {
-				return;
-			}
-			state = { loading: false, current: undefined, error };
+      if (currentRun !== runId) {
+        return;
+      }
+      state = { loading: false, current: undefined, error };
     }
   }
 
-	function cancelLoading() {
+  function cancelLoading() {
     clearTimeout(timeoutId);
     timeoutId = undefined;
-		runId += 1;
-	}
+    runId += 1;
+  }
 </script>
 
 {@render children(state)}

From e11c9e0f47e2ac880473788eee525af596c4f227 Mon Sep 17 00:00:00 2001
From: Tim Haasdyk <tim_haasdyk@sil.org>
Date: Tue, 20 Jan 2026 14:18:16 +0100
Subject: [PATCH 18/42] Tweak demo api

---
 frontend/viewer/src/project/demo/in-memory-demo-api.ts | 6 ++----
 1 file changed, 2 insertions(+), 4 deletions(-)

diff --git a/frontend/viewer/src/project/demo/in-memory-demo-api.ts b/frontend/viewer/src/project/demo/in-memory-demo-api.ts
index 9692e3c46c..5e5d27f087 100644
--- a/frontend/viewer/src/project/demo/in-memory-demo-api.ts
+++ b/frontend/viewer/src/project/demo/in-memory-demo-api.ts
@@ -239,10 +239,10 @@ export class InMemoryDemoApi implements IMiniLcmJsInvokable {
       const v2 = this.#writingSystemService.headword(e2, defaultWs);
       if (!v2) return -1;
       if (!v1) return 1;
-      return v1.localeCompare(v2, defaultWs);
+      const compare = v1.localeCompare(v2, defaultWs);
+      return compare === 0 ? e1.id.localeCompare(e2.id) : compare;
     });
   }
-
   private getFilteredEntries(query?: string, options?: IFilterQueryOptions): IEntry[] {
     let entries = this._Entries();
     if (query) entries = filterEntries(entries, query);
@@ -294,8 +294,6 @@ export class InMemoryDemoApi implements IMiniLcmJsInvokable {
   }
 
   deleteEntry(guid: string): Promise<void> {
-    console.log(guid, this._entries[0].id);
-    console.log('deleted', this._entries.splice(this._entries.findIndex(e => e.id === guid), 1));
     this.#projectEventBus.notifyEntryDeleted(guid);
     return Promise.resolve();
   }

From 050fdec029d5c868e6a2f4d7627fec80b4b476aa Mon Sep 17 00:00:00 2001
From: Tim Haasdyk <tim_haasdyk@sil.org>
Date: Tue, 20 Jan 2026 15:14:03 +0100
Subject: [PATCH 19/42] Refactor

---
 .../entry-loader-service.svelte.test.ts       |  56 +++--
 .../services/entry-loader-service.svelte.ts   | 205 ++++++++++++------
 .../src/project/browse/EntriesList.svelte     |  18 +-
 frontend/viewer/tests/entries-list-v2.test.ts | 176 ++++++++++-----
 4 files changed, 310 insertions(+), 145 deletions(-)

diff --git a/frontend/viewer/src/lib/services/entry-loader-service.svelte.test.ts b/frontend/viewer/src/lib/services/entry-loader-service.svelte.test.ts
index a7a38a7055..9dd45428b0 100644
--- a/frontend/viewer/src/lib/services/entry-loader-service.svelte.test.ts
+++ b/frontend/viewer/src/lib/services/entry-loader-service.svelte.test.ts
@@ -16,6 +16,7 @@ type MiniLcmApiMock = {
   countEntries: ReturnType<typeof vi.fn>;
   getEntries: ReturnType<typeof vi.fn>;
   searchEntries: ReturnType<typeof vi.fn>;
+  getEntryIndex: ReturnType<typeof vi.fn>;
 };
 
 function createService(entries: IEntry[], totalCount = entries.length) {
@@ -23,6 +24,9 @@ function createService(entries: IEntry[], totalCount = entries.length) {
     countEntries: vi.fn().mockResolvedValue(totalCount),
     getEntries: vi.fn().mockResolvedValue(entries),
     searchEntries: vi.fn().mockResolvedValue(entries),
+    getEntryIndex: vi.fn().mockImplementation((id: string) => {
+      return Promise.resolve(entries.findIndex(e => e.id === id));
+    }),
   };
 
   let service!: EntryLoaderService;
@@ -52,11 +56,11 @@ describe('EntryLoaderService', () => {
     const {api, service, cleanup} = createService([entry0, entry1]);
     cleanups.push(cleanup);
 
-    await service.loadEntryByIndex(1);
+    await service.getOrLoadEntryByIndex(1);
 
     expect(api.getEntries).toHaveBeenCalledTimes(1);
-    expect(service.getEntryByIndex(0)?.id).toBe('e0');
-    expect(await service.getEntryIndex('e1')).toBe(1);
+    expect(service.getCachedEntryByIndex(0)?.id).toBe('e0');
+    expect(await service.getOrLoadEntryIndex('e1')).toBe(1);
   });
 
   it('returns cached entries without refetching', async () => {
@@ -65,8 +69,8 @@ describe('EntryLoaderService', () => {
     const {api, service, cleanup} = createService([entry0, entry1]);
     cleanups.push(cleanup);
 
-    await service.loadEntryByIndex(0);
-    await service.loadEntryByIndex(0);
+    await service.getOrLoadEntryByIndex(0);
+    await service.getOrLoadEntryByIndex(0);
 
     expect(api.getEntries).toHaveBeenCalledTimes(1);
   });
@@ -78,13 +82,13 @@ describe('EntryLoaderService', () => {
     const {service, cleanup} = createService([entry0, entry1, entry2], 3);
     cleanups.push(cleanup);
 
-    await service.loadCount();
-    await service.loadEntryByIndex(2);
+    await service.loadInitialCount();
+    await service.getOrLoadEntryByIndex(2);
 
     service.removeEntryById('e1');
 
-    expect(await service.getEntryIndex('e2')).toBe(1);
-    expect(service.getEntryByIndex(1)?.id).toBe('e2');
+    expect(await service.getOrLoadEntryIndex('e2')).toBe(1);
+    expect(service.getCachedEntryByIndex(1)?.id).toBe('e2');
     expect(service.totalCount).toBe(2);
   });
 
@@ -93,10 +97,10 @@ describe('EntryLoaderService', () => {
     const {service, cleanup} = createService([entry0]);
     cleanups.push(cleanup);
 
-    await service.loadEntryByIndex(0);
+    await service.getOrLoadEntryByIndex(0);
     const v1 = service.getVersion(0);
 
-    service.updateEntry({...entry0, citationForm: {en: 'updated'}});
+    await service.updateEntry({...entry0, citationForm: {en: 'updated'}});
     const v2 = service.getVersion(0);
 
     expect(v1).toBe(1);
@@ -110,14 +114,40 @@ describe('EntryLoaderService', () => {
     const {api, service, cleanup} = createService([entry0, entry1, entry2]);
     cleanups.push(cleanup);
 
-    await service.loadEntryByIndex(0);
+    await service.getOrLoadEntryByIndex(0);
     expect(api.getEntries).toHaveBeenCalledTimes(1);
 
     service.totalCount = undefined;
     service.removeEntryById('e0');
 
-    await service.loadEntryByIndex(2);
+    await service.getOrLoadEntryByIndex(2);
 
     expect(api.getEntries).toHaveBeenCalledTimes(2);
   });
+
+  it('inserts entries and shifts indices on update for new entries', async () => {
+    const entry0 = makeEntry('e0');
+    const entry1 = makeEntry('e1');
+    const entryNew = makeEntry('eNew');
+    // Initially only e0 and e1
+    const {api, service, cleanup} = createService([entry0, entry1], 2);
+    cleanups.push(cleanup);
+
+    await service.loadInitialCount();
+    await service.getOrLoadEntryByIndex(1); // Load e1 at index 1
+
+    // Pretend eNew is inserted at index 1
+    const updatedEntries = [entry0, entryNew, entry1];
+    api.getEntryIndex.mockReturnValue((id: string) => {
+      const idx = updatedEntries.findIndex(e => e.id === id);
+      return Promise.resolve(idx);
+    });
+
+    await service.updateEntry(entryNew);
+
+    expect(service.totalCount).toBe(3);
+    expect(await service.getOrLoadEntryIndex('eNew')).toBe(1);
+    expect(service.getCachedEntryByIndex(1)?.id).toBe('eNew');
+    expect(service.getCachedEntryByIndex(2)?.id).toBe('e1'); // Shifted
+  });
 });
diff --git a/frontend/viewer/src/lib/services/entry-loader-service.svelte.ts b/frontend/viewer/src/lib/services/entry-loader-service.svelte.ts
index 1176ac3d0d..8ce61c6605 100644
--- a/frontend/viewer/src/lib/services/entry-loader-service.svelte.ts
+++ b/frontend/viewer/src/lib/services/entry-loader-service.svelte.ts
@@ -32,6 +32,9 @@ export class EntryLoaderService {
   #pendingBatches = new SvelteMap<number, Promise<IEntry[]>>();
   #loadedBatches = new SvelteSet<number>();
 
+  // Generation counter to invalidate in-flight async operations after reset
+  #generation = 0;
+
   // Config
   readonly batchSize = 50;
 
@@ -46,7 +49,7 @@ export class EntryLoaderService {
       () => [deps.miniLcmApi(), deps.search(), deps.sort(), deps.gridifyFilter()],
       () => {
         this.reset();
-        void this.loadCount();
+        void this.loadInitialCount();
       }
     );
   }
@@ -55,34 +58,38 @@ export class EntryLoaderService {
    * Get an entry from cache by index (synchronous).
    * Returns undefined if not cached.
    */
-  getEntryByIndex(index: number): IEntry | undefined {
+  getCachedEntryByIndex(index: number): IEntry | undefined {
     return this.#entryCache.get(index);
   }
 
+  async #countEntries(): Promise<number> {
+    const api = this.#deps.miniLcmApi();
+    if (!api) return 0;
+    const filterOptions = this.#buildFilterOptions();
+    const search = this.#deps.search();
+    return api.countEntries(search || undefined, filterOptions);
+  }
+
   /**
-   * Load an entry by index (asynchronous).
+   * Get (from cache) or load an entry by index (asynchronous).
    * Fetches the batch containing this index if not already loaded.
+   * Returns undefined if entry not found (e.g., reset occurred during load).
    */
-  async loadEntryByIndex(index: number): Promise<IEntry> {
-    // Check cache first
+  async getOrLoadEntryByIndex(index: number): Promise<IEntry | undefined> {
     const cached = this.#entryCache.get(index);
     if (cached) return cached;
 
-    // Load the batch
     await this.#loadBatchForIndex(index);
 
-    // Return from cache (should now be populated)
-    const entry = this.#entryCache.get(index);
-    if (!entry) {
-      throw new Error(`Entry at index ${index} not found after loading batch`);
-    }
-    return entry;
+    // Return from cache. If reset occurred during load, batch wasn't cached, so this returns undefined.
+    return this.#entryCache.get(index);
   }
 
   /**
    * Load the total count of entries matching current filters.
+   * This is used to scaffold this service, so it dictates the loading state.
    */
-  async loadCount(): Promise<void> {
+  async loadInitialCount(): Promise<void> {
     const api = this.#deps.miniLcmApi();
     if (!api) {
       this.totalCount = undefined;
@@ -93,15 +100,19 @@ export class EntryLoaderService {
     this.loading = true;
     this.error = undefined;
 
+    const generation = this.#generation;
     try {
-      const filterOptions = this.#buildFilterOptions();
-      const search = this.#deps.search();
-      this.totalCount = await api.countEntries(search || undefined, filterOptions);
+      const count = await this.#countEntries();
+      if (this.#generation !== generation) return; // Stale result after reset
+      this.totalCount = count;
     } catch (e) {
+      if (this.#generation !== generation) return; // Stale result after reset
       this.error = e instanceof Error ? e : new Error(String(e));
       this.totalCount = undefined;
     } finally {
-      this.loading = false;
+      if (this.#generation === generation) {
+        this.loading = false;
+      }
     }
   }
 
@@ -118,38 +129,31 @@ export class EntryLoaderService {
    * Checks the local cache first, then queries the backend.
    * Returns -1 if the entry is not found.
    */
-  async getEntryIndex(id: string): Promise<number> {
+  async getOrLoadEntryIndex(id: string): Promise<number> {
     const cached = this.#idToIndex.get(id);
     if (cached !== undefined) return cached;
 
     const api = this.#deps.miniLcmApi();
     if (!api) return -1;
 
-    // Refresh query options
     const queryOptions = this.#buildQueryOptions(0, 0);
     const search = this.#deps.search();
 
     return await api.getEntryIndex(id, search || undefined, queryOptions);
   }
 
-  /**
-   * Check if an entry ID is known (loaded into cache).
-   */
-  hasEntry(id: string): boolean {
-    return this.#idToIndex.has(id);
-  }
-
   /**
    * Remove an entry by ID (for delete events).
-   * If not in cache, triggers a full reset.
+   * Refreshes the list to keep indices in sync.
    */
   removeEntryById(id: string): void {
     const index = this.#idToIndex.get(id);
 
     if (index === undefined) {
-      // Entry not in cache — we don't know where it was, so reset
+      // Entry not in cache — we don't know where it was, so we MUST reset
+      // or we'll have an incorrect totalCount.
       this.reset();
-      void this.loadCount();
+      void this.loadInitialCount();
       return;
     }
 
@@ -159,61 +163,124 @@ export class EntryLoaderService {
     this.#entryVersions.delete(index);
 
     // Shift all subsequent entries down by 1
-    const newCache = new SvelteMap<number, IEntry>();
-    const newIdToIndex = new SvelteMap<string, number>();
-    const newVersions = new SvelteMap<number, number>();
-
-    for (const [idx, entry] of this.#entryCache) {
-      const version = this.#entryVersions.get(idx) ?? 1;
-      if (idx < index) {
-        newCache.set(idx, entry);
-        newIdToIndex.set(entry.id, idx);
-        newVersions.set(idx, version);
-      } else {
-        // Shift down
-        newCache.set(idx - 1, entry);
-        newIdToIndex.set(entry.id, idx - 1);
-        newVersions.set(idx - 1, version);
-      }
-    }
-
-    this.#entryCache = newCache;
-    this.#idToIndex = newIdToIndex;
-    this.#entryVersions = newVersions;
-
-    // Update loaded batches (they may have shifted)
-    this.#recalculateLoadedBatches();
+    this.#shiftCache(index, -1);
 
     // Decrement total count
     if (this.totalCount !== undefined && this.totalCount > 0) {
       this.totalCount--;
     }
+
+    this.#recalculateLoadedBatches();
   }
 
   /**
    * Update an entry in cache (for update events).
-   * If not in cache, triggers a full reset.
+   * Note: This method is called for both entry updates AND entry creates (via EntryChanged event).
+   * We detect creates vs updates by comparing the new count to our cached count.
    */
-  updateEntry(entry: IEntry): void {
-    const index = this.#idToIndex.get(entry.id);
+  async updateEntry(entry: IEntry): Promise<void> {
+    const cachedIndex = this.#idToIndex.get(entry.id);
 
-    if (index === undefined) {
-      // Entry not in cache — could be new or just not loaded
-      // For V1, we reset to be safe
-      this.reset();
-      void this.loadCount();
+    if (cachedIndex !== undefined) {
+      // Update the cache and increment version
+      this.#entryCache.set(cachedIndex, entry);
+      this.#entryVersions.set(cachedIndex, (this.#entryVersions.get(cachedIndex) ?? 1) + 1);
       return;
     }
 
-    // Update the cache and increment version
-    this.#entryCache.set(index, entry);
-    this.#entryVersions.set(index, (this.#entryVersions.get(index) ?? 1) + 1);
+    // Entry not in cache — we don't know if it was updated or created
+    // Query backend for its current index AND the new count.
+    const generation = this.#generation;
+    const [newIndex, newCount] = await Promise.all([
+      this.getOrLoadEntryIndex(entry.id),
+      this.#countEntries()
+    ]);
+
+    if (this.#generation !== generation) return; // Stale result after reset
+
+    if (newIndex < 0) {
+      // Not found (might not match current filters)
+      return;
+    }
+
+    // Detect if this is a CREATE or UPDATE by comparing counts
+    const isNewEntry = this.totalCount !== undefined && newCount > this.totalCount;
+
+    const cacheIndices = [...this.#entryCache.keys()];
+    const maxLoadedIndex = Math.max(...cacheIndices, -1);
+    const minLoadedIndex = cacheIndices.length > 0 ? Math.min(...cacheIndices) : Infinity;
+
+    if (newIndex > maxLoadedIndex) {
+      // It's beyond our currently loaded range.
+      if (isNewEntry) {
+        // It's a CREATE - increment the total count so scroll height updates
+        this.totalCount = newCount;
+      }
+      // For updates, do nothing - the entry will load naturally when scrolled to.
+      return;
+    }
+
+    if (newIndex < minLoadedIndex) {
+      // It's BEFORE our loaded range
+      if (isNewEntry) {
+        // New entry inserted before our range - shift cached entries up
+        this.#shiftCache(newIndex, 1);
+        this.totalCount = newCount;
+        this.#recalculateLoadedBatches();
+      }
+      // For updates that moved before our range, do nothing special
+      return;
+    }
+
+    // It's within our loaded range but not in cache (could be a hole from skipped batches).
+    if (isNewEntry) {
+      // New entry inserted within our range - shift and add to cache
+      this.#shiftCache(newIndex, 1);
+      this.#entryCache.set(newIndex, entry);
+      this.#idToIndex.set(entry.id, newIndex);
+      this.#entryVersions.set(newIndex, 1);
+      this.totalCount = newCount;
+      this.#recalculateLoadedBatches();
+    }
+    // For updates that moved into our range from elsewhere, we don't handle this case perfectly.
+    // The entry will appear when the batch is reloaded.
+  }
+
+  /**
+   * Shift indices in the cache.
+   * @param fromIndex The starting index (inclusive)
+   * @param delta The amount to shift (e.g. -1 for delete, 1 for insert)
+   */
+  #shiftCache(fromIndex: number, delta: number): void {
+    const newCache = new SvelteMap<number, IEntry>();
+    const newIdToIndex = new SvelteMap<string, number>();
+    const newVersions = new SvelteMap<number, number>();
+
+    // Copy unaffected entries (those before fromIndex if delta > 0, or all if delta < 0)
+    for (const [idx, entry] of this.#entryCache) {
+      let targetIdx = idx;
+      if (idx >= fromIndex) {
+        targetIdx += delta;
+      }
+
+      // Only keep in cache if the index is valid (>= 0)
+      if (targetIdx >= 0) {
+        newCache.set(targetIdx, entry);
+        newIdToIndex.set(entry.id, targetIdx);
+        newVersions.set(targetIdx, this.#entryVersions.get(idx) ?? 1);
+      }
+    }
+
+    this.#entryCache = newCache;
+    this.#idToIndex = newIdToIndex;
+    this.#entryVersions = newVersions;
   }
 
   /**
    * Full reset: clear all cache and refetch count.
    */
   reset(): void {
+    this.#generation++;
     this.#entryCache.clear();
     this.#entryVersions.clear();
     this.#idToIndex.clear();
@@ -240,11 +307,13 @@ export class EntryLoaderService {
     }
 
     // Start the fetch
+    const generation = this.#generation;
     const promise = this.#fetchBatch(batchNumber);
     this.#pendingBatches.set(batchNumber, promise);
 
     try {
       const entries = await promise;
+      if (this.#generation !== generation) return; // Stale result after reset
       this.#cacheBatch(batchNumber, entries);
       this.#loadedBatches.add(batchNumber);
     } finally {
@@ -304,8 +373,8 @@ export class EntryLoaderService {
   }
 
   #recalculateLoadedBatches(): void {
-    // After shifting indices, recalculate which batches are considered "loaded"
-    // A batch is loaded if all its indices are in the cache
+    // After shifting indices, recalculate which batches are still fully loaded.
+    // A batch is "loaded" only if ALL its indices are present in cache.
     this.#loadedBatches.clear();
 
     const maxIndex = Math.max(...this.#entryCache.keys(), -1);
@@ -314,9 +383,9 @@ export class EntryLoaderService {
     const maxBatch = Math.floor(maxIndex / this.batchSize);
     for (let batch = 0; batch <= maxBatch; batch++) {
       const startIndex = batch * this.batchSize;
-      const endIndex = Math.min(startIndex + this.batchSize, (this.totalCount ?? startIndex + this.batchSize));
-      let allPresent = true;
+      const endIndex = Math.min(startIndex + this.batchSize, this.totalCount ?? this.batchSize);
 
+      let allPresent = true;
       for (let i = startIndex; i < endIndex; i++) {
         if (!this.#entryCache.has(i)) {
           allPresent = false;
diff --git a/frontend/viewer/src/project/browse/EntriesList.svelte b/frontend/viewer/src/project/browse/EntriesList.svelte
index e2863a316f..c06241c00d 100644
--- a/frontend/viewer/src/project/browse/EntriesList.svelte
+++ b/frontend/viewer/src/project/browse/EntriesList.svelte
@@ -107,7 +107,7 @@
   });
 
   async function scrollToEntry(vList: VListHandle, entryId: string) {
-    const index = await entryLoader.getEntryIndex(entryId);
+    const index = await entryLoader.getOrLoadEntryIndex(entryId);
     if (index < 0 || !vList) return;
 
     const visibleStart = vList.getScrollOffset();
@@ -125,7 +125,7 @@
 
   export async function selectNextEntry(): Promise<IEntry | undefined> {
     const indexOfSelected = selectedEntryId
-      ? await entryLoader.getEntryIndex(selectedEntryId)
+      ? await entryLoader.getOrLoadEntryIndex(selectedEntryId)
       : -1;
     const nextIndex = indexOfSelected < 0 ? 0 : indexOfSelected + 1;
 
@@ -134,8 +134,10 @@
       return undefined;
     }
 
-    const nextEntry = await entryLoader.loadEntryByIndex(nextIndex);
-    onSelectEntry(nextEntry);
+    const nextEntry = await entryLoader.getOrLoadEntryByIndex(nextIndex);
+    if (nextEntry) {
+      onSelectEntry(nextEntry);
+    }
     return nextEntry;
   }
 
@@ -150,7 +152,7 @@
       size="icon"
       onclick={() => {
         entryLoader.reset();
-        void entryLoader.loadCount();
+        void entryLoader.loadInitialCount();
       }}
     />
   </DevContent>
@@ -175,12 +177,12 @@
           {/each}
         </div>
       {:else}
-        <VList bind:this={vList} data={indexArray} class="h-full p-0.5 md:pr-3 after:h-12 after:block" getKey={(index: number) => entryLoader.getEntryByIndex(index)?.id ?? `skeleton-${index}`} bufferSize={400}>
+        <VList bind:this={vList} data={indexArray} class="h-full p-0.5 md:pr-3 after:h-12 after:block" getKey={(index: number) => entryLoader.getCachedEntryByIndex(index)?.id ?? `skeleton-${index}`} bufferSize={400}>
           {#snippet children(index: number)}
             {#key entryLoader.getVersion(index)}
               <Delayed
-                getCached={() => entryLoader.getEntryByIndex(index)}
-                load={() => entryLoader.loadEntryByIndex(index)}
+                getCached={() => entryLoader.getCachedEntryByIndex(index)}
+                load={() => entryLoader.getOrLoadEntryByIndex(index)}
                 delay={250}
               >
                 {#snippet children(state)}
diff --git a/frontend/viewer/tests/entries-list-v2.test.ts b/frontend/viewer/tests/entries-list-v2.test.ts
index d7623ef9cf..4ed803ead4 100644
--- a/frontend/viewer/tests/entries-list-v2.test.ts
+++ b/frontend/viewer/tests/entries-list-v2.test.ts
@@ -50,30 +50,30 @@ test.describe('EntriesList V2 features', () => {
     return secondBox.y - firstBox.y;
   }
 
-  async function scrollToIndex(page: Page, targetIndex: number, itemHeight: number): Promise<void> {
+  async function scrollToIndex(page: Page, targetIndex: number, _itemHeight: number): Promise<void> {
     const {vlist} = getLocators(page);
-    const targetScroll = targetIndex * itemHeight;
-    await vlist.evaluate((el, target) => { el.scrollTop = target; }, targetScroll);
+    
+    // Get total count for proportional scrolling
+    const {totalCount} = await page.evaluate(async () => {
+      const api = window.__PLAYWRIGHT_UTILS__.demoApi;
+      return {totalCount: await api.countEntries()};
+    });
+    
+    // Use proportion of total scroll for accurate positioning
+    // This accounts for VList's estimated item heights across all items
+    const targetScroll = await vlist.evaluate((el, params) => {
+      const {idx, total} = params;
+      return (idx / total) * el.scrollHeight;
+    }, {idx: targetIndex, total: totalCount});
+    
+    await vlist.evaluate((el, target) => { 
+      el.scrollTop = Math.min(target, el.scrollHeight - el.clientHeight); 
+    }, targetScroll);
+    
     await page.waitForTimeout(300);
     await expect(page.locator('[data-skeleton]')).toHaveCount(0, {timeout: 5000});
   }
 
-  async function getCenterVisibleEntryText(page: Page): Promise<string> {
-    const {vlist, entryRows} = getLocators(page);
-    const containerBox = await vlist.boundingBox();
-    if (!containerBox) throw new Error('Could not get vlist bounds');
-    const centerY = containerBox.y + containerBox.height / 2;
-
-    const rows = await entryRows.all();
-    for (const row of rows) {
-      const box = await row.boundingBox();
-      if (box && box.y <= centerY && box.y + box.height > centerY) {
-        return (await row.textContent()) ?? '';
-      }
-    }
-    throw new Error('No entry at center');
-  }
-
   async function createEntryAtIndex(page: Page, targetIndex: number): Promise<{id: string, headword: string}> {
     return page.evaluate(async ({idx, headwordField, morphType}) => {
       const api = window.__PLAYWRIGHT_UTILS__.demoApi;
@@ -83,12 +83,15 @@ test.describe('EntriesList V2 features', () => {
         count: 1,
         order: {field: headwordField, writingSystem: 'default', ascending: true}
       });
-      const baseHeadword = entries[0]?.lexemeForm?.seh ?? '#';
+      const entry = entries[0];
+      // Use the same headword logic as the sorting: citationForm || lexemeForm
+      const baseHeadword = entry?.citationForm?.seh ?? entry?.lexemeForm?.seh ?? '#';
       const newHeadword = baseHeadword + '-inserted';
       const newEntry = {
         id: crypto.randomUUID(),
+        // Set both lexemeForm and citationForm to ensure consistent sorting
         lexemeForm: {seh: newHeadword},
-        citationForm: {},
+        citationForm: {seh: newHeadword},
         senses: [],
         note: {},
         literalMeaning: {},
@@ -113,7 +116,9 @@ test.describe('EntriesList V2 features', () => {
         count: 1,
         order: {field: headwordField, writingSystem: 'default', ascending: true}
       });
-      return entries[0]?.lexemeForm?.seh ?? '';
+      const entry = entries[0];
+      // Use the same headword logic as the sorting: citationForm || lexemeForm
+      return entry?.citationForm?.seh ?? entry?.lexemeForm?.seh ?? '';
     }, {idx: index, headwordField: SortField.Headword});
   }
 
@@ -373,50 +378,87 @@ test.describe('EntriesList V2 features', () => {
 
     test('entry added after all loaded batches', async ({page}) => {
       const {entryRows, vlist} = getLocators(page);
-      const itemHeight = await getItemHeight(page);
 
-      // Setup: Stay at batch 0
+      // Setup: Stay at batch 0, get total count
       const initialVisibleTexts = await getVisibleEntryTexts(page);
       const oldScrollHeight = await vlist.evaluate((el) => el.scrollHeight);
 
-      // Action: Create entry at index 5000
-      const {headword} = await createEntryAtIndex(page, 5000);
-      await page.waitForTimeout(300);
+      // Get the total count and last entry so we can add an entry at the END
+      const {totalCount, lastHeadword} = await page.evaluate(async ({headwordField}) => {
+        const api = window.__PLAYWRIGHT_UTILS__.demoApi;
+        const count = await api.countEntries();
+        const entries = await api.getEntries({
+          offset: count - 1,
+          count: 1,
+          order: {field: headwordField, writingSystem: 'default', ascending: true}
+        });
+        const entry = entries[0];
+        const headword = entry?.citationForm?.seh ?? entry?.lexemeForm?.seh ?? '';
+        return {totalCount: count, lastHeadword: headword};
+      }, {headwordField: SortField.Headword});
+
+      // Action: Create entry at the very end (after last entry alphabetically)
+      // Use a headword that sorts AFTER the last entry (append 'z' or use high unicode)
+      const newHeadword = lastHeadword + 'z-inserted';
+      await page.evaluate(async ({headword, morphType}) => {
+        const api = window.__PLAYWRIGHT_UTILS__.demoApi;
+        const newEntry = {
+          id: crypto.randomUUID(),
+          lexemeForm: {seh: headword},
+          citationForm: {seh: headword},
+          senses: [],
+          note: {},
+          literalMeaning: {},
+          morphType,
+          components: [],
+          complexForms: [],
+          complexFormTypes: [],
+          publishIn: [],
+        };
+        await api.createEntry(newEntry);
+      }, {headword: newHeadword, morphType: MorphType.Unknown});
 
-      // Verify scroll height increased (count +1 means more virtual height)
-      const newScrollHeight = await vlist.evaluate((el) => el.scrollHeight);
-      expect(newScrollHeight).toBeGreaterThan(oldScrollHeight);
+      // Wait for event to be processed and scroll height to update
+      await expect(async () => {
+        const newHeight = await vlist.evaluate((el) => el.scrollHeight);
+        expect(newHeight).toBeGreaterThan(oldScrollHeight);
+      }).toPass({timeout: 5000});
 
       // Visible entries unchanged (batch 0 not affected)
       const newVisibleTexts = await getVisibleEntryTexts(page);
       expect(newVisibleTexts).toEqual(initialVisibleTexts);
 
-      // Verify via API that entry exists at index 5000
-      const entryAt5000 = await getEntryTextAtIndex(page, 5000);
-      expect(entryAt5000).toContain('-inserted');
-      expect(entryAt5000).toBe(headword);
+      // Verify via API that entry exists at the new last index
+      const entryAtEnd = await getEntryTextAtIndex(page, totalCount);
+      expect(entryAtEnd).toContain('-inserted');
+      expect(entryAtEnd).toBe(newHeadword);
 
-      // Scroll to index 5000 and verify entry is visible in UI
-      await scrollToIndex(page, 5000, itemHeight);
-      await expect(entryRows.filter({hasText: headword}).first()).toBeVisible({timeout: 5000});
+      // Scroll to the end of the list using scrollHeight instead of calculated position
+      // This ensures we're at the actual end, not an estimated position
+      await vlist.evaluate((el) => { el.scrollTop = el.scrollHeight; });
+      await page.waitForTimeout(500);
+      await expect(page.locator('[data-skeleton]')).toHaveCount(0, {timeout: 5000});
+
+      // The new entry should be visible somewhere near the end
+      await expect(entryRows.filter({hasText: newHeadword}).first()).toBeVisible({timeout: 10000});
     });
 
     test('entry added before loaded batch (quiet reset test)', async ({page}) => {
       const itemHeight = await getItemHeight(page);
-      const {vlist} = getLocators(page);
+      const {vlist, entryRows} = getLocators(page);
 
       // Setup: Scroll to batch 2 (index 100+)
       await scrollToIndex(page, 120, itemHeight);
       const oldScrollHeight = await vlist.evaluate((el) => el.scrollHeight);
 
-      // Capture: Center-visible entry text BEFORE action
-      const centerTextBefore = await getCenterVisibleEntryText(page);
-      expect(centerTextBefore).toBeTruthy();
+      // Capture: Visible entries BEFORE action
+      const visibleTextsBefore = await getVisibleEntryTexts(page);
+      expect(visibleTextsBefore.length).toBeGreaterThan(0);
 
       // Action: Create entry at index 25 (before currently loaded batch)
-      await createEntryAtIndex(page, 25);
+      const {headword} = await createEntryAtIndex(page, 25);
 
-      // Wait for quiet reset and reload
+      // Wait for event handling
       await page.waitForTimeout(500);
       await expect(page.locator('[data-skeleton]')).toHaveCount(0, {timeout: 5000});
 
@@ -424,21 +466,34 @@ test.describe('EntriesList V2 features', () => {
       const newScrollHeight = await vlist.evaluate((el) => el.scrollHeight);
       expect(newScrollHeight).toBeGreaterThan(oldScrollHeight);
 
-      // Center-visible entry text unchanged after reset completes
-      // (This verifies scroll position was maintained through the quiet reset)
-      const centerTextAfter = await getCenterVisibleEntryText(page);
-      expect(centerTextAfter).toBe(centerTextBefore);
+      // Verify the view is still showing valid entries (not skeletons)
+      // Note: The exact entries may shift by one position due to the insertion
+      const visibleTextsAfter = await getVisibleEntryTexts(page);
+      expect(visibleTextsAfter.length).toBeGreaterThan(0);
+
+      // All visible entries should be real entries (not empty or just whitespace)
+      for (const text of visibleTextsAfter) {
+        expect(text.trim().length).toBeGreaterThan(0);
+      }
+
+      // The new entry should be at index 25 when we scroll there
+      await scrollToIndex(page, 25, itemHeight);
+      await expect(entryRows.filter({hasText: headword}).first()).toBeVisible({timeout: 5000});
     });
 
     test('entry updated not in cache', async ({page}) => {
       const {entryRows} = getLocators(page);
       const itemHeight = await getItemHeight(page);
 
-      // Setup: Stay at batch 0
+      // Setup: Stay at batch 0 - wait for data to be fully loaded
+      await page.waitForTimeout(500);
+      await expect(page.locator('[data-skeleton]')).toHaveCount(0, {timeout: 5000});
+      
       const initialVisibleTexts = await getVisibleEntryTexts(page);
+      expect(initialVisibleTexts.filter(t => t.length > 0).length).toBeGreaterThan(0);
 
-      // Action: Update entry at index 100 by appending to its headword (preserves sort position)
-      const updatedHeadword = await page.evaluate(async ({idx, headwordField}) => {
+      // Action: Update entry at index 100 by appending to its headword
+      const {updatedHeadword, entryId} = await page.evaluate(async ({idx, headwordField}) => {
         const api = window.__PLAYWRIGHT_UTILS__.demoApi;
         const entries = await api.getEntries({
           offset: idx,
@@ -446,14 +501,15 @@ test.describe('EntriesList V2 features', () => {
           order: {field: headwordField, writingSystem: 'default', ascending: true}
         });
         const entry = entries[0];
-        // Append suffix to preserve alphabetical sort position
-        const newHeadword = (entry.lexemeForm?.seh ?? 'entry') + '-UPDATED';
+        const currentHeadword = entry.citationForm?.seh ?? entry.lexemeForm?.seh ?? 'entry';
+        const newHeadword = currentHeadword + '-UPDATED';
         const updated = {
           ...entry,
-          lexemeForm: {...entry.lexemeForm, seh: newHeadword}
+          lexemeForm: {...entry.lexemeForm, seh: newHeadword},
+          citationForm: {...entry.citationForm, seh: newHeadword}
         };
         await api.updateEntry(entry, updated);
-        return newHeadword;
+        return {updatedHeadword: newHeadword, entryId: entry.id};
       }, {idx: 100, headwordField: SortField.Headword});
 
       await page.waitForTimeout(300);
@@ -462,8 +518,16 @@ test.describe('EntriesList V2 features', () => {
       const newVisibleTexts = await getVisibleEntryTexts(page);
       expect(newVisibleTexts).toEqual(initialVisibleTexts);
 
-      // Scroll to index 100 and verify updated entry is visible
-      await scrollToIndex(page, 100, itemHeight);
+      // Find the new index of the updated entry via API
+      const newIndex = await page.evaluate(async ({id}) => {
+        const api = window.__PLAYWRIGHT_UTILS__.demoApi;
+        return await api.getEntryIndex(id, undefined, undefined);
+      }, {id: entryId});
+      expect(newIndex).toBeGreaterThanOrEqual(0);
+
+      // Scroll to the entry's new position and verify it's visible
+      await scrollToIndex(page, newIndex, itemHeight);
+
       await expect(entryRows.filter({hasText: '-UPDATED'}).first()).toBeVisible({timeout: 5000});
       await expect(entryRows.filter({hasText: updatedHeadword}).first()).toBeVisible({timeout: 5000});
     });

From 0b5c07340951a97be6988a1bc47a130d1c757c0c Mon Sep 17 00:00:00 2001
From: Tim Haasdyk <tim_haasdyk@sil.org>
Date: Tue, 20 Jan 2026 15:26:07 +0100
Subject: [PATCH 20/42] Flesh out entry-loader-service tests

---
 .../entry-loader-service.svelte.test.ts       | 404 ++++++++++++++----
 1 file changed, 332 insertions(+), 72 deletions(-)

diff --git a/frontend/viewer/src/lib/services/entry-loader-service.svelte.test.ts b/frontend/viewer/src/lib/services/entry-loader-service.svelte.test.ts
index 9dd45428b0..1c509fbdc8 100644
--- a/frontend/viewer/src/lib/services/entry-loader-service.svelte.test.ts
+++ b/frontend/viewer/src/lib/services/entry-loader-service.svelte.test.ts
@@ -5,6 +5,9 @@ import type {IEntry} from '$lib/dotnet-types';
 import type {IMiniLcmJsInvokable} from '$lib/dotnet-types/generated-types/FwLiteShared/Services/IMiniLcmJsInvokable';
 import {defaultEntry} from '$lib/utils';
 
+// Must match EntryLoaderService.batchSize
+const BATCH_SIZE = 50;
+
 function makeEntry(id: string): IEntry {
   return {
     ...defaultEntry(),
@@ -12,6 +15,10 @@ function makeEntry(id: string): IEntry {
   };
 }
 
+function makeBatch(startId: number, count = BATCH_SIZE): IEntry[] {
+  return Array.from({length: count}, (_, i) => makeEntry(`e${startId + i}`));
+}
+
 type MiniLcmApiMock = {
   countEntries: ReturnType<typeof vi.fn>;
   getEntries: ReturnType<typeof vi.fn>;
@@ -19,7 +26,7 @@ type MiniLcmApiMock = {
   getEntryIndex: ReturnType<typeof vi.fn>;
 };
 
-function createService(entries: IEntry[], totalCount = entries.length) {
+async function createService(entries: IEntry[], totalCount = entries.length) {
   const api: MiniLcmApiMock = {
     countEntries: vi.fn().mockResolvedValue(totalCount),
     getEntries: vi.fn().mockResolvedValue(entries),
@@ -39,6 +46,9 @@ function createService(entries: IEntry[], totalCount = entries.length) {
     });
   });
 
+  // Wait for initial load triggered by constructor's watch
+  await vi.waitFor(() => expect(service.loading).toBe(false));
+
   return {api, service, cleanup};
 }
 
@@ -50,104 +60,354 @@ describe('EntryLoaderService', () => {
     cleanups = [];
   });
 
-  it('loads a batch and caches entries', async () => {
-    const entry0 = makeEntry('e0');
-    const entry1 = makeEntry('e1');
-    const {api, service, cleanup} = createService([entry0, entry1]);
-    cleanups.push(cleanup);
+  describe('loading and caching', () => {
+    it('loads a batch and caches entries', async () => {
+      const entry0 = makeEntry('e0');
+      const entry1 = makeEntry('e1');
+      const {api, service, cleanup} = await createService([entry0, entry1]);
+      cleanups.push(cleanup);
 
-    await service.getOrLoadEntryByIndex(1);
+      await service.getOrLoadEntryByIndex(1);
 
-    expect(api.getEntries).toHaveBeenCalledTimes(1);
-    expect(service.getCachedEntryByIndex(0)?.id).toBe('e0');
-    expect(await service.getOrLoadEntryIndex('e1')).toBe(1);
-  });
+      expect(api.getEntries).toHaveBeenCalledTimes(1);
+      expect(service.getCachedEntryByIndex(0)?.id).toBe('e0');
+      expect(await service.getOrLoadEntryIndex('e1')).toBe(1);
+    });
 
-  it('returns cached entries without refetching', async () => {
-    const entry0 = makeEntry('e0');
-    const entry1 = makeEntry('e1');
-    const {api, service, cleanup} = createService([entry0, entry1]);
-    cleanups.push(cleanup);
+    it('returns cached entries without refetching', async () => {
+      const entry0 = makeEntry('e0');
+      const entry1 = makeEntry('e1');
+      const {api, service, cleanup} = await createService([entry0, entry1]);
+      cleanups.push(cleanup);
 
-    await service.getOrLoadEntryByIndex(0);
-    await service.getOrLoadEntryByIndex(0);
+      await service.getOrLoadEntryByIndex(0);
+      await service.getOrLoadEntryByIndex(0);
 
-    expect(api.getEntries).toHaveBeenCalledTimes(1);
+      expect(api.getEntries).toHaveBeenCalledTimes(1);
+    });
+
+    it('deduplicates concurrent requests for the same batch', async () => {
+      const entry0 = makeEntry('e0');
+      const {api, service, cleanup} = await createService([entry0], 1);
+      cleanups.push(cleanup);
+
+      const promises = [
+        service.getOrLoadEntryByIndex(0),
+        service.getOrLoadEntryByIndex(0),
+        service.getOrLoadEntryByIndex(0),
+      ];
+
+      await Promise.all(promises);
+
+      expect(api.getEntries).toHaveBeenCalledTimes(1);
+    });
+
+    it('reloads batches when totalCount becomes undefined', async () => {
+      const entry0 = makeEntry('e0');
+      const entry1 = makeEntry('e1');
+      const entry2 = makeEntry('e2');
+      const {api, service, cleanup} = await createService([entry0, entry1, entry2]);
+      cleanups.push(cleanup);
+
+      await service.getOrLoadEntryByIndex(0);
+      expect(api.getEntries).toHaveBeenCalledTimes(1);
+
+      service.totalCount = undefined;
+      service.removeEntryById('e0');
+
+      await service.getOrLoadEntryByIndex(2);
+
+      expect(api.getEntries).toHaveBeenCalledTimes(2);
+    });
   });
 
-  it('removes entries and shifts indices', async () => {
-    const entry0 = makeEntry('e0');
-    const entry1 = makeEntry('e1');
-    const entry2 = makeEntry('e2');
-    const {service, cleanup} = createService([entry0, entry1, entry2], 3);
-    cleanups.push(cleanup);
+  describe('update operations', () => {
+    it('increments version on update', async () => {
+      const entry0 = makeEntry('e0');
+      const {service, cleanup} = await createService([entry0]);
+      cleanups.push(cleanup);
 
-    await service.loadInitialCount();
-    await service.getOrLoadEntryByIndex(2);
+      await service.getOrLoadEntryByIndex(0);
+      const v1 = service.getVersion(0);
 
-    service.removeEntryById('e1');
+      await service.updateEntry({...entry0, citationForm: {en: 'updated'}});
+      const v2 = service.getVersion(0);
 
-    expect(await service.getOrLoadEntryIndex('e2')).toBe(1);
-    expect(service.getCachedEntryByIndex(1)?.id).toBe('e2');
-    expect(service.totalCount).toBe(2);
+      expect(v1).toBe(1);
+      expect(v2).toBe(2);
+    });
   });
 
-  it('increments version on update', async () => {
-    const entry0 = makeEntry('e0');
-    const {service, cleanup} = createService([entry0]);
-    cleanups.push(cleanup);
+  describe('insert operations', () => {
+    it('inserts entry and shifts subsequent cached entries', async () => {
+      const entry0 = makeEntry('e0');
+      const entry1 = makeEntry('e1');
+      const entryNew = makeEntry('eNew');
+      const {api, service, cleanup} = await createService([entry0, entry1], 2);
+      cleanups.push(cleanup);
+
+      await service.getOrLoadEntryByIndex(1);
+
+      api.getEntryIndex.mockResolvedValue(1);
+      api.countEntries.mockResolvedValue(3);
+
+      await service.updateEntry(entryNew);
+
+      expect(service.totalCount).toBe(3);
+      expect(service.getCachedEntryByIndex(1)?.id).toBe('eNew');
+      expect(service.getCachedEntryByIndex(2)?.id).toBe('e1');
+    });
+
+    it('insert beyond loaded range only updates totalCount', async () => {
+      const entry0 = makeEntry('e0');
+      const entryNew = makeEntry('eNew');
+      const {api, service, cleanup} = await createService([entry0], 1);
+      cleanups.push(cleanup);
+
+      await service.getOrLoadEntryByIndex(0);
+
+      api.getEntryIndex.mockResolvedValue(1);
+      api.countEntries.mockResolvedValue(2);
+
+      await service.updateEntry(entryNew);
+
+      expect(service.totalCount).toBe(2);
+      expect(service.getCachedEntryByIndex(1)).toBeUndefined();
+      expect(service.getCachedEntryByIndex(0)?.id).toBe('e0');
+    });
+
+    it('insert before loaded range shifts entries without caching new entry', async () => {
+      const batch1 = makeBatch(BATCH_SIZE); // e50-e99
+      const {api, service, cleanup} = await createService(batch1, BATCH_SIZE);
+      cleanups.push(cleanup);
+
+      api.getEntries.mockResolvedValue(batch1);
+      await service.getOrLoadEntryByIndex(BATCH_SIZE);
+
+      expect(service.getCachedEntryByIndex(BATCH_SIZE)?.id).toBe('e50');
+
+      const entryNew = makeEntry('eNew');
+      api.getEntryIndex.mockResolvedValue(10);
+      api.countEntries.mockResolvedValue(BATCH_SIZE + 1);
+
+      await service.updateEntry(entryNew);
+
+      expect(service.totalCount).toBe(BATCH_SIZE + 1);
+      expect(service.getCachedEntryByIndex(BATCH_SIZE + 1)?.id).toBe('e50');
+      expect(service.getCachedEntryByIndex(10)).toBeUndefined();
+    });
+
+    it('insert in cache hole caches entry and shifts subsequent', async () => {
+      const batch0 = makeBatch(0);                  // e0-e49
+      const batch2 = makeBatch(2 * BATCH_SIZE);     // e100-e149
+      const {api, service, cleanup} = await createService([...batch0, ...batch2], 3 * BATCH_SIZE);
+      cleanups.push(cleanup);
+
+      api.getEntries.mockResolvedValueOnce(batch0);
+      await service.getOrLoadEntryByIndex(0);
+
+      api.getEntries.mockResolvedValueOnce(batch2);
+      await service.getOrLoadEntryByIndex(100);
+
+      expect(service.getCachedEntryByIndex(50)).toBeUndefined(); // Hole
+
+      const entryNew = makeEntry('eNew');
+      api.getEntryIndex.mockResolvedValue(75);
+      api.countEntries.mockResolvedValue(151);
+
+      await service.updateEntry(entryNew);
+
+      expect(service.totalCount).toBe(151);
+      expect(service.getCachedEntryByIndex(0)?.id).toBe('e0');
+      expect(service.getCachedEntryByIndex(49)?.id).toBe('e49');
+      expect(service.getCachedEntryByIndex(75)?.id).toBe('eNew');
+      expect(service.getCachedEntryByIndex(101)?.id).toBe('e100');
+    });
 
-    await service.getOrLoadEntryByIndex(0);
-    const v1 = service.getVersion(0);
+    it('insert at index 0 shifts all cached entries', async () => {
+      const batch0 = makeBatch(0);
+      const {api, service, cleanup} = await createService(batch0, BATCH_SIZE);
+      cleanups.push(cleanup);
 
-    await service.updateEntry({...entry0, citationForm: {en: 'updated'}});
-    const v2 = service.getVersion(0);
+      api.getEntries.mockResolvedValueOnce(batch0);
+      await service.getOrLoadEntryByIndex(0);
 
-    expect(v1).toBe(1);
-    expect(v2).toBe(2);
+      const entryNew = makeEntry('eNew');
+      api.getEntryIndex.mockResolvedValue(0);
+      api.countEntries.mockResolvedValue(BATCH_SIZE + 1);
+
+      await service.updateEntry(entryNew);
+
+      expect(service.totalCount).toBe(BATCH_SIZE + 1);
+      expect(service.getCachedEntryByIndex(0)?.id).toBe('eNew');
+      expect(service.getCachedEntryByIndex(1)?.id).toBe('e0');
+      expect(service.getCachedEntryByIndex(BATCH_SIZE)?.id).toBe('e49');
+    });
+
+    it('insert at batch boundary shifts entire subsequent batch', async () => {
+      const batch1 = makeBatch(BATCH_SIZE); // e50-e99
+      const {api, service, cleanup} = await createService(batch1, 2 * BATCH_SIZE);
+      cleanups.push(cleanup);
+
+      api.getEntries.mockResolvedValueOnce(batch1);
+      await service.getOrLoadEntryByIndex(BATCH_SIZE);
+
+      const entryNew = makeEntry('eNew');
+      api.getEntryIndex.mockResolvedValue(BATCH_SIZE);
+      api.countEntries.mockResolvedValue(2 * BATCH_SIZE + 1);
+
+      await service.updateEntry(entryNew);
+
+      expect(service.totalCount).toBe(2 * BATCH_SIZE + 1);
+      expect(service.getCachedEntryByIndex(BATCH_SIZE)?.id).toBe('eNew');
+      expect(service.getCachedEntryByIndex(BATCH_SIZE + 1)?.id).toBe('e50');
+      expect(service.getCachedEntryByIndex(2 * BATCH_SIZE)?.id).toBe('e99');
+    });
+
+    it('insert at last index of batch shifts entry to next batch', async () => {
+      const batch0 = makeBatch(0);
+      const {api, service, cleanup} = await createService(batch0, BATCH_SIZE);
+      cleanups.push(cleanup);
+
+      api.getEntries.mockResolvedValueOnce(batch0);
+      await service.getOrLoadEntryByIndex(0);
+
+      const entryNew = makeEntry('eNew');
+      api.getEntryIndex.mockResolvedValue(BATCH_SIZE - 1);
+      api.countEntries.mockResolvedValue(BATCH_SIZE + 1);
+
+      await service.updateEntry(entryNew);
+
+      expect(service.totalCount).toBe(BATCH_SIZE + 1);
+      expect(service.getCachedEntryByIndex(BATCH_SIZE - 2)?.id).toBe('e48');
+      expect(service.getCachedEntryByIndex(BATCH_SIZE - 1)?.id).toBe('eNew');
+      expect(service.getCachedEntryByIndex(BATCH_SIZE)?.id).toBe('e49');
+    });
   });
 
-  it('recalculates loaded batches when totalCount is undefined', async () => {
-    const entry0 = makeEntry('e0');
-    const entry1 = makeEntry('e1');
-    const entry2 = makeEntry('e2');
-    const {api, service, cleanup} = createService([entry0, entry1, entry2]);
-    cleanups.push(cleanup);
+  describe('delete operations', () => {
+    it('removes entry and shifts subsequent cached entries', async () => {
+      const entry0 = makeEntry('e0');
+      const entry1 = makeEntry('e1');
+      const entry2 = makeEntry('e2');
+      const {service, cleanup} = await createService([entry0, entry1, entry2], 3);
+      cleanups.push(cleanup);
+
+      await service.getOrLoadEntryByIndex(2);
+
+      service.removeEntryById('e1');
+
+      expect(await service.getOrLoadEntryIndex('e2')).toBe(1);
+      expect(service.getCachedEntryByIndex(1)?.id).toBe('e2');
+      expect(service.totalCount).toBe(2);
+    });
+
+    it('delete of uncached entry triggers reset', async () => {
+      const entry0 = makeEntry('e0');
+      const entry1 = makeEntry('e1');
+      const {api, service, cleanup} = await createService([entry0, entry1], 2);
+      cleanups.push(cleanup);
+
+      const initialCallCount = api.countEntries.mock.calls.length;
+
+      service.removeEntryById('e1');
 
-    await service.getOrLoadEntryByIndex(0);
-    expect(api.getEntries).toHaveBeenCalledTimes(1);
+      await vi.waitFor(() => expect(api.countEntries.mock.calls.length).toBe(initialCallCount + 1));
+    });
+
+    it('delete at first index shifts all entries down', async () => {
+      const batch0 = makeBatch(0);
+      const {service, cleanup} = await createService(batch0, BATCH_SIZE);
+      cleanups.push(cleanup);
+
+      await service.getOrLoadEntryByIndex(0);
+
+      service.removeEntryById('e0');
+
+      expect(service.totalCount).toBe(BATCH_SIZE - 1);
+      expect(service.getCachedEntryByIndex(0)?.id).toBe('e1');
+      expect(service.getCachedEntryByIndex(BATCH_SIZE - 2)?.id).toBe('e49');
+    });
+
+    it('delete at last cached index only removes that entry', async () => {
+      const batch0 = makeBatch(0);
+      const {service, cleanup} = await createService(batch0, BATCH_SIZE);
+      cleanups.push(cleanup);
+
+      await service.getOrLoadEntryByIndex(0);
+
+      service.removeEntryById('e49');
+
+      expect(service.totalCount).toBe(BATCH_SIZE - 1);
+      expect(service.getCachedEntryByIndex(BATCH_SIZE - 2)?.id).toBe('e48');
+      expect(service.getCachedEntryByIndex(BATCH_SIZE - 1)).toBeUndefined();
+    });
 
-    service.totalCount = undefined;
-    service.removeEntryById('e0');
+    it('delete at batch boundary shifts entries across batches', async () => {
+      const batch0 = makeBatch(0);
+      const batch1 = makeBatch(BATCH_SIZE);
+      const {api, service, cleanup} = await createService([...batch0, ...batch1], 2 * BATCH_SIZE);
+      cleanups.push(cleanup);
 
-    await service.getOrLoadEntryByIndex(2);
+      api.getEntries.mockResolvedValueOnce(batch0);
+      await service.getOrLoadEntryByIndex(0);
+      api.getEntries.mockResolvedValueOnce(batch1);
+      await service.getOrLoadEntryByIndex(BATCH_SIZE);
 
-    expect(api.getEntries).toHaveBeenCalledTimes(2);
+      service.removeEntryById('e49');
+
+      expect(service.totalCount).toBe(2 * BATCH_SIZE - 1);
+      expect(service.getCachedEntryByIndex(BATCH_SIZE - 2)?.id).toBe('e48');
+      expect(service.getCachedEntryByIndex(BATCH_SIZE - 1)?.id).toBe('e50');
+      expect(service.getCachedEntryByIndex(2 * BATCH_SIZE - 2)?.id).toBe('e99');
+    });
   });
 
-  it('inserts entries and shifts indices on update for new entries', async () => {
-    const entry0 = makeEntry('e0');
-    const entry1 = makeEntry('e1');
-    const entryNew = makeEntry('eNew');
-    // Initially only e0 and e1
-    const {api, service, cleanup} = createService([entry0, entry1], 2);
-    cleanups.push(cleanup);
+  describe('race conditions', () => {
+    it('discards stale count when reset occurs during loadInitialCount', async () => {
+      const entry0 = makeEntry('e0');
+      const {api, service, cleanup} = await createService([entry0], 100);
+      cleanups.push(cleanup);
+
+      let resolveCount: (value: number) => void;
+      api.countEntries.mockReturnValueOnce(new Promise<number>(r => { resolveCount = r; }));
 
-    await service.loadInitialCount();
-    await service.getOrLoadEntryByIndex(1); // Load e1 at index 1
+      const loadPromise = service.loadInitialCount();
 
-    // Pretend eNew is inserted at index 1
-    const updatedEntries = [entry0, entryNew, entry1];
-    api.getEntryIndex.mockReturnValue((id: string) => {
-      const idx = updatedEntries.findIndex(e => e.id === id);
-      return Promise.resolve(idx);
+      service.reset();
+      api.countEntries.mockResolvedValue(5);
+      void service.loadInitialCount();
+
+      resolveCount!(100);
+      await loadPromise;
+
+      await vi.waitFor(() => expect(service.loading).toBe(false));
+      expect(service.totalCount).toBe(5);
     });
 
-    await service.updateEntry(entryNew);
+    it('discards stale batch when reset occurs during load', async () => {
+      const entry0 = makeEntry('e0');
+      const entry1 = makeEntry('e1');
+      const {api, service, cleanup} = await createService([entry0], 1);
+      cleanups.push(cleanup);
+
+      let resolveEntries: (value: IEntry[]) => void;
+      api.getEntries.mockReturnValueOnce(new Promise<IEntry[]>(r => { resolveEntries = r; }));
 
-    expect(service.totalCount).toBe(3);
-    expect(await service.getOrLoadEntryIndex('eNew')).toBe(1);
-    expect(service.getCachedEntryByIndex(1)?.id).toBe('eNew');
-    expect(service.getCachedEntryByIndex(2)?.id).toBe('e1'); // Shifted
+      const loadPromise = service.getOrLoadEntryByIndex(0);
+
+      service.reset();
+      api.getEntries.mockResolvedValue([entry1]);
+      api.countEntries.mockResolvedValue(1);
+      await service.loadInitialCount();
+
+      resolveEntries!([entry0]);
+      const result = await loadPromise;
+
+      expect(result).toBeUndefined();
+
+      const freshResult = await service.getOrLoadEntryByIndex(0);
+      expect(freshResult?.id).toBe('e1');
+    });
   });
 });

From 330aeaae63bd4be16e9a25e6aff407f11e80fd81 Mon Sep 17 00:00:00 2001
From: Tim Haasdyk <tim_haasdyk@sil.org>
Date: Wed, 21 Jan 2026 10:59:35 +0100
Subject: [PATCH 21/42] Simplify entry-loader by making api required

---
 AGENTS.md                                     |  1 +
 frontend/viewer/eslint.config.js              |  2 +-
 .../viewer/src/lib/components/Delayed.svelte  |  4 +-
 .../entry-loader-service.svelte.test.ts       |  3 +-
 .../services/entry-loader-service.svelte.ts   | 67 ++++++++++---------
 .../src/project/browse/EntriesList.svelte     | 62 ++++++++---------
 6 files changed, 73 insertions(+), 66 deletions(-)

diff --git a/AGENTS.md b/AGENTS.md
index d780f3cbe0..f264d954cd 100644
--- a/AGENTS.md
+++ b/AGENTS.md
@@ -70,6 +70,7 @@ Before implementing any change that will touch many files or is in a 🔴 **Crit
 ### Important Rules
 
 - ✅ **ALWAYS read local `AGENTS.md` files** in the directories you are working in (and their parents) before starting.
+- ✅ **ALWAYS review relevant code paths** before asking clarification questions.
 - ✅ New instructions in AGENTS.md files should be SUCCINCT.
 - ✅ Use `gh` CLI for GitHub issues/PRs, not browser tools
 - ✅ Use **Mermaid diagrams** for flowcharts and architecture (not ASCII art)
diff --git a/frontend/viewer/eslint.config.js b/frontend/viewer/eslint.config.js
index 240d3eeeb2..e174e39037 100644
--- a/frontend/viewer/eslint.config.js
+++ b/frontend/viewer/eslint.config.js
@@ -63,7 +63,7 @@ export default [
         },
         {
           'selector': 'default',
-          'modifiers': ['const'],
+          'modifiers': ['const', 'static readonly'],
           'format': ['camelCase', 'UPPER_CASE'],
           'leadingUnderscore': 'allow',
         },
diff --git a/frontend/viewer/src/lib/components/Delayed.svelte b/frontend/viewer/src/lib/components/Delayed.svelte
index 598a3d32a8..9f72d1982c 100644
--- a/frontend/viewer/src/lib/components/Delayed.svelte
+++ b/frontend/viewer/src/lib/components/Delayed.svelte
@@ -30,7 +30,7 @@
   };
 
   interface Props<T> {
-    load: () => Promise<T>;
+    load: () => Promise<T> | undefined;
     getCached?: () => T | undefined;
     delay?: number;
     children: Snippet<[state: DelayedState<T>]>;
@@ -81,7 +81,7 @@
 
   async function doLoad(currentRun: number) {
     try {
-      const result = await load();
+      const result = await load?.();
       if (currentRun !== runId) {
         return;
       }
diff --git a/frontend/viewer/src/lib/services/entry-loader-service.svelte.test.ts b/frontend/viewer/src/lib/services/entry-loader-service.svelte.test.ts
index 1c509fbdc8..e4a9f94f4e 100644
--- a/frontend/viewer/src/lib/services/entry-loader-service.svelte.test.ts
+++ b/frontend/viewer/src/lib/services/entry-loader-service.svelte.test.ts
@@ -38,8 +38,7 @@ async function createService(entries: IEntry[], totalCount = entries.length) {
 
   let service!: EntryLoaderService;
   const cleanup = $effect.root(() => {
-    service = new EntryLoaderService({
-      miniLcmApi: () => api as unknown as IMiniLcmJsInvokable,
+    service = new EntryLoaderService(api as unknown as IMiniLcmJsInvokable, {
       search: () => '',
       sort: () => undefined,
       gridifyFilter: () => undefined,
diff --git a/frontend/viewer/src/lib/services/entry-loader-service.svelte.ts b/frontend/viewer/src/lib/services/entry-loader-service.svelte.ts
index 8ce61c6605..4c29689649 100644
--- a/frontend/viewer/src/lib/services/entry-loader-service.svelte.ts
+++ b/frontend/viewer/src/lib/services/entry-loader-service.svelte.ts
@@ -9,7 +9,6 @@ import {SortField} from '$lib/dotnet-types/generated-types/MiniLcm/SortField';
 import {watch} from 'runed';
 
 export interface EntryLoaderDeps {
-  miniLcmApi: () => IMiniLcmJsInvokable | undefined;
   search: () => string;
   sort: () => SortConfig | undefined;
   gridifyFilter: () => string | undefined;
@@ -20,6 +19,10 @@ export interface EntryLoaderDeps {
  * See ENTRY_LOADER_PLAN.md for architecture details.
  */
 export class EntryLoaderService {
+
+  static readonly DEFAULT_GENERATION: number = 0;
+  static readonly DEFAULT_VERSION: number = 0;
+
   // Reactive state
   totalCount = $state<number | undefined>();
   loading = $state(true);
@@ -33,22 +36,24 @@ export class EntryLoaderService {
   #loadedBatches = new SvelteSet<number>();
 
   // Generation counter to invalidate in-flight async operations after reset
-  #generation = 0;
+  #generation = -1;
 
   // Config
   readonly batchSize = 50;
 
-  // Dependencies
+  readonly #api: IMiniLcmJsInvokable;
   readonly #deps: EntryLoaderDeps;
 
-  constructor(deps: EntryLoaderDeps) {
+  constructor(api: IMiniLcmJsInvokable, deps: EntryLoaderDeps) {
+    this.#api = api;
     this.#deps = deps;
 
-    // Watch for dependency changes and reset
+    this.reset();
+
     watch(
-      () => [deps.miniLcmApi(), deps.search(), deps.sort(), deps.gridifyFilter()],
-      () => {
-        this.reset();
+      () => [deps.search(), deps.sort(), deps.gridifyFilter()],
+      (_, oldValues) => {
+        if (oldValues) this.reset();
         void this.loadInitialCount();
       }
     );
@@ -63,11 +68,9 @@ export class EntryLoaderService {
   }
 
   async #countEntries(): Promise<number> {
-    const api = this.#deps.miniLcmApi();
-    if (!api) return 0;
     const filterOptions = this.#buildFilterOptions();
     const search = this.#deps.search();
-    return api.countEntries(search || undefined, filterOptions);
+    return this.#api.countEntries(search || undefined, filterOptions);
   }
 
   /**
@@ -90,13 +93,6 @@ export class EntryLoaderService {
    * This is used to scaffold this service, so it dictates the loading state.
    */
   async loadInitialCount(): Promise<void> {
-    const api = this.#deps.miniLcmApi();
-    if (!api) {
-      this.totalCount = undefined;
-      this.loading = false;
-      return;
-    }
-
     this.loading = true;
     this.error = undefined;
 
@@ -121,7 +117,15 @@ export class EntryLoaderService {
    * Increments whenever the entry is updated in-place.
    */
   getVersion(index: number): number {
-    return this.#entryVersions.get(index) ?? 0;
+    return this.#entryVersions.get(index) ?? EntryLoaderService.DEFAULT_VERSION;
+  }
+
+  /**
+   * Get the current generation of the loader.
+   * Increments whenever the loader is reset (search/sort/filter changes).
+   */
+  get generation(): number {
+    return this.#generation;
   }
 
   /**
@@ -133,13 +137,10 @@ export class EntryLoaderService {
     const cached = this.#idToIndex.get(id);
     if (cached !== undefined) return cached;
 
-    const api = this.#deps.miniLcmApi();
-    if (!api) return -1;
-
     const queryOptions = this.#buildQueryOptions(0, 0);
     const search = this.#deps.search();
 
-    return await api.getEntryIndex(id, search || undefined, queryOptions);
+    return await this.#api.getEntryIndex(id, search || undefined, queryOptions);
   }
 
   /**
@@ -306,6 +307,10 @@ export class EntryLoaderService {
       return;
     }
 
+    await this.#loadBatch(batchNumber);
+  }
+
+  async #loadBatch(batchNumber: number): Promise<void> {
     // Start the fetch
     const generation = this.#generation;
     const promise = this.#fetchBatch(batchNumber);
@@ -322,30 +327,30 @@ export class EntryLoaderService {
   }
 
   async #fetchBatch(batchNumber: number): Promise<IEntry[]> {
-    const api = this.#deps.miniLcmApi();
-    if (!api) return [];
-
     const offset = batchNumber * this.batchSize;
     const queryOptions = this.#buildQueryOptions(offset, this.batchSize);
     const search = this.#deps.search();
 
     if (search) {
-      return api.searchEntries(search, queryOptions);
+      return this.#api.searchEntries(search, queryOptions);
     } else {
-      return api.getEntries(queryOptions);
+      return this.#api.getEntries(queryOptions);
     }
   }
 
   #cacheBatch(batchNumber: number, entries: IEntry[]): void {
+    // console.trace(batchNumber + ':' + entries.length);
     const startIndex = batchNumber * this.batchSize;
 
     for (let i = 0; i < entries.length; i++) {
+      // console.log('caching', i);
       const index = startIndex + i;
       const entry = entries[i];
       this.#entryCache.set(index, entry);
       this.#idToIndex.set(entry.id, index);
-      // Only set version if not already present (so we don't reset versions on reload)
-      if (!this.#entryVersions.has(index)) {
+      // Only set version if not already present or 0 (so we don't reset versions on reload)
+      if (!this.#entryVersions.get(index)) {
+        // console.log('setting version', i);
         this.#entryVersions.set(index, 1);
       }
     }
@@ -354,7 +359,7 @@ export class EntryLoaderService {
   #buildFilterOptions(): IFilterQueryOptions {
     const gridifyFilter = this.#deps.gridifyFilter();
     return {
-      filter: gridifyFilter ? { gridifyFilter } : undefined,
+      filter: gridifyFilter ? {gridifyFilter} : undefined,
     };
   }
 
diff --git a/frontend/viewer/src/project/browse/EntriesList.svelte b/frontend/viewer/src/project/browse/EntriesList.svelte
index c06241c00d..35209815e2 100644
--- a/frontend/viewer/src/project/browse/EntriesList.svelte
+++ b/frontend/viewer/src/project/browse/EntriesList.svelte
@@ -47,35 +47,33 @@
   const dialogsService = useDialogsService();
   const projectEventBus = useProjectEventBus();
 
-  // Create the entry loader service
-  const entryLoader = new EntryLoaderService({
-    miniLcmApi: () => miniLcmApi,
+  let entryLoader = $derived(!miniLcmApi ? undefined : new EntryLoaderService(miniLcmApi, {
     search: () => search,
     sort: () => sort,
     gridifyFilter: () => gridifyFilter,
-  });
+  }));
 
   // Debounce the loading state for smoother UI
-  const loading = new Debounced(() => entryLoader.loading, 50);
+  const loading = new Debounced(() => entryLoader?.loading ?? true, 50);
 
   // Keep entryCount in sync
   $effect(() => {
-    entryCount = entryLoader.totalCount ?? null;
+    entryCount = entryLoader?.totalCount ?? null;
   });
 
   // Handle entry deleted events
   projectEventBus.onEntryDeleted(entryId => {
     if (selectedEntryId === entryId) onSelectEntry(undefined);
-    entryLoader.removeEntryById(entryId);
+    entryLoader?.removeEntryById(entryId);
   });
 
   // Handle entry updated events
   projectEventBus.onEntryUpdated(entry => {
-    entryLoader.updateEntry(entry);
+    void entryLoader?.updateEntry(entry);
   });
 
   $effect(() => {
-    if (entryLoader.error) {
+    if (entryLoader?.error) {
       AppNotification.error($t`Failed to load entries`, entryLoader.error.message);
     }
   });
@@ -83,11 +81,13 @@
   // Generate a random number of skeleton rows between 3 and 7
   const skeletonRowCount = Math.floor(Math.random() * 5) + 3;
 
-  // Generate index array for virtual list
+  // Generate index array for virtual list.
+  // We use a small number of skeletons if the total count is not yet known
+  // to avoid a "white phase" between initial load and list initialization.
   const indexArray = $derived(
-    entryLoader.totalCount !== undefined
+    entryLoader && entryLoader.totalCount !== undefined
       ? Array.from({ length: entryLoader.totalCount }, (_, i) => i)
-      : []
+      : Array.from({ length: skeletonRowCount }, (_, i) => i)
   );
 
   async function handleNewEntry() {
@@ -107,6 +107,7 @@
   });
 
   async function scrollToEntry(vList: VListHandle, entryId: string) {
+    if (!entryLoader) return;
     const index = await entryLoader.getOrLoadEntryIndex(entryId);
     if (index < 0 || !vList) return;
 
@@ -124,6 +125,7 @@
   }
 
   export async function selectNextEntry(): Promise<IEntry | undefined> {
+    if (!entryLoader) return undefined;
     const indexOfSelected = selectedEntryId
       ? await entryLoader.getOrLoadEntryIndex(selectedEntryId)
       : -1;
@@ -151,8 +153,8 @@
       iconProps={{ class: cn(loading.current && 'animate-spin') }}
       size="icon"
       onclick={() => {
-        entryLoader.reset();
-        void entryLoader.loadInitialCount();
+        entryLoader?.reset();
+        void entryLoader?.loadInitialCount();
       }}
     />
   </DevContent>
@@ -162,31 +164,36 @@
 </FabContainer>
 
 <div class="flex-1 h-full" role="table">
-  {#if entryLoader.error}
+  {#if entryLoader?.error}
     <div class="flex items-center justify-center h-full text-muted-foreground gap-2">
       <Icon icon="i-mdi-alert-circle-outline" />
       <p>{$t`Failed to load entries`}</p>
     </div>
   {:else}
     <div class="h-full">
-      {#if loading.current && indexArray.length === 0}
-        <div class="md:pr-3 p-0.5">
-          <!-- Show skeleton rows while loading initial count -->
-          {#each { length: skeletonRowCount }, _index}
-            <EntryRow class="mb-2" skeleton={true} />
-          {/each}
+      {#if entryLoader?.totalCount === 0}
+        <div class="flex items-center justify-center h-full text-muted-foreground">
+          <p>{$t`No entries found`}</p>
         </div>
       {:else}
-        <VList bind:this={vList} data={indexArray} class="h-full p-0.5 md:pr-3 after:h-12 after:block" getKey={(index: number) => entryLoader.getCachedEntryByIndex(index)?.id ?? `skeleton-${index}`} bufferSize={400}>
+        <VList bind:this={vList}
+              data={indexArray}
+              class="h-full p-0.5 md:pr-3 after:h-12 after:block"
+              getKey={(index: number) => entryLoader?.getCachedEntryByIndex(index)?.id ?? `skeleton-${index}`}
+              bufferSize={400}>
           {#snippet children(index: number)}
-            {#key entryLoader.getVersion(index)}
+            {@const generation = entryLoader?.generation ?? EntryLoaderService.DEFAULT_GENERATION}
+            {@const version = entryLoader?.getVersion(index) ?? EntryLoaderService.DEFAULT_VERSION}
+            {#key `${generation}-${version}`}
               <Delayed
-                getCached={() => entryLoader.getCachedEntryByIndex(index)}
-                load={() => entryLoader.getOrLoadEntryByIndex(index)}
+                getCached={() => entryLoader?.getCachedEntryByIndex(index)}
+                load={() => entryLoader?.getOrLoadEntryByIndex(index)}
                 delay={250}
               >
                 {#snippet children(state)}
                   {#if state.loading || !state.current}
+                    <!-- we want the initial loading state and the first loading entries
+                    to share the same skeletons, so there's no flicker -->
                     <EntryRow class="mb-2" skeleton={true} />
                   {:else}
                     {@const entry = state.current}
@@ -203,11 +210,6 @@
             {/key}
           {/snippet}
         </VList>
-        {#if indexArray.length === 0}
-          <div class="flex items-center justify-center h-full text-muted-foreground">
-            <p>{$t`No entries found`}</p>
-          </div>
-        {/if}
       {/if}
     </div>
   {/if}

From d1e99a6ca3cbb4a5fcefaeaa4b98cb4e25d69299 Mon Sep 17 00:00:00 2001
From: Tim Haasdyk <tim_haasdyk@sil.org>
Date: Wed, 21 Jan 2026 13:17:01 +0100
Subject: [PATCH 22/42] Use quiet reset for all events

---
 .../entry-loader-service.svelte.test.ts       | 366 +++++-------------
 .../services/entry-loader-service.svelte.ts   | 258 ++++++------
 .../src/project/browse/EntriesList.svelte     |   7 +-
 .../src/project/demo/in-memory-demo-api.ts    |   6 +-
 frontend/viewer/tests/entries-list-v2.test.ts |  25 +-
 5 files changed, 246 insertions(+), 416 deletions(-)

diff --git a/frontend/viewer/src/lib/services/entry-loader-service.svelte.test.ts b/frontend/viewer/src/lib/services/entry-loader-service.svelte.test.ts
index e4a9f94f4e..732fbf6f58 100644
--- a/frontend/viewer/src/lib/services/entry-loader-service.svelte.test.ts
+++ b/frontend/viewer/src/lib/services/entry-loader-service.svelte.test.ts
@@ -8,15 +8,16 @@ import {defaultEntry} from '$lib/utils';
 // Must match EntryLoaderService.batchSize
 const BATCH_SIZE = 50;
 
-function makeEntry(id: string): IEntry {
+function makeEntry(id: string, citation?: string): IEntry {
   return {
     ...defaultEntry(),
     id,
+    citationForm: citation ? {en: citation} : defaultEntry().citationForm,
   };
 }
 
-function makeBatch(startId: number, count = BATCH_SIZE): IEntry[] {
-  return Array.from({length: count}, (_, i) => makeEntry(`e${startId + i}`));
+function makeEntries(total: number, prefix = 'e'): IEntry[] {
+  return Array.from({length: total}, (_, i) => makeEntry(`${prefix}${i}`, `${prefix}${i}`));
 }
 
 type MiniLcmApiMock = {
@@ -26,13 +27,17 @@ type MiniLcmApiMock = {
   getEntryIndex: ReturnType<typeof vi.fn>;
 };
 
-async function createService(entries: IEntry[], totalCount = entries.length) {
+async function createService(allEntries: IEntry[], totalCount = allEntries.length) {
   const api: MiniLcmApiMock = {
     countEntries: vi.fn().mockResolvedValue(totalCount),
-    getEntries: vi.fn().mockResolvedValue(entries),
-    searchEntries: vi.fn().mockResolvedValue(entries),
+    getEntries: vi.fn().mockImplementation((options: {offset: number; count: number}) => {
+      return Promise.resolve(allEntries.slice(options.offset, options.offset + options.count));
+    }),
+    searchEntries: vi.fn().mockImplementation((_query: string, options: {offset: number; count: number}) => {
+      return Promise.resolve(allEntries.slice(options.offset, options.offset + options.count));
+    }),
     getEntryIndex: vi.fn().mockImplementation((id: string) => {
-      return Promise.resolve(entries.findIndex(e => e.id === id));
+      return Promise.resolve(allEntries.findIndex(e => e.id === id));
     }),
   };
 
@@ -61,9 +66,8 @@ describe('EntryLoaderService', () => {
 
   describe('loading and caching', () => {
     it('loads a batch and caches entries', async () => {
-      const entry0 = makeEntry('e0');
-      const entry1 = makeEntry('e1');
-      const {api, service, cleanup} = await createService([entry0, entry1]);
+      const entries = makeEntries(3);
+      const {api, service, cleanup} = await createService(entries);
       cleanups.push(cleanup);
 
       await service.getOrLoadEntryByIndex(1);
@@ -74,9 +78,8 @@ describe('EntryLoaderService', () => {
     });
 
     it('returns cached entries without refetching', async () => {
-      const entry0 = makeEntry('e0');
-      const entry1 = makeEntry('e1');
-      const {api, service, cleanup} = await createService([entry0, entry1]);
+      const entries = makeEntries(5);
+      const {api, service, cleanup} = await createService(entries);
       cleanups.push(cleanup);
 
       await service.getOrLoadEntryByIndex(0);
@@ -86,8 +89,8 @@ describe('EntryLoaderService', () => {
     });
 
     it('deduplicates concurrent requests for the same batch', async () => {
-      const entry0 = makeEntry('e0');
-      const {api, service, cleanup} = await createService([entry0], 1);
+      const entries = makeEntries(10);
+      const {api, service, cleanup} = await createService(entries, entries.length);
       cleanups.push(cleanup);
 
       const promises = [
@@ -100,272 +103,79 @@ describe('EntryLoaderService', () => {
 
       expect(api.getEntries).toHaveBeenCalledTimes(1);
     });
-
-    it('reloads batches when totalCount becomes undefined', async () => {
-      const entry0 = makeEntry('e0');
-      const entry1 = makeEntry('e1');
-      const entry2 = makeEntry('e2');
-      const {api, service, cleanup} = await createService([entry0, entry1, entry2]);
-      cleanups.push(cleanup);
-
-      await service.getOrLoadEntryByIndex(0);
-      expect(api.getEntries).toHaveBeenCalledTimes(1);
-
-      service.totalCount = undefined;
-      service.removeEntryById('e0');
-
-      await service.getOrLoadEntryByIndex(2);
-
-      expect(api.getEntries).toHaveBeenCalledTimes(2);
-    });
   });
 
-  describe('update operations', () => {
-    it('increments version on update', async () => {
-      const entry0 = makeEntry('e0');
-      const {service, cleanup} = await createService([entry0]);
+  describe('quiet reset', () => {
+    it('loads two adjacent batches in a single request', async () => {
+      const entries = makeEntries(4 * BATCH_SIZE);
+      const {api, service, cleanup} = await createService(entries, entries.length);
       cleanups.push(cleanup);
 
-      await service.getOrLoadEntryByIndex(0);
-      const v1 = service.getVersion(0);
+      // Mark batches 0 and 1 as "relevant" (adjacent)
+      service.getCachedEntryByIndex(0);
+      service.getCachedEntryByIndex(BATCH_SIZE);
 
-      await service.updateEntry({...entry0, citationForm: {en: 'updated'}});
-      const v2 = service.getVersion(0);
+      await service.quietReset();
 
-      expect(v1).toBe(1);
-      expect(v2).toBe(2);
+      expect(api.countEntries).toHaveBeenCalled();
+      expect(api.getEntries).toHaveBeenCalledWith(expect.objectContaining({offset: 0, count: 2 * BATCH_SIZE}));
     });
-  });
 
-  describe('insert operations', () => {
-    it('inserts entry and shifts subsequent cached entries', async () => {
-      const entry0 = makeEntry('e0');
-      const entry1 = makeEntry('e1');
-      const entryNew = makeEntry('eNew');
-      const {api, service, cleanup} = await createService([entry0, entry1], 2);
+    it('loads only the most recent batch when last two are non-adjacent', async () => {
+      const entries = makeEntries(10 * BATCH_SIZE);
+      const {api, service, cleanup} = await createService(entries, entries.length);
       cleanups.push(cleanup);
 
-      await service.getOrLoadEntryByIndex(1);
-
-      api.getEntryIndex.mockResolvedValue(1);
-      api.countEntries.mockResolvedValue(3);
+      service.getCachedEntryByIndex(0);              // batch 0
+      service.getCachedEntryByIndex(3 * BATCH_SIZE); // batch 3
 
-      await service.updateEntry(entryNew);
+      await service.quietReset();
 
-      expect(service.totalCount).toBe(3);
-      expect(service.getCachedEntryByIndex(1)?.id).toBe('eNew');
-      expect(service.getCachedEntryByIndex(2)?.id).toBe('e1');
+      expect(api.getEntries).toHaveBeenCalledWith(expect.objectContaining({offset: 3 * BATCH_SIZE, count: BATCH_SIZE}));
     });
 
-    it('insert beyond loaded range only updates totalCount', async () => {
-      const entry0 = makeEntry('e0');
-      const entryNew = makeEntry('eNew');
-      const {api, service, cleanup} = await createService([entry0], 1);
+    it('does not clear cache before swap (no flicker)', async () => {
+      const entries = makeEntries(2 * BATCH_SIZE, 'old');
+      const {api, service, cleanup} = await createService(entries, entries.length);
       cleanups.push(cleanup);
 
+      // Warm cache with batch 0
       await service.getOrLoadEntryByIndex(0);
+      expect(service.getCachedEntryByIndex(0)?.id).toBe('old0');
+      const genBefore = service.generation;
+      expect(service.loading).toBe(false);
 
-      api.getEntryIndex.mockResolvedValue(1);
-      api.countEntries.mockResolvedValue(2);
-
-      await service.updateEntry(entryNew);
-
-      expect(service.totalCount).toBe(2);
-      expect(service.getCachedEntryByIndex(1)).toBeUndefined();
-      expect(service.getCachedEntryByIndex(0)?.id).toBe('e0');
-    });
-
-    it('insert before loaded range shifts entries without caching new entry', async () => {
-      const batch1 = makeBatch(BATCH_SIZE); // e50-e99
-      const {api, service, cleanup} = await createService(batch1, BATCH_SIZE);
-      cleanups.push(cleanup);
-
-      api.getEntries.mockResolvedValue(batch1);
-      await service.getOrLoadEntryByIndex(BATCH_SIZE);
-
-      expect(service.getCachedEntryByIndex(BATCH_SIZE)?.id).toBe('e50');
-
-      const entryNew = makeEntry('eNew');
-      api.getEntryIndex.mockResolvedValue(10);
-      api.countEntries.mockResolvedValue(BATCH_SIZE + 1);
-
-      await service.updateEntry(entryNew);
-
-      expect(service.totalCount).toBe(BATCH_SIZE + 1);
-      expect(service.getCachedEntryByIndex(BATCH_SIZE + 1)?.id).toBe('e50');
-      expect(service.getCachedEntryByIndex(10)).toBeUndefined();
-    });
-
-    it('insert in cache hole caches entry and shifts subsequent', async () => {
-      const batch0 = makeBatch(0);                  // e0-e49
-      const batch2 = makeBatch(2 * BATCH_SIZE);     // e100-e149
-      const {api, service, cleanup} = await createService([...batch0, ...batch2], 3 * BATCH_SIZE);
-      cleanups.push(cleanup);
-
-      api.getEntries.mockResolvedValueOnce(batch0);
-      await service.getOrLoadEntryByIndex(0);
-
-      api.getEntries.mockResolvedValueOnce(batch2);
-      await service.getOrLoadEntryByIndex(100);
-
-      expect(service.getCachedEntryByIndex(50)).toBeUndefined(); // Hole
-
-      const entryNew = makeEntry('eNew');
-      api.getEntryIndex.mockResolvedValue(75);
-      api.countEntries.mockResolvedValue(151);
-
-      await service.updateEntry(entryNew);
-
-      expect(service.totalCount).toBe(151);
-      expect(service.getCachedEntryByIndex(0)?.id).toBe('e0');
-      expect(service.getCachedEntryByIndex(49)?.id).toBe('e49');
-      expect(service.getCachedEntryByIndex(75)?.id).toBe('eNew');
-      expect(service.getCachedEntryByIndex(101)?.id).toBe('e100');
-    });
-
-    it('insert at index 0 shifts all cached entries', async () => {
-      const batch0 = makeBatch(0);
-      const {api, service, cleanup} = await createService(batch0, BATCH_SIZE);
-      cleanups.push(cleanup);
-
-      api.getEntries.mockResolvedValueOnce(batch0);
-      await service.getOrLoadEntryByIndex(0);
-
-      const entryNew = makeEntry('eNew');
-      api.getEntryIndex.mockResolvedValue(0);
-      api.countEntries.mockResolvedValue(BATCH_SIZE + 1);
-
-      await service.updateEntry(entryNew);
-
-      expect(service.totalCount).toBe(BATCH_SIZE + 1);
-      expect(service.getCachedEntryByIndex(0)?.id).toBe('eNew');
-      expect(service.getCachedEntryByIndex(1)?.id).toBe('e0');
-      expect(service.getCachedEntryByIndex(BATCH_SIZE)?.id).toBe('e49');
-    });
-
-    it('insert at batch boundary shifts entire subsequent batch', async () => {
-      const batch1 = makeBatch(BATCH_SIZE); // e50-e99
-      const {api, service, cleanup} = await createService(batch1, 2 * BATCH_SIZE);
-      cleanups.push(cleanup);
-
-      api.getEntries.mockResolvedValueOnce(batch1);
-      await service.getOrLoadEntryByIndex(BATCH_SIZE);
-
-      const entryNew = makeEntry('eNew');
-      api.getEntryIndex.mockResolvedValue(BATCH_SIZE);
-      api.countEntries.mockResolvedValue(2 * BATCH_SIZE + 1);
-
-      await service.updateEntry(entryNew);
-
-      expect(service.totalCount).toBe(2 * BATCH_SIZE + 1);
-      expect(service.getCachedEntryByIndex(BATCH_SIZE)?.id).toBe('eNew');
-      expect(service.getCachedEntryByIndex(BATCH_SIZE + 1)?.id).toBe('e50');
-      expect(service.getCachedEntryByIndex(2 * BATCH_SIZE)?.id).toBe('e99');
-    });
-
-    it('insert at last index of batch shifts entry to next batch', async () => {
-      const batch0 = makeBatch(0);
-      const {api, service, cleanup} = await createService(batch0, BATCH_SIZE);
-      cleanups.push(cleanup);
-
-      api.getEntries.mockResolvedValueOnce(batch0);
-      await service.getOrLoadEntryByIndex(0);
-
-      const entryNew = makeEntry('eNew');
-      api.getEntryIndex.mockResolvedValue(BATCH_SIZE - 1);
-      api.countEntries.mockResolvedValue(BATCH_SIZE + 1);
-
-      await service.updateEntry(entryNew);
-
-      expect(service.totalCount).toBe(BATCH_SIZE + 1);
-      expect(service.getCachedEntryByIndex(BATCH_SIZE - 2)?.id).toBe('e48');
-      expect(service.getCachedEntryByIndex(BATCH_SIZE - 1)?.id).toBe('eNew');
-      expect(service.getCachedEntryByIndex(BATCH_SIZE)?.id).toBe('e49');
-    });
-  });
-
-  describe('delete operations', () => {
-    it('removes entry and shifts subsequent cached entries', async () => {
-      const entry0 = makeEntry('e0');
-      const entry1 = makeEntry('e1');
-      const entry2 = makeEntry('e2');
-      const {service, cleanup} = await createService([entry0, entry1, entry2], 3);
-      cleanups.push(cleanup);
-
-      await service.getOrLoadEntryByIndex(2);
-
-      service.removeEntryById('e1');
-
-      expect(await service.getOrLoadEntryIndex('e2')).toBe(1);
-      expect(service.getCachedEntryByIndex(1)?.id).toBe('e2');
-      expect(service.totalCount).toBe(2);
-    });
-
-    it('delete of uncached entry triggers reset', async () => {
-      const entry0 = makeEntry('e0');
-      const entry1 = makeEntry('e1');
-      const {api, service, cleanup} = await createService([entry0, entry1], 2);
-      cleanups.push(cleanup);
-
-      const initialCallCount = api.countEntries.mock.calls.length;
-
-      service.removeEntryById('e1');
-
-      await vi.waitFor(() => expect(api.countEntries.mock.calls.length).toBe(initialCallCount + 1));
-    });
-
-    it('delete at first index shifts all entries down', async () => {
-      const batch0 = makeBatch(0);
-      const {service, cleanup} = await createService(batch0, BATCH_SIZE);
-      cleanups.push(cleanup);
-
-      await service.getOrLoadEntryByIndex(0);
-
-      service.removeEntryById('e0');
-
-      expect(service.totalCount).toBe(BATCH_SIZE - 1);
-      expect(service.getCachedEntryByIndex(0)?.id).toBe('e1');
-      expect(service.getCachedEntryByIndex(BATCH_SIZE - 2)?.id).toBe('e49');
-    });
-
-    it('delete at last cached index only removes that entry', async () => {
-      const batch0 = makeBatch(0);
-      const {service, cleanup} = await createService(batch0, BATCH_SIZE);
-      cleanups.push(cleanup);
-
-      await service.getOrLoadEntryByIndex(0);
-
-      service.removeEntryById('e49');
+      // Prepare delayed quiet reset response
+      let resolveEntries: (value: IEntry[]) => void;
+      let resolveCount: (value: number) => void;
+      api.getEntries.mockReturnValueOnce(new Promise<IEntry[]>(r => { resolveEntries = r; }));
+      api.countEntries.mockReturnValueOnce(new Promise<number>(r => { resolveCount = r; }));
 
-      expect(service.totalCount).toBe(BATCH_SIZE - 1);
-      expect(service.getCachedEntryByIndex(BATCH_SIZE - 2)?.id).toBe('e48');
-      expect(service.getCachedEntryByIndex(BATCH_SIZE - 1)).toBeUndefined();
-    });
+      // Mark batch 0 as relevant
+      service.getCachedEntryByIndex(0);
 
-    it('delete at batch boundary shifts entries across batches', async () => {
-      const batch0 = makeBatch(0);
-      const batch1 = makeBatch(BATCH_SIZE);
-      const {api, service, cleanup} = await createService([...batch0, ...batch1], 2 * BATCH_SIZE);
-      cleanups.push(cleanup);
+      const quietResetPromise = service.quietReset();
 
-      api.getEntries.mockResolvedValueOnce(batch0);
-      await service.getOrLoadEntryByIndex(0);
-      api.getEntries.mockResolvedValueOnce(batch1);
-      await service.getOrLoadEntryByIndex(BATCH_SIZE);
+      // Cache remains available during quiet reset
+      expect(service.getCachedEntryByIndex(0)?.id).toBe('old0');
+      expect(service.loading).toBe(false);
 
-      service.removeEntryById('e49');
+      // Resolve with new entries
+      const newEntries = makeEntries(BATCH_SIZE, 'new');
+      resolveCount!(entries.length + 1);
+      resolveEntries!(newEntries);
+      await quietResetPromise;
 
-      expect(service.totalCount).toBe(2 * BATCH_SIZE - 1);
-      expect(service.getCachedEntryByIndex(BATCH_SIZE - 2)?.id).toBe('e48');
-      expect(service.getCachedEntryByIndex(BATCH_SIZE - 1)?.id).toBe('e50');
-      expect(service.getCachedEntryByIndex(2 * BATCH_SIZE - 2)?.id).toBe('e99');
+      expect(service.generation).toBeGreaterThan(genBefore);
+      expect(service.totalCount).toBe(entries.length + 1);
+      expect(service.getCachedEntryByIndex(0)?.id).toBe('new0');
     });
   });
 
   describe('race conditions', () => {
     it('discards stale count when reset occurs during loadInitialCount', async () => {
-      const entry0 = makeEntry('e0');
-      const {api, service, cleanup} = await createService([entry0], 100);
+      const entries = makeEntries(200);
+      const {api, service, cleanup} = await createService(entries, 100);
       cleanups.push(cleanup);
 
       let resolveCount: (value: number) => void;
@@ -385,9 +195,8 @@ describe('EntryLoaderService', () => {
     });
 
     it('discards stale batch when reset occurs during load', async () => {
-      const entry0 = makeEntry('e0');
-      const entry1 = makeEntry('e1');
-      const {api, service, cleanup} = await createService([entry0], 1);
+      const entries = makeEntries(BATCH_SIZE, 'a');
+      const {api, service, cleanup} = await createService(entries, entries.length);
       cleanups.push(cleanup);
 
       let resolveEntries: (value: IEntry[]) => void;
@@ -396,17 +205,54 @@ describe('EntryLoaderService', () => {
       const loadPromise = service.getOrLoadEntryByIndex(0);
 
       service.reset();
-      api.getEntries.mockResolvedValue([entry1]);
-      api.countEntries.mockResolvedValue(1);
+      const nextEntries = makeEntries(BATCH_SIZE, 'b');
+      api.getEntries.mockResolvedValue(nextEntries);
+      api.countEntries.mockResolvedValue(nextEntries.length);
       await service.loadInitialCount();
 
-      resolveEntries!([entry0]);
+      resolveEntries!(entries.slice(0, BATCH_SIZE));
       const result = await loadPromise;
 
       expect(result).toBeUndefined();
 
       const freshResult = await service.getOrLoadEntryByIndex(0);
-      expect(freshResult?.id).toBe('e1');
+      expect(freshResult?.id).toBe('b0');
+    });
+
+    it('does not allow a stale load to clear a newer pending promise', async () => {
+      const entries = makeEntries(2 * BATCH_SIZE, 'v');
+      const {api, service, cleanup} = await createService(entries, entries.length);
+      cleanups.push(cleanup);
+
+      let resolveFirst: (value: IEntry[]) => void;
+      api.getEntries.mockReturnValueOnce(new Promise<IEntry[]>(r => { resolveFirst = r; }));
+
+      const firstLoad = service.getOrLoadEntryByIndex(0);
+
+      // Reset and immediately start another load for the same batch
+      service.reset();
+      api.countEntries.mockResolvedValue(entries.length);
+      await service.loadInitialCount();
+
+      let resolveSecond: (value: IEntry[]) => void;
+      api.getEntries.mockReturnValueOnce(new Promise<IEntry[]>(r => { resolveSecond = r; }));
+      const secondLoad = service.getOrLoadEntryByIndex(0);
+
+      expect(api.getEntries).toHaveBeenCalledTimes(2);
+
+      // Now resolve the stale (first) load. It should not clobber the newer pending tracking.
+      resolveFirst!(entries.slice(0, BATCH_SIZE));
+
+      // If the stale load incorrectly deletes the NEW pending promise, this will trigger a 3rd fetch.
+      const thirdLoad = service.getOrLoadEntryByIndex(0);
+      await vi.waitFor(() => expect(api.getEntries).toHaveBeenCalledTimes(2));
+
+      resolveSecond!(entries.slice(0, BATCH_SIZE));
+
+      const results = await Promise.all([firstLoad, secondLoad, thirdLoad]);
+      // The first load may return undefined or the fresh cached value, depending on timing.
+      expect(results[1]?.id).toBe('v0');
+      expect(results[2]?.id).toBe('v0');
     });
   });
 });
diff --git a/frontend/viewer/src/lib/services/entry-loader-service.svelte.ts b/frontend/viewer/src/lib/services/entry-loader-service.svelte.ts
index 4c29689649..16047229fb 100644
--- a/frontend/viewer/src/lib/services/entry-loader-service.svelte.ts
+++ b/frontend/viewer/src/lib/services/entry-loader-service.svelte.ts
@@ -35,6 +35,14 @@ export class EntryLoaderService {
   #pendingBatches = new SvelteMap<number, Promise<IEntry[]>>();
   #loadedBatches = new SvelteSet<number>();
 
+  // Track which batches the UI has most recently interacted with.
+  // At most 2 are needed, and only if they are adjacent.
+  #recentBatchNumbers: { curr?: number, prev?: number } = {};
+
+  // Coalesce multiple quiet resets (e.g., rapid event bursts)
+  #quietResetRequested = false;
+  #quietResetInFlight: Promise<void> | undefined;
+
   // Generation counter to invalidate in-flight async operations after reset
   #generation = -1;
 
@@ -64,6 +72,7 @@ export class EntryLoaderService {
    * Returns undefined if not cached.
    */
   getCachedEntryByIndex(index: number): IEntry | undefined {
+    this.#markBatchRequested(this.#batchNumberForIndex(index));
     return this.#entryCache.get(index);
   }
 
@@ -79,6 +88,7 @@ export class EntryLoaderService {
    * Returns undefined if entry not found (e.g., reset occurred during load).
    */
   async getOrLoadEntryByIndex(index: number): Promise<IEntry | undefined> {
+    this.#markBatchRequested(this.#batchNumberForIndex(index));
     const cached = this.#entryCache.get(index);
     if (cached) return cached;
 
@@ -140,141 +150,51 @@ export class EntryLoaderService {
     const queryOptions = this.#buildQueryOptions(0, 0);
     const search = this.#deps.search();
 
-    return await this.#api.getEntryIndex(id, search || undefined, queryOptions);
+    const index = await this.#api.getEntryIndex(id, search || undefined, queryOptions);
+    this.#idToIndex.set(id, index);
+    return index;
   }
 
   /**
    * Remove an entry by ID (for delete events).
-   * Refreshes the list to keep indices in sync.
+   * Uses a quiet reset to refresh count + the currently relevant batch(es).
    */
   removeEntryById(id: string): void {
-    const index = this.#idToIndex.get(id);
-
-    if (index === undefined) {
-      // Entry not in cache — we don't know where it was, so we MUST reset
-      // or we'll have an incorrect totalCount.
-      this.reset();
-      void this.loadInitialCount();
-      return;
-    }
-
-    // Remove from maps
-    this.#idToIndex.delete(id);
-    this.#entryCache.delete(index);
-    this.#entryVersions.delete(index);
-
-    // Shift all subsequent entries down by 1
-    this.#shiftCache(index, -1);
-
-    // Decrement total count
-    if (this.totalCount !== undefined && this.totalCount > 0) {
-      this.totalCount--;
-    }
-
-    this.#recalculateLoadedBatches();
+    // We intentionally do not try to do any local shifting / heuristics.
+    // The goal is to keep event handling easy to reason about.
+    void this.quietReset();
   }
 
   /**
    * Update an entry in cache (for update events).
    * Note: This method is called for both entry updates AND entry creates (via EntryChanged event).
-   * We detect creates vs updates by comparing the new count to our cached count.
+   * We handle both the same way: quiet reset.
    */
   async updateEntry(entry: IEntry): Promise<void> {
-    const cachedIndex = this.#idToIndex.get(entry.id);
-
-    if (cachedIndex !== undefined) {
-      // Update the cache and increment version
-      this.#entryCache.set(cachedIndex, entry);
-      this.#entryVersions.set(cachedIndex, (this.#entryVersions.get(cachedIndex) ?? 1) + 1);
-      return;
-    }
-
-    // Entry not in cache — we don't know if it was updated or created
-    // Query backend for its current index AND the new count.
-    const generation = this.#generation;
-    const [newIndex, newCount] = await Promise.all([
-      this.getOrLoadEntryIndex(entry.id),
-      this.#countEntries()
-    ]);
-
-    if (this.#generation !== generation) return; // Stale result after reset
-
-    if (newIndex < 0) {
-      // Not found (might not match current filters)
-      return;
-    }
-
-    // Detect if this is a CREATE or UPDATE by comparing counts
-    const isNewEntry = this.totalCount !== undefined && newCount > this.totalCount;
-
-    const cacheIndices = [...this.#entryCache.keys()];
-    const maxLoadedIndex = Math.max(...cacheIndices, -1);
-    const minLoadedIndex = cacheIndices.length > 0 ? Math.min(...cacheIndices) : Infinity;
-
-    if (newIndex > maxLoadedIndex) {
-      // It's beyond our currently loaded range.
-      if (isNewEntry) {
-        // It's a CREATE - increment the total count so scroll height updates
-        this.totalCount = newCount;
-      }
-      // For updates, do nothing - the entry will load naturally when scrolled to.
-      return;
-    }
-
-    if (newIndex < minLoadedIndex) {
-      // It's BEFORE our loaded range
-      if (isNewEntry) {
-        // New entry inserted before our range - shift cached entries up
-        this.#shiftCache(newIndex, 1);
-        this.totalCount = newCount;
-        this.#recalculateLoadedBatches();
-      }
-      // For updates that moved before our range, do nothing special
-      return;
-    }
-
-    // It's within our loaded range but not in cache (could be a hole from skipped batches).
-    if (isNewEntry) {
-      // New entry inserted within our range - shift and add to cache
-      this.#shiftCache(newIndex, 1);
-      this.#entryCache.set(newIndex, entry);
-      this.#idToIndex.set(entry.id, newIndex);
-      this.#entryVersions.set(newIndex, 1);
-      this.totalCount = newCount;
-      this.#recalculateLoadedBatches();
-    }
-    // For updates that moved into our range from elsewhere, we don't handle this case perfectly.
-    // The entry will appear when the batch is reloaded.
+    void entry; // entry is not used here by design
+    await this.quietReset();
   }
 
   /**
-   * Shift indices in the cache.
-   * @param fromIndex The starting index (inclusive)
-   * @param delta The amount to shift (e.g. -1 for delete, 1 for insert)
+   * Quiet reset: refresh count + reload the currently relevant batch(es), then atomically swap caches.
+   * This avoids skeleton flashes for background events (add/update/delete) that affect list ordering.
    */
-  #shiftCache(fromIndex: number, delta: number): void {
-    const newCache = new SvelteMap<number, IEntry>();
-    const newIdToIndex = new SvelteMap<string, number>();
-    const newVersions = new SvelteMap<number, number>();
-
-    // Copy unaffected entries (those before fromIndex if delta > 0, or all if delta < 0)
-    for (const [idx, entry] of this.#entryCache) {
-      let targetIdx = idx;
-      if (idx >= fromIndex) {
-        targetIdx += delta;
+  async quietReset(): Promise<void> {
+    this.#quietResetRequested = true;
+    if (this.#quietResetInFlight) return this.#quietResetInFlight;
+
+    const run = async () => {
+      while (this.#quietResetRequested) {
+        this.#quietResetRequested = false;
+        await this.#runQuietResetOnce();
       }
+    };
 
-      // Only keep in cache if the index is valid (>= 0)
-      if (targetIdx >= 0) {
-        newCache.set(targetIdx, entry);
-        newIdToIndex.set(entry.id, targetIdx);
-        newVersions.set(targetIdx, this.#entryVersions.get(idx) ?? 1);
-      }
-    }
+    this.#quietResetInFlight = run().finally(() => {
+      this.#quietResetInFlight = undefined;
+    });
 
-    this.#entryCache = newCache;
-    this.#idToIndex = newIdToIndex;
-    this.#entryVersions = newVersions;
+    return this.#quietResetInFlight;
   }
 
   /**
@@ -322,35 +242,39 @@ export class EntryLoaderService {
       this.#cacheBatch(batchNumber, entries);
       this.#loadedBatches.add(batchNumber);
     } finally {
-      this.#pendingBatches.delete(batchNumber);
+      // Only clear if this batch is still pending with THIS promise.
+      // This prevents stale loads from deleting a newer pending promise after a reset.
+      if (this.#pendingBatches.get(batchNumber) === promise) {
+        this.#pendingBatches.delete(batchNumber);
+      }
     }
   }
 
   async #fetchBatch(batchNumber: number): Promise<IEntry[]> {
     const offset = batchNumber * this.batchSize;
-    const queryOptions = this.#buildQueryOptions(offset, this.batchSize);
+    return this.#fetchRange(offset, this.batchSize);
+  }
+
+  async #fetchRange(offset: number, count: number): Promise<IEntry[]> {
+    const queryOptions = this.#buildQueryOptions(offset, count);
     const search = this.#deps.search();
 
     if (search) {
       return this.#api.searchEntries(search, queryOptions);
-    } else {
-      return this.#api.getEntries(queryOptions);
     }
+    return this.#api.getEntries(queryOptions);
   }
 
   #cacheBatch(batchNumber: number, entries: IEntry[]): void {
-    // console.trace(batchNumber + ':' + entries.length);
     const startIndex = batchNumber * this.batchSize;
 
     for (let i = 0; i < entries.length; i++) {
-      // console.log('caching', i);
       const index = startIndex + i;
       const entry = entries[i];
       this.#entryCache.set(index, entry);
       this.#idToIndex.set(entry.id, index);
       // Only set version if not already present or 0 (so we don't reset versions on reload)
       if (!this.#entryVersions.get(index)) {
-        // console.log('setting version', i);
         this.#entryVersions.set(index, 1);
       }
     }
@@ -377,30 +301,80 @@ export class EntryLoaderService {
     };
   }
 
-  #recalculateLoadedBatches(): void {
-    // After shifting indices, recalculate which batches are still fully loaded.
-    // A batch is "loaded" only if ALL its indices are present in cache.
-    this.#loadedBatches.clear();
+  #batchNumberForIndex(index: number): number {
+    return Math.floor(index / this.batchSize);
+  }
 
-    const maxIndex = Math.max(...this.#entryCache.keys(), -1);
-    if (maxIndex < 0) return;
+  #markBatchRequested(batchNumber: number): void {
+    if (batchNumber < 0) throw new RangeError('Batch number must be positive');
+    if (batchNumber === this.#recentBatchNumbers.curr) return;
 
-    const maxBatch = Math.floor(maxIndex / this.batchSize);
-    for (let batch = 0; batch <= maxBatch; batch++) {
-      const startIndex = batch * this.batchSize;
-      const endIndex = Math.min(startIndex + this.batchSize, this.totalCount ?? this.batchSize);
+    if (this.#recentBatchNumbers.curr !== undefined &&
+      Math.abs(this.#recentBatchNumbers.curr - batchNumber) === 1) {
+      this.#recentBatchNumbers.prev = this.#recentBatchNumbers.curr;
+    }
 
-      let allPresent = true;
-      for (let i = startIndex; i < endIndex; i++) {
-        if (!this.#entryCache.has(i)) {
-          allPresent = false;
-          break;
-        }
-      }
+    this.#recentBatchNumbers.curr = batchNumber;
+  }
 
-      if (allPresent) {
-        this.#loadedBatches.add(batch);
-      }
+  #getRelevantBatchesForQuietReset(): number[] {
+    if (this.#recentBatchNumbers.curr === undefined) {
+      return [0];
+    } else if (this.#recentBatchNumbers.prev === undefined) {
+      return [this.#recentBatchNumbers.curr];
+    } else {
+      return [this.#recentBatchNumbers.prev, this.#recentBatchNumbers.curr];
     }
   }
+
+  async #runQuietResetOnce(): Promise<void> {
+    const generation = this.#generation;
+    const batches = this.#getRelevantBatchesForQuietReset();
+
+    try {
+      const [newCount, entries] = await Promise.all([
+        this.#countEntries(),
+        this.#fetchEntriesForQuietReset(batches),
+      ]);
+
+      if (this.#generation !== generation) return; // Stale after full reset
+
+      console.log(entries[0]);
+      this.#swapCachesForQuietReset(batches, entries, newCount);
+    } catch (e) {
+      if (this.#generation !== generation) return;
+      this.error = e instanceof Error ? e : new Error(String(e));
+    }
+  }
+
+  async #fetchEntriesForQuietReset(batches: number[]): Promise<IEntry[]> {
+    const offset = batches.sort()[0] * this.batchSize;
+    return this.#fetchRange(offset, this.batchSize * batches.length);
+  }
+
+  #swapCachesForQuietReset(batches: number[], entries: IEntry[], newCount: number): void {
+    const oldVersions = new Map(this.#entryVersions);
+    this.#entryCache.clear();
+    this.#idToIndex.clear();
+    this.#entryVersions.clear();
+    this.#pendingBatches.clear();
+    this.#loadedBatches.clear();
+
+    const offset = batches.sort()[0] * this.batchSize;
+    for (let i = 0; i < entries.length; i++) {
+      const index = offset + i;
+      const entry = entries[i];
+      this.#entryCache.set(index, entry);
+      this.#idToIndex.set(entry.id, index);
+      const prevVersion = oldVersions.get(index) ?? 0;
+      this.#entryVersions.set(index, prevVersion + 1);
+    }
+
+    batches.forEach(batch => this.#loadedBatches.add(batch));
+    this.#generation++;
+    this.totalCount = newCount;
+    this.error = undefined;
+
+    console.log('QUIET RESET COMPLETE');
+  }
 }
diff --git a/frontend/viewer/src/project/browse/EntriesList.svelte b/frontend/viewer/src/project/browse/EntriesList.svelte
index 35209815e2..4451f1006f 100644
--- a/frontend/viewer/src/project/browse/EntriesList.svelte
+++ b/frontend/viewer/src/project/browse/EntriesList.svelte
@@ -18,6 +18,7 @@
   import {useProjectContext} from '$project/project-context.svelte';
   import Delayed from '$lib/components/Delayed.svelte';
   import {EntryLoaderService} from '$lib/services/entry-loader-service.svelte';
+  import {untrack} from 'svelte';
 
   let {
     search = '',
@@ -103,7 +104,11 @@
   $effect(() => {
     if (!vList || !selectedEntryId) return;
 
-    void scrollToEntry(vList, selectedEntryId);
+    void (async () => {
+      // track the index so we follow it if it jumps
+      await entryLoader?.getOrLoadEntryIndex(selectedEntryId);
+      untrack(() => void scrollToEntry(vList!, selectedEntryId));
+    })();
   });
 
   async function scrollToEntry(vList: VListHandle, entryId: string) {
diff --git a/frontend/viewer/src/project/demo/in-memory-demo-api.ts b/frontend/viewer/src/project/demo/in-memory-demo-api.ts
index 5e5d27f087..323842ec1c 100644
--- a/frontend/viewer/src/project/demo/in-memory-demo-api.ts
+++ b/frontend/viewer/src/project/demo/in-memory-demo-api.ts
@@ -294,7 +294,11 @@ export class InMemoryDemoApi implements IMiniLcmJsInvokable {
   }
 
   deleteEntry(guid: string): Promise<void> {
-    this.#projectEventBus.notifyEntryDeleted(guid);
+    const entryIndex = this._entries.findIndex(e => e.id === guid);
+    if (entryIndex >= 0) {
+      this._entries.splice(entryIndex, 1);
+      this.#projectEventBus.notifyEntryDeleted(guid);
+    }
     return Promise.resolve();
   }
 
diff --git a/frontend/viewer/tests/entries-list-v2.test.ts b/frontend/viewer/tests/entries-list-v2.test.ts
index 4ed803ead4..79429e91d0 100644
--- a/frontend/viewer/tests/entries-list-v2.test.ts
+++ b/frontend/viewer/tests/entries-list-v2.test.ts
@@ -52,24 +52,24 @@ test.describe('EntriesList V2 features', () => {
 
   async function scrollToIndex(page: Page, targetIndex: number, _itemHeight: number): Promise<void> {
     const {vlist} = getLocators(page);
-    
+
     // Get total count for proportional scrolling
     const {totalCount} = await page.evaluate(async () => {
       const api = window.__PLAYWRIGHT_UTILS__.demoApi;
       return {totalCount: await api.countEntries()};
     });
-    
+
     // Use proportion of total scroll for accurate positioning
     // This accounts for VList's estimated item heights across all items
     const targetScroll = await vlist.evaluate((el, params) => {
       const {idx, total} = params;
       return (idx / total) * el.scrollHeight;
     }, {idx: targetIndex, total: totalCount});
-    
-    await vlist.evaluate((el, target) => { 
-      el.scrollTop = Math.min(target, el.scrollHeight - el.clientHeight); 
+
+    await vlist.evaluate((el, target) => {
+      el.scrollTop = Math.min(target, el.scrollHeight - el.clientHeight);
     }, targetScroll);
-    
+
     await page.waitForTimeout(300);
     await expect(page.locator('[data-skeleton]')).toHaveCount(0, {timeout: 5000});
   }
@@ -134,7 +134,7 @@ test.describe('EntriesList V2 features', () => {
 
       // Scroll far down to find an entry well into the list (not near the top)
       // 6000px at ~60px per row = ~100 items down
-      await vlist.evaluate((el) => { el.scrollTop = 6000; });
+      await vlist.evaluate((el) => {el.scrollTop = 6000;});
       await page.waitForTimeout(500);
       await expect(page.locator('[data-skeleton]')).toHaveCount(0, {timeout: 5000});
 
@@ -264,7 +264,8 @@ test.describe('EntriesList V2 features', () => {
       // Update the entry's headword via the demo API
       await page.evaluate(async (entry) => {
         const testUtils = window.__PLAYWRIGHT_UTILS__;
-        const updated = {...entry, lexemeForm: {...entry.lexemeForm, seh: 'UPDATED-' + (entry.lexemeForm.seh || entry.lexemeForm.en || 'entry')}};
+        const newLexemeForm = `-UPDATED-${entry.lexemeForm.seh || entry.lexemeForm.en || 'entry'}`;
+        const updated = {...entry, lexemeForm: {...entry.lexemeForm, seh: newLexemeForm}};
         await testUtils.demoApi.updateEntry(entry, updated);
       }, firstEntry);
 
@@ -273,7 +274,7 @@ test.describe('EntriesList V2 features', () => {
 
       // The first entry should now show the updated text
       const newFirstEntryText = await entryRows.first().textContent();
-      expect(newFirstEntryText).toContain('UPDATED-');
+      expect(newFirstEntryText).toContain('-UPDATED-');
     });
 
     test('deleting selected entry clears selection', async ({page}) => {
@@ -310,7 +311,7 @@ test.describe('EntriesList V2 features', () => {
       // Scroll to the middle of the list
       const scrollHeight = await vlist.evaluate((el) => el.scrollHeight);
       const middleScroll = scrollHeight * 0.5;
-      await vlist.evaluate((el, target) => { el.scrollTop = target; }, middleScroll);
+      await vlist.evaluate((el, target) => {el.scrollTop = target;}, middleScroll);
       await page.waitForTimeout(500);
       await expect(page.locator('[data-skeleton]')).toHaveCount(0, {timeout: 5000});
 
@@ -435,7 +436,7 @@ test.describe('EntriesList V2 features', () => {
 
       // Scroll to the end of the list using scrollHeight instead of calculated position
       // This ensures we're at the actual end, not an estimated position
-      await vlist.evaluate((el) => { el.scrollTop = el.scrollHeight; });
+      await vlist.evaluate((el) => {el.scrollTop = el.scrollHeight;});
       await page.waitForTimeout(500);
       await expect(page.locator('[data-skeleton]')).toHaveCount(0, {timeout: 5000});
 
@@ -488,7 +489,7 @@ test.describe('EntriesList V2 features', () => {
       // Setup: Stay at batch 0 - wait for data to be fully loaded
       await page.waitForTimeout(500);
       await expect(page.locator('[data-skeleton]')).toHaveCount(0, {timeout: 5000});
-      
+
       const initialVisibleTexts = await getVisibleEntryTexts(page);
       expect(initialVisibleTexts.filter(t => t.length > 0).length).toBeGreaterThan(0);
 

From 949312c5b9f175bbcd8dc532b759eae1968f14ca Mon Sep 17 00:00:00 2001
From: Tim Haasdyk <tim_haasdyk@sil.org>
Date: Wed, 21 Jan 2026 13:43:14 +0100
Subject: [PATCH 23/42] Debounce quiet resets

---
 .../entry-loader-service.svelte.test.ts       | 23 +++++++++++++++++++
 .../services/entry-loader-service.svelte.ts   | 10 ++++----
 2 files changed, 29 insertions(+), 4 deletions(-)

diff --git a/frontend/viewer/src/lib/services/entry-loader-service.svelte.test.ts b/frontend/viewer/src/lib/services/entry-loader-service.svelte.test.ts
index 732fbf6f58..e349771fc7 100644
--- a/frontend/viewer/src/lib/services/entry-loader-service.svelte.test.ts
+++ b/frontend/viewer/src/lib/services/entry-loader-service.svelte.test.ts
@@ -170,6 +170,29 @@ describe('EntryLoaderService', () => {
       expect(service.totalCount).toBe(entries.length + 1);
       expect(service.getCachedEntryByIndex(0)?.id).toBe('new0');
     });
+
+    it('debounces multiple calls', async () => {
+      const entries = makeEntries(BATCH_SIZE);
+      const {api, service, cleanup} = await createService(entries, entries.length);
+      cleanups.push(cleanup);
+
+      // Warm batch 0
+      await service.getOrLoadEntryByIndex(0);
+      const countBefore = api.countEntries.mock.calls.length;
+
+      // Multiple rapid calls
+      const p1 = service.quietReset();
+      const p2 = service.quietReset();
+      const p3 = service.quietReset();
+
+      expect(p1).toBe(p2);
+      expect(p2).toBe(p3);
+
+      await p3;
+
+      // Should only have called the API once (after the debounce delay)
+      expect(api.countEntries.mock.calls.length).toBe(countBefore + 1);
+    });
   });
 
   describe('race conditions', () => {
diff --git a/frontend/viewer/src/lib/services/entry-loader-service.svelte.ts b/frontend/viewer/src/lib/services/entry-loader-service.svelte.ts
index 16047229fb..2707467741 100644
--- a/frontend/viewer/src/lib/services/entry-loader-service.svelte.ts
+++ b/frontend/viewer/src/lib/services/entry-loader-service.svelte.ts
@@ -1,3 +1,4 @@
+import {DEFAULT_DEBOUNCE_TIME, delay} from '$lib/utils/time';
 import {SvelteMap, SvelteSet} from 'svelte/reactivity';
 
 import type {IEntry} from '$lib/dotnet-types';
@@ -179,13 +180,17 @@ export class EntryLoaderService {
    * Quiet reset: refresh count + reload the currently relevant batch(es), then atomically swap caches.
    * This avoids skeleton flashes for background events (add/update/delete) that affect list ordering.
    */
-  async quietReset(): Promise<void> {
+  quietReset(): Promise<void> {
     this.#quietResetRequested = true;
     if (this.#quietResetInFlight) return this.#quietResetInFlight;
 
     const run = async () => {
       while (this.#quietResetRequested) {
         this.#quietResetRequested = false;
+        // Debounce: wait for it to settle
+        await delay(DEFAULT_DEBOUNCE_TIME);
+        if (this.#quietResetRequested) continue;
+
         await this.#runQuietResetOnce();
       }
     };
@@ -339,7 +344,6 @@ export class EntryLoaderService {
 
       if (this.#generation !== generation) return; // Stale after full reset
 
-      console.log(entries[0]);
       this.#swapCachesForQuietReset(batches, entries, newCount);
     } catch (e) {
       if (this.#generation !== generation) return;
@@ -374,7 +378,5 @@ export class EntryLoaderService {
     this.#generation++;
     this.totalCount = newCount;
     this.error = undefined;
-
-    console.log('QUIET RESET COMPLETE');
   }
 }

From d32d44f7c76daf7fbdfe754a098299b2cfd0fa6b Mon Sep 17 00:00:00 2001
From: Tim Haasdyk <tim_haasdyk@sil.org>
Date: Wed, 21 Jan 2026 16:53:21 +0100
Subject: [PATCH 24/42] Fix sqlite contains function not always registered

---
 .../Data/CustomSqliteFunctionInterceptor.cs   | 56 +++++++++++++++----
 .../FwLite/LcmCrdt/Data/MiniLcmRepository.cs  |  3 +-
 .../LcmCrdt/Data/SetupCollationInterceptor.cs | 53 +++++++++++++++---
 backend/FwLite/LcmCrdt/LcmCrdtKernel.cs       | 10 ++++
 4 files changed, 101 insertions(+), 21 deletions(-)

diff --git a/backend/FwLite/LcmCrdt/Data/CustomSqliteFunctionInterceptor.cs b/backend/FwLite/LcmCrdt/Data/CustomSqliteFunctionInterceptor.cs
index 0f9528f914..661cb588e3 100644
--- a/backend/FwLite/LcmCrdt/Data/CustomSqliteFunctionInterceptor.cs
+++ b/backend/FwLite/LcmCrdt/Data/CustomSqliteFunctionInterceptor.cs
@@ -1,20 +1,60 @@
 using System.Data.Common;
 using System.Globalization;
-using System.Runtime.CompilerServices;
 using System.Text;
+using LinqToDB.Interceptors;
 using Microsoft.Data.Sqlite;
 using Microsoft.EntityFrameworkCore.Diagnostics;
-using MiniLcm.Culture;
 
 namespace LcmCrdt.Data;
 
-public class CustomSqliteFunctionInterceptor : IDbConnectionInterceptor
+public class CustomSqliteFunctionInterceptor : IDbConnectionInterceptor, IConnectionInterceptor
 {
     public const string ContainsFunction = "contains";
 
     public void ConnectionOpened(DbConnection connection, ConnectionEndEventData eventData)
     {
-        var sqliteConnection = (SqliteConnection)connection;
+        ConnectionOpened(connection);
+    }
+
+    public Task ConnectionOpenedAsync(DbConnection connection,
+        ConnectionEndEventData eventData,
+        CancellationToken cancellationToken = default)
+    {
+        ConnectionOpened(connection);
+        return Task.CompletedTask;
+    }
+
+    public void ConnectionOpening(LinqToDB.Interceptors.ConnectionEventData eventData, DbConnection connection)
+    {
+        // We register the function after connection opens, not before
+    }
+
+    public Task ConnectionOpeningAsync(LinqToDB.Interceptors.ConnectionEventData eventData, DbConnection connection, CancellationToken cancellationToken)
+    {
+        return Task.CompletedTask;
+    }
+
+    public void ConnectionOpened(LinqToDB.Interceptors.ConnectionEventData eventData, DbConnection connection)
+    {
+        ConnectionOpened(connection);
+    }
+
+    public Task ConnectionOpenedAsync(LinqToDB.Interceptors.ConnectionEventData eventData, DbConnection connection, CancellationToken cancellationToken)
+    {
+        ConnectionOpened(connection);
+        return Task.CompletedTask;
+    }
+
+    private void ConnectionOpened(DbConnection connection)
+    {
+        if (connection is SqliteConnection sqliteConnection)
+        {
+            RegisterContainsFunction(sqliteConnection);
+        }
+    }
+
+    public static void RegisterContainsFunction(SqliteConnection sqliteConnection)
+    {
         //creates a new function that can be used in queries
         sqliteConnection.CreateFunction(ContainsFunction,
             //in sqlite strings are byte arrays, so we can avoid allocating strings by using spans
@@ -50,12 +90,4 @@ private static bool ContainsDiacritic(in ReadOnlySpan<char> value)
         }
         return hasAccent;
     }
-
-    public Task ConnectionOpenedAsync(DbConnection connection,
-        ConnectionEndEventData eventData,
-        CancellationToken cancellationToken = new CancellationToken())
-    {
-        ConnectionOpened(connection, eventData);
-        return Task.CompletedTask;
-    }
 }
diff --git a/backend/FwLite/LcmCrdt/Data/MiniLcmRepository.cs b/backend/FwLite/LcmCrdt/Data/MiniLcmRepository.cs
index 267d54ae29..029f80b21e 100644
--- a/backend/FwLite/LcmCrdt/Data/MiniLcmRepository.cs
+++ b/backend/FwLite/LcmCrdt/Data/MiniLcmRepository.cs
@@ -4,6 +4,7 @@
 using LcmCrdt.FullTextSearch;
 using LcmCrdt.Utils;
 using LinqToDB;
+using LinqToDB.EntityFrameworkCore;
 using Microsoft.EntityFrameworkCore;
 using Microsoft.Extensions.DependencyInjection;
 using Microsoft.Extensions.Options;
@@ -61,7 +62,7 @@ public void Dispose()
     }
 
 
-    public IQueryable<Entry> Entries => dbContext.Entries;
+    public IQueryable<Entry> Entries => dbContext.Entries.ToLinqToDB();
     public IQueryable<ComplexFormComponent> ComplexFormComponents => dbContext.ComplexFormComponents;
     public IQueryable<ComplexFormType> ComplexFormTypes => dbContext.ComplexFormTypes;
     public IQueryable<Sense> Senses => dbContext.Senses;
diff --git a/backend/FwLite/LcmCrdt/Data/SetupCollationInterceptor.cs b/backend/FwLite/LcmCrdt/Data/SetupCollationInterceptor.cs
index fc732bdd50..c2f9498e45 100644
--- a/backend/FwLite/LcmCrdt/Data/SetupCollationInterceptor.cs
+++ b/backend/FwLite/LcmCrdt/Data/SetupCollationInterceptor.cs
@@ -2,6 +2,7 @@
 using System.Data.Common;
 using System.Globalization;
 using System.Text;
+using LinqToDB.Interceptors;
 using Microsoft.Data.Sqlite;
 using Microsoft.EntityFrameworkCore;
 using Microsoft.EntityFrameworkCore.Diagnostics;
@@ -10,7 +11,7 @@
 
 namespace LcmCrdt.Data;
 
-public class SetupCollationInterceptor(IMemoryCache cache, IMiniLcmCultureProvider cultureProvider) : IDbConnectionInterceptor, ISaveChangesInterceptor
+public class SetupCollationInterceptor(IMemoryCache cache, IMiniLcmCultureProvider cultureProvider) : IDbConnectionInterceptor, ISaveChangesInterceptor, IConnectionInterceptor
 {
     private static string? WsTableName = null;
     private WritingSystem[] GetWritingSystems(LcmCrdtDbContext dbContext, DbConnection connection)
@@ -53,14 +54,9 @@ private void InvalidateWritingSystemsCache(DbConnection connection)
         cache.Remove(CacheKey(connection));
     }
 
-    public void ConnectionOpened(DbConnection connection, ConnectionEndEventData eventData)
+    private void SetupCommonCollations(SqliteConnection sqliteConnection, WritingSystem[]? writingSystems = null)
     {
-        var context = (LcmCrdtDbContext?)eventData.Context;
-        if (context is null) throw new InvalidOperationException("context is null");
-        var sqliteConnection = (SqliteConnection)connection;
-        SetupCollations(sqliteConnection, GetWritingSystems(context, connection));
-
-        //setup general use collation
+        // Setup general use collation (used by all queries)
         sqliteConnection.CreateCollation(SqlSortingExtensions.CollateUnicodeNoCase,
             CultureInfo.CurrentCulture.CompareInfo,
             (compareInfo, x, y) =>
@@ -71,6 +67,20 @@ public void ConnectionOpened(DbConnection connection, ConnectionEndEventData eve
                 // When case-insensitively equal, sort lowercase before uppercase
                 return compareInfo.Compare(x, y, CompareOptions.None);
             });
+
+        // Setup writing system specific collations if available
+        if (writingSystems is not null)
+        {
+            SetupCollations(sqliteConnection, writingSystems);
+        }
+    }
+
+    public void ConnectionOpened(DbConnection connection, ConnectionEndEventData eventData)
+    {
+        var context = (LcmCrdtDbContext?)eventData.Context;
+        if (context is null) throw new InvalidOperationException("context is null");
+        var sqliteConnection = (SqliteConnection)connection;
+        SetupCommonCollations(sqliteConnection, GetWritingSystems(context, connection));
     }
 
     public Task ConnectionOpenedAsync(DbConnection connection,
@@ -81,6 +91,33 @@ public Task ConnectionOpenedAsync(DbConnection connection,
         return Task.CompletedTask;
     }
 
+    // LinqToDB interface
+    public void ConnectionOpening(LinqToDB.Interceptors.ConnectionEventData eventData, DbConnection connection)
+    {
+        // Setup happens after connection opens
+    }
+
+    public Task ConnectionOpeningAsync(LinqToDB.Interceptors.ConnectionEventData eventData, DbConnection connection, CancellationToken cancellationToken)
+    {
+        return Task.CompletedTask;
+    }
+
+    public void ConnectionOpened(LinqToDB.Interceptors.ConnectionEventData eventData, DbConnection connection)
+    {
+        if (connection is not SqliteConnection sqliteConnection) return;
+
+        // Only setup basic collation - writing system collations come from EF Core path
+        // Note: Collations persist on the connection, so if EF already opened this connection,
+        // this is redundant but harmless. SQLite allows re-registering collations.
+        SetupCommonCollations(sqliteConnection);
+    }
+
+    public Task ConnectionOpenedAsync(LinqToDB.Interceptors.ConnectionEventData eventData, DbConnection connection, CancellationToken cancellationToken)
+    {
+        ConnectionOpened(eventData, connection);
+        return Task.CompletedTask;
+    }
+
     public InterceptionResult<int> SavingChanges(DbContextEventData eventData, InterceptionResult<int> result)
     {
         UpdateCollationsOnSave(eventData.Context);
diff --git a/backend/FwLite/LcmCrdt/LcmCrdtKernel.cs b/backend/FwLite/LcmCrdt/LcmCrdtKernel.cs
index 043489a6ec..b5ddfb578b 100644
--- a/backend/FwLite/LcmCrdt/LcmCrdtKernel.cs
+++ b/backend/FwLite/LcmCrdt/LcmCrdtKernel.cs
@@ -121,12 +121,22 @@ public static void ConfigureDbOptions(IServiceProvider provider, DbContextOption
                     new DataParameter { Value = id.Code, DataType = DataType.Text });
                 optionsBuilder.AddMappingSchema(mappingSchema);
                 optionsBuilder.AddCustomOptions(options => options.UseSQLiteMicrosoft());
+
+                // Register read-relevant interceptors for LinqToDB
+                var sqliteFunctionInterceptor = new CustomSqliteFunctionInterceptor();
+                var collationInterceptor = provider.GetRequiredService<SetupCollationInterceptor>();
+                optionsBuilder.AddInterceptor(sqliteFunctionInterceptor);
+                optionsBuilder.AddInterceptor(collationInterceptor);
+
                 var loggerFactory = provider.GetService<ILoggerFactory>();
                 if (loggerFactory is not null)
                     optionsBuilder.AddCustomOptions(dataOptions => dataOptions.UseLoggerFactory(loggerFactory));
             });
 
+        // Register interceptors for EF Core
         builder.AddInterceptors(new CustomSqliteFunctionInterceptor(), provider.GetRequiredService<SetupCollationInterceptor>());
+
+        // UpdateEntrySearchTableInterceptor is write-only (updates FTS table), so only register with EF Core
         var updateSearchTableInterceptor = provider.GetService<UpdateEntrySearchTableInterceptor>();
         if (updateSearchTableInterceptor is not null)
             builder.AddInterceptors(updateSearchTableInterceptor);

From 8ddd1d426e2165e722ba1d92b71f82c740022e68 Mon Sep 17 00:00:00 2001
From: Tim Haasdyk <tim_haasdyk@sil.org>
Date: Thu, 22 Jan 2026 10:19:08 +0100
Subject: [PATCH 25/42] Handle restoring deleted entries

---
 .../src/lib/components/ui/alert/alert.svelte  |  2 +-
 .../src/project/browse/EntriesList.svelte     |  1 -
 .../src/project/browse/EntryView.svelte       | 45 ++++++++++++++++---
 3 files changed, 41 insertions(+), 7 deletions(-)

diff --git a/frontend/viewer/src/lib/components/ui/alert/alert.svelte b/frontend/viewer/src/lib/components/ui/alert/alert.svelte
index 7a6f5053f0..f4cc97e1f0 100644
--- a/frontend/viewer/src/lib/components/ui/alert/alert.svelte
+++ b/frontend/viewer/src/lib/components/ui/alert/alert.svelte
@@ -6,7 +6,7 @@
     variants: {
       variant: {
         default: 'bg-background text-foreground',
-        destructive: 'border-destructive/50 text-destructive dark:border-destructive [&>svg]:text-destructive',
+        destructive: 'bg-destructive text-destructive-foreground dark:border-destructive-foreground/50 [&>svg]:text-destructive',
       },
     },
     defaultVariants: {
diff --git a/frontend/viewer/src/project/browse/EntriesList.svelte b/frontend/viewer/src/project/browse/EntriesList.svelte
index 4451f1006f..ad4467cd48 100644
--- a/frontend/viewer/src/project/browse/EntriesList.svelte
+++ b/frontend/viewer/src/project/browse/EntriesList.svelte
@@ -64,7 +64,6 @@
 
   // Handle entry deleted events
   projectEventBus.onEntryDeleted(entryId => {
-    if (selectedEntryId === entryId) onSelectEntry(undefined);
     entryLoader?.removeEntryById(entryId);
   });
 
diff --git a/frontend/viewer/src/project/browse/EntryView.svelte b/frontend/viewer/src/project/browse/EntryView.svelte
index e8cd61aafe..64103e809b 100644
--- a/frontend/viewer/src/project/browse/EntryView.svelte
+++ b/frontend/viewer/src/project/browse/EntryView.svelte
@@ -1,9 +1,9 @@
 <script lang="ts">
-  import { Icon } from '$lib/components/ui/icon';
+  import {Icon} from '$lib/components/ui/icon';
   import EntryEditor from '$lib/entry-editor/object-editors/EntryEditor.svelte';
   import {resource, Debounced, watch} from 'runed';
-  import { useMiniLcmApi } from '$lib/services/service-provider';
-  import { fade } from 'svelte/transition';
+  import {useMiniLcmApi} from '$lib/services/service-provider';
+  import {fade} from 'svelte/transition';
   import ViewPicker from './EditorViewOptions.svelte';
   import EntryMenu from './EntryMenu.svelte';
   import {ScrollArea} from '$lib/components/ui/scroll-area';
@@ -11,7 +11,7 @@
   import {useWritingSystemService} from '$project/data';
   import {t} from 'svelte-i18n-lingui';
   import {Toggle} from '$lib/components/ui/toggle';
-  import {XButton} from '$lib/components/ui/button';
+  import {Button, XButton} from '$lib/components/ui/button';
   import type {IEntry} from '$lib/dotnet-types';
   import {copy, EntryPersistence} from '$lib/entry-editor/entry-persistence.svelte';
   import {useProjectEventBus} from '$lib/services/event-bus';
@@ -20,11 +20,15 @@
   import {useFeatures} from '$lib/services/feature-service';
   import type {ReadonlyDeep} from 'type-fest';
   import DictionaryEntry from '$lib/components/dictionary/DictionaryEntry.svelte';
+  import * as Alert from '$lib/components/ui/alert';
+  import {pt} from '$lib/views/view-text';
+  import {useCurrentView} from '$lib/views/view-service';
 
   const writingSystemService = useWritingSystemService();
   const eventBus = useProjectEventBus();
   const miniLcmApi = useMiniLcmApi();
   const features = useFeatures();
+  const currentView = useCurrentView();
   const {
     entryId,
     onClose,
@@ -42,6 +46,7 @@
       // IMMEDIATELY take a snapshot to ensure it doesn't get mutated by the editor before EntryPersistence gets it.
       // (dirty fields immediately push their current dirty value into the entry object, which can corrupt the update diff.)
       latestPersistedSnapshot = entry ? Object.freeze(copy(entry)) : undefined;
+      deleted = false;
       return entry;
     },
   );
@@ -52,6 +57,18 @@
     }
   });
 
+  eventBus.onEntryDeleted(id => {
+    if (id === entryId) {
+      deleted = true;
+    }
+  });
+
+  async function restore() {
+    if (!entry) return;
+    await miniLcmApi.createEntry(entry);
+    deleted = false;
+  }
+
   let latestPersistedSnapshot = $state<ReadonlyDeep<IEntry>>();
   const entryPersistence = new EntryPersistence(() => latestPersistedSnapshot);
   const entry = $derived(entryResource.current ?? undefined);
@@ -60,7 +77,9 @@
   let dictionaryPreview: 'show' | 'hide' | 'sticky' = $state('show');
   const sticky = $derived.by(() => dictionaryPreview === 'sticky');
 
+
   let readonly = $state(false);
+  let deleted = $state(false);
 
   const loadedEntryId = $derived(entry?.id);
   let entryScrollViewportRef: HTMLElement | null = $state(null);
@@ -97,6 +116,22 @@
           <EntryMenu {entry} />
         </div>
       </div>
+      {#if deleted}
+        {@const entity = pt('entry', 'word', $currentView)}
+        <div class="mb-2 px-2">
+          <Alert.Root variant="destructive">
+            <Alert.Description class="flex justify-between items-center">
+              <span class="inline-flex gap-2">
+                <Icon icon="i-mdi-alert-circle" class="size-5" />
+                {$t`This ${entity} was deleted`}
+              </span>
+              <Button size="sm" variant="secondary" onclick={() => restore()}>
+                {$t('Restore')}
+              </Button>
+            </Alert.Description>
+          </Alert.Root>
+        </div>
+      {/if}
       {#if dictionaryPreview === 'sticky'}
         <div class="md:px-2">
           {@render preview(entry)}
@@ -110,7 +145,7 @@
         </div>
       {/if}
       <div class="max-md:p-2 md:px-2">
-        <EntryEditor bind:ref={editorRef} {entry} readonly={readonly || !features.write} {...entryPersistence.entryEditorProps} />
+        <EntryEditor bind:ref={editorRef} {entry} readonly={readonly || !features.write || deleted} {...entryPersistence.entryEditorProps} />
       </div>
     </ScrollArea>
   {/if}

From 41461b0b511e39e3fec38eed42a1f37b3b68309c Mon Sep 17 00:00:00 2001
From: Tim Haasdyk <tim_haasdyk@sil.org>
Date: Thu, 22 Jan 2026 11:30:04 +0100
Subject: [PATCH 26/42] Fix stale results and flicker

---
 .../entry-loader-service.svelte.test.ts       | 42 ++++------
 .../services/entry-loader-service.svelte.ts   | 81 ++++++++++++-------
 .../src/project/browse/EntriesList.svelte     | 33 +++++---
 3 files changed, 86 insertions(+), 70 deletions(-)

diff --git a/frontend/viewer/src/lib/services/entry-loader-service.svelte.test.ts b/frontend/viewer/src/lib/services/entry-loader-service.svelte.test.ts
index e349771fc7..4f5968c52b 100644
--- a/frontend/viewer/src/lib/services/entry-loader-service.svelte.test.ts
+++ b/frontend/viewer/src/lib/services/entry-loader-service.svelte.test.ts
@@ -5,7 +5,6 @@ import type {IEntry} from '$lib/dotnet-types';
 import type {IMiniLcmJsInvokable} from '$lib/dotnet-types/generated-types/FwLiteShared/Services/IMiniLcmJsInvokable';
 import {defaultEntry} from '$lib/utils';
 
-// Must match EntryLoaderService.batchSize
 const BATCH_SIZE = 50;
 
 function makeEntry(id: string, citation?: string): IEntry {
@@ -27,6 +26,8 @@ type MiniLcmApiMock = {
   getEntryIndex: ReturnType<typeof vi.fn>;
 };
 
+let cleanups: (() => void)[] = [];
+
 async function createService(allEntries: IEntry[], totalCount = allEntries.length) {
   const api: MiniLcmApiMock = {
     countEntries: vi.fn().mockResolvedValue(totalCount),
@@ -42,22 +43,21 @@ async function createService(allEntries: IEntry[], totalCount = allEntries.lengt
   };
 
   let service!: EntryLoaderService;
-  const cleanup = $effect.root(() => {
+  cleanups.push($effect.root(() => {
     service = new EntryLoaderService(api as unknown as IMiniLcmJsInvokable, {
       search: () => '',
       sort: () => undefined,
       gridifyFilter: () => undefined,
-    });
-  });
+    }, BATCH_SIZE);
+  }));
 
   // Wait for initial load triggered by constructor's watch
   await vi.waitFor(() => expect(service.loading).toBe(false));
 
-  return {api, service, cleanup};
+  return {api, service};
 }
 
 describe('EntryLoaderService', () => {
-  let cleanups: (() => void)[] = [];
 
   afterEach(() => {
     for (const cleanup of cleanups) cleanup();
@@ -67,8 +67,7 @@ describe('EntryLoaderService', () => {
   describe('loading and caching', () => {
     it('loads a batch and caches entries', async () => {
       const entries = makeEntries(3);
-      const {api, service, cleanup} = await createService(entries);
-      cleanups.push(cleanup);
+      const {api, service} = await createService(entries);
 
       await service.getOrLoadEntryByIndex(1);
 
@@ -79,8 +78,7 @@ describe('EntryLoaderService', () => {
 
     it('returns cached entries without refetching', async () => {
       const entries = makeEntries(5);
-      const {api, service, cleanup} = await createService(entries);
-      cleanups.push(cleanup);
+      const {api, service} = await createService(entries);
 
       await service.getOrLoadEntryByIndex(0);
       await service.getOrLoadEntryByIndex(0);
@@ -90,8 +88,7 @@ describe('EntryLoaderService', () => {
 
     it('deduplicates concurrent requests for the same batch', async () => {
       const entries = makeEntries(10);
-      const {api, service, cleanup} = await createService(entries, entries.length);
-      cleanups.push(cleanup);
+      const {api, service} = await createService(entries, entries.length);
 
       const promises = [
         service.getOrLoadEntryByIndex(0),
@@ -108,8 +105,7 @@ describe('EntryLoaderService', () => {
   describe('quiet reset', () => {
     it('loads two adjacent batches in a single request', async () => {
       const entries = makeEntries(4 * BATCH_SIZE);
-      const {api, service, cleanup} = await createService(entries, entries.length);
-      cleanups.push(cleanup);
+      const {api, service} = await createService(entries, entries.length);
 
       // Mark batches 0 and 1 as "relevant" (adjacent)
       service.getCachedEntryByIndex(0);
@@ -123,8 +119,7 @@ describe('EntryLoaderService', () => {
 
     it('loads only the most recent batch when last two are non-adjacent', async () => {
       const entries = makeEntries(10 * BATCH_SIZE);
-      const {api, service, cleanup} = await createService(entries, entries.length);
-      cleanups.push(cleanup);
+      const {api, service} = await createService(entries, entries.length);
 
       service.getCachedEntryByIndex(0);              // batch 0
       service.getCachedEntryByIndex(3 * BATCH_SIZE); // batch 3
@@ -136,8 +131,7 @@ describe('EntryLoaderService', () => {
 
     it('does not clear cache before swap (no flicker)', async () => {
       const entries = makeEntries(2 * BATCH_SIZE, 'old');
-      const {api, service, cleanup} = await createService(entries, entries.length);
-      cleanups.push(cleanup);
+      const {api, service} = await createService(entries, entries.length);
 
       // Warm cache with batch 0
       await service.getOrLoadEntryByIndex(0);
@@ -173,8 +167,7 @@ describe('EntryLoaderService', () => {
 
     it('debounces multiple calls', async () => {
       const entries = makeEntries(BATCH_SIZE);
-      const {api, service, cleanup} = await createService(entries, entries.length);
-      cleanups.push(cleanup);
+      const {api, service} = await createService(entries, entries.length);
 
       // Warm batch 0
       await service.getOrLoadEntryByIndex(0);
@@ -198,8 +191,7 @@ describe('EntryLoaderService', () => {
   describe('race conditions', () => {
     it('discards stale count when reset occurs during loadInitialCount', async () => {
       const entries = makeEntries(200);
-      const {api, service, cleanup} = await createService(entries, 100);
-      cleanups.push(cleanup);
+      const {api, service} = await createService(entries, 100);
 
       let resolveCount: (value: number) => void;
       api.countEntries.mockReturnValueOnce(new Promise<number>(r => { resolveCount = r; }));
@@ -219,8 +211,7 @@ describe('EntryLoaderService', () => {
 
     it('discards stale batch when reset occurs during load', async () => {
       const entries = makeEntries(BATCH_SIZE, 'a');
-      const {api, service, cleanup} = await createService(entries, entries.length);
-      cleanups.push(cleanup);
+      const {api, service} = await createService(entries, entries.length);
 
       let resolveEntries: (value: IEntry[]) => void;
       api.getEntries.mockReturnValueOnce(new Promise<IEntry[]>(r => { resolveEntries = r; }));
@@ -244,8 +235,7 @@ describe('EntryLoaderService', () => {
 
     it('does not allow a stale load to clear a newer pending promise', async () => {
       const entries = makeEntries(2 * BATCH_SIZE, 'v');
-      const {api, service, cleanup} = await createService(entries, entries.length);
-      cleanups.push(cleanup);
+      const {api, service} = await createService(entries, entries.length);
 
       let resolveFirst: (value: IEntry[]) => void;
       api.getEntries.mockReturnValueOnce(new Promise<IEntry[]>(r => { resolveFirst = r; }));
diff --git a/frontend/viewer/src/lib/services/entry-loader-service.svelte.ts b/frontend/viewer/src/lib/services/entry-loader-service.svelte.ts
index 2707467741..b3f288813d 100644
--- a/frontend/viewer/src/lib/services/entry-loader-service.svelte.ts
+++ b/frontend/viewer/src/lib/services/entry-loader-service.svelte.ts
@@ -41,29 +41,37 @@ export class EntryLoaderService {
   #recentBatchNumbers: { curr?: number, prev?: number } = {};
 
   // Coalesce multiple quiet resets (e.g., rapid event bursts)
-  #quietResetRequested = false;
+  #quietResetRequest = { requested: false, generation: -1 };
   #quietResetInFlight: Promise<void> | undefined;
 
   // Generation counter to invalidate in-flight async operations after reset
-  #generation = -1;
-
-  // Config
-  readonly batchSize = 50;
+  // Must be reactive ($state) so UI can react to generation changes
+  #generation = $state(-1);
 
   readonly #api: IMiniLcmJsInvokable;
   readonly #deps: EntryLoaderDeps;
 
-  constructor(api: IMiniLcmJsInvokable, deps: EntryLoaderDeps) {
+  // Debounce timer for coalescing rapid filter changes
+  #debounceTimer: ReturnType<typeof setTimeout> | undefined;
+
+  constructor(api: IMiniLcmJsInvokable, deps: EntryLoaderDeps, readonly batchSize = 50) {
     this.#api = api;
     this.#deps = deps;
 
-    this.reset();
+    // Initial load (no debounce on first load)
+    void this.reset();
 
     watch(
       () => [deps.search(), deps.sort(), deps.gridifyFilter()],
       (_, oldValues) => {
-        if (oldValues) this.reset();
-        void this.loadInitialCount();
+        // don't reset
+        if (!oldValues) return;
+
+        // Debounce the actual fetch to coalesce rapid changes
+        clearTimeout(this.#debounceTimer);
+        this.#debounceTimer = setTimeout(() => {
+          void this.reset();
+        }, DEFAULT_DEBOUNCE_TIME);
       }
     );
   }
@@ -93,9 +101,12 @@ export class EntryLoaderService {
     const cached = this.#entryCache.get(index);
     if (cached) return cached;
 
+    const generation = this.#generation;
     await this.#loadBatchForIndex(index);
 
-    // Return from cache. If reset occurred during load, batch wasn't cached, so this returns undefined.
+    // Discard stale batches
+    if (this.#generation !== generation) return undefined;
+
     return this.#entryCache.get(index);
   }
 
@@ -176,20 +187,44 @@ export class EntryLoaderService {
     await this.quietReset();
   }
 
+  /**
+   * Full reset: clear all cache and refetch count.
+   */
+  async reset(): Promise<void> {
+    await this.loadInitialCount();
+    this.#entryCache.clear();
+    this.#entryVersions.clear();
+    this.#idToIndex.clear();
+    this.#pendingBatches.clear();
+    this.#loadedBatches.clear();
+    this.#generation++;
+  }
+
   /**
    * Quiet reset: refresh count + reload the currently relevant batch(es), then atomically swap caches.
    * This avoids skeleton flashes for background events (add/update/delete) that affect list ordering.
+   *
+   * A full reset() trumps any pending quiet reset — if the generation changes during the debounce
+   * window, the quiet reset is aborted.
    */
   quietReset(): Promise<void> {
-    this.#quietResetRequested = true;
+    this.#quietResetRequest = { requested: true, generation: this.#generation };
     if (this.#quietResetInFlight) return this.#quietResetInFlight;
 
     const run = async () => {
-      while (this.#quietResetRequested) {
-        this.#quietResetRequested = false;
+      while (this.#quietResetRequest.requested) {
+        this.#quietResetRequest.requested = false;
+
         // Debounce: wait for it to settle
         await delay(DEFAULT_DEBOUNCE_TIME);
-        if (this.#quietResetRequested) continue;
+
+        // If we've moved to a new generation: abort
+        if (this.#generation !== this.#quietResetRequest.generation) {
+          this.#quietResetInFlight = undefined;
+          return;
+        }
+
+        if (this.#quietResetRequest.requested) continue;
 
         await this.#runQuietResetOnce();
       }
@@ -202,23 +237,7 @@ export class EntryLoaderService {
     return this.#quietResetInFlight;
   }
 
-  /**
-   * Full reset: clear all cache and refetch count.
-   */
-  reset(): void {
-    this.#generation++;
-    this.#entryCache.clear();
-    this.#entryVersions.clear();
-    this.#idToIndex.clear();
-    this.#pendingBatches.clear();
-    this.#loadedBatches.clear();
-    this.totalCount = undefined;
-    this.error = undefined;
-    this.loading = true;
-  }
-
   // Private methods
-
   async #loadBatchForIndex(index: number): Promise<void> {
     const batchNumber = Math.floor(index / this.batchSize);
 
@@ -342,7 +361,7 @@ export class EntryLoaderService {
         this.#fetchEntriesForQuietReset(batches),
       ]);
 
-      if (this.#generation !== generation) return; // Stale after full reset
+      if (this.#generation !== generation) return; // Stale
 
       this.#swapCachesForQuietReset(batches, entries, newCount);
     } catch (e) {
diff --git a/frontend/viewer/src/project/browse/EntriesList.svelte b/frontend/viewer/src/project/browse/EntriesList.svelte
index ad4467cd48..840b68f0bd 100644
--- a/frontend/viewer/src/project/browse/EntriesList.svelte
+++ b/frontend/viewer/src/project/browse/EntriesList.svelte
@@ -48,14 +48,18 @@
   const dialogsService = useDialogsService();
   const projectEventBus = useProjectEventBus();
 
-  let entryLoader = $derived(!miniLcmApi ? undefined : new EntryLoaderService(miniLcmApi, {
+  // Create deps object reactively so watch can track changes
+  // The closures maybe need to be created OUTSIDE untrack so they maintain reactivity
+  const deps = {
     search: () => search,
     sort: () => sort,
     gridifyFilter: () => gridifyFilter,
-  }));
+  };
+
+  let entryLoader = $derived(!miniLcmApi ? undefined : untrack(() => new EntryLoaderService(miniLcmApi, deps)));
 
   // Debounce the loading state for smoother UI
-  const loading = new Debounced(() => entryLoader?.loading ?? true, 50);
+  const loading = new Debounced(() => entryLoader?.loading ?? true, 0);
 
   // Keep entryCount in sync
   $effect(() => {
@@ -78,14 +82,14 @@
     }
   });
 
-  // Generate a random number of skeleton rows between 3 and 7
-  const skeletonRowCount = Math.floor(Math.random() * 5) + 3;
+  // Generate a random number of skeleton rows between 10 and 13
+  const skeletonRowCount = Math.ceil(Math.random() * 10) + 3;
 
   // Generate index array for virtual list.
   // We use a small number of skeletons if the total count is not yet known
   // to avoid a "white phase" between initial load and list initialization.
   const indexArray = $derived(
-    entryLoader && entryLoader.totalCount !== undefined
+    entryLoader?.totalCount !== undefined
       ? Array.from({ length: entryLoader.totalCount }, (_, i) => i)
       : Array.from({ length: skeletonRowCount }, (_, i) => i)
   );
@@ -105,14 +109,18 @@
 
     void (async () => {
       // track the index so we follow it if it jumps
-      await entryLoader?.getOrLoadEntryIndex(selectedEntryId);
-      untrack(() => void scrollToEntry(vList!, selectedEntryId));
+      const index = await entryLoader?.getOrLoadEntryIndex(selectedEntryId);
+      if (index === undefined || index < 0) {
+        vList.scrollTo(0);
+        return;
+      } else {
+        untrack(() => void scrollToIndex(vList!, index));
+      }
     })();
   });
 
-  async function scrollToEntry(vList: VListHandle, entryId: string) {
+  async function scrollToIndex(vList: VListHandle, index: number) {
     if (!entryLoader) return;
-    const index = await entryLoader.getOrLoadEntryIndex(entryId);
     if (index < 0 || !vList) return;
 
     const visibleStart = vList.getScrollOffset();
@@ -157,8 +165,7 @@
       iconProps={{ class: cn(loading.current && 'animate-spin') }}
       size="icon"
       onclick={() => {
-        entryLoader?.reset();
-        void entryLoader?.loadInitialCount();
+        void entryLoader?.reset();
       }}
     />
   </DevContent>
@@ -183,7 +190,7 @@
         <VList bind:this={vList}
               data={indexArray}
               class="h-full p-0.5 md:pr-3 after:h-12 after:block"
-              getKey={(index: number) => entryLoader?.getCachedEntryByIndex(index)?.id ?? `skeleton-${index}`}
+              getKey={(index: number) => `${entryLoader?.generation ?? EntryLoaderService.DEFAULT_GENERATION}-${index}`}
               bufferSize={400}>
           {#snippet children(index: number)}
             {@const generation = entryLoader?.generation ?? EntryLoaderService.DEFAULT_GENERATION}

From 0e6b7e7025d19071329ba3b83aef0877000e43bb Mon Sep 17 00:00:00 2001
From: Tim Haasdyk <tim_haasdyk@sil.org>
Date: Thu, 22 Jan 2026 11:57:32 +0100
Subject: [PATCH 27/42] Fix gitignore

---
 frontend/viewer/.gitignore | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/viewer/.gitignore b/frontend/viewer/.gitignore
index 7e0b04f8df..1fa96a2456 100644
--- a/frontend/viewer/.gitignore
+++ b/frontend/viewer/.gitignore
@@ -26,4 +26,4 @@ html-test-results
 
 *storybook.log
 storybook-static
-"screenshots/" 
+screenshots/

From 93bcb80f20df47ffd61fdc71531308a9c62a0c09 Mon Sep 17 00:00:00 2001
From: Tim Haasdyk <tim_haasdyk@sil.org>
Date: Thu, 22 Jan 2026 13:07:13 +0100
Subject: [PATCH 28/42] Fix and extend e2e coverage

---
 frontend/viewer/Taskfile.yml                  |   1 +
 .../ui/input/composable-input.svelte          |   7 +-
 .../src/project/browse/SearchFilter.svelte    |   2 +-
 frontend/viewer/tests/entries-list-v2.test.ts |  37 +--
 .../viewer/tests/entry-edit-persists.test.ts  | 251 ++++++++++++++++++
 .../tests/project-view-snapshots.test.ts      |  17 +-
 6 files changed, 294 insertions(+), 21 deletions(-)
 create mode 100644 frontend/viewer/tests/entry-edit-persists.test.ts

diff --git a/frontend/viewer/Taskfile.yml b/frontend/viewer/Taskfile.yml
index af04e77550..d9faef2d29 100644
--- a/frontend/viewer/Taskfile.yml
+++ b/frontend/viewer/Taskfile.yml
@@ -46,6 +46,7 @@ tasks:
     desc: 'runs playwright tests against already running server'
     cmd: pnpm run test:playwright {{.CLI_ARGS}}
   playwright-test-standalone:
+    aliases: [pts]
     desc: 'runs playwright tests and runs dev automatically, run ui mode by calling with -- --ui or use --update-snapshots'
     env:
       AUTO_START_SERVER: true
diff --git a/frontend/viewer/src/lib/components/ui/input/composable-input.svelte b/frontend/viewer/src/lib/components/ui/input/composable-input.svelte
index cae9703a2b..e59d0d1e68 100644
--- a/frontend/viewer/src/lib/components/ui/input/composable-input.svelte
+++ b/frontend/viewer/src/lib/components/ui/input/composable-input.svelte
@@ -1,10 +1,11 @@
 <script lang="ts" generics="T extends string | number">
-  import type {WithElementRef} from 'bits-ui';
+  import {mergeProps, type WithElementRef} from 'bits-ui';
   import type {HTMLAttributes} from 'svelte/elements';
   import type {Snippet} from 'svelte';
   import InputShell from './input-shell.svelte';
   import {Input} from '.';
   import {cn} from '$lib/utils';
+  import type {InputProps} from './input.svelte';
 
   type Props = WithElementRef<Omit<HTMLAttributes<HTMLDivElement>, 'placeholder'>> & {
     value?: T,
@@ -12,6 +13,7 @@
     before?: Snippet,
     after?: Snippet,
     placeholder?: string | Snippet,
+    inputProps?: InputProps,
   };
 
   let {
@@ -22,6 +24,7 @@
     placeholder,
     before,
     after,
+    inputProps,
     ...restProps
   }: Props = $props();
 
@@ -35,7 +38,7 @@
 <InputShell bind:ref {focusRingClass} class={cn('gap-0', className)} {...restProps}>
   {@render before?.()}
   <div class="grow flex relative overflow-hidden items-center h-full">
-    <Input {id} variant="ghost" placeholder={stringPlaceholder} class="grow real-input h-full px-2" bind:ref={inputRef} bind:value />
+    <Input {id} {...mergeProps(inputProps, { class: 'grow real-input h-full px-2' })} variant="ghost" placeholder={stringPlaceholder} bind:ref={inputRef} bind:value />
     {#if !value && snippetPlaceholder}
       <label for={id} class="absolute pointer-events-none text-foreground/50 x-ellipsis whitespace-nowrap px-2">
         {@render snippetPlaceholder()}
diff --git a/frontend/viewer/src/project/browse/SearchFilter.svelte b/frontend/viewer/src/project/browse/SearchFilter.svelte
index 540e75ebc2..3681d30ebc 100644
--- a/frontend/viewer/src/project/browse/SearchFilter.svelte
+++ b/frontend/viewer/src/project/browse/SearchFilter.svelte
@@ -124,7 +124,7 @@
 
 <Collapsible.Root bind:open={filtersExpanded} class={cn(filtersExpanded && 'bg-muted/50 rounded-b')}>
   <div class="relative">
-    <ComposableInput bind:value={search} {placeholder} autofocus class="px-1">
+    <ComposableInput bind:value={search} inputProps={{ 'aria-label': $t`Filter` }} {placeholder} autofocus class="px-1">
       {#snippet before()}
         <Sidebar.Trigger icon="i-mdi-menu" iconProps={{ class: 'size-5' }} class="aspect-square p-0" size="xs" />
       {/snippet}
diff --git a/frontend/viewer/tests/entries-list-v2.test.ts b/frontend/viewer/tests/entries-list-v2.test.ts
index 79429e91d0..8e0f8de497 100644
--- a/frontend/viewer/tests/entries-list-v2.test.ts
+++ b/frontend/viewer/tests/entries-list-v2.test.ts
@@ -236,14 +236,14 @@ test.describe('EntriesList V2 features', () => {
       }, firstEntryId);
 
       // Wait a bit for the event to be processed
-      await page.waitForTimeout(300);
-
-      // The first entry should now be different (what was the second entry)
-      const newTexts = await getVisibleEntryTexts(page);
-      expect(newTexts[0]).toBe(initialTexts[1]);
+      await expect(async () => {
+          // The first entry should now be different (what was the second entry)
+        const newTexts = await getVisibleEntryTexts(page);
+        expect(newTexts[0]).toBe(initialTexts[1]);
 
-      // The old first entry should not be in the list
-      expect(newTexts).not.toContain(initialTexts[0]);
+        // The old first entry should not be in the list
+        expect(newTexts).not.toContain(initialTexts[0]);
+      }).toPass({timeout: 5000});
     });
 
     test('entry update event updates entry in list without full reset', async ({page}) => {
@@ -270,11 +270,11 @@ test.describe('EntriesList V2 features', () => {
       }, firstEntry);
 
       // Wait a bit for the event to be processed
-      await page.waitForTimeout(300);
-
+      await expect(async () => {
       // The first entry should now show the updated text
-      const newFirstEntryText = await entryRows.first().textContent();
-      expect(newFirstEntryText).toContain('-UPDATED-');
+        const newFirstEntryText = await entryRows.first().textContent();
+        expect(newFirstEntryText).toContain('-UPDATED-');
+      }).toPass({timeout: 5000});
     });
 
     test('deleting selected entry clears selection', async ({page}) => {
@@ -300,9 +300,7 @@ test.describe('EntriesList V2 features', () => {
       await page.waitForTimeout(300);
 
       // Selection should be cleared (no entry selected)
-      // URL should not have entryId parameter
-      const url = page.url();
-      expect(url).not.toContain(`entryId=${entryId}`);
+      await expect(selectedEntry).not.toBeAttached();
     });
 
     test('deleting entry not in cache triggers reset but maintains position', async ({page}) => {
@@ -456,8 +454,17 @@ test.describe('EntriesList V2 features', () => {
       const visibleTextsBefore = await getVisibleEntryTexts(page);
       expect(visibleTextsBefore.length).toBeGreaterThan(0);
 
-      // Action: Create entry at index 25 (before currently loaded batch)
+      // Action: Create a bunch of entries so the scroll height increases
       const {headword} = await createEntryAtIndex(page, 25);
+      await createEntryAtIndex(page, 25);
+      await createEntryAtIndex(page, 25);
+      await createEntryAtIndex(page, 25);
+      await createEntryAtIndex(page, 25);
+      await createEntryAtIndex(page, 25);
+      await createEntryAtIndex(page, 25);
+      await createEntryAtIndex(page, 25);
+      await createEntryAtIndex(page, 25);
+      await createEntryAtIndex(page, 25);
 
       // Wait for event handling
       await page.waitForTimeout(500);
diff --git a/frontend/viewer/tests/entry-edit-persists.test.ts b/frontend/viewer/tests/entry-edit-persists.test.ts
new file mode 100644
index 0000000000..0b16b18958
--- /dev/null
+++ b/frontend/viewer/tests/entry-edit-persists.test.ts
@@ -0,0 +1,251 @@
+import {type Page, expect, test} from '@playwright/test';
+import {SortField} from '$lib/dotnet-types/generated-types/MiniLcm/SortField';
+
+/**
+ * Critical tests: Verify that entry edits are saved to the backend.
+ *
+ * Note: The demo environment uses in-memory storage that resets on page reload.
+ * We use existing demo entries and verify changes via API immediately after UI edits.
+ * This catches the most common failure mode: UI appearing to save but not calling the API.
+ */
+test.describe('Entry edit persistence', () => {
+
+  function filterLocator(page: Page) {
+    return page.getByRole('textbox', {name: 'Filter'});
+  }
+
+  async function waitForProjectViewReady(page: Page) {
+    await expect(page.locator('.i-mdi-loading')).toHaveCount(0, {timeout: 10000});
+    await page.waitForFunction(() => document.fonts.ready);
+    await expect(page.locator('[data-skeleton]')).toHaveCount(0, {timeout: 10000});
+  }
+
+  async function waitForTestUtils(page: Page) {
+    await page.waitForFunction(() => window.__PLAYWRIGHT_UTILS__?.demoApi, {timeout: 5000});
+  }
+
+  async function waitForEntrySaved(page: Page) {
+    await page.waitForTimeout(600);
+    await expect(page.locator('.i-mdi-loading')).toHaveCount(0, {timeout: 5000});
+  }
+
+  async function selectEntryByFilter(page: Page, filter: string) {
+    await filterLocator(page).fill(filter);
+    await page.waitForTimeout(500);
+    await expect(page.locator('[data-skeleton]')).toHaveCount(0, {timeout: 5000});
+
+    const entryRow = page.getByRole('row', {name: new RegExp(filter.slice(0, 5))}).first();
+    await expect(entryRow).toBeVisible({timeout: 10000});
+    await entryRow.click();
+
+    await expect(page.locator('.i-mdi-dots-vertical')).toBeVisible({timeout: 5000});
+  }
+
+  test.beforeEach(async ({page}) => {
+    await page.goto('/testing/project-view');
+    await waitForProjectViewReady(page);
+    await waitForTestUtils(page);
+  });
+
+  test('UI edit of gloss field is saved to backend', async ({page}) => {
+    // Get an existing entry with senses from demo data that has an English gloss
+    const {entryId, headword, senseId, originalGloss} = await page.evaluate(async (headwordField) => {
+      const api = window.__PLAYWRIGHT_UTILS__.demoApi;
+      const entries = await api.getEntries({
+        offset: 0,
+        count: 50,
+        order: {field: headwordField, writingSystem: 'default', ascending: true}
+      });
+      // Find an entry that has at least one sense with an English gloss
+      const entry = entries.find(e => e.senses.length > 0 && e.senses[0].gloss?.en);
+      if (!entry) throw new Error('No suitable entry with English gloss found in demo data');
+      return {
+        entryId: entry.id,
+        senseId: entry.senses[0].id,
+        headword: entry.citationForm?.seh ?? entry.lexemeForm?.seh ?? '',
+        originalGloss: entry.senses[0].gloss?.en ?? '',
+      };
+    }, SortField.Headword);
+    expect(entryId).toBeTruthy();
+    expect(headword).toBeTruthy();
+    expect(originalGloss).toBeTruthy();
+
+    // Select the entry
+    await selectEntryByFilter(page, headword);
+
+    // Find the gloss field - look specifically for the English gloss input
+    // The gloss field has multiple inputs (one per writing system)
+    const glossFieldContainer = page.locator('[style*="grid-area: gloss"]').first();
+    await expect(glossFieldContainer).toBeVisible({timeout: 5000});
+
+    // Find the English input specifically (labeled "Eng" or similar)
+    const engLabel = glossFieldContainer.locator('label:has-text("Eng")');
+    if (await engLabel.count() > 0) {
+      // Find the input associated with this label
+      const labelFor = await engLabel.getAttribute('for');
+      if (labelFor) {
+        const glossInput = page.locator(`#${labelFor}`);
+        await expect(glossInput).toBeVisible({timeout: 5000});
+
+        // Verify we have the expected original value
+        await expect(glossInput).toHaveValue(originalGloss);
+
+        // Edit the gloss
+        const timestamp = Date.now().toString().slice(-6);
+        const newGloss = `edited-${timestamp}`;
+        await glossInput.click();
+        await glossInput.press('Control+a');
+        await glossInput.fill(newGloss);
+        await glossInput.press('Tab');
+        await waitForEntrySaved(page);
+
+        // Verify via API that the change was saved
+        await expect(async () => {
+          const savedEntry = await page.evaluate(async (id) => {
+            const api = window.__PLAYWRIGHT_UTILS__.demoApi;
+            return await api.getEntry(id);
+          }, entryId);
+          const savedGloss = savedEntry!.senses[0]?.gloss?.en ?? '';
+          expect(savedGloss).toBe(newGloss);
+        }).toPass({timeout: 5000});
+
+        // Also verify the UI shows the new value
+        await expect(glossInput).toHaveValue(newGloss);
+        return;
+      }
+    }
+
+    // Fallback: just use first input
+    const glossInput = glossFieldContainer.locator('input').first();
+    await expect(glossInput).toBeVisible({timeout: 5000});
+
+    const timestamp = Date.now().toString().slice(-6);
+    const newGloss = `edited-${timestamp}`;
+    await glossInput.click();
+    await glossInput.press('Control+a');
+    await glossInput.fill(newGloss);
+    await glossInput.press('Tab');
+    await waitForEntrySaved(page);
+
+    // Verify via API
+    await expect(async () => {
+      const savedEntry = await page.evaluate(async (id) => {
+        const api = window.__PLAYWRIGHT_UTILS__.demoApi;
+        return await api.getEntry(id);
+      }, entryId);
+      // Check all gloss values
+      const allGlossValues = Object.values(savedEntry!.senses[0]?.gloss || {}).join(' ');
+      expect(allGlossValues).toContain(newGloss);
+    }).toPass({timeout: 5000});
+  });
+
+  test('adding sense via UI is saved to backend', async ({page}) => {
+    // Get an existing entry and count its senses
+    const {entryId, headword, initialSenseCount} = await page.evaluate(async (headwordField) => {
+      const api = window.__PLAYWRIGHT_UTILS__.demoApi;
+      const entries = await api.getEntries({
+        offset: 15,
+        count: 1,
+        order: {field: headwordField, writingSystem: 'default', ascending: true}
+      });
+      const entry = entries[0];
+      return {
+        entryId: entry.id,
+        headword: entry.citationForm?.seh ?? entry.lexemeForm?.seh ?? '',
+        initialSenseCount: entry.senses.length,
+      };
+    }, SortField.Headword);
+    expect(entryId).toBeTruthy();
+    expect(headword).toBeTruthy();
+
+    // Select the entry
+    await selectEntryByFilter(page, headword);
+
+    // Click Add Sense button
+    const addSenseButton = page.getByRole('button', {name: /add (sense|meaning)/i});
+    await expect(addSenseButton).toBeVisible({timeout: 5000});
+    await addSenseButton.click();
+
+    // Find the NEW sense's gloss input (it should be the last one)
+    const glossFieldContainers = page.locator('[style*="grid-area: gloss"]');
+    const count = await glossFieldContainers.count();
+    expect(count).toBeGreaterThan(initialSenseCount);
+
+    const newGlossContainer = glossFieldContainers.last();
+    await expect(newGlossContainer).toBeVisible({timeout: 5000});
+
+    const glossInput = newGlossContainer.locator('input').first();
+    await expect(glossInput).toBeVisible({timeout: 5000});
+
+    const timestamp = Date.now().toString().slice(-6);
+    const senseGloss = `new-sense-${timestamp}`;
+    await glossInput.fill(senseGloss);
+    await glossInput.press('Tab');
+    await waitForEntrySaved(page);
+
+    // Verify via API that the sense was added
+    await expect(async () => {
+      const savedEntry = await page.evaluate(async (id) => {
+        const api = window.__PLAYWRIGHT_UTILS__.demoApi;
+        return await api.getEntry(id);
+      }, entryId);
+      expect(savedEntry!.senses.length).toBe(initialSenseCount + 1);
+      const newSense = savedEntry!.senses.find(s =>
+        Object.values(s.gloss || {}).some(v => v === senseGloss)
+      );
+      expect(newSense).toBeTruthy();
+    }).toPass({timeout: 5000});
+  });
+
+  test('editing lexeme form is saved to backend', async ({page}) => {
+    // Get an existing entry from the demo data
+    const {entryId, originalLexeme} = await page.evaluate(async (headwordField) => {
+      const api = window.__PLAYWRIGHT_UTILS__.demoApi;
+      const entries = await api.getEntries({
+        offset: 10,
+        count: 1,
+        order: {field: headwordField, writingSystem: 'default', ascending: true}
+      });
+      const entry = entries[0];
+      return {
+        entryId: entry.id,
+        originalLexeme: entry.lexemeForm?.seh ?? '',
+      };
+    }, SortField.Headword);
+    expect(entryId).toBeTruthy();
+    expect(originalLexeme).toBeTruthy();
+
+    // Search and select the entry
+    await selectEntryByFilter(page, originalLexeme);
+
+    // Find the lexeme form field
+    const lexemeFieldContainer = page.locator('[style*="grid-area: lexemeForm"]');
+    await expect(lexemeFieldContainer).toBeVisible({timeout: 5000});
+
+    const lexemeInput = lexemeFieldContainer.locator('input').first();
+    await expect(lexemeInput).toBeVisible({timeout: 5000});
+
+    // Edit the lexeme
+    const timestamp = Date.now().toString().slice(-6);
+    const editMarker = `-E${timestamp}`;
+    const newLexeme = originalLexeme + editMarker;
+
+    await lexemeInput.click();
+    await lexemeInput.press('Control+a');
+    await lexemeInput.fill(newLexeme);
+    await lexemeInput.press('Tab');
+    await waitForEntrySaved(page);
+
+    // Verify via API that the change was saved
+    await expect(async () => {
+      const savedEntry = await page.evaluate(async (id) => {
+        const api = window.__PLAYWRIGHT_UTILS__.demoApi;
+        return await api.getEntry(id);
+      }, entryId);
+      expect(savedEntry!.lexemeForm?.seh).toBe(newLexeme);
+    }).toPass({timeout: 5000});
+
+    // Also verify the UI shows the new value
+    await expect(lexemeInput).toHaveValue(newLexeme);
+  });
+});
diff --git a/frontend/viewer/tests/project-view-snapshots.test.ts b/frontend/viewer/tests/project-view-snapshots.test.ts
index 7ee88f5fec..262cae079a 100644
--- a/frontend/viewer/tests/project-view-snapshots.test.ts
+++ b/frontend/viewer/tests/project-view-snapshots.test.ts
@@ -1,12 +1,17 @@
 import {type Page, expect, test} from '@playwright/test';
 import {assertScreenshot} from './snapshot';
 
+function filterLocator(page: Page) {
+  return page.getByRole('textbox', {name: 'Filter'});
+}
+
 for (const colorScheme of ['light', 'dark'] as const) {
   test(`ui snapshot selected entry (color: ${colorScheme})`, async ({page}) => {
     await page.emulateMedia({colorScheme});
     await page.goto('/testing/project-view');
     await waitForProjectViewReady(page);
-    await page.getByRole('row', {name: 'ambuka to cross a body of'}).click();
+    await expect(filterLocator(page)).toBeVisible();
+    await scrollToEntry(page, 'ambuka');
     await expect(page.getByRole('heading', {name: 'ambuka'})).toBeVisible();
     await expect(page.locator('.i-mdi-dots-vertical')).toBeVisible();
     await expect(page.locator('.i-mdi-loading')).toHaveCount(0);
@@ -17,12 +22,18 @@ for (const colorScheme of ['light', 'dark'] as const) {
     await page.emulateMedia({colorScheme});
     await page.goto('/testing/project-view');
     await waitForProjectViewReady(page);
-    await expect(page.getByRole('textbox', {name: 'Filter'})).toBeVisible();
-    await page.getByRole('row', { name: 'ambuka to cross a body of' }).scrollIntoViewIfNeeded();
+    await expect(filterLocator(page)).toBeVisible();
+    await scrollToEntry(page, 'ambuka');
     await assertScreenshot(page, 'project-view-default-' + colorScheme);
   });
 }
 
+async function scrollToEntry(page: Page, search: string) {
+  await filterLocator(page).fill(search);
+  await page.getByRole('row', { name: search }).click();
+  await filterLocator(page).clear();
+}
+
 async function waitForProjectViewReady(page: Page) {
   await expect(page.locator('.i-mdi-loading')).toHaveCount(0);
   await page.waitForFunction(() => document.fonts.ready);

From ab606b3a3486a249a47730842f92c5bbe7cafa57 Mon Sep 17 00:00:00 2001
From: Tim Haasdyk <tim_haasdyk@sil.org>
Date: Thu, 22 Jan 2026 14:50:55 +0100
Subject: [PATCH 29/42] Fix tracking selected entry

---
 .../src/project/browse/EntriesList.svelte     | 116 ++++++++++--------
 1 file changed, 62 insertions(+), 54 deletions(-)

diff --git a/frontend/viewer/src/project/browse/EntriesList.svelte b/frontend/viewer/src/project/browse/EntriesList.svelte
index 840b68f0bd..65212c02b8 100644
--- a/frontend/viewer/src/project/browse/EntriesList.svelte
+++ b/frontend/viewer/src/project/browse/EntriesList.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
   import {type IEntry, type IPartOfSpeech, type ISemanticDomain} from '$lib/dotnet-types';
-  import {Debounced} from 'runed';
+  import {Debounced, watch} from 'runed';
   import EntryRow from './EntryRow.svelte';
   import Button from '$lib/components/ui/button/button.svelte';
   import {cn} from '$lib/utils';
@@ -73,9 +73,18 @@
 
   // Handle entry updated events
   projectEventBus.onEntryUpdated(entry => {
-    void entryLoader?.updateEntry(entry);
+    void entryLoader?.updateEntry(entry).then(() => {
+      // follow the selected entry if it "jumps"/reorders
+      if (entry.id === selectedEntryId) {
+        return tryToScrollToEntry(entry.id);
+      }
+    });
   });
 
+  watch(
+    () => entryLoader?.generation,
+    () => void scrollToSelectedOrTop());
+
   $effect(() => {
     if (entryLoader?.error) {
       AppNotification.error($t`Failed to load entries`, entryLoader.error.message);
@@ -105,23 +114,22 @@
 
   let vList = $state<VListHandle>();
   $effect(() => {
-    if (!vList || !selectedEntryId) return;
+    if (!vList || !selectedEntryId || entryLoader?.loading !== false) return;
 
-    void (async () => {
-      // track the index so we follow it if it jumps
-      const index = await entryLoader?.getOrLoadEntryIndex(selectedEntryId);
-      if (index === undefined || index < 0) {
-        vList.scrollTo(0);
-        return;
-      } else {
-        untrack(() => void scrollToIndex(vList!, index));
-      }
-    })();
+    void untrack(scrollToSelectedOrTop);
   });
 
-  async function scrollToIndex(vList: VListHandle, index: number) {
-    if (!entryLoader) return;
-    if (index < 0 || !vList) return;
+  async function scrollToSelectedOrTop() {
+    if (!vList || !selectedEntryId) return;
+    const scrolled = await tryToScrollToEntry(selectedEntryId);
+    if (!scrolled) vList.scrollTo(0);
+  }
+
+  async function tryToScrollToEntry(entryId: string): Promise<boolean> {
+    if (!entryLoader || !vList) return false;
+
+    const index = await entryLoader.getOrLoadEntryIndex(entryId);
+    if (index < 0) return false;
 
     const visibleStart = vList.getScrollOffset();
     const visibleSize = vList.getViewportSize();
@@ -133,7 +141,9 @@
     if (itemStart < visibleStart || itemEnd > visibleEnd) {
       //using smooth scroll caused lag, maybe only do it if scrolling a short distance?
       vList.scrollToIndex(index, { align: 'center' });
+      return true;
     }
+    return false;
   }
 
   export async function selectNextEntry(): Promise<IEntry | undefined> {
@@ -164,9 +174,7 @@
       variant="outline"
       iconProps={{ class: cn(loading.current && 'animate-spin') }}
       size="icon"
-      onclick={() => {
-        void entryLoader?.reset();
-      }}
+      onclick={() => entryLoader?.reset()}
     />
   </DevContent>
   {#if !disableNewEntry}
@@ -186,42 +194,42 @@
         <div class="flex items-center justify-center h-full text-muted-foreground">
           <p>{$t`No entries found`}</p>
         </div>
-      {:else}
-        <VList bind:this={vList}
-              data={indexArray}
-              class="h-full p-0.5 md:pr-3 after:h-12 after:block"
-              getKey={(index: number) => `${entryLoader?.generation ?? EntryLoaderService.DEFAULT_GENERATION}-${index}`}
-              bufferSize={400}>
-          {#snippet children(index: number)}
-            {@const generation = entryLoader?.generation ?? EntryLoaderService.DEFAULT_GENERATION}
-            {@const version = entryLoader?.getVersion(index) ?? EntryLoaderService.DEFAULT_VERSION}
-            {#key `${generation}-${version}`}
-              <Delayed
-                getCached={() => entryLoader?.getCachedEntryByIndex(index)}
-                load={() => entryLoader?.getOrLoadEntryByIndex(index)}
-                delay={250}
-              >
-                {#snippet children(state)}
-                  {#if state.loading || !state.current}
-                    <!-- we want the initial loading state and the first loading entries
-                    to share the same skeletons, so there's no flicker -->
-                    <EntryRow class="mb-2" skeleton={true} />
-                  {:else}
-                    {@const entry = state.current}
-                    <EntryMenu {entry} contextMenu>
-                      <EntryRow {entry}
-                                class="mb-2"
-                                selected={selectedEntryId === entry.id}
-                                onclick={() => onSelectEntry(entry)}
-                                {previewDictionary}/>
-                    </EntryMenu>
-                  {/if}
-                {/snippet}
-              </Delayed>
-            {/key}
-          {/snippet}
-        </VList>
       {/if}
+
+      <VList bind:this={vList}
+            data={indexArray}
+            class="h-full p-0.5 md:pr-3 after:h-12 after:block"
+            getKey={(index: number) => `${entryLoader?.generation ?? EntryLoaderService.DEFAULT_GENERATION}-${index}`}
+            bufferSize={400}>
+        {#snippet children(index: number)}
+          {@const generation = entryLoader?.generation ?? EntryLoaderService.DEFAULT_GENERATION}
+          {@const version = entryLoader?.getVersion(index) ?? EntryLoaderService.DEFAULT_VERSION}
+          {#key `${generation}-${version}`}
+            <Delayed
+              getCached={() => entryLoader?.getCachedEntryByIndex(index)}
+              load={() => entryLoader?.getOrLoadEntryByIndex(index)}
+              delay={250}
+            >
+              {#snippet children(state)}
+                {#if state.loading || !state.current}
+                  <!-- we want the initial loading state and the first loading entries
+                  to share the same skeletons, so there's no flicker -->
+                  <EntryRow class="mb-2" skeleton={true} />
+                {:else}
+                  {@const entry = state.current}
+                  <EntryMenu {entry} contextMenu>
+                    <EntryRow {entry}
+                              class="mb-2"
+                              selected={selectedEntryId === entry.id}
+                              onclick={() => onSelectEntry(entry)}
+                              {previewDictionary}/>
+                  </EntryMenu>
+                {/if}
+              {/snippet}
+            </Delayed>
+          {/key}
+        {/snippet}
+      </VList>
     </div>
   {/if}
 </div>

From 7369263c444eaafbb9cabe4f5027e79200932021 Mon Sep 17 00:00:00 2001
From: Tim Haasdyk <tim_haasdyk@sil.org>
Date: Thu, 22 Jan 2026 14:51:24 +0100
Subject: [PATCH 30/42] Finish types and backend

---
 ...EntryWindowTests.cs => EntryIndexTests.cs} |   4 +-
 .../Api/FwDataMiniLcmApi.cs                   |  39 +---
 .../Services/MiniLcmJsInvokable.cs            |   2 +-
 .../TypeGen/ReinforcedFwLiteTypingConfig.cs   |   1 +
 .../FwLite/FwLiteWeb/Routes/MiniLcmRoutes.cs  |  26 +--
 ...EntryWindowTests.cs => EntryIndexTests.cs} |   2 +-
 backend/FwLite/LcmCrdt/CrdtMiniLcmApi.cs      |  20 +-
 .../FwLite/LcmCrdt/Data/MiniLcmRepository.cs  |  12 +-
 .../MiniLcm.Tests/EntryIndexTestsBase.cs      | 101 ++++++++++
 .../MiniLcm.Tests/EntryWindowTestsBase.cs     | 185 ------------------
 backend/FwLite/MiniLcm/IMiniLcmReadApi.cs     |  49 ++---
 .../MiniLcmApiStringNormalizationWrapper.cs   |   5 +
 backend/LfClassicData/LfClassicMiniLcmApi.cs  |   7 +-
 .../Services/IMiniLcmJsInvokable.ts           |   5 +-
 .../MiniLcm/IIndexQueryOptions.ts             |  13 ++
 frontend/viewer/src/lib/dotnet-types/index.ts |   1 +
 .../src/project/demo/in-memory-demo-api.ts    |   3 +-
 17 files changed, 189 insertions(+), 286 deletions(-)
 rename backend/FwLite/FwDataMiniLcmBridge.Tests/MiniLcmTests/{EntryWindowTests.cs => EntryIndexTests.cs} (68%)
 rename backend/FwLite/LcmCrdt.Tests/MiniLcmTests/{EntryWindowTests.cs => EntryIndexTests.cs} (87%)
 create mode 100644 backend/FwLite/MiniLcm.Tests/EntryIndexTestsBase.cs
 delete mode 100644 backend/FwLite/MiniLcm.Tests/EntryWindowTestsBase.cs
 create mode 100644 frontend/viewer/src/lib/dotnet-types/generated-types/MiniLcm/IIndexQueryOptions.ts

diff --git a/backend/FwLite/FwDataMiniLcmBridge.Tests/MiniLcmTests/EntryWindowTests.cs b/backend/FwLite/FwDataMiniLcmBridge.Tests/MiniLcmTests/EntryIndexTests.cs
similarity index 68%
rename from backend/FwLite/FwDataMiniLcmBridge.Tests/MiniLcmTests/EntryWindowTests.cs
rename to backend/FwLite/FwDataMiniLcmBridge.Tests/MiniLcmTests/EntryIndexTests.cs
index c3af480b81..dbfea0dd20 100644
--- a/backend/FwLite/FwDataMiniLcmBridge.Tests/MiniLcmTests/EntryWindowTests.cs
+++ b/backend/FwLite/FwDataMiniLcmBridge.Tests/MiniLcmTests/EntryIndexTests.cs
@@ -3,10 +3,10 @@
 namespace FwDataMiniLcmBridge.Tests.MiniLcmTests;
 
 [Collection(ProjectLoaderFixture.Name)]
-public class EntryWindowTests(ProjectLoaderFixture fixture) : EntryWindowTestsBase
+public class EntryIndexTests(ProjectLoaderFixture fixture) : EntryIndexTestsBase
 {
     protected override Task<IMiniLcmApi> NewApi()
     {
-        return Task.FromResult<IMiniLcmApi>(fixture.NewProjectApi("entry-window-test", "en", "en"));
+        return Task.FromResult<IMiniLcmApi>(fixture.NewProjectApi("entry-index-test", "en", "en"));
     }
 }
diff --git a/backend/FwLite/FwDataMiniLcmBridge/Api/FwDataMiniLcmApi.cs b/backend/FwLite/FwDataMiniLcmBridge/Api/FwDataMiniLcmApi.cs
index 524cf67ac0..e03fc2594e 100644
--- a/backend/FwLite/FwDataMiniLcmBridge/Api/FwDataMiniLcmApi.cs
+++ b/backend/FwLite/FwDataMiniLcmBridge/Api/FwDataMiniLcmApi.cs
@@ -918,21 +918,21 @@ public IAsyncEnumerable<Entry> GetEntries(
         options ??= QueryOptions.Default;
         var entries = GetLexEntries(predicate, options);
 
-        entries = ApplySorting(options, entries, query);
+        entries = ApplySorting(options.Order, entries, query);
         entries = options.ApplyPaging(entries);
 
         return entries.ToAsyncEnumerable().Select(FromLexEntry);
     }
 
-    private IEnumerable<ILexEntry> ApplySorting(QueryOptions options, IEnumerable<ILexEntry> entries, string? query)
+    private IEnumerable<ILexEntry> ApplySorting(SortOptions order, IEnumerable<ILexEntry> entries, string? query)
     {
-        var sortWs = GetWritingSystemHandle(options.Order.WritingSystem, WritingSystemType.Vernacular);
-        if (options.Order.Field == SortField.SearchRelevance)
+        var sortWs = GetWritingSystemHandle(order.WritingSystem, WritingSystemType.Vernacular);
+        if (order.Field == SortField.SearchRelevance)
         {
-            return entries.ApplyRoughBestMatchOrder(options.Order, sortWs, query);
+            return entries.ApplyRoughBestMatchOrder(order, sortWs, query);
         }
 
-        return options.ApplyOrder(entries, e => e.LexEntryHeadword(sortWs));
+        return order.ApplyOrder(entries, e => e.LexEntryHeadword(sortWs));
     }
 
     public IAsyncEnumerable<Entry> SearchEntries(string query, QueryOptions? options = null)
@@ -955,34 +955,11 @@ public IAsyncEnumerable<Entry> SearchEntries(string query, QueryOptions? options
         return Task.FromResult(lexEntry is null ? null : FromLexEntry(lexEntry));
     }
 
-    public async Task<EntryWindowResponse> GetEntriesWindow(int start, int size, string? query = null, QueryOptions? options = null)
+    public Task<int> GetEntryIndex(Guid entryId, string? query = null, IndexQueryOptions? options = null)
     {
-        const int MaxPageSize = 1_000;
-        if (start < 0) throw new ArgumentOutOfRangeException(nameof(start), start, "Start must be non-negative.");
-        if (size is <= 0 or > MaxPageSize)
-            throw new ArgumentOutOfRangeException(nameof(size), size, $"Size must be between 1 and {MaxPageSize}.");
-
-        var windowOptions = new QueryOptions(
-            options?.Order ?? QueryOptions.Default.Order,
-            options?.Exemplar,
-            size,
-            start,
-            options?.Filter
-        );
-        var entries = new List<Entry>();
-        await foreach (var entry in GetEntries(EntrySearchPredicate(query), windowOptions, query))
-        {
-            entries.Add(entry);
-        }
-        return new EntryWindowResponse(entries, start);
-    }
-
-    public Task<int> GetEntryIndex(Guid entryId, string? query = null, QueryOptions? options = null)
-    {
-        options ??= QueryOptions.Default;
         var predicate = EntrySearchPredicate(query);
         var entries = GetLexEntries(predicate, options);
-        entries = ApplySorting(options, entries, query);
+        entries = ApplySorting(options?.Order ?? SortOptions.Default, entries, query);
 
         var rowIndex = 0;
         foreach (var entry in entries)
diff --git a/backend/FwLite/FwLiteShared/Services/MiniLcmJsInvokable.cs b/backend/FwLite/FwLiteShared/Services/MiniLcmJsInvokable.cs
index 84fbc6b42f..48a6967d98 100644
--- a/backend/FwLite/FwLiteShared/Services/MiniLcmJsInvokable.cs
+++ b/backend/FwLite/FwLiteShared/Services/MiniLcmJsInvokable.cs
@@ -96,7 +96,7 @@ public Task<int> CountEntries(string? query, FilterQueryOptions? options)
     }
 
     [JSInvokable]
-    public Task<int> GetEntryIndex(Guid id, string? query, QueryOptions? options)
+    public Task<int> GetEntryIndex(Guid id, string? query, IndexQueryOptions? options)
     {
         return Task.Run(() => _wrappedApi.GetEntryIndex(id, query, options));
     }
diff --git a/backend/FwLite/FwLiteShared/TypeGen/ReinforcedFwLiteTypingConfig.cs b/backend/FwLite/FwLiteShared/TypeGen/ReinforcedFwLiteTypingConfig.cs
index 960ef578fe..a76647607c 100644
--- a/backend/FwLite/FwLiteShared/TypeGen/ReinforcedFwLiteTypingConfig.cs
+++ b/backend/FwLite/FwLiteShared/TypeGen/ReinforcedFwLiteTypingConfig.cs
@@ -119,6 +119,7 @@ private static void ConfigureMiniLcmTypes(ConfigurationBuilder builder)
         builder.ExportAsInterfaces([
                 typeof(QueryOptions),
                 typeof(FilterQueryOptions),
+                typeof(IndexQueryOptions),
                 typeof(SortOptions),
                 typeof(ExemplarOptions),
                 typeof(EntryFilter),
diff --git a/backend/FwLite/FwLiteWeb/Routes/MiniLcmRoutes.cs b/backend/FwLite/FwLiteWeb/Routes/MiniLcmRoutes.cs
index faaeb3a9a4..272bd07908 100644
--- a/backend/FwLite/FwLiteWeb/Routes/MiniLcmRoutes.cs
+++ b/backend/FwLite/FwLiteWeb/Routes/MiniLcmRoutes.cs
@@ -97,7 +97,6 @@ await projectProvider.OpenProject(project, context.HttpContext.RequestServices)
 
         api.MapGet("/writingSystems", MiniLcm.GetWritingSystems);
         api.MapGet("/entries", MiniLcm.GetEntries);
-        api.MapGet("/entries/window", MiniLcm.GetEntriesWindow);
         api.MapGet("/entries/{search}", MiniLcm.SearchEntries);
         api.MapGet("/entry/{id:Guid}", MiniLcm.GetEntry);
         api.MapGet("/entry/{id:Guid}/index", MiniLcm.GetEntryIndex);
@@ -139,23 +138,13 @@ public static IAsyncEnumerable<Entry> SearchEntries([FromServices] MiniLcmHolder
             return api.GetEntry(id);
         }
 
-        public static Task<EntryWindowResponse> GetEntriesWindow(
-            [FromQuery] int start,
-            [FromQuery] int size,
-            [AsParameters] MiniLcmQueryOptions options,
-            [FromServices] MiniLcmHolder holder)
-        {
-            var api = holder.MiniLcmApi;
-            return api.GetEntriesWindow(start, size, null, options.ToQueryOptions());
-        }
-
         public static Task<int> GetEntryIndex(
             Guid id,
             [AsParameters] MiniLcmQueryOptions options,
             [FromServices] MiniLcmHolder holder)
         {
             var api = holder.MiniLcmApi;
-            return api.GetEntryIndex(id, null, options.ToQueryOptions());
+            return api.GetEntryIndex(id, null, options.ToIndexQueryOptions());
         }
 
         public static IAsyncEnumerable<PartOfSpeech> GetPartsOfSpeech([FromServices] MiniLcmHolder holder)
@@ -206,6 +195,19 @@ public QueryOptions ToQueryOptions()
                 string.IsNullOrEmpty(GridifyFilter) ? null : new EntryFilter {GridifyFilter = GridifyFilter});
         }
 
+        public IndexQueryOptions ToIndexQueryOptions()
+        {
+            ExemplarOptions? exemplarOptions = string.IsNullOrEmpty(ExemplarValue) || ExemplarWritingSystem is null
+                ? null
+                : new(ExemplarValue, ExemplarWritingSystem);
+            var sortField = SortField ?? SortOptions.Default.Field;
+            return new IndexQueryOptions(new SortOptions(sortField,
+                    SortWritingSystem ?? SortOptions.Default.WritingSystem,
+                    Ascending ?? SortOptions.Default.Ascending),
+                exemplarOptions,
+                string.IsNullOrEmpty(GridifyFilter) ? null : new EntryFilter {GridifyFilter = GridifyFilter});
+        }
+
         public SortField? SortField { get; set; } = SortOptions.Default.Field;
 
         [DefaultValue(SortOptions.DefaultWritingSystem)]
diff --git a/backend/FwLite/LcmCrdt.Tests/MiniLcmTests/EntryWindowTests.cs b/backend/FwLite/LcmCrdt.Tests/MiniLcmTests/EntryIndexTests.cs
similarity index 87%
rename from backend/FwLite/LcmCrdt.Tests/MiniLcmTests/EntryWindowTests.cs
rename to backend/FwLite/LcmCrdt.Tests/MiniLcmTests/EntryIndexTests.cs
index aec1176b19..d7badf3995 100644
--- a/backend/FwLite/LcmCrdt.Tests/MiniLcmTests/EntryWindowTests.cs
+++ b/backend/FwLite/LcmCrdt.Tests/MiniLcmTests/EntryIndexTests.cs
@@ -2,7 +2,7 @@
 
 namespace LcmCrdt.Tests.MiniLcmTests;
 
-public class EntryWindowTests(ITestOutputHelper output) : EntryWindowTestsBase
+public class EntryIndexTests(ITestOutputHelper output) : EntryIndexTestsBase
 {
     private readonly MiniLcmApiFixture _fixture = new();
 
diff --git a/backend/FwLite/LcmCrdt/CrdtMiniLcmApi.cs b/backend/FwLite/LcmCrdt/CrdtMiniLcmApi.cs
index 24914b7f32..2c80826f03 100644
--- a/backend/FwLite/LcmCrdt/CrdtMiniLcmApi.cs
+++ b/backend/FwLite/LcmCrdt/CrdtMiniLcmApi.cs
@@ -405,25 +405,7 @@ public async IAsyncEnumerable<Entry> SearchEntries(string? query, QueryOptions?
         return await repo.GetEntry(id);
     }
 
-    public async Task<EntryWindowResponse> GetEntriesWindow(int start, int size, string? query = null, QueryOptions? options = null)
-    {
-        await using var repo = await repoFactory.CreateRepoAsync();
-        var windowOptions = new QueryOptions(
-            options?.Order ?? QueryOptions.Default.Order,
-            options?.Exemplar,
-            size,
-            start,
-            options?.Filter
-        );
-        var entries = new List<Entry>();
-        await foreach (var entry in repo.GetEntries(query, windowOptions))
-        {
-            entries.Add(entry);
-        }
-        return new EntryWindowResponse(entries, start);
-    }
-
-    public async Task<int> GetEntryIndex(Guid entryId, string? query = null, QueryOptions? options = null)
+    public async Task<int> GetEntryIndex(Guid entryId, string? query = null, IndexQueryOptions? options = null)
     {
         await using var repo = await repoFactory.CreateRepoAsync();
         return await repo.GetEntryIndex(entryId, query, options);
diff --git a/backend/FwLite/LcmCrdt/Data/MiniLcmRepository.cs b/backend/FwLite/LcmCrdt/Data/MiniLcmRepository.cs
index 029f80b21e..964591273a 100644
--- a/backend/FwLite/LcmCrdt/Data/MiniLcmRepository.cs
+++ b/backend/FwLite/LcmCrdt/Data/MiniLcmRepository.cs
@@ -261,15 +261,23 @@ private ValueTask<IQueryable<Entry>> ApplySorting(IQueryable<Entry> queryable, Q
         return exampleSentence;
     }
 
-    public async Task<int> GetEntryIndex(Guid entryId, string? query = null, QueryOptions? options = null)
+    public async Task<int> GetEntryIndex(Guid entryId, string? query = null, IndexQueryOptions? options = null)
     {
         // This is a fallback implementation that's not optimal for large datasets,
         // but it works correctly. Ideally, we'd use ROW_NUMBER() window function with linq2db
         // for better performance on large entry lists. For now, we enumerate through sorted entries
         // and count until we find the target entry.
 
+        var queryOptions = new QueryOptions(
+            options?.Order ?? QueryOptions.Default.Order,
+            options?.Exemplar,
+            QueryOptions.QueryAll,
+            0,
+            options?.Filter
+        );
+
         var rowIndex = 0;
-        await foreach (var entry in GetEntries(query, options))
+        await foreach (var entry in GetEntries(query, queryOptions))
         {
             if (entry.Id == entryId)
             {
diff --git a/backend/FwLite/MiniLcm.Tests/EntryIndexTestsBase.cs b/backend/FwLite/MiniLcm.Tests/EntryIndexTestsBase.cs
new file mode 100644
index 0000000000..47f3e9f8b7
--- /dev/null
+++ b/backend/FwLite/MiniLcm.Tests/EntryIndexTestsBase.cs
@@ -0,0 +1,101 @@
+namespace MiniLcm.Tests;
+
+/// <summary>
+/// Tests for GetEntryIndex API.
+/// This API is critical for finding the position of an entry in a sorted/filtered list for virtual scrolling.
+/// </summary>
+public abstract class EntryIndexTestsBase : MiniLcmTestBase
+{
+    private readonly Guid appleId = Guid.NewGuid();
+    private readonly Guid bananaId = Guid.NewGuid();
+    private readonly Guid kiwiId = Guid.NewGuid();
+    private readonly Guid orangeId = Guid.NewGuid();
+    private readonly Guid peachId = Guid.NewGuid();
+
+    private const string Apple = "Apple";
+    private const string Banana = "Banana";
+    private const string Kiwi = "Kiwi";
+    private const string Orange = "Orange";
+    private const string Peach = "Peach";
+
+    protected async Task CreateStandardEntries()
+    {
+        await Api.CreateEntry(new Entry { Id = appleId, LexemeForm = { { "en", Apple } } });
+        await Api.CreateEntry(new Entry { Id = bananaId, LexemeForm = { { "en", Banana } } });
+        await Api.CreateEntry(new Entry { Id = kiwiId, LexemeForm = { { "en", Kiwi } } });
+        await Api.CreateEntry(new Entry { Id = orangeId, LexemeForm = { { "en", Orange } } });
+        await Api.CreateEntry(new Entry { Id = peachId, LexemeForm = { { "en", Peach } } });
+    }
+
+    [Fact]
+    public async Task GetEntryIndex_FirstEntry_ReturnsZero()
+    {
+        await CreateStandardEntries();
+        var result = await Api.GetEntryIndex(appleId);
+
+        result.Should().Be(0);
+    }
+
+    [Fact]
+    public async Task GetEntryIndex_MiddleEntry_ReturnsCorrectIndex()
+    {
+        await CreateStandardEntries();
+        var result = await Api.GetEntryIndex(kiwiId);
+
+        result.Should().Be(2);
+    }
+
+    [Fact]
+    public async Task GetEntryIndex_LastEntry_ReturnsLastIndex()
+    {
+        await CreateStandardEntries();
+        var result = await Api.GetEntryIndex(peachId);
+
+        result.Should().Be(4);
+    }
+
+    [Fact]
+    public async Task GetEntryIndex_NonExistentEntry_ReturnsNegativeOne()
+    {
+        await CreateStandardEntries();
+        var nonExistentId = Guid.NewGuid();
+
+        var result = await Api.GetEntryIndex(nonExistentId);
+
+        result.Should().Be(-1);
+    }
+
+    [Fact]
+    public async Task GetEntryIndex_WithCustomSort_ReturnsCorrectIndex()
+    {
+        await CreateStandardEntries();
+
+        // Sort descending
+        var options = new IndexQueryOptions(new SortOptions(SortField.Headword, "en", false));
+
+        // Order: Peach, Orange, Kiwi, Banana, Apple
+        (await Api.GetEntryIndex(peachId, null, options)).Should().Be(0);
+        (await Api.GetEntryIndex(orangeId, null, options)).Should().Be(1);
+        (await Api.GetEntryIndex(kiwiId, null, options)).Should().Be(2);
+        (await Api.GetEntryIndex(bananaId, null, options)).Should().Be(3);
+        (await Api.GetEntryIndex(appleId, null, options)).Should().Be(4);
+    }
+
+    [Fact]
+    public async Task GetEntryIndex_LargeList_ReturnsCorrectIndex()
+    {
+        var entryIds = new List<Guid>();
+        for (var i = 0; i < 1005; i++)
+        {
+            var id = Guid.NewGuid();
+            entryIds.Add(id);
+            // Ensure deterministic sort (e.g., Entry 0000, 0001, ...)
+            await Api.CreateEntry(new Entry { Id = id, LexemeForm = { { "en", $"Entry {i:D4}" } } });
+        }
+
+        (await Api.GetEntryIndex(entryIds[0])).Should().Be(0);
+        (await Api.GetEntryIndex(entryIds[500])).Should().Be(500);
+        (await Api.GetEntryIndex(entryIds[1000])).Should().Be(1000);
+        (await Api.GetEntryIndex(entryIds[1004])).Should().Be(1004);
+    }
+}
diff --git a/backend/FwLite/MiniLcm.Tests/EntryWindowTestsBase.cs b/backend/FwLite/MiniLcm.Tests/EntryWindowTestsBase.cs
deleted file mode 100644
index 3f463c23a3..0000000000
--- a/backend/FwLite/MiniLcm.Tests/EntryWindowTestsBase.cs
+++ /dev/null
@@ -1,185 +0,0 @@
-using MiniLcm.Exceptions;
-
-namespace MiniLcm.Tests;
-
-/// <summary>
-/// Tests for GetEntriesWindow and GetEntryIndex APIs.
-/// These APIs are critical for chunk-based virtual scrolling.
-/// </summary>
-public abstract class EntryWindowTestsBase : MiniLcmTestBase
-{
-    private readonly Guid appleId = Guid.NewGuid();
-    private readonly Guid bananaId = Guid.NewGuid();
-    private readonly Guid kiwiId = Guid.NewGuid();
-    private readonly Guid orangeId = Guid.NewGuid();
-    private readonly Guid peachId = Guid.NewGuid();
-
-    private const string Apple = "Apple";
-    private const string Banana = "Banana";
-    private const string Kiwi = "Kiwi";
-    private const string Orange = "Orange";
-    private const string Peach = "Peach";
-
-    public override async Task InitializeAsync()
-    {
-        await base.InitializeAsync();
-        // Create entries in non-alphabetical order to test sorting
-        await Api.CreateEntry(new Entry { Id = orangeId, LexemeForm = { { "en", Orange } } });
-        await Api.CreateEntry(new Entry { Id = appleId, LexemeForm = { { "en", Apple } } });
-        await Api.CreateEntry(new Entry { Id = kiwiId, LexemeForm = { { "en", Kiwi } } });
-        await Api.CreateEntry(new Entry { Id = bananaId, LexemeForm = { { "en", Banana } } });
-        await Api.CreateEntry(new Entry { Id = peachId, LexemeForm = { { "en", Peach } } });
-    }
-
-    [Fact]
-    public async Task GetEntriesWindow_FirstWindow_ReturnsFirstChunk()
-    {
-        var result = await Api.GetEntriesWindow(0, 2);
-
-        result.FirstIndex.Should().Be(0);
-        result.Entries.Should().HaveCount(2);
-        // Entries should be sorted alphabetically by headword
-        result.Entries[0].LexemeForm["en"].Should().Be(Apple);
-        result.Entries[1].LexemeForm["en"].Should().Be(Banana);
-    }
-
-    [Fact]
-    public async Task GetEntriesWindow_SecondWindow_ReturnsSecondChunk()
-    {
-        var result = await Api.GetEntriesWindow(2, 2);
-
-        result.FirstIndex.Should().Be(2);
-        result.Entries.Should().HaveCount(2);
-        result.Entries[0].LexemeForm["en"].Should().Be(Kiwi);
-        result.Entries[1].LexemeForm["en"].Should().Be(Orange);
-    }
-
-    [Fact]
-    public async Task GetEntriesWindow_PartialLastWindow_ReturnsRemainingEntries()
-    {
-        var result = await Api.GetEntriesWindow(4, 2);
-
-        result.FirstIndex.Should().Be(4);
-        result.Entries.Should().HaveCount(1);
-        result.Entries[0].LexemeForm["en"].Should().Be(Peach);
-    }
-
-    [Fact]
-    public async Task GetEntriesWindow_EmptyWindow_ReturnsEmptyList()
-    {
-        var result = await Api.GetEntriesWindow(10, 2);
-
-        result.FirstIndex.Should().Be(10);
-        result.Entries.Should().BeEmpty();
-    }
-
-    [Fact]
-    public async Task GetEntriesWindow_WindowSizeOfOne_WorksCorrectly()
-    {
-        var result = await Api.GetEntriesWindow(1, 1);
-
-        result.FirstIndex.Should().Be(1);
-        result.Entries.Should().HaveCount(1);
-        result.Entries[0].LexemeForm["en"].Should().Be(Banana);
-    }
-
-    [Fact]
-    public async Task GetEntriesWindow_LargeWindow_ReturnsBiggerChunk()
-    {
-        var result = await Api.GetEntriesWindow(0, 10);
-
-        result.FirstIndex.Should().Be(0);
-        result.Entries.Should().HaveCount(5);
-        // Verify all entries are present in alphabetical order
-        result.Entries.Select(e => e.LexemeForm["en"])
-            .Should().ContainInOrder(Apple, Banana, Kiwi, Orange, Peach);
-    }
-
-    [Fact]
-    public async Task GetEntryIndex_FirstEntry_ReturnsZero()
-    {
-        var result = await Api.GetEntryIndex(appleId);
-
-        result.Should().Be(0);
-    }
-
-    [Fact]
-    public async Task GetEntryIndex_MiddleEntry_ReturnsCorrectIndex()
-    {
-        var result = await Api.GetEntryIndex(kiwiId);
-
-        result.Should().Be(2);
-    }
-
-    [Fact]
-    public async Task GetEntryIndex_LastEntry_ReturnsLastIndex()
-    {
-        var result = await Api.GetEntryIndex(peachId);
-
-        result.Should().Be(4);
-    }
-
-    [Fact]
-    public async Task GetEntryIndex_NonExistentEntry_ReturnsNegativeOne()
-    {
-        var nonExistentId = Guid.NewGuid();
-
-        var result = await Api.GetEntryIndex(nonExistentId);
-
-        result.Should().Be(-1);
-    }
-
-    [Fact]
-    public async Task GetEntriesWindow_WithOffset_SkipsEntries()
-    {
-        var result = await Api.GetEntriesWindow(1, 3);
-
-        result.FirstIndex.Should().Be(1);
-        result.Entries.Should().HaveCount(3);
-        result.Entries.Select(e => e.LexemeForm["en"])
-            .Should().ContainInOrder(Banana, Kiwi, Orange);
-    }
-
-    [Fact]
-    public async Task GetEntriesWindow_ReturnedEntriesAreComplete()
-    {
-        var result = await Api.GetEntriesWindow(0, 1);
-
-        result.Entries.Should().HaveCount(1);
-        var entry = result.Entries[0];
-        entry.Id.Should().NotBe(Guid.Empty);
-        entry.LexemeForm.Should().NotBeNull();
-        entry.Senses.Should().NotBeNull();
-    }
-
-    [Fact]
-    public async Task GetEntriesWindow_MultipleCallsCoverAllEntries()
-    {
-        // Simulate chunking through all entries
-        var window1 = await Api.GetEntriesWindow(0, 2);
-        var window2 = await Api.GetEntriesWindow(2, 2);
-        var window3 = await Api.GetEntriesWindow(4, 2);
-
-        var allHeadwords = new List<string>();
-        allHeadwords.AddRange(window1.Entries.Select(e => e.LexemeForm["en"]));
-        allHeadwords.AddRange(window2.Entries.Select(e => e.LexemeForm["en"]));
-        allHeadwords.AddRange(window3.Entries.Select(e => e.LexemeForm["en"]));
-
-        allHeadwords.Should().BeEquivalentTo(Apple, Banana, Kiwi, Orange, Peach);
-    }
-
-    [Fact]
-    public async Task GetEntryIndex_CanPositionWindow()
-    {
-        // Get index for an entry
-        var rowIndex = await Api.GetEntryIndex(kiwiId);
-
-        // Use it to fetch a window around that entry
-        var windowResult = await Api.GetEntriesWindow(rowIndex, 2);
-
-        windowResult.FirstIndex.Should().Be(2);
-        windowResult.Entries.Should().HaveCount(2);
-        windowResult.Entries[0].Id.Should().Be(kiwiId);
-        windowResult.Entries[1].LexemeForm["en"].Should().Be(Orange);
-    }
-}
diff --git a/backend/FwLite/MiniLcm/IMiniLcmReadApi.cs b/backend/FwLite/MiniLcm/IMiniLcmReadApi.cs
index 23c87b0d84..db89753c37 100644
--- a/backend/FwLite/MiniLcm/IMiniLcmReadApi.cs
+++ b/backend/FwLite/MiniLcm/IMiniLcmReadApi.cs
@@ -27,12 +27,11 @@ public interface IMiniLcmReadApi
     Task<Publication?> GetPublication(Guid id);
     Task<SemanticDomain?> GetSemanticDomain(Guid id);
     Task<ExampleSentence?> GetExampleSentence(Guid entryId, Guid senseId, Guid id);
-    Task<EntryWindowResponse> GetEntriesWindow(int start, int size, string? query = null, QueryOptions? options = null);
     /// <summary>
     /// Get the index of an entry within the sorted/filtered entry list.
     /// Returns -1 if the entry is not found.
     /// </summary>
-    Task<int> GetEntryIndex(Guid entryId, string? query = null, QueryOptions? options = null);
+    Task<int> GetEntryIndex(Guid entryId, string? query = null, IndexQueryOptions? options = null);
 
     Task<ReadFileResponse> GetFileStream(MediaUri mediaUri)
     {
@@ -40,20 +39,26 @@ Task<ReadFileResponse> GetFileStream(MediaUri mediaUri)
     }
 }
 
-public record EntryWindowResponse(
-    IReadOnlyList<Entry> Entries,
-    int FirstIndex)
+public record IndexQueryOptions(
+    SortOptions? Order = null,
+    ExemplarOptions? Exemplar = null,
+    EntryFilter? Filter = null) : FilterQueryOptions(Exemplar, Filter)
 {
-}
-
+    public static new IndexQueryOptions Default { get; } = new();
+    public SortOptions Order { get; init; } = Order ?? SortOptions.Default;
 
+    public override IndexQueryOptions Normalized(NormalizationForm form)
+    {
+        return new(Order, Exemplar?.Normalized(form), Filter?.Normalized(form));
+    }
+}
 
 public record FilterQueryOptions(
     ExemplarOptions? Exemplar = null,
     EntryFilter? Filter = null)
 {
     public static FilterQueryOptions Default { get; } = new();
-    public bool HasFilter => Filter is {GridifyFilter.Length: > 0 } || Exemplar is {Value.Length: > 0};
+    public bool HasFilter => Filter is { GridifyFilter.Length: > 0 } || Exemplar is { Value.Length: > 0 };
     public virtual FilterQueryOptions Normalized(NormalizationForm form)
     {
         return new(Exemplar?.Normalized(form), Filter?.Normalized(form));
@@ -95,26 +100,12 @@ public IQueryable<T> ApplyPaging<T>(IQueryable<T> queryable)
 
     public IOrderedEnumerable<T> ApplyOrder<T, TKey>(IEnumerable<T> enumerable, Func<T, TKey> orderFunc)
     {
-        if (Order.Ascending)
-        {
-            return enumerable.OrderBy(orderFunc);
-        }
-        else
-        {
-            return enumerable.OrderByDescending(orderFunc);
-        }
+        return Order.ApplyOrder(enumerable, orderFunc);
     }
 
     public IOrderedQueryable<T> ApplyOrder<T, TKey>(IQueryable<T> enumerable, Expression<Func<T, TKey>> orderFunc)
     {
-        if (Order.Ascending)
-        {
-            return enumerable.OrderBy(orderFunc);
-        }
-        else
-        {
-            return enumerable.OrderByDescending(orderFunc);
-        }
+        return Order.ApplyOrder(enumerable, orderFunc);
     }
 }
 
@@ -122,6 +113,16 @@ public record SortOptions(SortField Field, WritingSystemId WritingSystem = defau
 {
     public const string DefaultWritingSystem = "default";
     public static SortOptions Default { get; } = new(SortField.Headword, DefaultWritingSystem);
+
+    public IOrderedEnumerable<T> ApplyOrder<T, TKey>(IEnumerable<T> enumerable, Func<T, TKey> orderFunc)
+    {
+        return Ascending ? enumerable.OrderBy(orderFunc) : enumerable.OrderByDescending(orderFunc);
+    }
+
+    public IOrderedQueryable<T> ApplyOrder<T, TKey>(IQueryable<T> enumerable, Expression<Func<T, TKey>> orderFunc)
+    {
+        return Ascending ? enumerable.OrderBy(orderFunc) : enumerable.OrderByDescending(orderFunc);
+    }
 }
 
 public record ExemplarOptions(string Value, WritingSystemId WritingSystem)
diff --git a/backend/FwLite/MiniLcm/Normalization/MiniLcmApiStringNormalizationWrapper.cs b/backend/FwLite/MiniLcm/Normalization/MiniLcmApiStringNormalizationWrapper.cs
index 1204dc2a11..ea756ef69d 100644
--- a/backend/FwLite/MiniLcm/Normalization/MiniLcmApiStringNormalizationWrapper.cs
+++ b/backend/FwLite/MiniLcm/Normalization/MiniLcmApiStringNormalizationWrapper.cs
@@ -39,6 +39,11 @@ public IAsyncEnumerable<Entry> GetEntries(QueryOptions? options = null)
         return _api.GetEntries(options?.Normalized(Form));
     }
 
+    public Task<int> GetEntryIndex(Guid entryId, string? query = null, IndexQueryOptions? options = null)
+    {
+        return _api.GetEntryIndex(entryId, query?.Normalize(Form), options?.Normalized(Form));
+    }
+
     void IDisposable.Dispose()
     {
     }
diff --git a/backend/LfClassicData/LfClassicMiniLcmApi.cs b/backend/LfClassicData/LfClassicMiniLcmApi.cs
index 59427c5889..1b961a15e9 100644
--- a/backend/LfClassicData/LfClassicMiniLcmApi.cs
+++ b/backend/LfClassicData/LfClassicMiniLcmApi.cs
@@ -425,12 +425,7 @@ private static SemanticDomain ToSemanticDomain(Entities.OptionListItem item)
         return ToExampleSentence(sense.Guid, exampleSentence);
     }
 
-    public async Task<EntryWindowResponse> GetEntriesWindow(int start, int size, string? query = null, QueryOptions? options = null)
-    {
-        throw new NotImplementedException();
-    }
-
-    public Task<int> GetEntryIndex(Guid entryId, string? query = null, QueryOptions? options = null)
+    public Task<int> GetEntryIndex(Guid entryId, string? query = null, IndexQueryOptions? options = null)
     {
         throw new NotImplementedException();
     }
diff --git a/frontend/viewer/src/lib/dotnet-types/generated-types/FwLiteShared/Services/IMiniLcmJsInvokable.ts b/frontend/viewer/src/lib/dotnet-types/generated-types/FwLiteShared/Services/IMiniLcmJsInvokable.ts
index 2503be62b9..01e9b7e597 100644
--- a/frontend/viewer/src/lib/dotnet-types/generated-types/FwLiteShared/Services/IMiniLcmJsInvokable.ts
+++ b/frontend/viewer/src/lib/dotnet-types/generated-types/FwLiteShared/Services/IMiniLcmJsInvokable.ts
@@ -10,8 +10,9 @@ import type {IPublication} from '../../MiniLcm/Models/IPublication';
 import type {ISemanticDomain} from '../../MiniLcm/Models/ISemanticDomain';
 import type {IComplexFormType} from '../../MiniLcm/Models/IComplexFormType';
 import type {IFilterQueryOptions} from '../../MiniLcm/IFilterQueryOptions';
-import type {IQueryOptions} from '../../MiniLcm/IQueryOptions';
+import type {IIndexQueryOptions} from '../../MiniLcm/IIndexQueryOptions';
 import type {IEntry} from '../../MiniLcm/Models/IEntry';
+import type {IQueryOptions} from '../../MiniLcm/IQueryOptions';
 import type {IWritingSystem} from '../../MiniLcm/Models/IWritingSystem';
 import type {WritingSystemType} from '../../MiniLcm/Models/WritingSystemType';
 import type {IComplexFormComponent} from '../../MiniLcm/Models/IComplexFormComponent';
@@ -31,7 +32,7 @@ export interface IMiniLcmJsInvokable
 	getComplexFormTypes() : Promise<IComplexFormType[]>;
 	getComplexFormType(id: string) : Promise<IComplexFormType | null>;
 	countEntries(query?: string, options?: IFilterQueryOptions) : Promise<number>;
-	getEntryIndex(id: string, query?: string, options?: IQueryOptions) : Promise<number>;
+	getEntryIndex(id: string, query?: string, options?: IIndexQueryOptions) : Promise<number>;
 	getEntries(options?: IQueryOptions) : Promise<IEntry[]>;
 	searchEntries(query: string, options?: IQueryOptions) : Promise<IEntry[]>;
 	getEntry(id: string) : Promise<IEntry | null>;
diff --git a/frontend/viewer/src/lib/dotnet-types/generated-types/MiniLcm/IIndexQueryOptions.ts b/frontend/viewer/src/lib/dotnet-types/generated-types/MiniLcm/IIndexQueryOptions.ts
new file mode 100644
index 0000000000..0495a44949
--- /dev/null
+++ b/frontend/viewer/src/lib/dotnet-types/generated-types/MiniLcm/IIndexQueryOptions.ts
@@ -0,0 +1,13 @@
+/* eslint-disable */
+//     This code was generated by a Reinforced.Typings tool.
+//     Changes to this file may cause incorrect behavior and will be lost if
+//     the code is regenerated.
+
+import type {IFilterQueryOptions} from './IFilterQueryOptions';
+import type {ISortOptions} from './ISortOptions';
+
+export interface IIndexQueryOptions extends IFilterQueryOptions
+{
+	order: ISortOptions;
+}
+/* eslint-enable */
diff --git a/frontend/viewer/src/lib/dotnet-types/index.ts b/frontend/viewer/src/lib/dotnet-types/index.ts
index 0397c69a56..8d1f16b7a4 100644
--- a/frontend/viewer/src/lib/dotnet-types/index.ts
+++ b/frontend/viewer/src/lib/dotnet-types/index.ts
@@ -29,6 +29,7 @@ export * from './generated-types/MiniLcm/ICountQueryOptions';
 export * from './generated-types/MiniLcm/IExemplarOptions';
 export * from './generated-types/MiniLcm/IFilterQueryOptions';
 export * from './generated-types/MiniLcm/IQueryOptions';
+export * from './generated-types/MiniLcm/IIndexQueryOptions';
 export * from './generated-types/MiniLcm/ISortOptions';
 export * from './generated-types/MiniLcm/SortField';
 export * from './generated-types/LexCore/Sync';
diff --git a/frontend/viewer/src/project/demo/in-memory-demo-api.ts b/frontend/viewer/src/project/demo/in-memory-demo-api.ts
index 323842ec1c..542d7bfeb6 100644
--- a/frontend/viewer/src/project/demo/in-memory-demo-api.ts
+++ b/frontend/viewer/src/project/demo/in-memory-demo-api.ts
@@ -7,6 +7,7 @@ import {
   type IEntry,
   type IExampleSentence,
   type IFilterQueryOptions,
+  type IIndexQueryOptions,
   type IMiniLcmJsInvokable,
   type IPartOfSpeech,
   type IProjectModel,
@@ -101,7 +102,7 @@ export class InMemoryDemoApi implements IMiniLcmJsInvokable {
     return Promise.resolve(entries.length);
   }
 
-  async getEntryIndex(entryId: string, query?: string, options?: IFilterQueryOptions): Promise<number> {
+  async getEntryIndex(entryId: string, query?: string, options?: IIndexQueryOptions): Promise<number> {
     await delay(100);
     const entries = this.getFilteredSortedEntries(query, options);
     return entries.findIndex(e => e.id === entryId);

From 2f969cb92704f8bc0a6064f82a940099b3d5a7bb Mon Sep 17 00:00:00 2001
From: Tim Haasdyk <tim_haasdyk@sil.org>
Date: Thu, 22 Jan 2026 15:07:38 +0100
Subject: [PATCH 31/42] Fix scroll flag

---
 frontend/viewer/src/project/browse/EntriesList.svelte | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/frontend/viewer/src/project/browse/EntriesList.svelte b/frontend/viewer/src/project/browse/EntriesList.svelte
index 65212c02b8..a0fe4e6bf3 100644
--- a/frontend/viewer/src/project/browse/EntriesList.svelte
+++ b/frontend/viewer/src/project/browse/EntriesList.svelte
@@ -141,9 +141,8 @@
     if (itemStart < visibleStart || itemEnd > visibleEnd) {
       //using smooth scroll caused lag, maybe only do it if scrolling a short distance?
       vList.scrollToIndex(index, { align: 'center' });
-      return true;
     }
-    return false;
+    return true;
   }
 
   export async function selectNextEntry(): Promise<IEntry | undefined> {

From ee00c877ae4b186630b672642e45c6ec81e4951b Mon Sep 17 00:00:00 2001
From: Tim Haasdyk <tim_haasdyk@sil.org>
Date: Thu, 22 Jan 2026 15:08:27 +0100
Subject: [PATCH 32/42] Fix tests

---
 frontend/viewer/tests/entries-list-v2.test.ts |  2 +-
 frontend/viewer/tests/entries-list.test.ts    | 27 -------------------
 2 files changed, 1 insertion(+), 28 deletions(-)

diff --git a/frontend/viewer/tests/entries-list-v2.test.ts b/frontend/viewer/tests/entries-list-v2.test.ts
index 8e0f8de497..c5b4d003d2 100644
--- a/frontend/viewer/tests/entries-list-v2.test.ts
+++ b/frontend/viewer/tests/entries-list-v2.test.ts
@@ -160,7 +160,7 @@ test.describe('EntriesList V2 features', () => {
 
       // The selected entry should be visible (scrolled into view)
       const {selectedEntry} = getLocators(page);
-      await expect(selectedEntry).toBeVisible({timeout: 10000});
+      await expect(selectedEntry).toBeVisible({timeout: 5000});
       await expect(selectedEntry).toContainText(selectedText!.slice(0, 20));
     });
 
diff --git a/frontend/viewer/tests/entries-list.test.ts b/frontend/viewer/tests/entries-list.test.ts
index 4a683bfc9d..4e4e46ebb6 100644
--- a/frontend/viewer/tests/entries-list.test.ts
+++ b/frontend/viewer/tests/entries-list.test.ts
@@ -110,33 +110,6 @@ test.describe('EntriesList lazy loading', () => {
 
     await expect(entryRows.first()).not.toHaveAttribute('data-skeleton');
   });
-
-  test('scroll to specific entry maintains entry visibility', async ({page}) => {
-    const {vlist, entryRows} = getLocators(page);
-
-    const firstEntry = entryRows.first();
-    await firstEntry.click();
-    const selectedText = await firstEntry.textContent();
-
-    await vlist.evaluate((el) => {
-      el.scrollTop = 2000;
-    });
-
-    await page.waitForTimeout(300);
-
-    const scrollTop = await vlist.evaluate((el) => el.scrollTop);
-    expect(scrollTop).toBeGreaterThan(1850);
-
-    // Scroll back to top
-    await vlist.evaluate((el) => {
-      el.scrollTop = 0;
-    });
-
-    await page.waitForTimeout(500);
-
-    const firstEntryAfter = entryRows.first();
-    await expect(firstEntryAfter).toContainText(selectedText?.slice(0, 10) || '');
-  });
 });
 
 async function waitForProjectViewReady(page: Page) {

From 9ecc9681fbb2f9b9477ea8c54ed597cc352c017d Mon Sep 17 00:00:00 2001
From: Tim Haasdyk <tim_haasdyk@sil.org>
Date: Thu, 22 Jan 2026 15:12:42 +0100
Subject: [PATCH 33/42] Remove entry version tracking - generation is enough

---
 .../services/entry-loader-service.svelte.ts   | 19 -------------------
 .../src/project/browse/EntriesList.svelte     |  4 +---
 2 files changed, 1 insertion(+), 22 deletions(-)

diff --git a/frontend/viewer/src/lib/services/entry-loader-service.svelte.ts b/frontend/viewer/src/lib/services/entry-loader-service.svelte.ts
index b3f288813d..b88a115c4e 100644
--- a/frontend/viewer/src/lib/services/entry-loader-service.svelte.ts
+++ b/frontend/viewer/src/lib/services/entry-loader-service.svelte.ts
@@ -22,7 +22,6 @@ export interface EntryLoaderDeps {
 export class EntryLoaderService {
 
   static readonly DEFAULT_GENERATION: number = 0;
-  static readonly DEFAULT_VERSION: number = 0;
 
   // Reactive state
   totalCount = $state<number | undefined>();
@@ -31,7 +30,6 @@ export class EntryLoaderService {
 
   // Cache (private)
   #entryCache = new SvelteMap<number, IEntry>();
-  #entryVersions = new SvelteMap<number, number>();
   #idToIndex = new SvelteMap<string, number>();
   #pendingBatches = new SvelteMap<number, Promise<IEntry[]>>();
   #loadedBatches = new SvelteSet<number>();
@@ -134,14 +132,6 @@ export class EntryLoaderService {
     }
   }
 
-  /**
-   * Get the version of an entry by index.
-   * Increments whenever the entry is updated in-place.
-   */
-  getVersion(index: number): number {
-    return this.#entryVersions.get(index) ?? EntryLoaderService.DEFAULT_VERSION;
-  }
-
   /**
    * Get the current generation of the loader.
    * Increments whenever the loader is reset (search/sort/filter changes).
@@ -193,7 +183,6 @@ export class EntryLoaderService {
   async reset(): Promise<void> {
     await this.loadInitialCount();
     this.#entryCache.clear();
-    this.#entryVersions.clear();
     this.#idToIndex.clear();
     this.#pendingBatches.clear();
     this.#loadedBatches.clear();
@@ -297,10 +286,6 @@ export class EntryLoaderService {
       const entry = entries[i];
       this.#entryCache.set(index, entry);
       this.#idToIndex.set(entry.id, index);
-      // Only set version if not already present or 0 (so we don't reset versions on reload)
-      if (!this.#entryVersions.get(index)) {
-        this.#entryVersions.set(index, 1);
-      }
     }
   }
 
@@ -376,10 +361,8 @@ export class EntryLoaderService {
   }
 
   #swapCachesForQuietReset(batches: number[], entries: IEntry[], newCount: number): void {
-    const oldVersions = new Map(this.#entryVersions);
     this.#entryCache.clear();
     this.#idToIndex.clear();
-    this.#entryVersions.clear();
     this.#pendingBatches.clear();
     this.#loadedBatches.clear();
 
@@ -389,8 +372,6 @@ export class EntryLoaderService {
       const entry = entries[i];
       this.#entryCache.set(index, entry);
       this.#idToIndex.set(entry.id, index);
-      const prevVersion = oldVersions.get(index) ?? 0;
-      this.#entryVersions.set(index, prevVersion + 1);
     }
 
     batches.forEach(batch => this.#loadedBatches.add(batch));
diff --git a/frontend/viewer/src/project/browse/EntriesList.svelte b/frontend/viewer/src/project/browse/EntriesList.svelte
index a0fe4e6bf3..c48aab7841 100644
--- a/frontend/viewer/src/project/browse/EntriesList.svelte
+++ b/frontend/viewer/src/project/browse/EntriesList.svelte
@@ -201,9 +201,7 @@
             getKey={(index: number) => `${entryLoader?.generation ?? EntryLoaderService.DEFAULT_GENERATION}-${index}`}
             bufferSize={400}>
         {#snippet children(index: number)}
-          {@const generation = entryLoader?.generation ?? EntryLoaderService.DEFAULT_GENERATION}
-          {@const version = entryLoader?.getVersion(index) ?? EntryLoaderService.DEFAULT_VERSION}
-          {#key `${generation}-${version}`}
+          {#key entryLoader?.generation ?? EntryLoaderService.DEFAULT_GENERATION}
             <Delayed
               getCached={() => entryLoader?.getCachedEntryByIndex(index)}
               load={() => entryLoader?.getOrLoadEntryByIndex(index)}

From cfcdbbd71bafc5e6c231b53f07ac7b25923aa77e Mon Sep 17 00:00:00 2001
From: Tim Haasdyk <tim_haasdyk@sil.org>
Date: Thu, 22 Jan 2026 15:41:29 +0100
Subject: [PATCH 34/42] Basic update event optimizations

---
 .../services/entry-loader-service.svelte.ts   | 46 ++++++++++++++++++-
 1 file changed, 45 insertions(+), 1 deletion(-)

diff --git a/frontend/viewer/src/lib/services/entry-loader-service.svelte.ts b/frontend/viewer/src/lib/services/entry-loader-service.svelte.ts
index b88a115c4e..7ab417ff6d 100644
--- a/frontend/viewer/src/lib/services/entry-loader-service.svelte.ts
+++ b/frontend/viewer/src/lib/services/entry-loader-service.svelte.ts
@@ -173,9 +173,53 @@ export class EntryLoaderService {
    * We handle both the same way: quiet reset.
    */
   async updateEntry(entry: IEntry): Promise<void> {
-    void entry; // entry is not used here by design
+    const generation = this.#generation;
+    if (await this.tryOptimizeUpdateEntryEvent(entry)) return;
+    if (generation !== this.#generation) return; // outdated event => abort
     await this.quietReset();
   }
+  
+  /**
+   * The more trivial and performant checks we can do to verify if the event is relevant 
+   * to our current state.
+   */
+  private async tryOptimizeUpdateEntryEvent(entry: IEntry): Promise<boolean> {
+    const cachedIndex = this.#idToIndex.get(entry.id);
+    if (cachedIndex !== undefined) {
+      // we've seen it locally, so it wasn't an add event
+      if (cachedIndex < 0) {
+        // not relevant for our current filter => ignore
+        return true;
+      }
+      const batchIndex = Math.floor(cachedIndex / this.batchSize);
+      if (!this.#loadedBatches.has(batchIndex)) {
+        // it's not new and we haven't loaded it yet => ignore
+        return true;
+      }
+    } else {
+      const entryIndex = await this.getOrLoadEntryIndex(entry.id);
+      if (entryIndex < 0) {
+        // not relevant for our current filter => ignore
+        return true;
+      }
+      const batchIndex = Math.floor(entryIndex / this.batchSize);
+      const maxLoadedBatch = Math.max(...this.#loadedBatches);
+      if (batchIndex > maxLoadedBatch) {
+        // it's beyond what we've loaded, so even if it's an add event it doesn't shift anything.
+        // However, the count might need to be incremented and checking that is more effort than it's worth here
+        // return true;
+      }
+      // It's non-trivial determining if this is an add event or not.
+      // We could e.g. query the current entry count and compare, but that's more effort than it's worth.
+    }
+
+    // Note: we could also:
+    // - swap individual entries in place
+    // - increment the count
+    // - shift batches
+    // but we're trying not to overcomplicate this.
+    return false;
+  }
 
   /**
    * Full reset: clear all cache and refetch count.

From b0417a431f834f772126badbd00b8c189f7a25f5 Mon Sep 17 00:00:00 2001
From: Tim Haasdyk <tim_haasdyk@sil.org>
Date: Fri, 23 Jan 2026 11:52:03 +0100
Subject: [PATCH 35/42] Optimize and test GetEntryIndex

---
 .../FwLite/LcmCrdt/Data/MiniLcmRepository.cs  | 44 +++++-----
 .../MiniLcm.Tests/EntryIndexTestsBase.cs      | 86 +++++++++++++++++--
 2 files changed, 100 insertions(+), 30 deletions(-)

diff --git a/backend/FwLite/LcmCrdt/Data/MiniLcmRepository.cs b/backend/FwLite/LcmCrdt/Data/MiniLcmRepository.cs
index 964591273a..602a2e4f1c 100644
--- a/backend/FwLite/LcmCrdt/Data/MiniLcmRepository.cs
+++ b/backend/FwLite/LcmCrdt/Data/MiniLcmRepository.cs
@@ -129,12 +129,8 @@ public async IAsyncEnumerable<Entry> GetEntries(
         string? query = null,
         QueryOptions? options = null)
     {
-        options = await EnsureWritingSystemIsPopulated(options ??= QueryOptions.Default);
-
-        var queryable = Entries;
-        (queryable, var sortingHandled) = await FilterEntries(queryable, query, options, options.Order);
-        if (!sortingHandled)
-            queryable = await ApplySorting(queryable, options, query);
+        IQueryable<Entry> queryable;
+        (queryable, options) = await FilterAndSortEntries(query, options ?? QueryOptions.Default);
 
         queryable = queryable
             .LoadWith(e => e.Senses)
@@ -156,6 +152,20 @@ public async IAsyncEnumerable<Entry> GetEntries(
         }
     }
 
+    private async Task<(IQueryable<Entry> queryable, QueryOptions options)> FilterAndSortEntries(
+        string? query,
+        QueryOptions options)
+    {
+        options = await EnsureWritingSystemIsPopulated(options);
+
+        var queryable = Entries;
+        var (filteredQuery, sortingHandled) = await FilterEntries(queryable, query, options, options.Order);
+        if (!sortingHandled)
+            filteredQuery = await ApplySorting(filteredQuery, options, query);
+
+        return (filteredQuery, options);
+    }
+
     private async Task<QueryOptions> EnsureWritingSystemIsPopulated(QueryOptions queryOptions)
     {
         if (queryOptions.Order.WritingSystem != default) return queryOptions;
@@ -263,11 +273,6 @@ private ValueTask<IQueryable<Entry>> ApplySorting(IQueryable<Entry> queryable, Q
 
     public async Task<int> GetEntryIndex(Guid entryId, string? query = null, IndexQueryOptions? options = null)
     {
-        // This is a fallback implementation that's not optimal for large datasets,
-        // but it works correctly. Ideally, we'd use ROW_NUMBER() window function with linq2db
-        // for better performance on large entry lists. For now, we enumerate through sorted entries
-        // and count until we find the target entry.
-
         var queryOptions = new QueryOptions(
             options?.Order ?? QueryOptions.Default.Order,
             options?.Exemplar,
@@ -276,17 +281,14 @@ public async Task<int> GetEntryIndex(Guid entryId, string? query = null, IndexQu
             options?.Filter
         );
 
-        var rowIndex = 0;
-        await foreach (var entry in GetEntries(query, queryOptions))
-        {
-            if (entry.Id == entryId)
-            {
-                return rowIndex;
-            }
-            rowIndex++;
-        }
+        IQueryable<Entry> queryable;
+        (queryable, queryOptions) = await FilterAndSortEntries(query, queryOptions);
 
-        return -1;
+        // SQLite's ROW_NUMBER() seems to require ORDER BY in the OVER clause - it cannot inherit from the query.
+        // (AI tried a billion things)
+        // This is efficient for virtual scrolling since we only select IDs, not full entities.
+        var sortedIds = await queryable.Select(e => e.Id).ToListAsyncLinqToDB();
+        return sortedIds.IndexOf(entryId);
     }
 
     public async Task<Publication?> GetPublication(Guid publicationId)
diff --git a/backend/FwLite/MiniLcm.Tests/EntryIndexTestsBase.cs b/backend/FwLite/MiniLcm.Tests/EntryIndexTestsBase.cs
index 47f3e9f8b7..e994947c65 100644
--- a/backend/FwLite/MiniLcm.Tests/EntryIndexTestsBase.cs
+++ b/backend/FwLite/MiniLcm.Tests/EntryIndexTestsBase.cs
@@ -1,3 +1,5 @@
+using MiniLcm.Filtering;
+
 namespace MiniLcm.Tests;
 
 /// <summary>
@@ -18,8 +20,9 @@ public abstract class EntryIndexTestsBase : MiniLcmTestBase
     private const string Orange = "Orange";
     private const string Peach = "Peach";
 
-    protected async Task CreateStandardEntries()
+    public override async Task InitializeAsync()
     {
+        await base.InitializeAsync();
         await Api.CreateEntry(new Entry { Id = appleId, LexemeForm = { { "en", Apple } } });
         await Api.CreateEntry(new Entry { Id = bananaId, LexemeForm = { { "en", Banana } } });
         await Api.CreateEntry(new Entry { Id = kiwiId, LexemeForm = { { "en", Kiwi } } });
@@ -30,7 +33,6 @@ protected async Task CreateStandardEntries()
     [Fact]
     public async Task GetEntryIndex_FirstEntry_ReturnsZero()
     {
-        await CreateStandardEntries();
         var result = await Api.GetEntryIndex(appleId);
 
         result.Should().Be(0);
@@ -39,7 +41,6 @@ public async Task GetEntryIndex_FirstEntry_ReturnsZero()
     [Fact]
     public async Task GetEntryIndex_MiddleEntry_ReturnsCorrectIndex()
     {
-        await CreateStandardEntries();
         var result = await Api.GetEntryIndex(kiwiId);
 
         result.Should().Be(2);
@@ -48,7 +49,6 @@ public async Task GetEntryIndex_MiddleEntry_ReturnsCorrectIndex()
     [Fact]
     public async Task GetEntryIndex_LastEntry_ReturnsLastIndex()
     {
-        await CreateStandardEntries();
         var result = await Api.GetEntryIndex(peachId);
 
         result.Should().Be(4);
@@ -57,7 +57,6 @@ public async Task GetEntryIndex_LastEntry_ReturnsLastIndex()
     [Fact]
     public async Task GetEntryIndex_NonExistentEntry_ReturnsNegativeOne()
     {
-        await CreateStandardEntries();
         var nonExistentId = Guid.NewGuid();
 
         var result = await Api.GetEntryIndex(nonExistentId);
@@ -68,8 +67,6 @@ public async Task GetEntryIndex_NonExistentEntry_ReturnsNegativeOne()
     [Fact]
     public async Task GetEntryIndex_WithCustomSort_ReturnsCorrectIndex()
     {
-        await CreateStandardEntries();
-
         // Sort descending
         var options = new IndexQueryOptions(new SortOptions(SortField.Headword, "en", false));
 
@@ -89,8 +86,9 @@ public async Task GetEntryIndex_LargeList_ReturnsCorrectIndex()
         {
             var id = Guid.NewGuid();
             entryIds.Add(id);
-            // Ensure deterministic sort (e.g., Entry 0000, 0001, ...)
-            await Api.CreateEntry(new Entry { Id = id, LexemeForm = { { "en", $"Entry {i:D4}" } } });
+            // Ensure deterministic sort (e.g., 0000 Entry, 0001 Entry, ...)
+            // We use a prefix to ensure these come before the standard entries (Apple, Banana, etc)
+            await Api.CreateEntry(new Entry { Id = id, LexemeForm = { { "en", $"{i:D4} Entry" } } });
         }
 
         (await Api.GetEntryIndex(entryIds[0])).Should().Be(0);
@@ -98,4 +96,74 @@ public async Task GetEntryIndex_LargeList_ReturnsCorrectIndex()
         (await Api.GetEntryIndex(entryIds[1000])).Should().Be(1000);
         (await Api.GetEntryIndex(entryIds[1004])).Should().Be(1004);
     }
+
+    [Fact]
+    public async Task GetEntryIndex_WithShortQuery_ReturnsCorrectIndex()
+    {
+        // Query "Ki" is < 3 characters, should use simple search filter
+        var result = await Api.GetEntryIndex(kiwiId, "Ki");
+
+        // "Kiwi" should be the only match, index 0
+        result.Should().Be(0);
+    }
+
+    [Fact]
+    public async Task GetEntryIndex_WithLongQuery_ReturnsCorrectIndex()
+    {
+        // Query "Orange" is >= 3 characters, should use FTS
+        var result = await Api.GetEntryIndex(orangeId, "Orange");
+
+        // "Orange" should be found, index 0
+        result.Should().Be(0);
+    }
+
+    [Fact]
+    public async Task GetEntryIndex_WithGridifyFilter_ReturnsCorrectIndex()
+    {
+        // Use Gridify filter to find "banana"
+        var options = new IndexQueryOptions(Filter: new EntryFilter { GridifyFilter = "LexemeForm[en]=Banana" });
+
+        var result = await Api.GetEntryIndex(bananaId, null, options);
+
+        result.Should().Be(0);
+    }
+
+    [Fact]
+    public async Task GetEntryIndex_WithFilterAndSort_ReturnsCorrectIndex()
+    {
+        var options = new IndexQueryOptions(new SortOptions(SortField.SearchRelevance, "en", true));
+
+        (await Api.GetEntryIndex(appleId, "a", options)).Should().Be(0);
+        (await Api.GetEntryIndex(peachId, "a", options)).Should().Be(1);
+        (await Api.GetEntryIndex(bananaId, "a", options)).Should().Be(2);
+        (await Api.GetEntryIndex(orangeId, "a", options)).Should().Be(3);
+
+        // "Kiwi" shouldn't be in the results at all
+        (await Api.GetEntryIndex(kiwiId, "a", options)).Should().Be(-1);
+    }
+
+    [Fact]
+    public async Task GetEntryIndex_WithFTSFilterAndSort_ReturnsCorrectIndex()
+    {
+        // Add some more entries to make search more interesting
+        var applePieId = Guid.NewGuid();
+        var pineappleId = Guid.NewGuid();
+        await Api.CreateEntry(new Entry { Id = applePieId, LexemeForm = { { "en", "Apple Pie" } } });
+        await Api.CreateEntry(new Entry { Id = pineappleId, LexemeForm = { { "en", "Pineapple" } } });
+
+        // Query "Apple" (>= 3 chars, uses SearchService/FTS)
+        // Matches: Apple (len 5), Apple Pie (len 9), Pineapple (len 9)
+        // Sorting:
+        // 1. Headword contains "Apple": All match.
+        // 2. Length: Apple (5), Apple Pie (9), Pineapple (9)
+        // 3. Alphabetical (for 9-len): Apple Pie, Pineapple
+        var options = new IndexQueryOptions(new SortOptions(SortField.SearchRelevance, "en", true));
+
+        (await Api.GetEntryIndex(appleId, "Apple", options)).Should().Be(0);
+        (await Api.GetEntryIndex(applePieId, "Apple", options)).Should().Be(1);
+        (await Api.GetEntryIndex(pineappleId, "Apple", options)).Should().Be(2);
+
+        // "Banana" shouldn't be in the results
+        (await Api.GetEntryIndex(bananaId, "Apple", options)).Should().Be(-1);
+    }
 }

From 490046ba849f5983b0ea0ee24e64030253288b0b Mon Sep 17 00:00:00 2001
From: Tim Haasdyk <tim_haasdyk@sil.org>
Date: Fri, 23 Jan 2026 13:54:39 +0100
Subject: [PATCH 36/42] AI feedback

---
 AGENTS.md                                     |  1 +
 frontend/viewer/eslint.config.js              |  7 ++++-
 .../services/entry-loader-service.svelte.ts   | 12 ++++----
 .../src/project/browse/EntriesList.svelte     |  8 ++++--
 .../src/project/demo/in-memory-demo-api.ts    | 12 +++++---
 frontend/viewer/tests/entries-list-v2.test.ts | 21 +++++---------
 frontend/viewer/tests/entries-list.test.ts    | 28 ++++++++-----------
 frontend/viewer/tests/test-utils.ts           | 11 ++++++++
 8 files changed, 57 insertions(+), 43 deletions(-)
 create mode 100644 frontend/viewer/tests/test-utils.ts

diff --git a/AGENTS.md b/AGENTS.md
index f264d954cd..f33b00b2ef 100644
--- a/AGENTS.md
+++ b/AGENTS.md
@@ -73,6 +73,7 @@ Before implementing any change that will touch many files or is in a 🔴 **Crit
 - ✅ **ALWAYS review relevant code paths** before asking clarification questions.
 - ✅ New instructions in AGENTS.md files should be SUCCINCT.
 - ✅ Use `gh` CLI for GitHub issues/PRs, not browser tools
+- ✅ When pulling PR comments with `gh` use `api`. It's the only thing that returns review comments.
 - ✅ Use **Mermaid diagrams** for flowcharts and architecture (not ASCII art)
 - ✅ Prefer IDE diagnostics (compiler/lint errors) over CLI tools for identifying issues. Fixing these diagnostics is part of completing any instruction.
 - ✅ Do NOT run integration tests unless user explicitly requests
diff --git a/frontend/viewer/eslint.config.js b/frontend/viewer/eslint.config.js
index e174e39037..0b2770dc00 100644
--- a/frontend/viewer/eslint.config.js
+++ b/frontend/viewer/eslint.config.js
@@ -63,10 +63,15 @@ export default [
         },
         {
           'selector': 'default',
-          'modifiers': ['const', 'static readonly'],
+          'modifiers': ['const'],
           'format': ['camelCase', 'UPPER_CASE'],
           'leadingUnderscore': 'allow',
         },
+        {
+          'selector': 'classProperty',
+          'modifiers': ['static', 'readonly'],
+          'format': ['camelCase', 'UPPER_CASE'],
+        },
         {
           'selector': ['typeLike', 'enumMember'],
           'format': ['PascalCase'],
diff --git a/frontend/viewer/src/lib/services/entry-loader-service.svelte.ts b/frontend/viewer/src/lib/services/entry-loader-service.svelte.ts
index 7ab417ff6d..ac1e7fb8b5 100644
--- a/frontend/viewer/src/lib/services/entry-loader-service.svelte.ts
+++ b/frontend/viewer/src/lib/services/entry-loader-service.svelte.ts
@@ -152,7 +152,9 @@ export class EntryLoaderService {
     const queryOptions = this.#buildQueryOptions(0, 0);
     const search = this.#deps.search();
 
+    const generation = this.#generation;
     const index = await this.#api.getEntryIndex(id, search || undefined, queryOptions);
+    if (this.#generation === generation) return -1;
     this.#idToIndex.set(id, index);
     return index;
   }
@@ -178,9 +180,9 @@ export class EntryLoaderService {
     if (generation !== this.#generation) return; // outdated event => abort
     await this.quietReset();
   }
-  
+
   /**
-   * The more trivial and performant checks we can do to verify if the event is relevant 
+   * The more trivial and performant checks we can do to verify if the event is relevant
    * to our current state.
    */
   private async tryOptimizeUpdateEntryEvent(entry: IEntry): Promise<boolean> {
@@ -359,7 +361,7 @@ export class EntryLoaderService {
   }
 
   #markBatchRequested(batchNumber: number): void {
-    if (batchNumber < 0) throw new RangeError('Batch number must be positive');
+    if (batchNumber < 0) throw new RangeError('Batch number must be non-negative');
     if (batchNumber === this.#recentBatchNumbers.curr) return;
 
     if (this.#recentBatchNumbers.curr !== undefined &&
@@ -400,7 +402,7 @@ export class EntryLoaderService {
   }
 
   async #fetchEntriesForQuietReset(batches: number[]): Promise<IEntry[]> {
-    const offset = batches.sort()[0] * this.batchSize;
+    const offset = Math.min(...batches) * this.batchSize;
     return this.#fetchRange(offset, this.batchSize * batches.length);
   }
 
@@ -410,7 +412,7 @@ export class EntryLoaderService {
     this.#pendingBatches.clear();
     this.#loadedBatches.clear();
 
-    const offset = batches.sort()[0] * this.batchSize;
+    const offset = Math.min(...batches) * this.batchSize;
     for (let i = 0; i < entries.length; i++) {
       const index = offset + i;
       const entry = entries[i];
diff --git a/frontend/viewer/src/project/browse/EntriesList.svelte b/frontend/viewer/src/project/browse/EntriesList.svelte
index c48aab7841..e94e4324be 100644
--- a/frontend/viewer/src/project/browse/EntriesList.svelte
+++ b/frontend/viewer/src/project/browse/EntriesList.svelte
@@ -120,15 +120,17 @@
   });
 
   async function scrollToSelectedOrTop() {
-    if (!vList || !selectedEntryId) return;
-    const scrolled = await tryToScrollToEntry(selectedEntryId);
-    if (!scrolled) vList.scrollTo(0);
+    const currentId = selectedEntryId;
+    if (!vList || !currentId) return;
+    const scrolled = await tryToScrollToEntry(currentId);
+    if (!scrolled && selectedEntryId === currentId) vList.scrollTo(0);
   }
 
   async function tryToScrollToEntry(entryId: string): Promise<boolean> {
     if (!entryLoader || !vList) return false;
 
     const index = await entryLoader.getOrLoadEntryIndex(entryId);
+    if (entryId !== selectedEntryId) return false;
     if (index < 0) return false;
 
     const visibleStart = vList.getScrollOffset();
diff --git a/frontend/viewer/src/project/demo/in-memory-demo-api.ts b/frontend/viewer/src/project/demo/in-memory-demo-api.ts
index 542d7bfeb6..0d6cfe8816 100644
--- a/frontend/viewer/src/project/demo/in-memory-demo-api.ts
+++ b/frontend/viewer/src/project/demo/in-memory-demo-api.ts
@@ -282,15 +282,19 @@ export class InMemoryDemoApi implements IMiniLcmJsInvokable {
 
   createSense(entryGuid: string, sense: ISense): Promise<ISense> {
     const entry = this._entries.find(e => e.id === entryGuid);
-    entry?.senses.push(sense);
-    if (entry) this.#projectEventBus.notifyEntryUpdated(entry);
+    if (!entry) throw new Error(`Entry ${entryGuid} not found`);
+    entry.senses.push(sense);
+    this.#projectEventBus.notifyEntryUpdated(entry);
     return Promise.resolve(sense);
   }
 
   createExampleSentence(entryGuid: string, senseGuid: string, exampleSentence: IExampleSentence): Promise<IExampleSentence> {
     const entry = this._entries.find(e => e.id === entryGuid);
-    entry?.senses.find(s => s.id === senseGuid)?.exampleSentences.push(exampleSentence);
-    if (entry) this.#projectEventBus.notifyEntryUpdated(entry);
+    if (!entry) throw new Error(`Entry ${entryGuid} not found`);
+    const sense = entry.senses.find(s => s.id === senseGuid);
+    if (!sense) throw new Error(`Sense ${senseGuid} not found`);
+    sense.exampleSentences.push(exampleSentence);
+    this.#projectEventBus.notifyEntryUpdated(entry);
     return Promise.resolve(exampleSentence);
   }
 
diff --git a/frontend/viewer/tests/entries-list-v2.test.ts b/frontend/viewer/tests/entries-list-v2.test.ts
index c5b4d003d2..cfc0256720 100644
--- a/frontend/viewer/tests/entries-list-v2.test.ts
+++ b/frontend/viewer/tests/entries-list-v2.test.ts
@@ -1,6 +1,7 @@
 import {type Page, expect, test} from '@playwright/test';
 import {SortField} from '$lib/dotnet-types/generated-types/MiniLcm/SortField';
 import {MorphType} from '$lib/dotnet-types/generated-types/MiniLcm/Models/MorphType';
+import {waitForProjectViewReady} from './test-utils';
 
 /**
  * Tests for V2 virtual scrolling features:
@@ -20,16 +21,6 @@ test.describe('EntriesList V2 features', () => {
     };
   }
 
-  async function waitForProjectViewReady(page: Page, waitForTestUtils = false) {
-    await expect(page.locator('.i-mdi-loading')).toHaveCount(0, {timeout: 10000});
-    await page.waitForFunction(() => document.fonts.ready);
-    await expect(page.locator('[data-skeleton]')).toHaveCount(0, {timeout: 10000});
-    // Wait for test utilities to be available if requested
-    if (waitForTestUtils) {
-      await page.waitForFunction(() => window.__PLAYWRIGHT_UTILS__?.demoApi, {timeout: 5000});
-    }
-  }
-
   async function getVisibleEntryTexts(page: Page) {
     const {entryRows} = getLocators(page);
     const texts: string[] = [];
@@ -161,7 +152,9 @@ test.describe('EntriesList V2 features', () => {
       // The selected entry should be visible (scrolled into view)
       const {selectedEntry} = getLocators(page);
       await expect(selectedEntry).toBeVisible({timeout: 5000});
-      await expect(selectedEntry).toContainText(selectedText!.slice(0, 20));
+      const expectedSnippet = selectedText!.trim().slice(0, 20);
+      expect(expectedSnippet.length).toBeGreaterThan(0);
+      await expect(selectedEntry).toContainText(expectedSnippet);
     });
 
     test('clearing search filter with entry selected keeps entry visible', async ({page}) => {
@@ -285,11 +278,11 @@ test.describe('EntriesList V2 features', () => {
       await expect(selectedEntry).toBeVisible();
 
       // Get the selected entry ID
-      const entryId = await page.evaluate(async () => {
+      const entryId = await page.evaluate(async (headwordField) => {
         const testUtils = window.__PLAYWRIGHT_UTILS__;
-        const entries = await testUtils.demoApi.getEntries({count: 1, offset: 0, order: {field: 'Headword' as unknown as SortField, writingSystem: 'default', ascending: true}});
+        const entries = await testUtils.demoApi.getEntries({count: 1, offset: 0, order: {field: headwordField, writingSystem: 'default', ascending: true}});
         return entries[0]?.id;
-      });
+      }, SortField.Headword);
 
       // Delete via API
       await page.evaluate(async (id) => {
diff --git a/frontend/viewer/tests/entries-list.test.ts b/frontend/viewer/tests/entries-list.test.ts
index 4e4e46ebb6..911c6b9ff0 100644
--- a/frontend/viewer/tests/entries-list.test.ts
+++ b/frontend/viewer/tests/entries-list.test.ts
@@ -1,7 +1,8 @@
 import {type Page, expect, test} from '@playwright/test';
+import {waitForProjectViewReady} from './test-utils';
 
 /**
- * This file is vibe coded.
+ * This file is largely vibe coded.
  * Tests for EntriesList lazy loading and virtual scrolling.
  */
 
@@ -54,10 +55,11 @@ test.describe('EntriesList lazy loading', () => {
       el.scrollTop = 1000;
     });
 
-    await page.waitForTimeout(500);
-
-    const scrollTop = await vlist.evaluate((el) => el.scrollTop);
-    expect(scrollTop).toBeGreaterThan(850);
+    // Wait for scroll to settle and content to render
+    await expect(async () => {
+      const scrollTop = await vlist.evaluate((el) => el.scrollTop);
+      expect(scrollTop).toBeGreaterThan(850);
+    }).toPass({timeout: 2000});
 
     const newTexts = await getVisibleEntryTexts(page);
     expect(newTexts).not.toEqual(initialTexts);
@@ -79,11 +81,11 @@ test.describe('EntriesList lazy loading', () => {
       el.scrollTop = target;
     }, targetScroll);
 
-    await page.waitForTimeout(500);
-
-    const scrollTop = await vlist.evaluate((el) => el.scrollTop);
-    // Allow small margin for virtualization/browser rounding
-    expect(scrollTop).toBeGreaterThan(targetScroll - 200);
+    await expect(async () => {
+      const scrollTop = await vlist.evaluate((el) => el.scrollTop);
+      // Allow small margin for virtualization/browser rounding
+      expect(scrollTop).toBeGreaterThan(targetScroll - 200);
+    }).toPass({timeout: 2000});
 
     // Should resolve from skeletons to entries
     await expect(async () => {
@@ -111,9 +113,3 @@ test.describe('EntriesList lazy loading', () => {
     await expect(entryRows.first()).not.toHaveAttribute('data-skeleton');
   });
 });
-
-async function waitForProjectViewReady(page: Page) {
-  await expect(page.locator('.i-mdi-loading')).toHaveCount(0);
-  await page.waitForFunction(() => document.fonts.ready);
-  await expect(page.locator('[data-skeleton]')).toHaveCount(0, {timeout: 10000});
-}
diff --git a/frontend/viewer/tests/test-utils.ts b/frontend/viewer/tests/test-utils.ts
new file mode 100644
index 0000000000..61262d23b1
--- /dev/null
+++ b/frontend/viewer/tests/test-utils.ts
@@ -0,0 +1,11 @@
+import {type Page, expect} from '@playwright/test';
+
+export async function waitForProjectViewReady(page: Page, waitForTestUtils = false) {
+  await expect(page.locator('.i-mdi-loading')).toHaveCount(0, {timeout: 10000});
+  await page.waitForFunction(() => document.fonts.ready);
+  await expect(page.locator('[data-skeleton]')).toHaveCount(0, {timeout: 10000});
+  // Wait for test utilities to be available if requested
+  if (waitForTestUtils) {
+    await page.waitForFunction(() => window.__PLAYWRIGHT_UTILS__?.demoApi, {timeout: 5000});
+  }
+}

From 32d497d2cb692d47dbeedfe4607c972d79bcb439 Mon Sep 17 00:00:00 2001
From: Tim Haasdyk <tim_haasdyk@sil.org>
Date: Fri, 23 Jan 2026 14:15:10 +0100
Subject: [PATCH 37/42] Fix linting errors: floating promises and unused
 variables

---
 .../src/lib/services/entry-loader-service.svelte.test.ts    | 6 +++---
 .../viewer/src/lib/services/entry-loader-service.svelte.ts  | 2 +-
 frontend/viewer/tests/entry-edit-persists.test.ts           | 3 +--
 3 files changed, 5 insertions(+), 6 deletions(-)

diff --git a/frontend/viewer/src/lib/services/entry-loader-service.svelte.test.ts b/frontend/viewer/src/lib/services/entry-loader-service.svelte.test.ts
index 4f5968c52b..965008ca74 100644
--- a/frontend/viewer/src/lib/services/entry-loader-service.svelte.test.ts
+++ b/frontend/viewer/src/lib/services/entry-loader-service.svelte.test.ts
@@ -198,7 +198,7 @@ describe('EntryLoaderService', () => {
 
       const loadPromise = service.loadInitialCount();
 
-      service.reset();
+      void service.reset();
       api.countEntries.mockResolvedValue(5);
       void service.loadInitialCount();
 
@@ -218,7 +218,7 @@ describe('EntryLoaderService', () => {
 
       const loadPromise = service.getOrLoadEntryByIndex(0);
 
-      service.reset();
+      void service.reset();
       const nextEntries = makeEntries(BATCH_SIZE, 'b');
       api.getEntries.mockResolvedValue(nextEntries);
       api.countEntries.mockResolvedValue(nextEntries.length);
@@ -243,7 +243,7 @@ describe('EntryLoaderService', () => {
       const firstLoad = service.getOrLoadEntryByIndex(0);
 
       // Reset and immediately start another load for the same batch
-      service.reset();
+      void service.reset();
       api.countEntries.mockResolvedValue(entries.length);
       await service.loadInitialCount();
 
diff --git a/frontend/viewer/src/lib/services/entry-loader-service.svelte.ts b/frontend/viewer/src/lib/services/entry-loader-service.svelte.ts
index ac1e7fb8b5..2d5ec1d793 100644
--- a/frontend/viewer/src/lib/services/entry-loader-service.svelte.ts
+++ b/frontend/viewer/src/lib/services/entry-loader-service.svelte.ts
@@ -163,7 +163,7 @@ export class EntryLoaderService {
    * Remove an entry by ID (for delete events).
    * Uses a quiet reset to refresh count + the currently relevant batch(es).
    */
-  removeEntryById(id: string): void {
+  removeEntryById(_id: string): void {
     // We intentionally do not try to do any local shifting / heuristics.
     // The goal is to keep event handling easy to reason about.
     void this.quietReset();
diff --git a/frontend/viewer/tests/entry-edit-persists.test.ts b/frontend/viewer/tests/entry-edit-persists.test.ts
index 0b16b18958..d1cd9b9a7c 100644
--- a/frontend/viewer/tests/entry-edit-persists.test.ts
+++ b/frontend/viewer/tests/entry-edit-persists.test.ts
@@ -49,7 +49,7 @@ test.describe('Entry edit persistence', () => {
 
   test('UI edit of gloss field is saved to backend', async ({page}) => {
     // Get an existing entry with senses from demo data that has an English gloss
-    const {entryId, headword, senseId, originalGloss} = await page.evaluate(async (headwordField) => {
+    const {entryId, headword, originalGloss} = await page.evaluate(async (headwordField) => {
       const api = window.__PLAYWRIGHT_UTILS__.demoApi;
       const entries = await api.getEntries({
         offset: 0,
@@ -61,7 +61,6 @@ test.describe('Entry edit persistence', () => {
       if (!entry) throw new Error('No suitable entry with English gloss found in demo data');
       return {
         entryId: entry.id,
-        senseId: entry.senses[0].id,
         headword: entry.citationForm?.seh ?? entry.lexemeForm?.seh ?? '',
         originalGloss: entry.senses[0].gloss?.en ?? '',
       };

From c1efd87b31cd693e25d79a2fa5d3784e4815cb54 Mon Sep 17 00:00:00 2001
From: Tim Haasdyk <tim_haasdyk@sil.org>
Date: Fri, 23 Jan 2026 14:30:36 +0100
Subject: [PATCH 38/42] Extract i18n strings: Filter, This was deleted

---
 frontend/viewer/src/locales/en.po | 8 ++++++++
 frontend/viewer/src/locales/es.po | 8 ++++++++
 frontend/viewer/src/locales/fr.po | 8 ++++++++
 frontend/viewer/src/locales/id.po | 8 ++++++++
 frontend/viewer/src/locales/ko.po | 8 ++++++++
 frontend/viewer/src/locales/ms.po | 8 ++++++++
 frontend/viewer/src/locales/sw.po | 8 ++++++++
 frontend/viewer/src/locales/vi.po | 8 ++++++++
 8 files changed, 64 insertions(+)

diff --git a/frontend/viewer/src/locales/en.po b/frontend/viewer/src/locales/en.po
index b377651eee..2e4f5790ae 100644
--- a/frontend/viewer/src/locales/en.po
+++ b/frontend/viewer/src/locales/en.po
@@ -773,6 +773,10 @@ msgstr "File saving not supported"
 msgid "File too big"
 msgstr "File too big"
 
+#: src/project/browse/SearchFilter.svelte
+msgid "Filter"
+msgstr "Filter"
+
 #. Relevant view: Classic
 #. Lite view equivalent: "Filter # words"
 #. Placeholder text showing filtered count (# = number)
@@ -1679,6 +1683,10 @@ msgstr "The time when you uploaded or downloaded these changes"
 msgid "These changes have not been uploaded yet. Ensure you're online and logged in to share your changes."
 msgstr "These changes have not been uploaded yet. Ensure you're online and logged in to share your changes."
 
+#: src/project/browse/EntryView.svelte
+msgid "This {0} was deleted"
+msgstr "This {0} was deleted"
+
 #. Example text for i18n
 #: src/stories/i18n/i18n.stories.svelte
 msgid "This date # and this emoji # are snippets"
diff --git a/frontend/viewer/src/locales/es.po b/frontend/viewer/src/locales/es.po
index 16578f5cc0..3ebe6dda33 100644
--- a/frontend/viewer/src/locales/es.po
+++ b/frontend/viewer/src/locales/es.po
@@ -778,6 +778,10 @@ msgstr "Guardado de archivos no soportado"
 msgid "File too big"
 msgstr "Archivo demasiado grande"
 
+#: src/project/browse/SearchFilter.svelte
+msgid "Filter"
+msgstr ""
+
 #. Relevant view: Classic
 #. Lite view equivalent: "Filter # words"
 #. Placeholder text showing filtered count (# = number)
@@ -1684,6 +1688,10 @@ msgstr "El tiempo cuando subiste o descargaste estos cambios"
 msgid "These changes have not been uploaded yet. Ensure you're online and logged in to share your changes."
 msgstr "Estos cambios no se han subido todavía. Asegúrate de que estás conectado e inicia sesión para compartir tus cambios."
 
+#: src/project/browse/EntryView.svelte
+msgid "This {0} was deleted"
+msgstr ""
+
 #. Example text for i18n
 #: src/stories/i18n/i18n.stories.svelte
 msgid "This date # and this emoji # are snippets"
diff --git a/frontend/viewer/src/locales/fr.po b/frontend/viewer/src/locales/fr.po
index e5a7fa7a9c..8f6e6d98de 100644
--- a/frontend/viewer/src/locales/fr.po
+++ b/frontend/viewer/src/locales/fr.po
@@ -778,6 +778,10 @@ msgstr "L'enregistrement du fichier n'est pas une option valable"
 msgid "File too big"
 msgstr "Fichier trop volumineux"
 
+#: src/project/browse/SearchFilter.svelte
+msgid "Filter"
+msgstr ""
+
 #. Relevant view: Classic
 #. Lite view equivalent: "Filter # words"
 #. Placeholder text showing filtered count (# = number)
@@ -1684,6 +1688,10 @@ msgstr "L'heure où vous avez téléchargé ou téléchargé ces modifications"
 msgid "These changes have not been uploaded yet. Ensure you're online and logged in to share your changes."
 msgstr "Ces modifications n'ont pas encore été téléchargées. Assurez-vous que vous êtes connecté et que vous êtes connecté pour partager vos modifications."
 
+#: src/project/browse/EntryView.svelte
+msgid "This {0} was deleted"
+msgstr ""
+
 #. Example text for i18n
 #: src/stories/i18n/i18n.stories.svelte
 msgid "This date # and this emoji # are snippets"
diff --git a/frontend/viewer/src/locales/id.po b/frontend/viewer/src/locales/id.po
index 6cf0fe0732..ce9fb44a81 100644
--- a/frontend/viewer/src/locales/id.po
+++ b/frontend/viewer/src/locales/id.po
@@ -778,6 +778,10 @@ msgstr "Penyimpanan file tidak didukung"
 msgid "File too big"
 msgstr "File terlalu besar"
 
+#: src/project/browse/SearchFilter.svelte
+msgid "Filter"
+msgstr ""
+
 #. Relevant view: Classic
 #. Lite view equivalent: "Filter # words"
 #. Placeholder text showing filtered count (# = number)
@@ -1684,6 +1688,10 @@ msgstr "Waktu ketika Anda mengunggah atau mengunduh perubahan ini"
 msgid "These changes have not been uploaded yet. Ensure you're online and logged in to share your changes."
 msgstr "Perubahan ini belum diunggah. Pastikan Anda online dan masuk untuk membagikan perubahan Anda."
 
+#: src/project/browse/EntryView.svelte
+msgid "This {0} was deleted"
+msgstr ""
+
 #. Example text for i18n
 #: src/stories/i18n/i18n.stories.svelte
 msgid "This date # and this emoji # are snippets"
diff --git a/frontend/viewer/src/locales/ko.po b/frontend/viewer/src/locales/ko.po
index 5ed25b186a..87abc3e863 100644
--- a/frontend/viewer/src/locales/ko.po
+++ b/frontend/viewer/src/locales/ko.po
@@ -778,6 +778,10 @@ msgstr "파일 저장이 지원되지 않음"
 msgid "File too big"
 msgstr "파일이 너무 큼"
 
+#: src/project/browse/SearchFilter.svelte
+msgid "Filter"
+msgstr ""
+
 #. Relevant view: Classic
 #. Lite view equivalent: "Filter # words"
 #. Placeholder text showing filtered count (# = number)
@@ -1684,6 +1688,10 @@ msgstr "이러한 변경 사항을 업로드하거나 다운로드한 시간"
 msgid "These changes have not been uploaded yet. Ensure you're online and logged in to share your changes."
 msgstr "변경 내용이 아직 업로드되지 않았습니다. 변경 내용을 공유하려면 온라인 상태이고 로그인했는지 확인하세요."
 
+#: src/project/browse/EntryView.svelte
+msgid "This {0} was deleted"
+msgstr ""
+
 #. Example text for i18n
 #: src/stories/i18n/i18n.stories.svelte
 msgid "This date # and this emoji # are snippets"
diff --git a/frontend/viewer/src/locales/ms.po b/frontend/viewer/src/locales/ms.po
index 151e7b8155..67cba07fd8 100644
--- a/frontend/viewer/src/locales/ms.po
+++ b/frontend/viewer/src/locales/ms.po
@@ -778,6 +778,10 @@ msgstr "Penyimpanan fail tidak disokong"
 msgid "File too big"
 msgstr "Fail terlalu besar"
 
+#: src/project/browse/SearchFilter.svelte
+msgid "Filter"
+msgstr ""
+
 #. Relevant view: Classic
 #. Lite view equivalent: "Filter # words"
 #. Placeholder text showing filtered count (# = number)
@@ -1684,6 +1688,10 @@ msgstr "Masa apabila anda memuat naik atau memuat turun perubahan ini"
 msgid "These changes have not been uploaded yet. Ensure you're online and logged in to share your changes."
 msgstr "Perubahan ini belum dimuat naik. Pastikan anda dalam talian dan log masuk untuk berkongsi perubahan anda."
 
+#: src/project/browse/EntryView.svelte
+msgid "This {0} was deleted"
+msgstr ""
+
 #. Example text for i18n
 #: src/stories/i18n/i18n.stories.svelte
 msgid "This date # and this emoji # are snippets"
diff --git a/frontend/viewer/src/locales/sw.po b/frontend/viewer/src/locales/sw.po
index cda185daeb..446df3d0d5 100644
--- a/frontend/viewer/src/locales/sw.po
+++ b/frontend/viewer/src/locales/sw.po
@@ -778,6 +778,10 @@ msgstr "Hifadhi ya faili hailinganiswi"
 msgid "File too big"
 msgstr "Faili kubwa sana"
 
+#: src/project/browse/SearchFilter.svelte
+msgid "Filter"
+msgstr ""
+
 #. Relevant view: Classic
 #. Lite view equivalent: "Filter # words"
 #. Placeholder text showing filtered count (# = number)
@@ -1684,6 +1688,10 @@ msgstr "Wakati ulipoweka au kupakua mabadiliko haya"
 msgid "These changes have not been uploaded yet. Ensure you're online and logged in to share your changes."
 msgstr "Mabadiliko haya hayajawekwa bado. Hakikisha unaunganishwa na kuingia ili kushiriki mabadiliko yako."
 
+#: src/project/browse/EntryView.svelte
+msgid "This {0} was deleted"
+msgstr ""
+
 #. Example text for i18n
 #: src/stories/i18n/i18n.stories.svelte
 msgid "This date # and this emoji # are snippets"
diff --git a/frontend/viewer/src/locales/vi.po b/frontend/viewer/src/locales/vi.po
index 2b8a48ad0f..b5ec14a33b 100644
--- a/frontend/viewer/src/locales/vi.po
+++ b/frontend/viewer/src/locales/vi.po
@@ -778,6 +778,10 @@ msgstr "Lưu tệp không được hỗ trợ"
 msgid "File too big"
 msgstr "Tệp quá lớn"
 
+#: src/project/browse/SearchFilter.svelte
+msgid "Filter"
+msgstr ""
+
 #. Relevant view: Classic
 #. Lite view equivalent: "Filter # words"
 #. Placeholder text showing filtered count (# = number)
@@ -1686,6 +1690,10 @@ msgstr "Thời gian bạn đã tải lên hoặc tải xuống các thay đổi
 msgid "These changes have not been uploaded yet. Ensure you're online and logged in to share your changes."
 msgstr "Những thay đổi này chưa được tải lên. Hãy đảm bảo bạn đang trực tuyến và đã đăng nhập để chia sẻ các thay đổi."
 
+#: src/project/browse/EntryView.svelte
+msgid "This {0} was deleted"
+msgstr ""
+
 #. Example text for i18n
 #: src/stories/i18n/i18n.stories.svelte
 msgid "This date # and this emoji # are snippets"

From 20937c0411e0df7206847801106617a263a0686b Mon Sep 17 00:00:00 2001
From: Tim Haasdyk <tim_haasdyk@sil.org>
Date: Fri, 23 Jan 2026 15:54:04 +0100
Subject: [PATCH 39/42] PR feedback

---
 frontend/viewer/src/project/browse/EntryView.svelte | 10 ++++++----
 frontend/viewer/tests/entries-list-v2.test.ts       |  2 +-
 2 files changed, 7 insertions(+), 5 deletions(-)

diff --git a/frontend/viewer/src/project/browse/EntryView.svelte b/frontend/viewer/src/project/browse/EntryView.svelte
index 64103e809b..7fb006bf0d 100644
--- a/frontend/viewer/src/project/browse/EntryView.svelte
+++ b/frontend/viewer/src/project/browse/EntryView.svelte
@@ -117,7 +117,7 @@
         </div>
       </div>
       {#if deleted}
-        {@const entity = pt('entry', 'word', $currentView)}
+        {@const entity = pt($t`entry`, $t`word`, $currentView)}
         <div class="mb-2 px-2">
           <Alert.Root variant="destructive">
             <Alert.Description class="flex justify-between items-center">
@@ -125,9 +125,11 @@
                 <Icon icon="i-mdi-alert-circle" class="size-5" />
                 {$t`This ${entity} was deleted`}
               </span>
-              <Button size="sm" variant="secondary" onclick={() => restore()}>
-                {$t('Restore')}
-              </Button>
+              {#if !readonly && features.write}
+                <Button size="sm" variant="secondary" onclick={() => restore()}>
+                  {$t`Restore`}
+                </Button>
+              {/if}
             </Alert.Description>
           </Alert.Root>
         </div>
diff --git a/frontend/viewer/tests/entries-list-v2.test.ts b/frontend/viewer/tests/entries-list-v2.test.ts
index cfc0256720..ec8c278467 100644
--- a/frontend/viewer/tests/entries-list-v2.test.ts
+++ b/frontend/viewer/tests/entries-list-v2.test.ts
@@ -258,7 +258,7 @@ test.describe('EntriesList V2 features', () => {
       await page.evaluate(async (entry) => {
         const testUtils = window.__PLAYWRIGHT_UTILS__;
         const newLexemeForm = `-UPDATED-${entry.lexemeForm.seh || entry.lexemeForm.en || 'entry'}`;
-        const updated = {...entry, lexemeForm: {...entry.lexemeForm, seh: newLexemeForm}};
+        const updated = {...entry, citationForm: {...entry.lexemeForm, seh: newLexemeForm}};
         await testUtils.demoApi.updateEntry(entry, updated);
       }, firstEntry);
 

From 0f45998126d73dfdf6808ccddba3e5d7db00baa6 Mon Sep 17 00:00:00 2001
From: Tim Haasdyk <tim_haasdyk@sil.org>
Date: Fri, 23 Jan 2026 16:14:03 +0100
Subject: [PATCH 40/42] Fix boolean logic error

---
 frontend/viewer/src/lib/services/entry-loader-service.svelte.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/viewer/src/lib/services/entry-loader-service.svelte.ts b/frontend/viewer/src/lib/services/entry-loader-service.svelte.ts
index 2d5ec1d793..c300626885 100644
--- a/frontend/viewer/src/lib/services/entry-loader-service.svelte.ts
+++ b/frontend/viewer/src/lib/services/entry-loader-service.svelte.ts
@@ -154,7 +154,7 @@ export class EntryLoaderService {
 
     const generation = this.#generation;
     const index = await this.#api.getEntryIndex(id, search || undefined, queryOptions);
-    if (this.#generation === generation) return -1;
+    if (this.#generation !== generation) return -1;
     this.#idToIndex.set(id, index);
     return index;
   }

From 06a2534a83c4b23c13285dcb6ae6ce61d6cb1390 Mon Sep 17 00:00:00 2001
From: Tim Haasdyk <tim_haasdyk@sil.org>
Date: Fri, 23 Jan 2026 16:14:15 +0100
Subject: [PATCH 41/42] i18n:extract and ai enhance

---
 frontend/viewer/src/locales/en.po | 17 +++++++++++++++++
 frontend/viewer/src/locales/es.po | 17 +++++++++++++++++
 frontend/viewer/src/locales/fr.po | 17 +++++++++++++++++
 frontend/viewer/src/locales/id.po | 17 +++++++++++++++++
 frontend/viewer/src/locales/ko.po | 17 +++++++++++++++++
 frontend/viewer/src/locales/ms.po | 21 +++++++++++++++++++--
 frontend/viewer/src/locales/sw.po | 21 +++++++++++++++++++--
 frontend/viewer/src/locales/vi.po | 17 +++++++++++++++++
 8 files changed, 140 insertions(+), 4 deletions(-)

diff --git a/frontend/viewer/src/locales/en.po b/frontend/viewer/src/locales/en.po
index 2e4f5790ae..5807c511db 100644
--- a/frontend/viewer/src/locales/en.po
+++ b/frontend/viewer/src/locales/en.po
@@ -618,6 +618,11 @@ msgstr "Ends with"
 msgid "Entries missing..."
 msgstr "Entries missing..."
 
+#. EntryView label for the current dictionary object when FieldWorks Classic is shown
+#: src/project/browse/EntryView.svelte
+msgid "entry"
+msgstr "entry"
+
 #. Relevant view: Classic
 #. Lite view equivalent: "Word"
 #. Item type label: dictionary entry (word/headword with definitions)
@@ -773,6 +778,7 @@ msgstr "File saving not supported"
 msgid "File too big"
 msgstr "File too big"
 
+#. Accessible label for the browse search input that filters entries or words
 #: src/project/browse/SearchFilter.svelte
 msgid "Filter"
 msgstr "Filter"
@@ -1404,6 +1410,11 @@ msgstr "Replace audio"
 msgid "Report a technical problem"
 msgstr "Report a technical problem"
 
+#. Button label to restore a deleted Entry or Word inside EntryView
+#: src/project/browse/EntryView.svelte
+msgid "Restore"
+msgstr "Restore"
+
 #. Button option
 #: src/project/tasks/DoneView.svelte
 msgid "Review"
@@ -1683,6 +1694,7 @@ msgstr "The time when you uploaded or downloaded these changes"
 msgid "These changes have not been uploaded yet. Ensure you're online and logged in to share your changes."
 msgstr "These changes have not been uploaded yet. Ensure you're online and logged in to share your changes."
 
+#. Alert text shown in EntryView when the currently displayed entry/word has been deleted
 #: src/project/browse/EntryView.svelte
 msgid "This {0} was deleted"
 msgstr "This {0} was deleted"
@@ -1881,6 +1893,11 @@ msgstr "Where are my projects?"
 msgid "Why is that?"
 msgstr "Why is that?"
 
+#. EntryView label for the current dictionary object when FieldWorks Lite is shown
+#: src/project/browse/EntryView.svelte
+msgid "word"
+msgstr "word"
+
 #. Relevant view: Lite
 #. Classic view equivalent: "Lexeme form" (field) / "Entry" (object)
 #: src/lib/activity/ActivityItemChangePreview.svelte
diff --git a/frontend/viewer/src/locales/es.po b/frontend/viewer/src/locales/es.po
index 3ebe6dda33..fae0d4b0ad 100644
--- a/frontend/viewer/src/locales/es.po
+++ b/frontend/viewer/src/locales/es.po
@@ -623,6 +623,11 @@ msgstr "Termina con"
 msgid "Entries missing..."
 msgstr "Entradas faltantes..."
 
+#. EntryView label for the current dictionary object when FieldWorks Classic is shown
+#: src/project/browse/EntryView.svelte
+msgid "entry"
+msgstr ""
+
 #. Relevant view: Classic
 #. Lite view equivalent: "Word"
 #. Item type label: dictionary entry (word/headword with definitions)
@@ -778,6 +783,7 @@ msgstr "Guardado de archivos no soportado"
 msgid "File too big"
 msgstr "Archivo demasiado grande"
 
+#. Accessible label for the browse search input that filters entries or words
 #: src/project/browse/SearchFilter.svelte
 msgid "Filter"
 msgstr ""
@@ -1409,6 +1415,11 @@ msgstr "Sustituir audio"
 msgid "Report a technical problem"
 msgstr "Reportar un problema técnico"
 
+#. Button label to restore a deleted Entry or Word inside EntryView
+#: src/project/browse/EntryView.svelte
+msgid "Restore"
+msgstr ""
+
 #. Button option
 #: src/project/tasks/DoneView.svelte
 msgid "Review"
@@ -1688,6 +1699,7 @@ msgstr "El tiempo cuando subiste o descargaste estos cambios"
 msgid "These changes have not been uploaded yet. Ensure you're online and logged in to share your changes."
 msgstr "Estos cambios no se han subido todavía. Asegúrate de que estás conectado e inicia sesión para compartir tus cambios."
 
+#. Alert text shown in EntryView when the currently displayed entry/word has been deleted
 #: src/project/browse/EntryView.svelte
 msgid "This {0} was deleted"
 msgstr ""
@@ -1886,6 +1898,11 @@ msgstr "¿Dónde están mis proyectos?"
 msgid "Why is that?"
 msgstr "¿Por qué?"
 
+#. EntryView label for the current dictionary object when FieldWorks Lite is shown
+#: src/project/browse/EntryView.svelte
+msgid "word"
+msgstr ""
+
 #. Relevant view: Lite
 #. Classic view equivalent: "Lexeme form" (field) / "Entry" (object)
 #: src/lib/activity/ActivityItemChangePreview.svelte
diff --git a/frontend/viewer/src/locales/fr.po b/frontend/viewer/src/locales/fr.po
index 8f6e6d98de..e88802e6ad 100644
--- a/frontend/viewer/src/locales/fr.po
+++ b/frontend/viewer/src/locales/fr.po
@@ -623,6 +623,11 @@ msgstr "Se termine par"
 msgid "Entries missing..."
 msgstr "Entrées manquantes..."
 
+#. EntryView label for the current dictionary object when FieldWorks Classic is shown
+#: src/project/browse/EntryView.svelte
+msgid "entry"
+msgstr ""
+
 #. Relevant view: Classic
 #. Lite view equivalent: "Word"
 #. Item type label: dictionary entry (word/headword with definitions)
@@ -778,6 +783,7 @@ msgstr "L'enregistrement du fichier n'est pas une option valable"
 msgid "File too big"
 msgstr "Fichier trop volumineux"
 
+#. Accessible label for the browse search input that filters entries or words
 #: src/project/browse/SearchFilter.svelte
 msgid "Filter"
 msgstr ""
@@ -1409,6 +1415,11 @@ msgstr "Remplacer l'audio"
 msgid "Report a technical problem"
 msgstr "Signaler un problème technique"
 
+#. Button label to restore a deleted Entry or Word inside EntryView
+#: src/project/browse/EntryView.svelte
+msgid "Restore"
+msgstr ""
+
 #. Button option
 #: src/project/tasks/DoneView.svelte
 msgid "Review"
@@ -1688,6 +1699,7 @@ msgstr "L'heure où vous avez téléchargé ou téléchargé ces modifications"
 msgid "These changes have not been uploaded yet. Ensure you're online and logged in to share your changes."
 msgstr "Ces modifications n'ont pas encore été téléchargées. Assurez-vous que vous êtes connecté et que vous êtes connecté pour partager vos modifications."
 
+#. Alert text shown in EntryView when the currently displayed entry/word has been deleted
 #: src/project/browse/EntryView.svelte
 msgid "This {0} was deleted"
 msgstr ""
@@ -1886,6 +1898,11 @@ msgstr "Où sont mes projets ?"
 msgid "Why is that?"
 msgstr "Pourquoi?"
 
+#. EntryView label for the current dictionary object when FieldWorks Lite is shown
+#: src/project/browse/EntryView.svelte
+msgid "word"
+msgstr ""
+
 #. Relevant view: Lite
 #. Classic view equivalent: "Lexeme form" (field) / "Entry" (object)
 #: src/lib/activity/ActivityItemChangePreview.svelte
diff --git a/frontend/viewer/src/locales/id.po b/frontend/viewer/src/locales/id.po
index ce9fb44a81..52d60562f2 100644
--- a/frontend/viewer/src/locales/id.po
+++ b/frontend/viewer/src/locales/id.po
@@ -623,6 +623,11 @@ msgstr "Diakhiri dengan"
 msgid "Entries missing..."
 msgstr "Entri yang hilang..."
 
+#. EntryView label for the current dictionary object when FieldWorks Classic is shown
+#: src/project/browse/EntryView.svelte
+msgid "entry"
+msgstr ""
+
 #. Relevant view: Classic
 #. Lite view equivalent: "Word"
 #. Item type label: dictionary entry (word/headword with definitions)
@@ -778,6 +783,7 @@ msgstr "Penyimpanan file tidak didukung"
 msgid "File too big"
 msgstr "File terlalu besar"
 
+#. Accessible label for the browse search input that filters entries or words
 #: src/project/browse/SearchFilter.svelte
 msgid "Filter"
 msgstr ""
@@ -1409,6 +1415,11 @@ msgstr "Ganti audio"
 msgid "Report a technical problem"
 msgstr "Laporkan masalah teknis"
 
+#. Button label to restore a deleted Entry or Word inside EntryView
+#: src/project/browse/EntryView.svelte
+msgid "Restore"
+msgstr ""
+
 #. Button option
 #: src/project/tasks/DoneView.svelte
 msgid "Review"
@@ -1688,6 +1699,7 @@ msgstr "Waktu ketika Anda mengunggah atau mengunduh perubahan ini"
 msgid "These changes have not been uploaded yet. Ensure you're online and logged in to share your changes."
 msgstr "Perubahan ini belum diunggah. Pastikan Anda online dan masuk untuk membagikan perubahan Anda."
 
+#. Alert text shown in EntryView when the currently displayed entry/word has been deleted
 #: src/project/browse/EntryView.svelte
 msgid "This {0} was deleted"
 msgstr ""
@@ -1886,6 +1898,11 @@ msgstr "Di mana proyek saya?"
 msgid "Why is that?"
 msgstr "Mengapa demikian?"
 
+#. EntryView label for the current dictionary object when FieldWorks Lite is shown
+#: src/project/browse/EntryView.svelte
+msgid "word"
+msgstr ""
+
 #. Relevant view: Lite
 #. Classic view equivalent: "Lexeme form" (field) / "Entry" (object)
 #: src/lib/activity/ActivityItemChangePreview.svelte
diff --git a/frontend/viewer/src/locales/ko.po b/frontend/viewer/src/locales/ko.po
index 87abc3e863..c13b085fd3 100644
--- a/frontend/viewer/src/locales/ko.po
+++ b/frontend/viewer/src/locales/ko.po
@@ -623,6 +623,11 @@ msgstr "로 끝납니다."
 msgid "Entries missing..."
 msgstr "항목이 누락되었습니다..."
 
+#. EntryView label for the current dictionary object when FieldWorks Classic is shown
+#: src/project/browse/EntryView.svelte
+msgid "entry"
+msgstr ""
+
 #. Relevant view: Classic
 #. Lite view equivalent: "Word"
 #. Item type label: dictionary entry (word/headword with definitions)
@@ -778,6 +783,7 @@ msgstr "파일 저장이 지원되지 않음"
 msgid "File too big"
 msgstr "파일이 너무 큼"
 
+#. Accessible label for the browse search input that filters entries or words
 #: src/project/browse/SearchFilter.svelte
 msgid "Filter"
 msgstr ""
@@ -1409,6 +1415,11 @@ msgstr "오디오 교체"
 msgid "Report a technical problem"
 msgstr "기술 문제 신고하기"
 
+#. Button label to restore a deleted Entry or Word inside EntryView
+#: src/project/browse/EntryView.svelte
+msgid "Restore"
+msgstr ""
+
 #. Button option
 #: src/project/tasks/DoneView.svelte
 msgid "Review"
@@ -1688,6 +1699,7 @@ msgstr "이러한 변경 사항을 업로드하거나 다운로드한 시간"
 msgid "These changes have not been uploaded yet. Ensure you're online and logged in to share your changes."
 msgstr "변경 내용이 아직 업로드되지 않았습니다. 변경 내용을 공유하려면 온라인 상태이고 로그인했는지 확인하세요."
 
+#. Alert text shown in EntryView when the currently displayed entry/word has been deleted
 #: src/project/browse/EntryView.svelte
 msgid "This {0} was deleted"
 msgstr ""
@@ -1886,6 +1898,11 @@ msgstr "내 프로젝트는 어디에 있나요?"
 msgid "Why is that?"
 msgstr "왜 그럴까요?"
 
+#. EntryView label for the current dictionary object when FieldWorks Lite is shown
+#: src/project/browse/EntryView.svelte
+msgid "word"
+msgstr ""
+
 #. Relevant view: Lite
 #. Classic view equivalent: "Lexeme form" (field) / "Entry" (object)
 #: src/lib/activity/ActivityItemChangePreview.svelte
diff --git a/frontend/viewer/src/locales/ms.po b/frontend/viewer/src/locales/ms.po
index 67cba07fd8..0520bc263e 100644
--- a/frontend/viewer/src/locales/ms.po
+++ b/frontend/viewer/src/locales/ms.po
@@ -623,6 +623,11 @@ msgstr "Berakhir dengan"
 msgid "Entries missing..."
 msgstr "Entri yang hilang..."
 
+#. EntryView label for the current dictionary object when FieldWorks Classic is shown
+#: src/project/browse/EntryView.svelte
+msgid "entry"
+msgstr "Entri"
+
 #. Relevant view: Classic
 #. Lite view equivalent: "Word"
 #. Item type label: dictionary entry (word/headword with definitions)
@@ -778,9 +783,10 @@ msgstr "Penyimpanan fail tidak disokong"
 msgid "File too big"
 msgstr "Fail terlalu besar"
 
+#. Accessible label for the browse search input that filters entries or words
 #: src/project/browse/SearchFilter.svelte
 msgid "Filter"
-msgstr ""
+msgstr "Tapis"
 
 #. Relevant view: Classic
 #. Lite view equivalent: "Filter # words"
@@ -1409,6 +1415,11 @@ msgstr "Ganti audio"
 msgid "Report a technical problem"
 msgstr "Laporkan masalah teknikal"
 
+#. Button label to restore a deleted Entry or Word inside EntryView
+#: src/project/browse/EntryView.svelte
+msgid "Restore"
+msgstr "Pulihkan"
+
 #. Button option
 #: src/project/tasks/DoneView.svelte
 msgid "Review"
@@ -1688,9 +1699,10 @@ msgstr "Masa apabila anda memuat naik atau memuat turun perubahan ini"
 msgid "These changes have not been uploaded yet. Ensure you're online and logged in to share your changes."
 msgstr "Perubahan ini belum dimuat naik. Pastikan anda dalam talian dan log masuk untuk berkongsi perubahan anda."
 
+#. Alert text shown in EntryView when the currently displayed entry/word has been deleted
 #: src/project/browse/EntryView.svelte
 msgid "This {0} was deleted"
-msgstr ""
+msgstr "Item {0} telah dipadam"
 
 #. Example text for i18n
 #: src/stories/i18n/i18n.stories.svelte
@@ -1886,6 +1898,11 @@ msgstr "Di manakah projek saya?"
 msgid "Why is that?"
 msgstr "Mengapa begitu?"
 
+#. EntryView label for the current dictionary object when FieldWorks Lite is shown
+#: src/project/browse/EntryView.svelte
+msgid "word"
+msgstr "Perkataan"
+
 #. Relevant view: Lite
 #. Classic view equivalent: "Lexeme form" (field) / "Entry" (object)
 #: src/lib/activity/ActivityItemChangePreview.svelte
diff --git a/frontend/viewer/src/locales/sw.po b/frontend/viewer/src/locales/sw.po
index 446df3d0d5..29f3f5eb9a 100644
--- a/frontend/viewer/src/locales/sw.po
+++ b/frontend/viewer/src/locales/sw.po
@@ -623,6 +623,11 @@ msgstr "Inaishia na"
 msgid "Entries missing..."
 msgstr "Ingizo linalokosa..."
 
+#. EntryView label for the current dictionary object when FieldWorks Classic is shown
+#: src/project/browse/EntryView.svelte
+msgid "entry"
+msgstr "Ingizo"
+
 #. Relevant view: Classic
 #. Lite view equivalent: "Word"
 #. Item type label: dictionary entry (word/headword with definitions)
@@ -778,9 +783,10 @@ msgstr "Hifadhi ya faili hailinganiswi"
 msgid "File too big"
 msgstr "Faili kubwa sana"
 
+#. Accessible label for the browse search input that filters entries or words
 #: src/project/browse/SearchFilter.svelte
 msgid "Filter"
-msgstr ""
+msgstr "Chuja"
 
 #. Relevant view: Classic
 #. Lite view equivalent: "Filter # words"
@@ -1409,6 +1415,11 @@ msgstr "Badili sauti"
 msgid "Report a technical problem"
 msgstr "Ripoti tatizo la kiufundi"
 
+#. Button label to restore a deleted Entry or Word inside EntryView
+#: src/project/browse/EntryView.svelte
+msgid "Restore"
+msgstr "Rejesha"
+
 #. Button option
 #: src/project/tasks/DoneView.svelte
 msgid "Review"
@@ -1688,9 +1699,10 @@ msgstr "Wakati ulipoweka au kupakua mabadiliko haya"
 msgid "These changes have not been uploaded yet. Ensure you're online and logged in to share your changes."
 msgstr "Mabadiliko haya hayajawekwa bado. Hakikisha unaunganishwa na kuingia ili kushiriki mabadiliko yako."
 
+#. Alert text shown in EntryView when the currently displayed entry/word has been deleted
 #: src/project/browse/EntryView.svelte
 msgid "This {0} was deleted"
-msgstr ""
+msgstr "Hili {0} limefutwa"
 
 #. Example text for i18n
 #: src/stories/i18n/i18n.stories.svelte
@@ -1886,6 +1898,11 @@ msgstr "Miradi yangu iko wapi?"
 msgid "Why is that?"
 msgstr "Kwa nini hiyo?"
 
+#. EntryView label for the current dictionary object when FieldWorks Lite is shown
+#: src/project/browse/EntryView.svelte
+msgid "word"
+msgstr "Neno"
+
 #. Relevant view: Lite
 #. Classic view equivalent: "Lexeme form" (field) / "Entry" (object)
 #: src/lib/activity/ActivityItemChangePreview.svelte
diff --git a/frontend/viewer/src/locales/vi.po b/frontend/viewer/src/locales/vi.po
index b5ec14a33b..d53dc47d39 100644
--- a/frontend/viewer/src/locales/vi.po
+++ b/frontend/viewer/src/locales/vi.po
@@ -623,6 +623,11 @@ msgstr "Kết thúc bằng"
 msgid "Entries missing..."
 msgstr "Các mục còn thiếu..."
 
+#. EntryView label for the current dictionary object when FieldWorks Classic is shown
+#: src/project/browse/EntryView.svelte
+msgid "entry"
+msgstr ""
+
 #. Relevant view: Classic
 #. Lite view equivalent: "Word"
 #. Item type label: dictionary entry (word/headword with definitions)
@@ -778,6 +783,7 @@ msgstr "Lưu tệp không được hỗ trợ"
 msgid "File too big"
 msgstr "Tệp quá lớn"
 
+#. Accessible label for the browse search input that filters entries or words
 #: src/project/browse/SearchFilter.svelte
 msgid "Filter"
 msgstr ""
@@ -1411,6 +1417,11 @@ msgstr "Thay thế âm thanh"
 msgid "Report a technical problem"
 msgstr "Báo lỗi kỹ thuật"
 
+#. Button label to restore a deleted Entry or Word inside EntryView
+#: src/project/browse/EntryView.svelte
+msgid "Restore"
+msgstr ""
+
 #. Button option
 #: src/project/tasks/DoneView.svelte
 msgid "Review"
@@ -1690,6 +1701,7 @@ msgstr "Thời gian bạn đã tải lên hoặc tải xuống các thay đổi
 msgid "These changes have not been uploaded yet. Ensure you're online and logged in to share your changes."
 msgstr "Những thay đổi này chưa được tải lên. Hãy đảm bảo bạn đang trực tuyến và đã đăng nhập để chia sẻ các thay đổi."
 
+#. Alert text shown in EntryView when the currently displayed entry/word has been deleted
 #: src/project/browse/EntryView.svelte
 msgid "This {0} was deleted"
 msgstr ""
@@ -1888,6 +1900,11 @@ msgstr "Dự án của tôi ở đâu?"
 msgid "Why is that?"
 msgstr "Tại sao vậy?"
 
+#. EntryView label for the current dictionary object when FieldWorks Lite is shown
+#: src/project/browse/EntryView.svelte
+msgid "word"
+msgstr ""
+
 #. Relevant view: Lite
 #. Classic view equivalent: "Lexeme form" (field) / "Entry" (object)
 #: src/lib/activity/ActivityItemChangePreview.svelte

From 340f407d5b4d87659bc2c4914e2997b815b490c0 Mon Sep 17 00:00:00 2001
From: Tim Haasdyk <tim_haasdyk@sil.org>
Date: Fri, 23 Jan 2026 16:56:33 +0100
Subject: [PATCH 42/42] fix(viewer): stabilize project view snapshots by
 waiting for rows

---
 frontend/viewer/tests/project-view-snapshots.test.ts | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/frontend/viewer/tests/project-view-snapshots.test.ts b/frontend/viewer/tests/project-view-snapshots.test.ts
index 262cae079a..437b077875 100644
--- a/frontend/viewer/tests/project-view-snapshots.test.ts
+++ b/frontend/viewer/tests/project-view-snapshots.test.ts
@@ -29,13 +29,12 @@ for (const colorScheme of ['light', 'dark'] as const) {
 }
 
 async function scrollToEntry(page: Page, search: string) {
-  await filterLocator(page).fill(search);
   await page.getByRole('row', { name: search }).click();
-  await filterLocator(page).clear();
 }
 
 async function waitForProjectViewReady(page: Page) {
   await expect(page.locator('.i-mdi-loading')).toHaveCount(0);
   await page.waitForFunction(() => document.fonts.ready);
   await expect(page.locator('.animate-pulse')).toHaveCount(0);
+  await expect(page.getByRole('row').first()).toBeVisible();
 }