feat: extend agent-driven map workbench

2026-07-20 19:57:35 +08:00
parent 86e9b08235
commit 7fbd8a5618
63 changed files with 4506 additions and 457 deletions
@@ -0,0 +1,237 @@
+import { expect, test, type Page } from "playwright/test";
+
+test("frontend actions replace SCADA analysis results and remain legible at 375px", async ({ page }) => {
+  const receipts: Array<Record<string, unknown>> = [];
+  await mockAgentActions(page, receipts);
+  await page.goto("/", { waitUntil: "domcontentloaded" });
+  await page.waitForFunction(() => Boolean(
+    window.__waterNetworkMap?.getSource("agent-scada-analysis")
+  ));
+  await expect(
+    page.getByRole("button", { name: "选择 Agent 模型" }).filter({ visible: true }).first()
+  ).toContainText("测试模型");
+
+  await page.evaluate(() => {
+    const map = window.__waterNetworkMap;
+    [
+      "agent-scada-analysis-label",
+      "agent-scada-analysis-indicator",
+      "agent-scada-analysis-level",
+      "agent-scada-analysis-casing"
+    ].forEach((id) => {
+      if (map?.getLayer(id)) map.removeLayer(id);
+    });
+  });
+
+  const prompt = page.getByPlaceholder(/输入调度问题/).filter({ visible: true }).first();
+  await prompt.fill("将 MP01 标为高、MP02 标为低并显示编号");
+  await page.getByRole("button", { name: "发送 Agent 指令" }).filter({ visible: true }).first().click();
+
+  await expect(page.getByText("已渲染 1 个，高 0、中 0、低 1。")).toBeVisible();
+  await page.waitForFunction(() => {
+    const source = window.__waterNetworkMap?.getSource("agent-scada-analysis") as unknown as {
+      _data?: { features?: Array<{ properties?: Record<string, unknown> }> };
+    };
+    const features = source?._data?.features ?? [];
+    return features.length === 1 && features[0].properties?.sensor_id === "MP02";
+  });
+  await page.waitForFunction(() => {
+    const map = window.__waterNetworkMap;
+    return Boolean(
+      map?.isSourceLoaded("agent-scada-analysis") &&
+      map.queryRenderedFeatures(undefined, { layers: ["agent-scada-analysis-level"] }).length > 0 &&
+      map.queryRenderedFeatures(undefined, { layers: ["agent-scada-analysis-label"] }).length > 0
+    );
+  });
+  const rendered = await page.evaluate(() => {
+    const map = window.__waterNetworkMap;
+    const source = map?.getSource("agent-scada-analysis") as unknown as {
+      _data?: { features?: Array<{ properties?: Record<string, unknown> }> };
+    };
+    const feature = source?._data?.features?.[0];
+    const labelLayer = map?.getLayer("agent-scada-analysis-label");
+    const levelLayer = map?.getLayer("agent-scada-analysis-level");
+    const indicatorLayer = map?.getLayer("agent-scada-analysis-indicator");
+    return {
+      label: feature?.properties?.analysis_label,
+      labelLayer: labelLayer?.type,
+      labelSize: map?.getLayoutProperty("agent-scada-analysis-label", "text-size"),
+      labelFont: map?.getLayoutProperty("agent-scada-analysis-label", "text-font"),
+      level: feature?.properties?.analysis_level,
+      levelLayer: levelLayer?.type,
+      levelColors: map?.getPaintProperty("agent-scada-analysis-level", "circle-stroke-color"),
+      indicatorLayer: indicatorLayer?.type
+    };
+  });
+  expect(rendered).toEqual({
+    label: "MP02 · 低",
+    labelLayer: "symbol",
+    labelSize: 15,
+    labelFont: ["Noto Sans Regular"],
+    level: "low",
+    levelLayer: "circle",
+    levelColors: [
+      "match",
+      ["get", "analysis_level"],
+      "high", "#DC2626",
+      "medium", "#F59E0B",
+      "low", "#16A34A",
+      "#7C3AED"
+    ],
+    indicatorLayer: "circle"
+  });
+
+  await expect.poll(() => receipts.length).toBe(2);
+  expect(receipts).toEqual(expect.arrayContaining([
+    expect.objectContaining({ status: "failed", error: expect.objectContaining({ code: "ACTION_SUPERSEDED" }) }),
+    expect.objectContaining({
+      status: "succeeded",
+      output: expect.objectContaining({ rendered_ids: ["MP02"], fitted: true })
+    })
+  ]));
+
+  await page.setViewportSize({ width: 375, height: 812 });
+  await page.evaluate(() => window.__waterNetworkMap?.resize());
+  await expect(page.getByText("已渲染 1 个，高 0、中 0、低 1。")).toBeVisible();
+  expect(await page.evaluate(() => {
+    const source = window.__waterNetworkMap?.getSource("agent-scada-analysis") as unknown as {
+      _data?: { features?: Array<{ properties?: Record<string, unknown> }> };
+    };
+    return {
+      label: source?._data?.features?.[0]?.properties?.analysis_label,
+      viewportWidth: document.documentElement.clientWidth
+    };
+  })).toEqual({ label: "MP02 · 低", viewportWidth: 375 });
+
+  await page.setViewportSize({ width: 1440, height: 900 });
+  await page.getByRole("button", { name: "新建 Agent 对话" }).filter({ visible: true }).click();
+  await page.waitForFunction(() => {
+    const source = window.__waterNetworkMap?.getSource("agent-scada-analysis") as unknown as {
+      _data?: { features?: unknown[] };
+    };
+    return source?._data?.features?.length === 0;
+  });
+
+  const nextPrompt = page.getByPlaceholder(/输入调度问题/).filter({ visible: true }).first();
+  await nextPrompt.fill("新一组分析：将 MP01 标为高、MP02 标为低并显示编号");
+  await page.getByRole("button", { name: "发送 Agent 指令" }).filter({ visible: true }).first().click();
+  await page.waitForFunction(() => {
+    const source = window.__waterNetworkMap?.getSource("agent-scada-analysis") as unknown as {
+      _data?: { features?: Array<{ properties?: Record<string, unknown> }> };
+    };
+    const features = source?._data?.features ?? [];
+    return features.length === 1 && features[0].properties?.analysis_label === "MP02 · 低";
+  });
+  await page.waitForTimeout(250);
+  expect(await page.evaluate(() => {
+    const source = window.__waterNetworkMap?.getSource("agent-scada-analysis") as unknown as {
+      _data?: { features?: Array<{ properties?: Record<string, unknown> }> };
+    };
+    return source?._data?.features?.map((feature) => feature.properties?.analysis_label);
+  })).toEqual(["MP02 · 低"]);
+  await expect.poll(() => receipts.length).toBe(4);
+});
+
+async function mockAgentActions(page: Page, receipts: Array<Record<string, unknown>>) {
+  let streamRequestCount = 0;
+
+  await page.route("**/api/map-features", async (route) => {
+    const body = route.request().postDataJSON() as { featureIds?: string[] };
+    const sensorId = body.featureIds?.[0] ?? "";
+    if (sensorId === "MP01") await new Promise((resolve) => setTimeout(resolve, 150));
+    await route.fulfill({
+      json: {
+        type: "FeatureCollection",
+        features: [{
+          type: "Feature",
+          geometry: { type: "Point", coordinates: sensorId === "MP01" ? [120.7, 28] : [120.72, 28.02] },
+          properties: { sensor_id: sensorId }
+        }]
+      }
+    });
+  });
+
+  await page.route("**/api/v1/agent/chat/**", async (route) => {
+    const url = new URL(route.request().url());
+    const path = url.pathname;
+    if (/\/frontend-actions\/[^/]+\/result$/.test(path)) {
+      receipts.push(route.request().postDataJSON() as Record<string, unknown>);
+      await route.fulfill({ json: { ok: true } });
+      return;
+    }
+    if (path.endsWith("/frontend-action-registry")) {
+      await route.fulfill({ json: {
+        schema_version: "frontend-action-registry@1",
+        actions: [
+          { id: "render_scada_analysis", version: "frontend-action@1" },
+          { id: "clear_scada_analysis", version: "frontend-action@1" }
+        ]
+      } });
+      return;
+    }
+    if (path.endsWith("/models")) {
+      await route.fulfill({ json: {
+        default_model: "test/model",
+        models: [{ id: "test/model", label: "测试模型", description: "SCADA 动作测试", icon: "bolt" }]
+      } });
+      return;
+    }
+    if (path.endsWith("/sessions")) {
+      await route.fulfill({ json: { sessions: [] } });
+      return;
+    }
+    if (path.endsWith("/ui-registry")) {
+      await route.fulfill({ json: { schema_version: "agent-ui-registry@1", components: [], actions: [] } });
+      return;
+    }
+    if (path.endsWith("/stream") && route.request().method() === "POST") {
+      streamRequestCount += 1;
+      const now = Date.now();
+      const sessionId = `scada-session-${streamRequestCount}`;
+      const chunks = [
+        { type: "start", messageId: `assistant-scada-action-${streamRequestCount}` },
+        frontendActionChunk(`action-${streamRequestCount}-first`, `call-${streamRequestCount}-first`, sessionId, "MP01", "high", now),
+        frontendActionChunk(`action-${streamRequestCount}-second`, `call-${streamRequestCount}-second`, sessionId, "MP02", "low", now),
+        { type: "text-start", id: "answer" },
+        { type: "text-delta", id: "answer", delta: "已更新地图结果。" },
+        { type: "text-end", id: "answer" },
+        { type: "finish", finishReason: "stop" }
+      ];
+      await route.fulfill({
+        headers: {
+          "Cache-Control": "no-cache",
+          "Content-Type": "text/event-stream",
+          "X-Vercel-AI-UI-Message-Stream": "v1"
+        },
+        body: chunks.map((chunk) => `data: ${JSON.stringify(chunk)}\n\n`).join("")
+      });
+      return;
+    }
+    await route.fulfill({ json: {} });
+  });
+}
+
+function frontendActionChunk(
+  actionId: string,
+  toolCallId: string,
+  sessionId: string,
+  sensorId: string,
+  level: "high" | "low",
+  now: number
+) {
+  return {
+    type: "data-frontend_action",
+    data: {
+      version: "frontend-action@1",
+      actionId,
+      toolCallId,
+      sessionId,
+      session_id: sessionId,
+      name: "render_scada_analysis",
+      params: { items: [{ sensor_id: sensorId, level }] },
+      issuedAt: now,
+      expiresAt: now + 15_000
+    },
+    transient: true
+  };
+}