create-windy 0.4.1 → 0.5.1

package/template/apps/server/src/system/system-resource-monitoring.ts

@@ -0,0 +1,300 @@
+import { cpus, loadavg } from "node:os";
+
+export interface CpuMonitorSnapshot {
+  status: "available";
+  logicalCores: number;
+  hostUsagePercent: number | null;
+  processUsagePercent: number | null;
+  loadAverage1m: number | null;
+  message?: string;
+}
+
+export interface GpuProcessSnapshot {
+  pid: number;
+  name: string;
+  usedMemoryBytes: number | null;
+}
+
+export interface GpuDeviceSnapshot {
+  index: number;
+  uuid: string;
+  name: string;
+  usagePercent: number | null;
+  memoryUsedBytes: number | null;
+  memoryTotalBytes: number | null;
+  memoryUsagePercent: number | null;
+  temperatureCelsius: number | null;
+  processes: GpuProcessSnapshot[];
+}
+
+export interface GpuMonitorSnapshot {
+  status: "available" | "not-detected" | "unavailable";
+  provider: "NVIDIA";
+  devices: GpuDeviceSnapshot[];
+  message: string;
+}
+
+export type CpuMonitorProbe = () => Promise<CpuMonitorSnapshot>;
+export type GpuMonitorProbe = () => Promise<GpuMonitorSnapshot>;
+
+export interface CpuSample {
+  hostIdleMilliseconds: number;
+  hostTotalMilliseconds: number;
+  processMicroseconds: number;
+  observedAtMicroseconds: number;
+  logicalCores: number;
+  loadAverage1m: number | null;
+}
+
+export function createCpuMonitorProbe(
+  readSample: () => CpuSample = systemCpuSample,
+): CpuMonitorProbe {
+  let previous = readSample();
+  return async () => {
+    const current = readSample();
+    const snapshot = calculateCpuMonitor(previous, current);
+    previous = current;
+    return snapshot;
+  };
+}
+
+export function calculateCpuMonitor(
+  previous: CpuSample,
+  current: CpuSample,
+): CpuMonitorSnapshot {
+  const totalDelta =
+    current.hostTotalMilliseconds - previous.hostTotalMilliseconds;
+  const idleDelta =
+    current.hostIdleMilliseconds - previous.hostIdleMilliseconds;
+  const elapsedMicroseconds =
+    current.observedAtMicroseconds - previous.observedAtMicroseconds;
+  const processDelta =
+    current.processMicroseconds - previous.processMicroseconds;
+  const hostUsagePercent =
+    totalDelta > 0 ? percent(1 - Math.max(0, idleDelta) / totalDelta) : null;
+  const processUsagePercent =
+    elapsedMicroseconds > 0 && current.logicalCores > 0
+      ? percent(
+          Math.max(0, processDelta) /
+            elapsedMicroseconds /
+            current.logicalCores,
+        )
+      : null;
+  return {
+    status: "available",
+    logicalCores: current.logicalCores,
+    hostUsagePercent,
+    processUsagePercent,
+    loadAverage1m: current.loadAverage1m,
+    message:
+      hostUsagePercent === null || processUsagePercent === null
+        ? "等待下一次刷新以计算 CPU 占用。"
+        : undefined,
+  };
+}
+
+interface CommandResult {
+  exitCode: number | null;
+  stdout: string;
+  missing?: boolean;
+  timedOut?: boolean;
+}
+
+export type NvidiaSmiRunner = (args: string[]) => Promise<CommandResult>;
+
+export function createGpuMonitorProbe(
+  run: NvidiaSmiRunner = runNvidiaSmi,
+): GpuMonitorProbe {
+  return async () => {
+    const deviceResult = await run([
+      "--query-gpu=index,uuid,name,utilization.gpu,memory.used,memory.total,temperature.gpu",
+      "--format=csv,noheader,nounits",
+    ]);
+    if (deviceResult.missing) {
+      return {
+        status: "not-detected",
+        provider: "NVIDIA",
+        devices: [],
+        message:
+          "未检测到 nvidia-smi；当前仅支持 NVIDIA GPU，容器部署还需挂载 GPU 设备和驱动能力。",
+      };
+    }
+    if (deviceResult.exitCode !== 0) {
+      return {
+        status: "unavailable",
+        provider: "NVIDIA",
+        devices: [],
+        message: deviceResult.timedOut
+          ? "NVIDIA GPU 指标采集超时。"
+          : "nvidia-smi 查询失败，无法读取 GPU 指标。",
+      };
+    }
+    const devices = parseGpuDevices(deviceResult.stdout);
+    if (!devices.length) {
+      return {
+        status: "not-detected",
+        provider: "NVIDIA",
+        devices: [],
+        message: "nvidia-smi 未返回可用的 NVIDIA GPU。",
+      };
+    }
+    const processResult = await run([
+      "--query-compute-apps=gpu_uuid,pid,process_name,used_gpu_memory",
+      "--format=csv,noheader,nounits",
+    ]);
+    if (processResult.exitCode === 0) {
+      attachGpuProcesses(devices, processResult.stdout);
+    }
+    return {
+      status: "available",
+      provider: "NVIDIA",
+      devices,
+      message:
+        processResult.exitCode === 0
+          ? "GPU 利用率为设备采样值；进程列表展示计算进程的显存占用。"
+          : "GPU 设备指标可用，但计算进程明细暂不可用。",
+    };
+  };
+}
+
+function systemCpuSample(): CpuSample {
+  const cores = cpus();
+  const totals = cores.reduce(
+    (result, core) => {
+      const values = Object.values(core.times);
+      result.idle += core.times.idle;
+      result.total += values.reduce((total, value) => total + value, 0);
+      return result;
+    },
+    { idle: 0, total: 0 },
+  );
+  const processUsage = process.cpuUsage();
+  return {
+    hostIdleMilliseconds: totals.idle,
+    hostTotalMilliseconds: totals.total,
+    processMicroseconds: processUsage.user + processUsage.system,
+    observedAtMicroseconds: Number(process.hrtime.bigint() / 1_000n),
+    logicalCores: cores.length,
+    loadAverage1m: process.platform === "win32" ? null : loadavg()[0] || 0,
+  };
+}
+
+function percent(ratio: number): number {
+  return Number((Math.min(1, Math.max(0, ratio)) * 100).toFixed(2));
+}
+
+async function runNvidiaSmi(args: string[]): Promise<CommandResult> {
+  if (!Bun.which("nvidia-smi")) {
+    return { exitCode: null, stdout: "", missing: true };
+  }
+  const child = Bun.spawn(["nvidia-smi", ...args], {
+    stdout: "pipe",
+    stderr: "ignore",
+  });
+  let timeout: ReturnType<typeof setTimeout> | undefined;
+  const result = await Promise.race([
+    child.exited.then((exitCode) => ({ exitCode, timedOut: false })),
+    new Promise<{ exitCode: null; timedOut: true }>((resolve) => {
+      timeout = setTimeout(
+        () => resolve({ exitCode: null, timedOut: true }),
+        1_500,
+      );
+    }),
+  ]);
+  if (timeout) clearTimeout(timeout);
+  if (result.timedOut) {
+    child.kill();
+    await child.exited;
+    return { exitCode: null, stdout: "", timedOut: true };
+  }
+  return {
+    exitCode: result.exitCode,
+    stdout: await new Response(child.stdout).text(),
+  };
+}
+
+function parseGpuDevices(output: string): GpuDeviceSnapshot[] {
+  return output
+    .split(/\r?\n/)
+    .filter(Boolean)
+    .flatMap((line) => {
+      const values = parseCsvLine(line);
+      if (values.length !== 7) return [];
+      const memoryUsedMiB = metric(values[4]);
+      const memoryTotalMiB = metric(values[5]);
+      return [
+        {
+          index: metric(values[0]) ?? 0,
+          uuid: values[1] || "",
+          name: values[2] || "NVIDIA GPU",
+          usagePercent: metric(values[3]),
+          memoryUsedBytes: mebibytes(memoryUsedMiB),
+          memoryTotalBytes: mebibytes(memoryTotalMiB),
+          memoryUsagePercent:
+            memoryUsedMiB !== null &&
+            memoryTotalMiB !== null &&
+            memoryTotalMiB > 0
+              ? percent(memoryUsedMiB / memoryTotalMiB)
+              : null,
+          temperatureCelsius: metric(values[6]),
+          processes: [],
+        },
+      ];
+    });
+}
+
+function attachGpuProcesses(
+  devices: GpuDeviceSnapshot[],
+  output: string,
+): void {
+  const byUuid = new Map(devices.map((device) => [device.uuid, device]));
+  for (const line of output.split(/\r?\n/).filter(Boolean)) {
+    const values = parseCsvLine(line);
+    const device = byUuid.get(values[0] || "");
+    if (!device || values.length !== 4) continue;
+    const pid = metric(values[1]);
+    if (pid === null) continue;
+    device.processes.push({
+      pid,
+      name: values[2] || "未知进程",
+      usedMemoryBytes: mebibytes(metric(values[3])),
+    });
+  }
+}
+
+function metric(value: string | undefined): number | null {
+  const normalized = value?.trim();
+  if (!normalized || normalized === "N/A" || normalized === "[Not Supported]") {
+    return null;
+  }
+  const parsed = Number(normalized);
+  return Number.isFinite(parsed) ? parsed : null;
+}
+
+function mebibytes(value: number | null): number | null {
+  return value === null ? null : value * 1_024 ** 2;
+}
+
+function parseCsvLine(line: string): string[] {
+  const values: string[] = [];
+  let value = "";
+  let quoted = false;
+  for (let index = 0; index < line.length; index += 1) {
+    const character = line[index]!;
+    if (character === '"') {
+      if (quoted && line[index + 1] === '"') {
+        value += '"';
+        index += 1;
+      } else {
+        quoted = !quoted;
+      }
+    } else if (character === "," && !quoted) {
+      values.push(value.trim());
+      value = "";
+    } else {
+      value += character;
+    }
+  }
+  values.push(value.trim());
+  return values;
+}

package/template/apps/web/src/layout/AppSidebar.vue

@@ -193,7 +193,12 @@ function findMenu(menus: MenuNode[], key: string): MenuNode | undefined {
       >
         <div
           data-testid="sidebar-brand-logo"
-          class="flex size-8 max-w-full shrink-0 items-center justify-center overflow-hidden rounded-lg bg-primary text-primary-foreground [&>svg]:size-5 group-data-[collapsible=icon]:size-4 group-data-[collapsible=icon]:rounded-sm group-data-[collapsible=icon]:[&>svg]:size-4"
+          class="flex size-8 max-w-full shrink-0 items-center justify-center overflow-hidden rounded-lg [&>svg]:size-5 group-data-[collapsible=icon]:size-4 group-data-[collapsible=icon]:rounded-sm group-data-[collapsible=icon]:[&>svg]:size-4"
+          :class="
+            platform.branding.value.logoUrl
+              ? 'bg-transparent text-sidebar-foreground'
+              : 'bg-primary text-primary-foreground'
+          "
         >
           <img
             v-if="platform.branding.value.logoUrl"

package/template/apps/web/src/layout/AppSidebar.webtest.ts

@@ -96,6 +96,8 @@ describe("AppSidebar", () => {
     expect(brandLink.classes()).toContain("group-data-[collapsible=icon]:p-0");
     expect(logo.classes()).toContain("group-data-[collapsible=icon]:size-4");
     expect(logo.classes()).toContain("overflow-hidden");
+    expect(logo.classes()).toContain("bg-transparent");
+    expect(logo.classes()).not.toContain("bg-primary");
     wrapper.unmount();
   });
 

package/template/apps/web/src/pages/auth/LoginPage.vue

@@ -25,7 +25,12 @@ const developmentAuth = developmentAuthStatus();
     <div class="w-full max-w-md space-y-4">
       <div class="flex items-center justify-center gap-3">
         <span
-          class="flex size-10 items-center justify-center rounded-xl bg-primary text-primary-foreground"
+          class="flex size-10 items-center justify-center rounded-xl"
+          :class="
+            platform.branding.value.logoUrl
+              ? 'bg-transparent text-foreground'
+              : 'bg-primary text-primary-foreground'
+          "
         >
           <img
             v-if="platform.branding.value.logoUrl"

package/template/apps/web/src/pages/settings/BrandingSettingsSection.vue

@@ -13,6 +13,12 @@ const access = useAccessSnapshot();
 const toast = useAppToast();
 const softwareName = shallowRef("");
 const logoUrl = shallowRef("");
+const logoUrlInput = computed({
+  get: () => (logoUrl.value.startsWith("data:") ? "" : logoUrl.value),
+  set: (value: string) => {
+    logoUrl.value = value;
+  },
+});
 const description = shallowRef("");
 const readingLogo = shallowRef(false);
 const loaded = shallowRef(false);
@@ -145,11 +151,17 @@ defineExpose({
           </Button>
         </div>
         <Input
-          v-model="logoUrl"
+          v-model="logoUrlInput"
           :disabled="!canManage"
-          maxlength="1398128"
+          maxlength="2048"
           placeholder="或填写 https://example.com/logo.png"
         />
+        <span
+          v-if="logoUrl.startsWith('data:')"
+          class="text-xs font-normal text-muted-foreground"
+        >
+          当前使用本地图片，编码内容不在输入框中显示。
+        </span>
         <span class="text-xs font-normal text-muted-foreground">
           本地文件支持 PNG、JPEG、WebP，最大
           {{ maxLocalLogoBytes / 1024 }} KiB；也可使用 HTTPS 或站内路径。
@@ -159,7 +171,12 @@ defineExpose({
         <p class="mb-3 text-xs font-medium text-muted-foreground">预览</p>
         <div class="flex items-center gap-3">
           <div
-            class="flex size-12 items-center justify-center overflow-hidden rounded-lg bg-primary text-primary-foreground"
+            class="flex size-12 items-center justify-center overflow-hidden rounded-lg"
+            :class="
+              logoUrl
+                ? 'bg-transparent text-foreground'
+                : 'bg-primary text-primary-foreground'
+            "
           >
             <img
               v-if="logoUrl"

package/template/apps/web/src/pages/settings/BrandingSettingsSection.webtest.ts

@@ -0,0 +1,80 @@
+import { flushPromises, mount } from "@vue/test-utils";
+import { beforeEach, describe, expect, test, vi } from "vitest";
+import { shallowRef } from "vue";
+import BrandingSettingsSection from "./BrandingSettingsSection.vue";
+
+const mocks = vi.hoisted(() => ({
+  refresh: vi.fn(),
+  save: vi.fn(),
+  success: vi.fn(),
+  error: vi.fn(),
+}));
+
+vi.mock("@/composables/useAccessSnapshot", () => ({
+  useAccessSnapshot: () => ({
+    snapshot: shallowRef({
+      actor: { permissionKeys: ["system.settings.manage"] },
+    }),
+  }),
+}));
+
+vi.mock("@/composables/useAppToast", () => ({
+  useAppToast: () => ({ success: mocks.success, error: mocks.error }),
+}));
+
+vi.mock("@/composables/usePlatformSettings", () => ({
+  usePlatformSettings: () => ({
+    refresh: mocks.refresh,
+    save: mocks.save,
+    saving: shallowRef(false),
+    error: shallowRef(""),
+  }),
+}));
+
+describe("品牌基本信息", () => {
+  beforeEach(() => {
+    mocks.refresh.mockReset();
+    mocks.save.mockReset();
+    mocks.success.mockReset();
+    mocks.error.mockReset();
+  });
+
+  test("本地 Logo 保留预览但不在地址输入框暴露 Base64，且不添加底色", async () => {
+    const localLogo = "data:image/png;base64,AA==";
+    mocks.refresh.mockResolvedValue({
+      softwareName: "利剑",
+      logoUrl: localLogo,
+      description: "企业级 Dashboard 产品基座",
+    });
+
+    const wrapper = mount(BrandingSettingsSection);
+    await flushPromises();
+
+    expect(
+      (wrapper.get('input[placeholder^="或填写"]').element as HTMLInputElement)
+        .value,
+    ).toBe("");
+    expect(wrapper.get('img[alt="Logo 预览"]').attributes("src")).toBe(
+      localLogo,
+    );
+    expect(wrapper.text()).toContain("编码内容不在输入框中显示");
+    const preview = wrapper.get('img[alt="Logo 预览"]').element.parentElement;
+    expect(preview?.classList.contains("bg-transparent")).toBe(true);
+    expect(preview?.classList.contains("bg-primary")).toBe(false);
+  });
+
+  test("外部或站内 Logo 地址仍可编辑", async () => {
+    mocks.refresh.mockResolvedValue({
+      softwareName: "Windy",
+      logoUrl: "/assets/logo.png",
+    });
+
+    const wrapper = mount(BrandingSettingsSection);
+    await flushPromises();
+
+    expect(
+      (wrapper.get('input[placeholder^="或填写"]').element as HTMLInputElement)
+        .value,
+    ).toBe("/assets/logo.png");
+  });
+});

package/template/apps/web/src/pages/system/AiRuntimePage.vue

@@ -0,0 +1,129 @@
+<script setup lang="ts">
+import { computed } from "vue";
+import { RefreshCwIcon } from "@lucide/vue";
+import { Button } from "@/components/ui/button";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
+import AiRuntimeActivityChart from "./components/ai-runtime/AiRuntimeActivityChart.vue";
+import AiRuntimeFilters from "./components/ai-runtime/AiRuntimeFilters.vue";
+import AiRuntimeRunDetailDialog from "./components/ai-runtime/AiRuntimeRunDetailDialog.vue";
+import AiRuntimeRunTable from "./components/ai-runtime/AiRuntimeRunTable.vue";
+import AiRuntimeSummaryCards from "./components/ai-runtime/AiRuntimeSummaryCards.vue";
+import AiRuntimeTokenByModelChart from "./components/ai-runtime/AiRuntimeTokenByModelChart.vue";
+import { useAiRuntimeReport } from "./composables/useAiRuntimeReport";
+
+const report = useAiRuntimeReport();
+const retentionDescription = computed(() => {
+  const summary = report.summary.value;
+  if (!summary) return "";
+  const available = summary.reportingAvailableFrom
+    ? `，现有事实从 ${new Date(summary.reportingAvailableFrom).toLocaleDateString("zh-CN")} 起`
+    : "";
+  return `报表保留 ${summary.retentionDays} 天${available}。未上报的 Provider 用量不会按 0 计算。`;
+});
+</script>
+
+<template>
+  <div class="space-y-5">
+    <section
+      class="flex flex-col gap-3 md:flex-row md:items-start md:justify-between"
+    >
+      <div class="max-w-3xl space-y-2">
+        <h1 class="text-2xl font-semibold tracking-normal text-foreground">
+          AI Runtime
+        </h1>
+        <p class="text-sm leading-6 text-muted-foreground">
+          查看 Agent Run 成功率、Provider 缓存、模型 Token
+          用量和受治理的运行明细。 页面不展示 Prompt、回答正文或 Tool 参数。
+        </p>
+      </div>
+      <Button
+        variant="outline"
+        :disabled="report.loading.value"
+        @click="report.reload"
+      >
+        <RefreshCwIcon data-icon="inline-start" />
+        刷新
+      </Button>
+    </section>
+
+    <AiRuntimeFilters
+      :range="report.range.value"
+      :actor-handle="report.actorHandle.value"
+      :actors="report.actors.value"
+      :disabled="report.loading.value"
+      @update:range="report.setRange"
+      @update:actor-handle="report.setActor"
+      @search:actors="report.searchActors"
+    />
+
+    <div
+      v-if="report.error.value"
+      class="rounded-md border border-destructive/30 bg-destructive/5 p-4 text-sm text-destructive"
+    >
+      {{ report.error.value }}
+    </div>
+
+    <template v-if="report.summary.value">
+      <AiRuntimeSummaryCards :summary="report.summary.value" />
+
+      <div class="grid gap-4 xl:grid-cols-2">
+        <Card>
+          <CardHeader>
+            <CardTitle>按模型统计总 Token</CardTitle>
+            <CardDescription>
+              模型与 deployment 仅用于授权报表，不进入 Prometheus 高基数标签。
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <AiRuntimeTokenByModelChart
+              :models="report.summary.value.byModel"
+            />
+          </CardContent>
+        </Card>
+
+        <Card>
+          <CardHeader>
+            <CardTitle>按 UTC 日历日的 Agent Run</CardTitle>
+            <CardDescription>
+              按 UTC 日历日聚合当前范围内的活动；取消和运行中不计入成功率分母。
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <AiRuntimeActivityChart :activity="report.summary.value.activity" />
+          </CardContent>
+        </Card>
+      </div>
+    </template>
+
+    <Card>
+      <CardHeader>
+        <CardTitle>运行明细</CardTitle>
+        <CardDescription>
+          {{ retentionDescription || "加载可查询的 Agent Run…" }}
+        </CardDescription>
+      </CardHeader>
+      <CardContent>
+        <AiRuntimeRunTable
+          :runs="report.runs.value"
+          :loading="report.loading.value"
+          @select="report.openRun"
+          @update:page="report.setPage"
+          @update:page-size="report.setPageSize"
+        />
+      </CardContent>
+    </Card>
+
+    <AiRuntimeRunDetailDialog
+      v-model:open="report.detailOpen.value"
+      :detail="report.detail.value"
+      :loading="report.detailLoading.value"
+      :error="report.detailError.value"
+    />
+  </div>
+</template>

package/template/apps/web/src/pages/system/SystemOperationsPage.vue

@@ -96,7 +96,7 @@ async function reload() {
           运维总览
         </h1>
         <p class="text-sm text-muted-foreground">
-          查看在线会话、应用与数据库资源、缓存状态和定时任务。
+          查看在线会话、CPU/GPU、应用与数据库资源、缓存状态和定时任务。
         </p>
       </div>
       <Button variant="outline" :disabled="refreshing" @click="reloadAll">
@@ -117,6 +117,7 @@ async function reload() {
         :service="snapshot.serviceMonitor"
         :database="snapshot.databaseMonitor"
         :disk="snapshot.diskMonitor"
+        :gpu="snapshot.gpuMonitor"
       />
       <OperationOnlineUsers :users="snapshot.onlineUsers" />
       <OperationCacheMonitor :cache="snapshot.cacheMonitor" />

package/template/apps/web/src/pages/system/ai-runtime-presenter.ts

@@ -0,0 +1,60 @@
+const COMPACT = new Intl.NumberFormat("zh-CN", {
+  notation: "compact",
+  maximumFractionDigits: 1,
+});
+const INTEGER = new Intl.NumberFormat("zh-CN");
+const DATE_TIME = new Intl.DateTimeFormat("zh-CN", {
+  month: "2-digit",
+  day: "2-digit",
+  hour: "2-digit",
+  minute: "2-digit",
+});
+
+export function formatTokenCount(value: number | null | undefined) {
+  if (value === null || value === undefined) return "未上报";
+  return value >= 10_000 ? COMPACT.format(value) : INTEGER.format(value);
+}
+
+export function formatPercent(value: number | null | undefined) {
+  if (value === null || value === undefined) return "未上报";
+  return `${(value * 100).toFixed(value >= 0.995 ? 0 : 1)}%`;
+}
+
+export function formatCoverage(value: number) {
+  return `覆盖 ${formatPercent(value)}`;
+}
+
+export function formatDuration(value: number | null | undefined) {
+  if (value === null || value === undefined) return "—";
+  if (value < 1_000) return `${value} ms`;
+  if (value < 60_000) return `${(value / 1_000).toFixed(1)} s`;
+  return `${Math.floor(value / 60_000)}m ${Math.round(
+    (value % 60_000) / 1_000,
+  )}s`;
+}
+
+export function formatDateTime(value: string | undefined) {
+  if (!value) return "—";
+  const date = new Date(value);
+  return Number.isNaN(date.getTime()) ? value : DATE_TIME.format(date);
+}
+
+export function runStatusLabel(status: string) {
+  return (
+    {
+      completed: "成功",
+      failed: "失败",
+      cancelled: "已取消",
+      accepted: "已接受",
+      running: "运行中",
+      "awaiting-approval": "等待审批",
+      blocked: "已阻止",
+      abandoned: "已中止",
+      pending: "等待中",
+    }[status] || status
+  );
+}
+
+export function cacheStatusLabel(status: string) {
+  return { hit: "命中", miss: "未命中", unknown: "未上报" }[status] || status;
+}