create-windy 0.4.1 → 0.5.0

package/template/apps/web/src/pages/system/components/ai-runtime/AiRuntimeTokenByModelChart.vue

@@ -0,0 +1,101 @@
+<script setup lang="ts">
+import { Chart } from "@antv/g2";
+import {
+  computed,
+  onBeforeUnmount,
+  onMounted,
+  useTemplateRef,
+  watch,
+} from "vue";
+import type { AiRuntimeModelUsage } from "@/services/ai-runtime-api";
+import { formatTokenCount } from "../../ai-runtime-presenter";
+
+const props = defineProps<{ models: readonly AiRuntimeModelUsage[] }>();
+const container = useTemplateRef<HTMLDivElement>("container");
+const data = computed(() =>
+  props.models.map((model) => ({
+    model: model.model,
+    totalTokens: model.totalTokens,
+    inputTokens: model.inputTokens,
+    outputTokens: model.outputTokens,
+    cachedInputTokens: model.cachedInputTokens,
+    reasoningTokens: model.reasoningTokens,
+  })),
+);
+const hasData = computed(() =>
+  data.value.some(({ totalTokens }) => (totalTokens ?? 0) > 0),
+);
+let chart: Chart | undefined;
+
+onMounted(renderChart);
+watch(data, renderChart);
+onBeforeUnmount(destroyChart);
+
+async function renderChart() {
+  destroyChart();
+  if (!container.value || !hasData.value) return;
+  chart = new Chart({ container: container.value, autoFit: true, height: 300 });
+  chart.options({
+    type: "interval",
+    data: data.value,
+    encode: { x: "model", y: "totalTokens" },
+    style: { fill: "#0f766e" },
+    axis: {
+      x: { title: false, labelAutoRotate: true },
+      y: { title: "Token", labelFormatter: formatTokenCount },
+    },
+    tooltip: {
+      items: [
+        {
+          field: "totalTokens",
+          name: "总 Token",
+          valueFormatter: formatTokenCount,
+        },
+        {
+          field: "inputTokens",
+          name: "输入",
+          valueFormatter: formatTokenCount,
+        },
+        {
+          field: "outputTokens",
+          name: "输出",
+          valueFormatter: formatTokenCount,
+        },
+        {
+          field: "cachedInputTokens",
+          name: "缓存输入（输入子集）",
+          valueFormatter: formatTokenCount,
+        },
+        {
+          field: "reasoningTokens",
+          name: "推理（输出子集）",
+          valueFormatter: formatTokenCount,
+        },
+      ],
+    },
+    animate: false,
+  });
+  await chart.render();
+}
+
+function destroyChart() {
+  chart?.destroy();
+  chart = undefined;
+  container.value?.replaceChildren();
+}
+</script>
+
+<template>
+  <div
+    v-if="hasData"
+    ref="container"
+    class="h-[300px] w-full"
+    aria-label="按模型统计的总 Token 柱状图"
+  />
+  <p
+    v-else
+    class="grid h-[300px] place-items-center text-sm text-muted-foreground"
+  >
+    当前范围内没有已上报的模型 Token 数据。
+  </p>
+</template>

package/template/apps/web/src/pages/system/composables/useAiRuntimeReport.ts

@@ -0,0 +1,185 @@
+import { onBeforeUnmount, onMounted, shallowRef, watch } from "vue";
+import {
+  getAiRuntimeRun,
+  getAiRuntimeSummary,
+  listAiRuntimeActors,
+  listAiRuntimeRuns,
+  type AiRuntimeActor,
+  type AiRuntimePage,
+  type AiRuntimeRange,
+  type AiRuntimeRunDetail,
+  type AiRuntimeRunItem,
+  type AiRuntimeSummary,
+} from "@/services/ai-runtime-api";
+
+const REFRESH_INTERVAL_MS = 60_000;
+
+export function useAiRuntimeReport() {
+  const range = shallowRef<AiRuntimeRange>("day");
+  const actorHandle = shallowRef<string>();
+  const page = shallowRef(1);
+  const pageSize = shallowRef(20);
+  const summary = shallowRef<AiRuntimeSummary>();
+  const runs = shallowRef<AiRuntimePage<AiRuntimeRunItem>>();
+  const actors = shallowRef<readonly AiRuntimeActor[]>([]);
+  const actorQuery = shallowRef("");
+  const detail = shallowRef<AiRuntimeRunDetail>();
+  const detailOpen = shallowRef(false);
+  const loading = shallowRef(false);
+  const detailLoading = shallowRef(false);
+  const error = shallowRef("");
+  const detailError = shallowRef("");
+  let requestRevision = 0;
+  let detailRequestRevision = 0;
+  let actorRequestRevision = 0;
+  let detailRequest: AbortController | undefined;
+  let timer: ReturnType<typeof setInterval> | undefined;
+
+  onMounted(async () => {
+    await Promise.all([loadActors(), reload()]);
+    timer = setInterval(() => void reload(), REFRESH_INTERVAL_MS);
+  });
+  onBeforeUnmount(() => {
+    if (timer) clearInterval(timer);
+    actorRequestRevision += 1;
+    cancelDetailRequest();
+  });
+  watch(detailOpen, (open) => {
+    if (!open) cancelDetailRequest();
+  });
+
+  async function reload() {
+    const revision = ++requestRevision;
+    loading.value = true;
+    error.value = "";
+    const query = { range: range.value, actorHandle: actorHandle.value };
+    try {
+      const [nextSummary, nextRuns] = await Promise.all([
+        getAiRuntimeSummary(query),
+        listAiRuntimeRuns({
+          ...query,
+          page: page.value,
+          pageSize: pageSize.value,
+        }),
+      ]);
+      if (revision !== requestRevision) return;
+      summary.value = nextSummary;
+      runs.value = nextRuns;
+    } catch (currentError) {
+      if (revision === requestRevision) error.value = message(currentError);
+    } finally {
+      if (revision === requestRevision) loading.value = false;
+    }
+  }
+
+  async function loadActors(query = actorQuery.value) {
+    const revision = ++actorRequestRevision;
+    try {
+      const result = await listAiRuntimeActors(query, 1, 100);
+      if (revision === actorRequestRevision) actors.value = result.items;
+    } catch {
+      if (revision === actorRequestRevision) actors.value = [];
+    }
+  }
+
+  async function searchActors(query: string) {
+    actorQuery.value = query;
+    await loadActors(query);
+  }
+
+  function setRange(value: AiRuntimeRange) {
+    if (range.value === value) return;
+    range.value = value;
+    page.value = 1;
+    void reload();
+  }
+
+  function setActor(value: string | undefined) {
+    if (actorHandle.value === value) return;
+    actorHandle.value = value;
+    page.value = 1;
+    void reload();
+  }
+
+  function setPage(value: number) {
+    if (page.value === value) return;
+    page.value = value;
+    void reload();
+  }
+
+  function setPageSize(value: number) {
+    if (pageSize.value === value) return;
+    pageSize.value = value;
+    page.value = 1;
+    void reload();
+  }
+
+  async function openRun(runId: string) {
+    const revision = ++detailRequestRevision;
+    detailRequest?.abort();
+    const controller = new AbortController();
+    detailRequest = controller;
+    detail.value = undefined;
+    detailError.value = "";
+    detailOpen.value = true;
+    detailLoading.value = true;
+    try {
+      const result = await getAiRuntimeRun(runId, controller.signal);
+      if (revision === detailRequestRevision && !controller.signal.aborted) {
+        detail.value = result;
+      }
+    } catch (currentError) {
+      if (
+        revision === detailRequestRevision &&
+        !controller.signal.aborted &&
+        !isAbortError(currentError)
+      ) {
+        detailError.value = message(currentError);
+      }
+    } finally {
+      if (revision === detailRequestRevision) {
+        detailLoading.value = false;
+        detailRequest = undefined;
+      }
+    }
+  }
+
+  function cancelDetailRequest() {
+    detailRequestRevision += 1;
+    detailRequest?.abort();
+    detailRequest = undefined;
+    detailLoading.value = false;
+  }
+
+  return {
+    range,
+    actorHandle,
+    page,
+    pageSize,
+    summary,
+    runs,
+    actors,
+    actorQuery,
+    detail,
+    detailOpen,
+    loading,
+    detailLoading,
+    error,
+    detailError,
+    reload,
+    searchActors,
+    setRange,
+    setActor,
+    setPage,
+    setPageSize,
+    openRun,
+  };
+}
+
+function message(error: unknown) {
+  return error instanceof Error ? error.message : String(error);
+}
+
+function isAbortError(error: unknown) {
+  return error instanceof Error && error.name === "AbortError";
+}

package/template/apps/web/src/pages/system/composables/useAiRuntimeReport.webtest.ts

@@ -0,0 +1,158 @@
+import { flushPromises, mount } from "@vue/test-utils";
+import { defineComponent, h } from "vue";
+import { beforeEach, describe, expect, test, vi } from "vitest";
+
+const mocks = vi.hoisted(() => ({
+  getAiRuntimeRun: vi.fn(),
+  getAiRuntimeSummary: vi.fn(),
+  listAiRuntimeActors: vi.fn(),
+  listAiRuntimeRuns: vi.fn(),
+}));
+vi.mock("@/services/ai-runtime-api", () => mocks);
+
+import { useAiRuntimeReport } from "./useAiRuntimeReport";
+
+describe("AI Runtime 报表请求协调", () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+    mocks.getAiRuntimeSummary.mockResolvedValue({});
+    mocks.listAiRuntimeActors.mockResolvedValue({
+      items: [],
+      total: 0,
+      page: 1,
+      pageSize: 100,
+    });
+    mocks.listAiRuntimeRuns.mockResolvedValue({
+      items: [],
+      total: 0,
+      page: 1,
+      pageSize: 20,
+    });
+  });
+
+  test("连续打开详情时取消旧请求且旧响应不能覆盖新 Run", async () => {
+    const first = deferred<{ runId: string }>();
+    const second = deferred<{ runId: string }>();
+    const signals: AbortSignal[] = [];
+    mocks.getAiRuntimeRun.mockImplementation(
+      (runId: string, signal: AbortSignal) => {
+        signals.push(signal);
+        return runId === "run_first" ? first.promise : second.promise;
+      },
+    );
+    let report!: ReturnType<typeof useAiRuntimeReport>;
+    const wrapper = mount(
+      defineComponent({
+        setup() {
+          report = useAiRuntimeReport();
+          return () => h("div");
+        },
+      }),
+    );
+    await flushPromises();
+
+    const firstRequest = report.openRun("run_first");
+    const secondRequest = report.openRun("run_second");
+    second.resolve({ runId: "run_second" });
+    await secondRequest;
+
+    expect(signals[0]?.aborted).toBe(true);
+    expect(signals[1]?.aborted).toBe(false);
+    expect(report.detail.value?.runId).toBe("run_second");
+
+    first.resolve({ runId: "run_first" });
+    await firstRequest;
+    expect(report.detail.value?.runId).toBe("run_second");
+    wrapper.unmount();
+  });
+
+  test("连续搜索操作者时旧响应不能覆盖新查询", async () => {
+    const first = deferred<{
+      items: Array<{ actorHandle: string; label: string }>;
+    }>();
+    const second = deferred<{
+      items: Array<{ actorHandle: string; label: string }>;
+    }>();
+    mocks.listAiRuntimeActors.mockImplementation((query: string) => {
+      if (query === "first") return first.promise;
+      if (query === "second") return second.promise;
+      return Promise.resolve({ items: [], total: 0, page: 1, pageSize: 100 });
+    });
+    let report!: ReturnType<typeof useAiRuntimeReport>;
+    const wrapper = mount(
+      defineComponent({
+        setup() {
+          report = useAiRuntimeReport();
+          return () => h("div");
+        },
+      }),
+    );
+    await flushPromises();
+
+    const firstRequest = report.searchActors("first");
+    const secondRequest = report.searchActors("second");
+    second.resolve({
+      items: [{ actorHandle: "actor-second", label: "第二位操作者" }],
+    });
+    await secondRequest;
+    first.resolve({
+      items: [{ actorHandle: "actor-first", label: "第一位操作者" }],
+    });
+    await firstRequest;
+
+    expect(report.actorQuery.value).toBe("second");
+    expect(report.actors.value).toEqual([
+      { actorHandle: "actor-second", label: "第二位操作者" },
+    ]);
+    wrapper.unmount();
+  });
+
+  test("旧操作者搜索晚失败时不能清空新查询结果", async () => {
+    const first = deferred<{
+      items: Array<{ actorHandle: string; label: string }>;
+    }>();
+    const second = deferred<{
+      items: Array<{ actorHandle: string; label: string }>;
+    }>();
+    mocks.listAiRuntimeActors.mockImplementation((query: string) => {
+      if (query === "first") return first.promise;
+      if (query === "second") return second.promise;
+      return Promise.resolve({ items: [], total: 0, page: 1, pageSize: 100 });
+    });
+    let report!: ReturnType<typeof useAiRuntimeReport>;
+    const wrapper = mount(
+      defineComponent({
+        setup() {
+          report = useAiRuntimeReport();
+          return () => h("div");
+        },
+      }),
+    );
+    await flushPromises();
+
+    const firstRequest = report.searchActors("first");
+    const secondRequest = report.searchActors("second");
+    second.resolve({
+      items: [{ actorHandle: "actor-second", label: "第二位操作者" }],
+    });
+    await secondRequest;
+    first.reject(new Error("旧查询失败"));
+    await firstRequest;
+
+    expect(report.actorQuery.value).toBe("second");
+    expect(report.actors.value).toEqual([
+      { actorHandle: "actor-second", label: "第二位操作者" },
+    ]);
+    wrapper.unmount();
+  });
+});
+
+function deferred<T>() {
+  let resolve!: (value: T) => void;
+  let reject!: (reason?: unknown) => void;
+  const promise = new Promise<T>((complete, fail) => {
+    resolve = complete;
+    reject = fail;
+  });
+  return { promise, reject, resolve };
+}

package/template/apps/web/src/pages/system/composables/useSystemResource.ts

@@ -15,6 +15,17 @@ import {
   type SystemRecord,
   updateSystemResource,
 } from "@/services/system-api";
+// @windy-module system.audit begin
+import { defaultAuditFilters } from "../audit-time-range";
+// @windy-module system.audit end
+
+interface SystemResourceFilters {
+  q?: string;
+  actorId?: string;
+  action?: string;
+  occurredAfter?: string;
+  occurredBefore?: string;
+}
 
 export interface UseSystemResourceOptions {
   apiResource: string;
@@ -32,13 +43,9 @@ export function useSystemResource(options: UseSystemResourceOptions) {
   const pageSize = shallowRef(DEFAULT_PAGE_SIZE);
   const q = shallowRef("");
   const status = shallowRef("");
-  const auditFilters = shallowRef<{
-    q?: string;
-    actorId?: string;
-    action?: string;
-    occurredAfter?: string;
-    occurredBefore?: string;
-  }>({});
+  const auditFilters = shallowRef<SystemResourceFilters>(
+    initialResourceFilters(options.apiResource),
+  );
   const exportOptions = shallowRef<{ includeScheduler?: boolean }>({});
   const loading = shallowRef(false);
   const saving = shallowRef(false);
@@ -258,6 +265,13 @@ export function useSystemResource(options: UseSystemResourceOptions) {
   };
 }
 
+function initialResourceFilters(_apiResource: string): SystemResourceFilters {
+  // @windy-module system.audit begin
+  if (_apiResource === "audit-logs") return defaultAuditFilters();
+  // @windy-module system.audit end
+  return {};
+}
+
 function downloadJson(filename: string, payload: unknown) {
   const blob = new Blob([JSON.stringify(payload, null, 2)], {
     type: "application/json",

package/template/apps/web/src/router/error-navigation.ts

@@ -39,6 +39,28 @@ export function safeErrorReturnTo(value: string): string {
   return target.startsWith("/error/") ? "/" : target;
 }
 
+export function deniedRoute(from: string, reason: string) {
+  return {
+    name: "access-denied",
+    query: { from, reason },
+    replace: true,
+  };
+}
+
+export function serviceUnavailableRoute(from: string, reason: string) {
+  return {
+    name: "service-unavailable",
+    query: { from, reason },
+    replace: true,
+  };
+}
+
+export function requestIdFrom(value: unknown): string | undefined {
+  if (typeof value !== "string") return undefined;
+  const requestId = value.trim();
+  return requestId && requestId.length <= 128 ? requestId : undefined;
+}
+
 function scheduleErrorNavigation(
   router: Router,
   target: Parameters<Router["replace"]>[0],

package/template/apps/web/src/router/index.ts

@@ -18,6 +18,9 @@ import LicensePage from "@/pages/license/LicensePage.vue";
 // @windy-module system.operations begin
 import SystemOperationsPage from "@/pages/system/SystemOperationsPage.vue";
 // @windy-module system.operations end
+// @windy-module system.agent begin
+import AiRuntimePage from "@/pages/system/AiRuntimePage.vue";
+// @windy-module system.agent end
 // @windy-module system.notification begin
 import SystemNotificationsPage from "@/pages/system/SystemNotificationsPage.vue";
 // @windy-module system.notification end
@@ -40,7 +43,12 @@ import { useLicenseRuntime } from "@/composables/useLicenseRuntime";
 import { evaluateWebAccess, type WebAccessSnapshot } from "@/layout/navigation";
 import { isApiErrorStatus } from "@/services/http";
 import { loginRoute, safeReturnTo } from "./auth-navigation";
-import { safeErrorReturnTo } from "./error-navigation";
+import {
+  deniedRoute,
+  requestIdFrom,
+  safeErrorReturnTo,
+  serviceUnavailableRoute,
+} from "./error-navigation";
 import {
   assertNoRouteCollisions,
   materializeBusinessAdminRoutes,
@@ -88,6 +96,9 @@ const platformAdminPageComponents: Partial<
   // @windy-module system.operations begin
   operations: SystemOperationsPage,
   // @windy-module system.operations end
+  // @windy-module system.agent begin
+  "ai-runtime": AiRuntimePage,
+  // @windy-module system.agent end
   // @windy-module system.configuration begin
   configuration: ModuleConfigurationPage,
   // @windy-module system.configuration end
@@ -323,26 +334,4 @@ export function createAppRouter(
   return appRouter;
 }
 
-function deniedRoute(from: string, reason: string) {
-  return {
-    name: "access-denied",
-    query: { from, reason },
-    replace: true,
-  };
-}
-
-function serviceUnavailableRoute(from: string, reason: string) {
-  return {
-    name: "service-unavailable",
-    query: { from, reason },
-    replace: true,
-  };
-}
-
-function requestIdFrom(value: unknown): string | undefined {
-  if (typeof value !== "string") return undefined;
-  const requestId = value.trim();
-  return requestId && requestId.length <= 128 ? requestId : undefined;
-}
-
 export const router = createAppRouter();

package/template/apps/web/src/router/platform-admin-route-bindings.ts

@@ -7,6 +7,7 @@ export type PlatformAdminPageKey =
   | "license"
   | "notification"
   | "operations"
+  | "ai-runtime"
   | "configuration";
 
 export interface PlatformAdminRouteBinding {
@@ -52,6 +53,9 @@ export const platformAdminRouteBindings: readonly PlatformAdminRouteBinding[] =
     // @windy-module system.operations begin
     { routeKey: "system.ops", page: "operations" },
     // @windy-module system.operations end
+    // @windy-module system.agent begin
+    { routeKey: "system.ai-runtime", page: "ai-runtime" },
+    // @windy-module system.agent end
     // @windy-module system.configuration begin
     { routeKey: "system.config", page: "configuration" },
     // @windy-module system.configuration end