@grafana/create-plugin 6.2.1-canary.2315.19531209952.0 → 6.3.0-canary.2314.19530439621.0

package/dist/codemods/migrations/manager.js

@@ -20,9 +20,7 @@ async function runMigrations(migrations, options = {}) {
     const context = await runCodemod(migration, options.codemodOptions);
     const shouldCommit = options.commitEachMigration && context.hasChanges();
     if (shouldCommit) {
-      await gitCommitNoVerify(`chore: run create-plugin migration - ${migration.name}
-
-${migration.description}`);
+      await gitCommitNoVerify(`chore: run create-plugin migration - ${migration.name} (${migration.scriptPath})`);
     }
   }
   setRootConfig({ version: CURRENT_APP_VERSION });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@grafana/create-plugin",
-  "version": "6.2.1-canary.2315.19531209952.0",
+  "version": "6.3.0-canary.2314.19530439621.0",
   "repository": {
     "directory": "packages/create-plugin",
     "url": "https://github.com/grafana/plugin-tools"
@@ -61,5 +61,5 @@
   "engines": {
     "node": ">=20"
   },
-  "gitHead": "28f3c34275d558f7a2ad1878a5777957db7f7a70"
+  "gitHead": "734d10f70a8f42beb0b48ff62a9ebcad7923cc1f"
 }

package/src/codemods/migrations/manager.ts

@@ -38,8 +38,7 @@ export async function runMigrations(migrations: Migration[], options: RunMigrati
     const shouldCommit = options.commitEachMigration && context.hasChanges();
 
     if (shouldCommit) {
-      // for conventional commits we need to add a newline between the title and the description
-      await gitCommitNoVerify(`chore: run create-plugin migration - ${migration.name}\n\n${migration.description}`);
+      await gitCommitNoVerify(`chore: run create-plugin migration - ${migration.name} (${migration.scriptPath})`);
     }
   }
 

package/templates/panel/.config/AGENTS/fundamentals.md

@@ -0,0 +1,82 @@
+---
+name: panel-plugin-agent
+description: Develop Grafana panel plugins
+---
+
+You are an expert Grafana panel plugin developer for this project.
+
+## Your role
+
+- You are fluent in TypeScript and React
+- You know how to use Grafana dashboards
+
+## Project knowledge
+
+This repository contains a **Grafana panel plugin**, providing a custom visualization for Grafana dashboards.
+Panel plugins are used to:
+
+- Display data from Grafana data sources in custom ways
+- Add interactive behavior (drill-downs, navigation, etc.)
+- Visualize or control external systems (IoT, integrations, custom controls)
+
+### Plugin anatomy
+
+A typical panel plugin includes:
+
+**plugin.json**
+
+- Declares plugin ID, type (`panel`), name, version
+- Loaded by Grafana at startup
+
+**Main module (`src/module.ts`)**
+
+- Exports: `new PanelPlugin(PanelComponent)`
+- Registers panel options, migrations, defaults, ui extensions
+
+**Panel component (`src/components/Panel.tsx`)**
+
+- React component receiving: `data`, `timeRange`, `width`, `height`, `options`
+- Renders visualization using Grafana data frames and field configs
+
+### Repository layout
+
+- `plugin.json` — Panel plugin manifest
+- `src/module.ts` — Main plugin entry
+- `src/components/` — Panel React components
+- `src/types.ts` — Option and model types
+- `tests/` — E2E tests (if present)
+- `provisioning/` — Local development provisioning
+- `README.md` — Human documentation
+
+## Coding guidelines
+
+- Use **TypeScript** and **functional React components**
+- Use **@grafana/ui**, **@grafana/data**, **@grafana/runtime**
+- Respect `width` and `height`; keep layout responsive
+- Avoid unnecessary dependencies; ensure Grafana compatibility
+- Use useTheme2() from @grafana/ui for visual tokens
+- Avoid to hardcode colors, spacing, padding, or font sizes
+- Follow existing file structure
+- Keep code typed and predictable
+
+## Boundaries
+
+You must **not**:
+
+- Change plugin IDs or plugin type in `plugin.json`
+- Modify anything under `.config/*`
+- Add a backend — panel plugins are **frontend only**
+- Remove or change existing options without a migration handler
+- Break public APIs (options, field configs, panel props)
+- Store or use credentials.
+
+You **should**:
+
+- Keep the plugin backward compatible
+- Preserve the existing options schema unless adding a migration handler
+- Mirror patterns from Grafana’s official panel plugin examples
+- Follow idiomatic React + TypeScript patterns used in official Grafana examples
+
+## Instructions for specific tasks
+
+- [Add panel options](./tasks/add-panel-options.md)

package/templates/panel/.config/AGENTS/tasks/add-panel-options.md

@@ -0,0 +1,130 @@
+# Adding a New Panel Option
+
+Always complete **all three steps**:
+
+### **1. Extend the options type**
+
+File: `src/types.ts`
+
+```ts
+export interface SimpleOptions {
+  // existing...
+  myOptionName: MyOptionType;
+}
+```
+
+* Property name must match the builder `path`.
+* Type must match expected editor output.
+
+---
+
+### **2. Register the option in `setPanelOptions`**
+
+File: `src/module.ts` inside `setPanelOptions((builder) => { ... })`
+
+Use the correct builder method:
+
+| Type               | Builder              |
+| ------------------ | -------------------- |
+| boolean            | `addBooleanSwitch`   |
+| number             | `addNumberInput`     |
+| string             | `addTextInput`       |
+| select             | `addSelect`          |
+| radio              | `addRadio`           |
+| radio group        | `addRadio`           |
+| slider             | `addSliderInput`     |
+| color picker       | `addColorPicker`     |
+| unit picker        | `addUnitPicker`      |
+| field namer picker | `addFieldNamePicker` |
+
+Template:
+
+```ts
+builder.addXxx({
+  path: 'myOptionName',   // must match type property
+  name: 'My option',
+  defaultValue: <default>,
+  description: '',
+  settings: { /* optional */ },
+  // Optional visibility rule:
+  // showIf: (opts) => opts.someOtherOption,
+});
+```
+
+Rules:
+
+* Every option **must** have a `defaultValue`.
+* Put numeric constraints in `settings` (`min`, `max`, `step`).
+* Use `showIf` for conditional display.
+
+---
+
+### **3. Use the option in the panel component**
+
+File: `src/Panel.tsx` (or equivalent)
+
+```tsx
+export const Panel = ({ options }) => {
+  const { myOptionName } = options;
+  // apply it in rendering/logic
+};
+```
+
+No option may remain unused.
+
+---
+
+# Quick Editor Recipes
+
+### **Boolean**
+
+```ts
+.addBooleanSwitch({ path: 'flag', name: 'Flag', defaultValue: false })
+```
+
+### **Number**
+
+```ts
+.addNumberInput({
+  path: 'max',
+  name: 'Max value',
+  defaultValue: 10,
+  settings: { min: 1, max: 100, step: 1 },
+})
+```
+
+### **String**
+
+```ts
+.addTextInput({ path: 'label', name: 'Label', defaultValue: '' })
+```
+
+### **Select**
+
+```ts
+.addSelect({
+  path: 'mode',
+  name: 'Mode',
+  defaultValue: 'auto',
+  settings: { options: [
+    { value: 'a', label: 'A' },
+    { value: 'b', label: 'B' },
+  ]},
+})
+```
+
+### **Radio**
+
+```ts
+.addRadio({
+  path: 'size',
+  name: 'Size',
+  defaultValue: 'md',
+  settings: { options: [
+    { value: 'sm', label: 'Small' },
+    { value: 'md', label: 'Medium' },
+    { value: 'lg', label: 'Large' },
+  ]},
+  showIf: (o) => o.showSize,
+})
+```

package/templates/panel/AGENTS.md

@@ -0,0 +1,3 @@
+# Project overview
+
+This repository contains a **Grafana panel plugin**. Apply the [plugin fundamentals](./config/fundamentals.md) to all code.