feat(ui): add "N in progress" indicator and clean up filter layout (#201)

skylenet · web-flow · commit 2e92bad4f698 · 2026-04-15T08:57:24.000+02:00
## Summary

### "N in progress" indicator
A small indicator button now sits next to the **Status** dropdown in
`RunFilters` (used on both `/runs` and the suite detail page). It shows
a pulsing blue dot + live-run count (e.g. `● 3 in progress`), shares the
same box height and text size as the adjacent dropdowns, and clicking it
toggles the existing "In progress" status filter on/off.

- Rendered only when `liveRunsCount &gt; 0` — zero visual noise when
nothing is live.
- On the suite detail page the count is scoped to live runs for the
current suite.

### Fix status filter on suite detail page
The suite detail page's filter logic was missing the `status ===
'running'` case (so choosing "In progress" did nothing), and its `status
=== 'passing' / 'failing'` checks used `total - passed` regardless of
whether the row is live. Now matches the RunsPage logic: live rows use
the reported `tests_failed` for pass/fail filtering, and `running`
filters down to in-progress rows.

### Cleaner header layout on /runs
- Row 1: `Runs (N)` title
- Row 2: `Metric steps:` row
- Row 3: all filter dropdowns (Client, Image, Suite, Strategy, Status,
Live indicator) — left-aligned, wrapping on narrow screens

## Test plan
- [x] TypeScript + ESLint clean
- [x] Manual: start a live run, confirm the indicator appears on `/runs`
next to the Status dropdown with the correct count
- [x] Manual: click the indicator, confirm the runs table filters to
only in-progress rows; click again to clear
- [x] Manual: open the suite detail page for that suite, confirm the
indicator appears and is scoped to this suite
- [x] Manual: select "In progress" from the Status dropdown on the suite
detail page, confirm the table filters correctly (was broken before this
PR)
- [x] Manual: confirm no indicator renders when no live runs are present
diff --git a/ui/src/components/runs/RunFilters.tsx b/ui/src/components/runs/RunFilters.tsx
@@ -29,6 +29,11 @@ interface RunFiltersProps {
   suiteLabelKeys?: Map<string, string[]>
   suiteLabelFilters?: LabelFiltersType
   onSuiteLabelFiltersChange?: (filters: LabelFiltersType) => void
+  /** Number of currently-live runs. When > 0, a small indicator is shown
+   *  next to the Status dropdown. */
+  liveRunsCount?: number
+  /** Called when the user clicks the live indicator. */
+  onLiveRunsIndicatorClick?: () => void
 }
 
 function ChevronIcon() {
@@ -124,6 +129,8 @@ export function RunFilters({
   suiteLabelKeys,
   suiteLabelFilters,
   onSuiteLabelFiltersChange,
+  liveRunsCount = 0,
+  onLiveRunsIndicatorClick,
 }: RunFiltersProps) {
   const clientOptions = [{ value: '' as const, label: 'All clients' }, ...clients.map((c) => ({ value: c, label: c }))]
   const imageOptions = [{ value: '' as const, label: 'All images' }, ...images.map((i) => ({ value: i, label: i }))]
@@ -184,6 +191,32 @@ export function RunFilters({
           allLabel="All runs"
           width="w-36"
         />
+        {liveRunsCount > 0 && (
+          <div className="flex flex-col gap-1">
+            {/* Empty label keeps vertical alignment with the labeled dropdowns. */}
+            <label className="text-sm/5 font-medium text-transparent select-none">&nbsp;</label>
+            <button
+              onClick={onLiveRunsIndicatorClick}
+              title={selectedStatus === 'running' ? 'Show all runs' : 'Filter to in-progress runs only'}
+              className={clsx(
+                'relative cursor-pointer rounded-sm py-2 pr-3 pl-3 text-left text-sm/6 shadow-xs ring-1 ring-inset transition-colors',
+                selectedStatus === 'running'
+                  ? 'bg-blue-600 text-white ring-blue-600 hover:bg-blue-700 hover:ring-blue-700'
+                  : 'bg-blue-50 text-blue-700 ring-blue-200 hover:bg-blue-100 dark:bg-blue-900/30 dark:text-blue-200 dark:ring-blue-800 dark:hover:bg-blue-900/50',
+              )}
+            >
+              <span className="flex items-center gap-2">
+                <span
+                  className={clsx(
+                    'size-1.5 animate-pulse rounded-full',
+                    selectedStatus === 'running' ? 'bg-white' : 'bg-blue-500 dark:bg-blue-400',
+                  )}
+                />
+                {liveRunsCount} in progress
+              </span>
+            </button>
+          </div>
+        )}
       </div>
       {suiteLabelKeys && suiteLabelKeys.size > 0 && suiteLabelFilters && onSuiteLabelFiltersChange && (
         <LabelFilters entries={[]} filters={suiteLabelFilters} onChange={onSuiteLabelFiltersChange} availableLabels={suiteLabelKeys} addButtonLabel="Suite label" />
diff --git a/ui/src/pages/RunsPage.tsx b/ui/src/pages/RunsPage.tsx
@@ -377,59 +377,60 @@ export function RunsPage() {
 
   return (
     <div className="flex flex-col gap-6">
-      <div className="flex flex-col gap-4 sm:flex-row sm:items-start sm:justify-between">
-        <h1 className="text-2xl/8 font-bold text-gray-900 dark:text-gray-100">Runs ({filteredEntries.length})</h1>
-        <div className="flex flex-col items-end gap-2">
-          <div className="flex items-center gap-2">
-            <span className="text-sm/6 font-medium text-gray-700 dark:text-gray-300">Metric steps:</span>
-            <div className="flex items-center gap-1">
-              {ALL_INDEX_STEP_TYPES.map((step) => (
-                <button
-                  key={step}
-                  onClick={() => {
-                    const newFilter = stepFilter.includes(step)
-                      ? stepFilter.filter((s) => s !== step)
-                      : [...stepFilter, step]
-                    if (newFilter.length > 0) {
-                      handleStepFilterChange(newFilter)
-                    }
-                  }}
-                  className={`rounded-sm px-2.5 py-1 text-xs font-medium capitalize transition-colors ${
-                    stepFilter.includes(step)
-                      ? 'bg-blue-100 text-blue-700 dark:bg-blue-900/50 dark:text-blue-300'
-                      : 'bg-gray-100 text-gray-400 dark:bg-gray-700 dark:text-gray-500'
-                  }`}
-                >
-                  {step}
-                </button>
-              ))}
-            </div>
-          </div>
-          <div className="flex flex-wrap items-end justify-end gap-4">
-            <RunFilters
-              clients={clients}
-              selectedClient={client}
-              onClientChange={handleClientChange}
-              images={images}
-              selectedImage={image}
-              onImageChange={handleImageChange}
-              suites={suites}
-              selectedSuite={suite}
-              onSuiteChange={handleSuiteChange}
-              strategies={strategies}
-              selectedStrategy={strategy}
-              onStrategyChange={handleStrategyChange}
-              selectedStatus={status}
-              onStatusChange={handleStatusChange}
-              entries={index?.entries}
-              labelFilters={labelFilters}
-              onLabelFiltersChange={handleLabelFiltersChange}
-              suiteLabelKeys={suiteLabelKeys}
-              suiteLabelFilters={suiteLabelFilters}
-              onSuiteLabelFiltersChange={handleSuiteLabelFiltersChange}
-            />
+      <h1 className="text-2xl/8 font-bold text-gray-900 dark:text-gray-100">Runs ({filteredEntries.length})</h1>
+
+      <div className="flex flex-col gap-3">
+        <div className="flex items-center gap-2">
+          <span className="text-xs/5 font-medium text-gray-700 dark:text-gray-300">Metric steps:</span>
+          <div className="flex items-center gap-1">
+            {ALL_INDEX_STEP_TYPES.map((step) => (
+              <button
+                key={step}
+                onClick={() => {
+                  const newFilter = stepFilter.includes(step)
+                    ? stepFilter.filter((s) => s !== step)
+                    : [...stepFilter, step]
+                  if (newFilter.length > 0) {
+                    handleStepFilterChange(newFilter)
+                  }
+                }}
+                className={`rounded-sm px-2.5 py-1 text-xs font-medium capitalize transition-colors ${
+                  stepFilter.includes(step)
+                    ? 'bg-blue-100 text-blue-700 dark:bg-blue-900/50 dark:text-blue-300'
+                    : 'bg-gray-100 text-gray-400 dark:bg-gray-700 dark:text-gray-500'
+                }`}
+              >
+                {step}
+              </button>
+            ))}
           </div>
         </div>
+        <div className="flex flex-wrap items-end gap-4">
+          <RunFilters
+            clients={clients}
+            selectedClient={client}
+            onClientChange={handleClientChange}
+            images={images}
+            selectedImage={image}
+            onImageChange={handleImageChange}
+            suites={suites}
+            selectedSuite={suite}
+            onSuiteChange={handleSuiteChange}
+            strategies={strategies}
+            selectedStrategy={strategy}
+            onStrategyChange={handleStrategyChange}
+            selectedStatus={status}
+            onStatusChange={handleStatusChange}
+            entries={index?.entries}
+            labelFilters={labelFilters}
+            onLabelFiltersChange={handleLabelFiltersChange}
+            suiteLabelKeys={suiteLabelKeys}
+            suiteLabelFilters={suiteLabelFilters}
+            onSuiteLabelFiltersChange={handleSuiteLabelFiltersChange}
+            liveRunsCount={liveRuns?.length ?? 0}
+            onLiveRunsIndicatorClick={() => handleStatusChange(status === 'running' ? 'all' : 'running')}
+          />
+        </div>
       </div>
 
       {paginatedEntries.length === 0 ? (
@@ -580,3 +581,4 @@ export function RunsPage() {
     </div>
   )
 }
+
diff --git a/ui/src/pages/SuiteDetailPage.tsx b/ui/src/pages/SuiteDetailPage.tsx
@@ -536,10 +536,18 @@ export function SuiteDetailPage() {
     return suiteRunsAll.filter((e) => {
       if (client && e.instance.client !== client) return false
       if (image && e.instance.image !== image) return false
-      if (status === 'passing' && e.tests.tests_total - e.tests.tests_passed > 0) return false
-      if (status === 'failing' && e.tests.tests_total - e.tests.tests_passed === 0) return false
+      // For live runs, failure count means actually-reported failures, not
+      // "tests not yet passed". Apply the same convention as RunsPage.
+      {
+        const failed = e.status === 'running'
+          ? e.tests.tests_failed
+          : e.tests.tests_total - e.tests.tests_passed
+        if (status === 'passing' && failed > 0) return false
+        if (status === 'failing' && failed === 0) return false
+      }
       if (status === 'timeout' && e.status !== 'timeout') return false
       if (status === 'cancelled' && e.status !== 'cancelled') return false
+      if (status === 'running' && e.status !== 'running') return false
       for (const [key, allowedValues] of labelFilters) {
         const actual = e.metadata?.[key]
         if (!actual || !allowedValues.has(actual)) return false
@@ -1210,6 +1218,8 @@ export function SuiteDetailPage() {
                     entries={suiteRunsAll}
                     labelFilters={labelFilters}
                     onLabelFiltersChange={handleLabelFiltersChange}
+                    liveRunsCount={liveRuns?.filter((lr) => lr.suite_hash === suiteHash).length ?? 0}
+                    onLiveRunsIndicatorClick={() => handleStatusChange(status === 'running' ? 'all' : 'running')}
                   />
                 </div>
                 {filteredRuns.length === 0 ? (
