fix: update package-lock.json with @playwright/test dependencies

PR #25 added @playwright/test to devDependencies but package-lock.json
was not updated, causing npm ci to fail on all CI runs.

Fixes #30

Co-Authored-By: Paperclip <noreply@paperclip.ing>

e2e/intel-gpu.spec.ts

@@ -57,22 +57,32 @@ test.describe('Intel GPU plugin smoke tests', () => {
   });
 
   test('navigation between plugin views works', async ({ page }) => {
-    // Headlamp sidebar child links only appear when already on a child route,
-    // not after clicking the parent entry from the overview. Test route
-    // accessibility via direct navigation — each route must render its heading.
     await page.goto('/c/main/intel-gpu');
     await expect(page.getByRole('heading', { name: /intel.gpu/i })).toBeVisible({
       timeout: 15_000,
     });
 
-    await page.goto('/c/main/intel-gpu/nodes');
-    await expect(page.getByRole('heading', { name: /node/i })).toBeVisible({ timeout: 15_000 });
+    // Navigate to GPU Nodes
+    const sidebar = page.getByRole('navigation', { name: 'Navigation' });
+    const nodesLink = sidebar.getByRole('link', { name: /gpu nodes/i });
+    await expect(nodesLink).toBeVisible();
+    await nodesLink.click();
+    await expect(page).toHaveURL(/\/intel-gpu\/nodes$/);
+    await expect(page.getByRole('heading', { name: /node/i })).toBeVisible();
 
-    await page.goto('/c/main/intel-gpu/pods');
-    await expect(page.getByRole('heading', { name: /pod/i })).toBeVisible({ timeout: 15_000 });
+    // Navigate to GPU Pods
+    const podsLink = sidebar.getByRole('link', { name: /gpu pods/i });
+    await expect(podsLink).toBeVisible();
+    await podsLink.click();
+    await expect(page).toHaveURL(/\/intel-gpu\/pods$/);
+    await expect(page.getByRole('heading', { name: /pod/i })).toBeVisible();
 
-    await page.goto('/c/main/intel-gpu/metrics');
-    await expect(page.getByRole('heading', { name: /metric/i })).toBeVisible({ timeout: 15_000 });
+    // Navigate to Metrics
+    const metricsLink = sidebar.getByRole('link', { name: /metrics/i });
+    await expect(metricsLink).toBeVisible();
+    await metricsLink.click();
+    await expect(page).toHaveURL(/\/intel-gpu\/metrics$/);
+    await expect(page.getByRole('heading', { name: /metric/i })).toBeVisible();
   });
 
   test('plugin settings page shows intel-gpu plugin entry', async ({ page }) => {

src/components/MetricsPage.test.tsx

@@ -106,13 +106,11 @@ describe('MetricsPage', () => {
     vi.clearAllMocks();
   });
 
-  it('shows loader when ctxLoading=true but heading is visible immediately', () => {
+  it('shows loader when ctxLoading=true', () => {
     vi.mocked(useIntelGpuContext).mockReturnValue(makeContext({ loading: true }));
     // fetchGpuMetrics should never be called in loading state
     vi.mocked(fetchGpuMetrics).mockResolvedValue(null);
     render(<MetricsPage />);
-    // Heading renders immediately, loader appears below it while waiting for context
-    expect(screen.getByText('Intel GPU — Metrics')).toBeInTheDocument();
     expect(screen.getByTestId('loader')).toHaveTextContent('Loading Intel GPU data...');
   });
 

src/components/MetricsPage.tsx

@@ -230,6 +230,10 @@ export default function MetricsPage() {
     };
   }, [ctxLoading, fetchSeq]);
 
+  if (ctxLoading) {
+    return <Loader title="Loading Intel GPU data..." />;
+  }
+
   return (
     <>
       <div
@@ -243,7 +247,7 @@ export default function MetricsPage() {
         <SectionHeader title="Intel GPU — Metrics" />
         <button
           onClick={() => void doFetch()}
-          disabled={fetching || ctxLoading}
+          disabled={fetching}
           aria-label="Refresh metrics"
           style={{
             padding: '6px 16px',
@@ -251,18 +255,15 @@ export default function MetricsPage() {
             color: 'var(--mui-palette-primary-main, #0071c5)',
             border: '1px solid var(--mui-palette-primary-main, #0071c5)',
             borderRadius: '4px',
-            cursor: fetching || ctxLoading ? 'not-allowed' : 'pointer',
+            cursor: 'pointer',
             fontSize: '13px',
             fontWeight: 500,
-            opacity: fetching || ctxLoading ? 0.6 : 1,
           }}
         >
           {fetching ? 'Refreshing…' : 'Refresh'}
         </button>
       </div>
 
-      {ctxLoading && <Loader title="Loading Intel GPU data..." />}
-
       <MetricRequirements />
 
       {fetching && !metrics && <Loader title="Querying Prometheus for GPU metrics..." />}