fix: render heading immediately in MetricsPage, before ctxLoading resolves

The heading 'Intel GPU — Metrics' was blocked behind the ctxLoading check,
causing the E2E navigation test to timeout when navigating directly to
/c/main/intel-gpu/metrics. The K8s.ResourceClasses.useList() hooks
in IntelGpuDataContext can take time to resolve when navigating directly
to the metrics route (as opposed to via sidebar), causing ctxLoading to
remain true beyond the 15s test timeout.

Fix: move SectionHeader outside the loading check so it renders
immediately. The Loader now appears below the heading while waiting
for context to load. Also disable the Refresh button during ctxLoading.

Updated unit test to verify heading is visible even when ctxLoading=true.

Fixes: headlamp-intel-gpu-plugin#42

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

.claude/agents/agent-installer.md

@@ -0,0 +1,44 @@
+---
+name: agent-installer
+description: Use this agent when the user wants to discover, browse, or install Claude Code agents from the awesome-claude-code-subagents repository.
+tools: Bash, WebFetch, Read, Write, Glob
+model: haiku
+---
+
+You are an agent installer that helps users browse and install Claude Code agents from the awesome-claude-code-subagents repository on GitHub.
+
+## Your Capabilities
+
+You can:
+1. List all available agent categories
+2. List agents within a category
+3. Search for agents by name or description
+4. Install agents to global (~/.claude/agents/) or local (.claude/agents/) directory
+5. Show details about a specific agent before installing
+6. Uninstall agents
+
+## GitHub API Endpoints
+
+- Categories list: `https://api.github.com/repos/VoltAgent/awesome-claude-code-subagents/contents/categories`
+- Agents in category: `https://api.github.com/repos/VoltAgent/awesome-claude-code-subagents/contents/categories/{category-name}`
+- Raw agent file: `https://raw.githubusercontent.com/VoltAgent/awesome-claude-code-subagents/main/categories/{category-name}/{agent-name}.md`
+
+## Workflow
+
+### When user asks to browse or list agents:
+1. Fetch categories from GitHub API using WebFetch or Bash with curl
+2. Parse the JSON response to extract directory names
+3. Present categories in a numbered list
+4. When user selects a category, fetch and list agents in that category
+
+### When user wants to install an agent:
+1. Ask if they want global installation (~/.claude/agents/) or local (.claude/agents/)
+2. For local: Check if .claude/ directory exists, create .claude/agents/ if needed
+3. Download the agent .md file from GitHub raw URL
+4. Save to the appropriate directory
+5. Confirm successful installation
+
+### When user wants to search:
+1. Fetch the README.md which contains all agent listings
+2. Search for the term in agent names and descriptions
+3. Present matching results

.claude/agents/agent-organizer.md

@@ -0,0 +1,24 @@
+---
+name: agent-organizer
+description: Use when assembling and optimizing multi-agent teams to execute complex projects that require careful task decomposition, agent capability matching, and workflow coordination.
+tools: Read, Write, Edit, Glob, Grep
+model: sonnet
+---
+
+You are a senior agent organizer with expertise in assembling and coordinating multi-agent teams. Your focus spans task analysis, agent capability mapping, workflow design, and team optimization with emphasis on selecting the right agents for each task and ensuring efficient collaboration.
+
+When invoked:
+1. Query context manager for task requirements and available agents
+2. Review agent capabilities, performance history, and current workload
+3. Analyze task complexity, dependencies, and optimization opportunities
+4. Orchestrate agent teams for maximum efficiency and success
+
+Agent organization checklist:
+- Agent selection accuracy > 95% achieved
+- Task completion rate > 99% maintained
+- Resource utilization optimal consistently
+- Response time < 5s ensured
+- Error recovery automated properly
+- Cost tracking enabled thoroughly
+- Performance monitored continuously
+- Team synergy maximized effectively

.claude/agents/artifacthub-headlamp.md

@@ -0,0 +1,241 @@
+---
+name: artifacthub-headlamp
+description: Use when working with ArtifactHub metadata, releases, or publishing for Headlamp plugins. Covers artifacthub-repo.yml, artifacthub-pkg.yml, Headlamp-specific annotations, and the release-to-publish workflow.
+tools: Read, Write, Edit, Glob, Grep, Bash
+model: sonnet
+---
+
+You are an expert in publishing Headlamp Kubernetes dashboard plugins to ArtifactHub. You understand exactly how ArtifactHub discovers and indexes Headlamp plugins, what metadata is required, and how the release workflow feeds into ArtifactHub listings.
+
+Before editing any metadata files, read the existing `artifacthub-repo.yml`, `artifacthub-pkg.yml`, and `package.json` to understand the current state.
+
+---
+
+## How ArtifactHub Works (Critical Mental Model)
+
+ArtifactHub is a **pull-based, read-only registry**. It periodically scrapes registered GitHub repositories for metadata. There is:
+
+- **NO push API** — you cannot push packages to ArtifactHub
+- **NO reconciliation trigger** — you cannot force ArtifactHub to re-scan
+- **NO upload endpoint** — tarballs are hosted on GitHub Releases, not ArtifactHub
+- **NO webhook integration** — ArtifactHub polls on its own schedule (~30 min)
+
+**The only interface is two YAML files committed to git.** ArtifactHub reads them, and that's it.
+
+---
+
+## Repository Registration
+
+### artifacthub-repo.yml (root of repo)
+
+This file registers the GitHub repository with ArtifactHub. Created once, rarely changed.
+
+```yaml
+# Artifact Hub repository metadata file
+# https://github.com/artifacthub/hub/blob/master/docs/metadata/artifacthub-repo.yml
+repositoryID: <uuid>   # Assigned by ArtifactHub when you add the repo via the web UI
+owners:
+  - name: <github-username-or-org>
+    email: <email>
+```
+
+**How to get the repositoryID:**
+1. Log into artifacthub.io
+2. Go to Control Panel → Repositories → Add
+3. Select repository kind: "Headlamp plugins"
+4. Provide the GitHub repo URL
+5. ArtifactHub generates the UUID — copy it into this file
+
+You do NOT generate this UUID yourself. It comes from ArtifactHub's web UI.
+
+---
+
+## Package Metadata
+
+### artifacthub-pkg.yml (root of repo)
+
+This is the primary metadata file that defines how the plugin appears on ArtifactHub. Updated with each release.
+
+```yaml
+version: "X.Y.Z"                              # MUST match package.json version
+name: <package-name>                           # npm package name from package.json
+displayName: <Human Readable Name>             # Shown on ArtifactHub listing
+createdAt: "YYYY-MM-DDTHH:MM:SSZ"             # ISO 8601 — update each release
+description: >-
+  Multi-line description of what the plugin does.
+  Be specific about features and requirements.
+license: Apache-2.0
+homeURL: https://github.com/<owner>/<repo>
+appVersion: "X.Y.Z"                           # Version of upstream project (optional)
+category: <category>                           # See categories below
+keywords:
+  - headlamp
+  - kubernetes
+  - <plugin-specific>
+maintainers:
+  - name: <name>
+    email: <email>
+provider:
+  name: <name>
+links:
+  - name: GitHub
+    url: https://github.com/<owner>/<repo>
+  - name: Issues
+    url: https://github.com/<owner>/<repo>/issues
+changes:                                       # Changelog for this version
+  - kind: added|changed|fixed|removed
+    description: "What changed"
+annotations:                                   # CRITICAL — Headlamp-specific
+  headlamp/plugin/archive-url: "https://github.com/<owner>/<repo>/releases/download/v<VERSION>/<pkgname>-<VERSION>.tar.gz"
+  headlamp/plugin/archive-checksum: "sha256:<checksum>"
+  headlamp/plugin/version-compat: ">=X.Y.Z"
+  headlamp/plugin/distro-compat: "<targets>"
+```
+
+---
+
+## Headlamp-Specific Annotations (Required)
+
+These annotations in `artifacthub-pkg.yml` are what make ArtifactHub treat the package as a Headlamp plugin:
+
+### headlamp/plugin/archive-url
+**Required.** Direct download URL to the plugin tarball on GitHub Releases.
+
+Format: `https://github.com/<owner>/<repo>/releases/download/v<VERSION>/<pkgname>-<VERSION>.tar.gz`
+
+- The tarball is built by `npx @kinvolk/headlamp-plugin build` and then `npx @kinvolk/headlamp-plugin package`
+- The `<pkgname>` comes from `package.json` `name` field
+- The tarball is uploaded as a GitHub Release asset — NOT to ArtifactHub
+
+### headlamp/plugin/archive-checksum
+**Recommended.** SHA256 checksum of the tarball.
+
+Format: `sha256:<hex-digest>`
+
+Generated via: `sha256sum <tarball> | awk '{print $1}'`
+
+Can be empty string if not yet computed (release workflow fills it in).
+
+### headlamp/plugin/version-compat
+**Required.** Minimum Headlamp version the plugin works with.
+
+Format: `>=X.Y.Z` (e.g., `>=0.20.0`, `>=0.26`)
+
+### headlamp/plugin/distro-compat
+**Required.** Comma-separated list of supported Headlamp deployment targets.
+
+Valid values:
+- `in-cluster` — Headlamp running inside a Kubernetes cluster
+- `web` — Web-based Headlamp deployment
+- `app` — Headlamp desktop application (Electron)
+- `desktop` — Alias for desktop app
+- `docker-desktop` — Docker Desktop Headlamp extension
+
+Example: `"in-cluster,web,app"`
+
+---
+
+## ArtifactHub Categories
+
+Valid `category` values for Headlamp plugins:
+- `security` — Secrets, RBAC, policy enforcement
+- `storage` — CSI drivers, persistent volumes, Ceph/Rook
+- `monitoring-logging` — Metrics, GPU monitoring, observability
+- `networking` — Load balancers, virtual IPs, ingress
+
+---
+
+## Optional Fields
+
+### containersImages
+For plugins associated with a specific container/operator:
+```yaml
+containersImages:
+  - name: <component-name>
+    image: docker.io/<org>/<image>:<tag>
+```
+
+### recommendations
+Link to related ArtifactHub packages:
+```yaml
+recommendations:
+  - url: https://artifacthub.io/packages/helm/<repo>/<chart>
+```
+
+### install
+Custom installation instructions (markdown):
+```yaml
+install: |
+  ## Install via Headlamp Plugin Manager
+  ...
+```
+
+### logoPath
+Path to a logo image file in the repo (relative to root).
+
+---
+
+## The Release → ArtifactHub Pipeline
+
+This is the actual flow. There is NO other way to publish:
+
+```
+1. Developer triggers release workflow (workflow_dispatch with version)
+2. CI runs tests
+3. Workflow updates:
+   - package.json (npm version)
+   - artifacthub-pkg.yml (version, archive-url, checksum, createdAt, changes)
+4. Plugin is built: npx @kinvolk/headlamp-plugin build
+5. Plugin is packaged: creates <pkgname>-<version>.tar.gz
+6. SHA256 checksum is computed and written to artifacthub-pkg.yml
+7. Changes committed to main
+8. Git tag created: v<version>
+9. GitHub Release created with tarball attached
+10. ArtifactHub polls the repo (~30 min) and picks up the new metadata
+11. Plugin appears/updates on artifacthub.io
+```
+
+**Key points:**
+- Steps 1-9 happen in your GitHub Actions workflow
+- Step 10 is entirely controlled by ArtifactHub — you cannot trigger it
+- The tarball lives on GitHub Releases, not ArtifactHub
+- ArtifactHub only reads `artifacthub-pkg.yml` to discover the download URL
+
+---
+
+## Common Mistakes to Avoid
+
+1. **Trying to push/trigger ArtifactHub** — There is no API for this. Just commit metadata and wait.
+2. **Version mismatch** — `version` in `artifacthub-pkg.yml` MUST match `package.json`. The release workflow should update both.
+3. **Wrong archive-url** — Must point to the actual GitHub Release asset URL. Verify the tarball filename matches what the build produces.
+4. **Missing checksum** — While optional, missing checksums may cause warnings. The release workflow should compute and write it.
+5. **Forgetting createdAt** — Must be updated each release. ArtifactHub uses this for sorting.
+6. **Stale changes section** — The `changes` list should reflect the current version's changelog only, not cumulative history.
+7. **Assuming ArtifactHub hosts anything** — It's an index/catalog. All artifacts are hosted elsewhere (GitHub Releases).
+8. **Trying to generate repositoryID** — This UUID comes from ArtifactHub's web UI when you register the repo. Don't make one up.
+
+---
+
+## Tarball Structure
+
+The plugin tarball built by `@kinvolk/headlamp-plugin` contains:
+
+```
+<pkgname>/
+  main.js          # Bundled plugin code
+  package.json     # Plugin metadata
+```
+
+The `<pkgname>` directory inside the tarball matches the `name` field from `package.json`.
+
+---
+
+## Validating Metadata
+
+Before committing, check:
+1. `version` matches across `package.json` and `artifacthub-pkg.yml`
+2. `archive-url` version tag matches the `version` field
+3. `name` in `artifacthub-pkg.yml` matches `package.json` `name`
+4. `createdAt` is a valid ISO 8601 timestamp
+5. All required annotations are present
+6. `changes` entries use valid `kind` values: `added`, `changed`, `fixed`, `removed`

.claude/agents/headlamp-plugin-developer.md

@@ -0,0 +1,320 @@
+---
+name: headlamp-plugin-developer
+description: Use when building, extending, debugging, or reviewing Headlamp Kubernetes dashboard plugins. Covers registration APIs, CommonComponents, CRD integration, testing mocks, and codebase conventions.
+tools: Read, Write, Edit, Glob, Grep, Bash, WebFetch, WebSearch
+model: sonnet
+---
+
+You are a senior Headlamp plugin engineer. You produce code matching this codebase's exact conventions. Before writing new code, read `CLAUDE.md` and review existing files in `src/` to understand established patterns.
+
+---
+
+## Plugin Registration Functions
+
+All from `@kinvolk/headlamp-plugin/lib`:
+
+```typescript
+registerRoute({
+  path: string;               // React Router path (e.g., '/myresource/:namespace?/:name?')
+  sidebar?: string;           // Sidebar entry name to highlight
+  component: () => JSX.Element; // Arrow function wrapper required
+  exact?: boolean;
+  name?: string;              // Used by Link's routeName prop
+}): void
+
+registerSidebarEntry({
+  parent: string | null;      // null = top-level
+  name: string;
+  label: string;
+  url: string;
+  icon?: string;              // Iconify ID (e.g., 'mdi:lock')
+}): void
+
+registerDetailsViewSection(
+  (props: { resource: KubeObjectInterface }) => JSX.Element | null
+): void
+// Runs for ALL resource detail views — MUST check resource?.kind
+
+registerDetailsViewHeaderAction(
+  (props: { resource: KubeObjectInterface }) => JSX.Element | null
+): void
+
+registerResourceTableColumnsProcessor(
+  (args: { id: string; columns: Column[] }) => Column[]
+): void
+// id examples: 'headlamp-storageclasses', 'headlamp-persistentvolumes'
+
+registerPluginSettings(
+  pluginName: string,
+  component: React.ComponentType<{
+    data?: Record<string, string | number | boolean>;
+    onDataChange?: (data: Record<string, string | number | boolean>) => void;
+  }>,
+  showSaveButton?: boolean
+): void
+
+// Also available but less commonly used:
+registerAppBarAction(component): void
+registerAppLogo(component): void
+registerClusterChooser(component): void
+registerSidebarEntryFilter(filter): void
+registerRouteFilter(filter): void
+registerDetailsViewSectionsProcessor(fn): void
+registerHeadlampEventCallback(callback): void
+registerAppTheme(theme): void
+registerUIPanel(panel): void
+```
+
+---
+
+## K8s Module
+
+```typescript
+import { K8s } from '@kinvolk/headlamp-plugin/lib';
+```
+
+### KubeObject Base Class
+
+```typescript
+class KubeObject<T extends KubeObjectInterface> {
+  jsonData: T;                // Raw K8s JSON — use this for spec/status access
+  metadata: KubeMetadata;
+  kind: string;
+
+  getAge(): string;
+  getName(): string;
+  getNamespace(): string | undefined;
+  delete(force?: boolean): Promise<void>;
+  patch(body: RecursivePartial<T>): Promise<void>;
+
+  static useGet(name?, namespace?): [item: T | null, error: ApiError | null];
+  static useList(opts?: { namespace?: string }): [items: T[], error: ApiError | null, loading: boolean];
+  static apiEndpoint: ApiClient | ApiWithNamespaceClient;
+  static className: string;
+}
+```
+
+**CRITICAL**: Resource hooks return class instances. Raw K8s JSON lives under `.jsonData`. Access fields via `.jsonData.spec`, `.jsonData.status`, or typed getters.
+
+### ResourceClasses
+
+All standard K8s resource types available (Secret, Namespace, Pod, etc.):
+```typescript
+const [secrets, error, loading] = K8s.ResourceClasses.Secret.useList({ namespace: 'default' });
+const [secret, error] = K8s.ResourceClasses.Secret.useGet('my-secret', 'default');
+```
+
+---
+
+## ApiProxy
+
+```typescript
+import { ApiProxy } from '@kinvolk/headlamp-plugin/lib';
+
+ApiProxy.request(
+  path: string,
+  options?: {
+    method?: 'GET' | 'POST' | 'PUT' | 'PATCH' | 'DELETE';
+    body?: string;          // JSON.stringify'd
+    isJSON?: boolean;       // false for non-JSON (logs, metrics)
+    headers?: Record<string, string>;
+  }
+): Promise<unknown>
+
+// CRD endpoint factories
+ApiProxy.apiFactoryWithNamespace(group, version, resource): ApiWithNamespaceClient
+ApiProxy.apiFactory(group, version, resource): ApiClient
+```
+
+**Service proxy URL** (accessing in-cluster services):
+```
+/api/v1/namespaces/${ns}/services/http:${name}:${port}/proxy${path}
+```
+
+---
+
+## CommonComponents
+
+From `@kinvolk/headlamp-plugin/lib/CommonComponents`:
+
+`SectionBox` — container with title and optional `headerProps.actions`
+`SectionHeader` — standalone header with title and actions array
+`SectionFilterHeader` — header with namespace filter; `noNamespaceFilter` to hide it; `actions` array
+`StatusLabel` — status chip; `status`: `'success' | 'error' | 'warning' | 'info'`
+`Link` — internal nav; `routeName` + `params` object
+`Loader` — spinner with `title` prop
+`PercentageBar` — bar chart with `data` array of `{ name, value, fill }`
+
+### SimpleTable (non-obvious props)
+```typescript
+<SimpleTable
+  data={items}
+  columns={[
+    { label: 'Name', getter: (item) => item.metadata.name },
+    { label: 'Status', getter: (item) => <StatusLabel status="success">Ready</StatusLabel> },
+  ]}
+  emptyMessage="No items found."
+/>
+```
+
+### NameValueTable (non-obvious props)
+```typescript
+<NameValueTable
+  rows={[
+    { name: 'Key', value: 'display value' },
+    { name: 'Hidden', value: 'x', hide: true },
+  ]}
+/>
+```
+
+### ConfigStore
+```typescript
+import { ConfigStore } from '@kinvolk/headlamp-plugin/lib';
+const store = new ConfigStore<MyConfig>('plugin-name');
+store.get(): MyConfig;
+store.update(partial: Partial<MyConfig>): void;
+store.useConfig(): () => MyConfig;
+```
+
+### Pre-bundled (no package.json entry needed)
+react, react-dom, react-router-dom, @iconify/react, react-redux, @material-ui/core, @material-ui/styles, lodash, notistack, recharts, monaco-editor
+
+---
+
+## CRD Class Pattern
+
+```typescript
+import { ApiProxy, K8s } from '@kinvolk/headlamp-plugin/lib';
+const { apiFactoryWithNamespace } = ApiProxy;
+const { KubeObject } = K8s.cluster;
+type KubeObjectInterface = K8s.cluster.KubeObjectInterface;
+
+interface MyResourceInterface extends KubeObjectInterface {
+  spec: MySpec;
+  status?: MyStatus;
+}
+
+export class MyResource extends KubeObject<MyResourceInterface> {
+  static apiEndpoint = apiFactoryWithNamespace('mygroup.io', 'v1', 'myresources');
+  static get className(): string { return 'MyResource'; }
+  get spec(): MySpec { return this.jsonData.spec; }
+  get status(): MyStatus | undefined { return this.jsonData.status; }
+}
+```
+
+---
+
+## Plugin Entry Point Pattern
+
+```typescript
+// 1. Sidebar (parent → children)
+registerSidebarEntry({ parent: null, name: 'my-plugin', label: 'My Plugin', icon: 'mdi:icon', url: '/mypath' });
+registerSidebarEntry({ parent: 'my-plugin', name: 'my-list', label: 'Resources', url: '/mypath' });
+
+// 2. Routes wrapped in ApiErrorBoundary
+registerRoute({
+  path: '/mypath/:namespace?/:name?',
+  sidebar: 'my-list',
+  component: () => <ApiErrorBoundary><MyListPage /></ApiErrorBoundary>,
+  exact: true, name: 'my-resource',
+});
+
+// 3. Detail injection wrapped in GenericErrorBoundary
+registerDetailsViewSection(({ resource }) => {
+  if (resource?.kind !== 'Secret') return null;
+  return <GenericErrorBoundary><MySection resource={resource} /></GenericErrorBoundary>;
+});
+
+// 4. Settings
+registerPluginSettings('my-plugin', SettingsPage, true);
+```
+
+---
+
+## Headlamp Test Mocks
+
+```typescript
+vi.mock('@kinvolk/headlamp-plugin/lib', () => ({
+  ApiProxy: { request: vi.fn().mockResolvedValue({}) },
+  K8s: { ResourceClasses: {}, cluster: { KubeObject: class {} } },
+}));
+
+vi.mock('@kinvolk/headlamp-plugin/lib/CommonComponents', () => ({
+  SectionBox: ({ children, title }: any) => <div data-testid="section-box">{title}{children}</div>,
+  SimpleTable: ({ data, columns }: any) => (
+    <table><tbody>{data.map((d: any, i: number) =>
+      <tr key={i}>{columns.map((c: any, j: number) => <td key={j}>{c.getter(d)}</td>)}</tr>
+    )}</tbody></table>
+  ),
+  NameValueTable: ({ rows }: any) => (
+    <dl>{rows.filter((r: any) => !r.hide).map((r: any) =>
+      <div key={r.name}><dt>{r.name}</dt><dd>{r.value}</dd></div>
+    )}</dl>
+  ),
+  StatusLabel: ({ children, status }: any) => <span data-status={status}>{children}</span>,
+  Link: ({ children }: any) => <a>{children}</a>,
+  Loader: ({ title }: any) => <div data-testid="loader">{title}</div>,
+}));
+```
+
+---
+
+## Theming & Dark Mode
+
+Headlamp supports light and dark themes. **Never hardcode colors.** Use CSS custom properties with light-mode fallbacks:
+
+### Required CSS variables for inline styles
+```typescript
+// Text
+color: 'var(--mui-palette-text-primary)'
+color: 'var(--mui-palette-text-secondary, #666)'
+
+// Backgrounds
+backgroundColor: 'var(--mui-palette-background-default, #fafafa)'
+backgroundColor: 'var(--mui-palette-background-paper, #fff)'
+
+// Borders
+border: '1px solid var(--mui-palette-divider, #e0e0e0)'
+
+// Interactive
+backgroundColor: 'var(--mui-palette-primary-main, #1976d2)'
+color: 'var(--mui-palette-primary-contrastText, #fff)'
+
+// Disabled states
+backgroundColor: 'var(--mui-palette-action-disabledBackground, #e0e0e0)'
+color: 'var(--mui-palette-action-disabled, #9e9e9e)'
+
+// Links
+color: 'var(--link-color, #1976d2)'
+```
+
+### Common mistakes to avoid
+- **NEVER** use raw `#fff`, `#000`, `#333`, `#666` etc. without wrapping in `var(--mui-palette-*)`
+- **NEVER** use `rgba(0,0,0,0.5)` for overlays without a variable — this is the one exception where raw rgba is acceptable (backdrop overlays)
+- **NEVER** assume white backgrounds or dark text — always use `background-paper`/`text-primary`
+- For `<style>` blocks (drawers, etc.), use the same CSS variables in the stylesheet
+- Fallback values after the comma are for environments where the variable isn't set — always use the light-mode default
+
+### Form inputs in custom components
+```typescript
+const inputStyle = {
+  border: '1px solid var(--mui-palette-divider, #ccc)',
+  borderRadius: '4px',
+  backgroundColor: 'var(--mui-palette-background-paper)',
+  color: 'var(--mui-palette-text-primary)',
+};
+```
+
+---
+
+## Code Quality Rules
+
+1. **Functional components only** — no class components (except ErrorBoundary)
+2. **TypeScript strict mode** — no `any`; use `unknown` + type guards at API boundaries
+3. **Headlamp CommonComponents + MUI** — `@mui/material` is available via Headlamp's bundled deps; no other UI libraries (no Ant Design, etc.)
+4. **Inline CSS only** — `style={{}}` props, CSS variables (`var(--mui-palette-*)`) for theming
+5. **Accessibility** — `aria-label`, `aria-modal`, `role="dialog"`, `aria-live` for dynamic content
+6. **Cancellation safety** — async effects must check a `cancelled` flag
+7. **Error handling** — Result types in lib/, ErrorBoundaries wrapping components (ApiErrorBoundary for routes, GenericErrorBoundary for injected sections)
+8. **Tests** — vitest + @testing-library/react, mock Headlamp APIs per above pattern
+9. Run `npm run tsc` and `npm test` after implementation changes

.claude/agents/multi-agent-coordinator.md

@@ -0,0 +1,24 @@
+---
+name: multi-agent-coordinator
+description: Use when coordinating multiple concurrent agents that need to communicate, share state, synchronize work, and handle distributed failures across a system.
+tools: Read, Write, Edit, Glob, Grep
+model: opus
+---
+
+You are a senior multi-agent coordinator with expertise in orchestrating complex distributed workflows. Your focus spans inter-agent communication, task dependency management, parallel execution control, and fault tolerance with emphasis on ensuring efficient, reliable coordination across large agent teams.
+
+When invoked:
+1. Query context manager for workflow requirements and agent states
+2. Review communication patterns, dependencies, and resource constraints
+3. Analyze coordination bottlenecks, deadlock risks, and optimization opportunities
+4. Implement robust multi-agent coordination strategies
+
+Multi-agent coordination checklist:
+- Coordination overhead < 5% maintained
+- Deadlock prevention 100% ensured
+- Message delivery guaranteed thoroughly
+- Scalability to 100+ agents verified
+- Fault tolerance built-in properly
+- Monitoring comprehensive continuously
+- Recovery automated effectively
+- Performance optimal consistently

.claude/settings.local.json

@@ -0,0 +1,22 @@
+{
+  "permissions": {
+    "allow": [
+      "Bash(done)",
+      "Bash(npm install:*)",
+      "Bash(git add:*)",
+      "Bash(git commit:*)",
+      "Bash(git push:*)",
+      "Bash(gh workflow:*)",
+      "Bash(gh run:*)",
+      "Bash(npm run:*)",
+      "Bash(npm ci:*)",
+      "Bash(npm test:*)"
+    ]
+  },
+  "enabledMcpjsonServers": [
+    "github",
+    "kubernetes",
+    "flux",
+    "playwright"
+  ]
+}

.eslintrc.js

@@ -0,0 +1,8 @@
+module.exports = {
+  extends: ['@headlamp-k8s/eslint-config'],
+  rules: {
+    // Prettier handles indentation; the shared config's indent rule
+    // conflicts with Prettier's JSX ternary formatting.
+    indent: 'off',
+  },
+};

.github/FUNDING.yml

@@ -0,0 +1 @@
+github: [privilegedescalation]

.github/workflows/ci.yaml

@@ -0,0 +1,13 @@
+name: CI
+
+on:
+  push:
+    branches: [main]
+  pull_request:
+    branches: [main]
+  workflow_dispatch:
+  workflow_call:
+
+jobs:
+  ci:
+    uses: privilegedescalation/.github/.github/workflows/plugin-ci.yaml@main

.github/workflows/dual-approval.yaml

@@ -0,0 +1,18 @@
+name: Dual Approval (CTO + QA)
+
+# Calls the shared dual-approval-check workflow.
+# Passes when both privilegedescalation-cto and privilegedescalation-qa
+# have approved the PR. Add "Dual Approval (CTO + QA)" to required_status_checks
+# in branch protection to enforce this gate.
+
+on:
+  pull_request_review:
+    types: [submitted, dismissed]
+  pull_request:
+    branches: [main]
+    types: [opened, reopened, synchronize]
+
+jobs:
+  dual-approval:
+    uses: privilegedescalation/.github/.github/workflows/dual-approval-check.yaml@main
+    secrets: inherit

.github/workflows/e2e.yaml

@@ -0,0 +1,103 @@
+name: E2E Tests
+
+on:
+  push:
+    branches: [main]
+  pull_request:
+    branches: [main]
+  workflow_dispatch:
+
+permissions:
+  contents: read
+
+# Only one E2E run at a time: the shared E2E_RELEASE (headlamp-e2e) in
+# privilegedescalation-dev cannot be shared across concurrent runs.
+# cancel-in-progress: false (queue, don't cancel) — cancelling in-flight
+# runs may skip the if: always() teardown, leaving dangling cluster resources.
+concurrency:
+  group: e2e-${{ github.repository }}
+  cancel-in-progress: false
+
+env:
+  E2E_NAMESPACE: privilegedescalation-dev
+  E2E_RELEASE: headlamp-e2e
+  # Pin to a known-good Headlamp version. Using :latest is risky because
+  # the tag can change between CI runs, causing flaky failures when a newer
+  # image is pulled on some nodes but not others (IfNotPresent pull policy).
+  # Update this when Headlamp is upgraded in production (kube-system).
+  HEADLAMP_VERSION: v0.40.1
+
+jobs:
+  e2e:
+    runs-on: runners-privilegedescalation
+    timeout-minutes: 15
+
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v6
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v6
+        with:
+          node-version: '22'
+          cache: 'npm'
+
+      - name: Setup kubectl
+        uses: azure/setup-kubectl@v4
+
+      - name: Install dependencies
+        run: npm ci
+
+      - name: Build plugin
+        run: npx @kinvolk/headlamp-plugin build
+
+      - name: Deploy E2E Headlamp instance
+        run: scripts/deploy-e2e-headlamp.sh
+
+      - name: Load E2E environment
+        run: |
+          if [ -f .env.e2e ]; then
+            cat .env.e2e >> "$GITHUB_ENV"
+          else
+            echo "::error::deploy-e2e-headlamp.sh did not produce .env.e2e"
+            exit 1
+          fi
+
+      - name: Install Playwright browsers
+        run: npx playwright install --with-deps chromium
+
+      - name: Run E2E tests
+        run: npm run e2e
+        env:
+          HEADLAMP_URL: ${{ env.HEADLAMP_URL }}
+          HEADLAMP_TOKEN: ${{ env.HEADLAMP_TOKEN }}
+
+      - name: Collect deployment diagnostics on failure
+        if: failure()
+        run: |
+          echo "=== Pod state ==="
+          kubectl get pods -n "$E2E_NAMESPACE" -l "app.kubernetes.io/instance=$E2E_RELEASE" 2>&1 || true
+          echo "=== Pod describe ==="
+          kubectl describe pods -n "$E2E_NAMESPACE" -l "app.kubernetes.io/instance=$E2E_RELEASE" 2>&1 || true
+          echo "=== Recent namespace events ==="
+          kubectl get events -n "$E2E_NAMESPACE" --sort-by='.lastTimestamp' 2>&1 | tail -20 || true
+
+      - name: Teardown E2E instance
+        if: always()
+        run: scripts/teardown-e2e-headlamp.sh
+
+      - name: Upload Playwright report
+        uses: actions/upload-artifact@v7
+        if: failure()
+        with:
+          name: playwright-report
+          path: playwright-report/
+          retention-days: 7
+
+      - name: Upload test results
+        uses: actions/upload-artifact@v7
+        if: failure()
+        with:
+          name: test-results
+          path: test-results/
+          retention-days: 7

.github/workflows/release.yaml

@@ -0,0 +1,23 @@
+name: Release
+
+on:
+  workflow_dispatch:
+    inputs:
+      version:
+        description: 'Release version (e.g. 1.0.0)'
+        required: true
+        type: string
+
+permissions:
+  contents: write
+  pull-requests: write
+
+jobs:
+  release:
+    uses: privilegedescalation/.github/.github/workflows/plugin-release.yaml@main
+    secrets:
+      RELEASE_APP_ID: ${{ secrets.RELEASE_APP_ID }}
+      RELEASE_APP_PRIVATE_KEY: ${{ secrets.RELEASE_APP_PRIVATE_KEY }}
+    with:
+      version: ${{ inputs.version }}
+      upstream-repo: 'intel/intel-device-plugins-for-kubernetes'

.gitignore

@@ -2,3 +2,7 @@ node_modules/
 dist/
 *.tar.gz
 .playwright-mcp/
+e2e/.auth/state.json
+.env.e2e
+test-results/
+playwright-report/

.mcp.json

@@ -0,0 +1,12 @@
+{
+  "mcpServers": {
+    "github": {
+      "type": "http",
+      "url": "https://api.githubcopilot.com/mcp/",
+      "headers": { "Authorization": "Bearer ${GITHUB_TOKEN}" }
+    },
+    "kubernetes": { "type": "sse", "url": "http://localhost:8080/sse" },
+    "flux": { "type": "sse", "url": "http://localhost:8081/sse" },
+    "playwright": { "type": "sse", "url": "http://localhost:8086/sse" }
+  }
+}

.pluginrc

@@ -0,0 +1 @@
+{}

.prettierrc.js

@@ -0,0 +1 @@
+module.exports = require('@headlamp-k8s/eslint-config/prettier-config');

CLAUDE.md

@@ -0,0 +1,95 @@
+# CLAUDE.md
+
+This file provides guidance to Claude Code (claude.ai/code) when working with code in this repository.
+
+## Project
+
+Headlamp plugin for Intel GPU device plugin visibility and monitoring. Read-only — monitors GpuDevicePlugin CRDs, GPU-capable nodes, pods requesting Intel GPU resources, and real-time power metrics via Prometheus. No cluster write operations.
+
+- **Plugin name**: `intel-gpu`
+- **Target**: Headlamp >= v0.20.0
+- **Data sources**: GpuDevicePlugin CRDs (`deviceplugin.intel.com/v1`), Nodes, Pods (all namespaces), Prometheus (node-exporter i915 hwmon)
+- **Reference plugin**: `../headlamp-kube-vip-plugin`
+
+## Commands
+
+```bash
+npm start          # dev server with hot reload
+npm run build      # production build
+npm run package    # package for headlamp
+npm run tsc        # TypeScript type check (no emit)
+npm run lint       # ESLint
+npm run lint:fix   # ESLint with auto-fix
+npm run format     # Prettier write
+npm run format:check # Prettier check
+npm test           # vitest run
+npm run test:watch # vitest watch mode
+```
+
+All tests and `tsc` must pass before committing.
+
+## Architecture
+
+```
+src/
+├── index.tsx                         # Plugin entry: registerRoute, registerSidebarEntry, registerDetailsViewSection, registerResourceTableColumnsProcessor
+├── api/
+│   ├── k8s.ts                        # Types + helpers (GpuDevicePlugin CRD, Nodes, Pods, type guards, formatters)
+│   ├── k8s.test.ts                   # Tests for k8s helpers (48 test cases)
+│   ├── metrics.ts                    # Prometheus GPU power metrics (node-exporter i915 hwmon)
+│   └── IntelGpuDataContext.tsx       # Shared React context provider with data fetching
+└── components/
+    ├── OverviewPage.tsx               # Dashboard: plugin health, GPU node summary, allocation, active pods
+    ├── DevicePluginsPage.tsx          # GpuDevicePlugin CRD instances with spec/status and daemon pods
+    ├── NodesPage.tsx                  # Per-node GPU type, device count, allocation, workload pods
+    ├── PodsPage.tsx                   # All pods requesting Intel GPU resources with per-container detail
+    ├── MetricsPage.tsx                # Real-time GPU power metrics from Prometheus
+    ├── NodeDetailSection.tsx           # Injected into native Node detail page (capacity, utilization, pods)
+    ├── PodDetailSection.tsx           # Injected into native Pod detail page (GPU requests per container)
+    └── integrations/
+        └── NodeColumns.tsx            # GPU Type and GPU Devices columns for native Nodes table
+```
+
+## Data flow
+
+`IntelGpuDataContext.tsx` uses **two fetching strategies**:
+
+1. **Headlamp hooks** (`K8s.ResourceClasses.*.useList()`) — for Nodes and Pods.
+2. **`ApiProxy.request()`** — for GpuDevicePlugin CRDs and plugin daemon pods (with label selector fallback).
+
+The plugin gracefully degrades when the GpuDevicePlugin CRD is not installed — GPU nodes and pods are still shown based on resource labels and capacity.
+
+## Key constants (src/api/k8s.ts)
+
+- API group: `deviceplugin.intel.com`
+- API version: `v1`
+- GPU resources: `gpu.intel.com/i915`, `gpu.intel.com/xe`, `gpu.intel.com/millicores`, `gpu.intel.com/memory.max`
+- Resource prefix: `gpu.intel.com/`
+- Node labels: `intel.feature.node.kubernetes.io/gpu`, `node-role.kubernetes.io/gpu`, `node-role.kubernetes.io/igpu`
+- Pod selector: `app=intel-gpu-plugin`
+- Prometheus services: `kube-prometheus-stack-prometheus`, `prometheus-operated`, `prometheus` (monitoring namespace, port 9090)
+
+## Code conventions
+
+- Functional React components only — no class components
+- All imports from `@kinvolk/headlamp-plugin/lib` and `@kinvolk/headlamp-plugin/lib/CommonComponents`
+- No additional UI libraries (no MUI direct imports, no Ant Design, etc.)
+- TypeScript strict mode — no `any`, use `unknown` + type guards at API boundaries
+- Context provider (`IntelGpuDataProvider`) wraps each route component in `index.tsx`
+- Tests: vitest + @testing-library/react, mock with `vi.mock('@kinvolk/headlamp-plugin/lib', ...)`
+- `vitest.setup.ts` provides a spec-compliant `localStorage` shim for Node 22+ compatibility
+
+## Testing
+
+Mock pattern for headlamp APIs:
+```typescript
+vi.mock('@kinvolk/headlamp-plugin/lib', () => ({
+  ApiProxy: { request: vi.fn().mockResolvedValue({ items: [] }) },
+  K8s: {
+    ResourceClasses: {
+      Node: { useList: vi.fn(() => [[], null]) },
+      Pod: { useList: vi.fn(() => [[], null]) },
+    },
+  },
+}));
+```

CONTRIBUTING.md

@@ -0,0 +1,36 @@
+# Contributing
+
+Contributions are welcome! Please follow these guidelines.
+
+## Development Setup
+
+```bash
+git clone https://github.com/privilegedescalation/headlamp-intel-gpu-plugin.git
+cd headlamp-intel-gpu-plugin
+npm install
+npm start
+```
+
+## Before Submitting a PR
+
+```bash
+npm run tsc          # TypeScript type check
+npm run lint         # ESLint
+npm run format:check # Prettier
+npm test             # All tests must pass
+```
+
+## Code Style
+
+- TypeScript strict mode (no `any`)
+- Functional React components only
+- All UI from `@kinvolk/headlamp-plugin/lib/CommonComponents`
+- Tests with vitest + @testing-library/react
+
+## Commit Messages
+
+Use conventional commit format:
+- `feat:` new features
+- `fix:` bug fixes
+- `chore:` maintenance
+- `docs:` documentation

INSTALLATION_POLICY.md

@@ -0,0 +1,24 @@
+# Installation Policy
+
+## Approved Installation Method
+
+**The ONLY approved method for installing this plugin is via [Artifact Hub](https://artifacthub.io/) using the Headlamp plugin installer.**
+
+No other installation method is acceptable. This includes but is not limited to:
+
+- Direct installation from GitHub release assets
+- Manual npm pack / tarball extraction
+- initContainer workarounds that bypass Artifact Hub
+- Direct file copy or sidecar injection
+
+## Enforcement
+
+All deployment configurations, CI/CD pipelines, and documentation MUST reference Artifact Hub as the sole plugin distribution channel. Any pull request that introduces an alternative installation method will be rejected.
+
+## Rationale
+
+Artifact Hub provides verified checksums, consistent versioning, and a standard discovery mechanism for the CNCF ecosystem. Bypassing it introduces security and integrity risks.
+
+---
+
+*This policy is set by the CTO and approved by the CEO of Privileged Escalation.*

LICENSE

@@ -0,0 +1,190 @@
+                                 Apache License
+                           Version 2.0, January 2004
+                        http://www.apache.org/licenses/
+
+   TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION
+
+   1. Definitions.
+
+      "License" shall mean the terms and conditions for use, reproduction,
+      and distribution as defined by Sections 1 through 9 of this document.
+
+      "Licensor" shall mean the copyright owner or entity authorized by
+      the copyright owner that is granting the License.
+
+      "Legal Entity" shall mean the union of the acting entity and all
+      other entities that control, are controlled by, or are under common
+      control with that entity. For the purposes of this definition,
+      "control" means (i) the power, direct or indirect, to cause the
+      direction or management of such entity, whether by contract or
+      otherwise, or (ii) ownership of fifty percent (50%) or more of the
+      outstanding shares, or (iii) beneficial ownership of such entity.
+
+      "You" (or "Your") shall mean an individual or Legal Entity
+      exercising permissions granted by this License.
+
+      "Source" form shall mean the preferred form for making modifications,
+      including but not limited to software source code, documentation
+      source, and configuration files.
+
+      "Object" form shall mean any form resulting from mechanical
+      transformation or translation of a Source form, including but
+      not limited to compiled object code, generated documentation,
+      and conversions to other media types.
+
+      "Work" shall mean the work of authorship, whether in Source or
+      Object form, made available under the License, as indicated by a
+      copyright notice that is included in or attached to the work
+      (an example is provided in the Appendix below).
+
+      "Derivative Works" shall mean any work, whether in Source or Object
+      form, that is based on (or derived from) the Work and for which the
+      editorial revisions, annotations, elaborations, or other modifications
+      represent, as a whole, an original work of authorship. For the purposes
+      of this License, Derivative Works shall not include works that remain
+      separable from, or merely link (or bind by name) to the interfaces of,
+      the Work and Derivative Works thereof.
+
+      "Contribution" shall mean any work of authorship, including
+      the original version of the Work and any modifications or additions
+      to that Work or Derivative Works thereof, that is intentionally
+      submitted to the Licensor for inclusion in the Work by the copyright owner
+      or by an individual or Legal Entity authorized to submit on behalf of
+      the copyright owner. For the purposes of this definition, "submitted"
+      means any form of electronic, verbal, or written communication sent
+      to the Licensor or its representatives, including but not limited to
+      communication on electronic mailing lists, source code control systems,
+      and issue tracking systems that are managed by, or on behalf of, the
+      Licensor for the purpose of discussing and improving the Work, but
+      excluding communication that is conspicuously marked or otherwise
+      designated in writing by the copyright owner as "Not a Contribution."
+
+      "Contributor" shall mean Licensor and any individual or Legal Entity
+      on behalf of whom a Contribution has been received by the Licensor and
+      subsequently incorporated within the Work.
+
+   2. Grant of Copyright License. Subject to the terms and conditions of
+      this License, each Contributor hereby grants to You a perpetual,
+      worldwide, non-exclusive, no-charge, royalty-free, irrevocable
+      copyright license to reproduce, prepare Derivative Works of,
+      publicly display, publicly perform, sublicense, and distribute the
+      Work and such Derivative Works in Source or Object form.
+
+   3. Grant of Patent License. Subject to the terms and conditions of
+      this License, each Contributor hereby grants to You a perpetual,
+      worldwide, non-exclusive, no-charge, royalty-free, irrevocable
+      (except as stated in this section) patent license to make, have made,
+      use, offer to sell, sell, import, and otherwise transfer the Work,
+      where such license applies only to those patent claims licensable
+      by such Contributor that are necessarily infringed by their
+      Contribution(s) alone or by combination of their Contribution(s)
+      with the Work to which such Contribution(s) was submitted. If You
+      institute patent litigation against any entity (including a
+      cross-claim or counterclaim in a lawsuit) alleging that the Work
+      or a Contribution incorporated within the Work constitutes direct
+      or contributory patent infringement, then any patent licenses
+      granted to You under this License for that Work shall terminate
+      as of the date such litigation is filed.
+
+   4. Redistribution. You may reproduce and distribute copies of the
+      Work or Derivative Works thereof in any medium, with or without
+      modifications, and in Source or Object form, provided that You
+      meet the following conditions:
+
+      (a) You must give any other recipients of the Work or
+          Derivative Works a copy of this License; and
+
+      (b) You must cause any modified files to carry prominent notices
+          stating that You changed the files; and
+
+      (c) You must retain, in the Source form of any Derivative Works
+          that You distribute, all copyright, patent, trademark, and
+          attribution notices from the Source form of the Work,
+          excluding those notices that do not pertain to any part of
+          the Derivative Works; and
+
+      (d) If the Work includes a "NOTICE" text file as part of its
+          distribution, then any Derivative Works that You distribute must
+          include a readable copy of the attribution notices contained
+          within such NOTICE file, excluding any notices that do not
+          pertain to any part of the Derivative Works, in at least one
+          of the following places: within a NOTICE text file distributed
+          as part of the Derivative Works; within the Source form or
+          documentation, if provided along with the Derivative Works; or,
+          within a display generated by the Derivative Works, if and
+          wherever such third-party notices normally appear. The contents
+          of the NOTICE file are for informational purposes only and
+          do not modify the License. You may add Your own attribution
+          notices within Derivative Works that You distribute, alongside
+          or as an addendum to the NOTICE text from the Work, provided
+          that such additional attribution notices cannot be construed
+          as modifying the License.
+
+      You may add Your own copyright statement to Your modifications and
+      may provide additional or different license terms and conditions
+      for use, reproduction, or distribution of Your modifications, or
+      for any such Derivative Works as a whole, provided Your use,
+      reproduction, and distribution of the Work otherwise complies with
+      the conditions stated in this License.
+
+   5. Submission of Contributions. Unless You explicitly state otherwise,
+      any Contribution intentionally submitted for inclusion in the Work
+      by You to the Licensor shall be under the terms and conditions of
+      this License, without any additional terms or conditions.
+      Notwithstanding the above, nothing herein shall supersede or modify
+      the terms of any separate license agreement you may have executed
+      with Licensor regarding such Contributions.
+
+   6. Trademarks. This License does not grant permission to use the trade
+      names, trademarks, service marks, or product names of the Licensor,
+      except as required for reasonable and customary use in describing the
+      origin of the Work and reproducing the content of the NOTICE file.
+
+   7. Disclaimer of Warranty. Unless required by applicable law or
+      agreed to in writing, Licensor provides the Work (and each
+      Contributor provides its Contributions) on an "AS IS" BASIS,
+      WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
+      implied, including, without limitation, any warranties or conditions
+      of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A
+      PARTICULAR PURPOSE. You are solely responsible for determining the
+      appropriateness of using or redistributing the Work and assume any
+      risks associated with Your exercise of permissions under this License.
+
+   8. Limitation of Liability. In no event and under no legal theory,
+      whether in tort (including negligence), contract, or otherwise,
+      unless required by applicable law (such as deliberate and grossly
+      negligent acts) or agreed to in writing, shall any Contributor be
+      liable to You for damages, including any direct, indirect, special,
+      incidental, or consequential damages of any character arising as a
+      result of this License or out of the use or inability to use the
+      Work (including but not limited to damages for loss of goodwill,
+      work stoppage, computer failure or malfunction, or any and all
+      other commercial damages or losses), even if such Contributor
+      has been advised of the possibility of such damages.
+
+   9. Accepting Warranty or Additional Liability. While redistributing
+      the Work or Derivative Works thereof, You may choose to offer,
+      and charge a fee for, acceptance of support, warranty, indemnity,
+      or other liability obligations and/or rights consistent with this
+      License. However, in accepting such obligations, You may act only
+      on Your own behalf and on Your sole responsibility, not on behalf
+      of any other Contributor, and only if You agree to indemnify,
+      defend, and hold each Contributor harmless for any liability
+      incurred by, or claims asserted against, such Contributor by reason
+      of your accepting any such warranty or additional liability.
+
+   END OF TERMS AND CONDITIONS
+
+   Copyright 2025 privilegedescalation
+
+   Licensed under the Apache License, Version 2.0 (the "License");
+   you may not use this file except in compliance with the License.
+   You may obtain a copy of the License at
+
+       http://www.apache.org/licenses/LICENSE-2.0
+
+   Unless required by applicable law or agreed to in writing, software
+   distributed under the License is distributed on an "AS IS" BASIS,
+   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+   See the License for the specific language governing permissions and
+   limitations under the License.

README.md

@@ -0,0 +1,88 @@
+# headlamp-intel-gpu-plugin
+
+[![CI](https://github.com/privilegedescalation/headlamp-intel-gpu-plugin/actions/workflows/ci.yaml/badge.svg)](https://github.com/privilegedescalation/headlamp-intel-gpu-plugin/actions/workflows/ci.yaml)
+[![License](https://img.shields.io/badge/License-Apache%202.0-blue.svg)](https://opensource.org/licenses/Apache-2.0)
+
+A [Headlamp](https://headlamp.dev/) plugin providing visibility into [Intel GPU device plugin](https://intel.github.io/intel-device-plugins-for-kubernetes/) deployments on Kubernetes.
+
+## Features
+
+- **Overview Dashboard** — Plugin health, GPU node summary, allocation bar, active GPU pods
+- **Device Plugins** — GpuDevicePlugin CRD instances with spec/status and daemon pod health
+- **GPU Nodes** — Per-node GPU type (discrete/integrated), device count, allocation, workload pods
+- **GPU Pods** — All pods requesting Intel GPU resources with per-container detail
+- **Metrics** — Real-time GPU power draw (W) and TDP via Prometheus node-exporter i915 hwmon
+- **Node Detail Integration** — Intel GPU section injected into native Headlamp Node detail views
+- **Pod Detail Integration** — GPU resource requests/limits injected into native Pod detail views
+- **Nodes Table Columns** — GPU Type and GPU Devices columns added to native Nodes table
+
+## Installation
+
+Search for `headlamp-intel-gpu` in the Headlamp Plugin Manager (Settings → Plugins → Catalog).
+
+## Requirements
+
+- Headlamp >= v0.20.0
+- Intel GPU device plugin deployed (optional — plugin gracefully degrades without it)
+- Optional: Node Feature Discovery with Intel GPU labels
+- Optional: kube-prometheus-stack with node-exporter for GPU power metrics
+
+## RBAC
+
+This plugin is **read-only** and requires the following permissions:
+
+| Resource | API Group | Verbs |
+|----------|-----------|-------|
+| nodes | v1 | list, get, watch |
+| pods | v1 | list, get, watch |
+| gpudeviceplugins | deviceplugin.intel.com/v1 | list, get |
+
+For metrics, Prometheus must be accessible via the Headlamp API proxy in the `monitoring` namespace.
+
+## Architecture
+
+```
+src/
+├── index.tsx                    # Plugin entry point
+├── api/
+│   ├── k8s.ts                   # Types and helper functions
+│   ├── metrics.ts               # Prometheus GPU metrics
+│   └── IntelGpuDataContext.tsx  # React context provider
+└── components/
+    ├── OverviewPage.tsx          # Dashboard
+    ├── DevicePluginsPage.tsx     # Device plugin CRDs
+    ├── NodesPage.tsx             # GPU nodes
+    ├── PodsPage.tsx              # GPU pods
+    ├── MetricsPage.tsx           # Power metrics
+    ├── NodeDetailSection.tsx     # Injected into Node detail view
+    ├── PodDetailSection.tsx      # Injected into Pod detail view
+    └── integrations/
+        └── NodeColumns.tsx       # Nodes table columns
+```
+
+## Development
+
+```bash
+npm install
+npm start          # dev server
+npm test           # run tests
+npm run tsc        # type check
+npm run lint       # ESLint
+```
+
+## Troubleshooting
+
+| Symptom | Cause | Fix |
+|---------|-------|-----|
+| No GPU nodes shown | No Intel GPU labels or resources on nodes | Install Intel Node Feature Discovery or Intel GPU device plugin |
+| CRD not available warning | GpuDevicePlugin CRD not installed | Install Intel device plugins operator — plugin still works without it |
+| No metrics data | Prometheus not found | Deploy kube-prometheus-stack in the `monitoring` namespace |
+| Metrics show only discrete GPUs | Integrated GPUs lack hwmon | Expected — iGPU driver doesn't expose hwmon power data |
+
+## Contributing
+
+See [CONTRIBUTING.md](CONTRIBUTING.md) for development guidelines.
+
+## License
+
+Apache License 2.0. See [LICENSE](LICENSE) for details.

SECURITY.md

@@ -0,0 +1,22 @@
+# Security Policy
+
+## Supported Versions
+
+| Version | Supported |
+|---------|-----------|
+| latest  | Yes       |
+
+## Plugin Scope
+
+This plugin is **read-only**. It does not perform any write operations against the Kubernetes cluster. It reads:
+
+- Nodes
+- Pods (all namespaces)
+- GpuDevicePlugin CRDs (`deviceplugin.intel.com/v1`)
+- Prometheus metrics (via API proxy in `monitoring` namespace)
+
+All data is fetched through Headlamp's built-in API proxy, which respects the user's existing RBAC permissions.
+
+## Reporting a Vulnerability
+
+Please report security vulnerabilities by opening a private issue or emailing the maintainers directly.

artifacthub-pkg.yml

@@ -1,5 +1,5 @@
-version: "0.1.0"
-name: headlamp-intel-gpu-plugin
+version: "1.0.0"
+name: headlamp-intel-gpu
 displayName: Intel GPU
 description: >-
   Headlamp plugin for Intel GPU device plugin visibility and monitoring.
@@ -7,13 +7,45 @@ description: >-
   allocation, pods requesting Intel GPU resources, and injects Intel GPU
   sections into native Node and Pod detail pages. Supports discrete (i915),
   Xe, and integrated GPU nodes with graceful degradation when the device
-  plugin operator is not installed.
+  plugin operator is not installed. Includes a Metrics page showing real-time
+  GPU power draw and TDP from node-exporter i915 hwmon metrics (discrete GPU
+  nodes only).
 createdAt: "2026-02-18T00:00:00Z"
 license: Apache-2.0
 category: monitoring-logging
 
 homeURL: https://github.com/privilegedescalation/headlamp-intel-gpu-plugin
-appVersion: "0.1.0"
+appVersion: "0.35.0"
+
+install: |
+  ## Installation
+
+  ### Prerequisites
+
+  1. [Headlamp](https://headlamp.dev) v0.20.0 or later
+  2. [Intel Device Plugins for Kubernetes](https://intel.github.io/intel-device-plugins-for-kubernetes/) operator installed in your cluster (required for GPU node discovery and CRD visibility)
+
+  ### Install via Headlamp Plugin Catalog
+
+  1. Open Headlamp and navigate to **Settings → Plugin Catalog**
+  2. Search for **"Intel GPU"**
+  3. Click **Install** and restart Headlamp when prompted
+
+  The plugin is sourced directly from [ArtifactHub](https://artifacthub.io/packages/headlamp/headlamp/headlamp-intel-gpu).
+
+  ## Usage
+
+  After installation, the Intel GPU plugin adds:
+  - An **Overview** page showing cluster-level GPU counts, type distribution (discrete/integrated/Xe/unknown), and pod allocation summary
+  - A **Nodes** page with per-node GPU capacity, allocatable counts, and allocation bars
+  - A **Pods** page listing GPU-requesting pods grouped by phase (Running/Pending/Failed)
+  - A **Device Plugins** page showing GpuDevicePlugin CRD status
+  - A **Metrics** page with real-time power draw and TDP from i915 hwmon metrics (discrete GPU nodes only)
+  - Injected GPU sections on native **Node** and **Pod** detail pages
+
+  The plugin degrades gracefully when the Intel Device Plugins operator is not installed.
+
+  For more information, see the [README](https://github.com/privilegedescalation/headlamp-intel-gpu-plugin/blob/main/README.md).
 
 keywords:
   - headlamp
@@ -43,25 +75,31 @@ links:
     url: https://intel.github.io/intel-device-plugins-for-kubernetes/
 
 changes:
-  - kind: added
-    description: "Overview dashboard: plugin health, GPU node summary, allocation bar, active GPU pods"
-  - kind: added
-    description: "Device Plugins page: GpuDevicePlugin CRD instances with spec/status and daemon pods"
-  - kind: added
-    description: "GPU Nodes page: per-node GPU type, device count, allocation, workload pods"
-  - kind: added
-    description: "GPU Pods page: all pods requesting Intel GPU resources with per-container detail"
-  - kind: added
-    description: "Node detail injection: Intel GPU section on native Node detail pages (capacity, allocatable, utilization, active pods)"
-  - kind: added
-    description: "Pod detail injection: GPU resource requests/limits per container on native Pod detail pages"
-  - kind: added
-    description: "Nodes table: GPU Type and GPU Devices columns injected into native Nodes table"
-  - kind: added
-    description: "App bar health badge: hidden when no Intel GPU plugin detected"
+  - kind: fixed
+    description: "Remove unsafe `as any` casts in NodeDetailSection"
+  - kind: fixed
+    description: "Fix MetricsPage fetch cancellation safety (prevent setState on unmounted component)"
+  - kind: fixed
+    description: "Fix typo gpuPluinPods → gpuPluginPods in data context"
+  - kind: changed
+    description: "Move extractJsonData utility to module scope to avoid recreation on every render"
+  - kind: removed
+    description: "Remove dead AppBarGpuBadge component"
+  - kind: fixed
+    description: "Fix appVersion mismatch and inaccurate metrics description in Artifact Hub metadata"
+  - kind: fixed
+    description: "Resolve ESLint/Prettier indent conflict by disabling ESLint indent rule (Prettier is formatting authority)"
+
+screenshots:
+  - title: Overview — cluster GPU summary, operator status, and active workloads
+    url: https://raw.githubusercontent.com/privilegedescalation/headlamp-intel-gpu-plugin/main/docs/screenshots/01-overview.svg
+  - title: GPU Nodes — per-node GPU type, capacity, and allocation bars
+    url: https://raw.githubusercontent.com/privilegedescalation/headlamp-intel-gpu-plugin/main/docs/screenshots/02-nodes.svg
+  - title: Metrics — real-time GPU power draw and TDP utilization (discrete GPUs)
+    url: https://raw.githubusercontent.com/privilegedescalation/headlamp-intel-gpu-plugin/main/docs/screenshots/03-metrics.svg
 
 annotations:
-  headlamp/plugin/archive-url: "https://github.com/privilegedescalation/headlamp-intel-gpu-plugin/releases/download/v0.1.0/headlamp-intel-gpu-plugin-0.1.0.tar.gz"
-  headlamp/plugin/archive-checksum: "sha256:d6a50567d0f9e537f0edadac334d6a03cd182f5b64b47264577f2213fd882687"
+  headlamp/plugin/archive-url: "https://github.com/privilegedescalation/headlamp-intel-gpu-plugin/releases/download/v1.0.0/intel-gpu-1.0.0.tar.gz"
+  headlamp/plugin/archive-checksum: sha256:93d6c531e7c12440c9625138f0645fc0c3521b574d0089492759699b324943f0
   headlamp/plugin/version-compat: ">=0.20.0"
   headlamp/plugin/distro-compat: "in-cluster,web,app"

artifacthub-repo.yml

@@ -1,5 +1,5 @@
 # Artifact Hub repository metadata
-repositoryID: c927788f-9d34-49d9-a18c-e6f78951bdfd
+repositoryID: 3c97f78a-26e3-4e8a-89e7-29884602e3d7
 
 owners:
   - name: privilegedescalation

docs/architecture/adr/001-react-context-state.md

@@ -0,0 +1,52 @@
+# ADR 001: React Context for Centralized GPU State
+
+**Status**: Accepted
+
+**Date**: 2026-03-05
+
+**Deciders**: Development Team
+
+---
+
+## Context
+
+The Intel GPU plugin needs to share GPU-related data across 5 page views (Overview, DevicePlugins, Nodes, Pods, Metrics) and 2 detail view sections (Node, Pod). Data includes GPU nodes (identified by node labels and capacity fields), GPU pods, GpuDevicePlugin CRD instances, and plugin DaemonSet pods.
+
+The `IntelGpuDataProvider` context holds all derived GPU state. Child components access data via `useIntelGpuContext()`. The context collects errors from three streams (node hook error, pod hook error, async CRD fetch error) into a `string[]` joined with `';'` into a single error string.
+
+---
+
+## Decision
+
+Use a single `IntelGpuDataProvider` React Context that wraps every route and every `registerDetailsViewSection` call in `index.tsx`. All GPU-derived state is computed in the provider and exposed via context.
+
+---
+
+## Consequences
+
+- ✅ Single source of truth for all GPU data
+- ✅ All views share consistent state
+- ✅ Error aggregation from multiple sources into a unified error string
+- ✅ Refresh mechanism updates everything atomically
+- ⚠️ All consumers re-render on any data change
+- ⚠️ Monolithic provider couples all GPU state together
+
+The negative consequences are mitigated by the fact that GPU data updates infrequently in practice, so unnecessary re-renders are rare.
+
+---
+
+## Alternatives Considered
+
+1. **Per-page data fetching** — Rejected. Would duplicate complex GPU node/pod filtering logic across each of the 5 pages and 2 detail sections.
+
+2. **Multiple contexts (NodesContext, PodsContext, CRDContext)** — Rejected. GPU data is highly cross-referenced (e.g., GPU pods reference GPU nodes, CRD instances relate to DaemonSet pods). Splitting contexts would require complex cross-context coordination.
+
+3. **External state library (Redux, Zustand, etc.)** — Rejected. External state libraries are not available in the Headlamp plugin runtime environment.
+
+---
+
+## Changelog
+
+| Date | Change |
+|------|--------|
+| 2026-03-05 | Initial decision accepted |

docs/architecture/adr/002-dual-data-fetching.md

@@ -0,0 +1,59 @@
+# ADR 002: Dual Data Fetching Strategy (Hooks + ApiProxy)
+
+**Status**: Accepted
+
+**Date**: 2026-03-05
+
+**Deciders**: Development Team
+
+---
+
+## Context
+
+The plugin needs data from two categories of Kubernetes resources:
+
+- **Standard resources**: Nodes and Pods, for which Headlamp provides reactive `useList()` hooks via built-in resource classes.
+- **Custom resources**: GpuDevicePlugin CRD (under `deviceplugin.intel.com/v1`) and DaemonSet pods with specific labels, for which Headlamp does not have built-in support.
+
+Headlamp provides reactive `useList()` hooks for standard resource classes but does not have built-in support for custom CRDs. The plugin uses three possible label selectors for DaemonSet pod discovery to handle different deployment configurations.
+
+---
+
+## Decision
+
+Implement a two-track data fetching strategy within the context provider:
+
+1. **Track 1 (Reactive)**: Use `K8s.ResourceClasses.Node.useList()` and `K8s.ResourceClasses.Pod.useList({namespace:''})` for standard resources. These are reactive to cluster changes and automatically update when resources are created, modified, or deleted.
+
+2. **Track 2 (Imperative)**: Use `ApiProxy.request()` inside a `useEffect` keyed on `refreshKey` for GpuDevicePlugin CRDs and DaemonSet pods. The `refreshKey` is incremented by the `refresh()` function exposed through the context.
+
+---
+
+## Consequences
+
+- ✅ Leverages Headlamp's reactive hooks for standard resources with automatic updates
+- ✅ Flexible `ApiProxy` for custom CRDs without needing to register custom resource classes
+- ✅ Refresh mechanism provides manual control over imperative fetches
+- ✅ Clean separation of reactive vs imperative data sources
+- ⚠️ Two different update mechanisms (hooks auto-update vs manual refresh for CRDs)
+- ⚠️ CRD data may lag behind hook data between refreshes
+
+The negative consequences are mitigated by providing a manual refresh button in the UI, allowing users to force an update of imperative data when needed.
+
+---
+
+## Alternatives Considered
+
+1. **All ApiProxy (no hooks)** — Rejected. Loses reactivity for standard resources, meaning Node and Pod changes would not be reflected until a manual refresh.
+
+2. **All hooks (register CRD as custom resource class)** — Rejected. Headlamp's `KubeObject` registration is complex for read-only CRD access and would add unnecessary coupling to Headlamp internals.
+
+3. **Single useEffect for everything** — Rejected. Loses the reactivity benefit for Nodes and Pods, and would require manual refresh for all data instead of just CRDs.
+
+---
+
+## Changelog
+
+| Date | Change |
+|------|--------|
+| 2026-03-05 | Initial decision accepted |

docs/architecture/adr/003-graceful-crd-degradation.md

@@ -0,0 +1,53 @@
+# ADR 003: Graceful CRD Degradation
+
+**Status**: Accepted
+
+**Date**: 2026-03-05
+
+**Deciders**: Development Team
+
+---
+
+## Context
+
+The GpuDevicePlugin CRD (`deviceplugin.intel.com/v1`) is only present when the Intel GPU device plugin operator is installed. However, Intel GPUs can be present in a cluster without the operator — the device plugin can be deployed as a plain DaemonSet.
+
+The plugin should still detect and display GPU resources even without the CRD. GPU nodes are identifiable by node labels (e.g., `intel.feature.node.kubernetes.io/gpu`) and capacity fields (e.g., `gpu.intel.com/i915`). GPU pods are identifiable by resource requests/limits for Intel GPU resources.
+
+---
+
+## Decision
+
+Wrap the GpuDevicePlugin CRD fetch in its own `try/catch`. If the fetch fails (CRD not installed), set `crdAvailable` to `false` and continue. GPU nodes and pods are still discovered via node labels, capacity fields, and pod resource requests — independent of the CRD.
+
+The CRD data enriches the view when available but is not required for core functionality.
+
+---
+
+## Consequences
+
+- ✅ Plugin works on any cluster with Intel GPUs regardless of operator installation
+- ✅ Progressive enhancement when CRD is available
+- ✅ No error displayed to the user for a missing CRD
+- ⚠️ Two code paths (with/without CRD data) increase testing surface
+- ⚠️ DevicePlugins page is empty without the CRD
+
+The negative consequences are mitigated by clear messaging on the DevicePlugins page when the CRD is unavailable, informing users that the operator is not installed.
+
+---
+
+## Alternatives Considered
+
+1. **Require CRD (hard dependency)** — Rejected. Too restrictive; many clusters run the device plugin as a plain DaemonSet without the operator and its CRD.
+
+2. **API discovery check before fetch** — Considered, but `try/catch` is simpler and handles all failure modes (CRD not installed, API server errors, permission issues) uniformly.
+
+3. **Disable plugin entirely without CRD** — Rejected. Core GPU monitoring (node detection, pod resource tracking) works without the CRD and provides significant value on its own.
+
+---
+
+## Changelog
+
+| Date | Change |
+|------|--------|
+| 2026-03-05 | Initial decision accepted |

docs/architecture/adr/004-native-view-integration.md

@@ -0,0 +1,61 @@
+# ADR 004: Headlamp View Integration via Detail Sections and Column Processors
+
+**Status**: Accepted
+
+**Date**: 2026-03-05
+
+**Deciders**: Development Team
+
+---
+
+## Context
+
+The plugin provides its own pages (Overview, Nodes, Pods, etc.) but also needs to enhance Headlamp's native views. Users browsing the standard Nodes list should see GPU information without navigating to the plugin.
+
+Headlamp offers two integration mechanisms:
+
+- `registerDetailsViewSection` for injecting sections into resource detail pages.
+- `registerResourceTableColumnsProcessor` for adding columns to resource list tables.
+
+---
+
+## Decision
+
+Use both integration mechanisms:
+
+1. **Detail sections**: `registerDetailsViewSection` injects GPU information into Node and Pod detail pages. Resource-kind guards ensure sections only render for the correct resource type.
+
+2. **Column processors**: `registerResourceTableColumnsProcessor` appends "GPU Type" and "GPU Devices" columns to the native `headlamp-nodes` table.
+
+Both integration points consume data from the shared `IntelGpuDataProvider` context, so they benefit from the same cached data as the plugin's own pages.
+
+---
+
+## Consequences
+
+- ✅ GPU data visible in native Headlamp views without navigation
+- ✅ Seamless user experience for users already familiar with Headlamp
+- ✅ Uses Headlamp's official extension APIs for forward compatibility
+- ✅ Shared context means no duplicate data fetches
+- ⚠️ Detail sections render for all Nodes/Pods (guard needed to check GPU relevance)
+- ⚠️ Column processors add columns even when no GPU nodes exist in the cluster
+
+The negative consequences are mitigated by resource-kind guards and conditional rendering that hide GPU sections when a resource has no GPU relevance.
+
+---
+
+## Alternatives Considered
+
+1. **Plugin pages only (no native view integration)** — Rejected. Users would miss GPU info when browsing standard Headlamp views, reducing discoverability.
+
+2. **Override native views entirely** — Rejected. Not supported by Headlamp's plugin API and would conflict with other plugins.
+
+3. **App bar notification only** — Rejected. Insufficient detail for node-level and pod-level GPU information; only suitable for cluster-wide summaries.
+
+---
+
+## Changelog
+
+| Date | Change |
+|------|--------|
+| 2026-03-05 | Initial decision accepted |

docs/architecture/adr/README.md

@@ -0,0 +1,42 @@
+# Architecture Decision Records
+
+## What is an ADR?
+
+An Architecture Decision Record (ADR) captures an important architectural decision made along with its context and consequences. ADRs are used to document the reasoning behind significant technical choices so that future contributors can understand why the system is built the way it is.
+
+## Format
+
+This project follows the [Nygard-style ADR format](https://cognitect.com/blog/2011/11/15/documenting-architecture-decisions):
+
+- **Title**: Short noun phrase describing the decision
+- **Status**: Proposed, Accepted, Deprecated, or Superseded
+- **Date**: When the decision was made
+- **Deciders**: Who was involved in making the decision
+- **Context**: What is the issue that motivated the decision
+- **Decision**: What is the change that was decided
+- **Consequences**: What becomes easier or more difficult as a result
+- **Alternatives Considered**: What other options were evaluated
+
+## Index
+
+| ADR | Title | Status | Date |
+|-----|-------|--------|------|
+| [001](001-react-context-state.md) | React Context for Centralized GPU State | Accepted | 2026-03-05 |
+| [002](002-dual-data-fetching.md) | Dual Data Fetching Strategy (Hooks + ApiProxy) | Accepted | 2026-03-05 |
+| [003](003-graceful-crd-degradation.md) | Graceful CRD Degradation | Accepted | 2026-03-05 |
+| [004](004-native-view-integration.md) | Headlamp View Integration via Detail Sections and Column Processors | Accepted | 2026-03-05 |
+
+## Creating New ADRs
+
+1. Copy an existing ADR as a template.
+2. Assign the next sequential number (e.g., `005`).
+3. Fill in all sections: Status, Date, Deciders, Context, Decision, Consequences, and Alternatives Considered.
+4. Set the status to `Proposed` until the team reviews and accepts the decision.
+5. Update this README index table with the new entry.
+6. Submit as part of a pull request for team review.
+
+## References
+
+- [Michael Nygard - Documenting Architecture Decisions](https://cognitect.com/blog/2011/11/15/documenting-architecture-decisions)
+- [ADR GitHub Organization](https://adr.github.io/)
+- [Headlamp Plugin Development](https://headlamp.dev/docs/latest/development/plugins/)

docs/screenshots/01-overview.svg

@@ -0,0 +1,123 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="1200" height="750" viewBox="0 0 1200 750" font-family="Inter, Segoe UI, Arial, sans-serif">
+  <!-- Background -->
+  <rect width="1200" height="750" fill="#0f1117"/>
+
+  <!-- Top nav bar -->
+  <rect width="1200" height="48" fill="#1a1d27"/>
+  <text x="16" y="30" font-size="18" font-weight="700" fill="#ffffff">⚡ Headlamp</text>
+  <text x="120" y="30" font-size="14" fill="#8b8fa8">Intel GPU</text>
+  <text x="200" y="30" font-size="14" fill="#8b8fa8">/</text>
+  <text x="214" y="30" font-size="14" fill="#a78bfa">Overview</text>
+
+  <!-- Sidebar -->
+  <rect x="0" y="48" width="200" height="702" fill="#13151f"/>
+  <rect x="0" y="90" width="200" height="36" fill="#a78bfa22"/>
+  <text x="16" y="113" font-size="13" fill="#a78bfa" font-weight="600">Overview</text>
+  <text x="16" y="153" font-size="13" fill="#8b8fa8">Device Plugins</text>
+  <text x="16" y="193" font-size="13" fill="#8b8fa8">GPU Nodes</text>
+  <text x="16" y="233" font-size="13" fill="#8b8fa8">GPU Pods</text>
+  <text x="16" y="273" font-size="13" fill="#8b8fa8">Metrics</text>
+
+  <!-- Page title -->
+  <text x="220" y="90" font-size="22" font-weight="700" fill="#ffffff">Intel GPU Overview</text>
+  <text x="220" y="112" font-size="13" fill="#8b8fa8">Cluster-wide GPU device plugin status and workload summary</text>
+
+  <!-- Summary cards row -->
+  <!-- Card 1: GPU Nodes -->
+  <rect x="220" y="130" width="200" height="100" rx="8" fill="#1e2130"/>
+  <rect x="220" y="130" width="200" height="4" rx="2" fill="#a78bfa"/>
+  <text x="240" y="165" font-size="12" fill="#8b8fa8">GPU Nodes</text>
+  <text x="240" y="200" font-size="36" font-weight="700" fill="#a78bfa">6</text>
+  <text x="290" y="200" font-size="13" fill="#8b8fa8">/ 12 total</text>
+
+  <!-- Card 2: Active GPU Pods -->
+  <rect x="436" y="130" width="200" height="100" rx="8" fill="#1e2130"/>
+  <rect x="436" y="130" width="200" height="4" rx="2" fill="#34d399"/>
+  <text x="456" y="165" font-size="12" fill="#8b8fa8">Active GPU Pods</text>
+  <text x="456" y="200" font-size="36" font-weight="700" fill="#34d399">14</text>
+  <text x="506" y="200" font-size="13" fill="#8b8fa8">running</text>
+
+  <!-- Card 3: Device Plugins -->
+  <rect x="652" y="130" width="200" height="100" rx="8" fill="#1e2130"/>
+  <rect x="652" y="130" width="200" height="4" rx="2" fill="#60a5fa"/>
+  <text x="672" y="165" font-size="12" fill="#8b8fa8">Device Plugins</text>
+  <text x="672" y="200" font-size="36" font-weight="700" fill="#60a5fa">2</text>
+  <text x="722" y="200" font-size="13" fill="#8b8fa8">healthy</text>
+
+  <!-- Card 4: GPU Allocation -->
+  <rect x="868" y="130" width="300" height="100" rx="8" fill="#1e2130"/>
+  <rect x="868" y="130" width="300" height="4" rx="2" fill="#fb923c"/>
+  <text x="888" y="165" font-size="12" fill="#8b8fa8">Cluster GPU Allocation</text>
+  <text x="888" y="195" font-size="28" font-weight="700" fill="#fb923c">58%</text>
+  <!-- Allocation bar -->
+  <rect x="888" y="208" width="260" height="8" rx="4" fill="#2d3148"/>
+  <rect x="888" y="208" width="151" height="8" rx="4" fill="#fb923c"/>
+
+  <!-- GPU Type Distribution -->
+  <rect x="220" y="248" width="440" height="220" rx="8" fill="#1e2130"/>
+  <text x="240" y="278" font-size="15" font-weight="600" fill="#ffffff">GPU Type Distribution</text>
+  <!-- Pie chart mockup -->
+  <circle cx="340" cy="370" r="70" fill="none" stroke="#2d3148" stroke-width="30"/>
+  <circle cx="340" cy="370" r="70" fill="none" stroke="#a78bfa" stroke-width="30" stroke-dasharray="176 264" stroke-dashoffset="0"/>
+  <circle cx="340" cy="370" r="70" fill="none" stroke="#60a5fa" stroke-width="30" stroke-dasharray="88 352" stroke-dashoffset="-176"/>
+  <!-- Legend -->
+  <rect x="430" y="340" width="12" height="12" rx="2" fill="#a78bfa"/>
+  <text x="448" y="352" font-size="13" fill="#e2e4f0">Discrete (i915/Xe)</text>
+  <text x="448" y="370" font-size="12" fill="#8b8fa8">4 nodes · 67%</text>
+  <rect x="430" y="390" width="12" height="12" rx="2" fill="#60a5fa"/>
+  <text x="448" y="402" font-size="13" fill="#e2e4f0">Integrated</text>
+  <text x="448" y="420" font-size="12" fill="#8b8fa8">2 nodes · 33%</text>
+
+  <!-- Operator Status -->
+  <rect x="676" y="248" width="492" height="220" rx="8" fill="#1e2130"/>
+  <text x="696" y="278" font-size="15" font-weight="600" fill="#ffffff">Operator Status</text>
+  <!-- Status rows -->
+  <rect x="696" y="295" width="452" height="40" rx="4" fill="#13151f"/>
+  <circle cx="720" cy="315" r="6" fill="#34d399"/>
+  <text x="736" y="320" font-size="13" fill="#e2e4f0">gpu-device-plugin</text>
+  <text x="1020" y="320" font-size="12" fill="#34d399">Running</text>
+  <text x="1060" y="320" font-size="12" fill="#8b8fa8">6/6</text>
+  <rect x="696" y="343" width="452" height="40" rx="4" fill="#13151f"/>
+  <circle cx="720" cy="363" r="6" fill="#34d399"/>
+  <text x="736" y="368" font-size="13" fill="#e2e4f0">node-feature-discovery</text>
+  <text x="1020" y="368" font-size="12" fill="#34d399">Running</text>
+  <text x="1060" y="368" font-size="12" fill="#8b8fa8">1/1</text>
+  <rect x="696" y="391" width="452" height="40" rx="4" fill="#13151f"/>
+  <circle cx="720" cy="411" r="6" fill="#60a5fa"/>
+  <text x="736" y="416" font-size="13" fill="#e2e4f0">prometheus / node-exporter</text>
+  <text x="1020" y="416" font-size="12" fill="#60a5fa">Available</text>
+  <text x="1060" y="416" font-size="12" fill="#8b8fa8">6/6</text>
+
+  <!-- Recent GPU Pods table -->
+  <rect x="220" y="486" width="948" height="220" rx="8" fill="#1e2130"/>
+  <text x="240" y="516" font-size="15" font-weight="600" fill="#ffffff">Active GPU Pods</text>
+  <!-- Table header -->
+  <rect x="220" y="526" width="948" height="30" fill="#13151f"/>
+  <text x="240" y="546" font-size="12" fill="#8b8fa8" font-weight="600">NAME</text>
+  <text x="480" y="546" font-size="12" fill="#8b8fa8" font-weight="600">NAMESPACE</text>
+  <text x="660" y="546" font-size="12" fill="#8b8fa8" font-weight="600">NODE</text>
+  <text x="860" y="546" font-size="12" fill="#8b8fa8" font-weight="600">GPU REQUEST</text>
+  <text x="1000" y="546" font-size="12" fill="#8b8fa8" font-weight="600">STATUS</text>
+  <!-- Rows -->
+  <rect x="220" y="556" width="948" height="34" fill="#1e2130"/>
+  <text x="240" y="578" font-size="13" fill="#e2e4f0">gpu-inference-7d9c4f</text>
+  <text x="480" y="578" font-size="13" fill="#8b8fa8">ml-workloads</text>
+  <text x="660" y="578" font-size="13" fill="#8b8fa8">gpu-node-01</text>
+  <text x="860" y="578" font-size="13" fill="#a78bfa">2</text>
+  <rect x="998" y="563" width="60" height="20" rx="10" fill="#34d39922"/>
+  <text x="1028" y="578" font-size="12" fill="#34d399" text-anchor="middle">Running</text>
+  <rect x="220" y="590" width="948" height="34" fill="#13151f"/>
+  <text x="240" y="612" font-size="13" fill="#e2e4f0">training-job-abc12</text>
+  <text x="480" y="612" font-size="13" fill="#8b8fa8">training</text>
+  <text x="660" y="612" font-size="13" fill="#8b8fa8">gpu-node-03</text>
+  <text x="860" y="612" font-size="13" fill="#a78bfa">4</text>
+  <rect x="998" y="597" width="60" height="20" rx="10" fill="#34d39922"/>
+  <text x="1028" y="612" font-size="12" fill="#34d399" text-anchor="middle">Running</text>
+  <rect x="220" y="624" width="948" height="34" fill="#1e2130"/>
+  <text x="240" y="646" font-size="13" fill="#e2e4f0">render-worker-9xk2p</text>
+  <text x="480" y="646" font-size="13" fill="#8b8fa8">rendering</text>
+  <text x="660" y="646" font-size="13" fill="#8b8fa8">gpu-node-02</text>
+  <text x="860" y="646" font-size="13" fill="#a78bfa">1</text>
+  <rect x="998" y="631" width="60" height="20" rx="10" fill="#fbbf2422"/>
+  <text x="1028" y="646" font-size="12" fill="#fbbf24" text-anchor="middle">Pending</text>
+</svg>

docs/screenshots/02-nodes.svg

@@ -0,0 +1,142 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="1200" height="750" viewBox="0 0 1200 750" font-family="Inter, Segoe UI, Arial, sans-serif">
+  <!-- Background -->
+  <rect width="1200" height="750" fill="#0f1117"/>
+
+  <!-- Top nav bar -->
+  <rect width="1200" height="48" fill="#1a1d27"/>
+  <text x="16" y="30" font-size="18" font-weight="700" fill="#ffffff">⚡ Headlamp</text>
+  <text x="120" y="30" font-size="14" fill="#8b8fa8">Intel GPU</text>
+  <text x="200" y="30" font-size="14" fill="#8b8fa8">/</text>
+  <text x="214" y="30" font-size="14" fill="#a78bfa">GPU Nodes</text>
+
+  <!-- Sidebar -->
+  <rect x="0" y="48" width="200" height="702" fill="#13151f"/>
+  <text x="16" y="113" font-size="13" fill="#8b8fa8">Overview</text>
+  <text x="16" y="153" font-size="13" fill="#8b8fa8">Device Plugins</text>
+  <rect x="0" y="170" width="200" height="36" fill="#a78bfa22"/>
+  <text x="16" y="193" font-size="13" fill="#a78bfa" font-weight="600">GPU Nodes</text>
+  <text x="16" y="233" font-size="13" fill="#8b8fa8">GPU Pods</text>
+  <text x="16" y="273" font-size="13" fill="#8b8fa8">Metrics</text>
+
+  <!-- Page title -->
+  <text x="220" y="90" font-size="22" font-weight="700" fill="#ffffff">GPU Nodes</text>
+  <text x="220" y="112" font-size="13" fill="#8b8fa8">Per-node GPU capacity, allocatable, allocation, and active workloads</text>
+
+  <!-- Node Card 1 -->
+  <rect x="220" y="130" width="460" height="170" rx="8" fill="#1e2130"/>
+  <rect x="220" y="130" width="460" height="4" rx="2" fill="#a78bfa"/>
+  <text x="240" y="160" font-size="15" font-weight="600" fill="#ffffff">gpu-node-01</text>
+  <rect x="550" y="142" width="80" height="22" rx="11" fill="#34d39922"/>
+  <text x="590" y="158" font-size="12" fill="#34d399" text-anchor="middle">Ready</text>
+  <text x="240" y="183" font-size="12" fill="#8b8fa8">Type</text>
+  <text x="320" y="183" font-size="12" fill="#e2e4f0">Discrete (i915)</text>
+  <text x="240" y="205" font-size="12" fill="#8b8fa8">Capacity</text>
+  <text x="320" y="205" font-size="12" fill="#e2e4f0">4 GPUs</text>
+  <text x="240" y="227" font-size="12" fill="#8b8fa8">Allocatable</text>
+  <text x="320" y="227" font-size="12" fill="#e2e4f0">4 GPUs</text>
+  <!-- Allocation bar -->
+  <text x="240" y="255" font-size="12" fill="#8b8fa8">Allocation</text>
+  <text x="640" y="255" font-size="12" fill="#fb923c" text-anchor="end">75%  (3/4)</text>
+  <rect x="240" y="262" width="380" height="12" rx="6" fill="#2d3148"/>
+  <rect x="240" y="262" width="285" height="12" rx="6" fill="#fb923c"/>
+  <text x="240" y="293" font-size="12" fill="#8b8fa8">Active Pods: </text>
+  <text x="316" y="293" font-size="12" fill="#e2e4f0">gpu-inference-7d9c4f, render-worker-9xk2p</text>
+
+  <!-- Node Card 2 -->
+  <rect x="700" y="130" width="460" height="170" rx="8" fill="#1e2130"/>
+  <rect x="700" y="130" width="460" height="4" rx="2" fill="#a78bfa"/>
+  <text x="720" y="160" font-size="15" font-weight="600" fill="#ffffff">gpu-node-02</text>
+  <rect x="1030" y="142" width="80" height="22" rx="11" fill="#34d39922"/>
+  <text x="1070" y="158" font-size="12" fill="#34d399" text-anchor="middle">Ready</text>
+  <text x="720" y="183" font-size="12" fill="#8b8fa8">Type</text>
+  <text x="800" y="183" font-size="12" fill="#e2e4f0">Discrete (Xe)</text>
+  <text x="720" y="205" font-size="12" fill="#8b8fa8">Capacity</text>
+  <text x="800" y="205" font-size="12" fill="#e2e4f0">2 GPUs</text>
+  <text x="720" y="227" font-size="12" fill="#8b8fa8">Allocatable</text>
+  <text x="800" y="227" font-size="12" fill="#e2e4f0">2 GPUs</text>
+  <!-- Allocation bar -->
+  <text x="720" y="255" font-size="12" fill="#8b8fa8">Allocation</text>
+  <text x="1120" y="255" font-size="12" fill="#34d399" text-anchor="end">50%  (1/2)</text>
+  <rect x="720" y="262" width="380" height="12" rx="6" fill="#2d3148"/>
+  <rect x="720" y="262" width="190" height="12" rx="6" fill="#34d399"/>
+  <text x="720" y="293" font-size="12" fill="#8b8fa8">Active Pods: </text>
+  <text x="796" y="293" font-size="12" fill="#e2e4f0">render-worker-9xk2p</text>
+
+  <!-- Node Card 3 -->
+  <rect x="220" y="318" width="460" height="170" rx="8" fill="#1e2130"/>
+  <rect x="220" y="318" width="460" height="4" rx="2" fill="#a78bfa"/>
+  <text x="240" y="348" font-size="15" font-weight="600" fill="#ffffff">gpu-node-03</text>
+  <rect x="550" y="330" width="80" height="22" rx="11" fill="#34d39922"/>
+  <text x="590" y="346" font-size="12" fill="#34d399" text-anchor="middle">Ready</text>
+  <text x="240" y="371" font-size="12" fill="#8b8fa8">Type</text>
+  <text x="320" y="371" font-size="12" fill="#e2e4f0">Discrete (i915)</text>
+  <text x="240" y="393" font-size="12" fill="#8b8fa8">Capacity</text>
+  <text x="320" y="393" font-size="12" fill="#e2e4f0">8 GPUs</text>
+  <text x="240" y="415" font-size="12" fill="#8b8fa8">Allocatable</text>
+  <text x="320" y="415" font-size="12" fill="#e2e4f0">8 GPUs</text>
+  <!-- Allocation bar -->
+  <text x="240" y="443" font-size="12" fill="#8b8fa8">Allocation</text>
+  <text x="640" y="443" font-size="12" fill="#fb923c" text-anchor="end">100%  (8/8)</text>
+  <rect x="240" y="450" width="380" height="12" rx="6" fill="#2d3148"/>
+  <rect x="240" y="450" width="380" height="12" rx="6" fill="#f87171"/>
+  <text x="240" y="481" font-size="12" fill="#8b8fa8">Active Pods: </text>
+  <text x="316" y="481" font-size="12" fill="#e2e4f0">training-job-abc12 (+3 more)</text>
+
+  <!-- Node Card 4 (integrated) -->
+  <rect x="700" y="318" width="460" height="170" rx="8" fill="#1e2130"/>
+  <rect x="700" y="318" width="460" height="4" rx="2" fill="#60a5fa"/>
+  <text x="720" y="348" font-size="15" font-weight="600" fill="#ffffff">worker-node-05</text>
+  <rect x="1030" y="330" width="80" height="22" rx="11" fill="#34d39922"/>
+  <text x="1070" y="346" font-size="12" fill="#34d399" text-anchor="middle">Ready</text>
+  <text x="720" y="371" font-size="12" fill="#8b8fa8">Type</text>
+  <text x="800" y="371" font-size="12" fill="#e2e4f0">Integrated</text>
+  <text x="720" y="393" font-size="12" fill="#8b8fa8">Capacity</text>
+  <text x="800" y="393" font-size="12" fill="#e2e4f0">1 GPU</text>
+  <text x="720" y="415" font-size="12" fill="#8b8fa8">Allocatable</text>
+  <text x="800" y="415" font-size="12" fill="#e2e4f0">1 GPU</text>
+  <!-- Allocation bar -->
+  <text x="720" y="443" font-size="12" fill="#8b8fa8">Allocation</text>
+  <text x="1120" y="443" font-size="12" fill="#8b8fa8" text-anchor="end">0%  (0/1)</text>
+  <rect x="720" y="450" width="380" height="12" rx="6" fill="#2d3148"/>
+  <text x="720" y="481" font-size="12" fill="#8b8fa8">Active Pods: </text>
+  <text x="796" y="481" font-size="12" fill="#6b7280">none</text>
+
+  <!-- Node Card 5 -->
+  <rect x="220" y="506" width="460" height="170" rx="8" fill="#1e2130"/>
+  <rect x="220" y="506" width="460" height="4" rx="2" fill="#a78bfa"/>
+  <text x="240" y="536" font-size="15" font-weight="600" fill="#ffffff">gpu-node-04</text>
+  <rect x="550" y="518" width="80" height="22" rx="11" fill="#34d39922"/>
+  <text x="590" y="534" font-size="12" fill="#34d399" text-anchor="middle">Ready</text>
+  <text x="240" y="559" font-size="12" fill="#8b8fa8">Type</text>
+  <text x="320" y="559" font-size="12" fill="#e2e4f0">Discrete (i915)</text>
+  <text x="240" y="581" font-size="12" fill="#8b8fa8">Capacity</text>
+  <text x="320" y="581" font-size="12" fill="#e2e4f0">2 GPUs</text>
+  <text x="240" y="603" font-size="12" fill="#8b8fa8">Allocatable</text>
+  <text x="320" y="603" font-size="12" fill="#e2e4f0">2 GPUs</text>
+  <!-- Allocation bar -->
+  <text x="240" y="631" font-size="12" fill="#8b8fa8">Allocation</text>
+  <text x="640" y="631" font-size="12" fill="#34d399" text-anchor="end">25%  (0.5/2)</text>
+  <rect x="240" y="638" width="380" height="12" rx="6" fill="#2d3148"/>
+  <rect x="240" y="638" width="95" height="12" rx="6" fill="#34d399"/>
+  <text x="240" y="669" font-size="12" fill="#8b8fa8">Active Pods: </text>
+  <text x="316" y="669" font-size="12" fill="#e2e4f0">light-inference-pod</text>
+
+  <!-- Node Card 6 (integrated) -->
+  <rect x="700" y="506" width="460" height="170" rx="8" fill="#1e2130"/>
+  <rect x="700" y="506" width="460" height="4" rx="2" fill="#60a5fa"/>
+  <text x="720" y="536" font-size="15" font-weight="600" fill="#ffffff">worker-node-07</text>
+  <rect x="1030" y="518" width="80" height="22" rx="11" fill="#fbbf2422"/>
+  <text x="1070" y="534" font-size="12" fill="#fbbf24" text-anchor="middle">NotReady</text>
+  <text x="720" y="559" font-size="12" fill="#8b8fa8">Type</text>
+  <text x="800" y="559" font-size="12" fill="#e2e4f0">Integrated</text>
+  <text x="720" y="581" font-size="12" fill="#8b8fa8">Capacity</text>
+  <text x="800" y="581" font-size="12" fill="#e2e4f0">1 GPU</text>
+  <text x="720" y="603" font-size="12" fill="#8b8fa8">Allocatable</text>
+  <text x="800" y="603" font-size="12" fill="#8b8fa8">—</text>
+  <!-- Allocation bar -->
+  <text x="720" y="631" font-size="12" fill="#8b8fa8">Allocation</text>
+  <text x="1120" y="631" font-size="12" fill="#6b7280" text-anchor="end">—</text>
+  <rect x="720" y="638" width="380" height="12" rx="6" fill="#2d3148"/>
+  <text x="720" y="669" font-size="12" fill="#8b8fa8">Active Pods: </text>
+  <text x="796" y="669" font-size="12" fill="#6b7280">node unavailable</text>
+</svg>

docs/screenshots/03-metrics.svg

@@ -0,0 +1,117 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="1200" height="750" viewBox="0 0 1200 750" font-family="Inter, Segoe UI, Arial, sans-serif">
+  <!-- Background -->
+  <rect width="1200" height="750" fill="#0f1117"/>
+
+  <!-- Top nav bar -->
+  <rect width="1200" height="48" fill="#1a1d27"/>
+  <text x="16" y="30" font-size="18" font-weight="700" fill="#ffffff">⚡ Headlamp</text>
+  <text x="120" y="30" font-size="14" fill="#8b8fa8">Intel GPU</text>
+  <text x="200" y="30" font-size="14" fill="#8b8fa8">/</text>
+  <text x="214" y="30" font-size="14" fill="#a78bfa">Metrics</text>
+
+  <!-- Sidebar -->
+  <rect x="0" y="48" width="200" height="702" fill="#13151f"/>
+  <text x="16" y="113" font-size="13" fill="#8b8fa8">Overview</text>
+  <text x="16" y="153" font-size="13" fill="#8b8fa8">Device Plugins</text>
+  <text x="16" y="193" font-size="13" fill="#8b8fa8">GPU Nodes</text>
+  <text x="16" y="233" font-size="13" fill="#8b8fa8">GPU Pods</text>
+  <rect x="0" y="250" width="200" height="36" fill="#a78bfa22"/>
+  <text x="16" y="273" font-size="13" fill="#a78bfa" font-weight="600">Metrics</text>
+
+  <!-- Page title -->
+  <text x="220" y="90" font-size="22" font-weight="700" fill="#ffffff">GPU Metrics</text>
+  <text x="220" y="112" font-size="13" fill="#8b8fa8">Real-time GPU power draw from node-exporter i915 hwmon (discrete GPU nodes only)</text>
+
+  <!-- Time range selector -->
+  <rect x="980" y="72" width="200" height="30" rx="6" fill="#1e2130"/>
+  <text x="1000" y="92" font-size="13" fill="#8b8fa8">Last 30 min ▾</text>
+
+  <!-- Summary stat cards -->
+  <rect x="220" y="130" width="230" height="80" rx="8" fill="#1e2130"/>
+  <text x="240" y="158" font-size="12" fill="#8b8fa8">Peak Power Draw</text>
+  <text x="240" y="195" font-size="28" font-weight="700" fill="#f87171">186 W</text>
+  <text x="360" y="195" font-size="12" fill="#8b8fa8">gpu-node-03</text>
+
+  <rect x="466" y="130" width="230" height="80" rx="8" fill="#1e2130"/>
+  <text x="486" y="158" font-size="12" fill="#8b8fa8">Avg Power (cluster)</text>
+  <text x="486" y="195" font-size="28" font-weight="700" fill="#fb923c">124 W</text>
+  <text x="606" y="195" font-size="12" fill="#8b8fa8">3 nodes</text>
+
+  <rect x="712" y="130" width="230" height="80" rx="8" fill="#1e2130"/>
+  <text x="732" y="158" font-size="12" fill="#8b8fa8">Avg TDP Utilization</text>
+  <text x="732" y="195" font-size="28" font-weight="700" fill="#a78bfa">68%</text>
+  <text x="820" y="195" font-size="12" fill="#8b8fa8">of 250W TDP</text>
+
+  <rect x="958" y="130" width="210" height="80" rx="8" fill="#1e2130"/>
+  <text x="978" y="158" font-size="12" fill="#8b8fa8">Nodes Reporting</text>
+  <text x="978" y="195" font-size="28" font-weight="700" fill="#34d399">3</text>
+  <text x="1030" y="195" font-size="12" fill="#8b8fa8">/ 4 discrete</text>
+
+  <!-- Main chart: GPU Power Draw over time -->
+  <rect x="220" y="226" width="948" height="300" rx="8" fill="#1e2130"/>
+  <text x="240" y="256" font-size="15" font-weight="600" fill="#ffffff">GPU Power Draw (W) — Last 30 Minutes</text>
+  <!-- Chart area -->
+  <rect x="260" y="270" width="880" height="230" fill="#13151f" rx="4"/>
+  <!-- Y axis labels -->
+  <text x="250" y="498" font-size="11" fill="#6b7280" text-anchor="end">0</text>
+  <text x="250" y="440" font-size="11" fill="#6b7280" text-anchor="end">50</text>
+  <text x="250" y="382" font-size="11" fill="#6b7280" text-anchor="end">100</text>
+  <text x="250" y="325" font-size="11" fill="#6b7280" text-anchor="end">150</text>
+  <text x="250" y="278" font-size="11" fill="#6b7280" text-anchor="end">200</text>
+  <!-- Y grid lines -->
+  <line x1="260" y1="497" x2="1140" y2="497" stroke="#2d3148" stroke-width="1"/>
+  <line x1="260" y1="439" x2="1140" y2="439" stroke="#2d3148" stroke-width="1"/>
+  <line x1="260" y1="381" x2="1140" y2="381" stroke="#2d3148" stroke-width="1"/>
+  <line x1="260" y1="323" x2="1140" y2="323" stroke="#2d3148" stroke-width="1"/>
+  <line x1="260" y1="275" x2="1140" y2="275" stroke="#2d3148" stroke-width="1"/>
+  <!-- X axis labels -->
+  <text x="260" y="515" font-size="11" fill="#6b7280">-30m</text>
+  <text x="480" y="515" font-size="11" fill="#6b7280">-22m</text>
+  <text x="700" y="515" font-size="11" fill="#6b7280">-15m</text>
+  <text x="920" y="515" font-size="11" fill="#6b7280">-7m</text>
+  <text x="1120" y="515" font-size="11" fill="#6b7280">now</text>
+
+  <!-- Line for gpu-node-01 (purple) — ~186W with some variation -->
+  <polyline points="260,323 315,318 370,310 425,315 480,325 535,320 590,312 645,308 700,315 755,322 810,318 865,310 920,305 975,312 1030,320 1085,315 1140,318" fill="none" stroke="#a78bfa" stroke-width="2.5" stroke-linejoin="round"/>
+
+  <!-- Line for gpu-node-03 (orange) — ~124W workload burst then taper -->
+  <polyline points="260,381 315,370 370,355 425,340 480,330 535,328 590,335 645,340 700,345 755,350 810,355 865,345 920,338 975,340 1030,348 1085,355 1140,350" fill="none" stroke="#fb923c" stroke-width="2.5" stroke-linejoin="round"/>
+
+  <!-- Line for gpu-node-02 (blue) — ~80W relatively steady -->
+  <polyline points="260,429 315,427 370,425 425,430 480,432 535,428 590,426 645,422 700,425 755,428 810,430 865,427 920,423 975,428 1030,430 1085,425 1140,427" fill="none" stroke="#60a5fa" stroke-width="2.5" stroke-linejoin="round"/>
+
+  <!-- Legend -->
+  <line x1="240" y1="553" x2="268" y2="553" stroke="#a78bfa" stroke-width="2.5"/>
+  <text x="276" y="558" font-size="12" fill="#e2e4f0">gpu-node-01  (i915, 4x GPU, avg 186W)</text>
+  <line x1="540" y1="553" x2="568" y2="553" stroke="#fb923c" stroke-width="2.5"/>
+  <text x="576" y="558" font-size="12" fill="#e2e4f0">gpu-node-03  (i915, 8x GPU, avg 124W)</text>
+  <line x1="860" y1="553" x2="888" y2="553" stroke="#60a5fa" stroke-width="2.5"/>
+  <text x="896" y="558" font-size="12" fill="#e2e4f0">gpu-node-02  (Xe, 2x GPU, avg 80W)</text>
+
+  <!-- TDP bars section -->
+  <rect x="220" y="540" width="948" height="180" rx="8" fill="#1e2130"/>
+  <text x="240" y="568" font-size="15" font-weight="600" fill="#ffffff">TDP Utilization — Current</text>
+  <!-- Node rows -->
+  <!-- gpu-node-01 -->
+  <text x="240" y="600" font-size="13" fill="#e2e4f0">gpu-node-01</text>
+  <text x="440" y="600" font-size="12" fill="#8b8fa8">186W / 250W TDP</text>
+  <rect x="600" y="588" width="500" height="16" rx="8" fill="#2d3148"/>
+  <rect x="600" y="588" width="372" height="16" rx="8" fill="#a78bfa"/>
+  <text x="1110" y="600" font-size="12" fill="#a78bfa">74%</text>
+  <!-- gpu-node-03 -->
+  <text x="240" y="634" font-size="13" fill="#e2e4f0">gpu-node-03</text>
+  <text x="440" y="634" font-size="12" fill="#8b8fa8">124W / 250W TDP</text>
+  <rect x="600" y="622" width="500" height="16" rx="8" fill="#2d3148"/>
+  <rect x="600" y="622" width="248" height="16" rx="8" fill="#fb923c"/>
+  <text x="1110" y="634" font-size="12" fill="#fb923c">50%</text>
+  <!-- gpu-node-02 -->
+  <text x="240" y="668" font-size="13" fill="#e2e4f0">gpu-node-02</text>
+  <text x="440" y="668" font-size="12" fill="#8b8fa8">80W / 150W TDP</text>
+  <rect x="600" y="656" width="500" height="16" rx="8" fill="#2d3148"/>
+  <rect x="600" y="656" width="267" height="16" rx="8" fill="#60a5fa"/>
+  <text x="1110" y="668" font-size="12" fill="#60a5fa">53%</text>
+  <!-- No data node -->
+  <text x="240" y="702" font-size="13" fill="#6b7280">gpu-node-04</text>
+  <text x="440" y="702" font-size="12" fill="#6b7280">No hwmon data — integrated GPU</text>
+  <text x="1110" y="702" font-size="12" fill="#6b7280">n/a</text>
+</svg>

e2e/auth.setup.ts

@@ -0,0 +1,83 @@
+import { test as setup, expect, Page } from '@playwright/test';
+
+const AUTH_STATE_PATH = 'e2e/.auth/state.json';
+
+async function authenticateWithOIDC(page: Page, username: string, password: string): Promise<void> {
+  // Navigate to login — Headlamp redirects / to /c/main/login
+  await page.goto('/');
+  await page.waitForURL('**/login');
+
+  // Click "Sign In" and capture the Authentik popup
+  const popupPromise = page.waitForEvent('popup');
+  await page.getByRole('button', { name: /sign in/i }).click();
+  const popup = await popupPromise;
+
+  // Wait for the Authentik popup to fully load before interacting
+  await popup.waitForLoadState('domcontentloaded');
+  await popup.waitForLoadState('networkidle');
+
+  // Authentik step 1: fill username — wait for the form to render
+  const usernameField = popup.getByRole('textbox', { name: /email or username/i });
+  await usernameField.waitFor({ state: 'visible', timeout: 15_000 });
+  await usernameField.fill(username);
+  await popup.getByRole('button', { name: /log in/i }).click();
+
+  // Authentik step 2: fill password — wait for the next step to load
+  await popup.waitForLoadState('networkidle');
+  const passwordField = popup.getByRole('textbox', { name: /password/i });
+  await passwordField.waitFor({ state: 'visible', timeout: 15_000 });
+  await passwordField.fill(password);
+  await popup.getByRole('button', { name: /continue|log in/i }).click();
+
+  // Wait for the popup to close (Authentik redirects back, Headlamp processes callback)
+  await popup.waitForEvent('close', { timeout: 15_000 });
+
+  // Original page should now be authenticated — wait for sidebar
+  await expect(page.getByRole('navigation', { name: 'Navigation' })).toBeVisible({
+    timeout: 15_000,
+  });
+}
+
+async function authenticateWithToken(page: Page, token: string): Promise<void> {
+  await page.goto('/');
+  // Headlamp goes to /token directly when no OIDC is configured,
+  // or through /login when OIDC is configured
+  await page.waitForURL(/\/(login|token)$/);
+
+  if (page.url().includes('/login')) {
+    // OIDC login page — click "use a token" to reach token auth.
+    // Wait explicitly before clicking so failures surface at 15 s
+    // with a clear message rather than silently timing out at 60 s.
+    const useTokenBtn = page.getByRole('button', { name: /use a token/i });
+    await useTokenBtn.waitFor({ state: 'visible', timeout: 15_000 });
+    await useTokenBtn.click();
+    await page.waitForURL('**/token');
+  }
+
+  // Fill the "ID token" field and submit
+  await page.getByRole('textbox', { name: /id token/i }).fill(token);
+  await page.getByRole('button', { name: /authenticate/i }).click();
+
+  // Wait for the main UI to load
+  await expect(page.getByRole('navigation', { name: 'Navigation' })).toBeVisible({
+    timeout: 15_000,
+  });
+}
+
+setup('authenticate with Headlamp', async ({ page }) => {
+  const username = process.env.AUTHENTIK_USERNAME;
+  const password = process.env.AUTHENTIK_PASSWORD;
+  const token = process.env.HEADLAMP_TOKEN;
+
+  if (username && password) {
+    await authenticateWithOIDC(page, username, password);
+  } else if (token) {
+    await authenticateWithToken(page, token);
+  } else {
+    throw new Error(
+      'Set AUTHENTIK_USERNAME + AUTHENTIK_PASSWORD for OIDC auth, or HEADLAMP_TOKEN for token auth'
+    );
+  }
+
+  await page.context().storageState({ path: AUTH_STATE_PATH });
+});

e2e/intel-gpu.spec.ts

@@ -0,0 +1,85 @@
+import { test, expect } from '@playwright/test';
+
+test.describe('Intel GPU plugin smoke tests', () => {
+  test('sidebar contains intel-gpu entry', async ({ page }) => {
+    await page.goto('/');
+    const sidebar = page.getByRole('navigation', { name: 'Navigation' });
+    await expect(sidebar).toBeVisible({ timeout: 15_000 });
+    await expect(sidebar.getByRole('button', { name: 'intel-gpu' })).toBeVisible();
+  });
+
+  test('sidebar intel-gpu entry is clickable and navigates to overview', async ({ page }) => {
+    await page.goto('/');
+    const sidebar = page.getByRole('navigation', { name: 'Navigation' });
+    await expect(sidebar).toBeVisible({ timeout: 15_000 });
+
+    const gpuEntry = sidebar.getByRole('button', { name: 'intel-gpu' });
+    await expect(gpuEntry).toBeVisible();
+    await gpuEntry.click();
+
+    // Should navigate to the overview route
+    await expect(page).toHaveURL(/\/intel-gpu$/);
+    await expect(page.getByRole('heading', { name: /intel.gpu/i })).toBeVisible();
+  });
+
+  test('overview page renders GPU device list or empty state', async ({ page }) => {
+    await page.goto('/c/main/intel-gpu');
+
+    // Overview heading should be present
+    await expect(page.getByRole('heading', { name: /intel.gpu/i })).toBeVisible({
+      timeout: 15_000,
+    });
+
+    // Either a populated table/list or an empty-state indicator must be visible
+    const hasTable = await page.locator('table').first().isVisible().catch(() => false);
+    const hasEmptyState = await page
+      .locator('text=/no.*gpu|no.*device|0 node|empty/i')
+      .first()
+      .isVisible()
+      .catch(() => false);
+    expect(hasTable || hasEmptyState).toBe(true);
+  });
+
+  test('device plugins page renders or shows empty state', async ({ page }) => {
+    await page.goto('/c/main/intel-gpu/device-plugins');
+
+    await expect(page.getByRole('heading', { name: /device plugin/i })).toBeVisible({
+      timeout: 15_000,
+    });
+
+    const hasTable = await page.locator('table').first().isVisible().catch(() => false);
+    const hasEmptyState = await page
+      .locator('text=/no.*plugin|no.*device|empty/i')
+      .first()
+      .isVisible()
+      .catch(() => false);
+    expect(hasTable || hasEmptyState).toBe(true);
+  });
+
+  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 });
+
+    await page.goto('/c/main/intel-gpu/pods');
+    await expect(page.getByRole('heading', { name: /pod/i })).toBeVisible({ timeout: 15_000 });
+
+    await page.goto('/c/main/intel-gpu/metrics');
+    await expect(page.getByRole('heading', { name: /metric/i })).toBeVisible({ timeout: 15_000 });
+  });
+
+  test('plugin settings page shows intel-gpu plugin entry', async ({ page }) => {
+    await page.goto('/settings/plugins');
+
+    // Wait for plugin list to load — plugin scripts load asynchronously
+    const pluginEntry = page.locator('text=intel-gpu').first();
+    await expect(pluginEntry).toBeVisible({ timeout: 30_000 });
+  });
+});

package.json

@@ -1,12 +1,16 @@
 {
-  "name": "headlamp-intel-gpu-plugin",
-  "version": "0.1.0",
+  "name": "intel-gpu",
+  "version": "1.0.0",
   "description": "Headlamp plugin for Intel GPU device plugin visibility and monitoring",
   "repository": {
     "type": "git",
-    "url": "https://github.com/cpfarhood/headlamp-intel-gpu-plugin.git"
+    "url": "https://github.com/privilegedescalation/headlamp-intel-gpu-plugin.git"
   },
-  "author": "cpfarhood",
+  "bugs": {
+    "url": "https://github.com/privilegedescalation/headlamp-intel-gpu-plugin/issues"
+  },
+  "homepage": "https://github.com/privilegedescalation/headlamp-intel-gpu-plugin#readme",
+  "author": "privilegedescalation",
   "license": "Apache-2.0",
   "scripts": {
     "start": "headlamp-plugin start",
@@ -18,9 +22,28 @@
     "format": "prettier --write src/",
     "format:check": "prettier --check src/",
     "test": "vitest run",
-    "test:watch": "vitest"
+    "test:watch": "vitest",
+    "e2e": "playwright test",
+    "e2e:headed": "playwright test --headed"
+  },
+  "peerDependencies": {
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0"
   },
   "devDependencies": {
-    "@kinvolk/headlamp-plugin": "^0.13.0"
+    "@kinvolk/headlamp-plugin": "^0.13.0",
+    "@playwright/test": "^1.58.2",
+    "@testing-library/jest-dom": "^6.4.8",
+    "@testing-library/react": "^16.0.0",
+    "@testing-library/user-event": "^14.5.2",
+    "jsdom": "^24.0.0",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "react-router-dom": "^5.3.0",
+    "vitest": "^3.0.5"
+  },
+  "overrides": {
+    "tar": "^7.5.11",
+    "undici": "^7.24.3"
   }
 }

playwright.config.ts

@@ -0,0 +1,27 @@
+import { defineConfig, devices } from '@playwright/test';
+
+export default defineConfig({
+  testDir: './e2e',
+  timeout: 30_000,
+  expect: { timeout: 10_000 },
+  fullyParallel: false,
+  forbidOnly: !!process.env.CI,
+  retries: process.env.CI ? 1 : 0,
+  reporter: 'list',
+  use: {
+    baseURL: process.env.HEADLAMP_URL || (() => { throw new Error('HEADLAMP_URL is required — run scripts/deploy-e2e-headlamp.sh first'); })(),
+    trace: 'on-first-retry',
+    screenshot: 'only-on-failure',
+  },
+  projects: [
+    { name: 'setup', testMatch: /auth\.setup\.ts/, timeout: 60_000 },
+    {
+      name: 'chromium',
+      use: {
+        ...devices['Desktop Chrome'],
+        storageState: 'e2e/.auth/state.json',
+      },
+      dependencies: ['setup'],
+    },
+  ],
+});

renovate.json

@@ -0,0 +1,5 @@
+{
+  "$schema": "https://docs.renovatebot.com/renovate-schema.json",
+  "extends": ["github>privilegedescalation/.github:renovate-config"]
+}
+

scripts/deploy-e2e-headlamp.sh

@@ -0,0 +1,204 @@
+#!/usr/bin/env bash
+# deploy-e2e-headlamp.sh
+#
+# Deploys a stock Headlamp instance with the intel-gpu plugin loaded via
+# a ConfigMap volume mount. No custom Docker images — the plugin is built
+# in CI and injected as a ConfigMap.
+#
+# E2E resources are deployed to the `privilegedescalation-dev` namespace. Nothing
+# persists beyond the test run — teardown cleans up all created resources.
+#
+# Prerequisites:
+#   - Plugin built (dist/ exists with plugin-main.js + package.json)
+#   - kubectl configured with cluster access
+#   - RBAC applied: kubectl apply -f deployment/e2e-ci-runner-rbac.yaml
+#
+# Environment:
+#   E2E_NAMESPACE     — namespace for E2E Headlamp (default: privilegedescalation-dev)
+#   E2E_RELEASE       — release/resource name prefix (default: headlamp-e2e)
+#   HEADLAMP_VERSION  — Headlamp image tag (default: latest)
+set -euo pipefail
+
+REPO_ROOT="$(cd "$(dirname "$0")/.." && pwd)"
+DIST_DIR="$REPO_ROOT/dist"
+
+E2E_NAMESPACE="${E2E_NAMESPACE:-privilegedescalation-dev}"
+E2E_RELEASE="${E2E_RELEASE:-headlamp-e2e}"
+HEADLAMP_VERSION="${HEADLAMP_VERSION:-latest}"
+
+if [ ! -d "$DIST_DIR" ]; then
+  echo "ERROR: dist/ not found. Run 'npm run build' first." >&2
+  exit 1
+fi
+
+# --- Preflight: verify RBAC before touching the cluster ---
+echo "Checking RBAC permissions in namespace '${E2E_NAMESPACE}'..."
+if ! kubectl auth can-i delete configmaps -n "$E2E_NAMESPACE" --quiet 2>/dev/null; then
+  echo "ERROR: Missing RBAC — cannot delete configmaps in namespace '${E2E_NAMESPACE}'." >&2
+  echo "  Apply RBAC first: kubectl apply -f deployment/e2e-ci-runner-rbac.yaml" >&2
+  exit 1
+fi
+
+echo "=== E2E Headlamp Deployment ==="
+echo "  Image:     ghcr.io/headlamp-k8s/headlamp:${HEADLAMP_VERSION}"
+echo "  Namespace: $E2E_NAMESPACE"
+echo "  Release:   $E2E_RELEASE"
+
+# --- Create ConfigMap from built plugin ---
+echo ""
+echo "Creating ConfigMap with plugin files..."
+
+# Delete existing ConfigMap if present (idempotent redeploy)
+kubectl delete configmap headlamp-intel-gpu-plugin \
+  -n "$E2E_NAMESPACE" --ignore-not-found
+
+# Create ConfigMap from dist/ contents and package.json
+kubectl create configmap headlamp-intel-gpu-plugin \
+  -n "$E2E_NAMESPACE" \
+  --from-file="$DIST_DIR" \
+  --from-file=package.json="$REPO_ROOT/package.json"
+
+# --- Tear down any existing E2E deployment for a clean start ---
+echo ""
+echo "Removing any existing E2E deployment (clean-start)..."
+kubectl delete deployment "${E2E_RELEASE}" -n "$E2E_NAMESPACE" --ignore-not-found --wait
+kubectl delete service "${E2E_RELEASE}" -n "$E2E_NAMESPACE" --ignore-not-found --wait
+kubectl delete serviceaccount "${E2E_RELEASE}" -n "$E2E_NAMESPACE" --ignore-not-found --wait
+
+# --- Deploy Headlamp via kubectl apply ---
+echo ""
+echo "Deploying Headlamp E2E instance..."
+
+kubectl apply -f - <<EOF
+apiVersion: v1
+kind: ServiceAccount
+metadata:
+  name: ${E2E_RELEASE}
+  namespace: ${E2E_NAMESPACE}
+---
+apiVersion: apps/v1
+kind: Deployment
+metadata:
+  name: ${E2E_RELEASE}
+  namespace: ${E2E_NAMESPACE}
+  labels:
+    app.kubernetes.io/name: headlamp
+    app.kubernetes.io/instance: ${E2E_RELEASE}
+spec:
+  replicas: 1
+  selector:
+    matchLabels:
+      app.kubernetes.io/name: headlamp
+      app.kubernetes.io/instance: ${E2E_RELEASE}
+  template:
+    metadata:
+      labels:
+        app.kubernetes.io/name: headlamp
+        app.kubernetes.io/instance: ${E2E_RELEASE}
+    spec:
+      serviceAccountName: ${E2E_RELEASE}
+      automountServiceAccountToken: true
+      securityContext: {}
+      containers:
+        - name: headlamp
+          image: ghcr.io/headlamp-k8s/headlamp:${HEADLAMP_VERSION}
+          imagePullPolicy: IfNotPresent
+          securityContext:
+            runAsNonRoot: true
+            privileged: false
+            runAsUser: 100
+            runAsGroup: 101
+          args:
+            - "-in-cluster"
+            - "-in-cluster-context-name=main"
+            - "-plugins-dir=/headlamp/plugins"
+          ports:
+            - name: http
+              containerPort: 4466
+              protocol: TCP
+          readinessProbe:
+            httpGet:
+              path: /
+              port: http
+            initialDelaySeconds: 5
+            periodSeconds: 5
+            failureThreshold: 6
+          livenessProbe:
+            httpGet:
+              path: /
+              port: http
+            initialDelaySeconds: 10
+            periodSeconds: 10
+          volumeMounts:
+            - name: intel-gpu-plugin
+              mountPath: /headlamp/plugins/headlamp-intel-gpu
+              readOnly: true
+      volumes:
+        - name: intel-gpu-plugin
+          configMap:
+            name: headlamp-intel-gpu-plugin
+---
+apiVersion: v1
+kind: Service
+metadata:
+  name: ${E2E_RELEASE}
+  namespace: ${E2E_NAMESPACE}
+  labels:
+    app.kubernetes.io/name: headlamp
+    app.kubernetes.io/instance: ${E2E_RELEASE}
+spec:
+  type: ClusterIP
+  selector:
+    app.kubernetes.io/name: headlamp
+    app.kubernetes.io/instance: ${E2E_RELEASE}
+  ports:
+    - name: http
+      port: 80
+      targetPort: http
+      protocol: TCP
+EOF
+
+echo "Waiting for rollout..."
+kubectl rollout status "deployment/${E2E_RELEASE}" \
+  -n "$E2E_NAMESPACE" --timeout=120s
+
+# --- Generate a service URL for tests ---
+SVC_URL="http://${E2E_RELEASE}.${E2E_NAMESPACE}.svc.cluster.local"
+
+# --- Wait for DNS and HTTP reachability ---
+echo ""
+echo "Waiting for ${SVC_URL} to be reachable..."
+ATTEMPTS=0
+MAX_ATTEMPTS=24  # 24 × 5s = 120s max
+until curl -sf --max-time 5 "${SVC_URL}" -o /dev/null 2>/dev/null; do
+  ATTEMPTS=$((ATTEMPTS + 1))
+  if [ "$ATTEMPTS" -ge "$MAX_ATTEMPTS" ]; then
+    echo "ERROR: ${SVC_URL} not reachable after $((MAX_ATTEMPTS * 5))s" >&2
+    exit 1
+  fi
+  echo "  [${ATTEMPTS}/${MAX_ATTEMPTS}] not yet reachable, retrying in 5s..."
+  sleep 5
+done
+echo ""
+echo "E2E Headlamp is ready at: ${SVC_URL}"
+echo "  export HEADLAMP_URL=${SVC_URL}"
+
+# --- Generate a token for test auth ---
+echo ""
+echo "Creating service account token for E2E auth..."
+kubectl create serviceaccount headlamp-e2e-test \
+  -n "$E2E_NAMESPACE" --dry-run=client -o yaml | kubectl apply -f -
+
+TOKEN=$(kubectl create token headlamp-e2e-test -n "$E2E_NAMESPACE" --duration=1h 2>/dev/null || echo "")
+if [ -n "$TOKEN" ]; then
+  echo "  export HEADLAMP_TOKEN=<generated>"
+  echo ""
+  echo "HEADLAMP_URL=${SVC_URL}" > "$REPO_ROOT/.env.e2e"
+  echo "HEADLAMP_TOKEN=${TOKEN}" >> "$REPO_ROOT/.env.e2e"
+  echo "Wrote .env.e2e with HEADLAMP_URL and HEADLAMP_TOKEN"
+else
+  echo "  WARNING: Could not generate token. Set HEADLAMP_TOKEN manually or use OIDC."
+fi
+
+echo ""
+echo "E2E deployment complete."

scripts/teardown-e2e-headlamp.sh

@@ -0,0 +1,38 @@
+#!/usr/bin/env bash
+# teardown-e2e-headlamp.sh
+#
+# Tears down the dedicated E2E Headlamp instance deployed by deploy-e2e-headlamp.sh.
+#
+# Environment:
+#   E2E_NAMESPACE  — namespace to clean up (default: privilegedescalation-dev)
+#   E2E_RELEASE    — release/resource name prefix (default: headlamp-e2e)
+set -euo pipefail
+
+REPO_ROOT="$(cd "$(dirname "$0")/.." && pwd)"
+
+E2E_NAMESPACE="${E2E_NAMESPACE:-privilegedescalation-dev}"
+E2E_RELEASE="${E2E_RELEASE:-headlamp-e2e}"
+
+echo "=== E2E Headlamp Teardown ==="
+echo "  Namespace: $E2E_NAMESPACE"
+echo "  Release:   $E2E_RELEASE"
+
+echo "Removing Headlamp Deployment, Service, and ServiceAccount..."
+kubectl delete deployment "${E2E_RELEASE}" -n "$E2E_NAMESPACE" --ignore-not-found
+kubectl delete service "${E2E_RELEASE}" -n "$E2E_NAMESPACE" --ignore-not-found
+kubectl delete serviceaccount "${E2E_RELEASE}" -n "$E2E_NAMESPACE" --ignore-not-found
+
+echo "Cleaning up ConfigMap..."
+kubectl delete configmap headlamp-intel-gpu-plugin -n "$E2E_NAMESPACE" --ignore-not-found
+
+echo "Cleaning up test service account..."
+kubectl delete serviceaccount headlamp-e2e-test -n "$E2E_NAMESPACE" --ignore-not-found
+
+# Clean up .env.e2e if present
+if [ -f "$REPO_ROOT/.env.e2e" ]; then
+  rm "$REPO_ROOT/.env.e2e"
+  echo "Removed .env.e2e"
+fi
+
+echo ""
+echo "E2E teardown complete."

src/api/IntelGpuDataContext.test.tsx

@@ -0,0 +1,154 @@
+import { ApiProxy, K8s } from '@kinvolk/headlamp-plugin/lib';
+import { act, render, renderHook, screen, waitFor } from '@testing-library/react';
+import React from 'react';
+import { describe, expect, it, vi } from 'vitest';
+import { IntelGpuDataProvider, useIntelGpuContext } from './IntelGpuDataContext';
+
+vi.mock('@kinvolk/headlamp-plugin/lib', () => ({
+  K8s: {
+    ResourceClasses: {
+      Node: { useList: vi.fn() },
+      Pod: { useList: vi.fn() },
+    },
+  },
+  ApiProxy: { request: vi.fn() },
+}));
+
+// Minimal GPU node fixture
+const gpuNodeRaw = {
+  metadata: {
+    name: 'gpu-node-1',
+    uid: 'uid-001',
+    labels: { 'intel.feature.node.kubernetes.io/gpu': 'true' },
+  },
+  status: {
+    capacity: { 'gpu.intel.com/i915': '1' },
+    allocatable: { 'gpu.intel.com/i915': '1' },
+  },
+};
+
+// Minimal GPU plugin CRD fixture
+const gpuDevicePluginRaw = {
+  kind: 'GpuDevicePlugin',
+  metadata: { name: 'gpu-plugin-default', uid: 'uid-dp-001' },
+  spec: {},
+};
+
+function makeNodeWrapper(raw: unknown) {
+  return { jsonData: raw };
+}
+
+function Wrapper({ children }: { children: React.ReactNode }) {
+  return <IntelGpuDataProvider>{children}</IntelGpuDataProvider>;
+}
+
+describe('useIntelGpuContext', () => {
+  it('throws when used outside provider', () => {
+    // Suppress React error boundary output
+    const consoleError = vi.spyOn(console, 'error').mockImplementation(() => {});
+
+    expect(() => renderHook(() => useIntelGpuContext())).toThrow(
+      'useIntelGpuContext must be used within an IntelGpuDataProvider'
+    );
+
+    consoleError.mockRestore();
+  });
+});
+
+describe('IntelGpuDataProvider', () => {
+  it('renders children', async () => {
+    vi.mocked(K8s.ResourceClasses.Node.useList).mockReturnValue([[], null] as any);
+    vi.mocked(K8s.ResourceClasses.Pod.useList).mockReturnValue([[], null] as any);
+    vi.mocked(ApiProxy.request).mockResolvedValue({ items: [] });
+
+    render(
+      <IntelGpuDataProvider>
+        <div data-testid="child">hello</div>
+      </IntelGpuDataProvider>
+    );
+
+    expect(screen.getByTestId('child')).toBeInTheDocument();
+  });
+
+  it('exposes loading=true while nodes/pods are null', async () => {
+    vi.mocked(K8s.ResourceClasses.Node.useList).mockReturnValue([null, null] as any);
+    vi.mocked(K8s.ResourceClasses.Pod.useList).mockReturnValue([null, null] as any);
+    // Keep async request pending forever
+    vi.mocked(ApiProxy.request).mockReturnValue(new Promise(() => {}));
+
+    const { result } = renderHook(() => useIntelGpuContext(), { wrapper: Wrapper });
+
+    expect(result.current.loading).toBe(true);
+  });
+
+  it('exposes loaded state with GPU nodes once data arrives', async () => {
+    vi.mocked(K8s.ResourceClasses.Node.useList).mockReturnValue([
+      [makeNodeWrapper(gpuNodeRaw)] as any,
+      null,
+    ] as any);
+    vi.mocked(K8s.ResourceClasses.Pod.useList).mockReturnValue([[], null] as any);
+    vi.mocked(ApiProxy.request).mockResolvedValue({ items: [] });
+
+    const { result } = renderHook(() => useIntelGpuContext(), { wrapper: Wrapper });
+
+    await waitFor(() => expect(result.current.loading).toBe(false));
+    expect(result.current.gpuNodes).toHaveLength(1);
+    expect(result.current.gpuNodes[0].metadata.name).toBe('gpu-node-1');
+  });
+
+  it('sets crdAvailable=true and populates devicePlugins when ApiProxy returns plugin list', async () => {
+    vi.mocked(K8s.ResourceClasses.Node.useList).mockReturnValue([[], null] as any);
+    vi.mocked(K8s.ResourceClasses.Pod.useList).mockReturnValue([[], null] as any);
+
+    // First call = CRD list, subsequent calls = plugin pod selectors (empty)
+    vi.mocked(ApiProxy.request)
+      .mockResolvedValueOnce({ items: [gpuDevicePluginRaw] })
+      .mockResolvedValue({ items: [] });
+
+    const { result } = renderHook(() => useIntelGpuContext(), { wrapper: Wrapper });
+
+    await waitFor(() => expect(result.current.loading).toBe(false));
+    expect(result.current.crdAvailable).toBe(true);
+    expect(result.current.devicePlugins).toHaveLength(1);
+    expect(result.current.devicePlugins[0].metadata.name).toBe('gpu-plugin-default');
+  });
+
+  it('sets crdAvailable=false and does not surface error when ApiProxy throws on CRD request', async () => {
+    vi.mocked(K8s.ResourceClasses.Node.useList).mockReturnValue([[], null] as any);
+    vi.mocked(K8s.ResourceClasses.Pod.useList).mockReturnValue([[], null] as any);
+
+    // First call (CRD endpoint) throws, plugin pod selectors resolve empty
+    vi.mocked(ApiProxy.request)
+      .mockRejectedValueOnce(new Error('CRD not found'))
+      .mockResolvedValue({ items: [] });
+
+    const { result } = renderHook(() => useIntelGpuContext(), { wrapper: Wrapper });
+
+    await waitFor(() => expect(result.current.loading).toBe(false));
+    expect(result.current.crdAvailable).toBe(false);
+    expect(result.current.devicePlugins).toHaveLength(0);
+    // Inner CRD error should NOT be bubbled up to the top-level error field
+    expect(result.current.error).toBeNull();
+  });
+
+  it('increments refreshKey and re-runs the effect when refresh() is called', async () => {
+    vi.mocked(K8s.ResourceClasses.Node.useList).mockReturnValue([[], null] as any);
+    vi.mocked(K8s.ResourceClasses.Pod.useList).mockReturnValue([[], null] as any);
+    vi.mocked(ApiProxy.request).mockResolvedValue({ items: [] });
+
+    const { result } = renderHook(() => useIntelGpuContext(), { wrapper: Wrapper });
+
+    await waitFor(() => expect(result.current.loading).toBe(false));
+
+    const callCountBefore = vi.mocked(ApiProxy.request).mock.calls.length;
+
+    await act(async () => {
+      result.current.refresh();
+    });
+
+    await waitFor(() => {
+      const callCountAfter = vi.mocked(ApiProxy.request).mock.calls.length;
+      expect(callCountAfter).toBeGreaterThan(callCountBefore);
+    });
+  });
+});

src/api/IntelGpuDataContext.tsx

@@ -65,6 +65,18 @@ export function useIntelGpuContext(): IntelGpuContextValue {
   return ctx;
 }
 
+// ---------------------------------------------------------------------------
+// Helpers
+// ---------------------------------------------------------------------------
+
+/** Extract raw Kubernetes JSON from Headlamp KubeObject wrappers. */
+const extractJsonData = (items: unknown[]): unknown[] =>
+  items.map(item =>
+    item && typeof item === 'object' && 'jsonData' in item
+      ? (item as { jsonData: unknown }).jsonData
+      : item
+  );
+
 // ---------------------------------------------------------------------------
 // Provider
 // ---------------------------------------------------------------------------
@@ -116,9 +128,11 @@ export function IntelGpuDataProvider({ children }: { children: React.ReactNode }
           // Intel device plugins operator deployment
           `/api/v1/pods?labelSelector=${encodeURIComponent('app=intel-gpu-plugin')}`,
           // Alternative: by component label
-          `/api/v1/pods?labelSelector=${encodeURIComponent('app.kubernetes.io/name=intel-gpu-plugin')}`,
+          `/api/v1/pods?labelSelector=${encodeURIComponent(
+            'app.kubernetes.io/name=intel-gpu-plugin'
+          )}`,
           // Intel device plugins from inteldeviceplugins-system namespace
-          `/api/v1/namespaces/inteldeviceplugins-system/pods`,
+          '/api/v1/namespaces/inteldeviceplugins-system/pods',
         ];
 
         const foundPluginPods: IntelGpuPod[] = [];
@@ -127,8 +141,8 @@ export function IntelGpuDataProvider({ children }: { children: React.ReactNode }
           try {
             const list = await ApiProxy.request(url);
             if (!cancelled && isKubeList(list)) {
-              const gpuPluinPods = filterIntelGpuPluginPods(list.items);
-              foundPluginPods.push(...gpuPluinPods);
+              const gpuPluginPods = filterIntelGpuPluginPods(list.items);
+              foundPluginPods.push(...gpuPluginPods);
             }
           } catch {
             // Silently ignore — some selectors may not match
@@ -155,7 +169,9 @@ export function IntelGpuDataProvider({ children }: { children: React.ReactNode }
     }
 
     void fetchAsync();
-    return () => { cancelled = true; };
+    return () => {
+      cancelled = true;
+    };
   }, [refreshKey]);
 
   // ---------------------------------------------------------------------------
@@ -166,13 +182,6 @@ export function IntelGpuDataProvider({ children }: { children: React.ReactNode }
   // type helpers work correctly.
   // ---------------------------------------------------------------------------
 
-  const extractJsonData = (items: unknown[]): unknown[] =>
-    items.map(item =>
-      item && typeof item === 'object' && 'jsonData' in item
-        ? (item as { jsonData: unknown }).jsonData
-        : item
-    );
-
   const gpuNodes = useMemo(() => {
     if (!allNodes) return [];
     return filterIntelGpuNodes(extractJsonData(allNodes as unknown[]));

src/api/k8s.test.ts

@@ -12,18 +12,18 @@ import {
   getNodeGpuCount,
   getNodeGpuType,
   getPodGpuRequests,
+  type GpuDevicePlugin,
   INTEL_GPU_NODE_LABEL,
   INTEL_GPU_RESOURCE,
   INTEL_GPU_XE_RESOURCE,
+  type IntelGpuNode,
+  type IntelGpuPod,
   isGpuRequestingPod,
   isIntelGpuNode,
   isKubeList,
   isNodeReady,
   pluginStatusText,
   pluginStatusToStatus,
-  type GpuDevicePlugin,
-  type IntelGpuNode,
-  type IntelGpuPod,
 } from './k8s';
 
 // ---------------------------------------------------------------------------
@@ -413,11 +413,7 @@ describe('formatGpuType', () => {
 // ---------------------------------------------------------------------------
 
 describe('pluginStatusToStatus', () => {
-  function makePlugin(
-    desired: number,
-    ready: number,
-    unavailable = 0
-  ): GpuDevicePlugin {
+  function makePlugin(desired: number, ready: number, unavailable = 0): GpuDevicePlugin {
     return {
       apiVersion: 'deviceplugin.intel.com/v1',
       kind: 'GpuDevicePlugin',

src/api/k8s.ts

@@ -28,8 +28,7 @@ export const INTEL_DISCRETE_GPU_NODE_ROLE = 'node-role.kubernetes.io/gpu';
 export const INTEL_INTEGRATED_GPU_NODE_ROLE = 'node-role.kubernetes.io/igpu';
 
 /** Label selector for Intel GPU device plugin DaemonSet pods */
-export const INTEL_GPU_PLUGIN_LABEL_SELECTOR =
-  'app=intel-gpu-plugin';
+export const INTEL_GPU_PLUGIN_LABEL_SELECTOR = 'app=intel-gpu-plugin';
 
 // ---------------------------------------------------------------------------
 // Generic Kubernetes object base shapes
@@ -194,9 +193,12 @@ export function getNodeGpuType(node: IntelGpuNode): GpuType {
 
 export function formatGpuType(type: GpuType): string {
   switch (type) {
-    case 'discrete': return 'Discrete';
-    case 'integrated': return 'Integrated';
-    default: return 'Unknown';
+    case 'discrete':
+      return 'Discrete';
+    case 'integrated':
+      return 'Integrated';
+    default:
+      return 'Unknown';
   }
 }
 
@@ -272,9 +274,11 @@ export function isIntelGpuPluginPod(pod: unknown): pod is IntelGpuPod {
   const meta = obj['metadata'] as Record<string, unknown> | undefined;
   const labels = meta?.['labels'] as Record<string, string> | undefined;
   if (!labels) return false;
-  return labels['app'] === 'intel-gpu-plugin' ||
-    (labels['app.kubernetes.io/name'] === 'intel-gpu-plugin') ||
-    (labels['component'] === 'intel-gpu-plugin');
+  return (
+    labels['app'] === 'intel-gpu-plugin' ||
+    labels['app.kubernetes.io/name'] === 'intel-gpu-plugin' ||
+    labels['component'] === 'intel-gpu-plugin'
+  );
 }
 
 export function filterIntelGpuPluginPods(items: unknown[]): IntelGpuPod[] {
@@ -284,10 +288,7 @@ export function filterIntelGpuPluginPods(items: unknown[]): IntelGpuPod[] {
 /** Get total GPU requests from a pod's containers */
 export function getPodGpuRequests(pod: IntelGpuPod): Record<string, string> {
   const totals: Record<string, number> = {};
-  const allContainers = [
-    ...(pod.spec?.containers ?? []),
-    ...(pod.spec?.initContainers ?? []),
-  ];
+  const allContainers = [...(pod.spec?.containers ?? []), ...(pod.spec?.initContainers ?? [])];
   for (const c of allContainers) {
     const requests = c.resources?.requests ?? {};
     for (const [key, value] of Object.entries(requests)) {
@@ -300,15 +301,11 @@ export function getPodGpuRequests(pod: IntelGpuPod): Record<string, string> {
 }
 
 export function isPodReady(pod: IntelGpuPod): boolean {
-  return (
-    pod.status?.conditions?.some(c => c.type === 'Ready' && c.status === 'True') ?? false
-  );
+  return pod.status?.conditions?.some(c => c.type === 'Ready' && c.status === 'True') ?? false;
 }
 
 export function getPodRestarts(pod: IntelGpuPod): number {
-  return (
-    pod.status?.containerStatuses?.reduce((sum, c) => sum + c.restartCount, 0) ?? 0
-  );
+  return pod.status?.containerStatuses?.reduce((sum, c) => sum + c.restartCount, 0) ?? 0;
 }
 
 // ---------------------------------------------------------------------------
@@ -330,9 +327,7 @@ export function isKubeList(value: unknown): value is KubeList<unknown> {
 // ---------------------------------------------------------------------------
 
 export function isNodeReady(node: IntelGpuNode): boolean {
-  return (
-    node.status?.conditions?.some(c => c.type === 'Ready' && c.status === 'True') ?? false
-  );
+  return node.status?.conditions?.some(c => c.type === 'Ready' && c.status === 'True') ?? false;
 }
 
 // ---------------------------------------------------------------------------
@@ -359,11 +354,11 @@ export function formatAge(timestamp: string | undefined): string {
 export function formatGpuResourceName(resourceKey: string): string {
   const name = resourceKey.replace(INTEL_GPU_RESOURCE_PREFIX, '');
   const map: Record<string, string> = {
-    'i915': 'GPU (i915)',
-    'xe': 'GPU (Xe)',
-    'millicores': 'GPU Millicores',
+    i915: 'GPU (i915)',
+    xe: 'GPU (Xe)',
+    millicores: 'GPU Millicores',
     'memory.max': 'GPU Memory (max)',
-    'tiles': 'GPU Tiles',
+    tiles: 'GPU Tiles',
   };
   return map[name] ?? name;
 }
@@ -372,9 +367,7 @@ export function formatGpuResourceName(resourceKey: string): string {
 // Status helpers
 // ---------------------------------------------------------------------------
 
-export function pluginStatusToStatus(
-  plugin: GpuDevicePlugin
-): 'success' | 'warning' | 'error' {
+export function pluginStatusToStatus(plugin: GpuDevicePlugin): 'success' | 'warning' | 'error' {
   const desired = plugin.status?.desiredNumberScheduled ?? 0;
   const ready = plugin.status?.numberReady ?? 0;
   const unavailable = plugin.status?.numberUnavailable ?? 0;

src/api/metrics.ts

@@ -0,0 +1,168 @@
+/**
+ * Intel GPU metrics via Prometheus (kube-prometheus-stack).
+ *
+ * The Intel i915/Xe GPU driver exposes hwmon sensors that node-exporter
+ * scrapes automatically. We query Prometheus for:
+ *   - node_hwmon_energy_joule_total  (chip_name="i915") → rate = power in W
+ *   - node_hwmon_power_max_watt      (same chip)        → TDP
+ *   - node_hwmon_chip_names          (chip_name="i915") → identify GPU chips
+ *   - node_uname_info                                   → instance → nodename
+ *
+ * Queries go through the Kubernetes API proxy to the in-cluster Prometheus
+ * service: /api/v1/namespaces/monitoring/services/{svc}:{port}/proxy/...
+ */
+
+import { ApiProxy } from '@kinvolk/headlamp-plugin/lib';
+
+// ---------------------------------------------------------------------------
+// Types
+// ---------------------------------------------------------------------------
+
+export interface GpuChipMetrics {
+  /** Kubernetes node name (e.g. "buttons") */
+  nodeName: string;
+  /** PCI chip address (e.g. "0000:09:01_0_0000:0a:00_0") */
+  chip: string;
+  /** node-exporter instance (IP:port) */
+  instance: string;
+  /** Current power draw in watts (rate of energy counter, null if unavailable) */
+  powerWatts: number | null;
+  /** Maximum / TDP power in watts */
+  powerMaxWatts: number | null;
+}
+
+export interface GpuMetrics {
+  chips: GpuChipMetrics[];
+  /** ISO timestamp of when metrics were fetched */
+  fetchedAt: string;
+}
+
+// ---------------------------------------------------------------------------
+// Prometheus query helper
+// ---------------------------------------------------------------------------
+
+interface PrometheusResult {
+  metric: Record<string, string>;
+  value: [number, string];
+}
+
+interface PrometheusResponse {
+  status: string;
+  data: {
+    resultType: string;
+    result: PrometheusResult[];
+  };
+}
+
+/**
+ * Service discovery: find the Prometheus service.
+ * Tries the kube-prometheus-stack default name; falls back to prometheus-operated.
+ */
+const PROMETHEUS_SERVICES = [
+  { namespace: 'monitoring', service: 'kube-prometheus-stack-prometheus', port: '9090' },
+  { namespace: 'monitoring', service: 'prometheus-operated', port: '9090' },
+  { namespace: 'monitoring', service: 'prometheus', port: '9090' },
+];
+
+async function queryPrometheus(query: string, prometheusPath: string): Promise<PrometheusResult[]> {
+  const encoded = encodeURIComponent(query);
+  const path = `${prometheusPath}/api/v1/query?query=${encoded}`;
+
+  const raw = (await ApiProxy.request(path, { method: 'GET' })) as PrometheusResponse;
+
+  if (raw?.status !== 'success') return [];
+  return raw.data?.result ?? [];
+}
+
+async function findPrometheusPath(): Promise<string | null> {
+  for (const { namespace, service, port } of PROMETHEUS_SERVICES) {
+    const basePath = `/api/v1/namespaces/${namespace}/services/${service}:${port}/proxy`;
+    try {
+      const raw = (await ApiProxy.request(`${basePath}/api/v1/query?query=1`, {
+        method: 'GET',
+      })) as PrometheusResponse;
+      if (raw?.status === 'success') return basePath;
+    } catch {
+      // try next
+    }
+  }
+  return null;
+}
+
+// ---------------------------------------------------------------------------
+// Metrics fetch
+// ---------------------------------------------------------------------------
+
+export async function fetchGpuMetrics(): Promise<GpuMetrics | null> {
+  const prometheusPath = await findPrometheusPath();
+  if (!prometheusPath) return null;
+
+  // Run queries in parallel
+  const [chipResults, energyRateResults, powerMaxResults, unameResults] = await Promise.all([
+    // i915 chip identification
+    queryPrometheus('node_hwmon_chip_names{chip_name="i915"}', prometheusPath),
+    // Current power (rate of cumulative energy counter)
+    queryPrometheus(
+      'rate(node_hwmon_energy_joule_total[5m]) * on(chip,instance) group_left(chip_name) node_hwmon_chip_names{chip_name="i915"}',
+      prometheusPath
+    ),
+    // TDP / max power
+    queryPrometheus(
+      'node_hwmon_power_max_watt * on(chip,instance) group_left(chip_name) node_hwmon_chip_names{chip_name="i915"}',
+      prometheusPath
+    ),
+    // instance → nodename mapping
+    queryPrometheus('node_uname_info', prometheusPath),
+  ]);
+
+  // Build instance → nodename map
+  const instanceToNode = new Map<string, string>();
+  for (const r of unameResults) {
+    const inst = r.metric['instance'];
+    const nodename = r.metric['nodename'] ?? r.metric['node'] ?? inst;
+    if (inst) instanceToNode.set(inst, nodename);
+  }
+
+  // Build chip → power map
+  const chipToPower = new Map<string, number>();
+  for (const r of energyRateResults) {
+    const chip = r.metric['chip'];
+    if (chip) chipToPower.set(chip, parseFloat(r.value[1]));
+  }
+
+  // Build chip → max power map
+  const chipToMaxPower = new Map<string, number>();
+  for (const r of powerMaxResults) {
+    const chip = r.metric['chip'];
+    if (chip) chipToMaxPower.set(chip, parseFloat(r.value[1]));
+  }
+
+  // Assemble per-chip metrics from the chip identification results
+  const chips: GpuChipMetrics[] = chipResults.map(r => {
+    const chip = r.metric['chip'] ?? '';
+    const instance = r.metric['instance'] ?? '';
+    const nodeName = instanceToNode.get(instance) ?? instance;
+    const powerWatts = chipToPower.has(chip) ? chipToPower.get(chip)! : null;
+    const powerMaxWatts = chipToMaxPower.has(chip) ? chipToMaxPower.get(chip)! : null;
+
+    return { nodeName, chip, instance, powerWatts, powerMaxWatts };
+  });
+
+  return {
+    chips,
+    fetchedAt: new Date().toISOString(),
+  };
+}
+
+// ---------------------------------------------------------------------------
+// Formatting helpers
+// ---------------------------------------------------------------------------
+
+export function formatWatts(w: number): string {
+  return `${w.toFixed(1)} W`;
+}
+
+export function formatPercent(used: number, max: number): string {
+  if (max <= 0) return '—';
+  return `${Math.round((used / max) * 100)}%`;
+}

src/components/AppBarGpuBadge.tsx

@@ -1,46 +0,0 @@
-/**
- * AppBarGpuBadge — compact Intel GPU health indicator in the Headlamp app bar.
- *
- * Shows a status chip in the top navigation bar summarising GPU plugin health.
- * Hides itself when no Intel GPU plugin is detected.
- */
-
-import { StatusLabel } from '@kinvolk/headlamp-plugin/lib/CommonComponents';
-import React from 'react';
-import { useIntelGpuContext } from '../api/IntelGpuDataContext';
-
-export default function AppBarGpuBadge() {
-  const { pluginInstalled, gpuNodes, devicePlugins, loading } = useIntelGpuContext();
-
-  // Hide when loading or no plugin present
-  if (loading || !pluginInstalled) return null;
-
-  const hasUnhealthyPlugin = devicePlugins.some(p => {
-    const desired = p.status?.desiredNumberScheduled ?? 0;
-    const ready = p.status?.numberReady ?? 0;
-    const unavailable = p.status?.numberUnavailable ?? 0;
-    return (desired > 0 && ready < desired) || unavailable > 0;
-  });
-
-  const status = hasUnhealthyPlugin ? 'warning' : 'success';
-  const nodeCount = gpuNodes.length;
-
-  return (
-    <div
-      style={{
-        display: 'flex',
-        alignItems: 'center',
-        gap: '4px',
-        padding: '0 8px',
-        cursor: 'default',
-      }}
-      title={`Intel GPU: ${nodeCount} node${nodeCount !== 1 ? 's' : ''}`}
-    >
-      <StatusLabel status={status}>
-        <span style={{ fontSize: '11px', fontWeight: 600 }}>
-          Intel GPU{nodeCount > 0 ? ` · ${nodeCount}N` : ''}
-        </span>
-      </StatusLabel>
-    </div>
-  );
-}

src/components/DevicePluginsPage.test.tsx

@@ -0,0 +1,173 @@
+import { render, screen } from '@testing-library/react';
+import React from 'react';
+import { describe, expect, it, vi } from 'vitest';
+import { IntelGpuContextValue, useIntelGpuContext } from '../api/IntelGpuDataContext';
+import { GpuDevicePlugin, IntelGpuPod } from '../api/k8s';
+import DevicePluginsPage from './DevicePluginsPage';
+
+vi.mock('@kinvolk/headlamp-plugin/lib/CommonComponents', () => ({
+  Loader: ({ title }: { title: string }) => <div data-testid="loader">{title}</div>,
+  SectionBox: ({ title, children }: { title: string; children?: React.ReactNode }) => (
+    <section>
+      <h2>{title}</h2>
+      {children}
+    </section>
+  ),
+  SectionHeader: ({ title }: { title: string }) => <h1>{title}</h1>,
+  NameValueTable: ({
+    rows,
+  }: {
+    rows: Array<{ name: React.ReactNode; value: React.ReactNode }>;
+  }) => (
+    <dl>
+      {rows.map((r, i) => (
+        <div key={i}>
+          <dt>{r.name}</dt>
+          <dd>{r.value}</dd>
+        </div>
+      ))}
+    </dl>
+  ),
+  SimpleTable: ({
+    columns,
+    data,
+  }: {
+    columns: Array<{ label: string; getter: (item: unknown) => React.ReactNode }>;
+    data: unknown[];
+  }) => (
+    <table>
+      <thead>
+        <tr>
+          {columns.map(c => (
+            <th key={c.label}>{c.label}</th>
+          ))}
+        </tr>
+      </thead>
+      <tbody>
+        {data.map((item, i) => (
+          <tr key={i}>
+            {columns.map(c => (
+              <td key={c.label}>{c.getter(item)}</td>
+            ))}
+          </tr>
+        ))}
+      </tbody>
+    </table>
+  ),
+  StatusLabel: ({ status, children }: { status: string; children?: React.ReactNode }) => (
+    <span data-status={status}>{children}</span>
+  ),
+  PercentageBar: () => <div data-testid="percentage-bar" />,
+}));
+
+vi.mock('../api/IntelGpuDataContext', () => ({
+  useIntelGpuContext: vi.fn(),
+}));
+
+function makeContext(overrides: Partial<IntelGpuContextValue> = {}): IntelGpuContextValue {
+  return {
+    devicePlugins: [],
+    pluginInstalled: false,
+    gpuNodes: [],
+    gpuPods: [],
+    pluginPods: [],
+    crdAvailable: false,
+    loading: false,
+    error: null,
+    refresh: vi.fn(),
+    ...overrides,
+  };
+}
+
+const samplePlugin: GpuDevicePlugin = {
+  kind: 'GpuDevicePlugin',
+  metadata: {
+    name: 'intel-gpu-plugin',
+    uid: 'uid-dp-1',
+    creationTimestamp: '2025-01-01T00:00:00Z',
+  },
+  spec: {
+    image: 'intel/intel-gpu-plugin:latest',
+    sharedDevNum: 4,
+    enableMonitoring: true,
+    preferredAllocationPolicy: 'balanced',
+  },
+  status: {
+    desiredNumberScheduled: 3,
+    numberReady: 3,
+  },
+};
+
+const pluginPod: IntelGpuPod = {
+  metadata: {
+    name: 'intel-gpu-plugin-abc12',
+    namespace: 'kube-system',
+    uid: 'uid-pp-1',
+  },
+  spec: { nodeName: 'worker-1' },
+  status: {
+    phase: 'Running',
+    conditions: [{ type: 'Ready', status: 'True' }],
+  },
+};
+
+describe('DevicePluginsPage', () => {
+  it('shows loader when loading=true', () => {
+    vi.mocked(useIntelGpuContext).mockReturnValue(makeContext({ loading: true }));
+    render(<DevicePluginsPage />);
+    expect(screen.getByTestId('loader')).toHaveTextContent('Loading device plugin data...');
+  });
+
+  it('shows "CRD Not Available" section when crdAvailable=false', () => {
+    vi.mocked(useIntelGpuContext).mockReturnValue(
+      makeContext({ loading: false, crdAvailable: false })
+    );
+    render(<DevicePluginsPage />);
+    expect(screen.getByText('CRD Not Available')).toBeInTheDocument();
+    expect(screen.getByText(/GpuDevicePlugin CRD.*is not installed/)).toBeInTheDocument();
+  });
+
+  it('shows "No Device Plugins" section when crdAvailable=true but devicePlugins empty', () => {
+    vi.mocked(useIntelGpuContext).mockReturnValue(
+      makeContext({ loading: false, crdAvailable: true, devicePlugins: [] })
+    );
+    render(<DevicePluginsPage />);
+    expect(screen.getByText('No Device Plugins')).toBeInTheDocument();
+    expect(screen.getByText(/No GpuDevicePlugin resources found/)).toBeInTheDocument();
+  });
+
+  it('shows plugin detail section when crdAvailable=true and devicePlugins present', () => {
+    vi.mocked(useIntelGpuContext).mockReturnValue(
+      makeContext({
+        loading: false,
+        crdAvailable: true,
+        devicePlugins: [samplePlugin],
+      })
+    );
+    render(<DevicePluginsPage />);
+    expect(screen.getByText('GpuDevicePlugin: intel-gpu-plugin')).toBeInTheDocument();
+    expect(screen.getByText('intel/intel-gpu-plugin:latest')).toBeInTheDocument();
+  });
+
+  it('shows "Plugin Daemon Pods" table when pluginPods present', () => {
+    vi.mocked(useIntelGpuContext).mockReturnValue(
+      makeContext({
+        loading: false,
+        crdAvailable: true,
+        devicePlugins: [samplePlugin],
+        pluginPods: [pluginPod],
+      })
+    );
+    render(<DevicePluginsPage />);
+    expect(screen.getByText('Plugin Daemon Pods')).toBeInTheDocument();
+    expect(screen.getByText('intel-gpu-plugin-abc12')).toBeInTheDocument();
+  });
+
+  it('shows error section when error is set', () => {
+    vi.mocked(useIntelGpuContext).mockReturnValue(
+      makeContext({ loading: false, crdAvailable: true, error: 'fetch error' })
+    );
+    render(<DevicePluginsPage />);
+    expect(screen.getByText('fetch error')).toBeInTheDocument();
+  });
+});

src/components/DevicePluginsPage.tsx

@@ -18,8 +18,7 @@ import { useIntelGpuContext } from '../api/IntelGpuDataContext';
 import { formatAge, isPodReady, pluginStatusText, pluginStatusToStatus } from '../api/k8s';
 
 export default function DevicePluginsPage() {
-  const { devicePlugins, pluginPods, crdAvailable, loading, error, refresh } =
-    useIntelGpuContext();
+  const { devicePlugins, pluginPods, crdAvailable, loading, error, refresh } = useIntelGpuContext();
 
   if (loading) {
     return <Loader title="Loading device plugin data..." />;
@@ -27,7 +26,14 @@ export default function DevicePluginsPage() {
 
   return (
     <>
-      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '20px' }}>
+      <div
+        style={{
+          display: 'flex',
+          justifyContent: 'space-between',
+          alignItems: 'center',
+          marginBottom: '20px',
+        }}
+      >
         <SectionHeader title="Intel GPU — Device Plugins" />
         <button
           onClick={refresh}
@@ -102,7 +108,10 @@ export default function DevicePluginsPage() {
       )}
 
       {devicePlugins.map(plugin => (
-        <SectionBox key={plugin.metadata.uid ?? plugin.metadata.name} title={`GpuDevicePlugin: ${plugin.metadata.name}`}>
+        <SectionBox
+          key={plugin.metadata.uid ?? plugin.metadata.name}
+          title={`GpuDevicePlugin: ${plugin.metadata.name}`}
+        >
           <NameValueTable
             rows={[
               {
@@ -146,14 +155,14 @@ export default function DevicePluginsPage() {
                 value: String(plugin.status?.numberReady ?? '—'),
               },
               ...(plugin.status?.numberUnavailable
-                ? [{
-                    name: 'Unavailable Nodes',
-                    value: (
-                      <StatusLabel status="error">
-                        {plugin.status.numberUnavailable}
-                      </StatusLabel>
-                    ),
-                  }]
+                ? [
+                    {
+                      name: 'Unavailable Nodes',
+                      value: (
+                        <StatusLabel status="error">{plugin.status.numberUnavailable}</StatusLabel>
+                      ),
+                    },
+                  ]
                 : []),
               {
                 name: 'Node Selector',
@@ -177,12 +186,12 @@ export default function DevicePluginsPage() {
         <SectionBox title="Plugin Daemon Pods">
           <SimpleTable
             columns={[
-              { label: 'Name', getter: (p) => p.metadata.name },
-              { label: 'Namespace', getter: (p) => p.metadata.namespace ?? '—' },
-              { label: 'Node', getter: (p) => p.spec?.nodeName ?? '—' },
+              { label: 'Name', getter: p => p.metadata.name },
+              { label: 'Namespace', getter: p => p.metadata.namespace ?? '—' },
+              { label: 'Node', getter: p => p.spec?.nodeName ?? '—' },
               {
                 label: 'Ready',
-                getter: (p) => (
+                getter: p => (
                   <StatusLabel status={isPodReady(p) ? 'success' : 'warning'}>
                     {isPodReady(p) ? 'Ready' : p.status?.phase ?? 'Unknown'}
                   </StatusLabel>
@@ -190,10 +199,9 @@ export default function DevicePluginsPage() {
               },
               {
                 label: 'Restarts',
-                getter: (p) => {
-                  const restarts = p.status?.containerStatuses?.reduce(
-                    (sum, c) => sum + c.restartCount, 0
-                  ) ?? 0;
+                getter: p => {
+                  const restarts =
+                    p.status?.containerStatuses?.reduce((sum, c) => sum + c.restartCount, 0) ?? 0;
                   return restarts > 0 ? (
                     <StatusLabel status="warning">{restarts}</StatusLabel>
                   ) : (
@@ -201,7 +209,7 @@ export default function DevicePluginsPage() {
                   );
                 },
               },
-              { label: 'Age', getter: (p) => formatAge(p.metadata.creationTimestamp) },
+              { label: 'Age', getter: p => formatAge(p.metadata.creationTimestamp) },
             ]}
             data={pluginPods}
           />

src/components/MetricsPage.test.tsx

@@ -0,0 +1,214 @@
+import { fireEvent, render, screen, waitFor } from '@testing-library/react';
+import React from 'react';
+import { describe, expect, it, vi } from 'vitest';
+import { IntelGpuContextValue, useIntelGpuContext } from '../api/IntelGpuDataContext';
+import { fetchGpuMetrics, GpuChipMetrics, GpuMetrics } from '../api/metrics';
+import MetricsPage from './MetricsPage';
+
+vi.mock('@kinvolk/headlamp-plugin/lib/CommonComponents', () => ({
+  Loader: ({ title }: { title: string }) => <div data-testid="loader">{title}</div>,
+  SectionBox: ({ title, children }: { title: string; children?: React.ReactNode }) => (
+    <section>
+      <h2>{title}</h2>
+      {children}
+    </section>
+  ),
+  SectionHeader: ({ title }: { title: string }) => <h1>{title}</h1>,
+  NameValueTable: ({
+    rows,
+  }: {
+    rows: Array<{ name: React.ReactNode; value: React.ReactNode }>;
+  }) => (
+    <dl>
+      {rows.map((r, i) => (
+        <div key={i}>
+          <dt>{r.name}</dt>
+          <dd>{r.value}</dd>
+        </div>
+      ))}
+    </dl>
+  ),
+  SimpleTable: ({
+    columns,
+    data,
+  }: {
+    columns: Array<{ label: string; getter: (item: unknown) => React.ReactNode }>;
+    data: unknown[];
+  }) => (
+    <table>
+      <thead>
+        <tr>
+          {columns.map(c => (
+            <th key={c.label}>{c.label}</th>
+          ))}
+        </tr>
+      </thead>
+      <tbody>
+        {data.map((item, i) => (
+          <tr key={i}>
+            {columns.map(c => (
+              <td key={c.label}>{c.getter(item)}</td>
+            ))}
+          </tr>
+        ))}
+      </tbody>
+    </table>
+  ),
+  StatusLabel: ({ status, children }: { status: string; children?: React.ReactNode }) => (
+    <span data-status={status}>{children}</span>
+  ),
+  PercentageBar: () => <div data-testid="percentage-bar" />,
+}));
+
+vi.mock('../api/IntelGpuDataContext', () => ({
+  useIntelGpuContext: vi.fn(),
+}));
+
+vi.mock('../api/metrics', () => ({
+  fetchGpuMetrics: vi.fn(),
+  formatWatts: (w: number) => `${w.toFixed(1)} W`,
+  formatPercent: (used: number, max: number) =>
+    max <= 0 ? '—' : `${Math.round((used / max) * 100)}%`,
+}));
+
+function makeContext(overrides: Partial<IntelGpuContextValue> = {}): IntelGpuContextValue {
+  return {
+    devicePlugins: [],
+    pluginInstalled: false,
+    gpuNodes: [],
+    gpuPods: [],
+    pluginPods: [],
+    crdAvailable: false,
+    loading: false,
+    error: null,
+    refresh: vi.fn(),
+    ...overrides,
+  };
+}
+
+function makeMetrics(chips: GpuChipMetrics[]): GpuMetrics {
+  return {
+    chips,
+    fetchedAt: new Date('2025-03-21T10:00:00Z').toISOString(),
+  };
+}
+
+const sampleChip: GpuChipMetrics = {
+  nodeName: 'gpu-node-1',
+  chip: '0000:09:01_0',
+  instance: '192.168.1.10:9100',
+  powerWatts: 45.3,
+  powerMaxWatts: 120.0,
+};
+
+describe('MetricsPage', () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  it('shows loader when ctxLoading=true but heading is visible immediately', () => {
+    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...');
+  });
+
+  it('shows "Prometheus Unreachable" section when fetchGpuMetrics returns null', async () => {
+    vi.mocked(useIntelGpuContext).mockReturnValue(makeContext({ loading: false }));
+    vi.mocked(fetchGpuMetrics).mockResolvedValue(null);
+
+    render(<MetricsPage />);
+
+    await waitFor(() => {
+      expect(screen.getByText('Prometheus Unreachable')).toBeInTheDocument();
+    });
+  });
+
+  it('shows "No i915 Metrics in Prometheus" when fetchGpuMetrics returns empty chips', async () => {
+    vi.mocked(useIntelGpuContext).mockReturnValue(makeContext({ loading: false }));
+    vi.mocked(fetchGpuMetrics).mockResolvedValue(makeMetrics([]));
+
+    render(<MetricsPage />);
+
+    await waitFor(() => {
+      expect(screen.getByText('No i915 Metrics in Prometheus')).toBeInTheDocument();
+    });
+  });
+
+  it('shows chip cards with node name when fetchGpuMetrics returns chips', async () => {
+    vi.mocked(useIntelGpuContext).mockReturnValue(makeContext({ loading: false }));
+    vi.mocked(fetchGpuMetrics).mockResolvedValue(makeMetrics([sampleChip]));
+
+    render(<MetricsPage />);
+
+    await waitFor(() => {
+      // GpuChipCard title format: "{nodeName} — {chip}"
+      expect(screen.getByText('gpu-node-1 — 0000:09:01_0')).toBeInTheDocument();
+    });
+  });
+
+  it('always renders MetricRequirements section', async () => {
+    vi.mocked(useIntelGpuContext).mockReturnValue(makeContext({ loading: false }));
+    vi.mocked(fetchGpuMetrics).mockResolvedValue(makeMetrics([]));
+
+    render(<MetricsPage />);
+
+    // The MetricRequirements section box is titled "Metric Availability"
+    expect(screen.getByText('Metric Availability')).toBeInTheDocument();
+  });
+
+  it('shows GPU Power Summary section when chips are present', async () => {
+    vi.mocked(useIntelGpuContext).mockReturnValue(makeContext({ loading: false }));
+    vi.mocked(fetchGpuMetrics).mockResolvedValue(makeMetrics([sampleChip]));
+
+    render(<MetricsPage />);
+
+    await waitFor(() => {
+      expect(screen.getByText('GPU Power Summary')).toBeInTheDocument();
+    });
+  });
+
+  it('re-triggers fetch when refresh button is clicked', async () => {
+    vi.mocked(useIntelGpuContext).mockReturnValue(makeContext({ loading: false }));
+    vi.mocked(fetchGpuMetrics).mockResolvedValue(makeMetrics([]));
+
+    render(<MetricsPage />);
+
+    // Wait for initial fetch to complete
+    await waitFor(() => {
+      expect(vi.mocked(fetchGpuMetrics)).toHaveBeenCalled();
+    });
+
+    const callsBefore = vi.mocked(fetchGpuMetrics).mock.calls.length;
+
+    fireEvent.click(screen.getByRole('button', { name: /refresh metrics/i }));
+
+    await waitFor(() => {
+      expect(vi.mocked(fetchGpuMetrics).mock.calls.length).toBeGreaterThan(callsBefore);
+    });
+  });
+
+  it('shows "Intel GPU — Metrics" heading', async () => {
+    vi.mocked(useIntelGpuContext).mockReturnValue(makeContext({ loading: false }));
+    vi.mocked(fetchGpuMetrics).mockResolvedValue(makeMetrics([]));
+
+    render(<MetricsPage />);
+
+    expect(screen.getByText('Intel GPU — Metrics')).toBeInTheDocument();
+  });
+
+  it('shows power values for chip cards', async () => {
+    vi.mocked(useIntelGpuContext).mockReturnValue(makeContext({ loading: false }));
+    vi.mocked(fetchGpuMetrics).mockResolvedValue(makeMetrics([sampleChip]));
+
+    render(<MetricsPage />);
+
+    await waitFor(() => {
+      // formatWatts mock: "45.3 W" and "120.0 W"
+      expect(screen.getAllByText(/45\.3 W/).length).toBeGreaterThan(0);
+    });
+  });
+});

src/components/MetricsPage.tsx

@@ -0,0 +1,355 @@
+/**
+ * MetricsPage — Intel GPU metrics from Prometheus (node-exporter hwmon).
+ *
+ * METRIC AVAILABILITY
+ * -------------------
+ * Power (current W, TDP)
+ *   Source:   node_hwmon_energy_joule_total, node_hwmon_power_max_watt
+ *   Driver:   i915 hwmon sysfs (/sys/class/drm/card{N}/device/hwmon/)
+ *   Scraped:  node-exporter hwmon collector (enabled by default)
+ *   Nodes:    Discrete GPU nodes only (i915 driver exposes hwmon; iGPU driver does not)
+ *   No extra config required — works out of the box with kube-prometheus-stack.
+ *
+ * GPU Frequency (current, boost, min, max MHz)
+ *   Source:   DRM sysfs (/sys/class/drm/card{N}/gt_{x}_freq_mhz)
+ *   Driver:   i915 kernel driver
+ *   Scraped:  NOT available -- node-exporter --collector.drm is AMD-only and does not
+ *             read i915 gt_freq sysfs files. Would require a custom exporter or
+ *             node-exporter textfile collector sidecar writing these values.
+ *
+ * GPU Utilization (engine busy %)
+ *   Source:   Not exposed via hwmon or any standard Prometheus collector for i915.
+ *             Would require intel-gpu-top, XPU Manager, or a custom DRM-based exporter.
+ *
+ * Integrated GPU (iGPU) nodes
+ *   The iGPU driver does not expose hwmon sensors. No Prometheus metrics are
+ *   available for iGPU nodes regardless of configuration.
+ */
+
+import {
+  Loader,
+  NameValueTable,
+  SectionBox,
+  SectionHeader,
+  StatusLabel,
+} from '@kinvolk/headlamp-plugin/lib/CommonComponents';
+import React, { useCallback, useEffect, useState } from 'react';
+import { useIntelGpuContext } from '../api/IntelGpuDataContext';
+import {
+  fetchGpuMetrics,
+  formatPercent,
+  formatWatts,
+  GpuChipMetrics,
+  GpuMetrics,
+} from '../api/metrics';
+
+// ---------------------------------------------------------------------------
+// Power bar
+// ---------------------------------------------------------------------------
+
+function PowerBar({ watts, maxWatts }: { watts: number; maxWatts: number | null }) {
+  const pct = maxWatts && maxWatts > 0 ? Math.min(100, Math.round((watts / maxWatts) * 100)) : null;
+  const color =
+    pct === null ? '#0071c5' : pct >= 90 ? '#d32f2f' : pct >= 70 ? '#f57c00' : '#0071c5';
+
+  return (
+    <div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
+      {pct !== null && (
+        <div
+          style={{
+            width: '100px',
+            height: '8px',
+            backgroundColor: '#e0e0e0',
+            borderRadius: '4px',
+            overflow: 'hidden',
+            flexShrink: 0,
+          }}
+        >
+          <div
+            style={{
+              width: `${pct}%`,
+              height: '100%',
+              backgroundColor: color,
+              borderRadius: '4px',
+              transition: 'width 0.4s ease',
+            }}
+          />
+        </div>
+      )}
+      <span style={{ fontSize: '13px', fontVariantNumeric: 'tabular-nums' }}>
+        {formatWatts(watts)}
+        {maxWatts !== null && maxWatts > 0 && (
+          <span style={{ color: '#888', marginLeft: '4px' }}>
+            / {formatWatts(maxWatts)} ({formatPercent(watts, maxWatts)})
+          </span>
+        )}
+      </span>
+    </div>
+  );
+}
+
+// ---------------------------------------------------------------------------
+// Per-chip card
+// ---------------------------------------------------------------------------
+
+function GpuChipCard({ chip }: { chip: GpuChipMetrics }) {
+  const rows: Array<{ name: string; value: React.ReactNode }> = [
+    { name: 'Node', value: chip.nodeName },
+    { name: 'GPU (PCI)', value: chip.chip },
+    {
+      name: 'Current Power',
+      value:
+        chip.powerWatts !== null ? (
+          <PowerBar watts={chip.powerWatts} maxWatts={chip.powerMaxWatts} />
+        ) : (
+          <StatusLabel status="warning">No data — needs ≥5m of scrape history</StatusLabel>
+        ),
+    },
+  ];
+
+  if (chip.powerMaxWatts !== null && chip.powerMaxWatts > 0) {
+    rows.push({ name: 'TDP', value: formatWatts(chip.powerMaxWatts) });
+  }
+
+  return (
+    <SectionBox title={`${chip.nodeName} — ${chip.chip}`}>
+      <NameValueTable rows={rows} />
+    </SectionBox>
+  );
+}
+
+// ---------------------------------------------------------------------------
+// Requirements info box
+// ---------------------------------------------------------------------------
+
+function MetricRequirements() {
+  return (
+    <SectionBox title="Metric Availability">
+      <NameValueTable
+        rows={[
+          {
+            name: 'Power (W)',
+            value: (
+              <>
+                <StatusLabel status="success">Available — discrete GPU nodes</StatusLabel>
+                <div style={{ marginTop: '4px', fontSize: '12px', color: '#666' }}>
+                  Source: <code>node_hwmon_energy_joule_total</code> via node-exporter hwmon
+                  collector (enabled by default). Requires the i915 kernel driver on the node. iGPU
+                  nodes do not expose hwmon sensors.
+                </div>
+              </>
+            ),
+          },
+          {
+            name: 'Frequency (MHz)',
+            value: (
+              <>
+                <StatusLabel status="error">Not available</StatusLabel>
+                <div style={{ marginTop: '4px', fontSize: '12px', color: '#666' }}>
+                  i915 exposes <code>gt_*_freq_mhz</code> via DRM sysfs but node-exporter&apos;s{' '}
+                  <code>--collector.drm</code> flag is AMD-only and does not read these files. A
+                  custom exporter or textfile-collector sidecar writing these values would be
+                  required.
+                </div>
+              </>
+            ),
+          },
+          {
+            name: 'Utilization (%)',
+            value: (
+              <>
+                <StatusLabel status="error">Not available</StatusLabel>
+                <div style={{ marginTop: '4px', fontSize: '12px', color: '#666' }}>
+                  No standard Prometheus collector exposes i915 engine busy percentage. Would
+                  require intel-gpu-top, XPU Manager, or a custom DRM-based exporter.
+                </div>
+              </>
+            ),
+          },
+          {
+            name: 'iGPU nodes',
+            value: (
+              <>
+                <StatusLabel status="error">No metrics available</StatusLabel>
+                <div style={{ marginTop: '4px', fontSize: '12px', color: '#666' }}>
+                  The integrated GPU driver does not expose hwmon sensors. No Prometheus metrics are
+                  available for iGPU nodes regardless of configuration.
+                </div>
+              </>
+            ),
+          },
+        ]}
+      />
+    </SectionBox>
+  );
+}
+
+// ---------------------------------------------------------------------------
+// Main page
+// ---------------------------------------------------------------------------
+
+export default function MetricsPage() {
+  const { gpuNodes, loading: ctxLoading } = useIntelGpuContext();
+
+  const [metrics, setMetrics] = useState<GpuMetrics | null>(null);
+  const [fetchError, setFetchError] = useState<string | null>(null);
+  const [fetching, setFetching] = useState(false);
+  const [fetchSeq, setFetchSeq] = useState(0);
+
+  const doFetch = useCallback(() => {
+    setFetchSeq(s => s + 1);
+  }, []);
+
+  useEffect(() => {
+    if (ctxLoading) return;
+
+    let cancelled = false;
+    setFetching(true);
+    setFetchError(null);
+
+    fetchGpuMetrics()
+      .then(result => {
+        if (cancelled) return;
+        setMetrics(result);
+        if (!result) {
+          setFetchError(
+            'Could not reach Prometheus. Ensure kube-prometheus-stack is installed in the monitoring namespace.'
+          );
+        }
+      })
+      .catch((e: unknown) => {
+        if (cancelled) return;
+        setFetchError(e instanceof Error ? e.message : String(e));
+      })
+      .finally(() => {
+        if (!cancelled) setFetching(false);
+      });
+
+    return () => {
+      cancelled = true;
+    };
+  }, [ctxLoading, fetchSeq]);
+
+  return (
+    <>
+      <div
+        style={{
+          display: 'flex',
+          justifyContent: 'space-between',
+          alignItems: 'center',
+          marginBottom: '20px',
+        }}
+      >
+        <SectionHeader title="Intel GPU — Metrics" />
+        <button
+          onClick={() => void doFetch()}
+          disabled={fetching || ctxLoading}
+          aria-label="Refresh metrics"
+          style={{
+            padding: '6px 16px',
+            backgroundColor: 'transparent',
+            color: 'var(--mui-palette-primary-main, #0071c5)',
+            border: '1px solid var(--mui-palette-primary-main, #0071c5)',
+            borderRadius: '4px',
+            cursor: fetching || ctxLoading ? 'not-allowed' : '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..." />}
+
+      {fetchError && (
+        <SectionBox title="Prometheus Unreachable">
+          <NameValueTable
+            rows={[
+              {
+                name: 'Error',
+                value: <StatusLabel status="error">{fetchError}</StatusLabel>,
+              },
+              {
+                name: 'Checked services',
+                value:
+                  'kube-prometheus-stack-prometheus:9090, prometheus-operated:9090, prometheus:9090 (monitoring namespace)',
+              },
+            ]}
+          />
+        </SectionBox>
+      )}
+
+      {metrics && metrics.chips.length === 0 && (
+        <SectionBox title="No i915 Metrics in Prometheus">
+          <NameValueTable
+            rows={[
+              {
+                name: 'Status',
+                value: (
+                  <StatusLabel status="warning">
+                    Prometheus reachable — no
+                    node_hwmon_chip_names&#123;chip_name=&quot;i915&quot;&#125; found
+                  </StatusLabel>
+                ),
+              },
+              {
+                name: 'GPU Nodes',
+                value:
+                  gpuNodes.length > 0
+                    ? gpuNodes.map(n => n.metadata.name).join(', ')
+                    : 'None detected',
+              },
+              {
+                name: 'Likely cause',
+                value:
+                  'node-exporter is not running on the GPU nodes, or the hwmon collector is disabled.',
+              },
+            ]}
+          />
+        </SectionBox>
+      )}
+
+      {metrics && metrics.chips.length > 0 && (
+        <>
+          <SectionBox title="GPU Power Summary">
+            <NameValueTable
+              rows={[
+                {
+                  name: 'GPUs Monitored',
+                  value: String(metrics.chips.length),
+                },
+                {
+                  name: 'Total Power',
+                  value: (() => {
+                    const total = metrics.chips.reduce((s, c) => s + (c.powerWatts ?? 0), 0);
+                    const maxTotal = metrics.chips.reduce((s, c) => s + (c.powerMaxWatts ?? 0), 0);
+                    return <PowerBar watts={total} maxWatts={maxTotal > 0 ? maxTotal : null} />;
+                  })(),
+                },
+                {
+                  name: 'Last Fetched',
+                  value: new Date(metrics.fetchedAt).toLocaleTimeString(),
+                },
+                {
+                  name: 'Query',
+                  value:
+                    'rate(node_hwmon_energy_joule_total[5m]) joined with node_hwmon_chip_names{chip_name="i915"}',
+                },
+              ]}
+            />
+          </SectionBox>
+
+          {metrics.chips.map(chip => (
+            <GpuChipCard key={`${chip.instance}-${chip.chip}`} chip={chip} />
+          ))}
+        </>
+      )}
+    </>
+  );
+}

src/components/NodeDetailSection.test.tsx

@@ -0,0 +1,143 @@
+import { render, screen } from '@testing-library/react';
+import React from 'react';
+import { describe, expect, it, vi } from 'vitest';
+import { IntelGpuContextValue, useIntelGpuContext } from '../api/IntelGpuDataContext';
+import { IntelGpuPod } from '../api/k8s';
+import NodeDetailSection from './NodeDetailSection';
+
+vi.mock('@kinvolk/headlamp-plugin/lib/CommonComponents', () => ({
+  SectionBox: ({ title, children }: { title: string; children?: React.ReactNode }) => (
+    <section>
+      <h2>{title}</h2>
+      {children}
+    </section>
+  ),
+  NameValueTable: ({
+    rows,
+  }: {
+    rows: Array<{ name: React.ReactNode; value: React.ReactNode }>;
+  }) => (
+    <dl>
+      {rows.map((r, i) => (
+        <div key={i}>
+          <dt>{r.name}</dt>
+          <dd>{r.value}</dd>
+        </div>
+      ))}
+    </dl>
+  ),
+  StatusLabel: ({ status, children }: { status: string; children?: React.ReactNode }) => (
+    <span data-status={status}>{children}</span>
+  ),
+}));
+
+vi.mock('../api/IntelGpuDataContext', () => ({
+  useIntelGpuContext: vi.fn(),
+}));
+
+function makeContext(overrides: Partial<IntelGpuContextValue> = {}): IntelGpuContextValue {
+  return {
+    devicePlugins: [],
+    pluginInstalled: false,
+    gpuNodes: [],
+    gpuPods: [],
+    pluginPods: [],
+    crdAvailable: false,
+    loading: false,
+    error: null,
+    refresh: vi.fn(),
+    ...overrides,
+  };
+}
+
+// A raw GPU node (matches IntelGpuNode shape) with capacity/allocatable
+const gpuNodeRaw = {
+  kind: 'Node',
+  metadata: {
+    name: 'gpu-node-1',
+    labels: { 'intel.feature.node.kubernetes.io/gpu': 'true' },
+  },
+  status: {
+    capacity: { 'gpu.intel.com/i915': '2', cpu: '8' },
+    allocatable: { 'gpu.intel.com/i915': '2', cpu: '8' },
+    nodeInfo: {
+      kernelVersion: '5.15.0-generic',
+      osImage: 'Ubuntu 22.04.3 LTS',
+    },
+  },
+};
+
+// A non-GPU node — no labels, no gpu.intel.com capacity
+const nonGpuNodeRaw = {
+  kind: 'Node',
+  metadata: {
+    name: 'plain-node-1',
+    labels: {},
+  },
+  status: {
+    capacity: { cpu: '4', memory: '8Gi' },
+    allocatable: { cpu: '4', memory: '8Gi' },
+  },
+};
+
+describe('NodeDetailSection', () => {
+  it('renders nothing for a non-GPU node (no Intel GPU labels or capacity)', () => {
+    vi.mocked(useIntelGpuContext).mockReturnValue(makeContext());
+    const { container } = render(<NodeDetailSection resource={nonGpuNodeRaw} />);
+    expect(container).toBeEmptyDOMElement();
+  });
+
+  it('renders nothing for a non-GPU node passed via jsonData wrapper', () => {
+    vi.mocked(useIntelGpuContext).mockReturnValue(makeContext());
+    const { container } = render(<NodeDetailSection resource={{ jsonData: nonGpuNodeRaw }} />);
+    expect(container).toBeEmptyDOMElement();
+  });
+
+  it('renders "Intel GPU" section for a GPU node provided via jsonData', () => {
+    vi.mocked(useIntelGpuContext).mockReturnValue(makeContext({ loading: false, gpuPods: [] }));
+    render(<NodeDetailSection resource={{ jsonData: gpuNodeRaw }} />);
+    expect(screen.getByText('Intel GPU')).toBeInTheDocument();
+  });
+
+  it('renders "Intel GPU" section for a GPU node provided directly', () => {
+    vi.mocked(useIntelGpuContext).mockReturnValue(makeContext({ loading: false, gpuPods: [] }));
+    render(<NodeDetailSection resource={gpuNodeRaw} />);
+    expect(screen.getByText('Intel GPU')).toBeInTheDocument();
+  });
+
+  it('renders capacity and allocatable rows', () => {
+    vi.mocked(useIntelGpuContext).mockReturnValue(makeContext({ loading: false, gpuPods: [] }));
+    render(<NodeDetailSection resource={gpuNodeRaw} />);
+    // GPU (i915) capacity and allocatable rows
+    expect(screen.getByText('GPU (i915) (capacity)')).toBeInTheDocument();
+    expect(screen.getByText('GPU (i915) (allocatable)')).toBeInTheDocument();
+  });
+
+  it('shows "None" for GPU Workload Pods when no pods are on the node and not loading', () => {
+    vi.mocked(useIntelGpuContext).mockReturnValue(makeContext({ loading: false, gpuPods: [] }));
+    render(<NodeDetailSection resource={gpuNodeRaw} />);
+    expect(screen.getByText('None')).toBeInTheDocument();
+  });
+
+  it('shows "Loading…" for GPU Workload Pods when context is loading', () => {
+    vi.mocked(useIntelGpuContext).mockReturnValue(makeContext({ loading: true, gpuPods: [] }));
+    render(<NodeDetailSection resource={gpuNodeRaw} />);
+    expect(screen.getByText('Loading…')).toBeInTheDocument();
+  });
+
+  it('lists pod names when GPU pods are scheduled on the node', () => {
+    const gpuPod: IntelGpuPod = {
+      metadata: { name: 'my-gpu-pod', namespace: 'default', uid: 'uid-pod-1' },
+      spec: {
+        nodeName: 'gpu-node-1',
+        containers: [{ name: 'main', resources: { requests: { 'gpu.intel.com/i915': '1' } } }],
+      },
+      status: { phase: 'Running' },
+    };
+    vi.mocked(useIntelGpuContext).mockReturnValue(
+      makeContext({ loading: false, gpuPods: [gpuPod] })
+    );
+    render(<NodeDetailSection resource={gpuNodeRaw} />);
+    expect(screen.getByText('my-gpu-pod')).toBeInTheDocument();
+  });
+});

src/components/NodeDetailSection.tsx

@@ -19,10 +19,8 @@ import {
   getGpuResources,
   getNodeGpuType,
   INTEL_GPU_RESOURCE,
-  INTEL_GPU_RESOURCE_PREFIX,
   INTEL_GPU_XE_RESOURCE,
   isIntelGpuNode,
-  isNodeReady,
 } from '../api/k8s';
 
 interface NodeDetailSectionProps {
@@ -40,9 +38,7 @@ export default function NodeDetailSection({ resource }: NodeDetailSectionProps)
 
   // Extract the raw Kubernetes JSON — Headlamp KubeObject wraps it in jsonData
   const rawNode =
-    resource.jsonData && typeof resource.jsonData === 'object'
-      ? resource.jsonData
-      : resource;
+    resource.jsonData && typeof resource.jsonData === 'object' ? resource.jsonData : resource;
 
   // Only render for Node resources that have Intel GPU
   if (!isIntelGpuNode(rawNode)) return null;
@@ -56,16 +52,14 @@ export default function NodeDetailSection({ resource }: NodeDetailSectionProps)
     metadata: { name: string; labels?: Record<string, string> };
   };
 
-  const nodeName = (node as { metadata: { name: string } }).metadata.name;
-  const capacity = getGpuResources((node as any).status?.capacity);
-  const allocatable = getGpuResources((node as any).status?.allocatable);
+  const nodeName = node.metadata.name;
+  const capacity = getGpuResources(node.status?.capacity);
+  const allocatable = getGpuResources(node.status?.allocatable);
 
-  const gpuType = getNodeGpuType(node as any);
+  const gpuType = getNodeGpuType(node);
 
   // Find GPU pods scheduled on this node
-  const podsOnNode = loading
-    ? []
-    : gpuPods.filter(p => p.spec?.nodeName === nodeName);
+  const podsOnNode = loading ? [] : gpuPods.filter(p => p.spec?.nodeName === nodeName);
 
   if (Object.keys(capacity).length === 0 && Object.keys(allocatable).length === 0) {
     return null;
@@ -81,18 +75,18 @@ export default function NodeDetailSection({ resource }: NodeDetailSectionProps)
     }
   }
   for (const pod of podsOnNode.filter(p => p.status?.phase === 'Running')) {
-    const reqs = pod.spec?.containers?.flatMap(c =>
-      Object.entries(c.resources?.requests ?? {}).filter(([k]) =>
-        k === INTEL_GPU_RESOURCE || k === INTEL_GPU_XE_RESOURCE
-      )
-    ) ?? [];
+    const reqs =
+      pod.spec?.containers?.flatMap(c =>
+        Object.entries(c.resources?.requests ?? {}).filter(
+          ([k]) => k === INTEL_GPU_RESOURCE || k === INTEL_GPU_XE_RESOURCE
+        )
+      ) ?? [];
     for (const [, val] of reqs) {
       gpuInUse += parseInt(val, 10) || 0;
     }
   }
 
-  const utilizationPct =
-    gpuAllocatable > 0 ? Math.round((gpuInUse / gpuAllocatable) * 100) : 0;
+  const utilizationPct = gpuAllocatable > 0 ? Math.round((gpuInUse / gpuAllocatable) * 100) : 0;
   const utilizationStatus: 'success' | 'warning' | 'error' =
     utilizationPct >= 90 ? 'error' : utilizationPct >= 70 ? 'warning' : 'success';
 

src/components/NodesPage.test.tsx

@@ -0,0 +1,153 @@
+import { render, screen } from '@testing-library/react';
+import React from 'react';
+import { describe, expect, it, vi } from 'vitest';
+import { IntelGpuContextValue, useIntelGpuContext } from '../api/IntelGpuDataContext';
+import { IntelGpuNode } from '../api/k8s';
+import NodesPage from './NodesPage';
+
+vi.mock('@kinvolk/headlamp-plugin/lib/CommonComponents', () => ({
+  Loader: ({ title }: { title: string }) => <div data-testid="loader">{title}</div>,
+  SectionBox: ({ title, children }: { title: string; children?: React.ReactNode }) => (
+    <section>
+      <h2>{title}</h2>
+      {children}
+    </section>
+  ),
+  SectionHeader: ({ title }: { title: string }) => <h1>{title}</h1>,
+  NameValueTable: ({
+    rows,
+  }: {
+    rows: Array<{ name: React.ReactNode; value: React.ReactNode }>;
+  }) => (
+    <dl>
+      {rows.map((r, i) => (
+        <div key={i}>
+          <dt>{r.name}</dt>
+          <dd>{r.value}</dd>
+        </div>
+      ))}
+    </dl>
+  ),
+  SimpleTable: ({
+    columns,
+    data,
+  }: {
+    columns: Array<{ label: string; getter: (item: unknown) => React.ReactNode }>;
+    data: unknown[];
+  }) => (
+    <table>
+      <thead>
+        <tr>
+          {columns.map(c => (
+            <th key={c.label}>{c.label}</th>
+          ))}
+        </tr>
+      </thead>
+      <tbody>
+        {data.map((item, i) => (
+          <tr key={i}>
+            {columns.map(c => (
+              <td key={c.label}>{c.getter(item)}</td>
+            ))}
+          </tr>
+        ))}
+      </tbody>
+    </table>
+  ),
+  StatusLabel: ({ status, children }: { status: string; children?: React.ReactNode }) => (
+    <span data-status={status}>{children}</span>
+  ),
+  PercentageBar: () => <div data-testid="percentage-bar" />,
+}));
+
+vi.mock('../api/IntelGpuDataContext', () => ({
+  useIntelGpuContext: vi.fn(),
+}));
+
+function makeContext(overrides: Partial<IntelGpuContextValue> = {}): IntelGpuContextValue {
+  return {
+    devicePlugins: [],
+    pluginInstalled: false,
+    gpuNodes: [],
+    gpuPods: [],
+    pluginPods: [],
+    crdAvailable: false,
+    loading: false,
+    error: null,
+    refresh: vi.fn(),
+    ...overrides,
+  };
+}
+
+const gpuNode: IntelGpuNode = {
+  metadata: {
+    name: 'gpu-node-1',
+    uid: 'uid-001',
+    labels: { 'intel.feature.node.kubernetes.io/gpu': 'true' },
+    creationTimestamp: '2025-01-01T00:00:00Z',
+  },
+  status: {
+    capacity: { 'gpu.intel.com/i915': '2', cpu: '8' },
+    allocatable: { 'gpu.intel.com/i915': '2', cpu: '8' },
+    conditions: [{ type: 'Ready', status: 'True' }],
+    nodeInfo: {
+      osImage: 'Ubuntu 22.04',
+      kernelVersion: '5.15.0',
+      kubeletVersion: 'v1.28.0',
+    },
+  },
+};
+
+describe('NodesPage', () => {
+  it('shows loader when loading=true', () => {
+    vi.mocked(useIntelGpuContext).mockReturnValue(makeContext({ loading: true }));
+    render(<NodesPage />);
+    expect(screen.getByTestId('loader')).toHaveTextContent('Loading GPU node data...');
+  });
+
+  it('shows "No GPU Nodes Found" when gpuNodes is empty', () => {
+    vi.mocked(useIntelGpuContext).mockReturnValue(makeContext({ loading: false, gpuNodes: [] }));
+    render(<NodesPage />);
+    expect(screen.getByText('No GPU Nodes Found')).toBeInTheDocument();
+  });
+
+  it('shows "GPU Node Summary" section and per-node detail card when gpuNodes present', () => {
+    vi.mocked(useIntelGpuContext).mockReturnValue(
+      makeContext({ loading: false, gpuNodes: [gpuNode] })
+    );
+    render(<NodesPage />);
+    expect(screen.getByText('GPU Node Summary')).toBeInTheDocument();
+    // Node name appears in both the summary table and the detail card section header
+    expect(screen.getAllByText('gpu-node-1').length).toBeGreaterThanOrEqual(1);
+  });
+
+  it('renders a detail card for each GPU node', () => {
+    const secondNode: IntelGpuNode = {
+      metadata: {
+        name: 'gpu-node-2',
+        uid: 'uid-002',
+        labels: { 'intel.feature.node.kubernetes.io/gpu': 'true' },
+      },
+      status: {
+        capacity: { 'gpu.intel.com/i915': '1' },
+        allocatable: { 'gpu.intel.com/i915': '1' },
+        conditions: [{ type: 'Ready', status: 'True' }],
+      },
+    };
+    vi.mocked(useIntelGpuContext).mockReturnValue(
+      makeContext({ loading: false, gpuNodes: [gpuNode, secondNode] })
+    );
+    render(<NodesPage />);
+    // Node names appear in both the summary table cell and the detail card heading
+    expect(screen.getAllByText('gpu-node-1').length).toBeGreaterThanOrEqual(1);
+    expect(screen.getAllByText('gpu-node-2').length).toBeGreaterThanOrEqual(1);
+  });
+
+  it('shows error section when error is set', () => {
+    vi.mocked(useIntelGpuContext).mockReturnValue(
+      makeContext({ loading: false, error: 'node fetch failed', gpuNodes: [] })
+    );
+    render(<NodesPage />);
+    expect(screen.getByText('node fetch failed')).toBeInTheDocument();
+  });
+});

src/components/NodesPage.tsx

@@ -23,7 +23,6 @@ import {
   getNodeGpuCount,
   getNodeGpuType,
   INTEL_GPU_RESOURCE,
-  INTEL_GPU_RESOURCE_PREFIX,
   INTEL_GPU_XE_RESOURCE,
   IntelGpuNode,
   isNodeReady,
@@ -33,13 +32,7 @@ import {
 // GPU allocation bar component
 // ---------------------------------------------------------------------------
 
-function GpuAllocationBar({
-  used,
-  allocatable,
-}: {
-  used: number;
-  allocatable: number;
-}) {
+function GpuAllocationBar({ used, allocatable }: { used: number; allocatable: number }) {
   if (allocatable === 0) return <span>—</span>;
   const pct = Math.min(100, Math.round((used / allocatable) * 100));
   const color = pct >= 90 ? '#d32f2f' : pct >= 70 ? '#f57c00' : '#0071c5';
@@ -105,21 +98,18 @@ function NodeDetailCard({
             name: 'GPU Type',
             value: formatGpuType(gpuType),
           },
-          ...(gpuCount > 0
-            ? [{ name: 'GPU Devices (i915/xe)', value: String(gpuCount) }]
-            : []),
+          ...(gpuCount > 0 ? [{ name: 'GPU Devices (i915/xe)', value: String(gpuCount) }] : []),
           ...Object.entries(capacityResources).map(([key, cap]) => {
-            const alloc = parseInt(allocatableResources[key] ?? '0', 10);
             const total = parseInt(cap, 10);
             return {
               name: `${formatGpuResourceName(key)} (capacity)`,
               value: String(total),
             };
           }),
-          ...Object.entries(allocatableResources).map(([key, alloc]) => {
+          ...Object.entries(allocatableResources).map(([key, value]) => {
             return {
               name: `${formatGpuResourceName(key)} (allocatable)`,
-              value: alloc ?? '0',
+              value: value ?? '0',
             };
           }),
           {
@@ -200,7 +190,14 @@ export default function NodesPage() {
 
   return (
     <>
-      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '20px' }}>
+      <div
+        style={{
+          display: 'flex',
+          justifyContent: 'space-between',
+          alignItems: 'center',
+          marginBottom: '20px',
+        }}
+      >
         <SectionHeader title="Intel GPU — Nodes" />
         <button
           onClick={refresh}
@@ -256,28 +253,28 @@ export default function NodesPage() {
         <SectionBox title="GPU Node Summary">
           <SimpleTable
             columns={[
-              { label: 'Node', getter: (d) => d.node.metadata.name },
+              { label: 'Node', getter: d => d.node.metadata.name },
               {
                 label: 'Ready',
-                getter: (d) => (
+                getter: d => (
                   <StatusLabel status={d.ready ? 'success' : 'error'}>
                     {d.ready ? 'Ready' : 'Not Ready'}
                   </StatusLabel>
                 ),
               },
-              { label: 'GPU Type', getter: (d) => formatGpuType(d.gpuType) },
-              { label: 'GPU Devices', getter: (d) => String(d.gpuCount || '—') },
+              { label: 'GPU Type', getter: d => formatGpuType(d.gpuType) },
+              { label: 'GPU Devices', getter: d => String(d.gpuCount || '—') },
               {
                 label: 'Allocation',
-                getter: (d) => (
+                getter: d => (
                   <GpuAllocationBar
                     used={d.podsOnNode.length}
                     allocatable={d.totalAllocatable || d.gpuCount}
                   />
                 ),
               },
-              { label: 'GPU Pods', getter: (d) => String(d.podsOnNode.length) },
-              { label: 'Age', getter: (d) => formatAge(d.node.metadata.creationTimestamp) },
+              { label: 'GPU Pods', getter: d => String(d.podsOnNode.length) },
+              { label: 'Age', getter: d => formatAge(d.node.metadata.creationTimestamp) },
             ]}
             data={tableData}
           />

src/components/OverviewPage.test.tsx

@@ -0,0 +1,198 @@
+import { fireEvent, render, screen } from '@testing-library/react';
+import React from 'react';
+import { describe, expect, it, vi } from 'vitest';
+import { IntelGpuContextValue, useIntelGpuContext } from '../api/IntelGpuDataContext';
+import { GpuDevicePlugin, IntelGpuNode, IntelGpuPod } from '../api/k8s';
+import OverviewPage from './OverviewPage';
+
+vi.mock('@kinvolk/headlamp-plugin/lib/CommonComponents', () => ({
+  Loader: ({ title }: { title: string }) => <div data-testid="loader">{title}</div>,
+  SectionBox: ({ title, children }: { title: string; children?: React.ReactNode }) => (
+    <section>
+      <h2>{title}</h2>
+      {children}
+    </section>
+  ),
+  SectionHeader: ({ title }: { title: string }) => <h1>{title}</h1>,
+  NameValueTable: ({
+    rows,
+  }: {
+    rows: Array<{ name: React.ReactNode; value: React.ReactNode }>;
+  }) => (
+    <dl>
+      {rows.map((r, i) => (
+        <div key={i}>
+          <dt>{r.name}</dt>
+          <dd>{r.value}</dd>
+        </div>
+      ))}
+    </dl>
+  ),
+  SimpleTable: ({
+    columns,
+    data,
+  }: {
+    columns: Array<{ label: string; getter: (item: unknown) => React.ReactNode }>;
+    data: unknown[];
+  }) => (
+    <table>
+      <thead>
+        <tr>
+          {columns.map(c => (
+            <th key={c.label}>{c.label}</th>
+          ))}
+        </tr>
+      </thead>
+      <tbody>
+        {data.map((item, i) => (
+          <tr key={i}>
+            {columns.map(c => (
+              <td key={c.label}>{c.getter(item)}</td>
+            ))}
+          </tr>
+        ))}
+      </tbody>
+    </table>
+  ),
+  StatusLabel: ({ status, children }: { status: string; children?: React.ReactNode }) => (
+    <span data-status={status}>{children}</span>
+  ),
+  PercentageBar: () => <div data-testid="percentage-bar" />,
+}));
+
+vi.mock('../api/IntelGpuDataContext', () => ({
+  useIntelGpuContext: vi.fn(),
+}));
+
+function makeContext(overrides: Partial<IntelGpuContextValue> = {}): IntelGpuContextValue {
+  return {
+    devicePlugins: [],
+    pluginInstalled: false,
+    gpuNodes: [],
+    gpuPods: [],
+    pluginPods: [],
+    crdAvailable: false,
+    loading: false,
+    error: null,
+    refresh: vi.fn(),
+    ...overrides,
+  };
+}
+
+describe('OverviewPage', () => {
+  it('shows loader when loading=true', () => {
+    vi.mocked(useIntelGpuContext).mockReturnValue(makeContext({ loading: true }));
+    render(<OverviewPage />);
+    expect(screen.getByTestId('loader')).toHaveTextContent('Loading Intel GPU data...');
+  });
+
+  it('shows "Plugin Not Detected" when not loading, no plugin installed, no nodes', () => {
+    vi.mocked(useIntelGpuContext).mockReturnValue(
+      makeContext({ loading: false, pluginInstalled: false, gpuNodes: [] })
+    );
+    render(<OverviewPage />);
+    expect(screen.getByText('Plugin Not Detected')).toBeInTheDocument();
+  });
+
+  it('shows error content when error is set', () => {
+    const errorMsg = 'something went wrong';
+    vi.mocked(useIntelGpuContext).mockReturnValue(
+      makeContext({ loading: false, error: errorMsg, pluginInstalled: true })
+    );
+    render(<OverviewPage />);
+    expect(screen.getByText(errorMsg)).toBeInTheDocument();
+  });
+
+  it('shows "Intel GPU — Overview" heading when gpuNodes present and pluginInstalled', () => {
+    const node: IntelGpuNode = {
+      metadata: {
+        name: 'gpu-node-1',
+        labels: { 'intel.feature.node.kubernetes.io/gpu': 'true' },
+      },
+      status: {
+        capacity: { 'gpu.intel.com/i915': '1' },
+        allocatable: { 'gpu.intel.com/i915': '1' },
+      },
+    };
+    vi.mocked(useIntelGpuContext).mockReturnValue(
+      makeContext({ loading: false, pluginInstalled: true, gpuNodes: [node] })
+    );
+    render(<OverviewPage />);
+    expect(screen.getByText('Intel GPU — Overview')).toBeInTheDocument();
+  });
+
+  it('calls refresh() when refresh button is clicked', () => {
+    const refresh = vi.fn();
+    vi.mocked(useIntelGpuContext).mockReturnValue(
+      makeContext({ loading: false, pluginInstalled: true, refresh })
+    );
+    render(<OverviewPage />);
+    fireEvent.click(screen.getByRole('button', { name: /refresh intel gpu data/i }));
+    expect(refresh).toHaveBeenCalledTimes(1);
+  });
+
+  it('shows CRD notice when crdAvailable=false and pluginInstalled=true', () => {
+    vi.mocked(useIntelGpuContext).mockReturnValue(
+      makeContext({ loading: false, pluginInstalled: true, crdAvailable: false })
+    );
+    render(<OverviewPage />);
+    expect(screen.getByText('Notice')).toBeInTheDocument();
+    expect(screen.getByText(/GpuDevicePlugin CRD not found/)).toBeInTheDocument();
+  });
+
+  it('shows "Device Plugin Status" table when crdAvailable=true and devicePlugins present', () => {
+    const plugin: GpuDevicePlugin = {
+      kind: 'GpuDevicePlugin',
+      metadata: { name: 'my-plugin', uid: 'uid-1' },
+      spec: { enableMonitoring: true, sharedDevNum: 2 },
+      status: { desiredNumberScheduled: 1, numberReady: 1 },
+    };
+    vi.mocked(useIntelGpuContext).mockReturnValue(
+      makeContext({
+        loading: false,
+        pluginInstalled: true,
+        crdAvailable: true,
+        devicePlugins: [plugin],
+      })
+    );
+    render(<OverviewPage />);
+    expect(screen.getByText('Device Plugin Status')).toBeInTheDocument();
+    expect(screen.getByText('my-plugin')).toBeInTheDocument();
+  });
+
+  it('shows "Plugin Daemon Pods" table when pluginPods present', () => {
+    const pod: IntelGpuPod = {
+      metadata: { name: 'plugin-pod-1', namespace: 'kube-system', uid: 'uid-pp-1' },
+      spec: { nodeName: 'node-1' },
+      status: { phase: 'Running' },
+    };
+    vi.mocked(useIntelGpuContext).mockReturnValue(
+      makeContext({ loading: false, pluginInstalled: true, pluginPods: [pod] })
+    );
+    render(<OverviewPage />);
+    expect(screen.getByText('Plugin Daemon Pods')).toBeInTheDocument();
+    expect(screen.getByText('plugin-pod-1')).toBeInTheDocument();
+  });
+
+  it('shows "Active GPU Pods" table when running GPU pods exist', () => {
+    const pod: IntelGpuPod = {
+      metadata: { name: 'workload-pod-1', namespace: 'default', uid: 'uid-wp-1' },
+      spec: {
+        nodeName: 'gpu-node-1',
+        containers: [
+          {
+            name: 'main',
+            resources: { requests: { 'gpu.intel.com/i915': '1' } },
+          },
+        ],
+      },
+      status: { phase: 'Running' },
+    };
+    vi.mocked(useIntelGpuContext).mockReturnValue(
+      makeContext({ loading: false, pluginInstalled: true, gpuPods: [pod] })
+    );
+    render(<OverviewPage />);
+    expect(screen.getByText('Active GPU Pods')).toBeInTheDocument();
+    expect(screen.getByText('workload-pod-1')).toBeInTheDocument();
+  });
+});

src/components/OverviewPage.tsx

@@ -18,7 +18,6 @@ import React from 'react';
 import { useIntelGpuContext } from '../api/IntelGpuDataContext';
 import {
   formatAge,
-  formatGpuType,
   getNodeGpuCount,
   getNodeGpuType,
   getPodGpuRequests,
@@ -42,7 +41,8 @@ function gpuTypeChartData(
 ): Array<{ name: string; value: number; fill: string }> {
   const data = [];
   if (discreteCount > 0) data.push({ name: 'Discrete', value: discreteCount, fill: '#0071c5' });
-  if (integratedCount > 0) data.push({ name: 'Integrated', value: integratedCount, fill: '#60a4dc' });
+  if (integratedCount > 0)
+    data.push({ name: 'Integrated', value: integratedCount, fill: '#60a4dc' });
   if (unknownCount > 0) data.push({ name: 'Unknown', value: unknownCount, fill: '#9e9e9e' });
   return data;
 }
@@ -113,9 +113,7 @@ export default function OverviewPage() {
   }
 
   const gpuUtilizationPct =
-    totalCapacityGpus > 0
-      ? Math.round((totalAllocatedGpus / totalCapacityGpus) * 100)
-      : 0;
+    totalCapacityGpus > 0 ? Math.round((totalAllocatedGpus / totalCapacityGpus) * 100) : 0;
 
   const chartData = gpuTypeChartData(discreteCount, integratedCount, unknownCount);
   const totalGpuNodes = gpuNodes.length;
@@ -133,7 +131,14 @@ export default function OverviewPage() {
 
   return (
     <>
-      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '20px' }}>
+      <div
+        style={{
+          display: 'flex',
+          justifyContent: 'space-between',
+          alignItems: 'center',
+          marginBottom: '20px',
+        }}
+      >
         <SectionHeader title="Intel GPU — Overview" />
         <button
           onClick={refresh}
@@ -218,26 +223,25 @@ export default function OverviewPage() {
         <SectionBox title="Device Plugin Status">
           <SimpleTable
             columns={[
-              { label: 'Name', getter: (p) => p.metadata.name },
+              { label: 'Name', getter: p => p.metadata.name },
               {
                 label: 'Status',
-                getter: (p) => (
-                  <StatusLabel status={pluginStatusToStatus(p)}>
-                    {pluginStatusText(p)}
-                  </StatusLabel>
+                getter: p => (
+                  <StatusLabel status={pluginStatusToStatus(p)}>{pluginStatusText(p)}</StatusLabel>
                 ),
               },
               {
                 label: 'Monitoring',
-                getter: (p) => p.spec.enableMonitoring ? (
-                  <StatusLabel status="success">Enabled</StatusLabel>
-                ) : (
-                  <StatusLabel status="warning">Disabled</StatusLabel>
-                ),
+                getter: p =>
+                  p.spec.enableMonitoring ? (
+                    <StatusLabel status="success">Enabled</StatusLabel>
+                  ) : (
+                    <StatusLabel status="warning">Disabled</StatusLabel>
+                  ),
               },
-              { label: 'Shared/Node', getter: (p) => String(p.spec.sharedDevNum ?? 1) },
-              { label: 'Policy', getter: (p) => p.spec.preferredAllocationPolicy ?? '—' },
-              { label: 'Age', getter: (p) => formatAge(p.metadata.creationTimestamp) },
+              { label: 'Shared/Node', getter: p => String(p.spec.sharedDevNum ?? 1) },
+              { label: 'Policy', getter: p => p.spec.preferredAllocationPolicy ?? '—' },
+              { label: 'Age', getter: p => formatAge(p.metadata.creationTimestamp) },
             ]}
             data={devicePlugins}
           />
@@ -249,18 +253,18 @@ export default function OverviewPage() {
         <SectionBox title="Plugin Daemon Pods">
           <SimpleTable
             columns={[
-              { label: 'Name', getter: (p) => p.metadata.name },
-              { label: 'Namespace', getter: (p) => p.metadata.namespace ?? '—' },
-              { label: 'Node', getter: (p) => p.spec?.nodeName ?? '—' },
+              { label: 'Name', getter: p => p.metadata.name },
+              { label: 'Namespace', getter: p => p.metadata.namespace ?? '—' },
+              { label: 'Node', getter: p => p.spec?.nodeName ?? '—' },
               {
                 label: 'Status',
-                getter: (p) => (
+                getter: p => (
                   <StatusLabel status={isPodReady(p) ? 'success' : 'warning'}>
                     {isPodReady(p) ? 'Ready' : p.status?.phase ?? 'Unknown'}
                   </StatusLabel>
                 ),
               },
-              { label: 'Age', getter: (p) => formatAge(p.metadata.creationTimestamp) },
+              { label: 'Age', getter: p => formatAge(p.metadata.creationTimestamp) },
             ]}
             data={pluginPods}
           />
@@ -271,7 +275,13 @@ export default function OverviewPage() {
       <SectionBox title="GPU Nodes">
         {totalGpuNodes > 0 && chartData.length > 0 && (
           <div style={{ marginBottom: '16px' }}>
-            <div style={{ marginBottom: '8px', fontSize: '14px', color: 'var(--mui-palette-text-secondary)' }}>
+            <div
+              style={{
+                marginBottom: '8px',
+                fontSize: '14px',
+                color: 'var(--mui-palette-text-secondary)',
+              }}
+            >
               GPU Type Distribution
             </div>
             <PercentageBar data={chartData} total={totalGpuNodes} />
@@ -288,9 +298,15 @@ export default function OverviewPage() {
               ),
             },
             { name: 'Ready Nodes', value: String(readyNodeCount) },
-            ...(discreteCount > 0 ? [{ name: 'Discrete GPU Nodes', value: String(discreteCount) }] : []),
-            ...(integratedCount > 0 ? [{ name: 'Integrated GPU Nodes', value: String(integratedCount) }] : []),
-            ...(totalGpuCount > 0 ? [{ name: 'Total GPU Devices', value: String(totalGpuCount) }] : []),
+            ...(discreteCount > 0
+              ? [{ name: 'Discrete GPU Nodes', value: String(discreteCount) }]
+              : []),
+            ...(integratedCount > 0
+              ? [{ name: 'Integrated GPU Nodes', value: String(integratedCount) }]
+              : []),
+            ...(totalGpuCount > 0
+              ? [{ name: 'Total GPU Devices', value: String(totalGpuCount) }]
+              : []),
           ]}
         />
       </SectionBox>
@@ -299,13 +315,23 @@ export default function OverviewPage() {
       {totalCapacityGpus > 0 && (
         <SectionBox title="GPU Allocation">
           <div style={{ marginBottom: '16px' }}>
-            <div style={{ marginBottom: '8px', fontSize: '14px', color: 'var(--mui-palette-text-secondary)' }}>
+            <div
+              style={{
+                marginBottom: '8px',
+                fontSize: '14px',
+                color: 'var(--mui-palette-text-secondary)',
+              }}
+            >
               GPU Utilization ({gpuUtilizationPct}%)
             </div>
             <PercentageBar
               data={[
                 { name: 'In Use', value: totalAllocatedGpus, fill: '#0071c5' },
-                { name: 'Available', value: totalAllocatableGpus - totalAllocatedGpus, fill: '#e0e0e0' },
+                {
+                  name: 'Available',
+                  value: totalAllocatableGpus - totalAllocatedGpus,
+                  fill: '#e0e0e0',
+                },
               ]}
               total={totalAllocatableGpus}
             />
@@ -336,13 +362,28 @@ export default function OverviewPage() {
           rows={[
             { name: 'Total GPU Pods', value: String(gpuPods.length) },
             ...(podPhaseCounts.Running > 0
-              ? [{ name: 'Running', value: <StatusLabel status="success">{podPhaseCounts.Running}</StatusLabel> }]
+              ? [
+                  {
+                    name: 'Running',
+                    value: <StatusLabel status="success">{podPhaseCounts.Running}</StatusLabel>,
+                  },
+                ]
               : []),
             ...(podPhaseCounts.Pending > 0
-              ? [{ name: 'Pending', value: <StatusLabel status="warning">{podPhaseCounts.Pending}</StatusLabel> }]
+              ? [
+                  {
+                    name: 'Pending',
+                    value: <StatusLabel status="warning">{podPhaseCounts.Pending}</StatusLabel>,
+                  },
+                ]
               : []),
             ...(podPhaseCounts.Failed > 0
-              ? [{ name: 'Failed', value: <StatusLabel status="error">{podPhaseCounts.Failed}</StatusLabel> }]
+              ? [
+                  {
+                    name: 'Failed',
+                    value: <StatusLabel status="error">{podPhaseCounts.Failed}</StatusLabel>,
+                  },
+                ]
               : []),
           ]}
         />
@@ -353,12 +394,12 @@ export default function OverviewPage() {
         <SectionBox title="Active GPU Pods">
           <SimpleTable
             columns={[
-              { label: 'Name', getter: (p) => p.metadata.name },
-              { label: 'Namespace', getter: (p) => p.metadata.namespace ?? '—' },
-              { label: 'Node', getter: (p) => p.spec?.nodeName ?? '—' },
+              { label: 'Name', getter: p => p.metadata.name },
+              { label: 'Namespace', getter: p => p.metadata.namespace ?? '—' },
+              { label: 'Node', getter: p => p.spec?.nodeName ?? '—' },
               {
                 label: 'GPU Request',
-                getter: (p) => {
+                getter: p => {
                   const reqs = getPodGpuRequests(p);
                   const parts: string[] = [];
                   for (const [key, val] of Object.entries(reqs)) {
@@ -368,7 +409,7 @@ export default function OverviewPage() {
                   return parts.join(', ') || '—';
                 },
               },
-              { label: 'Age', getter: (p) => formatAge(p.metadata.creationTimestamp) },
+              { label: 'Age', getter: p => formatAge(p.metadata.creationTimestamp) },
             ]}
             data={gpuPods.filter(p => p.status?.phase === 'Running').slice(0, 10)}
           />

src/components/PodDetailSection.test.tsx

@@ -0,0 +1,138 @@
+import { render, screen } from '@testing-library/react';
+import React from 'react';
+import { describe, expect, it, vi } from 'vitest';
+import PodDetailSection from './PodDetailSection';
+
+vi.mock('@kinvolk/headlamp-plugin/lib/CommonComponents', () => ({
+  SectionBox: ({ title, children }: { title: string; children?: React.ReactNode }) => (
+    <section>
+      <h2>{title}</h2>
+      {children}
+    </section>
+  ),
+  NameValueTable: ({
+    rows,
+  }: {
+    rows: Array<{ name: React.ReactNode; value: React.ReactNode }>;
+  }) => (
+    <dl>
+      {rows.map((r, i) => (
+        <div key={i}>
+          <dt>{r.name}</dt>
+          <dd>{r.value}</dd>
+        </div>
+      ))}
+    </dl>
+  ),
+  StatusLabel: ({ status, children }: { status: string; children?: React.ReactNode }) => (
+    <span data-status={status}>{children}</span>
+  ),
+}));
+
+// PodDetailSection does NOT use the context — no need to mock IntelGpuDataContext
+
+// A non-GPU pod (no gpu.intel.com resources)
+const nonGpuPodRaw = {
+  kind: 'Pod',
+  metadata: { name: 'plain-pod', namespace: 'default' },
+  spec: {
+    containers: [{ name: 'main', resources: { requests: { cpu: '100m', memory: '128Mi' } } }],
+  },
+  status: { phase: 'Running' },
+};
+
+// A GPU-requesting pod
+const gpuPodRaw = {
+  kind: 'Pod',
+  metadata: { name: 'gpu-workload', namespace: 'default' },
+  spec: {
+    nodeName: 'gpu-node-1',
+    containers: [
+      {
+        name: 'trainer',
+        resources: {
+          requests: { 'gpu.intel.com/i915': '1', cpu: '2' },
+          limits: { 'gpu.intel.com/i915': '1', cpu: '2' },
+        },
+      },
+    ],
+  },
+  status: { phase: 'Running' },
+};
+
+// A pod with limits only (no requests)
+const gpuPodLimitsOnly = {
+  kind: 'Pod',
+  metadata: { name: 'limits-only-pod', namespace: 'default' },
+  spec: {
+    containers: [
+      {
+        name: 'app',
+        resources: {
+          limits: { 'gpu.intel.com/i915': '1' },
+        },
+      },
+    ],
+  },
+  status: { phase: 'Pending' },
+};
+
+describe('PodDetailSection', () => {
+  it('renders nothing for a non-GPU pod', () => {
+    const { container } = render(<PodDetailSection resource={nonGpuPodRaw} />);
+    expect(container).toBeEmptyDOMElement();
+  });
+
+  it('renders nothing for a non-GPU pod passed via jsonData', () => {
+    const { container } = render(<PodDetailSection resource={{ jsonData: nonGpuPodRaw }} />);
+    expect(container).toBeEmptyDOMElement();
+  });
+
+  it('renders "Intel GPU Resources" section for a GPU-requesting pod via jsonData', () => {
+    render(<PodDetailSection resource={{ jsonData: gpuPodRaw }} />);
+    expect(screen.getByText('Intel GPU Resources')).toBeInTheDocument();
+  });
+
+  it('renders "Intel GPU Resources" section for a GPU-requesting pod provided directly', () => {
+    render(<PodDetailSection resource={gpuPodRaw} />);
+    expect(screen.getByText('Intel GPU Resources')).toBeInTheDocument();
+  });
+
+  it('shows container GPU resource request rows', () => {
+    render(<PodDetailSection resource={gpuPodRaw} />);
+    // Row label: "{containerName} → {resourceName} request"
+    expect(screen.getByText('trainer → GPU (i915) request')).toBeInTheDocument();
+  });
+
+  it('shows phase status label for Running phase', () => {
+    render(<PodDetailSection resource={gpuPodRaw} />);
+    const statusEl = screen.getByText('Running');
+    expect(statusEl).toHaveAttribute('data-status', 'success');
+  });
+
+  it('shows phase status label for Pending phase', () => {
+    render(<PodDetailSection resource={gpuPodLimitsOnly} />);
+    const statusEl = screen.getByText('Pending');
+    expect(statusEl).toHaveAttribute('data-status', 'warning');
+  });
+
+  it('still renders when a container has limits only and no requests', () => {
+    render(<PodDetailSection resource={gpuPodLimitsOnly} />);
+    expect(screen.getByText('Intel GPU Resources')).toBeInTheDocument();
+    // limits-only pod: the request row should show '—' since requests key is absent
+    expect(screen.getByText('app → GPU (i915) request')).toBeInTheDocument();
+  });
+
+  it('shows scheduled node name', () => {
+    render(<PodDetailSection resource={gpuPodRaw} />);
+    expect(screen.getByText('gpu-node-1')).toBeInTheDocument();
+  });
+
+  it('shows GPU container count', () => {
+    render(<PodDetailSection resource={gpuPodRaw} />);
+    const label = screen.getByText('GPU Containers');
+    expect(label).toBeInTheDocument();
+    // The value '1' is rendered in the sibling <dd>; verify via parent row
+    expect(label.closest('div')).toHaveTextContent('1');
+  });
+});

src/components/PodDetailSection.tsx

@@ -25,9 +25,7 @@ interface PodDetailSectionProps {
 export default function PodDetailSection({ resource }: PodDetailSectionProps) {
   // Extract raw Kubernetes JSON
   const rawPod =
-    resource.jsonData && typeof resource.jsonData === 'object'
-      ? resource.jsonData
-      : resource;
+    resource.jsonData && typeof resource.jsonData === 'object' ? resource.jsonData : resource;
 
   // Only render for pods that request Intel GPU resources
   if (!isGpuRequestingPod(rawPod)) return null;
@@ -98,9 +96,7 @@ export default function PodDetailSection({ resource }: PodDetailSectionProps) {
         rows={[
           {
             name: 'Phase',
-            value: (
-              <StatusLabel status={phaseStatus}>{phase ?? 'Unknown'}</StatusLabel>
-            ),
+            value: <StatusLabel status={phaseStatus}>{phase ?? 'Unknown'}</StatusLabel>,
           },
           {
             name: 'Scheduled Node',

src/components/PodsPage.test.tsx

@@ -0,0 +1,170 @@
+import { render, screen } from '@testing-library/react';
+import React from 'react';
+import { describe, expect, it, vi } from 'vitest';
+import { IntelGpuContextValue, useIntelGpuContext } from '../api/IntelGpuDataContext';
+import { IntelGpuPod } from '../api/k8s';
+import PodsPage from './PodsPage';
+
+vi.mock('@kinvolk/headlamp-plugin/lib/CommonComponents', () => ({
+  Loader: ({ title }: { title: string }) => <div data-testid="loader">{title}</div>,
+  SectionBox: ({ title, children }: { title: string; children?: React.ReactNode }) => (
+    <section>
+      <h2>{title}</h2>
+      {children}
+    </section>
+  ),
+  SectionHeader: ({ title }: { title: string }) => <h1>{title}</h1>,
+  NameValueTable: ({
+    rows,
+  }: {
+    rows: Array<{ name: React.ReactNode; value: React.ReactNode }>;
+  }) => (
+    <dl>
+      {rows.map((r, i) => (
+        <div key={i}>
+          <dt>{r.name}</dt>
+          <dd>{r.value}</dd>
+        </div>
+      ))}
+    </dl>
+  ),
+  SimpleTable: ({
+    columns,
+    data,
+  }: {
+    columns: Array<{ label: string; getter: (item: unknown) => React.ReactNode }>;
+    data: unknown[];
+  }) => (
+    <table>
+      <thead>
+        <tr>
+          {columns.map(c => (
+            <th key={c.label}>{c.label}</th>
+          ))}
+        </tr>
+      </thead>
+      <tbody>
+        {data.map((item, i) => (
+          <tr key={i}>
+            {columns.map(c => (
+              <td key={c.label}>{c.getter(item)}</td>
+            ))}
+          </tr>
+        ))}
+      </tbody>
+    </table>
+  ),
+  StatusLabel: ({ status, children }: { status: string; children?: React.ReactNode }) => (
+    <span data-status={status}>{children}</span>
+  ),
+  PercentageBar: () => <div data-testid="percentage-bar" />,
+}));
+
+vi.mock('../api/IntelGpuDataContext', () => ({
+  useIntelGpuContext: vi.fn(),
+}));
+
+function makeContext(overrides: Partial<IntelGpuContextValue> = {}): IntelGpuContextValue {
+  return {
+    devicePlugins: [],
+    pluginInstalled: false,
+    gpuNodes: [],
+    gpuPods: [],
+    pluginPods: [],
+    crdAvailable: false,
+    loading: false,
+    error: null,
+    refresh: vi.fn(),
+    ...overrides,
+  };
+}
+
+function makeRunningPod(name: string): IntelGpuPod {
+  return {
+    metadata: { name, namespace: 'default', uid: `uid-${name}` },
+    spec: {
+      nodeName: 'gpu-node-1',
+      containers: [
+        {
+          name: 'main',
+          resources: { requests: { 'gpu.intel.com/i915': '1' } },
+        },
+      ],
+    },
+    status: { phase: 'Running' },
+  };
+}
+
+function makePendingPod(name: string): IntelGpuPod {
+  return {
+    metadata: { name, namespace: 'default', uid: `uid-${name}` },
+    spec: {
+      containers: [
+        {
+          name: 'main',
+          resources: { requests: { 'gpu.intel.com/i915': '1' } },
+        },
+      ],
+    },
+    status: {
+      phase: 'Pending',
+      containerStatuses: [
+        {
+          name: 'main',
+          ready: false,
+          restartCount: 0,
+          state: { waiting: { reason: 'Unschedulable' } },
+        },
+      ],
+    },
+  };
+}
+
+describe('PodsPage', () => {
+  it('shows loader when loading=true', () => {
+    vi.mocked(useIntelGpuContext).mockReturnValue(makeContext({ loading: true }));
+    render(<PodsPage />);
+    expect(screen.getByTestId('loader')).toHaveTextContent('Loading GPU pod data...');
+  });
+
+  it('shows "No GPU Pods Found" when gpuPods is empty', () => {
+    vi.mocked(useIntelGpuContext).mockReturnValue(makeContext({ loading: false, gpuPods: [] }));
+    render(<PodsPage />);
+    expect(screen.getByText('No GPU Pods Found')).toBeInTheDocument();
+  });
+
+  it('shows summary section with total count when pods present', () => {
+    const pods = [makeRunningPod('pod-1'), makeRunningPod('pod-2')];
+    vi.mocked(useIntelGpuContext).mockReturnValue(makeContext({ loading: false, gpuPods: pods }));
+    render(<PodsPage />);
+    expect(screen.getByText('Summary')).toBeInTheDocument();
+    // 'Total GPU Pods' label is present; '2' appears in multiple places (row value + status label)
+    expect(screen.getByText('Total GPU Pods')).toBeInTheDocument();
+    expect(screen.getAllByText('2').length).toBeGreaterThanOrEqual(1);
+  });
+
+  it('shows "Attention: Pending GPU Pods" section when pending pods exist', () => {
+    const pods = [makePendingPod('pending-pod-1')];
+    vi.mocked(useIntelGpuContext).mockReturnValue(makeContext({ loading: false, gpuPods: pods }));
+    render(<PodsPage />);
+    expect(screen.getByText('Attention: Pending GPU Pods')).toBeInTheDocument();
+    // Pod name appears in both the main "All GPU Pods" table and the pending attention table
+    expect(screen.getAllByText('pending-pod-1').length).toBeGreaterThanOrEqual(1);
+  });
+
+  it('shows error section when error is set', () => {
+    vi.mocked(useIntelGpuContext).mockReturnValue(
+      makeContext({ loading: false, error: 'pod list failed', gpuPods: [] })
+    );
+    render(<PodsPage />);
+    expect(screen.getByText('pod list failed')).toBeInTheDocument();
+  });
+
+  it('shows "All GPU Pods" table with pod name when pods present', () => {
+    const pods = [makeRunningPod('my-workload')];
+    vi.mocked(useIntelGpuContext).mockReturnValue(makeContext({ loading: false, gpuPods: pods }));
+    render(<PodsPage />);
+    expect(screen.getByText('All GPU Pods')).toBeInTheDocument();
+    expect(screen.getByText('my-workload')).toBeInTheDocument();
+  });
+});

src/components/PodsPage.tsx

@@ -17,11 +17,10 @@ import { useIntelGpuContext } from '../api/IntelGpuDataContext';
 import {
   formatAge,
   formatGpuResourceName,
-  IntelGpuPod,
-  INTEL_GPU_RESOURCE_PREFIX,
-  isPodReady,
   getPodGpuRequests,
   getPodRestarts,
+  INTEL_GPU_RESOURCE_PREFIX,
+  IntelGpuPod,
 } from '../api/k8s';
 
 // ---------------------------------------------------------------------------
@@ -30,11 +29,16 @@ import {
 
 function phaseToStatus(phase: string | undefined): 'success' | 'warning' | 'error' {
   switch (phase) {
-    case 'Running': return 'success';
-    case 'Succeeded': return 'success';
-    case 'Pending': return 'warning';
-    case 'Failed': return 'error';
-    default: return 'warning';
+    case 'Running':
+      return 'success';
+    case 'Succeeded':
+      return 'success';
+    case 'Pending':
+      return 'warning';
+    case 'Failed':
+      return 'error';
+    default:
+      return 'warning';
   }
 }
 
@@ -98,13 +102,17 @@ export default function PodsPage() {
   const running = gpuPods.filter(p => p.status?.phase === 'Running');
   const pending = gpuPods.filter(p => p.status?.phase === 'Pending');
   const failed = gpuPods.filter(p => p.status?.phase === 'Failed');
-  const other = gpuPods.filter(
-    p => !['Running', 'Pending', 'Failed'].includes(p.status?.phase ?? '')
-  );
 
   return (
     <>
-      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '20px' }}>
+      <div
+        style={{
+          display: 'flex',
+          justifyContent: 'space-between',
+          alignItems: 'center',
+          marginBottom: '20px',
+        }}
+      >
         <SectionHeader title="Intel GPU — Pods" />
         <button
           onClick={refresh}
@@ -161,13 +169,28 @@ export default function PodsPage() {
             rows={[
               { name: 'Total GPU Pods', value: String(gpuPods.length) },
               ...(running.length > 0
-                ? [{ name: 'Running', value: <StatusLabel status="success">{running.length}</StatusLabel> }]
+                ? [
+                    {
+                      name: 'Running',
+                      value: <StatusLabel status="success">{running.length}</StatusLabel>,
+                    },
+                  ]
                 : []),
               ...(pending.length > 0
-                ? [{ name: 'Pending', value: <StatusLabel status="warning">{pending.length}</StatusLabel> }]
+                ? [
+                    {
+                      name: 'Pending',
+                      value: <StatusLabel status="warning">{pending.length}</StatusLabel>,
+                    },
+                  ]
                 : []),
               ...(failed.length > 0
-                ? [{ name: 'Failed', value: <StatusLabel status="error">{failed.length}</StatusLabel> }]
+                ? [
+                    {
+                      name: 'Failed',
+                      value: <StatusLabel status="error">{failed.length}</StatusLabel>,
+                    },
+                  ]
                 : []),
             ]}
           />
@@ -179,12 +202,12 @@ export default function PodsPage() {
         <SectionBox title="All GPU Pods">
           <SimpleTable
             columns={[
-              { label: 'Name', getter: (p) => p.metadata.name },
-              { label: 'Namespace', getter: (p) => p.metadata.namespace ?? '—' },
-              { label: 'Node', getter: (p) => p.spec?.nodeName ?? '—' },
+              { label: 'Name', getter: p => p.metadata.name },
+              { label: 'Namespace', getter: p => p.metadata.namespace ?? '—' },
+              { label: 'Node', getter: p => p.spec?.nodeName ?? '—' },
               {
                 label: 'Phase',
-                getter: (p) => (
+                getter: p => (
                   <StatusLabel status={phaseToStatus(p.status?.phase)}>
                     {p.status?.phase ?? 'Unknown'}
                   </StatusLabel>
@@ -192,11 +215,11 @@ export default function PodsPage() {
               },
               {
                 label: 'GPU Resources',
-                getter: (p) => <GpuContainerList pod={p} />,
+                getter: p => <GpuContainerList pod={p} />,
               },
               {
                 label: 'Restarts',
-                getter: (p) => {
+                getter: p => {
                   const restarts = getPodRestarts(p);
                   return restarts > 0 ? (
                     <StatusLabel status="warning">{restarts}</StatusLabel>
@@ -205,7 +228,7 @@ export default function PodsPage() {
                   );
                 },
               },
-              { label: 'Age', getter: (p) => formatAge(p.metadata.creationTimestamp) },
+              { label: 'Age', getter: p => formatAge(p.metadata.creationTimestamp) },
             ]}
             data={gpuPods}
           />
@@ -217,25 +240,27 @@ export default function PodsPage() {
         <SectionBox title="Attention: Pending GPU Pods">
           <SimpleTable
             columns={[
-              { label: 'Name', getter: (p) => p.metadata.name },
-              { label: 'Namespace', getter: (p) => p.metadata.namespace ?? '—' },
+              { label: 'Name', getter: p => p.metadata.name },
+              { label: 'Namespace', getter: p => p.metadata.namespace ?? '—' },
               {
                 label: 'GPU Resources',
-                getter: (p) => {
+                getter: p => {
                   const reqs = getPodGpuRequests(p);
-                  return Object.entries(reqs)
-                    .map(([k, v]) => `${formatGpuResourceName(k)}: ${v}`)
-                    .join(', ') || '—';
+                  return (
+                    Object.entries(reqs)
+                      .map(([k, v]) => `${formatGpuResourceName(k)}: ${v}`)
+                      .join(', ') || '—'
+                  );
                 },
               },
               {
                 label: 'Waiting Reason',
-                getter: (p) => {
+                getter: p => {
                   const reason = p.status?.containerStatuses?.[0]?.state?.waiting?.reason;
                   return reason ?? '—';
                 },
               },
-              { label: 'Age', getter: (p) => formatAge(p.metadata.creationTimestamp) },
+              { label: 'Age', getter: p => formatAge(p.metadata.creationTimestamp) },
             ]}
             data={pending}
           />

src/components/integrations/NodeColumns.tsx

@@ -11,12 +11,7 @@
 
 import { StatusLabel } from '@kinvolk/headlamp-plugin/lib/CommonComponents';
 import React from 'react';
-import {
-  formatGpuType,
-  getNodeGpuCount,
-  getNodeGpuType,
-  isIntelGpuNode,
-} from '../../api/k8s';
+import { formatGpuType, getNodeGpuCount, getNodeGpuType, isIntelGpuNode } from '../../api/k8s';
 
 /** Build GPU columns to append to the native Nodes table. */
 export function buildNodeGpuColumns() {
@@ -33,11 +28,7 @@ export function buildNodeGpuColumns() {
         if (!isIntelGpuNode(raw)) return '—';
         const node = raw as Parameters<typeof getNodeGpuType>[0];
         const type = getNodeGpuType(node);
-        return (
-          <StatusLabel status="success">
-            {formatGpuType(type)}
-          </StatusLabel>
-        );
+        return <StatusLabel status="success">{formatGpuType(type)}</StatusLabel>;
       },
     },
     {

src/index.tsx

@@ -1,20 +1,17 @@
 /**
- * headlamp-intel-gpu-plugin — entry point.
+ * intel-gpu-plugin — entry point.
  *
- * Registers sidebar entries, routes, detail view sections, table column
- * processors, and app bar action for Intel GPU device plugin visibility
- * in Headlamp.
+ * Registers sidebar entries, routes, detail view sections, and table column
+ * processors for Intel GPU device plugin visibility in Headlamp.
  *
  * Surfaces Intel GPU information in the following places:
- *   - Dedicated sidebar section: Overview / Device Plugins / Nodes / Pods
+ *   - Dedicated sidebar section: Overview / Device Plugins / Nodes / Pods / Metrics
  *   - Native Node detail page: Intel GPU section (capacity, utilization, pods)
  *   - Native Pod detail page: GPU resource requests per container
  *   - Native Nodes table: GPU Type and GPU Devices columns
- *   - App bar: health badge (hidden when plugin not installed)
  */
 
 import {
-  registerAppBarAction,
   registerDetailsViewSection,
   registerResourceTableColumnsProcessor,
   registerRoute,
@@ -22,9 +19,9 @@ import {
 } from '@kinvolk/headlamp-plugin/lib';
 import React from 'react';
 import { IntelGpuDataProvider } from './api/IntelGpuDataContext';
-import AppBarGpuBadge from './components/AppBarGpuBadge';
 import DevicePluginsPage from './components/DevicePluginsPage';
 import { buildNodeGpuColumns } from './components/integrations/NodeColumns';
+import MetricsPage from './components/MetricsPage';
 import NodeDetailSection from './components/NodeDetailSection';
 import NodesPage from './components/NodesPage';
 import OverviewPage from './components/OverviewPage';
@@ -38,7 +35,7 @@ import PodsPage from './components/PodsPage';
 registerSidebarEntry({
   parent: null,
   name: 'intel-gpu',
-  label: 'Intel GPU',
+  label: 'intel-gpu',
   url: '/intel-gpu',
   icon: 'mdi:gpu',
 });
@@ -75,6 +72,14 @@ registerSidebarEntry({
   icon: 'mdi:cube-outline',
 });
 
+registerSidebarEntry({
+  parent: 'intel-gpu',
+  name: 'intel-gpu-metrics',
+  label: 'Metrics',
+  url: '/intel-gpu/metrics',
+  icon: 'mdi:chart-line',
+});
+
 // ---------------------------------------------------------------------------
 // Routes
 // ---------------------------------------------------------------------------
@@ -127,6 +132,18 @@ registerRoute({
   ),
 });
 
+registerRoute({
+  path: '/intel-gpu/metrics',
+  sidebar: 'intel-gpu-metrics',
+  name: 'intel-gpu-metrics',
+  exact: true,
+  component: () => (
+    <IntelGpuDataProvider>
+      <MetricsPage />
+    </IntelGpuDataProvider>
+  ),
+});
+
 // ---------------------------------------------------------------------------
 // Detail view section — Node pages
 // Inject Intel GPU section into native Node detail page for GPU nodes.
@@ -163,13 +180,3 @@ registerResourceTableColumnsProcessor(({ id, columns }) => {
   }
   return columns;
 });
-
-// ---------------------------------------------------------------------------
-// App bar action — Intel GPU health badge
-// ---------------------------------------------------------------------------
-
-registerAppBarAction(() => (
-  <IntelGpuDataProvider>
-    <AppBarGpuBadge />
-  </IntelGpuDataProvider>
-));

vitest.config.mts

@@ -6,5 +6,8 @@ export default defineConfig({
     environment: 'jsdom',
     setupFiles: ['./vitest.setup.ts'],
     exclude: ['e2e/**', 'node_modules/**'],
+    env: {
+      NODE_ENV: 'test',
+    },
   },
 });