chore: remove E2E testing and fix CI pnpm errors (#78 )

* chore: remove E2E testing and fix CI pnpm build errors Delete all non-browser E2E testing infrastructure (board directive). Fix ERR_PNPM_IGNORED_BUILDS by adding pnpm.onlyBuiltDependencies. Co-Authored-By: Paperclip <noreply@paperclip.ing> * fix: pin pnpm 9.15.4 and regenerate lockfile for CI Adds packageManager field so CI uses Corepack with pnpm 9 instead of pnpm@latest (11.x), which has incompatible build script approval. Co-Authored-By: Paperclip <noreply@paperclip.ing> --------- Co-authored-by: Chris Farhood <chris@farhood.org> Co-authored-by: Paperclip <noreply@paperclip.ing>
Merge pull request #75 from privilegedescalation/fix/renovate-workflow
2026-05-11 20:21:33 +00:00 · 2026-05-11 13:51:19 +00:00 · 2026-05-10 23:42:38 +00:00 · 2026-05-10 21:35:06 +00:00 · 2026-05-06 15:12:31 +00:00 · 2026-05-06 02:14:13 +00:00
50 changed files with 14625 additions and 18614 deletions
@@ -0,0 +1,81 @@
+---
+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
+
+## Example Interactions
+
+**User:** "Show me available agent categories"
+**You:** Fetch from GitHub API, then present:
+```
+Available categories:
+1. Core Development (11 agents)
+2. Language Specialists (22 agents)
+3. Infrastructure (14 agents)
+...
+```
+
+**User:** "Install the python-pro agent"
+**You:**
+1. Ask: "Install globally (~/.claude/agents/) or locally (.claude/agents/)?"
+2. Download from GitHub
+3. Save to chosen directory
+4. Confirm: "✓ Installed python-pro.md to ~/.claude/agents/"
+
+**User:** "Search for typescript"
+**You:** Search and present matching agents with descriptions
+
+## Important Notes
+
+- Always confirm before installing/uninstalling
+- Show the agent's description before installing if possible
+- Handle GitHub API rate limits gracefully (60 requests/hour without auth)
+- Use `curl -s` for silent downloads
+- Preserve exact file content when downloading (don't modify agent files)
+
+## Communication Protocol
+
+- Be concise and helpful
+- Use checkmarks (✓) for successful operations
+- Use clear error messages if something fails
+- Offer next steps after each action
@@ -0,0 +1,286 @@
+---
+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
+
+Task decomposition:
+- Requirement analysis
+- Subtask identification
+- Dependency mapping
+- Complexity assessment
+- Resource estimation
+- Timeline planning
+- Risk evaluation
+- Success criteria
+
+Agent capability mapping:
+- Skill inventory
+- Performance metrics
+- Specialization areas
+- Availability status
+- Cost factors
+- Compatibility matrix
+- Historical success
+- Workload capacity
+
+Team assembly:
+- Optimal composition
+- Skill coverage
+- Role assignment
+- Communication setup
+- Coordination rules
+- Backup planning
+- Resource allocation
+- Timeline synchronization
+
+Orchestration patterns:
+- Sequential execution
+- Parallel processing
+- Pipeline patterns
+- Map-reduce workflows
+- Event-driven coordination
+- Hierarchical delegation
+- Consensus mechanisms
+- Failover strategies
+
+Workflow design:
+- Process modeling
+- Data flow planning
+- Control flow design
+- Error handling paths
+- Checkpoint definition
+- Recovery procedures
+- Monitoring points
+- Result aggregation
+
+Agent selection criteria:
+- Capability matching
+- Performance history
+- Cost considerations
+- Availability checking
+- Load balancing
+- Specialization mapping
+- Compatibility verification
+- Backup selection
+
+Dependency management:
+- Task dependencies
+- Resource dependencies
+- Data dependencies
+- Timing constraints
+- Priority handling
+- Conflict resolution
+- Deadlock prevention
+- Flow optimization
+
+Performance optimization:
+- Bottleneck identification
+- Load distribution
+- Parallel execution
+- Cache utilization
+- Resource pooling
+- Latency reduction
+- Throughput maximization
+- Cost minimization
+
+Team dynamics:
+- Optimal team size
+- Skill complementarity
+- Communication overhead
+- Coordination patterns
+- Conflict resolution
+- Progress synchronization
+- Knowledge sharing
+- Result integration
+
+Monitoring & adaptation:
+- Real-time tracking
+- Performance metrics
+- Anomaly detection
+- Dynamic adjustment
+- Rebalancing triggers
+- Failure recovery
+- Continuous improvement
+- Learning integration
+
+## Communication Protocol
+
+### Organization Context Assessment
+
+Initialize agent organization by understanding task and team requirements.
+
+Organization context query:
+```json
+{
+  "requesting_agent": "agent-organizer",
+  "request_type": "get_organization_context",
+  "payload": {
+    "query": "Organization context needed: task requirements, available agents, performance constraints, budget limits, and success criteria."
+  }
+}
+```
+
+## Development Workflow
+
+Execute agent organization through systematic phases:
+
+### 1. Task Analysis
+
+Decompose and understand task requirements.
+
+Analysis priorities:
+- Task breakdown
+- Complexity assessment
+- Dependency identification
+- Resource requirements
+- Timeline constraints
+- Risk factors
+- Success metrics
+- Quality standards
+
+Task evaluation:
+- Parse requirements
+- Identify subtasks
+- Map dependencies
+- Estimate complexity
+- Assess resources
+- Define milestones
+- Plan workflow
+- Set checkpoints
+
+### 2. Implementation Phase
+
+Assemble and coordinate agent teams.
+
+Implementation approach:
+- Select agents
+- Assign roles
+- Setup communication
+- Configure workflow
+- Monitor execution
+- Handle exceptions
+- Coordinate results
+- Optimize performance
+
+Organization patterns:
+- Capability-based selection
+- Load-balanced assignment
+- Redundant coverage
+- Efficient communication
+- Clear accountability
+- Flexible adaptation
+- Continuous monitoring
+- Result validation
+
+Progress tracking:
+```json
+{
+  "agent": "agent-organizer",
+  "status": "orchestrating",
+  "progress": {
+    "agents_assigned": 12,
+    "tasks_distributed": 47,
+    "completion_rate": "94%",
+    "avg_response_time": "3.2s"
+  }
+}
+```
+
+### 3. Orchestration Excellence
+
+Achieve optimal multi-agent coordination.
+
+Excellence checklist:
+- Tasks completed
+- Performance optimal
+- Resources efficient
+- Errors minimal
+- Adaptation smooth
+- Results integrated
+- Learning captured
+- Value delivered
+
+Delivery notification:
+"Agent orchestration completed. Coordinated 12 agents across 47 tasks with 94% first-pass success rate. Average response time 3.2s with 67% resource utilization. Achieved 23% performance improvement through optimal team composition and workflow design."
+
+Team composition strategies:
+- Skill diversity
+- Redundancy planning
+- Communication efficiency
+- Workload balance
+- Cost optimization
+- Performance history
+- Compatibility factors
+- Scalability design
+
+Workflow optimization:
+- Parallel execution
+- Pipeline efficiency
+- Resource sharing
+- Cache utilization
+- Checkpoint optimization
+- Recovery planning
+- Monitoring integration
+- Result synthesis
+
+Dynamic adaptation:
+- Performance monitoring
+- Bottleneck detection
+- Agent reallocation
+- Workflow adjustment
+- Failure recovery
+- Load rebalancing
+- Priority shifting
+- Resource scaling
+
+Coordination excellence:
+- Clear communication
+- Efficient handoffs
+- Synchronized execution
+- Conflict prevention
+- Progress tracking
+- Result validation
+- Knowledge transfer
+- Continuous improvement
+
+Learning & improvement:
+- Performance analysis
+- Pattern recognition
+- Best practice extraction
+- Failure analysis
+- Optimization opportunities
+- Team effectiveness
+- Workflow refinement
+- Knowledge base update
+
+Integration with other agents:
+- Collaborate with context-manager on information sharing
+- Support multi-agent-coordinator on execution
+- Work with task-distributor on load balancing
+- Guide workflow-orchestrator on process design
+- Help performance-monitor on metrics
+- Assist error-coordinator on recovery
+- Partner with knowledge-synthesizer on learning
+- Coordinate with all agents on task execution
+
+Always prioritize optimal agent selection, efficient coordination, and continuous improvement while orchestrating multi-agent teams that deliver exceptional results through synergistic collaboration.
@@ -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`
@@ -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
@@ -0,0 +1,286 @@
+---
+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
+
+Workflow orchestration:
+- Process design
+- Flow control
+- State management
+- Checkpoint handling
+- Rollback procedures
+- Compensation logic
+- Event coordination
+- Result aggregation
+
+Inter-agent communication:
+- Protocol design
+- Message routing
+- Channel management
+- Broadcast strategies
+- Request-reply patterns
+- Event streaming
+- Queue management
+- Backpressure handling
+
+Dependency management:
+- Dependency graphs
+- Topological sorting
+- Circular detection
+- Resource locking
+- Priority scheduling
+- Constraint solving
+- Deadlock prevention
+- Race condition handling
+
+Coordination patterns:
+- Master-worker
+- Peer-to-peer
+- Hierarchical
+- Publish-subscribe
+- Request-reply
+- Pipeline
+- Scatter-gather
+- Consensus-based
+
+Parallel execution:
+- Task partitioning
+- Work distribution
+- Load balancing
+- Synchronization points
+- Barrier coordination
+- Fork-join patterns
+- Map-reduce workflows
+- Result merging
+
+Communication mechanisms:
+- Message passing
+- Shared memory
+- Event streams
+- RPC calls
+- WebSocket connections
+- REST APIs
+- GraphQL subscriptions
+- Queue systems
+
+Resource coordination:
+- Resource allocation
+- Lock management
+- Semaphore control
+- Quota enforcement
+- Priority handling
+- Fair scheduling
+- Starvation prevention
+- Efficiency optimization
+
+Fault tolerance:
+- Failure detection
+- Timeout handling
+- Retry mechanisms
+- Circuit breakers
+- Fallback strategies
+- State recovery
+- Checkpoint restoration
+- Graceful degradation
+
+Workflow management:
+- DAG execution
+- State machines
+- Saga patterns
+- Compensation logic
+- Checkpoint/restart
+- Dynamic workflows
+- Conditional branching
+- Loop handling
+
+Performance optimization:
+- Bottleneck analysis
+- Pipeline optimization
+- Batch processing
+- Caching strategies
+- Connection pooling
+- Message compression
+- Latency reduction
+- Throughput maximization
+
+## Communication Protocol
+
+### Coordination Context Assessment
+
+Initialize multi-agent coordination by understanding workflow needs.
+
+Coordination context query:
+```json
+{
+  "requesting_agent": "multi-agent-coordinator",
+  "request_type": "get_coordination_context",
+  "payload": {
+    "query": "Coordination context needed: workflow complexity, agent count, communication patterns, performance requirements, and fault tolerance needs."
+  }
+}
+```
+
+## Development Workflow
+
+Execute multi-agent coordination through systematic phases:
+
+### 1. Workflow Analysis
+
+Design efficient coordination strategies.
+
+Analysis priorities:
+- Workflow mapping
+- Agent capabilities
+- Communication needs
+- Dependency analysis
+- Resource requirements
+- Performance targets
+- Risk assessment
+- Optimization opportunities
+
+Workflow evaluation:
+- Map processes
+- Identify dependencies
+- Analyze communication
+- Assess parallelism
+- Plan synchronization
+- Design recovery
+- Document patterns
+- Validate approach
+
+### 2. Implementation Phase
+
+Orchestrate complex multi-agent workflows.
+
+Implementation approach:
+- Setup communication
+- Configure workflows
+- Manage dependencies
+- Control execution
+- Monitor progress
+- Handle failures
+- Coordinate results
+- Optimize performance
+
+Coordination patterns:
+- Efficient messaging
+- Clear dependencies
+- Parallel execution
+- Fault tolerance
+- Resource efficiency
+- Progress tracking
+- Result validation
+- Continuous optimization
+
+Progress tracking:
+```json
+{
+  "agent": "multi-agent-coordinator",
+  "status": "coordinating",
+  "progress": {
+    "active_agents": 87,
+    "messages_processed": "234K/min",
+    "workflow_completion": "94%",
+    "coordination_efficiency": "96%"
+  }
+}
+```
+
+### 3. Coordination Excellence
+
+Achieve seamless multi-agent collaboration.
+
+Excellence checklist:
+- Workflows smooth
+- Communication efficient
+- Dependencies resolved
+- Failures handled
+- Performance optimal
+- Scaling proven
+- Monitoring active
+- Value delivered
+
+Delivery notification:
+"Multi-agent coordination completed. Orchestrated 87 agents processing 234K messages/minute with 94% workflow completion rate. Achieved 96% coordination efficiency with zero deadlocks and 99.9% message delivery guarantee."
+
+Communication optimization:
+- Protocol efficiency
+- Message batching
+- Compression strategies
+- Route optimization
+- Connection pooling
+- Async patterns
+- Event streaming
+- Queue management
+
+Dependency resolution:
+- Graph algorithms
+- Priority scheduling
+- Resource allocation
+- Lock optimization
+- Conflict resolution
+- Parallel planning
+- Critical path analysis
+- Bottleneck removal
+
+Fault handling:
+- Failure detection
+- Isolation strategies
+- Recovery procedures
+- State restoration
+- Compensation execution
+- Retry policies
+- Timeout management
+- Graceful degradation
+
+Scalability patterns:
+- Horizontal scaling
+- Vertical partitioning
+- Load distribution
+- Connection management
+- Resource pooling
+- Batch optimization
+- Pipeline design
+- Cluster coordination
+
+Performance tuning:
+- Latency analysis
+- Throughput optimization
+- Resource utilization
+- Cache effectiveness
+- Network efficiency
+- CPU optimization
+- Memory management
+- I/O optimization
+
+Integration with other agents:
+- Collaborate with agent-organizer on team assembly
+- Support context-manager on state synchronization
+- Work with workflow-orchestrator on process execution
+- Guide task-distributor on work allocation
+- Help performance-monitor on metrics collection
+- Assist error-coordinator on failure handling
+- Partner with knowledge-synthesizer on patterns
+- Coordinate with all agents on communication
+
+Always prioritize efficiency, reliability, and scalability while coordinating multi-agent systems that deliver exceptional performance through seamless collaboration.
@@ -0,0 +1,8 @@
+{
+  "enabledMcpjsonServers": [
+    "github",
+    "kubernetes",
+    "flux",
+    "playwright"
+  ]
+}
@@ -0,0 +1 @@
+github: [privilegedescalation]
@@ -2,36 +2,12 @@ name: CI

 on:
  push:
-    branches: [main]
+    branches: [main, dev]
  pull_request:
-    branches: [main]
+    branches: [main, dev]
+  workflow_dispatch:
+  workflow_call:

 jobs:
-  lint-and-test:
-    runs-on: ubuntu-latest
-    timeout-minutes: 10
-
-    steps:
-      - name: Checkout
-        uses: actions/checkout@v4
-
-      - name: Setup Node.js
-        uses: actions/setup-node@v4
-        with:
-          node-version: '20'
-          cache: 'npm'
-
-      - name: Install dependencies
-        run: npm ci
-
-      - name: Build plugin
-        run: npx @kinvolk/headlamp-plugin build
-
-      - name: Lint
-        run: npx eslint --ext .ts,.tsx src/
-
-      - name: Type-check
-        run: npx tsc --noEmit
-
-      - name: Run unit tests
-        run: npm test
+  ci:
+    uses: privilegedescalation/.github/.github/workflows/plugin-ci.yaml@main
@@ -0,0 +1,20 @@
+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
+    with:
+      pr_number: ${{ github.event.pull_request.number }}
@@ -4,108 +4,22 @@ on:
  workflow_dispatch:
    inputs:
      version:
-        description: 'Version to release (without v prefix, e.g., 0.2.0)'
+        description: 'Release version (e.g. 1.0.0)'
        required: true
        type: string
+  repository_dispatch:
+    types: [release]
+
+permissions:
+  contents: write
+  pull-requests: write

 jobs:
  release:
-    runs-on: ubuntu-latest
-    permissions:
-      contents: write
-    steps:
-      - name: Validate version format
-        run: |
-          if ! echo "${{ inputs.version }}" | grep -qE '^[0-9]+\.[0-9]+\.[0-9]+$'; then
-            echo "::error::Version must be in format X.Y.Z (e.g., 0.2.0)"
-            exit 1
-          fi
+    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 || github.event.client_payload.version }}

-      - name: Checkout
-        uses: actions/checkout@v4
-
-      - name: Configure git
-        run: |
-          git config user.name "github-actions[bot]"
-          git config user.email "github-actions[bot]@users.noreply.github.com"
-
-      - name: Update package.json version
-        run: |
-          jq --arg version "${{ inputs.version }}" '.version = $version' package.json > package.json.tmp
-          mv package.json.tmp package.json
-
-      - name: Update artifacthub-pkg.yml version and URL
-        run: |
-          VERSION="${{ inputs.version }}"
-          RELEASE_URL="https://github.com/${{ github.repository }}/releases/download/v${VERSION}/headlamp-rook-plugin-${VERSION}.tar.gz"
-
-          sed -i "s|^version:.*|version: \"${VERSION}\"|" artifacthub-pkg.yml
-          sed -i "s|headlamp/plugin/archive-url:.*|headlamp/plugin/archive-url: \"${RELEASE_URL}\"|" artifacthub-pkg.yml
-
-      - name: Setup Node.js
-        uses: actions/setup-node@v4
-        with:
-          node-version: '20'
-          cache: 'npm'
-
-      - name: Install dependencies
-        run: npm ci
-
-      - name: Build plugin
-        run: npx @kinvolk/headlamp-plugin build
-
-      - name: Package plugin
-        run: npx @kinvolk/headlamp-plugin package
-
-      - name: Validate tarball name
-        run: |
-          EXPECTED="headlamp-rook-plugin-${{ inputs.version }}.tar.gz"
-          ACTUAL=$(ls *.tar.gz)
-          if [ "$EXPECTED" != "$ACTUAL" ]; then
-            echo "::error::Tarball name mismatch! Expected: $EXPECTED, Got: $ACTUAL"
-            exit 1
-          fi
-          echo "✓ Tarball name validated: $ACTUAL"
-
-      - name: Compute checksum
-        id: compute_checksum
-        run: |
-          TARBALL="headlamp-rook-plugin-${{ inputs.version }}.tar.gz"
-          CHECKSUM=$(sha256sum "$TARBALL" | awk '{print $1}')
-          echo "checksum=${CHECKSUM}" >> $GITHUB_OUTPUT
-          echo "Checksum: sha256:${CHECKSUM}"
-
-      - name: Update checksum in metadata
-        run: |
-          CHECKSUM="${{ steps.compute_checksum.outputs.checksum }}"
-          sed -i "s|headlamp/plugin/archive-checksum:.*|headlamp/plugin/archive-checksum: \"sha256:${CHECKSUM}\"|" artifacthub-pkg.yml
-
-      - name: Commit version bump and metadata
-        run: |
-          git add package.json artifacthub-pkg.yml
-          git commit -m "chore: release v${{ inputs.version }}"
-          git push origin main
-
-      - name: Create and push tag
-        run: |
-          git tag "v${{ inputs.version }}"
-          git push origin "v${{ inputs.version }}"
-
-      - name: Create GitHub Release
-        uses: softprops/action-gh-release@v2
-        with:
-          tag_name: "v${{ inputs.version }}"
-          files: headlamp-rook-plugin-${{ inputs.version }}.tar.gz
-          fail_on_unmatched_files: true
-          draft: false
-          prerelease: false
-          generate_release_notes: true
-        env:
-          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
-
-      - name: Summary
-        run: |
-          echo "✓ Version bumped to ${{ inputs.version }}"
-          echo "✓ Metadata updated with checksum sha256:${{ steps.compute_checksum.outputs.checksum }}"
-          echo "✓ Tag v${{ inputs.version }} created"
-          echo "✓ GitHub release published with tarball"
@@ -0,0 +1,14 @@
+name: Renovate
+on:
+  schedule:
+    - cron: '0 3 * * *'
+  workflow_dispatch:
+jobs:
+  renovate:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - uses: renovatebot/github-action@v40.3.0
+        with:
+          token: ${{ secrets.GITHUB_TOKEN }}
+          configurationFile: renovate.json
@@ -1,5 +1,14 @@
 node_modules/
 dist/
+.headlamp-plugin/
 *.tar.gz
+.env
+.env.local
+.eslintcache
 .playwright-mcp/
-.mcp.json
+
+# E2E
+e2e/.auth/
+.env.e2e
+playwright-report/
+test-results/
@@ -0,0 +1,53 @@
+{
+  "config": {
+    // Line length — not enforced for docs with code examples
+    "MD013": false,
+    // First line heading — files use YAML frontmatter, not headings
+    "MD041": false,
+    // Emphasis as heading — common pattern for Option 1/2/3 sections
+    "MD036": false,
+    // No duplicate heading — changelog files repeat section names intentionally
+    "MD024": false,
+    // Fenced code language — not always applicable for diagram blocks
+    "MD040": false,
+    // Table column style — table alignment is visual, not semantic
+    "MD060": false,
+    // Ordered list item prefix — number resets are intentional in documents
+    "MD029": false,
+    // No inline HTML — each elements are valid in valid Markdown
+    "MD033": false,
+    // List marker space — spacing after list markers varies by editor
+    "MD030": false,
+    // Blanks around headings — not always needed in compact docs
+    "MD022": false,
+    // Blanks around lists — not always needed in compact docs
+    "MD032": false,
+    // Blanks around fences — not always needed between adjacent blocks
+    "MD031": false,
+    // Multiple blanks — editor artifacts, not semantic
+    "MD012": false,
+    // Single title — files may have multiple H1 sections
+    "MD025": false,
+    // Trailing spaces — editor artifacts
+    "MD009": false,
+    // Bare URLs — URL shortening not always needed
+    "MD034": false,
+    // Single trailing newline — editor artifacts
+    "MD047": false,
+    // Trailing punctuation — heading punctuation is intentional
+    "MD026": false,
+    // Space in emphasis — double-asterisk bold spacing varies by renderer
+    "MD037": false,
+    // No hard tabs — some generated docs use tabs for indentation
+    "MD010": false,
+    // Code block style — generated docs may use inconsistent styles
+    "MD046": false,
+    // Comment style — generated docs have no comments
+    "MD048": false,
+    // Commands show output — shell examples intentionally show only commands
+    "MD014": false
+  },
+  "ignores": [
+    "docs/api-reference/generated/**"
+  ]
+}
@@ -0,0 +1 @@
+docs/api-reference/generated/**
@@ -0,0 +1,23 @@
+{
+  "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"
+    }
+  }
+}
@@ -0,0 +1 @@
+module.exports = require('@headlamp-k8s/eslint-config/prettier-config');
@@ -7,6 +7,66 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0

 ## [Unreleased]

+### Changed
+
+- **ArtifactHub namespace** — updated `provider.name` and `maintainers[].name` in `artifacthub-pkg.yml` from `privilegedescalation` to `headlamp` to reflect the ArtifactHub package namespace
+
+## [1.0.0] - 2026-03-24
+
+### Added
+
+- **Test infrastructure** — added `vitest`, `@testing-library/react`, `@testing-library/jest-dom`, `@testing-library/user-event`, `jsdom`, `react`, `react-dom`, `@types/react`, `@types/react-dom`, `react-router-dom`, `@mui/material`, and `notistack` as devDependencies so the test suite can run in CI without requiring the full Headlamp monorepo
+- **`vitest.config.mts`** — added `define: { 'process.env.NODE_ENV': '"test"' }` block to fix test environment compatibility with jsdom and React 18
+- **CI: dual-approval caller workflow** — two-reviewer gate before any release can proceed
+- **Renovate: org-level preset extension** — Renovate config now extends the organisation-level preset for consistent dependency management across repos
+- **Renovate: `pinDigests`** — GitHub Actions are now pinned to exact SHAs for supply-chain security
+
+### Changed
+
+- **Version bump to 1.0.0** — first stable release; all core features (Overview, Block Pools, Filesystems, Object Stores, Storage Classes, Volumes, Pods pages; StorageClass/PV column injection; PVC/PV/Pod detail sections; App Bar badge; RookCephDataContext) are considered production-ready
+- **Lock file** — switched from `package-lock.json` to `pnpm-lock.yaml`; project now uses pnpm as the canonical package manager
+
+## [0.2.6] - 2026-03-04
+
+### Fixed
+
+- **AppBarClusterBadge registration** — cluster health badge in the Headlamp top nav bar was implemented but never registered; now wired up via `registerAppBarAction`
+- **CSI pod label mismatch** — `CephPodDetailSection` now recognizes both legacy (`csi-rbdplugin-provisioner`) and Rook 1.12+ (`rook-ceph.rbd.csi.ceph.com-ctrlplugin`) CSI pod labels
+- **Duplicate `parseStorageToBytes`** — removed local copy from `OverviewPage`; imports shared implementation from `k8s.ts`
+- **ObjectStore endpoint type safety** — added `endpoints` field to `CephObjectStoreStatus` interface, eliminating unsafe double-cast
+- **Redundant guard** — removed duplicate `storageClasses.length > 0` condition in `OverviewPage`
+
+### Added
+
+- **Sidebar entries** for Storage Classes and Volumes pages — both are now navigable from the sidebar instead of only accessible via direct URL
+- **Drawer accessibility** — all detail panel drawers now include `role="dialog"`, `aria-modal`, `aria-labelledby`, and Escape key handling
+
+### Changed
+
+- **Theme-aware colors** — replaced hardcoded hex colors with CSS custom properties (`var(--mui-palette-*)`) in `AppBarClusterBadge`, `ClusterStatusCard`, and `OverviewPage` for dark/light theme compatibility
+- **API URL constants** — `RookCephDataContext` now uses `ROOK_CEPH_API_GROUP` and `ROOK_CEPH_API_VERSION` constants instead of string literals
+- **`extractJsonData` hoisted** — moved from inside the component render body to module-level function
+
+### Removed
+
+- **Dead code** — removed unused `extractPoolFromVolumeHandle` function from `k8s.ts`
+
+## [0.2.2] - 2026-02-19
+
+### Changed
+
+- **Package name** — renamed from `headlamp-rook-plugin` to `rook` so the plugin displays correctly in Headlamp's Plugins list
+
+## [0.2.1] - 2026-02-19
+
+### Fixed
+
+- **Duplicate columns** — Protocol and Pool columns on mixed-driver clusters (rook-ceph + tns-csi) are now merged into a single shared column rather than duplicated; whichever plugin loads first owns the column and the second merges into it
+
+### Changed
+
+- **Sidebar label** — top-level navigation entry renamed from `Rook-Ceph` to `Rook`
+
 ## [0.2.0] - 2026-02-19

 ### Changed
@@ -56,9 +116,13 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - TypeScript strict mode with zero `any` types
 - ESLint + Prettier code quality tooling

-[Unreleased]: https://github.com/cpfarhood/headlamp-rook-plugin/compare/v0.2.0...HEAD
-[0.2.0]: https://github.com/cpfarhood/headlamp-rook-plugin/compare/v0.1.3...v0.2.0
-[0.1.3]: https://github.com/cpfarhood/headlamp-rook-plugin/compare/v0.1.2...v0.1.3
-[0.1.2]: https://github.com/cpfarhood/headlamp-rook-plugin/compare/v0.1.1...v0.1.2
-[0.1.1]: https://github.com/cpfarhood/headlamp-rook-plugin/compare/v0.1.0...v0.1.1
-[0.1.0]: https://github.com/cpfarhood/headlamp-rook-plugin/releases/tag/v0.1.0
+[Unreleased]: https://github.com/privilegedescalation/headlamp-rook-plugin/compare/v1.0.0...HEAD
+[1.0.0]: https://github.com/privilegedescalation/headlamp-rook-plugin/compare/v0.2.8...v1.0.0
+[0.2.6]: https://github.com/privilegedescalation/headlamp-rook-plugin/compare/v0.2.5...v0.2.6
+[0.2.2]: https://github.com/privilegedescalation/headlamp-rook-plugin/compare/v0.2.1...v0.2.2
+[0.2.1]: https://github.com/privilegedescalation/headlamp-rook-plugin/compare/v0.2.0...v0.2.1
+[0.2.0]: https://github.com/privilegedescalation/headlamp-rook-plugin/compare/v0.1.3...v0.2.0
+[0.1.3]: https://github.com/privilegedescalation/headlamp-rook-plugin/compare/v0.1.2...v0.1.3
+[0.1.2]: https://github.com/privilegedescalation/headlamp-rook-plugin/compare/v0.1.1...v0.1.2
+[0.1.1]: https://github.com/privilegedescalation/headlamp-rook-plugin/compare/v0.1.0...v0.1.1
+[0.1.0]: https://github.com/privilegedescalation/headlamp-rook-plugin/releases/tag/v0.1.0
@@ -6,7 +6,7 @@ This file provides guidance to Claude Code (claude.ai/code) when working with co

 Headlamp plugin for Rook-Ceph cluster visibility.

- **Plugin name**: `headlamp-rook-plugin`
+- **Plugin name**: `rook`
 - **Rook-Ceph API group**: `ceph.rook.io/v1`
 - **Default namespace**: `rook-ceph`
 - **Reference plugin**: `../headlamp-tns-csi-plugin`
@@ -33,7 +33,7 @@ All tests and `tsc` must pass before committing.

 ```
 src/
-├── index.tsx                          # Plugin entry: registerRoute, registerSidebarEntry, etc.
+├── index.tsx                          # Plugin entry: registerRoute, registerSidebarEntry, registerAppBarAction, etc.
 ├── api/
 │   ├── k8s.ts                         # Types + filtering helpers (ceph.rook.io)
 │   └── RookCephDataContext.tsx         # Shared React context provider
@@ -43,8 +43,10 @@ src/
    ├── StorageClassesPage.tsx
    ├── VolumesPage.tsx
    ├── PodsPage.tsx
+    ├── FilesystemsPage.tsx
+    ├── ObjectStoresPage.tsx
    ├── ClusterStatusCard.tsx
-    ├── AppBarClusterBadge.tsx
+    ├── AppBarClusterBadge.tsx            # Cluster health badge in Headlamp top nav bar
    ├── PVCDetailSection.tsx            # Injected into Headlamp PVC detail view
    ├── PVDetailSection.tsx             # Injected into Headlamp PV detail view
    ├── CephPodDetailSection.tsx        # Injected into Headlamp Pod detail view
@@ -69,7 +71,9 @@ All pages consume data exclusively via `useRookCephContext()`. The provider is r
 - RBD provisioner: `rook-ceph.rbd.csi.ceph.com`
 - CephFS provisioner: `rook-ceph.cephfs.csi.ceph.com`
 - Custom namespace provisioners: any string ending in `.rbd.csi.ceph.com` or `.cephfs.csi.ceph.com`
- Pod selectors: `app=rook-ceph-operator`, `app=rook-ceph-mon`, `app=rook-ceph-osd`, `app=rook-ceph-mgr`, `app=csi-rbdplugin-provisioner`, `app=csi-cephfsplugin-provisioner`
+- Pod selectors: `app=rook-ceph-operator`, `app=rook-ceph-mon`, `app=rook-ceph-osd`, `app=rook-ceph-mgr`, `app=rook-ceph-mds`, `app=rook-ceph-rgw`
+- CSI pod selectors (Rook 1.12+): `app=rook-ceph.rbd.csi.ceph.com-ctrlplugin`, `app=rook-ceph.cephfs.csi.ceph.com-ctrlplugin`
+- CSI pod selectors (legacy): `app=csi-rbdplugin-provisioner`, `app=csi-cephfsplugin-provisioner`, `app=csi-rbdplugin`, `app=csi-cephfsplugin`

 ## Code conventions

@@ -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.*
@@ -0,0 +1,73 @@
+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 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 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 those 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
+
+APPENDIX: How to apply the Apache License to your work.
+
+To apply the Apache License to your work, attach the following boilerplate notice, with the fields enclosed by brackets "[]" replaced with your own identifying information. (Don't include the brackets!)  The text should be enclosed in the appropriate comment syntax for the file format. We also recommend that a file or class name and description of purpose be included on the same "printed page" as the copyright notice for easier identification within third-party archives.
+
+Copyright [yyyy] [name of copyright owner]
+
+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.
@@ -1,6 +1,7 @@
 # Headlamp Rook Plugin

-[![CI](https://github.com/cpfarhood/headlamp-rook-plugin/actions/workflows/ci.yaml/badge.svg)](https://github.com/cpfarhood/headlamp-rook-plugin/actions/workflows/ci.yaml)
+[![Artifact Hub](https://img.shields.io/endpoint?url=https://artifacthub.io/badge/package/headlamp/rook/headlamp-rook-plugin)](https://artifacthub.io/packages/headlamp/rook/headlamp-rook-plugin)
+[![CI](https://github.com/privilegedescalation/headlamp-rook-plugin/actions/workflows/ci.yaml/badge.svg)](https://github.com/privilegedescalation/headlamp-rook-plugin/actions/workflows/ci.yaml)
 [![License: Apache-2.0](https://img.shields.io/badge/License-Apache_2.0-blue.svg)](https://opensource.org/licenses/Apache-2.0)

 A [Headlamp](https://headlamp.dev/) plugin that surfaces [Rook-Ceph](https://rook.io/) cluster health, storage resources, and CSI driver status directly in the Headlamp UI.
@@ -47,22 +48,7 @@ Rook-Ceph must be deployed in the `rook-ceph` namespace with standard labels. Th

 ## Installing

-### Option 1: Manual Plugin Install
-
-Download the latest release tarball and place it in your Headlamp plugins directory:
-
-```bash
-# Download the latest release
-curl -L https://github.com/cpfarhood/headlamp-rook-plugin/releases/latest/download/headlamp-rook-plugin-<version>.tar.gz \
-  -o headlamp-rook-plugin.tar.gz
-
-# Extract to Headlamp plugins directory
-tar -xzf headlamp-rook-plugin.tar.gz -C ~/.config/Headlamp/plugins/
-```
-
-### Option 2: Headlamp In-App Plugin Manager
-
-Browse the Headlamp Plugin Manager (Settings → Plugins) and install **headlamp-rook-plugin** directly.
+Browse the Headlamp Plugin Manager (Settings → Plugins → Catalog) and install **headlamp-rook-plugin** directly.

 ## RBAC & Security Setup

@@ -104,9 +90,19 @@ roleRef:
 subjects:
  - kind: ServiceAccount
    name: headlamp
-    namespace: headlamp
+    namespace: <your-namespace>
 ```

+## Troubleshooting
+
+| Symptom | Likely Cause | Quick Fix |
+| ------- | ------------ | --------- |
+| **Plugin not in sidebar** | Plugin not installed or needs browser refresh | Hard refresh (Cmd+Shift+R / Ctrl+Shift+F5) |
+| **No CephCluster data** | CRDs not installed or RBAC insufficient | Verify `kubectl get cephclusters -n rook-ceph` works |
+| **Block Pools empty** | No CephBlockPool resources | Check `kubectl get cephblockpools -n rook-ceph` |
+| **App bar badge missing** | No CephCluster present | Verify rook-ceph is deployed with a CephCluster resource |
+| **StorageClass columns not showing** | Rook provisioner not matching | Verify SC provisioner ends in `.rbd.csi.ceph.com` or `.cephfs.csi.ceph.com` |
+
 ## Development

 ### Prerequisites
@@ -117,7 +113,7 @@ subjects:
 ### Setup

 ```bash
-git clone https://github.com/cpfarhood/headlamp-rook-plugin.git
+git clone https://github.com/privilegedescalation/headlamp-rook-plugin.git
 cd headlamp-rook-plugin
 npm install
 ```
@@ -1,4 +1,4 @@
-version: "0.1.3"
+version: "1.0.2"
 name: headlamp-rook-plugin
 displayName: Rook Plugin
 createdAt: "2026-02-18T00:00:00Z"
@@ -18,12 +18,24 @@ links:
  - name: source
    url: https://github.com/privilegedescalation/headlamp-rook-plugin
 maintainers:
-  - name: privilegedescalation
+  - name: headlamp
    email: privilegedescalation@users.noreply.github.com
 provider:
-  name: privilegedescalation
+  name: headlamp
+changes:
+  - kind: changed
+    description: "Bump to v1.0.1 patch release — fix ArtifactHub checksum"
+  - kind: added
+    description: "Test infrastructure: add vitest, @testing-library/react, jsdom, and related devDependencies so CI tests pass"
+  - kind: added
+    description: "vitest.config.mts: add define block for process.env.NODE_ENV to fix test environment compatibility"
+  - kind: added
+    description: "CI: dual-approval caller workflow and GitHub App token secret passing to release workflow"
+  - kind: changed
+    description: "Renovate: extend org-level config preset and add pinDigests for SHA pinning of GitHub Actions"
+
 annotations:
-  headlamp/plugin/archive-url: "https://github.com/privilegedescalation/headlamp-rook-plugin/releases/download/v0.1.3/headlamp-rook-plugin-0.1.3.tar.gz"
-  headlamp/plugin/archive-checksum: "sha256:01611912597b4739ca62cd1f4ae0dd42755bb8e3541dafa5dedbfdcf1202072e"
+  headlamp/plugin/archive-url: "https://github.com/privilegedescalation/headlamp-rook-plugin/releases/download/v1.0.2/rook-1.0.2.tar.gz"
+  headlamp/plugin/archive-checksum: sha256:4f16cec3297968c7eb06e475a1c175503abf17134bd411fc86be1f18d9d27a48
  headlamp/plugin/distro-compat: ""
  headlamp/plugin/version-compat: ">=0.20"
@@ -0,0 +1 @@
+repositoryID: 4a7ada40-a800-4d7a-8a72-6ba5c3b39f13
@@ -0,0 +1,65 @@
+# ADR 001: React Context for Centralized Rook-Ceph State
+
+**Status**: Accepted
+
+**Date**: 2026-03-05
+
+**Deciders**: Development Team
+
+---
+
+## Context
+
+The Rook-Ceph plugin needs to fetch and share data from many sources:
+
+- **4 Ceph CRDs** under `ceph.rook.io/v1`: CephCluster, CephBlockPool, CephFilesystem, CephObjectStore
+- **Standard K8s resources**: StorageClasses, PersistentVolumes, PersistentVolumeClaims
+- **6 pod label selectors**: operator, mon, osd, mgr, CSI RBD, CSI CephFS
+
+This data is consumed by 7+ page views and 3 detail view sections. The context exposes 16+ fields.
+
+Data fetching uses a two-track strategy:
+
+1. **Headlamp's `K8s.ResourceClasses.*.useList()`** for standard resources (StorageClasses, PVs, PVCs)
+2. **`ApiProxy.request()` in `useEffect`** for CRDs and pods
+
+Each API call is wrapped in its own `try/catch` for independent failure isolation.
+
+---
+
+## Decision
+
+Use a single `RookCephDataProvider` React Context that centralizes all data fetching.
+
+- Standard K8s resources use Headlamp's reactive `useList()` hooks.
+- CRDs and pods use `ApiProxy.request()` in a single `useEffect` keyed on `refreshKey`.
+- Expose all data, loading, error, and refresh via context value.
+
+---
+
+## Consequences
+
+- ✅ Single fetch point avoids duplicate API calls across 7+ views
+- ✅ All views share consistent data snapshot
+- ✅ Error isolation per API call prevents one failure from blocking others
+- ✅ Refresh mechanism updates everything atomically via `refreshKey`
+- ⚠️ Large context (16+ fields) causes all consumers to re-render on any update
+- ⚠️ Monolithic provider is complex to maintain
+
+Mitigated by infrequent update cadence — data changes only on cluster state changes, not on user interaction.
+
+---
+
+## Alternatives Considered
+
+1. **Individual hooks per resource type** — Rejected. Would cause duplicate fetches across 7 pages, each independently calling the same APIs.
+
+2. **Multiple specialized contexts** (CephContext, StorageContext, PodContext) — Rejected. Adds provider nesting complexity, and the data is cross-referenced (e.g., PVC filtering depends on PV data).
+
+3. **Redux / Zustand** — Rejected. Not available as a plugin dependency; Headlamp does not expose external state management libraries.
+
+---
+
+## Changelog
+
+- 2026-03-05: Initial decision accepted
@@ -0,0 +1,50 @@
+# ADR 002: extractJsonData() Pattern for KubeObject Unwrapping
+
+**Status**: Accepted
+
+**Date**: 2026-03-05
+
+**Deciders**: Development Team
+
+---
+
+## Context
+
+Headlamp's `useList()` hooks return arrays of `KubeObject` class instances that wrap raw JSON under `.jsonData`. The plugin's type system defines plain TypeScript interfaces (e.g., `CephCluster`, `StorageClass`) matching the raw Kubernetes JSON structure.
+
+To use these typed interfaces, the `KubeObject` wrapper must be unwrapped. This pattern appears in every plugin that uses `useList()` hooks.
+
+---
+
+## Decision
+
+Implement an `extractJsonData()` utility function that takes a `KubeObject` instance and returns the unwrapped `.jsonData` property.
+
+- Apply this consistently to all `useList()` results before storing in context state.
+- All type guards (e.g., `isRookCephProvisioner()`, `isRookCephStorageClass()`) operate on the unwrapped plain objects, not on `KubeObject` wrappers.
+
+---
+
+## Consequences
+
+- ✅ Clean separation between Headlamp's class instances and the plugin's typed interfaces
+- ✅ Type guards work on plain objects, which are easier to test
+- ✅ Consistent unwrapping pattern across all resources
+- ⚠️ Extra mapping step on every `useList()` result
+- ⚠️ Runtime cost of mapping arrays (negligible for typical cluster sizes of tens to hundreds of resources)
+
+---
+
+## Alternatives Considered
+
+1. **Use `KubeObject` instances directly** — Rejected. Type guards and filters become harder to write and test with class wrappers.
+
+2. **Type assertion (`as CephCluster`)** — Rejected. Unsafe with no runtime validation; silently masks shape mismatches.
+
+3. **Custom hook wrapping `useList()` with auto-extraction** — Considered but `extractJsonData()` is simpler and more explicit. A wrapper hook would hide the unwrapping step, making the data flow less obvious.
+
+---
+
+## Changelog
+
+- 2026-03-05: Initial decision accepted
@@ -0,0 +1,57 @@
+# ADR 003: Strictly CommonComponents Only (No Direct MUI)
+
+**Status**: Accepted
+
+**Date**: 2026-03-05
+
+**Deciders**: Development Team
+
+---
+
+## Context
+
+Headlamp exports UI primitives through `@kinvolk/headlamp-plugin/lib/CommonComponents`:
+
+- `SectionBox`, `SimpleTable`, `StatusLabel`, `NameValueTable`, and others
+
+Headlamp also bundles MUI (`@mui/material`) as a shared external, making it technically accessible to plugins. Some plugins (e.g., polaris, sealed-secrets) directly use MUI components such as `Drawer`, `Alert`, and `useTheme`.
+
+The Rook plugin must decide whether to use CommonComponents exclusively or mix in direct MUI usage.
+
+---
+
+## Decision
+
+Use CommonComponents exclusively. No direct imports from `@mui/material`.
+
+- All tables use `SimpleTable`
+- All layout uses `SectionBox`
+- All status indicators use `StatusLabel`
+
+This creates a hard dependency only on Headlamp's public component API, not on MUI internals.
+
+---
+
+## Consequences
+
+- ✅ Insulated from MUI version changes in Headlamp (e.g., MUI v5 to v6 migration)
+- ✅ Consistent look-and-feel guaranteed by Headlamp's own components
+- ✅ Simpler imports with a smaller effective API surface to learn
+- ⚠️ Limited UI expressiveness — cannot use MUI `Drawer`, `Dialog`, `Stepper`, or other components not exposed by CommonComponents
+- ⚠️ Some layouts require workarounds when CommonComponents lack needed primitives
+
+Mitigated by the plugin's read-only nature, which reduces the need for complex interactive UI patterns (modals, steppers, drawers).
+
+---
+
+## Alternatives Considered
+
+1. **Mix CommonComponents with direct MUI** — Rejected for this plugin. Adds coupling risk to MUI internals, and the read-only UI does not need advanced MUI components.
+
+2. **Use only MUI directly (skip CommonComponents)** — Rejected. Would miss Headlamp's styled wrappers and risk visual inconsistency with the rest of the Headlamp UI.
+
+---
+
+## Changelog
+
+- 2026-03-05: Initial decision accepted
@@ -0,0 +1,58 @@
+# ADR 004: Read-Only Plugin with Cluster-Wide RBAC Scope
+
+**Status**: Accepted
+
+**Date**: 2026-03-05
+
+**Deciders**: Development Team
+
+---
+
+## Context
+
+Rook-Ceph manages cluster-wide storage infrastructure. The plugin needs to display:
+
+- **Ceph CRDs**: CephClusters, CephBlockPools, CephFilesystems, CephObjectStores (all cluster-scoped or in the `rook-ceph` namespace)
+- **Cluster-scoped K8s resources**: StorageClasses, PersistentVolumes
+- **Namespace-spanning resources**: PersistentVolumeClaims (all namespaces)
+
+The plugin could offer write operations (create/delete storage classes, manage pools) or remain strictly read-only. RBAC must cover all namespaces for PVCs to show complete storage utilization.
+
+---
+
+## Decision
+
+The plugin is strictly read-only — no create, update, delete, or patch operations.
+
+- RBAC requires only `get` and `list` verbs across cluster scope.
+- PVCs are fetched with `{namespace: ''}` (all namespaces).
+- This minimizes the RBAC footprint while providing comprehensive visibility.
+
+---
+
+## Consequences
+
+- ✅ Minimal RBAC requirements (read-only `get` and `list` only)
+- ✅ No risk of accidental mutation of storage infrastructure
+- ✅ Safe for monitoring and observability use cases
+- ✅ Can be deployed in restrictive environments with minimal permissions
+- ⚠️ Users cannot manage Rook resources from the UI
+- ⚠️ Must use `kubectl` or the Rook toolbox for operational tasks
+
+Mitigated by the plugin's purpose being observability, not management. Storage infrastructure changes are high-risk and better suited to GitOps or controlled `kubectl` workflows.
+
+---
+
+## Alternatives Considered
+
+1. **Full CRUD operations** — Rejected. Storage infrastructure changes are high-risk and better suited to GitOps/kubectl workflows with proper review processes.
+
+2. **Read-only with namespace-scoped PVC filtering** — Rejected. Would miss cross-namespace storage utilization data, providing an incomplete picture of cluster storage usage.
+
+3. **Optional write mode via RBAC detection** — Rejected. Adds significant complexity (capability detection, conditional UI) for unclear benefit given the observability focus.
+
+---
+
+## Changelog
+
+- 2026-03-05: Initial decision accepted
@@ -0,0 +1,39 @@
+# Architecture Decision Records (ADRs)
+
+## What is an ADR?
+
+An Architecture Decision Record (ADR) captures an important architectural decision made along with its context and consequences. ADRs are immutable once accepted — if a decision is reversed, a new ADR is created that supersedes the original.
+
+## Format
+
+This project uses 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
+- **Context**: Forces at play, including technical, political, and project-specific
+- **Decision**: The change being proposed or enacted
+- **Consequences**: What becomes easier or harder as a result
+
+## Index
+
+| ADR | Title | Status | Date |
+|-----|-------|--------|------|
+| [001](001-react-context-state.md) | React Context for Centralized Rook-Ceph State | Accepted | 2026-03-05 |
+| [002](002-extract-json-data.md) | extractJsonData() Pattern for KubeObject Unwrapping | Accepted | 2026-03-05 |
+| [003](003-common-components-only.md) | Strictly CommonComponents Only (No Direct MUI) | Accepted | 2026-03-05 |
+| [004](004-read-only-cluster-scope.md) | Read-Only Plugin with Cluster-Wide RBAC Scope | 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: Context, Decision, Consequences, Alternatives Considered.
+4. Set the status to **Proposed** and submit a PR for review.
+5. Once merged, update the status to **Accepted** and add the entry to the index table above.
+
+Use the filename pattern `NNN-short-slug.md` (e.g., `005-new-decision.md`).
+
+## References
+
+- [Michael Nygard — Documenting Architecture Decisions](https://cognitect.com/blog/2011/11/15/documenting-architecture-decisions)
+- [ADR GitHub Organization](https://adr.github.io/)
@@ -1,6 +1,6 @@
 {
-  "name": "headlamp-rook-plugin",
-  "version": "0.1.3",
+  "name": "rook",
+  "version": "1.0.2",
  "description": "Headlamp plugin for Rook-Ceph cluster visibility and CSI driver monitoring",
  "repository": {
    "type": "git",
@@ -25,6 +25,37 @@
    "test:watch": "vitest"
  },
  "devDependencies": {
-    "@kinvolk/headlamp-plugin": "^0.13.0"
+    "@headlamp-k8s/eslint-config": "^0.6.0",
+    "@kinvolk/headlamp-plugin": "^0.13.0",
+    "@mui/material": "^5.15.14",
+    "@testing-library/jest-dom": "^6.4.8",
+    "@testing-library/react": "^16.0.0",
+    "@testing-library/user-event": "^14.5.2",
+    "@types/react": "^18.0.0",
+    "@types/react-dom": "^18.0.0",
+    "eslint": "^8.57.0",
+    "jsdom": "^24.0.0",
+    "notistack": "^3.0.0",
+    "prettier": "^2.8.8",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "react-router-dom": "^5.3.0",
+    "typescript": "~5.6.2",
+    "vitest": "^3.2.4"
+  },
+  "overrides": {
+    "tar": "^7.5.11",
+    "undici": "^7.24.3",
+    "vite": ">=6.4.2",
+    "lodash": ">=4.18.0",
+    "elliptic": ">=6.6.1"
+  },
+  "packageManager": "pnpm@9.15.4",
+  "pnpm": {
+    "onlyBuiltDependencies": [
+      "@swc/core",
+      "esbuild",
+      "msw"
+    ]
  }
-}
+}
@@ -0,0 +1,5 @@
+{
+  "$schema": "https://docs.renovatebot.com/renovate-schema.json",
+  "extends": ["github>privilegedescalation/.github:renovate-config"]
+}
+
@@ -17,6 +17,8 @@ import {
  filterRookCephPVCs,
  filterRookCephStorageClasses,
  isKubeList,
+  ROOK_CEPH_API_GROUP,
+  ROOK_CEPH_API_VERSION,
  ROOK_CEPH_NAMESPACE,
  ROOK_CSI_CEPHFS_SELECTOR,
  ROOK_CSI_RBD_SELECTOR,
@@ -79,6 +81,19 @@ export function useRookCephContext(): RookCephContextValue {
  return ctx;
 }

+// ---------------------------------------------------------------------------
+// Helpers
+// ---------------------------------------------------------------------------
+
+/** Unwrap Headlamp KubeObject class instances to their raw `.jsonData`. */
+function extractJsonData(items: unknown[]): unknown[] {
+  return items.map(item =>
+    item && typeof item === 'object' && 'jsonData' in item
+      ? (item as { jsonData: unknown }).jsonData
+      : item
+  );
+}
+
 // ---------------------------------------------------------------------------
 // Provider
 // ---------------------------------------------------------------------------
@@ -118,7 +133,7 @@ export function RookCephDataProvider({ children }: { children: React.ReactNode }
        // CephCluster CRDs
        try {
          const clusterList = await ApiProxy.request(
-            `/apis/ceph.rook.io/v1/namespaces/${ROOK_CEPH_NAMESPACE}/cephclusters`
+            `/apis/${ROOK_CEPH_API_GROUP}/${ROOK_CEPH_API_VERSION}/namespaces/${ROOK_CEPH_NAMESPACE}/cephclusters`
          );
          if (!cancelled && isKubeList(clusterList)) {
            setCephClusters(clusterList.items as CephCluster[]);
@@ -130,7 +145,7 @@ export function RookCephDataProvider({ children }: { children: React.ReactNode }
        // CephBlockPool CRDs
        try {
          const poolList = await ApiProxy.request(
-            `/apis/ceph.rook.io/v1/namespaces/${ROOK_CEPH_NAMESPACE}/cephblockpools`
+            `/apis/${ROOK_CEPH_API_GROUP}/${ROOK_CEPH_API_VERSION}/namespaces/${ROOK_CEPH_NAMESPACE}/cephblockpools`
          );
          if (!cancelled && isKubeList(poolList)) {
            setBlockPools(poolList.items as CephBlockPool[]);
@@ -142,7 +157,7 @@ export function RookCephDataProvider({ children }: { children: React.ReactNode }
        // CephFilesystem CRDs
        try {
          const fsList = await ApiProxy.request(
-            `/apis/ceph.rook.io/v1/namespaces/${ROOK_CEPH_NAMESPACE}/cephfilesystems`
+            `/apis/${ROOK_CEPH_API_GROUP}/${ROOK_CEPH_API_VERSION}/namespaces/${ROOK_CEPH_NAMESPACE}/cephfilesystems`
          );
          if (!cancelled && isKubeList(fsList)) {
            setFilesystems(fsList.items as CephFilesystem[]);
@@ -154,7 +169,7 @@ export function RookCephDataProvider({ children }: { children: React.ReactNode }
        // CephObjectStore CRDs
        try {
          const osList = await ApiProxy.request(
-            `/apis/ceph.rook.io/v1/namespaces/${ROOK_CEPH_NAMESPACE}/cephobjectstores`
+            `/apis/${ROOK_CEPH_API_GROUP}/${ROOK_CEPH_API_VERSION}/namespaces/${ROOK_CEPH_NAMESPACE}/cephobjectstores`
          );
          if (!cancelled && isKubeList(osList)) {
            setObjectStores(osList.items as CephObjectStore[]);
@@ -166,7 +181,9 @@ export function RookCephDataProvider({ children }: { children: React.ReactNode }
        // Operator pods
        try {
          const opList = await ApiProxy.request(
-            `/api/v1/namespaces/${ROOK_CEPH_NAMESPACE}/pods?labelSelector=${encodeURIComponent(ROOK_OPERATOR_SELECTOR)}`
+            `/api/v1/namespaces/${ROOK_CEPH_NAMESPACE}/pods?labelSelector=${encodeURIComponent(
+              ROOK_OPERATOR_SELECTOR
+            )}`
          );
          if (!cancelled && isKubeList(opList)) setOperatorPods(opList.items as RookCephPod[]);
        } catch {
@@ -176,7 +193,9 @@ export function RookCephDataProvider({ children }: { children: React.ReactNode }
        // MON pods
        try {
          const monList = await ApiProxy.request(
-            `/api/v1/namespaces/${ROOK_CEPH_NAMESPACE}/pods?labelSelector=${encodeURIComponent(ROOK_MON_SELECTOR)}`
+            `/api/v1/namespaces/${ROOK_CEPH_NAMESPACE}/pods?labelSelector=${encodeURIComponent(
+              ROOK_MON_SELECTOR
+            )}`
          );
          if (!cancelled && isKubeList(monList)) setMonPods(monList.items as RookCephPod[]);
        } catch {
@@ -186,7 +205,9 @@ export function RookCephDataProvider({ children }: { children: React.ReactNode }
        // OSD pods
        try {
          const osdList = await ApiProxy.request(
-            `/api/v1/namespaces/${ROOK_CEPH_NAMESPACE}/pods?labelSelector=${encodeURIComponent(ROOK_OSD_SELECTOR)}`
+            `/api/v1/namespaces/${ROOK_CEPH_NAMESPACE}/pods?labelSelector=${encodeURIComponent(
+              ROOK_OSD_SELECTOR
+            )}`
          );
          if (!cancelled && isKubeList(osdList)) setOsdPods(osdList.items as RookCephPod[]);
        } catch {
@@ -196,7 +217,9 @@ export function RookCephDataProvider({ children }: { children: React.ReactNode }
        // MGR pods
        try {
          const mgrList = await ApiProxy.request(
-            `/api/v1/namespaces/${ROOK_CEPH_NAMESPACE}/pods?labelSelector=${encodeURIComponent(ROOK_MGR_SELECTOR)}`
+            `/api/v1/namespaces/${ROOK_CEPH_NAMESPACE}/pods?labelSelector=${encodeURIComponent(
+              ROOK_MGR_SELECTOR
+            )}`
          );
          if (!cancelled && isKubeList(mgrList)) setMgrPods(mgrList.items as RookCephPod[]);
        } catch {
@@ -206,9 +229,12 @@ export function RookCephDataProvider({ children }: { children: React.ReactNode }
        // CSI RBD provisioner pods
        try {
          const csiRbdList = await ApiProxy.request(
-            `/api/v1/namespaces/${ROOK_CEPH_NAMESPACE}/pods?labelSelector=${encodeURIComponent(ROOK_CSI_RBD_SELECTOR)}`
+            `/api/v1/namespaces/${ROOK_CEPH_NAMESPACE}/pods?labelSelector=${encodeURIComponent(
+              ROOK_CSI_RBD_SELECTOR
+            )}`
          );
-          if (!cancelled && isKubeList(csiRbdList)) setCsiRbdPods(csiRbdList.items as RookCephPod[]);
+          if (!cancelled && isKubeList(csiRbdList))
+            setCsiRbdPods(csiRbdList.items as RookCephPod[]);
        } catch {
          if (!cancelled) setCsiRbdPods([]);
        }
@@ -216,9 +242,12 @@ export function RookCephDataProvider({ children }: { children: React.ReactNode }
        // CSI CephFS provisioner pods
        try {
          const csiCephfsList = await ApiProxy.request(
-            `/api/v1/namespaces/${ROOK_CEPH_NAMESPACE}/pods?labelSelector=${encodeURIComponent(ROOK_CSI_CEPHFS_SELECTOR)}`
+            `/api/v1/namespaces/${ROOK_CEPH_NAMESPACE}/pods?labelSelector=${encodeURIComponent(
+              ROOK_CSI_CEPHFS_SELECTOR
+            )}`
          );
-          if (!cancelled && isKubeList(csiCephfsList)) setCsiCephfsPods(csiCephfsList.items as RookCephPod[]);
+          if (!cancelled && isKubeList(csiCephfsList))
+            setCsiCephfsPods(csiCephfsList.items as RookCephPod[]);
        } catch {
          if (!cancelled) setCsiCephfsPods([]);
        }
@@ -232,22 +261,16 @@ export function RookCephDataProvider({ children }: { children: React.ReactNode }
    }

    void fetchAsync();
-    return () => { cancelled = true; };
+    return () => {
+      cancelled = true;
+    };
  }, [refreshKey]);

  // ---------------------------------------------------------------------------
  // Derived / filtered values — memoized to avoid recomputation on every render
  // ---------------------------------------------------------------------------

-  // Headlamp useList() returns KubeObject class instances that store raw
-  // Kubernetes JSON under `.jsonData`. Extract it so our plain-object helpers
-  // work correctly.
-  const extractJsonData = (items: unknown[]): unknown[] =>
-    items.map(item =>
-      item && typeof item === 'object' && 'jsonData' in item
-        ? (item as { jsonData: unknown }).jsonData
-        : item
-    );
+  // Uses module-level extractJsonData below

  const storageClasses = useMemo(() => {
    if (!allStorageClasses) return [];
@@ -129,9 +129,12 @@ export interface CephCluster extends KubeObject {

 export function healthToStatus(health: string | undefined): 'success' | 'warning' | 'error' {
  switch (health) {
-    case 'HEALTH_OK': return 'success';
-    case 'HEALTH_WARN': return 'warning';
-    default: return 'error';
+    case 'HEALTH_OK':
+      return 'success';
+    case 'HEALTH_WARN':
+      return 'warning';
+    default:
+      return 'error';
  }
 }

@@ -206,10 +209,16 @@ export interface CephObjectStoreSpec {
  gateway?: { port?: number; securePort?: number; instances?: number };
 }

+export interface CephObjectStoreEndpoints {
+  insecure?: string[];
+  secure?: string[];
+}
+
 export interface CephObjectStoreStatus {
  phase?: string;
  conditions?: CephClusterCondition[];
  info?: Record<string, string>;
+  endpoints?: CephObjectStoreEndpoints;
 }

 export interface CephObjectStore extends KubeObject {
@@ -331,9 +340,7 @@ export function findBoundPv(
 ): RookCephPersistentVolume | undefined {
  const ns = pvc.metadata.namespace ?? '';
  const name = pvc.metadata.name;
-  return rookPvs.find(
-    pv => pv.spec.claimRef?.namespace === ns && pv.spec.claimRef?.name === name
-  );
+  return rookPvs.find(pv => pv.spec.claimRef?.namespace === ns && pv.spec.claimRef?.name === name);
 }

 // ---------------------------------------------------------------------------
@@ -368,15 +375,11 @@ export interface RookCephPod extends KubeObject {
 }

 export function isPodReady(pod: RookCephPod): 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: RookCephPod): 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;
 }

 export function getPodImage(pod: RookCephPod): string {
@@ -441,11 +444,16 @@ export function parseStorageToBytes(storage: string): number {
  const suffix = match[2] ?? '';
  const multipliers: Record<string, number> = {
    '': 1,
-    K: 1e3, Ki: 1024,
-    M: 1e6, Mi: 1024 ** 2,
-    G: 1e9, Gi: 1024 ** 3,
-    T: 1e12, Ti: 1024 ** 4,
-    P: 1e15, Pi: 1024 ** 5,
+    K: 1e3,
+    Ki: 1024,
+    M: 1e6,
+    Mi: 1024 ** 2,
+    G: 1e9,
+    Gi: 1024 ** 3,
+    T: 1e12,
+    Ti: 1024 ** 4,
+    P: 1e15,
+    Pi: 1024 ** 5,
  };
  return value * (multipliers[suffix] ?? 1);
 }
@@ -453,16 +461,11 @@ export function parseStorageToBytes(storage: string): number {
 /** Returns display label for storage type (rbd → Block, cephfs → Filesystem). */
 export function formatStorageType(type: 'rbd' | 'cephfs' | 'unknown'): string {
  switch (type) {
-    case 'rbd': return 'Block (RBD)';
-    case 'cephfs': return 'Filesystem (CephFS)';
-    default: return 'Unknown';
+    case 'rbd':
+      return 'Block (RBD)';
+    case 'cephfs':
+      return 'Filesystem (CephFS)';
+    default:
+      return 'Unknown';
  }
 }
-
-/** Extracts pool/subvolume group name from a Rook-Ceph PV volumeHandle. */
-export function extractPoolFromVolumeHandle(handle: string | undefined): string {
-  if (!handle) return '—';
-  // RBD format: "<csi-vol-id>-<pool>-..." — pool is in volumeAttributes
-  // We rely on volumeAttributes.pool instead; this just provides a fallback.
-  return handle;
-}
@@ -14,10 +14,14 @@ import { useRookCephContext } from '../api/RookCephDataContext';

 function getHealthColor(health: string | undefined): string {
  switch (health) {
-    case 'HEALTH_OK': return '#4caf50';
-    case 'HEALTH_WARN': return '#ff9800';
-    case 'HEALTH_ERR': return '#f44336';
-    default: return '#9e9e9e';
+    case 'HEALTH_OK':
+      return 'var(--mui-palette-success-main, #4caf50)';
+    case 'HEALTH_WARN':
+      return 'var(--mui-palette-warning-main, #ff9800)';
+    case 'HEALTH_ERR':
+      return 'var(--mui-palette-error-main, #f44336)';
+    default:
+      return 'var(--mui-palette-action-disabled, #9e9e9e)';
  }
 }

@@ -17,9 +17,18 @@ import { useRookCephContext } from '../api/RookCephDataContext';
 function BlockPoolDetail({ pool, onClose }: { pool: CephBlockPool; onClose: () => void }) {
  return (
    <div
+      role="dialog"
+      aria-modal="true"
+      aria-labelledby="drawer-title-blockpool"
+      onKeyDown={e => {
+        if (e.key === 'Escape') onClose();
+      }}
      style={{
        position: 'fixed',
-        top: 0, right: 0, bottom: 0, width: '480px',
+        top: 0,
+        right: 0,
+        bottom: 0,
+        width: '480px',
        backgroundColor: 'var(--mui-palette-background-paper, #fff)',
        boxShadow: '-4px 0 16px rgba(0,0,0,0.15)',
        zIndex: 1300,
@@ -27,8 +36,15 @@ function BlockPoolDetail({ pool, onClose }: { pool: CephBlockPool; onClose: () =
        padding: '24px',
      }}
    >
-      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '16px' }}>
-        <strong>{pool.metadata.name}</strong>
+      <div
+        style={{
+          display: 'flex',
+          justifyContent: 'space-between',
+          alignItems: 'center',
+          marginBottom: '16px',
+        }}
+      >
+        <strong id="drawer-title-blockpool">{pool.metadata.name}</strong>
        <button
          onClick={onClose}
          aria-label="Close"
@@ -99,14 +115,18 @@ export default function BlockPoolsPage() {

      {error && (
        <SectionBox title="Error">
-          <NameValueTable rows={[{ name: 'Status', value: <StatusLabel status="error">{error}</StatusLabel> }]} />
+          <NameValueTable
+            rows={[{ name: 'Status', value: <StatusLabel status="error">{error}</StatusLabel> }]}
+          />
        </SectionBox>
      )}

      {blockPools.length === 0 ? (
        <SectionBox title="No Block Pools">
          <NameValueTable
-            rows={[{ name: 'Status', value: 'No CephBlockPool resources found in rook-ceph namespace.' }]}
+            rows={[
+              { name: 'Status', value: 'No CephBlockPool resources found in rook-ceph namespace.' },
+            ]}
          />
        </SectionBox>
      ) : (
@@ -118,7 +138,15 @@ export default function BlockPoolsPage() {
                getter: (p: CephBlockPool) => (
                  <button
                    onClick={() => setSelected(p)}
-                    style={{ border: 'none', background: 'transparent', color: 'var(--link-color, #1976d2)', cursor: 'pointer', textDecoration: 'underline', padding: 0, font: 'inherit' }}
+                    style={{
+                      border: 'none',
+                      background: 'transparent',
+                      color: 'var(--link-color, #1976d2)',
+                      cursor: 'pointer',
+                      textDecoration: 'underline',
+                      padding: 0,
+                      font: 'inherit',
+                    }}
                  >
                    {p.metadata.name}
                  </button>
@@ -132,10 +160,22 @@ export default function BlockPoolsPage() {
                  </StatusLabel>
                ),
              },
-              { label: 'Replicas', getter: (p: CephBlockPool) => String(p.spec?.replicated?.size ?? '—') },
-              { label: 'Failure Domain', getter: (p: CephBlockPool) => p.spec?.failureDomain ?? '—' },
-              { label: 'Mirroring', getter: (p: CephBlockPool) => p.spec?.mirroring?.enabled ? 'Enabled' : 'Disabled' },
-              { label: 'Age', getter: (p: CephBlockPool) => formatAge(p.metadata.creationTimestamp) },
+              {
+                label: 'Replicas',
+                getter: (p: CephBlockPool) => String(p.spec?.replicated?.size ?? '—'),
+              },
+              {
+                label: 'Failure Domain',
+                getter: (p: CephBlockPool) => p.spec?.failureDomain ?? '—',
+              },
+              {
+                label: 'Mirroring',
+                getter: (p: CephBlockPool) => (p.spec?.mirroring?.enabled ? 'Enabled' : 'Disabled'),
+              },
+              {
+                label: 'Age',
+                getter: (p: CephBlockPool) => formatAge(p.metadata.creationTimestamp),
+              },
            ]}
            data={blockPools}
          />
@@ -145,7 +185,12 @@ export default function BlockPoolsPage() {
      {selected && (
        <>
          <div
-            style={{ position: 'fixed', inset: 0, backgroundColor: 'rgba(0,0,0,0.3)', zIndex: 1299 }}
+            style={{
+              position: 'fixed',
+              inset: 0,
+              backgroundColor: 'rgba(0,0,0,0.3)',
+              zIndex: 1299,
+            }}
            onClick={() => setSelected(null)}
          />
          <BlockPoolDetail pool={selected} onClose={() => setSelected(null)} />
@@ -47,10 +47,14 @@ const ROOK_APP_LABELS = new Set([
  'rook-ceph-mgr',
  'rook-ceph-mds',
  'rook-ceph-rgw',
+  // Legacy CSI labels (pre-Rook 1.12)
  'csi-rbdplugin-provisioner',
  'csi-cephfsplugin-provisioner',
  'csi-rbdplugin',
  'csi-cephfsplugin',
+  // New CSI labels (Rook 1.12+)
+  'rook-ceph.rbd.csi.ceph.com-ctrlplugin',
+  'rook-ceph.cephfs.csi.ceph.com-ctrlplugin',
 ]);

 const ROLE_LABELS: Record<string, string> = {
@@ -64,6 +68,8 @@ const ROLE_LABELS: Record<string, string> = {
  'csi-cephfsplugin-provisioner': 'CSI CephFS Provisioner',
  'csi-rbdplugin': 'CSI RBD Node Plugin',
  'csi-cephfsplugin': 'CSI CephFS Node Plugin',
+  'rook-ceph.rbd.csi.ceph.com-ctrlplugin': 'CSI RBD Provisioner',
+  'rook-ceph.cephfs.csi.ceph.com-ctrlplugin': 'CSI CephFS Provisioner',
 };

 export default function CephPodDetailSection({ resource }: CephPodDetailSectionProps) {
@@ -80,16 +86,17 @@ export default function CephPodDetailSection({ resource }: CephPodDetailSectionP
  const role = ROLE_LABELS[appLabel] ?? appLabel;
  const phase = raw.status?.phase ?? 'Unknown';
  const isReady =
-    raw.status?.conditions?.some((c) => c.type === 'Ready' && c.status === 'True') ?? false;
-  const restarts =
-    raw.status?.containerStatuses?.reduce((s, c) => s + c.restartCount, 0) ?? 0;
+    raw.status?.conditions?.some(c => c.type === 'Ready' && c.status === 'True') ?? false;
+  const restarts = raw.status?.containerStatuses?.reduce((s, c) => s + c.restartCount, 0) ?? 0;

-  const containerRows = (raw.status?.containerStatuses ?? []).map((cs) => {
+  const containerRows = (raw.status?.containerStatuses ?? []).map(cs => {
    let stateStr = 'Unknown';
    if (cs.state?.running) stateStr = 'Running';
    else if (cs.state?.waiting) stateStr = `Waiting: ${cs.state.waiting.reason ?? ''}`;
    else if (cs.state?.terminated)
-      stateStr = `Terminated: ${cs.state.terminated.reason ?? ''} (exit ${cs.state.terminated.exitCode ?? ''})`;
+      stateStr = `Terminated: ${cs.state.terminated.reason ?? ''} (exit ${
+        cs.state.terminated.exitCode ?? ''
+      })`;

    return {
      name: cs.name,
@@ -111,11 +118,7 @@ export default function CephPodDetailSection({ resource }: CephPodDetailSectionP
          },
          {
            name: 'Phase',
-            value: (
-              <StatusLabel status={isReady ? 'success' : 'error'}>
-                {phase}
-              </StatusLabel>
-            ),
+            value: <StatusLabel status={isReady ? 'success' : 'error'}>{phase}</StatusLabel>,
          },
          { name: 'Node', value: raw.spec?.nodeName ?? '—' },
          { name: 'Restarts', value: String(restarts) },
@@ -11,7 +11,15 @@ import {
 } from '@kinvolk/headlamp-plugin/lib/CommonComponents';
 import React from 'react';
 import type { CephCluster, RookCephPod } from '../api/k8s';
-import { formatAge, formatBytes, getPodImage, getPodRestarts, healthToStatus, isPodReady, phaseToStatus } from '../api/k8s';
+import {
+  formatAge,
+  formatBytes,
+  getPodImage,
+  getPodRestarts,
+  healthToStatus,
+  isPodReady,
+  phaseToStatus,
+} from '../api/k8s';

 interface ClusterStatusCardProps {
  cephClusters: CephCluster[];
@@ -26,17 +34,14 @@ interface ClusterStatusCardProps {
 function PodStatusBadge({ pod }: { pod: RookCephPod }) {
  const ready = isPodReady(pod);
  const phase = pod.status?.phase ?? 'Unknown';
-  return (
-    <StatusLabel status={ready ? 'success' : 'error'}>
-      {phase}
-    </StatusLabel>
-  );
+  return <StatusLabel status={ready ? 'success' : 'error'}>{phase}</StatusLabel>;
 }

 function PodSummaryRow({ pods, label }: { pods: RookCephPod[]; label: string }) {
  const ready = pods.filter(isPodReady).length;
  const total = pods.length;
-  const status = total === 0 ? 'error' : ready === total ? 'success' : ready > 0 ? 'warning' : 'error';
+  const status =
+    total === 0 ? 'error' : ready === total ? 'success' : ready > 0 ? 'warning' : 'error';
  return {
    name: label,
    value: (
@@ -84,12 +89,12 @@ export default function ClusterStatusCard({
                  {
                    name: 'Phase',
                    value: (
-                      <StatusLabel status={phaseToStatus(phase)}>
-                        {phase ?? 'Unknown'}
-                      </StatusLabel>
+                      <StatusLabel status={phaseToStatus(phase)}>{phase ?? 'Unknown'}</StatusLabel>
                    ),
                  },
-                  ...(cluster.status?.message ? [{ name: 'Message', value: cluster.status.message }] : []),
+                  ...(cluster.status?.message
+                    ? [{ name: 'Message', value: cluster.status.message }]
+                    : []),
                  { name: 'Ceph Version', value: version },
                  { name: 'Namespace', value: cluster.metadata.namespace ?? '—' },
                  { name: 'Age', value: formatAge(cluster.metadata.creationTimestamp) },
@@ -102,8 +107,19 @@ export default function ClusterStatusCard({
                <div style={{ marginBottom: '12px' }}>
                  <PercentageBar
                    data={[
-                      { name: 'Used', value: bytesUsed, fill: usedPct > 80 ? '#f44336' : '#1976d2' },
-                      { name: 'Free', value: bytesAvail, fill: '#e0e0e0' },
+                      {
+                        name: 'Used',
+                        value: bytesUsed,
+                        fill:
+                          usedPct > 80
+                            ? 'var(--mui-palette-error-main, #f44336)'
+                            : 'var(--mui-palette-primary-main, #1976d2)',
+                      },
+                      {
+                        name: 'Free',
+                        value: bytesAvail,
+                        fill: 'var(--mui-palette-action-disabledBackground, #e0e0e0)',
+                      },
                    ]}
                    total={bytesTotal}
                  />
@@ -142,7 +158,9 @@ export function PodDetailRows({ pods, label }: { pods: RookCephPod[]; label: str
    return (
      <SectionBox title={label}>
        <NameValueTable
-          rows={[{ name: 'Status', value: <StatusLabel status="error">No pods found</StatusLabel> }]}
+          rows={[
+            { name: 'Status', value: <StatusLabel status="error">No pods found</StatusLabel> },
+          ]}
        />
      </SectionBox>
    );
@@ -17,9 +17,18 @@ import { useRookCephContext } from '../api/RookCephDataContext';
 function FilesystemDetail({ fs, onClose }: { fs: CephFilesystem; onClose: () => void }) {
  return (
    <div
+      role="dialog"
+      aria-modal="true"
+      aria-labelledby="drawer-title-filesystem"
+      onKeyDown={e => {
+        if (e.key === 'Escape') onClose();
+      }}
      style={{
        position: 'fixed',
-        top: 0, right: 0, bottom: 0, width: '480px',
+        top: 0,
+        right: 0,
+        bottom: 0,
+        width: '480px',
        backgroundColor: 'var(--mui-palette-background-paper, #fff)',
        boxShadow: '-4px 0 16px rgba(0,0,0,0.15)',
        zIndex: 1300,
@@ -27,8 +36,15 @@ function FilesystemDetail({ fs, onClose }: { fs: CephFilesystem; onClose: () =>
        padding: '24px',
      }}
    >
-      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '16px' }}>
-        <strong>{fs.metadata.name}</strong>
+      <div
+        style={{
+          display: 'flex',
+          justifyContent: 'space-between',
+          alignItems: 'center',
+          marginBottom: '16px',
+        }}
+      >
+        <strong id="drawer-title-filesystem">{fs.metadata.name}</strong>
        <button
          onClick={onClose}
          aria-label="Close"
@@ -58,7 +74,10 @@ function FilesystemDetail({ fs, onClose }: { fs: CephFilesystem; onClose: () =>
        <NameValueTable
          rows={[
            { name: 'Active Count', value: String(fs.spec?.metadataServer?.activeCount ?? '—') },
-            { name: 'Active Standby', value: String(fs.spec?.metadataServer?.activeStandby ?? '—') },
+            {
+              name: 'Active Standby',
+              value: String(fs.spec?.metadataServer?.activeStandby ?? '—'),
+            },
          ]}
        />
      </SectionBox>
@@ -107,14 +126,21 @@ export default function FilesystemsPage() {

      {error && (
        <SectionBox title="Error">
-          <NameValueTable rows={[{ name: 'Status', value: <StatusLabel status="error">{error}</StatusLabel> }]} />
+          <NameValueTable
+            rows={[{ name: 'Status', value: <StatusLabel status="error">{error}</StatusLabel> }]}
+          />
        </SectionBox>
      )}

      {filesystems.length === 0 ? (
        <SectionBox title="No Filesystems">
          <NameValueTable
-            rows={[{ name: 'Status', value: 'No CephFilesystem resources found in rook-ceph namespace.' }]}
+            rows={[
+              {
+                name: 'Status',
+                value: 'No CephFilesystem resources found in rook-ceph namespace.',
+              },
+            ]}
          />
        </SectionBox>
      ) : (
@@ -126,7 +152,15 @@ export default function FilesystemsPage() {
                getter: (f: CephFilesystem) => (
                  <button
                    onClick={() => setSelected(f)}
-                    style={{ border: 'none', background: 'transparent', color: 'var(--link-color, #1976d2)', cursor: 'pointer', textDecoration: 'underline', padding: 0, font: 'inherit' }}
+                    style={{
+                      border: 'none',
+                      background: 'transparent',
+                      color: 'var(--link-color, #1976d2)',
+                      cursor: 'pointer',
+                      textDecoration: 'underline',
+                      padding: 0,
+                      font: 'inherit',
+                    }}
                  >
                    {f.metadata.name}
                  </button>
@@ -140,10 +174,22 @@ export default function FilesystemsPage() {
                  </StatusLabel>
                ),
              },
-              { label: 'Active MDS', getter: (f: CephFilesystem) => String(f.spec?.metadataServer?.activeCount ?? '—') },
-              { label: 'Active Standby', getter: (f: CephFilesystem) => String(f.spec?.metadataServer?.activeStandby ?? '—') },
-              { label: 'Data Pools', getter: (f: CephFilesystem) => String(f.spec?.dataPools?.length ?? 0) },
-              { label: 'Age', getter: (f: CephFilesystem) => formatAge(f.metadata.creationTimestamp) },
+              {
+                label: 'Active MDS',
+                getter: (f: CephFilesystem) => String(f.spec?.metadataServer?.activeCount ?? '—'),
+              },
+              {
+                label: 'Active Standby',
+                getter: (f: CephFilesystem) => String(f.spec?.metadataServer?.activeStandby ?? '—'),
+              },
+              {
+                label: 'Data Pools',
+                getter: (f: CephFilesystem) => String(f.spec?.dataPools?.length ?? 0),
+              },
+              {
+                label: 'Age',
+                getter: (f: CephFilesystem) => formatAge(f.metadata.creationTimestamp),
+              },
            ]}
            data={filesystems}
          />
@@ -153,7 +199,12 @@ export default function FilesystemsPage() {
      {selected && (
        <>
          <div
-            style={{ position: 'fixed', inset: 0, backgroundColor: 'rgba(0,0,0,0.3)', zIndex: 1299 }}
+            style={{
+              position: 'fixed',
+              inset: 0,
+              backgroundColor: 'rgba(0,0,0,0.3)',
+              zIndex: 1299,
+            }}
            onClick={() => setSelected(null)}
          />
          <FilesystemDetail fs={selected} onClose={() => setSelected(null)} />
@@ -15,15 +15,22 @@ import { CephObjectStore, formatAge, phaseToStatus } from '../api/k8s';
 import { useRookCephContext } from '../api/RookCephDataContext';

 function ObjectStoreDetail({ store, onClose }: { store: CephObjectStore; onClose: () => void }) {
-  const endpoints = (store.status as unknown as Record<string, unknown>)?.endpoints as
-    | { insecure?: string[]; secure?: string[] }
-    | undefined;
+  const endpoints = store.status?.endpoints;

  return (
    <div
+      role="dialog"
+      aria-modal="true"
+      aria-labelledby="drawer-title-objectstore"
+      onKeyDown={e => {
+        if (e.key === 'Escape') onClose();
+      }}
      style={{
        position: 'fixed',
-        top: 0, right: 0, bottom: 0, width: '480px',
+        top: 0,
+        right: 0,
+        bottom: 0,
+        width: '480px',
        backgroundColor: 'var(--mui-palette-background-paper, #fff)',
        boxShadow: '-4px 0 16px rgba(0,0,0,0.15)',
        zIndex: 1300,
@@ -31,8 +38,15 @@ function ObjectStoreDetail({ store, onClose }: { store: CephObjectStore; onClose
        padding: '24px',
      }}
    >
-      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '16px' }}>
-        <strong>{store.metadata.name}</strong>
+      <div
+        style={{
+          display: 'flex',
+          justifyContent: 'space-between',
+          alignItems: 'center',
+          marginBottom: '16px',
+        }}
+      >
+        <strong id="drawer-title-objectstore">{store.metadata.name}</strong>
        <button
          onClick={onClose}
          aria-label="Close"
@@ -67,7 +81,7 @@ function ObjectStoreDetail({ store, onClose }: { store: CephObjectStore; onClose
          ]}
        />
      </SectionBox>
-      {(endpoints?.insecure?.length || endpoints?.secure?.length) ? (
+      {endpoints?.insecure?.length || endpoints?.secure?.length ? (
        <SectionBox title="Endpoints">
          <NameValueTable
            rows={[
@@ -104,14 +118,21 @@ export default function ObjectStoresPage() {

      {error && (
        <SectionBox title="Error">
-          <NameValueTable rows={[{ name: 'Status', value: <StatusLabel status="error">{error}</StatusLabel> }]} />
+          <NameValueTable
+            rows={[{ name: 'Status', value: <StatusLabel status="error">{error}</StatusLabel> }]}
+          />
        </SectionBox>
      )}

      {objectStores.length === 0 ? (
        <SectionBox title="No Object Stores">
          <NameValueTable
-            rows={[{ name: 'Status', value: 'No CephObjectStore resources found in rook-ceph namespace.' }]}
+            rows={[
+              {
+                name: 'Status',
+                value: 'No CephObjectStore resources found in rook-ceph namespace.',
+              },
+            ]}
          />
        </SectionBox>
      ) : (
@@ -123,7 +144,15 @@ export default function ObjectStoresPage() {
                getter: (o: CephObjectStore) => (
                  <button
                    onClick={() => setSelected(o)}
-                    style={{ border: 'none', background: 'transparent', color: 'var(--link-color, #1976d2)', cursor: 'pointer', textDecoration: 'underline', padding: 0, font: 'inherit' }}
+                    style={{
+                      border: 'none',
+                      background: 'transparent',
+                      color: 'var(--link-color, #1976d2)',
+                      cursor: 'pointer',
+                      textDecoration: 'underline',
+                      padding: 0,
+                      font: 'inherit',
+                    }}
                  >
                    {o.metadata.name}
                  </button>
@@ -137,9 +166,18 @@ export default function ObjectStoresPage() {
                  </StatusLabel>
                ),
              },
-              { label: 'Gateway Port', getter: (o: CephObjectStore) => String(o.spec?.gateway?.port ?? '—') },
-              { label: 'Instances', getter: (o: CephObjectStore) => String(o.spec?.gateway?.instances ?? '—') },
-              { label: 'Age', getter: (o: CephObjectStore) => formatAge(o.metadata.creationTimestamp) },
+              {
+                label: 'Gateway Port',
+                getter: (o: CephObjectStore) => String(o.spec?.gateway?.port ?? '—'),
+              },
+              {
+                label: 'Instances',
+                getter: (o: CephObjectStore) => String(o.spec?.gateway?.instances ?? '—'),
+              },
+              {
+                label: 'Age',
+                getter: (o: CephObjectStore) => formatAge(o.metadata.creationTimestamp),
+              },
            ]}
            data={objectStores}
          />
@@ -149,7 +187,12 @@ export default function ObjectStoresPage() {
      {selected && (
        <>
          <div
-            style={{ position: 'fixed', inset: 0, backgroundColor: 'rgba(0,0,0,0.3)', zIndex: 1299 }}
+            style={{
+              position: 'fixed',
+              inset: 0,
+              backgroundColor: 'rgba(0,0,0,0.3)',
+              zIndex: 1299,
+            }}
            onClick={() => setSelected(null)}
          />
          <ObjectStoreDetail store={selected} onClose={() => setSelected(null)} />
@@ -15,7 +15,14 @@ import {
  StatusLabel,
 } from '@kinvolk/headlamp-plugin/lib/CommonComponents';
 import React from 'react';
-import { formatAge, formatBytes, healthToStatus, phaseToStatus, storageClassType } from '../api/k8s';
+import {
+  formatAge,
+  formatBytes,
+  healthToStatus,
+  parseStorageToBytes,
+  phaseToStatus,
+  storageClassType,
+} from '../api/k8s';
 import { useRookCephContext } from '../api/RookCephDataContext';
 import ClusterStatusCard from './ClusterStatusCard';

@@ -70,7 +77,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="Rook-Ceph — Overview" />
        <button
          onClick={refresh}
@@ -97,11 +111,16 @@ export default function OverviewPage() {
            rows={[
              {
                name: 'Status',
-                value: <StatusLabel status="error">No CephCluster found in namespace rook-ceph</StatusLabel>,
+                value: (
+                  <StatusLabel status="error">
+                    No CephCluster found in namespace rook-ceph
+                  </StatusLabel>
+                ),
              },
              {
                name: 'Install',
-                value: 'helm install rook-ceph rook-release/rook-ceph -n rook-ceph --create-namespace',
+                value:
+                  'helm install rook-ceph rook-release/rook-ceph -n rook-ceph --create-namespace',
              },
              {
                name: 'Docs',
@@ -129,9 +148,7 @@ export default function OverviewPage() {
              {
                name: 'Health',
                value: (
-                  <StatusLabel status={healthToStatus(primaryHealth)}>
-                    {primaryHealth}
-                  </StatusLabel>
+                  <StatusLabel status={healthToStatus(primaryHealth)}>{primaryHealth}</StatusLabel>
                ),
              },
              {
@@ -146,27 +163,46 @@ export default function OverviewPage() {
      {/* Storage type distribution */}
      {storageClasses.length > 0 && (
        <SectionBox title="Storage Summary">
-          {storageClasses.length > 0 && (
-            <div style={{ marginBottom: '16px' }}>
-              <div style={{ marginBottom: '8px', fontSize: '14px', color: 'var(--mui-palette-text-secondary)' }}>
-                StorageClass Type Distribution
-              </div>
-              <PercentageBar
-                data={[
-                  ...(rbdClasses.length > 0
-                    ? [{ name: 'Block (RBD)', value: rbdClasses.length, fill: '#1976d2' }]
-                    : []),
-                  ...(cephfsClasses.length > 0
-                    ? [{ name: 'Filesystem (CephFS)', value: cephfsClasses.length, fill: '#9c27b0' }]
-                    : []),
-                ]}
-                total={storageClasses.length}
-              />
+          <div style={{ marginBottom: '16px' }}>
+            <div
+              style={{
+                marginBottom: '8px',
+                fontSize: '14px',
+                color: 'var(--mui-palette-text-secondary)',
+              }}
+            >
+              StorageClass Type Distribution
            </div>
-          )}
+            <PercentageBar
+              data={[
+                ...(rbdClasses.length > 0
+                  ? [
+                      {
+                        name: 'Block (RBD)',
+                        value: rbdClasses.length,
+                        fill: 'var(--mui-palette-primary-main, #1976d2)',
+                      },
+                    ]
+                  : []),
+                ...(cephfsClasses.length > 0
+                  ? [
+                      {
+                        name: 'Filesystem (CephFS)',
+                        value: cephfsClasses.length,
+                        fill: 'var(--mui-palette-secondary-main, #9c27b0)',
+                      },
+                    ]
+                  : []),
+              ]}
+              total={storageClasses.length}
+            />
+          </div>
          <NameValueTable
            rows={[
-              { name: 'Storage Classes', value: `${storageClasses.length} (${rbdClasses.length} RBD, ${cephfsClasses.length} CephFS)` },
+              {
+                name: 'Storage Classes',
+                value: `${storageClasses.length} (${rbdClasses.length} RBD, ${cephfsClasses.length} CephFS)`,
+              },
              { name: 'Block Pools', value: String(blockPools.length) },
              { name: 'Filesystems', value: String(filesystems.length) },
              { name: 'Object Stores', value: String(objectStores.length) },
@@ -177,10 +213,20 @@ export default function OverviewPage() {
                value: <StatusLabel status="success">{pvcStatusCounts.Bound}</StatusLabel>,
              },
              ...(pvcStatusCounts.Pending > 0
-                ? [{ name: 'PVCs (Pending)', value: <StatusLabel status="warning">{pvcStatusCounts.Pending}</StatusLabel> }]
+                ? [
+                    {
+                      name: 'PVCs (Pending)',
+                      value: <StatusLabel status="warning">{pvcStatusCounts.Pending}</StatusLabel>,
+                    },
+                  ]
                : []),
              ...(pvcStatusCounts.Lost > 0
-                ? [{ name: 'PVCs (Lost)', value: <StatusLabel status="error">{pvcStatusCounts.Lost}</StatusLabel> }]
+                ? [
+                    {
+                      name: 'PVCs (Lost)',
+                      value: <StatusLabel status="error">{pvcStatusCounts.Lost}</StatusLabel>,
+                    },
+                  ]
                : []),
            ]}
          />
@@ -203,18 +249,18 @@ export default function OverviewPage() {
        <SectionBox title="Block Pools">
          <SimpleTable
            columns={[
-              { label: 'Name', getter: (p) => p.metadata.name },
+              { label: 'Name', getter: p => p.metadata.name },
              {
                label: 'Phase',
-                getter: (p) => (
+                getter: p => (
                  <StatusLabel status={phaseToStatus(p.status?.phase)}>
                    {p.status?.phase ?? 'Unknown'}
                  </StatusLabel>
                ),
              },
-              { label: 'Replicas', getter: (p) => String(p.spec?.replicated?.size ?? '—') },
-              { label: 'Failure Domain', getter: (p) => p.spec?.failureDomain ?? '—' },
-              { label: 'Age', getter: (p) => formatAge(p.metadata.creationTimestamp) },
+              { label: 'Replicas', getter: p => String(p.spec?.replicated?.size ?? '—') },
+              { label: 'Failure Domain', getter: p => p.spec?.failureDomain ?? '—' },
+              { label: 'Age', getter: p => formatAge(p.metadata.creationTimestamp) },
            ]}
            data={blockPools}
          />
@@ -226,17 +272,20 @@ export default function OverviewPage() {
        <SectionBox title="Filesystems">
          <SimpleTable
            columns={[
-              { label: 'Name', getter: (f) => f.metadata.name },
+              { label: 'Name', getter: f => f.metadata.name },
              {
                label: 'Phase',
-                getter: (f) => (
+                getter: f => (
                  <StatusLabel status={phaseToStatus(f.status?.phase)}>
                    {f.status?.phase ?? 'Unknown'}
                  </StatusLabel>
                ),
              },
-              { label: 'Active MDS', getter: (f) => String(f.spec?.metadataServer?.activeCount ?? '—') },
-              { label: 'Age', getter: (f) => formatAge(f.metadata.creationTimestamp) },
+              {
+                label: 'Active MDS',
+                getter: f => String(f.spec?.metadataServer?.activeCount ?? '—'),
+              },
+              { label: 'Age', getter: f => formatAge(f.metadata.creationTimestamp) },
            ]}
            data={filesystems}
          />
@@ -248,18 +297,18 @@ export default function OverviewPage() {
        <SectionBox title="Object Stores">
          <SimpleTable
            columns={[
-              { label: 'Name', getter: (o) => o.metadata.name },
+              { label: 'Name', getter: o => o.metadata.name },
              {
                label: 'Phase',
-                getter: (o) => (
+                getter: o => (
                  <StatusLabel status={phaseToStatus(o.status?.phase)}>
                    {o.status?.phase ?? 'Unknown'}
                  </StatusLabel>
                ),
              },
-              { label: 'Gateway Port', getter: (o) => String(o.spec?.gateway?.port ?? '—') },
-              { label: 'Instances', getter: (o) => String(o.spec?.gateway?.instances ?? '—') },
-              { label: 'Age', getter: (o) => formatAge(o.metadata.creationTimestamp) },
+              { label: 'Gateway Port', getter: o => String(o.spec?.gateway?.port ?? '—') },
+              { label: 'Instances', getter: o => String(o.spec?.gateway?.instances ?? '—') },
+              { label: 'Age', getter: o => formatAge(o.metadata.creationTimestamp) },
            ]}
            data={objectStores}
          />
@@ -271,17 +320,17 @@ export default function OverviewPage() {
        <SectionBox title="Attention: Non-Bound PVCs">
          <SimpleTable
            columns={[
-              { label: 'Name', getter: (pvc) => pvc.metadata.name },
-              { label: 'Namespace', getter: (pvc) => pvc.metadata.namespace ?? '—' },
+              { label: 'Name', getter: pvc => pvc.metadata.name },
+              { label: 'Namespace', getter: pvc => pvc.metadata.namespace ?? '—' },
              {
                label: 'Status',
-                getter: (pvc) => (
+                getter: pvc => (
                  <StatusLabel status={phaseToStatus(pvc.status?.phase)}>
                    {pvc.status?.phase ?? 'Unknown'}
                  </StatusLabel>
                ),
              },
-              { label: 'Age', getter: (pvc) => formatAge(pvc.metadata.creationTimestamp) },
+              { label: 'Age', getter: pvc => formatAge(pvc.metadata.creationTimestamp) },
            ]}
            data={nonBoundPvcs}
          />
@@ -290,19 +339,3 @@ export default function OverviewPage() {
    </>
  );
 }
-
-function parseStorageToBytes(storage: string): number {
-  const match = /^(\d+(?:\.\d+)?)\s*(Ki|Mi|Gi|Ti|Pi|K|M|G|T|P)?$/.exec(storage.trim());
-  if (!match) return 0;
-  const value = parseFloat(match[1]);
-  const suffix = match[2] ?? '';
-  const multipliers: Record<string, number> = {
-    '': 1,
-    K: 1e3, Ki: 1024,
-    M: 1e6, Mi: 1024 ** 2,
-    G: 1e9, Gi: 1024 ** 3,
-    T: 1e12, Ti: 1024 ** 4,
-    P: 1e15, Pi: 1024 ** 5,
-  };
-  return value * (multipliers[suffix] ?? 1);
-}
@@ -5,10 +5,7 @@
 * Uses registerDetailsViewSection in index.tsx.
 */

-import {
-  NameValueTable,
-  SectionBox,
-} from '@kinvolk/headlamp-plugin/lib/CommonComponents';
+import { NameValueTable, SectionBox } from '@kinvolk/headlamp-plugin/lib/CommonComponents';
 import React from 'react';
 import { findBoundPv, formatStorageType } from '../api/k8s';
 import { useRookCephContext } from '../api/RookCephDataContext';
@@ -40,7 +37,11 @@ export default function PVCDetailSection({ resource }: PVCDetailSectionProps) {

  // Determine storage type from driver name
  const driver = boundPv.spec.csi?.driver ?? '';
-  const type = driver.includes('.rbd.') ? 'rbd' : driver.includes('.cephfs.') ? 'cephfs' : 'unknown';
+  const type = driver.includes('.rbd.')
+    ? 'rbd'
+    : driver.includes('.cephfs.')
+    ? 'cephfs'
+    : 'unknown';

  return (
    <SectionBox title="Rook-Ceph Storage Details">
@@ -4,17 +4,17 @@
 * Shown only when the PV uses a Rook-Ceph CSI driver.
 */

-import {
-  NameValueTable,
-  SectionBox,
-} from '@kinvolk/headlamp-plugin/lib/CommonComponents';
+import { NameValueTable, SectionBox } from '@kinvolk/headlamp-plugin/lib/CommonComponents';
 import React from 'react';
 import { formatStorageType, isRookCephPersistentVolume } from '../api/k8s';

 interface PVDetailSectionProps {
  resource: {
    metadata?: { name?: string };
-    spec?: { csi?: { driver?: string; volumeHandle?: string; volumeAttributes?: Record<string, string> }; storageClassName?: string };
+    spec?: {
+      csi?: { driver?: string; volumeHandle?: string; volumeAttributes?: Record<string, string> };
+      storageClassName?: string;
+    };
    jsonData?: unknown;
  };
 }
@@ -34,7 +34,11 @@ export default function PVDetailSection({ resource }: PVDetailSectionProps) {
  }

  const attrs = spec?.csi?.volumeAttributes ?? {};
-  const type = driver.includes('.rbd.') ? 'rbd' : driver.includes('.cephfs.') ? 'cephfs' : 'unknown';
+  const type = driver.includes('.rbd.')
+    ? 'rbd'
+    : driver.includes('.cephfs.')
+    ? 'cephfs'
+    : 'unknown';

  return (
    <SectionBox title="Rook-Ceph Volume Details">
@@ -20,18 +20,18 @@ function PodTable({ pods, title }: { pods: RookCephPod[]; title: string }) {
    <SectionBox title={`${title} (${pods.length})`}>
      <SimpleTable
        columns={[
-          { label: 'Name', getter: (p) => p.metadata.name },
+          { label: 'Name', getter: p => p.metadata.name },
          {
            label: 'Status',
-            getter: (p) => (
+            getter: p => (
              <StatusLabel status={isPodReady(p) ? 'success' : 'error'}>
                {p.status?.phase ?? 'Unknown'}
              </StatusLabel>
            ),
          },
-          { label: 'Node', getter: (p) => p.spec?.nodeName ?? '—' },
-          { label: 'Restarts', getter: (p) => String(getPodRestarts(p)) },
-          { label: 'Age', getter: (p) => formatAge(p.metadata.creationTimestamp) },
+          { label: 'Node', getter: p => p.spec?.nodeName ?? '—' },
+          { label: 'Restarts', getter: p => String(getPodRestarts(p)) },
+          { label: 'Age', getter: p => formatAge(p.metadata.creationTimestamp) },
        ]}
        data={pods}
      />
@@ -45,27 +45,27 @@ function OsdTable({ pods }: { pods: RookCephPod[] }) {
    <SectionBox title={`OSDs (${pods.length})`}>
      <SimpleTable
        columns={[
-          { label: 'OSD ID', getter: (p) => p.metadata.labels?.['osd'] ?? p.metadata.name },
+          { label: 'OSD ID', getter: p => p.metadata.labels?.['osd'] ?? p.metadata.name },
          {
            label: 'Status',
-            getter: (p) => {
-              const st = isPodReady(p) ? 'success' : p.status?.phase === 'Pending' ? 'warning' : 'error';
-              return (
-                <StatusLabel status={st}>
-                  {p.status?.phase ?? 'Unknown'}
-                </StatusLabel>
-              );
+            getter: p => {
+              const st = isPodReady(p)
+                ? 'success'
+                : p.status?.phase === 'Pending'
+                ? 'warning'
+                : 'error';
+              return <StatusLabel status={st}>{p.status?.phase ?? 'Unknown'}</StatusLabel>;
            },
          },
          {
            label: 'Node',
-            getter: (p) => p.spec?.nodeName ?? p.metadata.labels?.['topology-location-host'] ?? '—',
+            getter: p => p.spec?.nodeName ?? p.metadata.labels?.['topology-location-host'] ?? '—',
          },
-          { label: 'Device Class', getter: (p) => p.metadata.labels?.['device-class'] ?? '—' },
-          { label: 'Store', getter: (p) => p.metadata.labels?.['osd-store'] ?? '—' },
-          { label: 'Failure Domain', getter: (p) => p.metadata.labels?.['failure-domain'] ?? '—' },
-          { label: 'Restarts', getter: (p) => String(getPodRestarts(p)) },
-          { label: 'Age', getter: (p) => formatAge(p.metadata.creationTimestamp) },
+          { label: 'Device Class', getter: p => p.metadata.labels?.['device-class'] ?? '—' },
+          { label: 'Store', getter: p => p.metadata.labels?.['osd-store'] ?? '—' },
+          { label: 'Failure Domain', getter: p => p.metadata.labels?.['failure-domain'] ?? '—' },
+          { label: 'Restarts', getter: p => String(getPodRestarts(p)) },
+          { label: 'Age', getter: p => formatAge(p.metadata.creationTimestamp) },
        ]}
        data={pods}
      />
@@ -74,20 +74,19 @@ function OsdTable({ pods }: { pods: RookCephPod[] }) {
 }

 export default function PodsPage() {
-  const {
-    operatorPods,
-    monPods,
-    osdPods,
-    mgrPods,
-    csiRbdPods,
-    csiCephfsPods,
-    loading,
-    error,
-  } = useRookCephContext();
+  const { operatorPods, monPods, osdPods, mgrPods, csiRbdPods, csiCephfsPods, loading, error } =
+    useRookCephContext();

  if (loading) return <Loader title="Loading Rook-Ceph pods..." />;

-  const allPods = [...operatorPods, ...monPods, ...osdPods, ...mgrPods, ...csiRbdPods, ...csiCephfsPods];
+  const allPods = [
+    ...operatorPods,
+    ...monPods,
+    ...osdPods,
+    ...mgrPods,
+    ...csiRbdPods,
+    ...csiCephfsPods,
+  ];
  const totalReady = allPods.filter(isPodReady).length;

  return (
@@ -96,7 +95,9 @@ export default function PodsPage() {

      {error && (
        <SectionBox title="Error">
-          <NameValueTable rows={[{ name: 'Status', value: <StatusLabel status="error">{error}</StatusLabel> }]} />
+          <NameValueTable
+            rows={[{ name: 'Status', value: <StatusLabel status="error">{error}</StatusLabel> }]}
+          />
        </SectionBox>
      )}

@@ -106,7 +107,11 @@ export default function PodsPage() {
            {
              name: 'Overall Health',
              value: (
-                <StatusLabel status={totalReady === allPods.length && allPods.length > 0 ? 'success' : 'warning'}>
+                <StatusLabel
+                  status={
+                    totalReady === allPods.length && allPods.length > 0 ? 'success' : 'warning'
+                  }
+                >
                  {totalReady}/{allPods.length} pods ready
                </StatusLabel>
              ),
@@ -14,13 +14,30 @@ import React, { useState } from 'react';
 import { formatAge, formatStorageType, RookCephStorageClass, storageClassType } from '../api/k8s';
 import { useRookCephContext } from '../api/RookCephDataContext';

-function StorageClassDetail({ sc, pvCount, onClose }: { sc: RookCephStorageClass; pvCount: number; onClose: () => void }) {
+function StorageClassDetail({
+  sc,
+  pvCount,
+  onClose,
+}: {
+  sc: RookCephStorageClass;
+  pvCount: number;
+  onClose: () => void;
+}) {
  const type = storageClassType(sc);
  return (
    <div
+      role="dialog"
+      aria-modal="true"
+      aria-labelledby="drawer-title-storageclass"
+      onKeyDown={e => {
+        if (e.key === 'Escape') onClose();
+      }}
      style={{
        position: 'fixed',
-        top: 0, right: 0, bottom: 0, width: '480px',
+        top: 0,
+        right: 0,
+        bottom: 0,
+        width: '480px',
        backgroundColor: 'var(--mui-palette-background-paper, #fff)',
        boxShadow: '-4px 0 16px rgba(0,0,0,0.15)',
        zIndex: 1300,
@@ -28,8 +45,15 @@ function StorageClassDetail({ sc, pvCount, onClose }: { sc: RookCephStorageClass
        padding: '24px',
      }}
    >
-      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '16px' }}>
-        <strong>{sc.metadata.name}</strong>
+      <div
+        style={{
+          display: 'flex',
+          justifyContent: 'space-between',
+          alignItems: 'center',
+          marginBottom: '16px',
+        }}
+      >
+        <strong id="drawer-title-storageclass">{sc.metadata.name}</strong>
        <button
          onClick={onClose}
          aria-label="Close"
@@ -46,7 +70,10 @@ function StorageClassDetail({ sc, pvCount, onClose }: { sc: RookCephStorageClass
            { name: 'Type', value: formatStorageType(type) },
            { name: 'Reclaim Policy', value: sc.reclaimPolicy ?? '—' },
            { name: 'Volume Binding Mode', value: sc.volumeBindingMode ?? '—' },
-            { name: 'Volume Expansion', value: sc.allowVolumeExpansion ? 'Allowed' : 'Not allowed' },
+            {
+              name: 'Volume Expansion',
+              value: sc.allowVolumeExpansion ? 'Allowed' : 'Not allowed',
+            },
            { name: 'Age', value: formatAge(sc.metadata.creationTimestamp) },
            { name: 'Bound PVs', value: String(pvCount) },
          ]}
@@ -81,14 +108,22 @@ export default function StorageClassesPage() {

      {error && (
        <SectionBox title="Error">
-          <NameValueTable rows={[{ name: 'Status', value: <StatusLabel status="error">{error}</StatusLabel> }]} />
+          <NameValueTable
+            rows={[{ name: 'Status', value: <StatusLabel status="error">{error}</StatusLabel> }]}
+          />
        </SectionBox>
      )}

      {storageClasses.length === 0 ? (
        <SectionBox title="No Storage Classes">
          <NameValueTable
-            rows={[{ name: 'Status', value: 'No Rook-Ceph StorageClasses found. Ensure CephBlockPool and CephFilesystem resources exist.' }]}
+            rows={[
+              {
+                name: 'Status',
+                value:
+                  'No Rook-Ceph StorageClasses found. Ensure CephBlockPool and CephFilesystem resources exist.',
+              },
+            ]}
          />
        </SectionBox>
      ) : (
@@ -100,7 +135,15 @@ export default function StorageClassesPage() {
                getter: (sc: RookCephStorageClass) => (
                  <button
                    onClick={() => setSelected(sc)}
-                    style={{ border: 'none', background: 'transparent', color: 'var(--link-color, #1976d2)', cursor: 'pointer', textDecoration: 'underline', padding: 0, font: 'inherit' }}
+                    style={{
+                      border: 'none',
+                      background: 'transparent',
+                      color: 'var(--link-color, #1976d2)',
+                      cursor: 'pointer',
+                      textDecoration: 'underline',
+                      padding: 0,
+                      font: 'inherit',
+                    }}
                  >
                    {sc.metadata.name}
                  </button>
@@ -115,11 +158,24 @@ export default function StorageClassesPage() {
                ),
              },
              { label: 'Provisioner', getter: (sc: RookCephStorageClass) => sc.provisioner },
-              { label: 'Pool', getter: (sc: RookCephStorageClass) => sc.parameters?.['pool'] ?? '—' },
+              {
+                label: 'Pool',
+                getter: (sc: RookCephStorageClass) => sc.parameters?.['pool'] ?? '—',
+              },
              { label: 'Reclaim', getter: (sc: RookCephStorageClass) => sc.reclaimPolicy ?? '—' },
-              { label: 'Expansion', getter: (sc: RookCephStorageClass) => sc.allowVolumeExpansion ? 'Yes' : 'No' },
-              { label: 'PVs', getter: (sc: RookCephStorageClass) => String(pvCountByClass.get(sc.metadata.name) ?? 0) },
-              { label: 'Age', getter: (sc: RookCephStorageClass) => formatAge(sc.metadata.creationTimestamp) },
+              {
+                label: 'Expansion',
+                getter: (sc: RookCephStorageClass) => (sc.allowVolumeExpansion ? 'Yes' : 'No'),
+              },
+              {
+                label: 'PVs',
+                getter: (sc: RookCephStorageClass) =>
+                  String(pvCountByClass.get(sc.metadata.name) ?? 0),
+              },
+              {
+                label: 'Age',
+                getter: (sc: RookCephStorageClass) => formatAge(sc.metadata.creationTimestamp),
+              },
            ]}
            data={storageClasses}
          />
@@ -129,7 +185,12 @@ export default function StorageClassesPage() {
      {selected && (
        <>
          <div
-            style={{ position: 'fixed', inset: 0, backgroundColor: 'rgba(0,0,0,0.3)', zIndex: 1299 }}
+            style={{
+              position: 'fixed',
+              inset: 0,
+              backgroundColor: 'rgba(0,0,0,0.3)',
+              zIndex: 1299,
+            }}
            onClick={() => setSelected(null)}
          />
          <StorageClassDetail
@@ -18,9 +18,18 @@ function PVDetail({ pv, onClose }: { pv: RookCephPersistentVolume; onClose: () =
  const attrs = pv.spec.csi?.volumeAttributes ?? {};
  return (
    <div
+      role="dialog"
+      aria-modal="true"
+      aria-labelledby="drawer-title-pv"
+      onKeyDown={e => {
+        if (e.key === 'Escape') onClose();
+      }}
      style={{
        position: 'fixed',
-        top: 0, right: 0, bottom: 0, width: '520px',
+        top: 0,
+        right: 0,
+        bottom: 0,
+        width: '520px',
        backgroundColor: 'var(--mui-palette-background-paper, #fff)',
        boxShadow: '-4px 0 16px rgba(0,0,0,0.15)',
        zIndex: 1300,
@@ -28,8 +37,15 @@ function PVDetail({ pv, onClose }: { pv: RookCephPersistentVolume; onClose: () =
        padding: '24px',
      }}
    >
-      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '16px' }}>
-        <strong>{pv.metadata.name}</strong>
+      <div
+        style={{
+          display: 'flex',
+          justifyContent: 'space-between',
+          alignItems: 'center',
+          marginBottom: '16px',
+        }}
+      >
+        <strong id="drawer-title-pv">{pv.metadata.name}</strong>
        <button
          onClick={onClose}
          aria-label="Close"
@@ -89,7 +105,9 @@ export default function VolumesPage() {

      {error && (
        <SectionBox title="Error">
-          <NameValueTable rows={[{ name: 'Status', value: <StatusLabel status="error">{error}</StatusLabel> }]} />
+          <NameValueTable
+            rows={[{ name: 'Status', value: <StatusLabel status="error">{error}</StatusLabel> }]}
+          />
        </SectionBox>
      )}

@@ -108,14 +126,28 @@ export default function VolumesPage() {
                getter: (pv: RookCephPersistentVolume) => (
                  <button
                    onClick={() => setSelected(pv)}
-                    style={{ border: 'none', background: 'transparent', color: 'var(--link-color, #1976d2)', cursor: 'pointer', textDecoration: 'underline', padding: 0, font: 'inherit' }}
+                    style={{
+                      border: 'none',
+                      background: 'transparent',
+                      color: 'var(--link-color, #1976d2)',
+                      cursor: 'pointer',
+                      textDecoration: 'underline',
+                      padding: 0,
+                      font: 'inherit',
+                    }}
                  >
                    {pv.metadata.name}
                  </button>
                ),
              },
-              { label: 'Capacity', getter: (pv: RookCephPersistentVolume) => pv.spec.capacity?.storage ?? '—' },
-              { label: 'Access Modes', getter: (pv: RookCephPersistentVolume) => formatAccessModes(pv.spec.accessModes) },
+              {
+                label: 'Capacity',
+                getter: (pv: RookCephPersistentVolume) => pv.spec.capacity?.storage ?? '—',
+              },
+              {
+                label: 'Access Modes',
+                getter: (pv: RookCephPersistentVolume) => formatAccessModes(pv.spec.accessModes),
+              },
              {
                label: 'Phase',
                getter: (pv: RookCephPersistentVolume) => (
@@ -124,10 +156,25 @@ export default function VolumesPage() {
                  </StatusLabel>
                ),
              },
-              { label: 'Reclaim', getter: (pv: RookCephPersistentVolume) => pv.spec.persistentVolumeReclaimPolicy ?? '—' },
-              { label: 'Pool', getter: (pv: RookCephPersistentVolume) => pv.spec.csi?.volumeAttributes?.['pool'] ?? '—' },
-              { label: 'Claim', getter: (pv: RookCephPersistentVolume) => pv.spec.claimRef ? `${pv.spec.claimRef.namespace}/${pv.spec.claimRef.name}` : '—' },
-              { label: 'Age', getter: (pv: RookCephPersistentVolume) => formatAge(pv.metadata.creationTimestamp) },
+              {
+                label: 'Reclaim',
+                getter: (pv: RookCephPersistentVolume) =>
+                  pv.spec.persistentVolumeReclaimPolicy ?? '—',
+              },
+              {
+                label: 'Pool',
+                getter: (pv: RookCephPersistentVolume) =>
+                  pv.spec.csi?.volumeAttributes?.['pool'] ?? '—',
+              },
+              {
+                label: 'Claim',
+                getter: (pv: RookCephPersistentVolume) =>
+                  pv.spec.claimRef ? `${pv.spec.claimRef.namespace}/${pv.spec.claimRef.name}` : '—',
+              },
+              {
+                label: 'Age',
+                getter: (pv: RookCephPersistentVolume) => formatAge(pv.metadata.creationTimestamp),
+              },
            ]}
            data={persistentVolumes}
          />
@@ -137,7 +184,12 @@ export default function VolumesPage() {
      {selected && (
        <>
          <div
-            style={{ position: 'fixed', inset: 0, backgroundColor: 'rgba(0,0,0,0.3)', zIndex: 1299 }}
+            style={{
+              position: 'fixed',
+              inset: 0,
+              backgroundColor: 'rgba(0,0,0,0.3)',
+              zIndex: 1299,
+            }}
            onClick={() => setSelected(null)}
          />
          <PVDetail pv={selected} onClose={() => setSelected(null)} />
@@ -64,7 +64,7 @@ export function buildStorageClassColumns() {
    },
    {
      label: 'Pool',
-      getValue: (item: unknown) => getField(item, 'parameters', 'pool') as string | null ?? null,
+      getValue: (item: unknown) => (getField(item, 'parameters', 'pool') as string | null) ?? null,
      render: (item: unknown) => {
        if (!isRookRow(item)) return <span>—</span>;
        const pool = getField(item, 'parameters', 'pool') as string | undefined;
@@ -73,12 +73,17 @@ export function buildStorageClassColumns() {
    },
    {
      label: 'Cluster',
-      getValue: (item: unknown) => getField(item, 'parameters', 'clusterID') as string | null ?? null,
+      getValue: (item: unknown) =>
+        (getField(item, 'parameters', 'clusterID') as string | null) ?? null,
      render: (item: unknown) => {
        if (!isRookRow(item)) return <span>—</span>;
        const clusterID = getField(item, 'parameters', 'clusterID') as string | undefined;
        if (!clusterID) return <span>—</span>;
-        return <span title={clusterID}>{clusterID.length > 16 ? `${clusterID.slice(0, 16)}…` : clusterID}</span>;
+        return (
+          <span title={clusterID}>
+            {clusterID.length > 16 ? `${clusterID.slice(0, 16)}…` : clusterID}
+          </span>
+        );
      },
    },
  ];
@@ -101,10 +106,13 @@ export function buildPVColumns() {
    },
    {
      label: 'Pool',
-      getValue: (item: unknown) => getField(item, 'spec', 'csi', 'volumeAttributes', 'pool') as string | null ?? null,
+      getValue: (item: unknown) =>
+        (getField(item, 'spec', 'csi', 'volumeAttributes', 'pool') as string | null) ?? null,
      render: (item: unknown) => {
        if (!isRookPvRow(item)) return <span>—</span>;
-        const pool = getField(item, 'spec', 'csi', 'volumeAttributes', 'pool') as string | undefined;
+        const pool = getField(item, 'spec', 'csi', 'volumeAttributes', 'pool') as
+          | string
+          | undefined;
        return <span>{pool ?? '—'}</span>;
      },
    },
@@ -6,6 +6,7 @@
 */

 import {
+  registerAppBarAction,
  registerDetailsViewSection,
  registerResourceTableColumnsProcessor,
  registerRoute,
@@ -13,10 +14,14 @@ import {
 } from '@kinvolk/headlamp-plugin/lib';
 import React from 'react';
 import { RookCephDataProvider } from './api/RookCephDataContext';
+import AppBarClusterBadge from './components/AppBarClusterBadge';
 import BlockPoolsPage from './components/BlockPoolsPage';
 import CephPodDetailSection from './components/CephPodDetailSection';
 import FilesystemsPage from './components/FilesystemsPage';
-import { buildPVColumns, buildStorageClassColumns } from './components/integrations/StorageClassColumns';
+import {
+  buildPVColumns,
+  buildStorageClassColumns,
+} from './components/integrations/StorageClassColumns';
 import ObjectStoresPage from './components/ObjectStoresPage';
 import OverviewPage from './components/OverviewPage';
 import PodsPage from './components/PodsPage';
@@ -32,7 +37,7 @@ import VolumesPage from './components/VolumesPage';
 registerSidebarEntry({
  parent: null,
  name: 'rook-ceph',
-  label: 'Rook-Ceph',
+  label: 'Rook',
  url: '/rook-ceph',
  icon: 'mdi:database-cog',
 });
@@ -69,6 +74,22 @@ registerSidebarEntry({
  icon: 'mdi:bucket',
 });

+registerSidebarEntry({
+  parent: 'rook-ceph',
+  name: 'rook-ceph-storage-classes',
+  label: 'Storage Classes',
+  url: '/rook-ceph/storage-classes',
+  icon: 'mdi:database-settings',
+});
+
+registerSidebarEntry({
+  parent: 'rook-ceph',
+  name: 'rook-ceph-volumes',
+  label: 'Volumes',
+  url: '/rook-ceph/volumes',
+  icon: 'mdi:harddisk',
+});
+
 registerSidebarEntry({
  parent: 'rook-ceph',
  name: 'rook-ceph-pods',
@@ -77,6 +98,16 @@ registerSidebarEntry({
  icon: 'mdi:cube-outline',
 });

+// ---------------------------------------------------------------------------
+// App bar action — cluster health badge
+// ---------------------------------------------------------------------------
+
+registerAppBarAction(() => (
+  <RookCephDataProvider>
+    <AppBarClusterBadge />
+  </RookCephDataProvider>
+));
+
 // ---------------------------------------------------------------------------
 // Routes
 // ---------------------------------------------------------------------------
@@ -129,10 +160,9 @@ registerRoute({
  ),
 });

-// Storage Classes and Volumes pages accessible via direct URL
 registerRoute({
  path: '/rook-ceph/storage-classes',
-  sidebar: 'rook-ceph-overview',
+  sidebar: 'rook-ceph-storage-classes',
  name: 'rook-ceph-storage-classes',
  exact: true,
  component: () => (
@@ -144,7 +174,7 @@ registerRoute({

 registerRoute({
  path: '/rook-ceph/volumes',
-  sidebar: 'rook-ceph-overview',
+  sidebar: 'rook-ceph-volumes',
  name: 'rook-ceph-volumes',
  exact: true,
  component: () => (
@@ -202,13 +232,47 @@ registerDetailsViewSection(({ resource }) => {
 // Table column processors — native StorageClass and PV tables
 // ---------------------------------------------------------------------------

+// Merges incoming columns into existing ones by label.
+// If a column with the same label already exists, the incoming getValue/render
+// takes priority and falls back to the existing one (for mixed-driver tables).
+function mergeColumns<T>(
+  existing: T[],
+  incoming: Array<{
+    label: string;
+    getValue: (r: unknown) => unknown;
+    render: (r: unknown) => React.ReactNode;
+  }>
+): T[] {
+  type ObjCol = {
+    label: string;
+    getValue: (r: unknown) => unknown;
+    render: (r: unknown) => React.ReactNode;
+  };
+  const isObjCol = (c: unknown): c is ObjCol => typeof c === 'object' && c !== null && 'label' in c;
+  const result = [...existing];
+  const toAppend: typeof incoming = [];
+  for (const col of incoming) {
+    const idx = result.findIndex(c => isObjCol(c) && (c as ObjCol).label === col.label);
+    if (idx !== -1) {
+      const prev = result[idx] as ObjCol;
+      result[idx] = {
+        label: col.label,
+        getValue: (r: unknown) => col.getValue(r) ?? prev.getValue(r),
+        render: (r: unknown) => (col.getValue(r) !== null ? col.render(r) : prev.render(r)),
+      } as unknown as T;
+    } else {
+      toAppend.push(col);
+    }
+  }
+  return [...result, ...(toAppend as unknown as T[])];
+}
+
 registerResourceTableColumnsProcessor(({ id, columns }) => {
  if (id === 'headlamp-storageclasses') {
-    return [...columns, ...buildStorageClassColumns()];
+    return mergeColumns(columns, buildStorageClassColumns());
  }
  if (id === 'headlamp-persistentvolumes') {
-    return [...columns, ...buildPVColumns()];
+    return mergeColumns(columns, buildPVColumns());
  }
  return columns;
 });
-
@@ -1,7 +1,7 @@
 {
  "extends": "@kinvolk/headlamp-plugin/config/plugins-tsconfig.json",
  "compilerOptions": {
-    "types": ["vite/client", "vite-plugin-svgr/client", "vitest/globals", "@testing-library/jest-dom"]
+    "types": ["vitest/globals", "@testing-library/jest-dom"]
  },
  "include": ["src"]
 }
@@ -1,6 +1,9 @@
 import { defineConfig } from 'vitest/config';

 export default defineConfig({
+  define: {
+    'process.env.NODE_ENV': '"test"',
+  },
  test: {
    globals: true,
    environment: 'jsdom',
				`@@ -0,0 +1 @@`
				`module.exports = require('@headlamp-k8s/eslint-config/prettier-config');`
				`@@ -0,0 +1 @@`
				`repositoryID: 4a7ada40-a800-4d7a-8a72-6ba5c3b39f13`