From ae732c58227e130a81dc90243572335e778a560a Mon Sep 17 00:00:00 2001
From: OpenSquared <opensquaredgeneva@gmail.com>
Date: Fri, 24 Jul 2026 11:25:16 +0200
Subject: [PATCH] feat: cockpit

---
 frontend/src/App.tsx | 10 +++++++++-
 1 file changed, 9 insertions(+), 1 deletion(-)

diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index bc7daf1..36ba805 100644
--- a/frontend/src/App.tsx
+++ b/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} />