From ce60862976aab80f3783a8bd8fd82fe1e96ff457 Mon Sep 17 00:00:00 2001
From: Bruce Schultz <bschultz013@gmail.com>
Date: Tue, 26 May 2026 08:34:02 +0200
Subject: [PATCH 1/9] feat: add FlatLogLine type and flattenLogs utility

---
 app/types/logs.ts               | 25 ++++++++++++++
 test/utils/flatten-logs.test.ts | 60 +++++++++++++++++++++++++++++++++
 2 files changed, 85 insertions(+)
 create mode 100644 app/types/logs.ts
 create mode 100644 test/utils/flatten-logs.test.ts

diff --git a/app/types/logs.ts b/app/types/logs.ts
new file mode 100644
index 0000000..5a11198
--- /dev/null
+++ b/app/types/logs.ts
@@ -0,0 +1,25 @@
+import type { PodLog } from "~/services/Api";
+
+export interface FlatLogLine {
+  content: string;
+  level?: string | null;
+  timestamp: string;
+  isStacktrace: boolean;
+}
+
+export function flattenLogs(logs: PodLog[]): FlatLogLine[] {
+  return logs.flatMap((entry) => [
+    {
+      content: entry.message,
+      level: entry.level,
+      timestamp: entry.timestamp,
+      isStacktrace: false,
+    },
+    ...(entry.stacktrace?.split("\n") ?? []).map((line) => ({
+      content: line,
+      level: null,
+      timestamp: entry.timestamp,
+      isStacktrace: true,
+    })),
+  ]);
+}
diff --git a/test/utils/flatten-logs.test.ts b/test/utils/flatten-logs.test.ts
new file mode 100644
index 0000000..a8f5fe7
--- /dev/null
+++ b/test/utils/flatten-logs.test.ts
@@ -0,0 +1,60 @@
+import { describe, expect, it } from "vitest";
+import { flattenLogs } from "~/types/logs";
+import type { PodLog } from "~/services/Api";
+
+const makeLog = (overrides: Partial<PodLog> = {}): PodLog => ({
+  timestamp: "2024-01-01T00:00:00Z",
+  message: "hello",
+  level: "INFO",
+  stacktrace: null,
+  ...overrides,
+});
+
+describe("flattenLogs", () => {
+  it("returns empty array for empty input", () => {
+    expect(flattenLogs([])).toEqual([]);
+  });
+
+  it("flattens a single log with no stacktrace into one line", () => {
+    const result = flattenLogs([makeLog({ message: "hello", level: "INFO" })]);
+    expect(result).toHaveLength(1);
+    expect(result[0]).toEqual({
+      content: "hello",
+      level: "INFO",
+      timestamp: "2024-01-01T00:00:00Z",
+      isStacktrace: false,
+    });
+  });
+
+  it("flattens a log with a two-line stacktrace into three lines", () => {
+    const result = flattenLogs([
+      makeLog({ message: "boom", level: "ERROR", stacktrace: "at A\nat B" }),
+    ]);
+    expect(result).toHaveLength(3);
+    expect(result[0]).toMatchObject({ content: "boom", isStacktrace: false });
+    expect(result[1]).toMatchObject({ content: "at A", isStacktrace: true, level: null });
+    expect(result[2]).toMatchObject({ content: "at B", isStacktrace: true, level: null });
+  });
+
+  it("stacktrace lines inherit the parent timestamp", () => {
+    const result = flattenLogs([
+      makeLog({ timestamp: "2024-06-01T12:00:00Z", stacktrace: "frame" }),
+    ]);
+    expect(result[1].timestamp).toBe("2024-06-01T12:00:00Z");
+  });
+
+  it("handles multiple logs in order", () => {
+    const result = flattenLogs([
+      makeLog({ message: "first" }),
+      makeLog({ message: "second" }),
+    ]);
+    expect(result).toHaveLength(2);
+    expect(result[0].content).toBe("first");
+    expect(result[1].content).toBe("second");
+  });
+
+  it("handles null level", () => {
+    const result = flattenLogs([makeLog({ level: null })]);
+    expect(result[0].level).toBeNull();
+  });
+});

From c7dc98226a6783afd99151497be0fa08bbd5c10e Mon Sep 17 00:00:00 2001
From: Bruce Schultz <bschultz013@gmail.com>
Date: Tue, 26 May 2026 09:11:30 +0200
Subject: [PATCH 2/9] feat: add useLogChunks composable for chunked log
 fetching

Implements chunked log fetching with initialize/loadNextChunk/appendPolled/reset API, supporting 300-entry pages, hasMore tracking, and error capture.
---
 app/composables/useLogChunks.ts       | 105 +++++++++++++++
 test/composables/useLogChunks.test.ts | 178 ++++++++++++++++++++++++++
 2 files changed, 283 insertions(+)
 create mode 100644 app/composables/useLogChunks.ts
 create mode 100644 test/composables/useLogChunks.test.ts

diff --git a/app/composables/useLogChunks.ts b/app/composables/useLogChunks.ts
new file mode 100644
index 0000000..9029265
--- /dev/null
+++ b/app/composables/useLogChunks.ts
@@ -0,0 +1,105 @@
+import { ref } from "vue";
+import { useNuxtApp } from "nuxt/app";
+import type { AnalysisLogsResponse } from "~/services/Api";
+import { flattenLogs, type FlatLogLine } from "~/types/logs";
+
+const CHUNK_SIZE = 300;
+
+export function useLogChunks(analysisId: string) {
+  const nginxLines = ref<FlatLogLine[]>([]);
+  const analysisLines = ref<FlatLogLine[]>([]);
+  const offset = ref(0);
+  const hasMore = ref(false);
+  const isLoading = ref(false);
+  const initialized = ref(false);
+  const httpError = ref<number | null>(null);
+  const runNumber = ref<number | null>(null);
+
+  async function fetchChunk(
+    chunkOffset: number,
+  ): Promise<AnalysisLogsResponse | undefined> {
+    return useNuxtApp()
+      .$hubApi<AnalysisLogsResponse>(`/logs/${analysisId}`, {
+        method: "GET",
+        query: { limit: CHUNK_SIZE, offset: chunkOffset },
+      })
+      .catch((err: any) => {
+        httpError.value = err?.statusCode ?? err?.status ?? null;
+        return undefined;
+      });
+  }
+
+  async function initialize(): Promise<void> {
+    isLoading.value = true;
+    try {
+      const result = await fetchChunk(0);
+      if (result) {
+        nginxLines.value = flattenLogs(result.nginx_logs);
+        analysisLines.value = flattenLogs(result.analysis_logs);
+        offset.value = CHUNK_SIZE;
+        hasMore.value =
+          result.nginx_logs.length === CHUNK_SIZE ||
+          result.analysis_logs.length === CHUNK_SIZE;
+        initialized.value = true;
+        runNumber.value = result.run_number;
+      }
+    } finally {
+      isLoading.value = false;
+    }
+  }
+
+  async function loadNextChunk(): Promise<void> {
+    if (isLoading.value || !hasMore.value) return;
+    isLoading.value = true;
+    try {
+      const result = await fetchChunk(offset.value);
+      if (result) {
+        nginxLines.value = [...nginxLines.value, ...flattenLogs(result.nginx_logs)];
+        analysisLines.value = [
+          ...analysisLines.value,
+          ...flattenLogs(result.analysis_logs),
+        ];
+        offset.value += CHUNK_SIZE;
+        hasMore.value =
+          result.nginx_logs.length === CHUNK_SIZE ||
+          result.analysis_logs.length === CHUNK_SIZE;
+      }
+    } finally {
+      isLoading.value = false;
+    }
+  }
+
+  function appendPolled(result: AnalysisLogsResponse): void {
+    nginxLines.value = [...nginxLines.value, ...flattenLogs(result.nginx_logs)];
+    analysisLines.value = [
+      ...analysisLines.value,
+      ...flattenLogs(result.analysis_logs),
+    ];
+  }
+
+  function reset(): void {
+    nginxLines.value = [];
+    analysisLines.value = [];
+    offset.value = 0;
+    hasMore.value = false;
+    isLoading.value = false;
+    initialized.value = false;
+    httpError.value = null;
+    runNumber.value = null;
+  }
+
+  return {
+    nginxLines,
+    analysisLines,
+    offset,
+    hasMore,
+    isLoading,
+    initialized,
+    httpError,
+    runNumber,
+    initialize,
+    loadNextChunk,
+    appendPolled,
+    reset,
+  };
+}
diff --git a/test/composables/useLogChunks.test.ts b/test/composables/useLogChunks.test.ts
new file mode 100644
index 0000000..1f1fdb8
--- /dev/null
+++ b/test/composables/useLogChunks.test.ts
@@ -0,0 +1,178 @@
+import { describe, expect, it, beforeEach } from "vitest";
+import { http, HttpResponse } from "msw";
+import { testServer } from "@/test/mockapi/setup";
+import { useLogChunks } from "~/composables/useLogChunks";
+import type { AnalysisLogsResponse, PodLog } from "~/services/Api";
+
+const ANALYSIS_ID = "test-analysis-123";
+
+const makePodLog = (message: string): PodLog => ({
+  timestamp: "2024-01-01T00:00:00Z",
+  message,
+  level: "INFO",
+  stacktrace: null,
+});
+
+function makeLogsResponse(
+  count: number,
+  offset = 0,
+): AnalysisLogsResponse {
+  return {
+    analysis_id: ANALYSIS_ID,
+    run_number: 1,
+    nginx_logs: Array.from({ length: count }, (_, i) =>
+      makePodLog(`nginx-${offset + i}`),
+    ),
+    analysis_logs: Array.from({ length: count }, (_, i) =>
+      makePodLog(`analysis-${offset + i}`),
+    ),
+  };
+}
+
+function setupLogsHandler(
+  analysisId: string,
+  chunkSize: number,
+  totalLogs: number,
+) {
+  testServer.use(
+    http.get(`/logs/${analysisId}`, ({ request }) => {
+      const url = new URL(request.url, "http://localhost");
+      const offset = Number(url.searchParams.get("offset") ?? 0);
+      const limit = Number(url.searchParams.get("limit") ?? totalLogs);
+      const remaining = Math.max(0, totalLogs - offset);
+      const count = Math.min(limit, remaining);
+      return HttpResponse.json(makeLogsResponse(count, offset));
+    }),
+  );
+}
+
+describe("useLogChunks", () => {
+  describe("initialize", () => {
+    it("loads first chunk and sets lines", async () => {
+      setupLogsHandler(ANALYSIS_ID, 300, 5);
+      const chunks = useLogChunks(ANALYSIS_ID);
+      await chunks.initialize();
+
+      expect(chunks.nginxLines.value).toHaveLength(5);
+      expect(chunks.analysisLines.value).toHaveLength(5);
+      expect(chunks.nginxLines.value[0].content).toBe("nginx-0");
+    });
+
+    it("sets hasMore true when chunk is full (300 returned)", async () => {
+      setupLogsHandler(ANALYSIS_ID, 300, 600);
+      const chunks = useLogChunks(ANALYSIS_ID);
+      await chunks.initialize();
+
+      expect(chunks.hasMore.value).toBe(true);
+    });
+
+    it("sets hasMore false when fewer than 300 returned", async () => {
+      setupLogsHandler(ANALYSIS_ID, 300, 50);
+      const chunks = useLogChunks(ANALYSIS_ID);
+      await chunks.initialize();
+
+      expect(chunks.hasMore.value).toBe(false);
+    });
+
+    it("sets initialized true after successful fetch", async () => {
+      setupLogsHandler(ANALYSIS_ID, 300, 5);
+      const chunks = useLogChunks(ANALYSIS_ID);
+      expect(chunks.initialized.value).toBe(false);
+      await chunks.initialize();
+      expect(chunks.initialized.value).toBe(true);
+    });
+
+    it("sets runNumber from the response", async () => {
+      testServer.use(
+        http.get(`/logs/${ANALYSIS_ID}`, () =>
+          HttpResponse.json({
+            analysis_id: ANALYSIS_ID,
+            run_number: 7,
+            nginx_logs: [],
+            analysis_logs: [],
+          }),
+        ),
+      );
+      const chunks = useLogChunks(ANALYSIS_ID);
+      await chunks.initialize();
+      expect(chunks.runNumber.value).toBe(7);
+    });
+
+    it("redirects to 403 page when server returns 403", async () => {
+      testServer.use(
+        http.get(`/logs/${ANALYSIS_ID}`, () =>
+          HttpResponse.json({ detail: "forbidden" }, { status: 403 }),
+        ),
+      );
+      const chunks = useLogChunks(ANALYSIS_ID);
+      await chunks.initialize();
+      expect(chunks.httpError.value).toBe(403);
+    });
+  });
+
+  describe("loadNextChunk", () => {
+    it("appends next chunk to existing lines", async () => {
+      setupLogsHandler(ANALYSIS_ID, 300, 600);
+      const chunks = useLogChunks(ANALYSIS_ID);
+      await chunks.initialize();
+      await chunks.loadNextChunk();
+
+      expect(chunks.nginxLines.value).toHaveLength(600);
+      expect(chunks.nginxLines.value[300].content).toBe("nginx-300");
+    });
+
+    it("sets hasMore false when second chunk is partial", async () => {
+      setupLogsHandler(ANALYSIS_ID, 300, 350);
+      const chunks = useLogChunks(ANALYSIS_ID);
+      await chunks.initialize();
+      await chunks.loadNextChunk();
+
+      expect(chunks.hasMore.value).toBe(false);
+      expect(chunks.nginxLines.value).toHaveLength(350);
+    });
+
+    it("does not fetch when hasMore is false", async () => {
+      setupLogsHandler(ANALYSIS_ID, 300, 50);
+      const chunks = useLogChunks(ANALYSIS_ID);
+      await chunks.initialize();
+      const lineCountBefore = chunks.nginxLines.value.length;
+      await chunks.loadNextChunk(); // hasMore is false, should no-op
+      expect(chunks.nginxLines.value).toHaveLength(lineCountBefore);
+    });
+  });
+
+  describe("appendPolled", () => {
+    it("appends new polled logs to the end without changing offset or hasMore", async () => {
+      setupLogsHandler(ANALYSIS_ID, 300, 5);
+      const chunks = useLogChunks(ANALYSIS_ID);
+      await chunks.initialize();
+
+      const polledResponse: AnalysisLogsResponse = {
+        analysis_id: ANALYSIS_ID,
+        run_number: 1,
+        nginx_logs: [makePodLog("new-nginx")],
+        analysis_logs: [makePodLog("new-analysis")],
+      };
+      chunks.appendPolled(polledResponse);
+
+      expect(chunks.nginxLines.value).toHaveLength(6);
+      expect(chunks.nginxLines.value[5].content).toBe("new-nginx");
+      expect(chunks.hasMore.value).toBe(false); // unchanged
+    });
+  });
+
+  describe("reset", () => {
+    it("clears all state", async () => {
+      setupLogsHandler(ANALYSIS_ID, 300, 5);
+      const chunks = useLogChunks(ANALYSIS_ID);
+      await chunks.initialize();
+      chunks.reset();
+
+      expect(chunks.nginxLines.value).toHaveLength(0);
+      expect(chunks.analysisLines.value).toHaveLength(0);
+      expect(chunks.hasMore.value).toBe(false);
+      expect(chunks.initialized.value).toBe(false);
+      expect(chunks.runNumber.value).toBeNull();
+    });
+  });
+});

From 8f6e21d4422d1bf9d5220fc8fc8d61e70b972926 Mon Sep 17 00:00:00 2001
From: Bruce Schultz <bschultz013@gmail.com>
Date: Tue, 26 May 2026 09:19:18 +0200
Subject: [PATCH 3/9] fix: add isLoading guard and clear httpError on
 initialize in useLogChunks

---
 app/composables/useLogChunks.ts       | 2 ++
 test/composables/useLogChunks.test.ts | 2 +-
 2 files changed, 3 insertions(+), 1 deletion(-)

diff --git a/app/composables/useLogChunks.ts b/app/composables/useLogChunks.ts
index 9029265..210bbb0 100644
--- a/app/composables/useLogChunks.ts
+++ b/app/composables/useLogChunks.ts
@@ -30,6 +30,8 @@ export function useLogChunks(analysisId: string) {
   }
 
   async function initialize(): Promise<void> {
+    if (isLoading.value) return;
+    httpError.value = null;
     isLoading.value = true;
     try {
       const result = await fetchChunk(0);
diff --git a/test/composables/useLogChunks.test.ts b/test/composables/useLogChunks.test.ts
index 1f1fdb8..5107dd6 100644
--- a/test/composables/useLogChunks.test.ts
+++ b/test/composables/useLogChunks.test.ts
@@ -98,7 +98,7 @@ describe("useLogChunks", () => {
       expect(chunks.runNumber.value).toBe(7);
     });
 
-    it("redirects to 403 page when server returns 403", async () => {
+    it("sets httpError to 403 when server returns 403", async () => {
       testServer.use(
         http.get(`/logs/${ANALYSIS_ID}`, () =>
           HttpResponse.json({ detail: "forbidden" }, { status: 403 }),

From 6f1f286cbef54da1298367b70781e7ded6a8a5e5 Mon Sep 17 00:00:00 2001
From: Bruce Schultz <bschultz013@gmail.com>
Date: Tue, 26 May 2026 09:20:57 +0200
Subject: [PATCH 4/9] test: register VirtualScroller in global test setup

---
 test/mockapi/setup.ts | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/test/mockapi/setup.ts b/test/mockapi/setup.ts
index 8fc7895..3e19d92 100644
--- a/test/mockapi/setup.ts
+++ b/test/mockapi/setup.ts
@@ -20,6 +20,7 @@ import MultiSelect from "primevue/multiselect";
 import InputIcon from "primevue/inputicon";
 import InputText from "primevue/inputtext";
 import IconField from "primevue/iconfield";
+import VirtualScroller from "primevue/virtualscroller";
 
 /* eslint-disable  @typescript-eslint/no-explicit-any */
 const globalThis = global as any;
@@ -46,6 +47,7 @@ config.global.components = {
   InputIcon,
   InputText,
   IconField,
+  VirtualScroller,
 };
 
 // Stub NuxtLink via stubs (matches by component `name` property) rather than

From 286f2dff8afd0699f31db6bb4b9de6f41502aa9c Mon Sep 17 00:00:00 2001
From: Bruce Schultz <bschultz013@gmail.com>
Date: Tue, 26 May 2026 13:06:45 +0200
Subject: [PATCH 5/9] feat(logs): lazy load logs for active run

---
 .../actions/build-docker-image/action.yaml    |   7 -
 .gitignore                                    |   1 +
 .../analysis/logs/AnalysisLogCardContent.vue  | 305 +++++++++++-------
 .../analysis/logs/ContainerLogs.vue           | 185 ++++++-----
 .../analysis/logs/RefreshSwitch.vue           |  37 +--
 app/composables/useLogChunks.ts               |  51 +--
 .../logs/AnalysisLogCardContent.spec.ts       |  98 +++++-
 .../analysis/logs/ContainerLogs.spec.ts       |  95 ++++--
 .../analysis/logs/RefreshSwitch.spec.ts       |   8 +-
 test/composables/useLogChunks.test.ts         |  90 +++---
 10 files changed, 556 insertions(+), 321 deletions(-)

diff --git a/.github/actions/build-docker-image/action.yaml b/.github/actions/build-docker-image/action.yaml
index 07650a4..4fb04a8 100644
--- a/.github/actions/build-docker-image/action.yaml
+++ b/.github/actions/build-docker-image/action.yaml
@@ -39,13 +39,6 @@ runs:
     - name: Set up Docker Buildx
       uses: docker/setup-buildx-action@v4
 
-    #      - name: Login to Docker Hub
-    #        if: inputs.push == true
-    #        uses: docker/login-action@9780b0c442fbb1117ed29e0efdff1e18412f7567  # tag=v3.3.0
-    #        with:
-    #          username: ${{ secrets.docker_username }}
-    #          password: ${{ secrets.docker_password }}
-
     - name: Login to GitHub Container Registry
       if: ${{ inputs.push == 'true' }}
       uses: docker/login-action@v4.1.0
diff --git a/.gitignore b/.gitignore
index 43a9cb4..ea0e415 100644
--- a/.gitignore
+++ b/.gitignore
@@ -100,4 +100,5 @@ sw.*
 
 # Claude
 .claude/
+.playwright-mcp/
 docs/
\ No newline at end of file
diff --git a/app/components/analysis/logs/AnalysisLogCardContent.vue b/app/components/analysis/logs/AnalysisLogCardContent.vue
index 89f5097..91d3020 100644
--- a/app/components/analysis/logs/AnalysisLogCardContent.vue
+++ b/app/components/analysis/logs/AnalysisLogCardContent.vue
@@ -1,57 +1,80 @@
 <script lang="ts" setup>
-import { Card, ScrollPanel } from "primevue";
-import { computed, onBeforeUpdate, onMounted, onUpdated, ref } from "vue";
+import { Card, VirtualScroller } from "primevue";
+import { nextTick, onMounted, ref, watch } from "vue";
 import { useToast } from "primevue/usetoast";
 import Toast from "primevue/toast";
-import type { PodLog } from "~/services/Api";
+import type { FlatLogLine } from "~/types/logs";
 
 const props = defineProps<{
-  nginxLogs?: PodLog[];
-  analysisLogs?: PodLog[];
+  nginxLines: FlatLogLine[];
+  analysisLines: FlatLogLine[];
+  showTimestamps?: boolean;
+  nginxHasOlder?: boolean;
+  analysisHasOlder?: boolean;
+  nginxLoading?: boolean;
+  analysisLoading?: boolean;
+  onLoadOlderNginx?: () => Promise<void>;
+  onLoadOlderAnalysis?: () => Promise<void>;
 }>();
-const nginxLogBottom = ref();
-const analysisLogBottom = ref();
-const showTimestamps = ref(false);
 
 const toast = useToast();
 
-const getScrollContainer = (bottomEl: HTMLElement): HTMLElement | null =>
-  bottomEl?.parentElement ?? null;
+const nginxScrollerRef = ref<{ $el: HTMLElement } | null>(null);
+const analysisScrollerRef = ref<{ $el: HTMLElement } | null>(null);
 
-const isAtBottom = (container: HTMLElement): boolean =>
-  container.scrollTop + container.clientHeight >= container.scrollHeight - 10;
+// Plain booleans (not reactive) — updated on every scroll event, read in watchers
+let atNginxBottom = false;
+let atAnalysisBottom = false;
 
-let nginxWasAtBottom = true;
-let analysisWasAtBottom = true;
+function isNearBottom(el: HTMLElement): boolean {
+  return el.scrollTop >= el.scrollHeight - el.clientHeight - 50;
+}
 
-onBeforeUpdate(() => {
-  if (nginxLogBottom.value) {
-    const c = getScrollContainer(nginxLogBottom.value);
-    nginxWasAtBottom = c ? isAtBottom(c) : true;
+onMounted(async () => {
+  await nextTick();
+  const nginxEl = nginxScrollerRef.value?.$el;
+  if (nginxEl && props.nginxLines.length > 0) {
+    nginxEl.scrollTop = nginxEl.scrollHeight;
+    atNginxBottom = true;
   }
-  if (analysisLogBottom.value) {
-    const c = getScrollContainer(analysisLogBottom.value);
-    analysisWasAtBottom = c ? isAtBottom(c) : true;
+  const analysisEl = analysisScrollerRef.value?.$el;
+  if (analysisEl && props.analysisLines.length > 0) {
+    analysisEl.scrollTop = analysisEl.scrollHeight;
+    atAnalysisBottom = true;
   }
 });
 
-onMounted(() => {
-  [nginxLogBottom, analysisLogBottom].forEach(({ value }) => {
-    const c = getScrollContainer(value);
-    if (c) c.scrollTop = c.scrollHeight;
-  });
-});
+// Auto-scroll on polling appends: if user was at the bottom and items were appended
+// (not prepended — prepends have a different first-item timestamp)
+watch(
+  () => props.nginxLines,
+  (newLines, oldLines) => {
+    if (!oldLines || newLines.length <= oldLines.length) return;
+    const wasAppend = newLines[0]?.timestamp === oldLines[0]?.timestamp;
+    if (wasAppend && atNginxBottom) {
+      nextTick().then(() => {
+        const el = nginxScrollerRef.value?.$el;
+        if (el) el.scrollTop = el.scrollHeight;
+      });
+    }
+  },
+  { flush: "post" },
+);
 
-onUpdated(() => {
-  if (nginxWasAtBottom && nginxLogBottom.value) {
-    const c = getScrollContainer(nginxLogBottom.value);
-    if (c) c.scrollTop = c.scrollHeight;
-  }
-  if (analysisWasAtBottom && analysisLogBottom.value) {
-    const c = getScrollContainer(analysisLogBottom.value);
-    if (c) c.scrollTop = c.scrollHeight;
-  }
-});
+watch(
+  () => props.analysisLines,
+  (newLines, oldLines) => {
+    if (!oldLines || newLines.length <= oldLines.length) return;
+    const wasAppend = newLines[0]?.timestamp === oldLines[0]?.timestamp;
+    if (wasAppend && atAnalysisBottom) {
+      nextTick().then(() => {
+        const el = analysisScrollerRef.value?.$el;
+        if (el) el.scrollTop = el.scrollHeight;
+      });
+    }
+  },
+  { flush: "post" },
+);
 
 function formatTimestamp(ts: string): string {
   const d = new Date(ts);
@@ -82,29 +105,24 @@ function logLevelClass(level?: string | null): string {
   }
 }
 
-function formatLogs(logs: PodLog[] | undefined, timestamps: boolean): string {
-  if (!logs?.length) return "";
-  return logs
-    .map((entry) => {
-      const prefix = timestamps ? `${formatTimestamp(entry.timestamp)}  ` : "";
-      const line = `${prefix}${entry.message}`;
-      return entry.stacktrace ? `${line}\n${entry.stacktrace}` : line;
+function formatFlatLines(lines: FlatLogLine[]): string {
+  return lines
+    .map((line) => {
+      const prefix = props.showTimestamps
+        ? `${formatTimestamp(line.timestamp)}  `
+        : "";
+      const indent = line.isStacktrace ? "  " : "";
+      return `${prefix}${indent}${line.content}`;
     })
     .join("\n");
 }
 
-const formattedNginxLogs = computed(() =>
-  formatLogs(props.nginxLogs, showTimestamps.value),
-);
-const formattedAnalysisLogs = computed(() =>
-  formatLogs(props.analysisLogs, showTimestamps.value),
-);
-
-const downloadLogs = (analysisLogs: boolean) => {
-  const prefix = analysisLogs ? "analysis" : "nginx";
+function downloadLogs(isAnalysis: boolean) {
+  const prefix = isAnalysis ? "analysis" : "nginx";
   const filename = `${prefix}-logs-${Date.now()}`;
-  const logs = analysisLogs ? formattedAnalysisLogs.value : formattedNginxLogs.value;
-
+  const logs = formatFlatLines(
+    isAnalysis ? props.analysisLines : props.nginxLines,
+  );
   if (logs) {
     const blob = new Blob([logs], { type: "text/plain" });
     const url = URL.createObjectURL(blob);
@@ -116,10 +134,12 @@ const downloadLogs = (analysisLogs: boolean) => {
     document.body.removeChild(link);
     URL.revokeObjectURL(url);
   }
-};
+}
 
-const copyToClipboard = async (analysisLogs: boolean) => {
-  const logs = analysisLogs ? formattedAnalysisLogs.value : formattedNginxLogs.value;
+async function copyToClipboard(isAnalysis: boolean) {
+  const logs = formatFlatLines(
+    isAnalysis ? props.analysisLines : props.nginxLines,
+  );
   if (logs) {
     try {
       await navigator.clipboard.writeText(logs);
@@ -133,27 +153,53 @@ const copyToClipboard = async (analysisLogs: boolean) => {
       console.error("Failed to copy: ", err);
     }
   }
-};
+}
+
+function onNginxScroll(e: Event) {
+  const el = e.target as HTMLElement;
+  atNginxBottom = isNearBottom(el);
+  if (el.scrollTop <= 50 && props.nginxHasOlder && !props.nginxLoading) {
+    handleLoadOlderNginx();
+  }
+}
+
+function onAnalysisScroll(e: Event) {
+  const el = e.target as HTMLElement;
+  atAnalysisBottom = isNearBottom(el);
+  if (el.scrollTop <= 50 && props.analysisHasOlder && !props.analysisLoading) {
+    handleLoadOlderAnalysis();
+  }
+}
+
+async function handleLoadOlderNginx() {
+  if (!props.onLoadOlderNginx || props.nginxLoading) return;
+  const el = nginxScrollerRef.value?.$el as HTMLElement | null;
+  const prevScrollHeight = el?.scrollHeight ?? 0;
+  const prevScrollTop = el?.scrollTop ?? 0;
+  await props.onLoadOlderNginx();
+  await nextTick();
+  if (el) el.scrollTop = prevScrollTop + (el.scrollHeight - prevScrollHeight);
+}
+
+async function handleLoadOlderAnalysis() {
+  if (!props.onLoadOlderAnalysis || props.analysisLoading) return;
+  const el = analysisScrollerRef.value?.$el as HTMLElement | null;
+  const prevScrollHeight = el?.scrollHeight ?? 0;
+  const prevScrollTop = el?.scrollTop ?? 0;
+  await props.onLoadOlderAnalysis();
+  await nextTick();
+  if (el) el.scrollTop = prevScrollTop + (el.scrollHeight - prevScrollHeight);
+}
 </script>
 
 <template>
   <Toast group="copiedLogs" position="top-center" class="copy-toast" />
-  <div class="log-content-toolbar">
-    <ToggleButton
-      v-model="showTimestamps"
-      onLabel="Timestamps On"
-      offLabel="Timestamps Off"
-      onIcon="pi pi-clock"
-      offIcon="pi pi-clock"
-      class="log-timestamp-toggle"
-    />
-  </div>
   <div class="card analysis-logs">
     <Card class="log-card nginx-log-card">
       <template #title>
         <div class="log-header-row">
           <div class="log-header-row-title">Nginx Logs</div>
-          <div class="log-btns" v-if="nginxLogs?.length">
+          <div class="log-btns" v-if="nginxLines.length">
             <div class="log-download-btn log-btn">
               <Button
                 icon="pi pi-download"
@@ -177,18 +223,32 @@ const copyToClipboard = async (analysisLogs: boolean) => {
       </template>
       <template #content>
         <div class="card nginx-log-content">
-          <ScrollPanel class="log-scroll-panel">
-            <template v-if="nginxLogs?.length">
-              <div v-for="(entry, i) in nginxLogs" :key="i" class="log-entry">
-                <span :class="['log-message', logLevelClass(entry.level)]">
-                  <span v-if="showTimestamps" class="log-timestamp">{{ formatTimestamp(entry.timestamp) }}&nbsp;&nbsp;</span>{{ entry.message }}
+          <VirtualScroller
+            v-if="nginxLines.length"
+            ref="nginxScrollerRef"
+            :items="nginxLines"
+            :itemSize="20"
+            style="height: 30em"
+            class="log-scroll-panel"
+            @scroll="onNginxScroll"
+          >
+            <template #item="{ item }: { item: FlatLogLine }">
+              <div class="log-entry">
+                <span v-if="showTimestamps" class="log-timestamp">
+                  {{ formatTimestamp(item.timestamp) }}&nbsp;&nbsp;
                 </span>
-                <pre v-if="entry.stacktrace" class="log-stacktrace">{{ entry.stacktrace }}</pre>
+                <span
+                  :class="
+                    item.isStacktrace
+                      ? 'log-stacktrace-line'
+                      : ['log-message', logLevelClass(item.level)]
+                  "
+                  >{{ item.content }}</span
+                >
               </div>
             </template>
-            <span v-else>No logs found...</span>
-            <div ref="nginxLogBottom"></div>
-          </ScrollPanel>
+          </VirtualScroller>
+          <span v-else>No logs found...</span>
         </div>
       </template>
     </Card>
@@ -196,7 +256,7 @@ const copyToClipboard = async (analysisLogs: boolean) => {
       <template #title>
         <div class="log-header-row">
           <div class="log-header-row-title">Analysis Logs</div>
-          <div class="log-btns" v-if="analysisLogs?.length">
+          <div class="log-btns" v-if="analysisLines.length">
             <div class="log-download-btn log-btn">
               <Button
                 icon="pi pi-download"
@@ -219,34 +279,38 @@ const copyToClipboard = async (analysisLogs: boolean) => {
         </div>
       </template>
       <template #content>
-        <ScrollPanel class="log-scroll-panel">
-          <template v-if="analysisLogs?.length">
-            <div v-for="(entry, i) in analysisLogs" :key="i" class="log-entry">
-              <span :class="['log-message', logLevelClass(entry.level)]">
-                <span v-if="showTimestamps" class="log-timestamp">{{ formatTimestamp(entry.timestamp) }}&nbsp;&nbsp;</span>{{ entry.message }}
+        <VirtualScroller
+          v-if="analysisLines.length"
+          ref="analysisScrollerRef"
+          :items="analysisLines"
+          :itemSize="20"
+          style="height: 30em"
+          class="log-scroll-panel"
+          @scroll="onAnalysisScroll"
+        >
+          <template #item="{ item }: { item: FlatLogLine }">
+            <div class="log-entry">
+              <span v-if="showTimestamps" class="log-timestamp">
+                {{ formatTimestamp(item.timestamp) }}&nbsp;&nbsp;
               </span>
-              <pre v-if="entry.stacktrace" class="log-stacktrace">{{ entry.stacktrace }}</pre>
+              <span
+                :class="
+                  item.isStacktrace
+                    ? 'log-stacktrace-line'
+                    : ['log-message', logLevelClass(item.level)]
+                "
+                >{{ item.content }}</span
+              >
             </div>
           </template>
-          <span v-else>No logs found...</span>
-          <div ref="analysisLogBottom"></div>
-        </ScrollPanel>
+        </VirtualScroller>
+        <span v-else>No logs found...</span>
       </template>
     </Card>
   </div>
 </template>
 
 <style lang="scss">
-.log-content-toolbar {
-  display: flex;
-  justify-content: flex-end;
-  margin-bottom: 0.5em;
-}
-
-.log-timestamp-toggle {
-  font-size: 0.8em;
-}
-
 .analysis-logs {
   display: flex;
   justify-content: space-between;
@@ -269,11 +333,11 @@ const copyToClipboard = async (analysisLogs: boolean) => {
 }
 
 .log-scroll-panel {
-  font-family: Roboto Mono Regular,
-  monospace;
+  font-family:
+    Roboto Mono Regular,
+    monospace;
   font-size: 0.8em;
   height: 30em;
-  padding: 1em;
   white-space: pre-wrap;
   word-break: break-word;
 }
@@ -327,6 +391,9 @@ const copyToClipboard = async (analysisLogs: boolean) => {
 
 .log-entry {
   margin-bottom: 0.1em;
+  display: flex;
+  align-items: baseline;
+  padding: 0 0.75rem;
 }
 
 .log-message {
@@ -337,22 +404,34 @@ const copyToClipboard = async (analysisLogs: boolean) => {
 
 .log-timestamp {
   opacity: 0.7;
+  flex-shrink: 0;
 }
 
-.log-level-error   { color: #f87171; } /* red-400   */
-.log-level-warn    { color: #fbbf24; } /* amber-400 */
-.log-level-info    { color: #38bdf8; } /* sky-400   */
-.log-level-debug   { color: #a3e635; } /* lime-400  */
-.log-level-default { color: #e2e8f0; } /* slate-200 */
+.log-level-error {
+  color: #f87171;
+}
 
-.log-stacktrace {
-  margin: 0.15em 0 0.25em 1.5em;
-  padding: 0;
-  font-family: inherit;
-  font-size: inherit;
+.log-level-warn {
+  color: #fbbf24;
+}
+
+.log-level-info {
+  color: #38bdf8;
+}
+
+.log-level-debug {
+  color: #a3e635;
+}
+
+.log-level-default {
+  color: #e2e8f0;
+}
+
+.log-stacktrace-line {
+  display: block;
   white-space: pre-wrap;
   word-break: break-word;
-  color: #fca5a5; /* red-300 — distinct from the message, clearly an error trace */
+  color: #fca5a5;
   border-left: 2px solid #f87171;
   padding-left: 0.5em;
 }
diff --git a/app/components/analysis/logs/ContainerLogs.vue b/app/components/analysis/logs/ContainerLogs.vue
index f473c4b..2036d91 100644
--- a/app/components/analysis/logs/ContainerLogs.vue
+++ b/app/components/analysis/logs/ContainerLogs.vue
@@ -2,7 +2,9 @@
 import { useRoute } from "vue-router";
 import { Card, Fieldset } from "primevue";
 import { useIntervalFn } from "@vueuse/core";
-import { getAnalysisLogs } from "~/composables/useAPIFetch";
+import { useLogChunks } from "~/composables/useLogChunks";
+import type { FlatLogLine } from "~/types/logs";
+import { flattenLogs } from "~/types/logs";
 import RefreshSwitch from "~/components/analysis/logs/RefreshSwitch.vue";
 import AnalysisLogCardContent from "~/components/analysis/logs/AnalysisLogCardContent.vue";
 import { useNuxtApp } from "nuxt/app";
@@ -10,37 +12,34 @@ import type {
   AnalysisLogHistoryResponse,
   AnalysisLogsResponse,
   AnalysisNode,
-  RunLogs,
 } from "~/services/Api";
 import { ProcessStatus } from "~/types/analysis";
 
+type FlatRunLogs = {
+  run_number: number;
+  nginxLines: FlatLogLine[];
+  analysisLines: FlatLogLine[];
+};
+
 const route = useRoute();
 const analysisId = route.params.id as string;
 const analysisNodeId = route.query.nodeId as string | undefined;
-const currentLogs = ref<AnalysisLogsResponse | null>(null);
-const prevLogs = ref<RunLogs[]>([]);
+const prevLogs = ref<FlatRunLogs[]>([]);
 const analysis = ref<AnalysisNode | null>(null);
 
-const {
-  data: response,
-  status,
-  error,
-} = await getAnalysisLogs(analysisId);
-
+const logChunks = useLogChunks(analysisId);
 const lastFetchedAt = ref<string | null>(null);
+const showTimestamps = ref(false);
 
-gatherCurrentLogs();
-await Promise.all([gatherPreviousLogs(), fetchAnalysis()]);
-
-function gatherCurrentLogs() {
-  if (status.value === "success") {
-    currentLogs.value = response.value ?? null;
-    if (currentLogs.value) {
-      lastFetchedAt.value = new Date().toISOString();
-    }
-  } else if (status.value === "error" && error.value?.statusCode === 403) {
-    navigateTo("/error/403");
+await logChunks.initialize();
+if (logChunks.httpError.value === 403) {
+  await navigateTo("/error/403");
+} else {
+  if (logChunks.initialized.value) {
+    lastFetchedAt.value = new Date().toISOString();
   }
+
+  await Promise.all([gatherPreviousLogs(), fetchAnalysis()]);
 }
 
 async function fetchAnalysis() {
@@ -48,9 +47,7 @@ async function fetchAnalysis() {
   const result = (await useNuxtApp()
     .$hubApi(`/analysis-nodes/${analysisNodeId}`, {
       method: "GET",
-      query: {
-        include: "analysis",
-      },
+      query: { include: "analysis" },
     })
     .catch(() => undefined)) as AnalysisNode | undefined;
   if (result) {
@@ -62,20 +59,21 @@ async function gatherPreviousLogs() {
   const historyResp = (await useNuxtApp()
     .$hubApi(`/history/${analysisId}`, {
       method: "GET",
-      query: {
-        limit: null,
-      },
     })
     .catch(() => undefined)) as AnalysisLogHistoryResponse | undefined;
 
   if (historyResp?.runs) {
-    const currentRunNumber = currentLogs.value?.run_number;
+    const currentRunNumber = logChunks.runNumber.value;
     prevLogs.value = [...historyResp.runs]
       .filter(
-        (r) =>
-          currentRunNumber === undefined || r.run_number !== currentRunNumber,
+        (r) => currentRunNumber === null || r.run_number !== currentRunNumber,
       )
-      .sort((a, b) => b.run_number - a.run_number);
+      .sort((a, b) => b.run_number - a.run_number)
+      .map((r) => ({
+        run_number: r.run_number,
+        nginxLines: flattenLogs(r.nginx_logs),
+        analysisLines: flattenLogs(r.analysis_logs),
+      }));
   }
 }
 
@@ -88,20 +86,7 @@ const { pause, resume, isActive } = useIntervalFn(
 );
 
 async function refreshLogs() {
-  if (!lastFetchedAt.value) {
-    const fetchTime = new Date().toISOString();
-    const result = await useNuxtApp()
-      .$hubApi<AnalysisLogsResponse>(`/logs/${analysisId}`, {
-        method: "GET",
-      })
-      .catch(() => undefined);
-    if (result) {
-      currentLogs.value = result;
-      lastFetchedAt.value = fetchTime;
-    }
-    return;
-  }
-
+  if (!lastFetchedAt.value) return;
   const fetchTime = new Date().toISOString();
   const result = await useNuxtApp()
     .$hubApi<AnalysisLogsResponse>(`/logs/${analysisId}`, {
@@ -109,21 +94,14 @@ async function refreshLogs() {
       query: { start_date: lastFetchedAt.value },
     })
     .catch(() => undefined);
-  if (result && currentLogs.value) {
-    currentLogs.value = {
-      ...currentLogs.value,
-      analysis_logs: [
-        ...currentLogs.value.analysis_logs,
-        ...result.analysis_logs,
-      ],
-      nginx_logs: [...currentLogs.value.nginx_logs, ...result.nginx_logs],
-    };
+  if (result) {
+    logChunks.appendPolled(result);
+    lastFetchedAt.value = fetchTime;
   }
-  lastFetchedAt.value = fetchTime;
 }
 
 const previousRunsList = computed(() =>
-  !currentLogs.value && prevLogs.value.length > 0
+  !logChunks.initialized.value && prevLogs.value.length > 0
     ? prevLogs.value.slice(1)
     : prevLogs.value,
 );
@@ -139,35 +117,55 @@ function onRefreshToggle() {
     <template #title>Analysis</template>
     <template #subtitle>
       <div class="table-header-row">
-        <span>{{ analysisId }}</span>
-        <RefreshSwitch
-          :disabled="analysis?.execution_status !== ProcessStatus.Executing"
-          :startEnabled="analysis?.execution_status === ProcessStatus.Executing"
-          @change="onRefreshToggle"
-        />
+        <div class="analysis-subtitle">
+          <span v-if="analysis?.analysis?.name" class="analysis-name">{{
+            analysis.analysis.name
+          }}</span>
+          <span class="analysis-id">{{ analysisId }}</span>
+        </div>
+        <div class="log-header-controls">
+          <ToggleButton
+            v-model="showTimestamps"
+            onLabel="Timestamps On"
+            offLabel="Timestamps Off"
+            onIcon="pi pi-clock"
+            offIcon="pi pi-clock"
+            class="log-timestamp-toggle"
+          />
+          <RefreshSwitch
+            :disabled="analysis?.execution_status !== ProcessStatus.Executing"
+            :startEnabled="
+              analysis?.execution_status === ProcessStatus.Executing
+            "
+            @change="onRefreshToggle"
+          />
+        </div>
       </div>
     </template>
     <template #content>
       <div class="log-container current-logs-card">
-        <Fieldset
-          v-if="!currentLogs && prevLogs.length > 0"
-          :toggleable="true"
-          class="log-card-failed-fs"
-          legend="Most Recent Run"
+        <div
+          v-if="!logChunks.initialized.value && prevLogs.length > 0"
+          class="log-card-failed"
         >
-          <div class="log-card-failed">
-            <AnalysisLogCardContent
-              :analysisLogs="prevLogs[0]!.analysis_logs"
-              :nginxLogs="prevLogs[0]!.nginx_logs"
-            />
-          </div>
-        </Fieldset>
-        <Fieldset v-else :toggleable="true" legend="Current Run">
           <AnalysisLogCardContent
-            :analysisLogs="currentLogs?.analysis_logs ?? []"
-            :nginxLogs="currentLogs?.nginx_logs ?? []"
+            :nginxLines="prevLogs[0]!.nginxLines"
+            :analysisLines="prevLogs[0]!.analysisLines"
+            :showTimestamps="showTimestamps"
           />
-        </Fieldset>
+        </div>
+        <AnalysisLogCardContent
+          v-else
+          :nginxLines="logChunks.nginxLines.value"
+          :analysisLines="logChunks.analysisLines.value"
+          :showTimestamps="showTimestamps"
+          :nginxHasOlder="logChunks.hasOlder.value"
+          :analysisHasOlder="logChunks.hasOlder.value"
+          :nginxLoading="logChunks.isLoading.value"
+          :analysisLoading="logChunks.isLoading.value"
+          :onLoadOlderNginx="logChunks.loadOlderChunk"
+          :onLoadOlderAnalysis="logChunks.loadOlderChunk"
+        />
       </div>
       <div class="log-container previous-logs-collection-card">
         <Fieldset :toggleable="true" legend="All Previous Runs">
@@ -180,8 +178,9 @@ function onRefreshToggle() {
               :toggleable="true"
             >
               <AnalysisLogCardContent
-                :analysisLogs="run.analysis_logs"
-                :nginxLogs="run.nginx_logs"
+                :nginxLines="run.nginxLines"
+                :analysisLines="run.analysisLines"
+                :showTimestamps="showTimestamps"
               />
             </Fieldset>
           </div>
@@ -198,4 +197,30 @@ function onRefreshToggle() {
 .previous-logs-collection-card {
   margin-top: 2em;
 }
+
+.analysis-subtitle {
+  display: flex;
+  flex-direction: column;
+  gap: 0.1em;
+}
+
+.analysis-name {
+  font-weight: 600;
+  font-size: 1em;
+}
+
+.analysis-id {
+  font-size: 0.85em;
+  opacity: 0.7;
+}
+
+.log-header-controls {
+  display: flex;
+  align-items: center;
+  gap: 0.75em;
+}
+
+.log-timestamp-toggle {
+  font-size: 0.8em;
+}
 </style>
diff --git a/app/components/analysis/logs/RefreshSwitch.vue b/app/components/analysis/logs/RefreshSwitch.vue
index 4d28c86..a7bba3d 100644
--- a/app/components/analysis/logs/RefreshSwitch.vue
+++ b/app/components/analysis/logs/RefreshSwitch.vue
@@ -1,36 +1,29 @@
 <script lang="ts" setup>
-import ToggleSwitch from "primevue/toggleswitch";
-
 const props = defineProps({
   disabled: Boolean,
   startEnabled: Boolean,
 });
 
+defineEmits(["change"]);
+
 const periodicRefresh = ref(props.startEnabled);
+
 const tooltip = props.disabled
   ? "Refresh disabled since there is no current active run"
   : "Refresh logs every 5 seconds";
 </script>
 
 <template>
-  <div class="log-toggle-switch">
-    <div>
-      <span style="font-size: 12px; padding-right: 0.5em">
-        Refresh periodically
-      </span>
-    </div>
-    <div v-tooltip.top="tooltip" class="refresh-toggle">
-      <ToggleSwitch
-        id="refreshBtn"
-        v-model="periodicRefresh"
-        :disabled="props.disabled"
-      />
-    </div>
-  </div>
+  <ToggleButton
+    id="refreshBtn"
+    v-model="periodicRefresh"
+    :disabled="props.disabled"
+    onLabel="Refresh Logs On"
+    offLabel="Refresh Logs Off"
+    onIcon="pi pi-refresh"
+    offIcon="pi pi-refresh"
+    class="log-timestamp-toggle"
+    v-tooltip.top="tooltip"
+    @change="$emit('change')"
+  />
 </template>
-
-<style lang="scss" scoped>
-.log-toggle-switch {
-  display: flex;
-}
-</style>
diff --git a/app/composables/useLogChunks.ts b/app/composables/useLogChunks.ts
index 210bbb0..3e1c5b1 100644
--- a/app/composables/useLogChunks.ts
+++ b/app/composables/useLogChunks.ts
@@ -1,27 +1,33 @@
 import { ref } from "vue";
 import { useNuxtApp } from "nuxt/app";
-import type { AnalysisLogsResponse } from "~/services/Api";
+import type { AnalysisLogsResponse, PodLog } from "~/services/Api";
 import { flattenLogs, type FlatLogLine } from "~/types/logs";
 
 const CHUNK_SIZE = 300;
 
+function oldestTimestampOf(a: PodLog[], b: PodLog[]): string | null {
+  const candidates = [a[0]?.timestamp, b[0]?.timestamp].filter(Boolean) as string[];
+  if (candidates.length === 0) return null;
+  return candidates.reduce((min, t) => (t < min ? t : min));
+}
+
 export function useLogChunks(analysisId: string) {
   const nginxLines = ref<FlatLogLine[]>([]);
   const analysisLines = ref<FlatLogLine[]>([]);
-  const offset = ref(0);
-  const hasMore = ref(false);
+  const oldestTimestamp = ref<string | null>(null);
+  const hasOlder = ref(false);
   const isLoading = ref(false);
   const initialized = ref(false);
   const httpError = ref<number | null>(null);
   const runNumber = ref<number | null>(null);
 
   async function fetchChunk(
-    chunkOffset: number,
+    query: { end_date?: string },
   ): Promise<AnalysisLogsResponse | undefined> {
     return useNuxtApp()
       .$hubApi<AnalysisLogsResponse>(`/logs/${analysisId}`, {
         method: "GET",
-        query: { limit: CHUNK_SIZE, offset: chunkOffset },
+        query: { limit: CHUNK_SIZE, ...query },
       })
       .catch((err: any) => {
         httpError.value = err?.statusCode ?? err?.status ?? null;
@@ -34,12 +40,12 @@ export function useLogChunks(analysisId: string) {
     httpError.value = null;
     isLoading.value = true;
     try {
-      const result = await fetchChunk(0);
+      const result = await fetchChunk({ end_date: new Date().toISOString() });
       if (result) {
         nginxLines.value = flattenLogs(result.nginx_logs);
         analysisLines.value = flattenLogs(result.analysis_logs);
-        offset.value = CHUNK_SIZE;
-        hasMore.value =
+        oldestTimestamp.value = oldestTimestampOf(result.nginx_logs, result.analysis_logs);
+        hasOlder.value =
           result.nginx_logs.length === CHUNK_SIZE ||
           result.analysis_logs.length === CHUNK_SIZE;
         initialized.value = true;
@@ -50,19 +56,18 @@ export function useLogChunks(analysisId: string) {
     }
   }
 
-  async function loadNextChunk(): Promise<void> {
-    if (isLoading.value || !hasMore.value) return;
+  async function loadOlderChunk(): Promise<void> {
+    if (isLoading.value || !hasOlder.value || !oldestTimestamp.value) return;
     isLoading.value = true;
     try {
-      const result = await fetchChunk(offset.value);
+      const result = await fetchChunk({ end_date: oldestTimestamp.value });
       if (result) {
-        nginxLines.value = [...nginxLines.value, ...flattenLogs(result.nginx_logs)];
-        analysisLines.value = [
-          ...analysisLines.value,
-          ...flattenLogs(result.analysis_logs),
-        ];
-        offset.value += CHUNK_SIZE;
-        hasMore.value =
+        const newNginx = flattenLogs(result.nginx_logs);
+        const newAnalysis = flattenLogs(result.analysis_logs);
+        nginxLines.value = [...newNginx, ...nginxLines.value];
+        analysisLines.value = [...newAnalysis, ...analysisLines.value];
+        oldestTimestamp.value = oldestTimestampOf(result.nginx_logs, result.analysis_logs);
+        hasOlder.value =
           result.nginx_logs.length === CHUNK_SIZE ||
           result.analysis_logs.length === CHUNK_SIZE;
       }
@@ -82,8 +87,8 @@ export function useLogChunks(analysisId: string) {
   function reset(): void {
     nginxLines.value = [];
     analysisLines.value = [];
-    offset.value = 0;
-    hasMore.value = false;
+    oldestTimestamp.value = null;
+    hasOlder.value = false;
     isLoading.value = false;
     initialized.value = false;
     httpError.value = null;
@@ -93,14 +98,14 @@ export function useLogChunks(analysisId: string) {
   return {
     nginxLines,
     analysisLines,
-    offset,
-    hasMore,
+    oldestTimestamp,
+    hasOlder,
     isLoading,
     initialized,
     httpError,
     runNumber,
     initialize,
-    loadNextChunk,
+    loadOlderChunk,
     appendPolled,
     reset,
   };
diff --git a/test/components/analysis/logs/AnalysisLogCardContent.spec.ts b/test/components/analysis/logs/AnalysisLogCardContent.spec.ts
index 6d4e91c..6184643 100644
--- a/test/components/analysis/logs/AnalysisLogCardContent.spec.ts
+++ b/test/components/analysis/logs/AnalysisLogCardContent.spec.ts
@@ -1,9 +1,35 @@
+import { defineComponent, h } from "vue";
 import { mount } from "@vue/test-utils";
 import { afterEach, beforeEach, describe, expect, test, vi } from "vitest";
-import { fakeLogs, fakePodLogs } from "../constants";
+import { fakeLogs } from "../constants";
 import AnalysisLogCardContent from "~/components/analysis/logs/AnalysisLogCardContent.vue";
 import { useToast } from "primevue/usetoast";
 import Button from "primevue/button";
+import type { FlatLogLine } from "~/types/logs";
+
+// Stub VirtualScroller to render all items in tests (no DOM dimensions needed)
+const VirtualScrollerStub = defineComponent({
+  name: "VirtualScroller",
+  props: { items: Array },
+  setup(props, { slots }) {
+    return () =>
+      h(
+        "div",
+        (props.items ?? []).map((item) =>
+          slots.item ? slots.item({ item }) : null,
+        ),
+      );
+  },
+});
+
+const fakeFlatLines: FlatLogLine[] = [
+  {
+    content: fakeLogs,
+    level: undefined,
+    timestamp: "2025-01-01T00:00:00Z",
+    isStacktrace: false,
+  },
+];
 
 describe("AnalysisLogCardContent.vue", () => {
   let mockToast;
@@ -36,7 +62,10 @@ describe("AnalysisLogCardContent.vue", () => {
 
   test("Render the logs", () => {
     const wrapper = mount(AnalysisLogCardContent, {
-      props: { nginxLogs: fakePodLogs, analysisLogs: fakePodLogs },
+      props: { nginxLines: fakeFlatLines, analysisLines: fakeFlatLines },
+      global: {
+        stubs: { VirtualScroller: VirtualScrollerStub },
+      },
     });
     expect(wrapper.text()).toContain("Starting FlameCoreSDK");
 
@@ -45,7 +74,9 @@ describe("AnalysisLogCardContent.vue", () => {
   });
 
   test("Report no logs found", () => {
-    const wrapper = mount(AnalysisLogCardContent, {});
+    const wrapper = mount(AnalysisLogCardContent, {
+      props: { nginxLines: [], analysisLines: [] },
+    });
     expect(wrapper.text()).toContain("No logs found");
 
     const logBtns = wrapper.findAll(".log-btn");
@@ -54,7 +85,7 @@ describe("AnalysisLogCardContent.vue", () => {
 
   test("Download the logs", async () => {
     const wrapper = mount(AnalysisLogCardContent, {
-      props: { nginxLogs: fakePodLogs, analysisLogs: fakePodLogs },
+      props: { nginxLines: fakeFlatLines, analysisLines: fakeFlatLines },
       global: {
         stubs: {
           Toast: true, // prevent PrimeVue Toast from mounting a portal
@@ -84,7 +115,7 @@ describe("AnalysisLogCardContent.vue", () => {
 
   test("Copy the logs", async () => {
     const wrapper = mount(AnalysisLogCardContent, {
-      props: { nginxLogs: fakePodLogs, analysisLogs: fakePodLogs },
+      props: { nginxLines: fakeFlatLines, analysisLines: fakeFlatLines },
       global: {
         stubs: {
           Toast: true, // prevent PrimeVue Toast from mounting a portal
@@ -108,4 +139,61 @@ describe("AnalysisLogCardContent.vue", () => {
       group: "copiedLogs",
     });
   });
+
+  describe("scroll load-older trigger", () => {
+    function makeScrollEvent(scrollTop: number, clientHeight: number, scrollHeight: number): Event {
+      const el = document.createElement("div");
+      Object.defineProperty(el, "scrollTop", { value: scrollTop, configurable: true });
+      Object.defineProperty(el, "clientHeight", { value: clientHeight, configurable: true });
+      Object.defineProperty(el, "scrollHeight", { value: scrollHeight, configurable: true });
+      const event = new Event("scroll");
+      Object.defineProperty(event, "target", { value: el, configurable: true });
+      return event;
+    }
+
+    test("onNginxScroll calls onLoadOlderNginx when near top with nginxHasOlder=true and nginxLoading=false", async () => {
+      const onLoadOlderNginx = vi.fn().mockResolvedValue(undefined);
+      const wrapper = mount(AnalysisLogCardContent, {
+        props: {
+          nginxLines: fakeFlatLines,
+          analysisLines: fakeFlatLines,
+          nginxHasOlder: true,
+          nginxLoading: false,
+          onLoadOlderNginx,
+        },
+        global: {
+          stubs: { VirtualScroller: VirtualScrollerStub },
+        },
+      });
+
+      // Scrolled to near top: scrollTop=30 <= 50 ✓
+      const event = makeScrollEvent(30, 100, 1000);
+      (wrapper.vm as unknown as Record<string, (e: Event) => void>).onNginxScroll(event);
+      await wrapper.vm.$nextTick();
+
+      expect(onLoadOlderNginx).toHaveBeenCalledOnce();
+    });
+
+    test("onNginxScroll does NOT call onLoadOlderNginx when scrolled to bottom, even if nginxHasOlder=true", () => {
+      const onLoadOlderNginx = vi.fn().mockResolvedValue(undefined);
+      const wrapper = mount(AnalysisLogCardContent, {
+        props: {
+          nginxLines: fakeFlatLines,
+          analysisLines: fakeFlatLines,
+          nginxHasOlder: true,
+          nginxLoading: false,
+          onLoadOlderNginx,
+        },
+        global: {
+          stubs: { VirtualScroller: VirtualScrollerStub },
+        },
+      });
+
+      // Scrolled to bottom: scrollTop=900, well past the 50px threshold ✗
+      const event = makeScrollEvent(900, 100, 1000);
+      (wrapper.vm as unknown as Record<string, (e: Event) => void>).onNginxScroll(event);
+
+      expect(onLoadOlderNginx).not.toHaveBeenCalled();
+    });
+  });
 });
diff --git a/test/components/analysis/logs/ContainerLogs.spec.ts b/test/components/analysis/logs/ContainerLogs.spec.ts
index f011ced..46563c1 100644
--- a/test/components/analysis/logs/ContainerLogs.spec.ts
+++ b/test/components/analysis/logs/ContainerLogs.spec.ts
@@ -1,15 +1,29 @@
-import { defineComponent, ref } from "vue";
+import { defineComponent, h, ref } from "vue";
 import { flushPromises, mount } from "@vue/test-utils";
 import { beforeAll, beforeEach, describe, expect, test, vi } from "vitest";
 import { http, HttpResponse } from "msw";
 import ContainerLogs from "~/components/analysis/logs/ContainerLogs.vue";
-import { getAnalysisLogs } from "~/composables/useAPIFetch";
 import {
   fakeAnalysisId,
   fakeAnalysisNodeId,
 } from "@/test/mockapi/handlers";
 import { testServer } from "@/test/mockapi/setup";
 
+// Stub VirtualScroller to render all items in tests (no DOM dimensions needed)
+const VirtualScrollerStub = defineComponent({
+  name: "VirtualScroller",
+  props: { items: Array },
+  setup(props, { slots }) {
+    return () =>
+      h(
+        "div",
+        (props.items ?? []).map((item) =>
+          slots.item ? slots.item({ item }) : null,
+        ),
+      );
+  },
+});
+
 vi.mock("vue-router", () => ({
   useRoute: () => ({
     params: { id: fakeAnalysisId },
@@ -17,10 +31,34 @@ vi.mock("vue-router", () => ({
   }),
 }));
 
-vi.mock("~/composables/useAPIFetch", () => ({
-  getAnalysisLogs: vi.fn(),
+// Mock useLogChunks so tests control the chunk state without hitting MSW for logs
+vi.mock("~/composables/useLogChunks", () => ({
+  useLogChunks: vi.fn(),
 }));
 
+// navigateTo is a Nuxt auto-import; provide a no-op global stub for tests
+globalThis.navigateTo = vi.fn();
+
+import { useLogChunks } from "~/composables/useLogChunks";
+
+function makeLogChunksMock(overrides: Record<string, unknown> = {}) {
+  return {
+    nginxLines: ref([]),
+    analysisLines: ref([]),
+    oldestTimestamp: ref(null),
+    hasOlder: ref(false),
+    isLoading: ref(false),
+    initialized: ref(true),
+    httpError: ref(null),
+    runNumber: ref(1),
+    initialize: vi.fn().mockResolvedValue(undefined),
+    loadOlderChunk: vi.fn().mockResolvedValue(undefined),
+    appendPolled: vi.fn(),
+    reset: vi.fn(),
+    ...overrides,
+  };
+}
+
 describe("ContainerLogs.vue", () => {
   let wrapper;
   let LogTestComponent;
@@ -38,23 +76,24 @@ describe("ContainerLogs.vue", () => {
   });
 
   test("Parse returned analysis logs", async () => {
-    const mockedResp = {
-      analysis_id: fakeAnalysisId,
-      run_number: 1,
-      analysis_logs: [{ timestamp: "2025-01-01T00:00:00Z", message: "Starting FlameCoreSDK" }],
-      nginx_logs: [],
-    };
-    vi.mocked(getAnalysisLogs).mockResolvedValue({
-      data: ref(mockedResp),
-      pending: ref(false),
-      error: ref(undefined),
-      status: ref("success"),
-      refresh: vi.fn(),
-      execute: vi.fn(),
-      clear: vi.fn(),
+    const mockChunks = makeLogChunksMock({
+      nginxLines: ref([]),
+      analysisLines: ref([
+        {
+          content: "Starting FlameCoreSDK",
+          level: "INFO",
+          timestamp: "2025-01-01T00:00:00Z",
+          isStacktrace: false,
+        },
+      ]),
+      initialized: ref(true),
+      runNumber: ref(1),
     });
+    vi.mocked(useLogChunks).mockReturnValue(mockChunks);
 
-    wrapper = mount(LogTestComponent);
+    wrapper = mount(LogTestComponent, {
+      global: { stubs: { VirtualScroller: VirtualScrollerStub } },
+    });
     await flushPromises();
 
     expect(LogTestComponent).toBeTruthy();
@@ -71,17 +110,17 @@ describe("ContainerLogs.vue", () => {
       ),
     );
 
-    vi.mocked(getAnalysisLogs).mockResolvedValue({
-      data: ref(null),
-      pending: ref(false),
-      error: ref(undefined),
-      status: ref("success"),
-      refresh: vi.fn(),
-      execute: vi.fn(),
-      clear: vi.fn(),
+    const mockChunks = makeLogChunksMock({
+      nginxLines: ref([]),
+      analysisLines: ref([]),
+      initialized: ref(true),
+      runNumber: ref(null),
     });
+    vi.mocked(useLogChunks).mockReturnValue(mockChunks);
 
-    wrapper = mount(LogTestComponent);
+    wrapper = mount(LogTestComponent, {
+      global: { stubs: { VirtualScroller: VirtualScrollerStub } },
+    });
     await flushPromises();
 
     expect(LogTestComponent).toBeTruthy();
diff --git a/test/components/analysis/logs/RefreshSwitch.spec.ts b/test/components/analysis/logs/RefreshSwitch.spec.ts
index da014f3..85481a6 100644
--- a/test/components/analysis/logs/RefreshSwitch.spec.ts
+++ b/test/components/analysis/logs/RefreshSwitch.spec.ts
@@ -10,7 +10,7 @@ describe("RefreshSwitch.vue", async () => {
   });
 
   test("Mounts initially as turned off", () => {
-    expect(wrapper.get("input").attributes("aria-checked")).toBe("false");
+    expect(wrapper.find("#refreshBtn").attributes("data-p-checked")).toBe("false");
     expect(wrapper.find("#refreshBtn").attributes("data-p-disabled")).toBe(
       "false",
     );
@@ -19,14 +19,14 @@ describe("RefreshSwitch.vue", async () => {
   test("Toggles state when clicked", async () => {
     const toggle = wrapper.find("#refreshBtn");
     expect(toggle.attributes("data-p-checked")).toBe("false"); // start false
-    await wrapper.find("input").trigger("change");
+    await toggle.trigger("click");
 
     expect(wrapper.emitted()).toBeTruthy();
     expect(toggle.attributes("data-p-checked")).toBe("true");
 
     // Back to false
-    await wrapper.find("input").trigger("change");
-    expect(toggle.attributes("data-p-checked")).toBe("false"); // start false
+    await toggle.trigger("click");
+    expect(toggle.attributes("data-p-checked")).toBe("false");
   });
 
   test("Switch disabled", () => {
diff --git a/test/composables/useLogChunks.test.ts b/test/composables/useLogChunks.test.ts
index 5107dd6..e2ec5bb 100644
--- a/test/composables/useLogChunks.test.ts
+++ b/test/composables/useLogChunks.test.ts
@@ -6,8 +6,8 @@ import type { AnalysisLogsResponse, PodLog } from "~/services/Api";
 
 const ANALYSIS_ID = "test-analysis-123";
 
-const makePodLog = (message: string): PodLog => ({
-  timestamp: "2024-01-01T00:00:00Z",
+const makePodLog = (message: string, timestamp = "2024-01-01T00:00:00Z"): PodLog => ({
+  timestamp,
   message,
   level: "INFO",
   stacktrace: null,
@@ -15,33 +15,26 @@ const makePodLog = (message: string): PodLog => ({
 
 function makeLogsResponse(
   count: number,
-  offset = 0,
+  messageOffset = 0,
 ): AnalysisLogsResponse {
   return {
     analysis_id: ANALYSIS_ID,
     run_number: 1,
     nginx_logs: Array.from({ length: count }, (_, i) =>
-      makePodLog(`nginx-${offset + i}`),
+      makePodLog(`nginx-${messageOffset + i}`),
     ),
     analysis_logs: Array.from({ length: count }, (_, i) =>
-      makePodLog(`analysis-${offset + i}`),
+      makePodLog(`analysis-${messageOffset + i}`),
     ),
   };
 }
 
-function setupLogsHandler(
-  analysisId: string,
-  chunkSize: number,
-  totalLogs: number,
-) {
+function setupLogsHandler(analysisId: string, count: number) {
   testServer.use(
     http.get(`/logs/${analysisId}`, ({ request }) => {
       const url = new URL(request.url, "http://localhost");
-      const offset = Number(url.searchParams.get("offset") ?? 0);
-      const limit = Number(url.searchParams.get("limit") ?? totalLogs);
-      const remaining = Math.max(0, totalLogs - offset);
-      const count = Math.min(limit, remaining);
-      return HttpResponse.json(makeLogsResponse(count, offset));
+      const limit = Number(url.searchParams.get("limit") ?? count);
+      return HttpResponse.json(makeLogsResponse(Math.min(limit, count)));
     }),
   );
 }
@@ -49,7 +42,7 @@ function setupLogsHandler(
 describe("useLogChunks", () => {
   describe("initialize", () => {
     it("loads first chunk and sets lines", async () => {
-      setupLogsHandler(ANALYSIS_ID, 300, 5);
+      setupLogsHandler(ANALYSIS_ID, 5);
       const chunks = useLogChunks(ANALYSIS_ID);
       await chunks.initialize();
 
@@ -58,24 +51,24 @@ describe("useLogChunks", () => {
       expect(chunks.nginxLines.value[0].content).toBe("nginx-0");
     });
 
-    it("sets hasMore true when chunk is full (300 returned)", async () => {
-      setupLogsHandler(ANALYSIS_ID, 300, 600);
+    it("sets hasOlder true when chunk is full (300 returned)", async () => {
+      setupLogsHandler(ANALYSIS_ID, 300);
       const chunks = useLogChunks(ANALYSIS_ID);
       await chunks.initialize();
 
-      expect(chunks.hasMore.value).toBe(true);
+      expect(chunks.hasOlder.value).toBe(true);
     });
 
-    it("sets hasMore false when fewer than 300 returned", async () => {
-      setupLogsHandler(ANALYSIS_ID, 300, 50);
+    it("sets hasOlder false when fewer than 300 returned", async () => {
+      setupLogsHandler(ANALYSIS_ID, 50);
       const chunks = useLogChunks(ANALYSIS_ID);
       await chunks.initialize();
 
-      expect(chunks.hasMore.value).toBe(false);
+      expect(chunks.hasOlder.value).toBe(false);
     });
 
     it("sets initialized true after successful fetch", async () => {
-      setupLogsHandler(ANALYSIS_ID, 300, 5);
+      setupLogsHandler(ANALYSIS_ID, 5);
       const chunks = useLogChunks(ANALYSIS_ID);
       expect(chunks.initialized.value).toBe(false);
       await chunks.initialize();
@@ -110,40 +103,59 @@ describe("useLogChunks", () => {
     });
   });
 
-  describe("loadNextChunk", () => {
-    it("appends next chunk to existing lines", async () => {
-      setupLogsHandler(ANALYSIS_ID, 300, 600);
+  describe("loadOlderChunk", () => {
+    it("prepends older chunk before existing lines", async () => {
+      let callCount = 0;
+      testServer.use(
+        http.get(`/logs/${ANALYSIS_ID}`, () => {
+          callCount++;
+          // First call (initialize): returns newer 300 logs (message offsets 300-599)
+          // Second call (loadOlderChunk): returns older 300 logs (message offsets 0-299)
+          return HttpResponse.json(makeLogsResponse(300, callCount === 1 ? 300 : 0));
+        }),
+      );
+
       const chunks = useLogChunks(ANALYSIS_ID);
       await chunks.initialize();
-      await chunks.loadNextChunk();
+      await chunks.loadOlderChunk();
 
       expect(chunks.nginxLines.value).toHaveLength(600);
+      // Older chunk prepended: index 0 is from the older batch
+      expect(chunks.nginxLines.value[0].content).toBe("nginx-0");
+      // Original lines follow
       expect(chunks.nginxLines.value[300].content).toBe("nginx-300");
     });
 
-    it("sets hasMore false when second chunk is partial", async () => {
-      setupLogsHandler(ANALYSIS_ID, 300, 350);
+    it("sets hasOlder false when second chunk is partial", async () => {
+      let callCount = 0;
+      testServer.use(
+        http.get(`/logs/${ANALYSIS_ID}`, () => {
+          callCount++;
+          return HttpResponse.json(makeLogsResponse(callCount === 1 ? 300 : 50));
+        }),
+      );
+
       const chunks = useLogChunks(ANALYSIS_ID);
       await chunks.initialize();
-      await chunks.loadNextChunk();
+      await chunks.loadOlderChunk();
 
-      expect(chunks.hasMore.value).toBe(false);
+      expect(chunks.hasOlder.value).toBe(false);
       expect(chunks.nginxLines.value).toHaveLength(350);
     });
 
-    it("does not fetch when hasMore is false", async () => {
-      setupLogsHandler(ANALYSIS_ID, 300, 50);
+    it("does not fetch when hasOlder is false", async () => {
+      setupLogsHandler(ANALYSIS_ID, 50); // partial → hasOlder=false
       const chunks = useLogChunks(ANALYSIS_ID);
       await chunks.initialize();
       const lineCountBefore = chunks.nginxLines.value.length;
-      await chunks.loadNextChunk(); // hasMore is false, should no-op
+      await chunks.loadOlderChunk();
       expect(chunks.nginxLines.value).toHaveLength(lineCountBefore);
     });
   });
 
   describe("appendPolled", () => {
-    it("appends new polled logs to the end without changing offset or hasMore", async () => {
-      setupLogsHandler(ANALYSIS_ID, 300, 5);
+    it("appends new polled logs to the end without changing hasOlder", async () => {
+      setupLogsHandler(ANALYSIS_ID, 5);
       const chunks = useLogChunks(ANALYSIS_ID);
       await chunks.initialize();
 
@@ -157,20 +169,20 @@ describe("useLogChunks", () => {
 
       expect(chunks.nginxLines.value).toHaveLength(6);
       expect(chunks.nginxLines.value[5].content).toBe("new-nginx");
-      expect(chunks.hasMore.value).toBe(false); // unchanged
+      expect(chunks.hasOlder.value).toBe(false); // unchanged
     });
   });
 
   describe("reset", () => {
     it("clears all state", async () => {
-      setupLogsHandler(ANALYSIS_ID, 300, 5);
+      setupLogsHandler(ANALYSIS_ID, 5);
       const chunks = useLogChunks(ANALYSIS_ID);
       await chunks.initialize();
       chunks.reset();
 
       expect(chunks.nginxLines.value).toHaveLength(0);
       expect(chunks.analysisLines.value).toHaveLength(0);
-      expect(chunks.hasMore.value).toBe(false);
+      expect(chunks.hasOlder.value).toBe(false);
       expect(chunks.initialized.value).toBe(false);
       expect(chunks.runNumber.value).toBeNull();
     });

From f8cad0299ecd4ed0d67061c304873a7f33859308 Mon Sep 17 00:00:00 2001
From: Bruce Schultz <bschultz013@gmail.com>
Date: Tue, 26 May 2026 13:20:05 +0200
Subject: [PATCH 6/9] chore(logs): handle typing

---
 app/composables/useLogChunks.ts       | 24 ++++++++++++++++--------
 test/composables/useLogChunks.test.ts | 23 +++++++++++++++--------
 2 files changed, 31 insertions(+), 16 deletions(-)

diff --git a/app/composables/useLogChunks.ts b/app/composables/useLogChunks.ts
index 3e1c5b1..3b76ffc 100644
--- a/app/composables/useLogChunks.ts
+++ b/app/composables/useLogChunks.ts
@@ -1,12 +1,14 @@
 import { ref } from "vue";
 import { useNuxtApp } from "nuxt/app";
 import type { AnalysisLogsResponse, PodLog } from "~/services/Api";
-import { flattenLogs, type FlatLogLine } from "~/types/logs";
+import { type FlatLogLine, flattenLogs } from "~/types/logs";
 
 const CHUNK_SIZE = 300;
 
 function oldestTimestampOf(a: PodLog[], b: PodLog[]): string | null {
-  const candidates = [a[0]?.timestamp, b[0]?.timestamp].filter(Boolean) as string[];
+  const candidates = [a[0]?.timestamp, b[0]?.timestamp].filter(
+    Boolean,
+  ) as string[];
   if (candidates.length === 0) return null;
   return candidates.reduce((min, t) => (t < min ? t : min));
 }
@@ -21,15 +23,15 @@ export function useLogChunks(analysisId: string) {
   const httpError = ref<number | null>(null);
   const runNumber = ref<number | null>(null);
 
-  async function fetchChunk(
-    query: { end_date?: string },
-  ): Promise<AnalysisLogsResponse | undefined> {
+  async function fetchChunk(query: {
+    end_date?: string;
+  }): Promise<AnalysisLogsResponse | undefined> {
     return useNuxtApp()
       .$hubApi<AnalysisLogsResponse>(`/logs/${analysisId}`, {
         method: "GET",
         query: { limit: CHUNK_SIZE, ...query },
       })
-      .catch((err: any) => {
+      .catch((err) => {
         httpError.value = err?.statusCode ?? err?.status ?? null;
         return undefined;
       });
@@ -44,7 +46,10 @@ export function useLogChunks(analysisId: string) {
       if (result) {
         nginxLines.value = flattenLogs(result.nginx_logs);
         analysisLines.value = flattenLogs(result.analysis_logs);
-        oldestTimestamp.value = oldestTimestampOf(result.nginx_logs, result.analysis_logs);
+        oldestTimestamp.value = oldestTimestampOf(
+          result.nginx_logs,
+          result.analysis_logs,
+        );
         hasOlder.value =
           result.nginx_logs.length === CHUNK_SIZE ||
           result.analysis_logs.length === CHUNK_SIZE;
@@ -66,7 +71,10 @@ export function useLogChunks(analysisId: string) {
         const newAnalysis = flattenLogs(result.analysis_logs);
         nginxLines.value = [...newNginx, ...nginxLines.value];
         analysisLines.value = [...newAnalysis, ...analysisLines.value];
-        oldestTimestamp.value = oldestTimestampOf(result.nginx_logs, result.analysis_logs);
+        oldestTimestamp.value = oldestTimestampOf(
+          result.nginx_logs,
+          result.analysis_logs,
+        );
         hasOlder.value =
           result.nginx_logs.length === CHUNK_SIZE ||
           result.analysis_logs.length === CHUNK_SIZE;
diff --git a/test/composables/useLogChunks.test.ts b/test/composables/useLogChunks.test.ts
index e2ec5bb..fb65f0d 100644
--- a/test/composables/useLogChunks.test.ts
+++ b/test/composables/useLogChunks.test.ts
@@ -1,4 +1,4 @@
-import { describe, expect, it, beforeEach } from "vitest";
+import { describe, expect, it } from "vitest";
 import { http, HttpResponse } from "msw";
 import { testServer } from "@/test/mockapi/setup";
 import { useLogChunks } from "~/composables/useLogChunks";
@@ -6,7 +6,10 @@ import type { AnalysisLogsResponse, PodLog } from "~/services/Api";
 
 const ANALYSIS_ID = "test-analysis-123";
 
-const makePodLog = (message: string, timestamp = "2024-01-01T00:00:00Z"): PodLog => ({
+const makePodLog = (
+  message: string,
+  timestamp = "2024-01-01T00:00:00Z",
+): PodLog => ({
   timestamp,
   message,
   level: "INFO",
@@ -48,7 +51,7 @@ describe("useLogChunks", () => {
 
       expect(chunks.nginxLines.value).toHaveLength(5);
       expect(chunks.analysisLines.value).toHaveLength(5);
-      expect(chunks.nginxLines.value[0].content).toBe("nginx-0");
+      expect(chunks.nginxLines.value[0]!.content).toBe("nginx-0");
     });
 
     it("sets hasOlder true when chunk is full (300 returned)", async () => {
@@ -111,7 +114,9 @@ describe("useLogChunks", () => {
           callCount++;
           // First call (initialize): returns newer 300 logs (message offsets 300-599)
           // Second call (loadOlderChunk): returns older 300 logs (message offsets 0-299)
-          return HttpResponse.json(makeLogsResponse(300, callCount === 1 ? 300 : 0));
+          return HttpResponse.json(
+            makeLogsResponse(300, callCount === 1 ? 300 : 0),
+          );
         }),
       );
 
@@ -121,9 +126,9 @@ describe("useLogChunks", () => {
 
       expect(chunks.nginxLines.value).toHaveLength(600);
       // Older chunk prepended: index 0 is from the older batch
-      expect(chunks.nginxLines.value[0].content).toBe("nginx-0");
+      expect(chunks.nginxLines.value[0]!.content).toBe("nginx-0");
       // Original lines follow
-      expect(chunks.nginxLines.value[300].content).toBe("nginx-300");
+      expect(chunks.nginxLines.value[300]!.content).toBe("nginx-300");
     });
 
     it("sets hasOlder false when second chunk is partial", async () => {
@@ -131,7 +136,9 @@ describe("useLogChunks", () => {
       testServer.use(
         http.get(`/logs/${ANALYSIS_ID}`, () => {
           callCount++;
-          return HttpResponse.json(makeLogsResponse(callCount === 1 ? 300 : 50));
+          return HttpResponse.json(
+            makeLogsResponse(callCount === 1 ? 300 : 50),
+          );
         }),
       );
 
@@ -168,7 +175,7 @@ describe("useLogChunks", () => {
       chunks.appendPolled(polledResponse);
 
       expect(chunks.nginxLines.value).toHaveLength(6);
-      expect(chunks.nginxLines.value[5].content).toBe("new-nginx");
+      expect(chunks.nginxLines.value[5]!.content).toBe("new-nginx");
       expect(chunks.hasOlder.value).toBe(false); // unchanged
     });
   });

From b89fdd9f76b9cda21ccd648ed812baefec79c57b Mon Sep 17 00:00:00 2001
From: Bruce Schultz <bschultz013@gmail.com>
Date: Tue, 26 May 2026 14:24:48 +0200
Subject: [PATCH 7/9] refactor(logs): fix duplicated log bug and simplify
 scroll logic

---
 .../analysis/logs/AnalysisLogCardContent.vue  | 169 ++++++++----------
 .../analysis/logs/ContainerLogs.vue           |  21 ++-
 app/composables/useLogChunks.ts               |  25 +--
 3 files changed, 111 insertions(+), 104 deletions(-)

diff --git a/app/components/analysis/logs/AnalysisLogCardContent.vue b/app/components/analysis/logs/AnalysisLogCardContent.vue
index 91d3020..3c0d30e 100644
--- a/app/components/analysis/logs/AnalysisLogCardContent.vue
+++ b/app/components/analysis/logs/AnalysisLogCardContent.vue
@@ -19,62 +19,80 @@ const props = defineProps<{
 
 const toast = useToast();
 
-const nginxScrollerRef = ref<{ $el: HTMLElement } | null>(null);
-const analysisScrollerRef = ref<{ $el: HTMLElement } | null>(null);
-
-// Plain booleans (not reactive) — updated on every scroll event, read in watchers
-let atNginxBottom = false;
-let atAnalysisBottom = false;
-
 function isNearBottom(el: HTMLElement): boolean {
   return el.scrollTop >= el.scrollHeight - el.clientHeight - 50;
 }
 
-onMounted(async () => {
-  await nextTick();
-  const nginxEl = nginxScrollerRef.value?.$el;
-  if (nginxEl && props.nginxLines.length > 0) {
-    nginxEl.scrollTop = nginxEl.scrollHeight;
-    atNginxBottom = true;
-  }
-  const analysisEl = analysisScrollerRef.value?.$el;
-  if (analysisEl && props.analysisLines.length > 0) {
-    analysisEl.scrollTop = analysisEl.scrollHeight;
-    atAnalysisBottom = true;
-  }
-});
-
-// Auto-scroll on polling appends: if user was at the bottom and items were appended
-// (not prepended — prepends have a different first-item timestamp)
-watch(
-  () => props.nginxLines,
-  (newLines, oldLines) => {
-    if (!oldLines || newLines.length <= oldLines.length) return;
-    const wasAppend = newLines[0]?.timestamp === oldLines[0]?.timestamp;
-    if (wasAppend && atNginxBottom) {
-      nextTick().then(() => {
-        const el = nginxScrollerRef.value?.$el;
-        if (el) el.scrollTop = el.scrollHeight;
-      });
+function createScrollState(
+  getLines: () => FlatLogLine[],
+  getHasOlder: () => boolean | undefined,
+  getLoading: () => boolean | undefined,
+  getLoadFn: () => (() => Promise<void>) | undefined,
+) {
+  const scrollerRef = ref<{ $el: HTMLElement } | null>(null);
+  let atBottom = false;
+
+  onMounted(async () => {
+    await nextTick();
+    const el = scrollerRef.value?.$el;
+    if (el && getLines().length > 0) {
+      el.scrollTop = el.scrollHeight;
+      atBottom = true;
     }
-  },
-  { flush: "post" },
-);
-
-watch(
-  () => props.analysisLines,
-  (newLines, oldLines) => {
-    if (!oldLines || newLines.length <= oldLines.length) return;
-    const wasAppend = newLines[0]?.timestamp === oldLines[0]?.timestamp;
-    if (wasAppend && atAnalysisBottom) {
-      nextTick().then(() => {
-        const el = analysisScrollerRef.value?.$el;
-        if (el) el.scrollTop = el.scrollHeight;
-      });
+  });
+
+  // Auto-scroll on polling appends; prepends have a different first-item timestamp
+  watch(
+    getLines,
+    (newLines, oldLines) => {
+      if (!oldLines || newLines.length <= oldLines.length) return;
+      if (newLines[0]?.timestamp === oldLines[0]?.timestamp && atBottom) {
+        nextTick().then(() => {
+          const el = scrollerRef.value?.$el;
+          if (el) el.scrollTop = el.scrollHeight;
+        });
+      }
+    },
+    { flush: "post" },
+  );
+
+  async function loadOlder() {
+    const loadFn = getLoadFn();
+    if (!loadFn || getLoading()) return;
+    const el = scrollerRef.value?.$el as HTMLElement | null;
+    const prevScrollHeight = el?.scrollHeight ?? 0;
+    const prevScrollTop = el?.scrollTop ?? 0;
+    await loadFn();
+    await nextTick();
+    if (el) el.scrollTop = prevScrollTop + (el.scrollHeight - prevScrollHeight);
+  }
+
+  function onScroll(e: Event) {
+    const el = e.target as HTMLElement;
+    atBottom = isNearBottom(el);
+    if (el.scrollTop <= 50 && getHasOlder() && !getLoading()) {
+      loadOlder();
     }
-  },
-  { flush: "post" },
-);
+  }
+
+  return { scrollerRef, onScroll };
+}
+
+const { scrollerRef: nginxScrollerRef, onScroll: onNginxScroll } =
+  createScrollState(
+    () => props.nginxLines,
+    () => props.nginxHasOlder,
+    () => props.nginxLoading,
+    () => props.onLoadOlderNginx,
+  );
+
+const { scrollerRef: analysisScrollerRef, onScroll: onAnalysisScroll } =
+  createScrollState(
+    () => props.analysisLines,
+    () => props.analysisHasOlder,
+    () => props.analysisLoading,
+    () => props.onLoadOlderAnalysis,
+  );
 
 function formatTimestamp(ts: string): string {
   const d = new Date(ts);
@@ -155,41 +173,7 @@ async function copyToClipboard(isAnalysis: boolean) {
   }
 }
 
-function onNginxScroll(e: Event) {
-  const el = e.target as HTMLElement;
-  atNginxBottom = isNearBottom(el);
-  if (el.scrollTop <= 50 && props.nginxHasOlder && !props.nginxLoading) {
-    handleLoadOlderNginx();
-  }
-}
 
-function onAnalysisScroll(e: Event) {
-  const el = e.target as HTMLElement;
-  atAnalysisBottom = isNearBottom(el);
-  if (el.scrollTop <= 50 && props.analysisHasOlder && !props.analysisLoading) {
-    handleLoadOlderAnalysis();
-  }
-}
-
-async function handleLoadOlderNginx() {
-  if (!props.onLoadOlderNginx || props.nginxLoading) return;
-  const el = nginxScrollerRef.value?.$el as HTMLElement | null;
-  const prevScrollHeight = el?.scrollHeight ?? 0;
-  const prevScrollTop = el?.scrollTop ?? 0;
-  await props.onLoadOlderNginx();
-  await nextTick();
-  if (el) el.scrollTop = prevScrollTop + (el.scrollHeight - prevScrollHeight);
-}
-
-async function handleLoadOlderAnalysis() {
-  if (!props.onLoadOlderAnalysis || props.analysisLoading) return;
-  const el = analysisScrollerRef.value?.$el as HTMLElement | null;
-  const prevScrollHeight = el?.scrollHeight ?? 0;
-  const prevScrollTop = el?.scrollTop ?? 0;
-  await props.onLoadOlderAnalysis();
-  await nextTick();
-  if (el) el.scrollTop = prevScrollTop + (el.scrollHeight - prevScrollHeight);
-}
 </script>
 
 <template>
@@ -338,8 +322,6 @@ async function handleLoadOlderAnalysis() {
     monospace;
   font-size: 0.8em;
   height: 30em;
-  white-space: pre-wrap;
-  word-break: break-word;
 }
 
 .flame-dark .log-scroll-panel {
@@ -390,16 +372,18 @@ async function handleLoadOlderAnalysis() {
 }
 
 .log-entry {
-  margin-bottom: 0.1em;
+  height: 20px;
   display: flex;
-  align-items: baseline;
+  align-items: center;
   padding: 0 0.75rem;
+  overflow: hidden;
 }
 
 .log-message {
   display: block;
-  white-space: pre-wrap;
-  word-break: break-word;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
 
 .log-timestamp {
@@ -429,8 +413,9 @@ async function handleLoadOlderAnalysis() {
 
 .log-stacktrace-line {
   display: block;
-  white-space: pre-wrap;
-  word-break: break-word;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
   color: #fca5a5;
   border-left: 2px solid #f87171;
   padding-left: 0.5em;
diff --git a/app/components/analysis/logs/ContainerLogs.vue b/app/components/analysis/logs/ContainerLogs.vue
index 2036d91..eb21b4f 100644
--- a/app/components/analysis/logs/ContainerLogs.vue
+++ b/app/components/analysis/logs/ContainerLogs.vue
@@ -36,7 +36,17 @@ if (logChunks.httpError.value === 403) {
   await navigateTo("/error/403");
 } else {
   if (logChunks.initialized.value) {
-    lastFetchedAt.value = new Date().toISOString();
+    const allLines = [
+      ...logChunks.nginxLines.value,
+      ...logChunks.analysisLines.value,
+    ];
+    lastFetchedAt.value =
+      allLines.length > 0
+        ? allLines.reduce(
+            (max, l) => (l.timestamp > max ? l.timestamp : max),
+            allLines[0]!.timestamp,
+          )
+        : new Date().toISOString();
   }
 
   await Promise.all([gatherPreviousLogs(), fetchAnalysis()]);
@@ -96,7 +106,14 @@ async function refreshLogs() {
     .catch(() => undefined);
   if (result) {
     logChunks.appendPolled(result);
-    lastFetchedAt.value = fetchTime;
+    const allLogs = [...result.nginx_logs, ...result.analysis_logs];
+    lastFetchedAt.value =
+      allLogs.length > 0
+        ? allLogs.reduce(
+            (max, l) => (l.timestamp > max ? l.timestamp : max),
+            allLogs[0]!.timestamp,
+          )
+        : fetchTime;
   }
 }
 
diff --git a/app/composables/useLogChunks.ts b/app/composables/useLogChunks.ts
index 3b76ffc..234acd0 100644
--- a/app/composables/useLogChunks.ts
+++ b/app/composables/useLogChunks.ts
@@ -64,20 +64,25 @@ export function useLogChunks(analysisId: string) {
   async function loadOlderChunk(): Promise<void> {
     if (isLoading.value || !hasOlder.value || !oldestTimestamp.value) return;
     isLoading.value = true;
+    const boundary = oldestTimestamp.value;
     try {
-      const result = await fetchChunk({ end_date: oldestTimestamp.value });
+      const result = await fetchChunk({ end_date: boundary });
       if (result) {
-        const newNginx = flattenLogs(result.nginx_logs);
-        const newAnalysis = flattenLogs(result.analysis_logs);
-        nginxLines.value = [...newNginx, ...nginxLines.value];
-        analysisLines.value = [...newAnalysis, ...analysisLines.value];
-        oldestTimestamp.value = oldestTimestampOf(
-          result.nginx_logs,
-          result.analysis_logs,
+        const dedupedNginx = result.nginx_logs.filter(
+          (l) => l.timestamp !== boundary,
         );
+        const dedupedAnalysis = result.analysis_logs.filter(
+          (l) => l.timestamp !== boundary,
+        );
+        nginxLines.value = [...flattenLogs(dedupedNginx), ...nginxLines.value];
+        analysisLines.value = [
+          ...flattenLogs(dedupedAnalysis),
+          ...analysisLines.value,
+        ];
+        oldestTimestamp.value = oldestTimestampOf(dedupedNginx, dedupedAnalysis);
         hasOlder.value =
-          result.nginx_logs.length === CHUNK_SIZE ||
-          result.analysis_logs.length === CHUNK_SIZE;
+          dedupedNginx.length === CHUNK_SIZE ||
+          dedupedAnalysis.length === CHUNK_SIZE;
       }
     } finally {
       isLoading.value = false;

From 5a01b583f4266118e9681e4d8b8416c60925b154 Mon Sep 17 00:00:00 2001
From: Bruce Schultz <bschultz013@gmail.com>
Date: Tue, 26 May 2026 15:01:44 +0200
Subject: [PATCH 8/9] test: update unit tests

---
 .github/workflows/ci.yaml                     |   4 +-
 app/components/analysis/AnalysesTable.vue     |   2 +-
 test/composables/connectionErrorToast.test.ts | 246 ++++++++++++++++++
 test/composables/useAuthRefresh.test.ts       | 169 ++++++++++++
 test/composables/useLogChunks.test.ts         |  94 ++++++-
 test/mockapi/setup.ts                         |   5 +-
 test/utils/count-analyses.test.ts             | 108 ++++++++
 test/utils/format-data-row.test.ts            |  56 +++-
 test/utils/status-tag-severity.test.ts        |  12 +-
 9 files changed, 678 insertions(+), 18 deletions(-)
 create mode 100644 test/composables/connectionErrorToast.test.ts
 create mode 100644 test/composables/useAuthRefresh.test.ts
 create mode 100644 test/utils/count-analyses.test.ts

diff --git a/.github/workflows/ci.yaml b/.github/workflows/ci.yaml
index 5f440ff..9c2f4b6 100644
--- a/.github/workflows/ci.yaml
+++ b/.github/workflows/ci.yaml
@@ -33,7 +33,7 @@ jobs:
 
   run-tests:
     needs: changed
-    name: 'Build & Test: node-${{ matrix.node_version }}, ${{ matrix.os }}'
+    name: 'Build & Test'
     # if: needs.changed.outputs.should_skip != 'true'
     runs-on: ${{ matrix.os }}
 
@@ -50,7 +50,7 @@ jobs:
         uses: actions/checkout@v6
 
       - name: Harden Runner
-        uses: step-security/harden-runner@c6295a65d1254861815972266d5933fd6e532bdf  # tag=v2.11.2
+        uses: step-security/harden-runner@v2.19.4
         with:
           disable-sudo: true
           egress-policy: audit
diff --git a/app/components/analysis/AnalysesTable.vue b/app/components/analysis/AnalysesTable.vue
index a170c7a..6ddf239 100644
--- a/app/components/analysis/AnalysesTable.vue
+++ b/app/components/analysis/AnalysesTable.vue
@@ -492,7 +492,7 @@ const onCloseNavToast = () => {
           <div class="card flex justify-content-center refresh-switch">
             <Button
               v-tooltip.top="'Refresh table'"
-              :loading="status === 'pending'"
+              :loading="status.value === 'pending'"
               aria-label="Filter"
               class="table-refresh-btn"
               icon="pi pi-refresh"
diff --git a/test/composables/connectionErrorToast.test.ts b/test/composables/connectionErrorToast.test.ts
new file mode 100644
index 0000000..61c9934
--- /dev/null
+++ b/test/composables/connectionErrorToast.test.ts
@@ -0,0 +1,246 @@
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import type { ToastServiceMethods } from "primevue/toastservice";
+import {
+  showCacheWarningToast,
+  showConnectionErrorToast,
+  showDownstreamConnectionErrorToast,
+  showHubAdapterConnectionErrorToast,
+  showHubConnectionError,
+  showHubSpecificErrorMessage,
+  showInvalidRobotCredentialsToast,
+  showKongConnectionTestErrorToast,
+  showKongConsumerConnectionErrorToast,
+  showKongDuplicateErrorToast,
+  showNotAuthenticatedToast,
+  showProxyErrorToast,
+  showRbacPermissionError,
+} from "~/composables/connectionErrorToast";
+
+function makeToast(): { add: ReturnType<typeof vi.fn> } {
+  return { add: vi.fn() };
+}
+
+describe("showConnectionErrorToast", () => {
+  beforeEach(() => vi.useFakeTimers());
+  afterEach(() => {
+    vi.runAllTimers(); // drain activeToasts cleanup so state is fresh per test
+    vi.useRealTimers();
+  });
+
+  it("calls toast.add with the provided params and a default life of 5000ms", () => {
+    const toast = makeToast();
+    showConnectionErrorToast(toast as unknown as ToastServiceMethods, {
+      severity: "error",
+      summary: "Test Error",
+      detail: "Something went wrong",
+    });
+    expect(toast.add).toHaveBeenCalledOnce();
+    expect(toast.add).toHaveBeenCalledWith({
+      severity: "error",
+      summary: "Test Error",
+      detail: "Something went wrong",
+      life: 5000,
+    });
+  });
+
+  it("uses a custom life when provided", () => {
+    const toast = makeToast();
+    showConnectionErrorToast(toast as unknown as ToastServiceMethods, {
+      severity: "warn",
+      summary: "Custom life",
+      detail: "8s toast",
+      life: 8000,
+    });
+    expect(toast.add).toHaveBeenCalledWith(
+      expect.objectContaining({ life: 8000 }),
+    );
+  });
+
+  it("suppresses a duplicate toast before life expires", () => {
+    const toast = makeToast();
+    const params = {
+      severity: "warn" as const,
+      summary: "Dedup test",
+      detail: "same toast twice",
+    };
+    showConnectionErrorToast(toast as unknown as ToastServiceMethods, params);
+    showConnectionErrorToast(toast as unknown as ToastServiceMethods, params);
+    expect(toast.add).toHaveBeenCalledOnce();
+  });
+
+  it("allows the same toast again once life has elapsed", () => {
+    const toast = makeToast();
+    const params = {
+      severity: "info" as const,
+      summary: "Retry toast",
+      detail: "retry after expiry",
+      life: 1000,
+    };
+    showConnectionErrorToast(toast as unknown as ToastServiceMethods, params);
+    vi.advanceTimersByTime(1001);
+    showConnectionErrorToast(toast as unknown as ToastServiceMethods, params);
+    expect(toast.add).toHaveBeenCalledTimes(2);
+  });
+});
+
+describe("helper toast functions", () => {
+  let toast: ReturnType<typeof makeToast>;
+  let warnSpy: ReturnType<typeof vi.spyOn>;
+  let errorSpy: ReturnType<typeof vi.spyOn>;
+
+  beforeEach(() => {
+    vi.useFakeTimers();
+    toast = makeToast();
+    warnSpy = vi.spyOn(console, "warn").mockImplementation(() => {});
+    errorSpy = vi.spyOn(console, "error").mockImplementation(() => {});
+  });
+
+  afterEach(() => {
+    vi.runAllTimers();
+    vi.useRealTimers();
+    warnSpy.mockRestore();
+    errorSpy.mockRestore();
+  });
+
+  it("showNotAuthenticatedToast shows a Missing JWT error", () => {
+    showNotAuthenticatedToast(toast as unknown as ToastServiceMethods);
+    expect(toast.add).toHaveBeenCalledWith(
+      expect.objectContaining({
+        severity: "error",
+        summary: "Missing JWT",
+        detail: "No token was found for your account.",
+      }),
+    );
+  });
+
+  it("showHubAdapterConnectionErrorToast shows a generic message when no service given", () => {
+    showHubAdapterConnectionErrorToast(
+      toast as unknown as ToastServiceMethods,
+      undefined,
+    );
+    expect(toast.add).toHaveBeenCalledWith(
+      expect.objectContaining({
+        detail: "The API encountered an error",
+      }),
+    );
+  });
+
+  it("showHubAdapterConnectionErrorToast includes the service name when given", () => {
+    showHubAdapterConnectionErrorToast(
+      toast as unknown as ToastServiceMethods,
+      "ResultService",
+    );
+    expect(toast.add).toHaveBeenCalledWith(
+      expect.objectContaining({
+        detail: expect.stringContaining("ResultService"),
+      }),
+    );
+  });
+
+  it("showCacheWarningToast shows a warn severity toast", () => {
+    showCacheWarningToast(toast as unknown as ToastServiceMethods);
+    expect(toast.add).toHaveBeenCalledWith(
+      expect.objectContaining({ severity: "warn" }),
+    );
+  });
+
+  it("showDownstreamConnectionErrorToast includes the service name and logs console.warn", () => {
+    showDownstreamConnectionErrorToast(
+      toast as unknown as ToastServiceMethods,
+      "DataApi",
+    );
+    expect(toast.add).toHaveBeenCalledWith(
+      expect.objectContaining({ detail: expect.stringContaining("DataApi") }),
+    );
+    expect(warnSpy).toHaveBeenCalledWith(
+      expect.stringContaining("DataApi"),
+    );
+  });
+
+  it("showProxyErrorToast logs console.warn", () => {
+    showProxyErrorToast(toast as unknown as ToastServiceMethods);
+    expect(toast.add).toHaveBeenCalledOnce();
+    expect(warnSpy).toHaveBeenCalledOnce();
+  });
+
+  it("showKongConnectionTestErrorToast uses life 8000 and logs console.error", () => {
+    showKongConnectionTestErrorToast(
+      toast as unknown as ToastServiceMethods,
+      "connection refused",
+    );
+    expect(toast.add).toHaveBeenCalledWith(
+      expect.objectContaining({
+        life: 8000,
+        detail: expect.stringContaining("connection refused"),
+      }),
+    );
+    expect(errorSpy).toHaveBeenCalledWith("connection refused");
+  });
+
+  it("showKongDuplicateErrorToast shows a duplicate entry error", () => {
+    showKongDuplicateErrorToast(toast as unknown as ToastServiceMethods);
+    expect(toast.add).toHaveBeenCalledWith(
+      expect.objectContaining({ summary: "Duplicate entry error" }),
+    );
+  });
+
+  it("showKongConsumerConnectionErrorToast includes the service in the summary", () => {
+    showKongConsumerConnectionErrorToast(
+      toast as unknown as ToastServiceMethods,
+      "FHIR",
+      "timed out",
+    );
+    expect(toast.add).toHaveBeenCalledWith(
+      expect.objectContaining({
+        summary: "FHIR connection error",
+        detail: "timed out",
+      }),
+    );
+  });
+
+  it("showInvalidRobotCredentialsToast shows an error and logs console.warn", () => {
+    showInvalidRobotCredentialsToast(toast as unknown as ToastServiceMethods);
+    expect(toast.add).toHaveBeenCalledWith(
+      expect.objectContaining({
+        severity: "error",
+        summary: "Invalid Robot Credentials",
+      }),
+    );
+    expect(warnSpy).toHaveBeenCalledOnce();
+  });
+
+  it("showRbacPermissionError passes the message as the toast detail", () => {
+    showRbacPermissionError(
+      toast as unknown as ToastServiceMethods,
+      "Access denied",
+    );
+    expect(toast.add).toHaveBeenCalledWith(
+      expect.objectContaining({
+        summary: "Unauthorized Error",
+        detail: "Access denied",
+      }),
+    );
+  });
+
+  it("showHubConnectionError shows a connection error and logs console.warn", () => {
+    showHubConnectionError(toast as unknown as ToastServiceMethods);
+    expect(toast.add).toHaveBeenCalledWith(
+      expect.objectContaining({
+        severity: "error",
+        detail: "Unable to contact the Hub.",
+      }),
+    );
+    expect(warnSpy).toHaveBeenCalledOnce();
+  });
+
+  it("showHubSpecificErrorMessage uses the message as both detail and console.warn", () => {
+    showHubSpecificErrorMessage(
+      toast as unknown as ToastServiceMethods,
+      "Hub returned 502",
+    );
+    expect(toast.add).toHaveBeenCalledWith(
+      expect.objectContaining({ detail: "Hub returned 502" }),
+    );
+    expect(warnSpy).toHaveBeenCalledWith("Hub returned 502");
+  });
+});
diff --git a/test/composables/useAuthRefresh.test.ts b/test/composables/useAuthRefresh.test.ts
new file mode 100644
index 0000000..191207a
--- /dev/null
+++ b/test/composables/useAuthRefresh.test.ts
@@ -0,0 +1,169 @@
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import { ref } from "vue";
+import { useAuth } from "@sidebase/nuxt-auth";
+import { useAuthRefresh } from "~/composables/useAuthRefresh";
+
+// Helpers to build mock useAuth state
+function mockAuthAs(
+  status: string,
+  expiresAt?: number,
+  refreshFn: () => Promise<void> = vi.fn().mockResolvedValue(undefined),
+) {
+  vi.mocked(useAuth).mockReturnValue({
+    status: ref(status),
+    data: ref(expiresAt !== undefined ? { expiresAt } : expiresAt),
+    refresh: refreshFn,
+    signIn: vi.fn(),
+    signOut: vi.fn(),
+  });
+}
+
+describe("useAuthRefresh", () => {
+  let warnSpy: ReturnType<typeof vi.spyOn>;
+  let errorSpy: ReturnType<typeof vi.spyOn>;
+
+  beforeEach(() => {
+    warnSpy = vi.spyOn(console, "warn").mockImplementation(() => {});
+    errorSpy = vi.spyOn(console, "error").mockImplementation(() => {});
+  });
+
+  afterEach(() => {
+    warnSpy.mockRestore();
+    errorSpy.mockRestore();
+  });
+
+  describe("shouldRefreshToken", () => {
+    it("returns false when not authenticated", () => {
+      mockAuthAs("unauthenticated");
+      const { shouldRefreshToken } = useAuthRefresh();
+      expect(shouldRefreshToken()).toBe(false);
+    });
+
+    it("returns false when data is null", () => {
+      vi.mocked(useAuth).mockReturnValue({
+        status: ref("authenticated"),
+        data: ref(null),
+        refresh: vi.fn(),
+        signIn: vi.fn(),
+        signOut: vi.fn(),
+      });
+      const { shouldRefreshToken } = useAuthRefresh();
+      expect(shouldRefreshToken()).toBe(false);
+    });
+
+    it("returns false and warns when session has no expiresAt", () => {
+      vi.mocked(useAuth).mockReturnValue({
+        status: ref("authenticated"),
+        data: ref({}), // no expiresAt
+        refresh: vi.fn(),
+        signIn: vi.fn(),
+        signOut: vi.fn(),
+      });
+      const { shouldRefreshToken } = useAuthRefresh();
+      expect(shouldRefreshToken()).toBe(false);
+      expect(warnSpy).toHaveBeenCalledWith(
+        "Token expiration time not found in session data",
+      );
+    });
+
+    it("returns false when token expires far in the future (beyond buffer)", () => {
+      const farFuture = Math.floor(Date.now() / 1000) + 600; // 10 min away
+      mockAuthAs("authenticated", farFuture);
+      const { shouldRefreshToken } = useAuthRefresh();
+      expect(shouldRefreshToken(120)).toBe(false); // 120s buffer
+    });
+
+    it("returns true when token expires within the buffer window", () => {
+      const soonExpiry = Math.floor(Date.now() / 1000) + 60; // 60s away
+      mockAuthAs("authenticated", soonExpiry);
+      const { shouldRefreshToken } = useAuthRefresh();
+      expect(shouldRefreshToken(120)).toBe(true); // 120s buffer → 60s < 120s
+    });
+
+    it("returns false when token has already expired", () => {
+      const pastExpiry = Math.floor(Date.now() / 1000) - 10; // 10s ago
+      mockAuthAs("authenticated", pastExpiry);
+      const { shouldRefreshToken } = useAuthRefresh();
+      expect(shouldRefreshToken()).toBe(false);
+    });
+
+    it("respects a custom bufferSeconds argument", () => {
+      const expiry = Math.floor(Date.now() / 1000) + 200; // 200s away
+      mockAuthAs("authenticated", expiry);
+      const { shouldRefreshToken } = useAuthRefresh();
+      expect(shouldRefreshToken(300)).toBe(true); // 200s < 300s buffer
+      expect(shouldRefreshToken(120)).toBe(false); // 200s > 120s buffer
+    });
+  });
+
+  describe("refreshToken", () => {
+    it("returns 'No active session' when not authenticated", async () => {
+      mockAuthAs("unauthenticated");
+      const { refreshToken } = useAuthRefresh();
+      const result = await refreshToken();
+      expect(result).toEqual({ success: false, error: "No active session" });
+    });
+
+    it("returns success when refresh succeeds and session stays authenticated", async () => {
+      const expiry = Math.floor(Date.now() / 1000) + 3600;
+      mockAuthAs("authenticated", expiry);
+      const { refreshToken } = useAuthRefresh();
+      const result = await refreshToken();
+      expect(result).toEqual({ success: true });
+    });
+
+    it("returns 'Refresh in progress' when called concurrently", async () => {
+      const expiry = Math.floor(Date.now() / 1000) + 3600;
+      let resolveRefresh!: () => void;
+      const slowRefresh = () =>
+        new Promise<void>((res) => {
+          resolveRefresh = res;
+        });
+      mockAuthAs("authenticated", expiry, slowRefresh);
+      const { refreshToken } = useAuthRefresh();
+
+      const first = refreshToken(); // starts, isRefreshing → true
+      const second = refreshToken(); // should be blocked
+      resolveRefresh();
+      const [r1, r2] = await Promise.all([first, second]);
+      expect(r1).toEqual({ success: true });
+      expect(r2).toEqual({ success: false, error: "Refresh in progress" });
+    });
+
+    it("returns error when refresh() throws", async () => {
+      const expiry = Math.floor(Date.now() / 1000) + 3600;
+      const throwingRefresh = vi
+        .fn()
+        .mockRejectedValue(new Error("network failure"));
+      mockAuthAs("authenticated", expiry, throwingRefresh);
+      const { refreshToken } = useAuthRefresh();
+      const result = await refreshToken();
+      expect(result).toEqual({ success: false, error: "network failure" });
+      expect(errorSpy).toHaveBeenCalledWith(
+        "Token refresh error:",
+        expect.any(Error),
+      );
+    });
+
+    it("exposes isRefreshing that reflects in-flight state", async () => {
+      const expiry = Math.floor(Date.now() / 1000) + 3600;
+      let resolveRefresh!: () => void;
+      mockAuthAs(
+        "authenticated",
+        expiry,
+        () =>
+          new Promise<void>((res) => {
+            resolveRefresh = res;
+          }),
+      );
+      const { refreshToken, isRefreshing } = useAuthRefresh();
+
+      expect(isRefreshing.value).toBe(false);
+      const p = refreshToken();
+      expect(isRefreshing.value).toBe(true);
+      resolveRefresh();
+      await p;
+      expect(isRefreshing.value).toBe(false);
+    });
+  });
+});
diff --git a/test/composables/useLogChunks.test.ts b/test/composables/useLogChunks.test.ts
index fb65f0d..039b235 100644
--- a/test/composables/useLogChunks.test.ts
+++ b/test/composables/useLogChunks.test.ts
@@ -16,6 +16,15 @@ const makePodLog = (
   stacktrace: null,
 });
 
+// Each log gets a unique timestamp (base + index seconds) so the dedup filter
+// in loadOlderChunk (which removes logs matching the boundary timestamp) doesn't
+// accidentally drop an entire chunk when all logs share the same timestamp.
+function makeTimestamp(secondsOffset: number): string {
+  return new Date(
+    Date.UTC(2024, 0, 1) + secondsOffset * 1000,
+  ).toISOString();
+}
+
 function makeLogsResponse(
   count: number,
   messageOffset = 0,
@@ -24,10 +33,16 @@ function makeLogsResponse(
     analysis_id: ANALYSIS_ID,
     run_number: 1,
     nginx_logs: Array.from({ length: count }, (_, i) =>
-      makePodLog(`nginx-${messageOffset + i}`),
+      makePodLog(
+        `nginx-${messageOffset + i}`,
+        makeTimestamp(messageOffset + i),
+      ),
     ),
     analysis_logs: Array.from({ length: count }, (_, i) =>
-      makePodLog(`analysis-${messageOffset + i}`),
+      makePodLog(
+        `analysis-${messageOffset + i}`,
+        makeTimestamp(messageOffset + i),
+      ),
     ),
   };
 }
@@ -136,8 +151,12 @@ describe("useLogChunks", () => {
       testServer.use(
         http.get(`/logs/${ANALYSIS_ID}`, () => {
           callCount++;
+          // First call: 300 logs at offsets 50-349 (boundary = T+50s)
+          // Second call: 50 logs at offsets 0-49 (all < boundary → no dedup)
           return HttpResponse.json(
-            makeLogsResponse(callCount === 1 ? 300 : 50),
+            callCount === 1
+              ? makeLogsResponse(300, 50)
+              : makeLogsResponse(50, 0),
           );
         }),
       );
@@ -160,6 +179,75 @@ describe("useLogChunks", () => {
     });
   });
 
+  describe("initialize guard", () => {
+    it("ignores a concurrent initialize call while one is already in progress", async () => {
+      let callCount = 0;
+      testServer.use(
+        http.get(`/logs/${ANALYSIS_ID}`, async () => {
+          callCount++;
+          return HttpResponse.json(makeLogsResponse(5));
+        }),
+      );
+      const chunks = useLogChunks(ANALYSIS_ID);
+      // Fire two calls without awaiting between them; second should be a no-op
+      const p1 = chunks.initialize();
+      const p2 = chunks.initialize();
+      await Promise.all([p1, p2]);
+      expect(callCount).toBe(1);
+      expect(chunks.nginxLines.value).toHaveLength(5);
+    });
+  });
+
+  describe("oldestTimestamp selection", () => {
+    it("picks analysis timestamp when it is older than nginx timestamp", async () => {
+      testServer.use(
+        http.get(`/logs/${ANALYSIS_ID}`, () =>
+          HttpResponse.json({
+            analysis_id: ANALYSIS_ID,
+            run_number: 1,
+            nginx_logs: [makePodLog("nginx-0", "2024-01-01T00:01:00Z")],
+            analysis_logs: [makePodLog("analysis-0", "2024-01-01T00:00:00Z")],
+          }),
+        ),
+      );
+      const chunks = useLogChunks(ANALYSIS_ID);
+      await chunks.initialize();
+      expect(chunks.oldestTimestamp.value).toBe("2024-01-01T00:00:00Z");
+    });
+
+    it("picks nginx timestamp when it is older than analysis timestamp", async () => {
+      testServer.use(
+        http.get(`/logs/${ANALYSIS_ID}`, () =>
+          HttpResponse.json({
+            analysis_id: ANALYSIS_ID,
+            run_number: 1,
+            nginx_logs: [makePodLog("nginx-0", "2024-01-01T00:00:00Z")],
+            analysis_logs: [makePodLog("analysis-0", "2024-01-01T00:01:00Z")],
+          }),
+        ),
+      );
+      const chunks = useLogChunks(ANALYSIS_ID);
+      await chunks.initialize();
+      expect(chunks.oldestTimestamp.value).toBe("2024-01-01T00:00:00Z");
+    });
+
+    it("returns null when both log arrays are empty", async () => {
+      testServer.use(
+        http.get(`/logs/${ANALYSIS_ID}`, () =>
+          HttpResponse.json({
+            analysis_id: ANALYSIS_ID,
+            run_number: 1,
+            nginx_logs: [],
+            analysis_logs: [],
+          }),
+        ),
+      );
+      const chunks = useLogChunks(ANALYSIS_ID);
+      await chunks.initialize();
+      expect(chunks.oldestTimestamp.value).toBeNull();
+    });
+  });
+
   describe("appendPolled", () => {
     it("appends new polled logs to the end without changing hasOlder", async () => {
       setupLogsHandler(ANALYSIS_ID, 5);
diff --git a/test/mockapi/setup.ts b/test/mockapi/setup.ts
index 3e19d92..c56974b 100644
--- a/test/mockapi/setup.ts
+++ b/test/mockapi/setup.ts
@@ -1,5 +1,5 @@
 import { afterAll, afterEach, beforeAll, vi } from "vitest";
-import { computed, onMounted, ref, watch } from "vue";
+import { computed, onMounted, readonly, ref, watch } from "vue";
 
 import { config } from "@vue/test-utils";
 import { setupServer } from "msw/node";
@@ -24,10 +24,11 @@ import VirtualScroller from "primevue/virtualscroller";
 
 /* eslint-disable  @typescript-eslint/no-explicit-any */
 const globalThis = global as any;
-globalThis.ref = ref; // Ensures `ref()` can be used in tests
+globalThis.ref = ref;
 globalThis.computed = computed;
 globalThis.onMounted = onMounted;
 globalThis.watch = watch;
+globalThis.readonly = readonly;
 
 // Register PrimeVue components globally for testing
 config.global.plugins = [PrimeVue];
diff --git a/test/utils/count-analyses.test.ts b/test/utils/count-analyses.test.ts
new file mode 100644
index 0000000..422fb52
--- /dev/null
+++ b/test/utils/count-analyses.test.ts
@@ -0,0 +1,108 @@
+import { describe, expect, it, vi } from "vitest";
+import { countAnalysisContainers } from "~/utils/count-analyses";
+import { PodStatus } from "~/services/Api";
+import type { ModifiedAnalysisNode } from "~/services/modifiedApiInterfaces";
+
+function makeNode(
+  status: PodStatus | null | undefined,
+): ModifiedAnalysisNode {
+  return { execution_status: status } as ModifiedAnalysisNode;
+}
+
+describe("countAnalysisContainers", () => {
+  it("returns all-zero counts for an empty array", () => {
+    const result = countAnalysisContainers([]);
+    expect(result).toEqual({
+      started: 0,
+      executing: 0,
+      failed: 0,
+      executed: 0,
+      stopped: 0,
+    });
+  });
+
+  it("counts Started and Starting as started", () => {
+    const result = countAnalysisContainers([
+      makeNode(PodStatus.Started),
+      makeNode(PodStatus.Starting),
+    ]);
+    expect(result.started).toBe(2);
+  });
+
+  it("counts Executing and Running as executing", () => {
+    const result = countAnalysisContainers([
+      makeNode(PodStatus.Executing),
+      makeNode(PodStatus.Running),
+    ]);
+    expect(result.executing).toBe(2);
+  });
+
+  it("counts Stopping and Stopped as stopped", () => {
+    const result = countAnalysisContainers([
+      makeNode(PodStatus.Stopping),
+      makeNode(PodStatus.Stopped),
+    ]);
+    expect(result.stopped).toBe(2);
+  });
+
+  it("counts Failed as failed", () => {
+    const result = countAnalysisContainers([makeNode(PodStatus.Failed)]);
+    expect(result.failed).toBe(1);
+  });
+
+  it("counts Executed and Finished as executed", () => {
+    const result = countAnalysisContainers([
+      makeNode(PodStatus.Executed),
+      makeNode(PodStatus.Finished),
+    ]);
+    expect(result.executed).toBe(2);
+  });
+
+  it("skips nodes with null or undefined execution_status", () => {
+    const result = countAnalysisContainers([
+      makeNode(null),
+      makeNode(undefined),
+    ]);
+    expect(result).toEqual({
+      started: 0,
+      executing: 0,
+      failed: 0,
+      executed: 0,
+      stopped: 0,
+    });
+  });
+
+  it("logs and ignores an unrecognised execution_status", () => {
+    const spy = vi.spyOn(console, "log").mockImplementation(() => {});
+    const result = countAnalysisContainers([
+      makeNode("stuck" as PodStatus),
+    ]);
+    expect(spy).toHaveBeenCalledWith("stuck not an acceptable option");
+    expect(result).toEqual({
+      started: 0,
+      executing: 0,
+      failed: 0,
+      executed: 0,
+      stopped: 0,
+    });
+    spy.mockRestore();
+  });
+
+  it("tallies a mixed array correctly", () => {
+    const result = countAnalysisContainers([
+      makeNode(PodStatus.Started),
+      makeNode(PodStatus.Executing),
+      makeNode(PodStatus.Executing),
+      makeNode(PodStatus.Failed),
+      makeNode(PodStatus.Executed),
+      makeNode(PodStatus.Stopped),
+    ]);
+    expect(result).toEqual({
+      started: 1,
+      executing: 2,
+      failed: 1,
+      executed: 1,
+      stopped: 1,
+    });
+  });
+});
diff --git a/test/utils/format-data-row.test.ts b/test/utils/format-data-row.test.ts
index 9e631dd..6991da5 100644
--- a/test/utils/format-data-row.test.ts
+++ b/test/utils/format-data-row.test.ts
@@ -1,5 +1,6 @@
 // Test the format-data-row functions
-import { expect, test } from "vitest";
+import { expect, test, describe } from "vitest";
+import { isRef } from "vue";
 import { formatDataRow, parseUnixTimestamp } from "~/utils/format-data-row";
 import { fakeAnalysisNodes } from "@/test/components/analysis/constants";
 import type { ModifiedAnalysisNode } from "~/services/modifiedApiInterfaces";
@@ -60,3 +61,56 @@ test("Format returned analysis data", () => {
     timestamp: 1742289074,
   });
 });
+
+test("formatDataRow returns null when passed null", () => {
+  expect(formatDataRow(null, [], [])).toBeNull();
+});
+
+test("formatDataRow returns undefined when passed undefined", () => {
+  expect(formatDataRow(undefined, [], [])).toBeUndefined();
+});
+
+describe("formatDataRow with rowExpansionKeys", () => {
+  test("moves specified keys into expand object", () => {
+    const rows = formatDataRow(
+      fakeAnalysisNodes,
+      [],
+      ["execution_status"],
+    ) as ModifiedAnalysisNode[];
+
+    const row = rows[0]!;
+    expect(row.expand).toHaveProperty("execution_status", "started");
+    expect(Object.prototype.hasOwnProperty.call(row, "execution_status")).toBe(false);
+  });
+
+  test("ignores rowExpansionKeys that are not present on the row", () => {
+    const rows = formatDataRow(
+      fakeAnalysisNodes,
+      [],
+      ["nonexistent_key"],
+    ) as ModifiedAnalysisNode[];
+
+    expect(rows[0]!.expand).toStrictEqual({});
+  });
+
+  test("moves multiple keys into a single expand object", () => {
+    const rows = formatDataRow(
+      fakeAnalysisNodes,
+      [],
+      ["execution_status", "approval_status"],
+    ) as ModifiedAnalysisNode[];
+
+    const expand = rows[0]!.expand;
+    expect(expand).toHaveProperty("execution_status");
+    expect(expand).toHaveProperty("approval_status");
+  });
+});
+
+test("parseUnixTimestamp uses timeAgo ref for a date less than one week old", () => {
+  const recentDate = new Date(Date.now() - 24 * 60 * 60 * 1000); // 1 day ago
+  const node = { ...fakeAnalysisNodes[0]!, created_at: recentDate.toISOString() };
+  const result = parseUnixTimestamp(node, ["created_at"]);
+  // For recent dates, short is a Vue ComputedRef (timeAgo), not a plain string
+  expect(isRef(result.created_at.short)).toBe(true);
+  expect(result.created_at.date).toEqual(recentDate);
+});
diff --git a/test/utils/status-tag-severity.test.ts b/test/utils/status-tag-severity.test.ts
index 6d8a8e2..416ae64 100644
--- a/test/utils/status-tag-severity.test.ts
+++ b/test/utils/status-tag-severity.test.ts
@@ -59,13 +59,7 @@ test("Analysis run status severity tag", () => {
 });
 
 test("Data store type status severity tag", () => {
-  const expectations = {
-    s3: "info",
-    fhir: "danger",
-  };
-  for (const dsType in ["s3", "fhir"]) {
-    expect(getDataStoreTypeSeverity(dsType)).toStrictEqual(
-      expectations[dsType],
-    );
-  }
+  expect(getDataStoreTypeSeverity("s3")).toBe("info");
+  expect(getDataStoreTypeSeverity("fhir")).toBe("warn");
+  expect(getDataStoreTypeSeverity("unknown")).toBeUndefined();
 });

From f970adb808d495062b2a67cd9036bba941a532d3 Mon Sep 17 00:00:00 2001
From: Bruce Schultz <bschultz013@gmail.com>
Date: Tue, 26 May 2026 15:19:15 +0200
Subject: [PATCH 9/9] fix(logs): isolate stream boundaries

---
 app/composables/useLogChunks.ts | 15 ++++++++-------
 1 file changed, 8 insertions(+), 7 deletions(-)

diff --git a/app/composables/useLogChunks.ts b/app/composables/useLogChunks.ts
index 234acd0..b9e522d 100644
--- a/app/composables/useLogChunks.ts
+++ b/app/composables/useLogChunks.ts
@@ -64,25 +64,26 @@ export function useLogChunks(analysisId: string) {
   async function loadOlderChunk(): Promise<void> {
     if (isLoading.value || !hasOlder.value || !oldestTimestamp.value) return;
     isLoading.value = true;
-    const boundary = oldestTimestamp.value;
     try {
-      const result = await fetchChunk({ end_date: boundary });
+      const result = await fetchChunk({ end_date: oldestTimestamp.value });
       if (result) {
+        const nginxBoundary = nginxLines.value[0]?.timestamp;
+        const analysisBoundary = analysisLines.value[0]?.timestamp;
         const dedupedNginx = result.nginx_logs.filter(
-          (l) => l.timestamp !== boundary,
+          (l) => l.timestamp !== nginxBoundary,
         );
         const dedupedAnalysis = result.analysis_logs.filter(
-          (l) => l.timestamp !== boundary,
+          (l) => l.timestamp !== analysisBoundary,
         );
+        hasOlder.value =
+          result.nginx_logs.length === CHUNK_SIZE ||
+          result.analysis_logs.length === CHUNK_SIZE;
         nginxLines.value = [...flattenLogs(dedupedNginx), ...nginxLines.value];
         analysisLines.value = [
           ...flattenLogs(dedupedAnalysis),
           ...analysisLines.value,
         ];
         oldestTimestamp.value = oldestTimestampOf(dedupedNginx, dedupedAnalysis);
-        hasOlder.value =
-          dedupedNginx.length === CHUNK_SIZE ||
-          dedupedAnalysis.length === CHUNK_SIZE;
       }
     } finally {
       isLoading.value = false;