Count the runs in flight on Home, where an installation has any

The tile only exists on an installation that has run something, which is the
same "nothing has been run yet" the Runs screen goes by. The count comes from
/runs/overview, already grouped by status in the database and already polled by
the Runs screen, so Home shares its cache entry rather than paging rows or
growing a second endpoint.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01K1moruzue2kTJd3uVisgNk

docs/interface/index.md

@@ -57,6 +57,8 @@ Always answers, degraded or not. The tiles cover:
 - **Flows** — total, running, paused, quarantined, and how many cannot run
   because their graph does not validate
 - **Nodes** — how many failed to load
+- **Runs running** — batch runs in flight right now, and how many are
+  waiting. Only on an installation that has run something
 - **Queue** — depth, and how old the oldest pending item is
 - **Loop lag** — whether the engine's event loop is keeping up
 

frontend/src/components/Health/HealthOverview.tsx

@@ -5,6 +5,7 @@ import type { FlowRollup, HistoryPoint } from "@/client"
 import { type Range, RangePicker } from "@/components/Common/RangePicker"
 import { Sparkline } from "@/components/Common/Sparkline"
 import { PANEL_SECTION } from "@/components/Flow/SidePanel"
+import { runOverviewQueryOptions } from "@/components/Runs/queries"
 import { Badge } from "@/components/ui/badge"
 import { dur, si } from "@/lib/utils"
 import {
@@ -82,10 +83,17 @@ export function HealthOverview({
   const { data: flows } = useQuery(flowRollupsQueryOptions(range))
   // Shares the list below's cache entry, for the one tile that dates them.
   const { data: failures } = useQuery(failuresQueryOptions(range))
+  // Shares the Runs screen's cache entry, which already counts by status in
+  // the database rather than over a page of rows.
+  const { data: runs } = useQuery(runOverviewQueryOptions())
 
   const queue = (summary?.queue ?? {}) as Record<string, number>
   const degraded = summary?.status === "degraded"
   const errors = (flows ?? []).reduce((total, row) => total + row.errors, 0)
+  // An installation nobody has run a batch flow on has no runs tile at all —
+  // the same "nothing has been run yet" the Runs screen itself goes by.
+  const running = (runs ?? []).reduce((total, row) => total + row.running, 0)
+  const queued = (runs ?? []).reduce((total, row) => total + row.queued, 0)
 
   return (
     <>
@@ -105,7 +113,9 @@ export function HealthOverview({
           </p>
         ) : null}
 
-        <div className="grid gap-3 sm:grid-cols-2 lg:grid-cols-5">
+        <div
+          className={`grid gap-3 sm:grid-cols-2 ${runs?.length ? "lg:grid-cols-6" : "lg:grid-cols-5"}`}
+        >
           <Tile
             label="Nodes"
             value={String(summary?.nodes.total ?? 0)}
@@ -132,6 +142,13 @@ export function HealthOverview({
                 .join(" · ") || "none paused"
             }
           />
+          {runs?.length ? (
+            <Tile
+              label="Runs running"
+              value={String(running)}
+              note={queued ? `${queued} queued` : "none queued"}
+            />
+          ) : null}
           <Tile
             label={`Failures (${range.label})`}
             // Summed from the rollups the table below is drawn from, so the