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
Top comments (0)