Skip to main content

​
Directory Overview

pkg/pastures/
├── index.ts              # Plugin entry, routes, CSS, header action
├── product.ts            # Sidebar: virtualType, basicType, weightType
├── package.json          # Extension metadata, Rancher version constraints
├── lib/
│   ├── pasturesApi.ts    # Engine API client, auth, demo mode, safeJson
│   ├── demoResponses.ts  # Synthetic API responses for demo mode
│   └── aiContext.ts      # Page-aware AI suggestions
├── pages/
│   ├── OperationsPage.vue    # Tabbed container (6 tabs)
│   ├── HarvesterPage.vue     # Tabbed container (7 tabs)
│   ├── InfrastructurePage.vue # Tabbed container (3 tabs)
│   ├── AIAgentsPage.vue      # Tabbed container (3 tabs)
│   ├── UpgradeRiskPage.vue   # Embedded in Operations
│   ├── ...                   # 25 more page components
│   └── SettingsPage.vue      # Extension configuration
├── components/
│   ├── PasturesAIDrawer.vue  # Global AI chat drawer
│   ├── ConfirmDialog.vue     # Reusable confirmation modal
│   └── BlastRadiusGraph.vue  # SVG dependency graph
└── nemoclaw/
    └── demoData.ts           # Stub NemoClaw demo data

​
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:
FunctionPurpose
virtualType()Declares a sidebar entry pointing to a route
basicType()Groups entries under a section
weightType()Controls display order (higher weight = higher in the list)

​
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.