feat: add an inline deploy-progress style for the stack detail (#1355)

* feat: add an inline deploy-progress style for the stack detail Deploy progress gains a presentation choice under Settings > Appearance > Display: Modal (the default centered overlay) or Inline. In Inline style a compact status band on the stack detail shows the running operation, its elapsed time, the live phase, the latest output line, and the post-update health gate result. A "View output" button opens the full log modal on demand, a dismiss control clears the band, and the band auto-clears a few seconds after a clean completion. The live progress socket is lifted to an always-mounted owner so the band streams without the modal; the default Modal style is unchanged. Operations carry their node so a band never bleeds onto a same-named stack on another node. The stack detail's redundant "CONTAINERS" section heading is removed; the band reserves that vertical space. * fix: keep inline deploy progress reachable off the stack detail Review of the inline presentation found a gap: a failed operation, an App Store install, or navigating away leaves the inline session with no visible surface, since the band only renders on the operation's own stack detail. Restore the minimized pill as the inline fallback, shown only when the band is not covering the session, so there is always a click-through to the log without ever overlapping the band. Closing the modal for a failed op now ends the session (the band has stepped aside) instead of only hiding it. Also document the unsupported mid-operation style switch, and refresh the deploy-progress, settings, appearance, and app-store docs for the renamed "Deploy progress" setting and the Modal/Inline choice.
2026-08-20 15:22:59 +00:00 · 2026-06-11 10:33:57 -04:00
parent 38aabe7064
commit e20f1fe415
30 changed files with 1258 additions and 73 deletions
@@ -0,0 +1,46 @@
+import type { ParsedLogRow } from '@/components/log-rendering/composeLogParser';
+import type { ActionVerb } from '@/context/DeployFeedbackContext';
+
+// Classify the current operation phase from streamed compose output, returning a
+// display label or null before any phase marker. The backend emits explicit
+// `=== ... ===` phase banners during update (pull / recreate / prune), and docker
+// compose emits `[+] Pulling/Creating/Starting` lines that the log parser tags as
+// PULL/CREATE/START. Scanning newest-first returns the latest recognized phase,
+// since phases run in sequence. Labels are action-aware: "Recreating containers"
+// is update wording; deploy/install show "Creating containers".
+export function classifyOperationPhase(rows: ParsedLogRow[], action: ActionVerb): string | null {
+    for (let i = rows.length - 1; i >= 0; i--) {
+        const { message, stage } = rows[i];
+        if (message.includes('Pruned dangling images') || message.includes('Pruning')) {
+            return 'Pruning images';
+        }
+        if (message.includes('Recreating containers')) {
+            return 'Recreating containers';
+        }
+        if (stage === 'START') {
+            return 'Starting containers';
+        }
+        if (stage === 'CREATE') {
+            return action === 'update' ? 'Recreating containers' : 'Creating containers';
+        }
+        // The update banner and the parser's `[+] Pulling` tag cover the headline,
+        // but compose v2's per-layer progress (`<service> Pulling`, `Downloading`,
+        // `Extracting`, ...) arrives as plain lines; match them so the phase reads
+        // "Pulling images" throughout the download rather than lagging behind.
+        if (
+            message.includes('Pulling latest images') ||
+            message.includes('Pulling from') ||
+            stage === 'PULL' ||
+            /\b(Pulling|Downloading|Extracting|Verifying Checksum|Pull complete|Download complete|Pulled)\b/.test(message)
+        ) {
+            return 'Pulling images';
+        }
+        if (stage === 'BUILD') {
+            return 'Building images';
+        }
+        if (message.includes('Backup created for atomic') || message.includes('Cleaning up existing containers')) {
+            return 'Preparing';
+        }
+    }
+    return null;
+}