feat(dashboard): support label/value object options for query variables

.codex/skills/cmt/SKILL.md

@@ -0,0 +1,228 @@
+---
+name: cmt
+description: When user uses /cmt slash command, commit current git changes using fast mode by default, or strict mode when requested. Fast mode reviews, shows summary, and waits for approval. Strict mode adds safe simplifications, full /cr review, and verification before approval.
+---
+
+# /cmt — Git Review & Commit
+
+> **Override:** This skill replaces the default system commit workflow when `/cmt` is invoked. Follow this skill exactly.
+
+When the user invokes `/cmt [mode]`, prepare a conventional commit for current git changes.
+
+| Command       | Mode     | Behavior                                                                           |
+| ------------- | -------- | ---------------------------------------------------------------------------------- |
+| `/cmt`        | `fast`   | Default. Inspect changes, run `git diff --check`, show summary, wait for approval. |
+| `/cmt fast`   | `fast`   | Same as default.                                                                   |
+| `/cmt strict` | `strict` | Simplify safely, run full review, verify, wait for approval.                       |
+
+Unknown modes: stop and list `fast` and `strict`.
+
+## Workflow
+
+### 1. Parse Mode And Check Status
+
+Default to `fast` when no mode is provided.
+
+```bash
+git branch --show-current
+git status --short --branch
+```
+
+Identify:
+
+- current branch
+- staged files
+- unstaged changes
+- untracked files
+- merge conflicts
+
+Stop if:
+
+- working tree is clean → report "Nothing to commit"
+- merge conflicts are present → report conflicts
+- only untracked files with unclear purpose → ask before staging
+
+Branch policy:
+
+- `main` or `master`: always require extra-clear confirmation before commit.
+- Feature branches (`feat*`): proceed through the selected mode, but still require explicit user approval.
+- Other branches: use judgment; ask briefly if unclear.
+
+If unrelated changes are mixed together, ask what to include before proceeding.
+
+### 2. Inspect Current Changes
+
+For staged changes:
+
+```bash
+git diff --staged
+```
+
+For unstaged changes:
+
+```bash
+git diff
+```
+
+Focus on:
+
+- correctness and regressions
+- accidental debug code, secrets, generated noise, or unrelated churn
+- whether the change should be split into separate commits
+
+If there are unstaged changes that belong to the same task, include them. If unrelated, ask before staging.
+
+### 3. Fast Mode
+
+Use this path for `/cmt` and `/cmt fast`.
+
+Run:
+
+```bash
+git diff --check
+```
+
+Then show the user:
+
+- changed file summary (files, insertions, deletions)
+- staged vs unstaged scope
+- any whitespace or conflict-marker issues from `git diff --check`
+- draft commit message
+- a note that full review and verification were skipped (suggest `/cmt strict` for thorough checks)
+
+Stop and ask the user whether to:
+
+- approve and commit
+- switch to strict mode
+- cancel
+
+Do not commit until the user explicitly approves.
+
+### 4. Strict Mode
+
+Use this path for `/cmt strict`.
+
+#### 4.1 Simplify Safely
+
+If the diff contains safe, obvious simplifications, make them:
+
+- remove dead code, redundant branches, duplicate variables, or unnecessary wrappers
+- simplify naming or small conditionals without changing behavior
+- tighten types or test mocks when needed for passing checks
+
+Do **not** perform broad refactors or unrelated cleanup. Keep simplification scoped to the current diff.
+
+**If any code was changed in this step, you MUST:**
+
+1. Show the user exactly what was simplified (file, before → after)
+2. Explain why each change is safe
+3. Re-run `git diff` so the user sees the final state
+4. Ask the user to approve the simplifications before continuing
+
+Do not proceed past this step until simplifications are approved or skipped.
+
+#### 4.2 Review
+
+Run a thorough review on the current uncommitted changes:
+
+- prefer project-local review rules when present (`.cursor/rules`, `AGENTS.md`, etc.)
+- check type safety, error handling, duplicated logic, null safety, layout impact, and i18n
+- classify findings as `blocker`, `warn`, or `info`
+
+Show the review result:
+
+- review summary
+- blocker/warn/info findings with concrete suggested fixes
+- simplifications already applied (if any)
+
+Then ask the user:
+
+- fix findings first
+- continue committing as-is
+- cancel
+
+Do not continue until the user explicitly chooses.
+
+If the user chooses to fix: make only requested fixes, re-review, and ask again.
+
+#### 4.3 Verify
+
+After user approval, run focused verification:
+
+```bash
+npm test -- --runInBand
+# or
+npm run build
+# or
+go test ./...
+```
+
+Prefer the smallest useful command. If verification fails, stop and ask whether to fix or continue. Do not commit after failed verification unless the user explicitly approves.
+
+### 5. Generate Commit Message
+
+Use [Conventional Commits](https://www.conventionalcommits.org/) format:
+
+```text
+<type>(<scope>): <short description>
+
+[optional body]
+```
+
+Types: `feat`, `fix`, `docs`, `style`, `refactor`, `test`, `chore`.
+
+Keep the first line under 72 characters. Add a body only when the change needs explanation.
+
+### 6. Commit
+
+Stage only the related files by name. Never use `git add -A` or `git add .`.
+
+Use HEREDOC to avoid shell escaping issues:
+
+```bash
+git add <file1> <file2> ...
+git commit -m "$(cat <<'EOF'
+<type>(<scope>): <short description>
+
+[optional body]
+EOF
+)"
+```
+
+Commit only after:
+
+- the selected mode has completed
+- results were shown to the user
+- the user explicitly approved
+
+After commit, report:
+
+- commit hash and message
+- mode used
+- checks performed
+- skipped checks (if any)
+- known risks the user accepted (if any)
+
+## Edge Cases
+
+| Situation                       | Action                                                          |
+| ------------------------------- | --------------------------------------------------------------- |
+| Missing mode                    | Use `fast`                                                      |
+| Unknown mode                    | Stop and list `fast` and `strict`                               |
+| Clean working tree              | Report nothing to commit                                        |
+| Merge conflicts                 | Do not commit; report conflicts                                 |
+| Only unclear untracked files    | Ask before staging                                              |
+| Mixed unrelated changes         | Ask what to include                                             |
+| Strict review finds blockers    | Recommend fixing first; commit only if user explicitly approves |
+| Strict verification fails       | Recommend fixing first; commit only if user explicitly approves |
+| Fast mode on risky-looking diff | Show risk and suggest switching to `strict`                     |
+| Simplification changes code     | Show before/after, get approval before continuing               |
+
+## Summary
+
+1. Parse mode: default `fast`, or `strict`.
+2. Inspect branch and current changes.
+3. In `fast`: lightweight checks → show summary → wait for approval.
+4. In `strict`: simplify (show changes, get approval) → review → ask user → verify → wait for approval.
+5. Generate conventional commit message.
+6. Commit only after explicit user approval.

plugins/PlusPlaceholder.tsx

@@ -117,3 +117,6 @@ export {
   getProject,
   getTopic,
 };
+
+// 开源版没有 Plus 变量扩展，公共注册表仍然有效。
+export const dashboardVariablePlugins: Record<string, import('../src/pages/dashboard/Variables/pluginTypes').DashboardVariablePlugin> = {};

src/pages/dashboard/Editor/config.tsx

@@ -219,6 +219,7 @@ export const defaultCustomValuesMap = {
     valueField: 'Value',
     scheme: 'Blues',
   },
+  iframe: {},
   barchart: {
     calc: 'lastNotNull',
     valueField: 'Value',
@@ -234,6 +235,9 @@ export const defaultOptionsValuesMap = {
   hexbin: defaultOptionsValues,
   barGauge: defaultOptionsValues,
   text: defaultOptionsValues,
+  heatmap: defaultOptionsValues,
+  iframe: defaultOptionsValues,
+  barchart: defaultOptionsValues,
   gauge: {
     ...defaultOptionsValues,
     thresholds: {

src/pages/dashboard/README.md

@@ -8,6 +8,7 @@
 src/pages/dashboard/
 ├── CHANGELOG.md                     # 版本变更记录（含各版本无法兼容的更新说明）
 ├── LLMs.txt
+├── VARIABLES.md                     # 变量子系统架构（含架构图与关键约束）
 ├── config.tsx                       # 仪表盘模块配置
 ├── external-modules.d.ts
 ├── globalState.ts                   # 仪表盘全局状态
@@ -40,7 +41,7 @@ src/pages/dashboard/
 │   └── utils/                       # 渲染工具（valueFormatter 等）
 ├── Share/                           # 分享
 ├── VariableConfig/                  # 变量配置（v3.2 起废弃，由 Variables 取代）
-├── Variables/                       # 变量（v3.2 重构）
+├── Variables/                       # 变量（v3.2 重构），架构见 VARIABLES.md
 ├── hooks/                           # 模块内 Hook
 ├── locale/                          # 国际化资源
 ├── test/fixtures/                   # 仪表盘专属测试数据
@@ -55,6 +56,12 @@ src/pages/dashboard/
 
 `dashboard.version` 是唯一的持久化 schema 版本。仪表盘及其全部面板结构迁移均由该版本驱动，面板不单独保存版本字段。
 
+## 运行时状态与多实例限制
+
+`globalState.ts` 基于 `react-hooks-global-state` 创建模块级单例。它保存的并不只是本次变量联动的 `variableExecution`，还包括 `dashboardMeta`、`variablesWithOptions`、`range`、`series`、表格字段和图例编辑状态等。因此，同一个 React 树内并存多个仪表盘运行时实例目前**不受支持**：后挂载实例会覆盖前一个实例的变量、时间范围、元数据和编辑辅助状态，面板查询也可能使用错误的变量值。
+
+当前路由使用方式是一页只挂载一个仪表盘实例。变量执行状态通过会话 ID 防止已卸载实例的异步链回调覆盖新页面的暂停/恢复状态，但这不是多实例隔离方案。若产品需要在同一 React 树内并列展示多个仪表盘，应将上述全局状态迁移为以仪表盘实例为边界的 `DashboardRuntimeContext`，并让变量、面板渲染与编辑器共享该 Context。
+
 ## 测试
 
 - **栈**：Jest + ts-jest；组件/集成用例用 `/** @jest-environment jsdom */` + @testing-library/react。

src/pages/dashboard/Renderer/Renderer/Main.test.tsx

@@ -0,0 +1,77 @@
+/** @jest-environment jsdom */
+
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import moment from 'moment';
+
+import Main from './Main';
+import type { DashboardQueryState } from '../datasource/types';
+import type { IPanel } from '../../types';
+
+jest.mock('react-i18next', () => ({ useTranslation: () => ({ t: (value: string) => value }) }));
+jest.mock('@/components/TimeRangePicker', () => ({ describeTimeRange: () => '' }));
+jest.mock('@/pages/dashboard/Variables/utils/replaceTemplateVariables', () => ({ __esModule: true, default: (value: string) => value }));
+jest.mock('../../Editor/Components/Markdown', () => ({ __esModule: true, default: ({ content }: { content: string }) => <div>{content}</div> }));
+jest.mock('../Inspect', () => () => null);
+jest.mock('../components/CloneIcon', () => () => null);
+jest.mock('../components/PanelEmpty', () => () => <div>empty</div>);
+jest.mock('./TimeSeriesNG', () => () => null);
+jest.mock('./Stat', () => () => null);
+jest.mock('./Table', () => () => null);
+jest.mock('./TableNG', () => () => null);
+jest.mock('./Pie', () => () => null);
+jest.mock('./Hexbin', () => () => null);
+jest.mock('./BarGauge', () => () => null);
+jest.mock('./Gauge', () => () => null);
+jest.mock('./Iframe', () => () => <div data-testid='iframe-body' />);
+jest.mock('./Heatmap', () => () => null);
+jest.mock('./BarChart', () => () => null);
+
+const time = {
+  start: moment('2026-09-08T00:00:00.000Z'),
+  end: moment('2026-09-08T01:00:00.000Z'),
+};
+
+const queryResult: DashboardQueryState = {
+  query: [],
+  series: [],
+  errorsByRef: {},
+  error: '',
+  loading: false,
+  loaded: false,
+  range: time,
+  revision: 0,
+};
+
+test('text panel renders its body before the query state is loaded', () => {
+  render(
+    <Main
+      id='text-panel'
+      panelWidth={400}
+      values={
+        {
+          id: 'text-panel',
+          type: 'text',
+          name: 'Panel Title',
+          description: '',
+          layout: { h: 4, w: 12, x: 0, y: 0, i: 'text-panel' },
+          targets: [{ refId: 'A' }],
+          custom: { content: '$project' },
+          options: {},
+          overrides: [],
+        } satisfies IPanel
+      }
+      annotations={[]}
+      controllersVisible={false}
+      queryResult={queryResult}
+      containerEleRef={{ current: null }}
+      time={time}
+      inspect={false}
+      setInspect={jest.fn()}
+      setViewModalVisible={jest.fn()}
+    />,
+  );
+
+  expect(screen.getByText('$project')).toBeInTheDocument();
+  expect(document.querySelector('.renderer-body')).toBeInTheDocument();
+});

src/pages/dashboard/Renderer/Renderer/Main.tsx

@@ -423,7 +423,7 @@ function index(
             </div>
           )}
         </div>
-        {loaded && (
+        {(loaded || values.type === 'text' || values.type === 'iframe') && (
           <div className='renderer-body' style={{ height: values.name ? `calc(100% - 34px)` : '100%' }}>
             {_.isEmpty(series) && values.type !== 'text' && values.type !== 'iframe' ? (
               <PanelEmpty values={values} bodyWrapRef={bodyWrapRef} />