From 12bb9584faaf740faf2ff14cd5bac9efd790e7a8 Mon Sep 17 00:00:00 2001
From: AaronPlave <aaronplave@gmail.com>
Date: Fri, 29 May 2026 15:28:45 -0700
Subject: [PATCH 1/5] feat: virtualize console All Problems list with
 @tanstack/svelte-virtual
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The All Problems tab (and other ConsoleLogs tabs) previously rendered
every BaseError via {#each}, producing ~5 DOM nodes per entry. On a plan
with 20k+ activity validation errors that put 100k+ nodes in the layout
tree, which made every global style invalidation (e.g. opening any
Stellar dropdown's focus trap) run a full recalc and forced 500ms+
UpdateLayoutTree on each click.

Virtualize the list with @tanstack/svelte-virtual using a stable
`const virtualizer` plus reactive `setOptions`, so the measurement cache
and scroll position survive prop updates (every $allProblems emit would
otherwise destroy them). Wire the virtualizer's onChange callback into
a scrollTick counter that participates as an explicit dep of the
totalSize/virtualItems reactives — the wrapper emits same-reference
writable updates that don't reliably retrigger Svelte template
expressions, and the canonical recreate pattern would lose scroll/
measurement state on every backend update.

Render the scroll container unconditionally (toggled via class:invisible
when there is nothing to show) so bind:this resolves before onMount,
matching the working canonical test setup. Move the empty state to a
sibling overlay so it can coexist with the always-mounted virtualized
list.

Also drop the competing overflow-y-auto on the Console slot wrapper —
it was acting as an outer scroll boundary that swallowed scroll events
the virtualizer needed to see.
---
 src/components/console/Console.svelte         |   2 +-
 .../console/views/ConsoleLogs.svelte          | 112 ++++++++++++++----
 2 files changed, 89 insertions(+), 25 deletions(-)

diff --git a/src/components/console/Console.svelte b/src/components/console/Console.svelte
index 3f08c23981..fec940f6d7 100644
--- a/src/components/console/Console.svelte
+++ b/src/components/console/Console.svelte
@@ -127,7 +127,7 @@
         </div>
       </Tabs.List>
       <!-- Always render content, it will be hidden by parent's Resizable pane -->
-      <div class="flex-1 overflow-y-auto">
+      <div class="min-h-0 flex-1 overflow-hidden">
         <slot />
       </div>
     </Tabs.Root>
diff --git a/src/components/console/views/ConsoleLogs.svelte b/src/components/console/views/ConsoleLogs.svelte
index 19777dcdab..53618b01a9 100644
--- a/src/components/console/views/ConsoleLogs.svelte
+++ b/src/components/console/views/ConsoleLogs.svelte
@@ -2,7 +2,8 @@
 
 <script lang="ts">
   import { Tabs } from '@nasa-jpl/stellar-svelte';
-  import { getContext } from 'svelte';
+  import { createVirtualizer } from '@tanstack/svelte-virtual';
+  import { getContext, onMount, tick } from 'svelte';
   import type { BaseError, LogLevel, LogMessage } from '../../../types/errors';
   import { ConsoleContextKey, type ConsoleContext } from '../Console.svelte';
   import EmptyState from '../EmptyState.svelte';
@@ -26,6 +27,7 @@
   let emptyStateTitle: string = '';
   let isScrolledToBottom = true;
   let scrollContainer: HTMLDivElement;
+  let scrollTick = 0;
   let logLevelSet: Set<LogLevel> = new Set();
   let visible: boolean = false;
 
@@ -60,6 +62,50 @@
         }
       });
 
+  const virtualizer = createVirtualizer<HTMLDivElement, HTMLDivElement>({
+    count: 0,
+    estimateSize: () => 24,
+    getScrollElement: () => scrollContainer,
+    overscan: 8,
+  });
+
+  let mounted = false;
+
+  function onVirtualizerChange() {
+    scrollTick++;
+  }
+
+  onMount(async () => {
+    await tick();
+    $virtualizer.setOptions({
+      count: filteredLogs.length,
+      estimateSize: () => 24,
+      getScrollElement: () => scrollContainer,
+      onChange: onVirtualizerChange,
+      overscan: 8,
+    });
+    mounted = true;
+  });
+
+  $: if (mounted) {
+    $virtualizer.setOptions({
+      count: filteredLogs.length,
+      estimateSize: () => 24,
+      getScrollElement: () => scrollContainer,
+      onChange: onVirtualizerChange,
+      overscan: 8,
+    });
+  }
+
+  // The TanStack virtualizer mutates its internal state on scroll/resize. Its writable
+  // emits same-ref notifications that don't reliably retrigger Svelte reactives, so
+  // we tie these computations to known-changing primitives: filteredLogs.length (count
+  // updates) and scrollTick (incremented from onScroll via rAF).
+  $: totalSize =
+    mounted && filteredLogs.length >= 0 && scrollContainer && scrollTick >= 0 ? $virtualizer.getTotalSize() : 0;
+  $: virtualItems =
+    mounted && filteredLogs.length >= 0 && scrollContainer && scrollTick >= 0 ? $virtualizer.getVirtualItems() : [];
+
   $: if (filteredLogs && scrollContainer) {
     scrollToBottomIfNeeded();
   }
@@ -81,21 +127,20 @@
   }
 
   function scrollToBottomIfNeeded() {
-    if (autoScroll && scrollContainer) {
+    if (autoScroll && scrollContainer && filteredLogs.length > 0) {
       window.requestAnimationFrame(() => {
         if (isScrolledToBottom && scrollContainer) {
-          scrollContainer.scrollTop = scrollContainer.scrollHeight;
+          $virtualizer.scrollToIndex(filteredLogs.length - 1, { align: 'end' });
         }
       });
     }
   }
 
   function onScroll() {
-    // Check if user is near the bottom of the scroll container
+    // Check if user is near the bottom of the scroll container (for autoscroll)
     const scrollPosition = scrollContainer.scrollTop;
     const containerHeight = scrollContainer.clientHeight;
     const totalHeight = scrollContainer.scrollHeight;
-
     // Add a small tolerance (e.g., 1 pixel) to account for rounding errors
     isScrolledToBottom = totalHeight - containerHeight <= scrollPosition + 1;
   }
@@ -103,30 +148,49 @@
 
 <Tabs.Content
   {value}
-  class="mt-0 h-full w-full overflow-x-hidden font-mono text-xs ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+  class="relative mt-0 h-full w-full overflow-hidden font-mono text-xs ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
 >
   <!-- TODO also show counts in dropdown -->
-  {#if hasLogs && filteredLogs.length}
-    <div class="flex h-full w-full">
-      <div class="flex w-full flex-col overflow-auto py-2" bind:this={scrollContainer} on:scroll={onScroll}>
-        {#if filteredLogs.length !== logs.length}
-          <div class="mb-1 ml-4 italic text-muted-foreground">{logs.length - filteredLogs.length} hidden</div>
-        {/if}
-        {#each filteredLogs as log}
-          {#if $$slots.message}
-            <ConsoleLog {defaultExpanded} {showLevel} {showTimestamp} {showType} {log}>
-              <svelte:fragment slot="message" let:log={slotLog}>
-                <slot name="message" log={slotLog} />
-              </svelte:fragment>
-            </ConsoleLog>
-          {:else}
-            <ConsoleLog {defaultExpanded} {showLevel} {showTimestamp} {showType} {log} />
-          {/if}
+  <div class="absolute inset-0 flex flex-col" class:invisible={!hasLogs || !filteredLogs.length}>
+    {#if filteredLogs.length !== logs.length}
+      <div class="mb-1 ml-4 mt-2 italic text-muted-foreground">{logs.length - filteredLogs.length} hidden</div>
+    {/if}
+    <div class="min-h-0 w-full flex-1 overflow-auto py-2" bind:this={scrollContainer} on:scroll={onScroll}>
+      <div style="height: {totalSize}px; position: relative; width: 100%;">
+        {#each virtualItems as virtualRow (virtualRow.key)}
+          <div
+            data-index={virtualRow.index}
+            use:$virtualizer.measureElement
+            style="left: 0; position: absolute; top: 0; transform: translateY({virtualRow.start}px); width: 100%;"
+          >
+            {#if $$slots.message}
+              <ConsoleLog
+                {defaultExpanded}
+                {showLevel}
+                {showTimestamp}
+                {showType}
+                log={filteredLogs[virtualRow.index]}
+              >
+                <svelte:fragment slot="message" let:log={slotLog}>
+                  <slot name="message" log={slotLog} />
+                </svelte:fragment>
+              </ConsoleLog>
+            {:else}
+              <ConsoleLog
+                {defaultExpanded}
+                {showLevel}
+                {showTimestamp}
+                {showType}
+                log={filteredLogs[virtualRow.index]}
+              />
+            {/if}
+          </div>
         {/each}
       </div>
     </div>
-  {:else}
-    <div class="flex h-full">
+  </div>
+  {#if !hasLogs || !filteredLogs.length}
+    <div class="absolute inset-0 flex h-full">
       <EmptyState title={emptyStateTitle} />
     </div>
   {/if}

From 70b41759edbf7b74fb46c91e68fffb7e4f462040 Mon Sep 17 00:00:00 2001
From: AaronPlave <aaronplave@gmail.com>
Date: Mon, 1 Jun 2026 13:57:24 -0700
Subject: [PATCH 2/5] Simplify

---
 .../console/views/ConsoleLogs.svelte          | 55 +++++++------------
 1 file changed, 21 insertions(+), 34 deletions(-)

diff --git a/src/components/console/views/ConsoleLogs.svelte b/src/components/console/views/ConsoleLogs.svelte
index 53618b01a9..5f892e517c 100644
--- a/src/components/console/views/ConsoleLogs.svelte
+++ b/src/components/console/views/ConsoleLogs.svelte
@@ -29,6 +29,7 @@
   let scrollContainer: HTMLDivElement;
   let scrollTick = 0;
   let logLevelSet: Set<LogLevel> = new Set();
+  let mounted = false;
   let visible: boolean = false;
 
   $: visible = $selectedTabStore === value;
@@ -69,42 +70,33 @@
     overscan: 8,
   });
 
-  let mounted = false;
-
-  function onVirtualizerChange() {
-    scrollTick++;
-  }
-
   onMount(async () => {
     await tick();
-    $virtualizer.setOptions({
-      count: filteredLogs.length,
-      estimateSize: () => 24,
-      getScrollElement: () => scrollContainer,
-      onChange: onVirtualizerChange,
-      overscan: 8,
-    });
     mounted = true;
   });
 
+  // @tanstack/svelte-virtual emits same-reference writable.set on every notify; Svelte 4's
+  // $$invalidate uses a strict-equality bailout, so auto-sub of `$virtualizer` never fires
+  // the reactives below. Route the virtualizer's onChange through a primitive counter that
+  // does pass that check, so the reactives re-fire and pull fresh values out of the
+  // (in-place mutated) virtualizer instance.
   $: if (mounted) {
     $virtualizer.setOptions({
       count: filteredLogs.length,
       estimateSize: () => 24,
       getScrollElement: () => scrollContainer,
-      onChange: onVirtualizerChange,
+      onChange: () => scrollTick++,
       overscan: 8,
     });
   }
 
-  // The TanStack virtualizer mutates its internal state on scroll/resize. Its writable
-  // emits same-ref notifications that don't reliably retrigger Svelte reactives, so
-  // we tie these computations to known-changing primitives: filteredLogs.length (count
-  // updates) and scrollTick (incremented from onScroll via rAF).
-  $: totalSize =
-    mounted && filteredLogs.length >= 0 && scrollContainer && scrollTick >= 0 ? $virtualizer.getTotalSize() : 0;
-  $: virtualItems =
-    mounted && filteredLogs.length >= 0 && scrollContainer && scrollTick >= 0 ? $virtualizer.getVirtualItems() : [];
+  // Track filteredLogs.length so vState re-computes when count changes (setOptions
+  // doesn't fire notify when scrollElement is unchanged, so scrollTick alone wouldn't
+  // catch count-only updates).
+  $: vState =
+    mounted && scrollContainer && filteredLogs.length >= 0 && scrollTick >= 0
+      ? { items: $virtualizer.getVirtualItems(), totalSize: $virtualizer.getTotalSize() }
+      : { items: [] as ReturnType<typeof $virtualizer.getVirtualItems>, totalSize: 0 };
 
   $: if (filteredLogs && scrollContainer) {
     scrollToBottomIfNeeded();
@@ -137,10 +129,11 @@
   }
 
   function onScroll() {
-    // Check if user is near the bottom of the scroll container (for autoscroll)
+    // Check if user is near the bottom of the scroll container
     const scrollPosition = scrollContainer.scrollTop;
     const containerHeight = scrollContainer.clientHeight;
     const totalHeight = scrollContainer.scrollHeight;
+
     // Add a small tolerance (e.g., 1 pixel) to account for rounding errors
     isScrolledToBottom = totalHeight - containerHeight <= scrollPosition + 1;
   }
@@ -148,29 +141,23 @@
 
 <Tabs.Content
   {value}
-  class="relative mt-0 h-full w-full overflow-hidden font-mono text-xs ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+  class="relative mt-0 h-full w-full overflow-x-hidden font-mono text-xs ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
 >
   <!-- TODO also show counts in dropdown -->
   <div class="absolute inset-0 flex flex-col" class:invisible={!hasLogs || !filteredLogs.length}>
     {#if filteredLogs.length !== logs.length}
-      <div class="mb-1 ml-4 mt-2 italic text-muted-foreground">{logs.length - filteredLogs.length} hidden</div>
+      <div class="mb-1 ml-4 italic text-muted-foreground">{logs.length - filteredLogs.length} hidden</div>
     {/if}
     <div class="min-h-0 w-full flex-1 overflow-auto py-2" bind:this={scrollContainer} on:scroll={onScroll}>
-      <div style="height: {totalSize}px; position: relative; width: 100%;">
-        {#each virtualItems as virtualRow (virtualRow.key)}
+      <div style="height: {vState.totalSize}px; position: relative; width: 100%;">
+        {#each vState.items as virtualRow (virtualRow.key)}
           <div
             data-index={virtualRow.index}
             use:$virtualizer.measureElement
             style="left: 0; position: absolute; top: 0; transform: translateY({virtualRow.start}px); width: 100%;"
           >
             {#if $$slots.message}
-              <ConsoleLog
-                {defaultExpanded}
-                {showLevel}
-                {showTimestamp}
-                {showType}
-                log={filteredLogs[virtualRow.index]}
-              >
+              <ConsoleLog {defaultExpanded} {showLevel} {showTimestamp} {showType} log={filteredLogs[virtualRow.index]}>
                 <svelte:fragment slot="message" let:log={slotLog}>
                   <slot name="message" log={slotLog} />
                 </svelte:fragment>

From 5d5669a01b2ac1649ee8282efe7febcb5f5dba21 Mon Sep 17 00:00:00 2001
From: AaronPlave <aaronplave@gmail.com>
Date: Tue, 2 Jun 2026 13:54:51 -0700
Subject: [PATCH 3/5] defer virtualized console row measurement to toggle time

---
 .../console/views/ConsoleLog.svelte           | 43 ++++++++-
 .../console/views/ConsoleLogs.svelte          | 94 ++++++++++++++-----
 2 files changed, 107 insertions(+), 30 deletions(-)

diff --git a/src/components/console/views/ConsoleLog.svelte b/src/components/console/views/ConsoleLog.svelte
index cb53da27de..6e614217da 100644
--- a/src/components/console/views/ConsoleLog.svelte
+++ b/src/components/console/views/ConsoleLog.svelte
@@ -3,7 +3,7 @@
 <script lang="ts">
   import { cn } from '@nasa-jpl/stellar-svelte';
   import { ChevronDown, ChevronRight } from 'lucide-svelte';
-  import { onMount } from 'svelte';
+  import { createEventDispatcher, onMount, tick } from 'svelte';
   import type { BaseError, LogMessage } from '../../../types/errors';
   import { isLogMessage } from '../../../utilities/errors';
 
@@ -11,12 +11,18 @@
   import { formatMS } from '../../../utilities/time';
 
   export let log: BaseError;
+  export let index: number = -1;
   export let defaultExpanded: boolean = false;
   export let showLevel: boolean = true;
   export let showTimestamp: boolean = true;
   export let showLongTimestamp: boolean = true;
   export let showType: boolean = true;
 
+  const dispatch = createEventDispatcher<{
+    toggle: { index: number; open: boolean; size: number };
+  }>();
+
+  let detailsEl: HTMLDetailsElement;
   let expandable: boolean = false;
   let leftContents: HTMLDivElement;
   let open: boolean = defaultExpanded;
@@ -30,10 +36,37 @@
   $: renderedMessage =
     !log.message.trim() && log.data && !(expandable && open) ? safeStringify(log.data) : (log.message ?? '');
 
+  // All layout measurement is deferred to toggle time. Per-row measurement on mount
+  // (via `use:measureElement` or onMount reads) was the dominant cost during scroll —
+  // each row mount forced a sync layout, scaling with overscan and scroll velocity.
+  // On toggle we read once, then push the new size into the virtualizer imperatively
+  // via `resizeItem` (handled by the parent through the dispatched event).
+  async function dispatchSize() {
+    if (index < 0) {
+      return;
+    }
+    await tick();
+    if (!detailsEl) {
+      return;
+    }
+    const size = detailsEl.getBoundingClientRect().height;
+    dispatch('toggle', { index, open, size });
+  }
+
+  async function onToggle() {
+    if (open && leftContents && !expansionPadding) {
+      expansionPadding = leftContents.clientWidth + 12;
+    }
+    await dispatchSize();
+  }
+
+  // When a row mounts already open (e.g. it was open before the virtualizer
+  // recycled it out of view), the browser does not fire a `toggle` event, so
+  // we push the real size to the virtualizer once on mount. Collapsed rows
+  // skip this — they match the estimate, so no measurement is needed.
   onMount(() => {
-    // On mount, calculate the amount of padding needed for the expansion content
-    if (leftContents) {
-      expansionPadding = leftContents.clientWidth + 12; // Add 12px to account for gaps
+    if (open) {
+      dispatchSize();
     }
   });
 
@@ -72,8 +105,10 @@
 
 <!-- svelte-ignore a11y-no-noninteractive-element-interactions -->
 <details
+  bind:this={detailsEl}
   class="group"
   bind:open
+  on:toggle={onToggle}
   on:keypress={e => {
     // prevent expansion when no content is available
     if (!expandable) {
diff --git a/src/components/console/views/ConsoleLogs.svelte b/src/components/console/views/ConsoleLogs.svelte
index 5f892e517c..0f3658b1ed 100644
--- a/src/components/console/views/ConsoleLogs.svelte
+++ b/src/components/console/views/ConsoleLogs.svelte
@@ -23,6 +23,8 @@
   const consoleContext = getContext<ConsoleContext>(ConsoleContextKey);
   const filterStore = consoleContext?.filter;
   const selectedTabStore = consoleContext?.selectedTab;
+  const estimatedRowHeight = 20;
+  const overscan = 30;
 
   let emptyStateTitle: string = '';
   let isScrolledToBottom = true;
@@ -30,6 +32,8 @@
   let scrollTick = 0;
   let logLevelSet: Set<LogLevel> = new Set();
   let mounted = false;
+  let openIndices: Set<number> = new Set();
+  let prevFilterKey: string | null = null;
   let visible: boolean = false;
 
   $: visible = $selectedTabStore === value;
@@ -65,9 +69,9 @@
 
   const virtualizer = createVirtualizer<HTMLDivElement, HTMLDivElement>({
     count: 0,
-    estimateSize: () => 24,
+    estimateSize: () => estimatedRowHeight,
     getScrollElement: () => scrollContainer,
-    overscan: 8,
+    overscan,
   });
 
   onMount(async () => {
@@ -83,10 +87,10 @@
   $: if (mounted) {
     $virtualizer.setOptions({
       count: filteredLogs.length,
-      estimateSize: () => 24,
+      estimateSize: () => estimatedRowHeight,
       getScrollElement: () => scrollContainer,
       onChange: () => scrollTick++,
-      overscan: 8,
+      overscan,
     });
   }
 
@@ -102,6 +106,21 @@
     scrollToBottomIfNeeded();
   }
 
+  // When the filter or log-level selection changes, the index to log mapping shifts,
+  // so any indices we've tracked as "open" now point at different logs. Reset the
+  // open set and snap the virtualizer's size cache for those indices back to the
+  // estimate, so previously-expanded slots don't leave gaps in the new view.
+  $: {
+    const filterKey = `${$filterStore ?? ''}|${(logLevels ?? []).join(',')}`;
+    if (prevFilterKey !== null && filterKey !== prevFilterKey && openIndices.size > 0) {
+      if (mounted) {
+        openIndices.forEach(idx => $virtualizer.resizeItem(idx, estimatedRowHeight));
+      }
+      openIndices = new Set();
+    }
+    prevFilterKey = filterKey;
+  }
+
   $: {
     if (!logs.length) {
       emptyStateTitle = emptyStateMessage;
@@ -128,6 +147,17 @@
     }
   }
 
+  function onRowToggle(e: CustomEvent<{ index: number; open: boolean; size: number }>) {
+    const { index, open, size } = e.detail;
+    if (open) {
+      openIndices.add(index);
+    } else {
+      openIndices.delete(index);
+    }
+    openIndices = new Set(openIndices);
+    $virtualizer.resizeItem(index, size);
+  }
+
   function onScroll() {
     // Check if user is near the bottom of the scroll container
     const scrollPosition = scrollContainer.scrollTop;
@@ -146,32 +176,44 @@
   <!-- TODO also show counts in dropdown -->
   <div class="absolute inset-0 flex flex-col" class:invisible={!hasLogs || !filteredLogs.length}>
     {#if filteredLogs.length !== logs.length}
-      <div class="mb-1 ml-4 italic text-muted-foreground">{logs.length - filteredLogs.length} hidden</div>
+      <div class="my-1 border-b pb-1 pl-4 italic text-muted-foreground">{logs.length - filteredLogs.length} hidden</div>
     {/if}
     <div class="min-h-0 w-full flex-1 overflow-auto py-2" bind:this={scrollContainer} on:scroll={onScroll}>
       <div style="height: {vState.totalSize}px; position: relative; width: 100%;">
         {#each vState.items as virtualRow (virtualRow.key)}
-          <div
-            data-index={virtualRow.index}
-            use:$virtualizer.measureElement
-            style="left: 0; position: absolute; top: 0; transform: translateY({virtualRow.start}px); width: 100%;"
-          >
-            {#if $$slots.message}
-              <ConsoleLog {defaultExpanded} {showLevel} {showTimestamp} {showType} log={filteredLogs[virtualRow.index]}>
-                <svelte:fragment slot="message" let:log={slotLog}>
-                  <slot name="message" log={slotLog} />
-                </svelte:fragment>
-              </ConsoleLog>
-            {:else}
-              <ConsoleLog
-                {defaultExpanded}
-                {showLevel}
-                {showTimestamp}
-                {showType}
-                log={filteredLogs[virtualRow.index]}
-              />
-            {/if}
-          </div>
+          {@const log = filteredLogs[virtualRow.index]}
+          {#if log}
+            <div
+              data-index={virtualRow.index}
+              style="left: 0; position: absolute; top: 0; transform: translateY({virtualRow.start}px); width: 100%;"
+            >
+              {#if $$slots.message}
+                <ConsoleLog
+                  index={virtualRow.index}
+                  defaultExpanded={defaultExpanded || openIndices.has(virtualRow.index)}
+                  {showLevel}
+                  {showTimestamp}
+                  {showType}
+                  {log}
+                  on:toggle={onRowToggle}
+                >
+                  <svelte:fragment slot="message" let:log={slotLog}>
+                    <slot name="message" log={slotLog} />
+                  </svelte:fragment>
+                </ConsoleLog>
+              {:else}
+                <ConsoleLog
+                  index={virtualRow.index}
+                  defaultExpanded={defaultExpanded || openIndices.has(virtualRow.index)}
+                  {showLevel}
+                  {showTimestamp}
+                  {showType}
+                  {log}
+                  on:toggle={onRowToggle}
+                />
+              {/if}
+            </div>
+          {/if}
         {/each}
       </div>
     </div>

From be549c4c4546d5a42aae03e15b4953ffdf0c0614 Mon Sep 17 00:00:00 2001
From: AaronPlave <aaronplave@gmail.com>
Date: Fri, 5 Jun 2026 16:14:08 -0700
Subject: [PATCH 4/5] e2e tests and refactor

---
 e2e-tests/tests/plan-console.test.ts          | 112 ++++++++++++++++++
 e2e-tests/tests/workspace.test.ts             |  27 +++++
 e2e-tests/utilities/api.ts                    |   4 +-
 .../console/views/ConsoleLogs.svelte          |  46 ++++---
 4 files changed, 163 insertions(+), 26 deletions(-)
 create mode 100644 e2e-tests/tests/plan-console.test.ts

diff --git a/e2e-tests/tests/plan-console.test.ts b/e2e-tests/tests/plan-console.test.ts
new file mode 100644
index 0000000000..1538e73c5c
--- /dev/null
+++ b/e2e-tests/tests/plan-console.test.ts
@@ -0,0 +1,112 @@
+import test, { expect } from '@playwright/test';
+import { Status } from '../../src/enums/status.js';
+import { setupTest, teardownTest, type FullSetupResult } from '../utilities/api.js';
+
+let setup: FullSetupResult;
+
+test.beforeAll(async ({ browser }) => {
+  setup = await setupTest(browser);
+  await setup.plan.goto();
+});
+
+test.afterAll(async () => {
+  await teardownTest(setup);
+});
+
+test.describe.serial('Plan error console', () => {
+  test('All Problems aggregates BakeBananaBread validation errors', async () => {
+    await setup.plan.waitForActivityCheckingStatus(Status.Complete);
+    await setup.plan.addActivity('BakeBananaBread');
+    await setup.plan.waitForActivityCheckingStatus(Status.Failed);
+
+    // Open the console at the All Problems tab — clicking a tab always expands the pane.
+    const allProblemsTab = setup.plan.consoleContainer.getByRole('tab', { name: /All Problems/ });
+    await allProblemsTab.click();
+    await expect(allProblemsTab).toHaveAttribute('data-state', 'active');
+
+    // Validation errors for the new activity should be present.
+    const tabPanel = setup.plan.consoleContainer.getByRole('tabpanel').first();
+    await expect(tabPanel.getByText('BakeBananaBread').first()).toBeVisible();
+  });
+
+  test('Search filter narrows All Problems and shows the empty-state message', async () => {
+    const search = setup.plan.consoleContainer.getByPlaceholder('Search');
+    const tabPanel = setup.plan.consoleContainer.getByRole('tabpanel').first();
+
+    await search.fill('BakeBananaBread');
+    await expect(tabPanel.getByText('BakeBananaBread').first()).toBeVisible();
+
+    await search.fill('definitely-no-such-error');
+    await expect(tabPanel.getByText(/No matches/i).first()).toBeVisible();
+
+    await search.fill('');
+  });
+
+  test('Expanding a row reveals its full timestamp', async () => {
+    const tabPanel = setup.plan.consoleContainer.getByRole('tabpanel').first();
+    const firstRow = tabPanel.locator('[data-index="0"]').first();
+    const details = firstRow.locator('details');
+
+    await expect(details).not.toHaveAttribute('open', '');
+    await firstRow.locator('summary').click();
+    await expect(details).toHaveAttribute('open', '');
+    await expect(firstRow.getByText(/Timestamp:/).first()).toBeVisible();
+
+    // Collapse to leave clean state for the next test.
+    await firstRow.locator('summary').click();
+    await expect(details).not.toHaveAttribute('open', '');
+  });
+
+  test('Open row state survives scrolling out of view and back', async () => {
+    // Bulk-create invalid activities via the API so the virtualized list is long
+    // enough that the first row gets recycled out of the DOM when scrolled away.
+    const bulk = Array.from({ length: 60 }, () =>
+      setup.api.createActivityDirective({
+        anchor_id: null,
+        anchored_to_start: true,
+        arguments: {},
+        metadata: {},
+        name: 'bad',
+        plan_id: setup.planId,
+        start_offset: 'PT0S',
+        type: 'BakeBananaBread',
+      }),
+    );
+    await Promise.all(bulk);
+    await setup.plan.waitForActivityCheckingStatus(Status.Failed);
+
+    // Wait for X/X in the activity-checking menu (matching numerator + denominator
+    // via the backreference) — strongest signal that the full batch has validated.
+    await setup.plan.hoverMenu(setup.plan.navButtonActivityChecking);
+    await expect(setup.plan.navButtonActivityCheckingMenu).toContainText(
+      /(\d+)\/\1 activities checked/,
+      { timeout: 30_000 },
+    );
+
+    // $allProblems regenerates `new Date()` timestamps on every derive, so
+    // `[data-index="0"]` is unstable. Pin to a directive ID instead — the row's
+    // message embeds it, so a hasText filter survives re-sorts and remounts.
+    const allProblemsTab = setup.plan.consoleContainer.getByRole('tab', { name: /All Problems/ });
+    await allProblemsTab.click();
+    const tabPanel = setup.plan.consoleContainer.getByRole('tabpanel').first();
+    const firstRowText = await tabPanel.locator('[data-index="0"]').first().textContent();
+    const idMatch = firstRowText?.match(/Activity Directive (\d+)/);
+    if (!idMatch) {
+      throw new Error(`Could not extract directive ID from first row: ${firstRowText}`);
+    }
+    const targetRow = tabPanel
+      .locator('details')
+      .filter({ hasText: `Activity Directive ${idMatch[1]} ` });
+
+    await targetRow.locator('summary').click();
+    await expect(targetRow).toHaveAttribute('open', '');
+
+    // Scroll the virtualized list to the bottom and back. After the roundtrip the
+    // targeted row must still be open — that's the contract `openIndices` keeps
+    // when the virtualizer remounts a recycled row.
+    const scrollContainer = tabPanel.getByTestId('console-logs-list');
+    await scrollContainer.evaluate(el => el.scrollTo(0, el.scrollHeight));
+    await scrollContainer.evaluate(el => el.scrollTo(0, 0));
+    await expect(targetRow).toHaveAttribute('open', '');
+  });
+});
diff --git a/e2e-tests/tests/workspace.test.ts b/e2e-tests/tests/workspace.test.ts
index bd3dc33039..44c1474941 100644
--- a/e2e-tests/tests/workspace.test.ts
+++ b/e2e-tests/tests/workspace.test.ts
@@ -754,6 +754,33 @@ test.describe.serial('Workspace', () => {
     await expect(consoleNode.getByRole('tab', { name: 'Adaptation' })).toHaveAttribute('data-state', 'active');
   });
 
+  test('Linting tab populates from invalid sequence content and respects the search filter', async () => {
+    const { sequenceName } = await workspace.createSequence();
+    await workspace.searchForFileAndWait(sequenceName);
+    await workspace.clickFile(sequenceName);
+
+    // Type a command that's not in the dictionary so the CodeMirror linter fires.
+    await workspace.fillSequenceContent('R00:00:00 ZZZ_NOT_A_REAL_COMMAND\n');
+    await workspace.saveSequence();
+
+    const consoleNode = setup.page.getByTestId('console');
+    await consoleNode.getByRole('tab', { name: 'Linting' }).click();
+    const tabPanel = consoleNode.getByRole('tabpanel').first();
+    await expect(tabPanel.getByText(sequenceName).first()).toBeVisible();
+
+    // Now that we know the Linting tab has at least one row, exercise the shared
+    // ConsoleLogs filter path on the workspace side. A filter that excludes every
+    // row should swap the list for the noMatchingResultsMessage empty state.
+    const search = consoleNode.getByPlaceholder('Search');
+    await search.fill('definitely-no-such-lint-error');
+    await expect(tabPanel.getByText(/No matches/i).first()).toBeVisible();
+    await search.fill('');
+    await expect(tabPanel.getByText(sequenceName).first()).toBeVisible();
+
+    await workspace.searchForFileAndWait(sequenceName);
+    await workspace.deleteFile(sequenceName);
+  });
+
   test('Users not authorized to modify the workspace should not be able to', async () => {
     // Use userB's separate browser context - no login/logout needed!
     // userB is NOT a collaborator on this workspace
diff --git a/e2e-tests/utilities/api.ts b/e2e-tests/utilities/api.ts
index 3658093bff..6ad2b60871 100644
--- a/e2e-tests/utilities/api.ts
+++ b/e2e-tests/utilities/api.ts
@@ -62,10 +62,10 @@ export class AerieApi {
   }
 
   async createActivityDirective(activityDirective: ActivityDirectiveInsertInput): Promise<{ id: number }> {
-    const data = await this.gqlQuery<{ createActivityDirective: { id: number } }>(gql.CREATE_ACTIVITY_DIRECTIVE, {
+    const data = await this.gqlQuery<{ insert_activity_directive_one: { id: number } }>(gql.CREATE_ACTIVITY_DIRECTIVE, {
       activityDirectiveInsertInput: activityDirective,
     });
-    return { id: data.createActivityDirective.id };
+    return { id: data.insert_activity_directive_one.id };
   }
 
   async createConstraint(constraint: ConstraintDefinitionInsertInput): Promise<{ id: number }> {
diff --git a/src/components/console/views/ConsoleLogs.svelte b/src/components/console/views/ConsoleLogs.svelte
index 0f3658b1ed..bfe212b202 100644
--- a/src/components/console/views/ConsoleLogs.svelte
+++ b/src/components/console/views/ConsoleLogs.svelte
@@ -67,11 +67,14 @@
         }
       });
 
-  const virtualizer = createVirtualizer<HTMLDivElement, HTMLDivElement>({
-    count: 0,
+  const baseVirtualizerOptions = {
     estimateSize: () => estimatedRowHeight,
     getScrollElement: () => scrollContainer,
     overscan,
+  };
+  const virtualizer = createVirtualizer<HTMLDivElement, HTMLDivElement>({
+    ...baseVirtualizerOptions,
+    count: 0,
   });
 
   onMount(async () => {
@@ -86,11 +89,9 @@
   // (in-place mutated) virtualizer instance.
   $: if (mounted) {
     $virtualizer.setOptions({
+      ...baseVirtualizerOptions,
       count: filteredLogs.length,
-      estimateSize: () => estimatedRowHeight,
-      getScrollElement: () => scrollContainer,
       onChange: () => scrollTick++,
-      overscan,
     });
   }
 
@@ -178,39 +179,36 @@
     {#if filteredLogs.length !== logs.length}
       <div class="my-1 border-b pb-1 pl-4 italic text-muted-foreground">{logs.length - filteredLogs.length} hidden</div>
     {/if}
-    <div class="min-h-0 w-full flex-1 overflow-auto py-2" bind:this={scrollContainer} on:scroll={onScroll}>
+    <div
+      class="min-h-0 w-full flex-1 overflow-auto py-2"
+      data-testid="console-logs-list"
+      bind:this={scrollContainer}
+      on:scroll={onScroll}
+    >
       <div style="height: {vState.totalSize}px; position: relative; width: 100%;">
         {#each vState.items as virtualRow (virtualRow.key)}
           {@const log = filteredLogs[virtualRow.index]}
           {#if log}
+            {@const rowProps = {
+              defaultExpanded: defaultExpanded || openIndices.has(virtualRow.index),
+              index: virtualRow.index,
+              log,
+              showLevel,
+              showTimestamp,
+              showType,
+            }}
             <div
               data-index={virtualRow.index}
               style="left: 0; position: absolute; top: 0; transform: translateY({virtualRow.start}px); width: 100%;"
             >
               {#if $$slots.message}
-                <ConsoleLog
-                  index={virtualRow.index}
-                  defaultExpanded={defaultExpanded || openIndices.has(virtualRow.index)}
-                  {showLevel}
-                  {showTimestamp}
-                  {showType}
-                  {log}
-                  on:toggle={onRowToggle}
-                >
+                <ConsoleLog {...rowProps} on:toggle={onRowToggle}>
                   <svelte:fragment slot="message" let:log={slotLog}>
                     <slot name="message" log={slotLog} />
                   </svelte:fragment>
                 </ConsoleLog>
               {:else}
-                <ConsoleLog
-                  index={virtualRow.index}
-                  defaultExpanded={defaultExpanded || openIndices.has(virtualRow.index)}
-                  {showLevel}
-                  {showTimestamp}
-                  {showType}
-                  {log}
-                  on:toggle={onRowToggle}
-                />
+                <ConsoleLog {...rowProps} on:toggle={onRowToggle} />
               {/if}
             </div>
           {/if}

From 38236610c1a61651eb1ab8cee8c05c12d9ccef95 Mon Sep 17 00:00:00 2001
From: AaronPlave <aaronplave@gmail.com>
Date: Fri, 5 Jun 2026 16:25:05 -0700
Subject: [PATCH 5/5] Lint fix

---
 e2e-tests/tests/plan-console.test.ts | 11 ++++-------
 1 file changed, 4 insertions(+), 7 deletions(-)

diff --git a/e2e-tests/tests/plan-console.test.ts b/e2e-tests/tests/plan-console.test.ts
index 1538e73c5c..2f6a1a6c68 100644
--- a/e2e-tests/tests/plan-console.test.ts
+++ b/e2e-tests/tests/plan-console.test.ts
@@ -78,10 +78,9 @@ test.describe.serial('Plan error console', () => {
     // Wait for X/X in the activity-checking menu (matching numerator + denominator
     // via the backreference) — strongest signal that the full batch has validated.
     await setup.plan.hoverMenu(setup.plan.navButtonActivityChecking);
-    await expect(setup.plan.navButtonActivityCheckingMenu).toContainText(
-      /(\d+)\/\1 activities checked/,
-      { timeout: 30_000 },
-    );
+    await expect(setup.plan.navButtonActivityCheckingMenu).toContainText(/(\d+)\/\1 activities checked/, {
+      timeout: 30_000,
+    });
 
     // $allProblems regenerates `new Date()` timestamps on every derive, so
     // `[data-index="0"]` is unstable. Pin to a directive ID instead — the row's
@@ -94,9 +93,7 @@ test.describe.serial('Plan error console', () => {
     if (!idMatch) {
       throw new Error(`Could not extract directive ID from first row: ${firstRowText}`);
     }
-    const targetRow = tabPanel
-      .locator('details')
-      .filter({ hasText: `Activity Directive ${idMatch[1]} ` });
+    const targetRow = tabPanel.locator('details').filter({ hasText: `Activity Directive ${idMatch[1]} ` });
 
     await targetRow.locator('summary').click();
     await expect(targetRow).toHaveAttribute('open', '');