feat(ui): premium refinement pass + React Flow service map

CLAUDE.md

@@ -4,13 +4,13 @@
 
 OtelContext is a self-hosted OTLP observability platform. Single Go binary with embedded React frontend.
 - **Backend:** Go 1.25, native `net/http` (no frameworks), GORM ORM, gRPC + HTTP for OTLP ingestion
-- **Frontend:** React 19 + TypeScript + TanStack Query/Virtual + wouter + Radix primitives + cmdk palette + hand-rolled token CSS (`ui/src/styles/tokens.css`) with CSS Modules; the flow map is own deterministic SVG layout code. No UI framework: `@ossrandom/design-system`, cytoscape, uplot all removed (rewrite completed 2026-06-12, phases C1–C7)
+- **Frontend:** React 19 + TypeScript + TanStack Query/Virtual + wouter + Radix primitives + cmdk palette + hand-rolled token CSS (`ui/src/styles/tokens.css`) with CSS Modules. The **service map renders via React Flow (`@xyflow/react`, MIT)** fed by our own deterministic radial layout (`ui/src/lib/radialLayout.ts` — phyllotaxis, no physics); React Flow owns pan/zoom/fit/minimap/grid/a11y, nodes are token-themed React components, edges are straight centre-to-centre. No UI framework: `@ossrandom/design-system`, cytoscape, uplot remain removed (cytoscape's physics hairball → deterministic layout + React Flow; the prior hand-rolled-SVG map was replaced by React Flow on 2026-06-18)
 - **Ports:** gRPC `:4317` (OTLP), HTTP `:8080` (API + HTTP OTLP + WebSocket + UI)
 
 ## Strict Rules
 
 - NO Express.js/Gin/Echo — use native Go `net/http`
-- NO Tailwind CSS, NO Mantine, NO component frameworks — UI styling is the hand-rolled token sheet (`ui/src/styles/tokens.css`) + per-component CSS Modules; Radix primitives (unstyled) only for the a11y-hard parts (dialog/tabs/tooltip/dropdown). Token values only — no raw hex outside tokens.css.
+- NO Tailwind CSS, NO Mantine, NO general-purpose component frameworks — UI styling is the hand-rolled token sheet (`ui/src/styles/tokens.css`) + per-component CSS Modules. Sanctioned third-party UI: Radix primitives (unstyled) for the a11y-hard parts (dialog/tabs/tooltip/dropdown), and **React Flow (`@xyflow/react`) for the service map only** — themed to the token sheet, nodes/edges are our own components. Token values only — no raw hex outside tokens.css.
 - Single-service architecture (no microservices split)
 - All internal DBs must be **embedded** (no external processes)
 - Relational DB (SQLite/MySQL/PostgreSQL/MSSQL) is the **single source of truth**

ui/budgets.json

@@ -1,10 +1,12 @@
 {
-  "$comment": "Gzipped size budgets enforced by scripts/check-budgets.mjs (npm run check-budgets). 'initial' = assets referenced from dist/index.html (entry script + modulepreloads + stylesheets). Fonts are raw woff2 bytes (already compressed). C7 measured actuals after the design-system exit: initial JS 107.6 KB, initial CSS 2.7 KB, fonts 67.8 KB, largest lazy chunk 7.9 KB - budgets are actual + ~10% headroom. lazyChunkExceptions maps a chunk-name prefix (before the content hash) to a per-chunk cap; currently empty because every lazy chunk fits the default.",
+  "$comment": "Gzipped size budgets enforced by scripts/check-budgets.mjs (npm run check-budgets). 'initial' = assets referenced from dist/index.html (entry script + modulepreloads + stylesheets). Fonts are raw woff2 bytes (already compressed). lazyChunkExceptions maps a chunk-name prefix (before the content hash) to a per-chunk cap. The ConstellationHome lazy chunk carries the service map, which now renders via React Flow (@xyflow/react, MIT) instead of hand-rolled SVG — React Flow + zustand + d3-zoom add ~52 KB gz, all lazy (initial JS is unaffected, still ~106 KB). Measured ConstellationHome chunk: 61.3 KB gz; cap set to actual + headroom.",
   "gzipKb": {
     "initialJs": 118,
     "initialCss": 6,
     "fonts": 75,
     "lazyChunkDefault": 10,
-    "lazyChunkExceptions": {}
+    "lazyChunkExceptions": {
+      "ConstellationHome": 66
+    }
   }
 }

ui/index.html

@@ -4,18 +4,18 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover" />
     <!-- Mirrors --bg-base; useTheme keeps it in sync with the active theme. -->
-    <meta name="theme-color" content="#0b0d10" />
+    <meta name="theme-color" content="#0a0c0f" />
     <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
     <link
       rel="preload"
-      href="/fonts/inter-latin-wght-normal.woff2"
+      href="/fonts/martian-grotesk-latin-wght-normal.woff2"
       as="font"
       type="font/woff2"
       crossorigin
     />
     <link
       rel="preload"
-      href="/fonts/jetbrains-mono-latin-400-normal.woff2"
+      href="/fonts/martian-mono-latin-wght-normal.woff2"
       as="font"
       type="font/woff2"
       crossorigin

ui/package.json

@@ -19,6 +19,7 @@
     "@radix-ui/react-tooltip": "^1.2.9",
     "@tanstack/react-query": "^5.101.0",
     "@tanstack/react-virtual": "^3.14.2",
+    "@xyflow/react": "^12.11.0",
     "cmdk": "^1.1.1",
     "lucide-react": "^0.469.0",
     "react": "^19.2.5",

ui/public/fonts/LICENSE-jetbrains-mono → ui/public/fonts/LICENSE-martian-grotesk

@@ -1,4 +1,4 @@
-Copyright 2020 The JetBrains Mono Project Authors (https://github.com/JetBrains/JetBrainsMono) JetBrainsMono-Italic[wght].ttf: Copyright 2020 The JetBrains Mono Project Authors (https://github.com/JetBrains/JetBrainsMono)
+Copyright 2021 The Martian Grotesk Project Authors (https://github.com/evilmartians/grotesk)
 
 This Font Software is licensed under the SIL Open Font License, Version 1.1.
 This license is copied below, and is also available with a FAQ at:
@@ -18,7 +18,7 @@ with others.
 
 The OFL allows the licensed fonts to be used, studied, modified and
 redistributed freely as long as they are not sold by themselves. The
-fonts, including any derivative works, can be bundled, embedded,
+fonts, including any derivative works, can be bundled, embedded, 
 redistributed and/or sold with any software provided that any reserved
 names are not used by derivative works. The fonts and derivatives,
 however, cannot be released under any other type of license. The

ui/public/fonts/LICENSE-inter → ui/public/fonts/LICENSE-martian-mono

@@ -1,4 +1,4 @@
-Copyright 2016 The Inter Project Authors (https://github.com/rsms/inter) Inter-Italic[opsz,wght].ttf: Copyright 2016 The Inter Project Authors (https://github.com/rsms/inter)
+Copyright 2020 The Martian Mono Project Authors (https://github.com/evilmartians/mono)
 
 This Font Software is licensed under the SIL Open Font License, Version 1.1.
 This license is copied below, and is also available with a FAQ at:

ui/src/App.tsx

@@ -2,7 +2,6 @@ import { lazy, Suspense, useCallback, useState } from 'react'
 import { Redirect, Route, Switch, useSearch } from 'wouter'
 import RouteFallback from './components/common/RouteFallback'
 import Shell from './components/shell/Shell'
-import TrailBar from './components/trail/TrailBar'
 import { useGlobalKeys } from './hooks/useGlobalKeys'
 import { useInvestigation } from './hooks/useInvestigation'
 import type { Theme } from './hooks/useTheme'
@@ -32,7 +31,7 @@ function MapRedirect() {
 }
 
 export default function App({ theme, onToggleTheme }: Readonly<AppProps>) {
-  const { service, trail, popToFrame, popOne } = useInvestigation()
+  const { service } = useInvestigation()
 
   const [paletteOpen, setPaletteOpen] = useState(false)
   const [shortcutsOpen, setShortcutsOpen] = useState(false)
@@ -83,7 +82,6 @@ export default function App({ theme, onToggleTheme }: Readonly<AppProps>) {
           </Suspense>
         )}
       </div>
-      <TrailBar frames={trail} onPopTo={popToFrame} onPopOne={popOne} />
       {overlaysWanted && (
         <Suspense fallback={null}>
           <PaletteHost