Add a runs screen: a table, a run in full, and curves side by side

frontend/src/components/Flow/useFlowSocket.ts

@@ -4,6 +4,7 @@ import { useEffect } from "react"
 
 import { OpenAPI } from "@/client"
 import { dashboardKeys, panelKeys } from "@/components/Dashboard/queries"
+import { runKeys } from "@/components/Runs/queries"
 import { connectionStore } from "@/lib/connectionStore"
 import { apiToken } from "@/lib/portal"
 import { type LogLine, liveStore, type ValueSource } from "./liveStore"
@@ -89,6 +90,14 @@ type FlowEvent =
       paused?: string[]
     }
   | { type: "dashboard_changed"; dashboard?: string; ts?: number }
+  | {
+      type: "run_started" | "run_finished"
+      flow: string
+      run: string
+      status?: string
+      group?: string
+      ts?: number
+    }
 
 function socketUrl(): string {
   const base = String(OpenAPI.BASE || window.location.origin)
@@ -251,6 +260,13 @@ function connect() {
             : panelKeys.all,
         })
         break
+      case "run_started":
+      case "run_finished":
+        // One invalidation covers the lot: the list, the flow counts, the run
+        // being watched, and any chart drawing a run's curve. A run is not a
+        // live value, so nothing here goes through the live store.
+        client?.invalidateQueries({ queryKey: runKeys.all })
+        break
     }
   }