Kubernetes Overlay Visualizer - A VS Code extension that brings clarity to complex Kustomize multi-tenant configurations

dineshsb — Sun, 01 Feb 2026 18:18:47 +0000

This is a submission for the GitHub Copilot CLI Challenge

What I Built

Kubernetes Overlay Visualizer - A VS Code extension that brings clarity to complex Kustomize multi-tenant configurations

Problem being solved - Managing Kubernetes deployments across multiple clients and environments quickly becomes overwhelming. When you have client-a/dev, client-a/prod, client-b/dev, client-b/prod each with their own overlays, patches, and inheritance chains, it's hard to answer simple questions like "What's actually deployed in client-a's production?" or "Which containers are running in this deployment?"

This extension solves that by providing interactive, visual diagrams of your Kustomize overlay structures. It parses your YAML files and shows you:

3-tier inheritance visualization: See how base templates flow through client-specific configs to environment overlays
Multi-workload deployments: Visualize all your deployments (APIs, workers, analytics, frontend) in one view
Sidecar containers: Clear visibility into main containers and sidecars (logging, monitoring, proxies)
Validation layer: Real-time warnings for missing resource limits, :latest tags, and configuration issues
Scalability views: Two visualization modes (Compact Grid and List+Detail) that scale from 3 to 100+ deployments
Network policies: Visual flow diagrams for ingress/egress rules
Ready-to-use kubectl commands: Categorized commands for pods, networking, logging, and debugging

Try it yourself:

 - Clone: git clone https://github.com/dineshsb/kubernetes-overlay-visualizer.git
 - Open in VS Code
 - Press F5 to launch extension
 - Run command: Kustomize: Visualize Overlays
 - Select an overlay from the dropdown (e.g., client-a / prod)

Key Features to Demo:

Multi-View Scalability

 - Toggle between "Compact Grid" and "List + Detail" views
 - Show how it handles 10+ deployments elegantly
 - Expand/collapse cards in Compact view
 - Select deployments in List view

Validation Layer

 - Show error/warning badges on deployments
 - Click "View All Issues" to see validation report
 - Demonstrate "Fix" button opening YAML file in editor

Interactive Features

 - Click deployment to view full YAML content
 - Click "Edit Deployment" to jump to source file
 - Copy kubectl commands with one click
 - File watcher: Edit YAML → auto-refresh diagram

Export & Share

 - Export diagram to PNG/JPG
 - Show network policies visualization
 - Show environment variables organized by tier

My Experience with GitHub Copilot CLI

GitHub Copilot CLI was transformative for this project. Here's how it accelerated development:

Rapid Prototyping & Architecture Decisions

When I asked for a design to handle 10+ deployments, Copilot CLI generated 6 different layout options with ASCII diagrams in
seconds. Each option included pros/cons analysis, implementation complexity estimates, and recommendations. This helped me
quickly evaluate trade-offs and choose the hybrid approach (Compact Grid + List+Detail views) that became the final
implementation.

Complex Code Generation

The dual view mode required intricate JavaScript for state management, dynamic rendering, and feature preservation. I described
what I needed ("implement Option 2 and Option 6 with a toggle"), and Copilot CLI generated:

 - Complete CSS for both view modes
 - JavaScript state management (view mode, expanded cards, selected deployment)
 - Rendering functions (400+ lines) with all edge cases handled
 - Integration with existing features without breaking anything

Impact: What would have taken 4-6 hours of careful coding was done in 30 minutes.

Validation Layer Implementation

I said "implement validation layer with rules from validation-checklist.md" and Copilot CLI:

 - Parsed my requirements document
 - Created comprehensive validation rules for Kubernetes best practices
 - Implemented error/warning categorization
 - Built the UI components (badges, modals, fix buttons)
 - Critically: Reminded me "It is critical to not hardcode" and honored that throughout

Learning from Critical Rules

Early on, I made the mistake of hardcoding validation data. Copilot CLI caught this, created a CRITICAL-RULES.md file, and
enforced it in every subsequent change. It would preface code changes with "[COMPLIANCE CHECK]" to verify no hardcoding. This
discipline improved code quality significantly.

Debugging & Problem Solving

When export-to-PNG only captured the first deployment, I described the issue and Copilot CLI:

 - Diagnosed the root cause (flexbox rendering issues with html2canvas)
 - Generated a fix with layout adjustments pre-capture
 - Added proper cleanup to restore original layout post-capture
 - Included debug logging for troubleshooting

Documentation & Context Management

Copilot CLI maintained session files (plan.md, checkpoints, validation-checklist.md) that tracked progress across multiple
sessions. When I returned after a break, it would read these files and immediately understand context, suggesting next steps
based on the plan.

The Difference It Made:

 - Development Speed: 3-4x faster than solo coding
 - Code Quality: Better edge case handling, cleaner architecture
 - Learning: Exposed me to patterns I wouldn't have considered
 - Focus: Less time on boilerplate, more on creative problem-solving

Best Practices I Learned:

 - Be specific with context: Mention existing features that must be preserved
 - Ask for design options: Get multiple approaches before implementing
 - Use verification flags: [COMPLIANCE CHECK], [VERBOSE MODE] for quality assurance
 - Leverage session state: plan.md and checkpoints maintain continuity across sessions
 - Request validation first: Ask "what should I test?" before merging changes

Forem: dineshsb

Kubernetes Overlay Visualizer - A VS Code extension that brings clarity to complex Kustomize multi-tenant configurations

What I Built

Key Features to Demo:

My Experience with GitHub Copilot CLI