Fix what a review of the whole app found, end to end (0.67.1)

A pass over every feature against a real Docker daemon, then clicking
through the UI as admin and read-only user, on a desktop and a phone.

Security. /ws/deploy ran compose up for the read-only role; it is
admin-only now. A container's inspect view, a stack's compose file
(POSTGRES_PASSWORD: hunter2) and the viewer's .env tab no longer show
credentials to that role. Git branch and URL values that git would read
as options (-x, ext::) are refused. SFTP host keys are checked: pinned
on first use or entered by hand (key line or SHA256 fingerprint), a
different key is refused before the password is sent. A backup name
from the API can no longer reach outside the destination folder. The
file browser refuses to move or rename a browse root, as delete did.

Docker lifecycle. Closing the deploy console released the stack lock
while compose was still running and logged rc=None as success; deploys
and updates are now background runs that hold the lock to the end,
report the real exit code and can be re-attached to. Every closed log
view left a `compose logs -f` behind. A dozen open tabs exhausted the
default thread pool and hung the API; event and exec streams have their
own threads. Auto-update and the update endpoint ignored failed pulls.
A deleted git stack was recreated and started by the next webhook or
poll; deleting a stack now drops its git source, auto-update policy and
schedule entries. Deleting no longer walks into mounted shares, is
refused while a backup runs, and removes the containers even when the
compose file is broken. Stack folders compose has to normalise
(Nextcloud -> nextcloud) work everywhere and group correctly on the
volumes, networks and images pages.

Detection. Host port conflicts read the container's own network
namespace; /proc/1/net is read instead. Images referenced as docker.io/…
were never update-checked; local builds no longer report "needs
credentials". NVIDIA GPUs are read from the driver's procfs. The backup
dialog's "path mismatch" warning came from mountinfo's filesystem-relative
root and fired for any stacks folder on its own disk, ZFS dataset or
btrfs subvolume; the host path now comes from Docker's mounts.

Backups and destinations. The download ignored the folder/volume
selection (axios sent binds[]). Restoring under a new name kept the old
one. A report header past nginx's buffer turned a good backup into a
502. SFTP/S3 errors were bare 500s and "Test" did not try to write.
A destination used by a schedule could be deleted. Backup file names
are in the schedule's or the browser's time zone instead of UTC.

Editor and converter. `docker run` conversion produced invalid compose
for --network host, named volumes and -dit; --gpus and --mount were
dropped; a multi-line command pasted into the one-line field became
`image: ' '` (now a textarea, and flattened continuations are read).
Validation failed for env_file stacks. The editor overwrote unsaved
edits on every container event, lost them on a stray click (now asks),
threw when closing the diff, and its helper panel listed the starter
service "app" for every existing stack. Monaco is bundled instead of
loaded from jsdelivr, so the editor works offline (and monaco-editor
0.57 drops the dompurify advisory; axios and react-router updated).

UI. All times were two hours off: offset-less UTC from SQLite was read
as local time, and "next run" always said "just now". A token refresh
mid-session duplicated deploys, reset terminals and doubled logs. A
backend restart (update, self-update) signed everyone out on reload; the
page now waits for it. The editor was unusable on a phone, tables and
tabs overflowed, dialog text was black on the dark theme, and the file
browser opened on an error with the default roots. Read-only users get
"Admin only" pages instead of 403s; in-use networks offer no delete;
"Scan all" covers StackPilot's own stacks only and runs in the
background instead of timing out at 600s.

Deployment. nginx passes the port in Host (the OIDC redirect URI lost
:5009) and keeps an outer proxy's X-Forwarded-Proto. The frontend waits
for a healthy backend (healthcheck probes every 2s while starting). The
frontend image builds with npm ci. Secrets are 0644 in a 0700 folder so
non-root containers can read them; existing files are fixed at startup.
The test suite no longer starts real containers on a host with Docker.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01Fx7gcuy8d6nPd95g43rGHu

frontend/src/components/stacks/AutoUpdatePanel.tsx

@@ -4,6 +4,7 @@ import { toast } from "sonner";
 import { Badge, Button, Card } from "@/components/ui";
 import { autoUpdateApi, type AutoUpdatePolicy } from "@/api/autoUpdate";
 import { apiErrorMessage } from "@/api/client";
+import { parseServerTime } from "@/lib/utils";
 
 const STATUS_TONE: Record<string, string> = {
   updated: "text-green-500",
@@ -110,7 +111,7 @@ export function AutoUpdatePanel({
 
       {p.last_run && (
         <p className="text-xs text-slate-500">
-          Last run {new Date(p.last_run).toLocaleString()} —{" "}
+          Last run {parseServerTime(p.last_run).toLocaleString()} —{" "}
           <span className={STATUS_TONE[p.last_status ?? ""] ?? "text-slate-500"}>
             {p.last_status}
           </span>

frontend/src/components/stacks/ContainerTerminal.tsx

@@ -25,16 +25,20 @@ export function ContainerTerminal({
   service: string;
   onClose: () => void;
 }) {
-  const token = useAuthStore((s) => s.accessToken);
   const [shell, setShell] = useState(SHELLS[0]);
   const [status, setStatus] = useState<Status>("connecting");
   const [detail, setDetail] = useState<string | null>(null);
   const boxRef = useRef<HTMLDivElement>(null);
 
+  // Keyed on the container and shell only. With the access token as a
+  // dependency, every background token refresh tore the session down and
+  // opened a new shell — whatever was running in the terminal was gone.
   useEffect(() => {
-    if (!token || !boxRef.current) return;
+    if (!boxRef.current) return;
     setStatus("connecting");
     setDetail(null);
+    let cancelled = false;
+    let ws: WebSocket | null = null;
 
     const term = new Terminal({
       fontSize: 13,
@@ -47,55 +51,68 @@ export function ContainerTerminal({
     term.open(boxRef.current);
     fit.fit();
 
-    const proto = window.location.protocol === "https:" ? "wss" : "ws";
-    const url =
-      `${proto}://${window.location.host}/ws/exec/${containerId}` +
-      `?token=${encodeURIComponent(token)}&cmd=${encodeURIComponent(shell)}`;
-    const ws = new WebSocket(url);
-
     const sendResize = () => {
-      if (ws.readyState === WebSocket.OPEN) {
+      if (ws?.readyState === WebSocket.OPEN) {
         ws.send(JSON.stringify({ type: "resize", rows: term.rows, cols: term.cols }));
       }
     };
 
-    ws.onopen = () => {
-      setStatus("open");
-      term.focus();
-      sendResize();
-    };
-    ws.onmessage = (ev) => {
-      try {
-        const msg = JSON.parse(ev.data);
-        if (msg.type === "data") term.write(msg.data as string);
-        else if (msg.type === "exit") {
-          term.write(`\r\n\x1b[90m[process exited${msg.code != null ? ` with code ${msg.code}` : ""}]\x1b[0m\r\n`);
-          setStatus("closed");
-        } else if (msg.type === "error") {
-          term.write(`\r\n\x1b[31m${msg.detail || "error"}\x1b[0m\r\n`);
-          setStatus("error");
-          setDetail(msg.detail || "error");
-        }
-      } catch {
-        /* non-JSON: write raw */
-        term.write(typeof ev.data === "string" ? ev.data : "");
-      }
-    };
-    ws.onclose = (ev) => {
-      if (ev.code === 4403) {
+    const connect = async () => {
+      const token = await useAuthStore.getState().freshAccessToken();
+      if (cancelled) return;
+      if (!token) {
         setStatus("error");
-        setDetail("Terminal access is admin-only.");
-        term.write("\r\n\x1b[31mTerminal access is admin-only.\x1b[0m\r\n");
-      } else if (ev.code === 4401) {
-        setStatus("error");
-        setDetail("Authentication failed.");
-      } else {
-        setStatus((s) => (s === "open" ? "closed" : s));
+        setDetail("Your session has ended — sign in again.");
+        return;
       }
+      const proto = window.location.protocol === "https:" ? "wss" : "ws";
+      ws = new WebSocket(
+        `${proto}://${window.location.host}/ws/exec/${encodeURIComponent(containerId)}` +
+          `?token=${encodeURIComponent(token)}&cmd=${encodeURIComponent(shell)}`
+      );
+      wire(ws);
     };
 
+    const wire = (ws: WebSocket) => {
+      ws.onopen = () => {
+        setStatus("open");
+        term.focus();
+        sendResize();
+      };
+      ws.onmessage = (ev) => {
+        try {
+          const msg = JSON.parse(ev.data);
+          if (msg.type === "data") term.write(msg.data as string);
+          else if (msg.type === "exit") {
+            term.write(`\r\n\x1b[90m[process exited${msg.code != null ? ` with code ${msg.code}` : ""}]\x1b[0m\r\n`);
+            setStatus("closed");
+          } else if (msg.type === "error") {
+            term.write(`\r\n\x1b[31m${msg.detail || "error"}\x1b[0m\r\n`);
+            setStatus("error");
+            setDetail(msg.detail || "error");
+          }
+        } catch {
+          /* non-JSON: write raw */
+          term.write(typeof ev.data === "string" ? ev.data : "");
+        }
+      };
+      ws.onclose = (ev) => {
+        if (ev.code === 4403) {
+          setStatus("error");
+          setDetail("Terminal access is admin-only.");
+          term.write("\r\n\x1b[31mTerminal access is admin-only.\x1b[0m\r\n");
+        } else if (ev.code === 4401) {
+          setStatus("error");
+          setDetail("Authentication failed.");
+        } else {
+          setStatus((s) => (s === "open" ? "closed" : s));
+        }
+      };
+    };
+    void connect();
+
     const onData = term.onData((d) => {
-      if (ws.readyState === WebSocket.OPEN) ws.send(JSON.stringify({ type: "data", data: d }));
+      if (ws?.readyState === WebSocket.OPEN) ws.send(JSON.stringify({ type: "data", data: d }));
     });
 
     const ro = new ResizeObserver(() => {
@@ -109,12 +126,13 @@ export function ContainerTerminal({
     ro.observe(boxRef.current);
 
     return () => {
+      cancelled = true;
       ro.disconnect();
       onData.dispose();
-      ws.close();
+      ws?.close();
       term.dispose();
     };
-  }, [containerId, shell, token]);
+  }, [containerId, shell]);
 
   return (
     <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50 p-4">

frontend/src/components/stacks/DeployConsole.tsx

@@ -40,15 +40,19 @@ export function DeployConsole({
   const [errorDetail, setErrorDetail] = useState<string | null>(null);
   const [showLog, setShowLog] = useState(true);
   const boxRef = useRef<HTMLDivElement>(null);
-  const token = useAuthStore((s) => s.accessToken);
 
   const tracker = useMemo(() => new DeployTracker(), []);
   const bufferRef = useRef<LogLine[]>([]);
   const indexRef = useRef(new Map<string, number>());
   const dirtyRef = useRef(false);
 
+  // Connected once per stack — deliberately not keyed on the access token.
+  // Re-running this effect opens a *new* /ws/deploy, i.e. starts another
+  // `compose up`; with the token as a dependency, every background token
+  // refresh during (or after) a deploy did exactly that.
   useEffect(() => {
-    if (!token) return;
+    let ws: WebSocket | null = null;
+    let cancelled = false;
 
     // One line per layer/container, updated in place — the same way compose
     // renders on a TTY — so status changes replace their line instead of
@@ -86,38 +90,63 @@ export function DeployConsole({
       push(ev.id, `${ev.id}  ${ev.text}${details}`, ev.status === "error" ? "error" : "plain");
     };
 
-    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") {
-          handleLine(msg.line as string);
-        } else if (msg.type === "done") {
-          const ok = msg.returncode === 0;
-          tracker.finish(ok);
-          dirtyRef.current = true;
-          setPhase(ok ? "success" : "failed");
-        } else if (msg.type === "error") {
-          tracker.finish(false);
-          dirtyRef.current = true;
-          setPhase("error");
-          setErrorDetail(msg.detail || "Deploy error");
-        }
-      } catch {
-        /* ignore */
+    const fail = (detail: string) => {
+      tracker.finish(false);
+      dirtyRef.current = true;
+      setPhase("error");
+      setErrorDetail(detail);
+    };
+
+    // Set once a done/error frame arrived, so the close that follows it is
+    // not mistaken for a dropped connection.
+    let settled = false;
+
+    const connect = async () => {
+      const token = await useAuthStore.getState().freshAccessToken();
+      if (cancelled) return;
+      if (!token) {
+        settled = true;
+        fail("Your session has ended — sign in again.");
+        return;
       }
+      const proto = window.location.protocol === "https:" ? "wss" : "ws";
+      ws = new WebSocket(
+        `${proto}://${window.location.host}/ws/deploy/${encodeURIComponent(stackId)}` +
+          `?token=${encodeURIComponent(token)}`
+      );
+      ws.onmessage = (ev) => {
+        try {
+          const msg = JSON.parse(ev.data);
+          if (msg.type === "log") {
+            handleLine(msg.line as string);
+          } else if (msg.type === "done") {
+            const ok = msg.returncode === 0;
+            settled = true;
+            tracker.finish(ok);
+            dirtyRef.current = true;
+            setPhase(ok ? "success" : "failed");
+          } else if (msg.type === "error") {
+            settled = true;
+            fail(msg.detail || "Deploy error");
+          }
+        } catch {
+          /* ignore */
+        }
+      };
+      ws.onclose = (ev) => {
+        // A socket that dropped before a done/error frame is surfaced.
+        if (settled || cancelled) return;
+        settled = true;
+        fail(
+          ev.code === 4403
+            ? "Deploying is admin-only."
+            : ev.code === 4401
+              ? "Your session has ended — sign in again."
+              : "Lost the connection to the server. The deploy carries on there."
+        );
+      };
     };
-    ws.onclose = () => {
-      // If the socket dropped before a done/error frame, surface it.
-      setPhase((p) => {
-        if (p !== "running") return p;
-        tracker.finish(false);
-        dirtyRef.current = true;
-        return "error";
-      });
-    };
+    void connect();
 
     const timer = window.setInterval(() => {
       if (!dirtyRef.current) return;
@@ -127,10 +156,11 @@ export function DeployConsole({
     }, FLUSH_MS);
 
     return () => {
+      cancelled = true;
       window.clearInterval(timer);
-      ws.close();
+      ws?.close();
     };
-  }, [stackId, token, tracker]);
+  }, [stackId, tracker]);
 
   useEffect(() => {
     if (boxRef.current) boxRef.current.scrollTop = boxRef.current.scrollHeight;

frontend/src/components/stacks/EditorHelperPanel.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useState } from "react";
+import { useEffect, useRef, useState } from "react";
 import { RefreshCw, HardDrive, Cpu, Plug, Gauge } from "lucide-react";
 import { VolumeWizard } from "@/components/volumes/VolumeWizard";
 import { GPUSelector } from "@/components/gpu/GPUSelector";
@@ -22,9 +22,14 @@ export function EditorHelperPanel({
   const [tab, setTab] = useState<Tab>("volumes");
   const [privileged, setPrivileged] = useState(false);
 
+  // Only the newest request may answer: an older one finishing late would put
+  // back the services of a YAML that has since changed.
+  const request = useRef(0);
   const loadServices = async () => {
+    const mine = ++request.current;
     try {
       const svc = await editorApi.services(yaml);
+      if (mine !== request.current) return;
       setServices(svc);
       setService((cur) => (cur && svc.includes(cur) ? cur : svc[0] ?? ""));
     } catch (e) {
@@ -32,10 +37,15 @@ export function EditorHelperPanel({
     }
   };
 
+  // Follows the YAML (debounced, it is a server round trip). Read once on mount
+  // it listed the editor's starter service "app" for every existing stack —
+  // its file only arrives after the panel mounted — and the helpers then
+  // wrote into a service that did not exist.
   useEffect(() => {
-    loadServices();
+    const t = setTimeout(loadServices, 500);
+    return () => clearTimeout(t);
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
+  }, [yaml]);
 
   const guard = (): string | null => {
     if (!service) {

frontend/src/components/stacks/LogViewer.tsx

@@ -95,45 +95,64 @@ export function LogViewer({ stackId }: { stackId: string }) {
   const [serviceFilter, setServiceFilter] = useState<string>("__all__");
   const [search, setSearch] = useState("");
   const containerRef = useRef<HTMLDivElement>(null);
-  const token = useAuthStore((s) => s.accessToken);
 
+  // One stream per stack. Keyed on the access token, the stream reconnected on
+  // every background token refresh and the server replayed its 200-line tail
+  // into the view a second time.
   useEffect(() => {
-    if (!token) return;
     setError(null);
+    setLines([]);
     let gotError = false;
-    const proto = window.location.protocol === "https:" ? "wss" : "ws";
-    const url = `${proto}://${window.location.host}/ws/logs/${stackId}?token=${token}`;
-    const ws = new WebSocket(url);
-    ws.onopen = () => setConnected(true);
-    ws.onclose = (ev) => {
-      setConnected(false);
-      // An expired or revoked session closes 4401.
-      if (!gotError && ev.code === 4401) {
+    let cancelled = false;
+    let ws: WebSocket | null = null;
+
+    const connect = async () => {
+      const token = await useAuthStore.getState().freshAccessToken();
+      if (cancelled) return;
+      if (!token) {
         setError("Not authorized to stream logs — sign in again.");
+        return;
       }
-    };
-    ws.onmessage = (ev) => {
-      try {
-        const msg = JSON.parse(ev.data);
-        if (msg.type === "log") {
-          const { service, time, msg: body } = parseLine(msg.service, msg.line);
-          setLines((prev) => {
-            const next = [
-              ...prev,
-              { service, time, msg: body, raw: msg.line, level: levelFor(body) },
-            ];
-            return next.length > MAX_LINES ? next.slice(-MAX_LINES) : next;
-          });
-        } else if (msg.type === "error") {
-          gotError = true;
-          setError(msg.detail || "Log stream error");
+      const proto = window.location.protocol === "https:" ? "wss" : "ws";
+      ws = new WebSocket(
+        `${proto}://${window.location.host}/ws/logs/${encodeURIComponent(stackId)}` +
+          `?token=${encodeURIComponent(token)}`
+      );
+      ws.onopen = () => setConnected(true);
+      ws.onclose = (ev) => {
+        setConnected(false);
+        // An expired or revoked session closes 4401.
+        if (!gotError && ev.code === 4401) {
+          setError("Not authorized to stream logs — sign in again.");
         }
-      } catch {
-        /* ignore */
-      }
+      };
+      ws.onmessage = (ev) => {
+        try {
+          const msg = JSON.parse(ev.data);
+          if (msg.type === "log") {
+            const { service, time, msg: body } = parseLine(msg.service, msg.line);
+            setLines((prev) => {
+              const next = [
+                ...prev,
+                { service, time, msg: body, raw: msg.line, level: levelFor(body) },
+              ];
+              return next.length > MAX_LINES ? next.slice(-MAX_LINES) : next;
+            });
+          } else if (msg.type === "error") {
+            gotError = true;
+            setError(msg.detail || "Log stream error");
+          }
+        } catch {
+          /* ignore */
+        }
+      };
     };
-    return () => ws.close();
-  }, [stackId, token]);
+    void connect();
+    return () => {
+      cancelled = true;
+      ws?.close();
+    };
+  }, [stackId]);
 
   // Unique services seen so far, for the container filter.
   const services = useMemo(() => {

frontend/src/components/stacks/StacksTable.tsx

@@ -67,8 +67,10 @@ export function StacksTable({
         <thead className="border-b border-slate-200 text-xs uppercase text-slate-500 dark:border-slate-700">
           <tr>
             <th className="px-4 py-2">Stack</th>
-            <th className="px-4 py-2 w-48">CPU</th>
-            <th className="px-4 py-2 w-48">Memory</th>
+            {/* Left out on a phone: next to the name block there was no room,
+                and the meters were drawn over the service count. */}
+            <th className="hidden w-48 px-4 py-2 sm:table-cell">CPU</th>
+            <th className="hidden w-48 px-4 py-2 sm:table-cell">Memory</th>
             {isAdmin && <th className="px-4 py-2 w-px"></th>}
           </tr>
         </thead>
@@ -188,7 +190,7 @@ function StackRow({
           {status && <ActionProgressInline status={status} onDismiss={onDismissStatus} />}
         </div>
       </td>
-      <td className="px-4 py-2.5">
+      <td className="hidden px-4 py-2.5 sm:table-cell">
         {running && stats ? (
           <Meter
             used={stats.cpu_used}
@@ -204,7 +206,7 @@ function StackRow({
           <span className="text-slate-400">—</span>
         )}
       </td>
-      <td className="px-4 py-2.5">
+      <td className="hidden px-4 py-2.5 sm:table-cell">
         {running && stats ? (
           <Meter
             used={stats.mem_used}
@@ -273,7 +275,7 @@ function StackRow({
           {confirming && (
             <ConfirmDialog
               title={`Delete stack “${stack.id}”?`}
-              message="The stack is stopped and its compose files are removed. This cannot be undone."
+              message="The stack's containers are removed and its folder is deleted from disk — the compose file, .env and any data folders inside it (named volumes are kept). This cannot be undone."
               confirmLabel="Delete stack"
               danger
               busy={deleting}

frontend/src/components/ui/AdminOnly.tsx

@@ -0,0 +1,15 @@
+import type { ReactNode } from "react";
+import { ShieldCheck } from "lucide-react";
+import { Card } from "@/components/ui";
+
+/** What a read-only account sees on a page that only admins can use — instead
+ *  of the page itself, whose requests would all come back 403. */
+export function AdminOnly({ children }: { children: ReactNode }) {
+  return (
+    <Card className="flex flex-col items-center gap-3 py-16 text-center">
+      <ShieldCheck className="h-10 w-10 text-slate-400" />
+      <h2 className="sp-heading text-lg">Admin only</h2>
+      <p className="max-w-md text-sm text-slate-500">{children}</p>
+    </Card>
+  );
+}

frontend/src/components/ui/StackGroupHeader.tsx

@@ -70,14 +70,18 @@ function Label<T>({ group }: { group: StackGroup<T> }) {
       </>
     );
   }
-  // Labelled with a compose project that is no longer a stack: exactly where
-  // things left behind by a deleted stack collect.
+  // Labelled with a compose project that is no StackPilot stack: left behind
+  // by a deleted stack, or started outside StackPilot (`docker compose up` in
+  // some other folder) — which of the two cannot be told from the label.
   return (
     <>
       <Unlink className="h-4 w-4 shrink-0 text-amber-500" />
       <span className="font-semibold">{group.stackId}</span>
-      <span className="rounded-pill border border-amber-500/40 bg-amber-500/10 px-2 py-0.5 text-[11px] font-semibold text-amber-600 dark:text-amber-400">
-        stack removed
+      <span
+        title="Compose project without a StackPilot stack — left behind by a deleted stack, or started outside StackPilot"
+        className="rounded-pill border border-amber-500/40 bg-amber-500/10 px-2 py-0.5 text-[11px] font-semibold text-amber-600 dark:text-amber-400"
+      >
+        not a stack
       </span>
     </>
   );