feat(ui): handle large files in executions table and file viewer (#177)

## Summary
Handle large request/response files gracefully across the executions
table and file viewer.

### Executions Table
- Stream request files to extract per-line byte sizes and method names
(first 256 bytes) without loading full content into memory — updates
progressively with loading spinners per row
- Skip full file fetch for files >50MB, use streaming summaries for
metadata
- Lazy-load individual line content via Range requests when expanding a
row (<1MB lines)
- Show "too large to display" with file viewer link for lines >1MB
- Display per-line request/response sizes on each row and in expanded
section headers
- Add pagination (100 per page) as safety net
- Align execution row columns (MGas/s, Duration, Sizes, Status) with
fixed widths
- Remove cache-buster from immutable .request/.response file fetches

### File Viewer
- Chunked loading for large files (>10MB): loads from top in 10MB chunks
with correct line numbers
- Auto-load next chunk via IntersectionObserver when scrolling near the
bottom
- Auto-load chunks to reach a URL-specified line selection, then scroll
to it
- Info banner with spinner showing total size, loaded bytes, and line
count
- Support `base` query param for viewing suite-level files (not just
run-level)
- Fix `parseLineSelection` to handle numeric URL params

## Test plan
- [x] Open a run with large setup request files (>50MB total) — verify
table renders with method names, sizes, and durations without crashing
- [x] Expand a small execution row — verify request JSON loads lazily
- [x] Expand a large execution row (>1MB) — verify "too large" message
with file viewer link
- [x] Open a large log file in file viewer — verify chunked loading with
auto-scroll
- [x] Share a URL with `?lines=100000` on a large file — verify it
auto-loads and scrolls to the line
- [x] Verify no `?_t=` cache buster on .request/.response fetches

Author: skylenet

ui/src/api/client.ts

@@ -124,18 +124,19 @@ export async function fetchHead(path: string): Promise<HeadResult> {
   })
 }
 
-export async function fetchText(path: string): Promise<FetchResult<string>> {
+export async function fetchText(path: string, opts?: { cacheBust?: boolean }): Promise<FetchResult<string>> {
   const config = await loadRuntimeConfig()
   const url = getDataUrl(path, config)
+  const bust = opts?.cacheBust !== false
 
   let response: Response
 
   if (isS3Mode(config)) {
     response = await fetchViaS3(url)
   } else if (isLocalMode(config)) {
-    response = await fetch(cacheBustUrl(url), { credentials: 'include' })
+    response = await fetch(bust ? cacheBustUrl(url) : url, { credentials: 'include' })
   } else {
-    response = await fetch(cacheBustUrl(url))
+    response = await fetch(bust ? cacheBustUrl(url) : url)
   }
 
   if (!response.ok) {
@@ -151,3 +152,143 @@ export async function fetchText(path: string): Promise<FetchResult<string>> {
 
   return { data, status: response.status }
 }
+
+/**
+ * Fetch a byte range of a text file (using Range header).
+ * Falls back to a full fetch + truncation if the server doesn't support Range.
+ */
+export async function fetchPartialText(path: string, bytes: number, offset = 0): Promise<FetchResult<string>> {
+  const config = await loadRuntimeConfig()
+  const url = getDataUrl(path, config)
+
+  let response: Response
+
+  const headers: HeadersInit = { Range: `bytes=${offset}-${offset + bytes - 1}` }
+
+  if (isS3Mode(config)) {
+    response = await fetchViaS3(url)
+  } else if (isLocalMode(config)) {
+    response = await fetch(url, { credentials: 'include', headers })
+  } else {
+    response = await fetch(url, { headers })
+  }
+
+  if (!response.ok && response.status !== 206) {
+    return { data: null, status: response.status }
+  }
+
+  const data = await response.text()
+  return { data: data.slice(0, bytes), status: response.status }
+}
+
+export interface LineSummary {
+  size: number
+  /** First N bytes of the line (UTF-8 decoded), for extracting metadata like method names. */
+  head: string
+}
+
+/**
+ * Stream a text file and return per-line byte sizes and the first
+ * `headBytes` characters of each line. The file content is never
+ * held in memory — only the lightweight summaries are kept.
+ */
+const LINE_HEAD_BYTES = 256
+
+export async function fetchLineSummaries(path: string): Promise<FetchResult<LineSummary[]>> {
+  const config = await loadRuntimeConfig()
+  const url = getDataUrl(path, config)
+
+  let response: Response
+
+  if (isS3Mode(config)) {
+    response = await fetchViaS3(url)
+  } else if (isLocalMode(config)) {
+    response = await fetch(url, { credentials: 'include' })
+  } else {
+    response = await fetch(url)
+  }
+
+  if (!response.ok || !response.body) {
+    return { data: null, status: response.status }
+  }
+
+  const lines: LineSummary[] = []
+  const reader = response.body.getReader()
+  const decoder = new TextDecoder()
+  const newline = 10 // '\n'
+  let lineSize = 0
+  const headBuf: number[] = []
+
+  for (;;) {
+    const { done, value } = await reader.read()
+    if (done) break
+    for (let i = 0; i < value.length; i++) {
+      if (value[i] === newline) {
+        lines.push({ size: lineSize, head: decoder.decode(new Uint8Array(headBuf)) })
+        lineSize = 0
+        headBuf.length = 0
+      } else {
+        lineSize++
+        if (headBuf.length < LINE_HEAD_BYTES) headBuf.push(value[i])
+      }
+    }
+  }
+
+  // Last line (if no trailing newline)
+  if (lineSize > 0) {
+    lines.push({ size: lineSize, head: decoder.decode(new Uint8Array(headBuf)) })
+  }
+
+  return { data: lines, status: response.status }
+}
+
+/**
+ * Stream a text file and call `onLine` for each completed line.
+ * Returns a promise that resolves when the stream is complete.
+ */
+export async function streamLineSummaries(
+  path: string,
+  onLine: (summary: LineSummary, index: number) => void,
+): Promise<void> {
+  const config = await loadRuntimeConfig()
+  const url = getDataUrl(path, config)
+
+  let response: Response
+
+  if (isS3Mode(config)) {
+    response = await fetchViaS3(url)
+  } else if (isLocalMode(config)) {
+    response = await fetch(url, { credentials: 'include' })
+  } else {
+    response = await fetch(url)
+  }
+
+  if (!response.ok || !response.body) return
+
+  const reader = response.body.getReader()
+  const decoder = new TextDecoder()
+  const newline = 10
+  let lineSize = 0
+  const headBuf: number[] = []
+  let lineIndex = 0
+
+  for (;;) {
+    const { done, value } = await reader.read()
+    if (done) break
+    for (let i = 0; i < value.length; i++) {
+      if (value[i] === newline) {
+        onLine({ size: lineSize, head: decoder.decode(new Uint8Array(headBuf)) }, lineIndex)
+        lineSize = 0
+        headBuf.length = 0
+        lineIndex++
+      } else {
+        lineSize++
+        if (headBuf.length < LINE_HEAD_BYTES) headBuf.push(value[i])
+      }
+    }
+  }
+
+  if (lineSize > 0) {
+    onLine({ size: lineSize, head: decoder.decode(new Uint8Array(headBuf)) }, lineIndex)
+  }
+}

ui/src/api/hooks/useTestDetails.ts

@@ -1,7 +1,10 @@
+import { useEffect, useReducer } from 'react'
 import { useQuery } from '@tanstack/react-query'
-import { fetchText, fetchData } from '../client'
+import { fetchText, fetchData, fetchHead, streamLineSummaries, type LineSummary } from '../client'
 import type { AggregatedStats, ResultDetails } from '../types'
 
+const MAX_INLINE_FILE_SIZE = 50 * 1024 * 1024 // 50MB — skip full fetch above this
+
 // Step types for test execution
 export type StepType = 'setup' | 'test' | 'cleanup' | 'pre_run'
 
@@ -29,7 +32,12 @@ export function useTestResponses(runId: string, testName: string, stepType: Step
   return useQuery({
     queryKey: ['run', runId, 'test', testName, 'step', stepType, 'responses'],
     queryFn: async () => {
-      const { data, status } = await fetchText(path)
+      const head = await fetchHead(path)
+      if (head.exists && head.size !== null && head.size > MAX_INLINE_FILE_SIZE) {
+        return null
+      }
+
+      const { data, status } = await fetchText(path, { cacheBust: false })
       if (!data) {
         throw new Error(`Failed to fetch responses: ${status}`)
       }
@@ -39,6 +47,61 @@ export function useTestResponses(runId: string, testName: string, stepType: Step
   })
 }
 
+/** Stream response file and return per-line summaries progressively. */
+export function useTestResponseSummaries(runId: string, testName: string, stepType: StepType) {
+  const path = `runs/${runId}/${testName}/${stepType}.response`
+  return useStreamingSummaries(path, !!runId && !!testName)
+}
+
+/**
+ * Progressive streaming hook — streams a newline-delimited file and
+ * updates state as each line is scanned so UI rows appear one by one.
+ */
+
+type StreamAction =
+  | { type: 'reset'; path: string }
+  | { type: 'line'; summary: LineSummary }
+  | { type: 'done' }
+
+interface StreamState {
+  data: LineSummary[] | undefined
+  isStreaming: boolean
+  path: string
+}
+
+function streamReducer(state: StreamState, action: StreamAction): StreamState {
+  switch (action.type) {
+    case 'reset':
+      return { data: undefined, isStreaming: true, path: action.path }
+    case 'line':
+      return { ...state, data: state.data ? [...state.data, action.summary] : [action.summary] }
+    case 'done':
+      return { ...state, isStreaming: false }
+  }
+}
+
+function useStreamingSummaries(path: string, enabled: boolean) {
+  const [state, dispatch] = useReducer(streamReducer, { data: undefined, isStreaming: false, path: '' })
+
+  useEffect(() => {
+    if (!enabled) return
+
+    let cancelled = false
+    dispatch({ type: 'reset', path })
+
+    streamLineSummaries(path, (summary) => {
+      if (!cancelled) dispatch({ type: 'line', summary })
+    }).finally(() => {
+      if (!cancelled) dispatch({ type: 'done' })
+    })
+
+    return () => { cancelled = true }
+  }, [path, enabled])
+
+  const current = state.path === path ? state : { data: undefined, isStreaming: enabled }
+  return { data: current.data, isStreaming: current.isStreaming }
+}
+
 export function useTestAggregated(runId: string, testName: string, stepType: StepType) {
   // Path: runs/{runId}/{testName}/{stepType}.result-aggregated.json
   const path = `runs/${runId}/${testName}/${stepType}.result-aggregated.json`
@@ -63,7 +126,13 @@ export function useTestRequests(suiteHash: string, testName: string, stepType: S
   return useQuery({
     queryKey: ['suite', suiteHash, 'test', testName, 'step', stepType, 'requests'],
     queryFn: async () => {
-      const { data, status } = await fetchText(path)
+      // Skip full fetch for very large files — streaming summaries handle the rest
+      const head = await fetchHead(path)
+      if (head.exists && head.size !== null && head.size > MAX_INLINE_FILE_SIZE) {
+        return null
+      }
+
+      const { data, status } = await fetchText(path, { cacheBust: false })
       if (!data) {
         throw new Error(`Failed to fetch requests: ${status}`)
       }
@@ -72,3 +141,12 @@ export function useTestRequests(suiteHash: string, testName: string, stepType: S
     enabled: !!suiteHash && !!testName,
   })
 }
+
+/**
+ * Stream the request file and return per-line summaries progressively.
+ * Updates state as each line is scanned so early rows appear immediately.
+ */
+export function useTestRequestSummaries(suiteHash: string, testName: string, stepType: StepType) {
+  const path = `suites/${suiteHash}/${testName}/${stepType}.request`
+  return useStreamingSummaries(path, !!suiteHash && !!testName)
+}