Live deploy console: stream compose up output to the browser (0.22.0)

Deploying a local stack from the editor now opens a console modal that streams
the `docker compose up -d` output (image pulls, container creation) live over a
new `/ws/deploy/{stack_id}` WebSocket, replacing the blind "Deploying…" spinner.
The compose subprocess keeps running server-side if the modal is closed early;
the same audit entry + start/error notification as the REST start path is recorded.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

frontend/package.json

@@ -1,7 +1,7 @@
 {
   "name": "stackpilot-frontend",
   "private": true,
-  "version": "0.21.6",
+  "version": "0.22.0",
   "type": "module",
   "scripts": {
     "dev": "vite",

frontend/src/components/stacks/DeployConsole.tsx

@@ -0,0 +1,108 @@
+import { useEffect, useRef, useState } from "react";
+import { CheckCircle2, Loader2, XCircle } from "lucide-react";
+import { Button } from "@/components/ui";
+import { useAuthStore } from "@/store/auth";
+
+const MAX_LINES = 2000;
+
+type Phase = "running" | "success" | "failed" | "error";
+
+/**
+ * Modal that runs `compose up -d` over the `/ws/deploy/{id}` WebSocket and
+ * streams its output (image pulls, container creation) live, so the user sees
+ * deploy progress instead of a blind spinner. The compose subprocess keeps
+ * running on the server even if this modal is closed early.
+ */
+export function DeployConsole({
+  stackId,
+  onClose,
+}: {
+  stackId: string;
+  onClose: () => void;
+}) {
+  const [lines, setLines] = useState<string[]>([]);
+  const [phase, setPhase] = useState<Phase>("running");
+  const [errorDetail, setErrorDetail] = useState<string | null>(null);
+  const boxRef = useRef<HTMLDivElement>(null);
+  const token = useAuthStore((s) => s.accessToken);
+
+  useEffect(() => {
+    if (!token) return;
+    const proto = window.location.protocol === "https:" ? "wss" : "ws";
+    const url = `${proto}://${window.location.host}/ws/deploy/${stackId}?token=${token}`;
+    const ws = new WebSocket(url);
+    ws.onmessage = (ev) => {
+      try {
+        const msg = JSON.parse(ev.data);
+        if (msg.type === "log") {
+          setLines((prev) => {
+            const next = [...prev, msg.line as string];
+            return next.length > MAX_LINES ? next.slice(-MAX_LINES) : next;
+          });
+        } else if (msg.type === "done") {
+          setPhase(msg.returncode === 0 ? "success" : "failed");
+        } else if (msg.type === "error") {
+          setPhase("error");
+          setErrorDetail(msg.detail || "Deploy error");
+        }
+      } catch {
+        /* ignore */
+      }
+    };
+    ws.onclose = () => {
+      // If the socket dropped before a done/error frame, surface it.
+      setPhase((p) => (p === "running" ? "error" : p));
+    };
+    return () => ws.close();
+  }, [stackId, token]);
+
+  useEffect(() => {
+    if (boxRef.current) boxRef.current.scrollTop = boxRef.current.scrollHeight;
+  }, [lines]);
+
+  const done = phase !== "running";
+
+  return (
+    <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50 p-4">
+      <div className="flex max-h-[80vh] w-full max-w-3xl flex-col rounded-xl border border-slate-200 bg-card shadow-xl dark:border-slate-700 dark:bg-card-dark">
+        <div className="flex items-center gap-2 border-b border-slate-200 px-5 py-3 dark:border-slate-700">
+          {phase === "running" && (
+            <Loader2 className="h-5 w-5 animate-spin text-accent dark:text-accent-dark" />
+          )}
+          {phase === "success" && <CheckCircle2 className="h-5 w-5 text-green-500" />}
+          {(phase === "failed" || phase === "error") && (
+            <XCircle className="h-5 w-5 text-red-500" />
+          )}
+          <h2 className="text-lg font-semibold">
+            {phase === "running" && `Deploying ${stackId}…`}
+            {phase === "success" && `Deployed ${stackId} ✓`}
+            {phase === "failed" && `Deploy of ${stackId} failed`}
+            {phase === "error" && `Deploy of ${stackId} errored`}
+          </h2>
+        </div>
+
+        <div
+          ref={boxRef}
+          className="min-h-[200px] flex-1 overflow-auto bg-slate-950 p-3 font-mono text-xs leading-relaxed text-slate-200"
+        >
+          {lines.length === 0 && phase === "running" ? (
+            <span className="text-slate-500">Starting compose up…</span>
+          ) : (
+            lines.map((l, i) => (
+              <div key={i} className="whitespace-pre-wrap break-all">
+                {l}
+              </div>
+            ))
+          )}
+          {errorDetail && <div className="mt-2 text-red-400">{errorDetail}</div>}
+        </div>
+
+        <div className="flex justify-end gap-2 border-t border-slate-200 px-5 py-3 dark:border-slate-700">
+          <Button variant={done ? "primary" : "outline"} onClick={onClose}>
+            {done ? "Close" : "Close (deploy continues)"}
+          </Button>
+        </div>
+      </div>
+    </div>
+  );
+}

frontend/src/pages/StackEditor.tsx

@@ -7,6 +7,7 @@ import { Button, Card, Input } from "@/components/ui";
 import { EditorHelperPanel } from "@/components/stacks/EditorHelperPanel";
 import { EnvEditor } from "@/components/env/EnvEditor";
 import { PortConflictDialog } from "@/components/stacks/PortConflictDialog";
+import { DeployConsole } from "@/components/stacks/DeployConsole";
 import { stacksApi } from "@/api/stacks";
 import { agentsApi } from "@/api/agents";
 import { portsApi, type PortConflict } from "@/api/ports";
@@ -40,6 +41,7 @@ export function StackEditor() {
   const [conflicts, setConflicts] = useState<PortConflict[] | null>(null);
   const [checking, setChecking] = useState(false);
   const [host, setHost] = useState("local");
+  const [deployId, setDeployId] = useState<string | null>(null);
 
   const existing = useQuery({
     queryKey: ["stack", id],
@@ -97,9 +99,10 @@ export function StackEditor() {
       qc.invalidateQueries({ queryKey: ["stack", stackId] });
       toast.success("Saved");
       if (deploy && stackId) {
-        const t = toast.loading("Deploying…");
-        await stacksApi.start(stackId);
-        toast.success("Deployed ✓", { id: t });
+        // Stream the deploy live in the console modal instead of a blind
+        // spinner; navigation happens when the user closes it.
+        setDeployId(stackId);
+        return;
       }
       navigate(`/stacks/${stackId}`);
     } catch (err) {
@@ -244,6 +247,19 @@ export function StackEditor() {
           onCancel={() => setConflicts(null)}
         />
       )}
+
+      {deployId && (
+        <DeployConsole
+          stackId={deployId}
+          onClose={() => {
+            const sid = deployId;
+            setDeployId(null);
+            qc.invalidateQueries({ queryKey: ["stacks"] });
+            qc.invalidateQueries({ queryKey: ["stack", sid] });
+            navigate(`/stacks/${sid}`);
+          }}
+        />
+      )}
     </div>
   );
 }