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

frontend/src/routes/_layout/runs/$id.tsx

@@ -0,0 +1,13 @@
+import { createFileRoute } from "@tanstack/react-router"
+
+import { RunDetail } from "@/components/Runs/RunDetail"
+
+export const Route = createFileRoute("/_layout/runs/$id")({
+  component: Run,
+  head: ({ params }) => ({ meta: [{ title: `Run ${params.id} - Fluksio` }] }),
+})
+
+function Run() {
+  const { id } = Route.useParams()
+  return <RunDetail id={id} />
+}

frontend/src/routes/_layout/runs/index.tsx

@@ -0,0 +1,36 @@
+import { createFileRoute, useNavigate } from "@tanstack/react-router"
+
+import { RunsScreen, type RunsSearch } from "@/components/Runs/RunsScreen"
+
+/** A string search param, or nothing when it is absent or empty. */
+const text = (value: unknown) =>
+  typeof value === "string" && value ? value : undefined
+
+export const Route = createFileRoute("/_layout/runs/")({
+  component: Runs,
+  // The whole state of this screen — which flow, which sweep, which runs are
+  // being compared — is the address, so a comparison is something to send
+  // rather than something to describe.
+  validateSearch: (search: Record<string, unknown>): RunsSearch => ({
+    flow: text(search.flow),
+    status: text(search.status),
+    group: text(search.group),
+    compare: text(search.compare),
+    metric: text(search.metric),
+  }),
+  head: () => ({ meta: [{ title: "Runs - Fluksio" }] }),
+})
+
+function Runs() {
+  const search = Route.useSearch()
+  const navigate = useNavigate()
+
+  return (
+    <RunsScreen
+      search={search}
+      update={(next) =>
+        navigate({ to: "/runs", search: { ...search, ...next } })
+      }
+    />
+  )
+}