Skip to main content

​
Directory Overview

​
Key Patterns

​
Plugin Entry (index.ts)

The plugin() function is the extension’s entry point. It:
  1. Registers all routes (one per page component).
  2. Injects global CSS via injectPasturesCSS().
  3. Adds a sparkle button to the Rancher header that opens the AI drawer.
Rancher extensions use three primitives to define sidebar structure:

​
Tabbed Container Pages

Four pages act as containers for related sub-pages:

OperationsPage

6 tabs — CIS Benchmarks, Etcd, Monitoring, Audit Log, Upgrade Risk, Backup & DR

HarvesterPage

7 tabs — VM overview, networks, images, volumes, templates, monitoring, settings

InfrastructurePage

3 tabs — Nodes, storage, networking

AIAgentsPage

3 tabs — Agent list, execution history, configuration
Tabbed containers pass an embedded prop to child page components to suppress their standalone headers when rendered as a tab.

​
API Client (lib/pasturesApi.ts)

All communication with the Pastures Engine goes through engineFetch(). This wrapper:
  • Reads the Engine URL and API key from localStorage.
  • Attaches the Authorization: Bearer <key> header when configured.
  • Short-circuits to synthetic responses when isGlobalDemoMode() returns true.
  • Returns responses through safeJson() for safe parsing with fallback handling.

​
Demo Mode (lib/demoResponses.ts)

getDemoResponse(path) maps API paths to static response objects. Pages that use inline fetch instead of engineFetch define their own DEMO_* constants and check isGlobalDemoMode() in onMounted.

​
AI Context (lib/aiContext.ts)

Maps the current route to a list of suggested questions displayed in the AI drawer. When a user opens the drawer from a specific page, they see contextually relevant prompts.