ui(cluster): Add Fleet autoscaling and notifications

CHANGELOG.md

@@ -1,5 +1,16 @@
 # Changelog
 
+## [0.4.0-beta.5] - 2026-08-22
+
+### Added
+- Guided Fleet setup, peer access controls, runtime provider selection, and remote deployment inventories
+- Deployment autoscaling configuration with workload compatibility and activation guidance
+- Grouped notification incidents with editable targets and delivery rules
+
+### Changed
+- Deployments show the selected server in the navigation and remain local by default
+- Deployment configuration keeps scaling beside settings while service image changes remain in the overview
+
 ## [0.4.0-beta.4] - 2026-08-21
 
 ### Added

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@flatrun/ui",
-  "version": "0.4.0-beta.4",
+  "version": "0.4.0-beta.5",
   "description": "Web interface for FlatRun container orchestration",
   "author": "FlatRun",
   "license": "MIT",

src/assets/design-system.css

@@ -52,14 +52,14 @@
   --color-info-600: #2563eb;
   --color-info-700: #1e40af;
 
-  /* Border Radius (scale: 2, 4, 6, 8, 12) */
+  /* Border Radius */
   --radius-xs: 2px;
-  --radius-sm: 4px;
-  --radius-md: 6px;
-  --radius-lg: 8px;
-  --radius-xl: 12px;
+  --radius-sm: 3px;
+  --radius-md: 4px;
+  --radius-lg: 6px;
+  --radius-xl: 8px;
   --radius-modal: 14px;
-  --radius-full: 9999px;
+  --radius-full: 4px;
 
   /* Spacing */
   --space-1: 0.25rem;
@@ -332,7 +332,7 @@
   display: inline-block;
   width: 10px;
   height: 10px;
-  border-radius: 50%;
+  border-radius: var(--radius-xs);
 }
 
 .status-indicator.running {

src/components/DeploymentAutoscaleCard.test.ts

@@ -0,0 +1,124 @@
+import { flushPromises, mount } from "@vue/test-utils";
+import { beforeEach, describe, expect, it, vi } from "vitest";
+import DeploymentAutoscaleCard from "./DeploymentAutoscaleCard.vue";
+
+vi.mock("@/stores/notifications", () => ({
+  useNotificationsStore: () => ({ success: vi.fn(), error: vi.fn() }),
+}));
+
+vi.mock("@/services/api", () => ({
+  autoscaleApi: {
+    getPolicy: vi.fn(),
+    updatePolicy: vi.fn(),
+    getCompatibility: vi.fn(),
+    updateWorkload: vi.fn(),
+    activate: vi.fn(),
+  },
+}));
+
+describe("DeploymentAutoscaleCard", () => {
+  beforeEach(async () => {
+    window.history.replaceState({}, "", "/");
+    vi.clearAllMocks();
+    const { autoscaleApi } = await import("@/services/api");
+    vi.mocked(autoscaleApi.getPolicy).mockResolvedValue({
+      data: {
+        enabled: true,
+        min_replicas: 1,
+        max_replicas: 3,
+        scale_up_percent: 80,
+        scale_down_percent: 30,
+        scale_up_windows: 3,
+        scale_down_windows: 10,
+        cooldown_seconds: 300,
+        allow_fleet_capacity: false,
+        state: { high_windows: 0, low_windows: 0 },
+      },
+    } as any);
+    vi.mocked(autoscaleApi.updatePolicy).mockImplementation(
+      async (_deployment, policy) =>
+        ({
+          data: { ...policy, state: { high_windows: 0, low_windows: 0 } },
+        }) as any,
+    );
+    vi.mocked(autoscaleApi.getCompatibility).mockResolvedValue({
+      data: {
+        compatible: true,
+        service: "app",
+        image: "nginx:alpine",
+        services: ["app"],
+        blockers: [],
+        warnings: [],
+        workload: { service: "app", stateless: true, storage: { mode: "none", class: "" } },
+      },
+    } as any);
+    vi.mocked(autoscaleApi.updateWorkload).mockResolvedValue({
+      data: {
+        compatible: true,
+        service: "app",
+        image: "nginx:alpine",
+        services: ["app"],
+        blockers: [],
+        warnings: [],
+        workload: { service: "app", stateless: true, storage: { mode: "none", class: "" } },
+      },
+    } as any);
+    vi.mocked(autoscaleApi.activate).mockResolvedValue({
+      data: { workload: { workload: "shop", desired: 1, available: 1 }, route: { id: "shop" } },
+    } as any);
+  });
+
+  it("activates managed scaling through a confirmation modal", async () => {
+    const { autoscaleApi } = await import("@/services/api");
+    const wrapper = mount(DeploymentAutoscaleCard, {
+      props: { deployment: "shop", canWrite: true },
+      global: {
+        stubs: {
+          BaseModal: {
+            props: ["visible"],
+            template: '<div v-if="visible"><slot /><slot name="footer" /></div>',
+          },
+        },
+      },
+    });
+    await flushPromises();
+    await wrapper.find(".activate-button").trigger("click");
+    await wrapper
+      .findAll("button")
+      .find((button) => button.text() === "Activate scaling")
+      ?.trigger("click");
+    await flushPromises();
+
+    expect(autoscaleApi.activate).toHaveBeenCalledWith("shop");
+  });
+
+  it("updates the policy through the deployment UI", async () => {
+    const { autoscaleApi } = await import("@/services/api");
+    const wrapper = mount(DeploymentAutoscaleCard, {
+      props: { deployment: "shop", canWrite: true },
+      global: {
+        stubs: {
+          BaseModal: {
+            props: ["visible"],
+            template: '<div v-if="visible"><slot /><slot name="footer" /></div>',
+          },
+        },
+      },
+    });
+    await flushPromises();
+    await wrapper
+      .findAll(".autoscale-header button")
+      .find((button) => button.text() === "Configure")
+      ?.trigger("click");
+    await wrapper.find('input[type="number"]').setValue(2);
+    await wrapper.find("#autoscale-policy-form").trigger("submit");
+    await flushPromises();
+
+    expect(autoscaleApi.updatePolicy).toHaveBeenCalledWith("shop", expect.objectContaining({ min_replicas: 2 }));
+    expect(autoscaleApi.updateWorkload).toHaveBeenCalledWith("shop", {
+      service: "app",
+      stateless: true,
+      storage: { mode: "none", class: "" },
+    });
+  });
+});