create-windy 0.8.3 → 0.10.0

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

@@ -8,12 +8,17 @@ import {
 } from "vue-router";
 import UnsavedChangesDialog from "@/components/common/UnsavedChangesDialog.vue";
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
+import type { PlatformWatermarkPolicy } from "@southwind-ai/shared";
+import { useAuthSession } from "@/composables/useAuthSession";
+import { useWatermarkSettings } from "@/composables/useWatermarkSettings";
 import { useAccessSnapshot } from "@/composables/useAccessSnapshot";
 import { useUnsavedChangesConfirmation } from "@/composables/useUnsavedChangesConfirmation";
 import { evaluateWebAccess } from "@/layout/navigation";
 import BrandingSettingsSection from "./BrandingSettingsSection.vue";
 import WatermarkSettingsSection from "./WatermarkSettingsSection.vue";
 
+import WatermarkYamlTransfer from "./WatermarkYamlTransfer.vue";
+
 type SettingsTab = "basic" | "watermark";
 
 interface SettingsSectionHandle {
@@ -24,11 +29,19 @@ interface SettingsSectionHandle {
 const route = useRoute();
 const router = useRouter();
 const access = useAccessSnapshot();
+const watermark = useWatermarkSettings(useAuthSession().actor);
 const confirmation = useUnsavedChangesConfirmation();
 const confirmOpen = confirmation.open;
 const confirmSaving = confirmation.saving;
 const basicSection = shallowRef<SettingsSectionHandle | null>(null);
-const watermarkSection = shallowRef<SettingsSectionHandle | null>(null);
+const watermarkSection = shallowRef<
+  (SettingsSectionHandle & { applyPolicyToForm(): void }) | null
+>(null);
+
+function onYamlImported(policy: PlatformWatermarkPolicy) {
+  watermark.applyImportedPolicy(policy);
+  watermarkSection.value?.applyPolicyToForm();
+}
 const canReadBasic = computed(() => {
   const snapshot = access.snapshot.value;
   return Boolean(
@@ -49,6 +62,19 @@ const canReadWatermark = computed(() => {
     }).allowed,
   );
 });
+const canManageWatermark = computed(() => {
+  const snapshot = access.snapshot.value;
+  return Boolean(
+    snapshot &&
+    evaluateWebAccess(snapshot, {
+      permissionKey: "system.watermark.manage",
+      featureKey: "system.watermark",
+    }).allowed,
+  );
+});
+const canOpenBasic = computed(
+  () => canReadBasic.value || canReadWatermark.value,
+);
 const activeTab = shallowRef<SettingsTab | undefined>(resolveTab(route.hash));
 onBeforeRouteUpdate(async (to) => {
   const target = resolveTab(to.hash);
@@ -100,14 +126,14 @@ async function normalizeCurrentHash() {
 
 function resolveTab(hash: string): SettingsTab | undefined {
   if (hash === "#watermark" && canReadWatermark.value) return "watermark";
-  if (hash === "#basic" && canReadBasic.value) return "basic";
+  if (hash === "#basic" && canOpenBasic.value) return "basic";
   if (canReadBasic.value) return "basic";
   if (canReadWatermark.value) return "watermark";
   return undefined;
 }
 
 function isAccessible(tab: SettingsTab) {
-  return tab === "basic" ? canReadBasic.value : canReadWatermark.value;
+  return tab === "basic" ? canOpenBasic.value : canReadWatermark.value;
 }
 
 function tabHash(tab: SettingsTab) {
@@ -158,7 +184,7 @@ function handleBeforeUnload(event: BeforeUnloadEvent) {
         class="h-auto w-full justify-start border-b px-0 pb-2"
       >
         <TabsTrigger
-          v-if="canReadBasic"
+          v-if="canOpenBasic"
           value="basic"
           class="min-w-24 flex-none px-4 py-2"
         >
@@ -172,8 +198,27 @@ function handleBeforeUnload(event: BeforeUnloadEvent) {
           水印设置
         </TabsTrigger>
       </TabsList>
-      <TabsContent v-if="canReadBasic" value="basic" class="mt-0">
-        <BrandingSettingsSection ref="basicSection" />
+      <TabsContent v-if="canOpenBasic" value="basic" class="mt-0">
+        <BrandingSettingsSection v-if="canReadBasic" ref="basicSection" />
+        <section
+          v-if="canReadWatermark"
+          class="mt-5 space-y-3 rounded-xl border bg-card p-6"
+        >
+          <h2 class="text-xl font-semibold">配置导入与导出</h2>
+          <p class="text-sm text-muted-foreground">
+            通过 YAML 备份或迁移页面水印配置。
+          </p>
+          <WatermarkYamlTransfer
+            :can-manage="canManageWatermark"
+            :import-disabled="
+              !canManageWatermark ||
+              currentIsDirty() ||
+              watermark.loading.value ||
+              watermark.saving.value
+            "
+            @imported="onYamlImported"
+          />
+        </section>
       </TabsContent>
       <TabsContent v-if="canReadWatermark" value="watermark" class="mt-0">
         <WatermarkSettingsSection ref="watermarkSection" />

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

@@ -4,6 +4,7 @@ import { defineComponent, h, shallowRef } from "vue";
 import { createMemoryHistory, createRouter, RouterView } from "vue-router";
 import type { WebAccessSnapshot } from "@/layout/navigation";
 import GlobalSettingsPage from "./GlobalSettingsPage.vue";
+import WatermarkYamlTransfer from "./WatermarkYamlTransfer.vue";
 
 const snapshot = shallowRef<WebAccessSnapshot>();
 const ensureLoaded = vi.fn(async () => snapshot.value!);
@@ -84,15 +85,30 @@ describe("全局设置分类", () => {
     expect(wrapper.text()).not.toContain("基本信息表单");
   });
 
-  test("只有水印权限时直接落到可访问分类", async () => {
+  test("只有水印权限时可从基本信息导出 YAML，但不显示品牌表单", async () => {
     snapshot.value = createSnapshot(["system.watermark.read"]);
     const { wrapper, router } = await mountPage("/settings#basic");
 
-    expect(router.currentRoute.value.fullPath).toBe("/settings#watermark");
-    expect(wrapper.text()).toContain("水印表单");
+    expect(router.currentRoute.value.fullPath).toBe("/settings#basic");
+    expect(wrapper.text()).toContain("导出 YAML");
+    expect(wrapper.text()).not.toContain("导入 YAML");
     expect(wrapper.text()).not.toContain("基本信息表单");
   });
 
+  test("基本信息只提供一个 YAML 入口，未保存编辑时禁止导入", async () => {
+    snapshot.value = createSnapshot([
+      "system.settings.read",
+      "system.watermark.read",
+      "system.watermark.manage",
+    ]);
+    const { wrapper } = await mountPage();
+    expect(wrapper.findAllComponents(WatermarkYamlTransfer)).toHaveLength(1);
+    const transfer = wrapper.getComponent(WatermarkYamlTransfer);
+    expect(transfer.props("importDisabled")).toBe(false);
+    await wrapper.get('[data-testid="dirty-basic"]').trigger("click");
+    expect(transfer.props("importDisabled")).toBe(true);
+  });
+
   test("访问快照加载完成后再恢复有权限的深链接", async () => {
     snapshot.value = undefined;
     ensureLoaded.mockImplementation(async () => {

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

@@ -163,6 +163,7 @@ function toggleContentField(field: WatermarkContentField, checked: boolean) {
 
 defineExpose({
   isDirty: () => isDirty.value,
+  applyPolicyToForm,
   save,
 });
 </script>

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

@@ -0,0 +1,211 @@
+<script setup lang="ts">
+import { LoaderCircleIcon } from "@lucide/vue";
+import { shallowRef } from "vue";
+import { Button } from "@/components/ui/button";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "@/components/ui/dialog";
+import { useAppToast } from "@/composables/useAppToast";
+import {
+  exportWatermarkYaml,
+  importWatermarkYaml,
+  previewWatermarkYaml,
+  type PlatformWatermarkPolicy,
+  type WatermarkYamlPreview,
+} from "@/services/platform-settings-api";
+
+defineProps<{ canManage: boolean; importDisabled: boolean }>();
+const emit = defineEmits<{ imported: [policy: PlatformWatermarkPolicy] }>();
+const toast = useAppToast();
+const open = shallowRef(false);
+const exporting = shallowRef(false);
+const busy = shallowRef<"preview" | "import">();
+const error = shallowRef("");
+const yaml = shallowRef("");
+const preview = shallowRef<WatermarkYamlPreview>();
+
+const labels = {
+  enabled: "显示页面水印",
+  density: "密度",
+  contentFields: "显示字段",
+  opacityPercent: "不透明度（%）",
+  fontSize: "字号（px）",
+};
+const valueLabels: Readonly<Record<string, string>> = {
+  low: "低",
+  medium: "中",
+  high: "高",
+  username: "用户名",
+  displayName: "姓名",
+  phone: "手机号",
+  email: "邮箱",
+  custom: "目标实例的自定义内容",
+};
+
+function format(value: WatermarkYamlPreview["changes"][number]["before"]) {
+  if (typeof value === "boolean") return value ? "开启" : "关闭";
+  if (Array.isArray(value))
+    return value.map((item) => valueLabels[item] ?? item).join("、");
+  return valueLabels[String(value)] ?? value;
+}
+
+async function download() {
+  exporting.value = true;
+  try {
+    const url = URL.createObjectURL(await exportWatermarkYaml());
+    const link = document.createElement("a");
+    link.href = url;
+    link.download = "windy-admin-settings.yaml";
+    link.click();
+    setTimeout(() => URL.revokeObjectURL(url), 1000);
+  } catch (failure) {
+    toast.error("导出 YAML 失败", { description: message(failure) });
+  } finally {
+    exporting.value = false;
+  }
+}
+
+function setOpen(value: boolean) {
+  if (busy.value) return;
+  open.value = value;
+  if (value) return;
+  yaml.value = "";
+  error.value = "";
+  preview.value = undefined;
+}
+
+async function readFile(event: Event) {
+  const input = event.target as HTMLInputElement;
+  const file = input.files?.[0];
+  input.value = "";
+  if (!file || busy.value) return;
+  yaml.value = "";
+  preview.value = undefined;
+  if (file.size > 8192) {
+    error.value = "YAML 文件不能超过 8 KiB";
+    return;
+  }
+  busy.value = "preview";
+  error.value = "";
+  try {
+    yaml.value = await file.text();
+    preview.value = await previewWatermarkYaml(yaml.value);
+  } catch (failure) {
+    error.value = message(failure);
+  } finally {
+    busy.value = undefined;
+  }
+}
+
+async function apply() {
+  if (busy.value || !preview.value?.changes.length) return;
+  busy.value = "import";
+  error.value = "";
+  try {
+    const policy = await importWatermarkYaml(
+      yaml.value,
+      preview.value.revision,
+    );
+    emit("imported", policy);
+    toast.success("水印配置已导入");
+    busy.value = undefined;
+    setOpen(false);
+  } catch (failure) {
+    error.value = message(failure);
+    preview.value = undefined;
+  } finally {
+    busy.value = undefined;
+  }
+}
+
+function message(failure: unknown) {
+  return failure instanceof Error ? failure.message : "操作失败，请重试";
+}
+</script>
+
+<template>
+  <div class="flex flex-wrap gap-2">
+    <Button variant="outline" :disabled="exporting" @click="download">
+      {{ exporting ? "导出中…" : "导出 YAML" }}
+    </Button>
+    <Dialog v-if="canManage" :open="open" @update:open="setOpen">
+      <DialogTrigger as-child>
+        <Button variant="outline" :disabled="importDisabled">导入 YAML</Button>
+      </DialogTrigger>
+      <DialogContent
+        :show-close-button="false"
+        @escape-key-down.prevent
+        @interact-outside.prevent
+      >
+        <DialogHeader>
+          <DialogTitle>导入水印配置</DialogTitle>
+          <DialogDescription>
+            选择 YAML 文件，校验通过后核对差异。确认后配置才会生效。
+          </DialogDescription>
+        </DialogHeader>
+        <label class="grid gap-2">
+          配置文件（最多 8 KiB）
+          <input
+            type="file"
+            accept=".yaml,.yml"
+            :disabled="!!busy"
+            @change="readFile"
+          />
+        </label>
+        <p v-if="error" role="alert" class="text-destructive">{{ error }}</p>
+        <p v-if="busy === 'preview'" role="status">正在校验文件…</p>
+        <template v-if="preview">
+          <p role="status">
+            {{
+              preview.changes.length
+                ? "校验通过，请核对以下变更。"
+                : "校验通过，配置没有变化。"
+            }}
+          </p>
+          <div v-if="preview.changes.length" class="overflow-auto">
+            <table class="w-full text-left">
+              <thead>
+                <tr>
+                  <th scope="col">配置项</th>
+                  <th scope="col">当前值</th>
+                  <th scope="col">导入值</th>
+                </tr>
+              </thead>
+              <tbody>
+                <tr
+                  v-for="change in preview.changes"
+                  :key="change.key"
+                  class="border-t"
+                >
+                  <th scope="row" class="py-2 font-medium">
+                    {{ labels[change.key] }}
+                  </th>
+                  <td>{{ format(change.before) }}</td>
+                  <td>{{ format(change.after) }}</td>
+                </tr>
+              </tbody>
+            </table>
+          </div>
+        </template>
+        <DialogFooter>
+          <Button variant="outline" :disabled="!!busy" @click="setOpen(false)"
+            >取消</Button
+          >
+          <Button
+            :disabled="!!busy || !preview?.changes.length || importDisabled"
+            @click="apply"
+          >
+            <LoaderCircleIcon v-if="busy === 'import'" class="animate-spin" />
+            {{ busy === "import" ? "导入中…" : "确认导入" }}
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  </div>
+</template>

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

@@ -0,0 +1,44 @@
+<script setup lang="ts">
+import { onMounted, shallowRef } from "vue";
+import { Button } from "@/components/ui/button";
+import { apiRequest } from "@/services/http";
+const loading = shallowRef(false);
+const error = shallowRef("");
+async function open() {
+  if (loading.value) return;
+  loading.value = true;
+  error.value = "";
+  try {
+    const state = await apiRequest<{ status: string; reason?: string }>(
+      "/agent/workbench",
+    );
+    if (state.status === "available") window.location.assign("/agent");
+    else
+      error.value =
+        state.reason === "capacity-reserved"
+          ? "当前模型容量已为业务调用预留，请联系管理员配置工作台容量。"
+          : state.reason === "model-unconfigured"
+            ? "尚未配置可用模型。"
+            : "Agent 工作台暂不可用，请稍后手动重试。";
+  } catch (cause) {
+    error.value = cause instanceof Error ? cause.message : "工作台暂不可用";
+  } finally {
+    loading.value = false;
+  }
+}
+onMounted(open);
+</script>
+<template>
+  <section class="max-w-2xl space-y-4">
+    <h1 class="text-2xl font-semibold">Agent 原生工作台</h1>
+    <p class="text-sm text-muted-foreground">
+      在独立工作区中使用会话、文件与技能。当前登录与业务权限持续生效。
+    </p>
+    <p v-if="error" role="alert" class="text-sm text-destructive">
+      {{ error }}
+    </p>
+    <Button :disabled="loading" @click="open">{{
+      loading ? "正在连接…" : "打开工作台"
+    }}</Button>
+  </section>
+</template>

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

@@ -5,15 +5,25 @@ import { RefreshCwIcon } from "@lucide/vue";
 import { Button } from "@/components/ui/button";
 import WorkflowRunDetail from "./components/agent-workflow/WorkflowRunDetail.vue";
 import WorkflowRunList from "./components/agent-workflow/WorkflowRunList.vue";
+import WorkflowPresetCatalog from "./components/agent-workflow/WorkflowPresetCatalog.vue";
 import { useAgentWorkflowRuns } from "./composables/useAgentWorkflowRuns";
+import { useAgentWorkflowPresets } from "./composables/useAgentWorkflowPresets";
 
 const route = useRoute();
 const preferredRunId = computed(() => routeRunId(route.query.runId));
 const workflowState = useAgentWorkflowRuns({ preferredRunId });
+const presetState = useAgentWorkflowPresets();
 const refreshing = computed(
-  () => workflowState.listLoading.value || workflowState.detailLoading.value,
+  () =>
+    workflowState.listLoading.value ||
+    workflowState.detailLoading.value ||
+    presetState.loading.value,
 );
 
+async function refresh() {
+  await Promise.allSettled([workflowState.refresh(), presetState.refresh()]);
+}
+
 function routeRunId(value: LocationQueryValue | LocationQueryValue[]) {
   const candidate = Array.isArray(value) ? value[0] : value;
   const runId = candidate?.trim() ?? "";
@@ -35,18 +45,21 @@ function routeRunId(value: LocationQueryValue | LocationQueryValue[]) {
           页面不展示原始推理链、Prompt、Tool 参数或大对象结果。
         </p>
       </div>
-      <Button
-        variant="outline"
-        :disabled="refreshing"
-        @click="workflowState.refresh"
-      >
+      <Button variant="outline" :disabled="refreshing" @click="refresh">
         <RefreshCwIcon data-icon="inline-start" />
         {{ refreshing ? "刷新中..." : "刷新" }}
       </Button>
     </header>
 
+    <WorkflowPresetCatalog
+      :presets="presetState.presets.value"
+      :loading="presetState.loading.value"
+      :error="presetState.error.value"
+      @refresh="presetState.refresh"
+    />
+
     <div
-      class="grid gap-4 lg:h-[calc(100vh-12rem)] lg:min-h-[32rem] lg:grid-cols-[20rem_minmax(0,1fr)] lg:overflow-hidden"
+      class="grid gap-4 lg:min-h-[32rem] lg:grid-cols-[20rem_minmax(0,1fr)] lg:overflow-hidden"
     >
       <WorkflowRunList
         class="lg:min-h-0"

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

@@ -0,0 +1,71 @@
+<script setup lang="ts">
+import { useTemplateRef } from "vue";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import DiagnosticLogList from "./components/DiagnosticLogList.vue";
+import DiagnosticRecordDetails from "./components/DiagnosticRecordDetails.vue";
+import { useDiagnosticLookup } from "./composables/useDiagnosticLookup";
+
+const lookupForm = useTemplateRef<HTMLFormElement>("lookupForm");
+const { input, record, error, loading, lookup } = useDiagnosticLookup();
+
+function selectDiagnostic(id: string) {
+  input.value = id;
+  lookupForm.value?.querySelector("input")?.focus();
+  void lookup();
+}
+</script>
+
+<template>
+  <div class="space-y-5">
+    <header class="space-y-2">
+      <h1 class="text-2xl font-semibold text-foreground">错误诊断</h1>
+      <p class="text-sm text-muted-foreground">
+        分页浏览当前部署最近 30
+        天的服务端失败日志，也可按诊断编号定位。查询会留下审计记录。
+      </p>
+    </header>
+    <section class="rounded-xl border bg-card p-4">
+      <form
+        ref="lookupForm"
+        class="space-y-3"
+        :aria-busy="loading"
+        @submit.prevent="lookup"
+      >
+        <label for="diagnostic-id" class="text-sm font-medium">诊断编号</label>
+        <div class="flex flex-col gap-2 sm:flex-row">
+          <Input
+            id="diagnostic-id"
+            name="diagnosticId"
+            autocapitalize="off"
+            autocorrect="off"
+            :spellcheck="false"
+            enterkeyhint="search"
+            v-model="input"
+            class="min-w-0 flex-1 font-mono"
+            placeholder="diag-… 或 web-…"
+            autocomplete="off"
+            :maxlength="128"
+            :aria-invalid="Boolean(error)"
+            aria-describedby="diagnostic-help diagnostic-error"
+          />
+          <Button type="submit" :disabled="loading || !input.trim()">
+            {{ loading ? "查询中…" : "查询诊断" }}
+          </Button>
+        </div>
+        <p id="diagnostic-help" class="text-xs text-muted-foreground">
+          diag-… 可查询服务端索引；web-…
+          是浏览器本地编号，需结合发生时间检查浏览器控制台。
+        </p>
+        <p id="diagnostic-error" role="alert" class="text-sm text-destructive">
+          {{ error }}
+        </p>
+        <p v-if="loading" role="status" class="text-sm text-muted-foreground">
+          正在查询失败索引…
+        </p>
+      </form>
+    </section>
+    <DiagnosticRecordDetails v-if="record" :record="record" />
+    <DiagnosticLogList @select="selectDiagnostic" />
+  </div>
+</template>

package/template/apps/web/src/pages/system/DiagnosticLookupPage.webtest.ts

@@ -0,0 +1,102 @@
+import { flushPromises, mount } from "@vue/test-utils";
+import { beforeEach, expect, test, vi } from "vitest";
+import DiagnosticLookupPage from "./DiagnosticLookupPage.vue";
+import { ApiError } from "@/services/http";
+
+const mocks = vi.hoisted(() => ({ request: vi.fn() }));
+vi.mock("@/services/diagnostics-api", () => ({
+  getDiagnostic: mocks.request,
+  listDiagnostics: async () => ({ items: [], total: 0, page: 1, pageSize: 20 }),
+}));
+const id = "diag-0199e82a-abcd-7000-8000-000000000000";
+const record = {
+  diagnosticId: id,
+  requestId: "req-internal",
+  occurredAt: "2026-10-15T02:00:00Z",
+  expiresAt: "2026-11-14T02:00:00Z",
+  service: "server",
+  stage: "http",
+  method: "POST",
+  route: "/api/resources/:id",
+  statusCode: 500,
+  errorCode: "UNEXPECTED_FAILURE",
+};
+beforeEach(() => {
+  mocks.request.mockReset();
+});
+
+async function submit(wrapper: ReturnType<typeof mount>, value: string) {
+  await wrapper.get("input").setValue(value);
+  await wrapper.get("form").trigger("submit");
+  await flushPromises();
+}
+
+test("queries trimmed id and displays real failure details with uncertainty", async () => {
+  mocks.request.mockResolvedValue(record);
+  const wrapper = mount(DiagnosticLookupPage);
+  await submit(wrapper, ` ${id} `);
+  expect(mocks.request).toHaveBeenCalledWith(id, expect.any(AbortSignal));
+  for (const value of [
+    "req-internal",
+    "UNEXPECTED_FAILURE",
+    "/api/resources/:id",
+    "500",
+    "当前记录未确定具体原因",
+  ])
+    expect(wrapper.text()).toContain(value);
+  wrapper.unmount();
+});
+
+test.each([
+  ["web-00000000-0000-0000-0000-000000000000", "浏览器本地编号"],
+  ["invalid", "格式无效"],
+])("handles %s locally without a request", async (value, message) => {
+  const wrapper = mount(DiagnosticLookupPage);
+  await submit(wrapper, value);
+  expect(mocks.request).not.toHaveBeenCalled();
+  expect(wrapper.get('[role="alert"]').text()).toContain(message);
+  wrapper.unmount();
+});
+
+test.each([
+  [403, "无权查询"],
+  [404, "未找到"],
+  [410, "超过 30 天"],
+  [503, "暂不可用"],
+])(
+  "shows HTTP %s inline and clears the preceding result",
+  async (status, message) => {
+    mocks.request
+      .mockResolvedValueOnce(record)
+      .mockRejectedValueOnce(new ApiError("private error", status));
+    const wrapper = mount(DiagnosticLookupPage);
+    await submit(wrapper, id);
+    await wrapper.get("form").trigger("submit");
+    await flushPromises();
+    expect(wrapper.text()).toContain(message);
+    expect(wrapper.text()).not.toContain("req-internal");
+    expect(wrapper.text()).not.toContain("private error");
+    wrapper.unmount();
+  },
+);
+
+test("changing input aborts lookup and ignores an obsolete response", async () => {
+  let resolve!: (value: typeof record) => void;
+  mocks.request.mockImplementation(
+    () =>
+      new Promise((done) => {
+        resolve = done;
+      }),
+  );
+  const wrapper = mount(DiagnosticLookupPage);
+  await wrapper.get("input").setValue(id);
+  await wrapper.get("form").trigger("submit");
+  expect(wrapper.get("button").attributes("disabled")).toBeDefined();
+  const signal = mocks.request.mock.calls[0]![1] as AbortSignal;
+  await wrapper.get("input").setValue("another-id");
+  expect(signal.aborted).toBe(true);
+  resolve(record);
+  await flushPromises();
+  expect(wrapper.text()).not.toContain("req-internal");
+  wrapper.unmount();
+});