Rework Dashboard, add toasts, container folders/icons/WebUI links, detail tabs

Dashboard:
- Plain-count stat tiles (Running/Stopped/Pods/Images/Volumes/Networks)
  separated from a single "Resource Usage" card (CPU/Memory/Swap/Storage
  meter rows) instead of forcing both into one tile grid, which produced
  awkward spanning-tile/dead-cell layouts.
- Fixed CPU usage never changing (libpod's own cpuUtilization is computed
  once and never resampled) by computing it from /proc/stat deltas instead.
- Fixed memory usage reading far too high by using /proc/meminfo's
  MemAvailable instead of libpod's raw (non-reclaimable-aware) memFree.
- Added an Autostart Queue table reusing podman-autostart.sh's own
  failure-counter files.
- Dashboard and Containers now auto-refresh every ~2s (paused when the
  tab is hidden or a modal is open).

Toasts:
- Real success/warn/error/info toast notifications replacing every
  alert() used for one-way feedback, across every panel.

Container detail modal:
- 5 new tabs: Resources, Logs, Console, Events, Healthcheck.

Containers panel:
- Folders to group containers (name + icon), stored in the plugin's own
  folders.json — a folder's header always shows an icon+name+status chip
  per member, matching Unraid's own Docker page folders. "Move to
  Folder" becomes "Remove from Folder" once a container is already
  grouped.
- Containers can carry an icon URL and a WebUI URL (small button next to
  the name), both stored as container labels and auto-filled from
  templates where applicable.
- Settings: an "Add container" control for the Autostart order table.

Fixes:
- Context menus now measure their own rendered size and flip above the
  anchor when there isn't room below, instead of running off-screen.
- Containers table now uses table-layout:fixed with explicit column
  widths — auto layout was shifting every column (and the header) on
  every folder expand/collapse, and briefly again when a flex wrapper
  was mistakenly placed directly on a <td>.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>

webui/plugins/podman/javascript/dashboard.js

@@ -1,15 +1,18 @@
 /**
  * javascript/dashboard.js
  *
- * Dashboard panel: summary stat tiles fed by ajax/system.php?action=summary.
- * The Activity list and the CPU/Memory sparkline in the mockup were
- * illustrative sample data with no backing API (libpod has no "recent
- * events for a container fleet" convenience endpoint beyond raw
- * /events streaming, which is a separate follow-up — see the note
- * rendered in place of it below) — rather than fake data pretending to be
- * live, this real implementation shows what's genuinely available now
- * (the summary counts) and a clear placeholder for what needs the events
- * stream, so nobody mistakes a mock for a working feature.
+ * Dashboard panel: plain-count stat tiles (Running/Stopped/Pods/Images/
+ * Volumes/Networks) plus a single "Resource Usage" card (CPU/Memory/Swap/
+ * Storage as meter rows) — kept as two visually distinct groups rather
+ * than forcing bar-and-percentage metrics into the same tile shape as
+ * simple counts, which is what produced the awkward spanning-tile/dead-
+ * grid-cell layout this replaced. Both fed by ajax/system.php?action=
+ * summary, plus the Autostart Queue table fed by action=autostart_queue.
+ * A live scrolling event feed is deliberately out of scope here — libpod
+ * 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 });
 })();