release: v0.1.5

Fixes a real bug in scripts/release.sh's per-package entity matching found while cutting this release: "podman"'s own glob also matched podman-compose's file (podman is a literal prefix of podman-compose), and find | head -n1's unsorted output order let podman-compose's package silently win the "podman" entity on this run. Now explicitly skips any match that actually belongs to a different, more specific component name also in the COMPONENTS list. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Rework Dashboard, add toasts, container folders/icons/WebUI links, detail tabs
2026-07-13 21:53:59 +00:00 · 2026-07-13 21:32:34 +00:00 · 2026-07-12 23:39:17 +00:00
23 changed files with 1462 additions and 119 deletions
@@ -107,10 +107,11 @@ jobs:
        run: |
          set -eu
          API="https://${GITEA_HOST}/api/v1/repos/${GITEA_REPO}"
-          case "${{ steps.version.outputs.value }}" in
+          # Every release is a normal release, not a "pre-release" — the
-            0.*) prerelease=true ;;
+          # earlier 0.x-is-always-prerelease default didn't match what
-            *) prerelease=false ;;
+          # this project actually wants published (v0.1.3 was explicitly
-          esac
+          # corrected off "pre-release" after the fact).
          prerelease=false
          # Idempotent: if a release for this tag already exists (e.g. a
          # re-run after a transient failure), delete it first rather than
@@ -9,6 +9,114 @@ see [docs/ARCHITECTURE.md](docs/ARCHITECTURE.md#52-build-strategie)).
 ## [Unreleased]
 ## [0.1.5] - 2026-07-13
 ### Added
 - Containers panel: folders to group containers (name + optional icon
  URL), purely cosmetic organizational metadata stored in the plugin's
  own `folders.json` — podman itself has no such concept, same as
  Unraid's own Docker page's folders. "+ New Folder", a "Move to Folder"
  submenu on each container's row menu, and per-folder rename/delete
  (deleting a folder only ungroups its containers, never touches them).
  A folder with nothing assigned yet still shows up (so there's
  somewhere to move a container into); one that's merely hidden by the
  current search/filter does not. A folder's header always shows an
  icon+name+status chip per member — collapsed or expanded, matching how
  Unraid's own Docker page folders behave — rather than hiding everything
  behind a bare count; clicking a chip opens the same row menu the "⋮"
  button does (Details is now a menu item there too, alongside
  Pause/Kill/Rename/Edit/Remove) rather than jumping straight to the
  detail modal. "Move to Folder" only shows for a container that isn't
  grouped yet — once it's in one, that item becomes a direct "Remove
  from Folder" instead, since "move to a folder" reads as "add" and is
  ambiguous/redundant once it's already in one. Containers can also
  carry an icon URL (settable in the create/edit form, auto-filled when
  creating from a template) shown in the table instead of the 2-letter
  initials avatar.
 - Containers can now carry a WebUI URL too (create/edit form, preserved
  through Update/Update All the same way the icon URL is), shown as a
  small open-in-new-tab button next to the name in the Containers table
  when set. Both this and the icon are stored as the plugin's own
  container labels (`podman-webui.weburl`/`.icon`), read straight off
  the already-fetched container list — no extra per-container calls.
 - Container detail modal: 5 new tabs (Resources, Logs, Console, Events,
  Healthcheck), rounding it out from 6 to 11 of prompt.md's 12 requested
  tabs (Volumes was left merged into the existing Mounts tab — same
  underlying source/destination data, a separate tab would just repeat
  it). Resources shows live CPU/memory alongside configured limits
  (memory/swap/CPU/PIDs/block-I/O — a `0` in podman's own HostConfig
  means "unlimited", not zero). Logs reuses the existing per-container
  logs endpoint. Console opens a real ttyd/podman-exec session scoped to
  the modal, cleaned up (killing the ttyd process server-side) on every
  way of leaving — switching tabs, Close, backdrop click, or Escape —
  not just on an explicit Disconnect, so peeking at a console doesn't
  leak an orphaned ttyd process. Events and Healthcheck are both one-shot
  historical queries (libpod's `/events?stream=false` for the last 7
  days, and inspect's own `State.Health.Log`) rather than a live stream,
  which stays out of scope (see dashboard.js's own note on why).
 - A real toast notification system (success/warning/error/info, auto-
  dismissing, stacked bottom-right, dismissible early) replacing every
  `alert()` used for one-way feedback across Containers, Images, Volumes,
  Networks, Pods, Templates, Compose, and Settings — confirmations stay
  native `confirm()` (a decision, not a notice), and long command output
  (`podman compose up/down`, previously also an `alert()`) now goes to
  the existing scrolling log-modal instead, which fits it better than a
  toast ever could.
 - Dashboard reworked: a clean 6-tile row of plain counts (Running,
  Stopped, Pods, Images, Volumes, Networks — colored green/red on
  Running/Stopped so fleet health reads at a glance), a single "Resource
  Usage" card with aligned CPU/Memory/Swap/Storage meter rows (bars shift
  to warn/bad colors above 75%/90% instead of staying accent-colored at
  any value), and an "Autostart Queue" table (reusing
  `podman-autostart.sh`'s own per-container failure counters, so it shows
  exactly what that script would decide, not a second tracked history).
  Bar-and-percentage metrics were kept out of the plain-count tile grid
  entirely after an earlier attempt at combining them (a tile spanning
  multiple grid columns) left dead, empty cells in the layout.
 - Dashboard and Containers now auto-refresh every ~2s (paused while the
  tab is hidden or a modal is open) instead of requiring a manual
  Refresh click to see current state.
 - Settings: an "Add container" dropdown + button above the Autostart
  order table — previously that table could only reorder/remove
  containers already in the chain, with no way to add one in the first
  place.
 - Containers: "Update All" now also removes the old, now-unused image
  version each updated container leaves behind (only when at least one
  container actually updated), instead of leaving stale images to pile up
  on disk after every update run.
 ### Fixed
 - Dashboard memory usage was calculated from libpod's raw `memFree` (which
  excludes reclaimable buffers/cache), showing usage far higher than
  reality — e.g. 67% "used" where `free -h` reported 19%. Now reads
  `/proc/meminfo`'s `MemAvailable` directly, matching what `free -h` and
  most monitoring tools show.
 - Dashboard CPU usage never changed — libpod's own `/info` computes
  `cpuUtilization` once and never resamples it (confirmed live: three
  calls seconds apart returned byte-identical numbers). Now computed from
  `/proc/stat` deltas between successive requests, the same technique
  `top`/`htop` use, which auto-refresh's ~2s cadence fits naturally.
 - Context menus (a container's "⋮", a folder's "⋮") always dropped down
  from the anchor at a fixed position — opened from a row near the
  bottom of the viewport, the menu ran off-screen with its last items
  unreachable. Now measures its own actual rendered size (which varies
  with item count) after appending and flips above the anchor instead
  when there isn't enough room below, clamped horizontally too.
 - Expanding/collapsing a folder shifted every column (including the
  header text) in the Containers table — its default `table-layout:
  auto` sizes each column from the widest content among only the
  currently-visible rows, so adding/removing a folder's rows changed
  what counted as "widest" on every toggle. Columns now use explicit
  fixed widths that don't depend on row content at all.
 - The Name column's content (icon + name + WebUI button) was
  misaligned with its own header, drifting further off with every row —
  putting `display:flex` directly on the `<td>` (to keep the WebUI
  button on the same line as the name) pulls that cell out of
  table-cell layout entirely, so with `table-layout:fixed` it stopped
  respecting the column width its `<th>` assigns. The flex layout now
  lives on a `<div>` inside the `<td>` instead, so the `<td>` itself
  stays a normal, fixed-width table cell.
 ## [0.1.3] - 2026-07-12
 ### Added
@@ -50,7 +50,7 @@
 <!DOCTYPE PLUGIN [
 <!ENTITY name       "podman">
 <!ENTITY author     "unraid-podman contributors">
-<!ENTITY version    "0.1.3">
+<!ENTITY version    "0.1.5">
 <!-- "Podman" (no parent) — Podman.page declares Menu="Podman", making it
     its own top-level nav tab next to Docker/VMs, not nested under
     Settings — see webui/plugins/podman/Podman.page. -->
@@ -69,7 +69,7 @@
 <!-- Release asset base — matches scripts/release.sh's RELEASE_BASE_URL
     exactly; both must agree since release.sh is what publishes the
     packages this URL is expected to find. -->
-<!ENTITY baseURL "https://git.mp-mueller.de/magges/unraid-podman/releases/download/v0.1.3">
+<!ENTITY baseURL "https://git.mp-mueller.de/magges/unraid-podman/releases/download/v0.1.5">
 <!-- Slackware package naming components — must match versions.env's
     PKG_ARCH/PKG_BUILD/PKG_TAG (see that file). Kept as entities here so
@@ -88,31 +88,31 @@
 <!ENTITY podman_txz_version "6.0.1">
 <!ENTITY podman_txz_file    "podman-6.0.1-x86_64-1_unraidpodman.txz">
-<!ENTITY podman_txz_md5     "f294f9eaf7139b43d153cafaed34de48">
+<!ENTITY podman_txz_md5     "692b8df0a1ac25544748dea4ff518705">
 <!ENTITY conmon_txz_version "2.2.1">
 <!ENTITY conmon_txz_file    "conmon-2.2.1-x86_64-1_unraidpodman.txz">
-<!ENTITY conmon_txz_md5     "e1e3b4b15398d965ee4efdfac93b1867">
+<!ENTITY conmon_txz_md5     "fc0af377c1beeee452040e8991c4aafa">
 <!ENTITY crun_txz_version "1.28">
 <!ENTITY crun_txz_file    "crun-1.28-x86_64-1_unraidpodman.txz">
-<!ENTITY crun_txz_md5     "891914e9448a960dd28a9d1ea67e63b3">
+<!ENTITY crun_txz_md5     "2e787b0f6826fc61b7a76ca42573d6c4">
 <!ENTITY netavark_txz_version "2.0.0">
 <!ENTITY netavark_txz_file    "netavark-2.0.0-x86_64-1_unraidpodman.txz">
-<!ENTITY netavark_txz_md5     "ef8509cc51d24ef1cae4d96f1fd92a01">
+<!ENTITY netavark_txz_md5     "27a2128b2fcbeb590773c5dd004d911e">
 <!ENTITY aardvark_dns_txz_version "2.0.0">
 <!ENTITY aardvark_dns_txz_file    "aardvark-dns-2.0.0-x86_64-1_unraidpodman.txz">
-<!ENTITY aardvark_dns_txz_md5     "2a5a5c2e3684b4130edd4b128484908f">
+<!ENTITY aardvark_dns_txz_md5     "f775f20903c2301736594fdde0081c6d">
 <!ENTITY passt_txz_version "git6ef3d1c">
 <!ENTITY passt_txz_file    "passt-git6ef3d1c-x86_64-1_unraidpodman.txz">
-<!ENTITY passt_txz_md5     "970a8f15257e5861933ae58459da2bd4">
+<!ENTITY passt_txz_md5     "9257eb90fb218b047e9f099e9b2f0418">
 <!ENTITY fuse_overlayfs_txz_version "1.17">
 <!ENTITY fuse_overlayfs_txz_file    "fuse-overlayfs-1.17-x86_64-1_unraidpodman.txz">
-<!ENTITY fuse_overlayfs_txz_md5     "11f5aefe0372427ae194017f54af5d47">
+<!ENTITY fuse_overlayfs_txz_md5     "431b1d3ab36d05f817379ef36ba70ae2">
 <!-- catatonit and nftables are runtime dependencies this plugin ships,
     not upstream podman-ecosystem components — see packages/catatonit/
@@ -122,7 +122,7 @@
     systemd/dbus for firewalld) and why neither is built from source. -->
 <!ENTITY catatonit_txz_version "0.2.1">
 <!ENTITY catatonit_txz_file    "catatonit-0.2.1-x86_64-1_unraidpodman.txz">
-<!ENTITY catatonit_txz_md5     "e17faf29b0c618a73def017583697aca">
+<!ENTITY catatonit_txz_md5     "a335c4924f244a41662f891d79b1251d">
 <!ENTITY nftables_txz_version "1.0.1">
 <!ENTITY nftables_txz_file    "nftables-1.0.1-x86_64-1_unraidpodman.txz">
@@ -133,7 +133,7 @@
     every Compose panel action fails outright on a clean install. -->
 <!ENTITY podman_compose_txz_version "1.6.0">
 <!ENTITY podman_compose_txz_file    "podman-compose-1.6.0-x86_64-1_unraidpodman.txz">
-<!ENTITY podman_compose_txz_md5     "2d7e21b071d40ab3518acbec67967777">
+<!ENTITY podman_compose_txz_md5     "f4344ec947cab1a73c50f9afa0b24bee">
 <!-- unraid-podman is this project's OWN scaffolding package (rc.podman,
     sbin/ scripts, event/ hooks, config templates — see
@@ -141,9 +141,9 @@
     version always equals the plugin's own &version; — see
     packages/unraid-podman/unraid-podman.SlackBuild, which reads it
     straight out of this very file rather than tracking it twice. -->
-<!ENTITY unraid_podman_txz_version "0.1.3">
+<!ENTITY unraid_podman_txz_version "0.1.5">
-<!ENTITY unraid_podman_txz_file    "unraid-podman-0.1.3-x86_64-1_unraidpodman.txz">
+<!ENTITY unraid_podman_txz_file    "unraid-podman-0.1.5-x86_64-1_unraidpodman.txz">
-<!ENTITY unraid_podman_txz_md5     "ceeb31f08ad0df62dee1b6a6f1ed3bba">
+<!ENTITY unraid_podman_txz_md5     "750fc748b054865b41297a658864d261">
 ]>
 <PLUGIN name="&name;"
@@ -85,7 +85,31 @@ sed -i -E "s|(<!ENTITY baseURL[[:space:]]+\")[^\"]*(\">)|\1${RELEASE_BASE_URL}\2
 for name in "${COMPONENTS[@]}"; do
  # dist/ contains files like podman-6.0.1-x86_64-1_unraidpodman.txz — find
  # the one for this component (there should be exactly one per release).
-  txz_path=$(find "$DIST_DIR" -maxdepth 1 -name "${name}-*-*-*.txz" | head -n1)
+  # NOT `find ... | head -n1`: "podman"'s own glob (podman-*-*-*.txz) also
  # matches podman-compose's file (podman-compose-*-*-*.txz), since
  # "podman" is a literal prefix of "podman-compose" — find's output order
  # is filesystem-dependent, not sorted, so head -n1 silently picked
  # podman-compose's package for the "podman" entity on one real run,
  # publishing a release whose podman.plg pointed at the wrong .txz for
  # the actual podman package entirely. Explicitly skip any match that
  # actually belongs to a DIFFERENT, more specific name also in
  # COMPONENTS (i.e. itself prefixed by another component's name).
  txz_path=""
  for candidate in "$DIST_DIR"/"${name}"-*-*-*.txz; do
    [ -e "$candidate" ] || continue
    base=$(basename "$candidate")
    belongs_to_other=0
    for other in "${COMPONENTS[@]}"; do
      if [ "$other" != "$name" ] && [ "${base#"$other"-}" != "$base" ]; then
        belongs_to_other=1
        break
      fi
    done
    if [ "$belongs_to_other" -eq 0 ]; then
      txz_path="$candidate"
      break
    fi
  done
  if [ -z "$txz_path" ]; then
    echo "!! No built .txz found for component '$name' in $DIST_DIR" >&2
    echo "!! Did scripts/build-packages.sh run successfully for it?" >&2
@@ -87,11 +87,30 @@ function podman_asset_version(string $relPath): string
    <section class="podman-panel active" id="podman-panel-dashboard">
      <div class="podman-grid podman-stat-grid">
        <div class="podman-stat"><div class="label">Running</div><div class="value tnum"><span id="stat-running">—</span> <small id="stat-running-total"></small></div></div>
        <div class="podman-stat"><div class="label">Stopped</div><div class="value tnum" id="stat-stopped">—</div></div>
        <div class="podman-stat"><div class="label">Pods</div><div class="value tnum" id="stat-pods">—</div></div>
        <div class="podman-stat"><div class="label">Images</div><div class="value tnum" id="stat-images">—</div></div>
        <div class="podman-stat"><div class="label">Volumes</div><div class="value tnum" id="stat-volumes">—</div></div>
        <div class="podman-stat"><div class="label">Networks</div><div class="value tnum" id="stat-networks">—</div></div>
-        <div class="podman-stat"><div class="label">Images on Disk</div><div class="value tnum" id="stat-images-size">—</div></div>
+      </div>
      <div class="podman-card" style="margin-top: 14px;">
        <div class="podman-card-head">
          <div><h2>Resource Usage</h2><div class="sub">Live CPU, memory, swap, and storage from the Podman host.</div></div>
        </div>
        <div class="podman-card-pad" id="dashboard-resource-rows">—</div>
      </div>
      <div class="podman-card" style="margin-top: 14px;" id="dashboard-autostart-card">
        <div class="podman-card-head">
          <div><h2>Autostart Queue</h2><div class="sub">/boot/config/plugins/podman/autostart</div></div>
        </div>
        <div class="podman-table-wrap">
          <table>
            <thead><tr><th>#</th><th>Container</th><th>Delay</th><th>Last Result</th></tr></thead>
            <tbody id="dashboard-autostart-tbody"></tbody>
          </table>
        </div>
      </div>
    </section>
@@ -106,12 +125,21 @@ function podman_asset_version(string $relPath): string
            <button data-filter="stopped" id="containers-count-stopped">Stopped</button>
          </div>
          <button class="podman-btn podman-btn-primary" id="containers-check-updates-btn" style="margin-left:auto;">Check for Updates</button>
-          <button class="podman-btn podman-btn-primary" id="containers-update-all-btn">Update All</button>
+          <button class="podman-btn podman-btn-primary" id="containers-update-all-btn" title="Also removes the old image versions this leaves unused">Update All</button>
          <button class="podman-btn" id="containers-new-folder-btn">+ New Folder</button>
          <button class="podman-btn podman-btn-primary" id="containers-create-btn">+ New Container</button>
        </div>
        <div class="podman-table-wrap">
-          <table>
+          <table id="containers-table">
-            <thead><tr><th>Status</th><th>Name</th><th>Image</th><th>CPU/Mem</th><th>Ports</th><th>Uptime</th><th></th></tr></thead>
+            <thead><tr>
              <th style="width:10%;">Status</th>
              <th style="width:20%;">Name</th>
              <th style="width:26%;">Image</th>
              <th style="width:12%;">CPU/Mem</th>
              <th style="width:16%;">Ports</th>
              <th style="width:8%;">Uptime</th>
              <th style="width:8%;"></th>
            </tr></thead>
            <tbody id="containers-tbody"></tbody>
          </table>
        </div>
@@ -316,13 +344,17 @@ function podman_asset_version(string $relPath): string
          <div class="podman-field-row">
            <label>Autostart order</label>
            <div>
              <div class="podman-term-launcher">
                <label>Add container <select class="podman-term-select" id="autostart-add-select"><option value="">All containers already added</option></select></label>
                <button class="podman-btn podman-btn-primary" id="autostart-add-btn">+ Add to Autostart</button>
              </div>
              <div class="podman-table-wrap">
                <table>
                  <thead><tr><th>#</th><th>Container</th><th></th></tr></thead>
                  <tbody id="autostart-tbody"></tbody>
                </table>
              </div>
-              <div class="hint">Saved immediately on reorder/remove — no separate save step.</div>
+              <div class="hint">Saved immediately on add/reorder/remove — no separate save step.</div>
            </div>
          </div>
        </div>
@@ -18,6 +18,11 @@
 *   kill      POST {"id": "...", "signal": "SIGKILL"}
 *   rename    POST {"id": "...", "name": "..."}
 *   logs      GET  (&id=...&tail=200) -> plain text
 *   events    GET  (&id=...&since=<unix seconds, default 7d ago>) -> array
 *             of this one container's already-happened events (create,
 *             start, stop, died, ...) — a bounded historical query, not a
 *             live stream; see PodmanClient::containerEvents()'s own doc
 *             comment for why that distinction matters here.
 *   list_gpus GET  -> detected AMD/Intel GPUs (/dev/dri), for the Create Container form's optional passthrough toggle
 *   check_updates GET -> {"<image ref>": {"updateAvailable": bool, "error": "..."?}} for every image currently in use
 *   create    POST {"image": "...", "name": "...", "networkMode": "bridge"|"host"|"none"|"<custom-network-name>",
@@ -26,7 +31,8 @@
 *                    "volumes": [{"kind": "named"|"path", "source": "myvol"|"/mnt/...", "containerPath": "/data"}],
 *                    "env": [{"key": "...", "value": "..."}], "restartPolicy": "no", "pod": "<existing-pod-name>",
 *                    "gpuDevices": ["/dev/dri/renderD128", "/dev/dri/card0"],
- *                    "privileged": false, "startAfterCreate": true}
+ *                    "privileged": false, "startAfterCreate": true, "icon": "https://..." (optional),
 *                    "webuiUrl": "http://10.1.1.1:8080/" (optional)}
 */
 declare(strict_types=1);
@@ -57,6 +63,15 @@ switch ($action) {
        podman_json_response(['text' => $client->containerLogs($id, $tail)]);
        break;
    case 'events':
        $id = (string) ($_GET['id'] ?? '');
        if ($id === '') {
            podman_json_error('Missing id', 400);
        }
        $since = (int) ($_GET['since'] ?? (time() - 7 * 86400));
        podman_json_response($client->containerEvents($id, $since));
        break;
    case 'start':
        $body = podman_read_json_body();
        $client->startContainer(require_id($body));
@@ -278,6 +293,19 @@ function build_container_spec(string $image, array $body): array
        $spec['name'] = $name;
    }
    $icon = trim((string) ($body['icon'] ?? ''));
    $webuiUrl = trim((string) ($body['webuiUrl'] ?? ''));
    $labels = [];
    if ($icon !== '') {
        $labels['podman-webui.icon'] = $icon;
    }
    if ($webuiUrl !== '') {
        $labels['podman-webui.weburl'] = $webuiUrl;
    }
    if ($labels !== []) {
        $spec['labels'] = $labels;
    }
    $env = [];
    foreach (($body['env'] ?? []) as $row) {
        $key = trim((string) ($row['key'] ?? ''));
@@ -470,6 +498,14 @@ function containers_list(PodmanClient $client): array
            'cpuPercent' => $cpuPercent,
            'memUsageBytes' => $memUsageBytes,
            'memLimitBytes' => $memLimitBytes,
            // Set at create time (see build_container_spec()) from either
            // the template it was created from or a manually-entered URL —
            // this plugin's own label, not Unraid's real Docker manager's
            // net.unraid.docker.icon (this isn't Docker, so reusing that
            // name would misleadingly imply real interop with tools that
            // read it).
            'icon' => $c['Labels']['podman-webui.icon'] ?? null,
            'webUrl' => $c['Labels']['podman-webui.weburl'] ?? null,
        ];
    }
@@ -0,0 +1,91 @@
 <?php
 /**
 * ajax/folders.php
 *
 * Container folders — a purely cosmetic, plugin-owned organizational
 * feature for the Containers panel. podman/libpod itself has no concept
 * of "folders"; this is grouping metadata only (name + icon + which
 * container names belong to it), similar to Unraid's own Docker page's
 * folders. Stored as JSON at PodmanConfig::$foldersFile — not a
 * PodmanClient/libpod concern, see Config.php.
 *
 * Actions (?action=...):
 *   list  GET  -> {"folders": [{"id": "...", "name": "...", "icon": "...", "containers": ["name", ...]}, ...]}
 *   save  POST {"folders": [...]} -> persists the whole list (same
 *         whole-list-replace pattern settings.php's autostart_save uses
 *         — the frontend already holds the full, current structure in
 *         memory after any add/rename/reassign, so there's no need for
 *         narrower per-folder mutation endpoints)
 */
 declare(strict_types=1);
 require __DIR__ . '/../include/bootstrap.php';
 $action = $_GET['action'] ?? '';
 switch ($action) {
    case 'list':
        podman_json_response(['folders' => folders_read($podmanConfig)]);
        break;
    case 'save':
        $body = podman_read_json_body();
        podman_json_response(['folders' => folders_save($podmanConfig, is_array($body['folders'] ?? null) ? $body['folders'] : [])]);
        break;
    default:
        podman_json_error("Unknown action '{$action}'", 400);
 }
 /** @return array<int,array<string,mixed>> */
 function folders_read(PodmanConfig $config): array
 {
    if (!is_readable($config->foldersFile)) {
        return [];
    }
    $decoded = json_decode((string) file_get_contents($config->foldersFile), true);
    return is_array($decoded) ? $decoded : [];
 }
 /**
 * Re-validates and normalizes before writing — a folder with no name (or
 * whose name became empty through some client-side bug) is silently
 * dropped rather than persisted as junk that would then need cleaning up
 * by hand in the JSON file directly.
 *
 * @param array<int,mixed> $folders
 * @return array<int,array<string,mixed>> the normalized list actually written
 */
 function folders_save(PodmanConfig $config, array $folders): array
 {
    $clean = [];
    foreach ($folders as $f) {
        if (!is_array($f)) {
            continue;
        }
        $name = trim((string) ($f['name'] ?? ''));
        if ($name === '') {
            continue;
        }
        $containers = [];
        foreach (($f['containers'] ?? []) as $n) {
            $n = trim((string) $n);
            if ($n !== '') {
                $containers[] = $n;
            }
        }
        $clean[] = [
            'id' => (string) ($f['id'] ?? '') !== '' ? (string) $f['id'] : bin2hex(random_bytes(6)),
            'name' => $name,
            'icon' => trim((string) ($f['icon'] ?? '')),
            'containers' => $containers,
        ];
    }
    if (file_put_contents($config->foldersFile, json_encode($clean, JSON_PRETTY_PRINT | JSON_UNESCAPED_SLASHES), LOCK_EX) === false) {
        podman_json_error("Could not write {$config->foldersFile}", 500);
    }
    return $clean;
 }
@@ -131,7 +131,7 @@ function settings_get(PodmanConfig $config): array
        'enabled' => $config->enabled,
        'stopTimeoutSeconds' => $config->stopTimeoutSeconds,
        'autostart' => autostart_read($config),
-        'packageVersions' => installed_package_versions(),
+        'packageVersions' => podman_read_installed_versions(),
    ];
 }
@@ -202,31 +202,3 @@ function autostart_save(PodmanConfig $config, array $names): void
    }
 }
 /**
 * Reads /usr/local/share/unraid-podman/installed-versions.env — the same
 * manifest plugin/sbin/podman-verify-packages.sh and
 * podman-update-packages.sh use (see plugin/podman.plg's postinstall step,
 * which generates it) — so Settings shows exactly what those tools would
 * report, not a second, possibly-diverging source of truth.
 *
 * @return array<string,string>
 */
 function installed_package_versions(): array
 {
    $path = '/usr/local/share/unraid-podman/installed-versions.env';
    if (!is_readable($path)) {
        return [];
    }
    $lines = file($path, FILE_IGNORE_NEW_LINES | FILE_SKIP_EMPTY_LINES) ?: [];
    $out = [];
    foreach ($lines as $line) {
        $line = trim($line);
        if ($line === '' || str_starts_with($line, '#')) {
            continue;
        }
        if (preg_match('/^([A-Z_][A-Z0-9_]*)="?([^"]*)"?$/', $line, $m)) {
            $out[$m[1]] = $m[2];
        }
    }
    return $out;
 }
@@ -8,7 +8,11 @@
 * doesn't have to make (and wait on) five separate round trips.
 *
 * Actions (?action=...):
- *   summary   GET -> counts, storage usage, engine version, ping status
+ *   summary          GET -> counts, storage usage, engine version, ping status
 *   autostart_queue  GET -> the autostart list in start order, each entry's
 *                     configured delay, and its last-known outcome (reusing
 *                     plugin/sbin/podman-autostart.sh's own failure-counter
 *                     files rather than tracking a second copy of that state)
 */
 declare(strict_types=1);
@@ -22,6 +26,10 @@ switch ($action) {
        podman_json_response(system_summary($client, $podmanConfig));
        break;
    case 'autostart_queue':
        podman_json_response(system_autostart_queue($client, $podmanConfig));
        break;
    default:
        podman_json_error("Unknown action '{$action}'", 400);
 }
@@ -56,6 +64,23 @@ function system_summary(PodmanClient $client, PodmanConfig $config): array
        $imagesSize += (int) ($img['Size'] ?? 0);
    }
    $host = $info['host'] ?? [];
    $store = $info['store'] ?? [];
    $meminfo = podman_read_meminfo();
    // libpod's host.memFree/swapFree are the kernel's raw "free" counters —
    // they exclude reclaimable buffers/cache, so on a host that's been up a
    // while they make used memory look dramatically higher than reality
    // (found live: 67% "used" here vs. the 19% `free -h` actually reports).
    // /proc/meminfo's MemAvailable is the same estimate `free -h`'s
    // "available" column and most monitoring tools use, so read it
    // directly instead of trusting libpod's numbers for this.
    $memTotal = $meminfo['MemTotal'] ?? (int) ($host['memTotal'] ?? 0);
    $memAvailable = $meminfo['MemAvailable'] ?? (int) ($host['memFree'] ?? 0);
    $swapTotal = $meminfo['SwapTotal'] ?? (int) ($host['swapTotal'] ?? 0);
    $swapFree = $meminfo['SwapFree'] ?? (int) ($host['swapFree'] ?? 0);
    $graphAllocated = (int) ($store['graphRootAllocated'] ?? 0);
    $graphUsed = (int) ($store['graphRootUsed'] ?? 0);
    return [
        'reachable' => true,
        'socketPath' => $config->socketPath,
@@ -66,6 +91,7 @@ function system_summary(PodmanClient $client, PodmanConfig $config): array
        'containers' => [
            'total' => count($containers),
            'running' => $running,
            'stopped' => count($containers) - $running,
        ],
        'pods' => count($pods),
        'images' => count($images),
@@ -74,6 +100,170 @@ function system_summary(PodmanClient $client, PodmanConfig $config): array
        'storage' => [
            'imagesSizeBytes' => $imagesSize,
            'imagesSizeFormatted' => podman_format_bytes($imagesSize),
            'graphUsedBytes' => $graphUsed,
            'graphAllocatedBytes' => $graphAllocated,
            'graphUsedFormatted' => podman_format_bytes($graphUsed),
            'graphAllocatedFormatted' => podman_format_bytes($graphAllocated),
            'graphUsedPercent' => $graphAllocated > 0 ? round($graphUsed / $graphAllocated * 100, 1) : null,
        ],
        'host' => [
            'cpuCount' => (int) ($host['cpus'] ?? 0),
            'cpuPercent' => podman_read_cpu_percent() ?? (isset($host['cpuUtilization']['idlePercent'])
                ? round(100 - (float) $host['cpuUtilization']['idlePercent'], 1)
                : null),
            'memUsedBytes' => max(0, $memTotal - $memAvailable),
            'memTotalBytes' => $memTotal,
            'memUsedFormatted' => podman_format_bytes(max(0, $memTotal - $memAvailable)),
            'memTotalFormatted' => podman_format_bytes($memTotal),
            'memPercent' => $memTotal > 0 ? round(($memTotal - $memAvailable) / $memTotal * 100, 1) : null,
            'swapUsedBytes' => max(0, $swapTotal - $swapFree),
            'swapTotalBytes' => $swapTotal,
            'uptime' => (string) ($host['uptime'] ?? ''),
        ],
    ];
 }
 /**
 * The Dashboard's "Autostart Queue" table: same list/order Settings already
 * reads via autostart_read() in settings.php, enriched with each entry's
 * configured post-start delay and its last-known outcome — derived from
 * plugin/sbin/podman-autostart.sh's own per-container failure-counter
 * files (under autostart-failures/<name>) plus the container's actual
 * current state, rather than a second, separately-tracked history.
 *
 * @return array<string,mixed>
 */
 function system_autostart_queue(PodmanClient $client, PodmanConfig $config): array
 {
    if (!is_readable($config->autostartFile)) {
        return ['entries' => []];
    }
    $names = [];
    foreach (file($config->autostartFile, FILE_IGNORE_NEW_LINES | FILE_SKIP_EMPTY_LINES) ?: [] as $line) {
        $line = trim(preg_replace('/#.*$/', '', $line) ?? '');
        if ($line !== '') {
            $names[] = $line;
        }
    }
    if (!$names) {
        return ['entries' => []];
    }
    $delays = [];
    if (is_readable($config->autostartDelayFile)) {
        foreach (file($config->autostartDelayFile, FILE_IGNORE_NEW_LINES | FILE_SKIP_EMPTY_LINES) ?: [] as $line) {
            if (preg_match('/^([^=]+)=(\d+)$/', trim($line), $m)) {
                $delays[$m[1]] = (int) $m[2];
            }
        }
    }
    // Mirrors podman-autostart.sh's own MAX_CONSECUTIVE_FAILURES — that
    // script is what actually decides when a container is Safe-Mode-paused;
    // this only needs to agree on the same threshold to describe it
    // accurately, not to make the decision itself.
    $maxFailures = 3;
    $failuresDir = $config->bootDir . '/autostart-failures';
    $stateByName = [];
    foreach ($client->listContainers(true) as $c) {
        foreach (($c['Names'] ?? []) as $n) {
            $stateByName[ltrim((string) $n, '/')] = strtolower((string) ($c['State'] ?? ''));
        }
    }
    $entries = [];
    foreach ($names as $i => $name) {
        $failCount = 0;
        $failFile = $failuresDir . '/' . $name;
        if (is_readable($failFile)) {
            $failCount = (int) trim((string) file_get_contents($failFile));
        }
        if ($failCount >= $maxFailures) {
            $status = 'safe-mode';
            $label = "Safe-Mode ({$failCount} failures)";
        } elseif ($failCount > 0) {
            $status = 'failed';
            $label = "Failed ({$failCount}/{$maxFailures})";
        } elseif (($stateByName[$name] ?? '') === 'running') {
            $status = 'started';
            $label = 'Started';
        } elseif (array_key_exists($name, $stateByName)) {
            $status = 'stopped';
            $label = 'Not running';
        } else {
            $status = 'unknown';
            $label = 'Container not found';
        }
        $entries[] = [
            'position' => $i + 1,
            'name' => $name,
            'delaySeconds' => $delays[$name] ?? 0,
            'status' => $status,
            'statusLabel' => $label,
        ];
    }
    return ['entries' => $entries];
 }
 /**
 * Reads the fields we need out of /proc/meminfo directly, in bytes.
 * ajax/*.php runs as PHP-FPM on the Unraid host itself (not inside a
 * container), so this is just a local file read — no shelling out needed.
 *
 * @return array<string,int>
 */
 function podman_read_meminfo(): array
 {
    $lines = @file('/proc/meminfo', FILE_IGNORE_NEW_LINES | FILE_SKIP_EMPTY_LINES) ?: [];
    $out = [];
    foreach ($lines as $line) {
        if (preg_match('/^(MemTotal|MemAvailable|SwapTotal|SwapFree):\s*(\d+)\s*kB$/', $line, $m)) {
            $out[$m[1]] = ((int) $m[2]) * 1024;
        }
    }
    return $out;
 }
 /**
 * Live CPU usage via the classic /proc/stat delta technique: libpod's own
 * /info.host.cpuUtilization turned out to be a value computed once and
 * never resampled (verified live — three /info calls several seconds
 * apart returned byte-identical numbers), which is why the Dashboard's
 * CPU tile never moved. A single instantaneous read of /proc/stat can't
 * give a percentage on its own either (its counters are cumulative
 * jiffies since boot) — it needs two samples to diff. Since the Dashboard
 * already re-fetches this endpoint every ~2s via auto-refresh, the
 * previous sample is persisted to a small state file and diffed against
 * the current one on each call, exactly like `top`/`htop` do between
 * their own refresh ticks. Returns null (falls back to libpod's static
 * figure) only on the very first call, before any previous sample exists.
 */
 function podman_read_cpu_percent(): ?float
 {
    $stat = @file_get_contents('/proc/stat');
    if ($stat === false || !preg_match('/^cpu\s+(\d+) (\d+) (\d+) (\d+) (\d+) (\d+) (\d+) (\d+)/m', $stat, $m)) {
        return null;
    }
    [, $user, $nice, $system, $idle, $iowait, $irq, $softirq, $steal] = array_map('intval', $m);
    $total = $user + $nice + $system + $idle + $iowait + $irq + $softirq + $steal;
    $idleAll = $idle + $iowait;
    $stateFile = '/var/tmp/podman-cpu-sample';
    $prevRaw = @file_get_contents($stateFile);
    @file_put_contents($stateFile, $total . ' ' . $idleAll, LOCK_EX);
    if ($prevRaw === false || !preg_match('/^(\d+) (\d+)$/', trim($prevRaw), $pm)) {
        return null;
    }
    $deltaTotal = $total - (int) $pm[1];
    $deltaIdle = $idleAll - (int) $pm[2];
    if ($deltaTotal <= 0) {
        return null;
    }
    return round((1 - $deltaIdle / $deltaTotal) * 100, 1);
 }
@@ -21,6 +21,7 @@ final class PodmanConfig
    public string $bootDir;
    public string $autostartFile;
    public string $autostartDelayFile;
    public string $foldersFile;
    private function __construct()
    {
@@ -33,6 +34,7 @@ final class PodmanConfig
        $this->socketPath = '/var/run/podman/podman.sock';
        $this->autostartFile = $this->bootDir . '/autostart';
        $this->autostartDelayFile = $this->bootDir . '/autostart-delay';
        $this->foldersFile = $this->bootDir . '/folders.json';
    }
    public static function load(): self
@@ -185,6 +185,41 @@ final class PodmanClient
        return self::demuxStream($raw);
    }
    /**
     * GET /events?stream=false&since=...&filters={"container":["<id>"]} —
     * a bounded, already-happened event history for one container, NOT a
     * live stream (stream=false makes libpod return what already matched
     * and close the connection immediately, verified live). This is
     * enough for a container's "Events" detail tab without needing the
     * persistent-connection event-streaming infrastructure a live,
     * fleet-wide event feed would require (see dashboard.js's own header
     * comment on why that's out of scope for now).
     *
     * @return array<int,array<string,mixed>>
     */
    public function containerEvents(string $id, int $sinceUnixSeconds): array
    {
        $query = [
            'stream' => 'false',
            'since' => (string) $sinceUnixSeconds,
            'filters' => json_encode(['container' => [$id]]),
        ];
        $raw = $this->requestRaw('GET', '/events', $query);
        // Newline-delimited JSON, not a single JSON array — each line is
        // its own event object.
        $events = [];
        foreach (explode("\n", trim($raw)) as $line) {
            if ($line === '') {
                continue;
            }
            $decoded = json_decode($line, true);
            if (is_array($decoded)) {
                $events[] = $decoded;
            }
        }
        return $events;
    }
    // -------------------------------------------------------------------
    // Exec — see webui/plugins/podman/ajax/exec.php for the important
    // caveat: this implements one-shot "run a command, return its output"
@@ -11,6 +11,37 @@
 declare(strict_types=1);
 /**
 * Reads /usr/local/share/unraid-podman/installed-versions.env — the same
 * manifest plugin/sbin/podman-verify-packages.sh and
 * podman-update-packages.sh use (see plugin/podman.plg's postinstall step,
 * which generates it) — shared here so settings.php (package version
 * chips) and system.php (Dashboard's plugin version chip) both report
 * exactly what those tools would, not two possibly-diverging readers of
 * the same file.
 *
 * @return array<string,string>
 */
 function podman_read_installed_versions(): array
 {
    $path = '/usr/local/share/unraid-podman/installed-versions.env';
    if (!is_readable($path)) {
        return [];
    }
    $lines = file($path, FILE_IGNORE_NEW_LINES | FILE_SKIP_EMPTY_LINES) ?: [];
    $out = [];
    foreach ($lines as $line) {
        $line = trim($line);
        if ($line === '' || str_starts_with($line, '#')) {
            continue;
        }
        if (preg_match('/^([A-Z_][A-Z0-9_]*)="?([^"]*)"?$/', $line, $m)) {
            $out[$m[1]] = $m[2];
        }
    }
    return $out;
 }
 function podman_format_bytes(int $bytes): string
 {
    if ($bytes <= 0) {
@@ -126,6 +126,60 @@ window.Podman = (function () {
    return '<tr><td colspan="' + colspan + '" class="podman-error">' + escapeHtml(message) + '</td></tr>';
  }
  // --- Toast notifications ----------------------------------------------------
  //
  // Replaces alert() for one-way feedback ("Saved.", "Removed 3 image(s)",
  // "Save failed: ..."). Confirmations stay native confirm() — a toast is
  // for telling the user something happened, not for asking them a
  // yes/no question. Command output that can run to hundreds of lines
  // (e.g. `podman compose up`) stays in the existing openLogModal()
  // pattern instead — a toast has to stay short and auto-dismiss, which
  // doesn't fit a scrolling log.
  const TOAST_ICON = { success: '✓', warn: '!', error: '✕', info: 'ℹ' };
  const TOAST_DURATION_MS = { success: 4000, warn: 5000, error: 7000, info: 4000 };
  let toastContainer = null;
  function toastRoot() {
    if (!toastContainer) {
      toastContainer = document.createElement('div');
      toastContainer.className = 'podman-toast-container';
      (document.querySelector('.podman-plugin') || document.body).appendChild(toastContainer);
    }
    return toastContainer;
  }
  /**
   * @param {string} message
   * @param {('success'|'warn'|'error'|'info')} [type='info']
   */
  function toast(message, type) {
    const kind = TOAST_ICON[type] ? type : 'info';
    const root = toastRoot();
    const node = document.createElement('div');
    node.className = 'podman-toast podman-toast-' + kind;
    node.innerHTML =
      '<span class="ico">' + TOAST_ICON[kind] + '</span>' +
      '<span class="msg"></span>' +
      '<button type="button" class="close" aria-label="Dismiss">&#10005;</button>';
    node.querySelector('.msg').textContent = message;
    root.appendChild(node);
    let dismissed = false;
    function dismiss() {
      if (dismissed) return;
      dismissed = true;
      node.classList.add('leaving');
      // Not animationend — that never fires when prefers-reduced-motion
      // disables the animation (podman.css sets animation:none for it),
      // which would leave the toast stuck on screen forever.
      setTimeout(function () { node.remove(); }, 160);
    }
    node.querySelector('.close').addEventListener('click', dismiss);
    setTimeout(dismiss, TOAST_DURATION_MS[kind]);
  }
  // --- Modal form dialog -----------------------------------------------------
  /**
@@ -299,12 +353,32 @@ window.Podman = (function () {
        (item.disabled ? ' disabled' : '') + '>' + escapeHtml(item.label) + '</button>';
    }).join('');
    (document.querySelector('.podman-plugin') || document.body).appendChild(menu);
    // Viewport-relative (see the "position: fixed" comment on
    // .podman-context-menu in podman.css) — no scrollY/scrollX added.
    // Measured AFTER appending (not assumed) since the menu's height
    // varies with its item count — a long menu (e.g. a container's row
    // menu with Details/Pause/Kill/Rename/Edit/Remove) opened from a row
    // near the bottom of the viewport used to run off-screen with no way
    // to reach its last few items. Flips above the anchor instead when
    // there isn't enough room below, and clamps horizontally the same way.
    const rect = anchorEl.getBoundingClientRect();
-    menu.style.top = (rect.bottom + 4) + 'px';
+    const menuRect = menu.getBoundingClientRect();
-    menu.style.left = (rect.right - 180) + 'px';
+    const margin = 8;
-    (document.querySelector('.podman-plugin') || document.body).appendChild(menu);
+
    let top = rect.bottom + 4;
    if (top + menuRect.height > window.innerHeight - margin) {
      top = rect.top - menuRect.height - 4;
    }
    top = Math.max(margin, top);
    let left = rect.right - menuRect.width;
    left = Math.min(left, window.innerWidth - menuRect.width - margin);
    left = Math.max(margin, left);
    menu.style.top = top + 'px';
    menu.style.left = left + 'px';
    // menu.children includes the separator <div>s too, so indexing into it
    // directly (by a counter that only advances for real items) drifts by
@@ -399,6 +473,29 @@ window.Podman = (function () {
    // (Dashboard, by default — see Podman.page).
    const initial = document.querySelector('.podman-subnav button.active');
    activatePanel(initial ? initial.dataset.panel : 'dashboard');
    setInterval(autoRefreshTick, AUTO_REFRESH_INTERVAL_MS);
  }
  // Only panels that opt in via `autoRefresh: true` (Dashboard, Containers)
  // get polled — most panels (Settings, Compose, Terminal, ...) have
  // in-progress forms or connections an unexpected refresh would disrupt.
  // Paused while the tab is hidden (nothing to look at) and while any
  // modal is open (a full-panel re-render mid-edit would be jarring),
  // rather than fighting those cases with more state.
  const AUTO_REFRESH_INTERVAL_MS = 2000;
  function autoRefreshTick() {
    if (document.hidden) return;
    if (document.querySelector('.podman-modal-backdrop')) return;
    const activeBtn = document.querySelector('.podman-subnav button.active');
    if (!activeBtn) return;
    const name = activeBtn.dataset.panel;
    const module = panelModules[name];
    if (module && module.autoRefresh && initialized[name] && typeof module.refresh === 'function') {
      module.refresh();
    }
  }
  document.addEventListener('DOMContentLoaded', boot);
@@ -414,6 +511,7 @@ window.Podman = (function () {
    stateChipClass: stateChipClass,
    loadingRow: loadingRow,
    errorRow: errorRow,
    toast: toast,
    openFormModal: openFormModal,
    openLogModal: openLogModal,
    openContextMenu: openContextMenu,
@@ -85,11 +85,17 @@
    if (!selected) return;
    const btn = P.el('compose-action-' + action);
    btn.disabled = true;
    // `podman compose` output can run to many lines — a log modal (same
    // pattern as Settings' service Start/Stop/Restart) fits that; a toast
    // has to stay short and auto-dismiss.
    const modal = P.openLogModal('podman compose ' + action + ' — ' + selected);
    P.post('compose', action, { project: selected }).then(function (data) {
-      alert((data.output || 'Done.').slice(0, 2000));
+      (data.output || 'Done.').split('\n').forEach(function (line) { modal.log(line); });
      modal.done();
      return loadProjects();
    }).catch(function (err) {
-      alert('podman compose ' + action + ' failed: ' + err.message);
+      modal.log('Failed: ' + err.message);
      modal.done('Close');
    }).finally(function () {
      btn.disabled = false;
    });
@@ -100,9 +106,10 @@
    const btn = P.el('compose-action-save');
    btn.disabled = true;
    P.post('compose', 'save', { project: selected, yaml: P.el('compose-yaml').value }).then(function () {
      P.toast('Saved ' + selected + '.', 'success');
      return loadProjects();
    }).catch(function (err) {
-      alert('Save failed: ' + err.message);
+      P.toast('Save failed: ' + err.message, 'error');
    }).finally(function () {
      btn.disabled = false;
    });
@@ -113,11 +120,13 @@
    if (!confirm('Delete project "' + selected + '"? This stops it (if running) and permanently removes its compose.yaml.')) return;
    const btn = P.el('compose-action-delete');
    btn.disabled = true;
    const name = selected;
    P.post('compose', 'remove', { project: selected }).then(function () {
      selected = null;
      P.toast('Deleted ' + name + '.', 'success');
      return loadProjects();
    }).catch(function (err) {
-      alert('Delete failed: ' + err.message);
+      P.toast('Delete failed: ' + err.message, 'error');
      btn.disabled = false;
    });
  }
@@ -17,11 +17,156 @@
  // badge doesn't disappear on the next auto-refresh; only re-running
  // "Check for Updates" replaces it.
  let imageUpdateStatus = {};
  // Container folders — purely cosmetic grouping (podman itself has no
  // such concept), backed by ajax/folders.php. Collapse state is
  // intentionally in-memory only (not persisted): it's a per-visit UI
  // convenience, not data worth a config-file round trip.
  let folders = [];
  let collapsedFolders = {};
  function iconLabel(name) {
    return P.escapeHtml(name.slice(0, 2).toUpperCase());
  }
  // The fallback text goes into a data-* attribute (plain HTML-attribute
  // escaping) and is read back via .dataset in the error handler, rather
  // than being concatenated into the onerror string as JS source — that
  // second approach only stays safe as long as the text can never contain
  // a quote, which is true for container names today (letters/digits/
  // ./_/- only) but not for the free-text folder names below, so both
  // use this same safer pattern rather than having two different rules
  // depending on which kind of name is involved.
  function iconWithFallbackHtml(iconUrl, fallbackText) {
    const fallback = P.escapeHtml(fallbackText);
    if (!iconUrl) {
      return '<span class="ico">' + fallback + '</span>';
    }
    return '<span class="ico"><img src="' + P.escapeHtml(iconUrl) + '" alt="" loading="lazy" data-fallback="' + fallback + '" ' +
      'onerror="this.replaceWith(document.createTextNode(this.dataset.fallback))"></span>';
  }
  function containerIconHtml(c) {
    return iconWithFallbackHtml(c.icon, c.name.slice(0, 2).toUpperCase());
  }
  // --- Folders -----------------------------------------------------------
  function saveFolders() {
    return P.post('folders', 'save', { folders: folders }).then(function (data) {
      folders = data.folders;
    }).catch(function (err) {
      P.toast('Could not save folders: ' + err.message, 'error');
    });
  }
  function openNewFolderModal(containerNameToAssign) {
    P.openFormModal({
      title: 'New Folder',
      submitLabel: 'Create',
      fields: [
        { name: 'name', label: 'Folder name', required: true, placeholder: 'Media' },
        { name: 'icon', label: 'Icon URL (optional)', placeholder: 'https://...' },
      ],
      onSubmit: function (values) {
        folders.push({
          id: '',
          name: values.name,
          icon: values.icon || '',
          containers: containerNameToAssign ? [containerNameToAssign] : [],
        });
        return saveFolders().then(renderTable);
      },
    });
  }
  function openEditFolderModal(f) {
    P.openFormModal({
      title: 'Edit Folder',
      submitLabel: 'Save',
      fields: [
        { name: 'name', label: 'Folder name', required: true, placeholder: f.name },
        { name: 'icon', label: 'Icon URL (optional)', placeholder: f.icon || 'https://...' },
      ],
      onSubmit: function (values) {
        f.name = values.name;
        f.icon = values.icon || '';
        return saveFolders().then(renderTable);
      },
    });
  }
  function deleteFolder(f) {
    if (!confirm('Delete folder "' + f.name + '"? Its containers are not affected — they just become ungrouped.')) return;
    folders = folders.filter(function (x) { return x.id !== f.id; });
    saveFolders().then(renderTable);
  }
  function assignToFolder(containerName, folderId) {
    folders.forEach(function (f) {
      const idx = f.containers.indexOf(containerName);
      if (idx !== -1) f.containers.splice(idx, 1);
    });
    if (folderId) {
      const target = folders.find(function (f) { return f.id === folderId; });
      if (target) target.containers.push(containerName);
    }
    saveFolders().then(renderTable);
  }
  function openMoveToFolderMenu(c, anchorBtn) {
    const currentFolder = folders.find(function (f) { return f.containers.indexOf(c.name) !== -1; });
    const items = folders.map(function (f) {
      return {
        label: (f.id === (currentFolder && currentFolder.id) ? '✓ ' : '') + f.name,
        onClick: function () { assignToFolder(c.name, f.id); },
      };
    });
    if (items.length) items.push('separator');
    if (currentFolder) {
      items.push({ label: 'Remove from folder', onClick: function () { assignToFolder(c.name, null); } });
    }
    items.push({ label: '+ New folder…', onClick: function () { openNewFolderModal(c.name); } });
    P.openContextMenu(anchorBtn, items);
  }
  function openFolderMenu(f, anchorBtn) {
    P.openContextMenu(anchorBtn, [
      { label: 'Rename / Edit Icon', onClick: function () { openEditFolderModal(f); } },
      { label: 'Delete Folder', danger: true, onClick: function () { deleteFolder(f); } },
    ]);
  }
  // Matches Unraid's own Docker page folder rows: the header always
  // shows a compact icon+name+status chip per member — collapsed or
  // expanded — so folding a group away doesn't hide its state entirely.
  // Expand/collapse only controls whether the FULL per-container detail
  // rows also render underneath (see renderTable()).
  function folderMemberChipHtml(c) {
    return '<button type="button" class="podman-folder-member" data-action="menu" data-id="' + P.escapeHtml(c.id) + '">' +
      iconWithFallbackHtml(c.icon, c.name.slice(0, 2).toUpperCase()) +
      '<span class="name">' + P.escapeHtml(c.name) + '</span>' +
      '<span class="dot ' + (c.state === 'running' ? 'good' : 'bad') + '"></span>' +
      '<span class="state">' + P.escapeHtml(c.state) + '</span>' +
      '</button>';
  }
  function folderHeaderHtml(f, members) {
    const collapsed = !!collapsedFolders[f.id];
    const runningCount = members.filter(function (c) { return c.state === 'running'; }).length;
    return '<tr class="podman-folder-row" data-folder-id="' + P.escapeHtml(f.id) + '">' +
      '<td colspan="7">' +
      '<div class="podman-folder-head">' +
      '<button type="button" class="podman-folder-toggle" data-action="toggle-folder">' +
      '<span class="chevron">' + (collapsed ? '▸' : '▾') + '</span>' +
      iconWithFallbackHtml(f.icon, f.name.slice(0, 2).toUpperCase()) +
      '<span class="name">' + P.escapeHtml(f.name) + '</span>' +
      '<span class="count">' + runningCount + '/' + members.length + ' running</span>' +
      '</button>' +
      '<div class="podman-folder-members">' + members.map(folderMemberChipHtml).join('') + '</div>' +
      '<button type="button" class="podman-btn podman-btn-icon" data-action="folder-menu" title="Folder options">&#8942;</button>' +
      '</div></td></tr>';
  }
  function hasUpdate(c) {
    const status = imageUpdateStatus[c.image];
    return !!(status && status.updateAvailable);
@@ -34,12 +179,18 @@
    const updateBadge = hasUpdate(c)
      ? ' <span class="podman-badge-update" title="A newer image is available">&#8593; Update</span>'
      : '';
    // A plain <a>, not a data-action button — the tbody's click handler
    // only ever looks for button[data-action], so this just navigates
    // normally with no extra wiring.
    const webuiLink = c.webUrl
      ? ' <a class="podman-webui-link" href="' + P.escapeHtml(c.webUrl) + '" target="_blank" rel="noopener noreferrer" title="Open WebUI">URL</a>'
      : '';
    return '' +
      '<tr data-id="' + P.escapeHtml(c.id) + '">' +
      '<td><span class="podman-chip ' + P.stateChipClass(c.state) + '"><span class="d"></span>' + P.escapeHtml(c.health || c.state) + '</span></td>' +
-      '<td><button type="button" class="podman-row-name podman-row-name-btn" data-action="details">' +
+      '<td><div class="podman-name-cell"><button type="button" class="podman-row-name podman-row-name-btn" data-action="details">' +
-      '<span class="ico">' + iconLabel(c.name) + '</span>' + P.escapeHtml(c.name) + '</button>' + updateBadge + '</td>' +
+      containerIconHtml(c) + '<span class="text">' + P.escapeHtml(c.name) + '</span></button>' + webuiLink + updateBadge + '</div></td>' +
      '<td class="mono podman-row-sub">' + P.escapeHtml(c.image) + '</td>' +
      '<td>' + cpuMem + '</td>' +
      '<td class="mono podman-row-sub">' + P.escapeHtml(c.ports.join(', ') || '&mdash;') + '</td>' +
@@ -70,12 +221,24 @@
  function openRowMenu(c, anchorBtn) {
    const items = [];
    items.push({ label: 'Details', onClick: function () { openDetailModal(c); } });
    if (c.state === 'running') {
      items.push({ label: 'Pause', onClick: function () { handleAction(c.id, 'pause'); } });
      items.push({ label: 'Kill', danger: true, onClick: function () { handleAction(c.id, 'kill'); } });
    }
    items.push({ label: 'Rename', onClick: function () { openRenameModal(c); } });
    items.push({ label: 'Edit', onClick: function () { openEditContainerModal(c); } });
    // Once a container is already grouped, "Move to Folder" (which reads
    // as "add to a folder") is redundant and ambiguous — the one action
    // that actually makes sense from here is taking it back out. Moving
    // it to a *different* folder still works, just via ungrouping first;
    // that's a deliberately rarer path than "add" or "remove".
    const currentFolder = folders.find(function (f) { return f.containers.indexOf(c.name) !== -1; });
    if (currentFolder) {
      items.push({ label: 'Remove from Folder', onClick: function () { assignToFolder(c.name, null); } });
    } else {
      items.push({ label: 'Move to Folder', onClick: function () { openMoveToFolderMenu(c, anchorBtn); } });
    }
    items.push('separator');
    items.push({
      label: 'Remove',
@@ -173,6 +336,8 @@
      volumes: volumes,
      env: env,
      gpuDevices: gpuDevices,
      icon: c.icon || '',
      webUrl: c.webUrl || '',
    };
  }
@@ -180,7 +345,7 @@
    P.get('containers', 'inspect', { id: c.id }).then(function (d) {
      openCreateContainerModal(inspectToPrefill(c, d), { id: c.id });
    }).catch(function (err) {
-      alert('Could not load container config: ' + err.message);
+      P.toast('Could not load container config: ' + err.message, 'error');
    });
  }
@@ -226,6 +391,8 @@
            restartPolicy: prefill.restartPolicy,
            gpuDevices: prefill.gpuDevices,
            privileged: prefill.privileged,
            icon: prefill.icon,
            webuiUrl: prefill.webUrl,
            startAfterCreate: true,
          });
        }).then(function () {
@@ -298,6 +465,25 @@
        modal.log(failures.length
          ? (targets.length - failures.length) + ' updated, ' + failures.length + ' failed.'
          : 'All ' + targets.length + ' updated.');
        // The image(s) each updated container used before are now
        // superseded (recreate() points it at the freshly-pulled one) and
        // have zero containers referencing them — the same "unused"
        // definition images.js's own Prune button uses. Only worth doing
        // if at least one container actually updated; skipped entirely if
        // every update failed, since nothing changed to clean up.
        if (failures.length < targets.length) {
          modal.log('');
          modal.log('Removing old, now-unused images…');
          return P.post('images', 'prune').then(function (result) {
            modal.log(result.removedCount
              ? 'Removed ' + result.removedCount + ' old image(s), reclaimed ' + P.formatBytes(result.reclaimedBytes) + '.'
              : 'No unused images left to remove.');
          }).catch(function (err) {
            modal.log('Image cleanup failed: ' + err.message);
          });
        }
      }).then(function () {
        modal.done();
        btn.disabled = false;
        return load();
@@ -311,11 +497,15 @@
  // --- Detail view -----------------------------------------------------------
  //
-  // Fed entirely by the existing inspect action (raw libpod inspect JSON) —
+  // Most tabs are sliced straight from the one inspect payload already
-  // no new backend endpoint needed, just slicing that one payload into
+  // fetched when the modal opens (Config.Env, Config.Labels, Mounts,
-  // tabs. Field names below (Config.Env, Config.Labels, Mounts,
+  // NetworkSettings.Networks, HostConfig.RestartPolicy, State.Health.Log,
-  // NetworkSettings.Networks, HostConfig.RestartPolicy, ...) were checked
+  // ... all checked live against a real inspect response, not assumed
-  // live against a real inspect response, not assumed from docs.
+  // from docs). A few need more: Logs and Events fetch lazily when their
  // tab is first opened (a render() may return a Promise<string> instead
  // of a string — see showTab() below), and Console opens a real
  // ttyd/podman-exec session instead of just rendering (see
  // renderConsoleTab/wireConsoleTab).
  function kvTable(rows) {
    if (rows.length === 0) return '<div class="podman-detail-empty">None.</div>';
@@ -387,12 +577,165 @@
    return '<div class="podman-detail-json">' + P.escapeHtml(JSON.stringify(d, null, 2)) + '</div>';
  }
  // Live stats (cpuPercent/memUsageBytes/memLimitBytes) come from the row
  // data already fetched for the table (containers.php's list action) —
  // no extra request needed, and it's a one-shot snapshot either way
  // (this modal doesn't auto-refresh internally). Configured limits come
  // from the inspect payload's HostConfig; a 0 in any of these fields is
  // podman's own way of saying "unlimited", not a real zero.
  function renderResourcesTab(d, c) {
    const hostCfg = d.HostConfig || {};
    const rows = [];
    if (c.state === 'running') {
      rows.push(['CPU usage', c.cpuPercent != null ? c.cpuPercent.toFixed(1) + '%' : '—']);
      // memLimitBytes is podman's cgroup-reported limit, which is the
      // HOST's total memory when no real limit is configured (found
      // live: showed "110 MB / 38.6 GB" for a container with no memory
      // limit set, right above a "Memory limit: unlimited" row that
      // contradicted it) — only show a "/ limit" suffix when HostConfig
      // says a limit was actually configured.
      rows.push(['Memory usage', c.memUsageBytes != null
        ? P.formatBytes(c.memUsageBytes) + (hostCfg.Memory > 0 ? ' / ' + P.formatBytes(c.memLimitBytes) : '')
        : '—']);
    }
    const nanoCpus = hostCfg.NanoCpus || 0;
    const cpuQuota = hostCfg.CpuQuota || 0;
    const cpuPeriod = hostCfg.CpuPeriod || 0;
    rows.push(
      ['Memory limit', hostCfg.Memory > 0 ? P.formatBytes(hostCfg.Memory) : 'unlimited'],
      ['Swap limit', hostCfg.MemorySwap > 0 ? P.formatBytes(hostCfg.MemorySwap) : 'unlimited'],
      ['CPU limit', nanoCpus > 0 ? (nanoCpus / 1e9) + ' core(s)' : (cpuQuota > 0 && cpuPeriod > 0 ? (cpuQuota / cpuPeriod).toFixed(2) + ' core(s)' : 'unlimited')],
      ['CPU shares', hostCfg.CpuShares > 0 ? String(hostCfg.CpuShares) : 'default (1024)'],
      ['PIDs limit', hostCfg.PidsLimit > 0 ? String(hostCfg.PidsLimit) : 'unlimited'],
      ['Block I/O weight', hostCfg.BlkioWeight > 0 ? String(hostCfg.BlkioWeight) : 'default']
    );
    return kvTable(rows);
  }
  function renderLogsTab(d, c) {
    return P.get('containers', 'logs', { id: c.id, tail: 300 }).then(function (data) {
      const lines = (data.text || '').split('\n').filter(function (l) { return l.length > 0; });
      if (!lines.length) return '<div class="podman-detail-empty">No log output.</div>';
      return '<div class="podman-log-pane">' + lines.map(function (line) {
        const cls = /\berror\b/i.test(line) ? 'lvl-error' : (/\bwarn(ing)?\b/i.test(line) ? 'lvl-warn' : '');
        return '<div class="l' + (cls ? ' ' + cls : '') + '">' + P.escapeHtml(line) + '</div>';
      }).join('') + '</div>';
    });
  }
  // Bounded, one-shot history (last 7 days) via PodmanClient::containerEvents()
  // — NOT a live stream, see that method's own doc comment. Good enough for
  // "what happened to this container recently" without the persistent-
  // connection infrastructure a live feed would need.
  function renderEventsTab(d, c) {
    return P.get('containers', 'events', { id: c.id }).then(function (events) {
      if (!events.length) return '<div class="podman-detail-empty">No events in the last 7 days.</div>';
      const rows = events.slice().reverse();
      return '<table class="podman-detail-table">' +
        '<tr><td>Time</td><td>Event</td></tr>' +
        rows.map(function (e) {
          const when = new Date(e.time * 1000).toLocaleString();
          return '<tr><td class="mono" title="' + P.escapeHtml(when) + '">' + P.escapeHtml(P.formatRelativeTime(e.time)) + '</td>' +
            '<td>' + P.escapeHtml(e.Action || e.status || '') + '</td></tr>';
        }).join('') + '</table>';
    });
  }
  function renderHealthTab(d) {
    const health = (d.State && d.State.Health) || null;
    if (!health || !Array.isArray(health.Log) || !health.Log.length) {
      return '<div class="podman-detail-empty">No healthcheck configured for this container.</div>';
    }
    const rows = health.Log.slice().reverse();
    return '<table class="podman-detail-table">' +
      '<tr><td>Time</td><td>Result</td><td>Output</td></tr>' +
      rows.map(function (entry) {
        const ok = entry.ExitCode === 0;
        return '<tr><td class="mono">' + P.escapeHtml(entry.Start || '') + '</td>' +
          '<td><span class="podman-chip ' + (ok ? 'podman-chip-good' : 'podman-chip-bad') + '"><span class="d"></span>' +
          (ok ? 'ok' : 'exit ' + entry.ExitCode) + '</span></td>' +
          '<td class="mono">' + P.escapeHtml((entry.Output || '').trim().slice(0, 300)) + '</td></tr>';
      }).join('') + '</table>';
  }
  // Console is the one tab that isn't a static render — it opens a real
  // ttyd/podman-exec session (same mechanism as the standalone Terminal
  // panel, see terminal.js's own header comment for why this can't be a
  // true persistent PTY over plain HTTP). Returns a cleanup function the
  // modal calls when leaving this tab or closing altogether, so a session
  // opened just to peek at a container's console doesn't leak an orphaned
  // ttyd process the way a stale one did before terminal.js's own fix
  // earlier this project (see openLiveTerminal()'s closeCurrent()).
  function renderConsoleTab(d, c) {
    if (c.state !== 'running') {
      return '<div class="podman-detail-empty">Container must be running to open a console.</div>';
    }
    return '' +
      '<div class="podman-term-launcher">' +
      '<label>Shell <select class="podman-term-select" id="detail-term-shell"><option value="bash" selected>bash</option><option value="sh">sh</option></select></label>' +
      '<button type="button" class="podman-btn podman-btn-primary" id="detail-term-open-btn">&#9654; Open Console</button>' +
      '<button type="button" class="podman-btn podman-btn-ghost podman-btn-danger" id="detail-term-disconnect-btn" disabled>&#9632; Disconnect</button>' +
      '</div>' +
      '<div id="detail-term-frame-wrap"><p class="podman-empty-note">Pick a shell and click "Open Console".</p></div>';
  }
  function wireConsoleTab(body, d, c) {
    const openBtn = body.querySelector('#detail-term-open-btn');
    if (!openBtn) {
      return null;
    }
    const disconnectBtn = body.querySelector('#detail-term-disconnect-btn');
    let sessionOpen = false;
    function closeSession() {
      if (!sessionOpen) return Promise.resolve();
      sessionOpen = false;
      return P.post('exec', 'close', { name: c.name }).catch(function () {});
    }
    openBtn.addEventListener('click', function () {
      const shell = body.querySelector('#detail-term-shell').value;
      const wrap = body.querySelector('#detail-term-frame-wrap');
      wrap.innerHTML = '<p class="podman-empty-note">Opening console…</p>';
      openBtn.disabled = true;
      closeSession().then(function () {
        return P.post('exec', 'open', { name: c.name, shell: shell });
      }).then(function (data) {
        sessionOpen = true;
        disconnectBtn.disabled = false;
        // Same brief delay openLiveTerminal() uses — ttyd needs a moment
        // to bind its socket before nginx can proxy to it.
        setTimeout(function () {
          wrap.innerHTML = '<iframe class="podman-term-frame" src="/logterminal/' + encodeURIComponent(data.sockName) + '/"></iframe>';
        }, 200);
      }).catch(function (err) {
        wrap.innerHTML = '<p class="podman-empty-note">Could not open console: ' + P.escapeHtml(err.message) + '</p>';
      }).finally(function () {
        openBtn.disabled = false;
      });
    });
    disconnectBtn.addEventListener('click', function () {
      disconnectBtn.disabled = true;
      closeSession().finally(function () {
        body.querySelector('#detail-term-frame-wrap').innerHTML = '<p class="podman-empty-note">Disconnected.</p>';
      });
    });
    return closeSession;
  }
  const DETAIL_TABS = [
    { id: 'overview', label: 'Overview', render: renderOverviewTab },
    { id: 'resources', label: 'Resources', render: renderResourcesTab },
    { id: 'logs', label: 'Logs', render: renderLogsTab },
    { id: 'console', label: 'Console', render: renderConsoleTab, wire: wireConsoleTab },
    { id: 'networks', label: 'Networks', render: renderNetworksTab },
    { id: 'mounts', label: 'Mounts', render: renderMountsTab },
    { id: 'env', label: 'Environment', render: renderEnvTab },
    { id: 'labels', label: 'Labels', render: renderLabelsTab },
-    { id: 'mounts', label: 'Mounts', render: renderMountsTab },
+    { id: 'events', label: 'Events', render: renderEventsTab },
-    { id: 'networks', label: 'Networks', render: renderNetworksTab },
+    { id: 'health', label: 'Healthcheck', render: renderHealthTab },
    { id: 'inspect', label: 'Inspect (JSON)', render: renderInspectTab },
  ];
@@ -410,17 +753,46 @@
      '</div>';
    (document.querySelector('.podman-plugin') || document.body).appendChild(backdrop);
-    backdrop.querySelector('[data-role="cancel"]').addEventListener('click', function () { backdrop.remove(); });
+
-    backdrop.addEventListener('click', function (e) { if (e.target === backdrop) backdrop.remove(); });
+    // Any tab can leave behind something that needs cleanup on the way
    // out (currently only Console's ttyd session) — tracked here so
    // every way of leaving the modal (switching tabs, Close button,
    // backdrop click, Escape) goes through the same cleanup path.
    let activeCleanup = null;
    function closeModal() {
      const cleanup = activeCleanup;
      activeCleanup = null;
      Promise.resolve(cleanup ? cleanup() : null).finally(function () { backdrop.remove(); });
    }
    backdrop.querySelector('[data-role="cancel"]').addEventListener('click', closeModal);
    backdrop.addEventListener('click', function (e) { if (e.target === backdrop) closeModal(); });
    document.addEventListener('keydown', function onKey(e) {
-      if (e.key === 'Escape') { backdrop.remove(); document.removeEventListener('keydown', onKey); }
+      if (e.key === 'Escape') { closeModal(); document.removeEventListener('keydown', onKey); }
    });
    const body = backdrop.querySelector('.podman-detail-body');
    P.get('containers', 'inspect', { id: c.id }).then(function (data) {
      function showTab(tabId) {
        if (activeCleanup) {
          const cleanup = activeCleanup;
          activeCleanup = null;
          cleanup();
        }
        const tab = DETAIL_TABS.find(function (t) { return t.id === tabId; });
-        body.innerHTML = tab.render(data);
+        const result = tab.render(data, c);
        if (result && typeof result.then === 'function') {
          body.innerHTML = '<div class="podman-loading">Loading…</div>';
          result.then(function (html) {
            body.innerHTML = html;
            if (tab.wire) activeCleanup = tab.wire(body, data, c) || null;
          }).catch(function (err) {
            body.innerHTML = '<div class="podman-error">' + P.escapeHtml(err.message) + '</div>';
          });
        } else {
          body.innerHTML = result;
          if (tab.wire) activeCleanup = tab.wire(body, data, c) || null;
        }
      }
      backdrop.querySelectorAll('[data-tab]').forEach(function (btn) {
        btn.addEventListener('click', function () {
@@ -447,9 +819,40 @@
  function renderTable() {
    const tbody = P.el('containers-tbody');
    const visible = applyFilters();
-    tbody.innerHTML = visible.length
+    if (!visible.length) {
-      ? visible.map(rowHtml).join('')
+      tbody.innerHTML = '<tr><td colspan="7" class="podman-empty-note">No containers match.</td></tr>';
-      : '<tr><td colspan="7" class="podman-empty-note">No containers match.</td></tr>';
+      return;
    }
    // No folders defined at all: render the flat list exactly as before —
    // nobody using this feature for the first time sees any change.
    if (!folders.length) {
      tbody.innerHTML = visible.map(rowHtml).join('');
      return;
    }
    const visibleByName = {};
    visible.forEach(function (c) { visibleByName[c.name] = c; });
    const assigned = {};
    let html = '';
    folders.forEach(function (f) {
      const members = f.containers.map(function (name) { return visibleByName[name]; }).filter(Boolean);
      // Hide a folder only when the current filter/search hid every one of
      // its actual members — a genuinely empty folder (nothing assigned
      // yet, right after creating it) still needs to show up so there's
      // somewhere to drag/assign a container into.
      if (!members.length && f.containers.length > 0) return;
      members.forEach(function (c) { assigned[c.name] = true; });
      html += folderHeaderHtml(f, members);
      if (!collapsedFolders[f.id]) {
        html += members.map(rowHtml).join('');
      }
    });
    const ungrouped = visible.filter(function (c) { return !assigned[c.name]; });
    html += ungrouped.map(rowHtml).join('');
    tbody.innerHTML = html || '<tr><td colspan="7" class="podman-empty-note">No containers match.</td></tr>';
  }
  function renderCounts() {
@@ -461,7 +864,13 @@
  function load() {
    const tbody = P.el('containers-tbody');
-    tbody.innerHTML = P.loadingRow(7);
+    // Only show the loading placeholder on the very first load — once
    // rows are already on screen, auto-refresh (every ~2s) and manual
    // Refresh clicks should swap data in place, not flash back to a
    // spinner and lose the user's place every cycle.
    if (!allContainers.length) {
      tbody.innerHTML = P.loadingRow(7);
    }
    return P.get('containers', 'list').then(function (data) {
      allContainers = data;
      renderCounts();
@@ -560,6 +969,12 @@
      '<div class="podman-modal-field"><label>Name (optional)</label>' +
      '<input type="text" id="cc-name" placeholder="my-container">' +
      '<div class="hint">Letters, digits, ".", "_", "-" only — no spaces.</div></div>' +
      '<div class="podman-modal-field"><label>Icon URL (optional)</label>' +
      '<input type="text" id="cc-icon" placeholder="https://...">' +
      '<div class="hint">Shown in the Containers table and Folders. Filled in automatically from a template.</div></div>' +
      '<div class="podman-modal-field"><label>WebUI URL (optional)</label>' +
      '<input type="text" id="cc-weburl" placeholder="http://10.1.1.1:8080/">' +
      '<div class="hint">Adds a small open-in-new-tab button next to the name in the Containers table.</div></div>' +
      '<div class="podman-modal-field"><label>Network</label>' +
      '<select id="cc-network"><option value="bridge">Bridge (default)</option>' +
      '<option value="host">Host</option><option value="none">None</option></select></div>' +
@@ -606,6 +1021,8 @@
    if (prefill.image) backdrop.querySelector('#cc-image').value = prefill.image;
    if (prefill.name) backdrop.querySelector('#cc-name').value = prefill.name;
    if (prefill.icon) backdrop.querySelector('#cc-icon').value = prefill.icon;
    if (prefill.webUrl) backdrop.querySelector('#cc-weburl').value = prefill.webUrl;
    if (prefill.networkMode) backdrop.querySelector('#cc-network').value = prefill.networkMode;
    if (prefill.restartPolicy) backdrop.querySelector('#cc-restart').value = prefill.restartPolicy;
    if (prefill.privileged) backdrop.querySelector('#cc-privileged').checked = true;
@@ -797,6 +1214,8 @@
          restartPolicy: backdrop.querySelector('#cc-restart').value,
          gpuDevices: gpuDevices,
          privileged: privileged,
          icon: backdrop.querySelector('#cc-icon').value.trim(),
          webuiUrl: backdrop.querySelector('#cc-weburl').value.trim(),
          startAfterCreate: backdrop.querySelector('#cc-start').checked,
        });
      }).then(function () {
@@ -815,7 +1234,7 @@
          category: backdrop.querySelector('#cc-template-category').value.trim(),
          overview: backdrop.querySelector('#cc-template-overview').value.trim(),
        }).catch(function (err) {
-          alert('Container created, but saving the template failed: ' + err.message);
+          P.toast('Container created, but saving the template failed: ' + err.message, 'warn');
        });
      }).then(function () {
        close();
@@ -839,7 +1258,7 @@
    const doIt = function (extra) {
      if (btn) btn.disabled = true;
      return P.post('containers', action, Object.assign({ id: id }, extra)).then(load).catch(function (err) {
-        alert('Action failed: ' + err.message);
+        P.toast('Action failed: ' + err.message, 'error');
        if (btn) btn.disabled = false;
      });
    };
@@ -875,7 +1294,24 @@
      const btn = e.target.closest('button[data-action]');
      if (!btn || btn.disabled) return;
      const row = btn.closest('tr');
-      const id = row.dataset.id;
+
      if (btn.dataset.action === 'toggle-folder' || btn.dataset.action === 'folder-menu') {
        const folderId = row.dataset.folderId;
        const f = folders.find(function (x) { return x.id === folderId; });
        if (!f) return;
        if (btn.dataset.action === 'toggle-folder') {
          collapsedFolders[folderId] = !collapsedFolders[folderId];
          renderTable();
        } else {
          openFolderMenu(f, btn);
        }
        return;
      }
      // A folder-header's member chips (see folderMemberChipHtml()) carry
      // their own data-id directly on the <button>, since the row they
      // sit in is the folder header (data-folder-id), not that container.
      const id = btn.dataset.id || row.dataset.id;
      if (btn.dataset.action === 'menu' || btn.dataset.action === 'details' || btn.dataset.action === 'update') {
        const c = allContainers.find(function (x) { return x.id === id; });
        if (!c) return;
@@ -903,6 +1339,15 @@
    P.el('containers-check-updates-btn').addEventListener('click', checkForUpdates);
    P.el('containers-update-all-btn').addEventListener('click', updateAll);
    P.el('containers-new-folder-btn').addEventListener('click', function () { openNewFolderModal(null); });
    // Fetched once here, not inside load() — folders change rarely
    // compared to container state, so there's no reason for every ~2s
    // auto-refresh tick to re-fetch and re-render them too.
    P.get('folders', 'list').then(function (data) {
      folders = data.folders || [];
      renderTable();
    }).catch(function () { /* folders just stay empty — not fatal to the panel */ });
    return load();
  }
@@ -912,5 +1357,5 @@
  // (see Podman.page's script list), so this is already set by then.
  P.openCreateContainerModal = openCreateContainerModal;
-  P.registerPanel('containers', { init: init, refresh: load });
+  P.registerPanel('containers', { init: init, refresh: load, autoRefresh: true });
 })();
@@ -1,15 +1,18 @@
 /**
 * javascript/dashboard.js
 *
- * Dashboard panel: summary stat tiles fed by ajax/system.php?action=summary.
+ * Dashboard panel: plain-count stat tiles (Running/Stopped/Pods/Images/
- * The Activity list and the CPU/Memory sparkline in the mockup were
+ * Volumes/Networks) plus a single "Resource Usage" card (CPU/Memory/Swap/
- * illustrative sample data with no backing API (libpod has no "recent
+ * Storage as meter rows) — kept as two visually distinct groups rather
- * events for a container fleet" convenience endpoint beyond raw
+ * than forcing bar-and-percentage metrics into the same tile shape as
- * /events streaming, which is a separate follow-up — see the note
+ * simple counts, which is what produced the awkward spanning-tile/dead-
- * rendered in place of it below) — rather than fake data pretending to be
+ * grid-cell layout this replaced. Both fed by ajax/system.php?action=
- * live, this real implementation shows what's genuinely available now
+ * summary, plus the Autostart Queue table fed by action=autostart_queue.
- * (the summary counts) and a clear placeholder for what needs the events
+ * A live scrolling event feed is deliberately out of scope here — libpod
- * stream, so nobody mistakes a mock for a working feature.
+ * has no "recent events for a container fleet" convenience endpoint, only
 * raw /events streaming, which is a separate feature (its own connection
 * lifecycle, not a snapshot this summary call can produce) rather than
 * something to fake with sample data.
 */
 (function () {
  'use strict';
@@ -26,12 +29,16 @@
    }
    P.el('stat-running').textContent = summary.containers.running;
    P.el('stat-running').className = summary.containers.running > 0 ? 'tone-good' : '';
    P.el('stat-running-total').textContent = '/ ' + summary.containers.total;
    P.el('stat-stopped').textContent = summary.containers.stopped;
    P.el('stat-stopped').classList.toggle('tone-bad', summary.containers.stopped > 0);
    P.el('stat-pods').textContent = summary.pods;
    P.el('stat-images').textContent = summary.images;
    P.el('stat-volumes').textContent = summary.volumes;
    P.el('stat-networks').textContent = summary.networks;
-    P.el('stat-images-size').textContent = summary.storage.imagesSizeFormatted;
+
    renderResourceUsage(summary.host, summary.storage);
    const meta = P.el('podman-header-meta');
    if (meta) {
@@ -42,11 +49,96 @@
    }
  }
  // Bars stay accent-colored under normal load and only shift to warn/bad
  // once usage is high enough to actually be worth noticing at a glance —
  // a bar that's always the same color regardless of value doesn't tell
  // you anything a number alone didn't.
  function barSeverityClass(percent) {
    if (percent === null || percent === undefined) {
      return '';
    }
    if (percent >= 90) {
      return 'bad';
    }
    if (percent >= 75) {
      return 'warn';
    }
    return '';
  }
  function resourceRow(label, valueText, percent) {
    const pct = percent === null || percent === undefined ? 0 : percent;
    return (
      '<div class="podman-resource-row">' +
      '<span class="k">' + P.escapeHtml(label) + '</span>' +
      '<div class="podman-usage-mini" style="flex:1;">' +
      '<div class="track"><span class="' + barSeverityClass(percent) + '" style="width:' + pct + '%"></span></div>' +
      '<span class="num">' + pct + '%</span>' +
      '</div>' +
      '<span class="v">' + P.escapeHtml(valueText) + '</span>' +
      '</div>'
    );
  }
  function renderResourceUsage(host, storage) {
    if (!host || !storage) {
      return;
    }
    let html = resourceRow('CPU (' + host.cpuCount + ')', '', host.cpuPercent) +
      resourceRow('Memory', P.formatBytes(host.memUsedBytes) + ' / ' + P.formatBytes(host.memTotalBytes), host.memPercent);
    if (host.swapTotalBytes > 0) {
      html += resourceRow('Swap', P.formatBytes(host.swapUsedBytes) + ' / ' + P.formatBytes(host.swapTotalBytes),
        Math.round(host.swapUsedBytes / host.swapTotalBytes * 100));
    }
    html += resourceRow('Storage',
      storage.graphUsedFormatted + (storage.graphAllocatedBytes ? ' / ' + storage.graphAllocatedFormatted : '') +
      ' (' + storage.imagesSizeFormatted + ' images)',
      storage.graphUsedPercent);
    if (host.uptime) {
      html += '<div class="hint" style="margin-top:10px;">Uptime: ' + P.escapeHtml(host.uptime) + '</div>';
    }
    P.el('dashboard-resource-rows').innerHTML = html;
  }
  const STATUS_CHIP_CLASS = {
    started: 'podman-chip-good',
    stopped: 'podman-chip-neutral',
    failed: 'podman-chip-bad',
    'safe-mode': 'podman-chip-warn',
    unknown: 'podman-chip-neutral',
  };
  function renderAutostartQueue(data) {
    const tbody = P.el('dashboard-autostart-tbody');
    if (!tbody) {
      return;
    }
    const entries = data.entries || [];
    if (!entries.length) {
      tbody.innerHTML = '<tr><td colspan="4" class="podman-empty-note">No containers configured for autostart.</td></tr>';
      return;
    }
    tbody.innerHTML = entries.map(function (e) {
      const chipClass = STATUS_CHIP_CLASS[e.status] || 'podman-chip-neutral';
      return '<tr>' +
        '<td class="tnum">' + e.position + '</td>' +
        '<td>' + P.escapeHtml(e.name) + '</td>' +
        '<td class="tnum">' + (e.delaySeconds > 0 ? e.delaySeconds + 's' : '—') + '</td>' +
        '<td><span class="podman-chip ' + chipClass + '"><span class="d"></span>' + P.escapeHtml(e.statusLabel) + '</span></td>' +
        '</tr>';
    }).join('');
  }
  function load() {
-    return P.get('system', 'summary').then(render).catch(function (err) {
+    return P.get('system', 'summary').then(function (summary) {
      render(summary);
      if (summary.reachable) {
        return P.get('system', 'autostart_queue').then(renderAutostartQueue);
      }
    }).catch(function (err) {
      P.el('podman-panel-dashboard').innerHTML = '<div class="podman-card"><div class="podman-error">' + P.escapeHtml(err.message) + '</div></div>';
    });
  }
-  P.registerPanel('dashboard', { init: load, refresh: load });
+  P.registerPanel('dashboard', { init: load, refresh: load, autoRefresh: true });
 })();
@@ -68,7 +68,7 @@
      // removes every image on the host.
      const unused = images.filter(function (img) { return img.usedBy === 0; });
      if (!unused.length) {
-        alert('No unused images to remove — every image is referenced by at least one container.');
+        P.toast('No unused images to remove — every image is referenced by at least one container.', 'info');
        return;
      }
      const totalBytes = unused.reduce(function (sum, img) { return sum + img.sizeBytes; }, 0);
@@ -81,11 +81,11 @@
      btn.disabled = true;
      P.post('images', 'prune').then(function (result) {
        btn.disabled = false;
-        alert('Removed ' + result.removedCount + ' image(s), reclaimed ' + P.formatBytes(result.reclaimedBytes) + '.');
+        P.toast('Removed ' + result.removedCount + ' image(s), reclaimed ' + P.formatBytes(result.reclaimedBytes) + '.', 'success');
        return load();
      }).catch(function (err) {
        btn.disabled = false;
-        alert('Prune failed: ' + err.message);
+        P.toast('Prune failed: ' + err.message, 'error');
      });
    });
@@ -113,7 +113,7 @@
        if (!confirm('Remove this image?')) return;
        btn.disabled = true;
        P.post('images', 'remove', { id: id }).then(load).catch(function (err) {
-          alert('Remove failed: ' + err.message);
+          P.toast('Remove failed: ' + err.message, 'error');
          btn.disabled = false;
        });
      }
@@ -164,7 +164,7 @@
      if (!confirm('Remove network "' + name + '"?')) return;
      btn.disabled = true;
      P.post('networks', 'remove', { name: name }).then(load).catch(function (err) {
-        alert('Remove failed: ' + err.message);
+        P.toast('Remove failed: ' + err.message, 'error');
        btn.disabled = false;
      });
    });
@@ -168,7 +168,7 @@
  function handleAction(name, action, extra) {
    return P.post('pods', action, Object.assign({ name: name }, extra)).then(load).catch(function (err) {
-      alert('Action failed: ' + err.message);
+      P.toast('Action failed: ' + err.message, 'error');
    });
  }
@@ -9,6 +9,7 @@
  'use strict';
  const P = window.Podman;
  let autostartNames = [];
  let allContainerNames = [];
  function renderAutostart() {
    const tbody = P.el('autostart-tbody');
@@ -24,11 +25,24 @@
          '</div></td></tr>';
      }).join('')
      : '<tr><td colspan="3" class="podman-empty-note">No containers in the autostart chain.</td></tr>';
    renderAddOptions();
  }
  // Repopulated after every add/remove so it only ever offers containers
  // that exist and aren't already in the chain — avoids duplicate entries
  // and offering a container name that no longer exists.
  function renderAddOptions() {
    const select = P.el('autostart-add-select');
    const available = allContainerNames.filter(function (name) { return autostartNames.indexOf(name) === -1; });
    select.innerHTML = available.length
      ? available.map(function (name) { return '<option value="' + P.escapeHtml(name) + '">' + P.escapeHtml(name) + '</option>'; }).join('')
      : '<option value="">All containers already added</option>';
    P.el('autostart-add-btn').disabled = !available.length;
  }
  function saveAutostart() {
    return P.post('settings', 'autostart_save', { names: autostartNames }).catch(function (err) {
-      alert('Could not save autostart order: ' + err.message);
+      P.toast('Could not save autostart order: ' + err.message, 'error');
    });
  }
@@ -52,8 +66,19 @@
  }
  function load() {
-    return P.get('settings', 'get').then(fillForm).catch(function (err) {
+    return Promise.all([
-      alert('Could not load settings: ' + err.message);
+      P.get('settings', 'get').then(fillForm),
      // Needed for the "Add container" dropdown — a separate, tolerant
      // fetch so a containers.php hiccup doesn't also break the rest of
      // Settings (autostart reorder/remove don't need this list at all).
      P.get('containers', 'list').then(function (containers) {
        allContainerNames = containers.map(function (c) { return c.name; }).sort();
        renderAddOptions();
      }).catch(function () {
        allContainerNames = [];
      }),
    ]).catch(function (err) {
      P.toast('Could not load settings: ' + err.message, 'error');
    });
  }
@@ -170,11 +195,11 @@
      P.post('disks', 'format', { device: select.value }).then(function (data) {
        close();
        P.el('settings-storage-path').value = data.mountPath;
-        alert('Formatted and mounted at ' + data.mountPath + '. Storage path has been filled in below — click "Save Settings" to use it, then Restart Podman.');
+        P.toast('Formatted and mounted at ' + data.mountPath + '. Click "Save Settings" below, then Restart Podman.', 'warn');
      }).catch(function (err) {
        submitBtn.disabled = false;
        submitBtn.textContent = 'Format Disk';
-        alert('Format failed: ' + err.message);
+        P.toast('Format failed: ' + err.message, 'error');
      });
    });
@@ -190,15 +215,24 @@
      stopTimeoutSeconds: parseInt(P.el('settings-stop-timeout').value, 10) || 10,
    };
    return P.post('settings', 'save', body).then(function () {
-      alert('Saved. Restart podman (rc.podman restart) to apply storage/enabled changes.');
+      P.toast('Saved. Restart podman (rc.podman restart) to apply storage/enabled changes.', 'warn');
    }).catch(function (err) {
-      alert('Save failed: ' + err.message);
+      P.toast('Save failed: ' + err.message, 'error');
    });
  }
  function init() {
    P.el('settings-save-btn').addEventListener('click', save);
    P.el('autostart-add-btn').addEventListener('click', function () {
      const select = P.el('autostart-add-select');
      const name = select.value;
      if (!name) return;
      autostartNames.push(name);
      renderAutostart();
      saveAutostart();
    });
    P.el('autostart-tbody').addEventListener('click', function (e) {
      const btn = e.target.closest('button[data-action]');
      if (!btn) return;
@@ -79,7 +79,7 @@
        P.openCreateContainerModal(config);
      }).catch(function (err) {
        btn.disabled = false;
-        alert('Could not load template: ' + err.message);
+        P.toast('Could not load template: ' + err.message, 'error');
      });
      return;
    }
@@ -97,7 +97,7 @@
        URL.revokeObjectURL(url);
      }).catch(function (err) {
        btn.disabled = false;
-        alert('Export failed: ' + err.message);
+        P.toast('Export failed: ' + err.message, 'error');
      });
      return;
    }
@@ -107,7 +107,7 @@
      btn.disabled = true;
      P.post('templates', 'remove', { name: name }).then(load).catch(function (err) {
        btn.disabled = false;
-        alert('Delete failed: ' + err.message);
+        P.toast('Delete failed: ' + err.message, 'error');
      });
    }
  }
@@ -73,7 +73,7 @@
      if (!confirm('Remove volume "' + name + '"? This deletes its data.')) return;
      btn.disabled = true;
      P.post('volumes', 'remove', { name: name }).then(load).catch(function (err) {
-        alert('Remove failed: ' + err.message);
+        P.toast('Remove failed: ' + err.message, 'error');
        btn.disabled = false;
      });
    });
@@ -186,12 +186,25 @@
@media (max-width: 1080px) { .podman-stat-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 620px) { .podman-stat-grid { grid-template-columns: repeat(2, 1fr); } }
-.podman-stat { background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: 14px 16px; box-shadow: var(--shadow); }
+.podman-stat {
  background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: 14px 16px;
  box-shadow: var(--shadow); transition: transform .12s ease, box-shadow .12s ease;
 }
 .podman-stat:hover { transform: translateY(-1px); box-shadow: 0 2px 4px rgba(20, 22, 26, .08), 0 8px 20px rgba(20, 22, 26, .08); }
 .podman-stat .label { font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--text-faint); font-weight: 700; }
 .podman-stat .value { font-size: 24px; font-weight: 700; margin-top: 6px; }
 .podman-stat .value small { font-size: 13px; color: var(--text-dim); font-weight: 600; }
-.podman-stat .bar { height: 5px; border-radius: 3px; background: var(--surface-3); margin-top: 10px; overflow: hidden; }
+.podman-stat .tone-good { color: var(--good); }
-.podman-stat .bar > span { display: block; height: 100%; background: var(--accent); border-radius: 3px; }
+.podman-stat .tone-warn { color: var(--warn); }
 .podman-stat .tone-bad { color: var(--bad); }
 .podman-usage-mini .track > span.warn { background: var(--warn); }
 .podman-usage-mini .track > span.bad { background: var(--bad); }
 .podman-resource-rows { margin-top: 8px; }
 .podman-resource-row { display: flex; align-items: center; gap: 12px; padding: 7px 0; }
 .podman-resource-row + .podman-resource-row { border-top: 1px solid var(--border); }
 .podman-resource-row .k { font-size: 12.5px; color: var(--text-dim); font-weight: 600; min-width: 84px; flex: none; }
 .podman-resource-row .v { font-size: 12.5px; color: var(--text-faint); font-weight: 600; white-space: nowrap; flex: none; font-variant-numeric: tabular-nums; }
 .podman-chip {
  display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: 100px;
@@ -212,7 +225,46 @@
 .podman-plugin tbody tr:last-child td { border-bottom: none; }
 .podman-plugin tbody tr:hover { background: var(--surface-2); }
 .podman-table-wrap { overflow-x: auto; }
-.podman-row-name { display: flex; align-items: center; gap: 10px; font-weight: 600; }
+/*
 * table-layout: auto (the default) sizes every column from the widest
 * content across only the CURRENTLY VISIBLE rows — so expanding/
 * collapsing a folder (which adds/removes rows) changed what counted as
 * "widest" and shifted every column, including the header text, on
 * every toggle (found live). Fixed widths (set on the <th>s in
 * Podman.page) make column sizing depend only on those, never on row
 * content, so toggling a folder can no longer move anything.
 */
 #containers-table { table-layout: fixed; }
 /* Only the plain-text columns truncate with an ellipsis (Image/Ports —
   both are just escaped text directly in the <td>, so ellipsis renders
   correctly) — NOT the Name column (its text sits inside a flex
   button+icon, where overflow:hidden would hard-clip instead of
   ellipsis-truncate), the folder-header row's colspan cell (its member
   chips need to wrap, see .podman-folder-members), or the actions
   column (icon buttons, not text, would otherwise get clipped if they
   ever didn't quite fit). */
 #containers-table tbody > tr:not(.podman-folder-row) > td:nth-child(3),
 #containers-table tbody > tr:not(.podman-folder-row) > td:nth-child(5) {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
 }
 /* .podman-name-cell is a <div> INSIDE the <td>, not the <td> itself —
   display:flex directly on a table cell pulls it out of table-cell
   layout entirely, so with table-layout:fixed it stops respecting the
   column width the <th> assigns and throws off alignment with every
   other column (found live: the whole Name column visibly drifted).
   The div gives the same flex row (so a WebUI link, see
   .podman-webui-link, sits on the same line as the name button instead
   of wrapping below it — .podman-row-name-btn's own display:flex makes
   IT block-level by default, which would otherwise push everything
   after it in the cell onto its own line) without that side effect.
   min-width:0 lets the button actually shrink instead of forcing the
   cell wider than its fixed column width; .text (not the plain text
   node it used to be) is what actually ellipsis-truncates, since
   text-overflow only applies to the element whose own inline content
   overflows, not a nested flex child's. */
 .podman-name-cell { display: flex; align-items: center; gap: 6px; }
 .podman-row-name { display: flex; align-items: center; gap: 10px; font-weight: 600; min-width: 0; }
 .podman-row-name .text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
 .podman-row-name-btn {
  /* !important for the same reason as .podman-btn-ghost/-primary — Unraid's
     own site-wide button theme otherwise still shows its default border
@@ -220,14 +272,16 @@
     click away from every table row still looked like a bordered button
     forever, not a plain label. */
  appearance: none; border: none !important; background: none !important; padding: 0; cursor: pointer;
-  color: var(--text); font-family: var(--font-ui); font-size: 13px; text-align: left;
+  color: var(--text); font-family: var(--font-ui); font-size: 13px; text-align: left; min-width: 0;
 }
 .podman-row-name-btn:hover { color: var(--accent-strong); }
 .podman-row-name-btn:hover .ico { border-color: var(--accent); }
 .podman-row-name .ico {
  width: 26px; height: 26px; border-radius: 6px; flex: none; background: var(--surface-3);
  display: grid; place-items: center; font-size: 12px; border: 1px solid var(--border); color: var(--text-dim);
  overflow: hidden;
 }
 .podman-row-name .ico img { width: 100%; height: 100%; object-fit: cover; }
 .podman-row-sub { font-size: 11.5px; color: var(--text-faint); font-weight: 500; margin-top: 1px; }
 /*
 * The actions <td> itself stays a plain table-cell (default display) so
@@ -265,7 +319,7 @@
 .podman-usage-mini { display: flex; align-items: center; gap: 8px; min-width: 110px; }
 .podman-usage-mini .track { flex: 1; height: 5px; border-radius: 3px; background: var(--surface-3); overflow: hidden; }
 .podman-usage-mini .track > span { display: block; height: 100%; background: var(--accent); }
-.podman-usage-mini .num { font-size: 11.5px; color: var(--text-dim); width: 34px; text-align: right; }
+.podman-usage-mini .num { font-size: 11.5px; color: var(--text-dim); width: 34px; text-align: right; font-variant-numeric: tabular-nums; }
 .podman-toolbar { display: flex; align-items: center; gap: 10px; padding: 14px 18px; border-bottom: 1px solid var(--border); flex-wrap: wrap; }
 /*
@@ -459,6 +513,14 @@
 .podman-badge-update { font-size: 10px; font-weight: 700; color: var(--accent-strong); background: color-mix(in srgb, var(--accent) 16%, transparent); padding: 2px 7px; border-radius: 100px; margin-left: 8px; }
 .podman-webui-link {
  display: inline-flex; align-items: center; justify-content: center; height: 20px; padding: 0 7px;
  border-radius: 5px; color: var(--text-faint); text-decoration: none; font-size: 10px; font-weight: 700;
  letter-spacing: .03em; flex: none; border: 1px solid var(--border); background: var(--surface-3);
  vertical-align: middle;
 }
 .podman-webui-link:hover { color: var(--accent-strong); border-color: var(--accent); }
 .podman-loading, .podman-error { padding: 32px 18px; text-align: center; color: var(--text-faint); font-size: 13px; }
 /**
@@ -581,3 +643,84 @@
  padding: 14px 16px; border-radius: 8px; white-space: pre-wrap; word-break: break-all; line-height: 1.6;
 }
 .podman-detail-empty { color: var(--text-faint); font-size: 12.5px; padding: 8px 0; }
 /*
 * Toast notifications — replaces alert() for one-way feedback (saved,
 * removed, failed, ...) across every panel. Confirmations stay native
 * confirm() (a decision, not a notice); long-running command output
 * stays in the existing log-modal pattern (a toast has to stay short to
 * be readable while it's animating/auto-dismissing). z-index above the
 * modal backdrop (1000) so a toast fired from within a modal's own
 * action (e.g. "Save failed") is never hidden behind it.
 */
 .podman-toast-container {
  position: fixed; right: 20px; bottom: 20px; z-index: 1100;
  display: flex; flex-direction: column-reverse; gap: 10px; pointer-events: none;
  max-width: min(380px, calc(100vw - 40px));
 }
 .podman-toast {
  pointer-events: auto; display: flex; align-items: flex-start; gap: 10px;
  background: var(--surface); border: 1px solid var(--border); border-left: 3px solid var(--neutral);
  border-radius: 9px; box-shadow: var(--shadow); padding: 12px 14px; font-size: 13px; color: var(--text);
  animation: podman-toast-in .18s ease-out;
 }
 .podman-toast.leaving { animation: podman-toast-out .16s ease-in forwards; }
 .podman-toast-success { border-left-color: var(--good); }
 .podman-toast-warn { border-left-color: var(--warn); }
 .podman-toast-error { border-left-color: var(--bad); }
 .podman-toast .ico { flex: none; margin-top: 1px; font-size: 15px; line-height: 1; }
 .podman-toast-success .ico { color: var(--good); }
 .podman-toast-warn .ico { color: var(--warn); }
 .podman-toast-error .ico { color: var(--bad); }
 .podman-toast .msg { flex: 1; line-height: 1.45; word-break: break-word; }
 .podman-toast .close {
  appearance: none; background: none; border: none; color: var(--text-faint); cursor: pointer;
  font-size: 15px; line-height: 1; padding: 0; flex: none; font-family: var(--font-ui);
 }
 .podman-toast .close:hover { color: var(--text); }
@keyframes podman-toast-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
@keyframes podman-toast-out { from { opacity: 1; transform: translateY(0); } to { opacity: 0; transform: translateY(8px); } }
@media (prefers-reduced-motion: reduce) {
  .podman-toast, .podman-toast.leaving { animation: none; }
 }
 /* Container folders — a group header row spanning the full table width,
   sitting between normal <tr>s in the same <tbody> (see containers.js's
   renderTable()) rather than a separate nested table, so column
   alignment with member rows stays free. */
 .podman-folder-row td { padding: 0; background: var(--surface-2); border-bottom: 1px solid var(--border); }
 .podman-folder-head { display: flex; align-items: center; gap: 14px; padding: 9px 16px; flex-wrap: wrap; }
 .podman-folder-toggle {
  appearance: none; background: none; border: none; display: flex; align-items: center; gap: 10px;
  cursor: pointer; font-family: var(--font-ui); color: var(--text); padding: 0; flex: none; text-align: left;
 }
 .podman-folder-toggle .chevron { color: var(--text-faint); font-size: 10px; width: 10px; flex: none; }
 .podman-folder-toggle .ico {
  width: 22px; height: 22px; border-radius: 6px; flex: none; background: var(--surface-3);
  display: grid; place-items: center; font-size: 10.5px; border: 1px solid var(--border); color: var(--text-dim);
  overflow: hidden;
 }
 .podman-folder-toggle .ico img { width: 100%; height: 100%; object-fit: cover; }
 .podman-folder-toggle .name { font-weight: 700; font-size: 12.5px; }
 .podman-folder-toggle .count {
  font-size: 11px; color: var(--text-faint); font-weight: 700; background: var(--surface-3);
  padding: 1px 8px; border-radius: 100px; font-variant-numeric: tabular-nums; white-space: nowrap;
 }
 /* The always-visible per-member preview inside a folder's header row —
   see containers.js's folderMemberChipHtml(). Each chip opens that
   container's detail modal directly, without needing to expand the
   folder first. */
 .podman-folder-members { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; flex: 1; min-width: 0; }
 .podman-folder-member {
  appearance: none; display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--border);
  background: var(--surface); border-radius: 100px; padding: 3px 10px 3px 4px; cursor: pointer;
  font-family: var(--font-ui); color: var(--text-dim); font-size: 11.5px;
 }
 .podman-folder-member:hover { border-color: var(--accent); color: var(--text); }
 .podman-folder-member .ico { width: 18px; height: 18px; border-radius: 5px; font-size: 9px; }
 .podman-folder-member .name { font-weight: 600; }
 .podman-folder-member .dot { width: 6px; height: 6px; border-radius: 50%; flex: none; }
 .podman-folder-member .dot.good { background: var(--good); }
 .podman-folder-member .dot.bad { background: var(--bad); }
 .podman-folder-member .state { color: var(--text-faint); }