feat(ui): highlight failed executions and persist modal state in URL (#213)

## Summary
- Highlights failed execution rows in the test detail modal with a
red-tinted background for better visibility
- Persists the active step tab (test/setup/cleanup) and expanded
execution row indices as URL search params (`testStep`, `testExec`),
making modal state shareable and preserved across refreshes
- Clears step/expanded state when closing the modal, switching tests, or
switching tabs

## Test plan
- [ ] Open a test modal with failed executions — verify FAIL rows have
red background in both light and dark mode
- [ ] Switch between Test/Setup/Cleanup tabs — verify `testStep` param
updates in URL
- [ ] Expand execution rows — verify `testExec` param updates in URL
- [ ] Refresh the page — verify tab and expanded rows are restored
- [ ] Share the URL — verify it opens with the same state

Author: skylenet

ui/src/components/run-detail/ExecutionsList.tsx

@@ -67,6 +67,8 @@ interface ExecutionsListProps {
   suiteHash: string
   testName: string
   stepType: StepType
+  expandedRows?: Set<number>
+  onExpandedRowsChange?: (rows: Set<number>) => void
 }
 
 function parseMethod(request: string): string {
@@ -142,8 +144,13 @@ function StatusIndicator({ status }: { status?: number }) {
 
 const MAX_LAZY_LINE_SIZE = 1_000_000 // 1MB — lazy-load lines up to this size
 
-function ExecutionRow({ index, request, requestSize, methodName, requestLineInfo, response, responseSize, time, status, mgasPerSec, gasUsed, responseViewerUrl, requestViewerUrl }: ExecutionRowProps) {
-  const [expanded, setExpanded] = useState(false)
+function ExecutionRow({ index, request, requestSize, methodName, requestLineInfo, response, responseSize, time, status, mgasPerSec, gasUsed, responseViewerUrl, requestViewerUrl, expanded: expandedProp, onExpandedChange }: ExecutionRowProps & { expanded?: boolean; onExpandedChange?: (index: number, expanded: boolean) => void }) {
+  const [expandedLocal, setExpandedLocal] = useState(false)
+  const expanded = expandedProp ?? expandedLocal
+  const setExpanded = (v: boolean) => {
+    setExpandedLocal(v)
+    onExpandedChange?.(index, v)
+  }
   const method = request ? parseMethod(request) : methodName
 
   // Lazy-load request content for lines that are small enough but weren't in the full fetch
@@ -162,15 +169,25 @@ function ExecutionRow({ index, request, requestSize, methodName, requestLineInfo
   const effectiveRequestSize = requestSize ?? (request ? new Blob([request]).size : undefined)
   const effectiveResponseSize = responseSize ?? (response ? new Blob([response]).size : undefined)
   const canExpand = !!effectiveRequest || !!response || !!responseViewerUrl || !!requestViewerUrl || canLazyLoad
+  const isFail = status !== undefined && status !== 0
 
   return (
-    <div className="max-w-full overflow-hidden border-b border-gray-200 last:border-b-0 dark:border-gray-700">
+    <div className={clsx(
+      'max-w-full overflow-hidden border-b last:border-b-0',
+      isFail
+        ? 'border-red-300 bg-red-100 dark:border-red-800/50 dark:bg-red-900/30'
+        : 'border-gray-200 dark:border-gray-700',
+    )}>
       <button
         onClick={() => canExpand && setExpanded(!expanded)}
         className={clsx(
           'flex w-full items-center gap-3 px-3 py-2 text-left transition-colors',
-          canExpand ? 'cursor-pointer hover:bg-gray-100 dark:hover:bg-gray-800' : 'cursor-default',
-          expanded && 'bg-gray-100 dark:bg-gray-800',
+          canExpand
+            ? isFail
+              ? 'cursor-pointer hover:bg-red-200 dark:hover:bg-red-900/40'
+              : 'cursor-pointer hover:bg-gray-100 dark:hover:bg-gray-800'
+            : 'cursor-default',
+          expanded && (isFail ? 'bg-red-200 dark:bg-red-900/40' : 'bg-gray-100 dark:bg-gray-800'),
         )}
       >
         {canExpand ? (
@@ -306,7 +323,7 @@ function ExecutionRow({ index, request, requestSize, methodName, requestLineInfo
 
 const EXECUTIONS_PAGE_SIZE = 100
 
-export function ExecutionsList({ runId, suiteHash, testName, stepType }: ExecutionsListProps) {
+export function ExecutionsList({ runId, suiteHash, testName, stepType, expandedRows, onExpandedRowsChange }: ExecutionsListProps) {
   const { data: requests, isLoading: requestsLoading, error: requestsError } = useTestRequests(suiteHash, testName, stepType)
   const { data: responses, error: responsesError } = useTestResponses(runId, testName, stepType)
   const { data: resultDetails, isLoading: detailsLoading, error: detailsError } = useTestResultDetails(runId, testName, stepType)
@@ -405,6 +422,12 @@ export function ExecutionsList({ runId, suiteHash, testName, stepType }: Executi
               requestViewerUrl={!safeRequests?.[index] && requestSummaries?.[index] && requestSummaries[index].size > 1_000_000
                 ? `/runs/${runId}/fileviewer?base=${encodeURIComponent(`suites/${suiteHash}`)}&file=${encodeURIComponent(`${testName}/${stepType}.request`)}&lines=${index + 1}`
                 : undefined}
+              expanded={expandedRows?.has(index)}
+              onExpandedChange={(idx, exp) => {
+                const next = new Set(expandedRows)
+                if (exp) next.add(idx); else next.delete(idx)
+                onExpandedRowsChange?.(next)
+              }}
             />
           )
         })}

ui/src/components/run-detail/TestHeatmap.tsx

@@ -120,6 +120,10 @@ interface TestHeatmapProps {
   onGroupModeChange?: (mode: GroupMode) => void
   onThresholdChange?: (threshold: number) => void
   onSearchChange?: (query: string) => void
+  activeStepTab?: 'test' | 'setup' | 'cleanup'
+  onActiveStepTabChange?: (tab: 'test' | 'setup' | 'cleanup') => void
+  expandedExecRows?: Set<number>
+  onExpandedExecRowsChange?: (rows: Set<number>) => void
 }
 
 const COLORS = [
@@ -357,13 +361,22 @@ export function TestHeatmap({
   onSortModeChange,
   onGroupModeChange,
   onThresholdChange,
+  activeStepTab: activeStepTabProp,
+  onActiveStepTabChange,
+  expandedExecRows,
+  onExpandedExecRowsChange,
 }: TestHeatmapProps) {
   const sortMode = sortModeProp ?? 'order'
   const groupMode = groupModeProp ?? 'none'
   const threshold = thresholdProp ?? DEFAULT_THRESHOLD
   const [tooltip, setTooltip] = useState<{ test: TestData; x: number; y: number } | null>(null)
   const [opcodeSort, setOpcodeSort] = useState<OpcodeSortMode>('name')
-  const [activeStepTab, setActiveStepTab] = useState<'test' | 'setup' | 'cleanup'>('test')
+  const [activeStepTabLocal, setActiveStepTabLocal] = useState<'test' | 'setup' | 'cleanup'>('test')
+  const activeStepTab = activeStepTabProp ?? activeStepTabLocal
+  const setActiveStepTab = (tab: 'test' | 'setup' | 'cleanup') => {
+    setActiveStepTabLocal(tab)
+    onActiveStepTabChange?.(tab)
+  }
   const { data: blockLogs } = useBlockLogs(runId)
 
   // Pop-in stagger state for newly-completed tiles. Populated below by
@@ -1005,6 +1018,8 @@ export function TestHeatmap({
                           suiteHash={suiteHash}
                           testName={selectedTest}
                           stepType={activeStep.key}
+                          expandedRows={expandedExecRows}
+                          onExpandedRowsChange={onExpandedExecRowsChange}
                         />
                       </div>
                     )}

ui/src/pages/RunDetailPage.tsx

@@ -137,12 +137,16 @@ export function RunDetailPage() {
     blFs?: boolean // Block Logs fullscreen
     dlModal?: boolean // Download list modal
     dlFmt?: string // Download list format
+    testStep?: string // Active step tab in test modal (test/setup/cleanup)
+    testExec?: string // Expanded execution row indices (comma-separated)
   }
   const page = Number(search.page) || 1
   const pageSize = Number(search.pageSize) || 20
   const heatmapThreshold = search.heatmapThreshold ? Number(search.heatmapThreshold) : undefined
   const stepFilter = parseStepFilter(search.steps)
-  const { sortBy = 'order', sortDir = 'asc', q = '', status = 'all', testModal, preRunModal, heatmapGroup, heatmapSort, ohFs = false, blFs = false, dlModal = false, dlFmt } = search
+  const { sortBy = 'order', sortDir = 'asc', q = '', status = 'all', testModal, preRunModal, heatmapGroup, heatmapSort, ohFs = false, blFs = false, dlModal = false, dlFmt, testStep, testExec } = search
+  const activeStepTab = (testStep === 'setup' || testStep === 'cleanup') ? testStep : testStep === 'test' ? testStep : undefined
+  const expandedExecRows = testExec ? new Set(testExec.split(',').map(Number).filter(n => !isNaN(n))) : undefined
 
   const { data: liveRuns, isLoading: liveRunsLoading } = useLiveRuns()
   const liveRun = liveRuns?.find((lr) => lr.run_id === runId)
@@ -251,7 +255,17 @@ export function RunDetailPage() {
   }
 
   const handleTestModalChange = (testName: string | undefined) => {
-    updateSearch({ testModal: testName })
+    // Clear step tab and expanded rows when closing or switching test
+    updateSearch({ testModal: testName, testStep: undefined, testExec: undefined })
+  }
+
+  const handleStepTabChange = (tab: 'test' | 'setup' | 'cleanup') => {
+    // Clear expanded rows when switching tabs
+    updateSearch({ testStep: tab !== 'test' ? tab : undefined, testExec: undefined })
+  }
+
+  const handleExpandedExecRowsChange = (rows: Set<number>) => {
+    updateSearch({ testExec: rows.size > 0 ? [...rows].sort((a, b) => a - b).join(',') : undefined })
   }
 
   const handlePreRunModalChange = (stepName: string | undefined) => {
@@ -680,6 +694,10 @@ export function RunDetailPage() {
               onGroupModeChange={handleHeatmapGroupChange}
               onThresholdChange={handleHeatmapThresholdChange}
               onSearchChange={handleSearchChange}
+              activeStepTab={activeStepTab}
+              onActiveStepTabChange={handleStepTabChange}
+              expandedExecRows={expandedExecRows}
+              onExpandedExecRowsChange={handleExpandedExecRowsChange}
             />
           </div>