feat(ui): Stream deployment and service action progress

src/assets/design-system.css

@@ -175,6 +175,34 @@
   --shadow-xl: 0 10px 25px rgba(0, 0, 0, 0.5);
   --shadow-2xl: 0 25px 50px rgba(0, 0, 0, 0.6);
   --ring-color: rgba(96, 165, 250, 0.25);
+
+  /* Status tints adapted for dark surfaces: the -50/-100/-200 tints become
+     translucent fills and the -700 text shade lightens, so tinted panels read
+     correctly on dark. The saturated -500/-600 shades are left untouched for
+     solid fills, dots, and icons. */
+  --color-primary-50: rgba(59, 130, 246, 0.15);
+  --color-primary-100: rgba(59, 130, 246, 0.22);
+  --color-primary-700: #93c5fd;
+
+  --color-success-50: rgba(34, 197, 94, 0.15);
+  --color-success-100: rgba(34, 197, 94, 0.22);
+  --color-success-200: rgba(34, 197, 94, 0.3);
+  --color-success-700: #86efac;
+
+  --color-warning-50: rgba(245, 158, 11, 0.15);
+  --color-warning-100: rgba(245, 158, 11, 0.22);
+  --color-warning-200: rgba(245, 158, 11, 0.3);
+  --color-warning-700: #fcd34d;
+
+  --color-danger-50: rgba(239, 68, 68, 0.15);
+  --color-danger-100: rgba(239, 68, 68, 0.22);
+  --color-danger-200: rgba(239, 68, 68, 0.3);
+  --color-danger-700: #fca5a5;
+
+  --color-info-50: rgba(59, 130, 246, 0.15);
+  --color-info-100: rgba(59, 130, 246, 0.22);
+  --color-info-200: rgba(59, 130, 246, 0.3);
+  --color-info-700: #93c5fd;
 }
 
 /* Component Base Styles */

src/components/OperationModal.vue

@@ -4,20 +4,15 @@
       <div class="header-info">
         <span class="operation-badge" :class="operation">{{ operation }}</span>
         <h3>{{ title }}</h3>
-      </div>
-    </template>
-
-    <div class="status-section">
-      <div class="status-indicator" :class="statusClass">
-        <i :class="statusIcon" />
-      </div>
-      <div class="status-text">
-        <span class="status-label">{{ statusLabel }}</span>
-        <span v-if="startTime" class="status-time">
-          {{ elapsedTime }}
+        <span class="header-status" :class="statusClass">
+          <Icon v-if="isRunning" name="loader-circle" :size="16" spin />
+          <Icon v-else-if="isSuccess === true" name="check" :size="16" />
+          <Icon v-else-if="isSuccess === false" name="x" :size="16" />
+          <span class="header-status-label">{{ statusLabel }}</span>
+          <span v-if="startTime" class="header-elapsed">{{ elapsedTime }}</span>
         </span>
       </div>
-    </div>
+    </template>
 
     <div class="output-section">
       <LogViewer
@@ -40,11 +35,12 @@
 import { ref, computed, watch } from "vue";
 import BaseModal from "./base/BaseModal.vue";
 import LogViewer from "./LogViewer.vue";
+import Icon from "./base/Icon.vue";
 import type { AssistContext } from "@/stores/assist";
 
 const props = defineProps<{
   visible: boolean;
-  operation: "start" | "stop" | "restart";
+  operation: "start" | "stop" | "restart" | "rebuild";
   deploymentName: string;
   output: string;
   isRunning: boolean;
@@ -71,6 +67,7 @@ const title = computed(() => {
     start: "Starting",
     stop: "Stopping",
     restart: "Restarting",
+    rebuild: "Rebuilding",
   };
   return `${ops[props.operation]} ${props.deploymentName}`;
 });
@@ -82,16 +79,9 @@ const statusClass = computed(() => {
   return "pending";
 });
 
-const statusIcon = computed(() => {
-  if (props.isRunning) return "pi pi-spin pi-spinner";
-  if (props.isSuccess === true) return "pi pi-check";
-  if (props.isSuccess === false) return "pi pi-times";
-  return "pi pi-clock";
-});
-
 const statusLabel = computed(() => {
-  if (props.isRunning) return "In Progress...";
-  if (props.isSuccess === true) return "Completed Successfully";
+  if (props.isRunning) return "Running";
+  if (props.isSuccess === true) return "Done";
   if (props.isSuccess === false) return "Failed";
   return "Pending";
 });
@@ -139,6 +129,42 @@ const handleClose = () => {
   gap: var(--space-3);
 }
 
+.header-status {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--space-2);
+  margin-left: auto;
+  padding: var(--space-1) var(--space-3);
+  border-radius: var(--radius-full);
+  font-size: var(--text-sm);
+  font-weight: var(--font-medium);
+}
+
+.header-status.running {
+  background: var(--color-info-50);
+  color: var(--color-info-700);
+}
+
+.header-status.success {
+  background: var(--color-success-50);
+  color: var(--color-success-700);
+}
+
+.header-status.error {
+  background: var(--color-danger-50);
+  color: var(--color-danger-700);
+}
+
+.header-status.pending {
+  background: var(--surface-inset);
+  color: var(--text-muted);
+}
+
+.header-elapsed {
+  font-variant-numeric: tabular-nums;
+  opacity: 0.75;
+}
+
 .operation-badge {
   padding: var(--space-1) var(--space-3);
   border-radius: var(--radius-full);
@@ -163,75 +189,19 @@ const handleClose = () => {
   color: var(--color-info-700);
 }
 
+.operation-badge.rebuild {
+  background: var(--color-warning-50);
+  color: var(--color-warning-700);
+}
+
 .header-info h3 {
   font-size: var(--text-xl);
   font-weight: var(--font-semibold);
   color: var(--text);
   margin: 0;
 }
 
-.status-section {
-  display: flex;
-  align-items: center;
-  gap: var(--space-4);
-  padding: var(--space-5);
-  background: linear-gradient(135deg, var(--surface-sunken), var(--surface-raised));
-  border: 1px solid var(--border-subtle);
-  border-radius: var(--radius-md);
-  margin-bottom: var(--space-6);
-}
-
-.status-indicator {
-  width: 56px;
-  height: 56px;
-  border-radius: var(--radius-xl);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  font-size: 1.5rem;
-  transition: all 0.3s ease;
-}
-
-.status-indicator.pending {
-  background: var(--surface-inset);
-  color: var(--text-muted);
-}
-
-.status-indicator.running {
-  background: linear-gradient(135deg, var(--color-primary-50), var(--color-info-50));
-  color: var(--color-primary-600);
-  box-shadow: 0 0 0 4px var(--color-primary-50);
-}
-
-.status-indicator.success {
-  background: var(--color-success-50);
-  color: var(--color-success-600);
-}
-
-.status-indicator.error {
-  background: var(--color-danger-50);
-  color: var(--color-danger-600);
-}
-
-.status-text {
-  display: flex;
-  flex-direction: column;
-  gap: var(--space-1);
-}
-
-.status-label {
-  font-size: var(--text-lg);
-  font-weight: var(--font-semibold);
-  color: var(--text);
-}
-
-.status-time {
-  font-size: var(--text-sm);
-  color: var(--text-muted);
-}
-
 .output-section {
-  margin-top: var(--space-4);
   border-radius: var(--radius-sm);
   overflow: hidden;
 }

src/components/base/SplitActionButton.vue

@@ -118,7 +118,7 @@ onBeforeUnmount(() => document.removeEventListener("click", onDocumentClick));
 }
 
 .menu-item:hover {
-  background: var(--surface-hover, #f1f5f9);
+  background: var(--surface-inset);
 }
 
 .menu-item i {

src/composables/useDeploymentJob.test.ts

@@ -0,0 +1,105 @@
+import { describe, it, expect, vi, beforeEach } from "vitest";
+import { flushPromises } from "@vue/test-utils";
+import { effectScope } from "vue";
+
+vi.mock("@/services/api", () => ({
+  deploymentsApi: {
+    start: vi.fn(),
+    stop: vi.fn(),
+    restart: vi.fn(),
+    rebuild: vi.fn(),
+    getJob: vi.fn(),
+  },
+  deploymentJobWsUrl: vi.fn().mockReturnValue("ws://localhost/stream"),
+}));
+
+import { deploymentsApi } from "@/services/api";
+import { useDeploymentJob } from "./useDeploymentJob";
+
+const start = deploymentsApi.start as ReturnType<typeof vi.fn>;
+const restart = deploymentsApi.restart as ReturnType<typeof vi.fn>;
+const getJob = deploymentsApi.getJob as ReturnType<typeof vi.fn>;
+
+// Force the websocket constructor to throw so the composable falls back to
+// polling deterministically, the path available in a jsdom environment.
+function disableWebSocket() {
+  vi.stubGlobal("WebSocket", function () {
+    throw new Error("no websocket in test");
+  });
+}
+
+function withScope<T>(fn: () => T): T {
+  const scope = effectScope();
+  return scope.run(fn) as T;
+}
+
+describe("useDeploymentJob", () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+    localStorage.clear();
+    disableWebSocket();
+  });
+
+  it("enqueues an action and settles to success via the poll fallback", async () => {
+    start.mockResolvedValue({ data: { job_id: "job-1", status: "pending" } });
+    getJob.mockResolvedValue({ data: { status: "succeeded", output: "Started", lines: [] } });
+
+    const settled = vi.fn();
+    const { state, run } = withScope(() => useDeploymentJob(settled));
+
+    await run("start", "app");
+    await flushPromises();
+
+    expect(start).toHaveBeenCalledWith("app");
+    expect(getJob).toHaveBeenCalledWith("app", "job-1");
+    expect(state.isRunning).toBe(false);
+    expect(state.isSuccess).toBe(true);
+    expect(state.output).toBe("Started");
+    expect(settled).toHaveBeenCalledTimes(1);
+    expect(localStorage.getItem("deployment_active_jobs")).toBe("{}");
+  });
+
+  it("surfaces a failed job", async () => {
+    restart.mockResolvedValue({ data: { job_id: "job-2", status: "pending" } });
+    getJob.mockResolvedValue({ data: { status: "failed", output: "boom", error: "exit 1", lines: [] } });
+
+    const { state, run } = withScope(() => useDeploymentJob());
+    await run("restart", "app");
+    await flushPromises();
+
+    expect(state.isSuccess).toBe(false);
+    expect(state.output).toBe("boom");
+  });
+
+  it("attaches to the in-flight job when the action is rejected as concurrent", async () => {
+    start.mockRejectedValue({ response: { status: 409, data: { active_job_id: "job-running" } } });
+    getJob.mockResolvedValue({ data: { status: "succeeded", output: "ok", lines: [] } });
+
+    const { state, run } = withScope(() => useDeploymentJob());
+    await run("start", "app");
+    await flushPromises();
+
+    expect(getJob).toHaveBeenCalledWith("app", "job-running");
+    expect(state.isSuccess).toBe(true);
+  });
+
+  it("resumes a persisted job after a reload", async () => {
+    localStorage.setItem("deployment_active_jobs", JSON.stringify({ app: { jobId: "job-3", operation: "restart" } }));
+    getJob.mockResolvedValue({ data: { status: "succeeded", output: "resumed", lines: [] } });
+
+    const { state, resume } = withScope(() => useDeploymentJob());
+    const found = await resume("app");
+    await flushPromises();
+
+    expect(found).toBe(true);
+    expect(state.visible).toBe(true);
+    expect(state.operation).toBe("restart");
+    expect(state.isSuccess).toBe(true);
+    expect(state.output).toBe("resumed");
+  });
+
+  it("reports no job to resume when none was persisted", async () => {
+    const { resume } = withScope(() => useDeploymentJob());
+    expect(await resume("app")).toBe(false);
+  });
+});