K8s Explorer

This is the template directory used by npm run create:module to generate new modules.

Structure

k8s-explorer/
├── index.tsx                     # Module definition (name, icon, id)
├── ModuleConfig.ts              # Zod schema for config validation
├── package.json                 # Module package info
├── src/
│   └── stores/
│       └── useModuleTemplateStore.ts  # Zustand store with persistence
├── main-content/                # Required main content component
│   └── index.tsx
├── left-tab/                    # Optional left panel content
│   └── index.tsx
├── right-tabs/                  # Optional right sidebar tabs
│   └── example-tab/
│       └── index.tsx
├── widgets/                     # Widget components (created separately)
└── README.md                    # This file (gets copied to new modules)

Usage

Create a new module:

npm run create:module my-awesome-module

Result:

• Creates modules/my-awesome-module/ with all template files
• Replaces k8s-explorer → my-awesome-module in all files
• Replaces K8s Explorer → My Awesome Module in display names
• Includes Zod schema, Zustand store, and example components
• Module immediately appears in running dev server

Create widgets for your module:

npm run create:widget my-awesome-module MyWidget

Key Concepts

ModuleConfig.ts

• Uses Zod schemas for runtime validation
• Defines the shape of saved configurations
• Used by both widgets and the module store

Store (useModuleTemplateStore)

• Built with createModuleStore helper
• Automatically handles config loading/saving
• Supports localStorage persistence
• Extends BaseModuleStore with custom state

Widgets

• Can be "static" (read-only), "dynamic" (editable), or "both"
• Each widget has index.tsx (component) and config.tsx (settings dialog)
• Automatically discovered on restart

Customization

Remove left panel: Delete left-tab/ directory Remove right tabs: Delete right-tabs/ directory Add right tabs: Create right-tabs/new-tab/index.tsx Update config schema: Edit ModuleConfig.ts with your Zod schema Add state: Update the store in src/stores/

Template Maintenance

When updating this template, changes will affect all future modules created with npm run create:module.