only one device per window, differenciate devices by color

frontend/src/components/TestCard.jsx

@@ -4,6 +4,28 @@ const STATUS_STYLES = {
   rerun:     'bg-red-800/60 text-red-200 border-red-600',
 }
 
+const DEVICE_ACCENT_CLASSES = [
+  'bg-sky-400',
+  'bg-emerald-400',
+  'bg-amber-400',
+  'bg-rose-400',
+  'bg-cyan-400',
+  'bg-lime-400',
+  'bg-orange-400',
+  'bg-fuchsia-400',
+]
+
+function getDeviceAccentClass(device) {
+  if (!device) return 'bg-gray-500'
+
+  let hash = 0
+  for (let i = 0; i < device.length; i += 1) {
+    hash = (hash * 31 + device.charCodeAt(i)) >>> 0
+  }
+
+  return DEVICE_ACCENT_CLASSES[hash % DEVICE_ACCENT_CLASSES.length]
+}
+
 function formatConfig(config) {
   if (!config || typeof config !== 'object') return '—'
   const entries = Object.entries(config)
@@ -24,13 +46,15 @@ function formatConfig(config) {
 
 export default function TestCard({ test }) {
   const style = STATUS_STYLES[test.status] ?? STATUS_STYLES.pending
+  const deviceAccentClass = getDeviceAccentClass(test.device)
 
   return (
     <div className="relative group">
       <div
-        className={`px-1.5 py-0.5 rounded border text-xs font-mono truncate cursor-default select-none ${style}`}
+        className={`relative px-1.5 py-0.5 pl-3 rounded border text-xs font-mono truncate cursor-default select-none ${style}`}
         style={{ maxWidth: '100%' }}
       >
+        <span className={`absolute inset-y-0 left-0 w-1 rounded-l ${deviceAccentClass}`} aria-hidden="true" />
         {test.test_id}
       </div>
       {/* Hover tooltip */}
@@ -38,7 +62,11 @@ export default function TestCard({ test }) {
         <div className="bg-gray-800 border border-gray-600 rounded-md px-2.5 py-1.5 text-xs text-gray-200 shadow-lg max-w-md">
           <p><span className="text-gray-400">Type:</span> {test.test_type ?? '—'}</p>
           <p><span className="text-gray-400">Rotation:</span> {test.rotation ?? '—'}</p>
-          <p><span className="text-gray-400">Device:</span> {test.device ?? '—'}</p>
+          <p className="flex items-center gap-1.5">
+            <span className="text-gray-400">Device:</span>
+            <span className={`inline-block w-2 h-2 rounded-full ${deviceAccentClass}`} aria-hidden="true" />
+            <span>{test.device ?? '—'}</span>
+          </p>
           <p className="mt-1 pt-1 border-t border-gray-600"><span className="text-gray-400">Config:</span> {formatConfig(test.config)}</p>
         </div>
       </div>