feat(go, ts): add system-region mapping and highlight functionality

frontend/src/components/RegionMap.tsx

@@ -98,6 +98,25 @@ export const RegionMap = ({ regionName, focusSystem, isCompact = false, isWormho
   const [offRegionIndicators, setOffRegionIndicators] = useState<OffIndicator[]>([]);
   const [meanNeighborAngle, setMeanNeighborAngle] = useState<Record<string, number>>({});
   const [charLocs, setCharLocs] = useState<Array<{ character_id: number; character_name: string; solar_system_name: string }>>([]);
+  const [focusUntil, setFocusUntil] = useState<number | null>(null);
+
+  // When focusSystem changes, set an expiry 20s in the future
+  useEffect(() => {
+    if (focusSystem) {
+      setFocusUntil(Date.now() + 20000);
+    }
+  }, [focusSystem]);
+
+  // Timer to clear focus after expiry
+  useEffect(() => {
+    if (!focusUntil) return;
+    const id = setInterval(() => {
+      if (Date.now() > focusUntil) {
+        setFocusUntil(null);
+      }
+    }, 500);
+    return () => clearInterval(id);
+  }, [focusUntil]);
 
   useEffect(() => {
     const onKeyDown = async (e: KeyboardEvent) => {
@@ -700,27 +719,35 @@ export const RegionMap = ({ regionName, focusSystem, isCompact = false, isWormho
         })}
 
         {/* Highlight focused system */}
-        {focusSystem && positions[focusSystem] && (
-          <circle
-            cx={positions[focusSystem].x}
-            cy={positions[focusSystem].y}
-            r="15"
-            fill="none"
-            stroke="#a855f7"
-            strokeWidth="3"
-            strokeDasharray="5,5"
-            opacity="0.8"
-          >
-            <animateTransform
-              attributeName="transform"
-              attributeType="XML"
-              type="rotate"
-              from={`0 ${positions[focusSystem].x} ${positions[focusSystem].y}`}
-              to={`360 ${positions[focusSystem].x} ${positions[focusSystem].y}`}
-              dur="10s"
-              repeatCount="indefinite"
+        {focusSystem && focusUntil && Date.now() <= focusUntil && positions[focusSystem] && (
+          <g>
+            <circle
+              cx={positions[focusSystem].x}
+              cy={positions[focusSystem].y}
+              r="20"
+              fill="none"
+              stroke="#f472b6"
+              strokeWidth="4"
+              strokeDasharray="6,6"
+              opacity="0.95"
+              filter="url(#glow)"
+            >
+              <animate
+                attributeName="r"
+                values="18;24;18"
+                dur="1.8s"
+                repeatCount="indefinite"
+              />
+            </circle>
+            <circle
+              cx={positions[focusSystem].x}
+              cy={positions[focusSystem].y}
+              r="8"
+              fill="#f472b6"
+              opacity="0.8"
             />
-          </circle>
+            <text x={positions[focusSystem].x + 14} y={positions[focusSystem].y - 14} fontSize="10" fill="#ffffff" stroke="#0f172a" strokeWidth="2" paintOrder="stroke">{focusSystem}</text>
+          </g>
         )}
       </svg>