feat(webui): update artefacts dropdown with EPU Player and link chips

- Rename FSRecorder to EPU Player with PyPI and GitHub release links
- Update workspace entry with PyPI link chip
- Add ArtefactLink type to support multiple links per artefact
- Make only heading clickable (not entire menu item)
- Add underline on hover for heading links
- Enable text selection within menu items

Author: vredchenko

core/artefacts.json

@@ -23,17 +23,24 @@
     },
     {
       "id": "workspace",
-      "label": "SmartEM Dev Workspace",
+      "label": "SmartEM Workspace CLI",
       "url": "https://pypi.org/project/smartem-workspace/",
-      "description": "CLI tool to scaffold and manage a local development environment",
-      "command": "uvx smartem-workspace --help"
+      "description": "CLI tool to automate multi-repo workspace setup",
+      "command": "uvx smartem-workspace --help",
+      "links": [
+        { "label": "PyPI", "url": "https://pypi.org/project/smartem-workspace/" }
+      ]
     },
     {
-      "id": "fsrecorder",
-      "label": "FSRecorder Util",
-      "url": "https://github.com/DiamondLightSource/smartem-devtools/actions/workflows/build_win_fsrecorder.yml",
-      "description": "FSRecorder Utility packaged as a Windows 10 executable (download from workflow artifacts)",
-      "command": ""
+      "id": "epuplayer",
+      "label": "EPU Player",
+      "url": "https://github.com/DiamondLightSource/smartem-devtools/releases",
+      "description": "Filesystem recorder/replayer for EPU output",
+      "command": "uvx smartem-epuplayer --help",
+      "links": [
+        { "label": "GitHub Releases", "url": "https://github.com/DiamondLightSource/smartem-devtools/releases" },
+        { "label": "PyPI", "url": "https://pypi.org/project/smartem-epuplayer/" }
+      ]
     }
   ]
 }

core/index.ts

@@ -67,12 +67,18 @@ export interface ReposConfig {
 // Artefacts Types (artefacts.json)
 // =============================================================================
 
+export interface ArtefactLink {
+  label: string
+  url: string
+}
+
 export interface ArtefactItem {
   id: string
   label: string
   url: string
   description?: string
   command?: string
+  links?: ArtefactLink[]
 }
 
 export interface ArtefactsConfig {

webui/src/components/header/ArtefactsMenu.tsx

@@ -104,28 +104,36 @@ export function ArtefactsMenu() {
         {items.map((item) => (
           <MenuItem
             key={item.id}
-            component="a"
-            href={item.url}
-            target="_blank"
-            rel="noopener noreferrer"
-            onClick={handleClose}
+            disableRipple
             sx={{
               display: 'flex',
               flexDirection: 'column',
               alignItems: 'stretch',
               py: 1.5,
               px: 2,
               color: 'white',
+              cursor: 'default',
+              userSelect: 'text',
               '&:hover': {
                 backgroundColor: 'rgba(255, 255, 255, 0.1)',
               },
             }}
           >
             <Box
+              component="a"
+              href={item.url}
+              target="_blank"
+              rel="noopener noreferrer"
+              onClick={handleClose}
               sx={{
                 display: 'flex',
                 alignItems: 'center',
                 gap: 0.75,
+                color: 'inherit',
+                textDecoration: 'none',
+                '&:hover': {
+                  textDecoration: 'underline',
+                },
               }}
             >
               <Box
@@ -159,6 +167,32 @@ export function ArtefactsMenu() {
                 <CopyCodeBox code={item.command} />
               </Box>
             )}
+            {item.links && item.links.length > 0 && (
+              <Box sx={{ display: 'flex', gap: 1, mt: 1, pl: 2.5 }}>
+                {item.links.map((link) => (
+                  <Box
+                    key={link.label}
+                    component="a"
+                    href={link.url}
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    onClick={handleClose}
+                    sx={{
+                      fontSize: '0.7rem',
+                      color: 'rgba(255, 255, 255, 0.8)',
+                      textDecoration: 'none',
+                      px: 1,
+                      py: 0.25,
+                      borderRadius: 0.5,
+                      border: '1px solid rgba(255, 255, 255, 0.3)',
+                      '&:hover': { backgroundColor: 'rgba(255, 255, 255, 0.1)' },
+                    }}
+                  >
+                    {link.label}
+                  </Box>
+                ))}
+              </Box>
+            )}
           </MenuItem>
         ))}
       </Menu>