Fix invisible chart lines + extract Prometheus labels for multi-series

Two fixes for the Grafana chart widget:

1. Invisible lines: the CHART_COLORS used 'hsl(var(--chart-1))' but the
   CSS variable is named '--color-chart-1' and already contains a hex
   color (#4f8cff). The hsl() wrapper produced invalid CSS, making
   every stroke invisible. Fixed to var(--color-chart-1).

2. Multiple series collision: the backend labeled all Prometheus series
   with the value field name (often just 'Value'), so multiple time
   series collided on the same recharts dataKey and overwrote each
   other. Now extracts meaningful labels from the Grafana frame metadata:
   prefers displayName, then Prometheus metric labels (e.g.
   'instance=server1:9100 mode=iowait'), then falls back to the field
   name. Duplicate labels get a numeric suffix for uniqueness.

Multi-series queries now render correctly: each Prometheus time series
gets its own colored line with a unique label in the legend/tooltip.

280 backend tests pass (+1 labels test); 127 frontend tests pass; ruff/
eslint clean.

backend/tests/test_widgets.py

@@ -565,6 +565,69 @@ async def test_grafana_adapter_chart_queries_datasource():
     ]
 
 
+@pytest.mark.asyncio
+async def test_grafana_adapter_chart_extracts_prometheus_labels():
+    """Multiple Prometheus series should get unique labels from frame metadata."""
+    from unittest.mock import MagicMock, patch
+
+    adapter = GrafanaWidgetSource()
+    service = ServiceRecord(
+        id="s",
+        service_type="grafana",
+        name="g",
+        config={"base_url": "http://g:3000", "timeout_seconds": 5},
+        secrets={"api_key": "tok"},
+    )
+
+    mock_resp = MagicMock()
+    mock_resp.json.return_value = {
+        "results": {
+            "A": {
+                "frames": [
+                    {
+                        "data": {"values": [[1000], [0.5]]},
+                        "schema": {
+                            "fields": [
+                                {"name": "Time"},
+                                {
+                                    "name": "Value",
+                                    "labels": {
+                                        "instance": "server1:9100",
+                                        "mode": "iowait",
+                                    },
+                                },
+                            ]
+                        },
+                    },
+                    {
+                        "data": {"values": [[1000], [0.3]]},
+                        "schema": {
+                            "fields": [
+                                {"name": "Time"},
+                                {
+                                    "name": "Value",
+                                    "labels": {
+                                        "instance": "server2:9100",
+                                        "mode": "iowait",
+                                    },
+                                },
+                            ]
+                        },
+                    },
+                ]
+            }
+        }
+    }
+    mock_resp.raise_for_status = MagicMock()
+
+    with patch("media_library_viewer_api.widgets.sources.requests.post", return_value=mock_resp):
+        result = await adapter.fetch(service, "chart", {"query": "rate(cpu[5m])"})
+
+    assert len(result["series"]) == 2
+    assert result["series"][0]["label"] == "instance=server1:9100 mode=iowait"
+    assert result["series"][1]["label"] == "instance=server2:9100 mode=iowait"
+
+
 @pytest.mark.asyncio
 async def test_grafana_adapter_chart_requires_api_key():
     adapter = GrafanaWidgetSource()