From c8bc4d851055b0899f306130971ee2bad6819d02 Mon Sep 17 00:00:00 2001
From: Xubin Ren <52506698+Re-bin@users.noreply.github.com>
Date: Fri, 7 Aug 2026 10:47:07 +0800
Subject: [PATCH] fix(webui): make active model presets deletable

---
 .../src/components/settings/SettingsView.tsx  | 33 +++++++--
 webui/src/tests/settings-view.test.tsx        | 71 ++++++++++++++++++-
 2 files changed, 97 insertions(+), 7 deletions(-)

diff --git a/webui/src/components/settings/SettingsView.tsx b/webui/src/components/settings/SettingsView.tsx
index 237e310b9..00953295f 100644
--- a/webui/src/components/settings/SettingsView.tsx
+++ b/webui/src/components/settings/SettingsView.tsx
@@ -1467,10 +1467,21 @@ export function SettingsView({
     ) {
       return;
     }
+    const presetName = modelPresetPendingDelete.name;
+    const nextOrder = modelCallOrder.includes(presetName)
+      ? modelCallOrder.filter((name) => name !== presetName)
+      : null;
+    if (nextOrder?.length === 0) return;
     setSaving(true);
     try {
-      const payload = await deleteModelConfiguration(token, modelPresetPendingDelete.name);
+      if (nextOrder) {
+        const orderedPayload = await updateModelCallOrder(token, nextOrder);
+        applyPayload(orderedPayload);
+        onModelNameChange(orderedPayload.agent.model || null);
+      }
+      const payload = await deleteModelConfiguration(token, presetName);
       applyPayload(payload);
+      onModelNameChange(payload.agent.model || null);
       setModelPresetPendingDelete(null);
       setError(null);
     } catch (err) {
@@ -3371,7 +3382,12 @@ function ModelsSettings({
     form.temperature < 0 ||
     form.temperature > 2;
   const selectedPresetReferenced = Boolean(
-    selectedPreset && (settings.model_call_order ?? []).includes(selectedPreset.name),
+    selectedPreset && callOrder.includes(selectedPreset.name),
+  );
+  const selectedPresetOnlyActive = Boolean(
+    selectedPresetReferenced &&
+      selectedPreset &&
+      !callOrder.some((name) => name !== selectedPreset.name),
   );
   const callOrderBusy = orderSaving || saving;
   const selectPreset = (preset: SettingsPayload["model_presets"][number]) => {
@@ -3437,7 +3453,7 @@ function ModelsSettings({
       key={key}
       id="model-preset-editor"
       data-testid="model-preset-editor"
-      className="divide-y divide-border/45 bg-muted/10 motion-reduce:animate-none animate-in fade-in-0 slide-in-from-top-1 duration-200"
+      className="divide-y divide-border/45 bg-muted/30 motion-reduce:animate-none animate-in fade-in-0 slide-in-from-top-1 duration-200"
     >
       {creating ? (
         <div className="flex min-h-[52px] items-center px-4 py-3 sm:px-5">
@@ -3564,10 +3580,15 @@ function ModelsSettings({
           <Button
             size="sm"
             variant="ghost"
-            className="self-start rounded-full text-muted-foreground hover:text-destructive"
-            disabled={selectedPresetReferenced || saving || orderSaving}
+            className={cn(
+              "self-start rounded-full",
+              selectedPresetOnlyActive
+                ? "text-muted-foreground"
+                : "text-destructive hover:bg-destructive/10 hover:text-destructive",
+            )}
+            disabled={selectedPresetOnlyActive || saving || orderSaving}
             title={
-              selectedPresetReferenced
+              selectedPresetOnlyActive
                 ? tx(
                     "settings.models.removeBeforeDelete",
                     "Remove this preset from the call order before deleting it.",
diff --git a/webui/src/tests/settings-view.test.tsx b/webui/src/tests/settings-view.test.tsx
index aa2156265..a78ede48e 100644
--- a/webui/src/tests/settings-view.test.tsx
+++ b/webui/src/tests/settings-view.test.tsx
@@ -2167,8 +2167,9 @@ describe("SettingsView Apps catalog", () => {
     expect(trigger).toHaveAttribute("aria-expanded", "true");
     expect(trigger).toHaveAttribute("aria-controls", "model-preset-editor");
     expect(row.nextElementSibling).toBe(editor);
-    expect(editor).toHaveClass("slide-in-from-top-1");
+    expect(editor).toHaveClass("slide-in-from-top-1", "bg-muted/30");
     expect(within(editor).getByDisplayValue("Primary")).toBeInTheDocument();
+    expect(within(editor).getByRole("button", { name: "Delete" })).toBeDisabled();
 
     fireEvent.click(trigger);
 
@@ -2176,6 +2177,74 @@ describe("SettingsView Apps catalog", () => {
     expect(screen.queryByTestId("model-preset-editor")).not.toBeInTheDocument();
   });
 
+  it("removes an active preset from the call order before deleting it", async () => {
+    const { payload, backupPreset } = settingsPayloadWithBackup();
+    const orderedPayload: SettingsPayload = {
+      ...payload,
+      agent: {
+        ...payload.agent,
+        model: backupPreset.model,
+        provider: backupPreset.provider,
+        resolved_provider: backupPreset.resolved_provider,
+        model_preset: backupPreset.name,
+      },
+      model_presets: payload.model_presets.map((preset) => ({
+        ...preset,
+        active: preset.name === backupPreset.name,
+      })),
+      model_call_order: [backupPreset.name],
+    };
+    const deletedPayload: SettingsPayload = {
+      ...orderedPayload,
+      model_presets: orderedPayload.model_presets.filter(
+        (preset) => preset.name !== "primary",
+      ),
+    };
+    const fetchMock = vi.fn(async (input: RequestInfo | URL) => {
+      const url = String(input);
+      if (url === "/api/settings") return jsonResponse(payload);
+      if (url === "/api/settings/cli-apps") {
+        return jsonResponse({ apps: [], installed_count: 0 });
+      }
+      if (url === "/api/settings/mcp-presets") {
+        return jsonResponse({ presets: [], installed_count: 0 });
+      }
+      if (url.startsWith("/api/settings/model-call-order/update?")) {
+        return jsonResponse(orderedPayload);
+      }
+      if (url.startsWith("/api/settings/model-configurations/delete?")) {
+        return jsonResponse(deletedPayload);
+      }
+      return { ok: false, status: 404, json: async () => ({}) } as Response;
+    });
+    vi.stubGlobal("fetch", fetchMock);
+
+    renderSettingsView({ initialSection: "models", initialSettings: payload });
+
+    await togglePresetEditor();
+    const deleteButton = screen.getByRole("button", { name: "Delete" });
+    expect(deleteButton).toBeEnabled();
+    fireEvent.click(deleteButton);
+    const dialog = await screen.findByRole("dialog", { name: "Delete model preset?" });
+    fireEvent.click(within(dialog).getByRole("button", { name: "Delete" }));
+
+    await waitFor(() => {
+      const urls = fetchMock.mock.calls.map(([input]) => String(input));
+      const orderCallIndex = urls.findIndex((url) =>
+        url.startsWith("/api/settings/model-call-order/update?"),
+      );
+      const deleteCallIndex = urls.findIndex((url) =>
+        url.startsWith("/api/settings/model-configurations/delete?"),
+      );
+      expect(orderCallIndex).toBeGreaterThanOrEqual(0);
+      expect(deleteCallIndex).toBeGreaterThan(orderCallIndex);
+      const orderUrl = new URL(urls[orderCallIndex], "http://nanobot.test");
+      expect(JSON.parse(orderUrl.searchParams.get("order") ?? "[]")).toEqual(["backup"]);
+    });
+    expect(screen.queryByTestId("model-call-order-row-primary")).not.toBeInTheDocument();
+    expect(screen.getByTestId("model-call-order-row-backup")).toBeInTheDocument();
+  });
+
   it("drags model presets to reorder and saves the model call order immediately", async () => {
     const { payload, backupPreset } = settingsPayloadWithBackup();
     const updatedPayload: SettingsPayload = {