Fold the brain and health screens into Home

Home is the one overview now: the brain graph flat across the top, the flow
switches, then the health sections. The /brain and /health routes and their
sidebar entries are gone.

- charts report their cursor and clicks, so hovering one filters the list
  beside it to that minute and a click pins it until Escape or Clear
- chart values round to about three significant digits, the legend mounts
  under the plot so it can wrap without leaving the card, and axis ticks
  shorten past a thousand
- the embedded brain leaves the wheel to the page rather than zooming
- number fields no longer draw their up/down spinner (NOTEPAD)

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_017MeiWk3Yq12n2pTvnQWYvt

frontend/src/routes/_layout/index.tsx

@@ -3,7 +3,10 @@ import { createFileRoute, Link } from "@tanstack/react-router"
 import { AlertCircle, Workflow } from "lucide-react"
 
 import { type FlowSummary, FlowsService } from "@/client"
+import { BrainView } from "@/components/Flow/BrainView"
 import { flowKeys, flowsQueryOptions } from "@/components/Flow/queries"
+import { HealthActivity } from "@/components/Health/HealthActivity"
+import { HealthOverview } from "@/components/Health/HealthOverview"
 import { Badge } from "@/components/ui/badge"
 import { Card } from "@/components/ui/card"
 import { Skeleton } from "@/components/ui/skeleton"
@@ -25,17 +28,6 @@ export const Route = createFileRoute("/_layout/")({
 /** Another tab can stop a flow, and the engine can fail one on its own. */
 const REFRESH_INTERVAL = 10_000
 
-function Tile({ label, value }: { label: string; value: number }) {
-  return (
-    <Card className="gap-1 py-4">
-      <div className="px-5">
-        <p className="text-2xl font-semibold tabular-nums">{value}</p>
-        <p className="text-sm text-muted-foreground">{label}</p>
-      </div>
-    </Card>
-  )
-}
-
 function FlowRow({ flow }: { flow: FlowSummary }) {
   const queryClient = useQueryClient()
   const { showErrorToast } = useCustomToast()
@@ -101,6 +93,11 @@ function FlowRow({ flow }: { flow: FlowSummary }) {
   )
 }
 
+/**
+ * The one overview: what the engine is wired up as, what is running, and how
+ * it has been doing. The brain and the health screens compose in here rather
+ * than living at routes of their own.
+ */
 function Dashboard() {
   const { user: currentUser } = useAuth()
   const { data, isPending } = useQuery({
@@ -110,7 +107,6 @@ function Dashboard() {
 
   const flows = data?.data ?? []
   const running = flows.filter((flow) => flow.enabled ?? true).length
-  const failing = flows.filter((flow) => (flow.error_count ?? 0) > 0).length
 
   return (
     <div className="grid gap-6">
@@ -125,11 +121,7 @@ function Dashboard() {
         </p>
       </div>
 
-      <div className="grid gap-3 sm:grid-cols-3">
-        <Tile label="Flows" value={flows.length} />
-        <Tile label="Running" value={running} />
-        <Tile label="With errors" value={failing} />
-      </div>
+      <BrainView />
 
       <Card className="gap-0 py-0">
         {isPending ? (
@@ -153,6 +145,9 @@ function Dashboard() {
           flows.map((flow) => <FlowRow key={flow.name} flow={flow} />)
         )}
       </Card>
+
+      <HealthOverview />
+      <HealthActivity />
     </div>
   )
 }