chore: release v0.2.1

Generated with [Claude Code](https://claude.ai/code) via [Happy](https://happy.engineering) Co-Authored-By: Claude <noreply@anthropic.com> Co-Authored-By: Happy <yesreply@happy.engineering>
2026-02-19 13:31:07 -05:00
32 changed files with 281 additions and 1328 deletions
@@ -1,81 +0,0 @@
 ---
 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
@@ -1,286 +0,0 @@
 ---
 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.
@@ -1,286 +0,0 @@
 ---
 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.
@@ -1,8 +0,0 @@
 {
  "enabledMcpjsonServers": [
    "github",
    "kubernetes",
    "flux",
    "playwright"
  ]
 }
@@ -5,11 +5,10 @@ on:
    branches: [main]
  pull_request:
    branches: [main]
  workflow_call:
 jobs:
-  ci:
+  lint-and-test:
-    runs-on: local-ubuntu-latest
+    runs-on: ubuntu-latest
    timeout-minutes: 10
    steps:
@@ -19,7 +18,7 @@ jobs:
      - name: Setup Node.js
        uses: actions/setup-node@v4
        with:
-          node-version: '22'
+          node-version: '20'
          cache: 'npm'
      - name: Install dependencies
@@ -29,13 +28,10 @@ jobs:
        run: npx @kinvolk/headlamp-plugin build
      - name: Lint
-        run: npm run lint
+        run: npx eslint --ext .ts,.tsx src/
      - name: Type-check
-        run: npm run tsc
+        run: npx tsc --noEmit
-      - name: Format check
+      - name: Run unit tests
        run: npm run format:check
      - name: Run tests
        run: npm test
@@ -4,59 +4,50 @@ on:
  workflow_dispatch:
    inputs:
      version:
-        description: 'Release version (e.g. 1.0.0)'
+        description: 'Version to release (without v prefix, e.g., 0.2.0)'
        required: true
        type: string
 permissions:
  contents: write
 concurrency:
  group: release
  cancel-in-progress: false
 jobs:
  ci:
    uses: ./.github/workflows/ci.yaml
  release:
-    needs: ci
+    runs-on: ubuntu-latest
-    runs-on: local-ubuntu-latest
+    permissions:
-    timeout-minutes: 10
+      contents: write
    steps:
      - name: Validate version format
        run: |
-          if [[ ! "${{ inputs.version }}" =~ ^[0-9]+\.[0-9]+\.[0-9]+$ ]]; then
+          if ! echo "${{ inputs.version }}" | grep -qE '^[0-9]+\.[0-9]+\.[0-9]+$'; then
-            echo "Error: Version must be in X.Y.Z format"
+            echo "::error::Version must be in format X.Y.Z (e.g., 0.2.0)"
            exit 1
          fi
      - name: Checkout
        uses: actions/checkout@v4
-      - name: Setup Node.js
+      - name: Configure git
        uses: actions/setup-node@v4
        with:
          node-version: '22'
          cache: 'npm'
      - name: Configure Git
        run: |
          git config user.name "github-actions[bot]"
          git config user.email "github-actions[bot]@users.noreply.github.com"
-      - name: Update version in package.json
+      - name: Update package.json version
-        run: npm version ${{ inputs.version }} --no-git-tag-version --allow-same-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
+      - name: Update artifacthub-pkg.yml version and URL
        run: |
          VERSION="${{ inputs.version }}"
-          PKG_NAME=$(jq -r .name package.json)
+          RELEASE_URL="https://github.com/${{ github.repository }}/releases/download/v${VERSION}/headlamp-rook-plugin-${VERSION}.tar.gz"
-          RELEASE_URL="https://github.com/${{ github.repository }}/releases/download/v${VERSION}/${PKG_NAME}-${VERSION}.tar.gz"
+
-          sed -i "s/^version:.*/version: \"${VERSION}\"/" artifacthub-pkg.yml
+          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
@@ -66,46 +57,55 @@ jobs:
      - name: Package plugin
        run: npx @kinvolk/headlamp-plugin package
-      - name: Prepare release tarball
+      - name: Validate tarball name
        run: |
-          VERSION="${{ inputs.version }}"
+          EXPECTED="headlamp-rook-plugin-${{ inputs.version }}.tar.gz"
-          PKG_NAME=$(jq -r .name package.json)
+          ACTUAL=$(ls *.tar.gz)
-          TARBALL="${PKG_NAME}-${VERSION}.tar.gz"
+          if [ "$EXPECTED" != "$ACTUAL" ]; then
-          if [ ! -f "$TARBALL" ]; then
+            echo "::error::Tarball name mismatch! Expected: $EXPECTED, Got: $ACTUAL"
            echo "Error: Expected tarball $TARBALL not found"
            ls -la *.tar.gz 2>/dev/null || echo "No .tar.gz files found"
            exit 1
          fi
-          echo "TARBALL=$TARBALL" >> $GITHUB_ENV
+          echo "✓ Tarball name validated: $ACTUAL"
          echo "PKG_NAME=$PKG_NAME" >> $GITHUB_ENV
      - name: Validate tarball
        run: |
          echo "Tarball: ${{ env.TARBALL }}"
          ls -lh "${{ env.TARBALL }}"
          tar -tzf "${{ env.TARBALL }}" | head -20
          tar -tzf "${{ env.TARBALL }}" | grep -q "main.js" || { echo "Error: main.js not found in tarball"; exit 1; }
      - name: Compute checksum
        id: compute_checksum
        run: |
-          CHECKSUM=$(sha256sum "${{ env.TARBALL }}" | awk '{print $1}')
+          TARBALL="headlamp-rook-plugin-${{ inputs.version }}.tar.gz"
-          echo "CHECKSUM=$CHECKSUM" >> $GITHUB_ENV
+          CHECKSUM=$(sha256sum "$TARBALL" | awk '{print $1}')
-          sed -i "s|headlamp/plugin/archive-checksum:.*|headlamp/plugin/archive-checksum: sha256:${CHECKSUM}|" artifacthub-pkg.yml
+          echo "checksum=${CHECKSUM}" >> $GITHUB_OUTPUT
          echo "Checksum: sha256:${CHECKSUM}"
-      - name: Commit and tag
+      - name: Update checksum in metadata
        run: |
-          VERSION="${{ inputs.version }}"
+          CHECKSUM="${{ steps.compute_checksum.outputs.checksum }}"
-          git add package.json package-lock.json artifacthub-pkg.yml
+          sed -i "s|headlamp/plugin/archive-checksum:.*|headlamp/plugin/archive-checksum: \"sha256:${CHECKSUM}\"|" artifacthub-pkg.yml
-          git commit -m "release: v${VERSION}"
+
-          git tag "v${VERSION}"
+      - name: Commit version bump and metadata
-          git push origin main --tags
+        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: ${{ env.TARBALL }}
+          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"
@@ -1,8 +1,5 @@
 node_modules/
 dist/
 .headlamp-plugin/
 *.tar.gz
 .env
 .env.local
 .eslintcache
 .playwright-mcp/
 .mcp.json
@@ -1,23 +0,0 @@
 {
  "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"
    }
  }
 }
@@ -1 +0,0 @@
 module.exports = require('@headlamp-k8s/eslint-config/prettier-config');
@@ -7,12 +7,6 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ## [Unreleased]
 ## [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
@@ -72,8 +66,7 @@ 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.2...HEAD
+[Unreleased]: https://github.com/cpfarhood/headlamp-rook-plugin/compare/v0.2.1...HEAD
 [0.2.2]: https://github.com/cpfarhood/headlamp-rook-plugin/compare/v0.2.1...v0.2.2
 [0.2.1]: https://github.com/cpfarhood/headlamp-rook-plugin/compare/v0.2.0...v0.2.1
 [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
@@ -43,8 +43,6 @@ src/
    ├── StorageClassesPage.tsx
    ├── VolumesPage.tsx
    ├── PodsPage.tsx
    ├── FilesystemsPage.tsx
    ├── ObjectStoresPage.tsx
    ├── ClusterStatusCard.tsx
    ├── AppBarClusterBadge.tsx
    ├── PVCDetailSection.tsx            # Injected into Headlamp PVC detail view
@@ -1,6 +1,5 @@
 # Headlamp Rook Plugin
 [![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/cpfarhood/headlamp-rook-plugin/actions/workflows/ci.yaml/badge.svg)](https://github.com/cpfarhood/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)
@@ -48,11 +47,7 @@ Rook-Ceph must be deployed in the `rook-ceph` namespace with standard labels. Th
 ## Installing
-### Option 1: Headlamp Plugin Manager (Recommended)
+### Option 1: Manual Plugin Install
 Browse the Headlamp Plugin Manager (Settings → Plugins → Catalog) and install **headlamp-rook-plugin** directly.
 ### Option 2: Manual Plugin Install
 Download the latest release tarball and place it in your Headlamp plugins directory:
@@ -65,6 +60,10 @@ curl -L https://github.com/cpfarhood/headlamp-rook-plugin/releases/latest/downlo
 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.
 ## RBAC & Security Setup
 The plugin reads Rook-Ceph CRDs and Kubernetes resources. Your Headlamp service account needs:
@@ -108,16 +107,6 @@ subjects:
    namespace: headlamp
 ```
 ## 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
@@ -1,4 +1,4 @@
-version: "0.2.5"
+version: "0.2.1"
 name: headlamp-rook-plugin
 displayName: Rook Plugin
 createdAt: "2026-02-18T00:00:00Z"
@@ -23,11 +23,13 @@ maintainers:
 provider:
  name: privilegedescalation
 changes:
  - kind: fixed
    description: "Duplicate Protocol/Pool columns on mixed-driver clusters now merged into a single shared column"
  - kind: changed
-    description: "Package renamed to rook so the plugin displays correctly in Headlamp's Plugins list"
+    description: "Sidebar navigation label renamed from Rook-Ceph to Rook"
 annotations:
-  headlamp/plugin/archive-url: "https://github.com/privilegedescalation/headlamp-rook-plugin/releases/download/v0.2.5/rook-0.2.5.tar.gz"
+  headlamp/plugin/archive-url: "https://github.com/privilegedescalation/headlamp-rook-plugin/releases/download/v0.2.1/headlamp-rook-plugin-0.2.1.tar.gz"
-  headlamp/plugin/archive-checksum: sha256:38ee58f83da386bc35a4d09c39883c2a2a29e89c4d239922dfa67dfcc10d9421
+  headlamp/plugin/archive-checksum: "sha256:6cfe751bc06cf77cf1b96013fdb83d4e1db9ac3793e9aca82316546debd3e846"
  headlamp/plugin/distro-compat: ""
  headlamp/plugin/version-compat: ">=0.20"
@@ -1,12 +1,12 @@
 {
-  "name": "rook",
+  "name": "headlamp-rook-plugin",
-  "version": "0.2.5",
+  "version": "0.1.0",
  "lockfileVersion": 3,
  "requires": true,
  "packages": {
    "": {
-      "name": "rook",
+      "name": "headlamp-rook-plugin",
-      "version": "0.2.5",
+      "version": "0.1.0",
      "license": "Apache-2.0",
      "devDependencies": {
        "@kinvolk/headlamp-plugin": "^0.13.0"
@@ -1,6 +1,6 @@
 {
-  "name": "rook",
+  "name": "headlamp-rook-plugin",
-  "version": "0.2.5",
+  "version": "0.2.1",
  "description": "Headlamp plugin for Rook-Ceph cluster visibility and CSI driver monitoring",
  "repository": {
    "type": "git",
@@ -1,4 +0,0 @@
 {
  "$schema": "https://docs.renovatebot.com/renovate-schema.json",
  "extends": ["config:recommended"]
 }
@@ -166,9 +166,7 @@ export function RookCephDataProvider({ children }: { children: React.ReactNode }
        // Operator pods
        try {
          const opList = await ApiProxy.request(
-            `/api/v1/namespaces/${ROOK_CEPH_NAMESPACE}/pods?labelSelector=${encodeURIComponent(
+            `/api/v1/namespaces/${ROOK_CEPH_NAMESPACE}/pods?labelSelector=${encodeURIComponent(ROOK_OPERATOR_SELECTOR)}`
              ROOK_OPERATOR_SELECTOR
            )}`
          );
          if (!cancelled && isKubeList(opList)) setOperatorPods(opList.items as RookCephPod[]);
        } catch {
@@ -178,9 +176,7 @@ export function RookCephDataProvider({ children }: { children: React.ReactNode }
        // MON pods
        try {
          const monList = await ApiProxy.request(
-            `/api/v1/namespaces/${ROOK_CEPH_NAMESPACE}/pods?labelSelector=${encodeURIComponent(
+            `/api/v1/namespaces/${ROOK_CEPH_NAMESPACE}/pods?labelSelector=${encodeURIComponent(ROOK_MON_SELECTOR)}`
              ROOK_MON_SELECTOR
            )}`
          );
          if (!cancelled && isKubeList(monList)) setMonPods(monList.items as RookCephPod[]);
        } catch {
@@ -190,9 +186,7 @@ export function RookCephDataProvider({ children }: { children: React.ReactNode }
        // OSD pods
        try {
          const osdList = await ApiProxy.request(
-            `/api/v1/namespaces/${ROOK_CEPH_NAMESPACE}/pods?labelSelector=${encodeURIComponent(
+            `/api/v1/namespaces/${ROOK_CEPH_NAMESPACE}/pods?labelSelector=${encodeURIComponent(ROOK_OSD_SELECTOR)}`
              ROOK_OSD_SELECTOR
            )}`
          );
          if (!cancelled && isKubeList(osdList)) setOsdPods(osdList.items as RookCephPod[]);
        } catch {
@@ -202,9 +196,7 @@ export function RookCephDataProvider({ children }: { children: React.ReactNode }
        // MGR pods
        try {
          const mgrList = await ApiProxy.request(
-            `/api/v1/namespaces/${ROOK_CEPH_NAMESPACE}/pods?labelSelector=${encodeURIComponent(
+            `/api/v1/namespaces/${ROOK_CEPH_NAMESPACE}/pods?labelSelector=${encodeURIComponent(ROOK_MGR_SELECTOR)}`
              ROOK_MGR_SELECTOR
            )}`
          );
          if (!cancelled && isKubeList(mgrList)) setMgrPods(mgrList.items as RookCephPod[]);
        } catch {
@@ -214,12 +206,9 @@ 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(
+            `/api/v1/namespaces/${ROOK_CEPH_NAMESPACE}/pods?labelSelector=${encodeURIComponent(ROOK_CSI_RBD_SELECTOR)}`
              ROOK_CSI_RBD_SELECTOR
            )}`
          );
-          if (!cancelled && isKubeList(csiRbdList))
+          if (!cancelled && isKubeList(csiRbdList)) setCsiRbdPods(csiRbdList.items as RookCephPod[]);
            setCsiRbdPods(csiRbdList.items as RookCephPod[]);
        } catch {
          if (!cancelled) setCsiRbdPods([]);
        }
@@ -227,12 +216,9 @@ 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(
+            `/api/v1/namespaces/${ROOK_CEPH_NAMESPACE}/pods?labelSelector=${encodeURIComponent(ROOK_CSI_CEPHFS_SELECTOR)}`
              ROOK_CSI_CEPHFS_SELECTOR
            )}`
          );
-          if (!cancelled && isKubeList(csiCephfsList))
+          if (!cancelled && isKubeList(csiCephfsList)) setCsiCephfsPods(csiCephfsList.items as RookCephPod[]);
            setCsiCephfsPods(csiCephfsList.items as RookCephPod[]);
        } catch {
          if (!cancelled) setCsiCephfsPods([]);
        }
@@ -246,9 +232,7 @@ export function RookCephDataProvider({ children }: { children: React.ReactNode }
    }
    void fetchAsync();
-    return () => {
+    return () => { cancelled = true; };
      cancelled = true;
    };
  }, [refreshKey]);
  // ---------------------------------------------------------------------------
@@ -129,12 +129,9 @@ export interface CephCluster extends KubeObject {
 export function healthToStatus(health: string | undefined): 'success' | 'warning' | 'error' {
  switch (health) {
-    case 'HEALTH_OK':
+    case 'HEALTH_OK': return 'success';
-      return 'success';
+    case 'HEALTH_WARN': return 'warning';
-    case 'HEALTH_WARN':
+    default: return 'error';
      return 'warning';
    default:
      return 'error';
  }
 }
@@ -334,7 +331,9 @@ 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
  );
 }
 // ---------------------------------------------------------------------------
@@ -369,11 +368,15 @@ 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 {
@@ -438,16 +441,11 @@ export function parseStorageToBytes(storage: string): number {
  const suffix = match[2] ?? '';
  const multipliers: Record<string, number> = {
    '': 1,
-    K: 1e3,
+    K: 1e3, Ki: 1024,
-    Ki: 1024,
+    M: 1e6, Mi: 1024 ** 2,
-    M: 1e6,
+    G: 1e9, Gi: 1024 ** 3,
-    Mi: 1024 ** 2,
+    T: 1e12, Ti: 1024 ** 4,
-    G: 1e9,
+    P: 1e15, Pi: 1024 ** 5,
    Gi: 1024 ** 3,
    T: 1e12,
    Ti: 1024 ** 4,
    P: 1e15,
    Pi: 1024 ** 5,
  };
  return value * (multipliers[suffix] ?? 1);
 }
@@ -455,12 +453,9 @@ 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':
+    case 'rbd': return 'Block (RBD)';
-      return 'Block (RBD)';
+    case 'cephfs': return 'Filesystem (CephFS)';
-    case 'cephfs':
+    default: return 'Unknown';
      return 'Filesystem (CephFS)';
    default:
      return 'Unknown';
  }
 }
@@ -14,14 +14,10 @@ import { useRookCephContext } from '../api/RookCephDataContext';
 function getHealthColor(health: string | undefined): string {
  switch (health) {
-    case 'HEALTH_OK':
+    case 'HEALTH_OK': return '#4caf50';
-      return '#4caf50';
+    case 'HEALTH_WARN': return '#ff9800';
-    case 'HEALTH_WARN':
+    case 'HEALTH_ERR': return '#f44336';
-      return '#ff9800';
+    default: return '#9e9e9e';
    case 'HEALTH_ERR':
      return '#f44336';
    default:
      return '#9e9e9e';
  }
 }
@@ -19,10 +19,7 @@ function BlockPoolDetail({ pool, onClose }: { pool: CephBlockPool; onClose: () =
    <div
      style={{
        position: 'fixed',
-        top: 0,
+        top: 0, right: 0, bottom: 0, width: '480px',
        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,
@@ -30,14 +27,7 @@ function BlockPoolDetail({ pool, onClose }: { pool: CephBlockPool; onClose: () =
        padding: '24px',
      }}
    >
-      <div
+      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '16px' }}>
        style={{
          display: 'flex',
          justifyContent: 'space-between',
          alignItems: 'center',
          marginBottom: '16px',
        }}
      >
        <strong>{pool.metadata.name}</strong>
        <button
          onClick={onClose}
@@ -109,18 +99,14 @@ export default function BlockPoolsPage() {
      {error && (
        <SectionBox title="Error">
-          <NameValueTable
+          <NameValueTable rows={[{ name: 'Status', value: <StatusLabel status="error">{error}</StatusLabel> }]} />
            rows={[{ name: 'Status', value: <StatusLabel status="error">{error}</StatusLabel> }]}
          />
        </SectionBox>
      )}
      {blockPools.length === 0 ? (
        <SectionBox title="No Block Pools">
          <NameValueTable
-            rows={[
+            rows={[{ name: 'Status', value: 'No CephBlockPool resources found in rook-ceph namespace.' }]}
              { name: 'Status', value: 'No CephBlockPool resources found in rook-ceph namespace.' },
            ]}
          />
        </SectionBox>
      ) : (
@@ -132,15 +118,7 @@ export default function BlockPoolsPage() {
                getter: (p: CephBlockPool) => (
                  <button
                    onClick={() => setSelected(p)}
-                    style={{
+                    style={{ border: 'none', background: 'transparent', color: 'var(--link-color, #1976d2)', cursor: 'pointer', textDecoration: 'underline', padding: 0, font: 'inherit' }}
                      border: 'none',
                      background: 'transparent',
                      color: 'var(--link-color, #1976d2)',
                      cursor: 'pointer',
                      textDecoration: 'underline',
                      padding: 0,
                      font: 'inherit',
                    }}
                  >
                    {p.metadata.name}
                  </button>
@@ -154,22 +132,10 @@ export default function BlockPoolsPage() {
                  </StatusLabel>
                ),
              },
-              {
+              { label: 'Replicas', getter: (p: CephBlockPool) => String(p.spec?.replicated?.size ?? '—') },
-                label: 'Replicas',
+              { label: 'Failure Domain', getter: (p: CephBlockPool) => p.spec?.failureDomain ?? '—' },
-                getter: (p: CephBlockPool) => String(p.spec?.replicated?.size ?? '—'),
+              { label: 'Mirroring', getter: (p: CephBlockPool) => p.spec?.mirroring?.enabled ? 'Enabled' : 'Disabled' },
-              },
+              { label: 'Age', getter: (p: CephBlockPool) => formatAge(p.metadata.creationTimestamp) },
              {
                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}
          />
@@ -179,12 +145,7 @@ export default function BlockPoolsPage() {
      {selected && (
        <>
          <div
-            style={{
+            style={{ position: 'fixed', inset: 0, backgroundColor: 'rgba(0,0,0,0.3)', zIndex: 1299 }}
              position: 'fixed',
              inset: 0,
              backgroundColor: 'rgba(0,0,0,0.3)',
              zIndex: 1299,
            }}
            onClick={() => setSelected(null)}
          />
          <BlockPoolDetail pool={selected} onClose={() => setSelected(null)} />
@@ -80,17 +80,16 @@ 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;
+    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 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 ${
+      stateStr = `Terminated: ${cs.state.terminated.reason ?? ''} (exit ${cs.state.terminated.exitCode ?? ''})`;
        cs.state.terminated.exitCode ?? ''
      })`;
    return {
      name: cs.name,
@@ -112,7 +111,11 @@ 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,15 +11,7 @@ import {
 } from '@kinvolk/headlamp-plugin/lib/CommonComponents';
 import React from 'react';
 import type { CephCluster, RookCephPod } from '../api/k8s';
-import {
+import { formatAge, formatBytes, getPodImage, getPodRestarts, healthToStatus, isPodReady, phaseToStatus } from '../api/k8s';
  formatAge,
  formatBytes,
  getPodImage,
  getPodRestarts,
  healthToStatus,
  isPodReady,
  phaseToStatus,
 } from '../api/k8s';
 interface ClusterStatusCardProps {
  cephClusters: CephCluster[];
@@ -34,14 +26,17 @@ 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 =
+  const status = total === 0 ? 'error' : ready === total ? 'success' : ready > 0 ? 'warning' : 'error';
    total === 0 ? 'error' : ready === total ? 'success' : ready > 0 ? 'warning' : 'error';
  return {
    name: label,
    value: (
@@ -89,12 +84,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
+                  ...(cluster.status?.message ? [{ name: 'Message', value: 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) },
@@ -107,11 +102,7 @@ export default function ClusterStatusCard({
                <div style={{ marginBottom: '12px' }}>
                  <PercentageBar
                    data={[
-                      {
+                      { name: 'Used', value: bytesUsed, fill: usedPct > 80 ? '#f44336' : '#1976d2' },
                        name: 'Used',
                        value: bytesUsed,
                        fill: usedPct > 80 ? '#f44336' : '#1976d2',
                      },
                      { name: 'Free', value: bytesAvail, fill: '#e0e0e0' },
                    ]}
                    total={bytesTotal}
@@ -151,9 +142,7 @@ export function PodDetailRows({ pods, label }: { pods: RookCephPod[]; label: str
    return (
      <SectionBox title={label}>
        <NameValueTable
-          rows={[
+          rows={[{ name: 'Status', value: <StatusLabel status="error">No pods found</StatusLabel> }]}
            { name: 'Status', value: <StatusLabel status="error">No pods found</StatusLabel> },
          ]}
        />
      </SectionBox>
    );
@@ -19,10 +19,7 @@ function FilesystemDetail({ fs, onClose }: { fs: CephFilesystem; onClose: () =>
    <div
      style={{
        position: 'fixed',
-        top: 0,
+        top: 0, right: 0, bottom: 0, width: '480px',
        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,
@@ -30,14 +27,7 @@ function FilesystemDetail({ fs, onClose }: { fs: CephFilesystem; onClose: () =>
        padding: '24px',
      }}
    >
-      <div
+      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '16px' }}>
        style={{
          display: 'flex',
          justifyContent: 'space-between',
          alignItems: 'center',
          marginBottom: '16px',
        }}
      >
        <strong>{fs.metadata.name}</strong>
        <button
          onClick={onClose}
@@ -68,10 +58,7 @@ 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>
@@ -120,21 +107,14 @@ export default function FilesystemsPage() {
      {error && (
        <SectionBox title="Error">
-          <NameValueTable
+          <NameValueTable rows={[{ name: 'Status', value: <StatusLabel status="error">{error}</StatusLabel> }]} />
            rows={[{ name: 'Status', value: <StatusLabel status="error">{error}</StatusLabel> }]}
          />
        </SectionBox>
      )}
      {filesystems.length === 0 ? (
        <SectionBox title="No Filesystems">
          <NameValueTable
-            rows={[
+            rows={[{ name: 'Status', value: 'No CephFilesystem resources found in rook-ceph namespace.' }]}
              {
                name: 'Status',
                value: 'No CephFilesystem resources found in rook-ceph namespace.',
              },
            ]}
          />
        </SectionBox>
      ) : (
@@ -146,15 +126,7 @@ export default function FilesystemsPage() {
                getter: (f: CephFilesystem) => (
                  <button
                    onClick={() => setSelected(f)}
-                    style={{
+                    style={{ border: 'none', background: 'transparent', color: 'var(--link-color, #1976d2)', cursor: 'pointer', textDecoration: 'underline', padding: 0, font: 'inherit' }}
                      border: 'none',
                      background: 'transparent',
                      color: 'var(--link-color, #1976d2)',
                      cursor: 'pointer',
                      textDecoration: 'underline',
                      padding: 0,
                      font: 'inherit',
                    }}
                  >
                    {f.metadata.name}
                  </button>
@@ -168,22 +140,10 @@ export default function FilesystemsPage() {
                  </StatusLabel>
                ),
              },
-              {
+              { label: 'Active MDS', getter: (f: CephFilesystem) => String(f.spec?.metadataServer?.activeCount ?? '—') },
-                label: 'Active MDS',
+              { label: 'Active Standby', getter: (f: CephFilesystem) => String(f.spec?.metadataServer?.activeStandby ?? '—') },
-                getter: (f: CephFilesystem) => String(f.spec?.metadataServer?.activeCount ?? '—'),
+              { label: 'Data Pools', getter: (f: CephFilesystem) => String(f.spec?.dataPools?.length ?? 0) },
-              },
+              { label: 'Age', getter: (f: CephFilesystem) => formatAge(f.metadata.creationTimestamp) },
              {
                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}
          />
@@ -193,12 +153,7 @@ export default function FilesystemsPage() {
      {selected && (
        <>
          <div
-            style={{
+            style={{ position: 'fixed', inset: 0, backgroundColor: 'rgba(0,0,0,0.3)', zIndex: 1299 }}
              position: 'fixed',
              inset: 0,
              backgroundColor: 'rgba(0,0,0,0.3)',
              zIndex: 1299,
            }}
            onClick={() => setSelected(null)}
          />
          <FilesystemDetail fs={selected} onClose={() => setSelected(null)} />
@@ -23,10 +23,7 @@ function ObjectStoreDetail({ store, onClose }: { store: CephObjectStore; onClose
    <div
      style={{
        position: 'fixed',
-        top: 0,
+        top: 0, right: 0, bottom: 0, width: '480px',
        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,
@@ -34,14 +31,7 @@ function ObjectStoreDetail({ store, onClose }: { store: CephObjectStore; onClose
        padding: '24px',
      }}
    >
-      <div
+      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '16px' }}>
        style={{
          display: 'flex',
          justifyContent: 'space-between',
          alignItems: 'center',
          marginBottom: '16px',
        }}
      >
        <strong>{store.metadata.name}</strong>
        <button
          onClick={onClose}
@@ -77,7 +67,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={[
@@ -114,21 +104,14 @@ export default function ObjectStoresPage() {
      {error && (
        <SectionBox title="Error">
-          <NameValueTable
+          <NameValueTable rows={[{ name: 'Status', value: <StatusLabel status="error">{error}</StatusLabel> }]} />
            rows={[{ name: 'Status', value: <StatusLabel status="error">{error}</StatusLabel> }]}
          />
        </SectionBox>
      )}
      {objectStores.length === 0 ? (
        <SectionBox title="No Object Stores">
          <NameValueTable
-            rows={[
+            rows={[{ name: 'Status', value: 'No CephObjectStore resources found in rook-ceph namespace.' }]}
              {
                name: 'Status',
                value: 'No CephObjectStore resources found in rook-ceph namespace.',
              },
            ]}
          />
        </SectionBox>
      ) : (
@@ -140,15 +123,7 @@ export default function ObjectStoresPage() {
                getter: (o: CephObjectStore) => (
                  <button
                    onClick={() => setSelected(o)}
-                    style={{
+                    style={{ border: 'none', background: 'transparent', color: 'var(--link-color, #1976d2)', cursor: 'pointer', textDecoration: 'underline', padding: 0, font: 'inherit' }}
                      border: 'none',
                      background: 'transparent',
                      color: 'var(--link-color, #1976d2)',
                      cursor: 'pointer',
                      textDecoration: 'underline',
                      padding: 0,
                      font: 'inherit',
                    }}
                  >
                    {o.metadata.name}
                  </button>
@@ -162,18 +137,9 @@ export default function ObjectStoresPage() {
                  </StatusLabel>
                ),
              },
-              {
+              { label: 'Gateway Port', getter: (o: CephObjectStore) => String(o.spec?.gateway?.port ?? '—') },
-                label: 'Gateway Port',
+              { label: 'Instances', getter: (o: CephObjectStore) => String(o.spec?.gateway?.instances ?? '—') },
-                getter: (o: CephObjectStore) => String(o.spec?.gateway?.port ?? '—'),
+              { label: 'Age', getter: (o: CephObjectStore) => formatAge(o.metadata.creationTimestamp) },
              },
              {
                label: 'Instances',
                getter: (o: CephObjectStore) => String(o.spec?.gateway?.instances ?? '—'),
              },
              {
                label: 'Age',
                getter: (o: CephObjectStore) => formatAge(o.metadata.creationTimestamp),
              },
            ]}
            data={objectStores}
          />
@@ -183,12 +149,7 @@ export default function ObjectStoresPage() {
      {selected && (
        <>
          <div
-            style={{
+            style={{ position: 'fixed', inset: 0, backgroundColor: 'rgba(0,0,0,0.3)', zIndex: 1299 }}
              position: 'fixed',
              inset: 0,
              backgroundColor: 'rgba(0,0,0,0.3)',
              zIndex: 1299,
            }}
            onClick={() => setSelected(null)}
          />
          <ObjectStoreDetail store={selected} onClose={() => setSelected(null)} />
@@ -15,13 +15,7 @@ import {
  StatusLabel,
 } from '@kinvolk/headlamp-plugin/lib/CommonComponents';
 import React from 'react';
-import {
+import { formatAge, formatBytes, healthToStatus, phaseToStatus, storageClassType } from '../api/k8s';
  formatAge,
  formatBytes,
  healthToStatus,
  phaseToStatus,
  storageClassType,
 } from '../api/k8s';
 import { useRookCephContext } from '../api/RookCephDataContext';
 import ClusterStatusCard from './ClusterStatusCard';
@@ -76,14 +70,7 @@ export default function OverviewPage() {
  return (
    <>
-      <div
+      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '20px' }}>
        style={{
          display: 'flex',
          justifyContent: 'space-between',
          alignItems: 'center',
          marginBottom: '20px',
        }}
      >
        <SectionHeader title="Rook-Ceph — Overview" />
        <button
          onClick={refresh}
@@ -110,16 +97,11 @@ export default function OverviewPage() {
            rows={[
              {
                name: 'Status',
-                value: (
+                value: <StatusLabel status="error">No CephCluster found in namespace rook-ceph</StatusLabel>,
                  <StatusLabel status="error">
                    No CephCluster found in namespace rook-ceph
                  </StatusLabel>
                ),
              },
              {
                name: 'Install',
-                value:
+                value: 'helm install rook-ceph rook-release/rook-ceph -n rook-ceph --create-namespace',
                  'helm install rook-ceph rook-release/rook-ceph -n rook-ceph --create-namespace',
              },
              {
                name: 'Docs',
@@ -147,7 +129,9 @@ export default function OverviewPage() {
              {
                name: 'Health',
                value: (
-                  <StatusLabel status={healthToStatus(primaryHealth)}>{primaryHealth}</StatusLabel>
+                  <StatusLabel status={healthToStatus(primaryHealth)}>
                    {primaryHealth}
                  </StatusLabel>
                ),
              },
              {
@@ -164,13 +148,7 @@ export default function OverviewPage() {
        <SectionBox title="Storage Summary">
          {storageClasses.length > 0 && (
            <div style={{ marginBottom: '16px' }}>
-              <div
+              <div style={{ marginBottom: '8px', fontSize: '14px', color: 'var(--mui-palette-text-secondary)' }}>
                style={{
                  marginBottom: '8px',
                  fontSize: '14px',
                  color: 'var(--mui-palette-text-secondary)',
                }}
              >
                StorageClass Type Distribution
              </div>
              <PercentageBar
@@ -179,13 +157,7 @@ export default function OverviewPage() {
                    ? [{ name: 'Block (RBD)', value: rbdClasses.length, fill: '#1976d2' }]
                    : []),
                  ...(cephfsClasses.length > 0
-                    ? [
+                    ? [{ name: 'Filesystem (CephFS)', value: cephfsClasses.length, fill: '#9c27b0' }]
                        {
                          name: 'Filesystem (CephFS)',
                          value: cephfsClasses.length,
                          fill: '#9c27b0',
                        },
                      ]
                    : []),
                ]}
                total={storageClasses.length}
@@ -194,10 +166,7 @@ export default function OverviewPage() {
          )}
          <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) },
@@ -208,20 +177,10 @@ 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>,
                    },
                  ]
                : []),
            ]}
          />
@@ -244,18 +203,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: 'Replicas', getter: (p) => String(p.spec?.replicated?.size ?? '—') },
-              { label: 'Failure Domain', getter: p => p.spec?.failureDomain ?? '—' },
+              { label: 'Failure Domain', getter: (p) => p.spec?.failureDomain ?? '—' },
-              { label: 'Age', getter: p => formatAge(p.metadata.creationTimestamp) },
+              { label: 'Age', getter: (p) => formatAge(p.metadata.creationTimestamp) },
            ]}
            data={blockPools}
          />
@@ -267,20 +226,17 @@ 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: 'Active MDS',
+              { label: 'Age', getter: (f) => formatAge(f.metadata.creationTimestamp) },
                getter: f => String(f.spec?.metadataServer?.activeCount ?? '—'),
              },
              { label: 'Age', getter: f => formatAge(f.metadata.creationTimestamp) },
            ]}
            data={filesystems}
          />
@@ -292,18 +248,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: 'Gateway Port', getter: (o) => String(o.spec?.gateway?.port ?? '—') },
-              { label: 'Instances', getter: o => String(o.spec?.gateway?.instances ?? '—') },
+              { label: 'Instances', getter: (o) => String(o.spec?.gateway?.instances ?? '—') },
-              { label: 'Age', getter: o => formatAge(o.metadata.creationTimestamp) },
+              { label: 'Age', getter: (o) => formatAge(o.metadata.creationTimestamp) },
            ]}
            data={objectStores}
          />
@@ -315,17 +271,17 @@ export default function OverviewPage() {
        <SectionBox title="Attention: Non-Bound PVCs">
          <SimpleTable
            columns={[
-              { label: 'Name', getter: pvc => pvc.metadata.name },
+              { label: 'Name', getter: (pvc) => pvc.metadata.name },
-              { label: 'Namespace', getter: pvc => pvc.metadata.namespace ?? '—' },
+              { 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}
          />
@@ -342,16 +298,11 @@ function parseStorageToBytes(storage: string): number {
  const suffix = match[2] ?? '';
  const multipliers: Record<string, number> = {
    '': 1,
-    K: 1e3,
+    K: 1e3, Ki: 1024,
-    Ki: 1024,
+    M: 1e6, Mi: 1024 ** 2,
-    M: 1e6,
+    G: 1e9, Gi: 1024 ** 3,
-    Mi: 1024 ** 2,
+    T: 1e12, Ti: 1024 ** 4,
-    G: 1e9,
+    P: 1e15, Pi: 1024 ** 5,
    Gi: 1024 ** 3,
    T: 1e12,
    Ti: 1024 ** 4,
    P: 1e15,
    Pi: 1024 ** 5,
  };
  return value * (multipliers[suffix] ?? 1);
 }
@@ -5,7 +5,10 @@
 * 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';
@@ -37,11 +40,7 @@ export default function PVCDetailSection({ resource }: PVCDetailSectionProps) {
  // Determine storage type from driver name
  const driver = boundPv.spec.csi?.driver ?? '';
-  const type = driver.includes('.rbd.')
+  const type = driver.includes('.rbd.') ? 'rbd' : driver.includes('.cephfs.') ? 'cephfs' : 'unknown';
    ? '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?: {
+    spec?: { csi?: { driver?: string; volumeHandle?: string; volumeAttributes?: Record<string, string> }; storageClassName?: string };
      csi?: { driver?: string; volumeHandle?: string; volumeAttributes?: Record<string, string> };
      storageClassName?: string;
    };
    jsonData?: unknown;
  };
 }
@@ -34,11 +34,7 @@ export default function PVDetailSection({ resource }: PVDetailSectionProps) {
  }
  const attrs = spec?.csi?.volumeAttributes ?? {};
-  const type = driver.includes('.rbd.')
+  const type = driver.includes('.rbd.') ? 'rbd' : driver.includes('.cephfs.') ? 'cephfs' : 'unknown';
    ? '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: 'Node', getter: (p) => p.spec?.nodeName ?? '—' },
-          { label: 'Restarts', getter: p => String(getPodRestarts(p)) },
+          { label: 'Restarts', getter: (p) => String(getPodRestarts(p)) },
-          { label: 'Age', getter: p => formatAge(p.metadata.creationTimestamp) },
+          { 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 => {
+            getter: (p) => {
-              const st = isPodReady(p)
+              const st = isPodReady(p) ? 'success' : p.status?.phase === 'Pending' ? 'warning' : 'error';
-                ? 'success'
+              return (
-                : p.status?.phase === 'Pending'
+                <StatusLabel status={st}>
-                ? 'warning'
+                  {p.status?.phase ?? 'Unknown'}
-                : 'error';
+                </StatusLabel>
-              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: 'Device Class', getter: (p) => p.metadata.labels?.['device-class'] ?? '—' },
-          { label: 'Store', getter: p => p.metadata.labels?.['osd-store'] ?? '—' },
+          { label: 'Store', getter: (p) => p.metadata.labels?.['osd-store'] ?? '—' },
-          { label: 'Failure Domain', getter: p => p.metadata.labels?.['failure-domain'] ?? '—' },
+          { label: 'Failure Domain', getter: (p) => p.metadata.labels?.['failure-domain'] ?? '—' },
-          { label: 'Restarts', getter: p => String(getPodRestarts(p)) },
+          { label: 'Restarts', getter: (p) => String(getPodRestarts(p)) },
-          { label: 'Age', getter: p => formatAge(p.metadata.creationTimestamp) },
+          { label: 'Age', getter: (p) => formatAge(p.metadata.creationTimestamp) },
        ]}
        data={pods}
      />
@@ -74,19 +74,20 @@ function OsdTable({ pods }: { pods: RookCephPod[] }) {
 }
 export default function PodsPage() {
-  const { operatorPods, monPods, osdPods, mgrPods, csiRbdPods, csiCephfsPods, loading, error } =
+  const {
-    useRookCephContext();
+    operatorPods,
    monPods,
    osdPods,
    mgrPods,
    csiRbdPods,
    csiCephfsPods,
    loading,
    error,
  } = useRookCephContext();
  if (loading) return <Loader title="Loading Rook-Ceph pods..." />;
-  const allPods = [
+  const allPods = [...operatorPods, ...monPods, ...osdPods, ...mgrPods, ...csiRbdPods, ...csiCephfsPods];
    ...operatorPods,
    ...monPods,
    ...osdPods,
    ...mgrPods,
    ...csiRbdPods,
    ...csiCephfsPods,
  ];
  const totalReady = allPods.filter(isPodReady).length;
  return (
@@ -95,9 +96,7 @@ export default function PodsPage() {
      {error && (
        <SectionBox title="Error">
-          <NameValueTable
+          <NameValueTable rows={[{ name: 'Status', value: <StatusLabel status="error">{error}</StatusLabel> }]} />
            rows={[{ name: 'Status', value: <StatusLabel status="error">{error}</StatusLabel> }]}
          />
        </SectionBox>
      )}
@@ -107,11 +106,7 @@ export default function PodsPage() {
            {
              name: 'Overall Health',
              value: (
-                <StatusLabel
+                <StatusLabel status={totalReady === allPods.length && allPods.length > 0 ? 'success' : 'warning'}>
                  status={
                    totalReady === allPods.length && allPods.length > 0 ? 'success' : 'warning'
                  }
                >
                  {totalReady}/{allPods.length} pods ready
                </StatusLabel>
              ),
@@ -14,24 +14,13 @@ import React, { useState } from 'react';
 import { formatAge, formatStorageType, RookCephStorageClass, storageClassType } from '../api/k8s';
 import { useRookCephContext } from '../api/RookCephDataContext';
-function StorageClassDetail({
+function StorageClassDetail({ sc, pvCount, onClose }: { sc: RookCephStorageClass; pvCount: number; onClose: () => void }) {
  sc,
  pvCount,
  onClose,
 }: {
  sc: RookCephStorageClass;
  pvCount: number;
  onClose: () => void;
 }) {
  const type = storageClassType(sc);
  return (
    <div
      style={{
        position: 'fixed',
-        top: 0,
+        top: 0, right: 0, bottom: 0, width: '480px',
        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,
@@ -39,14 +28,7 @@ function StorageClassDetail({
        padding: '24px',
      }}
    >
-      <div
+      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '16px' }}>
        style={{
          display: 'flex',
          justifyContent: 'space-between',
          alignItems: 'center',
          marginBottom: '16px',
        }}
      >
        <strong>{sc.metadata.name}</strong>
        <button
          onClick={onClose}
@@ -64,10 +46,7 @@ function StorageClassDetail({
            { 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) },
          ]}
@@ -102,22 +81,14 @@ export default function StorageClassesPage() {
      {error && (
        <SectionBox title="Error">
-          <NameValueTable
+          <NameValueTable rows={[{ name: 'Status', value: <StatusLabel status="error">{error}</StatusLabel> }]} />
            rows={[{ name: 'Status', value: <StatusLabel status="error">{error}</StatusLabel> }]}
          />
        </SectionBox>
      )}
      {storageClasses.length === 0 ? (
        <SectionBox title="No Storage Classes">
          <NameValueTable
-            rows={[
+            rows={[{ name: 'Status', value: 'No Rook-Ceph StorageClasses found. Ensure CephBlockPool and CephFilesystem resources exist.' }]}
              {
                name: 'Status',
                value:
                  'No Rook-Ceph StorageClasses found. Ensure CephBlockPool and CephFilesystem resources exist.',
              },
            ]}
          />
        </SectionBox>
      ) : (
@@ -129,15 +100,7 @@ export default function StorageClassesPage() {
                getter: (sc: RookCephStorageClass) => (
                  <button
                    onClick={() => setSelected(sc)}
-                    style={{
+                    style={{ border: 'none', background: 'transparent', color: 'var(--link-color, #1976d2)', cursor: 'pointer', textDecoration: 'underline', padding: 0, font: 'inherit' }}
                      border: 'none',
                      background: 'transparent',
                      color: 'var(--link-color, #1976d2)',
                      cursor: 'pointer',
                      textDecoration: 'underline',
                      padding: 0,
                      font: 'inherit',
                    }}
                  >
                    {sc.metadata.name}
                  </button>
@@ -152,24 +115,11 @@ 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: 'Expansion',
+              { label: 'PVs', getter: (sc: RookCephStorageClass) => String(pvCountByClass.get(sc.metadata.name) ?? 0) },
-                getter: (sc: RookCephStorageClass) => (sc.allowVolumeExpansion ? 'Yes' : 'No'),
+              { label: 'Age', getter: (sc: RookCephStorageClass) => formatAge(sc.metadata.creationTimestamp) },
              },
              {
                label: 'PVs',
                getter: (sc: RookCephStorageClass) =>
                  String(pvCountByClass.get(sc.metadata.name) ?? 0),
              },
              {
                label: 'Age',
                getter: (sc: RookCephStorageClass) => formatAge(sc.metadata.creationTimestamp),
              },
            ]}
            data={storageClasses}
          />
@@ -179,12 +129,7 @@ export default function StorageClassesPage() {
      {selected && (
        <>
          <div
-            style={{
+            style={{ position: 'fixed', inset: 0, backgroundColor: 'rgba(0,0,0,0.3)', zIndex: 1299 }}
              position: 'fixed',
              inset: 0,
              backgroundColor: 'rgba(0,0,0,0.3)',
              zIndex: 1299,
            }}
            onClick={() => setSelected(null)}
          />
          <StorageClassDetail
@@ -20,10 +20,7 @@ function PVDetail({ pv, onClose }: { pv: RookCephPersistentVolume; onClose: () =
    <div
      style={{
        position: 'fixed',
-        top: 0,
+        top: 0, right: 0, bottom: 0, width: '520px',
        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,
@@ -31,14 +28,7 @@ function PVDetail({ pv, onClose }: { pv: RookCephPersistentVolume; onClose: () =
        padding: '24px',
      }}
    >
-      <div
+      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '16px' }}>
        style={{
          display: 'flex',
          justifyContent: 'space-between',
          alignItems: 'center',
          marginBottom: '16px',
        }}
      >
        <strong>{pv.metadata.name}</strong>
        <button
          onClick={onClose}
@@ -99,9 +89,7 @@ export default function VolumesPage() {
      {error && (
        <SectionBox title="Error">
-          <NameValueTable
+          <NameValueTable rows={[{ name: 'Status', value: <StatusLabel status="error">{error}</StatusLabel> }]} />
            rows={[{ name: 'Status', value: <StatusLabel status="error">{error}</StatusLabel> }]}
          />
        </SectionBox>
      )}
@@ -120,28 +108,14 @@ export default function VolumesPage() {
                getter: (pv: RookCephPersistentVolume) => (
                  <button
                    onClick={() => setSelected(pv)}
-                    style={{
+                    style={{ border: 'none', background: 'transparent', color: 'var(--link-color, #1976d2)', cursor: 'pointer', textDecoration: 'underline', padding: 0, font: 'inherit' }}
                      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: 'Capacity',
+              { label: 'Access Modes', getter: (pv: RookCephPersistentVolume) => formatAccessModes(pv.spec.accessModes) },
                getter: (pv: RookCephPersistentVolume) => pv.spec.capacity?.storage ?? '—',
              },
              {
                label: 'Access Modes',
                getter: (pv: RookCephPersistentVolume) => formatAccessModes(pv.spec.accessModes),
              },
              {
                label: 'Phase',
                getter: (pv: RookCephPersistentVolume) => (
@@ -150,25 +124,10 @@ export default function VolumesPage() {
                  </StatusLabel>
                ),
              },
-              {
+              { label: 'Reclaim', getter: (pv: RookCephPersistentVolume) => pv.spec.persistentVolumeReclaimPolicy ?? '—' },
-                label: 'Reclaim',
+              { label: 'Pool', getter: (pv: RookCephPersistentVolume) => pv.spec.csi?.volumeAttributes?.['pool'] ?? '—' },
-                getter: (pv: RookCephPersistentVolume) =>
+              { label: 'Claim', getter: (pv: RookCephPersistentVolume) => pv.spec.claimRef ? `${pv.spec.claimRef.namespace}/${pv.spec.claimRef.name}` : '—' },
-                  pv.spec.persistentVolumeReclaimPolicy ?? '—',
+              { label: 'Age', getter: (pv: RookCephPersistentVolume) => formatAge(pv.metadata.creationTimestamp) },
              },
              {
                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}
          />
@@ -178,12 +137,7 @@ export default function VolumesPage() {
      {selected && (
        <>
          <div
-            style={{
+            style={{ position: 'fixed', inset: 0, backgroundColor: 'rgba(0,0,0,0.3)', zIndex: 1299 }}
              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,17 +73,12 @@ export function buildStorageClassColumns() {
    },
    {
      label: 'Cluster',
-      getValue: (item: unknown) =>
+      getValue: (item: unknown) => getField(item, 'parameters', 'clusterID') as string | null ?? null,
        (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 (
+        return <span title={clusterID}>{clusterID.length > 16 ? `${clusterID.slice(0, 16)}…` : clusterID}</span>;
          <span title={clusterID}>
            {clusterID.length > 16 ? `${clusterID.slice(0, 16)}…` : clusterID}
          </span>
        );
      },
    },
  ];
@@ -106,13 +101,10 @@ export function buildPVColumns() {
    },
    {
      label: 'Pool',
-      getValue: (item: unknown) =>
+      getValue: (item: unknown) => getField(item, 'spec', 'csi', 'volumeAttributes', 'pool') as string | null ?? null,
        (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
+        const pool = getField(item, 'spec', 'csi', 'volumeAttributes', 'pool') as string | undefined;
          | string
          | undefined;
        return <span>{pool ?? '—'}</span>;
      },
    },
@@ -16,10 +16,7 @@ import { RookCephDataProvider } from './api/RookCephDataContext';
 import BlockPoolsPage from './components/BlockPoolsPage';
 import CephPodDetailSection from './components/CephPodDetailSection';
 import FilesystemsPage from './components/FilesystemsPage';
-import {
+import { buildPVColumns, buildStorageClassColumns } from './components/integrations/StorageClassColumns';
  buildPVColumns,
  buildStorageClassColumns,
 } from './components/integrations/StorageClassColumns';
 import ObjectStoresPage from './components/ObjectStoresPage';
 import OverviewPage from './components/OverviewPage';
 import PodsPage from './components/PodsPage';
@@ -210,18 +207,11 @@ registerDetailsViewSection(({ resource }) => {
 // takes priority and falls back to the existing one (for mixed-driver tables).
 function mergeColumns<T>(
  existing: T[],
-  incoming: Array<{
+  incoming: Array<{ label: string; getValue: (r: unknown) => unknown; render: (r: unknown) => React.ReactNode }>
    label: string;
    getValue: (r: unknown) => unknown;
    render: (r: unknown) => React.ReactNode;
  }>
 ): T[] {
-  type ObjCol = {
+  type ObjCol = { label: string; getValue: (r: unknown) => unknown; render: (r: unknown) => React.ReactNode };
-    label: string;
+  const isObjCol = (c: unknown): c is ObjCol =>
-    getValue: (r: unknown) => unknown;
+    typeof c === 'object' && c !== null && 'label' in c;
    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) {
@@ -231,7 +221,7 @@ function mergeColumns<T>(
      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)),
+        render: (r: unknown) => col.getValue(r) !== null ? col.render(r) : prev.render(r),
      } as unknown as T;
    } else {
      toAppend.push(col);
@@ -249,3 +239,4 @@ registerResourceTableColumnsProcessor(({ id, columns }) => {
  }
  return columns;
 });
		`@@ -1 +0,0 @@`
			`module.exports = require('@headlamp-k8s/eslint-config/prettier-config');`