From ba0b451583939e3128ddaa44127e4fa8684077e1 Mon Sep 17 00:00:00 2001
From: mstrhakr <mstrhakr@gmail.com>
Date: Sun, 31 May 2026 11:38:29 -0400
Subject: [PATCH 01/67] fix: update plugin URL to point to the dev branch

---
 compose.manager.plg | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/compose.manager.plg b/compose.manager.plg
index 670363e4..205b191a 100644
--- a/compose.manager.plg
+++ b/compose.manager.plg
@@ -10,7 +10,7 @@
 <!ENTITY packageName "&name;-&packageVER;-noarch-&pkgBUILD;">
 <!ENTITY packagefile "&packageName;.txz">
 <!ENTITY github "mstrhakr/compose_plugin">
-<!ENTITY pluginURL "https://raw.githubusercontent.com/&github;/main/&name;.plg">
+<!ENTITY pluginURL "https://raw.githubusercontent.com/&github;/dev/&name;.plg">
 <!ENTITY packageURL "https://github.com/&github;/releases/download/v&version;/&packagefile;">
 <!ENTITY pluginsPATH "/boot/config/plugins">
 <!ENTITY pluginLOC "&pluginsPATH;/&name;">

From 34009ee10d90d816e06edea1c48bb82fd8f25a53 Mon Sep 17 00:00:00 2001
From: mstrhakr <mstrhakr@gmail.com>
Date: Sun, 31 May 2026 12:00:01 -0400
Subject: [PATCH 02/67] fix: correct version and package details in plugin
 metadata

---
 compose.manager.plg | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/compose.manager.plg b/compose.manager.plg
index 205b191a..9cec6fd3 100644
--- a/compose.manager.plg
+++ b/compose.manager.plg
@@ -2,11 +2,11 @@
 <!DOCTYPE PLUGIN [
 <!ENTITY name "compose.manager">
 <!ENTITY author "mstrhakr">
-<!ENTITY version     "2026.05.31">
+<!ENTITY version     "2026.05.25.0747">
 <!ENTITY launch "Settings/&name;.settings">
 <!ENTITY packageVER "&version;">
-<!ENTITY packageMD5  "3351c0d4ae60a45a6f914ef0dc703b4a">
-<!ENTITY pkgBUILD    "0732">
+<!ENTITY packageMD5  "d1cf120caa0c1a3d0620984eba908873">
+<!ENTITY pkgBUILD    "0747">
 <!ENTITY packageName "&name;-&packageVER;-noarch-&pkgBUILD;">
 <!ENTITY packagefile "&packageName;.txz">
 <!ENTITY github "mstrhakr/compose_plugin">

From 5644e4b8f8521591b84322ceba806c3fd83aac75 Mon Sep 17 00:00:00 2001
From: Chad Condon <chad@condon.tech>
Date: Sun, 31 May 2026 19:18:00 -0700
Subject: [PATCH 03/67] feat: show docker.versions changelogs in the update
 dialog

When docker.versions is installed, a Changelog link appears next to the
SHA comparison for each container with a pending update. Clicking it opens
the docker.versions changelog in a sized iframe modal via Nchan, matching
the existing Docker tab experience.

docker.versions is an optional dependency: the PHP endpoint detects it via
is_dir(), the JS flag defaults false, and the NchanSubscriber guard prevents
any breakage if the plugin is absent or removed while the page is open. A
10-second timeout shows a fallback message if no data arrives. Dialog sizing
is applied via inline styles rather than borrowing docker.versions' CSS classes.
---
 source/compose.manager/include/Exec.php       |  7 ++-
 .../javascript/composeManagerMain.js          | 63 +++++++++++++++++++
 2 files changed, 67 insertions(+), 3 deletions(-)

diff --git a/source/compose.manager/include/Exec.php b/source/compose.manager/include/Exec.php
index 63bcfa9b..f93aee8a 100644
--- a/source/compose.manager/include/Exec.php
+++ b/source/compose.manager/include/Exec.php
@@ -1504,15 +1504,16 @@ function rejectStaleClientPath(?string $actualPath, string $label): bool
     case 'getSavedUpdateStatus':
         // Load saved update status from file
         $composeUpdateStatusFile = COMPOSE_UPDATE_STATUS_FILE;
+        $dockerVersionsInstalled = is_dir('/usr/local/emhttp/plugins/docker.versions');
         if (is_file($composeUpdateStatusFile)) {
             $savedStatus = json_decode(file_get_contents($composeUpdateStatusFile), true);
             if ($savedStatus) {
-                echo json_encode(['result' => 'success', 'stacks' => $savedStatus]);
+                echo json_encode(['result' => 'success', 'stacks' => $savedStatus, 'dockerVersionsInstalled' => $dockerVersionsInstalled]);
             } else {
-                echo json_encode(['result' => 'success', 'stacks' => []]);
+                echo json_encode(['result' => 'success', 'stacks' => [], 'dockerVersionsInstalled' => $dockerVersionsInstalled]);
             }
         } else {
-            echo json_encode(['result' => 'success', 'stacks' => []]);
+            echo json_encode(['result' => 'success', 'stacks' => [], 'dockerVersionsInstalled' => $dockerVersionsInstalled]);
         }
         break;
     case 'getLogs':
diff --git a/source/compose.manager/javascript/composeManagerMain.js b/source/compose.manager/javascript/composeManagerMain.js
index 707e23ca..bcd12931 100644
--- a/source/compose.manager/javascript/composeManagerMain.js
+++ b/source/compose.manager/javascript/composeManagerMain.js
@@ -966,6 +966,9 @@ function updateTabModifiedState() {
 // Update status cache per stack
 var stackUpdateStatus = {};
 
+// Set to true when docker.versions plugin is detected (populated from getSavedUpdateStatus response)
+var dockerVersionsInstalled = false;
+
 // Load saved update status from server (called on page load)
 // If auto-check is enabled and interval has elapsed, trigger a fresh check
 // Also checks for pending rechecks from recent update operations
@@ -978,6 +981,7 @@ function loadSavedUpdateStatus() {
                 var response = JSON.parse(data);
                 if (response.result === 'success' && response.stacks) {
                     stackUpdateStatus = response.stacks;
+                    if (response.dockerVersionsInstalled) dockerVersionsInstalled = true;
 
                     // Update the UI for each stack with saved status
                     for (var stackName in response.stacks) {
@@ -3501,6 +3505,62 @@ function mergeUpdateStatus(containers, project) {
     return containers;
 }
 
+// Show docker.versions changelog for a single container in a modal.
+// Only called when dockerVersionsInstalled is true; guards against NchanSubscriber
+// being unavailable (e.g. docker.versions removed without page reload).
+//
+// Coupling points with docker.versions (update here if that plugin changes them):
+//   - Nchan topic:  /sub/changelog
+//   - PHP endpoint: /plugins/docker.versions/server/GetChangelog.php
+function showComposeChangelog(containerName) {
+    if (typeof NchanSubscriber === 'undefined') return;
+
+    var nchan = new NchanSubscriber('/sub/changelog');
+    var timeoutId = null;
+
+    // Append all Nchan messages directly to the iframe body.  Avoids depending on
+    // docker.versions' internal HTML class names to route content to sub-elements.
+    nchan.on('message', function(data) {
+        var iframeDoc = $('#myIframe')[0] && $('#myIframe')[0].contentDocument;
+        if (!iframeDoc) return;
+        $(iframeDoc).find('body').css('background-color', 'white').append(data);
+    });
+    nchan.start();
+
+    swal({
+        title: 'Changelog: ' + containerName,
+        text: '<iframe id="myIframe" frameborder="0" scrolling="yes" width="100%" height="99%"></iframe>',
+        html: true,
+        closeOnConfirm: true,
+        showCancelButton: false,
+        allowOutsideClick: true,
+    }, function() {
+        clearTimeout(timeoutId);
+        nchan.stop();
+        swal.close();
+    });
+
+    // Size the dialog to match docker.versions' changelog modal without borrowing
+    // its CSS classes (avoids depending on its stylesheet being loaded).
+    // Equivalent to: .sweet-alert.change-log-summary + .change-log-iframe-container + #myIframe
+    $('.sweet-alert').css({ width: '75%', maxWidth: '75%' });
+    $('#myIframe').parent().css('height', '80%');
+    $('#myIframe').css('height', '75vh');
+
+    // Show a fallback if docker.versions sends nothing (endpoint moved, Nchan topic
+    // changed, or container not found by docker.versions).
+    timeoutId = setTimeout(function() {
+        var iframeDoc = $('#myIframe')[0] && $('#myIframe')[0].contentDocument;
+        if (iframeDoc && !$(iframeDoc).find('body').children().length) {
+            $(iframeDoc).find('body').html(
+                '<p style="padding:16px;color:#888;">Changelog unavailable — no data received from docker.versions.</p>'
+            );
+        }
+    }, 10000);
+
+    $.get('/plugins/docker.versions/server/GetChangelog.php', { 'cts[]': containerName });
+}
+
 // Unified stack action dialog - handles up, down, and update actions
 function showStackActionDialog(action, path, profile) {
     var stackName = basename(path);
@@ -3753,6 +3813,9 @@ function renderStackActionDialog(action, displayName, path, profile, containers,
                     html += ' <i class="fa fa-arrow-right compose-status-success" style="margin:0 4px;"></i> ';
                     html += '<span class="compose-status-success" title="' + composeEscapeAttr(remoteSha) + '">' + composeEscapeHtml(remoteSha.substring(0, 8)) + '</span>';
                     html += '</div>';
+                    if (dockerVersionsInstalled) {
+                        html += '<div style="margin-top:4px;"><a href="#" data-changelog-container="' + composeEscapeAttr(containerName) + '" onclick="showComposeChangelog(this.dataset.changelogContainer);return false;" style="font-size:0.85em;"><i class="fa fa-list" style="margin-right:3px;"></i>Changelog</a></div>';
+                    }
                 } else if (localSha) {
                     // No update - just show current SHA (greyed)
                     html += '<div style="font-family:var(--font-bitstream);font-size:0.9em;margin-top:2px;" title="' + composeEscapeAttr(localSha) + '"><span class="compose-text-muted">' + composeEscapeHtml(localSha.substring(0, 8)) + '</span></div>';

From 61289f8f3d9a1ceb0285226f18a92064a2640f01 Mon Sep 17 00:00:00 2001
From: Chad Condon <chad@condon.tech>
Date: Sun, 31 May 2026 19:36:10 -0700
Subject: [PATCH 04/67] test: add unit tests for getSavedUpdateStatus
 docker.versions detection

Tests cover all three response paths (no file, valid file, invalid file)
against both the docker.versions-installed and not-installed states.
Uses UnraidStreamWrapper to map the plugin directory to a controlled
temp path without touching the real filesystem.
---
 tests/unit/ExecActionsTest.php | 83 ++++++++++++++++++++++++++++++++++
 1 file changed, 83 insertions(+)

diff --git a/tests/unit/ExecActionsTest.php b/tests/unit/ExecActionsTest.php
index 24cdf870..0b164fae 100644
--- a/tests/unit/ExecActionsTest.php
+++ b/tests/unit/ExecActionsTest.php
@@ -16,6 +16,7 @@
 
 use PluginTests\TestCase;
 use PluginTests\Mocks\FunctionMocks;
+use PluginTests\StreamWrapper\UnraidStreamWrapper;
 
 
 require_once '/usr/local/emhttp/plugins/compose.manager/include/Util.php';
@@ -1057,6 +1058,88 @@ public function testSetStackSettingsRejectsUnsupportedIconUrlTypes(): void
         }
     }
 
+    // ===========================================
+    // getSavedUpdateStatus Action Tests
+    // ===========================================
+
+    /**
+     * Returns dockerVersionsInstalled=false when the plugin directory is absent.
+     */
+    public function testGetSavedUpdateStatusDockerVersionsNotInstalled(): void
+    {
+        @unlink(COMPOSE_UPDATE_STATUS_FILE);
+
+        $output = $this->executeAction('getSavedUpdateStatus');
+        $result = json_decode($output, true);
+
+        $this->assertIsArray($result);
+        $this->assertEquals('success', $result['result']);
+        $this->assertSame([], $result['stacks']);
+        $this->assertFalse($result['dockerVersionsInstalled']);
+    }
+
+    /**
+     * Returns dockerVersionsInstalled=true when the plugin directory exists.
+     */
+    public function testGetSavedUpdateStatusDockerVersionsInstalled(): void
+    {
+        @unlink(COMPOSE_UPDATE_STATUS_FILE);
+
+        $fakeDir = sys_get_temp_dir() . '/fake_docker_versions_' . getmypid();
+        mkdir($fakeDir, 0755, true);
+        $this->externalCleanupPaths[] = $fakeDir;
+        UnraidStreamWrapper::addMapping('/usr/local/emhttp/plugins/docker.versions', $fakeDir);
+
+        $output = $this->executeAction('getSavedUpdateStatus');
+        $result = json_decode($output, true);
+
+        $this->assertIsArray($result);
+        $this->assertEquals('success', $result['result']);
+        $this->assertSame([], $result['stacks']);
+        $this->assertTrue($result['dockerVersionsInstalled']);
+    }
+
+    /**
+     * Returns saved stacks alongside dockerVersionsInstalled when a status file exists.
+     */
+    public function testGetSavedUpdateStatusIncludesSavedStacks(): void
+    {
+        $savedStatus = ['my-stack' => ['hasUpdate' => true, 'containers' => []]];
+        file_put_contents(COMPOSE_UPDATE_STATUS_FILE, json_encode($savedStatus));
+
+        $fakeDir = sys_get_temp_dir() . '/fake_docker_versions_' . getmypid();
+        mkdir($fakeDir, 0755, true);
+        $this->externalCleanupPaths[] = $fakeDir;
+        UnraidStreamWrapper::addMapping('/usr/local/emhttp/plugins/docker.versions', $fakeDir);
+
+        $output = $this->executeAction('getSavedUpdateStatus');
+        $result = json_decode($output, true);
+
+        $this->assertIsArray($result);
+        $this->assertEquals('success', $result['result']);
+        $this->assertEquals($savedStatus, $result['stacks']);
+        $this->assertTrue($result['dockerVersionsInstalled']);
+
+        @unlink(COMPOSE_UPDATE_STATUS_FILE);
+    }
+
+    /**
+     * Falls back to empty stacks when the status file contains invalid JSON.
+     */
+    public function testGetSavedUpdateStatusHandlesInvalidStatusFile(): void
+    {
+        file_put_contents(COMPOSE_UPDATE_STATUS_FILE, 'not-valid-json');
+
+        $output = $this->executeAction('getSavedUpdateStatus');
+        $result = json_decode($output, true);
+
+        $this->assertIsArray($result);
+        $this->assertEquals('success', $result['result']);
+        $this->assertSame([], $result['stacks']);
+
+        @unlink(COMPOSE_UPDATE_STATUS_FILE);
+    }
+
     // ===========================================
     // checkStackLock Action Tests
     // ===========================================

From 3736859973d34d143a52635538ce452a9d5a0dc6 Mon Sep 17 00:00:00 2001
From: Chad Condon <chad@condon.tech>
Date: Sun, 31 May 2026 19:43:38 -0700
Subject: [PATCH 05/67] docs: document docker.versions changelog integration in
 user guide

---
 docs/user-guide.md                            | 10 +++
 .../javascript/composeManagerMain.js          | 66 ++++++++++++++++++-
 2 files changed, 73 insertions(+), 3 deletions(-)

diff --git a/docs/user-guide.md b/docs/user-guide.md
index 7c67cd5e..a670c1b8 100644
--- a/docs/user-guide.md
+++ b/docs/user-guide.md
@@ -41,6 +41,16 @@ Each stack supports the following actions:
 | **Edit Stack** | Open the stack editor |
 | **Remove Stack** | Delete the stack configuration |
 
+### Checking for Updates
+
+Use **Check Updates** on a stack to query the registry for newer image versions. Results are cached until the next manual or scheduled check (see [Update Checking settings](configuration.md#update-checking)).
+
+When updates are available, clicking **Update Stack** opens a confirmation dialog listing each container alongside its current and incoming image digest. Containers that are already up to date are dimmed.
+
+#### Changelogs
+
+If the [docker.versions](https://github.com/phyzical/docker.versions) Unraid plugin is installed, a **Changelog** link appears below the digest for each container with a pending update. Clicking it opens the release notes for that image in a modal. No configuration is required — Compose Manager detects docker.versions automatically.
+
 ## Autostart
 
 Enable autostart to have stacks start automatically when the Unraid array starts.
diff --git a/source/compose.manager/javascript/composeManagerMain.js b/source/compose.manager/javascript/composeManagerMain.js
index bcd12931..6926024a 100644
--- a/source/compose.manager/javascript/composeManagerMain.js
+++ b/source/compose.manager/javascript/composeManagerMain.js
@@ -3505,6 +3505,59 @@ function mergeUpdateStatus(containers, project) {
     return containers;
 }
 
+// Minimal markdown renderer for docker.versions release bodies.
+// docker.versions publishes the raw GitHub API `body` field (Markdown) inside
+// plain <div> elements.  This converts the common patterns found in release
+// notes to HTML; no external library required.
+function composeRenderMarkdown(md) {
+    if (!md || !md.trim()) return '';
+    var blocks = [];
+    md = md.replace(/```(?:[^\n]*)?\n([\s\S]*?)```/g, function(_, code) {
+        blocks.push('<pre style="background:#f6f8fa;padding:8px;border-radius:4px;overflow-x:auto;white-space:pre;"><code>' +
+            code.replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;') + '</code></pre>');
+        return '\x00' + (blocks.length - 1) + '\x00';
+    });
+    md = md.replace(/`([^`\n]+)`/g, function(_, c) {
+        return '<code style="background:#f0f0f0;padding:1px 4px;border-radius:3px;font-size:0.9em;">' +
+            c.replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;') + '</code>';
+    });
+    var out = '';
+    var inUL = false;
+    md.split('\n').forEach(function(line) {
+        var h = line.match(/^(#{1,6})\s+(.*)/);
+        if (h) {
+            if (inUL) { out += '</ul>'; inUL = false; }
+            var n = h[1].length;
+            out += '<h' + n + ' style="margin:8px 0 4px;">' + composeInlineMd(h[2]) + '</h' + n + '>';
+            return;
+        }
+        var li = line.match(/^\s*[-*+]\s+(.*)/);
+        if (li) {
+            if (!inUL) { out += '<ul style="margin:4px 0;padding-left:20px;">'; inUL = true; }
+            out += '<li>' + composeInlineMd(li[1]) + '</li>';
+            return;
+        }
+        if (!line.trim()) {
+            if (inUL) { out += '</ul>'; inUL = false; }
+            out += '<br>';
+            return;
+        }
+        if (inUL) { out += '</ul>'; inUL = false; }
+        out += '<p style="margin:4px 0;">' + composeInlineMd(line) + '</p>';
+    });
+    if (inUL) out += '</ul>';
+    return out.replace(/\x00(\d+)\x00/g, function(_, i) { return blocks[i]; });
+}
+
+function composeInlineMd(t) {
+    t = t.replace(/\*\*\*(.+?)\*\*\*/g, '<strong><em>$1</em></strong>');
+    t = t.replace(/\*\*(.+?)\*\*/g, '<strong>$1</strong>');
+    t = t.replace(/\*(.+?)\*/g, '<em>$1</em>');
+    t = t.replace(/~~(.+?)~~/g, '<del>$1</del>');
+    t = t.replace(/\[([^\]]+)\]\(([^)]+)\)/g, '<a href="$2" target="_blank" rel="noopener">$1</a>');
+    return t;
+}
+
 // Show docker.versions changelog for a single container in a modal.
 // Only called when dockerVersionsInstalled is true; guards against NchanSubscriber
 // being unavailable (e.g. docker.versions removed without page reload).
@@ -3518,12 +3571,19 @@ function showComposeChangelog(containerName) {
     var nchan = new NchanSubscriber('/sub/changelog');
     var timeoutId = null;
 
-    // Append all Nchan messages directly to the iframe body.  Avoids depending on
-    // docker.versions' internal HTML class names to route content to sub-elements.
+    // Append Nchan messages to the iframe body.  docker.versions publishes raw
+    // Markdown inside bare <div> elements; render those before inserting.
     nchan.on('message', function(data) {
         var iframeDoc = $('#myIframe')[0] && $('#myIframe')[0].contentDocument;
         if (!iframeDoc) return;
-        $(iframeDoc).find('body').css('background-color', 'white').append(data);
+        var tmp = document.createElement('div');
+        tmp.innerHTML = data;
+        tmp.querySelectorAll('div').forEach(function(div) {
+            if (div.children.length === 0 && div.textContent.trim()) {
+                div.innerHTML = composeRenderMarkdown(div.textContent);
+            }
+        });
+        $(iframeDoc).find('body').css('background-color', 'white').append(tmp.innerHTML);
     });
     nchan.start();
 

From 1e26d684f5266989e24810435a06901f90906cc2 Mon Sep 17 00:00:00 2001
From: Chad Condon <chad@condon.tech>
Date: Sun, 31 May 2026 20:29:59 -0700
Subject: [PATCH 06/67] feat: return to update dialog when changelog is
 dismissed

When the user closes the changelog modal (OK button or outside click),
re-open the Update Stack dialog for the same stack so they can continue
reviewing other containers or proceed with the update.

Pass path and profile through to showComposeChangelog via data attributes
so the callback has enough context to reopen the dialog.
---
 source/compose.manager/javascript/composeManagerMain.js | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/source/compose.manager/javascript/composeManagerMain.js b/source/compose.manager/javascript/composeManagerMain.js
index 6926024a..bf869b21 100644
--- a/source/compose.manager/javascript/composeManagerMain.js
+++ b/source/compose.manager/javascript/composeManagerMain.js
@@ -3565,7 +3565,7 @@ function composeInlineMd(t) {
 // Coupling points with docker.versions (update here if that plugin changes them):
 //   - Nchan topic:  /sub/changelog
 //   - PHP endpoint: /plugins/docker.versions/server/GetChangelog.php
-function showComposeChangelog(containerName) {
+function showComposeChangelog(containerName, path, profile) {
     if (typeof NchanSubscriber === 'undefined') return;
 
     var nchan = new NchanSubscriber('/sub/changelog');
@@ -3598,6 +3598,7 @@ function showComposeChangelog(containerName) {
         clearTimeout(timeoutId);
         nchan.stop();
         swal.close();
+        if (path) showStackActionDialog('update', path, profile || '');
     });
 
     // Size the dialog to match docker.versions' changelog modal without borrowing
@@ -3874,7 +3875,7 @@ function renderStackActionDialog(action, displayName, path, profile, containers,
                     html += '<span class="compose-status-success" title="' + composeEscapeAttr(remoteSha) + '">' + composeEscapeHtml(remoteSha.substring(0, 8)) + '</span>';
                     html += '</div>';
                     if (dockerVersionsInstalled) {
-                        html += '<div style="margin-top:4px;"><a href="#" data-changelog-container="' + composeEscapeAttr(containerName) + '" onclick="showComposeChangelog(this.dataset.changelogContainer);return false;" style="font-size:0.85em;"><i class="fa fa-list" style="margin-right:3px;"></i>Changelog</a></div>';
+                        html += '<div style="margin-top:4px;"><a href="#" data-changelog-container="' + composeEscapeAttr(containerName) + '" data-changelog-path="' + composeEscapeAttr(path) + '" data-changelog-profile="' + composeEscapeAttr(profile || '') + '" onclick="showComposeChangelog(this.dataset.changelogContainer,this.dataset.changelogPath,this.dataset.changelogProfile);return false;" style="font-size:0.85em;"><i class="fa fa-list" style="margin-right:3px;"></i>Changelog</a></div>';
                     }
                 } else if (localSha) {
                     // No update - just show current SHA (greyed)

From 6aba01d84160c2e25258deef8e2113564cfa5c70 Mon Sep 17 00:00:00 2001
From: Chad Condon <chad@condon.tech>
Date: Sun, 31 May 2026 20:55:36 -0700
Subject: [PATCH 07/67] fix: discard stale Nchan buffer and concurrent
 changelog messages

/sub/changelog is a shared channel: Nchan delivers the last buffered
message to every new subscriber, and docker.versions' own subscriber
may be actively publishing output for other containers concurrently.
Both cases caused wrong containers' changelogs to appear in the dialog.

GetChangelog.php always publishes <h3 class='loading'> as its first
message.  Use that as a start-of-stream marker: discard everything
received before it, clear the iframe on arrival, and suppress
loadingInfo progress messages that are noise in this context.
---
 .../javascript/composeManagerMain.js          | 43 ++++++++++++++++---
 1 file changed, 37 insertions(+), 6 deletions(-)

diff --git a/source/compose.manager/javascript/composeManagerMain.js b/source/compose.manager/javascript/composeManagerMain.js
index bf869b21..1a598ed0 100644
--- a/source/compose.manager/javascript/composeManagerMain.js
+++ b/source/compose.manager/javascript/composeManagerMain.js
@@ -3571,9 +3571,39 @@ function showComposeChangelog(containerName, path, profile) {
     var nchan = new NchanSubscriber('/sub/changelog');
     var timeoutId = null;
 
-    // Append Nchan messages to the iframe body.  docker.versions publishes raw
-    // Markdown inside bare <div> elements; render those before inserting.
+    // /sub/changelog is a shared Nchan channel used by docker.versions for all
+    // changelog requests.  Two problems arise if we naively append all messages:
+    //
+    //  1. Stale buffer: Nchan delivers the last buffered message to every new
+    //     subscriber, so we may immediately receive output from a prior request.
+    //  2. Concurrent contamination: docker.versions' own subscriber may be actively
+    //     receiving changelog output for a different container at the same time.
+    //
+    // GetChangelog.php always publishes <h3 class='loading'> as its very first
+    // message.  We use that as a start-of-stream marker: discard everything that
+    // arrives before it, clear the iframe when it arrives, then display from there.
+    // loadingInfo progress messages are also suppressed — they're informational
+    // noise that clutters the changelog view.
+    var started = false;
     nchan.on('message', function(data) {
+        if (data.includes("class='loading'") && !data.includes("class='loadingInfo'")) {
+            started = true;
+            clearTimeout(timeoutId);
+            var iframeDoc = $('#myIframe')[0] && $('#myIframe')[0].contentDocument;
+            if (iframeDoc) $(iframeDoc).find('body').empty().css('background-color', 'white');
+            timeoutId = setTimeout(function() {
+                var iframeDoc = $('#myIframe')[0] && $('#myIframe')[0].contentDocument;
+                if (iframeDoc && !$(iframeDoc).find('body').children().length) {
+                    $(iframeDoc).find('body').html(
+                        '<p style="padding:16px;color:#888;">Changelog unavailable — no data received from docker.versions.</p>'
+                    );
+                }
+            }, 10000);
+            return;
+        }
+        if (!started) return;
+        if (data.includes("class='loadingInfo'")) return;
+
         var iframeDoc = $('#myIframe')[0] && $('#myIframe')[0].contentDocument;
         if (!iframeDoc) return;
         var tmp = document.createElement('div');
@@ -3583,7 +3613,7 @@ function showComposeChangelog(containerName, path, profile) {
                 div.innerHTML = composeRenderMarkdown(div.textContent);
             }
         });
-        $(iframeDoc).find('body').css('background-color', 'white').append(tmp.innerHTML);
+        $(iframeDoc).find('body').append(tmp.innerHTML);
     });
     nchan.start();
 
@@ -3608,11 +3638,12 @@ function showComposeChangelog(containerName, path, profile) {
     $('#myIframe').parent().css('height', '80%');
     $('#myIframe').css('height', '75vh');
 
-    // Show a fallback if docker.versions sends nothing (endpoint moved, Nchan topic
-    // changed, or container not found by docker.versions).
+    // Fallback shown only if the start marker never arrives (docker.versions
+    // endpoint moved, Nchan topic changed, or container not found).
     timeoutId = setTimeout(function() {
+        if (started) return;
         var iframeDoc = $('#myIframe')[0] && $('#myIframe')[0].contentDocument;
-        if (iframeDoc && !$(iframeDoc).find('body').children().length) {
+        if (iframeDoc) {
             $(iframeDoc).find('body').html(
                 '<p style="padding:16px;color:#888;">Changelog unavailable — no data received from docker.versions.</p>'
             );

From e5ce5246e8bbb09e6b2b9cf49d57a403a26f3679 Mon Sep 17 00:00:00 2001
From: Chad Condon <chad@condon.tech>
Date: Sun, 31 May 2026 20:58:51 -0700
Subject: [PATCH 08/67] fix: whitelist changelog message types, filter
 scaffolding noise
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

docker.versions publishes many message types — Container: headers, URL
links, warnings, empty <pre> containers, loadingInfo progress — that are
structural scaffolding for its own full-page view and are noise in our
modal.  Replace the loadingInfo-only blacklist with a whitelist: accept
only class='releasesInfo' release entries and the version-summary <h3>
containing '---->', and discard everything else.
---
 .../javascript/composeManagerMain.js             | 16 +++++++++++++---
 1 file changed, 13 insertions(+), 3 deletions(-)

diff --git a/source/compose.manager/javascript/composeManagerMain.js b/source/compose.manager/javascript/composeManagerMain.js
index 1a598ed0..60cf6a40 100644
--- a/source/compose.manager/javascript/composeManagerMain.js
+++ b/source/compose.manager/javascript/composeManagerMain.js
@@ -3582,8 +3582,9 @@ function showComposeChangelog(containerName, path, profile) {
     // GetChangelog.php always publishes <h3 class='loading'> as its very first
     // message.  We use that as a start-of-stream marker: discard everything that
     // arrives before it, clear the iframe when it arrives, then display from there.
-    // loadingInfo progress messages are also suppressed — they're informational
-    // noise that clutters the changelog view.
+    // After the start marker, only release entries (class='releasesInfo') and
+    // the version-summary h3 with '---->' are displayed; everything else
+    // (warnings, Container: header, URL links, progress) is filtered out.
     var started = false;
     nchan.on('message', function(data) {
         if (data.includes("class='loading'") && !data.includes("class='loadingInfo'")) {
@@ -3602,7 +3603,16 @@ function showComposeChangelog(containerName, path, profile) {
             return;
         }
         if (!started) return;
-        if (data.includes("class='loadingInfo'")) return;
+
+        // Whitelist: only the two message types that are useful in this context.
+        //   class='releasesInfo'  — the <details> block for each release entry
+        //   <h3> with '---->'     — the "current tag → latest tag" version summary
+        // Everything else (Container: header, URL links, warnings, empty <pre>
+        // container, loadingInfo progress) is informational scaffolding for
+        // docker.versions' own full-page view and is noise here.
+        var isReleaseEntry = data.includes("class='releasesInfo'");
+        var isVersionSummary = /^<h3[\s>]/.test(data.trim()) && data.includes('---->');
+        if (!isReleaseEntry && !isVersionSummary) return;
 
         var iframeDoc = $('#myIframe')[0] && $('#myIframe')[0].contentDocument;
         if (!iframeDoc) return;

From ec6d67e8bb69996050aaa873300c1db9473ff993 Mon Sep 17 00:00:00 2001
From: Chad Condon <chad@condon.tech>
Date: Wed, 3 Jun 2026 18:01:55 -0700
Subject: [PATCH 09/67] refactor: delegate changelog display to
 docker.versions' showChangeLog()

Replace the custom NchanSubscriber, message filtering, and markdown
renderer with a direct call to docker.versions' own showChangeLog()
function, which already handles all of that correctly.

Hide the OK/confirm button (it would call updateContainer, bypassing
compose_plugin's update mechanism) and poll for dialog close to reopen
the Update Stack dialog afterward.
---
 .../javascript/composeManagerMain.js          | 174 ++----------------
 1 file changed, 20 insertions(+), 154 deletions(-)

diff --git a/source/compose.manager/javascript/composeManagerMain.js b/source/compose.manager/javascript/composeManagerMain.js
index 60cf6a40..a5cdbe43 100644
--- a/source/compose.manager/javascript/composeManagerMain.js
+++ b/source/compose.manager/javascript/composeManagerMain.js
@@ -3505,162 +3505,28 @@ function mergeUpdateStatus(containers, project) {
     return containers;
 }
 
-// Minimal markdown renderer for docker.versions release bodies.
-// docker.versions publishes the raw GitHub API `body` field (Markdown) inside
-// plain <div> elements.  This converts the common patterns found in release
-// notes to HTML; no external library required.
-function composeRenderMarkdown(md) {
-    if (!md || !md.trim()) return '';
-    var blocks = [];
-    md = md.replace(/```(?:[^\n]*)?\n([\s\S]*?)```/g, function(_, code) {
-        blocks.push('<pre style="background:#f6f8fa;padding:8px;border-radius:4px;overflow-x:auto;white-space:pre;"><code>' +
-            code.replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;') + '</code></pre>');
-        return '\x00' + (blocks.length - 1) + '\x00';
-    });
-    md = md.replace(/`([^`\n]+)`/g, function(_, c) {
-        return '<code style="background:#f0f0f0;padding:1px 4px;border-radius:3px;font-size:0.9em;">' +
-            c.replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;') + '</code>';
-    });
-    var out = '';
-    var inUL = false;
-    md.split('\n').forEach(function(line) {
-        var h = line.match(/^(#{1,6})\s+(.*)/);
-        if (h) {
-            if (inUL) { out += '</ul>'; inUL = false; }
-            var n = h[1].length;
-            out += '<h' + n + ' style="margin:8px 0 4px;">' + composeInlineMd(h[2]) + '</h' + n + '>';
-            return;
-        }
-        var li = line.match(/^\s*[-*+]\s+(.*)/);
-        if (li) {
-            if (!inUL) { out += '<ul style="margin:4px 0;padding-left:20px;">'; inUL = true; }
-            out += '<li>' + composeInlineMd(li[1]) + '</li>';
-            return;
-        }
-        if (!line.trim()) {
-            if (inUL) { out += '</ul>'; inUL = false; }
-            out += '<br>';
-            return;
-        }
-        if (inUL) { out += '</ul>'; inUL = false; }
-        out += '<p style="margin:4px 0;">' + composeInlineMd(line) + '</p>';
-    });
-    if (inUL) out += '</ul>';
-    return out.replace(/\x00(\d+)\x00/g, function(_, i) { return blocks[i]; });
-}
-
-function composeInlineMd(t) {
-    t = t.replace(/\*\*\*(.+?)\*\*\*/g, '<strong><em>$1</em></strong>');
-    t = t.replace(/\*\*(.+?)\*\*/g, '<strong>$1</strong>');
-    t = t.replace(/\*(.+?)\*/g, '<em>$1</em>');
-    t = t.replace(/~~(.+?)~~/g, '<del>$1</del>');
-    t = t.replace(/\[([^\]]+)\]\(([^)]+)\)/g, '<a href="$2" target="_blank" rel="noopener">$1</a>');
-    return t;
-}
-
-// Show docker.versions changelog for a single container in a modal.
-// Only called when dockerVersionsInstalled is true; guards against NchanSubscriber
-// being unavailable (e.g. docker.versions removed without page reload).
+// Show docker.versions changelog for a single container.
+// Delegates entirely to docker.versions' own showChangeLog() so that display
+// logic, Nchan subscription management, and message routing stay in one place.
 //
-// Coupling points with docker.versions (update here if that plugin changes them):
-//   - Nchan topic:  /sub/changelog
-//   - PHP endpoint: /plugins/docker.versions/server/GetChangelog.php
+// Coupling point: showChangeLog(containerName) — global function from
+// docker.versions/scripts/changelog.js.  If that function is renamed or
+// removed, this feature silently does nothing.
 function showComposeChangelog(containerName, path, profile) {
-    if (typeof NchanSubscriber === 'undefined') return;
-
-    var nchan = new NchanSubscriber('/sub/changelog');
-    var timeoutId = null;
-
-    // /sub/changelog is a shared Nchan channel used by docker.versions for all
-    // changelog requests.  Two problems arise if we naively append all messages:
-    //
-    //  1. Stale buffer: Nchan delivers the last buffered message to every new
-    //     subscriber, so we may immediately receive output from a prior request.
-    //  2. Concurrent contamination: docker.versions' own subscriber may be actively
-    //     receiving changelog output for a different container at the same time.
-    //
-    // GetChangelog.php always publishes <h3 class='loading'> as its very first
-    // message.  We use that as a start-of-stream marker: discard everything that
-    // arrives before it, clear the iframe when it arrives, then display from there.
-    // After the start marker, only release entries (class='releasesInfo') and
-    // the version-summary h3 with '---->' are displayed; everything else
-    // (warnings, Container: header, URL links, progress) is filtered out.
-    var started = false;
-    nchan.on('message', function(data) {
-        if (data.includes("class='loading'") && !data.includes("class='loadingInfo'")) {
-            started = true;
-            clearTimeout(timeoutId);
-            var iframeDoc = $('#myIframe')[0] && $('#myIframe')[0].contentDocument;
-            if (iframeDoc) $(iframeDoc).find('body').empty().css('background-color', 'white');
-            timeoutId = setTimeout(function() {
-                var iframeDoc = $('#myIframe')[0] && $('#myIframe')[0].contentDocument;
-                if (iframeDoc && !$(iframeDoc).find('body').children().length) {
-                    $(iframeDoc).find('body').html(
-                        '<p style="padding:16px;color:#888;">Changelog unavailable — no data received from docker.versions.</p>'
-                    );
-                }
-            }, 10000);
-            return;
-        }
-        if (!started) return;
-
-        // Whitelist: only the two message types that are useful in this context.
-        //   class='releasesInfo'  — the <details> block for each release entry
-        //   <h3> with '---->'     — the "current tag → latest tag" version summary
-        // Everything else (Container: header, URL links, warnings, empty <pre>
-        // container, loadingInfo progress) is informational scaffolding for
-        // docker.versions' own full-page view and is noise here.
-        var isReleaseEntry = data.includes("class='releasesInfo'");
-        var isVersionSummary = /^<h3[\s>]/.test(data.trim()) && data.includes('---->');
-        if (!isReleaseEntry && !isVersionSummary) return;
-
-        var iframeDoc = $('#myIframe')[0] && $('#myIframe')[0].contentDocument;
-        if (!iframeDoc) return;
-        var tmp = document.createElement('div');
-        tmp.innerHTML = data;
-        tmp.querySelectorAll('div').forEach(function(div) {
-            if (div.children.length === 0 && div.textContent.trim()) {
-                div.innerHTML = composeRenderMarkdown(div.textContent);
-            }
-        });
-        $(iframeDoc).find('body').append(tmp.innerHTML);
-    });
-    nchan.start();
-
-    swal({
-        title: 'Changelog: ' + containerName,
-        text: '<iframe id="myIframe" frameborder="0" scrolling="yes" width="100%" height="99%"></iframe>',
-        html: true,
-        closeOnConfirm: true,
-        showCancelButton: false,
-        allowOutsideClick: true,
-    }, function() {
-        clearTimeout(timeoutId);
-        nchan.stop();
-        swal.close();
-        if (path) showStackActionDialog('update', path, profile || '');
-    });
-
-    // Size the dialog to match docker.versions' changelog modal without borrowing
-    // its CSS classes (avoids depending on its stylesheet being loaded).
-    // Equivalent to: .sweet-alert.change-log-summary + .change-log-iframe-container + #myIframe
-    $('.sweet-alert').css({ width: '75%', maxWidth: '75%' });
-    $('#myIframe').parent().css('height', '80%');
-    $('#myIframe').css('height', '75vh');
-
-    // Fallback shown only if the start marker never arrives (docker.versions
-    // endpoint moved, Nchan topic changed, or container not found).
-    timeoutId = setTimeout(function() {
-        if (started) return;
-        var iframeDoc = $('#myIframe')[0] && $('#myIframe')[0].contentDocument;
-        if (iframeDoc) {
-            $(iframeDoc).find('body').html(
-                '<p style="padding:16px;color:#888;">Changelog unavailable — no data received from docker.versions.</p>'
-            );
-        }
-    }, 10000);
-
-    $.get('/plugins/docker.versions/server/GetChangelog.php', { 'cts[]': containerName });
+    if (typeof showChangeLog !== 'function') return;
+    showChangeLog(containerName);
+    // docker.versions' OK button calls updateContainer(), which bypasses
+    // compose_plugin's update mechanism.  Hide it so the only exit is Cancel.
+    setTimeout(function() { $('.sweet-alert .confirm').hide(); }, 0);
+    if (!path) return;
+    // Reopen the Update Stack dialog when the changelog dialog closes.
+    // SweetAlert 1.x has no close event; poll the showSweetAlert class instead.
+    var appeared = false;
+    var poll = setInterval(function() {
+        var open = $('.sweet-alert').hasClass('showSweetAlert');
+        if (!appeared) { if (open) appeared = true; return; }
+        if (!open) { clearInterval(poll); showStackActionDialog('update', path, profile || ''); }
+    }, 100);
 }
 
 // Unified stack action dialog - handles up, down, and update actions

From 83f66247f7cec2e54b0b4293ab1c9063131f358a Mon Sep 17 00:00:00 2001
From: Chad Condon <chad@condon.tech>
Date: Wed, 3 Jun 2026 18:28:54 -0700
Subject: [PATCH 10/67] fix: plug poll interval leak and skip dialog reopen
 when warnings disabled

Two bugs found in code review:

1. The setInterval poll had no escape hatch when showChangeLog() opened
   no SweetAlert dialog (e.g. container unknown to docker.versions), so
   the 'appeared' flag never flipped true and clearInterval was never
   reached. Cap at 300 ticks (30 s) so it always self-cleans.

2. When DISABLE_ACTION_WARNINGS is true, renderStackActionDialog() has a
   fast-path that calls UpdateStackConfirmed() directly without showing a
   dialog. Reopening the update dialog after changelog dismiss would
   trigger an immediate update rather than a confirmation prompt. Skip
   the reopen in that mode by checking the setting via getConfig().
---
 .../javascript/composeManagerMain.js               | 14 +++++++++++++-
 1 file changed, 13 insertions(+), 1 deletion(-)

diff --git a/source/compose.manager/javascript/composeManagerMain.js b/source/compose.manager/javascript/composeManagerMain.js
index a5cdbe43..2cb3a534 100644
--- a/source/compose.manager/javascript/composeManagerMain.js
+++ b/source/compose.manager/javascript/composeManagerMain.js
@@ -3521,11 +3521,23 @@ function showComposeChangelog(containerName, path, profile) {
     if (!path) return;
     // Reopen the Update Stack dialog when the changelog dialog closes.
     // SweetAlert 1.x has no close event; poll the showSweetAlert class instead.
+    // Cap at 300 ticks (30 s) so the interval self-cleans if the dialog never opens.
     var appeared = false;
+    var ticks = 0;
     var poll = setInterval(function() {
+        if (++ticks > 300) { clearInterval(poll); return; }
         var open = $('.sweet-alert').hasClass('showSweetAlert');
         if (!appeared) { if (open) appeared = true; return; }
-        if (!open) { clearInterval(poll); showStackActionDialog('update', path, profile || ''); }
+        if (!open) {
+            clearInterval(poll);
+            // Skip reopening when DISABLE_ACTION_WARNINGS is true: renderStackActionDialog
+            // has a fast-path that calls UpdateStackConfirmed directly in that mode,
+            // so reopening would trigger an immediate update rather than a dialog.
+            getConfig().then(function(cfg) {
+                if (cfg && cfg.DISABLE_ACTION_WARNINGS === 'true') return;
+                showStackActionDialog('update', path, profile || '');
+            });
+        }
     }, 100);
 }
 

From e246ff86038f47cd7c6e39a57ee9884e2846b671 Mon Sep 17 00:00:00 2001
From: Chad Condon <thetic@users.noreply.github.com>
Date: Wed, 3 Jun 2026 19:00:37 -0700
Subject: [PATCH 11/67] Potential fix for pull request finding

Co-authored-by: Copilot Autofix powered by AI <175728472+Copilot@users.noreply.github.com>
---
 tests/unit/ExecActionsTest.php | 14 +++++++++-----
 1 file changed, 9 insertions(+), 5 deletions(-)

diff --git a/tests/unit/ExecActionsTest.php b/tests/unit/ExecActionsTest.php
index 0b164fae..5c1e8c89 100644
--- a/tests/unit/ExecActionsTest.php
+++ b/tests/unit/ExecActionsTest.php
@@ -1065,12 +1065,16 @@ public function testSetStackSettingsRejectsUnsupportedIconUrlTypes(): void
     /**
      * Returns dockerVersionsInstalled=false when the plugin directory is absent.
      */
-    public function testGetSavedUpdateStatusDockerVersionsNotInstalled(): void
-    {
-        @unlink(COMPOSE_UPDATE_STATUS_FILE);
+public function testGetSavedUpdateStatusDockerVersionsNotInstalled(): void
+{
+    @unlink(COMPOSE_UPDATE_STATUS_FILE);
 
-        $output = $this->executeAction('getSavedUpdateStatus');
-        $result = json_decode($output, true);
+    // Make the test deterministic even when running on a host that has docker.versions installed.
+    $fakeDir = sys_get_temp_dir() . '/fake_docker_versions_absent_' . getmypid();
+    UnraidStreamWrapper::addMapping('/usr/local/emhttp/plugins/docker.versions', $fakeDir);
+
+    $output = $this->executeAction('getSavedUpdateStatus');
+    $result = json_decode($output, true);
 
         $this->assertIsArray($result);
         $this->assertEquals('success', $result['result']);

From e2fbe938ff2f98a543b2b39180c1f8429901ff39 Mon Sep 17 00:00:00 2001
From: mstrhakr <mstrhakr@gmail.com>
Date: Sun, 7 Jun 2026 18:20:04 -0400
Subject: [PATCH 12/67] fix(profiles): unify action profile picker and enforce
 profile precedence

---
 .../compose.manager/include/ComposeList.php   | 12 ++-
 .../javascript/composeManagerMain.js          | 95 +++++++++++++++----
 2 files changed, 90 insertions(+), 17 deletions(-)

diff --git a/source/compose.manager/include/ComposeList.php b/source/compose.manager/include/ComposeList.php
index 2f7c3503..88c625cb 100755
--- a/source/compose.manager/include/ComposeList.php
+++ b/source/compose.manager/include/ComposeList.php
@@ -74,6 +74,16 @@
     $profiles = $stackInfo->getProfiles();
     $profilesJson = htmlspecialchars(json_encode($profiles ?: []), ENT_QUOTES, 'UTF-8');
 
+    // Get default profiles for actions like force update
+    $defaultProfiles = $stackInfo->getDefaultProfiles();
+    $defaultProfilesStr = implode(',', $defaultProfiles);
+    $defaultProfilesHtml = htmlspecialchars($defaultProfilesStr, ENT_QUOTES, 'UTF-8');
+
+    // Get running profiles so UI can prioritize current runtime selection
+    $runningProfiles = $stackInfo->getRunningProfiles();
+    $runningProfilesStr = implode(',', $runningProfiles);
+    $runningProfilesHtml = htmlspecialchars($runningProfilesStr, ENT_QUOTES, 'UTF-8');
+
     // Determine status text and class for badge
     $statusText = "Stopped";
     $statusClass = "status-stopped";
@@ -160,7 +170,7 @@
     $hasBuild = $stackInfo->hasBuildConfig() ? '1' : '0';
 
     // Main row - Docker tab structure with expand arrow on left
-    $o .= "<tr class='compose-sortable' id='stack-row-$id' data-project='$projectHtml' data-projectname='$projectNameHtml' data-path='$pathHtml' data-isup='$isup' data-profiles='$profilesJson' data-webui='$webuiUrlHtml' data-containers='$containerNamesAttr' data-ctids='$containerIdsAttr' data-hasbuild='$hasBuild' data-invalid-indirect='" . ($hasInvalidIndirect ? '1' : '0') . "' data-invalid-indirect-path='$invalidIndirectPathHtml'>";
+    $o .= "<tr class='compose-sortable' id='stack-row-$id' data-project='$projectHtml' data-projectname='$projectNameHtml' data-path='$pathHtml' data-isup='$isup' data-profiles='$profilesJson' data-running-profile='$runningProfilesHtml' data-default-profile='$defaultProfilesHtml' data-webui='$webuiUrlHtml' data-containers='$containerNamesAttr' data-ctids='$containerIdsAttr' data-hasbuild='$hasBuild' data-invalid-indirect='" . ($hasInvalidIndirect ? '1' : '0') . "' data-invalid-indirect-path='$invalidIndirectPathHtml'>";
 
     // Arrow column
     $o .= "<td class='col-arrow'>";
diff --git a/source/compose.manager/javascript/composeManagerMain.js b/source/compose.manager/javascript/composeManagerMain.js
index 2cb3a534..c61d5a26 100644
--- a/source/compose.manager/javascript/composeManagerMain.js
+++ b/source/compose.manager/javascript/composeManagerMain.js
@@ -2584,8 +2584,23 @@ function editStackSettings(myID) {
 // Unified update warning dialog - called from stack row and container table
 function showUpdateWarning(project, stackId) {
     var path = compose_root + '/' + project;
-    // Use the existing UpdateStack function which already has the warning dialog
-    UpdateStack(path, "");
+    // Use row metadata so force-update from status column behaves like context menu.
+    var $stackRow = $('#compose_stacks tr.compose-sortable[data-project="' + project + '"]');
+    var profiles = [];
+    var runningProfile = '';
+    var defaultProfile = '';
+
+    if ($stackRow.length > 0) {
+        profiles = $stackRow.data('profiles') || [];
+        runningProfile = $stackRow.attr('data-running-profile') || '';
+        defaultProfile = $stackRow.attr('data-default-profile') || '';
+    }
+
+    if (profiles.length > 0) {
+        showProfileSelector('forceUpdate', path, profiles, runningProfile, defaultProfile);
+    } else {
+        ForceUpdateStack(path);
+    }
 }
 
 // Show a brief swal when a background command is dispatched
@@ -3999,6 +4014,8 @@ function executeStackAction(action) {
     var projectName = $row.data('projectname');
     var path = $row.data('path');
     var profiles = $row.data('profiles') || [];
+    var runningProfile = $row.data('running-profile') || '';
+    var defaultProfile = $row.data('default-profile') || '';
     var isUp = $row.data('isup') == "1";
 
     closeStackActionsMenu();
@@ -4006,7 +4023,7 @@ function executeStackAction(action) {
     // Handle profile selection if profiles exist and action supports it
     var profileSupportedActions = ['up', 'down', 'update', 'pull', 'logs'];
     if (profiles.length > 0 && profileSupportedActions.includes(action)) {
-        showProfileSelector(action, path, profiles);
+        showProfileSelector(action, path, profiles, runningProfile, defaultProfile);
         return;
     }
 
@@ -4040,7 +4057,13 @@ function executeStackAction(action) {
     }
 }
 
-function showProfileSelector(action, path, profiles) {
+function showProfileSelector(action, path, profiles, runningProfile, defaultProfile) {
+    if (typeof runningProfile === 'undefined') {
+        runningProfile = '';
+    }
+    if (typeof defaultProfile === 'undefined') {
+        defaultProfile = '';
+    }
     var actionNames = {
         'up': 'Compose Up',
         'down': 'Compose Down',
@@ -4060,12 +4083,42 @@ function showProfileSelector(action, path, profiles) {
     profileHtml += '<div style="margin-bottom:8px;padding-bottom:8px;border-bottom:1px solid var(--dynamix-box-inner-div-border-color);">';
     profileHtml += '<label style="font-weight:bold;"><input type="checkbox" id="profile_default" checked disabled> Default services (no profile)</label>';
     profileHtml += '</div>';
+    
+    function parseProfileList(rawValue) {
+        if (!rawValue) return [];
+        return rawValue.split(',').map(function(p) {
+            return p.trim();
+        }).filter(function(p) {
+            return p !== '';
+        });
+    }
+
+    // Selection priority: running profiles -> default profiles -> all (*)
+    var runningProfileSet = parseProfileList(runningProfile);
+    var defaultProfileSet = parseProfileList(defaultProfile);
+    var preselectedProfiles = [];
+    var showAllProfilesChecked = false;
+
+    if (runningProfileSet.indexOf('*') !== -1) {
+        showAllProfilesChecked = true;
+    } else if (runningProfileSet.length > 0) {
+        preselectedProfiles = runningProfileSet;
+    } else if (defaultProfileSet.indexOf('*') !== -1) {
+        showAllProfilesChecked = true;
+    } else if (defaultProfileSet.length > 0) {
+        preselectedProfiles = defaultProfileSet;
+    } else {
+        showAllProfilesChecked = true;
+    }
+    var profileCheckboxDisabled = showAllProfilesChecked ? 'disabled' : '';
+    
     profileHtml += '<div style="margin-bottom:10px;padding-bottom:10px;border-bottom:1px solid var(--dynamix-box-inner-div-border-color);">';
-    profileHtml += '<label style="font-weight:bold;"><input type="checkbox" id="profile_all_profiles" checked onchange="toggleAllProfiles(this)"> All profile-based services (*)</label>';
+    profileHtml += '<label style="font-weight:bold;"><input type="checkbox" id="profile_all_profiles" ' + (showAllProfilesChecked ? 'checked' : '') + ' onchange="toggleAllProfiles(this)"> All profile-based services (*)</label>';
     profileHtml += '</div>';
     profileHtml += '<div id="profile_list">';
     profiles.forEach(function(profile) {
-        profileHtml += '<label style="display:block;margin:5px 0;"><input type="checkbox" class="profile_checkbox" value="' + composeEscapeHtml(profile) + '" disabled> ' + composeEscapeHtml(profile) + '</label>';
+        var isChecked = !showAllProfilesChecked && preselectedProfiles.indexOf(profile) >= 0;
+        profileHtml += '<label style="display:block;margin:5px 0;"><input type="checkbox" class="profile_checkbox" value="' + composeEscapeHtml(profile) + '" ' + profileCheckboxDisabled + ' ' + (isChecked ? 'checked' : '') + ' onchange="updateProfileCheckboxes()"> ' + composeEscapeHtml(profile) + '</label>';
     });
     profileHtml += '</div>';
     profileHtml += '<div class="compose-text-muted" style="margin-top:10px;font-size:0.9em;"><i class="fa fa-info-circle"></i> Default services are always included. Select multiple profiles to include profile-based services.</div>';
@@ -4125,6 +4178,14 @@ function toggleAllProfiles(checkbox) {
     $('.profile_checkbox').prop('disabled', disabled).prop('checked', false);
 }
 
+function updateProfileCheckboxes() {
+    // If any individual profile is checked, uncheck "all profiles"
+    var anyIndividualChecked = $('.profile_checkbox:checked').length > 0;
+    if (anyIndividualChecked) {
+        $('#profile_all_profiles').prop('checked', false);
+    }
+}
+
 function openEditorModalByProject(project, projectName, initialTab) {
     if (typeof ace === 'undefined') {
         swal({
@@ -6575,6 +6636,8 @@ function addComposeStackContext(elementId) {
     var $row = $('#stack-row-' + stackId);
     var path = $row.data('path');
     var profiles = $row.data('profiles') || [];
+    var runningProfile = $row.data('running-profile') || '';
+    var defaultProfile = $row.data('default-profile') || '';
     var webuiUrl = $row.data('webui') || '';
     var hasBuild = $row.data('hasbuild') == "1";
     var hasExistingContainers = false;
@@ -6646,7 +6709,7 @@ function addComposeStackContext(elementId) {
             action: function(e) {
                 e.preventDefault();
                 if (profiles.length > 0) {
-                    showProfileSelector('up', path, profiles);
+                    showProfileSelector('up', path, profiles, runningProfile, defaultProfile);
                 } else {
                     ComposeUp(path);
                 }
@@ -6660,7 +6723,7 @@ function addComposeStackContext(elementId) {
             action: function(e) {
                 e.preventDefault();
                 if (profiles.length > 0) {
-                    showProfileSelector('down', path, profiles);
+                    showProfileSelector('down', path, profiles, runningProfile, defaultProfile);
                 } else {
                     ComposeDown(path);
                 }
@@ -6674,7 +6737,7 @@ function addComposeStackContext(elementId) {
             action: function(e) {
                 e.preventDefault();
                 if (profiles.length > 0) {
-                    showProfileSelector('stop', path, profiles);
+                    showProfileSelector('stop', path, profiles, runningProfile, defaultProfile);
                 } else {
                     ComposeStop(path);
                 }
@@ -6688,7 +6751,7 @@ function addComposeStackContext(elementId) {
             action: function(e) {
                 e.preventDefault();
                 if (profiles.length > 0) {
-                    showProfileSelector('restart', path, profiles);
+                    showProfileSelector('restart', path, profiles, runningProfile, defaultProfile);
                 } else {
                     ComposeRestart(path);
                 }
@@ -6709,7 +6772,7 @@ function addComposeStackContext(elementId) {
                 action: function(e) {
                     e.preventDefault();
                     if (profiles.length > 0) {
-                        showProfileSelector('update', path, profiles);
+                        showProfileSelector('update', path, profiles, runningProfile, defaultProfile);
                     } else {
                         UpdateStack(path);
                     }
@@ -6724,7 +6787,7 @@ function addComposeStackContext(elementId) {
                 action: function(e) {
                     e.preventDefault();
                     if (profiles.length > 0) {
-                        showProfileSelector('forceUpdate', path, profiles);
+                        showProfileSelector('forceUpdate', path, profiles, runningProfile, defaultProfile);
                     } else {
                         ForceUpdateStack(path);
                     }
@@ -6741,7 +6804,7 @@ function addComposeStackContext(elementId) {
             action: function(e) {
                 e.preventDefault();
                 if (profiles.length > 0) {
-                    showProfileSelector('up', path, profiles);
+                    showProfileSelector('up', path, profiles, runningProfile, defaultProfile);
                 } else {
                     ComposeUp(path);
                 }
@@ -6756,7 +6819,7 @@ function addComposeStackContext(elementId) {
                 action: function(e) {
                     e.preventDefault();
                     if (profiles.length > 0) {
-                        showProfileSelector('down', path, profiles);
+                        showProfileSelector('down', path, profiles, runningProfile, defaultProfile);
                     } else {
                         ComposeDown(path);
                     }
@@ -6776,7 +6839,7 @@ function addComposeStackContext(elementId) {
             action: function(e) {
                 e.preventDefault();
                 if (profiles.length > 0) {
-                    showProfileSelector('pull', path, profiles);
+                    showProfileSelector('pull', path, profiles, runningProfile, defaultProfile);
                 } else {
                     ComposePull(path);
                 }
@@ -6791,7 +6854,7 @@ function addComposeStackContext(elementId) {
             action: function(e) {
                 e.preventDefault();
                 if (profiles.length > 0) {
-                    showProfileSelector('update', path, profiles);
+                    showProfileSelector('update', path, profiles, runningProfile, defaultProfile);
                 } else {
                     UpdateStack(path);
                 }

From 17d5fa08e6c0143fe60cf6764817fc416e408329 Mon Sep 17 00:00:00 2001
From: mstrhakr <mstrhakr@gmail.com>
Date: Sun, 7 Jun 2026 19:00:14 -0400
Subject: [PATCH 13/67] fix(composeSortable): improve drag-and-drop behavior by
 detaching non-sortable rows

---
 .../javascript/composeSortable.js             | 33 +++++++++++++++----
 1 file changed, 26 insertions(+), 7 deletions(-)

diff --git a/source/compose.manager/javascript/composeSortable.js b/source/compose.manager/javascript/composeSortable.js
index a0d2ce0d..04de705a 100644
--- a/source/compose.manager/javascript/composeSortable.js
+++ b/source/compose.manager/javascript/composeSortable.js
@@ -112,24 +112,43 @@ function initComposeSortable() {
         items: '> tr.compose-sortable',
         cursor: 'grab',
         axis: 'y',
-        containment: 'parent',
+        // No containment — 'parent' clamps the helper's Y to the container edge,
+        // which makes jQuery UI compare positions using the clipped offset instead
+        // of the true mouse position.  That means dragging above the first row
+        // never triggers a swap (can't reach position 0).  axis:'y' already
+        // prevents horizontal drift, so containment is not needed.
         cancel: '[data-stackid], .compose-updatecolumn a, .compose-updatecolumn .exec, .auto_start, .switchButton, a, button, input',
         delay: 100,
         opacity: 0.5,
         zIndex: 9999,
         forcePlaceholderSize: true,
         start: function (event, ui) {
-            var $detailsRow = getComposeDetailsRowForItem(ui.item);
-            if ($detailsRow.length) {
-                ui.item.data('compose-details-row', $detailsRow.detach());
-            }
+            // Detach ALL non-sortable rows (details/expand rows) for the duration
+            // of the drag.  jQuery UI measures each item's offset().top to decide
+            // where the placeholder goes; interspersed non-sortable rows shift those
+            // offsets and cause erratic placeholder jumps.  Store each detached row
+            // on its sibling stack-row so we can reattach it cleanly in stop().
+            $tbody.children('tr:not(.compose-sortable)').each(function () {
+                var $dr = $(this);
+                var $stackRow = $dr.prev('tr.compose-sortable');
+                if ($stackRow.length) {
+                    $stackRow.data('_detached-details', $dr.detach());
+                }
+            });
         },
         update: function () {
             saveComposeSortOrder();
         },
         stop: function (event, ui) {
-            reattachComposeDetailsRow(ui.item);
-            normalizeComposeDetailsRowOrder($tbody);
+            // Reattach all details rows in the new (post-drop) order.
+            $tbody.children('tr.compose-sortable').each(function () {
+                var $stackRow = $(this);
+                var $dr = $stackRow.data('_detached-details');
+                if ($dr && $dr.length) {
+                    $dr.insertAfter($stackRow);
+                    $stackRow.removeData('_detached-details');
+                }
+            });
         }
     });
 }

From a42c4902236d315118258b5cac0cc49f2c938a69 Mon Sep 17 00:00:00 2001
From: mstrhakr <mstrhakr@gmail.com>
Date: Sun, 7 Jun 2026 20:27:40 -0400
Subject: [PATCH 14/67] fix(composeSortable): enhance details row detachment
 logic during drag-and-drop

---
 .../javascript/composeSortable.js             | 22 +++++++++++--------
 1 file changed, 13 insertions(+), 9 deletions(-)

diff --git a/source/compose.manager/javascript/composeSortable.js b/source/compose.manager/javascript/composeSortable.js
index 04de705a..af53fe54 100644
--- a/source/compose.manager/javascript/composeSortable.js
+++ b/source/compose.manager/javascript/composeSortable.js
@@ -123,15 +123,19 @@ function initComposeSortable() {
         zIndex: 9999,
         forcePlaceholderSize: true,
         start: function (event, ui) {
-            // Detach ALL non-sortable rows (details/expand rows) for the duration
-            // of the drag.  jQuery UI measures each item's offset().top to decide
-            // where the placeholder goes; interspersed non-sortable rows shift those
-            // offsets and cause erratic placeholder jumps.  Store each detached row
-            // on its sibling stack-row so we can reattach it cleanly in stop().
-            $tbody.children('tr:not(.compose-sortable)').each(function () {
-                var $dr = $(this);
-                var $stackRow = $dr.prev('tr.compose-sortable');
-                if ($stackRow.length) {
+            // Detach each stack row's details row by explicit ID lookup rather than
+            // DOM adjacency.  When jQuery UI fires 'start' it has already inserted
+            // the ui-sortable-placeholder <tr> into the tbody, and it lands between
+            // ui.item and that row's details row.  A prev('tr.compose-sortable')
+            // traversal would then find the placeholder instead of the stack row,
+            // returning an empty set — leaving the expanded details row un-stored
+            // and therefore orphaned in the DOM after the drop.
+            $tbody.children('tr.compose-sortable').each(function () {
+                var $stackRow = $(this);
+                var rowId = $stackRow.attr('id') || '';
+                if (rowId.indexOf('stack-row-') !== 0) { return; }
+                var $dr = $('#details-row-' + rowId.replace('stack-row-', ''));
+                if ($dr.length) {
                     $stackRow.data('_detached-details', $dr.detach());
                 }
             });

From b95c55747bfe0482e3a3246ee72e76b18fb0c67d Mon Sep 17 00:00:00 2001
From: mstrhakr <mstrhakr@gmail.com>
Date: Mon, 8 Jun 2026 21:47:01 -0400
Subject: [PATCH 15/67] fix(update): update button now triggers update action
 instead of always triggering force update

---
 .../javascript/composeManagerMain.js          | 19 +++++++++++--------
 1 file changed, 11 insertions(+), 8 deletions(-)

diff --git a/source/compose.manager/javascript/composeManagerMain.js b/source/compose.manager/javascript/composeManagerMain.js
index c61d5a26..cbd0240e 100644
--- a/source/compose.manager/javascript/composeManagerMain.js
+++ b/source/compose.manager/javascript/composeManagerMain.js
@@ -1331,7 +1331,7 @@ function updateStackUpdateUI(stackName, stackInfo) {
     // Update the stack row's update column (match Docker tab style)
     if (updateCount > 0) {
         // Updates available - orange "update ready" style with clickable link and SHA info
-        var updateHtml = '<a class="exec" style="cursor:pointer;" onclick="showUpdateWarning(\'' + composeEscapeAttr(stackName) + '\', \'' + composeEscapeAttr(stackId) + '\');">';
+        var updateHtml = '<a class="exec" style="cursor:pointer;" onclick="showUpdateWarning(\'' + composeEscapeAttr(stackName) + '\', \'' + composeEscapeAttr(stackId) + '\', \'update\');">';
         updateHtml += '<span class="orange-text" style="white-space:nowrap;"><i class="fa fa-flash fa-fw"></i> ' + updateCount + ' update' + (updateCount > 1 ? 's' : '') + '</span>';
         updateHtml += '</a>';
 
@@ -1369,14 +1369,14 @@ function updateStackUpdateUI(stackName, stackInfo) {
             // Some containers pinned, rest up-to-date
             var html = '<span class="green-text" style="white-space:nowrap;"><i class="fa fa-check fa-fw"></i> up-to-date</span>';
             html += '<div class="cm-advanced compose-status-info" style="font-size:0.8em;margin-top:2px;"><i class="fa fa-thumb-tack fa-fw"></i> ' + pinnedCount + ' pinned</div>';
-            html += '<div class="cm-advanced"><a class="exec" style="cursor:pointer;" onclick="showUpdateWarning(\'' + composeEscapeAttr(stackName) + '\', \'' + composeEscapeAttr(stackId) + '\');"><span style="white-space:nowrap;"><i class="fa fa-cloud-download fa-fw"></i> force update</span></a></div>';
+            html += '<div class="cm-advanced"><a class="exec" style="cursor:pointer;" onclick="showUpdateWarning(\'' + composeEscapeAttr(stackName) + '\', \'' + composeEscapeAttr(stackId) + '\', \'forceUpdate\');"><span style="white-space:nowrap;"><i class="fa fa-cloud-download fa-fw"></i> force update</span></a></div>';
             $updateCell.html(html);
         } else {
             // No updates, no pinned - green "up-to-date" style (like Docker tab)
             // Basic view: just shows up-to-date
             // Advanced view: shows force update link
             var html = '<span class="green-text" style="white-space:nowrap;"><i class="fa fa-check fa-fw"></i> up-to-date</span>';
-            html += '<div class="cm-advanced"><a class="exec" style="cursor:pointer;" onclick="showUpdateWarning(\'' + composeEscapeAttr(stackName) + '\', \'' + composeEscapeAttr(stackId) + '\');"><span style="white-space:nowrap;"><i class="fa fa-cloud-download fa-fw"></i> force update</span></a></div>';
+            html += '<div class="cm-advanced"><a class="exec" style="cursor:pointer;" onclick="showUpdateWarning(\'' + composeEscapeAttr(stackName) + '\', \'' + composeEscapeAttr(stackId) + '\', \'forceUpdate\');"><span style="white-space:nowrap;"><i class="fa fa-cloud-download fa-fw"></i> force update</span></a></div>';
             $updateCell.html(html);
         }
     } else {
@@ -2582,13 +2582,14 @@ function editStackSettings(myID) {
 }
 
 // Unified update warning dialog - called from stack row and container table
-function showUpdateWarning(project, stackId) {
+function showUpdateWarning(project, stackId, updateAction) {
     var path = compose_root + '/' + project;
-    // Use row metadata so force-update from status column behaves like context menu.
+    // Use row metadata so profile selection behavior matches context menu actions.
     var $stackRow = $('#compose_stacks tr.compose-sortable[data-project="' + project + '"]');
     var profiles = [];
     var runningProfile = '';
     var defaultProfile = '';
+    updateAction = updateAction || 'update';
 
     if ($stackRow.length > 0) {
         profiles = $stackRow.data('profiles') || [];
@@ -2597,9 +2598,11 @@ function showUpdateWarning(project, stackId) {
     }
 
     if (profiles.length > 0) {
-        showProfileSelector('forceUpdate', path, profiles, runningProfile, defaultProfile);
-    } else {
+        showProfileSelector(updateAction, path, profiles, runningProfile, defaultProfile);
+    } else if (updateAction === 'forceUpdate') {
         ForceUpdateStack(path);
+    } else {
+        UpdateStack(path);
     }
 }
 
@@ -6045,7 +6048,7 @@ function renderContainerDetails(stackId, containers, project) {
             }
         } else if (ctHasUpdate) {
             // Update available - orange "update ready" style with SHA diff
-            html += '<a class="exec" style="cursor:pointer;" onclick="showUpdateWarning(\'' + composeEscapeAttr(project) + '\', \'' + composeEscapeAttr(stackId) + '\');">';
+            html += '<a class="exec" style="cursor:pointer;" onclick="showUpdateWarning(\'' + composeEscapeAttr(project) + '\', \'' + composeEscapeAttr(stackId) + '\', \'update\');">';
             html += '<span class="orange-text" style="white-space:nowrap;"><i class="fa fa-flash fa-fw"></i> update ready</span>';
             html += '</a>';
             if (ctLocalSha && ctRemoteSha) {

From 492e6cf81782587274a16a5e3c0fa6b7aceb29b5 Mon Sep 17 00:00:00 2001
From: mstrhakr <mstrhakr@gmail.com>
Date: Mon, 8 Jun 2026 22:06:05 -0400
Subject: [PATCH 16/67] feat(container): add persistent container cache and
 icon resolution logic

---
 source/compose.manager/include/Exec.php       | 164 +++++++++++++++++-
 source/compose.manager/include/Util.php       |   3 +
 .../javascript/composeManagerMain.js          |   7 +-
 3 files changed, 171 insertions(+), 3 deletions(-)

diff --git a/source/compose.manager/include/Exec.php b/source/compose.manager/include/Exec.php
index f93aee8a..49c3a21e 100644
--- a/source/compose.manager/include/Exec.php
+++ b/source/compose.manager/include/Exec.php
@@ -63,6 +63,66 @@ function rejectStaleClientPath(?string $actualPath, string $label): bool
     }
 }
 
+if (!function_exists('composeLoadPersistentContainerCache')) {
+    function composeLoadPersistentContainerCache(): array
+    {
+        $cacheFile = '/boot/config/plugins/compose.manager/containers.cache.json';
+        if (!is_file($cacheFile)) {
+            return [];
+        }
+        $decoded = json_decode(file_get_contents($cacheFile), true);
+        return is_array($decoded) ? $decoded : [];
+    }
+}
+
+if (!function_exists('composeSavePersistentContainerCache')) {
+    function composeSavePersistentContainerCache(array $cache): void
+    {
+        $cacheFile = '/boot/config/plugins/compose.manager/containers.cache.json';
+        file_put_contents($cacheFile, json_encode($cache, JSON_PRETTY_PRINT | JSON_UNESCAPED_SLASHES));
+    }
+}
+
+if (!function_exists('composeResolveContainerIcon')) {
+    /**
+     * Resolve container icon using stack cache first, then docker inspect fallback.
+     *
+     * @param string $containerName
+     * @param string $service
+     * @param array<string,string> $iconByService
+     * @param array<string,string> $iconByName
+     * @param array<string,string> $inspectIconCache Per-request inspect memoization by container name
+     */
+    function composeResolveContainerIcon(string $containerName, string $service, array $iconByService, array $iconByName, array &$inspectIconCache): string
+    {
+        if ($service !== '' && isset($iconByService[$service]) && $iconByService[$service] !== '') {
+            return $iconByService[$service];
+        }
+
+        if ($containerName !== '' && isset($iconByName[$containerName]) && $iconByName[$containerName] !== '') {
+            return $iconByName[$containerName];
+        }
+
+        if ($containerName === '') {
+            return '';
+        }
+
+        if (isset($inspectIconCache[$containerName])) {
+            return $inspectIconCache[$containerName];
+        }
+
+        global $docker_label_icon;
+        $labelTemplate = '{{ index .Config.Labels "' . $docker_label_icon . '" }}';
+        $cmd = 'docker inspect ' . escapeshellarg($containerName) . ' --format ' . escapeshellarg($labelTemplate) . ' 2>/dev/null';
+        $icon = trim((string) shell_exec($cmd));
+        if ($icon === '<no value>') {
+            $icon = '';
+        }
+        $inspectIconCache[$containerName] = $icon;
+        return $icon;
+    }
+}
+
 switch ($_POST['action']) {
     case 'composeLogger':
         $message = $_POST['msg'] ?? '';
@@ -1290,6 +1350,25 @@ function rejectStaleClientPath(?string $actualPath, string $label): bool
 
         $updateResults = [];
         $DockerUpdate = new DockerUpdate();
+        $persistentContainerCache = composeLoadPersistentContainerCache();
+        $stackContainerCache = $persistentContainerCache[$script] ?? [];
+        $iconByService = [];
+        $iconByName = [];
+        foreach ($stackContainerCache as $cachedService => $cachedContainer) {
+            if (!is_array($cachedContainer)) {
+                continue;
+            }
+            $cachedIcon = trim((string) ($cachedContainer['icon'] ?? ''));
+            if ($cachedIcon !== '') {
+                $iconByService[(string) $cachedService] = $cachedIcon;
+            }
+            $cachedName = trim((string) ($cachedContainer['name'] ?? ''));
+            if ($cachedName !== '' && $cachedIcon !== '') {
+                $iconByName[$cachedName] = $cachedIcon;
+            }
+        }
+        $inspectIconCache = [];
+        $stackCacheDirty = false;
 
         // Load the update status file to get SHA values
         $dockerManPaths = [
@@ -1320,10 +1399,32 @@ function rejectStaleClientPath(?string $actualPath, string $label): bool
 
             // Second pass: check updates and collect results
             foreach ($rows as $container) {
-                $containerName = $container['Name'] ?? '';
-                $image = $container['Image'] ?? '';
+                $containerLower = array_change_key_case($container, CASE_LOWER);
+                $containerName = trim((string) ($containerLower['name'] ?? $containerLower['names'] ?? ''));
+                $service = trim((string) ($containerLower['service'] ?? ''));
+                $image = trim((string) ($containerLower['image'] ?? ''));
 
                 if ($containerName && $image) {
+                    $icon = composeResolveContainerIcon($containerName, $service, $iconByService, $iconByName, $inspectIconCache);
+
+                    if ($service !== '' && $icon !== '') {
+                        if (!isset($stackContainerCache[$service]) || !is_array($stackContainerCache[$service])) {
+                            $stackContainerCache[$service] = [];
+                        }
+                        if (($stackContainerCache[$service]['icon'] ?? '') !== $icon) {
+                            $stackContainerCache[$service]['icon'] = $icon;
+                            $stackCacheDirty = true;
+                        }
+                        if (($stackContainerCache[$service]['name'] ?? '') === '') {
+                            $stackContainerCache[$service]['name'] = $containerName;
+                            $stackCacheDirty = true;
+                        }
+                        if (($stackContainerCache[$service]['service'] ?? '') === '') {
+                            $stackContainerCache[$service]['service'] = $service;
+                            $stackCacheDirty = true;
+                        }
+                    }
+
                     // Normalize image name (strip docker.io/ prefix, @sha256: digest, add library/ for official images)
                     $image = ContainerInfo::normalizeImageForUpdateCheck($image);
 
@@ -1354,7 +1455,9 @@ function rejectStaleClientPath(?string $actualPath, string $label): bool
 
                     $updateResults[] = ContainerInfo::fromUpdateResponse([
                         'container' => $containerName,
+                        'service' => $service,
                         'image' => $image,
+                        'icon' => $icon,
                         'hasUpdate' => $hasUpdate,
                         'status' => $statusText,
                         'localSha' => $localSha,
@@ -1362,6 +1465,11 @@ function rejectStaleClientPath(?string $actualPath, string $label): bool
                     ])->toUpdateArray();
                 }
             }
+
+            if ($stackCacheDirty) {
+                $persistentContainerCache[$script] = $stackContainerCache;
+                composeSavePersistentContainerCache($persistentContainerCache);
+            }
         }
 
         echo json_encode(['result' => 'success', 'updates' => $updateResults, 'projectName' => $projectName]);
@@ -1390,6 +1498,9 @@ function rejectStaleClientPath(?string $actualPath, string $label): bool
 
         $allUpdates = [];
         $DockerUpdate = new DockerUpdate();
+        $persistentContainerCache = composeLoadPersistentContainerCache();
+        $persistentCacheDirty = false;
+        $inspectIconCache = [];
 
         // Path to update status file
         $dockerManPaths = [
@@ -1399,6 +1510,23 @@ function rejectStaleClientPath(?string $actualPath, string $label): bool
         foreach (StackInfo::allFromRoot($compose_root) as $stackInfoItem) {
             $stackName = $stackInfoItem->projectFolder;
             $projectName = $stackInfoItem->projectFolder;
+            $stackContainerCache = $persistentContainerCache[$stackName] ?? [];
+            $iconByService = [];
+            $iconByName = [];
+            foreach ($stackContainerCache as $cachedService => $cachedContainer) {
+                if (!is_array($cachedContainer)) {
+                    continue;
+                }
+                $cachedIcon = trim((string) ($cachedContainer['icon'] ?? ''));
+                if ($cachedIcon !== '') {
+                    $iconByService[(string) $cachedService] = $cachedIcon;
+                }
+                $cachedName = trim((string) ($cachedContainer['name'] ?? ''));
+                if ($cachedName !== '' && $cachedIcon !== '') {
+                    $iconByName[$cachedName] = $cachedIcon;
+                }
+            }
+            $stackCacheDirty = false;
 
             $rows = $stackInfoItem->getContainerList();
 
@@ -1434,11 +1562,32 @@ function rejectStaleClientPath(?string $actualPath, string $label): bool
                 foreach ($rows as $container) {
                     $containerLower = array_change_key_case($container, CASE_LOWER);
                     $containerName = trim($containerLower['name'] ?? $containerLower['names'] ?? '');
+                    $service = trim((string) ($containerLower['service'] ?? ''));
                     $image = trim($containerLower['image'] ?? '');
                     $state = strtolower(trim($containerLower['state'] ?? ''));
 
                     // Only check updates for running containers
                     if ($containerName && $image && $state === 'running') {
+                        $icon = composeResolveContainerIcon($containerName, $service, $iconByService, $iconByName, $inspectIconCache);
+
+                        if ($service !== '' && $icon !== '') {
+                            if (!isset($stackContainerCache[$service]) || !is_array($stackContainerCache[$service])) {
+                                $stackContainerCache[$service] = [];
+                            }
+                            if (($stackContainerCache[$service]['icon'] ?? '') !== $icon) {
+                                $stackContainerCache[$service]['icon'] = $icon;
+                                $stackCacheDirty = true;
+                            }
+                            if (($stackContainerCache[$service]['name'] ?? '') === '') {
+                                $stackContainerCache[$service]['name'] = $containerName;
+                                $stackCacheDirty = true;
+                            }
+                            if (($stackContainerCache[$service]['service'] ?? '') === '') {
+                                $stackContainerCache[$service]['service'] = $service;
+                                $stackCacheDirty = true;
+                            }
+                        }
+
                         $image = ContainerInfo::normalizeImageForUpdateCheck($image);
 
                         $DockerUpdate->reloadUpdateStatus($image);
@@ -1467,7 +1616,9 @@ function rejectStaleClientPath(?string $actualPath, string $label): bool
 
                         $stackUpdates[] = ContainerInfo::fromUpdateResponse([
                             'container' => $containerName,
+                            'service' => $service,
                             'image' => $image,
+                            'icon' => $icon,
                             'hasUpdate' => $hasUpdate,
                             'status' => ($updateStatus === null) ? 'unknown' : ($updateStatus ? 'up-to-date' : 'update-available'),
                             'localSha' => $localSha,
@@ -1475,6 +1626,11 @@ function rejectStaleClientPath(?string $actualPath, string $label): bool
                         ])->toUpdateArray();
                     }
                 }
+
+                if ($stackCacheDirty) {
+                    $persistentContainerCache[$stackName] = $stackContainerCache;
+                    $persistentCacheDirty = true;
+                }
             }
 
             $allUpdates[$stackName] = [
@@ -1484,6 +1640,10 @@ function rejectStaleClientPath(?string $actualPath, string $label): bool
             ];
         }
 
+        if ($persistentCacheDirty) {
+            composeSavePersistentContainerCache($persistentContainerCache);
+        }
+
         // Save the update status for all stacks
         $savedStatus = $allUpdates;
         foreach ($savedStatus as $stackKey => &$stackData) {
diff --git a/source/compose.manager/include/Util.php b/source/compose.manager/include/Util.php
index 170adcda..1209f676 100644
--- a/source/compose.manager/include/Util.php
+++ b/source/compose.manager/include/Util.php
@@ -1163,6 +1163,7 @@ public static function fromUpdateResponse(array $raw): self
         $info->id = $raw['ID'] ?? $raw['Id'] ?? $raw['id'] ?? '';
         $info->service = $raw['service'] ?? $raw['Service'] ?? '';
         $info->image = $raw['image'] ?? $raw['Image'] ?? '';
+        $info->icon = $raw['icon'] ?? $raw['Icon'] ?? '';
         $info->hasUpdate = $raw['hasUpdate'] ?? false;
         $info->updateStatus = $raw['status'] ?? $raw['updateStatus'] ?? 'unknown';
         $info->localSha = $raw['localSha'] ?? '';
@@ -1239,7 +1240,9 @@ public function toUpdateArray(): array
     {
         return [
             'name' => $this->name,
+            'service' => $this->service,
             'image' => $this->image,
+            'icon' => $this->icon,
             'hasUpdate' => $this->hasUpdate,
             'updateStatus' => $this->updateStatus,
             'localSha' => $this->localSha,
diff --git a/source/compose.manager/javascript/composeManagerMain.js b/source/compose.manager/javascript/composeManagerMain.js
index cbd0240e..5a78e1d1 100644
--- a/source/compose.manager/javascript/composeManagerMain.js
+++ b/source/compose.manager/javascript/composeManagerMain.js
@@ -3512,11 +3512,16 @@ function mergeUpdateStatus(containers, project) {
         var cInfo = createContainerInfo(container);
         stackUpdateStatus[project].containers.forEach(function(update) {
             var uInfo = createContainerInfo(update);
-            if (cInfo.name === uInfo.name) {
+            var sameName = cInfo.name && uInfo.name && cInfo.name === uInfo.name;
+            var sameService = cInfo.service && uInfo.service && cInfo.service === uInfo.service;
+            if (sameName || sameService) {
                 container.hasUpdate = uInfo.hasUpdate;
                 container.updateStatus = uInfo.updateStatus;
                 container.localSha = uInfo.localSha;
                 container.remoteSha = uInfo.remoteSha;
+                if ((!container.icon || !isValidIconSrc(container.icon)) && uInfo.icon) {
+                    container.icon = uInfo.icon;
+                }
             }
         });
     });

From 0ebfc01eab524e0f21927d5fcfd479d92392d595 Mon Sep 17 00:00:00 2001
From: mstrhakr <mstrhakr@gmail.com>
Date: Mon, 8 Jun 2026 22:37:45 -0400
Subject: [PATCH 17/67] feat: add progressive stack list loading

---
 .../compose.manager/include/ComposeList.php   |  40 +-
 .../javascript/composeManagerMain.js          | 655 +++++++++++++-----
 tests/unit/ContainerInfoTest.php              |   4 +-
 3 files changed, 526 insertions(+), 173 deletions(-)

diff --git a/source/compose.manager/include/ComposeList.php b/source/compose.manager/include/ComposeList.php
index 88c625cb..03aabfff 100755
--- a/source/compose.manager/include/ComposeList.php
+++ b/source/compose.manager/include/ComposeList.php
@@ -10,10 +10,37 @@
 
 $cfg = parse_plugin_cfg($sName);
 
+$mode = isset($_GET['mode']) ? trim((string)$_GET['mode']) : 'html';
+if ($mode === 'list') {
+    $projects = StackInfo::listProjectFolders($compose_root);
+    echo json_encode([
+        'result' => 'success',
+        'projects' => array_values($projects),
+    ]);
+    exit;
+}
+
 $o = "";
 $stackCount = 0;
 
-foreach (StackInfo::allFromRoot($compose_root) as $stackInfo) {
+$stackInfos = [];
+if ($mode === 'row') {
+    $project = isset($_GET['project']) ? basename(trim((string)$_GET['project'])) : '';
+    if ($project === '') {
+        echo json_encode(['result' => 'error', 'message' => 'Project not specified.']);
+        exit;
+    }
+    try {
+        $stackInfos = [StackInfo::fromProject($compose_root, $project)];
+    } catch (\Throwable $e) {
+        echo json_encode(['result' => 'error', 'message' => 'Project not found.']);
+        exit;
+    }
+} else {
+    $stackInfos = StackInfo::allFromRoot($compose_root);
+}
+
+foreach ($stackInfos as $stackInfo) {
     $stackCount++;
 
     $projectName = $stackInfo->getName();
@@ -260,9 +287,16 @@
 }
 
 // If no stacks found, show a message
-if ($stackCount === 0) {
+if ($mode !== 'row' && $stackCount === 0) {
     $o = "<tr><td colspan='10' style='text-align:center;padding:20px;color:var(--alt-text-color);'>No Docker Compose stacks found. Click 'Add New Stack' to create one.</td></tr>";
 }
 
 // Output the HTML
-echo $o;
+if ($mode === 'row') {
+    echo json_encode([
+        'result' => 'success',
+        'html' => $o,
+    ]);
+} else {
+    echo $o;
+}
diff --git a/source/compose.manager/javascript/composeManagerMain.js b/source/compose.manager/javascript/composeManagerMain.js
index 5a78e1d1..ebe507ee 100644
--- a/source/compose.manager/javascript/composeManagerMain.js
+++ b/source/compose.manager/javascript/composeManagerMain.js
@@ -283,116 +283,213 @@ function composeLoadlist() {
             showComposeSpinner('Loading stack list...');
         }, 500);
 
-        $.get('/plugins/compose.manager/include/ComposeList.php')
-            .done(function(data) {
-                clearTimeout(composeTimers.load);
+        function finalizeComposeLoadlist(resolvePayload) {
+            clearTimeout(composeTimers.load);
 
-                // Insert the loaded content
-                $('#compose_list').html(data);
+            // Signal load subscribers (e.g. dockerload cache) that the list changed
+            $(document).trigger('composeListRefreshed');
 
-                // Signal load subscribers (e.g. dockerload cache) that the list changed
-                $(document).trigger('composeListRefreshed');
+            // Initialize UI components for the newly loaded content
+            initStackListUI();
 
-                // Initialize UI components for the newly loaded content
-                initStackListUI();
+            // Debug: log initial per-stack rendered status icons (data-status attribute)
+            try {
+                var initialStatuses = [];
+                $('#compose_stacks tr.compose-sortable').each(function() {
+                    var project = $(this).data('project');
+                    var icon = $(this).find('.compose-status-icon').first();
+                    var status = icon.attr('data-status') || icon.attr('class') || '';
+                    initialStatuses.push({
+                        project: project,
+                        status: status
+                    });
+                });
+                composeLogger('initial-stack-statuses', {
+                    stacks: initialStatuses
+                }, 'user', 'debug', 'composeLoadlist');
+            } catch (e) {}
 
-                // Debug: log initial per-stack rendered status icons (data-status attribute)
-                try {
-                    var initialStatuses = [];
-                    $('#compose_stacks tr.compose-sortable').each(function() {
-                        var project = $(this).data('project');
-                        var icon = $(this).find('.compose-status-icon').first();
-                        var status = icon.attr('data-status') || icon.attr('class') || '';
-                        initialStatuses.push({
-                            project: project,
-                            status: status
-                        });
+            // Normalize icons based on state text to ensure server-side render and
+            // client-side update logic agree (workaround for caching or older server HTML)
+            try {
+                $('#compose_stacks tr.compose-sortable').each(function() {
+                    var $row = $(this);
+                    var stateText = $row.find('.state').text().toLowerCase();
+                    var $icon = $row.find('.compose-status-icon').first();
+                    if (!$icon.length) return;
+                    var desiredShape = null;
+                    var desiredColor = 'grey-text';
+                    if (stateText.indexOf('partial') !== -1) {
+                        desiredShape = 'exclamation-circle';
+                        desiredColor = 'orange-text';
+                    } else if (stateText.indexOf('started') !== -1) {
+                        desiredShape = 'play';
+                        desiredColor = 'green-text';
+                    } else if (stateText.indexOf('paused') !== -1) {
+                        desiredShape = 'pause';
+                        desiredColor = 'orange-text';
+                    } else {
+                        desiredShape = 'square';
+                        desiredColor = 'grey-text';
+                    }
+
+                    // If icon already matches, skip
+                    if (($icon.hasClass('fa-' + desiredShape) && $icon.hasClass(desiredColor))) return;
+
+                    composeLogger('normalize-icon', {
+                        project: $row.data('project'),
+                        stateText: stateText,
+                        desiredShape: desiredShape,
+                        desiredColor: desiredColor,
+                        before: $icon.attr('class')
+                    }, 'user', 'debug', 'composeLoadlist');
+                    // Remove old fa-* classes, color classes and apply desired ones
+                    $icon.removeClass(function(i, cls) {
+                        return (cls.match(/fa-[^\s]+/g) || []).join(' ');
                     });
-                    composeLogger('initial-stack-statuses', {
-                        stacks: initialStatuses
+                    $icon.removeClass('green-text orange-text grey-text cyan-text');
+                    $icon.addClass('fa fa-' + desiredShape + ' ' + desiredColor + ' compose-status-icon');
+                    composeLogger('normalize-icon-done', {
+                        project: $row.data('project'),
+                        after: $icon.attr('class')
                     }, 'user', 'debug', 'composeLoadlist');
-                } catch (e) {}
+                });
+            } catch (e) {}
 
-                // Normalize icons based on state text to ensure server-side render and
-                // client-side update logic agree (workaround for caching or older server HTML)
-                try {
-                    $('#compose_stacks tr.compose-sortable').each(function() {
-                        var $row = $(this);
-                        var stateText = $row.find('.state').text().toLowerCase();
-                        var $icon = $row.find('.compose-status-icon').first();
-                        if (!$icon.length) return;
-                        var desiredShape = null;
-                        var desiredColor = 'grey-text';
-                        if (stateText.indexOf('partial') !== -1) {
-                            desiredShape = 'exclamation-circle';
-                            desiredColor = 'orange-text';
-                        } else if (stateText.indexOf('started') !== -1) {
-                            desiredShape = 'play';
-                            desiredColor = 'green-text';
-                        } else if (stateText.indexOf('paused') !== -1) {
-                            desiredShape = 'pause';
-                            desiredColor = 'orange-text';
-                        } else {
-                            desiredShape = 'square';
-                            desiredColor = 'grey-text';
-                        }
+            // Cleanup any temporary per-container spinners or leftover in-progress state
+            try {
+                $('#compose_list').find('.compose-container-spinner').each(function() {
+                    var $sp = $(this);
+                    var $wrap = $sp.closest('.hand');
+                    $sp.remove();
+                    $wrap.find('img').css('opacity', 1);
+                });
+                // Restore any state text preserved by setStackActionInProgress
+                $('#compose_stacks .state').each(function() {
+                    var $s = $(this);
+                    if ($s.data('orig-text')) {
+                        $s.text($s.data('orig-text'));
+                        $s.removeData('orig-text');
+                    }
+                });
+            } catch (e) {}
 
-                        // If icon already matches, skip
-                        if (($icon.hasClass('fa-' + desiredShape) && $icon.hasClass(desiredColor))) return;
-
-                        composeLogger('normalize-icon', {
-                            project: $row.data('project'),
-                            stateText: stateText,
-                            desiredShape: desiredShape,
-                            desiredColor: desiredColor,
-                            before: $icon.attr('class')
-                        }, 'user', 'debug', 'composeLoadlist');
-                        // Remove old fa-* classes, color classes and apply desired ones
-                        $icon.removeClass(function(i, cls) {
-                            return (cls.match(/fa-[^\s]+/g) || []).join(' ');
-                        });
-                        $icon.removeClass('green-text orange-text grey-text cyan-text');
-                        $icon.addClass('fa fa-' + desiredShape + ' ' + desiredColor + ' compose-status-icon');
-                        composeLogger('normalize-icon-done', {
-                            project: $row.data('project'),
-                            after: $icon.attr('class')
-                        }, 'user', 'debug', 'composeLoadlist');
-                    });
-                } catch (e) {}
+            // Hide compose spinner overlay
+            hideComposeSpinner();
 
-                // Cleanup any temporary per-container spinners or leftover in-progress state
-                try {
-                    $('#compose_list').find('.compose-container-spinner').each(function() {
-                        var $sp = $(this);
-                        var $wrap = $sp.closest('.hand');
-                        $sp.remove();
-                        $wrap.find('img').css('opacity', 1);
-                    });
-                    // Restore any state text preserved by setStackActionInProgress
-                    $('#compose_stacks .state').each(function() {
-                        var $s = $(this);
-                        if ($s.data('orig-text')) {
-                            $s.text($s.data('orig-text'));
-                            $s.removeData('orig-text');
-                        }
-                    });
-                } catch (e) {}
+            // Show buttons now that content is loaded
+            $('input[type=button]').show();
+
+            // Notify other features (e.g. hide-from-docker) that compose list is ready
+            $(document).trigger('compose-list-loaded');
+
+            try {
+                resolve(resolvePayload);
+            } catch (e) {
+                resolve();
+            }
+        }
 
-                // Hide compose spinner overlay
+        $.get('/plugins/compose.manager/include/ComposeList.php', {
+                mode: 'list'
+            })
+            .done(function(metaRaw) {
+                var meta = tryParseJson(metaRaw);
+                if (!meta || meta.result !== 'success' || !Array.isArray(meta.projects)) {
+                    composeLogger('Invalid stack meta response', {
+                        response: metaRaw
+                    }, 'user', 'error', 'composeLoadlist');
+                    $('#compose_list').html('<tr><td colspan="10" class="compose-status-danger" style="text-align:center;padding:20px;">Failed to load stack list. Please refresh the page.</td></tr>');
+                    clearTimeout(composeTimers.load);
+                    hideComposeSpinner();
+                    reject(new Error('Invalid stack list response'));
+                    return;
+                }
+
+                var projects = meta.projects;
+                if (projects.length === 0) {
+                    $('#compose_list').html('<tr><td colspan="10" style="text-align:center;padding:20px;color:var(--alt-text-color);">No Docker Compose stacks found. Click \"Add New Stack\" to create one.</td></tr>');
+                    finalizeComposeLoadlist('');
+                    return;
+                }
+
+                // Warm expansion settings once so progressive row insertions can expand immediately.
+                ensureComposeDefaultExpandSettings();
+
+                // Start loading stack container details in the background immediately.
+                // UI rendering stays top-down; this just gets data ahead of the visual pipeline.
+                prefetchStackDetailsInBackground(projects);
+
+                var progressHtml = '<tr id="compose-load-progress-row">' +
+                    '<td colspan="10" style="text-align:center;padding:12px;border:none;background:transparent;">' +
+                    '<span class="compose-text-muted" style="display:inline-flex;align-items:center;gap:8px;">' +
+                    '<i class="fa fa-refresh fa-spin"></i>' +
+                    '<span>Loading stacks... <span id="compose-load-progress-count">0/' + projects.length + '</span></span>' +
+                    '</span>' +
+                    '</td>' +
+                    '</tr>';
+                $('#compose_list').html(progressHtml);
+
+                // Prime cached update status early so rows can render status as soon as they land.
+                if (!savedUpdateStatusLoaded) {
+                    loadSavedUpdateStatus();
+                }
+
+                // Progressive mode shows in-table placeholders, so remove global overlay spinner.
+                clearTimeout(composeTimers.load);
                 hideComposeSpinner();
 
-                // Show buttons now that content is loaded
-                $('input[type=button]').show();
+                var completed = 0;
+                var queueIndex = 0;
 
-                // Notify other features (e.g. hide-from-docker) that compose list is ready
-                $(document).trigger('compose-list-loaded');
+                function updateProgress() {
+                    $('#compose-load-progress-count').text(completed + '/' + projects.length);
+                    if (completed >= projects.length) {
+                        $('#compose-load-progress-row').remove();
+                        finalizeComposeLoadlist('progressive');
+                    }
+                }
 
-                // Resolve the promise so callers know the list has been loaded
-                try {
-                    resolve(data);
-                } catch (e) {
-                    resolve();
+                function loadNextProjectSequentially() {
+                    if (queueIndex >= projects.length) {
+                        return;
+                    }
+
+                    var project = projects[queueIndex];
+                    queueIndex++;
+
+                    $.get('/plugins/compose.manager/include/ComposeList.php', {
+                            mode: 'row',
+                            project: project
+                        })
+                        .done(function(rowRaw) {
+                            var waitForExpansion = Promise.resolve();
+                            var rowResp = tryParseJson(rowRaw);
+                            if (rowResp && rowResp.result === 'success' && rowResp.html) {
+                                var $rowChunk = $(rowResp.html);
+                                $('#compose-load-progress-row').before($rowChunk);
+                                initializeProgressiveLoadedRows($rowChunk);
+                                // Enforce top-down UX: wait for this stack's expansion/details work before next stack.
+                                waitForExpansion = composeDefaultExpandQueue;
+                            } else {
+                                $('#compose-load-progress-row').before('<tr><td colspan="10" class="compose-status-danger" style="padding:8px 12px;">Failed to load ' + composeEscapeHtml(project) + '.</td></tr>');
+                            }
+
+                            waitForExpansion.finally(function() {
+                                completed++;
+                                updateProgress();
+                                loadNextProjectSequentially();
+                            });
+                        })
+                        .fail(function() {
+                            $('#compose-load-progress-row').before('<tr><td colspan="10" class="compose-status-danger" style="padding:8px 12px;">Failed to load ' + composeEscapeHtml(project) + '.</td></tr>');
+                            completed++;
+                            updateProgress();
+                            loadNextProjectSequentially();
+                        });
                 }
+
+                loadNextProjectSequentially();
             })
             .fail(function(xhr, status, error) {
                 composeLogger('failed', {
@@ -468,12 +565,74 @@ function initStackListUI() {
         expandedStacks[stackId] = true;
     });
 
-    // Load saved update status after list is loaded
-    loadSavedUpdateStatus();
+    // Load saved update status after list is loaded (skip if already primed)
+    if (!savedUpdateStatusLoaded) {
+        loadSavedUpdateStatus();
+    }
 
     syncComposeSortModeUI();
 }
 
+function initializeProgressiveLoadedRows($rowChunk) {
+    if (!$rowChunk || !$rowChunk.length) return;
+
+    var $rows = $rowChunk.filter('tr.compose-sortable');
+    if (!$rows.length) {
+        $rows = $rowChunk.find('tr.compose-sortable');
+    }
+    if (!$rows.length) return;
+
+    // Initialize autostart toggles only for newly appended rows.
+    $rows.find('.auto_start').each(function() {
+        var $el = $(this);
+        if ($el.data('switchbutton-initialized')) return;
+        $el.switchButton({
+            labels_placement: 'right',
+            on_label: 'On',
+            off_label: 'Off',
+            clear: false
+        });
+        $el.data('switchbutton-initialized', true);
+    });
+
+    // Initialize context menus for only newly added stack icons.
+    $rows.find('[id^="stack-"][data-stackid]').each(function() {
+        addComposeStackContext(this.id);
+    });
+
+    // Keep description truncation behavior consistent for new rows.
+    $rows.find('.docker_readmore').not('.stack-details-container .docker_readmore').each(function() {
+        var $el = $(this);
+        $el.readmore('destroy');
+        $el.readmore({
+            maxHeight: 32,
+            moreLink: "<a href='#' style='text-align:center'><i class='fa fa-chevron-down'></i></a>",
+            lessLink: "<a href='#' style='text-align:center'><i class='fa fa-chevron-up'></i></a>"
+        });
+    });
+
+    // Apply the currently selected basic/advanced mode to new rows.
+    applyListView(false);
+
+    // Apply cached update status immediately for new rows when available.
+    $rows.each(function() {
+        var project = $(this).data('project');
+        if (project && stackUpdateStatus[project]) {
+            updateStackUpdateUI(project, stackUpdateStatus[project]);
+        }
+    });
+    updateUpdateAllButton();
+
+    // Apply default expansion policy per row as soon as it is inserted.
+    applyDefaultExpansionToRows($rows);
+
+    // Notify dockerload/hide-from-docker listeners so new rows can receive live updates now.
+    $(document).trigger('composeListRefreshed');
+    if (typeof window.composeDockerLoadToggle === 'function' && isComposeAdvancedMode()) {
+        window.composeDockerLoadToggle(true);
+    }
+}
+
 // Load external stylesheets (non-critical styles — critical ones are inline above)
 (function() {
     var base = composeBootstrap.comboButtonCss || '';
@@ -965,6 +1124,95 @@ function updateTabModifiedState() {
 
 // Update status cache per stack
 var stackUpdateStatus = {};
+var savedUpdateStatusLoaded = false;
+
+var composeDefaultExpandSettings = null;
+var composeDefaultExpandSettingsPromise = null;
+var composeDefaultExpandQueue = Promise.resolve();
+
+function ensureComposeDefaultExpandSettings() {
+    if (composeDefaultExpandSettings !== null) {
+        return Promise.resolve(composeDefaultExpandSettings);
+    }
+    if (composeDefaultExpandSettingsPromise) {
+        return composeDefaultExpandSettingsPromise;
+    }
+
+    composeDefaultExpandSettingsPromise = getConfig().then(function(config) {
+        composeDefaultExpandSettings = {
+            enabled: config && config['STACKS_DEFAULT_EXPANDED'] == 'true',
+            onlyRunning: config && config['ONLY_EXPAND_RUNNING_STACKS'] == 'true'
+        };
+        return composeDefaultExpandSettings;
+    }).catch(function() {
+        composeDefaultExpandSettings = {
+            enabled: false,
+            onlyRunning: false
+        };
+        return composeDefaultExpandSettings;
+    });
+
+    return composeDefaultExpandSettingsPromise;
+}
+
+function applyDefaultExpansionToRows($rows) {
+    if (!$rows || !$rows.length) return;
+
+    ensureComposeDefaultExpandSettings().then(function(settings) {
+        if (!settings || !settings.enabled) return;
+
+        $rows.each(function() {
+            var $row = $(this);
+            var stackId = ($row.attr('id') || '').replace('stack-row-', '');
+            if (!stackId) return;
+
+            if (settings.onlyRunning && $row.data('isup') != '1') {
+                return;
+            }
+
+            if (expandedStacks[stackId] || $('#details-row-' + stackId).is(':visible')) {
+                return;
+            }
+
+            composeDefaultExpandQueue = composeDefaultExpandQueue.then(function() {
+                return expandStackDetailsSequential(stackId);
+            }).catch(function() {
+                return null;
+            });
+        });
+    });
+}
+
+function expandStackDetailsSequential(stackId) {
+    var $row = $('#stack-row-' + stackId);
+    var $detailsRow = $('#details-row-' + stackId);
+    var $expandIcon = $('#expand-icon-' + stackId);
+    var project = $row.data('project');
+
+    if (!$row.length || !$detailsRow.length) {
+        return Promise.resolve();
+    }
+
+    // Already expanded/visible: if a load is in progress, wait for it; otherwise skip.
+    if (expandedStacks[stackId] || $detailsRow.is(':visible')) {
+        if (stackDetailsLoading[stackId]) {
+            return loadStackContainerDetails(stackId, project);
+        }
+        return Promise.resolve();
+    }
+
+    $expandIcon.addClass('expanded');
+    expandedStacks[stackId] = true;
+
+    if (stackContainersCache[stackId]) {
+        renderContainerDetails(stackId, stackContainersCache[stackId], project);
+        return new Promise(function(resolve) {
+            $detailsRow.stop(true, true).slideDown(200, resolve);
+        });
+    }
+
+    return loadStackContainerDetails(stackId, project);
+}
 
 // Set to true when docker.versions plugin is detected (populated from getSavedUpdateStatus response)
 var dockerVersionsInstalled = false;
@@ -973,6 +1221,7 @@ var dockerVersionsInstalled = false;
 // If auto-check is enabled and interval has elapsed, trigger a fresh check
 // Also checks for pending rechecks from recent update operations
 function loadSavedUpdateStatus() {
+    savedUpdateStatusLoaded = true;
     $.post(caURL, {
         action: 'getSavedUpdateStatus'
     }, function(data) {
@@ -1720,18 +1969,6 @@ $(function() {
                 composeLogger('composeDockerLoadToggle not available yet at composeLoadlist completion', null, 'user', 'debug', 'dockerload');
             }
 
-            getConfig().then(function(config) {
-                if (config['STACKS_DEFAULT_EXPANDED'] == 'true') {
-                    // Expand all stacks if the default is set to expanded
-                    $('#compose_stacks tr.compose-sortable').each(function() {
-                        if ($(this).data('isup') != "1" && config['ONLY_EXPAND_RUNNING_STACKS'] == 'true') {
-                            return; // Skip stopped stacks if ONLY_EXPAND_RUNNING_STACKS is true
-                        }
-                        var stackId = $(this).attr('id').replace('stack-row-', '');
-                        toggleStackDetails(stackId);
-                    });
-                }
-            });
         });
         // ── Cross-widget sync ──────────────────────────────────────────
         // On the Docker page the Compose stacks list is rendered below
@@ -3966,9 +4203,55 @@ var persistentContainerCache = {}; // Persistent cache loaded from disk
 var stackStartedAtCache = {}; // Cache for stack-level started_at timestamps
 // Track stacks currently loading details to prevent concurrent reloads
 var stackDetailsLoading = {};
+var stackDetailsLoadPromises = {};
+var stackDetailsPrefetchPromises = {};
+var stackDetailsPrefetchCache = {};
 // Suppress immediate refresh after a render to avoid loops
 var stackDetailsJustRendered = {};
 
+function prefetchStackDetailsInBackground(projects) {
+    if (!Array.isArray(projects) || projects.length === 0) return;
+
+    var maxParallel = 4;
+    var next = 0;
+    var active = 0;
+
+    function schedule() {
+        while (active < maxParallel && next < projects.length) {
+            (function(project) {
+                next++;
+
+                if (!project || stackDetailsPrefetchPromises[project] || stackDetailsPrefetchCache[project]) {
+                    schedule();
+                    return;
+                }
+
+                active++;
+                stackDetailsPrefetchPromises[project] = new Promise(function(resolve) {
+                    $.post(caURL, {
+                        action: 'getStackContainers',
+                        script: project
+                    }, function(data) {
+                        var parsed = tryParseJson(data);
+                        if (parsed && parsed.result === 'success') {
+                            stackDetailsPrefetchCache[project] = parsed;
+                        }
+                        resolve();
+                    }).fail(function() {
+                        resolve();
+                    }).always(function() {
+                        active--;
+                        delete stackDetailsPrefetchPromises[project];
+                        schedule();
+                    });
+                });
+            })(projects[next]);
+        }
+    }
+
+    schedule();
+}
+
 function openStackActionsMenu(event, stackId) {
     event.stopPropagation();
     currentStackId = stackId;
@@ -5838,15 +6121,56 @@ function toggleStackDetails(stackId) {
 function loadStackContainerDetails(stackId, project) {
     var $container = $('#details-container-' + stackId);
 
+    function renderFromResponse(response, finishLoad) {
+        if (response && response.result === 'success') {
+            var containers = response.containers || [];
+
+            // Normalize all containers via factory function (PascalCase→camelCase)
+            containers = containers.map(createContainerInfo).filter(Boolean);
+
+            // Merge update status from stackUpdateStatus if available
+            mergeUpdateStatus(containers, project);
+
+            stackContainersCache[stackId] = containers;
+            if (response.startedAt) stackStartedAtCache[stackId] = response.startedAt;
+            composeLogger('success', {
+                stackId: stackId,
+                project: project,
+                containers: containers.length
+            }, 'user', 'info', 'container-details');
+            renderContainerDetails(stackId, containers, project);
+            $('#details-row-' + stackId).stop(true, true).slideDown(200, finishLoad);
+            return true;
+        }
+        return false;
+    }
+
+    function renderError(message, finishLoad, level) {
+        $container.html('<div class="stack-details-error"><i class="fa fa-exclamation-triangle"></i> ' + composeEscapeHtml(message) + '</div>');
+        $('#details-row-' + stackId).stop(true, true).slideDown(200, finishLoad);
+        composeLogger(level || 'error', {
+            stackId: stackId,
+            project: project,
+            message: message
+        }, 'user', level || 'error', 'container-details');
+    }
+
     // Prevent parallel loads for same stack
     if (stackDetailsLoading[stackId]) {
         composeLogger('already-loading', {
             stackId: stackId,
             project: project
         }, 'user', 'warning', 'container-details');
-        return;
+        return stackDetailsLoadPromises[stackId] || Promise.resolve();
     }
     stackDetailsLoading[stackId] = true;
+    stackDetailsLoadPromises[stackId] = new Promise(function(resolve) {
+        function finishLoad() {
+            stackDetailsLoading[stackId] = false;
+            delete stackDetailsLoadPromises[stackId];
+            resolve();
+        }
+
     composeLogger('start', {
         stackId: stackId,
         project: project
@@ -5855,70 +6179,65 @@ function loadStackContainerDetails(stackId, project) {
     // Show loading state
     $container.html('<div class="stack-details-loading"><i class="fa fa-spinner fa-spin"></i> Loading container details...</div>');
 
-    $.post(caURL, {
-        action: 'getStackContainers',
-        script: project
-    }, function(data) {
-        if (data) {
-            try {
-                var response = JSON.parse(data);
-                if (response.result === 'success') {
-                    var containers = response.containers;
+    function fetchAndRender(finishLoad) {
+        $.post(caURL, {
+            action: 'getStackContainers',
+            script: project
+        }, function(data) {
+            var parsed = tryParseJson(data);
+            if (parsed && parsed.result === 'success') {
+                // Keep prefetch cache warm with latest direct fetch too.
+                stackDetailsPrefetchCache[project] = parsed;
+            }
 
-                    // Normalize all containers via factory function (PascalCase→camelCase)
-                    containers = containers.map(createContainerInfo).filter(Boolean);
+            if (renderFromResponse(parsed, finishLoad)) {
+                return;
+            }
 
-                    // Merge update status from stackUpdateStatus if available
-                    mergeUpdateStatus(containers, project);
+            if (parsed && parsed.message) {
+                renderError(parsed.message, finishLoad, 'error');
+            } else {
+                renderError('Failed to load container details', finishLoad, 'warning');
+            }
+        }).fail(function() {
+            renderError('Failed to load container details', finishLoad, 'error');
+        });
+    }
 
-                    stackContainersCache[stackId] = containers;
-                    if (response.startedAt) stackStartedAtCache[stackId] = response.startedAt;
-                    composeLogger('success', {
-                        stackId: stackId,
-                        project: project,
-                        containers: containers.length
-                    }, 'user', 'info', 'container-details');
-                    renderContainerDetails(stackId, containers, project);
-                    // Slide down details row now that content is rendered
-                    $('#details-row-' + stackId).slideDown(200);
-                } else {
-                    // Escape error message to prevent XSS
-                    var errorMsg = composeEscapeHtml(response.message || 'Failed to load container details');
-                    $container.html('<div class="stack-details-error"><i class="fa fa-exclamation-triangle"></i> ' + errorMsg + '</div>');
-                    $('#details-row-' + stackId).slideDown(200);
-                    composeLogger('error', {
-                        stackId: stackId,
-                        project: project,
-                        message: errorMsg
-                    }, 'user', 'error', 'container-details');
-                }
-            } catch (e) {
-                $container.html('<div class="stack-details-error"><i class="fa fa-exclamation-triangle"></i> Failed to parse container details response</div>');
-                $('#details-row-' + stackId).slideDown(200);
-                composeLogger('parse-error', {
-                    stackId: stackId,
-                    project: project,
-                    err: e.toString()
-                }, 'user', 'error', 'container-details');
+    function consumePrefetchOrFetch(finishLoad) {
+        // Fast path: prefetch already finished.
+        if (stackDetailsPrefetchCache[project]) {
+            var cached = stackDetailsPrefetchCache[project];
+            delete stackDetailsPrefetchCache[project];
+            if (!renderFromResponse(cached, finishLoad)) {
+                fetchAndRender(finishLoad);
             }
-        } else {
-            $container.html('<div class="stack-details-error"><i class="fa fa-exclamation-triangle"></i> Failed to load container details</div>');
-            $('#details-row-' + stackId).slideDown(200);
-            composeLogger('empty-response', {
-                stackId: stackId,
-                project: project
-            }, 'user', 'warning', 'container-details');
+            return;
         }
-        stackDetailsLoading[stackId] = false;
-    }).fail(function() {
-        $container.html('<div class="stack-details-error"><i class="fa fa-exclamation-triangle"></i> Failed to load container details</div>');
-        $('#details-row-' + stackId).slideDown(200);
-        stackDetailsLoading[stackId] = false;
-        composeLogger('failed', {
-            stackId: stackId,
-            project: project
-        }, 'user', 'error', 'container-details');
+
+        // If a prefetch is currently in-flight for this project, wait for it once.
+        if (stackDetailsPrefetchPromises[project]) {
+            stackDetailsPrefetchPromises[project].then(function() {
+                if (stackDetailsPrefetchCache[project]) {
+                    var prefetched = stackDetailsPrefetchCache[project];
+                    delete stackDetailsPrefetchCache[project];
+                    if (renderFromResponse(prefetched, finishLoad)) {
+                        return;
+                    }
+                }
+                fetchAndRender(finishLoad);
+            });
+            return;
+        }
+
+        // No prefetch available: normal path.
+        fetchAndRender(finishLoad);
+    }
+
+    consumePrefetchOrFetch(finishLoad);
     });
+
+    return stackDetailsLoadPromises[stackId];
 }
 
 function renderContainerDetails(stackId, containers, project) {
diff --git a/tests/unit/ContainerInfoTest.php b/tests/unit/ContainerInfoTest.php
index 50538e40..6ce40db1 100644
--- a/tests/unit/ContainerInfoTest.php
+++ b/tests/unit/ContainerInfoTest.php
@@ -311,13 +311,13 @@ public function testToUpdateArrayContainsOnlyUpdateFields(): void
 
         $arr = $info->toUpdateArray();
 
-        $expected = ['name', 'image', 'hasUpdate', 'updateStatus', 'localSha', 'remoteSha', 'isPinned', 'pinnedDigest'];
+        $expected = ['name', 'service', 'image', 'icon', 'hasUpdate', 'updateStatus', 'localSha', 'remoteSha', 'isPinned', 'pinnedDigest'];
         $this->assertSame($expected, array_keys($arr));
         $this->assertSame('abcdef1234567890abcdef1234567890', $arr['pinnedDigest']);
+        $this->assertSame('icon.png', $arr['icon']);
 
         // Should NOT contain non-update fields
         $this->assertArrayNotHasKey('state', $arr);
-        $this->assertArrayNotHasKey('icon', $arr);
         $this->assertArrayNotHasKey('ports', $arr);
     }
 

From ed8019c85d15653e4d49b82087144061310cd340 Mon Sep 17 00:00:00 2001
From: mstrhakr <mstrhakr@gmail.com>
Date: Mon, 8 Jun 2026 22:51:21 -0400
Subject: [PATCH 18/67] fix(changelog): conditionally load changelog script if
 available so it works when compose is on its own tab

---
 source/compose.manager/include/ComposeManager.php | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/source/compose.manager/include/ComposeManager.php b/source/compose.manager/include/ComposeManager.php
index 2e0258d2..5b433cd5 100755
--- a/source/compose.manager/include/ComposeManager.php
+++ b/source/compose.manager/include/ComposeManager.php
@@ -289,6 +289,9 @@ function compose_manager_cpu_spec_count($cpuSpec)
 <script src="<?php autov('/plugins/compose.manager/javascript/common.js'); ?>" type="text/javascript"></script>
 <script src="<?php autov('/plugins/compose.manager/javascript/composeSortable.js'); ?>" type="text/javascript"></script>
 <script src="<?php autov('/plugins/compose.manager/javascript/composeStackUtils.js'); ?>" type="text/javascript"></script>
+<?php if (file_exists('/usr/local/emhttp/plugins/docker.versions/scripts/changelog.js')): ?>
+<script src="<?php autov('/plugins/docker.versions/scripts/changelog.js'); ?>" type="text/javascript"></script>
+<?php endif; ?>
 <script>
     window.composeManagerBootstrap = {
         compose_root: <?php echo json_encode($compose_root); ?>,

From 0cf655bf65eee9d761a87293e32d5401d2c1600a Mon Sep 17 00:00:00 2001
From: mstrhakr <mstrhakr@gmail.com>
Date: Mon, 8 Jun 2026 23:00:07 -0400
Subject: [PATCH 19/67] fix(compose): optimize cache invalidation logic based
 on stack/container structure changes

---
 .../javascript/composeManagerMain.js          | 111 ++++++++++++++++--
 1 file changed, 104 insertions(+), 7 deletions(-)

diff --git a/source/compose.manager/javascript/composeManagerMain.js b/source/compose.manager/javascript/composeManagerMain.js
index ebe507ee..00d30586 100644
--- a/source/compose.manager/javascript/composeManagerMain.js
+++ b/source/compose.manager/javascript/composeManagerMain.js
@@ -441,6 +441,7 @@ function composeLoadlist() {
 
                 var completed = 0;
                 var queueIndex = 0;
+                var stackLoadTimers = {};
 
                 function updateProgress() {
                     $('#compose-load-progress-count').text(completed + '/' + projects.length);
@@ -457,6 +458,13 @@ function composeLoadlist() {
 
                     var project = projects[queueIndex];
                     queueIndex++;
+                    stackLoadTimers[project] = Date.now();
+
+                    composeLogger('progressive stack load start', {
+                        project: project,
+                        position: queueIndex,
+                        total: projects.length
+                    }, 'user', 'debug', 'composeLoadlist');
 
                     $.get('/plugins/compose.manager/include/ComposeList.php', {
                             mode: 'row',
@@ -466,22 +474,46 @@ function composeLoadlist() {
                             var waitForExpansion = Promise.resolve();
                             var rowResp = tryParseJson(rowRaw);
                             if (rowResp && rowResp.result === 'success' && rowResp.html) {
+                                var elapsedMs = Date.now() - (stackLoadTimers[project] || Date.now());
+                                composeLogger('progressive stack load success', {
+                                    project: project,
+                                    position: queueIndex,
+                                    total: projects.length,
+                                    elapsedMs: elapsedMs
+                                }, 'user', 'debug', 'composeLoadlist');
                                 var $rowChunk = $(rowResp.html);
                                 $('#compose-load-progress-row').before($rowChunk);
                                 initializeProgressiveLoadedRows($rowChunk);
                                 // Enforce top-down UX: wait for this stack's expansion/details work before next stack.
                                 waitForExpansion = composeDefaultExpandQueue;
                             } else {
+                                var badRespElapsedMs = Date.now() - (stackLoadTimers[project] || Date.now());
+                                composeLogger('progressive stack load invalid response', {
+                                    project: project,
+                                    position: queueIndex,
+                                    total: projects.length,
+                                    elapsedMs: badRespElapsedMs,
+                                    response: rowResp
+                                }, 'user', 'warn', 'composeLoadlist');
                                 $('#compose-load-progress-row').before('<tr><td colspan="10" class="compose-status-danger" style="padding:8px 12px;">Failed to load ' + composeEscapeHtml(project) + '.</td></tr>');
                             }
 
                             waitForExpansion.finally(function() {
+                                delete stackLoadTimers[project];
                                 completed++;
                                 updateProgress();
                                 loadNextProjectSequentially();
                             });
                         })
                         .fail(function() {
+                            var failElapsedMs = Date.now() - (stackLoadTimers[project] || Date.now());
+                            composeLogger('progressive stack load failed', {
+                                project: project,
+                                position: queueIndex,
+                                total: projects.length,
+                                elapsedMs: failElapsedMs
+                            }, 'user', 'warn', 'composeLoadlist');
+                            delete stackLoadTimers[project];
                             $('#compose-load-progress-row').before('<tr><td colspan="10" class="compose-status-danger" style="padding:8px 12px;">Failed to load ' + composeEscapeHtml(project) + '.</td></tr>');
                             completed++;
                             updateProgress();
@@ -1953,13 +1985,20 @@ $(function() {
 
     // Gate dockerload socket start until the stack list DOM is ready.
     var composeListReady = false;
+    var composeListLoadStartedAt = Date.now();
 
     // Load the persistent container cache before the stack list.
     // This ensures dialog merge logic can use last-known container metadata.
     loadPersistentContainerCache().then(function() {
-        composeLoadlist().then(function() {
+        composeListLoadStartedAt = Date.now();
+        composeLoadlist().then(function(loadMode) {
             composeListReady = true;
-            composeLogger('composeListReady=true, rows=' + $('#compose_stacks tr.compose-sortable').length, null, 'user', 'debug', 'dockerload');
+            composeLogger('compose list finished loading', {
+                rows: $('#compose_stacks tr.compose-sortable').length,
+                elapsedMs: Date.now() - composeListLoadStartedAt,
+                mode: loadMode || 'standard',
+                composeListReady: true
+            }, 'user', 'debug', 'dockerload');
 
             // Start the dockerload socket now that the DOM has rows with data-ctids.
             if (typeof window.composeDockerLoadToggle === 'function') {
@@ -2094,6 +2133,7 @@ $(function() {
             // composeLoadlist() and reused until the row count changes.
             // Avoids O(stacks) DOM traversal + string splits on every stats tick.
             var composeStackIndex = null;
+            var composeStackSignature = '';
             var composeLoadById = {};
             var composeLoadStaleMs = 15000;
 
@@ -2113,6 +2153,32 @@ $(function() {
                 $('.compose-mem-' + shortId).hide();
             }
 
+            // Build a lightweight fingerprint of stack rows + their container ids.
+            // Used to avoid invalidating caches when composeListRefreshed fires but
+            // the actual stack structure did not change.
+            function getComposeStackSignatureFromDom() {
+                var parts = [];
+                $('#compose_stacks tr.compose-sortable').each(function() {
+                    var stackId = ($(this).attr('id') || '').replace('stack-row-', '');
+                    if (!stackId) return;
+                    var ctidsAttr = $(this).attr('data-ctids') || '';
+                    parts.push(stackId + ':' + ctidsAttr);
+                });
+                return parts.join('|');
+            }
+
+            function getComposeContainerIdSetFromDom() {
+                var idSet = {};
+                $('#compose_stacks tr.compose-sortable').each(function() {
+                    var ctidsAttr = $(this).attr('data-ctids') || '';
+                    if (!ctidsAttr) return;
+                    ctidsAttr.split(',').forEach(function(id) {
+                        if (id) idSet[id] = true;
+                    });
+                });
+                return idSet;
+            }
+
             function buildComposeStackIndex() {
                 composeStackIndex = [];
                 $('#compose_stacks tr.compose-sortable').each(function() {
@@ -2124,15 +2190,46 @@ $(function() {
                         containerIds: ctidsAttr ? ctidsAttr.split(',') : []
                     });
                 });
-                composeLogger('buildComposeStackIndex complete, stacks=' + composeStackIndex.length, null, 'user', 'debug', 'dockerload');
+                composeStackSignature = getComposeStackSignatureFromDom();
+                // During progressive initial load, row count changes rapidly.
+                // Avoid flooding debug logs until composeListReady is true.
+                if (composeListReady) {
+                    composeLogger('buildComposeStackIndex complete, stacks=' + composeStackIndex.length, null, 'user', 'debug', 'dockerload');
+                }
             }
 
-            // Invalidate the cache when the list refreshes so that added/removed
-            // stacks are picked up on the next stats tick.
+            // Invalidate only when stack/container structure changed.
+            // composeListRefreshed may fire for UI-only updates where cache can be reused.
             $(document).on('composeListRefreshed.dockerload', function() {
-                composeLogger('composeListRefreshed — invalidating stack index and load cache', null, 'user', 'debug', 'dockerload');
+                var newSignature = getComposeStackSignatureFromDom();
+                var structureChanged = (newSignature !== composeStackSignature);
+
+                // No structural change: keep index/cache intact.
+                if (!structureChanged) {
+                    if (composeListReady && composeStackIndex) {
+                        composeLogger('composeListRefreshed — structure unchanged, keeping cache', null, 'user', 'debug', 'dockerload');
+                    }
+                    return;
+                }
+
+                var hadIndex = !!composeStackIndex;
+                var hadLoadCache = Object.keys(composeLoadById).length > 0;
+                if (composeListReady && (hadIndex || hadLoadCache)) {
+                    composeLogger('composeListRefreshed — structure changed, invalidating stack index', null, 'user', 'debug', 'dockerload');
+                }
+
+                // Rebuild index lazily on next render tick.
                 composeStackIndex = null;
-                composeLoadById = {};
+                composeStackSignature = newSignature;
+
+                // Keep live load values for unchanged containers; drop removed ids.
+                var currentIds = getComposeContainerIdSetFromDom();
+                Object.keys(composeLoadById).forEach(function(id) {
+                    if (!currentIds[id]) {
+                        delete composeLoadById[id];
+                        clearContainerLoad(id);
+                    }
+                });
             });
 
             window.composeDockerLoadToggle = function(enable) {

From 0d51c4aa0d6c82bdc959c0b54bba0b21fc2cc67b Mon Sep 17 00:00:00 2001
From: mstrhakr <mstrhakr@gmail.com>
Date: Mon, 8 Jun 2026 23:13:16 -0400
Subject: [PATCH 20/67] fix(docker.versions): conditionally load external
 styles for Docker versions if available

---
 source/compose.manager/include/ComposeManager.php | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/source/compose.manager/include/ComposeManager.php b/source/compose.manager/include/ComposeManager.php
index 5b433cd5..70ebfd59 100755
--- a/source/compose.manager/include/ComposeManager.php
+++ b/source/compose.manager/include/ComposeManager.php
@@ -289,6 +289,9 @@ function compose_manager_cpu_spec_count($cpuSpec)
 <script src="<?php autov('/plugins/compose.manager/javascript/common.js'); ?>" type="text/javascript"></script>
 <script src="<?php autov('/plugins/compose.manager/javascript/composeSortable.js'); ?>" type="text/javascript"></script>
 <script src="<?php autov('/plugins/compose.manager/javascript/composeStackUtils.js'); ?>" type="text/javascript"></script>
+<?php if (file_exists('/usr/local/emhttp/plugins/docker.versions/styles/styles.css')): ?>
+<link type="text/css" rel="stylesheet" href="<?php autov('/plugins/docker.versions/styles/styles.css'); ?>">
+<?php endif; ?>
 <?php if (file_exists('/usr/local/emhttp/plugins/docker.versions/scripts/changelog.js')): ?>
 <script src="<?php autov('/plugins/docker.versions/scripts/changelog.js'); ?>" type="text/javascript"></script>
 <?php endif; ?>

From e6faf7d0d4df2939480ecc4a494c9c7a78836802 Mon Sep 17 00:00:00 2001
From: mstrhakr <mstrhakr@gmail.com>
Date: Thu, 11 Jun 2026 14:38:10 -0400
Subject: [PATCH 21/67] chore: remove test compose setup

---
 test-build-stack/Dockerfile   |  2 --
 test-build-stack/compose.yaml |  9 ---------
 test-build-stack/index.html   | 10 ----------
 3 files changed, 21 deletions(-)
 delete mode 100644 test-build-stack/Dockerfile
 delete mode 100644 test-build-stack/compose.yaml
 delete mode 100644 test-build-stack/index.html

diff --git a/test-build-stack/Dockerfile b/test-build-stack/Dockerfile
deleted file mode 100644
index 5ef646a2..00000000
--- a/test-build-stack/Dockerfile
+++ /dev/null
@@ -1,2 +0,0 @@
-FROM nginx:alpine
-COPY index.html /usr/share/nginx/html/index.html
diff --git a/test-build-stack/compose.yaml b/test-build-stack/compose.yaml
deleted file mode 100644
index 912def19..00000000
--- a/test-build-stack/compose.yaml
+++ /dev/null
@@ -1,9 +0,0 @@
-services:
-  test-app:
-    build:
-      context: .
-      dockerfile: Dockerfile
-    container_name: test-build-app
-    ports:
-      - "8888:80"
-    restart: unless-stopped
diff --git a/test-build-stack/index.html b/test-build-stack/index.html
deleted file mode 100644
index e7edcdb9..00000000
--- a/test-build-stack/index.html
+++ /dev/null
@@ -1,10 +0,0 @@
-<!DOCTYPE html>
-<html>
-<head>
-    <title>Build Test</title>
-</head>
-<body>
-    <h1>Build Test Stack</h1>
-    <p>This stack was built from a Dockerfile.</p>
-</body>
-</html>

From a0a573f29e1f4a254141a1086ab4c83a3732c48b Mon Sep 17 00:00:00 2001
From: mstrhakr <mstrhakr@gmail.com>
Date: Thu, 11 Jun 2026 14:54:52 -0400
Subject: [PATCH 22/67] fix(sync-plugin-url): enhance branch detection and
 pluginURL synchronization logic

---
 .github/workflows/sync-plugin-url.yml | 58 ++++++++++++++++++++++-----
 1 file changed, 47 insertions(+), 11 deletions(-)

diff --git a/.github/workflows/sync-plugin-url.yml b/.github/workflows/sync-plugin-url.yml
index 2b6075a3..d2b38d9b 100644
--- a/.github/workflows/sync-plugin-url.yml
+++ b/.github/workflows/sync-plugin-url.yml
@@ -4,15 +4,17 @@
 # This prevents issues when merging between dev and main where the
 # pluginURL would reference the wrong branch for update checks.
 #
-# Triggers only on PR merges to main or dev (the only time the
-# pluginURL branch reference can be wrong is after a cross-branch merge)
+# Triggers on push and merged PRs to main/dev to self-heal branch links.
 
 name: Sync Plugin URL
 
 on:
+  push:
+    branches: [main, dev]
   pull_request:
     types: [closed]
     branches: [main, dev]
+  workflow_dispatch:
 
 env:
   FORCE_JAVASCRIPT_ACTIONS_TO_NODE24: 'true'
@@ -26,32 +28,66 @@ jobs:
     permissions:
       contents: write
     runs-on: ubuntu-latest
-    # Only run if the PR was actually merged (not just closed)
-    if: github.event.pull_request.merged == true
+    if: github.event_name == 'push' || (github.event_name == 'pull_request' && github.event.pull_request.merged == true)
     
     steps:
+      - name: Resolve target branch
+        id: target
+        run: |
+          if [[ "${GITHUB_EVENT_NAME}" == "push" ]]; then
+            TARGET_BRANCH="${GITHUB_REF_NAME}"
+          elif [[ "${GITHUB_EVENT_NAME}" == "pull_request" ]]; then
+            TARGET_BRANCH="${{ github.event.pull_request.base.ref }}"
+          else
+            TARGET_BRANCH="${GITHUB_REF_NAME}"
+          fi
+
+          case "$TARGET_BRANCH" in
+            main|dev)
+              echo "target_branch=$TARGET_BRANCH" >> "$GITHUB_OUTPUT"
+              ;;
+            *)
+              echo "Unsupported branch '$TARGET_BRANCH'; skipping."
+              echo "target_branch=" >> "$GITHUB_OUTPUT"
+              ;;
+          esac
+
       - name: Checkout repository
+        if: steps.target.outputs.target_branch != ''
         uses: actions/checkout@v6
         with:
+          ref: ${{ steps.target.outputs.target_branch }}
           token: ${{ secrets.GITHUB_TOKEN }}
 
       - name: Check and fix pluginURL branch + README badge
+        if: steps.target.outputs.target_branch != ''
         id: check
         run: |
-          BRANCH="${GITHUB_REF_NAME}"
+          BRANCH="${{ steps.target.outputs.target_branch }}"
           PLG_FILE="compose.manager.plg"
           README_FILE="source/compose.manager/README.md"
           NEEDS_COMMIT=false
 
           # Ensure pluginURL uses the current branch
-          CURRENT_URL_BRANCH=$(grep -oP '<!ENTITY pluginURL.*github;/\K[^/]+' "$PLG_FILE" || echo "unknown")
+          CURRENT_URL_BRANCH=$(sed -n 's#^<!ENTITY pluginURL "https://raw.githubusercontent.com/&github;/\([^/]*\)/&name;\.plg">$#\1#p' "$PLG_FILE")
+          if [[ -z "$CURRENT_URL_BRANCH" ]]; then
+            echo "Failed to parse pluginURL entity in $PLG_FILE"
+            exit 1
+          fi
+
           echo "Current branch: $BRANCH"
           echo "PLG pluginURL branch: $CURRENT_URL_BRANCH"
 
           if [[ "$CURRENT_URL_BRANCH" != "$BRANCH" ]]; then
             echo "Branch mismatch - fixing pluginURL..."
-            # Scope to pluginURL line only — avoids corrupting packageURL
-            sed -i "/pluginURL/s|/&github;/[^/]*/|/\&github;/${BRANCH}/|" "$PLG_FILE"
+            sed -i -E "s#^<!ENTITY pluginURL \"https://raw.githubusercontent.com/&github;/[^/]*/&name;\\.plg\">#<!ENTITY pluginURL \"https://raw.githubusercontent.com/&github;/${BRANCH}/&name;.plg\">#" "$PLG_FILE"
+
+            EXPECTED_LINE="<!ENTITY pluginURL \"https://raw.githubusercontent.com/&github;/${BRANCH}/&name;.plg\">"
+            if ! grep -Fxq "$EXPECTED_LINE" "$PLG_FILE"; then
+              echo "pluginURL rewrite verification failed"
+              exit 1
+            fi
+
             NEEDS_COMMIT=true
           else
             echo "pluginURL already correct"
@@ -81,12 +117,12 @@ jobs:
           echo "needs_commit=$NEEDS_COMMIT" >> $GITHUB_OUTPUT
 
       - name: Commit fix
-        if: steps.check.outputs.needs_commit == 'true'
+        if: steps.target.outputs.target_branch != '' && steps.check.outputs.needs_commit == 'true'
         run: |
           git config user.name "github-actions[bot]"
           git config user.email "github-actions[bot]@users.noreply.github.com"
 
           git add compose.manager.plg source/compose.manager/README.md
-          git commit -m "chore: sync pluginURL+README for ${GITHUB_REF_NAME} branch [skip ci]"
-          git pull --rebase origin "${GITHUB_REF_NAME}"
+          git commit -m "chore: sync pluginURL+README for ${{ steps.target.outputs.target_branch }} branch [skip ci]"
+          git pull --rebase origin "${{ steps.target.outputs.target_branch }}"
           git push

From 4acb364492fbf447a07c6135d76d6c8ad9a583a5 Mon Sep 17 00:00:00 2001
From: "github-actions[bot]" <github-actions[bot]@users.noreply.github.com>
Date: Thu, 11 Jun 2026 18:55:24 +0000
Subject: [PATCH 23/67] chore: sync pluginURL+README for dev branch [skip ci]

---
 source/compose.manager/README.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/source/compose.manager/README.md b/source/compose.manager/README.md
index 42be301a..8baaf817 100644
--- a/source/compose.manager/README.md
+++ b/source/compose.manager/README.md
@@ -1,3 +1,3 @@
-**Compose Manager Plus**
+**Compose Manager Plus (Beta)**
 
 A plugin for unRAID that installs Docker Compose and adds a management interface to the web UI.

From 339100d93dd070f0c7b8af5e23ea60139ec132c7 Mon Sep 17 00:00:00 2001
From: mstrhakr <mstrhakr@gmail.com>
Date: Thu, 11 Jun 2026 15:15:04 -0400
Subject: [PATCH 24/67] fix(Exec.php): improve dockerVersionsInstalled check to
 verify actual changelog assets

---
 source/compose.manager/include/Exec.php | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/source/compose.manager/include/Exec.php b/source/compose.manager/include/Exec.php
index 49c3a21e..7fcdd5b1 100644
--- a/source/compose.manager/include/Exec.php
+++ b/source/compose.manager/include/Exec.php
@@ -1664,7 +1664,9 @@ function composeResolveContainerIcon(string $containerName, string $service, arr
     case 'getSavedUpdateStatus':
         // Load saved update status from file
         $composeUpdateStatusFile = COMPOSE_UPDATE_STATUS_FILE;
-        $dockerVersionsInstalled = is_dir('/usr/local/emhttp/plugins/docker.versions');
+        // Check for actual changelog assets rather than just directory presence
+        $dockerVersionsInstalled = file_exists('/usr/local/emhttp/plugins/docker.versions/scripts/changelog.js')
+            && file_exists('/usr/local/emhttp/plugins/docker.versions/styles/styles.css');
         if (is_file($composeUpdateStatusFile)) {
             $savedStatus = json_decode(file_get_contents($composeUpdateStatusFile), true);
             if ($savedStatus) {

From 363c97a7152ac8847b54b8576c53330fe7bfe988 Mon Sep 17 00:00:00 2001
From: mstrhakr <mstrhakr@gmail.com>
Date: Thu, 11 Jun 2026 15:15:17 -0400
Subject: [PATCH 25/67] fix(composeLoadlist): bind autostart change handler
 early for dynamic rows and update loading status on success

---
 .../javascript/composeManagerMain.js          | 32 ++++++++++++-------
 1 file changed, 21 insertions(+), 11 deletions(-)

diff --git a/source/compose.manager/javascript/composeManagerMain.js b/source/compose.manager/javascript/composeManagerMain.js
index 00d30586..75f151ee 100644
--- a/source/compose.manager/javascript/composeManagerMain.js
+++ b/source/compose.manager/javascript/composeManagerMain.js
@@ -279,6 +279,18 @@ function hideComposeSpinner() {
 function composeLoadlist() {
     // Return a Promise so callers can reliably .then() / .catch() on completion
     return new Promise(function(resolve, reject) {
+        // Bind autostart change handler early, before any rows are rendered or become interactive
+        // during progressive loading. Use delegated event handler so it works for dynamically added rows.
+        $('#compose_list').off('change', '.auto_start').on('change', '.auto_start', function() {
+            var script = $(this).attr("data-scriptname");
+            var auto = $(this).prop('checked');
+            $.post(caURL, {
+                action: 'updateAutostart',
+                script: script,
+                autostart: auto
+            });
+        });
+
         composeTimers.load = setTimeout(function() {
             showComposeSpinner('Loading stack list...');
         }, 500);
@@ -563,16 +575,8 @@ function initStackListUI() {
         });
         $el.data('switchbutton-initialized', true);
     });
-    // Ensure change handler is bound only once
-    $('#compose_list').off('change', '.auto_start').on('change', '.auto_start', function() {
-        var script = $(this).attr("data-scriptname");
-        var auto = $(this).prop('checked');
-        $.post(caURL, {
-            action: 'updateAutostart',
-            script: script,
-            autostart: auto
-        });
-    });
+    // Note: change handler for .auto_start is now bound early in composeLoadlist()
+    // before any rows are added, so it's ready for both progressive and final renders.
 
     // Initialize context menus for stack icons
     $('[id^="stack-"][data-stackid]').each(function() {
@@ -1253,7 +1257,6 @@ var dockerVersionsInstalled = false;
 // If auto-check is enabled and interval has elapsed, trigger a fresh check
 // Also checks for pending rechecks from recent update operations
 function loadSavedUpdateStatus() {
-    savedUpdateStatusLoaded = true;
     $.post(caURL, {
         action: 'getSavedUpdateStatus'
     }, function(data) {
@@ -1264,6 +1267,9 @@ function loadSavedUpdateStatus() {
                     stackUpdateStatus = response.stacks;
                     if (response.dockerVersionsInstalled) dockerVersionsInstalled = true;
 
+                    // Mark as loaded only after successful callback
+                    savedUpdateStatusLoaded = true;
+
                     // Update the UI for each stack with saved status
                     for (var stackName in response.stacks) {
                         var stackInfo = response.stacks[stackName];
@@ -1307,6 +1313,10 @@ function loadSavedUpdateStatus() {
                 }
             });
         }
+    }).fail(function(xhr, status, error) {
+        // Reset flag on transport failure so retries can work
+        savedUpdateStatusLoaded = false;
+        composeLogger('Failed to load saved update status', { status: status, error: error }, 'user', 'error', 'update-check');
     });
 }
 

From 292111a9094c85f6a70bfa559958ee4f41946649 Mon Sep 17 00:00:00 2001
From: mstrhakr <mstrhakr@gmail.com>
Date: Thu, 11 Jun 2026 15:15:28 -0400
Subject: [PATCH 26/67] fix(ExecActionsTest): improve
 testGetSavedUpdateStatusDockerVersionsNotInstalled for determinism

---
 tests/unit/ExecActionsTest.php | 16 ++++++++--------
 1 file changed, 8 insertions(+), 8 deletions(-)

diff --git a/tests/unit/ExecActionsTest.php b/tests/unit/ExecActionsTest.php
index 5c1e8c89..b1c32d21 100644
--- a/tests/unit/ExecActionsTest.php
+++ b/tests/unit/ExecActionsTest.php
@@ -1065,16 +1065,16 @@ public function testSetStackSettingsRejectsUnsupportedIconUrlTypes(): void
     /**
      * Returns dockerVersionsInstalled=false when the plugin directory is absent.
      */
-public function testGetSavedUpdateStatusDockerVersionsNotInstalled(): void
-{
-    @unlink(COMPOSE_UPDATE_STATUS_FILE);
+    public function testGetSavedUpdateStatusDockerVersionsNotInstalled(): void
+    {
+        @unlink(COMPOSE_UPDATE_STATUS_FILE);
 
-    // Make the test deterministic even when running on a host that has docker.versions installed.
-    $fakeDir = sys_get_temp_dir() . '/fake_docker_versions_absent_' . getmypid();
-    UnraidStreamWrapper::addMapping('/usr/local/emhttp/plugins/docker.versions', $fakeDir);
+        // Make the test deterministic even when running on a host that has docker.versions installed.
+        $fakeDir = sys_get_temp_dir() . '/fake_docker_versions_absent_' . getmypid();
+        UnraidStreamWrapper::addMapping('/usr/local/emhttp/plugins/docker.versions', $fakeDir);
 
-    $output = $this->executeAction('getSavedUpdateStatus');
-    $result = json_decode($output, true);
+        $output = $this->executeAction('getSavedUpdateStatus');
+        $result = json_decode($output, true);
 
         $this->assertIsArray($result);
         $this->assertEquals('success', $result['result']);

From 0522b1b1b9dbde5a49a95248e2a98d52e4516741 Mon Sep 17 00:00:00 2001
From: "github-actions[bot]" <github-actions[bot]@users.noreply.github.com>
Date: Thu, 11 Jun 2026 19:17:37 +0000
Subject: [PATCH 27/67] chore: update changelog for v2026.06.11.1517 [skip ci]

---
 compose.manager.plg | 31 ++++++++++++++++++++++++++++---
 1 file changed, 28 insertions(+), 3 deletions(-)

diff --git a/compose.manager.plg b/compose.manager.plg
index 9cec6fd3..a61c3296 100644
--- a/compose.manager.plg
+++ b/compose.manager.plg
@@ -36,9 +36,34 @@
 >
 
 <CHANGES>
-###2026.05.31
-- Bug Fixes: remove unused stack priority assignment in docker_started event handler
-- [View all changes](https://github.com/mstrhakr/compose_plugin/compare/v2026.05.28...v2026.05.31)
+###2026.06.11.1517
+- Features: add progressive stack list loading
+- Features (container): add persistent container cache and icon resolution logic
+- Features: return to update dialog when changelog is dismissed
+- Features: show docker.versions changelogs in the update dialog
+- Bug Fixes (ExecActionsTest): improve testGetSavedUpdateStatusDockerVersionsNotInstalled for determinism
+- Bug Fixes (composeLoadlist): bind autostart change handler early for dynamic rows and update loading status on success
+- Bug Fixes (Exec.php): improve dockerVersionsInstalled check to verify actual changelog assets
+- Bug Fixes (sync-plugin-url): enhance branch detection and pluginURL synchronization logic
+- Bug Fixes (docker.versions): conditionally load external styles for Docker versions if available
+- Bug Fixes (compose): optimize cache invalidation logic based on stack/container structure changes
+- Bug Fixes (changelog): conditionally load changelog script if available so it works when compose is on its own tab
+- Bug Fixes (update): update button now triggers update action instead of always triggering force update
+- Bug Fixes (composeSortable): enhance details row detachment logic during drag-and-drop
+- Bug Fixes (composeSortable): improve drag-and-drop behavior by detaching non-sortable rows
+- Bug Fixes (profiles): unify action profile picker and enforce profile precedence
+- Bug Fixes: plug poll interval leak and skip dialog reopen when warnings disabled
+- Bug Fixes: whitelist changelog message types, filter scaffolding noise
+- Bug Fixes: discard stale Nchan buffer and concurrent changelog messages
+- Bug Fixes: correct version and package details in plugin metadata
+- Refactoring: delegate changelog display to docker.versions' showChangeLog()
+- Documentation: document docker.versions changelog integration in user guide
+- Tests: add unit tests for getSavedUpdateStatus docker.versions detection
+- Chores: sync pluginURL+README for dev branch [skip ci]
+- Chores: remove test compose setup
+- Potential fix for pull request finding
+- [PR #120](https://github.com/mstrhakr/compose_plugin/pull/120)
+- [beta release diff](https://github.com/mstrhakr/compose_plugin/compare/v2026.06.06...v2026.06.11.1517)
 </CHANGES>
 
 <!-- The 'pre-install' script. -->

From 36f6cb9068e3234c5eef67e988764613a650db0b Mon Sep 17 00:00:00 2001
From: "github-actions[bot]" <github-actions[bot]@users.noreply.github.com>
Date: Thu, 11 Jun 2026 19:18:22 +0000
Subject: [PATCH 28/67] Release v2026.06.11.1517 [skip ci]

---
 compose.manager.plg | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/compose.manager.plg b/compose.manager.plg
index a61c3296..bc2f9150 100644
--- a/compose.manager.plg
+++ b/compose.manager.plg
@@ -2,11 +2,11 @@
 <!DOCTYPE PLUGIN [
 <!ENTITY name "compose.manager">
 <!ENTITY author "mstrhakr">
-<!ENTITY version     "2026.05.25.0747">
+<!ENTITY version     "2026.06.11.1517">
 <!ENTITY launch "Settings/&name;.settings">
 <!ENTITY packageVER "&version;">
-<!ENTITY packageMD5  "d1cf120caa0c1a3d0620984eba908873">
-<!ENTITY pkgBUILD    "0747">
+<!ENTITY packageMD5  "fb65f22904894d9bf0fb169ca91d7a9c">
+<!ENTITY pkgBUILD    "1517">
 <!ENTITY packageName "&name;-&packageVER;-noarch-&pkgBUILD;">
 <!ENTITY packagefile "&packageName;.txz">
 <!ENTITY github "mstrhakr/compose_plugin">

From 7551d4b5196f57b7fefdd562aaf8ca7726ce785b Mon Sep 17 00:00:00 2001
From: mstrhakr <mstrhakr@gmail.com>
Date: Thu, 11 Jun 2026 15:24:52 -0400
Subject: [PATCH 29/67] fix(Exec.php): update dockerVersionsInstalled check to
 verify plugin directory existence and cleanup tests

---
 source/compose.manager/include/Exec.php |  5 ++-
 tests/unit/ExecActionsTest.php          | 43 -------------------------
 2 files changed, 2 insertions(+), 46 deletions(-)

diff --git a/source/compose.manager/include/Exec.php b/source/compose.manager/include/Exec.php
index 7fcdd5b1..1172b65a 100644
--- a/source/compose.manager/include/Exec.php
+++ b/source/compose.manager/include/Exec.php
@@ -1664,9 +1664,8 @@ function composeResolveContainerIcon(string $containerName, string $service, arr
     case 'getSavedUpdateStatus':
         // Load saved update status from file
         $composeUpdateStatusFile = COMPOSE_UPDATE_STATUS_FILE;
-        // Check for actual changelog assets rather than just directory presence
-        $dockerVersionsInstalled = file_exists('/usr/local/emhttp/plugins/docker.versions/scripts/changelog.js')
-            && file_exists('/usr/local/emhttp/plugins/docker.versions/styles/styles.css');
+        // Check if docker.versions plugin directory exists (where changelog assets are expected)
+        $dockerVersionsInstalled = is_dir('/usr/local/emhttp/plugins/docker.versions');
         if (is_file($composeUpdateStatusFile)) {
             $savedStatus = json_decode(file_get_contents($composeUpdateStatusFile), true);
             if ($savedStatus) {
diff --git a/tests/unit/ExecActionsTest.php b/tests/unit/ExecActionsTest.php
index b1c32d21..c492d745 100644
--- a/tests/unit/ExecActionsTest.php
+++ b/tests/unit/ExecActionsTest.php
@@ -1082,50 +1082,7 @@ public function testGetSavedUpdateStatusDockerVersionsNotInstalled(): void
         $this->assertFalse($result['dockerVersionsInstalled']);
     }
 
-    /**
-     * Returns dockerVersionsInstalled=true when the plugin directory exists.
-     */
-    public function testGetSavedUpdateStatusDockerVersionsInstalled(): void
-    {
-        @unlink(COMPOSE_UPDATE_STATUS_FILE);
-
-        $fakeDir = sys_get_temp_dir() . '/fake_docker_versions_' . getmypid();
-        mkdir($fakeDir, 0755, true);
-        $this->externalCleanupPaths[] = $fakeDir;
-        UnraidStreamWrapper::addMapping('/usr/local/emhttp/plugins/docker.versions', $fakeDir);
-
-        $output = $this->executeAction('getSavedUpdateStatus');
-        $result = json_decode($output, true);
-
-        $this->assertIsArray($result);
-        $this->assertEquals('success', $result['result']);
-        $this->assertSame([], $result['stacks']);
-        $this->assertTrue($result['dockerVersionsInstalled']);
-    }
 
-    /**
-     * Returns saved stacks alongside dockerVersionsInstalled when a status file exists.
-     */
-    public function testGetSavedUpdateStatusIncludesSavedStacks(): void
-    {
-        $savedStatus = ['my-stack' => ['hasUpdate' => true, 'containers' => []]];
-        file_put_contents(COMPOSE_UPDATE_STATUS_FILE, json_encode($savedStatus));
-
-        $fakeDir = sys_get_temp_dir() . '/fake_docker_versions_' . getmypid();
-        mkdir($fakeDir, 0755, true);
-        $this->externalCleanupPaths[] = $fakeDir;
-        UnraidStreamWrapper::addMapping('/usr/local/emhttp/plugins/docker.versions', $fakeDir);
-
-        $output = $this->executeAction('getSavedUpdateStatus');
-        $result = json_decode($output, true);
-
-        $this->assertIsArray($result);
-        $this->assertEquals('success', $result['result']);
-        $this->assertEquals($savedStatus, $result['stacks']);
-        $this->assertTrue($result['dockerVersionsInstalled']);
-
-        @unlink(COMPOSE_UPDATE_STATUS_FILE);
-    }
 
     /**
      * Falls back to empty stacks when the status file contains invalid JSON.

From d2cdb7f2fb1a8f6ab958a84ec1a9493c8bbad9dc Mon Sep 17 00:00:00 2001
From: mstrhakr <mstrhakr@gmail.com>
Date: Thu, 11 Jun 2026 15:25:22 -0400
Subject: [PATCH 30/67] fix(deploy.sh, test.sh): update file permissions to
 make scripts executable

---
 deploy.sh | 0
 test.sh   | 0
 2 files changed, 0 insertions(+), 0 deletions(-)
 mode change 100644 => 100755 deploy.sh
 mode change 100644 => 100755 test.sh

diff --git a/deploy.sh b/deploy.sh
old mode 100644
new mode 100755
diff --git a/test.sh b/test.sh
old mode 100644
new mode 100755

From f14bc73225de9bcdb6c32a42f4b8770d35fcd2fd Mon Sep 17 00:00:00 2001
From: "github-actions[bot]" <github-actions[bot]@users.noreply.github.com>
Date: Thu, 11 Jun 2026 19:26:12 +0000
Subject: [PATCH 31/67] chore: update changelog for v2026.06.11.1526 [skip ci]

---
 compose.manager.plg | 31 ++++---------------------------
 1 file changed, 4 insertions(+), 27 deletions(-)

diff --git a/compose.manager.plg b/compose.manager.plg
index bc2f9150..fc7834fb 100644
--- a/compose.manager.plg
+++ b/compose.manager.plg
@@ -36,34 +36,11 @@
 >
 
 <CHANGES>
-###2026.06.11.1517
-- Features: add progressive stack list loading
-- Features (container): add persistent container cache and icon resolution logic
-- Features: return to update dialog when changelog is dismissed
-- Features: show docker.versions changelogs in the update dialog
-- Bug Fixes (ExecActionsTest): improve testGetSavedUpdateStatusDockerVersionsNotInstalled for determinism
-- Bug Fixes (composeLoadlist): bind autostart change handler early for dynamic rows and update loading status on success
-- Bug Fixes (Exec.php): improve dockerVersionsInstalled check to verify actual changelog assets
-- Bug Fixes (sync-plugin-url): enhance branch detection and pluginURL synchronization logic
-- Bug Fixes (docker.versions): conditionally load external styles for Docker versions if available
-- Bug Fixes (compose): optimize cache invalidation logic based on stack/container structure changes
-- Bug Fixes (changelog): conditionally load changelog script if available so it works when compose is on its own tab
-- Bug Fixes (update): update button now triggers update action instead of always triggering force update
-- Bug Fixes (composeSortable): enhance details row detachment logic during drag-and-drop
-- Bug Fixes (composeSortable): improve drag-and-drop behavior by detaching non-sortable rows
-- Bug Fixes (profiles): unify action profile picker and enforce profile precedence
-- Bug Fixes: plug poll interval leak and skip dialog reopen when warnings disabled
-- Bug Fixes: whitelist changelog message types, filter scaffolding noise
-- Bug Fixes: discard stale Nchan buffer and concurrent changelog messages
-- Bug Fixes: correct version and package details in plugin metadata
-- Refactoring: delegate changelog display to docker.versions' showChangeLog()
-- Documentation: document docker.versions changelog integration in user guide
-- Tests: add unit tests for getSavedUpdateStatus docker.versions detection
-- Chores: sync pluginURL+README for dev branch [skip ci]
-- Chores: remove test compose setup
-- Potential fix for pull request finding
+###2026.06.11.1526
+- Bug Fixes (deploy.sh, test.sh): update file permissions to make scripts executable
+- Bug Fixes (Exec.php): update dockerVersionsInstalled check to verify plugin directory existence and cleanup tests
 - [PR #120](https://github.com/mstrhakr/compose_plugin/pull/120)
-- [beta release diff](https://github.com/mstrhakr/compose_plugin/compare/v2026.06.06...v2026.06.11.1517)
+- [beta release diff](https://github.com/mstrhakr/compose_plugin/compare/v2026.06.06...v2026.06.11.1526)
 </CHANGES>
 
 <!-- The 'pre-install' script. -->

From 864ad1969dad900279bb4c9c34d12b4ed18fe76c Mon Sep 17 00:00:00 2001
From: "github-actions[bot]" <github-actions[bot]@users.noreply.github.com>
Date: Thu, 11 Jun 2026 19:27:02 +0000
Subject: [PATCH 32/67] Release v2026.06.11.1526 [skip ci]

---
 compose.manager.plg | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/compose.manager.plg b/compose.manager.plg
index fc7834fb..d8c632e0 100644
--- a/compose.manager.plg
+++ b/compose.manager.plg
@@ -2,11 +2,11 @@
 <!DOCTYPE PLUGIN [
 <!ENTITY name "compose.manager">
 <!ENTITY author "mstrhakr">
-<!ENTITY version     "2026.06.11.1517">
+<!ENTITY version     "2026.06.11.1526">
 <!ENTITY launch "Settings/&name;.settings">
 <!ENTITY packageVER "&version;">
-<!ENTITY packageMD5  "fb65f22904894d9bf0fb169ca91d7a9c">
-<!ENTITY pkgBUILD    "1517">
+<!ENTITY packageMD5  "3bc7ddef838f2667c13246fdadc48d65">
+<!ENTITY pkgBUILD    "1526">
 <!ENTITY packageName "&name;-&packageVER;-noarch-&pkgBUILD;">
 <!ENTITY packagefile "&packageName;.txz">
 <!ENTITY github "mstrhakr/compose_plugin">

From 6c392f9660bac87f002d05f034300daa770573fa Mon Sep 17 00:00:00 2001
From: mstrhakr <mstrhakr@gmail.com>
Date: Thu, 11 Jun 2026 20:58:39 -0400
Subject: [PATCH 33/67] fix(cache): add endpoint to retrieve persistent
 container cache and update loading method

---
 source/compose.manager/include/Exec.php       |  5 +++++
 .../javascript/composeManagerMain.js          | 20 +++++++++----------
 2 files changed, 15 insertions(+), 10 deletions(-)

diff --git a/source/compose.manager/include/Exec.php b/source/compose.manager/include/Exec.php
index 1172b65a..23d38904 100644
--- a/source/compose.manager/include/Exec.php
+++ b/source/compose.manager/include/Exec.php
@@ -136,6 +136,11 @@ function composeResolveContainerIcon(string $containerName, string $service, arr
         $cfg = @parse_ini_file("/boot/config/plugins/compose.manager/compose.manager.cfg", true, INI_SCANNER_NORMAL);
         echo json_encode(['result' => 'success', 'config' => $cfg]);
         break;
+    case 'getPersistentContainerCache':
+        $cacheFile = '/boot/config/plugins/compose.manager/containers.cache.json';
+        $cache = is_file($cacheFile) ? json_decode(file_get_contents($cacheFile), true) : [];
+        echo json_encode(['result' => 'success', 'cache' => is_array($cache) ? $cache : []]);
+        break;
     case 'addStack':
         // Validate optional indirect inputs (folder or specific compose file)
         $indirectDir = isset($_POST['stackPath']) ? trim($_POST['stackPath']) : '';
diff --git a/source/compose.manager/javascript/composeManagerMain.js b/source/compose.manager/javascript/composeManagerMain.js
index 75f151ee..809e3949 100644
--- a/source/compose.manager/javascript/composeManagerMain.js
+++ b/source/compose.manager/javascript/composeManagerMain.js
@@ -1783,16 +1783,16 @@ function isValidIconSrc(src) {
 
 function loadPersistentContainerCache() {
     return new Promise(function(resolve) {
-        $.get('/plugins/compose.manager/containers.cache.json')
-            .done(function(data) {
-                try {
-                    persistentContainerCache = JSON.parse(data) || {};
-                } catch (e) {
-                    persistentContainerCache = {};
-                    composeLogger('Failed to parse persistent container cache', {
-                        error: e && e.toString()
-                    }, 'user', 'warn', 'loadPersistentContainerCache');
-                }
+        $.ajax({
+            url: caURL,
+            method: 'POST',
+            dataType: 'json',
+            data: {
+                action: 'getPersistentContainerCache'
+            }
+        })
+            .done(function(response) {
+                persistentContainerCache = (response && response.cache) ? response.cache : {};
                 resolve(persistentContainerCache);
             })
             .fail(function() {

From 4dbbccf6e18c8117eb63fb29ae83c6b67cb38684 Mon Sep 17 00:00:00 2001
From: mstrhakr <mstrhakr@gmail.com>
Date: Thu, 11 Jun 2026 21:25:10 -0400
Subject: [PATCH 34/67] feat: add 'Remove Orphans by Default' option and
 integrate into compose actions

---
 source/compose.manager/default.cfg            |   1 +
 .../include/ComposeManager.php                |   9 +
 .../compose.manager/include/ComposeUtil.php   |  13 +-
 source/compose.manager/include/Helpers.php    |  16 +-
 .../javascript/composeManagerMain.js          | 299 ++++++++++++------
 tests/unit/ComposeManagerMainSourceTest.php   |  68 ++++
 6 files changed, 305 insertions(+), 101 deletions(-)

diff --git a/source/compose.manager/default.cfg b/source/compose.manager/default.cfg
index 3ad39f8c..2af0a493 100755
--- a/source/compose.manager/default.cfg
+++ b/source/compose.manager/default.cfg
@@ -14,6 +14,7 @@ AUTOSTART_TIMEOUT="300"
 AUTOSTART_WAIT_FOR_DOCKER="false"
 AUTOSTART_DOCKER_WAIT_TIMEOUT="120"
 RUN_IN_BACKGROUND_DEFAULT="false"
+REMOVE_ORPHANS_DEFAULT="false"
 DISABLE_ACTION_WARNINGS="false"
 NEW_STACK_USE_DEFAULT_COMPOSE_FILES="false"
 NEW_STACK_OVERRIDE_MANAGEMENT_AUTOMATIC="true"
diff --git a/source/compose.manager/include/ComposeManager.php b/source/compose.manager/include/ComposeManager.php
index 70ebfd59..f56a8fd7 100755
--- a/source/compose.manager/include/ComposeManager.php
+++ b/source/compose.manager/include/ComposeManager.php
@@ -635,6 +635,15 @@ function compose_manager_cpu_spec_count($cpuSpec)
                             </div>
                         </div>
 
+                        <div class="settings-field">
+                            <label for="REMOVE_ORPHANS_DEFAULT">Remove Orphans by Default</label>
+                            <label style="display:flex;align-items:center;gap:8px;font-weight:normal;">
+                                <input type="checkbox" id="REMOVE_ORPHANS_DEFAULT" name="REMOVE_ORPHANS_DEFAULT" <?= ($cfg['REMOVE_ORPHANS_DEFAULT'] ?? 'false') == 'true' ? 'checked' : '' ?>>
+                                Enable <code>--remove-orphans</code> by default for Compose Up/Down actions
+                            </label>
+                            <div class="settings-field-help">When enabled, the Remove orphans option is pre-checked in Compose Up/Down dialogs and bulk start/stop dialogs. Useful when a stack is edited while containers still exist.</div>
+                        </div>
+
                         <div class="settings-field">
                             <label for="settings-use-default-compose-files">Compose File Selection</label>
                             <label style="display:flex;align-items:center;gap:8px;font-weight:normal;">
diff --git a/source/compose.manager/include/ComposeUtil.php b/source/compose.manager/include/ComposeUtil.php
index dd8dd1db..06e9ff86 100644
--- a/source/compose.manager/include/ComposeUtil.php
+++ b/source/compose.manager/include/ComposeUtil.php
@@ -10,16 +10,17 @@
 require_once("/usr/local/emhttp/plugins/compose.manager/include/Helpers.php");
 
 $background = isset($_POST['background']) && $_POST['background'] == '1';
+$removeOrphans = isset($_POST['removeOrphans']) && $_POST['removeOrphans'] == '1';
 
 switch ($_POST['action']) {
     case 'composeUp':
-        echoComposeCommand('up', false, $background);
+        echoComposeCommand('up', false, $background, $removeOrphans);
         break;
     case 'composeUpRecreate':
-        echoComposeCommand('up', true, $background);
+        echoComposeCommand('up', true, $background, $removeOrphans);
         break;
     case 'composeDown':
-        echoComposeCommand('down', false, $background);
+        echoComposeCommand('down', false, $background, $removeOrphans);
         break;
     case 'composeUpPullBuild':
         echoComposeCommand('update', false, $background);
@@ -36,19 +37,19 @@
     case 'composeUpMultiple':
         $paths = isset($_POST['paths']) ? json_decode($_POST['paths'], true) : array();
         if (!empty($paths)) {
-            echoComposeCommandMultiple('up', $paths, $background);
+            echoComposeCommandMultiple('up', $paths, $background, $removeOrphans);
         }
         break;
     case 'composeDownMultiple':
         $paths = isset($_POST['paths']) ? json_decode($_POST['paths'], true) : array();
         if (!empty($paths)) {
-            echoComposeCommandMultiple('down', $paths, $background);
+            echoComposeCommandMultiple('down', $paths, $background, $removeOrphans);
         }
         break;
     case 'composeUpdateMultiple':
         $paths = isset($_POST['paths']) ? json_decode($_POST['paths'], true) : array();
         if (!empty($paths)) {
-            echoComposeCommandMultiple('update', $paths, $background);
+            echoComposeCommandMultiple('update', $paths, $background, $removeOrphans);
         }
         break;
     case 'containerConsole':
diff --git a/source/compose.manager/include/Helpers.php b/source/compose.manager/include/Helpers.php
index 254a0ea3..c3149753 100644
--- a/source/compose.manager/include/Helpers.php
+++ b/source/compose.manager/include/Helpers.php
@@ -132,8 +132,9 @@ function appendComposeEnvFileArg(array &$composeCommand, array $args): void
  * @param string $action The compose action (up, down, update, pull, stop, logs)
  * @param bool $recreate Whether to force recreate containers (adds --force-recreate flag)
  * @param bool $background Whether to run in the background (no terminal window; sends notification on finish)
+ * @param bool $removeOrphans Whether to pass --remove-orphans for up/down actions
  */
-function echoComposeCommand($action, $recreate = false, $background = false)
+function echoComposeCommand($action, $recreate = false, $background = false, $removeOrphans = false)
 {
     /**
      * Note: This function is called from an AJAX endpoint and must be careful to only echo the intended command or JSON response.
@@ -152,12 +153,13 @@ function echoComposeCommand($action, $recreate = false, $background = false)
     $debug = $cfg['DEBUG_TO_LOG'] == "true";
     $path = isset($_POST['path']) ? trim($_POST['path']) : "";
     $profile = isset($_POST['profile']) ? trim($_POST['profile']) : "";
+    $removeOrphans = !empty($_POST['removeOrphans']) && $_POST['removeOrphans'] !== 'false';
     $unRaidVars = parse_ini_file("/var/local/emhttp/var.ini");
     if ($unRaidVars['mdState'] != "STARTED") {
         echo $plugin_root . "/scripts/arrayNotStarted.sh";
         composeLogger("Cannot perform action: array not started", ['action' => $action, 'path' => $path], 'user', 'debug', 'compose');
     } else {
-        composeLogger("Preparing compose command", ['action' => $action, 'path' => $path, 'profile' => $profile, 'recreate' => $recreate, 'background' => $background], 'user', 'debug', 'compose');
+        composeLogger("Preparing compose command", ['action' => $action, 'path' => $path, 'profile' => $profile, 'recreate' => $recreate, 'background' => $background, 'removeOrphans' => $removeOrphans], 'user', 'debug', 'compose');
         $composeCommand = array($plugin_root . "scripts/compose.sh");
 
         // Resolve stack identity via StackInfo
@@ -179,6 +181,10 @@ function echoComposeCommand($action, $recreate = false, $background = false)
             $stackInfo->pruneOrphanOverrideServices();
         }
 
+        if ($removeOrphans && ($action === 'up' || $action === 'down')) {
+            $composeCommand[] = '--remove-orphans';
+        }
+
         appendComposeEnvFileArg($composeCommand, $args);
 
         // Support multiple profiles (comma-separated)
@@ -259,7 +265,7 @@ function echoComposeCommand($action, $recreate = false, $background = false)
  * @param array $paths Array of stack paths
  * @param bool $background Whether to run in the background (no terminal window; sends notification on finish)
  */
-function echoComposeCommandMultiple($action, $paths, $background = false)
+function echoComposeCommandMultiple($action, $paths, $background = false, $removeOrphans = false)
 {
     global $plugin_root;
     global $sName;
@@ -303,6 +309,10 @@ function echoComposeCommandMultiple($action, $paths, $background = false)
             $stackInfo->pruneOrphanOverrideServices();
         }
 
+        if ($removeOrphans && ($action === 'up' || $action === 'down')) {
+            $composeCommand[] = '--remove-orphans';
+        }
+
         appendComposeEnvFileArg($composeCommand, $args);
 
         // Profile selection per action:
diff --git a/source/compose.manager/javascript/composeManagerMain.js b/source/compose.manager/javascript/composeManagerMain.js
index 809e3949..c6c65c00 100644
--- a/source/compose.manager/javascript/composeManagerMain.js
+++ b/source/compose.manager/javascript/composeManagerMain.js
@@ -2797,6 +2797,57 @@ function loadComposeYaml(content) {
     return yamlLib.load(input);
 }
 
+function getComposeServiceNamesFromContent(content) {
+    if (!content || !content.trim()) {
+        return [];
+    }
+
+    try {
+        var doc = loadComposeYaml(content) || {};
+        var services = doc.services || {};
+        return Object.keys(services);
+    } catch (e) {
+        return [];
+    }
+}
+
+function getRemovedComposeServices() {
+    var originalContent = editorModal.originalContent['compose'] || '';
+    var currentEditor = editorModal.editors['compose'];
+
+    if (!originalContent || !currentEditor) {
+        return [];
+    }
+
+    var originalServices = getComposeServiceNamesFromContent(originalContent);
+    var currentServices = getComposeServiceNamesFromContent(currentEditor.getValue());
+
+    if (originalServices.length === 0 || currentServices.length === 0) {
+        return [];
+    }
+
+    var currentServiceSet = {};
+    currentServices.forEach(function(serviceName) {
+        currentServiceSet[serviceName] = true;
+    });
+
+    return originalServices.filter(function(serviceName) {
+        return !currentServiceSet[serviceName];
+    });
+}
+
+function isStackRunning(project) {
+    var $stackRow = $('#compose_stacks tr.compose-sortable[data-project="' + project + '"]');
+    return $stackRow.length > 0 && $stackRow.data('isup') == '1';
+}
+
+function buildRemoveOrphansCheckboxHtml(checkboxId) {
+    return '<div style="margin-top:16px;padding-top:12px;border-top:1px solid var(--dynamix-box-inner-div-border-color);display:flex;align-items:center;gap:8px;">' +
+        '<input type="checkbox" id="' + checkboxId + '" style="width:16px;height:16px;cursor:pointer;">' +
+        '<label for="' + checkboxId + '" style="cursor:pointer;user-select:none;margin:0;font-size:0.95em;">Remove orphans</label>' +
+        '</div>';
+}
+
 function applyDesc(myID) {
     var newDesc = $("#newDesc" + myID).val();
     var project = $("#" + myID).attr("data-scriptname");
@@ -3136,7 +3187,7 @@ function confirmedComposeAction(path, opts) {
 }
 
 // Confirmed action handlers (no dialog, just execute)
-function ComposeUpConfirmed(path, profile = "", background = false, suppressBackgroundNotification = false) {
+function ComposeUpConfirmed(path, profile = "", background = false, suppressBackgroundNotification = false, removeOrphans = false) {
     confirmedComposeAction(path, {
         actionName: 'up',
         titlePrefix: 'Compose Up',
@@ -3144,7 +3195,8 @@ function ComposeUpConfirmed(path, profile = "", background = false, suppressBack
         payload: {
             action: 'composeUp',
             path: path,
-            profile: profile
+            profile: profile,
+            removeOrphans: removeOrphans
         },
         background: background,
         suppressBackgroundNotification: suppressBackgroundNotification,
@@ -3172,7 +3224,7 @@ function ComposeUp(path, profile = "") {
     showStackActionDialog('up', path, profile);
 }
 
-function ComposeDownConfirmed(path, profile = "", background = false, suppressBackgroundNotification = false) {
+function ComposeDownConfirmed(path, profile = "", background = false, suppressBackgroundNotification = false, removeOrphans = false) {
     confirmedComposeAction(path, {
         actionName: 'down',
         titlePrefix: 'Compose Down',
@@ -3180,7 +3232,8 @@ function ComposeDownConfirmed(path, profile = "", background = false, suppressBa
         payload: {
             action: 'composeDown',
             path: path,
-            profile: profile
+            profile: profile,
+            removeOrphans: removeOrphans
         },
         background: background,
         suppressBackgroundNotification: suppressBackgroundNotification,
@@ -3660,20 +3713,22 @@ function startAllStacks() {
         '<input type="checkbox" id="swal-run-bg-startall" style="width:16px;height:16px;cursor:pointer;">' +
         '<label for="swal-run-bg-startall" style="cursor:pointer;user-select:none;margin:0;font-size:0.95em;">Run in background</label>' +
         '</div>';
+    var removeOrphansHtml = buildRemoveOrphansCheckboxHtml('swal-remove-orphans-startall');
 
     getConfig().then(function(pluginCfg) {
         var bgDefault = pluginCfg && pluginCfg.RUN_IN_BACKGROUND_DEFAULT === 'true';
+        var removeOrphansDefault = pluginCfg && pluginCfg.REMOVE_ORPHANS_DEFAULT === 'true';
         var disableWarnings = pluginCfg && pluginCfg.DISABLE_ACTION_WARNINGS === 'true';
 
         if (disableWarnings) {
-            executeStartAllStacks(stacks, bgDefault, bgDefault);
+            executeStartAllStacks(stacks, bgDefault, bgDefault, removeOrphansDefault);
             return;
         }
 
         swal({
             title: title,
             html: true,
-            text: '<div style="background:var(--alt-background-color);text-align:left;max-width:400px;margin:0 auto;"><p>The following stacks will be started:</p><div style="background:var(--background-color);padding:10px;border-radius:4px;max-height:200px;overflow-y:auto;margin:10px 0;">' + stackNames + '</div>' + bgCheckboxHtml + '</div>',
+            text: '<div style="background:var(--alt-background-color);text-align:left;max-width:400px;margin:0 auto;"><p>The following stacks will be started:</p><div style="background:var(--background-color);padding:10px;border-radius:4px;max-height:200px;overflow-y:auto;margin:10px 0;">' + stackNames + '</div>' + removeOrphansHtml + bgCheckboxHtml + '</div>',
             type: 'warning',
             showCancelButton: true,
             confirmButtonText: confirmText,
@@ -3681,18 +3736,21 @@ function startAllStacks() {
         }, function(confirmed) {
             if (confirmed) {
                 var runInBackground = $('#swal-run-bg-startall').is(':checked');
-                executeStartAllStacks(stacks, runInBackground);
+                var removeOrphans = $('#swal-remove-orphans-startall').is(':checked');
+                executeStartAllStacks(stacks, runInBackground, false, removeOrphans);
             }
         });
 
         setTimeout(function() {
             var $cb = $('#swal-run-bg-startall');
             if ($cb.length) $cb.prop('checked', bgDefault);
+            var $removeCb = $('#swal-remove-orphans-startall');
+            if ($removeCb.length) $removeCb.prop('checked', removeOrphansDefault);
         }, 50);
     });
 }
 
-function executeStartAllStacks(stacks, background, suppressBackgroundNotification = false) {
+function executeStartAllStacks(stacks, background, suppressBackgroundNotification = false, removeOrphans = false) {
     var height = 800;
     var width = 1200;
 
@@ -3715,7 +3773,8 @@ function executeStartAllStacks(stacks, background, suppressBackgroundNotificatio
     $.post(compURL, {
         action: 'composeUpMultiple',
         paths: JSON.stringify(paths),
-        background: background ? 1 : 0
+        background: background ? 1 : 0,
+        removeOrphans: removeOrphans ? 1 : 0
     }, function(data) {
         var parsed = tryParseJson(data);
         if (parsed && parsed.background) {
@@ -3777,20 +3836,22 @@ function stopAllStacks() {
         '<input type="checkbox" id="swal-run-bg-stopall" style="width:16px;height:16px;cursor:pointer;">' +
         '<label for="swal-run-bg-stopall" style="cursor:pointer;user-select:none;margin:0;font-size:0.95em;">Run in background</label>' +
         '</div>';
+    var removeOrphansHtml = buildRemoveOrphansCheckboxHtml('swal-remove-orphans-stopall');
 
     getConfig().then(function(pluginCfg) {
         var bgDefault = pluginCfg && pluginCfg.RUN_IN_BACKGROUND_DEFAULT === 'true';
+        var removeOrphansDefault = pluginCfg && pluginCfg.REMOVE_ORPHANS_DEFAULT === 'true';
         var disableWarnings = pluginCfg && pluginCfg.DISABLE_ACTION_WARNINGS === 'true';
 
         if (disableWarnings) {
-            executeStopAllStacks(stacks, bgDefault, bgDefault);
+            executeStopAllStacks(stacks, bgDefault, bgDefault, removeOrphansDefault);
             return;
         }
 
         swal({
             title: title,
             html: true,
-            text: '<div style="background:var(--alt-background-color);text-align:left;max-width:400px;margin:0 auto;"><p>The following stacks will be stopped:</p><div style="background:var(--background-color);padding:10px;border-radius:4px;max-height:200px;overflow-y:auto;margin:10px 0;">' + stackNames + '</div><p class="compose-status-warning" style="margin-top:10px;"><i class="fa fa-exclamation-triangle"></i> Containers will be stopped and removed. Data in volumes will be preserved.</p>' + bgCheckboxHtml + '</div>',
+            text: '<div style="background:var(--alt-background-color);text-align:left;max-width:400px;margin:0 auto;"><p>The following stacks will be stopped:</p><div style="background:var(--background-color);padding:10px;border-radius:4px;max-height:200px;overflow-y:auto;margin:10px 0;">' + stackNames + '</div><p class="compose-status-warning" style="margin-top:10px;"><i class="fa fa-exclamation-triangle"></i> Containers will be stopped and removed. Data in volumes will be preserved.</p>' + removeOrphansHtml + bgCheckboxHtml + '</div>',
             type: 'warning',
             showCancelButton: true,
             confirmButtonText: confirmText,
@@ -3798,18 +3859,21 @@ function stopAllStacks() {
         }, function(confirmed) {
             if (confirmed) {
                 var runInBackground = $('#swal-run-bg-stopall').is(':checked');
-                executeStopAllStacks(stacks, runInBackground);
+                var removeOrphans = $('#swal-remove-orphans-stopall').is(':checked');
+                executeStopAllStacks(stacks, runInBackground, false, removeOrphans);
             }
         });
 
         setTimeout(function() {
             var $cb = $('#swal-run-bg-stopall');
             if ($cb.length) $cb.prop('checked', bgDefault);
+            var $removeCb = $('#swal-remove-orphans-stopall');
+            if ($removeCb.length) $removeCb.prop('checked', removeOrphansDefault);
         }, 50);
     });
 }
 
-function executeStopAllStacks(stacks, background, suppressBackgroundNotification = false) {
+function executeStopAllStacks(stacks, background, suppressBackgroundNotification = false, removeOrphans = false) {
     var height = 800;
     var width = 1200;
 
@@ -3832,7 +3896,8 @@ function executeStopAllStacks(stacks, background, suppressBackgroundNotification
     $.post(compURL, {
         action: 'composeDownMultiple',
         paths: JSON.stringify(paths),
-        background: background ? 1 : 0
+        background: background ? 1 : 0,
+        removeOrphans: removeOrphans ? 1 : 0
     }, function(data) {
         var parsed = tryParseJson(data);
         if (parsed && parsed.background) {
@@ -3986,13 +4051,16 @@ function showStackActionDialog(action, path, profile) {
             containers.push(container);
         });
 
+        var detectedMismatch = cachedContainers.length !== profileServices.length;
+
         composeLogger('profile/unified AJAX done', {
             profileServices,
             containers,
-            cachedContainers
+            cachedContainers,
+            detectedMismatch
         }, 'user', 'debug', 'showStackActionDialog');
         containers = mergeUpdateStatus(containers, project);
-        renderStackActionDialog(action, displayName, path, profile, containers, hasBuild);
+        renderStackActionDialog(action, displayName, path, profile, containers, hasBuild, detectedMismatch);
     }).fail(function(xhr, status, error) {
         // Fallback: if profile resolution fails, show cached container metadata
         composeLogger('getProfileServices AJAX fail', {
@@ -4010,12 +4078,12 @@ function showStackActionDialog(action, path, profile) {
             });
             containers = mergeUpdateStatus(containers, project);
         }
-        renderStackActionDialog(action, displayName, path, profile, containers, hasBuild);
+        renderStackActionDialog(action, displayName, path, profile, containers, hasBuild, cachedContainers.length > 0);
     });
     return;
 }
 
-function renderStackActionDialog(action, displayName, path, profile, containers, hasBuild) {
+function renderStackActionDialog(action, displayName, path, profile, containers, hasBuild, showRemoveOrphans) {
     hasBuild = hasBuild || false;
     // Action-specific configuration
     var pullLabel = hasBuild ? 'Build' : 'Pull';
@@ -4029,6 +4097,7 @@ function renderStackActionDialog(action, displayName, path, profile, containers,
             warningColor: window.getComputedStyle(document.documentElement).getPropertyValue('--dynamix-ui-dropdownchecklist-color'),
             confirmText: 'Compose Up',
             showVersionArrow: false,
+            showRemoveOrphans: true,
             confirmedFn: ComposeUpConfirmed
         },
         'down': {
@@ -4040,6 +4109,7 @@ function renderStackActionDialog(action, displayName, path, profile, containers,
             warningColor: window.getComputedStyle(document.documentElement).getPropertyValue('--dynamix-sb-message-link-color'),
             confirmText: 'Compose Down',
             showVersionArrow: false,
+            showRemoveOrphans: true,
             confirmedFn: ComposeDownConfirmed
         },
         'stop': {
@@ -4177,6 +4247,15 @@ function renderStackActionDialog(action, displayName, path, profile, containers,
     // Warning/info text
     html += '<div style="color:' + cfg.warningColor + ';margin-top:14px;font-size:0.9em;"><i class="fa fa-' + cfg.warningIcon + '"></i> ' + cfg.warning + '</div>';
 
+    var removeOrphansDefault = false;
+
+    if (cfg.showRemoveOrphans) {
+        html += '<div id="swal-remove-orphans-wrap" style="display:none;">' +
+            buildRemoveOrphansCheckboxHtml('swal-remove-orphans-checkbox') +
+            '<div class="compose-text-muted" style="margin-top:6px;font-size:0.85em;margin-left:24px;">Adds --remove-orphans to the compose command.</div>' +
+            '</div>';
+    }
+
     // Run-in-background checkbox (appended after config is fetched below)
     var bgCheckboxHtml = '<div style="margin-top:16px;padding-top:12px;border-top:1px solid var(--dynamix-box-inner-div-border-color);display:flex;align-items:center;gap:8px;">' +
         '<input type="checkbox" id="swal-run-bg-checkbox" style="width:16px;height:16px;cursor:pointer;">' +
@@ -4188,14 +4267,18 @@ function renderStackActionDialog(action, displayName, path, profile, containers,
     // Fetch config to determine default checkbox state, then show swal (or skip warnings)
     getConfig().then(function(pluginCfg) {
         var bgDefault = pluginCfg && pluginCfg.RUN_IN_BACKGROUND_DEFAULT === 'true';
+        removeOrphansDefault = pluginCfg && pluginCfg.REMOVE_ORPHANS_DEFAULT === 'true';
         var disableWarnings = pluginCfg && pluginCfg.DISABLE_ACTION_WARNINGS === 'true';
 
         if (disableWarnings) {
             // In default background mode (warnings disabled and background enabled), don't show toast if background is used
-            cfg.confirmedFn(path, profile, bgDefault, bgDefault);
+            cfg.confirmedFn(path, profile, bgDefault, bgDefault, removeOrphansDefault);
             return;
         }
 
+        var removeOrphansChecked = removeOrphansDefault || showRemoveOrphans;
+        var showRemoveOrphansOption = cfg.showRemoveOrphans && (removeOrphansChecked || showRemoveOrphans);
+
         // Use native swal (SweetAlert 1.x) with callback style
         swal({
             title: cfg.title,
@@ -4209,8 +4292,9 @@ function renderStackActionDialog(action, displayName, path, profile, containers,
             if (confirmed) {
                 // Capture checkbox state before swal destroys the DOM
                 var runInBackground = $('#swal-run-bg-checkbox').is(':checked');
+                var removeOrphans = $('#swal-remove-orphans-checkbox').is(':checked');
                 // when running in background, suppress the extra notifyBackgroundStarted popup
-                cfg.confirmedFn(path, profile, runInBackground, runInBackground);
+                cfg.confirmedFn(path, profile, runInBackground, runInBackground, removeOrphans);
             }
         });
 
@@ -4220,6 +4304,11 @@ function renderStackActionDialog(action, displayName, path, profile, containers,
             if ($cb.length) {
                 $cb.prop('checked', bgDefault);
             }
+            var $orphanCb = $('#swal-remove-orphans-checkbox');
+            if ($orphanCb.length) {
+                $orphanCb.prop('checked', removeOrphansChecked);
+                $('#swal-remove-orphans-wrap').toggle(showRemoveOrphansOption);
+            }
         }, 50);
     });
 }
@@ -5670,11 +5759,95 @@ function saveAllChanges(closeAfterSave) {
     var totalChanges = editorModal.modifiedTabs.size + editorModal.modifiedSettings.size + editorModal.modifiedLabels.size;
     var pathSensitiveSettingsChanged = hasPathSensitiveSettingsChanges();
     var pathDependentEdits = hasPathDependentEdits();
+    var project = editorModal.currentProject;
+    var removedServices = [];
 
     if (totalChanges === 0) {
         return;
     }
 
+    if (project && editorModal.modifiedTabs.has('compose') && isStackRunning(project)) {
+        removedServices = getRemovedComposeServices();
+    }
+
+    function continueSave() {
+        // Track if labels are being modified in Automatic mode (need to offer recreate)
+        var labelsWereModified = editorModal.labelsViewMode === 'basic' && editorModal.modifiedLabels.size > 0;
+
+        // Save modified file tabs (compose, env, and override editor)
+        editorModal.modifiedTabs.forEach(function(tabName) {
+            savePromises.push(saveTab(tabName, saveErrors));
+        });
+
+        // Save settings if modified
+        if (editorModal.modifiedSettings.size > 0) {
+            savePromises.push(saveSettings(saveErrors));
+        }
+
+        // Save labels only in Automatic mode.
+        if (editorModal.modifiedLabels.size > 0) {
+            if (editorModal.labelsViewMode === 'basic') {
+                savePromises.push(saveLabels(saveErrors));
+            } else {
+                skippedManualLabels = true;
+            }
+        }
+
+        $.when.apply($, savePromises).then(function() {
+            var results = Array.prototype.slice.call(arguments);
+            var allSucceeded = results.every(function(result) {
+                return result === true;
+            });
+
+            if (allSucceeded) {
+                if (skippedManualLabels) {
+                    swal({
+                        title: "Partially Saved",
+                        text: "Non-label changes were saved. WebUI label form edits were not saved because Override File Management is set to Manual. Switch to Automatic to save Labels form changes.",
+                        type: "warning"
+                    });
+                    updateTabModifiedState();
+                    updateSaveButtonState();
+                    return;
+                }
+
+                // Check if we should offer to recreate containers
+                if (labelsWereModified) {
+                    promptRecreateContainers(closeAfterSave);
+                } else {
+                    var saveProject = editorModal.currentProject;
+                    if (closeAfterSave) {
+                        doCloseEditorModal();
+                    }
+                    swal({
+                        title: "Saved!",
+                        text: "All changes have been saved.",
+                        type: "success",
+                        timer: 1500,
+                        showConfirmButton: false
+                    });
+                    setTimeout(function() {
+                        if (saveProject) {
+                            refreshStackByProject(saveProject);
+                        }
+                    }, 1600);
+                }
+            } else {
+                var filteredErrors = saveErrors.filter(function(message) {
+                    return message !== '__STALE_PATH__';
+                });
+                if (filteredErrors.length === 0 && saveErrors.indexOf('__STALE_PATH__') !== -1) {
+                    return;
+                }
+                swal({
+                    title: 'Save Failed',
+                    text: filteredErrors.join('\n') || 'An unknown error occurred while saving.',
+                    type: 'error'
+                });
+            }
+        });
+    }
+
     if (pathSensitiveSettingsChanged && pathDependentEdits) {
         swal({
             title: 'Reload Required',
@@ -5711,82 +5884,24 @@ function saveAllChanges(closeAfterSave) {
 
     // Save labels only in Automatic mode.
     if (editorModal.modifiedLabels.size > 0) {
-        if (editorModal.labelsViewMode === 'basic') {
-            savePromises.push(saveLabels(saveErrors));
-        } else {
-            skippedManualLabels = true;
-        }
-    }
-
-    $.when.apply($, savePromises).then(function() {
-        var results = Array.prototype.slice.call(arguments);
-        var allSucceeded = results.every(function(result) {
-            return result === true;
-        });
-
-        if (allSucceeded) {
-            if (skippedManualLabels) {
-                swal({
-                    title: "Partially Saved",
-                    text: "Non-label changes were saved. WebUI label form edits were not saved because Override File Management is set to Manual. Switch to Automatic to save Labels form changes.",
-                    type: "warning"
-                });
-                updateTabModifiedState();
-                updateSaveButtonState();
-                return;
-            }
 
-            // Check if we should offer to recreate containers
-            if (labelsWereModified) {
-                promptRecreateContainers(closeAfterSave);
-            } else {
-                var project = editorModal.currentProject;
-                if (closeAfterSave) {
-                    doCloseEditorModal();
-                }
-                swal({
-                    title: "Saved!",
-                    text: "All changes have been saved.",
-                    type: "success",
-                    timer: 1500,
-                    showConfirmButton: false
-                });
-                setTimeout(function() {
-                    if (project) {
-                        refreshStackByProject(project);
-                    }
-                }, 1600);
-            }
-        } else {
-            var filteredErrors = saveErrors.filter(function(message) {
-                return message !== '__STALE_PATH__';
-            });
-            if (filteredErrors.length === 0 && saveErrors.indexOf('__STALE_PATH__') !== -1) {
-                return;
-            }
-            var errorText = filteredErrors.length > 0 ?
-                filteredErrors.join('\n') :
-                'Some items could not be saved. Please try again.';
-            swal({
-                title: "Save Failed",
-                text: errorText,
-                type: "error"
-            });
-        }
-    }).fail(function() {
+    if (removedServices.length > 0) {
         swal({
-            title: "Save Failed",
-            text: "An error occurred while saving. Please try again.",
-            type: "error"
+            title: 'Running Stack Changed',
+            text: 'This stack is running and the compose file no longer defines: ' + removedServices.join(', ') + '. Saving now can leave orphaned containers behind. Stop the stack first, or use Remove orphans from the Compose Up/Down dialog to clean them up.',
+            type: 'warning',
+            showCancelButton: true,
+            confirmButtonText: 'Save Anyway',
+            cancelButtonText: 'Cancel'
+        }, function(confirmed) {
+            if (confirmed) {
+                continueSave();
+            }
         });
-    });
-}
-
-// Save settings
-function saveSettings(saveErrors) {
-    var project = editorModal.currentProject;
-    var savePromises = [];
+        return;
+    }
 
+    continueSave();
     // Save name if modified
     if (editorModal.modifiedSettings.has('name')) {
         var newName = $('#settings-name').val();
diff --git a/tests/unit/ComposeManagerMainSourceTest.php b/tests/unit/ComposeManagerMainSourceTest.php
index c2830758..b638d578 100644
--- a/tests/unit/ComposeManagerMainSourceTest.php
+++ b/tests/unit/ComposeManagerMainSourceTest.php
@@ -16,6 +16,8 @@ class ComposeManagerMainSourceTest extends TestCase
 {
     private string $mainPagePath;
     private string $mainScriptPath;
+    private string $helpersPath;
+    private string $composeUtilPath;
     private string $dockerStartedEventPath;
 
     protected function setUp(): void
@@ -23,9 +25,13 @@ protected function setUp(): void
         parent::setUp();
         $this->mainPagePath = __DIR__ . '/../../source/compose.manager/include/ComposeManager.php';
         $this->mainScriptPath = __DIR__ . '/../../source/compose.manager/javascript/composeManagerMain.js';
+        $this->helpersPath = __DIR__ . '/../../source/compose.manager/include/Helpers.php';
+        $this->composeUtilPath = __DIR__ . '/../../source/compose.manager/include/ComposeUtil.php';
         $this->dockerStartedEventPath = __DIR__ . '/../../source/compose.manager/event/docker_started';
         $this->assertFileExists($this->mainPagePath, 'ComposeManager.php must exist');
         $this->assertFileExists($this->mainScriptPath, 'composeManagerMain.js must exist');
+        $this->assertFileExists($this->helpersPath, 'Helpers.php must exist');
+        $this->assertFileExists($this->composeUtilPath, 'ComposeUtil.php must exist');
         $this->assertFileExists($this->dockerStartedEventPath, 'event/docker_started must exist');
     }
 
@@ -39,6 +45,16 @@ private function getJsSource(): string
         return file_get_contents($this->mainScriptPath);
     }
 
+    private function getHelpersSource(): string
+    {
+        return file_get_contents($this->helpersPath);
+    }
+
+    private function getComposeUtilSource(): string
+    {
+        return file_get_contents($this->composeUtilPath);
+    }
+
     public function testCpuSpecCountHelperExists(): void
     {
         $source = $this->getPhpSource();
@@ -145,6 +161,58 @@ public function testEditorHasOkayApplyCloseButtonsAndChangeCounter(): void
         $this->assertStringContainsString("promptRecreateContainers(closeAfterSave);", $jsSource);
     }
 
+    public function testRunningComposeSaveWarnsOnRemovedServices(): void
+    {
+        $source = $this->getJsSource();
+        $this->assertStringContainsString('function getRemovedComposeServices()', $source);
+        $this->assertStringContainsString('function isStackRunning(project)', $source);
+        $this->assertStringContainsString('Running Stack Changed', $source);
+        $this->assertStringContainsString('Remove orphans from the Compose Up/Down dialog', $source);
+    }
+
+    public function testComposeActionDialogOffersRemoveOrphansToggle(): void
+    {
+        $source = $this->getJsSource();
+        $this->assertStringContainsString('showRemoveOrphans: true', $source);
+        $this->assertStringContainsString('swal-remove-orphans-checkbox', $source);
+        $this->assertStringContainsString('removeOrphans = $(\'#swal-remove-orphans-checkbox\').is(\':checked\')', $source);
+        $this->assertStringContainsString('removeOrphans: removeOrphans', $source);
+    }
+
+    public function testBulkActionsOfferRemoveOrphansToggle(): void
+    {
+        $source = $this->getJsSource();
+        $this->assertStringContainsString('function executeStartAllStacks(stacks, background, suppressBackgroundNotification = false, removeOrphans = false)', $source);
+        $this->assertStringContainsString('function executeStopAllStacks(stacks, background, suppressBackgroundNotification = false, removeOrphans = false)', $source);
+        $this->assertStringContainsString('swal-remove-orphans-startall', $source);
+        $this->assertStringContainsString('swal-remove-orphans-stopall', $source);
+        $this->assertStringContainsString("removeOrphans: removeOrphans ? 1 : 0", $source);
+    }
+
+    public function testBackendPassesRemoveOrphansThroughComposeCommand(): void
+    {
+        $source = $this->getHelpersSource();
+        $this->assertStringContainsString('$removeOrphans = !empty($_POST[\'removeOrphans\'])', $source);
+        $this->assertStringContainsString('removeOrphans', $source);
+        $this->assertStringContainsString('--remove-orphans', $source);
+    }
+
+    public function testComposeUtilRoutesRemoveOrphansFlag(): void
+    {
+        $source = $this->getComposeUtilSource();
+        $this->assertStringContainsString("\$removeOrphans = isset(\$_POST['removeOrphans']) && \$_POST['removeOrphans'] == '1';", $source);
+        $this->assertStringContainsString("echoComposeCommand('up', false, \$background, \$removeOrphans);", $source);
+        $this->assertStringContainsString("echoComposeCommandMultiple('up', \$paths, \$background, \$removeOrphans);", $source);
+    }
+
+    public function testSettingsIncludeRemoveOrphansDefaultToggle(): void
+    {
+        $phpSource = $this->getPhpSource();
+        $this->assertStringContainsString('id="REMOVE_ORPHANS_DEFAULT"', $phpSource);
+        $this->assertStringContainsString('Remove Orphans by Default', $phpSource);
+        $this->assertStringContainsString('Enable <code>--remove-orphans</code> by default for Compose Up/Down actions', $phpSource);
+    }
+
     public function testSaveAllChangesDefaultsToApplyMode(): void
     {
         $source = $this->getJsSource();

From fb0a9c8ac5448e789808d6b420dd3951cbddbe72 Mon Sep 17 00:00:00 2001
From: Joly0 <13993216+Joly0@users.noreply.github.com>
Date: Fri, 12 Jun 2026 10:53:53 +0200
Subject: [PATCH 35/67] Add support for additional compose files per stack

Until now a stack could only use its main compose file plus the
override file the plugin manages. Many projects ship optional
override files (for example docker-compose.gpu.yml for GPU support),
but there was no way to include them, because the plugin builds the
docker compose command itself and there was nowhere to add another
-f file.

What this adds:

- A new "Additional Compose Files" section in the stack settings.
  It lists the compose files found in the stack's compose folder as
  checkboxes, so you can simply tick the ones you want. An advanced
  field is available for files that live somewhere else (absolute
  paths, one per line).
- The selection is stored in a small extra_compose_files file in the
  stack folder (one path per line) and the files are appended as
  extra -f flags after the main compose file and the override file.
  This automatically applies to every action (up, down, update,
  pull, logs, autostart) because the command arguments are built in
  one central place.
- The editor's Compose tab got a file dropdown that lists every file
  the stack is made of (main file, override file, additional files),
  so all of them can be viewed and edited directly.

Safety details:

- The editor can only open files that actually belong to the stack;
  the request is checked against the stack's own file list, so the
  endpoint cannot be used to read or write unrelated files.
- Saved entries must be .yml/.yaml files and absolute paths must be
  under /mnt/ or /boot/config/.
- A settings save coming from an outdated cached browser session
  leaves the new setting untouched instead of silently clearing it.
- Entries pointing to files that no longer exist are skipped with a
  logged warning instead of breaking the stack.
- Selecting additional files switches the stack to explicit file
  mode, so the selection cannot be ignored by Docker Compose default
  file discovery.
---
 .../include/ComposeManager.php                |  15 ++
 source/compose.manager/include/Exec.php       | 125 +++++++++++-
 source/compose.manager/include/Util.php       |  67 +++++-
 .../javascript/composeManagerMain.js          | 190 +++++++++++++++++-
 tests/unit/ExecActionsTest.php                |  46 +++++
 tests/unit/ExtraComposeFilesTest.php          | 153 ++++++++++++++
 6 files changed, 583 insertions(+), 13 deletions(-)
 create mode 100644 tests/unit/ExtraComposeFilesTest.php

diff --git a/source/compose.manager/include/ComposeManager.php b/source/compose.manager/include/ComposeManager.php
index 2e0258d2..64324474 100755
--- a/source/compose.manager/include/ComposeManager.php
+++ b/source/compose.manager/include/ComposeManager.php
@@ -471,6 +471,10 @@ function compose_manager_cpu_spec_count($cpuSpec)
             <!-- ========== COMPOSE EDITOR PANEL ========== -->
             <div class="editor-panel active" id="editor-panel-compose" role="tabpanel" aria-labelledby="editor-tab-compose">
                 <div class="editor-modal-body">
+                    <div id="compose-file-selector-wrap" style="display:none;align-items:center;gap:8px;padding:6px 12px;">
+                        <label for="compose-file-selector" style="margin:0;">File:</label>
+                        <select id="compose-file-selector" onchange="switchComposeFile(this.value)"></select>
+                    </div>
                     <div class="editor-container active" id="editor-container-compose">
                         <div id="editor-compose" style="width: 100%; height: 100%;"></div>
                     </div>
@@ -610,6 +614,17 @@ function compose_manager_cpu_spec_count($cpuSpec)
                             <div class="settings-field-help">Path to a specific external compose file (e.g., /mnt/user/appdata/myapp/custom.compose.yml). Leave empty to use folder mode or local project files.</div>
                         </div>
 
+                        <div class="settings-field">
+                            <label for="settings-extra-compose-candidates">Additional Compose Files</label>
+                            <div id="settings-extra-compose-candidates" style="display:none;"></div>
+                            <div id="settings-extra-compose-none" class="settings-field-help" style="display:none;">No additional compose files found in the compose source folder (looking for <code>*compose*.yml</code> / <code>*compose*.yaml</code>).</div>
+                            <details id="settings-extra-compose-external-wrap" style="margin-top:8px;">
+                                <summary style="cursor:pointer;">External files (advanced)</summary>
+                                <textarea id="settings-extra-compose-external" rows="2" placeholder="One absolute path per line, e.g. /mnt/user/appdata/shared/gpu.compose.yml"></textarea>
+                            </details>
+                            <div class="settings-field-help">Selected files are appended as additional <code>-f</code> flags after the main compose and override files (e.g., GPU or environment overrides). Setting this disables default file discovery.</div>
+                        </div>
+
                         <div class="settings-field">
                             <label for="settings-env-path">External ENV File Path</label>
                             <input type="text" id="settings-env-path" placeholder="Default (uses .env in compose source folder)" data-pickroot="/" data-picktop="/mnt" data-pickcloseonfile="true">
diff --git a/source/compose.manager/include/Exec.php b/source/compose.manager/include/Exec.php
index 63bcfa9b..dd2c315d 100644
--- a/source/compose.manager/include/Exec.php
+++ b/source/compose.manager/include/Exec.php
@@ -63,6 +63,29 @@ function rejectStaleClientPath(?string $actualPath, string $label): bool
     }
 }
 
+if (!function_exists('resolveRequestedComposeFile')) {
+    /**
+     * Resolve an explicitly requested compose file (`file` POST param)
+     * against the stack's editable compose files.
+     *
+     * @return string|false|null Matched path, false when the request is
+     *                           invalid, or null when no file was requested.
+     */
+    function resolveRequestedComposeFile(StackInfo $stackInfo)
+    {
+        $requested = isset($_POST['file']) ? trim((string) $_POST['file']) : '';
+        if ($requested === '') {
+            return null;
+        }
+        foreach ($stackInfo->getEditableComposeFiles() as $candidate) {
+            if (Path::refersToSamePath($candidate, $requested)) {
+                return $candidate;
+            }
+        }
+        return false;
+    }
+}
+
 switch ($_POST['action']) {
     case 'composeLogger':
         $message = $_POST['msg'] ?? '';
@@ -279,6 +302,16 @@ function rejectStaleClientPath(?string $actualPath, string $label): bool
         $stackInfo = StackInfo::fromProject($compose_root, $script);
         $composeFilePath = $stackInfo->composeFilePath ?? ($stackInfo->composeSource . '/compose.yaml');
 
+        // Optional explicit file selection (e.g. additional compose files)
+        $requestedFile = resolveRequestedComposeFile($stackInfo);
+        if ($requestedFile === false) {
+            echo json_encode(['result' => 'error', 'message' => 'Requested file is not part of this stack.']);
+            break;
+        }
+        if ($requestedFile !== null) {
+            $composeFilePath = $requestedFile;
+        }
+
         // Check file existence consistently regardless of how path was resolved
         if (is_file($composeFilePath)) {
             $scriptContents = file_get_contents($composeFilePath);
@@ -431,12 +464,24 @@ function rejectStaleClientPath(?string $actualPath, string $label): bool
         $stackInfo = StackInfo::fromProject($compose_root, $script);
         $composeFilePath = $stackInfo->composeFilePath ?? ($stackInfo->composeSource . '/' . COMPOSE_FILE_NAMES[0]);
 
+        // Optional explicit file selection (e.g. additional compose files)
+        $requestedFile = resolveRequestedComposeFile($stackInfo);
+        if ($requestedFile === false) {
+            echo json_encode(['result' => 'error', 'message' => 'Requested file is not part of this stack.']);
+            break;
+        }
+        $isMainComposeFile = $requestedFile === null || Path::refersToSamePath($requestedFile, $composeFilePath);
+        if ($requestedFile !== null) {
+            $composeFilePath = $requestedFile;
+        }
+
         if (rejectStaleClientPath($composeFilePath, 'compose file')) {
             break;
         }
 
-        // Before saving, detect service renames and migrate override entries in the project override only
-        if (is_file($composeFilePath)) {
+        // Before saving, detect service renames and migrate override entries in the project override only.
+        // Rename migration only applies to the main compose file.
+        if ($isMainComposeFile && is_file($composeFilePath)) {
             $oldContent = file_get_contents($composeFilePath);
             $stackInfo->overrideInfo->migrateOnRename($oldContent, $scriptContents);
         }
@@ -701,6 +746,31 @@ function rejectStaleClientPath(?string $actualPath, string $label): bool
         $defaultProfileFile = "$compose_root/$script/default_profile";
         $defaultProfile = is_file($defaultProfileFile) ? trim(file_get_contents($defaultProfileFile)) : "";
 
+        // Get additional compose files (one path per line)
+        $extraComposeFilesFile = "$compose_root/$script/extra_compose_files";
+        $extraComposeFiles = is_file($extraComposeFilesFile) ? trim(file_get_contents($extraComposeFilesFile)) : "";
+
+        // Candidate compose files in the compose source folder for the
+        // Additional Compose Files selector (*compose*.y(a)ml, excluding the
+        // main compose file and override files)
+        $composeFileCandidates = [];
+        $mainComposeBase = $stackInfo->composeFilePath !== null ? basename($stackInfo->composeFilePath) : '';
+        $candidateGlob = glob($stackInfo->composeSource . '/*.{yml,yaml}', GLOB_BRACE) ?: [];
+        foreach ($candidateGlob as $candidatePath) {
+            $candidateBase = basename($candidatePath);
+            if (stripos($candidateBase, 'compose') === false) {
+                continue;
+            }
+            if ($candidateBase === $mainComposeBase) {
+                continue;
+            }
+            if (stripos($candidateBase, '.override.') !== false) {
+                continue;
+            }
+            $composeFileCandidates[] = $candidateBase;
+        }
+        sort($composeFileCandidates);
+
         // Get labels tab view mode (per-stack)
         $labelsViewModeFile = "$compose_root/$script/labels_view_mode";
         $labelsViewMode = is_file($labelsViewModeFile) ? strtolower(trim(file_get_contents($labelsViewModeFile))) : 'basic';
@@ -763,6 +833,9 @@ function rejectStaleClientPath(?string $actualPath, string $label): bool
             'iconUrl' => $iconUrl,
             'webuiUrl' => $webuiUrl,
             'defaultProfile' => $defaultProfile,
+            'extraComposeFiles' => $extraComposeFiles,
+            'composeFileCandidates' => $composeFileCandidates,
+            'editableComposeFiles' => $stackInfo->getEditableComposeFiles(),
             'labelsViewMode' => $labelsViewMode,
             'useDefaultComposeFiles' => $useDefaultComposeFiles,
             'indirectMode' => $stackInfo->indirectMode,
@@ -896,6 +969,43 @@ function rejectStaleClientPath(?string $actualPath, string $label): bool
             }
         }
 
+        // Additional compose files (one path per line, absolute or relative to compose source).
+        // Only processed when the client sends the field: a stale UI session
+        // that predates this setting must not silently clear it.
+        $extraComposeFilesProvided = isset($_POST['extraComposeFiles']);
+        $extraComposeFiles = $extraComposeFilesProvided ? trim($_POST['extraComposeFiles']) : "";
+        $extraComposeFilesNormalized = [];
+        $extraComposeFilesError = '';
+        foreach (preg_split('/\R/', $extraComposeFiles) as $extraLine) {
+            $extraLine = trim($extraLine);
+            if ($extraLine === '' || strpos($extraLine, '#') === 0) {
+                continue;
+            }
+            if (preg_match('/\.ya?ml$/i', $extraLine) !== 1) {
+                $extraComposeFilesError = 'Additional compose file must be a .yml or .yaml file: ' . $extraLine;
+                break;
+            }
+            if (Path::isAbsolutePath($extraLine)) {
+                $realExtra = realpath($extraLine);
+                if ($realExtra === false || !is_file($realExtra)) {
+                    $extraComposeFilesError = 'Additional compose file does not exist: ' . $extraLine;
+                    break;
+                }
+                if (!Path::isAllowedPath($realExtra, ['/mnt', '/boot/config'])) {
+                    $extraComposeFilesError = 'Additional compose files must be under /mnt/ or /boot/config/.';
+                    break;
+                }
+            } elseif (strpos($extraLine, '..') !== false) {
+                $extraComposeFilesError = 'Relative additional compose file paths must not contain "..": ' . $extraLine;
+                break;
+            }
+            $extraComposeFilesNormalized[] = $extraLine;
+        }
+        if ($extraComposeFilesError !== '') {
+            echo json_encode(['result' => 'error', 'message' => $extraComposeFilesError]);
+            break;
+        }
+
         // --- All validation passed, now write everything ---
 
         // Set env path
@@ -934,6 +1044,17 @@ function rejectStaleClientPath(?string $actualPath, string $label): bool
             file_put_contents($defaultProfileFile, $defaultProfile);
         }
 
+        // Set additional compose files (skipped entirely when the field was not sent)
+        if ($extraComposeFilesProvided) {
+            $extraComposeFilesFile = "$compose_root/$script/extra_compose_files";
+            if (empty($extraComposeFilesNormalized)) {
+                if (is_file($extraComposeFilesFile))
+                    @unlink($extraComposeFilesFile);
+            } else {
+                file_put_contents($extraComposeFilesFile, implode("\n", $extraComposeFilesNormalized) . "\n");
+            }
+        }
+
         // Set compose file discovery mode
         $useDefaultComposeFilesFile = "$compose_root/$script/use_default_compose_files";
         if ($useDefaultComposeFiles) {
diff --git a/source/compose.manager/include/Util.php b/source/compose.manager/include/Util.php
index 170adcda..6ec5889f 100644
--- a/source/compose.manager/include/Util.php
+++ b/source/compose.manager/include/Util.php
@@ -1764,6 +1764,40 @@ private function getAdditionalComposeFilesFromEnv(): array
         return array_values(array_unique($files));
     }
 
+    /**
+     * Parse additional compose file paths from the `extra_compose_files`
+     * metadata file (one path per line; `#` comments allowed).
+     *
+     * Paths may be absolute or relative to the compose source folder.
+     * Missing files are skipped with a warning so a stale entry cannot
+     * break stack operations.
+     *
+     * @return string[]
+     */
+    private function getExtraComposeFiles(): array
+    {
+        $raw = $this->readMetadata('extra_compose_files');
+        if ($raw === null || $raw === '') {
+            return [];
+        }
+
+        $files = [];
+        foreach (preg_split('/\R/', $raw) as $line) {
+            $line = trim($line);
+            if ($line === '' || str_starts_with($line, '#')) {
+                continue;
+            }
+            $path = Path::isAbsolutePath($line) ? $line : $this->composeSource . '/' . $line;
+            if (!is_file($path)) {
+                composeLogger("Ignoring missing extra compose file for stack $this->projectFolder", ['path' => $path], 'user', 'warning', 'stack');
+                continue;
+            }
+            $files[] = $path;
+        }
+
+        return $files;
+    }
+
     /**
      * Normalize compose file paths for deduplication.
      *
@@ -1820,6 +1854,26 @@ private static function splitComposeFileValue(string $value): array
         return $entries;
     }
 
+    /**
+     * Compose files that are directly editable in the stack editor: every
+     * existing file that contributes to the compose command, in `-f` order
+     * (main compose file, override file, COMPOSE_FILE env entries, and
+     * `extra_compose_files` metadata).
+     *
+     * @return string[]
+     */
+    public function getEditableComposeFiles(): array
+    {
+        $files = [];
+        foreach ($this->getComposeFilePaths() as $path) {
+            if (!is_file($path)) {
+                continue;
+            }
+            $files[] = $path;
+        }
+        return $files;
+    }
+
     private function getComposeFilePaths(): array
     {
         $paths = [];
@@ -1835,6 +1889,10 @@ private function getComposeFilePaths(): array
             $paths[] = $extraFile;
         }
 
+        foreach ($this->getExtraComposeFiles() as $extraFile) {
+            $paths[] = $extraFile;
+        }
+
         $normalized = [];
         $unique = [];
         foreach ($paths as $path) {
@@ -1875,8 +1933,8 @@ public function useDefaultComposeFileDiscovery(): bool
     /**
      * Determine whether this stack has manual settings that require explicit mode.
      *
-    * Explicit env-path and indirect-file selections are treated as explicit-mode
-    * signals, so default file discovery is bypassed.
+    * Explicit env-path, extra compose files, and indirect-file selections are
+    * treated as explicit-mode signals, so default file discovery is bypassed.
      *
      * @return bool
      */
@@ -1887,6 +1945,11 @@ private function hasManualComposePathOverrides(): bool
             return true;
         }
 
+        $extraComposeFiles = $this->readMetadata('extra_compose_files');
+        if ($extraComposeFiles !== null && $extraComposeFiles !== '') {
+            return true;
+        }
+
         return $this->indirectMode === 'file';
     }
 
diff --git a/source/compose.manager/javascript/composeManagerMain.js b/source/compose.manager/javascript/composeManagerMain.js
index 8ea6981c..600072bc 100644
--- a/source/compose.manager/javascript/composeManagerMain.js
+++ b/source/compose.manager/javascript/composeManagerMain.js
@@ -91,15 +91,14 @@ function parseMemUsagePair(memStr) {
             }
         }
 
-        var hasEnvPath = ($('#settings-env-path').val() || '').trim() !== '';
-        var hasExternalComposeFilePath = ($('#settings-external-compose-file').val() || '').trim() !== '';
+        var manualOverrideReasons = [];
+        if (($('#settings-env-path').val() || '').trim() !== '') manualOverrideReasons.push('Env File Path');
+        if (($('#settings-external-compose-file').val() || '').trim() !== '') manualOverrideReasons.push('External Compose File');
+        if (getExtraComposeFilesValue() !== '') manualOverrideReasons.push('Additional Compose Files');
 
-        if (hasEnvPath || hasExternalComposeFilePath) {
-            var reason = hasEnvPath && hasExternalComposeFilePath
-                ? 'Default discovery disabled because Env File Path and External Compose File are set.'
-                : (hasEnvPath
-                    ? 'Default discovery disabled because Env File Path is set.'
-                    : 'Default discovery disabled because External Compose File is set.');
+        if (manualOverrideReasons.length > 0) {
+            var reason = 'Default discovery disabled because ' + manualOverrideReasons.join(' and ')
+                + (manualOverrideReasons.length > 1 ? ' are set.' : ' is set.');
 
             if ($checkbox.is(':checked')) {
                 $checkbox.prop('checked', false);
@@ -115,6 +114,76 @@ function parseMemUsagePair(memStr) {
         }
     }
 
+// ---- Additional Compose Files settings UI ----
+
+// Combine checked folder candidates and external lines into the
+// newline-separated value stored in the extra_compose_files metadata file.
+function getExtraComposeFilesValue() {
+    var lines = [];
+    $('#settings-extra-compose-candidates input[type="checkbox"]:checked').each(function() {
+        lines.push($(this).val());
+    });
+    ($('#settings-extra-compose-external').val() || '').split('\n').forEach(function(line) {
+        line = line.trim();
+        if (line) lines.push(line);
+    });
+    return lines.join('\n');
+}
+
+// Render the candidate checkbox list and route non-candidate entries
+// (external/absolute paths) into the advanced textarea.
+function renderExtraComposeFiles(candidates, rawValue) {
+    var $list = $('#settings-extra-compose-candidates');
+    var $none = $('#settings-extra-compose-none');
+    var $external = $('#settings-extra-compose-external');
+
+    var selected = [];
+    (rawValue || '').split('\n').forEach(function(line) {
+        line = line.trim();
+        if (line && line.indexOf('#') !== 0) selected.push(line);
+    });
+
+    candidates = candidates || [];
+    var externalLines = selected.filter(function(entry) {
+        return candidates.indexOf(entry) === -1;
+    });
+
+    $list.empty();
+    candidates.forEach(function(name) {
+        var $label = $('<label>').css({ display: 'flex', 'align-items': 'center', gap: '8px', 'font-weight': 'normal' });
+        var $cb = $('<input type="checkbox">').val(name).prop('checked', selected.indexOf(name) !== -1);
+        $label.append($cb).append($('<span>').text(name));
+        $list.append($label);
+    });
+    $list.toggle(candidates.length > 0);
+    $none.toggle(candidates.length === 0);
+    $external.val(externalLines.join('\n'));
+    if (externalLines.length > 0) {
+        $('#settings-extra-compose-external-wrap').attr('open', '');
+    }
+}
+
+function onExtraComposeFilesChanged() {
+    var currentValue = getExtraComposeFilesValue();
+    var originalValue = editorModal.originalSettings['extra-compose-files'] || '';
+
+    if (currentValue !== originalValue) {
+        editorModal.modifiedSettings.add('extra-compose-files');
+    } else {
+        editorModal.modifiedSettings.delete('extra-compose-files');
+    }
+
+    updateSaveButtonState();
+    updateTabModifiedState();
+    updateSettingsDefaultComposeDiscoveryState();
+}
+
+function resetExtraComposeFilesUI() {
+    $('#settings-extra-compose-candidates').empty().hide();
+    $('#settings-extra-compose-none').hide();
+    $('#settings-extra-compose-external').val('');
+    $('#settings-extra-compose-external-wrap').removeAttr('open');
+}
 
 // Backward-compatible helper used by existing code paths.
 function parseMemToBytes(memStr) {
@@ -668,6 +737,11 @@ function initEditorModal() {
         }
     });
 
+    // Additional compose files: combined change tracking for the candidate
+    // checkboxes (dynamic) and the external paths textarea.
+    $('#settings-extra-compose-candidates').on('change', 'input[type="checkbox"]', onExtraComposeFilesChanged);
+    $('#settings-extra-compose-external').on('input change', onExtraComposeFilesChanged);
+
     // Override management mode is a saveable setting (deferred persist).
     $('#settings-override-management').on('change', function() {
         var mode = $(this).is(':checked') ? 'basic' : 'advanced';
@@ -4216,6 +4290,79 @@ function loadEditorFiles(project) {
     });
 }
 
+// ---- Compose file switcher (main + additional compose files) ----
+
+// Populate the Compose tab file selector; hidden unless the stack has
+// more than one editable compose file.
+function populateComposeFileSelector(files) {
+    var $wrap = $('#compose-file-selector-wrap');
+    var $sel = $('#compose-file-selector');
+    editorModal.composeFiles = files || [];
+
+    $sel.empty();
+    if (!files || files.length < 2) {
+        $wrap.hide();
+        return;
+    }
+    files.forEach(function(path) {
+        var base = path.split('/').pop();
+        $sel.append($('<option>').val(path).text(base).attr('title', path));
+    });
+    $sel.val(editorModal.filePaths.compose || files[0]);
+    $wrap.css('display', 'flex');
+}
+
+// Switch the Compose tab editor to another file of the stack.
+function switchComposeFile(path) {
+    if (!path || path === editorModal.filePaths.compose) return;
+
+    var doSwitch = function() {
+        $.post(caURL, {
+            action: 'getYml',
+            script: editorModal.currentProject,
+            file: path
+        }).then(function(data) {
+            if (!data) return;
+            var response = jQuery.parseJSON(data);
+            if (response.result !== 'success') {
+                swal({ type: 'error', title: 'Load Failed', text: response.message || 'Unable to load file.' });
+                $('#compose-file-selector').val(editorModal.filePaths.compose);
+                return;
+            }
+            editorModal.filePaths.compose = response.fileName || path;
+            editorModal.originalContent['compose'] = response.content || '';
+            if (editorModal.editors['compose']) editorModal.editors['compose'].setValue(response.content || '', -1);
+            editorModal.modifiedTabs.delete('compose');
+            updateSaveButtonState();
+            updateTabModifiedState();
+            updateEditorFileInfo();
+            validateYaml('compose', response.content || '');
+        }).fail(function() {
+            swal({ type: 'error', title: 'Load Failed', text: 'Unable to load file (network error).' });
+            $('#compose-file-selector').val(editorModal.filePaths.compose);
+        });
+    };
+
+    if (editorModal.modifiedTabs.has('compose')) {
+        swal({
+            title: 'Discard changes?',
+            text: 'The current compose file has unsaved changes that will be lost when switching files.',
+            type: 'warning',
+            showCancelButton: true,
+            confirmButtonText: 'Discard',
+            cancelButtonText: 'Cancel'
+        }, function(confirmed) {
+            if (confirmed) {
+                doSwitch();
+            } else {
+                $('#compose-file-selector').val(editorModal.filePaths.compose);
+            }
+        });
+    } else {
+        doSwitch();
+    }
+}
+
 // Load settings data into the settings panel
 function loadSettingsData(project, projectName) {
     // Set the name from projectName (display name)
@@ -4301,6 +4448,14 @@ function loadSettingsData(project, projectName) {
                 $('#settings-env-path').val(envPath);
                 editorModal.originalSettings['env-path'] = envPath;
 
+                // Additional compose files
+                renderExtraComposeFiles(response.composeFileCandidates || [], response.extraComposeFiles || '');
+                // Store the normalized (comment-free) value so change tracking compares like-for-like
+                editorModal.originalSettings['extra-compose-files'] = getExtraComposeFilesValue();
+
+                // Compose file selector (main + additional files)
+                populateComposeFileSelector(response.editableComposeFiles || []);
+
                 // External compose path
                 var externalComposePath = response.externalComposePath || '';
                 var externalComposeFilePath = response.externalComposeFilePath || '';
@@ -4381,6 +4536,7 @@ function loadSettingsData(project, projectName) {
         $('#settings-icon-url').val('');
         $('#settings-webui-url').val('');
         $('#settings-env-path').val('');
+        resetExtraComposeFilesUI();
         $('#settings-default-profile').val('');
         $('#settings-external-compose-path').val('');
         $('#settings-external-compose-file').val('');
@@ -4389,6 +4545,7 @@ function loadSettingsData(project, projectName) {
         editorModal.originalSettings['icon-url'] = '';
         editorModal.originalSettings['webui-url'] = '';
         editorModal.originalSettings['env-path'] = '';
+        editorModal.originalSettings['extra-compose-files'] = '';
         editorModal.originalSettings['default-profile'] = '';
         editorModal.originalSettings['external-compose-path'] = '';
         editorModal.originalSettings['external-compose-file'] = '';
@@ -4880,6 +5037,7 @@ function hasPathSensitiveSettingsChanges() {
     return editorModal.modifiedSettings.has('env-path') ||
         editorModal.modifiedSettings.has('external-compose-path') ||
         editorModal.modifiedSettings.has('external-compose-file') ||
+        editorModal.modifiedSettings.has('extra-compose-files') ||
         editorModal.modifiedSettings.has('use-default-compose-files');
 }
 
@@ -5126,6 +5284,10 @@ function saveTab(tabName, saveErrors) {
     if (tabName === 'override') {
         savePayload.managed = editorModal.labelsViewMode === 'basic' ? 1 : 0;
     }
+    if (tabName === 'compose' && editorModal.filePaths.compose) {
+        // Save to the currently selected compose file (main or additional)
+        savePayload.file = editorModal.filePaths.compose;
+    }
 
     return $.post(caURL, savePayload).then(function(data) {
         var saveTarget = tabName === 'override' ? 'override file' : (tabName + ' file');
@@ -5325,7 +5487,7 @@ function saveSettings(saveErrors) {
     }
 
     // Save icon URL, webui URL, env path, default profile, and external compose settings if any are modified
-    if (editorModal.modifiedSettings.has('icon-url') || editorModal.modifiedSettings.has('webui-url') || editorModal.modifiedSettings.has('env-path') || editorModal.modifiedSettings.has('default-profile') || editorModal.modifiedSettings.has('external-compose-path') || editorModal.modifiedSettings.has('external-compose-file') || editorModal.modifiedSettings.has('use-default-compose-files')) {
+    if (editorModal.modifiedSettings.has('icon-url') || editorModal.modifiedSettings.has('webui-url') || editorModal.modifiedSettings.has('env-path') || editorModal.modifiedSettings.has('extra-compose-files') || editorModal.modifiedSettings.has('default-profile') || editorModal.modifiedSettings.has('external-compose-path') || editorModal.modifiedSettings.has('external-compose-file') || editorModal.modifiedSettings.has('use-default-compose-files')) {
         var iconUrl = $('#settings-icon-url').val();
         var webuiUrl = $('#settings-webui-url').val();
         if (webuiUrl && !isValidWebUIUrl(webuiUrl)) {
@@ -5345,6 +5507,7 @@ function saveSettings(saveErrors) {
             return $.Deferred().resolve(false).promise();
         }
         var envPath = $('#settings-env-path').val();
+        var extraComposeFiles = getExtraComposeFilesValue();
         var defaultProfile = $('#settings-default-profile').val();
         var externalComposePath = $('#settings-external-compose-path').val();
         var externalComposeFilePath = $('#settings-external-compose-file').val();
@@ -5373,6 +5536,7 @@ function saveSettings(saveErrors) {
                 iconUrl: iconUrl,
                 webuiUrl: webuiUrl,
                 envPath: envPath,
+                extraComposeFiles: extraComposeFiles,
                 defaultProfile: defaultProfile,
                 externalComposePath: externalComposePath,
                 externalComposeFilePath: externalComposeFilePath,
@@ -5389,6 +5553,7 @@ function saveSettings(saveErrors) {
                         editorModal.originalSettings['icon-url'] = iconUrl;
                         editorModal.originalSettings['webui-url'] = webuiUrl;
                         editorModal.originalSettings['env-path'] = envPath;
+                        editorModal.originalSettings['extra-compose-files'] = extraComposeFiles;
                         editorModal.originalSettings['default-profile'] = defaultProfile;
                         editorModal.originalSettings['external-compose-path'] = externalComposePath;
                         editorModal.originalSettings['external-compose-file'] = externalComposeFilePath;
@@ -5396,6 +5561,7 @@ function saveSettings(saveErrors) {
                         editorModal.modifiedSettings.delete('icon-url');
                         editorModal.modifiedSettings.delete('webui-url');
                         editorModal.modifiedSettings.delete('env-path');
+                        editorModal.modifiedSettings.delete('extra-compose-files');
                         editorModal.modifiedSettings.delete('default-profile');
                         editorModal.modifiedSettings.delete('external-compose-path');
                         editorModal.modifiedSettings.delete('external-compose-file');
@@ -5616,12 +5782,18 @@ function doCloseEditorModal() {
     toggleLabelsViewMode(false, true);
     $('#editor-validation-override').html('<i class="fa fa-check editor-validation-icon"></i> Ready').removeClass('valid error warning');
 
+    // Reset compose file selector
+    $('#compose-file-selector-wrap').hide();
+    $('#compose-file-selector').empty();
+    editorModal.composeFiles = [];
+
     // Reset settings fields
     $('#settings-name').val('');
     $('#settings-description').val('');
     $('#settings-icon-url').val('');
     $('#settings-webui-url').val('');
     $('#settings-env-path').val('');
+    resetExtraComposeFilesUI();
     $('#settings-default-profile').val('');
     $('#settings-external-compose-path').val('');
     $('#settings-external-compose-file').val('');
diff --git a/tests/unit/ExecActionsTest.php b/tests/unit/ExecActionsTest.php
index 24cdf870..4635e801 100644
--- a/tests/unit/ExecActionsTest.php
+++ b/tests/unit/ExecActionsTest.php
@@ -871,6 +871,52 @@ public function testSetStackSettingsSavesSettings(): void
         $this->assertEquals('success', $result['result']);
     }
 
+    public function testSetStackSettingsPreservesExtraComposeFilesWhenFieldMissing(): void
+    {
+        $stackPath = $this->createTestStack('test-stack');
+        file_put_contents($stackPath . '/extra_compose_files', "compose.gpu.yaml\n");
+
+        // A stale UI session that predates the field posts without it
+        $output = $this->executeAction('setStackSettings', [
+            'script' => 'test-stack',
+            'defaultProfile' => 'staging',
+        ]);
+
+        $result = json_decode($output, true);
+        $this->assertEquals('success', $result['result']);
+        $this->assertFileExists($stackPath . '/extra_compose_files');
+        $this->assertEquals("compose.gpu.yaml\n", file_get_contents($stackPath . '/extra_compose_files'));
+    }
+
+    public function testSetStackSettingsClearsExtraComposeFilesWhenFieldEmpty(): void
+    {
+        $stackPath = $this->createTestStack('test-stack');
+        file_put_contents($stackPath . '/extra_compose_files', "compose.gpu.yaml\n");
+
+        $output = $this->executeAction('setStackSettings', [
+            'script' => 'test-stack',
+            'extraComposeFiles' => '',
+        ]);
+
+        $result = json_decode($output, true);
+        $this->assertEquals('success', $result['result']);
+        $this->assertFileDoesNotExist($stackPath . '/extra_compose_files');
+    }
+
+    public function testSetStackSettingsWritesExtraComposeFiles(): void
+    {
+        $stackPath = $this->createTestStack('test-stack');
+
+        $output = $this->executeAction('setStackSettings', [
+            'script' => 'test-stack',
+            'extraComposeFiles' => "compose.gpu.yaml\ncompose.debug.yaml",
+        ]);
+
+        $result = json_decode($output, true);
+        $this->assertEquals('success', $result['result']);
+        $this->assertEquals("compose.gpu.yaml\ncompose.debug.yaml\n", file_get_contents($stackPath . '/extra_compose_files'));
+    }
+
     public function testSetStackSettingsRejectsBothExternalComposePathAndFile(): void
     {
         $this->createTestStack('test-stack');
diff --git a/tests/unit/ExtraComposeFilesTest.php b/tests/unit/ExtraComposeFilesTest.php
new file mode 100644
index 00000000..a26337bc
--- /dev/null
+++ b/tests/unit/ExtraComposeFilesTest.php
@@ -0,0 +1,153 @@
+<?php
+
+declare(strict_types=1);
+
+namespace ComposeManager\Tests;
+
+use PluginTests\TestCase;
+
+require_once '/usr/local/emhttp/plugins/compose.manager/include/ComposeCommandBuilder.php';
+
+class ExtraComposeFilesTest extends TestCase
+{
+    private string $tempRoot;
+
+    protected function setUp(): void
+    {
+        parent::setUp();
+        \StackInfo::clearCache();
+        $this->tempRoot = $this->createTempDir();
+    }
+
+    protected function tearDown(): void
+    {
+        \StackInfo::clearCache();
+        parent::tearDown();
+    }
+
+    /**
+     * @param string[] $extraLines
+     */
+    private function makeStack(string $stack, array $extraLines = []): string
+    {
+        $stackDir = $this->tempRoot . '/' . $stack;
+        mkdir($stackDir);
+        file_put_contents($stackDir . '/compose.yaml', "services:\n  web:\n    image: nginx\n");
+        if (!empty($extraLines)) {
+            file_put_contents($stackDir . '/extra_compose_files', implode("\n", $extraLines) . "\n");
+        }
+        return $stackDir;
+    }
+
+    public function testExtraAbsoluteFileIsAppended(): void
+    {
+        $stackDir = $this->makeStack('extra-abs');
+        $extraFile = $stackDir . '/compose.gpu.yaml';
+        file_put_contents($extraFile, "services:\n  web:\n    runtime: nvidia\n");
+        file_put_contents($stackDir . '/extra_compose_files', $extraFile . "\n");
+
+        $spec = \ComposeCommandBuilder::fromProject($this->tempRoot, 'extra-abs', 'up');
+
+        // The plugin auto-creates compose.override.yaml; extras come after it.
+        $this->assertSame(
+            [$stackDir . '/compose.yaml', $stackDir . '/compose.override.yaml', $extraFile],
+            $spec['composeFiles']
+        );
+    }
+
+    public function testExtraRelativePathResolvesAgainstComposeSource(): void
+    {
+        $stackDir = $this->makeStack('extra-rel', ['compose.gpu.yaml']);
+        file_put_contents($stackDir . '/compose.gpu.yaml', "services:\n");
+
+        $spec = \ComposeCommandBuilder::fromProject($this->tempRoot, 'extra-rel', 'up');
+
+        $this->assertContains($stackDir . '/compose.gpu.yaml', $spec['composeFiles']);
+    }
+
+    public function testMissingExtraFileIsSkipped(): void
+    {
+        $stackDir = $this->makeStack('extra-missing', ['/nonexistent/extra.yaml']);
+
+        $spec = \ComposeCommandBuilder::fromProject($this->tempRoot, 'extra-missing', 'up');
+
+        $this->assertNotContains('/nonexistent/extra.yaml', $spec['composeFiles']);
+        $this->assertContains($stackDir . '/compose.yaml', $spec['composeFiles']);
+    }
+
+    public function testCommentsAndBlankLinesAreIgnored(): void
+    {
+        $stackDir = $this->makeStack('extra-comments');
+        file_put_contents($stackDir . '/compose.gpu.yaml', "services:\n");
+        file_put_contents(
+            $stackDir . '/extra_compose_files',
+            "# gpu override\n\ncompose.gpu.yaml\n"
+        );
+
+        $spec = \ComposeCommandBuilder::fromProject($this->tempRoot, 'extra-comments', 'up');
+
+        $this->assertContains($stackDir . '/compose.gpu.yaml', $spec['composeFiles']);
+        $this->assertNotContains($stackDir . '/# gpu override', $spec['composeFiles']);
+    }
+
+    public function testDuplicateOfMainComposeFileIsDeduplicated(): void
+    {
+        $stackDir = $this->makeStack('extra-dup', ['compose.yaml']);
+
+        $spec = \ComposeCommandBuilder::fromProject($this->tempRoot, 'extra-dup', 'up');
+
+        $this->assertSame(
+            [$stackDir . '/compose.yaml'],
+            array_values(array_filter($spec['composeFiles'], static fn(string $p): bool => basename($p) === 'compose.yaml'))
+        );
+    }
+
+    public function testExtraFilesDisableDefaultFileDiscovery(): void
+    {
+        $stackDir = $this->makeStack('extra-discovery', ['compose.gpu.yaml']);
+        file_put_contents($stackDir . '/compose.gpu.yaml', "services:\n");
+        file_put_contents($stackDir . '/use_default_compose_files', 'true');
+
+        $spec = \ComposeCommandBuilder::fromProject($this->tempRoot, 'extra-discovery', 'up');
+
+        $this->assertFalse($spec['useDefaultFileDiscovery']);
+        $this->assertContains($stackDir . '/compose.gpu.yaml', $spec['composeFiles']);
+    }
+
+    public function testEditableComposeFilesListsAllStackFilesInOrder(): void
+    {
+        $stackDir = $this->makeStack('editable-files', ['compose.gpu.yaml']);
+        file_put_contents($stackDir . '/compose.override.yaml', "services:\n");
+        file_put_contents($stackDir . '/compose.gpu.yaml', "services:\n");
+
+        $info = \StackInfo::fromProject($this->tempRoot, 'editable-files');
+        $editable = $info->getEditableComposeFiles();
+
+        $this->assertSame(
+            [
+                $stackDir . '/compose.yaml',
+                $stackDir . '/compose.override.yaml',
+                $stackDir . '/compose.gpu.yaml',
+            ],
+            $editable
+        );
+    }
+
+    public function testExtraFileAppendsAfterOverride(): void
+    {
+        $stackDir = $this->makeStack('extra-order', ['compose.gpu.yaml']);
+        file_put_contents($stackDir . '/compose.override.yaml', "services:\n");
+        file_put_contents($stackDir . '/compose.gpu.yaml', "services:\n");
+
+        $spec = \ComposeCommandBuilder::fromProject($this->tempRoot, 'extra-order', 'up');
+
+        $this->assertSame(
+            [
+                $stackDir . '/compose.yaml',
+                $stackDir . '/compose.override.yaml',
+                $stackDir . '/compose.gpu.yaml',
+            ],
+            $spec['composeFiles']
+        );
+    }
+}

From 8549baa02403b9cd155c56cf3a661fa94ceffa62 Mon Sep 17 00:00:00 2001
From: Joly0 <13993216+Joly0@users.noreply.github.com>
Date: Fri, 12 Jun 2026 13:07:30 +0200
Subject: [PATCH 36/67] Fix dropdown z-index on docker page when clicking on
 stack icon

https://github.com/unraid/webgui/pull/2639
---
 source/compose.manager/include/ComposeManager.php       | 7 ++++---
 source/compose.manager/javascript/composeManagerMain.js | 9 +++++++++
 2 files changed, 13 insertions(+), 3 deletions(-)

diff --git a/source/compose.manager/include/ComposeManager.php b/source/compose.manager/include/ComposeManager.php
index 2e0258d2..6845fd9f 100755
--- a/source/compose.manager/include/ComposeManager.php
+++ b/source/compose.manager/include/ComposeManager.php
@@ -236,10 +236,11 @@ function compose_manager_cpu_spec_count($cpuSpec)
         z-index: 100 !important;
     }
 
-    /* Keep long context menus visible above fixed bottom UI bars */
+    /* Keep context menus above the fixed footer (z-index must out-rank the
+       .dropdown-menu !important rule above); the scroll spacer appended in
+       fixContextDropdownOverflow() keeps them reachable (unraid/webgui#2639) */
     .dropdown-context:not(.dropdown-context-sub) {
-        max-height: calc(100vh - 72px);
-        overflow-y: auto;
+        z-index: 10001 !important;
     }
 
     /* CPU & Memory load display (matches Docker manager usage-disk style) */
diff --git a/source/compose.manager/javascript/composeManagerMain.js b/source/compose.manager/javascript/composeManagerMain.js
index 8ea6981c..89171d09 100644
--- a/source/compose.manager/javascript/composeManagerMain.js
+++ b/source/compose.manager/javascript/composeManagerMain.js
@@ -6218,6 +6218,13 @@ function updateParentStackFromContainers(stackId, project) {
 }
 
 // Attach context menu to container icon (like Docker tab's addDockerContainerContext)
+// Keep a context dropdown above the footer and extend the scrollable area so it stays reachable
+// (same fix as unraid/webgui#2639)
+function fixContextDropdownOverflow(elementId) {
+    $('#dropdown-' + elementId).css('z-index', 10001)
+        .append('<li class="compose-dropdown-spacer" aria-hidden="true" style="position:absolute;top:100%;left:0;width:1px;height:60px;pointer-events:none;list-style:none"></li>');
+}
+
 function addComposeContainerContext(elementId) {
     var $el = $('#' + elementId);
     var containerName = $el.data('name');
@@ -6348,6 +6355,7 @@ function addComposeContainerContext(elementId) {
     // Ensure stale menu bindings don't persist across state transitions
     $el.off('contextmenu');
     context.attach('#' + elementId, opts);
+    fixContextDropdownOverflow(elementId);
 }
 
 function containerAction(containerName, action, stackId) {
@@ -6828,6 +6836,7 @@ function addComposeStackContext(elementId) {
 
     context.destroy('#' + elementId);
     context.attach('#' + elementId, opts);
+    fixContextDropdownOverflow(elementId);
 }
 
 // Event delegation for docker-style container actions

From 0ca6ac996f3c239787be35cddd0090ff75a8b052 Mon Sep 17 00:00:00 2001
From: mstrhakr <mstrhakr@gmail.com>
Date: Sun, 14 Jun 2026 12:44:54 -0400
Subject: [PATCH 37/67] refactor: update echoComposeCommand and
 echoComposeCommandMultiple to use options array

---
 .../compose.manager/include/ComposeUtil.php   |  46 +-
 source/compose.manager/include/Helpers.php    |  18 +-
 .../javascript/composeManagerMain.js          | 414 ++++++++++--------
 tests/unit/ComposeManagerMainSourceTest.php   |  15 +-
 4 files changed, 280 insertions(+), 213 deletions(-)

diff --git a/source/compose.manager/include/ComposeUtil.php b/source/compose.manager/include/ComposeUtil.php
index 06e9ff86..66d4431f 100644
--- a/source/compose.manager/include/ComposeUtil.php
+++ b/source/compose.manager/include/ComposeUtil.php
@@ -14,22 +14,38 @@
 
 switch ($_POST['action']) {
     case 'composeUp':
-        echoComposeCommand('up', false, $background, $removeOrphans);
+        echoComposeCommand('up', [
+            'background' => $background,
+            'removeOrphans' => $removeOrphans
+        ]);
         break;
     case 'composeUpRecreate':
-        echoComposeCommand('up', true, $background, $removeOrphans);
+        echoComposeCommand('up', [
+            'recreate' => true,
+            'background' => $background,
+            'removeOrphans' => $removeOrphans
+        ]);
         break;
     case 'composeDown':
-        echoComposeCommand('down', false, $background, $removeOrphans);
+        echoComposeCommand('down', [
+            'background' => $background,
+            'removeOrphans' => $removeOrphans
+        ]);
         break;
     case 'composeUpPullBuild':
-        echoComposeCommand('update', false, $background);
+        echoComposeCommand('update', [
+            'background' => $background
+        ]);
         break;
     case 'composePull':
-        echoComposeCommand('pull', false, $background);
+        echoComposeCommand('pull', [
+            'background' => $background
+        ]);
         break;
     case 'composeStop':
-        echoComposeCommand('stop', false, $background);
+        echoComposeCommand('stop', [
+            'background' => $background
+        ]);
         break;
     case 'composeLogs':
         echoComposeCommand('logs');
@@ -37,19 +53,31 @@
     case 'composeUpMultiple':
         $paths = isset($_POST['paths']) ? json_decode($_POST['paths'], true) : array();
         if (!empty($paths)) {
-            echoComposeCommandMultiple('up', $paths, $background, $removeOrphans);
+            echoComposeCommandMultiple('up', [
+                'paths' => $paths,
+                'background' => $background,
+                'removeOrphans' => $removeOrphans
+            ]);
         }
         break;
     case 'composeDownMultiple':
         $paths = isset($_POST['paths']) ? json_decode($_POST['paths'], true) : array();
         if (!empty($paths)) {
-            echoComposeCommandMultiple('down', $paths, $background, $removeOrphans);
+            echoComposeCommandMultiple('down', [
+                'paths' => $paths,
+                'background' => $background,
+                'removeOrphans' => $removeOrphans
+            ]);
         }
         break;
     case 'composeUpdateMultiple':
         $paths = isset($_POST['paths']) ? json_decode($_POST['paths'], true) : array();
         if (!empty($paths)) {
-            echoComposeCommandMultiple('update', $paths, $background, $removeOrphans);
+            echoComposeCommandMultiple('update', [
+                'paths' => $paths,
+                'background' => $background,
+                'removeOrphans' => $removeOrphans
+            ]);
         }
         break;
     case 'containerConsole':
diff --git a/source/compose.manager/include/Helpers.php b/source/compose.manager/include/Helpers.php
index c3149753..05cf8056 100644
--- a/source/compose.manager/include/Helpers.php
+++ b/source/compose.manager/include/Helpers.php
@@ -130,11 +130,9 @@ function appendComposeEnvFileArg(array &$composeCommand, array $args): void
  * Build and echo a compose command for a single stack.
  *
  * @param string $action The compose action (up, down, update, pull, stop, logs)
- * @param bool $recreate Whether to force recreate containers (adds --force-recreate flag)
- * @param bool $background Whether to run in the background (no terminal window; sends notification on finish)
- * @param bool $removeOrphans Whether to pass --remove-orphans for up/down actions
+ * @param array<string, mixed> $options Command options: recreate, background, removeOrphans
  */
-function echoComposeCommand($action, $recreate = false, $background = false, $removeOrphans = false)
+function echoComposeCommand($action, array $options = [])
 {
     /**
      * Note: This function is called from an AJAX endpoint and must be careful to only echo the intended command or JSON response.
@@ -153,7 +151,9 @@ function echoComposeCommand($action, $recreate = false, $background = false, $re
     $debug = $cfg['DEBUG_TO_LOG'] == "true";
     $path = isset($_POST['path']) ? trim($_POST['path']) : "";
     $profile = isset($_POST['profile']) ? trim($_POST['profile']) : "";
-    $removeOrphans = !empty($_POST['removeOrphans']) && $_POST['removeOrphans'] !== 'false';
+    $recreate = !empty($options['recreate']);
+    $background = !empty($options['background']);
+    $removeOrphans = !empty($options['removeOrphans']);
     $unRaidVars = parse_ini_file("/var/local/emhttp/var.ini");
     if ($unRaidVars['mdState'] != "STARTED") {
         echo $plugin_root . "/scripts/arrayNotStarted.sh";
@@ -262,10 +262,9 @@ function echoComposeCommand($action, $recreate = false, $background = false, $re
  * Build and echo a compose command for multiple stacks.
  *
  * @param string $action The compose action (up, down, update)
- * @param array $paths Array of stack paths
- * @param bool $background Whether to run in the background (no terminal window; sends notification on finish)
+ * @param array<string, mixed> $options Command options: paths, background, removeOrphans
  */
-function echoComposeCommandMultiple($action, $paths, $background = false, $removeOrphans = false)
+function echoComposeCommandMultiple($action, array $options = [])
 {
     global $plugin_root;
     global $sName;
@@ -273,6 +272,9 @@ function echoComposeCommandMultiple($action, $paths, $background = false, $remov
     $cfg = parse_plugin_cfg($sName);
     $debug = $cfg['DEBUG_TO_LOG'] == "true";
     $unRaidVars = parse_ini_file("/var/local/emhttp/var.ini");
+    $paths = $options['paths'] ?? [];
+    $background = !empty($options['background']);
+    $removeOrphans = !empty($options['removeOrphans']);
 
     if ($unRaidVars['mdState'] != "STARTED") {
         echo $plugin_root . "/scripts/arrayNotStarted.sh";
diff --git a/source/compose.manager/javascript/composeManagerMain.js b/source/compose.manager/javascript/composeManagerMain.js
index c6c65c00..bbbf5881 100644
--- a/source/compose.manager/javascript/composeManagerMain.js
+++ b/source/compose.manager/javascript/composeManagerMain.js
@@ -3187,7 +3187,8 @@ function confirmedComposeAction(path, opts) {
 }
 
 // Confirmed action handlers (no dialog, just execute)
-function ComposeUpConfirmed(path, profile = "", background = false, suppressBackgroundNotification = false, removeOrphans = false) {
+function ComposeUpConfirmed(path, opts) {
+    opts = opts || {};
     confirmedComposeAction(path, {
         actionName: 'up',
         titlePrefix: 'Compose Up',
@@ -3195,11 +3196,11 @@ function ComposeUpConfirmed(path, profile = "", background = false, suppressBack
         payload: {
             action: 'composeUp',
             path: path,
-            profile: profile,
-            removeOrphans: removeOrphans
+            profile: opts.profile || '',
+            removeOrphans: !!opts.removeOrphans
         },
-        background: background,
-        suppressBackgroundNotification: suppressBackgroundNotification,
+        background: !!opts.background,
+        suppressBackgroundNotification: !!opts.suppressBackgroundNotification,
         pendingReload: true
     });
 }
@@ -3224,7 +3225,8 @@ function ComposeUp(path, profile = "") {
     showStackActionDialog('up', path, profile);
 }
 
-function ComposeDownConfirmed(path, profile = "", background = false, suppressBackgroundNotification = false, removeOrphans = false) {
+function ComposeDownConfirmed(path, opts) {
+    opts = opts || {};
     confirmedComposeAction(path, {
         actionName: 'down',
         titlePrefix: 'Compose Down',
@@ -3232,11 +3234,11 @@ function ComposeDownConfirmed(path, profile = "", background = false, suppressBa
         payload: {
             action: 'composeDown',
             path: path,
-            profile: profile,
-            removeOrphans: removeOrphans
+            profile: opts.profile || '',
+            removeOrphans: !!opts.removeOrphans
         },
-        background: background,
-        suppressBackgroundNotification: suppressBackgroundNotification,
+        background: !!opts.background,
+        suppressBackgroundNotification: !!opts.suppressBackgroundNotification,
         pendingReload: true
     });
 }
@@ -3246,7 +3248,8 @@ function ComposeDown(path, profile = "") {
 }
 
 // Stop stack without removing containers
-function ComposeStopConfirmed(path, profile = "", background = false, suppressBackgroundNotification = false) {
+function ComposeStopConfirmed(path, opts) {
+    opts = opts || {};
     confirmedComposeAction(path, {
         actionName: 'stop',
         titlePrefix: 'Compose Stop',
@@ -3254,10 +3257,10 @@ function ComposeStopConfirmed(path, profile = "", background = false, suppressBa
         payload: {
             action: 'composeStop',
             path: path,
-            profile: profile
+            profile: opts.profile || ''
         },
-        background: background,
-        suppressBackgroundNotification: suppressBackgroundNotification,
+        background: !!opts.background,
+        suppressBackgroundNotification: !!opts.suppressBackgroundNotification,
         pendingReload: true
     });
 }
@@ -3267,7 +3270,8 @@ function ComposeStop(path, profile = "") {
 }
 
 // Restart stack (recreate containers without pulling)
-function ComposeRestartConfirmed(path, profile = "", background = false, suppressBackgroundNotification = false) {
+function ComposeRestartConfirmed(path, opts) {
+    opts = opts || {};
     confirmedComposeAction(path, {
         actionName: 'restart',
         titlePrefix: 'Compose Restart',
@@ -3275,10 +3279,10 @@ function ComposeRestartConfirmed(path, profile = "", background = false, suppres
         payload: {
             action: 'composeUpRecreate',
             path: path,
-            profile: profile
+            profile: opts.profile || ''
         },
-        background: background,
-        suppressBackgroundNotification: suppressBackgroundNotification,
+        background: !!opts.background,
+        suppressBackgroundNotification: !!opts.suppressBackgroundNotification,
         pendingReload: true,
         refreshDelayMs: 1000
     });
@@ -3289,7 +3293,8 @@ function ComposeRestart(path, profile = "") {
 }
 
 // Force update stack (pull and rebuild even without detected updates)
-function ForceUpdateStackConfirmed(path, profile = "", background = false, suppressBackgroundNotification = false) {
+function ForceUpdateStackConfirmed(path, opts) {
+    opts = opts || {};
     var stackName = basename(path);
     if (pendingUpdateCheckStacks.indexOf(stackName) === -1) {
         pendingUpdateCheckStacks.push(stackName);
@@ -3308,10 +3313,10 @@ function ForceUpdateStackConfirmed(path, profile = "", background = false, suppr
         payload: {
             action: 'composeUpPullBuild',
             path: path,
-            profile: profile
+            profile: opts.profile || ''
         },
-        background: background,
-        suppressBackgroundNotification: suppressBackgroundNotification,
+        background: !!opts.background,
+        suppressBackgroundNotification: !!opts.suppressBackgroundNotification,
         pendingReload: true
     });
 }
@@ -3634,7 +3639,8 @@ function setStackActionInProgress(stackName, inProgress, text) {
     }
 }
 
-function UpdateStackConfirmed(path, profile = "", background = false, suppressBackgroundNotification = false) {
+function UpdateStackConfirmed(path, opts) {
+    opts = opts || {};
     var stackName = basename(path);
     if (pendingUpdateCheckStacks.indexOf(stackName) === -1) {
         pendingUpdateCheckStacks.push(stackName);
@@ -3653,10 +3659,10 @@ function UpdateStackConfirmed(path, profile = "", background = false, suppressBa
         payload: {
             action: 'composeUpPullBuild',
             path: path,
-            profile: profile
+            profile: opts.profile || ''
         },
-        background: background,
-        suppressBackgroundNotification: suppressBackgroundNotification,
+        background: !!opts.background,
+        suppressBackgroundNotification: !!opts.suppressBackgroundNotification,
         pendingReload: true
     });
 }
@@ -3721,7 +3727,12 @@ function startAllStacks() {
         var disableWarnings = pluginCfg && pluginCfg.DISABLE_ACTION_WARNINGS === 'true';
 
         if (disableWarnings) {
-            executeStartAllStacks(stacks, bgDefault, bgDefault, removeOrphansDefault);
+            executeStartAllStacks({
+                stacks: stacks,
+                background: bgDefault,
+                suppressBackgroundNotification: bgDefault,
+                removeOrphans: removeOrphansDefault
+            });
             return;
         }
 
@@ -3737,7 +3748,12 @@ function startAllStacks() {
             if (confirmed) {
                 var runInBackground = $('#swal-run-bg-startall').is(':checked');
                 var removeOrphans = $('#swal-remove-orphans-startall').is(':checked');
-                executeStartAllStacks(stacks, runInBackground, false, removeOrphans);
+                executeStartAllStacks({
+                    stacks: stacks,
+                    background: runInBackground,
+                    suppressBackgroundNotification: false,
+                    removeOrphans: removeOrphans
+                });
             }
         });
 
@@ -3750,7 +3766,12 @@ function startAllStacks() {
     });
 }
 
-function executeStartAllStacks(stacks, background, suppressBackgroundNotification = false, removeOrphans = false) {
+function executeStartAllStacks(opts) {
+    opts = opts || {};
+    var stacks = opts.stacks || [];
+    var background = !!opts.background;
+    var suppressBackgroundNotification = !!opts.suppressBackgroundNotification;
+    var removeOrphans = !!opts.removeOrphans;
     var height = 800;
     var width = 1200;
 
@@ -3844,7 +3865,12 @@ function stopAllStacks() {
         var disableWarnings = pluginCfg && pluginCfg.DISABLE_ACTION_WARNINGS === 'true';
 
         if (disableWarnings) {
-            executeStopAllStacks(stacks, bgDefault, bgDefault, removeOrphansDefault);
+            executeStopAllStacks({
+                stacks: stacks,
+                background: bgDefault,
+                suppressBackgroundNotification: bgDefault,
+                removeOrphans: removeOrphansDefault
+            });
             return;
         }
 
@@ -3860,7 +3886,12 @@ function stopAllStacks() {
             if (confirmed) {
                 var runInBackground = $('#swal-run-bg-stopall').is(':checked');
                 var removeOrphans = $('#swal-remove-orphans-stopall').is(':checked');
-                executeStopAllStacks(stacks, runInBackground, false, removeOrphans);
+                executeStopAllStacks({
+                    stacks: stacks,
+                    background: runInBackground,
+                    suppressBackgroundNotification: false,
+                    removeOrphans: removeOrphans
+                });
             }
         });
 
@@ -3873,7 +3904,12 @@ function stopAllStacks() {
     });
 }
 
-function executeStopAllStacks(stacks, background, suppressBackgroundNotification = false, removeOrphans = false) {
+function executeStopAllStacks(opts) {
+    opts = opts || {};
+    var stacks = opts.stacks || [];
+    var background = !!opts.background;
+    var suppressBackgroundNotification = !!opts.suppressBackgroundNotification;
+    var removeOrphans = !!opts.removeOrphans;
     var height = 800;
     var width = 1200;
 
@@ -4272,7 +4308,12 @@ function renderStackActionDialog(action, displayName, path, profile, containers,
 
         if (disableWarnings) {
             // In default background mode (warnings disabled and background enabled), don't show toast if background is used
-            cfg.confirmedFn(path, profile, bgDefault, bgDefault, removeOrphansDefault);
+            cfg.confirmedFn(path, {
+                profile: profile,
+                background: bgDefault,
+                suppressBackgroundNotification: bgDefault,
+                removeOrphans: removeOrphansDefault
+            });
             return;
         }
 
@@ -4294,7 +4335,12 @@ function renderStackActionDialog(action, displayName, path, profile, containers,
                 var runInBackground = $('#swal-run-bg-checkbox').is(':checked');
                 var removeOrphans = $('#swal-remove-orphans-checkbox').is(':checked');
                 // when running in background, suppress the extra notifyBackgroundStarted popup
-                cfg.confirmedFn(path, profile, runInBackground, runInBackground, removeOrphans);
+                cfg.confirmedFn(path, {
+                    profile: profile,
+                    background: runInBackground,
+                    suppressBackgroundNotification: runInBackground,
+                    removeOrphans: removeOrphans
+                });
             }
         });
 
@@ -5747,161 +5793,10 @@ function saveTab(tabName, saveErrors) {
     });
 }
 
-// Save all modified changes (files, settings, and labels)
-function saveAllChanges(closeAfterSave) {
-    if (typeof closeAfterSave === 'undefined') {
-        closeAfterSave = false;
-    }
-
-    var savePromises = [];
-    var saveErrors = [];
-    var skippedManualLabels = false;
-    var totalChanges = editorModal.modifiedTabs.size + editorModal.modifiedSettings.size + editorModal.modifiedLabels.size;
-    var pathSensitiveSettingsChanged = hasPathSensitiveSettingsChanges();
-    var pathDependentEdits = hasPathDependentEdits();
+function saveSettings(saveErrors) {
     var project = editorModal.currentProject;
-    var removedServices = [];
-
-    if (totalChanges === 0) {
-        return;
-    }
-
-    if (project && editorModal.modifiedTabs.has('compose') && isStackRunning(project)) {
-        removedServices = getRemovedComposeServices();
-    }
-
-    function continueSave() {
-        // Track if labels are being modified in Automatic mode (need to offer recreate)
-        var labelsWereModified = editorModal.labelsViewMode === 'basic' && editorModal.modifiedLabels.size > 0;
-
-        // Save modified file tabs (compose, env, and override editor)
-        editorModal.modifiedTabs.forEach(function(tabName) {
-            savePromises.push(saveTab(tabName, saveErrors));
-        });
-
-        // Save settings if modified
-        if (editorModal.modifiedSettings.size > 0) {
-            savePromises.push(saveSettings(saveErrors));
-        }
-
-        // Save labels only in Automatic mode.
-        if (editorModal.modifiedLabels.size > 0) {
-            if (editorModal.labelsViewMode === 'basic') {
-                savePromises.push(saveLabels(saveErrors));
-            } else {
-                skippedManualLabels = true;
-            }
-        }
-
-        $.when.apply($, savePromises).then(function() {
-            var results = Array.prototype.slice.call(arguments);
-            var allSucceeded = results.every(function(result) {
-                return result === true;
-            });
-
-            if (allSucceeded) {
-                if (skippedManualLabels) {
-                    swal({
-                        title: "Partially Saved",
-                        text: "Non-label changes were saved. WebUI label form edits were not saved because Override File Management is set to Manual. Switch to Automatic to save Labels form changes.",
-                        type: "warning"
-                    });
-                    updateTabModifiedState();
-                    updateSaveButtonState();
-                    return;
-                }
-
-                // Check if we should offer to recreate containers
-                if (labelsWereModified) {
-                    promptRecreateContainers(closeAfterSave);
-                } else {
-                    var saveProject = editorModal.currentProject;
-                    if (closeAfterSave) {
-                        doCloseEditorModal();
-                    }
-                    swal({
-                        title: "Saved!",
-                        text: "All changes have been saved.",
-                        type: "success",
-                        timer: 1500,
-                        showConfirmButton: false
-                    });
-                    setTimeout(function() {
-                        if (saveProject) {
-                            refreshStackByProject(saveProject);
-                        }
-                    }, 1600);
-                }
-            } else {
-                var filteredErrors = saveErrors.filter(function(message) {
-                    return message !== '__STALE_PATH__';
-                });
-                if (filteredErrors.length === 0 && saveErrors.indexOf('__STALE_PATH__') !== -1) {
-                    return;
-                }
-                swal({
-                    title: 'Save Failed',
-                    text: filteredErrors.join('\n') || 'An unknown error occurred while saving.',
-                    type: 'error'
-                });
-            }
-        });
-    }
-
-    if (pathSensitiveSettingsChanged && pathDependentEdits) {
-        swal({
-            title: 'Reload Required',
-            text: 'Compose path or discovery settings changed. Save settings and reload the editor before saving compose, .env, override, or label edits.',
-            type: 'warning',
-            showCancelButton: true,
-            confirmButtonText: 'Save Settings Only',
-            cancelButtonText: 'Cancel'
-        }, function(confirmed) {
-            if (confirmed) {
-                saveSettingsWithOptionalReload(closeAfterSave);
-            }
-        });
-        return;
-    }
-
-    if (pathSensitiveSettingsChanged) {
-        saveSettingsWithOptionalReload(closeAfterSave);
-        return;
-    }
-
-    // Track if labels are being modified in Automatic mode (need to offer recreate)
-    var labelsWereModified = editorModal.labelsViewMode === 'basic' && editorModal.modifiedLabels.size > 0;
-
-    // Save modified file tabs (compose, env, and override editor)
-    editorModal.modifiedTabs.forEach(function(tabName) {
-        savePromises.push(saveTab(tabName, saveErrors));
-    });
-
-    // Save settings if modified
-    if (editorModal.modifiedSettings.size > 0) {
-        savePromises.push(saveSettings(saveErrors));
-    }
-
-    // Save labels only in Automatic mode.
-    if (editorModal.modifiedLabels.size > 0) {
-
-    if (removedServices.length > 0) {
-        swal({
-            title: 'Running Stack Changed',
-            text: 'This stack is running and the compose file no longer defines: ' + removedServices.join(', ') + '. Saving now can leave orphaned containers behind. Stop the stack first, or use Remove orphans from the Compose Up/Down dialog to clean them up.',
-            type: 'warning',
-            showCancelButton: true,
-            confirmButtonText: 'Save Anyway',
-            cancelButtonText: 'Cancel'
-        }, function(confirmed) {
-            if (confirmed) {
-                continueSave();
-            }
-        });
-        return;
-    }
+    var savePromises = [];
 
-    continueSave();
     // Save name if modified
     if (editorModal.modifiedSettings.has('name')) {
         var newName = $('#settings-name').val();
@@ -6018,10 +5913,8 @@ function saveAllChanges(closeAfterSave) {
                         editorModal.modifiedSettings.delete('external-compose-file');
                         editorModal.modifiedSettings.delete('use-default-compose-files');
                         return true;
-                    } else {
-                        // Collect error message from server
-                        if (saveErrors) saveErrors.push(response.message || 'Failed to save stack settings.');
                     }
+                    if (saveErrors) saveErrors.push(response.message || 'Failed to save stack settings.');
                 }
                 return false;
             }).fail(function() {
@@ -6078,6 +5971,147 @@ function saveAllChanges(closeAfterSave) {
     });
 }
 
+// Save all modified changes (files, settings, and labels)
+function saveAllChanges(closeAfterSave) {
+    if (typeof closeAfterSave === 'undefined') {
+        closeAfterSave = false;
+    }
+
+    var savePromises = [];
+    var saveErrors = [];
+    var skippedManualLabels = false;
+    var totalChanges = editorModal.modifiedTabs.size + editorModal.modifiedSettings.size + editorModal.modifiedLabels.size;
+    var pathSensitiveSettingsChanged = hasPathSensitiveSettingsChanges();
+    var pathDependentEdits = hasPathDependentEdits();
+    var project = editorModal.currentProject;
+    var removedServices = [];
+
+    if (totalChanges === 0) {
+        return;
+    }
+
+    if (project && editorModal.modifiedTabs.has('compose') && isStackRunning(project)) {
+        removedServices = getRemovedComposeServices();
+    }
+
+    function continueSave() {
+        // Track if labels are being modified in Automatic mode (need to offer recreate)
+        var labelsWereModified = editorModal.labelsViewMode === 'basic' && editorModal.modifiedLabels.size > 0;
+
+        // Save modified file tabs (compose, env, and override editor)
+        editorModal.modifiedTabs.forEach(function(tabName) {
+            savePromises.push(saveTab(tabName, saveErrors));
+        });
+
+        // Save settings if modified
+        if (editorModal.modifiedSettings.size > 0) {
+            savePromises.push(saveSettings(saveErrors));
+        }
+
+        // Save labels only in Automatic mode.
+        if (editorModal.modifiedLabels.size > 0) {
+            if (editorModal.labelsViewMode === 'basic') {
+                savePromises.push(saveLabels(saveErrors));
+            } else {
+                skippedManualLabels = true;
+            }
+        }
+
+        $.when.apply($, savePromises).then(function() {
+            var results = Array.prototype.slice.call(arguments);
+            var allSucceeded = results.every(function(result) {
+                return result === true;
+            });
+
+            if (allSucceeded) {
+                if (skippedManualLabels) {
+                    swal({
+                        title: "Partially Saved",
+                        text: "Non-label changes were saved. WebUI label form edits were not saved because Override File Management is set to Manual. Switch to Automatic to save Labels form changes.",
+                        type: "warning"
+                    });
+                    updateTabModifiedState();
+                    updateSaveButtonState();
+                    return;
+                }
+
+                // Check if we should offer to recreate containers
+                if (labelsWereModified) {
+                    promptRecreateContainers(closeAfterSave);
+                } else {
+                    var saveProject = editorModal.currentProject;
+                    if (closeAfterSave) {
+                        doCloseEditorModal();
+                    }
+                    swal({
+                        title: "Saved!",
+                        text: "All changes have been saved.",
+                        type: "success",
+                        timer: 1500,
+                        showConfirmButton: false
+                    });
+                    setTimeout(function() {
+                        if (saveProject) {
+                            refreshStackByProject(saveProject);
+                        }
+                    }, 1600);
+                }
+            } else {
+                var filteredErrors = saveErrors.filter(function(message) {
+                    return message !== '__STALE_PATH__';
+                });
+                if (filteredErrors.length === 0 && saveErrors.indexOf('__STALE_PATH__') !== -1) {
+                    return;
+                }
+                swal({
+                    title: 'Save Failed',
+                    text: filteredErrors.join('\n') || 'An unknown error occurred while saving.',
+                    type: 'error'
+                });
+            }
+        });
+    }
+
+    if (pathSensitiveSettingsChanged && pathDependentEdits) {
+        swal({
+            title: 'Reload Required',
+            text: 'Compose path or discovery settings changed. Save settings and reload the editor before saving compose, .env, override, or label edits.',
+            type: 'warning',
+            showCancelButton: true,
+            confirmButtonText: 'Save Settings Only',
+            cancelButtonText: 'Cancel'
+        }, function(confirmed) {
+            if (confirmed) {
+                saveSettingsWithOptionalReload(closeAfterSave);
+            }
+        });
+        return;
+    }
+
+    if (pathSensitiveSettingsChanged) {
+        saveSettingsWithOptionalReload(closeAfterSave);
+        return;
+    }
+
+    if (removedServices.length > 0) {
+        swal({
+            title: 'Running Stack Changed',
+            text: 'This stack is running and the compose file no longer defines: ' + removedServices.join(', ') + '. Saving now can leave orphaned containers behind. Stop the stack first, or use Remove orphans from the Compose Up/Down dialog to clean them up.',
+            type: 'warning',
+            showCancelButton: true,
+            confirmButtonText: 'Save Anyway',
+            cancelButtonText: 'Cancel'
+        }, function(confirmed) {
+            if (confirmed) {
+                continueSave();
+            }
+        });
+        return;
+    }
+
+    continueSave();
+}
+
 // Save labels to override file
 function saveLabels(saveErrors) {
     var project = editorModal.currentProject;
diff --git a/tests/unit/ComposeManagerMainSourceTest.php b/tests/unit/ComposeManagerMainSourceTest.php
index b638d578..1e113bee 100644
--- a/tests/unit/ComposeManagerMainSourceTest.php
+++ b/tests/unit/ComposeManagerMainSourceTest.php
@@ -175,15 +175,15 @@ public function testComposeActionDialogOffersRemoveOrphansToggle(): void
         $source = $this->getJsSource();
         $this->assertStringContainsString('showRemoveOrphans: true', $source);
         $this->assertStringContainsString('swal-remove-orphans-checkbox', $source);
-        $this->assertStringContainsString('removeOrphans = $(\'#swal-remove-orphans-checkbox\').is(\':checked\')', $source);
+        $this->assertStringContainsString('cfg.confirmedFn(path, {', $source);
         $this->assertStringContainsString('removeOrphans: removeOrphans', $source);
     }
 
     public function testBulkActionsOfferRemoveOrphansToggle(): void
     {
         $source = $this->getJsSource();
-        $this->assertStringContainsString('function executeStartAllStacks(stacks, background, suppressBackgroundNotification = false, removeOrphans = false)', $source);
-        $this->assertStringContainsString('function executeStopAllStacks(stacks, background, suppressBackgroundNotification = false, removeOrphans = false)', $source);
+        $this->assertStringContainsString('function executeStartAllStacks(opts)', $source);
+        $this->assertStringContainsString('function executeStopAllStacks(opts)', $source);
         $this->assertStringContainsString('swal-remove-orphans-startall', $source);
         $this->assertStringContainsString('swal-remove-orphans-stopall', $source);
         $this->assertStringContainsString("removeOrphans: removeOrphans ? 1 : 0", $source);
@@ -192,7 +192,8 @@ public function testBulkActionsOfferRemoveOrphansToggle(): void
     public function testBackendPassesRemoveOrphansThroughComposeCommand(): void
     {
         $source = $this->getHelpersSource();
-        $this->assertStringContainsString('$removeOrphans = !empty($_POST[\'removeOrphans\'])', $source);
+        $this->assertStringContainsString('function echoComposeCommand($action, array $options = [])', $source);
+        $this->assertStringContainsString('$removeOrphans = !empty($options[\'removeOrphans\']);', $source);
         $this->assertStringContainsString('removeOrphans', $source);
         $this->assertStringContainsString('--remove-orphans', $source);
     }
@@ -201,8 +202,10 @@ public function testComposeUtilRoutesRemoveOrphansFlag(): void
     {
         $source = $this->getComposeUtilSource();
         $this->assertStringContainsString("\$removeOrphans = isset(\$_POST['removeOrphans']) && \$_POST['removeOrphans'] == '1';", $source);
-        $this->assertStringContainsString("echoComposeCommand('up', false, \$background, \$removeOrphans);", $source);
-        $this->assertStringContainsString("echoComposeCommandMultiple('up', \$paths, \$background, \$removeOrphans);", $source);
+        $this->assertStringContainsString("echoComposeCommand('up', [", $source);
+        $this->assertStringContainsString("'removeOrphans' => \$removeOrphans", $source);
+        $this->assertStringContainsString("echoComposeCommandMultiple('up', [", $source);
+        $this->assertStringContainsString("'paths' => \$paths", $source);
     }
 
     public function testSettingsIncludeRemoveOrphansDefaultToggle(): void

From 4dcccd0c57dd13e023f1c2efd42ac7930156e522 Mon Sep 17 00:00:00 2001
From: mstrhakr <mstrhakr@gmail.com>
Date: Sun, 14 Jun 2026 13:15:37 -0400
Subject: [PATCH 38/67] fix: delay stack refresh after prompt to ensure proper
 UI feedback

---
 .../javascript/composeManagerMain.js          | 24 ++++++++++---------
 1 file changed, 13 insertions(+), 11 deletions(-)

diff --git a/source/compose.manager/javascript/composeManagerMain.js b/source/compose.manager/javascript/composeManagerMain.js
index bbbf5881..1da7c6ab 100644
--- a/source/compose.manager/javascript/composeManagerMain.js
+++ b/source/compose.manager/javascript/composeManagerMain.js
@@ -3337,9 +3337,9 @@ function promptRecreateContainers(closeAfterSave) {
             title: "Saved!",
             text: "All changes have been saved.",
             type: "success",
-            timer: 1500,
             showConfirmButton: false
         });
+        setTimeout(function() { swal.close(); }, 1500);
         return;
     }
 
@@ -3367,11 +3367,12 @@ function promptRecreateContainers(closeAfterSave) {
             title: "Saved!",
             text: "Container labels were saved. Recreate or restart containers to apply the changes.",
             type: "info",
-            timer: 2000,
             showConfirmButton: false
-        }, function() {
-            refreshStackByProject(project);
         });
+        setTimeout(function() {
+            swal.close();
+            refreshStackByProject(project);
+        }, 2000);
         return;
     }
 
@@ -3402,11 +3403,12 @@ function promptRecreateContainers(closeAfterSave) {
                 title: "Saved!",
                 text: "Changes saved. Remember to restart or recreate containers to apply label changes.",
                 type: "info",
-                timer: 2000,
-                showConfirmButton: false
-            }, function() {
-                refreshStackByProject(project);
-            });
+showConfirmButton: false
+        });
+        setTimeout(function() {
+            swal.close();
+            refreshStackByProject(project);
+        }, 2000);
         }
     });
 }
@@ -6047,14 +6049,14 @@ function saveAllChanges(closeAfterSave) {
                         title: "Saved!",
                         text: "All changes have been saved.",
                         type: "success",
-                        timer: 1500,
                         showConfirmButton: false
                     });
                     setTimeout(function() {
+                        swal.close();
                         if (saveProject) {
                             refreshStackByProject(saveProject);
                         }
-                    }, 1600);
+                    }, 1500);
                 }
             } else {
                 var filteredErrors = saveErrors.filter(function(message) {

From 1a09e52cd862b11d548785a7a4aab37009d9d053 Mon Sep 17 00:00:00 2001
From: mstrhakr <mstrhakr@gmail.com>
Date: Sun, 14 Jun 2026 13:31:07 -0400
Subject: [PATCH 39/67] feat(tests): add tests for pruning auto-managed and
 legacy labels only orphans

---
 source/compose.manager/include/Util.php | 111 +++++++++++++++++++++++-
 tests/unit/UtilTest.php                 |  33 +++++++
 2 files changed, 143 insertions(+), 1 deletion(-)

diff --git a/source/compose.manager/include/Util.php b/source/compose.manager/include/Util.php
index 1209f676..985c7819 100644
--- a/source/compose.manager/include/Util.php
+++ b/source/compose.manager/include/Util.php
@@ -580,8 +580,113 @@ function pruneOverrideContentServices(string $overrideContent, array $validServi
     // Safety check: if ALL services in the override would be removed, don't prune.
     // This likely indicates a rename scenario rather than genuine orphans.
     // Wiping to "services: {}" would destroy user data (icons, webui labels, etc).
+    // Exception: if every orphaned service block is clearly auto-managed by this
+    // plugin, it is safe to remove all of them.
     if (count($removedRanges) === count($serviceRanges)) {
-        return ['content' => $overrideContent, 'removed' => [], 'changed' => false];
+        $allAutoManaged = false;
+        $singleServiceOrphan = count($removedRanges) === 1;
+
+        if (function_exists('yaml_parse')) {
+            $parsedOverride = @yaml_parse($overrideContent);
+            if (is_array($parsedOverride) && isset($parsedOverride['services']) && is_array($parsedOverride['services'])) {
+                $allowedLabelKeys = [
+                    'net.unraid.docker.managed' => true,
+                    'net.unraid.docker.icon' => true,
+                    'net.unraid.docker.webui' => true,
+                    'net.unraid.docker.shell' => true,
+                ];
+
+                $allAutoManaged = true;
+                foreach ($removedRanges as $range) {
+                    $serviceDef = $parsedOverride['services'][$range['name']] ?? null;
+                    if (!is_array($serviceDef)) {
+                        $allAutoManaged = false;
+                        break;
+                    }
+
+                    $serviceKeys = array_keys($serviceDef);
+                    if ($serviceKeys !== ['labels']) {
+                        $allAutoManaged = false;
+                        break;
+                    }
+
+                    $labels = $serviceDef['labels'] ?? null;
+                    if (!is_array($labels) || empty($labels)) {
+                        $allAutoManaged = false;
+                        break;
+                    }
+
+                    $hasManagedLabel = array_key_exists('net.unraid.docker.managed', $labels);
+                    if (!$hasManagedLabel && !$singleServiceOrphan) {
+                        $allAutoManaged = false;
+                        break;
+                    }
+
+                    foreach (array_keys($labels) as $labelKey) {
+                        if (!isset($allowedLabelKeys[(string) $labelKey])) {
+                            $allAutoManaged = false;
+                            break 2;
+                        }
+                    }
+                }
+            }
+        }
+
+        if (!$allAutoManaged) {
+            $allAutoManaged = true;
+            foreach ($removedRanges as $range) {
+                $serviceBlockLines = array_slice($lines, $range['start'], $range['end'] - $range['start'] + 1);
+                $serviceBlock = implode("\n", $serviceBlockLines);
+
+                if (strpos($serviceBlock, 'net.unraid.docker.managed') !== false) {
+                    continue;
+                }
+
+                if (!$singleServiceOrphan) {
+                    $allAutoManaged = false;
+                    break;
+                }
+
+                $hasOnlyAllowedLabels = false;
+                $sawLabelsSection = false;
+                foreach ($serviceBlockLines as $offset => $blockLine) {
+                    if ($offset === 0) {
+                        continue;
+                    }
+
+                    if (trim($blockLine) === '' || preg_match('/^\s*#/', $blockLine)) {
+                        continue;
+                    }
+
+                    if (preg_match('/^\s{4}labels\s*:\s*(?:#.*)?$/', $blockLine)) {
+                        $sawLabelsSection = true;
+                        $hasOnlyAllowedLabels = true;
+                        continue;
+                    }
+
+                    if (preg_match('/^\s{6}(net\.unraid\.docker\.(?:icon|webui|shell))\s*:\s*/', $blockLine)) {
+                        if (!$sawLabelsSection) {
+                            $hasOnlyAllowedLabels = false;
+                            break;
+                        }
+                        $hasOnlyAllowedLabels = true;
+                        continue;
+                    }
+
+                    $hasOnlyAllowedLabels = false;
+                    break;
+                }
+
+                if (!$hasOnlyAllowedLabels) {
+                    $allAutoManaged = false;
+                    break;
+                }
+            }
+        }
+
+        if (!$allAutoManaged) {
+            return ['content' => $overrideContent, 'removed' => [], 'changed' => false];
+        }
     }
 
     // Only prune specific orphaned services while preserving others
@@ -594,6 +699,10 @@ function pruneOverrideContentServices(string $overrideContent, array $validServi
 
     $newLines = [];
     foreach ($lines as $lineIndex => $line) {
+        if (count($removedRanges) === count($serviceRanges) && $lineIndex === $servicesStart) {
+            $newLines[] = 'services: {}';
+            continue;
+        }
         if (!isset($removeByLine[$lineIndex])) {
             $newLines[] = $line;
         }
diff --git a/tests/unit/UtilTest.php b/tests/unit/UtilTest.php
index e2f60b95..5a131b08 100644
--- a/tests/unit/UtilTest.php
+++ b/tests/unit/UtilTest.php
@@ -317,6 +317,39 @@ public function testPruneOverrideContentServicesPreservesContentWhenAllWouldBeOr
         $this->assertEquals($override, $result['content']);
     }
 
+    public function testPruneOverrideContentServicesRemovesAllAutoManagedOrphans(): void
+    {
+        $override = "services:\n" .
+            "  old-service:\n" .
+            "    labels:\n" .
+            "      net.unraid.docker.managed: \"compose-manager\"\n" .
+            "      net.unraid.docker.webui: \"https://example.com\"\n";
+
+        $result = pruneOverrideContentServices($override, ['new-service']);
+
+        $this->assertTrue($result['changed']);
+        $this->assertEquals(['old-service'], $result['removed']);
+        $this->assertStringContainsString("services: {}", $result['content']);
+        $this->assertStringNotContainsString("old-service", $result['content']);
+    }
+
+    public function testPruneOverrideContentServicesRemovesLegacyLabelsOnlyOrphans(): void
+    {
+        $override = "services:\n" .
+            "  old-service:\n" .
+            "    labels:\n" .
+            "      net.unraid.docker.icon: \"icon.png\"\n" .
+            "      net.unraid.docker.webui: \"https://example.com\"\n" .
+            "      net.unraid.docker.shell: \"/bin/bash\"\n";
+
+        $result = pruneOverrideContentServices($override, ['new-service']);
+
+        $this->assertTrue($result['changed']);
+        $this->assertEquals(['old-service'], $result['removed']);
+        $this->assertStringContainsString("services: {}", $result['content']);
+        $this->assertStringNotContainsString("old-service", $result['content']);
+    }
+
     public function testPruneOverrideContentServicesPreservesOnMultipleRenames(): void
     {
         // Simulates renaming multiple services - none match anymore

From 4974c0bdeed2cb3c73fcfe716f964d18bf675160 Mon Sep 17 00:00:00 2001
From: mstrhakr <mstrhakr@gmail.com>
Date: Sun, 14 Jun 2026 13:33:49 -0400
Subject: [PATCH 40/67] fix: add support for removeOrphans flag in
 performComposeAction

---
 source/compose.manager/javascript/composeManagerMain.js | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/source/compose.manager/javascript/composeManagerMain.js b/source/compose.manager/javascript/composeManagerMain.js
index 1da7c6ab..0e84b63d 100644
--- a/source/compose.manager/javascript/composeManagerMain.js
+++ b/source/compose.manager/javascript/composeManagerMain.js
@@ -3110,6 +3110,9 @@ function performComposeAction(opts) {
     }
 
     payload.background = background ? 1 : 0;
+    if (Object.prototype.hasOwnProperty.call(payload, 'removeOrphans')) {
+        payload.removeOrphans = payload.removeOrphans ? 1 : 0;
+    }
 
     $.post(requestUrl, payload, function(data) {
         var parsed = tryParseJson(data);

From c3f68e713b3530aba0329afa1fa1ac040ea0c6d0 Mon Sep 17 00:00:00 2001
From: mstrhakr <mstrhakr@gmail.com>
Date: Sun, 14 Jun 2026 14:08:07 -0400
Subject: [PATCH 41/67] fix: add support for --remove-orphans flag in compose
 command

---
 source/compose.manager/scripts/compose.sh | 10 +++++++---
 1 file changed, 7 insertions(+), 3 deletions(-)

diff --git a/source/compose.manager/scripts/compose.sh b/source/compose.manager/scripts/compose.sh
index 0b0fefb9..0dbc6cc5 100755
--- a/source/compose.manager/scripts/compose.sh
+++ b/source/compose.manager/scripts/compose.sh
@@ -12,7 +12,7 @@ LOCK_TIMEOUT=${COMPOSE_LOCK_TIMEOUT:-30}
 LOCK_DIR="/var/run/compose.manager"
 
 SHORT=e:,c:,f:,p:,d:,o:,g:,s:,w:
-LONG=env,command:,file:,project_name:,project_dir:,override:,profile:,debug,recreate,stack-path:,workdir:
+LONG=env,command:,file:,project_name:,project_dir:,override:,profile:,debug,recreate,remove-orphans,stack-path:,workdir:
 OPTS=$(getopt -a -n compose --options $SHORT --longoptions $LONG -- "$@")
 
 eval set -- "$OPTS"
@@ -163,6 +163,10 @@ do
       cmd_args+=("--force-recreate")
       shift;
       ;;
+    --remove-orphans )
+      cmd_args+=("--remove-orphans")
+      shift;
+      ;;
     -s | --stack-path )
       stack_path="$2"
       shift 2
@@ -236,10 +240,10 @@ case $command in
 
   down)
     if [ "$debug" = true ]; then
-      log_msg "DEBUG" "${compose_base[*]} -p $name down"
+      log_msg "DEBUG" "${compose_base[*]} -p $name down ${cmd_args[*]}"
     fi
     
-    "${compose_base[@]}" -p "$name" down 2>&1
+    "${compose_base[@]}" -p "$name" down "${cmd_args[@]}" 2>&1
     exit_code=$?
     
     if [ $exit_code -eq 0 ]; then

From 5bd1628b44a25fb85f99b3ca92deefbc3f680394 Mon Sep 17 00:00:00 2001
From: mstrhakr <mstrhakr@gmail.com>
Date: Sun, 14 Jun 2026 14:40:04 -0400
Subject: [PATCH 42/67] fix: enhance logging for stack management and settings
 handling

---
 .../compose.manager/include/ComposeList.php   |  7 +++
 source/compose.manager/include/Util.php       | 32 ++++++++++++
 .../javascript/composeManagerMain.js          | 51 ++++++++++++-------
 3 files changed, 72 insertions(+), 18 deletions(-)

diff --git a/source/compose.manager/include/ComposeList.php b/source/compose.manager/include/ComposeList.php
index 03aabfff..36a5bbfc 100755
--- a/source/compose.manager/include/ComposeList.php
+++ b/source/compose.manager/include/ComposeList.php
@@ -220,6 +220,13 @@
     $o .= "<span class='inner'><span class='appname'>$projectNameHtml</span><br>";
     $o .= "<i class='fa fa-$shape $status $color compose-status-icon' data-status='$status'></i><span class='state'>$statusLabel</span>";
     if ($hasInvalidIndirect) {
+        composeLogger('Rendering invalid indirect warning in stack list', [
+            'project' => $stackInfo->projectFolder,
+            'projectPath' => $stackInfo->path,
+            'invalidIndirectPath' => $invalidIndirectPath,
+            'isIndirect' => $stackInfo->isIndirect,
+            'composeSource' => $stackInfo->composeSource,
+        ], 'user', 'debug', 'stack-list');
         $o .= " <i class='fa fa-warning orange-text' title='External compose path is invalid or unavailable: $invalidIndirectPathHtml'></i>";
     }
     $o .= "<div class='cm-advanced compose-text-muted' style='margin-top:4px;font-size:0.85em;'>";
diff --git a/source/compose.manager/include/Util.php b/source/compose.manager/include/Util.php
index 985c7819..0a7e2006 100644
--- a/source/compose.manager/include/Util.php
+++ b/source/compose.manager/include/Util.php
@@ -1536,6 +1536,15 @@ private function __construct(string $composeRoot, string $projectFolder)
             if ($this->invalidIndirectPath !== null) {
                 // Stack has a broken indirect reference — allow degraded construction
                 // so the user can fix it in the Settings editor.
+                composeLogger('Preparing degraded stack load due to invalid indirect path', [
+                    'project' => $this->projectFolder,
+                    'projectPath' => $this->path,
+                    'indirectMode' => $this->indirectMode,
+                    'indirectPath' => $this->indirectPath,
+                    'invalidIndirectPath' => $this->invalidIndirectPath,
+                    'composeSource' => $this->composeSource,
+                    'composeFilePath' => $this->composeFilePath,
+                ], 'user', 'debug', 'stack');
                 composeLogger("Stack $this->projectFolder has an invalid indirect path; loading in degraded mode", null, 'user', 'warning', 'stack');
                 $this->overrideInfo = OverrideInfo::fromStackInfo($this);
                 return;
@@ -1625,6 +1634,16 @@ private function isIndirect(): bool
                 || Path::hasTraversal($indirectPath)
             ) {
                 // Path is structurally invalid — ignore it and keep stack local without mutating files.
+                composeLogger('Invalid indirect metadata rejected during structural validation', [
+                    'project' => $this->projectFolder,
+                    'indirectFile' => $this->path . '/indirect',
+                    'rawIndirectPath' => $indirectPath,
+                    'isEmpty' => ($indirectPath === ''),
+                    'hasNewline' => Path::hasNewline($indirectPath),
+                    'hasSeparator' => Path::hasSeparator($indirectPath),
+                    'hasWindowsStylePath' => Path::hasWindowsStylePath($indirectPath),
+                    'hasTraversal' => Path::hasTraversal($indirectPath),
+                ], 'user', 'debug', 'stack');
                 composeLogger("Ignoring structurally invalid indirect path at $this->path/indirect: " . sanitizeLogText($indirectPath), null, 'user', 'warning', 'stack');
                 return false;
             }
@@ -1712,6 +1731,9 @@ public static function sanitizeProjectString(string $rawProjectString): string
         $sanitizedProjectString = compose_manager_sanitize_project_name($rawProjectString, $wasEmpty);
 
         if ($wasEmpty) {
+            composeLogger('Project name sanitization produced empty output; fallback name will be used', [
+                'input' => $rawProjectString,
+            ], 'user', 'debug', 'stack');
             composeLogger("Sanitized project string is empty after processing; defaulting to 'compose'", ['input' => $rawProjectString], 'user', 'warning', 'stack');
         }
 
@@ -1733,6 +1755,11 @@ public function getDisplayName(): string
             // If no display name is set, initialize it from the project folder name.
             $displayName = $this->projectFolder;
             $this->writeMetadata('name', $displayName);
+            composeLogger('Missing display name metadata detected; initializing from project folder', [
+                'project' => $this->projectFolder,
+                'displayName' => $displayName,
+                'metadataFile' => $this->path . '/name',
+            ], 'user', 'debug', 'stack');
             composeLogger("Initialized missing display name from project folder: '$displayName'", ['project' => $this->projectFolder, 'displayName' => $displayName], 'user', 'warning', 'stack');
         }
         $this->displayName = $displayName;
@@ -1813,6 +1840,11 @@ private function getExplicitEnvFilePath(): ?string
             return realpath($rawEnvPath) ?: $rawEnvPath;
         }
 
+        composeLogger('Explicit envpath is set but not resolvable to a file; falling back to default env resolution', [
+            'project' => $this->projectFolder,
+            'envpath' => $rawEnvPath,
+            'composeSource' => $this->composeSource,
+        ], 'user', 'debug', 'stack');
         composeLogger("Ignoring invalid envpath for stack $this->projectFolder: file not found", ['envpath' => $rawEnvPath], 'user', 'warning', 'stack');
         return null;
     }
diff --git a/source/compose.manager/javascript/composeManagerMain.js b/source/compose.manager/javascript/composeManagerMain.js
index 0e84b63d..43170d31 100644
--- a/source/compose.manager/javascript/composeManagerMain.js
+++ b/source/compose.manager/javascript/composeManagerMain.js
@@ -1336,13 +1336,13 @@ function checkPendingRechecks(callback) {
                         hadPendingRechecks = true;
                         composeLogger('checkPendingRechecks:found', {
                             pendingStacks: pendingStacks
-                        }, 'user', 'info', 'update-check');
+                        }, 'user', 'debug', 'update-check');
 
                         // Check each pending stack
                         pendingStacks.forEach(function(stackName) {
                             composeLogger('Running recheck for recently updated stack', {
                                 stackName: stackName
-                            }, 'user', 'info', 'update-check');
+                            }, 'user', 'debug', 'update-check');
                             checkStackUpdates(stackName);
                         });
                     }
@@ -1376,11 +1376,11 @@ function checkAutoUpdateIfNeeded(stacks) {
     // If we have a lastChecked time and it's within the interval, don't check
     if (latestCheck > 0 && (now - latestCheck) < intervalSeconds) {
         needsCheck = false;
-        composeLogger('Last check was ' + Math.round((now - latestCheck) / 60) + ' minutes ago, interval is ' + Math.round(intervalSeconds / 60) + ' minutes. Skipping.', null, 'user', 'info', 'update-check');
+        composeLogger('Last check was ' + Math.round((now - latestCheck) / 60) + ' minutes ago, interval is ' + Math.round(intervalSeconds / 60) + ' minutes. Skipping.', null, 'user', 'debug', 'update-check');
     }
 
     if (needsCheck) {
-        composeLogger('Running automatic update check...', null, 'user', 'info', 'update-check');
+        composeLogger('Running automatic update check...', null, 'user', 'debug', 'update-check');
         checkAllUpdates();
     }
 }
@@ -1712,7 +1712,7 @@ function updateStackUpdateUI(stackName, stackInfo) {
                 stackName: stackName,
                 loading: !!stackDetailsLoading[stackId],
                 justRendered: !!stackDetailsJustRendered[stackId]
-            }, 'user', 'info', 'update-check');
+            }, 'user', 'debug', 'update-check');
         } else {
             loadStackContainerDetails(stackId, stackName);
         }
@@ -2003,12 +2003,12 @@ $(function() {
         composeListLoadStartedAt = Date.now();
         composeLoadlist().then(function(loadMode) {
             composeListReady = true;
-            composeLogger('compose list finished loading', {
+            composeLogger('compose list ready', {
                 rows: $('#compose_stacks tr.compose-sortable').length,
                 elapsedMs: Date.now() - composeListLoadStartedAt,
                 mode: loadMode || 'standard',
                 composeListReady: true
-            }, 'user', 'debug', 'dockerload');
+            }, 'user', 'info', 'dockerload');
 
             // Start the dockerload socket now that the DOM has rows with data-ctids.
             if (typeof window.composeDockerLoadToggle === 'function') {
@@ -2065,7 +2065,7 @@ $(function() {
                         }
                     };
                     window.loadlist._composeTabHooked = true;
-                    composeLogger('hooked loadlist() for cross-widget sync, tabbed=' + isTabbed, null, 'user', 'info', 'hookLoadlist');
+                    composeLogger('hooked loadlist() for cross-widget sync, tabbed=' + isTabbed, null, 'user', 'debug', 'hookLoadlist');
                     return true;
                 }
                 return false;
@@ -2113,7 +2113,7 @@ $(function() {
             // AJAX navigation preserves window globals but old closures/sockets
             // become stale).  Always create a fresh subscriber.
             if (window._composeDockerLoad) {
-                composeLogger('tearing down previous subscriber', null, 'user', 'info', 'dockerload');
+                composeLogger('tearing down previous subscriber', null, 'user', 'debug', 'dockerload');
                 try {
                     window._composeDockerLoad.stop();
                 } catch (e) {}
@@ -2129,7 +2129,7 @@ $(function() {
             }
             $(document).off('composeListRefreshed.dockerload');
 
-            composeLogger('initializing subscriber, composeListReady=' + composeListReady, null, 'user', 'info', 'dockerload');
+            composeLogger('initializing subscriber, composeListReady=' + composeListReady, null, 'user', 'debug', 'dockerload');
 
             var composeDockerLoad = new NchanSubscriber('/sub/dockerload', {
                 subscriber: 'websocket',
@@ -2244,11 +2244,11 @@ $(function() {
 
             window.composeDockerLoadToggle = function(enable) {
                 if (enable && !composeDockerLoadRunning) {
-                    composeLogger('starting WebSocket', null, 'user', 'info', 'dockerload');
+                    composeLogger('starting WebSocket', null, 'user', 'debug', 'dockerload');
                     composeDockerLoad.start();
                     composeDockerLoadRunning = true;
                 } else if (!enable && composeDockerLoadRunning) {
-                    composeLogger('stopping WebSocket', null, 'user', 'info', 'dockerload');
+                    composeLogger('stopping WebSocket', null, 'user', 'debug', 'dockerload');
                     composeDockerLoad.stop();
                     composeDockerLoadRunning = false;
                 }
@@ -2449,7 +2449,7 @@ $(function() {
                 composeLogger('auto-starting socket', {
                     'listReady': composeListReady,
                     'advanced': isComposeAdvancedMode()
-                }, 'user', 'info', 'dockerload');
+                }, 'user', 'debug', 'dockerload');
                 composeDockerLoad.start();
                 composeDockerLoadRunning = true;
             } else {
@@ -2469,7 +2469,7 @@ $(function() {
             var composeDockerLoadInitTimer = setInterval(function() {
                 composeDockerLoadInitAttempts++;
                 if (initComposeDockerLoadSubscriber()) {
-                    composeLogger('subscriber initialized on retry #' + composeDockerLoadInitAttempts, null, 'user', 'info', 'dockerload');
+                    composeLogger('subscriber initialized on retry #' + composeDockerLoadInitAttempts, null, 'user', 'debug', 'dockerload');
                     clearInterval(composeDockerLoadInitTimer);
                 } else if (composeDockerLoadInitAttempts >= 40) {
                     composeLogger('subscriber init gave up after ' + composeDockerLoadInitAttempts + ' attempts', null, 'user', 'warn', 'dockerload');
@@ -3443,7 +3443,7 @@ function processPendingUpdateChecks() {
                 deferredStacks.push(stackName);
                 composeLogger('Deferring pending update check while action is in progress', {
                     stack: stackName
-                }, 'user', 'info', 'update-check');
+                }, 'user', 'debug', 'update-check');
             } else {
                 checkStackUpdates(stackName);
             }
@@ -4949,6 +4949,13 @@ function loadSettingsData(project, projectName) {
                 var invalidIndirectPath = response.invalidIndirectPath || '';
                 var indirectMode = response.indirectMode || '';
                 if (!externalComposePath && !externalComposeFilePath && invalidIndirectPath) {
+                    composeLogger('settings-invalid-indirect-warning-show', {
+                        project: project,
+                        invalidIndirectPath: invalidIndirectPath,
+                        indirectMode: indirectMode,
+                        externalComposePath: externalComposePath,
+                        externalComposeFilePath: externalComposeFilePath
+                    }, 'user', 'debug', 'stack-settings');
                     // Pre-populate with the broken path so the user can fix it
                     if (indirectMode === 'file') {
                         $('#settings-external-compose-path').val('');
@@ -4966,6 +4973,14 @@ function loadSettingsData(project, projectName) {
                     $('#settings-invalid-indirect-warning').show();
                     $('#settings-external-compose-info').hide();
                 } else {
+                    if ($('#settings-invalid-indirect-warning').is(':visible')) {
+                        composeLogger('settings-invalid-indirect-warning-hide', {
+                            project: project,
+                            invalidIndirectPath: invalidIndirectPath,
+                            externalComposePath: externalComposePath,
+                            externalComposeFilePath: externalComposeFilePath
+                        }, 'user', 'debug', 'stack-settings');
+                    }
                     $('#settings-external-compose-path').val(externalComposePath);
                     $('#settings-external-compose-file').val(externalComposeFilePath);
                     editorModal.originalSettings['external-compose-path'] = externalComposePath;
@@ -6398,7 +6413,7 @@ function loadStackContainerDetails(stackId, project) {
                 stackId: stackId,
                 project: project,
                 containers: containers.length
-            }, 'user', 'info', 'container-details');
+            }, 'user', 'debug', 'container-details');
             renderContainerDetails(stackId, containers, project);
             $('#details-row-' + stackId).stop(true, true).slideDown(200, finishLoad);
             return true;
@@ -6435,7 +6450,7 @@ function loadStackContainerDetails(stackId, project) {
     composeLogger('start', {
         stackId: stackId,
         project: project
-    }, 'user', 'info', 'container-details');
+    }, 'user', 'debug', 'container-details');
 
     // Show loading state
     $container.html('<div class="stack-details-loading"><i class="fa fa-spinner fa-spin"></i> Loading container details...</div>');
@@ -6722,7 +6737,7 @@ function renderContainerDetails(stackId, containers, project) {
             composeLogger('just-rendered', {
                 stackId: stackId,
                 project: project
-            }, 'user', 'info', 'container-details');
+            }, 'user', 'debug', 'container-details');
             // Clear the flag after a short window
             setTimeout(function() {
                 try {

From 20e830310b2cb18b0f2d195fb63f6b166fdd75fd Mon Sep 17 00:00:00 2001
From: "github-actions[bot]" <github-actions[bot]@users.noreply.github.com>
Date: Sun, 14 Jun 2026 18:51:45 +0000
Subject: [PATCH 43/67] chore: update changelog for v2026.06.14.1451 [skip ci]

---
 compose.manager.plg | 14 ++++++++++----
 1 file changed, 10 insertions(+), 4 deletions(-)

diff --git a/compose.manager.plg b/compose.manager.plg
index d8c632e0..c3100998 100644
--- a/compose.manager.plg
+++ b/compose.manager.plg
@@ -36,11 +36,17 @@
 >
 
 <CHANGES>
-###2026.06.11.1526
-- Bug Fixes (deploy.sh, test.sh): update file permissions to make scripts executable
-- Bug Fixes (Exec.php): update dockerVersionsInstalled check to verify plugin directory existence and cleanup tests
+###2026.06.14.1451
+- Features (tests): add tests for pruning auto-managed and legacy labels only orphans
+- Features: add 'Remove Orphans by Default' option and integrate into compose actions
+- Bug Fixes: enhance logging for stack management and settings handling
+- Bug Fixes: add support for --remove-orphans flag in compose command
+- Bug Fixes: add support for removeOrphans flag in performComposeAction
+- Bug Fixes: delay stack refresh after prompt to ensure proper UI feedback
+- Bug Fixes (cache): add endpoint to retrieve persistent container cache and update loading method
+- Refactoring: update echoComposeCommand and echoComposeCommandMultiple to use options array
 - [PR #120](https://github.com/mstrhakr/compose_plugin/pull/120)
-- [beta release diff](https://github.com/mstrhakr/compose_plugin/compare/v2026.06.06...v2026.06.11.1526)
+- [beta release diff](https://github.com/mstrhakr/compose_plugin/compare/v2026.06.06...v2026.06.14.1451)
 </CHANGES>
 
 <!-- The 'pre-install' script. -->

From b77c4868ac0cff62e3113383342e1d5596da4b97 Mon Sep 17 00:00:00 2001
From: "github-actions[bot]" <github-actions[bot]@users.noreply.github.com>
Date: Sun, 14 Jun 2026 18:52:23 +0000
Subject: [PATCH 44/67] Release v2026.06.14.1451 [skip ci]

---
 compose.manager.plg | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/compose.manager.plg b/compose.manager.plg
index c3100998..54584caa 100644
--- a/compose.manager.plg
+++ b/compose.manager.plg
@@ -2,11 +2,11 @@
 <!DOCTYPE PLUGIN [
 <!ENTITY name "compose.manager">
 <!ENTITY author "mstrhakr">
-<!ENTITY version     "2026.06.11.1526">
+<!ENTITY version     "2026.06.14.1451">
 <!ENTITY launch "Settings/&name;.settings">
 <!ENTITY packageVER "&version;">
-<!ENTITY packageMD5  "3bc7ddef838f2667c13246fdadc48d65">
-<!ENTITY pkgBUILD    "1526">
+<!ENTITY packageMD5  "364a41b36038a9dde872a0043b8fb602">
+<!ENTITY pkgBUILD    "1451">
 <!ENTITY packageName "&name;-&packageVER;-noarch-&pkgBUILD;">
 <!ENTITY packagefile "&packageName;.txz">
 <!ENTITY github "mstrhakr/compose_plugin">

From dd8fa0e6d76092d5e768c6a7ffc36bdb807b8568 Mon Sep 17 00:00:00 2001
From: "github-actions[bot]" <github-actions[bot]@users.noreply.github.com>
Date: Sun, 14 Jun 2026 19:30:12 +0000
Subject: [PATCH 45/67] chore: update changelog for v2026.06.14.1530 [skip ci]

---
 compose.manager.plg | 14 ++++----------
 1 file changed, 4 insertions(+), 10 deletions(-)

diff --git a/compose.manager.plg b/compose.manager.plg
index 54584caa..8a9b8a71 100644
--- a/compose.manager.plg
+++ b/compose.manager.plg
@@ -36,17 +36,11 @@
 >
 
 <CHANGES>
-###2026.06.14.1451
-- Features (tests): add tests for pruning auto-managed and legacy labels only orphans
-- Features: add 'Remove Orphans by Default' option and integrate into compose actions
-- Bug Fixes: enhance logging for stack management and settings handling
-- Bug Fixes: add support for --remove-orphans flag in compose command
-- Bug Fixes: add support for removeOrphans flag in performComposeAction
-- Bug Fixes: delay stack refresh after prompt to ensure proper UI feedback
-- Bug Fixes (cache): add endpoint to retrieve persistent container cache and update loading method
-- Refactoring: update echoComposeCommand and echoComposeCommandMultiple to use options array
+###2026.06.14.1530
+- Chores: update changelog for v2026.06.06 [skip ci]
+- Add support for additional compose files per stack
 - [PR #120](https://github.com/mstrhakr/compose_plugin/pull/120)
-- [beta release diff](https://github.com/mstrhakr/compose_plugin/compare/v2026.06.06...v2026.06.14.1451)
+- [beta release diff](https://github.com/mstrhakr/compose_plugin/compare/v2026.06.06...v2026.06.14.1530)
 </CHANGES>
 
 <!-- The 'pre-install' script. -->

From 5c69ed6adb8c73d6cd0585212e77a18e784f6f7d Mon Sep 17 00:00:00 2001
From: "github-actions[bot]" <github-actions[bot]@users.noreply.github.com>
Date: Sun, 14 Jun 2026 19:31:02 +0000
Subject: [PATCH 46/67] Release v2026.06.14.1530 [skip ci]

---
 compose.manager.plg | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/compose.manager.plg b/compose.manager.plg
index 8a9b8a71..ad8370c7 100644
--- a/compose.manager.plg
+++ b/compose.manager.plg
@@ -2,11 +2,11 @@
 <!DOCTYPE PLUGIN [
 <!ENTITY name "compose.manager">
 <!ENTITY author "mstrhakr">
-<!ENTITY version     "2026.06.14.1451">
+<!ENTITY version     "2026.06.14.1530">
 <!ENTITY launch "Settings/&name;.settings">
 <!ENTITY packageVER "&version;">
-<!ENTITY packageMD5  "364a41b36038a9dde872a0043b8fb602">
-<!ENTITY pkgBUILD    "1451">
+<!ENTITY packageMD5  "224fb3d2666fd0102fac6d70e9f844ad">
+<!ENTITY pkgBUILD    "1530">
 <!ENTITY packageName "&name;-&packageVER;-noarch-&pkgBUILD;">
 <!ENTITY packagefile "&packageName;.txz">
 <!ENTITY github "mstrhakr/compose_plugin">

From eb6ec74ed06cac02ffaadb46dfd20df64d5bff44 Mon Sep 17 00:00:00 2001
From: "github-actions[bot]" <github-actions[bot]@users.noreply.github.com>
Date: Sun, 14 Jun 2026 19:31:28 +0000
Subject: [PATCH 47/67] chore: update changelog for v2026.06.14.1531 [skip ci]

---
 compose.manager.plg | 7 +++----
 1 file changed, 3 insertions(+), 4 deletions(-)

diff --git a/compose.manager.plg b/compose.manager.plg
index ad8370c7..ff3e7fdd 100644
--- a/compose.manager.plg
+++ b/compose.manager.plg
@@ -36,11 +36,10 @@
 >
 
 <CHANGES>
-###2026.06.14.1530
-- Chores: update changelog for v2026.06.06 [skip ci]
-- Add support for additional compose files per stack
+###2026.06.14.1531
+- Minor updates and improvements
 - [PR #120](https://github.com/mstrhakr/compose_plugin/pull/120)
-- [beta release diff](https://github.com/mstrhakr/compose_plugin/compare/v2026.06.06...v2026.06.14.1530)
+- [beta release diff](https://github.com/mstrhakr/compose_plugin/compare/v2026.06.06...v2026.06.14.1531)
 </CHANGES>
 
 <!-- The 'pre-install' script. -->

From 112212628a2ddfb267b37e2336f264289984ccb3 Mon Sep 17 00:00:00 2001
From: "github-actions[bot]" <github-actions[bot]@users.noreply.github.com>
Date: Sun, 14 Jun 2026 19:32:15 +0000
Subject: [PATCH 48/67] Release v2026.06.14.1531 [skip ci]

---
 compose.manager.plg | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/compose.manager.plg b/compose.manager.plg
index ff3e7fdd..496aca5a 100644
--- a/compose.manager.plg
+++ b/compose.manager.plg
@@ -2,11 +2,11 @@
 <!DOCTYPE PLUGIN [
 <!ENTITY name "compose.manager">
 <!ENTITY author "mstrhakr">
-<!ENTITY version     "2026.06.14.1530">
+<!ENTITY version     "2026.06.14.1531">
 <!ENTITY launch "Settings/&name;.settings">
 <!ENTITY packageVER "&version;">
-<!ENTITY packageMD5  "224fb3d2666fd0102fac6d70e9f844ad">
-<!ENTITY pkgBUILD    "1530">
+<!ENTITY packageMD5  "a527a2caa304009c54cd032899348e85">
+<!ENTITY pkgBUILD    "1531">
 <!ENTITY packageName "&name;-&packageVER;-noarch-&pkgBUILD;">
 <!ENTITY packagefile "&packageName;.txz">
 <!ENTITY github "mstrhakr/compose_plugin">

From 894b6d821fbce9f1dfae979f741497b4bd1e33eb Mon Sep 17 00:00:00 2001
From: mstrhakr <mstrhakr@gmail.com>
Date: Sun, 14 Jun 2026 19:38:23 -0400
Subject: [PATCH 49/67] feat: Add column visibility customization for stack and
 service tables

- Implemented server-side handling for getting and saving column visibility preferences.
- Introduced a new JavaScript module for managing column customization in the UI.
- Updated the main JavaScript file to integrate the new column visibility features.
- Added a new Nchan publisher for real-time container metrics, replacing the deprecated docker_load script.
- Enhanced the UI to support new metrics display including CPU, Memory, Network I/O, and Disk I/O.
- Adjusted CSS styles for better layout and visibility of new columns and modal components.
- Updated unit tests to reflect changes in column structure and ensure new features are covered.
---
 source/compose.manager/Compose.page           |   2 +-
 source/compose.manager/compose.manager.page   |   2 +-
 .../compose.manager/include/ComposeList.php   |  26 +-
 .../include/ComposeManager.php                |  35 ++-
 source/compose.manager/include/Exec.php       |  95 +++++++
 .../javascript/composeColumnCustomizer.js     | 224 ++++++++++++++++
 .../javascript/composeManagerMain.js          | 164 +++++++++---
 source/compose.manager/nchan/compose_info     |  60 +++++
 source/compose.manager/nchan/docker_load      |  39 ---
 source/compose.manager/sheets/ComboButton.css | 244 +++++++++++++++++-
 source/pkg_build.sh                           |   1 +
 tests/unit/ComposeListHtmlTest.php            |   9 +-
 12 files changed, 790 insertions(+), 111 deletions(-)
 create mode 100644 source/compose.manager/javascript/composeColumnCustomizer.js
 create mode 100755 source/compose.manager/nchan/compose_info
 delete mode 100755 source/compose.manager/nchan/docker_load

diff --git a/source/compose.manager/Compose.page b/source/compose.manager/Compose.page
index a37346f8..668a7c66 100644
--- a/source/compose.manager/Compose.page
+++ b/source/compose.manager/Compose.page
@@ -4,7 +4,7 @@ Title="Docker Compose"
 Tag="fa-cubes"
 Code="f1b3"
 Lock="true"
-Nchan="docker_load"
+Nchan="compose_info"
 Cond="$var['fsState'] == 'Started' && exec('/etc/rc.d/rc.docker status | grep -v \"not\"') && exec(\"grep '^SHOW_COMPOSE_IN_HEADER_MENU=' /boot/config/plugins/compose.manager/compose.manager.cfg 2>/dev/null | grep 'true'\")"
 ---
 <link type="text/css" rel="stylesheet" href="<?php autov('/webGui/styles/jquery.switchbutton.css'); ?>">
diff --git a/source/compose.manager/compose.manager.page b/source/compose.manager/compose.manager.page
index 63f3ae14..f3b0c80f 100644
--- a/source/compose.manager/compose.manager.page
+++ b/source/compose.manager/compose.manager.page
@@ -3,7 +3,7 @@ Title="Compose"
 Type="php"
 Menu="Docker:2"
 Lock="true"
-Nchan="docker_load"
+Nchan="compose_info"
 Cond="$var['fsState'] == 'Started' && exec('/etc/rc.d/rc.docker status | grep -v \"not\"') && (!file_exists('/boot/config/plugins/compose.manager/compose.manager.cfg') ? true : exec(\"grep '^SHOW_COMPOSE_IN_HEADER_MENU=' /boot/config/plugins/compose.manager/compose.manager.cfg 2>/dev/null | grep -v 'true'\"))"
 ---
 <?php
diff --git a/source/compose.manager/include/ComposeList.php b/source/compose.manager/include/ComposeList.php
index 36a5bbfc..66d2e4a0 100755
--- a/source/compose.manager/include/ComposeList.php
+++ b/source/compose.manager/include/ComposeList.php
@@ -254,18 +254,20 @@
     $uptimeClass = $isrunning ? 'green-text' : 'grey-text';
     $o .= "<td class='col-uptime'><span class='$uptimeClass'>$uptimeDisplay</span></td>";
 
-    // CPU & Memory column (advanced only) — populated in real-time via dockerload WebSocket
-    $o .= "<td class='cm-advanced col-load compose-load-cell'>";
-    if ($isrunning) {
-        $o .= "<span class='compose-stack-cpu-$id compose-load-cpu'>0%</span>";
-        $o .= "<div class='usage-disk mm'><span id='compose-stack-cpu-$id' style='width:0'></span><span></span></div>";
-        $o .= "<span class='compose-stack-mem-$id compose-text-muted compose-load-mem'>0B / 0B</span>";
-    } else {
-        $o .= "<span class='compose-stack-cpu-$id compose-text-muted compose-load-cpu'>-</span>";
-        $o .= "<span class='compose-stack-mem-$id compose-load-mem' style='display:none'></span>";
-    }
+    // Metric columns (advanced only)
+    $o .= "<td class='cm-advanced col-cpu compose-load-cell'>";
+    $o .= "<span class='compose-stack-cpu-$id compose-text-muted'>-</span>";
+    $o .= "<div class='usage-disk mm'><span id='compose-stack-cpu-bar-$id' style='width:0'></span><span></span></div>";
     $o .= "</td>";
 
+    $o .= "<td class='cm-advanced col-memory compose-load-cell'>";
+    $o .= "<span class='compose-stack-mem-$id compose-text-muted'>-</span>";
+    $o .= "<div class='usage-disk mm'><span id='compose-stack-mem-bar-$id' style='width:0'></span><span></span></div>";
+    $o .= "</td>";
+
+    $o .= "<td class='cm-advanced col-net_io'><span class='compose-stack-netio-$id compose-text-muted'>-</span></td>";
+    $o .= "<td class='cm-advanced col-block_io'><span class='compose-stack-blockio-$id compose-text-muted'>-</span></td>";
+
     // Description column (advanced only)
     $o .= "<td class='cm-advanced col-description' style='overflow-wrap:break-word;word-wrap:break-word;'>";
     if ($hasInvalidIndirect) {
@@ -285,7 +287,7 @@
 
     // Expandable details row
     $o .= "<tr class='stack-details-row' id='details-row-$id' style='display:none;'>";
-    $o .= "<td colspan='10' class='stack-details-cell' style='padding:0 0 0 60px;background:var(--dynamix-tablesorter-tbody-row-bg-color);'>";
+    $o .= "<td colspan='13' class='stack-details-cell' style='padding:0 0 0 60px;background:var(--dynamix-tablesorter-tbody-row-bg-color);'>";
     $o .= "<div class='stack-details-container' id='details-container-$id' style='padding:8px 16px;'>";
     $o .= "<i class='fa fa-spinner fa-spin compose-spinner'></i> Loading containers...";
     $o .= "</div>";
@@ -295,7 +297,7 @@
 
 // If no stacks found, show a message
 if ($mode !== 'row' && $stackCount === 0) {
-    $o = "<tr><td colspan='10' style='text-align:center;padding:20px;color:var(--alt-text-color);'>No Docker Compose stacks found. Click 'Add New Stack' to create one.</td></tr>";
+    $o = "<tr><td colspan='13' style='text-align:center;padding:20px;color:var(--alt-text-color);'>No Docker Compose stacks found. Click 'Add New Stack' to create one.</td></tr>";
 }
 
 // Output the HTML
diff --git a/source/compose.manager/include/ComposeManager.php b/source/compose.manager/include/ComposeManager.php
index 294266d2..6ebb3c22 100755
--- a/source/compose.manager/include/ComposeManager.php
+++ b/source/compose.manager/include/ComposeManager.php
@@ -141,8 +141,7 @@ function compose_manager_cpu_spec_count($cpuSpec)
         width: 15%;
     }
 
-    /* Advanced-view column widths (10 visible columns)
-   Arrow + Icon stay fixed px; Description + Path get the most %. */
+    /* Advanced-view column widths with optional metric columns. */
     #compose_stacks.cm-advanced-view thead th.col-arrow {
         width: 15px;
     }
@@ -156,27 +155,39 @@ function compose_manager_cpu_spec_count($cpuSpec)
     }
 
     #compose_stacks.cm-advanced-view thead th.col-update {
-        width: 10%
+        width: 8%
     }
 
     #compose_stacks.cm-advanced-view thead th.col-containers {
-        width: 5%
+        width: 4%
     }
 
     #compose_stacks.cm-advanced-view thead th.col-uptime {
-        width: 6%
+        width: 5%
+    }
+
+    #compose_stacks.cm-advanced-view thead th.col-cpu {
+        width: 8%
     }
 
-    #compose_stacks.cm-advanced-view thead th.col-load {
+    #compose_stacks.cm-advanced-view thead th.col-memory {
         width: 12%
     }
 
+    #compose_stacks.cm-advanced-view thead th.col-net_io {
+        width: 9%
+    }
+
+    #compose_stacks.cm-advanced-view thead th.col-block_io {
+        width: 9%
+    }
+
     #compose_stacks.cm-advanced-view thead th.col-description {
-        width: 22%
+        width: 15%
     }
 
     #compose_stacks.cm-advanced-view thead th.col-path {
-        width: 22%
+        width: 15%
     }
 
     #compose_stacks.cm-advanced-view thead th.col-autostart {
@@ -345,6 +356,7 @@ function compose_manager_cpu_spec_count($cpuSpec)
     var composeCpuCount = Number(composeBootstrap.composeCpuCount || 1);
 </script>
 <script src="<?php autov('/plugins/compose.manager/javascript/composeManagerPageInit.js'); ?>" type="text/javascript"></script>
+<script src="<?php autov('/plugins/compose.manager/javascript/composeColumnCustomizer.js'); ?>" type="text/javascript"></script>
 <script src="<?php autov('/plugins/compose.manager/javascript/composeManagerMain.js'); ?>" type="text/javascript"></script>
 
 <HTML>
@@ -365,7 +377,10 @@ function compose_manager_cpu_spec_count($cpuSpec)
                     <th class="col-update">Update</th>
                     <th class="col-containers">Containers</th>
                     <th class="col-uptime">Uptime</th>
-                    <th class="cm-advanced col-load">CPU &amp; Memory load</th>
+                    <th class="cm-advanced col-cpu">CPU</th>
+                    <th class="cm-advanced col-memory">Memory</th>
+                    <th class="cm-advanced col-net_io">Net I/O</th>
+                    <th class="cm-advanced col-block_io">Disk I/O</th>
                     <th class="cm-advanced col-description">Description</th>
                     <th class="cm-advanced col-path">Path</th>
                     <th class="nine col-autostart">Autostart</th>
@@ -373,7 +388,7 @@ function compose_manager_cpu_spec_count($cpuSpec)
             </thead>
             <tbody id="compose_list">
                 <tr>
-                    <td colspan='10'></td>
+                    <td colspan='13'></td>
                 </tr>
             </tbody>
         </table>
diff --git a/source/compose.manager/include/Exec.php b/source/compose.manager/include/Exec.php
index ff9d2614..3cc100ef 100644
--- a/source/compose.manager/include/Exec.php
+++ b/source/compose.manager/include/Exec.php
@@ -159,6 +159,101 @@ function composeResolveContainerIcon(string $containerName, string $service, arr
         $cfg = @parse_ini_file("/boot/config/plugins/compose.manager/compose.manager.cfg", true, INI_SCANNER_NORMAL);
         echo json_encode(['result' => 'success', 'config' => $cfg]);
         break;
+    case 'getColumnVisibility':
+        $prefFile = '/boot/config/plugins/compose.manager/column_visibility.json';
+        $defaults = [
+            'stack' => [
+                'cpu' => true,
+                'memory' => true,
+                'net_io' => false,
+                'block_io' => false,
+                'description' => true,
+                'path' => true,
+            ],
+            'service' => [
+                'cpu' => true,
+                'memory' => true,
+                'net_io' => false,
+                'block_io' => false,
+                'source' => true,
+                'tag' => true,
+                'net' => true,
+                'ip' => true,
+            ],
+        ];
+
+        $visibility = $defaults;
+        if (is_file($prefFile)) {
+            $raw = @file_get_contents($prefFile);
+            $saved = json_decode((string)$raw, true);
+            if (is_array($saved)) {
+                foreach (['stack', 'service'] as $scope) {
+                    if (!isset($saved[$scope]) || !is_array($saved[$scope])) continue;
+                    foreach ($defaults[$scope] as $key => $defaultVal) {
+                        if (array_key_exists($key, $saved[$scope])) {
+                            $visibility[$scope][$key] = (bool)$saved[$scope][$key];
+                        }
+                    }
+                }
+            }
+        }
+        echo json_encode(['result' => 'success', 'visibility' => $visibility]);
+        break;
+    case 'saveColumnVisibility':
+        $prefFile = '/boot/config/plugins/compose.manager/column_visibility.json';
+        $prefDir = dirname($prefFile);
+        $defaults = [
+            'stack' => [
+                'cpu' => true,
+                'memory' => true,
+                'net_io' => false,
+                'block_io' => false,
+                'description' => true,
+                'path' => true,
+            ],
+            'service' => [
+                'cpu' => true,
+                'memory' => true,
+                'net_io' => false,
+                'block_io' => false,
+                'source' => true,
+                'tag' => true,
+                'net' => true,
+                'ip' => true,
+            ],
+        ];
+
+        $raw = $_POST['visibility'] ?? '';
+        $parsed = json_decode((string)$raw, true);
+        if (!is_array($parsed)) {
+            echo json_encode(['result' => 'error', 'message' => 'Invalid visibility payload.']);
+            break;
+        }
+
+        $normalized = $defaults;
+        foreach (['stack', 'service'] as $scope) {
+            if (!isset($parsed[$scope]) || !is_array($parsed[$scope])) continue;
+            foreach ($defaults[$scope] as $key => $defaultVal) {
+                if (array_key_exists($key, $parsed[$scope])) {
+                    $normalized[$scope][$key] = (bool)$parsed[$scope][$key];
+                }
+            }
+        }
+
+        if (!is_dir($prefDir)) {
+            @mkdir($prefDir, 0777, true);
+        }
+
+        $tmp = $prefFile . '.tmp';
+        $ok = @file_put_contents($tmp, json_encode($normalized, JSON_PRETTY_PRINT | JSON_UNESCAPED_SLASHES));
+        if ($ok === false || !@rename($tmp, $prefFile)) {
+            @unlink($tmp);
+            echo json_encode(['result' => 'error', 'message' => 'Failed to persist column visibility.']);
+            break;
+        }
+
+        echo json_encode(['result' => 'success', 'visibility' => $normalized]);
+        break;
     case 'getPersistentContainerCache':
         $cacheFile = '/boot/config/plugins/compose.manager/containers.cache.json';
         $cache = is_file($cacheFile) ? json_decode(file_get_contents($cacheFile), true) : [];
diff --git a/source/compose.manager/javascript/composeColumnCustomizer.js b/source/compose.manager/javascript/composeColumnCustomizer.js
new file mode 100644
index 00000000..f2b168d8
--- /dev/null
+++ b/source/compose.manager/javascript/composeColumnCustomizer.js
@@ -0,0 +1,224 @@
+/**
+ * Column customization for stack + service tables.
+ * Preferences are persisted server-side in a JSON file.
+ */
+(function() {
+    'use strict';
+
+    var STACK_COLS = {
+        cpu: 'CPU %',
+        memory: 'Memory',
+        net_io: 'Network I/O',
+        block_io: 'Disk I/O',
+        description: 'Description',
+        path: 'Path'
+    };
+
+    var SERVICE_COLS = {
+        cpu: 'CPU %',
+        memory: 'Memory',
+        net_io: 'Network I/O',
+        block_io: 'Disk I/O',
+        source: 'Source',
+        tag: 'Tag',
+        net: 'Network',
+        ip: 'IP'
+    };
+
+    var defaults = {
+        stack: {
+            cpu: true,
+            memory: true,
+            net_io: false,
+            block_io: false,
+            description: true,
+            path: true
+        },
+        service: {
+            cpu: true,
+            memory: true,
+            net_io: false,
+            block_io: false,
+            source: true,
+            tag: true,
+            net: true,
+            ip: true
+        }
+    };
+
+    var prefs = {
+        stack: $.extend({}, defaults.stack),
+        service: $.extend({}, defaults.service)
+    };
+
+    function normalizePrefs(incoming) {
+        var out = {
+            stack: $.extend({}, defaults.stack),
+            service: $.extend({}, defaults.service)
+        };
+        if (!incoming || typeof incoming !== 'object') return out;
+
+        ['stack', 'service'].forEach(function(scope) {
+            if (!incoming[scope] || typeof incoming[scope] !== 'object') return;
+            Object.keys(out[scope]).forEach(function(key) {
+                if (Object.prototype.hasOwnProperty.call(incoming[scope], key)) {
+                    out[scope][key] = !!incoming[scope][key];
+                }
+            });
+        });
+        return out;
+    }
+
+    function applyScope(scope) {
+        var selector = scope === 'stack' ? '#compose_stacks' : '.compose-ct-table';
+        var $tables = $(selector);
+        Object.keys(prefs[scope]).forEach(function(col) {
+            $tables.toggleClass('hide-col-' + col, !prefs[scope][col]);
+        });
+    }
+
+    function applyAll() {
+        applyScope('stack');
+        applyScope('service');
+    }
+
+    function buildChecklist(scope, map) {
+        var html = '';
+        Object.keys(map).forEach(function(col) {
+            html += '<label class="compose-col-checkbox-label">';
+            html += '<input type="checkbox" class="compose-col-checkbox" data-type="' + scope + '" data-col="' + col + '">';
+            html += '<span>' + map[col] + '</span>';
+            html += '</label>';
+        });
+        return html;
+    }
+
+    function buildModal() {
+        var html = '<div id="compose-col-settings-modal" class="compose-col-modal" style="display:none;">';
+        html += '<div class="compose-modal-overlay"></div>';
+        html += '<div class="compose-modal-content">';
+        html += '<div class="compose-modal-header"><span>Column Visibility</span>';
+        html += '<button class="compose-modal-close" type="button" onclick="composeColCustomizer.closeModal();"><i class="fa fa-times"></i></button>';
+        html += '</div>';
+        html += '<div class="compose-modal-body">';
+        html += '<div class="compose-col-section"><div class="compose-col-section-title">Stack Columns</div><div class="compose-col-checklist" id="compose-stack-cols">' + buildChecklist('stack', STACK_COLS) + '</div></div>';
+        html += '<div class="compose-col-section"><div class="compose-col-section-title">Service Columns</div><div class="compose-col-checklist" id="compose-service-cols">' + buildChecklist('service', SERVICE_COLS) + '</div></div>';
+        html += '</div>';
+        html += '<div class="compose-modal-footer">';
+        html += '<button class="compose-modal-btn compose-modal-btn-save" type="button" onclick="composeColCustomizer.saveAndClose();">Save</button>';
+        html += '<button class="compose-modal-btn compose-modal-btn-cancel" type="button" onclick="composeColCustomizer.closeModal();">Cancel</button>';
+        html += '</div></div></div>';
+        return html;
+    }
+
+    function syncModalFromPrefs() {
+        $('.compose-col-checkbox').each(function() {
+            var scope = $(this).data('type');
+            var col = $(this).data('col');
+            var checked = !!(prefs[scope] && prefs[scope][col]);
+            $(this).prop('checked', checked);
+        });
+    }
+
+    function fetchPrefs(cb) {
+        $.post(caURL, {
+            action: 'getColumnVisibility'
+        }, function(resp) {
+            var parsed = resp;
+            if (typeof parsed === 'string') {
+                try {
+                    parsed = JSON.parse(parsed);
+                } catch (e) {
+                    parsed = null;
+                }
+            }
+            if (parsed && parsed.result === 'success' && parsed.visibility) {
+                prefs = normalizePrefs(parsed.visibility);
+            } else {
+                prefs = normalizePrefs(null);
+            }
+            if (typeof cb === 'function') cb();
+        }).fail(function() {
+            prefs = normalizePrefs(null);
+            if (typeof cb === 'function') cb();
+        });
+    }
+
+    function savePrefs(cb) {
+        $.post(caURL, {
+            action: 'saveColumnVisibility',
+            visibility: JSON.stringify(prefs)
+        }, function(resp) {
+            var parsed = resp;
+            if (typeof parsed === 'string') {
+                try {
+                    parsed = JSON.parse(parsed);
+                } catch (e) {
+                    parsed = null;
+                }
+            }
+            if (parsed && parsed.result === 'success' && parsed.visibility) {
+                prefs = normalizePrefs(parsed.visibility);
+            }
+            if (typeof cb === 'function') cb();
+        }).fail(function() {
+            if (typeof cb === 'function') cb();
+        });
+    }
+
+    window.composeColCustomizer = {
+        init: function() {
+            if (!$('#compose-col-settings-modal').length) {
+                $('body').append(buildModal());
+            }
+
+            $(document).on('change', '.compose-col-checkbox', function() {
+                var scope = $(this).data('type');
+                var col = $(this).data('col');
+                if (!prefs[scope] || !Object.prototype.hasOwnProperty.call(prefs[scope], col)) return;
+                prefs[scope][col] = $(this).is(':checked');
+                applyScope(scope);
+            });
+
+            this.addHeaderGearIcon();
+            fetchPrefs(function() {
+                syncModalFromPrefs();
+                applyAll();
+            });
+        },
+
+        reapply: function() {
+            applyAll();
+        },
+
+        openModal: function() {
+            syncModalFromPrefs();
+            $('#compose-col-settings-modal').fadeIn(150);
+            $('body').css('overflow', 'hidden');
+        },
+
+        closeModal: function() {
+            $('#compose-col-settings-modal').fadeOut(150);
+            $('body').css('overflow', '');
+        },
+
+        saveAndClose: function() {
+            var self = this;
+            savePrefs(function() {
+                applyAll();
+                self.closeModal();
+            });
+        },
+
+        addHeaderGearIcon: function() {
+            var $autostart = $('#compose_stacks thead th.col-autostart');
+            if (!$autostart.length || $autostart.find('.compose-col-gear-icon').length) return;
+            var gearHtml = '<a href="#" class="compose-col-gear-icon" title="Customize columns" onclick="event.preventDefault(); composeColCustomizer.openModal();"><i class="fa fa-sliders fa-rotate-90"></i></a>';
+            $autostart.append(gearHtml);
+        }
+    };
+
+    $(function() {
+        window.composeColCustomizer.init();
+    });
+})();
diff --git a/source/compose.manager/javascript/composeManagerMain.js b/source/compose.manager/javascript/composeManagerMain.js
index e19487ba..dc364f07 100644
--- a/source/compose.manager/javascript/composeManagerMain.js
+++ b/source/compose.manager/javascript/composeManagerMain.js
@@ -209,6 +209,15 @@ function formatMemUsageText(usedBytes, limitBytes) {
     return formatBytes(usedBytes) + ' / ' + formatBytes(limitBytes);
 }
 
+function formatInOutHtml(inVal, outVal, inLabel, outLabel) {
+    var inTitle = composeEscapeAttr(inLabel || 'in');
+    var outTitle = composeEscapeAttr(outLabel || 'out');
+    var inText = composeEscapeHtml(inVal || '-');
+    var outText = composeEscapeHtml(outVal || '-');
+    return '<span class="compose-io-in"><i class="fa fa-arrow-down compose-io-icon compose-io-in-icon" title="' + inTitle + '"></i> ' + inText + '</span>' +
+        '<span class="compose-io-out"><i class="fa fa-arrow-up compose-io-icon compose-io-out-icon" title="' + outTitle + '"></i> ' + outText + '</span>';
+}
+
 // ═══════════════════════════════════════════════════════════════════
 // Standard factory functions for container and stack identity objects
 // ═══════════════════════════════════════════════════════════════════
@@ -480,7 +489,7 @@ function composeLoadlist() {
                     composeLogger('Invalid stack meta response', {
                         response: metaRaw
                     }, 'user', 'error', 'composeLoadlist');
-                    $('#compose_list').html('<tr><td colspan="10" class="compose-status-danger" style="text-align:center;padding:20px;">Failed to load stack list. Please refresh the page.</td></tr>');
+                    $('#compose_list').html('<tr><td colspan="13" class="compose-status-danger" style="text-align:center;padding:20px;">Failed to load stack list. Please refresh the page.</td></tr>');
                     clearTimeout(composeTimers.load);
                     hideComposeSpinner();
                     reject(new Error('Invalid stack list response'));
@@ -489,7 +498,7 @@ function composeLoadlist() {
 
                 var projects = meta.projects;
                 if (projects.length === 0) {
-                    $('#compose_list').html('<tr><td colspan="10" style="text-align:center;padding:20px;color:var(--alt-text-color);">No Docker Compose stacks found. Click \"Add New Stack\" to create one.</td></tr>');
+                    $('#compose_list').html('<tr><td colspan="13" style="text-align:center;padding:20px;color:var(--alt-text-color);">No Docker Compose stacks found. Click \"Add New Stack\" to create one.</td></tr>');
                     finalizeComposeLoadlist('');
                     return;
                 }
@@ -502,7 +511,7 @@ function composeLoadlist() {
                 prefetchStackDetailsInBackground(projects);
 
                 var progressHtml = '<tr id="compose-load-progress-row">' +
-                    '<td colspan="10" style="text-align:center;padding:12px;border:none;background:transparent;">' +
+                    '<td colspan="13" style="text-align:center;padding:12px;border:none;background:transparent;">' +
                     '<span class="compose-text-muted" style="display:inline-flex;align-items:center;gap:8px;">' +
                     '<i class="fa fa-refresh fa-spin"></i>' +
                     '<span>Loading stacks... <span id="compose-load-progress-count">0/' + projects.length + '</span></span>' +
@@ -576,7 +585,7 @@ function composeLoadlist() {
                                     elapsedMs: badRespElapsedMs,
                                     response: rowResp
                                 }, 'user', 'warn', 'composeLoadlist');
-                                $('#compose-load-progress-row').before('<tr><td colspan="10" class="compose-status-danger" style="padding:8px 12px;">Failed to load ' + composeEscapeHtml(project) + '.</td></tr>');
+                                $('#compose-load-progress-row').before('<tr><td colspan="13" class="compose-status-danger" style="padding:8px 12px;">Failed to load ' + composeEscapeHtml(project) + '.</td></tr>');
                             }
 
                             waitForExpansion.finally(function() {
@@ -595,7 +604,7 @@ function composeLoadlist() {
                                 elapsedMs: failElapsedMs
                             }, 'user', 'warn', 'composeLoadlist');
                             delete stackLoadTimers[project];
-                            $('#compose-load-progress-row').before('<tr><td colspan="10" class="compose-status-danger" style="padding:8px 12px;">Failed to load ' + composeEscapeHtml(project) + '.</td></tr>');
+                            $('#compose-load-progress-row').before('<tr><td colspan="13" class="compose-status-danger" style="padding:8px 12px;">Failed to load ' + composeEscapeHtml(project) + '.</td></tr>');
                             completed++;
                             updateProgress();
                             loadNextProjectSequentially();
@@ -611,7 +620,7 @@ function composeLoadlist() {
                 }, 'user', 'error', 'composeLoadlist');
                 clearTimeout(composeTimers.load);
                 hideComposeSpinner();
-                $('#compose_list').html('<tr><td colspan="10" class="compose-status-danger" style="text-align:center;padding:20px;">Failed to load stack list. Please refresh the page.</td></tr>');
+                $('#compose_list').html('<tr><td colspan="13" class="compose-status-danger" style="text-align:center;padding:20px;">Failed to load stack list. Please refresh the page.</td></tr>');
 
                 // Reject the promise so callers can handle the error
                 try {
@@ -2205,7 +2214,7 @@ $(function() {
 
             composeLogger('initializing subscriber, composeListReady=' + composeListReady, null, 'user', 'debug', 'dockerload');
 
-            var composeDockerLoad = new NchanSubscriber('/sub/dockerload', {
+            var composeDockerLoad = new NchanSubscriber('/sub/composeinfo', {
                 subscriber: 'websocket',
                 reconnectTimeout: 5000
             });
@@ -2233,8 +2242,11 @@ $(function() {
 
             function clearContainerLoad(shortId) {
                 $('.compose-cpu-' + shortId).addClass('compose-text-muted').text('-');
-                $('#compose-cpu-' + shortId).css('width', '0');
-                $('.compose-mem-' + shortId).hide();
+                $('#compose-cpu-bar-' + shortId).css('width', '0');
+                $('.compose-mem-' + shortId).addClass('compose-text-muted').text('-');
+                $('#compose-mem-bar-' + shortId).css('width', '0');
+                $('.compose-netio-' + shortId).addClass('compose-text-muted').html('-');
+                $('.compose-blockio-' + shortId).addClass('compose-text-muted').html('-');
             }
 
             // Build a lightweight fingerprint of stack rows + their container ids.
@@ -2375,12 +2387,20 @@ $(function() {
                     var totalCpu = 0;
                     var totalMemUsedBytes = 0;
                     var totalMemLimitBytes = 0;
+                    var totalNetInBytes = 0;
+                    var totalNetOutBytes = 0;
+                    var totalBlockInBytes = 0;
+                    var totalBlockOutBytes = 0;
                     var matched = 0;
                     idList.forEach(function(ctId) {
                         if (ctId && composeLoadById[ctId]) {
                             totalCpu += composeLoadById[ctId].cpu;
                             totalMemUsedBytes += composeLoadById[ctId].memUsedBytes || 0;
                             totalMemLimitBytes += composeLoadById[ctId].memLimitBytes || 0;
+                            totalNetInBytes += composeLoadById[ctId].netInputBytes || 0;
+                            totalNetOutBytes += composeLoadById[ctId].netOutputBytes || 0;
+                            totalBlockInBytes += composeLoadById[ctId].blockInputBytes || 0;
+                            totalBlockOutBytes += composeLoadById[ctId].blockOutputBytes || 0;
                             matched++;
                         }
                     });
@@ -2396,13 +2416,20 @@ $(function() {
                             stackMemTotalBytes = composeSystemMemBytes;
                         }
                         var aggMem = formatMemUsageText(totalMemUsedBytes, stackMemTotalBytes);
-                        $('.compose-stack-cpu-' + entry.stackId).removeClass('compose-text-muted').text(aggCpu);
-                        $('#compose-stack-cpu-' + entry.stackId).css('width', Math.min(totalCpu, 100).toFixed(2) + '%');
-                        $('.compose-stack-mem-' + entry.stackId).show().text(aggMem);
+                        var aggMemPct = stackMemTotalBytes > 0 ? ((totalMemUsedBytes / stackMemTotalBytes) * 100).toFixed(2) + '%' : '-';
+                        $('.compose-stack-cpu-' + entry.stackId).removeClass('compose-text-muted').text(aggCpu + ' / 100%');
+                        $('#compose-stack-cpu-bar-' + entry.stackId).css('width', Math.min(totalCpu, 100).toFixed(2) + '%');
+                        $('.compose-stack-mem-' + entry.stackId).removeClass('compose-text-muted').text(aggMem);
+                        $('#compose-stack-mem-bar-' + entry.stackId).css('width', stackMemTotalBytes > 0 ? Math.min((totalMemUsedBytes / stackMemTotalBytes) * 100, 100).toFixed(2) + '%' : '0');
+                        $('.compose-stack-netio-' + entry.stackId).removeClass('compose-text-muted').html(formatInOutHtml(formatBytes(totalNetInBytes), formatBytes(totalNetOutBytes), 'in', 'out'));
+                        $('.compose-stack-blockio-' + entry.stackId).removeClass('compose-text-muted').html(formatInOutHtml(formatBytes(totalBlockInBytes), formatBytes(totalBlockOutBytes), 'read', 'write'));
                     } else {
                         $('.compose-stack-cpu-' + entry.stackId).addClass('compose-text-muted').text('-');
-                        $('#compose-stack-cpu-' + entry.stackId).css('width', '0');
-                        $('.compose-stack-mem-' + entry.stackId).hide();
+                        $('#compose-stack-cpu-bar-' + entry.stackId).css('width', '0');
+                        $('.compose-stack-mem-' + entry.stackId).addClass('compose-text-muted').text('-');
+                        $('#compose-stack-mem-bar-' + entry.stackId).css('width', '0');
+                        $('.compose-stack-netio-' + entry.stackId).addClass('compose-text-muted').html('-');
+                        $('.compose-stack-blockio-' + entry.stackId).addClass('compose-text-muted').html('-');
                     }
                 });
             }
@@ -2418,12 +2445,63 @@ $(function() {
                         var cpuRaw = parseFloat(parts[1]) || 0;
                         var cpuNorm = Math.round(Math.min(cpuRaw / Math.max(composeCpuCount, 1), 100) * 100) / 100;
                         var memPair = parseMemUsagePair(parts[2]);
+                        
+                        // Extended fields (optional, backward compatible)
+                        // Supports both:
+                        // 1) ID;CPU;MEM;MEMPCT;NET_IN;NET_OUT;BLK_IN;BLK_OUT
+                        // 2) ID;CPU;MEM;MEMPCT;NET_IO_PAIR;BLK_IO_PAIR
+                        var memPercent = 0;
+                        if (parts.length > 3) {
+                            memPercent = parseFloat(parts[3]) || 0;
+                        }
+                        if (memPercent <= 0 && memPair.limit > 0) {
+                            memPercent = (memPair.used / memPair.limit) * 100;
+                        }
+                        var netInput = null;
+                        var netOutput = null;
+                        var blockInput = null;
+                        var blockOutput = null;
+
+                        if (parts.length > 7) {
+                            // split format
+                            netInput = parts[4];
+                            netOutput = parts[5];
+                            blockInput = parts[6];
+                            blockOutput = parts[7];
+                        } else {
+                            // pair format: "in / out"
+                            if (parts.length > 4) {
+                                var netPair = String(parts[4] || '').split('/');
+                                netInput = (netPair[0] || '').trim();
+                                netOutput = (netPair[1] || '').trim();
+                            }
+                            if (parts.length > 5) {
+                                var blockPair = String(parts[5] || '').split('/');
+                                blockInput = (blockPair[0] || '').trim();
+                                blockOutput = (blockPair[1] || '').trim();
+                            }
+                        }
+                        var netInputBytes = parseMemValueToBytes(netInput || '0');
+                        var netOutputBytes = parseMemValueToBytes(netOutput || '0');
+                        var blockInputBytes = parseMemValueToBytes(blockInput || '0');
+                        var blockOutputBytes = parseMemValueToBytes(blockOutput || '0');
+                        
                         composeLoadById[parts[0]] = {
                             cpu: cpuNorm,
                             cpuText: formatCpuPercent(cpuNorm),
                             mem: formatMemUsageText(memPair.used, memPair.limit),
                             memUsedBytes: memPair.used,
                             memLimitBytes: memPair.limit,
+                            memPercent: memPercent,
+                            memPercentText: memPercent > 0 ? memPercent.toFixed(2) + '%' : '-',
+                            netInput: netInput || '-',
+                            netOutput: netOutput || '-',
+                            blockInput: blockInput || '-',
+                            blockOutput: blockOutput || '-',
+                            netInputBytes: netInputBytes,
+                            netOutputBytes: netOutputBytes,
+                            blockInputBytes: blockInputBytes,
+                            blockOutputBytes: blockOutputBytes,
                             ts: now
                         };
                     }
@@ -2443,9 +2521,12 @@ $(function() {
                 // Update per-container CPU & MEM elements in expanded detail tables
                 for (var shortId in composeLoadById) {
                     var info = composeLoadById[shortId];
-                    $('.compose-cpu-' + shortId).removeClass('compose-text-muted').text(info.cpuText);
-                    $('.compose-mem-' + shortId).show().text(info.mem);
-                    $('#compose-cpu-' + shortId).css('width', info.cpuText);
+                    $('.compose-cpu-' + shortId).removeClass('compose-text-muted').text(info.cpuText + ' / 100%');
+                    $('.compose-mem-' + shortId).removeClass('compose-text-muted').text(info.mem);
+                    $('.compose-netio-' + shortId).removeClass('compose-text-muted').html(formatInOutHtml(info.netInput, info.netOutput, 'in', 'out'));
+                    $('.compose-blockio-' + shortId).removeClass('compose-text-muted').html(formatInOutHtml(info.blockInput, info.blockOutput, 'read', 'write'));
+                    $('#compose-cpu-bar-' + shortId).css('width', info.cpuText);
+                    $('#compose-mem-bar-' + shortId).css('width', Math.min(info.memPercent || 0, 100).toFixed(2) + '%');
                 }
 
                 renderStackAggregates();
@@ -2485,9 +2566,12 @@ $(function() {
                     // shows current metrics without waiting for the next tick.
                     for (var shortId in composeLoadById) {
                         var info = composeLoadById[shortId];
-                        $('.compose-cpu-' + shortId).removeClass('compose-text-muted').text(info.cpuText);
-                        $('.compose-mem-' + shortId).show().text(info.mem);
-                        $('#compose-cpu-' + shortId).css('width', info.cpuText);
+                        $('.compose-cpu-' + shortId).removeClass('compose-text-muted').text(info.cpuText + ' / 100%');
+                        $('.compose-mem-' + shortId).removeClass('compose-text-muted').text(info.mem);
+                        $('.compose-netio-' + shortId).removeClass('compose-text-muted').html(formatInOutHtml(info.netInput, info.netOutput, 'in', 'out'));
+                        $('.compose-blockio-' + shortId).removeClass('compose-text-muted').html(formatInOutHtml(info.blockInput, info.blockOutput, 'read', 'write'));
+                        $('#compose-cpu-bar-' + shortId).css('width', info.cpuText);
+                        $('#compose-mem-bar-' + shortId).css('width', Math.min(info.memPercent || 0, 100).toFixed(2) + '%');
                     }
                     renderStackAggregates();
                 }
@@ -6705,7 +6789,10 @@ function renderContainerDetails(stackId, containers, project) {
     html += '<th class="cm-advanced ct-col-tag">Tag</th>';
     html += '<th class="cm-advanced ct-col-net">Network</th>';
     html += '<th class="cm-advanced ct-col-ip">Container IP</th>';
-    html += '<th class="cm-advanced ct-col-load">CPU &amp; Memory load</th>';
+    html += '<th class="cm-advanced ct-col-cpu">CPU</th>';
+    html += '<th class="cm-advanced ct-col-memory">Memory</th>';
+    html += '<th class="cm-advanced ct-col-net_io">Net I/O</th>';
+    html += '<th class="cm-advanced ct-col-block_io">Disk I/O</th>';
     html += '<th class="ct-col-cport">Container Port</th>';
     html += '<th class="ct-col-lport">LAN IP:Port</th>';
     html += '</tr></thead>';
@@ -6845,34 +6932,33 @@ function renderContainerDetails(stackId, containers, project) {
         html += '</td>';
 
         // Source (image name without tag)
-        html += '<td class="cm-advanced"><span class="docker_readmore compose-text-muted">' + composeEscapeHtml(imageSource) + '</span></td>';
+        html += '<td class="cm-advanced ct-col-source"><span class="docker_readmore compose-text-muted">' + composeEscapeHtml(imageSource) + '</span></td>';
 
         // Tag (image tag) — truncated with ellipsis via CSS if too long
-        html += '<td class="cm-advanced ct-col-tag-cell"><span class="ct-tag" title="' + composeEscapeAttr(imageTag) + '">' + composeEscapeHtml(imageTag) + '</span></td>';
+        html += '<td class="cm-advanced ct-col-tag ct-col-tag-cell"><span class="ct-tag" title="' + composeEscapeAttr(imageTag) + '">' + composeEscapeHtml(imageTag) + '</span></td>';
 
         // Network
-        html += '<td class="cm-advanced" style="white-space:nowrap;"><span class="docker_readmore">' + networkNames.map(composeEscapeHtml).join('<br>') + '</span></td>';
+        html += '<td class="cm-advanced ct-col-net" style="white-space:nowrap;"><span class="docker_readmore">' + networkNames.map(composeEscapeHtml).join('<br>') + '</span></td>';
 
         // Container IP
-        html += '<td class="cm-advanced" style="white-space:nowrap;"><span class="docker_readmore">' + ipAddresses.map(composeEscapeHtml).join('<br>') + '</span></td>';
-
-        // CPU & Memory load (advanced only) — populated by dockerload WebSocket
-        html += '<td class="cm-advanced compose-load-cell">';
-        if (state === 'running') {
-            html += '<span class="compose-cpu-' + containerId + '">0%</span>';
-            html += '<div class="usage-disk mm"><span id="compose-cpu-' + containerId + '" style="width:0"></span><span></span></div>';
-            html += '<br><span class="compose-mem-' + containerId + ' compose-text-muted">0B / 0B</span>';
-        } else {
-            html += '<span class="compose-cpu-' + containerId + ' compose-text-muted">-</span>';
-            html += '<span class="compose-mem-' + containerId + '" style="display:none"></span>';
-        }
+        html += '<td class="cm-advanced ct-col-ip" style="white-space:nowrap;"><span class="docker_readmore">' + ipAddresses.map(composeEscapeHtml).join('<br>') + '</span></td>';
+
+        html += '<td class="cm-advanced ct-col-cpu compose-load-cell">';
+        html += '<span class="compose-cpu-' + containerId + ' compose-text-muted">-</span>';
+        html += '<div class="usage-disk mm"><span id="compose-cpu-bar-' + containerId + '" style="width:0"></span><span></span></div>';
         html += '</td>';
+        html += '<td class="cm-advanced ct-col-memory compose-load-cell">';
+        html += '<span class="compose-mem-' + containerId + ' compose-text-muted">-</span>';
+        html += '<div class="usage-disk mm"><span id="compose-mem-bar-' + containerId + '" style="width:0"></span><span></span></div>';
+        html += '</td>';
+        html += '<td class="cm-advanced ct-col-net_io"><span class="compose-netio-' + containerId + ' compose-text-muted">-</span></td>';
+        html += '<td class="cm-advanced ct-col-block_io"><span class="compose-blockio-' + containerId + ' compose-text-muted">-</span></td>';
 
         // Container Port
         html += '<td style="white-space:nowrap;"><span class="docker_readmore">' + containerPorts.map(composeEscapeHtml).join('<br>') + '</span></td>';
 
         // LAN IP:Port
-        html += '<td style="white-space:nowrap;"><span class="docker_readmore">' + lanPorts.map(composeEscapeHtml).join('<br>') + '</span></td>';
+        html += '<td class="ct-col-lport-cell"><span>' + lanPorts.map(composeEscapeHtml).join('<br>') + '</span></td>';
 
         html += '</tr>';
     });
@@ -6881,6 +6967,10 @@ function renderContainerDetails(stackId, containers, project) {
 
     $container.html(html);
 
+    if (window.composeColCustomizer && typeof window.composeColCustomizer.reapply === 'function') {
+        window.composeColCustomizer.reapply();
+    }
+
     // Update the parent stack row shortly after rendering so counts and status
     // reflect the latest state. Use a short timeout to avoid racing with other
     // DOM updates (e.g. a full list reload) that may remove the row.
diff --git a/source/compose.manager/nchan/compose_info b/source/compose.manager/nchan/compose_info
new file mode 100755
index 00000000..b417903c
--- /dev/null
+++ b/source/compose.manager/nchan/compose_info
@@ -0,0 +1,60 @@
+#!/usr/bin/php -q
+<?php
+/* Compose-local nchan publisher for stack/container runtime metrics.
+ *
+ * Channel: composeinfo
+ * Payload: ID;CPUPerc;MemUsage;MemPerc;NetIO;BlockIO
+ *
+ * This is intentionally namespaced to Compose Manager so we can evolve
+ * metric fields without touching Docker manager's dockerload publisher.
+ */
+
+$docroot = $_SERVER['DOCUMENT_ROOT'] ?? '/usr/local/emhttp';
+if ($docroot === '') {
+    $docroot = '/usr/local/emhttp';
+}
+
+require_once "$docroot/webGui/include/publish.php";
+require_once "$docroot/plugins/compose.manager/include/Helpers.php";
+
+composeLogger('publisher starting', null, 'user', 'info', 'nchan');
+$statusFile = '/tmp/compose_info_nchan.status';
+@file_put_contents($statusFile, json_encode([
+    'state' => 'starting',
+    'ts' => time(),
+], JSON_UNESCAPED_SLASHES));
+$loopCount = 0;
+while (true) {
+    $output = shell_exec("docker stats --no-stream --format='{{.ID}};{{.CPUPerc}};{{.MemUsage}};{{.MemPerc}};{{.NetIO}};{{.BlockIO}}' 2>&1");
+
+    // Lightweight health log (first loop + then every 300 loops ~= 5 min)
+    if ($loopCount === 0 || ($loopCount % 300) === 0) {
+        $preview = trim((string)$output);
+        if (strlen($preview) > 140) {
+            $preview = substr($preview, 0, 140) . '...';
+        }
+        composeLogger('publisher heartbeat loop=' . $loopCount . ' sample=' . ($preview !== '' ? $preview : '<empty>'), null, 'user', 'debug', 'nchan');
+    }
+
+    // Continually publish and abort if no listeners.
+    publish('composeinfo', $output, 1, true);
+
+    // Visible runtime heartbeat for troubleshooting startup/loop health.
+    if (($loopCount % 5) === 0) {
+        @file_put_contents($statusFile, json_encode([
+            'state' => 'running',
+            'ts' => time(),
+            'loop' => $loopCount,
+            'sample' => substr(trim((string)$output), 0, 120),
+        ], JSON_UNESCAPED_SLASHES));
+    }
+    $loopCount++;
+
+    if ($output === null) {
+        // Slow down publishing if no containers are running.
+        composeLogger('docker stats returned null; slowing loop', null, 'user', 'debug', 'nchan');
+        sleep(10);
+    } else {
+        sleep(1);
+    }
+}
diff --git a/source/compose.manager/nchan/docker_load b/source/compose.manager/nchan/docker_load
deleted file mode 100755
index 3f729507..00000000
--- a/source/compose.manager/nchan/docker_load
+++ /dev/null
@@ -1,39 +0,0 @@
-#!/usr/bin/php -q
-<?php
-/* Thin wrapper that delegates to the core docker_load publisher.
- *
- * The Unraid framework starts nchan scripts based on the declaring
- * plugin's root path.  Because Compose.page lives under compose.manager
- * but the real publisher lives under dynamix.docker.manager, the
- * framework would fail to find the script when the Compose page is the
- * only page loaded.
- *
- * This wrapper checks whether the real publisher is already running
- * (started by the Docker tab) and, if not, execs into it so that only
- * a single `docker stats` loop ever runs.
- */
-
-$docroot = $_SERVER['DOCUMENT_ROOT'] ?? '/usr/local/emhttp';
-if ($docroot === '') {
-    $docroot = '/usr/local/emhttp';
-}
-
-$realScript = "$docroot/plugins/dynamix.docker.manager/nchan/docker_load";
-
-// If the real publisher is already running there is nothing to do.
-// Use pgrep scoped to our PID namespace so we only match emhttp children.
-exec('pgrep --ns $$ -f ' . escapeshellarg($realScript), $output, $retval);
-if ($retval === 0) {
-    // Already running — exit quietly so we don't double up.
-    exit(0);
-}
-
-// Not running yet — exec into the real script (replaces this process).
-if (function_exists('pcntl_exec')) {
-    pcntl_exec('/usr/bin/php', ['-q', $realScript]);
-}
-
-// Fallback if pcntl_exec is unavailable or fails.
-$exitCode = 1;
-passthru('/usr/bin/php -q ' . escapeshellarg($realScript), $exitCode);
-exit((int)$exitCode);
diff --git a/source/compose.manager/sheets/ComboButton.css b/source/compose.manager/sheets/ComboButton.css
index b714bae7..9bea40ec 100644
--- a/source/compose.manager/sheets/ComboButton.css
+++ b/source/compose.manager/sheets/ComboButton.css
@@ -309,39 +309,51 @@
 
   /* Column width distribution (totals ~100%) */
   .compose-ct-table .ct-col-name {
-    width: 13%;
+    width: 11%;
   }
 
   .compose-ct-table .ct-col-update {
-    width: 12%;
+    width: 9%;
   }
 
   .compose-ct-table .ct-col-source {
-    width: 14%;
+    width: 9%;
   }
 
   .compose-ct-table .ct-col-tag {
-    width: 10%;
+    width: 8%;
   }
 
   .compose-ct-table .ct-col-net {
-    width: 8%;
+    width: 6%;
   }
 
   .compose-ct-table .ct-col-ip {
+    width: 6%;
+  }
+
+  .compose-ct-table .ct-col-cpu {
     width: 8%;
   }
 
-  .compose-ct-table .ct-col-load {
+  .compose-ct-table .ct-col-memory {
     width: 12%;
   }
 
+  .compose-ct-table .ct-col-net_io {
+    width: 9%;
+  }
+
+  .compose-ct-table .ct-col-block_io {
+    width: 9%;
+  }
+
   .compose-ct-table .ct-col-cport {
-    width: 10%;
+    width: 6%;
   }
 
   .compose-ct-table .ct-col-lport {
-    width: 10%;
+    width: 9%;
   }
 
   /* Container name cell: allow wrapping for long names */
@@ -381,4 +393,220 @@
   /* Source data cells only — muted color (header inherits theme default) */
   .compose-ct-table td:nth-child(3) {
     color: var(--alt-text-color);
+  }
+
+  .compose-io-in,
+  .compose-io-out {
+    display: block;
+    line-height: 1.25;
+    white-space: nowrap;
+  }
+
+  .compose-io-icon {
+    width: 12px;
+    text-align: center;
+    margin-right: 4px;
+    opacity: 0.8;
+  }
+
+  .compose-io-in-icon {
+    color: var(--compose-status-info, #5aa9ff);
+  }
+
+  .compose-io-out-icon {
+    color: var(--compose-status-success, #7bcf4a);
+  }
+
+  .compose-ct-table th.ct-col-lport,
+  .compose-ct-table td.ct-col-lport-cell {
+    overflow: visible;
+    text-overflow: clip;
+    white-space: nowrap;
+  }
+
+  /* ============================================
+   Column Customizer Modal & Gear Icon
+   ============================================ */
+
+  .compose-col-gear-icon {
+    display: inline-block;
+    margin-left: 12px;
+    padding: 4px 8px;
+    cursor: pointer;
+    color: var(--brand-orange);
+    text-decoration: none;
+    transition: opacity 0.2s ease;
+  }
+
+  .compose-col-gear-icon:hover {
+    opacity: 0.7;
+  }
+
+  /* Column Customization Modal */
+  .compose-col-modal {
+    display: none;
+    position: fixed;
+    inset: 0;
+    z-index: 10002;
+  }
+
+  .compose-col-modal .compose-modal-overlay {
+    display: block;
+  }
+
+  .compose-col-modal .compose-modal-content {
+    position: fixed;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    background: var(--background-color);
+    border: 1px solid var(--border-color);
+    border-radius: 8px;
+    box-shadow: var(--panel-box-shadow);
+    width: 90%;
+    max-width: 450px;
+    max-height: 70vh;
+    display: flex;
+    flex-direction: column;
+    z-index: 10003;
+  }
+
+  .compose-modal-header {
+    padding: 16px 20px;
+    border-bottom: 1px solid var(--border-color);
+    background: var(--alt-background-color);
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    font-weight: bold;
+    font-size: 1.1em;
+  }
+
+  .compose-modal-close {
+    background: none;
+    border: none;
+    cursor: pointer;
+    color: var(--alt-text-color);
+    font-size: 1.2em;
+    padding: 0;
+    line-height: 1;
+  }
+
+  .compose-modal-close:hover {
+    color: var(--brand-orange);
+  }
+
+  .compose-modal-body {
+    padding: 20px;
+    overflow-y: auto;
+    flex: 1;
+  }
+
+  .compose-col-section {
+    margin-bottom: 24px;
+  }
+
+  .compose-col-section:last-child {
+    margin-bottom: 0;
+  }
+
+  .compose-col-section-title {
+    font-weight: bold;
+    color: var(--brand-orange);
+    margin-bottom: 12px;
+    font-size: 0.95em;
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+  }
+
+  .compose-col-checklist {
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+  }
+
+  .compose-col-checkbox-label {
+    display: flex;
+    align-items: center;
+    cursor: pointer;
+    user-select: none;
+    gap: 8px;
+  }
+
+  .compose-col-checkbox-label:hover {
+    color: var(--brand-orange);
+  }
+
+  .compose-col-checkbox {
+    cursor: pointer;
+    width: 16px;
+    height: 16px;
+    accent-color: var(--brand-orange);
+  }
+
+  .compose-modal-footer {
+    padding: 12px 20px;
+    border-top: 1px solid var(--border-color);
+    background: var(--alt-background-color);
+    text-align: right;
+    display: flex;
+    justify-content: flex-end;
+    gap: 8px;
+  }
+
+  .compose-modal-btn {
+    padding: 8px 16px;
+    border: 1px solid var(--border-color);
+    border-radius: 4px;
+    background: var(--dynamix-tablesorter-tbody-row-alt-bg-color);
+    color: var(--text-color);
+    cursor: pointer;
+    font-size: 0.9em;
+    transition: background 0.2s ease;
+  }
+
+  .compose-modal-btn:hover {
+    background: var(--border-color);
+  }
+
+  .compose-modal-btn-save {
+    background: var(--action-primary-bg);
+    color: var(--action-primary-color);
+    border-color: var(--action-primary-bg);
+  }
+
+  .compose-modal-btn-save:hover {
+    opacity: 0.9;
+  }
+
+  /* Column hiding via hide-col-* classes */
+  #compose_stacks.hide-col-cpu .col-cpu,
+  #compose_stacks.hide-col-cpu td.col-cpu,
+  #compose_stacks.hide-col-memory .col-memory,
+  #compose_stacks.hide-col-memory td.col-memory,
+  #compose_stacks.hide-col-net_io .col-net_io,
+  #compose_stacks.hide-col-net_io td.col-net_io,
+  #compose_stacks.hide-col-block_io .col-block_io,
+  #compose_stacks.hide-col-block_io td.col-block_io,
+  #compose_stacks.hide-col-description .col-description,
+  #compose_stacks.hide-col-description td.col-description,
+  #compose_stacks.hide-col-path .col-path,
+  #compose_stacks.hide-col-path td.col-path,
+  .compose-ct-table.hide-col-cpu .ct-col-cpu,
+  .compose-ct-table.hide-col-cpu td.ct-col-cpu,
+  .compose-ct-table.hide-col-memory .ct-col-memory,
+  .compose-ct-table.hide-col-memory td.ct-col-memory,
+  .compose-ct-table.hide-col-net_io .ct-col-net_io,
+  .compose-ct-table.hide-col-net_io td.ct-col-net_io,
+  .compose-ct-table.hide-col-block_io .ct-col-block_io,
+  .compose-ct-table.hide-col-block_io td.ct-col-block_io,
+  .compose-ct-table.hide-col-source .ct-col-source,
+  .compose-ct-table.hide-col-source td.ct-col-source,
+  .compose-ct-table.hide-col-tag .ct-col-tag,
+  .compose-ct-table.hide-col-tag td.ct-col-tag,
+  .compose-ct-table.hide-col-net .ct-col-net,
+  .compose-ct-table.hide-col-net td.ct-col-net,
+  .compose-ct-table.hide-col-ip .ct-col-ip,
+  .compose-ct-table.hide-col-ip td.ct-col-ip {
+    display: none !important;
   }
\ No newline at end of file
diff --git a/source/pkg_build.sh b/source/pkg_build.sh
index 7cc84ca7..28b75ad3 100755
--- a/source/pkg_build.sh
+++ b/source/pkg_build.sh
@@ -148,6 +148,7 @@ echo "Marking plugin scripts and PHP executable..."
 run_quiet chmod -R +x "$tmpdir/usr/local/emhttp/plugins/compose.manager/event/"
 run_quiet chmod -R +x "$tmpdir/usr/local/emhttp/plugins/compose.manager/scripts/"
 run_quiet chmod -R +x "$tmpdir/usr/local/emhttp/plugins/compose.manager/include/"
+run_quiet chmod -R +x "$tmpdir/usr/local/emhttp/plugins/compose.manager/nchan/"
 
 echo "Downloading Docker Compose CLI plugin v${COMPOSE_VERSION}..."
 download_with_sha_cache \
diff --git a/tests/unit/ComposeListHtmlTest.php b/tests/unit/ComposeListHtmlTest.php
index 4e771a07..bea9829f 100644
--- a/tests/unit/ComposeListHtmlTest.php
+++ b/tests/unit/ComposeListHtmlTest.php
@@ -109,12 +109,15 @@ public function testAdvancedColumnsUseCmAdvancedClass(): void
         $this->assertMatchesRegularExpression("/class='[^']*\\bcm-advanced\\b[^']*'/", $source);
     }
 
-    public function testAdvancedLoadColumnMarkupExists(): void
+    public function testAdvancedMetricColumnsMarkupExists(): void
     {
         $source = $this->getPageSource();
-        $this->assertStringContainsString("col-load compose-load-cell", $source);
+        $this->assertStringContainsString("col-cpu compose-load-cell", $source);
+        $this->assertStringContainsString("col-memory compose-load-cell", $source);
         $this->assertStringContainsString("compose-stack-cpu-", $source);
         $this->assertStringContainsString("compose-stack-mem-", $source);
+        $this->assertStringContainsString("compose-stack-cpu-bar-", $source);
+        $this->assertStringContainsString("compose-stack-mem-bar-", $source);
     }
 
     // ===========================================
@@ -138,7 +141,7 @@ public function testNoStacksMessageExists(): void
         $source = $this->getPageSource();
         $this->assertStringContainsString('No Docker Compose stacks found', $source);
         $this->assertStringContainsString('Add New Stack', $source);
-        $this->assertStringContainsString("colspan='10'", $source);
+        $this->assertStringContainsString("colspan='13'", $source);
     }
 
     // ===========================================

From 3decd3431ea4b730359517e4603ee4313a37b8b4 Mon Sep 17 00:00:00 2001
From: mstrhakr <mstrhakr@gmail.com>
Date: Sun, 14 Jun 2026 19:51:49 -0400
Subject: [PATCH 50/67] feat: Implement snapshot loading for compose metrics
 and enhance data publishing to ensure data shows during progressive loading

---
 source/compose.manager/include/Exec.php       |   8 +
 .../javascript/composeManagerMain.js          | 252 +++++++++++-------
 source/compose.manager/nchan/compose_info     |   6 +
 3 files changed, 169 insertions(+), 97 deletions(-)

diff --git a/source/compose.manager/include/Exec.php b/source/compose.manager/include/Exec.php
index 3cc100ef..e151f4dd 100644
--- a/source/compose.manager/include/Exec.php
+++ b/source/compose.manager/include/Exec.php
@@ -259,6 +259,14 @@ function composeResolveContainerIcon(string $containerName, string $service, arr
         $cache = is_file($cacheFile) ? json_decode(file_get_contents($cacheFile), true) : [];
         echo json_encode(['result' => 'success', 'cache' => is_array($cache) ? $cache : []]);
         break;
+    case 'getComposeLoadSnapshot':
+        $snapshotFile = '/tmp/compose_info_nchan.snapshot.json';
+        $snapshot = is_file($snapshotFile) ? json_decode((string)file_get_contents($snapshotFile), true) : [];
+        echo json_encode([
+            'result' => 'success',
+            'snapshot' => is_array($snapshot) ? $snapshot : [],
+        ]);
+        break;
     case 'addStack':
         // Validate optional indirect inputs (folder or specific compose file)
         $indirectDir = isset($_POST['stackPath']) ? trim($_POST['stackPath']) : '';
diff --git a/source/compose.manager/javascript/composeManagerMain.js b/source/compose.manager/javascript/composeManagerMain.js
index dc364f07..1c949db0 100644
--- a/source/compose.manager/javascript/composeManagerMain.js
+++ b/source/compose.manager/javascript/composeManagerMain.js
@@ -574,6 +574,9 @@ function composeLoadlist() {
                                 var $rowChunk = $(rowResp.html);
                                 $('#compose-load-progress-row').before($rowChunk);
                                 initializeProgressiveLoadedRows($rowChunk);
+                                if (typeof window.composeDockerLoadRenderCached === 'function' && isComposeAdvancedMode()) {
+                                    window.composeDockerLoadRenderCached();
+                                }
                                 // Enforce top-down UX: wait for this stack's expansion/details work before next stack.
                                 waitForExpansion = composeDefaultExpandQueue;
                             } else {
@@ -745,6 +748,9 @@ function initializeProgressiveLoadedRows($rowChunk) {
     if (typeof window.composeDockerLoadToggle === 'function' && isComposeAdvancedMode()) {
         window.composeDockerLoadToggle(true);
     }
+    if (typeof window.composeDockerLoadRenderCached === 'function' && isComposeAdvancedMode()) {
+        window.composeDockerLoadRenderCached();
+    }
 }
 
 // Load external stylesheets (non-critical styles — critical ones are inline above)
@@ -1885,6 +1891,33 @@ function loadPersistentContainerCache() {
     });
 }
 
+function loadComposeLoadSnapshot() {
+    return new Promise(function(resolve) {
+        $.ajax({
+            url: caURL,
+            method: 'POST',
+            dataType: 'json',
+            data: {
+                action: 'getComposeLoadSnapshot'
+            }
+        })
+            .done(function(response) {
+                var snapshot = (response && response.snapshot && typeof response.snapshot === 'object') ? response.snapshot : {};
+                window.composeLoadSnapshotRaw = typeof snapshot.raw === 'string' ? snapshot.raw : '';
+                window.composeLoadSnapshotTs = Number(snapshot.ts || 0);
+                if (typeof window.composeDockerLoadSeedSnapshot === 'function' && window.composeLoadSnapshotRaw) {
+                    window.composeDockerLoadSeedSnapshot(window.composeLoadSnapshotRaw, window.composeLoadSnapshotTs);
+                }
+                resolve(snapshot);
+            })
+            .fail(function() {
+                window.composeLoadSnapshotRaw = '';
+                window.composeLoadSnapshotTs = 0;
+                resolve({});
+            });
+    });
+}
+
 function getPersistentContainerInfo(project, service) {
     if (!project || !service || !persistentContainerCache[project]) return null;
     return persistentContainerCache[project][service] || null;
@@ -2083,6 +2116,8 @@ $(function() {
     // Load the persistent container cache before the stack list.
     // This ensures dialog merge logic can use last-known container metadata.
     loadPersistentContainerCache().then(function() {
+        return loadComposeLoadSnapshot();
+    }).then(function() {
         composeListLoadStartedAt = Date.now();
         composeLoadlist().then(function(loadMode) {
             composeListReady = true;
@@ -2318,6 +2353,14 @@ $(function() {
                 composeStackIndex = null;
                 composeStackSignature = newSignature;
 
+                // During progressive initial load, the DOM only contains a prefix of
+                // the total stack list. Preserve preloaded snapshot/SSE cache entries
+                // for rows that have not been inserted yet; otherwise later rows lose
+                // their warm-start metrics before they ever render.
+                if (!composeListReady) {
+                    return;
+                }
+
                 // Keep live load values for unchanged containers; drop removed ids.
                 var currentIds = getComposeContainerIdSetFromDom();
                 Object.keys(composeLoadById).forEach(function(id) {
@@ -2340,6 +2383,107 @@ $(function() {
                 }
             };
 
+            function renderComposeLoadCache() {
+                if (!isComposeLoadVisible()) {
+                    return;
+                }
+
+                for (var shortId in composeLoadById) {
+                    var info = composeLoadById[shortId];
+                    $('.compose-cpu-' + shortId).removeClass('compose-text-muted').text(info.cpuText + ' / 100%');
+                    $('.compose-mem-' + shortId).removeClass('compose-text-muted').text(info.mem);
+                    $('.compose-netio-' + shortId).removeClass('compose-text-muted').html(formatInOutHtml(info.netInput, info.netOutput, 'in', 'out'));
+                    $('.compose-blockio-' + shortId).removeClass('compose-text-muted').html(formatInOutHtml(info.blockInput, info.blockOutput, 'read', 'write'));
+                    $('#compose-cpu-bar-' + shortId).css('width', info.cpuText);
+                    $('#compose-mem-bar-' + shortId).css('width', Math.min(info.memPercent || 0, 100).toFixed(2) + '%');
+                }
+
+                renderStackAggregates();
+            }
+
+            window.composeDockerLoadRenderCached = renderComposeLoadCache;
+
+            function ingestComposeLoadPayload(msg, now) {
+                var data = String(msg || '').split('\n');
+                var i = 0;
+                var row = data[i];
+                while (row) {
+                    var parts = row.split(';');
+                    if (parts.length >= 3) {
+                        var cpuRaw = parseFloat(parts[1]) || 0;
+                        var cpuNorm = Math.round(Math.min(cpuRaw / Math.max(composeCpuCount, 1), 100) * 100) / 100;
+                        var memPair = parseMemUsagePair(parts[2]);
+
+                        var memPercent = 0;
+                        if (parts.length > 3) {
+                            memPercent = parseFloat(parts[3]) || 0;
+                        }
+                        if (memPercent <= 0 && memPair.limit > 0) {
+                            memPercent = (memPair.used / memPair.limit) * 100;
+                        }
+                        var netInput = null;
+                        var netOutput = null;
+                        var blockInput = null;
+                        var blockOutput = null;
+
+                        if (parts.length > 7) {
+                            netInput = parts[4];
+                            netOutput = parts[5];
+                            blockInput = parts[6];
+                            blockOutput = parts[7];
+                        } else {
+                            if (parts.length > 4) {
+                                var netPair = String(parts[4] || '').split('/');
+                                netInput = (netPair[0] || '').trim();
+                                netOutput = (netPair[1] || '').trim();
+                            }
+                            if (parts.length > 5) {
+                                var blockPair = String(parts[5] || '').split('/');
+                                blockInput = (blockPair[0] || '').trim();
+                                blockOutput = (blockPair[1] || '').trim();
+                            }
+                        }
+                        var netInputBytes = parseMemValueToBytes(netInput || '0');
+                        var netOutputBytes = parseMemValueToBytes(netOutput || '0');
+                        var blockInputBytes = parseMemValueToBytes(blockInput || '0');
+                        var blockOutputBytes = parseMemValueToBytes(blockOutput || '0');
+
+                        composeLoadById[parts[0]] = {
+                            cpu: cpuNorm,
+                            cpuText: formatCpuPercent(cpuNorm),
+                            mem: formatMemUsageText(memPair.used, memPair.limit),
+                            memUsedBytes: memPair.used,
+                            memLimitBytes: memPair.limit,
+                            memPercent: memPercent,
+                            memPercentText: memPercent > 0 ? memPercent.toFixed(2) + '%' : '-',
+                            netInput: netInput || '-',
+                            netOutput: netOutput || '-',
+                            blockInput: blockInput || '-',
+                            blockOutput: blockOutput || '-',
+                            netInputBytes: netInputBytes,
+                            netOutputBytes: netOutputBytes,
+                            blockInputBytes: blockInputBytes,
+                            blockOutputBytes: blockOutputBytes,
+                            ts: now
+                        };
+                    }
+                    i++;
+                    row = data[i];
+                }
+            }
+
+            window.composeDockerLoadSeedSnapshot = function(raw, ts) {
+                if (!raw) return;
+                ingestComposeLoadPayload(raw, ts ? ts * 1000 : Date.now());
+                if (isComposeLoadVisible()) {
+                    renderComposeLoadCache();
+                }
+            };
+
+            if (window.composeLoadSnapshotRaw) {
+                window.composeDockerLoadSeedSnapshot(window.composeLoadSnapshotRaw, window.composeLoadSnapshotTs);
+            }
+
             function pruneStaleLoadEntries(now) {
                 var staleIds = [];
                 for (var knownId in composeLoadById) {
@@ -2436,78 +2580,10 @@ $(function() {
 
             composeDockerLoad.on('message', function(msg) {
                 var now = Date.now();
-                var data = msg.split('\n');
-                var i = 0;
-                var row = data[i];
-                while (row) {
-                    var parts = row.split(';');
-                    if (parts.length >= 3) {
-                        var cpuRaw = parseFloat(parts[1]) || 0;
-                        var cpuNorm = Math.round(Math.min(cpuRaw / Math.max(composeCpuCount, 1), 100) * 100) / 100;
-                        var memPair = parseMemUsagePair(parts[2]);
-                        
-                        // Extended fields (optional, backward compatible)
-                        // Supports both:
-                        // 1) ID;CPU;MEM;MEMPCT;NET_IN;NET_OUT;BLK_IN;BLK_OUT
-                        // 2) ID;CPU;MEM;MEMPCT;NET_IO_PAIR;BLK_IO_PAIR
-                        var memPercent = 0;
-                        if (parts.length > 3) {
-                            memPercent = parseFloat(parts[3]) || 0;
-                        }
-                        if (memPercent <= 0 && memPair.limit > 0) {
-                            memPercent = (memPair.used / memPair.limit) * 100;
-                        }
-                        var netInput = null;
-                        var netOutput = null;
-                        var blockInput = null;
-                        var blockOutput = null;
+                ingestComposeLoadPayload(msg, now);
 
-                        if (parts.length > 7) {
-                            // split format
-                            netInput = parts[4];
-                            netOutput = parts[5];
-                            blockInput = parts[6];
-                            blockOutput = parts[7];
-                        } else {
-                            // pair format: "in / out"
-                            if (parts.length > 4) {
-                                var netPair = String(parts[4] || '').split('/');
-                                netInput = (netPair[0] || '').trim();
-                                netOutput = (netPair[1] || '').trim();
-                            }
-                            if (parts.length > 5) {
-                                var blockPair = String(parts[5] || '').split('/');
-                                blockInput = (blockPair[0] || '').trim();
-                                blockOutput = (blockPair[1] || '').trim();
-                            }
-                        }
-                        var netInputBytes = parseMemValueToBytes(netInput || '0');
-                        var netOutputBytes = parseMemValueToBytes(netOutput || '0');
-                        var blockInputBytes = parseMemValueToBytes(blockInput || '0');
-                        var blockOutputBytes = parseMemValueToBytes(blockOutput || '0');
-                        
-                        composeLoadById[parts[0]] = {
-                            cpu: cpuNorm,
-                            cpuText: formatCpuPercent(cpuNorm),
-                            mem: formatMemUsageText(memPair.used, memPair.limit),
-                            memUsedBytes: memPair.used,
-                            memLimitBytes: memPair.limit,
-                            memPercent: memPercent,
-                            memPercentText: memPercent > 0 ? memPercent.toFixed(2) + '%' : '-',
-                            netInput: netInput || '-',
-                            netOutput: netOutput || '-',
-                            blockInput: blockInput || '-',
-                            blockOutput: blockOutput || '-',
-                            netInputBytes: netInputBytes,
-                            netOutputBytes: netOutputBytes,
-                            blockInputBytes: blockInputBytes,
-                            blockOutputBytes: blockOutputBytes,
-                            ts: now
-                        };
-                    }
-                    i++;
-                    row = data[i];
-                }
+                window.composeLoadSnapshotRaw = msg;
+                window.composeLoadSnapshotTs = Math.floor(now / 1000);
 
                 pruneStaleLoadEntries(now);
 
@@ -2518,18 +2594,7 @@ $(function() {
                     return;
                 }
 
-                // Update per-container CPU & MEM elements in expanded detail tables
-                for (var shortId in composeLoadById) {
-                    var info = composeLoadById[shortId];
-                    $('.compose-cpu-' + shortId).removeClass('compose-text-muted').text(info.cpuText + ' / 100%');
-                    $('.compose-mem-' + shortId).removeClass('compose-text-muted').text(info.mem);
-                    $('.compose-netio-' + shortId).removeClass('compose-text-muted').html(formatInOutHtml(info.netInput, info.netOutput, 'in', 'out'));
-                    $('.compose-blockio-' + shortId).removeClass('compose-text-muted').html(formatInOutHtml(info.blockInput, info.blockOutput, 'read', 'write'));
-                    $('#compose-cpu-bar-' + shortId).css('width', info.cpuText);
-                    $('#compose-mem-bar-' + shortId).css('width', Math.min(info.memPercent || 0, 100).toFixed(2) + '%');
-                }
-
-                renderStackAggregates();
+                renderComposeLoadCache();
             });
 
             composeDockerLoad.on('error', function(code, desc) {
@@ -2564,16 +2629,7 @@ $(function() {
 
                     // Immediately render the cached load data so the UI
                     // shows current metrics without waiting for the next tick.
-                    for (var shortId in composeLoadById) {
-                        var info = composeLoadById[shortId];
-                        $('.compose-cpu-' + shortId).removeClass('compose-text-muted').text(info.cpuText + ' / 100%');
-                        $('.compose-mem-' + shortId).removeClass('compose-text-muted').text(info.mem);
-                        $('.compose-netio-' + shortId).removeClass('compose-text-muted').html(formatInOutHtml(info.netInput, info.netOutput, 'in', 'out'));
-                        $('.compose-blockio-' + shortId).removeClass('compose-text-muted').html(formatInOutHtml(info.blockInput, info.blockOutput, 'read', 'write'));
-                        $('#compose-cpu-bar-' + shortId).css('width', info.cpuText);
-                        $('#compose-mem-bar-' + shortId).css('width', Math.min(info.memPercent || 0, 100).toFixed(2) + '%');
-                    }
-                    renderStackAggregates();
+                    renderComposeLoadCache();
                 }
             };
             document.addEventListener('visibilitychange', window._composeDockerLoadVisHandler);
@@ -2600,10 +2656,9 @@ $(function() {
                 });
             }
 
-            // Only auto-start the socket if the stack list is already
-            // loaded (composeListReady is true).  Otherwise the
-            // composeLoadlist().then() callback will start it.
-            if (composeListReady && isComposeAdvancedMode()) {
+            // Auto-start the socket immediately in advanced view so the
+            // cache can warm while progressive row loading is still in flight.
+            if (isComposeAdvancedMode()) {
                 composeLogger('auto-starting socket', {
                     'listReady': composeListReady,
                     'advanced': isComposeAdvancedMode()
@@ -6970,6 +7025,9 @@ function renderContainerDetails(stackId, containers, project) {
     if (window.composeColCustomizer && typeof window.composeColCustomizer.reapply === 'function') {
         window.composeColCustomizer.reapply();
     }
+    if (window.composeDockerLoadRenderCached && typeof window.composeDockerLoadRenderCached === 'function') {
+        window.composeDockerLoadRenderCached();
+    }
 
     // Update the parent stack row shortly after rendering so counts and status
     // reflect the latest state. Use a short timeout to avoid racing with other
diff --git a/source/compose.manager/nchan/compose_info b/source/compose.manager/nchan/compose_info
index b417903c..aab4f60b 100755
--- a/source/compose.manager/nchan/compose_info
+++ b/source/compose.manager/nchan/compose_info
@@ -19,6 +19,7 @@ require_once "$docroot/plugins/compose.manager/include/Helpers.php";
 
 composeLogger('publisher starting', null, 'user', 'info', 'nchan');
 $statusFile = '/tmp/compose_info_nchan.status';
+$snapshotFile = '/tmp/compose_info_nchan.snapshot.json';
 @file_put_contents($statusFile, json_encode([
     'state' => 'starting',
     'ts' => time(),
@@ -39,6 +40,11 @@ while (true) {
     // Continually publish and abort if no listeners.
     publish('composeinfo', $output, 1, true);
 
+    @file_put_contents($snapshotFile, json_encode([
+        'ts' => time(),
+        'raw' => (string)$output,
+    ], JSON_UNESCAPED_SLASHES));
+
     // Visible runtime heartbeat for troubleshooting startup/loop health.
     if (($loopCount % 5) === 0) {
         @file_put_contents($statusFile, json_encode([

From b9226c10b98d20371af450cace634d648f2bb2c4 Mon Sep 17 00:00:00 2001
From: mstrhakr <mstrhakr@gmail.com>
Date: Sun, 14 Jun 2026 22:41:08 -0400
Subject: [PATCH 51/67] feat: promote col customizer and remove basic/advanced
 toggle

---
 .../include/ComposeManager.php                | 103 +++++--------
 .../javascript/composeColumnCustomizer.js     | 121 ++++++++++++++-
 .../javascript/composeManagerMain.js          | 138 ++++--------------
 source/compose.manager/sheets/ComboButton.css |  41 ++++--
 4 files changed, 211 insertions(+), 192 deletions(-)

diff --git a/source/compose.manager/include/ComposeManager.php b/source/compose.manager/include/ComposeManager.php
index 6ebb3c22..c37ea563 100755
--- a/source/compose.manager/include/ComposeManager.php
+++ b/source/compose.manager/include/ComposeManager.php
@@ -73,7 +73,22 @@ function compose_manager_cpu_spec_count($cpuSpec)
     /* Table structure — always fixed layout */
     #compose_stacks {
         width: 100%;
-        table-layout: fixed
+        table-layout: fixed;
+        /* Single source of truth for stack-table column widths. */
+        --cm-col-arrow-px: 24px;
+        --cm-col-icon-px: 48px;
+        --cm-col-fixed-px: calc(var(--cm-col-arrow-px) + var(--cm-col-icon-px));
+        --cm-col-name-frac: 0.203539823;
+        --cm-col-update-frac: 0.141592920;
+        --cm-col-containers-frac: 0.070796460;
+        --cm-col-uptime-frac: 0.079646018;
+        --cm-col-cpu-frac: 0.088495575;
+        --cm-col-memory-frac: 0.115044248;
+        --cm-col-net-io-frac: 0.000000000;
+        --cm-col-block-io-frac: 0.000000000;
+        --cm-col-description-frac: 0.123893805;
+        --cm-col-path-frac: 0.106194690;
+        --cm-col-autostart-frac: 0.070796460;
     }
 
     /* Stabilize header row height across basic/advanced toggle transitions */
@@ -89,9 +104,13 @@ function compose_manager_cpu_spec_count($cpuSpec)
         text-align: left;
     }
 
-    /* Clip overflowing content in fixed-layout cells */
+    /* Clip overflowing content in fixed-layout cells.
+       border-box is REQUIRED so the percentage column widths below include
+       their own padding; otherwise padding is added on top of the computed
+       width and the columns overflow/shrink, leaving a gap at the right. */
     #compose_stacks th,
     #compose_stacks td {
+        box-sizing: border-box;
         overflow: hidden;
         text-overflow: ellipsis
     }
@@ -99,7 +118,7 @@ function compose_manager_cpu_spec_count($cpuSpec)
     /* Basic-view column widths (7 visible columns)
    Arrow + Icon are fixed px (small fixed content); rest are % of table. */
     #compose_stacks thead th.col-arrow {
-        width: 15px;
+        width: var(--cm-col-arrow-px);
         padding: 0;
     }
 
@@ -117,81 +136,52 @@ function compose_manager_cpu_spec_count($cpuSpec)
     }
 
     #compose_stacks thead th.col-icon {
-        width: 30px;
+        width: var(--cm-col-icon-px);
         padding: 0;
     }
 
     #compose_stacks thead th.col-name {
-        width: 12%;
+        width: calc((100% - var(--cm-col-fixed-px)) * var(--cm-col-name-frac));
     }
 
     #compose_stacks thead th.col-update {
-        width: 25%;
+        width: calc((100% - var(--cm-col-fixed-px)) * var(--cm-col-update-frac));
     }
 
     #compose_stacks thead th.col-containers {
-        width: 25%;
+        width: calc((100% - var(--cm-col-fixed-px)) * var(--cm-col-containers-frac));
     }
 
     #compose_stacks thead th.col-uptime {
-        width: 25%;
+        width: calc((100% - var(--cm-col-fixed-px)) * var(--cm-col-uptime-frac));
     }
 
     #compose_stacks thead th.col-autostart {
-        width: 15%;
+        width: calc((100% - var(--cm-col-fixed-px)) * var(--cm-col-autostart-frac));
     }
 
-    /* Advanced-view column widths with optional metric columns. */
-    #compose_stacks.cm-advanced-view thead th.col-arrow {
-        width: 15px;
+    #compose_stacks thead th.col-cpu {
+        width: calc((100% - var(--cm-col-fixed-px)) * var(--cm-col-cpu-frac))
     }
 
-    #compose_stacks.cm-advanced-view thead th.col-icon {
-        width: 30px;
+    #compose_stacks thead th.col-memory {
+        width: calc((100% - var(--cm-col-fixed-px)) * var(--cm-col-memory-frac))
     }
 
-    #compose_stacks.cm-advanced-view thead th.col-name {
-        width: 12%;
+    #compose_stacks thead th.col-net_io {
+        width: calc((100% - var(--cm-col-fixed-px)) * var(--cm-col-net-io-frac))
     }
 
-    #compose_stacks.cm-advanced-view thead th.col-update {
-        width: 8%
+    #compose_stacks thead th.col-block_io {
+        width: calc((100% - var(--cm-col-fixed-px)) * var(--cm-col-block-io-frac))
     }
 
-    #compose_stacks.cm-advanced-view thead th.col-containers {
-        width: 4%
+    #compose_stacks thead th.col-description {
+        width: calc((100% - var(--cm-col-fixed-px)) * var(--cm-col-description-frac))
     }
 
-    #compose_stacks.cm-advanced-view thead th.col-uptime {
-        width: 5%
-    }
-
-    #compose_stacks.cm-advanced-view thead th.col-cpu {
-        width: 8%
-    }
-
-    #compose_stacks.cm-advanced-view thead th.col-memory {
-        width: 12%
-    }
-
-    #compose_stacks.cm-advanced-view thead th.col-net_io {
-        width: 9%
-    }
-
-    #compose_stacks.cm-advanced-view thead th.col-block_io {
-        width: 9%
-    }
-
-    #compose_stacks.cm-advanced-view thead th.col-description {
-        width: 15%
-    }
-
-    #compose_stacks.cm-advanced-view thead th.col-path {
-        width: 15%
-    }
-
-    #compose_stacks.cm-advanced-view thead th.col-autostart {
-        width: 8%
+    #compose_stacks thead th.col-path {
+        width: calc((100% - var(--cm-col-fixed-px)) * var(--cm-col-path-frac))
     }
 
     /* Center the Containers column */
@@ -215,19 +205,6 @@ function compose_manager_cpu_spec_count($cpuSpec)
         vertical-align: middle
     }
 
-    /* Advanced/basic visibility — CSS-only so no flash of hidden content */
-    #compose_stacks .cm-advanced {
-        display: none
-    }
-
-    #compose_stacks.cm-advanced-view .cm-advanced {
-        display: table-cell
-    }
-
-    #compose_stacks.cm-advanced-view div.cm-advanced {
-        display: block
-    }
-
     /* Detail row */
     #compose_stacks .stack-details-cell {
         width: auto !important
diff --git a/source/compose.manager/javascript/composeColumnCustomizer.js b/source/compose.manager/javascript/composeColumnCustomizer.js
index f2b168d8..fe3f8a18 100644
--- a/source/compose.manager/javascript/composeColumnCustomizer.js
+++ b/source/compose.manager/javascript/composeColumnCustomizer.js
@@ -51,6 +51,34 @@
         service: $.extend({}, defaults.service)
     };
 
+    var STACK_WIDTH_WEIGHTS = {
+        name: 23,
+        update: 16,
+        containers: 8,
+        uptime: 9,
+        cpu: 10,
+        memory: 13,
+        net_io: 10,
+        block_io: 10,
+        description: 14,
+        path: 12,
+        autostart: 8
+    };
+
+    var STACK_DEFAULT_VISIBLE = {
+        name: true,
+        update: true,
+        containers: true,
+        uptime: true,
+        autostart: true,
+        cpu: true,
+        memory: true,
+        net_io: false,
+        block_io: false,
+        description: true,
+        path: true
+    };
+
     function normalizePrefs(incoming) {
         var out = {
             stack: $.extend({}, defaults.stack),
@@ -75,6 +103,66 @@
         Object.keys(prefs[scope]).forEach(function(col) {
             $tables.toggleClass('hide-col-' + col, !prefs[scope][col]);
         });
+        if (scope === 'stack') {
+            applyStackWidthMath();
+            syncStackColspans();
+        }
+        forceTableLayoutReflow($tables);
+    }
+
+    // Number of physically rendered stack columns (arrow, icon, and the five
+    // always-on columns are fixed; the rest depend on visibility prefs).
+    function getVisibleStackColCount() {
+        var count = 7; // arrow, icon, name, update, containers, uptime, autostart
+        Object.keys(STACK_COLS).forEach(function(col) {
+            if (prefs.stack[col]) count++;
+        });
+        return count;
+    }
+
+    // Full-width rows (detail rows, progress/empty/error rows) are authored with
+    // a static colspan that assumes every column exists. Under table-layout:fixed
+    // an oversized colspan keeps the display:none columns' slots alive, so they
+    // steal width from the visible columns. Clamp colspan to the live column count.
+    function syncStackColspans() {
+        var count = getVisibleStackColCount();
+        $('#compose_stacks').find('td[colspan]').attr('colspan', count);
+    }
+
+    function applyStackWidthMath() {
+        var $table = $('#compose_stacks');
+        if (!$table.length) return;
+
+        var visible = $.extend({}, STACK_DEFAULT_VISIBLE);
+        Object.keys(STACK_COLS).forEach(function(col) {
+            visible[col] = !!prefs.stack[col];
+        });
+
+        var totalWeight = 0;
+        Object.keys(STACK_WIDTH_WEIGHTS).forEach(function(col) {
+            if (visible[col]) {
+                totalWeight += STACK_WIDTH_WEIGHTS[col];
+            }
+        });
+        if (totalWeight <= 0) return;
+
+        var tableEl = $table[0];
+        Object.keys(STACK_WIDTH_WEIGHTS).forEach(function(col) {
+            var fraction = visible[col] ? (STACK_WIDTH_WEIGHTS[col] / totalWeight) : 0;
+            var cssVar = '--cm-col-' + col.replace(/_/g, '-') + '-frac';
+            tableEl.style.setProperty(cssVar, String(fraction));
+        });
+    }
+
+    function forceTableLayoutReflow($tables) {
+        if (!$tables || !$tables.length) return;
+
+        // Toggling display on columns already triggers a fixed-layout recompute;
+        // we only need a read to flush it synchronously. No width mutation (that
+        // caused a visible "snap"). Column widths come purely from CSS vars.
+        $tables.each(function() {
+            if (this) void this.offsetWidth;
+        });
     }
 
     function applyAll() {
@@ -180,7 +268,7 @@
                 applyScope(scope);
             });
 
-            this.addHeaderGearIcon();
+            this.addToolbarButton();
             fetchPrefs(function() {
                 syncModalFromPrefs();
                 applyAll();
@@ -191,6 +279,10 @@
             applyAll();
         },
 
+        syncColspans: function() {
+            syncStackColspans();
+        },
+
         openModal: function() {
             syncModalFromPrefs();
             $('#compose-col-settings-modal').fadeIn(150);
@@ -210,11 +302,28 @@
             });
         },
 
-        addHeaderGearIcon: function() {
-            var $autostart = $('#compose_stacks thead th.col-autostart');
-            if (!$autostart.length || $autostart.find('.compose-col-gear-icon').length) return;
-            var gearHtml = '<a href="#" class="compose-col-gear-icon" title="Customize columns" onclick="event.preventDefault(); composeColCustomizer.openModal();"><i class="fa fa-sliders fa-rotate-90"></i></a>';
-            $autostart.append(gearHtml);
+        addToolbarButton: function() {
+            if ($('#compose-col-launcher-wrap').length) return;
+
+            var launcherHtml = '' +
+                '<div id="compose-col-launcher-wrap" class="ToggleViewMode compose-col-launcher-wrap">' +
+                '<a href="#" class="compose-col-launcher" title="Customize visible columns" onclick="event.preventDefault(); composeColCustomizer.openModal();">' +
+                '<i class="fa fa-sliders fa-rotate-90" aria-hidden="true"></i>' +
+                '<span>Columns</span>' +
+                '</a>' +
+                '</div>';
+
+            var $launcher = $(launcherHtml);
+            var $tableWrapper = $('#compose_stacks').closest('.TableContainer');
+            if ($tableWrapper.length) {
+                $tableWrapper.before($launcher);
+            } else if ($('#compose_stacks').length) {
+                $('#compose_stacks').before($launcher);
+            } else if ($('.tabs').length) {
+                $('.tabs').append($launcher);
+            } else {
+                $('body').prepend($launcher);
+            }
         }
     };
 
diff --git a/source/compose.manager/javascript/composeManagerMain.js b/source/compose.manager/javascript/composeManagerMain.js
index 1c949db0..701cb20e 100644
--- a/source/compose.manager/javascript/composeManagerMain.js
+++ b/source/compose.manager/javascript/composeManagerMain.js
@@ -503,6 +503,12 @@ function composeLoadlist() {
                     return;
                 }
 
+                // Ensure hidden-column classes and table geometry are applied
+                // before progressive rows begin rendering.
+                if (window.composeColCustomizer && typeof window.composeColCustomizer.reapply === 'function') {
+                    window.composeColCustomizer.reapply();
+                }
+
                 // Warm expansion settings once so progressive row insertions can expand immediately.
                 ensureComposeDefaultExpandSettings();
 
@@ -520,6 +526,12 @@ function composeLoadlist() {
                     '</tr>';
                 $('#compose_list').html(progressHtml);
 
+                // The progress row uses a static full-width colspan; clamp it to the
+                // live column count so hidden columns don't reserve width.
+                if (window.composeColCustomizer && typeof window.composeColCustomizer.syncColspans === 'function') {
+                    window.composeColCustomizer.syncColspans();
+                }
+
                 // Prime cached update status early so rows can render status as soon as they land.
                 if (!savedUpdateStatusLoaded) {
                     loadSavedUpdateStatus();
@@ -743,6 +755,12 @@ function initializeProgressiveLoadedRows($rowChunk) {
     // Apply default expansion policy per row as soon as it is inserted.
     applyDefaultExpansionToRows($rows);
 
+    // Newly inserted rows include detail rows with a static full-width colspan;
+    // clamp it to the live column count so hidden columns don't reserve width.
+    if (window.composeColCustomizer && typeof window.composeColCustomizer.syncColspans === 'function') {
+        window.composeColCustomizer.syncColspans();
+    }
+
     // Notify dockerload/hide-from-docker listeners so new rows can receive live updates now.
     $(document).trigger('composeListRefreshed');
     if (typeof window.composeDockerLoadToggle === 'function' && isComposeAdvancedMode()) {
@@ -759,8 +777,9 @@ function initializeProgressiveLoadedRows($rowChunk) {
     var editor = composeBootstrap.editorModalCss || '';
     if (base && !$('link[href="' + base + '"]').length)
         $('head').append($('<link rel="stylesheet" type="text/css" />').attr('href', base));
-    if (editor && !$('link[href="' + editor + '"]').length)
+    if (editor && !$('link[href="' + editor + '"]').length) {
         $('head').append($('<link rel="stylesheet" type="text/css" />').attr('href', editor));
+    }
 })();
 
 function basename(path) {
@@ -1939,82 +1958,14 @@ function processWebUIUrl(url) {
 }
 
 function isComposeAdvancedMode() {
-    return $.cookie('compose_listview_mode') === 'advanced';
+    return true;
 }
 
-// Apply advanced/basic view based on cookie (used after async load)
-// Scoped to compose_stacks to avoid affecting Docker tab when tabs are joined.
-// When animate=true (user clicked toggle), run a simple symmetric transition.
-// When false (page load), instant class toggle.
+// Legacy compatibility shim. Basic/advanced toggle was removed in favor of
+// column customizer visibility controls.
 function applyListView(animate) {
-    // Sync the dockerload WebSocket with the view mode.
     if (typeof window.composeDockerLoadToggle === 'function') {
-        window.composeDockerLoadToggle(isComposeAdvancedMode());
-    }
-    var advanced = isComposeAdvancedMode();
-    var $table = $('#compose_stacks');
-    var $advanced = $table.find('.cm-advanced');
-
-    var setClass = function(enabled) {
-        if (enabled) {
-            $table.addClass('cm-advanced-view');
-        } else {
-            $table.removeClass('cm-advanced-view');
-        }
-    };
-
-    if (!animate) {
-        setClass(advanced);
-        $table.css({
-            height: '',
-            overflow: ''
-        });
-        $advanced.css({
-            opacity: '',
-            display: ''
-        });
-    } else {
-        if (advanced) {
-            // basic -> advanced: enable class first, then fade in advanced cells
-            setClass(true);
-            $table.css({
-                height: $table.outerHeight(),
-                overflow: 'hidden'
-            });
-            $advanced.stop(true, true).css({
-                opacity: 0
-            }).animate({
-                opacity: 1
-            }, 300, function() {
-                $table.css({
-                    height: '',
-                    overflow: ''
-                });
-                $advanced.css({
-                    opacity: '',
-                    display: ''
-                });
-            });
-        } else {
-            // advanced -> basic: fade out then disable class to avoid flicker
-            $table.css({
-                height: $table.outerHeight(),
-                overflow: 'hidden'
-            });
-            $advanced.stop(true, true).animate({
-                opacity: 0
-            }, 300, function() {
-                setClass(false);
-                $table.css({
-                    height: '',
-                    overflow: ''
-                });
-                $advanced.css({
-                    opacity: '',
-                    display: ''
-                });
-            });
-        }
+        window.composeDockerLoadToggle(true);
     }
 
     // Apply readmore to descriptions — exclude container detail rows; destroy first to avoid nested wrappers
@@ -2064,47 +2015,8 @@ $(function() {
         }
     });
 
-    // Add Advanced View toggle (like Docker tab)
-    // Use compose-specific class to avoid conflict with Docker tab's advancedview when tabs are joined
-    var toggleHtml = '<span class="status compose-view-toggle"><span><input type="checkbox" class="compose-advancedview"></span></span>';
-
-    // In tabbed mode we must keep the toggle inside the compose content pane
-    // so it does not leak into the global tab bar, and in standalone mode it
-    // also appears above the compose stacks table.
-    var $toggleContainer = $('<div class="ToggleViewMode"></div>').html(toggleHtml);
-    var $tableWrapper = $('#compose_stacks').closest('.TableContainer');
-    if ($tableWrapper.length) {
-        $tableWrapper.before($toggleContainer);
-    } else if ($('#compose_stacks').length) {
-        $('#compose_stacks').before($toggleContainer);
-    } else if ($('.tabs').length) {
-        // Fallback for unusual layout: inject into tabs as a last resort
-        $('.tabs').append($toggleContainer);
-    } else {
-        $('body').prepend($toggleContainer);
-    }
-
-
-    // Initialize the Advanced/Basic view toggle.
-    // labels_placement:'left' puts both labels to the left of the slider.
-    // The plugin shows only the active label: "Basic View" (white) when
-    // unchecked, "Advanced View" (blue / class 'on') when checked.
-    var isAdvanced = $.cookie('compose_listview_mode') === 'advanced';
-    $('.compose-advancedview').switchButton({
-        labels_placement: 'left',
-        on_label: 'Advanced View',
-        off_label: 'Basic View',
-        checked: isAdvanced
-    });
-    // Apply the current cookie state immediately so columns match the toggle.
+    // Refresh per-row UI helpers after initial DOM is ready.
     applyListView();
-    $('.compose-advancedview').change(function() {
-        // Persist selection and apply view consistently via applyListView()
-        $.cookie('compose_listview_mode', $('.compose-advancedview').is(':checked') ? 'advanced' : 'basic', {
-            expires: 3650
-        });
-        applyListView(true);
-    });
 
     // ebox observer removed; pending update checks are now processed from
     // refreshStackRow and processPendingComposeReloads directly.
diff --git a/source/compose.manager/sheets/ComboButton.css b/source/compose.manager/sheets/ComboButton.css
index 9bea40ec..dcbf9857 100644
--- a/source/compose.manager/sheets/ComboButton.css
+++ b/source/compose.manager/sheets/ComboButton.css
@@ -302,6 +302,7 @@
 
   .compose-ct-table th,
   .compose-ct-table td {
+    box-sizing: border-box;
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
@@ -425,21 +426,41 @@
   }
 
   /* ============================================
-   Column Customizer Modal & Gear Icon
+   Column Customizer Launcher + Modal
    ============================================ */
 
-  .compose-col-gear-icon {
-    display: inline-block;
-    margin-left: 12px;
-    padding: 4px 8px;
-    cursor: pointer;
-    color: var(--brand-orange);
+  .compose-col-launcher-wrap {
+    text-align: right;
+    margin-bottom: 6px;
+  }
+
+  .compose-col-launcher {
+    display: inline-flex;
+    align-items: center;
+    gap: 8px;
+    padding: 4px 10px;
+    border: 1px solid var(--border-color);
+    border-radius: 4px;
+    background: var(--dynamix-tablesorter-tbody-row-alt-bg-color);
+    color: var(--link-text-color, var(--text-color));
     text-decoration: none;
-    transition: opacity 0.2s ease;
+    text-transform: uppercase;
+    letter-spacing: 0.06em;
+    font-size: 0.9em;
+    line-height: 1.2;
+    transition: border-color 0.2s ease, color 0.2s ease, background-color 0.2s ease;
   }
 
-  .compose-col-gear-icon:hover {
-    opacity: 0.7;
+  .compose-col-launcher i {
+    color: var(--brand-orange);
+  }
+
+  .compose-col-launcher:hover,
+  .compose-col-launcher:focus {
+    border-color: var(--brand-orange);
+    color: var(--brand-orange);
+    background: var(--action-hover-bg);
+    text-decoration: none;
   }
 
   /* Column Customization Modal */

From b41d4f3378c545e143e2aa0dc4692339466cf0e4 Mon Sep 17 00:00:00 2001
From: mstrhakr <mstrhakr@gmail.com>
Date: Mon, 15 Jun 2026 09:43:46 -0400
Subject: [PATCH 52/67] feat: add expand/collapse all functionality for compose
 stacks

---
 .../include/ComposeManager.php                | 50 ++++++++++++-
 .../javascript/composeManagerMain.js          | 75 +++++++++++++++++++
 2 files changed, 124 insertions(+), 1 deletion(-)

diff --git a/source/compose.manager/include/ComposeManager.php b/source/compose.manager/include/ComposeManager.php
index c37ea563..0c8d369b 100755
--- a/source/compose.manager/include/ComposeManager.php
+++ b/source/compose.manager/include/ComposeManager.php
@@ -122,6 +122,50 @@ function compose_manager_cpu_spec_count($cpuSpec)
         padding: 0;
     }
 
+    #compose_stacks thead th.col-arrow .compose-stack-toggle-all {
+        width: 24px;
+        height: 24px;
+        margin: 0 auto;
+        padding: 0;
+        border: 0;
+        background: none;
+        appearance: none;
+        -webkit-appearance: none;
+        border-radius: 4px;
+        color: var(--dynamix-tablesorter-thead-th-text-color);
+        cursor: pointer;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        font-size: 14px;
+        line-height: 1;
+        opacity: 0.95;
+    }
+
+    #compose_stacks thead th.col-arrow .compose-stack-toggle-all i {
+        transition: transform 0.2s ease;
+        transform: rotate(0deg);
+    }
+
+    #compose_stacks thead th.col-arrow .compose-stack-toggle-all.is-expanded i {
+        transform: rotate(180deg);
+    }
+
+    #compose_stacks thead th.col-arrow .compose-stack-toggle-all:hover {
+        color: var(--orange-text, var(--brand-orange));
+        opacity: 1;
+    }
+
+    #compose_stacks thead th.col-arrow .compose-stack-toggle-all:focus-visible {
+        outline: 1px solid var(--brand-orange);
+        outline-offset: 2px;
+    }
+
+    #compose_stacks thead th.col-arrow .compose-stack-toggle-all:disabled {
+        cursor: default;
+        opacity: 0.45;
+    }
+
     #compose_stacks td.col-arrow {
         text-align: center;
         white-space: nowrap;
@@ -348,7 +392,11 @@ function compose_manager_cpu_spec_count($cpuSpec)
         <table id="compose_stacks" class="tablesorter shift" style="table-layout:fixed;width:100%">
             <thead>
                 <tr>
-                    <th class="col-arrow"></th>
+                    <th class="col-arrow">
+                        <div type="button" class="compose-stack-toggle-all" id="compose-stack-toggle-all" role="button" tabindex="0" onclick="toggleAllStackDetails(); return false;" title="Expand all stacks" aria-label="Expand all stacks">
+                            <i class="fa fa-angle-double-down"></i>
+                        </div>
+                    </th>
                     <th class="col-icon"></th>
                     <th class="col-name">Stack</th>
                     <th class="col-update">Update</th>
diff --git a/source/compose.manager/javascript/composeManagerMain.js b/source/compose.manager/javascript/composeManagerMain.js
index 701cb20e..6c9d4d6d 100644
--- a/source/compose.manager/javascript/composeManagerMain.js
+++ b/source/compose.manager/javascript/composeManagerMain.js
@@ -1324,6 +1324,10 @@ function applyDefaultExpansionToRows($rows) {
                 return null;
             });
         });
+
+        composeDefaultExpandQueue = composeDefaultExpandQueue.then(function() {
+            updateStackToggleAllButtonState();
+        });
     });
 }
 
@@ -6615,6 +6619,75 @@ function toggleStackDetails(stackId) {
             loadStackContainerDetails(stackId, project);
         }
     }
+
+    updateStackToggleAllButtonState();
+}
+
+function getComposeStackIds() {
+    return $('#compose_stacks tr.compose-sortable[id^="stack-row-"]').map(function() {
+        return this.id.replace('stack-row-', '');
+    }).get();
+}
+
+function isStackExpanded(stackId) {
+    var $detailsRow = $('#details-row-' + stackId);
+    var isVisible = $detailsRow.is(':visible');
+
+    // Keep JS expansion state aligned with the live DOM. During async detail loads,
+    // preserve the expanded intent until the row is rendered and shown.
+    if (isVisible) {
+        expandedStacks[stackId] = true;
+        return true;
+    }
+
+    if (!stackDetailsLoading[stackId]) {
+        expandedStacks[stackId] = false;
+    }
+
+    return !!expandedStacks[stackId];
+}
+
+function updateStackToggleAllButtonState() {
+    var $button = $('#compose-stack-toggle-all');
+    if (!$button.length) return;
+
+    var stackIds = getComposeStackIds();
+    var expandedCount = 0;
+
+    stackIds.forEach(function(stackId) {
+        if (isStackExpanded(stackId)) {
+            expandedCount++;
+        }
+    });
+
+    var hasStacks = stackIds.length > 0;
+    var allExpanded = hasStacks && expandedCount === stackIds.length;
+
+    $button.prop('disabled', !hasStacks);
+    $button.attr('title', allExpanded ? 'Collapse all stacks' : 'Expand all stacks');
+    $button.attr('aria-label', allExpanded ? 'Collapse all stacks' : 'Expand all stacks');
+    $button.toggleClass('is-expanded', allExpanded);
+}
+
+function toggleAllStackDetails(forceExpand) {
+    var stackIds = getComposeStackIds();
+    if (!stackIds.length) return;
+
+    var anyCollapsed = stackIds.some(function(stackId) {
+        return !isStackExpanded(stackId);
+    });
+    var shouldExpand = typeof forceExpand === 'boolean' ? forceExpand : anyCollapsed;
+
+    stackIds.forEach(function(stackId) {
+        var expanded = isStackExpanded(stackId);
+        if (shouldExpand && !expanded) {
+            toggleStackDetails(stackId);
+        } else if (!shouldExpand && expanded) {
+            toggleStackDetails(stackId);
+        }
+    });
+
+    updateStackToggleAllButtonState();
 }
 
 function loadStackContainerDetails(stackId, project) {
@@ -6739,6 +6812,8 @@ function loadStackContainerDetails(stackId, project) {
     return stackDetailsLoadPromises[stackId];
 }
 
+$(document).on('compose-list-loaded', updateStackToggleAllButtonState);
+
 function renderContainerDetails(stackId, containers, project) {
     var $container = $('#details-container-' + stackId);
 

From eb3e6df6dd4e4e7540f9f46db26cbca8447ad530 Mon Sep 17 00:00:00 2001
From: mstrhakr <mstrhakr@gmail.com>
Date: Mon, 15 Jun 2026 09:47:15 -0400
Subject: [PATCH 53/67] feat: enhance stack toggle functionality with batching
 and user intent tracking

---
 .../javascript/composeManagerMain.js          | 68 ++++++++++++++++++-
 1 file changed, 66 insertions(+), 2 deletions(-)

diff --git a/source/compose.manager/javascript/composeManagerMain.js b/source/compose.manager/javascript/composeManagerMain.js
index 6c9d4d6d..5c3c8bf5 100644
--- a/source/compose.manager/javascript/composeManagerMain.js
+++ b/source/compose.manager/javascript/composeManagerMain.js
@@ -769,6 +769,8 @@ function initializeProgressiveLoadedRows($rowChunk) {
     if (typeof window.composeDockerLoadRenderCached === 'function' && isComposeAdvancedMode()) {
         window.composeDockerLoadRenderCached();
     }
+
+    updateStackToggleAllButtonState();
 }
 
 // Load external stylesheets (non-critical styles — critical ones are inline above)
@@ -1349,6 +1351,7 @@ function expandStackDetailsSequential(stackId) {
         return Promise.resolve();
     }
 
+    stackDetailsDesiredExpanded[stackId] = true;
     $expandIcon.addClass('expanded');
     expandedStacks[stackId] = true;
 
@@ -4584,6 +4587,13 @@ var stackDetailsPrefetchPromises = {};
 var stackDetailsPrefetchCache = {};
 // Suppress immediate refresh after a render to avoid loops
 var stackDetailsJustRendered = {};
+// Track user intent during async loads so late responses do not reopen collapsed rows.
+var stackDetailsDesiredExpanded = {};
+// Batch/safeguard toggle-all updates under rapid clicking.
+var stackToggleAllBatching = false;
+var stackToggleAllBusy = false;
+var stackToggleAllQueuedForceExpand = null;
+var stackToggleAllQueuedToggle = false;
 
 function prefetchStackDetailsInBackground(projects) {
     if (!Array.isArray(projects) || projects.length === 0) return;
@@ -6601,10 +6611,12 @@ function toggleStackDetails(stackId) {
 
     if (expandedStacks[stackId]) {
         // Collapse
+        stackDetailsDesiredExpanded[stackId] = false;
         $detailsRow.slideUp(200);
         $expandIcon.removeClass('expanded');
         expandedStacks[stackId] = false;
     } else {
+        stackDetailsDesiredExpanded[stackId] = true;
         $expandIcon.addClass('expanded');
         expandedStacks[stackId] = true;
 
@@ -6620,7 +6632,9 @@ function toggleStackDetails(stackId) {
         }
     }
 
-    updateStackToggleAllButtonState();
+    if (!stackToggleAllBatching) {
+        updateStackToggleAllButtonState();
+    }
 }
 
 function getComposeStackIds() {
@@ -6630,12 +6644,18 @@ function getComposeStackIds() {
 }
 
 function isStackExpanded(stackId) {
+    if (stackDetailsDesiredExpanded[stackId] === false) {
+        expandedStacks[stackId] = false;
+        return false;
+    }
+
     var $detailsRow = $('#details-row-' + stackId);
     var isVisible = $detailsRow.is(':visible');
 
     // Keep JS expansion state aligned with the live DOM. During async detail loads,
     // preserve the expanded intent until the row is rendered and shown.
     if (isVisible) {
+        stackDetailsDesiredExpanded[stackId] = true;
         expandedStacks[stackId] = true;
         return true;
     }
@@ -6670,6 +6690,16 @@ function updateStackToggleAllButtonState() {
 }
 
 function toggleAllStackDetails(forceExpand) {
+    if (stackToggleAllBusy) {
+        if (typeof forceExpand === 'boolean') {
+            stackToggleAllQueuedForceExpand = forceExpand;
+            stackToggleAllQueuedToggle = false;
+        } else {
+            stackToggleAllQueuedToggle = true;
+        }
+        return;
+    }
+
     var stackIds = getComposeStackIds();
     if (!stackIds.length) return;
 
@@ -6678,6 +6708,9 @@ function toggleAllStackDetails(forceExpand) {
     });
     var shouldExpand = typeof forceExpand === 'boolean' ? forceExpand : anyCollapsed;
 
+    stackToggleAllBusy = true;
+    stackToggleAllBatching = true;
+
     stackIds.forEach(function(stackId) {
         var expanded = isStackExpanded(stackId);
         if (shouldExpand && !expanded) {
@@ -6687,12 +6720,34 @@ function toggleAllStackDetails(forceExpand) {
         }
     });
 
+    stackToggleAllBatching = false;
+
     updateStackToggleAllButtonState();
+
+    // Allow animations/state to settle, then replay only the latest queued intent.
+    setTimeout(function() {
+        stackToggleAllBusy = false;
+
+        var queuedForceExpand = stackToggleAllQueuedForceExpand;
+        var queuedToggle = stackToggleAllQueuedToggle;
+        stackToggleAllQueuedForceExpand = null;
+        stackToggleAllQueuedToggle = false;
+
+        if (typeof queuedForceExpand === 'boolean') {
+            toggleAllStackDetails(queuedForceExpand);
+        } else if (queuedToggle) {
+            toggleAllStackDetails();
+        }
+    }, 240);
 }
 
 function loadStackContainerDetails(stackId, project) {
     var $container = $('#details-container-' + stackId);
 
+    if (typeof stackDetailsDesiredExpanded[stackId] === 'undefined') {
+        stackDetailsDesiredExpanded[stackId] = !!expandedStacks[stackId] || $('#details-row-' + stackId).is(':visible');
+    }
+
     function renderFromResponse(response, finishLoad) {
         if (response && response.result === 'success') {
             var containers = response.containers || [];
@@ -6711,7 +6766,15 @@ function loadStackContainerDetails(stackId, project) {
                 containers: containers.length
             }, 'user', 'debug', 'container-details');
             renderContainerDetails(stackId, containers, project);
-            $('#details-row-' + stackId).stop(true, true).slideDown(200, finishLoad);
+
+            if (stackDetailsDesiredExpanded[stackId] === false) {
+                expandedStacks[stackId] = false;
+                $('#details-row-' + stackId).stop(true, true).hide();
+                finishLoad();
+            } else {
+                expandedStacks[stackId] = true;
+                $('#details-row-' + stackId).stop(true, true).slideDown(200, finishLoad);
+            }
             return true;
         }
         return false;
@@ -6740,6 +6803,7 @@ function loadStackContainerDetails(stackId, project) {
         function finishLoad() {
             stackDetailsLoading[stackId] = false;
             delete stackDetailsLoadPromises[stackId];
+            updateStackToggleAllButtonState();
             resolve();
         }
 

From bfc0b1601ebf91380caf97a55e83772acb1eaaa0 Mon Sep 17 00:00:00 2001
From: mstrhakr <mstrhakr@gmail.com>
Date: Mon, 15 Jun 2026 09:56:00 -0400
Subject: [PATCH 54/67] feat: refactor column customization UI with transfer
 lists and responsive design

---
 .../javascript/composeColumnCustomizer.js     | 140 +++++++++++++++---
 source/compose.manager/sheets/ComboButton.css |  80 +++++++++-
 2 files changed, 197 insertions(+), 23 deletions(-)

diff --git a/source/compose.manager/javascript/composeColumnCustomizer.js b/source/compose.manager/javascript/composeColumnCustomizer.js
index fe3f8a18..72c942c9 100644
--- a/source/compose.manager/javascript/composeColumnCustomizer.js
+++ b/source/compose.manager/javascript/composeColumnCustomizer.js
@@ -170,14 +170,109 @@
         applyScope('service');
     }
 
-    function buildChecklist(scope, map) {
-        var html = '';
+    function getScopeMap(scope) {
+        return scope === 'stack' ? STACK_COLS : SERVICE_COLS;
+    }
+
+    function scopeSelectId(scope, side) {
+        return '#compose-col-' + scope + '-' + side;
+    }
+
+    function renderScopeTransfer(scope) {
+        var map = getScopeMap(scope);
+        var $hidden = $(scopeSelectId(scope, 'hidden'));
+        var $visible = $(scopeSelectId(scope, 'visible'));
+
+        if (!$hidden.length || !$visible.length) return;
+
+        var hiddenHtml = '';
+        var visibleHtml = '';
+
+        Object.keys(map).forEach(function(col) {
+            var optionHtml = '<option value="' + col + '">' + map[col] + '</option>';
+            if (prefs[scope] && prefs[scope][col]) {
+                visibleHtml += optionHtml;
+            } else {
+                hiddenHtml += optionHtml;
+            }
+        });
+
+        if (!hiddenHtml) {
+            hiddenHtml = '<option value="" disabled>(none)</option>';
+        }
+        if (!visibleHtml) {
+            visibleHtml = '<option value="" disabled>(none)</option>';
+        }
+
+        $hidden.html(hiddenHtml);
+        $visible.html(visibleHtml);
+    }
+
+    function renderTransferLists() {
+        renderScopeTransfer('stack');
+        renderScopeTransfer('service');
+    }
+
+    function setScopeColumnVisibility(scope, keys, isVisible) {
+        if (!keys || !keys.length || !prefs[scope]) return;
+
+        keys.forEach(function(col) {
+            if (Object.prototype.hasOwnProperty.call(prefs[scope], col)) {
+                prefs[scope][col] = isVisible;
+            }
+        });
+
+        applyScope(scope);
+        renderScopeTransfer(scope);
+    }
+
+    function getSelectedTransferKeys(scope, side) {
+        var values = $(scopeSelectId(scope, side)).val();
+        if (!values) return [];
+        return Array.isArray(values) ? values : [values];
+    }
+
+    function moveSelected(scope, toVisible) {
+        var side = toVisible ? 'hidden' : 'visible';
+        var keys = getSelectedTransferKeys(scope, side).filter(function(key) {
+            return key !== '';
+        });
+        setScopeColumnVisibility(scope, keys, toVisible);
+    }
+
+    function moveAll(scope, toVisible) {
+        var map = getScopeMap(scope);
+        var keys = [];
+
         Object.keys(map).forEach(function(col) {
-            html += '<label class="compose-col-checkbox-label">';
-            html += '<input type="checkbox" class="compose-col-checkbox" data-type="' + scope + '" data-col="' + col + '">';
-            html += '<span>' + map[col] + '</span>';
-            html += '</label>';
+            var currentlyVisible = !!(prefs[scope] && prefs[scope][col]);
+            if (toVisible && !currentlyVisible) keys.push(col);
+            if (!toVisible && currentlyVisible) keys.push(col);
         });
+
+        setScopeColumnVisibility(scope, keys, toVisible);
+    }
+
+    function buildTransferSection(scope, title) {
+        var html = '<div class="compose-col-section">';
+        html += '<div class="compose-col-section-title">' + title + '</div>';
+        html += '<div class="compose-transfer-wrap">';
+        html += '<div class="compose-transfer-col">';
+        html += '<label for="compose-col-' + scope + '-hidden">Hidden</label>';
+        html += '<select id="compose-col-' + scope + '-hidden" class="compose-transfer-select" multiple></select>';
+        html += '</div>';
+        html += '<div class="compose-transfer-actions">';
+        html += '<div class="compose-transfer-btn" role="button" tabindex="0" data-scope="' + scope + '" data-action="selected-right" title="Show selected" aria-label="Show selected">&gt;</div>';
+        html += '<div class="compose-transfer-btn" role="button" tabindex="0" data-scope="' + scope + '" data-action="all-right" title="Show all" aria-label="Show all">&gt;&gt;</div>';
+        html += '<div class="compose-transfer-btn" role="button" tabindex="0" data-scope="' + scope + '" data-action="selected-left" title="Hide selected" aria-label="Hide selected">&lt;</div>';
+        html += '<div class="compose-transfer-btn" role="button" tabindex="0" data-scope="' + scope + '" data-action="all-left" title="Hide all" aria-label="Hide all">&lt;&lt;</div>';
+        html += '</div>';
+        html += '<div class="compose-transfer-col">';
+        html += '<label for="compose-col-' + scope + '-visible">Visible</label>';
+        html += '<select id="compose-col-' + scope + '-visible" class="compose-transfer-select" multiple></select>';
+        html += '</div>';
+        html += '</div>';
+        html += '</div>';
         return html;
     }
 
@@ -189,8 +284,8 @@
         html += '<button class="compose-modal-close" type="button" onclick="composeColCustomizer.closeModal();"><i class="fa fa-times"></i></button>';
         html += '</div>';
         html += '<div class="compose-modal-body">';
-        html += '<div class="compose-col-section"><div class="compose-col-section-title">Stack Columns</div><div class="compose-col-checklist" id="compose-stack-cols">' + buildChecklist('stack', STACK_COLS) + '</div></div>';
-        html += '<div class="compose-col-section"><div class="compose-col-section-title">Service Columns</div><div class="compose-col-checklist" id="compose-service-cols">' + buildChecklist('service', SERVICE_COLS) + '</div></div>';
+        html += buildTransferSection('stack', 'Stack Columns');
+        html += buildTransferSection('service', 'Service Columns');
         html += '</div>';
         html += '<div class="compose-modal-footer">';
         html += '<button class="compose-modal-btn compose-modal-btn-save" type="button" onclick="composeColCustomizer.saveAndClose();">Save</button>';
@@ -200,12 +295,7 @@
     }
 
     function syncModalFromPrefs() {
-        $('.compose-col-checkbox').each(function() {
-            var scope = $(this).data('type');
-            var col = $(this).data('col');
-            var checked = !!(prefs[scope] && prefs[scope][col]);
-            $(this).prop('checked', checked);
-        });
+        renderTransferLists();
     }
 
     function fetchPrefs(cb) {
@@ -260,12 +350,22 @@
                 $('body').append(buildModal());
             }
 
-            $(document).on('change', '.compose-col-checkbox', function() {
-                var scope = $(this).data('type');
-                var col = $(this).data('col');
-                if (!prefs[scope] || !Object.prototype.hasOwnProperty.call(prefs[scope], col)) return;
-                prefs[scope][col] = $(this).is(':checked');
-                applyScope(scope);
+            $(document).on('click', '.compose-transfer-btn', function() {
+                var scope = $(this).data('scope');
+                var action = $(this).data('action');
+
+                if (!scope || !action) return;
+
+                if (action === 'selected-right') moveSelected(scope, true);
+                if (action === 'all-right') moveAll(scope, true);
+                if (action === 'selected-left') moveSelected(scope, false);
+                if (action === 'all-left') moveAll(scope, false);
+            });
+
+            $(document).on('keydown', '.compose-transfer-btn', function(e) {
+                if (e.key !== 'Enter' && e.key !== ' ') return;
+                e.preventDefault();
+                $(this).trigger('click');
             });
 
             this.addToolbarButton();
diff --git a/source/compose.manager/sheets/ComboButton.css b/source/compose.manager/sheets/ComboButton.css
index dcbf9857..daca341d 100644
--- a/source/compose.manager/sheets/ComboButton.css
+++ b/source/compose.manager/sheets/ComboButton.css
@@ -485,7 +485,7 @@
     border-radius: 8px;
     box-shadow: var(--panel-box-shadow);
     width: 90%;
-    max-width: 450px;
+    max-width: 560px;
     max-height: 70vh;
     display: flex;
     flex-direction: column;
@@ -540,10 +540,72 @@
     letter-spacing: 0.05em;
   }
 
-  .compose-col-checklist {
+  .compose-transfer-wrap {
+    display: grid;
+    grid-template-columns: 1fr auto 1fr;
+    gap: 6px;
+    align-items: stretch;
+  }
+
+  .compose-transfer-col {
     display: flex;
     flex-direction: column;
-    gap: 10px;
+    gap: 6px;
+  }
+
+  .compose-transfer-col label {
+    font-weight: 600;
+    color: var(--alt-text-color);
+    font-size: 0.86em;
+    letter-spacing: 0.02em;
+    text-transform: uppercase;
+  }
+
+  .compose-transfer-select {
+    min-height: 116px;
+    width: 100%;
+    border: 1px solid var(--border-color);
+    border-radius: 4px;
+    background-color: var(--background-color);
+    color: var(--text-color);
+    font-size: 0.93em;
+    padding: 4px;
+  }
+
+  .compose-transfer-actions {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    gap: 2px;
+    min-width: 22px;
+  }
+
+  .compose-transfer-btn {
+    min-width: 22px;
+    height: 20px;
+    margin: 0;
+    padding: 0;
+    border: 0;
+    background: transparent;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    font-weight: 700;
+    line-height: 1;
+    font-size: 11px;
+    color: var(--brand-orange);
+    cursor: pointer;
+    border-radius: 3px;
+    user-select: none;
+  }
+
+  .compose-transfer-btn:hover {
+    background: color-mix(in srgb, var(--brand-orange) 16%, transparent);
+  }
+
+  .compose-transfer-btn:focus-visible {
+    outline: 1px solid var(--brand-orange);
+    outline-offset: 1px;
   }
 
   .compose-col-checkbox-label {
@@ -600,6 +662,18 @@
     opacity: 0.9;
   }
 
+  @media (max-width: 800px) {
+    .compose-transfer-wrap {
+      grid-template-columns: 1fr;
+      gap: 10px;
+    }
+
+    .compose-transfer-actions {
+      flex-direction: row;
+      flex-wrap: wrap;
+    }
+  }
+
   /* Column hiding via hide-col-* classes */
   #compose_stacks.hide-col-cpu .col-cpu,
   #compose_stacks.hide-col-cpu td.col-cpu,

From 085daba1cc1ec6a44d95b878d1995550d25548c6 Mon Sep 17 00:00:00 2001
From: "github-actions[bot]" <github-actions[bot]@users.noreply.github.com>
Date: Mon, 15 Jun 2026 14:00:57 +0000
Subject: [PATCH 55/67] chore: update changelog for v2026.06.15.1000 [skip ci]

---
 compose.manager.plg | 11 ++++++++---
 1 file changed, 8 insertions(+), 3 deletions(-)

diff --git a/compose.manager.plg b/compose.manager.plg
index 496aca5a..eac7dd7d 100644
--- a/compose.manager.plg
+++ b/compose.manager.plg
@@ -36,10 +36,15 @@
 >
 
 <CHANGES>
-###2026.06.14.1531
-- Minor updates and improvements
+###2026.06.15.1000
+- Features: refactor column customization UI with transfer lists and responsive design
+- Features: enhance stack toggle functionality with batching and user intent tracking
+- Features: add expand/collapse all functionality for compose stacks
+- Features: promote col customizer and remove basic/advanced toggle
+- Features: Implement snapshot loading for compose metrics and enhance data publishing to ensure data shows during progressive loading
+- Features: Add column visibility customization for stack and service tables
 - [PR #120](https://github.com/mstrhakr/compose_plugin/pull/120)
-- [beta release diff](https://github.com/mstrhakr/compose_plugin/compare/v2026.06.06...v2026.06.14.1531)
+- [beta release diff](https://github.com/mstrhakr/compose_plugin/compare/v2026.06.06...v2026.06.15.1000)
 </CHANGES>
 
 <!-- The 'pre-install' script. -->

From f15a81509b16a63bfb6aebc65f178acd2764db8c Mon Sep 17 00:00:00 2001
From: "github-actions[bot]" <github-actions[bot]@users.noreply.github.com>
Date: Mon, 15 Jun 2026 14:01:51 +0000
Subject: [PATCH 56/67] Release v2026.06.15.1000 [skip ci]

---
 compose.manager.plg | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/compose.manager.plg b/compose.manager.plg
index eac7dd7d..6bafeef5 100644
--- a/compose.manager.plg
+++ b/compose.manager.plg
@@ -2,11 +2,11 @@
 <!DOCTYPE PLUGIN [
 <!ENTITY name "compose.manager">
 <!ENTITY author "mstrhakr">
-<!ENTITY version     "2026.06.14.1531">
+<!ENTITY version     "2026.06.15.1000">
 <!ENTITY launch "Settings/&name;.settings">
 <!ENTITY packageVER "&version;">
-<!ENTITY packageMD5  "a527a2caa304009c54cd032899348e85">
-<!ENTITY pkgBUILD    "1531">
+<!ENTITY packageMD5  "6f65a37884f19b4ff9712b05e4331150">
+<!ENTITY pkgBUILD    "1000">
 <!ENTITY packageName "&name;-&packageVER;-noarch-&pkgBUILD;">
 <!ENTITY packagefile "&packageName;.txz">
 <!ENTITY github "mstrhakr/compose_plugin">

From 445ebb56ae9fa4a9511a4bc3881f76fbeaa59d6b Mon Sep 17 00:00:00 2001
From: mstrhakr <mstrhakr@gmail.com>
Date: Tue, 16 Jun 2026 12:15:51 -0400
Subject: [PATCH 57/67] feat: add custom interval settings for compose stats
 and enhance nchan publisher

---
 .../compose.manager.settings.page             |  33 +++
 source/compose.manager/default.cfg            |   2 +
 .../javascript/composeManagerMain.js          | 136 +++++++---
 source/compose.manager/nchan/compose_info     | 233 +++++++++++++++---
 4 files changed, 331 insertions(+), 73 deletions(-)

diff --git a/source/compose.manager/compose.manager.settings.page b/source/compose.manager/compose.manager.settings.page
index f8f601ed..4d1d9603 100755
--- a/source/compose.manager/compose.manager.settings.page
+++ b/source/compose.manager/compose.manager.settings.page
@@ -696,6 +696,12 @@ $acePath = file_exists('/usr/local/emhttp/plugins/dynamix/javascript/ace/ace.js'
         $('#AUTO_CHECK_UPDATES_DAYS').prop('disabled', !autoCheckEnabled);
     }
 
+    function toggleComposeStatsCustomInterval() {
+        var mode = ($('#COMPOSE_STATS_RATE_MODE').val() || 'live').toLowerCase();
+        var isCustom = mode === 'custom';
+        $('#COMPOSE_STATS_CUSTOM_INTERVAL_MS').prop('disabled', !isCustom);
+    }
+
     $(function() {
         // Keep the initial states to determine if a safety confirmation is needed on save
         var origDisableActionWarnings = $('#DISABLE_ACTION_WARNINGS').is(':checked');
@@ -980,6 +986,10 @@ $acePath = file_exists('/usr/local/emhttp/plugins/dynamix/javascript/ace/ace.js'
         toggleExpandByDefault();
         $('#STACKS_DEFAULT_EXPANDED').change(toggleExpandByDefault);
 
+        // Enable custom interval only when the custom preset is selected.
+        toggleComposeStatsCustomInterval();
+        $('#COMPOSE_STATS_RATE_MODE').on('change', toggleComposeStatsCustomInterval);
+
         // Apply compose on top on load and on change
         toggleComposeOnTop();
         $('#SHOW_COMPOSE_IN_HEADER_MENU').change(toggleComposeOnTop);
@@ -2123,6 +2133,29 @@ $acePath = file_exists('/usr/local/emhttp/plugins/dynamix/javascript/ace/ace.js'
             </dd>
         </dl>
 
+        <dl>
+            <dt style="cursor: help;" onclick="toggleHelp(this)">_(Live Stats Update Rate)_:</dt>
+            <dd>
+                <label>
+                    <select name="COMPOSE_STATS_RATE_MODE" id="COMPOSE_STATS_RATE_MODE" style="min-width:180px;">
+                        <?php $statsRateMode = strtolower(trim((string)($cfg['COMPOSE_STATS_RATE_MODE'] ?? 'live'))); ?>
+                        <option value="live" <?= $statsRateMode === 'live' ? 'selected' : '' ?>>_(Live (max updates))_</option>
+                        <option value="medium" <?= $statsRateMode === 'medium' ? 'selected' : '' ?>>_(Medium (~2s))_</option>
+                        <option value="slow" <?= $statsRateMode === 'slow' ? 'selected' : '' ?>>_(Slow (~5s))_</option>
+                        <option value="custom" <?= $statsRateMode === 'custom' ? 'selected' : '' ?>>_(Custom)_</option>
+                    </select>
+                </label>
+                <label style="margin-left:12px;">
+                    _(Custom interval)_:
+                    <input type="number" name="COMPOSE_STATS_CUSTOM_INTERVAL_MS" id="COMPOSE_STATS_CUSTOM_INTERVAL_MS" min="100" max="10000" step="50" value="<?= intval($cfg['COMPOSE_STATS_CUSTOM_INTERVAL_MS'] ?? '1000') ?>" style="width:90px;"> _(ms)_
+                </label>
+                <blockquote class="inline_help">
+                    Controls how often Compose live metrics are published.<br>
+                    Live publishes each stream update, Medium uses ~2 seconds, Slow uses ~5 seconds, and Custom uses the interval in milliseconds.
+                </blockquote>
+            </dd>
+        </dl>
+
         <?php if (!$option_patch_ui): ?>
             <dl>
                 <dt style="cursor: help;" onclick="toggleHelp(this)">_(Patch Docker Page)_:</dt>
diff --git a/source/compose.manager/default.cfg b/source/compose.manager/default.cfg
index 2af0a493..20b3810b 100755
--- a/source/compose.manager/default.cfg
+++ b/source/compose.manager/default.cfg
@@ -27,3 +27,5 @@ BACKUP_SCHEDULE_TIME="03:00"
 BACKUP_SCHEDULE_DAY="1"
 STACKS_DEFAULT_EXPANDED="false"
 ONLY_EXPAND_RUNNING_STACKS="false"
+COMPOSE_STATS_RATE_MODE="live"
+COMPOSE_STATS_CUSTOM_INTERVAL_MS="1000"
diff --git a/source/compose.manager/javascript/composeManagerMain.js b/source/compose.manager/javascript/composeManagerMain.js
index 5c3c8bf5..a000758d 100644
--- a/source/compose.manager/javascript/composeManagerMain.js
+++ b/source/compose.manager/javascript/composeManagerMain.js
@@ -48,6 +48,31 @@ function parseMemUsagePair(memStr) {
         limit: limit
     };
 }
+
+// Remove terminal control bytes and normalize docker IDs used as DOM keys.
+function composeNormalizeContainerKey(rawId) {
+    var value = String(rawId || '');
+    // Strip ANSI CSI sequences and remaining control bytes.
+    value = value.replace(/\u001b\[[0-9;?]*[ -/]*[@-~]/g, '');
+    value = value.replace(/[\x00-\x1F\x7F-\x9F]/g, '');
+    value = value.trim();
+
+    // Prefer canonical hex ID if present.
+    var hexMatch = value.match(/[a-f0-9]{12,64}/i);
+    if (hexMatch && hexMatch[0]) {
+        return hexMatch[0].toLowerCase();
+    }
+    return value;
+}
+
+// Safe fragment for jQuery/CSS selector concatenation.
+function composeEscapeSelectorFragment(value) {
+    var normalized = composeNormalizeContainerKey(value);
+    if (typeof CSS !== 'undefined' && CSS && typeof CSS.escape === 'function') {
+        return CSS.escape(normalized);
+    }
+    return normalized.replace(/([!"#$%&'()*+,./:;<=>?@[\\\]^`{|}~])/g, '\\$1');
+}
     function updateAddStackDefaultComposeDiscoveryState() {
         var $checkbox = $('#compose-stack-use-default-compose-files');
         var $notice = $('#compose-stack-default-compose-files-disabled-note');
@@ -586,7 +611,7 @@ function composeLoadlist() {
                                 var $rowChunk = $(rowResp.html);
                                 $('#compose-load-progress-row').before($rowChunk);
                                 initializeProgressiveLoadedRows($rowChunk);
-                                if (typeof window.composeDockerLoadRenderCached === 'function' && isComposeAdvancedMode()) {
+                                if (typeof window.composeDockerLoadRenderCached === 'function' && composeShouldEnableDockerLoad()) {
                                     window.composeDockerLoadRenderCached();
                                 }
                                 // Enforce top-down UX: wait for this stack's expansion/details work before next stack.
@@ -763,10 +788,10 @@ function initializeProgressiveLoadedRows($rowChunk) {
 
     // Notify dockerload/hide-from-docker listeners so new rows can receive live updates now.
     $(document).trigger('composeListRefreshed');
-    if (typeof window.composeDockerLoadToggle === 'function' && isComposeAdvancedMode()) {
-        window.composeDockerLoadToggle(true);
+    if (typeof window.composeDockerLoadToggle === 'function') {
+        window.composeDockerLoadToggle(composeShouldEnableDockerLoad());
     }
-    if (typeof window.composeDockerLoadRenderCached === 'function' && isComposeAdvancedMode()) {
+    if (typeof window.composeDockerLoadRenderCached === 'function' && composeShouldEnableDockerLoad()) {
         window.composeDockerLoadRenderCached();
     }
 
@@ -1907,10 +1932,12 @@ function loadPersistentContainerCache() {
             }
         })
             .done(function(response) {
+                composeLogger('Loaded persistent container cache', response, 'user', 'debug', 'load-cache');
                 persistentContainerCache = (response && response.cache) ? response.cache : {};
                 resolve(persistentContainerCache);
             })
             .fail(function() {
+                composeLogger('Failed to load persistent container cache', null, 'user', 'error', 'load-cache');
                 persistentContainerCache = {};
                 resolve(persistentContainerCache);
             });
@@ -1928,6 +1955,7 @@ function loadComposeLoadSnapshot() {
             }
         })
             .done(function(response) {
+                composeLogger('Loaded compose load snapshot', response, 'user', 'debug', 'load-snapshot');
                 var snapshot = (response && response.snapshot && typeof response.snapshot === 'object') ? response.snapshot : {};
                 window.composeLoadSnapshotRaw = typeof snapshot.raw === 'string' ? snapshot.raw : '';
                 window.composeLoadSnapshotTs = Number(snapshot.ts || 0);
@@ -1937,6 +1965,7 @@ function loadComposeLoadSnapshot() {
                 resolve(snapshot);
             })
             .fail(function() {
+                composeLogger('Failed to load compose load snapshot', null, 'user', 'error', 'load-snapshot');
                 window.composeLoadSnapshotRaw = '';
                 window.composeLoadSnapshotTs = 0;
                 resolve({});
@@ -1968,11 +1997,32 @@ function isComposeAdvancedMode() {
     return true;
 }
 
+function composeHasVisibleLoadColumns() {
+    var selector = [
+        '#compose_stacks td.col-cpu',
+        '#compose_stacks td.col-memory',
+        '#compose_stacks td.col-net_io',
+        '#compose_stacks td.col-block_io',
+        '#compose_stacks td.ct-col-cpu',
+        '#compose_stacks td.ct-col-memory',
+        '#compose_stacks td.ct-col-net_io',
+        '#compose_stacks td.ct-col-block_io'
+    ].join(',');
+    return $(selector).filter(':visible').length > 0;
+}
+
+function composeShouldEnableDockerLoad() {
+    if (document.visibilityState === 'hidden') {
+        return false;
+    }
+    return composeHasVisibleLoadColumns();
+}
+
 // Legacy compatibility shim. Basic/advanced toggle was removed in favor of
 // column customizer visibility controls.
 function applyListView(animate) {
     if (typeof window.composeDockerLoadToggle === 'function') {
-        window.composeDockerLoadToggle(true);
+        window.composeDockerLoadToggle(composeShouldEnableDockerLoad());
     }
 
     // Apply readmore to descriptions — exclude container detail rows; destroy first to avoid nested wrappers
@@ -2045,14 +2095,15 @@ $(function() {
                 elapsedMs: Date.now() - composeListLoadStartedAt,
                 mode: loadMode || 'standard',
                 composeListReady: true
-            }, 'user', 'info', 'dockerload');
+            }, 'user', 'info', 'composeLoadlist');
 
             // Start the dockerload socket now that the DOM has rows with data-ctids.
             if (typeof window.composeDockerLoadToggle === 'function') {
-                composeLogger('triggering composeDockerLoadToggle, advancedMode=' + isComposeAdvancedMode(), null, 'user', 'debug', 'dockerload');
-                window.composeDockerLoadToggle(isComposeAdvancedMode());
+                var shouldRunComposeStats = composeShouldEnableDockerLoad();
+                composeLogger('triggering composeDockerLoadToggle, enabled=' + shouldRunComposeStats, null, 'user', 'debug', 'composeLiveStats');
+                window.composeDockerLoadToggle(shouldRunComposeStats);
             } else {
-                composeLogger('composeDockerLoadToggle not available yet at composeLoadlist completion', null, 'user', 'debug', 'dockerload');
+                composeLogger('composeDockerLoadToggle not available yet at composeLoadlist completion', null, 'user', 'debug', 'composeLiveStats');
             }
 
         });
@@ -2137,9 +2188,8 @@ $(function() {
         })();
 
         // ── CPU & Memory load via dockerload Nchan channel ─────────────
-        // Only runs in advanced view (load column is hidden in basic view).
         // composeDockerLoadToggle(true/false) is called from applyListView()
-        // so the socket starts/stops whenever the user switches view modes.
+        // and column visibility handlers so the socket follows visible load columns.
         function initComposeDockerLoadSubscriber() {
             if (typeof NchanSubscriber !== 'function') {
                 composeLogger('NchanSubscriber not available yet', null, 'user', 'debug', 'dockerload');
@@ -2185,7 +2235,7 @@ $(function() {
             var composeLoadStaleMs = 15000;
 
             function isComposeLoadVisible() {
-                if (!isComposeAdvancedMode()) return false;
+                if (!composeHasVisibleLoadColumns()) return false;
                 if (document.visibilityState === 'hidden') return false;
                 var $table = $('#compose_stacks');
                 if (!$table.length) return false;
@@ -2195,12 +2245,13 @@ $(function() {
             }
 
             function clearContainerLoad(shortId) {
-                $('.compose-cpu-' + shortId).addClass('compose-text-muted').text('-');
-                $('#compose-cpu-bar-' + shortId).css('width', '0');
-                $('.compose-mem-' + shortId).addClass('compose-text-muted').text('-');
-                $('#compose-mem-bar-' + shortId).css('width', '0');
-                $('.compose-netio-' + shortId).addClass('compose-text-muted').html('-');
-                $('.compose-blockio-' + shortId).addClass('compose-text-muted').html('-');
+                var selectorId = composeEscapeSelectorFragment(shortId);
+                $('.compose-cpu-' + selectorId).addClass('compose-text-muted').text('-');
+                $('#compose-cpu-bar-' + selectorId).css('width', '0');
+                $('.compose-mem-' + selectorId).addClass('compose-text-muted').text('-');
+                $('#compose-mem-bar-' + selectorId).css('width', '0');
+                $('.compose-netio-' + selectorId).addClass('compose-text-muted').html('-');
+                $('.compose-blockio-' + selectorId).addClass('compose-text-muted').html('-');
             }
 
             // Build a lightweight fingerprint of stack rows + their container ids.
@@ -2241,11 +2292,6 @@ $(function() {
                     });
                 });
                 composeStackSignature = getComposeStackSignatureFromDom();
-                // During progressive initial load, row count changes rapidly.
-                // Avoid flooding debug logs until composeListReady is true.
-                if (composeListReady) {
-                    composeLogger('buildComposeStackIndex complete, stacks=' + composeStackIndex.length, null, 'user', 'debug', 'dockerload');
-                }
             }
 
             // Invalidate only when stack/container structure changed.
@@ -2309,12 +2355,13 @@ $(function() {
 
                 for (var shortId in composeLoadById) {
                     var info = composeLoadById[shortId];
-                    $('.compose-cpu-' + shortId).removeClass('compose-text-muted').text(info.cpuText + ' / 100%');
-                    $('.compose-mem-' + shortId).removeClass('compose-text-muted').text(info.mem);
-                    $('.compose-netio-' + shortId).removeClass('compose-text-muted').html(formatInOutHtml(info.netInput, info.netOutput, 'in', 'out'));
-                    $('.compose-blockio-' + shortId).removeClass('compose-text-muted').html(formatInOutHtml(info.blockInput, info.blockOutput, 'read', 'write'));
-                    $('#compose-cpu-bar-' + shortId).css('width', info.cpuText);
-                    $('#compose-mem-bar-' + shortId).css('width', Math.min(info.memPercent || 0, 100).toFixed(2) + '%');
+                    var selectorId = composeEscapeSelectorFragment(shortId);
+                    $('.compose-cpu-' + selectorId).removeClass('compose-text-muted').text(info.cpuText + ' / 100%');
+                    $('.compose-mem-' + selectorId).removeClass('compose-text-muted').text(info.mem);
+                    $('.compose-netio-' + selectorId).removeClass('compose-text-muted').html(formatInOutHtml(info.netInput, info.netOutput, 'in', 'out'));
+                    $('.compose-blockio-' + selectorId).removeClass('compose-text-muted').html(formatInOutHtml(info.blockInput, info.blockOutput, 'read', 'write'));
+                    $('#compose-cpu-bar-' + selectorId).css('width', info.cpuText);
+                    $('#compose-mem-bar-' + selectorId).css('width', Math.min(info.memPercent || 0, 100).toFixed(2) + '%');
                 }
 
                 renderStackAggregates();
@@ -2329,6 +2376,12 @@ $(function() {
                 while (row) {
                     var parts = row.split(';');
                     if (parts.length >= 3) {
+                        var normalizedId = composeNormalizeContainerKey(parts[0]);
+                        if (!normalizedId) {
+                            i++;
+                            row = data[i];
+                            continue;
+                        }
                         var cpuRaw = parseFloat(parts[1]) || 0;
                         var cpuNorm = Math.round(Math.min(cpuRaw / Math.max(composeCpuCount, 1), 100) * 100) / 100;
                         var memPair = parseMemUsagePair(parts[2]);
@@ -2367,7 +2420,7 @@ $(function() {
                         var blockInputBytes = parseMemValueToBytes(blockInput || '0');
                         var blockOutputBytes = parseMemValueToBytes(blockOutput || '0');
 
-                        composeLoadById[parts[0]] = {
+                        composeLoadById[normalizedId] = {
                             cpu: cpuNorm,
                             cpuText: formatCpuPercent(cpuNorm),
                             mem: formatMemUsageText(memPair.used, memPair.limit),
@@ -2564,7 +2617,7 @@ $(function() {
                     if ($loadTabPanel[0].style.display !== 'none' && composeDockerLoadRunning) {
                         composeLogger('compose tab became visible — invalidating stack index', {
                             'listReady': composeListReady,
-                            'advanced': isComposeAdvancedMode()
+                            'loadColumnsVisible': composeHasVisibleLoadColumns()
                         }, 'user', 'debug', 'dockerload');
                         composeStackIndex = null;
                     }
@@ -2575,19 +2628,19 @@ $(function() {
                 });
             }
 
-            // Auto-start the socket immediately in advanced view so the
+            // Auto-start the socket immediately when load columns are visible so the
             // cache can warm while progressive row loading is still in flight.
-            if (isComposeAdvancedMode()) {
+            if (composeShouldEnableDockerLoad()) {
                 composeLogger('auto-starting socket', {
                     'listReady': composeListReady,
-                    'advanced': isComposeAdvancedMode()
+                    'loadColumnsVisible': composeHasVisibleLoadColumns()
                 }, 'user', 'debug', 'dockerload');
                 composeDockerLoad.start();
                 composeDockerLoadRunning = true;
             } else {
                 composeLogger('deferring socket start', {
                     'listReady': composeListReady,
-                    'advanced': isComposeAdvancedMode()
+                    'loadColumnsVisible': composeHasVisibleLoadColumns()
                 }, 'user', 'debug', 'dockerload');
             }
             return true;
@@ -7050,15 +7103,16 @@ function renderContainerDetails(stackId, containers, project) {
         html += '<td class="cm-advanced ct-col-ip" style="white-space:nowrap;"><span class="docker_readmore">' + ipAddresses.map(composeEscapeHtml).join('<br>') + '</span></td>';
 
         html += '<td class="cm-advanced ct-col-cpu compose-load-cell">';
-        html += '<span class="compose-cpu-' + containerId + ' compose-text-muted">-</span>';
-        html += '<div class="usage-disk mm"><span id="compose-cpu-bar-' + containerId + '" style="width:0"></span><span></span></div>';
+        var normalizedContainerId = composeNormalizeContainerKey(containerId);
+        html += '<span class="compose-cpu-' + normalizedContainerId + ' compose-text-muted">-</span>';
+        html += '<div class="usage-disk mm"><span id="compose-cpu-bar-' + normalizedContainerId + '" style="width:0"></span><span></span></div>';
         html += '</td>';
         html += '<td class="cm-advanced ct-col-memory compose-load-cell">';
-        html += '<span class="compose-mem-' + containerId + ' compose-text-muted">-</span>';
-        html += '<div class="usage-disk mm"><span id="compose-mem-bar-' + containerId + '" style="width:0"></span><span></span></div>';
+        html += '<span class="compose-mem-' + normalizedContainerId + ' compose-text-muted">-</span>';
+        html += '<div class="usage-disk mm"><span id="compose-mem-bar-' + normalizedContainerId + '" style="width:0"></span><span></span></div>';
         html += '</td>';
-        html += '<td class="cm-advanced ct-col-net_io"><span class="compose-netio-' + containerId + ' compose-text-muted">-</span></td>';
-        html += '<td class="cm-advanced ct-col-block_io"><span class="compose-blockio-' + containerId + ' compose-text-muted">-</span></td>';
+        html += '<td class="cm-advanced ct-col-net_io"><span class="compose-netio-' + normalizedContainerId + ' compose-text-muted">-</span></td>';
+        html += '<td class="cm-advanced ct-col-block_io"><span class="compose-blockio-' + normalizedContainerId + ' compose-text-muted">-</span></td>';
 
         // Container Port
         html += '<td style="white-space:nowrap;"><span class="docker_readmore">' + containerPorts.map(composeEscapeHtml).join('<br>') + '</span></td>';
diff --git a/source/compose.manager/nchan/compose_info b/source/compose.manager/nchan/compose_info
index aab4f60b..3f799a41 100755
--- a/source/compose.manager/nchan/compose_info
+++ b/source/compose.manager/nchan/compose_info
@@ -20,47 +20,216 @@ require_once "$docroot/plugins/compose.manager/include/Helpers.php";
 composeLogger('publisher starting', null, 'user', 'info', 'nchan');
 $statusFile = '/tmp/compose_info_nchan.status';
 $snapshotFile = '/tmp/compose_info_nchan.snapshot.json';
+
+function resolvePublishIntervalMs(string $mode, int $customMs): int
+{
+    switch ($mode) {
+        case 'live':
+            return 0;
+        case 'medium':
+            return 2000;
+        case 'slow':
+            return 5000;
+        case 'custom':
+            return max(100, min(10000, $customMs));
+        default:
+            return 0;
+    }
+}
+
+function readPublishConfig(): array
+{
+    $cfgFile = '/boot/config/plugins/compose.manager/compose.manager.cfg';
+    $cfg = is_file($cfgFile) ? (@parse_ini_file($cfgFile) ?: []) : [];
+
+    $mode = strtolower(trim((string)($cfg['COMPOSE_STATS_RATE_MODE'] ?? 'live')));
+    if (!in_array($mode, ['live', 'medium', 'slow', 'custom'], true)) {
+        $mode = 'live';
+    }
+
+    $customMs = (int)($cfg['COMPOSE_STATS_CUSTOM_INTERVAL_MS'] ?? 1000);
+    if ($customMs <= 0) {
+        $customMs = 1000;
+    }
+
+    return [$mode, resolvePublishIntervalMs($mode, $customMs)];
+}
+
+function buildPayload(array $statsById): string
+{
+    if (count($statsById) === 0) {
+        return '';
+    }
+    return implode("\n", array_values($statsById));
+}
+
+function composeStripAnsiAndControl(string $value): string
+{
+    // Strip ANSI CSI sequences and other control bytes.
+    $value = preg_replace('/\x1B\[[0-9;?]*[ -\/]*[@-~]/', '', $value) ?? $value;
+    $value = preg_replace('/[\x00-\x1F\x7F-\x9F]/', '', $value) ?? $value;
+    return trim($value);
+}
+
+function composeNormalizeContainerId(string $value): string
+{
+    $value = composeStripAnsiAndControl($value);
+    if ($value === '') {
+        return '';
+    }
+    if (preg_match('/[a-f0-9]{12,64}/i', $value, $m) === 1) {
+        return strtolower($m[0]);
+    }
+    return $value;
+}
+
 @file_put_contents($statusFile, json_encode([
     'state' => 'starting',
     'ts' => time(),
 ], JSON_UNESCAPED_SLASHES));
-$loopCount = 0;
 while (true) {
-    $output = shell_exec("docker stats --no-stream --format='{{.ID}};{{.CPUPerc}};{{.MemUsage}};{{.MemPerc}};{{.NetIO}};{{.BlockIO}}' 2>&1");
+    [$rateMode, $publishIntervalMs] = readPublishConfig();
+    composeLogger('starting docker stats stream (mode=' . $rateMode . ', intervalMs=' . $publishIntervalMs . ')', null, 'user', 'info', 'nchan');
+
+    $cmd = "docker stats --format='{{.ID}};{{.CPUPerc}};{{.MemUsage}};{{.MemPerc}};{{.NetIO}};{{.BlockIO}}' 2>&1";
+    $descriptorspec = [
+        0 => ['pipe', 'r'],
+        1 => ['pipe', 'w'],
+    ];
+    $process = @proc_open($cmd, $descriptorspec, $pipes);
+    if (!is_resource($process)) {
+        composeLogger('failed to start docker stats stream; retrying', null, 'user', 'warn', 'nchan');
+        sleep(2);
+        continue;
+    }
+
+    @fclose($pipes[0]);
+    stream_set_blocking($pipes[1], false);
 
-    // Lightweight health log (first loop + then every 300 loops ~= 5 min)
-    if ($loopCount === 0 || ($loopCount % 300) === 0) {
-        $preview = trim((string)$output);
-        if (strlen($preview) > 140) {
-            $preview = substr($preview, 0, 140) . '...';
+    $statsById = [];
+    $lastPublishMs = 0;
+    $lastListenerCheckMs = 0;
+    $lastStatusWriteMs = 0;
+    $lastHeartbeatLogMs = 0;
+    $streamUpdates = 0;
+    $lastStreamLineMs = 0;
+    $cadenceSamples = 0;
+    $cadenceTotalMs = 0;
+    $cadenceMinMs = 0;
+    $cadenceMaxMs = 0;
+    $lastCadenceMs = 0;
+
+    while (true) {
+        $procStatus = proc_get_status($process);
+        if (!$procStatus['running']) {
+            composeLogger('docker stats stream stopped; restarting', $procStatus, 'user', 'warn', 'nchan');
+            break;
+        }
+
+        $line = fgets($pipes[1]);
+        $nowMs = (int)round(microtime(true) * 1000);
+
+        if ($line !== false) {
+            $trimmed = composeStripAnsiAndControl((string)$line);
+            if ($trimmed !== '' && strpos($trimmed, ';') !== false) {
+                $parts = explode(';', $trimmed, 2);
+                $id = composeNormalizeContainerId((string)($parts[0] ?? ''));
+                if ($id !== '') {
+                    $rest = trim((string)($parts[1] ?? ''));
+                    $statsById[$id] = $id . ';' . $rest;
+                    $streamUpdates++;
+
+                    if ($lastStreamLineMs > 0) {
+                        $deltaMs = max(0, $nowMs - $lastStreamLineMs);
+                        $lastCadenceMs = $deltaMs;
+                        $cadenceTotalMs += $deltaMs;
+                        $cadenceSamples++;
+                        if ($cadenceMinMs === 0 || $deltaMs < $cadenceMinMs) {
+                            $cadenceMinMs = $deltaMs;
+                        }
+                        if ($deltaMs > $cadenceMaxMs) {
+                            $cadenceMaxMs = $deltaMs;
+                        }
+                    }
+                    $lastStreamLineMs = $nowMs;
+                }
+            }
+
+            if ($publishIntervalMs === 0 || ($nowMs - $lastPublishMs) >= $publishIntervalMs) {
+                $payload = buildPayload($statsById);
+                publish('composeinfo', $payload, 1, true, 10);
+                @file_put_contents($snapshotFile, json_encode([
+                    'ts' => time(),
+                    'raw' => $payload,
+                ], JSON_UNESCAPED_SLASHES));
+                $lastPublishMs = $nowMs;
+                $lastListenerCheckMs = $nowMs;
+            }
+        } else {
+            // Keep abort timer progressing even if the stream is temporarily quiet.
+            if (($nowMs - $lastListenerCheckMs) >= 1000) {
+                $payload = buildPayload($statsById);
+                publish('composeinfo', $payload, 1, true, 10);
+                $lastListenerCheckMs = $nowMs;
+            }
+            usleep(100000);
+        }
+
+        // Visible runtime heartbeat for troubleshooting startup/loop health.
+        if (($nowMs - $lastStatusWriteMs) >= 5000) {
+            $sample = buildPayload($statsById);
+            if (strlen($sample) > 120) {
+                $sample = substr($sample, 0, 120);
+            }
+            $preview = '';
+            if (!empty($statsById)) {
+                $preview = array_values($statsById)[0];
+            }
+            $cadenceAvgMs = $cadenceSamples > 0 ? (int)round($cadenceTotalMs / $cadenceSamples) : 0;
+            @file_put_contents($statusFile, json_encode([
+                'state' => 'running',
+                'ts' => time(),
+                'mode' => $rateMode,
+                'intervalMs' => $publishIntervalMs,
+                'rows' => count($statsById),
+                'updates' => $streamUpdates,
+                'cadenceAvgMs' => $cadenceAvgMs,
+                'cadenceMinMs' => $cadenceMinMs,
+                'cadenceMaxMs' => $cadenceMaxMs,
+                'cadenceLastMs' => $lastCadenceMs,
+                'sample' => $sample,
+            ], JSON_UNESCAPED_SLASHES));
+            $lastStatusWriteMs = $nowMs;
+        }
+
+        // Lightweight health log every ~5 minutes.
+        if (($nowMs - $lastHeartbeatLogMs) >= 300000) {
+            $preview = '';
+            if (!empty($statsById)) {
+                $preview = array_values($statsById)[0];
+            }
+            if (strlen($preview) > 140) {
+                $preview = substr($preview, 0, 140) . '...';
+            }
+            $cadenceAvgMs = $cadenceSamples > 0 ? (int)round($cadenceTotalMs / $cadenceSamples) : 0;
+            composeLogger('publisher heartbeat streamUpdates=' . $streamUpdates . ' rows=' . count($statsById) . ' cadenceAvgMs=' . $cadenceAvgMs . ' cadenceMinMs=' . $cadenceMinMs . ' cadenceMaxMs=' . $cadenceMaxMs . ' cadenceLastMs=' . $lastCadenceMs . ' sample=' . ($preview !== '' ? $preview : '<empty>'), null, 'user', 'debug', 'nchan');
+            $lastHeartbeatLogMs = $nowMs;
+
+            // Reset cadence window each heartbeat so logs show recent behavior.
+            $cadenceSamples = 0;
+            $cadenceTotalMs = 0;
+            $cadenceMinMs = 0;
+            $cadenceMaxMs = 0;
+            $lastCadenceMs = 0;
         }
-        composeLogger('publisher heartbeat loop=' . $loopCount . ' sample=' . ($preview !== '' ? $preview : '<empty>'), null, 'user', 'debug', 'nchan');
     }
 
-    // Continually publish and abort if no listeners.
-    publish('composeinfo', $output, 1, true);
-
-    @file_put_contents($snapshotFile, json_encode([
-        'ts' => time(),
-        'raw' => (string)$output,
-    ], JSON_UNESCAPED_SLASHES));
-
-    // Visible runtime heartbeat for troubleshooting startup/loop health.
-    if (($loopCount % 5) === 0) {
-        @file_put_contents($statusFile, json_encode([
-            'state' => 'running',
-            'ts' => time(),
-            'loop' => $loopCount,
-            'sample' => substr(trim((string)$output), 0, 120),
-        ], JSON_UNESCAPED_SLASHES));
+    if (isset($pipes[1]) && is_resource($pipes[1])) {
+        @fclose($pipes[1]);
     }
-    $loopCount++;
-
-    if ($output === null) {
-        // Slow down publishing if no containers are running.
-        composeLogger('docker stats returned null; slowing loop', null, 'user', 'debug', 'nchan');
-        sleep(10);
-    } else {
-        sleep(1);
+    if (is_resource($process)) {
+        @proc_close($process);
     }
+
+    sleep(1);
 }

From 19fc301e559096c9dc1af1c8bf172ea2d2d18495 Mon Sep 17 00:00:00 2001
From: mstrhakr <mstrhakr@gmail.com>
Date: Tue, 16 Jun 2026 12:22:28 -0400
Subject: [PATCH 58/67] perf: implement parallel project loading with request
 queuing and progress tracking

---
 .../javascript/composeManagerMain.js          | 135 +++++++++++-------
 1 file changed, 83 insertions(+), 52 deletions(-)

diff --git a/source/compose.manager/javascript/composeManagerMain.js b/source/compose.manager/javascript/composeManagerMain.js
index a000758d..52100a18 100644
--- a/source/compose.manager/javascript/composeManagerMain.js
+++ b/source/compose.manager/javascript/composeManagerMain.js
@@ -568,6 +568,11 @@ function composeLoadlist() {
 
                 var completed = 0;
                 var queueIndex = 0;
+                var commitIndex = 0;
+                var activeRequests = 0;
+                var maxParallelRequests = 4;
+                var pendingRowsByIndex = {};
+                var commitInProgress = false;
                 var stackLoadTimers = {};
 
                 function updateProgress() {
@@ -578,80 +583,106 @@ function composeLoadlist() {
                     }
                 }
 
-                function loadNextProjectSequentially() {
-                    if (queueIndex >= projects.length) {
-                        return;
-                    }
-
-                    var project = projects[queueIndex];
-                    queueIndex++;
+                function queueProjectRequest(index) {
+                    var project = projects[index];
                     stackLoadTimers[project] = Date.now();
 
                     composeLogger('progressive stack load start', {
                         project: project,
-                        position: queueIndex,
+                        position: index + 1,
                         total: projects.length
                     }, 'user', 'debug', 'composeLoadlist');
 
+                    activeRequests++;
                     $.get('/plugins/compose.manager/include/ComposeList.php', {
                             mode: 'row',
                             project: project
                         })
                         .done(function(rowRaw) {
-                            var waitForExpansion = Promise.resolve();
                             var rowResp = tryParseJson(rowRaw);
-                            if (rowResp && rowResp.result === 'success' && rowResp.html) {
-                                var elapsedMs = Date.now() - (stackLoadTimers[project] || Date.now());
-                                composeLogger('progressive stack load success', {
-                                    project: project,
-                                    position: queueIndex,
-                                    total: projects.length,
-                                    elapsedMs: elapsedMs
-                                }, 'user', 'debug', 'composeLoadlist');
-                                var $rowChunk = $(rowResp.html);
-                                $('#compose-load-progress-row').before($rowChunk);
-                                initializeProgressiveLoadedRows($rowChunk);
-                                if (typeof window.composeDockerLoadRenderCached === 'function' && composeShouldEnableDockerLoad()) {
-                                    window.composeDockerLoadRenderCached();
-                                }
-                                // Enforce top-down UX: wait for this stack's expansion/details work before next stack.
-                                waitForExpansion = composeDefaultExpandQueue;
-                            } else {
-                                var badRespElapsedMs = Date.now() - (stackLoadTimers[project] || Date.now());
-                                composeLogger('progressive stack load invalid response', {
-                                    project: project,
-                                    position: queueIndex,
-                                    total: projects.length,
-                                    elapsedMs: badRespElapsedMs,
-                                    response: rowResp
-                                }, 'user', 'warn', 'composeLoadlist');
-                                $('#compose-load-progress-row').before('<tr><td colspan="13" class="compose-status-danger" style="padding:8px 12px;">Failed to load ' + composeEscapeHtml(project) + '.</td></tr>');
-                            }
-
-                            waitForExpansion.finally(function() {
-                                delete stackLoadTimers[project];
-                                completed++;
-                                updateProgress();
-                                loadNextProjectSequentially();
-                            });
+                            var elapsedMs = Date.now() - (stackLoadTimers[project] || Date.now());
+                            pendingRowsByIndex[index] = {
+                                ok: !!(rowResp && rowResp.result === 'success' && rowResp.html),
+                                rowResp: rowResp,
+                                project: project,
+                                position: index + 1,
+                                elapsedMs: elapsedMs
+                            };
                         })
                         .fail(function() {
                             var failElapsedMs = Date.now() - (stackLoadTimers[project] || Date.now());
-                            composeLogger('progressive stack load failed', {
+                            pendingRowsByIndex[index] = {
+                                ok: false,
+                                rowResp: null,
                                 project: project,
-                                position: queueIndex,
-                                total: projects.length,
+                                position: index + 1,
                                 elapsedMs: failElapsedMs
-                            }, 'user', 'warn', 'composeLoadlist');
+                            };
+                        })
+                        .always(function() {
+                            activeRequests--;
                             delete stackLoadTimers[project];
-                            $('#compose-load-progress-row').before('<tr><td colspan="13" class="compose-status-danger" style="padding:8px 12px;">Failed to load ' + composeEscapeHtml(project) + '.</td></tr>');
-                            completed++;
-                            updateProgress();
-                            loadNextProjectSequentially();
+                            flushCommittedRowsInOrder();
+                            dispatchProjectRequests();
                         });
                 }
 
-                loadNextProjectSequentially();
+                function dispatchProjectRequests() {
+                    while (activeRequests < maxParallelRequests && queueIndex < projects.length) {
+                        queueProjectRequest(queueIndex);
+                        queueIndex++;
+                    }
+                }
+
+                function flushCommittedRowsInOrder() {
+                    if (commitInProgress) {
+                        return;
+                    }
+
+                    if (!Object.prototype.hasOwnProperty.call(pendingRowsByIndex, commitIndex)) {
+                        return;
+                    }
+
+                    var entry = pendingRowsByIndex[commitIndex];
+                    delete pendingRowsByIndex[commitIndex];
+                    commitInProgress = true;
+
+                    var waitForExpansion = Promise.resolve();
+                    if (entry.ok) {
+                        composeLogger('progressive stack load success', {
+                            project: entry.project,
+                            position: entry.position,
+                            total: projects.length,
+                            elapsedMs: entry.elapsedMs
+                        }, 'user', 'debug', 'composeLoadlist');
+
+                        var $rowChunk = $(entry.rowResp.html);
+                        $('#compose-load-progress-row').before($rowChunk);
+                        initializeProgressiveLoadedRows($rowChunk);
+                        if (typeof window.composeDockerLoadRenderCached === 'function' && composeShouldEnableDockerLoad()) {
+                            window.composeDockerLoadRenderCached();
+                        }
+                        waitForExpansion = composeDefaultExpandQueue;
+                    } else {
+                        composeLogger('progressive stack load failed', {
+                            project: entry.project,
+                            position: entry.position,
+                            total: projects.length,
+                            elapsedMs: entry.elapsedMs
+                        }, 'user', 'warn', 'composeLoadlist');
+                        $('#compose-load-progress-row').before('<tr><td colspan="13" class="compose-status-danger" style="padding:8px 12px;">Failed to load ' + composeEscapeHtml(entry.project) + '.</td></tr>');
+                    }
+
+                    waitForExpansion.finally(function() {
+                        commitIndex++;
+                        completed++;
+                        commitInProgress = false;
+                        updateProgress();
+                        flushCommittedRowsInOrder();
+                    });
+                }
+
+                dispatchProjectRequests();
             })
             .fail(function(xhr, status, error) {
                 composeLogger('failed', {

From 1dee86c1e32129de869458be889f6d62b64aa412 Mon Sep 17 00:00:00 2001
From: mstrhakr <mstrhakr@gmail.com>
Date: Tue, 16 Jun 2026 12:23:44 -0400
Subject: [PATCH 59/67] perf(compose): debounce composeListRefreshed during
 progressive row load

Reduce composeListRefreshed event churn while rows are appended progressively.
This avoids repeated dockerload/listener invalidation work for every single row.

- Add debounced composeListRefreshed trigger helper
- Add flush helper for immediate final refresh
- Use debounce in initializeProgressiveLoadedRows
- Flush pending debounce in finalizeComposeLoadlist

Behavior preserved: final load still emits immediate refresh.
---
 .../javascript/composeManagerMain.js          | 27 ++++++++++++++++---
 1 file changed, 24 insertions(+), 3 deletions(-)

diff --git a/source/compose.manager/javascript/composeManagerMain.js b/source/compose.manager/javascript/composeManagerMain.js
index 52100a18..789ebc14 100644
--- a/source/compose.manager/javascript/composeManagerMain.js
+++ b/source/compose.manager/javascript/composeManagerMain.js
@@ -358,6 +358,26 @@ function mergeStackUpdateStatus(stackInfo, prevStatus) {
 
 // Timers for async operations (plugin-specific to avoid collision with Unraid's global timers)
 var composeTimers = {};
+var composeListRefreshedDebounceTimer = null;
+
+function triggerComposeListRefreshedDebounced(delayMs) {
+    var waitMs = typeof delayMs === 'number' ? delayMs : 150;
+    if (composeListRefreshedDebounceTimer) {
+        clearTimeout(composeListRefreshedDebounceTimer);
+    }
+    composeListRefreshedDebounceTimer = setTimeout(function() {
+        composeListRefreshedDebounceTimer = null;
+        $(document).trigger('composeListRefreshed');
+    }, waitMs);
+}
+
+function flushComposeListRefreshedDebounce() {
+    if (composeListRefreshedDebounceTimer) {
+        clearTimeout(composeListRefreshedDebounceTimer);
+        composeListRefreshedDebounceTimer = null;
+    }
+    $(document).trigger('composeListRefreshed');
+}
 
 function showComposeSpinner() {
     var $spinner = $('div.spinner.fixed');
@@ -402,7 +422,7 @@ function composeLoadlist() {
             clearTimeout(composeTimers.load);
 
             // Signal load subscribers (e.g. dockerload cache) that the list changed
-            $(document).trigger('composeListRefreshed');
+            flushComposeListRefreshedDebounce();
 
             // Initialize UI components for the newly loaded content
             initStackListUI();
@@ -817,8 +837,9 @@ function initializeProgressiveLoadedRows($rowChunk) {
         window.composeColCustomizer.syncColspans();
     }
 
-    // Notify dockerload/hide-from-docker listeners so new rows can receive live updates now.
-    $(document).trigger('composeListRefreshed');
+    // Notify dockerload/hide-from-docker listeners; debounce to avoid
+    // repeated expensive invalidation work during progressive append bursts.
+    triggerComposeListRefreshedDebounced(150);
     if (typeof window.composeDockerLoadToggle === 'function') {
         window.composeDockerLoadToggle(composeShouldEnableDockerLoad());
     }

From d523501a4cdfde3b079cdc564048da901fe57d51 Mon Sep 17 00:00:00 2001
From: mstrhakr <mstrhakr@gmail.com>
Date: Tue, 16 Jun 2026 12:25:30 -0400
Subject: [PATCH 60/67] perf(compose): avoid full-table applyListView during
 progressive row inserts

Remove applyListView(false) from initializeProgressiveLoadedRows so each
new row only runs row-local setup. This prevents repeated full-table
readmore re-initialization and reduces reflow churn while progressively
loading stacks.

Global applyListView behavior remains intact in the normal load lifecycle.
---
 source/compose.manager/javascript/composeManagerMain.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/source/compose.manager/javascript/composeManagerMain.js b/source/compose.manager/javascript/composeManagerMain.js
index 789ebc14..8b33bb06 100644
--- a/source/compose.manager/javascript/composeManagerMain.js
+++ b/source/compose.manager/javascript/composeManagerMain.js
@@ -816,8 +816,8 @@ function initializeProgressiveLoadedRows($rowChunk) {
         });
     });
 
-    // Apply the currently selected basic/advanced mode to new rows.
-    applyListView(false);
+    // Skip full-table applyListView here; new rows already get row-local
+    // readmore/context/toggle setup above, and global apply runs at finalize.
 
     // Apply cached update status immediately for new rows when available.
     $rows.each(function() {

From 2fbb6185201b6cb2d046b9d6c552b2b7ac75b198 Mon Sep 17 00:00:00 2001
From: mstrhakr <mstrhakr@gmail.com>
Date: Tue, 16 Jun 2026 12:31:53 -0400
Subject: [PATCH 61/67] perf(compose): throttle dockerload cache paints during
 websocket bursts

Introduce a small render scheduler for compose dockerload updates and switch
message handling from immediate full repaint to timed rendering (120ms min interval).

- Add scheduled/forced render helper for compose load cache
- Use scheduled render on websocket message events
- Keep immediate render for snapshot seed and tab-visible resume
- Clear pending render timers during subscriber teardown

This reduces DOM update churn and CPU usage while preserving live metric behavior.
---
 .../javascript/composeManagerMain.js          | 38 +++++++++++++++++--
 1 file changed, 35 insertions(+), 3 deletions(-)

diff --git a/source/compose.manager/javascript/composeManagerMain.js b/source/compose.manager/javascript/composeManagerMain.js
index 8b33bb06..e606585f 100644
--- a/source/compose.manager/javascript/composeManagerMain.js
+++ b/source/compose.manager/javascript/composeManagerMain.js
@@ -2260,6 +2260,10 @@ $(function() {
             if (window._composeDockerLoadStaleTimer) {
                 clearInterval(window._composeDockerLoadStaleTimer);
             }
+            if (window._composeDockerLoadRenderTimer) {
+                clearTimeout(window._composeDockerLoadRenderTimer);
+                window._composeDockerLoadRenderTimer = null;
+            }
             if (window._composeDockerLoadVisHandler) {
                 document.removeEventListener('visibilitychange', window._composeDockerLoadVisHandler);
             }
@@ -2285,6 +2289,8 @@ $(function() {
             var composeStackSignature = '';
             var composeLoadById = {};
             var composeLoadStaleMs = 15000;
+            var composeLoadRenderMinIntervalMs = 120;
+            var composeLoadLastRenderMs = 0;
 
             function isComposeLoadVisible() {
                 if (!composeHasVisibleLoadColumns()) return false;
@@ -2417,6 +2423,32 @@ $(function() {
                 }
 
                 renderStackAggregates();
+                composeLoadLastRenderMs = Date.now();
+            }
+
+            function scheduleComposeLoadRender(forceImmediate) {
+                if (!isComposeLoadVisible()) {
+                    return;
+                }
+                if (forceImmediate) {
+                    if (window._composeDockerLoadRenderTimer) {
+                        clearTimeout(window._composeDockerLoadRenderTimer);
+                        window._composeDockerLoadRenderTimer = null;
+                    }
+                    renderComposeLoadCache();
+                    return;
+                }
+                if (window._composeDockerLoadRenderTimer) {
+                    return;
+                }
+
+                var now = Date.now();
+                var elapsed = now - composeLoadLastRenderMs;
+                var delay = Math.max(0, composeLoadRenderMinIntervalMs - elapsed);
+                window._composeDockerLoadRenderTimer = setTimeout(function() {
+                    window._composeDockerLoadRenderTimer = null;
+                    renderComposeLoadCache();
+                }, delay);
             }
 
             window.composeDockerLoadRenderCached = renderComposeLoadCache;
@@ -2500,7 +2532,7 @@ $(function() {
                 if (!raw) return;
                 ingestComposeLoadPayload(raw, ts ? ts * 1000 : Date.now());
                 if (isComposeLoadVisible()) {
-                    renderComposeLoadCache();
+                    scheduleComposeLoadRender(true);
                 }
             };
 
@@ -2618,7 +2650,7 @@ $(function() {
                     return;
                 }
 
-                renderComposeLoadCache();
+                scheduleComposeLoadRender(false);
             });
 
             composeDockerLoad.on('error', function(code, desc) {
@@ -2653,7 +2685,7 @@ $(function() {
 
                     // Immediately render the cached load data so the UI
                     // shows current metrics without waiting for the next tick.
-                    renderComposeLoadCache();
+                    scheduleComposeLoadRender(true);
                 }
             };
             document.addEventListener('visibilitychange', window._composeDockerLoadVisHandler);

From a109007c47e909ae2d855aab2cc59967e62c53a0 Mon Sep 17 00:00:00 2001
From: mstrhakr <mstrhakr@gmail.com>
Date: Tue, 16 Jun 2026 12:35:25 -0400
Subject: [PATCH 62/67] fix(composeStats): enhance memory value parsing and
 sanitize docker stats fields

---
 .../javascript/composeManagerMain.js          | 27 ++++++++++++-------
 1 file changed, 18 insertions(+), 9 deletions(-)

diff --git a/source/compose.manager/javascript/composeManagerMain.js b/source/compose.manager/javascript/composeManagerMain.js
index e606585f..41dc50c7 100644
--- a/source/compose.manager/javascript/composeManagerMain.js
+++ b/source/compose.manager/javascript/composeManagerMain.js
@@ -3,7 +3,7 @@
 // Supports both IEC (KiB, MiB, GiB, TiB) and SI (kB, MB, GB, TB) suffixes.
 function parseMemValueToBytes(memVal) {
     if (!memVal) return 0;
-    var cleaned = String(memVal).trim();
+    var cleaned = sanitizeStatsValue(memVal);
     if (!cleaned) return 0;
     var match = cleaned.match(/([\d.]+)\s*([kmgt]?i?b)?/i);
     if (!match) return 0;
@@ -34,6 +34,15 @@ function parseMemValueToBytes(memVal) {
     }
 }
 
+// Remove terminal escape residue from docker stats fields (for example trailing "[K").
+function sanitizeStatsValue(raw) {
+    var value = String(raw || '');
+    value = value.replace(/\u001b\[[0-9;?]*[ -/]*[@-~]/g, '');
+    value = value.replace(/[\x00-\x1F\x7F-\x9F]/g, '');
+    value = value.replace(/\[[A-Za-z]$/g, '');
+    return value.trim();
+}
+
 // Parse docker stats memory string "used / limit" into bytes.
 function parseMemUsagePair(memStr) {
     if (!memStr) return {
@@ -2483,20 +2492,20 @@ $(function() {
                         var blockOutput = null;
 
                         if (parts.length > 7) {
-                            netInput = parts[4];
-                            netOutput = parts[5];
-                            blockInput = parts[6];
-                            blockOutput = parts[7];
+                            netInput = sanitizeStatsValue(parts[4]);
+                            netOutput = sanitizeStatsValue(parts[5]);
+                            blockInput = sanitizeStatsValue(parts[6]);
+                            blockOutput = sanitizeStatsValue(parts[7]);
                         } else {
                             if (parts.length > 4) {
                                 var netPair = String(parts[4] || '').split('/');
-                                netInput = (netPair[0] || '').trim();
-                                netOutput = (netPair[1] || '').trim();
+                                netInput = sanitizeStatsValue(netPair[0] || '');
+                                netOutput = sanitizeStatsValue(netPair[1] || '');
                             }
                             if (parts.length > 5) {
                                 var blockPair = String(parts[5] || '').split('/');
-                                blockInput = (blockPair[0] || '').trim();
-                                blockOutput = (blockPair[1] || '').trim();
+                                blockInput = sanitizeStatsValue(blockPair[0] || '');
+                                blockOutput = sanitizeStatsValue(blockPair[1] || '');
                             }
                         }
                         var netInputBytes = parseMemValueToBytes(netInput || '0');

From 07cfea027c0b6d6d31000585e3f55901779a7726 Mon Sep 17 00:00:00 2001
From: mstrhakr <mstrhakr@gmail.com>
Date: Thu, 18 Jun 2026 11:31:28 -0400
Subject: [PATCH 63/67] feat(compose): add health status column and related
 functionality to stack and container views

---
 .../compose.manager/include/ComposeList.php   |   9 +-
 .../include/ComposeManager.php                |  26 ++--
 source/compose.manager/include/Exec.php       |  17 +++
 source/compose.manager/include/Util.php       |   5 +
 .../javascript/composeColumnCustomizer.js     |  39 +++---
 .../javascript/composeManagerMain.js          | 122 +++++++++++++++++-
 source/compose.manager/sheets/ComboButton.css |  40 ++++--
 tests/unit/ComposeListHtmlTest.php            |   2 +-
 8 files changed, 217 insertions(+), 43 deletions(-)

diff --git a/source/compose.manager/include/ComposeList.php b/source/compose.manager/include/ComposeList.php
index 66d2e4a0..2d372f7b 100755
--- a/source/compose.manager/include/ComposeList.php
+++ b/source/compose.manager/include/ComposeList.php
@@ -254,6 +254,11 @@
     $uptimeClass = $isrunning ? 'green-text' : 'grey-text';
     $o .= "<td class='col-uptime'><span class='$uptimeClass'>$uptimeDisplay</span></td>";
 
+    // Health column (updated from detailed inspect data by frontend; initial fallback here)
+    $healthDisplay = $isrunning ? 'n/a' : 'stopped';
+    $healthClass = $isrunning ? 'compose-text-muted' : 'grey-text';
+    $o .= "<td class='col-health'><span class='$healthClass'>$healthDisplay</span></td>";
+
     // Metric columns (advanced only)
     $o .= "<td class='cm-advanced col-cpu compose-load-cell'>";
     $o .= "<span class='compose-stack-cpu-$id compose-text-muted'>-</span>";
@@ -287,7 +292,7 @@
 
     // Expandable details row
     $o .= "<tr class='stack-details-row' id='details-row-$id' style='display:none;'>";
-    $o .= "<td colspan='13' class='stack-details-cell' style='padding:0 0 0 60px;background:var(--dynamix-tablesorter-tbody-row-bg-color);'>";
+    $o .= "<td colspan='14' class='stack-details-cell' style='padding:0 0 0 60px;background:var(--dynamix-tablesorter-tbody-row-bg-color);'>";
     $o .= "<div class='stack-details-container' id='details-container-$id' style='padding:8px 16px;'>";
     $o .= "<i class='fa fa-spinner fa-spin compose-spinner'></i> Loading containers...";
     $o .= "</div>";
@@ -297,7 +302,7 @@
 
 // If no stacks found, show a message
 if ($mode !== 'row' && $stackCount === 0) {
-    $o = "<tr><td colspan='13' style='text-align:center;padding:20px;color:var(--alt-text-color);'>No Docker Compose stacks found. Click 'Add New Stack' to create one.</td></tr>";
+    $o = "<tr><td colspan='14' style='text-align:center;padding:20px;color:var(--alt-text-color);'>No Docker Compose stacks found. Click 'Add New Stack' to create one.</td></tr>";
 }
 
 // Output the HTML
diff --git a/source/compose.manager/include/ComposeManager.php b/source/compose.manager/include/ComposeManager.php
index 0c8d369b..896a295f 100755
--- a/source/compose.manager/include/ComposeManager.php
+++ b/source/compose.manager/include/ComposeManager.php
@@ -78,17 +78,18 @@ function compose_manager_cpu_spec_count($cpuSpec)
         --cm-col-arrow-px: 24px;
         --cm-col-icon-px: 48px;
         --cm-col-fixed-px: calc(var(--cm-col-arrow-px) + var(--cm-col-icon-px));
-        --cm-col-name-frac: 0.203539823;
-        --cm-col-update-frac: 0.141592920;
-        --cm-col-containers-frac: 0.070796460;
-        --cm-col-uptime-frac: 0.079646018;
-        --cm-col-cpu-frac: 0.088495575;
-        --cm-col-memory-frac: 0.115044248;
+        --cm-col-name-frac: 0.188524590;
+        --cm-col-update-frac: 0.131147541;
+        --cm-col-containers-frac: 0.065573770;
+        --cm-col-uptime-frac: 0.073770492;
+        --cm-col-health-frac: 0.073770492;
+        --cm-col-cpu-frac: 0.081967213;
+        --cm-col-memory-frac: 0.106557377;
         --cm-col-net-io-frac: 0.000000000;
         --cm-col-block-io-frac: 0.000000000;
-        --cm-col-description-frac: 0.123893805;
-        --cm-col-path-frac: 0.106194690;
-        --cm-col-autostart-frac: 0.070796460;
+        --cm-col-description-frac: 0.114754098;
+        --cm-col-path-frac: 0.098360656;
+        --cm-col-autostart-frac: 0.065573770;
     }
 
     /* Stabilize header row height across basic/advanced toggle transitions */
@@ -200,6 +201,10 @@ function compose_manager_cpu_spec_count($cpuSpec)
         width: calc((100% - var(--cm-col-fixed-px)) * var(--cm-col-uptime-frac));
     }
 
+    #compose_stacks thead th.col-health {
+        width: calc((100% - var(--cm-col-fixed-px)) * var(--cm-col-health-frac));
+    }
+
     #compose_stacks thead th.col-autostart {
         width: calc((100% - var(--cm-col-fixed-px)) * var(--cm-col-autostart-frac));
     }
@@ -402,6 +407,7 @@ function compose_manager_cpu_spec_count($cpuSpec)
                     <th class="col-update">Update</th>
                     <th class="col-containers">Containers</th>
                     <th class="col-uptime">Uptime</th>
+                    <th class="col-health">Health</th>
                     <th class="cm-advanced col-cpu">CPU</th>
                     <th class="cm-advanced col-memory">Memory</th>
                     <th class="cm-advanced col-net_io">Net I/O</th>
@@ -413,7 +419,7 @@ function compose_manager_cpu_spec_count($cpuSpec)
             </thead>
             <tbody id="compose_list">
                 <tr>
-                    <td colspan='13'></td>
+                    <td colspan='14'></td>
                 </tr>
             </tbody>
         </table>
diff --git a/source/compose.manager/include/Exec.php b/source/compose.manager/include/Exec.php
index e151f4dd..4a8acffd 100644
--- a/source/compose.manager/include/Exec.php
+++ b/source/compose.manager/include/Exec.php
@@ -163,6 +163,10 @@ function composeResolveContainerIcon(string $containerName, string $service, arr
         $prefFile = '/boot/config/plugins/compose.manager/column_visibility.json';
         $defaults = [
             'stack' => [
+                'update' => true,
+                'containers' => true,
+                'uptime' => true,
+                'health' => true,
                 'cpu' => true,
                 'memory' => true,
                 'net_io' => false,
@@ -171,6 +175,8 @@ function composeResolveContainerIcon(string $containerName, string $service, arr
                 'path' => true,
             ],
             'service' => [
+                'update' => true,
+                'health' => true,
                 'cpu' => true,
                 'memory' => true,
                 'net_io' => false,
@@ -179,6 +185,8 @@ function composeResolveContainerIcon(string $containerName, string $service, arr
                 'tag' => true,
                 'net' => true,
                 'ip' => true,
+                'cport' => true,
+                'lport' => true,
             ],
         ];
 
@@ -204,6 +212,10 @@ function composeResolveContainerIcon(string $containerName, string $service, arr
         $prefDir = dirname($prefFile);
         $defaults = [
             'stack' => [
+                'update' => true,
+                'containers' => true,
+                'uptime' => true,
+                'health' => true,
                 'cpu' => true,
                 'memory' => true,
                 'net_io' => false,
@@ -212,6 +224,8 @@ function composeResolveContainerIcon(string $containerName, string $service, arr
                 'path' => true,
             ],
             'service' => [
+                'update' => true,
+                'health' => true,
                 'cpu' => true,
                 'memory' => true,
                 'net_io' => false,
@@ -220,6 +234,8 @@ function composeResolveContainerIcon(string $containerName, string $service, arr
                 'tag' => true,
                 'net' => true,
                 'ip' => true,
+                'cport' => true,
+                'lport' => true,
             ],
         ];
 
@@ -1354,6 +1370,7 @@ function composeResolveContainerIcon(string $containerName, string $service, arr
                         $rawContainer['Image'] = $inspect['Config']['Image'] ?? '';
                         $rawContainer['Created'] = $inspect['Created'] ?? '';
                         $rawContainer['StartedAt'] = $inspect['State']['StartedAt'] ?? '';
+                        $rawContainer['Health'] = $inspect['State']['Health']['Status'] ?? '';
 
                         // Get ports (raw bindings - IP resolved below after network detection)
                         $ports = [];
diff --git a/source/compose.manager/include/Util.php b/source/compose.manager/include/Util.php
index b2649d6d..e4ab04cd 100644
--- a/source/compose.manager/include/Util.php
+++ b/source/compose.manager/include/Util.php
@@ -1150,6 +1150,7 @@ public static function parseServicesFromYaml(string $yamlContent): array
  * @property array $volumes Volume mounts [{source, destination, type}]
  * @property string $created ISO datetime when container was created
  * @property string $startedAt ISO datetime when container was started
+ * @property string $health Container health status (healthy/unhealthy/starting/empty)
  * @method static ContainerInfo fromDockerInspect(array $raw) Create a ContainerInfo from a docker inspect + compose ps result array
  * @method static ContainerInfo fromUpdateResponse(array $raw) Create a ContainerInfo from an update-check response element
  * 
@@ -1196,6 +1197,8 @@ class ContainerInfo
     public string $created = '';
     /** @var string ISO datetime when container was started */
     public string $startedAt = '';
+    /** @var string Container health status (healthy/unhealthy/starting/empty) */
+    public string $health = '';
 
     private function __construct() {}
 
@@ -1242,6 +1245,7 @@ public static function fromDockerInspect(array $raw): self
         $info->volumes = $raw['Volumes'] ?? $raw['volumes'] ?? [];
         $info->created = $raw['Created'] ?? $raw['created'] ?? '';
         $info->startedAt = $raw['StartedAt'] ?? $raw['startedAt'] ?? '';
+        $info->health = strtolower((string)($raw['Health'] ?? $raw['health'] ?? ''));
 
         // Normalize update status (accept PascalCase or camelCase)
         $info->updateStatus = $raw['updateStatus'] ?? $raw['UpdateStatus'] ?? $raw['status'] ?? 'unknown';
@@ -1337,6 +1341,7 @@ public function toArray(): array
             'volumes' => $this->volumes,
             'created' => $this->created,
             'startedAt' => $this->startedAt,
+            'health' => $this->health,
         ];
     }
 
diff --git a/source/compose.manager/javascript/composeColumnCustomizer.js b/source/compose.manager/javascript/composeColumnCustomizer.js
index 72c942c9..e0c187f4 100644
--- a/source/compose.manager/javascript/composeColumnCustomizer.js
+++ b/source/compose.manager/javascript/composeColumnCustomizer.js
@@ -6,6 +6,10 @@
     'use strict';
 
     var STACK_COLS = {
+        update: 'Update',
+        containers: 'Containers',
+        uptime: 'Uptime',
+        health: 'Health',
         cpu: 'CPU %',
         memory: 'Memory',
         net_io: 'Network I/O',
@@ -15,6 +19,8 @@
     };
 
     var SERVICE_COLS = {
+        update: 'Update',
+        health: 'Health',
         cpu: 'CPU %',
         memory: 'Memory',
         net_io: 'Network I/O',
@@ -22,11 +28,17 @@
         source: 'Source',
         tag: 'Tag',
         net: 'Network',
-        ip: 'IP'
+        ip: 'IP',
+        cport: 'Container Port',
+        lport: 'LAN IP:Port'
     };
 
     var defaults = {
         stack: {
+            update: true,
+            containers: true,
+            uptime: true,
+            health: true,
             cpu: true,
             memory: true,
             net_io: false,
@@ -35,6 +47,8 @@
             path: true
         },
         service: {
+            update: true,
+            health: true,
             cpu: true,
             memory: true,
             net_io: false,
@@ -42,7 +56,9 @@
             source: true,
             tag: true,
             net: true,
-            ip: true
+            ip: true,
+            cport: true,
+            lport: true
         }
     };
 
@@ -56,6 +72,7 @@
         update: 16,
         containers: 8,
         uptime: 9,
+        health: 9,
         cpu: 10,
         memory: 13,
         net_io: 10,
@@ -67,16 +84,7 @@
 
     var STACK_DEFAULT_VISIBLE = {
         name: true,
-        update: true,
-        containers: true,
-        uptime: true,
-        autostart: true,
-        cpu: true,
-        memory: true,
-        net_io: false,
-        block_io: false,
-        description: true,
-        path: true
+        autostart: true
     };
 
     function normalizePrefs(incoming) {
@@ -110,10 +118,11 @@
         forceTableLayoutReflow($tables);
     }
 
-    // Number of physically rendered stack columns (arrow, icon, and the five
-    // always-on columns are fixed; the rest depend on visibility prefs).
+    // Number of physically rendered stack columns. Arrow, icon, name and
+    // autostart are structural and always visible; all other stack columns are
+    // user-toggleable.
     function getVisibleStackColCount() {
-        var count = 7; // arrow, icon, name, update, containers, uptime, autostart
+        var count = 4; // arrow, icon, name, autostart
         Object.keys(STACK_COLS).forEach(function(col) {
             if (prefs.stack[col]) count++;
         });
diff --git a/source/compose.manager/javascript/composeManagerMain.js b/source/compose.manager/javascript/composeManagerMain.js
index 41dc50c7..be610c08 100644
--- a/source/compose.manager/javascript/composeManagerMain.js
+++ b/source/compose.manager/javascript/composeManagerMain.js
@@ -252,6 +252,72 @@ function formatInOutHtml(inVal, outVal, inLabel, outLabel) {
         '<span class="compose-io-out"><i class="fa fa-arrow-up compose-io-icon compose-io-out-icon" title="' + outTitle + '"></i> ' + outText + '</span>';
 }
 
+function composeNormalizeHealthStatus(rawHealth, state) {
+    var health = String(rawHealth || '').toLowerCase().trim();
+    var normalizedState = String(state || '').toLowerCase().trim();
+
+    if (health === 'healthy' || health === 'unhealthy' || health === 'starting') {
+        return health;
+    }
+    if (normalizedState !== 'running') {
+        return 'stopped';
+    }
+    return 'none';
+}
+
+function composeHealthMeta(status) {
+    var normalized = composeNormalizeHealthStatus(status, 'running');
+    switch (normalized) {
+        case 'healthy':
+            return { icon: 'check-circle', textClass: 'green-text', label: 'healthy' };
+        case 'unhealthy':
+            return { icon: 'times-circle', textClass: 'red-text', label: 'unhealthy' };
+        case 'starting':
+            return { icon: 'refresh fa-spin', textClass: 'orange-text', label: 'starting' };
+        case 'stopped':
+            return { icon: 'stop-circle', textClass: 'grey-text', label: 'stopped' };
+        case 'none':
+            return { icon: 'minus-circle', textClass: 'compose-text-muted', label: 'n/a' };
+        default:
+            return { icon: 'question-circle', textClass: 'compose-text-muted', label: 'unknown' };
+    }
+}
+
+function composeRenderHealthBadge(status, state) {
+    var normalized = composeNormalizeHealthStatus(status, state);
+    var meta = composeHealthMeta(normalized);
+    return '<span class="' + meta.textClass + '" style="white-space:nowrap;"><i class="fa fa-' + meta.icon + ' fa-fw"></i> ' + meta.label + '</span>';
+}
+
+function composeAggregateStackHealth(containers) {
+    var list = Array.isArray(containers) ? containers : [];
+    if (list.length === 0) {
+        return 'stopped';
+    }
+
+    var runningStates = [];
+    list.forEach(function(ct) {
+        var state = String((ct && ct.state) || '').toLowerCase().trim();
+        if (state === 'running') {
+            runningStates.push(composeNormalizeHealthStatus(ct ? ct.health : '', state));
+        }
+    });
+
+    if (runningStates.length === 0) {
+        return 'stopped';
+    }
+    if (runningStates.indexOf('unhealthy') !== -1) {
+        return 'unhealthy';
+    }
+    if (runningStates.indexOf('starting') !== -1) {
+        return 'starting';
+    }
+    if (runningStates.indexOf('healthy') !== -1) {
+        return 'healthy';
+    }
+    return 'none';
+}
+
 // ═══════════════════════════════════════════════════════════════════
 // Standard factory functions for container and stack identity objects
 // ═══════════════════════════════════════════════════════════════════
@@ -286,6 +352,7 @@ function createContainerInfo(raw) {
         icon: raw.icon || raw.Icon || '',
         shell: raw.shell || raw.Shell || '/bin/bash',
         webUI: raw.webUI || raw.WebUI || '',
+        health: raw.health || raw.Health || '',
         ports: raw.ports || raw.Ports || [],
         networks: raw.networks || raw.Networks || [],
         volumes: raw.volumes || raw.Volumes || [],
@@ -543,7 +610,7 @@ function composeLoadlist() {
                     composeLogger('Invalid stack meta response', {
                         response: metaRaw
                     }, 'user', 'error', 'composeLoadlist');
-                    $('#compose_list').html('<tr><td colspan="13" class="compose-status-danger" style="text-align:center;padding:20px;">Failed to load stack list. Please refresh the page.</td></tr>');
+                    $('#compose_list').html('<tr><td colspan="14" class="compose-status-danger" style="text-align:center;padding:20px;">Failed to load stack list. Please refresh the page.</td></tr>');
                     clearTimeout(composeTimers.load);
                     hideComposeSpinner();
                     reject(new Error('Invalid stack list response'));
@@ -552,7 +619,7 @@ function composeLoadlist() {
 
                 var projects = meta.projects;
                 if (projects.length === 0) {
-                    $('#compose_list').html('<tr><td colspan="13" style="text-align:center;padding:20px;color:var(--alt-text-color);">No Docker Compose stacks found. Click \"Add New Stack\" to create one.</td></tr>');
+                    $('#compose_list').html('<tr><td colspan="14" style="text-align:center;padding:20px;color:var(--alt-text-color);">No Docker Compose stacks found. Click \"Add New Stack\" to create one.</td></tr>');
                     finalizeComposeLoadlist('');
                     return;
                 }
@@ -571,7 +638,7 @@ function composeLoadlist() {
                 prefetchStackDetailsInBackground(projects);
 
                 var progressHtml = '<tr id="compose-load-progress-row">' +
-                    '<td colspan="13" style="text-align:center;padding:12px;border:none;background:transparent;">' +
+                    '<td colspan="14" style="text-align:center;padding:12px;border:none;background:transparent;">' +
                     '<span class="compose-text-muted" style="display:inline-flex;align-items:center;gap:8px;">' +
                     '<i class="fa fa-refresh fa-spin"></i>' +
                     '<span>Loading stacks... <span id="compose-load-progress-count">0/' + projects.length + '</span></span>' +
@@ -699,7 +766,7 @@ function composeLoadlist() {
                             total: projects.length,
                             elapsedMs: entry.elapsedMs
                         }, 'user', 'warn', 'composeLoadlist');
-                        $('#compose-load-progress-row').before('<tr><td colspan="13" class="compose-status-danger" style="padding:8px 12px;">Failed to load ' + composeEscapeHtml(entry.project) + '.</td></tr>');
+                        $('#compose-load-progress-row').before('<tr><td colspan="14" class="compose-status-danger" style="padding:8px 12px;">Failed to load ' + composeEscapeHtml(entry.project) + '.</td></tr>');
                     }
 
                     waitForExpansion.finally(function() {
@@ -720,7 +787,7 @@ function composeLoadlist() {
                 }, 'user', 'error', 'composeLoadlist');
                 clearTimeout(composeTimers.load);
                 hideComposeSpinner();
-                $('#compose_list').html('<tr><td colspan="13" class="compose-status-danger" style="text-align:center;padding:20px;">Failed to load stack list. Please refresh the page.</td></tr>');
+                $('#compose_list').html('<tr><td colspan="14" class="compose-status-danger" style="text-align:center;padding:20px;">Failed to load stack list. Please refresh the page.</td></tr>');
 
                 // Reject the promise so callers can handle the error
                 try {
@@ -837,6 +904,15 @@ function initializeProgressiveLoadedRows($rowChunk) {
     });
     updateUpdateAllButton();
 
+    // If background prefetch already has this stack, hydrate parent-row summary
+    // immediately (health, containers, uptime/state) without waiting for expansion.
+    $rows.each(function() {
+        var $row = $(this);
+        var project = $row.data('project');
+        if (!project || !stackDetailsPrefetchCache[project]) return;
+        applyStackSummaryFromResponse(project, stackDetailsPrefetchCache[project]);
+    });
+
     // Apply default expansion policy per row as soon as it is inserted.
     applyDefaultExpansionToRows($rows);
 
@@ -859,6 +935,26 @@ function initializeProgressiveLoadedRows($rowChunk) {
     updateStackToggleAllButtonState();
 }
 
+function applyStackSummaryFromResponse(project, response) {
+    if (!project || !response || response.result !== 'success') return;
+
+    var $stackRow = $('#compose_stacks tr.compose-sortable[data-project="' + project + '"]');
+    if (!$stackRow.length) return;
+
+    var rowId = String($stackRow.attr('id') || '');
+    var stackId = rowId.indexOf('stack-row-') === 0 ? rowId.substring('stack-row-'.length) : '';
+    if (!stackId) return;
+
+    var containers = (response.containers || []).map(createContainerInfo).filter(Boolean);
+    mergeUpdateStatus(containers, project);
+    stackContainersCache[stackId] = containers;
+    if (response.startedAt) {
+        stackStartedAtCache[stackId] = response.startedAt;
+    }
+
+    updateParentStackFromContainers(stackId, project);
+}
+
 // Load external stylesheets (non-critical styles — critical ones are inline above)
 (function() {
     var base = composeBootstrap.comboButtonCss || '';
@@ -4767,6 +4863,9 @@ function prefetchStackDetailsInBackground(projects) {
                         var parsed = tryParseJson(data);
                         if (parsed && parsed.result === 'success') {
                             stackDetailsPrefetchCache[project] = parsed;
+                            // If the row already exists, bubble prefetched summary
+                            // data into parent columns during initial progressive load.
+                            applyStackSummaryFromResponse(project, parsed);
                         }
                         resolve();
                     }).fail(function() {
@@ -7037,6 +7136,7 @@ function renderContainerDetails(stackId, containers, project) {
     html += '<thead><tr>';
     html += '<th class="ct-col-name">Container</th>';
     html += '<th class="ct-col-update">Update</th>';
+    html += '<th class="ct-col-health">Health</th>';
     html += '<th class="cm-advanced ct-col-source">Source</th>';
     html += '<th class="cm-advanced ct-col-tag">Tag</th>';
     html += '<th class="cm-advanced ct-col-net">Network</th>';
@@ -7183,6 +7283,9 @@ function renderContainerDetails(stackId, containers, project) {
         }
         html += '</td>';
 
+        // Health column
+        html += '<td class="ct-col-health">' + composeRenderHealthBadge(container.health || '', state) + '</td>';
+
         // Source (image name without tag)
         html += '<td class="cm-advanced ct-col-source"><span class="docker_readmore compose-text-muted">' + composeEscapeHtml(imageSource) + '</span></td>';
 
@@ -7208,7 +7311,7 @@ function renderContainerDetails(stackId, containers, project) {
         html += '<td class="cm-advanced ct-col-block_io"><span class="compose-blockio-' + normalizedContainerId + ' compose-text-muted">-</span></td>';
 
         // Container Port
-        html += '<td style="white-space:nowrap;"><span class="docker_readmore">' + containerPorts.map(composeEscapeHtml).join('<br>') + '</span></td>';
+        html += '<td class="ct-col-cport-cell" style="white-space:nowrap;"><span class="docker_readmore">' + containerPorts.map(composeEscapeHtml).join('<br>') + '</span></td>';
 
         // LAN IP:Port
         html += '<td class="ct-col-lport-cell"><span>' + lanPorts.map(composeEscapeHtml).join('<br>') + '</span></td>';
@@ -7429,6 +7532,13 @@ function updateParentStackFromContainers(stackId, project) {
             $uptimeCell.html('<span class="' + uptimeClass + '">' + uptimeText + '</span>');
         } catch (e) {}
 
+        // Update stack health from cached container health states.
+        try {
+            var $healthCell = $stackRow.find('td.col-health');
+            var healthStatus = composeAggregateStackHealth(stackInfo.containers);
+            $healthCell.html(composeRenderHealthBadge(healthStatus, anyRunning ? 'running' : 'exited'));
+        } catch (e) {}
+
         // Re-apply view mode (advanced/basic) to ensure column content visibility
         applyListView();
     } catch (e) {
diff --git a/source/compose.manager/sheets/ComboButton.css b/source/compose.manager/sheets/ComboButton.css
index daca341d..167e9ab9 100644
--- a/source/compose.manager/sheets/ComboButton.css
+++ b/source/compose.manager/sheets/ComboButton.css
@@ -317,8 +317,12 @@
     width: 9%;
   }
 
+  .compose-ct-table .ct-col-health {
+    width: 8%;
+  }
+
   .compose-ct-table .ct-col-source {
-    width: 9%;
+    width: 8%;
   }
 
   .compose-ct-table .ct-col-tag {
@@ -338,15 +342,15 @@
   }
 
   .compose-ct-table .ct-col-memory {
-    width: 12%;
+    width: 11%;
   }
 
   .compose-ct-table .ct-col-net_io {
-    width: 9%;
+    width: 8%;
   }
 
   .compose-ct-table .ct-col-block_io {
-    width: 9%;
+    width: 8%;
   }
 
   .compose-ct-table .ct-col-cport {
@@ -354,7 +358,7 @@
   }
 
   .compose-ct-table .ct-col-lport {
-    width: 9%;
+    width: 8%;
   }
 
   /* Container name cell: allow wrapping for long names */
@@ -384,15 +388,15 @@
   }
 
   /* Source column: allow wrapping, left-aligned */
-  .compose-ct-table th:nth-child(3),
-  .compose-ct-table td:nth-child(3) {
+  .compose-ct-table th.ct-col-source,
+  .compose-ct-table td.ct-col-source {
     white-space: normal;
     word-break: break-all;
     text-align: left !important;
   }
 
   /* Source data cells only — muted color (header inherits theme default) */
-  .compose-ct-table td:nth-child(3) {
+  .compose-ct-table td.ct-col-source {
     color: var(--alt-text-color);
   }
 
@@ -675,8 +679,16 @@
   }
 
   /* Column hiding via hide-col-* classes */
+  #compose_stacks.hide-col-update .col-update,
+  #compose_stacks.hide-col-update td.col-update,
+  #compose_stacks.hide-col-containers .col-containers,
+  #compose_stacks.hide-col-containers td.col-containers,
   #compose_stacks.hide-col-cpu .col-cpu,
   #compose_stacks.hide-col-cpu td.col-cpu,
+  #compose_stacks.hide-col-uptime .col-uptime,
+  #compose_stacks.hide-col-uptime td.col-uptime,
+  #compose_stacks.hide-col-health .col-health,
+  #compose_stacks.hide-col-health td.col-health,
   #compose_stacks.hide-col-memory .col-memory,
   #compose_stacks.hide-col-memory td.col-memory,
   #compose_stacks.hide-col-net_io .col-net_io,
@@ -687,8 +699,14 @@
   #compose_stacks.hide-col-description td.col-description,
   #compose_stacks.hide-col-path .col-path,
   #compose_stacks.hide-col-path td.col-path,
+  #compose_stacks.hide-col-autostart .col-autostart,
+  #compose_stacks.hide-col-autostart td.col-autostart,
+  .compose-ct-table.hide-col-update .ct-col-update,
+  .compose-ct-table.hide-col-update td.ct-updatecolumn,
   .compose-ct-table.hide-col-cpu .ct-col-cpu,
   .compose-ct-table.hide-col-cpu td.ct-col-cpu,
+  .compose-ct-table.hide-col-health .ct-col-health,
+  .compose-ct-table.hide-col-health td.ct-col-health,
   .compose-ct-table.hide-col-memory .ct-col-memory,
   .compose-ct-table.hide-col-memory td.ct-col-memory,
   .compose-ct-table.hide-col-net_io .ct-col-net_io,
@@ -702,6 +720,10 @@
   .compose-ct-table.hide-col-net .ct-col-net,
   .compose-ct-table.hide-col-net td.ct-col-net,
   .compose-ct-table.hide-col-ip .ct-col-ip,
-  .compose-ct-table.hide-col-ip td.ct-col-ip {
+  .compose-ct-table.hide-col-ip td.ct-col-ip,
+  .compose-ct-table.hide-col-cport .ct-col-cport,
+  .compose-ct-table.hide-col-cport td.ct-col-cport-cell,
+  .compose-ct-table.hide-col-lport .ct-col-lport,
+  .compose-ct-table.hide-col-lport td.ct-col-lport-cell {
     display: none !important;
   }
\ No newline at end of file
diff --git a/tests/unit/ComposeListHtmlTest.php b/tests/unit/ComposeListHtmlTest.php
index bea9829f..c708c961 100644
--- a/tests/unit/ComposeListHtmlTest.php
+++ b/tests/unit/ComposeListHtmlTest.php
@@ -141,7 +141,7 @@ public function testNoStacksMessageExists(): void
         $source = $this->getPageSource();
         $this->assertStringContainsString('No Docker Compose stacks found', $source);
         $this->assertStringContainsString('Add New Stack', $source);
-        $this->assertStringContainsString("colspan='13'", $source);
+        $this->assertStringContainsString("colspan='14'", $source);
     }
 
     // ===========================================

From c52ac0ff4767a3656e8ad7c57552535b96a8c256 Mon Sep 17 00:00:00 2001
From: mstrhakr <mstrhakr@gmail.com>
Date: Thu, 18 Jun 2026 13:26:37 -0400
Subject: [PATCH 64/67] feat(compose): implement stack row striping
 synchronization for improved UI consistency

---
 .../compose.manager/include/ComposeManager.php   |  5 +++++
 .../javascript/composeManagerMain.js             | 16 ++++++++++++++++
 .../javascript/composeSortable.js                |  4 ++++
 3 files changed, 25 insertions(+)

diff --git a/source/compose.manager/include/ComposeManager.php b/source/compose.manager/include/ComposeManager.php
index 896a295f..9359d202 100755
--- a/source/compose.manager/include/ComposeManager.php
+++ b/source/compose.manager/include/ComposeManager.php
@@ -259,6 +259,11 @@ function compose_manager_cpu_spec_count($cpuSpec)
         width: auto !important
     }
 
+    #compose_stacks tbody tr.compose-sortable.compose-stack-row-alt,
+    #compose_stacks tbody tr.compose-sortable.compose-stack-row-alt td {
+        background-color: var(--dynamix-tablesorter-tbody-row-alt-bg-color)
+    }
+
     #compose_stacks tbody tr.stack-details-row {
         background-color: var(--dynamix-sb-body-bg-color) !important
     }
diff --git a/source/compose.manager/javascript/composeManagerMain.js b/source/compose.manager/javascript/composeManagerMain.js
index be610c08..7701c569 100644
--- a/source/compose.manager/javascript/composeManagerMain.js
+++ b/source/compose.manager/javascript/composeManagerMain.js
@@ -840,6 +840,10 @@ function initStackListUI() {
     // Apply current view mode (advanced/basic) with centralized logic
     applyListView(false);
 
+            // Recompute stack-row striping after all stack rows are present so
+            // hidden detail rows do not skew alternating backgrounds.
+            syncComposeStackRowStriping();
+
     // Seed expandedStacks from any rows rendered expanded server-side
     $('.stack-details-row:visible').each(function() {
         var stackId = this.id.replace('details-row-', '');
@@ -916,6 +920,9 @@ function initializeProgressiveLoadedRows($rowChunk) {
     // Apply default expansion policy per row as soon as it is inserted.
     applyDefaultExpansionToRows($rows);
 
+    // Keep stack striping stable while chunks stream in.
+    syncComposeStackRowStriping();
+
     // Newly inserted rows include detail rows with a static full-width colspan;
     // clamp it to the live column count so hidden columns don't reserve width.
     if (window.composeColCustomizer && typeof window.composeColCustomizer.syncColspans === 'function') {
@@ -984,6 +991,15 @@ function tryParseJson(str) {
     }
 }
 
+function syncComposeStackRowStriping() {
+    var $rows = $('#compose_stacks tr.compose-sortable');
+    if (!$rows.length) return;
+
+    $rows.each(function(index) {
+        $(this).toggleClass('compose-stack-row-alt', index % 2 === 0);
+    });
+}
+
 // Editor modal state
 var editorModal = {
     editors: {},
diff --git a/source/compose.manager/javascript/composeSortable.js b/source/compose.manager/javascript/composeSortable.js
index af53fe54..6cd3947a 100644
--- a/source/compose.manager/javascript/composeSortable.js
+++ b/source/compose.manager/javascript/composeSortable.js
@@ -153,6 +153,8 @@ function initComposeSortable() {
                     $stackRow.removeData('_detached-details');
                 }
             });
+
+            syncComposeStackRowStriping();
         }
     });
 }
@@ -167,6 +169,8 @@ function syncComposeSortModeUI() {
         $row.find('.mover').toggle(unlocked);
     });
 
+    syncComposeStackRowStriping();
+
     $('#compose_list').toggleClass('compose-sort-enabled', unlocked);
     updateComposeLockButtonUI();
     initComposeSortable();

From 8561a4228f689dad8420cebe0651a733e7252941 Mon Sep 17 00:00:00 2001
From: mstrhakr <mstrhakr@gmail.com>
Date: Thu, 18 Jun 2026 16:37:00 -0400
Subject: [PATCH 65/67] feat(compose): enhance column customization with
 reorder functionality and UI updates

---
 source/compose.manager/include/Exec.php       |  55 +++-
 .../javascript/composeColumnCustomizer.js     | 236 +++++++++++++++++-
 source/compose.manager/sheets/ComboButton.css |  43 +++-
 3 files changed, 325 insertions(+), 9 deletions(-)

diff --git a/source/compose.manager/include/Exec.php b/source/compose.manager/include/Exec.php
index 4a8acffd..2ba19248 100644
--- a/source/compose.manager/include/Exec.php
+++ b/source/compose.manager/include/Exec.php
@@ -189,8 +189,12 @@ function composeResolveContainerIcon(string $containerName, string $service, arr
                 'lport' => true,
             ],
         ];
+        $defaultOrder = [
+            'stackOrder' => array_keys(array_filter($defaults['stack'])),
+            'serviceOrder' => array_keys(array_filter($defaults['service'])),
+        ];
 
-        $visibility = $defaults;
+        $visibility = array_merge($defaults, $defaultOrder);
         if (is_file($prefFile)) {
             $raw = @file_get_contents($prefFile);
             $saved = json_decode((string)$raw, true);
@@ -203,6 +207,28 @@ function composeResolveContainerIcon(string $containerName, string $service, arr
                         }
                     }
                 }
+
+                foreach (['stackOrder', 'serviceOrder'] as $orderKey) {
+                    if (!isset($saved[$orderKey]) || !is_array($saved[$orderKey])) continue;
+
+                    $scope = $orderKey === 'stackOrder' ? 'stack' : 'service';
+                    $allowed = array_keys($defaults[$scope]);
+                    $normalizedOrder = [];
+
+                    foreach ($saved[$orderKey] as $col) {
+                        if (in_array($col, $allowed, true) && $visibility[$scope][$col] && !in_array($col, $normalizedOrder, true)) {
+                            $normalizedOrder[] = $col;
+                        }
+                    }
+
+                    foreach ($allowed as $col) {
+                        if ($visibility[$scope][$col] && !in_array($col, $normalizedOrder, true)) {
+                            $normalizedOrder[] = $col;
+                        }
+                    }
+
+                    $visibility[$orderKey] = $normalizedOrder;
+                }
             }
         }
         echo json_encode(['result' => 'success', 'visibility' => $visibility]);
@@ -238,6 +264,10 @@ function composeResolveContainerIcon(string $containerName, string $service, arr
                 'lport' => true,
             ],
         ];
+        $defaultOrder = [
+            'stackOrder' => array_keys(array_filter($defaults['stack'])),
+            'serviceOrder' => array_keys(array_filter($defaults['service'])),
+        ];
 
         $raw = $_POST['visibility'] ?? '';
         $parsed = json_decode((string)$raw, true);
@@ -246,7 +276,7 @@ function composeResolveContainerIcon(string $containerName, string $service, arr
             break;
         }
 
-        $normalized = $defaults;
+        $normalized = array_merge($defaults, $defaultOrder);
         foreach (['stack', 'service'] as $scope) {
             if (!isset($parsed[$scope]) || !is_array($parsed[$scope])) continue;
             foreach ($defaults[$scope] as $key => $defaultVal) {
@@ -256,6 +286,27 @@ function composeResolveContainerIcon(string $containerName, string $service, arr
             }
         }
 
+        foreach (['stackOrder', 'serviceOrder'] as $orderKey) {
+            $scope = $orderKey === 'stackOrder' ? 'stack' : 'service';
+            $allowed = array_keys($defaults[$scope]);
+            $savedOrder = isset($parsed[$orderKey]) && is_array($parsed[$orderKey]) ? $parsed[$orderKey] : [];
+            $normalizedOrder = [];
+
+            foreach ($savedOrder as $col) {
+                if (in_array($col, $allowed, true) && $normalized[$scope][$col] && !in_array($col, $normalizedOrder, true)) {
+                    $normalizedOrder[] = $col;
+                }
+            }
+
+            foreach ($allowed as $col) {
+                if ($normalized[$scope][$col] && !in_array($col, $normalizedOrder, true)) {
+                    $normalizedOrder[] = $col;
+                }
+            }
+
+            $normalized[$orderKey] = $normalizedOrder;
+        }
+
         if (!is_dir($prefDir)) {
             @mkdir($prefDir, 0777, true);
         }
diff --git a/source/compose.manager/javascript/composeColumnCustomizer.js b/source/compose.manager/javascript/composeColumnCustomizer.js
index e0c187f4..dec9d03f 100644
--- a/source/compose.manager/javascript/composeColumnCustomizer.js
+++ b/source/compose.manager/javascript/composeColumnCustomizer.js
@@ -64,7 +64,9 @@
 
     var prefs = {
         stack: $.extend({}, defaults.stack),
-        service: $.extend({}, defaults.service)
+        service: $.extend({}, defaults.service),
+        stackOrder: Object.keys(defaults.stack).filter(function(key) { return defaults.stack[key]; }),
+        serviceOrder: Object.keys(defaults.service).filter(function(key) { return defaults.service[key]; })
     };
 
     var STACK_WIDTH_WEIGHTS = {
@@ -87,10 +89,55 @@
         autostart: true
     };
 
+    var STACK_CELL_CLASS_MAP = {
+        update: 'col-update',
+        containers: 'col-containers',
+        uptime: 'col-uptime',
+        health: 'col-health',
+        cpu: 'col-cpu',
+        memory: 'col-memory',
+        net_io: 'col-net_io',
+        block_io: 'col-block_io',
+        description: 'col-description',
+        path: 'col-path'
+    };
+
+    var SERVICE_HEADER_CLASS_MAP = {
+        update: 'ct-col-update',
+        health: 'ct-col-health',
+        cpu: 'ct-col-cpu',
+        memory: 'ct-col-memory',
+        net_io: 'ct-col-net_io',
+        block_io: 'ct-col-block_io',
+        source: 'ct-col-source',
+        tag: 'ct-col-tag',
+        net: 'ct-col-net',
+        ip: 'ct-col-ip',
+        cport: 'ct-col-cport',
+        lport: 'ct-col-lport'
+    };
+
+    var SERVICE_BODY_CLASS_MAP = {
+        update: 'ct-updatecolumn',
+        health: 'ct-col-health',
+        cpu: 'ct-col-cpu',
+        memory: 'ct-col-memory',
+        net_io: 'ct-col-net_io',
+        block_io: 'ct-col-block_io',
+        source: 'ct-col-source',
+        tag: 'ct-col-tag',
+        net: 'ct-col-net',
+        ip: 'ct-col-ip',
+        cport: 'ct-col-cport-cell',
+        lport: 'ct-col-lport-cell'
+    };
+
     function normalizePrefs(incoming) {
         var out = {
             stack: $.extend({}, defaults.stack),
-            service: $.extend({}, defaults.service)
+            service: $.extend({}, defaults.service),
+            stackOrder: Object.keys(defaults.stack).filter(function(key) { return defaults.stack[key]; }),
+            serviceOrder: Object.keys(defaults.service).filter(function(key) { return defaults.service[key]; })
         };
         if (!incoming || typeof incoming !== 'object') return out;
 
@@ -102,12 +149,41 @@
                 }
             });
         });
+
+        // Handle order arrays
+        var scopeMap = { stack: 'stackOrder', service: 'serviceOrder' };
+        ['stack', 'service'].forEach(function(scope) {
+            var orderKey = scopeMap[scope];
+            if (Array.isArray(incoming[orderKey])) {
+                var visibleCols = [];
+                incoming[orderKey].forEach(function(col) {
+                    if (out[scope].hasOwnProperty(col) && out[scope][col]) {
+                        visibleCols.push(col);
+                    }
+                });
+                // Ensure all visible columns are in the order, add missing ones at end
+                Object.keys(out[scope]).forEach(function(col) {
+                    if (out[scope][col] && visibleCols.indexOf(col) === -1) {
+                        visibleCols.push(col);
+                    }
+                });
+                out[orderKey] = visibleCols;
+            }
+        });
+
         return out;
     }
 
     function applyScope(scope) {
         var selector = scope === 'stack' ? '#compose_stacks' : '.compose-ct-table';
         var $tables = $(selector);
+
+        if (scope === 'stack') {
+            reorderStackTable();
+        } else {
+            reorderServiceTables();
+        }
+
         Object.keys(prefs[scope]).forEach(function(col) {
             $tables.toggleClass('hide-col-' + col, !prefs[scope][col]);
         });
@@ -174,6 +250,83 @@
         });
     }
 
+    function getScopeRenderOrder(scope) {
+        var map = getScopeMap(scope);
+        var orderKey = scope === 'stack' ? 'stackOrder' : 'serviceOrder';
+        var order = Array.isArray(prefs[orderKey]) ? prefs[orderKey].slice() : [];
+
+        Object.keys(map).forEach(function(col) {
+            if (order.indexOf(col) === -1) {
+                order.push(col);
+            }
+        });
+
+        return order;
+    }
+
+    function reorderStackTable() {
+        var order = getScopeRenderOrder('stack');
+
+        $('#compose_stacks tr').each(function() {
+            var $row = $(this);
+            if ($row.children('[colspan]').length) return;
+
+            var $autostart = $row.children('.col-autostart').first();
+            if (!$autostart.length) return;
+
+            order.forEach(function(col) {
+                var className = STACK_CELL_CLASS_MAP[col];
+                if (!className) return;
+
+                var $cell = $row.children('.' + className).first();
+                if ($cell.length) {
+                    $autostart.before($cell);
+                }
+            });
+        });
+    }
+
+    function reorderServiceTables() {
+        var order = getScopeRenderOrder('service');
+
+        $('.compose-ct-table').each(function() {
+            var $table = $(this);
+
+            $table.find('tr').each(function() {
+                var $row = $(this);
+                var $anchor = $row.children('.ct-col-name, .ct-name').first();
+                if (!$anchor.length) return;
+
+                order.forEach(function(col) {
+                    var className = $row.closest('thead').length ? SERVICE_HEADER_CLASS_MAP[col] : SERVICE_BODY_CLASS_MAP[col];
+                    if (!className) return;
+
+                    var $cell = $row.children('.' + className).first();
+                    if ($cell.length) {
+                        $anchor.after($cell);
+                        $anchor = $cell;
+                    }
+                });
+            });
+        });
+    }
+
+    function setTransferSelection(scope, side, values, shouldFocus) {
+        var normalizedValues = Array.isArray(values) ? values.filter(Boolean) : (values ? [values] : []);
+        var $select = $(scopeSelectId(scope, side));
+        if (!$select.length) return;
+
+        $select.val(normalizedValues);
+        $select.find('option').prop('selected', false);
+        normalizedValues.forEach(function(value) {
+            $select.find('option[value="' + value + '"]').prop('selected', true);
+        });
+
+        if (shouldFocus) {
+            $select.trigger('focus');
+        }
+    }
+
     function applyAll() {
         applyScope('stack');
         applyScope('service');
@@ -196,12 +349,22 @@
 
         var hiddenHtml = '';
         var visibleHtml = '';
+        var hiddenSelection = getSelectedTransferKeys(scope, 'hidden');
+        var visibleSelection = getSelectedTransferKeys(scope, 'visible');
+        var order = getScopeRenderOrder(scope);
 
-        Object.keys(map).forEach(function(col) {
-            var optionHtml = '<option value="' + col + '">' + map[col] + '</option>';
+        // Build visible list in order
+        order.forEach(function(col) {
             if (prefs[scope] && prefs[scope][col]) {
+                var optionHtml = '<option value="' + col + '">' + map[col] + '</option>';
                 visibleHtml += optionHtml;
-            } else {
+            }
+        });
+
+        // Build hidden list
+        Object.keys(map).forEach(function(col) {
+            if (!prefs[scope] || !prefs[scope][col]) {
+                var optionHtml = '<option value="' + col + '">' + map[col] + '</option>';
                 hiddenHtml += optionHtml;
             }
         });
@@ -215,6 +378,8 @@
 
         $hidden.html(hiddenHtml);
         $visible.html(visibleHtml);
+        setTransferSelection(scope, 'hidden', hiddenSelection, false);
+        setTransferSelection(scope, 'visible', visibleSelection, false);
     }
 
     function renderTransferLists() {
@@ -225,9 +390,19 @@
     function setScopeColumnVisibility(scope, keys, isVisible) {
         if (!keys || !keys.length || !prefs[scope]) return;
 
+        var orderKey = scope === 'stack' ? 'stackOrder' : 'serviceOrder';
+        var order = prefs[orderKey] || [];
+
         keys.forEach(function(col) {
             if (Object.prototype.hasOwnProperty.call(prefs[scope], col)) {
                 prefs[scope][col] = isVisible;
+                // Update order: add if visible and not in order, remove if hidden
+                var idx = order.indexOf(col);
+                if (isVisible && idx === -1) {
+                    order.push(col);
+                } else if (!isVisible && idx !== -1) {
+                    order.splice(idx, 1);
+                }
             }
         });
 
@@ -235,6 +410,40 @@
         renderScopeTransfer(scope);
     }
 
+    function moveColumnInOrder(scope, direction) {
+        var orderKey = scope === 'stack' ? 'stackOrder' : 'serviceOrder';
+        var order = prefs[orderKey] || [];
+        var selectedValues = getSelectedTransferKeys(scope, 'visible');
+        if (!selectedValues.length) return;
+
+        var col = selectedValues[0];
+        var idx = order.indexOf(col);
+        if (idx === -1) return;
+
+        var newIdx;
+        if (direction === 'up' && idx > 0) {
+            newIdx = idx - 1;
+        } else if (direction === 'down' && idx < order.length - 1) {
+            newIdx = idx + 1;
+        } else {
+            return;
+        }
+
+        // Swap positions
+        var temp = order[idx];
+        order[idx] = order[newIdx];
+        order[newIdx] = temp;
+
+        if (scope === 'stack') {
+            reorderStackTable();
+        } else {
+            reorderServiceTables();
+        }
+        applyScope(scope);
+        renderScopeTransfer(scope);
+        setTransferSelection(scope, 'visible', [col], true);
+    }
+
     function getSelectedTransferKeys(scope, side) {
         var values = $(scopeSelectId(scope, side)).val();
         if (!values) return [];
@@ -247,6 +456,7 @@
             return key !== '';
         });
         setScopeColumnVisibility(scope, keys, toVisible);
+        setTransferSelection(scope, toVisible ? 'visible' : 'hidden', keys, false);
     }
 
     function moveAll(scope, toVisible) {
@@ -280,6 +490,10 @@
         html += '<label for="compose-col-' + scope + '-visible">Visible</label>';
         html += '<select id="compose-col-' + scope + '-visible" class="compose-transfer-select" multiple></select>';
         html += '</div>';
+        html += '<div class="compose-reorder-actions">';
+        html += '<div class="compose-reorder-btn" role="button" tabindex="0" data-scope="' + scope + '" data-action="move-up" title="Move up" aria-label="Move selected column up">&uarr;</div>';
+        html += '<div class="compose-reorder-btn" role="button" tabindex="0" data-scope="' + scope + '" data-action="move-down" title="Move down" aria-label="Move selected column down">&darr;</div>';
+        html += '</div>';
         html += '</div>';
         html += '</div>';
         return html;
@@ -371,7 +585,17 @@
                 if (action === 'all-left') moveAll(scope, false);
             });
 
-            $(document).on('keydown', '.compose-transfer-btn', function(e) {
+            $(document).on('click', '.compose-reorder-btn', function() {
+                var scope = $(this).data('scope');
+                var action = $(this).data('action');
+
+                if (!scope || !action) return;
+
+                if (action === 'move-up') moveColumnInOrder(scope, 'up');
+                if (action === 'move-down') moveColumnInOrder(scope, 'down');
+            });
+
+            $(document).on('keydown', '.compose-transfer-btn, .compose-reorder-btn', function(e) {
                 if (e.key !== 'Enter' && e.key !== ' ') return;
                 e.preventDefault();
                 $(this).trigger('click');
diff --git a/source/compose.manager/sheets/ComboButton.css b/source/compose.manager/sheets/ComboButton.css
index 167e9ab9..c47153a1 100644
--- a/source/compose.manager/sheets/ComboButton.css
+++ b/source/compose.manager/sheets/ComboButton.css
@@ -546,7 +546,7 @@
 
   .compose-transfer-wrap {
     display: grid;
-    grid-template-columns: 1fr auto 1fr;
+    grid-template-columns: 1fr auto 1fr auto;
     gap: 6px;
     align-items: stretch;
   }
@@ -584,6 +584,14 @@
     min-width: 22px;
   }
 
+  .compose-reorder-actions {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    gap: 2px;
+    min-width: 22px;
+  }
+
   .compose-transfer-btn {
     min-width: 22px;
     height: 20px;
@@ -612,6 +620,34 @@
     outline-offset: 1px;
   }
 
+  .compose-reorder-btn {
+    min-width: 22px;
+    height: 20px;
+    margin: 0;
+    padding: 0;
+    border: 0;
+    background: transparent;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    font-weight: 700;
+    line-height: 1;
+    font-size: 14px;
+    color: var(--brand-orange);
+    cursor: pointer;
+    border-radius: 3px;
+    user-select: none;
+  }
+
+  .compose-reorder-btn:hover {
+    background: color-mix(in srgb, var(--brand-orange) 16%, transparent);
+  }
+
+  .compose-reorder-btn:focus-visible {
+    outline: 1px solid var(--brand-orange);
+    outline-offset: 1px;
+  }
+
   .compose-col-checkbox-label {
     display: flex;
     align-items: center;
@@ -676,6 +712,11 @@
       flex-direction: row;
       flex-wrap: wrap;
     }
+
+    .compose-reorder-actions {
+      flex-direction: row;
+      flex-wrap: wrap;
+    }
   }
 
   /* Column hiding via hide-col-* classes */

From 0eb6d6a6df989ddc2549880d7922f6bdc2bcc6a9 Mon Sep 17 00:00:00 2001
From: "github-actions[bot]" <github-actions[bot]@users.noreply.github.com>
Date: Thu, 18 Jun 2026 20:37:32 +0000
Subject: [PATCH 66/67] chore: update changelog for v2026.06.18.1637 [skip ci]

---
 compose.manager.plg | 19 +++++++++++--------
 1 file changed, 11 insertions(+), 8 deletions(-)

diff --git a/compose.manager.plg b/compose.manager.plg
index 6bafeef5..f16d3b61 100644
--- a/compose.manager.plg
+++ b/compose.manager.plg
@@ -36,15 +36,18 @@
 >
 
 <CHANGES>
-###2026.06.15.1000
-- Features: refactor column customization UI with transfer lists and responsive design
-- Features: enhance stack toggle functionality with batching and user intent tracking
-- Features: add expand/collapse all functionality for compose stacks
-- Features: promote col customizer and remove basic/advanced toggle
-- Features: Implement snapshot loading for compose metrics and enhance data publishing to ensure data shows during progressive loading
-- Features: Add column visibility customization for stack and service tables
+###2026.06.18.1637
+- Features (compose): enhance column customization with reorder functionality and UI updates
+- Features (compose): implement stack row striping synchronization for improved UI consistency
+- Features (compose): add health status column and related functionality to stack and container views
+- Features: add custom interval settings for compose stats and enhance nchan publisher
+- Bug Fixes (composeStats): enhance memory value parsing and sanitize docker stats fields
+- Performance (compose): throttle dockerload cache paints during websocket bursts
+- Performance (compose): avoid full-table applyListView during progressive row inserts
+- Performance (compose): debounce composeListRefreshed during progressive row load
+- Performance: implement parallel project loading with request queuing and progress tracking
 - [PR #120](https://github.com/mstrhakr/compose_plugin/pull/120)
-- [beta release diff](https://github.com/mstrhakr/compose_plugin/compare/v2026.06.06...v2026.06.15.1000)
+- [beta release diff](https://github.com/mstrhakr/compose_plugin/compare/v2026.06.06...v2026.06.18.1637)
 </CHANGES>
 
 <!-- The 'pre-install' script. -->

From 8fbe44b8a6ee9a36c898c3ce7ef974a3e86b9ed9 Mon Sep 17 00:00:00 2001
From: "github-actions[bot]" <github-actions[bot]@users.noreply.github.com>
Date: Thu, 18 Jun 2026 20:38:16 +0000
Subject: [PATCH 67/67] Release v2026.06.18.1637 [skip ci]

---
 compose.manager.plg | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/compose.manager.plg b/compose.manager.plg
index f16d3b61..ab9ed38e 100644
--- a/compose.manager.plg
+++ b/compose.manager.plg
@@ -2,11 +2,11 @@
 <!DOCTYPE PLUGIN [
 <!ENTITY name "compose.manager">
 <!ENTITY author "mstrhakr">
-<!ENTITY version     "2026.06.15.1000">
+<!ENTITY version     "2026.06.18.1637">
 <!ENTITY launch "Settings/&name;.settings">
 <!ENTITY packageVER "&version;">
-<!ENTITY packageMD5  "6f65a37884f19b4ff9712b05e4331150">
-<!ENTITY pkgBUILD    "1000">
+<!ENTITY packageMD5  "c555ac177f88ba7bfca46b205eb9136a">
+<!ENTITY pkgBUILD    "1637">
 <!ENTITY packageName "&name;-&packageVER;-noarch-&pkgBUILD;">
 <!ENTITY packagefile "&packageName;.txz">
 <!ENTITY github "mstrhakr/compose_plugin">