feat: cockpit

frontend/src/App.tsx

@@ -118,7 +118,15 @@ function InstrumentRoute() {
 // Keeps one InstrumentDashboard mounted per open instrument tab
 function InstrumentKeepAlive({ id }: { id: string }) {
   const location = useLocation()
-  const isActive = location.pathname.toLowerCase() === `/instruments/${id.toLowerCase()}`
+  // location.pathname keeps its percent-encoding (EURUSD=X -> /instruments/EURUSD%3DX),
+  // while `id` is already decoded (react-router's useParams decodes dynamic segments) —
+  // comparing them as raw strings never matches for any id containing a character
+  // encodeURIComponent escapes ("=" in EURUSD=X/USDJPY=X/GBPUSD=X in particular), so the
+  // tab silently never activates and the page renders blank. Decode the URL segment
+  // before comparing.
+  let currentId = location.pathname.replace(/^\/instruments\//, '')
+  try { currentId = decodeURIComponent(currentId) } catch { /* malformed sequence, compare as-is */ }
+  const isActive = currentId.toLowerCase() === id.toLowerCase()
   return (
     <div className={isActive ? 'flex-1 min-h-0 overflow-y-auto' : 'hidden'}>
       <InstrumentDashboard instrumentIdProp={id} isVisible={isActive} />